@industry-theme/principal-view-panels 0.12.52 → 0.12.53

package/dist/panels/StoryboardListPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAsE9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAsoCvE,CAAC"}
+{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAsE9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAwoCvE,CAAC"}

package/dist/panels.bundle.js

@@ -86460,7 +86460,7 @@ function hexToLightColor(hexColor, lightness = 0.88) {
 const CustomNode = ({ data, selected: selected2, dragging }) => {
   var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const { theme: theme2 } = useTheme();
-  const { onNodeResizeEnd } = useGraphEdit();
+  const { onNodeResizeEnd, onToggleNodeHidden, onHideUnconnectedNodes } = useGraphEdit();
   const nodeId = useNodeId();
   const [isHovered, setIsHovered] = useState(false);
   const nodeRef = useRef(null);
@@ -86490,6 +86490,17 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       });
     }
   }, [nodeId, onNodeResizeEnd]);
+  const handleMouseDown = useCallback((event) => {
+    if ((event.metaKey || event.ctrlKey) && nodeId) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.shiftKey && onHideUnconnectedNodes) {
+        onHideUnconnectedNodes(nodeId);
+      } else if (onToggleNodeHidden) {
+        onToggleNodeHidden(nodeId);
+      }
+    }
+  }, [nodeId, onToggleNodeHidden, onHideUnconnectedNodes]);
   const showTooltip = isHovered && !dragging && shiftKeyPressed || !editable && !!selected2;
   const otelInfo = nodeData == null ? void 0 : nodeData.otel;
   const description = nodeData == null ? void 0 : nodeData.description;
@@ -86910,7 +86921,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     height: "100%",
     boxShadow: isHighlighted ? `0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)` : selected2 ? `0 0 0 2px ${strokeColor}` : "none",
     transition: "box-shadow 0.2s ease"
-  }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: hexagonBorderStyle, className: animationClass, children: jsxs("div", { style: hexagonInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
+  }, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: hexagonBorderStyle, className: animationClass, children: jsxs("div", { style: hexagonInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
     fontSize: theme2.fontSizes[0],
     fontFamily: theme2.fonts.body,
     backgroundColor: color2,
@@ -86929,7 +86940,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     height: "100%",
     boxShadow: isHighlighted ? `0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)` : selected2 ? `0 0 0 2px ${strokeColor}` : "none",
     transition: "box-shadow 0.2s ease"
-  }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: diamondBorderStyle, className: animationClass, children: jsxs("div", { style: diamondInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
+  }, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: diamondBorderStyle, className: animationClass, children: jsxs("div", { style: diamondInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
     fontSize: theme2.fontSizes[0],
     fontFamily: theme2.fonts.body,
     backgroundColor: color2,
@@ -86942,7 +86953,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     fontFamily: theme2.fonts.body,
     color: "#D0021B",
     fontWeight: theme2.fontWeights.bold
-  }, children: "⚠️" })] }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: otelInfo, sources, references, visible: showTooltip, nodeRef })] }) : jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: getShapeStyles(), className: animationClass, children: jsxs("div", { style: {
+  }, children: "⚠️" })] }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: otelInfo, sources, references, visible: showTooltip, nodeRef })] }) : jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: getShapeStyles(), className: animationClass, children: jsxs("div", { style: {
     ...isGroup ? { width: "100%" } : {}
   }, children: [isGroup ? jsxs("div", { style: {
     display: "flex",
@@ -87527,9 +87538,57 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       return { ...prev, dimensionChanges: newDimensions };
     });
   }, [editable, updateEditState, pushHistory]);
+  const handleToggleNodeHidden = useCallback((nodeId) => {
+    hidingNodeRef.current = true;
+    setHiddenNodeIds((prev) => {
+      const next2 = new Set(prev);
+      if (next2.has(nodeId)) {
+        next2.delete(nodeId);
+      } else {
+        next2.add(nodeId);
+      }
+      return next2;
+    });
+    setTimeout(() => {
+      hidingNodeRef.current = false;
+    }, 0);
+  }, []);
+  const handleHideUnconnectedNodes = useCallback((nodeId) => {
+    hidingNodeRef.current = true;
+    const connectedNodeIds = /* @__PURE__ */ new Set([nodeId]);
+    for (const edge of localEdges) {
+      if (edge.from === nodeId) {
+        connectedNodeIds.add(edge.to);
+      } else if (edge.to === nodeId) {
+        connectedNodeIds.add(edge.from);
+      }
+    }
+    const unconnectedNodeIds = localNodes.map((n) => n.id).filter((id2) => !connectedNodeIds.has(id2));
+    setHiddenNodeIds((prev) => {
+      const allUnconnectedHidden = unconnectedNodeIds.every((id2) => prev.has(id2));
+      if (allUnconnectedHidden) {
+        const next2 = new Set(prev);
+        for (const id2 of unconnectedNodeIds) {
+          next2.delete(id2);
+        }
+        return next2;
+      } else {
+        const next2 = new Set(prev);
+        for (const id2 of unconnectedNodeIds) {
+          next2.add(id2);
+        }
+        return next2;
+      }
+    });
+    setTimeout(() => {
+      hidingNodeRef.current = false;
+    }, 0);
+  }, [localEdges, localNodes]);
   const graphEditContextValue = useMemo(() => ({
-    onNodeResizeEnd: handleNodeResizeEnd
-  }), [handleNodeResizeEnd]);
+    onNodeResizeEnd: handleNodeResizeEnd,
+    onToggleNodeHidden: handleToggleNodeHidden,
+    onHideUnconnectedNodes: handleHideUnconnectedNodes
+  }), [handleNodeResizeEnd, handleToggleNodeHidden, handleHideUnconnectedNodes]);
   const detectAlignmentGuides = useCallback((draggingNodeId, nodes2) => {
     const threshold = 5;
     const guides = [];
@@ -87594,19 +87653,11 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     if (event.metaKey || event.ctrlKey) {
       event.preventDefault();
       event.stopPropagation();
-      hidingNodeRef.current = true;
-      setHiddenNodeIds((prev) => {
-        const next2 = new Set(prev);
-        if (next2.has(node2.id)) {
-          next2.delete(node2.id);
-        } else {
-          next2.add(node2.id);
-        }
-        return next2;
-      });
-      setTimeout(() => {
-        hidingNodeRef.current = false;
-      }, 0);
+      if (event.shiftKey) {
+        handleHideUnconnectedNodes(node2.id);
+      } else {
+        handleToggleNodeHidden(node2.id);
+      }
       return;
     }
     if (event.shiftKey) {
@@ -87653,7 +87704,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     if (onNodeClickProp) {
       onNodeClickProp(node2.id, event);
     }
-  }, [selectedNodeIds, onNodeClickProp, editable]);
+  }, [selectedNodeIds, onNodeClickProp, editable, handleToggleNodeHidden, handleHideUnconnectedNodes]);
   const lastFittedNodeRef = useRef(null);
   const onNodeDoubleClick = useCallback((event, node2) => {
     var _a, _b, _c, _d;
@@ -88036,6 +88087,18 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       selected: selectedNodeIds.has(localNode.id)
     })));
   }, [editable, selectedNodeIds]);
