@perspective-dev/workspace 4.3.0 → 4.4.1

package/src/themes/pro-dark.css

@@ -0,0 +1,124 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */
+
+perspective-workspace,
+perspective-workspace[theme="Pro Dark"],
+perspective-indicator[theme="Pro Dark"] {
+    --psp-theme-name: "Pro Dark";
+}
+
+perspective-workspace perspective-viewer {
+    --psp-status-bar--height: 39px;
+    --psp-plugin-selector--height: 47px;
+}
+
+perspective-workspace perspective-viewer.widget-maximize {
+    --modal-panel--margin: -4px 0 -4px 0;
+    --psp-status-bar--border-radius: 6px 0 0 0;
+    --psp-main-column--margin: 3px 0 3px 3px;
+    --psp-main-column--border: 1px solid var(--psp-inactive--color);
+    --psp-main-column--border-width: 1px 0px 1px 1px;
+    --psp-main-column--border-radius: 6px 0 0 6px;
+    --settings-button--margin: 10px 0 0 0;
+}
+
+perspective-workspace {
+    /* perspective-workspace-pro-base */
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
+    --open-settings-button--content: "expand_more";
+    --close-settings-button--content: "expand_less";
+    --close-button--content: "\2715";
+    --master-divider--background-color: #243136;
+    --menu-maximize--content: "fullscreen";
+    --menu-minimize--content: "fullscreen_exit";
+    --menu-duplicate--content: "call_split";
+    --menu-master--content: "cast";
+    --menu-detail--content: "notes";
+    --menu-export--content: "file_download";
+    --menu-copy--content: "file_copy";
+    --menu-reset--content: "autorenew";
+    --menu-link--content: "link";
+    --menu-unlink--content: "link_off";
+    --menu-newmenu--content: "add";
+    --menu-close--content: "close";
+    --menu-new--content: "description";
+    --menu-newview--content: "file_copy";
+
+    --psp-workspace--tabbar--border: 1px solid var(--psp-inactive--color);
+    --psp-workspace--tabbar--border-width: 0px 1px 1px 1px;
+    --psp-workspace--tabbar--border-radius: 6px;
+    --psp-workspace--tabbar--border-color: var(--psp-inactive--color);
+    --psp-workspace--tabbar-tab--border-width: 1px 1px 0px 1px;
+
+    /* Workspace */
+    --psp-icon--column-drag-handle--mask-image: url("../svg/drag-handle.svg");
+    --psp-icon--bookmarks--mask-image: url("../svg/bookmark-icon.svg");
+
+    /* perspective-viewer-pro-dark--colors */
+    background-color: #242526;
+    --psp-workspace--split-panel-handle--background-color: #242526;
+    color: white;
+    --psp--color: white;
+    --psp-active--color: #2770a9;
+    --psp-error--color: #ff9485;
+    --psp-inactive--color: #61656e;
+    --psp-inactive--border-color: #4c505b;
+    --psp--background-color: #242526;
+    --psp-active--background: rgba(39, 113, 170, 0.5);
+    --psp-expression--operator--color: #c5c9d0;
+    --psp-expression--function--color: #22a0ce;
+    --psp-expression--error--color: rgb(255, 136, 136);
+    --psp-calendar--filter: invert(1);
+    --psp-warning--color: #242526;
+    --psp-warning--background: var(--psp--color);
+
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+
+    /* Syntax */
+    --psp-code-editor--symbol--color: white;
+    --psp-code-editor--literal--color: #7dc3f0;
+    --psp-code-editor--operator--color: rgb(23, 166, 123);
+    --psp-code-editor--comment--color: rgb(204, 120, 48);
+    --psp-code-editor--column--color: #e18ee1;
+
+    background-color: #000202;
+    color: white;
+    --workspace-tabbar--background-color: #242526;
+    --workspace-secondary--color: #c5c9d0;
+    --psp-workspace--tabbar--border: 1px solid var(--psp-inactive--color);
+    --psp-workspace--tabbar--border-width: 1px 1px 1px 1px;
+    --psp-workspace--tabbar--border-radius: 6px;
+    --psp-workspace--tabbar--border-color: var(--psp-inactive--color);
+    --psp-workspace--tabbar-tab--border-width: 1px 1px 0 1px;
+}
+
+perspective-viewer[theme="Pro Dark"].workspace-master-widget {
+    --psp--background-color: #242526;
+}
+
+perspective-workspace-menu {
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
+    font-weight: 300;
+    background: #2a2c2f !important;
+    color: white !important;
+    border: 1px solid #3b3f46 !important;
+}

