@mwater/visualization 5.4.5 → 5.6.0

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

@@ -43,8 +43,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 +90,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 +102,21 @@ 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
-      })
+      }
+
+      if (bounds) {
+        mapConstructorOptions.bounds = bounds
+        if (padding !== undefined) {
+          mapConstructorOptions.fitBoundsOptions = { padding }
+        }
+      }
+
+      const m = new maplibregl.Map(mapConstructorOptions)
 
       setHasWebGLContext(true)
 
@@ -240,9 +248,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 +317,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 +348,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 +357,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 +398,3 @@ export function usePersistedMapBounds(map: Map | undefined, localStorageKey: str
     }
   }, [map])
 }
-

package/src/mwater_table_selection/FormsListComponent.tsx

@@ -0,0 +1,188 @@
+import _ from "lodash"
+import $ from "jquery"
+import React from "react"
+import querystring from "querystring"
+import * as uiComponents from "../UIComponents"
+import { ExprUtils, Schema } from "@mwater/expressions"
+import moment from "moment"
+import { Form } from "@mwater/forms"
+
+
+interface FormsListComponentProps {
+  /** Url to hit api */
+  apiUrl: string
+  /** Optional client */
+  client?: string
+  schema: Schema
+  /** User id */
+  user?: string
+  /** Called with table selected */
+  onChange: any
+  extraTables: any
+  onExtraTableAdd: any
+  onExtraTableRemove: any
+}
+
+interface FormsListComponentState {
+  error?: any
+  search: any
+  forms: { id: string, name: string, desc?: string }[] | null
+}
+
+// Searchable list of forms
+export class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      forms: null,
+      search: ""
+    }
+  }
+
+  componentDidMount() {
+    // Get names and basic of forms
+    const query: any = {}
+    query.fields = JSON.stringify({
+      "design.name": 1,
+      "design.description": 1,
+      roles: 1,
+      created: 1,
+      modified: 1,
+      state: 1,
+      isMaster: 1
+    })
+    query.selector = JSON.stringify({ design: { $exists: true }, state: { $ne: "deleted" } })
+    query.client = this.props.client
+
+    // Get list of all form names
+    $.getJSON(this.props.apiUrl + "forms?" + querystring.stringify(query), (forms: Form[]) => {
+      // Sort by modified.on desc but first by user
+      forms = _.sortByOrder(
+        forms,
+        [
+          (form: Form) => ((this.props.extraTables || []).includes("responses:" + form._id) ? 1 : 0),
+          (form: Form) => (form.created.by === this.props.user ? 1 : 0),
+          (form: Form) => form.modified?.on
+        ],
+        ["desc", "desc", "desc"]
+      )
+
+      // TODO use name instead of design.name
+      this.setState({
+        forms: _.map(forms, (form) => {
+          let desc = ExprUtils.localizeString(form.design.description, null) || ""
+          if (desc) {
+            desc += " - "
+          }
+          desc += T`Modified ${moment(form.modified?.on, moment.ISO_8601).format("ll")}`
+
+          return {
+            id: form._id,
+            name: ExprUtils.localizeString(form.design.name, null),
+            desc
+          }
+        })
+      })
+    }).fail((xhr: any) => {
+      this.setState({ error: xhr.responseText })
+    })
+  }
+
+  handleTableRemove = (table: any) => {
+    if (
+      confirm(
+        T`Remove ${ExprUtils.localizeString(
+          table.name,
+          T.locale
+        )}? Any widgets that depend on it will no longer work properly.`
+      )
+    ) {
+      return this.props.onExtraTableRemove(table.id)
+    }
+  }
+
+  searchRef = (comp: any) => {
+    // Focus
+    if (comp) {
+      return comp.focus()
+    }
+  }
+
+  render() {
+    let forms
+    if (this.state.error) {
+      return <div className="alert alert-danger">{this.state.error}</div>
+    }
+
+    // Filter forms
+    if (this.state.search) {
+      const escapeRegExp = (s: any) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
+
+      const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i")
+
+      forms = _.filter(this.state.forms!, (form) => form.name.match(searchStringRegExp))
+    } else {
+      ;({ forms } = this.state)
+    }
+
+    // Remove if already included
+    forms = _.filter(forms || [], (f) => !(this.props.extraTables || []).includes(`responses:${f.id}`))
+
+    let tables = _.filter(
+      this.props.schema.getTables(),
+      (table) => (table.id.match(/^responses:/) || table.id.match(/^master_responses:/)) && !table.deprecated
+    )
+    tables = _.sortBy(tables, (t) => t.name.en)
+
+    return (
+      <div>
+        <label>{T`Included Surveys:`}</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.props.onChange.bind(null, table.id),
+                onRemove: this.handleTableRemove.bind(null, table)
+              }
+            })}
+          />
+        ) : (
+          <div>{T`None`}</div>
+        )}
+
+        <br />
+
+        <label>{T`All Surveys:`}</label>
+        {!this.state.forms || this.state.forms.length === 0 ? (
+          <div className="alert alert-info">
+            <i className="fa fa-spinner fa-spin" />
+            &nbsp;{T`Loading...`}
+          </div>
+        ) : (
+          <>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              placeholder={T`Search...`}
+              key="search"
+              ref={this.searchRef}
+              style={{ maxWidth: "20em", marginBottom: 10 }}
+              value={this.state.search}
+              onChange={(ev: any) => this.setState({ search: ev.target.value })}
+            />
+
+            <uiComponents.OptionListComponent
+              items={_.map(forms, (form) => ({
+                name: form.name,
+                desc: form.desc,
+                onClick: this.props.onChange.bind(null, "responses:" + form.id)
+              }))}
+            />
+          </>
+        )}
+      </div>
+    )
+  }
+}