@opentrace/components 0.1.1-pr.118.26 → 0.1.1-pr.118.3

package/dist/opentrace-components.cjs

@@ -7524,125 +7524,52 @@ const GraphCanvas = t.memo(
   )
 );
 function FilterPanel({
-  nodeTypes,
-  linkTypes,
-  hiddenNodeTypes,
-  hiddenLinkTypes,
-  subTypesByNodeType,
-  hiddenSubTypes,
-  onToggleNodeType,
-  onToggleLinkType,
-  onToggleSubType,
-  onShowAllNodes,
-  onHideAllNodes,
-  onShowAllLinks,
-  onHideAllLinks,
-  colorMode,
-  communities,
-  hiddenCommunities,
-  onToggleCommunity,
-  onShowAllCommunities,
-  onHideAllCommunities
+  title,
+  items,
+  onToggle,
+  onShowAll,
+  onHideAll,
+  indicator = "dot",
+  emptyMessage
 }) {
-  const allLinksHidden = hiddenLinkTypes.size === linkTypes.length;
-  const [expandedTypes, setExpandedTypes] = t.useState(/* @__PURE__ */ new Set());
-  const toggleExpanded = (type) => {
-    setExpandedTypes((prev) => {
+  const [expandedKeys, setExpandedKeys] = t.useState(/* @__PURE__ */ new Set());
+  const toggleExpanded = (key) => {
+    setExpandedKeys((prev) => {
       const next = new Set(prev);
-      if (next.has(type)) next.delete(type);
-      else next.add(type);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
       return next;
     });
   };
-  const getSubTypeState = t.useCallback(
-    (type, subs) => {
-      const keys = subs.map((s) => `${type}:${s.subType}`);
-      const hiddenCount = keys.filter((k) => hiddenSubTypes.has(k)).length;
-      if (hiddenCount === 0) return "all";
-      if (hiddenCount === keys.length) return "none";
-      return "some";
-    },
-    [hiddenSubTypes]
-  );
-  const allNodesHidden = nodeTypes.every(({ type }) => {
-    const subs = subTypesByNodeType.get(type);
-    if (subs && subs.length > 0) {
-      return getSubTypeState(type, subs) === "none";
+  const allHidden = items.length > 0 && items.every((item) => {
+    if (item.children && item.children.length > 0) {
+      return item.children.every((c2) => c2.hidden);
     }
-    return hiddenNodeTypes.has(type);
+    return item.hidden;
   });
-  const showCommunities = colorMode === "community" && communities && communities.length > 0 && hiddenCommunities && onToggleCommunity;
-  const allCommunitiesHidden = showCommunities && communities.every((c2) => hiddenCommunities.has(c2.communityId));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-panel", children: [
-    showCommunities && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-section", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-section-header", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-section-title", children: "Communities" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            className: "filter-toggle-all",
-            onClick: allCommunitiesHidden ? onShowAllCommunities : onHideAllCommunities,
-            children: allCommunitiesHidden ? "Show all" : "Hide all"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "filter-list", children: communities.map(({ communityId, label, count, color }) => {
-        const hidden = hiddenCommunities.has(communityId);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            className: `filter-item ${hidden ? "hidden" : ""}`,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: !hidden,
-                  onChange: () => onToggleCommunity(communityId)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-expand-spacer" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "filter-dot",
-                  style: {
-                    backgroundColor: hidden ? "var(--muted)" : color
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-type-name", children: label }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-count", children: count })
-            ]
-          },
-          communityId
-        );
-      }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-section", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-section-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-section-title", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "filter-toggle-all",
+          onClick: allHidden ? onShowAll : onHideAll,
+          children: allHidden ? "Show all" : "Hide all"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-section", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-section-header", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-section-title", children: "Node Types" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            className: "filter-toggle-all",
-            onClick: allNodesHidden ? onShowAllNodes : onHideAllNodes,
-            children: allNodesHidden ? "Show all" : "Hide all"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "filter-list", children: nodeTypes.map(({ type, count }) => {
-        const subTypes = subTypesByNodeType.get(type);
-        const hasSubTypes = subTypes && subTypes.length > 0;
-        const isExpanded = expandedTypes.has(type);
-        let hidden;
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-list", children: [
+      items.map((item) => {
+        const hasChildren = item.children && item.children.length > 0;
+        const isExpanded = expandedKeys.has(item.key);
+        let hidden = item.hidden;
         let indeterminate = false;
-        if (hasSubTypes) {
-          const state = getSubTypeState(type, subTypes);
-          hidden = state === "none";
-          indeterminate = state === "some";
-        } else {
-          hidden = hiddenNodeTypes.has(type);
+        if (hasChildren) {
+          const hiddenCount = item.children.filter((c2) => c2.hidden).length;
+          if (hiddenCount === item.children.length) hidden = true;
+          else if (hiddenCount > 0) indeterminate = true;
+          else hidden = false;
         }
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-type-group", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7658,17 +7585,17 @@ function FilterPanel({
                     ref: (el) => {
                       if (el) el.indeterminate = indeterminate;
                     },
-                    onChange: () => onToggleNodeType(type)
+                    onChange: () => onToggle(item.key)
                   }
                 ),
-                hasSubTypes ? /* @__PURE__ */ jsxRuntime.jsx(
+                hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     className: "filter-expand-btn",
                     onClick: (e2) => {
                       e2.preventDefault();
                       e2.stopPropagation();
-                      toggleExpanded(type);
+                      toggleExpanded(item.key);
                     },
                     title: isExpanded ? "Collapse" : "Expand sub-types",
                     children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -7691,111 +7618,67 @@ function FilterPanel({
                     )
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-expand-spacer" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                indicator === "line" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "filter-line",
+                    style: {
+                      backgroundColor: hidden ? "var(--muted)" : item.color
+                    }
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
                     className: "filter-dot",
                     style: {
-                      backgroundColor: hidden ? "var(--muted)" : useHighlights.getNodeColor(type)
+                      backgroundColor: hidden ? "var(--muted)" : item.color
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-type-name", children: type }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-count", children: count })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-type-name", children: item.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-count", children: item.count })
               ]
             }
           ),
-          hasSubTypes && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "filter-subtypes", children: subTypes.map(({ subType, count: subCount }) => {
-            const subKey = `${type}:${subType}`;
-            const subHidden = hiddenSubTypes.has(subKey);
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "label",
-              {
-                className: `filter-item filter-subitem ${subHidden ? "hidden" : ""}`,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: !subHidden,
-                      onChange: () => onToggleSubType(subKey)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: "filter-dot filter-dot--small",
-                      style: {
-                        backgroundColor: subHidden ? "var(--muted)" : useHighlights.getNodeColor(type),
-                        opacity: subHidden ? 1 : 0.7
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-type-name", children: subType }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-count", children: subCount })
-                ]
-              },
-              subKey
-            );
-          }) })
-        ] }, type);
-      }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-section", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-section-header", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-section-title", children: "Edges" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            className: "filter-toggle-all",
-            onClick: allLinksHidden ? onShowAllLinks : onHideAllLinks,
-            children: allLinksHidden ? "Show all" : "Hide all"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-list", children: [
-        linkTypes.map(({ type, count }) => {
-          const hidden = hiddenLinkTypes.has(type);
-          return /* @__PURE__ */ jsxRuntime.jsxs(
+          hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "filter-subtypes", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: `filter-item ${hidden ? "hidden" : ""}`,
+              className: `filter-item filter-subitem ${child.hidden ? "hidden" : ""}`,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {
                     type: "checkbox",
-                    checked: !hidden,
-                    onChange: () => onToggleLinkType(type)
+                    checked: !child.hidden,
+                    onChange: () => onToggle(child.key)
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
-                    className: "filter-line",
+                    className: "filter-dot filter-dot--small",
                     style: {
-                      backgroundColor: hidden ? "var(--muted)" : useHighlights.getLinkColor(type)
+                      backgroundColor: child.hidden ? "var(--muted)" : child.color,
+                      opacity: child.hidden ? 1 : 0.7
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-type-name", children: type.toLowerCase() }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-count", children: count })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-type-name", children: child.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-count", children: child.count })
               ]
             },
