@mwater/visualization 5.0.1 → 5.1.0

package/lib/MWaterAddRelatedFormComponent.d.ts

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

package/lib/MWaterAddRelatedFormComponent.js

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

package/lib/MWaterContextComponent.d.ts

@@ -1,7 +1,9 @@
 import PropTypes from "prop-types";
 import React from "react";
-import { Schema } from "@mwater/expressions";
-/** Creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
+import { Schema, Section } from "@mwater/expressions";
+import { CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSectionChildrenOptions } from "@mwater/expressions-ui";
+/**
+ * Creates several contexts to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 export default class MWaterContextComponent extends React.Component<{
@@ -18,14 +20,22 @@ export default class MWaterContextComponent extends React.Component<{
     addLayerElementFactory?: any;
 }> {
     static childContextTypes: {
-        tableSelectElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
         addLayerElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
         globalFiltersElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-        decorateScalarExprTreeSectionChildren: PropTypes.Requireable<(...args: any[]) => any>;
-        isScalarExprTreeSectionInitiallyOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        isScalarExprTreeSectionMatch: PropTypes.Requireable<(...args: any[]) => any>;
     };
+    createTableSelectElementFactory: (options: CustomTableSelectComponentFactoryOptions) => React.JSX.Element;
     getChildContext(): any;
+    isScalarExprTreeSectionMatch: (options: {
+        tableId: string;
+        section: Section;
+        filter?: string;
+    }) => true | null;
+    isScalarExprTreeSectionInitiallyOpen: (options: {
+        tableId: string;
+        section: Section;
+        filter?: string;
+    }) => boolean;
+    decorateScalarExprTreeSectionChildren: (options: DecorateScalarExprTreeSectionChildrenOptions) => React.ReactNode;
     handleAddTable: (table: any) => void;
-    render(): React.ReactNode;
+    render(): React.JSX.Element;
 }

package/lib/MWaterContextComponent.js

@@ -11,40 +11,23 @@ const MWaterTableSelectComponent_1 = __importDefault(require("./MWaterTableSelec
 const MWaterAddRelatedFormComponent_1 = __importDefault(require("./MWaterAddRelatedFormComponent"));
 const MWaterAddRelatedIndicatorComponent_1 = __importDefault(require("./MWaterAddRelatedIndicatorComponent"));
 const MWaterGlobalFiltersComponent_1 = __importDefault(require("./MWaterGlobalFiltersComponent"));
-/** Creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_ui_2 = require("@mwater/expressions-ui");
+/**
+ * Creates several contexts to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 class MWaterContextComponent extends react_1.default.Component {
     static childContextTypes = {
-        tableSelectElementFactory: prop_types_1.default.func,
         addLayerElementFactory: prop_types_1.default.func,
-        globalFiltersElementFactory: prop_types_1.default.func,
+        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
-        // Decorates sections (the children element, specifically) in the expression picker
-        decorateScalarExprTreeSectionChildren: prop_types_1.default.func,
-        // Function to override initial open state of a section. Passed { tableId: id of table, section: section object from schema, filter: optional string filter }
-        // Should return true to set initially open
-        isScalarExprTreeSectionInitiallyOpen: prop_types_1.default.func,
-        // Function to override filtering of a section. Passed { tableId: id of table, section: section object from schema, filter: optional string filter }
-        // Should return null for default, true to include, false to exclude
-        isScalarExprTreeSectionMatch: prop_types_1.default.func
+    };
+    createTableSelectElementFactory = (options) => {
+        return (react_1.default.createElement(MWaterTableSelectComponent_1.default, { apiUrl: this.props.apiUrl, client: this.props.client, schema: options.schema, user: this.props.user, table: options.value ?? undefined, onChange: options.onChange, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange, filter: options.filter, onFilterChange: options.onFilterChange }));
     };
     getChildContext() {
         const context = {};
-        context.tableSelectElementFactory = (props) => {
-            return react_1.default.createElement(MWaterTableSelectComponent_1.default, {
-                apiUrl: this.props.apiUrl,
-                client: this.props.client,
-                schema: props.schema,
-                user: this.props.user,
-                table: props.value,
-                onChange: props.onChange,
-                extraTables: this.props.extraTables,
-                onExtraTablesChange: this.props.onExtraTablesChange,
-                filter: props.filter,
-                onFilterChange: props.onFilterChange
-            });
-        };
         if (this.props.addLayerElementFactory) {
             context.addLayerElementFactory = this.props.addLayerElementFactory;
         }
@@ -54,55 +37,56 @@ class MWaterContextComponent extends react_1.default.Component {
             }
             return react_1.default.createElement(MWaterGlobalFiltersComponent_1.default, props);
         };
-        context.decorateScalarExprTreeSectionChildren = (options) => {
-            // If related forms section of entities table or assets table
-            if ((options.tableId.match(/^entities\./) || options.tableId.match(/^assets:/)) && options.section.id === "!related_forms") {
-                return R("div", { key: "_add_related_form_parent" }, options.children, R(MWaterAddRelatedFormComponent_1.default, {
-                    key: "_add_related_form",
-                    table: options.tableId,
-                    apiUrl: this.props.apiUrl,
-                    client: this.props.client,
-                    user: this.props.user,
-                    schema: this.props.schema,
-                    onSelect: this.handleAddTable
-                }));
-            }
-            // If indicators section of entities table
-            if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
-                return R("div", { key: "_add_related_indicator_parent" }, options.children, R(MWaterAddRelatedIndicatorComponent_1.default, {
-                    key: "_add_related_indicator",
-                    table: options.tableId,
-                    apiUrl: this.props.apiUrl,
-                    client: this.props.client,
-                    user: this.props.user,
-                    schema: this.props.schema,
-                    onSelect: this.handleAddTable,
-                    filter: options.filter
-                }));
-            }
-            else {
-                return options.children;
-            }
-        };
-        // Always match indicator section
-        context.isScalarExprTreeSectionMatch = (options) => {
-            if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
-                return true;
-            }
-            return null;
-        };
-        // Nothing initially open
-        context.isScalarExprTreeSectionInitiallyOpen = (options) => {
-            return null;
-        };
         return context;
     }
+    isScalarExprTreeSectionMatch = (options) => {
+        if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
+            return true;
+        }
+        return null;
+    };
+    isScalarExprTreeSectionInitiallyOpen = (options) => {
+        return false;
+    };
+    decorateScalarExprTreeSectionChildren = (options) => {
+        // If related forms section of entities table or assets table
+        if (options.tableId.match(/^entities\./) && options.section.id === "!related_forms") {
+            return R("div", { key: "_add_related_form_parent" }, options.children, R(MWaterAddRelatedFormComponent_1.default, {
+                key: "_add_related_form",
+                table: options.tableId,
+                apiUrl: this.props.apiUrl,
+                client: this.props.client,
+                user: this.props.user,
+                schema: this.props.schema,
+                onSelect: this.handleAddTable
+            }));
+        }
+        // If indicators section of entities table
+        if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
+            return R("div", { key: "_add_related_indicator_parent" }, options.children, R(MWaterAddRelatedIndicatorComponent_1.default, {
+                key: "_add_related_indicator",
+                table: options.tableId,
+                apiUrl: this.props.apiUrl,
+                client: this.props.client,
+                user: this.props.user,
+                schema: this.props.schema,
+                onSelect: this.handleAddTable,
+                filter: options.filter
+            }));
+        }
+        else {
+            return options.children;
+        }
+    };
     handleAddTable = (table) => {
         const extraTables = lodash_1.default.union(this.props.extraTables || [], [table]);
         return this.props.onExtraTablesChange(extraTables);
     };
     render() {
-        return this.props.children;
+        return react_1.default.createElement(expressions_ui_1.CustomTableSelectComponentFactoryContext.Provider, { value: this.createTableSelectElementFactory },
+            react_1.default.createElement(expressions_ui_2.IsScalarExprTreeSectionMatchContext.Provider, { value: this.isScalarExprTreeSectionMatch },
+                react_1.default.createElement(expressions_ui_2.IsScalarExprTreeSectionInitiallyOpenContext.Provider, { value: this.isScalarExprTreeSectionInitiallyOpen },
+                    react_1.default.createElement(expressions_ui_1.DecorateScalarExprTreeSectionChildrenContext.Provider, { value: this.decorateScalarExprTreeSectionChildren }, this.props.children))));
     }
 }
 exports.default = MWaterContextComponent;

package/lib/MWaterLoaderComponent.d.ts

@@ -3,7 +3,7 @@ import { DataSource, Schema } from "@mwater/expressions";
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
 /**
  * Loads an mWater schema from the server and creates child with schema and dataSource
- * Also creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
+ * Also creates context to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 export default class MWaterLoaderComponent extends AsyncLoadComponent<{
@@ -27,7 +27,7 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<{
         dataSource: DataSource;
     }) => ReactElement<any>;
     /** Custom error formatter that returns React node or string, gets passed the error response from server */
