@mwater/visualization 5.0.0

package/src/maps/Layer.ts

@@ -0,0 +1,338 @@
+import _ from "lodash"
+import { ExprCompiler } from "@mwater/expressions"
+import { injectTableAlias } from "@mwater/expressions"
+import { default as bbox } from "@turf/bbox"
+
+import { Schema, DataSource, Expr } from "@mwater/expressions"
+import { JsonQLFilter } from "../index"
+import { OnGridClickResults, OnGridHoverResults } from "./maps"
+import { ReactNode } from "react"
+import { JsonQLExpr, JsonQLQuery, JsonQLSelectQuery } from "@mwater/jsonql"
+import { LayerSpecification } from "maplibre-gl"
+
+export interface JsonQLCssLayerDefinition {
+  layers: Array<{
+    /** Layer id */
+    id: string
+    /** jsonql that includes "the_webmercator_geom" as a column */
+    jsonql: JsonQLQuery
+  }>
+
+  /** carto css */
+  css: string
+
+  interactivity?: {
+    /** id of layer */
+    layer: string
+    /** array of field names */
+    fields: string[]
+  }
+}
+
+export interface OnGridClickOptions<LayerDesign> {
+  /** design of layer */
+  design: LayerDesign
+  /** schema to use */
+  schema: Schema
+  /** data source to use */
+  dataSource: DataSource
+  /** layer data source */
+  layerDataSource: any // TODO
+  /** current scope data if layer is scoping */
+  scopeData: any
+  /** compiled filters to apply to the popup */
+  filters: JsonQLFilter[]
+}
+
+export interface OnGridHoverOptions<LayerDesign> {
+  /** design of layer */
+  design: LayerDesign
+  /** schema to use */
+  schema: Schema
+  /** data source to use */
+  dataSource: DataSource
+  /** layer data source */
+  layerDataSource: any // TODO
+  /** current scope data if layer is scoping */
+  scopeData: any
+  /** compiled filters to apply to the popup */
+  filters: JsonQLFilter[]
+}
+
+/** Definition of a vector tile layer */
+export interface VectorTileDef {
+  sourceLayers: VectorTileSourceLayer[]
+
+  /** Common table expressions of the tiles */
+  ctes: VectorTileCTE[]
+
+  /** Map layers must be mapbox layers that reference the source layers */
+  mapLayers: LayerSpecification[]
+
+  /** Which layer ids have click handlers attached. Should be non-overlapping */
+  mapLayersHandleClicks: string[]
+
+  /** Enforced minimum zoom level */
+  minZoom?: number
+
+  /** Enforced maximum zoom level */
+  maxZoom?: number
+}
+
+export interface VectorTileSourceLayer {
+  /** Unique id of the source layer */
+  id: string
+
+  /** Query that produces the source layer, without the ST_AsMVT but with the ST_AsMVTGeom.
+   * References CTE called tile which has x, y, z, scale, envelope and envelope_with_margin.
+   */
+  jsonql: JsonQLQuery
+}
+
+/** Common table expression that a vector tile source layer can reference.
+ * Will be pre-computed and cached. Cannot reference tile parameters.
+ */
+export interface VectorTileCTE {
+  /** tableName of the cte table. Must be [a-z]+ */
+  tableName: string
+
+  /** Contents of the CTE table */
+  jsonql: JsonQLQuery
+}
+
+/** Defines a layer for a map which has all the logic for rendering the specific data to be viewed */
+export default class Layer<LayerDesign> {
+  /** Gets the type of layer definition */
+  getLayerDefinitionType(): "JsonQLCss" | "TileUrl" | "VectorTile" {
+    return "JsonQLCss"
+  }
+
+  /** Gets the layer definition as JsonQL + CSS for type "JsonQLCss"
+      arguments:
+        design: design of layer
+        schema: schema to use
+        filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to put in table alias
+   */
+  getJsonQLCss(design: LayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLCssLayerDefinition {
+    throw new Error("Not implemented")
+  }
+
+  /** Gets the utf grid url for definition type "TileUrl" */
+  getUtfGridUrl(design: LayerDesign, filters: JsonQLFilter[]): string | null {
+    throw new Error("Not implemented")
+  }
+
+  /** Gets the layer definition for "VectorTile" type
+   * @param sourceId id of the source. Should be prefixed to sublayers with a colon (prefix:id)
+   * @param opacity opacity of the layer, which MapBox does not allow to be implemented for a whole layer (https://github.com/mapbox/mapbox-gl-js/issues/4090)
+   */
+  getVectorTile(
+    design: LayerDesign,
+    sourceId: string,
+    schema: Schema,
+    filters: JsonQLFilter[],
+    opacity: number
+  ): VectorTileDef {
+    throw new Error("Not implemented")
+  }
+
+  /**
+   * 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
+   *     layerDataSource: layer data source
+   *     scopeData: current scope data if layer is scoping
+   *     filters: compiled filters to apply to the popup
+   *
+   * Returns:
+   *   null/undefined
+   *   or
+   *   {
+   *     scope: scope to apply ({ name, filter, data })
+   *     row: { tableId:, primaryKey: }  # row that was selected
+   *     popup: React element to put into a popup
+   */
+  onGridClick(ev: { data: any; event: any }, options: OnGridClickOptions<LayerDesign>): OnGridClickResults {
+    return null
+  }
+
+  onGridHoverOver(ev: { data: any; event: any }, options: OnGridHoverOptions<LayerDesign>): OnGridHoverResults {
+    return null
+  }
+
+  /** Gets the bounds of the layer as GeoJSON */
+  getBounds(
+    design: LayerDesign,
+    schema: Schema,
+    dataSource: DataSource,
+    filters: JsonQLFilter[],
+    callback: (err: any, bounds?: { n: number; s: number; e: number; w: number } | null) => void
+  ): void {
+    callback(null)
+  }
+
+  /** Get min zoom level */
+  getMinZoom(design: LayerDesign): number | null | undefined {
+    return null
+  }
+
+  /** Get max zoom level */
+  getMaxZoom(design: LayerDesign): number | null | undefined {
+    return null
+  }
+
+  /** Get the legend to be optionally displayed on the map. Returns a React element */
+  getLegend(
+    design: LayerDesign,
+    schema: Schema,
+    name: string,
+    dataSource: DataSource,
+    locale: string,
+    filters: JsonQLFilter[]
+  ): ReactNode {
+    return null
+  }
+
+  /** Get a list of table ids that can be filtered on */
+  getFilterableTables(design: LayerDesign, schema: Schema): string[] {
+    return []
+  }
+
+  /** True if layer can be edited */
+  isEditable(): boolean {
+    return false
+  }
+
+  /** True if layer is incomplete (e.g. brand new) and should be editable immediately */
+  isIncomplete(design: LayerDesign, schema: Schema): boolean {
+    return this.validateDesign(this.cleanDesign(design, schema), schema) != null
+  }
+
+  // Creates a design element with specified options.
+  // Design should be cleaned on the way in and on way out.
+  // options:
+  //   design: design of layer
+  //   schema: schema to use
+  //   dataSource: data source to use
+  //   onDesignChange: function called when design changes
+  createDesignerElement(options: {
+    design: LayerDesign
+    schema: Schema
+    dataSource: DataSource
+    onDesignChange: (design: LayerDesign) => void
+  }): ReactNode {
+    throw new Error("Not implemented")
+  }
+
+  /** Returns a cleaned design */
+  cleanDesign(design: LayerDesign, schema: Schema): LayerDesign {
+    return design
+  }
+
+  /** Validates design. Null if ok, message otherwise */
+  validateDesign(design: LayerDesign, schema: Schema): string | null {
+    return null
+  }
+
+  /** Convenience function to get the bounds of a geometry expression with filters */
+  getBoundsFromExpr(
+    schema: Schema,
+    dataSource: DataSource,
+    table: string,
+    geometryExpr: Expr,
+    filterExpr: Expr,
+    filters: JsonQLFilter[],
+    callback: (err: any, bounds?: { n: number; e: number; w: number; s: number } | null) => void
+  ): void {
+    const exprCompiler = new ExprCompiler(schema)
+    const compiledGeometryExpr = exprCompiler.compileExpr({ expr: geometryExpr, tableAlias: "main" })
+
+    // Create where clause from filters
+    let where: JsonQLExpr = {
+      type: "op",
+      op: "and",
+      exprs: _.pluck(_.where(filters, { table }), "jsonql")
+    }
+
+    if (filterExpr) {
+      where.exprs.push(exprCompiler.compileExpr({ expr: filterExpr, tableAlias: "main" }))
+    }
+
+    // Compact and inject alias
+    where.exprs = _.compact(where.exprs)
+    where = injectTableAlias(where, "main")
+
+    // Get bounds
+    const boundsQuery: JsonQLSelectQuery = {
+      type: "query",
+      selects: [
+        {
+          type: "select",
+          expr: {
+            type: "op",
+            op: "::json",
+            exprs: [
+              {
+                type: "op",
+                op: "ST_AsGeoJSON",
+                exprs: [
+                  {
+                    type: "op",
+                    op: "ST_Transform",
+                    exprs: [
+                      {
+                        type: "op",
+                        op: "ST_SetSRID",
+                        exprs: [{ type: "op", op: "ST_Extent", exprs: [compiledGeometryExpr] }, 3857]
+                      },
+                      4326
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          alias: "bounds"
+        }
+      ],
+      from: { type: "table", table, alias: "main" },
+      where
+    }
+
+    return dataSource.performQuery(boundsQuery, (err: any, results: any) => {
+      if (err) {
+        return callback(err)
+      } else {
+        // Null if no bounds can be calculated
+        let bounds = null
+
+        if (results[0].bounds) {
+          const [w, s, e, n] = bbox(results[0].bounds)
+          // Pad to 10km if point
+          if (w === e && n === s) {
+            bounds = {
+              w: w - 0.1,
+              s: s - 0.1,
+              e: e + 0.1,
+              n: n + 0.1
+            }
+            // Pad bounds to prevent too small box (10m)
+          } else {
+            bounds = {
+              w: w - 0.001,
+              s: s - 0.001,
+              e: e + 0.001,
+              n: n + 0.001
+            }
+          }
+        }
+
+        return callback(null, bounds)
+      }
+    })
+  }
+}

package/src/maps/LayerFactory.ts

@@ -0,0 +1,51 @@
+import MWaterServerLayer from "./MWaterServerLayer"
+import { default as MarkersLayer } from "./MarkersLayer"
+import { default as BufferLayer } from "./BufferLayer"
+import { default as ChoroplethLayer } from "./ChoroplethLayer"
+import { default as ClusterLayer } from "./ClusterLayer"
+import TileUrlLayer from "./TileUrlLayer"
+import { default as SwitchableTileUrlLayer } from "./SwitchableTileUrlLayer"
+import { default as GridLayer } from "./GridLayer"
+import Layer from "./Layer"
+
+/** Creates a layer */
+export default class LayerFactory {
+  static createLayer(type: string): Layer<any> {
+    switch (type) {
+      case "MWaterServer":
+        return new MWaterServerLayer()
+        break
+
+      case "Markers":
+        return new MarkersLayer()
+        break
+
+      case "Buffer":
+        return new BufferLayer()
+        break
+
+      // Uses a legacy type name
+      case "AdminChoropleth":
+        return new ChoroplethLayer()
+        break
+
+      case "Cluster":
+        return new ClusterLayer()
+        break
+
+      case "TileUrl":
+        return new TileUrlLayer()
+        break
+
+      case "SwitchableTileUrl":
+        return new SwitchableTileUrlLayer()
+        break
+
+      case "Grid":
+        return new GridLayer()
+        break
+    }
+
+    throw new Error(`Unknown type ${type}`)
+  }
+}

package/src/maps/LayerLegendComponent.ts

@@ -0,0 +1,88 @@
+import PropTypes from "prop-types"
+import React from "react"
+import _ from "lodash"
+const R = React.createElement
+import AxisBuilder from "../axes/AxisBuilder"
+import LegendGroup from "./LegendGroup"
+import { ExprUtils, Schema } from "@mwater/expressions"
+import { Axis } from "../axes/Axis"
+
+export interface LayerLegendComponentProps {
+  schema: Schema
+  name: string
+  radiusLayer?: boolean
+  axis?: Axis | null
+  symbol?: string
+  markerSize?: number
+  defaultColor?: string
+  /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+  filters?: any
+  locale?: string
+}
+
+// wraps the legends for a layer
+export default class LayerLegendComponent extends React.Component<LayerLegendComponentProps> {
+  static defaultProps = { radiusLayer: false }
+
+  getCategories() {
+    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
+
+    if (!this.props.axis || !this.props.axis.colorMap) {
+      return
+    }
+
+    // Get categories (value + label)
+    const categories = axisBuilder.getCategories(this.props.axis, null, { locale: this.props.locale })
+
+    // Just "None" and so doesn't count
+    if (_.any(categories, (category) => category.value != null)) {
+      return categories
+    }
+
+    // Can't get values of aggregate axis
+    if (axisBuilder.isAxisAggr(this.props.axis)) {
+      return []
+    }
+
+    // If no categories, use values from color map as input
+    return axisBuilder.getCategories(this.props.axis, _.pluck(this.props.axis.colorMap, "value"), { locale: this.props.locale })
+  }
+
+  render() {
+    let items: any
+    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
+    const categories = this.getCategories()
+
+    if (this.props.axis && this.props.axis.colorMap) {
+      items = _.map(categories || [], (category) => {
+        // Exclude if excluded
+        if (_.includes(this.props.axis!.excludedValues || [], category.value)) {
+          return null
+        }
+
+        const label = axisBuilder.formatCategory(this.props.axis, category)
+        const color = _.find(this.props.axis!.colorMap!, { value: category.value })
+        if (color) {
+          return { color: color.color, name: label }
+        } else {
+          // old color maps dont have null value
+          return { color: this.props.defaultColor, name: label }
+        }
+      })
+
+      // Compact out nulls
+      items = _.compact(items)
+    } else {
+      items = []
+    }
+
+    return React.createElement(LegendGroup, {
+      symbol: this.props.symbol,
+      markerSize: this.props.markerSize,
+      items,
+      defaultColor: this.props.defaultColor,
+      name: this.props.name,
+      radiusLayer: this.props.radiusLayer
+    })
+  }
+}

package/src/maps/LayerSwitcherComponent.tsx

@@ -0,0 +1,91 @@
+import produce from "immer"
+import React, { CSSProperties, Ref, useEffect, useRef, useState } from "react"
+import { MapDesign, MapLayerView } from "./MapDesign"
+
+/** Component to switch layers on a map */
+export function LayerSwitcherComponent(props: { design: MapDesign; onDesignChange: (design: MapDesign) => void }) {
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+
+  const iconStyle: CSSProperties = {
+    backgroundColor: "white",
+    paddingLeft: 5,
+    paddingRight: 5,
+    paddingTop: 3,
+    paddingBottom: 3,
+    borderRadius: 4,
+    border: "solid 1px #AAA",
+    color: "#666",
+    cursor: "pointer",
+    fontSize: 14,
+    display: "inline-block"
+  }
+
+  function toggleDropdown() {
+    setDropdownOpen(ddo => !ddo)
+  }
+
+  function renderLayerView(lv: MapLayerView, index: number) {
+    function handleClick() {
+      props.onDesignChange(
+        produce(props.design, draft => {
+          draft.layerViews[index].visible = !lv.visible
+
+          // Unselect any in same group if selected
+          if (lv.group && !lv.visible) {
+            draft.layerViews.forEach((lv2, i) => {
+              if (lv2.visible && i != index && lv2.group == lv.group) {
+                lv2.visible = false
+              }
+            })
+          }
+        })
+      )
+    }
+
+    return (
+      <div key={index} style={{ fontSize: 12, whiteSpace: "nowrap", cursor: "pointer" }} onClick={handleClick}>
+        <i className={lv.visible ? "fa fa-fw fa-check-square text-primary" : "fa fa-fw fa-square text-muted"} />
+        &nbsp;{lv.name}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      style={{ textAlign: "right" }}
+      ref={useClickOutside(() => {
+        setDropdownOpen(false)
+      })}>
+      <div style={iconStyle} onClick={toggleDropdown}>
+        <i className="fas fa-layer-group fa-fw" />
+      </div>
+      {dropdownOpen ? (
+        <div style={{ backgroundColor: "white", padding: 5 }}>{props.design.layerViews.map(renderLayerView)}</div>
+      ) : null}
+    </div>
+  )
+}
+
+/** Hook for click outside catching */
+function useClickOutside(onClickOut: () => void): Ref<HTMLDivElement> {
+  const node = useRef<HTMLDivElement>(null)
+
+  const handleClick = (e: MouseEvent) => {
+    const nodeRef = node.current
+    // If inside click
+    if (nodeRef && nodeRef.contains(e.target as any)) {
+      return
+    }
+    // If outside click
+    onClickOut()
+  }
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick)
+    return () => {
+      document.removeEventListener("mousedown", handleClick)
+    }
+  }, [])
+
+  return node
+}

package/src/maps/LeafletLoading.css

@@ -0,0 +1,24 @@
+.leaflet-control-loading:empty {
+  /* Spinner via ajaxload.info, base64-encoded */
+  background-image: url(data:image/gif;base64,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);
+  background-repeat: no-repeat;
+}
+
+.leaflet-control-loading,
+.leaflet-control-zoom a.leaflet-control-loading,
+.leaflet-control-zoomslider a.leaflet-control-loading {
+  display: none;
+}
+
+.leaflet-control-loading.is-loading,
+.leaflet-control-zoom a.leaflet-control-loading.is-loading,
+.leaflet-control-zoomslider a.leaflet-control-loading.is-loading {
+  display: block;
+}
+
+/* Necessary for display consistency in Leaflet >= 0.6 */
+.leaflet-bar-part-bottom {
+  border-bottom: medium none;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}