@hpcc-js/phosphor 3.7.1 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/phosphor",
-    "version": "3.7.1",
+    "version": "3.8.0",
     "description": "hpcc-js - Viz Phosphor",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -39,10 +39,10 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^3.8.1"
+        "@hpcc-js/common": "^3.8.2"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.9.1",
+        "@hpcc-js/esbuild-plugins": "^1.9.2",
         "@lumino/algorithm": "2.0.4",
         "@lumino/commands": "2.3.3",
         "@lumino/messaging": "2.0.4",
@@ -59,5 +59,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "0cfcae9b4ccbd0b3c9f21381f4581bf121392585"
+    "gitHead": "9d31241482c78decca86e3bf624244ce5b40f3d6"
 }

package/src/BasePanel.ts

@@ -0,0 +1,87 @@
+import { HTMLWidget, Widget, Utility } from "@hpcc-js/common";
+import { Widget as PWidget, IMessageHandler, IMessageHook, Message, MessageLoop } from "./phosphor-shim.ts";
+import { Msg, WidgetAdapter, WidgetAdapterArray } from "./WidgetAdapter.ts";
+
+export namespace BasePanel {
+    export interface IAddWidgetOptions {
+        /** Minimum size in pixels */
+        minSize?: number;
+        /** Preferred/default size in pixels — used as initial size hint */
+        defaultSize?: number;
+        /** Inner padding in pixels (default 8) */
+        padding?: number;
+
+        /** Reference widget for split/tab positioning */
+        refWidget?: Widget;
+    }
+}
+
+export abstract class BasePanel extends HTMLWidget implements IMessageHandler, IMessageHook {
+
+    protected abstract _content: WidgetAdapterArray;
+
+    constructor() {
+        super();
+        this._tag = "div";
+        MessageLoop.installMessageHook(this, this);
+    }
+
+    getWidget(wa: PWidget): Widget | undefined {
+        if (wa instanceof WidgetAdapter) {
+            return wa.widget;
+        }
+    }
+
+    getWidgetAdapter(widget: Widget): WidgetAdapter | null {
+        let retVal = null;
+        this._content.some(wa => {
+            if (wa.widget === widget) {
+                retVal = wa;
+                return true;
+            }
+            return false;
+        });
+        return retVal;
+    }
+
+    protected _prevActive: Widget;
+    active(): Widget {
+        return this._prevActive;
+    }
+
+    //  Phosphor Messaging  ---
+    protected _lazyLayoutChanged = Utility.debounce(async () => {
+        this.layoutChanged();
+    }, 1000);
+
+    processMessage(msg: Message): void {
+        switch (msg.type) {
+            case Msg.WAActivateRequest.type:
+                const wa = (msg as Msg.WAActivateRequest).wa;
+                const widget = wa.widget;
+                if (this._prevActive !== widget) {
+                    this._prevActive = widget;
+                    this.childActivation(widget, wa);
+                }
+                break;
+            case Msg.WALayoutChanged.type:
+                this._lazyLayoutChanged();
+                break;
+        }
+    }
+
+    messageHook(handler: IMessageHandler, msg: Message): boolean {
+        if (handler === this) {
+            this.processMessage(msg);
+        }
+        return true;
+    }
+
+    //  Events  ---
+    childActivation(w: Widget, wa: WidgetAdapter) {
+    }
+
+    layoutChanged() {
+    }
+
+}

package/src/DockPanel.ts

@@ -1,43 +1,144 @@
-import { HTMLWidget, Widget, Utility, select as d3Select } from "@hpcc-js/common";
-import { DockPanel as PhosphorDockPanel, IMessageHandler, IMessageHook, Message, MessageLoop, Widget as PWidget } from "./phosphor-shim.ts";
+import { Widget, select as d3Select } from "@hpcc-js/common";
+import { BasePanel } from "./BasePanel.ts";
+import { DockLayout, DockPanel as PhosphorDockPanel, MessageLoop, Widget as PWidget } from "./phosphor-shim.ts";
+import { IClosable, WidgetAdapter } from "./WidgetAdapter.ts";
 import { PDockPanel } from "./PDockPanel.ts";
