@mwater/visualization 5.0.1 → 5.1.0

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

@@ -4,6 +4,7 @@ import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource";
 export default class 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;
     /** Gets the quickfilters data source */
     getQuickfiltersDataSource(): QuickfiltersDataSource;
 }

package/lib/datagrids/DatagridDataSource.js

@@ -5,6 +5,9 @@ class DatagridDataSource {
     getRows(design, offset, limit, filters, callback) {
         throw new Error("Not implemented");
     }
+    countRows(design, filters, callback) {
+        throw new Error("Not implemented");
+    }
     /** Gets the quickfilters data source */
     getQuickfiltersDataSource() {
         throw new Error("Not implemented");

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.js

@@ -41,7 +41,7 @@ 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"));
@@ -140,7 +140,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 +158,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 }) })));
 }

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

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/ServerDatagridDataSource.d.ts

@@ -18,6 +18,7 @@ export default class ServerDatagridDataSource extends 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

@@ -40,6 +40,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/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";

package/lib/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextComponent = exports.AxisColorEditorComponent = exports.MarkerSymbolSelectComponent = exports.DetailLevelSelectComponent = exports.LayoutManager = exports.LabeledExprGenerator = exports.DirectDatagridDataSource = exports.ServerDatagridDataSource = exports.DirectMapDataSource = exports.ServerMapDataSource = exports.ServerDashboardDataSource = exports.DatagridViewComponent = exports.DatagridComponent = exports.ColorSchemeFactory = exports.AxisBuilder = exports.WidgetScopesViewComponent = exports.WidgetScoper = exports.ChartViewComponent = exports.ImageMosaicChart = exports.CalendarChart = exports.TableChart = exports.LayeredChart = exports.CheckboxComponent = exports.RadioButtonComponent = exports.VerticalLayoutComponent = exports.MapComponent = exports.MapDesignerComponent = exports.LayerFactory = exports.UtfGridLayer = exports.BingLayer = exports.DashboardViewComponent = exports.UndoStack = exports.setMapTilerApiKey = exports.DirectWidgetDataSource = exports.mWaterLoader = exports.MWaterContextComponent = exports.MWaterLoaderComponent = exports.languages = exports.DatagridUtils = exports.Widget = exports.WidgetFactory = exports.LocaleContextInjector = exports.compressJson = exports.DirectDashboardDataSource = exports.DashboardDataSource = exports.DashboardComponent = exports.TableSelectComponent = exports.RegionSelectComponent = exports.DateRangeComponent = exports.LeafletMapComponent = void 0;
-exports.OptionListComponent = exports.ToggleEditComponent = exports.QuickfilterCompiler = exports.DropdownWidgetComponent = exports.ItemsHtmlConverter = void 0;
+exports.ItemsHtmlConverter = exports.RichTextComponent = exports.AxisColorEditorComponent = exports.MarkerSymbolSelectComponent = exports.DetailLevelSelectComponent = exports.LayoutManager = exports.LabeledExprGenerator = exports.DirectDatagridDataSource = exports.ServerDatagridDataSource = exports.DirectMapDataSource = exports.ServerMapDataSource = exports.ServerDashboardDataSource = exports.DatagridViewComponent = exports.DatagridComponent = exports.ColorSchemeFactory = exports.AxisBuilder = exports.WidgetScopesViewComponent = exports.WidgetScoper = exports.ChartViewComponent = exports.ImageMosaicChart = exports.CalendarChart = exports.TableChart = exports.LayeredChart = exports.CheckboxComponent = exports.RadioButtonComponent = exports.VerticalLayoutComponent = exports.MapComponent = exports.MapDesignerComponent = exports.LayerFactory = exports.UtfGridLayer = exports.BingLayer = exports.DashboardViewComponent = exports.UndoStack = exports.setMapTilerApiKey = exports.DirectWidgetDataSource = exports.mWaterLoader = exports.MWaterContextComponent = exports.MWaterLoaderComponent = exports.languages = exports.DatagridUtils = exports.Widget = exports.WidgetFactory = exports.LocaleContextInjector = exports.compressJson = exports.DirectDashboardDataSource = exports.DashboardDataSource = exports.DashboardComponent = exports.RegionSelectComponent = exports.DateRangeComponent = exports.LeafletMapComponent = void 0;
+exports.OptionListComponent = exports.ToggleEditComponent = exports.QuickfilterCompiler = exports.DropdownWidgetComponent = void 0;
 var LeafletMapComponent_1 = require("./maps/LeafletMapComponent");
 Object.defineProperty(exports, "LeafletMapComponent", { enumerable: true, get: function () { return __importDefault(LeafletMapComponent_1).default; } });
 var DateRangeComponent_1 = require("./DateRangeComponent");
