Dev

package.json

@@ -31,6 +31,7 @@
     "radix-ui": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-force-graph": "^1.44.3",
     "react-hot-toast": "^2.4.1",
     "tailwind-merge": "^2.3.0",

src/App.tsx

@@ -1,22 +1,23 @@
 import './App.css'
-import { 
+import {
   // useDataShopData, 
   useLocalSampleData,
-  usePathAnalysisData 
+  usePathAnalysisData
 } from '@/lib/dataFetchingHooks';
 import { useEffect, useState } from 'react';
 import { convertDataTypesIncomingData, processPathAnalysisData, processDataShopData } from '@/lib/dataProcessingUtils';
 import { GlobalDataType, GraphData } from './lib/types';
 import DirectedGraph from './components/DirectedGraph';
+import DropZone from './components/DropZone';
 
 function App() {
   const sectionId = "area_perimeter_mix_rectangle_derived";
   const problemId = "area_perimeter_mix_rectangle_derived-020";
 
-  const { pathAnalysisData, isPathAnalysisDataLoading } = usePathAnalysisData(sectionId, problemId);
+  // const { pathAnalysisData, isPathAnalysisDataLoading } = usePathAnalysisData(sectionId, problemId);
   // const { dataShopData, isDataShopDataLoading } = useDataShopData();
   const filePath = "analyzing_different_forms_of_expressions.json"
-  const { localSampleData, isLocalSampleDataLoading } = useLocalSampleData(filePath)
+  // const { localSampleData, isLocalSampleDataLoading } = useLocalSampleData(filePath)
   const [processedPathAnalysisData, setProcessedPathAnalysisData] = useState<GraphData | null>(null);
   const [processedShopData, setProcessedShopData] = useState<GraphData | null>(null);
 
@@ -29,40 +30,42 @@ function App() {
   //   }
   // }, [isDataShopDataLoading, dataShopData])
 
-  useEffect(() => {
-    if (isLocalSampleDataLoading) {
-      return;
-    }
-    if (localSampleData) {
-      const _processData = async () => {
-        const processedData = await processDataShopData(localSampleData as GlobalDataType[])
-        setProcessedShopData(processedData);
-      }
-      _processData();
-    }
-  }, [isLocalSampleDataLoading, localSampleData])
+  // useEffect(() => {
+  //   if (isLocalSampleDataLoading) {
+  //     return;
+  //   }
+  //   if (localSampleData) {
+  //     const _processData = async () => {
+  //       const processedData = await processDataShopData(localSampleData as GlobalDataType[])
+  //       setProcessedShopData(processedData);
+  //     }
+  //     _processData();
+  //   }
+  // }, [isLocalSampleDataLoading, localSampleData])
 
 
-  useEffect(() => {
-    const _processData = async () => {
-      if (pathAnalysisData) {
-        setProcessedPathAnalysisData(await processPathAnalysisData(convertDataTypesIncomingData(pathAnalysisData)));
-      }
-    }
-    _processData();
+  // useEffect(() => {
+  //   const _processData = async () => {
+  //     if (pathAnalysisData) {
+  //       setProcessedPathAnalysisData(await processPathAnalysisData(convertDataTypesIncomingData(pathAnalysisData)));
+  //     }
+  //   }
+  //   _processData();
 
-  }, [isPathAnalysisDataLoading, pathAnalysisData])
+  // }, [isPathAnalysisDataLoading, pathAnalysisData])
 
-  if (isPathAnalysisDataLoading || !processedPathAnalysisData || !processedShopData) {
-    return <div>Loading...</div>
-  }
+  // if (isPathAnalysisDataLoading || !processedPathAnalysisData || !processedShopData) {
+  //   return <div>Loading...</div>
+  // }
 
   return (
     <>
       <div className="p-5">
-        {/* path analysis window */}
+        <div className="w-1/2">
+          <DropZone />
+        </div>
 
-        <DirectedGraph graphData={processedShopData} />
+        {/* <DirectedGraph graphData={processedShopData} /> */}
       </div>
 
     </>

src/components/DropZone.tsx

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import { Accept, useDropzone } from 'react-dropzone';
+import { GlobalDataType } from '@/lib/types';
+import { parseData } from '@/lib/utils';
+
+export default function DropZone() {
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+        acceptedFiles.forEach((file: File) => {
+            const reader = new FileReader()
+
+            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
+                const array: GlobalDataType[] = parseData(textStr)
+                console.log(array)
+            }
+            reader.readAsText(file)
+        })
+
+    }, [])
+
+    const acceptedFileTypes: Accept = {
+        'text/plain': ['.txt', '.csv', '.tsv', '.json'],
+    }
+
+    const { getRootProps, getInputProps, isDragActive, isFocused, isDragReject } = useDropzone({
+        onDrop,
+        accept: acceptedFileTypes,
+    });
+
+    return (
+        <div
+            className={`bg-slate-200 cursor-pointer h-40 p-2 rounded-md border-2 border-black text-center ${(isDragActive || isFocused) ? 'bg-orange-100' : ''}`}
+            {...getRootProps()}
+        >
+            <input {...getInputProps()} />
+            {
+                (isDragActive && !isDragReject) ?
+                    <p>Drop em here</p> :
+                    <p>Drag 'n' drop some files here, or click to select files</p>
+            }
+            {
+                isDragReject &&
+                <p className="text-red-500">File type not accepted, please try again</p>
+
+            }
+        </div>
+    );
+}

src/lib/utils.ts

@@ -1,6 +1,19 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
+import { GlobalDataType } from "./types"
+import Papa from "papaparse"
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+
+export function parseData(readerResult: string | ArrayBuffer | null, delimiter: "\t" | "," | "|" = "\t"): GlobalDataType[] {
+  const textStr = readerResult
+  const results = Papa.parse(textStr as string, {
+      header: true,
+      delimiter: delimiter
+  })
+  const array: GlobalDataType[] = results.data as GlobalDataType[]
+  return array
+}