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

package/dist/opentrace-components.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const t = require("react");
-const useHighlights = require("./useHighlights-D6Jl6Woe.cjs");
+const useHighlights = require("./useHighlights-fRWg-A_c.cjs");
 var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 function _toPrimitive$1(t2, r) {
   if ("object" != typeof t2 || !t2) return t2;
@@ -5253,7 +5253,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:
@@ -5288,8 +5288,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;
@@ -5319,6 +5320,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
@@ -5369,6 +5371,13 @@ function useGraphInstance({
     if (allNodes.length === 0) return;
     const { assignments, colorMap, names } = communityData;
     const { getNodeColor, getLinkColor, getCommunityColor } = layoutConfig;
+    const degreeMap = /* @__PURE__ */ new Map();
+    for (const link of allLinks) {
+      const s = endpointId(link.source);
+      const t2 = endpointId(link.target);
+      degreeMap.set(s, (degreeMap.get(s) || 0) + 1);
+      degreeMap.set(t2, (degreeMap.get(t2) || 0) + 1);
+    }
     const nodeIdSet = /* @__PURE__ */ new Set();
     const serializedNodes = allNodes.map((node) => {
       nodeIdSet.add(node.id);
@@ -5376,13 +5385,17 @@ function useGraphInstance({
       const commColor = getCommunityColor(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,
@@ -5547,21 +5560,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 = getLinkColor(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 = getLinkColor(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) {
@@ -6786,7 +6802,7 @@ const e = /* @__PURE__ */ useHighlights.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;
@@ -6803,21 +6819,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) {
@@ -7018,8 +7042,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++) {
@@ -7095,6 +7120,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;
@@ -7110,7 +7139,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;
@@ -7210,18 +7240,35 @@ function GraphEventHandler({
   t.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;
@@ -7290,6 +7337,12 @@ const GraphCanvas = t.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,
@@ -7299,7 +7352,8 @@ const GraphCanvas = t.memo(
       } = props;
       const sigmaRef = t.useRef(null);
       const [optimizeTick, setOptimizeTick] = t.useState(0);
-      const communityData = useHighlights.useCommunities(nodes, links, layoutConfig);
+      const internalCommunityData = useHighlights.useCommunities(nodes, links, layoutConfig);
+      const communityData = communityDataProp ?? internalCommunityData;
       const filterState = t.useMemo(
         () => ({
           hiddenNodeTypes,
@@ -7320,10 +7374,10 @@ const GraphCanvas = t.memo(
         layoutReady,
         filterState,
         communityData.assignments,
-        EMPTY_SUB_TYPES,
+        availableSubTypes,
         getSubType
       );
-      const highlights = useHighlights.useHighlights(
+      const internalHighlights = useHighlights.useHighlights(
         graph,
         layoutReady,
         nodes,
@@ -7333,6 +7387,9 @@ const GraphCanvas = t.memo(
         hops,
         filterState
       );
+      const effectiveHighlightNodes = highlightNodesProp ?? internalHighlights.highlightNodes;
+      const effectiveHighlightLinks = highlightLinksProp ?? internalHighlights.highlightLinks;
+      const effectiveLabelNodes = labelNodesProp ?? internalHighlights.labelNodes;
       const degreeMap = t.useMemo(() => {
         const map = /* @__PURE__ */ new Map();
         links.forEach((l) => {
@@ -7347,12 +7404,18 @@ const GraphCanvas = t.memo(
       const visualState = t.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,
@@ -7362,6 +7425,34 @@ const GraphCanvas = t.memo(
         degreeMap,
         isLargeGraph
       );
+      t.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 = t.useMemo(
         () => ({
           defaultNodeType: "circle",
@@ -7377,9 +7468,10 @@ const GraphCanvas = t.memo(
           labelSize: LABEL_SIZE,
           defaultDrawNodeHover: drawNodeHover,
           allowInvalidContainer: true,
+          zIndex: zIndexEnabled,
           zoomToSizeRatioFunction: (ratio) => Math.pow(ratio, ZOOM_SIZE_EXPONENT)
         }),
-        [isLargeGraph]
+        [isLargeGraph, zIndexEnabled]
       );
       const handleSigmaReady = t.useCallback(
         (sigma) => {
@@ -7446,6 +7538,24 @@ const GraphCanvas = t.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]
@@ -8686,6 +8796,7 @@ exports.FA2_ENABLED = FA2_ENABLED;
 exports.FA2_GRAVITY = FA2_GRAVITY;
 exports.FA2_SCALING_RATIO = FA2_SCALING_RATIO;
 exports.FilterPanel = FilterPanel;
+exports.Graph = GraphCanvas;
 exports.GraphBadge = GraphBadge;
 exports.GraphCanvas = GraphCanvas;
 exports.GraphLegend = GraphLegend;
@@ -8702,6 +8813,7 @@ exports.NODE_SIZE_MIN = NODE_SIZE_MIN;
 exports.NODE_SIZE_MULTIPLIERS = NODE_SIZE_MULTIPLIERS;
 exports.ZOOM_SIZE_EXPONENT = ZOOM_SIZE_EXPONENT;
 exports.drawNodeHover = drawNodeHover;
+exports.setHoveredNodeKey = setHoveredNodeKey;
 exports.useGraphInstance = useGraphInstance;
 exports.useGraphVisuals = useGraphVisuals;
 exports.zoomToFit = zoomToFit;