@mwater/visualization 5.0.0 → 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)
@@ -30,18 +31,44 @@ class DatagridComponent extends react_1.default.Component {
             editingDesign: false,
             cellEditingEnabled: false,
             quickfiltersHeight: null,
-            quickfiltersValues: null
+            quickfiltersValues: null,
+            refreshKey: 1
         };
     }
     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?.();
+        this.setState({ refreshKey: this.state.refreshKey + 1 });
+    };
     updateHeight() {
         // Calculate quickfilters height
         if (this.quickfilters) {
@@ -159,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(), 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", {
@@ -247,6 +274,7 @@ class DatagridComponent extends react_1.default.Component {
                     onRowDoubleClick: this.props.onRowDoubleClick,
                     canEditExpr: this.state.cellEditingEnabled ? this.props.canEditExpr : undefined,
                     updateExprValues: this.state.cellEditingEnabled ? this.props.updateExprValues : undefined,
+                    refreshKey: this.state.refreshKey
                 });
             }
             else if (this.props.onDesignChange) {

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

@@ -25,6 +25,8 @@ export interface DatagridViewComponentProps {
     onRowDoubleClick?: (tableId: string, rowId: any, rowIndex: number) => void;
     /** Called when a row is clicked with (tableId, rowId, rowIndex) */
     onRowClick?: (tableId: string, rowId: any, rowIndex: number) => void;
+    /** Change to force a refresh */
+    refreshKey?: any;
 }
 /** Update to one row expression value */
 export interface RowUpdate {

package/lib/datagrids/DatagridViewComponent.js

@@ -31,8 +31,8 @@ class DatagridViewComponent extends react_1.default.Component {
     componentWillReceiveProps(nextProps) {
         // 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)) {
-            return this.setState({ rows: [], entirelyLoaded: false });
+        if (!lodash_1.default.isEqual(nextProps.design, this.props.design) || !lodash_1.default.isEqual(nextProps.filters, this.props.filters) || nextProps.refreshKey !== this.props.refreshKey) {
+            this.setState({ rows: [], entirelyLoaded: false });
         }
     }
     // Loads more rows because the placeholder last row has been rendered
@@ -314,7 +314,8 @@ class DatagridViewComponent extends react_1.default.Component {
             onRowDoubleClick: this.handleRowDoubleClick,
             onRowClick: this.handleRowClick,
             isColumnResizing: false,
-            onColumnResizeEndCallback: this.handleColumnResize
+            onColumnResizeEndCallback: this.handleColumnResize,
+            touchScrollEnabled: true
         }, this.renderColumns());
     }
 }

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

@@ -92,6 +92,21 @@ class LabeledExprGenerator {
                         }
                     ];
                 }
+                else if (column.idTable.match(/^custom./)) { // Support cascading ref question
+                    return this.schema
+                        .getColumns(column.idTable)
+                        .filter((c) => c.id[0] !== "_")
+                        .map((c) => ({
+                        expr: {
+                            type: "scalar",
+                            table,
+                            joins: [column.id],
+                            expr: { type: "field", table: column.idTable, column: c.id }
+                        },
+                        label: `${createLabel(column)} > ${createLabel(c)}`,
+                        joins
+                    }));
+                }
                 else {
                     // Use label, code, full name, or name of dest table
                     const destTable = this.schema.getTable(column.idTable);

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

@@ -0,0 +1,2 @@
+import dayjs from "dayjs";
+export default dayjs;

package/lib/dayjs.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const dayjs_1 = __importDefault(require("dayjs"));
+const localizedFormat_1 = __importDefault(require("dayjs/plugin/localizedFormat"));
+dayjs_1.default.extend(localizedFormat_1.default);
+exports.default = dayjs_1.default;

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

@@ -508,6 +508,11 @@ exports.languages = [
         "name": "Māori",
         "en": "Maori"
     },
+    {
+        "code": "miq",
+        "name": "Miskitu",
+        "en": "Miskito"
+    },
     {
         "code": "mk",
         "name": "Македонски",

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

@@ -23,99 +23,7 @@ export default class DetailLevelSelectComponent extends React.Component<DetailLe
     componentWillMount(): any;
     componentWillReceiveProps(nextProps: any): any;
     loadLevels(props: any): any;
-    render(): React.FunctionComponentElement<Omit<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>> | React.DetailedReactHTMLElement<{
+    render(): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>> | React.DetailedReactHTMLElement<{
         className: string;
     }, HTMLElement>;
 }

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

@@ -166,24 +166,13 @@ class Layer {
                 let bounds = null;
                 if (results[0].bounds) {
                     const [w, s, e, n] = (0, bbox_1.default)(results[0].bounds);
-                    // Pad to 10km if point
-                    if (w === e && n === s) {
-                        bounds = {
-                            w: w - 0.1,
-                            s: s - 0.1,
-                            e: e + 0.1,
-                            n: n + 0.1
-                        };
-                        // Pad bounds to prevent too small box (10m)
-                    }
-                    else {
-                        bounds = {
-                            w: w - 0.001,
-                            s: s - 0.001,
-                            e: e + 0.001,
-                            n: n + 0.001
-                        };
-                    }
+                    // Pad bounds to prevent too small box (100m)
+                    bounds = {
+                        w: w - 0.001,
+                        s: s - 0.001,
+                        e: e + 0.001,
+                        n: n + 0.001
+                    };
                 }
                 return callback(null, bounds);
             }

package/lib/maps/MapComponent.js

@@ -180,7 +180,7 @@ class MapComponent extends react_1.default.Component {
                 gridTemplateRows: "auto auto 1fr",
                 gridTemplateAreas: `"header designer" "quickfilters designer" "view designer"`
             }
-        }, this.renderHeader(), this.state.hideQuickfilters ? null : this.renderQuickfilter(), R("div", { style: { width: "100%", height: "100%", gridArea: "view", overflow: "hidden" } }, this.renderView()), designerVisible ? this.renderDesigner() : null);
+        }, this.props.hideTitleBar != true ? this.renderHeader() : null, this.state.hideQuickfilters ? null : this.renderQuickfilter(), R("div", { style: { width: "100%", height: "100%", gridArea: "view", overflow: "hidden" } }, this.renderView()), designerVisible ? this.renderDesigner() : null);
     }
 }
 exports.default = MapComponent;