-    errorFormatter: (data: any, defaultError: string) => string;
+    errorFormatter?: (data: any, defaultError: string) => string;
 }, {
     error: any;
     schema: Schema | null;

package/lib/MWaterLoaderComponent.js

@@ -12,7 +12,7 @@ const mWaterLoader_1 = __importDefault(require("./mWaterLoader"));
 const MWaterContextComponent_1 = __importDefault(require("./MWaterContextComponent"));
 /**
  * Loads an mWater schema from the server and creates child with schema and dataSource
- * Also creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
+ * Also creates context to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 class MWaterLoaderComponent extends AsyncLoadComponent_1.default {

package/lib/MWaterTableSelectComponent.d.ts

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

package/lib/MWaterTableSelectComponent.js

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

package/lib/axes/RangesComponent.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AxisXform } from "./Axis";
+import { AxisXform, AxisXformRange } from "./Axis";
 import { Expr, Schema } from "@mwater/expressions";
 export interface RangesComponentProps {
     schema: Schema;
@@ -18,9 +18,9 @@ export default class RangesComponent extends React.Component<RangesComponentProp
 }
 interface RangeComponentProps {
     /** Range to edit */
-    range: any;
-    onChange: any;
-    onRemove: any;
+    range: AxisXformRange;
+    onChange: (range: AxisXformRange) => void;
+    onRemove: () => void;
     /** reorderable connector */
     connectDragSource: any;
     /** reorderable connector */
@@ -28,8 +28,14 @@ interface RangeComponentProps {
     connectDropTarget: any;
 }
 declare class RangeComponent extends React.Component<RangeComponentProps> {
-    handleMinOpenChange: (minOpen: any) => any;
-    handleMaxOpenChange: (maxOpen: any) => any;
+    /**
+     * Handles change in minimum open value
+     */
+    handleMinOpenChange: (minOpen: boolean) => void;
+    /**
+     * Handles change in maximum open value
+     */
+    handleMaxOpenChange: (maxOpen: boolean) => void;
     render(): any;
 }
 export {};

package/lib/axes/RangesComponent.js

@@ -10,6 +10,7 @@ const update_object_1 = __importDefault(require("update-object"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const NumberInputComponent_1 = __importDefault(require("@mwater/react-library/lib/NumberInputComponent"));
 const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
+const immer_1 = __importDefault(require("immer"));
 // Allows setting of ranges
 class RangesComponent extends react_1.default.Component {
     handleRangeChange = (index, range) => {
@@ -59,11 +60,21 @@ class RangesComponent extends react_1.default.Component {
 exports.default = RangesComponent;
 // Single range (row)
 class RangeComponent extends react_1.default.Component {
+    /**
+     * Handles change in minimum open value
+     */
     handleMinOpenChange = (minOpen) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.range, { minOpen: { $set: minOpen } }));
+        return this.props.onChange((0, immer_1.default)(this.props.range, draft => {
+            draft.minOpen = minOpen;
+        }));
     };
+    /**
+     * Handles change in maximum open value
+     */
     handleMaxOpenChange = (maxOpen) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.range, { maxOpen: { $set: maxOpen } }));
+        return this.props.onChange((0, immer_1.default)(this.props.range, draft => {
+            draft.maxOpen = maxOpen;
+        }));
     };
     render() {
         let placeholder = "";
@@ -88,23 +99,23 @@ class RangeComponent extends react_1.default.Component {
         }
         return this.props.connectDragPreview(this.props.connectDropTarget(R("tr", null, R("td", null, this.props.connectDragSource(R("span", { className: "fa fa-bars" }))), R("td", { key: "minOpen" }, R(expressions_ui_1.LinkComponent, {
             dropdownItems: [
-                { id: true, name: "greater than" },
-                { id: false, name: "greater than or equal to" }
+                { id: "true", name: "greater than" },
+                { id: "false", name: "greater than or equal to" }
             ],
-            onDropdownItemClicked: this.handleMinOpenChange
+            onDropdownItemClicked: (id) => this.handleMinOpenChange(id === "true")
         }, this.props.range.minOpen ? "greater than" : "greater than or equal to")), R("td", { key: "minValue" }, R(NumberInputComponent_1.default, {
-            value: this.props.range.minValue,
+            value: this.props.range.minValue ?? undefined,
             placeholder: "None",
             small: true,
             onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.range, { minValue: { $set: v } }))
         })), R("td", { key: "and" }, "\u00A0and\u00A0"), R("td", { key: "maxOpen" }, R(expressions_ui_1.LinkComponent, {
             dropdownItems: [
-                { id: true, name: "less than" },
-                { id: false, name: "less than or equal to" }
+                { id: "true", name: "less than" },
+                { id: "false", name: "less than or equal to" }
             ],
-            onDropdownItemClicked: this.handleMaxOpenChange
+            onDropdownItemClicked: (id) => this.handleMaxOpenChange(id === "true")
         }, this.props.range.maxOpen ? "less than" : "less than or equal to")), R("td", { key: "maxValue" }, R(NumberInputComponent_1.default, {
-            value: this.props.range.maxValue,
+            value: this.props.range.maxValue ?? undefined,
             placeholder: "None",
             small: true,
             onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.range, { maxValue: { $set: v } }))

package/lib/dashboards/DashboardComponent.d.ts

@@ -57,12 +57,10 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     };
     static childContextTypes: {
         locale: PropTypes.Requireable<string>;
-        activeTables: PropTypes.Requireable<string[]>;
     };
     settings: SettingsModalComponent | null;
     getChildContext(): {
         locale: string | undefined;
-        activeTables: string[];
     };
     constructor(props: any);
     getQuickfilterValues: () => any[];
@@ -105,11 +103,5 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     }, HTMLElement>;
     renderQuickfilter(): React.CElement<import("../quickfilter/QuickfiltersComponent").QuickfiltersComponentProps, QuickfiltersComponent>;
     refDashboardView: (el: any) => any;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            display: "grid";
-            gridTemplateRows: string;
-            height: string;
-        };
-    }, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/dashboards/DashboardComponent.js

