@mwater/visualization 5.0.0

package/src/maps/LegendGroup.ts

@@ -0,0 +1,120 @@
+import React from "react"
+const R = React.createElement
+import _ from "lodash"
+
+export interface LegendGroupProps {
+  items?: { color: string, name: string }[]
+  radiusLayer?: boolean
+  defaultColor?: string
+  name?: string
+  symbol?: string | null
+  markerSize?: number
+}
+
+export default class LegendGroup extends React.Component<LegendGroupProps> {
+  static defaultProps = {
+    items: [],
+    radiusLayer: false,
+    symbol: null
+  }
+
+  render() {
+    return R(
+      "div",
+      { style: { marginBottom: 5 } },
+      React.createElement(LegendItem, {
+        hasChildren: (this.props.items || []).length > 0,
+        symbol: this.props.symbol ?? undefined,
+        markerSize: this.props.markerSize,
+        color: this.props.defaultColor,
+        name: this.props.name,
+        key: this.props.name,
+        radiusLayer: this.props.radiusLayer
+      }),
+      _.map((this.props.items || []), (item) => {
+        return React.createElement(LegendItem, {
+          isChild: true,
+          symbol: this.props.symbol ?? undefined,
+          markerSize: this.props.markerSize,
+          color: item.color,
+          name: item.name,
+          key: item.name,
+          radiusLayer: this.props.radiusLayer
+        })
+      })
+    )
+  }
+}
+
+interface LegendItemProps {
+  color?: string
+  name?: string
+  radiusLayer?: boolean
+  symbol?: string
+  markerSize?: number
+  hasChildren?: boolean
+  isChild?: boolean
+}
+
+class LegendItem extends React.Component<LegendItemProps> {
+  static defaultProps = {
+    radiusLayer: false,
+    hasChildren: false,
+    isChild: false
+  }
+
+  renderSymbol() {
+    const symbolStyle = {
+      color: this.props.color,
+      display: "inline-block",
+      marginRight: 4,
+      fontSize: this.props.markerSize
+    }
+
+    const className = this.props.symbol!.replace("font-awesome/", "fa fa-")
+    return R("span", { className, style: symbolStyle }, "")
+  }
+
+  renderColorIndicator() {
+    const indicatorStyle = {
+      height: 10,
+      width: 10,
+      backgroundColor: this.props.color,
+      display: "inline-block",
+      marginRight: 4
+    }
+
+    if (this.props.radiusLayer) {
+      indicatorStyle["borderRadius"] = 5
+    }
+
+    return R("span", { style: indicatorStyle }, "")
+  }
+
+  renderIndicator() {
+    if (this.props.symbol) {
+      return this.renderSymbol()
+    } else {
+      return this.renderColorIndicator()
+    }
+  }
+
+  render() {
+    let titleStyle = {}
+    if (!this.props.isChild) {
+      titleStyle = {
+        margin: 2,
+        fontWeight: "bold"
+      }
+    }
+
+    const containerStyle = { paddingLeft: this.props.isChild ? 5 : 0 }
+
+    return R(
+      "div",
+      { style: containerStyle },
+      !this.props.hasChildren ? this.renderIndicator() : undefined,
+      R("span", { style: titleStyle }, this.props.name)
+    )
+  }
+}

package/src/maps/MWaterServerLayer.ts

