Schreiaj/stacked pr hiccup (#238)

* Linter Cleanup

Minor changes to clean up linter errors

ghstack-source-id: cb3de56cf9f18ccc20015ab3296c507a85fb66e6
Pull Request resolved: #236

* Highlight Low Confidence Extractions

Highlights low confidence extractions:
- Dynamic computation of error count
- Highlights low confidence rows

ghstack-source-id: 014d1a0a5067243cc28c930533762969a1fbb2cb
Pull Request resolved: #237

Author: schreiaj

OCR/frontend/e2e/App.spec.ts

@@ -52,7 +52,7 @@ test.describe('when templates exist', async () => {
             localStorage.setItem('templates', JSON.stringify(templates))
         })
     })
-    test('displays list of templates if they exist and sorting functions', async ({page, baseURL}) => {
+    test('displays list of templates if they exist and sorting functions', async ({page}) => {
         await page.goto('/')
         await expect(page.getByRole('heading', { name: 'Saved Templates' })).toBeVisible()
         await expect(page.locator('tbody').getByRole('row')).toHaveCount(4)

OCR/frontend/e2e/ReviewTemplate.spec.ts

@@ -53,6 +53,6 @@ test.describe("ReviewTemplate Page", () => {
     const headers = page.locator("th");
     await expect(headers.nth(0)).toHaveText("Label"); // First header
     await expect(headers.nth(1)).toHaveText("Value"); // Second header
-    await expect(headers.nth(2)).toHaveText("Label Confidence"); // Third header
+    await expect(headers.nth(3)).toHaveText("Label Confidence"); // Third header
   });
 });

OCR/frontend/src/components/SortableTable/SortableTable.tsx

@@ -1,17 +1,17 @@
 import {FC, useState} from 'react';
-import {Icon, Table} from "@trussworks/react-uswds";
+import {Table} from "@trussworks/react-uswds";
 import SortArrow from './sort-direction-arrow.svg'
 import SortableIcon from './sortable-icon.svg'
 import './SortableTable.scss'
 
 interface SortableTableProps {
-    data: Array<Map<string, any>>,
+    data: Array<Map<string, object>>,
     sortableBy: Array<string> | undefined,
     defaultSort: string | undefined,
     defaultDescending: boolean | undefined,
     columns: Array<string> | undefined,
     columnNames: Map<string, string> | undefined,
-    formatters: Map<string, (any) => any> | undefined
+    formatters: Map<string, (any) => object> | undefined
 }
 
 const SORTS = {
@@ -23,17 +23,18 @@ const SORTS = {
 
 export const SortableTable: FC<SortableTableProps> = ({
                                                           data,
-                                                          sortableBy,
-                                                          defaultSort,
-                                                          defaultDescending = false,
                                                           columns = Object.keys(data[0]),
+                                                          sortableBy = columns,
+                                                          defaultSort = columns?.[0],
+                                                          defaultDescending = false,
+
                                                           formatters = {},
                                                           columnNames = {},
                                                       }: SortableTableProps) => {
 
-    const [sortBy, setSortBy] = useState(defaultSort || columns?.[0])
+    const [sortBy, setSortBy] = useState(defaultSort)
     const [isDescending, setIsDescending] = useState(defaultDescending)
-
+    const sortableSet = new Set(sortableBy || [])
     const updateSort = (column: string) => {
         if (column === sortBy) {
             setIsDescending(!isDescending)
@@ -45,6 +46,7 @@ export const SortableTable: FC<SortableTableProps> = ({
     const columnData = data?.[0]?.[sortBy]
     const columnType = Object.prototype.toString.call(columnData)
     const sortFunc = SORTS[columnType] || new Intl.Collator(navigator.language).compare
+
     const sortedData = data?.toSorted((a, b) => sortFunc(a[sortBy], b[sortBy])) || []
 
     if (isDescending) {
@@ -57,7 +59,8 @@ export const SortableTable: FC<SortableTableProps> = ({
                 <thead>
                 <tr>
                     {columns.map((c, idx) => {
-                        return <SortableTableHeader key={String(idx)} sortBy={sortBy as string} column={c} name={columnNames?.[c] || c}
+                        return <SortableTableHeader key={String(idx)} disabled={!sortableSet.has(c)}
+                                                    sortBy={sortBy as string} column={c} name={columnNames?.[c] || c}
                                                     isDescending={isDescending || false} onClick={updateSort}/>
                     })}
                 </tr>
@@ -82,22 +85,24 @@ interface SortableTableHeaderProps {
     column: string,
     isDescending: boolean,
     onClick: (string) => void,
-    key: string
+    key: string,
+    disabled: boolean
 }
 
 const SortableTableHeader: FC<SortableTableHeaderProps> = ({
                                                                sortBy,
                                                                name, column, isDescending,
-                                                               onClick
+                                                               onClick,
+                                                               disabled = false
                                                            }: SortableTableHeaderProps) => {
 
     const isSortedBy = sortBy === column
     return (
-        <th onClick={() => onClick(column)}>
+        <th onClick={disabled?() => {}:() => onClick(column)}>
             <div className="display-flex flex-row">
                 <div>{name}</div>
                 <div className="flex-1"></div>
-            {isSortedBy ? <SortOrderIcon isDescending={isDescending}/> : <SortIcon/>}
+            {!disabled && (isSortedBy ? <SortOrderIcon isDescending={isDescending}/> : <SortIcon/>)}
             </div>
         </th>
     )

OCR/frontend/src/components/TemplatesIndex/TemplatesIndex.tsx

@@ -4,10 +4,9 @@ import {SortableTable} from "../SortableTable/SortableTable.tsx";
 import {useNavigate} from "react-router-dom";
 import extractImage from "../../assets/extract_image.svg";
 
-interface TemplateIndexProps {
-}
+type TemplateIndexProps = unknown
 
-export const TemplatesIndex: FC<TemplateIndexProps> = ({}) => {
+export const TemplatesIndex: FC<TemplateIndexProps> = () => {
     const [templates, setTemplates] = useState([])
     const navigate = useNavigate()
     useEffect(() => {
@@ -128,7 +127,7 @@ export const TemplatesIndex: FC<TemplateIndexProps> = ({}) => {
             delete window.ClearTemplates
             delete window.LoadSavedTemplates
         }
-    }, []);
+    });
 
     if (!templates || templates.length === 0) {
         return (
@@ -168,7 +167,8 @@ export const TemplatesIndex: FC<TemplateIndexProps> = ({}) => {
                     <h2>Saved Templates</h2>
                     <SortableTable columns={templateColumns} data={templates}
                                    formatters={templateColumnFormatters}
-                                   columnNames={templateColumnNames}/>
+                                   columnNames={templateColumnNames}
+                    />
                 </div>
             </div>
         </>)

OCR/frontend/src/pages/ReviewTemplate.tsx

@@ -43,6 +43,10 @@ const ReviewTemplate: React.FC = () => {
         text: "5",
         confidence: 97.1,
       },
+      DateOfService: {
+        text: "/20/2024",
+        confidence: 45.2
+      }
     },
   };
 
@@ -74,7 +78,8 @@ const ReviewTemplate: React.FC = () => {
   }
 
   const { file_image, results } = submissionData;
-
+  const errorCount = Object.values(results).filter(r => r.confidence <= 75.0).length
+  const hasErrors = errorCount > 0
   return (
     <div className="display-flex flex-column flex-justify-start width-full height-full padding-1 padding-top-2">
       <ExtractDataHeader
@@ -109,27 +114,32 @@ const ReviewTemplate: React.FC = () => {
               Review and edit errors before you submit.
             </p>
             <div className="display-flex flex-align-center text-error">
-              <span className="font-sans-sm margin-right-1">Errors: 1</span>
-              <Icon.Warning className="text-error" />
+              {hasErrors && <><span className="font-sans-sm margin-right-1">Errors: {errorCount}</span>
+                <Icon.Warning className="text-error"/></>}
             </div>
           </div>
 
           <Table fullWidth striped>
             <thead>
-              <tr>
+            <tr>
                 <th>Label</th>
                 <th>Value</th>
+              <th></th>
                 <th>Label Confidence</th>
               </tr>
             </thead>
             <tbody>
-              {Object.entries(results).map(([key, value]) => (
-                <tr key={key}>
-                  <td>{key}</td>
-                  <td>{value.text}</td>
-                  <td>{value.confidence}%</td>
-                </tr>
-              ))}
+            {Object.entries(results).map(([key, value]) => {
+              const isError = value.confidence <= 75.0
+              return (
+                  <tr key={key}>
+                    <td>{key}</td>
+                    <td className={`${isError ? 'text-error' : ''}`}>{value.text}</td>
+                    <td>{isError && <Icon.Warning className="text-error"/>}</td>
+                    <td className={`${isError ? 'text-error' : ''}`}>{value.confidence}%</td>
+                  </tr>
+              )
+            })}
             </tbody>
           </Table>
         </div>

OCR/frontend/src/types/templates.ts

@@ -1,4 +1,4 @@
-interface Template  {
+interface Template {
     name: string;
     lastUpdated: Date | undefined;
     createdBy: string | undefined;

OCR/frontend/tsconfig.json

@@ -3,5 +3,8 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "compilerOptions": {
+    "lib": ["ESNext.Array"]
+  }
 }