@opentrace/components 0.1.1-rc.47 → 0.1.1-rc.62

package/dist/opentrace-components.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import t, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo, useContext, createContext, useCallback, memo, createElement as createElement$1, useLayoutEffect } from "react";
-import { f as eventsExports, h as getDefaultExportFromCjs, r as requireIsGraph, G as Graph, g as getCommunityColor, a as buildCommunityNames, b as buildCommunityColorMap, c as getLinkColor, d as getNodeColor, i as requireGetters, u as useCommunities, j as useGraphFilters, e as useHighlights } from "./useHighlights-DbMfb0-p.js";
-import { s } from "./useHighlights-DbMfb0-p.js";
+import { f as eventsExports, h as getDefaultExportFromCjs, r as requireIsGraph, G as Graph, g as getCommunityColor, a as buildCommunityNames, b as buildCommunityColorMap, c as getLinkColor, d as getNodeColor, i as requireGetters, u as useCommunities, j as useGraphFilters, e as useHighlights } from "./useHighlights-CmOAWaLE.js";
+import { s } from "./useHighlights-CmOAWaLE.js";
 import { A, I, d, n } from "./urlNormalize-KY4ngwCQ.js";
 function _toPrimitive$1(t2, r) {
   if ("object" != typeof t2 || !t2) return t2;
@@ -5250,8 +5250,112 @@ createEdgeCurveProgram({
     extremity: "both"
   })
 });
