@mwater/visualization 5.0.1 → 5.2.0

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

@@ -1,4 +1,5 @@
 import React from "react";
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 import HorizontalBlockComponent from "./HorizontalBlockComponent";
 import { LayoutBlock } from "./blockUtils";
 export interface BlocksDisplayComponentProps {
@@ -38,7 +39,7 @@ declare class BlocksDisplayComponent extends React.Component<BlocksDisplayCompon
             left: number;
         };
     }, HTMLElement>;
-    render(): React.CElement<any, React.Component<any, any, any>> | React.DetailedReactHTMLElement<{
+    render(): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent> | React.DetailedReactHTMLElement<{
         style: {
             width: string;
             height: string;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import LayoutManager from "../LayoutManager";
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 export default class GridLayoutManager extends LayoutManager {
     renderPalette(width: any): React.DetailedReactHTMLElement<{
         className: string;
@@ -11,7 +12,7 @@ export default class GridLayoutManager extends LayoutManager {
             width: number;
         };
     }, HTMLElement>;
-    renderLayout(options: any): React.CElement<any, React.Component<any, any, any>>;
+    renderLayout(options: any): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent>;
     isEmpty(items: any): boolean;
     getWidgetTypeAndDesign(items: any, widgetId: any): any;
     getAllWidgets(items: any): {

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

@@ -96,7 +96,9 @@ class BufferLayer extends Layer_1.default {
             sourceLayers: [{ id: "circles", jsonql: jsonql }],
             ctes: [],
             mapLayers: mapLayers,
-            mapLayersHandleClicks: [`${sourceId}:fill`]
+            mapLayersHandleClicks: [`${sourceId}:fill`],
+            minZoom: this.getMinZoom(design),
+            maxZoom: this.getMaxZoom(design)
         };
     }
     createJsonQL(design, schema, filters) {

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

@@ -90,7 +90,9 @@ class ClusterLayer extends Layer_1.default {
             sourceLayers: [{ id: "clusters", jsonql: jsonql }],
             ctes: [],
             mapLayers: mapLayers,
-            mapLayersHandleClicks: [`${sourceId}:circles-single`, `${sourceId}:circles-multiple`]
+            mapLayersHandleClicks: [`${sourceId}:circles-single`, `${sourceId}:circles-multiple`],
+            minZoom: this.getMinZoom(design),
+            maxZoom: this.getMaxZoom(design)
         };
     }
     createJsonQL(design, schema, filters) {

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

@@ -51,7 +51,9 @@ class GridLayer extends Layer_1.default {
             sourceLayers: [{ id: "grid", jsonql: jsonql }],
             ctes: [],
             mapLayers: mapLayers,
-            mapLayersHandleClicks: [`${sourceId}:fill`]
+            mapLayersHandleClicks: [`${sourceId}:fill`],
+            minZoom: this.getMinZoom(design),
+            maxZoom: this.getMaxZoom(design)
         };
     }
     createJsonQL(design, schema, filters) {
@@ -544,9 +546,9 @@ class GridLayer extends Layer_1.default {
     // }
     // Get min and max zoom levels
     getMinZoom(design) {
-        // Determine if too zoomed out to safely display (zoom 6 at 20000 is limit)
+        // Determine if too zoomed out to safely display (200x200, so size = 4e7/(2^zoom) < 200)
         if (design.sizeUnits === "meters") {
-            const minSafeZoom = Math.log2(1280000.0 / (design.size || 20000));
+            const minSafeZoom = Math.log2(200000.0 / (design.size || 20000));
             if (design.minZoom) {
                 return Math.max(design.minZoom, minSafeZoom);
             }

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"));
@@ -79,7 +79,6 @@ class GridLayerDesigner extends react_1.default.Component {
             this.update((d) => {
                 d.sizeUnits = sizeUnits;
                 d.size = 20000;
-                d.minZoom = 6;
             });
         }
     };
@@ -127,7 +126,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/LayerSwitcherComponent.js

@@ -72,7 +72,7 @@ function LayerSwitcherComponent(props) {
         }) },
         react_1.default.createElement("div", { style: iconStyle, onClick: toggleDropdown },
             react_1.default.createElement("i", { className: "fas fa-layer-group fa-fw" })),
-        dropdownOpen ? (react_1.default.createElement("div", { style: { backgroundColor: "white", padding: 5 } }, props.design.layerViews.map(renderLayerView))) : null));
+        dropdownOpen ? (react_1.default.createElement("div", { style: { backgroundColor: "white", padding: 5, textAlign: "left" } }, props.design.layerViews.map(renderLayerView))) : null));
 }
 exports.LayerSwitcherComponent = LayerSwitcherComponent;
 /** Hook for click outside catching */

