@mwater/visualization 5.0.0

package/lib/MWaterContextComponent.d.ts

@@ -0,0 +1,31 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Schema } from "@mwater/expressions";
+/** Creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
+ * and several other context items
+ */
+export default class MWaterContextComponent extends React.Component<{
+    apiUrl: string;
+    client?: string;
+    /**  user id of logged in user */
+    user?: string;
+    schema: Schema;
+    /**  Extra tables to load in schema. Forms are not loaded by default as they are too many */
+    extraTables?: string[];
+    /**  Called when extra tables are changed and schema will be reloaded */
+    onExtraTablesChange?: (extraTables: string[]) => void;
+    /**  Override default add layer component. See AddLayerComponent for details */
+    addLayerElementFactory?: any;
+}> {
+    static childContextTypes: {
+        tableSelectElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
+        addLayerElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
+        globalFiltersElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
+        decorateScalarExprTreeSectionChildren: PropTypes.Requireable<(...args: any[]) => any>;
+        isScalarExprTreeSectionInitiallyOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        isScalarExprTreeSectionMatch: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    getChildContext(): any;
+    handleAddTable: (table: any) => void;
+    render(): React.ReactNode;
+}

package/lib/MWaterContextComponent.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const prop_types_1 = __importDefault(require("prop-types"));
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const MWaterTableSelectComponent_1 = __importDefault(require("./MWaterTableSelectComponent"));
+const MWaterAddRelatedFormComponent_1 = __importDefault(require("./MWaterAddRelatedFormComponent"));
+const MWaterAddRelatedIndicatorComponent_1 = __importDefault(require("./MWaterAddRelatedIndicatorComponent"));
+const MWaterGlobalFiltersComponent_1 = __importDefault(require("./MWaterGlobalFiltersComponent"));
+/** Creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
+ * and several other context items
+ */
+class MWaterContextComponent extends react_1.default.Component {
+    static childContextTypes = {
+        tableSelectElementFactory: prop_types_1.default.func,
+        addLayerElementFactory: prop_types_1.default.func,
+        globalFiltersElementFactory: prop_types_1.default.func,
+        // Displays a component to edit global filters. nullIfIrrelevant causes null element if not applicable to filterableTables
+        // Decorates sections (the children element, specifically) in the expression picker
+        decorateScalarExprTreeSectionChildren: prop_types_1.default.func,
+        // Function to override initial open state of a section. Passed { tableId: id of table, section: section object from schema, filter: optional string filter }
+        // Should return true to set initially open
+        isScalarExprTreeSectionInitiallyOpen: prop_types_1.default.func,
+        // Function to override filtering of a section. Passed { tableId: id of table, section: section object from schema, filter: optional string filter }
+        // Should return null for default, true to include, false to exclude
+        isScalarExprTreeSectionMatch: prop_types_1.default.func
+    };
+    getChildContext() {
+        const context = {};
+        context.tableSelectElementFactory = (props) => {
+            return react_1.default.createElement(MWaterTableSelectComponent_1.default, {
+                apiUrl: this.props.apiUrl,
+                client: this.props.client,
+                schema: props.schema,
+                user: this.props.user,
+                table: props.value,
+                onChange: props.onChange,
+                extraTables: this.props.extraTables,
+                onExtraTablesChange: this.props.onExtraTablesChange,
+                filter: props.filter,
+                onFilterChange: props.onFilterChange
+            });
+        };
+        if (this.props.addLayerElementFactory) {
+            context.addLayerElementFactory = this.props.addLayerElementFactory;
+        }
+        context.globalFiltersElementFactory = (props) => {
+            if (props.nullIfIrrelevant && !lodash_1.default.any(props.filterableTables, (t) => t.match(/^entities./))) {
+                return null;
+            }
+            return react_1.default.createElement(MWaterGlobalFiltersComponent_1.default, props);
+        };
+        context.decorateScalarExprTreeSectionChildren = (options) => {
+            // If related forms section of entities table or assets table
+            if ((options.tableId.match(/^entities\./) || options.tableId.match(/^assets:/)) && options.section.id === "!related_forms") {
+                return R("div", { key: "_add_related_form_parent" }, options.children, R(MWaterAddRelatedFormComponent_1.default, {
+                    key: "_add_related_form",
+                    table: options.tableId,
+                    apiUrl: this.props.apiUrl,
+                    client: this.props.client,
+                    user: this.props.user,
+                    schema: this.props.schema,
+                    onSelect: this.handleAddTable
+                }));
+            }
+            // If indicators section of entities table
+            if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
+                return R("div", { key: "_add_related_indicator_parent" }, options.children, R(MWaterAddRelatedIndicatorComponent_1.default, {
+                    key: "_add_related_indicator",
+                    table: options.tableId,
+                    apiUrl: this.props.apiUrl,
+                    client: this.props.client,
+                    user: this.props.user,
+                    schema: this.props.schema,
+                    onSelect: this.handleAddTable,
+                    filter: options.filter
+                }));
+            }
+            else {
+                return options.children;
+            }
+        };
+        // Always match indicator section
+        context.isScalarExprTreeSectionMatch = (options) => {
+            if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
+                return true;
+            }
+            return null;
+        };
+        // Always open indicator section
+        context.isScalarExprTreeSectionInitiallyOpen = (options) => {
+            if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
+                return true;
+            }
+            return null;
+        };
+        return context;
+    }
+    handleAddTable = (table) => {
+        const extraTables = lodash_1.default.union(this.props.extraTables || [], [table]);
+        return this.props.onExtraTablesChange(extraTables);
+    };
+    render() {
+        return this.props.children;
+    }
+}
+exports.default = MWaterContextComponent;

