@mwater/visualization 5.1.0 → 5.2.0

package/lib/dashboards/SettingsModalComponent.js

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -38,9 +37,9 @@ const DashboardUtils = __importStar(require("./DashboardUtils"));
 const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
 const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerComponent"));
+const MWaterContextComponent_1 = require("../MWaterContextComponent");
 // Popup with settings for dashboard
 class SettingsModalComponent extends react_1.default.Component {
-    static contextTypes = { globalFiltersElementFactory: prop_types_1.default.func };
     constructor(props) {
         super(props);
         this.state = {
@@ -81,42 +80,29 @@ class SettingsModalComponent extends react_1.default.Component {
                 label: language.en + " (" + language.name + ")"
             };
         });
-        return R(ActionCancelModalComponent_1.default, {
-            size: "large",
-            onCancel: this.handleCancel,
-            onAction: this.handleSave
-        }, R("div", { style: { paddingBottom: 200 } }, R("h4", null, "Quick Filters"), R("div", { className: "text-muted" }, "Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets."), filterableTables.length > 0
-            ? R(QuickfiltersDesignComponent_1.default, {
-                design: this.state.design.quickfilters || [],
-                onDesignChange: (design) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { quickfilters: { $set: design } })),
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                tables: filterableTables
-            })
-            : "Nothing to quickfilter. Add widgets to the dashboard", R("h4", { style: { paddingTop: 10 } }, "Filters"), R("div", { className: "text-muted" }, "Filters are built in to the dashboard and cannot be changed by viewers of the dashboard."), filterableTables.length > 0
-            ? R(FiltersDesignerComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                filters: this.state.design.filters,
-                onFiltersChange: this.handleFiltersChange,
-                filterableTables
-            })
-            : "Nothing to filter. Add widgets to the dashboard", this.context.globalFiltersElementFactory
-            ? R("div", null, R("h4", { style: { paddingTop: 10 } }, "Global Filters"), this.context.globalFiltersElementFactory({
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                filterableTables,
-                globalFilters: this.state.design.globalFilters || [],
-                onChange: this.handleGlobalFiltersChange
-            }))
-            : undefined, R("h4", { style: { paddingTop: 10 } }, "Language"), R("div", { className: "text-muted" }, "Controls the preferred language of widgets and uses specified language when available"), R(react_select_1.default, {
-            value: lodash_1.default.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null,
-            options: localeOptions,
-            onChange: (locale) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { locale: { $set: locale.value } }))
-        }), R("h4", { style: { paddingTop: 10 } }, "Advanced"), R(ui.Checkbox, {
-            value: this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true,
-            onChange: (value) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { implicitFiltersEnabled: { $set: value } }))
-        }, "Enable Implicit Filtering (leave unchecked for new dashboards)")));
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { size: "large", onCancel: this.handleCancel, onAction: this.handleSave },
+            react_1.default.createElement("div", { style: { paddingBottom: 200 } },
+                react_1.default.createElement("h4", null, "Quick Filters"),
+                react_1.default.createElement("div", { className: "text-muted" }, "Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets."),
+                filterableTables.length > 0 ? (react_1.default.createElement(QuickfiltersDesignComponent_1.default, { design: this.state.design.quickfilters || [], onDesignChange: (design) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { quickfilters: { $set: design } })), schema: this.props.schema, dataSource: this.props.dataSource, tables: filterableTables })) : ("Nothing to quickfilter. Add widgets to the dashboard"),
+                react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Filters"),
+                react_1.default.createElement("div", { className: "text-muted" }, "Filters are built in to the dashboard and cannot be changed by viewers of the dashboard."),
+                filterableTables.length > 0 ? (react_1.default.createElement(FiltersDesignerComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, filters: this.state.design.filters, onFiltersChange: this.handleFiltersChange, filterableTables: filterableTables })) : ("Nothing to filter. Add widgets to the dashboard"),
+                react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, globalFiltersElementFactory => globalFiltersElementFactory ? (react_1.default.createElement("div", null,
+                    react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Global Filters"),
+                    globalFiltersElementFactory({
+                        schema: this.props.schema,
+                        dataSource: this.props.dataSource,
+                        filterableTables,
+                        globalFilters: this.state.design.globalFilters || [],
+                        onChange: this.handleGlobalFiltersChange
+                    }))) : undefined),
+                react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Language"),
+                react_1.default.createElement("div", { className: "text-muted" }, "Controls the preferred language of widgets and uses specified language when available"),
+                react_1.default.createElement(react_select_1.default, { value: lodash_1.default.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null, options: localeOptions, onChange: (locale) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { locale: { $set: locale.value } })) }),
+                this.state.design.implicitFiltersEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Advanced"),
+                    react_1.default.createElement(ui.Checkbox, { value: this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true, onChange: (value) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { implicitFiltersEnabled: { $set: value } })) }, "Enable Implicit Filtering (leave unchecked for new dashboards)"))))));
     }
 }
 exports.default = SettingsModalComponent;

