@mwater/visualization 5.2.0 → 5.3.1

package/lib/layouts/blocks/BlocksDisplayComponent.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const DraggableBlockComponent_1 = __importDefault(require("./DraggableBlockComponent"));
 const DecoratedBlockComponent_1 = __importDefault(require("../DecoratedBlockComponent"));
@@ -38,9 +37,9 @@ const blockUtils = __importStar(require("./blockUtils"));
 const AutoSizeComponent_1 = __importDefault(require("@mwater/react-library/lib/AutoSizeComponent"));
 const HorizontalBlockComponent_1 = __importDefault(require("./HorizontalBlockComponent"));
 const layoutOptions_1 = require("../../dashboards/layoutOptions");
-/*
-Renders the complete layout of the blocks and also optionally a palette to the left
-that can be used to drag new items into the layout. Palette is only displayed if onItemsChange is not null
+/**
+  Renders the complete layout of the blocks and also optionally a palette to the left
+  that can be used to drag new items into the layout. Palette is only displayed if onItemsChange is not null
 */
 class BlocksDisplayComponent extends react_1.default.Component {
     handleBlockDrop = (sourceBlock, targetBlock, side) => {
@@ -62,98 +61,58 @@ class BlocksDisplayComponent extends react_1.default.Component {
         items = blockUtils.cleanBlock(items);
         return this.props.onItemsChange(items);
     };
-    renderBlock = (block, collapseColumns = false) => {
+    /**
+     * Render a single block (and its children)
+     * @param block Block to render
+     * @param collapseColumns True to collapse columns
+     * @param priority Priority of widget. Higher priority widgets are rendered first
+     * @returns
+     */
+    renderBlock = (block, collapseColumns, priority) => {
         let elem = null;
         switch (block.type) {
             case "root":
-                return R(RootBlockComponent, {
-                    key: block.id,
-                    block,
-                    collapseColumns,
-                    renderBlock: this.renderBlock,
-                    onBlockDrop: this.props.onItemsChange != null ? this.handleBlockDrop : undefined,
-                    onBlockRemove: this.props.onItemsChange != null ? this.handleBlockRemove : undefined
-                });
-                break;
+                return react_1.default.createElement(RootBlockComponent, { key: block.id, block: block, collapseColumns: collapseColumns, renderBlock: this.renderBlock, onBlockDrop: this.props.onItemsChange != null ? this.handleBlockDrop : undefined, onBlockRemove: this.props.onItemsChange != null ? this.handleBlockRemove : undefined, priority: priority });
             case "vertical":
-                return R(VerticalBlockComponent, {
-                    key: block.id,
-                    block,
-                    collapseColumns,
-                    renderBlock: this.renderBlock,
-                    onBlockDrop: this.props.onItemsChange != null ? this.handleBlockDrop : undefined,
-                    onBlockRemove: this.props.onItemsChange != null ? this.handleBlockRemove : undefined
-                });
-                break;
+                return react_1.default.createElement(VerticalBlockComponent, { key: block.id, block: block, collapseColumns: collapseColumns, renderBlock: this.renderBlock, onBlockDrop: this.props.onItemsChange != null ? this.handleBlockDrop : undefined, onBlockRemove: this.props.onItemsChange != null ? this.handleBlockRemove : undefined, priority: priority });
             case "horizontal":
-                return R(HorizontalBlockComponent_1.default, {
-                    key: block.id,
-                    block,
-                    collapseColumns,
-                    renderBlock: this.renderBlock,
-                    onBlockDrop: this.props.onItemsChange != null ? this.handleBlockDrop : undefined,
-                    onBlockRemove: this.props.onItemsChange != null ? this.handleBlockRemove : undefined,
-                    onBlockUpdate: this.props.onItemsChange != null ? this.handleBlockUpdate : undefined
-                });
-                break;
+                return react_1.default.createElement(HorizontalBlockComponent_1.default, { key: block.id, block: block, collapseColumns: collapseColumns, renderBlock: this.renderBlock, onBlockDrop: this.props.onItemsChange != null ? this.handleBlockDrop : undefined, onBlockRemove: this.props.onItemsChange != null ? this.handleBlockRemove : undefined, priority: priority, onBlockUpdate: this.props.onItemsChange != null ? this.handleBlockUpdate : undefined });
             case "spacer":
-                elem = R(AutoSizeComponent_1.default, { injectWidth: true, key: block.id }, (size) => {
-                    return R("div", {
-                        id: block.id,
-                        style: {
-                            width: size.width,
-                            height: block.aspectRatio != null ? size.width / block.aspectRatio : undefined
-                        }
-                    });
-                });
+                elem = react_1.default.createElement(AutoSizeComponent_1.default, { injectWidth: true, key: block.id }, (size) => (react_1.default.createElement("div", { id: block.id, style: {
+                        width: size.width,
+                        height: block.aspectRatio != null ? size.width / block.aspectRatio : undefined
+                    } })));
                 if (this.props.onItemsChange) {
-                    elem = R(DraggableBlockComponent_1.default, {
-                        key: block.id,
-                        block,
-                        onBlockDrop: this.handleBlockDrop
-                    }, R(DecoratedBlockComponent_1.default, {
-                        key: block.id,
-                        aspectRatio: block.aspectRatio,
-                        onAspectRatioChange: block.aspectRatio != null
-                            ? (aspectRatio) => this.props.onItemsChange(blockUtils.updateBlock(this.props.items, lodash_1.default.extend({}, block, { aspectRatio })))
-                            : undefined,
-                        onBlockRemove: this.props.onItemsChange != null ? this.handleBlockDrop.bind(null, block) : undefined
-                    }, elem));
+                    elem = (react_1.default.createElement(DraggableBlockComponent_1.default, { key: block.id, block: block, onBlockDrop: this.handleBlockDrop },
+                        react_1.default.createElement(DecoratedBlockComponent_1.default, { key: block.id, isDragging: false, aspectRatio: block.aspectRatio, onAspectRatioChange: block.aspectRatio != null
+                                ? (aspectRatio) => this.props.onItemsChange(blockUtils.updateBlock(this.props.items, lodash_1.default.extend({}, block, { aspectRatio })))
+                                : undefined, onBlockRemove: this.props.onItemsChange != null ? this.handleBlockDrop.bind(null, block) : undefined }, elem)));
                 }
                 break;
             case "widget":
-                elem = R(AutoSizeComponent_1.default, { injectWidth: true, key: block.id }, (size) => {
-                    return this.props.renderWidget({
-                        id: block.id,
-                        type: block.widgetType,
-                        design: block.design,
-                        onDesignChange: this.props.onItemsChange
-                            ? (design) => this.props.onItemsChange(blockUtils.updateBlock(this.props.items, lodash_1.default.extend({}, block, { design })))
-                            : undefined,
-                        width: size.width,
-                        height: block.aspectRatio != null ? size.width / block.aspectRatio : undefined
-                    });
-                });
+                elem = react_1.default.createElement(AutoSizeComponent_1.default, { injectWidth: true, key: block.id }, (size) => this.props.renderWidget({
+                    id: block.id,
+                    type: block.widgetType,
+                    design: block.design,
+                    onDesignChange: this.props.onItemsChange
+                        ? (design) => this.props.onItemsChange(blockUtils.updateBlock(this.props.items, lodash_1.default.extend({}, block, { design })))
+                        : undefined,
+                    width: size.width,
+                    height: block.aspectRatio != null ? size.width / block.aspectRatio : undefined,
+                    priority
+                }));
                 if (this.props.onItemsChange) {
-                    elem = R(DraggableBlockComponent_1.default, {
-                        key: block.id,
-                        block,
-                        onBlockDrop: this.handleBlockDrop
-                    }, R(DecoratedBlockComponent_1.default, {
-                        key: block.id,
-                        aspectRatio: block.aspectRatio,
-                        onAspectRatioChange: block.aspectRatio != null
-                            ? (aspectRatio) => this.props.onItemsChange(blockUtils.updateBlock(this.props.items, lodash_1.default.extend({}, block, { aspectRatio })))
-                            : undefined,
-                        onBlockRemove: this.props.onItemsChange != null ? this.handleBlockDrop.bind(null, block) : undefined
-                    }, elem));
+                    elem = (react_1.default.createElement(DraggableBlockComponent_1.default, { key: block.id, block: block, onBlockDrop: this.handleBlockDrop },
+                        react_1.default.createElement(DecoratedBlockComponent_1.default, { key: block.id, isDragging: false, aspectRatio: block.aspectRatio, onAspectRatioChange: block.aspectRatio != null
+                                ? (aspectRatio) => this.props.onItemsChange(blockUtils.updateBlock(this.props.items, lodash_1.default.extend({}, block, { aspectRatio })))
+                                : undefined, onBlockRemove: this.props.onItemsChange != null ? this.handleBlockDrop.bind(null, block) : undefined }, elem)));
                 }
                 break;
             default:
                 throw new Error(`Unknown block type ${block.type}`);
         }
         // Wrap block in padding
-        return R("div", { key: block.id, className: `mwater-visualization-block mwater-visualization-block-${block.type}` }, elem);
+        return (react_1.default.createElement("div", { key: block.id, className: `mwater-visualization-block mwater-visualization-block-${block.type}` }, elem));
     };
     createBlockItem(block) {
         // Add unique id
@@ -162,101 +121,55 @@ class BlocksDisplayComponent extends react_1.default.Component {
         });
     }
     renderPalette() {
-        return R("div", { key: "palette", style: { width: 141, height: "100%", position: "absolute", top: 0, left: 0 } }, R("div", { className: "mwater-visualization-palette", style: { height: "100%" } }, R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({ type: "widget", widgetType: "Text", design: { style: "title" } }),
-            title: R("i", { className: "fa fa-font" }),
-            subtitle: "Title"
-        }), R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({ type: "widget", widgetType: "Text", design: {} }),
-            title: R("i", { className: "fa fa-align-left" }),
-            subtitle: "Text"
-        }), R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "Image", design: {} }),
-            title: R("i", { className: "fa fa-picture-o" }),
-            subtitle: "Image"
-        }), R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({
-                type: "widget",
-                aspectRatio: 1.4,
-                widgetType: "LayeredChart",
-                design: {}
-            }),
-            title: R("i", { className: "fa fa-bar-chart" }),
-            subtitle: "Chart"
-        }), !this.props.disableMaps
-            ? R(PaletteItemComponent_1.default, {
-                createItem: this.createBlockItem({
-                    type: "widget",
-                    aspectRatio: 2,
-                    widgetType: "Map",
-                    design: {
-                        baseLayer: "bing_road",
-                        layerViews: [],
-                        filters: {},
-                        bounds: { w: -40, n: 25, e: 40, s: -25 }
-                    }
-                }),
-                title: R("i", { className: "fa fa-map-o" }),
-                subtitle: "Map"
-            })
-            : undefined, R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "TableChart", design: {} }),
-            title: R("i", { className: "fa fa-table" }),
-            subtitle: "Table"
-        }), R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({ type: "widget", widgetType: "PivotChart", design: {} }),
-            title: R("img", {
-                width: 24,
-                height: 24,
-                src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAb0lEQVRIx91VQQrAIAwzo/7/ydllG0MQS21EzMW2ICFtoyBZlLDn/LOgySPAG1xFDDmBtZI6efoMvODozkyL2IlTCOisfS2KrqG0RXus6fkEVBIw08khE62aQY0ogMdEswqwYouwvQ8s+4M576m4Ae/tET/u1taEAAAAAElFTkSuQmCC"
-            }),
-            subtitle: "Pivot"
-        }), R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({
-                type: "widget",
-                aspectRatio: 1.4,
-                widgetType: "CalendarChart",
-                design: {}
-            }),
-            title: R("i", { className: "fa fa-calendar" }),
-            subtitle: "Calendar"
-        }), R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({
-                type: "widget",
-                aspectRatio: 1.4,
-                widgetType: "ImageMosaicChart",
-                design: {}
-            }),
-            title: R("i", { className: "fa fa-th" }),
-            subtitle: "Mosaic"
-        }), R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({ type: "spacer", aspectRatio: 2 }),
-            title: R("i", { className: "fa fa-square-o" }),
-            subtitle: "Spacer"
-        }), R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({
-                type: "widget",
-                aspectRatio: 16.0 / 9.0,
-                widgetType: "IFrame",
-                design: {}
-            }),
-            title: R("i", { className: "fa fa-youtube-play" }),
-            subtitle: "Video"
-        }), R(PaletteItemComponent_1.default, {
-            createItem: this.createBlockItem({
-                type: "widget",
-                widgetType: "TOC",
-                design: { numbering: false, borderWeight: 2, header: "Contents" }
-            }),
-            title: R("i", { className: "fa fa-list-ol" }),
-            subtitle: "TOC"
-        }), this.props.onClipboardChange
-            ? R(ClipboardPaletteItemComponent_1.default, {
-                clipboard: this.props.clipboard,
-                onClipboardChange: this.props.onClipboardChange,
-                cantPasteMessage: this.props.cantPasteMessage
-            })
-            : undefined));
+        return (react_1.default.createElement("div", { key: "palette", style: { width: 141, height: "100%", position: "absolute", top: 0, left: 0 } },
+            react_1.default.createElement("div", { className: "mwater-visualization-palette", style: { height: "100%" } },
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "Text", design: { style: "title" } }), title: react_1.default.createElement("i", { className: "fa fa-font" }), subtitle: "Title" }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "Text", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-align-left" }), subtitle: "Text" }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "Image", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-picture-o" }), subtitle: "Image" }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
+                        type: "widget",
+                        aspectRatio: 1.4,
+                        widgetType: "LayeredChart",
+                        design: {}
+                    }), title: react_1.default.createElement("i", { className: "fa fa-bar-chart" }), subtitle: "Chart" }),
+                !this.props.disableMaps && (react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
+                        type: "widget",
+                        aspectRatio: 2,
+                        widgetType: "Map",
+                        design: {
+                            baseLayer: "bing_road",
+                            layerViews: [],
+                            filters: {},
+                            bounds: { w: -40, n: 25, e: 40, s: -25 }
+                        }
+                    }), title: react_1.default.createElement("i", { className: "fa fa-map-o" }), subtitle: "Map" })),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "TableChart", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-table" }), subtitle: "Table" }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "PivotChart", design: {} }), title: react_1.default.createElement("img", { width: 24, height: 24, src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAb0lEQVRIx91VQQrAIAwzo/7/ydllG0MQS21EzMW2ICFtoyBZlLDn/LOgySPAG1xFDDmBtZI6efoMvODozkyL2IlTCOisfS2KrqG0RXus6fkEVBIw08khE62aQY0ogMdEswqwYouwvQ8s+4M576m4Ae/tET/u1taEAAAAAElFTkSuQmCC" }), subtitle: "Pivot" }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
+                        type: "widget",
+                        aspectRatio: 1.4,
+                        widgetType: "CalendarChart",
+                        design: {}
+                    }), title: react_1.default.createElement("i", { className: "fa fa-calendar" }), subtitle: "Calendar" }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
+                        type: "widget",
+                        aspectRatio: 1.4,
+                        widgetType: "ImageMosaicChart",
+                        design: {}
+                    }), title: react_1.default.createElement("i", { className: "fa fa-th" }), subtitle: "Mosaic" }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "spacer", aspectRatio: 2 }), title: react_1.default.createElement("i", { className: "fa fa-square-o" }), subtitle: "Spacer" }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
+                        type: "widget",
+                        aspectRatio: 16.0 / 9.0,
+                        widgetType: "IFrame",
+                        design: {}
+                    }), title: react_1.default.createElement("i", { className: "fa fa-youtube-play" }), subtitle: "Video" }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
+                        type: "widget",
+                        widgetType: "TOC",
+                        design: { numbering: false, borderWeight: 2, header: "Contents" }
+                    }), title: react_1.default.createElement("i", { className: "fa fa-list-ol" }), subtitle: "TOC" }),
+                this.props.onClipboardChange && (react_1.default.createElement(ClipboardPaletteItemComponent_1.default, { clipboard: this.props.clipboard, onClipboardChange: this.props.onClipboardChange, cantPasteMessage: this.props.cantPasteMessage })))));
     }
     render() {
         let innerParentStyle;
@@ -264,18 +177,27 @@ class BlocksDisplayComponent extends react_1.default.Component {
         if (this.props.onItemsChange) {
             innerParentStyle = {};
             innerParentStyle.maxWidth = layoutOptions.maximumWidth || undefined;
-            return R("div", { style: { width: "100%", height: "100%", overflow: "hidden", position: "relative" } }, this.renderPalette(), R("div", {
-                style: { position: "absolute", left: 141, top: 0, bottom: 0, right: 0, overflowX: "auto", overflowY: "scroll" },
-                className: `mwater-visualization-block-parent-outer mwater-visualization-block-parent-outer-${this.props.style || "default"} mwater-visualization-block-editing`
-            }, R("div", {
-                key: "inner",
-                className: `mwater-visualization-block-parent-inner mwater-visualization-block-parent-inner-${this.props.style || "default"}`,
-                style: innerParentStyle
-            }, this.renderBlock(this.props.items))));
+            return (react_1.default.createElement(layoutOptions_1.DashboardStyleWrapper, { style: { width: "100%", height: "100%", overflow: "hidden", position: "relative" }, layoutOptions: layoutOptions },
+                this.renderPalette(),
+                react_1.default.createElement("div", { style: {
+                        position: "absolute",
+                        left: 141,
+                        top: 0,
+                        bottom: 0,
+                        right: 0,
+                        overflowX: "auto",
+                        overflowY: "scroll"
+                    }, className: `mwater-visualization-block-parent-outer mwater-visualization-block-editing` },
+                    react_1.default.createElement("div", { key: "inner", className: `mwater-visualization-block-parent-inner mwater-visualization-block-parent-inner-${this.props.style || "default"}`, style: innerParentStyle }, this.renderBlock(this.props.items, false, 0)))));
         }
         else {
-            return R(AutoSizeComponent_1.default, { injectWidth: true, injectHeight: true }, (size) => {
-                const outerParentStyle = { width: "100%", height: "100%", overflowX: "auto", overflowY: "scroll" };
+            return (react_1.default.createElement(AutoSizeComponent_1.default, { injectWidth: true, injectHeight: true }, (size) => {
+                const outerParentStyle = {
+                    width: "100%",
+                    height: "100%",
+                    overflowX: "auto",
+                    overflowY: "scroll"
+                };
                 innerParentStyle = {};
                 // Remove padding if small
                 if (size.width < 600) {
@@ -295,32 +217,25 @@ class BlocksDisplayComponent extends react_1.default.Component {
                         outerParentStyle.transformOrigin = "top left";
                     }
                 }
-                return R("div", {
-                    style: outerParentStyle,
-                    className: `mwater-visualization-block-parent-outer mwater-visualization-block-parent-outer-${this.props.style || "default"} mwater-visualization-block-viewing`
-                }, R("div", {
-                    key: "inner",
-                    className: `mwater-visualization-block-parent-inner mwater-visualization-block-parent-inner-${this.props.style || "default"}`,
-                    style: innerParentStyle
-                }, this.renderBlock(this.props.items, layoutOptions.collapseColumnsWidth != null && size.width <= layoutOptions.collapseColumnsWidth)));
-            });
+                return (react_1.default.createElement(layoutOptions_1.DashboardStyleWrapper, { style: { width: "100%", height: "100%" }, layoutOptions: layoutOptions },
+                    react_1.default.createElement("div", { style: outerParentStyle, className: `mwater-visualization-block-parent-outer mwater-visualization-block-parent-outer-${this.props.style || "default"} mwater-visualization-block-viewing` },
+                        react_1.default.createElement("div", { key: "inner", className: `mwater-visualization-block-parent-inner mwater-visualization-block-parent-inner-${this.props.style || "default"}`, style: innerParentStyle }, this.renderBlock(this.props.items, layoutOptions.collapseColumnsWidth != null && size.width <= layoutOptions.collapseColumnsWidth, 0)))));
+            }));
         }
     }
 }
 exports.default = BlocksDisplayComponent;
 class RootBlockComponent extends react_1.default.Component {
     render() {
-        const elem = R("div", { key: "root" }, lodash_1.default.map(this.props.block.blocks, (block) => {
-            return this.props.renderBlock(block, this.props.collapseColumns);
-        }));
+        const elem = (
+        // Flex to prevent margin collapse
+        react_1.default.createElement("div", { key: "root", style: { display: "flex", flexDirection: "column" } }, lodash_1.default.map(this.props.block.blocks, (block, index) => {
+            // Render with negative priority so that the first block is rendered first
+            return this.props.renderBlock(block, this.props.collapseColumns, this.props.priority - index);
+        })));
         // If draggable
         if (this.props.onBlockDrop != null) {
-            return R(DraggableBlockComponent_1.default, {
-                block: this.props.block,
-                onBlockDrop: this.props.onBlockDrop,
-                style: { height: "100%" },
-                onlyBottom: true
-            }, elem);
+            return (react_1.default.createElement(DraggableBlockComponent_1.default, { block: this.props.block, onBlockDrop: this.props.onBlockDrop, style: { height: "100%" }, onlyBottom: true }, elem));
         }
         else {
             return elem;
@@ -329,8 +244,10 @@ class RootBlockComponent extends react_1.default.Component {
 }
 class VerticalBlockComponent extends react_1.default.Component {
     render() {
-        return R("div", null, lodash_1.default.map(this.props.block.blocks, (block) => {
-            return this.props.renderBlock(block, this.props.collapseColumns);
-        }));
+        return (
+        // Flex to prevent margin collapse
+        react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } }, lodash_1.default.map(this.props.block.blocks, block => {
+            return this.props.renderBlock(block, this.props.collapseColumns, this.props.priority);
+        })));
     }
 }

