@hpcc-js/common 3.6.3 → 3.6.5

package/src/Widget.ts

@@ -1,731 +1,731 @@
-import { select as d3Select } from "d3-selection";
-import "d3-transition";
-import { Field, Grid } from "./Database.ts";
-import { } from "./Platform.ts";
-import { PropertyExt } from "./PropertyExt.ts";
-import { debounce, textRect, TextRect, textSize, TextSize } from "./Utility.ts";
-
-import "../src/Widget.css";
-
-export { Field };
-
-export type IPrimative = boolean | number | string | object;
-export type IFieldType = "boolean" | "number" | "string" | "dataset" | "object" | "any";
-export interface InputField {
-    id: string;
-    type: IFieldType;
-    multi?: boolean;
-    default?: IPrimative | InputField[];
-    children?: InputField[];
-}
-
-export interface IPos {
-    x: number;
-    y: number;
-}
-
-export interface ISize {
-    width: number;
-    height: number;
-}
-
-export interface BBox {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-
-export interface DataMetaT {
-    min?: number;
-    max?: number;
-    mean?: number;
-    stdDev?: number;
-    sum?: number;
-}
-
-let widgetID = 0;
-export abstract class Widget extends PropertyExt {
-    static _idSeed: string;
-
-    protected _tag: string;
-    protected _isRootNode: boolean = true;
-
-    protected _db = new Grid();
-    protected _pos;
-    protected _prevPos;
-    protected _size;
-    protected _widgetScale;
-    protected _visible;
-    protected _display;
-    protected _dataMeta: DataMetaT = {};
-
-    protected _target: null | HTMLElement | SVGElement;
-    protected _placeholderElement;
-    protected _parentWidget;
-
-    protected _element;
-
-    protected _renderCount;
-
-    protected _overlayElement;
-
-    constructor() {
-        super();
-        this._id = Widget._idSeed + widgetID++;
-
-        this._db = new Grid();
-        this._pos = { x: 0, y: 0 };
-        this._size = { width: 0, height: 0 };
-        this._widgetScale = 1;
-        this._visible = true;
-
-        this._target = null;
-        this._placeholderElement = null;
-        this._parentWidget = null;
-
-        this._element = d3Select(null);
-
-        this._renderCount = 0;
-
-        if ((window as any).__hpcc_debug) {
-            if ((window as any).g_all === undefined) {
-                (window as any).g_all = {};
-            }
-            (window as any).g_all[this._id] = this;
-        }
-        if ((window as any).__hpcc_theme) {
-            this.applyTheme((window as any).__hpcc_theme);
-        }
-    }
-
-    columnChecksum() {
-        return this._db.fieldsChecksum();
-    }
-
-    dataChecksum() {
-        return this._db.dataChecksum();
-    }
-
-    importJSON(_: string | object): this {
-        this._db.json(_);
-        return this;
-    }
-
-    importCSV(_: string): this {
-        this._db.csv(_);
-        return this;
-    }
-
-    importTSV(_: string): this {
-        this._db.tsv(_);
-        return this;
-    }
-
-    export(_: "JSON" | "CSV" | "TSV" = "JSON") {
-        switch (_) {
-            case "CSV":
-                return this._db.csv();
-            case "TSV":
-                return this._db.tsv();
-            case "JSON":
-            default:
-                return this._db.json();
-        }
-    }
-
-    leakCheck(newNode) {
-        const context = this;
-        const watchArray = [newNode];
-        const destructObserver = new MutationObserver(function (mutations) {
-            let leaks = false;
-            mutations.forEach(function (mutation) {
-                for (let i = 0; i < mutation.removedNodes.length; ++i) {
-                    const node = mutation.removedNodes.item(i);
-                    if (watchArray.indexOf(node) >= 0 && context._target) {
-                        leaks = true;
-                        destructObserver.disconnect();
-                    }
-                }
-            });
-            if (leaks) {
-                console.error("leak:  " + context.id() + " - " + context.classID() + "\t\twidget.target(null); was not called for this widget before it was removed from the page.");
-            }
-        });
-        let pNode = newNode.parentNode;
-        while (pNode) {
-            destructObserver.observe(pNode, { childList: true });
-            watchArray.push(pNode);
-            pNode = pNode.parentNode;
-        }
-    }
-
-    renderCount(): number {
-        return this._renderCount;
-    }
-
-    //  Implementation  ---
-    columns(): string[];
-    columns(_: string[], asDefault?: boolean): this;
-    columns(_?: string[], asDefault?: boolean): string[] | this {
-        if (!arguments.length) return this._db.legacyColumns();
-        this._db.legacyColumns(_, asDefault);
-        return this;
-    }
-
-    protected columnIdx(column: string): number {
-        return this.columns().indexOf(column);
-    }
-
-    protected cellIdxFunc<T>(colIdx: number, defValue?: T): (row: any) => T {
-        return colIdx < 0 ? () => defValue : row => row[colIdx];
-    }
-
-    protected cellFunc<T>(column: string, defValue?: T): (row: any) => T {
-        return this.cellIdxFunc<T>(this.columnIdx(column), defValue);
-    }
-
-    parsedData() {
-        return this._db.parsedData();
-    }
-
-    formattedData() {
-        return this._db.formattedData();
-    }
-
-    data(): any;
-    data(_: any): this;
-    data(_?: any): any | this {
-        if (!arguments.length) return this._db.legacyData();
-        this._db.legacyData(_);
-        return this;
-    }
-
-    cloneData() {
-        return this.data().map(function (row) { return row.slice(0); });
-    }
-
-    flattenData(columns: string[] = this.columns(), data: any = this.data()) {
-        const retVal = [];
-        data.forEach(function (row, rowIdx) {
-            columns.filter(function (_col, idx) { return idx > 0; }).forEach(function (_col, idx) {
-                const val = row[idx + 1];
-                if (typeof val !== "undefined") {
-                    const newItem = {
-                        rowIdx,
-                        colIdx: idx + 1,
-                        label: row[0],
-                        value: val
-                    };
-                    retVal.push(newItem);
-                }
-            }, this);
-        }, this);
-        return retVal;
-    }
-
-    rowToObj(row: any[]): object {
-        if (!row) return {};
-        const retVal: any = {};
-        this.fields().forEach(function (field, idx) {
-            retVal[field.label_default() || field.label()] = row[idx];
-        });
-        if (row.length === this.columns().length + 1) {
-            retVal.__lparam = row[this.columns().length];
-        }
-        return retVal;
-    }
-
-    pos(): IPos;
-    pos(_: IPos): this;
-    pos(_?: IPos): IPos | this {
-        if (!arguments.length) return this._pos;
-        this._pos = _;
-        if (this._overlayElement) {
-            this._overlayElement
-                .attr("transform", "translate(" + _.x + "," + _.y + ")scale(" + this._widgetScale + ")")
-                ;
-        }
-        return this;
-    }
-
-    x(): number;
-    x(_): this;
-    x(_?): number | this {
-        if (!arguments.length) return this._pos.x;
-        this.pos({ x: _, y: this._pos.y });
-        return this;
-    }
-
-    y(): number;
-    y(_): this;
-    y(_?): number | this {
-        if (!arguments.length) return this._pos.y;
-        this.pos({ x: this._pos.x, y: _ });
-        return this;
-    }
-
-    size(): ISize;
-    size(_): this;
-    size(_?): ISize | this {
-        if (!arguments.length) return this._size;
-        this._size = _;
-        if (this._overlayElement) {
-            this._overlayElement
-                .attr("width", _.width)
-                .attr("height", _.height)
-                ;
-        }
-        return this;
-    }
-
-    width(): number;
-    width(_): this;
-    width(_?): number | this {
-        if (!arguments.length) return this._size.width;
-        this.size({ width: _, height: this._size.height });
-        return this;
-    }
-
-    height(): number;
-    height(_): this;
-    height(_?): number | this {
-        if (!arguments.length) return this._size.height;
-        this.size({ width: this._size.width, height: _ });
-        return this;
-    }
-
-    resize(size?: ISize, delta: ISize = { width: 0, height: 0 }) {
-        let width;
-        let height;
-        if (size && size.width && size.height) {
-            width = size.width;
-            height = size.height;
-        } else {
-            const style = window.getComputedStyle(this._target, null);
-            width = parseFloat(style.getPropertyValue("width")) - delta.width;
-            height = parseFloat(style.getPropertyValue("height")) - delta.height;
-        }
-        this.size({
-            width,
-            height
-        });
-        return this;
-    }
-
-    scale(): number;
-    scale(_): this;
-    scale(_?): number | this {
-        if (!arguments.length) return this._widgetScale;
-        this._widgetScale = _;
-        if (this._overlayElement) {
-            this._overlayElement
-                .attr("transform", "translate(" + _.x + "," + _.y + ")scale(" + this._widgetScale + ")")
-                ;
-        }
-        return this;
-    }
-
-    visible(): boolean;
-    visible(_): this;
-    visible(_?): boolean | this {
-        if (!arguments.length) return this._visible;
-        this._visible = _;
-        if (this._element) {
-            this._element
-                .style("visibility", this._visible ? null : "hidden")
-                .style("opacity", this._visible ? null : 0)
-                ;
-        }
-        return this;
-    }
-
-    display(): boolean;
-    display(_): this;
-    display(_?): boolean | this {
-        if (!arguments.length) return this._display;
-        this._display = _;
-        if (this._element) {
-            this._element.style("display", this._display ? null : "none");
-        }
-        return this;
-    }
-
-    dataMeta(): DataMetaT;
-    dataMeta(_): this;
-    dataMeta(_?): DataMetaT | this {
-        if (!arguments.length) return this._dataMeta;
-        this._dataMeta = _;
-        return this;
-    }
-
-    private _appData = new Object({});
-    appData(key: string): any;
-    appData(key: string, value: any): this;
-    appData(key: string, value?: any): any | this {
-        if (arguments.length < 2) return this._appData[key];
-        this._appData[key] = value;
-        return this;
-    }
-
-    calcSnap(snapSize) {
-        function snap(x, gridSize) {
-            function snapDelta(x2, gridSize2) {
-                let dx = x2 % gridSize2;
-                if (Math.abs(dx) > gridSize2 - Math.abs(dx)) {
-                    dx = (gridSize2 - Math.abs(dx)) * (dx < 0 ? 1 : -1);
-                }
-                return dx;
-            }
-            return x - snapDelta(x, gridSize);
-        }
-        const l = snap(this._pos.x - this._size.width / 2, snapSize);
-        const t = snap(this._pos.y - this._size.height / 2, snapSize);
-        const r = snap(this._pos.x + this._size.width / 2, snapSize);
-        const b = snap(this._pos.y + this._size.height / 2, snapSize);
-        const w = r - l;
-        const h = b - t;
-        return [{ x: l + w / 2, y: t + h / 2 }, { width: w, height: h }];
-    }
-
-    //  DOM/SVG Node Helpers  ---
-    toWidget(domNode): Widget | null {
-        if (!domNode) {
-            return null;
-        }
-        const element = d3Select(domNode);
-        if (element) {
-            const widget = element.datum();
-            if (widget && widget instanceof Widget) {
-                return widget;
-            }
-        }
-        return null;
-    }
-
-    parentOverlay() {
-        return null;
-    }
-
-    locateParentWidget(domNode?): Widget | null {
-        domNode = domNode || (this._target ? this._target.parentNode : null);
-        if (domNode) {
-            const widget = this.toWidget(domNode);
-            if (widget) {
-                return widget;
-            } else if (domNode.parentNode) {
-                return this.locateParentWidget(domNode.parentNode);
-            }
-        }
-        return null;
-    }
-
-    locateSVGNode(domNode): SVGSVGElement | null {
-        if (!domNode) {
-            return null;
-        }
-        if (domNode.tagName === "svg") {
-            return domNode;
-        }
-        return this.locateSVGNode(domNode.parentNode);
-    }
-
-    locateOverlayNode() {
-        let widget = this.locateParentWidget(this._target);
-        while (widget) {
-            const retVal = widget.parentOverlay();
-            if (retVal) {
-                return retVal;
-            }
-            widget = this.locateParentWidget(widget._target.parentNode);
-        }
-        return null;
-    }
-
-    locateAncestor(classID): Widget | null {
-        return this.locateClosestAncestor([classID]);
-    }
-
-    locateClosestAncestor(classIDArr): Widget | null {
-        let widget = this.locateParentWidget(this._target);
-        while (widget) {
-            if (classIDArr.indexOf(widget.classID()) !== -1) {
-                return widget;
-            }
-            widget = this.locateParentWidget(widget._target.parentNode);
-        }
-        return null;
-    }
-
-    getAbsolutePos(domNode, w, h) {
-        const root = this.locateSVGNode(domNode);
-        if (!root) {
-            return null;
-        }
-        let pos = root.createSVGPoint();
-        const ctm = domNode.getCTM();
-        pos = pos.matrixTransform(ctm);
-        const retVal: any = {
-            x: pos.x,
-            y: pos.y
-        };
-        if (w !== undefined && h !== undefined) {
-            let size = root.createSVGPoint();
-            size.x = w;
-            size.y = h;
-            size = size.matrixTransform(ctm);
-            retVal.width = size.x - pos.x;
-            retVal.height = size.y - pos.y;
-        }
-        return retVal;
-    }
-
-    hasOverlay() {
-        return this._overlayElement;
-    }
-
-    syncOverlay() {
-        if (this._size.width && this._size.height) {
-            const newPos = this.getAbsolutePos(this._overlayElement.node(), this._size.width, this._size.height);
-            if (newPos && (!this._prevPos || newPos.x !== this._prevPos.x || newPos.y !== this._prevPos.y || newPos.width !== this._prevPos.width || newPos.height !== this._prevPos.height)) {
-                const xScale = newPos.width / this._size.width;
-                const yScale = newPos.height / this._size.height;
-                this._placeholderElement
-                    .style("left", newPos.x - (newPos.width / xScale) / 2 + "px")
-                    .style("top", newPos.y - (newPos.height / yScale) / 2 + "px")
-                    .style("width", newPos.width / xScale + "px")
-                    .style("height", newPos.height / yScale + "px")
-                    ;
-                const transform = "scale(" + xScale + "," + yScale + ")";
-                this._placeholderElement
-                    .style("transform", transform)
-                    .style("-moz-transform", transform)
-                    .style("-ms-transform", transform)
-                    .style("-webkit-transform", transform)
-                    .style("-o-transform", transform)
-                    ;
-            }
-            this._prevPos = newPos;
-        }
-    }
-
-    getBBox(refresh = false, round = false): BBox {
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
-    }
-
-    textSize(_text: string | string[], fontName: string = "Verdana", fontSize: number = 12, bold: boolean = false): Readonly<TextSize> {
-        return textSize(_text, fontName, fontSize, bold);
-    }
-
-    textRect(_text: string, fontName: string = "Verdana", fontSize: number = 12, bold: boolean = false): Readonly<TextRect> {
-        return textRect(_text, fontName, fontSize, bold);
-    }
-
-    element() {
-        return this._element;
-    }
-
-    node() {
-        return this._element.node();
-    }
-
-    target(): null | HTMLElement | SVGElement;
-    target(_: null | string | HTMLElement | SVGElement): this;
-    target(_?: null | string | HTMLElement | SVGElement): null | HTMLElement | SVGElement | this {
-        if (!arguments.length) return this._target;
-        if (this._target && _) {
-            throw new Error("Target can only be assigned once.");
-        }
-        if (_ === null) {
-            this._target = null;
-            if (this.renderCount()) {
-                this.exit();
-            }
-        } else if (typeof _ === "string") {
-            this._target = document.getElementById(_);
-        } else if (_ instanceof HTMLElement || _ instanceof SVGElement) {
-            this._target = _;
-        }
-        return this;
-    }
-
-    isDOMHidden(): boolean {
-        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
-        // Note:  Will return false for visible===hidden (which is ok as it still takes up space on the page)
-        return this._isRootNode && this._placeholderElement.node().offsetParent === null;
-    }
-
-    hasSize() {
-        return !isNaN(this.width()) && !isNaN(this.height());
-    }
-
-    protected publishedWidgets(): Widget[] {
-        let widgets = [];
-        this.publishedProperties(true).forEach(function (meta) {
-            if (!meta.ext || meta.ext.render !== false) {
-                switch (meta.type) {
-                    case "widget":
-                        const widget = this[meta.id]();
-                        if (widget) {
-                            widgets.push(widget);
-                        }
-                        break;
-                    case "widgetArray":
-                        widgets = widgets.concat(this[meta.id]());
-                        break;
-                }
-            }
-        }, this);
-        return widgets;
-    }
-
-    //  Render  ---
-    private _prevNow = 0;
-    render(callback?: (w: Widget) => void) {
-        if ((window as any).__hpcc_debug) {
-            const now = Date.now();
-            if (now - this._prevNow < 500) {
-                console.error("Double Render:  " + (now - this._prevNow) + " - " + this.id() + " - " + this.classID());
-            }
-            this._prevNow = now;
-        }
-
-        callback = callback || function () { };
-        if (!this._placeholderElement || !this.visible() || this.isDOMHidden() || !this.hasSize()) {
-            callback(this);
-            return this;
-        }
-        if (this._placeholderElement) {
-            if (!this._tag)
-                throw new Error("No DOM tag specified");
-
-            const elements = this._placeholderElement.selectAll("#" + this._id).data([this], function (d) { return d._id; });
-            elements.enter().append(this._tag)
-                .classed(this._class, true)
-                .attr("id", this._id)
-                // .attr("opacity", 0.50)  //  Uncomment to debug position offsets  ---
-                .each(function (context2) {
-                    context2._element = d3Select(this);
-                    context2.enter(this, context2._element);
-                    if ((window as any).__hpcc_debug) {
-                        context2.leakCheck(this);
-                    }
-                })
-                .merge(elements)
-                .each(function (context2) {
-                    const element = d3Select(this);
-                    const classed = context2.classed();
-                    for (const key in classed) {
-                        element.classed(key, classed[key]);
-                    }
-                    context2.preUpdate(this, context2._element);
-                    context2.update(this, context2._element);
-                    context2.postUpdate(this, context2._element);
-                })
-                ;
-            elements.exit()
-                .each(function (context2) {
-                    d3Select(this).datum(null);
-                    context2.exit(this, context2._element);
-                })
-                .remove()
-                ;
-            this._renderCount++;
-        }
-
-        //  ASync Render Contained Widgets  ---
-        const widgets = this.publishedWidgets();
-
-        const context = this;
-        switch (widgets.length) {
-            case 0:
-                callback(this);
-                break;
-            case 1:
-                widgets[0].render(function () {
-                    callback(context);
-                });
-                break;
-            default:
-                let renderCount = widgets.length;
-                widgets.forEach(function (widget, _idx) {
-                    setTimeout(function () {
-                        widget.render(function () {
-                            if (--renderCount === 0) {
-                                callback(context);
-                            }
-                        });
-                    }, 0);
-                });
-                break;
-        }
-        return this;
-    }
-
-    renderPromise(): Promise<Widget> {
-        return new Promise((resolve, reject) => {
-            this.render((w: Widget) => {
-                resolve(w);
-            });
-        });
-    }
-
-    private _lazyRender = debounce(function (debouncedCallback?: (w: Widget) => void) {
-        this.render(debouncedCallback);
-    }, 100);
-
-    lazyRender(callback?: (w: Widget) => void): this {
-        this._lazyRender(callback);
-        return this;
-    }
-
-    animationFrameRender(): this {
-        if (requestAnimationFrame) {
-            requestAnimationFrame(() => {
-                this.render();
-            });
-        } else {
-            //  Not a real replacement for requestAnimationFrame  ---
-            this.renderPromise();
-        }
-        return this;
-    }
-
-    enter(_domNode: HTMLElement, _element) { }
-    preUpdate(_domNode: HTMLElement, _element) { }
-    update(_domNode: HTMLElement, _element) { }
-    postUpdate(_domNode: HTMLElement, _element) { }
-    exit(_domNode?: HTMLElement, _element?) {
-        this.publishedWidgets().forEach(w => w.target(null));
-    }
-}
-Widget.prototype._class += " common_Widget";
-
-export interface Widget {
-    fields(): Field[];
-    fields(_: Field[]): this;
-    classed(classID: string): boolean;
-    classed(classID: string, _: boolean): this;
-    classed(): { [classID: string]: boolean };
-    classed(_: { [classID: string]: boolean }): this;
-}
-
-Widget._idSeed = "_w";
-
-Widget.prototype.publishProxy("fields", "_db", "fields");
-Widget.prototype.publish("classed", {}, "object", "HTML Classes", null, { tags: ["Private"] });
-const origClassed = Widget.prototype.classed;
-Widget.prototype.classed = function (this: Widget, str_obj?: string | { [classID: string]: boolean }, _?: boolean) {
-    if (typeof str_obj === "string") {
-        if (arguments.length === 1) return origClassed.call(this)[str_obj];
-        const classed = origClassed.call(this);
-        origClassed.call(this, { ...classed, [str_obj]: _ });
-        return this;
-    }
-    return origClassed.apply(this, arguments);
-};
+import { select as d3Select } from "d3-selection";
+import "d3-transition";
+import { Field, Grid } from "./Database.ts";
+import { } from "./Platform.ts";
+import { PropertyExt } from "./PropertyExt.ts";
+import { debounce, textRect, TextRect, textSize, TextSize } from "./Utility.ts";
+
+import "../src/Widget.css";
+
+export { Field };
+
+export type IPrimative = boolean | number | string | object;
+export type IFieldType = "boolean" | "number" | "string" | "dataset" | "object" | "any";
+export interface InputField {
+    id: string;
+    type: IFieldType;
+    multi?: boolean;
+    default?: IPrimative | InputField[];
+    children?: InputField[];
+}
+
+export interface IPos {
+    x: number;
+    y: number;
+}
+
+export interface ISize {
+    width: number;
+    height: number;
+}
+
+export interface BBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export interface DataMetaT {
+    min?: number;
+    max?: number;
+    mean?: number;
+    stdDev?: number;
+    sum?: number;
+}
+
+let widgetID = 0;
+export abstract class Widget extends PropertyExt {
+    static _idSeed: string;
+
+    protected _tag: string;
+    protected _isRootNode: boolean = true;
+
+    protected _db = new Grid();
+    protected _pos;
+    protected _prevPos;
+    protected _size;
+    protected _widgetScale;
+    protected _visible;
+    protected _display;
+    protected _dataMeta: DataMetaT = {};
+
+    protected _target: null | HTMLElement | SVGElement;
+    protected _placeholderElement;
+    protected _parentWidget;
+
+    protected _element;
+
+    protected _renderCount;
+
+    protected _overlayElement;
+
+    constructor() {
+        super();
+        this._id = Widget._idSeed + widgetID++;
+
+        this._db = new Grid();
+        this._pos = { x: 0, y: 0 };
+        this._size = { width: 0, height: 0 };
+        this._widgetScale = 1;
+        this._visible = true;
+
+        this._target = null;
+        this._placeholderElement = null;
+        this._parentWidget = null;
+
+        this._element = d3Select(null);
+
+        this._renderCount = 0;
+
+        if ((window as any).__hpcc_debug) {
+            if ((window as any).g_all === undefined) {
+                (window as any).g_all = {};
+            }
+            (window as any).g_all[this._id] = this;
+        }
+        if ((window as any).__hpcc_theme) {
+            this.applyTheme((window as any).__hpcc_theme);
+        }
+    }
+
+    columnChecksum() {
+        return this._db.fieldsChecksum();
+    }
+
+    dataChecksum() {
+        return this._db.dataChecksum();
+    }
+
+    importJSON(_: string | object): this {
+        this._db.json(_);
+        return this;
+    }
+
+    importCSV(_: string): this {
+        this._db.csv(_);
+        return this;
+    }
+
+    importTSV(_: string): this {
+        this._db.tsv(_);
+        return this;
+    }
+
+    export(_: "JSON" | "CSV" | "TSV" = "JSON") {
+        switch (_) {
+            case "CSV":
+                return this._db.csv();
+            case "TSV":
+                return this._db.tsv();
+            case "JSON":
+            default:
+                return this._db.json();
+        }
+    }
+
+    leakCheck(newNode) {
+        const context = this;
+        const watchArray = [newNode];
+        const destructObserver = new MutationObserver(function (mutations) {
+            let leaks = false;
+            mutations.forEach(function (mutation) {
+                for (let i = 0; i < mutation.removedNodes.length; ++i) {
+                    const node = mutation.removedNodes.item(i);
+                    if (watchArray.indexOf(node) >= 0 && context._target) {
+                        leaks = true;
+                        destructObserver.disconnect();
+                    }
+                }
+            });
+            if (leaks) {
+                console.error("leak:  " + context.id() + " - " + context.classID() + "\t\twidget.target(null); was not called for this widget before it was removed from the page.");
+            }
+        });
+        let pNode = newNode.parentNode;
+        while (pNode) {
+            destructObserver.observe(pNode, { childList: true });
+            watchArray.push(pNode);
+            pNode = pNode.parentNode;
+        }
+    }
+
+    renderCount(): number {
+        return this._renderCount;
+    }
+
+    //  Implementation  ---
+    columns(): string[];
+    columns(_: string[], asDefault?: boolean): this;
+    columns(_?: string[], asDefault?: boolean): string[] | this {
+        if (!arguments.length) return this._db.legacyColumns();
+        this._db.legacyColumns(_, asDefault);
+        return this;
+    }
+
+    protected columnIdx(column: string): number {
+        return this.columns().indexOf(column);
+    }
+
+    protected cellIdxFunc<T>(colIdx: number, defValue?: T): (row: any) => T {
+        return colIdx < 0 ? () => defValue : row => row[colIdx];
+    }
+
+    protected cellFunc<T>(column: string, defValue?: T): (row: any) => T {
+        return this.cellIdxFunc<T>(this.columnIdx(column), defValue);
+    }
+
+    parsedData() {
+        return this._db.parsedData();
+    }
+
+    formattedData() {
+        return this._db.formattedData();
+    }
+
+    data(): any;
+    data(_: any): this;
+    data(_?: any): any | this {
+        if (!arguments.length) return this._db.legacyData();
+        this._db.legacyData(_);
+        return this;
+    }
+
+    cloneData() {
+        return this.data().map(function (row) { return row.slice(0); });
+    }
+
+    flattenData(columns: string[] = this.columns(), data: any = this.data()) {
+        const retVal = [];
+        data.forEach(function (row, rowIdx) {
+            columns.filter(function (_col, idx) { return idx > 0; }).forEach(function (_col, idx) {
+                const val = row[idx + 1];
+                if (typeof val !== "undefined") {
+                    const newItem = {
+                        rowIdx,
+                        colIdx: idx + 1,
+                        label: row[0],
+                        value: val
+                    };
+                    retVal.push(newItem);
+                }
+            }, this);
+        }, this);
+        return retVal;
+    }
+
+    rowToObj(row: any[]): object {
+        if (!row) return {};
+        const retVal: any = {};
+        this.fields().forEach(function (field, idx) {
+            retVal[field.label_default() || field.label()] = row[idx];
+        });
+        if (row.length === this.columns().length + 1) {
+            retVal.__lparam = row[this.columns().length];
+        }
+        return retVal;
+    }
+
+    pos(): IPos;
+    pos(_: IPos): this;
+    pos(_?: IPos): IPos | this {
+        if (!arguments.length) return this._pos;
+        this._pos = _;
+        if (this._overlayElement) {
+            this._overlayElement
+                .attr("transform", "translate(" + _.x + "," + _.y + ")scale(" + this._widgetScale + ")")
+                ;
+        }
+        return this;
+    }
+
+    x(): number;
+    x(_): this;
+    x(_?): number | this {
+        if (!arguments.length) return this._pos.x;
+        this.pos({ x: _, y: this._pos.y });
+        return this;
+    }
+
+    y(): number;
+    y(_): this;
+    y(_?): number | this {
+        if (!arguments.length) return this._pos.y;
+        this.pos({ x: this._pos.x, y: _ });
+        return this;
+    }
+
+    size(): ISize;
+    size(_): this;
+    size(_?): ISize | this {
+        if (!arguments.length) return this._size;
+        this._size = _;
+        if (this._overlayElement) {
+            this._overlayElement
+                .attr("width", _.width)
+                .attr("height", _.height)
+                ;
+        }
+        return this;
+    }
+
+    width(): number;
+    width(_): this;
+    width(_?): number | this {
+        if (!arguments.length) return this._size.width;
+        this.size({ width: _, height: this._size.height });
+        return this;
+    }
+
+    height(): number;
+    height(_): this;
+    height(_?): number | this {
+        if (!arguments.length) return this._size.height;
+        this.size({ width: this._size.width, height: _ });
+        return this;
+    }
+
+    resize(size?: ISize, delta: ISize = { width: 0, height: 0 }) {
+        let width;
+        let height;
+        if (size && size.width && size.height) {
+            width = size.width;
+            height = size.height;
+        } else {
+            const style = window.getComputedStyle(this._target, null);
+            width = parseFloat(style.getPropertyValue("width")) - delta.width;
+            height = parseFloat(style.getPropertyValue("height")) - delta.height;
+        }
+        this.size({
+            width,
+            height
+        });
+        return this;
+    }
+
+    scale(): number;
+    scale(_): this;
+    scale(_?): number | this {
+        if (!arguments.length) return this._widgetScale;
+        this._widgetScale = _;
+        if (this._overlayElement) {
+            this._overlayElement
+                .attr("transform", "translate(" + _.x + "," + _.y + ")scale(" + this._widgetScale + ")")
+                ;
+        }
+        return this;
+    }
+
+    visible(): boolean;
+    visible(_): this;
+    visible(_?): boolean | this {
+        if (!arguments.length) return this._visible;
+        this._visible = _;
+        if (this._element) {
+            this._element
+                .style("visibility", this._visible ? null : "hidden")
+                .style("opacity", this._visible ? null : 0)
+                ;
+        }
+        return this;
+    }
+
+    display(): boolean;
+    display(_): this;
+    display(_?): boolean | this {
+        if (!arguments.length) return this._display;
+        this._display = _;
+        if (this._element) {
+            this._element.style("display", this._display ? null : "none");
+        }
+        return this;
+    }
+
+    dataMeta(): DataMetaT;
+    dataMeta(_): this;
+    dataMeta(_?): DataMetaT | this {
+        if (!arguments.length) return this._dataMeta;
+        this._dataMeta = _;
+        return this;
+    }
+
+    private _appData = new Object({});
+    appData(key: string): any;
+    appData(key: string, value: any): this;
+    appData(key: string, value?: any): any | this {
+        if (arguments.length < 2) return this._appData[key];
+        this._appData[key] = value;
+        return this;
+    }
+
+    calcSnap(snapSize) {
+        function snap(x, gridSize) {
+            function snapDelta(x2, gridSize2) {
+                let dx = x2 % gridSize2;
+                if (Math.abs(dx) > gridSize2 - Math.abs(dx)) {
+                    dx = (gridSize2 - Math.abs(dx)) * (dx < 0 ? 1 : -1);
+                }
+                return dx;
+            }
+            return x - snapDelta(x, gridSize);
+        }
+        const l = snap(this._pos.x - this._size.width / 2, snapSize);
+        const t = snap(this._pos.y - this._size.height / 2, snapSize);
+        const r = snap(this._pos.x + this._size.width / 2, snapSize);
+        const b = snap(this._pos.y + this._size.height / 2, snapSize);
+        const w = r - l;
+        const h = b - t;
+        return [{ x: l + w / 2, y: t + h / 2 }, { width: w, height: h }];
+    }
+
+    //  DOM/SVG Node Helpers  ---
+    toWidget(domNode): Widget | null {
+        if (!domNode) {
+            return null;
+        }
+        const element = d3Select(domNode);
+        if (element) {
+            const widget = element.datum();
+            if (widget && widget instanceof Widget) {
+                return widget;
+            }
+        }
+        return null;
+    }
+
+    parentOverlay() {
+        return null;
+    }
+
+    locateParentWidget(domNode?): Widget | null {
+        domNode = domNode || (this._target ? this._target.parentNode : null);
+        if (domNode) {
+            const widget = this.toWidget(domNode);
+            if (widget) {
+                return widget;
+            } else if (domNode.parentNode) {
+                return this.locateParentWidget(domNode.parentNode);
+            }
+        }
+        return null;
+    }
+
+    locateSVGNode(domNode): SVGSVGElement | null {
+        if (!domNode) {
+            return null;
+        }
+        if (domNode.tagName === "svg") {
+            return domNode;
+        }
+        return this.locateSVGNode(domNode.parentNode);
+    }
+
+    locateOverlayNode() {
+        let widget = this.locateParentWidget(this._target);
+        while (widget) {
+            const retVal = widget.parentOverlay();
+            if (retVal) {
+                return retVal;
+            }
+            widget = this.locateParentWidget(widget._target.parentNode);
+        }
+        return null;
+    }
+
+    locateAncestor(classID): Widget | null {
+        return this.locateClosestAncestor([classID]);
+    }
+
+    locateClosestAncestor(classIDArr): Widget | null {
+        let widget = this.locateParentWidget(this._target);
+        while (widget) {
+            if (classIDArr.indexOf(widget.classID()) !== -1) {
+                return widget;
+            }
+            widget = this.locateParentWidget(widget._target.parentNode);
+        }
+        return null;
+    }
+
+    getAbsolutePos(domNode, w, h) {
+        const root = this.locateSVGNode(domNode);
+        if (!root) {
+            return null;
+        }
+        let pos = root.createSVGPoint();
+        const ctm = domNode.getCTM();
+        pos = pos.matrixTransform(ctm);
+        const retVal: any = {
+            x: pos.x,
+            y: pos.y
+        };
+        if (w !== undefined && h !== undefined) {
+            let size = root.createSVGPoint();
+            size.x = w;
+            size.y = h;
+            size = size.matrixTransform(ctm);
+            retVal.width = size.x - pos.x;
+            retVal.height = size.y - pos.y;
+        }
+        return retVal;
+    }
+
+    hasOverlay() {
+        return this._overlayElement;
+    }
+
+    syncOverlay() {
+        if (this._size.width && this._size.height) {
+            const newPos = this.getAbsolutePos(this._overlayElement.node(), this._size.width, this._size.height);
+            if (newPos && (!this._prevPos || newPos.x !== this._prevPos.x || newPos.y !== this._prevPos.y || newPos.width !== this._prevPos.width || newPos.height !== this._prevPos.height)) {
+                const xScale = newPos.width / this._size.width;
+                const yScale = newPos.height / this._size.height;
+                this._placeholderElement
+                    .style("left", newPos.x - (newPos.width / xScale) / 2 + "px")
+                    .style("top", newPos.y - (newPos.height / yScale) / 2 + "px")
+                    .style("width", newPos.width / xScale + "px")
+                    .style("height", newPos.height / yScale + "px")
+                    ;
+                const transform = "scale(" + xScale + "," + yScale + ")";
+                this._placeholderElement
+                    .style("transform", transform)
+                    .style("-moz-transform", transform)
+                    .style("-ms-transform", transform)
+                    .style("-webkit-transform", transform)
+                    .style("-o-transform", transform)
+                    ;
+            }
+            this._prevPos = newPos;
+        }
+    }
+
+    getBBox(refresh = false, round = false): BBox {
+        return {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
+    }
+
+    textSize(_text: string | string[], fontName: string = "Verdana", fontSize: number = 12, bold: boolean = false): Readonly<TextSize> {
+        return textSize(_text, fontName, fontSize, bold);
+    }
+
+    textRect(_text: string, fontName: string = "Verdana", fontSize: number = 12, bold: boolean = false): Readonly<TextRect> {
+        return textRect(_text, fontName, fontSize, bold);
+    }
+
+    element() {
+        return this._element;
+    }
+
+    node() {
+        return this._element.node();
+    }
+
+    target(): null | HTMLElement | SVGElement;
+    target(_: null | string | HTMLElement | SVGElement): this;
+    target(_?: null | string | HTMLElement | SVGElement): null | HTMLElement | SVGElement | this {
+        if (!arguments.length) return this._target;
+        if (this._target && _) {
+            throw new Error("Target can only be assigned once.");
+        }
+        if (_ === null) {
+            this._target = null;
+            if (this.renderCount()) {
+                this.exit();
+            }
+        } else if (typeof _ === "string") {
+            this._target = document.getElementById(_);
+        } else if (_ instanceof HTMLElement || _ instanceof SVGElement) {
+            this._target = _;
+        }
+        return this;
+    }
+
+    isDOMHidden(): boolean {
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+        // Note:  Will return false for visible===hidden (which is ok as it still takes up space on the page)
+        return this._isRootNode && this._placeholderElement.node().offsetParent === null;
+    }
+
+    hasSize() {
+        return !isNaN(this.width()) && !isNaN(this.height());
+    }
+
+    protected publishedWidgets(): Widget[] {
+        let widgets = [];
+        this.publishedProperties(true).forEach(function (meta) {
+            if (!meta.ext || meta.ext.render !== false) {
+                switch (meta.type) {
+                    case "widget":
+                        const widget = this[meta.id]();
+                        if (widget) {
+                            widgets.push(widget);
+                        }
+                        break;
+                    case "widgetArray":
+                        widgets = widgets.concat(this[meta.id]());
+                        break;
+                }
+            }
+        }, this);
+        return widgets;
+    }
+
+    //  Render  ---
+    private _prevNow = 0;
+    render(callback?: (w: Widget) => void) {
+        if ((window as any).__hpcc_debug) {
+            const now = Date.now();
+            if (now - this._prevNow < 500) {
+                console.error("Double Render:  " + (now - this._prevNow) + " - " + this.id() + " - " + this.classID());
+            }
+            this._prevNow = now;
+        }
+
+        callback = callback || function () { };
+        if (!this._placeholderElement || !this.visible() || this.isDOMHidden() || !this.hasSize()) {
+            callback(this);
+            return this;
+        }
+        if (this._placeholderElement) {
+            if (!this._tag)
+                throw new Error("No DOM tag specified");
+
+            const elements = this._placeholderElement.selectAll("#" + this._id).data([this], function (d) { return d._id; });
+            elements.enter().append(this._tag)
+                .classed(this._class, true)
+                .attr("id", this._id)
+                // .attr("opacity", 0.50)  //  Uncomment to debug position offsets  ---
+                .each(function (context2) {
+                    context2._element = d3Select(this);
+                    context2.enter(this, context2._element);
+                    if ((window as any).__hpcc_debug) {
+                        context2.leakCheck(this);
+                    }
+                })
+                .merge(elements)
+                .each(function (context2) {
+                    const element = d3Select(this);
+                    const classed = context2.classed();
+                    for (const key in classed) {
+                        element.classed(key, classed[key]);
+                    }
+                    context2.preUpdate(this, context2._element);
+                    context2.update(this, context2._element);
+                    context2.postUpdate(this, context2._element);
+                })
+                ;
+            elements.exit()
+                .each(function (context2) {
+                    d3Select(this).datum(null);
+                    context2.exit(this, context2._element);
+                })
+                .remove()
+                ;
+            this._renderCount++;
+        }
+
+        //  ASync Render Contained Widgets  ---
+        const widgets = this.publishedWidgets();
+
+        const context = this;
+        switch (widgets.length) {
+            case 0:
+                callback(this);
+                break;
+            case 1:
+                widgets[0].render(function () {
+                    callback(context);
+                });
+                break;
+            default:
+                let renderCount = widgets.length;
+                widgets.forEach(function (widget, _idx) {
+                    setTimeout(function () {
+                        widget.render(function () {
+                            if (--renderCount === 0) {
+                                callback(context);
+                            }
+                        });
+                    }, 0);
+                });
+                break;
+        }
+        return this;
+    }
+
+    renderPromise(): Promise<Widget> {
+        return new Promise((resolve, reject) => {
+            this.render((w: Widget) => {
+                resolve(w);
+            });
+        });
+    }
+
+    private _lazyRender = debounce(function (debouncedCallback?: (w: Widget) => void) {
+        this.render(debouncedCallback);
+    }, 100);
+
+    lazyRender(callback?: (w: Widget) => void): this {
+        this._lazyRender(callback);
+        return this;
+    }
+
+    animationFrameRender(): this {
+        if (requestAnimationFrame) {
+            requestAnimationFrame(() => {
+                this.render();
+            });
+        } else {
+            //  Not a real replacement for requestAnimationFrame  ---
+            this.renderPromise();
+        }
+        return this;
+    }
+
+    enter(_domNode: HTMLElement, _element) { }
+    preUpdate(_domNode: HTMLElement, _element) { }
+    update(_domNode: HTMLElement, _element) { }
+    postUpdate(_domNode: HTMLElement, _element) { }
+    exit(_domNode?: HTMLElement, _element?) {
+        this.publishedWidgets().forEach(w => w.target(null));
+    }
+}
+Widget.prototype._class += " common_Widget";
+
+export interface Widget {
+    fields(): Field[];
+    fields(_: Field[]): this;
+    classed(classID: string): boolean;
+    classed(classID: string, _: boolean): this;
+    classed(): { [classID: string]: boolean };
+    classed(_: { [classID: string]: boolean }): this;
+}
+
+Widget._idSeed = "_w";
+
+Widget.prototype.publishProxy("fields", "_db", "fields");
+Widget.prototype.publish("classed", {}, "object", "HTML Classes", null, { tags: ["Private"] });
+const origClassed = Widget.prototype.classed;
+Widget.prototype.classed = function (this: Widget, str_obj?: string | { [classID: string]: boolean }, _?: boolean) {
+    if (typeof str_obj === "string") {
+        if (arguments.length === 1) return origClassed.call(this)[str_obj];
+        const classed = origClassed.call(this);
+        origClassed.call(this, { ...classed, [str_obj]: _ });
+        return this;
+    }
+    return origClassed.apply(this, arguments);
+};