@mwater/visualization 5.1.0 → 5.3.0

package/lib/MWaterCompleteTableSelectComponent.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const jquery_1 = __importDefault(require("jquery"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const querystring_1 = __importDefault(require("querystring"));
@@ -40,6 +39,7 @@ const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib
 const MWaterCustomTablesetListComponent_1 = require("./MWaterCustomTablesetListComponent");
 const MWaterMetricsTableListComponent_1 = require("./MWaterMetricsTableListComponent");
 const MWaterAssetSystemsListComponent_1 = require("./MWaterAssetSystemsListComponent");
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 const sitesOrder = {
     "entities.water_point": 1,
     "entities.sanitation_facility": 2,
@@ -59,7 +59,7 @@ const assetEntities = [
 ];
 // Allows selection of a table. Is the complete list mode of tables
 class MWaterCompleteTableSelectComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -98,8 +98,8 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             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, this.context.locale),
-                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                    name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                     onClick: this.props.onChange.bind(null, table.id)
                 };
             }))
@@ -147,8 +147,8 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
         return R(uiComponents.OptionListComponent, {
             items: lodash_1.default.map(sweetSenseTables, (table) => {
                 return {
-                    name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                    name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                     onClick: this.props.onChange.bind(null, table.id)
                 };
             })
@@ -164,7 +164,7 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             extraTables: this.props.extraTables,
             onExtraTableAdd: this.handleExtraTableAdd,
             onExtraTableRemove: this.handleExtraTableRemove,
-            locale: this.context.locale
+            locale: this.context
         });
     }
     renderMetrics() {
@@ -177,7 +177,7 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             extraTables: this.props.extraTables,
             onExtraTableAdd: this.handleExtraTableAdd,
             onExtraTableRemove: this.handleExtraTableRemove,
-            locale: this.context.locale
+            locale: this.context
         });
     }
     renderAssets() {
@@ -188,8 +188,8 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
                 continue;
             }
             items.push({
-                name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                 onClick: this.props.onChange.bind(null, table.id)
             });
         }
@@ -211,7 +211,7 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             extraTables: this.props.extraTables,
             onExtraTableAdd: this.handleExtraTableAdd,
             onExtraTableRemove: this.handleExtraTableRemove,
