feat: Add Sticky Notes to Canvas

Author: camielvs

src/components/Editor/Context/PipelineDetails.tsx

@@ -13,6 +13,7 @@ import { useFlagValue } from "@/components/shared/Settings/useFlags";
 import { BlockStack } from "@/components/ui/layout";
 import useToastNotification from "@/hooks/useToastNotification";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
+import { FLEX_NODES_ANNOTATION } from "@/utils/annotations";
 import { getComponentFileFromList } from "@/utils/componentStore";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
 
@@ -79,12 +80,12 @@ const PipelineDetails = () => {
     },
   ];
 
-  const annotations = Object.entries(
-    componentSpec.metadata?.annotations || {},
-  ).map(([key, value]) => ({
-    label: key,
-    value: String(value),
-  }));
+  const annotations = Object.entries(componentSpec.metadata?.annotations || {})
+    .filter(([key]) => key !== FLEX_NODES_ANNOTATION)
+    .map(([key, value]) => ({
+      label: key,
+      value: String(value),
+    }));
 
   const actions = [
     <RenamePipeline key="rename-pipeline-action" />,

src/components/PipelineRun/RunDetails.tsx

@@ -11,6 +11,7 @@ import { Text } from "@/components/ui/typography";
 import { useBackend } from "@/providers/BackendProvider";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useExecutionData } from "@/providers/ExecutionDataProvider";
