Merge pull request #18 from CarnegieLearningWeb/dev

Dev
CarnegieLearningWeb · Jun 18, 2024 · 4fd24cf · 4fd24cf
2 parents 30bdb25 + bec3909
commit 4fd24cf
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 React + TypeScript + Vite + SWC (with Rust compiler)
 
+[Live URL](https://path-analysis.vercel.app/)
+
 ## How to Run Locally
 1. Make sure you have `Node.js` installed. You can download it from https://nodejs.org/en/download/
 1. This uses `bun` to run, build, and deploy. You will need to have the `bun` command installed. You can install it by running ```npm install -g @bun/cli```. Docs: https://bun.sh/

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>CL Path Analysis</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/DropZone.tsx b/src/components/DropZone.tsx
@@ -4,67 +4,84 @@ import { GlobalDataType } from '@/lib/types';
 import { parseData } from '@/lib/utils';
 import { Label } from "@/components/ui/label"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import toast from 'react-hot-toast';
 
 interface DropZoneProps {
     afterDrop: (data: GlobalDataType[]) => void,
     onLoadingChange: (loading: boolean) => void
 }
 
-export default function DropZone({afterDrop, onLoadingChange}: DropZoneProps) {
-    const delimiters = ["tsv", "csv", "pipe"]
+export default function DropZone({ afterDrop, onLoadingChange }: DropZoneProps) {
+    const delimiters = ["tsv", "csv", "pipe"];
+    const [errorMessage, setErrorMessage] = useState<string>("");
 
     const [fileType, setFileType] = useState<string>(delimiters[0])
 
     const onDrop = useCallback((acceptedFiles: File[]) => {
         onLoadingChange(true);
+
         acceptedFiles.forEach((file: File) => {
-            const reader = new FileReader()
+            const reader = new FileReader();
 
-            reader.onabort = () => console.warn('file reading was aborted')
-            reader.onerror = () => console.error('file reading has failed')
+            reader.onabort = () => console.warn('file reading was aborted');
+            reader.onerror = () => console.error('file reading has failed');
             reader.onload = () => {
-                // Do whatever you want with the file contents after .readAsText()
-                const textStr = reader.result
-                // find file type and convert to delimeter
-                let delimeter: string;
+                const textStr = reader.result;
+                let delimiter: string;
                 switch (fileType) {
                     case 'tsv':
-                        delimeter = '\t'
+                        delimiter = '\t';
                         break;
                     case 'csv':
-                        delimeter = ','
+                        delimiter = ',';
                         break;
                     case 'pipe':
-                        delimeter = '|'
-                        break;
-                    case 'json':
-                        delimeter = ''
+                        delimiter = '|';
                         break;
                     default:
-                        delimeter = '\t'
+                        delimiter = '\t';
                         break;
                 }
-                const array: GlobalDataType[] | null = parseData(textStr, delimeter)
-                if (array) {
+                const array: GlobalDataType[] | null = parseData(textStr, delimiter);
+                console.log("Array: ", array);
+                // array is null when there is an error in the file structure or content
+                if (!array) {
+
+                    toast.error("Invalid file structure or content")
+                    console.log("Error state before: ", errorMessage);
+                    setErrorMessage("Invalid file structure or content");
+                    console.log("Error state after: ", errorMessage);
+
+                    // the below prints, but the above does not execute. Why?
+                    // console.error("!!!Invalid file structure or content");
+                }
+                else {
                     afterDrop(array);
                 }
-                onLoadingChange(false);
-                // console.log(array)
-            }
-            reader.readAsText(file)
-        })
 
-    }, [])
+
+                onLoadingChange(false);
+            };
+            reader.readAsText(file);
+            console.log("File: ", file);
+
+        });
+    }, [fileType, afterDrop, onLoadingChange]);
 
     const acceptedFileTypes: Accept = {
-        'text/plain': ['.txt', '.csv', '.tsv', '.json'],
+        'text/plain': ['.txt', '.csv', '.tsv', '.json', '.tsv', '.pipe'],
     }
 
+
+
     const { getRootProps, getInputProps, isDragActive, isFocused, isDragReject } = useDropzone({
         onDrop,
         accept: acceptedFileTypes,
+        // validator: validateData
     });
 
+
+
     const fileTypeOptions = [
         {
             label: 'Tab Separated',
@@ -108,19 +125,18 @@ export default function DropZone({afterDrop, onLoadingChange}: DropZoneProps) {
                 <input {...getInputProps()} />
                 {
                     !isDragActive ?
-                    <div className={`flex items-center h-full w-[fitcontent] justify-center p-2`}>
-                        <p className={""}>Drag 'n' drop some files here, or click to select files</p>
-                    </div>
-                    :
-                    <div className={`flex items-center h-full w-[fitcontent] justify-center bg-slate-100 rounded-lg p-2`}>
-                    <p className={""}>Drag 'n' drop some files here, or click to select files</p>
-                </div>
+                        <div className={`flex items-center h-full w-[fitcontent] justify-center p-2`}>
+                            <p className={""}>Drag 'n' drop some files here, or click to select files</p>
+                        </div>
+                        :
+                        <div className={`flex items-center h-full w-[fitcontent] justify-center bg-slate-100 rounded-lg p-2`}>
+                            <p className={""}>Drag 'n' drop some files here, or click to select files</p>
+                        </div>
                 }
-                {
-                    isDragReject &&
-                    <p className="text-red-500 pt-10">File type not accepted, please try again</p>
 
-                }
+                <div className="">
+                    {errorMessage && <p className="text-red-500 pt-10">{errorMessage}</p>}
+                </div>
             </div>
 
 

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -11,29 +11,44 @@ export function cn(...inputs: ClassValue[]) {
 const validation = Joi.array().items(
   Joi.object({
     'Problem Name': Joi.string().required(),
-    'Step Name': Joi.string().allow('', null),
+    'Step Name': Joi.string().allow('', null).required(),
     'Outcome': Joi.string().valid('OK', 'BUG', 'INITIAL_HINT', 'HINT_LEVEL_CHANGE', 'ERROR').required(),
   }).unknown()
 );
 
+type ValidatorResult = {
+  code: string;
+  message: string;
+}
+
+
 export function parseData(readerResult: string | ArrayBuffer | null, delimiter: string = "\t"): GlobalDataType[] | null {
-  const textStr = readerResult
-  const results = Papa.parse(textStr as string, {
+  if (!readerResult) {
+    console.error("No data found");
+    return null;
+  }
+
+  const textStr = readerResult as string;
+  const results = Papa.parse<GlobalDataType>(textStr, {
     header: true,
-    delimiter: delimiter
-  })
+    delimiter: delimiter,
+    skipEmptyLines: true,
+  });
+
   if (results.errors.length > 0) {
-    console.error("error during parsing: ", results.errors)
+    console.error("Parsing errors: ", results.errors);
     return null;
-
   }
 
-  const array: GlobalDataType[] = results.data as GlobalDataType[]
-  const { error } = validation.validate(array);
-  if (error) {
-    console.error(error)
+  const array: GlobalDataType[] = results.data;
+  const validated = validation.validate(array);
+  // console.log("Validated res: ", validated);
+
+  if (validated.error) {
+    // TODO finish validation error logic
+    console.error("Validation error: ", validated.error.details);
     return null;
   }
-
-  return array
+  console.log("*Array: ", array);
+  return array;
 }