@mwater/visualization 5.1.0 → 5.3.0

package/lib/datagrids/DatagridDesign.d.ts

@@ -13,10 +13,7 @@ export interface DatagridDesign {
     /** array of subtables (1-n joins) */
     subtables?: DatagridDesignSubtable[];
     /** array of { expr: expression to order on, direction: "asc"/"desc" } */
-    orderBys?: {
-        expr: Expr;
-        direction: "asc" | "desc";
-    }[];
+    orderBys?: DatagridDesignOrderBy[];
     /** array of quick filters (user-selectable filters). See quickfilter/README.md */
     quickfilters?: Quickfilter[];
     /** true to show row numbers */
@@ -26,6 +23,10 @@ export interface DatagridDesign {
     /** true to show number of rows */
     showNumRows?: boolean;
 }
+export interface DatagridDesignOrderBy {
+    expr: Expr;
+    direction: "asc" | "desc";
+}
 export interface DatagridDesignColumn {
     /** unique id of the column */
     id: string;
@@ -39,7 +40,7 @@ export interface DatagridDesignColumn {
     type: "expr";
     /** Expression */
     expr: Expr;
-    /** Format for formattable types (number and geometry) */
+    /** Format for formattable types (number and geometry). See libraries/visualization/src/valueFormatter.ts */
     format?: string;
 }
 export interface DatagridDesignSubtable {
@@ -52,7 +53,7 @@ export interface DatagridDesignSubtable {
     /** mwater-expression */
     filter?: Expr;
     /** array of { expr: expression to order on, direction: "asc"/"desc" } */
-    orderBys: {
+    orderBys?: {
         expr: Expr;
         direction: "asc" | "desc";
     }[];

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

@@ -1,6 +1,7 @@
-/// <reference types="jquery" />
 import DatagridDataSource from "./DatagridDataSource";
-import { DatagridDesign } from "..";
+import { DatagridDesign, JsonQLFilter } from "..";
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource";
+import { Expr, Row } from "@mwater/expressions";
 export interface ServerDatagridDataSourceOptions {
     /** API url to use for talking to mWater server */
     apiUrl: string;
@@ -14,11 +15,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>;
+    getRows(design: DatagridDesign, offset: number, limit: number, filters: JsonQLFilter[] | undefined, callback: (error: any, rows?: Row[]) => void): Promise<void>;
+    countRows(design: DatagridDesign, filters: any, callback: any): Promise<void>;
     getQuickfiltersDataSource(): ServerQuickfilterDataSource;
 }
 interface ServerQuickfilterDataSourceOptions {
@@ -33,9 +34,9 @@ interface ServerQuickfilterDataSourceOptions {
     /** revision to use to allow caching */
     rev?: number;
 }
-declare class ServerQuickfilterDataSource {
+declare class ServerQuickfilterDataSource implements QuickfiltersDataSource {
     options: ServerQuickfilterDataSourceOptions;
     constructor(options: ServerQuickfilterDataSourceOptions);
-    getValues(index: any, expr: any, filters: any, offset: any, limit: any, callback: any): JQuery.jqXHR<any>;
+    getValues(index: number, expr: Expr, filters: JsonQLFilter[], offset: number | null, limit: number, callback: (error: any, values?: any[]) => void): Promise<void>;
 }
 export {};

package/lib/datagrids/ServerDatagridDataSource.js

@@ -3,12 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": 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"));
+const querystring_1 = __importDefault(require("querystring"));
 /** 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,43 +15,80 @@ 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
     //  design: design of the widget. Ignored in the case of server-side rendering
     //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
-    getRows(design, offset, limit, filters, callback) {
+    async getRows(design, offset, limit, filters, callback) {
         const query = {
             client: this.options.client,
             share: this.options.share,
-            filters: (0, compressJson_1.default)(filters),
             rev: this.options.rev,
             offset,
             limit
         };
-        const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/data?` + querystring_1.default.stringify(query);
-        return jquery_1.default.getJSON(url, (data) => {
-            return callback(null, data);
-        }).fail((xhr) => {
-            console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
-        });
+        const filtersJson = JSON.stringify(filters);
+        const baseUrl = this.options.apiUrl + `datagrids/${this.options.datagridId}/data`;
+        try {
+            let response;
+            // If the filters are too large, we need to send them in the body
+            if (filtersJson.length > 5000) {
+                response = await fetch(baseUrl + '?' + querystring_1.default.stringify(query), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ filters: (0, compressJson_1.default)(filters) }),
+                });
+            }
+            else {
+                query.filters = (0, compressJson_1.default)(filters);
+                const url = baseUrl + '?' + querystring_1.default.stringify(query);
+                response = await fetch(url);
+            }
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            callback(null, data);
+        }
+        catch (error) {
+            console.error(error);
+            callback(error);
+        }
     }
-    countRows(design, filters, callback) {
+    async countRows(design, filters, callback) {
         const query = {
             client: this.options.client,
             share: this.options.share,
-            filters: (0, compressJson_1.default)(filters),
-            rev: this.options.rev,
+            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));
-        });
+        const filtersJson = JSON.stringify(filters);
+        const baseUrl = this.options.apiUrl + `datagrids/${this.options.datagridId}/summary`;
+        try {
+            let response;
+            // If the filters are too large, we need to send them in the body
+            if (filtersJson.length > 5000) {
+                response = await fetch(baseUrl + '?' + querystring_1.default.stringify(query), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ filters: (0, compressJson_1.default)(filters) }),
+                });
+            }
+            else {
+                query.filters = (0, compressJson_1.default)(filters);
+                const url = baseUrl + '?' + querystring_1.default.stringify(query);
+                response = await fetch(url);
+            }
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            callback(null, data?.[0]?.cnt);
+        }
+        catch (error) {
+            console.error(error);
+            callback(error);
+        }
     }
     getQuickfiltersDataSource() {
         return new ServerQuickfilterDataSource(this.options);
@@ -72,23 +107,40 @@ class ServerQuickfilterDataSource {
         this.options = options;
     }
     // Gets the values of the quickfilter at index
-    getValues(index, expr, filters, offset, limit, callback) {
+    async getValues(index, expr, filters, offset, limit, callback) {
         const query = {
             client: this.options.client,
             share: this.options.share,
-            filters: (0, compressJson_1.default)(filters),
-            offset,
+            offset: offset ?? 0,
             limit,
             rev: this.options.rev
         };
-        const url = this.options.apiUrl +
-            `datagrids/${this.options.datagridId}/quickfilters/${index}/values?` +
-            querystring_1.default.stringify(query);
-        return jquery_1.default.getJSON(url, (data) => {
-            return callback(null, data);
-        }).fail((xhr) => {
-            console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
-        });
+        try {
+            let response;
+            const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/quickfilters/${index}/values`;
+            const filtersJson = JSON.stringify(filters);
+            // If the filters are too large, we need to send them in the body
+            if (filtersJson.length > 5000) {
+                query.filters = (0, compressJson_1.default)(filters);
+                response = await fetch(url + '?' + querystring_1.default.stringify(query), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ filters: (0, compressJson_1.default)(filters) }),
+                });
+            }
+            else {
+                query.filters = filtersJson;
+                response = await fetch(url + '?' + querystring_1.default.stringify(query));
+            }
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            callback(null, data);
+        }
+        catch (error) {
+            console.error(error);
+            callback(error);
+        }
     }
 }

package/lib/demo.js

@@ -53,14 +53,14 @@ global.T = ez_localize_1.defaultT;
 // Set demo key
 (0, vectorMaps_1.setMapTilerApiKey)("cNNyJl2nwIIKEUYSeXYc");
 (0, jquery_1.default)(function () {
-    const sample = R(react_dnd_1.DragDropContextProvider, { backend: react_dnd_html5_backend_1.default }, R("div", { className: "container-fluid", style: { height: "100%", paddingLeft: 0, paddingRight: 0 } }, R("style", null, "html, body, #main { height: 100% }"), R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
+    const sample = R(react_dnd_1.DragDropContextProvider, { backend: react_dnd_html5_backend_1.default }, R("div", { className: "container-fluid", style: { height: "100%", paddingLeft: 0, paddingRight: 0 } }, R("style", null, "html, body, #main { height: 100% }"), R(MWaterDirectDashboardPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
+    //R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "38d803820a7a4bf5a1d5ef19cf8c64f3"})
+    // R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
     // R(RichTextPane)
     // R(MWaterMapPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1)})
     // R(TestPane, apiUrl: "https://api.mwater.co/v3/")
     // R(MWaterDashboardPane, apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "a855eb0587d845d3ac27aed03c463976", share: "817c76088c7649ec8cc0b8193e547a09")
     // R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "f99f206ddd4442a981761b8342c58058"})
-    // R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "38d803820a7a4bf5a1d5ef19cf8c64f3"})
-    // R(MWaterDirectDashboardPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
     //R(MWaterDirectDashboardPane, { apiUrl: "http://localhost:1234/v3/", client: window.location.hash.substr(1) })
     //R(MWaterDatagridPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
     // R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
@@ -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.css

@@ -1,3 +1,8 @@
+/*
+Lato, Lora, Inter, Merriweather, Roboto
+*/
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 /** Plain link with cursor pointer. Can be span or a */
 .link-plain {
   color: var(--bs-primary);

package/lib/index.d.ts

@@ -20,6 +20,7 @@ export { languages } from "./languages";
 export { default as MWaterLoaderComponent } from "./MWaterLoaderComponent";
 export { default as MWaterContextComponent } from "./MWaterContextComponent";
 export { default as mWaterLoader } from "./mWaterLoader";
+export { WidgetDataSource } from "./widgets/WidgetDataSource";
 export { default as DirectWidgetDataSource } from "./widgets/DirectWidgetDataSource";
 import "leaflet/dist/leaflet.css";
 import "fixed-data-table-2/dist/fixed-data-table.min.css";
@@ -28,7 +29,6 @@ import "./layouts/decorated-block.css";
 import "react-datepicker/dist/react-datepicker.css";
 import "billboard.js/dist/billboard.css";
 import "./index.css";
-import "./layout-styles.css";
 export { setMapTilerApiKey } from "./maps/vectorMaps";
 export { default as UndoStack } from "./UndoStack";
 export { default as DashboardViewComponent } from "./dashboards/DashboardViewComponent";
@@ -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/index.js

@@ -63,7 +63,6 @@ require("./layouts/decorated-block.css");
 require("react-datepicker/dist/react-datepicker.css");
 require("billboard.js/dist/billboard.css");
 require("./index.css");
-require("./layout-styles.css");
 var vectorMaps_1 = require("./maps/vectorMaps");
 Object.defineProperty(exports, "setMapTilerApiKey", { enumerable: true, get: function () { return vectorMaps_1.setMapTilerApiKey; } });
 var UndoStack_1 = require("./UndoStack");