@transitrix/diagrams 1.12.0 → 1.12.2

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

@@ -14,11 +14,13 @@
  */
 import { layoutFGCAPreview } from '../fgca/preview-layout.js';
 import type { FGCADoc } from '../fgca/validate.js';
+import { type EdgeStyle } from '../edge-path.js';
 import { type NodeSizePreset } from '../node-size-presets.js';
 type FgcaLayout = ReturnType<typeof layoutFGCAPreview>;
 export interface RenderFgcaBodyOptions {
     nodeWidth?: number;
     nodeHeight?: number;
+    edgeStyle?: EdgeStyle;
 }
 /**
  * Canonical DGCA/DGA body — the column headers, node rects and edge paths that
@@ -39,6 +41,7 @@ export interface RenderFgcaOptions {
     curvature?: number;
     /** Entry curvature at the target node; defaults to `curvature` when omitted. */
     entryCurvature?: number;
+    edgeStyle?: EdgeStyle;
     nodeSizePreset?: NodeSizePreset;
     layoutOptions?: Parameters<typeof layoutFGCAPreview>[1];
     /** Show scope caption when goal-scoped projection omits goals that reference out-of-scope goals. */

package/dist/webview/render-fgca.js

@@ -13,7 +13,7 @@
  * exactly as the extension preview does.
  */
 import { layoutFGCAPreview, FGCA_NODE_W, FGCA_NODE_H, FGCA_HEADER_H as HEADER_H, FGCA_PAD as PAD, } from '../fgca/preview-layout.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { previewEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { parseNodeSizePreset, resolveDgcaNodeSize } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { emitCenteredTextSvg, layoutCenteredEntityText, truncateLine } from './entity-text-layout.js';
