@mwater/visualization 5.4.1 → 5.4.2

package/src/maps/HoverContent.tsx

@@ -11,27 +11,33 @@ export interface HoverContentProps {
   /** Schema to use */
   schema: Schema
   dataSource: DataSource
-  /** Design of the marker layer */
-  design: any
   filters?: JsonQLFilter[]
-  /** Table that popup is for */
-  // table: string
-  // /** Table of the row that join is to. Usually same as table except for choropleth maps */
-  // idTable: string
-  // defaultPopupFilterJoins: any
+  /** Table that hover over is for */
+  table: string
+  /** Hover over items */
+  items: HoverOverItem[]
+  /** Locale to use */
+  locale: string
+  /** Translate function to use */
+  translate: (input: string) => string
 }
 
-const HoverContent: React.FC<HoverContentProps> = props => {
+/** Component that displays hover over content */
+const HoverContent = (props: HoverContentProps) => {
   const [values, setValues] = useState<{ [key: string]: string }>({})
+  const [error, setError] = useState<string | null>(null)
   const exprUtils = new ExprUtils(props.schema)
+
   useEffect(() => {
-    const items = props.design.hoverOver?.items ?? []
+    let mounted = true
+    const items = props.items
+
     if (items.length > 0) {
       const exprCompiler = new ExprCompiler(props.schema)
       const query: JsonQLSelectQuery = {
         type: "query",
         selects: [],
-        from: exprCompiler.compileTable(props.design.table, "main"),
+        from: exprCompiler.compileTable(props.table, "main"),
         limit: 1
       }
 
@@ -59,24 +65,42 @@ const HoverContent: React.FC<HoverContentProps> = props => {
       }
 
       props.dataSource.performQuery(query, (error: any, data: any) => {
+        if (!mounted) {
+          return
+        }
+
+        if (error) {
+          setError(props.translate("Error loading hover data"))
+          return
+        }
+
         setValues(data?.[0] ?? {})
       })
     }
+
+    return () => {
+      mounted = false
+    }
   }, [])
+
+  if (error) {
+    return <div className="text-danger">{error}</div>
+  }
+
   return (
     <div className="_mviz-map-hover-content">
-      {props.design.hoverOver?.items.map((item: HoverOverItem) => {
+      {props.items.map((item: HoverOverItem) => {
         let value = values[item.id]
 
-        if (value !== null && item.value) {
+        if (value != null && item.value) {
           // Get expression type
           const exprType = exprUtils.getExprType(item.value)
 
           // Format if can format
           if (exprType && canFormatType(exprType)) {
-            value = formatValue(exprType, value, undefined)
+            value = formatValue(exprType, value, item.format, props.locale)
           } else {
-            value = exprUtils.stringifyExprLiteral(item.value, value)
+            value = exprUtils.stringifyExprLiteral(item.value, value, props.locale)
           }
         } else {
           value = "■■■■"
@@ -84,8 +108,8 @@ const HoverContent: React.FC<HoverContentProps> = props => {
 
         return (
           <>
-            <span>{item.label}:</span>
-            <span className="text-muted">{values[item.id] === null ? "n/a" : values[item.id] ?? "■■■■"}</span>
+            <span>{props.translate(item.label)}:</span>
+            <span className="text-muted">{values[item.id] === null ? "n/a" : value}</span>
           </>
         )
       })}

package/src/maps/Layer.ts

@@ -9,6 +9,7 @@ import { OnGridClickResults, OnGridHoverResults } from "./maps"
 import { ReactNode } from "react"
 import { JsonQLExpr, JsonQLQuery, JsonQLSelectQuery } from "@mwater/jsonql"
 import { LayerSpecification } from "maplibre-gl"
+import { MapLayerDataSource } from "./MapLayerDataSource"
 
 export interface JsonQLCssLayerDefinition {
   layers: Array<{
@@ -37,11 +38,15 @@ export interface OnGridClickOptions<LayerDesign> {
   /** data source to use */
   dataSource: DataSource
   /** layer data source */
-  layerDataSource: any // TODO
+  layerDataSource: MapLayerDataSource
   /** current scope data if layer is scoping */
   scopeData: any
   /** compiled filters to apply to the popup */
   filters: JsonQLFilter[]
+  /** Locale to use */
+  locale: string
+  /** Translate function to use */
+  translate: (input: string) => string
 }
 
 export interface OnGridHoverOptions<LayerDesign> {
@@ -52,11 +57,15 @@ export interface OnGridHoverOptions<LayerDesign> {
   /** data source to use */
   dataSource: DataSource
   /** layer data source */
-  layerDataSource: any // TODO
+  layerDataSource: MapLayerDataSource
   /** current scope data if layer is scoping */
   scopeData: any
   /** compiled filters to apply to the popup */
   filters: JsonQLFilter[]
+  /** Locale to use */
+  locale: string
+  /** Translate function to use */
+  translate: (input: string) => string
 }
 
 /** Definition of a vector tile layer */
@@ -186,14 +195,7 @@ export default class Layer<LayerDesign> {
   }
 
   /** 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 {
+  getLegend(options: LegendOptions<LayerDesign>): ReactNode {
     return null
   }
 
@@ -325,4 +327,20 @@ export default class Layer<LayerDesign> {
       }
     })
   }
+
+  /** Get strings to be translated */
+  getTranslatableStrings(design: LayerDesign, schema: Schema): string[] {
+    return []
+  }
+}
+
+export interface LegendOptions<LayerDesign> {
+  design: LayerDesign
+  schema: Schema
+  name: string
+  dataSource: DataSource
+  locale: string
+  filters: JsonQLFilter[]
+  /** Translate function to use */
+  translate: (input: string) => string
 }

package/src/maps/LayerFactory.ts

@@ -14,36 +14,28 @@ export default class LayerFactory {
     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

@@ -1,10 +1,8 @@
-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 { Schema } from "@mwater/expressions"
 import { Axis } from "../axes/Axis"
 
 export interface LayerLegendComponentProps {
@@ -60,7 +58,7 @@ export default class LayerLegendComponent extends React.Component<LayerLegendCom
           return null
         }
 
-        const label = axisBuilder.formatCategory(this.props.axis, category)
+        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 }

package/src/maps/LayerSwitcherComponent.tsx

@@ -3,7 +3,11 @@ 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 }) {
+export function LayerSwitcherComponent(props: {
+  design: MapDesign
+  onDesignChange: (design: MapDesign) => void
+  translate: (input: string) => string
+}) {
   const [dropdownOpen, setDropdownOpen] = useState(false)
 
   const iconStyle: CSSProperties = {
@@ -45,7 +49,7 @@ export function LayerSwitcherComponent(props: { design: MapDesign; onDesignChang
     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}
+        &nbsp;{props.translate(lv.name)}
       </div>
     )
   }

package/src/maps/LeafletMapComponent.tsx

@@ -221,7 +221,9 @@ export default class LeafletMapComponent extends Component<Props> {
         lBounds = lBounds.pad(pad)
       }
 
-      this.map.fitBounds(lBounds, { animate: true })
+      if (lBounds.getEast() !== Infinity && lBounds.getWest() !== -Infinity && lBounds.getNorth() !== Infinity && lBounds.getSouth() !== -Infinity) {
+        this.map.fitBounds(lBounds, { animate: true })
+      }
     } else {
       // Fit world doesn't work sometimes. Make sure that entire left-right is included
       this.map.fitBounds([

package/src/maps/LegendComponent.tsx

@@ -15,6 +15,7 @@ export default function LegendComponent(props: {
   /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
   filters: JsonQLFilter[]
   locale: string
+  translate: (input: string) => string
   onHide: () => void
 }) {
   const legendItems = _.compact(
@@ -53,7 +54,15 @@ export default function LegendComponent(props: {
 
       return {
         key: layerView.id,
-        legend: layer.getLegend(design, props.schema, layerView.name, props.dataSource, props.locale, props.filters)
+        legend: layer.getLegend({
+          design,
+          schema: props.schema,
+          name: layerView.name,
+          dataSource: props.dataSource,
+          locale: props.locale,
+          filters: props.filters,
+          translate: props.translate
+        })
       }
     })
   )

package/src/maps/MWaterServerLayer.ts

@@ -1,5 +1,5 @@
 import $ from "jquery"
-import Layer from "./Layer"
+import Layer, { LegendOptions } from "./Layer"
 import React from "react"
 import { Schema } from "@mwater/expressions"
 const R = React.createElement
@@ -46,11 +46,11 @@ export default class MWaterServerLayer extends Layer<any> {
 
   // Get the legend to be optionally displayed on the map. Returns
   // a React element
-  getLegend(design: any, schema: Schema) {
+  getLegend(options: LegendOptions<any>) {
     // Create loading legend component
     // TODO hardcoded
     const apiUrl = "https://api.mwater.co/v3/"
-    return React.createElement(LoadingLegend, { url: `${apiUrl}maps/legend?type=${design.type}` })
+    return React.createElement(LoadingLegend, { url: `${apiUrl}maps/legend?type=${options.design.type}` })
   }
 
   // Get a list of table ids that can be filtered on

package/src/maps/MapComponent.ts

@@ -133,7 +133,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
               onClick: this.handleUndo
             },
             R("span", { className: "fas fa-caret-left" }),
-            R("span", { className: "hide-600px" }, T` Undo`)
+            R("span", { className: "hide-600px" }, " ", T`Undo`)
           ),
           " ",
           R(
@@ -144,7 +144,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
               onClick: this.handleRedo
             },
             R("span", { className: "fas fa-caret-right" }),
-            R("span", { className: "hide-600px" }, T` Redo`)
+            R("span", { className: "hide-600px" }, " ", T`Redo`)
           )
         ]
         : undefined,
@@ -153,7 +153,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
         "a",
         { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
         R("span", { className: "fa fa-filter" }),
-        R("span", { className: "hide-600px" }, T` Show Quickfilters`)
+        R("span", { className: "hide-600px" }, " ", T`Show Quickfilters`)
       )
       : undefined,
       this.props.extraTitleButtonsElem,

package/src/maps/MapDesign.ts

@@ -25,6 +25,9 @@ export interface MapDesign {
   /** true to automatically zoom to bounds of data */
   autoBounds?: boolean
 
+  /** True to animate zoom to bounds of data. Default is true */
+  animateAutoBounds?: boolean
+
   /** maximum allowed zoom level */
   maxZoom?: number | null