@mwater/visualization 5.0.1 → 5.2.0

package/lib/GlobalFilter.d.ts

@@ -0,0 +1,13 @@
+import { Expr, LiteralType } from "@mwater/expressions";
+/** Global filters apply to multiple tables at once if a certain column is present. User-interface to set them
+ * is application-specific and the default (non-mWater) dashboard applies them but does not allow editing. */
+export interface GlobalFilter {
+    /** id of column to filter */
+    columnId: string;
+    /** type of column to filter (to ensure that consistent) */
+    columnType: LiteralType;
+    /** op of expression for filtering */
+    op: string;
+    /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
+    exprs: Expr[];
+}

package/lib/GlobalFilter.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/MWaterAddRelatedFormComponent.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { Schema } from "@mwater/expressions";
 export interface MWaterAddRelatedFormComponentProps {
-    /** Entities or assets table id */
+    /** Entities table id */
     table: string;
     apiUrl: string;
     client?: string;

package/lib/MWaterAddRelatedFormComponent.js

@@ -36,9 +36,8 @@ const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib
 const querystring_1 = __importDefault(require("querystring"));
 const expressions_1 = require("@mwater/expressions");
 const ui = __importStar(require("./UIComponents"));
-const formUtils = __importStar(require("@mwater/forms/lib/formUtils")); // TODO requireing this directly because of bizarre backbone issue
 // Link that when clicked popup up a modal window allowing user to select a form
-// with an Entity/Site question to the extraTables
+// with an Site question to the extraTables
 class MWaterAddRelatedFormComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -91,35 +90,29 @@ class AddRelatedFormModalComponent extends react_1.default.Component {
         };
     }
     componentDidMount() {
-        // Get all forms visible to user
+        // Get all forms visible to user that have _entity_types that include table
         const query = {};
-        query.selector = JSON.stringify({ state: { $ne: "deleted" } });
+        query.selector = JSON.stringify({
+            state: { $ne: "deleted" },
+            _entity_types: { $in: [this.props.table.split(".")[1]] }
+        });
+        query.fields = JSON.stringify({ "_id": 1, "design.name": 1, "modified": 1, "created": 1 });
         if (this.props.client) {
             query.client = this.props.client;
         }
-        // Get list of all form names
+        // Get list of related forms
         return jquery_1.default.getJSON(this.props.apiUrl + "forms?" + querystring_1.default.stringify(query), (forms) => {
             // Sort by modified.on desc but first by user
             forms = lodash_1.default.sortByOrder(forms, [(form) => (form.created.by === this.props.user ? 1 : 0), (form) => form.modified.on], ["desc", "desc"]);
-            // Filter by Entity and Site questions of tableId type
-            if (this.props.table.startsWith("entities.")) {
-                forms = lodash_1.default.filter(forms, (form) => formUtils.findEntityQuestion(form.design, this.props.table.split(".")[1]));
-            }
-            else if (this.props.table.startsWith("assets:")) {
-                const assetSystemId = parseInt(this.props.table.split(":")[1]);
-                forms = forms.filter((form) => {
-                    return formUtils.findAssetQuestion(form.design, assetSystemId) != null;
-                });
-            }
             // Get _id, name, and description
             const items = lodash_1.default.map(forms, (form) => ({
                 name: expressions_1.ExprUtils.localizeString(form.design.name, this.context.locale),
                 desc: `Modified ${(0, moment_1.default)(form.modified.on, moment_1.default.ISO_8601).format("ll")}`,
                 onClick: this.props.onSelect.bind(null, "responses:" + form._id)
             }));
-            return this.setState({ items });
+            this.setState({ items });
         }).fail((xhr) => {
-            return this.setState({ error: xhr.responseText });
+            this.setState({ error: xhr.responseText });
         });
     }
     renderContents() {

package/lib/MWaterCompleteTableSelectComponent.d.ts

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import React from "react";
 import * as uiComponents from "./UIComponents";
 import { Schema } from "@mwater/expressions";
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
 interface MWaterCompleteTableSelectComponentProps {
     /** Url to hit api */
     apiUrl: string;
@@ -180,15 +181,7 @@ declare class AddIndicatorConfirmPopupComponent extends React.Component<AddIndic
     renderContents(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedReactHTMLElement<{
         className: string;
     }, HTMLElement>;
-    render(): React.CElement<{
-        showCloseX: boolean;
-        onClose: () => void;
-        header: string;
-    }, React.Component<{
-        showCloseX: boolean;
-        onClose: () => void;
-        header: string;
-    }, any, any>> | null;
+    render(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
 }
 interface IssuesListComponentProps {
     /** Url to hit api */

package/lib/MWaterContextComponent.d.ts

@@ -1,13 +1,27 @@
 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
+import { DataSource, Schema, Section } from "@mwater/expressions";
+import { CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSectionChildrenOptions } from "@mwater/expressions-ui";
+import { GlobalFilter } from "./GlobalFilter";
+export interface GlobalFiltersElementFactoryProps {
+    schema: Schema;
+    dataSource: DataSource;
+    filterableTables: string[];
+    globalFilters?: GlobalFilter[];
+    onChange: (globalFilters: GlobalFilter[]) => void;
+    /** If true, return null element if not applicable to filterableTables */
+    nullIfIrrelevant?: boolean;
+}
+export type GlobalFiltersElementFactory = (props: GlobalFiltersElementFactoryProps) => React.ReactElement | null;
+export declare const GlobalFiltersElementFactoryContext: React.Context<GlobalFiltersElementFactory | null>;
+/**
+ * Creates several contexts 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 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 */
@@ -18,14 +32,22 @@ export default class MWaterContextComponent extends React.Component<{
     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>;
     };
+    createTableSelectElementFactory: (options: CustomTableSelectComponentFactoryOptions) => React.JSX.Element;
     getChildContext(): any;
+    createGlobalFiltersElementFactory: (props: GlobalFiltersElementFactoryProps) => React.JSX.Element | null;
+    isScalarExprTreeSectionMatch: (options: {
+        tableId: string;
+        section: Section;
+        filter?: string;
+    }) => true | null;
+    isScalarExprTreeSectionInitiallyOpen: (options: {
+        tableId: string;
+        section: Section;
+        filter?: string;
+    }) => boolean;
+    decorateScalarExprTreeSectionChildren: (options: DecorateScalarExprTreeSectionChildrenOptions) => React.ReactNode;
     handleAddTable: (table: any) => void;
-    render(): React.ReactNode;
+    render(): React.JSX.Element;
 }

package/lib/MWaterContextComponent.js

@@ -1,108 +1,117 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalFiltersElementFactoryContext = void 0;
 const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(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
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_ui_2 = require("@mwater/expressions-ui");
+exports.GlobalFiltersElementFactoryContext = (0, react_1.createContext)(null);
+/**
+ * Creates several contexts 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
+        addLayerElementFactory: prop_types_1.default.func, // Call with props of AddLayerComponent
+    };
+    createTableSelectElementFactory = (options) => {
+        return (react_1.default.createElement(MWaterTableSelectComponent_1.default, { apiUrl: this.props.apiUrl, client: this.props.client, schema: options.schema, user: this.props.user, table: options.value ?? undefined, onChange: options.onChange, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange, filter: options.filter, onFilterChange: options.onFilterChange }));
     };
     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;
-        };
-        // Nothing initially open
-        context.isScalarExprTreeSectionInitiallyOpen = (options) => {
-            return null;
-        };
         return context;
     }
+    createGlobalFiltersElementFactory = (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 });
+    };
+    isScalarExprTreeSectionMatch = (options) => {
+        if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
+            return true;
+        }
+        return null;
+    };
+    isScalarExprTreeSectionInitiallyOpen = (options) => {
+        return false;
+    };
+    decorateScalarExprTreeSectionChildren = (options) => {
+        // If related forms section of entities table or assets table
+        if (options.tableId.match(/^entities\./) && 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;
+        }
+    };
     handleAddTable = (table) => {
         const extraTables = lodash_1.default.union(this.props.extraTables || [], [table]);
         return this.props.onExtraTablesChange(extraTables);
     };
     render() {
-        return this.props.children;
+        return react_1.default.createElement(expressions_ui_1.CustomTableSelectComponentFactoryContext.Provider, { value: this.createTableSelectElementFactory },
+            react_1.default.createElement(exports.GlobalFiltersElementFactoryContext.Provider, { value: this.createGlobalFiltersElementFactory },
+                react_1.default.createElement(expressions_ui_2.IsScalarExprTreeSectionMatchContext.Provider, { value: this.isScalarExprTreeSectionMatch },
+                    react_1.default.createElement(expressions_ui_2.IsScalarExprTreeSectionInitiallyOpenContext.Provider, { value: this.isScalarExprTreeSectionInitiallyOpen },
+                        react_1.default.createElement(expressions_ui_1.DecorateScalarExprTreeSectionChildrenContext.Provider, { value: this.decorateScalarExprTreeSectionChildren }, this.props.children)))),
+            "    ");
     }
 }
 exports.default = MWaterContextComponent;

package/lib/MWaterCustomTablesetListComponent.js

@@ -15,13 +15,16 @@ 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((body) => {
+            .then((tablesets) => {
+            // Filter out non-normal
+            tablesets = tablesets.filter((ts) => ts.type === "normal");
             // Put included ones first
-            setTablesets(lodash_1.default.sortByAll(body, [
+            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)
             ]));
@@ -80,8 +83,11 @@ const MWaterCustomTablesetListComponent = (props) => {
             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: "Search..." }),
-        tablesets.map((ts) => renderTableset(ts))));
+        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 ? "Hide system tables" : "Show system tables"))));
 };
 exports.MWaterCustomTablesetListComponent = MWaterCustomTablesetListComponent;

package/lib/MWaterGlobalFiltersComponent.d.ts

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

package/lib/MWaterGlobalFiltersComponent.js

@@ -45,7 +45,7 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
                 exprs: [{ type: "literal", valueType: "id[]", idTable: "admin_regions", value: regions }]
             });
         }
-        return this.props.onChange(globalFilters);
+        this.props.onChange(globalFilters);
     };
     handleManagedByChange = (managedBy) => {
         // Remove existing filter
@@ -59,12 +59,12 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
                 exprs: [{ type: "literal", valueType: "id", idTable: "subjects", value: "group:" + managedBy }]
             });
         }
-        return this.props.onChange(globalFilters);
+        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");
+        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];
         }
@@ -72,7 +72,7 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
             managedBy = null;
         }
         // Find admin region
-        const adminRegionEntry = lodash_1.default.find(this.props.globalFilters, (gf) => gf.op === "within any" && gf.columnId === "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;
         }

package/lib/MWaterLoaderComponent.d.ts

@@ -1,9 +1,11 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
+import LoadingComponent from "@mwater/react-library/lib/LoadingComponent";
+import MWaterContextComponent from "./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
+ * Also creates context to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 export default class MWaterLoaderComponent extends AsyncLoadComponent<{
@@ -27,7 +29,7 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<{
         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;
+    errorFormatter?: (data: any, defaultError: string) => string;
 }, {
     error: any;
     schema: Schema | null;
@@ -38,5 +40,13 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<{
     constructor(props: any);
     isLoadNeeded(newProps: any, oldProps: any): boolean;
     load(props: any, prevProps: any, callback: any): void;
-    render(): any;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.CElement<import("@mwater/react-library/lib/LoadingComponent").LoadingComponentProps, LoadingComponent> | React.CElement<{
+        apiUrl: string;
+        client?: string | undefined;
+        user?: string | undefined;
+        schema: Schema;
+        extraTables?: string[] | undefined;
+        onExtraTablesChange?: ((extraTables: string[]) => void) | undefined;
+        addLayerElementFactory?: any;
+    }, MWaterContextComponent>;
 }

package/lib/MWaterLoaderComponent.js

@@ -12,7 +12,7 @@ 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
+ * Also creates context to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 class MWaterLoaderComponent extends AsyncLoadComponent_1.default {
@@ -45,7 +45,15 @@ class MWaterLoaderComponent extends AsyncLoadComponent_1.default {
             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) });
+                    try {
+                        const parsedError = JSON.parse(error.message);
+                        if (parsedError) {
+                            return callback({ error: this.props.errorFormatter(parsedError, defaultError) });
+                        }
+                    }
+                    catch (e) {
+                        // Ignore
+                    }
                 }
                 return callback({ error: defaultError });
             }

package/lib/MWaterTableSelectComponent.d.ts

@@ -24,7 +24,6 @@ interface MWaterTableSelectComponentState {
 export default class MWaterTableSelectComponent extends React.Component<MWaterTableSelectComponentProps, MWaterTableSelectComponentState> {
     static contextTypes: {
         locale: PropTypes.Requireable<string>;
-        activeTables: PropTypes.Requireable<string[]>;
     };
     toggleEdit: any;
     constructor(props: any);

package/lib/MWaterTableSelectComponent.js

@@ -12,12 +12,11 @@ const expressions_1 = require("@mwater/expressions");
 const MWaterResponsesFilterComponent_1 = __importDefault(require("./MWaterResponsesFilterComponent"));
 const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
 const MWaterCompleteTableSelectComponent_1 = __importDefault(require("./MWaterCompleteTableSelectComponent"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
 // Allows selection of a mwater-visualization table. Loads forms as well and calls event if modified
 class MWaterTableSelectComponent extends react_1.default.Component {
     static contextTypes = {
-        locale: prop_types_1.default.string,
-        // Optional list of tables (ids) being used. Use this to present an initially short list to select from
-        activeTables: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired)
+        locale: prop_types_1.default.string, // e.g. "en"
     };
     toggleEdit;
     constructor(props) {
@@ -119,9 +118,7 @@ exports.default = MWaterTableSelectComponent;
 // Is the table select component when in edit mode. Toggles between complete list and simplified list
 class EditModeTableSelectComponent extends react_1.default.Component {
     static contextTypes = {
-        locale: prop_types_1.default.string,
-        // Optional list of tables (ids) being used. Use this to present an initially short list to select from
-        activeTables: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired)
+        locale: prop_types_1.default.string, // e.g. "en"
     };
     constructor(props) {
         super(props);
@@ -136,8 +133,8 @@ class EditModeTableSelectComponent extends react_1.default.Component {
     // Get list of tables that should be included in shortlist
     // This is all active tables and all responses tables in schema (so as to include rosters) and all extra tables
     // Also includes current table
-    getTableShortlist() {
-        let tables = this.context.activeTables || [];
+    getTableShortlist(activeTables) {
+        let tables = activeTables;
         // Remove dead tables
         tables = tables.filter((t) => this.props.schema.getTable(t) != null && !this.props.schema.getTable(t).deprecated);
         tables = lodash_1.default.union(tables, lodash_1.default.filter(lodash_1.default.pluck(this.props.schema.getTables(), "id"), (t) => t.match(/^responses:/)));
@@ -169,38 +166,20 @@ class EditModeTableSelectComponent extends react_1.default.Component {
         return this.props.onChange(tableId);
     };
     render() {
-        const items = lodash_1.default.map(this.getTableShortlist(), (tableId) => {
-            const table = this.props.schema.getTable(tableId);
-            return {
-                name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
-                onClick: this.props.onChange.bind(null, table.id)
-            };
-        });
-        return R("div", null, this.state.completeMode
-            ? R(ModalPopupComponent_1.default, {
-                header: "Select Data Source",
-                onClose: () => this.setState({ completeMode: false }),
-                showCloseX: true,
-                size: "x-large"
-            }, R(MWaterCompleteTableSelectComponent_1.default, {
-                apiUrl: this.props.apiUrl,
-                client: this.props.client,
-                schema: this.props.schema,
-                user: this.props.user,
-                table: this.props.table,
-                onChange: this.handleCompleteChange,
-                extraTables: this.props.extraTables,
-                onExtraTablesChange: this.props.onExtraTablesChange
-            }))
-            : undefined, items.length > 0
-            ? [
-                R("div", { className: "text-muted" }, "Select Data Source:"),
-                R(UIComponents_1.OptionListComponent, { items }),
-                R("div", null, items.length > 0
-                    ? R("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleShowMore }, "Show All Available Data Sources...")
-                    : undefined)
-            ]
-            : R("button", { type: "button", className: "btn btn-link", onClick: this.handleShowMore }, "Select Data Source..."));
+        return (react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Consumer, null, activeTables => (react_1.default.createElement("div", null,
+            this.state.completeMode ? (react_1.default.createElement(ModalPopupComponent_1.default, { header: "Select Data Source", onClose: () => this.setState({ completeMode: false }), showCloseX: true, size: "x-large" },
+                react_1.default.createElement(MWaterCompleteTableSelectComponent_1.default, { apiUrl: this.props.apiUrl, client: this.props.client, schema: this.props.schema, user: this.props.user, table: this.props.table, onChange: this.handleCompleteChange, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange }))) : null,
+            this.getTableShortlist(activeTables).length > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "text-muted" }, "Select Data Source:"),
+                react_1.default.createElement(UIComponents_1.OptionListComponent, { items: this.getTableShortlist(activeTables).map((tableId) => {
+                        const table = this.props.schema.getTable(tableId);
+                        return {
+                            name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
+                            desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                            onClick: () => this.props.onChange(table.id)
+                        };
+                    }) }),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleShowMore }, "Show All Available Data Sources...")))) : (react_1.default.createElement("button", { type: "button", className: "btn btn-link", onClick: this.handleShowMore }, "Select Data Source..."))))));
     }
 }