package/src/themes/{pro.less → pro.css}

@@ -1,16 +1,14 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@import url("ref://pro.less");
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */
 
 .lm-cursor-backdrop {
     display: none;
@@ -19,42 +17,11 @@
 perspective-workspace,
 perspective-workspace[theme="Pro Light"],
 perspective-indicator[theme="Pro Light"] {
-    --theme-name: "Pro Light";
+    --psp-theme-name: "Pro Light";
 }
 
 perspective-workspace {
-    @include perspective-workspace-pro-base;
-    @include perspective-viewer-pro--colors;
-    background-color: #dadada;
-}
-
-perspective-workspace perspective-viewer.widget-maximize {
-    --modal-panel--margin: -4px 0 -4px 0;
-    --status-bar--border-radius: 6px 0 0 0;
-    --main-column--margin: 3px 0 3px 3px;
-    --main-column--border: 1px solid var(--inactive--color);
-    --main-column--border-width: 1px 0px 1px 1px;
-    --main-column--border-radius: 6px 0 0 6px;
-    --settings-button--margin: 10px 0 0 0;
-}
-
-perspective-workspace perspective-viewer {
-    --status-bar--height: 39px;
-    --plugin-selector--height: 47px;
-}
-
-perspective-viewer[theme="Pro Light"].workspace-master-widget {
-    background-color: #f2f4f6;
-    --plugin--background: #f2f4f6;
-    regular-table {
-        td,
-        th {
-            border-color: #e0e4e9;
-        }
-    }
-}
-
-@mixin perspective-workspace-pro-base {
+    /* perspective-workspace-pro-base */
     font-family:
         "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
         "Liberation Mono", monospace;
@@ -76,21 +43,73 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget {
     --menu-close--content: "close";
     --menu-new--content: "description";
     --menu-newview--content: "file_copy";
-    --workspace-split-panel-handle--background-color: #f2f4f6;
+    --psp-workspace--split-panel-handle--background-color: #f2f4f6;
 
-    --workspace-tabbar--border: 1px solid var(--inactive--color);
-    --workspace-tabbar--border-width: 1px 1px 1px 1px;
-    --workspace-tabbar--border-radius: 6px;
-    --workspace-tabbar--border-color: var(--inactive--color);
-    --workspace-tabbar-tab--border-width: 1px 1px 0px 1px;
+    --psp-workspace--tabbar--border: 1px solid var(--psp-inactive--color);
+    --psp-workspace--tabbar--border-width: 1px 1px 1px 1px;
+    --psp-workspace--tabbar--border-radius: 6px;
+    --psp-workspace--tabbar--border-color: var(--psp-inactive--color);
+    --psp-workspace--tabbar-tab--border-width: 1px 1px 0px 1px;
 
-    // Workspace
-    --column-drag-handle--mask-image: url("../svg/drag-handle.svg");
-    --bookmarks--mask-image: url("../svg/bookmark-icon.svg");
+    /* Workspace */
+    --psp-icon--column-drag-handle--mask-image: url("../svg/drag-handle.svg");
+    --psp-icon--bookmarks--mask-image: url("../svg/bookmark-icon.svg");
+
+    /* perspective-viewer-pro--colors */
+    color: #161616;
+    background-color: #dadada;
+    --psp--color: #161616;
+    --psp-inactive--color: #ababab;
+    --psp-inactive--border-color: #dadada;
+
+    --psp-active--color: #2670a9;
+    --psp-error--color: #ff471e;
+    --psp--background-color: #ffffff;
+    --psp-icon-overflow-hint--color: rgba(0, 0, 0, 0.2);
+    --psp-select--background-color: none;
+    --psp-warning--background: #042121;
+    --psp-warning--color: #fdfffd;
+
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+
+    /* TODO deprecate me */
+    --psp-icon-overflow-hint--color: #fdfffd;
+}
+
+perspective-workspace perspective-viewer.widget-maximize {
+    /* --modal-panel--margin: -4px 0 -4px 0; */
+    --psp-status-bar--border-radius: 6px 0 0 0;
+    --psp-main-column--margin: 3px 0 3px 3px;
+    --psp-main-column--border: 1px solid var(--psp-inactive--color);
+    --psp-main-column--border-width: 1px 0px 1px 1px;
+    --psp-main-column--border-radius: 6px 0 0 6px;
+    /* --settings-button--margin: 10px 0 0 0; */
+}
+
+perspective-workspace perspective-viewer {
+    --psp-status-bar--height: 39px;
+    --psp-plugin-selector--height: 47px;
+}
+
+perspective-viewer[theme="Pro Light"].workspace-master-widget {
+    background-color: #f2f4f6;
+    --psp--background-color: #f2f4f6;
+    regular-table {
+        td,
+        th {
+            border-color: #e0e4e9;
+        }
+    }
 }
 
 perspective-viewer {
-    --bookmarks--mask-image: url("../svg/bookmark-icon.svg");
+    --psp-icon--bookmarks--mask-image: url("../svg/bookmark-icon.svg");
 }
 
 perspective-workspace-menu {

package/src/ts/perspective-workspace.ts

@@ -22,7 +22,7 @@ export { PerspectiveViewerWidget } from "./workspace/widget";
 export * from "./extensions";
 import { PerspectiveWorkspace, PerspectiveWorkspaceConfig } from "./workspace";
 import { bindTemplate, CustomElementProto } from "./utils/custom_elements";
-import style from "../../build/css/workspace.css";
+import style from "../../dist/css/workspace.css";
 import template from "../html/workspace.html";
 
 export { PerspectiveWorkspaceConfig };

package/src/ts/workspace/commands.ts

@@ -17,6 +17,7 @@ import { Signal } from "@lumino/signaling";
 import type {
     HTMLPerspectiveViewerCopyMenuElement,
     HTMLPerspectiveViewerExportMenuElement,
+    ViewerConfigUpdate,
 } from "@perspective-dev/viewer";
 
 import type { PerspectiveWorkspace } from "./workspace";
@@ -141,7 +142,7 @@ export const createCommands = (
                 args.target_widget_name as string,
             )!;
 
-            const config = await target_widget.save();
+            const config = (await target_widget.save()) as ViewerConfigUpdate;
             const new_widget = await workspace._createWidgetAndNode({
                 config,
                 slot: undefined,

package/src/ts/workspace/dockpanel.ts

@@ -149,7 +149,7 @@ export class PerspectiveDockPanel extends DockPanel {
             parseInt(
                 window
                     .getComputedStyle(this._workspace.element)
-                    .getPropertyValue("--workspace-spacing"),
+                    .getPropertyValue("--psp-workspace--spacing"),
             ) || 0;
         1;
     }

package/src/ts/workspace/widget.ts

@@ -67,11 +67,8 @@ export class PerspectiveViewerWidget extends Widget {
     }
 
     async save() {
-        let config = {
-            ...(await this.viewer.save()),
-        };
-
-        delete config["settings"];
+        let config = await this.viewer.save();
+        config["settings"] = false;
         return config;
     }
 

package/src/ts/workspace/workspace.ts

@@ -16,19 +16,18 @@ import { CommandRegistry } from "@lumino/commands";
 import { SplitPanel, Panel, DockPanel } from "@lumino/widgets";
 import uniqBy from "lodash/uniqBy";
 import { DebouncedFunc, DebouncedFuncLeading, isEqual } from "lodash";
-import { throttle } from "lodash";
-import debounce from "lodash/debounce";
 import type {
     HTMLPerspectiveViewerElement,
-    ViewerConfigUpdate,
+    ViewerConfig,
 } from "@perspective-dev/viewer";
 import type * as psp from "@perspective-dev/client";
 import type * as psp_viewer from "@perspective-dev/viewer";
-import injectedStyles from "../../../build/css/injected.css";
+import injectedStyles from "../../../dist/css/injected.css";
 import { PerspectiveDockPanel } from "./dockpanel";
 import { WorkspaceMenu } from "./menu";
 import { createCommands } from "./commands";
 import { PerspectiveViewerWidget } from "./widget";
+import type { Filter } from "@perspective-dev/client";
 
 class AsyncMutex {
     _lock: Promise<unknown> | null;
@@ -329,7 +328,7 @@ export class PerspectiveWorkspace extends SplitPanel {
             for (const widget of this.masterPanel.widgets) {
                 const psp_widget = widget as PerspectiveViewerWidget;
                 layout.viewers[psp_widget.viewer.getAttribute("slot")!] =
-                    await psp_widget.save();
+                    (await psp_widget.save()) as psp_viewer.ViewerConfigUpdate;
             }
 
             const widgets = PerspectiveDockPanel.getWidgets(
@@ -342,7 +341,8 @@ export class PerspectiveWorkspace extends SplitPanel {
                 widgets.map(async (widget) => {
                     const psp_widget = widget as PerspectiveViewerWidget;
                     const slot = psp_widget.viewer.getAttribute("slot")!;
-                    layout.viewers[slot] = await psp_widget.save();
+                    layout.viewers[slot] =
+                        (await psp_widget.save()) as psp_viewer.ViewerConfigUpdate;
                     layout.viewers[slot]!.settings = false;
                 }),
             );
@@ -515,10 +515,18 @@ export class PerspectiveWorkspace extends SplitPanel {
 
         if (master) {
             widget.viewer.classList.add("workspace-master-widget");
-            widget.viewer.toggleAttribute("selectable", true);
+            await widget.viewer.restore({
+                plugin_config: { edit_mode: "SELECT_ROW_TREE" },
+            });
+
+            widget.viewer.addEventListener(
+                "perspective-global-filter",
+                this.on_global_filter_callback,
+            );
+
             widget.viewer.addEventListener(
                 "perspective-select",
-                this.onPerspectiveSelect.bind(this),
+                this.on_select_callback,
             );
 
             // TODO remove event listener
@@ -613,7 +621,7 @@ export class PerspectiveWorkspace extends SplitPanel {
             this._unmaximize();
         }
 
-        const config = await widget.save();
+        const config = (await widget.save()) as psp_viewer.ViewerConfigUpdate;
         config.settings = false;
         config.title = config.title ? `${config.title} (*)` : "";
         const duplicate = await this._createWidgetAndNode({
@@ -688,30 +696,26 @@ export class PerspectiveWorkspace extends SplitPanel {
         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: psp.Filter) =>
-            filter[0] && availableColumns.includes(filter[0]);
-
-        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]) && !clearColumns.has(x[0]),
-            ),
-        );
 
-        const newFilters = uniqBy(validFilters, (item) => item[0]);
-        await viewer.restore({ filter: newFilters });
+        await viewer.restore({
+            filter: config.filter
+                .filter((x) => !removeFilters.find((y) => y[0] === x[0]))
+                .concat(insertFilters),
+        });
     }
 
-    async onPerspectiveSelect(event: CustomEvent) {
+    async onPerspectiveSelect(
+        filterFun: (config: ViewerConfig) => boolean,
+        event: CustomEvent,
+    ) {
         const config = await (
             event.target as HTMLPerspectiveViewerElement
         ).save();
 
+        if (!filterFun(config)) {
+            return;
+        }
+
         const candidates = new Set([
             ...(config["group_by"] || []),
             ...(config["split_by"] || []),
@@ -735,13 +739,26 @@ export class PerspectiveWorkspace extends SplitPanel {
         });
     }
 
+    private on_select_callback = this.onPerspectiveSelect.bind(
+        this,
+        (config) => config.plugin !== "Datagrid",
+    );
+
+    private on_global_filter_callback = this.onPerspectiveSelect.bind(
+        this,
+        // (config) => config.plugin === "Datagrid",
+        (config) => true,
+    );
+
     async makeMaster(widget: PerspectiveViewerWidget) {
         if (widget.viewer.hasAttribute("settings")) {
             await widget.toggleConfig();
         }
 
         widget.viewer.classList.add("workspace-master-widget");
-        widget.viewer.toggleAttribute("selectable", true);
+        await widget.viewer.restore({
+            plugin_config: { edit_mode: "SELECT_ROW_TREE" },
+        });
         if (!this.masterPanel.isAttached) {
             this.detailPanel.close();
             this.setupMasterPanel(DEFAULT_WORKSPACE_SIZE);
@@ -750,15 +767,23 @@ export class PerspectiveWorkspace extends SplitPanel {
         this.masterPanel.addWidget(widget);
         widget.isHidden && widget.show();
         widget.viewer.restyleElement();
+
+        widget.viewer.addEventListener(
+            "perspective-global-filter",
+            this.on_global_filter_callback,
+        );
+
         widget.viewer.addEventListener(
             "perspective-select",
-            this.onPerspectiveSelect.bind(this),
+            this.on_select_callback,
         );
     }
 
-    makeDetail(widget: PerspectiveViewerWidget) {
+    async makeDetail(widget: PerspectiveViewerWidget) {
         widget.viewer.classList.remove("workspace-master-widget");
-        widget.viewer.toggleAttribute("selectable", false);
+        await widget.viewer.restore({
+            plugin_config: { edit_mode: "READ_ONLY" },
+        });
         this.dockpanel.addWidget(widget, { mode: `split-left` });
         if (this.masterPanel.widgets.length === 0) {
             this.detailPanel.close();
@@ -768,9 +793,14 @@ export class PerspectiveWorkspace extends SplitPanel {
         }
 
         widget.viewer.restyleElement();
+        widget.viewer.removeEventListener(
+            "perspective-global-filter",
+            this.on_global_filter_callback,
+        );
+
         widget.viewer.removeEventListener(
             "perspective-select",
-            this.onPerspectiveSelect.bind(this),
+            this.on_select_callback,
         );
     }
 

package/src/less/dockpanel.less

@@ -1,105 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-.lm-DockPanel {
-    overflow: var(--dock-panel--overflow, hidden);
-    position: absolute;
-    background-color: var(--detail--background-color, transparent);
-    padding: var(--workspace-spacing);
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    &[data-mode="single-document"] {
-        padding: 0px;
-    }
-}
-
-.lm-Widget,
-.lm-Widget {
-    cursor: inherit;
-}
-
-.lm-DockPanel.ew,
-.lm-DockPanel.ew .lm-Widget,
-.lm-SplitPanel.ew,
-.lm-SplitPanel.ew .lm-Widget {
-    cursor: ew-resize !important;
-}
-
-.lm-DockPanel.ns,
-.lm-DockPanel.ns .lm-Widget,
-.lm-SplitPanel.ns,
-.lm-SplitPanel.ns .lm-Widget {
-    cursor: ns-resize !important;
-}
-
-.workspace-master-widget {
-    min-width: 100px !important;
-}
-
-.lm-DockPanel.resizing ::slotted(perspective-viewer),
-.lm-SplitPanel.resizing ::slotted(perspective-viewer) {
-    pointer-events: none;
-}
-
-.widget-blur ::slotted(perspective-viewer) {
-    opacity: 0.5;
-}
-
-.lm-DockPanel-handle.resizing {
-    background-color: rgba(0, 0, 0, 0.05);
-}
-
-.perspective-scroll-panel {
-    overflow: auto !important;
-}
-
-.lm-Panel {
-    min-height: 100%;
-}
-
-.lm-DockPanel-handle {
-    background-color: none;
-}
-
-.lm-SplitPanel-handle {
-    background-color: var(--workspace-split-panel-handle--background-color);
-}
-
-.lm-SplitPanel-handle,
-.lm-DockPanel-handle {
-    transition: background-color 0.3s ease-out;
-    &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
-    }
-}
-
-.lm-DockPanel-handle[data-orientation="horizontal"] {
-    width: 10px !important;
-    margin-left: -5px;
-}
-
-.lm-DockPanel-handle[data-orientation="vertical"] {
-    height: 10px !important;
-    margin-top: -5px;
-}
-
-.lm-DockPanel-overlay {
-    background: rgba(75, 75, 75, 0.2);
-    border: 1px dashed #666;
-    border-radius: 6px;
-    transition-property: top, left, right, bottom;
-    transition-duration: 50ms;
-    transition-timing-function: linear;
-    margin: 0px;
-}