@mwater/visualization 5.0.0

package/src/maps/MarkersLayerDesign.ts

@@ -0,0 +1,56 @@
+import { Expr } from "@mwater/expressions"
+import { Axis } from "../axes/Axis"
+import { HoverOverItem } from "./maps"
+
+/** Design for a markers layer */
+export interface MarkersLayerDesign {
+  /** table to get data from */
+  table: string
+
+  /** axes (see below) */
+  axes: {
+    /** where to place markers */
+    geometry: Axis
+
+    /** color axis (to split into series based on a color) */
+    color?: Axis
+  }
+
+  /** optional logical expression to filter by */
+  filter?: Expr
+
+  /** color of layer (e.g. #FF8800). Color axis overrides */
+  color?: string
+
+  /** symbol to use for layer. e.g. "font-awesome/bell". Will be converted on server to proper uri. */
+  symbol?: string
+
+  /** size in pixels of the markers. Default 10. */
+  markerSize?: number
+
+  /** size of the lines in pixels. Default 3 */
+  lineWidth?: number
+
+  /** opacity of polygon fill (0-1). Default is 0.25 */
+  polygonFillOpacity?: number
+
+  /** color of polygon borders (defaults to color of fill) */
+  polygonBorderColor?: string
+
+  /** contains items: which is BlocksLayoutManager items. Will be displayed when the marker is clicked TODO */
+  popup: { items: any }
+
+  hoverOver: { items: HoverOverItem[] }
+
+  /** customizable filtering for popup. See PopupFilterJoins.md TODO */
+  popupFilterJoins: any
+
+  /** minimum zoom level */
+  minZoom?: number
+
+  /** maximum zoom level */
+  maxZoom?: number
+
+  /** @deprecated LEGACY sublayers array that contains above design */
+  sublayers?: any[]
+}

package/src/maps/MarkersLayerDesignerComponent.ts

