@peter.prib/renderengine 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peter.prib/renderengine",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "ArchiMate modeller, diagram editor and chart library for the browser, with no runtime dependencies.",
   "type": "module",
   "main": "src/index.js",
@@ -28,7 +28,7 @@
     "archimate": "node scripts/open.mjs examples/archimate.html",
     "diagram": "node scripts/open.mjs examples/diagram-editor.html",
     "datamodel": "node scripts/open.mjs examples/data-model.html",
-    "test": "node --test --test-timeout=10000 ./test/*.js ./test/charting/*.js ./test/charting/charts/*.js ./test/charting/diagrams/*.js ./test/charting/shapes/*.js",
+    "test": "node --test --test-timeout=10000 ./test/*.js ./test/charting/*.js ./test/charting/charts/*.js ./test/charting/table/*.js ./test/charting/diagrams/*.js ./test/charting/shapes/*.js",
     "build": "rollup -c",
     "prepublishOnly": "npm test && npm run build",
     "screenshots": "node scripts/screenshots/screenshots.mjs"

package/src/charting/ChartChooser.js

@@ -104,6 +104,17 @@ class ResultShape {
             numbers: columns.filter(c => c.kind === 'numeric'),
         };
     }
+
+    /**
+     * Whether each row has its own value of the category columns. Rows that repeat a category
+     * (rows of orders, not totals per region) would be drawn as one bar per row with the same
+     * label over and over — or, for two categories, one repeated pair would replace another's value
+     * unseen. A chart of a value per category needs one row per category: a GROUP BY first.
+     */
+    static oneRowEach(rows, categories) {
+        const keys = new Set(rows.map(r => JSON.stringify(categories.map(c => r[c.name] ?? null))));
+        return keys.size === rows.length;
+    }
 }
 
 /** One number and nothing to group it by: a single figure. */