+  const prevHiddenNodeIdsRef = useRef(hiddenNodeIds);
+  useEffect(() => {
+    if (!editable)
+      return;
+    if (prevHiddenNodeIdsRef.current === hiddenNodeIds)
+      return;
+    prevHiddenNodeIdsRef.current = hiddenNodeIds;
+    setXyflowLocalNodes((nodes2) => nodes2.map((n) => ({
+      ...n,
+      data: { ...n.data, isHidden: hiddenNodeIds.has(n.id) }
+    })));
+  }, [editable, hiddenNodeIds]);
   const prevEditableRef = useRef(editable);
   useEffect(() => {
     if (editable && !prevEditableRef.current) {
@@ -99691,7 +99754,8 @@ const StoryboardListPanel = ({
   }, [events, storyboards]);
   const { otelCount, staticCount } = useMemo(() => {
     const otel = storyboards.filter((sb) => sb.canvas.type === "otel").length;
-    const regular = storyboards.filter((sb) => sb.canvas.type === "regular" || sb.canvas.type === "scopes").length;
+    const architectureTypes = ["regular", "scopes", "resources", "spans"];
+    const regular = storyboards.filter((sb) => architectureTypes.includes(sb.canvas.type)).length;
     return { otelCount: otel, staticCount: regular };
   }, [storyboards]);
   const effectiveCanvasTypeFilter = useMemo(() => {
@@ -99812,7 +99876,8 @@ const StoryboardListPanel = ({
     let filtered = storyboards;
     filtered = filtered.filter((storyboard) => {
       if (effectiveCanvasTypeFilter === "regular") {
-        return storyboard.canvas.type === "regular" || storyboard.canvas.type === "scopes";
+        const architectureTypes = ["regular", "scopes", "resources", "spans"];
+        return architectureTypes.includes(storyboard.canvas.type);
       }
       return storyboard.canvas.type === effectiveCanvasTypeFilter;
     });