@@ -0,0 +1,374 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import { FilterExprComponent } from "@mwater/expressions-ui"
+import { DataSource, ExprUtils, OpExpr, Schema } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import AxisComponent from "./../axes/AxisComponent"
+import ColorComponent from "../ColorComponent"
+import TableSelectComponent from "../TableSelectComponent"
+import EditPopupComponent from "./EditPopupComponent"
+import ZoomLevelsComponent from "./ZoomLevelsComponent"
+import MarkerSymbolSelectComponent from "./MarkerSymbolSelectComponent"
+import * as PopupFilterJoinsUtils from "./PopupFilterJoinsUtils"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import EditHoverOver from "./EditHoverOver"
+import { MarkersLayerDesign } from "./MarkersLayerDesign"
+import { default as Rcslider } from "rc-slider"
+
+export interface MarkersLayerDesignerComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** Design of the marker layer */
+  design: MarkersLayerDesign
+  /** Called with new design */
+  onDesignChange: any
+  filters?: any
+}
+
+// Designer for a markers layer
+export default class MarkersLayerDesignerComponent extends React.Component<MarkersLayerDesignerComponentProps> {
+  // Apply updates to design
+  update(updates: any) {
+    return this.props.onDesignChange(_.extend({}, this.props.design, updates))
+  }
+
+  // Update axes with specified changes
+  updateAxes(changes: any) {
+    const axes = _.extend({}, this.props.design.axes, changes)
+    return this.update({ axes })
+  }
+
+  handleTableChange = (table: any) => {
+    return this.update({ table })
+  }
+  handleGeometryAxisChange = (axis: any) => {
+    return this.updateAxes({ geometry: axis })
+  }
+  handleColorAxisChange = (axis: any) => {
+    return this.updateAxes({ color: axis })
+  }
+  handleFilterChange = (expr: any) => {
+    return this.update({ filter: expr })
+  }
+  handleColorChange = (color: any) => {
+    return this.update({ color })
+  }
+  handlePolygonBorderColorChange = (polygonBorderColor: any) => {
+    return this.update({ polygonBorderColor })
+  }
+  handlePolygonFillOpacityChange = (polygonFillOpacity: any) => {
+    return this.update({ polygonFillOpacity: polygonFillOpacity / 100 })
+  }
+  handleSymbolChange = (symbol: any) => {
+    return this.update({ symbol })
+  }
+  handleNameChange = (e: any) => {
+    return this.update({ name: e.target.value })
+  }
+  handleMarkerSizeChange = (markerSize: any) => {
+    return this.update({ markerSize })
+  }
+  handleLineWidthChange = (lineWidth: any) => {
+    return this.update({ lineWidth })
+  }
+
+  renderTable() {
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+      R(
+        "div",
+        { style: { marginLeft: 10 } },
+        R(TableSelectComponent, {
+          schema: this.props.schema,
+          value: this.props.design.table,
+          onChange: this.handleTableChange,
+          filter: this.props.design.filter,
+          onFilterChange: this.handleFilterChange
+        })
+      )
+    )
+  }
+
+  renderGeometryAxis() {
+    if (!this.props.design.table) {
+      return
+    }
+
+    const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " Location")
+
+    const filters = _.clone(this.props.filters) || []
+
+    if (this.props.design.filter != null) {
+      const exprCompiler = new ExprCompiler(this.props.schema)
+      const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" })
+      if (jsonql) {
+        filters.push({ table: (this.props.design.filter as OpExpr).table, jsonql })
+      }
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, title),
+      R(
+        "div",
+        { style: { marginLeft: 10 } },
+        R(AxisComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          table: this.props.design.table,
+          types: ["geometry"],
+          aggrNeed: "none",
+          value: this.props.design.axes.geometry,
+          onChange: this.handleGeometryAxisChange,
+          filters
+        })
+      )
+    )
+  }
+
+  renderColor() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    const filters = _.clone(this.props.filters) || []
+
+    if (this.props.design.filter != null) {
+      const exprCompiler = new ExprCompiler(this.props.schema)
+      const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" })
+      if (jsonql) {
+        filters.push({ table: (this.props.design.filter as OpExpr).table, jsonql })
+      }
+    }
+
+    return R(
+      "div",
+      null,
+      !this.props.design.axes.color
+        ? R(
+            "div",
+            { className: "mb-3" },
+            R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color"),
+
+            R(
+              "div",
+              null,
+              R(ColorComponent, {
+                color: this.props.design.color,
+                onChange: this.handleColorChange
+              })
+            )
+          )
+        : undefined,
+
+      R(
+        "div",
+        { className: "mb-3" },
+        R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"),
+
+        R(AxisComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          table: this.props.design.table,
+          types: ["text", "enum", "boolean", "date"],
+          aggrNeed: "none",
+          value: this.props.design.axes.color,
+          defaultColor: this.props.design.color,
+          showColorMap: true,
+          onChange: this.handleColorAxisChange,
+          allowExcludedValues: true,
+          filters
+        })
+      )
+    )
+  }
+
+  renderSymbol() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    return R(MarkerSymbolSelectComponent, { symbol: this.props.design.symbol, onChange: this.handleSymbolChange })
+  }
+
+  renderMarkerSize() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, "Marker Size"),
+      R(ui.Select, {
+        value: this.props.design.markerSize || 10,
+        options: [
+          { value: 5, label: "Extra small" },
+          { value: 8, label: "Small" },
+          { value: 10, label: "Normal" },
+          { value: 13, label: "Large" },
+          { value: 16, label: "Extra large" }
+        ],
+        onChange: this.handleMarkerSizeChange
+      })
+    )
+  }
+
+  renderLineWidth() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, "Line Width (for shapes)"),
+      R(ui.Select, {
+        value: this.props.design.lineWidth != null ? this.props.design.lineWidth : 3,
+        options: [
+          { value: 0, label: "None" },
+          { value: 1, label: "1 pixel" },
+          { value: 2, label: "2 pixels" },
+          { value: 3, label: "3 pixels" },
+          { value: 4, label: "4 pixels" },
+          { value: 5, label: "5 pixels" },
+          { value: 6, label: "6 pixels" }
+        ],
+        onChange: this.handleLineWidthChange
+      })
+    )
+  }
+
+  renderPolygonBorderColor() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, "Polygon border color (blank for same as fill color)"),
+      R(
+        "div",
+        null,
+        R(ColorComponent, {
+          color: this.props.design.polygonBorderColor,
+          onChange: this.handlePolygonBorderColorChange
+        })
+      )
+    )
+  }
+
+  renderPolygonFillOpacity() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    const opacity = this.props.design.polygonFillOpacity != null ? this.props.design.polygonFillOpacity : 0.25
+
+    return R(
+      "div",
+      { className: "mb-3"},
+      R("label", { className: "text-muted" }, R("span", null, `Polygon Fill Opacity: ${Math.round(opacity * 100)}%`)),
+      R(
+        "div",
+        { style: { padding: "10px" } },
+        React.createElement(Rcslider, {
+          min: 0,
+          max: 100,
+          step: 1,
+          tipTransitionName: "rc-slider-tooltip-zoom-down",
+          value: opacity * 100,
+          onChange: this.handlePolygonFillOpacityChange
+        })
+      )
+    )
+      }
+
+  renderFilter() {
+    // If no data, hide
+    if (!this.props.design.axes.geometry) {
+      return null
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " Filters"),
+      R(
+        "div",
+        { style: { marginLeft: 8 } },
+        R(FilterExprComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          onChange: this.handleFilterChange,
+          table: this.props.design.table,
+          value: this.props.design.filter
+        })
+      )
+    )
+  }
+
+  renderPopup() {
+    if (!this.props.design.table) {
+      return null
+    }
+
+    return R(EditPopupComponent, {
+      design: this.props.design,
+      onDesignChange: this.props.onDesignChange,
+      schema: this.props.schema,
+      dataSource: this.props.dataSource,
+      table: this.props.design.table,
+      idTable: this.props.design.table,
+      defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
+    })
+  }
+
+  renderHoverOver() {
+    if (!this.props.design.table) {
+      return null
+    }
+
+    return R(EditHoverOver, {
+      design: this.props.design,
+      onDesignChange: this.props.onDesignChange,
+      schema: this.props.schema,
+      dataSource: this.props.dataSource,
+      table: this.props.design.table,
+      idTable: this.props.design.table,
+      defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
+    })
+  }
+
+  render() {
+    return R(
+      "div",
+      null,
+      this.renderTable(),
+      this.renderGeometryAxis(),
+      this.renderColor(),
+      this.renderSymbol(),
+      this.renderMarkerSize(),
+      R(ui.CollapsibleSection, {
+        label: "Shape Options",
+        labelMuted: true
+      }, [
+        this.renderLineWidth(),
+        this.renderPolygonBorderColor(),
+        this.renderPolygonFillOpacity(),
+      ]),
+      this.renderFilter(),
+      this.renderPopup(),
+      this.renderHoverOver(),
+      this.props.design.table
+        ? R(ZoomLevelsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange })
+        : undefined
+    )
+  }
+}