package/lib/maps/MapComponent.d.ts

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React, { ReactNode } from "react";
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 import UndoStack from "../UndoStack";
 import { DataSource, Schema } from "@mwater/expressions";
 import { MapDataSource } from "./MapDataSource";
@@ -60,13 +61,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
     getDesign(): MapDesign;
     handleToggleDesignPanel: () => void;
     getQuickfilterValues: () => any[];
-    renderView(): React.CElement<{
-        injectWidth: boolean;
-        injectHeight: boolean;
-    }, React.Component<{
-        injectWidth: boolean;
-        injectHeight: boolean;
-    }, any, any>>;
+    renderView(): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent>;
     getCompiledFilters(): {
         table: string;
         jsonql: import("@mwater/jsonql").JsonQLExpr;

package/lib/maps/MapDesign.d.ts

@@ -1,5 +1,6 @@
-import { Expr, LiteralType } from "@mwater/expressions";
+import { Expr } from "@mwater/expressions";
 import { Quickfilter } from "../quickfilter/Quickfilter";
+import { GlobalFilter } from "../GlobalFilter";
 /** Maps are stored as a base layer, a series of layers and filters. */
 export interface MapDesign {
     /** "bing_road"/"bing_aerial"/"cartodb_positron"/"cartodb_dark_matter"/"blank" */
@@ -63,15 +64,3 @@ export interface MapLayerView {
     /** true to hide legend */
     hideLegend?: boolean;
 }
-/** Global filters apply to multiple tables at once if a certain column is present. User-interface to set them is application-specific
-and the default (non-mWater) dashboard applies them but does not allow editing. */
-export interface GlobalFilter {
-    /** id of column to filter */
-    columnId: string;
-    /** type of column to filter (to ensure that consistent) */
-    columnType: LiteralType;
-    /** op of expression for filtering */
-    op: string;
-    /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
-    exprs: Expr[];
-}

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

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 export interface MapFiltersDesignerComponentProps {
@@ -12,9 +11,6 @@ export interface MapFiltersDesignerComponentProps {
     onDesignChange: any;
 }
 export default class MapFiltersDesignerComponent extends React.Component<MapFiltersDesignerComponentProps> {
-    static contextTypes: {
-        globalFiltersElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-    };
     handleFiltersChange: (filters: any) => any;
     handleGlobalFiltersChange: (globalFilters: any) => any;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null;

package/lib/maps/MapFiltersDesignerComponent.js

@@ -27,15 +27,14 @@ 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 PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
 const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerComponent"));
 const MapUtils = __importStar(require("./MapUtils"));
+const MWaterContextComponent_1 = require("../MWaterContextComponent");
 // Designer for filters for a map
 class MapFiltersDesignerComponent extends react_1.default.Component {
-    static contextTypes = { globalFiltersElementFactory: prop_types_1.default.func };
     handleFiltersChange = (filters) => {
         const design = lodash_1.default.extend({}, this.props.design, { filters });
         return this.props.onDesignChange(design);
@@ -56,15 +55,15 @@ class MapFiltersDesignerComponent extends react_1.default.Component {
             filters: this.props.design.filters,
             onFiltersChange: this.handleFiltersChange,
             filterableTables
-        }))), this.context.globalFiltersElementFactory
-            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Global Filters "), R("div", { style: { margin: 5 } }, this.context.globalFiltersElementFactory({
+        }))), react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, globalFiltersElementFactory => globalFiltersElementFactory
+            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Global Filters "), R("div", { style: { margin: 5 } }, globalFiltersElementFactory({
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,
                 filterableTables,
                 globalFilters: this.props.design.globalFilters || [],
                 onChange: this.handleGlobalFiltersChange
             })))
-            : undefined);
+            : undefined));
     }
 }
 exports.default = MapFiltersDesignerComponent;

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

@@ -2,6 +2,7 @@ import PropTypes from "prop-types";
 import React, { ReactNode } from "react";
 import LeafletMapComponent from "./LeafletMapComponent";
 import { Schema, DataSource } from "@mwater/expressions";
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { MapDesign } from "./MapDesign";
 import { MapDataSource } from "./MapDataSource";
@@ -64,15 +65,7 @@ export default class RasterMapViewComponent extends React.Component<RasterMapVie
         locale: string;
         onHide: () => void;
     }>;
