@mwater/visualization 5.4.5 → 5.6.0

package/src/maps/MarkersLayer.ts

@@ -20,6 +20,7 @@ import Widget from "../widgets/Widget"
 import { WidgetDataSource } from "../widgets/WidgetDataSource"
 import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
 import { getTranslatableStringsFromLayoutManager } from "../dashboards/DashboardUtils"
+import { getSimpleHoverOverData } from "./MapUtils"
 
 export default class MarkersLayer extends Layer<MarkersLayerDesign> {
   /** Gets the type of layer definition */
@@ -114,6 +115,9 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
         filter: addFilter(["==", ["geometry-type"], "Point"])
       })
     } else {
+      // For some reason, scales down from 20 to 14. No idea why
+      const iconSize = (design.markerSize || 10) / 14
+
       mapLayers.push({
         id: `${sourceId}:points`,
         type: "symbol",
@@ -122,11 +126,13 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
         layout: {
           "icon-image": design.symbol,
           "icon-allow-overlap": true,
-          "icon-size": (design.markerSize || 10) / 14 // For some reason, scales down from 20 to 14. No idea why
+          "icon-size": iconSize,
         },
         paint: {
           "icon-color": color,
-          "icon-opacity": opacity
+          "icon-opacity": opacity,
+          "icon-halo-color": compileColorToMapbox("#FFFFFFCC", design.axes.color?.excludedValues),
+          "icon-halo-width": iconSize * 5,
         },
         filter: addFilter(["==", ["geometry-type"], "Point"])
       })
@@ -471,33 +477,16 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
     ev: { data: any; event: any },
     hoverOptions: OnGridHoverOptions<MarkersLayerDesign>
   ): OnGridHoverResults {
-    if (ev.data && ev.data.id) {
-      const { table } = hoverOptions.design
-      const results: OnGridHoverResults = {}
-
-      // Popup
-      if (hoverOptions.design.hoverOver) {
-        const exprCompiler = new ExprCompiler(hoverOptions.schema)
-
-        results.hoverOver = React.createElement(HoverContent, {
+    if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
+      const results: OnGridHoverResults = {
+        hoverOver: React.createElement(HoverContent, {
           key: ev.data.id,
           schema: hoverOptions.schema,
-          dataSource: hoverOptions.dataSource,
-          table,
+          mapLayerDataSource: hoverOptions.layerDataSource,
           items: hoverOptions.design.hoverOver.items,
-          filters: [
-            {
-              table,
-              jsonql: {
-                type: "op",
-                op: "=",
-                exprs: [
-                  exprCompiler.compileExpr({ expr: { type: "id", table }, tableAlias: "{alias}" }),
-                  { type: "literal", value: ev.data.id }
-                ]
-              }
-            }
-          ],
+          design: hoverOptions.design,
+          data: ev.data,
+          filters: hoverOptions.filters,
           locale: hoverOptions.locale,
           translate: hoverOptions.translate
         })
@@ -752,6 +741,19 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
       })!
 
       draft.filter = exprCleaner.cleanExpr(design.filter || null, { table: draft.table })
+
+      // Clean hover over expressions 
+      if (design.table && design.hoverOver && design.hoverOver.items) {
+        for (let i = 0; i < design.hoverOver.items.length; i++) {
+          const item = design.hoverOver.items[i]
+          if (item.value) {
+            draft.hoverOver!.items[i].value = exprCleaner.cleanExpr(item.value || null, {
+              table: design.table,
+              aggrStatuses: ["individual", "literal"]
+            })
+          }
+        }
+      }
     })
 
     return design
@@ -818,6 +820,32 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
     // Remove duplicates
     return _.uniq(strings)
   }
+
+  /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+   * It will be called on the server side if using a server map data source, or on the client side if using a direct
+   * map data source.
+   */
+  getHoverOverData(options: {
+    /** Design of the layer */
+    design: MarkersLayerDesign,
+    /** Data of the current item being hovered over. e.g. { id: 123 } */
+    data: any,
+    /** Filters to apply to the hover over data, not including filtering down to the current item */
+    filters: JsonQLFilter[],
+    /** Schema to use */
+    schema: Schema,
+    /** Data source to use */
+    dataSource: DataSource,
+  }): Promise<{ [key: string]: any }> {
+    return getSimpleHoverOverData({
+      id: options.data.id,
+      table: options.design.table,
+      filters: options.filters,
+      schema: options.schema,
+      dataSource: options.dataSource,
+      hoverOverItems: options.design.hoverOver!.items,
+    })
+  }
 }
 
 /**
@@ -961,4 +989,3 @@ export function createMarkersVectorQuery(baseQuery: JsonQLSelectQuery) {
 
   return outerquery
 }
-

package/src/maps/MarkersLayerDesign.ts

@@ -43,7 +43,7 @@ export interface MarkersLayerDesign {
   popup: { items: LayoutBlock }
 
   /** Contains items to display when hovering over the layer */
