@mwater/visualization 5.0.0

package/src/maps/MapLayerViewDesignerComponent.ts

@@ -0,0 +1,243 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import { default as Rcslider } from "rc-slider"
+import LayerFactory from "./LayerFactory"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import PopoverHelpComponent from "@mwater/react-library/lib/PopoverHelpComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+
+export interface MapLayerViewDesignerComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** See Map Design.md */
+  layerView: any
+  /** Called with new layer view */
+  onLayerViewChange: any
+  /** Called to remove */
+  onRemove: any
+  /** connector for reorderable */
+  connectDragSource?: any
+  /** connector for reorderable */
+  connectDragPreview?: any
+  /** connector for reorderable */
+  connectDropTarget?: any
+  allowEditingLayer: boolean
+  filters?: any
+}
+
+interface MapLayerViewDesignerComponentState {
+  editing: any
+}
+
+// A single row in the table of layer views. Handles the editor state
+export default class MapLayerViewDesignerComponent extends React.Component<
+  MapLayerViewDesignerComponentProps,
+  MapLayerViewDesignerComponentState
+> {
+  constructor(props: any) {
+    super(props)
+
+    const layer = LayerFactory.createLayer(this.props.layerView.type)
+
+    this.state = {
+      editing: props.allowEditingLayer && layer.isIncomplete(this.props.layerView.design, this.props.schema) // Editing initially if incomplete
+    }
+  }
+
+  update(updates: any) {
+    return this.props.onLayerViewChange(_.extend({}, this.props.layerView, updates))
+  }
+
+  handleVisibleClick = () => {
+    return this.update({ visible: !this.props.layerView.visible })
+  }
+
+  handleHideLegend = (hideLegend: any) => {
+    return this.update({ hideLegend })
+  }
+
+  handleGroupChange = (group: any) => {
+    return this.update({ group })
+  }
+
+  handleToggleEditing = () => {
+    return this.setState({ editing: !this.state.editing })
+  }
+  handleSaveEditing = (design: any) => {
+    return this.update({ design })
+  }
+
+  handleRename = () => {
+    if (this.props.allowEditingLayer) {
+      const name = prompt("Enter new name", this.props.layerView.name)
+      if (name) {
+        return this.update({ name })
+      }
+    }
+  }
+
+  renderVisible() {
+    if (this.props.layerView.visible) {
+      return R("i", {
+        className: "fa fa-fw fa-check-square",
+        style: { color: "#2E6DA4" },
+        onClick: this.handleVisibleClick
+      })
+    } else {
+      return R("i", {
+        className: "fa fa-fw fa-square",
+        style: { color: "#DDDDDD" },
+        onClick: this.handleVisibleClick
+      })
+    }
+  }
+
+  renderAdvanced() {
+    return R(
+      "div",
+      {
+        key: "advanced",
+        style: { display: "grid", gridTemplateColumns: "50% auto auto 1fr", alignItems: "center", columnGap: 5 }
+      },
+      R(
+        ui.Checkbox,
+        { value: this.props.layerView.hideLegend, onChange: this.handleHideLegend, inline: true },
+        "Hide Legend"
+      ),
+      R("label", { className: "text-muted", key: "label" }, "Group:"),
+      R(ui.TextInput, {
+        key: "input",
+        value: this.props.layerView.group,
+        onChange: this.handleGroupChange,
+        style: { width: "5em" },
+        placeholder: "None"
+      }),
+      R(
+        "div",
+        null,
+        R(
+          PopoverHelpComponent,
+          { placement: "top", key: "help" },
+          "Layers in the same group can only be selected one at a time"
+        )
+      )
+    )
+  }
+
+  renderName() {
+    return R(
+      "span",
+      { className: "hover-display-parent", onClick: this.handleRename, style: { cursor: "pointer" } },
+      this.props.layerView.name,
+      " ",
+      R("span", { className: "hover-display-child fas fa-pencil-alt text-muted" })
+    )
+  }
+
+  renderEditor() {
+    const layer = LayerFactory.createLayer(this.props.layerView.type)
+    return R(
+      "div",
+      null,
+      layer.isEditable() && 
+      layer.createDesignerElement({
+        design: this.props.layerView.design,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        onDesignChange: this.handleSaveEditing
+      }),
+      this.renderOpacityControl(),
+      this.renderAdvanced()
+    )
+  }
+
+  renderLayerEditToggle() {
+    return R(
+      "div",
+      { key: "edit", style: { marginBottom: this.state.editing ? 10 : undefined } },
+      R(
+        "a",
+        { className: "link-plain", onClick: this.handleToggleEditing, style: { fontSize: 12 } },
+        this.state.editing
+          ? [R("i", { className: "fa fa-caret-up" }), " Close"]
+          : [R("i", { className: "fa fa-cog" }), " Customize..."]
+      )
+    )
+  }
+
+  handleOpacityChange = (newValue: any) => {
+    return this.update({ opacity: newValue / 100 })
+  }
+
+  handleRemove = () => {
+    if (confirm("Delete layer?")) {
+      return this.props.onRemove()
+    }
+  }
+
+  renderOpacityControl() {
+    return R(
+      "div",
+      { className: "mb-3", style: { paddingTop: 10 } },
+      R(
+        "label",
+        { className: "text-muted" },
+        R("span", null, `Opacity: ${Math.round(this.props.layerView.opacity * 100)}%`)
+      ),
+      R(
+        "div",
+        { style: { padding: "10px" } },
+        React.createElement(Rcslider, {
+          min: 0,
+          max: 100,
+          step: 1,
+          tipTransitionName: "rc-slider-tooltip-zoom-down",
+          value: this.props.layerView.opacity * 100,
+          onChange: this.handleOpacityChange
+        })
+      )
+    )
+  }
+
+  renderDeleteLayer() {
+    return R(
+      "div",
+      { style: { float: "right", marginLeft: 10 }, key: "delete" },
+      R("a", { className: "link-plain", onClick: this.handleRemove }, R("i", { className: "fa fa-remove" }))
+    )
+  }
+
+  render() {
+    const layer = LayerFactory.createLayer(this.props.layerView.type)
+    const style = {
+      cursor: "move",
+      marginRight: 8,
+      opacity: 0.5
+    }
+    // float: "right"
+
+    return this.props.connectDragPreview(
+      this.props.connectDropTarget(
+        R(
+          "div",
+          null,
+          R(
+            "div",
+            { style: { fontSize: 16 }, key: "layerView" },
+            this.props.connectDragSource
+              ? this.props.connectDragSource(R("i", { className: "fa fa-bars", style }))
+              : undefined,
+            this.props.allowEditingLayer ? this.renderDeleteLayer() : undefined,
+            this.renderVisible(),
+            "\u00A0",
+            this.renderName()
+          ),
+          this.props.allowEditingLayer ? this.renderLayerEditToggle() : undefined,
+          this.state.editing ? this.renderEditor() : undefined
+        )
+      )
+    )
+  }
+}

