@webpieces/nx-webpieces-rules 0.4.883 → 0.4.885

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

@@ -1,150 +1,4 @@
 "use strict";
-/**
- * The four color modes (graph-color-modes.ts), the viewer's remembered choice, and Impact's data.
- *
- * The mode is deep-linkable (`#runtime`, `#architecture`, `#impact`, `#product`, which win over the
- * remembered one) and remembered per viewer in localStorage. Product is unavailable on a page whose
- * workspace declares no `product:` tag. Storage can be missing or throw (a private window,
- * blocked site data, a file:// page in some browsers), so every access is wrapped and the page works
- * without it.
- *
- * Impact can carry two scans (#1163): "Changed on this branch" (kind `branch`) and "Last commit"
- * (kind `commit`). The ACTIVE one starts as the sidecar's `defaultKind` (or the viewer's remembered
- * choice, when that scan exists and is available) and is what every Impact color, note and Filter
- * set reads.
- */
-class WpModeState {
-    hasProducts;
-    static MODES = ['runtime', 'architecture', 'impact', 'product'];
-    static NAMES = ['Runtime', 'Architecture', 'Impact', 'Product'];
-    static SUBTITLES = [
-        'where the code can run',
-        'servers · clients · APIs',
-        'what changed',
-        'which products it belongs to',
-    ];
-    static STORAGE_KEY = 'wp-architecture-graph-mode';
-    static KIND_STORAGE_KEY = 'wp-architecture-graph-impact-kind';
-    scans = window.__WP_IMPACT__?.scans ?? [];
-    kind = '';
-    mode = 'runtime';
-    /** @param hasProducts some box belongs to a product, so the Product mode has something to show */
-    constructor(hasProducts) {
-        this.hasProducts = hasProducts;
-        this.kind = this.initialKind();
-        this.mode = this.initial();
-    }
-    /** '' when Product can be shown, else why not. */
-    productReason() {
-        return this.hasProducts
-            ? ''
-            : 'No products here: tag servers, clients and apps product:<name> in their project.json, then regenerate.';
-    }
-    /** The active scan; null when the page has no Impact data. */
-    get impact() {
-        return this.scans.find((scan) => scan.kind === this.kind) ?? null;
-    }
-    /** '' when Impact can be shown, else the one line the drawer and the Filter popover say instead. */
-    impactReason() {
-        const impact = this.impact;
-        if (impact === null)
-            return 'No impact data here. Run pnpm arch:visualize (nx run architecture:visualize) to compute it — no full regenerate needed.';
-        return impact.available ? '' : `Impact unavailable (${impact.label}): ${impact.reason}.`;
-    }
-    /** Switch the active scan; false (and nothing changes) for a missing or unavailable one. */
-    setKind(kind) {
-        if (!this.kindAvailable(kind))
-            return false;
-        this.kind = kind;
-        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- storage is a per-viewer convenience; a blocked store must not break the page
-        try {
-            localStorage.setItem(WpModeState.KIND_STORAGE_KEY, kind);
-            // webpieces-disable no-any-unknown -- browsers may throw any value from blocked storage
-        }
-        catch (err) {
-            //const error = toError(err);
-            void err;
-        }
-        return true;
-    }
-    kindAvailable(kind) {
-        return this.scans.some((scan) => scan.kind === kind && scan.available);
-    }
-    initialKind() {
-        const stored = this.read(WpModeState.KIND_STORAGE_KEY);
-        if (stored !== null && this.kindAvailable(stored))
-            return stored;
-        const preferred = window.__WP_IMPACT__?.defaultKind ?? '';
-        if (this.scans.some((scan) => scan.kind === preferred))
-            return preferred;
-        return this.scans[0]?.kind ?? '';
-    }
-    available(mode) {
-        if (!WpModeState.MODES.includes(mode))
-            return false;
-        if (mode === 'impact')
-            return this.impactReason() === '';
-        if (mode === 'product')
-            return this.productReason() === '';
-        return true;
-    }
-    name(mode) {
-        return WpModeState.NAMES[WpModeState.MODES.indexOf(mode)] ?? mode;
-    }
-    subtitle(mode) {
-        return WpModeState.SUBTITLES[WpModeState.MODES.indexOf(mode)] ?? '';
-    }
-    /** False (and nothing changes) for an unknown or unavailable mode. */
-    set(mode) {
-        if (!this.available(mode))
-            return false;
-        this.mode = mode;
-        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- storage is a per-viewer convenience; a blocked store must not break the page
-        try {
-            localStorage.setItem(WpModeState.STORAGE_KEY, mode);
-            if (location.hash !== `#${mode}`)
-                history.replaceState(null, '', `#${mode}`);
-            // webpieces-disable no-any-unknown -- browsers may throw any value from blocked storage
-        }
-        catch (err) {
-            //const error = toError(err);
-            void err;
-        }
-        return true;
-    }
-    /** Which impact shade a box gets, from the ACTIVE scan. */
-    status(id) {
-        const impact = this.impact;
-        if (impact?.touched.includes(id))
-            return 'touched';
-        if (impact?.affected.includes(id))
-            return 'affected';
-        if (impact?.buildInputs.includes(id))
-            return 'buildInput';
-        return 'untouched';
-    }
-    initial() {
-        const hashed = location.hash.slice(1);
-        if (this.available(hashed))
-            return hashed;
-        const stored = this.read(WpModeState.STORAGE_KEY);
-        if (stored !== null && this.available(stored))
-            return stored;
-        return 'runtime';
-    }
-    read(key) {
-        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- storage is a per-viewer convenience; a blocked store reads as "nothing stored"
-        try {
-            return localStorage.getItem(key);
-            // webpieces-disable no-any-unknown -- browsers may throw any value from blocked storage
-        }
-        catch (err) {
-            //const error = toError(err);
-            void err;
-            return null;
-        }
-    }
-}
 /**
  * One state of the Filter popover: a change scope plus the selected Runtime, Role and Product chips.
  * The page holds the APPLIED one; the popover edits a copy until "Show N projects".
@@ -207,14 +61,14 @@ class WpProjectFilter {
     /** How many drawn projects a scope keeps on its own: the count beside each option. */
     scopeCount(scope) {
         const set = this.scopeSet(scope);
-        return this.model.nodes.filter((node) => set === null || set.has(node.id)).length;
+        return this.model.nodes.filter((node) => this.isService(node) && (set === null || set.has(node.id))).length;
     }
     /** `base` (everything, or the Hide-unconnected chain) narrowed by `choice`. */
     apply(base, choice) {
         const scope = this.scopeSet(choice.scope);
         const kept = new Set();
         for (const node of this.model.nodes) {
-            if (!base.has(node.id))
+            if (!base.has(node.id) || !this.isService(node))
                 continue;
             if (scope !== null && !scope.has(node.id))
                 continue;
@@ -226,8 +80,17 @@ class WpProjectFilter {
                 continue;
             kept.add(node.id);
         }
+        if (this.model.viewer === 'runtime') {
+            for (const node of this.model.nodes) {
+                if (node.tags !== null || !base.has(node.id))
+                    continue;
+                if (this.model.edges.some(edge => (edge.from === node.id && kept.has(edge.to)) || (edge.to === node.id && kept.has(edge.from))))
+                    kept.add(node.id);
+            }
+        }
         return kept;
     }
+    isService(node) { return this.model.viewer !== 'runtime' || node.tags !== null; }
     /** An empty chip group matches every box; otherwise the box must carry one of the chips. */
     anyOf(selected, carried) {
         return selected.size === 0 || carried.some((value) => selected.has(value));
@@ -307,14 +170,17 @@ class GraphHighlighter {
         const designs = new Map();
         for (const link of __DESIGN_LINKS__)
             designs.set(link.nodeId, link.href);
-        WpNodeMenu.wire(this.svg, (name) => {
+        WpNodeMenu.wire(this.svg, (name, node) => {
             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(new WpNodeMenuItem(locked ? 'Unlock' : 'Lock', () => locked ? this.page.clearSelection() : this.page.setLock(name)));
             items.push(this.page.filterItem(name));
+            const implemented = window.__WP_RUNTIME__?.implementsItem(name, node);
+            if (implemented)
+                items.push(implemented);
             return items;
         });
     }
@@ -414,7 +280,7 @@ class GraphFilterPopover {
         const apply = this.byId('wp-filter-apply');
         if (apply !== null) {
             const shown = this.page.preview(this.draft);
-            apply.textContent = `Show ${shown} project${shown === 1 ? '' : 's'}`;
+            apply.textContent = `Show ${shown} ${this.page.noun()}${shown === 1 ? '' : 's'}`;
         }
     }
     byId(id) {
@@ -428,6 +294,7 @@ class GraphFilterPopover {
 class GraphDrawer {
     page;
     popover;
+    openers = new Map();
     constructor(page) {
         this.page = page;
         this.popover = new GraphFilterPopover(page);
@@ -437,6 +304,7 @@ class GraphDrawer {
         this.popover.wire();
         this.wireImpactKinds();
         this.wireLock();
+        this.byId('wp-lock-toggle')?.addEventListener('click', () => this.page.toggleLock());
         this.byId('wp-filter-toggle')?.addEventListener('click', () => this.page.toggleFilter());
         this.toggles('wp-collapse', 'wp-shell', true);
         this.toggles('wp-help-btn', 'wp-help', false);
@@ -453,6 +321,7 @@ class GraphDrawer {
             if (target instanceof Node && this.byId('wp-mode-menu')?.parentElement?.contains(target))
                 return;
             this.closeModeMenu(false);
+            this.dismissOutside(target);
         });
     }
     /** "Color by": the pill trigger opens the menu of four; picking one switches and closes it. */
@@ -523,7 +392,7 @@ class GraphDrawer {
         input.addEventListener('input', () => {
             const value = input.value.trim();
             if (value === '')
-                this.page.setLock(null);
+                this.page.clearSelection();
             else if (this.page.hasNode(value))
                 this.page.setLock(value);
         });
@@ -539,7 +408,7 @@ class GraphDrawer {
                 return;
             ev.preventDefault();
             input.value = '';
-            this.page.setLock(null);
+            this.page.clearSelection();
             input.blur();
         });
     }
@@ -559,11 +428,15 @@ class GraphDrawer {
             this.popover.close();
             return;
         }
+        if (ev.key === 'Escape' && this.dismissOverlay())
+            return;
         const target = ev.target;
         if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)
             return;
-        const menuOpen = document.getElementById('wp-node-menu') !== null;
+        const menuOpen = document.getElementById('wp-node-menu') !== null || document.querySelector('.wp-graph-details:not([hidden])') !== null;
         if (ev.key === '/') {
+            this.byId('wp-shell')?.classList.remove('wp-collapsed');
+            this.byId('wp-collapse')?.setAttribute('aria-expanded', 'true');
             ev.preventDefault();
             this.lockInput()?.focus();
             return;
@@ -591,10 +464,42 @@ class GraphDrawer {
             else {
                 target.hidden = !target.hidden;
                 expanded = !target.hidden;
+                if (expanded)
+                    this.openers.set(targetId, button);
+                else
+                    this.openers.get(targetId)?.focus({ preventScroll: true });
             }
             document.querySelectorAll(`[aria-controls="${targetId}"], #${buttonId}[aria-expanded]`).forEach((el) => el.setAttribute('aria-expanded', String(expanded)));
         });
     }
+    dismissOverlay() {
+        for (const id of ['wp-help', 'wp-legend-popout', 'wp-snapshot', 'wp-resp-panel']) {
+            const panel = this.byId(id);
+            if (!panel || panel.hidden)
+                continue;
+            panel.hidden = true;
+            this.openers.get(id)?.focus({ preventScroll: true });
+            this.openers.get(id)?.setAttribute('aria-expanded', 'false');
+            return true;
+        }
+        return false;
+    }
+    dismissOutside(target) {
+        if (!(target instanceof Node))
+            return;
+        const filter = this.byId('wp-filter-pop');
+        if (this.popover.isOpen() && !filter?.contains(target) && !this.byId('wp-filter-open')?.contains(target))
+            this.popover.close();
+        for (const entry of this.openers) {
+            const id = entry[0];
+            const opener = entry[1];
+            const panel = this.byId(id);
+            if (panel && !panel.hidden && !panel.contains(target) && !opener.contains(target)) {
+                panel.hidden = true;
+                opener.setAttribute('aria-expanded', 'false');
+            }
+        }
+    }
     /** Repaint every control from the page's state. */
     sync(modes, locked, filtering, filter) {
         const reason = modes.impactReason();
@@ -626,7 +531,13 @@ class GraphDrawer {
             title.textContent = `Legend · ${modes.name(modes.mode)}`;
         const input = this.lockInput();
         if (input !== null && document.activeElement !== input)
-            input.value = locked ?? '';
+            input.value = this.page.focusSelection() ?? '';
+        const lockToggle = this.byId('wp-lock-toggle');
+        if (lockToggle !== null) {
+            lockToggle.setAttribute('aria-pressed', String(locked !== null));
+            lockToggle.disabled = locked === null && this.page.focusSelection() === null;
+            lockToggle.title = lockToggle.disabled ? 'Select a node in Focus first' : '';
+        }
         this.syncFilterToggle(locked, filtering);
         this.syncFilter(filter);
         this.crumb(modes.name(modes.mode), locked);
@@ -738,7 +649,8 @@ class GraphDrawer {
 }
 class GraphPage extends WpFilterPage {
     highlighter = null;
-    modes = new WpModeState(this.model.nodes.some((node) => node.products.length > 0));
+    selected = null;
+    modes = new WpModeState(this.model.nodes.some((node) => node.products.length > 0), this.model.viewer ?? 'architecture');
     projects = new WpProjectFilter(this.model, this.modes);
     applied = new WpFilterChoice();
     drawer = new GraphDrawer(this);
@@ -776,6 +688,7 @@ class GraphPage extends WpFilterPage {
     keepsEmptyLevels() {
         return true;
     }
+    prepareSvg(svg) { window.__WP_RUNTIME__?.prepare(svg); }
     wireSvg(svg) {
         this.highlighter = new GraphHighlighter(svg, this.chain, this.model, this);
         this.highlighter.wire();
@@ -792,8 +705,14 @@ class GraphPage extends WpFilterPage {
     hasNode(id) {
         return this.model.nodes.some((node) => node.id === id);
     }
-    projectCount() {
-        return this.model.nodes.length;
+    noun() { return this.model.viewer === 'runtime' ? 'service' : 'project'; }
+    projectCount() { return this.model.nodes.filter(node => this.projects.isService(node)).length; }
+    focusSelection() { return this.selected; }
+    toggleLock() {
+        if (this.locked !== null)
+            this.setLock(null);
+        else if (this.selected !== null)
+            this.setLock(this.selected);
     }
     /** An exact id, else the one id whose short name (after any scope) is `text`; null if none or several. */
     resolveName(text) {
@@ -806,10 +725,13 @@ class GraphPage extends WpFilterPage {
     }
     setLock(name) {
         this.locked = name;
+        if (name !== null)
+            this.selected = name;
         this.highlighter?.relight();
         this.filterCards();
         this.syncControls();
     }
+    clearSelection() { this.selected = null; this.setLock(null); }
     setMode(mode) {
         if (mode === this.modes.mode || !this.modes.set(mode))
             return;
@@ -838,14 +760,19 @@ class GraphPage extends WpFilterPage {
         return this.modes.impactReason();
     }
     scopeCount(scope) {
-        return this.projects.scopeCount(scope);
+        if (this.model.viewer !== 'runtime')
+            return this.projects.scopeCount(scope);
+        const choice = new WpFilterChoice();
+        choice.scope = scope;
+        return this.preview(choice);
     }
     /** How many boxes `choice` would show, with the current Hide-unconnected chain. */
     preview(choice) {
         const base = this.anchor === null
             ? new Set(this.model.nodes.map((node) => node.id))
             : this.chain.nodes(this.anchor);
-        return this.projects.apply(base, choice).size;
+        const kept = this.projects.apply(base, choice);
+        return this.model.nodes.filter(node => kept.has(node.id) && this.projects.isService(node)).length;
     }
     applyFilter(choice) {
         if (this.scopeReason() !== '')
@@ -865,6 +792,22 @@ class GraphPage extends WpFilterPage {
     }
     syncControls() {
         this.drawer.sync(this.modes, this.locked, this.anchor !== null, this.applied);
+        const count = this.model.nodes.filter(node => this.retained.has(node.id) && this.projects.isService(node)).length;
+        const empty = document.getElementById('wp-empty');
+        if (empty !== null)
+            empty.hidden = count !== 0;
+        const context = document.getElementById('wp-context-count');
+        if (context !== null)
+            context.textContent = `${count} services · ${this.retained.size - count} contextual nodes`;
+        this.syncLegend();
+    }
+    syncLegend() {
+        document.querySelectorAll('[data-wp-legend-value]').forEach(row => {
+            const group = row.dataset['wpLegendGroup'];
+            const value = row.dataset['wpLegendValue'] ?? '';
+            row.hidden = !this.model.nodes.some(node => this.retained.has(node.id) &&
+                (group === 'runtime' ? (value === 'unknown' ? node.tags !== null && node.tags.frameworks.length === 0 : node.tags?.frameworks.includes(value)) : group === 'role' ? node.tags?.role === value : node.products.includes(value)));
+        });
     }
     filterCards() {
         const lit = this.locked === null ? this.retained : this.chain.nodes(this.locked);