@diagrammo/dgmo 0.8.18 → 0.8.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.8.18",
+  "version": "0.8.19",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/gantt/renderer.ts

@@ -20,9 +20,11 @@ import {
   LEGEND_ENTRY_TRAIL,
   LEGEND_GROUP_GAP,
   LEGEND_ICON_W,
+  LEGEND_GEAR_PILL_W,
   measureLegendText,
 } from '../utils/legend-constants';
 import { renderLegendD3 } from '../utils/legend-d3';
+import { controlsGroupCapsuleWidth } from '../utils/legend-layout';
 import type {
   LegendConfig,
   LegendState,
@@ -233,6 +235,8 @@ export function renderGantt(
     options?.currentActiveGroup
   );
   let criticalPathActive = false;
+  let dependenciesActive = !!resolved.options.dependencies;
+  let controlsExpanded = false;
 
   // ── Build row list (structural vs tag mode) ─────────────
 
@@ -264,11 +268,21 @@ export function renderGantt(
 
   const totalRows = rows.length;
 
+  // Pre-compute critical path / dependency flags (needed for legend height reservation)
+  const hasCriticalPath =
+    resolved.options.criticalPath &&
+    resolved.tasks.some((t) => t.isCriticalPath);
+  const hasDependencies =
+    resolved.options.dependencies &&
+    resolved.tasks.some((t) => t.task.dependencies.length > 0);
+
   // Vertical layout — matches timeline pattern (d3.ts:3649-3655)
   const title = resolved.options.title;
   const titleHeight = title ? 50 : 20;
   const tagLegendReserve =
-    resolved.tagGroups.length > 0 ? LEGEND_HEIGHT + 8 : 0;
+    resolved.tagGroups.length > 0 || hasCriticalPath || hasDependencies
+      ? LEGEND_HEIGHT + 8
+      : 0;
   const topDateLabelReserve = 22; // tick (6) + gap (4) + label height (~12)
   const hasOverheadLabels =
     resolved.markers.length > 0 || resolved.eras.length > 0;
@@ -327,13 +341,9 @@ export function renderGantt(
 
   // ── Tag legend (interactive) ────────────────────────────
 
-  const hasCriticalPath =
-    resolved.options.criticalPath &&
-    resolved.tasks.some((t) => t.isCriticalPath);
-
   function drawLegend() {
     svg.selectAll('.gantt-tag-legend-container').remove();
-    if (resolved.tagGroups.length > 0 || hasCriticalPath) {
+    if (resolved.tagGroups.length > 0 || hasCriticalPath || hasDependencies) {
       const legendY = titleHeight;
       renderTagLegend(
         svg,
@@ -359,17 +369,41 @@ export function renderGantt(
           recolorBars();
         },
         () => {
-          criticalPathActive = !criticalPathActive;
+          controlsExpanded = !controlsExpanded;
           drawLegend();
         },
         currentSwimlaneGroup,
         onSwimlaneChange,
         viewMode,
-        resolved.tasks
+        resolved.tasks,
+        controlsExpanded,
+        hasDependencies,
+        dependenciesActive,
+        (toggleId, active) => {
+          if (toggleId === 'critical-path') {
+            criticalPathActive = active;
+          } else if (toggleId === 'dependencies') {
+            dependenciesActive = active;
+            // Show/hide dependency arrows
+            g.selectAll<SVGElement, unknown>(
+              '.gantt-dep-arrow, .gantt-dep-arrowhead, .gantt-dep-label'
+            ).attr('display', active ? null : 'none');
+          }
+          drawLegend();
+        }
       );
     }
   }
 
+  function restoreHighlight() {
+    if (criticalPathActive) {
+      applyCriticalPathHighlight(svg, g);
+    } else {
+      svg.attr('data-critical-path-active', null);
+      resetHighlight(g, svg);
+    }
+  }
+
   function recolorBars() {
     g.selectAll<SVGGElement, unknown>('.gantt-task').each(function () {
       const el = d3Selection.select(this);
@@ -568,7 +602,7 @@ export function renderGantt(
           }
         })
         .on('mouseleave', () => {
-          resetHighlight(g, svg);
+          restoreHighlight();
           hideGanttDateIndicators(g);
         });
 
@@ -979,7 +1013,7 @@ export function renderGantt(
               .text(task.label);
           })
           .on('mouseleave', () => {
-            resetHighlight(g, svg);
+            restoreHighlight();
             hideGanttDateIndicators(g);
             g.selectAll('.gantt-milestone-hover-label').remove();
           });
@@ -1023,11 +1057,7 @@ export function renderGantt(
           })
           .on('mouseleave', () => {
             if (resolved.options.dependencies) {
-              if (criticalPathActive) {
-                applyCriticalPathHighlight(svg, g);
-              } else {
-                resetHighlight(g, svg);
-              }
+              restoreHighlight();
             }
             resetTaskLabels(svg);
             hideGanttDateIndicators(g);
@@ -1704,6 +1734,7 @@ function applyCriticalPathHighlight(
   svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
   chartG: d3Selection.Selection<SVGGElement, unknown, null, undefined>
 ) {
+  svg.attr('data-critical-path-active', 'true');
   chartG.selectAll<SVGGElement, unknown>('.gantt-task').each(function () {
     const el = d3Selection.select(this);
     el.attr(
@@ -1827,6 +1858,34 @@ function drawSwimlaneIcon(
   return iconG;
 }
 
+function buildControlsToggles(
+  hasCriticalPath: boolean,
+  criticalPathActive: boolean,
+  hasDependencies: boolean,
+  dependenciesActive: boolean
+): import('../utils/legend-types').ControlsGroupToggle[] {
+  const toggles: import('../utils/legend-types').ControlsGroupToggle[] = [];
+  if (hasCriticalPath) {
+    toggles.push({
+      id: 'critical-path',
+      type: 'toggle',
+      label: 'Critical Path',
+      active: criticalPathActive,
+      onToggle: () => {},
+    });
+  }
+  if (hasDependencies) {
+    toggles.push({
+      id: 'dependencies',
+      type: 'toggle',
+      label: 'Dependencies',
+      active: dependenciesActive,
+      onToggle: () => {},
+    });
+  }
+  return toggles;
+}
+
 function renderTagLegend(
   svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
   chartG: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
@@ -1841,16 +1900,16 @@ function renderTagLegend(
   criticalPathActive: boolean,
   optionLineNumbers: Record<string, number>,
   onToggle?: (groupName: string) => void,
-  onToggleCriticalPath?: () => void,
+  onToggleControlsExpand?: () => void,
   currentSwimlaneGroup?: string | null,
   onSwimlaneChange?: (group: string | null) => void,
   legendViewMode?: boolean,
-  resolvedTasks?: ResolvedTask[]
+  resolvedTasks?: ResolvedTask[],
+  controlsExpanded = false,
+  hasDependencies = false,
+  dependenciesActive = false,
+  onControlsToggle?: (toggleId: string, active: boolean) => void
 ): void {
-  const groupBg = isDark
-    ? mix(palette.surface, palette.bg, 50)
-    : mix(palette.surface, palette.bg, 30);
-
   // Build visible groups: active group expanded + swimlane group as compact pill
   let visibleGroups: TagGroup[];
   if (activeGroupName) {
@@ -1934,13 +1993,16 @@ function renderTagLegend(
   }
   totalW += Math.max(0, (visibleGroups.length - 1) * LEGEND_GROUP_GAP);
 
-  // Critical Path pill width
-  const cpLabel = 'Critical Path';
-  const cpPillW =
-    measureLegendText(cpLabel, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-  if (hasCriticalPath) {
+  // Controls group width — replaces standalone critical path pill
+  const hasControls = hasCriticalPath || hasDependencies;
+  const controlsToggleLabels: Array<{ label: string }> = [];
+  if (hasCriticalPath) controlsToggleLabels.push({ label: 'Critical Path' });
+  if (hasDependencies) controlsToggleLabels.push({ label: 'Dependencies' });
+  if (hasControls) {
     if (visibleGroups.length > 0) totalW += LEGEND_GROUP_GAP;
-    totalW += cpPillW;
+    totalW += controlsExpanded
+      ? controlsGroupCapsuleWidth(controlsToggleLabels)
+      : LEGEND_GEAR_PILL_W;
   }
 
   // Center over full container (matching title centering)
@@ -1952,8 +2014,6 @@ function renderTagLegend(
     .attr('class', 'gantt-tag-legend-container')
     .attr('transform', `translate(${legendX}, ${legendY})`);
 
-  let cursorX = 0;
-
   // Render tag groups via centralized legend system
   if (visibleGroups.length > 0) {
     const showIcon = !legendViewMode && tagGroups.length > 0;
@@ -1969,6 +2029,13 @@ function renderTagLegend(
       };
     });
 
+    const controlsToggles = buildControlsToggles(
+      hasCriticalPath,
+      criticalPathActive,
+      hasDependencies,
+      dependenciesActive
+    );
+
     const legendConfig: LegendConfig = {
       groups: legendGroups,
       position: {
@@ -1977,16 +2044,30 @@ function renderTagLegend(
       },
       mode: 'fixed' as const,
       capsulePillAddonWidth: iconReserve,
+      controlsGroup:
+        controlsToggles.length > 0 ? { toggles: controlsToggles } : undefined,
+    };
+    const legendState: LegendState = {
+      activeGroup: activeGroupName,
+      controlsExpanded,
     };
-    const legendState: LegendState = { activeGroup: activeGroupName };
 
-    const tagGroupsW =
+    let tagGroupsW =
       visibleGroups.reduce((s, _, i) => s + groupWidths[i], 0) +
       Math.max(0, (visibleGroups.length - 1) * LEGEND_GROUP_GAP);
+    // Add controls group space to the renderLegendD3 container width
+    if (hasControls) {
+      if (visibleGroups.length > 0) tagGroupsW += LEGEND_GROUP_GAP;
+      tagGroupsW += controlsExpanded
+        ? controlsGroupCapsuleWidth(controlsToggleLabels)
+        : LEGEND_GEAR_PILL_W;
+    }
     const tagGroupG = legendRow.append('g');
 
     const legendCallbacks: LegendCallbacks = {
       onGroupToggle: onToggle,
+      onControlsExpand: onToggleControlsExpand,
+      onControlsToggle,
       onEntryHover: (groupName, entryValue) => {
         const tagKey = groupName.toLowerCase();
         if (entryValue) {
@@ -2092,67 +2173,43 @@ function renderTagLegend(
       legendCallbacks,
       tagGroupsW
     );
+  } else if (hasControls) {
+    // No tag groups, but controls group needs rendering
+    const controlsToggles = buildControlsToggles(
+      hasCriticalPath,
+      criticalPathActive,
+      hasDependencies,
+      dependenciesActive
+    );
 
-    for (let i = 0; i < visibleGroups.length; i++) {
-      cursorX += groupWidths[i] + LEGEND_GROUP_GAP;
-    }
-  }
-
-  // Critical Path pill
-  if (hasCriticalPath) {
-    const cpLineNum = optionLineNumbers['critical-path'];
-    const cpG = legendRow
-      .append('g')
-      .attr('transform', `translate(${cursorX}, 0)`)
-      .attr('class', 'gantt-legend-critical-path')
-      .style('cursor', 'pointer')
-      .on('click', () => {
-        if (onToggleCriticalPath) onToggleCriticalPath();
-      });
-    if (cpLineNum) cpG.attr('data-line-number', String(cpLineNum));
-
-    cpG
-      .append('rect')
-      .attr('width', cpPillW)
-      .attr('height', LEGEND_HEIGHT)
-      .attr('rx', LEGEND_HEIGHT / 2)
-      .attr('fill', criticalPathActive ? palette.bg : groupBg);
-
-    if (criticalPathActive) {
-      cpG
-        .append('rect')
-        .attr('width', cpPillW)
-        .attr('height', LEGEND_HEIGHT)
-        .attr('rx', LEGEND_HEIGHT / 2)
-        .attr('fill', 'none')
-        .attr('stroke', mix(palette.textMuted, palette.bg, 50))
-        .attr('stroke-width', 0.75);
-    }
-
-    cpG
-      .append('text')
-      .attr('x', cpPillW / 2)
-      .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
-      .attr('text-anchor', 'middle')
-      .attr('font-size', `${LEGEND_PILL_FONT_SIZE}px`)
-      .attr('font-weight', '500')
-      .attr('fill', criticalPathActive ? palette.text : palette.textMuted)
-      .text(cpLabel);
+    const legendConfig: LegendConfig = {
+      groups: [],
+      position: {
+        placement: 'top-center' as const,
+        titleRelation: 'below-title' as const,
+      },
+      mode: 'fixed' as const,
+      controlsGroup: { toggles: controlsToggles },
+    };
 
-    // Apply persistent highlighting when active
-    if (criticalPathActive) {
-      applyCriticalPathHighlight(svg, chartG);
-    }
+    const tagGroupG = legendRow.append('g');
+    renderLegendD3(
+      tagGroupG,
+      legendConfig,
+      { activeGroup: null, controlsExpanded },
+      palette,
+      isDark,
+      {
+        onControlsExpand: onToggleControlsExpand,
+        onControlsToggle,
+      },
+      totalW
+    );
+  }
 
-    cpG
-      .on('mouseenter', () => {
-        applyCriticalPathHighlight(svg, chartG);
-      })
-      .on('mouseleave', () => {
-        if (!criticalPathActive) {
-          resetHighlightAll(svg, chartG);
-        }
-      });
+  // Apply persistent critical path highlighting when active
+  if (criticalPathActive) {
+    applyCriticalPathHighlight(svg, chartG);
   }
 }
 
@@ -2990,6 +3047,11 @@ function resetHighlight(
   g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
   svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>
 ): void {
+  // If critical path is actively toggled ON, restore its highlight instead of full reset
+  if (svg.attr('data-critical-path-active') === 'true') {
+    applyCriticalPathHighlight(svg, g);
+    return;
+  }
   g.selectAll<SVGGElement, unknown>('.gantt-task, .gantt-milestone').attr(
     'opacity',
     1

package/src/index.ts

@@ -410,6 +410,9 @@ export type {
   SequenceRenderOptions,
 } from './sequence/renderer';
 
+export { applyCollapseProjection } from './sequence/collapse';
+export type { CollapsedView } from './sequence/collapse';
+
 // ============================================================
 // Colors & Palettes
 // ============================================================
@@ -461,11 +464,16 @@ export type { PaletteConfig, PaletteColors } from './palettes';
 // Sharing (URL encoding/decoding)
 // ============================================================
 
-export { encodeDiagramUrl, decodeDiagramUrl } from './sharing';
+export {
+  encodeDiagramUrl,
+  decodeDiagramUrl,
+  encodeViewState,
+  decodeViewState,
+} from './sharing';
 export type {
   EncodeDiagramUrlOptions,
   EncodeDiagramUrlResult,
-  DiagramViewState,
+  CompactViewState,
   DecodedDiagramUrl,
 } from './sharing';
 

package/src/sequence/collapse.ts

@@ -0,0 +1,169 @@
+// ============================================================
+// Collapse Projection for Sequence Diagram Groups
+// ============================================================
+//
+// Pure projection function that transforms a parsed sequence diagram
+// by collapsing specified groups into single virtual participants.
+// The parsed AST (ParsedSequenceDgmo) stays immutable.
+
+import type {
+  ParsedSequenceDgmo,
+  SequenceElement,
+  SequenceGroup,
+  SequenceMessage,
+  SequenceParticipant,
+} from './parser';
+import { isSequenceBlock, isSequenceNote, isSequenceSection } from './parser';
+
+export interface CollapsedView {
+  participants: SequenceParticipant[];
+  messages: SequenceMessage[];
+  elements: SequenceElement[];
+  groups: SequenceGroup[];
+  /** Maps member participant ID → collapsed group name */
+  collapsedGroupIds: Map<string, string>;
+}
+
+/**
+ * Project a parsed sequence diagram into a collapsed view.
+ *
+ * @param parsed - The immutable parsed sequence diagram
+ * @param collapsedGroups - Set of group lineNumbers that should be collapsed
+ * @returns A new CollapsedView with remapped participants, messages, elements, and groups
+ */
+export function applyCollapseProjection(
+  parsed: ParsedSequenceDgmo,
+  collapsedGroups: Set<number>
+): CollapsedView {
+  if (collapsedGroups.size === 0) {
+    return {
+      participants: parsed.participants,
+      messages: parsed.messages,
+      elements: parsed.elements,
+      groups: parsed.groups,
+      collapsedGroupIds: new Map(),
+    };
+  }
+
+  // Build memberToGroup map: participantId → group name
+  const memberToGroup = new Map<string, string>();
+  const collapsedGroupNames = new Set<string>();
+  for (const group of parsed.groups) {
+    if (collapsedGroups.has(group.lineNumber)) {
+      collapsedGroupNames.add(group.name);
+      for (const memberId of group.participantIds) {
+        memberToGroup.set(memberId, group.name);
+      }
+    }
+  }
+
+  // Participants: remove members of collapsed groups, insert virtual participant per group
+  // Skip non-member participants that collide with a collapsed group name
+  const participants: SequenceParticipant[] = [];
+  const insertedGroups = new Set<string>();
+
+  for (const p of parsed.participants) {
+    const groupName = memberToGroup.get(p.id);
+    if (groupName) {
+      // Replace first occurrence with virtual group participant
+      if (!insertedGroups.has(groupName)) {
+        insertedGroups.add(groupName);
+        const group = parsed.groups.find(
+          (g) => g.name === groupName && collapsedGroups.has(g.lineNumber)
+        )!;
+        participants.push({
+          id: groupName,
+          label: groupName,
+          type: 'default',
+          lineNumber: group.lineNumber,
+        });
+      }
+      // Skip member — it's absorbed into the group
+    } else if (collapsedGroupNames.has(p.id)) {
+      // Skip — participant name collides with a collapsed group name;
+      // the virtual group participant takes precedence
+    } else {
+      participants.push(p);
+    }
+  }
+
+  // Remap helper
+  const remap = (id: string): string => memberToGroup.get(id) ?? id;
+
+  // Messages: remap from/to, preserving order
+  const messages: SequenceMessage[] = parsed.messages.map((msg) => ({
+    ...msg,
+    from: remap(msg.from),
+    to: remap(msg.to),
+  }));
+
+  // Elements: deep clone with remapping and internal return suppression
+  const elements = remapElements(parsed.elements, memberToGroup);
+
+  // Groups: remove collapsed groups (they're now virtual participants)
+  const groups = parsed.groups.filter(
+    (g) => !collapsedGroups.has(g.lineNumber)
+  );
+
+  return {
+    participants,
+    messages,
+    elements,
+    groups,
+    collapsedGroupIds: memberToGroup,
+  };
+}
+
+/**
+ * Deep clone and remap elements, suppressing internal returns within collapsed groups.
+ */
+function remapElements(
+  elements: SequenceElement[],
+  memberToGroup: Map<string, string>
+): SequenceElement[] {
+  const remap = (id: string): string => memberToGroup.get(id) ?? id;
+  const result: SequenceElement[] = [];
+
+  for (const el of elements) {
+    if (isSequenceSection(el)) {
+      // Sections have no participant references — pass through unchanged
+      result.push(el);
+    } else if (isSequenceNote(el)) {
+      // Remap note participant
+      result.push({
+        ...el,
+        participantId: remap(el.participantId),
+      });
+    } else if (isSequenceBlock(el)) {
+      // Recurse into block children
+      result.push({
+        ...el,
+        children: remapElements(el.children, memberToGroup),
+        elseChildren: remapElements(el.elseChildren, memberToGroup),
+        ...(el.elseIfBranches
+          ? {
+              elseIfBranches: el.elseIfBranches.map((branch) => ({
+                ...branch,
+                children: remapElements(branch.children, memberToGroup),
+              })),
+            }
+          : {}),
+      });
+    } else {
+      // Message element
+      const msg = el as SequenceMessage;
+      const from = remap(msg.from);
+      const to = remap(msg.to);
+
+      // Suppress internal return: both endpoints in same collapsed group
+      // and this is a return message (unlabeled response)
+      if (from === to && from !== msg.from && !msg.label) {
+        continue; // internal return suppressed
+      }
+
+      result.push({ ...msg, from, to });
+    }
+  }
+
+  return result;
+}

package/src/sequence/parser.ts

@@ -154,6 +154,8 @@ export interface SequenceGroup {
   lineNumber: number;
   /** Pipe-delimited tag metadata (e.g. `[Backend | t: Product]`) */
   metadata?: Record<string, string>;
+  /** Whether this group is collapsed by default */
+  collapsed?: boolean;
 }
 
 /**
@@ -502,8 +504,17 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       const groupColor = groupMatch[2]?.trim();
       let groupMeta: Record<string, string> | undefined;
 
-      // Parse pipe metadata AFTER the closing bracket
-      const afterBracket = groupMatch[3]?.trim() || '';
+      // Parse collapse keyword and pipe metadata AFTER the closing bracket
+      let afterBracket = groupMatch[3]?.trim() || '';
+      let isCollapsed = false;
+
+      // Extract `collapse` keyword (before any pipe metadata)
+      const collapseMatch = afterBracket.match(/^collapse\b/i);
+      if (collapseMatch) {
+        isCollapsed = true;
+        afterBracket = afterBracket.slice(collapseMatch[0].length).trim();
+      }
+
       if (afterBracket.startsWith('|')) {
         const segments = afterBracket.split('|');
         const meta = parsePipeMetadata(segments, aliasMap, () =>
@@ -524,6 +535,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
         participantIds: [],
         lineNumber,
         ...(groupMeta ? { metadata: groupMeta } : {}),
+        ...(isCollapsed ? { collapsed: true } : {}),
       };
       result.groups.push(activeGroup);
       continue;