package/lib/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 | undefined;
+    /** User id */
+    user?: string | undefined;
+    /** Called with table selected */
+    onChange: (tableId: string | null) => void;
+    extraTables: string[];
+    onExtraTableAdd: (tableId: string) => void;
+    onExtraTableRemove: (tableId: string) => void;
+    /** e.g. "en" */
+    locale?: string | undefined;
+}) => React.JSX.Element;

package/lib/MWaterCustomTablesetListComponent.js

@@ -0,0 +1,87 @@
+"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)();
+    // Get list of all tablesets
+    (0, react_1.useEffect)(() => {
+        fetch(`${props.apiUrl}custom_tablesets?client=${props.client || ""}`)
+            .then((response) => response.json())
+            .then((body) => {
+            // Put included ones first
+            setTablesets(lodash_1.default.sortByAll(body, [
+                (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("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" }),
+            " 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 })));
+    };
+    return (react_2.default.createElement("div", null,
+        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: "Search..." }),
+        tablesets.map((ts) => renderTableset(ts))));
+};
+exports.MWaterCustomTablesetListComponent = MWaterCustomTablesetListComponent;

package/lib/MWaterGlobalFiltersComponent.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface MWaterGlobalFiltersComponentProps {
+    /** Schema of the database */
+    schema: Schema;
+    /** Data source to use to get values */
+    dataSource: DataSource;
+    filterableTables: any;
+    globalFilters?: any;
+    onChange: any;
+}
+export default class MWaterGlobalFiltersComponent extends React.Component<MWaterGlobalFiltersComponentProps> {
+    handleRegionsChange: (regions: any) => any;
+    handleManagedByChange: (managedBy: any) => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/MWaterGlobalFiltersComponent.js

@@ -0,0 +1,103 @@
+"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 R = react_1.default.createElement;
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+// Control to edit the global filters (_managed_by and admin_region)
+class MWaterGlobalFiltersComponent extends react_1.default.Component {
+    handleRegionsChange = (regions) => {
+        // Remove existing filter
+        const globalFilters = lodash_1.default.filter(this.props.globalFilters || [], (gf) => !(gf.op === "within any" && gf.columnId === "admin_region"));
+        // Add new filter if present
+        if (regions && regions.length > 0) {
+            globalFilters.push({
+                columnId: "admin_region",
+                columnType: "id",
+                op: "within any",
+                exprs: [{ type: "literal", valueType: "id[]", idTable: "admin_regions", value: regions }]
+            });
+        }
+        return this.props.onChange(globalFilters);
+    };
+    handleManagedByChange = (managedBy) => {
+        // Remove existing filter
+        const globalFilters = lodash_1.default.filter(this.props.globalFilters || [], (gf) => !(gf.op === "within" && gf.columnId === "_managed_by"));
+        // Add new filter if present
+        if (managedBy) {
+            globalFilters.push({
+                columnId: "_managed_by",
+                columnType: "id",
+                op: "within",
+                exprs: [{ type: "literal", valueType: "id", idTable: "subjects", value: "group:" + managedBy }]
+            });
+        }
+        return this.props.onChange(globalFilters);
+    };
+    render() {
+        // Find managed by
+        let adminRegions, managedBy;
+        const managedByEntry = lodash_1.default.find(this.props.globalFilters, (gf) => gf.op === "within" && gf.columnId === "_managed_by");
+        if (managedByEntry) {
+            managedBy = managedByEntry.exprs[0].value.split(":")[1];
+        }
+        else {
+            managedBy = null;
+        }
+        // Find admin region
+        const adminRegionEntry = lodash_1.default.find(this.props.globalFilters, (gf) => gf.op === "within any" && gf.columnId === "admin_region");
+        if (adminRegionEntry) {
+            adminRegions = adminRegionEntry.exprs[0].value;
+        }
+        else {
+            adminRegions = null;
+        }
+        return R("div", null, R(ui.FormGroup, { label: "Only sites managed by", labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
+            value: managedBy,
+            onChange: this.handleManagedByChange,
+            idTable: "groups",
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            placeholder: "All Organizations",
+            multi: false,
+            filter: { type: "field", tableAlias: "main", column: "canManageEntities" }
+        })), R(ui.FormGroup, { label: "Only sites located in", labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
+            value: adminRegions,
+            onChange: this.handleRegionsChange,
+            idTable: "admin_regions",
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            placeholder: "All Regions",
+            multi: true,
+            orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]
+        })));
+    }
+}
+exports.default = MWaterGlobalFiltersComponent;

package/lib/MWaterLoaderComponent.d.ts

@@ -0,0 +1,42 @@
+import { ReactElement } from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
+/**
+ * Loads an mWater schema from the server and creates child with schema and dataSource
+ * Also creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
+ * and several other context items
+ */
+export default class MWaterLoaderComponent extends AsyncLoadComponent<{
+    apiUrl: string;
+    client?: string;
+    share?: string;
+    /**  user id of logged in user */
+    user?: string;
+    /**  Load schema as a specific user (for shared dashboards, etc) */
+    asUser?: string;
+    /**  Extra tables to load in schema. Forms are not loaded by default as they are too many */
+    extraTables?: string[];
+    /**  Called when extra tables are changed and schema will be reloaded */
+    onExtraTablesChange?: (extraTables: string[]) => void;
+    /** Locales of the schema to load. Default is all. */
+    locales?: string[];
+    /**  Override default add layer component. See AddLayerComponent for details */
+    addLayerElementFactory?: any;
+    children: (error: any, config?: {
+        schema: Schema;
+        dataSource: DataSource;
+    }) => ReactElement<any>;
+    /** Custom error formatter that returns React node or string, gets passed the error response from server */
+    errorFormatter: (data: any, defaultError: string) => string;
+}, {
+    error: any;
+    schema: Schema | null;
+    dataSource: DataSource | null;
+    loading: boolean;
+}> {
+    mounted: boolean;
+    constructor(props: any);
+    isLoadNeeded(newProps: any, oldProps: any): boolean;
+    load(props: any, prevProps: any, callback: any): void;
+    render(): any;
+}

package/lib/MWaterLoaderComponent.js

@@ -0,0 +1,77 @@
+"use strict";
+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 R = react_1.default.createElement;
+const AsyncLoadComponent_1 = __importDefault(require("@mwater/react-library/lib/AsyncLoadComponent"));
+const LoadingComponent_1 = __importDefault(require("@mwater/react-library/lib/LoadingComponent"));
+const mWaterLoader_1 = __importDefault(require("./mWaterLoader"));
+const MWaterContextComponent_1 = __importDefault(require("./MWaterContextComponent"));
+/**
+ * Loads an mWater schema from the server and creates child with schema and dataSource
+ * Also creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
+ * and several other context items
+ */
+class MWaterLoaderComponent extends AsyncLoadComponent_1.default {
+    mounted;
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            schema: null,
+            dataSource: null,
+            loading: false
+        };
+        this.mounted = false;
+    }
+    // Override to determine if a load is needed. Not called on mounting
+    isLoadNeeded(newProps, oldProps) {
+        return !lodash_1.default.isEqual(lodash_1.default.pick(newProps, "apiUrl", "client", "user", "share", "asUser", "extraTables", "locales"), lodash_1.default.pick(oldProps, "apiUrl", "client", "user", "share", "asUser", "extraTables", "locales"));
+    }
+    // Call callback with state changes
+    load(props, prevProps, callback) {
+        // Load schema and data source
+        return (0, mWaterLoader_1.default)({
+            apiUrl: props.apiUrl,
+            client: props.client,
+            share: props.share,
+            asUser: props.asUser,
+            extraTables: props.extraTables,
+            locales: props.locales
+        }, (error, config) => {
+            if (error) {
+                const defaultError = `Cannot load one of the forms that this depends on. Perhaps the administrator has not shared the form with you? Details: ${error.message}`;
+                if (this.props.errorFormatter) {
+                    return callback({ error: this.props.errorFormatter(JSON.parse(error.message), defaultError) });
+                }
+                return callback({ error: defaultError });
+            }
+            return callback({ schema: config.schema, dataSource: config.dataSource });
+        });
+    }
+    render() {
+        if (!this.state.schema && !this.state.error) {
+            return react_1.default.createElement(LoadingComponent_1.default);
+        }
+        if (this.state.error) {
+            return this.props.children(this.state.error);
+        }
+        // Inject context
+        return R(MWaterContextComponent_1.default, {
+            apiUrl: this.props.apiUrl,
+            client: this.props.client,
+            user: this.props.user,
+            schema: this.state.schema,
+            extraTables: this.props.extraTables,
+            onExtraTablesChange: this.props.onExtraTablesChange,
+            addLayerElementFactory: this.props.addLayerElementFactory
+        }, this.props.children(this.state.error, {
+            schema: this.state.schema,
+            dataSource: this.state.dataSource
+        }));
+    }
+}
+exports.default = MWaterLoaderComponent;

