How to use the @hpcc-js/marshaller.Dashboard function in @hpcc-js/marshaller

.chartPanel(viz.cp_8)
    .on("selectionChanged", () => {
        table1.refresh();
    }, true)
    ;
ec.append(e_8);

ec.refresh();

//  Optional  ---
const errors = ec.validate();
for (const error of errors) {
    console.error(error.elementID + " (" + error.source + "):  " + error.msg);
}

export const dashboard = new marshaller.Dashboard(ec)
    .target("placeholder")
    .render(w => {
        (w as marshaller.Dashboard)
            .layoutObj({ main: { type: "tab-area", widgets: [{ __id: "table1" }], currentIndex: 0 } })
            .hideSingleTabs(true)
            ;
    })
    ;

// @ts-ignore
const ddl = { "version": "0.0.22", "createdBy": { "name": "@hpcc-js/marshaller", "version": "2.13.10" }, "datasources": [{ "type": "wuresult", "id": "Ins002_dsOutput1", "url": "http://10.173.147.1:8010/", "wuid": "W20190617-131840", "outputs": { "Ins002_dsOutput1_View_table1": { "fields": [{ "id": "state", "type": "string" }, { "id": "id", "type": "number64" }, { "id": "first_name", "type": "string" }, { "id": "last_name", "type": "string" }, { "id": "gender", "type": "string" }, { "id": "lat", "type": "number" }, { "id": "lng", "type": "number" }, { "id": "whole_number", "type": "number64" }, { "id": "decimal_number", "type": "number" }, { "id": "created_time", "type": "string" }, { "id": "created_date", "type": "string" }, { "id": "vip", "type": "string" }] } } }, { "type": "form", "id": "e_8", "fields": [{ "id": "filter_state", "type": "string", "default": "" }] }], "dataviews": [{ "id": "table1", "datasource": { "id": "Ins002_dsOutput1", "output": "Ins002_dsOutput1_View_table1" }, "activities": [{ "type": "filter", "conditions": [{ "viewID": "e_8", "mappings": [{ "remoteFieldID": "filter_state", "localFieldID": "state", "condition": "==", "nullable": true }] }] }], "visualization": { "id": "table1", "title": "Table 1", "description": "state == FL", "visibility": "normal", "chartType": "Table", "__class": "dgrid_Table", "mappings": { "type": "mappings", "transformations": [] }, "properties": { "__class": "marshaller_VizChartPanel", "title": "Table 1", "description": "state == FL", "widget": { "__class": "dgrid_Table", "columnFormats": [] } } } }, { "id": "e_8", "datasource": { "id": "e_8" }, "activities": [], "visualization": { "id": "cp_8", "title": "Element 8", "visibility": "flyout", "chartType": "FieldForm", "__class": "form_FieldForm", "mappings": { "type": "mappings", "transformations": [] }, "properties": { "__class": "marshaller_VizChartPanel", "title": "Element 8", "widget": { "__class": "form_FieldForm", "validate": false, "allowEmptyRequest": true } } } }], "properties": { "name": "@hpcc-js/marshaller", "version": "2.13.10", "buildVersion": "2.7.0", "layout": { "main": { "type": "tab-area", "widgets": [{ "__id": "table1" }], "currentIndex": 0 } } } };

export function loadDashboard(target: string) {
    const ec = new ElementContainer();
    const dashboard = new Dashboard(ec);
    dashboard
        .target(target)
        .titleVisible(false)
        .hideSingleTabs(true)
        .restore(sample as any)
        .render(w => {
            ec.refresh();
        })
        ;
}

import { d3SelectionType, HTMLWidget } from "@hpcc-js/common";
import { Result } from "@hpcc-js/comms";
import { ddl2Schema, upgrade } from "@hpcc-js/ddl-shim";
import { Dashboard, ElementContainer } from "@hpcc-js/marshaller";
import { Comms } from "@hpcc-js/other";
import { DockPanel, SplitPanel } from "@hpcc-js/phosphor";
import { scopedLogger } from "@hpcc-js/util";

const logger = scopedLogger("app");

export class App extends DockPanel {
    private _url = new Comms.ESPUrl().url(document.URL);
    private _ddlv1 = new JSONEditor();
    private _ddlv2_upgraded = new JSONEditor();
    private _elementContainer: ElementContainer = new ElementContainer();
    private _dashboard = new Dashboard(this._elementContainer);
    private _ddlv2 = new JSONEditor();
    private _schema = new JSONEditor();

    constructor() {
        super();
        this.parseParams();
        this._schema.json(ddl2Schema);
    }

    parseParams() {
        if (this._url.param("Wuid")) {
            const baseUrl = `${this._url.param("Protocol")}://${this._url.param("Hostname")}:${this._url.param("Port")}`;
            const fullUrl = `${baseUrl}/WsWorkunits/WUResult.json?Wuid=${this._url.param("Wuid")}&ResultName=${this._url.param("ResultName")}`;
            logger.info(baseUrl);
            const result = new Result({ baseUrl }, this._url.param("Wuid"), this._url.param("ResultName"));
            result.fetchRows().then(async (response: object[]) => {