@mwater/visualization 5.4.5 → 5.6.0

package/lib/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/lib/maps/vectorMaps.d.ts

@@ -18,6 +18,7 @@ export declare function useVectorMap(options: {
     scrollZoom?: boolean;
     dragPan?: boolean;
     touchZoomRotate?: boolean;
+    padding?: number;
 }): Map | undefined;
 /** Sets cursor as pointer when over any layers with the specified ids */
 export declare function useHoverCursor(map: maplibregl.Map | undefined, layerIds: string[]): void;

package/lib/maps/vectorMaps.js

@@ -43,7 +43,7 @@ function areVectorMapsEnabled() {
 }
 /** Loads a vector map, refreshing the WebGL context as needed */
 function useVectorMap(options) {
-    const { divRef, bounds, scrollZoom, dragPan, touchZoomRotate } = options;
+    const { divRef, bounds, scrollZoom, dragPan, touchZoomRotate, padding } = options;
     // Maplibre map
     const [map, setMap] = (0, react_1.useState)();
     // Tracks if map div is visible
@@ -79,9 +79,8 @@ function useVectorMap(options) {
             return;
         }
         try {
-            const m = new maplibre_gl_1.default.Map({
+            const mapConstructorOptions = {
                 container: divRef,
-                bounds: bounds,
                 scrollZoom: scrollZoom === false ? false : true,
                 dragPan: dragPan === false ? false : true,
                 touchZoomRotate: touchZoomRotate === false ? false : true,
@@ -92,13 +91,19 @@ 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 maplibre_gl_1.default.Map(mapConstructorOptions);
             setHasWebGLContext(true);
             // Add listener for losing context
             m.on("webglcontextlost", () => {
@@ -210,9 +215,8 @@ function useBaseStyle(baseLayer) {
             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({
@@ -263,7 +267,13 @@ function AttributionControl(props) {
     }
     if (props.baseLayer == "bing_aerial") {
         return (react_2.default.createElement("div", { className: "newmap-attribution-control" },
-            "Copyright \u00A9 2022 Microsoft and its suppliers.",
+            "\u00A9 ",
+            react_2.default.createElement("a", { href: "https://stadiamaps.com/", target: "_blank" }, "Stadia Maps"),
+            "\u00A9 ",
+            react_2.default.createElement("a", { href: "https://openmaptiles.org/", target: "_blank" }, "OpenMapTiles"),
+            "\u00A9 ",
+            react_2.default.createElement("a", { href: "https://www.openstreetmap.org/copyright", target: "_blank" }, "OpenStreetMap"),
+            "\u00A9 CNES, Distribution Airbus DS, \u00A9 Airbus DS, \u00A9 PlanetObserver (Contains Copernicus Data)",
             props.extraText ? " " + props.extraText : null));
     }
     return (react_2.default.createElement("div", { className: "newmap-attribution-control" },
@@ -277,36 +287,10 @@ function VectorMapLogo(props) {
         return null;
     }
     if (props.baseLayer == "bing_aerial") {
-        return react_2.default.createElement("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 react_2.default.createElement("img", { src: require("./Maptiler-logo.png").default, style: { position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" } });
 }
-async function loadBingBasemap(basemapType, opacity) {
-    // 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) => 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 */
 function usePersistedMapBounds(map, localStorageKey) {
     const [bounds, setBounds] = (0, react_1.useState)(null);

package/lib/mwater_table_selection/FormsListComponent.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+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;
+}
+export declare class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
+    constructor(props: any);
+    componentDidMount(): void;
+    handleTableRemove: (table: any) => any;
+    searchRef: (comp: any) => any;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/mwater_table_selection/FormsListComponent.js

@@ -0,0 +1,141 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormsListComponent = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const jquery_1 = __importDefault(require("jquery"));
+const react_1 = __importDefault(require("react"));
+const querystring_1 = __importDefault(require("querystring"));
+const uiComponents = __importStar(require("../UIComponents"));
+const expressions_1 = require("@mwater/expressions");
+const moment_1 = __importDefault(require("moment"));
+// Searchable list of forms
+class FormsListComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            forms: null,
+            search: ""
+        };
+    }
+    componentDidMount() {
+        // Get names and basic of forms
+        const query = {};
+        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
+        jquery_1.default.getJSON(this.props.apiUrl + "forms?" + querystring_1.default.stringify(query), (forms) => {
+            // Sort by modified.on desc but first by user
+            forms = lodash_1.default.sortByOrder(forms, [
+                (form) => ((this.props.extraTables || []).includes("responses:" + form._id) ? 1 : 0),
+                (form) => (form.created.by === this.props.user ? 1 : 0),
+                (form) => form.modified?.on
+            ], ["desc", "desc", "desc"]);
+            // TODO use name instead of design.name
+            this.setState({
+                forms: lodash_1.default.map(forms, (form) => {
+                    let desc = expressions_1.ExprUtils.localizeString(form.design.description, null) || "";
+                    if (desc) {
+                        desc += " - ";
+                    }
+                    desc += T `Modified ${(0, moment_1.default)(form.modified?.on, moment_1.default.ISO_8601).format("ll")}`;
+                    return {
+                        id: form._id,
+                        name: expressions_1.ExprUtils.localizeString(form.design.name, null),
+                        desc
+                    };
+                })
+            });
+        }).fail((xhr) => {
+            this.setState({ error: xhr.responseText });
+        });
+    }
+    handleTableRemove = (table) => {
+        if (confirm(T `Remove ${expressions_1.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) => {
+        // Focus
+        if (comp) {
+            return comp.focus();
+        }
+    };
+    render() {
+        let forms;
+        if (this.state.error) {
+            return react_1.default.createElement("div", { className: "alert alert-danger" }, this.state.error);
+        }
+        // Filter forms
+        if (this.state.search) {
+            const escapeRegExp = (s) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+            const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i");
+            forms = lodash_1.default.filter(this.state.forms, (form) => form.name.match(searchStringRegExp));
+        }
+        else {
+            ;
+            ({ forms } = this.state);
+        }
+        // Remove if already included
+        forms = lodash_1.default.filter(forms || [], (f) => !(this.props.extraTables || []).includes(`responses:${f.id}`));
+        let tables = lodash_1.default.filter(this.props.schema.getTables(), (table) => (table.id.match(/^responses:/) || table.id.match(/^master_responses:/)) && !table.deprecated);
+        tables = lodash_1.default.sortBy(tables, (t) => t.name.en);
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("label", null, T `Included Surveys:`),
+            tables.length > 0 ? (react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(tables, (table) => {
+                    return {
+                        name: expressions_1.ExprUtils.localizeString(table.name, T.locale),
+                        desc: expressions_1.ExprUtils.localizeString(table.desc, T.locale),
+                        onClick: this.props.onChange.bind(null, table.id),
+                        onRemove: this.handleTableRemove.bind(null, table)
+                    };
+                }) })) : (react_1.default.createElement("div", null, T `None`)),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("label", null, T `All Surveys:`),
+            !this.state.forms || this.state.forms.length === 0 ? (react_1.default.createElement("div", { className: "alert alert-info" },
+                react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
+                "\u00A0",
+                T `Loading...`)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("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) => this.setState({ search: ev.target.value }) }),
+                react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(forms, (form) => ({
+                        name: form.name,
+                        desc: form.desc,
+                        onClick: this.props.onChange.bind(null, "responses:" + form.id)
+                    })) })))));
+    }
+}
+exports.FormsListComponent = FormsListComponent;

package/lib/mwater_table_selection/IndicatorsListComponent.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+export interface IndicatorsListComponentProps {
+    /** 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 IndicatorsListComponentState {
+    error?: any;
+    search: any;
+    indicators: any[] | null;
+}
+export declare class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
+    addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null;
+    constructor(props: IndicatorsListComponentProps);
+    componentDidMount(): JQuery.jqXHR<any>;
+    handleTableRemove: (table: any) => any;
+    searchRef: (comp: any) => any;
+    handleSelect: (tableId: any) => void;
+    handleOpenIndicator: (id: string) => void;
+    renderIndicatorList(indicators: any[], searchText: string): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+interface AddIndicatorConfirmPopupComponentProps {
+    schema: Schema;
+    /** Called with table selected */
+    onChange: any;
+    onExtraTableAdd: any;
+}
+interface AddIndicatorConfirmPopupComponentState {
+    indicatorTable: any;
+    visible: any;
+}
+declare class AddIndicatorConfirmPopupComponent extends React.Component<AddIndicatorConfirmPopupComponentProps, AddIndicatorConfirmPopupComponentState> {
+    constructor(props: any);
+    show(indicatorTable: any): void;
+    renderContents(): React.JSX.Element;
+    render(): React.JSX.Element | null;
+}
+export {};