-import { IClosable, Msg, WidgetAdapter } from "./WidgetAdapter.ts";
 
 import "../src/DockPanel.css";
 
-export class DockPanel extends HTMLWidget implements IMessageHandler, IMessageHook {
+export namespace DockPanel {
+    export interface IAddWidgetOptions extends BasePanel.IAddWidgetOptions {
+        /** Tab title */
+        title?: string;
+        /** Insertion mode relative to refWidget */
+        location?: PhosphorDockPanel.InsertMode;
+        /** Whether the tab can be closed */
+        closable?: boolean | IClosable;
+    }
+}
+
+export class DockPanel extends BasePanel {
     private _dock = new PDockPanel({ mode: "multiple-document" });
+    protected _content = this._dock.content();
 
     constructor() {
         super();
-        this._tag = "div";
         this._dock.id = "p" + this.id();
-        MessageLoop.installMessageHook(this, this);
     }
 
-    protected getWidgetAdapter(widget: Widget): WidgetAdapter | null {
-        let retVal = null;
-        this._dock.content().some(wa => {
-            if (wa.widget === widget) {
-                retVal = wa;
-                return true;
-            }
-            return false;
-        });
-        return retVal;
-    }
+    private _pendingDefaults: Map<WidgetAdapter, { defaultSize?: number }> = new Map();
+    addWidget(widget: Widget, options: DockPanel.IAddWidgetOptions): this;
+    /** @deprecated Use options object form instead */
+    addWidget(widget: Widget, title: string, location?: PhosphorDockPanel.InsertMode, refWidget?: Widget, closable?: boolean | IClosable, padding?: number): this;
+    addWidget(widget: Widget, titleOrOptions: string | DockPanel.IAddWidgetOptions, location: PhosphorDockPanel.InsertMode = "split-right", refWidget?: Widget, closable?: boolean | IClosable, padding: number = 8) {
+        const opts: DockPanel.IAddWidgetOptions = typeof titleOrOptions === "string"
+            ? { title: titleOrOptions, location, refWidget, closable, padding }
+            : titleOrOptions;
 
-    addWidget(widget: Widget, title: string, location: PhosphorDockPanel.InsertMode = "split-right", refWidget?: Widget, closable?: boolean | IClosable, padding: number = 8) {
-        const addMode: PhosphorDockPanel.IAddOptions = { mode: location, ref: this.getWidgetAdapter(refWidget) };
-        const wa = new WidgetAdapter(this, widget, {}, closable);
+        const {
+            title = "",
+            location: loc = "split-right",
+            refWidget: ref,
+            closable: canClose,
+            padding: pad = 8,
+            minSize,
+            defaultSize
+        } = opts;
+
+        const addMode: PhosphorDockPanel.IAddOptions = { mode: loc, ref: this.getWidgetAdapter(ref) };
+        const wa = new WidgetAdapter(this, widget, {}, canClose);
         wa.title.label = title;
-        wa.padding = padding;
+        wa.padding = pad;
+
+        if (minSize != null) {
+            const style = wa.node.style;
+            if (loc === "split-left" || loc === "split-right") {
+                style.minWidth = `${minSize}px`;
+            } else {
+                style.minHeight = `${minSize}px`;
+            }
+        }
+
         this._dock.addWidget(wa, addMode);
         this._dock.appendContent(wa);
         this._dock.tabsMovable = true;
+
+        if (defaultSize != null) {
+            this._pendingDefaults.set(wa, { defaultSize });
+        }
+
         return this;
     }
 
+    private _applyPendingDefaults() {
+        if (this._pendingDefaults.size === 0) return;
+
+        const config = this._dock.saveLayout() as DockLayout.ILayoutConfig;
+        if (!config.main) {
+            this._pendingDefaults.clear();
+            return;
+        }
+
+        // Build a lookup: widgetId → { defaultSize }
+        const lookup = new Map<string, { defaultSize?: number }>();
+        for (const [wa, defaults] of this._pendingDefaults) {
+            lookup.set(wa.widget.id(), defaults);
+        }
+        this._pendingDefaults.clear();
+
+        const containerWidth = this.width();
+        const containerHeight = this.height();
+
+        const applySizes = (area: DockLayout.AreaConfig, availWidth: number, availHeight: number): void => {
+            if (!area || area.type !== "split-area") return;
+
+            const isHorizontal = area.orientation === "horizontal";
+            const totalSpace = isHorizontal ? availWidth : availHeight;
+            const n = area.children.length;
+
+            // Collect requested pixel sizes per child
+            let usedSpace = 0;
+            let flexCount = 0;
+            const pixelSizes: (number | null)[] = area.children.map((child, i) => {
+                if (child.type === "tab-area") {
+                    for (const w of (child as any).widgets) {
+                        const defaults = lookup.get(w?.__id);
+                        if (defaults) {
+                            const size = defaults.defaultSize;
+                            if (size != null) {
+                                usedSpace += size;
+                                return size;
+                            }
+                        }
+                    }
+                }
+                flexCount++;
+                return null;
+            });
+
+            // Only apply if at least one child has a default
+            if (flexCount < n) {
+                const remainingSpace = Math.max(0, totalSpace - usedSpace);
+                const flexSize = flexCount > 0 ? remainingSpace / flexCount : 0;
+                area.sizes = pixelSizes.map(px => px != null ? px : flexSize);
+            }
+
+            // Recurse into nested split areas with their allocated portion
+            for (let i = 0; i < area.children.length; i++) {
+                const child = area.children[i];
+                if (child.type === "split-area") {
+                    const ratio = area.sizes[i] / (area.sizes.reduce((a, b) => a + b, 0) || 1);
+                    const childW = isHorizontal ? availWidth * ratio : availWidth;
+                    const childH = isHorizontal ? availHeight : availHeight * ratio;
+                    applySizes(child, childW, childH);
+                }
+            }
+        };
+
+        applySizes(config.main, containerWidth, containerHeight);
+        this._dock.restoreLayout(config as any);
+    }
+
     removeWidget(widget: Widget) {
         const wa = this.getWidgetAdapter(widget);
         if (wa) {
@@ -74,25 +175,16 @@ export class DockPanel extends HTMLWidget implements IMessageHandler, IMessageHo
         return this;
     }
 
-    private _pPlaceholder;
     enter(domNode, element) {
         super.enter(domNode, element);
-        this._pPlaceholder = element.append("div");
-        PWidget.attach(this._dock, this._pPlaceholder.node());
+        PWidget.attach(this._dock, domNode);
     }
 
     _prevHideSingleTabs;
     update(domNode, element) {
         super.update(domNode, element);
-
-        this._pPlaceholder
-            .style("width", this.width() + "px")
-            .style("height", this.height() + "px")
-            .style("overflow", "hidden")
-            ;
-
         element.select(".lm-Widget")
-            .style("width", this._pPlaceholder.node().clientWidth + "px")
+            .style("width", this.width() + "px")
             .style("height", this.height() + "px")
             ;
 
@@ -100,8 +192,21 @@ export class DockPanel extends HTMLWidget implements IMessageHandler, IMessageHo
     }
 
     exit(domNode, element) {
+        if (this._dock.isAttached) {
+            if (this._dock.node.isConnected) {
+                // Proper Lumino detach — propagates AfterDetach to all children
+                // (TabBars etc.), clearing their isAttached flags before disposal.
+                PWidget.detach(this._dock);
+            } else {
+                // The DOM node has already been removed from the document by the
+                // parent framework (e.g. React unmount).  We cannot call the
+                // static Widget.detach() because it guards against !isConnected,
+                // so manually broadcast AfterDetach so that Lumino's isAttached
+                // bookkeeping is consistent before we dispose child widgets.
+                MessageLoop.sendMessage(this._dock, PWidget.Msg.AfterDetach);
+            }
+        }
         [...this.widgets()].forEach(w => this.removeWidget(w));
-        PWidget.detach(this._dock);
         super.exit(domNode, element);
     }
 
@@ -112,6 +217,7 @@ export class DockPanel extends HTMLWidget implements IMessageHandler, IMessageHo
             this.layoutObj(null);
         }
         return super.render((w) => {
+            this._applyPendingDefaults();
             this._dock.content().watchRendered(this, callback);
             this._dock.update();
             setTimeout(() => {
@@ -137,39 +243,6 @@ export class DockPanel extends HTMLWidget implements IMessageHandler, IMessageHo
         this._dock.fit();
     }
 
-    //  Phosphor Messaging  ---
-    messageHook(handler: IMessageHandler, msg: Message): boolean {
-        if (handler === this) {
-            this.processMessage(msg);
-        }
-        return true;
-    }
-
-    private _lazyLayoutChanged = Utility.debounce(async () => {
-        this.layoutChanged();
-    }, 1000);
-
-    _prevActive: Widget;
-    processMessage(msg: Message): void {
-        switch (msg.type) {
-            case Msg.WAActivateRequest.type:
-                const wa = (msg as Msg.WAActivateRequest).wa;
-                const widget = wa.widget;
-                if (this._prevActive !== widget) {
-                    this._prevActive = widget;
-                    this.childActivation(widget, wa);
-                }
-                break;
-            case Msg.WALayoutChanged.type:
-                this._lazyLayoutChanged();
-                break;
-        }
-    }
-
-    active(): Widget {
-        return this._prevActive;
-    }
-
     //  Events  ---
     childActivation(w: Widget, wa: WidgetAdapter) {
     }

package/src/SplitPanel.ts

@@ -1,36 +1,61 @@
 import { HTMLWidget, SVGWidget, Widget } from "@hpcc-js/common";
-import { Message, SplitPanel as PSplitPanel, Widget as PWidget } from "./phosphor-shim.ts";
-import { Msg, WidgetAdapter, WidgetAdapterArray } from "./WidgetAdapter.ts";
+import { BasePanel } from "./BasePanel.ts";
+import { SplitPanel as PSplitPanel, Widget as PWidget } from "./phosphor-shim.ts";
+import { WidgetAdapter, WidgetAdapterArray } from "./WidgetAdapter.ts";
 
 import "../src/DockPanel.css";
 
-export class SplitPanel extends HTMLWidget {
+export namespace SplitPanel {
+
+    export interface IAddWidgetOptions extends BasePanel.IAddWidgetOptions {
+        /** Maximum size in pixels */
+        maxSize?: number;
+    }
+}
+
+export class SplitPanel extends BasePanel {
     private _split: PSplitPanel;
-    private content = WidgetAdapterArray.create();
+    protected _content = WidgetAdapterArray.create();
 
-    constructor(orientation: "horizontal" | "vertical" = "vertical") {
+    constructor(readonly _orientation: "horizontal" | "vertical" = "vertical") {
         super();
-        this._split = new PSplitPanel({ orientation });
-        this._tag = "div";
+        this._split = new PSplitPanel({ orientation: _orientation });
         this._split.id = "p" + this.id();
     }
 
-    protected getWidgetAdapter(widget: Widget): WidgetAdapter | null {
-        let retVal = null;
-        this.content.some(wa => {
-            if (wa.widget === widget) {
-                retVal = wa;
-                return true;
+    private _pendingDefaults: Map<number, { defaultSize?: number }> = new Map();
+    addWidget(widget: SVGWidget | HTMLWidget, options?: SplitPanel.IAddWidgetOptions): this {
+        const opts = options || {};
+        const wa = new WidgetAdapter(this, widget);
+        wa.padding = opts.padding ?? 0;
+
+        if (opts.minSize != null || opts.maxSize != null) {
+            const style = wa.node.style;
+            if (opts.minSize != null) {
+                if (this._orientation === "horizontal") {
+                    style.minWidth = `${opts.minSize}px`;
+                } else {
+                    style.minHeight = `${opts.minSize}px`;
+                }
             }
-            return false;
-        });
-        return retVal;
-    }
+            if (opts.maxSize != null) {
+                if (this._orientation === "horizontal") {
+                    style.maxWidth = `${opts.maxSize}px`;
+                } else {
+                    style.maxHeight = `${opts.maxSize}px`;
+                }
+            }
+        }
 
-    addWidget(widget: SVGWidget | HTMLWidget) {
-        const wa = new WidgetAdapter(this, widget);
         this._split.addWidget(wa);
-        this.content.push(wa);
+        this._content.push(wa);
+
+        if (opts.defaultSize != null) {
+            this._pendingDefaults.set(this._content.length - 1, {
+                defaultSize: opts.defaultSize
+            });
+        }
+
         return this;
     }
 
@@ -62,26 +87,51 @@ export class SplitPanel extends HTMLWidget {
 
     render(callback?: (w: Widget) => void): this {
         return super.render(w => {
-            this.content.watchRendered(this, callback);
+            this._applyPendingDefaults();
+            this._content.watchRendered(this, callback);
             this._split.update();
         });
     }
 
-    private _prevActive: Widget;
-    processMessage(msg: Message): void {
-        switch (msg.type) {
-            case "wa-activate-request":
-                const widget = (msg as Msg.WAActivateRequest).wa.widget;
-                if (this._prevActive !== widget) {
-                    this._prevActive = widget;
-                    this.childActivation(widget);
+    private _applyPendingDefaults() {
+        if (this._pendingDefaults.size === 0) return;
+
+        const isHorizontal = this._orientation === "horizontal";
+        const totalSpace = isHorizontal ? this.width() : this.height();
+        const n = this._content.length;
+
+        let usedSpace = 0;
+        let flexCount = 0;
+        const pixelSizes: (number | null)[] = [];
+
+        for (let i = 0; i < n; i++) {
+            const defaults = this._pendingDefaults.get(i);
+            if (defaults) {
+                const size = defaults.defaultSize;
+                if (size != null) {
+                    pixelSizes.push(size);
+                    usedSpace += size;
+                    continue;
                 }
-                break;
+            }
+            pixelSizes.push(null);
+            flexCount++;
         }
+
+        this._pendingDefaults.clear();
+
+        const remainingSpace = Math.max(0, totalSpace - usedSpace);
+        const flexSize = flexCount > 0 ? remainingSpace / flexCount : 0;
+        const sizes = pixelSizes.map(px => px != null ? px : flexSize);
+        this._split.setRelativeSizes(sizes);
     }
 
-    // Events ---
-    childActivation(w: Widget) {
+    //  Events  ---
+    childActivation(w: Widget, wa: WidgetAdapter) {
+    }
+
+    layoutChanged() {
     }
 }
 SplitPanel.prototype._class += " phosphor_SplitPanel";
+

package/src/TabPanel.ts

@@ -1,55 +1,63 @@
 import { HTMLWidget, SVGWidget, Widget } from "@hpcc-js/common";
-import { IMessageHandler, Message, TabPanel as PTabPanel, Widget as PWidget } from "./phosphor-shim.ts";
-import { Msg, WidgetAdapter, WidgetAdapterArray, WidgetAdapterExt } from "./WidgetAdapter.ts";
+import { BasePanel } from "./BasePanel.ts";
+import { TabPanel as PTabPanel, Widget as PWidget } from "./phosphor-shim.ts";
+import { WidgetAdapter, WidgetAdapterArray, WidgetAdapterExt } from "./WidgetAdapter.ts";
 
 import "../src/DockPanel.css";
 
-export class TabPanel extends HTMLWidget {
+export namespace TabPanel {
+
+    export interface IAddWidgetOptions {
+        /** Inner padding in pixels (default 8) */
+        padding?: number;
+        /** Tab title */
+        title?: string;
+        /** Widget adapter extensions (overflow settings) */
+        ext?: WidgetAdapterExt;
+    }
+}
+
+export class TabPanel extends BasePanel {
     private _tab = new PTabPanel({ tabPlacement: "top" });
-    protected content = WidgetAdapterArray.create();
+    protected _content = WidgetAdapterArray.create();
 
     constructor() {
         super();
-        this._tag = "div";
         this._tab.id = "p" + this.id();
     }
 
-    protected getWidget(wa: PWidget): Widget | undefined {
-        if (wa instanceof WidgetAdapter) {
-            return wa.widget;
-        }
-    }
+    addWidget(widget: SVGWidget | HTMLWidget, options: TabPanel.IAddWidgetOptions): this;
+    /** @deprecated Use options object form instead */
+    addWidget(widget: SVGWidget | HTMLWidget, title: string, ext?: WidgetAdapterExt): this;
+    addWidget(widget: SVGWidget | HTMLWidget, titleOrOptions: string | TabPanel.IAddWidgetOptions, ext: WidgetAdapterExt = {}) {
+        const opts: TabPanel.IAddWidgetOptions = typeof titleOrOptions === "string"
+            ? { title: titleOrOptions, ext }
+            : titleOrOptions;
 
-    protected getWidgetAdapter(widget: Widget): WidgetAdapter | null {
-        let retVal = null;
-        this.content.some(wa => {
-            if (wa.widget === widget) {
-                retVal = wa;
-                return true;
-            }
-            return false;
-        });
-        return retVal;
-    }
+        const {
+            title = "",
+            ext: widgetExt = {},
+            padding = 8
+        } = opts;
 
-    addWidget(widget: SVGWidget | HTMLWidget, title: string, ext: WidgetAdapterExt = {}) {
         if (!this._prevActive) {
             this._prevActive = widget;
         }
-        const wa = new WidgetAdapter(this, widget, undefined, undefined, ext);
+        const wa = new WidgetAdapter(this, widget, undefined, undefined, widgetExt);
         wa.title.label = title;
-        wa.padding = 8;
+        wa.padding = padding;
+
         this._tab.addWidget(wa);
-        this.content.push(wa);
+        this._content.push(wa);
         return this;
     }
 
     removeWidget(widget: SVGWidget | HTMLWidget) {
         const wa = this.getWidgetAdapter(widget);
         if (wa) {
-            const found = this.content.indexOf(wa);
+            const found = this._content.indexOf(wa);
             if (found >= 0) {
-                this.content.splice(found, 1);
+                this._content.splice(found, 1);
             }
             widget.target(null);
             wa.dispose();
@@ -77,35 +85,11 @@ export class TabPanel extends HTMLWidget {
 
     render(callback?: (w: Widget) => void): this {
         return super.render(w => {
-            this.content.watchRendered(this, callback);
+            this._content.watchRendered(this, callback);
             this._tab.update();
         });
     }
 
-    //  Phosphor Messaging  ---
-    messageHook(handler: IMessageHandler, msg: Message): boolean {
-        if (handler === this) {
-            this.processMessage(msg);
-        }
-        return true;
-    }
-
-    private _prevActive: Widget;
-    processMessage(msg: Message): void {
-        switch (msg.type) {
-            case "wa-activate-request":
-                const widget = (msg as Msg.WAActivateRequest).wa.widget;
-                if (this._prevActive !== widget) {
-                    this._prevActive = widget;
-                    this.childActivation(widget);
-                }
-                break;
-        }
-    }
-
-    childActivation(w: Widget) {
-    }
-
     active(): Widget;
     active(_: Widget);
     active(_?: Widget): Widget | this {
@@ -113,5 +97,12 @@ export class TabPanel extends HTMLWidget {
         this._tab.currentWidget = this.getWidgetAdapter(_);
         return this;
     }
+
+    //  Events  ---
+    childActivation(w: Widget, wa: WidgetAdapter) {
+    }
+
+    layoutChanged() {
+    }
 }
 TabPanel.prototype._class += " phosphor_TabPanel";

package/src/WidgetAdapter.css

@@ -13,5 +13,6 @@
 }
 
 .phosphor_WidgetAdapter.lm-SplitPanel-child {
-  border: none;
+  border-top: none;
+  box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.2);
 }