@@ -41,6 +41,7 @@ const DashboardUpgrader_1 = __importDefault(require("./DashboardUpgrader"));
 const LayoutOptionsComponent_1 = require("./LayoutOptionsComponent");
 const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
 const layoutOptions_1 = require("./layoutOptions");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 /** Dashboard component that includes an action bar at the top
  * Manages undo stack and quickfilter value
  */
@@ -49,15 +50,12 @@ class DashboardComponent extends react_1.default.Component {
     static defaultProps = { printScaling: true };
     static childContextTypes = {
         locale: prop_types_1.default.string,
-        activeTables: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired)
     };
     settings;
     getChildContext() {
         return {
             // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
             locale: this.props.design.locale,
-            // Pass active tables down to table select components so they can present a shorter list
-            activeTables: DashboardUtils.getFilterableTables(this.props.design, this.props.schema)
         };
     }
     constructor(props) {
@@ -268,30 +266,21 @@ class DashboardComponent extends react_1.default.Component {
             namedStrings: this.props.namedStrings,
             hideScopes: this.state.hideQuickfilters
         });
-        return R("div", {
-            style: {
-                display: "grid",
-                gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
-                height: "100%"
-            }
-        }, !this.props.hideTitleBar ? this.renderTitleBar() : undefined, R("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined), dashboardView, this.props.onDesignChange != null
-            ? R(SettingsModalComponent_1.default, {
-                onDesignChange: this.handleDesignChange,
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                ref: (c) => {
-                    this.settings = c;
-                }
-            })
-            : undefined, this.state.layoutOptionsOpen
-            ? R(ModalWindowComponent_1.default, { isOpen: true, outerPadding: 10, innerPadding: 10 }, R(LayoutOptionsComponent_1.LayoutOptionsComponent, {
-                design: this.props.design,
-                onDesignChange: this.props.onDesignChange,
-                onClose: () => this.setState({ layoutOptionsOpen: false }),
-                dashboardView: readonlyDashboardView,
-                quickfiltersView: this.renderQuickfilter()
-            }))
-            : undefined);
+        // Pass active tables down to table select components so they can present a shorter list
+        return react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Provider, { value: DashboardUtils.getFilterableTables(this.props.design, this.props.schema) },
+            react_1.default.createElement("div", { style: {
+                    display: "grid",
+                    gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+                    height: "100%"
+                } },
+                !this.props.hideTitleBar ? this.renderTitleBar() : undefined,
+                react_1.default.createElement("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined),
+                dashboardView,
+                this.props.onDesignChange != null && (react_1.default.createElement(SettingsModalComponent_1.default, { onDesignChange: this.handleDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, ref: (c) => {
+                        this.settings = c;
+                    } })),
+                this.state.layoutOptionsOpen && (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, outerPadding: 10, innerPadding: 10 },
+                    react_1.default.createElement(LayoutOptionsComponent_1.LayoutOptionsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange, onClose: () => this.setState({ layoutOptionsOpen: false }), dashboardView: readonlyDashboardView, quickfiltersView: this.renderQuickfilter() })))));
     }
 }
 exports.default = DashboardComponent;

