@webpieces/nx-webpieces-rules 0.4.853 → 0.4.854

package/src/lib/graph-render-model.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphFilterAssets = exports.GraphRenderModel = exports.RenderEdge = exports.RenderNode = void 0;
+const dot_syntax_1 = require("./dot-syntax");
+/** Renderer-owned records, captured while emitting DOT, never recovered by parsing labels. */
+class RenderNode {
+    id;
+    dot;
+    constructor(id, dot) {
+        this.id = id;
+        this.dot = dot;
+    }
+}
+exports.RenderNode = RenderNode;
+class RenderEdge {
+    from;
+    to;
+    dot;
+    id;
+    constructor(from, to, dot, id) {
+        this.from = from;
+        this.to = to;
+        this.dot = dot;
+        this.id = id;
+    }
+}
+exports.RenderEdge = RenderEdge;
+/** The immutable drawable snapshot carried by a generated page. */
+class GraphRenderModel {
+    nodes = [];
+    edges = [];
+    bands = [];
+    fullDot = '';
+    header = '';
+    footer = '';
+    node(id, dot) {
+        this.nodes.push(new RenderNode(id, dot));
+        return dot;
+    }
+    completeEndpoints() {
+        const ids = new Set(this.nodes.map((node) => node.id));
+        for (const edge of this.edges) {
+            for (const id of [edge.from, edge.to]) {
+                if (ids.has(id))
+                    continue;
+                ids.add(id);
+                this.node(id, `  "${(0, dot_syntax_1.dotValue)(id)}";\n`);
+            }
+        }
+    }
+    edge(from, to, dot) {
+        const id = `wp-real-edge-${this.edges.length}`;
+        const statement = `${dot.slice(0, -2)} [id="${id}"];\n`;
+        this.edges.push(new RenderEdge(from, to, statement, id));
+        return statement;
+    }
+}
+exports.GraphRenderModel = GraphRenderModel;
+/** Shared filter chrome and script-safe JSON for pages opened directly from disk. */
+class GraphFilterAssets {
+    json(value) {
+        return JSON.stringify(value).replace(/</g, '\\u003c');
+    }
+    html() {
+        return ('<p id="wp-filter-status" hidden>Filtering: <strong id="wp-filter-anchor"></strong> ' +
+            '<button id="wp-filter-off" type="button">Turn off Filter</button></p>' +
+            '<p id="wp-graph-error" role="alert" hidden></p>');
+    }
+    styles() {
+        return ('#wp-filter-status { text-align:center; } #wp-graph-error { color:#b71c1c; } ' +
+            '#graph .wp-filter-anchor polygon, #graph .wp-filter-anchor path, ' +
+            '#graph .wp-filter-anchor ellipse { stroke:#1565c0; stroke-width:3; }');
+    }
+}
+exports.GraphFilterAssets = GraphFilterAssets;
+//# sourceMappingURL=graph-render-model.js.map

package/src/lib/graph-render-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-render-model.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-render-model.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAGxC,8FAA8F;AAC9F,MAAa,UAAU;IAEC;IACA;IAFpB,YACoB,EAAU,EACV,GAAW;QADX,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;IAC5B,CAAC;CACP;AALD,gCAKC;AAED,MAAa,UAAU;IAEC;IACA;IACA;IACA;IAJpB,YACoB,IAAY,EACZ,EAAU,EACV,GAAW,EACX,EAAU;QAHV,SAAI,GAAJ,IAAI,CAAQ;QACZ,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;QACX,OAAE,GAAF,EAAE,CAAQ;IAC3B,CAAC;CACP;AAPD,gCAOC;AAED,mEAAmE;AACnE,MAAa,gBAAgB;IAChB,KAAK,GAAiB,EAAE,CAAC;IACzB,KAAK,GAAiB,EAAE,CAAC;IAClC,KAAK,GAAgB,EAAE,CAAC;IACxB,OAAO,GAAG,EAAE,CAAC;IACb,MAAM,GAAG,EAAE,CAAC;IACZ,MAAM,GAAG,EAAE,CAAC;IAEZ,IAAI,CAAC,EAAU,EAAE,GAAW;QACxB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;QACzC,OAAO,GAAG,CAAC;IACf,CAAC;IAED,iBAAiB;QACb,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACvD,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC5B,KAAK,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;gBACpC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBAAE,SAAS;gBAC1B,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBACZ,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,IAAA,qBAAQ,EAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YAC5C,CAAC;QACL,CAAC;IACL,CAAC;IAED,IAAI,CAAC,IAAY,EAAE,EAAU,EAAE,GAAW;QACtC,MAAM,EAAE,GAAG,gBAAgB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAC/C,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC;QACxD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;QACzD,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ;AA9BD,4CA8BC;AAED,qFAAqF;AACrF,MAAa,iBAAiB;IAC1B,IAAI,CAAI,KAAQ;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI;QACA,OAAO,CACH,qFAAqF;YACrF,uEAAuE;YACvE,iDAAiD,CACpD,CAAC;IACN,CAAC;IAED,MAAM;QACF,OAAO,CACH,8EAA8E;YAC9E,mEAAmE;YACnE,sEAAsE,CACzE,CAAC;IACN,CAAC;CACJ;AApBD,8CAoBC","sourcesContent":["import { dotValue } from './dot-syntax';\nimport { LevelBand } from './graph-level-bands';\n\n/** Renderer-owned records, captured while emitting DOT, never recovered by parsing labels. */\nexport class RenderNode {\n    constructor(\n        public readonly id: string,\n        public readonly dot: string,\n    ) {}\n}\n\nexport class RenderEdge {\n    constructor(\n        public readonly from: string,\n        public readonly to: string,\n        public readonly dot: string,\n        public readonly id: string,\n    ) {}\n}\n\n/** The immutable drawable snapshot carried by a generated page. */\nexport class GraphRenderModel {\n    readonly nodes: RenderNode[] = [];\n    readonly edges: RenderEdge[] = [];\n    bands: LevelBand[] = [];\n    fullDot = '';\n    header = '';\n    footer = '';\n\n    node(id: string, dot: string): string {\n        this.nodes.push(new RenderNode(id, dot));\n        return dot;\n    }\n\n    completeEndpoints(): void {\n        const ids = new Set(this.nodes.map((node) => node.id));\n        for (const edge of this.edges) {\n            for (const id of [edge.from, edge.to]) {\n                if (ids.has(id)) continue;\n                ids.add(id);\n                this.node(id, `  \"${dotValue(id)}\";\\n`);\n            }\n        }\n    }\n\n    edge(from: string, to: string, dot: string): string {\n        const id = `wp-real-edge-${this.edges.length}`;\n        const statement = `${dot.slice(0, -2)} [id=\"${id}\"];\\n`;\n        this.edges.push(new RenderEdge(from, to, statement, id));\n        return statement;\n    }\n}\n\n/** Shared filter chrome and script-safe JSON for pages opened directly from disk. */\nexport class GraphFilterAssets {\n    json<T>(value: T): string {\n        return JSON.stringify(value).replace(/</g, '\\\\u003c');\n    }\n\n    html(): string {\n        return (\n            '<p id=\"wp-filter-status\" hidden>Filtering: <strong id=\"wp-filter-anchor\"></strong> ' +\n            '<button id=\"wp-filter-off\" type=\"button\">Turn off Filter</button></p>' +\n            '<p id=\"wp-graph-error\" role=\"alert\" hidden></p>'\n        );\n    }\n\n    styles(): string {\n        return (\n            '#wp-filter-status { text-align:center; } #wp-graph-error { color:#b71c1c; } ' +\n            '#graph .wp-filter-anchor polygon, #graph .wp-filter-anchor path, ' +\n            '#graph .wp-filter-anchor ellipse { stroke:#1565c0; stroke-width:3; }'\n        );\n    }\n}\n"]}