@@ -36,12 +36,13 @@ const COL_LABELS = {
 export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature, bodyOptions = {}) {
     const nodeWidth = bodyOptions.nodeWidth ?? FGCA_NODE_W;
     const nodeHeight = bodyOptions.nodeHeight ?? FGCA_NODE_H;
+    const edgeStyle = bodyOptions.edgeStyle;
     const headerTruncate = Math.max(8, Math.floor((nodeWidth - 16) / 7));
     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');
     const edgeSvg = edges
-        .map((e) => `<path d="${horizontalCubicEdgePath(e.sx, e.sy, e.tx, e.ty, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
+        .map((e) => `<path d="${previewEdgePath(e.sx, e.sy, e.tx, e.ty, edgeStyle, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
         .join('\n');
     const nodeSvg = nodes
         .map((n) => {
@@ -66,7 +67,7 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature,
     return `${headerSvg}\n${nodeSvg}\n${edgeSvg}`;
 }
 export function renderFgcaSvg(doc, options = {}) {
-    const { variant = 'dgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, nodeSizePreset = 'normal', layoutOptions, scopeCaption = false, } = options;
+    const { variant = 'dgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, edgeStyle, nodeSizePreset = 'normal', layoutOptions, scopeCaption = false, } = options;
     const hideChanges = variant === 'dga' || doc.hideChanges === true;
     const nodeSize = resolveDgcaNodeSize(parseNodeSizePreset(nodeSizePreset));
     const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, {
@@ -81,6 +82,7 @@ export function renderFgcaSvg(doc, options = {}) {
     const body = renderFgcaBody(columns, nodes, edges, curvature, entryCurvature, {
         nodeWidth: nodeSize.width,
         nodeHeight: nodeSize.height,
+        edgeStyle,
     });
     const titleSvg = title
         ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(title)}</text>`

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

@@ -1,10 +1,12 @@
 import type { GoalTree, GoalTreeLayout } from '../goals/types.js';
+import { type EdgeStyle } from '../edge-path.js';
 import { type NodeSizePreset } from '../node-size-presets.js';
 import { type ThemeId } from '../theme/index.js';
 export interface RenderGoalsOptions {
     treeName?: string;
     curvature?: number;
     entryCurvature?: number;
+    edgeStyle?: EdgeStyle;
     nodeSizePreset?: NodeSizePreset;
 }
 /**
@@ -16,6 +18,7 @@ export declare function renderGoalsSvg(tree: GoalTree, options?: RenderGoalsOpti
 export interface RenderGoalsLayoutOptions {
     curvature?: number;
     entryCurvature?: number;
+    edgeStyle?: EdgeStyle;
     /** Extra vertical space reserved at the top of the canvas (e.g. for a title block). */
     topInset?: number;
     /** Raw SVG injected immediately after `<defs>` — a header line or a full title block. */

package/dist/webview/render-goals.js

@@ -12,7 +12,7 @@
  */
 import { layoutGoalTree } from '../goals/layout.js';
 import { displayGoalId } from '../goals/parse-canonical.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { previewEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { parseNodeSizePreset, resolveGoalsNodeSize } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { emitCenteredTextSvg, layoutCenteredEntityText } from './entity-text-layout.js';
@@ -27,7 +27,7 @@ const PAD = 24;
  * with the shared theme CSS embedded so the output is self-contained.
  */
 export function renderGoalsSvg(tree, options = {}) {
-    const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, nodeSizePreset = 'normal' } = options;
+    const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, edgeStyle, nodeSizePreset = 'normal' } = options;
     const nodeSize = resolveGoalsNodeSize(parseNodeSizePreset(nodeSizePreset));
     const layout = layoutGoalTree(tree, {
         nodeWidth: nodeSize.width,
@@ -41,7 +41,7 @@ export function renderGoalsSvg(tree, options = {}) {
     const title = treeName
         ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Goal tree — ${treeName}`)}</text>`
         : '';
-    return renderGoalsLayoutSvg(layout, { curvature, entryCurvature, title, embedCssTheme: 'transitrix' });
+    return renderGoalsLayoutSvg(layout, { curvature, entryCurvature, edgeStyle, title, embedCssTheme: 'transitrix' });
 }
 /**
  * The single goals SVG emitter shared by every host. Takes an already-computed
@@ -52,7 +52,7 @@ export function renderGoalsSvg(tree, options = {}) {
  *     and the export path own styling).
  */
 export function renderGoalsLayoutSvg(layout, options = {}) {
-    const { curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, topInset = 0, title = '', embedCssTheme } = options;
+    const { curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, edgeStyle, topInset = 0, title = '', embedCssTheme } = options;
     const w = layout.bounds.width + PAD * 2;
     const h = layout.bounds.height + PAD * 2 + topInset;
     const ox = -layout.bounds.x + PAD;
@@ -67,7 +67,7 @@ export function renderGoalsLayoutSvg(layout, options = {}) {
         const sy = s.y + oy + s.height / 2;
         const tx = t.x + ox;
         const ty = t.y + oy + t.height / 2;
-        return horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
+        return previewEdgePath(sx, sy, tx, ty, edgeStyle, curvature, entryCurvature);
     }
     const edgeSvg = layout.edges
         .map((e) => `<path d="${edgePath(e)}" class="diagram-edge" marker-end="url(#arrow)"/>`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitrix/diagrams",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",

package/src/capability-map/CapabilityCardNode.tsx

@@ -17,6 +17,7 @@ export interface CapabilityCardNodeData {
   maturityColours: Record<number, string>;
   readOnly: boolean;
   isDropTarget: boolean;
+  hasChildren: boolean;
   hasHiddenChildren: boolean;
   isCollapsed: boolean;
   onAddChild: (parentId: number) => void;
@@ -25,7 +26,7 @@ export interface CapabilityCardNodeData {
 }
 
 const CapabilityCardNode = memo(({ data }: { data: CapabilityCardNodeData }) => {
-  const { capability, theme, maturityColours, readOnly, isDropTarget, hasHiddenChildren, isCollapsed } = data;
+  const { capability, theme, maturityColours, readOnly, isDropTarget, hasChildren, hasHiddenChildren, isCollapsed } = data;
   const maturity = latestMaturityLevel(capability);
   const dotColour = maturity !== undefined ? maturityColours[maturity] : undefined;
 
@@ -119,11 +120,11 @@ const CapabilityCardNode = memo(({ data }: { data: CapabilityCardNodeData }) =>
         </button>
       )}
 
-      {hasHiddenChildren && (
+      {(hasChildren || hasHiddenChildren) && (
         <button
           type="button"
-          aria-label={isCollapsed ? 'Expand branch' : 'Collapse branch'}
-          title={isCollapsed ? 'Expand branch' : 'Collapse branch'}
+          aria-label={isCollapsed || hasHiddenChildren ? 'Expand branch' : 'Collapse branch'}
+          title={isCollapsed || hasHiddenChildren ? 'Expand branch' : 'Collapse branch'}
           onClick={(e) => {
             e.stopPropagation();
             data.onToggleCollapse(capability.id);
@@ -131,10 +132,11 @@ const CapabilityCardNode = memo(({ data }: { data: CapabilityCardNodeData }) =>
           style={{
             position: 'absolute', top: '50%', right: -8, transform: 'translateY(-50%)',
             width: 16, height: 16, borderRadius: '50%', border: `1px solid ${theme.cardBorderColor}`,
-            background: '#ffffff', color: theme.cardBorderColor, fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+            background: '#ffffff', color: theme.cardBorderColor, fontSize: 11, lineHeight: '14px', padding: 0,
+            cursor: 'pointer', zIndex: 10,
           }}
         >
-          {isCollapsed ? '+' : '−'}
+          {isCollapsed || hasHiddenChildren ? '+' : '−'}
         </button>
       )}
     </div>

package/src/capability-map/CapabilityMapView.tsx

@@ -161,6 +161,7 @@ function CapabilityMapViewInner({
         maturityColours,
         readOnly,
         isDropTarget: hoveredId === n.id,
+        hasChildren: n.hasChildren,
         hasHiddenChildren: n.hasHiddenChildren,
         isCollapsed: collapsedIds.has(n.id),
         onAddChild,

package/src/capability-map/dsm-layout.ts

@@ -79,12 +79,13 @@ export function layoutCapabilityMap(map: CapabilityMap, options: LayoutOptions =
     const cap = byId.get(id)!;
     const allChildIds = children.get(id) ?? [];
     const childIds = allChildIds.filter((c) => !hiddenSubtrees.has(c));
+    const hasChildren = allChildIds.length > 0;
     const hasHiddenChildren = childIds.length < allChildIds.length;
 
     if (childIds.length === 0) {
       const y = getNextY(col);
       advanceY(col, nodeHeight + nodeSep);
-      nodes.push({ id, x: col * (nodeWidth + rankSep), y, width: nodeWidth, height: nodeHeight, data: cap, hasHiddenChildren });
+      nodes.push({ id, x: col * (nodeWidth + rankSep), y, width: nodeWidth, height: nodeHeight, data: cap, hasChildren, hasHiddenChildren });
       return { top: y, bottom: y + nodeHeight };
     }
 
@@ -96,7 +97,7 @@ export function layoutCapabilityMap(map: CapabilityMap, options: LayoutOptions =
     const finalY = Math.max(parentY, curColY);
     advanceY(col, finalY - curColY + nodeHeight + nodeSep);
 
-    nodes.push({ id, x: col * (nodeWidth + rankSep), y: finalY, width: nodeWidth, height: nodeHeight, data: cap, hasHiddenChildren });
+    nodes.push({ id, x: col * (nodeWidth + rankSep), y: finalY, width: nodeWidth, height: nodeHeight, data: cap, hasChildren, hasHiddenChildren });
     for (const cid of childIds) edges.push({ source: id, target: cid });
     return { top: Math.min(finalY, spanTop), bottom: Math.max(finalY + nodeHeight, spanBottom) };
   }
@@ -108,7 +109,7 @@ export function layoutCapabilityMap(map: CapabilityMap, options: LayoutOptions =
   }
 
   if (nodes.length === 0) {
-    const rootNode: LaidOutNode = { id: 0, x: 0, y: 0, width: ROOT_WIDTH, height: nodeHeight, data: null, hasHiddenChildren: false };
+    const rootNode: LaidOutNode = { id: 0, x: 0, y: 0, width: ROOT_WIDTH, height: nodeHeight, data: null, hasChildren: false, hasHiddenChildren: false };
     return { rootNode, nodes: [], edges: [], bounds: { x: 0, y: 0, width: ROOT_WIDTH, height: nodeHeight } };
   }
 
@@ -122,7 +123,7 @@ export function layoutCapabilityMap(map: CapabilityMap, options: LayoutOptions =
   const rootTop = Math.min(...l1Nodes.map((n) => n.y));
   const rootBottom = Math.max(...l1Nodes.map((n) => n.y + n.height));
   const rootY = rootTop + (rootBottom - rootTop) / 2 - nodeHeight / 2;
-  const rootNode: LaidOutNode = { id: 0, x: 0, y: rootY, width: ROOT_WIDTH, height: nodeHeight, data: null, hasHiddenChildren: false };
+  const rootNode: LaidOutNode = { id: 0, x: 0, y: rootY, width: ROOT_WIDTH, height: nodeHeight, data: null, hasChildren: l1Ids.length > 0, hasHiddenChildren: false };
 
   const rootEdges: LaidOutEdge[] = l1Ids
     .filter((id) => !hiddenSubtrees.has(id))

package/src/capability-map/dsm-schema.ts

@@ -64,6 +64,7 @@ export interface LaidOutNode {
   width: number;
   height: number;
   data: Capability | null;
+  hasChildren: boolean;
   hasHiddenChildren: boolean;
 }
 

package/src/edge-path.ts

@@ -1,8 +1,7 @@
 // Shared edge geometry for the static notation previews (Goals, FGCA, FGA,
-// Activities). All four render dependency/relationship edges as a single cubic
-// Bézier with horizontal control handles: each control point shares its
-// endpoint's Y, so the tangent is horizontal at both ends and the marker-end
-// arrow reads as perpendicular to the node's vertical edge.
+// Activities). The default path is a cubic Bézier with horizontal control
+// handles so the marker-end arrow sits flush on the node's vertical edge.
+// Goals / DGCA / DGA can switch to a straight chord or an orthogonal polyline.
 //
 // Pulling the path math here (rather than duplicating it inline in each
 // preview) makes the configurable-curvature behaviour
@@ -30,6 +29,30 @@ const MAX_HANDLE = 160;
 /** Multiplier applied to the base handle length. 1 = historical appearance. */
 export const DEFAULT_EDGE_CURVATURE = 1;
 
+/** Path shape for Goals / DGCA / DGA preview edges. Default matches today's cubic. */
+export type EdgeStyle = 'straight' | 'bezier' | 'polyline';
+export const DEFAULT_EDGE_STYLE: EdgeStyle = 'bezier';
+
+export function parseEdgeStyle(v: unknown): EdgeStyle {
+  if (v === 'straight' || v === 'bezier' || v === 'polyline') return v;
+  return DEFAULT_EDGE_STYLE;
+}
+
+/** Straight segment — the arrowhead follows the chord, not the node edge. */
+export function straightEdgePath(sx: number, sy: number, tx: number, ty: number): string {
+  return `M${sx},${sy} L${tx},${ty}`;
+}
+
+/**
+ * Orthogonal (Manhattan) polyline: horizontal out, vertical, horizontal in.
+ * The last segment is horizontal so `marker-end` still meets the node's
+ * vertical edge the same way the cubic does.
+ */
+export function orthogonalEdgePath(sx: number, sy: number, tx: number, ty: number): string {
+  const midX = sx + (tx - sx) / 2;
+  return `M${sx},${sy} H${midX} V${ty} H${tx}`;
+}
+
 /**
  * Builds the SVG `d` for a horizontal-tangent cubic Bézier from (sx,sy) to
  * (tx,ty).
@@ -89,3 +112,21 @@ export function bowedCubicEdgePath(
   const handle = Math.max(EDGE_MIN_HANDLE, Math.min(Math.abs(dx) * DX_FACTOR, MAX_HANDLE)) * curvature;
   return `M${sx},${sy} C${sx + handle},${bowY} ${tx - handle},${bowY} ${tx},${ty}`;
 }
+
+/**
+ * Picks the SVG `d` for a Goals / DGCA / DGA preview edge.
+ * Unknown styles fall back to the historical cubic.
+ */
+export function previewEdgePath(
+  sx: number,
+  sy: number,
+  tx: number,
+  ty: number,
+  style: EdgeStyle = DEFAULT_EDGE_STYLE,
+  curvature: number = DEFAULT_EDGE_CURVATURE,
+  entryCurvature?: number,
+): string {
+  if (style === 'straight') return straightEdgePath(sx, sy, tx, ty);
+  if (style === 'polyline') return orthogonalEdgePath(sx, sy, tx, ty);
+  return horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
+}

package/src/fgca/index.ts

@@ -3,6 +3,8 @@ export type { FGCALayoutInput } from "./layout";
 export {
   layoutFGCAPreview,
   selectScopedFGCA,
+  chainColumnOptions,
+  sanitizeChainScope,
   FGCA_NODE_W,
   FGCA_NODE_H,
   FGCA_HEADER_H,

package/src/fgca/preview-layout.ts

@@ -7,7 +7,8 @@
 //
 // No React, no DOM, no vscode. Safe to call in Node.js or a test environment.
 
-import type { Scope } from '../scope.js';
+import type { ChainColumnKey, ChainScope, FgcaScope } from '../scope.js';
+import { isChainScope } from '../scope.js';
 import { ENTITY_NODE_SIZE } from '../node-size-presets.js';
 
 export type FGCAPreviewColumn = 'driver' | 'goal' | 'change' | 'activity';
@@ -49,28 +50,227 @@ export interface FGCAPreviewLayoutOptions {
   colGap?: number;
   /** Vertical gap (px) between stacked nodes within a column. Default matches the historical hardcoded value. */
   rowGap?: number;
-  /** Trim to a level cap or a single root goal. Defaults to 'all'. */
-  scope?: Scope;
+  /** Trim to a level cap, a single root goal, or per-column chain filters. Defaults to 'all'. */
+  scope?: FgcaScope;
   /** Entity node width (px). Default {@link FGCA_NODE_W}. */
   nodeWidth?: number;
   /** Entity node height (px). Default {@link FGCA_NODE_H}. */
   nodeHeight?: number;
 }
 
+function sid(id: number | string): string {
+  return String(id);
+}
+
+interface ChainPath {
+  driverId?: string;
+  goalId?: string;
+  changeId?: string;
+  activityId?: string;
+}
+
+/**
+ * Every Driver–Goal–Change–Action thread in the document, plus a singleton
+ * path for any entity that is not on a connected thread (orphans). Used to
+ * AND column filters: a node stays visible when it appears on at least one
+ * path that includes every selected id.
+ */
+function enumerateChainPaths(doc: FGCAPreviewDoc): ChainPath[] {
+  const paths: ChainPath[] = [];
+  const seen = {
+    driver: new Set<string>(),
+    goal: new Set<string>(),
+    change: new Set<string>(),
+    activity: new Set<string>(),
+  };
+  const mark = (p: ChainPath): void => {
+    paths.push(p);
+    if (p.driverId) seen.driver.add(p.driverId);
+    if (p.goalId) seen.goal.add(p.goalId);
+    if (p.changeId) seen.change.add(p.changeId);
+    if (p.activityId) seen.activity.add(p.activityId);
+  };
+
+  const changes = doc.changes ?? [];
+
+  for (const g of doc.goals) {
+    const goalId = sid(g.id);
+    const driverIds = (g.factor ?? []).map(f => sid(f.id));
+    const drivers: Array<string | undefined> = driverIds.length > 0 ? driverIds : [undefined];
+
+    const goalChanges = changes.filter(c => sid(c.goal_id) === goalId);
+    const coveredActs = new Set(goalChanges.flatMap(c => c.activity_ids.map(sid)));
+    const directActs = doc.activities.filter(
+      a => a.goal_id != null && sid(a.goal_id) === goalId && !coveredActs.has(sid(a.id)),
+    );
+
+    const slots: Array<{ changeId?: string; activityIds: Array<string | undefined> }> = [];
+    for (const c of goalChanges) {
+      const acts = c.activity_ids.map(sid);
+      slots.push({ changeId: sid(c.id), activityIds: acts.length > 0 ? acts : [undefined] });
+    }
+    for (const a of directActs) {
+      slots.push({ changeId: undefined, activityIds: [sid(a.id)] });
+    }
+    if (slots.length === 0) {
+      slots.push({ changeId: undefined, activityIds: [undefined] });
+    }
+
+    for (const d of drivers) {
+      for (const slot of slots) {
+        for (const a of slot.activityIds) {
+          mark({ driverId: d, goalId, changeId: slot.changeId, activityId: a });
+        }
+      }
+    }
+  }
+
+  for (const f of doc.factors) {
+    const id = sid(f.id);
+    if (!seen.driver.has(id)) mark({ driverId: id });
+  }
+  for (const g of doc.goals) {
+    const id = sid(g.id);
+    if (!seen.goal.has(id)) mark({ goalId: id });
+  }
+  for (const c of changes) {
+    const id = sid(c.id);
+    if (!seen.change.has(id)) mark({ changeId: id, goalId: sid(c.goal_id) });
+  }
+  for (const a of doc.activities) {
+    const id = sid(a.id);
+    if (!seen.activity.has(id)) {
+      mark({ activityId: id, goalId: a.goal_id != null ? sid(a.goal_id) : undefined });
+    }
+  }
+
+  return paths;
+}
+
+function selectChainScopedFGCA(
+  doc: FGCAPreviewDoc,
+  scope: ChainScope,
+  hideChanges: boolean,
+): FGCAPreviewDoc {
+  const driverId = scope.driverId || undefined;
+  const goalId = scope.goalId || undefined;
+  const changeId = hideChanges ? undefined : (scope.changeId || undefined);
+  const activityId = scope.activityId || undefined;
+  if (!driverId && !goalId && !changeId && !activityId) return doc;
+
+  const matched = enumerateChainPaths(doc).filter(p => {
+    if (driverId && p.driverId !== driverId) return false;
+    if (goalId && p.goalId !== goalId) return false;
+    if (changeId && p.changeId !== changeId) return false;
+    if (activityId && p.activityId !== activityId) return false;
+    return true;
+  });
+
+  const driverIds = new Set<string>();
+  const goalIds = new Set<string>();
+  const changeIds = new Set<string>();
+  const activityIds = new Set<string>();
+  for (const p of matched) {
+    if (p.driverId) driverIds.add(p.driverId);
+    if (p.goalId) goalIds.add(p.goalId);
+    if (p.changeId) changeIds.add(p.changeId);
+    if (p.activityId) activityIds.add(p.activityId);
+  }
+
+  return {
+    factors: doc.factors.filter(f => driverIds.has(sid(f.id))),
+    goals: doc.goals.filter(g => goalIds.has(sid(g.id))),
+    changes: doc.changes === undefined ? undefined : doc.changes.filter(c => changeIds.has(sid(c.id))),
+    activities: doc.activities.filter(a => activityIds.has(sid(a.id))),
+  };
+}
+
+const CHAIN_COLUMN_KEYS: ChainColumnKey[] = ['driverId', 'goalId', 'changeId', 'activityId'];
+
+function columnEntities(
+  doc: FGCAPreviewDoc,
+  column: ChainColumnKey,
+): Array<{ id: string; name: string }> {
+  if (column === 'driverId') return doc.factors.map(f => ({ id: sid(f.id), name: f.name ?? '' }));
+  if (column === 'goalId') return doc.goals.map(g => ({ id: sid(g.id), name: g.name ?? '' }));
+  if (column === 'changeId') return (doc.changes ?? []).map(c => ({ id: sid(c.id), name: c.name ?? '' }));
+  return doc.activities.map(a => ({ id: sid(a.id), name: a.name ?? '' }));
+}
+
+/**
+ * Dropdown options for one chain column, cascaded from the other selected
+ * filters (this column's own filter is ignored so the user can still switch it).
+ */
+export function chainColumnOptions(
+  doc: FGCAPreviewDoc,
+  scope: ChainScope,
+  column: ChainColumnKey,
+  hideChanges = false,
+): Array<{ id: string; name: string }> {
+  if (hideChanges && column === 'changeId') return [];
+  const withoutSelf: ChainScope = { ...scope, mode: 'chain', [column]: undefined };
+  const filtered = selectChainScopedFGCA(doc, withoutSelf, hideChanges);
+  return columnEntities(filtered, column);
+}
+
+/**
+ * Drop column filters that are no longer reachable given the others.
+ * `justChanged` is kept even when incompatible — the last pick wins, neighbours yield.
+ */
+export function sanitizeChainScope(
+  doc: FGCAPreviewDoc,
+  scope: ChainScope,
+  opts: { justChanged?: ChainColumnKey; hideChanges?: boolean } = {},
+): ChainScope {
+  const next: ChainScope = {
+    mode: 'chain',
+    driverId: scope.driverId || undefined,
+    goalId: scope.goalId || undefined,
+    changeId: opts.hideChanges ? undefined : (scope.changeId || undefined),
+    activityId: scope.activityId || undefined,
+  };
+
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const key of CHAIN_COLUMN_KEYS) {
+      if (key === opts.justChanged) continue;
+      if (opts.hideChanges && key === 'changeId') continue;
+      const id = next[key];
+      if (!id) continue;
+      const available = new Set(chainColumnOptions(doc, next, key, opts.hideChanges).map(o => o.id));
+      if (!available.has(id)) {
+        next[key] = undefined;
+        changed = true;
+      }
+    }
+  }
+  return next;
+}
+
 /**
  * Trims a DGCA/DGA doc to a scope.
  *
  * DGCA/DGA goals are flat (no parent_id), so:
  *   - 'level' → goals with `(level ?? 0) <= maxLevel`.
  *   - 'root'  → the single goal whose id matches `rootGoalId` (empty when absent).
+ *   - 'chain' → AND of per-column ids (Driver / Goal / Change / Action); empty
+ *               ids are All. DGA passes hideChanges so a Change filter is ignored.
  *
  * Factors, changes and activities are then kept only when they touch a visible
  * goal: a factor referenced by a visible goal, a change whose `goal_id` is
  * visible, an activity bound to a visible goal directly or via a visible
  * change. Pure and exported so an access-control layer can reuse it.
  */
-export function selectScopedFGCA(doc: FGCAPreviewDoc, scope: Scope): FGCAPreviewDoc {
+export function selectScopedFGCA(
+  doc: FGCAPreviewDoc,
+  scope: FgcaScope,
+  opts: { hideChanges?: boolean } = {},
+): FGCAPreviewDoc {
   if (scope.mode === 'all') return doc;
+  if (isChainScope(scope)) {
+    return selectChainScopedFGCA(doc, scope, opts.hideChanges === true);
+  }
 
   const visibleGoals =
     scope.mode === 'level'
@@ -147,7 +347,7 @@ export function layoutFGCAPreview(
   } = options;
 
   // Trim to scope first; everything below lays out the visible subset only.
-  const doc = selectScopedFGCA(inputDoc, scope);
+  const doc = selectScopedFGCA(inputDoc, scope, { hideChanges });
 
   const colStride = nodeWidth + colGap;
   const cols: FGCAPreviewColumn[] = hideChanges

package/src/goals/GoalNode.tsx

@@ -19,6 +19,7 @@ export interface GoalNodeData {
   theme: Required<ThemeTokens>;
   readOnly: boolean;
   isDropTarget: boolean;
+  hasChildren: boolean;
   hasHiddenChildren: boolean;
   isCollapsed: boolean;
   onAddChild: (parentId: number, parentLevel: number) => void;
@@ -28,7 +29,7 @@ export interface GoalNodeData {
 }
 
 const GoalNode = memo(({ data }: { data: GoalNodeData }) => {
-  const { goal, theme, readOnly, isDropTarget, hasHiddenChildren, isCollapsed } = data;
+  const { goal, theme, readOnly, isDropTarget, hasChildren, hasHiddenChildren, isCollapsed } = data;
   const [openPanel, setOpenPanel] = useState<'positive' | 'negative' | null>(null);
 
   const positive = (goal.factors ?? []).filter((f) => impactSign(f) !== 'negative');
@@ -192,11 +193,11 @@ const GoalNode = memo(({ data }: { data: GoalNodeData }) => {
         </button>
       )}
 
-      {hasHiddenChildren && (
+      {(hasChildren || hasHiddenChildren) && (
         <button
           type="button"
-          aria-label={isCollapsed ? 'Expand branch' : 'Collapse branch'}
-          title={isCollapsed ? 'Expand branch' : 'Collapse branch'}
+          aria-label={isCollapsed || hasHiddenChildren ? 'Expand branch' : 'Collapse branch'}
+          title={isCollapsed || hasHiddenChildren ? 'Expand branch' : 'Collapse branch'}
           onClick={(e) => {
             e.stopPropagation();
             data.onToggleCollapse(goal.id);
@@ -204,10 +205,11 @@ const GoalNode = memo(({ data }: { data: GoalNodeData }) => {
           style={{
             position: 'absolute', top: '50%', right: -8, transform: 'translateY(-50%)',
             width: 16, height: 16, borderRadius: '50%', border: `1px solid ${theme.cardBorderColor}`,
-            background: '#ffffff', color: theme.cardBorderColor, fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+            background: '#ffffff', color: theme.cardBorderColor, fontSize: 11, lineHeight: '14px', padding: 0,
+            cursor: 'pointer', zIndex: 10,
           }}
         >
-          {isCollapsed ? '+' : '−'}
+          {isCollapsed || hasHiddenChildren ? '+' : '−'}
         </button>
       )}
     </div>

package/src/goals/GoalTreeView.tsx

@@ -179,6 +179,7 @@ function GoalTreeViewInner({
         theme,
         readOnly,
         isDropTarget: hoveredId === n.id,
+        hasChildren: n.hasChildren,
         hasHiddenChildren: n.hasHiddenChildren,
         isCollapsed: collapsedIds.has(n.id),
         onAddChild,

package/src/goals/layout.ts

@@ -114,15 +114,17 @@ export function layoutGoalTree(tree: GoalTree, options: LayoutOptions = {}): Goa
     placed.add(id);
 
     const col = levelToCol.get(goal.level) ?? 0;
-    const childIds = (children.get(id) ?? []).filter(c => !hiddenSubtrees.has(c) && !placed.has(c));
-    const isCollapsedRoot = hiddenSet.has(id) && childIds.length > 0;
-    const hasHiddenChildren = childIds.length < (children.get(id) ?? []).length;
+    const allChildIds = children.get(id) ?? [];
+    const childIds = allChildIds.filter(c => !hiddenSubtrees.has(c) && !placed.has(c));
+    const isCollapsedRoot = hiddenSet.has(id) && allChildIds.length > 0;
+    const hasChildren = allChildIds.length > 0;
+    const hasHiddenChildren = childIds.length < allChildIds.length;
 
     if (childIds.length === 0) {
       // Leaf: place at current column Y
       const y = getNextY(col);
       advanceY(col, nodeHeight + nodeSep);
-      nodes.push({ id, x: col * (nodeWidth + rankSep), y, width: nodeWidth, height: nodeHeight, data: goal, isCollapsedRoot, hasHiddenChildren });
+      nodes.push({ id, x: col * (nodeWidth + rankSep), y, width: nodeWidth, height: nodeHeight, data: goal, isCollapsedRoot, hasChildren, hasHiddenChildren });
       return { top: y, bottom: y + nodeHeight };
     }
 
@@ -141,7 +143,7 @@ export function layoutGoalTree(tree: GoalTree, options: LayoutOptions = {}): Goa
     const finalY = Math.max(parentY, curColY);
     advanceY(col, finalY - curColY + nodeHeight + nodeSep);
 
-    nodes.push({ id, x: col * (nodeWidth + rankSep), y: finalY, width: nodeWidth, height: nodeHeight, data: goal, isCollapsedRoot, hasHiddenChildren });
+    nodes.push({ id, x: col * (nodeWidth + rankSep), y: finalY, width: nodeWidth, height: nodeHeight, data: goal, isCollapsedRoot, hasChildren, hasHiddenChildren });
 
     for (const cid of childIds) {
       edges.push({ source: id, target: cid });

package/src/goals/types.ts

@@ -72,6 +72,8 @@ export interface LaidOutNode {
   height: number;
   data: Goal;
   isCollapsedRoot: boolean;
+  /** True when this node has at least one child in the source tree (visible or hidden). */
+  hasChildren: boolean;
   hasHiddenChildren: boolean;
 }