package/src/maps/MapLayersDesignerComponent.ts

@@ -0,0 +1,144 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import LayerFactory from "./LayerFactory"
+import AddLayerComponent from "./AddLayerComponent"
+import MapLayerViewDesignerComponent from "./MapLayerViewDesignerComponent"
+import ReorderableListComponent from "@mwater/react-library/lib/reorderable/ReorderableListComponent"
+import { DataSource, ExprCompiler, OpExpr, Schema } from "@mwater/expressions"
+import { ExprCleaner } from "@mwater/expressions"
+import { MapDesign, MapLayerView } from "./MapDesign"
+
+export interface MapLayersDesignerComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** See Map Design.md */
+  design: MapDesign
+  /** Called with new design */
+  onDesignChange: (design: MapDesign) => void
+  /** True to allow editing layers */
+  allowEditingLayers: boolean
+  filters?: any
+}
+
+// Designer for layer selection in the map
+export default class MapLayersDesignerComponent extends React.Component<MapLayersDesignerComponentProps> {
+  // Updates design with the specified changes
+  updateDesign(changes: any) {
+    const design = _.extend({}, this.props.design, changes) as MapDesign
+    return this.props.onDesignChange(design)
+  }
+
+  handleLayerViewChange = (index: any, layerView: MapLayerView) => {
+    const layerViews = this.props.design.layerViews.slice()
+
+    // Update self
+    layerViews[index] = layerView
+
+    // Unselect any in same group if selected
+    if (layerView.group && layerView.visible) {
+      _.each(this.props.design.layerViews, (lv, i) => {
+        if (lv.visible && i !== index && lv.group === layerView.group) {
+          layerViews[i] = _.extend({}, lv, { visible: false })
+        }
+      })
+    }
+
+    return this.updateDesign({ layerViews })
+  }
+
+  handleRemoveLayerView = (index: any) => {
+    const layerViews = this.props.design.layerViews.slice()
+    layerViews.splice(index, 1)
+    return this.updateDesign({ layerViews })
+  }
+
+  handleReorder = (layerList: any) => {
+    return this.updateDesign({ layerViews: layerList })
+  }
+
+  renderLayerView = (
+    layerView: any,
+    index: any,
+    connectDragSource: any,
+    connectDragPreview: any,
+    connectDropTarget: any
+  ) => {
+    const style = {
+      padding: "10px 15px",
+      border: "1px solid #ddd",
+      marginBottom: -1,
+      backgroundColor: "#fff"
+    }
+
+    const filters = _.clone(this.props.filters) || []
+
+    if (layerView.design.filter != null) {
+      const exprCompiler = new ExprCompiler(this.props.schema)
+      const exprCleaner = new ExprCleaner(this.props.schema)
+
+      // Clean filter first
+      const filter = exprCleaner.cleanExpr(layerView.design.filter, { types: ["boolean"] })
+      if (filter) {
+        const jsonql = exprCompiler.compileExpr({ expr: filter, tableAlias: "{alias}" })
+        if (jsonql) {
+          filters.push({ table: (filter as OpExpr).table, jsonql })
+        }
+      }
+    }
+
+    return R(
+      "div",
+      { style },
+      React.createElement(MapLayerViewDesignerComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        layerView,
+        onLayerViewChange: (lv: any) => this.handleLayerViewChange(index, lv),
+        onRemove: () => this.handleRemoveLayerView(index),
+        connectDragSource,
+        connectDragPreview,
+        connectDropTarget,
+        allowEditingLayer: this.props.allowEditingLayers,
+        filters: _.compact(filters)
+      })
+    )
+  }
+
+  render() {
+    return R(
+      "div",
+      { className: "mb-3" },
+      this.props.design.layerViews.length > 0
+        ? R(
+            "div",
+            { style: { padding: 5 }, key: "layers" },
+            R(
+              "div",
+              { className: "list-group", key: "layers", style: { marginBottom: 10 } },
+              // _.map(@props.design.layerViews, @renderLayerView)
+              React.createElement(ReorderableListComponent, {
+                items: this.props.design.layerViews,
+                onReorder: this.handleReorder,
+                renderItem: this.renderLayerView,
+                getItemId: (layerView: MapLayerView) => layerView.id
+              })
+            )
+          )
+        : undefined,
+
+      this.props.allowEditingLayers
+        ? R(AddLayerComponent, {
+            key: "addlayer",
+            layerNumber: this.props.design.layerViews.length,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            design: this.props.design,
+            onDesignChange: this.props.onDesignChange
+          })
+        : undefined
+    )
+  }
+}

