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

package/dist/opentrace-components.cjs

@@ -5605,9 +5605,10 @@ function useGraphInstance({
   const unmountedRef = t.useRef(false);
   const requestIdRef = t.useRef(0);
   const [layoutReady, setLayoutReady] = t.useState(false);
+  const flatMode = layoutConfig.flatMode ?? false;
   const structuralTypes = t.useMemo(
-    () => new Set(layoutConfig.structuralTypes),
-    [layoutConfig.structuralTypes]
+    () => flatMode ? /* @__PURE__ */ new Set() : new Set(layoutConfig.structuralTypes),
+    [layoutConfig.structuralTypes, flatMode]
   );
   t.useEffect(() => {
     graph.clear();
@@ -5671,7 +5672,7 @@ function useGraphInstance({
       });
     }
     const { assignments: communityAssignments } = communityData;
-    if (communityAssignments) {
+    if (communityAssignments && !flatMode) {
       const communityGroups = /* @__PURE__ */ new Map();
       for (const node of allNodes) {
         const cid = communityAssignments[node.id];
@@ -5719,7 +5720,7 @@ function useGraphInstance({
     const nodeIds = allNodes.map((n2) => n2.id);
     const simLinks = [];
     for (const link of allLinks) {
-      if (link.label !== layoutConfig.layoutEdgeType) continue;
+      if (!flatMode && link.label !== layoutConfig.layoutEdgeType) continue;
       const source = endpointId(link.source);
       const target = endpointId(link.target);
       if (nodeIdSet.has(source) && nodeIdSet.has(target)) {
@@ -5760,7 +5761,7 @@ function useGraphInstance({
         console.log(`[graph] layout computed for ${pos.size} nodes`);
       }
       const { assignments: assignments2 } = communityData;
-      if (assignments2 && Object.keys(assignments2).length > 0) {
+      if (!flatMode && assignments2 && Object.keys(assignments2).length > 0) {
         applySpacing(pos, assignments2, 40, 100, 50, 0.5);
         const sizeMap = /* @__PURE__ */ new Map();
         for (const sn of serializedNodes) {
@@ -7195,6 +7196,68 @@ function LayoutPipeline({
   }, [layoutReady, optimizeTick, layoutConfig, start, stop, sigma]);
   return null;
 }
+let cached$1 = null;
+function resolveLabelColor() {
+  const root = document.documentElement;
+  const key = `${root.dataset.theme ?? ""}_${root.dataset.mode ?? ""}`;
+  if (cached$1 && cached$1.key === key) return cached$1.fg;
+  const style = getComputedStyle(root);
+  const fg = style.getPropertyValue("--foreground").trim() || "#e2e8f0";
+  cached$1 = { fg, key };
+  return fg;
+}
+let renderedBoxes = [];
+let hoverBoxes = [];
+function resetLabelGrid() {
+  renderedBoxes = [];
+}
+function resetHoverGrid() {
+  hoverBoxes = [];
+}
+function overlaps(boxes, x, y, w2, h2) {
+  for (const box of boxes) {
+    if (x < box.x + box.w && x + w2 > box.x && y < box.y + box.h && y + h2 > box.y) {
+      return true;
+    }
+  }
+  return false;
+}
+function overlapsExistingHover(x, y, w2, h2) {
+  return overlaps(hoverBoxes, x, y, w2, h2);
+}
+function pushHoverBox(x, y, w2, h2) {
+  hoverBoxes.push({ x, y, w: w2, h: h2 });
+}
+function drawNodeLabel(context, data, settings) {
+  if (!data.label) return;
+  const extras = data;
+  if (extras.highlighted) return;
+  const size = settings.labelSize;
+  const font = settings.labelFont;
+  const weight = settings.labelWeight;
+  const fg = resolveLabelColor();
+  context.font = `${weight} ${size}px ${font}`;
+  const textWidth = context.measureText(data.label).width;
+  const x = data.x + data.size + 3;
+  const y = data.y + size / 3;
+  const boxX = x - 1;
+  const boxY = y - size;
+  const boxW = textWidth + 2;
+  const boxH = size + 4;
+  if (overlaps(renderedBoxes, boxX, boxY, boxW, boxH)) {
+    return;
+  }
+  renderedBoxes.push({ x: boxX, y: boxY, w: boxW, h: boxH });
+  context.save();
+  context.strokeStyle = "rgba(0,0,0,0.7)";
+  context.lineWidth = 3;
+  context.lineJoin = "round";
+  context.strokeText(data.label, x, y);
+  context.restore();
+  context.font = `${weight} ${size}px ${font}`;
+  context.fillStyle = fg;
+  context.fillText(data.label, x, y);
+}
 let _hoveredNodeKey = null;
 function setHoveredNodeKey(key) {
   _hoveredNodeKey = key;
@@ -7213,15 +7276,73 @@ function resolveThemeColors() {
   };
   return cached;
 }
+let tooltipBuffer = [];
+let tooltipContext = null;
+let flushScheduled = false;
+function flushTooltips() {
+  const ctx = tooltipContext;
+  if (!ctx || tooltipBuffer.length === 0) return;
+  const colors = resolveThemeColors();
+  for (const cmd of tooltipBuffer) {
+    const radius = 4;
+    ctx.fillStyle = colors.bg;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowBlur = 8;
+    ctx.shadowColor = "rgba(0,0,0,0.5)";
+    ctx.beginPath();
+    ctx.roundRect(cmd.x, cmd.y, cmd.w, cmd.h, radius);
+    ctx.fill();
+    if (cmd.isHovered) {
+      ctx.shadowBlur = 0;
+      ctx.strokeStyle = cmd.color;
+      ctx.lineWidth = 2;
+      ctx.stroke();
+    }
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    ctx.shadowBlur = 0;
+    const textX = cmd.x + 4;
+    const centerY = cmd.y + cmd.h / 2;
+    if (cmd.label) {
+      ctx.fillStyle = colors.fg;
+      ctx.font = `${cmd.weight} ${cmd.labelSize}px ${cmd.font}`;
+      ctx.fillText(
+        cmd.label,
+        textX,
+        centerY + (cmd.subtitle ? -cmd.lineHeight / 2 + cmd.labelSize * 0.35 : cmd.labelSize / 3)
+      );
+    }
+    if (cmd.subtitle) {
+      ctx.fillStyle = colors.muted;
+      ctx.font = `${cmd.smallSize}px ${cmd.font}`;
+      ctx.fillText(
+        cmd.subtitle,
+        textX,
+        centerY + cmd.lineHeight / 2
+      );
+    }
+  }
+  tooltipBuffer = [];
+  tooltipContext = null;
+}
+let lastHoverFrameTime = 0;
 function drawNodeHover(context, data, settings) {
-  const key = data.key;
-  if (key && _hoveredNodeKey !== null && key !== _hoveredNodeKey) return;
+  const now = performance.now();
+  if (now - lastHoverFrameTime > 8) {
+    resetHoverGrid();
+    tooltipBuffer = [];
+    lastHoverFrameTime = now;
+  }
+  tooltipContext = context;
+  const extras = data;
+  const key = extras.key;
+  const isActuallyHovered = key != null && _hoveredNodeKey != null && key === _hoveredNodeKey;
+  const isSelected = extras.borderSize != null && extras.borderSize > 0;
   const size = settings.labelSize;
   const font = settings.labelFont;
   const weight = settings.labelWeight;
-  const colors = resolveThemeColors();
   const PADDING = 4;
-  const extras = data;
   const label = typeof data.label === "string" ? data.label : typeof extras._originalLabel === "string" ? extras._originalLabel : "";
   const nodeType = extras.nodeType;
   const communityName = extras._communityName;
@@ -7235,63 +7356,58 @@ function drawNodeHover(context, data, settings) {
     subtitleWidth = context.measureText(subtitle).width;
   }
   const textWidth = Math.max(labelWidth, subtitleWidth);
-  if (textWidth === 0 && !subtitle) {
-    context.beginPath();
-    context.arc(data.x, data.y, data.size + PADDING, 0, Math.PI * 2);
-    context.closePath();
-    context.fillStyle = colors.bg;
-    context.shadowBlur = 10;
-    context.shadowColor = "rgba(0,0,0,0.5)";
-    context.fill();
-    context.shadowBlur = 0;
-    context.beginPath();
-    context.arc(data.x, data.y, data.size, 0, Math.PI * 2);
-    context.closePath();
-    context.fillStyle = data.color;
-    context.fill();
-    return;
-  }
   const boxWidth = Math.round(textWidth + 8);
   const lineHeight = size + 2;
   const lines = subtitle ? 2 : 1;
   const boxHeight = Math.round(lineHeight * lines + PADDING * 2);
-  const nodeRadius = Math.max(data.size, size / 2) + PADDING;
-  const angleRadian = Math.asin(Math.min(1, boxHeight / 2 / nodeRadius));
-  const xDelta = Math.sqrt(
-    Math.abs(Math.pow(nodeRadius, 2) - Math.pow(boxHeight / 2, 2))
-  );
-  context.fillStyle = colors.bg;
-  context.shadowOffsetX = 0;
-  context.shadowOffsetY = 2;
-  context.shadowBlur = 10;
-  context.shadowColor = "rgba(0,0,0,0.5)";
-  context.beginPath();
-  context.moveTo(data.x + xDelta, data.y + boxHeight / 2);
-  context.lineTo(data.x + nodeRadius + boxWidth, data.y + boxHeight / 2);
-  context.lineTo(data.x + nodeRadius + boxWidth, data.y - boxHeight / 2);
-  context.lineTo(data.x + xDelta, data.y - boxHeight / 2);
-  context.arc(data.x, data.y, nodeRadius, angleRadian, -angleRadian);
-  context.closePath();
-  context.fill();
-  context.shadowOffsetX = 0;
-  context.shadowOffsetY = 0;
-  context.shadowBlur = 0;
-  const textX = data.x + nodeRadius + 4;
-  if (label) {
-    context.fillStyle = colors.fg;
-    context.font = `${weight} ${size}px ${font}`;
-    context.fillText(label, textX, data.y + (subtitle ? -1 : size / 3));
-  }
-  if (subtitle) {
-    context.fillStyle = colors.muted;
-    context.font = `${smallSize}px ${font}`;
-    context.fillText(subtitle, textX, data.y + lineHeight - 2);
+  const tooltipGap = 4;
+  const tx = data.x + data.size + tooltipGap;
+  const ty = data.y - boxHeight / 2;
+  const hasTooltip = textWidth > 0 || subtitle;
+  let drawTooltip = hasTooltip;
+  const pad = 8;
+  const cullX = data.x - data.size - pad;
+  const cullY = data.y - Math.max(boxHeight / 2, data.size) - pad;
+  const cullW = data.size * 2 + boxWidth + tooltipGap + pad * 2;
+  const cullH = Math.max(boxHeight, data.size * 2) + pad * 2;
+  if (hasTooltip && !isActuallyHovered && !isSelected) {
+    if (overlapsExistingHover(cullX, cullY, cullW, cullH)) {
+      drawTooltip = false;
+    } else {
+      pushHoverBox(cullX, cullY, cullW, cullH);
+    }
+  } else if (hasTooltip) {
+    pushHoverBox(cullX, cullY, cullW, cullH);
   }
   context.beginPath();
   context.arc(data.x, data.y, data.size, 0, Math.PI * 2);
   context.closePath();
   context.fillStyle = data.color;
   context.fill();
+  if (drawTooltip) {
+    tooltipBuffer.push({
+      x: tx,
+      y: ty,
+      w: boxWidth,
+      h: boxHeight,
+      label,
+      subtitle,
+      labelSize: size,
+      smallSize,
+      font,
+      weight,
+      lineHeight,
+      color: data.color,
+      isHovered: isActuallyHovered
+    });
+  }
+  if (!flushScheduled) {
+    flushScheduled = true;
+    queueMicrotask(() => {
+      flushScheduled = false;
+      flushTooltips();
+    });
+  }
 }
 function SigmaRefCapture({
   onReady
@@ -7304,6 +7420,14 @@ function SigmaRefCapture({
       onReady(sigma);
     }
   }, [sigma, onReady]);
+  t.useEffect(() => {
+    const s = sigma;
+    const handler = () => resetLabelGrid();
+    s.on("beforeRender", handler);
+    return () => {
+      s.off("beforeRender", handler);
+    };
+  }, [sigma]);
   return null;
 }
 function GraphEventHandler({
@@ -7557,6 +7681,7 @@ const GraphCanvas = t.memo(
           labelFont: LABEL_FONT,
           labelColor: { color: LABEL_COLOR },
           labelSize: LABEL_SIZE,
+          defaultDrawNodeLabel: drawNodeLabel,
           defaultDrawNodeHover: drawNodeHover,
           allowInvalidContainer: true,
           zIndex: zIndexEnabled,
@@ -9119,6 +9244,9 @@ 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.drawNodeLabel = drawNodeLabel;
+exports.flushTooltips = flushTooltips;
+exports.resetLabelGrid = resetLabelGrid;
 exports.setHoveredNodeKey = setHoveredNodeKey;
 exports.useGraphInstance = useGraphInstance;
 exports.useGraphVisuals = useGraphVisuals;