Stricter Typing on Nodes

Author: camielvs

src/components/Editor/PipelineDetails.tsx

@@ -16,7 +16,7 @@ import { useContextPanel } from "@/providers/ContextPanelProvider";
 import {
   type InputSpec,
   type OutputSpec,
-  type TypeSpecType,
+  typeSpecToString,
 } from "@/utils/componentSpec";
 import { getComponentFileFromList } from "@/utils/componentStore";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
@@ -36,17 +36,6 @@ const PipelineDetails = () => {
 
   const [isYamlOpen, setIsYamlOpen] = useState(false);
 
-  // Utility function to convert TypeSpecType to string
-  const typeSpecToString = (typeSpec?: TypeSpecType): string => {
-    if (typeSpec === undefined) {
-      return "Any";
-    }
-    if (typeof typeSpec === "string") {
-      return typeSpec;
-    }
-    return JSON.stringify(typeSpec);
-  };
-
   // State for file metadata
   const [fileMeta, setFileMeta] = useState<{
     creationTime?: Date;

src/components/shared/ComponentEditor/usePreviewTaskNodeData.tsx

@@ -1,9 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 
 import { hydrateComponentReference } from "@/services/componentService";
-import type { TaskNodeData } from "@/types/taskNode";
+import type { TaskNodeData } from "@/types/nodes";
 import type { HydratedComponentReference } from "@/utils/componentSpec";
 import { generateTaskSpec } from "@/utils/nodes/generateTaskSpec";
+import { createEmptyTaskCallbacks } from "@/utils/nodes/taskCallbackUtils";
 
 export const usePreviewTaskNodeData = (componentText: string) => {
   const { data: componentRef, isLoading } = useQuery({
@@ -30,5 +31,8 @@ const generatePreviewTaskNodeData = (
     taskId: previewTaskId,
     isGhost: false,
     readOnly: true,
+    connectable: false,
+    highlighted: false,
+    callbacks: createEmptyTaskCallbacks(),
   };
 };

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

@@ -97,7 +97,7 @@ const useScheduleExecutionOnceWhenConditionMet = (
 };
 
 const FlowCanvas = ({
-  readOnly,
+  readOnly = false,
   nodesConnectable,
   children,
   ...rest
@@ -307,7 +307,7 @@ const FlowCanvas = ({
     () => ({
       connectable: !readOnly && !!nodesConnectable,
       readOnly,
-      nodeCallbacks,
+      callbacks: nodeCallbacks,
     }),
     [readOnly, nodesConnectable, nodeCallbacks],
   );
@@ -494,14 +494,14 @@ const FlowCanvas = ({
         return;
       }
 
-      const { taskSpec: droppedTask, taskType } = getTaskFromEvent(event);
+      const { taskSpec: droppedTask, nodeType } = getTaskFromEvent(event);
 
-      if (!taskType) {
+      if (!nodeType) {
         console.error("Dropped task type not identified.");
         return;
       }
 
-      if (!droppedTask && taskType === "task") {
+      if (!droppedTask && nodeType === "task") {
         console.error("Unable to find dropped task.");
         return;
       }
@@ -559,7 +559,7 @@ const FlowCanvas = ({
         const position = getPositionFromEvent(event, reactFlowInstance);
 
         const newComponentSpec = addTask(
-          taskType,
+          nodeType,
           droppedTask,
           position,
           componentSpec,

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

@@ -3,9 +3,10 @@ import { memo, useMemo } from "react";
 
 import { cn } from "@/lib/utils";
 import { TaskNodeProvider } from "@/providers/TaskNodeProvider";
-import type { TaskNodeData } from "@/types/taskNode";
+import type { TaskNodeData } from "@/types/nodes";
 import type { ComponentReference } from "@/utils/componentSpec";
 import { generateTaskSpec } from "@/utils/nodes/generateTaskSpec";
+import { createEmptyTaskCallbacks } from "@/utils/nodes/taskCallbackUtils";
 
 import { TaskNodeCard } from "../TaskNode/TaskNodeCard";
 
@@ -74,5 +75,9 @@ const generateGhostTaskNodeData = (
     taskSpec,
     taskId: ghostTaskId,
     isGhost: true,
+    readOnly: true,
+    highlighted: false,
+    connectable: false,
+    callbacks: createEmptyTaskCallbacks(),
   };
 };

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

@@ -2,7 +2,7 @@ import { type NodeProps, useReactFlow } from "@xyflow/react";
 import { memo, type PropsWithChildren, useMemo } from "react";
 
 import { cn } from "@/lib/utils";
-import type { HintNodeData } from "@/types/hintNode";
+import type { HintNodeData } from "@/types/nodes";
 
 const HintNode = ({ data }: NodeProps) => {
   const { getZoom } = useReactFlow();

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

@@ -10,28 +10,22 @@ import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useContextPanel } from "@/providers/ContextPanelProvider";
+import type { IONodeData } from "@/types/nodes";
+import { isInputSpec, typeSpecToString } from "@/utils/componentSpec";
 
 interface IONodeProps {
-  type: "input" | "output";
-  data: {
-    label: string;
-    value?: string;
-    default?: string;
-    type?: string;
-    readOnly?: boolean;
-  };
+  data: IONodeData;
   selected: boolean;
   deletable: boolean;
 }
 
-const IONode = ({ type, data, selected = false }: IONodeProps) => {
+const IONode = ({ data, selected = false }: IONodeProps) => {
   const { graphSpec, componentSpec } = useComponentSpec();
   const { setContent, clearContent } = useContextPanel();
 
-  const isInput = type === "input";
-  const isOutput = type === "output";
+  const { spec, readOnly } = data;
 
-  const readOnly = !!data.readOnly;
+  const isInput = isInputSpec(spec);
 
   const handleType = isInput ? "source" : "target";
   const handlePosition = isInput ? Position.Right : Position.Left;
@@ -44,13 +38,13 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
   const borderColor = selected ? selectedColor : defaultColor;
 
   const input = useMemo(
-    () => componentSpec.inputs?.find((input) => input.name === data.label),
-    [componentSpec.inputs, data.label],
+    () => componentSpec.inputs?.find((input) => input.name === spec.name),
+    [componentSpec.inputs, spec.name],
   );
 
   const output = useMemo(
-    () => componentSpec.outputs?.find((output) => output.name === data.label),
-    [componentSpec.outputs, data.label],
+    () => componentSpec.outputs?.find((output) => output.name === spec.name),
+    [componentSpec.outputs, spec.name],
   );
 
   useEffect(() => {
@@ -65,7 +59,7 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
         );
       }
 
-      if (output && isOutput) {
+      if (output && !isInput) {
         const outputConnectedDetails = getOutputConnectedDetails(
           graphSpec,
           output.name,
@@ -88,7 +82,7 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
     };
   }, [input, output, selected, readOnly]);
 
-  const connectedOutput = getOutputConnectedDetails(graphSpec, data.label);
+  const connectedOutput = getOutputConnectedDetails(graphSpec, spec.name);
   const outputConnectedValue = connectedOutput.outputName;
   const outputConnectedType = connectedOutput.outputType;
   const outputConnectedTaskId = connectedOutput.taskId;
@@ -98,30 +92,24 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
 
   const handleClassName = isInput ? "translate-x-1.5" : "-translate-x-1.5";
 
-  const hasDataValue = !!data.value;
-  const hasDataDefault = !!data.default;
-
-  const inputValue = hasDataValue
-    ? data.value
-    : hasDataDefault
-      ? data.default
-      : null;
-
+  const inputValue = isInput ? (spec.value ?? spec.default ?? null) : null;
   const outputValue = outputConnectedValue ?? null;
-
   const value = isInput ? inputValue : outputValue;
 
+  const typeValue = isInput
+    ? typeSpecToString(spec.type)
+    : typeSpecToString(outputConnectedType);
+
   return (
     <Card className={cn("border-2 max-w-[300px] p-0", borderColor)}>
       <CardHeader className="px-2 py-2.5">
-        <CardTitle className="break-words">{data.label}</CardTitle>
+        <CardTitle className="break-words">{spec.name}</CardTitle>
       </CardHeader>
       <CardContent className="p-2 max-w-[250px]">
         <BlockStack gap="2">
           {/* type */}
           <Paragraph size="xs" font="mono" className="truncate text-slate-700">
-            <span className="font-bold">Type:</span>{" "}
-            {outputConnectedType ?? data.type ?? "Any"}
+            <span className="font-bold">Type:</span> {typeValue}
           </Paragraph>
 
           {!!outputConnectedTaskId && (

src/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/ArgumentInputDialog.tsx

@@ -1,7 +1,8 @@
 import { MultilineTextInputDialog } from "@/components/shared/Dialogs/MultilineTextInputDialog";
 import type { ArgumentInput } from "@/types/arguments";
+import { typeSpecToString } from "@/utils/componentSpec";
 
-import { getInputValue, typeSpecToString } from "./utils";
+import { getInputValue } from "./utils";
 
 export const ArgumentInputDialog = ({
   argument,

src/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/ArgumentInputField.tsx

@@ -31,14 +31,10 @@ import {
 import useToastNotification from "@/hooks/useToastNotification";
 import { cn } from "@/lib/utils";
 import type { ArgumentInput } from "@/types/arguments";
+import { typeSpecToString } from "@/utils/componentSpec";
 
 import { ArgumentInputDialog } from "./ArgumentInputDialog";
-import {
-  getDefaultValue,
-  getInputValue,
-  getPlaceholder,
-  typeSpecToString,
-} from "./utils";
+import { getDefaultValue, getInputValue, getPlaceholder } from "./utils";
 
 export const ArgumentInputField = ({
   argument,

src/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/utils.ts

@@ -1,9 +1,5 @@
 import type { ArgumentInput } from "@/types/arguments";
-import type {
-  ArgumentType,
-  TaskSpec,
-  TypeSpecType,
-} from "@/utils/componentSpec";
+import type { ArgumentType, TaskSpec } from "@/utils/componentSpec";
 
 export const getArgumentInputs = (taskSpec: TaskSpec) => {
   const componentSpec = taskSpec.componentRef.spec;
@@ -40,16 +36,6 @@ export const getArgumentInputs = (taskSpec: TaskSpec) => {
   return argumentInputs;
 };
 
-export const typeSpecToString = (typeSpec?: TypeSpecType): string => {
-  if (typeSpec === undefined) {
-    return "Any";
-  }
-  if (typeof typeSpec === "string") {
-    return typeSpec;
-  }
-  return JSON.stringify(typeSpec);
-};
-
 export const getPlaceholder = (argument: ArgumentType) => {
   if (typeof argument === "string" || !argument) {
     return null;

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

@@ -4,7 +4,7 @@ import { memo, useMemo } from "react";
 import type { ContainerExecutionStatus } from "@/api/types.gen";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { TaskNodeProvider } from "@/providers/TaskNodeProvider";
-import type { TaskNodeData } from "@/types/taskNode";
+import type { TaskNodeData } from "@/types/nodes";
 
 import { StatusIndicator } from "./StatusIndicator";
 import { TaskNodeCard } from "./TaskNodeCard";