From 8c6e4e8d343cc71fd5063d4086868ea651096812 Mon Sep 17 00:00:00 2001
From: charliecarlton <charliecarlton@gmail.com>
Date: Thu, 22 Aug 2024 14:04:14 -0600
Subject: [PATCH 1/2] Generate assertions page with status table and timeout
 input

---
 client/screen.css                             |   5 +
 client/src/action/createFetchAction.ts        |   7 +-
 .../DefineAudit/GenerateAssertionsPage.tsx    | 139 +++++++++++++-----
 client/src/reducer/root.ts                    |  12 ++
 client/src/types/dos.d.ts                     |   9 ++
 5 files changed, 134 insertions(+), 38 deletions(-)

diff --git a/client/screen.css b/client/screen.css
index 0d7a3633..1302ef14 100644
--- a/client/screen.css
+++ b/client/screen.css
@@ -947,3 +947,8 @@ th.rla-county-contest-info {
     display: inline-block;
 
 }
+
+.generate-assertions-exports {
+    float: right;
+    margin-right: 175px;
+}
diff --git a/client/src/action/createFetchAction.ts b/client/src/action/createFetchAction.ts
index 73913322..7b06a060 100644
--- a/client/src/action/createFetchAction.ts
+++ b/client/src/action/createFetchAction.ts
@@ -19,7 +19,7 @@ function createFetchAction(config: CreateFetchConfig) {
         url,
     } = config;
 
