@perspective-dev/workspace 4.0.0

package/src/ts/utils/observable_map.ts

@@ -0,0 +1,39 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+export class ObservableMap<K, V> extends Map<K, V> {
+    _set_listener?: (name: K, val: V) => void;
+    _delete_listener?: (name: K) => void;
+
+    set(name: K, item: V) {
+        this._set_listener?.(name, item);
+        super.set(name, item);
+        return this;
+    }
+
+    get(name: K): V {
+        return super.get(name)!;
+    }
+
+    delete(name: K) {
+        this._delete_listener?.(name);
+        return super.delete(name);
+    }
+
+    addSetListener(listener: (name: K, val: V) => void) {
+        this._set_listener = listener;
+    }
+
+    addDeleteListener(listener: (name: K) => void) {
+        this._delete_listener = listener;
+    }
+}

package/src/ts/workspace/commands.ts

@@ -0,0 +1,269 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { CommandRegistry } from "@lumino/commands";
+import { Menu, Widget } from "@lumino/widgets";
+import { Signal } from "@lumino/signaling";
+
+import type {
+    HTMLPerspectiveViewerCopyMenu,
+    HTMLPerspectiveViewerExportMenu,
+} from "@perspective-dev/viewer";
+
+import type { PerspectiveWorkspace } from "./workspace";
+import { WorkspaceMenu } from "./menu";
+
+export const createCommands = (
+    workspace: PerspectiveWorkspace,
+    indicator: HTMLElement,
+) => {
+    const commands = new CommandRegistry();
+
+    commands.addCommand("workspace:export", {
+        execute: async (args) => {
+            const menu = document.createElement(
+                "perspective-export-menu",
+            ) as unknown as HTMLPerspectiveViewerExportMenu;
+
+            workspace.apply_indicator_theme();
+            const widget = workspace.getWidgetByName(
+                args.widget_name as string,
+            )!;
+
+            menu.set_model(widget.viewer.get_model());
+            menu.open(indicator);
+            workspace.get_context_menu()?.init_overlay?.();
+            menu.addEventListener("blur", () => {
+                const context_menu = workspace.get_context_menu()!;
+                const signal = context_menu.aboutToClose as Signal<
+                    WorkspaceMenu,
+                    any
+                >;
+                signal.emit({});
+            });
+        },
+        isEnabled: (args) => {
+            if (workspace.get_context_menu()?.node.isConnected) {
+                const box = workspace
+                    .get_context_menu()
+                    ?.node.getBoundingClientRect();
+
+                if (box) {
+                    indicator.style.top = box.top + "px";
+                    indicator.style.left = box.left + "px";
+                }
+            }
+
+            return true;
+        },
+        // iconClass: "menu-export",
+        label: "Export",
+        mnemonic: 0,
+    });
+
+    commands.addCommand("workspace:copy", {
+        execute: async (args) => {
+            const menu = document.createElement(
+                "perspective-copy-menu",
+            ) as HTMLPerspectiveViewerCopyMenu;
+
+            workspace.apply_indicator_theme();
+            const widget = workspace.getWidgetByName(
+                args.widget_name as string,
+            )!;
+            menu.set_model(widget.viewer.get_model());
+
+            menu.open(indicator);
+            workspace.get_context_menu()?.init_overlay?.();
+            menu.addEventListener("blur", () => {
+                (
+                    workspace.get_context_menu()?.aboutToClose as
+                        | Signal<WorkspaceMenu, any>
+                        | undefined
+                )?.emit({});
+            });
+        },
+        isEnabled: (_) => {
+            if (workspace.get_context_menu()?.node.isConnected) {
+                const box = workspace
+                    .get_context_menu()
+                    ?.node.getBoundingClientRect();
+
+                if (box) {
+                    indicator.style.top = box.top + "px";
+                    indicator.style.left = box.left + "px";
+                }
+            }
+
+            return true;
+        },
+        // iconClass: "menu-copy",
+        label: "Copy",
+        mnemonic: 0,
+    });
+
+    commands.addCommand("workspace:new", {
+        execute: (args) => {
+            const widget = workspace._createWidgetAndNode({
+                config: { table: args.table as string },
+                slot: undefined,
+            });
+
+            workspace.get_dock_panel().addWidget(widget, {
+                mode: "split-right",
+                ref: workspace.getWidgetByName(args.widget_name as string),
+            });
+        },
+        // iconClass: "menu-new-tables",
+        label: (args) => {
+            return args.table as string;
+        },
+    });
+
+    commands.addCommand("workspace:newview", {
+        execute: async (args) => {
+            const widget = workspace.getWidgetByName(
+                args.widget_name as string,
+            );
+
+            const target_widget = workspace.getWidgetByName(
+                args.target_widget_name as string,
+            )!;
+
+            const config = await target_widget.save();
+            const new_widget = workspace._createWidgetAndNode({
+                config,
+                slot: undefined,
+            });
+
+            workspace.get_dock_panel().addWidget(new_widget, {
+                mode: "split-right",
+                ref: widget,
+            });
+        },
+        // iconClass: "menu-new-tables",
+        isVisible: (args) => {
+            const target_widget = workspace.getWidgetByName(
+                args.target_widget_name as string,
+            )!;
+
+            return target_widget.title.label !== "";
+        },
+        label: (args) => {
+            const target_widget = workspace.getWidgetByName(
+                args.target_widget_name as string,
+            )!;
+
+            return target_widget.title.label || "untitled";
+        },
+    });
+
+    commands.addCommand("workspace:reset", {
+        execute: (args) => {
+            workspace
+                .getWidgetByName(args.widget_name as string)!
+                .viewer.reset();
+        },
+        label: "Reset",
+        mnemonic: 0,
+    });
+
+    commands.addCommand("workspace:settings", {
+        execute: async ({ widget_name }) => {
+            const widget = workspace.getWidgetByName(widget_name as string);
+            if (!widget) {
+                throw new Error(`No widget ${widget_name}`);
+            }
+
+            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)
+                ? true
+                : false;
+        },
+        label: (args) => {
+            const widget = workspace.getWidgetByName(
+                args.widget_name as string,
+            )!;
+            if (widget.viewer.hasAttribute("settings")) {
+                return "Close Settings";
+            } else {
+                return "Open Settings";
+            }
+        },
+        mnemonic: 0,
+    });
+
+    commands.addCommand("workspace:duplicate", {
+        execute: ({ widget_name }) =>
+            workspace.duplicate(
+                workspace.getWidgetByName(widget_name as string)!,
+            ),
+        // iconClass: "menu-duplicate",
+        isVisible: (args) => {
+            return workspace.getWidgetByName(args.widget_name as string)!
+                .parent! === (workspace.get_dock_panel() as Widget)
+                ? true
+                : false;
+        },
+        label: "Duplicate",
+        mnemonic: 0,
+    });
+
+    commands.addCommand("workspace:master", {
+        execute: (args) =>
+            workspace.toggleMasterDetail(
+                workspace.getWidgetByName(args.widget_name as string)!,
+            ),
+        isVisible: (args) => {
+            return !!workspace.getWidgetByName(args.widget_name as string)
+                ?._is_pivoted;
+        },
+
+        label: (args) => {
+            return workspace.getWidgetByName(args.widget_name as string)!
+                .parent === workspace.get_dock_panel()
+                ? "Create Global Filter"
+                : "Remove Global Filter";
+        },
+        mnemonic: 0,
+    });
+
+    commands.addCommand("workspace:close", {
+        execute: (args) => {
+            workspace.getWidgetByName(args.widget_name as string)!.close();
+        },
+        // iconClass: "menu-close",
+        label: () => "Close",
+        mnemonic: 0,
+    });
+
+    commands.addCommand("workspace:help", {
+        // iconClass: "menu-close",
+        execute: () => {},
+        label: "Shift+Click for Browser Menu",
+        isEnabled: () => false,
+        // mnemonic: 0,
+    });
+
+    return commands;
+};

