@diagrammo/dgmo 0.4.3 → 0.4.4

package/dist/index.d.cts

@@ -1786,7 +1786,7 @@ interface InfraLayoutResult {
     width: number;
     height: number;
 }
-declare function layoutInfra(computed: ComputedInfraModel, selectedNodeId?: string | null): InfraLayoutResult;
+declare function layoutInfra(computed: ComputedInfraModel, selectedNodeId?: string | null, collapsedNodes?: Set<string> | null): InfraLayoutResult;
 
 interface InfraLegendEntry {
     value: string;
@@ -1811,7 +1811,7 @@ interface InfraPlaybackState {
     speed: number;
     speedOptions: readonly number[];
 }
-declare function renderInfra(container: HTMLDivElement, layout: InfraLayoutResult, palette: PaletteColors, isDark: boolean, title: string | null, titleLineNumber: number | null, tagGroups?: InfraTagGroup[], activeGroup?: string | null, animate?: boolean, playback?: InfraPlaybackState | null, selectedNodeId?: string | null, exportMode?: boolean): void;
+declare function renderInfra(container: HTMLDivElement, layout: InfraLayoutResult, palette: PaletteColors, isDark: boolean, title: string | null, titleLineNumber: number | null, tagGroups?: InfraTagGroup[], activeGroup?: string | null, animate?: boolean, playback?: InfraPlaybackState | null, selectedNodeId?: string | null, exportMode?: boolean, collapsedNodes?: Set<string> | null): void;
 declare function parseAndLayoutInfra(content: string): {
     parsed: ParsedInfra;
     computed: null;
@@ -1969,6 +1969,7 @@ declare const seriesColors: string[];
 
 interface DiagramViewState {
     activeTagGroup?: string;
+    collapsedGroups?: string[];
 }
 interface DecodedDiagramUrl {
     dsl: string;

package/dist/index.d.ts

@@ -1786,7 +1786,7 @@ interface InfraLayoutResult {
     width: number;
     height: number;
 }
-declare function layoutInfra(computed: ComputedInfraModel, selectedNodeId?: string | null): InfraLayoutResult;
+declare function layoutInfra(computed: ComputedInfraModel, selectedNodeId?: string | null, collapsedNodes?: Set<string> | null): InfraLayoutResult;
 
 interface InfraLegendEntry {
     value: string;
@@ -1811,7 +1811,7 @@ interface InfraPlaybackState {
     speed: number;
     speedOptions: readonly number[];
 }
-declare function renderInfra(container: HTMLDivElement, layout: InfraLayoutResult, palette: PaletteColors, isDark: boolean, title: string | null, titleLineNumber: number | null, tagGroups?: InfraTagGroup[], activeGroup?: string | null, animate?: boolean, playback?: InfraPlaybackState | null, selectedNodeId?: string | null, exportMode?: boolean): void;
+declare function renderInfra(container: HTMLDivElement, layout: InfraLayoutResult, palette: PaletteColors, isDark: boolean, title: string | null, titleLineNumber: number | null, tagGroups?: InfraTagGroup[], activeGroup?: string | null, animate?: boolean, playback?: InfraPlaybackState | null, selectedNodeId?: string | null, exportMode?: boolean, collapsedNodes?: Set<string> | null): void;
 declare function parseAndLayoutInfra(content: string): {
     parsed: ParsedInfra;
     computed: null;
@@ -1969,6 +1969,7 @@ declare const seriesColors: string[];
 
 interface DiagramViewState {
     activeTagGroup?: string;
+    collapsedGroups?: string[];
 }
 interface DecodedDiagramUrl {
     dsl: string;

package/dist/index.js

@@ -7190,7 +7190,7 @@ var init_parser9 = __esm({
     TAG_GROUP_RE = /^tag\s*:\s*(\w[\w\s]*?)(?:\s+alias\s+(\w+))?\s*$/;
     TAG_VALUE_RE = /^(\w[\w\s]*?)(?:\(([^)]+)\))?(\s+default)?\s*$/;
     COMPONENT_RE = /^([a-zA-Z_][\w]*)(.*)$/;
-    PIPE_META_RE = /\|\s*(\w+)\s*:\s*([^|]+)/g;
+    PIPE_META_RE = /[|,]\s*(\w+)\s*:\s*([^|,]+)/g;
     PROPERTY_RE = /^([\w-]+)\s*:\s*(.+)$/;
     PERCENT_RE = /^([\d.]+)%$/;
     RANGE_RE = /^(\d+)-(\d+)$/;
@@ -15015,7 +15015,7 @@ function formatUptime(fraction) {
   if (pct >= 99) return `${pct.toFixed(1)}%`;
   return `${pct.toFixed(1)}%`;
 }
-function layoutInfra(computed, selectedNodeId) {
+function layoutInfra(computed, selectedNodeId, collapsedNodes) {
   if (computed.nodes.length === 0) {
     return { nodes: [], edges: [], groups: [], options: {}, width: 0, height: 0 };
   }
@@ -15036,9 +15036,10 @@ function layoutInfra(computed, selectedNodeId) {
   const widthMap = /* @__PURE__ */ new Map();
   const heightMap = /* @__PURE__ */ new Map();
   for (const node of computed.nodes) {
-    const expanded = node.id === selectedNodeId;
+    const isNodeCollapsed = collapsedNodes?.has(node.id) ?? false;
+    const expanded = !isNodeCollapsed && node.id === selectedNodeId;
     const width = computeNodeWidth2(node, expanded, computed.options);
-    const height = computeNodeHeight2(node, expanded, computed.options);
+    const height = isNodeCollapsed ? NODE_HEADER_HEIGHT + NODE_PAD_BOTTOM : computeNodeHeight2(node, expanded, computed.options);
     widthMap.set(node.id, width);
     heightMap.set(node.id, height);
     const inGroup = groupedNodeIds.has(node.id);
@@ -15612,10 +15613,27 @@ function renderEdgeLabels(svg, edges, palette, isDark, animate) {
     }
   }
 }
-function renderNodes(svg, nodes, palette, isDark, animate, selectedNodeId, activeGroup, diagramOptions) {
+function resolveActiveTagStroke(node, activeGroup, tagGroups, palette) {
+  const tg = tagGroups.find((t) => t.name.toLowerCase() === activeGroup.toLowerCase());
+  if (!tg) return null;
+  const tagKey = (tg.alias ?? tg.name).toLowerCase();
+  const tagVal = node.tags[tagKey];
+  if (!tagVal) return null;
+  const tv = tg.values.find((v) => v.name.toLowerCase() === tagVal.toLowerCase());
+  if (!tv?.color) return null;
+  return resolveColor(tv.color, palette);
+}
+function renderNodes(svg, nodes, palette, isDark, animate, selectedNodeId, activeGroup, diagramOptions, collapsedNodes, tagGroups) {
   const mutedColor = palette.textMuted;
   for (const node of nodes) {
-    const { fill: fill2, stroke: stroke2, textFill } = nodeColor(node, palette, isDark);
+    let { fill: fill2, stroke: stroke2, textFill } = nodeColor(node, palette, isDark);
+    if (activeGroup && tagGroups && !node.isEdge) {
+      const tagStroke = resolveActiveTagStroke(node, activeGroup, tagGroups, palette);
+      if (tagStroke) {
+        stroke2 = tagStroke;
+        fill2 = mix(palette.bg, tagStroke, isDark ? 88 : 94);
+      }
+    }
     let cls = "infra-node";
     if (animate && node.isEdge) {
       cls += " infra-node-edge-throb";
@@ -15625,9 +15643,9 @@ function renderNodes(svg, nodes, palette, isDark, animate, selectedNodeId, activ
       else if (severity === "overloaded") cls += " infra-node-overload";
       else if (severity === "warning") cls += " infra-node-warning";
     }
-    const g = svg.append("g").attr("class", cls).attr("data-line-number", node.lineNumber).attr("data-infra-node", node.id);
+    const g = svg.append("g").attr("class", cls).attr("data-line-number", node.lineNumber).attr("data-infra-node", node.id).attr("data-node-collapse", node.id).style("cursor", "pointer");
     if (node.id.startsWith("[")) {
-      g.attr("data-node-toggle", node.id).style("cursor", "pointer");
+      g.attr("data-node-toggle", node.id);
     }
     for (const [tagKey, tagVal] of Object.entries(node.tags)) {
       g.attr(`data-tag-${tagKey.toLowerCase()}`, tagVal.toLowerCase());
@@ -15645,7 +15663,12 @@ function renderNodes(svg, nodes, palette, isDark, animate, selectedNodeId, activ
     g.append("rect").attr("x", x).attr("y", y).attr("width", node.width).attr("height", node.height).attr("rx", NODE_BORDER_RADIUS).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", strokeWidth);
     const headerCenterY = y + NODE_HEADER_HEIGHT2 / 2 + NODE_FONT_SIZE3 * 0.35;
     g.append("text").attr("x", node.x).attr("y", headerCenterY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", NODE_FONT_SIZE3).attr("font-weight", "600").attr("fill", textFill).text(node.label);
-    {
+    const isNodeCollapsed = collapsedNodes?.has(node.id) ?? false;
+    if (isNodeCollapsed) {
+      const chevronY = y + node.height - 6;
+      g.append("text").attr("x", node.x).attr("y", chevronY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", 8).attr("fill", textFill).attr("opacity", 0.5).text("\u25BC");
+    }
+    if (!isNodeCollapsed) {
       const expanded = node.id === selectedNodeId;
       const displayProps = !node.isEdge && expanded ? getDisplayProps(node, expanded, diagramOptions) : [];
       const computedRows = getComputedRows(node, expanded);
@@ -15968,7 +15991,7 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
     cursorX += fullW + LEGEND_GROUP_GAP5;
   }
 }
-function renderInfra(container, layout, palette, isDark, title, titleLineNumber, tagGroups, activeGroup, animate, playback, selectedNodeId, exportMode) {
+function renderInfra(container, layout, palette, isDark, title, titleLineNumber, tagGroups, activeGroup, animate, playback, selectedNodeId, exportMode, collapsedNodes) {
   d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const legendGroups = computeInfraLegendGroups(layout.nodes, tagGroups ?? [], palette);
   const hasLegend = legendGroups.length > 0 || !!playback;
@@ -16027,7 +16050,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
   }
   renderGroups(svg, layout.groups, palette, isDark);
   renderEdgePaths(svg, layout.edges, layout.nodes, palette, isDark, shouldAnimate);
-  renderNodes(svg, layout.nodes, palette, isDark, shouldAnimate, selectedNodeId, activeGroup, layout.options);
+  renderNodes(svg, layout.nodes, palette, isDark, shouldAnimate, selectedNodeId, activeGroup, layout.options, collapsedNodes, tagGroups ?? []);
   if (shouldAnimate) {
     renderRejectParticles(svg, layout.nodes);
   }
@@ -21623,6 +21646,9 @@ function encodeDiagramUrl(dsl, options) {
   if (options?.viewState?.activeTagGroup) {
     hash += `&tag=${encodeURIComponent(options.viewState.activeTagGroup)}`;
   }
+  if (options?.viewState?.collapsedGroups?.length) {
+    hash += `&cg=${encodeURIComponent(options.viewState.collapsedGroups.join(","))}`;
+  }
   return { url: `${baseUrl}?${hash}#${hash}` };
 }
 function decodeDiagramUrl(hash) {
@@ -21643,6 +21669,9 @@ function decodeDiagramUrl(hash) {
     if (key === "tag" && val) {
       viewState.activeTagGroup = val;
     }
+    if (key === "cg" && val) {
+      viewState.collapsedGroups = val.split(",").filter(Boolean);
+    }
   }
   if (payload.startsWith("dgmo=")) {
     payload = payload.slice(5);