@hpcc-js/marshaller 2.28.5 → 2.28.7

package/src/ddl2/dashboard.ts

@@ -1,330 +1,330 @@
-import { Button, Spacer, ToggleButton, Widget } from "@hpcc-js/common";
-import { DDL1, DDL2, isDDL2Schema, upgrade } from "@hpcc-js/ddl-shim";
-import { ChartPanel } from "@hpcc-js/layout";
-import { text as d3Text } from "d3-fetch";
-import { Activity } from "./activities/activity";
-import { Databomb } from "./activities/databomb";
-import { DSPicker } from "./activities/dspicker";
-import { Filters } from "./activities/filter";
-import { Form, FormField } from "./activities/form";
-import { GroupBy } from "./activities/groupby";
-import { Limit } from "./activities/limit";
-import { Project } from "./activities/project";
-import { Sort } from "./activities/sort";
-import { DashboardDockPanel } from "./dashboardDockPanel";
-import { DashboardGrid } from "./dashboardGrid";
-import { DDLAdapter } from "./ddl";
-import { JavaScriptAdapter } from "./javascriptadapter";
-import { Element, ElementContainer } from "./model/element";
-
-import "../../src/ddl2/dashboard.css";
-
-export interface IDockPanel {
-    layoutObj(_: object | null): this;
-    layout();
-    widgets();
-    activate(element: Element);
-    hideSingleTabs(bool?: boolean);
-    syncWidgets();
-    syncPopups();
-}
-
-export class Dashboard extends ChartPanel {
-
-    private _dockPanel: IDockPanel;
-
-    private _designModeButton = new ToggleButton().faChar("fa-object-group").tooltip("Design Mode...")
-        .selected(true)
-        .on("click", () => {
-            if (this._dockPanel instanceof DashboardGrid) {
-                this._dockPanel
-                    .designMode(this._designModeButton.selected())
-                    .lazyRender()
-                    ;
-            }
-        });
-
-    private _addButton = new Button().faChar("fa-plus").tooltip("Add...")
-        .on("click", () => {
-            const newElem = new Element(this._ec);
-            this._ec.append(newElem);
-            this.renderPromise().then(() => {
-                newElem.refresh().then(() => {
-                    this.activate(newElem);
-                });
-            });
-        });
-
-    private _removeButton = new Button().faChar("fa-minus").tooltip("Remove...")
-        .enabled(false)
-        .on("click", () => {
-            const elem = this._prevActive;
-            if (elem && window.confirm(`Remove Widget "${elem.id()}"?`)) {
-                this._ec.clear(elem.id());
-                this.renderPromise().then(() => {
-                    this.vizActivation(undefined);
-                });
-            }
-        });
-
-    private _reloadButton = new Button().faChar("fa-refresh").tooltip("Reload...")
-        .on("click", () => {
-            const json = this.save();
-            this._ec.clear();
-            this.vizActivation(undefined);
-            this.renderPromise().then(() => {
-                this.restore(json);
-                this.renderPromise().then(() => {
-                    this._ec.refresh().then(() => {
-                    });
-                });
-            });
-        });
-
-    private _addSamples = new Button().faChar("fa-database").tooltip("Add Samples")
-        .on("click", () => {
-            Promise.all([
-                d3Text("https://raw.githubusercontent.com/hpcc-systems/Visualization/trunk/utils/data/data/airports.csv"),
-                d3Text("https://raw.githubusercontent.com/hpcc-systems/Visualization/trunk/utils/data/data/carriers.csv"),
-                d3Text("https://raw.githubusercontent.com/hpcc-systems/Visualization/trunk/utils/data/data/stats.csv")
-            ]).then(([airports, carriers, stats]) => {
-                const popupElement = this.addForm("popup", {
-                    type: "form",
-                    id: "global_filter",
-                    fields: [{
-                        type: "string",
-                        id: "Airport"
-                    }, {
-                        type: "string",
-                        id: "Airline"
-                    }]
-                });
-                popupElement.visualization()
-                    .title("Global Filter")
-                    .visibility("flyout")
-                    .chartType("FieldForm")
-                    ;
-                const airportsElement = this.addDatabomb("airports", airports, "csv",
-                    [
-                        new FormField().fieldID("code").type("string"),
-                        new FormField().fieldID("name").type("string"),
-                        new FormField().fieldID("count").type("number")
-                    ],
-                    new Filters(this._ec).remoteFilter([
-                        new Filters.Filter().source(popupElement.id()).mappings([new Filters.Mapping().remoteField("Airport").localField("code").nullable(true)])
-                    ]),
-                    new Sort().column([new Sort.Column().fieldID("count").descending(true)])
-                );
-                airportsElement.chartPanel().title("Airports");
-                const carrierElement = this.addDatabomb("carriers", carriers, "csv",
-                    [
-                        new FormField().fieldID("code").type("string"),
-                        new FormField().fieldID("name").type("string"),
-                        new FormField().fieldID("count").type("number")
-                    ],
-                    new Filters(this._ec).remoteFilter([
-                        new Filters.Filter().source(popupElement.id()).mappings([new Filters.Mapping().remoteField("Airline").localField("code").nullable(true)])
-                    ]),
-                    new Sort().column([new Sort.Column().fieldID("count").descending(true)])
-                );
-                carrierElement.chartPanel().title("Airlines");
-                const statsElement = this.addDatabomb("stats", stats, "csv",
-                    [],
-                    new Filters(this._ec).remoteFilter([
-                        new Filters.Filter().source(airportsElement.id()).mappings([new Filters.Mapping().remoteField("code").localField("airport")]),
-                        new Filters.Filter().source(carrierElement.id()).mappings([new Filters.Mapping().remoteField("code").localField("carrier").nullable(true)])
-                    ]));
-                statsElement.chartPanel().title("Stats");
-                return Promise.all([
-                    popupElement.refresh(),
-                    airportsElement.refresh(),
-                    carrierElement.refresh(),
-                    statsElement.refresh()
-                ]);
-            }).then(() => {
-                this.render();
-            });
-        });
-
-    addDatabomb(label: string, payload: string, format: "csv" | "tsv" | "json" = "csv", databombFields: FormField[], ...activities: Activity[]): Element {
-        const databomb = new Databomb().id(label).format(format).payload(payload);
-        if (databombFields.length > 0) {
-            databomb.databombFields(databombFields);
-        }
-        this._ec.appendDatasource(databomb);
-        const newElem = new Element(this._ec);
-        const ds = newElem.hipiePipeline().datasource();
-        if (ds instanceof DSPicker) {
-            ds.datasourceID(databomb.id());
-        }
-        for (const activity of activities) {
-            if (activity instanceof Filters) {
-                newElem.hipiePipeline().filters(activity);
-            } else if (activity instanceof Project) {
-                newElem.hipiePipeline().project(activity);
-            } else if (activity instanceof GroupBy) {
-                newElem.hipiePipeline().groupBy(activity);
-            } else if (activity instanceof Sort) {
-                newElem.hipiePipeline().sort(activity);
-            } else if (activity instanceof Limit) {
-                newElem.hipiePipeline().limit(activity);
-            }
-        }
-        this._ec.append(newElem);
-        return newElem;
-    }
-
-    addForm(label: string, ddl: DDL2.IForm): Element {
-        const databomb = new Form().id(label).fromDDL(ddl);
-        this._ec.appendDatasource(databomb);
-        const newElem = new Element(this._ec);
-        const ds = newElem.hipiePipeline().datasource();
-        if (ds instanceof DSPicker) {
-            ds.datasourceID(databomb.id());
-        }
-        this._ec.append(newElem);
-        return newElem;
-    }
-
-    static create(target: string, ddl: DDL2.Schema): Promise<Dashboard> {
-        return new Promise((resolve, reject) => {
-            const ec = new ElementContainer();
-            const dashboard = new Dashboard(ec)
-                .target(target)
-                .hideSingleTabs(true)
-                .titleVisible(false)
-                .restore(ddl)
-                .render(w => {
-                    ec.refresh().then(() => {
-                        resolve(dashboard);
-                    });
-                });
-        });
-    }
-
-    constructor(private _ec: ElementContainer) {
-        super();
-        this._ec.on("vizStateChanged", (viz) => {
-            this.vizStateChanged(viz);
-        });
-        this.buttons([this._designModeButton, new Spacer(), this._addButton, this._removeButton, new Spacer(), this._reloadButton, new Spacer(), this._addSamples]);
-        this.ensureDockPanel("dock");
-    }
-
-    ensureDockPanel(mode: "dock" | "grid" = "dock") {
-        if ((mode === "dock" && !(this._dockPanel instanceof DashboardDockPanel)) || (mode === "grid" && !(this._dockPanel instanceof DashboardGrid))) {
-            this._dockPanel = (mode === "dock" ? new DashboardDockPanel(this._ec) : new DashboardGrid(this._ec).designMode(this.titleVisible()))
-                .on("vizActivation", (elem: Element) => {
-                    this.vizActivation(elem);
-                })
-                ;
-            this.widget(this._dockPanel as any);
-        }
-    }
-
-    elementContainer(): ElementContainer {
-        return this._ec;
-    }
-
-    private _hipieProps;
-    hipieProps(): DDL2.IProperties;
-    hipieProps(_: DDL2.IProperties): this;
-    hipieProps(_?: DDL2.IProperties): DDL2.IProperties | this {
-        if (!arguments.length) return this._hipieProps;
-        this._hipieProps = _;
-        return this;
-    }
-
-    ddl(): DDL2.Schema;
-    ddl(_: DDL2.Schema): this;
-    ddl(_?: DDL2.Schema): DDL2.Schema | this {
-        const ddlAdapter = new DDLAdapter(this);
-        if (!arguments.length) return ddlAdapter.write();
-        this._ec.clear();
-        ddlAdapter.read(_);
-        return this;
-    }
-
-    //  Used to delay load a layout after a render...
-    layoutObj(_: object | null): this {
-        this._dockPanel.layoutObj(_);
-        return this;
-    }
-
-    save(): DDL2.Schema {
-        const ddlAdapter = new DDLAdapter(this);
-        return ddlAdapter.write();
-    }
-
-    restore(_: DDL2.Schema, render: boolean = false): this {
-        this.ensureDockPanel(_ && _.properties && _.properties.layout instanceof Array ? "grid" : "dock");
-        const ddlAdapter = new DDLAdapter(this);
-        ddlAdapter.read(_);
-        if (render) {
-            this.renderPromise().then(() => {
-                this._ec.refresh();
-            });
-        }
-        return this;
-    }
-
-    importDDL(ddl: DDL1.DDLSchema | DDL2.Schema, baseUrl?: string, wuid?: string, dermatologyJson: object = {}): this {
-        const ddl2: DDL2.Schema = isDDL2Schema(ddl) ? ddl : upgrade(ddl, baseUrl, wuid, true, dermatologyJson);
-        return this.restore(ddl2, true);
-    }
-
-    javascript(): string {
-        const jsAdapter = new JavaScriptAdapter(this);
-        return jsAdapter.createJavaScript();
-    }
-
-    layout() {
-        return this._dockPanel.layout();
-    }
-
-    widgets(): Widget[] {
-        return this._dockPanel.widgets();
-    }
-
-    activate(element: Element) {
-        this._dockPanel.activate(element);
-    }
-
-    hideSingleTabs(): boolean;
-    hideSingleTabs(_: boolean): this;
-    hideSingleTabs(_?: boolean): boolean | this {
-        if (!arguments.length) return this._dockPanel.hideSingleTabs();
-        this._dockPanel.hideSingleTabs(_);
-        return this;
-    }
-
-    updateButtonState() {
-        this._designModeButton.enabled(this._dockPanel instanceof DashboardGrid).render();
-        this._removeButton.enabled(this._prevActive !== undefined).render();
-    }
-
-    update(domNode: HTMLElement, element) {
-        this._dockPanel.syncWidgets();
-        super.update(domNode, element);
-        this.updateButtonState();
-    }
-
-    private _prevActive: Element;
-    vizActivation(viz: Element) {
-        this._prevActive = viz;
-        this._removeButton.enabled(viz !== undefined).render();
-    }
-
-    vizStateChanged(viz: Element) {
-    }
-
-    render(callback?): this {
-        this._dockPanel.syncPopups();
-        return super.render(w => {
-            if (callback) {
-                callback(w);
-            }
-        });
-    }
-}
-Dashboard.prototype._class += " dashboard_dashboard";
+import { Button, Spacer, ToggleButton, Widget } from "@hpcc-js/common";
+import { DDL1, DDL2, isDDL2Schema, upgrade } from "@hpcc-js/ddl-shim";
+import { ChartPanel } from "@hpcc-js/layout";
+import { text as d3Text } from "d3-fetch";
+import { Activity } from "./activities/activity";
+import { Databomb } from "./activities/databomb";
+import { DSPicker } from "./activities/dspicker";
+import { Filters } from "./activities/filter";
+import { Form, FormField } from "./activities/form";
+import { GroupBy } from "./activities/groupby";
+import { Limit } from "./activities/limit";
+import { Project } from "./activities/project";
+import { Sort } from "./activities/sort";
+import { DashboardDockPanel } from "./dashboardDockPanel";
+import { DashboardGrid } from "./dashboardGrid";
+import { DDLAdapter } from "./ddl";
+import { JavaScriptAdapter } from "./javascriptadapter";
+import { Element, ElementContainer } from "./model/element";
+
+import "../../src/ddl2/dashboard.css";
+
+export interface IDockPanel {
+    layoutObj(_: object | null): this;
+    layout();
+    widgets();
+    activate(element: Element);
+    hideSingleTabs(bool?: boolean);
+    syncWidgets();
+    syncPopups();
+}
+
+export class Dashboard extends ChartPanel {
+
+    private _dockPanel: IDockPanel;
+
+    private _designModeButton = new ToggleButton().faChar("fa-object-group").tooltip("Design Mode...")
+        .selected(true)
+        .on("click", () => {
+            if (this._dockPanel instanceof DashboardGrid) {
+                this._dockPanel
+                    .designMode(this._designModeButton.selected())
+                    .lazyRender()
+                    ;
+            }
+        });
+
+    private _addButton = new Button().faChar("fa-plus").tooltip("Add...")
+        .on("click", () => {
+            const newElem = new Element(this._ec);
+            this._ec.append(newElem);
+            this.renderPromise().then(() => {
+                newElem.refresh().then(() => {
+                    this.activate(newElem);
+                });
+            });
+        });
+
+    private _removeButton = new Button().faChar("fa-minus").tooltip("Remove...")
+        .enabled(false)
+        .on("click", () => {
+            const elem = this._prevActive;
+            if (elem && window.confirm(`Remove Widget "${elem.id()}"?`)) {
+                this._ec.clear(elem.id());
+                this.renderPromise().then(() => {
+                    this.vizActivation(undefined);
+                });
+            }
+        });
+
+    private _reloadButton = new Button().faChar("fa-refresh").tooltip("Reload...")
+        .on("click", () => {
+            const json = this.save();
+            this._ec.clear();
+            this.vizActivation(undefined);
+            this.renderPromise().then(() => {
+                this.restore(json);
+                this.renderPromise().then(() => {
+                    this._ec.refresh().then(() => {
+                    });
+                });
+            });
+        });
+
+    private _addSamples = new Button().faChar("fa-database").tooltip("Add Samples")
+        .on("click", () => {
+            Promise.all([
+                d3Text("https://raw.githubusercontent.com/hpcc-systems/Visualization/trunk/utils/data/data/airports.csv"),
+                d3Text("https://raw.githubusercontent.com/hpcc-systems/Visualization/trunk/utils/data/data/carriers.csv"),
+                d3Text("https://raw.githubusercontent.com/hpcc-systems/Visualization/trunk/utils/data/data/stats.csv")
+            ]).then(([airports, carriers, stats]) => {
+                const popupElement = this.addForm("popup", {
+                    type: "form",
+                    id: "global_filter",
+                    fields: [{
+                        type: "string",
+                        id: "Airport"
+                    }, {
+                        type: "string",
+                        id: "Airline"
+                    }]
+                });
+                popupElement.visualization()
+                    .title("Global Filter")
+                    .visibility("flyout")
+                    .chartType("FieldForm")
+                    ;
+                const airportsElement = this.addDatabomb("airports", airports, "csv",
+                    [
+                        new FormField().fieldID("code").type("string"),
+                        new FormField().fieldID("name").type("string"),
+                        new FormField().fieldID("count").type("number")
+                    ],
+                    new Filters(this._ec).remoteFilter([
+                        new Filters.Filter().source(popupElement.id()).mappings([new Filters.Mapping().remoteField("Airport").localField("code").nullable(true)])
+                    ]),
+                    new Sort().column([new Sort.Column().fieldID("count").descending(true)])
+                );
+                airportsElement.chartPanel().title("Airports");
+                const carrierElement = this.addDatabomb("carriers", carriers, "csv",
+                    [
+                        new FormField().fieldID("code").type("string"),
+                        new FormField().fieldID("name").type("string"),
+                        new FormField().fieldID("count").type("number")
+                    ],
+                    new Filters(this._ec).remoteFilter([
+                        new Filters.Filter().source(popupElement.id()).mappings([new Filters.Mapping().remoteField("Airline").localField("code").nullable(true)])
+                    ]),
+                    new Sort().column([new Sort.Column().fieldID("count").descending(true)])
+                );
+                carrierElement.chartPanel().title("Airlines");
+                const statsElement = this.addDatabomb("stats", stats, "csv",
+                    [],
+                    new Filters(this._ec).remoteFilter([
+                        new Filters.Filter().source(airportsElement.id()).mappings([new Filters.Mapping().remoteField("code").localField("airport")]),
+                        new Filters.Filter().source(carrierElement.id()).mappings([new Filters.Mapping().remoteField("code").localField("carrier").nullable(true)])
+                    ]));
+                statsElement.chartPanel().title("Stats");
+                return Promise.all([
+                    popupElement.refresh(),
+                    airportsElement.refresh(),
+                    carrierElement.refresh(),
+                    statsElement.refresh()
+                ]);
+            }).then(() => {
+                this.render();
+            });
+        });
+
+    addDatabomb(label: string, payload: string, format: "csv" | "tsv" | "json" = "csv", databombFields: FormField[], ...activities: Activity[]): Element {
+        const databomb = new Databomb().id(label).format(format).payload(payload);
+        if (databombFields.length > 0) {
+            databomb.databombFields(databombFields);
+        }
+        this._ec.appendDatasource(databomb);
+        const newElem = new Element(this._ec);
+        const ds = newElem.hipiePipeline().datasource();
+        if (ds instanceof DSPicker) {
+            ds.datasourceID(databomb.id());
+        }
+        for (const activity of activities) {
+            if (activity instanceof Filters) {
+                newElem.hipiePipeline().filters(activity);
+            } else if (activity instanceof Project) {
+                newElem.hipiePipeline().project(activity);
+            } else if (activity instanceof GroupBy) {
+                newElem.hipiePipeline().groupBy(activity);
+            } else if (activity instanceof Sort) {
+                newElem.hipiePipeline().sort(activity);
+            } else if (activity instanceof Limit) {
+                newElem.hipiePipeline().limit(activity);
+            }
+        }
+        this._ec.append(newElem);
+        return newElem;
+    }
+
+    addForm(label: string, ddl: DDL2.IForm): Element {
+        const databomb = new Form().id(label).fromDDL(ddl);
+        this._ec.appendDatasource(databomb);
+        const newElem = new Element(this._ec);
+        const ds = newElem.hipiePipeline().datasource();
+        if (ds instanceof DSPicker) {
+            ds.datasourceID(databomb.id());
+        }
+        this._ec.append(newElem);
+        return newElem;
+    }
+
+    static create(target: string, ddl: DDL2.Schema): Promise<Dashboard> {
+        return new Promise((resolve, reject) => {
+            const ec = new ElementContainer();
+            const dashboard = new Dashboard(ec)
+                .target(target)
+                .hideSingleTabs(true)
+                .titleVisible(false)
+                .restore(ddl)
+                .render(w => {
+                    ec.refresh().then(() => {
+                        resolve(dashboard);
+                    });
+                });
+        });
+    }
+
+    constructor(private _ec: ElementContainer) {
+        super();
+        this._ec.on("vizStateChanged", (viz) => {
+            this.vizStateChanged(viz);
+        });
+        this.buttons([this._designModeButton, new Spacer(), this._addButton, this._removeButton, new Spacer(), this._reloadButton, new Spacer(), this._addSamples]);
+        this.ensureDockPanel("dock");
+    }
+
+    ensureDockPanel(mode: "dock" | "grid" = "dock") {
+        if ((mode === "dock" && !(this._dockPanel instanceof DashboardDockPanel)) || (mode === "grid" && !(this._dockPanel instanceof DashboardGrid))) {
+            this._dockPanel = (mode === "dock" ? new DashboardDockPanel(this._ec) : new DashboardGrid(this._ec).designMode(this.titleVisible()))
+                .on("vizActivation", (elem: Element) => {
+                    this.vizActivation(elem);
+                })
+                ;
+            this.widget(this._dockPanel as any);
+        }
+    }
+
+    elementContainer(): ElementContainer {
+        return this._ec;
+    }
+
+    private _hipieProps;
+    hipieProps(): DDL2.IProperties;
+    hipieProps(_: DDL2.IProperties): this;
+    hipieProps(_?: DDL2.IProperties): DDL2.IProperties | this {
+        if (!arguments.length) return this._hipieProps;
+        this._hipieProps = _;
+        return this;
+    }
+
+    ddl(): DDL2.Schema;
+    ddl(_: DDL2.Schema): this;
+    ddl(_?: DDL2.Schema): DDL2.Schema | this {
+        const ddlAdapter = new DDLAdapter(this);
+        if (!arguments.length) return ddlAdapter.write();
+        this._ec.clear();
+        ddlAdapter.read(_);
+        return this;
+    }
+
+    //  Used to delay load a layout after a render...
+    layoutObj(_: object | null): this {
+        this._dockPanel.layoutObj(_);
+        return this;
+    }
+
+    save(): DDL2.Schema {
+        const ddlAdapter = new DDLAdapter(this);
+        return ddlAdapter.write();
+    }
+
+    restore(_: DDL2.Schema, render: boolean = false): this {
+        this.ensureDockPanel(_ && _.properties && _.properties.layout instanceof Array ? "grid" : "dock");
+        const ddlAdapter = new DDLAdapter(this);
+        ddlAdapter.read(_);
+        if (render) {
+            this.renderPromise().then(() => {
+                this._ec.refresh();
+            });
+        }
+        return this;
+    }
+
+    importDDL(ddl: DDL1.DDLSchema | DDL2.Schema, baseUrl?: string, wuid?: string, dermatologyJson: object = {}): this {
+        const ddl2: DDL2.Schema = isDDL2Schema(ddl) ? ddl : upgrade(ddl, baseUrl, wuid, true, dermatologyJson);
+        return this.restore(ddl2, true);
+    }
+
+    javascript(): string {
+        const jsAdapter = new JavaScriptAdapter(this);
+        return jsAdapter.createJavaScript();
+    }
+
+    layout() {
+        return this._dockPanel.layout();
+    }
+
+    widgets(): Widget[] {
+        return this._dockPanel.widgets();
+    }
+
+    activate(element: Element) {
+        this._dockPanel.activate(element);
+    }
+
+    hideSingleTabs(): boolean;
+    hideSingleTabs(_: boolean): this;
+    hideSingleTabs(_?: boolean): boolean | this {
+        if (!arguments.length) return this._dockPanel.hideSingleTabs();
+        this._dockPanel.hideSingleTabs(_);
+        return this;
+    }
+
+    updateButtonState() {
+        this._designModeButton.enabled(this._dockPanel instanceof DashboardGrid).render();
+        this._removeButton.enabled(this._prevActive !== undefined).render();
+    }
+
+    update(domNode: HTMLElement, element) {
+        this._dockPanel.syncWidgets();
+        super.update(domNode, element);
+        this.updateButtonState();
+    }
+
+    private _prevActive: Element;
+    vizActivation(viz: Element) {
+        this._prevActive = viz;
+        this._removeButton.enabled(viz !== undefined).render();
+    }
+
+    vizStateChanged(viz: Element) {
+    }
+
+    render(callback?): this {
+        this._dockPanel.syncPopups();
+        return super.render(w => {
+            if (callback) {
+                callback(w);
+            }
+        });
+    }
+}
+Dashboard.prototype._class += " dashboard_dashboard";