package/src/ts/workspace/dockpanel.ts

@@ -0,0 +1,145 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { DockLayout, DockPanel, TabBar, Widget } from "@lumino/widgets";
+import { PerspectiveTabBar } from "./tabbar";
+import { PerspectiveTabBarRenderer } from "./tabbarrenderer";
+import { PerspectiveWorkspace } from "./workspace";
+import { PerspectiveViewerWidget } from "./widget";
+
+class PerspectiveDockPanelRenderer extends DockPanel.Renderer {
+    _workspace: PerspectiveWorkspace;
+
+    constructor(workspace: PerspectiveWorkspace) {
+        super();
+        this._workspace = workspace;
+    }
+
+    createTabBar() {
+        const tabbar = new PerspectiveTabBar(this._workspace, {
+            renderer: new PerspectiveTabBarRenderer(false),
+        });
+
+        tabbar.addClass("lm-DockPanel-tabBar");
+        return tabbar;
+    }
+}
+
+// @ts-ignore: extending a private member `_onTabDetachRequested`
+export class PerspectiveDockPanel extends DockPanel {
+    constructor(workspace: PerspectiveWorkspace) {
+        super({ renderer: new PerspectiveDockPanelRenderer(workspace) });
+
+        // @ts-ignore: accessing a private member `_renderer`
+        this._renderer.dock = this;
+    }
+
+    _onTabDetachRequested(
+        sender: TabBar<Widget>,
+        args: TabBar.ITabDetachRequestedArgs<Widget>,
+    ) {
+        // @ts-ignore: accessing a private member `_onTabDetachRequested`
+        super._onTabDetachRequested(sender, args);
+
+        // blur widget on when it's being moved
+        const widget = sender.titles[args.index].owner;
+        const layout = this.layout as DockLayout;
+        const old = layout.saveLayout();
+        if (Array.from(layout.widgets()).length > 1) {
+            layout.removeWidget(widget);
+        }
+
+        widget.addClass("widget-blur");
+        document.body.classList.add("lm-mod-override-cursor");
+
+        // @ts-ignore: accessing a private member `_drag`
+        const drag = this._drag;
+        if (drag) {
+            drag.dragImage?.parentElement.removeChild(drag.dragImage);
+            drag.dragImage = null;
+            drag._promise.then(() => {
+                if (!widget.node.isConnected) {
+                    layout.restoreLayout(old);
+                }
+
+                document.body.classList.remove("lm-mod-override-cursor");
+                widget.removeClass("widget-blur");
+            });
+        }
+    }
+
+    static getWidgets(
+        layout: DockPanel.ILayoutConfig,
+    ): PerspectiveViewerWidget[] {
+        if (!!layout.main) {
+            return PerspectiveDockPanel.getAreaWidgets(layout.main);
+        } else {
+            return [];
+        }
+    }
+
+    static getAreaWidgets(
+        layout: DockLayout.AreaConfig,
+    ): PerspectiveViewerWidget[] {
+        if (layout?.hasOwnProperty("children")) {
+            const split_panel = layout as DockLayout.ISplitAreaConfig;
+            return split_panel.children.flatMap((widget) =>
+                PerspectiveDockPanel.getAreaWidgets(widget),
+            );
+        } else if (layout?.hasOwnProperty("widgets")) {
+            const tab_panel = layout as DockLayout.ITabAreaConfig;
+            return tab_panel.widgets as PerspectiveViewerWidget[];
+        }
+
+        return [];
+    }
+
+    widgets(): IterableIterator<PerspectiveViewerWidget> {
+        return super.widgets() as IterableIterator<PerspectiveViewerWidget>;
+    }
+
+    static mapWidgets(
+        widgetFunc: (widget: any) => any,
+        layout: any,
+    ): DockPanel.ILayoutConfig {
+        if (!!layout.main) {
+            layout.main = PerspectiveDockPanel.mapAreaWidgets(
+                widgetFunc,
+                layout.main,
+            );
+        }
+
+        return layout;
+    }
+
+    static mapAreaWidgets(
+        widgetFunc: (widget: any) => any,
+        layout: DockLayout.AreaConfig,
+    ): 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),
+            );
+        } else if (layout.hasOwnProperty("widgets")) {
+            const tab_panel = layout as DockLayout.ITabAreaConfig;
+            tab_panel.widgets = tab_panel.widgets.map(widgetFunc);
+        }
+
+        return layout;
+    }
+
+    onAfterAttach() {
+        this.spacing =
+            parseInt(window.getComputedStyle(this.node).padding) || 0;
+    }
+}

