@diagrammo/dgmo 0.4.2 → 0.4.4

package/src/initiative-status/layout.ts

@@ -1,9 +1,13 @@
 // ============================================================
-// Initiative Status Diagram — Layout (dagre-based)
+// Initiative Status Diagram — Layout
+//
+// Uses dagre for rank assignment, node ordering, and edge
+// routing.  Edge waypoints are taken directly from dagre's
+// output without modification.
 // ============================================================
 
 import dagre from '@dagrejs/dagre';
-import type { ParsedInitiativeStatus, ISEdge, InitiativeStatus } from './types';
+import type { ParsedInitiativeStatus, InitiativeStatus } from './types';
 
 export interface ISLayoutNode {
   label: string;
@@ -43,8 +47,6 @@ export interface ISLayoutResult {
   height: number;
 }
 
-// Roll up child statuses: worst (least-progressed) wins
-// Priority: todo > wip > done > na > null
 const STATUS_PRIORITY: Record<string, number> = { todo: 3, wip: 2, done: 1, na: 0 };
 
 function rollUpStatus(members: ISLayoutNode[]): InitiativeStatus {
@@ -60,60 +62,48 @@ function rollUpStatus(members: ISLayoutNode[]): InitiativeStatus {
   return worst;
 }
 
-// Golden ratio fixed-size nodes — all boxes are identical dimensions
 const PHI = 1.618;
 const NODE_HEIGHT = 60;
-const NODE_WIDTH = Math.round(NODE_HEIGHT * PHI); // ~97
+const NODE_WIDTH = Math.round(NODE_HEIGHT * PHI);
 const GROUP_PADDING = 20;
+const NODESEP = 80;
+const RANKSEP = 160;
+
+// ============================================================
+// Main layout function
+// ============================================================
 
 export function layoutInitiativeStatus(parsed: ParsedInitiativeStatus): ISLayoutResult {
   if (parsed.nodes.length === 0) {
     return { nodes: [], edges: [], groups: [], width: 0, height: 0 };
   }
 
+  // Build and run dagre graph
   const hasGroups = parsed.groups.length > 0;
   const g = new dagre.graphlib.Graph({ multigraph: true, compound: hasGroups });
-  g.setGraph({
-    rankdir: 'LR',
-    nodesep: 80,
-    ranksep: 160,
-    edgesep: 40,
-  });
+  g.setGraph({ rankdir: 'LR', nodesep: NODESEP, ranksep: RANKSEP });
   g.setDefaultEdgeLabel(() => ({}));
 
-  // Add group parent nodes
   for (const group of parsed.groups) {
-    const groupId = `__group_${group.label}`;
-    g.setNode(groupId, { label: group.label, clusterLabelPos: 'top' });
+    g.setNode(`__group_${group.label}`, { label: group.label, clusterLabelPos: 'top' });
   }
-
-  // Add nodes — all same size (golden ratio)
   for (const node of parsed.nodes) {
     g.setNode(node.label, { label: node.label, width: NODE_WIDTH, height: NODE_HEIGHT });
   }
-
-  // Assign children to group parents
   for (const group of parsed.groups) {
     const groupId = `__group_${group.label}`;
     for (const nodeLabel of group.nodeLabels) {
-      if (g.hasNode(nodeLabel)) {
-        g.setParent(nodeLabel, groupId);
-      }
+      if (g.hasNode(nodeLabel)) g.setParent(nodeLabel, groupId);
     }
   }
-
-  // Add edges — use multigraph names to allow duplicates between same pair
   for (let i = 0; i < parsed.edges.length; i++) {
     const edge = parsed.edges[i];
     g.setEdge(edge.source, edge.target, { label: edge.label ?? '' }, `e${i}`);
   }
 
-  // Compute layout
   dagre.layout(g);
 
-  // Extract positioned nodes — dagre owns within-rank ordering
-  // (crossing minimization). We don't reorder post-layout because
-  // that would desync edge waypoints from node positions.
+  // Extract node positions
   const layoutNodes: ISLayoutNode[] = parsed.nodes.map((node) => {
     const pos = g.node(node.label);
     return {
@@ -128,35 +118,51 @@ export function layoutInitiativeStatus(parsed: ParsedInitiativeStatus): ISLayout
     };
   });
 
-  // Extract edge waypoints
+  const nodeMap = new Map(layoutNodes.map((n) => [n.label, n]));
+  const allNodeX = layoutNodes.map((n) => n.x);
+
+  // Adjacent-rank edges: 4-point elbow (perpendicular exit/entry, no crossings).
+  // Multi-rank edges: dagre's interior waypoints for obstacle avoidance, with
+  // first/last points pinned to exact node boundaries at node-center Y.
   const layoutEdges: ISLayoutEdge[] = parsed.edges.map((edge, i) => {
-    const edgeData = g.edge(edge.source, edge.target, `e${i}`);
-    return {
-      source: edge.source,
-      target: edge.target,
-      label: edge.label,
-      status: edge.status,
-      lineNumber: edge.lineNumber,
-      points: edgeData?.points ?? [],
-    };
+    const src = nodeMap.get(edge.source)!;
+    const tgt = nodeMap.get(edge.target)!;
+    const exitX = src.x + src.width / 2;
+    const enterX = tgt.x - tgt.width / 2;
+    const dagreEdge = g.edge(edge.source, edge.target, `e${i}`);
+    const dagrePoints: { x: number; y: number }[] = dagreEdge?.points ?? [];
+    const hasIntermediateRank = allNodeX.some((x) => x > src.x + 20 && x < tgt.x - 20);
+    const step = Math.min((enterX - exitX) * 0.15, 20);
+
+    const fixedDagrePoints = dagrePoints.length >= 2 ? [
+      { x: exitX, y: src.y },
+      ...dagrePoints.slice(1, -1),
+      { x: enterX, y: tgt.y },
+    ] : dagrePoints;
+
+    const points = (tgt.x > src.x && !hasIntermediateRank)
+      ? [
+          { x: exitX,         y: src.y },
+          { x: exitX + step,  y: src.y },
+          { x: enterX - step, y: tgt.y },
+          { x: enterX,        y: tgt.y },
+        ]
+      : fixedDagrePoints;
+    return { source: edge.source, target: edge.target, label: edge.label,
+             status: edge.status, lineNumber: edge.lineNumber, points };
   });
 
-  // Compute group bounding boxes from member positions
+  // Compute group bounding boxes
   const layoutGroups: ISLayoutGroup[] = [];
   if (parsed.groups.length > 0) {
-    const nodeMap = new Map(layoutNodes.map((n) => [n.label, n]));
+    const nMap = new Map(layoutNodes.map((n) => [n.label, n]));
     for (const group of parsed.groups) {
       const members = group.nodeLabels
-        .map((label) => nodeMap.get(label))
+        .map((label) => nMap.get(label))
         .filter((n): n is ISLayoutNode => n !== undefined);
-
       if (members.length === 0) continue;
 
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
       for (const member of members) {
         const left = member.x - member.width / 2;
         const right = member.x + member.width / 2;
@@ -189,29 +195,18 @@ export function layoutInitiativeStatus(parsed: ParsedInitiativeStatus): ISLayout
     if (right > totalWidth) totalWidth = right;
     if (bottom > totalHeight) totalHeight = bottom;
   }
-  // Also consider group bounds
   for (const group of layoutGroups) {
-    const right = group.x + group.width;
-    const bottom = group.y + group.height;
-    if (right > totalWidth) totalWidth = right;
-    if (bottom > totalHeight) totalHeight = bottom;
+    if (group.x + group.width > totalWidth) totalWidth = group.x + group.width;
+    if (group.y + group.height > totalHeight) totalHeight = group.y + group.height;
   }
-  // Also consider edge control points
   for (const edge of layoutEdges) {
     for (const pt of edge.points) {
       if (pt.x > totalWidth) totalWidth = pt.x;
       if (pt.y > totalHeight) totalHeight = pt.y;
     }
   }
-  // Add margin
   totalWidth += 40;
   totalHeight += 40;
 
-  return {
-    nodes: layoutNodes,
-    edges: layoutEdges,
-    groups: layoutGroups,
-    width: totalWidth,
-    height: totalHeight,
-  };
+  return { nodes: layoutNodes, edges: layoutEdges, groups: layoutGroups, width: totalWidth, height: totalHeight };
 }

package/src/initiative-status/renderer.ts

@@ -5,7 +5,7 @@
 import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
-import { contrastText } from '../palettes/color-utils';
+import { contrastText, mix } from '../palettes/color-utils';
 import type { PaletteColors } from '../palettes';
 import type { ParsedInitiativeStatus, InitiativeStatus } from './types';
 import type { ParticipantType } from '../sequence/parser';
@@ -37,17 +37,6 @@ const GROUP_LABEL_FONT_SIZE = 11;
 // Color helpers
 // ============================================================
 
-function mix(a: string, b: string, pct: number): string {
-  const parse = (h: string) => {
-    const r = h.replace('#', '');
-    const f = r.length === 3 ? r[0]+r[0]+r[1]+r[1]+r[2]+r[2] : r;
-    return [parseInt(f.substring(0,2),16), parseInt(f.substring(2,4),16), parseInt(f.substring(4,6),16)];
-  };
-  const [ar,ag,ab] = parse(a), [br,bg,bb] = parse(b), t = pct/100;
-  const c = (x: number, y: number) => Math.round(x*t + y*(1-t)).toString(16).padStart(2,'0');
-  return `#${c(ar,br)}${c(ag,bg)}${c(ab,bb)}`;
-}
-
 function statusColor(status: InitiativeStatus, palette: PaletteColors, isDark: boolean): string {
   switch (status) {
     case 'done': return palette.colors.green;
@@ -80,10 +69,13 @@ function edgeStrokeColor(status: InitiativeStatus, palette: PaletteColors, isDar
 // Edge path generator
 // ============================================================
 
+// curveMonotoneX: interpolates through all control points and guarantees no
+// Y-overshoot between consecutive points.  Works for both our 4-point elbows
+// (adjacent-rank) and dagre's fixed waypoints (multi-rank).
 const lineGenerator = d3Shape.line<{ x: number; y: number }>()
   .x((d) => d.x)
   .y((d) => d.y)
-  .curve(d3Shape.curveBasis);
+  .curve(d3Shape.curveMonotoneX);
 
 // ============================================================
 // Text fitting — wrap or shrink to fit fixed-size nodes
@@ -672,6 +664,14 @@ export function renderInitiativeStatus(
 
     const pathD = lineGenerator(edge.points);
     if (pathD) {
+      // Transparent wide hit area behind the visible edge
+      edgeG
+        .append('path')
+        .attr('d', pathD)
+        .attr('fill', 'none')
+        .attr('stroke', 'transparent')
+        .attr('stroke-width', 16);
+
       edgeG
         .append('path')
         .attr('d', pathD)

package/src/kanban/renderer.ts

@@ -5,6 +5,7 @@
 import * as d3Selection from 'd3-selection';
 import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
+import { mix } from '../palettes/color-utils';
 import { renderInlineText } from '../utils/inline-markdown';
 import type { ParsedKanban, KanbanColumn, KanbanCard, KanbanTagGroup } from './types';
 import { parseKanban } from './parser';
@@ -40,30 +41,6 @@ const LEGEND_FONT_SIZE = 11;
 const LEGEND_DOT_R = 4;
 const LEGEND_ENTRY_FONT_SIZE = 10;
 
-// ============================================================
-// Color helpers
-// ============================================================
-
-function mix(a: string, b: string, pct: number): string {
-  const parse = (h: string) => {
-    const r = h.replace('#', '');
-    const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
-    return [
-      parseInt(f.substring(0, 2), 16),
-      parseInt(f.substring(2, 4), 16),
-      parseInt(f.substring(4, 6), 16),
-    ];
-  };
-  const [ar, ag, ab] = parse(a);
-  const [br, bg, bb] = parse(b);
-  const t = pct / 100;
-  const c = (x: number, y: number) =>
-    Math.round(x * t + y * (1 - t))
-      .toString(16)
-      .padStart(2, '0');
-  return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
-}
-
 // ============================================================
 // Tag color resolution
 // ============================================================

package/src/org/layout.ts

@@ -4,6 +4,7 @@
 
 import { hierarchy, tree } from 'd3-hierarchy';
 import type { ParsedOrg, OrgNode, OrgTagGroup } from './parser';
+import { resolveTagColor, injectDefaultTagMetadata } from '../utils/tag-groups';
 
 // ============================================================
 // Types
@@ -169,20 +170,9 @@ function resolveNodeColor(
   tagGroups: OrgTagGroup[],
   activeGroupName: string | null
 ): string | undefined {
+  // Explicit inline (color) always wins — handled before tag resolution
   if (node.color) return node.color;
-  if (!activeGroupName) return undefined;
-
-  const group = tagGroups.find(
-    (g) => g.name.toLowerCase() === activeGroupName.toLowerCase()
-  );
-  if (!group) return undefined;
-  const metaValue =
-    node.metadata[group.name.toLowerCase()] ??
-    (node.isContainer ? undefined : group.defaultValue);
-  if (!metaValue) return '#999999';
-  return group.entries.find(
-    (e) => e.value.toLowerCase() === metaValue.toLowerCase()
-  )?.color ?? '#999999';
+  return resolveTagColor(node.metadata, tagGroups, activeGroupName, node.isContainer);
 }
 
 // ============================================================
@@ -325,38 +315,33 @@ function computeLegendGroups(
 
 /**
  * Inject default tag group values into non-container node metadata.
- * Idempotent — only sets keys not already present.
+ * Delegates to shared `injectDefaultTagMetadata` with org-specific skip logic.
  */
 function injectDefaultMetadata(
   roots: OrgNode[],
   tagGroups: OrgTagGroup[]
 ): void {
-  const defaults: { key: string; value: string }[] = [];
-  for (const group of tagGroups) {
-    if (group.defaultValue) {
-      defaults.push({ key: group.name.toLowerCase(), value: group.defaultValue });
-    }
-  }
-  if (defaults.length === 0) return;
-
-  const walk = (node: OrgNode) => {
-    if (!node.isContainer) {
-      for (const { key, value } of defaults) {
-        if (!(key in node.metadata)) {
-          node.metadata[key] = value;
-        }
-      }
-    }
-    for (const child of node.children) walk(child);
+  // Flatten all nodes (recursive) for the shared utility
+  const allNodes: OrgNode[] = [];
+  const collect = (node: OrgNode) => {
+    allNodes.push(node);
+    for (const child of node.children) collect(child);
   };
-  for (const root of roots) walk(root);
+  for (const root of roots) collect(root);
+
+  injectDefaultTagMetadata(
+    allNodes,
+    tagGroups,
+    (entity) => (entity as OrgNode).isContainer
+  );
 }
 
 export function layoutOrg(
   parsed: ParsedOrg,
   hiddenCounts?: Map<string, number>,
   activeTagGroup?: string | null,
-  hiddenAttributes?: Set<string>
+  hiddenAttributes?: Set<string>,
+  expandAllLegend?: boolean
 ): OrgLayoutResult {
   if (parsed.roots.length === 0) {
     // Legend-only: compute and position legend groups even without nodes
@@ -510,9 +495,13 @@ export function layoutOrg(
       (d) => d.data.orgNode.id !== '__virtual_root__'
     );
 
-    // Collect max actual card height per depth level
+    // Collect max actual card height per depth level.
+    // Exclude __stack_ placeholders — their aggregate height (multiple
+    // stacked cards) would inflate the level max and push sibling
+    // subtrees' deeper children far below where they need to be.
     const levelMaxHeight = new Map<number, number>();
     for (const d of descendants) {
+      if (d.data.orgNode.id.startsWith('__stack_')) continue;
       const cur = levelMaxHeight.get(d.depth) ?? 0;
       if (d.data.height > cur) levelMaxHeight.set(d.depth, d.data.height);
     }
@@ -1128,14 +1117,16 @@ export function layoutOrg(
   const legendPosition = parsed.options?.['legend-position'] ?? 'top';
 
   // When a tag group is active, only that group is laid out (full size).
-  // When none is active, all groups are laid out minified.
+  // When none is active, all groups are laid out minified — unless
+  // expandAllLegend is set (export mode), which shows all groups expanded.
   const visibleGroups = activeTagGroup != null
     ? legendGroups.filter((g) => g.name.toLowerCase() === activeTagGroup.toLowerCase())
     : legendGroups;
+  const allExpanded = expandAllLegend && activeTagGroup == null;
   const effectiveW = (g: OrgLegendGroup) =>
-    activeTagGroup != null ? g.width : g.minifiedWidth;
+    activeTagGroup != null || allExpanded ? g.width : g.minifiedWidth;
   const effectiveH = (g: OrgLegendGroup) =>
-    activeTagGroup != null ? g.height : g.minifiedHeight;
+    activeTagGroup != null || allExpanded ? g.height : g.minifiedHeight;
 
   if (visibleGroups.length > 0) {
     if (legendPosition === 'bottom') {

package/src/org/parser.ts

@@ -2,7 +2,7 @@ import type { PaletteColors } from '../palettes';
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import type { TagGroup, TagEntry } from '../utils/tag-groups';
-import { isTagBlockHeading, matchTagBlockHeading } from '../utils/tag-groups';
+import { isTagBlockHeading, matchTagBlockHeading, validateTagValues } from '../utils/tag-groups';
 import {
   measureIndent,
   extractColor,
@@ -292,6 +292,21 @@ export function parseOrg(
     }
   }
 
+  // Validate tag group values on nodes
+  if (result.tagGroups.length > 0) {
+    // Flatten all nodes for the shared validation utility
+    const allNodes: OrgNode[] = [];
+    const collectAll = (nodes: OrgNode[]) => {
+      for (const node of nodes) {
+        allNodes.push(node);
+        collectAll(node.children);
+      }
+    };
+    collectAll(result.roots);
+
+    validateTagValues(allNodes, result.tagGroups, pushWarning, suggest);
+  }
+
   if (result.roots.length === 0 && result.tagGroups.length === 0 && !result.error) {
     const diag = makeDgmoError(1, 'No nodes found in org chart');
     result.diagnostics.push(diag);