perspective-select API change+enhancement

Add removeConfigs support to perspective-select for off-candidates filter removal

The workspace's global filter propagation could not remove filters applied to
columns outside the master viewer's group_by/split_by/filter candidates set.
Once such a filter was applied it was permanently stuck on slave viewers.

Introduces removeConfigs: ViewConfigUpdate[] on the perspective-select event
detail, which explicitly removes filters from slave viewers by column regardless
of the candidates set. Also replaces the untyped event detail object with a
typed PerspectiveSelectDetail class exported from @perspective-dev/viewer.

Breaking change: the config field on perspective-select event details is
replaced by insertConfigs and removeConfigs. viewer-datagrid and viewer-d3fc
are updated accordingly.

Signed-off-by: Davis Silverman <davis@thedav.is>

Author: sinistersnare

.gitignore

@@ -65,3 +65,4 @@ docs/static/browser
 docs/static/viewer
 docs/static/react
 rust/perspective-server/build
+target/

packages/react/src/workspace.tsx

@@ -27,7 +27,8 @@ export interface ToggleGloalFilterEventDetail {
     isGlobalFilter: boolean;
 }
 
-interface PerspectiveWorkspaceProps extends React.HTMLAttributes<HTMLElement> {
+export interface PerspectiveWorkspaceProps
+    extends React.HTMLAttributes<HTMLElement> {
     client: psp.Client | Promise<psp.Client>;
     layout: PerspectiveWorkspaceConfig;
     onLayoutUpdate?: (layout: PerspectiveWorkspaceConfig) => void;

packages/viewer-d3fc/src/ts/tooltip/selectionEvent.ts

@@ -11,6 +11,7 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { getGroupValues, getSplitValues, getDataValues } from "./selectionData";
+import { PerspectiveSelectDetail } from "@perspective-dev/viewer";
 
 const mapToFilter = (d) => [d.name, "==", d.value];
 
@@ -19,15 +20,18 @@ export const raiseEvent = (node, data, settings) => {
     const groupFilters = getGroupValues(data, settings).map(mapToFilter);
     const splitFilters = getSplitValues(data, settings).map(mapToFilter);
     const filter = settings.filter.concat(groupFilters).concat(splitFilters);
+    const detail = new PerspectiveSelectDetail(
+        true,
+        data === null ? null : data?.row,
+        column_names,
+        [],
+        [{ filter }],
+    );
     node.dispatchEvent(
         new CustomEvent("perspective-select", {
             bubbles: true,
             composed: true,
-            detail: {
-                column_names,
-                config: { filter },
-                row: data === null ? null : data?.row,
-            },
+            detail,
         }),
     );
 };

packages/viewer-datagrid/src/ts/event_handlers/row_select_click.ts

@@ -11,11 +11,11 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import getCellConfig from "../get_cell_config.js";
-import type {
-    RegularTable,
-    DatagridModel,
-    PerspectiveViewerElement,
-    HandledMouseEvent,
+import {
+    type RegularTable,
+    type DatagridModel,
+    type PerspectiveViewerElement,
+    type HandledMouseEvent,
     PerspectiveSelectDetail,
 } from "../types.js";
 
@@ -52,28 +52,31 @@ export async function selectionListener(
         const is_deselect =
             !!selected && id.length === selected.length && key_match;
 
-        let detail: PerspectiveSelectDetail = {
-            selected: !is_deselect,
-            row: {},
-            config: { filter: [] },
-        };
-
         const { row, column_names, config } = await getCellConfig(
             this,
             meta.y,
             meta.type === "body" ? meta.x : 0,
         );
 
+        let detail: PerspectiveSelectDetail;
         if (is_deselect) {
             selected_rows_map.delete(regularTable);
-            detail = {
-                ...detail,
+            detail = new PerspectiveSelectDetail(
+                false,
                 row,
-                config: { filter: structuredClone(this._config.filter) },
-            };
+                [],
+                [],
+                [{ filter: structuredClone(this._config.filter) }],
+            );
         } else {
             selected_rows_map.set(regularTable, id);
-            detail = { ...detail, row, column_names, config };
+            detail = new PerspectiveSelectDetail(
+                true,
+                row,
+                column_names,
+                [],
+                [config],
+            );
         }
 
         await regularTable.draw({ preserve_width: true });

packages/viewer-datagrid/src/ts/types.ts

@@ -17,6 +17,7 @@ import type {
     ColumnType,
     SortDir,
     ViewWindow,
+    ViewConfigUpdate,
 } from "@perspective-dev/client";
 import { RegularTableElement } from "regular-table";
 import { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
@@ -244,7 +245,7 @@ export type FormatterCache = Map<string, FormatterCacheEntry>;
 export interface CellConfigResult {
     row: Record<string, unknown>;
     column_names: string[];
-    config: Partial<ViewConfig>;
+    config: ViewConfigUpdate;
 }
 
 // Custom event detail types
@@ -254,12 +255,7 @@ export interface PerspectiveClickDetail {
     config: Partial<ViewConfig>;
 }
 
-export interface PerspectiveSelectDetail {
-    selected: boolean;
-    row: Record<string, unknown>;
-    column_names?: string[];
-    config: Partial<ViewConfig>;
-}
+export { PerspectiveSelectDetail } from "@perspective-dev/viewer";
 
 // Mouse event with handled flag
 export interface HandledMouseEvent extends MouseEvent {

packages/workspace/src/ts/workspace/workspace.ts

@@ -683,20 +683,23 @@ export class PerspectiveWorkspace extends SplitPanel {
 
     async _filterViewer(
         viewer: HTMLPerspectiveViewerElement,
-        filters: [string, string, string][],
+        removeFilters: psp.Filter[],
+        insertFilters: psp.Filter[],
         candidates: Set<string>,
     ) {
         const config = await viewer.save();
         const table = await viewer.getTable();
         const availableColumns = Object.keys(await table.schema());
         const currentFilters = config.filter || [];
-        const columnAvailable = (filter: [string, string, any]) =>
+        const columnAvailable = (filter: psp.Filter) =>
             filter[0] && availableColumns.includes(filter[0]);
 
-        const validFilters = filters.filter(columnAvailable);
+        const clearColumns = new Set<string>(removeFilters.map((f) => f[0]));
+        const validFilters = insertFilters.filter(columnAvailable);
         validFilters.push(
             ...currentFilters.filter(
-                (x: [string, ..._: string[]]) => !candidates.has(x[0]),
+                (x: [string, ..._: string[]]) =>
+                    !candidates.has(x[0]) && !clearColumns.has(x[0]),
             ),
         );
 
@@ -712,14 +715,21 @@ export class PerspectiveWorkspace extends SplitPanel {
         const candidates = new Set([
             ...(config["group_by"] || []),
             ...(config["split_by"] || []),
-            ...(config.filter || []).map((x: [string, string, any]) => x[0]),
+            ...(config.filter || []).map((x: psp.Filter) => x[0]),
         ]);
 
-        const filters = [...event.detail.config.filter];
+        const removeFilters = (
+            (event.detail.removeConfigs ?? []) as psp.ViewConfigUpdate[]
+        ).flatMap((x) => x.filter ?? []);
+        const insertFilters = (
+            (event.detail.insertConfigs ?? []) as psp.ViewConfigUpdate[]
+        ).flatMap((x) => x.filter ?? []);
+
         toArray(this.dockpanel.widgets()).forEach((widget) => {
             this._filterViewer(
                 (widget as PerspectiveViewerWidget).viewer,
-                filters,
+                removeFilters,
+                insertFilters,
                 candidates,
             );
         });