@@ -26,8 +26,6 @@ Object.defineProperty(exports, "DateRangeComponent", { enumerable: true, get: fu
 var RegionSelectComponent_1 = require("./maps/RegionSelectComponent");
 Object.defineProperty(exports, "RegionSelectComponent", { enumerable: true, get: function () { return __importDefault(RegionSelectComponent_1).default; } });
 __exportStar(require("./datagrids/DatagridDesign"), exports);
-var TableSelectComponent_1 = require("./TableSelectComponent");
-Object.defineProperty(exports, "TableSelectComponent", { enumerable: true, get: function () { return __importDefault(TableSelectComponent_1).default; } });
 __exportStar(require("./JsonQLFilter"), exports);
 var DashboardComponent_1 = require("./dashboards/DashboardComponent");
 Object.defineProperty(exports, "DashboardComponent", { enumerable: true, get: function () { return __importDefault(DashboardComponent_1).default; } });

package/lib/layouts/blocks/BlocksDisplayComponent.js

@@ -265,7 +265,7 @@ class BlocksDisplayComponent extends react_1.default.Component {
             innerParentStyle = {};
             innerParentStyle.maxWidth = layoutOptions.maximumWidth || undefined;
             return R("div", { style: { width: "100%", height: "100%", overflow: "hidden", position: "relative" } }, this.renderPalette(), R("div", {
-                style: { position: "absolute", left: 141, top: 0, bottom: 0, right: 0, overflow: "auto" },
+                style: { position: "absolute", left: 141, top: 0, bottom: 0, right: 0, overflowX: "auto", overflowY: "scroll" },
                 className: `mwater-visualization-block-parent-outer mwater-visualization-block-parent-outer-${this.props.style || "default"} mwater-visualization-block-editing`
             }, R("div", {
                 key: "inner",
@@ -275,7 +275,7 @@ class BlocksDisplayComponent extends react_1.default.Component {
         }
         else {
             return R(AutoSizeComponent_1.default, { injectWidth: true, injectHeight: true }, (size) => {
-                const outerParentStyle = { width: "100%", height: "100%", overflowX: "auto" };
+                const outerParentStyle = { width: "100%", height: "100%", overflowX: "auto", overflowY: "scroll" };
                 innerParentStyle = {};
                 // Remove padding if small
                 if (size.width < 600) {

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

@@ -16,7 +16,7 @@ export default class LegoLayoutEngine {
         w: number;
         h: number;
     };
-    performLayout(layouts: any, priority: any): {};
+    performLayout(layouts: any, priority: any): any;
     appendLayout(layouts: any, w: any, h: any): {
         x: number;
         y: number;

package/lib/maps/BufferLayerDesignerComponent.js

@@ -34,7 +34,7 @@ const expressions_1 = require("@mwater/expressions");
 const NumberInputComponent_1 = __importDefault(require("@mwater/react-library/lib/NumberInputComponent"));
 const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
 const ColorComponent_1 = __importDefault(require("../ColorComponent"));
-const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const rc_slider_1 = __importDefault(require("rc-slider"));
 const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
 const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
@@ -77,7 +77,7 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
         this.props.onDesignChange({ ...this.props.design, unionShapes });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/maps/ChoroplethLayerDesigner.js

@@ -33,7 +33,7 @@ const immer_1 = require("immer");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
 const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
-const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ColorComponent_1 = __importDefault(require("../ColorComponent"));
 const rc_slider_1 = __importDefault(require("rc-slider"));
 const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
@@ -147,7 +147,7 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
             react_1.default.createElement("label", { className: "text-muted" },
                 react_1.default.createElement("i", { className: "fa fa-database" }),
                 " Data Source"),
-            react_1.default.createElement(TableSelectComponent_1.default, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange })));
+            react_1.default.createElement(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange })));
     }
     renderRegionsTable() {
         let options = lodash_1.default.map(lodash_1.default.filter(this.props.schema.getTables(), table => table.id.startsWith("regions.")), table => ({ value: table.id, label: table.name.en }));

package/lib/maps/ClusterLayerDesignerComponent.js

@@ -10,7 +10,7 @@ const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
 const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
 const ColorComponent_1 = __importDefault(require("../ColorComponent"));
-const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
 class ClusterLayerDesignerComponent extends react_1.default.Component {
     // Apply updates to design
@@ -38,7 +38,7 @@ class ClusterLayerDesignerComponent extends react_1.default.Component {
         return this.update({ fillColor: color });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/maps/DirectMapDataSource.js

@@ -157,8 +157,7 @@ class DirectLayerDataSource {
         const { url, expires } = await getVectorTileFromDirectRequest({
             apiUrl: this.options.apiUrl,
             client: this.options.client,
-            directTokenRequest,
-            createdAfter
+            directTokenRequest
         });
         return { url, expires };
     }

package/lib/maps/GridLayerDesigner.js

@@ -33,7 +33,7 @@ const immer_1 = require("immer");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
 const AxisComponent_1 = __importDefault(require("../axes/AxisComponent"));
-const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const rc_slider_1 = __importDefault(require("rc-slider"));
 const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
@@ -127,7 +127,7 @@ class GridLayerDesigner extends react_1.default.Component {
             react_1.default.createElement("label", { className: "text-muted" },
                 react_1.default.createElement("i", { className: "fa fa-database" }),
                 " Data Source"),
-            react_1.default.createElement(TableSelectComponent_1.default, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange })));
+            react_1.default.createElement(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange })));
     }
     renderGeometryExpr() {
         // If no data, hide

package/lib/maps/MapDesignerComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import { MapDesign } from "./MapDesign";
@@ -18,12 +17,6 @@ export interface MapDesignerComponentProps {
     enableQuickfilters?: boolean;
 }
 export default class MapDesignerComponent extends React.Component<MapDesignerComponentProps> {
-    static childContextTypes: {
-        activeTables: PropTypes.Requireable<string[]>;
-    };
-    getChildContext(): {
-        activeTables: string[];
-    };
     handleAttributionChange: (text: any) => void;
     handleAutoBoundsChange: (value: any) => void;
     handleShowLayerSwitcherChange: (value: any) => void;
@@ -31,9 +24,5 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
     handleConvertToMarkersMap: () => void;
     handleInitialLegendDisplayChange: (value: any) => void;
     renderOptionsTab(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            padding: number;
-        };
-    }, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/maps/MapDesignerComponent.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
@@ -42,14 +41,8 @@ const MapUtils = __importStar(require("./MapUtils"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
 const immer_1 = __importDefault(require("immer"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
 class MapDesignerComponent extends react_1.default.Component {
-    static childContextTypes = { activeTables: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired) };
-    getChildContext() {
-        return {
-            // Pass active tables down to table select components so they can present a shorter list
-            activeTables: MapUtils.getFilterableTables(this.props.design, this.props.schema)
-        };
-    }
     handleAttributionChange = (text) => {
         const design = { ...this.props.design, attribution: text };
         return this.props.onDesignChange(design);
@@ -152,10 +145,10 @@ class MapDesignerComponent extends react_1.default.Component {
                 }))
             });
         }
-        return R("div", { style: { padding: 5 } }, R(TabbedComponent_1.default, {
-            initialTabId: "layers",
-            tabs
-        }));
+        const activeTables = MapUtils.getFilterableTables(this.props.design, this.props.schema);
+        return (react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Provider, { value: activeTables },
+            react_1.default.createElement("div", { style: { padding: 5 } },
+                react_1.default.createElement(TabbedComponent_1.default, { initialTabId: "layers", tabs: tabs }))));
     }
 }
 exports.default = MapDesignerComponent;

