@webpieces/nx-webpieces-rules 0.4.853 → 0.4.855

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"]}

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

@@ -1,15 +1,5 @@
-/**
- * Graph Visualizer
- *
- * Generates visual representations of the architecture graph:
- * - DOT format (for Graphviz)
- * - Interactive HTML (using viz.js)
- *
- * All behavior lives on the injectable GraphVisualizer class so webpieces DI +
- * @DocumentDesign can wire it — module-scope functions are a dead end the DI
- * graph can't reach.
- */
 import type { EnhancedGraph } from './graph-sorter';
+import { GraphRenderModel } from './graph-render-model';
 /**
  * One node's design page, handed to the browser so the node menu can offer "View Design" for the
  * boxes that HAVE one and omit the item entirely for the boxes that do not.
@@ -31,8 +21,8 @@ export declare class VisualizationPaths {
  * client — the inliner is a blind split/join, so a second occurrence (in a comment, say) would be
  * replaced by the entire DOT too, bloating every generated page.
  */
-export declare const CLIENT_DOT_PLACEHOLDER: string;
-/** Same contract as CLIENT_DOT_PLACEHOLDER, for the node → design.html links the menu offers. */
+export declare const CLIENT_MODEL_PLACEHOLDER: string;
+/** Same contract as CLIENT_MODEL_PLACEHOLDER, for the node → design.html links the menu offers. */
 export declare const CLIENT_DESIGN_LINKS_PLACEHOLDER: string;
 /**
  * Read a compiled browser client sitting beside this file.
@@ -44,6 +34,8 @@ export declare const CLIENT_DESIGN_LINKS_PLACEHOLDER: string;
 export declare function readCompiledClient(name: string): string;
 export declare class GraphVisualizer {
     private readonly clientJs;
+    private readonly filterJs;
+    private readonly filterAssets;
     private readonly snapshot;
     private readonly names;
     private readonly responsibilities;
@@ -57,7 +49,7 @@ export declare class GraphVisualizer {
      * a source checkout (the source there is .client.ts). A unit test running from source supplies the
      * text itself rather than requiring the package to have been built first.
      */
-    constructor(clientJs?: () => string);
+    constructor(clientJs?: () => string, filterJs?: () => string);
     /**
      * A project tagged `drawOnGraph:false` is hidden from the rendered graph —
      * its node, its rank placement, its dropdown option, its responsibilities
@@ -122,6 +114,7 @@ export declare class GraphVisualizer {
      * Generate Graphviz DOT format from the graph
      */
     generateDot(graph: EnhancedGraph, title?: string): string;
+    generateRenderModel(graph: EnhancedGraph, title?: string): GraphRenderModel;
     /**
      * Refuse to draw a graph that would render something false.
      *
@@ -144,7 +137,7 @@ export declare class GraphVisualizer {
     /**
      * Generate interactive HTML with embedded SVG using viz.js
      */
-    generateHTML(dot: string, links: DesignLink[], title?: string, lockControl?: string, responsibilitiesHtml?: string): string;
+    generateHTML(model: GraphRenderModel, links: DesignLink[], title?: string, lockControl?: string, responsibilitiesHtml?: string): string;
     /**
      * The lock control (a single-select dropdown, rendered below the legend).
      * Picking a module LOCKS the graph into that box's hover view — its full