@mwater/visualization 5.5.0 → 5.6.1

package/lib/quickfilter/TextLiteralComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (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 async_1 = __importDefault(require("react-select/async"));
 const expressions_1 = require("@mwater/expressions");
 const expressions_2 = require("@mwater/expressions");
@@ -15,114 +14,118 @@ const expressions_2 = require("@mwater/expressions");
 class TextLiteralComponent extends react_1.default.Component {
     handleSingleChange = (val) => {
         const value = val ? val.value || null : null; // Blank is null
-        return this.props.onChange(value);
+        return this.props.onChange?.(value);
     };
     handleMultipleChange = (val) => {
         const value = val ? lodash_1.default.pluck(val, "value") : [];
         if (value.length > 0) {
-            return this.props.onChange(value);
+            return this.props.onChange?.(value);
         }
         else {
-            return this.props.onChange(null);
+            return this.props.onChange?.(null);
         }
     };
+    /**
+     * Load the options for the select. If multiple expressions are supplied, each
+     * is queried independently and the union of the results (unique values) is
+     * returned.
+     */
     getOptions = (input, cb) => {
-        // Determine type of expression
-        const filters = (this.props.filters || []).slice();
-        const exprUtils = new expressions_2.ExprUtils(this.props.schema);
-        const exprType = exprUtils.getExprType(this.props.expr);
-        // Create query to get matches
-        const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
-        if (!this.props.expr.table) {
+        // Normalise to array so we can treat single and multiple uniformly
+        const exprs = this.props.expr;
+        // Keep the unique set of text values that come back from each expression
+        const uniqueValues = new Set();
+        // Early exit if no expressions
+        if (exprs.length === 0) {
+            cb([]);
             return;
         }
-        // Add filter for input (simple if just text)
-        if (exprType === "text") {
-            if (input) {
-                filters.push({
-                    table: this.props.expr.table,
-                    jsonql: {
-                        type: "op",
-                        op: "~*",
-                        exprs: [
-                            exprCompiler.compileExpr({ expr: this.props.expr, tableAlias: "{alias}" }),
-                            escapeRegex(input) // Don't use _.escapeRegExp as adds weird backslashes that postgres doesn't like
-                        ]
-                    }
-                });
+        let remaining = exprs.length;
+        // Helper that is called after each async query completes
+        const maybeFinish = () => {
+            remaining -= 1;
+            if (remaining === 0) {
+                const result = Array.from(uniqueValues).map((value) => ({ value, label: value }));
+                cb(result);
             }
-        }
-        else if (exprType === "text[]") {
-            // Special filter for text[]
-            if (input) {
-                filters.push({
-                    table: "values",
-                    jsonql: {
-                        type: "op",
-                        op: "~*",
-                        exprs: [
-                            { type: "field", tableAlias: "{alias}", column: "value" },
-                            "^" + escapeRegex(input) // Don't use _.escapeRegExp as adds weird backslashes that postgres doesn't like
-                        ]
-                    }
-                });
+        };
+        // Execute a query for each expression
+        for (let i = 0; i < exprs.length; i++) {
+            const expr = exprs[i];
+            // Clone base filters for this expression so that each expression gets its own copy
+            const filters = (this.props.filters || []).slice();
+            const exprUtils = new expressions_2.ExprUtils(this.props.schema);
+            const exprType = exprUtils.getExprType(expr);
+            // Create query to get matches
+            const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+            const exprTable = exprUtils.getExprTable(expr);
+            if (!exprTable) {
+                maybeFinish();
+                return;
             }
-        }
-        else {
-            return;
-        }
-        // Execute query
-        this.props.quickfiltersDataSource.getValues(this.props.index, this.props.expr, filters, null, 250, (err, values) => {
-            if (err) {
+            // Add filter for the input text depending on expression type
+            if (exprType === "text") {
+                if (input) {
+                    filters.push({
+                        table: exprTable,
+                        jsonql: {
+                            type: "op",
+                            op: "~*",
+                            exprs: [
+                                exprCompiler.compileExpr({ expr, tableAlias: "{alias}" }),
+                                escapeRegex(input) // Avoid _.escapeRegExp to prevent extra backslashes that Postgres dislikes
+                            ]
+                        }
+                    });
+                }
+            }
+            else if (exprType === "text[]") {
+                if (input) {
+                    filters.push({
+                        table: "values",
+                        jsonql: {
+                            type: "op",
+                            op: "~*",
+                            exprs: [
+                                { type: "field", tableAlias: "{alias}", column: "value" },
+                                "^" + escapeRegex(input) // Avoid _.escapeRegExp to prevent extra backslashes that Postgres dislikes
+                            ]
+                        }
+                    });
+                }
+            }
+            else {
+                // Unsupported type – skip this expression
+                maybeFinish();
                 return;
             }
-            // Filter null and blank
-            values = lodash_1.default.filter(values, (value) => value);
-            return cb(lodash_1.default.map(values, (value) => ({
-                value,
-                label: value
-            })));
-        });
+            // Execute the data source query for this expression
+            this.props.quickfiltersDataSource.getValues(this.props.index + i, // Index of this quickfilter in the design
+            expr, filters, null, 250, (err, values = []) => {
+                if (!err && values) {
+                    // Filter out null / blank and add to unique set
+                    lodash_1.default.filter(values, (v) => v).forEach((v) => uniqueValues.add(v));
+                }
+                maybeFinish();
+            });
+        }
     };
     renderSingle() {
         const currentValue = this.props.value ? { value: this.props.value, label: this.props.value } : null;
-        return R(async_1.default, {
-            key: JSON.stringify(this.props.filters), // Include to force a change when filters change
-            placeholder: T `All`,
-            value: currentValue,
-            loadOptions: this.getOptions,
-            onChange: this.props.onChange ? this.handleSingleChange : undefined,
-            isClearable: true,
-            defaultOptions: true,
-            isDisabled: this.props.onChange == null,
-            noOptionsMessage: () => T `Type to search`,
-            styles: {
+        return react_1.default.createElement(async_1.default, { key: JSON.stringify(this.props.filters), placeholder: T `All`, value: currentValue, loadOptions: this.getOptions, onChange: this.props.onChange ? this.handleSingleChange : undefined, isClearable: true, defaultOptions: true, isDisabled: this.props.onChange == null, noOptionsMessage: () => T `Type to search`, styles: {
                 // Keep menu above fixed data table headers
                 menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
-            }
-        });
+            } });
     }
     renderMultiple() {
         const currentValue = this.props.value ? lodash_1.default.map(this.props.value, (v) => ({ value: v, label: v })) : null;
-        return R(async_1.default, {
-            placeholder: T `All`,
-            value: currentValue,
-            key: JSON.stringify(this.props.filters), // Include to force a change when filters change
-            isMulti: true,
-            loadOptions: this.getOptions,
-            defaultOptions: true,
-            onChange: this.props.onChange ? this.handleMultipleChange : undefined,
-            isClearable: true,
-            isDisabled: this.props.onChange == null,
-            noOptionsMessage: () => T `Type to search`,
-            styles: {
+        return react_1.default.createElement(async_1.default, { placeholder: T `All`, value: currentValue, key: JSON.stringify(this.props.filters), isMulti: true, loadOptions: this.getOptions, defaultOptions: true, onChange: this.props.onChange ? this.handleMultipleChange : undefined, isClearable: true, isDisabled: this.props.onChange == null, noOptionsMessage: () => T `Type to search`, styles: {
                 // Keep menu above fixed data table headers
                 menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
-            }
-        });
+            } });
     }
     render() {
-        return R("div", { style: { width: "100%" } }, this.props.multi ? this.renderMultiple() : this.renderSingle());
+        return react_1.default.createElement("div", { style: { width: "100%" } }, this.props.multi ? this.renderMultiple() : this.renderSingle());
     }
 }
 exports.default = TextLiteralComponent;

package/lib/widgets/MapWidget.js

@@ -91,7 +91,8 @@ class MapWidgetComponent extends react_1.default.Component {
         // Require here to prevent server require problems
         const MapDesignerComponent = require("../maps/MapDesignerComponent").default;
         // Create editor
-        const editor = react_1.default.createElement(MapDesignerComponent, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.state.editDesign, onDesignChange: this.handleEditDesignChange, filters: this.props.filters });
+        // Note: enableTranslations is false because translations are managed at the dashboard level
+        const editor = react_1.default.createElement(MapDesignerComponent, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.state.editDesign, onDesignChange: this.handleEditDesignChange, filters: this.props.filters, enableTranslations: false });
         // Create map (maxing out at half of width of screen)
         const width = Math.min(document.body.clientWidth / 2, this.props.width || 0);
         const height = ((this.props.height || 0) * width) / (this.props.width || 1);
@@ -123,9 +124,11 @@ class MapWidgetComponent extends react_1.default.Component {
             dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: this.handleStartEditing });
         }
         const handleDesignChange = (d) => this.setState({ transientDesign: d });
+        // Only allow single click to edit if there are no layers
+        const handleClick = this.props.onDesignChange != null && this.state.editDesign === null && this.props.design.layerViews.length == 0 ? this.handleStartEditing : undefined;
         // Wrap in a simple widget
-        return react_1.default.createElement("div", null,
+        return (react_1.default.createElement("div", { onClick: handleClick, style: { position: "relative", width: this.props.width } },
             this.props.onDesignChange != null ? this.renderEditor() : undefined,
-            react_1.default.createElement(DropdownWidgetComponent_1.default, { width: this.props.width, height: this.props.height, dropdownItems: dropdownItems }, this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height)));
+            react_1.default.createElement(DropdownWidgetComponent_1.default, { width: this.props.width, height: this.props.height, dropdownItems: dropdownItems }, this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height))));
     }
 }