package/lib/layouts/blocks/BlocksLayoutManager.d.ts

@@ -1,27 +1,11 @@
 import React from "react";
-import LayoutManager from "../LayoutManager";
+import LayoutManager, { RenderLayoutOptions } from "../LayoutManager";
+import BlocksDisplayComponent from "./BlocksDisplayComponent";
 export default class BlocksLayoutManager extends LayoutManager {
-    renderLayout(options: any): React.CElement<{
-        items: any;
-        onItemsChange: any;
-        style: any;
-        layoutOptions: any;
-        renderWidget: any;
-        disableMaps: any;
-        clipboard: any;
-        onClipboardChange: any;
-        cantPasteMessage: any;
-    }, React.Component<{
-        items: any;
-        onItemsChange: any;
-        style: any;
-        layoutOptions: any;
-        renderWidget: any;
-        disableMaps: any;
-        clipboard: any;
-        onClipboardChange: any;
-        cantPasteMessage: any;
-    }, any, any>>;
+    /**
+     * Renders the layout as a react element
+     */
+    renderLayout(options: RenderLayoutOptions): React.CElement<import("./BlocksDisplayComponent").BlocksDisplayComponentProps, BlocksDisplayComponent>;
     isEmpty(items: any): boolean;
     getWidgetTypeAndDesign(items: any, widgetId: any): {
         type: string;

package/lib/layouts/blocks/BlocksLayoutManager.js

@@ -8,24 +8,15 @@ const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const LayoutManager_1 = __importDefault(require("../LayoutManager"));
+const BlocksDisplayComponent_1 = __importDefault(require("./BlocksDisplayComponent"));
 class BlocksLayoutManager extends LayoutManager_1.default {
-    // Renders the layout as a react element
-    // options:
-    //  items: opaque items object that layout manager understands
-    //  onItemsChange: Called when items changes
-    //  renderWidget: called with ({ id:, type:, design:, onDesignChange:, width:, height:  })
-    //  style: style to use for layout. null for default
-    //  layoutOptions: layout options to use
-    //  disableMaps: true to disable maps
-    //  clipboard: clipboard contents
-    //  onClipboardChange: called when clipboard is changed
-    //  cantPasteMesssage: message to display if clipboard can't be pasted into current dashboard
+    /**
+     * Renders the layout as a react element
+     */
     renderLayout(options) {
-        const BlocksDisplayComponent = require("./BlocksDisplayComponent").default;
-        return R(BlocksDisplayComponent, {
+        return R(BlocksDisplayComponent_1.default, {
             items: options.items || { id: "root", type: "root", blocks: [] },
             onItemsChange: options.onItemsChange,
-            style: options.style,
             layoutOptions: options.layoutOptions,
             renderWidget: options.renderWidget,
             disableMaps: options.disableMaps,

package/lib/layouts/blocks/HorizontalBlockComponent.d.ts

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { LayoutBlock } from "./blockUtils";
 export interface HorizontalBlockComponentProps {
     block: LayoutBlock;
-    collapseColumns?: boolean;
-    renderBlock: any;
+    collapseColumns: boolean;
+    priority: number;
+    renderBlock: (block: LayoutBlock, collapseColumns: boolean, priority: number) => ReactElement;
     /** Called with (sourceBlock, targetBlock, side) when block is dropped on it. side is top, left, bottom, right */
     onBlockDrop?: any;
     /** Called with (block) when block is removed */
@@ -21,7 +22,7 @@ export default class HorizontalBlockComponent extends React.Component<Horizontal
     blockRefs: {
         [blockId: string]: HTMLElement | null;
     };
-    constructor(props: any);
+    constructor(props: HorizontalBlockComponentProps);
     componentWillUnmount(): void;
     handleMouseDown: (index: any, ev: any) => void;
     handleMouseMove: (ev: any) => void;

package/lib/layouts/blocks/HorizontalBlockComponent.js

@@ -23,7 +23,7 @@ class HorizontalBlockComponent extends react_1.default.Component {
     componentWillUnmount() {
         // Remove listeners
         document.removeEventListener("mousemove", this.handleMouseMove);
-        return document.removeEventListener("mouseup", this.handleMouseUp);
+        document.removeEventListener("mouseup", this.handleMouseUp);
     }
     handleMouseDown = (index, ev) => {
         // Prevent html5 drag
@@ -35,7 +35,7 @@ class HorizontalBlockComponent extends react_1.default.Component {
             rightSize: this.blockRefs[`block${index + 1}`].offsetWidth
         });
         document.addEventListener("mousemove", this.handleMouseMove);
-        return document.addEventListener("mouseup", this.handleMouseUp);
+        document.addEventListener("mouseup", this.handleMouseUp);
     };
     handleMouseMove = (ev) => {
         if (!this.state.dragInitialX) {
@@ -76,7 +76,7 @@ class HorizontalBlockComponent extends react_1.default.Component {
         let asc, end;
         let asc1, end1;
         if (this.props.collapseColumns) {
-            return R("div", null, lodash_1.default.map(this.props.block.blocks, (block, index) => this.props.renderBlock(block, true)));
+            return R("div", null, lodash_1.default.map(this.props.block.blocks, (block) => this.props.renderBlock(block, true, this.props.priority)));
         }
         // Calculate widths (percentages)
         let totalWeight = 0;
@@ -110,7 +110,7 @@ class HorizontalBlockComponent extends react_1.default.Component {
                         ref: (c) => {
                             return (this.blockRefs[`block${index}`] = c);
                         }
-                    }, this.props.renderBlock(block))
+                    }, this.props.renderBlock(block, false, this.props.priority))
                 ];
             }))));
             // Allow dropping
@@ -131,7 +131,7 @@ class HorizontalBlockComponent extends react_1.default.Component {
                             return (this.blockRefs[`block${index}`] = c);
                         },
                         className: "mwater-visualization-horizontal-block-item"
-                    }, this.props.renderBlock(block))
+                    }, this.props.renderBlock(block, false, this.props.priority))
                 ];
             }));
         }

