feat: work on the nodes

rowyio · May 3, 2023 · 858a0e1 · 858a0e1
1 parent c45c98b
commit 858a0e1
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 26 deletions.
diff --git a/src/components/Workflow/NodeName.tsx b/src/components/Workflow/NodeName.tsx
@@ -1,5 +1,5 @@
 import { Box, Tooltip, Typography } from "@mui/material";
-import { FC, useCallback, useState } from "react";
+import { FC, useCallback, useEffect, useState } from "react";
 
 export interface INodeNameProps {
   name: string;
@@ -12,6 +12,10 @@ const NodeName: FC<INodeNameProps> = ({ name, onNameChange, tooltip }) => {
 
   const [newName, setNewName] = useState(name);
 
+  useEffect(() => {
+    setNewName(name);
+  }, [name]);
+
   const handleNameChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setNewName(e.target.value);

diff --git a/src/components/Workflow/ScriptNode.tsx b/src/components/Workflow/ScriptNode.tsx
@@ -12,6 +12,11 @@ import { NodeMeta, Params } from "./types";
 
 interface IScriptNodeProps {
   script: string;
+  onScriptChange: (script: string) => void;
+  paramsValues: any;
+  onParamsValuesChange: (paramsValues: (prev: any) => any) => void;
+  name?: string;
+  onNameChange: (name: string) => void;
 }
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
@@ -38,31 +43,29 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-const ScriptNode: FC<IScriptNodeProps> = ({ script: scr }) => {
-  const [open, setOpen] = useState(false);
+const ScriptNode: FC<IScriptNodeProps> = ({
+  script,
+  onScriptChange,
+  paramsValues,
+  onParamsValuesChange,
+  name,
+  onNameChange,
+}) => {
+  const [open, setOpen] = useState(true);
 
   const handleToggleCollapse = useCallback(() => {
     setOpen((collapsed) => !collapsed);
   }, [setOpen]);
 
-  const [name, setName] = useState<string | undefined>();
-
-  const handleNameChange = useCallback(
-    (name: string) => {
-      setName(name);
-    },
-    [setName]
-  );
-
-  const [script, setScript] = useState(scr);
-
   const [params, setParams] = useState<Params>({});
   const [result, setResult] = useState<Params>({});
 
   const [isEditing, setIsEditing] = useState(false);
 
   const [meta, setMeta] = useState<NodeMeta>({});
 
+  const calcName = name ?? meta.name ?? "Script Node";
+
   useEffect(() => {
     try {
       const transformedScript = transform(script, {
@@ -82,16 +85,14 @@ const ScriptNode: FC<IScriptNodeProps> = ({ script: scr }) => {
     } catch {}
   }, [script]);
 
-  const [paramsValues, setParamsValues] = useState<any>({});
-
   const handleParamChange = useCallback(
     (paramKey: string) => (value: any) => {
-      setParamsValues((prev: any) => ({
+      onParamsValuesChange((prev: any) => ({
         ...prev,
         [paramKey]: value,
       }));
     },
-    [setParamsValues]
+    [onParamsValuesChange]
   );
 
   return (
@@ -109,9 +110,9 @@ const ScriptNode: FC<IScriptNodeProps> = ({ script: scr }) => {
         <NodeToolbar collapsed={open} onToggleCollapse={handleToggleCollapse}>
           <Icon />
           <NodeName
-            name={name ?? meta.name ?? "Script Node"}
+            name={calcName}
             tooltip={meta.description}
-            onNameChange={handleNameChange}
+            onNameChange={onNameChange}
           />
         </NodeToolbar>
         <NodeParams open={!open}>
@@ -144,9 +145,9 @@ const ScriptNode: FC<IScriptNodeProps> = ({ script: scr }) => {
               <NodeToolbar collapsed={false} onToggleCollapse={() => {}}>
                 <Icon />
                 <NodeName
-                  name={name ?? meta.name ?? "Script Node"}
+                  name={calcName}
                   tooltip={meta.description}
-                  onNameChange={handleNameChange}
+                  onNameChange={onNameChange}
                 />
               </NodeToolbar>
               <NodeParams open>
@@ -165,7 +166,7 @@ const ScriptNode: FC<IScriptNodeProps> = ({ script: scr }) => {
           </Stack>
           <CodeEditor
             value={script}
-            onChange={(value) => setScript(value ?? "")}
+            onChange={(value) => onScriptChange(value ?? "")}
             language="typescript"
             minHeight={500}
           />

diff --git a/src/pages/Workflow/WorkflowPage.tsx b/src/pages/Workflow/WorkflowPage.tsx
@@ -23,7 +23,7 @@ import {
   bindToggle,
   usePopupState,
 } from "material-ui-popup-state/hooks";
-import { Fragment, useState } from "react";
+import { Fragment, useCallback, useState } from "react";
 import { transform } from "sucrase";
 
 const addDoc = `export default function addDoc({ path }) {
@@ -143,6 +143,42 @@ export default function WorkflowPage() {
 
   const [steps, setSteps] = useAtom(stepsAtom, tableScope);
 
+  const handleStepScriptChange = useCallback(
+    (index: number) => (script: string) => {
+      setSteps((steps) => {
+        const newSteps = [...steps];
+        newSteps[index] = { ...newSteps[index], script };
+        return newSteps;
+      });
+    },
+    [setSteps]
+  );
+
+  const handleStepParamsValuesChange = useCallback(
+    (index: number) => (paramsValuesSetter: (paramsValues: any) => any) => {
+      setSteps((steps) => {
+        const newSteps = [...steps];
+        newSteps[index] = {
+          ...newSteps[index],
+          paramsValues: paramsValuesSetter(newSteps[index].paramsValues),
+        };
+        return newSteps;
+      });
+    },
+    [setSteps]
+  );
+
+  const handleStepNameChange = useCallback(
+    (index: number) => (name: string) => {
+      setSteps((steps) => {
+        const newSteps = [...steps];
+        newSteps[index] = { ...newSteps[index], name };
+        return newSteps;
+      });
+    },
+    [setSteps]
+  );
+
   return (
     <Stack alignItems="center">
       {false && (
@@ -184,7 +220,15 @@ export default function WorkflowPage() {
       <Arrow />
       {steps.map((step, index) => (
         <Fragment key={index}>
-          <ScriptNode key={index} script={step.script} />
+          <ScriptNode
+            key={index}
+            script={step.script}
+            onScriptChange={handleStepScriptChange(index)}
+            paramsValues={step.paramsValues}
+            onParamsValuesChange={handleStepParamsValuesChange(index)}
+            name={step.name}
+            onNameChange={handleStepNameChange(index)}
+          />
           <Arrow />
         </Fragment>
       ))}
@@ -198,7 +242,10 @@ export default function WorkflowPage() {
           <MenuItem
             key={index}
             onClick={() => {
-              setSteps((steps) => [...steps, { script: step.script }]);
+              setSteps((steps) => [
+                ...steps,
+                { script: step.script, paramsValues: {} },
+              ]);
               addStepPopupState.close();
             }}
             sx={{ width: 300 }}