package/lib/maps/MarkersLayerDesignerComponent.js

@@ -33,7 +33,7 @@ const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
 const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
 const ColorComponent_1 = __importDefault(require("../ColorComponent"));
-const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
 const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
 const MarkerSymbolSelectComponent_1 = __importDefault(require("./MarkerSymbolSelectComponent"));
@@ -86,7 +86,7 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
         return this.update({ lineWidth });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/maps/PopupFilterJoinsUtils.d.ts

@@ -12,4 +12,9 @@ import { JsonQLFilter } from "..";
 export declare function createPopupFilters(popupFilterJoins: {
     [tableId: string]: Expr;
 }, schema: Schema, layerTable: any, rowId: any, useWithin?: boolean): JsonQLFilter[];
-export declare function createDefaultPopupFilterJoins(table: any): {};
+export declare function createDefaultPopupFilterJoins(table: any): {
+    [x: number]: {
+        table: any;
+        type: string;
+    };
+};

package/lib/maps/PopupFilterJoinsUtils.js

@@ -30,7 +30,7 @@ function createPopupFilters(popupFilterJoins, schema, layerTable, rowId, useWith
                     type: "op",
                     op: "within",
                     table,
-                    exprs: [expr, { type: "literal", idTable: exprUtils.getExprIdTable(expr), valueType: "id", value: rowId }]
+                    exprs: [expr, { type: "literal", idTable: exprUtils.getExprIdTable(expr) ?? undefined, valueType: "id", value: rowId }]
                 };
                 filters.push({ table, jsonql: exprCompiler.compileExpr({ expr: filterExpr, tableAlias: "{alias}" }) });
             }