package/src/lib/graph-visualizer.client.d.ts

@@ -1,83 +1,24 @@
-/**
- * The class graph-visualizer.ts stamps on the invisible rank anchors, spacer bands and ordering
- * edges that pin each level to its own row. They are layout scaffolding, not architecture, so the
- * indexes below skip them: an anchor must never be walkable as a dependency, or hovering one box
- * would light boxes it has nothing to do with.
- *
- * Graphviz drops `style=invis` elements from its SVG entirely (verified against the emitted SVG),
- * so today nothing carrying this class reaches the DOM at all. The skip is the guarantee that the
- * scaffolding stays inert if that ever stops being true — the DOT is the only place that decides
- * what is scaffolding, and it says so with this class.
- */
-declare const LAYOUT_CLASS = "wp-layout";
-/** One traversal direction: the edges to light, and the nodes to walk on to. */
-declare class Direction {
-    readonly nodes: Map<string, Set<string>>;
-    readonly edges: Map<string, Set<Element>>;
-    constructor(nodes: Map<string, Set<string>>, edges: Map<string, Set<Element>>);
-}
-/**
- * Indexes the rendered SVG and drives the dim/highlight/lock interaction.
- *
- * The adjacency is DIRECTED and kept as two maps per axis: `in*` is what points AT a node (ancestors,
- * walked upward) and `out*` is what it points to (dependencies, walked downward). Highlighting walks
- * both, so a hovered box lights its entire chain in both directions rather than just its neighbours.
- */
+/** Architecture interactions bind to each new SVG; logical Lock/Filter state belongs to the page. */
 declare class GraphHighlighter {
     private readonly svg;
+    private readonly chain;
+    private readonly model;
+    private readonly page;
     private readonly nodeByName;
-    private readonly inEdges;
-    private readonly outEdges;
-    private readonly inNodes;
-    private readonly outNodes;
-    /**
-     * The box the dropdown pinned, or null. Hover still works on top of a lock — leaving a box
-     * restores the LOCKED view instead of clearing, so the pinned subgraph stays visible while you
-     * scroll down to its responsibility cards.
-     */
-    private locked;
-    constructor(svg: SVGSVGElement);
-    /** Index the SVG, then wire hover, the lock dropdown, and the per-node floating menu. */
+    constructor(svg: SVGSVGElement, chain: WpGraphChain, model: RenderModelJson, page: GraphPage);
     wire(): void;
-    private indexNodes;
-    private indexEdges;
-    private ensureEdges;
-    private ensureNodes;
     private clear;
-    /**
-     * Dim everything, then transitively light ancestors and descendants of `name`: edges reached get
-     * `wp-hl`, boxes get `wp-neighbor`. The `visited` set is what makes a cyclic graph terminate.
-     */
     private highlight;
-    private walk;
-    /** Leaving a box restores the locked view rather than clearing it outright. */
-    private relight;
+    relight(): void;
     private wireHover;
-    private wireLock;
-    private lockSelect;
-    /** True when `name` is the box the page is currently locked on — what the menu labels itself by. */
-    isLocked(name: string): boolean;
-    /**
-     * THE one lock entry point, so the dropdown and the node menu can never disagree: it sets the
-     * dropdown's selection, re-highlights, and re-filters the cards whichever of the two asked.
-     * `null` is "All (no lock)".
-     */
-    setLock(name: string | null): void;
-    private applyLock;
-    /**
-     * Every box opens the floating menu (the shared one both generated graphs use). "View Design" is
-     * only built when that project actually HAS a committed design.html; the bottom item is always
-     * Lock or Unlock, whichever applies to this box right now.
-     */
     private wireMenu;
-    /**
-     * Filter the responsibility cards to the locked box's chain by READING BACK the
-     * `.wp-focus`/`.wp-neighbor` classes highlight() just set — so there is no second graph walk and
-     * the cards can never disagree with the picture.
-     */
-    private filterCards;
 }
