@mwater/visualization 5.5.0 → 5.6.1

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

@@ -1,15 +1,14 @@
-import { Map, LngLatBoundsLike } from "maplibre-gl";
+import maplibregl, { Map, LngLatBoundsLike } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./VectorMapViewComponent.css";
 import React from "react";
+export { default as maplibregl } from "maplibre-gl";
 export declare function setPrintingModeEnabled(val: boolean): void;
 /** This must be called to set the appropriate key before use. If it is not set, vector maps will not function.
  * Maps will fall back to leaflet if the key is not set or if set to ""
  */
 export declare function setMapTilerApiKey(key: string): void;
 export declare function getMapTilerApiKey(): string;
-/** Check if vector maps are enabled by setting API key */
-export declare function areVectorMapsEnabled(): boolean;
 export type BaseLayer = "bing_road" | "bing_aerial" | "cartodb_positron" | "cartodb_dark_matter" | "blank";
 /** Loads a vector map, refreshing the WebGL context as needed */
 export declare function useVectorMap(options: {
@@ -18,7 +17,8 @@ export declare function useVectorMap(options: {
     scrollZoom?: boolean;
     dragPan?: boolean;
     touchZoomRotate?: boolean;
-}): Map | undefined;
+    padding?: number;
+}): maplibregl.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;
 /** Apply user style to a map with base style */
@@ -29,9 +29,9 @@ export declare function useStyleMap(options: {
     userStyle: maplibregl.StyleSpecification | null | undefined;
 }): void;
 /** Loads a base style for the map */
-export declare function useBaseStyle(baseLayer: BaseLayer): import("maplibre-gl").StyleSpecification | null;
+export declare function useBaseStyle(baseLayer: BaseLayer): maplibregl.StyleSpecification | null;
 /** Combines a base style and a user style */
