From 0f97f86717791c6e03daa60e291b0514f00d33be Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Wed, 26 Feb 2025 10:47:59 -0500
Subject: [PATCH] support workflow create

---
 .../Experiment/Workflows/NewWorkflowModal.tsx | 23 +++++++++---
 .../components/Experiment/Workflows/index.tsx | 37 +++++++++++++------
 src/renderer/lib/transformerlab-api-sdk.ts    |  2 +-
 3 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/renderer/components/Experiment/Workflows/NewWorkflowModal.tsx b/src/renderer/components/Experiment/Workflows/NewWorkflowModal.tsx
index b0b82e2e..1b1fbb71 100644
--- a/src/renderer/components/Experiment/Workflows/NewWorkflowModal.tsx
+++ b/src/renderer/components/Experiment/Workflows/NewWorkflowModal.tsx
@@ -14,29 +14,40 @@ import {
 } from '@mui/joy';
 import { useState } from 'react';
 
-export default function NewWorkflowModal({ open, setOpen }) {
+import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
+
+export default function NewWorkflowModal({ open, onClose, experimentId }) {
   const [state, setState] = useState(null);
 
   return (
-    <Modal open={open} onClose={() => setOpen(false)}>
+    <Modal open={open} onClose={() => onClose()}>
       <ModalDialog>
         <ModalClose />
         <DialogTitle>Create new workflow</DialogTitle>
         <DialogContent>Fill in the information.</DialogContent>
         <form
-          onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
+          onSubmit={async (event: React.FormEvent<HTMLFormElement>) => {
             event.preventDefault();
-            setOpen(false);
+            const formData = new FormData(event.currentTarget);
+            const workflowName = formData.get('name') as string;
+            //const nodes = formData.get('nodes') as string;
+            await fetch(
+              chatAPI.Endpoints.Workflows.CreateEmpty(
+                workflowName,
+                experimentId
+              )
+            );
+            onClose();
           }}
         >
           <Stack spacing={2}>
             <FormControl>
               <FormLabel>Name</FormLabel>
-              <Input autoFocus required />
+              <Input autoFocus required name="name" />
             </FormControl>
             <FormControl>
               <FormLabel>Nodes</FormLabel>
-              <Textarea minRows={4} />
+              <Textarea minRows={4} name="nodes" />
               <FormHelperText>
                 Leave Blank to Create an Empty Workflow
               </FormHelperText>
diff --git a/src/renderer/components/Experiment/Workflows/index.tsx b/src/renderer/components/Experiment/Workflows/index.tsx
index 5bcffb35..ece2e3ba 100644
--- a/src/renderer/components/Experiment/Workflows/index.tsx
+++ b/src/renderer/components/Experiment/Workflows/index.tsx
@@ -28,6 +28,7 @@ export default function Workflows({ experimentInfo }) {
     data: workflowsData,
     error: workflowsError,
     isLoading: isLoading,
+    mutate: mutateWorkflows,
   } = useSWR(chatAPI.Endpoints.Workflows.List(), fetcher);
 
   const workflows = workflowsData;
@@ -77,7 +78,7 @@ export default function Workflows({ experimentInfo }) {
     return out;
   }
 
-  async function runWorkflow(workflowId: string){
+  async function runWorkflow(workflowId: string) {
     await fetch(chatAPI.Endpoints.Workflows.RunWorkflow(workflowId));
   }
 
@@ -93,7 +94,11 @@ export default function Workflows({ experimentInfo }) {
     >
       <NewWorkflowModal
         open={newWorkflowModalOpen}
-        setOpen={setNewWorkflowModalOpen}
+        onClose={() => {
+          setNewWorkflowModalOpen(false);
+          mutateWorkflows();
+        }}
+        experimentId={experimentInfo?.id}
       />
       <Typography level="h1">Workflows</Typography>
       <Typography level="body-lg" mb={3}>
@@ -174,16 +179,24 @@ export default function Workflows({ experimentInfo }) {
                 Select Workflow
               </Box>
             )}
-            {selectedWorkflow &&
-            <Box pl={2} display="flex" flexDirection="column" gap={1}>
-              {selectedWorkflow.status!="RUNNING" ? (
-                <Button startDecorator={<PlayIcon />} onClick={() => runWorkflow(selectedWorkflow.id)}>Run</Button>
-              ) : (
-                <Button startDecorator={<PlayIcon />} disabled={true}>Running</Button>
-              )}
-              <Button variant="outlined">Edit</Button>
-              <Button variant="outlined">Fight</Button>
-            </Box>}
+            {selectedWorkflow && (
+              <Box pl={2} display="flex" flexDirection="column" gap={1}>
+                {selectedWorkflow.status != 'RUNNING' ? (
+                  <Button
+                    startDecorator={<PlayIcon />}
+                    onClick={() => runWorkflow(selectedWorkflow.id)}
+                  >
+                    Run
+                  </Button>
+                ) : (
+                  <Button startDecorator={<PlayIcon />} disabled={true}>
+                    Running
+                  </Button>
+                )}
+                <Button variant="outlined">Edit</Button>
+                <Button variant="outlined">Fight</Button>
+              </Box>
+            )}
           </Box>
         </Box>
       </Sheet>
diff --git a/src/renderer/lib/transformerlab-api-sdk.ts b/src/renderer/lib/transformerlab-api-sdk.ts
index 79fcc6d9..5251ab07 100644
--- a/src/renderer/lib/transformerlab-api-sdk.ts
+++ b/src/renderer/lib/transformerlab-api-sdk.ts
@@ -1010,7 +1010,7 @@ function convertSlashInUrl(url: string) {
 
 Endpoints.Workflows = {
   List: () => API_URL() + 'workflows/list',
-  CreateEmpty: (name: string, experimentId) =>
+  CreateEmpty: (name: string, experimentId: string) =>
     API_URL() +
     'workflows/create_empty' +
     '?name=' +
-- 
GitLab