@mwater/visualization 5.5.0 → 5.6.0

package/src/maps/MarkersLayer.ts

@@ -115,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",
@@ -123,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"])
       })
@@ -736,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
@@ -804,7 +822,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
   }
 
   /** 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 
+   * 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: {
@@ -825,7 +843,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
       filters: options.filters,
       schema: options.schema,
       dataSource: options.dataSource,
-      hoverOverItems: options.design.hoverOver.items,
+      hoverOverItems: options.design.hoverOver!.items,
     })
   }
 }
@@ -971,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/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}`
     }

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 {
@@ -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
           }