@peter.prib/renderengine 0.13.0 → 0.15.0

package/src/charting/ask/AskBar.js

@@ -0,0 +1,388 @@
+import { AskView } from './AskView.js';
+
+/**
+ * AskBar — a self-contained browser UI component for asking questions with preemptive
+ * next-word prediction in a scrollable list (generalizing the Ask bar from
+ * `semanticengine/examples/browser/index.html` into a reusable RenderEngine capability).
+ *
+ * Follows the same OO encapsulation pattern as `ArchimateDiagramEditor`:
+ * - Owns DOM creation, CSS injection, event wiring, and keyboard/scroll management.
+ * - Separates pure state and prediction logic into `AskView` (`this.view`) so all logic is
+ *   DOM-free testable under Node.js.
+ * - Includes a configurable **Predict next word** selector allowing the user (or host) to
+ *   choose how many predicted items are visible at once in the scrollable list (e.g. `Off`,
+ *   `3`, `5`, `8`, `10`), while scrolling (`overflow-y: auto`) or pressing `↑`/`↓` browses
+ *   through the full list of predictions.
+ */
+export class AskBar {
+    /** Approximate height in pixels of one suggestion row in the scrollable list. */
+    static ITEM_HEIGHT = 44;
+
+    /** Numbers each bar's list, so several bars on one page each name their own (ARIA ids). */
+    static _count = 0;
+
+    /**
+     * @param {HTMLElement|string} container host element or its DOM id
+     * @param {object} [options] all `AskView` options plus UI options:
+     * @param {Document} [options.document] DOM document (defaults to `globalThis.document`)
+     * @param {string} [options.placeholder='Ask a question…'] input placeholder
+     * @param {string} [options.buttonLabel='Run'] submit button label
+     * @param {string} [options.ariaLabel='Question'] input aria-label
+     * @param {boolean} [options.showPredictControl=true] whether to show the configurable "Predict next word" selector
+     * @param {string} [options.predictLabel='Predict next word:'] label for the predict selector
+     * @param {boolean} [options.autoRun=false] whether to run `onAsk` immediately upon mounting
+     * @param {object} [options.resultEngine] optional `RenderEngine` instance whose `resultView()` displays `{ rows, columns, complete }` returned by `onAsk`
+     */
+    constructor(container, options = {}) {
+        this.options = options;
+        this.doc = options.document ?? container?.ownerDocument ?? globalThis.document ?? null;
+        this.container = typeof container === 'string'
+            ? this.doc?.getElementById?.(container) ?? null
+            : container ?? null;
+        this.resultEngine = options.resultEngine ?? null;
+
+        const userOnAsk = options.onAsk;
+        this.listId = `re-ask-list-${++AskBar._count}`;
+        this._blurTimer = null;
+        // An answer (`{ rows, columns, complete }`), or a promise of one, is shown by resultEngine.
+        const show = (res) => {
+            if (res && typeof res === 'object' && Array.isArray(res.rows) && this.resultEngine?.resultView) {
+                this.resultEngine.resultView(res.rows, {
+                    columns: res.columns,
+                    complete: res.complete,
+                    pageSize: options.pageSize ?? 10,
+                });
+            }
+            return res;
+        };
+        this.view = options.view instanceof AskView ? options.view : new AskView({
+            ...options,
+            onAsk: (question, view) => {
+                const res = userOnAsk?.(question, view, this);
+                return res && typeof res.then === 'function' ? Promise.resolve(res).then(show) : show(res);
+            },
+            onChange: (view) => {
+                this._syncFromView();
+                options.onChange?.(view, this);
+            },
+        });
+
+        this.root = null;
+        this.inputEl = null;
+        this.suggestEl = null;
+        this.predictSelectEl = null;
+        this.samplesEl = null;
+
+        if (this.container && this.doc) {
+            this.render();
+            if (options.autoRun && this.view.value) {
+                this.view.submit(this.view.value);
+            }
+        }
+    }
+
+    /** Injects the component's scoped stylesheet once per document, build-free and theme-aware. */
+    static _injectStyles(doc) {
+        if (!doc?.head || doc.getElementById?.('re-ask-bar-styles')) return;
+        const style = doc.createElement('style');
+        style.id = 're-ask-bar-styles';
+        style.textContent = `
+            .re-ask-bar { display: flex; flex-direction: column; gap: 6px; font: 14px/1.45 system-ui, sans-serif; color: var(--ws-fg, var(--fg, #1d1d1f)); }
+            .re-ask-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
+            .re-ask-input-wrapper { position: relative; flex: 1 1 260px; min-width: 180px; }
+            .re-ask-input { width: 100%; box-sizing: border-box; padding: 7px 10px; font: inherit; color: inherit; background: var(--ws-panel-bg, var(--bg, #fff)); border: 1px solid var(--ws-border, var(--line, #ccc)); border-radius: 6px; }
+            .re-ask-input:focus { outline: 2px solid var(--ws-accent, var(--accent, #2b5fd9)); outline-offset: -1px; }
+            .re-ask-submit { padding: 7px 14px; font: inherit; font-weight: 500; color: #fff; background: var(--ws-accent, var(--accent, #2b5fd9)); border: 0; border-radius: 6px; cursor: pointer; }
+            .re-ask-submit:hover { filter: brightness(1.06); }
+            .re-ask-predict-ctrl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ws-muted, var(--muted, #666)); }
+            .re-ask-predict-select { padding: 5px 7px; font: inherit; color: var(--ws-fg, var(--fg, #1d1d1f)); background: var(--ws-panel-bg, var(--bg, #fff)); border: 1px solid var(--ws-border, var(--line, #ccc)); border-radius: 5px; }
+            .re-ask-suggest-box {
+                position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 250;
+                background: var(--ws-panel-bg, var(--bg, #fff));
+                border: 1px solid var(--ws-border, var(--line, #ccc));
+                border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+                overflow-y: auto; display: flex; flex-direction: column;
+            }
+            .re-ask-suggest-box[hidden] { display: none !important; }
+            .re-ask-suggest-item {
+                display: flex; align-items: center; justify-content: space-between;
+                padding: 7px 10px; cursor: pointer; font-size: 13px; gap: 8px; user-select: none;
+                box-sizing: border-box; min-height: 36px;
+            }
+            .re-ask-suggest-item:hover, .re-ask-suggest-item.active {
+                background: var(--ws-accent, var(--accent, #2b5fd9)); color: #fff;
+            }
+            .re-ask-suggest-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+            .re-ask-suggest-text { font-family: ui-monospace, monospace; font-size: 13px; }
+            .re-ask-suggest-sense { font-size: 11px; color: var(--ws-muted, var(--muted, #6b6b70)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+            .re-ask-suggest-item:hover .re-ask-suggest-sense,
+            .re-ask-suggest-item.active .re-ask-suggest-sense { color: rgba(255, 255, 255, 0.85); }
+            .re-ask-suggest-badges { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
+            .re-ask-suggest-badge {
+                font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
+                padding: 2px 6px; border-radius: 4px;
+                background: var(--ws-border, var(--line, #e0e0e4));
+                color: var(--ws-muted, var(--muted, #555)); flex-shrink: 0;
+            }
+            .re-ask-suggest-item:hover .re-ask-suggest-badge,
+            .re-ask-suggest-item.active .re-ask-suggest-badge {
+                background: rgba(255, 255, 255, 0.25); color: #fff;
+            }
+            .re-ask-samples { font-size: 12px; color: var(--ws-muted, var(--muted, #666)); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+            .re-ask-sample-pill {
+                font-family: ui-monospace, monospace; font-size: 11.5px;
+                padding: 2px 6px; border-radius: 4px; cursor: pointer;
+                background: rgba(127,127,127,0.12); border: 1px solid var(--ws-border, var(--line, #ddd));
+                color: var(--ws-fg, var(--fg, #222));
+            }
+            .re-ask-sample-pill:hover { border-color: var(--ws-accent, var(--accent, #2b5fd9)); }
+        `;
+        doc.head.appendChild(style);
+    }
+
+    /** Builds the AskBar DOM inside `this.container`. */
+    render() {
+        if (!this.container || !this.doc) return this;
+        AskBar._injectStyles(this.doc);
+
+        const root = this.doc.createElement('div');
+        root.className = 're-ask-bar';
+
+        const form = this.doc.createElement('form');
+        form.className = 're-ask-form';
+
+        const wrapper = this.doc.createElement('div');
+        wrapper.className = 're-ask-input-wrapper';
+
+        const input = this.doc.createElement('input');
+        input.className = 're-ask-input';
+        input.type = 'text';
+        input.value = this.view.value;
+        input.placeholder = this.options.placeholder ?? 'Ask a question…';
+        input.setAttribute('aria-label', this.options.ariaLabel ?? 'Question');
+        input.setAttribute('autocomplete', 'off');
+        input.setAttribute('spellcheck', 'false');
+        // A combobox over its list of completions (WAI-ARIA 1.2), so a screen reader follows ↑/↓.
+        input.setAttribute('role', 'combobox');
+        input.setAttribute('aria-autocomplete', 'list');
+        input.setAttribute('aria-controls', this.listId);
+        input.setAttribute('aria-expanded', 'false');
+
+        const suggestBox = this.doc.createElement('div');
+        suggestBox.className = 're-ask-suggest-box';
+        suggestBox.id = this.listId;
+        suggestBox.hidden = true;
+        suggestBox.setAttribute('role', 'listbox');
+        suggestBox.setAttribute('aria-label', 'Suggested completions');
+
+        wrapper.appendChild(input);
+        wrapper.appendChild(suggestBox);
+        form.appendChild(wrapper);
+
+        const submitBtn = this.doc.createElement('button');
+        submitBtn.type = 'submit';
+        submitBtn.className = 're-ask-submit';
+        submitBtn.textContent = this.options.buttonLabel ?? 'Run';
+        form.appendChild(submitBtn);
+
+        if (this.options.showPredictControl !== false) {
+            const ctrlLabel = this.doc.createElement('label');
+            ctrlLabel.className = 're-ask-predict-ctrl';
+            ctrlLabel.textContent = this.options.predictLabel ?? 'Predict next word:';
+
+            const select = this.doc.createElement('select');
+            select.className = 're-ask-predict-select';
+            select.setAttribute('aria-label', 'Predict next word in scrollable list');
+            for (const choice of this.view.predictChoices) {
+                const n = Number(choice);
+                const text = n <= 0 ? 'Off' : `${n} visible (scrollable)`;
+                const opt = this.doc.createElement('option');
+                opt.value = String(n);
+                opt.textContent = text;
+                if (n === this.view.predictCount) opt.selected = true;
+                select.appendChild(opt);
+            }
+            select.addEventListener('change', () => {
+                this.view.setPredictCount(Number(select.value));
+            });
+            ctrlLabel.appendChild(select);
+            form.appendChild(ctrlLabel);
+            this.predictSelectEl = select;
+        }
+
+        root.appendChild(form);
+
+        if (this.view.samples.length > 0) {
+            const samplesRow = this.doc.createElement('div');
+            samplesRow.className = 're-ask-samples';
+            const prefix = this.doc.createElement('span');
+            prefix.textContent = 'Try:';
+            samplesRow.appendChild(prefix);
+            for (const q of this.view.samples) {
+                const pill = this.doc.createElement('code');
+                pill.className = 're-ask-sample-pill';
+                pill.textContent = q;
+                pill.addEventListener('click', () => {
+                    this.view.submit(q);
+                });
+                samplesRow.appendChild(pill);
+            }
+            root.appendChild(samplesRow);
+            this.samplesEl = samplesRow;
+        }
+
+        this.root = root;
+        this.inputEl = input;
+        this.suggestEl = suggestBox;
+        this._wireEvents(form, input);
+        this.container.replaceChildren ? this.container.replaceChildren(root) : (this.container.innerHTML = '', this.container.appendChild(root));
+        this._syncFromView();
+        return this;
+    }
+
+    _wireEvents(form, input) {
+        input.addEventListener('input', () => {
+            this.view.setInput(input.value, { suggest: true });
+        });
+        input.addEventListener('focus', () => {
+            if (this.view.predict) this.view.refresh();
+        });
+        input.addEventListener('blur', () => {
+            this._blurTimer = setTimeout(() => { this._blurTimer = null; this.view.close(); }, 150);
+        });
+        input.addEventListener('keydown', (e) => {
+            if (!this.view.open || this.view.items.length === 0) {
+                if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                    this.view.refresh();
+                }
+                return;
+            }
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.view.move(1);
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.view.move(-1);
+            } else if (e.key === 'Tab') {
+                e.preventDefault();
+                this.view.accept(this.view.selectedIndex >= 0 ? this.view.selectedIndex : 0);
+                this.inputEl?.focus?.();
+            } else if (e.key === 'Enter' && this.view.selectedIndex >= 0) {
+                e.preventDefault();
+                this.view.accept(this.view.selectedIndex);
+                this.inputEl?.focus?.();
+            } else if (e.key === 'Escape') {
+                this.view.close();
+            }
+        });
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.view.submit(input.value);
+        });
+    }
+
+    /** Swaps where suggestions come from (`AskView.setSuggest`): another model or ontology. */
+    setSuggest(suggest) {
+        this.view.setSuggest(suggest);
+        return this;
+    }
+
+    /** Sets the question shown, without suggesting. */
+    setValue(text) {
+        this.view.setInput(text, { suggest: false });
+        return this;
+    }
+
+    /** Puts the cursor in the question. */
+    focus() {
+        this.inputEl?.focus?.();
+        return this;
+    }
+
+    /** Takes the bar out of its container; a pending close is cancelled. */
+    destroy() {
+        if (this._blurTimer !== null) clearTimeout(this._blurTimer);
+        this._blurTimer = null;
+        this.root?.remove?.();
+        this.root = this.inputEl = this.suggestEl = this.predictSelectEl = this.samplesEl = null;
+    }
+
+    _syncFromView() {
+        if (!this.inputEl || !this.suggestEl) return;
+        if (this.inputEl.value !== this.view.value) {
+            this.inputEl.value = this.view.value;
+        }
+        if (this.predictSelectEl) {
+            const val = String(this.view.predictCount);
+            if (this.predictSelectEl.value !== val) this.predictSelectEl.value = val;
+        }
+
+        const active = this.view.selectedIndex;
+        if (active >= 0 && this.view.open) this.inputEl.setAttribute('aria-activedescendant', `${this.listId}-${active}`);
+        else this.inputEl.removeAttribute?.('aria-activedescendant');
+
+        if (!this.view.open || !this.view.predict || this.view.items.length === 0) {
+            this.inputEl.setAttribute('aria-expanded', 'false');
+            this.suggestEl.hidden = true;
+            if (this.suggestEl.replaceChildren) this.suggestEl.replaceChildren();
+            return;
+        }
+
+        this.suggestEl.style.maxHeight = `${Math.max(1, this.view.visibleCount) * AskBar.ITEM_HEIGHT}px`;
+        if (this.suggestEl.replaceChildren) this.suggestEl.replaceChildren();
+
+        this.view.items.forEach((item, idx) => {
+            const row = this.doc.createElement('div');
+            row.className = `re-ask-suggest-item${idx === this.view.selectedIndex ? ' active' : ''}`;
+            row.dataset.index = String(idx);
+            row.id = `${this.listId}-${idx}`;
+            row.setAttribute('role', 'option');
+            row.setAttribute('aria-selected', String(idx === this.view.selectedIndex));
+
+            const mainCol = this.doc.createElement('div');
+            mainCol.className = 're-ask-suggest-main';
+
+            const textSpan = this.doc.createElement('span');
+            textSpan.className = 're-ask-suggest-text';
+            textSpan.textContent = item.display;
+            mainCol.appendChild(textSpan);
+
+            if (item.sense) {
+                const senseSpan = this.doc.createElement('span');
+                senseSpan.className = 're-ask-suggest-sense';
+                senseSpan.textContent = `${item.sense}${item.reference ? ` → ${item.reference}` : ''}`;
+                mainCol.appendChild(senseSpan);
+            }
+
+            const badges = this.doc.createElement('div');
+            badges.className = 're-ask-suggest-badges';
+
+            if (item.relation && item.relation !== 'canonical' && item.relation !== 'function') {
+                const relBadge = this.doc.createElement('span');
+                relBadge.className = 're-ask-suggest-badge';
+                relBadge.textContent = item.relation;
+                badges.appendChild(relBadge);
+            }
+            if (item.kind) {
+                const kindBadge = this.doc.createElement('span');
+                kindBadge.className = 're-ask-suggest-badge';
+                kindBadge.textContent = item.kind;
+                badges.appendChild(kindBadge);
+            }
+
+            row.appendChild(mainCol);
+            row.appendChild(badges);
+            row.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                this.view.accept(idx);
+                this.inputEl?.focus?.();
+            });
+            this.suggestEl.appendChild(row);
+            if (idx === this.view.selectedIndex && typeof row.scrollIntoView === 'function') {
+                row.scrollIntoView({ block: 'nearest' });
+            }
+        });
+        this.suggestEl.hidden = false;
+        this.inputEl.setAttribute('aria-expanded', 'true');
+    }
+}