@@ -0,0 +1,116 @@
+import $ from "jquery"
+import Layer from "./Layer"
+import React from "react"
+import { Schema } from "@mwater/expressions"
+const R = React.createElement
+
+// TODO DEPRECATED. REPLACE WITH REAL MARKER AND BUFFER LAYERS
+
+// Layer defined on the mWater server
+// Design is:
+// type: type of layer on server
+// table: table to filter on (e.g. entities.water_point)
+// minZoom: optional minimum zoom
+// maxZoom: optional maximum zoom
+export default class MWaterServerLayer extends Layer<any> {
+  // Called when the interactivity grid is clicked.
+  // arguments:
+  //   ev: { data: interactivty data e.g. `{ id: 123 }` }
+  //   options:
+  //     design: design of layer
+  //     schema: schema to use
+  //     dataSource: data source to use
+  //     filters: compiled filters to apply to the popup
+  //
+  // Returns:
+  //   null/undefined to do nothing
+  //   [table id, primary key] to open a default system popup if one is present
+  //   React element to put into a popup
+  onGridClick(ev: any, options: any) {
+    if (ev.data && ev.data.id) {
+      return {
+        row: { tableId: options.design.table, primaryKey: ev.data.id }
+      }
+    }
+
+    return null
+  }
+
+  // Get min and max zoom levels
+  getMinZoom(design: any) {
+    return design.minZoom
+  }
+  getMaxZoom(design: any) {
+    return design.maxZoom
+  }
+
+  // Get the legend to be optionally displayed on the map. Returns
+  // a React element
+  getLegend(design: any, schema: Schema) {
+    // Create loading legend component
+    // TODO hardcoded
+    const apiUrl = "https://api.mwater.co/v3/"
+    return React.createElement(LoadingLegend, { url: `${apiUrl}maps/legend?type=${design.type}` })
+  }
+
+  // Get a list of table ids that can be filtered on
+  getFilterableTables(design: any, schema: Schema) {
+    if (design.table) {
+      return [design.table]
+    } else {
+      return []
+    }
+  }
+
+  // True if layer can be edited
+  isEditable() {
+    return false
+  }
+
+  // Returns a cleaned design
+  cleanDesign(design: any, schema: Schema) {
+    return design
+  }
+
+  // Validates design. Null if ok, message otherwise
+  validateDesign(design: any, schema: Schema) {
+    return null
+  }
+}
+
+interface LoadingLegendProps {
+  url?: string
+}
+
+interface LoadingLegendState {
+  html: any
+}
+
+// Simple class to load legend from server
+class LoadingLegend extends React.Component<LoadingLegendProps, LoadingLegendState> {
+  constructor(props: any) {
+    super(props)
+    this.state = { html: "Loading..." }
+  }
+
+  componentDidMount() {
+    return $.get(this.props.url).done((data) => {
+      return this.setState({ html: data })
+    })
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    if (nextProps.url !== this.props.url) {
+      return $.get(nextProps.url).done((data) => {
+        return this.setState({ html: data })
+      })
+    }
+  }
+
+  render() {
+    return R("div", {
+      style: { font: "14px/16px Arial, Helvetica, sans-serif", color: "#555" },
+      dangerouslySetInnerHTML: { __html: this.state.html }
+    })
+  }
+}

package/src/maps/MapBoundsCalculator.ts

@@ -0,0 +1,88 @@
+import _ from "lodash"
+import async from "async"
+import LayerFactory from "./LayerFactory"
+import * as MapUtils from "./MapUtils"
+
+import { DataSource, Schema } from "@mwater/expressions"
+import { JsonQLFilter } from "../JsonQLFilter"
+import { MapDesign } from "./MapDesign"
+
+interface Bounds {
+  n: number
+  e: number
+  s: number
+  w: number
+}
+
+/** Calculates map bounds given layers by unioning together */
+export default class MapBoundsCalculator {
+  schema: Schema
+  dataSource: DataSource
+
+  constructor(schema: Schema, dataSource: DataSource) {
+    this.schema = schema
+    this.dataSource = dataSource
+  }
+
+  /** Gets the bounds for the map. Null for whole world. Callback as { n:, s:, w:, e: } */
+  getBounds(
+    design: MapDesign,
+    filters: JsonQLFilter[],
+    callback: (error: any, bounds?: { w: number; n: number; e: number; s: number } | null) => void
+  ): void {
+    const allBounds: Bounds[] = []
+
+    // For each layer
+    return async.each(
+      design.layerViews,
+      (layerView, cb) => {
+        if (!layerView.visible) {
+          return cb(null)
+        }
+
+        // Create layer
+        const layer = LayerFactory.createLayer(layerView.type)
+
+        // Ensure that valid
+        const layerDesign = layer.cleanDesign(layerView.design, this.schema)
+        if (layer.validateDesign(layerDesign, this.schema)) {
+          return cb(null)
+        }
+
+        // Compile map filters
+        const allFilters = (filters || []).concat(
+          MapUtils.getCompiledFilters(design, this.schema, MapUtils.getFilterableTables(design, this.schema))
+        )
+
+        // Get bounds, including filters from map
+        return layer.getBounds(layerDesign, this.schema, this.dataSource, allFilters, (error: any, bounds: any) => {
+          if (error) {
+            return cb(error)
+          }
+
+          if (bounds) {
+            allBounds.push(bounds)
+          }
+          return cb(null)
+        })
+      },
+      (error) => {
+        if (error) {
+          return callback(error)
+        }
+
+        // Union bounds
+        if (allBounds.length === 0) {
+          return callback(null)
+        }
+
+        return callback(null, {
+          n: _.max(allBounds, "n").n,
+          e: _.max(allBounds, "e").e,
+          s: _.min(allBounds, "s").s,
+          w: _.min(allBounds, "w").w
+        })
+      }
+    )
+  }
+}

