Add debug mode for viewing ReactFlow Node ids

Author: camielvs

.env.example

@@ -17,4 +17,7 @@ VITE_ENABLE_GOOGLE_CLOUD_SUBMITTER=<boolean>
 
 # Github
 VITE_REQUIRE_AUTHORIZATION=<boolean>
-VITE_GITHUB_CLIENT_ID=<string>
+VITE_GITHUB_CLIENT_ID=<string>
+
+# Dev Tools
+VITE_ENABLE_DEBUG_MODE=<boolean>

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

@@ -1,17 +1,23 @@
 import { Handle, Position } from "@xyflow/react";
-import { memo, useEffect, useMemo } from "react";
+import { memo, useCallback, useEffect, useMemo } from "react";
 
 import { InputValueEditor } from "@/components/Editor/IOEditor/InputValueEditor";
 import { OutputNameEditor } from "@/components/Editor/IOEditor/OutputNameEditor";
 import { getOutputConnectedDetails } from "@/components/Editor/utils/getOutputConnectedDetails";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Paragraph } from "@/components/ui/typography";
+import { useNodeManager } from "@/hooks/useNodeManager";
 import { cn } from "@/lib/utils";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useContextPanel } from "@/providers/ContextPanelProvider";
 import type { IONodeData } from "@/types/nodes";
 import type { InputSpec, TypeSpecType } from "@/utils/componentSpec";
