@perspective-dev/workspace 4.0.0

package/src/ts/workspace/workspace.ts

@@ -0,0 +1,1056 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { find, toArray } from "@lumino/algorithm";
+import { CommandRegistry } from "@lumino/commands";
+import { SplitPanel, Panel, DockPanel } from "@lumino/widgets";
+import uniqBy from "lodash/uniqBy";
+import { DebouncedFunc, isEqual } from "lodash";
+import debounce from "lodash/debounce";
+import type {
+    HTMLPerspectiveViewerElement,
+    ViewerConfigUpdate,
+} from "@perspective-dev/viewer";
+import type * as psp from "@perspective-dev/client";
+import injectedStyles from "../../../build/css/injected.css";
+import { PerspectiveDockPanel } from "./dockpanel";
+import { WorkspaceMenu } from "./menu";
+import { createCommands } from "./commands";
+import { PerspectiveViewerWidget } from "./widget";
+import { ObservableMap } from "../utils/observable_map";
+
+const DEFAULT_WORKSPACE_SIZE = [1, 3];
+
+let ID_COUNTER = 0;
+
+export interface PerspectiveLayout<T> {
+    children?: PerspectiveLayout<T>[];
+    widgets?: T[];
+    sizes: number[];
+}
+
+export interface ViewerConfigUpdateExt extends ViewerConfigUpdate {
+    table: string;
+}
+
+export interface PerspectiveWorkspaceConfig<T> {
+    sizes: number[];
+    master: PerspectiveLayout<T>;
+    detail: PerspectiveLayout<T>;
+    viewers: Record<string, ViewerConfigUpdateExt>;
+}
+
+export class PerspectiveWorkspace extends SplitPanel {
+    private dockpanel: PerspectiveDockPanel;
+    private detailPanel: Panel;
+    private masterPanel: SplitPanel;
+    element: HTMLElement;
+    menu_elem: HTMLElement;
+    private _tables: ObservableMap<string, psp.Table | Promise<psp.Table>>;
+    private listeners: WeakMap<PerspectiveViewerWidget, () => void>;
+    private indicator: HTMLElement;
+    private commands: CommandRegistry;
+    private _menu?: WorkspaceMenu;
+    private _minimizedLayoutSlots?: DockPanel.ILayoutConfig;
+    private _minimizedLayout?: DockPanel.ILayoutConfig;
+    private _maximizedWidget?: PerspectiveViewerWidget;
+    private _last_updated_state?: PerspectiveWorkspaceConfig<string>;
+    // private _context_menu?: Menu & { init_overlay?: () => void };
+
+    constructor(element: HTMLElement) {
+        super({ orientation: "horizontal" });
+        this.addClass("perspective-workspace");
+        this.dockpanel = new PerspectiveDockPanel(this);
+        this.detailPanel = new Panel();
+        this.detailPanel.layout!.fitPolicy = "set-no-constraint";
+        this.detailPanel.addClass("perspective-scroll-panel");
+        this.detailPanel.addWidget(this.dockpanel);
+        this.masterPanel = new SplitPanel({ orientation: "vertical" });
+        this.masterPanel.addClass("master-panel");
+        this.dockpanel.layoutModified.connect(() => {
+            this.workspaceUpdated();
+        });
+
+        this.addWidget(this.detailPanel);
+        this.spacing = 6;
+        this.element = element;
+        this.listeners = new WeakMap();
+        this._tables = new ObservableMap();
+        this._tables.addSetListener(this._set_listener.bind(this));
+        this._tables.addDeleteListener(this._delete_listener.bind(this));
+        this.indicator = this.init_indicator();
+        this.commands = createCommands(this, this.indicator);
+        this.menu_elem = document.createElement("perspective-workspace-menu");
+        this.menu_elem.attachShadow({ mode: "open" });
+        this.menu_elem.shadowRoot!.innerHTML = `<style>:host{position:absolute;}${injectedStyles}</style>`;
+
+        this.element.shadowRoot!.insertBefore(
+            this.menu_elem,
+            this.element.shadowRoot!.lastElementChild!,
+        );
+
+        element.addEventListener("contextmenu", (event) =>
+            this.showContextMenu(null, event),
+        );
+    }
+
+    get_context_menu(): WorkspaceMenu | undefined {
+        return this._menu;
+    }
+
+    get_dock_panel(): PerspectiveDockPanel {
+        return this.dockpanel;
+    }
+
+    init_indicator() {
+        const indicator = document.createElement("perspective-indicator");
+        indicator.style.position = "fixed";
+        indicator.style.pointerEvents = "none";
+        document.body.appendChild(indicator);
+        return indicator;
+    }
+
+    apply_indicator_theme() {
+        const theme_name = JSON.parse(
+            window
+                .getComputedStyle(this.element)
+                .getPropertyValue("--theme-name")
+                .trim(),
+        );
+
+        this.indicator.setAttribute("theme", theme_name);
+    }
+
+    /***************************************************************************
+     *
+     * `<perspective-workspace>` Public API
+     *
+     */
+
+    addTable(name: string, table: Promise<psp.Table>) {
+        this.tables.set(name, table);
+    }
+
+    getTable(name: string): psp.Table | Promise<psp.Table> {
+        return this.tables.get(name);
+    }
+
+    removeTable(name: string) {
+        return this.tables.delete(name);
+    }
+
+    replaceTable(name: string, table: Promise<psp.Table>) {
+        this.tables.set(name, table);
+    }
+
+    get tables() {
+        return this._tables;
+    }
+
+    async save() {
+        const is_settings = this.dockpanel.mode === "single-document";
+        let detail = is_settings
+            ? this._minimizedLayoutSlots
+            : PerspectiveDockPanel.mapWidgets(
+                  (widget) =>
+                      // this.getWidgetByName(widget)!.viewer.getAttribute("slot")
+                      (widget as PerspectiveViewerWidget).viewer.getAttribute(
+                          "slot",
+                      ),
+                  this.dockpanel.saveLayout(),
+              );
+
+        const layout = {
+            sizes: [...this.relativeSizes()],
+            detail,
+            master: undefined as
+                | { widgets: string[]; sizes: number[] }
+                | undefined,
+        };
+
+        if (this.masterPanel.isAttached) {
+            const master = {
+                widgets: this.masterPanel.widgets.map(
+                    (widget) =>
+                        (widget as PerspectiveViewerWidget).viewer.getAttribute(
+                            "slot",
+                        )!,
+                ),
+                sizes: [...this.masterPanel.relativeSizes()],
+            };
+            layout.master = master;
+        }
+
+        const viewers: Record<string, ViewerConfigUpdate> = {};
+        for (const widget of this.masterPanel.widgets) {
+            const psp_widget = widget as PerspectiveViewerWidget;
+            viewers[psp_widget.viewer.getAttribute("slot")!] =
+                await psp_widget.save();
+        }
+
+        const widgets = PerspectiveDockPanel.getWidgets(
+            is_settings ? this._minimizedLayout! : this.dockpanel.saveLayout(),
+        );
+
+        await Promise.all(
+            widgets.map(async (widget) => {
+                const psp_widget = widget as PerspectiveViewerWidget;
+                const slot = psp_widget.viewer.getAttribute("slot")!;
+                viewers[slot] = await psp_widget.save();
+                viewers[slot]!.settings = false;
+            }),
+        );
+
+        return { ...layout, viewers };
+    }
+
+    async restore(value: PerspectiveWorkspaceConfig<string>) {
+        const {
+            sizes,
+            master,
+            detail,
+            viewers: viewer_configs = {},
+        } = structuredClone(value);
+
+        if (master && master.widgets!.length > 0) {
+            this.setupMasterPanel(sizes || DEFAULT_WORKSPACE_SIZE);
+        } else {
+            if (this.masterPanel.isAttached) {
+                this.detailPanel.removeClass("has-master-panel");
+                this.masterPanel.close();
+            }
+
+            this.addWidget(this.detailPanel);
+        }
+
+        let tasks: Promise<void>[] = [];
+
+        // Using ES generators as context managers ..
+        for (const viewers of this._capture_viewers()) {
+            for (const widgets of this._capture_widgets()) {
+                for (const v of viewers) {
+                    v.removeAttribute("class");
+                }
+
+                const callback = this._restore_callback.bind(
+                    this,
+                    viewer_configs,
+                    viewers,
+                    widgets,
+                );
+
+                if (detail) {
+                    const detailLayout = PerspectiveDockPanel.mapWidgets(
+                        (name: string) => callback.bind(this, false)(name),
+                        detail,
+                    );
+
+                    this.dockpanel.mode = "multiple-document";
+                    this.dockpanel.restoreLayout(detailLayout);
+                    tasks = tasks.concat(
+                        PerspectiveDockPanel.getWidgets(detailLayout).map(
+                            (x) => (x as PerspectiveViewerWidget).task!,
+                        ),
+                    );
+                }
+
+                if (master) {
+                    tasks = tasks.concat(
+                        master.widgets!.map(
+                            (name) => callback.bind(this, true)(name).task!,
+                        ),
+                    );
+
+                    master.sizes &&
+                        this.masterPanel.setRelativeSizes(master.sizes);
+                }
+            }
+        }
+
+        await Promise.all(tasks);
+    }
+
+    *_capture_widgets() {
+        const widgets = this.getAllWidgets();
+        yield widgets;
+        for (const widget of widgets) {
+            if (!widget.node.isConnected) {
+                widget.close();
+            }
+        }
+    }
+
+    *_capture_viewers() {
+        const viewers = Array.from(
+            this.element.children,
+        ) as HTMLPerspectiveViewerElement[];
+
+        yield viewers;
+        const ending_widgets = this.getAllWidgets();
+        for (const viewer of viewers) {
+            let widget = ending_widgets.find((x) => {
+                const psp_widget = x as PerspectiveViewerWidget;
+                return psp_widget.viewer === viewer;
+            });
+
+            if (
+                !widget &&
+                Array.from(this.element.children).indexOf(viewer) > -1
+            ) {
+                this.element.removeChild(viewer);
+                viewer.delete();
+                viewer.free();
+            }
+        }
+    }
+
+    _restore_callback(
+        viewers: Record<string, ViewerConfigUpdateExt>,
+        starting_viewers: HTMLPerspectiveViewerElement[],
+        starting_widgets: PerspectiveViewerWidget[],
+        master: boolean,
+        widgetName: string,
+    ) {
+        let viewer_config;
+        viewer_config = viewers[widgetName];
+
+        let viewer =
+            !!widgetName &&
+            starting_viewers.find((x) => x.getAttribute("slot") === widgetName);
+
+        let widget;
+        if (viewer) {
+            widget = starting_widgets.find((x) => x.viewer === viewer);
+            if (widget) {
+                widget.load(this.tables.get(viewer_config.table));
+                widget.restore({ ...viewer_config });
+            } else {
+                widget = this._createWidget({
+                    config: { ...viewer_config },
+                    viewer,
+                });
+            }
+        } else if (viewer_config) {
+            widget = this._createWidgetAndNode({
+                config: { ...viewer_config },
+                slot: widgetName,
+            });
+        } else {
+            throw new Error(
+                `Could not find or create <perspective-viewer> for slot "${widgetName}"`,
+            );
+        }
+
+        if (master) {
+            widget.viewer.classList.add("workspace-master-widget");
+            widget.viewer.toggleAttribute("selectable", true);
+            widget.viewer.addEventListener(
+                "perspective-select",
+                this.onPerspectiveSelect.bind(this),
+            );
+
+            widget.viewer.addEventListener(
+                "perspective-click",
+                this.onPerspectiveSelect.bind(this),
+            );
+
+            // TODO remove event listener
+            this.masterPanel.addWidget(widget);
+        }
+
+        return widget;
+    }
+
+    _validate(table: any) {
+        if (!table || !("view" in table) || typeof table?.view !== "function") {
+            throw new Error(
+                "Only `perspective.Table()` instances can be added to `tables`",
+            );
+        }
+        return table;
+    }
+
+    _set_listener(name: string, table: psp.Table | Promise<psp.Table>) {
+        if (table instanceof Promise) {
+            table = table.then(this._validate);
+        } else {
+            this._validate(table);
+        }
+
+        this.getAllWidgets().forEach((widget) => {
+            const psp_widget = widget as PerspectiveViewerWidget;
+            if (psp_widget.viewer.getAttribute("table") === name) {
+                psp_widget.load(table);
+            }
+        });
+    }
+
+    _delete_listener(name: string) {
+        this.getAllWidgets().some((widget) => {
+            const psp_widget = widget as PerspectiveViewerWidget;
+            if (psp_widget.viewer.getAttribute("table") === name) {
+                psp_widget.viewer.eject();
+            }
+        });
+    }
+
+    update_widget_for_viewer(viewer: HTMLPerspectiveViewerElement) {
+        let slot_name = viewer.getAttribute("slot");
+        if (!slot_name) {
+            slot_name = this._gen_id();
+            viewer.setAttribute("slot", slot_name);
+        }
+
+        const table_name = viewer.getAttribute("table");
+        if (table_name) {
+            const slot = this.node.querySelector(`slot[name=${slot_name}]`);
+            if (!slot) {
+                console.warn(
+                    `Undocked ${viewer.outerHTML}, creating default layout`,
+                );
+
+                const widget = this._createWidget({
+                    config: {
+                        table: viewer.getAttribute("table")!,
+                    },
+                    viewer,
+                });
+
+                this.dockpanel.addWidget(widget);
+                this.dockpanel.activateWidget(widget);
+            }
+        } else {
+            console.warn(`No table set for ${viewer.outerHTML}`);
+        }
+    }
+
+    remove_unslotted_widgets(viewers: HTMLPerspectiveViewerElement[]) {
+        const widgets = this.getAllWidgets();
+        for (const widget of widgets) {
+            const psp_widget = widget as PerspectiveViewerWidget;
+            let missing = viewers.indexOf(psp_widget.viewer) === -1;
+            if (missing) {
+                psp_widget.close();
+            }
+        }
+    }
+
+    update_details_panel(viewers: HTMLPerspectiveViewerElement[]) {
+        if (this.masterPanel.widgets.length === 0) {
+            this.masterPanel.close();
+        }
+    }
+
+    /***************************************************************************
+     *
+     * Workspace-level contextmenu actions
+     *
+     */
+
+    async duplicate(widget: PerspectiveViewerWidget): Promise<void> {
+        if (this.dockpanel.mode === "single-document") {
+            const _task =
+                await this._maximizedWidget!.viewer.toggleConfig(false);
+
+            this._unmaximize();
+        }
+
+        const config = await widget.save();
+        config.settings = false;
+        config.title = config.title ? `${config.title} (*)` : "";
+        const duplicate = this._createWidgetAndNode({
+            config,
+            slot: undefined,
+        });
+
+        this.dockpanel.addWidget(duplicate, {
+            mode: "split-right",
+            ref: widget,
+        });
+
+        await duplicate.task;
+    }
+
+    toggleMasterDetail(widget: PerspectiveViewerWidget) {
+        const isGlobalFilter = widget.parent !== this.dockpanel;
+        this.element.dispatchEvent(
+            new CustomEvent("workspace-toggle-global-filter", {
+                detail: {
+                    widget,
+                    isGlobalFilter: !isGlobalFilter,
+                },
+            }),
+        );
+
+        if (isGlobalFilter) {
+            this.makeDetail(widget);
+        } else {
+            if (this.dockpanel.mode === "single-document") {
+                this.toggleSingleDocument(widget);
+            }
+            this.makeMaster(widget);
+        }
+    }
+
+    _maximize(widget: PerspectiveViewerWidget) {
+        widget.viewer.classList.add("widget-maximize");
+        this._minimizedLayout = this.dockpanel.saveLayout();
+        this._minimizedLayoutSlots = PerspectiveDockPanel.mapWidgets(
+            (widget: PerspectiveViewerWidget) =>
+                widget.viewer.getAttribute("slot"),
+            this.dockpanel.saveLayout(),
+        );
+
+        this._maximizedWidget = widget;
+        this.dockpanel.mode = "single-document";
+        this.dockpanel.activateWidget(widget);
+    }
+
+    _unmaximize() {
+        this._maximizedWidget!.viewer.classList.remove("widget-maximize");
+        this.dockpanel.mode = "multiple-document";
+        this.dockpanel.restoreLayout(this._minimizedLayout!);
+    }
+
+    toggleSingleDocument(widget: PerspectiveViewerWidget) {
+        if (this.dockpanel.mode !== "single-document") {
+            this._maximize(widget);
+        } else {
+            this._unmaximize();
+        }
+    }
+
+    async _filterViewer(
+        viewer: HTMLPerspectiveViewerElement,
+        filters: [string, string, string][],
+        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]) =>
+            filter[0] && availableColumns.includes(filter[0]);
+
+        const validFilters = filters.filter(columnAvailable);
+        validFilters.push(
+            ...currentFilters.filter(
+                (x: [string, ..._: string[]]) => !candidates.has(x[0]),
+            ),
+        );
+
+        const newFilters = uniqBy(validFilters, (item) => item[0]);
+        await viewer.restore({ filter: newFilters });
+    }
+
+    async onPerspectiveSelect(event: CustomEvent) {
+        const config = await (
+            event.target as HTMLPerspectiveViewerElement
+        ).save();
+        // perspective-select is already handled for hypergrid
+
+        if (
+            event.type === "perspective-click" &&
+            (config.plugin === "Datagrid" || config.plugin === null)
+        ) {
+            return;
+        }
+        const candidates = new Set([
+            ...(config["group_by"] || []),
+            ...(config["split_by"] || []),
+            ...(config.filter || []).map((x: [string, string, any]) => x[0]),
+        ]);
+
+        const filters = [...event.detail.config.filter];
+        toArray(this.dockpanel.widgets()).forEach((widget) => {
+            this._filterViewer(
+                (widget as PerspectiveViewerWidget).viewer,
+                filters,
+                candidates,
+            );
+        });
+    }
+
+    async makeMaster(widget: PerspectiveViewerWidget) {
+        if (widget.viewer.hasAttribute("settings")) {
+            await widget.toggleConfig();
+        }
+
+        widget.viewer.classList.add("workspace-master-widget");
+        widget.viewer.toggleAttribute("selectable", true);
+        if (!this.masterPanel.isAttached) {
+            this.detailPanel.close();
+            this.setupMasterPanel(DEFAULT_WORKSPACE_SIZE);
+        }
+
+        this.masterPanel.addWidget(widget);
+        widget.isHidden && widget.show();
+        widget.viewer.restyleElement();
+        widget.viewer.addEventListener(
+            "perspective-click",
+            this.onPerspectiveSelect.bind(this),
+        );
+
+        widget.viewer.addEventListener(
+            "perspective-select",
+            this.onPerspectiveSelect.bind(this),
+        );
+    }
+
+    makeDetail(widget: PerspectiveViewerWidget) {
+        widget.viewer.classList.remove("workspace-master-widget");
+        widget.viewer.toggleAttribute("selectable", false);
+        this.dockpanel.addWidget(widget, { mode: `split-left` });
+        if (this.masterPanel.widgets.length === 0) {
+            this.detailPanel.close();
+            this.masterPanel.close();
+            this.detailPanel.removeClass("has-master-panel");
+            this.addWidget(this.detailPanel);
+        }
+
+        widget.viewer.restyleElement();
+        widget.viewer.removeEventListener(
+            "perspective-click",
+            this.onPerspectiveSelect.bind(this),
+        );
+
+        widget.viewer.removeEventListener(
+            "perspective-select",
+            this.onPerspectiveSelect.bind(this),
+        );
+    }
+
+    /***************************************************************************
+     *
+     * Context Menu
+     *
+     */
+
+    createContextMenu(widget: PerspectiveViewerWidget | null) {
+        this._menu = new WorkspaceMenu(
+            this.menu_elem.shadowRoot!,
+            this.element,
+            {
+                commands: this.commands,
+            },
+        );
+
+        const tabbar = find(
+            this.dockpanel.tabBars(),
+            (bar) => bar.currentTitle?.owner === widget,
+        );
+
+        this._menu.init_overlay = () => {
+            if (widget) {
+                widget.addClass("context-focus");
+                widget.viewer.classList.add("context-focus");
+                tabbar && tabbar.node.classList.add("context-focus");
+                this.element.classList.add("context-menu");
+                this.addClass("context-menu");
+                if (
+                    widget.viewer.classList.contains("workspace-master-widget")
+                ) {
+                    this._menu!.node.classList.add("workspace-master-menu");
+                } else {
+                    this._menu!.node.classList.remove("workspace-master-menu");
+                }
+            }
+        };
+
+        if (widget?.parent === this.dockpanel || widget === null) {
+            this._menu.addItem({
+                type: "submenu",
+                command: "workspace:newmenu",
+                submenu: (() => {
+                    const submenu = new WorkspaceMenu(
+                        this.menu_elem.shadowRoot!,
+                        this.element,
+                        {
+                            commands: this.commands,
+                        },
+                    );
+
+                    for (const table of this.tables.keys()) {
+                        let args;
+                        if (widget !== null) {
+                            args = {
+                                table,
+                                widget_name: widget.viewer.getAttribute("slot"),
+                            };
+                        } else {
+                            args = { table };
+                        }
+
+                        submenu.addItem({
+                            command: "workspace:new",
+                            args,
+                        });
+                    }
+
+                    const widgets = PerspectiveDockPanel.getWidgets(
+                        this.dockpanel.saveLayout(),
+                    );
+
+                    if (widgets.length > 0) {
+                        submenu.addItem({ type: "separator" });
+                    }
+
+                    let seen = new Set();
+                    for (const target_widget of widgets) {
+                        if (!seen.has(target_widget.title.label)) {
+                            let args;
+                            if (widget !== null) {
+                                args = {
+                                    target_widget_name:
+                                        target_widget.viewer.getAttribute(
+                                            "slot",
+                                        ),
+                                    widget_name:
+                                        widget.viewer.getAttribute("slot"),
+                                };
+                            } else {
+                                args = {
+                                    target_widget_name:
+                                        target_widget.viewer.getAttribute(
+                                            "slot",
+                                        ),
+                                };
+                            }
+
+                            submenu.addItem({
+                                command: "workspace:newview",
+                                args,
+                            });
+
+                            seen.add(target_widget.title.label);
+                        }
+                    }
+
+                    submenu.title.label = "New Table";
+                    return submenu;
+                })(),
+            });
+        }
+
+        if (widget) {
+            const widget_name = widget.viewer.getAttribute("slot");
+            if (widget?.parent === this.dockpanel) {
+                this._menu.addItem({ type: "separator" });
+            }
+
+            this._menu.addItem({
+                command: "workspace:duplicate",
+                args: { widget_name },
+            });
+
+            this._menu.addItem({
+                command: "workspace:master",
+                args: { widget_name },
+            });
+
+            this._menu.addItem({ type: "separator" });
+
+            this._menu.addItem({
+                command: "workspace:settings",
+                args: { widget_name },
+            });
+
+            this._menu.addItem({
+                command: "workspace:reset",
+                args: { widget_name },
+            });
+            this._menu.addItem({
+                command: "workspace:export",
+                args: { widget_name },
+            });
+            this._menu.addItem({
+                command: "workspace:copy",
+                args: { widget_name },
+            });
+
+            this._menu.addItem({ type: "separator" });
+
+            this._menu.addItem({
+                command: "workspace:close",
+                args: { widget_name },
+            });
+            this._menu.addItem({
+                command: "workspace:help",
+            });
+        }
+
+        this._menu.aboutToClose.connect(() => {
+            if (widget) {
+                this.element.classList.remove("context-menu");
+                this.removeClass("context-menu");
+                widget.removeClass("context-focus");
+                tabbar?.node?.classList.remove("context-focus");
+            }
+        });
+
+        return this._menu;
+    }
+
+    showContextMenu(widget: PerspectiveViewerWidget | null, event: MouseEvent) {
+        if (!event.shiftKey) {
+            const menu = this.createContextMenu(widget);
+            menu.init_overlay?.();
+            const rect = this.element.getBoundingClientRect();
+            menu.open(event.clientX - rect.x, event.clientY - rect.y, {
+                host: this.menu_elem.shadowRoot as unknown as HTMLElement,
+            });
+
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    /***************************************************************************
+     *
+     * Context Menu
+     *
+     */
+
+    clearLayout() {
+        this.getAllWidgets().forEach((widget) => widget.close());
+        this.widgets.forEach((widget) => widget.close());
+        this.detailPanel.close();
+        if (this.masterPanel.isAttached) {
+            this.detailPanel.removeClass("has-master-panel");
+            this.masterPanel.close();
+        }
+    }
+
+    setupMasterPanel(sizes: number[]) {
+        this.detailPanel.addClass("has-master-panel");
+        this.addWidget(this.masterPanel);
+        this.addWidget(this.detailPanel);
+        this.setRelativeSizes(sizes);
+    }
+
+    addViewer(config: ViewerConfigUpdateExt, is_global_filter?: boolean) {
+        if (this.dockpanel.mode === "single-document") {
+            const _task = this._maximizedWidget!.viewer.toggleConfig(false);
+            this._unmaximize();
+        }
+
+        const widget = this._createWidgetAndNode({ config });
+        if (is_global_filter) {
+            if (!this.masterPanel.isAttached) {
+                this.setupMasterPanel(DEFAULT_WORKSPACE_SIZE);
+            }
+
+            this.masterPanel.addWidget(widget);
+        } else {
+            if (!this.detailPanel.isAttached) {
+                this.addWidget(this.detailPanel);
+            }
+            this.dockpanel.addWidget(widget, { mode: "split-right" });
+        }
+
+        this.update();
+    }
+
+    /*********************************************************************
+     * Widget helper methods
+     */
+
+    _createWidgetAndNode({
+        config,
+        slot: slotname,
+    }: {
+        config: ViewerConfigUpdateExt;
+        slot?: string;
+    }) {
+        const node = this._createNode(slotname);
+        const table = config.table;
+        const viewer = document.createElement("perspective-viewer");
+        viewer.setAttribute(
+            "slot",
+            node!.querySelector("slot")!.getAttribute("name")!,
+        );
+
+        if (table) {
+            viewer.setAttribute("table", table);
+        }
+
+        return this._createWidget({
+            config,
+            elem: node as HTMLElement,
+            viewer,
+        });
+    }
+
+    _gen_id() {
+        let genId = `PERSPECTIVE_GENERATED_ID_${ID_COUNTER++}`;
+        if (this.element.querySelector(`[slot=${genId}]`)) {
+            genId = this._gen_id();
+        }
+        return genId;
+    }
+
+    _createNode(slotname?: string): HTMLElement {
+        let node = this.node.querySelector(`slot[name=${slotname}]`);
+        if (slotname === undefined || !node) {
+            const slot = document.createElement("slot");
+            slotname = slotname || this._gen_id();
+            slot.setAttribute("name", slotname);
+            const div = document.createElement("div");
+            div.classList.add("viewer-container");
+            div.appendChild(slot);
+            node = document.createElement("div");
+            node.classList.add("workspace-widget");
+            node.appendChild(div);
+        } else {
+            node = node.parentElement!.parentElement;
+        }
+
+        return node as HTMLElement;
+    }
+
+    _createWidget({
+        config,
+        elem,
+        viewer,
+    }: {
+        config: ViewerConfigUpdateExt;
+        elem?: Element;
+        viewer: HTMLPerspectiveViewerElement;
+    }) {
+        let node: HTMLElement = elem as HTMLElement;
+        if (!node) {
+            const slotname = viewer.getAttribute("slot") || undefined;
+            node = this.node.querySelector(`slot[name=${slotname}]`)!;
+            if (!node) {
+                node = this._createNode(slotname)!;
+            } else {
+                node = node.parentElement!.parentElement!;
+            }
+        }
+
+        const table = this.tables.get(
+            viewer.getAttribute("table") || config.table,
+        );
+
+        const widget = new PerspectiveViewerWidget({ node, viewer });
+        widget.task = (async () => {
+            if (table) {
+                widget.load(table);
+            }
+
+            await widget.restore(config);
+        })();
+
+        const event = new CustomEvent("workspace-new-view", {
+            detail: { config, widget },
+        });
+        this.element.dispatchEvent(event);
+        widget.title.closable = true;
+        this.element.appendChild(widget.viewer);
+        this._addWidgetEventListeners(widget);
+        return widget;
+    }
+
+    _addWidgetEventListeners(widget: PerspectiveViewerWidget) {
+        if (this.listeners.has(widget)) {
+            this.listeners.get(widget)!();
+        }
+
+        const settings = (event: CustomEvent) => {
+            if (!event.detail && this.dockpanel.mode === "single-document") {
+                this._unmaximize();
+            }
+        };
+
+        const contextMenu = (event: MouseEvent) =>
+            this.showContextMenu(widget, event);
+
+        const updated = async (event: CustomEvent) => {
+            this.workspaceUpdated();
+            // Sometimes plugins or other external code fires this event and
+            //  does not populate this field!
+            const config =
+                typeof event.detail === "undefined"
+                    ? await widget.viewer.save()
+                    : event.detail;
+
+            widget.title.label = config.title;
+            widget._is_pivoted = config.group_by?.length > 0;
+        };
+
+        widget.node.addEventListener("contextmenu", contextMenu);
+        widget.viewer.addEventListener("perspective-toggle-settings", settings);
+
+        // @ts-ignore
+        widget.viewer.addEventListener("perspective-config-update", updated);
+
+        this.listeners.set(widget, () => {
+            widget.node.removeEventListener("contextmenu", contextMenu);
+            widget.viewer.removeEventListener(
+                "perspective-toggle-settings",
+                settings,
+            );
+
+            // @ts-ignore
+            widget.viewer.removeEventListener(
+                "perspective-config-update",
+                updated,
+            );
+        });
+    }
+
+    getWidgetByName(name: string): PerspectiveViewerWidget | null {
+        return (
+            this.getAllWidgets().find(
+                (x) => x.viewer.getAttribute("slot") === name,
+            ) || null
+        );
+    }
+
+    getAllWidgets(): PerspectiveViewerWidget[] {
+        return [
+            ...(this.masterPanel.widgets as PerspectiveViewerWidget[]),
+            ...toArray(this.dockpanel.widgets()),
+        ] as PerspectiveViewerWidget[];
+    }
+
+    /***************************************************************************
+     *
+     * `workspace-layout-update` event
+     *
+     */
+
+    async workspaceUpdated() {
+        const layout = await this.save();
+        if (layout) {
+            if (this._last_updated_state) {
+                if (isEqual(this._last_updated_state, layout)) {
+                    return;
+                }
+            }
+
+            this._last_updated_state =
+                layout as any as PerspectiveWorkspaceConfig<string>;
+
+            const tables: Record<string, psp.Table | Promise<psp.Table>> = {};
+            this.tables.forEach((value, key) => {
+                tables[key] = value;
+            });
+
+            this.element.dispatchEvent(
+                new CustomEvent("workspace-layout-update", {
+                    detail: { tables, layout },
+                }),
+            );
+        }
+    }
+}