package/src/maps/MapComponent.ts

@@ -0,0 +1,312 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React, { ReactNode } from "react"
+const R = React.createElement
+
+import { MapViewComponent } from "./MapViewComponent"
+import MapDesignerComponent from "./MapDesignerComponent"
+import MapControlComponent from "./MapControlComponent"
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent"
+import UndoStack from "../UndoStack"
+import PopoverHelpComponent from "@mwater/react-library/lib/PopoverHelpComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+import { MapDataSource } from "./MapDataSource"
+import { MapDesign } from "./MapDesign"
+import { JsonQLFilter } from "../JsonQLFilter"
+import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
+import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent"
+import { getCompiledFilters, getFilterableTables } from "./MapUtils"
+
+export interface MapComponentProps {
+  schema: Schema
+  dataSource: DataSource
+  mapDataSource: MapDataSource
+
+  design: MapDesign
+  onDesignChange?: (design: MapDesign) => void
+
+  /** Called with (tableId, rowId) when item is clicked */
+  onRowClick?: (tableId: string, rowId: any) => void
+
+  /** Extra filters to apply to view */
+  extraFilters?: JsonQLFilter[]
+
+  /** Extra element to include in title at left */
+  titleElem?: ReactNode
+
+  /** Extra elements to add to right */
+  extraTitleButtonsElem?: ReactNode
+
+  /** True to enable quickfilters */
+  enableQuickfilters?: boolean
+
+  /** Locked quickfilter values. See README in quickfilters */
+  quickfilterLocks?: any[]
+
+  /** Initial quickfilter values */
+  quickfiltersValues?: any[]
+
+  /** True to hide title bar and related controls */
+  hideTitleBar?: boolean
+}
+
+interface MapComponentState {
+  undoStack: UndoStack
+  transientDesign: MapDesign
+  zoomLocked: boolean
+
+  /** Values of quickfilters */
+  quickfiltersValues: any[] | null
+
+  /** True to hide quickfilters */
+  hideQuickfilters: boolean
+}
+
+/** Map with designer on right */
+export default class MapComponent extends React.Component<MapComponentProps, MapComponentState> {
+  static contextTypes = { locale: PropTypes.string }
+
+  constructor(props: MapComponentProps) {
+    super(props)
+    this.state = {
+      undoStack: new UndoStack().push(props.design),
+      transientDesign: props.design, // Temporary design for read-only maps
+      zoomLocked: true,
+      quickfiltersValues: props.quickfiltersValues ?? null,
+      hideQuickfilters: false
+    }
+  }
+
+  componentDidUpdate(prevProps: MapComponentProps) {
+    // If design changes, save on stack and update transient design
+    if (!_.isEqual(prevProps.design, this.props.design)) {
+      // Save on stack
+      this.setState({ undoStack: this.state.undoStack.push(this.props.design) })
+
+      // Update transient design
+      this.setState({ transientDesign: this.props.design })
+    }
+  }
+
+  handleUndo = () => {
+    const undoStack = this.state.undoStack.undo()
+
+    // We need to use callback as state is applied later
+    return this.setState({ undoStack }, () => this.props.onDesignChange!(undoStack.getValue()))
+  }
+
+  handleRedo = () => {
+    const undoStack = this.state.undoStack.redo()
+
+    // We need to use callback as state is applied later
+    return this.setState({ undoStack }, () => this.props.onDesignChange!(undoStack.getValue()))
+  }
+
+  handleShowQuickfilters = () => {
+    return this.setState({ hideQuickfilters: false })
+  }
+
+  handleZoomLockClick = () => {
+    return this.setState({ zoomLocked: !this.state.zoomLocked })
+  }
+
+  renderActionLinks() {
+    return R(
+      "div",
+      null,
+      this.props.onDesignChange != null
+        ? [
+          R(
+            "a",
+            { key: "lock", className: "btn btn-link btn-sm", onClick: this.handleZoomLockClick },
+            R("span", {
+              className: `fa ${this.state.zoomLocked ? "fa-lock red" : "fa-unlock green"}`,
+              style: { marginRight: 5 }
+            }),
+            R(PopoverHelpComponent, { placement: "bottom" }, "Changes to zoom level wont be saved in locked mode")
+          ),
+          R(
+            "a",
+            {
+              key: "undo",
+              className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
+              onClick: this.handleUndo
+            },
+            R("span", { className: "fas fa-caret-left" }),
+            R("span", { className: "hide-600px" }, " Undo")
+          ),
+          " ",
+          R(
+            "a",
+            {
+              key: "redo",
+              className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
+              onClick: this.handleRedo
+            },
+            R("span", { className: "fas fa-caret-right" }),
+            R("span", { className: "hide-600px" }, " Redo")
+          )
+        ]
+        : undefined,
+      this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
+      ? R(
+        "a",
+        { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
+        R("span", { className: "fa fa-filter" }),
+        R("span", { className: "hide-600px" }, " Show Quickfilters")
+      )
+      : undefined,
+      this.props.extraTitleButtonsElem,
+      R("a", { key: "toggleDesign", className: "btn btn-link btn-sm", onClick: this.handleToggleDesignPanel, alt: "Toggle design panel" },
+        this.getDesign().hideDesignPanel ?
+          R("span", { className: "fas fa-angle-double-left" })
+        : R("span", { className: "fas fa-angle-double-right" }))
+    )
+  }
+
+  renderHeader() {
+    return R(
+      "div",
+      {
+        style: {
+          padding: 4,
+          borderBottom: "solid 1px #e8e8e8",
+          gridArea: "header"
+        }
+      },
+      R("div", { style: { float: "right" } }, this.renderActionLinks()),
+      this.props.titleElem
+    )
+  }
+
+  handleDesignChange = (design: any) => {
+    if (this.props.onDesignChange) {
+      return this.props.onDesignChange(design)
+    } else {
+      return this.setState({ transientDesign: design })
+    }
+  }
+
+  getDesign() {
+    if (this.props.onDesignChange) {
+      return this.props.design
+    } else {
+      return this.state.transientDesign || this.props.design
+    }
+  }
+
+  handleToggleDesignPanel = () => {
+    this.handleDesignChange({ ...this.getDesign(), hideDesignPanel: !this.getDesign().hideDesignPanel })
+  }
+
+  // Get the values of the quick filters
+  getQuickfilterValues = () => {
+    return this.state.quickfiltersValues || []
+  }
+
+  renderView() {
+    let filters = this.props.extraFilters || []
+
+    // Compile quickfilters
+    filters = filters.concat(
+      new QuickfilterCompiler(this.props.schema).compile(
+        this.props.design.quickfilters || [],
+        this.state.quickfiltersValues,
+        this.props.quickfilterLocks
+      )
+    )
+
+    return React.createElement(
+      AutoSizeComponent,
+      { injectWidth: true, injectHeight: true },
+      (size: {
+        width?: number;
+        height?: number;
+      }) => {
+        return React.createElement(MapViewComponent, {
+          mapDataSource: this.props.mapDataSource,
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          design: this.getDesign(),
+          onDesignChange: this.handleDesignChange,
+          zoomLocked: this.state.zoomLocked,
+          onRowClick: this.props.onRowClick,
+          extraFilters: filters,
+          locale: this.context.locale,
+          width: size.width!,
+          height: size.height!
+        })
+      }
+    )
+  }
+
+  // Get filters from props filters combined with maps filters
+  getCompiledFilters() {
+    let compiledFilters = getCompiledFilters(
+      this.props.design,
+      this.props.schema,
+      getFilterableTables(this.props.design, this.props.schema)
+    )
+    compiledFilters = compiledFilters.concat(this.props.extraFilters || [])
+    return compiledFilters
+  }
+
+  renderQuickfilter() {
+    return R("div", { style: { gridArea: "quickfilters", borderBottom: "solid 1px #e8e8e8" } },
+      R(QuickfiltersComponent, {
+        design: this.props.design.quickfilters || [],
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        quickfiltersDataSource: this.props.mapDataSource.getQuickfiltersDataSource(),
+        values: this.state.quickfiltersValues || undefined,
+        onValuesChange: (values: any) => this.setState({ quickfiltersValues: values }),
+        locks: this.props.quickfilterLocks,
+        filters: this.getCompiledFilters(),
+        hideTopBorder: this.props.hideTitleBar,
+        onHide: () => this.setState({ hideQuickfilters: true })
+      })
+    )
+  }
+
+  renderDesigner() {
+    return R("div", { style: { gridArea: "designer", borderLeft: "solid 2px #e8e8e8", overflowY: 'scroll' } },
+      this.props.onDesignChange ?
+        React.createElement(MapDesignerComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          design: this.getDesign(),
+          onDesignChange: this.handleDesignChange,
+          enableQuickfilters: this.props.enableQuickfilters
+        })
+        :
+        React.createElement(MapControlComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          design: this.getDesign(),
+          onDesignChange: this.handleDesignChange
+        })
+    )
+  }
+
+  render() {
+    const designerVisible = !this.getDesign().hideDesignPanel
+    console.log("designerVisible", designerVisible)
+    return R(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "grid",
+          gridTemplateColumns: designerVisible ? "70% 30%" : "100%",
+          gridTemplateRows: "auto auto 1fr",
+          gridTemplateAreas: `"header designer" "quickfilters designer" "view designer"`
+        }
+      },
+      this.renderHeader(),
+      this.state.hideQuickfilters ? null : this.renderQuickfilter(),
+      R("div", { style: { width: "100%", height: "100%", gridArea: "view", overflow: "hidden" } }, this.renderView()),
+      designerVisible ? this.renderDesigner() : null
+    )
+  }
+}