@@ -83,9 +83,10 @@ function createPopupFilters(popupFilterJoins, schema, layerTable, rowId, useWith
 exports.createPopupFilters = createPopupFilters;
 // Create default popup filter joins where the join is just the id (not used for choropleth since that needs to join to admin_regions)
 function createDefaultPopupFilterJoins(table) {
-    const popupFilterJoins = {};
     // Return id of row for a simple match
-    popupFilterJoins[table] = { table, type: "id" };
+    const popupFilterJoins = {
+        [table]: { table, type: "id" }
+    };
     return popupFilterJoins;
 }
 exports.createDefaultPopupFilterJoins = createDefaultPopupFilterJoins;

package/lib/maps/UtfGridLayer.js

@@ -59,7 +59,7 @@ module.exports = leaflet_1.default.Layer.extend({
         this._cache = {};
         //Find a unique id in window we can use for our callbacks
         //Required for jsonP
-        var i = 0;
+        let i = 0;
         while (window["lu" + i]) {
             i++;
         }

package/lib/widgets/ImageWidgetComponent.js

@@ -37,7 +37,7 @@ const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetCompo
 const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
 const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ImageUploaderComponent_1 = __importDefault(require("./ImageUploaderComponent"));
 const ImagelistCarouselComponent_1 = __importDefault(require("./ImagelistCarouselComponent"));
 class ImageWidgetComponent extends AsyncLoadComponent_1.default {
@@ -257,7 +257,7 @@ class ImageWidgetDesignComponent extends react_1.default.Component {
         });
     };
     renderExpressionEditor() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }), R("br"), this.state.table
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }), R("br"), this.state.table
             ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Field"), ": ", R(expressions_ui_1.ExprComponent, {
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,

package/lib/widgets/charts/calendar/CalendarChartDesignerComponent.js

@@ -32,7 +32,7 @@ const R = react_1.default.createElement;
 const ui = __importStar(require("../../../UIComponents"));
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
 class CalendarChartDesignerComponent extends react_1.default.Component {
     // Updates design with the specified changes
@@ -67,7 +67,7 @@ class CalendarChartDesignerComponent extends react_1.default.Component {
         this.updateDesign({ cellColor });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.d.ts

@@ -15,7 +15,7 @@ export default class ImageMosaicChart extends Chart {
     }>;
     getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[] | null, callback: any): void;
     createViewElement(options: ChartCreateViewElementOptions): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-    createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any): null;
+    createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any): never[];
     getFilterableTables(design: any, schema: Schema): any[];
     getPlaceholderIcon(): string;
 }

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.js

@@ -157,7 +157,7 @@ class ImageMosaicChart extends Chart_1.default {
     }
     createDataTable(design, schema, dataSource, data) {
         alert("Not available for Image Mosaics");
-        return null;
+        return [];
     }
     // TODO
     // renderHeaderCell = (column) =>

package/lib/widgets/charts/imagemosaic/ImageMosaicChartDesignerComponent.js

@@ -32,7 +32,7 @@ const R = react_1.default.createElement;
 const ui = __importStar(require("../../../UIComponents"));
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 class ImageMosaicChartDesignerComponent extends react_1.default.Component {
     // Updates design with the specified changes
     updateDesign(changes) {
@@ -52,7 +52,7 @@ class ImageMosaicChartDesignerComponent extends react_1.default.Component {
         return this.updateDesign({ imageAxis });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/layered/LayeredChartLayerDesignerComponent.js

@@ -37,7 +37,7 @@ const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
 const LayeredChartUtils = __importStar(require("./LayeredChartUtils"));
 const LayeredChartCompiler_1 = __importDefault(require("./LayeredChartCompiler"));
 const uiComponents = __importStar(require("../../../UIComponents"));
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
@@ -165,7 +165,7 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
     }
     renderTable() {
         const layer = this.props.design.layers[this.props.index];
-        return R(uiComponents.SectionComponent, { icon: "fa-database", label: "Data Source" }, R(TableSelectComponent_1.default, {
+        return R(uiComponents.SectionComponent, { icon: "fa-database", label: "Data Source" }, R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: layer.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/pivot/PivotChartDesignerComponent.js

@@ -32,7 +32,7 @@ const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 // Designer for overall chart. Has a special setup mode first time it is run
 class PivotChartDesignerComponent extends react_1.default.Component {
@@ -76,7 +76,7 @@ class PivotChartDesignerComponent extends react_1.default.Component {
         return this.updateDesign({ intersections });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,