@webpieces/nx-webpieces-rules 0.4.978 → 0.4.980

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

@@ -98,7 +98,7 @@ class WpProjectFilter {
         return selected.size === 0 || carried.some((value) => selected.has(value));
     }
 }
-/** Architecture interactions bind to each new SVG; logical Lock/Filter state belongs to the page. */
+/** Architecture interactions bind to each new SVG; logical Focus/Keep state belongs to the page. */
 class GraphHighlighter {
     svg;
     chain;
@@ -130,13 +130,16 @@ class GraphHighlighter {
             el.classList.remove('wp-focus', 'wp-neighbor', 'wp-hl', 'wp-locked');
         });
     }
+    /**
+     * Light the UNION of every focused box's chains, plus the hovered box's. A focused box that is not
+     * drawn right now is suspended, its otherwise visible relatives included, until it is drawn again.
+     */
     relight() {
         this.clear();
-        const locked = this.page.lockSelection();
-        if (locked !== null)
-            this.nodeByName.get(locked)?.classList.add('wp-locked');
-        // A filtered-out Lock is suspended, including its otherwise visible relatives.
-        const anchors = [locked, this.hovered].filter((name) => name !== null && this.nodeByName.has(name));
+        const focused = [...this.page.focusSelection()].filter((name) => this.nodeByName.has(name));
+        for (const name of focused)
+            this.nodeByName.get(name)?.classList.add('wp-locked');
+        const anchors = this.hovered !== null && this.nodeByName.has(this.hovered) ? [...focused, this.hovered] : focused;
         if (anchors.length === 0)
             return;
         const lit = new Set();
@@ -177,9 +180,9 @@ class GraphHighlighter {
             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', () => locked ? this.page.clearSelection() : this.page.setLock(name)));
-            items.push(this.page.filterItem(name));
+            const focused = this.page.focusSelection().has(name);
+            items.push(new WpNodeMenuItem(focused ? 'Remove from Focus' : 'Add to Focus', () => this.page.toggleFocus(name)));
+            items.push(this.page.keepItem(name));
             items.unshift(...this.page.impactItems(name, node));
             const implemented = window.__WP_RUNTIME__?.implementsItem(name, node);
             if (implemented)
@@ -301,17 +304,21 @@ class GraphDrawer {
     page;
     popover;
     openers = new Map();
+    /** The two multi-selects (#1385): one implementation, two instances. */
+    keep;
+    focus;
     constructor(page) {
         this.page = page;
         this.popover = new GraphFilterPopover(page);
+        this.keep = new WpMultiSelect('keep', new WpKeepSource(page));
+        this.focus = new WpMultiSelect('focus', new WpFocusSource(page));
     }
     wire() {
         this.wireModeMenu();
         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.keep.wire();
+        this.focus.wire();
         this.toggles('wp-collapse', 'wp-shell', true);
         this.toggles('wp-help-btn', 'wp-help', false);
         this.toggles('wp-help-close', 'wp-help', false);
@@ -323,6 +330,10 @@ class GraphDrawer {
         window.addEventListener('keydown', (ev) => this.onKey(ev), true);
         window.addEventListener('hashchange', () => this.page.setMode(location.hash.slice(1)));
         document.addEventListener('click', (ev) => {
+            for (const multi of [this.keep, this.focus]) {
+                if (multi.isOpen() && !multi.clicked(ev))
+                    multi.close(false);
+            }
             const target = ev.target;
             if (target instanceof Node && this.byId('wp-mode-menu')?.parentElement?.contains(target))
                 return;
@@ -390,38 +401,11 @@ class GraphDrawer {
         if (returnFocus)
             trigger?.focus({ preventScroll: true });
     }
-    /** Type-to-search lock: an exact project id (or a unique short name) locks, empty or Esc unlocks. */
-    wireLock() {
-        const input = this.lockInput();
-        if (input === null)
-            return;
-        input.addEventListener('input', () => {
-            const value = input.value.trim();
-            if (value === '')
-                this.page.clearSelection();
-            else if (this.page.hasNode(value))
-                this.page.setLock(value);
-        });
-        input.addEventListener('change', () => {
-            const match = this.page.resolveName(input.value.trim());
-            if (match !== null)
-                this.page.setLock(match);
-            else
-                input.value = this.page.lockSelection() ?? '';
-        });
-        input.addEventListener('keydown', (ev) => {
-            if (ev.key !== 'Escape')
-                return;
-            ev.preventDefault();
-            input.value = '';
-            this.page.clearSelection();
-            input.blur();
-        });
-    }
     /**
      * Page keys, in the CAPTURE phase so the open/closed state of the node menu is read before the
      * menu's own Escape handler closes it: Esc with a menu open only closes the menu. Esc closes an
-     * open Color-by menu or Filter popover first, too.
+     * open Color-by menu, Filter popover or Keep/Focus pulldown first, too; with nothing open it clears
+     * Focus. `/` opens Focus with the cursor in its search.
      */
     onKey(ev) {
         if (ev.altKey || ev.ctrlKey || ev.metaKey)
@@ -434,6 +418,12 @@ class GraphDrawer {
             this.popover.close();
             return;
         }
+        const pulldown = [this.keep, this.focus].find((multi) => multi.isOpen());
+        if (ev.key === 'Escape' && pulldown !== undefined) {
+            ev.preventDefault();
+            pulldown.close(true);
+            return;
+        }
         if (ev.key === 'Escape' && this.dismissOverlay())
             return;
         const target = ev.target;
@@ -444,7 +434,8 @@ class GraphDrawer {
             this.byId('wp-shell')?.classList.remove('wp-collapsed');
             this.byId('wp-collapse')?.setAttribute('aria-expanded', 'true');
             ev.preventDefault();
-            this.lockInput()?.focus();
+            this.keep.close(false);
+            this.focus.open();
             return;
         }
         const index = ['1', '2', '3', '4', '5'].indexOf(ev.key);
@@ -452,8 +443,8 @@ class GraphDrawer {
             this.page.setMode(WpModeState.MODES[index]);
             return;
         }
-        if (ev.key === 'Escape' && !menuOpen && this.page.lockSelection() !== null)
-            this.page.setLock(null);
+        if (ev.key === 'Escape' && !menuOpen && this.page.focusSelection().size > 0)
+            this.page.clearFocus();
     }
     /** `button` shows/hides `target`; for the drawer itself it toggles the collapsed class instead. */
     toggles(buttonId, targetId, collapse) {
@@ -507,7 +498,7 @@ class GraphDrawer {
         }
     }
     /** Repaint every control from the page's state. */
-    sync(modes, locked, filtering, filter) {
+    sync(modes, filter) {
         const reason = modes.impactReason();
         document.querySelectorAll('.wp-mode[data-wp-mode]').forEach((button) => {
             const mode = button.dataset['wpMode'] ?? '';
@@ -546,26 +537,10 @@ class GraphDrawer {
         const title = this.byId('wp-legend-pop-title');
         if (title !== null)
             title.textContent = `Legend · ${modes.name(modes.mode)}`;
-        const input = this.lockInput();
-        if (input !== null && document.activeElement !== input)
-            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.keep.sync();
+        this.focus.sync();
         this.syncFilter(filter);
-        this.crumb(modes.name(modes.mode), locked);
-    }
-    syncFilterToggle(locked, filtering) {
-        const toggle = this.byId('wp-filter-toggle');
-        if (toggle === null)
-            return;
-        toggle.setAttribute('aria-pressed', String(filtering));
-        toggle.disabled = !filtering && locked === null;
-        toggle.title = toggle.disabled ? 'Lock a project first' : '';
+        this.crumb(modes.name(modes.mode), this.page.focusSelection());
     }
     /** The drawer button's count badge, and one removable pill per active filter in the top bar. */
     syncFilter(filter) {
@@ -635,8 +610,8 @@ class GraphDrawer {
         const named = files.slice(0, 2).join(', ') + (files.length > 2 ? ` and ${files.length - 2} more` : '');
         return `${who}: ${named} changed (workspace-global input${files.length > 1 ? 's' : ''})`;
     }
-    /** "Mode: <b>Runtime</b> · Locked: <b>x</b>", built with text nodes so no name is parsed as HTML. */
-    crumb(mode, locked) {
+    /** "Mode: <b>Runtime</b> · Focus: <b>a</b>, <b>b</b> +N", built with text nodes so no name is parsed as HTML. */
+    crumb(mode, focused) {
         const crumb = this.byId('wp-crumb');
         if (crumb === null)
             return;
@@ -646,8 +621,14 @@ class GraphDrawer {
             return b;
         };
         const parts = ['Mode: ', bold(mode)];
-        if (locked !== null)
-            parts.push(' · Locked: ', bold(locked));
+        const names = [...focused].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+        if (names.length > 0)
+            parts.push(' · Focus: ');
+        names.slice(0, 2).forEach((name, index) => {
+            parts.push(...(index === 0 ? [] : [', ']), bold(name));
+        });
+        if (names.length > 2)
+            parts.push(` +${names.length - 2}`);
         crumb.replaceChildren(...parts);
     }
     text(id, value) {
@@ -655,16 +636,34 @@ class GraphDrawer {
         if (el !== null)
             el.textContent = value;
     }
-    lockInput() {
-        return document.getElementById('wp-lock');
-    }
     byId(id) {
         return document.getElementById(id);
     }
 }
+/** "Focus": lights the picks' chains; offers only the boxes drawn after Filter and Keep connected to. */
+class WpFocusSource {
+    page;
+    constructor(page) {
+        this.page = page;
+    }
+    selected() { return this.page.focusSelection(); }
+    available(id) { return this.page.isDrawn(id); }
+    toggle(id) { this.page.toggleFocus(id); }
+    clear() { this.page.clearFocus(); }
+}
+/** "Keep connected to": redraws with the union of the picks' chains; offers every box of the graph. */
+class WpKeepSource {
+    page;
+    constructor(page) {
+        this.page = page;
+    }
+    selected() { return this.page.keepSelection(); }
+    available(id) { return this.page.hasNode(id); }
+    toggle(id) { this.page.toggleKeep(id); }
+    clear() { this.page.clearKeep(); }
+}
 class GraphPage extends WpFilterPage {
     highlighter = null;
-    selected = null;
     /** The page's own graph; Goal vs Current swaps in its overlay and back (#1239). */
     base = this.model;
     modes = new WpModeState(this.model.nodes.some((node) => node.products.length > 0), this.model.viewer ?? 'architecture', this.goalUnavailable(), this.model.comparison?.menuNote || this.goalUnavailable());
@@ -770,43 +769,39 @@ class GraphPage extends WpFilterPage {
         this.filterCards();
         this.syncControls();
         svg.querySelectorAll('g.node').forEach((node) => {
-            if (node.querySelector('title')?.textContent === this.anchor)
+            if (this.keep.has(node.querySelector('title')?.textContent ?? ''))
                 node.classList.add('wp-filter-anchor');
         });
     }
-    lockSelection() {
-        return this.locked;
+    focusSelection() {
+        return this.focused;
+    }
+    /** Whether `id` is drawn right now: what Focus may offer, and a focused box's chip is not "hidden". */
+    isDrawn(id) {
+        return this.retained.has(id) && this.hasNode(id);
+    }
+    toggleFocus(id) {
+        if (this.focused.has(id))
+            this.focused.delete(id);
+        else
+            this.focused.add(id);
+        this.refocus();
+    }
+    clearFocus() {
+        this.focused.clear();
+        this.refocus();
     }
     hasNode(id) {
         return this.model.nodes.some((node) => node.id === id);
     }
     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) {
-        if (text === '')
-            return null;
-        if (this.hasNode(text))
-            return text;
-        const matches = this.model.nodes.filter((node) => node.id.split('/').pop() === text);
-        return matches.length === 1 ? matches[0].id : null;
-    }
-    setLock(name) {
-        this.locked = name;
-        if (name !== null)
-            this.selected = name;
+    /** Focus changed: relight, refilter the cards, and repaint the drawer — no relayout. */
+    refocus() {
         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;
@@ -832,13 +827,6 @@ class GraphPage extends WpFilterPage {
         this.syncControls();
         this.redraw();
     }
-    /** The drawer's "Hide unconnected": filter to the locked box's chain, or turn the filter off. */
-    toggleFilter() {
-        if (this.anchor !== null)
-            this.filter(null);
-        else if (this.locked !== null)
-            this.filter(this.locked);
-    }
     appliedFilter() {
         return this.applied;
     }
@@ -853,12 +841,9 @@ class GraphPage extends WpFilterPage {
         choice.scope = scope;
         return this.preview(choice);
     }
-    /** How many boxes `choice` would show, with the current Hide-unconnected chain. */
+    /** How many boxes `choice` would show, with the current "Keep connected to" picks. */
     preview(choice) {
-        const base = this.anchor === null
-            ? new Set(this.model.nodes.map((node) => node.id))
-            : this.chain.nodes(this.anchor);
-        const kept = this.projects.apply(base, choice);
+        const kept = this.projects.apply(this.kept(this.keep), choice);
         return this.model.nodes.filter(node => kept.has(node.id) && this.projects.isService(node)).length;
     }
     applyFilter(choice) {
@@ -879,7 +864,7 @@ class GraphPage extends WpFilterPage {
     }
     syncControls() {
         document.body.dataset['wpMode'] = this.modes.mode;
-        this.drawer.sync(this.modes, this.locked, this.anchor !== null, this.applied);
+        this.drawer.sync(this.modes, this.applied);
         this.toggles.sync(this.productsOn);
         const count = this.model.nodes.filter(node => this.retained.has(node.id) && this.projects.isService(node)).length;
         const empty = document.getElementById('wp-empty');
@@ -898,8 +883,9 @@ class GraphPage extends WpFilterPage {
                 (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)));
         });
     }
+    /** The cards of the drawn boxes, narrowed by Focus to the union of the focused boxes' chains. */
     filterCards() {
-        const lit = this.locked === null ? this.retained : this.chain.nodes(this.locked);
+        const lit = this.focused.size === 0 ? this.retained : this.kept(this.focused);
         document.querySelectorAll('.wp-resp-card').forEach((card) => {
             const name = card.getAttribute('data-node');
             card.classList.toggle('wp-hidden', name === null || !this.retained.has(name) || !lit.has(name));