@mwater/visualization 5.5.0 → 5.6.1

package/src/maps/MarkersLayerDesign.ts

@@ -16,8 +16,14 @@ export interface MarkersLayerDesign {
 
     /** Color axis (to split into series based on a color) */
     color?: Axis
+
+    /** Label expression to display on/near markers (points only) */
+    label?: Axis
   }
 
+  /** Position of label relative to marker. Default "bottom" */
+  labelPosition?: "top" | "bottom" | "left" | "right"
+
   /** Optional logical expression to filter by */
   filter?: Expr
 
@@ -43,7 +49,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,436 @@
+import _ from "lodash"
+import React from "react"
+import { FilterExprComponent } from "@mwater/expressions-ui"
+import { DataSource, Expr, 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"
+import { produce } from "immer"
+import { Axis } from "../axes/Axis"
+import { JsonQLFilter } from "../JsonQLFilter"
+
+export interface MarkersLayerDesignerComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** Design of the marker layer */
+  design: MarkersLayerDesign
+  /** Called with new design */
+  onDesignChange: (design: MarkersLayerDesign) => void
+  filters?: JsonQLFilter[]
+}
+
+/** Designer for a markers layer */
+export default class MarkersLayerDesignerComponent extends React.Component<MarkersLayerDesignerComponentProps> {
+  handleTableChange = (table: string) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.table = table
+    }))
+  }
+  handleGeometryAxisChange = (axis: Axis) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.axes.geometry = axis
+    }))
+  }
+  handleColorAxisChange = (axis: Axis | null) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.axes.color = axis ?? undefined
+    }))
+  }
+  handleFilterChange = (expr: Expr) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.filter = expr
+    }))
+  }
+  handleColorChange = (color: string) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.color = color
+    }))
+  }
+  handlePolygonBorderColorChange = (polygonBorderColor: string) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.polygonBorderColor = polygonBorderColor
+    }))
+  }
+  handlePolygonFillOpacityChange = (polygonFillOpacity: number) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.polygonFillOpacity = polygonFillOpacity / 100
+    }))
+  }
+  handleSymbolChange = (symbol: string) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.symbol = symbol
+    }))
+  }
+  handleMarkerSizeChange = (markerSize: number) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.markerSize = markerSize
+    }))
+  }
+  handleLineWidthChange = (lineWidth: number) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.lineWidth = lineWidth
+    }))
+  }
+  handleLabelAxisChange = (axis: Axis | null) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.axes.label = axis ?? undefined
+    }))
+  }
+  handleLabelPositionChange = (labelPosition: "top" | "bottom" | "left" | "right") => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.labelPosition = labelPosition
+    }))
+  }
+
+  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>
+    )
+  }
+
+  renderLabelAxis() {
+    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 className="mb-3">
+        <label className="text-muted"><span className="fas fa-tag" /> {T`Label (points only)`}</label>
+        <AxisComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          table={this.props.design.table}
+          types={["text", "number"]}
+          aggrNeed="none"
+          value={this.props.design.axes.label}
+          onChange={this.handleLabelAxisChange}
+          filters={filters}
+        />
+      </div>
+    )
+  }
+
+  renderLabelPosition() {
+    // Only show if label axis is set
+    if (!this.props.design.axes.label) {
+      return
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Label Position`}</label>
+        <ui.Select
+          value={this.props.design.labelPosition || "bottom"}
+          options={[
+            { value: "top", label: T`Top` },
+            { value: "bottom", label: T`Bottom` },
+            { value: "left", label: T`Left` },
+            { value: "right", label: T`Right` }
+          ]}
+          onChange={this.handleLabelPositionChange}
+        />
+      </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()}
+        {this.renderLabelAxis()}
+        {this.renderLabelPosition()}
+        <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/ServerMapDataSource.ts

@@ -126,25 +126,6 @@ class ServerLayerDataSource implements MapLayerDataSource {
     return this.createUrl(filters, "png")
   }
 
-  // Get the url for the interactivity tiles with the specified filters applied
-  // Called with (design, filters) where design is the design of the layer and filters are filters to apply. Returns URL
-  getUtfGridUrl(design: any, filters: JsonQLFilter[]) {
-    // Handle special cases
-    if (this.options.layerView.type === "MWaterServer") {
-      return this.createLegacyUrl(design, "grid.json", filters)
-    }
-
-    // Create layer
-    const layer = LayerFactory.createLayer(this.options.layerView.type)
-
-    // If layer has tiles url directly available
-    if (layer.getLayerDefinitionType() === "TileUrl") {
-      return layer.getUtfGridUrl(this.options.layerView.design, filters)
-    }
-
-    return this.createUrl(filters, "grid.json")
-  }
-
   /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
    * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
    */
@@ -214,12 +195,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 +203,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}`
     }

package/src/maps/SwitchableTileUrlLayer.tsx

@@ -68,17 +68,6 @@ export default class SwitchableTileUrlLayer extends Layer<SwitchableTileUrlLayer
     return option.tileUrl || null
   }
 
-  /** Gets the utf grid url for definition type "TileUrl" */
-  getUtfGridUrl(design: SwitchableTileUrlLayerDesign, filters: JsonQLFilter[]): string | null {
-    // Find active option
-    const option = design.options.find((d) => d.id === design.activeOption)
-    if (!option) {
-      return null
-    }
-
-    return option.utfGridUrl || null
-  }
-
   getLegend(options: LegendOptions<SwitchableTileUrlLayerDesign>): ReactNode {
     const { design, name } = options
     // Find active option

package/src/maps/TileUrlLayer.tsx

@@ -31,7 +31,6 @@ Design is:
   legendUrl: 
 */
 export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
-  // Gets the type of layer definition ("JsonQLCss"/"TileUrl")
   getLayerDefinitionType(): "TileUrl" {
     return "TileUrl"
   }
@@ -41,11 +40,6 @@ export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
     return design.tileUrl
   }
 
-  // Gets the utf grid url for definition type "TileUrl"
-  getUtfGridUrl(design: any, filters: any) {
-    return null
-  }
-
   // Get min and max zoom levels
   getMinZoom(design: any) {
     return design.minZoom

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 React, { CSSProperties, ReactNode, useCallback, 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 {
@@ -77,7 +75,18 @@ export function VectorMapViewComponent(props: VectorMapViewComponentProps) {
   const locale = props.locale || props.design.locale || "en"
 
   // Translate function to use 
-  const translate = props.translate || ((input: string) => input)
+  const translate = useCallback((input: string) => {
+    // Use passed in translate function if present
+    if (props.translate) {
+      return props.translate(input)
+    }
+    // If locale is the same as the design locale, don't translate
+    if (locale === props.design.locale) {
+      return input
+    }
+    // Otherwise, use translation from design
+    return props.design.translations?.[locale]?.[input] ?? input
+  }, [props.translate, props.design.translations, props.design.locale, locale])
 
   // Last feature that mouse entered
   const lastFeature = useRef<string>()
@@ -278,18 +287,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
           }