feat: state persistence throughout app

PytorchConnectomics · Nov 29, 2023 · 97f21fd · 97f21fd
1 parent c1033fb
commit 97f21fd
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 42 deletions.
diff --git a/client/src/components/Dragger.js b/client/src/components/Dragger.js
@@ -67,7 +67,7 @@ function Dragger() {
   const [value, setValue] = useState("");
   const [fileUID, setFileUID] = useState(null);
   const [previewFileFolderPath, setPreviewFileFolderPath] = useState("");
-  const [fileType, setFileType] = useState("Image");
+  const [fileType, setFileType] = useState("");
 
   const handleText = (event) => {
     setValue(event.target.value);
@@ -90,22 +90,28 @@ function Dragger() {
   };
 
   const handleSubmit = (type) => {
-    console.log("submitting path", previewFileFolderPath)
-    if (previewFileFolderPath !== "") {
-      context.files.find(
-        (targetFile) => targetFile.uid === fileUID
-      ).folderPath = previewFileFolderPath;
+    console.log("submitting path", previewFileFolderPath);
+
+    const fileInContext = context.files.find((targetFile) => targetFile.uid === fileUID);
+    const fileInFileList = context.fileList.find((targetFile) => targetFile.value === fileUID);
+
+    if (previewFileFolderPath !== "" && fileInContext) {
+      fileInContext.folderPath = previewFileFolderPath;
       setPreviewFileFolderPath("");
     }
-    if (value !== "") {
-      context.files.find((targetFile) => targetFile.uid === fileUID).name =
-        value;
-      context.fileList.find(
-        (targetFile) => targetFile.value === fileUID
-      ).label = value;
+
+    if (value !== "" && fileInContext && fileInFileList) {
+      fileInContext.name = value;
+      fileInFileList.label = value;
       setValue("");
     }
-    fetchFile(context.files.find((targetFile) => targetFile.uid === fileUID));
+
+    if (fileInContext) {
+      fetchFile(fileInContext);
+    } else {
+      message.error("Error: File selection error. Please try again.");
+    }
+
     setPreviewOpen(false);
   };
 

diff --git a/client/src/components/InputSelector.js b/client/src/components/InputSelector.js
@@ -43,40 +43,44 @@ function InputSelector(props) {
       >
         <Form.Item label="Input Image">
           <Select
-            // mode="multiple"
             allowClear
-            style={{
-              width: "100%",
-            }}
+            style={{ width: "100%" }}
             placeholder="Please select"
             onChange={handleImageChange}
-            options={context.fileList}
+            value={context.inputImage ? context.inputImage.uid : undefined}
+            options={context.imageFileList.map((file) => ({
+              label: file.name,
+              value: file.uid,
+            }))}
             size="middle"
           />
         </Form.Item>
         <Form.Item label="Input Label">
           <Select
-            // mode="multiple"
             allowClear
-            style={{
-              width: "100%",
-            }}
+            style={{ width: "100%" }}
             placeholder="Please select"
             onChange={handleLabelChange}
-            options={context.fileList}
+            value={context.inputLabel ? context.inputLabel.uid : undefined}
+            options={context.labelFileList.map((file) => ({
+              label: file.name,
+              value: file.uid,
+            }))}
             size="middle"
           />
         </Form.Item>
-        <Form.Item label="Output Path">
+        {type === "training" ? <Form.Item label="Output Path">
           <Input
             style={{
               width: "100%",
             }}
             placeholder="Please type output path"
+            value={context.outputPath ? context.outputPath : undefined}
             onChange={handleOutputPathChange}
             size="middle"
           />
         </Form.Item>
+          : null}
         {type === "training" ? (
           <Form.Item label="Log Path">
             <Input
@@ -95,6 +99,7 @@ function InputSelector(props) {
                 width: "100%",
               }}
               placeholder="Please type checkpoint path"
+              value={context.outputPath ? context.outputPath : undefined}
               onChange={handleCheckpointPathChange}
               size="middle"
             />

diff --git a/client/src/contexts/GlobalContext.js b/client/src/contexts/GlobalContext.js
@@ -1,24 +1,45 @@
-import React, { useState } from "react";
+import React, { createContext, useState, useEffect } from "react";
 
-export const AppContext = React.createContext(null);
+export const AppContext = createContext(null);
 
-export const ContextWrapper = (props) => {
-  const [files, setFiles] = useState([]);
-  const [fileList, setFileList] = useState([]);
-  const [currentImage, setCurrentImage] = useState(null);
-  const [currentLabel, setCurrentLabel] = useState(null);
-  const [inputImage, setInputImage] = useState(null);
-  const [inputLabel, setInputLabel] = useState(null);
-  const [viewer, setViewer] = useState(null);
-  const [trainingConfig, setTrainingConfig] = useState(null);
-  const [inferenceConfig, setInferenceConfig] = useState(null);
-  const [uploadedYamlFile, setUploadedYamlFile] = useState("");
-  const [imageFileList, setImageFileList] = useState([]);
-  const [labelFileList, setLabelFileList] = useState([]);
+function usePersistedState(key, defaultValue) {
+  const [state, setState] = useState(() => {
+    const storedValue = localStorage.getItem('yourKey');
+    return safeParseJSON(storedValue, defaultValue);
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(state));
+  }, [key, state]);
+
+  return [state, setState];
+}
 
-  const [outputPath, setOutputPath] = useState(null);
-  const [logPath, setLogPath] = useState(null);
-  const [checkpointPath, setCheckpointPath] = useState(null);
+function safeParseJSON(jsonString, defaultValue) {
+  try {
+    return JSON.parse(jsonString) || defaultValue;
+  } catch (e) {
+    console.error("Error parsing JSON:", e);
+    return defaultValue;
+  }
+}
+
+export const ContextWrapper = (props) => {
+  const [files, setFiles] = usePersistedState("files", []);
+  const [fileList, setFileList] = usePersistedState('fileList', []);
+  const [trainingConfig, setTrainingConfig] = usePersistedState('trainingConfig', null);
+  const [inferenceConfig, setInferenceConfig] = usePersistedState('inferenceConfig', null);
+  const [uploadedYamlFile, setUploadedYamlFile] = usePersistedState('uploadedYamlFile', "");
+  const [imageFileList, setImageFileList] = usePersistedState('imageFileList', []);
+  const [labelFileList, setLabelFileList] = usePersistedState('labelFileList', []);
+  const [outputPath, setOutputPath] = usePersistedState('outputPath', null);
+  const [logPath, setLogPath] = usePersistedState('logPath', null);
+  const [checkpointPath, setCheckpointPath] = usePersistedState('checkpointPath', null);
+  const [currentImage, setCurrentImage] = usePersistedState('currentImage', null);
+  const [currentLabel, setCurrentLabel] = usePersistedState('currentLabel', null);
+  const [inputImage, setInputImage] = usePersistedState('inputImage', null);
+  const [inputLabel, setInputLabel] = usePersistedState('inputLabel', null);
+  const [viewer, setViewer] = usePersistedState('viewer', null);
 
   return (
     <AppContext.Provider