package/src/maps/MapUtils.ts

@@ -0,0 +1,148 @@
+// General utilities for a map
+
+import { JsonQLExpr } from "@mwater/jsonql"
+import _ from "lodash"
+import { Expr, ExprCleaner, ExprCompiler, ExprUtils, FieldExpr, Schema } from "@mwater/expressions"
+import { JsonQLFilter } from "../JsonQLFilter"
+import LayerFactory from "./LayerFactory"
+import { MapDesign } from "./MapDesign"
+
+export interface MapScope {
+  name: string
+  filter: JsonQLFilter
+  data: { layerViewId: string; data: any }
+}
+
+// Check if can convert to a cluster map. Only maps containing marker views can be
+export function canConvertToClusterMap(design: MapDesign) {
+  return _.any(design.layerViews, (lv) => lv.type === "Markers")
+}
+
+
+// Check if can convert to a markers map. Only maps containing cluster views can be
+export function canConvertToMarkersMap(design: MapDesign) {
+  return _.any(design.layerViews, (lv) => lv.type === "Cluster")
+}
+
+// Convert to a cluster map
+export function convertToClusterMap(design: MapDesign): MapDesign {
+  const layerViews = _.map(design.layerViews, (lv) => {
+    if (lv.type !== "Markers") {
+      return lv
+    }
+
+    lv = _.cloneDeep(lv)
+
+    // Set type and design
+    lv.type = "Cluster"
+    lv.design = {
+      table: lv.design.table,
+      axes: { geometry: lv.design.axes != null ? lv.design.axes.geometry : undefined },
+      filter: lv.design.filter,
+      fillColor: lv.design.color,
+      minZoom: lv.design.minZoom,
+      maxZoom: lv.design.maxZoom
+    }
+
+    return lv
+  })
+
+  return _.extend({}, design, { layerViews })
+}
+
+// Convert to a markers map
+export function convertToMarkersMap(design: MapDesign): MapDesign {
+  const layerViews = _.map(design.layerViews, (lv) => {
+    if (lv.type !== "Cluster") {
+      return lv
+    }
+
+    lv = _.cloneDeep(lv)
+
+    // Set type and design
+    lv.type = "Markers"
+    lv.design = {
+      table: lv.design.table,
+      axes: { geometry: lv.design.axes != null ? lv.design.axes.geometry : undefined },
+      filter: lv.design.filter,
+      color: lv.design.fillColor,
+      minZoom: lv.design.minZoom,
+      maxZoom: lv.design.maxZoom
+    }
+
+    return lv
+  })
+
+  return _.extend({}, design, { layerViews })
+}
+
+// Get ids of filterable tables
+export function getFilterableTables(design: MapDesign, schema: Schema) {
+  let filterableTables: string[] = []
+  for (let layerView of design.layerViews) {
+    // Create layer
+    const layer = LayerFactory.createLayer(layerView.type)
+
+    // Get filterable tables
+    filterableTables = _.uniq(filterableTables.concat(layer.getFilterableTables(layerView.design, schema)))
+  }
+
+  // Remove non-existant tables
+  filterableTables = _.filter(filterableTables, (table) => schema.getTable(table))
+  return filterableTables
+}
+
+// Compile map filters with global filters
+export function getCompiledFilters(
+  design: MapDesign,
+  schema: Schema,
+  filterableTables: string[]
+): { table: string; jsonql: JsonQLExpr }[] {
+  const exprCompiler = new ExprCompiler(schema)
+  const exprCleaner = new ExprCleaner(schema)
+  const exprUtils = new ExprUtils(schema)
+
+  const compiledFilters = []
+
+  // Compile filters to JsonQL expected by layers
+  for (const table in design.filters || {}) {
+    let expr = design.filters[table]
+
+    // Clean expr
+    expr = exprCleaner.cleanExpr(expr, { table })
+
+    const jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" })
+    if (jsonql) {
+      compiledFilters.push({ table, jsonql })
+    }
+  }
+
+  // Add global filters
+  for (let filter of design.globalFilters || []) {
+    for (const table of filterableTables) {
+      // Check if exists and is correct type
+      const column = schema.getColumn(table, filter.columnId)
+      if (!column) {
+        continue
+      }
+
+      const columnExpr: Expr = { type: "field", table, column: column.id }
+      if (exprUtils.getExprType(columnExpr) !== filter.columnType) {
+        continue
+      }
+
+      // Create expr
+      let expr: Expr = { type: "op", op: filter.op, table, exprs: [columnExpr as Expr].concat(filter.exprs) }
+
+      // Clean expr
+      expr = exprCleaner.cleanExpr(expr, { table })
+
+      const jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" })
+      if (jsonql) {
+        compiledFilters.push({ table, jsonql })
+      }
+    }
+  }
+
+  return compiledFilters
+}

