@mwater/visualization 5.0.0

package/src/layouts/grid/PaletteItemComponent.ts

@@ -0,0 +1,28 @@
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+
+const DragSourceComponent = require("../DragSourceComponent").default("block-move")
+
+export interface PaletteItemComponentProps {
+  /** Create the drag item */
+  createItem: any
+  title?: any
+  subtitle?: any
+}
+
+// Item in a palette that can be dragged to add a widget or other item
+export default class PaletteItemComponent extends React.Component<PaletteItemComponentProps> {
+  render() {
+    return R(
+      DragSourceComponent,
+      { createDragItem: this.props.createItem },
+      R(
+        "div",
+        { className: "mwater-visualization-palette-item" },
+        R("div", { className: "title", key: "title" }, this.props.title),
+        R("div", { className: "subtitle", key: "subtitle" }, this.props.subtitle)
+      )
+    )
+  }
+}

package/src/layouts/grid/README.md

@@ -0,0 +1,14 @@
+Items is:
+
+`dashboard items, indexed by id. Each item contains:
+
+`layout`: layout-engine specific data for layout of item
+`widget`: details of the widget (see below)
+
+### Widget data
+
+`widget` contains:
+
+`type`: type string of the widget. Understandable by widget factory
+`version`: version of the widget. semver string
+`design`: design of the widget as a JSON object

package/src/layouts/grid/WidgetContainerComponent.ts

@@ -0,0 +1,420 @@
+import React, { CSSProperties } from "react"
+import ReactDOM from "react-dom"
+import _ from "lodash"
+const R = React.createElement
+import { DragSource, DropTarget } from "react-dnd"
+import DecoratedBlockComponent from "../DecoratedBlockComponent"
+
+export interface LayoutComponentProps {
+  /** Opaque information to be used when a block is dragged */
+  dragInfo: any
+  canDrag: boolean
+  connectMoveHandle: any
+  connectResizeHandle: any
+}
+
+// Render a child element as draggable, resizable block, injecting handle connectors
+// to child element
+class LayoutComponent extends React.Component<LayoutComponentProps> {
+  render() {
+    if (this.props.canDrag) {
+      return React.cloneElement(React.Children.only(this.props.children!) as any, {
+        connectMoveHandle: this.props.connectMoveHandle,
+        connectResizeHandle: this.props.connectResizeHandle
+      })
+    } else {
+      return this.props.children
+    }
+  }
+}
+
+const moveSpec = {
+  beginDrag(props: any, monitor: any, component: any) {
+    return props.dragInfo
+  },
+  canDrag(props: any, monitor: any) {
+    return props.canDrag
+  }
+}
+
+function moveCollect(connect: any, monitor: any) {
+  return {
+    connectMoveHandle: connect.dragSource()
+  }
+}
+
+const MoveLayoutComponent = DragSource("block-move", moveSpec, moveCollect)(LayoutComponent)
+
+const resizeSpec = {
+  beginDrag(props: any, monitor: any, component: any) {
+    return props.dragInfo
+  },
+  canDrag(props: any, monitor: any) {
+    return props.canDrag
+  }
+}
+
+function resizeCollect(connect: any, monitor: any) {
+  return {
+    connectResizeHandle: connect.dragSource()
+  }
+}
+
+const MoveResizeLayoutComponent = DragSource("block-resize", resizeSpec, resizeCollect)(MoveLayoutComponent)
+
+interface ContainerProps {
+  layoutEngine: any
+  /** Lookup of id -> { widget:, layout: } */
+  items: any
+  /** Called with lookup of id -> { widget:, layout: } */
+  onItemsChange?: any
+  /** Renders a widget */
+  renderWidget: any
+  /** width in pixels */
+  width: number
+  connectDropTarget: any
+}
+
+interface ContainerState {
+  moveHover: any
+  resizeHover: any
+}
+
+// Container contains layouts to layout. It renders widgets at the correct location.
+class Container extends React.Component<ContainerProps, ContainerState> {
+  constructor(props: any) {
+    super(props)
+    this.state = { moveHover: null, resizeHover: null }
+  }
+
+  setMoveHover(hoverInfo: any) {
+    return this.setState({ moveHover: hoverInfo })
+  }
+
+  setResizeHover(hoverInfo: any) {
+    return this.setState({ resizeHover: hoverInfo })
+  }
+
+  dropLayout(id: any, droppedRect: any, widget: any) {
+    // Stop hover
+    this.setState({ moveHover: null, resizeHover: null })
+
+    // Convert rect to layout
+    const droppedLayout = this.props.layoutEngine.rectToLayout(droppedRect)
+
+    // Insert dropped layout
+    let items = _.clone(this.props.items)
+    items[id] = { layout: droppedLayout, widget }
+
+    let layouts = {}
+    for (id in items) {
+      const item = items[id]
+      layouts[id] = item.layout
+    }
+
+    // Perform layout
+    layouts = this.props.layoutEngine.performLayout(layouts, id)
+
+    // Update item layouts
+    items = _.mapValues(items, (item, id) => {
+      return _.extend({}, item, { layout: layouts[id!] })
+    })
+
+    return this.props.onItemsChange(items)
+  }
+
+  // Called when a block is dropped
+  dropMoveLayout(dropInfo: any) {
+    // Get rectangle of dropped block
+    const droppedRect = {
+      x: dropInfo.x,
+      y: dropInfo.y,
+      width: dropInfo.dragInfo.bounds.width, // width and height are from drop info
+      height: dropInfo.dragInfo.bounds.height
+    }
+
+    return this.dropLayout(dropInfo.dragInfo.id, droppedRect, dropInfo.dragInfo.widget)
+  }
+
+  dropResizeLayout(dropInfo: any) {
+    // Get rectangle of hovered block
+    const droppedRect = {
+      x: dropInfo.dragInfo.bounds.x,
+      y: dropInfo.dragInfo.bounds.y,
+      width: dropInfo.width,
+      height: dropInfo.height
+    }
+
+    return this.dropLayout(dropInfo.dragInfo.id, droppedRect, dropInfo.dragInfo.widget)
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    // Reset hover if not over
+    if (!nextProps.isOver && (this.state.moveHover || this.state.resizeHover)) {
+      // Defer to prevent "Cannot dispatch in the middle of a dispatch." error
+      _.defer(() => {
+        this.setState({ moveHover: null, resizeHover: null })
+      })
+    }
+  }
+
+  handleRemove = (id: any) => {
+    // Update item layouts
+    const items = _.omit(this.props.items, id)
+    return this.props.onItemsChange(items)
+  }
+
+  handleWidgetDesignChange = (id: any, widgetDesign: any) => {
+    let { widget } = this.props.items[id]
+    widget = _.extend({}, widget, { design: widgetDesign })
+
+    let item = this.props.items[id]
+    item = _.extend({}, item, { widget })
+
+    const items = _.clone(this.props.items)
+    items[id] = item
+
+    return this.props.onItemsChange(items)
+  }
+
+  renderPlaceholder(bounds: any) {
+    return R("div", {
+      key: "placeholder",
+      style: {
+        position: "absolute",
+        left: bounds.x,
+        top: bounds.y,
+        width: bounds.width,
+        height: bounds.height,
+        border: "dashed 3px #AAA",
+        borderRadius: 5,
+        padding: 5
+      }
+    })
+  }
+
+  // Render a particular layout. Allow visible to be false so that
+  // dragged elements can retain state
+  renderItem = (id: any, item: any, layout: any, visible = true) => {
+    // Calculate bounds
+    const bounds = this.props.layoutEngine.getLayoutBounds(layout)
+
+    // Position absolutely
+    const style: CSSProperties = {
+      position: "absolute",
+      left: bounds.x,
+      top: bounds.y
+    }
+
+    if (!visible) {
+      style.display = "none"
+    }
+
+    // Create dragInfo which is all the info needed to drop the layout
+    const dragInfo = {
+      id,
+      bounds,
+      widget: item.widget
+    }
+
+    let elem = this.props.renderWidget({
+      id,
+      type: item.widget.type,
+      design: item.widget.design,
+      onDesignChange: this.props.onItemsChange != null ? this.handleWidgetDesignChange.bind(null, id) : undefined,
+      width: bounds.width - 10,
+      height: bounds.height - 10
+    })
+
+    // Render decorated if editable
+    if (this.props.onItemsChange) {
+      elem = React.createElement(
+        DecoratedBlockComponent,
+        // style: { width: bounds.width, height: bounds.height }
+        { onBlockRemove: this.handleRemove.bind(null, id) },
+        elem
+      )
+    } else {
+      elem = R(
+        "div",
+        { className: "mwater-visualization-block-view" },
+        // style: { width: bounds.width, height: bounds.height },
+        elem
+      )
+    }
+
+    // Clone element, injecting width, height and enclosing in a dnd block
+    return R(
+      "div",
+      { style, key: id },
+      React.createElement(MoveResizeLayoutComponent, { dragInfo, canDrag: this.props.onItemsChange != null }, elem)
+    )
+  }
+
+  // Calculate a lookup of layouts incorporating hover info
+  calculateLayouts(props: any, state: any) {
+    // Get hovered block if present
+    let hoveredRect, id
+    let hoveredDragInfo = null
+    let hoveredLayout = null // Layout of hovered block
+    if (state.moveHover) {
+      hoveredDragInfo = state.moveHover.dragInfo
+      hoveredRect = {
+        x: state.moveHover.x,
+        y: state.moveHover.y,
+        width: state.moveHover.dragInfo.bounds.width,
+        height: state.moveHover.dragInfo.bounds.height
+      }
+      hoveredLayout = props.layoutEngine.rectToLayout(hoveredRect)
+    }
+
+    if (state.resizeHover) {
+      hoveredDragInfo = state.resizeHover.dragInfo
+      hoveredRect = {
+        x: state.resizeHover.dragInfo.bounds.x,
+        y: state.resizeHover.dragInfo.bounds.y,
+        width: state.resizeHover.width,
+        height: state.resizeHover.height
+      }
+      hoveredLayout = props.layoutEngine.rectToLayout(hoveredRect)
+    }
+
+    let layouts = {}
+    for (id in props.items) {
+      const item = props.items[id]
+      layouts[id] = item.layout
+    }
+
+    // Add hovered layout
+    if (hoveredDragInfo) {
+      layouts[hoveredDragInfo.id] = hoveredLayout
+    }
+
+    // Perform layout
+    layouts = props.layoutEngine.performLayout(layouts, hoveredDragInfo ? hoveredDragInfo.id : undefined)
+    return layouts
+  }
+
+  renderItems(items: any) {
+    let id
+    const layouts = this.calculateLayouts(this.props, this.state)
+
+    const renderElems = []
+    const hover = this.state.moveHover || this.state.resizeHover
+
+    // Render blocks in their adjusted position
+    const ids = []
+    for (id in items) {
+      ids.push(id)
+    }
+    if (hover && !ids.includes(hover.dragInfo.id)) {
+      ids.push(hover.dragInfo.id)
+    }
+
+    for (id of _.sortBy(ids)) {
+      const item = items[id]
+      if (!hover || id !== hover.dragInfo.id) {
+        renderElems.push(this.renderItem(id, item, layouts[id]))
+      } else {
+        // Render it anyway so that its state is retained
+        if (item) {
+          renderElems.push(this.renderItem(id, item, layouts[id], false))
+        }
+        renderElems.push(this.renderPlaceholder(this.props.layoutEngine.getLayoutBounds(layouts[id])))
+      }
+    }
+
+    return renderElems
+  }
+
+  // This gets called 100s of times when dragging
+  shouldComponentUpdate(nextProps: any, nextState: any) {
+    if (this.props.width !== nextProps.width) {
+      return true
+    }
+
+    if (this.props.layoutEngine !== nextProps.layoutEngine) {
+      return true
+    }
+
+    const layouts = this.calculateLayouts(this.props, this.state)
+    const nextLayouts = this.calculateLayouts(nextProps, nextState)
+
+    if (!_.isEqual(layouts, nextLayouts)) {
+      return true
+    }
+
+    return false
+  }
+
+  render() {
+    // Determine height using layout engine
+    const style = {
+      width: this.props.width,
+      height: "100%", // @props.layoutEngine.calculateHeight(layouts)
+      position: "relative"
+    }
+
+    // Connect as a drop target
+    return this.props.connectDropTarget(R("div", { style }, this.renderItems(this.props.items)))
+  }
+}
+
+const targetSpec = {
+  drop(props: any, monitor: any, component: any) {
+    if (monitor.getItemType() === "block-move") {
+      const rect = (ReactDOM.findDOMNode(component) as Element).getBoundingClientRect()
+      component.dropMoveLayout({
+        dragInfo: monitor.getItem(),
+        x:
+          monitor.getClientOffset().x -
+          (monitor.getInitialClientOffset().x - monitor.getInitialSourceClientOffset().x) -
+          rect.left,
+        y:
+          monitor.getClientOffset().y -
+          (monitor.getInitialClientOffset().y - monitor.getInitialSourceClientOffset().y) -
+          rect.top
+      })
+    }
+    if (monitor.getItemType() === "block-resize") {
+      component.dropResizeLayout({
+        dragInfo: monitor.getItem(),
+        width: monitor.getItem().bounds.width + monitor.getDifferenceFromInitialOffset().x,
+        height: monitor.getItem().bounds.height + monitor.getDifferenceFromInitialOffset().y
+      })
+    }
+  },
+  hover(props: any, monitor: any, component: any) {
+    if (monitor.getItemType() === "block-move") {
+      const rect = (ReactDOM.findDOMNode(component) as Element).getBoundingClientRect()
+      component.setMoveHover({
+        dragInfo: monitor.getItem(),
+        x:
+          monitor.getClientOffset().x -
+          (monitor.getInitialClientOffset().x - monitor.getInitialSourceClientOffset().x) -
+          rect.left,
+        y:
+          monitor.getClientOffset().y -
+          (monitor.getInitialClientOffset().y - monitor.getInitialSourceClientOffset().y) -
+          rect.top
+      })
+    }
+    if (monitor.getItemType() === "block-resize") {
+      component.setResizeHover({
+        dragInfo: monitor.getItem(),
+        width: monitor.getItem().bounds.width + monitor.getDifferenceFromInitialOffset().x,
+        height: monitor.getItem().bounds.height + monitor.getDifferenceFromInitialOffset().y
+      })
+    }
+  }
+}
+
+function targetCollect(connect: any, monitor: any) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver(),
+    clientOffset: monitor.getClientOffset()
+  }
+}
+
+export default DropTarget(["block-move", "block-resize"], targetSpec, targetCollect)(Container)

package/src/mWaterLoader.ts

@@ -0,0 +1,82 @@
+import $ from "jquery"
+import _ from "lodash"
+import { DataSource, Schema } from "@mwater/expressions"
+import MWaterDataSource from "@mwater/expressions/lib/MWaterDataSource"
+import querystring from "querystring"
+
+export interface MWaterLoaderOptions {
+  /** e.g. "https://api.mwater.co/v3/". required */
+  apiUrl: string
+  /** client id if logged in. optional */
+  client?: string
+  /** share if using a share to get schema. optional */
+  share?: string
+  /** Load schema as a specific user (for shared dashboards, etc). optional */
+  asUser?: string
+  /** Extra tables to load in schema. Forms are not loaded by default as they are too many */
+  extraTables: string[]
+  /** False to disable local caching of queries. Default true */
+  localCaching?: boolean
+  /** Locales of the schema to load. Default is all. */
+  locales?: string[]
+}
+
+/** Loads a schema and data source that is specific to mWater server */
+export default function mWaterLoader(
+  options: MWaterLoaderOptions,
+  callback: (error: any, config?: { schema: Schema; dataSource: DataSource }) => void
+): void
+export default function mWaterLoader(
+  options: MWaterLoaderOptions
+): Promise<{ schema: Schema; dataSource: DataSource }>
+export default function mWaterLoader(
+  options: MWaterLoaderOptions,
+  callback?: (error: any, config?: { schema: Schema; dataSource: DataSource }) => void | Promise<{ schema: Schema; dataSource: DataSource }>
+): void | Promise<{ schema: Schema; dataSource: DataSource }> {
+  if (!callback) {
+    return new Promise((resolve, reject) => {
+      mWaterLoader(options, (err, config) => {
+        if (err) {
+          reject(err)
+        } else {
+          resolve(config!)
+        }
+      })
+    })
+  }
+
+  // Load schema
+  const query: any = {}
+  if (options.client) {
+    query.client = options.client
+  }
+  if (options.share) {
+    query.share = options.share
+  }
+  if (options.asUser) {
+    query.asUser = options.asUser
+  }
+  if (options.extraTables && options.extraTables.length > 0) {
+    query.extraTables = options.extraTables.join(",")
+  }
+  if (options.locales) {
+    query.locales = options.locales.join(",")
+  }
+
+  const url = options.apiUrl + "schema?" + querystring.stringify(query)
+
+  $.getJSON(url, (schemaJson) => {
+    const schema = new Schema(schemaJson)
+    const dataSource = new MWaterDataSource(options.apiUrl, options.client, {
+      serverCaching: false,
+      localCaching: options.localCaching != null ? options.localCaching : true
+    })
+
+    return callback(null, {
+      schema,
+      dataSource
+    })
+  }).fail((xhr) => {
+    return callback(new Error(xhr.responseText))
+  })
+}

package/src/mapdemo.ts

@@ -0,0 +1,127 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Sanity-check the conversion and remove this comment.
+// React = require 'react'
+// ReactDOM = require 'react-dom'
+// R = React.createElement
+// visualization_mwater = require './systems/mwater'
+// visualization = require './index'
+// uuid = require 'uuid'
+
+// class MapDemoComponent extends React.Component
+//   constructor: (props) ->
+//     super
+//     @state = { design: @props.initialDesign }
+
+//   componentDidMount: ->
+//     visualization_mwater.setup {
+//       apiUrl: @props.apiUrl
+//       client: @props.client
+//       onMarkerClick: (table, id) => alert("#{table}:#{id}")
+//     }, (err, results) =>
+//       if err
+//         throw err
+
+//       @setState(schema: results.schema, widgetFactory: results.widgetFactory, dataSource: results.dataSource, layerFactory: results.layerFactory)
+
+//   handleDesignChange: (design) =>
+//     @setState(design: design)
+//     console.log JSON.stringify(design, null, 2)
+
+//   render: ->
+//     if not @state.schema
+//       return R 'div', null, "Loading..."
+
+//     return R 'div', style: { height: "100%" },
+//       R 'style', null, '''html, body { height: 100% }'''
+//       React.createElement(visualization.MapComponent, {
+//         layerFactory: @state.layerFactory
+//         schema: @state.schema
+//         dataSource: @state.dataSource
+//         design: @state.design
+//         onDesignChange: @handleDesignChange
+//         })
+
+// layerViews = []
+// newLayers = []
+// addServerLayerView = (options) ->
+//   newLayers.push {
+//     name: options.name
+//     type: "MWaterServer"
+//     design: {
+//       type: options.type
+//       table: "entities.water_point"
+//       minZoom: options.minZoom
+//       maxZoom: options.maxZoom
+//     }
+//   }
+
+//   layerViews.push {
+//     id: uuid()
+//     name: options.name
+//     visible: options.visible == true
+//     opacity: 1
+//     type: "MWaterServer"
+//     group: options.group
+//     design: {
+//       type: options.type
+//       table: "entities.water_point"
+//       minZoom: options.minZoom
+//       maxZoom: options.maxZoom
+//     }
+//   }
+
+// addServerLayerView({ type: "safe_water_access", name: "Safe Water Access", group: "access", minZoom: 10 })
+// addServerLayerView({ type: "water_access", name: "Functional Water Access", group: "access", minZoom: 10 })
+// addServerLayerView({ type: "water_points_by_type", name: "Water Point Type", group: "points", visible: false })
+// addServerLayerView({ type: "functional_status", name: "Functionality", group: "points" })
+// addServerLayerView({ type: "ecoli_status", name: "E.Coli Level", group: "points" })
+
+// newLayers.push {
+//   name: "Custom Layer"
+//   type: "Markers"
+//   design: { }
+// }
+
+// layerViews.push {
+//   "id": "9ff7edcd-1955-4986-b082-c5af71e4a089",
+//   "name": "Custom Layer",
+//   "desc": "",
+//   "type": "Markers",
+//   "design": {
+//     "sublayers": [
+//       {
+//         "axes": {
+//           "geometry": {
+//             "expr": {
+//               "type": "scalar",
+//               "table": "entities.water_point",
+//               "joins": [],
+//               "expr": {
+//                 "type": "field",
+//                 "table": "entities.water_point",
+//                 "column": "location"
+//               }
+//             }
+//           }
+//         },
+//         "color": "#0088FF",
+//         "filter": null,
+//         "table": "entities.water_point"
+//       }
+//     ]
+//   },
+//   "visible": true,
+//   "opacity": 1
+// }
+
+// design = {
+//   baseLayer: "bing_road"
+//   layerViews: layerViews
+//   filters: {}
+//   bounds: { w: 0, n: 0, e: 40, s: -25 }
+// }
+
+// $ ->
+//   # sample = React.createElement(MapDemoComponent, initialDesign: design, apiUrl: "http://localhost:1234/v3/")
+//   sample = React.createElement(MapDemoComponent, initialDesign: design, apiUrl: "https://api.mwater.co/v3/")
+//   ReactDOM.render(sample, document.body)