diff --git a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx index 3277a5c74adfe84c7329b796cb7abbafb4dd0bd7..02d7ddecbd7d9b547fca7e052d9aafba99dfda9d 100644 --- a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx +++ b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx @@ -1,3 +1,4 @@ +import { Button } from '@mui/joy'; import { Background, ControlButton, @@ -54,7 +55,7 @@ function generateEdges(workflow: any) { return out; } -const Flow = ({ selectedWorkflow }) => { +const Flow = ({ selectedWorkflow, setNewNodeModalOpen = (x) => {} }) => { const reactFlowInstance = useReactFlow(); // Use fitView after the component mounts useEffect(() => { @@ -81,6 +82,26 @@ const Flow = ({ selectedWorkflow }) => { panOnScroll={false} style={{ backgroundColor: '#F7F9FB' }} > + <Button + variant="plain" + sx={{ + zIndex: '1000', + position: 'absolute', + bottom: '20px', + right: '20px', + }} + startDecorator={ + <PlusCircleIcon + strokeWidth={2} + size={32} + onClick={() => { + setNewNodeModalOpen(true); + }} + /> + } + > + Add Node + </Button> <Background color="#96ADE9" /> <Controls> <ControlButton @@ -91,19 +112,23 @@ const Flow = ({ selectedWorkflow }) => { * </ControlButton> </Controls> - <PlusCircleIcon - style={{ position: 'absolute', bottom: '20px', right: '20px' }} - strokeWidth={2} - size={32} - /> </ReactFlow> ); }; -export default function WorkflowCanvas({ selectedWorkflow }) { +export default function WorkflowCanvas({ + selectedWorkflow, + setNewNodeModalOpen = () => {}, +}) { + if (!selectedWorkflow) { + return null; + } return ( <ReactFlowProvider> - <Flow selectedWorkflow={selectedWorkflow} /> + <Flow + selectedWorkflow={selectedWorkflow} + setNewNodeModalOpen={setNewNodeModalOpen} + /> </ReactFlowProvider> ); } diff --git a/src/renderer/components/Experiment/Workflows/index.tsx b/src/renderer/components/Experiment/Workflows/index.tsx index 4632a4c7b33a77a449b9d675a9f0c2f0cec7159c..ee54d65392d4eb202b2d1aae16ca8bc3da9d81b9 100644 --- a/src/renderer/components/Experiment/Workflows/index.tsx +++ b/src/renderer/components/Experiment/Workflows/index.tsx @@ -142,7 +142,10 @@ export default function Workflows({ experimentInfo }) { }} > {selectedWorkflow ? ( - <WorkflowCanvas selectedWorkflow={selectedWorkflow} /> + <WorkflowCanvas + selectedWorkflow={selectedWorkflow} + setNewNodeModalOpen={setNewNodeflowModalOpen} + /> ) : ( <Box sx={{ width: '100%', backgroundColor: '#F7F9FB' }} p={4}> Select Workflow @@ -162,15 +165,15 @@ export default function Workflows({ experimentInfo }) { Running </Button> )} - <Button + {/* <Button startDecorator={<PlusIcon />} onClick={() => setNewNodeflowModalOpen(true)} > Add Node - </Button> - <Button startDecorator={<PenIcon />} variant="outlined"> + </Button> */} + {/* <Button startDecorator={<PenIcon />} variant="outlined"> Edit - </Button> + </Button> */} <Button startDecorator={<AxeIcon />} variant="outlined"> Fight </Button>