@peter.prib/renderengine 0.14.0 → 0.15.0

package/src/charting/pivot/PivotGridChart.js

@@ -25,6 +25,20 @@ export class PivotGridChart extends TableViewChart {
     static EXPANDED = '▾';
     static COLLAPSED = '▸';
 
+    constructor(renderer, view, options = {}) {
+        super(renderer, view, options);
+        this.pinnedHeaders = options.pinnedHeaders !== false;
+        this.virtualize = options.virtualize !== false;
+        this.virtualBuffer = options.virtualBuffer ?? 5;
+        this._renderedRange = null;
+        this._scrollLeft = 0;
+        this._scrollTop = 0;
+        this._scrollHandler = null;
+        this._scrollContainer = null;
+        this._rowShapesStartIndex = null;
+        this._rowCtx = null;
+    }
+
     /** Lines the layout strip takes, when the view's layout is the host's to change. */
     static layoutLines(view) { return view.onLayout ? 2 : 0; }
 
@@ -56,6 +70,58 @@ export class PivotGridChart extends TableViewChart {
         return width;
     }
 
+    _rule(x, y, width) {
+        return this.renderer.path(`M${x},${y} L${x + width},${y}`, 'none', TableChart.RULE);
+    }
+
+    _isVirtualizable() {
+        if (this.options.virtualize === false) return false;
+        if (!this.renderer?.supportsSceneGraph) return false;
+        const totalRows = this.view.visibleRows().length;
+        if (this.options.virtualize === true) return totalRows > 0;
+        const container = this.renderer.container;
+        if (container && container.clientHeight > 0) {
+            const fullHeight = PivotGridChart.heightFor(this.view, this.options);
+            return container.clientHeight < fullHeight && totalRows > 20;
+        }
+        return false;
+    }
+
+    _getVisibleRowRange(scrollTop, viewportH) {
+        const totalRows = this.view.visibleRows().length;
+        const relativeY = Math.max(0, scrollTop - (this._rowTopStart || 0));
+        const rawStart = Math.floor(relativeY / TableChart.ROW_H);
+        const start = Math.max(0, rawStart - this.virtualBuffer);
+        const rawEnd = Math.ceil((relativeY + viewportH) / TableChart.ROW_H);
+        const end = Math.min(totalRows, rawEnd + this.virtualBuffer);
+        return { start, end };
+    }
+
+    get renderedRowRange() {
+        return this._renderedRange ? { ...this._renderedRange } : null;
+    }
+
+    scrollTo(scrollTop, scrollLeft = 0) {
+        if (this._scrollContainer) {
+            this._scrollContainer.scrollTop = scrollTop;
+            this._scrollContainer.scrollLeft = scrollLeft;
+        }
+        this._handleScroll(scrollLeft, scrollTop);
+    }
+
+    scrollToRow(index) {
+        const targetY = (this._rowTopStart || 0) + index * TableChart.ROW_H;
+        this.scrollTo(targetY, this._scrollLeft || 0);
+    }
+
+    destroy() {
+        if (this._scrollHandler && this._scrollContainer) {
+            this._scrollContainer.removeEventListener('scroll', this._scrollHandler);
+            this._scrollHandler = null;
+            this._scrollContainer = null;
+        }
+    }
+
     _render() {
         const { view } = this;
         const { title, nullText = '—' } = this.options;
@@ -71,17 +137,50 @@ export class PivotGridChart extends TableViewChart {
 
         new ChartLabels({ title }).draw(this.renderer, { x: box.x, y: box.y, width: box.width, height: box.height });
 
+        const inGroup = (group, shapeEl) => {
+            if (group && typeof group.appendChild === 'function' && shapeEl && shapeEl.nodeType) {
+                group.appendChild(shapeEl);
+            }
+            return shapeEl;
+        };
+
+        const createGroup = (className) => {
+            if (interactive && typeof this.renderer.group === 'function') {
+                return this.renderer.group({ class: className });
+            }
+            return null;
+        };
+
+        const bodyGroup = createGroup('pivot-body');
+        const bodyRowsGroup = createGroup('pivot-body-rows');
+        const colHeaderGroup = createGroup('pivot-col-headers');
+        const rowHeaderGroup = createGroup('pivot-row-headers');
+        const rowHeadersContentGroup = createGroup('pivot-row-headers-content');
+        const cornerGroup = createGroup('pivot-corner');
+        const freezeLinesGroup = createGroup('pivot-freeze-lines');
+
+        this._colHeaderGroup = colHeaderGroup;
+        this._rowHeaderGroup = rowHeaderGroup;
+        this._cornerGroup = cornerGroup;
+        this._bodyGroup = bodyGroup;
+        this._bodyRowsGroup = bodyRowsGroup;
+        this._rowHeadersContentGroup = rowHeadersContentGroup;
+        this._freezeLinesGroup = freezeLinesGroup;
+
         // The corner: the grid's menu, and what each axis holds.
         let top = box.y;
-        if (view.onLayout) top = this._layoutStrip(box, top, interactive);
-        const corner = this.renderer.rect(box.x, top, sideW, lines.length * ROW_H, TableChart.HEADER_FILL, null);
-        const glyph = this._text(TableViewChart.TABLE_GLYPH, box.x + PAD_X + 2, top, { textAnchor: 'middle', fontWeight: 'bold', fill: '#555' });
+        if (view.onLayout) top = this._layoutStrip(box, top, interactive, colHeaderGroup);
+        const headerTop = top;
+        const headerHeight = lines.length * ROW_H;
+
+        const corner = inGroup(cornerGroup, this.renderer.rect(box.x, top, sideW, headerHeight, TableChart.HEADER_FILL, null));
+        const glyph = inGroup(cornerGroup, this._text(TableViewChart.TABLE_GLYPH, box.x + PAD_X + 2, top, { textAnchor: 'middle', fontWeight: 'bold', fill: '#555' }));
         this._on(interactive, [corner, glyph], (e) => this.showMenu(e.clientX, e.clientY, view.gridMenu()), 'Grid menu');
         if (view.columnAxis.length > 0 && lines.length > 1) {
-            this._cell(view.columnAxis.join(' › '), end, box.x + 16, top, sideW - 16, { fill: '#666', fontSize: '11px' });
+            inGroup(cornerGroup, this._cell(view.columnAxis.join(' › '), end, box.x + 16, top, sideW - 16, { fill: '#666', fontSize: '11px' }));
         }
         if (view.rowAxis.length > 0) {
-            this._cell(view.rowAxis.join(' › '), {}, box.x + 12, top + (lines.length - 1) * ROW_H, sideW - 12, { fontWeight: 'bold', fill: '#333' });
+            inGroup(cornerGroup, this._cell(view.rowAxis.join(' › '), {}, box.x + 12, top + (lines.length - 1) * ROW_H, sideW - 12, { fontWeight: 'bold', fill: '#333' }));
         }
 
         // The column headers: a line per level, a member spanning the columns beneath it.
@@ -89,46 +188,223 @@ export class PivotGridChart extends TableViewChart {
             let left = x0;
             for (const cell of line) {
                 const w = cell.span * colW;
-                this.renderer.rect(left, top, w, ROW_H, TableChart.HEADER_FILL, null);
-                this._member('columns', cell.node, cell.text, left, top, w, interactive, { fontWeight: 'bold', fill: '#333' });
+                inGroup(colHeaderGroup, this.renderer.rect(left, top, w, ROW_H, TableChart.HEADER_FILL, null));
+                this._member('columns', cell.node, cell.text, left, top, w, interactive, { fontWeight: 'bold', fill: '#333' }, colHeaderGroup);
                 left += w;
             }
             top += ROW_H;
-            this._rule(box.x, top, box.width);
+            inGroup(colHeaderGroup, this._rule(box.x, top, box.width));
+        }
+
+        this._rowTopStart = top;
+        this._sideW = sideW;
+        this._colW = colW;
+        this._x0 = x0;
+        this._box = box;
+
+        if (interactive && freezeLinesGroup) {
+            this._colDivider = inGroup(freezeLinesGroup, this.renderer.path(`M${box.x},${top} L${box.x + box.width},${top}`, 'none', { color: '#c5cde0', width: 1.5 }));
+            const fullHeight = PivotGridChart.heightFor(view, this.options);
+            this._rowDivider = inGroup(freezeLinesGroup, this.renderer.path(`M${x0},${headerTop} L${x0},${box.y + fullHeight}`, 'none', { color: '#c5cde0', width: 1.5 }));
         }
 
         // The rows: a member (indented, with its ▸ / ▾) and its cells; members with members below are totals.
         const cuts = view.lights && view.lights !== 'rules' ? view.thirds() : null;   // once per drawing, not per cell
-        view.visibleRows().forEach(({ node, depth }, r) => {
+        const colMaxValues = this.options.dataBars ? columns.map(c => {
+            let max = 0;
+            view.visibleRows().forEach(({ node }) => {
+                const isTotal = node.children.size > 0 || node.path.length === 0;
+                if (!isTotal) {
+                    const r = view.cell(node, c.node);
+                    const val = r?.[c.measure];
+                    if (typeof val === 'number' && Number.isFinite(val) && val > max) max = val;
+                }
+            });
+            return max;
+        }) : null;
+
+        const allRows = view.visibleRows();
+        const totalRows = allRows.length;
+        const isVirtual = this._isVirtualizable();
+        this.isVirtual = isVirtual;
+
+        let startRow = 0;
+        let endRow = totalRows;
+
+        if (isVirtual) {
+            const container = this.renderer.container;
+            const viewportH = this.options.viewportHeight || container?.clientHeight || 400;
+            const range = this._getVisibleRowRange(this._scrollTop, viewportH);
+            startRow = range.start;
+            endRow = range.end;
+            this._renderedRange = range;
+        } else {
+            this._renderedRange = { start: 0, end: totalRows };
+        }
+
+        this._rowShapesStartIndex = Array.isArray(this.renderer?.shapes) ? this.renderer.shapes.length : null;
+        this._rowCtx = {
+            cuts, colMaxValues, columns, box, sideW, colW, x0, end, interactive, nullText,
+            bodyGroup: bodyRowsGroup || bodyGroup,
+            rowHeaderGroup: rowHeadersContentGroup || rowHeaderGroup,
+        };
+
+        this._renderRowsSlice(startRow, endRow, this._rowCtx);
+
+        let notesTop = this._rowTopStart + totalRows * ROW_H;
+        if (view.unplaced > 0) {
+            inGroup(bodyGroup, this._text(`${view.unplaced} row(s) total an outer level but not an inner one, and are not shown`, box.x + PAD_X, notesTop,
+                { textAnchor: 'start', fill: '#888', fontSize: '11px' }));
+            notesTop += ROW_H;
+        }
+        const legend = view.lightsLegend();
+        if (legend) inGroup(bodyGroup, this._text(legend, box.x + PAD_X, notesTop, { textAnchor: 'start', fill: '#666', fontSize: '11px' }));
+
+        this._wireScrollListener();
+    }
+
+    _renderRowsSlice(startRow, endRow, ctx) {
+        const { view } = this;
+        const { ROW_H } = TableChart;
+        const { cuts, colMaxValues, columns, box, sideW, colW, x0, end, interactive, nullText, bodyGroup, rowHeaderGroup } = ctx;
+        const inGroup = (group, shapeEl) => {
+            if (group && typeof group.appendChild === 'function' && shapeEl && shapeEl.nodeType) {
+                group.appendChild(shapeEl);
+            }
+            return shapeEl;
+        };
+
+        const allRows = view.visibleRows();
+        for (let r = startRow; r < endRow; r++) {
+            const item = allRows[r];
+            if (!item) continue;
+            const { node, depth } = item;
+            let top = this._rowTopStart + r * ROW_H;
             const total = node.children.size > 0 || node.path.length === 0;
-            if (total) this.renderer.rect(box.x, top, box.width, ROW_H, PivotGridChart.TOTAL_FILL, null);
-            else if (r % 2 === 1) this.renderer.rect(box.x, top, box.width, ROW_H, TableChart.STRIPE_FILL, null);
+
+            if (total) inGroup(bodyGroup, this.renderer.rect(box.x, top, box.width, ROW_H, PivotGridChart.TOTAL_FILL, null));
+            else if (r % 2 === 1) inGroup(bodyGroup, this.renderer.rect(box.x, top, box.width, ROW_H, TableChart.STRIPE_FILL, null));
+
+            if (rowHeaderGroup && interactive) {
+                const headerFill = total ? PivotGridChart.TOTAL_FILL : (r % 2 === 1 ? TableChart.STRIPE_FILL : '#ffffff');
+                inGroup(rowHeaderGroup, this.renderer.rect(box.x, top, sideW, ROW_H, headerFill, null));
+            }
+
             const indent = node.path.length === 0 ? 0 : depth * PivotGridChart.INDENT;
             const weight = total ? { fontWeight: 'bold' } : {};
-            this._member('rows', node.path.length === 0 ? null : node, PivotView.label(node), box.x + indent, top, sideW - indent, interactive, { fill: '#222', ...weight });
+            this._member('rows', node.path.length === 0 ? null : node, PivotView.label(node), box.x + indent, top, sideW - indent, interactive, { fill: '#222', ...weight }, rowHeaderGroup);
             columns.forEach((c, i) => {
                 const lit = view.cellFill(node, c, cuts);
-                if (lit) this.renderer.rect(x0 + i * colW + 1, top + 1, colW - 2, ROW_H - 2, lit, null);
+                if (lit) inGroup(bodyGroup, this.renderer.rect(x0 + i * colW + 1, top + 1, colW - 2, ROW_H - 2, lit, null));
                 const row = view.cell(node, c.node);
+                if (colMaxValues && !total) {
+                    const val = row?.[c.measure];
+                    const colMax = colMaxValues[i];
+                    if (typeof val === 'number' && Number.isFinite(val) && val > 0 && colMax > 0) {
+                        const barW = Math.max(2, (val / colMax) * (colW - 8));
+                        const barColor = typeof this.options.dataBars === 'string' ? this.options.dataBars : (this.options.dataBarColor || 'rgba(66, 133, 244, 0.22)');
+                        inGroup(bodyGroup, this.renderer.rect(x0 + i * colW + 4, top + 4, barW, ROW_H - 8, barColor, null));
+                    }
+                }
                 const text = view.cellText ? view.cellText(node, c, nullText) : (row === null ? '' : view.valueText(c.measure, row[c.measure], nullText));
-                const shown = this._cell(text, end, x0 + i * colW, top, colW, { fill: row?.[c.measure] == null ? '#999' : '#222', ...weight });
+                const shown = inGroup(bodyGroup, this._cell(text, end, x0 + i * colW, top, colW, { fill: row?.[c.measure] == null ? '#999' : '#222', ...weight }));
                 // A cell with a value opens its menu (drill-through) where the host gives one.
                 if (row !== null && view.cellHasMenu()) {
-                    const hit = this.renderer.rect(x0 + i * colW, top, colW, ROW_H, 'transparent', null);
+                    const hit = inGroup(bodyGroup, this.renderer.rect(x0 + i * colW, top, colW, ROW_H, 'transparent', null));
                     this._on(interactive, [hit, shown], (e) => this.showMenu(e.clientX, e.clientY, view.cellMenu(node, c)), 'Cell menu');
                 }
             });
             top += ROW_H;
-            this._rule(box.x, top, box.width);
-        });
+            inGroup(bodyGroup, this._rule(box.x, top, box.width));
+        }
+    }
 
-        if (view.unplaced > 0) {
-            this._text(`${view.unplaced} row(s) total an outer level but not an inner one, and are not shown`, box.x + PAD_X, top,
-                { textAnchor: 'start', fill: '#888', fontSize: '11px' });
-            top += ROW_H;
+    _updateVirtualSlice(start, end) {
+        if (!this._rowCtx) return;
+        const { bodyGroup, rowHeaderGroup } = this._rowCtx;
+
+        if (bodyGroup && typeof bodyGroup.replaceChildren === 'function') {
+            bodyGroup.replaceChildren();
+        } else if (bodyGroup && bodyGroup.firstChild) {
+            while (bodyGroup.firstChild) bodyGroup.removeChild(bodyGroup.firstChild);
+        }
+        if (rowHeaderGroup && typeof rowHeaderGroup.replaceChildren === 'function') {
+            rowHeaderGroup.replaceChildren();
+        } else if (rowHeaderGroup && rowHeaderGroup.firstChild) {
+            while (rowHeaderGroup.firstChild) rowHeaderGroup.removeChild(rowHeaderGroup.firstChild);
+        }
+
+        if (Array.isArray(this.renderer?.shapes) && this._rowShapesStartIndex != null) {
+            this.renderer.shapes.length = this._rowShapesStartIndex;
+        }
+
+        this._renderRowsSlice(start, end, this._rowCtx);
+    }
+
+    _handleScroll(scrollLeft, scrollTop) {
+        this._scrollLeft = scrollLeft;
+        this._scrollTop = scrollTop;
+
+        if (this.options.pinnedHeaders !== false && this.renderer?.supportsSceneGraph) {
+            if (this._colHeaderGroup?.setAttribute) {
+                this._colHeaderGroup.setAttribute('transform', `translate(0, ${scrollTop})`);
+            }
+            if (this._rowHeaderGroup?.setAttribute) {
+                this._rowHeaderGroup.setAttribute('transform', `translate(${scrollLeft}, 0)`);
+            }
+            if (this._cornerGroup?.setAttribute) {
+                this._cornerGroup.setAttribute('transform', `translate(${scrollLeft}, ${scrollTop})`);
+            }
+            if (this._colDivider?.setAttribute) {
+                this._colDivider.setAttribute('transform', `translate(0, ${scrollTop})`);
+            }
+            if (this._rowDivider?.setAttribute) {
+                this._rowDivider.setAttribute('transform', `translate(${scrollLeft}, 0)`);
+            }
+
+            if (this._rowHeaderGroup?.style) {
+                this._rowHeaderGroup.style.filter = scrollLeft > 0 ? 'drop-shadow(2px 0 3px rgba(0,0,0,0.12))' : '';
+            }
+            if (this._colHeaderGroup?.style) {
+                this._colHeaderGroup.style.filter = scrollTop > 0 ? 'drop-shadow(0 2px 3px rgba(0,0,0,0.12))' : '';
+            }
+        }
+
+        if (this._isVirtualizable()) {
+            const container = this.renderer.container;
+            const viewportH = this.options.viewportHeight || container?.clientHeight || 400;
+            const newRange = this._getVisibleRowRange(scrollTop, viewportH);
+            if (!this._renderedRange || newRange.start !== this._renderedRange.start || newRange.end !== this._renderedRange.end) {
+                this._renderedRange = newRange;
+                this._updateVirtualSlice(newRange.start, newRange.end);
+            }
+        }
+
+        if (typeof this.options.onScroll === 'function') {
+            this.options.onScroll({ scrollLeft, scrollTop, range: this._renderedRange });
+        }
+    }
+
+    _wireScrollListener() {
+        const container = this.renderer.container;
+        if (!container || typeof container.addEventListener !== 'function') return;
+
+        if (this._scrollHandler && this._scrollContainer) {
+            this._scrollContainer.removeEventListener('scroll', this._scrollHandler);
+        }
+
+        this._scrollContainer = container;
+        this._scrollHandler = () => {
+            const scrollLeft = container.scrollLeft || 0;
+            const scrollTop = container.scrollTop || 0;
+            this._handleScroll(scrollLeft, scrollTop);
+        };
+
+        container.addEventListener('scroll', this._scrollHandler);
+
+        if (container.scrollLeft || container.scrollTop) {
+            this._handleScroll(container.scrollLeft || 0, container.scrollTop || 0);
         }
-        const legend = view.lightsLegend();
-        if (legend) this._text(legend, box.x + PAD_X, top, { textAnchor: 'start', fill: '#666', fontSize: '11px' });
     }
 
     /**
@@ -136,8 +412,14 @@ export class PivotGridChart extends TableViewChart {
      * member, or All) and "Add" (the dimensions not placed). Each dimension is a chip; a click opens
      * its layout menu. Returns where the grid starts.
      */
-    _layoutStrip(box, top, interactive) {
+    _layoutStrip(box, top, interactive, colHeaderGroup = null) {
         const { view } = this;
+        const inGroup = (shapeEl) => {
+            if (colHeaderGroup && typeof colHeaderGroup.appendChild === 'function' && shapeEl && shapeEl.nodeType) {
+                colHeaderGroup.appendChild(shapeEl);
+            }
+            return shapeEl;
+        };
         const zones = [
             [['Rows', view.rowAxis.map(d => [d, d + view.memberFilterText(d)])], ['Columns', view.columnAxis.map(d => [d, d + view.memberFilterText(d)])]],
             [['Filters', view.pageAxis.map(p => [p.dimension, `${p.dimension}: ${p.value === null ? 'All' : TableChart.cellText(p.value)}`])],
@@ -147,17 +429,17 @@ export class PivotGridChart extends TableViewChart {
         for (const line of zones) {
             let x = box.x + TableChart.PAD_X;
             for (const [name, chips] of line) {
-                this._text(name, x, top, { textAnchor: 'start', fill: '#666', fontSize: '11px', fontWeight: 'bold' });
+                inGroup(this._text(name, x, top, { textAnchor: 'start', fill: '#666', fontSize: '11px', fontWeight: 'bold' }));
                 x += measure(name) + 8;
                 if (chips.length === 0) {
-                    this._text('—', x, top, { textAnchor: 'start', fill: '#aaa' });
+                    inGroup(this._text('—', x, top, { textAnchor: 'start', fill: '#aaa' }));
                     x += 16;
                 }
                 for (const [dimension, text] of chips) {
                     const label = `${text} ▾`;
                     const w = measure(label) + 14;
-                    const chip = this.renderer.rect(x, top + 3, w, TableChart.ROW_H - 6, PivotGridChart.TOTAL_FILL, { color: '#c5cde0', width: 1 });
-                    const t = this._text(label, x + 7, top, { textAnchor: 'start', fill: '#2b3f66' });
+                    const chip = inGroup(this.renderer.rect(x, top + 3, w, TableChart.ROW_H - 6, PivotGridChart.TOTAL_FILL, { color: '#c5cde0', width: 1 }));
+                    const t = inGroup(this._text(label, x + 7, top, { textAnchor: 'start', fill: '#2b3f66' }));
                     this._on(interactive, [chip, t], (e) => this.showMenu(e.clientX, e.clientY, view.layoutMenu(dimension)), `${dimension}: move, filter or remove`);
                     x += w + 6;
                 }
@@ -172,20 +454,26 @@ export class PivotGridChart extends TableViewChart {
      * A member's header: ▸ / ▾ when it can collapse onto its total (a click toggles it), then its label
      * (a click opens its menu). Without a member (a total's or a blank header) just the text.
      */
-    _member(axis, node, text, left, top, width, interactive, attrs) {
+    _member(axis, node, text, left, top, width, interactive, attrs, group = null) {
         const { PAD_X } = TableChart;
+        const inGroup = (shapeEl) => {
+            if (group && typeof group.appendChild === 'function' && shapeEl && shapeEl.nodeType) {
+                group.appendChild(shapeEl);
+            }
+            return shapeEl;
+        };
         if (node === null) {
-            this._cell(text, {}, left, top, width, attrs);
-            return;
+            return inGroup(this._cell(text, {}, left, top, width, attrs));
         }
         // Room for the ▸ / ▾ on every member, so a level down is indented whether or not it has one.
         const labelLeft = left + 14;
         if (this.view.collapsible(node)) {
             const sign = this.view.isCollapsed(axis, node) ? PivotGridChart.COLLAPSED : PivotGridChart.EXPANDED;
-            const toggle = this._text(sign, left + PAD_X + 3, top, { textAnchor: 'middle', fill: '#555' });
+            const toggle = inGroup(this._text(sign, left + PAD_X + 3, top, { textAnchor: 'middle', fill: '#555' }));
             this._on(interactive, [toggle], () => this.view.toggle(axis, node), this.view.isCollapsed(axis, node) ? 'Expand' : 'Collapse');
         }
-        const label = this._cell(text, {}, labelLeft, top, width - (labelLeft - left), attrs);
+        const label = inGroup(this._cell(text, {}, labelLeft, top, width - (labelLeft - left), attrs));
         this._on(interactive, [label], (e) => this.showMenu(e.clientX, e.clientY, this.view.memberMenu(axis, node)), `${text} menu`);
+        return label;
     }
 }

package/src/charting/pivot/PivotView.js

@@ -746,6 +746,88 @@ export class PivotView {
         return layout;
     }
 
+    /**
+     * The layout keeping only the specified `values` for `dimension` (multi-selection slice & dice).
+     * @param {string} dimension
+     * @param {Array<any>|any} values
+     * @returns {object} layout
+     */
+    withMemberKeep(dimension, values) {
+        const keep = Array.isArray(values) ? values : [values];
+        const layout = this.layout();
+        layout.members = [...layout.members.filter(m => m.dimension !== dimension), { dimension, keep }];
+        return layout;
+    }
+
+    /**
+     * The layout excluding the specified `values` for `dimension`.
+     * @param {string} dimension
+     * @param {Array<any>|any} values
+     * @returns {object} layout
+     */
+    withMemberRemove(dimension, values) {
+        const removeList = Array.isArray(values) ? values : [values];
+        const layout = this.layout();
+        const current = layout.members.find(m => m.dimension === dimension);
+        const others = layout.members.filter(m => m.dimension !== dimension);
+        const combined = Array.from(new Set([...(current?.remove ?? []), ...removeList]));
+        layout.members = [...others, { dimension, remove: combined }];
+        return layout;
+    }
+
+    /**
+     * Returns unique member values for a given dimension across facts or rows.
+     * @param {string} dimension
+     * @returns {Array<any>}
+     */
+    uniqueMembersOf(dimension) {
+        const pool = this.facts ?? this.rows;
+        const set = new Set();
+        pool.forEach(r => {
+            const val = r[dimension];
+            if (val != null) set.add(val);
+        });
+        return Array.from(set);
+    }
+
+    /**
+     * Opens a multi-member slice & dice filter dialog for `dimension`.
+     * @param {string} dimension
+     */
+    showMemberFilterDialog(dimension) {
+        if (!this.onLayout || !dimension) return;
+        const all = this.uniqueMembersOf(dimension);
+        if (!all.length) return;
+        const currentFilter = this.memberFilterOf(dimension);
+        const selected = currentFilter
+            ? (currentFilter.keep ?? all.filter(m => !currentFilter.remove?.includes(m)))
+            : all;
+
+        if (typeof document !== 'undefined') {
+            import('../FormDialog.js').then(({ FormDialog }) => {
+                new FormDialog({
+                    title: `Filter ${dimension}`,
+                    fields: [
+                        {
+                            key: 'members',
+                            label: 'Members to include',
+                            type: 'checklist',
+                            choices: all.map(m => [m, TableChart.cellText(m)]),
+                            value: selected,
+                        },
+                    ],
+                    onApply: ({ members }) => {
+                        if (!members || members.length === all.length) {
+                            this.onLayout(this.allMembers(dimension));
+                        } else {
+                            this.onLayout(this.withMemberKeep(dimension, members));
+                        }
+                    },
+                }).open();
+            }).catch(() => {});
+        }
+    }
+
     /** A member's keep-or-remove items, the host's through onLayout; none for a NULL member (no filter holds one). */
     _memberFilterItems(dimension, node) {
         if (!this.onLayout || !dimension) return [];