package/src/maps/MapViewComponent.tsx

@@ -0,0 +1,62 @@
+import _ from "lodash"
+import { DataSource, Schema } from "@mwater/expressions"
+import React from "react"
+import { JsonQLFilter } from "../JsonQLFilter"
+import { MapDesign } from "./MapDesign"
+import { MapDataSource } from "./MapDataSource"
+import { VectorMapViewComponent } from "./VectorMapViewComponent"
+import { MapScope } from "./MapUtils"
+import RasterMapViewComponent from "./RasterMapViewComponent"
+import { areVectorMapsEnabled } from "./vectorMaps"
+
+/** Component that displays just the map */
+export function MapViewComponent(props: {
+  schema: Schema
+  dataSource: DataSource
+  mapDataSource: MapDataSource
+
+  design: MapDesign
+  onDesignChange?: (design: MapDesign) => void
+
+  /** Width in pixels */
+  width: number
+
+  /** Height in pixels */
+  height: number
+
+  /** Called with (tableId, rowId) when item is clicked */
+  onRowClick?: (tableId: string, rowId: any) => void
+
+  /** Extra filters to apply to view */
+  extraFilters?: JsonQLFilter[]
+
+  /** scope of the map (when a layer self-selects a particular scope) */
+  scope?: MapScope
+
+  /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+  onScopeChange?: (scope: MapScope | null) => void
+
+  /** Whether the map be draggable with mouse/touch or not. Default true */
+  dragging?: boolean
+
+  /** Whether the map can be zoomed by touch-dragging with two fingers. Default true */
+  touchZoom?: boolean
+
+  /** Whether the map can be zoomed by using the mouse wheel. Default true */
+  scrollWheelZoom?: boolean
+
+  /** Whether changes to zoom level should be persisted. Default false  */
+  zoomLocked?: boolean
+
+  /** Locale to use. Overrides map design locale */
+  locale?: string
+
+  /** Whether to disable interaction or not. Default false (implemented for printing to reduce number of tiles request) */
+  disableInteraction?: boolean
+}) {
+  if (areVectorMapsEnabled()) {
+    return <VectorMapViewComponent {...props} />
+  } else {
+    return <RasterMapViewComponent {...props} />
+  }
+}

package/src/maps/MarkerSymbolSelectComponent.ts

@@ -0,0 +1,41 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import { default as ReactSelect } from "react-select"
+import { mapSymbols } from "./mapSymbols"
+
+export interface MarkerSymbolSelectComponentProps {
+  symbol?: string
+  onChange: any
+}
+
+// Allows selecting of map marker symbol
+export default class MarkerSymbolSelectComponent extends React.Component<MarkerSymbolSelectComponentProps> {
+  render() {
+    // Create options
+    const options = mapSymbols
+
+    const optionRenderer = (option: any) =>
+      R(
+        "span",
+        null,
+        R("i", { className: `fa fa-${option.value.substr(13)}` }), // Trim "font-awesome/"
+        ` ${option.label}`
+      )
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, R("span", { className: "fa fa-star" }), " ", "Symbol"),
+      R(ReactSelect, {
+        placeholder: "Circle",
+        value: _.findWhere(options, { value: this.props.symbol }) || null,
+        options,
+        formatOptionLabel: optionRenderer,
+        isClearable: true,
+        onChange: (opt: any) => this.props.onChange(opt?.value || null)
+      })
+    )
+  }
+}