@mwater/visualization 5.4.5 → 5.6.0

package/lib/mwater_table_selection/MWaterCompleteTableSelectComponent.js

@@ -0,0 +1,461 @@
+"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 });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const uiComponents = __importStar(require("../UIComponents"));
+const expressions_1 = require("@mwater/expressions");
+const MWaterCustomTablesetListComponent_1 = require("./MWaterCustomTablesetListComponent");
+const MWaterMetricsTableListComponent_1 = require("./MWaterMetricsTableListComponent");
+const MWaterAssetSystemsListComponent_1 = require("./MWaterAssetSystemsListComponent");
+const FormsListComponent_1 = require("./FormsListComponent");
+const IndicatorsListComponent_1 = require("./IndicatorsListComponent");
+const IssuesListComponent_1 = require("./IssuesListComponent");
+const MWaterAccountingSystemListComponent_1 = require("./MWaterAccountingSystemListComponent");
+const MWaterCalculatedDataSourcesListComponent_1 = require("./MWaterCalculatedDataSourcesListComponent");
+const MWaterWorkflowsSelectComponent_1 = require("./MWaterWorkflowsSelectComponent");
+const sitesOrder = {
+    "entities.water_point": 1,
+    "entities.sanitation_facility": 2,
+    "entities.household": 3,
+    "entities.community": 4,
+    "entities.school": 5,
+    "entities.health_facility": 6,
+    "entities.place_of_worship": 7,
+    "entities.water_system": 8,
+    "entities.water_system_component": 9,
+    "entities.wastewater_treatment_system": 10,
+    "entities.waste_disposal_site": 11
+};
+/** Entity types that are assets */
+const assetEntities = [
+    "entities.water_asset"
+];
+/** Allows selection of a table. Card-based layout with categories */
+class MWaterCompleteTableSelectComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedCategory: null,
+            showLegacyAssets: false,
+            searchText: ""
+        };
+    }
+    handleExtraTableAdd = (tableId) => {
+        return this.props.onExtraTablesChange(lodash_1.default.union(this.props.extraTables, [tableId]));
+    };
+    handleExtraTableRemove = (tableId) => {
+        const displayName = this.getExtraTableDisplayName(tableId);
+        if (!displayName) {
+            return;
+        }
+        if (confirm(T `Remove ${displayName}? Any widgets that depend on it will no longer work properly.`)) {
+            // Set to null if current table matches (for wildcards, check if current table starts with prefix)
+            if (tableId.endsWith(".*")) {
+                const prefix = tableId.slice(0, -2);
+                if (this.props.table && this.props.table.startsWith(prefix + ".")) {
+                    this.props.onChange(null);
+                }
+            }
+            else if (this.props.table === tableId) {
+                this.props.onChange(null);
+            }
+            return this.props.onExtraTablesChange(lodash_1.default.without(this.props.extraTables, tableId));
+        }
+    };
+    handleCategorySelect = (categoryId) => {
+        this.setState({ selectedCategory: categoryId });
+    };
+    handleBackToCategories = () => {
+        this.setState({ selectedCategory: null, showLegacyAssets: false });
+    };
+    renderSites() {
+        let table;
+        let types = [];
+        for (table of this.props.schema.getTables()) {
+            if (table.deprecated) {
+                continue;
+            }
+            if (!table.id.match(/^entities\./)) {
+                continue;
+            }
+            // Skip assets
+            if (assetEntities.includes(table.id)) {
+                continue;
+            }
+            types.push(table.id);
+        }
+        // Sort by order if present
+        types = lodash_1.default.sortBy(types, (type) => sitesOrder[type] || 999);
+        return react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.compact(lodash_1.default.map(types, (tableId) => {
+                table = this.props.schema.getTable(tableId);
+                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)
+                };
+            })) });
+    }
+    renderForms() {
+        return react_1.default.createElement(FormsListComponent_1.FormsListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove });
+    }
+    renderIndicators() {
+        return react_1.default.createElement(IndicatorsListComponent_1.IndicatorsListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove });
+    }
+    renderIssues() {
+        return react_1.default.createElement(IssuesListComponent_1.IssuesListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove });
+    }
+    renderWorkflows() {
+        return react_1.default.createElement(MWaterWorkflowsSelectComponent_1.MWaterWorkflowsSelectComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove });
+    }
+    renderSweetSense() {
+        let sweetSenseTables = this.getSweetSenseTables();
+        sweetSenseTables = lodash_1.default.sortBy(sweetSenseTables, (table) => table.name.en);
+        return react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(sweetSenseTables, (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)
+                };
+            }) });
+    }
+    renderTablesets() {
+        return react_1.default.createElement(MWaterCustomTablesetListComponent_1.MWaterCustomTablesetListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove, locale: T.locale });
+    }
+    renderMetrics() {
+        return react_1.default.createElement(MWaterMetricsTableListComponent_1.MWaterMetricsTableListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove, locale: T.locale });
+    }
+    renderAccountingSystems() {
+        return react_1.default.createElement(MWaterAccountingSystemListComponent_1.MWaterAccountingSystemListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove, locale: T.locale });
+    }
+    renderAssets() {
+        const items = [];
+        for (const tableId of assetEntities) {
+            const table = this.props.schema.getTable(tableId);
+            if (!table) {
+                continue;
+            }
+            items.push({
+                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.handleExtraTableRemove.bind(null, table.id)
+            });
+        }
+        return react_1.default.createElement("div", null,
+            react_1.default.createElement(uiComponents.OptionListComponent, { items: items }),
+            react_1.default.createElement("div", { className: "text-center mt-2 mb-2" },
+                react_1.default.createElement("button", { className: "btn btn-link", onClick: () => this.setState({ showLegacyAssets: !this.state.showLegacyAssets }) },
+                    this.state.showLegacyAssets ? T `Hide` : T `Show`,
+                    " ",
+                    T `Legacy Assets`)),
+            this.state.showLegacyAssets && this.renderLegacyAssets());
+    }
+    renderLegacyAssets() {
+        return react_1.default.createElement(MWaterAssetSystemsListComponent_1.MWaterAssetSystemsListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove, locale: T.locale });
+    }
+    renderCalculated() {
+        return react_1.default.createElement(MWaterCalculatedDataSourcesListComponent_1.MWaterCalculatedDataSourcesListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove, locale: T.locale });
+    }
+    renderOther() {
+        let otherTables = lodash_1.default.filter(this.props.schema.getTables(), (table) => {
+            // Remove deprecated
+            if (table.deprecated) {
+                return false;
+            }
+            // Remove sites
+            if (table.id.match(/^entities\./)) {
+                return false;
+            }
+            // sweetsense tables
+            if (table.id.match(/^sweetsense/)) {
+                return false;
+            }
+            // Remove responses
+            if (table.id.match(/^responses:/)) {
+                return false;
+            }
+            // Remove indicators
+            if (table.id.match(/^indicator_values:/)) {
+                return false;
+            }
+            // Remove issues
+            if (table.id.match(/^(issues|issue_events):/)) {
+                return false;
+            }
+            // Remove custom tablesets
+            if (table.id.match(/^custom\./)) {
+                return false;
+            }
+            // Remove metrics
+            if (table.id.match(/^metrics:/)) {
+                return false;
+            }
+            // Remove assets
+            if (table.id.match(/^assets:/)) {
+                return false;
+            }
+            // Remove calculated data sources
+            if (table.id.match(/^calculated:/)) {
+                return false;
+            }
+            // Remove workflows
+            if (table.id.match(/^(workflows|workflow_events):/)) {
+                return false;
+            }
+            return true;
+        });
+        otherTables = lodash_1.default.sortBy(otherTables, (table) => table.name.en);
+        return react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(otherTables, (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)
+                };
+            }) });
+    }
+    getSweetSenseTables() {
+        return lodash_1.default.filter(this.props.schema.getTables(), (table) => {
+            if (table.deprecated) {
+                return false;
+            }
+            if (table.id.match(/^sweetsense/)) {
+                return true;
+            }
+            return false;
+        });
+    }
+    /** Get all available categories */
+    getCategories() {
+        const categories = [
+            {
+                id: "sites",
+                name: T("Sites").toString(),
+                description: T("Water points, sanitation facilities, households, and other sites").toString(),
+                icon: "fa fa-map-marker",
+                render: () => this.renderSites()
+            },
+            {
+                id: "forms",
+                name: T("Surveys").toString(),
+                description: T("Data collected from survey forms").toString(),
+                icon: "fa fa-th-list",
+                render: () => this.renderForms()
+            },
+            {
+                id: "assets",
+                name: T("Assets").toString(),
+                description: T("Asset tracking and management").toString(),
+                icon: "fas fa-map-pin",
+                render: () => this.renderAssets()
+            },
+            {
+                id: "indicators",
+                name: T("Indicators").toString(),
+                description: T("Calculated indicators and metrics").toString(),
+                icon: "fa fa-check-circle",
+                render: () => this.renderIndicators()
+            },
+            {
+                id: "tablesets",
+                name: T("Tables").toString(),
+                description: T("Custom tables and datasets").toString(),
+                icon: "fa fa-table",
+                render: () => this.renderTablesets()
+            },
+            {
+                id: "calculated",
+                name: T("Calculated").toString(),
+                description: T("Calculated and derived data sources").toString(),
+                icon: "fa fa-cogs",
+                render: () => this.renderCalculated()
+            },
+            {
+                id: "accounting",
+                name: T("Accounting").toString(),
+                description: T("Financial and accounting data").toString(),
+                icon: "fa fa-calculator",
+                render: () => this.renderAccountingSystems()
+            },
+            {
+                id: "workflows",
+                name: T("Workflows").toString(),
+                description: T("Multi-step processes and workflows").toString(),
+                icon: "fa fa-project-diagram",
+                render: () => this.renderWorkflows()
+            },
+            {
+                id: "issues",
+                name: T("Issues").toString(),
+                description: T("Reported problems and issues").toString(),
+                icon: "fa fa-exclamation-circle",
+                render: () => this.renderIssues()
+            },
+            {
+                id: "metrics",
+                name: T("Metrics").toString(),
+                description: T("Performance metrics and KPIs").toString(),
+                icon: "fa fa-line-chart",
+                render: () => this.renderMetrics()
+            },
+            {
+                id: "other",
+                name: T("Advanced").toString(),
+                description: T("Other advanced data sources").toString(),
+                icon: "fa fa-ellipsis-h",
+                render: () => this.renderOther()
+            }
+        ];
+        // // Add sensors if applicable
+        // const sweetSenseTables = this.getSweetSenseTables()
+        // if (sweetSenseTables.length > 0) {
+        //   categories.splice(9, 0, {
+        //     id: "sensors",
+        //     name: T("Sensors").toString(),
+        //     description: T("Sensor data and monitoring").toString(),
+        //     icon: "fa fa-wifi",
+        //     render: () => this.renderSweetSense()
+        //   })
+        // }
+        return categories;
+    }
+    /** Render a single category card */
+    renderCategoryCard(category) {
+        return (react_1.default.createElement("div", { key: category.id, className: "card mb-2", style: {
+                cursor: "pointer",
+                transition: "background-color 0.15s, border-color 0.15s"
+            }, onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "#f8f9fa";
+                e.currentTarget.style.borderColor = "#adb5bd";
+            }, onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "";
+                e.currentTarget.style.borderColor = "";
+            }, onClick: () => this.handleCategorySelect(category.id) },
+            react_1.default.createElement("div", { className: "card-body d-flex align-items-center", style: { padding: "0.75rem" } },
+                react_1.default.createElement("div", { style: { fontSize: "1.75rem", width: "2.5rem", textAlign: "center", color: "#6c757d" } },
+                    react_1.default.createElement("i", { className: category.icon })),
+                react_1.default.createElement("div", { style: { flex: 1, marginLeft: "0.75rem" } },
+                    react_1.default.createElement("div", { style: { fontWeight: 600, fontSize: "1rem", marginBottom: "0.15rem" } }, category.name),
+                    react_1.default.createElement("div", { className: "text-muted", style: { fontSize: "0.85rem" } }, category.description)),
+                react_1.default.createElement("div", { style: { color: "#adb5bd", fontSize: "1.1rem" } },
+                    react_1.default.createElement("i", { className: "fa fa-chevron-right" })))));
+    }
+    /** Get display name for an extra table (handles wildcards) */
+    getExtraTableDisplayName(tableId) {
+        // Check if it's a wildcard pattern
+        if (tableId.endsWith(".*")) {
+            // Find first matching table
+            const prefix = tableId.slice(0, -2); // Remove .*
+            const matchingTable = this.props.schema.getTables().find(t => t.id.startsWith(prefix + "."));
+            if (matchingTable) {
+                const fullName = expressions_1.ExprUtils.localizeString(matchingTable.name, T.locale);
+                // Split by " > " and take first part
+                const parts = fullName.split(" > ");
+                return parts[0];
+            }
+            // Fallback to showing the pattern
+            return tableId;
+        }
+        // Regular table
+        const table = this.props.schema.getTable(tableId);
+        if (!table) {
+            return null;
+        }
+        return expressions_1.ExprUtils.localizeString(table.name, T.locale);
+    }
+    /** Render the currently included extra tables section */
+    renderExtraTables() {
+        if (!this.props.extraTables || this.props.extraTables.length === 0) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { className: "mb-3 pb-2", style: { borderBottom: "1px solid #dee2e6" } },
+            react_1.default.createElement("span", { className: "text-muted me-2", style: { fontSize: "0.9rem" } },
+                T `Currently Included`,
+                ":"),
+            this.props.extraTables.map((tableId) => {
+                const displayName = this.getExtraTableDisplayName(tableId);
+                if (!displayName) {
+                    return null;
+                }
+                return (react_1.default.createElement("span", { key: tableId, className: "d-inline-flex align-items-center me-2 px-2 py-1 bg-light border rounded", style: { fontSize: "0.85rem" } },
+                    react_1.default.createElement("span", null, displayName),
+                    react_1.default.createElement("button", { className: "btn btn-link btn-sm p-0 ms-1", style: { fontSize: "0.9rem", color: "#6c757d" }, onClick: (e) => {
+                            e.stopPropagation();
+                            this.handleExtraTableRemove(tableId);
+                        } },
+                        react_1.default.createElement("i", { className: "fa fa-times" }))));
+            })));
+    }
+    /** Render the landing page with all categories */
+    renderLandingPage() {
+        const categories = this.getCategories();
+        // Filter by search text
+        const filteredCategories = this.state.searchText
+            ? categories.filter((cat) => {
+                const searchLower = this.state.searchText.toLowerCase();
+                return (cat.name.toLowerCase().includes(searchLower) ||
+                    cat.description.toLowerCase().includes(searchLower));
+            })
+            : categories;
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "text-muted mb-3" }, T `Select a data source category to browse available tables and datasets.`),
+            react_1.default.createElement("div", { className: "mb-3 position-relative" },
+                react_1.default.createElement("i", { className: "fa fa-search position-absolute", style: { left: "0.75rem", top: "50%", transform: "translateY(-50%)", color: "#6c757d" } }),
+                react_1.default.createElement("input", { type: "text", className: "form-control", style: { paddingLeft: "2.5rem" }, placeholder: T("Search categories...").toString(), value: this.state.searchText, onChange: (e) => this.setState({ searchText: e.target.value }), ref: (c) => {
+                        if (c) {
+                            c.focus();
+                        }
+                    } })),
+            this.renderExtraTables(),
+            react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" } }, filteredCategories.map((category) => this.renderCategoryCard(category))),
+            filteredCategories.length === 0 && this.state.searchText && (react_1.default.createElement("div", { className: "text-center text-muted mt-4" }, T `No categories match your search.`))));
+    }
+    /** Render a specific category view */
+    renderCategoryView() {
+        const categories = this.getCategories();
+        const category = categories.find((c) => c.id === this.state.selectedCategory);
+        if (!category) {
+            return null;
+        }
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("button", { className: "btn btn-link p-0", style: { textDecoration: "none" }, onClick: this.handleBackToCategories },
+                    react_1.default.createElement("i", { className: "fa fa-arrow-left me-2" }),
+                    T `Back to All Data Sources`)),
+            react_1.default.createElement("h5", { className: "mb-3" },
+                react_1.default.createElement("i", { className: `${category.icon} me-2 text-muted` }),
+                category.name),
+            category.render()));
+    }
+    render() {
+        return (react_1.default.createElement("div", { style: { height: "65vh", overflowY: "auto" } }, this.state.selectedCategory === null
+            ? this.renderLandingPage()
+            : this.renderCategoryView()));
+    }
+}
+exports.default = MWaterCompleteTableSelectComponent;

