Create the annotate page skeleton (#176)

* update git ignore

* add anotate page skeleton

* remove extra files

.gitignore

@@ -386,3 +386,24 @@ poetry.toml
 pyrightconfig.json
 
 # End of https://www.toptal.com/developers/gitignore/api/python
+
+# Created by https://www.toptal.com/developers/gitignore/api/react
+# Edit at https://www.toptal.com/developers/gitignore?templates=react
+
+### react ###
+.DS_*
+*.log
+logs
+**/*.backup.*
+**/*.back.*
+
+node_modules
+bower_components
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+# End of https://www.toptal.com/developers/gitignore/api/react

OCR/frontend/src/componets/Stepper.tsx

@@ -1,20 +1,32 @@
 import { StepIndicator, StepIndicatorStep } from "@trussworks/react-uswds"
+import {AnnotateStep} from "../utils/constants.ts";
+
+export const Stepper = ({currentStep}: {currentStep: AnnotateStep}) => {
+
+  const stepOrder: AnnotateStep[] = [
+    AnnotateStep.Upload,
+    AnnotateStep.Annotate,
+    AnnotateStep.Save
+  ]
+
+  const determineStatus = (step: AnnotateStep, currentStep: AnnotateStep) => {
+      const currentStepIndex = stepOrder.indexOf(currentStep);
+      const stepIndex = stepOrder.indexOf(step);
+      if(currentStepIndex > stepIndex) return "complete";
+      else if(currentStepIndex === stepIndex) return "current";
+      else return "incomplete";
+    }
+
 
-export const Stepper = () => {
     return (
         <StepIndicator data-testid='step-indicator'  headingLevel="h5" headingProps={{  style: { display: 'none' }}}>
+          {stepOrder.map((step: AnnotateStep) => (
             <StepIndicatorStep
-                label="Upload New Segment"
-                status="current"
-            />
-            <StepIndicatorStep
-                label="Annotate"
-                status="incomplete"
-            />
-            <StepIndicatorStep
-                label="Save Templete"
-                status="incomplete"
+              key={step}
+              label= {step}
+              status={determineStatus(step, currentStep)}
             />
+          ))}
         </StepIndicator>
     )
 }

OCR/frontend/src/componets/tests/Stepper.test.tsx

@@ -1,11 +1,12 @@
-import { render, screen } from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { describe, it, expect } from 'vitest';
-import { Stepper } from '../Stepper';
+import {describe, expect, it} from 'vitest';
+import {Stepper} from '../Stepper';
+import {AnnotateStep} from "../../utils/constants.ts";
 
 describe('Stepper component', () => {
   it('renders the StepIndicator component', () => {
-    render(<Stepper />);
+    render(<Stepper currentStep={AnnotateStep.Upload}/>);
 
     // Check that the StepIndicator is rendered
     const stepIndicator = screen.getByTestId('step-indicator');

OCR/frontend/src/pages/AnnotateTemplate.tsx

@@ -1,11 +1,77 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import {UploadHeader} from "../componets/Header.tsx";
+import {Divider} from "../componets/Divider.tsx";
+import {Stepper} from "../componets/Stepper.tsx";
+import {AnnotateStep} from "../utils/constants.ts";
+import {useFiles} from "../contexts/FilesContext.tsx";
+import  * as pdfjsLib from "pdfjs-dist";
 
 const AnnotateTemplate: React.FC = () => {
-    return (
-        <div data-testid ='annotate-container'>
-            Hello World
+
+
+  const [images, setImages] = useState<string[]>([]);
+
+  const {files} = useFiles();
+  const pdfFile = files[0];
+  if (pdfFile === undefined) {
+    // navigate back to upload
+  }
+
+
+  useEffect(() => {
+
+    //CDN works, todo investigate a way to circumvent this issue
+    pdfjsLib.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;
+
+    const convertPdfToImages = async (file: File) => {
+      const images: Array<string>= [];
+      const data = URL.createObjectURL(file)
+      const pdf = await pdfjsLib.getDocument(data).promise;
+      const canvas = document.createElement("canvas");
+      for (let i = 0; i < pdf.numPages; i++) {
+        const page = await pdf.getPage(i + 1);
+        const viewport = page.getViewport({ scale: 1 });
+        const context = canvas.getContext("2d")!;
+        canvas.height = viewport.height;
+        canvas.width = viewport.width;
+        await page.render({ canvasContext: context, viewport: viewport }).promise;
+        images.push(canvas.toDataURL());
+      }
+      canvas.remove();
+      return images;
+    }
+
+    convertPdfToImages(pdfFile).then((imgs) => {
+      setImages(imgs);
+      console.log(imgs)
+    });
+
+  }, [files])
+
+  console.log(images)
+
+  return (
+    <div className="display-flex flex-column flex-justify-start width-full height-full padding-1 padding-top-2">
+      <UploadHeader/>
+      <Divider margin="0px"/>
+      <div className="display-flex flex-justify-center padding-top-4">
+        <Stepper currentStep={AnnotateStep.Annotate}/>
+      </div>
+      <Divider margin="0px"/>
+
+      <div className="grid-row height-full">
+        <div className="grid-col flex-3">
+          <div className="text-left">
+            <h2>Segment and label</h2>
+            <p className="text-base">Annotate by segmenting and labeling your new template.</p></div>
+            <Divider margin="0px"/>
+        </div>
+        <div className="grid-col flex-7">
+          <iframe className="height-full width-full" src={URL.createObjectURL(files[0])}></iframe>
         </div>
-    );
+      </div>
+    </div>
+  )
 };
 
 export default AnnotateTemplate;

OCR/frontend/src/pages/UploadTemplate.tsx

@@ -1,15 +1,16 @@
-import { Divider } from "../componets/Divider"
-import { UploadHeader } from "../componets/Header"
-import { Stepper } from "../componets/Stepper"
-import { Uploadfile } from "../componets/UploadFile"
+import {Divider} from "../componets/Divider"
+import {UploadHeader} from "../componets/Header"
+import {Stepper} from "../componets/Stepper"
+import {Uploadfile} from "../componets/UploadFile"
+import {AnnotateStep} from "../utils/constants.ts";
 
 export const UploadTemplate = () => {
     return (
         <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'start', width: '100%', height: '100%', padding: '16px 8px, 8px, 8px' }}>
             <UploadHeader />
             <Divider margin="0px" />
             <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '32px'}}>
-                <Stepper />
+                <Stepper currentStep={AnnotateStep.Upload}/>
             </div>
             <Divider margin="0px" />
             <Uploadfile />

OCR/frontend/src/pages/__snapshots__/UploadTemplate.test.tsx.snap

@@ -109,7 +109,7 @@ exports[`UploadTemplate component > matches the snapshot 1`] = `
             <span
               class="usa-step-indicator__segment-label"
             >
-              Save Templete 
+              Save Template 
               <span
                 class="usa-sr-only"
               >

OCR/frontend/src/utils/constants.ts

@@ -0,0 +1,6 @@
+
+export enum AnnotateStep {
+  Upload = "Upload New Segment",
+  Annotate = "Annotate",
+  Save = "Save Template",
+}