Add debug mode for viewing ReactFlow Node ids

camielvs · camielvs · commit c099a92cc1eb · 2025-10-17T14:42:13.000-07:00
diff --git a/.env.example b/.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>
diff --git a/src/components/shared/ReactFlow/FlowCanvas/IONode/IONode.tsx b/src/components/shared/ReactFlow/FlowCanvas/IONode/IONode.tsx
@@ -6,20 +6,31 @@ 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 {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 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";
+import { ENABLE_DEBUG_MODE } from "@/utils/constants";
+import {
+  inputNameToNodeId,
+  outputNameToNodeId,
+} from "@/utils/nodes/nodeIdUtils";
 
 interface IONodeProps {
+  type: "input" | "output";
   data: IONodeData;
   selected: boolean;
   deletable: boolean;
 }
 
-const IONode = ({ data, selected = false }: IONodeProps) => {
+const IONode = ({ type, data, selected = false }: IONodeProps) => {
   const { graphSpec, componentSpec } = useComponentSpec();
   const { setContent, clearContent } = useContextPanel();
 
@@ -47,6 +58,12 @@ const IONode = ({ data, selected = false }: IONodeProps) => {
     [componentSpec.outputs, spec.name],
   );
 
+  const nodeId = isInput
+    ? inputNameToNodeId(spec.name)
+    : outputNameToNodeId(spec.name);
+
+  const nodeHandleId = `${nodeId}_handle`;
+
   useEffect(() => {
     if (selected) {
       if (input && isInput) {
@@ -104,6 +121,11 @@ const IONode = ({ 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">
@@ -138,11 +160,23 @@ const IONode = ({ data, selected = false }: IONodeProps) => {
             </Paragraph>
           </InlineStack>
         </BlockStack>
-        <Handle
-          type={handleType}
-          position={handlePosition}
-          className={cn(handleDefaultClassName, handleClassName)}
-        />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Handle
+              type={handleType}
+              position={handlePosition}
+              className={cn(handleDefaultClassName, handleClassName)}
+            />
+          </TooltipTrigger>
+          <TooltipContent disabled={!ENABLE_DEBUG_MODE}>
+            <div className="capitalize">
+              {type} Name: {spec.name}
+            </div>
+            <div>Handle Name: {spec.name}</div>
+            <div>parentNodeId: {nodeId}</div>
+            <div>handleNodeId: {nodeHandleId}</div>
+          </TooltipContent>
+        </Tooltip>
       </CardContent>
     </Card>
   );
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/Handles.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/Handles.tsx
@@ -14,6 +14,7 @@ import {
 import { cn } from "@/lib/utils";
 import { useTaskNode } from "@/providers/TaskNodeProvider";
 import type { InputSpec, OutputSpec } from "@/utils/componentSpec";
+import { ENABLE_DEBUG_MODE } from "@/utils/constants";
 
 type InputHandleProps = {
   input: InputSpec;
@@ -32,7 +33,7 @@ export const InputHandle = ({
   onLabelClick,
   onHandleSelectionChange,
 }: InputHandleProps) => {
-  const { nodeId, state } = useTaskNode();
+  const { nodeId, state, name } = useTaskNode();
 
   const fromHandle = useConnection((connection) => connection.fromHandle?.id);
   const toHandle = useConnection((connection) => connection.toHandle?.id);
@@ -129,23 +130,33 @@ export const InputHandle = ({
       data-active={active}
     >
       <div className="absolute -translate-x-6 flex items-center h-3 w-3">
-        <Handle
-          ref={handleRef}
-          type="target"
-          id={handleId}
-          position={Position.Left}
-          isConnectable={true}
-          className={cn(
-            "border-0! h-full! w-full! transform-none!",
-            missing,
-            (selected || active) && "bg-blue-500!",
-            highlight && "bg-green-500!",
-            state.readOnly && "cursor-pointer!",
-          )}
-          onClick={handleHandleClick}
-          data-invalid={invalid}
-          data-testid={`input-handle-${input.name}`}
-        />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Handle
+              ref={handleRef}
+              type="target"
+              id={handleId}
+              position={Position.Left}
+              isConnectable={true}
+              className={cn(
+                "border-0! h-full! w-full! transform-none!",
+                missing,
+                (selected || active) && "bg-blue-500!",
+                highlight && "bg-green-500!",
+                state.readOnly && "cursor-pointer!",
+              )}
+              onClick={handleHandleClick}
+              data-invalid={invalid}
+              data-testid={`input-handle-${input.name}`}
+            />
+          </TooltipTrigger>
+          <TooltipContent disabled={!ENABLE_DEBUG_MODE}>
+            <div>Task Name: {name}</div>
+            <div>Handle Name: {input.name}</div>
+            <div>parentNodeId: {nodeId}</div>
+            <div>handleNodeId: {handleId}</div>
+          </TooltipContent>
+        </Tooltip>
       </div>
       <div
         className={cn(
@@ -218,7 +229,7 @@ export const OutputHandle = ({
   onLabelClick,
   onHandleSelectionChange,
 }: OutputHandleProps) => {
-  const { nodeId, state } = useTaskNode();
+  const { nodeId, state, name } = useTaskNode();
 
   const fromHandle = useConnection((connection) => connection.fromHandle?.id);
   const toHandle = useConnection((connection) => connection.toHandle?.id);
@@ -336,21 +347,31 @@ export const OutputHandle = ({
           </div>
         )}
       </div>
-      <Handle
-        ref={handleRef}
-        type="source"
-        id={handleId}
-        position={Position.Right}
-        isConnectable={true}
-        onClick={handleHandleClick}
-        className={cn(
-          "relative! border-0! !w-[12px] !h-[12px] transform-none! translate-x-6 cursor-pointer bg-gray-500!",
-          (selected || active) && "bg-blue-500!",
-          highlight && "bg-green-500!",
-          state.readOnly && "cursor-pointer!",
-        )}
-        data-testid={`output-handle-${output.name}`}
-      />
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Handle
+            ref={handleRef}
+            type="source"
+            id={handleId}
+            position={Position.Right}
+            isConnectable={true}
+            onClick={handleHandleClick}
+            className={cn(
+              "relative! border-0! !w-[12px] !h-[12px] transform-none! translate-x-6 cursor-pointer bg-gray-500!",
+              (selected || active) && "bg-blue-500!",
+              highlight && "bg-green-500!",
+              state.readOnly && "cursor-pointer!",
+            )}
+            data-testid={`output-handle-${output.name}`}
+          />
+        </TooltipTrigger>
+        <TooltipContent disabled={!ENABLE_DEBUG_MODE}>
+          <div>Task Name: {name}</div>
+          <div>Handle Name: {output.name}</div>
+          <div>parentNodeId: {nodeId}</div>
+          <div>handleNodeId: {handleId}</div>
+        </TooltipContent>
+      </Tooltip>
     </div>
   );
 };
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx
@@ -14,6 +14,7 @@ import { cn } from "@/lib/utils";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useContextPanel } from "@/providers/ContextPanelProvider";
 import { useTaskNode } from "@/providers/TaskNodeProvider";
+import { ENABLE_DEBUG_MODE } from "@/utils/constants";
 import { getSubgraphDescription, isSubgraph } from "@/utils/subgraphUtils";
 
 import {
@@ -217,34 +218,49 @@ const TaskNodeCard = () => {
       ref={nodeRef}
       onDoubleClick={handleDoubleClick}
     >
-      <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>
-          <InlineStack gap="2" blockAlign="center">
-            {isSubgraphNode && isSubgraphNavigationEnabled && (
-              <QuickTooltip content={`Subgraph: ${subgraphDescription}`}>
-                <Icon name="Workflow" size="sm" className="text-blue-600" />
-              </QuickTooltip>
-            )}
-            <CardTitle className="break-words text-left text-xs text-slate-900">
-              {name}
-            </CardTitle>
-          </InlineStack>
-          {taskId &&
-            taskId !== name &&
-            !taskId.match(new RegExp(`^${name}\\s*\\d+$`)) && (
-              <Text size="xs" tone="subdued" className="font-light">
-                {taskId}
-              </Text>
-            )}
-        </BlockStack>
+          <BlockStack>
+            <InlineStack
+              gap="2"
+              align="space-between"
+              blockAlign="start"
+              wrap="nowrap"
+              className="w-full"
+            >
+              <InlineStack gap="2" blockAlign="center">
+                {isSubgraphNode && isSubgraphNavigationEnabled && (
+                  <QuickTooltip content={`Subgraph: ${subgraphDescription}`}>
+                    <Icon name="Workflow" size="sm" className="text-blue-600" />
+                  </QuickTooltip>
+                )}
+                <CardTitle className="break-words text-left text-xs text-slate-900">
+                  {name}
+                </CardTitle>
+              </InlineStack>
+              {isRemoteComponentLibrarySearchEnabled ? (
+                <PublishedComponentBadge componentRef={taskSpec.componentRef}>
+                  {digestMarkup}
+                </PublishedComponentBadge>
+              ) : (
+                digestMarkup
+              )}
+            </InlineStack>
+            {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
-        )}
+          {ENABLE_DEBUG_MODE && (
+            <Text size="xs" tone="subdued">
+              Node Id: {nodeId}
+            </Text>
+          )}
+        </BlockStack>
       </CardHeader>
       <CardContent className="p-2 flex flex-col gap-2">
         <div
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
@@ -40,15 +40,21 @@ function TooltipTrigger({
 interface TooltipContentProps
   extends React.ComponentProps<typeof TooltipPrimitive.Content> {
   arrowClassName?: string;
+  disabled?: boolean;
 }
 
 function TooltipContent({
   className,
   sideOffset = 0,
   children,
   arrowClassName,
+  disabled,
   ...props
 }: TooltipContentProps) {
+  if (disabled) {
+    return null;
+  }
+
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
diff --git a/src/utils/constants.ts b/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/";
 
