fix: update look of the special nodes so it's more intuitive

keephq · Jan 7, 2025 · 67be461 · 67be461
1 parent f3a512d
commit 67be461
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/keep-ui/app/(keep)/workflows/builder/CustomNode.tsx b/keep-ui/app/(keep)/workflows/builder/CustomNode.tsx
@@ -74,6 +74,18 @@ function CustomNode({ id, data }: FlowNode) {
     setSelectedNode(id);
   }
 
+  if (data.id === "trigger_start" || data.id === "trigger_end") {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="rounded-full bg-orange-50 border border-orange-500 px-4 py-2 flex items-center justify-center">
+          {data.name}
+        </span>
+        <Handle type="target" position={Position.Top} className="w-32" />
+        <Handle type="source" position={Position.Bottom} className="w-32" />
+      </div>
+    );
+  }
+
   return (
     <>
       {!specialNodeCheck && (

diff --git a/keep-ui/utils/hooks/useWorkflowInitialization.ts b/keep-ui/utils/hooks/useWorkflowInitialization.ts
@@ -36,8 +36,14 @@ const getLayoutedElements = (
       ?.replace("condition-", "")
       ?.replace("__end", "");
 
-    const width = ["start", "end"].includes(type) ? 80 : 280;
-    const height = 80;
+    let width = ["start", "end"].includes(type) ? 80 : 280;
+    let height = 80;
+
+    // Special case for trigger start and end nodes, which act as section headers
+    if (node.id === "trigger_start" || node.id === "trigger_end") {
+      width = 150;
+      height = 40;
+    }
 
     dagreGraph.setNode(node.id, { width, height });
   });

diff --git a/keep-ui/utils/reactFlow.ts b/keep-ui/utils/reactFlow.ts
@@ -607,7 +607,7 @@ export function getTriggerStep(properties: V2Properties) {
   return [
     {
       id: "trigger_start",
-      name: "Trigger Start",
+      name: "Triggers",
       type: "trigger",
       componentType: "trigger",
       edgeTarget: triggerStartTargets,
@@ -617,7 +617,7 @@ export function getTriggerStep(properties: V2Properties) {
     ...steps,
     {
       id: "trigger_end",
-      name: "Workflow start",
+      name: "Workflow steps",
       type: "",
       componentType: "trigger",
       cantDelete: true,