@hpcc-js/marshaller 2.28.5 → 2.28.7

package/src/dashy.ts

@@ -1,521 +1,521 @@
-import { JSEditor, JSONEditor } from "@hpcc-js/codemirror";
-import { Button, PropertyExt, publish, publishProxy, Utility, Widget } from "@hpcc-js/common";
-import { DDL1, DDL2, ddl2Schema, isDDL2Schema, upgrade } from "@hpcc-js/ddl-shim";
-import { Graph } from "@hpcc-js/graph";
-import { ChartPanel } from "@hpcc-js/layout";
-import { CommandPalette, CommandRegistry, ContextMenu, SplitPanel, TabPanel, WidgetAdapter } from "@hpcc-js/phosphor";
-import { scopedLogger } from "@hpcc-js/util";
-import { Activity } from "./ddl2/activities/activity";
-import { Databomb } from "./ddl2/activities/databomb";
-import { DSPicker } from "./ddl2/activities/dspicker";
-import { Dashboard } from "./ddl2/dashboard";
-import { DSTable } from "./ddl2/dsTable";
-import { DVTable } from "./ddl2/dvTable";
-import { GraphAdapter, VertexData } from "./ddl2/graphadapter";
-import { Element, ElementContainer, State } from "./ddl2/model/element";
-import { Visualization } from "./ddl2/model/visualization";
-import { VizChartPanel } from "./ddl2/model/vizChartPanel";
-import { PipelineSplitPanel } from "./ddl2/pipelinePanel";
-
-const logger = scopedLogger("marshaller/dashy");
-
-import "../src/dashy.css";
-
-export type FocusType = Element | Activity | Visualization | VizChartPanel | State | undefined;
-
-class DDLPreview extends ChartPanel {
-
-    private _save = new Button().faChar("fa-save").tooltip("Save")
-        .on("click", () => {
-            const obj = JSON.parse(this._jsonEditor.text());
-            this._dashy.importDDL(obj);
-            this.updateToolbar();
-        });
-
-    private _reset = new Button().faChar("fa-undo").tooltip("Reset")
-        .on("click", () => {
-            this._jsonEditor
-                .text(this._ddl)
-                .lazyRender()
-                ;
-            this.updateToolbar();
-        });
-
-    private _jsonEditor = new JSONEditor()
-        .on("changes", (changes: object[]) => {
-            this.updateToolbar();
-        });
-
-    constructor(private _dashy: Dashy) {
-        super();
-        this._titleBar.buttons([this._save, this._reset]);
-        this.widget(this._jsonEditor);
-    }
-
-    private _ddl;
-    ddl(_: DDL2.Schema): this {
-        this._ddl = JSON.stringify(_, undefined, 4);
-        return this;
-    }
-
-    private _prevJson: string;
-    update(domNode, element) {
-        super.update(domNode, element);
-        if (this._prevJson !== this._ddl) {
-            this._prevJson = this._ddl;
-            this._jsonEditor.text(this._ddl);
-        }
-        this.updateToolbar();
-    }
-
-    updateToolbar() {
-        const editorJson = this._jsonEditor.text();
-        this._save.enabled(this._ddl !== editorJson).lazyRender();
-        this._reset.enabled(this._ddl !== editorJson).lazyRender();
-    }
-}
-
-export class Dashy extends SplitPanel {
-
-    private _elementContainer: ElementContainer = new ElementContainer();
-
-    private _lhsSheet = new TabPanel();
-    private _lhsDashboard: Dashboard = new Dashboard(this._elementContainer)
-        .on("vizActivation", (elem: Element, wa: WidgetAdapter) => {
-            this.focus(this._lhsDashboard, elem);
-        })
-        .on("vizStateChanged", (elem: Element) => {
-            for (const filteredViz of this._elementContainer.filteredBy(elem.id())) {
-                if (this.focus() === filteredViz) {
-                    this._rhsSplitView.refreshPreview();
-                }
-            }
-        })
-        ;
-    private _lhsDataviews: DVTable = new DVTable(this._elementContainer)
-        .on("click", (row: any, col: string, sel: boolean, ext: any) => {
-            this.focus(this._lhsDataviews, row.__lparam);
-            this._rhsSplitView.refreshPreview();
-        })
-        ;
-    private _lhsDatasources: DSTable = new DSTable(this._elementContainer)
-        .on("click", (row: any, col: string, sel: boolean, ext: any) => {
-            this.focus(this._lhsDatasources, row.__lparam);
-            this._rhsSplitView.refreshPreview();
-        })
-        ;
-    private _graphAdapter = new GraphAdapter(this._elementContainer);
-    private _lhsPipeline: Graph = new Graph()
-        .layout("Hierarchy")
-        .allowDragging(false)
-        .applyScaleOnLayout(true)
-        .on("vertex_click", (row: any, col: string, sel: boolean, ext: any) => {
-            const obj: VertexData = row.__lparam[0] || {};
-            this.focus(this._lhsPipeline, obj.state || obj.chartPanel || obj.visualization || obj.activity || obj.view);
-        })
-        .on("vertex_contextmenu", (row: any, col: string, sel: boolean, ext: any) => {
-        })
-        ;
-    private _lhsDebugSheet = new TabPanel();
-    private _lhsDebugDDLEditor = new DDLPreview(this);
-    private _lhsDebugDDLSchema = new JSONEditor().json(ddl2Schema);
-    private _lhsDebugJSEditor = new JSEditor();
-    private _lhsDebugCloneEC: ElementContainer = new ElementContainer();
-    private _lhsDebugClone: Dashboard = new Dashboard(this._lhsDebugCloneEC).hideSingleTabs(true).titleVisible(false);
-    private _lhsDebugDDLv1 = new JSONEditor();
-    private _lhsDebugDDLv2 = new JSONEditor();
-
-    private _rhsSplitView = new PipelineSplitPanel();
-
-    @publishProxy("_rhsSplitView")
-    disableActivities: publish<this, string[]>;
-
-    private _fileOpen;
-
-    static create(target: string, ddl?: DDL1.DDLSchema | DDL2.Schema, baseUrl?: string, wuid?: string): Promise<Dashy> {
-        return new Promise((resolve, reject) => {
-            const dashy = new Dashy()
-                .target(target)
-                .render((w: Dashy) => {
-                    if (ddl) {
-                        w.importDDL(ddl, baseUrl, wuid).then(() => {
-                            resolve(dashy);
-                        });
-                    } else {
-                        resolve(dashy);
-                    }
-                });
-        });
-    }
-
-    constructor() {
-        super("horizontal");
-    }
-
-    elementContainer(): ElementContainer {
-        return this._elementContainer;
-    }
-
-    clear(): Promise<void> {
-        this._lhsDebugSheet.removeWidget(this._lhsDebugDDLv1);
-        this._lhsDebugSheet.removeWidget(this._lhsDebugDDLv2);
-        this._elementContainer.clear();
-        this._graphAdapter.clear();
-        this.focus(this._lhsDashboard, undefined);
-        return this.loadDashboard().then(() => {
-            return this._elementContainer.refresh();
-        }).then(ec => {
-            return;
-        });
-    }
-
-    save(): DDL2.Schema {
-        return this._lhsDashboard.save();
-    }
-
-    restore(json: DDL2.Schema): Promise<void> {
-        this._lhsSheet.active(this._lhsDashboard);
-        return this.clear().then(() => {
-            this._lhsDashboard.restore(json);
-            this._lhsDataviews.render();
-            this._lhsDatasources.render();
-            return this._lhsDashboard.renderPromise().then(() => {
-                const elements = this._elementContainer.elements();
-                if (elements.length) {
-                    this._lhsDashboard.activate(elements[0]);
-                }
-                return this._elementContainer.refresh();
-            }).then(() => {
-                let hasError = false;
-                for (const error of this._elementContainer.validate()) {
-                    hasError = true;
-                    logger.warning(error.elementID + " (" + error.source + "):  " + error.msg);
-                }
-                if (hasError) {
-                    //  Re-render to highlight errrors  ---
-                    this._lhsDashboard.renderPromise();
-                }
-            });
-        });
-    }
-
-    importDDL(ddl: DDL1.DDLSchema | DDL2.Schema, baseUrl?: string, wuid?: string, dermatologyJson: object = {}): Promise<void> {
-        const ddl2: DDL2.Schema = isDDL2Schema(ddl) ? ddl : upgrade(ddl, baseUrl, wuid, true, dermatologyJson);
-        const retVal = this.restore(ddl2);
-        if (isDDL2Schema(ddl)) {
-            this._lhsDebugDDLv2.json(ddl2);
-            this._lhsDebugSheet
-                .addWidget(this._lhsDebugDDLv2, "orig v2")
-                ;
-        } else {
-            this._lhsDebugDDLv1.json(ddl);
-            this._lhsDebugDDLv2.json(ddl2);
-            this._lhsDebugSheet
-                .addWidget(this._lhsDebugDDLv1, "v1")
-                .addWidget(this._lhsDebugDDLv2, "v1 -> v2")
-                ;
-        }
-        return retVal;
-    }
-
-    activeLHS(): Widget {
-        let retVal = this._lhsSheet.active();
-        if (retVal === this._lhsDebugSheet) {
-            retVal = this._lhsDebugSheet.active();
-        }
-        return retVal;
-    }
-
-    activeRHS(): Widget {
-        return this._rhsSplitView;
-    }
-
-    private _currSelection: { [sourceID: string]: FocusType } = {};
-
-    private focusAsElement(): Element | undefined {
-        const currSelection = this.focus();
-        return currSelection instanceof Element ? currSelection : undefined;
-    }
-
-    private focus(): FocusType;
-    private focus(source: Widget, item: FocusType): this;
-    private focus(source?: Widget, item?: FocusType): FocusType | this {
-        if (!arguments.length) return this._currSelection[this.activeLHS().id()];
-        if (this._currSelection[source.id()] !== item) {
-            this._currSelection[source.id()] = item;
-            this.loadRHSSplit();
-        }
-        return this;
-    }
-
-    loadRHSSplit() {
-        this._rhsSplitView.loadDataProps(this.focus());
-    }
-
-    loadDataviews(): Promise<Widget | undefined> {
-        if (this.activeLHS() === this._lhsDataviews) {
-            return this._lhsDataviews.renderPromise();
-        }
-        return Promise.resolve(undefined);
-    }
-
-    loadDatasources(): Promise<Widget | undefined> {
-        if (this.activeLHS() === this._lhsDatasources) {
-            return this._lhsDatasources.renderPromise();
-        }
-        return Promise.resolve(undefined);
-    }
-
-    loadDashboard(): Promise<Widget | undefined> {
-        if (this.activeLHS() === this._lhsDashboard) {
-            this._elementContainer.validate();
-            return this._lhsDashboard.renderPromise();
-        }
-        return Promise.resolve(undefined);
-    }
-
-    loadGraph() {
-        this._lhsPipeline
-            .data({ ...this._graphAdapter.createGraph() }, true)
-            ;
-        if (this.activeLHS() === this._lhsPipeline) {
-            this._lhsPipeline
-                .lazyRender()
-                ;
-        }
-    }
-
-    loadDDL() {
-        this._lhsDebugDDLEditor
-            .ddl(this._lhsDashboard.ddl())
-            ;
-        if (this.activeLHS() === this._lhsDebugDDLEditor) {
-            this._lhsDebugDDLEditor
-                .lazyRender()
-                ;
-        }
-    }
-
-    loadJavaScript() {
-        this._lhsDebugJSEditor
-            .javascript(this._lhsDashboard.javascript())
-            ;
-        if (this.activeLHS() === this._lhsDebugJSEditor) {
-            this._lhsDebugJSEditor
-                .lazyRender()
-                ;
-        }
-    }
-
-    loadClone() {
-        const json = this.save();
-        this._lhsDebugCloneEC.clear();
-        this._lhsDebugClone.renderPromise().then(() => {
-            this._lhsDebugClone.restore(json);
-            this._lhsDebugClone.renderPromise().then(() => {
-                return this._lhsDebugCloneEC.refresh();
-            }).then(() => {
-                for (const error of this._lhsDebugCloneEC.validate()) {
-                    logger.warning(error.elementID + " (" + error.source + "):  " + error.msg);
-                }
-            });
-        });
-    }
-
-    initMenu() {
-        const commands = new CommandRegistry();
-
-        //  Dashboard  Commands  ---
-        commands.addCommand("dash_add", {
-            label: "Add View",
-            execute: () => {
-                const newElem = new Element(this._elementContainer);
-                this._elementContainer.append(newElem);
-                this.loadDashboard().then(() => {
-                    newElem.refresh().then(() => {
-                        this._lhsDashboard.activate(newElem);
-                    });
-                });
-            }
-        });
-
-        commands.addCommand("dash_clear", {
-            label: "Clear",
-            execute: () => {
-                this.clear();
-            }
-        });
-
-        commands.addCommand("dash_save", {
-            label: "Save",
-            execute: () => {
-                const text = JSON.stringify(this.save(), null, "  ");
-                Utility.downloadString("JSON", text, "dashy");
-            }
-        });
-
-        commands.addCommand("dash_load", {
-            label: "Open",
-            execute: () => {
-                this._fileOpen.property("accept", ".dashy,.json");
-                this._fileOpen.node().click();
-            }
-        });
-
-        //  Model Commands  ---
-        const palette = new CommandPalette({ commands });
-        palette.addItem({ command: "addWUResult", category: "Notebook" });
-        palette.addItem({ command: "addView", category: "Notebook" });
-        palette.addItem({ command: "remove", category: "Notebook" });
-        palette.id = "palette";
-
-        const contextMenu = new ContextMenu({ commands });
-
-        contextMenu.addItem({ command: "dash_add", selector: `#${this._lhsDashboard.id()}` });
-        contextMenu.addItem({ command: "dash_clear", selector: `#${this._lhsDashboard.id()}` });
-        contextMenu.addItem({ type: "separator", selector: `#${this._lhsDashboard.id()}` });
-
-        contextMenu.addItem({ command: "dash_load", selector: `#${this.id()}` });
-        contextMenu.addItem({ command: "dash_save", selector: `#${this.id()}` });
-
-        document.addEventListener("contextmenu", (event: MouseEvent) => {
-            if (contextMenu.open(event)) {
-                event.preventDefault();
-            }
-        });
-    }
-
-    addDatabomb(label: string, payload: string, format: "csv" | "tsv" | "json") {
-        const databomb = new Databomb().id(label).format(format).payload(payload);
-        this._elementContainer.appendDatasource(databomb);
-        const newElem = new Element(this._elementContainer);
-        const ds = newElem.hipiePipeline().datasource();
-        if (ds instanceof DSPicker) {
-            ds.datasourceID(databomb.id());
-        }
-        this._elementContainer.append(newElem);
-        this.loadDashboard().then(() => {
-            newElem.refresh().then(() => {
-                this._lhsDashboard.activate(newElem);
-            });
-        });
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this
-            .addWidget(this._lhsSheet)
-            .addWidget(this._rhsSplitView)
-            ;
-        this._lhsSheet
-            .addWidget(this._lhsDashboard, "Dashboard")
-            .addWidget(this._lhsDataviews, "Dataviews")
-            .addWidget(this._lhsDatasources, "Datasources")
-            .addWidget(this._lhsPipeline, "Pipeline")
-            .addWidget(this._lhsDebugSheet, "Debug")
-            .on("childActivation", (w: Widget) => {
-                switch (w) {
-                    case this._lhsDataviews:
-                        this.loadRHSSplit();
-                        break;
-                    case this._lhsDatasources:
-                        this.loadRHSSplit();
-                        break;
-                    case this._lhsDashboard:
-                        this.loadRHSSplit();
-                        break;
-                    case this._lhsPipeline:
-                        this.loadRHSSplit();
-                        this.loadGraph();
-                        break;
-                    case this._lhsDebugSheet:
-                        this._lhsDebugSheet.childActivation(this._lhsDebugSheet.active());
-                        break;
-                }
-            })
-            ;
-        this._lhsDebugSheet
-            .addWidget(this._lhsDebugDDLEditor, "v2")
-            .addWidget(this._lhsDebugDDLSchema, "Schema")
-            .addWidget(this._lhsDebugJSEditor, "TS")
-            .addWidget(this._lhsDebugClone, "Clone")
-            .on("childActivation", (w: Widget) => {
-                switch (w) {
-                    case this._lhsDebugDDLEditor:
-                        this.loadRHSSplit();
-                        this.loadDDL();
-                        break;
-                    case this._lhsDebugJSEditor:
-                        this.loadRHSSplit();
-                        this.loadJavaScript();
-                        break;
-                    case this._lhsDebugClone:
-                        this.loadClone();
-                        break;
-                }
-            })
-            ;
-
-        this.initMenu();
-        this._rhsSplitView.on("propChanged", (id: string, newValue: any, oldValue: any, source: PropertyExt) => {
-            const currElement = this.focusAsElement();
-            if (currElement) {
-                currElement.refresh().then(() => {
-                    this._rhsSplitView.refreshPreview();
-                });
-            } else {
-                this._rhsSplitView.refreshPreview();
-            }
-            switch (this.activeLHS()) {
-                case this._lhsDashboard:
-                    this.loadDashboard();
-                    break;
-                case this._lhsDatasources:
-                    this._elementContainer.refresh();
-                    break;
-                case this._lhsPipeline:
-                    this.loadGraph();
-                    break;
-                case this._lhsDebugDDLEditor:
-                    this.loadDDL();
-                    break;
-                case this._lhsDebugClone:
-                    this.loadClone();
-                    break;
-            }
-        });
-
-        const context = this;
-        this._fileOpen = element.append("input")
-            .attr("type", "file")
-            .property("accept", ".dashy,.json")
-            .style("display", "none")
-            .on("change", function () {
-                let i = 0;
-                let f = this.files[i];
-                while (f) {
-                    const reader = new FileReader();
-                    reader.onload = (function (theFile) {
-                        return function (e) {
-                            try {
-                                const result = Array.isArray(e.target.result) ? e.target.result[0] : e.target.result;
-                                const json = JSON.parse(result);
-                                context.importDDL(json);
-                            } catch (ex) {
-                                alert("ex when trying to parse json = " + ex);
-                            }
-                        };
-                    })(f);
-                    reader.readAsText(f);
-                    f = this.files[++i];
-                    break;
-                }
-            })
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-    }
-}
-Dashy.prototype._class += " composite_Dashy";
+import { JSEditor, JSONEditor } from "@hpcc-js/codemirror";
+import { Button, PropertyExt, publish, publishProxy, Utility, Widget } from "@hpcc-js/common";
+import { DDL1, DDL2, ddl2Schema, isDDL2Schema, upgrade } from "@hpcc-js/ddl-shim";
+import { Graph } from "@hpcc-js/graph";
+import { ChartPanel } from "@hpcc-js/layout";
+import { CommandPalette, CommandRegistry, ContextMenu, SplitPanel, TabPanel, WidgetAdapter } from "@hpcc-js/phosphor";
+import { scopedLogger } from "@hpcc-js/util";
+import { Activity } from "./ddl2/activities/activity";
+import { Databomb } from "./ddl2/activities/databomb";
+import { DSPicker } from "./ddl2/activities/dspicker";
+import { Dashboard } from "./ddl2/dashboard";
+import { DSTable } from "./ddl2/dsTable";
+import { DVTable } from "./ddl2/dvTable";
+import { GraphAdapter, VertexData } from "./ddl2/graphadapter";
+import { Element, ElementContainer, State } from "./ddl2/model/element";
+import { Visualization } from "./ddl2/model/visualization";
+import { VizChartPanel } from "./ddl2/model/vizChartPanel";
+import { PipelineSplitPanel } from "./ddl2/pipelinePanel";
+
+const logger = scopedLogger("marshaller/dashy");
+
+import "../src/dashy.css";
+
+export type FocusType = Element | Activity | Visualization | VizChartPanel | State | undefined;
+
+class DDLPreview extends ChartPanel {
+
+    private _save = new Button().faChar("fa-save").tooltip("Save")
+        .on("click", () => {
+            const obj = JSON.parse(this._jsonEditor.text());
+            this._dashy.importDDL(obj);
+            this.updateToolbar();
+        });
+
+    private _reset = new Button().faChar("fa-undo").tooltip("Reset")
+        .on("click", () => {
+            this._jsonEditor
+                .text(this._ddl)
+                .lazyRender()
+                ;
+            this.updateToolbar();
+        });
+
+    private _jsonEditor = new JSONEditor()
+        .on("changes", (changes: object[]) => {
+            this.updateToolbar();
+        });
+
+    constructor(private _dashy: Dashy) {
+        super();
+        this._titleBar.buttons([this._save, this._reset]);
+        this.widget(this._jsonEditor);
+    }
+
+    private _ddl;
+    ddl(_: DDL2.Schema): this {
+        this._ddl = JSON.stringify(_, undefined, 4);
+        return this;
+    }
+
+    private _prevJson: string;
+    update(domNode, element) {
+        super.update(domNode, element);
+        if (this._prevJson !== this._ddl) {
+            this._prevJson = this._ddl;
+            this._jsonEditor.text(this._ddl);
+        }
+        this.updateToolbar();
+    }
+
+    updateToolbar() {
+        const editorJson = this._jsonEditor.text();
+        this._save.enabled(this._ddl !== editorJson).lazyRender();
+        this._reset.enabled(this._ddl !== editorJson).lazyRender();
+    }
+}
+
+export class Dashy extends SplitPanel {
+
+    private _elementContainer: ElementContainer = new ElementContainer();
+
+    private _lhsSheet = new TabPanel();
+    private _lhsDashboard: Dashboard = new Dashboard(this._elementContainer)
+        .on("vizActivation", (elem: Element, wa: WidgetAdapter) => {
+            this.focus(this._lhsDashboard, elem);
+        })
+        .on("vizStateChanged", (elem: Element) => {
+            for (const filteredViz of this._elementContainer.filteredBy(elem.id())) {
+                if (this.focus() === filteredViz) {
+                    this._rhsSplitView.refreshPreview();
+                }
+            }
+        })
+        ;
+    private _lhsDataviews: DVTable = new DVTable(this._elementContainer)
+        .on("click", (row: any, col: string, sel: boolean, ext: any) => {
+            this.focus(this._lhsDataviews, row.__lparam);
+            this._rhsSplitView.refreshPreview();
+        })
+        ;
+    private _lhsDatasources: DSTable = new DSTable(this._elementContainer)
+        .on("click", (row: any, col: string, sel: boolean, ext: any) => {
+            this.focus(this._lhsDatasources, row.__lparam);
+            this._rhsSplitView.refreshPreview();
+        })
+        ;
+    private _graphAdapter = new GraphAdapter(this._elementContainer);
+    private _lhsPipeline: Graph = new Graph()
+        .layout("Hierarchy")
+        .allowDragging(false)
+        .applyScaleOnLayout(true)
+        .on("vertex_click", (row: any, col: string, sel: boolean, ext: any) => {
+            const obj: VertexData = row.__lparam[0] || {};
+            this.focus(this._lhsPipeline, obj.state || obj.chartPanel || obj.visualization || obj.activity || obj.view);
+        })
+        .on("vertex_contextmenu", (row: any, col: string, sel: boolean, ext: any) => {
+        })
+        ;
+    private _lhsDebugSheet = new TabPanel();
+    private _lhsDebugDDLEditor = new DDLPreview(this);
+    private _lhsDebugDDLSchema = new JSONEditor().json(ddl2Schema);
+    private _lhsDebugJSEditor = new JSEditor();
+    private _lhsDebugCloneEC: ElementContainer = new ElementContainer();
+    private _lhsDebugClone: Dashboard = new Dashboard(this._lhsDebugCloneEC).hideSingleTabs(true).titleVisible(false);
+    private _lhsDebugDDLv1 = new JSONEditor();
+    private _lhsDebugDDLv2 = new JSONEditor();
+
+    private _rhsSplitView = new PipelineSplitPanel();
+
+    @publishProxy("_rhsSplitView")
+    disableActivities: publish<this, string[]>;
+
+    private _fileOpen;
+
+    static create(target: string, ddl?: DDL1.DDLSchema | DDL2.Schema, baseUrl?: string, wuid?: string): Promise<Dashy> {
+        return new Promise((resolve, reject) => {
+            const dashy = new Dashy()
+                .target(target)
+                .render((w: Dashy) => {
+                    if (ddl) {
+                        w.importDDL(ddl, baseUrl, wuid).then(() => {
+                            resolve(dashy);
+                        });
+                    } else {
+                        resolve(dashy);
+                    }
+                });
+        });
+    }
+
+    constructor() {
+        super("horizontal");
+    }
+
+    elementContainer(): ElementContainer {
+        return this._elementContainer;
+    }
+
+    clear(): Promise<void> {
+        this._lhsDebugSheet.removeWidget(this._lhsDebugDDLv1);
+        this._lhsDebugSheet.removeWidget(this._lhsDebugDDLv2);
+        this._elementContainer.clear();
+        this._graphAdapter.clear();
+        this.focus(this._lhsDashboard, undefined);
+        return this.loadDashboard().then(() => {
+            return this._elementContainer.refresh();
+        }).then(ec => {
+            return;
+        });
+    }
+
+    save(): DDL2.Schema {
+        return this._lhsDashboard.save();
+    }
+
+    restore(json: DDL2.Schema): Promise<void> {
+        this._lhsSheet.active(this._lhsDashboard);
+        return this.clear().then(() => {
+            this._lhsDashboard.restore(json);
+            this._lhsDataviews.render();
+            this._lhsDatasources.render();
+            return this._lhsDashboard.renderPromise().then(() => {
+                const elements = this._elementContainer.elements();
+                if (elements.length) {
+                    this._lhsDashboard.activate(elements[0]);
+                }
+                return this._elementContainer.refresh();
+            }).then(() => {
+                let hasError = false;
+                for (const error of this._elementContainer.validate()) {
+                    hasError = true;
+                    logger.warning(error.elementID + " (" + error.source + "):  " + error.msg);
+                }
+                if (hasError) {
+                    //  Re-render to highlight errrors  ---
+                    this._lhsDashboard.renderPromise();
+                }
+            });
+        });
+    }
+
+    importDDL(ddl: DDL1.DDLSchema | DDL2.Schema, baseUrl?: string, wuid?: string, dermatologyJson: object = {}): Promise<void> {
+        const ddl2: DDL2.Schema = isDDL2Schema(ddl) ? ddl : upgrade(ddl, baseUrl, wuid, true, dermatologyJson);
+        const retVal = this.restore(ddl2);
+        if (isDDL2Schema(ddl)) {
+            this._lhsDebugDDLv2.json(ddl2);
+            this._lhsDebugSheet
+                .addWidget(this._lhsDebugDDLv2, "orig v2")
+                ;
+        } else {
+            this._lhsDebugDDLv1.json(ddl);
+            this._lhsDebugDDLv2.json(ddl2);
+            this._lhsDebugSheet
+                .addWidget(this._lhsDebugDDLv1, "v1")
+                .addWidget(this._lhsDebugDDLv2, "v1 -> v2")
+                ;
+        }
+        return retVal;
+    }
+
+    activeLHS(): Widget {
+        let retVal = this._lhsSheet.active();
+        if (retVal === this._lhsDebugSheet) {
+            retVal = this._lhsDebugSheet.active();
+        }
+        return retVal;
+    }
+
+    activeRHS(): Widget {
+        return this._rhsSplitView;
+    }
+
+    private _currSelection: { [sourceID: string]: FocusType } = {};
+
+    private focusAsElement(): Element | undefined {
+        const currSelection = this.focus();
+        return currSelection instanceof Element ? currSelection : undefined;
+    }
+
+    private focus(): FocusType;
+    private focus(source: Widget, item: FocusType): this;
+    private focus(source?: Widget, item?: FocusType): FocusType | this {
+        if (!arguments.length) return this._currSelection[this.activeLHS().id()];
+        if (this._currSelection[source.id()] !== item) {
+            this._currSelection[source.id()] = item;
+            this.loadRHSSplit();
+        }
+        return this;
+    }
+
+    loadRHSSplit() {
+        this._rhsSplitView.loadDataProps(this.focus());
+    }
+
+    loadDataviews(): Promise<Widget | undefined> {
+        if (this.activeLHS() === this._lhsDataviews) {
+            return this._lhsDataviews.renderPromise();
+        }
+        return Promise.resolve(undefined);
+    }
+
+    loadDatasources(): Promise<Widget | undefined> {
+        if (this.activeLHS() === this._lhsDatasources) {
+            return this._lhsDatasources.renderPromise();
+        }
+        return Promise.resolve(undefined);
+    }
+
+    loadDashboard(): Promise<Widget | undefined> {
+        if (this.activeLHS() === this._lhsDashboard) {
+            this._elementContainer.validate();
+            return this._lhsDashboard.renderPromise();
+        }
+        return Promise.resolve(undefined);
+    }
+
+    loadGraph() {
+        this._lhsPipeline
+            .data({ ...this._graphAdapter.createGraph() }, true)
+            ;
+        if (this.activeLHS() === this._lhsPipeline) {
+            this._lhsPipeline
+                .lazyRender()
+                ;
+        }
+    }
+
+    loadDDL() {
+        this._lhsDebugDDLEditor
+            .ddl(this._lhsDashboard.ddl())
+            ;
+        if (this.activeLHS() === this._lhsDebugDDLEditor) {
+            this._lhsDebugDDLEditor
+                .lazyRender()
+                ;
+        }
+    }
+
+    loadJavaScript() {
+        this._lhsDebugJSEditor
+            .javascript(this._lhsDashboard.javascript())
+            ;
+        if (this.activeLHS() === this._lhsDebugJSEditor) {
+            this._lhsDebugJSEditor
+                .lazyRender()
+                ;
+        }
+    }
+
+    loadClone() {
+        const json = this.save();
+        this._lhsDebugCloneEC.clear();
+        this._lhsDebugClone.renderPromise().then(() => {
+            this._lhsDebugClone.restore(json);
+            this._lhsDebugClone.renderPromise().then(() => {
+                return this._lhsDebugCloneEC.refresh();
+            }).then(() => {
+                for (const error of this._lhsDebugCloneEC.validate()) {
+                    logger.warning(error.elementID + " (" + error.source + "):  " + error.msg);
+                }
+            });
+        });
+    }
+
+    initMenu() {
+        const commands = new CommandRegistry();
+
+        //  Dashboard  Commands  ---
+        commands.addCommand("dash_add", {
+            label: "Add View",
+            execute: () => {
+                const newElem = new Element(this._elementContainer);
+                this._elementContainer.append(newElem);
+                this.loadDashboard().then(() => {
+                    newElem.refresh().then(() => {
+                        this._lhsDashboard.activate(newElem);
+                    });
+                });
+            }
+        });
+
+        commands.addCommand("dash_clear", {
+            label: "Clear",
+            execute: () => {
+                this.clear();
+            }
+        });
+
+        commands.addCommand("dash_save", {
+            label: "Save",
+            execute: () => {
+                const text = JSON.stringify(this.save(), null, "  ");
+                Utility.downloadString("JSON", text, "dashy");
+            }
+        });
+
+        commands.addCommand("dash_load", {
+            label: "Open",
+            execute: () => {
+                this._fileOpen.property("accept", ".dashy,.json");
+                this._fileOpen.node().click();
+            }
+        });
+
+        //  Model Commands  ---
+        const palette = new CommandPalette({ commands });
+        palette.addItem({ command: "addWUResult", category: "Notebook" });
+        palette.addItem({ command: "addView", category: "Notebook" });
+        palette.addItem({ command: "remove", category: "Notebook" });
+        palette.id = "palette";
+
+        const contextMenu = new ContextMenu({ commands });
+
+        contextMenu.addItem({ command: "dash_add", selector: `#${this._lhsDashboard.id()}` });
+        contextMenu.addItem({ command: "dash_clear", selector: `#${this._lhsDashboard.id()}` });
+        contextMenu.addItem({ type: "separator", selector: `#${this._lhsDashboard.id()}` });
+
+        contextMenu.addItem({ command: "dash_load", selector: `#${this.id()}` });
+        contextMenu.addItem({ command: "dash_save", selector: `#${this.id()}` });
+
+        document.addEventListener("contextmenu", (event: MouseEvent) => {
+            if (contextMenu.open(event)) {
+                event.preventDefault();
+            }
+        });
+    }
+
+    addDatabomb(label: string, payload: string, format: "csv" | "tsv" | "json") {
+        const databomb = new Databomb().id(label).format(format).payload(payload);
+        this._elementContainer.appendDatasource(databomb);
+        const newElem = new Element(this._elementContainer);
+        const ds = newElem.hipiePipeline().datasource();
+        if (ds instanceof DSPicker) {
+            ds.datasourceID(databomb.id());
+        }
+        this._elementContainer.append(newElem);
+        this.loadDashboard().then(() => {
+            newElem.refresh().then(() => {
+                this._lhsDashboard.activate(newElem);
+            });
+        });
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this
+            .addWidget(this._lhsSheet)
+            .addWidget(this._rhsSplitView)
+            ;
+        this._lhsSheet
+            .addWidget(this._lhsDashboard, "Dashboard")
+            .addWidget(this._lhsDataviews, "Dataviews")
+            .addWidget(this._lhsDatasources, "Datasources")
+            .addWidget(this._lhsPipeline, "Pipeline")
+            .addWidget(this._lhsDebugSheet, "Debug")
+            .on("childActivation", (w: Widget) => {
+                switch (w) {
+                    case this._lhsDataviews:
+                        this.loadRHSSplit();
+                        break;
+                    case this._lhsDatasources:
+                        this.loadRHSSplit();
+                        break;
+                    case this._lhsDashboard:
+                        this.loadRHSSplit();
+                        break;
+                    case this._lhsPipeline:
+                        this.loadRHSSplit();
+                        this.loadGraph();
+                        break;
+                    case this._lhsDebugSheet:
+                        this._lhsDebugSheet.childActivation(this._lhsDebugSheet.active());
+                        break;
+                }
+            })
+            ;
+        this._lhsDebugSheet
+            .addWidget(this._lhsDebugDDLEditor, "v2")
+            .addWidget(this._lhsDebugDDLSchema, "Schema")
+            .addWidget(this._lhsDebugJSEditor, "TS")
+            .addWidget(this._lhsDebugClone, "Clone")
+            .on("childActivation", (w: Widget) => {
+                switch (w) {
+                    case this._lhsDebugDDLEditor:
+                        this.loadRHSSplit();
+                        this.loadDDL();
+                        break;
+                    case this._lhsDebugJSEditor:
+                        this.loadRHSSplit();
+                        this.loadJavaScript();
+                        break;
+                    case this._lhsDebugClone:
+                        this.loadClone();
+                        break;
+                }
+            })
+            ;
+
+        this.initMenu();
+        this._rhsSplitView.on("propChanged", (id: string, newValue: any, oldValue: any, source: PropertyExt) => {
+            const currElement = this.focusAsElement();
+            if (currElement) {
+                currElement.refresh().then(() => {
+                    this._rhsSplitView.refreshPreview();
+                });
+            } else {
+                this._rhsSplitView.refreshPreview();
+            }
+            switch (this.activeLHS()) {
+                case this._lhsDashboard:
+                    this.loadDashboard();
+                    break;
+                case this._lhsDatasources:
+                    this._elementContainer.refresh();
+                    break;
+                case this._lhsPipeline:
+                    this.loadGraph();
+                    break;
+                case this._lhsDebugDDLEditor:
+                    this.loadDDL();
+                    break;
+                case this._lhsDebugClone:
+                    this.loadClone();
+                    break;
+            }
+        });
+
+        const context = this;
+        this._fileOpen = element.append("input")
+            .attr("type", "file")
+            .property("accept", ".dashy,.json")
+            .style("display", "none")
+            .on("change", function () {
+                let i = 0;
+                let f = this.files[i];
+                while (f) {
+                    const reader = new FileReader();
+                    reader.onload = (function (theFile) {
+                        return function (e) {
+                            try {
+                                const result = Array.isArray(e.target.result) ? e.target.result[0] : e.target.result;
+                                const json = JSON.parse(result);
+                                context.importDDL(json);
+                            } catch (ex) {
+                                alert("ex when trying to parse json = " + ex);
+                            }
+                        };
+                    })(f);
+                    reader.readAsText(f);
+                    f = this.files[++i];
+                    break;
+                }
+            })
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+    }
+}
+Dashy.prototype._class += " composite_Dashy";