-    renderPopup(): React.CElement<{
-        onClose: () => void;
-        showCloseX: boolean;
-        size: string;
-    }, React.Component<{
-        onClose: () => void;
-        showCloseX: boolean;
-        size: string;
-    }, any, any>> | null;
+    renderPopup(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
     render(): React.DetailedReactHTMLElement<{
         style: {
             width: number;

package/lib/maps/RegionSelectComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { IdLiteralComponent } from "@mwater/expressions-ui";
 import { DataSource, Schema } from "@mwater/expressions";
 export interface RegionSelectComponentProps {
     schema: Schema;
@@ -19,5 +20,5 @@ export default class RegionSelectComponent extends React.Component<RegionSelectC
         regionsTable: string;
     };
     handleChange: (id: any) => void;
-    render(): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    render(): React.CElement<import("@mwater/expressions-ui/lib/IdLiteralComponent").IdLiteralComponentProps, IdLiteralComponent>;
 }

package/lib/maps/ServerMapDataSource.d.ts

@@ -22,7 +22,7 @@ interface ServerMapDataSourceOptions {
     /** map id to use on server */
     mapId: string;
     /** revision to use to allow caching */
-    rev: string;
+    rev: number;
 }
 interface ServerMapLayerDataSourceOptions extends ServerMapDataSourceOptions {
     layerView: MapLayerView;

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

@@ -2,6 +2,7 @@ import { Map, LngLatBoundsLike } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./VectorMapViewComponent.css";
 import React from "react";
+export declare function setPrintingModeEnabled(val: boolean): void;
 /** This must be called to set the appropriate key before use. If it is not set, vector maps will not function.
  * Maps will fall back to leaflet if the key is not set or if set to ""
  */

package/lib/maps/vectorMaps.js

@@ -3,13 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePersistedMapBounds = exports.VectorMapLogo = exports.AttributionControl = exports.mergeBaseAndUserStyle = exports.useBaseStyle = exports.useStyleMap = exports.useHoverCursor = exports.useVectorMap = exports.areVectorMapsEnabled = exports.getMapTilerApiKey = exports.setMapTilerApiKey = void 0;
+exports.usePersistedMapBounds = exports.VectorMapLogo = exports.AttributionControl = exports.mergeBaseAndUserStyle = exports.useBaseStyle = exports.useStyleMap = exports.useHoverCursor = exports.useVectorMap = exports.areVectorMapsEnabled = exports.getMapTilerApiKey = exports.setMapTilerApiKey = exports.setPrintingModeEnabled = void 0;
 const maplibre_gl_1 = __importDefault(require("maplibre-gl"));
 const react_1 = require("react");
 const mapSymbols_1 = require("./mapSymbols");
 require("maplibre-gl/dist/maplibre-gl.css");
 require("./VectorMapViewComponent.css");
 const react_2 = __importDefault(require("react"));
+/** Set to true to enable printing by preserving the drawing buffer */
+let printingModeEnabled = false;
+function setPrintingModeEnabled(val) {
+    printingModeEnabled = val;
+}
+exports.setPrintingModeEnabled = setPrintingModeEnabled;
 /* Hooks and functions related to displaying a vector map */
 let mapTilerApiKey = "";
 /** This must be called to set the appropriate key before use. If it is not set, vector maps will not function.
@@ -45,7 +51,8 @@ function useVectorMap(options) {
             return;
         }
         const observer = new IntersectionObserver(function (entries) {
-            setMapDivVisible(entries[0].isIntersecting);
+            // When in printing mode, always visible as we need to render the map
+            setMapDivVisible(entries[0].isIntersecting || printingModeEnabled);
         });
         observer.observe(divRef);
         return () => {
@@ -82,6 +89,7 @@ function useVectorMap(options) {
                 [-179.9, -85],
                 [179.9, 85] // Northeast coordinates
             ],
+            preserveDrawingBuffer: printingModeEnabled
         });
         setHasWebGLContext(true);
         // Add listener for losing context

package/lib/quickfilter/QuickfilterCompiler.d.ts

@@ -12,5 +12,5 @@ export default class QuickfilterCompiler {
      * See README for values
      */
     compile(design: Quickfilter[] | undefined, values: any[] | null, locks: QuickfilterLock[] | null | undefined): JsonQLFilter[];
-    compileToFilterExpr(expr: any, value: any, multi: any): OpExpr | null;
+    compileToFilterExpr(expr: any, value: any, multi?: boolean): OpExpr | null;
 }

package/lib/widgets/IFrameWidgetComponent.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import DropdownWidgetComponent from "./DropdownWidgetComponent";
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
 export interface IFrameWidgetComponentProps {
     design: any;
     /** Called with new design. null/undefined for readonly */
@@ -15,15 +16,7 @@ export default class IFrameWidgetComponent extends React.Component<IFrameWidgetC
     constructor(props: any);
     handleStartEditing: () => void;
     handleEndEditing: () => any;
-    renderEditor(): React.CElement<{
-        header: string;
-        showCloseX: boolean;
-        onClose: () => any;
-    }, React.Component<{
-        header: string;
-        showCloseX: boolean;
-        onClose: () => any;
-    }, any, any>> | null;
+    renderEditor(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
     renderEditLink(): React.DetailedReactHTMLElement<{
         className: string;
         onClick: () => void;