@@ -123,7 +134,8 @@ class SingleFigure extends ResultShape {
 class CategoryValue extends ResultShape {
     static of(columns, rows) {
         const { categories, numbers } = ResultShape.split(columns);
-        return categories.length === 1 && numbers.length === 1 ? new CategoryValue(categories[0], numbers[0], rows) : null;
+        return categories.length === 1 && numbers.length === 1 && ResultShape.oneRowEach(rows, categories)
+            ? new CategoryValue(categories[0], numbers[0], rows) : null;
     }
     constructor(category, number, rows) { super(); this.category = category; this.number = number; this.rows = rows; }
     get provides() { return { category: AXIS_KIND.CATEGORICAL, value: AXIS_KIND.NUMERIC }; }
@@ -163,7 +175,8 @@ CategoryValue.MAX_SLICES = 8;
 class CategorySeries extends ResultShape {
     static of(columns, rows) {
         const { categories, numbers } = ResultShape.split(columns);
-        return categories.length === 1 && numbers.length >= 2 ? new CategorySeries(categories[0], numbers, rows) : null;
+        return categories.length === 1 && numbers.length >= 2 && ResultShape.oneRowEach(rows, categories)
+            ? new CategorySeries(categories[0], numbers, rows) : null;
     }
     constructor(category, numbers, rows) { super(); this.category = category; this.numbers = numbers; this.rows = rows; }
     get provides() { return { category: AXIS_KIND.CATEGORICAL, value: AXIS_KIND.NUMERIC, series: AXIS_KIND.CATEGORICAL }; }
@@ -191,7 +204,8 @@ class CategorySeries extends ResultShape {
 class TwoCategories extends ResultShape {
     static of(columns, rows) {
         const { categories, numbers } = ResultShape.split(columns);
-        return categories.length === 2 && numbers.length === 1 ? new TwoCategories(categories, numbers[0], rows) : null;
+        return categories.length === 2 && numbers.length === 1 && ResultShape.oneRowEach(rows, categories)
+            ? new TwoCategories(categories, numbers[0], rows) : null;
     }
     constructor(categories, number, rows) {
         super();

package/src/charting/PopupMenu.js

@@ -1,150 +1,152 @@
-import { el } from '../workspace/dom.js';
-
-/**
- * PopupMenu — the one popup/context menu: a small menu at a screen position,
- * closed by choosing an item, clicking elsewhere, Escape, or scrolling (it
- * would no longer be beside what it was opened on). One is open at a time.
- * Editor menus, the graph engine's ContextMenu and the model tree's menus all
- * render through it.
- *
- * Items: `{ label, action, danger?, checked?, disabled? }`,
- * `{ label, items: [...] }` for a submenu, or `{ separator: true }`.
- */
-export class PopupMenu {
-    static _open = null;
-
-    static show(x, y, items, doc = document) {
-        PopupMenu.close();
-        if (!items.length) return null;
-        const menu = el({
-            ...PopupMenu._panel(items, doc),
-            style: { ...PopupMenu._panelStyle, position: 'fixed', left: `${x}px`, top: `${y}px` },
-        }, doc);
-        doc.body.appendChild(menu);
-        // Opened near the window's right or bottom edge, it moves back into the window.
-        const win = doc.defaultView;
-        const box = menu.getBoundingClientRect?.();
-        if (win && box?.width) {
-            const at = PopupMenu.fit(x, y, box.width, box.height, win.innerWidth, win.innerHeight);
-            Object.assign(menu.style, { left: `${at.x}px`, top: `${at.y}px` });
-        }
-        // Registered after the opening click has finished propagating.
-        const dismiss = () => PopupMenu.close();
-        const onKey = (e) => { if (e.key === 'Escape') PopupMenu.close(); };
-        setTimeout(() => {
-            if (PopupMenu._open?.menu !== menu) return;   // closed meanwhile
-            doc.addEventListener('click', dismiss, { once: true });
-            doc.addEventListener('scroll', dismiss, { once: true, capture: true });
-            doc.addEventListener('keydown', onKey);
-        }, 0);
-        PopupMenu._open = { menu, dismiss, onKey, doc };
-        return menu;
-    }
-
-    /**
-     * Where a menu of a size goes, asked for at (x, y), to be all inside a
-     * window of a size: left of the point when it would pass the right edge,
-     * above it when it would pass the bottom, never past the top-left.
-     */
-    static fit(x, y, width, height, windowWidth, windowHeight, margin = 4) {
-        const left = x + width + margin > windowWidth ? x - width : x;
-        const top = y + height + margin > windowHeight ? y - height : y;
-        return {
-            x: Math.max(margin, Math.min(left, windowWidth - width - margin)),
-            y: Math.max(margin, Math.min(top, windowHeight - height - margin)),
-        };
-    }
-
-    /**
-     * Where a submenu opens beside its item (the item's box `{left, right, top}`),
-     * to be all inside the window: to the right, or to the left when the right
-     * would pass the edge (and there is more room on the left); level with the
-     * item, or lifted by as much as it would pass the bottom. `top` is relative
-     * to the item, as the submenu is positioned.
-     */
-    static submenuPlacement(item, width, height, windowWidth, windowHeight, margin = 4) {
-        const fitsRight = item.right + width + margin <= windowWidth;
-        const side = fitsRight || item.left < windowWidth - item.right ? 'right' : 'left';
-        const top = -4;
-        const overflow = item.top + top + height + margin - windowHeight;
-        return { side, top: overflow > 0 ? Math.max(top - overflow, margin - item.top) : top };
-    }
-
-    static close() {
-        const open = PopupMenu._open;
-        if (!open) return;
-        open.menu.remove();
-        open.doc.removeEventListener('click', open.dismiss);
-        open.doc.removeEventListener('scroll', open.dismiss, { capture: true });
-        open.doc.removeEventListener('keydown', open.onKey);
-        PopupMenu._open = null;
-    }
-
-    static get isOpen() {
-        return !!PopupMenu._open;
-    }
-
-    static _panelStyle = {
-        background: '#fff', border: '1px solid #ccc', borderRadius: '3px', boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
-        zIndex: '10000', minWidth: '170px', fontSize: '12px', fontFamily: 'sans-serif', padding: '4px 0',
-    };
-
-    static _panel(items, doc) {
-        return { attrs: { role: 'menu' }, children: items.map(item => PopupMenu._item(item, doc)) };
-    }
-
-    static _item(item, doc) {
-        if (item.separator) return { attrs: { role: 'separator' }, style: { borderTop: '1px solid #ddd', margin: '4px 0' } };
-        const hover = item.danger ? '#ffe8e8' : '#f0f0f0';
-        const base = {
-            attrs: { role: 'menuitem', 'aria-disabled': item.disabled ? 'true' : null, 'aria-checked': item.checked != null ? String(!!item.checked) : null },
-            style: {
-                padding: '7px 14px', cursor: item.disabled ? 'default' : 'pointer', position: 'relative', whiteSpace: 'nowrap',
-                color: item.disabled ? '#aaa' : item.danger ? '#cc3333' : '', background: item.checked ? '#e3f2fd' : '',
-            },
-        };
-        if (item.items) {
-            let sub;
-            return {
-                ...base,
-                attrs: { ...base.attrs, 'aria-haspopup': 'menu' },
-                on: {
-                    mouseenter: (e) => {
-                        e.currentTarget.style.background = hover;
-                        sub.style.display = 'block';
-                        // Opened near the window's right or bottom edge, it opens left, or lifts.
-                        const win = e.currentTarget.ownerDocument.defaultView;
-                        const box = sub.getBoundingClientRect?.();
-                        if (!win || !box?.width) return;
-                        const at = PopupMenu.submenuPlacement(e.currentTarget.getBoundingClientRect(), box.width, box.height, win.innerWidth, win.innerHeight);
-                        Object.assign(sub.style, at.side === 'left' ? { left: 'auto', right: '100%' } : { left: '100%', right: 'auto' }, { top: `${at.top}px` });
-                    },
-                    mouseleave: (e) => { e.currentTarget.style.background = ''; sub.style.display = 'none'; },
-                    click: (e) => e.stopPropagation(),
-                },
-                children: [
-                    `${item.label} ▸`,
-                    {
-                        ...PopupMenu._panel(item.items, doc),
-                        style: { ...PopupMenu._panelStyle, position: 'absolute', left: '100%', top: '-4px', display: 'none' },
-                        ref: (n) => { sub = n; },
-                    },
-                ],
-            };
-        }
-        return {
-            ...base,
-            text: item.label,
-            on: {
-                mouseenter: (e) => { if (!item.disabled) e.currentTarget.style.background = hover; },
-                mouseleave: (e) => { e.currentTarget.style.background = item.checked ? '#e3f2fd' : ''; },
-                click: (e) => {
-                    e.stopPropagation();
-                    if (item.disabled) return;
-                    PopupMenu.close();
-                    item.action();
-                },
-            },
-        };
-    }
-}
+import { el } from '../workspace/dom.js';
+
+/**
+ * PopupMenu — the one popup/context menu: a small menu at a screen position,
+ * closed by choosing an item, clicking elsewhere, Escape, or scrolling (it
+ * would no longer be beside what it was opened on). One is open at a time.
+ * Editor menus, the graph engine's ContextMenu and the model tree's menus all
+ * render through it.
+ *
+ * Items: `{ label, action, danger?, checked?, disabled? }`,
+ * `{ label, items: [...] }` for a submenu, or `{ separator: true }`.
+ */
+export class PopupMenu {
+    static _open = null;
+
+    static show(x, y, items, doc = document) {
+        PopupMenu.close();
+        if (!items.length) return null;
+        const menu = el({
+            ...PopupMenu._panel(items, doc),
+            style: { ...PopupMenu._panelStyle, position: 'fixed', left: `${x}px`, top: `${y}px` },
+        }, doc);
+        doc.body.appendChild(menu);
+        // Opened near the window's right or bottom edge, it moves back into the window.
+        const win = doc.defaultView;
+        const box = menu.getBoundingClientRect?.();
+        if (win && box?.width) {
+            const at = PopupMenu.fit(x, y, box.width, box.height, win.innerWidth, win.innerHeight);
+            Object.assign(menu.style, { left: `${at.x}px`, top: `${at.y}px` });
+        }
+        // Registered after the opening click has finished propagating.
+        const dismiss = () => PopupMenu.close();
+        const onKey = (e) => { if (e.key === 'Escape') PopupMenu.close(); };
+        setTimeout(() => {
+            if (PopupMenu._open?.menu !== menu) return;   // closed meanwhile
+            doc.addEventListener('click', dismiss, { once: true });
+            doc.addEventListener('scroll', dismiss, { once: true, capture: true });
+            doc.addEventListener('keydown', onKey);
+        }, 0);
+        PopupMenu._open = { menu, dismiss, onKey, doc };
+        return menu;
+    }
+
+    /**
+     * Where a menu of a size goes, asked for at (x, y), to be all inside a
+     * window of a size: left of the point when it would pass the right edge,
+     * above it when it would pass the bottom, never past the top-left.
+     */
+    static fit(x, y, width, height, windowWidth, windowHeight, margin = 4) {
+        const left = x + width + margin > windowWidth ? x - width : x;
+        const top = y + height + margin > windowHeight ? y - height : y;
+        return {
+            x: Math.max(margin, Math.min(left, windowWidth - width - margin)),
+            y: Math.max(margin, Math.min(top, windowHeight - height - margin)),
+        };
+    }
+
+    /**
+     * Where a submenu opens beside its item (the item's box `{left, right, top}`),
+     * to be all inside the window: to the right, or to the left when the right
+     * would pass the edge (and there is more room on the left); level with the
+     * item, or lifted by as much as it would pass the bottom. `top` is relative
+     * to the item, as the submenu is positioned.
+     */
+    static submenuPlacement(item, width, height, windowWidth, windowHeight, margin = 4) {
+        const fitsRight = item.right + width + margin <= windowWidth;
+        const side = fitsRight || item.left < windowWidth - item.right ? 'right' : 'left';
+        const top = -4;
+        const overflow = item.top + top + height + margin - windowHeight;
+        return { side, top: overflow > 0 ? Math.max(top - overflow, margin - item.top) : top };
+    }
+
+    static close() {
+        const open = PopupMenu._open;
+        if (!open) return;
+        open.menu.remove();
+        open.doc.removeEventListener('click', open.dismiss);
+        open.doc.removeEventListener('scroll', open.dismiss, { capture: true });
+        open.doc.removeEventListener('keydown', open.onKey);
+        PopupMenu._open = null;
+    }
+
+    static get isOpen() {
+        return !!PopupMenu._open;
+    }
+
+    // The text colour is set with the background: inherited from a dark-themed page it was light
+    // grey on this white panel, and every item but a disabled or danger one was unreadable.
+    static _panelStyle = {
+        background: '#fff', color: '#222', border: '1px solid #ccc', borderRadius: '3px', boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
+        zIndex: '10000', minWidth: '170px', fontSize: '12px', fontFamily: 'sans-serif', padding: '4px 0',
+    };
+
+    static _panel(items, doc) {
+        return { attrs: { role: 'menu' }, children: items.map(item => PopupMenu._item(item, doc)) };
+    }
+
+    static _item(item, doc) {
+        if (item.separator) return { attrs: { role: 'separator' }, style: { borderTop: '1px solid #ddd', margin: '4px 0' } };
+        const hover = item.danger ? '#ffe8e8' : '#f0f0f0';
+        const base = {
+            attrs: { role: 'menuitem', 'aria-disabled': item.disabled ? 'true' : null, 'aria-checked': item.checked != null ? String(!!item.checked) : null },
+            style: {
+                padding: '7px 14px', cursor: item.disabled ? 'default' : 'pointer', position: 'relative', whiteSpace: 'nowrap',
+                color: item.disabled ? '#aaa' : item.danger ? '#cc3333' : '', background: item.checked ? '#e3f2fd' : '',
+            },
+        };
+        if (item.items) {
+            let sub;
+            return {
+                ...base,
+                attrs: { ...base.attrs, 'aria-haspopup': 'menu' },
+                on: {
+                    mouseenter: (e) => {
+                        e.currentTarget.style.background = hover;
+                        sub.style.display = 'block';
+                        // Opened near the window's right or bottom edge, it opens left, or lifts.
+                        const win = e.currentTarget.ownerDocument.defaultView;
+                        const box = sub.getBoundingClientRect?.();
+                        if (!win || !box?.width) return;
+                        const at = PopupMenu.submenuPlacement(e.currentTarget.getBoundingClientRect(), box.width, box.height, win.innerWidth, win.innerHeight);
+                        Object.assign(sub.style, at.side === 'left' ? { left: 'auto', right: '100%' } : { left: '100%', right: 'auto' }, { top: `${at.top}px` });
+                    },
+                    mouseleave: (e) => { e.currentTarget.style.background = ''; sub.style.display = 'none'; },
+                    click: (e) => e.stopPropagation(),
+                },
+                children: [
+                    `${item.label} ▸`,
+                    {
+                        ...PopupMenu._panel(item.items, doc),
+                        style: { ...PopupMenu._panelStyle, position: 'absolute', left: '100%', top: '-4px', display: 'none' },
+                        ref: (n) => { sub = n; },
+                    },
+                ],
+            };
+        }
+        return {
+            ...base,
+            text: item.label,
+            on: {
+                mouseenter: (e) => { if (!item.disabled) e.currentTarget.style.background = hover; },
+                mouseleave: (e) => { e.currentTarget.style.background = item.checked ? '#e3f2fd' : ''; },
+                click: (e) => {
+                    e.stopPropagation();
+                    if (item.disabled) return;
+                    PopupMenu.close();
+                    item.action();
+                },
+            },
+        };
+    }
+}

package/src/charting/charts/TableChart.js

@@ -87,7 +87,7 @@ export class TableChart extends Chart {
 
     _cell(text, column, left, top, colW, attrs) {
         const end = column.align === 'end';
-        this.renderer.text(text, end ? left + colW - TableChart.PAD_X : left + TableChart.PAD_X, top + TableChart.ROW_H / 2, {
+        return this.renderer.text(text, end ? left + colW - TableChart.PAD_X : left + TableChart.PAD_X, top + TableChart.ROW_H / 2, {
             textAnchor: end ? 'end' : 'start', verticalAlign: 'middle', fontSize: '12px', ...attrs,
         });
     }

package/src/charting/table/TableView.js

@@ -0,0 +1,263 @@
+import { ChartChooser } from '../ChartChooser.js';
+
+/**
+ * TableView — the state of an interactive table over result rows, kept apart from drawing so all of
+ * it can be tested without a DOM: the sort, the filters, the hidden columns and the page, and the
+ * menus a table offers on a cell, a row, a column and the table itself (as PopupMenu item specs).
+ *
+ * Filtering is by choosing values from the table, not typing: a cell's menu keeps or excludes rows
+ * with its value (and, for a number, rows above or below it); a column's menu filters to one of its
+ * values. The table's menu offers "Show as", the chart types ChartChooser says fit what is showing.
+ *
+ * Every change calls `onChange(view)`; the host redraws. A host adds its own items with
+ * `menus: { cell(ctx), row(ctx), column(ctx), table(ctx) }`, each returning PopupMenu items.
+ */
+const FILTER_OPS = {
+    '=': (v, x) => v === x,
+    '!=': (v, x) => v !== x,
+    '>': (v, x) => v != null && v > x,
+    '<': (v, x) => v != null && v < x,
+    'is null': (v) => v == null,
+    'is not null': (v) => v != null,
+};
+
+/** Order of two values for a sort: numbers numerically, everything else as text; nulls last. */
+function compareValues(a, b) {
+    if (a == null) return b == null ? 0 : 1;
+    if (b == null) return -1;
+    if (typeof a === 'number' && typeof b === 'number') return a - b;
+    const x = String(a), y = String(b);
+    return x < y ? -1 : x > y ? 1 : 0;
+}
+
+/** A value as copied text: null as empty, an object as JSON. */
+function plain(value) {
+    if (value == null) return '';
+    if (value instanceof Date) return value.toISOString();
+    return typeof value === 'object' ? JSON.stringify(value) : String(value);
+}
+
+export class TableView {
+    /** The most distinct values a column's "Filter to" menu lists. */
+    static MAX_FILTER_VALUES = 20;
+
+    /**
+     * @param {Array<object>} rows
+     * @param {object} [options]
+     * @param {Array<{name, kind?, measure?}>} [options.columns] hints, as ChartChooser takes them
+     * @param {boolean} [options.complete] false when the rows are only part of the answer (a top N)
+     * @param {number} [options.pageSize] rows per page (50; Infinity for all)
+     * @param {function} [options.onChange] called with the view after every change
+     * @param {object} [options.menus] the host's own items: { cell, row, column, table } → items
+     * @param {function} [options.copy] writes text to the clipboard (navigator.clipboard by default)
+     * @param {ChartChooser} [options.chooser]
+     */
+    constructor(rows, { columns = null, complete = true, pageSize = 50, onChange = null, menus = {}, copy = null, chooser = null } = {}) {
+        this.rows = rows;
+        this.columns = ChartChooser.describe(rows, columns);
+        this.complete = complete;
+        this.pageSize = pageSize;
+        this.onChange = onChange;
+        this.menus = menus;
+        this.copy = copy ?? TableView.clipboard;
+        this.chooser = chooser ?? new ChartChooser();
+        this.sort = null;            // { column, direction: 'asc' | 'desc' }
+        this.filters = [];           // { column, op, value }
+        this.hidden = new Set();
+        this.page = 0;
+    }
+
+    static clipboard(text) {
+        return globalThis.navigator?.clipboard?.writeText(text);
+    }
+
+    // ── What is showing ───────────────────────────────────────────────────────
+
+    visibleColumns() { return this.columns.filter(c => !this.hidden.has(c.name)); }
+
+    filtered() {
+        return this.filters.length === 0 ? this.rows
+            : this.rows.filter(r => this.filters.every(f => FILTER_OPS[f.op](r[f.column], f.value)));
+    }
+
+    /** The filtered rows in sort order (a copy; equal values keep their order). */
+    ordered() {
+        const rows = this.filtered();
+        if (this.sort === null) return rows;
+        const { column, direction } = this.sort;
+        const sign = direction === 'desc' ? -1 : 1;
+        // Nulls stay last whichever way: a reader looks for values, not for blanks.
+        return [...rows].sort((a, b) => (a[column] == null || b[column] == null ? compareValues(a[column], b[column]) : sign * compareValues(a[column], b[column])));
+    }
+
+    pageCount() {
+        return Number.isFinite(this.pageSize) ? Math.max(1, Math.ceil(this.filtered().length / this.pageSize)) : 1;
+    }
+
+    /** The rows on the current page, each with its position in the ordered rows (`index`, from 0). */
+    pageRows() {
+        const rows = this.ordered();
+        const start = Number.isFinite(this.pageSize) ? this.page * this.pageSize : 0;
+        const end = Number.isFinite(this.pageSize) ? start + this.pageSize : rows.length;
+        return rows.slice(start, end).map((row, i) => ({ row, index: start + i }));
+    }
+
+    /** "Region = West · Revenue > 100", or '' with no filters. */
+    describeFilters() {
+        return this.filters.map(f => (f.op.startsWith('is') ? `${f.column} ${f.op}` : `${f.column} ${f.op} ${plain(f.value)}`)).join(' · ');
+    }
+
+    // ── Changes ───────────────────────────────────────────────────────────────
+
+    changed() {
+        this.page = Math.min(this.page, this.pageCount() - 1);
+        this.onChange?.(this);
+    }
+
+    /** A header click: unsorted → ascending → descending → unsorted. */
+    toggleSort(column) {
+        const current = this.sort?.column === column ? this.sort.direction : null;
+        this.sortBy(column, current === null ? 'asc' : current === 'asc' ? 'desc' : null);
+    }
+
+    sortBy(column, direction) {
+        this.sort = direction === null ? null : { column, direction };
+        this.page = 0;
+        this.changed();
+    }
+
+    addFilter(column, op, value = null) {
+        if (!Object.hasOwn(FILTER_OPS, op)) throw new Error(`Unknown filter "${op}"`);
+        this.filters = [...this.filters.filter(f => !(f.column === column && f.op === op && f.value === value)), { column, op, value }];
+        this.page = 0;
+        this.changed();
+    }
+
+    removeFilters(column) {
+        this.filters = this.filters.filter(f => f.column !== column);
+        this.changed();
+    }
+
+    clearFilters() {
+        this.filters = [];
+        this.changed();
+    }
+
+    /** Hides a column; the last one showing cannot be hidden. */
+    hide(column) {
+        if (this.visibleColumns().length <= 1) return;
+        this.hidden.add(column);
+        this.changed();
+    }
+
+    showAll() {
+        this.hidden.clear();
+        this.changed();
+    }
+
+    goToPage(page) {
+        this.page = Math.max(0, Math.min(page, this.pageCount() - 1));
+        this.changed();
+    }
+
+    // ── Text out ──────────────────────────────────────────────────────────────
+
+    /** Rows as tab-separated text, header first, the visible columns only. */
+    asTsv(rows = this.ordered()) {
+        const columns = this.visibleColumns().map(c => c.name);
+        const clean = (v) => plain(v).replace(/[\t\r\n]+/g, ' ');
+        return [columns.map(clean).join('\t'), ...rows.map(r => columns.map(c => clean(r[c])).join('\t'))].join('\n');
+    }
+
+    // ── Menus (PopupMenu items) ──────────────────────────────────────────────
+
+    cellMenu(row, column) {
+        const value = row[column];
+        const kind = this.columns.find(c => c.name === column)?.kind;
+        const shown = value == null ? 'empty' : plain(value);
+        const items = value == null
+            ? [{ label: `Only rows where ${column} is empty`, action: () => this.addFilter(column, 'is null') },
+                { label: `Exclude rows where ${column} is empty`, action: () => this.addFilter(column, 'is not null') }]
+            : [{ label: `Only rows where ${column} = ${shown}`, action: () => this.addFilter(column, '=', value) },
+                { label: `Exclude rows where ${column} = ${shown}`, action: () => this.addFilter(column, '!=', value) },
+                ...(kind === 'numeric' ? [
+                    { label: `Only rows where ${column} > ${shown}`, action: () => this.addFilter(column, '>', value) },
+                    { label: `Only rows where ${column} < ${shown}`, action: () => this.addFilter(column, '<', value) },
+                ] : [])];
+        return [
+            ...items,
+            { separator: true },
+            { label: 'Copy value', action: () => this.copy(plain(value)) },
+            ...this.extra('cell', { row, column, value }),
+        ];
+    }
+
+    rowMenu(row) {
+        return [
+            { label: 'Copy row', action: () => this.copy(this.asTsv([row])) },
+            { label: 'Copy row as JSON', action: () => this.copy(JSON.stringify(row)) },
+            ...this.extra('row', { row }),
+        ];
+    }
+
+    columnMenu(column) {
+        const sorted = this.sort?.column === column ? this.sort.direction : null;
+        const values = [...new Set(this.filtered().map(r => r[column]))].sort(compareValues);
+        const listed = values.slice(0, TableView.MAX_FILTER_VALUES);
+        return [
+            { label: 'Sort ascending', checked: sorted === 'asc', action: () => this.sortBy(column, 'asc') },
+            { label: 'Sort descending', checked: sorted === 'desc', action: () => this.sortBy(column, 'desc') },
+            ...(sorted ? [{ label: 'Clear sort', action: () => this.sortBy(column, null) }] : []),
+            { separator: true },
+            {
+                label: 'Filter to',
+                items: [
+                    ...listed.map(v => (v == null
+                        ? { label: '(empty)', action: () => this.addFilter(column, 'is null') }
+                        : { label: plain(v), action: () => this.addFilter(column, '=', v) })),
+                    ...(values.length > listed.length ? [{ label: `${values.length - listed.length} more — filter from a cell`, disabled: true }] : []),
+                ],
+            },
+            ...(this.filters.some(f => f.column === column) ? [{ label: `Clear filters on ${column}`, action: () => this.removeFilters(column) }] : []),
+            { separator: true },
+            { label: 'Hide column', disabled: this.visibleColumns().length <= 1, action: () => this.hide(column) },
+            { label: 'Copy column', action: () => this.copy([column, ...this.ordered().map(r => plain(r[column]))].join('\n')) },
+            ...this.extra('column', { column }),
+        ];
+    }
+
+    /** The table's menu; `onShowAs(choice)` draws a chosen chart (the host's — RenderEngine.resultView). */
+    tableMenu(onShowAs = null) {
+        const choices = onShowAs ? this.chartChoices() : [];
+        return [
+            ...(onShowAs ? [{
+                label: 'Show as',
+                items: choices.length > 0
+                    ? choices.map(c => ({ label: `${c.label} — ${c.reason}`, action: () => onShowAs(c) }))
+                    : [{ label: 'No chart fits these columns', disabled: true }],
+            }, { separator: true }] : []),
+            { label: 'Clear all filters', disabled: this.filters.length === 0, action: () => this.clearFilters() },
+            { label: 'Show hidden columns', disabled: this.hidden.size === 0, action: () => this.showAll() },
+            { label: 'Copy table', action: () => this.copy(this.asTsv()) },
+            ...this.extra('table', {}),
+        ];
+    }
+
+    /**
+     * The chart types that fit what the table is showing — its filtered, sorted rows and visible
+     * columns — as ChartChooser gives them, without the table. Filtered rows are not the whole
+     * answer, so they are never offered as shares of a whole.
+     */
+    chartChoices() {
+        const columns = this.visibleColumns();
+        const names = columns.map(c => c.name);
+        const rows = this.ordered().map(r => Object.fromEntries(names.map(n => [n, r[n]])));
+        return this.chooser.choose(rows, columns, { complete: this.complete && this.filters.length === 0 })
+            .filter(c => c.key !== 'table');
+    }
+
+    extra(kind, context) {
+        const items = this.menus?.[kind]?.({ view: this, ...context }) ?? [];
+        return items.length > 0 ? [{ separator: true }, ...items] : [];
+    }
+}