Merge pull request #54 from sc420/38-saveload-operationsnodes

Can save/load graph states

interactive-computational-graph/package.json

@@ -18,6 +18,7 @@
     "@types/node": "^16.18.38",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "file-saver": "^2.0.5",
     "katex": "^0.16.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -52,6 +53,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/file-saver": "^2.0.7",
     "@types/katex": "^0.16.2",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",

interactive-computational-graph/src/components/FeatureNavigator.tsx

@@ -58,8 +58,8 @@ const FeatureNavigator: FunctionComponent<FeatureNavigatorProps> = ({
       icon: <EmojiObjectsIcon />,
     },
     {
-      id: "load-save",
-      text: "Load/Save",
+      id: "save-load",
+      text: "Save/Load",
       icon: <ImportExportIcon />,
     },
   ];

interactive-computational-graph/src/components/FeaturePanel.test.tsx

@@ -20,6 +20,8 @@ test("should trigger event when adding a node", () => {
   const handleDeleteOperation = jest.fn();
   const handleClearSelection = jest.fn();
   const handleSelectNode = jest.fn();
+  const handleSave = jest.fn();
+  const handleLoad = jest.fn();
   render(
     <FeaturePanel
       feature="add-nodes"
@@ -35,6 +37,8 @@ test("should trigger event when adding a node", () => {
       onDeleteOperation={handleDeleteOperation}
       onClearSelection={handleClearSelection}
       onSelectNode={handleSelectNode}
+      onSave={handleSave}
+      onLoad={handleLoad}
     />,
   );
 

interactive-computational-graph/src/components/FeaturePanel.tsx

@@ -5,40 +5,46 @@ import type ExplainDerivativeData from "../features/ExplainDerivativeData";
 import type FeatureNodeType from "../features/FeatureNodeType";
 import type FeatureOperation from "../features/FeatureOperation";
 import type SelectedFeature from "../features/SelectedFeature";
+import type GraphContainerState from "../states/GraphContainerState";
 import AddNodesPanel from "./AddNodesPanel";
 import EditNodesPanel from "./EditNodesPanel";
 import ExplainDerivativesPanel from "./ExplainDerivativesPanel";
+import SaveLoadPanel from "./SaveLoadPanel";
 
 interface FeaturePanelProps {
   feature: SelectedFeature;
   featureOperations: FeatureOperation[];
   operationIdsAddedAtLeastOnce: Set<string>;
+  isDarkMode: boolean;
   hasNodes: boolean;
   hasDerivativeTarget: boolean;
   explainDerivativeData: ExplainDerivativeData[];
-  isDarkMode: boolean;
   onAddNode: (featureNodeType: FeatureNodeType) => void;
   onAddOperation: () => void;
   onEditOperation: (updatedOperation: FeatureOperation) => void;
   onDeleteOperation: (operationId: string) => void;
   onClearSelection: () => void;
   onSelectNode: (nodeId: string) => void;
+  onSave: () => GraphContainerState;
+  onLoad: (graphContainerState: GraphContainerState) => void;
 }
 
 const FeaturePanel: FunctionComponent<FeaturePanelProps> = ({
   feature,
   featureOperations,
   operationIdsAddedAtLeastOnce,
+  isDarkMode,
   hasNodes,
   hasDerivativeTarget,
   explainDerivativeData,
-  isDarkMode,
   onAddNode,
   onAddOperation,
   onEditOperation,
   onDeleteOperation,
   onClearSelection,
   onSelectNode,
+  onSave,
+  onLoad,
 }) => {
   const renderSelectedPanel = (): ReactElement => {
     switch (feature) {
@@ -80,8 +86,8 @@ const FeaturePanel: FunctionComponent<FeaturePanelProps> = ({
         );
       case "examples":
         return <EditNodesPanel />;
-      case "load-save":
-        return <EditNodesPanel />;
+      case "save-load":
+        return <SaveLoadPanel onSave={onSave} onLoad={onLoad} />;
     }
   };
   return (