-    async function fetchAction() {
+    async function fetchAction(queryParams: URLSearchParams | null = null) {
         action(sendType);
 
         const init: RequestInit = {
@@ -28,7 +28,10 @@ function createFetchAction(config: CreateFetchConfig) {
         };
 
         try {
-            const r = await fetch(url, init);
+            // append query string if provided
+            const fullUrl = queryParams ? `${url}?${queryParams.toString()}` : url;
+
+            const r = await fetch(fullUrl, init);
 
             if (!r.ok) {
                 action(failType);
diff --git a/client/src/component/DOS/DefineAudit/GenerateAssertionsPage.tsx b/client/src/component/DOS/DefineAudit/GenerateAssertionsPage.tsx
index f654e919..28a5e88d 100644
--- a/client/src/component/DOS/DefineAudit/GenerateAssertionsPage.tsx
+++ b/client/src/component/DOS/DefineAudit/GenerateAssertionsPage.tsx
@@ -1,11 +1,14 @@
+import counties from 'corla/data/counties';
+import * as _ from 'lodash';
 import * as React from 'react';
 
-import { Breadcrumb, Button, Card, Intent } from '@blueprintjs/core';
+import { Breadcrumb, Button, Card, Intent, Spinner } from '@blueprintjs/core';
 
+import exportAssertionsAsCsv from 'corla/action/dos/exportAssertionsAsCsv';
+import exportAssertionsAsJson from 'corla/action/dos/exportAssertionsAsJson';
 import generateAssertions from 'corla/action/dos/generateAssertions';
 import DOSLayout from 'corla/component/DOSLayout';
-import exportAssertionsAsJson from "corla/action/dos/exportAssertionsAsJson";
-import exportAssertionsAsCsv from "corla/action/dos/exportAssertionsAsCsv";
+import AssertionStatus = DOS.AssertionStatus;
 
 const Breadcrumbs = () => (
     <ul className='pt-breadcrumbs mb-default'>
@@ -23,6 +26,8 @@ interface GenerateAssertionsPageProps {
 
 interface GenerateAssertionsPageState {
     canGenerateAssertions: boolean;
+    generatingAssertions: boolean;
+    generationTimeOutSeconds: number;
 }
 
 class GenerateAssertionsPage extends React.Component<GenerateAssertionsPageProps, GenerateAssertionsPageState> {
@@ -31,6 +36,8 @@ class GenerateAssertionsPage extends React.Component<GenerateAssertionsPageProps
 
         this.state = {
             canGenerateAssertions: !props.dosState.assertionsGenerated && props.readyToGenerate,
+            generatingAssertions: false,
+            generationTimeOutSeconds: 5,
         };
     }
 
@@ -42,14 +49,18 @@ class GenerateAssertionsPage extends React.Component<GenerateAssertionsPageProps
         } = this.props;
 
         const generate = async () => {
+            this.setState({generatingAssertions: true});
             this.setState({canGenerateAssertions: false});
             this.render();
 
-            generateAssertions().then()
+            const timeoutQueryParams = new URLSearchParams();
+            timeoutQueryParams.set('generationTimeOutSeconds', this.state.generationTimeOutSeconds.toString());
+            generateAssertions(timeoutQueryParams).then()
                 .catch(reason => {
                     alert('generateAssertions error in fetchAction ' + reason);
                 });
 
+            this.setState({generatingAssertions: false});
             this.setState({canGenerateAssertions: true});
         };
 
@@ -61,55 +72,111 @@ class GenerateAssertionsPage extends React.Component<GenerateAssertionsPageProps
                     Assertions will be generated for all IRV contests to
                     support opportunistic discrepancy computation.
                 </p>
-                <p>
-                    Only click on 'Generate Assertions' once! This prototype is
-                    is not sophisticated enough to replace a contest's assertions
-                    in the database (re-generating assertions will just replicate
-                    those that already exist).
-                </p>
-                <p>
-                    This prototype is also not sophisticated enough to give you
-                    feedback on how assertion generation is progressing ... but
-                    once it is done either a green alert will tell you that it
-                    was successful or a red one will tell you it has failed.
-                </p>
-                <p>
-                    Then click on 'Export Assertions' and the generated assertions
-                    will be exported to a JSON file and automatically downloaded.
-                </p>
                 <div className='control-buttons mt-default'>
                     <Button onClick={generate}
-                            disabled={!this.state.canGenerateAssertions}
+                            disabled={!this.state.canGenerateAssertions || this.state.generatingAssertions}
                             className='pt-button pt-intent-primary'>
                         Generate Assertions
                     </Button>
                 </div>
-
-                <div className='control-buttons mt-default'>
-                    <Button onClick={exportAssertionsAsJson}
-                            className='pt-button pt-intent-primary'>
-                        Export Assertions as JSON
-                    </Button>
-                </div>
-
-                <div className='control-buttons mt-default'>
-                    <Button onClick={exportAssertionsAsCsv}
-                            className='pt-button pt-intent-primary'>
-                        Export Assertions as CSV
-                    </Button>
-                </div>
-
+                { this.displayTimeoutInput() &&
+                    <div>
+                        <label htmlFor='timeOut'>Timeout (in seconds): </label>
+                        <input
+                            name='timeOut'
+                            type='number'
+                            min={5}
+                            max={999}
+                            className='pt-input'
+                            style={{width: '60px'}}
+                            value={this.state.generationTimeOutSeconds}
+                            onChange={this.onTimeoutChange}>
+                        </input>
+                    </div>
+                }
                 <div className='control-buttons mt-default'>
                     <Button onClick={forward}
                             className='pt-button pt-intent-primary'>
                         Next
                     </Button>
                 </div>
+                <div>
+                    {this.getAssertionGenerationStatusTable()}
+                </div>
             </div>;
 
         return <DOSLayout main={main}/>;
     }
 
+    private displayTimeoutInput() {
+        return this.props.dosState.assertionGenerationStatuses &&
+            this.props.dosState.assertionGenerationStatuses.some(ags => !ags.succeeded && ags.retry);
+    }
+
+    private onTimeoutChange = (event: React.FormEvent<HTMLInputElement>) => {
+        const timeout = (event.target as HTMLInputElement).value;
+        this.setState({generationTimeOutSeconds: Number(timeout)});
+    }
+
+    private getAssertionGenerationStatusTable() {
+        interface RowProps {
+            status: AssertionStatus;
+        }
+
+        const AssertionStatusTableRow = (props: RowProps) => {
+            const {status} = props;
+
+            return (
+                <tr>
+                    <td>{ status.contestName }</td>
+                    <td style={{color:  status.succeeded ? 'green' : 'red'}}>
+                        { status.succeeded ? 'Success' : 'Failure' }
+                    </td>
+                    { !status.succeeded ?
+                        (<td>{status.retry ? 'Yes' : 'No'}</td>)
+                        :
+                        (<td></td>)
+                    }
+                </tr>
+            );
+        };
+
+        const assertionRows = _.map(this.props.dosState.assertionGenerationStatuses, a => (
+            <AssertionStatusTableRow key={ a.contestName } status={ a } />
+        ));
+
+        if (this.state.generatingAssertions) {
+            return (
+                <Card className='mt-default'>
+                    <Spinner className='pt-medium' intent={ Intent.PRIMARY } />
+                    <div>Generating Assertions...</div>
+                </Card>
+            );
+        } else if (this.props.dosState.assertionGenerationStatuses) {
+            return (
+                <div>
+                <span className='generate-assertions-exports'>
+                    <b>Export Assertions: </b>
+                    <a href='#' onClick={exportAssertionsAsCsv}>CSV</a>
+                    &nbsp;|&nbsp;
+                    <a href='#' onClick={exportAssertionsAsJson}>JSON</a>
+                </span>
+                    <table className='pt-html-table pt-html-table-striped rla-table mt-default'>
+                        <thead>
+                        <tr>
+                            <th>Contest</th>
+                            <th>Assertion Generation Status</th>
+                            <th>Can Retry</th>
+                        </tr>
+                        </thead>
+                        <tbody>{ assertionRows }</tbody>
+                    </table>
+                </div>
+            );
+        } else {
+            return <div />;
+        }
+    }
 }
 
 export default GenerateAssertionsPage;
diff --git a/client/src/reducer/root.ts b/client/src/reducer/root.ts
index 65ccbec1..5fdd2330 100644
--- a/client/src/reducer/root.ts
+++ b/client/src/reducer/root.ts
@@ -22,6 +22,7 @@ import dosLoginOk from './dos/loginOk';
 import uploadRandomSeedOk from './dos/uploadRandomSeedOk';
 
 import login1FOk from './login1FOk';
+import AssertionStatus = DOS.AssertionStatus;
 
 // Default state is preloaded in the module `corla/store`.
 export default function root(state: AppState, action: Action.App) {
@@ -167,6 +168,17 @@ export default function root(state: AppState, action: Action.App) {
     case 'GENERATE_ASSERTIONS_OK': {
         const nextState = { ...state } as DOS.AppState;
 
+        // Put failed assertion generations at the front of the list
+        nextState.assertionGenerationStatuses = action.data.sort((a: AssertionStatus, b: AssertionStatus) => {
+            if (a.succeeded && !b.succeeded) {
+                return 1;
+            }
+            if (!a.succeeded && b.succeeded) {
+                return -1;
+            }
+            return 0;
+        });
+
         nextState.generatingAssertions = false;
         nextState.assertionsGenerated = true;
 
diff --git a/client/src/types/dos.d.ts b/client/src/types/dos.d.ts
index 96309ae8..38d9abee 100644
--- a/client/src/types/dos.d.ts
+++ b/client/src/types/dos.d.ts
@@ -17,9 +17,18 @@ declare namespace DOS {
         standardizingContests?: boolean;
         generatingAssertions?: boolean;
         assertionsGenerated?: boolean;
+        assertionGenerationStatuses?: DOS.AssertionGenerationStatuses;
         type: 'DOS';
     }
 
+    interface AssertionStatus {
+        contestName: string;
+        succeeded: boolean;
+        retry: boolean;
+    }
+
+    interface AssertionGenerationStatuses extends Array<AssertionStatus> {}
+
     interface EstimatedBallotsToAudit {
         [contestId: number]: number;
     }

From a2ad3d3887eb05b7caedd60b1f0bacc47d35663c Mon Sep 17 00:00:00 2001
From: charliecarlton <charliecarlton@gmail.com>
Date: Mon, 26 Aug 2024 09:18:54 -0600
Subject: [PATCH 2/2] Change to 'advise retry' and show Retry for successful
 generations also

---
 .../component/DOS/DefineAudit/GenerateAssertionsPage.tsx  | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/src/component/DOS/DefineAudit/GenerateAssertionsPage.tsx b/client/src/component/DOS/DefineAudit/GenerateAssertionsPage.tsx
index 28a5e88d..d2314ebc 100644
--- a/client/src/component/DOS/DefineAudit/GenerateAssertionsPage.tsx
+++ b/client/src/component/DOS/DefineAudit/GenerateAssertionsPage.tsx
@@ -132,11 +132,7 @@ class GenerateAssertionsPage extends React.Component<GenerateAssertionsPageProps
                     <td style={{color:  status.succeeded ? 'green' : 'red'}}>
                         { status.succeeded ? 'Success' : 'Failure' }
                     </td>
-                    { !status.succeeded ?
-                        (<td>{status.retry ? 'Yes' : 'No'}</td>)
-                        :
-                        (<td></td>)
-                    }
+                    <td>{status.retry ? 'Yes' : 'No'}</td>
                 </tr>
             );
         };
@@ -166,7 +162,7 @@ class GenerateAssertionsPage extends React.Component<GenerateAssertionsPageProps
                         <tr>
                             <th>Contest</th>
                             <th>Assertion Generation Status</th>
-                            <th>Can Retry</th>
+                            <th>Advise Retry</th>
                         </tr>
                         </thead>
                         <tbody>{ assertionRows }</tbody>