temp: feat zIndex Management for Task Nodes

Author: camielvs

react-compiler.config.js

@@ -48,6 +48,7 @@ export const REACT_COMPILER_ENABLED_DIRS = [
   "src/components/shared/TaskDetails/DisplayNameEditor.tsx",
   "src/components/shared/TaskDetails/Actions/UnpackSubgraphButton.tsx",
   "src/components/shared/ReactFlow/FlowControls/StackingControls.tsx",
+  "src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/ZIndexEditor.tsx",
 
   // 11-20 useCallback/useMemo
   // "src/components/ui",                         // 12

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

@@ -26,6 +26,7 @@ import IOSection from "./IOSection/IOSection";
 import Logs, { OpenLogsInNewWindowLink } from "./logs";
 import OutputsList from "./OutputsList";
 import RenameTask from "./RenameTask";
+import { ZIndexEditor } from "./ZIndexEditor";
 
 interface TaskOverviewProps {
   taskNode: TaskNodeContextType;
@@ -165,6 +166,8 @@ const TaskOverview = ({ taskNode }: TaskOverviewProps) => {
           )}
         </Tabs>
       </div>
+
+      <ZIndexEditor taskNode={taskNode} />
     </BlockStack>
   );
 };

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/ZIndexEditor.tsx

@@ -0,0 +1,29 @@
+import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlock";
+import type { TaskNodeContextType } from "@/providers/TaskNodeProvider";
+import { ZINDEX_ANNOTATION } from "@/utils/annotations";
+
+import { StackingControls } from "../../../FlowControls/StackingControls";
+
+interface ZIndexEditorProps {
+  taskNode: TaskNodeContextType;
+}
+
+export const ZIndexEditor = ({ taskNode }: ZIndexEditorProps) => {
+  const handleStackingControlChange = (newZIndex: number) => {
+    const updatedAnnotations = {
+      ...taskNode.taskSpec?.annotations,
+      [ZINDEX_ANNOTATION]: `${newZIndex}`,
+    };
+
+    taskNode.callbacks.setAnnotations(updatedAnnotations);
+  };
+
+  return (
+    <ContentBlock className="border rounded-lg p-2 bg-background w-fit mx-auto">
+      <StackingControls
+        nodeId={taskNode.nodeId}
+        onChange={handleStackingControlChange}
+      />
+    </ContentBlock>
+  );
+};

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

@@ -1,7 +1,10 @@
 import type { XYPosition } from "@xyflow/react";
 
 import type { TaskType } from "@/types/taskNode";
