@mwater/visualization 5.1.0 → 5.3.0

package/lib/layouts/LayoutManager.d.ts

@@ -1,37 +1,41 @@
 import { ReactElement, ReactNode } from "react";
 import { BlocksLayoutOptions } from "../dashboards/layoutOptions";
+/** Options for rendering a widget */
+export interface RenderWidgetOptions {
+    id: string;
+    type: string;
+    design: any;
+    onDesignChange?: (design: any) => void;
+    width: number;
+    /** height of widget. If not specified, is auto height */
+    height?: number;
+    /** Priority of widget. Higher priority widgets are rendered first */
+    priority?: number;
+}
+export interface RenderLayoutOptions {
+    /** width of layout */
+    width?: number;
+    /** opaque items object that layout manager understands */
+    items: any;
+    /** Called when items changes */
+    onItemsChange?: (items: any) => void;
+    /** called with ({ id:, type:, design:, onDesignChange:, width:, height:  }) */
+    renderWidget: (options: RenderWidgetOptions) => ReactElement;
+    /** layout options to use */
+    layoutOptions: BlocksLayoutOptions;
+    /** true to disable maps */
+    disableMaps?: boolean;
+    /** clipboard contents */
+    clipboard?: any;
+    /** called when clipboard is changed */
+    onClipboardChange?: (clipboard: any) => void;
+    /** message to display if clipboard can't be pasted into current dashboard */
+    cantPasteMessage?: string;
+}
 /** Responsible for laying out items, rendering widgets and holding them in a data structure that is layout manager specific */
 export default class LayoutManager {
     /** Renders the layout as a react element */
-    renderLayout(options: {
-        /** width of layout */
-        width?: number;
-        /** opaque items object that layout manager understands */
-        items: any;
-        /** Called when items changes */
-        onItemsChange?: (items: any) => void;
-        /** called with ({ id:, type:, design:, onDesignChange:, width:, height:  }) */
-        renderWidget: (options: {
-            id: string;
-            type: string;
-            design: any;
-            onDesignChange: (design: any) => void;
-            width: number;
-            height: number;
-        }) => ReactElement;
-        /** style to use for layout. null for default */
-        style: string | null;
-        /** layout options to use */
-        layoutOptions: BlocksLayoutOptions | null;
-        /** true to disable maps */
-        disableMaps?: boolean;
-        /** clipboard contents */
-        clipboard: any;
-        /** called when clipboard is changed */
-        onClipboardChange: (clipboard: any) => void;
-        /** message to display if clipboard can't be pasted into current dashboard */
-        cantPasteMessage: string;
-    }): ReactNode;
+    renderLayout(options: RenderLayoutOptions): ReactNode;
     /** Tests if dashboard has any items */
     isEmpty(items: any): boolean;
     /** Gets { type, design } of a widget */

package/lib/layouts/LayoutManager.js

@@ -19,17 +19,11 @@ class LayoutManager {
         return [];
     }
     static createLayoutManager(type) {
-        // Default is old grid type
-        type = type || "grid";
+        type = type || "blocks";
         switch (type) {
-            case "grid": // Old one
-                var GridLayoutManager = require("./grid/GridLayoutManager").default;
-                return new GridLayoutManager();
-                break;
-            case "blocks": // New one
+            case "blocks":
                 var BlocksLayoutManager = require("./blocks/BlocksLayoutManager").default;
                 return new BlocksLayoutManager();
-                break;
             default:
                 throw new Error(`Unknown layout manager type ${type}`);
         }

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

@@ -1,75 +1,45 @@
-import React from "react";
-import HorizontalBlockComponent from "./HorizontalBlockComponent";
+import React, { ReactElement } from "react";
+import { DashboardTheme } from "../../dashboards/layoutOptions";
 import { LayoutBlock } from "./blockUtils";
+import { RenderWidgetOptions } from "../LayoutManager";
 export interface BlocksDisplayComponentProps {
     items: LayoutBlock;
     onItemsChange?: (items: LayoutBlock) => void;
     /** Stylesheet to use. null for default */
-    style?: string;
+    style?: DashboardTheme;
     /** layout options to use */
     layoutOptions?: any;
     /** Renders a widget. Passed (options) */
-    renderWidget: any;
+    renderWidget: (options: RenderWidgetOptions) => ReactElement;
     /** True to prevent maps */
     disableMaps?: boolean;
-    /** Including onClipboardChange adds a clipboard palette item that can be used to copy and paste widgets */
+    /** clipboard contents */
     clipboard?: any;
-    onClipboardChange?: any;
+    /** Including onClipboardChange adds a clipboard palette item that can be used to copy and paste widgets */
+    onClipboardChange?: (clipboard: any) => void;
+    /** message to display if clipboard can't be pasted into current dashboard */
     cantPasteMessage?: string;
 }
+/**
+  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
+*/
 declare class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps> {
-    handleBlockDrop: (sourceBlock: any, targetBlock: any, side: "top" | "left" | "right" | "bottom") => void;
-    handleBlockRemove: (block: any) => void;
-    handleBlockUpdate: (block: any) => void;
-    renderBlock: (block: any, collapseColumns?: boolean) => React.CElement<RootBlockComponentProps, RootBlockComponent> | React.CElement<any, HorizontalBlockComponent> | React.DetailedReactHTMLElement<{
-        key: any;
-        className: string;
-    }, HTMLElement>;
+    handleBlockDrop: (sourceBlock: LayoutBlock, targetBlock: LayoutBlock, side: "top" | "left" | "right" | "bottom") => void;
+    handleBlockRemove: (block: LayoutBlock) => void;
+    handleBlockUpdate: (block: LayoutBlock) => void;
+    /**
+     * 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: LayoutBlock, collapseColumns: boolean, priority: number) => ReactElement;
     createBlockItem(block: any): () => {
         block: {};
     };
-    renderPalette(): React.DetailedReactHTMLElement<{
-        key: string;
-        style: {
-            width: number;
-            height: string;
-            position: "absolute";
-            top: number;
-            left: number;
-        };
-    }, HTMLElement>;
-    render(): React.CElement<any, React.Component<any, any, any>> | React.DetailedReactHTMLElement<{
-        style: {
-            width: string;
-            height: string;
-            overflow: "hidden";
-            position: "relative";
-        };
-    }, HTMLElement>;
+    renderPalette(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export default BlocksDisplayComponent;
-interface RootBlockComponentProps {
-    block: any;
-    collapseColumns?: boolean;
-    renderBlock: any;
-    /** Called with (sourceBlock, targetBlock, side) when block is dropped on it. side is top, left, bottom, right */
-    onBlockDrop?: any;
-    onBlockRemove?: any;
-}
-declare class RootBlockComponent extends React.Component<RootBlockComponentProps> {
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<{
-        block: any;
-        onBlockDrop: any;
-        style: {
-            height: string;
-        };
-        onlyBottom: boolean;
-    }, React.Component<{
-        block: any;
-        onBlockDrop: any;
-        style: {
-            height: string;
-        };
-        onlyBottom: boolean;
-    }, any, any>>;
-}

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;