From 24e78caa5ebcb5f2c51037853194d6eb2951872e Mon Sep 17 00:00:00 2001
From: derekmeegan <derek.j.meegan@gmail.com>
Date: Wed, 21 May 2025 21:50:45 -0400
Subject: [PATCH] refactor: simplify workflow data handling

---
 ui/src/components/play-button.tsx     |   9 +-
 ui/src/components/sidebar.tsx         |  27 +----
 ui/src/components/workflow-item.tsx   |  54 ++++-----
 ui/src/components/workflow-layout.tsx | 158 ++++++++++++++++++--------
 ui/src/types/play-button.types.ts     |   4 +-
 ui/src/types/sidebar.types.ts         |  10 +-
 ui/src/types/workflow-layout.types.ts |   4 +-
 ui/src/utils/extract-metadata.ts      |  13 +++
 ui/src/utils/json-to-flow.ts          |  22 +---
 9 files changed, 171 insertions(+), 130 deletions(-)
 create mode 100644 ui/src/utils/extract-metadata.ts

diff --git a/ui/src/components/play-button.tsx b/ui/src/components/play-button.tsx
index 2f95f229..ae62f221 100644
--- a/ui/src/components/play-button.tsx
+++ b/ui/src/components/play-button.tsx
@@ -4,7 +4,7 @@ import { PlayButtonProps, InputField } from "../types/play-button.types";
 
 export const PlayButton: React.FC<PlayButtonProps> = ({
   workflowName,
-  workflowMetadata,
+  workflowData
 }) => {
   const [showModal, setShowModal] = useState<boolean>(false);
   const [showLogViewer, setShowLogViewer] = useState<boolean>(false);
@@ -15,14 +15,15 @@ export const PlayButton: React.FC<PlayButtonProps> = ({
   const [logPosition, setLogPosition] = useState<number>(0);
   const [workflowStatus, setWorkflowStatus] = useState<string>("idle");
 
+  const inputSchema = workflowData?.input_schema;
   const openModal = () => {
     if (!workflowName) return;
 
     setShowModal(true);
     setError(null);
 
-    if (workflowMetadata && workflowMetadata.input_schema) {
-      const fields = workflowMetadata.input_schema.map((input: any) => ({
+    if (inputSchema) {
+      const fields = inputSchema.map((input: any) => ({
         name: input.name,
         type: input.type,
         required: input.required,
@@ -157,7 +158,7 @@ export const PlayButton: React.FC<PlayButtonProps> = ({
             {/* header */}
             <div className="flex items-center justify-between border-b border-gray-700 p-4">
               <h3 className="m-0 text-lg">
-                Execute Workflow: {workflowMetadata?.name || workflowName}
+                Execute Workflow: {workflowName}
               </h3>
               <button
                 onClick={closeModal}
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index 1d6b33e9..46891a29 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -1,23 +1,12 @@
 import React from "react";
 import WorkflowItem from "./workflow-item";
-import { WorkflowMetadata } from "../types/workflow-layout.types";
-
-interface SidebarProps {
-  workflows: string[];
-  onSelect: (workflow: string) => void;
-  selected: string | null;
-  workflowMetadata: WorkflowMetadata | null;
-  onUpdateMetadata: (metadata: WorkflowMetadata) => Promise<void>;
-  allWorkflowsMetadata?: Record<string, WorkflowMetadata>;
-}
+import { SidebarProps } from "../types/sidebar.types";
 
 export const Sidebar: React.FC<SidebarProps> = ({
-  workflows,
   onSelect,
   selected,
-  workflowMetadata,
-  onUpdateMetadata,
-  allWorkflowsMetadata = {},
+  workflowsData,
+  onUpdateWorkflow,
 }) => (
   <aside className="w-[250px] border-r border-[#542e2e] p-3 bg-[#2a2a2a] text-white flex flex-col overflow-auto">
     {/* logo */}
@@ -32,18 +21,14 @@ export const Sidebar: React.FC<SidebarProps> = ({
     <h3 className="text-lg text-[#ddd]">Workflows</h3>
 
     <ul className="m-0 p-0">
-      {workflows.map((id) => (
+      {Object.keys(workflowsData).map((id) => (
         <WorkflowItem
           key={id}
           id={id}
           selected={id === selected}
-          metadata={
-            id === selected
-              ? workflowMetadata ?? undefined
-              : allWorkflowsMetadata[id]
-          }
+          workflow={workflowsData[id]}
           onSelect={onSelect}
-          onUpdateMetadata={onUpdateMetadata}
+          onUpdateWorkflow={(workflow) => onUpdateWorkflow(id, workflow)}
         />
       ))}
     </ul>
diff --git a/ui/src/components/workflow-item.tsx b/ui/src/components/workflow-item.tsx
index 32a3eb73..b7035bc6 100644
--- a/ui/src/components/workflow-item.tsx
+++ b/ui/src/components/workflow-item.tsx
@@ -1,56 +1,52 @@
 import React, { useState, ChangeEvent } from "react";
 import {
-  WorkflowMetadata,
+  Workflow,
   WorkflowItemProps,
 } from "../types/workflow-layout.types";
 
 const WorkflowItem: React.FC<WorkflowItemProps> = ({
   id,
   selected,
-  metadata,
+  workflow,
   onSelect,
-  onUpdateMetadata,
+  onUpdateWorkflow,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
-  const [edited, setEdited] = useState<WorkflowMetadata | null>(null);
+  const [edited, setEdited] = useState<Workflow | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
   const displayName = () => {
-    if (metadata)
+    if (workflow)
       return (
         <>
-          <span className="text-md">{metadata.name}</span>
-          {metadata.version && (
+          <span className="text-md">{workflow.name}</span>
+          {workflow.version && (
             <span className="text-xs text-[#888] ml-1.5">
-              v{metadata.version}
+              v{workflow.version}
             </span>
           )}
         </>
       );
-
-    return (
-      <span className="text-[#ccc]">
-        <span className="opacity-70">Loading workflow…</span>
-        <span className="hidden">{id}</span>
-      </span>
-    );
+    return <span className="text-md">{id}</span>;
   };
 
-  const change =
-    (field: keyof WorkflowMetadata) =>
-    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-      edited && setEdited({ ...edited, [field]: e.target.value });
+  const change = 
+    (field: keyof Workflow) => 
+    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (!edited) return;
+      setEdited({ ...edited, [field]: e.target.value });
+    };
 
   const save = async () => {
     if (!edited) return;
     setSubmitting(true);
-    await onUpdateMetadata(edited).finally(() => setSubmitting(false));
+    await onUpdateWorkflow(edited).finally(() => setSubmitting(false));
     setIsEditing(false);
   };
 
-  const editForm = metadata && (
+  const editForm = workflow && (
     <div>
-      {(["name", "version"] as (keyof WorkflowMetadata)[]).map((f) => (
+      {(["name", "version"] as const).map((f) => (
         <label key={f} className="block text-xs mb-2">
           <span className="block text-[#aaa] mb-1">
             {f[0]?.toUpperCase() + f.slice(1)}
@@ -58,7 +54,7 @@ const WorkflowItem: React.FC<WorkflowItemProps> = ({
           <input
             className="w-full bg-[#333] border border-[#555] text-white p-1.5 rounded text-xs"
             value={edited?.[f] ?? ""}
-            onChange={change(f)}
+            onChange={change(f as keyof Workflow)}
           />
         </label>
       ))}
@@ -92,18 +88,18 @@ const WorkflowItem: React.FC<WorkflowItemProps> = ({
     </div>
   );
 
-  const readOnly = metadata && (
+  const readOnly = workflow && (
     <>
       <div className="mb-2">
         <div className="text-xs text-[#aaa] mb-1">Description</div>
-        <div className="text-xs">{metadata.description}</div>
+        <div className="text-xs">{workflow.description}</div>
       </div>
 
-      {metadata.input_schema?.length && (
+      {Array.isArray(workflow.input_schema) && workflow.input_schema.length > 0 && (
         <>
           <div className="text-xs text-[#aaa] mb-1">Input Parameters</div>
           <ul className="pl-4 text-xs list-disc marker:text-[#7ac5ff]">
-            {metadata.input_schema.map((p) => (
+            {workflow.input_schema.map((p) => (
               <li key={p.name} className="mb-1">
                 <span className="text-[#7ac5ff]">{p.name}</span>
                 <span className="text-[#aaa]"> ({p.type})</span>
@@ -131,14 +127,14 @@ const WorkflowItem: React.FC<WorkflowItemProps> = ({
       </li>
 
       {/* details panel */}
-      {selected && metadata && (
+      {selected && workflow && (
         <li className="py-2 pl-4 border-l border-[#444] my-1 ml-1">
           <div className="flex justify-between items-center mb-2">
             <h4 className="m-0 text-sm text-[#ddd]">Details</h4>
             {!isEditing && (
               <button
                 onClick={() => {
-                  setEdited({ ...metadata });
+                  setEdited({ ...workflow });
                   setIsEditing(true);
                 }}
                 className="bg-[#444] text-white py-1 px-2 rounded text-xs"
diff --git a/ui/src/components/workflow-layout.tsx b/ui/src/components/workflow-layout.tsx
index 0c52473e..7c677c10 100644
--- a/ui/src/components/workflow-layout.tsx
+++ b/ui/src/components/workflow-layout.tsx
@@ -19,7 +19,8 @@ import {
 import { type Node } from "@xyflow/react";
 import { NodeData } from "../types/node-config-menu.types";
 import { jsonToFlow } from "../utils/json-to-flow";
-import { type WorkflowMetadata } from "../types/workflow-layout.types";
+import { extractMetadata } from "../utils/extract-metadata";
+import { type Workflow } from "../types/workflow-layout.types";
 import Sidebar from "./sidebar";
 import { NodeConfigMenu } from "./node-config-menu";
 import { PlayButton } from "./play-button";
@@ -31,49 +32,78 @@ const WorkflowLayout: React.FC = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const [selectedNode, setSelectedNode] = useState<Node<NodeData> | null>(null);
-  const [workflowMetadata, setWorkflowMetadata] =
-    useState<WorkflowMetadata | null>(null);
+  const [workflowsData, setWorkflowsData] = useState<Record<string, Workflow>>({});
+  const [isLoadingAllWorkflows, setIsLoadingAllWorkflows] = useState(false);
   const [savedNodePositions, setSavedNodePositions] = useState<
     Record<string, Record<string, { x: number; y: number }>>
   >({});
   const { fitView } = useReactFlow();
 
-  // ----- Queries using $api -----
-  // Fetch all workflows
-  const { data: workflowsResponse, isLoading: isLoadingWorkflows } =
-    $api.useQuery("get", "/api/workflows");
-
-  const workflows: string[] = workflowsResponse?.workflows ?? [];
-
-  // Fetch a specific workflow (enabled only when selected is truthy)
-  const { data: selectedWorkflow, isLoading: isLoadingSelectedWorkflow } =
-    $api.useQuery(
-      "get",
-      "/api/workflows/{name}",
-      selected
-        ? {
-            params: { path: { name: selected } },
-          }
-        : ({} as any),
-      {
-        enabled: !!selected,
-      }
-    );
-
+  // Get the selected workflow data from our complete data
+  const selectedWorkflow = selected ? workflowsData[selected] : null;
+  
   // Mutation for updating workflow metadata
   const updateMetadataMutation = $api.useMutation(
     "post",
     "/api/workflows/update-metadata"
   );
+  // Mutation for fetching list of workflows
+  const workflowListMutation = $api.useMutation(
+    "get",
+    "/api/workflows"
+  );
+  // Mutation for fetching individual workflow data
+  const workflowFetchMutation = $api.useMutation(
+    "get",
+    "/api/workflows/{name}"
+  );
 
   const updateWorkflowMetadata = useCallback(
-    async (name: string, metadata: WorkflowMetadata) => {
+    async (workflowName: string, updatedWorkflow: Workflow) => {
+      // Extract metadata for the API call
+      const metadata = extractMetadata(updatedWorkflow);
+      
+      // Update the metadata via API
       await updateMetadataMutation.mutateAsync({
-        body: { name, metadata } as any,
+        body: { name: workflowName, metadata } as any,
       });
+      
+      // Refresh the workflow data
+      await refreshWorkflow(workflowName);
     },
     [updateMetadataMutation]
   );
+  
+  // Function to refresh a workflow - fetches latest data and updates metadata if needed
+  const refreshWorkflow = useCallback(
+    async (workflowName: string) => {
+      // Validate that we have a workflow name and it exists in our data
+      if (!workflowName || !workflowsData[workflowName]) return null;
+      
+      try {
+        // Fetch the latest workflow data
+        const result = await workflowFetchMutation.mutateAsync({
+          params: { path: { name: workflowName } }
+        });
+        
+        if (result) {
+          const parsedWorkflow = JSON.parse(result) as Workflow;
+          
+          setWorkflowsData(prev => ({
+            ...prev,
+            [workflowName]: parsedWorkflow
+          }));
+          
+          return parsedWorkflow;
+        }
+      } catch (error) {
+        console.error(`Error refreshing workflow ${workflowName}:`, error);
+      }
+      
+      return null;
+    },
+    [workflowFetchMutation]
+  );
 
   const isUpdating = updateMetadataMutation.isPending;
 
@@ -125,7 +155,6 @@ const WorkflowLayout: React.FC = () => {
       }
 
       setEdges(flowData.edges as any);
-      setWorkflowMetadata(flowData.metadata);
     }
   }, [selectedWorkflow, selected, savedNodePositions, setNodes, setEdges]);
 
@@ -147,17 +176,56 @@ const WorkflowLayout: React.FC = () => {
     },
     [selected]
   );
+  
+  // Load all workflow data on component mount
+  useEffect(() => {
+    // Function to fetch all workflow data at once
+    const fetchAllWorkflowsData = async () => {
+      setIsLoadingAllWorkflows(true);
+      
+      const processedData: Record<string, any> = {};
+      
+      try {
+        const workflowsListResponse = await workflowListMutation.mutateAsync({});
+        const workflowNames = workflowsListResponse?.workflows ?? [];
+        
+        for (const workflowName of workflowNames) {
+          try {
+            const result = await workflowFetchMutation.mutateAsync({
+              params: { path: { name: workflowName } }
+            });
+            
+            if (result) {
+              // Parse the JSON string into a Workflow object
+              const parsedWorkflow: Workflow = JSON.parse(result);
+              processedData[workflowName] = parsedWorkflow;
+            }
+          } catch (error) {
+            console.error(`Error fetching data for ${workflowName}:`, error);
+          }
+        }
+        
+        // Update state with all workflow data
+        setWorkflowsData(processedData);
+      } catch (error) {
+        console.error('Error fetching all workflow data:', error);
+      } finally {
+        setIsLoadingAllWorkflows(false);
+      }
+    };
+    
+    fetchAllWorkflowsData();
+  }, []);
 
-  // Auto-select first workflow if none selected
+   // Auto-select first workflow if none selected
   useEffect(() => {
-    if (workflows.length > 0 && !selected) {
-      setSelected(workflows[0]!);
+    const workflowKeys = Object.keys(workflowsData);
+    if (workflowKeys.length > 0 && !selected) {
+      setSelected(workflowKeys[0] || null);
     }
-  }, [workflows, selected]);
+  }, [workflowsData, selected]);
 
-  const isLoading = isLoadingWorkflows || isLoadingSelectedWorkflow;
-
-  if (isLoading) {
+  if (isLoadingAllWorkflows) {
     return (
       <div className="flex h-screen flex-col items-center justify-center bg-[#2a2a2a] text-white">
         <img
@@ -170,20 +238,15 @@ const WorkflowLayout: React.FC = () => {
     );
   }
 
-  if (!workflows.length) return <NoWorkflowsMessage />;
+  if (!Object.keys(workflowsData).length) return <NoWorkflowsMessage />;
 
   return (
     <div className="flex h-screen font-sans">
       <Sidebar
-        workflows={workflows}
         onSelect={setSelected}
         selected={selected}
-        workflowMetadata={workflowMetadata}
-        onUpdateMetadata={async (metadata: WorkflowMetadata) => {
-          if (selected) {
-            await updateWorkflowMetadata(selected, metadata);
-          }
-        }}
+        workflowsData={workflowsData}
+        onUpdateWorkflow={updateWorkflowMetadata}
       />
 
       <div className="relative flex-1">
@@ -209,20 +272,15 @@ const WorkflowLayout: React.FC = () => {
             <div className="absolute right-5 top-5 z-10 flex gap-2">
               <PlayButton
                 workflowName={selected}
-                workflowMetadata={workflowMetadata}
+                workflowData={selected && workflowsData[selected] ? workflowsData[selected] : null}
               />
 
               <button
                 title="Refresh workflow"
                 className="flex h-9 w-9 items-center justify-center rounded-full bg-[#2a2a2a] text-white shadow transition-transform duration-200 ease-in-out hover:scale-105 hover:bg-blue-500"
-                onClick={async () => {
-                  if (selected && workflowMetadata) {
-                    await updateWorkflowMetadata(selected, workflowMetadata);
-                  }
-                }}
+                onClick={() => selected && refreshWorkflow(selected)}
                 disabled={isUpdating}
               >
-                {/* hero‑icons refresh */}
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
diff --git a/ui/src/types/play-button.types.ts b/ui/src/types/play-button.types.ts
index e0d64c00..4d3d6b8a 100644
--- a/ui/src/types/play-button.types.ts
+++ b/ui/src/types/play-button.types.ts
@@ -1,8 +1,8 @@
-import { WorkflowMetadata } from './workflow-layout.types';
+import { Workflow } from './workflow-layout.types';
 
 export interface PlayButtonProps {
   workflowName: string | null;
-  workflowMetadata: WorkflowMetadata | null;
+  workflowData: Workflow | null;
 }
 
 export interface InputField {
diff --git a/ui/src/types/sidebar.types.ts b/ui/src/types/sidebar.types.ts
index fe3ab83b..27b132d5 100644
--- a/ui/src/types/sidebar.types.ts
+++ b/ui/src/types/sidebar.types.ts
@@ -1,10 +1,8 @@
-import { type WorkflowMetadata } from './workflow-layout.types';
+import { Workflow } from './workflow-layout.types';
 
 export interface SidebarProps {
-  workflows: string[];
-  onSelect: (wf: string) => void;
+  onSelect: (workflowName: string) => void;
   selected: string | null;
-  workflowMetadata: WorkflowMetadata | null;
-  onUpdateMetadata: (metadata: WorkflowMetadata) => Promise<void>;
-  allWorkflowsMetadata?: Record<string, WorkflowMetadata>;
+  workflowsData: Record<string, Workflow>;
+  onUpdateWorkflow: (workflowName: string, workflow: Workflow) => Promise<void>;
 }
\ No newline at end of file
diff --git a/ui/src/types/workflow-layout.types.ts b/ui/src/types/workflow-layout.types.ts
index cfb55be2..7e9ce042 100644
--- a/ui/src/types/workflow-layout.types.ts
+++ b/ui/src/types/workflow-layout.types.ts
@@ -60,7 +60,7 @@ export interface WorkflowMetadata {
 export interface WorkflowItemProps {
   id: string;
   selected: boolean;
-  metadata?: WorkflowMetadata;
+  workflow?: Workflow;
   onSelect: (id: string) => void;
-  onUpdateMetadata: (m: WorkflowMetadata) => Promise<void>;
+  onUpdateWorkflow: (workflow: Workflow) => Promise<void>;
 }
diff --git a/ui/src/utils/extract-metadata.ts b/ui/src/utils/extract-metadata.ts
new file mode 100644
index 00000000..9e506296
--- /dev/null
+++ b/ui/src/utils/extract-metadata.ts
@@ -0,0 +1,13 @@
+import { WorkflowMetadata, Workflow } from '../types/workflow-layout.types';
+
+export function extractMetadata(workflow: Workflow): WorkflowMetadata {
+  const metadata: WorkflowMetadata = {
+    name: workflow.name,
+    description: workflow.description,
+    version: workflow.version,
+    input_schema: workflow.input_schema,
+    workflow_analysis: workflow.workflow_analysis
+  };
+  
+  return metadata;
+}
diff --git a/ui/src/utils/json-to-flow.ts b/ui/src/utils/json-to-flow.ts
index c4868e14..9c365167 100644
--- a/ui/src/utils/json-to-flow.ts
+++ b/ui/src/utils/json-to-flow.ts
@@ -1,36 +1,26 @@
 import { Edge } from '@xyflow/react';
-import { Workflow, WorkflowStep, WorkflowMetadata, AppNode } from '../types/workflow-layout.types';
+import { Workflow, WorkflowStep, AppNode } from '../types/workflow-layout.types';
 
-export function jsonToFlow(workflow: string): { 
+export function jsonToFlow(workflow: Workflow): { 
   nodes: AppNode[]; 
   edges: Edge[];
-  metadata: WorkflowMetadata;
 } {
-  const parsedWorkflow = JSON.parse(workflow) as Workflow;
-  const nodes: AppNode[] = parsedWorkflow.steps.map((step: WorkflowStep, idx: number) => ({
+  const nodes: AppNode[] = workflow.steps.map((step: WorkflowStep, idx: number) => ({
     id: String(idx),
     data: { 
       label: `${step.description}`, 
       stepData: step,
-      workflowName: parsedWorkflow.name
+      workflowName: workflow.name
     },
     position: { x: 0, y: idx * 100 }
   }));
 
-  const edges: Edge[] = parsedWorkflow.steps.slice(1).map((_, idx) => ({
+  const edges: Edge[] = workflow.steps.slice(1).map((_, idx) => ({
     id: `e${idx}-${idx + 1}`,
     source: String(idx),
     target: String(idx + 1),
     animated: true,
   }));
 
-  const metadata: WorkflowMetadata = {
-    name: parsedWorkflow.name,
-    description: parsedWorkflow.description,
-    version: parsedWorkflow.version,
-    input_schema: parsedWorkflow.input_schema,
-    workflow_analysis: parsedWorkflow.workflow_analysis
-  };
-
-  return { nodes, edges, metadata };
+  return { nodes, edges };
 }
\ No newline at end of file