@mwater/visualization 5.2.0 → 5.3.0

package/src/maps/BingLayer.ts

@@ -68,36 +68,26 @@ module.exports = L.TileLayer.extend({
 
   loadMetadata: function () {
     var _this = this
-    var cbid = "_bing_metadata_" + L.Util.stamp(this)
-    ;(window as any)[cbid] = function (meta: any) {
-      _this.meta = meta
-      ;(window as any)[cbid] = undefined
-      var e = document.getElementById(cbid)
-      e!.parentNode!.removeChild(e!)
-      if (meta.errorDetails) {
-        return
-      }
-      _this.initMetadata()
-    }
-    var url =
-      document.location.protocol +
-      "//dev.virtualearth.net/REST/v1/Imagery/Metadata/" +
-      this.options.type +
-      "?include=ImageryProviders&jsonp=" +
-      cbid +
-      "&key=" +
-      this._key +
-      "&UriScheme=" +
-      document.location.protocol.slice(0, -1)
-    var script = document.createElement("script")
-    script.type = "text/javascript"
-    script.src = url
-    script.id = cbid
-    document.getElementsByTagName("head")[0].appendChild(script)
+    var url = `https://dev.virtualearth.net/REST/v1/Imagery/Metadata/${this.options.type}?include=ImageryProviders&key=${this._key}&UriScheme=https`
+  
+    fetch(url)
+      .then(response => response.json())
+      .then(meta => {
+        _this.meta = meta
+        if (meta.errorDetails) {
+          return
+        }
+        _this.initMetadata()
+      })
+      .catch(error => console.error('Error loading Bing Maps metadata:', error))
   },
 
   initMetadata: function () {
     var r = this.meta.resourceSets[0].resources[0]
+    if (!r) {
+      console.error("Error loading Bing Maps metadata")
+      return
+    }
     this.options.subdomains = r.imageUrlSubdomains
     this._url = r.imageUrl
     this._providers = []

package/src/maps/BufferLayer.ts

@@ -15,6 +15,7 @@ import LayerLegendComponent from "./LayerLegendComponent"
 import * as PopupFilterJoinsUtils from "./PopupFilterJoinsUtils"
 import { LayerSpecification } from "maplibre-gl"
 import HoverContent from "./HoverContent"
+import { getDefaultLayoutOptions } from "../dashboards/layoutOptions"
 
 /*
 Layer which draws a buffer around geometries (i.e. a radius circle around points)
@@ -659,7 +660,7 @@ marker-fill: ` +
 
         results.popup = new BlocksLayoutManager().renderLayout({
           items: clickOptions.design.popup.items,
-          style: "popup",
+          layoutOptions: getDefaultLayoutOptions("default"),
           renderWidget: (options: any) => {
             const widget = WidgetFactory.createWidget(options.type)
 

package/src/maps/ChoroplethLayer.ts

@@ -25,6 +25,7 @@ import LayerLegendComponent from "./LayerLegendComponent"
 import * as PopupFilterJoinsUtils from "./PopupFilterJoinsUtils"
 import { LayerSpecification } from "maplibre-gl"
 import HoverContent from "./HoverContent"
+import { getDefaultLayoutOptions } from "../dashboards/layoutOptions"
 
 export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
   /** Gets the type of layer definition */
@@ -1333,7 +1334,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
 
         results.popup = new BlocksLayoutManager().renderLayout({
           items: clickOptions.design.popup.items,
-          style: "popup",
+          layoutOptions: getDefaultLayoutOptions("default"),
           renderWidget: (options: any) => {
             const widget = WidgetFactory.createWidget(options.type)
 

package/src/maps/DirectMapDataSource.ts

@@ -17,8 +17,7 @@ import * as QuickfilterUtils from "../quickfilter/QuickfilterUtils"
 import { useState, useEffect } from 'react'
 import { useStableCallback } from "@mwater/react-library/lib/useStableCallback"
 
-
-interface DirectMapDataSourceOptions {
+export interface DirectMapDataSourceOptions {
   /** schema to use */
   schema: Schema
 
@@ -33,6 +32,9 @@ interface DirectMapDataSourceOptions {
 
   /** client id to use for talking to mWater server */
   client?: string
+
+  /** Origin to which server time is recorded e.g. maps:232434... */
+  origin?: string
 }
 
 export default class DirectMapDataSource implements MapDataSource {
@@ -97,6 +99,9 @@ interface DirectLayerDataSourceOptions {
 
   /** client id to use for talking to mWater server */
   client?: string
+
+  /** Origin to which server time is recorded e.g. maps:232434... */
+  origin?: string
 }
 
 /** Interface for a request made to get a token for vector tiles.
@@ -122,6 +127,9 @@ export interface VectorTileDirectTokenRequest {
 
   /** Enforced maximum zoom level */
   maxZoom?: number
+
+  /** Origin to which server time is recorded */
+  origin?: string
 }
 
 /**
@@ -243,7 +251,8 @@ class DirectLayerDataSource implements MapLayerDataSource {
       maxZoom: vectorTile.maxZoom,
       createdAfter: createdAfter,
       // 12 hours
-      expiresAfter: new Date(Date.now() + 1000 * 3600 * 12).toISOString()
+      expiresAfter: new Date(Date.now() + 1000 * 3600 * 12).toISOString(),
+      origin: this.options.origin
     }
  
     const { url, expires } = await getVectorTileFromDirectRequest({

package/src/maps/EditPopupComponent.ts

@@ -8,6 +8,7 @@ import WidgetFactory from "../widgets/WidgetFactory"
 import DirectWidgetDataSource from "../widgets/DirectWidgetDataSource"
 import PopupFilterJoinsEditComponent from "./PopupFilterJoinsEditComponent"
 import { DataSource, Schema } from "@mwater/expressions"
+import { getDefaultLayoutOptions } from "../dashboards/layoutOptions"
 
 export interface EditPopupComponentProps {
   /** Schema to use */
@@ -87,7 +88,7 @@ export default class EditPopupComponent extends React.Component<EditPopupCompone
             { isOpen: true, onRequestClose: () => this.setState({ editing: false }) },
             new BlocksLayoutManager().renderLayout({
               items: this.props.design.popup?.items,
-              style: "popup",
+              layoutOptions: getDefaultLayoutOptions("default"),
               onItemsChange: this.handleItemsChange,
               disableMaps: true,
               renderWidget: (options: any) => {

package/src/maps/MapComponent.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React, { ReactNode } from "react"
 const R = React.createElement
@@ -16,6 +15,7 @@ import { JsonQLFilter } from "../JsonQLFilter"
 import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
 import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent"
 import { getCompiledFilters, getFilterableTables } from "./MapUtils"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 export interface MapComponentProps {
   schema: Schema
@@ -64,7 +64,7 @@ interface MapComponentState {
 
 /** Map with designer on right */
 export default class MapComponent extends React.Component<MapComponentProps, MapComponentState> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: MapComponentProps) {
     super(props)
@@ -232,7 +232,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
           zoomLocked: this.state.zoomLocked,
           onRowClick: this.props.onRowClick,
           extraFilters: filters,
-          locale: this.context.locale,
+          locale: this.context,
           width: size.width!,
           height: size.height!
         })

package/src/maps/MarkersLayer.ts

@@ -15,6 +15,7 @@ import LayerLegendComponent from "./LayerLegendComponent"
 import * as PopupFilterJoinsUtils from "./PopupFilterJoinsUtils"
 import { ExpressionSpecification, FilterSpecification, LayerSpecification } from "maplibre-gl"
 import HoverContent from "./HoverContent"
+import { getDefaultLayoutOptions } from "../dashboards/layoutOptions"
 
 export default class MarkersLayer extends Layer<MarkersLayerDesign> {
   /** Gets the type of layer definition */
@@ -61,11 +62,7 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
         "fill-color": color,
         "fill-opacity": (design.polygonFillOpacity ?? 0.25) * opacity
       },
-      filter: addFilter([
-        "any",
-        ["==", ["geometry-type"], "Polygon"],
-        ["==", ["geometry-type"], "MultiPolygon"]
-      ])
+      filter: addFilter(["any", ["==", ["geometry-type"], "Polygon"], ["==", ["geometry-type"], "MultiPolygon"]])
     })
 
     // Add polygon outlines and lines
@@ -79,11 +76,7 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
         "line-width": design.lineWidth != null ? design.lineWidth : 3,
         "line-opacity": opacity
       },
-      filter: addFilter([
-        "any",
-        ["==", ["geometry-type"], "Polygon"],
-        ["==", ["geometry-type"], "MultiPolygon"]
-      ])
+      filter: addFilter(["any", ["==", ["geometry-type"], "Polygon"], ["==", ["geometry-type"], "MultiPolygon"]])
     })
 
     // Add lines
@@ -97,11 +90,7 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
         "line-width": design.lineWidth != null ? design.lineWidth : 3,
         "line-opacity": opacity
       },
-      filter: addFilter([
-        "any",
-        ["==", ["geometry-type"], "LineString"],
-        ["==", ["geometry-type"], "MultiLineString"]
-      ])
+      filter: addFilter(["any", ["==", ["geometry-type"], "LineString"], ["==", ["geometry-type"], "MultiLineString"]])
     })
 
     if (!design.symbol) {
@@ -161,7 +150,7 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
     // Compile geometry axis
     const geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "basequery" })
 
-    // Select _id, location 
+    // Select _id, location
     const basequery: JsonQLSelectQuery = {
       type: "query",
       selects: [
@@ -170,7 +159,7 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
           expr: { type: "field", tableAlias: "basequery", column: schema.getTable(design.table)!.primaryKey },
           alias: "id"
         }, // main primary key as id
-        { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" }, // geometry as the_geom_webmercator
+        { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" } // geometry as the_geom_webmercator
       ],
       from: exprCompiler.compileTable(design.table, "basequery")
     }
@@ -459,7 +448,7 @@ line-width: ` +
             JSON.stringify(item.value) +
             "][geometry_type='ST_Polygon'],#layer0[color=" +
             JSON.stringify(item.value) +
-            `][geometry_type='ST_MultiPolygon'] { 
+            `][geometry_type='ST_MultiPolygon'] {
 polygon-fill: ` +
             item.color +
             `;\
@@ -484,22 +473,26 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
 
       // Popup
       if (hoverOptions.design.hoverOver) {
-        // Create filter using popupFilterJoins
-        const popupFilterJoins =
-          hoverOptions.design.popupFilterJoins || PopupFilterJoinsUtils.createDefaultPopupFilterJoins(table)
-        const popupFilters = PopupFilterJoinsUtils.createPopupFilters(
-          popupFilterJoins,
-          hoverOptions.schema,
-          table,
-          ev.data.id
-        )
+        const exprCompiler = new ExprCompiler(hoverOptions.schema)
 
         results.hoverOver = React.createElement(HoverContent, {
           key: ev.data.id,
           schema: hoverOptions.schema,
           dataSource: hoverOptions.dataSource,
           design: hoverOptions.design,
-          filters: popupFilters
+          filters: [
+            {
+              table,
+              jsonql: {
+                type: "op",
+                op: "=",
+                exprs: [
+                  exprCompiler.compileExpr({ expr: { type: "id", table }, tableAlias: "{alias}" }),
+                  { type: "literal", value: ev.data.id }
+                ]
+              }
+            }
+          ]
         })
       }
 
@@ -586,7 +579,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
 
         results.popup = new BlocksLayoutManager().renderLayout({
           items: clickOptions.design.popup.items,
-          style: "popup",
+          layoutOptions: getDefaultLayoutOptions("default"),
           renderWidget: (options: any) => {
             const widget = WidgetFactory.createWidget(options.type)
 
@@ -803,17 +796,17 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
 }
 
 /**
- * Takes a base query that has any number of selects and where conditions. It must have a geometry 
- * field called the_geom_webmercator. It then adds a select that is a row_number() over a partition by the rounded 
- * ST_XMin and ST_YMin of the geometry divided by the scale of the tile. This creates clusters of markers 
+ * Takes a base query that has any number of selects and where conditions. It must have a geometry
+ * field called the_geom_webmercator. It then adds a select that is a row_number() over a partition by the rounded
+ * ST_XMin and ST_YMin of the geometry divided by the scale of the tile. This creates clusters of markers
  * that are within the same grid square of the size of the scale. The row_number() is aliased as "r".
- * 
+ *
  * It then adds a where clause that clips the geometry to the envelope of the tile plus a margin.
- * 
- * The outer query then selects all non-geometry and non-cluster fields and wraps the geometry in 
- * ST_AsMVTGeom to prepare it for display. It also limits the clusters to a maximum of 3 markers per 
+ *
+ * The outer query then selects all non-geometry and non-cluster fields and wraps the geometry in
+ * ST_AsMVTGeom to prepare it for display. It also limits the clusters to a maximum of 3 markers per
  * small area to limit tile sizes
- * 
+ *
  * @param baseQuery query to build from
  * @returns query ready for sending to server
  */
@@ -906,9 +899,13 @@ export function createMarkersVectorQuery(baseQuery: JsonQLSelectQuery) {
   })
 
   // Bubble up selects that are not cluster or geometry to the outer query
-  const innerSelects: JsonQLSelect[] = baseQuery.selects.filter(
-    select => select.alias !== "the_geom_webmercator"
-  ).map(select => ({ type: "select", expr: { type: "field", tableAlias: "innerquery", column: select.alias }, alias: select.alias}))
+  const innerSelects: JsonQLSelect[] = baseQuery.selects
+    .filter(select => select.alias !== "the_geom_webmercator")
+    .map(select => ({
+      type: "select",
+      expr: { type: "field", tableAlias: "innerquery", column: select.alias },
+      alias: select.alias
+    }))
 
   // Create outer query which takes where r <= 3 to limit # of points in a cluster
   // Wrap geometry in ST_Force2D to avoid https://trac.osgeo.org/postgis/ticket/4690 (https://github.com/mWater/mwater-server/issues/495)
@@ -931,7 +928,7 @@ export function createMarkersVectorQuery(baseQuery: JsonQLSelectQuery) {
           ]
         },
         alias: "the_geom_webmercator"
-      }, // innerquery.the_geom_webmercator as the_geom_webmercator
+      } // innerquery.the_geom_webmercator as the_geom_webmercator
     ],
     from: { type: "subquery", query: innerquery, alias: "innerquery" },
     where: { type: "op", op: "<=", exprs: [{ type: "field", tableAlias: "innerquery", column: "r" }, 3] }

package/src/maps/RasterMapViewComponent.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React, { ReactNode } from "react"
 const R = React.createElement
@@ -13,6 +12,7 @@ import { JsonQLFilter } from "../JsonQLFilter"
 import { MapDesign } from "./MapDesign"
 import { MapDataSource } from "./MapDataSource"
 import { MapScope } from "./MapUtils"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 export interface RasterMapViewComponentProps {
   schema: Schema
@@ -67,7 +67,7 @@ export default class RasterMapViewComponent extends React.Component<
     legendHidden: boolean
   }
 > {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   leafletMap?: LeafletMapComponent | null
 
@@ -215,7 +215,7 @@ export default class RasterMapViewComponent extends React.Component<
         layerViews: this.props.design.layerViews,
         filters: this.getCompiledFilters(),
         dataSource: this.props.dataSource,
-        locale: this.context.locale,
+        locale: this.context,
         onHide: () => this.setState({ legendHidden: true }),
         zoom: null
       })

package/src/maps/ServerMapDataSource.ts

@@ -277,7 +277,7 @@ interface ServerMapLayerPopupWidgetDataSourceOptions {
   mapId: string
 
   /** revision to use to allow caching */
-  rev: string
+  rev: number
 
   /** Layer id to use */
   layerId: string
@@ -304,7 +304,7 @@ class ServerMapLayerPopupWidgetDataSource implements WidgetDataSource {
   // Get the data that the widget needs. The widget should implement getData method (see above) to get the actual data on the server
   //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
   //  callback: (error, data)
-  getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void) {
+  getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): void {
     const query = {
       client: this.options.client,
       share: this.options.share,
@@ -317,11 +317,11 @@ class ServerMapLayerPopupWidgetDataSource implements WidgetDataSource {
       `maps/${this.options.mapId}/layers/${this.options.layerId}/widgets/${this.options.popupWidgetId}/data?` +
       querystring.stringify(query)
 
-    return $.getJSON(url, (data: any) => {
-      return callback(null, data)
+    $.getJSON(url, (data: any) => {
+      callback(null, data)
     }).fail((xhr: any) => {
       console.log(xhr.responseText)
-      return callback(new Error(xhr.responseText))
+      callback(new Error(xhr.responseText))
     })
   }
 
@@ -388,11 +388,11 @@ class ServerQuickfilterDataSource implements QuickfiltersDataSource {
       headers
     })
       .done((data: any) => {
-        return callback(null, data)
+        callback(null, data)
       })
       .fail((xhr: any) => {
         console.log(xhr.responseText)
-        return callback(new Error(xhr.responseText))
+        callback(new Error(xhr.responseText))
       })
   }
 }

package/src/maps/VectorMapViewComponent.tsx

@@ -505,7 +505,7 @@ export function VectorMapViewComponent(props: {
       setBusy(b => b - 1)
 
       if (bounds) {
-        map!.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 20, duration: 2500 })
+        map!.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 30, duration: 2500 })
 
         // Also record if editable as part of bounds
         setBounds(bounds)
@@ -541,6 +541,7 @@ export function VectorMapViewComponent(props: {
         props.design.bounds.w != boundsRef.current.w
       ) {
         map.fitBounds([props.design.bounds.w, props.design.bounds.s, props.design.bounds.e, props.design.bounds.n])
+        boundsRef.current = props.design.bounds
       }
     }
   }, [map, props.design.autoBounds, props.design.bounds])

package/src/maps/mapSymbols.ts

@@ -45,6 +45,7 @@ import chevron_circle_down from "./symbols/font-awesome/chevron-circle-down.png"
 import medkit from "./symbols/font-awesome/medkit.png"
 import cloud from "./symbols/font-awesome/cloud.png"
 import beer from "./symbols/font-awesome/beer.png"
+import cloud_rain from "./symbols/font-awesome/cloud-rain.png"
 
 /** Symbols used on the map */
 export const mapSymbols: { value: string; label: string; url: string }[] = [
@@ -158,5 +159,6 @@ export const mapSymbols: { value: string; label: string; url: string }[] = [
   },
   { url: medkit, value: "font-awesome/medkit", label: "Medkit" },
   { url: cloud, value: "font-awesome/cloud", label: "Cloud" },
+  { url: cloud_rain, value: "font-awesome/cloud-rain", label: "Cloud Rain" },
   { url: beer, value: "font-awesome/beer", label: "Cup" }
 ]