@mwater/visualization 5.5.0 → 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/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;

package/lib/mwater_table_selection/MWaterCompleteTableSelectComponent.d.ts

@@ -14,24 +14,50 @@ interface MWaterCompleteTableSelectComponentProps {
     extraTables: any;
     onExtraTablesChange: any;
 }
+interface Category {
+    id: string;
+    name: string;
+    description: string;
+    icon: string;
+    render: () => JSX.Element;
+}
+/** Allows selection of a table. Card-based layout with categories */
 export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
+    selectedCategory: string | null;
     showLegacyAssets: boolean;
+    searchText: string;
 }> {
     constructor(props: MWaterCompleteTableSelectComponentProps);
     handleExtraTableAdd: (tableId: any) => any;
     handleExtraTableRemove: (tableId: any) => any;
+    handleCategorySelect: (categoryId: string) => void;
+    handleBackToCategories: () => void;
     renderSites(): React.JSX.Element;
     renderForms(): React.JSX.Element;
     renderIndicators(): React.JSX.Element;
     renderIssues(): React.JSX.Element;
+    renderWorkflows(): React.JSX.Element;
     renderSweetSense(): React.JSX.Element;
     renderTablesets(): React.JSX.Element;
     renderMetrics(): React.JSX.Element;
     renderAccountingSystems(): React.JSX.Element;
     renderAssets(): React.JSX.Element;
     renderLegacyAssets(): React.JSX.Element;
+    renderCalculated(): React.JSX.Element;
     renderOther(): React.JSX.Element;
     getSweetSenseTables(): import("@mwater/expressions").Table[];
+    /** Get all available categories */
+    getCategories(): Category[];
+    /** Render a single category card */
+    renderCategoryCard(category: Category): React.JSX.Element;
+    /** Get display name for an extra table (handles wildcards) */
+    getExtraTableDisplayName(tableId: string): string | null;
+    /** Render the currently included extra tables section */
+    renderExtraTables(): React.JSX.Element | null;
+    /** Render the landing page with all categories */
+    renderLandingPage(): React.JSX.Element;
+    /** Render a specific category view */
+    renderCategoryView(): React.JSX.Element | null;
     render(): React.JSX.Element;
 }
 export {};