+import { FLEX_NODES_ANNOTATION } from "@/utils/annotations";
 import {
   flattenExecutionStatusStats,
   getExecutionStatusLabel,
@@ -101,10 +102,12 @@ export const RunDetails = () => {
       {Object.keys(annotations).length > 0 && (
         <KeyValueList
           title="Annotations"
-          items={Object.entries(annotations).map(([key, value]) => ({
-            label: key,
-            value: String(value),
-          }))}
+          items={Object.entries(annotations)
+            .filter(([key]) => key !== FLEX_NODES_ANNOTATION)
+            .map(([key, value]) => ({
+              label: key,
+              value: String(value),
+            }))}
         />
       )}
 

src/components/shared/ReactFlow/FlowCanvas/ConfirmationDialogs/DeleteConfirmation.tsx

@@ -1,6 +1,8 @@
+import { type Node } from "@xyflow/react";
+
 import { createStringList } from "@/utils/string";
 
-import type { NodesAndEdges } from "../types";
+import { isFlexNode, type NodesAndEdges } from "../types";
 import { thisCannotBeUndone } from "./shared";
 
 export function getDeleteConfirmationDetails(deletedElements: NodesAndEdges) {
@@ -11,6 +13,18 @@ export function getDeleteConfirmationDetails(deletedElements: NodesAndEdges) {
     const isDeletingMultipleNodes = deletedNodes.length > 1;
 
     if (!isDeletingMultipleNodes) {
+      const node = deletedNodes[0];
+
+      if (isFlexNode(node)) {
+        const singleDeleteTitle = `Delete ${node.data.type}?`;
+        const singleDeleteDesc = `Title: '${node.data.properties.title}'`;
+
+        return {
+          title: singleDeleteTitle,
+          description: singleDeleteDesc,
+        };
+      }
+
       const singleDeleteTitle =
         "Delete Node" +
         (deletedNodes.length > 0 ? ` '${deletedNodes[0].id}'` : "") +
@@ -31,14 +45,32 @@ export function getDeleteConfirmationDetails(deletedElements: NodesAndEdges) {
       };
     }
 
+    const sortedDeletedNodes = sortFlexNodesLast(deletedNodes);
+
     const multiDeleteTitle = `Delete Nodes?`;
 
     const deletedNodeList = createStringList(
-      deletedNodes.map((node) => node.id),
+      getNodeIdsForDisplay(sortedDeletedNodes),
       2,
       "node",
     );
 
+    if (sortedDeletedNodes.every(isFlexNode)) {
+      const multiDeleteDesc = (
+        <div className="text-sm">
+          <p>{`This will delete ${deletedNodeList}.`}</p>
+          <br />
+          {thisCannotBeUndone}
+        </div>
+      );
+
+      return {
+        title: multiDeleteTitle,
+        content: multiDeleteDesc,
+        description: "",
+      };
+    }
+
     const multiDeleteDesc = (
       <div className="text-sm">
         <p>{`Deleting ${deletedNodeList} will also remove all connections to and from these nodes.`}</p>
@@ -86,3 +118,24 @@ export function getDeleteConfirmationDetails(deletedElements: NodesAndEdges) {
   // Fallback to default
   return {};
 }
+
+function getNodeIdsForDisplay(nodes: Node[]) {
+  return nodes.map((node) => {
+    if (isFlexNode(node)) {
+      return `'${node.data.properties.title}' (${node.data.type})`;
+    }
+    return node.id;
+  });
+}
+
+function sortFlexNodesLast(nodes: Node[]) {
+  return [...nodes].sort((a, b) => {
+    const aIsFlex = isFlexNode(a);
+    const bIsFlex = isFlexNode(b);
+
+    if (aIsFlex && !bIsFlex) return 1;
+    if (!aIsFlex && bIsFlex) return -1;
+
+    return 0;
+  });
+}

src/components/shared/ReactFlow/FlowCanvas/FlexNode/types.ts

@@ -10,10 +10,26 @@ export interface FlexNodeData extends Record<string, unknown> {
   readOnly?: boolean;
 }
 
+export type FlexNodeSpec = {
+  type: FlexNodeType;
+  properties: StickyNoteProperties;
+  size: string;
+  position: string;
+};
+
 type StickyNoteProperties = {
   title: string;
   content: string;
   color: string;
   border: string;
   zIndex: number;
 };
+
+export function parseFlexNodeSpec(spec: FlexNodeSpec): FlexNodeData {
+  return {
+    type: spec.type,
+    properties: spec.properties,
+    size: JSON.parse(spec.size),
+    position: JSON.parse(spec.position),
+  };
+}

src/components/shared/ReactFlow/FlowCanvas/FlexNode/utils.ts

@@ -0,0 +1,33 @@
+import { type Node } from "@xyflow/react";
+
+import { type FlexNodeSpec, parseFlexNodeSpec } from "./types";
+
+export const DEFAULT_STICKY_NOTE = {
+  title: "Sticky Note",
+  content: "",
+  color: "#FFF9C4",
+  border: "#F0F0F0",
+  zIndex: 1,
+};
+
+export const DEFAULT_FLEX_NODE_SIZE = { width: 150, height: 100 };
+
+export const createFlexNode = (
+  flexNode: [string, FlexNodeSpec],
+  readOnly: boolean,
+) => {
+  const [nodeId, flexSpec] = flexNode;
+
+  const flexNodeData = parseFlexNodeSpec(flexSpec);
+
+  const { position, size } = flexNodeData;
+
+  return {
+    id: nodeId,
+    data: { ...flexNodeData, readOnly },
+    ...size,
+    position,
+    type: "flex",
+    connectable: false,
+  } as Node;
+};

src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx

@@ -70,6 +70,7 @@ import {
   type NodesAndEdges,
   nodeTypes,
 } from "./types";
+import addFlexNode from "./utils/addFlexNode";
 import addTask from "./utils/addTask";
 import { createConnectedIONode } from "./utils/createConnectedIONode";
 import { duplicateNodes } from "./utils/duplicateNodes";
@@ -82,7 +83,7 @@ import { removeNode } from "./utils/removeNode";
 import { replaceTaskNode } from "./utils/replaceTaskNode";
 import { updateNodePositions } from "./utils/updateNodePosition";
 
-const SELECTABLE_NODES = new Set(["task", "input", "output"]);
+const SELECTABLE_NODES = new Set(["task", "input", "output", "flex"]);
 const UPGRADEABLE_NODES = new Set(["task"]);
 const REPLACEABLE_NODES = new Set(["task"]);
 const FAST_PLACE_NODE_TYPES = new Set<Node["type"]>(["task"]);
@@ -542,7 +543,25 @@ const FlowCanvas = ({
     const { spec: droppedTask, nodeType } = getNodeFromEvent(event);
 
     if (!nodeType) {
-      console.error("Dropped task type not identified.");
+      console.error("Dropped node type not identified.");
+      return;
+    }
+
+    if (nodeType === "flex" && reactFlowInstance) {
+      const position = getPositionFromEvent(event, reactFlowInstance);
+
+      const { spec: updatedSubgraphSpec } = addFlexNode(
+        position,
+        currentSubgraphSpec,
+      );
+
+      const newRootSpec = updateSubgraphSpec(
+        componentSpec,
+        currentSubgraphPath,
+        updatedSubgraphSpec,
+      );
+
+      setComponentSpec(newRootSpec);
       return;
     }
 

src/components/shared/ReactFlow/FlowCanvas/types.ts

@@ -5,6 +5,7 @@ import type { TaskType } from "@/types/taskNode";
 
 import SmoothEdge from "./Edges/SmoothEdge";
 import FlexNode from "./FlexNode/FlexNode";
+import type { FlexNodeData } from "./FlexNode/types";
 import GhostNode from "./GhostNode/GhostNode";
 import IONode from "./IONode/IONode";
 import TaskNode from "./TaskNode/TaskNode";
@@ -31,3 +32,7 @@ export const edgeTypes: Record<string, ComponentType<any>> = {
 export function isTaskNodeType(type: string): type is TaskType {
   return type === "task" || type === "input" || type === "output";
 }
+
+export function isFlexNode(node: Node): node is Node<FlexNodeData> {
+  return node.type === "flex";
+}

src/components/shared/ReactFlow/FlowCanvas/utils/addFlexNode.ts

@@ -0,0 +1,64 @@
+import type { XYPosition } from "@xyflow/react";
+import { nanoid } from "nanoid";
+
+import { FLEX_NODES_ANNOTATION } from "@/utils/annotations";
+import { type ComponentSpec } from "@/utils/componentSpec";
+import { deepClone } from "@/utils/deepClone";
+
+import type { FlexNodeSpec } from "../FlexNode/types";
+import { DEFAULT_FLEX_NODE_SIZE, DEFAULT_STICKY_NOTE } from "../FlexNode/utils";
+
+interface AddFlexNodeResult {
+  spec: ComponentSpec;
+  nodeId: string;
+}
+
+/**
+ * Creates a flex node (sticky note) and adds it to the component annotations.
+ *
+ * Nodes are created with default properties which can be edited later.
+ *
+ * @param position - Canvas position {x, y} where the node should be visually placed
+ * @param componentSpec - The component specification to modify (will be cloned, not mutated)
+ * @returns Object containing the updated spec and nodeId
+ *
+ * @example
+ * // Create a flex node
+ * const result = addFlexNode({ x: 100, y: 200 }, componentSpec);
+ *
+ */
+const addFlexNode = (
+  position: XYPosition,
+  componentSpec: ComponentSpec,
+): AddFlexNodeResult => {
+  const newComponentSpec = deepClone(componentSpec);
+
+  if (!newComponentSpec.metadata?.annotations) {
+    newComponentSpec.metadata = {};
+  }
+
+  if (!newComponentSpec.metadata.annotations) {
+    newComponentSpec.metadata.annotations = {};
+  }
+
+  const nodeId = nanoid();
+
+  const flexNodeSpec: FlexNodeSpec = {
+    type: "sticky-note",
+    properties: DEFAULT_STICKY_NOTE,
+    size: JSON.stringify(DEFAULT_FLEX_NODE_SIZE),
+    position: JSON.stringify(position),
+  };
+
+  newComponentSpec.metadata.annotations = {
+    ...newComponentSpec.metadata.annotations,
+    [FLEX_NODES_ANNOTATION]: {
+      ...(newComponentSpec.metadata.annotations[FLEX_NODES_ANNOTATION] || {}),
+      [nodeId]: flexNodeSpec,
+    },
+  };
+
+  return { spec: newComponentSpec, nodeId };
+};
+
+export default addFlexNode;

src/components/shared/ReactFlow/FlowCanvas/utils/removeNode.ts

@@ -1,5 +1,6 @@
 import { type Node } from "@xyflow/react";
 
+import { FLEX_NODES_ANNOTATION } from "@/utils/annotations";
 import {
   type ComponentSpec,
   isGraphImplementation,
@@ -29,6 +30,10 @@ export const removeNode = (node: Node, componentSpec: ComponentSpec) => {
     return removeGraphOutput(outputName, componentSpec);
   }
 
+  if (node.type === "flex") {
+    return removeFlexNode(node.id, componentSpec);
+  }
+
   return componentSpec;
 };
 
@@ -146,3 +151,22 @@ export const removeTask = (
 
   return componentSpec;
 };
+
+const removeFlexNode = (
+  nodeIdToRemove: string,
+  componentSpec: ComponentSpec,
+) => {
+  const newAnnotations = { ...componentSpec.metadata?.annotations };
+  if (newAnnotations && newAnnotations[FLEX_NODES_ANNOTATION]) {
+    const newStickyNotes = { ...newAnnotations[FLEX_NODES_ANNOTATION] };
+    delete newStickyNotes[nodeIdToRemove];
+    newAnnotations[FLEX_NODES_ANNOTATION] = newStickyNotes;
+  }
+  return {
+    ...componentSpec,
+    metadata: {
+      ...componentSpec.metadata,
+      annotations: newAnnotations,
+    },
+  };
+};