package/src/ts/workspace/index.ts

@@ -0,0 +1,13 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+export * from "./workspace";

package/src/ts/workspace/menu.ts

@@ -0,0 +1,213 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { ElementExt } from "@lumino/domutils";
+import { MessageLoop } from "@lumino/messaging";
+import { h } from "@lumino/virtualdom";
+import { Menu, Widget } from "@lumino/widgets";
+
+export class WorkspaceMenu extends Menu {
+    private _host: ShadowRoot;
+    private _workspace: HTMLElement;
+    init_overlay?: () => void;
+
+    constructor(
+        host: ShadowRoot,
+        workspace: HTMLElement,
+        options: Menu.IOptions,
+    ) {
+        options.renderer = new MenuRenderer();
+        super(options);
+        this._host = host;
+        this._workspace = workspace;
+        (this as any)._openChildMenu = this._overrideOpenChildMenu.bind(this);
+    }
+
+    open(x: number, y: number, options?: Menu.IOpenOptions) {
+        options ||= {};
+        options.host = this._host as any as HTMLElement;
+        const box = this._workspace.getBoundingClientRect();
+        super.open(x, y, options);
+        const menu_box = this.node.getBoundingClientRect();
+        if (
+            menu_box.height + y > box.height &&
+            menu_box.height + y < document.documentElement.clientHeight
+        ) {
+            this.node.style.top = `-${menu_box.height}`;
+        }
+
+        if (menu_box.width + x > box.width) {
+            if (menu_box.width + x < document.documentElement.clientWidth) {
+                this.node.style.left = `-${menu_box.width + x - box.width}px`;
+            } else {
+                this.node.style.left = `-${
+                    document.documentElement.clientWidth - box.width
+                }px`;
+            }
+        }
+    }
+
+    // Override this lumino private method because it will otherwise always
+    // attach to `document.body`.
+    private _overrideOpenChildMenu(activateFirst = false) {
+        const self = this as any;
+        let item = this.activeItem;
+        if (!item || item.type !== "submenu" || !item.submenu) {
+            self._closeChildMenu();
+            return;
+        }
+
+        let submenu = item.submenu;
+        if (submenu === self._childMenu) {
+            return;
+        }
+
+        Menu.saveWindowData();
+        self._closeChildMenu();
+        self._childMenu = submenu;
+        self._childIndex = self._activeIndex;
+        (submenu as any)._parentMenu = this;
+        MessageLoop.sendMessage(this, Widget.Msg.UpdateRequest);
+        let itemNode = this.contentNode.children[self._activeIndex];
+        openSubmenu(submenu, itemNode as HTMLElement, self._host);
+        if (activateFirst) {
+            submenu.activeIndex = -1;
+            submenu.activateNextItem();
+        }
+
+        submenu.activate();
+    }
+}
+
+class MenuRenderer extends Menu.Renderer {
+    formatLabel(data: Menu.IRenderData) {
+        let { label, mnemonic } = data.item;
+        if (mnemonic < 0 || mnemonic >= label.length) {
+            return label;
+        }
+
+        let prefix = label.slice(0, mnemonic);
+        let suffix = label.slice(mnemonic + 1);
+        let char = label[mnemonic];
+        let span = h.span(
+            {
+                className: "lm-Menu-itemMnemonic p-Menu-itemMnemonic",
+            },
+            char,
+        );
+
+        return [prefix, span, suffix];
+    }
+
+    renderLabel(data: Menu.IRenderData) {
+        let content = this.formatLabel(data);
+        return h.div(
+            {
+                className: "lm-Menu-itemLabel p-Menu-itemLabel",
+            },
+            content,
+        );
+    }
+
+    renderSubmenu(data: Menu.IRenderData) {
+        return h.div({
+            className: "lm-Menu-itemSubmenuIcon" + " p-Menu-itemSubmenuIcon",
+        });
+    }
+
+    renderItem(data: Menu.IRenderData) {
+        let className = this.createItemClass(data);
+        let dataset = this.createItemDataset(data);
+        let aria = this.createItemARIA(data);
+        return h.li(
+            {
+                className,
+                dataset,
+                tabindex: "0",
+                onfocus: data.onfocus,
+                ...aria,
+            },
+            this.renderLabel(data),
+            this.renderShortcut(data),
+            this.renderSubmenu(data),
+        );
+    }
+}
+
+// Prevent submenus from attaching outside the Shadow DOM.
+// Forked from [Lumino](https://github.com/jupyterlab/lumino/blob/main/packages/widgets/src/menu.ts).
+// [License](https://github.com/jupyterlab/lumino/blob/main/LICENSE)
+export function openSubmenu(
+    submenu: Menu,
+    itemNode: HTMLElement,
+    host: HTMLElement,
+): void {
+    const windowData = getWindowData();
+    let px = windowData.pageXOffset;
+    let py = windowData.pageYOffset;
+    let cw = windowData.clientWidth;
+    let ch = windowData.clientHeight;
+    const hostData = (host as any).host.getBoundingClientRect();
+    let hx = hostData.x;
+    let hy = hostData.y;
+    MessageLoop.sendMessage(submenu, Widget.Msg.UpdateRequest);
+    let maxHeight = ch;
+    let node = submenu.node;
+    let style = node.style;
+    style.opacity = "0";
+    style.maxHeight = `${maxHeight}px`;
+    Widget.attach(submenu, host);
+    let { width, height } = node.getBoundingClientRect();
+    let box = ElementExt.boxSizing(submenu.node);
+    let itemRect = itemNode.getBoundingClientRect();
+    let x = itemRect.right - SUBMENU_OVERLAP - hx;
+    if (x + width > px + cw + hx) {
+        x = itemRect.left + SUBMENU_OVERLAP - width;
+    }
+
+    let y = itemRect.top - box.borderTop - box.paddingTop - hy;
+    if (y + height > py + ch + hy) {
+        y = itemRect.bottom + box.borderBottom + box.paddingBottom - height;
+    }
+
+    style.transform = `translate(${Math.max(0, x)}px, ${Math.max(0, y)}px`;
+    style.opacity = "1";
+}
+
+export const SUBMENU_OVERLAP = 3;
+
+let transientWindowDataCache: IWindowData | null = null;
+let transientCacheCounter: number = 0;
+
+function getWindowData(): IWindowData {
+    if (transientCacheCounter > 0) {
+        transientCacheCounter--;
+        return transientWindowDataCache!;
+    }
+    return _getWindowData();
+}
+
+function _getWindowData(): IWindowData {
+    return {
+        pageXOffset: window.pageXOffset,
+        pageYOffset: window.pageYOffset,
+        clientWidth: document.documentElement.clientWidth,
+        clientHeight: document.documentElement.clientHeight,
+    };
+}
+
+interface IWindowData {
+    pageXOffset: number;
+    pageYOffset: number;
+    clientWidth: number;
+    clientHeight: number;
+}