-const NODE_SIZE_MIN = 2;
-const NODE_SIZE_MAX = 8;
+const PING_DURATION = 400;
+const PING_MAX_SCALE = 2;
+const PING_ALPHA = 0.5;
+const HALO_SCALE = 1.05;
+const HALO_ALPHA = 0.35;
+const HALO_LINE_WIDTH = 5;
+function useSelectionPulse(sigma, selectedNodeId, enabled) {
+  const startTimeRef = useRef(0);
+  const pingRafRef = useRef(null);
+  useEffect(() => {
+    if (!sigma || !selectedNodeId || !enabled) {
+      if (pingRafRef.current !== null) {
+        cancelAnimationFrame(pingRafRef.current);
+        pingRafRef.current = null;
+      }
+      return;
+    }
+    const graph = sigma.getGraph();
+    if (!graph.hasNode(selectedNodeId)) return;
+    startTimeRef.current = performance.now();
+    function safeRefresh() {
+      try {
+        sigma?.refresh();
+      } catch {
+      }
+    }
+    function pingLoop() {
+      if (!sigma || !selectedNodeId) return;
+      const elapsed = performance.now() - startTimeRef.current;
+      if (elapsed < PING_DURATION) {
+        safeRefresh();
+        pingRafRef.current = requestAnimationFrame(pingLoop);
+      } else {
+        pingRafRef.current = null;
+        safeRefresh();
+      }
+    }
+    pingRafRef.current = requestAnimationFrame(pingLoop);
+    const handler = () => {
+      if (!sigma || !selectedNodeId) return;
+      const graph2 = sigma.getGraph();
+      if (!graph2.hasNode(selectedNodeId)) return;
+      const attrs = graph2.getNodeAttributes(selectedNodeId);
+      const nodePosition = sigma.graphToViewport({
+        x: attrs.x,
+        y: attrs.y
+      });
+      const camera = sigma.getCamera();
+      const baseSize = attrs.size ?? 5;
+      const screenSize = baseSize / camera.ratio;
+      const container = sigma.getContainer();
+      const canvas = container.querySelector(
+        ".sigma-hovers"
+      );
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const color = attrs.color ?? "#ffffff";
+      const elapsed = performance.now() - startTimeRef.current;
+      if (elapsed < PING_DURATION) {
+        const t2 = elapsed / PING_DURATION;
+        const scale2 = 1 + (PING_MAX_SCALE - 1) * t2;
+        const alpha = PING_ALPHA * (1 - t2);
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.arc(
+          nodePosition.x,
+          nodePosition.y,
+          screenSize * scale2,
+          0,
+          Math.PI * 2
+        );
+        ctx.stroke();
+        ctx.restore();
+      }
+      ctx.save();
+      ctx.globalAlpha = HALO_ALPHA;
+      ctx.strokeStyle = color;
+      ctx.lineWidth = HALO_LINE_WIDTH;
+      ctx.beginPath();
+      ctx.arc(
+        nodePosition.x,
+        nodePosition.y,
+        screenSize * HALO_SCALE,
+        0,
+        Math.PI * 2
+      );
+      ctx.stroke();
+      ctx.restore();
+    };
+    sigma.on("afterRender", handler);
+    safeRefresh();
+    return () => {
+      sigma.off("afterRender", handler);
+      if (pingRafRef.current !== null) {
+        cancelAnimationFrame(pingRafRef.current);
+        pingRafRef.current = null;
+      }
+    };
+  }, [sigma, selectedNodeId, enabled]);
+}
+const NODE_SIZE_MIN = 3;
+const NODE_SIZE_MAX = 12;
 const NODE_SIZE_DEGREE_SCALE = 1;
 const NODE_SIZE_MULTIPLIERS = {
   Repository: 1,
@@ -5263,12 +5367,12 @@ const EDGE_SIZE_DEFAULT = 1;
 const EDGE_SIZE_DEFAULT_LINE = 2;
 const EDGE_SIZE_HIGHLIGHTED = 1.25;
 const EDGE_SIZE_DIMMED = 0.5;
-const EDGE_OPACITY_DEFAULT = 0.6;
+const EDGE_OPACITY_DEFAULT = 0.78;
 const EDGE_OPACITY_HIGHLIGHTED = 1;
-const EDGE_OPACITY_DIMMED = 0.05;
-const NODE_OPACITY_DIMMED = 0.15;
+const EDGE_OPACITY_DIMMED = 0.08;
+const NODE_OPACITY_DIMMED = 0.22;
 const NODE_SIZE_DIMMED_SCALE = 0.35;
-const ZOOM_SIZE_EXPONENT = 0.9;
+const ZOOM_SIZE_EXPONENT = 0.7;
 const FORCE_LINK_DISTANCE = 200;
 const FORCE_CHARGE_STRENGTH = -200;
 const FORCE_SIMULATION_TICKS = 80;
@@ -5276,15 +5380,15 @@ const FORCE_CLUSTER_STRENGTH = 0.3;
 const FORCE_CLUSTER_TICKS = 40;
 const FA2_ENABLED = true;
 const FA2_GRAVITY = 0.1;
-const FA2_SCALING_RATIO = 30;
-const FA2_SLOW_DOWN = 2;
+const FA2_SCALING_RATIO = 120;
+const FA2_SLOW_DOWN = 0.5;
 const FA2_BARNES_HUT_THRESHOLD = 300;
 const FA2_BARNES_HUT_THETA = 0.5;
 const FA2_STRONG_GRAVITY = false;
 const FA2_LIN_LOG_MODE = true;
 const FA2_OUTBOUND_ATTRACTION = true;
 const FA2_ADJUST_SIZES = true;
-const FA2_DURATION = 3e3;
+const FA2_DURATION = 2e4;
 const NOVERLAP_MAX_ITERATIONS = 50;
 const NOVERLAP_RATIO = 1.5;
 const NOVERLAP_MARGIN = 25;
@@ -5349,6 +5453,145 @@ function endpointId(endpoint) {
     return endpoint.id;
   return String(endpoint);
 }
+function applySpacing(pos, assignments, radiusScale, gap, maxIterations, pushFactor) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const [id] of pos) {
+    const cid = assignments[id];
+    if (cid === void 0) continue;
+    let list = groups.get(cid);
+    if (!list) {
+      list = [];
+      groups.set(cid, list);
+    }
+    list.push(id);
+  }
+  if (groups.size < 2) return;
+  const comms = [];
+  for (const [, ids] of groups) {
+    let cx = 0, cy = 0;
+    for (const id of ids) {
+      const p = pos.get(id);
+      cx += p.x;
+      cy += p.y;
+    }
+    cx /= ids.length;
+    cy /= ids.length;
+    comms.push({
+      nodeIds: ids,
+      cx,
+      cy,
+      radius: Math.sqrt(ids.length) * radiusScale
+    });
+  }
+  for (let iter = 0; iter < maxIterations; iter++) {
+    const pushX = new Float64Array(comms.length);
+    const pushY = new Float64Array(comms.length);
+    let maxOverlap = 0;
+    for (let i = 0; i < comms.length; i++) {
+      for (let j2 = i + 1; j2 < comms.length; j2++) {
+        const a = comms[i];
+        const b = comms[j2];
+        const dx = b.cx - a.cx;
+        const dy = b.cy - a.cy;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const minDist = a.radius + b.radius + gap;
+        if (dist < minDist) {
+          const overlap = (minDist - dist) / minDist;
+          if (overlap > maxOverlap) maxOverlap = overlap;
+          const push = (minDist - dist) * pushFactor;
+          if (dist > 1e-3) {
+            const nx = dx / dist;
+            const ny = dy / dist;
+            const totalSize = a.nodeIds.length + b.nodeIds.length;
+            const aRatio = b.nodeIds.length / totalSize;
+            const bRatio = a.nodeIds.length / totalSize;
+            pushX[i] -= nx * push * aRatio;
+            pushY[i] -= ny * push * aRatio;
+            pushX[j2] += nx * push * bRatio;
+            pushY[j2] += ny * push * bRatio;
+          } else {
+            const angle = Math.random() * Math.PI * 2;
+            pushX[i] -= Math.cos(angle) * minDist * 0.5;
+            pushY[i] -= Math.sin(angle) * minDist * 0.5;
+            pushX[j2] += Math.cos(angle) * minDist * 0.5;
+            pushY[j2] += Math.sin(angle) * minDist * 0.5;
+          }
+        }
+      }
+    }
+    if (maxOverlap <= 0.05) break;
+    for (let i = 0; i < comms.length; i++) {
+      const ox = pushX[i];
+      const oy = pushY[i];
+      if (Math.abs(ox) < 0.01 && Math.abs(oy) < 0.01) continue;
+      comms[i].cx += ox;
+      comms[i].cy += oy;
+      for (const id of comms[i].nodeIds) {
+        const p = pos.get(id);
+        p.x += ox;
+        p.y += oy;
+      }
+    }
+  }
+}
+function applyNoverlap(pos, sizes, assignments, margin, iterations) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const [id] of pos) {
+    const cid = assignments[id];
+    if (cid === void 0) continue;
+    let list = groups.get(cid);
+    if (!list) {
+      list = [];
+      groups.set(cid, list);
+    }
+    list.push(id);
+  }
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const [, p] of pos) {
+    if (p.x < minX) minX = p.x;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.y > maxY) maxY = p.y;
+  }
+  const scale2 = Math.max(maxX - minX, maxY - minY, 1) / 4e3;
+  const scaledMargin = margin * scale2;
+  const MAX_INLINE = 500;
+  for (const [, ids] of groups) {
+    if (ids.length < 3 || ids.length > MAX_INLINE) continue;
+    const nodes = ids.map((id) => ({
+      id,
+      x: pos.get(id).x,
+      y: pos.get(id).y,
+      size: (sizes.get(id) ?? 3) * scale2
+    }));
+    for (let iter = 0; iter < iterations; iter++) {
+      for (let i = 0; i < nodes.length; i++) {
+        const a = nodes[i];
+        for (let j2 = i + 1; j2 < nodes.length; j2++) {
+          const b = nodes[j2];
+          const dx = b.x - a.x;
+          const dy = b.y - a.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          const minDist = a.size + b.size + scaledMargin;
+          if (dist < minDist && dist > 1e-3) {
+            const push = (minDist - dist) * 0.5;
+            const nx = dx / dist;
+            const ny = dy / dist;
+            a.x -= nx * push;
+            a.y -= ny * push;
+            b.x += nx * push;
+            b.y += ny * push;
+          }
+        }
+      }
+    }
+    for (const n3 of nodes) {
+      const p = pos.get(n3.id);
+      p.x = n3.x;
+      p.y = n3.y;
+    }
+  }
+}
 function useGraphInstance({
   allNodes,
   allLinks,
@@ -5425,6 +5668,48 @@ function useGraphInstance({
         }
       });
     }