-export declare function mergeBaseAndUserStyle(baseStyle: maplibregl.StyleSpecification | null | undefined, userStyle: maplibregl.StyleSpecification | null | undefined, baseLayerOpacity?: number | null): import("maplibre-gl").StyleSpecification | null;
+export declare function mergeBaseAndUserStyle(baseStyle: maplibregl.StyleSpecification | null | undefined, userStyle: maplibregl.StyleSpecification | null | undefined, baseLayerOpacity?: number | null): maplibregl.StyleSpecification | null;
 export declare function AttributionControl(props: {
     baseLayer: BaseLayer;
     extraText?: string;

package/lib/maps/vectorMaps.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.maplibregl = void 0;
 exports.setPrintingModeEnabled = setPrintingModeEnabled;
 exports.setMapTilerApiKey = setMapTilerApiKey;
 exports.getMapTilerApiKey = getMapTilerApiKey;
-exports.areVectorMapsEnabled = areVectorMapsEnabled;
 exports.useVectorMap = useVectorMap;
 exports.useHoverCursor = useHoverCursor;
 exports.useStyleMap = useStyleMap;
@@ -21,6 +21,9 @@ const mapSymbols_1 = require("./mapSymbols");
 require("maplibre-gl/dist/maplibre-gl.css");
 require("./VectorMapViewComponent.css");
 const react_2 = __importDefault(require("react"));
+// Re-export maplibregl for consumers
+var maplibre_gl_2 = require("maplibre-gl");
+Object.defineProperty(exports, "maplibregl", { enumerable: true, get: function () { return __importDefault(maplibre_gl_2).default; } });
 /** Set to true to enable printing by preserving the drawing buffer */
 let printingModeEnabled = false;
 function setPrintingModeEnabled(val) {
@@ -37,13 +40,9 @@ function setMapTilerApiKey(key) {
 function getMapTilerApiKey() {
     return mapTilerApiKey;
 }
-/** Check if vector maps are enabled by setting API key */
-function areVectorMapsEnabled() {
-    return mapTilerApiKey !== "";
-}
 /** 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 +78,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 +90,22 @@ 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 maplibre_gl_1.default.Map(mapConstructorOptions);
             setHasWebGLContext(true);
             // Add listener for losing context
             m.on("webglcontextlost", () => {
@@ -119,10 +126,12 @@ function useVectorMap(options) {
                 // Check if known
                 const mapSymbol = (0, mapSymbols_1.getMapSymbols)().find((s) => s.value == ev.id);
                 if (mapSymbol) {
-                    m.loadImage(mapSymbol.url, (err, image) => {
-                        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);
                     });
                 }
             });
@@ -210,9 +219,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 +271,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 +291,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/IndicatorsListComponent.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Schema } from "@mwater/expressions";
-interface IndicatorsListComponentProps {
+export interface IndicatorsListComponentProps {
     /** Url to hit api */
     apiUrl: string;
     /** Optional client */
@@ -21,11 +21,13 @@ interface IndicatorsListComponentState {
 }
 export declare class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
     addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null;
-    constructor(props: any);
+    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 {

package/lib/mwater_table_selection/IndicatorsListComponent.js

@@ -47,7 +47,7 @@ class IndicatorsListComponent extends react_1.default.Component {
     componentDidMount() {
         // Get names and basic of forms
         const query = {};
-        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
         return jquery_1.default.getJSON(this.props.apiUrl + "indicators?" + querystring_1.default.stringify(query), (indicators) => {
@@ -60,11 +60,7 @@ class IndicatorsListComponent extends react_1.default.Component {
                 (indicator) => expressions_1.ExprUtils.localizeString(indicator.design.name, T.locale)
             ], ["asc", "asc", "asc"]);
             return this.setState({
-                indicators: lodash_1.default.map(indicators, (indicator) => ({
-                    id: indicator._id,
-                    name: expressions_1.ExprUtils.localizeString(indicator.design.name, T.locale),
-                    desc: expressions_1.ExprUtils.localizeString(indicator.design.desc, T.locale)
-                }))
+                indicators: indicators
             });
         }).fail((xhr) => {
             return this.setState({ error: xhr.responseText });
@@ -88,23 +84,64 @@ class IndicatorsListComponent extends react_1.default.Component {
         }
         this.addIndicatorConfirmPopup.show(tableId);
     };
+    handleOpenIndicator = (id) => {
+        this.handleSelect("indicator_values:" + id);
+    };
+    // Render a simplified version of IndicatorListComponent from mwater-portal
+    renderIndicatorList(indicators, searchText) {
+        // Filter indicators based on search text
+        let filteredIndicators = indicators;
+        if (searchText) {
+            const searchTerms = searchText.toLowerCase().split(" ");
+            filteredIndicators = indicators.filter(indicator => {
+                const searchFields = [
+                    expressions_1.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)));
+            });
+        }
+        // Split into recommended and all indicators
+        const recommendedIndicators = filteredIndicators.filter(indicator => indicator.design.recommended);
+        const otherIndicators = filteredIndicators.filter(indicator => !indicator.design.recommended);
+        // Group by category
+        const groupByCategory = (indicators) => {
+            const categories = {};
+            indicators.forEach(indicator => {
+                const category = indicator.design.category || T `Uncategorized`;
+                if (!categories[category]) {
+                    categories[category] = [];
+                }
+                categories[category].push(indicator);
+            });
+            return categories;
+        };
+        const recommendedByCategory = groupByCategory(recommendedIndicators);
+        const otherByCategory = groupByCategory(otherIndicators);
+        return (react_1.default.createElement("div", null,
+            recommendedIndicators.length > 0 && (react_1.default.createElement("div", null,
+                react_1.default.createElement("h4", null, T `Recommended Indicators`),
+                lodash_1.default.map(recommendedByCategory, (categoryIndicators, category) => (react_1.default.createElement("div", { key: category },
+                    react_1.default.createElement("h5", null, category),
+                    react_1.default.createElement("table", { className: "table table-hover" },
+                        react_1.default.createElement("tbody", null, lodash_1.default.map(categoryIndicators, indicator => (react_1.default.createElement("tr", { key: indicator._id, onClick: () => this.handleOpenIndicator(indicator._id) },
+                            react_1.default.createElement("td", null,
+                                react_1.default.createElement(IndicatorListItemComponent, { indicator: indicator, onClick: () => this.handleOpenIndicator(indicator._id) })))))))))))),
+            react_1.default.createElement("h4", null, T `All Indicators`),
+            lodash_1.default.map(otherByCategory, (categoryIndicators, category) => (react_1.default.createElement("div", { key: category },
+                react_1.default.createElement("h5", null, category),
+                react_1.default.createElement("table", { className: "table table-hover" },
+                    react_1.default.createElement("tbody", null, lodash_1.default.map(categoryIndicators, indicator => (react_1.default.createElement("tr", { key: indicator._id, onClick: () => this.handleOpenIndicator(indicator._id) },
+                        react_1.default.createElement("td", null,
+                            react_1.default.createElement(IndicatorListItemComponent, { indicator: indicator, onClick: () => this.handleOpenIndicator(indicator._id) }))))))))))));
+    }
     render() {
-        let indicators;
         if (this.state.error) {
             return react_1.default.createElement("div", { className: "alert alert-danger" }, this.state.error);
         }
-        // Filter indicators
-        if (this.state.search) {
-            const escapeRegExp = (s) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
-            const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i");
-            indicators = lodash_1.default.filter(this.state.indicators || [], (indicator) => indicator.name.match(searchStringRegExp));
-        }
-        else {
-            ;
-            ({ indicators } = this.state);
-        }
-        // Remove if already included
-        indicators = lodash_1.default.filter(indicators || [], (f) => !(this.props.extraTables || []).includes(`indicator_values:${f.id}`));
         let tables = lodash_1.default.filter(this.props.schema.getTables(), (table) => table.id.match(/^indicator_values:/) && !table.deprecated);
         tables = lodash_1.default.sortBy(tables, (t) => t.name.en);
         return (react_1.default.createElement("div", null,
@@ -112,26 +149,19 @@ class IndicatorsListComponent extends react_1.default.Component {
                     this.addIndicatorConfirmPopup = c;
                 } }),
             react_1.default.createElement("label", null, T `Included Indicators:`),
-            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.handleSelect.bind(null, table.id),
-                        onRemove: this.handleTableRemove.bind(null, table)
-                    };
-                }) })) : (react_1.default.createElement("div", null, T `None`)),
+            tables.length > 0 ? (react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(tables, (table) => ({
+                    name: expressions_1.ExprUtils.localizeString(table.name, T.locale),
+                    desc: expressions_1.ExprUtils.localizeString(table.desc, T.locale),
+                    onClick: () => this.handleSelect(table.id),
+                    onRemove: () => this.handleTableRemove(table)
+                })) })) : (react_1.default.createElement("div", null, T `None`)),
             react_1.default.createElement("br", null),
             react_1.default.createElement("label", null, T `All Indicators:`),
             !this.state.indicators || this.state.indicators.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,
