From 9be140e04059a949967e36a113464367b8691ac8 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Wed, 26 Feb 2025 15:32:30 -0500
Subject: [PATCH] move add node to inside the workflow canvas
---
.../Experiment/Workflows/WorkflowCanvas.tsx | 41 +++++++++++++++----
.../components/Experiment/Workflows/index.tsx | 13 +++---
2 files changed, 41 insertions(+), 13 deletions(-)
diff --git a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
index 3277a5c7..02d7ddec 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 4632a4c7..ee54d653 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>
--
GitLab