-            locale: this.context.locale
+            locale: this.context
         });
     }
     renderOther() {
@@ -258,8 +258,8 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
         return R(uiComponents.OptionListComponent, {
             items: lodash_1.default.map(otherTables, (table) => {
                 return {
-                    name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                    name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                     onClick: this.props.onChange.bind(null, table.id)
                 };
             })
@@ -308,7 +308,7 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
 exports.default = MWaterCompleteTableSelectComponent;
 // Searchable list of forms
 class FormsListComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -341,14 +341,14 @@ class FormsListComponent extends react_1.default.Component {
             // TODO use name instead of design.name
             this.setState({
                 forms: lodash_1.default.map(forms, (form) => {
-                    let desc = expressions_1.ExprUtils.localizeString(form.design.description, this.context.locale) || "";
+                    let desc = expressions_1.ExprUtils.localizeString(form.design.description, null) || "";
                     if (desc) {
                         desc += " - ";
                     }
                     desc += `Modified ${(0, moment_1.default)(form.modified?.on, moment_1.default.ISO_8601).format("ll")}`;
                     return {
                         id: form._id,
-                        name: expressions_1.ExprUtils.localizeString(form.design.name, this.context.locale),
+                        name: expressions_1.ExprUtils.localizeString(form.design.name, null),
                         desc
                     };
                 })
@@ -358,7 +358,7 @@ class FormsListComponent extends react_1.default.Component {
         });
     }
     handleTableRemove = (table) => {
-        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context.locale)}? Any widgets that depend on it will no longer work properly.`)) {
+        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
             return this.props.onExtraTableRemove(table.id);
         }
     };
@@ -391,8 +391,8 @@ class FormsListComponent extends react_1.default.Component {
             ? R(uiComponents.OptionListComponent, {
                 items: lodash_1.default.map(tables, (table) => {
                     return {
-                        name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                        name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                         onClick: this.props.onChange.bind(null, table.id),
                         onRemove: this.handleTableRemove.bind(null, table)
                     };
@@ -423,7 +423,7 @@ class FormsListComponent extends react_1.default.Component {
 }
 // Searchable list of indicators
 class IndicatorsListComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     addIndicatorConfirmPopup;
     constructor(props) {
         super(props);
@@ -445,13 +445,13 @@ class IndicatorsListComponent extends react_1.default.Component {
             indicators = lodash_1.default.sortByOrder(indicators, [
                 (indicator) => ((this.props.extraTables || []).includes("indicator_values:" + indicator._id) ? 0 : 1),
                 (indicator) => (indicator.design.recommended ? 0 : 1),
-                (indicator) => expressions_1.ExprUtils.localizeString(indicator.design.name, this.context.locale)
+                (indicator) => expressions_1.ExprUtils.localizeString(indicator.design.name, this.context)
             ], ["asc", "asc", "asc"]);
             return this.setState({
                 indicators: lodash_1.default.map(indicators, (indicator) => ({
                     id: indicator._id,
-                    name: expressions_1.ExprUtils.localizeString(indicator.design.name, this.context.locale),
-                    desc: expressions_1.ExprUtils.localizeString(indicator.design.desc, this.context.locale)
+                    name: expressions_1.ExprUtils.localizeString(indicator.design.name, this.context),
+                    desc: expressions_1.ExprUtils.localizeString(indicator.design.desc, this.context)
                 }))
             });
         }).fail((xhr) => {
@@ -459,7 +459,7 @@ class IndicatorsListComponent extends react_1.default.Component {
         });
     }
     handleTableRemove = (table) => {
-        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context.locale)}? Any widgets that depend on it will no longer work properly.`)) {
+        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
             return this.props.onExtraTableRemove(table.id);
         }
     };
