@diagrammo/dgmo 0.6.1 → 0.6.2

package/src/er/renderer.ts

@@ -13,12 +13,21 @@ import {
   LEGEND_HEIGHT,
   LEGEND_PILL_PAD,
   LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
   LEGEND_GROUP_GAP,
 } from '../utils/legend-constants';
 import type { ParsedERDiagram, ERConstraint } from './types';
 import type { ERLayoutResult, ERLayoutNode, ERLayoutEdge } from './layout';
 import { parseERDiagram } from './parser';
 import { layoutERDiagram } from './layout';
+import { classifyEREntities, ROLE_COLORS, ROLE_LABELS, ROLE_ORDER } from './classify';
+import type { EntityRole } from './classify';
 
 // ============================================================
 // Constants
@@ -208,32 +217,62 @@ export function renderERDiagram(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  /** When false, semantic role colors are suppressed and entities use a neutral color. */
+  semanticColorsActive?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
-  const width = exportDims?.width ?? container.clientWidth;
-  const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
+  const useSemanticColors =
+    parsed.tagGroups.length === 0 && layout.nodes.every((n) => !n.color);
+  const legendReserveH = useSemanticColors ? LEGEND_HEIGHT + DIAGRAM_PADDING : 0;
 
   const titleHeight = parsed.title ? 40 : 0;
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight;
-  const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
-  const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
-  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
-  const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
-  const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + DIAGRAM_PADDING;
+  // Natural dimensions derived purely from the layout — no dependency on container
+  // size at render time, which eliminates the stagger caused by reading clientWidth/
+  // clientHeight before the container has stabilized.
+  const naturalW = diagramW + DIAGRAM_PADDING * 2;
+  const naturalH = diagramH + titleHeight + legendReserveH + DIAGRAM_PADDING * 2;
+
+  // For export: scale the natural layout to fit the requested pixel dimensions.
+  // For live preview: render at natural scale (scale=1) and let the SVG viewBox
+  // handle fitting to the container via CSS.
+  let viewW: number;
+  let viewH: number;
+  let scale: number;
+  let offsetX: number;
+  let offsetY: number;
+
+  if (exportDims) {
+    viewW = exportDims.width ?? naturalW;
+    viewH = exportDims.height ?? naturalH;
+    const availH = viewH - titleHeight - legendReserveH;
+    const scaleX = (viewW - DIAGRAM_PADDING * 2) / diagramW;
+    const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
+    scale = Math.min(MAX_SCALE, scaleX, scaleY);
+    const scaledW = diagramW * scale;
+    offsetX = (viewW - scaledW) / 2;
+    offsetY = titleHeight + DIAGRAM_PADDING;
+  } else {
+    viewW = naturalW;
+    viewH = naturalH;
+    scale = 1;
+    offsetX = DIAGRAM_PADDING;
+    offsetY = titleHeight + DIAGRAM_PADDING;
+  }
+
+  if (viewW <= 0 || viewH <= 0) return;
 
   const svg = d3Selection
     .select(container)
     .append('svg')
-    .attr('width', width)
-    .attr('height', height)
+    .attr('width', exportDims ? viewW : '100%')
+    .attr('height', exportDims ? viewH : '100%')
+    .attr('viewBox', `0 0 ${viewW} ${viewH}`)
+    .attr('preserveAspectRatio', 'xMidYMid meet')
     .style('font-family', FONT_FAMILY);
 
   // ── Title ──
@@ -241,7 +280,7 @@ export function renderERDiagram(
     const titleEl = svg
       .append('text')
       .attr('class', 'chart-title')
-      .attr('x', width / 2)
+      .attr('x', viewW / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
@@ -269,6 +308,15 @@ export function renderERDiagram(
   // ── Auto-assign colors ──
   const seriesColors = getSeriesColors(palette);
 
+  // ── Semantic coloring gate ──
+  // Classify entities whenever conditions allow; suppress colors when user collapses the legend.
+  // (useSemanticColors was computed above for legend reserve height)
+  const semanticRoles: Map<string, EntityRole> | null = useSemanticColors
+    ? classifyEREntities(parsed.tables, parsed.relationships)
+    : null;
+  // semanticColorsActive defaults to true; false = legend collapsed, neutral color applied
+  const semanticActive = semanticRoles !== null && (semanticColorsActive ?? true);
+
   // ── Edges (behind nodes) ──
   const useLabels = parsed.options.notation === 'labels';
 
@@ -347,7 +395,12 @@ export function renderERDiagram(
   for (let ni = 0; ni < layout.nodes.length; ni++) {
     const node = layout.nodes[ni];
     const tagColor = resolveTagColor(node.metadata, parsed.tagGroups, activeTagGroup ?? null);
-    const nodeColor = node.color ?? tagColor ?? seriesColors[ni % seriesColors.length];
+    const semanticColor = semanticActive
+      ? palette.colors[ROLE_COLORS[semanticRoles!.get(node.id) ?? 'unclassified']]
+      : semanticRoles
+        ? palette.primary  // neutral color when legend is collapsed
+        : undefined;
+    const nodeColor = node.color ?? tagColor ?? semanticColor ?? seriesColors[ni % seriesColors.length];
 
     const nodeG = contentG
       .append('g')
@@ -365,6 +418,12 @@ export function renderERDiagram(
       }
     }
 
+    // Set data-er-role for semantic coloring (CSS targeting + test assertions)
+    if (semanticRoles) {
+      const role = semanticRoles.get(node.id);
+      if (role) nodeG.attr('data-er-role', role);
+    }
+
     if (onClickItem) {
       nodeG.style('cursor', 'pointer').on('click', () => {
         onClickItem(node.lineNumber);
@@ -463,7 +522,7 @@ export function renderERDiagram(
     }
 
     let legendX = DIAGRAM_PADDING;
-    let legendY = height - DIAGRAM_PADDING;
+    let legendY = viewH - DIAGRAM_PADDING;
 
     for (const group of parsed.tagGroups) {
       const groupG = legendG.append('g')
@@ -525,6 +584,161 @@ export function renderERDiagram(
       legendX += LEGEND_GROUP_GAP;
     }
   }
+
+  // ── Semantic Legend ──
+  // Rendered when semantic role detection is enabled (no tag groups, no explicit colors).
+  // Follows the sequence-legend pattern: one clickable "Role" group pill that expands
+  // to show colored-dot entries. Clicking toggles semanticColorsActive on/off.
+  if (semanticRoles) {
+    const presentRoles = ROLE_ORDER.filter((role) => {
+      for (const r of semanticRoles.values()) {
+        if (r === role) return true;
+      }
+      return false;
+    });
+
+    if (presentRoles.length > 0) {
+      // Measure actual text widths for consistent spacing regardless of character mix.
+      // Falls back to a character-count estimate in jsdom/test environments.
+      const measureLabelW = (text: string, fontSize: number): number => {
+        const dummy = svg.append('text')
+          .attr('font-size', fontSize)
+          .attr('font-family', FONT_FAMILY)
+          .attr('visibility', 'hidden')
+          .text(text);
+        const measured = (dummy.node() as SVGTextElement | null)?.getComputedTextLength?.() ?? 0;
+        dummy.remove();
+        return measured > 0 ? measured : text.length * fontSize * 0.6;
+      };
+
+      const labelWidths = new Map<EntityRole, number>();
+      for (const role of presentRoles) {
+        labelWidths.set(role, measureLabelW(ROLE_LABELS[role], LEGEND_ENTRY_FONT_SIZE));
+      }
+
+      const groupBg = isDark
+        ? mix(palette.surface, palette.bg, 50)
+        : mix(palette.surface, palette.bg, 30);
+
+      const groupName = 'Role';
+      const pillWidth = groupName.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
+
+      let totalWidth: number;
+      let entriesWidth = 0;
+      if (semanticActive) {
+        for (const role of presentRoles) {
+          entriesWidth +=
+            LEGEND_DOT_R * 2 +
+            LEGEND_ENTRY_DOT_GAP +
+            labelWidths.get(role)! +
+            LEGEND_ENTRY_TRAIL;
+        }
+        totalWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth + LEGEND_ENTRY_TRAIL + entriesWidth;
+      } else {
+        totalWidth = pillWidth;
+      }
+
+      const legendX = (viewW - totalWidth) / 2;
+      const legendY = viewH - DIAGRAM_PADDING - LEGEND_HEIGHT;
+
+      const semanticLegendG = svg
+        .append('g')
+        .attr('class', 'er-semantic-legend')
+        .attr('data-legend-group', 'role')
+        .attr('transform', `translate(${legendX}, ${legendY})`)
+        .style('cursor', 'pointer');
+
+      if (semanticActive) {
+        // ── Expanded: outer capsule + inner pill + dot entries ──
+        semanticLegendG
+          .append('rect')
+          .attr('width', totalWidth)
+          .attr('height', LEGEND_HEIGHT)
+          .attr('rx', LEGEND_HEIGHT / 2)
+          .attr('fill', groupBg);
+
+        semanticLegendG
+          .append('rect')
+          .attr('x', LEGEND_CAPSULE_PAD)
+          .attr('y', LEGEND_CAPSULE_PAD)
+          .attr('width', pillWidth)
+          .attr('height', pillH)
+          .attr('rx', pillH / 2)
+          .attr('fill', palette.bg);
+
+        semanticLegendG
+          .append('rect')
+          .attr('x', LEGEND_CAPSULE_PAD)
+          .attr('y', LEGEND_CAPSULE_PAD)
+          .attr('width', pillWidth)
+          .attr('height', pillH)
+          .attr('rx', pillH / 2)
+          .attr('fill', 'none')
+          .attr('stroke', mix(palette.textMuted, palette.bg, 50))
+          .attr('stroke-width', 0.75);
+
+        semanticLegendG
+          .append('text')
+          .attr('x', LEGEND_CAPSULE_PAD + pillWidth / 2)
+          .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
+          .attr('font-size', LEGEND_PILL_FONT_SIZE)
+          .attr('font-weight', '500')
+          .attr('fill', palette.text)
+          .attr('text-anchor', 'middle')
+          .attr('font-family', FONT_FAMILY)
+          .text(groupName);
+
+        let entryX = LEGEND_CAPSULE_PAD + pillWidth + LEGEND_ENTRY_TRAIL;
+        for (const role of presentRoles) {
+          const label = ROLE_LABELS[role];
+          const roleColor = palette.colors[ROLE_COLORS[role]];
+
+          const entryG = semanticLegendG
+            .append('g')
+            .attr('data-legend-entry', role);
+
+          entryG
+            .append('circle')
+            .attr('cx', entryX + LEGEND_DOT_R)
+            .attr('cy', LEGEND_HEIGHT / 2)
+            .attr('r', LEGEND_DOT_R)
+            .attr('fill', roleColor);
+
+          const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+          entryG
+            .append('text')
+            .attr('x', textX)
+            .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
+            .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+            .attr('fill', palette.textMuted)
+            .attr('font-family', FONT_FAMILY)
+            .text(label);
+
+          entryX = textX + labelWidths.get(role)! + LEGEND_ENTRY_TRAIL;
+        }
+      } else {
+        // ── Collapsed: single muted pill, no entries ──
+        semanticLegendG
+          .append('rect')
+          .attr('width', pillWidth)
+          .attr('height', LEGEND_HEIGHT)
+          .attr('rx', LEGEND_HEIGHT / 2)
+          .attr('fill', groupBg);
+
+        semanticLegendG
+          .append('text')
+          .attr('x', pillWidth / 2)
+          .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
+          .attr('font-size', LEGEND_PILL_FONT_SIZE)
+          .attr('font-weight', '500')
+          .attr('fill', palette.textMuted)
+          .attr('text-anchor', 'middle')
+          .attr('font-family', FONT_FAMILY)
+          .text(groupName);
+      }
+    }
+  }
 }
 
 // ============================================================

package/src/infra/layout.ts

@@ -73,6 +73,7 @@ export interface InfraLayoutResult {
   groups: InfraLayoutGroup[];
   /** Diagram-level options (e.g., default-latency-ms, default-uptime). */
   options: Record<string, string>;
+  direction: 'LR' | 'TB';
   width: number;
   height: number;
 }
@@ -110,12 +111,12 @@ const DISPLAY_KEYS = new Set([
 
 /** Display names for width estimation. */
 const DISPLAY_NAMES: Record<string, string> = {
-  'cache-hit': 'cache hit', 'firewall-block': 'fw block',
+  'cache-hit': 'cache hit', 'firewall-block': 'firewall block',
   'ratelimit-rps': 'rate limit RPS', 'latency-ms': 'latency', 'uptime': 'uptime',
   'instances': 'instances', 'max-rps': 'max RPS',
-  'cb-error-threshold': 'CB error', 'cb-latency-threshold-ms': 'CB latency',
+  'cb-error-threshold': 'CB error threshold', 'cb-latency-threshold-ms': 'CB latency threshold',
   'concurrency': 'concurrency', 'duration-ms': 'duration', 'cold-start-ms': 'cold start',
-  'buffer': 'buffer', 'drain-rate': 'drain', 'retention-hours': 'retention', 'partitions': 'partitions',
+  'buffer': 'buffer', 'drain-rate': 'drain rate', 'retention-hours': 'retention', 'partitions': 'partitions',
 };
 
 function countDisplayProps(node: ComputedInfraNode, expanded: boolean, options?: Record<string, string>): number {
@@ -356,18 +357,20 @@ function formatUptime(fraction: number): string {
 // Group separation pass
 // ============================================================
 
-const GROUP_GAP = 24; // min clear gap between group boxes — matches GROUP_HEADER_HEIGHT
+const GROUP_GAP = GROUP_PADDING * 2 + GROUP_HEADER_HEIGHT; // min clear gap between group boxes
 
 export function separateGroups(
   groups: InfraLayoutGroup[],
   nodes: InfraLayoutNode[],
   isLR: boolean,
   maxIterations = 20,
-): void {
+): Map<string, { dx: number; dy: number }> {
   // Symmetric 2D rectangle intersection — no sorting needed, handles all
   // relative positions correctly, stable after mid-pass shifts.
   // Endpoint edge routing is not affected: renderer.ts recomputes border
   // connection points from node x/y at render time via nodeBorderPoint().
+  const groupDeltas = new Map<string, { dx: number; dy: number }>();
+  let converged = false;
   for (let iter = 0; iter < maxIterations; iter++) {
     let anyOverlap = false;
     for (let i = 0; i < groups.length; i++) {
@@ -398,6 +401,11 @@ export function separateGroups(
         if (isLR) groupToShift.y += shift;
         else groupToShift.x += shift;
 
+        // Accumulate the total delta for this group (used by fixEdgeWaypoints)
+        const prev = groupDeltas.get(groupToShift.id) ?? { dx: 0, dy: 0 };
+        if (isLR) groupDeltas.set(groupToShift.id, { dx: prev.dx, dy: prev.dy + shift });
+        else groupDeltas.set(groupToShift.id, { dx: prev.dx + shift, dy: prev.dy });
+
         for (const node of nodes) {
           if (node.groupId === groupToShift.id) {
             if (isLR) node.y += shift;
@@ -406,7 +414,44 @@ export function separateGroups(
         }
       }
     }
-    if (!anyOverlap) break;
+    if (!anyOverlap) { converged = true; break; }
+  }
+  if (!converged && maxIterations > 0) {
+    console.warn(`separateGroups: hit maxIterations (${maxIterations}) without fully resolving all group overlaps`);
+  }
+  return groupDeltas;
+}
+
+export function fixEdgeWaypoints(
+  edges: InfraLayoutEdge[],
+  nodes: InfraLayoutNode[],
+  groupDeltas: Map<string, { dx: number; dy: number }>,
+): void {
+  if (groupDeltas.size === 0) return;
+  const nodeToGroup = new Map<string, string | null>();
+  for (const node of nodes) nodeToGroup.set(node.id, node.groupId);
+
+  for (const edge of edges) {
+    const srcGroup = nodeToGroup.get(edge.sourceId) ?? null;
+    // Group-targeting edges (targetId is a group ID, not a node) return undefined from the map → null →
+    // treated as "ungrouped target", which is the correct approximation.
+    const tgtGroup = nodeToGroup.get(edge.targetId) ?? null;
+    const srcDelta = srcGroup ? groupDeltas.get(srcGroup) : undefined;
+    const tgtDelta = tgtGroup ? groupDeltas.get(tgtGroup) : undefined;
+
+    if (!srcDelta && !tgtDelta) continue; // neither side shifted
+
+    if (srcDelta && tgtDelta && srcGroup !== tgtGroup) {
+      // both sides in different shifted groups — discard, renderer draws a straight line
+      edge.points = [];
+      continue;
+    }
+
+    const delta = srcDelta ?? tgtDelta!;
+    for (const pt of edge.points) {
+      pt.x += delta.dx;
+      pt.y += delta.dy;
+    }
   }
 }
 
@@ -416,15 +461,16 @@ export function separateGroups(
 
 export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<string> | null, collapsedNodes?: Set<string> | null): InfraLayoutResult {
   if (computed.nodes.length === 0) {
-    return { nodes: [], edges: [], groups: [], options: {}, width: 0, height: 0 };
+    return { nodes: [], edges: [], groups: [], options: {}, direction: computed.direction, width: 0, height: 0 };
   }
 
+  const isLR = computed.direction !== 'TB';
   const g = new dagre.graphlib.Graph();
   g.setGraph({
     rankdir: computed.direction === 'TB' ? 'TB' : 'LR',
-    nodesep: 50,
-    ranksep: 100,
-    edgesep: 20,
+    nodesep: isLR ? 70 : 60,
+    ranksep: isLR ? 150 : 120,
+    edgesep: 30,
   });
   g.setDefaultEdgeLabel(() => ({}));
 
@@ -436,7 +482,6 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
 
   // Extra space dagre must reserve for the group bounding box
   const GROUP_INFLATE = GROUP_PADDING * 2 + GROUP_HEADER_HEIGHT;
-  const isLR = computed.direction !== 'TB';
 
   // Add nodes — inflate grouped nodes so dagre accounts for group boxes
   const widthMap = new Map<string, number>();
@@ -591,8 +636,9 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
     };
   });
 
-  // Separate overlapping groups (post-layout pass)
-  separateGroups(layoutGroups, layoutNodes, isLR);
+  // Separate overlapping groups (post-layout pass) and fix stale edge waypoints
+  const groupDeltas = separateGroups(layoutGroups, layoutNodes, isLR);
+  fixEdgeWaypoints(layoutEdges, layoutNodes, groupDeltas);
 
   // Compute total dimensions
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -657,6 +703,7 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
     edges: layoutEdges,
     groups: layoutGroups,
     options: computed.options,
+    direction: computed.direction,
     width: totalWidth,
     height: totalHeight,
   };