-import { EDITOR_POSITION_ANNOTATION } from "@/utils/annotations";
+import {
+  EDITOR_POSITION_ANNOTATION,
+  ZINDEX_ANNOTATION,
+} from "@/utils/annotations";
 import {
   type ComponentSpec,
   type GraphSpec,
@@ -17,6 +20,8 @@ import {
   getUniqueTaskName,
 } from "@/utils/unique";
 
+import { getNodeTypeZIndexDefault } from "./zIndex";
+
 interface AddTaskResult {
   spec: ComponentSpec;
   taskId: string | undefined;
@@ -75,8 +80,9 @@ const addTask = (
   const graphSpec = newComponentSpec.implementation.graph;
 
   const nodePosition = { x: position.x, y: position.y };
-  const positionAnnotations = {
+  const annotations = {
     [EDITOR_POSITION_ANNOTATION]: JSON.stringify(nodePosition),
+    [ZINDEX_ANNOTATION]: getNodeTypeZIndexDefault(taskType),
   };
 
   if (taskType === "task") {
@@ -103,7 +109,7 @@ const addTask = (
 
     const mergedAnnotations = {
       ...taskSpec.annotations,
-      ...positionAnnotations,
+      ...annotations,
     };
 
     const updatedTaskSpec: TaskSpec = {
@@ -133,7 +139,7 @@ const addTask = (
     const inputSpec: InputSpec = {
       ...options,
       name: inputId,
-      annotations: positionAnnotations,
+      annotations,
     };
 
     const inputs = (newComponentSpec.inputs ?? []).concat([inputSpec]);
@@ -146,7 +152,7 @@ const addTask = (
     const outputSpec: OutputSpec = {
       ...options,
       name: outputId,
-      annotations: positionAnnotations,
+      annotations,
     };
 
     const outputs = (newComponentSpec.outputs ?? []).concat([outputSpec]);

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

@@ -31,6 +31,10 @@ export const Z_INDEX_RANGES: Record<NodeType, zIndexDefinition> = {
   },
 };
 
+export const getNodeTypeZIndexDefault = (nodeType: NodeType): number => {
+  return Z_INDEX_RANGES[nodeType].default;
+};
+
 const getNodeZIndexDefault = (node: Node): number => {
   if (!isDefinedNode(node)) {
     return 0;

src/config/launcherTaskAnnotationSchema.json

@@ -17,6 +17,13 @@
         "title": "Display Name",
         "x-type": "string",
         "exclusiveMaximum": 100
+      },
+      "zIndex": {
+        "type": "integer",
+        "title": "Z-Index",
+        "x-type": "string",
+        "exclusiveMinimum": -100,
+        "exclusiveMaximum": 100
       }
     }
   }

src/utils/annotations.ts

@@ -1,5 +1,6 @@
 import type { XYPosition } from "@xyflow/react";
 
+import { getNodeTypeZIndexDefault } from "@/components/shared/ReactFlow/FlowCanvas/utils/zIndex";
 import type { AnnotationConfig } from "@/types/annotations";
 
 import type { ComponentSpec } from "./componentSpec";
@@ -11,6 +12,7 @@ export const PIPELINE_RUN_NOTES_ANNOTATION = "notes";
 export const PIPELINE_CANONICAL_NAME_ANNOTATION = "canonical-pipeline-name";
 export const RUN_NAME_TEMPLATE_ANNOTATION = "run-name-template";
 export const EDITOR_POSITION_ANNOTATION = "editor.position";
+export const ZINDEX_ANNOTATION = "zIndex";
 
 export const DEFAULT_COMMON_ANNOTATIONS: AnnotationConfig[] = [
   {
@@ -185,3 +187,32 @@ export const extractPositionFromAnnotations = (
     return defaultPosition;
   }
 };
+
+/**
+ * Gets the z-index from annotations.
+ * @param annotations - The annotations object
+ * @returns z-index number
+ */
+export const extractZIndexFromAnnotations = (
+  annotations: Annotations,
+  nodeType: string,
+): number => {
+  const defaultZIndex = getNodeTypeZIndexDefault(nodeType);
+
+  if (!annotations) return defaultZIndex;
+
+  const zIndex = annotations[ZINDEX_ANNOTATION];
+
+  if (typeof zIndex === "number") {
+    return Math.round(zIndex);
+  }
+
+  if (typeof zIndex === "string") {
+    const parsedZIndex = parseInt(zIndex, 10);
+    if (!isNaN(parsedZIndex)) {
+      return Math.round(parsedZIndex);
+    }
+  }
+
+  return defaultZIndex;
+};

src/utils/nodes/createTaskNode.ts

@@ -2,7 +2,10 @@ import { type Node } from "@xyflow/react";
 
 import type { TaskNodeData } from "@/types/taskNode";
 
-import { extractPositionFromAnnotations } from "../annotations";
+import {
+  extractPositionFromAnnotations,
+  extractZIndexFromAnnotations,
+} from "../annotations";
 import type { TaskSpec } from "../componentSpec";
 import { generateDynamicNodeCallbacks } from "./generateDynamicNodeCallbacks";
 import { taskIdToNodeId } from "./nodeIdUtils";
@@ -12,9 +15,13 @@ export const createTaskNode = (
   nodeData: TaskNodeData,
   readOnly: boolean = false,
 ) => {
+  const nodeType = "task";
+
   const [taskId, taskSpec] = task;
 
   const position = extractPositionFromAnnotations(taskSpec.annotations);
+  const zIndex = extractZIndexFromAnnotations(taskSpec.annotations, nodeType);
+
   const nodeId = taskIdToNodeId(taskId);
 
   // Inject the taskId and nodeId into the callbacks
@@ -32,6 +39,7 @@ export const createTaskNode = (
       readOnly,
     },
     position: position,
-    type: "task",
+    type: nodeType,
+    zIndex,
   } as Node;
 };