@principal-ai/subsystems-react 0.53.1 → 0.53.2

package/src/subsystem/IssueList.tsx

@@ -14,6 +14,7 @@
 import { useEffect, useRef, useState } from 'react';
 import type { LucideIcon } from 'lucide-react';
 import {
+  AppWindow,
   ChevronDown,
   ChevronRight,
   CircleCheck,
@@ -32,7 +33,6 @@ import {
   Network,
   Route,
   Search,
-  Server,
   Shapes,
   Sigma,
   Split,
@@ -82,7 +82,7 @@ export const SUBSYSTEM_ISSUE_CATEGORY_ICON: Record<
   repo: FolderGit2,
   construct: Component,
   'static-topology': Network,
-  'dynamic-topology': Server,
+  'dynamic-topology': AppWindow,
   trail: Route,
 };
 

package/src/utils/elkLayout.test.ts

@@ -16,10 +16,126 @@ import {
   fractionAlongPath,
   planCompoundGroups,
   getElkOptions,
+  absoluteBoundsOf,
+  flowPositionOf,
   type Point,
 } from './elkLayout';
 import { EDGE_LABEL_WIDTH, EDGE_LABEL_SIDE_PADDING } from './edgeLabel';
 
+/**
+ * A synthetic laid-out result standing in for the drill-down's open layout: a
+ * compound parent at (12,12) with two children, a sibling container, and a
+ * flattened frame that never enters the ELK tree.
+ */
+function syntheticResult() {
+  const rect = (x: number, y: number, width: number, height: number) => ({
+    x, y, width, height,
+  });
+  return {
+    absoluteRects: new Map([
+      ['container:host', rect(12, 12, 508, 416)],
+      ['cmp:a', rect(24, 96, 140, 140)],
+      ['cmp:b', rect(24, 276, 140, 140)],
+      ['container:api', rect(576, 218, 250, 150)],
+    ]),
+    // A nested group's entry is parent-relative — the trap `flowPositionOf` avoids.
+    groupBounds: new Map([
+      ['container:host', rect(12, 12, 508, 416)],
+      ['container:api', rect(576, 218, 250, 150)],
+      ['system:acme', rect(-12, -52, 1152, 504)],
+    ]),
+  };
+}
+
+describe('absolute coordinate space', () => {
+  test('a root node keeps its absolute position', () => {
+    const r = syntheticResult();
+    expect(flowPositionOf(r, 'container:host')).toEqual({ x: 12, y: 12 });
+    expect(flowPositionOf(r, 'container:api')).toEqual({ x: 576, y: 218 });
+  });
+
+  // The bug this guards: a child's own position is already parent-relative, so
+  // subtracting the parent's absolute origin again pushed it out of its card.
+  test('a child is relative to its parent, offset exactly once', () => {
+    const r = syntheticResult();
+    expect(flowPositionOf(r, 'cmp:a', 'container:host')).toEqual({ x: 12, y: 84 });
+    expect(flowPositionOf(r, 'cmp:b', 'container:host')).toEqual({ x: 12, y: 264 });
+  });
+
+  test('children land inside the parent box they are nested in', () => {
+    const r = syntheticResult();
+    const box = absoluteBoundsOf(r, 'container:host')!;
+    for (const id of ['cmp:a', 'cmp:b']) {
+      const p = flowPositionOf(r, id, 'container:host')!;
+      const own = r.absoluteRects.get(id)!;
+      expect(p.x).toBeGreaterThanOrEqual(0);
+      expect(p.y).toBeGreaterThanOrEqual(0);
+      expect(p.x + own.width).toBeLessThanOrEqual(box.width);
+      expect(p.y + own.height).toBeLessThanOrEqual(box.height);
+    }
+  });
+
+  // A compound parent has no `result.nodes` entry at all, so anything reading
+  // positions from there leaves it on its authored slot.
+  test('a compound parent gets a real position, not a fallback', () => {
+    const r = syntheticResult();
+    expect(flowPositionOf(r, 'container:host')).not.toBeUndefined();
+    expect(flowPositionOf(r, 'container:host')).toEqual(
+      r.absoluteRects.get('container:host') && { x: 12, y: 12 },
+    );
+  });
+
+  test('a flattened frame resolves from the synthesized bounds', () => {
+    // Not in absoluteRects — it never entered the ELK tree.
+    expect(syntheticResult().absoluteRects.has('system:acme')).toBe(false);
+    expect(absoluteBoundsOf(syntheticResult(), 'system:acme')).toEqual({
+      x: -12, y: -52, width: 1152, height: 504,
+    });
+  });
+
+  test('an unknown id has no position rather than a silent zero', () => {
+    expect(flowPositionOf(syntheticResult(), 'nope')).toBeUndefined();
+    expect(absoluteBoundsOf(syntheticResult(), 'nope')).toBeUndefined();
+  });
+
+  test('an unknown parent falls back to absolute, not to a wrong origin', () => {
+    expect(flowPositionOf(syntheticResult(), 'cmp:a', 'nope')).toEqual({ x: 24, y: 96 });
+  });
+});
+
+/**
+ * A card's FLIP offset is the difference between where it was and where the new
+ * layout puts it. If this is computed in the wrong space the card slides to a
+ * plausible-looking wrong place, which is what "the anchors shift" looks like.
+ */
+describe('morph offsets', () => {
+  interface Rect { x: number; y: number; width: number; height: number }
+  const offsetTo = (from: Rect, to: Rect) => ({
+    x: from.x - to.x,
+    y: from.y - to.y,
+  });
+
+  test('a card that moves is offset by exactly the move', () => {
+    // Closed: (330,182) 250x150. Open: the compound parent ELK fitted at (12,12).
+    const closed = { x: 330, y: 182, width: 250, height: 150 };
+    const open = { x: 12, y: 12, width: 508, height: 416 };
+    expect(offsetTo(closed, open)).toEqual({ x: 318, y: 170 });
+  });
+
+  test('a card that does not move gets no offset', () => {
+    const same = { x: 576, y: 218, width: 250, height: 150 };
+    expect(offsetTo(same, same)).toEqual({ x: 0, y: 0 });
+  });
+
+  test('an offset ignores size, because the card transitions its own size', () => {
+    // Growing in place must not shift the anchor: the card's width/height
+    // transition handles the size, a translate must stay 0.
+    const before = { x: 12, y: 12, width: 250, height: 150 };
+    const after = { x: 12, y: 12, width: 508, height: 416 };
+    expect(offsetTo(before, after)).toEqual({ x: 0, y: 0 });
+  });
+});
+
 describe('planCompoundGroups', () => {
   test('drops a single-leaf group by default and promotes its member', () => {
     const plan = planCompoundGroups(
@@ -130,6 +246,21 @@ describe('planCompoundGroups', () => {
     );
     expect(plan.built[0]!.minWidth).toBe(220);
   });
+
+  // `padTop` only reaches ELK if the plan carries it; when it was dropped here
+  // the parent's own header was silently overlaid by its first child.
+  test('carries padTop through to the plan', () => {
+    const plan = planCompoundGroups(
+      [{ id: 'mod', memberIds: ['a', 'b'], padTop: 84 }],
+      ['a', 'b'],
+    );
+    expect(plan.built[0]!.padTop).toBe(84);
+  });
+
+  test('leaves padTop unset when the group does not reserve chrome', () => {
+    const plan = planCompoundGroups([{ id: 'mod', memberIds: ['a', 'b'] }], ['a', 'b']);
+    expect(plan.built[0]!.padTop).toBeUndefined();
+  });
 });
 
 describe('elkLayout helper functions', () => {

package/src/utils/elkLayout.ts

@@ -126,7 +126,7 @@ export interface ElkLayoutOptions {
    * nests this group under another group; omit for a root-level frame.
    * Members reference their immediate parent via React Flow `parentId`.
    */
-  groups?: Array<{ id: string; memberIds: string[]; parentId?: string; minWidth?: number }>;
+  groups?: CompoundGroupDef[];
 
   /**
    * Keep groups that hold a single leaf instead of dropping them and
@@ -195,6 +195,46 @@ export interface ElkLayoutResult {
   absoluteRects: Map<string, { x: number; y: number; width: number; height: number }>;
 }
 
+/**
+ * A node's rect in absolute (root) coordinates — the space `edgePathPoints` and
+ * the synthesized frame bounds are in.
+ *
+ * `absoluteRects` is the only map that is absolute for *every* node ELK placed.
+ * The alternatives each have a hole: `result.nodes` is parent-relative for a real
+ * group's children and has **no entry at all** for the group itself, and
+ * `groupBounds` is parent-relative for a nested group (and is the only source for
+ * a flattened group, which never enters the ELK tree).
+ */
+export function absoluteBoundsOf(
+  result: Pick<ElkLayoutResult, 'absoluteRects' | 'groupBounds'>,
+  id: string,
+): { x: number; y: number; width: number; height: number } | undefined {
+  return result.absoluteRects.get(id) ?? result.groupBounds.get(id);
+}
+
+/**
+ * Where a node belongs in React Flow coordinates: a root node keeps its absolute
+ * position, a child is expressed relative to its parent.
+ *
+ * Convert in exactly one place, from the absolute space, subtracting the parent's
+ * absolute origin **once**. The two failure modes here are silent — a child
+ * double-offset by its parent's origin lands outside its own card, and a compound
+ * parent with no `result.nodes` entry silently keeps the authored position it was
+ * built with, so the container drifts away from its siblings, its frame and its
+ * edges while everything around it uses ELK's answer.
+ */
+export function flowPositionOf(
+  result: Pick<ElkLayoutResult, 'absoluteRects' | 'groupBounds'>,
+  id: string,
+  parentId?: string,
+): { x: number; y: number } | undefined {
+  const abs = result.absoluteRects.get(id);
+  if (!abs) return undefined;
+  if (!parentId) return { x: abs.x, y: abs.y };
+  const origin = absoluteBoundsOf(result, parentId);
+  return origin ? { x: abs.x - origin.x, y: abs.y - origin.y } : { x: abs.x, y: abs.y };
+}
+
 /** Point in 2D space */
 export interface Point {
   x: number;
@@ -526,20 +566,31 @@ export function getElkOptions(options: ElkLayoutOptions): LayoutOptions {
 export interface CompoundGroupDef {
   id: string;
   memberIds: string[];
+  /** Nested inside another group. Omitted for a root-level group. */
+  parentId?: string;
   minWidth?: number;
   /**
-   * ELK partition for this group. Partitioning is activated on the root and
-   * inherited, so a compound parent must be told its band explicitly —
-   * otherwise it falls to partition 0 and lays out away from the siblings it is
-   * supposed to sit among (which, for a flat frame around those siblings, drags
-   * the frame across an unrelated band).
+   * This id is *also* a drawn node — a card that hosts a group. Set it when the
+   * element is drawn as a card but must be laid out as a parent: the drill-down's
+   * opened container.
+   *
+   * The node and the group are not alternatives. The node is how the group is
+   * *drawn*, and the group is how it is *laid out* — so this says which one wins
+   * when a member id could be either. Without it the frame takes the bare leaf box
+   * and the group is built but never referenced, leaving its components laid out
+   * nowhere: the container reads as closed, at its 250x150 card size, whatever
+   * ELK was told about its children.
    */
-  partition?: number;
+  drawnAsCard?: boolean;
   /**
    * Space reserved above the first child, in px. Set it when the parent draws
    * its own chrome at the top (C4's grown container draws a label slot and a
    * technology row) so ELK still owns the fit — it pads the parent by this and
    * the children land below the chrome rather than under it.
+   *
+   * Note: there is deliberately no per-group partition. `partitionByNode` bands
+   * leaves, and ELK derives a compound node's band from its children, so a
+   * partition set on the parent itself is ignored.
    */
   padTop?: number;
 }
@@ -550,7 +601,7 @@ export interface CompoundGroupPlan {
    * Built groups in build order — a group's children always appear before it,
    * so callers can map ids to shells in one forward pass.
    */
-  built: Array<{ id: string; childIds: string[]; minWidth?: number; padTop?: number; partition?: number }>;
+  built: Array<{ id: string; childIds: string[]; minWidth?: number; padTop?: number }>;
   /**
    * Dropped groups. Their members are promoted into the nearest built
    * ancestor, so callers must clear those members' `parentId`.
@@ -645,7 +696,14 @@ export function planCompoundGroups(
         continue;
       }
 
-      built.push({ id: g.id, childIds, minWidth: g.minWidth });
+      built.push({
+        id: g.id,
+        childIds,
+        minWidth: g.minWidth,
+        // Carried through, not just validated here: the caller turns each of
+        // these into ELK layout options on the parent node.
+        padTop: g.padTop,
+      });
     }
     if (!progress) {
       // Cycle or unresolved refs — leave the rest unbuilt.
@@ -882,6 +940,9 @@ export async function computeElkLayout(
   const plan = planCompoundGroups(groupDefs, elkById.keys(), keepSingletonGroups);
   const skippedGroups = new Set(plan.skipped);
   const builtGroups = new Map<string, ElkNode>();
+  // Ids that are drawn as a card *and* laid out as a group. Such an id is in
+  // `elkById` too, so this is what says which of the two an enclosing frame takes.
+  const drawnAsCardIds = new Set(groupDefs.filter((g) => g.drawnAsCard).map((g) => g.id));
   // Flat groups are not ELK parents at all: their members lay out at the root,
   // and the frame is synthesized from the members' bounds after layout. This
   // keeps every edge on one spacing instead of inheriting a nested frame's.
@@ -909,11 +970,18 @@ export async function computeElkLayout(
     if (flatGroupIds.has(g.id)) continue;
     const children: ElkNode[] = [];
     for (const cid of g.childIds) {
-      const leaf = elkById.get(cid);
-      if (leaf) children.push(leaf);
+      // A member id can be a drawn node *and* a built group. Preferring the leaf —
+      // which is what this did unconditionally — silently drops the group: the
+      // frame ends up holding a bare 250x150 box, nothing references the group, and
+      // its components are laid out nowhere. So the card ids take the group, and
+      // everything else keeps the leaf. (For those, `builtGroups` has no entry
+      // anyway: flat groups are skipped above, and a nested group has no node.)
+      const nested = builtGroups.get(cid);
+      if (nested && drawnAsCardIds.has(cid)) children.push(nested);
       else {
-        const nested = builtGroups.get(cid);
-        if (nested) children.push(nested);
+        const leaf = elkById.get(cid);
+        if (leaf) children.push(leaf);
+        else if (nested) children.push(nested);
       }
     }
     const sizeOptions: Record<string, string> = {};
@@ -928,7 +996,6 @@ export async function computeElkLayout(
       // the parent's height still comes from ELK's fit.
       sizeOptions['elk.padding'] = `[top=${g.padTop},left=12,bottom=12,right=12]`;
     }
-    if (g.partition != null) sizeOptions['partition'] = String(g.partition);
     builtGroups.set(g.id, {
       id: g.id,
       children,