package/lib/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 | undefined;
+    /** User id */
+    user?: string | undefined;
+    /** Called with table selected */
+    onChange: (tableId: string | null) => void;
+    extraTables: string[];
+    onExtraTableAdd: (tableId: string) => void;
+    onExtraTableRemove: (tableId: string) => void;
+    /** e.g. "en" */
+    locale?: string | undefined;
+}) => React.JSX.Element;

package/lib/MWaterMetricsTableListComponent.js

@@ -0,0 +1,79 @@
+"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("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" }),
+            " 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: "Search..." }),
+        renderMetrics()));
+};
+exports.MWaterMetricsTableListComponent = MWaterMetricsTableListComponent;

package/lib/MWaterResponsesFilterComponent.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+export interface MWaterResponsesFilterComponentProps {
+    schema: Schema;
+    /** responses:xyz */
+    table: string;
+    filter?: any;
+    onFilterChange: any;
+}
+export default class MWaterResponsesFilterComponent extends React.Component<MWaterResponsesFilterComponentProps> {
+    getFilters(): any;
+    setFilters(filters: any): any;
+    getFinalFilter(): {
+        type: string;
+        op: string;
+        table: string;
+        exprs: ({
+            type: string;
+            table: string;
+            column: string;
+            valueType?: undefined;
+            value?: undefined;
+        } | {
+            type: string;
+            valueType: string;
+            value: string[];
+            table?: undefined;
+            column?: undefined;
+        })[];
+    };
+    isFinal(): boolean;
+    getSiteValue(): string | null;
+    handleSiteChange: (site: any) => any;
+    handleFinalChange: (final: any) => any;
+    handleChange: (final: any, site: any) => any;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            paddingLeft: number;
+            paddingTop: number;
+        };
+    }, HTMLElement>;
+}