build_review_page_197 (#232)

* initial * added sub template and edited close button navigation * added ReviewTemplate logic * edited fallback * css edits * created playwrite tests * minor edits to review template * minor edits * edits to testing spec file --------- Co-authored-by: Arindam Kulshi <[email protected]>
CDCgov · Sep 18, 2024 · f7f1fcd · f7f1fcd
1 parent e37c813
commit f7f1fcd
Show file tree

Hide file tree

Showing 7 changed files with 275 additions and 6 deletions.
diff --git a/OCR/frontend/e2e/ReviewTemplate.spec.ts b/OCR/frontend/e2e/ReviewTemplate.spec.ts
@@ -0,0 +1,58 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("ReviewTemplate Page", () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the ReviewTemplate page
+    await page.goto("http://localhost:5173/extract/review");
+  });
+
+  test("Document image scrollable", async ({ page }) => {
+    // Check if the document is scrollable
+    const scrollContainer = page.locator("div[style*='overflow-y: auto']");
+    const beforeScroll = await scrollContainer.evaluate((el) => el.scrollTop);
+
+    await scrollContainer.evaluate((el) => el.scrollBy(0, 100));
+    const afterScroll = await scrollContainer.evaluate((el) => el.scrollTop);
+
+    expect(afterScroll).toBeGreaterThan(beforeScroll);
+  });
+
+  // Test the Back button functionality
+  test("Back button navigates correctly", async ({ page }) => {
+    const backButton = page.getByRole("button", { name: "Back" });
+    await expect(backButton).toBeVisible();
+
+    await backButton.click();
+    await expect(page).toHaveURL("/extract/upload");
+  });
+
+  // Test the Submit button functionality
+  test("Submit button navigates correctly", async ({ page }) => {
+    const submitButton = page.getByRole("button", { name: "Submit" });
+    await expect(submitButton).toBeVisible();
+
+    await submitButton.click();
+    await expect(page).toHaveURL("/extract/submit");
+  });
+
+  // Test the extracted data section
+  test("Displays extracted data with overall confidence score", async ({
+    page,
+  }) => {
+    const extractedDataHeader = page.getByRole("heading", {
+      name: "Extracted Data",
+    });
+    await expect(extractedDataHeader).toBeVisible();
+
+    await expect(page.locator("p.font-sans")).toHaveText(
+      "Review and edit errors before you submit."
+    );
+  });
+
+  test("Table contains the correct headers", async ({ 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
+  });
+});
diff --git a/OCR/frontend/src/components/ExtractDataHeader.tsx b/OCR/frontend/src/components/ExtractDataHeader.tsx
@@ -4,12 +4,14 @@ import { Button, Icon, Header } from "@trussworks/react-uswds";
 interface ExtractDataHeaderProps {
   onBack: () => void;
   onSubmit: () => void;
+  onExit: () => void;
   isUploadComplete: boolean;
 }
 
 export const ExtractDataHeader: React.FC<ExtractDataHeaderProps> = ({
   onBack,
   onSubmit,
+  onExit,
   isUploadComplete,
 }) => {
   return (
@@ -27,7 +29,7 @@ export const ExtractDataHeader: React.FC<ExtractDataHeaderProps> = ({
             unstyled
             type="button"
             style={{ paddingRight: "8px" }}
-            onClick={onBack}
+            onClick={onExit}
           >
             <Icon.Close size={3} color="black" />
           </Button>
@@ -36,7 +38,6 @@ export const ExtractDataHeader: React.FC<ExtractDataHeaderProps> = ({
         <div className="display-flex flex-align-center">
           <Button
             onClick={onBack}
-            disabled={true}
             type="reset"
             outline
             style={{

diff --git a/OCR/frontend/src/main.tsx b/OCR/frontend/src/main.tsx
@@ -15,8 +15,9 @@ import "./App.scss";
 import { AnnotationProvider } from "./contexts/AnnotationContext.tsx";
 import ExtractUpload from "./pages/ExtractUpload.tsx";
 import ExtractProcess from "./pages/ExtractProcess.tsx";
-import { SaveTemplate } from './pages/SaveTemplate.tsx';
-
+import { SaveTemplate } from "./pages/SaveTemplate.tsx";
+import ReviewTemplate from "./pages/ReviewTemplate.tsx";
+import SubmissionTemplate from "./pages/SubmissionTemplate.tsx";
 
 const router = createBrowserRouter([
   {
@@ -39,10 +40,18 @@ const router = createBrowserRouter([
     path: "/extract/process",
     element: <ExtractProcess />,
   },
- {
+  {
     path: "/new-template/save",
     element: <SaveTemplate />,
-  }
+  },
+  {
+    path: "/extract/review",
+    element: <ReviewTemplate />,
+  },
+  {
+    path: "/extract/submit",
+    element: <SubmissionTemplate />,
+  },
 ]);
 
 createRoot(document.getElementById("root")!).render(

diff --git a/OCR/frontend/src/pages/ExtractUpload.tsx b/OCR/frontend/src/pages/ExtractUpload.tsx
@@ -18,6 +18,7 @@ const ExtractUpload = () => {
     <div className="display-flex flex-column flex-justify-start width-full height-full padding-1 padding-top-2">
       <ExtractDataHeader
         onBack={() => navigate("/")}
+        onExit={() => navigate("/")}
         onSubmit={() => navigate("/extract/process")}
         isUploadComplete={isUploadComplete}
       />

diff --git a/OCR/frontend/src/pages/ReviewTemplate.tsx b/OCR/frontend/src/pages/ReviewTemplate.tsx
@@ -0,0 +1,159 @@
+import { ExtractStep } from "../utils/constants";
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import ExtractDataHeader from "../components/ExtractDataHeader";
+import React from "react";
+import { ExtractStepper } from "../components/ExtractStepper";
+import { Table, Icon } from "@trussworks/react-uswds";
+import { Divider } from "../components/Divider";
+import documentImage from "./SyphForm.png"; //Please enter your file of choice here
+
+interface Result {
+  text: string;
+  confidence: number;
+}
+
+interface SubmissionData {
+  template_name: string;
+  file_image: string;
+  results: {
+    [key: string]: Result;
+  };
+}
+
+const ReviewTemplate: React.FC = () => {
+  const navigate = useNavigate();
+  const [submissionData, setSubmissionData] = useState<SubmissionData | null>(
+    null
+  );
+
+  const fakeData = {
+    template_name: "Syph Template",
+    file_image: documentImage,
+    results: {
+      Name: {
+        text: "TESTPATIENT,13",
+        confidence: 98.75,
+      },
+      Patient_ID: {
+        text: "12090546",
+        confidence: 95.42,
+      },
+      Age: {
+        text: "5",
+        confidence: 97.1,
+      },
+    },
+  };
+
+  useEffect(() => {
+    const data = localStorage.getItem("submission");
+    if (data) {
+      setSubmissionData(JSON.parse(data));
+    } else {
+      // use fakedata if no data
+      setSubmissionData(fakeData);
+    }
+  }, []);
+
+  const handleBack = () => {
+    navigate("/extract/upload");
+  };
+
+  const handleSubmit = () => {
+    navigate("/extract/submit");
+  };
+
+  const handleClose = () => {
+    navigate("/");
+  };
+
+  //fallback if no valid template is available can edit if needed
+  if (!submissionData) {
+    return <div>No submission Data</div>;
+  }
+
+  const { file_image, results } = submissionData;
+
+  return (
+    <div className="display-flex flex-column flex-justify-start width-full height-full padding-1 padding-top-2">
+      <ExtractDataHeader
+        onSubmit={handleSubmit}
+        onExit={handleClose}
+        onBack={handleBack}
+        isUploadComplete={true}
+      />
+      <Divider margin="0px" />
+      <div className="display-flex flex-justify-center padding-top-4">
+        <ExtractStepper currentStep={ExtractStep.Review} />
+      </div>
+
+      <div className="display-flex flex-justify-between padding-top-4">
+        <div className="width-50">
+          <div className="margin-top-2 margin-bottom-1">
+            <div className="display-flex flex-align-center">
+              <h3>Extracted Data</h3>
+            </div>
+            <div className="display-flex flex-align-center">
+              <Icon.Star
+                aria-hidden={true}
+                className="text-primary margin-right-1"
+              />
+              <span className="font-sans-md font-weight-semibold">
+                Overall confidence score (CS):
+                <span className="text-green margin-left-05">96%</span>
+              </span>
+              <Icon.Help aria-hidden={true} className="margin-left-1" />
+            </div>
+            <p className="font-sans">
+              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" />
+            </div>
+          </div>
+
+          <Table fullWidth striped>
+            <thead>
+              <tr>
+                <th>Label</th>
+                <th>Value</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>
+              ))}
+            </tbody>
+          </Table>
+        </div>
+        <div className="width-50">
+          <div
+            style={{
+              maxHeight: "500px",
+              overflowY: "auto",
+            }}
+          >
+            <img
+              src={documentImage}
+              alt={file_image}
+              style={{
+                width: "90",
+                transform: "scale(0.95)",
+                transformOrigin: "top left",
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReviewTemplate;
diff --git a/OCR/frontend/src/pages/SubmissionTemplate.tsx b/OCR/frontend/src/pages/SubmissionTemplate.tsx
@@ -0,0 +1,41 @@
+
+import { ExtractStep } from "../utils/constants";
+import { useNavigate } from "react-router-dom";
+import ExtractDataHeader from "../components/ExtractDataHeader";
+import React from "react";
+import { ExtractStepper } from "../components/ExtractStepper";
+import { Divider } from "../components/Divider";
+
+const SubmissionTemplate: React.FC = () => {
+
+
+const navigate = useNavigate();
+
+
+
+  const handleBack = () => {
+    navigate("/");
+  };
+
+  const handleSubmit = () => {
+    navigate("/");
+  };
+
+  const handleClose = () => {
+    navigate("/");
+  };
+
+
+
+  return (
+    <div className="display-flex flex-column flex-justify-start width-full height-full padding-1 padding-top-2">
+    <ExtractDataHeader  onSubmit={handleSubmit}  onExit={handleClose} onBack={handleBack} isUploadComplete={true} />
+    <Divider margin="0px" />
+    <div className="display-flex flex-justify-center padding-top-4">
+    <ExtractStepper currentStep={ExtractStep.Submit} />
+      </div>
+  </div>
+  );
+};
+
+export default SubmissionTemplate
diff --git a/OCR/frontend/src/pages/SyphForm.png b/OCR/frontend/src/pages/SyphForm.png