From 1442476e60b3d73e00a3141115b0f7351df740e4 Mon Sep 17 00:00:00 2001
From: sanjaycal <sanjay.calgary@gmail.com>
Date: Wed, 26 Feb 2025 11:12:44 -0500
Subject: [PATCH] add the ability to add nodes(with the json format for now,
changing to templates soon)
---
.../Experiment/Workflows/NewNodeModal.tsx | 54 +++++++++++++++++++
.../components/Experiment/Workflows/index.tsx | 21 +++++++-
2 files changed, 74 insertions(+), 1 deletion(-)
create mode 100644 src/renderer/components/Experiment/Workflows/NewNodeModal.tsx
diff --git a/src/renderer/components/Experiment/Workflows/NewNodeModal.tsx b/src/renderer/components/Experiment/Workflows/NewNodeModal.tsx
new file mode 100644
index 00000000..47326441
--- /dev/null
+++ b/src/renderer/components/Experiment/Workflows/NewNodeModal.tsx
@@ -0,0 +1,54 @@
+import {
+ Button,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ FormHelperText,
+ FormLabel,
+ Input,
+ Modal,
+ ModalClose,
+ ModalDialog,
+ Stack,
+ Textarea,
+} from '@mui/joy';
+import { useState } from 'react';
+
+import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
+
+export default function NewNodeModal({ open, onClose, workflowId }) {
+ const [state, setState] = useState(null);
+
+ return (
+ <Modal open={open} onClose={() => onClose()}>
+ <ModalDialog>
+ <ModalClose />
+ <DialogTitle>Create new Node</DialogTitle>
+ <DialogContent>Fill in the information.</DialogContent>
+ <form
+ onSubmit={async (event: React.FormEvent<HTMLFormElement>) => {
+ event.preventDefault();
+ const formData = new FormData(event.currentTarget);
+ const node = formData.get('node') as string;
+ //const nodes = formData.get('nodes') as string;
+ await fetch(
+ chatAPI.Endpoints.Workflows.AddNode(
+ workflowId,
+ node
+ )
+ );
+ onClose();
+ }}
+ >
+ <Stack spacing={2}>
+ <FormControl>
+ <FormLabel>Nodes</FormLabel>
+ <Textarea minRows={4} autoFocus required name="node" />
+ </FormControl>
+ <Button type="submit">Submit</Button>
+ </Stack>
+ </form>
+ </ModalDialog>
+ </Modal>
+ );
+}
diff --git a/src/renderer/components/Experiment/Workflows/index.tsx b/src/renderer/components/Experiment/Workflows/index.tsx
index ece2e3ba..699fe815 100644
--- a/src/renderer/components/Experiment/Workflows/index.tsx
+++ b/src/renderer/components/Experiment/Workflows/index.tsx
@@ -12,18 +12,21 @@ import {
import { Background, ControlButton, Controls, ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
-import { PlayIcon, PlusCircleIcon, WorkflowIcon } from 'lucide-react';
+import { PlayIcon, PlusCircleIcon, PlusIcon, WorkflowIcon } from 'lucide-react';
import { useState } from 'react';
import * as chatAPI from '../../../lib/transformerlab-api-sdk';
import useSWR from 'swr';
import NewWorkflowModal from './NewWorkflowModal';
+import NewNodeModal from './NewNodeModal';
const fetcher = (url: any) => fetch(url).then((res) => res.json());
export default function Workflows({ experimentInfo }) {
const [selectedWorkflow, setSelectedWorkflow] = useState(null);
const [newWorkflowModalOpen, setNewWorkflowModalOpen] = useState(false);
+ const [newNodeflowModalOpen, setNewNodeflowModalOpen] = useState(false);
+
const {
data: workflowsData,
error: workflowsError,
@@ -100,6 +103,16 @@ export default function Workflows({ experimentInfo }) {
}}
experimentId={experimentInfo?.id}
/>
+ {selectedWorkflow &&
+ <NewNodeModal
+ open={newNodeflowModalOpen}
+ onClose={() => {
+ setNewNodeflowModalOpen(false);
+ mutateWorkflows();
+ }}
+ workflowId={selectedWorkflow?.id}
+ />
+ }
<Typography level="h1">Workflows</Typography>
<Typography level="body-lg" mb={3}>
This is where it will all go
@@ -193,6 +206,12 @@ export default function Workflows({ experimentInfo }) {
Running
</Button>
)}
+ <Button
+ startDecorator={<PlusIcon />}
+ onClick={() => setNewNodeflowModalOpen(true)}
+ >
+ Add Node
+ </Button>
<Button variant="outlined">Edit</Button>
<Button variant="outlined">Fight</Button>
</Box>
--
GitLab