-/** Renders the DOT and hands the SVG to the highlighter. Reports a failure into the page, not just the console. */
-declare class GraphPage {
-    render(): void;
+declare class GraphPage extends WpFilterPage {
+    private highlighter;
+    protected captureBinding(_svg: SVGSVGElement | null): () => void;
+    protected wireControls(): void;
+    protected wireSvg(svg: SVGSVGElement): void;
+    lockSelection(): string | null;
+    setLock(name: string | null): void;
+    private filterCards;
 }

package/src/lib/graph-visualizer.client.js

@@ -1,125 +1,28 @@
 "use strict";
-/*
- * Browser-side script for architecture/dependencies.html.
- *
- * graph-visualizer.ts reads this file's COMPILED output with readFileSync, substitutes the DOT
- * placeholder (see viz-client-globals.d.ts) with the JSON-encoded Graphviz DOT, and inlines the result into a <script> tag. So it
- * runs in a browser, never in node — but it is ordinary TypeScript, compiled in place by tsc exactly
- * like the package's bin entry points, and linted like every other file here.
- *
- * IT USED TO BE A COMMITTED .js ASSET, exempted from `no-js-files`, and its own header said why: so the
- * dim/highlight/lock logic "can define ordinary browser functions without tripping the TypeScript lint
- * rules". That is a file existing to dodge the rules — the same anti-pattern as the bin shims this repo
- * deleted, and the same cure applies. The logic is a CLASS now, which is what `no-function-outside-class`
- * was asking for all along; nothing needed a disable.
- *
- * Behaviour: after Viz renders the SVG, hovering a box dims the rest and lights its full
- * ancestor+descendant chain; the #wp-lock dropdown PINS one box's chain (the dim survives mouse-leave)
- * and filters the responsibilities cards below the graph to just that chain. "All" clears the lock.
- *
- * CLICKING a box opens the shared floating node menu (graph-node-menu.ts, the same menu every
- * project's design.html uses) — "View Design" only for a project that HAS a design.html, then
- * Lock/Unlock. Menu and dropdown are one lock: both go through setLock(), so each reflects the other.
- */
-// The DOT placeholder and the `Viz` global are declared once in viz-client-globals.d.ts — both
-// scripts share a global scope, so they cannot each declare them. Do NOT spell the placeholder token
-// in a comment: the inliner is a blind split/join, so every literal occurrence gets the whole DOT.
-/**
- * The class graph-visualizer.ts stamps on the invisible rank anchors, spacer bands and ordering
- * edges that pin each level to its own row. They are layout scaffolding, not architecture, so the
- * indexes below skip them: an anchor must never be walkable as a dependency, or hovering one box
- * would light boxes it has nothing to do with.
- *
- * Graphviz drops `style=invis` elements from its SVG entirely (verified against the emitted SVG),
- * so today nothing carrying this class reaches the DOM at all. The skip is the guarantee that the
- * scaffolding stays inert if that ever stops being true — the DOT is the only place that decides
- * what is scaffolding, and it says so with this class.
- */
-const LAYOUT_CLASS = 'wp-layout';
-/** One traversal direction: the edges to light, and the nodes to walk on to. */
-class Direction {
-    nodes;
-    edges;
-    constructor(nodes, edges) {
-        this.nodes = nodes;
-        this.edges = edges;
-    }
-}
-/**
- * Indexes the rendered SVG and drives the dim/highlight/lock interaction.
- *
- * The adjacency is DIRECTED and kept as two maps per axis: `in*` is what points AT a node (ancestors,
- * walked upward) and `out*` is what it points to (dependencies, walked downward). Highlighting walks
- * both, so a hovered box lights its entire chain in both directions rather than just its neighbours.
- */
+/** Architecture interactions bind to each new SVG; logical Lock/Filter state belongs to the page. */
 class GraphHighlighter {
     svg;
+    chain;
+    model;
+    page;
     nodeByName = new Map();
-    inEdges = new Map();
-    outEdges = new Map();
-    inNodes = new Map();
-    outNodes = new Map();
-    /**
-     * The box the dropdown pinned, or null. Hover still works on top of a lock — leaving a box
-     * restores the LOCKED view instead of clearing, so the pinned subgraph stays visible while you
-     * scroll down to its responsibility cards.
-     */
-    locked = null;
-    constructor(svg) {
+    constructor(svg, chain, model, page) {
         this.svg = svg;
+        this.chain = chain;
+        this.model = model;
+        this.page = page;
     }
-    /** Index the SVG, then wire hover, the lock dropdown, and the per-node floating menu. */
     wire() {
-        this.indexNodes();
-        this.indexEdges();
-        this.wireHover();
-        this.wireLock();
-        this.wireMenu();
-    }
-    indexNodes() {
         this.svg.querySelectorAll('g.node').forEach((g) => {
-            if (g.classList.contains(LAYOUT_CLASS))
-                return;
-            const title = g.querySelector('title');
-            if (title !== null && title.textContent !== null) {
-                this.nodeByName.set(title.textContent.trim(), g);
-            }
-        });
-    }
-    indexEdges() {
-        this.svg.querySelectorAll('g.edge').forEach((edge) => {
-            if (edge.classList.contains(LAYOUT_CLASS))
+            if (g.classList.contains('wp-layout'))
                 return;
-            const title = edge.querySelector('title');
-            const text = title === null ? null : title.textContent;
-            if (text === null)
-                return;
-            const idx = text.indexOf('->');
-            if (idx < 0)
-                return;
-            const from = text.slice(0, idx).trim();
-            const to = text.slice(idx + 2).trim();
-            this.ensureEdges(this.outEdges, from).add(edge);
-            this.ensureEdges(this.inEdges, to).add(edge);
-            this.ensureNodes(this.outNodes, from).add(to);
-            this.ensureNodes(this.inNodes, to).add(from);
+            const name = g.querySelector('title')?.textContent;
+            if (name !== null && name !== undefined)
+                this.nodeByName.set(name, g);
         });
-    }
-    ensureEdges(map, key) {
-        const existing = map.get(key);
-        if (existing !== undefined)
-            return existing;
-        const created = new Set();
-        map.set(key, created);
-        return created;
-    }
-    ensureNodes(map, key) {
-        const existing = map.get(key);
-        if (existing !== undefined)
-            return existing;
-        const created = new Set();
-        map.set(key, created);
-        return created;
+        this.wireHover();
+        this.wireMenu();
+        this.relight();
     }
     clear() {
         this.svg.classList.remove('wp-dim');
@@ -127,161 +30,86 @@ class GraphHighlighter {
             el.classList.remove('wp-focus', 'wp-neighbor', 'wp-hl');
         });
     }
-    /**
-     * Dim everything, then transitively light ancestors and descendants of `name`: edges reached get
-     * `wp-hl`, boxes get `wp-neighbor`. The `visited` set is what makes a cyclic graph terminate.
-     */
-    highlight(name, focusEl) {
+    highlight(name) {
         this.clear();
+        const focus = this.nodeByName.get(name);
+        if (focus === undefined)
+            return;
+        const lit = this.chain.nodes(name);
         this.svg.classList.add('wp-dim');
-        focusEl.classList.add('wp-focus');
-        const directions = [
-            new Direction(this.inNodes, this.inEdges),
-            new Direction(this.outNodes, this.outEdges),
-        ];
-        for (const dir of directions)
-            this.walk(name, dir);
-    }
-    walk(start, dir) {
-        const visited = new Set();
-        const stack = [start];
-        while (stack.length > 0) {
-            const cur = stack.pop();
-            const edges = dir.edges.get(cur);
-            if (edges !== undefined) {
-                edges.forEach((e) => { e.classList.add('wp-hl'); });
+        focus.classList.add('wp-focus');
+        for (const id of lit)
+            this.nodeByName.get(id)?.classList.add('wp-neighbor');
+        for (const edge of this.model.edges) {
+            if (lit.has(edge.from) && lit.has(edge.to)) {
+                this.svg.querySelector(`[id="${edge.id}"]`)?.classList.add('wp-hl');
             }
-            const next = dir.nodes.get(cur);
-            if (next === undefined)
-                continue;
-            next.forEach((name) => {
-                if (visited.has(name))
-                    return;
-                visited.add(name);
-                stack.push(name);
-                const g = this.nodeByName.get(name);
-                if (g !== undefined)
-                    g.classList.add('wp-neighbor');
-            });
         }
     }
-    /** Leaving a box restores the locked view rather than clearing it outright. */
     relight() {
-        if (this.locked === null) {
+        const locked = this.page.lockSelection();
+        if (locked === null)
             this.clear();
-            return;
-        }
-        const g = this.nodeByName.get(this.locked);
-        if (g !== undefined)
-            this.highlight(this.locked, g);
+        else
+            this.highlight(locked);
     }
     wireHover() {
         this.nodeByName.forEach((g, name) => {
-            g.addEventListener('mouseenter', () => { this.highlight(name, g); });
-            g.addEventListener('mouseleave', () => { this.relight(); });
+            g.addEventListener('mouseenter', () => this.highlight(name));
+            g.addEventListener('mouseleave', () => this.relight());
         });
     }
-    wireLock() {
-        const lockSelect = this.lockSelect();
-        if (lockSelect === null)
-            return;
-        lockSelect.addEventListener('change', () => {
-            this.applyLock(lockSelect.value === '' ? null : lockSelect.value);
+    wireMenu() {
+        const designs = new Map(__DESIGN_LINKS__.map((link) => [link.nodeId, link.href]));
+        WpNodeMenu.wire(this.svg, (name) => {
+            const items = [];
+            const href = designs.get(name);
+            if (href !== undefined)
+                items.push(new WpNodeMenuItem('View Design', () => window.open(href, '_blank')));
+            const locked = this.page.lockSelection() === name;
+            items.push(new WpNodeMenuItem(locked ? 'Unlock' : 'Lock', () => this.page.setLock(locked ? null : name)));
+            items.push(this.page.filterItem(name));
+            return items;
         });
     }
-    lockSelect() {
-        return document.getElementById('wp-lock');
+}
+class GraphPage extends WpFilterPage {
+    highlighter = null;
+    captureBinding(_svg) {
+        const previous = this.highlighter;
+        return () => { this.highlighter = previous; this.filterCards(); };
+    }
+    wireControls() {
+        const select = document.getElementById('wp-lock');
+        select?.addEventListener('change', () => this.setLock(select.value === '' ? null : select.value));
+    }
+    wireSvg(svg) {
+        this.highlighter = new GraphHighlighter(svg, this.chain, this.model, this);
+        this.highlighter.wire();
+        this.filterCards();
+        svg.querySelectorAll('g.node').forEach((node) => {
+            if (node.querySelector('title')?.textContent === this.anchor)
+                node.classList.add('wp-filter-anchor');
+        });
     }
-    /** True when `name` is the box the page is currently locked on — what the menu labels itself by. */
-    isLocked(name) {
-        return this.locked === name;
+    lockSelection() {
+        return this.locked;
     }
-    /**
-     * THE one lock entry point, so the dropdown and the node menu can never disagree: it sets the
-     * dropdown's selection, re-highlights, and re-filters the cards whichever of the two asked.
-     * `null` is "All (no lock)".
-     */
     setLock(name) {
-        const lockSelect = this.lockSelect();
-        if (lockSelect !== null)
-            lockSelect.value = name === null ? '' : name;
-        this.applyLock(name);
-    }
-    applyLock(name) {
         this.locked = name;
-        if (name === null) {
-            this.clear();
-        }
-        else {
-            const g = this.nodeByName.get(name);
-            if (g !== undefined)
-                this.highlight(name, g);
-        }
+        const select = document.getElementById('wp-lock');
+        if (select !== null)
+            select.value = name ?? '';
+        this.highlighter?.relight();
         this.filterCards();
     }
-    /**
-     * Every box opens the floating menu (the shared one both generated graphs use). "View Design" is
-     * only built when that project actually HAS a committed design.html; the bottom item is always
-     * Lock or Unlock, whichever applies to this box right now.
-     */
-    wireMenu() {
-        const designs = new Map();
-        for (const link of __DESIGN_LINKS__)
-            designs.set(link.nodeId, link.href);
-        WpNodeMenu.wire(this.svg, (name) => {
-            const items = [];
-            const href = designs.get(name);
-            if (href !== undefined) {
-                items.push(new WpNodeMenuItem('View Design', () => { window.open(href, '_blank'); }));
-            }
-            const locked = this.isLocked(name);
-            items.push(new WpNodeMenuItem(locked ? 'Unlock' : 'Lock', () => {
-                this.setLock(locked ? null : name);
-            }));
-            return items;
-        });
-    }
-    /**
-     * Filter the responsibility cards to the locked box's chain by READING BACK the
-     * `.wp-focus`/`.wp-neighbor` classes highlight() just set — so there is no second graph walk and
-     * the cards can never disagree with the picture.
-     */
     filterCards() {
-        const lit = new Set();
-        if (this.locked !== null) {
-            this.svg.querySelectorAll('.wp-focus, .wp-neighbor').forEach((el) => {
-                const title = el.querySelector('title');
-                if (title !== null && title.textContent !== null)
-                    lit.add(title.textContent.trim());
-            });
-        }
+        const lit = this.locked === null ? this.retained : this.chain.nodes(this.locked);
         document.querySelectorAll('.wp-resp-card').forEach((card) => {
             const name = card.getAttribute('data-node');
-            const visible = this.locked === null || (name !== null && lit.has(name));
-            card.classList.toggle('wp-hidden', !visible);
-        });
-    }
-}
-/** Renders the DOT and hands the SVG to the highlighter. Reports a failure into the page, not just the console. */
-class GraphPage {
-    render() {
-        Viz.instance()
-            .then((viz) => {
-            const element = viz.renderSVGElement(__DOT__);
-            const host = document.getElementById('graph');
-            if (host === null)
-                return;
-            host.appendChild(element);
-            new GraphHighlighter(element).wire();
-        })
-            // webpieces-disable no-any-unknown -- a promise rejection reason is untyped BY THE LANGUAGE (any value can be thrown), and this browser script cannot import the repo's toError helper; it is stringified, never dereferenced
-            .catch((err) => {
-            console.error(err);
-            const host = document.getElementById('graph');
-            if (host !== null)
-                host.innerHTML = '<pre>' + String(err) + '</pre>';
+            card.classList.toggle('wp-hidden', name === null || !this.retained.has(name) || !lit.has(name));
         });
     }
 }
-new GraphPage().render();
+new GraphPage(__RENDER_MODEL__).render();
 //# sourceMappingURL=graph-visualizer.client.js.map

package/src/lib/graph-visualizer.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-visualizer.client.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-visualizer.client.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Browser-side script for architecture/dependencies.html.\n *\n * graph-visualizer.ts reads this file's COMPILED output with readFileSync, substitutes the DOT\n * placeholder (see viz-client-globals.d.ts) with the JSON-encoded Graphviz DOT, and inlines the result into a <script> tag. So it\n * runs in a browser, never in node — but it is ordinary TypeScript, compiled in place by tsc exactly\n * like the package's bin entry points, and linted like every other file here.\n *\n * IT USED TO BE A COMMITTED .js ASSET, exempted from `no-js-files`, and its own header said why: so the\n * dim/highlight/lock logic \"can define ordinary browser functions without tripping the TypeScript lint\n * rules\". That is a file existing to dodge the rules — the same anti-pattern as the bin shims this repo\n * deleted, and the same cure applies. The logic is a CLASS now, which is what `no-function-outside-class`\n * was asking for all along; nothing needed a disable.\n *\n * Behaviour: after Viz renders the SVG, hovering a box dims the rest and lights its full\n * ancestor+descendant chain; the #wp-lock dropdown PINS one box's chain (the dim survives mouse-leave)\n * and filters the responsibilities cards below the graph to just that chain. \"All\" clears the lock.\n *\n * CLICKING a box opens the shared floating node menu (graph-node-menu.ts, the same menu every\n * project's design.html uses) — \"View Design\" only for a project that HAS a design.html, then\n * Lock/Unlock. Menu and dropdown are one lock: both go through setLock(), so each reflects the other.\n */\n\n// The DOT placeholder and the `Viz` global are declared once in viz-client-globals.d.ts — both\n// scripts share a global scope, so they cannot each declare them. Do NOT spell the placeholder token\n// in a comment: the inliner is a blind split/join, so every literal occurrence gets the whole DOT.\n\n/**\n * The class graph-visualizer.ts stamps on the invisible rank anchors, spacer bands and ordering\n * edges that pin each level to its own row. They are layout scaffolding, not architecture, so the\n * indexes below skip them: an anchor must never be walkable as a dependency, or hovering one box\n * would light boxes it has nothing to do with.\n *\n * Graphviz drops `style=invis` elements from its SVG entirely (verified against the emitted SVG),\n * so today nothing carrying this class reaches the DOM at all. The skip is the guarantee that the\n * scaffolding stays inert if that ever stops being true — the DOT is the only place that decides\n * what is scaffolding, and it says so with this class.\n */\nconst LAYOUT_CLASS = 'wp-layout';\n\n/** One traversal direction: the edges to light, and the nodes to walk on to. */\nclass Direction {\n    constructor(\n        readonly nodes: Map<string, Set<string>>,\n        readonly edges: Map<string, Set<Element>>,\n    ) {}\n}\n\n/**\n * Indexes the rendered SVG and drives the dim/highlight/lock interaction.\n *\n * The adjacency is DIRECTED and kept as two maps per axis: `in*` is what points AT a node (ancestors,\n * walked upward) and `out*` is what it points to (dependencies, walked downward). Highlighting walks\n * both, so a hovered box lights its entire chain in both directions rather than just its neighbours.\n */\nclass GraphHighlighter {\n    private readonly nodeByName = new Map<string, SVGGElement>();\n    private readonly inEdges = new Map<string, Set<Element>>();\n    private readonly outEdges = new Map<string, Set<Element>>();\n    private readonly inNodes = new Map<string, Set<string>>();\n    private readonly outNodes = new Map<string, Set<string>>();\n\n    /**\n     * The box the dropdown pinned, or null. Hover still works on top of a lock — leaving a box\n     * restores the LOCKED view instead of clearing, so the pinned subgraph stays visible while you\n     * scroll down to its responsibility cards.\n     */\n    private locked: string | null = null;\n\n    constructor(private readonly svg: SVGSVGElement) {}\n\n    /** Index the SVG, then wire hover, the lock dropdown, and the per-node floating menu. */\n    wire(): void {\n        this.indexNodes();\n        this.indexEdges();\n        this.wireHover();\n        this.wireLock();\n        this.wireMenu();\n    }\n\n    private indexNodes(): void {\n        this.svg.querySelectorAll('g.node').forEach((g: Element): void => {\n            if (g.classList.contains(LAYOUT_CLASS)) return;\n            const title = g.querySelector('title');\n            if (title !== null && title.textContent !== null) {\n                this.nodeByName.set(title.textContent.trim(), g as SVGGElement);\n            }\n        });\n    }\n\n    private indexEdges(): void {\n        this.svg.querySelectorAll('g.edge').forEach((edge: Element): void => {\n            if (edge.classList.contains(LAYOUT_CLASS)) return;\n            const title = edge.querySelector('title');\n            const text = title === null ? null : title.textContent;\n            if (text === null) return;\n            const idx = text.indexOf('->');\n            if (idx < 0) return;\n            const from = text.slice(0, idx).trim();\n            const to = text.slice(idx + 2).trim();\n            this.ensureEdges(this.outEdges, from).add(edge);\n            this.ensureEdges(this.inEdges, to).add(edge);\n            this.ensureNodes(this.outNodes, from).add(to);\n            this.ensureNodes(this.inNodes, to).add(from);\n        });\n    }\n\n    private ensureEdges(map: Map<string, Set<Element>>, key: string): Set<Element> {\n        const existing = map.get(key);\n        if (existing !== undefined) return existing;\n        const created = new Set<Element>();\n        map.set(key, created);\n        return created;\n    }\n\n    private ensureNodes(map: Map<string, Set<string>>, key: string): Set<string> {\n        const existing = map.get(key);\n        if (existing !== undefined) return existing;\n        const created = new Set<string>();\n        map.set(key, created);\n        return created;\n    }\n\n    private clear(): void {\n        this.svg.classList.remove('wp-dim');\n        this.svg.querySelectorAll('.wp-focus, .wp-neighbor, .wp-hl').forEach((el: Element): void => {\n            el.classList.remove('wp-focus', 'wp-neighbor', 'wp-hl');\n        });\n    }\n\n    /**\n     * Dim everything, then transitively light ancestors and descendants of `name`: edges reached get\n     * `wp-hl`, boxes get `wp-neighbor`. The `visited` set is what makes a cyclic graph terminate.\n     */\n    private highlight(name: string, focusEl: SVGGElement): void {\n        this.clear();\n        this.svg.classList.add('wp-dim');\n        focusEl.classList.add('wp-focus');\n        const directions = [\n            new Direction(this.inNodes, this.inEdges),\n            new Direction(this.outNodes, this.outEdges),\n        ];\n        for (const dir of directions) this.walk(name, dir);\n    }\n\n    private walk(start: string, dir: Direction): void {\n        const visited = new Set<string>();\n        const stack = [start];\n        while (stack.length > 0) {\n            const cur = stack.pop() as string;\n            const edges = dir.edges.get(cur);\n            if (edges !== undefined) {\n                edges.forEach((e: Element): void => { e.classList.add('wp-hl'); });\n            }\n            const next = dir.nodes.get(cur);\n            if (next === undefined) continue;\n            next.forEach((name: string): void => {\n                if (visited.has(name)) return;\n                visited.add(name);\n                stack.push(name);\n                const g = this.nodeByName.get(name);\n                if (g !== undefined) g.classList.add('wp-neighbor');\n            });\n        }\n    }\n\n    /** Leaving a box restores the locked view rather than clearing it outright. */\n    private relight(): void {\n        if (this.locked === null) {\n            this.clear();\n            return;\n        }\n        const g = this.nodeByName.get(this.locked);\n        if (g !== undefined) this.highlight(this.locked, g);\n    }\n\n    private wireHover(): void {\n        this.nodeByName.forEach((g: SVGGElement, name: string): void => {\n            g.addEventListener('mouseenter', (): void => { this.highlight(name, g); });\n            g.addEventListener('mouseleave', (): void => { this.relight(); });\n        });\n    }\n\n    private wireLock(): void {\n        const lockSelect = this.lockSelect();\n        if (lockSelect === null) return;\n        lockSelect.addEventListener('change', (): void => {\n            this.applyLock(lockSelect.value === '' ? null : lockSelect.value);\n        });\n    }\n\n    private lockSelect(): HTMLSelectElement | null {\n        return document.getElementById('wp-lock') as HTMLSelectElement | null;\n    }\n\n    /** True when `name` is the box the page is currently locked on — what the menu labels itself by. */\n    isLocked(name: string): boolean {\n        return this.locked === name;\n    }\n\n    /**\n     * THE one lock entry point, so the dropdown and the node menu can never disagree: it sets the\n     * dropdown's selection, re-highlights, and re-filters the cards whichever of the two asked.\n     * `null` is \"All (no lock)\".\n     */\n    setLock(name: string | null): void {\n        const lockSelect = this.lockSelect();\n        if (lockSelect !== null) lockSelect.value = name === null ? '' : name;\n        this.applyLock(name);\n    }\n\n    private applyLock(name: string | null): void {\n        this.locked = name;\n        if (name === null) {\n            this.clear();\n        } else {\n            const g = this.nodeByName.get(name);\n            if (g !== undefined) this.highlight(name, g);\n        }\n        this.filterCards();\n    }\n\n    /**\n     * Every box opens the floating menu (the shared one both generated graphs use). \"View Design\" is\n     * only built when that project actually HAS a committed design.html; the bottom item is always\n     * Lock or Unlock, whichever applies to this box right now.\n     */\n    private wireMenu(): void {\n        const designs = new Map<string, string>();\n        for (const link of __DESIGN_LINKS__) designs.set(link.nodeId, link.href);\n        WpNodeMenu.wire(this.svg, (name: string): WpNodeMenuItem[] => {\n            const items: WpNodeMenuItem[] = [];\n            const href = designs.get(name);\n            if (href !== undefined) {\n                items.push(new WpNodeMenuItem('View Design', (): void => { window.open(href, '_blank'); }));\n            }\n            const locked = this.isLocked(name);\n            items.push(new WpNodeMenuItem(locked ? 'Unlock' : 'Lock', (): void => {\n                this.setLock(locked ? null : name);\n            }));\n            return items;\n        });\n    }\n\n    /**\n     * Filter the responsibility cards to the locked box's chain by READING BACK the\n     * `.wp-focus`/`.wp-neighbor` classes highlight() just set — so there is no second graph walk and\n     * the cards can never disagree with the picture.\n     */\n    private filterCards(): void {\n        const lit = new Set<string>();\n        if (this.locked !== null) {\n            this.svg.querySelectorAll('.wp-focus, .wp-neighbor').forEach((el: Element): void => {\n                const title = el.querySelector('title');\n                if (title !== null && title.textContent !== null) lit.add(title.textContent.trim());\n            });\n        }\n        document.querySelectorAll('.wp-resp-card').forEach((card: Element): void => {\n            const name = card.getAttribute('data-node');\n            const visible = this.locked === null || (name !== null && lit.has(name));\n            card.classList.toggle('wp-hidden', !visible);\n        });\n    }\n}\n\n/** Renders the DOT and hands the SVG to the highlighter. Reports a failure into the page, not just the console. */\nclass GraphPage {\n    render(): void {\n        Viz.instance()\n            .then((viz: VizInstance): void => {\n                const element = viz.renderSVGElement(__DOT__);\n                const host = document.getElementById('graph');\n                if (host === null) return;\n                host.appendChild(element);\n                new GraphHighlighter(element).wire();\n            })\n            // webpieces-disable no-any-unknown -- a promise rejection reason is untyped BY THE LANGUAGE (any value can be thrown), and this browser script cannot import the repo's toError helper; it is stringified, never dereferenced\n            .catch((err: unknown): void => {\n                console.error(err);\n                const host = document.getElementById('graph');\n                if (host !== null) host.innerHTML = '<pre>' + String(err) + '</pre>';\n            });\n    }\n}\n\nnew GraphPage().render();\n"]}
+{"version":3,"file":"graph-visualizer.client.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-visualizer.client.ts"],"names":[],"mappings":"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","sourcesContent":["/** Architecture interactions bind to each new SVG; logical Lock/Filter state belongs to the page. */\nclass GraphHighlighter {\n    private readonly nodeByName = new Map<string, SVGGElement>();\n\n    constructor(\n        private readonly svg: SVGSVGElement,\n        private readonly chain: WpGraphChain,\n        private readonly model: RenderModelJson,\n        private readonly page: GraphPage,\n    ) {}\n\n    wire(): void {\n        this.svg.querySelectorAll<SVGGElement>('g.node').forEach((g) => {\n            if (g.classList.contains('wp-layout')) return;\n            const name = g.querySelector('title')?.textContent;\n            if (name !== null && name !== undefined) this.nodeByName.set(name, g);\n        });\n        this.wireHover();\n        this.wireMenu();\n        this.relight();\n    }\n\n    private clear(): void {\n        this.svg.classList.remove('wp-dim');\n        this.svg.querySelectorAll('.wp-focus, .wp-neighbor, .wp-hl').forEach((el) => {\n            el.classList.remove('wp-focus', 'wp-neighbor', 'wp-hl');\n        });\n    }\n\n    private highlight(name: string): void {\n        this.clear();\n        const focus = this.nodeByName.get(name);\n        if (focus === undefined) return;\n        const lit = this.chain.nodes(name);\n        this.svg.classList.add('wp-dim');\n        focus.classList.add('wp-focus');\n        for (const id of lit) this.nodeByName.get(id)?.classList.add('wp-neighbor');\n        for (const edge of this.model.edges) {\n            if (lit.has(edge.from) && lit.has(edge.to)) {\n                this.svg.querySelector(`[id=\"${edge.id}\"]`)?.classList.add('wp-hl');\n            }\n        }\n    }\n\n    relight(): void {\n        const locked = this.page.lockSelection();\n        if (locked === null) this.clear();\n        else this.highlight(locked);\n    }\n\n    private wireHover(): void {\n        this.nodeByName.forEach((g, name) => {\n            g.addEventListener('mouseenter', () => this.highlight(name));\n            g.addEventListener('mouseleave', () => this.relight());\n        });\n    }\n\n    private wireMenu(): void {\n        const designs = new Map(__DESIGN_LINKS__.map((link) => [link.nodeId, link.href]));\n        WpNodeMenu.wire(this.svg, (name) => {\n            const items: WpNodeMenuItem[] = [];\n            const href = designs.get(name);\n            if (href !== undefined)\n                items.push(new WpNodeMenuItem('View Design', () => window.open(href, '_blank')));\n            const locked = this.page.lockSelection() === name;\n            items.push(\n                new WpNodeMenuItem(locked ? 'Unlock' : 'Lock', () =>\n                    this.page.setLock(locked ? null : name),\n                ),\n            );\n            items.push(this.page.filterItem(name));\n            return items;\n        });\n    }\n}\n\nclass GraphPage extends WpFilterPage {\n    private highlighter: GraphHighlighter | null = null;\n\n    protected override captureBinding(_svg: SVGSVGElement | null): () => void {\n        const previous = this.highlighter;\n        return (): void => { this.highlighter = previous; this.filterCards(); };\n    }\n\n    protected override wireControls(): void {\n        const select = document.getElementById('wp-lock') as HTMLSelectElement | null;\n        select?.addEventListener('change', () =>\n            this.setLock(select.value === '' ? null : select.value),\n        );\n    }\n\n    protected wireSvg(svg: SVGSVGElement): void {\n        this.highlighter = new GraphHighlighter(svg, this.chain, this.model, this);\n        this.highlighter.wire();\n        this.filterCards();\n        svg.querySelectorAll<SVGGElement>('g.node').forEach((node) => {\n            if (node.querySelector('title')?.textContent === this.anchor)\n                node.classList.add('wp-filter-anchor');\n        });\n    }\n\n    lockSelection(): string | null {\n        return this.locked;\n    }\n\n    setLock(name: string | null): void {\n        this.locked = name;\n        const select = document.getElementById('wp-lock') as HTMLSelectElement | null;\n        if (select !== null) select.value = name ?? '';\n        this.highlighter?.relight();\n        this.filterCards();\n    }\n\n    private filterCards(): void {\n        const lit = this.locked === null ? this.retained : this.chain.nodes(this.locked);\n        document.querySelectorAll('.wp-resp-card').forEach((card) => {\n            const name = card.getAttribute('data-node');\n            card.classList.toggle(\n                'wp-hidden',\n                name === null || !this.retained.has(name) || !lit.has(name),\n            );\n        });\n    }\n}\n\nnew GraphPage(__RENDER_MODEL__).render();\n"]}