+    const { assignments: communityAssignments } = communityData;
+    if (communityAssignments) {
+      const communityGroups = /* @__PURE__ */ new Map();
+      for (const node of allNodes) {
+        const cid = communityAssignments[node.id];
+        if (cid === void 0) continue;
+        let list = communityGroups.get(cid);
+        if (!list) {
+          list = [];
+          communityGroups.set(cid, list);
+        }
+        list.push(node.id);
+      }
+      let vcIdx = 0;
+      for (const [, members] of communityGroups) {
+        if (members.length < 2) continue;
+        const baseTies = members.length >= 10 ? 3 : 2;
+        for (const nodeId of members) {
+          const count = Math.min(baseTies, members.length - 1);
+          for (let c2 = 0; c2 < count; c2++) {
+            const targetIdx = (members.indexOf(nodeId) + c2 + 1) % members.length;
+            const targetId = members[targetIdx];
+            if (targetId === nodeId) continue;
+            const vcKey = `_vc_${vcIdx++}`;
+            if (seenEdges.has(`${nodeId}-_COMMUNITY_-${targetId}`)) continue;
+            seenEdges.add(`${nodeId}-_COMMUNITY_-${targetId}`);
+            serializedEdges.push({
+              key: vcKey,
+              source: nodeId,
+              target: targetId,
+              attributes: {
+                label: "_COMMUNITY_",
+                color: "transparent",
+                size: 0,
+                hidden: true,
+                _virtual: true
+              }
+            });
+          }
+        }
+      }
+    }
     graph.import({
       nodes: serializedNodes,
       edges: serializedEdges
@@ -5472,6 +5757,15 @@ function useGraphInstance({
         console.timeEnd("[graph] d3-force worker layout");
         console.log(`[graph] layout computed for ${pos.size} nodes`);
       }
+      const { assignments: assignments2 } = communityData;
+      if (assignments2 && Object.keys(assignments2).length > 0) {
+        applySpacing(pos, assignments2, 40, 100, 50, 0.5);
+        const sizeMap = /* @__PURE__ */ new Map();
+        for (const sn of serializedNodes) {
+          sizeMap.set(sn.key, sn.attributes.size);
+        }
+        applyNoverlap(pos, sizeMap, assignments2, layoutConfig.noverlapMargin, layoutConfig.noverlapCommunityIterations ?? 20);
+      }
       graph.updateEachNodeAttributes((_id, attrs) => {
         const p = pos.get(_id);
         if (p) {
@@ -5561,6 +5855,10 @@ function useGraphVisuals(graph, layoutReady, visualState, layoutConfig, _degreeM
     const defaultEdgeSize = isLargeGraph ? EDGE_SIZE_DEFAULT_LINE : EDGE_SIZE_DEFAULT;
     graph.updateEachEdgeAttributes(
       (_id, attrs, source, target) => {
+        if (attrs._virtual) {
+          attrs.hidden = true;
+          return attrs;
+        }
         const linkKey = `${source}-${target}`;
         const isHighlighted = highlightLinks.has(linkKey);
         const baseColor = getLinkColor2(attrs.label);
@@ -6851,13 +7149,10 @@ function LayoutPipeline({
   layoutReady,
   layoutConfig,
   optimizeTick,
-  communityAssignments,
   onOptimizeStatus
 }) {
   const sigma = v();
   const timerRef = useRef(null);
-  const spacingWorkerRef = useRef(null);
-  const perCommunityNoverlapCancel = useRef(null);
   const { start, stop } = n2({
     settings: {
       gravity: layoutConfig.fa2Gravity,
@@ -6876,245 +7171,24 @@ function LayoutPipeline({
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
-    if (spacingWorkerRef.current) {
-      spacingWorkerRef.current.terminate();
-      spacingWorkerRef.current = null;
-    }
-    perCommunityNoverlapCancel.current?.();
-    perCommunityNoverlapCancel.current = null;
     stop();
   }
-  function runSpacing(onDone) {
-    const graph = sigma.getGraph();
-    if (graph.order === 0 || !communityAssignments) {
-      onDone();
-      return;
-    }
-    onOptimizeStatus?.({ phase: "spacing" });
-    const nodes = [];
-    graph.forEachNode((id, attrs) => {
-      const cid = communityAssignments[id];
-      if (cid === void 0) return;
-      nodes.push({
-        id,
-        x: attrs.x,
-        y: attrs.y,
-        communityId: cid
-      });
-    });
-    const worker2 = new Worker(new URL(
-      /* @vite-ignore */
-      "/assets/spacingWorker-hXLGHyRg.js",
-      import.meta.url
-    ), {
-      type: "module"
-    });
-    spacingWorkerRef.current = worker2;
-    worker2.onmessage = (e2) => {
-      const msg = e2.data;
-      if (msg.type === "progress") {
-        if (msg.updates.length > 0) {
-          const posMap = /* @__PURE__ */ new Map();
-          for (const u of msg.updates) posMap.set(u.id, { x: u.x, y: u.y });
-          graph.updateEachNodeAttributes((id, attrs) => {
-            const pos = posMap.get(id);
-            if (pos) {
-              attrs.x = pos.x;
-              attrs.y = pos.y;
-            }
-            return attrs;
-          });
-        }
-        onOptimizeStatus?.({
-          phase: "spacing",
-          iteration: msg.iteration,
-          cleanRatio: 1 - msg.maxOverlap
-        });
-        if (process.env.NODE_ENV === "development") {
-          console.log(
-            `%c[spacing]%c iter ${msg.iteration}: overlap ${(msg.maxOverlap * 100).toFixed(0)}%, ${msg.updates.length} nodes moved`,
-            "color: #fbbf24; font-weight: bold",
-            "color: inherit"
-          );
-        }
-      } else if (msg.type === "done") {
-        if (process.env.NODE_ENV === "development") {
-          console.log(
-            `%c[spacing]%c done: ${msg.iterations} iters, ${(msg.maxOverlap * 100).toFixed(0)}% max overlap in ${msg.totalMs.toFixed(0)}ms`,
-            "color: #fbbf24; font-weight: bold",
-            "color: inherit"
-          );
-        }
-        worker2.terminate();
-        spacingWorkerRef.current = null;
-        onDone();
-      }
-    };
-    worker2.onerror = () => {
-      worker2.terminate();
-      spacingWorkerRef.current = null;
-      onDone();
-    };
-    worker2.postMessage({
-      nodes,
-      radiusScale: 40,
-      gap: 100,
-      maxIterations: 50,
-      overlapThreshold: 0.05
-    });
-  }
-  function getGraphScaleFactor() {
-    const graph = sigma.getGraph();
-    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-    graph.forEachNode((_, attrs) => {
-      const x = attrs.x;
-      const y = attrs.y;
-      if (x < minX) minX = x;
-      if (x > maxX) maxX = x;
-      if (y < minY) minY = y;
-      if (y > maxY) maxY = y;
-    });
-    return Math.max(maxX - minX, maxY - minY, 1) / 4e3;
-  }
-  function runPerCommunityNoverlap(onDone) {
-    const graph = sigma.getGraph();
-    if (graph.order === 0 || !communityAssignments) {
-      onDone();
-      return;
-    }
-    const scale2 = getGraphScaleFactor();
-    const groups = /* @__PURE__ */ new Map();
-    graph.forEachNode((id) => {
-      const cid = communityAssignments[id];
-      if (cid === void 0) return;
-      let list = groups.get(cid);
-      if (!list) {
-        list = [];
-        groups.set(cid, list);
-      }
-      list.push(id);
-    });
-    const sorted = [...groups.entries()].sort(
-      (a, b) => b[1].length - a[1].length
-    );
-    const MAX_INLINE = 500;
-    let idx = 0;
-    let totalMoved = 0;
-    let cancelled = false;
-    let pendingCallbackId = null;
-    perCommunityNoverlapCancel.current = () => {
-      cancelled = true;
-      if (pendingCallbackId !== null) {
-        if (typeof cancelIdleCallback === "function") {
-          cancelIdleCallback(pendingCallbackId);
-        } else {
-          clearTimeout(pendingCallbackId);
-        }
-        pendingCallbackId = null;
-      }
-    };
-    function processNext() {
-      if (cancelled || idx >= sorted.length) {
-        if (process.env.NODE_ENV === "development") {
-          console.log(
-            `%c[noverlap]%c per-community done: ${sorted.length} communities, ${totalMoved} nodes moved${cancelled ? " (cancelled)" : ""}`,
-            "color: #4ade80; font-weight: bold",
-            "color: inherit"
-          );
-        }
-        perCommunityNoverlapCancel.current = null;
-        if (!cancelled) onDone();
-        return;
-      }
-      const [, nodeIds] = sorted[idx++];
-      if (nodeIds.length < 3 || nodeIds.length > MAX_INLINE) {
-        scheduleNext();
-        return;
-      }
-      const subGraph = /* @__PURE__ */ new Map();
-      for (const nid of nodeIds) {
-        const attrs = graph.getNodeAttributes(nid);
-        subGraph.set(nid, {
-          x: attrs.x,
-          y: attrs.y,
-          size: (attrs.size ?? 3) * scale2
-        });
-      }
-      const margin = layoutConfig.noverlapMargin * scale2;
-      const iters = layoutConfig.noverlapCommunityIterations ?? 20;
-      const nodeArr = [...subGraph.entries()];
-      for (let iter = 0; iter < iters; iter++) {
-        for (let i = 0; i < nodeArr.length; i++) {
-          const [, a] = nodeArr[i];
-          for (let j2 = i + 1; j2 < nodeArr.length; j2++) {
-            const [, b] = nodeArr[j2];
-            const dx = b.x - a.x;
-            const dy = b.y - a.y;
-            const dist = Math.sqrt(dx * dx + dy * dy);
-            const minDist = a.size + b.size + margin;
-            if (dist < minDist && dist > 1e-3) {
-              const push = (minDist - dist) * 0.5;
-              const nx = dx / dist;
-              const ny = dy / dist;
-              a.x -= nx * push;
-              a.y -= ny * push;
-              b.x += nx * push;
-              b.y += ny * push;
-            }
-          }
-        }
-      }
-      let moved = 0;
-      for (const [nid, pos] of subGraph) {
-        const attrs = graph.getNodeAttributes(nid);
-        if (Math.abs(pos.x - attrs.x) > 0.1 || Math.abs(pos.y - attrs.y) > 0.1) {
-          graph.mergeNodeAttributes(nid, { x: pos.x, y: pos.y });
-          moved++;
-        }
-      }
-      totalMoved += moved;
-      scheduleNext();
-    }
-    function scheduleNext() {
-      if (typeof requestIdleCallback === "function") {
-        pendingCallbackId = requestIdleCallback(processNext, { timeout: 50 });
-      } else {
-        pendingCallbackId = setTimeout(processNext, 0);
-      }
-    }
-    processNext();
-  }
   useEffect(() => {
     if (!layoutReady) return;
     cleanup();
     const sigmaInstance = sigma;
     const graph = sigma.getGraph();
-    runSpacing(() => {
-      zoomToFit(sigmaInstance, 0);
-      const runFA2 = (duration, onDone) => {
-        if (layoutConfig.fa2Enabled && graph.order > 0) {
-          onOptimizeStatus?.({ phase: "fa2" });
-          start();
-          timerRef.current = setTimeout(() => {
-            stop();
-            onDone();
-          }, duration);
-        } else {
-          onDone();
-        }
-      };
-      runFA2(layoutConfig.fa2Duration, () => {
-        onOptimizeStatus?.({ phase: "noverlap" });
-        runPerCommunityNoverlap(() => {
-          runSpacing(() => {
-            runFA2(Math.min(layoutConfig.fa2Duration, 1500), () => {
-              zoomToFit(sigmaInstance, 600);
-              onOptimizeStatus?.(null);
-            });
-          });
-        });
-      });
-    });
+    zoomToFit(sigmaInstance, 0);
+    if (layoutConfig.fa2Enabled && graph.order > 0) {
+      onOptimizeStatus?.({ phase: "fa2" });
+      start();
+      timerRef.current = setTimeout(() => {
+        stop();
+        onOptimizeStatus?.(null);
+      }, layoutConfig.fa2Duration);
+    } else {
+      onOptimizeStatus?.(null);
+    }
     return cleanup;
   }, [layoutReady, optimizeTick, layoutConfig, start, stop, sigma]);
   return null;
@@ -7314,10 +7388,25 @@ function GraphEventHandler({
   }, [sigma, onNodeClick, onEdgeClick, onStageClick]);
   return null;
 }
+function AnimationEffects({
+  selectedNodeId,
+  animationSettings
+}) {
+  const sigma = v();
+  useSelectionPulse(
+    sigma,
+    selectedNodeId,
+    animationSettings.selectionPulse
+  );
+  return null;
+}
 const defaultGetSubType = () => null;
 const EMPTY_STRING_SET = /* @__PURE__ */ new Set();
 const EMPTY_NUMBER_SET = /* @__PURE__ */ new Set();
 const EMPTY_SUB_TYPES = /* @__PURE__ */ new Map();
+const DEFAULT_ANIMATION = {
+  selectionPulse: true
+};
 const GraphCanvas = memo(
   forwardRef(
     function GraphCanvas2(props, ref) {
@@ -7342,6 +7431,7 @@ const GraphCanvas = memo(
         availableSubTypes = EMPTY_SUB_TYPES,
         zIndex: zIndexEnabled = false,
         communityData: communityDataProp,
+        animationSettings = DEFAULT_ANIMATION,
         onNodeClick,
         onEdgeClick,
         onStageClick,
@@ -7472,9 +7562,21 @@ const GraphCanvas = memo(
         }),
         [isLargeGraph, zIndexEnabled]
       );
+      const edgeReducer = useCallback(
+        (_edge, data) => {
+          if (!sigmaRef.current) return data;
+          const ratio = sigmaRef.current.getCamera().ratio;
+          return { ...data, size: (data.size || 1) * ratio };
+        },
+        []
+      );
       const handleSigmaReady = useCallback(
         (sigma) => {
           sigmaRef.current = sigma;
+          sigma.setSetting(
+            "edgeReducer",
+            edgeReducer
+          );
         },
         []
       );
@@ -7618,10 +7720,16 @@ const GraphCanvas = memo(
                       layoutReady,
                       layoutConfig,
                       optimizeTick,
-                      communityAssignments: communityData.assignments,
                       onOptimizeStatus
                     }
                   ),
+                  /* @__PURE__ */ jsx(
+                    AnimationEffects,
+                    {
+                      selectedNodeId: selectedNodeId ?? null,
+                      animationSettings
+                    }
+                  ),
                   /* @__PURE__ */ jsx(SigmaRefCapture, { onReady: handleSigmaReady })
                 ]
               }