@transitrix/diagrams 1.0.0 → 1.1.0

package/src/activity-card/layout.ts

@@ -1,194 +1,324 @@
-// Activity Card — single-page layout (pure geometry; the preview paints SVG).
-//
-// Top-to-bottom card sections (spec §4 / §5):
-//   1. Title         — project name
-//   2. Dates band    — Initiation (valid_from) · Planned start · Planned end
-//   3. Milestones    — narrative timeline, markers left→right by date
-//   4. Motivation    — Factors → Goals → Changes columns with F→G→C edges
-//   5. Child activities — activities whose parent = the project
-//
-// The §5.1 ArchiMate-class convention ("(Work Package)", "(Implementation
-// Event)") is applied HERE, derived from element TYPE — there is no
-// archimate_class data field.
-
-import type {
-  ActivityCardLayout,
-  ActivityCardLayoutOptions,
-  ChainEdge,
-  ChainNode,
-  ChildActivityRow,
-  DateField,
-  MilestoneMarker,
-  ResolvedActivityCard,
-  SectionHeader,
-} from './types.js';
-
-const DEFAULTS = {
-  cardWidth: 780,
-  columnGap: 28,
-  rowGap: 12,
-} as const;
-
-// Fixed metrics (px). Kept local — the card has no user-tunable spacing yet.
-const PAD = 20;
-const TITLE_H = 38;
-const DATES_H = 56;
-const SECTION_HEADER_H = 26;
-const SECTION_GAP = 16;
-const MILESTONE_W = 168;
-const MILESTONE_H = 64;
-const MILESTONE_GAP = 16;
-const CHAIN_NODE_H = 46;
-const CHILD_ROW_H = 42;
-
-/** ArchiMate class per §5.1 — derived from element TYPE, never stored. */
-export const ARCHIMATE_CLASS = {
-  ACTIVITY: 'Work Package',
-  MILESTONE: 'Implementation Event',
-} as const;
-
-export function layoutActivityCard(
-  card: ResolvedActivityCard,
-  options?: ActivityCardLayoutOptions,
-): ActivityCardLayout {
-  const opts = { ...DEFAULTS, ...(options ?? {}) };
-  const contentX = PAD;
-  const contentW = opts.cardWidth - PAD * 2;
-
-  let cursorY = PAD;
-
-  // 1. Title
-  const title = { name: card.project.name, x: contentX, y: cursorY + TITLE_H / 2 };
-  cursorY += TITLE_H;
-
-  // 2. Dates band — three equal cells.
-  const dateDefs: Array<{ label: string; value: string }> = [
-    { label: 'Initiation', value: card.project.valid_from ?? '—' },
-    { label: 'Planned start', value: card.project.start_date ?? '—' },
-    { label: 'Planned end', value: card.project.end_date ?? '—' },
-  ];
-  const dateGap = 12;
-  const dateCellW = (contentW - dateGap * (dateDefs.length - 1)) / dateDefs.length;
-  const dateFields: DateField[] = dateDefs.map((d, i) => ({
-    label: d.label,
-    value: d.value,
-    x: contentX + i * (dateCellW + dateGap),
-    y: cursorY,
-    width: dateCellW,
-    height: DATES_H,
-  }));
-  cursorY += DATES_H + SECTION_GAP;
-
-  const sectionHeaders: SectionHeader[] = [];
-  const pushHeader = (label: string): void => {
-    sectionHeaders.push({ label, x: contentX, y: cursorY, width: contentW, height: SECTION_HEADER_H });
-    cursorY += SECTION_HEADER_H + 8;
-  };
-
-  // 3. Milestones — timeline markers, wrapped left→right.
-  const milestones: MilestoneMarker[] = [];
-  if (card.milestones.length > 0) {
-    pushHeader('Milestones');
-    const perRow = Math.max(1, Math.floor((contentW + MILESTONE_GAP) / (MILESTONE_W + MILESTONE_GAP)));
-    const rowStartY = cursorY;
-    card.milestones.forEach((m, i) => {
-      const col = i % perRow;
-      const row = Math.floor(i / perRow);
-      milestones.push({
-        id: m.id,
-        name: m.name,
-        date: m.date,
-        archimateClass: ARCHIMATE_CLASS.MILESTONE,
-        x: contentX + col * (MILESTONE_W + MILESTONE_GAP),
-        y: rowStartY + row * (MILESTONE_H + opts.rowGap),
-        width: MILESTONE_W,
-        height: MILESTONE_H,
-      });
-    });
-    const rows = Math.ceil(card.milestones.length / perRow);
-    cursorY = rowStartY + rows * (MILESTONE_H + opts.rowGap) - opts.rowGap + SECTION_GAP;
-  }
-
-  // 4. Motivation chain — Factors | Goals | Changes columns.
-  const chainEdges: ChainEdge[] = [];
-  const factorsCol: ChainNode[] = [];
-  const goalsCol: ChainNode[] = [];
-  const changesCol: ChainNode[] = [];
-  const { factors, goals, changes } = card.motivation;
-  if (factors.length + goals.length + changes.length > 0) {
-    pushHeader('Motivation — Factors → Goals → Changes');
-    const colW = (contentW - opts.columnGap * 2) / 3;
-    const colX = [contentX, contentX + colW + opts.columnGap, contentX + (colW + opts.columnGap) * 2];
-    const colStartY = cursorY;
-
-    const stack = (items: { id: string; name: string }[], colIndex: number, into: ChainNode[]) => {
-      items.forEach((it, i) => {
-        into.push({
-          id: it.id,
-          name: it.name,
-          x: colX[colIndex],
-          y: colStartY + i * (CHAIN_NODE_H + opts.rowGap),
-          width: colW,
-          height: CHAIN_NODE_H,
-        });
-      });
-    };
-    stack(factors, 0, factorsCol);
-    stack(goals, 1, goalsCol);
-    stack(changes, 2, changesCol);
-
-    // Edges: factor→goal (goal.factorIds), goal→change (change.goalIds).
-    const factorIds = new Set(factorsCol.map((n) => n.id));
-    const goalIds = new Set(goalsCol.map((n) => n.id));
-    for (const g of goals) {
-      for (const fid of g.factorIds) {
-        if (factorIds.has(fid)) chainEdges.push({ sourceId: fid, targetId: g.id });
-      }
-    }
-    for (const c of changes) {
-      for (const gid of c.goalIds) {
-        if (goalIds.has(gid)) chainEdges.push({ sourceId: gid, targetId: c.id });
-      }
-    }
-
-    const tallest = Math.max(factorsCol.length, goalsCol.length, changesCol.length);
-    cursorY = colStartY + tallest * (CHAIN_NODE_H + opts.rowGap) - opts.rowGap + SECTION_GAP;
-  }
-
-  // 5. Child activities — full-width rows.
-  const childActivities: ChildActivityRow[] = [];
-  if (card.childActivities.length > 0) {
-    pushHeader('Child activities');
-    const rowStartY = cursorY;
-    card.childActivities.forEach((a, i) => {
-      const metaBits: string[] = [];
-      if (a.start_date || a.end_date) metaBits.push(`${a.start_date ?? '?'} → ${a.end_date ?? '?'}`);
-      if (a.owner) metaBits.push(a.owner);
-      childActivities.push({
-        id: a.id,
-        name: a.name,
-        archimateClass: ARCHIMATE_CLASS.ACTIVITY,
-        meta: metaBits.join(' · '),
-        x: contentX,
-        y: rowStartY + i * (CHILD_ROW_H + opts.rowGap),
-        width: contentW,
-        height: CHILD_ROW_H,
-      });
-    });
-    cursorY =
-      rowStartY + card.childActivities.length * (CHILD_ROW_H + opts.rowGap) - opts.rowGap + SECTION_GAP;
-  }
-
-  const totalHeight = cursorY - SECTION_GAP + PAD;
-
-  return {
-    bounds: { x: 0, y: 0, width: opts.cardWidth, height: Math.max(totalHeight, PAD * 2 + TITLE_H) },
-    title,
-    dateFields,
-    sectionHeaders,
-    milestones,
-    chainColumns: { factors: factorsCol, goals: goalsCol, changes: changesCol },
-    chainEdges,
-    childActivities,
-  };
-}
+// Activity Card — single-page layout (pure geometry; the preview paints SVG).
+//
+// Card structure (top to bottom):
+//   Header  — title row (name + type badge + status badge)
+//             dates row (Initiation · Planned start · Planned end)
+//             roles row (Initiator · Owner · Sponsor · PM)
+//   Body    — description (optional)
+//             chain: Drivers → Assessments → Goals → Changes (vertical)
+//             milestones
+//             child activities
+//   Footer  — notes (optional)
+//
+// The §5.1 ArchiMate-class convention is applied here, derived from element
+// TYPE — there is no archimate_class data field.
+
+import type {
+  ActivityCardLayout,
+  ActivityCardLayoutOptions,
+  Badge,
+  ChainEdge,
+  ChainNode,
+  ChainSectionLayout,
+  ChildActivityRow,
+  DateField,
+  InfoRow,
+  MilestoneMarker,
+  ResolvedActivityCard,
+  StakeholderRoleSlot,
+} from './types.js';
+
+const DEFAULTS = {
+  cardWidth: 780,
+  rowGap: 10,
+} as const;
+
+// Fixed metrics (px).
+const PAD = 20;
+const TITLE_H = 44;
+const BADGE_H = 22;
+const BADGE_HPAD = 12;
+const BADGE_GAP = 8;
+const DATES_H = 62;
+const ROLES_H = 58;
+const CELL_GAP = 12;
+const SECTION_GAP = 16;
+const CONNECTOR_H = 20;
+const CHAIN_HEADER_H = 24;
+const CHAIN_NODE_H = 48;
+const CHAIN_GAP_H = 32;
+const CHAIN_INNER_PAD = 12;
+const MILESTONE_W = 168;
+const MILESTONE_H = 72;
+const MILESTONE_GAP = 16;
+const CHILD_ROW_H = 42;
+const INFO_LINE_H = 18;
+const INFO_ROW_BASE_H = 50;
+const INFO_CHAR_W = 7;
+
+/** §5.1 ArchiMate class — derived from element TYPE, never stored. */
+export const ARCHIMATE_CLASS = {
+  ACTIVITY: 'Work Package',
+  MILESTONE: 'Implementation Event',
+} as const;
+
+function wrapText(text: string, maxChars: number, maxLines: number): string[] {
+  const trimmed = (text ?? '').trim();
+  if (trimmed.length === 0) return [];
+  const budget = Math.max(1, maxChars);
+  const words = trimmed.split(/\s+/);
+  const lines: string[] = [];
+  let cur = '';
+  const flush = (): void => {
+    if (cur.length > 0) { lines.push(cur); cur = ''; }
+  };
+  for (const word of words) {
+    if (word.length > budget) {
+      flush();
+      let rest = word;
+      while (rest.length > budget) { lines.push(rest.slice(0, budget)); rest = rest.slice(budget); }
+      cur = rest;
+      continue;
+    }
+    const candidate = cur.length > 0 ? `${cur} ${word}` : word;
+    if (candidate.length > budget) { flush(); cur = word; } else { cur = candidate; }
+  }
+  flush();
+  if (lines.length > maxLines) {
+    const capped = lines.slice(0, maxLines);
+    const last = capped[maxLines - 1];
+    const clipped = last.length > budget - 1 ? last.slice(0, budget - 1) : last;
+    capped[maxLines - 1] = `${clipped.replace(/…$/, '')}…`;
+    return capped;
+  }
+  return lines;
+}
+
+function formatBadgeLabel(raw: string): string {
+  return raw.replace(/_/g, ' ');
+}
+
+function badgeWidth(label: string): number {
+  return Math.max(56, label.length * 7 + BADGE_HPAD * 2);
+}
+
+export function layoutActivityCard(
+  card: ResolvedActivityCard,
+  options?: ActivityCardLayoutOptions,
+): ActivityCardLayout {
+  const opts = { ...DEFAULTS, ...(options ?? {}) };
+  const contentX = PAD;
+  const contentW = opts.cardWidth - PAD * 2;
+  const maxChars = Math.max(8, Math.floor(contentW / INFO_CHAR_W));
+  let cursorY = PAD;
+
+  // ── 1. Title row — name + type badge + status badge ──────────────────────
+  const titleRow = { name: card.project.name, x: contentX, y: cursorY + TITLE_H / 2 };
+
+  let badgeRightX = contentX + contentW;
+  let statusBadge: Badge | undefined;
+  let activityTypeBadge: Badge | undefined;
+
+  if (card.project.status) {
+    const label = formatBadgeLabel(card.project.status);
+    const w = badgeWidth(label);
+    badgeRightX -= w;
+    statusBadge = { label, x: badgeRightX, y: cursorY + (TITLE_H - BADGE_H) / 2, width: w, height: BADGE_H };
+    badgeRightX -= BADGE_GAP;
+  }
+  if (card.project.activity_type) {
+    const label = formatBadgeLabel(card.project.activity_type);
+    const w = badgeWidth(label);
+    badgeRightX -= w;
+    activityTypeBadge = { label, x: badgeRightX, y: cursorY + (TITLE_H - BADGE_H) / 2, width: w, height: BADGE_H };
+  }
+  cursorY += TITLE_H;
+
+  // ── 2. Dates row ─────────────────────────────────────────────────────────
+  const dateDefs: Array<{ label: string; value: string }> = [
+    { label: 'Initiation', value: card.project.valid_from ?? '—' },
+    { label: 'Planned start', value: card.project.start_date ?? '—' },
+    { label: 'Planned end', value: card.project.end_date ?? '—' },
+  ];
+  const dateCellW = (contentW - CELL_GAP * (dateDefs.length - 1)) / dateDefs.length;
+  const dateFields: DateField[] = dateDefs.map((d, i) => ({
+    label: d.label, value: d.value,
+    x: contentX + i * (dateCellW + CELL_GAP), y: cursorY,
+    width: dateCellW, height: DATES_H,
+  }));
+  cursorY += DATES_H + CELL_GAP;
+
+  // ── 3. Stakeholder role slots — 2-column grid ────────────────────────────
+  const ROLE_DEFS: Array<{ role: string; label: string }> = [
+    { role: 'initiator', label: 'Initiator' },
+    { role: 'owner', label: 'Owner' },
+    { role: 'sponsor', label: 'Sponsor' },
+    { role: 'project_manager', label: 'PM' },
+  ];
+  const ROLE_COLS = 2;
+  const roleSlotW = (contentW - CELL_GAP * (ROLE_COLS - 1)) / ROLE_COLS;
+  const stakeholderRoleSlots: StakeholderRoleSlot[] = ROLE_DEFS.map(({ role, label }, i) => {
+    const col = i % ROLE_COLS;
+    const row = Math.floor(i / ROLE_COLS);
+    const match = (card.stakeholders ?? []).find((s) => s.role === role);
+    return {
+      role: label,
+      name: match?.name ?? '—',
+      x: contentX + col * (roleSlotW + CELL_GAP),
+      y: cursorY + row * (ROLES_H + CELL_GAP),
+      width: roleSlotW, height: ROLES_H,
+    };
+  });
+  const roleRows = Math.ceil(ROLE_DEFS.length / ROLE_COLS);
+  cursorY += roleRows * (ROLES_H + CELL_GAP) - CELL_GAP + SECTION_GAP;
+
+  // ── 4. Description row (optional) ────────────────────────────────────────
+  let descriptionRow: InfoRow | undefined;
+  const description = (card.cardDescription ?? '').trim();
+  if (description.length > 0) {
+    const valueLines = wrapText(description, maxChars, 5);
+    const lines = valueLines.length > 0 ? valueLines : ['—'];
+    const height = INFO_ROW_BASE_H + lines.length * INFO_LINE_H;
+    descriptionRow = { label: 'Description', valueLines: lines, x: contentX, y: cursorY, width: contentW, height };
+    cursorY += height + SECTION_GAP;
+  }
+
+  // ── 5. Chain: Drivers → Assessments → Goals → Changes ────────────────────
+  // Each section is a full-width band with a header label and stacked node rows.
+  // An empty section shows a gap indicator ("— not on file") so the author
+  // sees which parts of the narrative are missing.
+
+  const chainSections: ChainSectionLayout[] = [];
+  const chainEdges: ChainEdge[] = [];
+
+  function pushChainSection(
+    type: ChainSectionLayout['type'],
+    label: string,
+    subtitle: string,
+    rawNodes: Array<{ id: string; name: string; meta?: string }>,
+  ): void {
+    const isEmpty = rawNodes.length === 0;
+    const sectionY = cursorY;
+    const nodeStartY = sectionY + CHAIN_HEADER_H + 8;
+    const nodeW = contentW - CHAIN_INNER_PAD * 2;
+
+    const nodes: ChainNode[] = isEmpty ? [] : rawNodes.map((n, i) => ({
+      id: n.id,
+      name: n.name,
+      meta: n.meta,
+      x: contentX + CHAIN_INNER_PAD,
+      y: nodeStartY + i * (CHAIN_NODE_H + opts.rowGap),
+      width: nodeW,
+      height: CHAIN_NODE_H,
+    }));
+
+    const bodyH = isEmpty
+      ? CHAIN_GAP_H
+      : rawNodes.length * (CHAIN_NODE_H + opts.rowGap) - opts.rowGap;
+    const sectionH = CHAIN_HEADER_H + 8 + bodyH + 8;
+
+    chainSections.push({ type, label, subtitle, nodes, isEmpty, x: contentX, y: sectionY, width: contentW, height: sectionH });
+    cursorY += sectionH + CONNECTOR_H;
+  }
+
+  const { drivers, goals, changes } = card.motivation;
+  const assessments = card.assessments ?? [];
+
+  pushChainSection('drivers', 'Drivers', 'What prompted this initiative?',
+    drivers.map((d) => ({ id: d.id, name: d.name })));
+
+  pushChainSection('assessments', 'Assessments', 'What is the current gap?',
+    assessments.map((a) => ({ id: a.id, name: a.name, meta: a.observed_at })));
+
+  pushChainSection('goals', 'Goals', 'What outcome do we target?',
+    goals.map((g) => ({ id: g.id, name: g.name })));
+
+  pushChainSection('changes', 'Changes', 'What will change?',
+    changes.map((c) => ({ id: c.id, name: c.name })));
+
+  // Remove trailing CONNECTOR_H — last section connects to milestones with SECTION_GAP.
+  cursorY = cursorY - CONNECTOR_H + SECTION_GAP;
+
+  // Node-level chain edges.
+  const driverIdSet = new Set(drivers.map((d) => d.id));
+  const goalIdSet = new Set(goals.map((g) => g.id));
+  for (const a of assessments) {
+    if (driverIdSet.has(a.driverId)) chainEdges.push({ sourceId: a.driverId, targetId: a.id });
+  }
+  for (const g of goals) {
+    for (const did of g.driverIds) {
+      if (driverIdSet.has(did)) chainEdges.push({ sourceId: did, targetId: g.id });
+    }
+  }
+  for (const c of changes) {
+    for (const gid of c.goalIds) {
+      if (goalIdSet.has(gid)) chainEdges.push({ sourceId: gid, targetId: c.id });
+    }
+  }
+
+  // ── 6. Milestones ────────────────────────────────────────────────────────
+  const milestones: MilestoneMarker[] = [];
+  if (card.milestones.length > 0) {
+    const perRow = Math.max(1, Math.floor((contentW + MILESTONE_GAP) / (MILESTONE_W + MILESTONE_GAP)));
+    card.milestones.forEach((m, i) => {
+      const col = i % perRow;
+      const row = Math.floor(i / perRow);
+      milestones.push({
+        id: m.id, name: m.name, date: m.date,
+        archimateClass: ARCHIMATE_CLASS.MILESTONE,
+        x: contentX + col * (MILESTONE_W + MILESTONE_GAP),
+        y: cursorY + row * (MILESTONE_H + opts.rowGap),
+        width: MILESTONE_W, height: MILESTONE_H,
+      });
+    });
+    const rows = Math.ceil(card.milestones.length / perRow);
+    cursorY += rows * (MILESTONE_H + opts.rowGap) - opts.rowGap + SECTION_GAP;
+  }
+
+  // ── 7. Child activities ───────────────────────────────────────────────────
+  const childActivities: ChildActivityRow[] = [];
+  if (card.childActivities.length > 0) {
+    card.childActivities.forEach((a, i) => {
+      const metaBits: string[] = [];
+      if (a.start_date || a.end_date) metaBits.push(`${a.start_date ?? '?'} → ${a.end_date ?? '?'}`);
+      if (a.owner) metaBits.push(a.owner);
+      childActivities.push({
+        id: a.id, name: a.name,
+        archimateClass: ARCHIMATE_CLASS.ACTIVITY,
+        meta: metaBits.join(' · '),
+        x: contentX,
+        y: cursorY + i * (CHILD_ROW_H + opts.rowGap),
+        width: contentW, height: CHILD_ROW_H,
+      });
+    });
+    cursorY += card.childActivities.length * (CHILD_ROW_H + opts.rowGap) - opts.rowGap + SECTION_GAP;
+  }
+
+  // ── 8. Footer — notes ────────────────────────────────────────────────────
+  let footerRow: InfoRow | undefined;
+  const notes = (card.notes ?? '').trim();
+  if (notes.length > 0) {
+    const valueLines = wrapText(notes, maxChars, 10);
+    const lines = valueLines.length > 0 ? valueLines : ['—'];
+    const height = INFO_ROW_BASE_H + lines.length * INFO_LINE_H;
+    footerRow = { label: 'Notes', valueLines: lines, x: contentX, y: cursorY, width: contentW, height };
+    cursorY += height + SECTION_GAP;
+  }
+
+  const totalHeight = cursorY - SECTION_GAP + PAD;
+
+  return {
+    bounds: { x: 0, y: 0, width: opts.cardWidth, height: Math.max(totalHeight, PAD * 2 + TITLE_H) },
+    titleRow,
+    activityTypeBadge,
+    statusBadge,
+    dateFields,
+    stakeholderRoleSlots,
+    descriptionRow,
+    chainSections,
+    chainEdges,
+    milestones,
+    childActivities,
+    footerRow,
+  };
+}