@aiready/components 0.1.7 → 0.1.8

package/dist/charts/ForceDirectedGraph.js

@@ -1,277 +1,10 @@
-import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
-import * as d32 from 'd3';
+import React, { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import * as d3 from 'd3';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/charts/ForceDirectedGraph.tsx
-function useForceSimulation(initialNodes, initialLinks, options) {
-  const {
-    chargeStrength = -300,
-    linkDistance = 100,
-    linkStrength = 1,
-    collisionStrength = 1,
-    collisionRadius = 10,
-    centerStrength = 0.1,
-    width,
-    height,
-    alphaDecay = 0.0228,
-    velocityDecay = 0.4,
-    alphaTarget = 0,
-    warmAlpha = 0.3,
-    alphaMin = 0.01,
-    // @ts-ignore allow extra option
-    stabilizeOnStop = true,
-    onTick,
-    // Optional throttle in milliseconds for tick updates (reduce React re-renders)
-    // Lower values = smoother but more CPU; default ~30ms (~33fps)
-    // @ts-ignore allow extra option
-    tickThrottleMs = 33,
-    // @ts-ignore allow extra option
-    maxSimulationTimeMs = 3e3
-  } = options;
-  const [nodes, setNodes] = useState(initialNodes);
-  const [links, setLinks] = useState(initialLinks);
-  const [isRunning, setIsRunning] = useState(false);
-  const [alpha, setAlpha] = useState(1);
-  const simulationRef = useRef(null);
-  const stopTimeoutRef = useRef(null);
-  const nodesKey = initialNodes.map((n) => n.id).join("|");
-  const linksKey = (initialLinks || []).map((l) => {
-    const s = typeof l.source === "string" ? l.source : l.source?.id;
-    const t = typeof l.target === "string" ? l.target : l.target?.id;
-    return `${s}->${t}:${l.type || ""}`;
-  }).join("|");
-  useEffect(() => {
-    const nodesCopy = initialNodes.map((node) => ({ ...node }));
-    const linksCopy = initialLinks.map((link) => ({ ...link }));
-    try {
-      nodesCopy.forEach((n, i) => {
-        const angle = i * 2 * Math.PI / nodesCopy.length;
-        const radius = Math.min(width, height) * 0.45;
-        n.x = width / 2 + radius * Math.cos(angle);
-        n.y = height / 2 + radius * Math.sin(angle);
-        n.vx = (Math.random() - 0.5) * 2;
-        n.vy = (Math.random() - 0.5) * 2;
-      });
-    } catch (e) {
-      nodesCopy.forEach((n) => {
-        n.x = Math.random() * width;
-        n.y = Math.random() * height;
-        n.vx = (Math.random() - 0.5) * 10;
-        n.vy = (Math.random() - 0.5) * 10;
-      });
-    }
-    const simulation = d32.forceSimulation(nodesCopy);
-    try {
-      const linkForce = d32.forceLink(linksCopy);
-      linkForce.id((d) => d.id).distance((d) => d && d.distance != null ? d.distance : linkDistance).strength(linkStrength);
-      simulation.force("link", linkForce);
-    } catch (e) {
-      try {
-        simulation.force("link", d32.forceLink(linksCopy));
-      } catch (e2) {
-      }
-    }
-    try {
-      simulation.force("charge", d32.forceManyBody().strength(chargeStrength));
-      simulation.force("center", d32.forceCenter(width / 2, height / 2).strength(centerStrength));
-      const collide = d32.forceCollide().radius((d) => {
-        const nodeSize = d && d.size ? d.size : 10;
-        return nodeSize + collisionRadius;
-      }).strength(collisionStrength);
-      simulation.force("collision", collide);
-      simulation.force("x", d32.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5)));
-      simulation.force("y", d32.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5)));
-      simulation.alphaDecay(alphaDecay);
-      simulation.velocityDecay(velocityDecay);
-      simulation.alphaMin(alphaMin);
-      try {
-        simulation.alphaTarget(alphaTarget);
-      } catch (e) {
-      }
-      try {
-        simulation.alpha(warmAlpha);
-      } catch (e) {
-      }
-    } catch (e) {
-    }
-    simulationRef.current = simulation;
-    if (stopTimeoutRef.current != null) {
-      try {
-        globalThis.clearTimeout(stopTimeoutRef.current);
-      } catch (e) {
-      }
-      stopTimeoutRef.current = null;
-    }
-    if (maxSimulationTimeMs && maxSimulationTimeMs > 0) {
-      stopTimeoutRef.current = globalThis.setTimeout(() => {
-        try {
-          if (stabilizeOnStop) {
-            nodesCopy.forEach((n) => {
-              n.vx = 0;
-              n.vy = 0;
-              if (typeof n.x === "number") n.x = Number(n.x.toFixed(3));
-              if (typeof n.y === "number") n.y = Number(n.y.toFixed(3));
-            });
-          }
-          simulation.alpha(0);
-          simulation.stop();
-        } catch (e) {
-        }
-        setIsRunning(false);
-        setNodes([...nodesCopy]);
-        setLinks([...linksCopy]);
-      }, maxSimulationTimeMs);
-    }
-    let rafId = null;
-    let lastUpdate = 0;
-    const tickHandler = () => {
-      try {
-        if (typeof onTick === "function") onTick(nodesCopy, linksCopy, simulation);
-      } catch (e) {
-      }
-      try {
-        if (simulation.alpha() <= alphaMin) {
-          try {
-            if (stabilizeOnStop) {
-              nodesCopy.forEach((n) => {
-                n.vx = 0;
-                n.vy = 0;
-                if (typeof n.x === "number") n.x = Number(n.x.toFixed(3));
-                if (typeof n.y === "number") n.y = Number(n.y.toFixed(3));
-              });
-            }
-            simulation.stop();
-          } catch (e) {
-          }
-          setAlpha(simulation.alpha());
-          setIsRunning(false);
-          setNodes([...nodesCopy]);
-          setLinks([...linksCopy]);
-          return;
-        }
-      } catch (e) {
-      }
-      const now = Date.now();
-      const shouldUpdate = now - lastUpdate >= tickThrottleMs;
-      if (rafId == null && shouldUpdate) {
-        rafId = (globalThis.requestAnimationFrame || ((cb) => setTimeout(cb, 16)))(() => {
-          rafId = null;
-          lastUpdate = Date.now();
-          setNodes([...nodesCopy]);
-          setLinks([...linksCopy]);
-          setAlpha(simulation.alpha());
-          setIsRunning(simulation.alpha() > simulation.alphaMin());
-        });
-      }
-    };
-    simulation.on("tick", tickHandler);
-    simulation.on("end", () => {
-      setIsRunning(false);
-    });
-    return () => {
-      try {
-        simulation.on("tick", null);
-      } catch (e) {
-      }
-      if (stopTimeoutRef.current != null) {
-        try {
-          globalThis.clearTimeout(stopTimeoutRef.current);
-        } catch (e) {
-        }
-        stopTimeoutRef.current = null;
-      }
-      if (rafId != null) {
-        try {
-          (globalThis.cancelAnimationFrame || ((id) => clearTimeout(id)))(rafId);
-        } catch (e) {
-        }
-        rafId = null;
-      }
-      simulation.stop();
-    };
-  }, [
-    nodesKey,
-    linksKey,
-    chargeStrength,
-    linkDistance,
-    linkStrength,
-    collisionStrength,
-    collisionRadius,
-    centerStrength,
-    width,
-    height,
-    alphaDecay,
-    velocityDecay,
-    alphaTarget,
-    alphaMin,
-    stabilizeOnStop,
-    tickThrottleMs,
-    maxSimulationTimeMs
-  ]);
-  const restart = () => {
-    if (simulationRef.current) {
-      try {
-        simulationRef.current.alphaTarget(warmAlpha).restart();
-      } catch (e) {
-        simulationRef.current.restart();
-      }
-      setIsRunning(true);
-      if (stopTimeoutRef.current != null) {
-        try {
-          globalThis.clearTimeout(stopTimeoutRef.current);
-        } catch (e) {
-        }
-        stopTimeoutRef.current = null;
-      }
-      if (maxSimulationTimeMs && maxSimulationTimeMs > 0) {
-        stopTimeoutRef.current = globalThis.setTimeout(() => {
-          try {
-            simulationRef.current?.alpha(0);
-            simulationRef.current?.stop();
-          } catch (e) {
-          }
-          setIsRunning(false);
-        }, maxSimulationTimeMs);
-      }
-    }
-  };
-  const stop = () => {
-    if (simulationRef.current) {
-      simulationRef.current.stop();
-      setIsRunning(false);
-    }
-  };
-  const originalForcesRef = useRef({ charge: chargeStrength, link: linkStrength, collision: collisionStrength });
-  const forcesEnabledRef = useRef(true);
-  const setForcesEnabled = (enabled) => {
-    const sim = simulationRef.current;
-    if (!sim) return;
-    if (forcesEnabledRef.current === enabled) return;
-    forcesEnabledRef.current = enabled;
-    try {
-      const charge = sim.force("charge");
-      if (charge && typeof charge.strength === "function") {
-        charge.strength(enabled ? originalForcesRef.current.charge : 0);
-      }
-      const link = sim.force("link");
-      if (link && typeof link.strength === "function") {
-        link.strength(enabled ? originalForcesRef.current.link : 0);
-      }
-    } catch (e) {
-    }
-  };
-  return {
-    nodes,
-    links,
-    restart,
-    stop,
-    isRunning,
-    alpha,
-    setForcesEnabled
-  };
-}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -382,7 +115,6 @@ var ForceDirectedGraph = forwardRef(
     links: initialLinks,
     width,
     height,
-    simulationOptions,
     enableZoom = true,
     enableDrag = true,
     onNodeClick,
@@ -399,7 +131,9 @@ var ForceDirectedGraph = forwardRef(
     className,
     manualLayout = false,
     onManualLayoutChange,
-    packageBounds
+    packageBounds,
+    layout: externalLayout,
+    onLayoutChange
   }, ref) => {
     const svgRef = useRef(null);
     const gRef = useRef(null);
@@ -409,180 +143,102 @@ var ForceDirectedGraph = forwardRef(
     const dragActiveRef = useRef(false);
     const [pinnedNodes, setPinnedNodes] = useState(/* @__PURE__ */ new Set());
     const internalDragEnabledRef = useRef(enableDrag);
+    const [layout, setLayout] = useState(externalLayout || "force");
+    useEffect(() => {
+      if (externalLayout && externalLayout !== layout) {
+        setLayout(externalLayout);
+      }
+    }, [externalLayout]);
+    const handleLayoutChange = useCallback((newLayout) => {
+      setLayout(newLayout);
+      onLayoutChange?.(newLayout);
+    }, [onLayoutChange]);
     useEffect(() => {
       internalDragEnabledRef.current = enableDrag;
     }, [enableDrag]);
-    const onTick = (_nodesCopy, _linksCopy, _sim) => {
-      try {
-        const boundsToUse = clusterBounds?.bounds ?? packageBounds;
-        const nodeClusterMap = clusterBounds?.nodeToCluster ?? {};
-        if (boundsToUse) {
-          Object.values(nodesById).forEach((n) => {
-            if (!n) return;
-            const group = n.group ?? n.packageGroup;
-            const clusterKey = nodeClusterMap[n.id];
-            const key = clusterKey ?? (group ? `pkg:${group}` : void 0);
-            if (!key) return;
-            const center = boundsToUse[key];
-            if (!center) return;
-            const dx = center.x - (n.x ?? 0);
-            const dy = center.y - (n.y ?? 0);
-            const dist = Math.sqrt(dx * dx + dy * dy);
-            const pullStrength = Math.min(0.5, 0.15 * (dist / (center.r || 200)) + 0.06);
-            if (!isNaN(pullStrength) && isFinite(pullStrength)) {
-              n.vx = (n.vx ?? 0) + dx / (dist || 1) * pullStrength;
-              n.vy = (n.vy ?? 0) + dy / (dist || 1) * pullStrength;
-            }
-            if (center.r && dist > center.r) {
-              const excess = (dist - center.r) / (dist || 1);
-              n.vx = (n.vx ?? 0) - dx * 0.02 * excess;
-              n.vy = (n.vy ?? 0) - dy * 0.02 * excess;
-            }
-          });
-        }
-      } catch (e) {
+    const nodes = React.useMemo(() => {
+      if (!initialNodes || !initialNodes.length) return initialNodes;
+      const cx = width / 2;
+      const cy = height / 2;
+      if (layout === "force") {
+        return initialNodes.map((n) => ({
+          ...n,
+          x: Math.random() * width,
+          y: Math.random() * height
+        }));
       }
-    };
-    const { packageAreas, localPositions } = React.useMemo(() => {
-      try {
-        if (!initialNodes || !initialNodes.length) return { packageAreas: {}, localPositions: {} };
-        const groups = /* @__PURE__ */ new Map();
-        initialNodes.forEach((n) => {
-          const key = n.packageGroup || n.group || "root";
-          if (!groups.has(key)) groups.set(key, []);
-          groups.get(key).push(n);
-        });
-        const groupKeys = Array.from(groups.keys());
-        const children = groupKeys.map((k) => ({ name: k, value: Math.max(1, groups.get(k).length) }));
-        const root = d32.hierarchy({ children });
-        root.sum((d) => d.value);
-        const pack2 = d32.pack().size([width, height]).padding(Math.max(20, Math.min(width, height) * 0.03));
-        const packed = pack2(root);
-        const packageAreas2 = {};
-        if (packed.children) {
-          packed.children.forEach((c) => {
-            const name = c.data.name;
-            packageAreas2[name] = { x: c.x, y: c.y, r: Math.max(40, c.r) };
+      if (layout === "circular") {
+        const radius = Math.min(width, height) * 0.35;
+        return initialNodes.map((n, i) => ({
+          ...n,
+          x: cx + Math.cos(2 * Math.PI * i / initialNodes.length) * radius,
+          y: cy + Math.sin(2 * Math.PI * i / initialNodes.length) * radius
+        }));
+      }
+      if (layout === "hierarchical") {
+        const cols = Math.ceil(Math.sqrt(initialNodes.length));
+        const spacingX = width / (cols + 1);
+        const spacingY = height / (Math.ceil(initialNodes.length / cols) + 1);
+        return initialNodes.map((n, i) => ({
+          ...n,
+          x: spacingX * (i % cols + 1),
+          y: spacingY * (Math.floor(i / cols) + 1)
+        }));
+      }
+      return initialNodes;
+    }, [initialNodes, width, height, layout]);
+    const links = initialLinks;
+    const restart = React.useCallback(() => {
+    }, []);
+    const stop = React.useCallback(() => {
+    }, []);
+    const setForcesEnabled = React.useCallback((_enabled) => {
+    }, []);
+    useEffect(() => {
+      if (!nodes || nodes.length === 0) return;
+      const applyLayout = () => {
+        const cx = width / 2;
+        const cy = height / 2;
+        if (layout === "circular") {
+          const radius = Math.min(width, height) * 0.35;
+          nodes.forEach((node, i) => {
+            const angle = 2 * Math.PI * i / nodes.length;
+            node.fx = cx + Math.cos(angle) * radius;
+            node.fy = cy + Math.sin(angle) * radius;
           });
-        }
-        const localPositions2 = {};
-        groups.forEach((nodesInGroup, _key) => {
-          if (!nodesInGroup || nodesInGroup.length === 0) return;
-          const localNodes = nodesInGroup.map((n) => ({ id: n.id, x: Math.random() * 10 - 5, y: Math.random() * 10 - 5, size: n.size || 10 }));
-          const localLinks = (initialLinks || []).filter((l) => {
-            const s = typeof l.source === "string" ? l.source : l.source && l.source.id;
-            const t = typeof l.target === "string" ? l.target : l.target && l.target.id;
-            return localNodes.some((ln) => ln.id === s) && localNodes.some((ln) => ln.id === t);
-          }).map((l) => ({ source: typeof l.source === "string" ? l.source : l.source.id, target: typeof l.target === "string" ? l.target : l.target.id }));
-          if (localNodes.length === 1) {
-            localPositions2[localNodes[0].id] = { x: 0, y: 0 };
-            return;
-          }
-          const sim = d32.forceSimulation(localNodes).force("link", d32.forceLink(localLinks).id((d) => d.id).distance(30).strength(0.8)).force("charge", d32.forceManyBody().strength(-15)).force("collide", d32.forceCollide((d) => (d.size || 10) + 6).iterations(2)).stop();
-          const ticks = 300;
-          for (let i = 0; i < ticks; i++) sim.tick();
-          localNodes.forEach((ln) => {
-            localPositions2[ln.id] = { x: ln.x ?? 0, y: ln.y ?? 0 };
+        } else if (layout === "hierarchical") {
+          const groups = /* @__PURE__ */ new Map();
+          nodes.forEach((n) => {
+            const key = n.packageGroup || n.group || "root";
+            if (!groups.has(key)) groups.set(key, []);
+            groups.get(key).push(n);
           });
-        });
-        return { packageAreas: packageAreas2, localPositions: localPositions2 };
-      } catch (e) {
-        return { packageAreas: {}, localPositions: {} };
-      }
-    }, [initialNodes, initialLinks, width, height]);
-    const seededNodes = React.useMemo(() => {
-      if (!initialNodes || !Object.keys(packageAreas || {}).length) return initialNodes;
-      return initialNodes.map((n) => {
-        const key = n.packageGroup || n.group || "root";
-        const area = packageAreas[key];
-        const lp = localPositions[n.id];
-        if (!area || !lp) return n;
-        const scale = Math.max(0.5, area.r * 0.6 / (Math.max(1, Math.sqrt(lp.x * lp.x + lp.y * lp.y)) || 1));
-        return { ...n, x: area.x + lp.x * scale, y: area.y + lp.y * scale };
-      });
-    }, [initialNodes, packageAreas, localPositions]);
-    const { nodes, links, restart, stop, setForcesEnabled } = useForceSimulation(seededNodes || initialNodes, initialLinks, {
-      width,
-      height,
-      chargeStrength: manualLayout ? 0 : void 0,
-      onTick,
-      ...simulationOptions
-    });
-    const nodesById = React.useMemo(() => {
-      const m = {};
-      (nodes || []).forEach((n) => {
-        if (n && n.id) m[n.id] = n;
-      });
-      return m;
-    }, [nodes]);
-    const clusterBounds = React.useMemo(() => {
-      try {
-        if (!links || !nodes) return null;
-        const nodeIds = new Set(nodes.map((n) => n.id));
-        const adj = /* @__PURE__ */ new Map();
-        nodes.forEach((n) => adj.set(n.id, /* @__PURE__ */ new Set()));
-        links.forEach((l) => {
-          const type = l.type || "reference";
-          if (type !== "dependency") return;
-          const s = typeof l.source === "string" ? l.source : l.source && l.source.id || null;
-          const t = typeof l.target === "string" ? l.target : l.target && l.target.id || null;
-          if (!s || !t) return;
-          if (!nodeIds.has(s) || !nodeIds.has(t)) return;
-          adj.get(s)?.add(t);
-          adj.get(t)?.add(s);
-        });
-        const visited = /* @__PURE__ */ new Set();
-        const comps = [];
-        for (const nid of nodeIds) {
-          if (visited.has(nid)) continue;
-          const stack = [nid];
-          const comp = [];
-          visited.add(nid);
-          while (stack.length) {
-            const cur = stack.pop();
-            comp.push(cur);
-            const neigh = adj.get(cur);
-            if (!neigh) continue;
-            for (const nb of neigh) {
-              if (!visited.has(nb)) {
-                visited.add(nb);
-                stack.push(nb);
-              }
+          const groupArray = Array.from(groups.entries());
+          const cols = Math.ceil(Math.sqrt(groupArray.length));
+          const groupSpacingX = width * 0.8 / cols;
+          const groupSpacingY = height * 0.8 / Math.ceil(groupArray.length / cols);
+          groupArray.forEach(([groupKey, groupNodes], gi) => {
+            const col = gi % cols;
+            const row = Math.floor(gi / cols);
+            const groupX = (col + 0.5) * groupSpacingX;
+            const groupY = (row + 0.5) * groupSpacingY;
+            if (groupKey.startsWith("pkg:") || groupKey === groupKey) {
+              groupNodes.forEach((n, ni) => {
+                const angle = 2 * Math.PI * ni / groupNodes.length;
+                const r = Math.min(80, 20 + groupNodes.length * 8);
+                n.fx = groupX + Math.cos(angle) * r;
+                n.fy = groupY + Math.sin(angle) * r;
+              });
             }
-          }
-          comps.push(comp);
+          });
         }
-        if (comps.length <= 1) return null;
-        const children = comps.map((c, i) => ({ name: String(i), value: Math.max(1, c.length) }));
-        d32.hierarchy({ children }).sum((d) => d.value).sort((a, b) => b.value - a.value);
-        const num = comps.length;
-        const cx = width / 2;
-        const cy = height / 2;
-        const base = Math.max(width, height);
-        const circleRadius = base * Math.max(30, num * 20, Math.sqrt(num) * 12);
-        const map = {};
-        comps.forEach((c, i) => {
-          const angle = 2 * Math.PI * i / num;
-          const x = cx + Math.cos(angle) * circleRadius;
-          const y = cy + Math.sin(angle) * circleRadius;
-          const sizeBias = Math.sqrt(Math.max(1, c.length));
-          const r = Math.max(200, 100 * sizeBias);
-          map[`cluster:${i}`] = { x, y, r };
-        });
-        const nodeToCluster = {};
-        comps.forEach((c, i) => c.forEach((nid) => nodeToCluster[nid] = `cluster:${i}`));
-        return { bounds: map, nodeToCluster };
-      } catch (e) {
-        return null;
-      }
-    }, [nodes, links, width, height]);
-    useEffect(() => {
-      if (!packageBounds && !clusterBounds && (!packageAreas || Object.keys(packageAreas).length === 0)) return;
-      try {
-        restart();
-      } catch (e) {
-      }
-    }, [packageBounds, clusterBounds, packageAreas, restart]);
+        try {
+          restart();
+        } catch (e) {
+        }
+      };
+      applyLayout();
+    }, [layout, nodes, width, height, restart]);
     useEffect(() => {
       try {
         if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
@@ -645,18 +301,22 @@ var ForceDirectedGraph = forwardRef(
           const x = width / 2 - centerX * scale;
           const y = height / 2 - centerY * scale;
           if (gRef.current && svgRef.current) {
-            const svg = d32.select(svgRef.current);
-            const newTransform = d32.zoomIdentity.translate(x, y).scale(scale);
-            svg.transition().duration(300).call(d32.zoom().transform, newTransform);
+            const svg = d3.select(svgRef.current);
+            const newTransform = d3.zoomIdentity.translate(x, y).scale(scale);
+            svg.transition().duration(300).call(d3.zoom().transform, newTransform);
             setTransform(newTransform);
           }
         },
         getPinnedNodes: () => Array.from(pinnedNodes),
         setDragMode: (enabled) => {
           internalDragEnabledRef.current = enabled;
-        }
+        },
+        setLayout: (newLayout) => {
+          handleLayoutChange(newLayout);
+        },
+        getLayout: () => layout
       }),
-      [nodes, pinnedNodes, restart, width, height]
+      [nodes, pinnedNodes, restart, width, height, layout, handleLayoutChange]
     );
     useEffect(() => {
       try {
@@ -666,9 +326,9 @@ var ForceDirectedGraph = forwardRef(
     }, [manualLayout, onManualLayoutChange]);
     useEffect(() => {
       if (!enableZoom || !svgRef.current || !gRef.current) return;
-      const svg = d32.select(svgRef.current);
-      const g = d32.select(gRef.current);
-      const zoom2 = d32.zoom().scaleExtent([0.1, 10]).on("zoom", (event) => {
+      const svg = d3.select(svgRef.current);
+      const g = d3.select(gRef.current);
+      const zoom2 = d3.zoom().scaleExtent([0.1, 10]).on("zoom", (event) => {
         g.attr("transform", event.transform);
         transformRef.current = event.transform;
         setTransform(event.transform);
@@ -681,19 +341,19 @@ var ForceDirectedGraph = forwardRef(
     useEffect(() => {
       if (!gRef.current) return;
       try {
-        const g = d32.select(gRef.current);
+        const g = d3.select(gRef.current);
         g.selectAll("g.node").each(function() {
-          const datum = d32.select(this).datum();
+          const datum = d3.select(this).datum();
           if (!datum) return;
-          d32.select(this).attr("transform", `translate(${datum.x || 0},${datum.y || 0})`);
+          d3.select(this).attr("transform", `translate(${datum.x || 0},${datum.y || 0})`);
         });
         g.selectAll("line").each(function() {
-          const l = d32.select(this).datum();
+          const l = d3.select(this).datum();
           if (!l) return;
           const s = typeof l.source === "object" ? l.source : nodes.find((n) => n.id === l.source) || l.source;
           const t = typeof l.target === "object" ? l.target : nodes.find((n) => n.id === l.target) || l.target;
           if (!s || !t) return;
-          d32.select(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
+          d3.select(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
         });
       } catch (e) {
       }
@@ -754,8 +414,8 @@ var ForceDirectedGraph = forwardRef(
     }, [enableDrag]);
     useEffect(() => {
       if (!gRef.current || !enableDrag) return;
-      const g = d32.select(gRef.current);
-      const dragBehavior = d32.drag().on("start", function(event) {
+      const g = d3.select(gRef.current);
+      const dragBehavior = d3.drag().on("start", function(event) {
         try {
           const target = event.sourceEvent && event.sourceEvent.target || event.target;
           const grp = target.closest?.("g.node");