+import { ENABLE_DEBUG_MODE } from "@/utils/constants";
+import {
+  inputNameToInputId,
+  outputNameToOutputId,
+} from "@/utils/nodes/nodeIdUtils";
 
 interface IONodeProps {
   type: "input" | "output";
@@ -21,6 +27,7 @@ interface IONodeProps {
 }
 
 const IONode = ({ type, data, selected = false }: IONodeProps) => {
+  const { getInputNodeId, getOutputNodeId } = useNodeManager();
   const { graphSpec, componentSpec } = useComponentSpec();
   const { setContent, clearContent } = useContextPanel();
 
@@ -51,6 +58,24 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
     [componentSpec.outputs, spec.name],
   );
 
+  const nodeId = isInput
+    ? getInputNodeId(inputNameToInputId(spec.name))
+    : getOutputNodeId(outputNameToOutputId(spec.name));
+
+  const nodeHandleId = isInput
+    ? getInputNodeId(inputNameToInputId(spec.name + "handle"))
+    : getOutputNodeId(outputNameToOutputId(spec.name + "handle"));
+
+  const handleHandleClick = useCallback(() => {
+    if (ENABLE_DEBUG_MODE) {
+      console.log(`${isInput ? "Input" : "Output"} Handle clicked:`, {
+        name: isInput ? input?.name : output?.name,
+        nodeId,
+        handleId: nodeHandleId,
+      });
+    }
+  }, [isInput, input, output, nodeId, nodeHandleId]);
+
   useEffect(() => {
     if (selected) {
       if (input && isInput) {
@@ -112,6 +137,11 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
     <Card className={cn("border-2 max-w-[300px] p-0", borderColor)}>
       <CardHeader className="px-2 py-2.5">
         <CardTitle className="break-words">{spec.name}</CardTitle>
+        {ENABLE_DEBUG_MODE && (
+          <Paragraph size="xs" tone="subdued">
+            Node Id: {nodeId}
+          </Paragraph>
+        )}
       </CardHeader>
       <CardContent className="p-2 max-w-[250px]">
         <BlockStack gap="2">
@@ -147,9 +177,11 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
           </InlineStack>
         </BlockStack>
         <Handle
+          id={nodeHandleId}
           type={handleType}
           position={handlePosition}
           className={cn(handleDefaultClassName, handleClassName)}
+          onClick={handleHandleClick}
         />
       </CardContent>
     </Card>

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

@@ -11,9 +11,15 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useNodeManager } from "@/hooks/useNodeManager";
 import { cn } from "@/lib/utils";
 import { useTaskNode } from "@/providers/TaskNodeProvider";
 import type { InputSpec, OutputSpec } from "@/utils/componentSpec";
+import { ENABLE_DEBUG_MODE } from "@/utils/constants";
+import {
+  inputNameToInputId,
+  outputNameToOutputId,
+} from "@/utils/nodes/conversions";
 
 type InputHandleProps = {
   input: InputSpec;
@@ -32,7 +38,8 @@ export const InputHandle = ({
   onLabelClick,
   onHandleSelectionChange,
 }: InputHandleProps) => {
-  const { nodeId, state } = useTaskNode();
+  const { getInputNodeId } = useNodeManager();
+  const { nodeId, state, name } = useTaskNode();
 
   const fromHandle = useConnection((connection) => connection.fromHandle?.id);
   const toHandle = useConnection((connection) => connection.toHandle?.id);
@@ -44,7 +51,7 @@ export const InputHandle = ({
   const [selected, setSelected] = useState(false);
   const [active, setActive] = useState(false);
 
-  const handleId = getInputHandleId(input.name);
+  const handleId = getInputNodeId(inputNameToInputId(input.name));
 
   const missing = invalid ? "bg-red-700!" : "bg-gray-500!";
   const hasValue = value !== undefined && value !== null;
@@ -54,8 +61,17 @@ export const InputHandle = ({
     (e: ReactMouseEvent<HTMLDivElement>) => {
       e.stopPropagation();
       setSelected(!selected);
+
+      if (ENABLE_DEBUG_MODE) {
+        console.log("Input Handle clicked:", {
+          name: input.name,
+          handleId,
+          nodeId,
+          taskName: name,
+        });
+      }
     },
-    [selected],
+    [selected, name, input, handleId, nodeId],
   );
 
   const handleLabelClick = useCallback(
@@ -218,7 +234,8 @@ export const OutputHandle = ({
   onLabelClick,
   onHandleSelectionChange,
 }: OutputHandleProps) => {
-  const { nodeId, state } = useTaskNode();
+  const { getOutputNodeId } = useNodeManager();
+  const { nodeId, state, name } = useTaskNode();
 
   const fromHandle = useConnection((connection) => connection.fromHandle?.id);
   const toHandle = useConnection((connection) => connection.toHandle?.id);
@@ -230,15 +247,24 @@ export const OutputHandle = ({
   const [selected, setSelected] = useState(false);
   const [active, setActive] = useState(false);
 
-  const handleId = getOutputHandleId(output.name);
+  const handleId = getOutputNodeId(outputNameToOutputId(output.name));
   const hasValue = value !== undefined && value !== "" && value !== null;
 
   const handleHandleClick = useCallback(
     (e: ReactMouseEvent<HTMLDivElement>) => {
       e.stopPropagation();
       setSelected(!selected);
+
+      if (ENABLE_DEBUG_MODE) {
+        console.log("Output Handle clicked:", {
+          name: output.name,
+          handleId,
+          nodeId,
+          taskName: name,
+        });
+      }
     },
-    [selected],
+    [selected, output, handleId, nodeId, name],
   );
 
   const handleLabelClick = useCallback(
@@ -355,14 +381,6 @@ export const OutputHandle = ({
   );
 };
 
-const getOutputHandleId = (outputName: string) => {
-  return `output_${outputName}`;
-};
-
-const getInputHandleId = (inputName: string) => {
-  return `input_${inputName}`;
-};
-
 const skipHandleDeselect = (e: MouseEvent) => {
   let el = e.target as HTMLElement | null;
   while (el) {

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

@@ -6,12 +6,13 @@ import { PublishedComponentBadge } from "@/components/shared/ManageComponent/Pub
 import { trimDigest } from "@/components/shared/ManageComponent/utils/digest";
 import { useBetaFlagValue } from "@/components/shared/Settings/useBetaFlags";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { BlockStack } from "@/components/ui/layout";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { QuickTooltip } from "@/components/ui/tooltip";
 import { Text } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 import { useContextPanel } from "@/providers/ContextPanelProvider";
 import { useTaskNode } from "@/providers/TaskNodeProvider";
+import { ENABLE_DEBUG_MODE } from "@/utils/constants";
 
 import {
   type NotifyMessage,
@@ -172,27 +173,42 @@ const TaskNodeCard = () => {
       }}
       ref={nodeRef}
     >
-      <CardHeader className="border-b border-slate-200 px-2 py-2.5 flex flex-row justify-between items-start">
+      <CardHeader className="border-b border-slate-200 px-2 py-2.5 items-start">
         <BlockStack>
-          <CardTitle className="break-words text-left text-xs text-slate-900">
-            {name}
-          </CardTitle>
-          {taskId &&
-            taskId !== name &&
-            !taskId.match(new RegExp(`^${name}\\s*\\d+$`)) && (
-              <Text size="xs" tone="subdued" className="font-light">
-                {taskId}
-              </Text>
+          <InlineStack
+            align="space-between"
+            blockAlign="start"
+            wrap="nowrap"
+            className="w-full"
+          >
+            <BlockStack>
+              <CardTitle className="break-words text-left text-xs text-slate-900">
+                {name}
+              </CardTitle>
+              {taskId &&
+                taskId !== name &&
+                !taskId.match(new RegExp(`^${name}\\s*\\d+$`)) && (
+                  <Text size="xs" tone="subdued" className="font-light">
+                    {taskId}
+                  </Text>
+                )}
+            </BlockStack>
+
+            {isRemoteComponentLibrarySearchEnabled ? (
+              <PublishedComponentBadge componentRef={taskSpec.componentRef}>
+                {digestMarkup}
+              </PublishedComponentBadge>
+            ) : (
+              digestMarkup
             )}
-        </BlockStack>
+          </InlineStack>
 
-        {isRemoteComponentLibrarySearchEnabled ? (
-          <PublishedComponentBadge componentRef={taskSpec.componentRef}>
-            {digestMarkup}
-          </PublishedComponentBadge>
-        ) : (
-          digestMarkup
-        )}
+          {ENABLE_DEBUG_MODE && (
+            <Text size="xs" tone="subdued">
+              Node Id: {nodeId}
+            </Text>
+          )}
+        </BlockStack>
       </CardHeader>
       <CardContent className="p-2 flex flex-col gap-2">
         <div

src/utils/constants.ts

@@ -1,4 +1,7 @@
 /* Environment Config */
+export const ENABLE_DEBUG_MODE =
+  import.meta.env.VITE_ENABLE_DEBUG_MODE === "true";
+
 export const ABOUT_URL =
   import.meta.env.VITE_ABOUT_URL || "https://cloud-pipelines.net/";