@mwater/visualization 5.4.1 → 5.4.2

package/src/maps/MarkersLayerDesign.ts

@@ -1,54 +1,57 @@
 import { Expr } from "@mwater/expressions"
 import { Axis } from "../axes/Axis"
 import { HoverOverItem } from "./maps"
+import { LayoutBlock } from "../layouts/blocks/blockUtils"
+import { PopupFilterJoins } from "./PopupFilterJoinsUtils"
 
 /** Design for a markers layer */
 export interface MarkersLayerDesign {
   /** table to get data from */
   table: string
 
-  /** axes (see below) */
+  /** Axes */
   axes: {
-    /** where to place markers */
+    /** Where to place markers */
     geometry: Axis
 
-    /** color axis (to split into series based on a color) */
+    /** Color axis (to split into series based on a color) */
     color?: Axis
   }
 
-  /** optional logical expression to filter by */
+  /** Optional logical expression to filter by */
   filter?: Expr
 
-  /** color of layer (e.g. #FF8800). Color axis overrides */
+  /** 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 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. */
+  /** Size in pixels of the markers. Default 10. */
   markerSize?: number
 
-  /** size of the lines in pixels. Default 3 */
+  /** Size of the lines in pixels. Default 3 */
   lineWidth?: number
 
-  /** opacity of polygon fill (0-1). Default is 0.25 */
+  /** Opacity of polygon fill (0-1). Default is 0.25 */
   polygonFillOpacity?: number
 
-  /** color of polygon borders (defaults to color of fill) */
+  /** 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 }
+  /** Contains items: which is BlocksLayoutManager items. Will be displayed when the marker is clicked */
+  popup: { items: LayoutBlock }
 
+  /** Contains items to display when hovering over the layer */
   hoverOver: { items: HoverOverItem[] }
 
-  /** customizable filtering for popup. See PopupFilterJoins.md TODO */
-  popupFilterJoins: any
+  /** Customizable filtering for popup */
+  popupFilterJoins: PopupFilterJoins
 
-  /** minimum zoom level */
+  /** Minimum zoom level */
   minZoom?: number
 
-  /** maximum zoom level */
+  /** Maximum zoom level */
   maxZoom?: number
 
   /** @deprecated LEGACY sublayers array that contains above design */

package/src/maps/PopupFilterJoinsUtils.ts

@@ -3,7 +3,6 @@ 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.
@@ -11,8 +10,13 @@ import { JsonQLFilter } from ".."
  * 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 type PopupFilterJoins = { [tableId: string]: Expr }
+
+/**
+ * Utilities for popup filter joins.
+ */
 export function createPopupFilters(
-  popupFilterJoins: { [tableId: string]: Expr },
+  popupFilterJoins: PopupFilterJoins,
   schema: Schema,
   layerTable: any,
   rowId: any,

package/src/maps/RasterMapViewComponent.ts

@@ -10,53 +10,12 @@ import { LayerSwitcherComponent } from "./LayerSwitcherComponent"
 import { default as LegendComponent } from "./LegendComponent"
 import { JsonQLFilter } from "../JsonQLFilter"
 import { MapDesign } from "./MapDesign"
-import { MapDataSource } from "./MapDataSource"
-import { MapScope } from "./MapUtils"
 import { LocaleContext } from "@mwater/expressions-ui"
+import { MapViewComponentProps } from "./MapViewComponent"
 
-export interface RasterMapViewComponentProps {
-  schema: Schema
-  dataSource: DataSource
-  mapDataSource: MapDataSource
-
-  design: MapDesign
-  onDesignChange?: (design: MapDesign) => void
-
-  /** Width in pixels */
-  width: number
-
-  /** Height in pixels */
-  height: number
-
-  /** Called with (tableId, rowId) when item is clicked */
-  onRowClick?: (tableId: string, rowId: any) => void
-
-  /** Extra filters to apply to view */
-  extraFilters?: JsonQLFilter[]
-
-  /** scope of the map (when a layer self-selects a particular scope) */
-  scope?: MapScope
-
-  /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
-  onScopeChange?: (scope: MapScope | null) => void
-
-  /** Whether the map be draggable with mouse/touch or not. Default true */
-  dragging?: boolean
-
-  /** Whether the map can be zoomed by touch-dragging with two fingers. Default true */
-  touchZoom?: boolean
-
-  /** Whether the map can be zoomed by using the mouse wheel. Default true */
-  scrollWheelZoom?: boolean
-
-  /** Whether changes to zoom level should be persisted. Default false  */
-  zoomLocked?: boolean
-
+export interface RasterMapViewComponentProps extends MapViewComponentProps {
   /** Called with underlying leaflet map component */
   leafletMapRef?: (map: LeafletMapComponent | null) => void
-
-  /** Whether to disable interaction or not. Default false (implemented for printing to reduce number of tiles request) */
-  disableInteraction?: boolean
 }
 
 /** Component that displays just the map, using raster tile technology */
@@ -154,13 +113,16 @@ export default class RasterMapViewComponent extends React.Component<
     const design = layer.cleanDesign(layerView.design, this.props.schema)
 
     // Handle click of layer
+    // TODO not translated
     const results = layer.onGridClick(ev, {
       design,
       schema: this.props.schema,
       dataSource: this.props.dataSource,
       layerDataSource: this.props.mapDataSource.getLayerDataSource(layerViewId),
       scopeData: this.props.scope?.data?.layerViewId === layerViewId ? this.props.scope!.data.data : undefined,
-      filters: this.getCompiledFilters()
+      filters: this.getCompiledFilters(),
+      locale: this.context,
+      translate: (input: string) => input
     })
 
     if (!results) {
@@ -216,6 +178,7 @@ export default class RasterMapViewComponent extends React.Component<
         filters: this.getCompiledFilters(),
         dataSource: this.props.dataSource,
         locale: this.context,
+        translate: this.props.translate ?? (() => ""),
         onHide: () => this.setState({ legendHidden: true }),
         zoom: null
       })
@@ -322,7 +285,8 @@ export default class RasterMapViewComponent extends React.Component<
           this.props.onDesignChange && this.props.design.showLayerSwitcher
             ? R(LayerSwitcherComponent, {
                 design: this.props.design,
-                onDesignChange: this.props.onDesignChange
+                onDesignChange: this.props.onDesignChange,
+                translate: this.props.translate ?? (() => "")
               })
             : undefined
         )

package/src/maps/ServerMapDataSource.ts

@@ -184,8 +184,8 @@ class ServerLayerDataSource implements MapLayerDataSource {
       throw new Error("Error getting tiles token")
     }
     const { token, expires } = await response.json()
-
-    return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires }
+    // Client isn't necessary, but allows tracking of usage easier
+    return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}&client=${this.options.client ?? ""}`, expires }
   }
 
   // Gets widget data source for a popup widget

package/src/maps/SwitchableTileUrlLayer.tsx

@@ -1,8 +1,8 @@
 import _ from "lodash"
-import Layer from "./Layer"
+import Layer, { LegendOptions } from "./Layer"
 import { LocalizedString, Schema, DataSource } from "@mwater/expressions"
 import { JsonQLFilter } from "../index"
-import React from "react"
+import React, { ReactNode } from "react"
 import { HtmlUrlLegend } from "./HtmlUrlLegend"
 
 /**
@@ -79,14 +79,8 @@ export default class SwitchableTileUrlLayer extends Layer<SwitchableTileUrlLayer
     return option.utfGridUrl || null
   }
 
-  getLegend(
-    design: SwitchableTileUrlLayerDesign,
-    schema: Schema,
-    name: string,
-    dataSource: DataSource,
-    locale: string,
-    filters: JsonQLFilter[]
-  ) {
+  getLegend(options: LegendOptions<SwitchableTileUrlLayerDesign>): ReactNode {
+    const { design, name } = options
     // Find active option
     const option = design.options.find((d) => d.id === design.activeOption)
     if (!option || !option.legendUrl) {

package/src/maps/TileUrlLayer.tsx

@@ -1,8 +1,8 @@
 import _ from "lodash"
-import React from "react"
+import React, { ReactNode } from "react"
 const R = React.createElement
 
-import Layer from "./Layer"
+import Layer, { LegendOptions } from "./Layer"
 import { DataSource, ExprCompiler, Schema } from "@mwater/expressions"
 import { JsonQLFilter } from "../JsonQLFilter"
 import { HtmlUrlLegend } from "./HtmlUrlLegend"
@@ -64,14 +64,8 @@ export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
     return this.validateDesign(this.cleanDesign(design, schema), schema) != null
   }
 
-  getLegend(
-    design: TileUrlLayerDesign,
-    schema: Schema,
-    name: string,
-    dataSource: DataSource,
-    locale: string,
-    filters: JsonQLFilter[]
-  ) {
+  getLegend(options: LegendOptions<TileUrlLayerDesign>): ReactNode {
+    const { design } = options
     // Find active option
     if (!design.legendUrl) {
       return null

package/src/maps/VectorMapViewComponent.tsx

@@ -26,57 +26,17 @@ import {
   useStyleMap,
   useVectorMap
 } from "./vectorMaps"
+import { MapViewComponentProps } from "./MapViewComponent"
 
-/** Component that displays just the map, using vector tile technology */
-export function VectorMapViewComponent(props: {
-  schema: Schema
-  dataSource: DataSource
-  mapDataSource: MapDataSource
-
-  design: MapDesign
-  onDesignChange?: (design: MapDesign) => void
-
-  /** Width in pixels */
-  width: number
-
-  /** Height in pixels */
-  height: number
-
-  /** Called with (tableId, rowId) when item is clicked */
-  onRowClick?: (tableId: string, rowId: any) => void
-
-  /** Extra filters to apply to view */
-  extraFilters?: JsonQLFilter[]
-
-  /** scope of the map (when a layer self-selects a particular scope) */
-  scope?: MapScope
-
-  /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
-  onScopeChange?: (scope: MapScope | null) => void
-
-  /** Whether the map be draggable with mouse/touch or not. Default true */
-  dragging?: boolean
-
-  /** Whether the map can be zoomed by touch-dragging with two fingers. Default true */
-  touchZoom?: boolean
-
-  /** Whether the map can be zoomed by using the mouse wheel. Default true */
-  scrollWheelZoom?: boolean
-
-  /** Whether changes to zoom level should be persisted. Default false  */
-  zoomLocked?: boolean
-
-  /** Locale to use. Overrides map design locale */
-  locale?: string
-
-  /** Increment to force refresh */
-  refreshTrigger?: number
-
+export interface VectorMapViewComponentProps extends MapViewComponentProps {
   /** Optional callback that gets updated MapLibre map each render. Used to allow
    * external zooming/panning.
    */
   onMapUpdate?: (map: maplibregl.Map) => void
-}) {
+}
+
+/** Component that displays just the map, using vector tile technology */
+export function VectorMapViewComponent(props: VectorMapViewComponentProps) {
   const [mapDiv, setMapDiv] = useState<HTMLDivElement | null>(null)
 
   /** Last published bounds, to avoid recentering when self-changed bounds */
@@ -113,6 +73,12 @@ export function VectorMapViewComponent(props: {
     initialLegendDisplay == "closed" || (props.width < 500 && initialLegendDisplay == "closedIfSmall")
   )
 
+  // Locale to use
+  const locale = props.locale || props.design.locale || "en"
+
+  // Translate function to use TODO
+  const translate = props.translate || ((input: string) => input)
+
   // Last feature that mouse entered
   const lastFeature = useRef<string>()
 
@@ -145,11 +111,11 @@ export function VectorMapViewComponent(props: {
     const layer = LayerFactory.createLayer(layerView.type)
 
     // Clean design (prevent ever displaying invalid/legacy designs)
-    const design = layer.cleanDesign(layerView.design, props.schema)
+    const layerDesign = layer.cleanDesign(layerView.design, props.schema)
 
     // Handle click of layer
     const results = layer.onGridHoverOver(ev, {
-      design: design,
+      design: layerDesign,
       schema: props.schema,
       dataSource: props.dataSource,
       layerDataSource: props.mapDataSource.getLayerDataSource(layerViewId),
@@ -157,7 +123,9 @@ export function VectorMapViewComponent(props: {
         props.scope && props.scope.data && props.scope.data.layerViewId == layerViewId
           ? props.scope.data.data
           : undefined,
-      filters: getCompiledFilters()
+      filters: getCompiledFilters(),
+      locale: locale,
+      translate: translate
     })
 
     if (!results) {
@@ -191,7 +159,9 @@ export function VectorMapViewComponent(props: {
         props.scope && props.scope.data && props.scope.data.layerViewId == layerViewId
           ? props.scope.data.data
           : undefined,
-      filters: getCompiledFilters()
+      filters: getCompiledFilters(),
+      locale: locale,
+      translate: translate
     })
 
     if (!results) {
@@ -505,7 +475,10 @@ export function VectorMapViewComponent(props: {
       setBusy(b => b - 1)
 
       if (bounds) {
-        map!.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 30, duration: 2500 })
+        map!.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], {
+          padding: 30,
+          duration: (props.design.animateAutoBounds ?? true) ? 2500 : 0
+        })
 
         // Also record if editable as part of bounds
         setBounds(bounds)
@@ -590,7 +563,6 @@ export function VectorMapViewComponent(props: {
       return
     }
 
-
     const layers = layerClickHandlers.map(clickHandler => clickHandler.mapLayerId)
     
     const onEnter = (ev: MapLayerMouseEvent) => {
@@ -634,7 +606,8 @@ export function VectorMapViewComponent(props: {
           filters={getCompiledFilters()}
           zoom={map ? map.getZoom() : null}
           dataSource={props.dataSource}
-          locale={props.locale || props.design.locale || "en"}
+          locale={locale}
+          translate={translate}
           onHide={() => setLegendHidden(true)}
         />
       )
@@ -676,7 +649,7 @@ export function VectorMapViewComponent(props: {
       maxWidth: 250
     }
 
-    return <div style={style}>{hoverContents ?? "asdksjdbfskajf"}</div>
+    return <div style={style}>{hoverContents}</div>
   }
 
   // Overflow hidden because of problem of exceeding div
@@ -687,7 +660,7 @@ export function VectorMapViewComponent(props: {
       <div style={{ position: "absolute", maxWidth: 250, top: 10, right: 10, zIndex: 999, userSelect: "none" }}>
         <div style={{ display: "flex", gap: 6, position: "relative", flexDirection: "column", alignItems: "right" }}>
           {props.onDesignChange != null && props.design.showLayerSwitcher ? (
-            <LayerSwitcherComponent design={props.design} onDesignChange={props.onDesignChange} />
+            <LayerSwitcherComponent design={props.design} onDesignChange={props.onDesignChange} translate={translate} />
           ) : null}
           {renderHoverContent()}
         </div>

package/src/maps/maps.ts

@@ -31,8 +31,11 @@ export type OnGridHoverResults = {
   hoverOver?: React.ReactElement<{}>
 } | null
 
+/** Item in hover over */
 export interface HoverOverItem {
   id: string
   label: string
   value?: Expr
+  /** See valueFormatter.ts */
+  format?: string
 }

package/src/quickfilter/QuickfiltersComponent.ts

@@ -38,6 +38,9 @@ export interface QuickfiltersComponentProps {
 
   /** Called when user hides the quickfilter bar */
   onHide?: () => void
+
+  /** Translate function to use for display */
+  translate?: (input: string) => string
 }
 
 /** Displays quick filters and allows their value to be modified */
@@ -52,6 +55,9 @@ export default class QuickfiltersComponent extends React.Component<QuickfiltersC
     let values = this.props.values || []
     let itemValue = values[index]
 
+    // Translate label
+    const label = this.props.translate?.(item.label) ?? item.label
+
     // Clean expression first
     const expr = new ExprCleaner(this.props.schema).cleanExpr(item.expr)
 
@@ -106,7 +112,7 @@ export default class QuickfiltersComponent extends React.Component<QuickfiltersC
     if (["enum", "enumset"].includes(type)) {
       return R(EnumQuickfilterComponent, {
         key: JSON.stringify(item),
-        label: item.label,
+        label,
         schema: this.props.schema,
         options: new ExprUtils(this.props.schema).getExprEnumValues(expr)!,
         value: itemValue,
@@ -119,7 +125,7 @@ export default class QuickfiltersComponent extends React.Component<QuickfiltersC
       return R(TextQuickfilterComponent, {
         key: JSON.stringify(item),
         index,
-        label: item.label,
+        label,
         expr,
         schema: this.props.schema,
         quickfiltersDataSource: this.props.quickfiltersDataSource,
@@ -133,7 +139,7 @@ export default class QuickfiltersComponent extends React.Component<QuickfiltersC
     if (["date", "datetime"].includes(type)) {
       return R(DateQuickfilterComponent, {
         key: JSON.stringify(item),
-        label: item.label,
+        label,
         expr,
         schema: this.props.schema,
         value: itemValue,
@@ -145,7 +151,7 @@ export default class QuickfiltersComponent extends React.Component<QuickfiltersC
       return R(IdArrayQuickfilterComponent, {
         key: JSON.stringify(item),
         index,
-        label: item.label,
+        label,
         expr,
         schema: this.props.schema,
         dataSource: this.props.dataSource,
@@ -160,7 +166,7 @@ export default class QuickfiltersComponent extends React.Component<QuickfiltersC
       return R(TextArrayQuickfilterComponent, {
         key: JSON.stringify(item),
         index,
-        label: item.label,
+        label,
         expr,
         schema: this.props.schema,
         quickfiltersDataSource: this.props.quickfiltersDataSource,
@@ -239,7 +245,7 @@ class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentP
 
   renderSingleSelect(options: any[]) {
     return R(ReactSelect, {
-      placeholder: "All",
+      placeholder: T`All`,
       value: _.findWhere(options, { value: this.props.value }) || null,
       options,
       isClearable: true,
@@ -258,7 +264,7 @@ class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentP
 
   renderMultiSelect(options: any[]) {
     return R(ReactSelect, {
-      placeholder: "All",
+      placeholder: T`All`,
       value: _.map(this.props.value, (v) => _.find(options, (o) => o.value === v)),
       isClearable: true,
       isMulti: true,

package/src/quickfilter/QuickfiltersDesignComponent.tsx

@@ -117,7 +117,7 @@ export default class QuickfiltersDesignComponent extends React.Component<Quickfi
         ? R(
             "button",
             { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd },
-            R("span", { className: "fas fa-plus" }),
+            R("span", { className: "fas fa-plus me-1" }),
             T`Add Quick Filter`
           )
         : undefined
@@ -175,83 +175,65 @@ class QuickfilterDesignComponent extends React.Component<
   handleMultiChange = (multi: any) => {
     return this.props.onChange(update(this.props.design, { multi: { $set: multi } }))
   }
-
   render() {
     // Determine type of expression
     const exprType = new ExprUtils(this.props.schema).getExprType(this.props.design.expr)
 
-    return R(
-      "div", {},
-      R(
-        "div",
-        { className: "mb-3 mt-1", key: "table" },
-        R("label", { className: "text-muted" }, T`Data Source`),
-        R(ui.Select, {
-          value: this.state.table,
-          options: _.map(this.props.tables, (table) => ({
-            value: table,
-            label: ExprUtils.localizeString(this.props.schema.getTable(table)!.name)
-          })),
-          onChange: this.handleTableChange,
-          nullLabel: T`Select...`
-        })
-      ),
-
-      R(
-        "div",
-        { className: "mb-3", key: "expr" },
-        R("label", { className: "text-muted" }, T`Filter By`),
-        R(
-          "div",
-          null,
-          R(ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.state.table,
-            value: this.props.design.expr,
-            onChange: this.handleExprChange,
-            types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"],
-          })
-        )
-      ),
-
-      this.props.design.expr
-        ? R(
-            "div",
-            { className: "mb-3", key: "label" },
-            R("label", { className: "text-muted" }, T`Label`),
-            R("input", {
-              type: "text",
-              className: "form-control form-control-sm",
-              value: this.props.design.label || "",
-              onChange: this.handleLabelChange,
-              placeholder: T`Optional Label`
-            })
-          )
-        : undefined,
-
-      this.props.mergeable
-        ? R(
-            ui.Checkbox,
-            {
-              value: this.props.design.merged,
-              onChange: this.handleMergedChange
-            },
-            T`Merge with previous quickfilter `,
-            R("span", { className: "text-muted" }, T`- displays as one single control that filters both`)
-          )
-        : undefined,
-
-      ["enum", "text", "enumset", "id[]", "text[]"].includes(exprType!)
-        ? R(
-            ui.Checkbox,
-            {
-              value: this.props.design.multi,
-              onChange: this.handleMultiChange
-            },
-            T`Allow multiple selections`
-          )
-        : undefined
+    return (
+      <div>
+        <div className="mb-3 mt-1" key="table">
+          <label className="text-muted">{T`Data Source`}</label>
+          <ui.Select
+            value={this.state.table}
+            options={_.map(this.props.tables, (table) => ({
+              value: table,
+              label: ExprUtils.localizeString(this.props.schema.getTable(table)!.name)
+            }))}
+            onChange={this.handleTableChange}
+            nullLabel={T`Select...`}
+          />
+        </div>
+
+        <div className="mb-3" key="expr">
+          <label className="text-muted">{T`Filter By`}</label>
+          <div>
+            <ExprComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              table={this.state.table}
+              value={this.props.design.expr}
+              onChange={this.handleExprChange}
+              types={["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"]}
+            />
+          </div>
+        </div>
+
+        {this.props.design.expr ? (
+          <div className="mb-3" key="label">
+            <label className="text-muted">{T`Label`}</label>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              value={this.props.design.label || ""}
+              onChange={this.handleLabelChange}
+              placeholder={T`Optional Label`}
+            />
+          </div>
+        ) : undefined}
+
+        {this.props.mergeable ? (
+          <ui.Checkbox value={this.props.design.merged} onChange={this.handleMergedChange}>
+            {T`Merge with previous quickfilter `}
+            <span className="text-muted">{`- ${T`displays as one single control that filters both`}`}</span>
+          </ui.Checkbox>
+        ) : undefined}
+
+        {["enum", "text", "enumset", "id[]", "text[]"].includes(exprType!) ? (
+          <ui.Checkbox value={this.props.design.multi} onChange={this.handleMultiChange}>
+            {T`Allow multiple selections`}
+          </ui.Checkbox>
+        ) : undefined}
+      </div>
     )
   }
 }