@hpcc-js/marshaller 2.28.5 → 2.28.7

package/src/ddl2/pipelinePanel.ts

@@ -1,465 +1,465 @@
-import { JSONEditor } from "@hpcc-js/codemirror";
-import { Button, PropertyExt, publish, publishProxy, SelectionBar, SelectionButton, Spacer } from "@hpcc-js/common";
-import { DatasourceTable } from "@hpcc-js/dgrid";
-import { ChartPanel } from "@hpcc-js/layout";
-import { PropertyEditor } from "@hpcc-js/other";
-import { SplitPanel, TabPanel } from "@hpcc-js/phosphor";
-import { Activity } from "./activities/activity";
-import { DatasourceAdapt } from "./activities/databomb";
-import { Datasource } from "./activities/datasource";
-import { DSPicker } from "./activities/dspicker";
-import { Filters } from "./activities/filter";
-import { GroupBy } from "./activities/groupby";
-import { Limit } from "./activities/limit";
-import { Mappings, Project } from "./activities/project";
-import { Sort } from "./activities/sort";
-import { Element as ModelElement, IElementError, State } from "./model/element";
-import { Visualization } from "./model/visualization";
-
-import "../../src/ddl2/pipelinePanel.css";
-
-class PipelineSelectionButton extends SelectionButton {
-
-    _label: string;
-    label(): string;
-    label(_: string): this;
-    label(_?: string): string | this {
-        if (!arguments.length) return this._label;
-        this._label = _;
-        this.tooltip(_);
-        return this;
-    }
-
-    _elementErrors: IElementError[] = [];
-    errors(): IElementError[];
-    errors(_: IElementError[]): this;
-    errors(_?: IElementError[]): IElementError[] | this {
-        if (!arguments.length) return this._elementErrors;
-        this._elementErrors = _;
-        this.classed("error", _.length > 0);
-        // this.element().classed("error", _.length > 0);
-        if (_.length) {
-            this.tooltip(_.map(err => {
-                const errSourceParts = err.source.split(".");
-                errSourceParts.splice(0, 1);
-                return `${errSourceParts.join(".")}:  ${err.msg}`;
-            }).join("\n"));
-        } else {
-            this.tooltip(this._label);
-        }
-        this.render();
-        return this;
-    }
-}
-
-class PipelinePanel extends ChartPanel {
-    _owner: PipelineSplitPanel;
-
-    datasource = new PipelineSelectionButton().faChar("fa-database").label("Datasource").selected(true);
-    filter = new PipelineSelectionButton().faChar("fa-filter").label("Filter");
-    project = new PipelineSelectionButton().faChar("fa-random").label("Project");
-    groupBy = new PipelineSelectionButton().faChar("fa-object-group").label("Group By");
-    sort = new PipelineSelectionButton().faChar("fa-sort-alpha-asc").label("Sort");
-    limit = new PipelineSelectionButton().faChar("fa-list-ol").label("Limit");
-    mappings = new PipelineSelectionButton().faChar("fa-random").label("Mappings");
-    chartPanel = new PipelineSelectionButton().faChar("fa-area-chart").label("Visualization");
-    state = new PipelineSelectionButton().faChar("fa-check-square-o").label("State");
-    debug = new PipelineSelectionButton().faChar("fa-bug").label("Debug");
-    all = new PipelineSelectionButton().faChar("fa-list").label("All");
-
-    _propEditor: PropertyEditor = new PropertyEditor()
-        .show_header(false)
-        .show_settings(false)
-        .showFields(false)
-        ;
-
-    private _buttons = [
-        this.datasource,
-        this.filter,
-        this.project,
-        this.groupBy,
-        this.sort,
-        this.limit,
-        new Spacer(),
-        this.mappings,
-        this.chartPanel,
-        new Spacer(),
-        this.state,
-        this.debug,
-        new Spacer(),
-        this.all
-    ];
-    _pipelineButton: PipelineSelectionButton = this.datasource;
-    private _pipelineSelection = new SelectionBar()
-        .buttons(this._buttons).on("selected", sb => {
-            this._pipelineButton = sb;
-            this.title(sb.label()).render();
-        });
-
-    @publish([], "array", "Disabled pipeline items")
-    disableActivities: publish<this, string[]>;
-
-    constructor(owner: PipelineSplitPanel) {
-        super();
-        this._owner = owner;
-        this.buttons([this._pipelineSelection]);
-        this.title(this.datasource.label());
-        super.widget(this._propEditor);
-        this._propEditor.monitor((id: string, newValue: any, oldValue: any, source: PropertyExt) => {
-            if (source !== this._propEditor) {
-                this.propChanged(id, newValue, oldValue, source);
-                this.updateState();
-            }
-        });
-    }
-
-    selectionButtons(): PipelineSelectionButton[] {
-        return this._pipelineSelection.buttons().filter(b => b instanceof PipelineSelectionButton) as PipelineSelectionButton[];
-    }
-
-    private _propExt: PropertyExt;
-    propExt(): PropertyExt;
-    propExt(_: PropertyExt): this;
-    propExt(_?: PropertyExt): PropertyExt | this {
-        if (!arguments.length) return this._propExt;
-        this._propExt = _;
-        return this;
-    }
-
-    private peAsDatasource(): Datasource {
-        if (this._propExt instanceof Datasource) {
-            return this._propExt;
-        } else if (this._propExt instanceof DSPicker) {
-            return this._propExt;
-        } else if (this._propExt instanceof ModelElement) {
-            return this._propExt.hipiePipeline().datasource();
-        }
-    }
-
-    private peAsFilter(): Filters {
-        if (this._propExt instanceof Filters) {
-            return this._propExt;
-        } else if (this._propExt instanceof ModelElement) {
-            return this._propExt.hipiePipeline().filters();
-        }
-    }
-
-    private peAsProject(): Project {
-        if (this._propExt instanceof Project) {
-            return this._propExt;
-        } else if (this._propExt instanceof ModelElement) {
-            return this._propExt.hipiePipeline().project();
-        }
-    }
-
-    private peAsGroupBy(): GroupBy {
-        if (this._propExt instanceof GroupBy) {
-            return this._propExt;
-        } else if (this._propExt instanceof ModelElement) {
-            return this._propExt.hipiePipeline().groupBy();
-        }
-    }
-
-    private peAsSort(): Sort {
-        if (this._propExt instanceof Sort) {
-            return this._propExt;
-        } else if (this._propExt instanceof ModelElement) {
-            return this._propExt.hipiePipeline().sort();
-        }
-    }
-
-    private peAsLimit(): Limit {
-        if (this._propExt instanceof Limit) {
-            return this._propExt;
-        } else if (this._propExt instanceof ModelElement) {
-            return this._propExt.hipiePipeline().limit();
-        }
-    }
-
-    private peAsMappings(): Mappings {
-        if (this._propExt instanceof Mappings) {
-            return this._propExt;
-        } else if (this._propExt instanceof ModelElement) {
-            return this._propExt.visualization().mappings();
-        } else if (this._propExt instanceof Visualization) {
-            return this._propExt.mappings();
-        }
-    }
-
-    private peAsChartPanel(): ChartPanel | Visualization {
-        if (this._propExt instanceof ChartPanel) {
-            return this._propExt;
-        } else if (this._propExt instanceof Visualization) {
-            return this._propExt;
-        } else if (this._propExt instanceof ModelElement) {
-            return this._propExt.visualization();
-        }
-    }
-
-    private peAsState(): State {
-        if (this._propExt instanceof State) {
-            return this._propExt;
-        } else if (this._propExt instanceof ModelElement) {
-            return this._propExt.state();
-        }
-    }
-
-    selectionButton(): PipelineSelectionButton {
-        if (this._pipelineButton && this._pipelineButton.enabled()) {
-            return this._pipelineButton;
-        }
-        for (const pb of this.selectionButtons()) {
-            if (pb.enabled()) {
-                pb.selected(true);
-                return pb;
-            }
-        }
-        return undefined;
-    }
-
-    _prevPropExt: PropertyExt;
-    _prevPipelineButton: SelectionButton;
-    update(domNode, element) {
-        super.update(domNode, element);
-        this.updateState();
-        const pipelineButton = this.selectionButton();
-        if (this._prevPropExt !== this._propExt || this._prevPipelineButton !== pipelineButton) {
-            this._prevPropExt = this._propExt;
-            this._prevPipelineButton = pipelineButton;
-            if (this._propExt && pipelineButton) {
-                switch (pipelineButton) {
-                    case this.datasource:
-                        this._propEditor.widget(this.peAsDatasource());
-                        break;
-                    case this.filter:
-                        this._propEditor.widget(this.peAsFilter());
-                        break;
-                    case this.project:
-                        this._propEditor.widget(this.peAsProject());
-                        break;
-                    case this.groupBy:
-                        this._propEditor.widget(this.peAsGroupBy());
-                        break;
-                    case this.sort:
-                        this._propEditor.widget(this.peAsSort());
-                        break;
-                    case this.limit:
-                        this._propEditor.widget(this.peAsLimit());
-                        break;
-                    case this.mappings:
-                        this._propEditor.widget(this.peAsMappings());
-                        break;
-                    case this.chartPanel:
-                        this._propEditor.widget(this.peAsChartPanel());
-                        break;
-                    case this.state:
-                        this._propEditor.widget(this.peAsState());
-                        break;
-                    case this.all:
-                        this._propEditor.widget(this._propExt);
-                        break;
-                }
-            } else {
-                this._propEditor.widget(undefined);
-            }
-            this._owner.loadPreview(this._propEditor.widget());
-        }
-    }
-
-    updateButtonState(pe, sb) {
-        sb.enabled(!!pe);
-        sb.errors(!!pe && pe.validate() || []);
-    }
-
-    updateState() {
-        this.selectionButtons().forEach(sb => {
-            if (sb instanceof PipelineSelectionButton) {
-                if (this.disableActivities().indexOf(sb.label()) >= 0) {
-                    this.updateButtonState(undefined, sb);
-                    return;
-                }
-            }
-
-            switch (sb) {
-                case this.datasource:
-                    this.updateButtonState(this.peAsDatasource(), sb);
-                    break;
-                case this.filter:
-                    this.updateButtonState(this.peAsFilter(), sb);
-                    break;
-                case this.project:
-                    this.updateButtonState(this.peAsProject(), sb);
-                    break;
-                case this.groupBy:
-                    this.updateButtonState(this.peAsGroupBy(), sb);
-                    break;
-                case this.sort:
-                    this.updateButtonState(this.peAsSort(), sb);
-                    break;
-                case this.limit:
-                    this.updateButtonState(this.peAsLimit(), sb);
-                    break;
-                case this.mappings:
-                    this.updateButtonState(this.peAsMappings(), sb);
-                    break;
-                case this.chartPanel:
-                    const cp = this.peAsChartPanel();
-                    sb.enabled(!!cp);
-                    break;
-                case this.state:
-                    const st = this.peAsState();
-                    sb.enabled(!!st);
-                    break;
-                case this.debug:
-                    sb.enabled(false);
-                    break;
-                case this.all:
-                    sb.enabled(!!this._propExt);
-                    break;
-            }
-            if (sb.selected()) {
-                this.title(sb.enabled() ? sb.label() : "");
-            }
-        });
-    }
-
-    //  Events  ---
-    propChanged(id: string, newValue: any, oldValue: any, source: PropertyExt) {
-    }
-}
-PipelinePanel.prototype._class += " marshaller_PipelinePanel";
-
-class DDLPreview extends ChartPanel {
-
-    private _save = new Button().faChar("fa-save").tooltip("Save")
-        .on("click", () => {
-            const activity = this.activity();
-            if (activity && (activity as any).fromDDL) {
-                (activity as any).fromDDL(this._jsonEditor.json());
-            }
-            this.updateToolbar();
-        });
-
-    private _reset = new Button().faChar("fa-undo").tooltip("Reset")
-        .on("click", () => {
-            this._jsonEditor
-                .text(this.jsonText())
-                .lazyRender()
-                ;
-            this.updateToolbar();
-        });
-
-    private _jsonEditor = new JSONEditor()
-        .on("changes", (changes: object[]) => {
-            this.updateToolbar();
-        });
-
-    constructor() {
-        super();
-        this._titleBar.buttons([this._save, this._reset]);
-        this.widget(this._jsonEditor);
-    }
-
-    private _activity: PropertyExt;
-    activity(_: PropertyExt): this;
-    activity(): PropertyExt;
-    activity(_?: PropertyExt): PropertyExt | this {
-        if (_ === void 0) return this._activity;
-        if (this._activity !== _) {
-            this._activity = _;
-            delete this._prevJson;
-        }
-        return this;
-    }
-
-    jsonText(): string {
-        const activity = this.activity();
-        return activity && (activity as any).toDDL ? JSON.stringify((activity as any).toDDL(), undefined, 4) : "";
-    }
-
-    private _prevJson: string;
-    update(domNode, element) {
-        super.update(domNode, element);
-        const json = this.jsonText();
-        const editorJson = this._jsonEditor.text();
-        if ((this._prevJson === undefined || this._prevJson === editorJson) && this._prevJson !== json) {
-            this._prevJson = json;
-            this._jsonEditor.text(json);
-        }
-        this.updateToolbar();
-    }
-
-    updateToolbar() {
-        const activity = this.activity() as any;
-        const json = this.jsonText();
-        const editorJson = this._jsonEditor.text();
-        this._save.enabled(activity && activity.fromDDL && json !== editorJson).lazyRender();
-        this._reset.enabled(json !== editorJson).lazyRender();
-    }
-}
-
-export class PipelineSplitPanel extends SplitPanel {
-    private _rhsPropsPanel = new PipelinePanel(this).on("propChanged", (id: string, newValue: any, oldValue: any, source: PropertyExt) => {
-        this.propChanged(id, newValue, oldValue, source);
-    });
-    private _previewPanel = new TabPanel();
-    private _rhsDDLPreview = new DDLPreview();
-    private _rhsDataPreview = new DatasourceTable().pagination(true);
-
-    @publishProxy("_rhsPropsPanel")
-    disableActivities: publish<this, string[]>;
-
-    constructor() {
-        super();
-        this._previewPanel
-            .addWidget(this._rhsDataPreview, "Data")
-            .addWidget(this._rhsDDLPreview, "DDL")
-            ;
-        this
-            .addWidget(this._rhsPropsPanel)
-            .addWidget(this._previewPanel)
-            ;
-    }
-
-    loadDataProps(pe: PropertyExt) {
-        this._rhsPropsPanel
-            .propExt(pe)
-            .render()
-            ;
-    }
-
-    loadPreview(activity: undefined | PropertyExt) {
-        activity = activity instanceof Visualization ? activity.mappings() : activity;
-        this._rhsDataPreview
-            .datasource(new DatasourceAdapt(activity instanceof Activity ? activity : undefined))
-            .lazyRender()
-            ;
-        this._rhsDDLPreview
-            .activity(activity) // instanceof DSPicker ? activity.datasourceRef() : activity)
-            .lazyRender()
-            ;
-    }
-
-    refreshPreview() {
-        const ds = this._rhsDataPreview.datasource() as DatasourceAdapt;
-        if (ds) {
-            ds.exec().then(() => {
-                this._rhsDataPreview
-                    .invalidate()
-                    .lazyRender()
-                    ;
-                this._rhsDDLPreview
-                    .lazyRender()
-                    ;
-            });
-        } else {
-            this._rhsDDLPreview
-                .lazyRender()
-                ;
-        }
-    }
-
-    //  Events  ---
-    propChanged(id: string, newValue: any, oldValue: any, source: PropertyExt) {
-    }
-}
+import { JSONEditor } from "@hpcc-js/codemirror";
+import { Button, PropertyExt, publish, publishProxy, SelectionBar, SelectionButton, Spacer } from "@hpcc-js/common";
+import { DatasourceTable } from "@hpcc-js/dgrid";
+import { ChartPanel } from "@hpcc-js/layout";
+import { PropertyEditor } from "@hpcc-js/other";
+import { SplitPanel, TabPanel } from "@hpcc-js/phosphor";
+import { Activity } from "./activities/activity";
+import { DatasourceAdapt } from "./activities/databomb";
+import { Datasource } from "./activities/datasource";
+import { DSPicker } from "./activities/dspicker";
+import { Filters } from "./activities/filter";
+import { GroupBy } from "./activities/groupby";
+import { Limit } from "./activities/limit";
+import { Mappings, Project } from "./activities/project";
+import { Sort } from "./activities/sort";
+import { Element as ModelElement, IElementError, State } from "./model/element";
+import { Visualization } from "./model/visualization";
+
+import "../../src/ddl2/pipelinePanel.css";
+
+class PipelineSelectionButton extends SelectionButton {
+
+    _label: string;
+    label(): string;
+    label(_: string): this;
+    label(_?: string): string | this {
+        if (!arguments.length) return this._label;
+        this._label = _;
+        this.tooltip(_);
+        return this;
+    }
+
+    _elementErrors: IElementError[] = [];
+    errors(): IElementError[];
+    errors(_: IElementError[]): this;
+    errors(_?: IElementError[]): IElementError[] | this {
+        if (!arguments.length) return this._elementErrors;
+        this._elementErrors = _;
+        this.classed("error", _.length > 0);
+        // this.element().classed("error", _.length > 0);
+        if (_.length) {
+            this.tooltip(_.map(err => {
+                const errSourceParts = err.source.split(".");
+                errSourceParts.splice(0, 1);
+                return `${errSourceParts.join(".")}:  ${err.msg}`;
+            }).join("\n"));
+        } else {
+            this.tooltip(this._label);
+        }
+        this.render();
+        return this;
+    }
+}
+
+class PipelinePanel extends ChartPanel {
+    _owner: PipelineSplitPanel;
+
+    datasource = new PipelineSelectionButton().faChar("fa-database").label("Datasource").selected(true);
+    filter = new PipelineSelectionButton().faChar("fa-filter").label("Filter");
+    project = new PipelineSelectionButton().faChar("fa-random").label("Project");
+    groupBy = new PipelineSelectionButton().faChar("fa-object-group").label("Group By");
+    sort = new PipelineSelectionButton().faChar("fa-sort-alpha-asc").label("Sort");
+    limit = new PipelineSelectionButton().faChar("fa-list-ol").label("Limit");
+    mappings = new PipelineSelectionButton().faChar("fa-random").label("Mappings");
+    chartPanel = new PipelineSelectionButton().faChar("fa-area-chart").label("Visualization");
+    state = new PipelineSelectionButton().faChar("fa-check-square-o").label("State");
+    debug = new PipelineSelectionButton().faChar("fa-bug").label("Debug");
+    all = new PipelineSelectionButton().faChar("fa-list").label("All");
+
+    _propEditor: PropertyEditor = new PropertyEditor()
+        .show_header(false)
+        .show_settings(false)
+        .showFields(false)
+        ;
+
+    private _buttons = [
+        this.datasource,
+        this.filter,
+        this.project,
+        this.groupBy,
+        this.sort,
+        this.limit,
+        new Spacer(),
+        this.mappings,
+        this.chartPanel,
+        new Spacer(),
+        this.state,
+        this.debug,
+        new Spacer(),
+        this.all
+    ];
+    _pipelineButton: PipelineSelectionButton = this.datasource;
+    private _pipelineSelection = new SelectionBar()
+        .buttons(this._buttons).on("selected", sb => {
+            this._pipelineButton = sb;
+            this.title(sb.label()).render();
+        });
+
+    @publish([], "array", "Disabled pipeline items")
+    disableActivities: publish<this, string[]>;
+
+    constructor(owner: PipelineSplitPanel) {
+        super();
+        this._owner = owner;
+        this.buttons([this._pipelineSelection]);
+        this.title(this.datasource.label());
+        super.widget(this._propEditor);
+        this._propEditor.monitor((id: string, newValue: any, oldValue: any, source: PropertyExt) => {
+            if (source !== this._propEditor) {
+                this.propChanged(id, newValue, oldValue, source);
+                this.updateState();
+            }
+        });
+    }
+
+    selectionButtons(): PipelineSelectionButton[] {
+        return this._pipelineSelection.buttons().filter(b => b instanceof PipelineSelectionButton) as PipelineSelectionButton[];
+    }
+
+    private _propExt: PropertyExt;
+    propExt(): PropertyExt;
+    propExt(_: PropertyExt): this;
+    propExt(_?: PropertyExt): PropertyExt | this {
+        if (!arguments.length) return this._propExt;
+        this._propExt = _;
+        return this;
+    }
+
+    private peAsDatasource(): Datasource {
+        if (this._propExt instanceof Datasource) {
+            return this._propExt;
+        } else if (this._propExt instanceof DSPicker) {
+            return this._propExt;
+        } else if (this._propExt instanceof ModelElement) {
+            return this._propExt.hipiePipeline().datasource();
+        }
+    }
+
+    private peAsFilter(): Filters {
+        if (this._propExt instanceof Filters) {
+            return this._propExt;
+        } else if (this._propExt instanceof ModelElement) {
+            return this._propExt.hipiePipeline().filters();
+        }
+    }
+
+    private peAsProject(): Project {
+        if (this._propExt instanceof Project) {
+            return this._propExt;
+        } else if (this._propExt instanceof ModelElement) {
+            return this._propExt.hipiePipeline().project();
+        }
+    }
+
+    private peAsGroupBy(): GroupBy {
+        if (this._propExt instanceof GroupBy) {
+            return this._propExt;
+        } else if (this._propExt instanceof ModelElement) {
+            return this._propExt.hipiePipeline().groupBy();
+        }
+    }
+
+    private peAsSort(): Sort {
+        if (this._propExt instanceof Sort) {
+            return this._propExt;
+        } else if (this._propExt instanceof ModelElement) {
+            return this._propExt.hipiePipeline().sort();
+        }
+    }
+
+    private peAsLimit(): Limit {
+        if (this._propExt instanceof Limit) {
+            return this._propExt;
+        } else if (this._propExt instanceof ModelElement) {
+            return this._propExt.hipiePipeline().limit();
+        }
+    }
+
+    private peAsMappings(): Mappings {
+        if (this._propExt instanceof Mappings) {
+            return this._propExt;
+        } else if (this._propExt instanceof ModelElement) {
+            return this._propExt.visualization().mappings();
+        } else if (this._propExt instanceof Visualization) {
+            return this._propExt.mappings();
+        }
+    }
+
+    private peAsChartPanel(): ChartPanel | Visualization {
+        if (this._propExt instanceof ChartPanel) {
+            return this._propExt;
+        } else if (this._propExt instanceof Visualization) {
+            return this._propExt;
+        } else if (this._propExt instanceof ModelElement) {
+            return this._propExt.visualization();
+        }
+    }
+
+    private peAsState(): State {
+        if (this._propExt instanceof State) {
+            return this._propExt;
+        } else if (this._propExt instanceof ModelElement) {
+            return this._propExt.state();
+        }
+    }
+
+    selectionButton(): PipelineSelectionButton {
+        if (this._pipelineButton && this._pipelineButton.enabled()) {
+            return this._pipelineButton;
+        }
+        for (const pb of this.selectionButtons()) {
+            if (pb.enabled()) {
+                pb.selected(true);
+                return pb;
+            }
+        }
+        return undefined;
+    }
+
+    _prevPropExt: PropertyExt;
+    _prevPipelineButton: SelectionButton;
+    update(domNode, element) {
+        super.update(domNode, element);
+        this.updateState();
+        const pipelineButton = this.selectionButton();
+        if (this._prevPropExt !== this._propExt || this._prevPipelineButton !== pipelineButton) {
+            this._prevPropExt = this._propExt;
+            this._prevPipelineButton = pipelineButton;
+            if (this._propExt && pipelineButton) {
+                switch (pipelineButton) {
+                    case this.datasource:
+                        this._propEditor.widget(this.peAsDatasource());
+                        break;
+                    case this.filter:
+                        this._propEditor.widget(this.peAsFilter());
+                        break;
+                    case this.project:
+                        this._propEditor.widget(this.peAsProject());
+                        break;
+                    case this.groupBy:
+                        this._propEditor.widget(this.peAsGroupBy());
+                        break;
+                    case this.sort:
+                        this._propEditor.widget(this.peAsSort());
+                        break;
+                    case this.limit:
+                        this._propEditor.widget(this.peAsLimit());
+                        break;
+                    case this.mappings:
+                        this._propEditor.widget(this.peAsMappings());
+                        break;
+                    case this.chartPanel:
+                        this._propEditor.widget(this.peAsChartPanel());
+                        break;
+                    case this.state:
+                        this._propEditor.widget(this.peAsState());
+                        break;
+                    case this.all:
+                        this._propEditor.widget(this._propExt);
+                        break;
+                }
+            } else {
+                this._propEditor.widget(undefined);
+            }
+            this._owner.loadPreview(this._propEditor.widget());
+        }
+    }
+
+    updateButtonState(pe, sb) {
+        sb.enabled(!!pe);
+        sb.errors(!!pe && pe.validate() || []);
+    }
+
+    updateState() {
+        this.selectionButtons().forEach(sb => {
+            if (sb instanceof PipelineSelectionButton) {
+                if (this.disableActivities().indexOf(sb.label()) >= 0) {
+                    this.updateButtonState(undefined, sb);
+                    return;
+                }
+            }
+
+            switch (sb) {
+                case this.datasource:
+                    this.updateButtonState(this.peAsDatasource(), sb);
+                    break;
+                case this.filter:
+                    this.updateButtonState(this.peAsFilter(), sb);
+                    break;
+                case this.project:
+                    this.updateButtonState(this.peAsProject(), sb);
+                    break;
+                case this.groupBy:
+                    this.updateButtonState(this.peAsGroupBy(), sb);
+                    break;
+                case this.sort:
+                    this.updateButtonState(this.peAsSort(), sb);
+                    break;
+                case this.limit:
+                    this.updateButtonState(this.peAsLimit(), sb);
+                    break;
+                case this.mappings:
+                    this.updateButtonState(this.peAsMappings(), sb);
+                    break;
+                case this.chartPanel:
+                    const cp = this.peAsChartPanel();
+                    sb.enabled(!!cp);
+                    break;
+                case this.state:
+                    const st = this.peAsState();
+                    sb.enabled(!!st);
+                    break;
+                case this.debug:
+                    sb.enabled(false);
+                    break;
+                case this.all:
+                    sb.enabled(!!this._propExt);
+                    break;
+            }
+            if (sb.selected()) {
+                this.title(sb.enabled() ? sb.label() : "");
+            }
+        });
+    }
+
+    //  Events  ---
+    propChanged(id: string, newValue: any, oldValue: any, source: PropertyExt) {
+    }
+}
+PipelinePanel.prototype._class += " marshaller_PipelinePanel";
+
+class DDLPreview extends ChartPanel {
+
+    private _save = new Button().faChar("fa-save").tooltip("Save")
+        .on("click", () => {
+            const activity = this.activity();
+            if (activity && (activity as any).fromDDL) {
+                (activity as any).fromDDL(this._jsonEditor.json());
+            }
+            this.updateToolbar();
+        });
+
+    private _reset = new Button().faChar("fa-undo").tooltip("Reset")
+        .on("click", () => {
+            this._jsonEditor
+                .text(this.jsonText())
+                .lazyRender()
+                ;
+            this.updateToolbar();
+        });
+
+    private _jsonEditor = new JSONEditor()
+        .on("changes", (changes: object[]) => {
+            this.updateToolbar();
+        });
+
+    constructor() {
+        super();
+        this._titleBar.buttons([this._save, this._reset]);
+        this.widget(this._jsonEditor);
+    }
+
+    private _activity: PropertyExt;
+    activity(_: PropertyExt): this;
+    activity(): PropertyExt;
+    activity(_?: PropertyExt): PropertyExt | this {
+        if (_ === void 0) return this._activity;
+        if (this._activity !== _) {
+            this._activity = _;
+            delete this._prevJson;
+        }
+        return this;
+    }
+
+    jsonText(): string {
+        const activity = this.activity();
+        return activity && (activity as any).toDDL ? JSON.stringify((activity as any).toDDL(), undefined, 4) : "";
+    }
+
+    private _prevJson: string;
+    update(domNode, element) {
+        super.update(domNode, element);
+        const json = this.jsonText();
+        const editorJson = this._jsonEditor.text();
+        if ((this._prevJson === undefined || this._prevJson === editorJson) && this._prevJson !== json) {
+            this._prevJson = json;
+            this._jsonEditor.text(json);
+        }
+        this.updateToolbar();
+    }
+
+    updateToolbar() {
+        const activity = this.activity() as any;
+        const json = this.jsonText();
+        const editorJson = this._jsonEditor.text();
+        this._save.enabled(activity && activity.fromDDL && json !== editorJson).lazyRender();
+        this._reset.enabled(json !== editorJson).lazyRender();
+    }
+}
+
+export class PipelineSplitPanel extends SplitPanel {
+    private _rhsPropsPanel = new PipelinePanel(this).on("propChanged", (id: string, newValue: any, oldValue: any, source: PropertyExt) => {
+        this.propChanged(id, newValue, oldValue, source);
+    });
+    private _previewPanel = new TabPanel();
+    private _rhsDDLPreview = new DDLPreview();
+    private _rhsDataPreview = new DatasourceTable().pagination(true);
+
+    @publishProxy("_rhsPropsPanel")
+    disableActivities: publish<this, string[]>;
+
+    constructor() {
+        super();
+        this._previewPanel
+            .addWidget(this._rhsDataPreview, "Data")
+            .addWidget(this._rhsDDLPreview, "DDL")
+            ;
+        this
+            .addWidget(this._rhsPropsPanel)
+            .addWidget(this._previewPanel)
+            ;
+    }
+
+    loadDataProps(pe: PropertyExt) {
+        this._rhsPropsPanel
+            .propExt(pe)
+            .render()
+            ;
+    }
+
+    loadPreview(activity: undefined | PropertyExt) {
+        activity = activity instanceof Visualization ? activity.mappings() : activity;
+        this._rhsDataPreview
+            .datasource(new DatasourceAdapt(activity instanceof Activity ? activity : undefined))
+            .lazyRender()
+            ;
+        this._rhsDDLPreview
+            .activity(activity) // instanceof DSPicker ? activity.datasourceRef() : activity)
+            .lazyRender()
+            ;
+    }
+
+    refreshPreview() {
+        const ds = this._rhsDataPreview.datasource() as DatasourceAdapt;
+        if (ds) {
+            ds.exec().then(() => {
+                this._rhsDataPreview
+                    .invalidate()
+                    .lazyRender()
+                    ;
+                this._rhsDDLPreview
+                    .lazyRender()
+                    ;
+            });
+        } else {
+            this._rhsDDLPreview
+                .lazyRender()
+                ;
+        }
+    }
+
+    //  Events  ---
+    propChanged(id: string, newValue: any, oldValue: any, source: PropertyExt) {
+    }
+}