package/lib/dashboards/ServerDashboardDataSource.d.ts

@@ -56,6 +56,7 @@ declare class ServerWidgetMapDataSource implements MapDataSource {
         e: number;
         s: number;
     } | null) => void): void;
+    getQuickfiltersDataSource(): QuickfiltersDataSource;
 }
 interface ServerWidgetLayerDataSourceOptions extends ServerDashboardDataSourceOptions {
     widgetId: string;

package/lib/dashboards/ServerDashboardDataSource.js

@@ -184,6 +184,9 @@ class ServerWidgetMapDataSource {
             return callback(new Error(xhr.responseText));
         });
     }
+    getQuickfiltersDataSource() {
+        return new ServerQuickfilterDataSource(this.options);
+    }
 }
 class ServerWidgetLayerDataSource {
     options;

package/lib/datagrids/DatagridComponent.d.ts

@@ -30,7 +30,7 @@ export interface DatagridComponentProps {
     quickfilterLocks?: any[];
     filters?: JsonQLFilter[];
 }
-export default class DatagridComponent extends React.Component<DatagridComponentProps, {
+interface DatagridComponentState {
     /** is design being edited */
     editingDesign: boolean;
     /** True if cells can be edited directly */
@@ -39,14 +39,18 @@ export default class DatagridComponent extends React.Component<DatagridComponent
     quickfiltersHeight: number | null;
     quickfiltersValues: null | any[];
     refreshKey: number;
-}> {
+    /** Number of rows */
+    numRows?: number;
+}
+export default class DatagridComponent extends React.Component<DatagridComponentProps, DatagridComponentState> {
     datagridView?: DatagridViewComponent | null;
     quickfilters?: HTMLElement | null;
     findReplaceModal: FindReplaceModalComponent | null;
     constructor(props: DatagridComponentProps);
-    reload(): void | undefined;
+    reload(): void;
     componentDidMount(): void;
-    componentDidUpdate(): void;
+    componentDidUpdate(prevProps: DatagridComponentProps, prevState: DatagridComponentState): void;
+    loadRowCount(): void;
     handleRefreshData: () => void;
     updateHeight(): void;
     getQuickfilterValues: () => any[];