@@ -506,8 +506,8 @@ class IndicatorsListComponent extends react_1.default.Component {
             ? R(uiComponents.OptionListComponent, {
                 items: lodash_1.default.map(tables, (table) => {
                     return {
-                        name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                        name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                         onClick: this.handleSelect.bind(null, table.id),
                         onRemove: this.handleTableRemove.bind(null, table)
                     };
@@ -537,7 +537,7 @@ class IndicatorsListComponent extends react_1.default.Component {
     }
 }
 class AddIndicatorConfirmPopupComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -559,8 +559,8 @@ class AddIndicatorConfirmPopupComponent extends react_1.default.Component {
 below, then find the indicator values in the 'Related Indicators' section. Or click on 'Use Raw Indicator' if you 
 are certain that you want to use the raw indicator table`), R(uiComponents.OptionListComponent, {
             items: lodash_1.default.map(entityColumns, (entityColumn) => ({
-                name: expressions_1.ExprUtils.localizeString(entityColumn.name, this.context.locale),
-                desc: expressions_1.ExprUtils.localizeString(entityColumn.desc, this.context.locale),
+                name: expressions_1.ExprUtils.localizeString(entityColumn.name, this.context),
+                desc: expressions_1.ExprUtils.localizeString(entityColumn.desc, this.context),
                 onClick: () => {
                     // Select table
                     this.props.onChange(entityColumn.join.toTable);
@@ -582,7 +582,7 @@ are certain that you want to use the raw indicator table`), R(uiComponents.Optio
 }
 // Searchable list of issue types
 class IssuesListComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -601,13 +601,13 @@ class IssuesListComponent extends react_1.default.Component {
             issueTypes = lodash_1.default.sortByOrder(issueTypes, [
                 (issueType) => ((this.props.extraTables || []).includes("issues:" + issueType._id) ? 0 : 1),
                 (issueType) => (issueType.created.by === this.props.user ? 0 : 1),
-                (issueType) => expressions_1.ExprUtils.localizeString(issueType.name, this.context.locale)
+                (issueType) => expressions_1.ExprUtils.localizeString(issueType.name, this.context)
             ], ["asc", "asc", "asc"]);
             return this.setState({
                 issueTypes: lodash_1.default.map(issueTypes, (issueType) => ({
                     id: issueType._id,
-                    name: expressions_1.ExprUtils.localizeString(issueType.name, this.context.locale),
-                    desc: expressions_1.ExprUtils.localizeString(issueType.desc, this.context.locale)
+                    name: expressions_1.ExprUtils.localizeString(issueType.name, this.context),
+                    desc: expressions_1.ExprUtils.localizeString(issueType.desc, this.context)
                 }))
             });
         }).fail((xhr) => {
@@ -615,7 +615,7 @@ class IssuesListComponent extends react_1.default.Component {
         });
     }
     handleTableRemove = (table) => {
-        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context.locale)}? Any widgets that depend on it will no longer work properly.`)) {
+        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
             return this.props.onExtraTableRemove(table.id);
         }
     };
@@ -648,8 +648,8 @@ class IssuesListComponent extends react_1.default.Component {
             ? R(uiComponents.OptionListComponent, {
                 items: lodash_1.default.map(tables, (table) => {
                     return {
-                        name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                        name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                         onClick: this.props.onChange.bind(null, table.id),
                         onRemove: this.handleTableRemove.bind(null, table)
                     };

package/lib/MWaterContextComponent.d.ts

@@ -1,7 +1,21 @@
-import PropTypes from "prop-types";
 import React from "react";
-import { Schema, Section } from "@mwater/expressions";
+import { DataSource, Schema, Section } from "@mwater/expressions";
 import { CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSectionChildrenOptions } from "@mwater/expressions-ui";
+import { GlobalFilter } from "./GlobalFilter";
+import { AddLayerComponentProps } from "./maps/AddLayerComponent";
+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>;
+export type AddLayerElementFactory = (props: AddLayerComponentProps) => React.ReactElement | null;
+export declare const AddLayerElementFactoryContext: React.Context<AddLayerElementFactory | undefined>;
 /**
  * Creates several contexts to allow selecting of a table in an mWater-friendly way
  * and several other context items
@@ -9,7 +23,7 @@ import { CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSection
 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 */
@@ -17,14 +31,10 @@ export default class MWaterContextComponent extends React.Component<{
     /**  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;
+    addLayerElementFactory?: AddLayerElementFactory;
 }> {
-    static childContextTypes: {
-        addLayerElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-        globalFiltersElementFactory: 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;

package/lib/MWaterContextComponent.js

@@ -1,11 +1,34 @@
 "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 prop_types_1 = __importDefault(require("prop-types"));
+exports.AddLayerElementFactoryContext = exports.GlobalFiltersElementFactoryContext = void 0;
 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"));
@@ -13,32 +36,22 @@ const MWaterAddRelatedIndicatorComponent_1 = __importDefault(require("./MWaterAd
 const MWaterGlobalFiltersComponent_1 = __importDefault(require("./MWaterGlobalFiltersComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_ui_2 = require("@mwater/expressions-ui");
+exports.GlobalFiltersElementFactoryContext = (0, react_1.createContext)(null);
+exports.AddLayerElementFactoryContext = (0, react_1.createContext)(undefined);
 /**
  * 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 = {
-        addLayerElementFactory: prop_types_1.default.func,
-        globalFiltersElementFactory: prop_types_1.default.func, // Call with props { schema, dataSource, filterableTables, globalFilters, onChange, nullIfIrrelevant }.
-        // Displays a component to edit global filters. nullIfIrrelevant causes null element if not applicable to filterableTables
-    };
     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 = {};
-        if (this.props.addLayerElementFactory) {
-            context.addLayerElementFactory = this.props.addLayerElementFactory;
+    createGlobalFiltersElementFactory = (props) => {
+        if (props.nullIfIrrelevant && !lodash_1.default.any(props.filterableTables, (t) => t.match(/^entities./))) {
+            return null;
         }
-        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);
-        };
-        return context;
-    }
+        return react_1.default.createElement(MWaterGlobalFiltersComponent_1.default, { ...props });
+    };
     isScalarExprTreeSectionMatch = (options) => {
         if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
             return true;
@@ -84,9 +97,12 @@ class MWaterContextComponent extends react_1.default.Component {
     };
     render() {
         return react_1.default.createElement(expressions_ui_1.CustomTableSelectComponentFactoryContext.Provider, { value: this.createTableSelectElementFactory },
-            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))));
+            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 },
+                            react_1.default.createElement(exports.AddLayerElementFactoryContext.Provider, { value: this.props.addLayerElementFactory }, 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,6 +1,8 @@
-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, { AddLayerElementFactory } from "./MWaterContextComponent";
 /**
  * Loads an mWater schema from the server and creates child with schema and dataSource
  * Also creates context to allow selecting of a table in an mWater-friendly way
@@ -21,13 +23,15 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<{
     /** Locales of the schema to load. Default is all. */
     locales?: string[];
     /**  Override default add layer component. See AddLayerComponent for details */
-    addLayerElementFactory?: any;
+    addLayerElementFactory?: AddLayerElementFactory;
     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;
+    /** Origin of usage. e.g. "dashboards:43445364..." */
+    origin?: string;
 }, {
     error: any;
     schema: Schema | null;
@@ -38,5 +42,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?: AddLayerElementFactory | undefined;
+    }, MWaterContextComponent>;
 }

package/lib/MWaterLoaderComponent.js

@@ -40,12 +40,21 @@ class MWaterLoaderComponent extends AsyncLoadComponent_1.default {
             share: props.share,
             asUser: props.asUser,
             extraTables: props.extraTables,
-            locales: props.locales
+            locales: props.locales,
+            origin: props.origin
         }, (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) });
+                    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

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { Schema } from "@mwater/expressions";
 export interface MWaterTableSelectComponentProps {
@@ -22,9 +21,7 @@ interface MWaterTableSelectComponentState {
     pendingExtraTable: any;
 }
 export default class MWaterTableSelectComponent extends React.Component<MWaterTableSelectComponentProps, MWaterTableSelectComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     toggleEdit: any;
     constructor(props: any);
     componentWillReceiveProps(nextProps: any): any;

package/lib/MWaterTableSelectComponent.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const UIComponents_1 = require("./UIComponents");
@@ -15,9 +14,7 @@ const MWaterCompleteTableSelectComponent_1 = __importDefault(require("./MWaterCo
 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, // e.g. "en"
-    };
+    static contextType = expressions_ui_1.LocaleContext;
     toggleEdit;
     constructor(props) {
         super(props);
@@ -96,9 +93,12 @@ class MWaterTableSelectComponent extends react_1.default.Component {
             },
             forceOpen: !this.props.table,
             label: this.props.table
-                ? expressions_1.ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context.locale)
+                ? expressions_1.ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context)
                 : "",
-            editor
+            editor,
+            onRemove: () => {
+                this.props.onChange(null);
+            }
         }), 
         // Make sure table still exists
         this.props.table &&
@@ -117,9 +117,7 @@ class MWaterTableSelectComponent extends react_1.default.Component {
 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, // e.g. "en"
-    };
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -158,7 +156,7 @@ class EditModeTableSelectComponent extends react_1.default.Component {
             }
         }
         // Sort by name
-        tables = lodash_1.default.sortBy(tables, (tableId) => expressions_1.ExprUtils.localizeString(this.props.schema.getTable(tableId).name, this.context.locale));
+        tables = lodash_1.default.sortBy(tables, (tableId) => expressions_1.ExprUtils.localizeString(this.props.schema.getTable(tableId).name, this.context));
         return tables;
     }
     handleCompleteChange = (tableId) => {
@@ -174,8 +172,8 @@ class EditModeTableSelectComponent extends react_1.default.Component {
                 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),
+                            name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                            desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                             onClick: () => this.props.onChange(table.id)
                         };
                     }) }),