Custom Element API for <perspective-workspace>

[texodus]

<perspective-workspace> currently generates <perspective-viewer> children in the light DOM when the restore() method references one, or when the user clucks the Duplicate button. However, these <perspective-viewers> are only incorporated into the underlying Phosphor DockPanel through restore(), so new new <perspective-viewer> elements added, or existing children removed, by the DOM API will not be reflected in the UI, and e.g. save() will still try to serialize this missing element.

This change allows <perspective-workspace> to be manipulated directly in the DOM, synchronizing the underlying Phosphor DockPanel as children are removed, added and modified. For example, you can now declare an initial view entirely in static HTML:

<perspective-workspace>
    <perspective-viewer name="Title!" table="superstore" row-pivots='["State"]'></perspective-viewer>
</perspective-workspace>

where:

• table attribute tells <perspective-workspace> which table in its tables map to use (should this exist on the DOM at all?)
• name attribute is used as the title (should this be title?)

Similarly, new <perspective-viewer> elements added via appendChild will be given default placements in the existing layout, and existing elements removed with removeChild will be closed. The parent workspace will remove any unused <perspective-viewer> when e.g. restore() is called with a layout which does not reference their slots, and will continue to generate new ones as needed.

The actual layout itself must still be set with restore(), whose API has changed:

• layout key is flattened away; master and detail are top-level keys.
• widgets within either are now a list of strings, instead of <perspective-viewer> config objects. These strings references the slot attribute used for each docked element, and must reference either an existing <perspective-viewer> with this slow, or ...
• viewers is a new top-level key, a map of slot string to <perspective-viewer> config object. This is optional if the <perspective-viewer> with the necessary slot already exists; if both exist, restore() is called on the <perspective-viewer> with this slot attribute set.

In this example, <perspective-viewer> elements with slot attributes "One" and "Two" must already exist as light DOM children, else this call to restore() will report errors as they are not referenced in the viewers key:

 workspace.restore({
        master: {
            widgets: ["Three", "Four"]
        },
        detail: {
            main: {
                currentIndex: 0,
                type: "tab-area",
                widgets: ["One", "Two"]
            }
        },
        viewers: {
            Three: {table: "superstore", name: "Test Widget III (modified)", "row-pivots": ["State"], columns: ["Sales", "Profit"]},
            Four: {table: "superstore", name: "Test Widget IV (modified)", "row-pivots": ["Category", "Sub-Category"], columns: ["Sales", "Profit"]}
        }
    });

addTable, removeTable and getTable have been replaced with tables, a map property of every <perspective-workspace>, which exposes the standard Map() API and will auto-wire when modified. This would would have the side effect of calling load() on <perspective-viewer name="Title!" table="superstore" row-pivots='["State"]'> in the initial HTML example:

workspace.tables.set("superstore", worker.table({x: "string", y: "integer"});