chore: Node Definition Cleanup

Author: camielvs

src/components/PipelineRun/RunToolbar.tsx

@@ -12,7 +12,7 @@ import {
 } from "@/utils/executionStatus";
 
 import { ViewYamlButton } from "../shared/Buttons/ViewYamlButton";
-import { buildTakSpecShape } from "../shared/PipelineRunNameTemplate/types";
+import { buildTaskSpecShape } from "../shared/PipelineRunNameTemplate/types";
 import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
 import { ClonePipelineButton } from "./components/ClonePipelineButton";
 import { InspectPipelineButton } from "./components/InspectPipelineButton";
@@ -55,7 +55,7 @@ export const RunToolbar = () => {
 
   const pipelineName =
     extractCanonicalName(
-      buildTakSpecShape(details?.task_spec, componentSpec),
+      buildTaskSpecShape(details?.task_spec, componentSpec),
     ) ?? componentSpec.name;
 
   return (

src/components/PipelineRun/components/ClonePipelineButton.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "@tanstack/react-router";
 import { useCallback } from "react";
 
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
-import { buildTakSpecShape } from "@/components/shared/PipelineRunNameTemplate/types";
+import { buildTaskSpecShape } from "@/components/shared/PipelineRunNameTemplate/types";
 import { Icon } from "@/components/ui/icon";
 import useToastNotification from "@/hooks/useToastNotification";
 import { useExecutionDataOptional } from "@/providers/ExecutionDataProvider";
@@ -35,7 +35,7 @@ export const ClonePipelineButton = ({
       taskArguments?: Record<string, string>;
     }) => {
       const canonicalName = extractCanonicalName(
-        buildTakSpecShape(runDetails?.rootDetails?.task_spec, componentSpec),
+        buildTaskSpecShape(runDetails?.rootDetails?.task_spec, componentSpec),
       );
 
       const name = getInitialName(componentSpec, canonicalName);

src/components/PipelineRun/components/RerunPipelineButton.tsx

@@ -6,7 +6,7 @@ import { isAuthorizationRequired } from "@/components/shared/Authentication/help
 import { useAuthLocalStorage } from "@/components/shared/Authentication/useAuthLocalStorage";
 import { useAwaitAuthorization } from "@/components/shared/Authentication/useAwaitAuthorization";
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
-import { buildTakSpecShape } from "@/components/shared/PipelineRunNameTemplate/types";
+import { buildTaskSpecShape } from "@/components/shared/PipelineRunNameTemplate/types";
 import { useFlagValue } from "@/components/shared/Settings/useFlags";
 import { Icon } from "@/components/ui/icon";
 import useToastNotification from "@/hooks/useToastNotification";
@@ -68,7 +68,7 @@ export const RerunPipelineButton = ({
       return new Promise<PipelineRun>((resolve, reject) => {
         submitPipelineRun(componentSpec, backendUrl, {
           canonicalName: extractCanonicalName(
-            buildTakSpecShape(
+            buildTaskSpecShape(
               executionData?.rootDetails?.task_spec,
               componentSpec,
             ),

src/components/shared/PipelineRunNameTemplate/types.ts

@@ -10,7 +10,7 @@ export interface TaskSpecShape {
   annotations?: Record<string, unknown> | null;
 }
 
-export function buildTakSpecShape(
+export function buildTaskSpecShape(
   taskSpecOutput: TaskSpecOutput | undefined,
   componentSpec: ComponentSpec,
 ): TaskSpecShape | undefined {

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

@@ -17,7 +17,7 @@ import {
   useStoreApi,
   type XYPosition,
 } from "@xyflow/react";
-import type { ComponentType, DragEvent } from "react";
+import type { DragEvent } from "react";
 import { useEffect, useRef, useState } from "react";
 
 import { ConfirmationDialog } from "@/components/shared/Dialogs";
@@ -55,47 +55,38 @@ import { getBulkUpdateConfirmationDetails } from "./ConfirmationDialogs/BulkUpda
 import { getDeleteConfirmationDetails } from "./ConfirmationDialogs/DeleteConfirmation";
 import { getReplaceConfirmationDetails } from "./ConfirmationDialogs/ReplaceConfirmation";
 import { ConnectionLine } from "./Edges/ConnectionLine";
-import SmoothEdge from "./Edges/SmoothEdge";
-import GhostNode from "./GhostNode/GhostNode";
 import type { GhostNodeData } from "./GhostNode/types";
 import {
   computeDropPositionFromRefs,
   createGhostEdge,
 } from "./GhostNode/utils";
-import IONode from "./IONode/IONode";
 import SelectionToolbar from "./SelectionToolbar";
 import { handleGroupNodes } from "./Subgraphs/create/handleGroupNodes";
 import { NewSubgraphDialog } from "./Subgraphs/create/NewSubgraphDialog";
 import { canGroupNodes } from "./Subgraphs/create/utils";
 import { SubgraphBreadcrumbs } from "./Subgraphs/view/SubgraphBreadcrumbs";
-import TaskNode from "./TaskNode/TaskNode";
-import type { NodesAndEdges } from "./types";
+import {
+  edgeTypes,
+  isTaskNodeType,
+  type NodesAndEdges,
+  nodeTypes,
+} from "./types";
 import addTask from "./utils/addTask";
 import { createConnectedIONode } from "./utils/createConnectedIONode";
 import { duplicateNodes } from "./utils/duplicateNodes";
 import { isPositionInNode } from "./utils/geometry";
+import { getNodeFromEvent } from "./utils/getNodeFromEvent";
 import { getPositionFromEvent } from "./utils/getPositionFromEvent";
-import { getTaskFromEvent } from "./utils/getTaskFromEvent";
 import { handleConnection } from "./utils/handleConnection";
 import { removeEdge } from "./utils/removeEdge";
 import { removeNode } from "./utils/removeNode";
 import { replaceTaskNode } from "./utils/replaceTaskNode";
 import { updateNodePositions } from "./utils/updateNodePosition";
 
-const nodeTypes: Record<string, ComponentType<any>> = {
-  task: TaskNode,
-  input: IONode,
-  output: IONode,
-  ghost: GhostNode,
-};
-
 const SELECTABLE_NODES = new Set(["task", "input", "output"]);
 const UPGRADEABLE_NODES = new Set(["task"]);
 const REPLACEABLE_NODES = new Set(["task"]);
-
-const edgeTypes: Record<string, ComponentType<any>> = {
-  customEdge: SmoothEdge,
-};
+const FAST_PLACE_NODE_TYPES = new Set<Node["type"]>(["task"]);
 
 const useScheduleExecutionOnceWhenConditionMet = (
   condition: boolean,
@@ -110,8 +101,6 @@ const useScheduleExecutionOnceWhenConditionMet = (
   }, [condition, callback]);
 };
 
-const FAST_PLACE_NODE_TYPES = new Set<Node["type"]>(["task"]);
-
 const FlowCanvas = ({
   readOnly,
   nodesConnectable,
@@ -362,7 +351,11 @@ const FlowCanvas = ({
       currentSubgraphPath,
       notify,
     );
-    const newNodes = createNodesFromComponentSpec(subgraphSpec, nodeData);
+    const newNodes = createNodesFromComponentSpec(
+      subgraphSpec,
+      nodeData,
+      readOnly,
+    );
 
     const updatedNewNodes = newNodes.map((node) => ({
       ...node,
@@ -561,14 +554,19 @@ const FlowCanvas = ({
       return;
     }
 
-    const { taskSpec: droppedTask, taskType } = getTaskFromEvent(event);
+    const { spec: droppedTask, nodeType } = getNodeFromEvent(event);
+
+    if (!nodeType) {
+      console.error("Dropped node type not identified.");
+      return;
+    }
 
-    if (!taskType) {
-      console.error("Dropped task type not identified.");
+    if (!isTaskNodeType(nodeType)) {
+      console.error("Dropped node type is not supported:", nodeType);
       return;
     }
 
-    if (!droppedTask && taskType === "task") {
+    if (!droppedTask && nodeType === "task") {
       console.error("Unable to find dropped task.");
       return;
     }
@@ -626,7 +624,7 @@ const FlowCanvas = ({
       const position = getPositionFromEvent(event, reactFlowInstance);
 
       const { spec: newSubgraphSpec } = addTask(
-        taskType,
+        nodeType,
         droppedTask,
         position,
         currentSubgraphSpec,

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

@@ -4,32 +4,14 @@ import { Button } from "@/components/ui/button";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Heading, Paragraph } from "@/components/ui/typography";
 import type { AnnotationConfig, Annotations } from "@/types/annotations";
-import {
-  DISPLAY_NAME_MAX_LENGTH,
-  EDITOR_POSITION_ANNOTATION,
-  TASK_DISPLAY_NAME_ANNOTATION,
-} from "@/utils/annotations";
+import { DEFAULT_COMMON_ANNOTATIONS } from "@/utils/annotations";
 
 import { AnnotationsInput } from "./AnnotationsInput";
 import {
   NewAnnotationRow,
   type NewAnnotationRowData,
 } from "./NewAnnotationRow";
 
-const DEFAULT_COMMON_ANNOTATIONS: AnnotationConfig[] = [
-  {
-    annotation: EDITOR_POSITION_ANNOTATION,
-    label: "Node position",
-    type: "json",
-  },
-  {
-    annotation: TASK_DISPLAY_NAME_ANNOTATION,
-    label: "Display Name",
-    type: "string",
-    max: DISPLAY_NAME_MAX_LENGTH,
-  },
-];
-
 interface AnnotationsEditorProps {
   annotations: Annotations;
   pinnedAnnotations?: AnnotationConfig[];

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

@@ -1,6 +1,31 @@
 import type { Edge, Node } from "@xyflow/react";
+import type { ComponentType } from "react";
+
+import type { TaskType } from "@/types/taskNode";
+
+import SmoothEdge from "./Edges/SmoothEdge";
+import GhostNode from "./GhostNode/GhostNode";
+import IONode from "./IONode/IONode";
+import TaskNode from "./TaskNode/TaskNode";
 
 export type NodesAndEdges = {
   nodes: Node[];
   edges: Edge[];
 };
+
+export const nodeTypes: Record<string, ComponentType<any>> = {
+  task: TaskNode,
+  input: IONode,
+  output: IONode,
+  ghost: GhostNode,
+};
+
+export type NodeType = keyof typeof nodeTypes;
+
+export const edgeTypes: Record<string, ComponentType<any>> = {
+  customEdge: SmoothEdge,
+};
+
+export function isTaskNodeType(type: string): type is TaskType {
+  return type === "task" || type === "input" || type === "output";
+}

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

@@ -0,0 +1,19 @@
+import type { DragEvent } from "react";
+
+import type { TaskSpec } from "@/utils/componentSpec";
+
+import type { NodeType } from "../types";
+
+export const getNodeFromEvent = (event: DragEvent) => {
+  const droppedData = event.dataTransfer.getData("application/reactflow");
+
+  if (droppedData === "") {
+    return { spec: null, nodeType: null };
+  }
+
+  const droppedDataObject = JSON.parse(droppedData);
+  const nodeType = Object.keys(droppedDataObject)[0] as NodeType;
+  const spec = droppedDataObject[nodeType] as TaskSpec | null;
+
+  return { spec, nodeType };
+};

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

@@ -3,6 +3,8 @@ import { type Node } from "@xyflow/react";
 import {
   type ComponentSpec,
   isGraphImplementation,
+  isGraphInputArgument,
+  isTaskOutputArgument,
 } from "@/utils/componentSpec";
 import {
   nodeIdToInputName,
@@ -42,7 +44,7 @@ export const removeGraphInput = (
       for (const [inputName, argument] of Object.entries(
         taskSpec.arguments ?? {},
       )) {
-        if (typeof argument !== "string" && "graphInput" in argument) {
+        if (isGraphInputArgument(argument)) {
           if (argument.graphInput.inputName === inputNameToRemove) {
             const newGraphSpec = setTaskArgument(
               componentSpec.implementation.graph,
@@ -97,8 +99,7 @@ export const removeTask = (
       for (const [inputName, argument] of Object.entries(taskSpec.arguments)) {
         // Check if this argument references the task we're removing
         const isReferencingRemovedTask =
-          typeof argument !== "string" &&
-          "taskOutput" in argument &&
+          isTaskOutputArgument(argument) &&
           argument.taskOutput.taskId === taskIdToRemove;
 
         if (isReferencingRemovedTask) {