@mwater/visualization 5.5.0 → 5.6.1

package/src/maps/symbols/sdf-ize.sh

@@ -0,0 +1,93 @@
+#!/bin/bash
+
+
+# https://stackoverflow.com/questions/63299999/how-can-i-create-sdf-icons-used-in-mapbox-from-png#63314688
+
+set -o pipefail
+set -exu
+
+cd "$(dirname "$0")"
+
+MKTEMP="$(which gmktemp || which mktemp)"
+TMPDIR1="$("$MKTEMP" -d)"
+TMPDIR2="$("$MKTEMP" -d)"
+
+trap "rm -rf '$TMPDIR1' '$TMPDIR2' ; pkill -P '$$'" EXIT
+
+declare -a IMGFILES
+
+IMGFILES=(
+asterisk.png
+ban.png
+beer.png
+bell.png
+bolt.png
+building.png
+bullseye.png
+bus.png
+caret-up.png
+certificate.png
+check-circle.png
+check.png
+chevron-circle-down.png
+chevron-circle-up.png
+cloud-rain.png
+cloud.png
+comment.png
+crosshairs.png
+dot-circle-o.png
+exclamation-circle.png
+exclamation-triangle.png
+female.png
+file.png
+flag.png
+flask.png
+h-square.png
+home.png
+info-circle.png
+male.png
+medkit.png
+mobile.png
+plus-circle.png
+plus-square.png
+plus.png
+square.png
+star.png
+thumbs-down.png
+thumbs-up.png
+ticket.png
+times-circle.png
+times.png
+tint.png
+tree.png
+university.png
+usd.png
+user.png
+users.png
+wheelchair.png
+)
+
+SVGINDIR="$(realpath -e "../../../../../apps/mwater-server/lib/routes/maps/marker-symbols/font-awesome")"
+PNGOUTDIR="$(realpath "./font-awesome")"
+
+rm -rvf "$PNGOUTDIR"
+mkdir -pv "$PNGOUTDIR"
+
+which image-sdf || npm install -g image-sdf
+
+for IMGFILE in "${IMGFILES[@]}"
+do
+  BASENAME="$(basename "$IMGFILE" .png)"
+  nice magick "$SVGINDIR/$BASENAME.svg" -channel RGB -negate -size 2000x2000 "$TMPDIR1/$BASENAME.png"
+  image-sdf "$TMPDIR1/$BASENAME.png" --spread 32 --downscale 2 --color black --output "$TMPDIR2/$BASENAME.png" &
+done
+wait
+
+for IMGFILE in "$TMPDIR2"/*.png
+do
+  magick "$IMGFILE" -resize 20x20 "$PNGOUTDIR/$(basename "$IMGFILE")" &
+done
+wait
+
+cd "$PNGOUTDIR"
+identify ./*.png

package/src/maps/vectorMaps.tsx

@@ -7,6 +7,9 @@ import "maplibre-gl/dist/maplibre-gl.css"
 import "./VectorMapViewComponent.css"
 import React from "react"
 
+// Re-export maplibregl for consumers
+export { default as maplibregl } from "maplibre-gl"
+
 /** Set to true to enable printing by preserving the drawing buffer */
 let printingModeEnabled = false
 
@@ -29,11 +32,6 @@ export function getMapTilerApiKey(): string {
   return mapTilerApiKey
 }
 
-/** Check if vector maps are enabled by setting API key */
-export function areVectorMapsEnabled() {
-  return mapTilerApiKey !== ""
-}
-
 export type BaseLayer = "bing_road" | "bing_aerial" | "cartodb_positron" | "cartodb_dark_matter" | "blank"
 
 /** Loads a vector map, refreshing the WebGL context as needed */
