@perspective-dev/workspace 4.0.1 → 4.1.1

package/src/ts/perspective-workspace.ts

@@ -12,22 +12,21 @@
 
 import { MessageLoop } from "@lumino/messaging";
 import { Widget } from "@lumino/widgets";
-import { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 import type * as psp from "@perspective-dev/client";
+import type * as psp_viewer from "@perspective-dev/viewer";
+import * as msg from "@lumino/messaging";
 
-export { PerspectiveWorkspace } from "./workspace";
+export { PerspectiveWorkspace, addViewer, genId } from "./workspace";
 export { PerspectiveViewerWidget } from "./workspace/widget";
-
-import "./external";
-import {
-    PerspectiveWorkspace,
-    PerspectiveWorkspaceConfig,
-    ViewerConfigUpdateExt,
-} from "./workspace";
+export * from "./extensions";
+import { PerspectiveWorkspace, PerspectiveWorkspaceConfig } from "./workspace";
 import { bindTemplate, CustomElementProto } from "./utils/custom_elements";
 import style from "../../build/css/workspace.css";
 import template from "../html/workspace.html";
 
+export { PerspectiveWorkspaceConfig };
+
 /**
  * A Custom Element for coordinating a set of `<perspective-viewer>` light DOM
  * children.  `<perspective-workspace>` is built on Lumino.js to allow a more
@@ -46,24 +45,13 @@ import template from "../html/workspace.html";
  * express your initial view simply:
  *
  * ```html
- * <perspective-workspace>
- *     <perspective-viewer
- *         name="View One"
- *         table="superstore">
- *     </perspective-viewer>
- *     <perspective-viewer
- *         name="View Two"
- *         table="superstore">
- *     </perspective-viewer>
- * </perspective-workspace>
+ * <perspective-workspace></perspective-workspace>
  * ```
  *
  * You can also use the DOM API in Javascript:
  *
  * ```javascript
  * const workspace = document.createElement("perspective-workspace");
- * const viewer = document.createElement("perspective-viewer");
- * workspace.appendChild(viewer);
  * document.body.appendChild(workspace);
  * ```
  *
@@ -113,7 +101,7 @@ export class HTMLPerspectiveWorkspaceElement extends HTMLElement {
      * const workspace = document.querySelector("perspective-workspace");
      * localStorage.set("CONFIG", JSON.stringify(workspace.save()));
      */
-    save() {
+    save(): Promise<PerspectiveWorkspaceConfig> {
         return this.workspace!.save();
     }
 
@@ -137,15 +125,15 @@ export class HTMLPerspectiveWorkspaceElement extends HTMLElement {
      * // Add `Table` separately.
      * workspace.tables.set("superstore", await worker.table(data));
      */
-    async restore(layout: PerspectiveWorkspaceConfig<string>) {
+    async restore(layout: PerspectiveWorkspaceConfig) {
         await this.workspace!.restore(layout);
     }
 
     async clear() {
         await this.restore({
             sizes: [],
-            master: { sizes: [] },
-            detail: { sizes: [] },
+            master: undefined,
+            detail: { main: null },
             viewers: {},
         });
     }
@@ -156,75 +144,41 @@ export class HTMLPerspectiveWorkspaceElement extends HTMLElement {
      * are applied.
      */
     async flush() {
-        await Promise.all(
-            Array.from(this.querySelectorAll("perspective-viewer")).map((x) => {
-                const psp_widget = x as HTMLPerspectiveViewerElement;
-                return psp_widget.flush();
-            }),
-        );
+        if (!this.workspace) {
+            return;
+        }
+
+        msg.MessageLoop.flush();
+        await new Promise((x) => requestAnimationFrame(x));
+        await this.workspace._mutex.lock(async () => {
+            await Promise.all(
+                Array.from(this.querySelectorAll("perspective-viewer")).map(
+                    (x) => {
+                        const psp_widget = x as HTMLPerspectiveViewerElement;
+                        return psp_widget
+                            .flush()
+                            .then(() => psp_widget.flush());
+                    },
+                ),
+            );
+        });
     }
 
     /**
      * Add a new viewer to the workspace for a given `ViewerConfigUpdateExt`.
      * @param config
      */
-    async addViewer(config: ViewerConfigUpdateExt) {
-        this.workspace!.addViewer(config);
-        await this.flush();
-    }
-
-    /**
-     * Add a new `Table` to the workspace, so that it can be bound by viewers.
-     * Each `Table` is identified by a unique `name`.
-     */
-    async addTable(name: string, table: Promise<psp.Table>) {
-        this.workspace!.addTable(name, table);
+    async addViewer(config: psp_viewer.ViewerConfigUpdate) {
+        await this.workspace!.addViewer(config);
         await this.flush();
     }
 
-    /**
-     * Deleta a table by name from this workspace
-     * @param name
-     * @returns
-     */
-    getTable(name: string) {
-        return this.workspace!.getTable(name);
-    }
-
-    /**
-     * Replace a `Table` by name. As `Table` doe snot guarantee the same
-     * structure, this will wipe the viewer's state.
-     * @param name
-     * @param table
-     */
-    async replaceTable(name: string, table: Promise<psp.Table>) {
-        this.workspace!.replaceTable(name, table);
-        await this.flush();
-    }
-
-    /**
-     * Remove a `Table` by name.
-     * @param name
-     * @returns
-     */
-    removeTable(name: string) {
-        return this.workspace!.removeTable(name);
-    }
-
-    /**
-     * A `Map()` of `perspective.Table()` by name.  The names set here will auto
-     * wire any child `perspective-viewer` elements in this Workspace's subtree,
-     * by looking up their respective `table` attribute.
-     *
-     * Calling methods on this `Map()` may have side-effects, as
-     * `PerspectiveViewerHTMLElement.load()` is called when a new `Table()` is
-     * set with a name matching an existing child `perspective-viewer`.
-     *
-     * @readonly
-     * @memberof HTMLPerspectiveWorkspaceElement
-     */
-    get tables() {
-        return this.workspace!.tables;
+    async load(client: psp.Client | Promise<psp.Client>) {
+        if (this.workspace) {
+            this.workspace.client.push(await client);
+        } else {
+            throw new Error("Workspace not mounted");
+        }
     }
 
     /**
@@ -269,27 +223,33 @@ export class HTMLPerspectiveWorkspaceElement extends HTMLElement {
      */
 
     private _light_dom_changed() {
-        const viewers = Array.from(
-            this.childNodes,
-        ) as HTMLPerspectiveViewerElement[];
+        if (!this.workspace) {
+            return;
+        }
 
-        for (const viewer of viewers) {
-            if (viewer.nodeType !== Node.ELEMENT_NODE) {
-                continue;
-            }
+        this.workspace._mutex.lock(async () => {
+            const viewers = Array.from(
+                this.childNodes,
+            ) as HTMLPerspectiveViewerElement[];
 
-            if (viewer.tagName !== "PERSPECTIVE-VIEWER") {
-                console.warn("Not a <perspective-viewer>");
-                continue;
-            }
+            for (const viewer of viewers) {
+                if (viewer.nodeType !== Node.ELEMENT_NODE) {
+                    continue;
+                }
 
-            this.workspace!.update_widget_for_viewer(
-                viewer as HTMLPerspectiveViewerElement,
-            );
-        }
+                if (viewer.tagName !== "PERSPECTIVE-VIEWER") {
+                    console.warn("Not a <perspective-viewer>");
+                    continue;
+                }
+
+                let _task = this.workspace!.update_widget_for_viewer(
+                    viewer as HTMLPerspectiveViewerElement,
+                );
+            }
 
-        this.workspace!.remove_unslotted_widgets(viewers);
-        this.workspace!.update_details_panel(viewers);
+            this.workspace!.remove_unslotted_widgets(viewers);
+            this.workspace!.update_details_panel(viewers);
+        });
     }
 
     private _register_light_dom_listener() {

package/src/ts/workspace/commands.ts

@@ -11,12 +11,12 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { CommandRegistry } from "@lumino/commands";
-import { Menu, Widget } from "@lumino/widgets";
+import { Widget } from "@lumino/widgets";
 import { Signal } from "@lumino/signaling";
 
 import type {
-    HTMLPerspectiveViewerCopyMenu,
-    HTMLPerspectiveViewerExportMenu,
+    HTMLPerspectiveViewerCopyMenuElement,
+    HTMLPerspectiveViewerExportMenuElement,
 } from "@perspective-dev/viewer";
 
 import type { PerspectiveWorkspace } from "./workspace";
@@ -32,14 +32,14 @@ export const createCommands = (
         execute: async (args) => {
             const menu = document.createElement(
                 "perspective-export-menu",
-            ) as unknown as HTMLPerspectiveViewerExportMenu;
+            ) as unknown as HTMLPerspectiveViewerExportMenuElement;
 
             workspace.apply_indicator_theme();
             const widget = workspace.getWidgetByName(
                 args.widget_name as string,
             )!;
 
-            menu.set_model(widget.viewer.get_model());
+            menu.__set_model(widget.viewer.__get_model());
             menu.open(indicator);
             workspace.get_context_menu()?.init_overlay?.();
             menu.addEventListener("blur", () => {
@@ -74,13 +74,13 @@ export const createCommands = (
         execute: async (args) => {
             const menu = document.createElement(
                 "perspective-copy-menu",
-            ) as HTMLPerspectiveViewerCopyMenu;
+            ) as HTMLPerspectiveViewerCopyMenuElement;
 
             workspace.apply_indicator_theme();
             const widget = workspace.getWidgetByName(
                 args.widget_name as string,
             )!;
-            menu.set_model(widget.viewer.get_model());
+            menu.__set_model(widget.viewer.__get_model());
 
             menu.open(indicator);
             workspace.get_context_menu()?.init_overlay?.();
@@ -112,9 +112,11 @@ export const createCommands = (
     });
 
     commands.addCommand("workspace:new", {
-        execute: (args) => {
-            const widget = workspace._createWidgetAndNode({
-                config: { table: args.table as string },
+        execute: async (args) => {
+            const widget = await workspace._createWidgetAndNode({
+                config: {
+                    table: args.table as string,
+                },
                 slot: undefined,
             });
 
@@ -140,7 +142,7 @@ export const createCommands = (
             )!;
 
             const config = await target_widget.save();
-            const new_widget = workspace._createWidgetAndNode({
+            const new_widget = await workspace._createWidgetAndNode({
                 config,
                 slot: undefined,
             });
@@ -184,19 +186,19 @@ export const createCommands = (
                 throw new Error(`No widget ${widget_name}`);
             }
 
-            if (!widget.viewer.hasAttribute("settings")) {
-                workspace._maximize(widget);
-                requestAnimationFrame(() => widget.viewer.toggleConfig());
-            } else {
-                widget.viewer.toggleConfig();
-            }
+            // if (!widget.viewer.hasAttribute("settings")) {
+            // workspace._maximize(widget);
+            requestAnimationFrame(() => widget.viewer.toggleConfig());
+            // } else {
+            // widget.viewer.toggleConfig();
+            // }
         },
         isVisible: (args) => {
             const widget = workspace.getWidgetByName(
                 args.widget_name as string,
-            )!;
+            );
 
-            return widget.parent! === (workspace.get_dock_panel() as Widget)
+            return widget?.parent! === (workspace.get_dock_panel() as Widget)
                 ? true
                 : false;
         },
@@ -220,8 +222,8 @@ export const createCommands = (
             ),
         // iconClass: "menu-duplicate",
         isVisible: (args) => {
-            return workspace.getWidgetByName(args.widget_name as string)!
-                .parent! === (workspace.get_dock_panel() as Widget)
+            return workspace.getWidgetByName(args.widget_name as string)
+                ?.parent! === (workspace.get_dock_panel() as Widget)
                 ? true
                 : false;
         },

package/src/ts/workspace/dockpanel.ts

@@ -36,11 +36,13 @@ class PerspectiveDockPanelRenderer extends DockPanel.Renderer {
 
 // @ts-ignore: extending a private member `_onTabDetachRequested`
 export class PerspectiveDockPanel extends DockPanel {
+    _workspace: PerspectiveWorkspace;
     constructor(workspace: PerspectiveWorkspace) {
         super({ renderer: new PerspectiveDockPanelRenderer(workspace) });
 
         // @ts-ignore: accessing a private member `_renderer`
         this._renderer.dock = this;
+        this._workspace = workspace;
     }
 
     _onTabDetachRequested(
@@ -64,7 +66,7 @@ export class PerspectiveDockPanel extends DockPanel {
         // @ts-ignore: accessing a private member `_drag`
         const drag = this._drag;
         if (drag) {
-            drag.dragImage?.parentElement.removeChild(drag.dragImage);
+            drag.dragImage?.parentElement?.removeChild?.(drag.dragImage);
             drag.dragImage = null;
             drag._promise.then(() => {
                 if (!widget.node.isConnected) {
@@ -107,12 +109,12 @@ export class PerspectiveDockPanel extends DockPanel {
         return super.widgets() as IterableIterator<PerspectiveViewerWidget>;
     }
 
-    static mapWidgets(
-        widgetFunc: (widget: any) => any,
+    static async mapWidgets(
+        widgetFunc: (widget: any) => Promise<any>,
         layout: any,
-    ): DockPanel.ILayoutConfig {
+    ): Promise<DockPanel.ILayoutConfig> {
         if (!!layout.main) {
-            layout.main = PerspectiveDockPanel.mapAreaWidgets(
+            layout.main = await PerspectiveDockPanel.mapAreaWidgets(
                 widgetFunc,
                 layout.main,
             );
@@ -121,18 +123,22 @@ export class PerspectiveDockPanel extends DockPanel {
         return layout;
     }
 
-    static mapAreaWidgets(
-        widgetFunc: (widget: any) => any,
+    static async mapAreaWidgets(
+        widgetFunc: (widget: any) => Promise<any>,
         layout: DockLayout.AreaConfig,
-    ): DockLayout.AreaConfig {
+    ): Promise<DockLayout.AreaConfig> {
         if (layout.hasOwnProperty("children")) {
             const split_panel = layout as DockLayout.ISplitAreaConfig;
-            split_panel.children = split_panel.children.map((widget) =>
-                PerspectiveDockPanel.mapAreaWidgets(widgetFunc, widget),
+            split_panel.children = await Promise.all(
+                split_panel.children.map((widget) =>
+                    PerspectiveDockPanel.mapAreaWidgets(widgetFunc, widget),
+                ),
             );
         } else if (layout.hasOwnProperty("widgets")) {
             const tab_panel = layout as DockLayout.ITabAreaConfig;
-            tab_panel.widgets = tab_panel.widgets.map(widgetFunc);
+            tab_panel.widgets = await Promise.all(
+                tab_panel.widgets.map(widgetFunc),
+            );
         }
 
         return layout;
@@ -140,6 +146,11 @@ export class PerspectiveDockPanel extends DockPanel {
 
     onAfterAttach() {
         this.spacing =
-            parseInt(window.getComputedStyle(this.node).padding) || 0;
+            parseInt(
+                window
+                    .getComputedStyle(this._workspace.element)
+                    .getPropertyValue("--workspace-spacing"),
+            ) || 0;
+        1;
     }
 }

package/src/ts/workspace/tabbar.ts

@@ -62,6 +62,7 @@ export class PerspectiveTabBar extends TabBar<any> {
         let content = new Array();
         for (let i = 0, n = titles.length; i < n; ++i) {
             let title = titles[i];
+            title.owner._titlebar = this;
             let current = title === currentTitle;
             let otherTitles = titles.filter((x) => x !== currentTitle);
             let onClick;
@@ -132,7 +133,12 @@ export class PerspectiveTabBar extends TabBar<any> {
             mnemonic: 0,
         });
 
-        const box = (event.target as HTMLElement).getBoundingClientRect();
+        const box = (
+            (event.target as HTMLElement).shadowRoot?.querySelector(
+                "#status_reconnect",
+            ) as HTMLElement
+        ).getBoundingClientRect();
+
         const outer_box = this._workspace.element.getBoundingClientRect();
         this._menu.open(box.x - outer_box.x, box.y + box.height - outer_box.y);
         this._menu.aboutToClose.connect(() => {

package/src/ts/workspace/tabbarrenderer.ts

@@ -53,39 +53,22 @@ export class PerspectiveTabBarRenderer extends TabBar.Renderer {
         const dataset = this.createTabDataset(data);
         const more: h.Child[] = [];
         if (onclick) {
-            more.push(
-                h.div(
-                    { onclick, className: "bookmarks-button" },
-                    h.div({ className: "bookmarks" }),
-                ),
-            );
+            data.title.owner.setCallback(onclick);
+            data.title.owner.addClass("bookmarks-container");
+        } else {
+            data.title.owner.setCallback(undefined);
+            data.title.owner.removeClass("bookmarks-container");
         }
 
         return h.li(
             { key, className, title, style, dataset },
-            this.renderDragHandle(),
-            ...more,
-            this.renderLabel(data),
-            this.renderCloseIcon(),
+            // this.renderDragHandle(),
         );
     }
 
-    renderDragHandle() {
-        return h.div({
-            className: "drag-handle",
-        });
-    }
-
-    // renderConfigIcon() {
+    // renderDragHandle() {
     //     return h.div({
-    //         className: "lm-TabBar-tabConfigIcon",
-    //         id: TabBarItems.Config,
+    //         className: "drag-handle",
     //     });
     // }
-
-    renderCloseIcon() {
-        return h.div({
-            className: "lm-TabBar-tabCloseIcon" + " p-TabBar-tabCloseIcon",
-        });
-    }
 }

package/src/ts/workspace/widget.ts

@@ -15,26 +15,31 @@ import { Message } from "@lumino/messaging";
 
 import type * as psp_viewer from "@perspective-dev/viewer";
 import type * as psp from "@perspective-dev/client";
+import { PerspectiveTabBar } from "./tabbar";
 
 interface IPerspectiveViewerWidgetOptions {
     node: HTMLElement;
     viewer: psp_viewer.HTMLPerspectiveViewerElement;
+    onAttach?: () => void;
 }
 
 export class PerspectiveViewerWidget extends Widget {
     viewer: psp_viewer.HTMLPerspectiveViewerElement;
     _title: string;
-    _is_table_loaded: boolean;
     _is_pivoted: boolean;
     _restore_config?: () => Promise<void>;
-    task?: Promise<void>;
+    _onAttach?: () => void;
+    _titlebar?: PerspectiveTabBar;
+    _deleted: boolean;
+    _titlebar_callback?: (event: MouseEvent) => {};
 
-    constructor({ viewer, node }: IPerspectiveViewerWidgetOptions) {
+    constructor({ viewer, node, onAttach }: IPerspectiveViewerWidgetOptions) {
         super({ node });
         this.viewer = viewer;
         this._title = "";
-        this._is_table_loaded = false;
         this._is_pivoted = false;
+        this._onAttach = onAttach;
+        this._deleted = false;
     }
 
     get name(): string {
@@ -46,7 +51,6 @@ export class PerspectiveViewerWidget extends Widget {
     }
 
     async load(table: psp.Table | Promise<psp.Table>) {
-        this._is_table_loaded = true;
         let promises = [this.viewer.load(table)];
         if (this._restore_config) {
             promises.push(this._restore_config());
@@ -55,47 +59,52 @@ export class PerspectiveViewerWidget extends Widget {
         await Promise.all(promises);
     }
 
-    restore(
-        config: psp_viewer.ViewerConfigUpdate & {
-            table: string;
-        },
-    ) {
-        const { table, ...viewerConfig } = config;
+    restore(config: psp_viewer.ViewerConfigUpdate) {
         this._title = config.title as string;
         this.title.label = config.title as string;
-        if (table) {
-            this.viewer.setAttribute("table", table);
-        }
-
-        const restore_config = () => this.viewer.restore({ ...viewerConfig });
-        if (this._is_table_loaded) {
-            return restore_config();
-        } else {
-            this._restore_config = restore_config;
-        }
+        this._is_pivoted = (config.group_by?.length || 0) > 0;
+        return this.viewer.restore({ ...config });
     }
 
     async save() {
         let config = {
             ...(await this.viewer.save()),
-            table: this.viewer.getAttribute("table"),
         };
 
         delete config["settings"];
         return config;
     }
 
+    addClass(name: string) {
+        super.addClass(name);
+        this.viewer?.classList?.add?.(name);
+    }
+
     removeClass(name: string) {
         super.removeClass(name);
-        this.viewer && this.viewer.classList.remove(name);
+        this.viewer?.classList?.remove?.(name);
     }
 
-    async onCloseRequest(msg: Message) {
-        super.onCloseRequest(msg);
-        if (this.viewer.parentElement) {
-            this.viewer.parentElement.removeChild(this.viewer);
-        }
+    setCallback(callback?: (event: MouseEvent) => {}) {
+        this._titlebar_callback = callback;
+    }
 
-        await this.viewer.delete();
+    protected onAfterAttach(msg: Message) {
+        super.onAfterAttach(msg);
+        this._onAttach?.();
+    }
+
+    onCloseRequest(msg: Message) {
+        super.onCloseRequest(msg);
+        return (async () => {
+            if (this.viewer.parentElement) {
+                this.viewer.parentElement.removeChild(this.viewer);
+            }
+
+            if (!this._deleted) {
+                await this.viewer.delete();
+                this._deleted = true;
+            }
+        })();
     }
 }