@opentrace/components 0.1.0 → 0.1.1-pr.110.9

package/dist/opentrace-components.cjs

@@ -5262,12 +5262,13 @@ const NODE_SIZE_MULTIPLIERS = {
 };
 const EDGE_SIZE_DEFAULT = 1;
 const EDGE_SIZE_DEFAULT_LINE = 2;
-const EDGE_SIZE_HIGHLIGHTED = 2.5;
+const EDGE_SIZE_HIGHLIGHTED = 1.25;
 const EDGE_SIZE_DIMMED = 0.5;
 const EDGE_OPACITY_DEFAULT = 0.6;
 const EDGE_OPACITY_HIGHLIGHTED = 1;
 const EDGE_OPACITY_DIMMED = 0.05;
 const NODE_OPACITY_DIMMED = 0.15;
+const NODE_SIZE_DIMMED_SCALE = 0.35;
 const ZOOM_SIZE_EXPONENT = 0.9;
 const FORCE_LINK_DISTANCE = 200;
 const FORCE_CHARGE_STRENGTH = -200;
@@ -5533,10 +5534,16 @@ function useGraphVisuals(graph, layoutReady, visualState, layoutConfig, _degreeM
       const isSelected = _id === selectedNodeId;
       const showLabel = !hasHighlight || labelNodes.has(_id);
       const baseColor = (colorMode === "community" ? attrs._communityColor : attrs._typeColor) ?? getNodeColor(attrs.nodeType);
+      const baseSize = attrs._baseSize ?? attrs.size;
+      const originalLabel = attrs._originalLabel ?? attrs.label;
       attrs.color = isHighlighted ? baseColor : dimColor(baseColor, NODE_OPACITY_DIMMED);
+      attrs.size = hasHighlight && !isHighlighted ? baseSize * NODE_SIZE_DIMMED_SCALE : baseSize;
       attrs.borderColor = isSelected ? baseColor : void 0;
       attrs.borderSize = isSelected ? 3 : 0;
+      attrs.label = hasHighlight && !isHighlighted ? null : originalLabel;
       attrs.forceLabel = showLabel && hasHighlight;
+      attrs.zIndex = isSelected ? 2 : isHighlighted && hasHighlight ? 1 : 0;
+      attrs.highlighted = hasHighlight && isHighlighted;
       return attrs;
     });
     const defaultEdgeSize = isLargeGraph ? EDGE_SIZE_DEFAULT_LINE : EDGE_SIZE_DEFAULT;
@@ -5547,9 +5554,11 @@ function useGraphVisuals(graph, layoutReady, visualState, layoutConfig, _degreeM
       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;
     });
@@ -7101,13 +7110,14 @@ function resolveThemeColors() {
   return cached;
 }
 function drawNodeHover(context, data, settings) {
+  data.key;
   const size = settings.labelSize;
   const font = settings.labelFont;
   const weight = settings.labelWeight;
   const colors = resolveThemeColors();
   const PADDING = 4;
-  const label = typeof data.label === "string" ? data.label : "";
   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;
   const subtitle = [nodeType, communityName].filter(Boolean).join(" · ");