package/src/maps/PopupFilterJoinsEditComponent.ts

@@ -0,0 +1,114 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import { ExprComponent } from "@mwater/expressions-ui"
+import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import * as DashboardUtils from "../dashboards/DashboardUtils"
+import { DashboardDesign } from "../dashboards/DashboardDesign"
+
+interface PopupFilterJoinsEditComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** table of the row that the popup will be for */
+  table: string
+  /** table of the row that join is to. Usually same as table except for choropleth maps */
+  idTable: string
+  /** Default popup filter joins */
+  defaultPopupFilterJoins: any
+  /** Design of the popup this is for */
+  popup: any
+  /** popup filter joins object */
+  design?: any
+  onDesignChange: any
+}
+
+interface PopupFilterJoinsEditComponentState {
+  expanded: any
+}
+
+// Designer for popup filter joins (see PopupFilterJoins.md)
+export default class PopupFilterJoinsEditComponent extends React.Component<
+  PopupFilterJoinsEditComponentProps,
+  PopupFilterJoinsEditComponentState
+> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      expanded: false
+    }
+  }
+
+  handleExprChange = (table: any, expr: any) => {
+    let design = this.props.design || this.props.defaultPopupFilterJoins
+
+    design = _.clone(design)
+    design[table] = expr
+    return this.props.onDesignChange(design)
+  }
+
+  render() {
+    if (!this.state.expanded) {
+      return R(
+        "a",
+        { className: "btn btn-link", onClick: () => this.setState({ expanded: true }) },
+        "Advanced Popup Options"
+      )
+    }
+
+    // Get filterable tables of popup
+    const popupDashboard: DashboardDesign = { items: this.props.popup.items, layout: "blocks" }
+    let filterableTables = DashboardUtils.getFilterableTables(popupDashboard, this.props.schema)
+
+    // Always include self as first
+    filterableTables = [this.props.table].concat(_.without(filterableTables, this.props.table))
+
+    // Get popupFilterJoins
+    const popupFilterJoins = this.props.design || this.props.defaultPopupFilterJoins
+
+    return R(
+      "div",
+      null,
+      R("div", { className: "text-muted" }, "Optional connections for other tables to filtering the popup"),
+      R(
+        "table",
+        { className: "table table-sm table-bordered" },
+        R("thead", null, R("tr", null, R("th", null, "Data Source"), R("th", null, "Connection"))),
+        R(
+          "tbody",
+          null,
+          _.map(filterableTables, (filterableTable) => {
+            return R(
+              "tr",
+              { key: filterableTable },
+              R(
+                "td",
+                { style: { verticalAlign: "middle" } },
+                ExprUtils.localizeString(this.props.schema.getTable(filterableTable)?.name)
+              ),
+              R(
+                "td",
+                null,
+                R(ExprComponent, {
+                  schema: this.props.schema,
+                  dataSource: this.props.dataSource,
+                  table: filterableTable,
+                  value: popupFilterJoins[filterableTable],
+                  onChange: this.handleExprChange.bind(null, filterableTable),
+                  types: this.props.table === this.props.idTable ? ["id", "id[]"] : ["id"], // TODO support id[] some day for admin choropleth maps too
+                  idTable: this.props.idTable,
+                  preferLiteral: false,
+                  placeholder: "None"
+                })
+              )
+            )
+          })
+        )
+      )
+    )
+  }
+}

