@diagrammo/dgmo 0.8.10 → 0.8.12

package/src/echarts.ts

@@ -4,6 +4,12 @@ import { FONT_FAMILY } from './fonts';
 import { injectBranding } from './branding';
 import { renderLegendSvg } from './utils/legend-svg';
 import type { LegendGroupData } from './utils/legend-svg';
+import {
+  type LabelRect,
+  type PointCircle,
+  rectsOverlap,
+  rectCircleOverlap,
+} from './label-layout';
 
 // ============================================================
 // Types
@@ -17,14 +23,14 @@ export type ExtendedChartType =
   | 'heatmap'
   | 'funnel';
 
-export interface ExtendedChartDataPoint {
+interface ExtendedChartDataPoint {
   label: string;
   value: number;
   color?: string;
   lineNumber: number;
 }
 
-export interface ParsedSankeyLink {
+interface ParsedSankeyLink {
   source: string;
   target: string;
   value: number;
@@ -33,14 +39,14 @@ export interface ParsedSankeyLink {
   lineNumber: number;
 }
 
-export interface ParsedFunction {
+interface ParsedFunction {
   name: string;
   expression: string;
   color?: string;
   lineNumber: number;
 }
 
-export interface ParsedScatterPoint {
+interface ParsedScatterPoint {
   name: string;
   x: number;
   y: number;
@@ -50,7 +56,7 @@ export interface ParsedScatterPoint {
   lineNumber: number;
 }
 
-export interface ParsedHeatmapRow {
+interface ParsedHeatmapRow {
   label: string;
   values: number[];
   lineNumber: number;
@@ -733,7 +739,8 @@ export function buildExtendedChartOption(
 
   // Sankey chart has different structure
   if (parsed.type === 'sankey') {
-    return buildSankeyOption(parsed, textColor, colors, titleConfig);
+    const bg = isDark ? palette.surface : palette.bg;
+    return buildSankeyOption(parsed, textColor, colors, bg, titleConfig);
   }
 
   // Chord diagram
@@ -794,6 +801,7 @@ function buildSankeyOption(
   parsed: ParsedExtendedChart,
   textColor: string,
   colors: string[],
+  bg: string,
   titleConfig: EChartsOption['title']
 ): EChartsOption {
   // Extract unique nodes from links
@@ -805,12 +813,18 @@ function buildSankeyOption(
     }
   }
 
-  const nodes = Array.from(nodeSet).map((name, index) => ({
-    name,
-    itemStyle: {
-      color: parsed.nodeColors?.[name] ?? colors[index % colors.length],
-    },
-  }));
+  // Tint colors with background so the diagram feels less saturated.
+  // Nodes get a lighter tint so they stand out; links get more tinting.
+  const tintNode = (c: string) => mix(c, bg, 75);
+  const tintLink = (c: string) => mix(c, bg, 45);
+
+  const nodeColorMap = new Map<string, string>();
+  const nodes = Array.from(nodeSet).map((name, index) => {
+    const raw = parsed.nodeColors?.[name] ?? colors[index % colors.length];
+    const tinted = tintNode(raw);
+    nodeColorMap.set(name, tintLink(raw));
+    return { name, itemStyle: { color: tinted } };
+  });
 
   return {
     ...CHART_BASE,
@@ -834,11 +848,15 @@ function buildSankeyOption(
           source: link.source,
           target: link.target,
           value: link.value,
-          ...(link.color && { lineStyle: { color: link.color } }),
+          lineStyle: {
+            color: link.color
+              ? tintLink(link.color)
+              : nodeColorMap.get(link.source),
+          },
         })),
         lineStyle: {
-          color: 'gradient',
           curveness: 0.5,
+          opacity: 0.6,
         },
         label: {
           color: textColor,
@@ -959,7 +977,7 @@ function buildChordOption(
             };
           });
         })(),
-        roam: true,
+        roam: false,
         label: {
           position: 'right',
           formatter: '{b}',
@@ -1182,37 +1200,6 @@ export function getExtendedChartLegendGroups(
 // Scatter label collision avoidance — greedy placement algorithm
 // ---------------------------------------------------------------------------
 
-interface LabelRect {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
-interface PointCircle {
-  cx: number;
-  cy: number;
-  r: number;
-}
-
-/** Axis-aligned bounding box overlap test. @internal exported for testing */
-export function rectsOverlap(a: LabelRect, b: LabelRect): boolean {
-  return (
-    a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y
-  );
-}
-
-/** Rect vs circle overlap using nearest-point-on-rect distance check. @internal exported for testing */
-export function rectCircleOverlap(
-  rect: LabelRect,
-  circle: PointCircle
-): boolean {
-  const nearestX = Math.max(rect.x, Math.min(circle.cx, rect.x + rect.w));
-  const nearestY = Math.max(rect.y, Math.min(circle.cy, rect.y + rect.h));
-  const dx = nearestX - circle.cx;
-  const dy = nearestY - circle.cy;
-  return dx * dx + dy * dy < circle.r * circle.r;
-}
-
 export interface ScatterLabelPoint {
   name: string;
   px: number;
@@ -1734,12 +1721,22 @@ function buildHeatmapOption(
     });
   });
 
+  // Rotate column labels only when they'd overlap at the default font size.
+  // Estimate: each char ~7px at 12px font; rotate if longest label exceeds
+  // an even share of a ~900px-wide chart.
+  const CHAR_WIDTH = 7;
+  const ESTIMATED_CHART_WIDTH = 900;
+  const longestCol = Math.max(...columns.map((c) => c.length), 0);
+  const slotWidth =
+    columns.length > 0 ? ESTIMATED_CHART_WIDTH / columns.length : Infinity;
+  const needsRotation = longestCol * CHAR_WIDTH > slotWidth * 0.85;
+
   return {
     ...CHART_BASE,
     title: titleConfig,
     grid: {
       left: '3%',
-      right: '10%',
+      right: '3%',
       bottom: '3%',
       top: parsed.title ? '15%' : '5%',
       containLabel: true,
@@ -1747,6 +1744,7 @@ function buildHeatmapOption(
     xAxis: {
       type: 'category',
       data: columns,
+      position: 'top',
       splitArea: {
         show: true,
       },
@@ -1755,12 +1753,19 @@ function buildHeatmapOption(
       },
       axisLabel: {
         color: textColor,
-        fontSize: 16,
+        fontSize: 12,
+        interval: 0,
+        ...(needsRotation && {
+          rotate: -45,
+          width: 200,
+          overflow: 'none' as const,
+        }),
       },
     },
     yAxis: {
       type: 'category',
       data: rowLabels,
+      inverse: true,
       splitArea: {
         show: true,
       },
@@ -1769,16 +1774,14 @@ function buildHeatmapOption(
       },
       axisLabel: {
         color: textColor,
-        fontSize: 16,
+        fontSize: 12,
+        interval: 0,
       },
     },
     visualMap: {
+      show: false,
       min: minValue,
       max: maxValue,
-      calculable: true,
-      orient: 'vertical',
-      right: '2%',
-      top: 'center',
       inRange: {
         color: [
           mix(palette.primary, bg, 30),
@@ -1787,9 +1790,6 @@ function buildHeatmapOption(
           mix(palette.colors.orange, bg, 30),
         ],
       },
-      textStyle: {
-        color: textColor,
-      },
     },
     series: [
       {
@@ -1806,9 +1806,8 @@ function buildHeatmapOption(
           fontWeight: 'bold' as const,
         },
         emphasis: {
-          ...EMPHASIS_SELF,
+          disabled: true,
         },
-        blur: BLUR_DIM,
       },
     ],
   };

package/src/editor/index.ts

@@ -1,5 +1,4 @@
 import { LRLanguage, LanguageSupport } from '@codemirror/language';
-import type { Extension } from '@codemirror/state';
 import { parser } from './dgmo.grammar.js';
 import { dgmoHighlighting } from './highlight';
 
@@ -25,4 +24,4 @@ export const dgmoLanguageSupport = new LanguageSupport(dgmoLanguage);
  * Consumers should add indentationMarkers() separately if desired
  * (from @replit/codemirror-indentation-markers).
  */
-export const dgmoExtension: Extension = dgmoLanguageSupport;
+export const dgmoExtension = dgmoLanguageSupport;

package/src/er/parser.ts

@@ -11,6 +11,7 @@ import {
 import {
   matchTagBlockHeading,
   validateTagValues,
+  validateTagGroupNames,
   stripDefaultModifier,
 } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
@@ -54,7 +55,7 @@ const CONSTRAINT_MAP: Record<string, ERConstraint> = {
 };
 
 // Known options (space-separated, no colon)
-const KNOWN_OPTIONS = new Set(['notation']);
+const KNOWN_OPTIONS = new Set(['notation', 'active-tag']);
 
 // ============================================================
 // Cardinality parsing
@@ -418,6 +419,9 @@ export function parseERDiagram(
         result.diagnostics.push(makeDgmoError(line, msg, 'warning')),
       suggest
     );
+    validateTagGroupNames(result.tagGroups, (line, msg) =>
+      result.diagnostics.push(makeDgmoError(line, msg, 'warning'))
+    );
 
     // Inject defaults for tables without explicit tags
     for (const group of result.tagGroups) {

package/src/gantt/parser.ts

@@ -8,6 +8,7 @@ import type { TagGroup } from '../utils/tag-groups';
 import {
   matchTagBlockHeading,
   stripDefaultModifier,
+  validateTagGroupNames,
 } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -134,6 +135,7 @@ export function parseGantt(
       dependencies: true,
       sort: 'default',
       defaultSwimlaneGroup: null,
+      activeTag: null,
       optionLineNumbers: {},
       holidaysLineNumber: null,
     },
@@ -645,6 +647,9 @@ export function parseGantt(
             );
           }
           break;
+        case 'active-tag':
+          result.options.activeTag = value;
+          break;
       }
       continue;
     }
@@ -872,6 +877,8 @@ export function parseGantt(
     result.options.sort = 'default';
   }
 
+  validateTagGroupNames(result.tagGroups, warn);
+
   return result;
 
   // ── Helper: create a task ───────────────────────────────
@@ -1033,6 +1040,7 @@ const KNOWN_OPTIONS = new Set([
   'dependencies',
   'chart',
   'sort',
+  'active-tag',
 ]);
 
 /** Boolean options that can appear as bare keywords or with `no-` prefix. */

package/src/gantt/renderer.ts

@@ -7,7 +7,7 @@ import * as d3Selection from 'd3-selection';
 import { FONT_FAMILY } from '../fonts';
 import { getSeriesColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
-import { resolveTagColor } from '../utils/tag-groups';
+import { resolveTagColor, resolveActiveTagGroup } from '../utils/tag-groups';
 import { computeTimeTicks } from '../d3';
 import {
   LEGEND_HEIGHT,
@@ -227,12 +227,11 @@ export function renderGantt(
   // ── Compute layout dimensions ───────────────────────────
 
   const seriesColors = getSeriesColors(palette);
-  let currentActiveGroup: string | null =
-    options?.currentActiveGroup !== undefined
-      ? options.currentActiveGroup
-      : resolved.tagGroups.length > 0
-        ? resolved.tagGroups[0].name
-        : null;
+  let currentActiveGroup: string | null = resolveActiveTagGroup(
+    resolved.tagGroups,
+    resolved.options.activeTag ?? undefined,
+    options?.currentActiveGroup
+  );
   let criticalPathActive = false;
 
   // ── Build row list (structural vs tag mode) ─────────────

package/src/gantt/resolver.ts

@@ -7,16 +7,16 @@
 
 import type { GanttTask, GanttNode } from './types';
 
-export interface ResolverMatch {
+interface ResolverMatch {
   task: GanttTask;
 }
 
-export interface ResolverError {
+interface ResolverError {
   kind: 'not_found' | 'ambiguous';
   message: string;
 }
 
-export type ResolverResult = ResolverMatch | ResolverError;
+type ResolverResult = ResolverMatch | ResolverError;
 
 export function isResolverError(r: ResolverResult): r is ResolverError {
   return 'kind' in r;
@@ -53,23 +53,23 @@ export function collectTasks(nodes: GanttNode[]): GanttTask[] {
  */
 export function resolveTaskName(
   name: string,
-  allTasks: GanttTask[],
+  allTasks: GanttTask[]
 ): ResolverResult {
   const trimmed = name.trim();
 
   // 1. Try exact label match (no dots involved)
-  const exactMatches = allTasks.filter(t => t.label === trimmed);
+  const exactMatches = allTasks.filter((t) => t.label === trimmed);
   if (exactMatches.length === 1) {
     return { task: exactMatches[0] };
   }
   if (exactMatches.length > 1) {
     // Multiple tasks with same name — need disambiguation
-    const suggestions = exactMatches.map(t =>
+    const suggestions = exactMatches.map((t) =>
       t.groupPath.length > 0 ? `${t.groupPath.join('.')}.${t.label}` : t.label
     );
     return {
       kind: 'ambiguous',
-      message: `Multiple tasks match "${trimmed}". Did you mean ${suggestions.map(s => `\`${s}\``).join(' or ')}?`,
+      message: `Multiple tasks match "${trimmed}". Did you mean ${suggestions.map((s) => `\`${s}\``).join(' or ')}?`,
     };
   }
 
@@ -80,7 +80,7 @@ export function resolveTaskName(
     const taskLabel = trimmed.substring(lastDotIdx + 1);
 
     // Find tasks whose label matches and whose group path ends with the prefix
-    const matches = allTasks.filter(t => {
+    const matches = allTasks.filter((t) => {
       if (t.label !== taskLabel) return false;
       return matchesGroupPath(t.groupPath, groupPrefix);
     });
@@ -89,12 +89,12 @@ export function resolveTaskName(
       return { task: matches[0] };
     }
     if (matches.length > 1) {
-      const suggestions = matches.map(t =>
+      const suggestions = matches.map((t) =>
         t.groupPath.length > 0 ? `${t.groupPath.join('.')}.${t.label}` : t.label
       );
       return {
         kind: 'ambiguous',
-        message: `Multiple tasks match "${trimmed}". Did you mean ${suggestions.map(s => `\`${s}\``).join(' or ')}?`,
+        message: `Multiple tasks match "${trimmed}". Did you mean ${suggestions.map((s) => `\`${s}\``).join(' or ')}?`,
       };
     }
 
@@ -106,8 +106,8 @@ export function resolveTaskName(
   }
 
   // 3. No match found — try case-insensitive as a fallback for suggestions
-  const caseInsensitive = allTasks.filter(t =>
-    t.label.toLowerCase() === trimmed.toLowerCase()
+  const caseInsensitive = allTasks.filter(
+    (t) => t.label.toLowerCase() === trimmed.toLowerCase()
   );
   if (caseInsensitive.length > 0) {
     return {
@@ -134,11 +134,16 @@ export function resolveTaskName(
 function matchesGroupPath(groupPath: string[], prefix: string): boolean {
   // Simple case: prefix is a single segment
   if (!prefix.includes('.')) {
-    return groupPath.some(g => g === prefix);
+    return groupPath.some((g) => g === prefix);
   }
 
   // Multi-segment prefix: try matching from the start of the group path
   const pathStr = groupPath.join('.');
   // Check if the full prefix matches any contiguous section of the path
-  return pathStr === prefix || pathStr.endsWith('.' + prefix) || pathStr.startsWith(prefix + '.') || pathStr.includes('.' + prefix + '.');
+  return (
+    pathStr === prefix ||
+    pathStr.endsWith('.' + prefix) ||
+    pathStr.startsWith(prefix + '.') ||
+    pathStr.includes('.' + prefix + '.')
+  );
 }

package/src/gantt/types.ts

@@ -115,6 +115,7 @@ export interface GanttOptions {
   dependencies: boolean;
   sort: 'default' | 'tag';
   defaultSwimlaneGroup: string | null; // tag group name from `sort: tag:Team`
+  activeTag: string | null; // from `active-tag GroupName` or `active-tag none`
   /** Line numbers for option/block keywords — maps key to source line */
   optionLineNumbers: Record<string, number>;
   holidaysLineNumber: number | null;

package/src/index.ts

@@ -440,6 +440,8 @@ export {
   tokyoNightPalette,
   oneDarkPalette,
   boldPalette,
+  draculaPalette,
+  monokaiPalette,
   // Mermaid bridge
   buildMermaidThemeVars,
   buildThemeCSS,

package/src/infra/parser.ts

@@ -15,6 +15,7 @@ import {
 import {
   matchTagBlockHeading,
   stripDefaultModifier,
+  validateTagGroupNames,
 } from '../utils/tag-groups';
 import type {
   ParsedInfra,
@@ -77,6 +78,7 @@ const TOP_LEVEL_OPTIONS = new Set([
   'default-latency-ms',
   'default-uptime',
   'default-rps',
+  'active-tag',
 ]);
 
 // ============================================================
@@ -726,6 +728,8 @@ export function parseInfra(content: string): ParsedInfra {
     }
   }
 
+  validateTagGroupNames(result.tagGroups, warn);
+
   return result;
 }
 

package/src/kanban/parser.ts

@@ -4,6 +4,7 @@ import { resolveColor } from '../colors';
 import {
   matchTagBlockHeading,
   stripDefaultModifier,
+  validateTagGroupNames,
 } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -29,7 +30,7 @@ const COLUMN_RE = /^\[(.+?)\](?:\s*\(([^)]+)\))?\s*(?:\|\s*(.+))?$/;
 const LEGACY_COLUMN_RE = /^==\s+(.+?)\s*(?:\[wip:\s*(\d+)\])?\s*==$/;
 
 /** Known kanban options (key-value). */
-const KNOWN_OPTIONS = new Set(['hide']);
+const KNOWN_OPTIONS = new Set(['hide', 'active-tag']);
 /** Known kanban boolean options (bare keyword = on). */
 const KNOWN_BOOLEANS = new Set<string>(['no-auto-color']);
 
@@ -366,6 +367,8 @@ export function parseKanban(
     return fail(1, 'No columns found. Use [Column Name] to define columns');
   }
 
+  validateTagGroupNames(result.tagGroups, warn);
+
   return result;
 }
 

package/src/kanban/renderer.ts

@@ -15,7 +15,7 @@ import type {
 } from './types';
 import { parseKanban } from './parser';
 import { isArchiveColumn } from './mutations';
-import { LEGEND_HEIGHT } from '../utils/legend-constants';
+import { LEGEND_HEIGHT, measureLegendText } from '../utils/legend-constants';
 import { renderLegendD3 } from '../utils/legend-d3';
 import type { LegendConfig, LegendState } from '../utils/legend-types';
 
@@ -200,8 +200,7 @@ function computeLayout(
   }
 
   const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING;
-  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
-  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING + legendSpace;
+  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING;
 
   return { columns: columnLayouts, totalWidth, totalHeight };
 }
@@ -249,19 +248,23 @@ export function renderKanban(
       .text(parsed.title);
   }
 
-  // Legend (bottom of diagram)
+  // Legend (top-right, inline with title)
   if (parsed.tagGroups.length > 0) {
-    const legendY = height - LEGEND_HEIGHT;
+    const titleTextWidth = parsed.title
+      ? measureLegendText(parsed.title, TITLE_FONT_SIZE) + 16
+      : 0;
+    const legendX = DIAGRAM_PADDING + titleTextWidth;
+    const legendY = DIAGRAM_PADDING + (TITLE_FONT_SIZE - LEGEND_HEIGHT) / 2;
     const legendConfig: LegendConfig = {
       groups: parsed.tagGroups,
-      position: { placement: 'top-center', titleRelation: 'below-title' },
+      position: { placement: 'top-center', titleRelation: 'inline-with-title' },
       mode: exportDims ? 'inline' : 'fixed',
     };
     const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
     const legendG = svg
       .append('g')
       .attr('class', 'kanban-legend')
-      .attr('transform', `translate(${DIAGRAM_PADDING},${legendY})`);
+      .attr('transform', `translate(${legendX},${legendY})`);
     renderLegendD3(
       legendG,
       legendConfig,
@@ -269,7 +272,7 @@ export function renderKanban(
       palette,
       isDark,
       undefined,
-      width - DIAGRAM_PADDING * 2
+      width - legendX - DIAGRAM_PADDING
     );
   }