Dev

package.json

@@ -10,8 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toggle": "^1.0.3",
@@ -25,6 +29,7 @@
     "clsx": "^2.1.1",
     "d3": "^7.9.0",
     "html2canvas": "^1.4.1",
+    "joi": "^17.13.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.378.0",
     "papaparse": "^5.4.1",

src/App.tsx

@@ -1,73 +1,68 @@
-import './App.css'
-import {
-  // useDataShopData, 
-  useLocalSampleData,
-  usePathAnalysisData
-} from '@/lib/dataFetchingHooks';
-import { useEffect, useState } from 'react';
-import { convertDataTypesIncomingData, processPathAnalysisData, processDataShopData } from '@/lib/dataProcessingUtils';
+import './App.css';
+import { useContext, useEffect, useState } from 'react';
 import { GlobalDataType, GraphData } from './lib/types';
 import DirectedGraph from './components/DirectedGraph';
 import DropZone from './components/DropZone';
+// import { NavBar } from './components/NavBar';
+import { Button } from './components/ui/button';
+import { Context } from './Context';
 
 function App() {
-  const sectionId = "area_perimeter_mix_rectangle_derived";
-  const problemId = "area_perimeter_mix_rectangle_derived-020";
+  const { resetData, setGraphData, setLoading, data, setData, graphData, loading } = useContext(Context)
 
-  // const { pathAnalysisData, isPathAnalysisDataLoading } = usePathAnalysisData(sectionId, problemId);
-  // const { dataShopData, isDataShopDataLoading } = useDataShopData();
-  const filePath = "analyzing_different_forms_of_expressions.json"
-  // const { localSampleData, isLocalSampleDataLoading } = useLocalSampleData(filePath)
-  const [processedPathAnalysisData, setProcessedPathAnalysisData] = useState<GraphData | null>(null);
-  const [processedShopData, setProcessedShopData] = useState<GraphData | null>(null);
+  const handleData = (data: GlobalDataType[]) => {
+    setData(data)
+  }
 
-  // useEffect( () => {
-  //   if (isDataShopDataLoading) {
-  //     return;
-  //   }
-  //   else{
-  //     console.log("dataShopData: ", dataShopData);
-  //   }
-  // }, [isDataShopDataLoading, dataShopData])
+  const handleLoading = (loading: boolean) => {
+    setLoading(loading)
+  }
 
-  // useEffect(() => {
-  //   if (isLocalSampleDataLoading) {
-  //     return;
-  //   }
-  //   if (localSampleData) {
-  //     const _processData = async () => {
-  //       const processedData = await processDataShopData(localSampleData as GlobalDataType[])
-  //       setProcessedShopData(processedData);
-  //     }
-  //     _processData();
-  //   }
-  // }, [isLocalSampleDataLoading, localSampleData])
+  useEffect(() => {
+    if (data) {
+      console.log(data);
+    }
+  }, [data])
 
+  return (
+    <>
+      <div className="">
+        {/* <NavBar /> */}
+        <Button
+          className="m-2"
+          variant={"ghost"}
+          onClick={() => {
+            resetData()
 
-  // useEffect(() => {
-  //   const _processData = async () => {
-  //     if (pathAnalysisData) {
-  //       setProcessedPathAnalysisData(await processPathAnalysisData(convertDataTypesIncomingData(pathAnalysisData)));
-  //     }
-  //   }
-  //   _processData();
+          }}
+        >
+          Reset
+        </Button>
 
-  // }, [isPathAnalysisDataLoading, pathAnalysisData])
+        <div className=" flex items-center justify-center pt-20">
 
-  // if (isPathAnalysisDataLoading || !processedPathAnalysisData || !processedShopData) {
-  //   return <div>Loading...</div>
-  // }
+          {
+            loading ?
+              <div className="absolute top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 flex items-center justify-center">
+                <div className="bg-white p-4 rounded-lg">
+                  <p>Loading...</p>
+                </div>
+              </div>
+              :
+              <div className="">
+                <DropZone afterDrop={handleData} onLoadingChange={handleLoading} />
+              </div>
+          }
 
-  return (
-    <>
-      <div className="p-5">
-        <div className="w-1/2">
-          <DropZone />
-        </div>
 
-        {/* <DirectedGraph graphData={processedShopData} /> */}
-      </div>
+          {
+            graphData && (
+              <DirectedGraph graphData={graphData} />
+            )
+          }
 
+        </div>
+      </div>
     </>
   )
 }

src/Context.tsx

@@ -0,0 +1,50 @@
+import { createContext, useState } from 'react';
+import { GlobalDataType, GraphData } from './lib/types';
+interface ContextInterface {
+    data: GlobalDataType[] | null;
+    graphData: GraphData | null;
+    loading: boolean;
+    setLoading: (loading: boolean) => void;
+    setData: (data: GlobalDataType[] | null) => void;
+    setGraphData: (graphData: GraphData | null) => void;
+    resetData: () => void;
+
+}
+export const Context = createContext({} as ContextInterface);
+const initialState = {
+    data: null,
+    graphData: null,
+    loading: false
+}
+
+interface ProviderProps {
+    children: React.ReactNode;
+}
+export const Provider = ({ children }: ProviderProps) => {
+    const [data, setData] = useState<GlobalDataType[] | null>(initialState.data)
+    const [graphData, setGraphData] = useState<GraphData | null>(initialState.graphData)
+    const [loading, setLoading] = useState<boolean>(initialState.loading)
+
+    const resetData = () => {
+        setData(null)
+        setGraphData(null)
+        console.log("Data reset");
+
+    }
+
+    return (
+        <Context.Provider
+            value={{
+                data,
+                graphData,
+                loading,
+                setLoading,
+                setData,
+                setGraphData,
+                resetData
+            }}
+        >
+            {children}
+        </Context.Provider>
+    )
+}

src/components/DirectedGraph.tsx

@@ -17,7 +17,6 @@ interface DirectedGraphProps {
 }
 
 export default function DirectedGraph({ graphData }: DirectedGraphProps) {
-    console.log("graphData: ", graphData);
 
     const initialTooltip: ToolTip = { display: false, text: '', x: 0, y: 0, fx: undefined, fy: undefined };
     const [tooltip, setTooltip] = useState<ToolTip>(initialTooltip);

src/components/DropZone.tsx

@@ -1,10 +1,22 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Accept, useDropzone } from 'react-dropzone';
 import { GlobalDataType } from '@/lib/types';
 import { parseData } from '@/lib/utils';
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+
+interface DropZoneProps {
+    afterDrop: (data: GlobalDataType[]) => void,
+    onLoadingChange: (loading: boolean) => void
+}
+
+export default function DropZone({afterDrop, onLoadingChange}: DropZoneProps) {
+    const delimiters = ["tsv", "csv", "pipe"]
+
+    const [fileType, setFileType] = useState<string>(delimiters[0])
 
-export default function DropZone() {
     const onDrop = useCallback((acceptedFiles: File[]) => {
+        onLoadingChange(true);
         acceptedFiles.forEach((file: File) => {
             const reader = new FileReader()
 
@@ -13,8 +25,31 @@ export default function DropZone() {
             reader.onload = () => {
                 // Do whatever you want with the file contents after .readAsText()
                 const textStr = reader.result
-                const array: GlobalDataType[] = parseData(textStr)
-                console.log(array)
+                // find file type and convert to delimeter
+                let delimeter: string;
+                switch (fileType) {
+                    case 'tsv':
+                        delimeter = '\t'
+                        break;
+                    case 'csv':
+                        delimeter = ','
+                        break;
+                    case 'pipe':
+                        delimeter = '|'
+                        break;
+                    case 'json':
+                        delimeter = ''
+                        break;
+                    default:
+                        delimeter = '\t'
+                        break;
+                }
+                const array: GlobalDataType[] | null = parseData(textStr, delimeter)
+                if (array) {
+                    afterDrop(array);
+                }
+                onLoadingChange(false);
+                // console.log(array)
             }
             reader.readAsText(file)
         })
@@ -30,22 +65,65 @@ export default function DropZone() {
         accept: acceptedFileTypes,
     });
 
+    const fileTypeOptions = [
+        {
+            label: 'Tab Separated',
+            value: delimiters.find((delimiter) => delimiter === 'tsv') as string
+        },
+        {
+            label: 'Comma Separated',
+            value: delimiters.find((delimiter) => delimiter === 'csv') as string
+        },
+        {
+            label: 'Pipe Separated',
+            value: delimiters.find((delimiter) => delimiter === 'pipe') as string
+        },
+        // {
+        //     label: 'JSON',
+        //     value: delimiters.find((delimiter) => delimiter === 'json') as string
+        // }
+    ]
     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 className="pb-3 flex flex-col items-center">
+                <div className="font-bold p-1">
+                    File Type
+                </div>
+                <RadioGroup defaultValue={delimiters[0]} onValueChange={(e: string) => {
+                    setFileType(e)
 
-            }
-        </div>
+                }}>
+                    {fileTypeOptions.map((option, index) => (
+                        <div className="flex items-center space-x-2" key={index}>
+                            <RadioGroupItem value={option.value} key={option.value} />
+                            <Label htmlFor={option.value}>{option.label}</Label>
+                        </div>
+                    ))}
+                </RadioGroup>
+            </div>
+            <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 ?
+                    <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>
+
+
+        </>
     );
 }