@mwater/visualization 5.0.1 → 5.2.0

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";
@@ -30,7 +31,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 +40,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[];
@@ -111,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/DatagridComponent.js

@@ -17,6 +17,7 @@ const DatagridUtils_1 = __importDefault(require("./DatagridUtils"));
 const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/QuickfiltersComponent"));
 const QuickfilterCompiler_1 = __importDefault(require("../quickfilter/QuickfilterCompiler"));
 const FindReplaceModalComponent_1 = __importDefault(require("./FindReplaceModalComponent"));
+const d3_format_1 = require("d3-format");
 // Datagrid with decorations
 // See README.md for description of datagrid format
 // Design should be cleaned already before being passed in (see DatagridUtils)
@@ -35,13 +36,34 @@ class DatagridComponent extends react_1.default.Component {
         };
     }
     reload() {
-        return this.datagridView?.reload();
+        this.datagridView?.reload();
     }
     componentDidMount() {
-        return this.updateHeight();
+        this.loadRowCount();
+        this.updateHeight();
     }
-    componentDidUpdate() {
-        return this.updateHeight();
+    componentDidUpdate(prevProps, prevState) {
+        if (!lodash_1.default.isEqual(prevProps.design, this.props.design) || !lodash_1.default.isEqual(prevState.quickfiltersValues, this.state.quickfiltersValues) || prevState.refreshKey !== this.state.refreshKey) {
+            this.loadRowCount();
+        }
+        this.updateHeight();
+    }
+    loadRowCount() {
+        if (!this.props.design.showNumRows) {
+            return;
+        }
+        let filters = this.props.filters || [];
+        // Compile quickfilters
+        filters = filters.concat(this.getQuickfilterFilters());
+        this.props.datagridDataSource.countRows(this.props.design, filters, (error, numRows) => {
+            if (error) {
+                console.error(error);
+                alert(T("Error loading data"));
+                return;
+            }
+            console.log(numRows);
+            this.setState({ numRows });
+        });
     }
     handleRefreshData = () => {
         this.props.dataSource.clearCache?.();
@@ -164,7 +186,7 @@ class DatagridComponent extends react_1.default.Component {
         }, T("Find/Replace"));
     }
     renderTitleBar() {
-        return R("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } }, R("div", { style: { float: "right" } }, this.renderFindReplace(), this.renderCellEdit(), this.renderEditButton(), R("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData }, R("span", { className: "fas fa-sync" }), R("span", { className: "hide-600px" }, " Refresh")), this.props.extraTitleButtonsElem), this.props.titleElem);
+        return R("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } }, R("div", { style: { float: "right" } }, this.props.design.showNumRows && this.state.numRows ? R("small", { className: 'text-muted text-sm' }, `${(0, d3_format_1.format)(',')(this.state.numRows)} rows`) : undefined, this.renderFindReplace(), this.renderCellEdit(), this.renderEditButton(), R("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData }, R("span", { className: "fas fa-sync" }), R("span", { className: "hide-600px" }, " Refresh")), this.props.extraTitleButtonsElem), this.props.titleElem);
     }
     renderQuickfilter() {
         return R("div", {

package/lib/datagrids/DatagridDataSource.d.ts

@@ -1,9 +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;
+    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,13 +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");
-    }
-    /** Gets the quickfilters data source */
-    getQuickfiltersDataSource() {
-        throw new Error("Not implemented");
-    }
-}
-exports.default = DatagridDataSource;

package/lib/datagrids/DatagridDesign.d.ts

@@ -23,6 +23,8 @@ export interface DatagridDesign {
     showRowNumbers?: boolean;
     /** array of global filters. See below. */
     globalFilters?: DatagridDesignGlobalFilter[];
+    /** true to show number of rows */
+    showNumRows?: boolean;
 }
 export interface DatagridDesignColumn {
     /** unique id of the column */

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;
@@ -41,15 +40,15 @@ const OrderBysDesignerComponent_1 = __importDefault(require("./OrderBysDesignerC
 const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
 const LabeledExprGenerator_1 = __importDefault(require("./LabeledExprGenerator"));
-const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const expressions_ui_3 = require("@mwater/expressions-ui");
 const uuid_1 = __importDefault(require("uuid"));
 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",
@@ -140,7 +139,7 @@ class DatagridDesignerComponent extends react_1.default.Component {
         });
     }
     render() {
-        return R("div", null, R("label", null, T("Data Source:")), R(TableSelectComponent_1.default, {
+        return R("div", null, R("label", null, T("Data Source:")), R(expressions_ui_3.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange
@@ -158,6 +157,7 @@ function DatagridOptionsComponent(props) {
     }, []);
     return react_1.default.createElement("div", null,
         react_1.default.createElement(ui.Checkbox, { value: props.design.showRowNumbers, onChange: (showRowNumbers) => props.onDesignChange({ ...props.design, showRowNumbers }) }, T("Show row numbers")),
+        react_1.default.createElement(ui.Checkbox, { value: props.design.showNumRows, onChange: (showNumRows) => props.onDesignChange({ ...props.design, showNumRows }) }, T("Show number of rows")),
         react_1.default.createElement(ui.FormGroup, { label: T("Language"), hint: T("Preferred language of the datagrid") },
             react_1.default.createElement(react_select_1.default, { value: localeOptions.find(opt => opt.value == (props.design.locale || "en")) || null, options: localeOptions, onChange: (locale) => props.onDesignChange({ ...props.design, locale: locale.value }) })));
 }
@@ -377,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

@@ -32,7 +32,7 @@ class DatagridViewComponent extends react_1.default.Component {
         // If design or filters changed, delete all rows
         // TODO won't this reload on column resize?
         if (!lodash_1.default.isEqual(nextProps.design, this.props.design) || !lodash_1.default.isEqual(nextProps.filters, this.props.filters) || nextProps.refreshKey !== this.props.refreshKey) {
-            return this.setState({ rows: [], entirelyLoaded: false });
+            this.setState({ rows: [], entirelyLoaded: false });
         }
     }
     // Loads more rows because the placeholder last row has been rendered
@@ -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/DirectDatagridDataSource.d.ts

@@ -14,6 +14,7 @@ export default class DirectDatagridDataSource implements 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;
     getQuickfiltersDataSource(): {
         getValues: (index: any, expr: any, filters: any, offset: any, limit: any, callback: any) => void;
     };

package/lib/datagrids/DirectDatagridDataSource.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const DatagridQueryBuilder_1 = __importDefault(require("./DatagridQueryBuilder"));
 const QuickfilterUtils = __importStar(require("../quickfilter/QuickfilterUtils"));
+const lodash_1 = __importDefault(require("lodash"));
 /** Uses direct DataSource queries */
 class DirectDatagridDataSource {
     options;
@@ -49,6 +50,31 @@ class DirectDatagridDataSource {
         });
         return this.options.dataSource.performQuery(query, callback);
     }
+    countRows(design, filters, callback) {
+        const queryBuilder = new DatagridQueryBuilder_1.default(this.options.schema);
+        // Create query to get the page of rows at the specific offset
+        const query = queryBuilder.createQuery(design, {
+            extraFilters: filters
+        });
+        const countQuery = {
+            ...lodash_1.default.omit(query, 'orderBy'),
+            selects: [
+                {
+                    type: 'select',
+                    expr: {
+                        type: 'op',
+                        op: 'count',
+                        exprs: []
+                    },
+                    alias: 'cnt'
+                }
+            ]
+        };
+        console.log(countQuery);
+        return this.options.dataSource.performQuery(countQuery, (error, rows) => {
+            callback(error, rows?.[0]?.cnt);
+        });
+    }
     // Gets the quickfilters data source
     getQuickfiltersDataSource() {
         return {

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,10 +14,11 @@ 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>;
+    countRows(design: DatagridDesign, filters: any, callback: any): JQuery.jqXHR<any>;
     getQuickfiltersDataSource(): ServerQuickfilterDataSource;
 }
 interface ServerQuickfilterDataSourceOptions {

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
@@ -40,6 +38,21 @@ class ServerDatagridDataSource extends DatagridDataSource_1.default {
             return callback(new Error(xhr.responseText));
         });
     }
+    countRows(design, filters, callback) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters),
+            rev: this.options.rev,
+        };
+        const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/summary?` + querystring_1.default.stringify(query);
+        return jquery_1.default.getJSON(url, (data) => {
+            return callback(null, data?.[0]?.cnt);
+        }).fail((xhr) => {
+            console.log(xhr.responseText);
+            return callback(new Error(xhr.responseText));
+        });
+    }
     getQuickfiltersDataSource() {
         return new ServerQuickfilterDataSource(this.options);
     }

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

@@ -2,7 +2,6 @@ export { default as LeafletMapComponent, MapBounds, TileLayer, GeoJsonLayer, Map
 export { default as DateRangeComponent } from "./DateRangeComponent";
 export { default as RegionSelectComponent } from "./maps/RegionSelectComponent";
 export * from "./datagrids/DatagridDesign";
-export { default as TableSelectComponent } from "./TableSelectComponent";
 export * from "./JsonQLFilter";
 export { default as DashboardComponent } from "./dashboards/DashboardComponent";
 export { default as DashboardDataSource } from "./dashboards/DashboardDataSource";
@@ -52,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";