@opentrace/components 0.1.1-pr.118.8 → 0.1.1-rc.14

package/dist/components.css

@@ -215,6 +215,51 @@
  * limitations under the License.
  */
 
+.graph-badge {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  background: color-mix(in oklch, var(--background) 85%, transparent);
+  backdrop-filter: blur(8px);
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 14px;
+  border-radius: calc(var(--radius) + 2px);
+  border: 1px solid color-mix(in oklch, var(--border) 25%, transparent);
+  pointer-events: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.graph-badge-rendered {
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+.graph-badge-total {
+  color: var(--muted-foreground);
+  font-weight: 400;
+}
+
+.graph-badge-sep {
+  margin: 0 3px;
+}
+/*
+ * Copyright 2026 OpenTrace Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /* Legend */
 .legend {
   position: absolute;

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-Xr_gYCcU.cjs");
 var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 function _toPrimitive$1(t2, r) {
   if ("object" != typeof t2 || !t2) return t2;
@@ -5547,21 +5547,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) {
@@ -7675,6 +7678,30 @@ function FilterPanel({
     ] })
   ] });
 }
+function GraphBadge({
+  nodeCount,
+  edgeCount,
+  totalNodes,
+  totalEdges
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "graph-badge", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "graph-badge-rendered", children: nodeCount }),
+    totalNodes != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "graph-badge-total", children: [
+      "(",
+      totalNodes,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "nodes" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "graph-badge-sep", children: "·" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "graph-badge-rendered", children: edgeCount }),
+    totalEdges != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "graph-badge-total", children: [
+      "(",
+      totalEdges,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "edges" })
+  ] });
+}
 const DEFAULT_MAX_VISIBLE = 5;
 function GraphLegend({
   items,
@@ -8662,6 +8689,7 @@ exports.FA2_ENABLED = FA2_ENABLED;
 exports.FA2_GRAVITY = FA2_GRAVITY;
 exports.FA2_SCALING_RATIO = FA2_SCALING_RATIO;
 exports.FilterPanel = FilterPanel;
+exports.GraphBadge = GraphBadge;
 exports.GraphCanvas = GraphCanvas;
 exports.GraphLegend = GraphLegend;
 exports.LABEL_COLOR = LABEL_COLOR;