package/lib/widgets/text/ExprItemEditorComponent.d.ts

@@ -10,6 +10,7 @@ export interface ExprItemEditorComponentProps {
     exprItem: HtmlItemExpr;
     /** Called with expr item */
     onChange: (exprItem: HtmlItemExpr) => void;
+    /** Optional table that will be filtered to have a single row present. Widget designer should optionally account for this */
     singleRowTable?: string;
 }
 interface ExprItemEditorComponentState {
@@ -22,13 +23,7 @@ export default class ExprItemEditorComponent extends React.Component<ExprItemEdi
     handleIncludeLabelChange: (value: any) => void;
     handleLabelTextChange: (ev: any) => void;
     handleFormatChange: (ev: any) => void;
-    renderFormat(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            paddingBottom: number;
-        };
-    }, HTMLElement>;
+    renderFormat(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/widgets/text/ExprItemEditorComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (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 expressions_1 = require("@mwater/expressions");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_ui_2 = require("@mwater/expressions-ui");
@@ -53,40 +52,44 @@ class ExprItemEditorComponent extends react_1.default.Component {
         if (!formats) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Format`), ": ", R("select", {
-            value: this.props.exprItem.format != null ? this.props.exprItem.format : (0, valueFormatter_2.getDefaultFormat)(exprType),
-            className: "form-select",
-            style: { width: "auto", display: "inline-block" },
-            onChange: this.handleFormatChange
-        }, lodash_1.default.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Format`),
+            ": ",
+            react_1.default.createElement("select", { value: this.props.exprItem.format != null ? this.props.exprItem.format : (0, valueFormatter_2.getDefaultFormat)(exprType), className: "form-select", style: { width: "auto", display: "inline-block" }, onChange: this.handleFormatChange }, lodash_1.default.map(formats, (format) => react_1.default.createElement("option", { key: format.value, value: format.value }, format.label)))));
     }
     render() {
-        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), ": ", R(expressions_ui_2.TableSelectComponent, {
-            schema: this.props.schema,
-            value: this.state.table,
-            onChange: this.handleTableChange
-        }), R("br")), this.state.table
-            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Field`), ": ", R(expressions_ui_1.ExprComponent, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                table: this.state.table,
-                types: ["text", "number", "enum", "date", "datetime", "boolean", "enumset", "geometry"],
-                value: this.props.exprItem.expr,
-                aggrStatuses: ["individual", "literal", "aggregate"],
-                onChange: this.handleExprChange
-            }))
-            : undefined, this.state.table && this.props.exprItem.expr
-            ? R("div", { className: "mb-3" }, react_1.default.createElement(bootstrap_1.Checkbox, { key: "includeLabel", value: this.props.exprItem.includeLabel, onChange: this.handleIncludeLabelChange }, T `Include Label`), this.props.exprItem.includeLabel
-                ? R("input", {
-                    key: "labelText",
-                    className: "form-control",
-                    type: "text",
-                    value: this.props.exprItem.labelText || "",
-                    onChange: this.handleLabelTextChange,
-                    placeholder: new expressions_1.ExprUtils(this.props.schema).summarizeExpr(this.props.exprItem.expr) + ": "
-                })
-                : undefined)
-            : undefined, this.renderFormat());
+        const exprValidator = new expressions_1.ExprValidator(this.props.schema);
+        const error = exprValidator.validateExpr(this.props.exprItem.expr, {
+            table: this.state.table,
+            aggrStatuses: ["individual", "literal", "aggregate"]
+        });
+        return (react_1.default.createElement("div", { style: { paddingBottom: 200 } },
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "text-muted" },
+                    react_1.default.createElement("i", { className: "fa fa-database" }),
+                    " ",
+                    T `Data Source`),
+                ": ",
+                react_1.default.createElement(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }),
+                react_1.default.createElement("br", null)),
+            this.state.table
+                ? (react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement("label", { className: "text-muted" }, T `Field`),
+                    ": ",
+                    react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.state.table, types: ["text", "number", "enum", "date", "datetime", "boolean", "enumset", "geometry"], value: this.props.exprItem.expr, aggrStatuses: ["individual", "literal", "aggregate"], onChange: this.handleExprChange })))
+                : undefined,
+            error ? react_1.default.createElement("div", { className: "alert alert-danger" },
+                react_1.default.createElement("i", { className: "fa fa-exclamation-circle" }),
+                " ",
+                error) : undefined,
+            this.state.table && this.props.exprItem.expr
+                ? (react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement(bootstrap_1.Checkbox, { key: "includeLabel", value: this.props.exprItem.includeLabel, onChange: this.handleIncludeLabelChange }, T `Include Label`),
+                    this.props.exprItem.includeLabel
+                        ? react_1.default.createElement("input", { key: "labelText", className: "form-control", type: "text", value: this.props.exprItem.labelText || "", onChange: this.handleLabelTextChange, placeholder: new expressions_1.ExprUtils(this.props.schema).summarizeExpr(this.props.exprItem.expr) + ": " })
+                        : undefined))
+                : undefined,
+            this.renderFormat()));
     }
 }
 exports.default = ExprItemEditorComponent;

package/lib/widgets/text/ExprUpdateModalComponent.d.ts

@@ -6,6 +6,7 @@ export interface ExprUpdateModalComponentProps {
     schema: Schema;
     /** Data source to use to get values */
     dataSource: DataSource;
+    /** Optional table that will be filtered to have a single row present. Widget designer should optionally account for this */
     singleRowTable?: string;
 }
 interface ExprUpdateModalComponentState {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.5.0",
+  "version": "5.6.1",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
@@ -36,7 +36,7 @@
     "d3-tip": "^0.9.0",
     "dayjs": "^1.11.10",
     "dompurify": "^1.0.11",
-    "ez-localize": "^2.13.0",
+    "ez-localize": "^2.15.0",
     "file-saver": "^2.0.5",
     "immer": "^8.0.0",
     "immutable-setter": "^1.1.1",
@@ -45,7 +45,7 @@
     "leaflet": "^1.8.0",
     "lodash": "^3.1.0",
     "lru-cache": "^6.0.0",
-    "maplibre-gl": "^3.3.1",
+    "maplibre-gl": "^5.16.0",
     "markdown-it": "^12.0.4",
     "moment": "^2.29.1",
     "p-queue": "^8.0.1",
@@ -74,7 +74,6 @@
     "xlsx-js-style": "^1.2.0"
   },
   "devDependencies": {
-    "@kadira/storybook": "^2.21.0",
     "@types/chai": "^4.3.0",
     "@types/color": "^3.0.2",
     "@types/d3": "^5.16.4",

package/src/ColorComponent.tsx

@@ -51,8 +51,8 @@ export default class ColorComponent extends React.Component<ColorComponentProps,
 
     const popupPosition: CSSProperties = {
       position: "fixed",
-      top: `${rect.bottom + window.scrollY}px`,
-      left: `${rect.left + window.scrollX}px`,
+      top: `${rect.bottom}px`,
+      left: `${rect.left}px`,
       zIndex: 1070,
       backgroundColor: "white",
       border: "solid 1px #DDD",

package/src/MWaterContextComponent.tsx

@@ -18,7 +18,7 @@ export interface GlobalFiltersElementFactoryProps {
   dataSource: DataSource
   filterableTables: string[]
   globalFilters?: GlobalFilter[]
-  onChange: (globalFilters: GlobalFilter[]) => void
+  onChange?: (globalFilters: GlobalFilter[]) => void
 
   /** If true, return null element if not applicable to filterableTables */
   nullIfIrrelevant?: boolean

package/src/{MWaterGlobalFiltersComponent.ts → MWaterGlobalFiltersComponent.tsx}

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { IdLiteralComponent } from "@mwater/expressions-ui"
@@ -14,12 +13,14 @@ export interface MWaterGlobalFiltersComponentProps {
   dataSource: DataSource
   filterableTables: string[]
   globalFilters?: GlobalFilter[]
-  onChange: (globalFilters: GlobalFilter[]) => void
+  onChange?: (globalFilters: GlobalFilter[]) => void
 }
 
 // Control to edit the global filters (_managed_by and admin_region)
 export default class MWaterGlobalFiltersComponent extends React.Component<MWaterGlobalFiltersComponentProps> {
   handleRegionsChange = (regions: any) => {
+    if (!this.props.onChange) { return }
+
     // Remove existing filter
     const globalFilters = _.filter(
       this.props.globalFilters || [],
@@ -40,6 +41,8 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
   }
 
   handleManagedByChange = (managedBy: any) => {
+    if (!this.props.onChange) { return }
+    
     // Remove existing filter
     const globalFilters = _.filter(
       this.props.globalFilters || [],
@@ -80,38 +83,34 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
       adminRegions = null
     }
 
-    return R(
-      "div",
-      null,
-      R(
-        ui.FormGroup,
-        { label: T`Only sites managed by`, labelMuted: true },
-        R(IdLiteralComponent, {
-          value: managedBy,
-          onChange: this.handleManagedByChange,
-          idTable: "groups",
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          placeholder: T`All Organizations`,
-          multi: false,
-          filter: { type: "field", tableAlias: "main", column: "canManageEntities" }
-        })
-      ),
+    return (
+      <div>
+        <ui.FormGroup label={T`Only sites managed by`} labelMuted={true}>
+          <IdLiteralComponent
+            value={managedBy}
+            onChange={ this.props.onChange ? this.handleManagedByChange : undefined}
+            idTable="groups"
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            placeholder={T`All Organizations`}
+            multi={false}
+            filter={{ type: "field", tableAlias: "main", column: "canManageEntities" }}
+          />
+        </ui.FormGroup>
 
-      R(
-        ui.FormGroup,
-        { label: T`Only sites located in`, labelMuted: true },
-        R(IdLiteralComponent, {
-          value: adminRegions,
-          onChange: this.handleRegionsChange,
-          idTable: "admin_regions",
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          placeholder: T`All Regions`,
-          multi: true,
-          orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]
-        })
-      )
+        <ui.FormGroup label={T`Only sites located in`} labelMuted={true}>
+          <IdLiteralComponent
+            value={adminRegions}
+            onChange={this.props.onChange ? this.handleRegionsChange : undefined}
+            idTable="admin_regions"
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            placeholder={T`All Regions`}
+            multi={true}
+            orderBy={[{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]}
+          />
+        </ui.FormGroup>
+      </div>
     )
   }
 }

package/src/{MWaterLoaderComponent.ts → MWaterLoaderComponent.tsx}

@@ -1,6 +1,5 @@
 import _ from "lodash"
-import React, { ReactElement } from "react"
-const R = React.createElement
+import React, { ReactElement, ReactNode } from "react"
 
 import { DataSource, Schema } from "@mwater/expressions"
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent"
@@ -26,7 +25,7 @@ export interface MWaterLoaderComponentProps {
   addLayerElementFactory?: AddLayerElementFactory
   children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any> | null
   /** 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: ReactNode) => ReactNode
   /** Origin of usage. e.g. "dashboards:43445364..." */
   origin?: string
 }
@@ -110,21 +109,21 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
     }
 
     // Inject context
-    return R(
-      MWaterContextComponent,
-      {
-        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!
-      })
+    return (
+      <MWaterContextComponent
+        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!
+        })}
+      </MWaterContextComponent>
     )
   }
 }