-            type
-          );
-        }),
-        linkTypes.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-empty", children: "No edges" })
-      ] })
+            child.key
+          )) })
+        ] }, item.key);
+      }),
+      items.length === 0 && emptyMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-empty", children: emptyMessage })
     ] })
   ] });
 }
 const DEFAULT_MAX_VISIBLE = 5;
 function GraphLegend({
-  colorMode,
-  legendItems,
-  communityLegendItems,
-  legendLinkItems,
+  items,
+  linkItems = [],
   maxVisible = DEFAULT_MAX_VISIBLE
 }) {
   const [showOverflow, setShowOverflow] = t.useState(false);
@@ -7810,41 +7693,15 @@ function GraphLegend({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [showOverflow]);
-  const nodeItems = [];
-  if (colorMode === "community") {
-    for (const { label, count, color } of communityLegendItems) {
-      nodeItems.push({ key: `c:${label}`, label, count, color, shape: "dot" });
-    }
-  } else {
-    for (const { type, count, color } of legendItems) {
-      nodeItems.push({
-        key: `n:${type}`,
-        label: type,
-        count,
-        color,
-        shape: "dot"
-      });
-    }
-  }
-  const linkItems = [];
-  for (const { type, count, color } of legendLinkItems) {
-    linkItems.push({
-      key: `l:${type}`,
-      label: type,
-      count,
-      color,
-      shape: "line"
-    });
-  }
-  const visibleNodes = nodeItems.slice(0, maxVisible);
-  const overflowNodes = nodeItems.slice(maxVisible);
+  const visibleItems = items.slice(0, maxVisible);
+  const overflowItems = items.slice(maxVisible);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "legend", ref: popoverRef, children: [
-    visibleNodes.map(({ key, label, count, color }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "legend-item", title: label, children: [
+    visibleItems.map(({ label, count, color }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "legend-item", title: label, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "legend-dot", style: { backgroundColor: color } }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "legend-count", children: count }),
       label.length > 10 ? label.slice(0, 10) + "…" : label
-    ] }, key)),
-    overflowNodes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    ] }, label)),
+    overflowItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -7852,12 +7709,12 @@ function GraphLegend({
           onClick: () => setShowOverflow((v2) => !v2),
           children: [
             "+",
-            overflowNodes.length,
+            overflowItems.length,
             " more"
           ]
         }
       ),
-      showOverflow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legend-popover", children: nodeItems.map(({ key, label, count, color }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "legend-item", children: [
+      showOverflow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legend-popover", children: items.map(({ label, count, color }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "legend-item", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -7867,11 +7724,11 @@ function GraphLegend({
         ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "legend-count", children: count }),
         label
-      ] }, key)) })
+      ] }, label)) })
     ] }),
     linkItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "legend-divider" }),
-      linkItems.map(({ key, label, count, color }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "legend-item", children: [
+      linkItems.map(({ label, count, color }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "legend-item", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -7881,7 +7738,7 @@ function GraphLegend({
         ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "legend-count", children: count }),
         label
-      ] }, key))
+      ] }, label))
     ] })
   ] });
 }