package/lib/mwater_table_selection/MWaterCustomTablesetListComponent.d.ts

@@ -0,0 +1,17 @@
+import { Schema } from "@mwater/expressions";
+import React from "react";
+/** Searchable list of custom tables */
+export declare const MWaterCustomTablesetListComponent: (props: {
+    apiUrl: string;
+    schema: Schema;
+    client?: string;
+    /** User id */
+    user?: string;
+    /** Called with table selected */
+    onChange: (tableId: string | null) => void;
+    extraTables: string[];
+    onExtraTableAdd: (tableId: string) => void;
+    onExtraTableRemove: (tableId: string) => void;
+    /** e.g. "en" */
+    locale?: string;
+}) => React.JSX.Element;

package/lib/mwater_table_selection/MWaterCustomTablesetListComponent.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MWaterCustomTablesetListComponent = 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");
+/** Searchable list of custom tables */
+const MWaterCustomTablesetListComponent = (props) => {
+    const [tablesets, setTablesets] = (0, react_1.useState)();
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [extraTableNeeded, setExtraTableNeeded] = (0, react_1.useState)();
+    const [showSystem, setShowSystem] = (0, react_1.useState)(false);
+    // Get list of all tablesets
+    (0, react_1.useEffect)(() => {
+        fetch(`${props.apiUrl}custom_tablesets?client=${props.client || ""}`)
+            .then((response) => response.json())
+            .then((tablesets) => {
+            // Filter out non-normal
+            tablesets = tablesets.filter((ts) => ts.type === "normal");
+            // Put included ones first
+            setTablesets(lodash_1.default.sortByAll(tablesets, [
+                (ts) => (props.extraTables.some((t) => (t || "").startsWith(`custom.${ts.code}.`)) ? 0 : 1),
+                (ts) => expressions_1.ExprUtils.localizeString(ts.design.name, props.locale)
+            ]));
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (extraTableNeeded && props.schema.getTable(extraTableNeeded)) {
+            props.onChange(extraTableNeeded);
+        }
+    });
+    const selectTable = (ts, tableId) => {
+        const qualifiedTableId = `custom.${ts.code}.${tableId}`;
+        // If already included, select it
+        if (props.schema.getTable(qualifiedTableId)) {
+            props.onChange(qualifiedTableId);
+            return;
+        }
+        // Request extra tables as wildcard
+        setExtraTableNeeded(qualifiedTableId);
+        props.onExtraTableAdd(`custom.${ts.code}.*`);
+    };
+    const handleRemove = (ts) => {
+        // Remove from extra tables
+        const match = props.extraTables.find((t) => (t || "").startsWith(`custom.${ts.code}.`));
+        if (match) {
+            if (confirm(T `Remove this set of tables? Some widgets may not work correctly.`)) {
+                props.onChange(null);
+                props.onExtraTableRemove(match);
+            }
+        }
+    };
+    if (!tablesets || extraTableNeeded) {
+        return (react_2.default.createElement("div", null,
+            react_2.default.createElement("i", { className: "fa fa-spin fa-spinner" }),
+            " ",
+            T `Loading...`));
+    }
+    const renderTableset = (ts) => {
+        const name = expressions_1.ExprUtils.localizeString(ts.design.name, props.locale) || "";
+        // Check search
+        if (search &&
+            !name.toLowerCase().includes(search.toLowerCase()) &&
+            !ts.design.tables.some((t) => expressions_1.ExprUtils.localizeString(t.name).toLowerCase().includes(search.toLowerCase()))) {
+            return null;
+        }
+        const items = ts.design.tables
+            .filter((t) => !t.deprecated)
+            .map((t) => ({
+            name: expressions_1.ExprUtils.localizeString(t.name, props.locale),
+            onClick: () => selectTable(ts, t.id)
+        }));
+        const alreadyIncluded = props.extraTables.some((t) => (t || "").startsWith(`custom.${ts.code}.`));
+        return (react_2.default.createElement("div", { key: ts.code },
+            alreadyIncluded ? (react_2.default.createElement("div", { style: { float: "right" } },
+                react_2.default.createElement("button", { className: "btn btn-sm btn-link", type: "button", onClick: () => handleRemove(ts) },
+                    react_2.default.createElement("i", { className: "fa fa-remove" })))) : null,
+            react_2.default.createElement("h4", { className: "text-muted" }, name),
+            react_2.default.createElement(UIComponents_1.OptionListComponent, { items: items })));
+    };
+    const visibleTablesets = tablesets.filter((ts) => (showSystem || !ts.design.system) && !ts.design.deprecated);
+    return (react_2.default.createElement("div", null,
+        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: T `Search...` }),
+        visibleTablesets.map((ts) => renderTableset(ts)),
+        react_2.default.createElement("div", null,
+            react_2.default.createElement("button", { className: "btn btn-link btn-sm", onClick: () => setShowSystem(!showSystem) }, showSystem ? T `Hide system tables` : T `Show system tables`))));
+};
+exports.MWaterCustomTablesetListComponent = MWaterCustomTablesetListComponent;