@@ -43,8 +41,9 @@ export function useVectorMap(options: {
   scrollZoom?: boolean
   dragPan?: boolean
   touchZoomRotate?: boolean
+  padding?: number
 }) {
-  const { divRef, bounds, scrollZoom, dragPan, touchZoomRotate } = options
+  const { divRef, bounds, scrollZoom, dragPan, touchZoomRotate, padding } = options
 
   // Maplibre map
   const [map, setMap] = useState<maplibregl.Map>()
@@ -89,9 +88,8 @@ export function useVectorMap(options: {
     }
 
     try {
-      const m = new maplibregl.Map({
+      const mapConstructorOptions: maplibregl.MapOptions = {
         container: divRef,
-        bounds: bounds,
         scrollZoom: scrollZoom === false ? false : true,
         dragPan: dragPan === false ? false : true,
         touchZoomRotate: touchZoomRotate === false ? false : true,
@@ -102,13 +100,24 @@ export function useVectorMap(options: {
           layers: [],
           sources: {}
         },
-        // Prevent scrolling outside of world bounds
         maxBounds: [
           [-179.9, -85], // Southwest coordinates
           [179.9, 85] // Northeast coordinates
         ],
-        preserveDrawingBuffer: printingModeEnabled
-      })
+        // In maplibre-gl v5+, WebGL context options must be in canvasContextAttributes
+        canvasContextAttributes: {
+          preserveDrawingBuffer: printingModeEnabled
+        }
+      }
+
+      if (bounds) {
+        mapConstructorOptions.bounds = bounds
+        if (padding !== undefined) {
+          mapConstructorOptions.fitBoundsOptions = { padding }
+        }
+      }
+
+      const m = new maplibregl.Map(mapConstructorOptions)
 
       setHasWebGLContext(true)
 
@@ -135,10 +144,12 @@ export function useVectorMap(options: {
         // Check if known
         const mapSymbol = getMapSymbols().find((s) => s.value == ev.id)
         if (mapSymbol) {
-          m.loadImage(mapSymbol.url, (err: any, image: any) => {
-            if (image && !m.hasImage(mapSymbol.value)) {
-              m.addImage(mapSymbol.value, image, { sdf: true })
+          m.loadImage(mapSymbol.url).then((response) => {
+            if (response && response.data && !m.hasImage(mapSymbol.value)) {
+              m.addImage(mapSymbol.value, response.data, { sdf: true })
             }
+          }).catch((err) => {
+            console.error("Error loading map symbol:", err)
           })
         }
       })
@@ -240,9 +251,8 @@ export function useBaseStyle(baseLayer: BaseLayer) {
     } else if (baseLayer == "bing_road") {
       loadStyle(`https://api.maptiler.com/maps/streets-v2/style.json?key=${mapTilerApiKey}`)
     } else if (baseLayer == "bing_aerial") {
-      // Switched to Bing for superior aerial imagery
-      loadBingBasemap("AerialWithLabels", 1).then(setBaseStyle)
-      // loadStyle(`https://api.maptiler.com/maps/hybrid/style.json?key=${mapTilerApiKey}`)
+      // Stadia Maps
+      loadStyle("https://tiles.stadiamaps.com/styles/alidade_satellite.json?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d")
     } else if (baseLayer == "blank") {
       setBaseStyle({
         version: 8,
@@ -310,7 +320,10 @@ export function AttributionControl(props: {
   if (props.baseLayer == "bing_aerial") {
     return (
       <div className="newmap-attribution-control">
-        Copyright © 2022 Microsoft and its suppliers.
+        &copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>
+        &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a>
+        &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>
+        &copy; CNES, Distribution Airbus DS, &copy; Airbus DS, &copy; PlanetObserver (Contains Copernicus Data)
         {props.extraText ? " " + props.extraText : null}
       </div>
     )
@@ -338,10 +351,7 @@ export function VectorMapLogo(props: {
   }
 
   if (props.baseLayer == "bing_aerial") {
-    return <img
-      src="https://dev.virtualearth.net/Branding/logo_powered_by.png"
-      style={{ position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" }}
-    />
+    return null
   }
 
   return <img
@@ -350,36 +360,6 @@ export function VectorMapLogo(props: {
   />
 }
 
-async function loadBingBasemap(basemapType: "AerialWithLabels", opacity: number): Promise<maplibregl.StyleSpecification> {
-  // Load metadata
-  const bingApiKey = "Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU"
-
-  const metadata = await fetch(`https://dev.virtualearth.net/REST/v1/Imagery/Metadata/${basemapType}?key=${bingApiKey}`).then((response) => response.json())
-  const resource = metadata.resourceSets[0].resources[0]
-
-  return {
-    sources: {
-      "bing_raster": {
-        type: "raster",
-        tiles: resource.imageUrlSubdomains.map((subdomain: string) =>
-          resource.imageUrl.replace("{subdomain}", subdomain).replace("{culture}", "").replace("http:", "https:")),
-        tileSize: resource.imageHeight,
-      }
-    },
-    layers: [
-      {
-        id: "bing_raster",
-        type: "raster",
-        source: "bing_raster",
-        paint: {
-          "raster-opacity": opacity
-        }
-      }
-    ],
-    version: 8
-  }
-}
-
 /** Persists map bounds to local storage */
 export function usePersistedMapBounds(map: Map | undefined, localStorageKey: string) {
   const [bounds, setBounds] = useState<{ n: number, e: number, s: number, w: number } | null>(null)
@@ -421,4 +401,3 @@ export function usePersistedMapBounds(map: Map | undefined, localStorageKey: str
     }
   }, [map])
 }
-

package/src/mwater_table_selection/IndicatorsListComponent.tsx

@@ -6,7 +6,7 @@ import * as uiComponents from "../UIComponents"
 import { ExprUtils, Schema } from "@mwater/expressions"
 import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
 
-interface IndicatorsListComponentProps {
+export interface IndicatorsListComponentProps {
   /** Url to hit api */
   apiUrl: string
   /** Optional client */
@@ -31,7 +31,7 @@ interface IndicatorsListComponentState {
 export class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
   addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null
 
-  constructor(props: any) {
+  constructor(props: IndicatorsListComponentProps) {
     super(props)
     this.state = {
       indicators: null,
@@ -42,7 +42,7 @@ export class IndicatorsListComponent extends React.Component<IndicatorsListCompo
   componentDidMount() {
     // Get names and basic of forms
     const query: any = {}
-    query.fields = JSON.stringify({ "design.name": 1, "design.desc": 1, "design.recommended": 1, deprecated: 1 })
+    query.fields = JSON.stringify({ "design.name": 1, "design.desc": 1, "design.recommended": 1, deprecated: 1, "design.category": 1, "design.subcategory": 1, "design.code": 1, "design.organization": 1 })
     query.client = this.props.client
 
     // Get list of all indicator names
@@ -62,11 +62,7 @@ export class IndicatorsListComponent extends React.Component<IndicatorsListCompo
       )
 
       return this.setState({
-        indicators: _.map(indicators, (indicator) => ({
-          id: indicator._id,
-          name: ExprUtils.localizeString(indicator.design.name, T.locale),
-          desc: ExprUtils.localizeString(indicator.design.desc, T.locale)
-        }))
+        indicators: indicators
       })
     }).fail((xhr: any) => {
       return this.setState({ error: xhr.responseText })
@@ -102,25 +98,110 @@ export class IndicatorsListComponent extends React.Component<IndicatorsListCompo
     this.addIndicatorConfirmPopup!.show(tableId)
   }
 
-  render() {
-    let indicators
-    if (this.state.error) {
-      return <div className="alert alert-danger">{this.state.error}</div>
+  handleOpenIndicator = (id: string) => {
+    this.handleSelect("indicator_values:" + id)
+  }
+
+  // Render a simplified version of IndicatorListComponent from mwater-portal
+  renderIndicatorList(indicators: any[], searchText: string) {
+    // Filter indicators based on search text
+    let filteredIndicators = indicators
+    if (searchText) {
+      const searchTerms = searchText.toLowerCase().split(" ")
+      filteredIndicators = indicators.filter(indicator => {
+        const searchFields = [
+          ExprUtils.localizeString(indicator.design.name, T.locale),
+          indicator.design.code,
+          indicator.design.organization,
+          indicator.design.category,
+          indicator.design.subcategory
+        ]
+
+        return searchTerms.every(term =>
+          searchFields.some(field =>
+            field && field.toLowerCase().includes(term)
+          )
+        )
+      })
     }
 
-    // Filter indicators
-    if (this.state.search) {
-      const escapeRegExp = (s: any) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
+    // Split into recommended and all indicators
+    const recommendedIndicators = filteredIndicators.filter(indicator => indicator.design.recommended)
+    const otherIndicators = filteredIndicators.filter(indicator => !indicator.design.recommended)
 
-      const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i")
+    // Group by category
+    const groupByCategory = (indicators: any[]) => {
+      const categories: Record<string, any[]> = {}
 
-      indicators = _.filter(this.state.indicators || [], (indicator) => indicator.name.match(searchStringRegExp))
-    } else {
-      ;({ indicators } = this.state)
+      indicators.forEach(indicator => {
+        const category = indicator.design.category || T`Uncategorized`
+        if (!categories[category]) {
+          categories[category] = []
+        }
+        categories[category].push(indicator)
+      })
+
+      return categories
     }
 
-    // Remove if already included
-    indicators = _.filter(indicators || [], (f) => !(this.props.extraTables || []).includes(`indicator_values:${f.id}`))
+    const recommendedByCategory = groupByCategory(recommendedIndicators)
+    const otherByCategory = groupByCategory(otherIndicators)
+
+    return (
+      <div>
+        {recommendedIndicators.length > 0 && (
+          <div>
+            <h4>{T`Recommended Indicators`}</h4>
+            {_.map(recommendedByCategory, (categoryIndicators, category) => (
+              <div key={category}>
+                <h5>{category}</h5>
+                <table className="table table-hover">
+                  <tbody>
+                    {_.map(categoryIndicators, indicator => (
+                      <tr key={indicator._id} onClick={() => this.handleOpenIndicator(indicator._id)}>
+                        <td>
+                          <IndicatorListItemComponent
+                            indicator={indicator}
+                            onClick={() => this.handleOpenIndicator(indicator._id)}
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <h4>{T`All Indicators`}</h4>
+        {_.map(otherByCategory, (categoryIndicators, category) => (
+          <div key={category}>
+            <h5>{category}</h5>
+            <table className="table table-hover">
+              <tbody>
+                {_.map(categoryIndicators, indicator => (
+                  <tr key={indicator._id} onClick={() => this.handleOpenIndicator(indicator._id)}>
+                    <td>
+                      <IndicatorListItemComponent
+                        indicator={indicator}
+                        onClick={() => this.handleOpenIndicator(indicator._id)}
+                      />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  render() {
+    if (this.state.error) {
+      return <div className="alert alert-danger">{this.state.error}</div>
+    }
 
     let tables = _.filter(
       this.props.schema.getTables(),
@@ -142,14 +223,12 @@ export class IndicatorsListComponent extends React.Component<IndicatorsListCompo
         <label>{T`Included Indicators:`}</label>
         {tables.length > 0 ? (
           <uiComponents.OptionListComponent
-            items={_.map(tables, (table) => {
-              return {
-                name: ExprUtils.localizeString(table.name, T.locale),
-                desc: ExprUtils.localizeString(table.desc, T.locale),
-                onClick: this.handleSelect.bind(null, table.id),
-                onRemove: this.handleTableRemove.bind(null, table)
-              }
-            })}
+            items={_.map(tables, (table) => ({
+              name: ExprUtils.localizeString(table.name, T.locale),
+              desc: ExprUtils.localizeString(table.desc, T.locale),
+              onClick: () => this.handleSelect(table.id),
+              onRemove: () => this.handleTableRemove(table)
+            }))}
           />
         ) : (
           <div>{T`None`}</div>
@@ -161,7 +240,7 @@ export class IndicatorsListComponent extends React.Component<IndicatorsListCompo
         {!this.state.indicators || this.state.indicators.length === 0 ? (
           <div className="alert alert-info">
             <i className="fa fa-spinner fa-spin" />
-            &nbsp;{T`Loading...`}
+            {"\u00A0" + T`Loading...`}
           </div>
         ) : (
           <>
@@ -176,13 +255,7 @@ export class IndicatorsListComponent extends React.Component<IndicatorsListCompo
               onChange={(ev: any) => this.setState({ search: ev.target.value })}
             />
 
-            <uiComponents.OptionListComponent
-              items={_.map(indicators, (indicator) => ({
-                name: indicator.name,
-                desc: indicator.desc,
-                onClick: this.handleSelect.bind(null, "indicator_values:" + indicator.id)
-              }))}
-            />
+            {this.renderIndicatorList(this.state.indicators, this.state.search)}
           </>
         )}
       </div>
@@ -190,6 +263,7 @@ export class IndicatorsListComponent extends React.Component<IndicatorsListCompo
   }
 }
 
+
 interface AddIndicatorConfirmPopupComponentProps {
   schema: Schema
   /** Called with table selected */
@@ -281,3 +355,57 @@ are certain that you want to use the raw indicator table`}
     )
   }
 }
+
+// Single indicator item in a list
+// Local port of the class found in mwater-portal
+class IndicatorListItemComponent extends React.Component<{
+  indicator: any
+  onClick: any
+}> {
+
+  renderIcon() {
+    switch (this.props.indicator.type) {
+      case "expression":
+        // R 'i', className: "text-muted fa fa-fw fa-calculator"
+        return null
+      case "response":
+        // R 'i', className: "text-muted fa fa-fw fa-list-alt"
+        return null
+      case "set":
+        return (
+          <span className="fa-stack" style={{ paddingRight: 6 }}>
+            <i className="fa fa-th-list fa-stack-1x text-muted" />
+            <i className="fa fa-circle fa-stack-1x" style={{ color: "white", paddingLeft: 15 }} />
+            <i className="fa fa-check-circle fa-stack-1x text-primary" style={{ paddingLeft: 15 }} />
+          </span>
+        )
+    }
+    return null
+  }
+
+  render() {
+    return (
+      <div onClick={this.props.onClick} style={{ cursor: "pointer" }}>
+        <div key="name" style={{ fontWeight: "bold" }}>
+          {this.renderIcon()}
+          {ExprUtils.localizeString(this.props.indicator.design.name, T.locale)}
+          {this.props.indicator.design.code ? ` (${this.props.indicator.design.code})` : undefined}
+          {this.props.indicator.design.organization ? (
+            <span className="text-muted"> {T`by ${this.props.indicator.design.organization}`}</span>
+          ) : undefined}
+        </div>
+
+        <div key="desc" className="text-muted">
+          {ExprUtils.localizeString(this.props.indicator.design.desc, T.locale)}
+          {this.props.indicator.design.category
+            ? [
+              ` (${this.props.indicator.design.category}`,
+              this.props.indicator.design.subcategory ? `/${this.props.indicator.design.subcategory}` : undefined,
+              `)`
+            ]
+            : undefined}
+        </div>
+      </div>
+    )
+  }
+}

package/src/mwater_table_selection/MWaterCalculatedDataSourcesListComponent.tsx

@@ -0,0 +1,111 @@
+import _ from "lodash"
+import { Schema, ExprUtils } from "@mwater/expressions"
+import { useState, useEffect } from "react"
+import React from "react"
+import { OptionListComponent } from "../UIComponents"
+import { TextInput } from "@mwater/react-library/lib/bootstrap"
+
+interface MWaterCalculatedDataSourcesListComponentProps {
+  apiUrl: string
+  schema: Schema
+  client?: string
+  user?: string
+  onChange: (tableId: string | null) => void
+  extraTables: string[]
+  onExtraTableAdd: (tableId: string) => void
+  onExtraTableRemove: (tableId: string) => void
+  locale?: string
+}
+
+/**
+ * A list of calculated data sources that can be selected.
+ */
+export const MWaterCalculatedDataSourcesListComponent = (props: MWaterCalculatedDataSourcesListComponentProps) => {
+  const [calculatedSources, setCalculatedSources] = useState<CalculatedSource[]>()
+  const [search, setSearch] = useState<string | null>("")
+  const [extraTableNeeded, setExtraTableNeeded] = useState<string>()
+
+  useEffect(() => {
+    fetch(`${props.apiUrl}calculated_data_sources?client=${props.client || ""}`)
+      .then((response) => response.json())
+      .then((body: CalculatedSource[]) => {
+        // Filter out calculated data sources that have never been calculated
+        const calculatedSources = body.filter((s) => s.last_calculated)
+        
+        setCalculatedSources(
+          _.sortByAll(calculatedSources, [
+            (s) => (props.extraTables.some((t) => t == `calculated:${s._sid}`) ? 0 : 1),
+            (s) => ExprUtils.localizeString(s.name, props.locale)
+          ])
+        )
+      })
+  }, [])
+
+  useEffect(() => {
+    if (extraTableNeeded && props.schema.getTable(extraTableNeeded)) {
+      props.onChange(extraTableNeeded)
+    }
+  })
+
+  const selectTable = (source: CalculatedSource) => {
+    const qualifiedTableId = `calculated:${source._sid}`
+
+    if (props.schema.getTable(qualifiedTableId)) {
+      props.onChange(qualifiedTableId)
+      return
+    }
+
+    setExtraTableNeeded(qualifiedTableId)
+    props.onExtraTableAdd(qualifiedTableId)
+  }
+
+  const handleRemove = (source: CalculatedSource) => {
+    const match = props.extraTables.find((t) => t == `calculated:${source._sid}`)
+    if (match) {
+      if (confirm(T`Remove this table? Some widgets may not work correctly.`)) {
+        props.onChange(null)
+        props.onExtraTableRemove(match)
+      }
+    }
+  }
+
+  if (!calculatedSources || extraTableNeeded) {
+    return (
+      <div>
+        <i className="fa fa-spin fa-spinner" /> {T`Loading...`}
+      </div>
+    )
+  }
+
+  const renderCalculatedSources = () => {
+    const items = calculatedSources
+      .map((s) => {
+        const alreadyIncluded = props.extraTables.some((t) => t == `calculated:${s._sid}`)
+        return {
+          name: ExprUtils.localizeString(s.name, props.locale) || "",
+          desc: s.description ? ExprUtils.localizeString(s.description, props.locale) || "" : undefined,
+          onClick: () => selectTable(s),
+          onRemove: alreadyIncluded ? handleRemove.bind(null, s) : undefined
+        }
+      })
+      .filter((item) => !search || item.name.toLowerCase().includes(search.toLowerCase()))
+
+    return <OptionListComponent items={items} />
+  }
+
+  return (
+    <div>
+      <TextInput value={search} onChange={setSearch} placeholder={T`Search...`} searchIcon />
+      <br/>
+      {renderCalculatedSources()}
+    </div>
+  )
+}
+
+interface CalculatedSource {
+  _id: string
+  _sid: number
+  name: { _base: string; [code: string]: string }
+  description?: { _base: string; [code: string]: string }
+  last_calculated?: string
+}