package/lib/mWaterLoader.d.ts

@@ -14,6 +14,8 @@ export interface MWaterLoaderOptions {
     localCaching?: boolean;
     /** Locales of the schema to load. Default is all. */
     locales?: string[];
+    /** Origin of usage. e.g. "dashboards:43445364..." */
+    origin?: string;
 }
 /** Loads a schema and data source that is specific to mWater server */
 export default function mWaterLoader(options: MWaterLoaderOptions, callback: (error: any, config?: {

package/lib/mWaterLoader.js

@@ -42,7 +42,8 @@ function mWaterLoader(options, callback) {
         const schema = new expressions_1.Schema(schemaJson);
         const dataSource = new MWaterDataSource_1.default(options.apiUrl, options.client, {
             serverCaching: false,
-            localCaching: options.localCaching != null ? options.localCaching : true
+            localCaching: options.localCaching != null ? options.localCaching : true,
+            origin: options.origin
         });
         return callback(null, {
             schema,

package/lib/maps/AddLayerComponent.d.ts

@@ -1,22 +1,20 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
+import { MapDesign } from "..";
 export interface AddLayerComponentProps {
     /** Number of layers that already exist */
     layerNumber: number;
     /** See Map Design.md */
-    design: any;
+    design: MapDesign;
     /** Called with new design */
-    onDesignChange: any;
+    onDesignChange: (design: MapDesign) => void;
     /** Schema to use */
     schema: Schema;
     dataSource: DataSource;
 }
 export default class AddLayerComponent extends React.Component<AddLayerComponentProps> {
-    static contextTypes: {
-        addLayerElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    handleAddLayer: (newLayer: any) => any;
-    handleAddLayerView: (layerView: any) => any;
+    static contextType: React.Context<import("../MWaterContextComponent").AddLayerElementFactory | undefined>;
+    handleAddLayer: (newLayer: any) => void;
+    handleAddLayerView: (layerView: any) => void;
     render(): any;
 }

package/lib/maps/AddLayerComponent.js

@@ -3,16 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const LayerFactory_1 = __importDefault(require("./LayerFactory"));
+const MWaterContextComponent_1 = require("../MWaterContextComponent");
 // Dropdown to add a new layer.
 // Can be overridden by context of addLayerElementFactory which is called with all props
 class AddLayerComponent extends react_1.default.Component {
-    static contextTypes = { addLayerElementFactory: prop_types_1.default.func };
+    static contextType = MWaterContextComponent_1.AddLayerElementFactoryContext;
     handleAddLayer = (newLayer) => {
         const layerView = {
             id: (0, uuid_1.default)(),
@@ -32,12 +32,12 @@ class AddLayerComponent extends react_1.default.Component {
         // Add to list
         const layerViews = this.props.design.layerViews.slice();
         layerViews.push(layerView);
-        const design = lodash_1.default.extend({}, this.props.design, { layerViews });
-        return this.props.onDesignChange(design);
+        const design = { ...this.props.design, layerViews };
+        this.props.onDesignChange(design);
     };
     render() {
-        if (this.context.addLayerElementFactory) {
-            return this.context.addLayerElementFactory(this.props);
+        if (this.context) {
+            return this.context(this.props);
         }
         const newLayers = [
             {