@transitrix/diagrams 1.13.2 → 1.13.3

package/dist/activities/types.d.ts

@@ -24,6 +24,11 @@ export interface Activity {
     resources_cost?: number;
     effort?: number;
     link?: string;
+    /** Derived display metadata, loaded from the model sidecar. */
+    progress?: {
+        percent: number;
+        computedAt: string;
+    };
     description?: string;
     delivers_changes?: string[];
 }

package/dist/fgca/parse-canonical.js

@@ -280,6 +280,7 @@ export function parseCanonicalFGCA(input, outOfScopeGoalIds, outOfScopeFactorIds
             name: String(el['name'] ?? ''),
             goal_id: goalRefs.length > 0 ? goalRefs[0] : null,
             ...(typeVal !== undefined ? { type: typeVal } : {}),
+            ...(typeof el['link'] === 'string' ? { link: el['link'] } : {}),
             ...(progressVal !== undefined ? { progress: progressVal } : {}),
         };
     });

package/dist/fgca/preview-layout.d.ts

@@ -19,6 +19,7 @@ export interface FGCAPreviewChange {
     activity_ids: Array<number | string>;
 }
 export interface FGCAPreviewActivity {
+    link?: string;
     id: number | string;
     name: string;
     goal_id?: number | string | null;

package/dist/fgca/preview-layout.js

@@ -250,7 +250,7 @@ export function layoutFGCAPreview(inputDoc, options = {}) {
             ...changes.map(c => ({ id: `change_${c.id}`, label: c.name })),
             ...virtualChanges.map(v => ({ id: v.id, label: '–', virtual: true })),
         ],
-        activity: doc.activities.map(a => ({ id: `activity_${a.id}`, label: a.name, progress: a.progress, linked: a.goal_id != null })),
+        activity: doc.activities.map(a => ({ id: `activity_${a.id}`, label: a.name, progress: a.progress, linked: Boolean(a.link?.trim()) })),
     };
     // Build predecessor map: for each node, which node IDs in the previous column
     // connect to it from the left. Used for barycenter crossing minimization.

package/dist/fgca/types.d.ts