+                "\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(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)))));
     }
 }
 exports.IndicatorsListComponent = IndicatorsListComponent;
@@ -180,3 +210,42 @@ are certain that you want to use the raw indicator table`),
         return (react_1.default.createElement(ModalPopupComponent_1.default, { showCloseX: true, onClose: () => this.setState({ visible: false }), header: T `Add Indicator` }, this.renderContents()));
     }
 }
+// Single indicator item in a list
+// Local port of the class found in mwater-portal
+class IndicatorListItemComponent extends react_1.default.Component {
+    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 (react_1.default.createElement("span", { className: "fa-stack", style: { paddingRight: 6 } },
+                    react_1.default.createElement("i", { className: "fa fa-th-list fa-stack-1x text-muted" }),
+                    react_1.default.createElement("i", { className: "fa fa-circle fa-stack-1x", style: { color: "white", paddingLeft: 15 } }),
+                    react_1.default.createElement("i", { className: "fa fa-check-circle fa-stack-1x text-primary", style: { paddingLeft: 15 } })));
+        }
+        return null;
+    }
+    render() {
+        return (react_1.default.createElement("div", { onClick: this.props.onClick, style: { cursor: "pointer" } },
+            react_1.default.createElement("div", { key: "name", style: { fontWeight: "bold" } },
+                this.renderIcon(),
+                expressions_1.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 ? (react_1.default.createElement("span", { className: "text-muted" },
+                    " ",
+                    T `by ${this.props.indicator.design.organization}`)) : undefined),
+            react_1.default.createElement("div", { key: "desc", className: "text-muted" },
+                expressions_1.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)));
+    }
+}

package/lib/mwater_table_selection/MWaterCalculatedDataSourcesListComponent.d.ts

@@ -0,0 +1,18 @@
+import { Schema } from "@mwater/expressions";
+import React from "react";
+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 declare const MWaterCalculatedDataSourcesListComponent: (props: MWaterCalculatedDataSourcesListComponentProps) => React.JSX.Element;
+export {};

package/lib/mwater_table_selection/MWaterCalculatedDataSourcesListComponent.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MWaterCalculatedDataSourcesListComponent = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const UIComponents_1 = require("../UIComponents");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+/**
+ * A list of calculated data sources that can be selected.
+ */
+const MWaterCalculatedDataSourcesListComponent = (props) => {
+    const [calculatedSources, setCalculatedSources] = (0, react_1.useState)();
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [extraTableNeeded, setExtraTableNeeded] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        fetch(`${props.apiUrl}calculated_data_sources?client=${props.client || ""}`)
+            .then((response) => response.json())
+            .then((body) => {
+            // Filter out calculated data sources that have never been calculated
+            const calculatedSources = body.filter((s) => s.last_calculated);
+            setCalculatedSources(lodash_1.default.sortByAll(calculatedSources, [
+                (s) => (props.extraTables.some((t) => t == `calculated:${s._sid}`) ? 0 : 1),
+                (s) => expressions_1.ExprUtils.localizeString(s.name, props.locale)
+            ]));
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (extraTableNeeded && props.schema.getTable(extraTableNeeded)) {
+            props.onChange(extraTableNeeded);
+        }
+    });
+    const selectTable = (source) => {
+        const qualifiedTableId = `calculated:${source._sid}`;
+        if (props.schema.getTable(qualifiedTableId)) {
+            props.onChange(qualifiedTableId);
+            return;
+        }
+        setExtraTableNeeded(qualifiedTableId);
+        props.onExtraTableAdd(qualifiedTableId);
+    };
+    const handleRemove = (source) => {
+        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 (react_2.default.createElement("div", null,
+            react_2.default.createElement("i", { className: "fa fa-spin fa-spinner" }),
+            " ",
+            T `Loading...`));
+    }
+    const renderCalculatedSources = () => {
+        const items = calculatedSources
+            .map((s) => {
+            const alreadyIncluded = props.extraTables.some((t) => t == `calculated:${s._sid}`);
+            return {
+                name: expressions_1.ExprUtils.localizeString(s.name, props.locale) || "",
+                desc: s.description ? expressions_1.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 react_2.default.createElement(UIComponents_1.OptionListComponent, { items: items });
+    };
+    return (react_2.default.createElement("div", null,
+        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: T `Search...`, searchIcon: true }),
+        react_2.default.createElement("br", null),
+        renderCalculatedSources()));
+};
+exports.MWaterCalculatedDataSourcesListComponent = MWaterCalculatedDataSourcesListComponent;