@mwater/visualization 5.2.0 → 5.3.0

package/src/layouts/blocks/BlocksDisplayComponent.tsx

@@ -0,0 +1,498 @@
+import _ from "lodash"
+import React, { CSSProperties, ReactElement } from "react"
+import uuid from "uuid"
+import DraggableBlockComponent from "./DraggableBlockComponent"
+import DecoratedBlockComponent from "../DecoratedBlockComponent"
+import PaletteItemComponent from "./PaletteItemComponent"
+import ClipboardPaletteItemComponent from "./ClipboardPaletteItemComponent"
+import * as blockUtils from "./blockUtils"
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent"
+import HorizontalBlockComponent from "./HorizontalBlockComponent"
+import { DashboardStyleWrapper, DashboardTheme, getDefaultLayoutOptions } 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?: DashboardTheme
+
+  /** layout options to use */
+  layoutOptions?: any
+
+  /** Renders a widget. Passed (options) */
+  renderWidget: (options: RenderWidgetOptions) => ReactElement
+
+  /** True to prevent maps */
+  disableMaps?: boolean
+
+  /** clipboard contents */
+  clipboard?: 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
+*/
+class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps> {
+  handleBlockDrop = (sourceBlock: LayoutBlock, targetBlock: LayoutBlock, side: "top" | "left" | "right" | "bottom") => {
+    // Remove source from items
+    let items = blockUtils.removeBlock(this.props.items, sourceBlock)!
+
+    // Remove source from target also
+    targetBlock = blockUtils.removeBlock(targetBlock, sourceBlock)!
+
+    items = blockUtils.dropBlock(items, sourceBlock, targetBlock, side)
+    items = blockUtils.cleanBlock(items)
+    return this.props.onItemsChange!(items)
+  }
+
+  handleBlockRemove = (block: LayoutBlock) => {
+    let items = blockUtils.removeBlock(this.props.items, block)!
+    items = blockUtils.cleanBlock(items)
+    return this.props.onItemsChange!(items)
+  }
+
+  handleBlockUpdate = (block: LayoutBlock) => {
+    let items = blockUtils.updateBlock(this.props.items, block)!
+    items = blockUtils.cleanBlock(items)
+    return this.props.onItemsChange!(items)
+  }
+
+  /**
+   * 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 => {
+    let elem: ReactElement | null = null;
+
+    switch (block.type) {
+      case "root":
+        return <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 <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 <HorizontalBlockComponent
+          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 = <AutoSizeComponent injectWidth={true} key={block.id}>
+          {(size: any) => (
+            <div
+              id={block.id}
+              style={{
+                width: size.width,
+                height: block.aspectRatio != null ? size.width / block.aspectRatio : undefined
+              }}
+            />
+          )}
+        </AutoSizeComponent>;
+
+        if (this.props.onItemsChange) {
+          elem = (
+            <DraggableBlockComponent
+              key={block.id}
+              block={block}
+              onBlockDrop={this.handleBlockDrop}
+            >
+              <DecoratedBlockComponent
+                key={block.id}
+                isDragging={false}
+                aspectRatio={block.aspectRatio}
+                onAspectRatioChange={
+                  block.aspectRatio != null
+                    ? (aspectRatio: any) =>
+                      this.props.onItemsChange!(
+                        blockUtils.updateBlock(this.props.items, _.extend({}, block, { aspectRatio }))
+                      )
+                    : undefined
+                }
+                onBlockRemove={this.props.onItemsChange != null ? this.handleBlockDrop.bind(null, block) : undefined}
+              >
+                {elem}
+              </DecoratedBlockComponent>
+            </DraggableBlockComponent>
+          );
+        }
+        break;
+
+      case "widget":
+        elem = <AutoSizeComponent injectWidth={true} key={block.id}>
+          {(size: any) =>
+            this.props.renderWidget({
+              id: block.id,
+              type: block.widgetType!,
+              design: block.design,
+              onDesignChange: this.props.onItemsChange
+                ? (design: any) =>
+                  this.props.onItemsChange!(blockUtils.updateBlock(this.props.items, _.extend({}, block, { design })))
+                : undefined,
+              width: size.width,
+              height: block.aspectRatio != null ? size.width / block.aspectRatio : undefined,
+              priority
+            })
+          }
+        </AutoSizeComponent>;
+
+        if (this.props.onItemsChange) {
+          elem = (
+            <DraggableBlockComponent
+              key={block.id}
+              block={block}
+              onBlockDrop={this.handleBlockDrop}
+            >
+              <DecoratedBlockComponent
+                key={block.id}
+                isDragging={false}
+                aspectRatio={block.aspectRatio}
+                onAspectRatioChange={
+                  block.aspectRatio != null
+                    ? (aspectRatio: any) =>
+                      this.props.onItemsChange!(
+                        blockUtils.updateBlock(this.props.items, _.extend({}, block, { aspectRatio }))
+                      )
+                    : undefined
+                }
+                onBlockRemove={this.props.onItemsChange != null ? this.handleBlockDrop.bind(null, block) : undefined}
+              >
+                {elem}
+              </DecoratedBlockComponent>
+            </DraggableBlockComponent>
+          );
+        }
+        break;
+      default:
+        throw new Error(`Unknown block type ${block.type}`);
+    }
+
+    // Wrap block in padding
+    return (
+      <div key={block.id} className={`mwater-visualization-block mwater-visualization-block-${block.type}`}>
+        {elem}
+      </div>
+    );
+  };
+
+  createBlockItem(block: any) {
+    // Add unique id
+    return () => ({
+      block: _.extend({}, block, { id: uuid() })
+    })
+  }
+
+  renderPalette() {
+    return (
+      <div key="palette" style={{ width: 141, height: "100%", position: "absolute", top: 0, left: 0 }}>
+        <div className="mwater-visualization-palette" style={{ height: "100%" }}>
+          <PaletteItemComponent
+            createItem={this.createBlockItem({ type: "widget", widgetType: "Text", design: { style: "title" } })}
+            title={<i className="fa fa-font" />}
+            subtitle="Title"
+          />
+          <PaletteItemComponent
+            createItem={this.createBlockItem({ type: "widget", widgetType: "Text", design: {} })}
+            title={<i className="fa fa-align-left" />}
+            subtitle="Text"
+          />
+          <PaletteItemComponent
+            createItem={this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "Image", design: {} })}
+            title={<i className="fa fa-picture-o" />}
+            subtitle="Image"
+          />
+          <PaletteItemComponent
+            createItem={this.createBlockItem({
+              type: "widget",
+              aspectRatio: 1.4,
+              widgetType: "LayeredChart",
+              design: {}
+            })}
+            title={<i className="fa fa-bar-chart" />}
+            subtitle="Chart"
+          />
+          {!this.props.disableMaps && (
+            <PaletteItemComponent
+              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={<i className="fa fa-map-o" />}
+              subtitle="Map"
+            />
+          )}
+          <PaletteItemComponent
+            createItem={this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "TableChart", design: {} })}
+            title={<i className="fa fa-table" />}
+            subtitle="Table"
+          />
+          <PaletteItemComponent
+            createItem={this.createBlockItem({ type: "widget", widgetType: "PivotChart", design: {} })}
+            title={<img
+              width={24}
+              height={24}
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAb0lEQVRIx91VQQrAIAwzo/7/ydllG0MQS21EzMW2ICFtoyBZlLDn/LOgySPAG1xFDDmBtZI6efoMvODozkyL2IlTCOisfS2KrqG0RXus6fkEVBIw08khE62aQY0ogMdEswqwYouwvQ8s+4M576m4Ae/tET/u1taEAAAAAElFTkSuQmCC"
+            />}
+            subtitle="Pivot"
+          />
+          <PaletteItemComponent
+            createItem={this.createBlockItem({
+              type: "widget",
+              aspectRatio: 1.4,
+              widgetType: "CalendarChart",
+              design: {}
+            })}
+            title={<i className="fa fa-calendar" />}
+            subtitle="Calendar"
+          />
+          <PaletteItemComponent
+            createItem={this.createBlockItem({
+              type: "widget",
+              aspectRatio: 1.4,
+              widgetType: "ImageMosaicChart",
+              design: {}
+            })}
+            title={<i className="fa fa-th" />}
+            subtitle="Mosaic"
+          />
+          <PaletteItemComponent
+            createItem={this.createBlockItem({ type: "spacer", aspectRatio: 2 })}
+            title={<i className="fa fa-square-o" />}
+            subtitle="Spacer"
+          />
+          <PaletteItemComponent
+            createItem={this.createBlockItem({
+              type: "widget",
+              aspectRatio: 16.0 / 9.0,
+              widgetType: "IFrame",
+              design: {}
+            })}
+            title={<i className="fa fa-youtube-play" />}
+            subtitle="Video"
+          />
+          <PaletteItemComponent
+            createItem={this.createBlockItem({
+              type: "widget",
+              widgetType: "TOC",
+              design: { numbering: false, borderWeight: 2, header: "Contents" }
+            })}
+            title={<i className="fa fa-list-ol" />}
+            subtitle="TOC"
+          />
+          {this.props.onClipboardChange && (
+            <ClipboardPaletteItemComponent
+              clipboard={this.props.clipboard}
+              onClipboardChange={this.props.onClipboardChange}
+              cantPasteMessage={this.props.cantPasteMessage}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    let innerParentStyle: CSSProperties
+    const layoutOptions = this.props.layoutOptions || getDefaultLayoutOptions()
+    if (this.props.onItemsChange) {
+      innerParentStyle = {}
+      innerParentStyle.maxWidth = layoutOptions.maximumWidth || undefined
+
+      return (
+        <DashboardStyleWrapper
+          style={{ width: "100%", height: "100%", overflow: "hidden", position: "relative" }}
+          layoutOptions={layoutOptions}
+        >
+          {this.renderPalette()}
+          <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`}
+          >
+            <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)}
+            </div>
+          </div>
+        </DashboardStyleWrapper>
+      )
+    } else {
+      return (
+        <AutoSizeComponent injectWidth injectHeight>
+          {(size: any) => {
+            const outerParentStyle: CSSProperties = {
+              width: "100%",
+              height: "100%",
+              overflowX: "auto",
+              overflowY: "scroll"
+            }
+            innerParentStyle = {}
+
+            // Remove padding if small
+            if (size.width < 600) {
+              innerParentStyle.padding = "0px"
+            }
+
+            // Scroll/scale
+            innerParentStyle.maxWidth = layoutOptions.maximumWidth || undefined
+
+            if (layoutOptions.belowMinimumWidth === "scroll") {
+              innerParentStyle.minWidth = layoutOptions.minimumWidth || undefined
+            } else {
+              if (layoutOptions.minimumWidth != null && size.width < layoutOptions.minimumWidth) {
+                const scale = size.width / layoutOptions.minimumWidth
+                outerParentStyle.transform = `scale(${scale})`
+                outerParentStyle.width = size.width / scale
+                outerParentStyle.height = size.height / scale
+                outerParentStyle.transformOrigin = "top left"
+              }
+            }
+
+            return (
+              <DashboardStyleWrapper
+                style={{ width: "100%", height: "100%" }}
+                layoutOptions={layoutOptions}
+              >
+                <div
+                  style={outerParentStyle}
+                  className={`mwater-visualization-block-parent-outer mwater-visualization-block-parent-outer-${this.props.style || "default"
+                    } mwater-visualization-block-viewing`}
+                >
+                  <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
+                    )}
+                  </div>
+                </div>
+              </DashboardStyleWrapper>
+            )
+          }}
+        </AutoSizeComponent>
+      )
+    }
+  }
+}
+export default BlocksDisplayComponent
+
+interface RootBlockComponentProps {
+  block: LayoutBlock
+  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
+  onBlockRemove?: any
+}
+
+class RootBlockComponent extends React.Component<RootBlockComponentProps> {
+  render() {
+    const elem = (
+      // Flex to prevent margin collapse
+      <div key="root" style={{ display: "flex", flexDirection: "column" }}>
+        {_.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)
+        })}
+      </div>
+    )
+
+    // If draggable
+    if (this.props.onBlockDrop != null) {
+      return (
+        <DraggableBlockComponent
+          block={this.props.block}
+          onBlockDrop={this.props.onBlockDrop}
+          style={{ height: "100%" }}
+          onlyBottom
+        >
+          {elem}
+        </DraggableBlockComponent>
+      )
+    } else {
+      return elem
+    }
+  }
+}
+
+interface VerticalBlockComponentProps {
+  block: LayoutBlock
+  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
+  onBlockRemove?: any
+}
+
+class VerticalBlockComponent extends React.Component<VerticalBlockComponentProps> {
+  render() {
+    return (
+      // Flex to prevent margin collapse
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {_.map(this.props.block.blocks!, block => {
+          return this.props.renderBlock(block, this.props.collapseColumns, this.props.priority)
+        })}
+      </div>
+    )
+  }
+}

package/src/layouts/blocks/BlocksLayoutManager.ts

@@ -2,26 +2,17 @@ import _ from "lodash"
 import React from "react"
 const R = React.createElement
 import uuid from "uuid"
-import LayoutManager from "../LayoutManager"
+import LayoutManager, { RenderLayoutOptions } from "../LayoutManager"
+import BlocksDisplayComponent from "./BlocksDisplayComponent"
 
 export default class BlocksLayoutManager extends LayoutManager {
-  // 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
-  renderLayout(options: any) {
-    const BlocksDisplayComponent = require("./BlocksDisplayComponent").default
+  /**
+   * Renders the layout as a react element
+   */
+  renderLayout(options: RenderLayoutOptions) {
     return R(BlocksDisplayComponent, {
       items: options.items || { id: "root", type: "root", blocks: [] },
       onItemsChange: options.onItemsChange,
-      style: options.style,
       layoutOptions: options.layoutOptions,
       renderWidget: options.renderWidget,
       disableMaps: options.disableMaps,

package/src/layouts/blocks/HorizontalBlockComponent.ts

@@ -7,8 +7,9 @@ import DraggableBlockComponent from "./DraggableBlockComponent"
 
 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 */
@@ -30,7 +31,7 @@ export default class HorizontalBlockComponent extends React.Component<
 > {
   blockRefs: { [blockId: string]: HTMLElement | null }
 
-  constructor(props: any) {
+  constructor(props: HorizontalBlockComponentProps) {
     super(props)
 
     this.state = {
@@ -47,7 +48,7 @@ export default class HorizontalBlockComponent extends React.Component<
   componentWillUnmount() {
     // Remove listeners
     document.removeEventListener("mousemove", this.handleMouseMove)
-    return document.removeEventListener("mouseup", this.handleMouseUp)
+    document.removeEventListener("mouseup", this.handleMouseUp)
   }
 
   handleMouseDown = (index: any, ev: any) => {
@@ -62,7 +63,7 @@ export default class HorizontalBlockComponent extends React.Component<
     })
 
     document.addEventListener("mousemove", this.handleMouseMove)
-    return document.addEventListener("mouseup", this.handleMouseUp)
+    document.addEventListener("mouseup", this.handleMouseUp)
   }
 
   handleMouseMove = (ev: any) => {
@@ -118,7 +119,7 @@ export default class HorizontalBlockComponent extends React.Component<
       return R(
         "div",
         null,
-        _.map(this.props.block.blocks!, (block, index) => this.props.renderBlock(block, true))
+        _.map(this.props.block.blocks!, (block) => this.props.renderBlock(block, true, this.props.priority))
       )
     }
 
@@ -177,7 +178,7 @@ export default class HorizontalBlockComponent extends React.Component<
                       return (this.blockRefs[`block${index}`] = c)
                     }
                   },
-                  this.props.renderBlock(block)
+                  this.props.renderBlock(block, false, this.props.priority)
                 )
               ]
             })