package/lib/datagrids/DatagridComponent.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { DataSource, Expr, Schema } from "@mwater/expressions";
 import DatagridViewComponent, { RowUpdate } from "./DatagridViewComponent";
 import FindReplaceModalComponent from "./FindReplaceModalComponent";
@@ -115,14 +116,6 @@ declare class DatagridEditorComponent extends React.Component<DatagridEditorComp
     design: DatagridDesign;
 }> {
     constructor(props: DatagridEditorComponentProps);
-    render(): React.CElement<{
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, React.Component<{
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, any, any>>;
+    render(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent>;
 }
 export {};

package/lib/datagrids/DatagridDataSource.d.ts

@@ -1,10 +1,10 @@
 import { Row } from "@mwater/expressions";
 import { DatagridDesign, JsonQLFilter } from "..";
 import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource";
-export default class DatagridDataSource {
+export default interface DatagridDataSource {
     /** Gets the rows specified */
-    getRows(design: DatagridDesign, offset: number, limit: number, filters: JsonQLFilter[] | undefined, callback: (error: any, rows: Row[]) => void): void;
-    countRows(design: DatagridDesign, filters: JsonQLFilter[] | undefined, callback: (error: any, numRows: number) => void): void;
+    getRows(design: DatagridDesign, offset: number, limit: number, filters: JsonQLFilter[] | undefined, callback: (error: any, rows?: Row[]) => void): void;
+    countRows(design: DatagridDesign, filters: JsonQLFilter[] | undefined, callback: (error: any, numRows?: number) => void): void;
     /** Gets the quickfilters data source */
     getQuickfiltersDataSource(): QuickfiltersDataSource;
 }

package/lib/datagrids/DatagridDataSource.js

@@ -1,16 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-class DatagridDataSource {
-    /** Gets the rows specified */
-    getRows(design, offset, limit, filters, callback) {
-        throw new Error("Not implemented");
-    }
-    countRows(design, filters, callback) {
-        throw new Error("Not implemented");
-    }
-    /** Gets the quickfilters data source */
-    getQuickfiltersDataSource() {
-        throw new Error("Not implemented");
-    }
-}
-exports.default = DatagridDataSource;

package/lib/datagrids/DatagridDesignerComponent.d.ts

@@ -1,7 +1,6 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
-import { DatagridDesignColumn } from "./DatagridDesign";
+import TabbedComponent from "@mwater/react-library/lib/TabbedComponent";
 import { DatagridDesign } from "..";
 export interface DatagridDesignerComponentProps {
     /** schema to use */
@@ -14,101 +13,11 @@ export interface DatagridDesignerComponentProps {
     onDesignChange: (design: DatagridDesign) => void;
 }
 export default class DatagridDesignerComponent extends React.Component<DatagridDesignerComponentProps> {
-    static contextTypes: {
-        globalFiltersElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-    };
     handleTableChange: (table: any) => void;
     handleColumnsChange: (columns: any) => void;
     handleFilterChange: (filter: any) => void;
     handleGlobalFiltersChange: (globalFilters: any) => void;
     handleOrderBysChange: (orderBys: any) => void;
-    renderTabs(): React.CElement<{
-        initialTabId: string;
-        tabs: ({
-            id: string;
-            label: string;
-            elem: React.CElement<ColumnsDesignerComponentProps, ColumnsDesignerComponent>;
-        } | {
-            id: string;
-            label: string;
-            elem: React.DetailedReactHTMLElement<{
-                style: {
-                    marginBottom: number;
-                };
-            }, HTMLElement>;
-        })[];
-    }, React.Component<{
-        initialTabId: string;
-        tabs: ({
-            id: string;
-            label: string;
-            elem: React.CElement<ColumnsDesignerComponentProps, ColumnsDesignerComponent>;
-        } | {
-            id: string;
-            label: string;
-            elem: React.DetailedReactHTMLElement<{
-                style: {
-                    marginBottom: number;
-                };
-            }, HTMLElement>;
-        })[];
-    }, any, any>>;
+    renderTabs(): React.CElement<any, TabbedComponent>;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 }
-interface ColumnsDesignerComponentProps {
-    /** schema to use */
-    schema: Schema;
-    /** dataSource to use */
-    dataSource: DataSource;
-    table: string;
-    /** Columns list See README.md of this folder */
-    columns: any;
-    onColumnsChange: any;
-}
-declare class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentProps> {
-    handleColumnChange: (columnIndex: any, column: any) => any;
-    handleAddColumn: () => any;
-    handleAddIdColumn: () => any;
-    handleAddDefaultColumns: () => any;
-    handleRemoveAllColumns: () => any;
-    renderColumn: (column: DatagridDesignColumn, columnIndex: any, connectDragSource: any, connectDragPreview: any, connectDropTarget: any) => React.CElement<ColumnDesignerComponentProps, ColumnDesignerComponent>;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            height: string;
-            overflowY: "auto";
-            overflowX: "hidden";
-        };
-    }, HTMLElement>;
-}
-interface ColumnDesignerComponentProps {
-    /** schema to use */
-    schema: Schema;
-    /** dataSource to use */
-    dataSource: DataSource;
-    table: string;
-    /** Column See README.md of this folder */
-    column: DatagridDesignColumn;
-    /** Called when column changes. Null to remove. Array to replace with multiple entries */
-    onColumnChange: (column: DatagridDesignColumn | null | DatagridDesignColumn[]) => void;
-    /** Connect drag source (handle) here */
-    connectDragSource: any;
-    /** Connect drag preview here */
-    connectDragPreview: any;
-    connectDropTarget: any;
-}
-declare class ColumnDesignerComponent extends React.Component<ColumnDesignerComponentProps> {
-    handleExprChange: (expr: any) => void;
-    handleLabelChange: (label: any) => void;
-    handleFormatChange: (ev: any) => void;
-    handleSplitEnumset: () => void;
-    handleSplitGeometry: () => void;
-    renderSplit(): React.DetailedReactHTMLElement<{
-        className: string;
-        onClick: () => void;
-    }, HTMLElement> | null;
-    renderFormat(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    render: () => any;
-}
-export {};

package/lib/datagrids/DatagridDesignerComponent.js

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importStar(require("react"));
 const R = react_1.default.createElement;
@@ -47,9 +46,9 @@ const update_object_1 = __importDefault(require("update-object"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const valueFormatter_1 = require("../valueFormatter");
 const valueFormatter_2 = require("../valueFormatter");
+const MWaterContextComponent_1 = require("../MWaterContextComponent");
 // Designer for the datagrid. Currenly allows only single-table designs (no subtable rows)
 class DatagridDesignerComponent extends react_1.default.Component {
-    static contextTypes = { globalFiltersElementFactory: prop_types_1.default.func };
     handleTableChange = (table) => {
         const design = {
             table,
@@ -95,8 +94,8 @@ class DatagridDesignerComponent extends react_1.default.Component {
                         table: this.props.design.table,
                         value: this.props.design.filter,
                         onChange: this.handleFilterChange
-                    }), this.context.globalFiltersElementFactory
-                        ? R("div", { style: { marginTop: 20 } }, this.context.globalFiltersElementFactory({
+                    }), react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, (globalFiltersElementFactory) => globalFiltersElementFactory
+                        ? R("div", { style: { marginTop: 20 } }, globalFiltersElementFactory({
                             schema: this.props.schema,
                             dataSource: this.props.dataSource,
                             filterableTables: [this.props.design.table],
@@ -104,7 +103,7 @@ class DatagridDesignerComponent extends react_1.default.Component {
                             onChange: this.handleGlobalFiltersChange,
                             nullIfIrrelevant: true
                         }))
-                        : undefined)
+                        : undefined))
                 },
                 {
                     id: "order",
@@ -378,7 +377,10 @@ class ColumnDesignerComponent extends react_1.default.Component {
             aggrStatuses: ["literal", "individual", "aggregate"],
             types: allowedTypes,
             onChange: this.handleExprChange
-        }), this.renderSplit(), this.renderFormat(), error ? R("i", { className: "fa fa-exclamation-circle text-danger" }) : undefined), R("div", { className: "col-4" }, R("input", {
+        }), this.renderSplit(), this.renderFormat(), error ? react_1.default.createElement("span", { className: "text-danger" },
+            react_1.default.createElement("i", { className: "fa fa-exclamation-circle" }),
+            " ",
+            error) : undefined), R("div", { className: "col-4" }, R("input", {
             type: "text",
             className: "form-control",
             placeholder: exprUtils.summarizeExpr(this.props.column.expr),

package/lib/datagrids/DatagridViewComponent.js

@@ -202,7 +202,7 @@ class DatagridViewComponent extends react_1.default.Component {
         this.editCellComp = comp;
     };
     handleRowDoubleClick = (ev, rowIndex) => {
-        if (this.props.onRowDoubleClick != null && this.state.rows[rowIndex].id) {
+        if (this.props.onRowDoubleClick != null && this.state.rows[rowIndex]?.id) {
             this.props.onRowDoubleClick(this.props.design.table, this.state.rows[rowIndex].id, rowIndex);
         }
     };

package/lib/datagrids/FindReplaceModalComponent.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 import { RowUpdate } from "./DatagridViewComponent";
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
 import { DataSource, Expr, Schema } from "@mwater/expressions";
 import { DatagridDesign, JsonQLFilter } from "..";
 export interface FindReplaceModalComponentProps {
@@ -27,26 +29,8 @@ export default class FindReplaceModalComponent extends React.Component<FindRepla
     constructor(props: any);
     show(): void;
     performReplace(): Promise<void>;
-    renderPreview(): React.CElement<any, React.Component<any, any, any>>;
+    renderPreview(): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent>;
     renderContents(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    render(): React.CElement<{
-        size: string;
-        header: string;
-        footer: React.DetailedReactHTMLElement<{
-            key: string;
-            type: string;
-            onClick: () => void;
-            className: string;
-        }, HTMLElement>[];
-    }, React.Component<{
-        size: string;
-        header: string;
-        footer: React.DetailedReactHTMLElement<{
-            key: string;
-            type: string;
-            onClick: () => void;
-            className: string;
-        }, HTMLElement>[];
-    }, any, any>> | null;
+    render(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
 }
 export {};

package/lib/datagrids/FindReplaceModalComponent.js

@@ -38,6 +38,17 @@ class FindReplaceModalComponent extends react_1.default.Component {
         const design = this.props.design;
         // Get expr of replace column
         const replaceExpr = lodash_1.default.findWhere(this.props.design.columns, { id: this.state.replaceColumn }).expr;
+        const exprType = exprUtils.getExprType(this.state.withExpr);
+        let compiledWithExpr = exprCompiler.compileExpr({ expr: this.state.withExpr, tableAlias: "main" });
+        if (exprType === "geometry") {
+            compiledWithExpr = {
+                type: "op",
+                op: "ST_AsGeoJSON",
+                exprs: [
+                    { type: "op", op: "ST_Transform", exprs: [{ type: "op", op: "::geometry", exprs: [compiledWithExpr] }, 4326] }
+                ]
+            };
+        }
         // Get ids and with value, filtered by filters, design.filter and conditionExpr (if present)
         const query = {
             type: "query",
@@ -53,7 +64,7 @@ class FindReplaceModalComponent extends react_1.default.Component {
                 },
                 {
                     type: "select",
-                    expr: exprCompiler.compileExpr({ expr: this.state.withExpr, tableAlias: "main" }),
+                    expr: compiledWithExpr,
                     alias: "withValue"
                 }
             ],
@@ -80,7 +91,12 @@ class FindReplaceModalComponent extends react_1.default.Component {
                 continue;
             }
             // Create expr
-            let expr = { type: "op", op: filter.op, table: design.table, exprs: [columnExpr].concat(filter.exprs) };
+            let expr = {
+                type: "op",
+                op: filter.op,
+                table: design.table,
+                exprs: [columnExpr].concat(filter.exprs)
+            };
             // Clean expr
             expr = exprCleaner.cleanExpr(expr, { table: design.table });
             wheres.push(exprCompiler.compileExpr({ expr, tableAlias: "main" }));
@@ -103,7 +119,7 @@ class FindReplaceModalComponent extends react_1.default.Component {
             await this.props.updateExprValues(this.props.design.table, rows.map(row => ({
                 primaryKey: row.id,
                 expr: replaceExpr,
-                value: row.withValue
+                value: exprType === "geometry" ? JSON.parse(row.withValue) : row.withValue
             })));
             alert(T("Successfully replaced {0} values", rows.length));
             this.setState({ open: false });
@@ -134,7 +150,8 @@ class FindReplaceModalComponent extends react_1.default.Component {
                     // Unchanged
                     else: replaceColumn.expr
                 };
-                replaceColumn.label = replaceColumn.label || exprUtils.summarizeExpr(replaceColumn.expr, this.props.design.locale);
+                replaceColumn.label =
+                    replaceColumn.label || exprUtils.summarizeExpr(replaceColumn.expr, this.props.design.locale);
             }
             // Add filter
             if (this.state.conditionExpr) {
@@ -143,10 +160,7 @@ class FindReplaceModalComponent extends react_1.default.Component {
                         type: "op",
                         op: "and",
                         table: this.props.design.table,
-                        exprs: [
-                            draft.filter,
-                            this.state.conditionExpr
-                        ]
+                        exprs: [draft.filter, this.state.conditionExpr]
                     };
                 }
                 else {
@@ -173,8 +187,8 @@ class FindReplaceModalComponent extends react_1.default.Component {
         let value;
         const exprUtils = new expressions_1.ExprUtils(this.props.schema);
         // Determine which columns are replace-able. Excludes subtables and aggregates
-        const replaceColumns = lodash_1.default.filter(this.props.design.columns, (column) => !column.subtable && exprUtils.getExprAggrStatus(column.expr) === "individual");
-        const replaceColumnOptions = lodash_1.default.map(replaceColumns, (column) => ({
+        const replaceColumns = lodash_1.default.filter(this.props.design.columns, column => !column.subtable && exprUtils.getExprAggrStatus(column.expr) === "individual");
+        const replaceColumnOptions = lodash_1.default.map(replaceColumns, column => ({
             value: column.id,
             label: column.label || exprUtils.summarizeExpr(column.expr, this.props.design.locale)
         }));
@@ -189,7 +203,7 @@ class FindReplaceModalComponent extends react_1.default.Component {
             placeholder: T("Select Column..."),
             styles: {
                 // Keep menu above fixed data table headers
-                menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2 })
+                menu: style => lodash_1.default.extend({}, style, { zIndex: 2 })
             }
         })), (() => {
             if (this.state.replaceColumn) {
@@ -200,7 +214,7 @@ class FindReplaceModalComponent extends react_1.default.Component {
                     dataSource: this.props.dataSource,
                     table: this.props.design.table,
                     value: this.state.withExpr,
-                    onChange: (value) => this.setState({ withExpr: value }),
+                    onChange: value => this.setState({ withExpr: value }),
                     types: [exprUtils.getExprType(replaceExpr)],
                     enumValues: exprUtils.getExprEnumValues(replaceExpr) || undefined,
                     idTable: exprUtils.getExprIdTable(replaceExpr) || undefined,
@@ -215,7 +229,7 @@ class FindReplaceModalComponent extends react_1.default.Component {
             dataSource: this.props.dataSource,
             table: this.props.design.table,
             value: this.state.conditionExpr,
-            onChange: (value) => this.setState({ conditionExpr: value }),
+            onChange: value => this.setState({ conditionExpr: value }),
             types: ["boolean"],
             placeholder: T("All Rows")
         })), R("div", { key: "preview" }, R("h4", null, T("Preview")), this.renderPreview()));

package/lib/datagrids/ServerDatagridDataSource.d.ts

@@ -14,7 +14,7 @@ export interface ServerDatagridDataSourceOptions {
     rev?: number;
 }
 /** Uses mWater server to get datagrid data to allow sharing with unprivileged users */
-export default class ServerDatagridDataSource extends DatagridDataSource {
+export default class ServerDatagridDataSource implements DatagridDataSource {
     options: ServerDatagridDataSourceOptions;
     constructor(options: ServerDatagridDataSourceOptions);
     getRows(design: DatagridDesign, offset: any, limit: any, filters: any, callback: any): JQuery.jqXHR<any>;

package/lib/datagrids/ServerDatagridDataSource.js

@@ -5,10 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jquery_1 = __importDefault(require("jquery"));
 const querystring_1 = __importDefault(require("querystring"));
-const DatagridDataSource_1 = __importDefault(require("./DatagridDataSource"));
 const compressJson_1 = __importDefault(require("../compressJson"));
 /** Uses mWater server to get datagrid data to allow sharing with unprivileged users */
-class ServerDatagridDataSource extends DatagridDataSource_1.default {
+class ServerDatagridDataSource {
     options;
     // options:
     //   apiUrl: API url to use for talking to mWater server
@@ -17,7 +16,6 @@ class ServerDatagridDataSource extends DatagridDataSource_1.default {
     //   datagridId: datagrid id to use on server
     //   rev: revision to use to allow caching
     constructor(options) {
-        super();
         this.options = options;
     }
     // Get the data that the widget needs. The widget should implement getData method (see above) to get the data from the server

package/lib/demo.js

@@ -389,7 +389,7 @@ class WaterOrgDashboardPane extends react_1.default.Component {
         };
     }
     componentWillMount() {
-        const url = this.props.apiUrl + "jsonql/schema";
+        const url = this.props.apiUrl + "schema";
         return jquery_1.default.getJSON(url, (schemaJson) => {
             const schema = new expressions_1.Schema(schemaJson);
             const dataSource = new MWaterDataSource_1.default(this.props.apiUrl, null, { serverCaching: false, localCaching: true });

package/lib/index.d.ts

@@ -51,6 +51,7 @@ export { default as AxisBuilder } from "./axes/AxisBuilder";
 export { default as ColorSchemeFactory } from "./ColorSchemeFactory";
 export { default as DatagridComponent } from "./datagrids/DatagridComponent";
 export { default as DatagridViewComponent } from "./datagrids/DatagridViewComponent";
+export { default as DatagridDataSource } from "./datagrids/DatagridDataSource";
 export { default as ServerDashboardDataSource } from "./dashboards/ServerDashboardDataSource";
 export { default as ServerMapDataSource } from "./maps/ServerMapDataSource";
 export { default as DirectMapDataSource } from "./maps/DirectMapDataSource";

package/lib/layouts/blocks/BlocksDisplayComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 import HorizontalBlockComponent from "./HorizontalBlockComponent";
 import { LayoutBlock } from "./blockUtils";
 export interface BlocksDisplayComponentProps {
@@ -38,7 +39,7 @@ declare class BlocksDisplayComponent extends React.Component<BlocksDisplayCompon
             left: number;
         };
     }, HTMLElement>;
-    render(): React.CElement<any, React.Component<any, any, any>> | React.DetailedReactHTMLElement<{
+    render(): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent> | React.DetailedReactHTMLElement<{
         style: {
             width: string;
             height: string;

package/lib/layouts/grid/GridLayoutManager.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import LayoutManager from "../LayoutManager";
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 export default class GridLayoutManager extends LayoutManager {
     renderPalette(width: any): React.DetailedReactHTMLElement<{
         className: string;
@@ -11,7 +12,7 @@ export default class GridLayoutManager extends LayoutManager {
             width: number;
         };
     }, HTMLElement>;
-    renderLayout(options: any): React.CElement<any, React.Component<any, any, any>>;
+    renderLayout(options: any): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent>;
     isEmpty(items: any): boolean;
     getWidgetTypeAndDesign(items: any, widgetId: any): any;
     getAllWidgets(items: any): {

package/lib/maps/BufferLayer.js

@@ -96,7 +96,9 @@ class BufferLayer extends Layer_1.default {
             sourceLayers: [{ id: "circles", jsonql: jsonql }],
             ctes: [],
             mapLayers: mapLayers,
-            mapLayersHandleClicks: [`${sourceId}:fill`]
+            mapLayersHandleClicks: [`${sourceId}:fill`],
+            minZoom: this.getMinZoom(design),
+            maxZoom: this.getMaxZoom(design)
         };
     }
     createJsonQL(design, schema, filters) {

package/lib/maps/ClusterLayer.js

@@ -90,7 +90,9 @@ class ClusterLayer extends Layer_1.default {
             sourceLayers: [{ id: "clusters", jsonql: jsonql }],
             ctes: [],
             mapLayers: mapLayers,
-            mapLayersHandleClicks: [`${sourceId}:circles-single`, `${sourceId}:circles-multiple`]
+            mapLayersHandleClicks: [`${sourceId}:circles-single`, `${sourceId}:circles-multiple`],
+            minZoom: this.getMinZoom(design),
+            maxZoom: this.getMaxZoom(design)
         };
     }
     createJsonQL(design, schema, filters) {

package/lib/maps/GridLayer.js

@@ -51,7 +51,9 @@ class GridLayer extends Layer_1.default {
             sourceLayers: [{ id: "grid", jsonql: jsonql }],
             ctes: [],
             mapLayers: mapLayers,
-            mapLayersHandleClicks: [`${sourceId}:fill`]
+            mapLayersHandleClicks: [`${sourceId}:fill`],
+            minZoom: this.getMinZoom(design),
+            maxZoom: this.getMaxZoom(design)
         };
     }
     createJsonQL(design, schema, filters) {
@@ -544,9 +546,9 @@ class GridLayer extends Layer_1.default {
     // }
     // Get min and max zoom levels
     getMinZoom(design) {
-        // Determine if too zoomed out to safely display (zoom 6 at 20000 is limit)
+        // Determine if too zoomed out to safely display (200x200, so size = 4e7/(2^zoom) < 200)
         if (design.sizeUnits === "meters") {
-            const minSafeZoom = Math.log2(1280000.0 / (design.size || 20000));
+            const minSafeZoom = Math.log2(200000.0 / (design.size || 20000));
             if (design.minZoom) {
                 return Math.max(design.minZoom, minSafeZoom);
             }

package/lib/maps/GridLayerDesigner.js

@@ -79,7 +79,6 @@ class GridLayerDesigner extends react_1.default.Component {
             this.update((d) => {
                 d.sizeUnits = sizeUnits;
                 d.size = 20000;
-                d.minZoom = 6;
             });
         }
     };

package/lib/maps/LayerSwitcherComponent.js

@@ -72,7 +72,7 @@ function LayerSwitcherComponent(props) {
         }) },
         react_1.default.createElement("div", { style: iconStyle, onClick: toggleDropdown },
             react_1.default.createElement("i", { className: "fas fa-layer-group fa-fw" })),
-        dropdownOpen ? (react_1.default.createElement("div", { style: { backgroundColor: "white", padding: 5 } }, props.design.layerViews.map(renderLayerView))) : null));
+        dropdownOpen ? (react_1.default.createElement("div", { style: { backgroundColor: "white", padding: 5, textAlign: "left" } }, props.design.layerViews.map(renderLayerView))) : null));
 }
 exports.LayerSwitcherComponent = LayerSwitcherComponent;
 /** Hook for click outside catching */

package/lib/maps/MapComponent.d.ts

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React, { ReactNode } from "react";
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 import UndoStack from "../UndoStack";
 import { DataSource, Schema } from "@mwater/expressions";
 import { MapDataSource } from "./MapDataSource";
@@ -60,13 +61,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
     getDesign(): MapDesign;
     handleToggleDesignPanel: () => void;
     getQuickfilterValues: () => any[];
-    renderView(): React.CElement<{
-        injectWidth: boolean;
-        injectHeight: boolean;
-    }, React.Component<{
-        injectWidth: boolean;
-        injectHeight: boolean;
-    }, any, any>>;
+    renderView(): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent>;
     getCompiledFilters(): {
         table: string;
         jsonql: import("@mwater/jsonql").JsonQLExpr;