@@ -24,6 +24,8 @@ export interface ActivityItem {
     activity_type_id?: number;
     /** Canonical values: initiative | programme | project | work_package. Unknown values pass through without error. */
     type?: string;
+    /** Tracker link, independent of goal relationships. */
+    link?: string;
     progress?: {
         percent: number;
         computedAt: string;

package/dist/webview/completion-percent.d.ts

@@ -0,0 +1,10 @@
+/** Shared completion display contract for Action, DGA and DGCA previews. */
+export interface ActionProgress {
+    percent: number;
+    computedAt: string;
+}
+export declare function completionPercentState(progress: ActionProgress | undefined, linked: boolean, enabled?: boolean, now?: number): {
+    label: string;
+    stale: boolean;
+} | undefined;
+export declare function completionPercentSvg(progress: ActionProgress | undefined, linked: boolean, x: number, y: number, enabled?: boolean): string;

package/dist/webview/completion-percent.js

@@ -0,0 +1,12 @@
+export function completionPercentState(progress, linked, enabled = true, now = Date.now()) {
+    if (!enabled)
+        return undefined;
+    if (progress && Number.isFinite(progress.percent) && progress.percent >= 0 && progress.percent <= 100 && Number.isFinite(Date.parse(progress.computedAt))) {
+        return { label: `${progress.percent}%`, stale: now - Date.parse(progress.computedAt) > 7 * 24 * 60 * 60 * 1000 };
+    }
+    return linked ? { label: '–%', stale: false } : undefined;
+}
+export function completionPercentSvg(progress, linked, x, y, enabled = true) {
+    const state = completionPercentState(progress, linked, enabled);
+    return state ? `<text class="text-id completion-percent" x="${x}" y="${y}" text-anchor="end" dominant-baseline="hanging" font-size="10"${state.stale ? ' opacity="0.5"' : ''}>${state.label}</text>` : '';
+}

package/dist/webview/render-activities.js

@@ -16,6 +16,7 @@
  * in `renderActivitiesNetworkBody` and is shared verbatim with the VS Code
  * preview's `networkSvg`.
  */
+import { completionPercentSvg } from './completion-percent.js';
 import { layoutActivities } from '../activities/layout.js';
 import { computeCpm } from '../activities/cpm.js';
 import { horizontalCubicEdgePath, bowedCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
@@ -127,6 +128,7 @@ function activityNodeSvg(n, x, y, isCritical, isMilestone, durLabel) {
     return [
         `<rect class="${cls}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>`,
         textSvg,
+        completionPercentSvg(n.data.progress, Boolean(n.data.link?.trim()), x + n.width - 8, y + 6),
         durLabel ? `<text class="text-secondary" x="${x + n.width - 8}" y="${y + n.height - 8}" text-anchor="end">${durLabel}</text>` : '',
     ].filter(Boolean).join('\n');
 }

package/dist/webview/render-fgca.d.ts

@@ -1,17 +1,3 @@
-/**
- * Browser-safe SVG renderer for the canonical DGCA and DGA notations.
- *
- * Step 4 of the IntelliJ epic (ADR 0001): the webview bundle must turn a
- * validated DGCA/DGA document into renderable SVG so JCEF can drop it into the
- * preview panel. The VS Code path lives in `extension/src/dgca-preview.ts` and
- * pulls in VS Code-specific concerns (themes, title block, save dialogs,
- * spacing/scope controls); this module is the host-neutral subset — pure
- * column layout → SVG with no VS Code APIs, no `node:fs`, no `node:path`.
- *
- * DGCA and DGA share the same renderer; DGA only differs by hiding the
- * `change` column (`hideChanges` / the layout's Goal → Activity collapse),
- * exactly as the extension preview does.
- */
 import { layoutFGCAPreview } from '../fgca/preview-layout.js';
 import type { FGCADoc } from '../fgca/validate.js';
 import { type EdgeStyle } from '../edge-path.js';

package/dist/webview/render-fgca.js

@@ -12,6 +12,7 @@
  * `change` column (`hideChanges` / the layout's Goal → Activity collapse),
  * exactly as the extension preview does.
  */
+import { completionPercentSvg } from './completion-percent.js';
 import { layoutFGCAPreview, FGCA_NODE_W, FGCA_NODE_H, FGCA_HEADER_H as HEADER_H, FGCA_PAD as PAD, } from '../fgca/preview-layout.js';
 import { previewEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { parseNodeSizePreset, resolveDgcaNodeSize } from '../node-size-presets.js';
@@ -39,7 +40,6 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature,
     const edgeStyle = bodyOptions.edgeStyle;
     const showCompletionPercent = bodyOptions.showCompletionPercent ?? true;
     const headerTruncate = Math.max(8, Math.floor((nodeWidth - 16) / 7));
-    const STALENESS_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;
     const headerSvg = columns
         .map(({ col, x }) => `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`)
         .join('\n');
@@ -69,20 +69,8 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature,
         const typeBadge = n.type && n.col === 'activity'
             ? `<text class="text-id" x="${n.x + nodeWidth - 6}" y="${n.y + 10}" text-anchor="end" dominant-baseline="hanging" font-size="10">${escXml(n.type)}</text>`
             : '';
-        const progressBadge = showCompletionPercent && n.col === 'activity'
-            ? (() => {
-                if (n.progress) {
-                    const computedAt = new Date(n.progress.computedAt);
-                    const now = new Date();
-                    const isStale = now.getTime() - computedAt.getTime() > STALENESS_THRESHOLD_MS;
-                    const opacity = isStale ? ' opacity="0.5"' : '';
-                    return `<text class="text-id" x="${n.x + nodeWidth - 6}" y="${n.y + 22}" text-anchor="end" dominant-baseline="hanging" font-size="10"${opacity}>${escXml(n.progress.percent + '%')}</text>`;
-                }
-                if (n.linked) {
-                    return `<text class="text-id" x="${n.x + nodeWidth - 6}" y="${n.y + 22}" text-anchor="end" dominant-baseline="hanging" font-size="10">–%</text>`;
-                }
-                return '';
-            })()
+        const progressBadge = n.col === 'activity'
+            ? completionPercentSvg(n.progress, Boolean(n.linked), n.x + nodeWidth - 6, n.y + 22, showCompletionPercent)
             : '';
         return [
             `<g>`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitrix/diagrams",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",
@@ -52,13 +52,13 @@
     "reactflow": "^11.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.5",
+    "@types/react-dom": "^19.3.0",
     "jsdom": "^29.1.1",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react-dom": "^19.3.0",
     "reactflow": "^11.11.4",
     "typescript": "^5.0.0",
     "vitest": "^4.1.11"

package/src/activities/types.ts

@@ -33,6 +33,8 @@ export interface Activity {
   resources_cost?: number;
   effort?: number;
   link?: string;
+  /** Derived display metadata, loaded from the model sidecar. */
+  progress?: { percent: number; computedAt: string };
   description?: string;
   delivers_changes?: string[];
 }

package/src/fgca/parse-canonical.ts

@@ -332,6 +332,7 @@ export function parseCanonicalFGCA(
       name: String(el!['name'] ?? ''),
       goal_id: goalRefs.length > 0 ? goalRefs[0] : null,
       ...(typeVal !== undefined ? { type: typeVal } : {}),
+      ...(typeof el!['link'] === 'string' ? { link: el!['link'] } : {}),
       ...(progressVal !== undefined ? { progress: progressVal } : {}),
     };
   });

package/src/fgca/preview-layout.ts

@@ -30,6 +30,7 @@ export interface FGCAPreviewChange {
   activity_ids: Array<number | string>;
 }
 export interface FGCAPreviewActivity {
+  link?: string;
   id: number | string;
   name: string;
   goal_id?: number | string | null;
@@ -387,7 +388,7 @@ export function layoutFGCAPreview(
       ...changes.map(c => ({ id: `change_${c.id}`, label: c.name })),
       ...virtualChanges.map(v => ({ id: v.id, label: '–', virtual: true })),
     ],
-    activity: doc.activities.map(a => ({ id: `activity_${a.id}`, label: a.name, progress: a.progress, linked: a.goal_id != null })),
+    activity: doc.activities.map(a => ({ id: `activity_${a.id}`, label: a.name, progress: a.progress, linked: Boolean(a.link?.trim()) })),
   };
 
   // Build predecessor map: for each node, which node IDs in the previous column

package/src/fgca/types.ts

@@ -25,6 +25,8 @@ export interface ActivityItem {
   activity_type_id?: number;
   /** Canonical values: initiative | programme | project | work_package. Unknown values pass through without error. */
   type?: string;
+  /** Tracker link, independent of goal relationships. */
+  link?: string;
   progress?: {
     percent: number;
     computedAt: string;

package/src/webview/completion-percent.ts

@@ -0,0 +1,18 @@
+/** Shared completion display contract for Action, DGA and DGCA previews. */
+export interface ActionProgress {
+  percent: number;
+  computedAt: string;
+}
+
+export function completionPercentState(progress: ActionProgress | undefined, linked: boolean, enabled = true, now = Date.now()): { label: string; stale: boolean } | undefined {
+  if (!enabled) return undefined;
+  if (progress && Number.isFinite(progress.percent) && progress.percent >= 0 && progress.percent <= 100 && Number.isFinite(Date.parse(progress.computedAt))) {
+    return { label: `${progress.percent}%`, stale: now - Date.parse(progress.computedAt) > 7 * 24 * 60 * 60 * 1000 };
+  }
+  return linked ? { label: '–%', stale: false } : undefined;
+}
+
+export function completionPercentSvg(progress: ActionProgress | undefined, linked: boolean, x: number, y: number, enabled = true): string {
+  const state = completionPercentState(progress, linked, enabled);
+  return state ? `<text class="text-id completion-percent" x="${x}" y="${y}" text-anchor="end" dominant-baseline="hanging" font-size="10"${state.stale ? ' opacity="0.5"' : ''}>${state.label}</text>` : '';
+}

package/src/webview/render-activities.ts

@@ -16,6 +16,7 @@
  * in `renderActivitiesNetworkBody` and is shared verbatim with the VS Code
  * preview's `networkSvg`.
  */
+import { completionPercentSvg } from './completion-percent.js';
 import { layoutActivities } from '../activities/layout.js';
 import { computeCpm } from '../activities/cpm.js';
 import type {
@@ -147,6 +148,7 @@ function activityNodeSvg(
   return [
     `<rect class="${cls}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>`,
     textSvg,
+    completionPercentSvg(n.data.progress, Boolean(n.data.link?.trim()), x + n.width - 8, y + 6),
     durLabel ? `<text class="text-secondary" x="${x + n.width - 8}" y="${y + n.height - 8}" text-anchor="end">${durLabel}</text>` : '',
   ].filter(Boolean).join('\n');
 }

package/src/webview/render-fgca.ts

@@ -12,6 +12,7 @@
  * `change` column (`hideChanges` / the layout's Goal → Activity collapse),
  * exactly as the extension preview does.
  */
+import { completionPercentSvg } from './completion-percent.js';
 import {
   layoutFGCAPreview,
   FGCA_NODE_W,
@@ -65,7 +66,6 @@ export function renderFgcaBody(
   const edgeStyle = bodyOptions.edgeStyle;
   const showCompletionPercent = bodyOptions.showCompletionPercent ?? true;
   const headerTruncate = Math.max(8, Math.floor((nodeWidth - 16) / 7));
-  const STALENESS_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;
 
   const headerSvg = columns
     .map(({ col, x }) =>
@@ -103,20 +103,8 @@ export function renderFgcaBody(
       const typeBadge = n.type && n.col === 'activity'
         ? `<text class="text-id" x="${n.x + nodeWidth - 6}" y="${n.y + 10}" text-anchor="end" dominant-baseline="hanging" font-size="10">${escXml(n.type)}</text>`
         : '';
-      const progressBadge = showCompletionPercent && n.col === 'activity'
-        ? (() => {
-            if (n.progress) {
-              const computedAt = new Date(n.progress.computedAt);
-              const now = new Date();
-              const isStale = now.getTime() - computedAt.getTime() > STALENESS_THRESHOLD_MS;
-              const opacity = isStale ? ' opacity="0.5"' : '';
-              return `<text class="text-id" x="${n.x + nodeWidth - 6}" y="${n.y + 22}" text-anchor="end" dominant-baseline="hanging" font-size="10"${opacity}>${escXml(n.progress.percent + '%')}</text>`;
-            }
-            if (n.linked) {
-              return `<text class="text-id" x="${n.x + nodeWidth - 6}" y="${n.y + 22}" text-anchor="end" dominant-baseline="hanging" font-size="10">–%</text>`;
-            }
-            return '';
-          })()
+      const progressBadge = n.col === 'activity'
+        ? completionPercentSvg(n.progress, Boolean(n.linked), n.x + nodeWidth - 6, n.y + 22, showCompletionPercent)
         : '';
       return [
         `<g>`,