-  hoverOver: { items: HoverOverItem[] }
+  hoverOver?: { items: HoverOverItem[] }
 
   /** Customizable filtering for popup */
   popupFilterJoins: PopupFilterJoins

package/src/maps/MarkersLayerDesignerComponent.tsx

@@ -0,0 +1,360 @@
+import _ from "lodash"
+import React from "react"
+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 "@mwater/expressions-ui"
+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 (
+      <div className="mb-3">
+        <label className="text-muted"><i className="fa fa-database" /> {T`Data Source`}</label>
+        <div style={{ marginLeft: 10 }}>
+          <TableSelectComponent
+            schema={this.props.schema}
+            value={this.props.design.table}
+            onChange={this.handleTableChange}
+            filter={this.props.design.filter}
+            onFilterChange={this.handleFilterChange}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderGeometryAxis() {
+    if (!this.props.design.table) {
+      return
+    }
+
+    const title = <span><span className="fas fa-map-marker-alt" /> {T`Location`}</span>
+
+    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 (
+      <div className="mb-3">
+        <label className="text-muted">{title}</label>
+        <div style={{ marginLeft: 10 }}>
+          <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={filters}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  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 (
+      <div>
+        {!this.props.design.axes.color ? (
+          <div className="mb-3">
+            <label className="text-muted"><span className="fas fa-tint" />{T`Color`}</label>
+            <div>
+              <ColorComponent
+                color={this.props.design.color}
+                onChange={this.handleColorChange}
+              />
+            </div>
+          </div>
+        ) : undefined}
+
+        <div className="mb-3">
+          <label className="text-muted"><span className="fas fa-tint" />{T`Color By Data`}</label>
+          <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={filters}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderSymbol() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    return <MarkerSymbolSelectComponent symbol={this.props.design.symbol} onChange={this.handleSymbolChange} />
+  }
+
+  renderMarkerSize() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Marker Size`}</label>
+        <ui.Select
+          value={this.props.design.markerSize || 10}
+          options={[
+            { value: 5, label: T`Extra small` },
+            { value: 8, label: T`Small` },
+            { value: 10, label: T`Normal` },
+            { value: 13, label: T`Large` },
+            { value: 16, label: T`Extra large` }
+          ]}
+          onChange={this.handleMarkerSizeChange}
+        />
+      </div>
+    )
+  }
+
+  renderLineWidth() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Line Width (for shapes)`}</label>
+        <ui.Select
+          value={this.props.design.lineWidth != null ? this.props.design.lineWidth : 3}
+          options={[
+            { value: 0, label: T`None` },
+            { value: 1, label: T`1 pixel` },
+            { value: 2, label: T`2 pixels` },
+            { value: 3, label: T`3 pixels` },
+            { value: 4, label: T`4 pixels` },
+            { value: 5, label: T`5 pixels` },
+            { value: 6, label: T`6 pixels` }
+          ]}
+          onChange={this.handleLineWidthChange}
+        />
+      </div>
+    )
+  }
+
+  renderPolygonBorderColor() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Polygon border color (blank for same as fill color)`}</label>
+        <div>
+          <ColorComponent
+            color={this.props.design.polygonBorderColor}
+            onChange={this.handlePolygonBorderColorChange}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderPolygonFillOpacity() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    const opacity = this.props.design.polygonFillOpacity != null ? this.props.design.polygonFillOpacity : 0.25
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted"><span>{T`Polygon Fill Opacity: ${Math.round(opacity * 100)}%`}</span></label>
+        <div style={{ padding: "10px" }}>
+          <Rcslider
+            min={0}
+            max={100}
+            step={1}
+            tipTransitionName="rc-slider-tooltip-zoom-down"
+            value={opacity * 100}
+            onChange={this.handlePolygonFillOpacityChange}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderFilter() {
+    // If no data, hide
+    if (!this.props.design.axes.geometry) {
+      return null
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted"><span className="fas fa-filter" />{T`Filters`}</label>
+        <div style={{ marginLeft: 8 }}>
+          <FilterExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            onChange={this.handleFilterChange}
+            table={this.props.design.table}
+            value={this.props.design.filter}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderPopup() {
+    if (!this.props.design.table) {
+      return null
+    }
+
+    return (
+      <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 (
+      <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)}
+        aggrStatuses={["individual", "literal"]}
+      />
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderTable()}
+        {this.renderGeometryAxis()}
+        {this.renderColor()}
+        {this.renderSymbol()}
+        {this.renderMarkerSize()}
+        <ui.CollapsibleSection
+          label={T`Shape Options`}
+          labelMuted={true}
+        >
+          {this.renderLineWidth()}
+          {this.renderPolygonBorderColor()}
+          {this.renderPolygonFillOpacity()}
+        </ui.CollapsibleSection>
+        {this.renderFilter()}
+        {this.renderPopup()}
+        {this.renderHoverOver()}
+        {this.props.design.table ? (
+          <ZoomLevelsComponent design={this.props.design} onDesignChange={this.props.onDesignChange} />
+        ) : undefined}
+      </div>
+    )
+  }
+}

package/src/maps/RasterMapViewComponent.ts

@@ -178,7 +178,7 @@ export default class RasterMapViewComponent extends React.Component<
         filters: this.getCompiledFilters(),
         dataSource: this.props.dataSource,
         locale: this.context,
-        translate: this.props.translate ?? (() => ""),
+        translate: this.props.translate ?? ((input: string) => input),
         onHide: () => this.setState({ legendHidden: true }),
         zoom: null
       })

package/src/maps/ServerMapDataSource.ts

@@ -214,12 +214,6 @@ class ServerLayerDataSource implements MapLayerDataSource {
 
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring.stringify(query)
 
-    // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-    // Used to speed queries
-    if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-      url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/")
-    }
-
     return url
   }
 
@@ -228,12 +222,6 @@ class ServerLayerDataSource implements MapLayerDataSource {
     let where
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`
 
