fix dependency panel edges

frontend/src/components/dependency-graph/custom-node.tsx

@@ -1,13 +1,18 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import React, { memo, use, useId } from "react";
+import React, { memo, use } from "react";
 import { Handle, Position, useStore } from "reactflow";
 import { TinyCode } from "@/components/editor/cell/TinyCode";
 import { useCellIds } from "@/core/cells/cells";
 import { displayCellName } from "@/core/cells/names";
 import { cn } from "@/utils/cn";
-import { type CustomNodeProps, getNodeHeight } from "./elements";
+import {
+  type CustomNodeProps,
+  getNodeHeight,
+  INPUTS_HANDLE_ID,
+  OUTPUTS_HANDLE_ID,
+} from "./elements";
 import type { LayoutDirection } from "./types";
 
 function getWidth(canvasWidth: number) {
@@ -37,24 +42,19 @@ export const CustomNode = memo((props: CustomNodeProps) => {
   const reactFlowWidth = useStore(({ width }) => width);
   const edgeMarkers = use(EdgeMarkerContext);
 
-  const inputOneId = useId();
-  const inputTwoId = useId();
-  const outputOneId = useId();
-  const outputTwoId = useId();
-
   const linesOfCode = cell.code.split("\n").length;
   return (
     <div>
       <Handle
         type="target"
-        id={inputOneId}
+        id={INPUTS_HANDLE_ID}
         data-testid="input-one"
         position={edgeMarkers === "LR" ? Position.Left : Position.Top}
         style={{ background: color }}
       />
       <Handle
         type="source"
-        id={inputTwoId}
+        id={INPUTS_HANDLE_ID}
         data-testid="input-two"
         position={edgeMarkers === "LR" ? Position.Left : Position.Top}
         style={{ background: color }}
@@ -76,14 +76,14 @@ export const CustomNode = memo((props: CustomNodeProps) => {
       </div>
       <Handle
         type="source"
-        id={outputOneId}
+        id={OUTPUTS_HANDLE_ID}
         data-testid="output-one"
         position={edgeMarkers === "LR" ? Position.Right : Position.Bottom}
         style={{ background: color }}
       />
       <Handle
         type="target"
-        id={outputTwoId}
+        id={OUTPUTS_HANDLE_ID}
         data-testid="output-two"
         position={edgeMarkers === "LR" ? Position.Right : Position.Bottom}
         style={{ background: color }}

frontend/src/components/dependency-graph/elements.ts

@@ -19,6 +19,10 @@ export function getNodeHeight(linesOfCode: number) {
   return Math.min(linesOfCode * LINE_HEIGHT + 35, 200);
 }
 
+// The nodes must have the same handle IDs to ensure edges connect correctly
+export const OUTPUTS_HANDLE_ID = "outputs";
+export const INPUTS_HANDLE_ID = "inputs";
+
 interface ElementsBuilder {
   createElements: (
     cellIds: CellId[],
@@ -93,8 +97,8 @@ export class VerticalElementsBuilder implements ElementsBuilder {
           }
           visited.add(key);
           edges.push(
-            this.createEdge(fromId, toId, "inputs"),
-            this.createEdge(fromId, toId, "outputs"),
+            this.createEdge(fromId, toId, INPUTS_HANDLE_ID),
+            this.createEdge(fromId, toId, OUTPUTS_HANDLE_ID),
           );
         }
       }
@@ -114,8 +118,9 @@ export class TreeElementsBuilder implements ElementsBuilder {
       // Make thicker
       style: { strokeWidth: 2 },
       source: source,
-      sourceHandle: "outputs",
-      targetHandle: "inputs",
+      // Use the same handle ids as the custom node
+      sourceHandle: OUTPUTS_HANDLE_ID,
+      targetHandle: INPUTS_HANDLE_ID,
       target: target,
     };
   }

frontend/src/components/dependency-graph/panels.tsx

@@ -12,7 +12,7 @@ import {
   WorkflowIcon,
   XIcon,
 } from "lucide-react";
-import React, { memo } from "react";
+import React, { memo, useId } from "react";
 import { type Edge, Panel } from "reactflow";
 import { getCellEditorView } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
@@ -44,6 +44,8 @@ export const GraphToolbar: React.FC<Props> = memo(
       onSettingsChange({ ...settings, [key]: value });
     };
 
+    const checkboxId = useId();
+
     const settingsButton = (
       <Popover>
         <PopoverTrigger asChild={true}>
@@ -56,13 +58,13 @@ export const GraphToolbar: React.FC<Props> = memo(
           <div className="flex items-center gap-2">
             <Checkbox
               data-testid="hide-pure-markdown-checkbox"
-              id="hide-pure-markdown"
+              id={checkboxId}
               checked={settings.hidePureMarkdown}
               onCheckedChange={(checked) =>
                 handleSettingChange("hidePureMarkdown", Boolean(checked))
               }
             />
-            <Label htmlFor="hide-pure-markdown">Hide pure markdown</Label>
+            <Label htmlFor={checkboxId}>Hide pure markdown</Label>
           </div>
         </PopoverContent>
       </Popover>
@@ -114,7 +116,7 @@ export const GraphSelectionPanel: React.FC<{
   onClearSelection: () => void;
   edges: Edge[];
   variables: Variables;
-}> = memo(({ selection, edges, variables, onClearSelection }) => {
+}> = memo(({ selection, variables, onClearSelection }) => {
   if (!selection) {
     return null;
   }