@opentrace/components 0.1.1-rc.11 → 0.1.1-rc.30

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-BHlafcBH.js";
-import { s } from "./useHighlights-BHlafcBH.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-DbMfb0-p.js";
+import { s } from "./useHighlights-DbMfb0-p.js";
 function _toPrimitive$1(t2, r) {
   if ("object" != typeof t2 || !t2) return t2;
   var e2 = t2[Symbol.toPrimitive];
@@ -5251,7 +5251,7 @@ createEdgeCurveProgram({
 });
 const NODE_SIZE_MIN = 2;
 const NODE_SIZE_MAX = 8;
-const NODE_SIZE_DEGREE_SCALE = 1.1;
+const NODE_SIZE_DEGREE_SCALE = 1;
 const NODE_SIZE_MULTIPLIERS = {
   Repository: 1,
   // All other STRUCTURAL_TYPES default to this:
@@ -5286,8 +5286,9 @@ const FA2_ADJUST_SIZES = true;
 const FA2_DURATION = 3e3;
 const NOVERLAP_MAX_ITERATIONS = 50;
 const NOVERLAP_RATIO = 1.5;
-const NOVERLAP_MARGIN = 10;
+const NOVERLAP_MARGIN = 25;
 const NOVERLAP_EXPANSION = 1.5;
+const NOVERLAP_COMMUNITY_ITERATIONS = 20;
 const EDGE_PROGRAM_THRESHOLD = 5e4;
 const LABEL_RENDERED_SIZE_THRESHOLD = 8;
 const LABEL_SIZE = 12;
@@ -5317,6 +5318,7 @@ const DEFAULT_LAYOUT_CONFIG = {
   noverlapRatio: NOVERLAP_RATIO,
   noverlapMargin: NOVERLAP_MARGIN,
   noverlapExpansion: NOVERLAP_EXPANSION,
+  noverlapCommunityIterations: NOVERLAP_COMMUNITY_ITERATIONS,
   louvainResolution: LOUVAIN_RESOLUTION,
   edgeProgramThreshold: 5e4,
   // Graph structure
@@ -5367,6 +5369,13 @@ function useGraphInstance({
     if (allNodes.length === 0) return;
     const { assignments, colorMap, names } = communityData;
     const { getNodeColor: getNodeColor2, getLinkColor: getLinkColor2, getCommunityColor: getCommunityColor2 } = layoutConfig;
+    const degreeMap = /* @__PURE__ */ new Map();
+    for (const link of allLinks) {
+      const s2 = endpointId(link.source);
+      const t2 = endpointId(link.target);
+      degreeMap.set(s2, (degreeMap.get(s2) || 0) + 1);
+      degreeMap.set(t2, (degreeMap.get(t2) || 0) + 1);
+    }
     const nodeIdSet = /* @__PURE__ */ new Set();
     const serializedNodes = allNodes.map((node) => {
       nodeIdSet.add(node.id);
@@ -5374,13 +5383,17 @@ function useGraphInstance({
       const commColor = getCommunityColor2(assignments, colorMap, node.id);
       const cid = assignments[node.id];
       const commName = cid !== void 0 ? names.get(cid) : void 0;
+      const degree = degreeMap.get(node.id) || 0;
+      const size = nodeSize(degree, node.type, structuralTypes);
       return {
         key: node.id,
         attributes: {
           label: node.name || node.id,
+          _originalLabel: node.name || node.id,
           x: 0,
           y: 0,
-          size: nodeSize(0, node.type, structuralTypes),
+          size,
+          _baseSize: size,
           nodeType: node.type,
           _graphNode: node,
           _typeColor: typeColor,
@@ -5545,21 +5558,24 @@ function useGraphVisuals(graph, layoutReady, visualState, layoutConfig, _degreeM
       return attrs;
     });
     const defaultEdgeSize = isLargeGraph ? EDGE_SIZE_DEFAULT_LINE : EDGE_SIZE_DEFAULT;
-    graph.updateEachEdgeAttributes((_id, attrs, source, target) => {
-      const linkKey = `${source}-${target}`;
-      const isHighlighted = highlightLinks.has(linkKey);
-      const baseColor = getLinkColor2(attrs.label);
-      if (hasHighlight) {
-        attrs.color = isHighlighted ? baseColor : dimColor(baseColor, EDGE_OPACITY_DIMMED);
-        attrs.size = isHighlighted ? EDGE_SIZE_HIGHLIGHTED : EDGE_SIZE_DIMMED;
-        attrs.zIndex = isHighlighted ? 1 : 0;
-      } else {
-        attrs.color = dimColor(baseColor, EDGE_OPACITY_DEFAULT);
-        attrs.size = defaultEdgeSize;
-        attrs.zIndex = 0;
-      }
-      return attrs;
-    });
+    graph.updateEachEdgeAttributes(
+      (_id, attrs, source, target) => {
+        const linkKey = `${source}-${target}`;
+        const isHighlighted = highlightLinks.has(linkKey);
+        const baseColor = getLinkColor2(attrs.label);
+        if (hasHighlight) {
+          attrs.color = isHighlighted ? baseColor : dimColor(baseColor, EDGE_OPACITY_DIMMED);
+          attrs.size = isHighlighted ? EDGE_SIZE_HIGHLIGHTED : EDGE_SIZE_DIMMED;
+          attrs.zIndex = isHighlighted ? 1 : 0;
+        } else {
+          attrs.color = dimColor(baseColor, EDGE_OPACITY_DEFAULT);
+          attrs.size = defaultEdgeSize;
+          attrs.zIndex = 0;
+        }
+        return attrs;
+      },
+      { attributes: ["zIndex"] }
+    );
   }, [graph, layoutReady, visualState, layoutConfig, isLargeGraph]);
 }
 function c(r, n2) {
@@ -6784,7 +6800,7 @@ const e = /* @__PURE__ */ getDefaultExportFromCjs(workerExports);
 function n(t2 = {}) {
   return c(e, t2);
 }
-function zoomToNodes(sigma, nodeIds, duration = 600, padding = 0.1) {
+function zoomToNodes(sigma, nodeIds, duration = 600, padding = 0.2) {
   let minX = Infinity;
   let maxX = -Infinity;
   let minY = Infinity;
@@ -6801,21 +6817,29 @@ function zoomToNodes(sigma, nodeIds, duration = 600, padding = 0.1) {
   }
   if (count === 0) return;
   const camera = sigma.getCamera();
-  if (count === 1 || maxX - minX < 1 && maxY - minY < 1) {
-    camera.animate(
-      { x: (minX + maxX) / 2, y: (minY + maxY) / 2, ratio: 0.1 },
-      { duration }
-    );
-    return;
-  }
   const cx = (minX + maxX) / 2;
   const cy = (minY + maxY) / 2;
+  if (count === 1 || maxX - minX < 1e-3 && maxY - minY < 1e-3) {
+    camera.animate({ x: cx, y: cy, ratio: 0.1 }, { duration });
+    return;
+  }
+  const refState = { x: 0.5, y: 0.5, ratio: 1, angle: 0 };
   const { width, height } = sigma.getDimensions();
-  const graphWidth = maxX - minX;
-  const graphHeight = maxY - minY;
-  const ratioX = graphWidth / (width * (1 - padding * 2));
-  const ratioY = graphHeight / (height * (1 - padding * 2));
-  const ratio = Math.max(ratioX, ratioY, 0.01);
+  const topLeft = sigma.viewportToFramedGraph(
+    { x: 0, y: 0 },
+    { cameraState: refState }
+  );
+  const bottomRight = sigma.viewportToFramedGraph(
+    { x: width, y: height },
+    { cameraState: refState }
+  );
+  const fullW = Math.abs(bottomRight.x - topLeft.x);
+  const fullH = Math.abs(topLeft.y - bottomRight.y);
+  const bboxW = maxX - minX;
+  const bboxH = maxY - minY;
+  const scaleX = fullW > 0 ? bboxW / (fullW * (1 - 2 * padding)) : 1;
+  const scaleY = fullH > 0 ? bboxH / (fullH * (1 - 2 * padding)) : 1;
+  const ratio = Math.max(Math.max(scaleX, scaleY), 0.01);
   camera.animate({ x: cx, y: cy, ratio }, { duration });
 }
 function zoomToFit(sigma, duration = 400) {
@@ -7016,8 +7040,9 @@ function LayoutPipeline({
         });
       }
       const margin = layoutConfig.noverlapMargin * scale2;
+      const iters = layoutConfig.noverlapCommunityIterations ?? 20;
       const nodeArr = [...subGraph.entries()];
-      for (let iter = 0; iter < 10; iter++) {
+      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++) {
@@ -7093,6 +7118,10 @@ function LayoutPipeline({
   }, [layoutReady, optimizeTick, layoutConfig, start, stop, sigma]);
   return null;
 }
+let _hoveredNodeKey = null;
+function setHoveredNodeKey(key) {
+  _hoveredNodeKey = key;
+}
 let cached = null;
 function resolveThemeColors() {
   const root = document.documentElement;
@@ -7108,7 +7137,8 @@ function resolveThemeColors() {
   return cached;
 }
 function drawNodeHover(context, data, settings) {
-  data.key;
+  const key = data.key;
+  if (key && _hoveredNodeKey !== null && key !== _hoveredNodeKey) return;
   const size = settings.labelSize;
   const font = settings.labelFont;
   const weight = settings.labelWeight;
@@ -7208,18 +7238,35 @@ function GraphEventHandler({
   useEffect(() => {
     const container = sigma.getContainer();
     const graph = sigma.getGraph();
+    const mouseCanvas = container.querySelector(
+      ".sigma-mouse"
+    );
+    let overNode = false;
+    let overEdge = false;
+    function updateCursor() {
+      const value = overNode || overEdge ? "pointer" : "grab";
+      container.style.cursor = value;
+      if (mouseCanvas) mouseCanvas.style.cursor = value;
+    }
+    updateCursor();
     const handlers = {
-      enterNode: () => {
-        container.style.cursor = "pointer";
+      enterNode: ({ node }) => {
+        setHoveredNodeKey(node);
+        overNode = true;
+        updateCursor();
       },
       leaveNode: () => {
-        container.style.cursor = "default";
+        setHoveredNodeKey(null);
+        overNode = false;
+        updateCursor();
       },
       enterEdge: () => {
-        container.style.cursor = "pointer";
+        overEdge = true;
+        updateCursor();
       },
       leaveEdge: () => {
-        container.style.cursor = "default";
+        overEdge = false;
+        updateCursor();
       },
       clickNode: ({ node }) => {
         if (!onNodeClick) return;
@@ -7288,6 +7335,12 @@ const GraphCanvas = memo(
         selectedNodeId = null,
         hops = 2,
         getSubType = defaultGetSubType,
+        highlightNodes: highlightNodesProp,
+        highlightLinks: highlightLinksProp,
+        labelNodes: labelNodesProp,
+        availableSubTypes = EMPTY_SUB_TYPES,
+        zIndex: zIndexEnabled = false,
+        communityData: communityDataProp,
         onNodeClick,
         onEdgeClick,
         onStageClick,
@@ -7297,7 +7350,8 @@ const GraphCanvas = memo(
       } = props;
       const sigmaRef = useRef(null);
       const [optimizeTick, setOptimizeTick] = useState(0);
-      const communityData = useCommunities(nodes, links, layoutConfig);
+      const internalCommunityData = useCommunities(nodes, links, layoutConfig);
+      const communityData = communityDataProp ?? internalCommunityData;
       const filterState = useMemo(
         () => ({
           hiddenNodeTypes,
@@ -7318,10 +7372,10 @@ const GraphCanvas = memo(
         layoutReady,
         filterState,
         communityData.assignments,
-        EMPTY_SUB_TYPES,
+        availableSubTypes,
         getSubType
       );
-      const highlights = useHighlights(
+      const internalHighlights = useHighlights(
         graph,
         layoutReady,
         nodes,
@@ -7331,6 +7385,9 @@ const GraphCanvas = memo(
         hops,
         filterState
       );
+      const effectiveHighlightNodes = highlightNodesProp ?? internalHighlights.highlightNodes;
+      const effectiveHighlightLinks = highlightLinksProp ?? internalHighlights.highlightLinks;
+      const effectiveLabelNodes = labelNodesProp ?? internalHighlights.labelNodes;
       const degreeMap = useMemo(() => {
         const map = /* @__PURE__ */ new Map();
         links.forEach((l) => {
@@ -7345,12 +7402,18 @@ const GraphCanvas = memo(
       const visualState = useMemo(
         () => ({
           colorMode,
-          highlightNodes: highlights.highlightNodes,
-          highlightLinks: highlights.highlightLinks,
-          labelNodes: highlights.labelNodes,
+          highlightNodes: effectiveHighlightNodes,
+          highlightLinks: effectiveHighlightLinks,
+          labelNodes: effectiveLabelNodes,
           selectedNodeId: selectedNodeId ?? null
         }),
-        [colorMode, highlights, selectedNodeId]
+        [
+          colorMode,
+          effectiveHighlightNodes,
+          effectiveHighlightLinks,
+          effectiveLabelNodes,
+          selectedNodeId
+        ]
       );
       useGraphVisuals(
         graph,
@@ -7360,6 +7423,34 @@ const GraphCanvas = memo(
         degreeMap,
         isLargeGraph
       );
+      useEffect(() => {
+        if (!zIndexEnabled) return;
+        const container = sigmaRef.current?.getContainer?.();
+        if (!container) return;
+        const layers = [
+          "sigma-edges",
+          "sigma-edgeLabels",
+          "sigma-nodes",
+          "sigma-labels",
+          "sigma-hovers",
+          "sigma-hoverNodes",
+          "sigma-mouse"
+        ];
+        const els = layers.map(
+          (cls) => container.querySelector(`.${cls}`)
+        );
+        const hasSelection = effectiveHighlightNodes.size > 0;
+        if (hasSelection) {
+          const zMap = [2, 3, 1, 4, 6, 5, 7];
+          els.forEach((el, i) => {
+            if (el) el.style.zIndex = String(zMap[i]);
+          });
+        } else {
+          els.forEach((el) => {
+            if (el) el.style.zIndex = "";
+          });
+        }
+      }, [zIndexEnabled, effectiveHighlightNodes]);
       const sigmaSettings = useMemo(
         () => ({
           defaultNodeType: "circle",
@@ -7375,9 +7466,10 @@ const GraphCanvas = memo(
           labelSize: LABEL_SIZE,
           defaultDrawNodeHover: drawNodeHover,
           allowInvalidContainer: true,
+          zIndex: zIndexEnabled,
           zoomToSizeRatioFunction: (ratio) => Math.pow(ratio, ZOOM_SIZE_EXPONENT)
         }),
-        [isLargeGraph]
+        [isLargeGraph, zIndexEnabled]
       );
       const handleSigmaReady = useCallback(
         (sigma) => {
@@ -7444,6 +7536,24 @@ const GraphCanvas = memo(
           },
           optimize: () => {
             setOptimizeTick((t2) => t2 + 1);
+          },
+          zoomIn: (duration = 300) => {
+            if (sigmaRef.current) {
+              const camera = sigmaRef.current.getCamera();
+              camera.animatedZoom({ duration });
+            }
+          },
+          zoomOut: (duration = 300) => {
+            if (sigmaRef.current) {
+              const camera = sigmaRef.current.getCamera();
+              camera.animatedUnzoom({ duration });
+            }
+          },
+          resetCamera: (duration = 400) => {
+            if (sigmaRef.current) {
+              const camera = sigmaRef.current.getCamera();
+              camera.animatedReset({ duration });
+            }
           }
         }),
         [nodes, links, hops, onNodeClick]
@@ -8676,6 +8786,7 @@ export {
   FA2_GRAVITY,
   FA2_SCALING_RATIO,
   FilterPanel,
+  GraphCanvas as Graph,
   GraphBadge,
   GraphCanvas,
   GraphLegend,
@@ -8697,6 +8808,7 @@ export {
   getCommunityColor,
   getLinkColor,
   getNodeColor,
+  setHoveredNodeKey,
   s as shouldHideNode,
   useCommunities,
   useGraphFilters,