get workflows displaying

src/renderer/components/Experiment/Workflows/index.tsx

@@ -15,6 +15,9 @@ import '@xyflow/react/dist/style.css';
 import { PlayIcon, WorkflowIcon } from 'lucide-react';
 import { useState } from 'react';
 
+import * as chatAPI from '../../../lib/transformerlab-api-sdk';
+import useSWR from 'swr';
+
 const initialNodes = [
   {
     id: '1',
@@ -60,9 +63,65 @@ const initialEdges = [
   },
 ];
 
+const fetcher = (url : any) => fetch(url).then((res) => res.json());
+
 export default function Workflows({ experimentInfo }) {
   const [selectedWorkflow, setSelectedWorkflow] = useState(null);
 
+  const {
+    data: workflowsData,
+    error: workflowsError,
+    isLoading: isLoading,
+  } = useSWR(chatAPI.Endpoints.Workflows.List(), fetcher);
+
+  const workflows = workflowsData;
+
+  function generateNodes(workflow: any){
+    let out : any[] = [];
+    let currentTask = "0";
+    let position = 0;
+
+    const workflowConfig = JSON.parse(workflow.config);
+    console.log(workflowConfig);
+
+    while (currentTask<workflowConfig.nodes.length) {
+      out.push({
+        id: currentTask,
+        position: { x: 0, y: position },
+        data: { label: workflowConfig.nodes[currentTask].name },
+      })
+      position += 100;
+      currentTask = workflowConfig.nodes[currentTask].out;
+    }
+
+    return out;
+  }
+
+  function generateEdges(workflow: any){
+    let out : any[] = [];
+    let currentTask = "0";
+    let ids = "0";
+
+    const workflowConfig = JSON.parse(workflow.config);
+    console.log(workflowConfig);
+
+    while (currentTask<workflowConfig.nodes.length) {
+
+      out.push({
+        id: ids,
+        source: currentTask,
+        target: workflowConfig.nodes[currentTask].out,
+        markerEnd: {
+          type: 'arrow',
+        },
+      })
+      ids += 1;
+      currentTask = workflowConfig.nodes[currentTask].out;
+    }
+
+    return out;
+  }
+
   return (
     <Sheet
       sx={{
@@ -90,24 +149,29 @@ export default function Workflows({ experimentInfo }) {
           <Typography level="title-lg" mb={2}>
             Workflows
           </Typography>
+          {workflows &&
           <List>
-            {[1, 2, 3].map((i) => (
-              <ListItem key={i}>
-                <ListItemButton onClick={() => setSelectedWorkflow(i)}>
+            {workflows.map((workflow) => (
+              <ListItem key={workflow.id}>
+                <ListItemButton onClick={() => setSelectedWorkflow(workflow)}>
                   <ListItemDecorator>
                     <WorkflowIcon />
                   </ListItemDecorator>
-                  <ListItemContent>Workflow {i}</ListItemContent>
+                  <ListItemContent>{workflow.name}</ListItemContent>
                   &rarr;
                 </ListItemButton>
               </ListItem>
             ))}
           </List>
+          }
         </Box>
+
+        {selectedWorkflow &&
         <Box flex={3} display="flex" flexDirection="column">
           <Typography level="title-lg" mb={2}>
-            Workflow {selectedWorkflow}
+            Workflow {selectedWorkflow.name}
           </Typography>
+          
           <Box
             sx={{
               display: 'flex',
@@ -118,8 +182,8 @@ export default function Workflows({ experimentInfo }) {
             }}
           >
             <ReactFlow
-              nodes={initialNodes}
-              edges={initialEdges}
+              nodes={generateNodes(selectedWorkflow)}
+              edges={generateEdges(selectedWorkflow)}
               fitView
               style={{ backgroundColor: '#F7F9FB' }}
             >
@@ -140,7 +204,7 @@ export default function Workflows({ experimentInfo }) {
               <Button variant="outlined">Fight</Button>
             </Box>
           </Box>
-        </Box>
+        </Box>}
       </Sheet>
     </Sheet>
   );

src/renderer/lib/transformerlab-api-sdk.ts

@@ -1008,6 +1008,9 @@ function convertSlashInUrl(url: string) {
   return url.replace(/\//g, '~~~');
 }
 
+Endpoints.Workflows = {
+  List: () => API_URL() + 'workflows/list',
+}
 
 Endpoints.Dataset = {
   Gallery: () => API_URL() + 'data/gallery',