fix(RV-396): fix UX flows for annotations and extraction (#411)

CDCgov · Nov 21, 2024 · 15bfdac · 15bfdac
1 parent 88ffe5b
commit 15bfdac
Show file tree

Hide file tree

Showing 30 changed files with 539 additions and 361 deletions.
diff --git a/frontend/src/components/ExtractUploadFile.scss b/frontend/src/components/ExtractUploadFile.scss
@@ -8,10 +8,6 @@
     margin-top: 16px;
 }
 
-.extract-file-input {
-    border: 1px dashed #005ea2;
-}
-
 .usa-file-input__target {
     border: none;
 }
@@ -34,7 +30,6 @@ p {
 
 .dashed-container {
     width: 100%;
-    height: 50%; 
     border: 1px dashed #A9AEB1;
 }
 

diff --git a/frontend/src/components/ExtractUploadFile.tsx b/frontend/src/components/ExtractUploadFile.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useEffect, useId, useState } from "react";
+import React, { ChangeEvent, useId, useState } from "react";
 import { Button, Select } from "@trussworks/react-uswds";
 import { useFiles } from "../contexts/FilesContext";
 import { useNavigate } from "react-router-dom";
@@ -24,20 +24,20 @@ interface IFilesObj {
   files: File[];
 }
 
