From 2cecf99f29f4990e6f9ce2bdf93fc2cd2863519e Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Fri, 28 Feb 2025 09:47:18 -0500
Subject: [PATCH] add startNode type
---
.../Experiment/Workflows/WorkflowCanvas.tsx | 7 +--
.../Workflows/{ => nodes}/CustomNode.tsx | 0
.../Experiment/Workflows/nodes/StartNode.tsx | 43 +++++++++++++++++++
src/renderer/styles.css | 12 ++++++
4 files changed, 59 insertions(+), 3 deletions(-)
rename src/renderer/components/Experiment/Workflows/{ => nodes}/CustomNode.tsx (100%)
create mode 100644 src/renderer/components/Experiment/Workflows/nodes/StartNode.tsx
diff --git a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
index c0cd4182..ee0b8371 100644
--- a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
+++ b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
@@ -11,10 +11,11 @@ import {
} from '@xyflow/react';
import { PlusCircleIcon } from 'lucide-react';
import { useCallback, useEffect } from 'react';
-import CustomNode from './CustomNode';
+import CustomNode from './nodes/CustomNode';
+import StartNode from './nodes/StartNode';
import * as chatAPI from '../../../lib/transformerlab-api-sdk';
-const nodeTypes = { customNode: CustomNode };
+const nodeTypes = { customNode: CustomNode, startNode: StartNode };
function generateNodes(workflow: any): any[] {
const workflowConfig = JSON.parse(workflow?.config);
@@ -44,7 +45,7 @@ function generateNodes(workflow: any): any[] {
const nextNode = {
id: node.id,
- type: 'customNode',
+ type: node?.type == 'START' ? 'startNode' : 'customNode',
position: savedPosition,
data: data,
};
diff --git a/src/renderer/components/Experiment/Workflows/CustomNode.tsx b/src/renderer/components/Experiment/Workflows/nodes/CustomNode.tsx
similarity index 100%
rename from src/renderer/components/Experiment/Workflows/CustomNode.tsx
rename to src/renderer/components/Experiment/Workflows/nodes/CustomNode.tsx
diff --git a/src/renderer/components/Experiment/Workflows/nodes/StartNode.tsx b/src/renderer/components/Experiment/Workflows/nodes/StartNode.tsx
new file mode 100644
index 00000000..baa7562e
--- /dev/null
+++ b/src/renderer/components/Experiment/Workflows/nodes/StartNode.tsx
@@ -0,0 +1,43 @@
+import { Typography } from '@mui/joy';
+import { BuiltInNode, Handle, useReactFlow } from '@xyflow/react';
+import { NodeProps, Position } from '@xyflow/system';
+import { XIcon } from 'lucide-react';
+
+export default function memo({
+ id,
+ data,
+ isConnectable,
+ targetPosition = Position.Top,
+ sourcePosition = Position.Bottom,
+}: NodeProps<BuiltInNode>) {
+ const { deleteElements } = useReactFlow();
+
+ const handleDelete = () => {
+ deleteElements({ nodes: [{ id }] });
+ };
+
+ return (
+ <div className="custom-node" style={{ width: '100%' }}>
+ <div
+ className="type-badge"
+ style={{
+ // backgroundColor: 'var(--joy-palette-success-400)',
+ width: '100%',
+ borderRadius: '3px',
+ }}
+ >
+ <Typography
+ level="body-xs"
+ sx={{ color: 'var(--joy-palette-primary-plainColor)' }}
+ >
+ START
+ </Typography>
+ </div>
+ <Handle
+ type="source"
+ position={sourcePosition}
+ isConnectable={isConnectable}
+ />
+ </div>
+ );
+}
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 24c99bd1..5a6180c8 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -253,6 +253,18 @@ code if we want */
border: var(--xy-node-border, var(--xy-node-border-default));
}
+.react-flow__node-startNode {
+ border: 2px solid var(--joy-palette-primary-plainColor);
+ background-color: var(--joy-palette-primary-softBg);
+ border-radius: 20px;
+ width: 80px;
+ height: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
.custom-node-delete-button {
--
GitLab