package/lib/mwater_table_selection/MWaterMetricsTableListComponent.d.ts

@@ -0,0 +1,17 @@
+import { Schema } from "@mwater/expressions";
+import React from "react";
+/** Searchable list of metric tables */
+export declare const MWaterMetricsTableListComponent: (props: {
+    apiUrl: string;
+    schema: Schema;
+    client?: string;
+    /** User id */
+    user?: string;
+    /** Called with table selected */
+    onChange: (tableId: string | null) => void;
+    extraTables: string[];
+    onExtraTableAdd: (tableId: string) => void;
+    onExtraTableRemove: (tableId: string) => void;
+    /** e.g. "en" */
+    locale?: string;
+}) => React.JSX.Element;

package/lib/mwater_table_selection/MWaterMetricsTableListComponent.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.MWaterMetricsTableListComponent = 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");
+/** Searchable list of metric tables */
+const MWaterMetricsTableListComponent = (props) => {
+    const [metrics, setMetrics] = (0, react_1.useState)();
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [extraTableNeeded, setExtraTableNeeded] = (0, react_1.useState)();
+    // Get list of all metrics
+    (0, react_1.useEffect)(() => {
+        fetch(`${props.apiUrl}metrics?client=${props.client || ""}`)
+            .then((response) => response.json())
+            .then((body) => {
+            // Put included ones first
+            setMetrics(lodash_1.default.sortByAll(body, [
+                (m) => (props.extraTables.some((t) => (t = `metrics:${m._id}`)) ? 0 : 1),
+                (m) => expressions_1.ExprUtils.localizeString(m.design.name, props.locale)
+            ]));
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (extraTableNeeded && props.schema.getTable(extraTableNeeded)) {
+            props.onChange(extraTableNeeded);
+        }
+    });
+    const selectTable = (metric) => {
+        const qualifiedTableId = `metrics:${metric._id}`;
+        // If already included, select it
+        if (props.schema.getTable(qualifiedTableId)) {
+            props.onChange(qualifiedTableId);
+            return;
+        }
+        // Request extra tables as wildcard
+        setExtraTableNeeded(qualifiedTableId);
+        props.onExtraTableAdd(qualifiedTableId);
+    };
+    const handleRemove = (metric) => {
+        // Remove from extra tables
+        const match = props.extraTables.find((t) => t == `metrics:${metric._id}`);
+        if (match) {
+            if (confirm(T `Remove this table? Some widgets may not work correctly.`)) {
+                props.onChange(null);
+                props.onExtraTableRemove(match);
+            }
+        }
+    };
+    if (!metrics || extraTableNeeded) {
+        return (react_2.default.createElement("div", null,
+            react_2.default.createElement("i", { className: "fa fa-spin fa-spinner" }),
+            " ",
+            T `Loading...`));
+    }
+    const renderMetrics = () => {
+        const items = metrics
+            .filter((m) => !m.design.deprecated)
+            .map((m) => {
+            const alreadyIncluded = props.extraTables.some((t) => t == `metrics:${m._id}`);
+            return {
+                name: expressions_1.ExprUtils.localizeString(m.design.name, props.locale) || "",
+                onClick: () => selectTable(m),
+                onRemove: alreadyIncluded ? handleRemove.bind(null, m) : 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...` }),
+        renderMetrics()));
+};
+exports.MWaterMetricsTableListComponent = MWaterMetricsTableListComponent;