@@ -213,7 +214,7 @@ export default class HorizontalBlockComponent extends React.Component<
                 },
                 className: "mwater-visualization-horizontal-block-item"
               },
-              this.props.renderBlock(block)
+              this.props.renderBlock(block, false, this.props.priority)
             )
           ]
         })

package/src/mWaterLoader.ts

@@ -19,6 +19,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 */
@@ -69,7 +71,8 @@ export default function mWaterLoader(
     const schema = new Schema(schemaJson)
     const dataSource = new MWaterDataSource(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, {

package/src/maps/AddLayerComponent.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement
@@ -6,15 +5,16 @@ const R = React.createElement
 import uuid from "uuid"
 import LayerFactory from "./LayerFactory"
 import { DataSource, Schema } from "@mwater/expressions"
-import { MapLayerView } from ".."
+import { MapDesign, MapLayerView } from ".."
+import { AddLayerElementFactoryContext } from "../MWaterContextComponent"
 
 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
@@ -23,7 +23,7 @@ export interface AddLayerComponentProps {
 // Dropdown to add a new layer.
 // Can be overridden by context of addLayerElementFactory which is called with all props
 export default class AddLayerComponent extends React.Component<AddLayerComponentProps> {
-  static contextTypes = { addLayerElementFactory: PropTypes.func }
+  static contextType = AddLayerElementFactoryContext
 
   handleAddLayer = (newLayer: any) => {
     const layerView: MapLayerView = {
@@ -48,13 +48,13 @@ export default class AddLayerComponent extends React.Component<AddLayerComponent
     const layerViews = this.props.design.layerViews.slice()
     layerViews.push(layerView)
 
-    const design = _.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 = [