package/src/maps/MapControlComponent.ts

@@ -0,0 +1,46 @@
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+
+import MapLayersDesignerComponent from "./MapLayersDesignerComponent"
+import BaseLayerDesignerComponent from "./BaseLayerDesignerComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+
+export interface MapControlComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** See Map Design.md */
+  design: any
+  onDesignChange: any
+}
+
+// Allows controlling readonly map
+export default class MapControlComponent extends React.Component<MapControlComponentProps> {
+  render() {
+    return R(
+      "div",
+      { style: { padding: 5 } },
+      R(MapLayersDesignerComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        design: this.props.design,
+        onDesignChange: this.props.onDesignChange,
+        allowEditingLayers: false
+      }),
+
+      R("br"),
+
+      R(
+        "div",
+        { className: "mb-3" },
+        R("label", { className: "text-muted" }, "Map Style"),
+
+        R(BaseLayerDesignerComponent, {
+          design: this.props.design,
+          onDesignChange: this.props.onDesignChange
+        })
+      )
+    )
+  }
+}

package/src/maps/MapDataSource.ts

@@ -0,0 +1,20 @@
+import { JsonQLFilter } from "../JsonQLFilter"
+import { MapLayerDataSource } from "./MapLayerDataSource"
+import { MapDesign } from "./MapDesign"
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource"
+
+/** Map data source gives data sources for layers */
+export interface MapDataSource {
+  /** Gets the data source for a layer */
+  getLayerDataSource: (layerId: string) => MapLayerDataSource
+
+  /** Gets the quickfilters data source */
+  getQuickfiltersDataSource(): QuickfiltersDataSource
+
+  /** Gets the bounds for the map. Null for no opinion. Callback as { n:, s:, w:, e: } */
+  getBounds(
+    design: MapDesign,
+    filters: JsonQLFilter[],
+    callback: (error: any, bounds?: { w: number; n: number; e: number; s: number } | null) => void
+  ): void
+}