-    // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-    // Used to speed queries
-    if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-      url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/")
-    }
-
     if (this.options.client) {
       url += `&client=${this.options.client}`
     }
@@ -261,6 +249,41 @@ class ServerLayerDataSource implements MapLayerDataSource {
 
     return url
   }
+
+  /** Gets hover over data for hover over items
+   * @param design The design of the layer
+   * @param data The data of the current item being hovered over. e.g. { id: 123 }
+   * @param filters The filters to apply to the layer does not include filters that narrow down to a specific item
+   * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+   */
+  async getHoverOverData(design: any, data: any, filters: JsonQLFilter[]): Promise<{ [key: string]: any }> {
+    const query = {
+      client: this.options.client,
+      share: this.options.share,
+      filters: compressJson(filters || []),
+      data: compressJson(data),
+      rev: this.options.rev
+    }
+
+    const url =
+      `${this.options.apiUrl}maps/${this.options.mapId}/layers/${this.options.layerView.id}/hoverdata?` +
+      querystring.stringify(query)
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Accept: "application/json"
+      }
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      console.error(errorText)
+      throw new Error(`Error fetching hover data: ${response.statusText}`)
+    }
+
+    return await response.json()
+  }
 }
 
 interface ServerMapLayerPopupWidgetDataSourceOptions {

package/src/maps/VectorMapViewComponent.tsx

@@ -1,12 +1,10 @@
 import _, { find } from "lodash"
 import { LayerSpecification, MapLayerMouseEvent } from "maplibre-gl"
-import { DataSource, Schema } from "@mwater/expressions"
 import React, { CSSProperties, ReactNode, useEffect, useMemo, useState } from "react"
 import { useRef } from "react"
 import { JsonQLFilter } from "../JsonQLFilter"
 import { default as LayerFactory } from "./LayerFactory"
-import { MapBounds, MapDesign, MapLayerView } from "./MapDesign"
-import { MapDataSource } from "./MapDataSource"
+import { MapBounds, MapLayerView } from "./MapDesign"
 import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
 import { useStableCallback } from "@mwater/react-library/lib/useStableCallback"
 import {
@@ -76,7 +74,7 @@ export function VectorMapViewComponent(props: VectorMapViewComponentProps) {
   // Locale to use
   const locale = props.locale || props.design.locale || "en"
 
-  // Translate function to use TODO
+  // Translate function to use 
   const translate = props.translate || ((input: string) => input)
 
   // Last feature that mouse entered
@@ -278,18 +276,9 @@ export function VectorMapViewComponent(props: VectorMapViewComponentProps) {
       } else {
         const tileUrl = props.mapDataSource.getLayerDataSource(layerView.id).getTileUrl(design, [])
         if (tileUrl) {
-          // Replace "{s}" with "a", "b", "c"
-          let tiles: string[] = []
-
-          if (tileUrl.includes("{s}")) {
-            tiles = [tileUrl.replace("{s}", "a"), tileUrl.replace("{s}", "b"), tileUrl.replace("{s}", "c")]
-          } else {
-            tiles = [tileUrl]
-          }
-
           newSources[layerView.id] = {
             type: "raster",
-            tiles,
+            tiles: [tileUrl],
             tileSize: 256
           }
 
@@ -505,13 +494,13 @@ export function VectorMapViewComponent(props: VectorMapViewComponentProps) {
     }
 
     if (!props.design.autoBounds && props.design.bounds) {
-      // If we set the new bounds, do not update map bounds
+      // If we set the new bounds, do not update map bounds unless they differ by more than 0.0001 degrees (roughly 10m)
       if (
         boundsRef.current == null ||
-        props.design.bounds.n != boundsRef.current.n ||
-        props.design.bounds.e != boundsRef.current.e ||
-        props.design.bounds.s != boundsRef.current.s ||
-        props.design.bounds.w != boundsRef.current.w
+        Math.abs(props.design.bounds.n - boundsRef.current.n) > 0.0001 ||
+        Math.abs(props.design.bounds.e - boundsRef.current.e) > 0.0001 ||
+        Math.abs(props.design.bounds.s - boundsRef.current.s) > 0.0001 ||
+        Math.abs(props.design.bounds.w - boundsRef.current.w) > 0.0001
       ) {
         map.fitBounds([props.design.bounds.w, props.design.bounds.s, props.design.bounds.e, props.design.bounds.n])
         boundsRef.current = props.design.bounds

package/src/maps/maps.ts

@@ -1,5 +1,6 @@
 import { JsonQLQuery } from "@mwater/jsonql"
 import { Expr } from "@mwater/expressions"
+import { ReactNode } from "react"
 
 export interface LayerDefinition {
   layers: Array<{
@@ -20,15 +21,16 @@ export interface LayerDefinition {
   }
 }
 
+/** Results from onGridClick that can be used to display a popup */
 export type OnGridClickResults = {
   scope?: any
   row?: { tableId: string; primaryKey: any }
   popup?: React.ReactElement<{}>
 } | null
 
+/** Results from onGridHover that can be used to display a hover over */
 export type OnGridHoverResults = {
-  scope?: any
-  hoverOver?: React.ReactElement<{}>
+  hoverOver?: ReactNode
 } | null
 
 /** Item in hover over */