package/src/maps/PopupFilterJoinsUtils.ts

@@ -0,0 +1,99 @@
+import { Expr, ExprCompiler, Schema } from "@mwater/expressions"
+import { ExprUtils } from "@mwater/expressions"
+import { JsonQLFilter } from ".."
+
+/**
+ * Utilities for popup filter joins.
+ * Object keyed by table name that has expressions as values.
+ * Each value is an expression for its key's table that is a type `id` or `idTable` of the layer's table.
+ * This is used to filter the popup so that the rows are scoped to the item clicked on.
+ * For example, if the map displays water systems, the popup will (by default) only be filtered by water systems, selecting only the row that was clicked on.
+ * However, it could also filter to only water points that are related to the water system by adding the following key-value:
+ * entities.water_point: { table: "entities.water_point", type: "field", column: "water_system" }
+ */
+export function createPopupFilters(
+  popupFilterJoins: { [tableId: string]: Expr },
+  schema: Schema,
+  layerTable: any,
+  rowId: any,
+  useWithin = false
+): JsonQLFilter[] {
+  const exprUtils = new ExprUtils(schema)
+  const exprCompiler = new ExprCompiler(schema)
+
+  const filters: JsonQLFilter[] = []
+
+  // For each filter join
+  for (let table in popupFilterJoins) {
+    // Determine type of expression (id or id[])
+    const expr = popupFilterJoins[table]
+    const exprType = exprUtils.getExprType(expr)
+
+    // Handle useWithin
+    if (useWithin) {
+      // For simple id type
+      if (exprType === "id") {
+        // Compile filter
+        const filterExpr: Expr = {
+          type: "op",
+          op: "within",
+          table,
+          exprs: [expr, { type: "literal", idTable: exprUtils.getExprIdTable(expr), valueType: "id", value: rowId }]
+        }
+        filters.push({ table, jsonql: exprCompiler.compileExpr({ expr: filterExpr, tableAlias: "{alias}" }) })
+      }
+      // id[] not supported
+      // else if exprType == "id[]"
+      //   # Compile filter
+      //   filterExpr = {
+      //     type: "op"
+      //     op: "within any"
+      //     table: table
+      //     exprs: [
+      //       expr
+      //       { type: "literal", idTable: exprUtils.getExprIdTable(expr), valueType: "id", value: ev.data.id }
+      //     ]
+      //   }
+      //   filters.push(exprCompiler.compileExpr(expr: filterExpr, tableAlias: "{alias}"))
+    } else {
+      // For simple id type
+      var filter: JsonQLFilter
+      if (exprType === "id") {
+        filter = {
+          table,
+          jsonql: {
+            type: "op",
+            op: "=",
+            exprs: [exprCompiler.compileExpr({ expr, tableAlias: "{alias}" }), { type: "literal", value: rowId }]
+          }
+        }
+        filters.push(filter)
+      } else if (exprType === "id[]") {
+        filter = {
+          table,
+          jsonql: {
+            type: "op",
+            op: "@>",
+            exprs: [
+              exprCompiler.compileExpr({ expr, tableAlias: "{alias}" }),
+              { type: "op", op: "::jsonb", exprs: [{ type: "literal", value: JSON.stringify([rowId]) }] }
+            ]
+          }
+        }
+        filters.push(filter)
+      }
+    }
+  }
+
+  return filters
+}
+
+// Create default popup filter joins where the join is just the id (not used for choropleth since that needs to join to admin_regions)
+export function createDefaultPopupFilterJoins(table: any) {
+  const popupFilterJoins = {}
+
+  // Return id of row for a simple match
+  popupFilterJoins[table] = { table, type: "id" }
+
+  return popupFilterJoins
+}