-interface Template {
-  name: string;
-  description: string;
-  pages: {
-    image: string;
-    fieldNames: string[];
-  }[];
-}
+// interface Template {
+//   name: string;
+//   description: string;
+//   pages: {
+//     image: string;
+//     fieldNames: string[];
+//   }[];
+// }
 
 export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
   onUploadComplete,
 }) => {
   const id = useId();
-  const { addFile, clearFiles, files, setSelectedTemplates, selectedTemplates } = useFiles();
+  const { addFile, files, setSelectedTemplates, selectedTemplates , clearTemplates} = useFiles();
   const navigate = useNavigate();
   // const [templates, setTemplates] = useState<Template[]>([]);
     const templates = useQuery(
@@ -104,6 +104,12 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
   const handleSelect = (templateName: string, fileName: string, index: number) => {
     setSelectedTemplates({ templateName, fileName }, index);
   }
+
+  const onCancel = () => {
+    navigate('/');
+    clearTemplates();
+  }
+
   return (
     <div className="display-flex flex-column flex-align-start flex-justify-start height-full width-full padding-2 bg-primary-lighter">
       <div className="extract-upload-header">
@@ -217,14 +223,14 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
           type="button"
           outline
           className="margin-right-1"
-          onClick={() => navigate('/')}
+          onClick={onCancel}
         >
           Cancel Import
         </Button>
         <Button
           type="button"
           className="usa-button display-flex flex-align-center margin-left-auto margin-right-auto"
-          disabled={uploadedFile.length === 0 || selectedTemplates.length === 0}
+          disabled={uploadedFile.length === 0 || selectedTemplates.length !== uploadedFile.length}
           onClick={() => navigate("/extract/process")}
         >
           Extract Data

diff --git a/frontend/src/components/FileInput.scss b/frontend/src/components/FileInput.scss
@@ -0,0 +1,33 @@
+.header-text {
+    margin-left: 8px;
+    font-size: 14px;
+    color: black!important;
+    font-weight: 700;
+    position: relative;
+    z-index: 3;
+}
+
+.header-choose { 
+    color: #005EA2;
+    padding: 2rem 1rem;
+    pointer-events: none;
+    position: relative;
+    z-index: 3;
+}
+
+.usa-file-input {
+    display: block;
+    max-width: unset;
+}
+
+.usa-file-input__preview{
+    background-color: white;
+}
+
+.usa-file-input__target {
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
diff --git a/frontend/src/components/FileInput.tsx b/frontend/src/components/FileInput.tsx
@@ -8,6 +8,8 @@ import React, {
   import classnames from 'classnames'
 
   import { FilePreview } from './FilePreview'
+
+  import './FileInput.scss'
 
   type FileInputProps = {
     id: string
@@ -71,6 +73,7 @@ import React, {
         /Edge\/\d./i.test(navigator?.userAgent)
 
       setHideDragText(hideDragText)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [typeof navigator])
 
     useImperativeHandle(
@@ -121,10 +124,7 @@ import React, {
       'display-none': filePreviews.length > 0,
     })
 
-    const previewHeaderText =
-      filePreviews.length > 1
-        ? `${filePreviews.length} files selected`
-        : 'Selected file'
+    const previewHeaderText = `${filePreviews.length} files selected`
 
     const preventInvalidFiles = (e: React.DragEvent): void => {
       setShowError(false)
@@ -184,7 +184,8 @@ import React, {
     return (
       <div
         data-testid="file-input"
-        className={fileInputClasses}
+
+        className={`${fileInputClasses} width-full height-full`}
         aria-disabled={disabled}>
         <div
           data-testid="file-input-droptarget"
@@ -195,9 +196,9 @@ import React, {
           {filePreviews.length > 0 && (
             <div
               data-testid="file-input-preview-heading"
-              className="usa-file-input__preview-heading">
-              {previewHeaderText}{' '}
-              <span className="usa-file-input__choose">
+              className="display-flex width-full flex-row flex-justify flex-align-center">
+              <p className='header-text'>{previewHeaderText}</p>
+              <span className="header-choose">
                 Change file{filePreviews.length > 1 && 's'}
               </span>
             </div>

diff --git a/frontend/src/components/FileInput/file-input.tsx b/frontend/src/components/FileInput/file-input.tsx
@@ -63,6 +63,7 @@ import React, {
         /Edge\/\d./i.test(navigator?.userAgent)
 
       setHideDragText(hideDragText)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [typeof navigator])
 
     useImperativeHandle(

diff --git a/frontend/src/components/FilePreview.scss b/frontend/src/components/FilePreview.scss
@@ -0,0 +1,8 @@
+.file-preview {
+    margin-left: 4px;
+    margin-right: 16px;
+}
+
+.usa-file-input__preview {
+    width: 100%;
+}
diff --git a/frontend/src/components/FilePreview.tsx b/frontend/src/components/FilePreview.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react'
-import classnames from 'classnames'
+import React, { useEffect, useRef } from 'react'
 
-const SPACER_GIF =
-  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+import GreenCheck from '../assets/green_check.svg';
+
+import './FilePreview.scss';
 
 export const FilePreview = ({
   imageId,
@@ -12,19 +12,9 @@ export const FilePreview = ({
   file: File
 }): React.ReactElement => {
   const fileReaderRef = useRef<FileReader>(new FileReader())
-  const [isLoading, setIsLoading] = useState(true)
-  const [previewSrc, setPreviewSrc] = useState(SPACER_GIF)
-  const [showGenericPreview, setShowGenericPreview] = useState(false)
 
   useEffect(() => {
     const reader = fileReaderRef.current
-
-    const handleLoadEnd = (): void => {
-      setIsLoading(false)
-      setPreviewSrc(reader.result as string)
-    }
-
-    reader.onloadend = handleLoadEnd
     reader.readAsDataURL(file)
 
     return (): void => {
@@ -35,40 +25,20 @@ export const FilePreview = ({
 
   const { name } = file
 
-  const onImageError = (): void => {
-    setPreviewSrc(SPACER_GIF)
-    setShowGenericPreview(true)
-  }
-
-  const isPDF = name.endsWith('.pdf')
-  const isWord = name.endsWith('.doc') || name.endsWith('.pages')
-  const isVideo = name.endsWith('.mov') || name.endsWith('.mp4')
-  const isExcel = name.endsWith('.xls') || name.endsWith('.numbers')
-  const isGeneric = !isPDF && !isWord && !isVideo && !isExcel
-
-  const imageClasses = classnames('usa-file-input__preview-image', {
-    'is-loading': isLoading,
-    'usa-file-input__preview-image--pdf': showGenericPreview && isPDF,
-    'usa-file-input__preview-image--word': showGenericPreview && isWord,
-    'usa-file-input__preview-image--video': showGenericPreview && isVideo,
-    'usa-file-input__preview-image--excel': showGenericPreview && isExcel,
-    'usa-file-input__preview-image--generic': showGenericPreview && isGeneric,
-  })
 
   return (
     <div
       data-testid="file-input-preview"
-      className="usa-file-input__preview"
+      className="usa-file-input__preview display-flex flex-row"
       aria-hidden="true">
       <img
         id={imageId}
+        className='file-preview'
         data-testid="file-input-preview-image"
-        src={previewSrc}
+        src={GreenCheck}
         alt=""
-        className={imageClasses}
-        onError={onImageError}
       />
-      {name}
+      <p>{name}</p>
     </div>
   )
 }
diff --git a/frontend/src/components/Header.scss b/frontend/src/components/Header.scss
@@ -0,0 +1,18 @@
+.header {
+    height: '50px';
+    padding: '8px';
+}
+
+.close-button {
+    padding-right: '8px';
+}
+
+.reset-button {
+    height: '44px';
+    box-shadow: 'inset 0 0 0 2px  #adadad';
+    color: '#adadad';
+}
+
+.submit-button {
+    height: '44px';
+}
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -1,26 +1,29 @@
 import { Button, Header, Icon } from "@trussworks/react-uswds"
 import { useNavigate } from "react-router-dom";
 
+import './Header.scss';
+
 interface UploadHeaderProps {
     title: string;
+    isUpload?: boolean;
     onBack: () => void;
     onSubmit: () => void;
 }
 
-export const UploadHeader = ({ title, onBack, onSubmit }: UploadHeaderProps) => {
+export const UploadHeader = ({ title, isUpload, onBack, onSubmit }: UploadHeaderProps) => {
     const navigate = useNavigate();
     return (
-        <Header style={{ height: '50px', padding: '8px' }}>
-        <div className="display-flex height-full flex-align-center" style={{ justifyContent: 'space-between' }}>
-            <div className="display-flex flex-jusitfy-start height-full flex-align-center" style={{ justifyContent: 'space-between' }}>
-                <Button onClick={() => navigate('/')} data-testid='close-button' unstyled type="button" style={{ paddingRight: '8px' }}>
+        <Header className="header">
+        <div className="display-flex height-full flex-align-center flex-justify">
+            <div className="display-flex flex-jusitfy-start height-full flex-align-center flex-justify">
+                <Button className="close-button" onClick={() => navigate('/')} data-testid='close-button' unstyled type="button">
                     <Icon.Close size={3} color="black" />
                 </Button>
                 <h1>{title}</h1>
             </div>
             <div className="display-flex flex-jusitfy-start height-full flex-align-center">
-                <Button onClick={onBack} type="reset" outline style={{ height: '40px', boxShadow: 'inset 0 0 0 2px  #adadad', color: '#adadad'}} >Back</Button>
-                <Button onClick={onSubmit} type="submit" base style={{ height: '40px' }}>Submit</Button>
+                <Button className="reset-button" onClick={onBack} type="reset" outline>Back</Button>
+                {!isUpload && <Button className="submit-button" onClick={onSubmit} type="submit" base>Submit</Button>}
             </div>
         </div>
     </Header>

diff --git a/frontend/src/components/ImageAnnotator.tsx b/frontend/src/components/ImageAnnotator.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@trussworks/react-uswds';
 import { FC, useEffect } from 'react';
 import { ImageAnnotator, Shape } from 'react-image-label';
 import { useAnnotationContext } from '../contexts/AnnotationContext';
@@ -11,14 +10,11 @@ interface MultiImageAnnotatorProps {
 }
 
 export const MultiImageAnnotator: FC<MultiImageAnnotatorProps> = ({ images, initialShapes = [[]] }) => {
-    const {selectedField, setHandles, annotator, shapes, setShapes, index, setIndex, setDrawnFields, drawnFields, setSelectedField} = useAnnotationContext();
+    const {selectedField, setHandles, annotator, shapes, setShapes, index, setDrawnFields, drawnFields, setSelectedField} = useAnnotationContext();
 
 
 
 
-    const handleImageChange = (index: number) => {
-        setIndex(index);
-    };
 
     const handleShapeAddition = (shape: Shape) => {
         const fields = [...LABELS.patientInformation.items, ...LABELS.organizationInformation.items];
@@ -46,14 +42,7 @@ export const MultiImageAnnotator: FC<MultiImageAnnotatorProps> = ({ images, init
         getShapes();
     }, [])
     return (
-        <div className='display-flex flex-justify-center flex-align-center flex-column'>
-            <div>
-                {images.map((_, index) => (
-                        <Button key={index} onClick={() => handleImageChange(index)} type='button'>
-                            Image {index + 1}
-                        </Button>
-                ))}
-            </div>
+        <div className='display-flex flex-justify-center flex-align-center flex-column height-full width-full'>
             <ImageAnnotator
                 setHandles={setHandles}
                 naturalSize={true}

diff --git a/frontend/src/components/PageNumber.scss b/frontend/src/components/PageNumber.scss
@@ -0,0 +1,25 @@
+.page-number {
+    display: flex;
+    align-items: center;
+
+
+    &__text {
+      margin: 0 5px;
+    }
+
+    &__button {
+        display: flex;
+        margin: 0 5px;
+        border: none;
+        background-color: white;
+        align-items: center;
+        justify-content: center;
+        width: 27px;
+        height: 27px;
+    }
+
+    &__input {
+      width: 30px;
+      text-align: center;
+    }
+  }