diff --git a/src/renderer/components/Experiment/Workflows/NewNodeModal.tsx b/src/renderer/components/Experiment/Workflows/NewNodeModal.tsx new file mode 100644 index 0000000000000000000000000000000000000000..47326441e502577dbc5b895d0ae2521c6baa53b8 --- /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 ece2e3ba25010c95e5d510f287905377c6128d78..699fe81596c2a1598928b8aff237f4a556218499 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>