@mwater/visualization 5.5.0 → 5.6.0

package/lib/layouts/blocks/BlocksDisplayComponent.js

@@ -42,6 +42,27 @@ const layoutOptions_1 = require("../../dashboards/layoutOptions");
   that can be used to drag new items into the layout. Palette is only displayed if onItemsChange is not null
 */
 class BlocksDisplayComponent extends react_1.default.Component {
+    state = {
+        isPaletteVisible: false,
+        isManuallyHidden: false
+    };
+    componentDidUpdate(prevProps) {
+        // If editing state changes (onItemsChange becomes available/unavailable)
+        if (prevProps.onItemsChange !== this.props.onItemsChange) {
+            if (this.props.onItemsChange && !this.state.isManuallyHidden) {
+                this.setState({ isPaletteVisible: true });
+            }
+            else if (!this.props.onItemsChange) {
+                this.setState({ isPaletteVisible: false, isManuallyHidden: false });
+            }
+        }
+    }
+    handlePaletteToggle = () => {
+        this.setState(prevState => ({
+            isPaletteVisible: !prevState.isPaletteVisible,
+            isManuallyHidden: !prevState.isManuallyHidden
+        }));
+    };
     handleBlockDrop = (sourceBlock, targetBlock, side) => {
         // Remove source from items
         let items = blockUtils.removeBlock(this.props.items, sourceBlock);
@@ -121,8 +142,28 @@ class BlocksDisplayComponent extends react_1.default.Component {
         });
     }
     renderPalette() {
-        return (react_1.default.createElement("div", { key: "palette", style: { width: 141, height: "100%", position: "absolute", top: 0, left: 0 } },
+        return (react_1.default.createElement("div", { key: "palette", style: {
+                width: 141,
+                height: "100%",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                transition: "transform 0.3s ease-in-out",
+                transform: this.state.isPaletteVisible ? "translateX(0)" : "translateX(-100%)"
+            } },
             react_1.default.createElement("div", { className: "mwater-visualization-palette", style: { height: "100%" } },
+                react_1.default.createElement("div", { style: {
+                        position: "absolute",
+                        right: -14,
+                        top: 0,
+                        background: "#363b3e",
+                        color: "white",
+                        padding: "5px 3px 5px 5px",
+                        cursor: "pointer",
+                        borderRadius: "0 3px 3px 0",
+                        zIndex: 1001
+                    }, onClick: this.handlePaletteToggle },
+                    react_1.default.createElement("i", { className: `fa fa-chevron-${this.state.isPaletteVisible ? 'left' : 'right'}` })),
                 react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "Text", design: { style: "title" } }), title: react_1.default.createElement("i", { className: "fa fa-font" }), subtitle: T `Title` }),
                 react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "Text", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-align-left" }), subtitle: T `Text` }),
                 react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "Image", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-picture-o" }), subtitle: T `Image` }),
@@ -178,15 +219,16 @@ class BlocksDisplayComponent extends react_1.default.Component {
             innerParentStyle = {};
             innerParentStyle.maxWidth = layoutOptions.maximumWidth || undefined;
             return (react_1.default.createElement(layoutOptions_1.DashboardStyleWrapper, { style: { width: "100%", height: "100%", overflow: "hidden", position: "relative" }, layoutOptions: layoutOptions },
-                this.renderPalette(),
+                react_1.default.createElement("div", { className: "mwater-visualization-palette-container" }, this.renderPalette()),
                 react_1.default.createElement("div", { style: {
                         position: "absolute",
-                        left: 141,
+                        left: this.state.isPaletteVisible ? 141 : 0,
                         top: 0,
                         bottom: 0,
                         right: 0,
                         overflowX: "auto",
-                        overflowY: "scroll"
+                        overflowY: "scroll",
+                        transition: "left 0.3s ease-in-out"
                     }, className: `mwater-visualization-block-parent-outer mwater-visualization-block-editing` },
                     react_1.default.createElement("div", { key: "inner", className: `mwater-visualization-block-parent-inner mwater-visualization-block-parent-inner-${this.props.style || "default"}`, style: innerParentStyle }, this.renderBlock(this.props.items, false, 0)))));
         }

package/lib/maps/BufferLayer.js

@@ -777,6 +777,18 @@ marker-fill: ` +
                 aggrNeed: "none"
             });
             draft.filter = exprCleaner.cleanExpr(design.filter || null, { table: design.table });
+            // Clean hover over expressions 
+            if (design.table && design.hoverOver && design.hoverOver.items) {
+                for (let i = 0; i < design.hoverOver.items.length; i++) {
+                    const item = design.hoverOver.items[i];
+                    if (item.value) {
+                        draft.hoverOver.items[i].value = exprCleaner.cleanExpr(item.value || null, {
+                            table: design.table,
+                            aggrStatuses: ["individual", "literal"]
+                        });
+                    }
+                }
+            }
         });
         return design;
     }

package/lib/maps/BufferLayerDesign.d.ts

@@ -36,7 +36,7 @@ export interface BufferLayerDesign {
         items: LayoutBlock;
     };
     /** Contains items: which is HoverOverItem[] */
-    hoverOver: {
+    hoverOver?: {
         items: HoverOverItem[];
     };
     /** Customizable filtering for popup. See PopupFilterJoins.md */

package/lib/maps/BufferLayerDesignerComponent.js

@@ -39,7 +39,7 @@ const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 const vectorMaps_1 = require("./vectorMaps");
-const EditHoverOver_1 = __importDefault(require("./EditHoverOver"));
+const EditHoverOver_1 = require("./EditHoverOver");
 class BufferLayerDesignerComponent extends react_1.default.Component {
     handleTableChange = (table) => {
         this.props.onDesignChange({ ...this.props.design, table });
@@ -164,7 +164,7 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return (react_1.default.createElement(EditHoverOver_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, idTable: this.props.design.table, defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table) }));
+        return (react_1.default.createElement(EditHoverOver_1.EditHoverOver, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, idTable: this.props.design.table, defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table), aggrStatuses: ["individual", "literal"] }));
     }
     render() {
         return (react_1.default.createElement("div", null,

package/lib/maps/ChoroplethLayer.js

@@ -1434,6 +1434,18 @@ class ChoroplethLayer extends Layer_1.default {
             else {
                 delete draft.filter;
             }
+            // Clean hover over expressions only for indirect mode with a valid table
+            if (design.table && design.regionMode === "indirect" && design.hoverOver && design.hoverOver.items) {
+                for (let i = 0; i < design.hoverOver.items.length; i++) {
+                    const item = design.hoverOver.items[i];
+                    if (item.value) {
+                        draft.hoverOver.items[i].value = exprCleaner.cleanExpr(item.value || null, {
+                            table: design.table,
+                            aggrStatuses: ["individual", "literal", "aggregate"]
+                        });
+                    }
+                }
+            }
             if (design.detailLevel == null) {
                 draft.detailLevel = 0;
             }

package/lib/maps/ChoroplethLayerDesign.d.ts

@@ -50,8 +50,11 @@ export default interface ChoroplethLayerDesign {
     };
     /** customizable filtering for popup. See PopupFilterJoins.md. Only when region mode is "indirect"  */
     popupFilterJoins: PopupFilterJoins;
-    /** Hover over items to display when hovering over a region. Only when region mode is "indirect" */
-    hoverOver: {
+    /** Hover over items to display when hovering over a region. Only when region mode is "indirect".
+     * This is an aggregate hover over, but can contain individual items. If so, only the first row
+     * of the resulting query will be displayed.
+     */
+    hoverOver?: {
         items: HoverOverItem[];
     };
     /** minimum zoom level */

package/lib/maps/ChoroplethLayerDesigner.d.ts

@@ -2,9 +2,7 @@ import React from "react";
 import { Schema, DataSource, Expr } from "@mwater/expressions";
 import ChoroplethLayerDesign from "./ChoroplethLayerDesign";
 import { JsonQLFilter } from "../index";
-import EditPopupComponent from "./EditPopupComponent";
 import { Axis } from "../axes/Axis";
-import ScopeAndDetailLevelComponent from "./ScopeAndDetailLevelComponent";
 export default class ChoroplethLayerDesigner extends React.Component<{
     schema: Schema;
     dataSource: DataSource;
@@ -30,34 +28,14 @@ export default class ChoroplethLayerDesigner extends React.Component<{
     renderTable(): React.JSX.Element | null;
     renderRegionsTable(): React.JSX.Element;
     renderAdminRegionExpr(): React.JSX.Element | null;
-    renderScopeAndDetailLevel(): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | React.CElement<import("./ScopeAndDetailLevelComponent").ScopeAndDetailLevelComponentProps, ScopeAndDetailLevelComponent>;
-    renderDisplayNames(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement>;
-    renderColor(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    renderColorAxis(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null | undefined;
-    renderFillOpacity(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement>;
-    renderBorderColor(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement>;
-    renderFilter(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    renderPopup(): React.CElement<any, EditPopupComponent> | null;
-    renderHoverOver(): React.FunctionComponentElement<{
-        design: ChoroplethLayerDesign;
-        onDesignChange: (design: ChoroplethLayerDesign) => void;
-        schema: Schema;
-        dataSource: DataSource;
-        table: string;
-        idTable: string;
-        defaultPopupFilterJoins: {
-            [tableId: string]: Expr;
-        };
-    }> | null;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderScopeAndDetailLevel(): React.JSX.Element;
+    renderDisplayNames(): React.JSX.Element;
+    renderColor(): React.JSX.Element | null;
+    renderColorAxis(): React.JSX.Element | null | undefined;
+    renderFillOpacity(): React.JSX.Element;
+    renderBorderColor(): React.JSX.Element;
+    renderFilter(): React.JSX.Element | null;
+    renderPopup(): React.JSX.Element | null;
+    renderHoverOver(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }

package/lib/maps/ChoroplethLayerDesigner.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const immer_1 = require("immer");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
@@ -41,7 +40,7 @@ const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const AdminScopeAndDetailLevelComponent_1 = __importDefault(require("./AdminScopeAndDetailLevelComponent"));
 const ScopeAndDetailLevelComponent_1 = __importDefault(require("./ScopeAndDetailLevelComponent"));
-const EditHoverOver_1 = __importDefault(require("./EditHoverOver"));
+const EditHoverOver_1 = require("./EditHoverOver");
 // Designer for a choropleth layer
 class ChoroplethLayerDesigner extends react_1.default.Component {
     update(mutation) {
@@ -151,7 +150,8 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
             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 }));
+        // Regions tables are either "regions." or "regions_<name>" with a shape column
+        let options = lodash_1.default.map(lodash_1.default.filter(this.props.schema.getTables(), table => table.id.startsWith("regions.") || (table.id.startsWith("regions_") && this.props.schema.getColumn(table.id, "shape") != null)), table => ({ value: table.id, label: expressions_1.ExprUtils.localizeString(table.name) }));
         const regionsTable = this.props.design.regionsTable || "admin_regions";
         return (react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement("label", { className: "text-muted" }, T `Regions Type`),
@@ -182,39 +182,27 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
     renderScopeAndDetailLevel() {
         const regionsTable = this.props.design.regionsTable || "admin_regions";
         if (regionsTable === "admin_regions") {
-            return R(AdminScopeAndDetailLevelComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                scope: this.props.design.scope,
-                scopeLevel: this.props.design.scopeLevel || 0,
-                detailLevel: this.props.design.detailLevel,
-                onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange
-            });
+            return react_1.default.createElement(AdminScopeAndDetailLevelComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, scope: this.props.design.scope, scopeLevel: this.props.design.scopeLevel || 0, detailLevel: this.props.design.detailLevel, onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange });
         }
         else {
-            return R(ScopeAndDetailLevelComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                scope: this.props.design.scope,
-                scopeLevel: this.props.design.scopeLevel,
-                detailLevel: this.props.design.detailLevel,
-                onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange,
-                regionsTable
-            });
+            return react_1.default.createElement(ScopeAndDetailLevelComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, scope: this.props.design.scope, scopeLevel: this.props.design.scopeLevel, detailLevel: this.props.design.detailLevel, onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange, regionsTable: regionsTable });
         }
     }
     renderDisplayNames() {
-        return R("div", { className: "mb-3" }, react_1.default.createElement(ui.Checkbox, { value: this.props.design.displayNames, onChange: value => this.handleDisplayNamesChange(value) }, T `Display Region Names`));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement(ui.Checkbox, { value: this.props.design.displayNames, onChange: value => this.handleDisplayNamesChange(value) }, T `Display Region Names`)));
     }
     renderColor() {
         // Only if plain
         if (this.props.design.regionMode !== "plain") {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Fill Color`), R("div", null, R(ColorComponent_1.default, {
-            color: this.props.design.color,
-            onChange: this.handleColorChange
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-tint" }),
+                T `Fill Color`),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.color, onChange: this.handleColorChange }))));
     }
     renderColorAxis() {
         // Not applicable if in plain mode, or if in indirect mode with no table
@@ -235,19 +223,12 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
                 }
             }
             const table = this.props.design.table;
-            return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Color By Data`), R(AxisComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                table: this.props.design.table,
-                types: ["text", "enum", "boolean", "date"],
-                aggrNeed: "required",
-                value: this.props.design.axes.color,
-                defaultColor: this.props.design.color,
-                showColorMap: true,
-                onChange: this.handleColorAxisChange,
-                allowExcludedValues: true,
-                filters: filters
-            })));
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement("label", { className: "text-muted" },
+                        react_1.default.createElement("span", { className: "fas fa-tint" }),
+                        T `Color By Data`),
+                    react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["text", "enum", "boolean", "date"], aggrNeed: "required", value: this.props.design.axes.color, defaultColor: this.props.design.color, showColorMap: true, onChange: this.handleColorAxisChange, allowExcludedValues: true, filters: filters }))));
         }
         else {
             // direct mode
@@ -275,19 +256,12 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
                     }
                 });
             }
-            return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Color By Data`), R(AxisComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                table: regionsTable,
-                types: ["text", "enum", "boolean", "date"],
-                aggrNeed: "none",
-                value: this.props.design.axes.color,
-                defaultColor: this.props.design.color,
-                showColorMap: true,
-                onChange: this.handleColorAxisChange,
-                allowExcludedValues: true,
-                filters: filters
-            })));
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement("label", { className: "text-muted" },
+                        react_1.default.createElement("span", { className: "fas fa-tint" }),
+                        T `Color By Data`),
+                    react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: regionsTable, types: ["text", "enum", "boolean", "date"], aggrNeed: "none", value: this.props.design.axes.color, defaultColor: this.props.design.color, showColorMap: true, onChange: this.handleColorAxisChange, allowExcludedValues: true, filters: filters }))));
         }
     }
     // renderLabelAxis: ->
@@ -309,33 +283,30 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
     //         showColorMap: true
     //         onChange: @handleColorAxisChange)
     renderFillOpacity() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`), ": ", R(rc_slider_1.default, {
-            min: 0,
-            max: 100,
-            step: 1,
-            tipTransitionName: "rc-slider-tooltip-zoom-down",
-            value: Math.round(this.props.design.fillOpacity * this.props.design.fillOpacity * 100),
-            onChange: (val) => this.handleFillOpacityChange(Math.sqrt(val / 100))
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`),
+            ": ",
+            react_1.default.createElement(rc_slider_1.default, { min: 0, max: 100, step: 1, tipTransitionName: "rc-slider-tooltip-zoom-down", value: Math.round(this.props.design.fillOpacity * this.props.design.fillOpacity * 100), onChange: (val) => this.handleFillOpacityChange(Math.sqrt(val / 100)) })));
     }
     renderBorderColor() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Border Color`), R("div", null, R(ColorComponent_1.default, {
-            color: this.props.design.borderColor || "#000",
-            onChange: this.handleBorderColorChange
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-tint" }),
+                T `Border Color`),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.borderColor || "#000", onChange: this.handleBorderColorChange }))));
     }
     renderFilter() {
         // If not in indirect mode with table, hide
         if (this.props.design.regionMode !== "indirect" || !this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T `Filters`), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: this.handleFilterChange,
-            table: this.props.design.table,
-            value: this.props.design.filter
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-filter" }),
+                T `Filters`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(expressions_ui_1.FilterExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleFilterChange, table: this.props.design.table, value: this.props.design.filter }))));
     }
     renderPopup() {
         // If not in indirect mode with table, hide
@@ -347,15 +318,7 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
         if (this.props.design.adminRegionExpr) {
             defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr;
         }
-        return R(EditPopupComponent_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            idTable: regionsTable,
-            defaultPopupFilterJoins
-        });
+        return react_1.default.createElement(EditPopupComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, idTable: regionsTable, defaultPopupFilterJoins: defaultPopupFilterJoins });
     }
     renderHoverOver() {
         // If not in indirect mode with table, hide
@@ -367,18 +330,24 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
         if (this.props.design.adminRegionExpr) {
             defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr;
         }
-        return R(EditHoverOver_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            idTable: regionsTable,
-            defaultPopupFilterJoins
-        });
+        return react_1.default.createElement(EditHoverOver_1.EditHoverOver, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, idTable: regionsTable, defaultPopupFilterJoins: defaultPopupFilterJoins, aggrStatuses: ["individual", "aggregate", "literal"] });
     }
     render() {
-        return R("div", null, this.renderRegionMode(), this.renderRegionsTable(), this.renderTable(), this.renderAdminRegionExpr(), this.renderScopeAndDetailLevel(), this.renderDisplayNames(), this.renderColor(), this.renderColorAxis(), this.renderFillOpacity(), this.renderBorderColor(), this.renderFilter(), this.renderPopup(), this.renderHoverOver(), R(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange }));
+        return (react_1.default.createElement("div", null,
+            this.renderRegionMode(),
+            this.renderRegionsTable(),
+            this.renderTable(),
+            this.renderAdminRegionExpr(),
+            this.renderScopeAndDetailLevel(),
+            this.renderDisplayNames(),
+            this.renderColor(),
+            this.renderColorAxis(),
+            this.renderFillOpacity(),
+            this.renderBorderColor(),
+            this.renderFilter(),
+            this.renderPopup(),
+            this.renderHoverOver(),
+            react_1.default.createElement(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })));
     }
 }
 exports.default = ChoroplethLayerDesigner;

package/lib/maps/DirectMapDataSource.js

@@ -227,22 +227,12 @@ class DirectLayerDataSource {
             query.cacheExpiry = cacheExpiry;
         }
         let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring_1.default.stringify(query);
-        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-        // Used to speed queries
-        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
-        }
         return url;
     }
     // Create query string
     createLegacyUrl(design, extension, filters) {
         let where;
         let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`;
-        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-        // Used to speed queries
-        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
-        }
         if (this.options.client) {
             url += `&client=${this.options.client}`;
         }

package/lib/maps/EditHoverOver.d.ts

@@ -1,4 +1,4 @@
-import { DataSource, Schema } from "@mwater/expressions";
+import { AggrStatus, DataSource, Schema } from "@mwater/expressions";
 import React from "react";
 export interface EditHoverOverProps {
     /** Schema to use */
@@ -13,6 +13,7 @@ export interface EditHoverOverProps {
     /** Table of the row that join is to. Usually same as table except for choropleth maps */
     idTable: string;
     defaultPopupFilterJoins: any;
+    /** Aggr statuses to allow in hover over expressions */
+    aggrStatuses: AggrStatus[];
 }
-declare function EditHoverOver(props: EditHoverOverProps): React.JSX.Element;
-export default EditHoverOver;
+export declare function EditHoverOver(props: EditHoverOverProps): React.JSX.Element;

package/lib/maps/EditHoverOver.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditHoverOver = EditHoverOver;
 const lodash_1 = require("lodash");
 const expressions_1 = require("@mwater/expressions");
 const expressions_ui_1 = require("@mwater/expressions-ui");
@@ -84,7 +85,7 @@ function EditHoverOver(props) {
                         react_1.default.createElement("th", null, T `Value`),
                         react_1.default.createElement("th", { style: { width: "1%", whiteSpace: "nowrap" } }, T `Format`),
                         react_1.default.createElement("th", { style: { width: "1%", whiteSpace: "nowrap" } }))),
-                react_1.default.createElement("tbody", null, draftItems?.map((item) => (react_1.default.createElement(HoverOverItemEditor, { key: item.id, schema: schema, dataSource: dataSource, table: table, onItemChange: handleItemChange, onItemDelete: handleItemDelete, item: item })))))),
+                react_1.default.createElement("tbody", null, draftItems?.map((item) => (react_1.default.createElement(HoverOverItemEditor, { key: item.id, schema: schema, dataSource: dataSource, table: table, onItemChange: handleItemChange, onItemDelete: handleItemDelete, item: item, aggrStatuses: props.aggrStatuses })))))),
             react_1.default.createElement("button", { className: "btn btn-link", onClick: handleAddItem },
                 react_1.default.createElement("span", { className: "fas fa-plus me-1" }),
                 T `Add Item`)))));
@@ -110,10 +111,9 @@ function HoverOverItemEditor(props) {
         react_1.default.createElement("td", { className: "align-middle" },
             react_1.default.createElement(ui.TextInput, { value: item.label, onChange: value => onItemChange({ ...item, label: value }) })),
         react_1.default.createElement("td", { className: "align-middle" },
-            react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: schema, dataSource: dataSource, table: table, types: ["text", "number", "enum", "boolean", "date", "datetime", "id"], onChange: expr => onItemChange({ ...item, value: expr }), value: item.value ?? null, aggrStatuses: ["individual", "literal", "aggregate"] })),
+            react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: schema, dataSource: dataSource, table: table, types: ["text", "number", "enum", "boolean", "date", "datetime", "id"], onChange: expr => onItemChange({ ...item, value: expr }), value: item.value ?? null, aggrStatuses: props.aggrStatuses })),
         react_1.default.createElement("td", { className: "align-middle", style: { width: "1%", whiteSpace: "nowrap" } }, renderFormat()),
         react_1.default.createElement("td", { className: "align-middle", style: { width: "1%", whiteSpace: "nowrap" } },
             react_1.default.createElement("button", { className: "btn btn-link", onClick: () => onItemDelete(item) },
                 react_1.default.createElement("span", { className: "fa fa-close" })))));
 }
-exports.default = EditHoverOver;

package/lib/maps/HoverContent.js

@@ -53,7 +53,7 @@ const HoverContent = (props) => {
     if (error) {
         return react_1.default.createElement("div", { className: "text-danger" }, error);
     }
-    return (react_1.default.createElement("div", { className: "_mviz-map-hover-content" }, props.items.map((item) => {
+    return (react_1.default.createElement("div", { className: "mwater-visualization-map-hover-content" }, props.items.map((item) => {
         let value = values[item.id];
         if (value != null && item.value) {
             // Get expression type

package/lib/maps/LeafletMapComponent.js

@@ -32,7 +32,6 @@ const react_1 = __importStar(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const LeafletLoading_1 = __importDefault(require("./LeafletLoading"));
 const leaflet_1 = __importDefault(require("leaflet"));
-let BingLayer = require("./BingLayer");
 let UtfGridLayer = require("./UtfGridLayer");
 const R = react_1.default.createElement;
 const marker_icon_2x_png_1 = __importDefault(require("./marker-icon-2x.png"));
@@ -266,34 +265,26 @@ class LeafletMapComponent extends react_1.Component {
             }
             switch (this.props.baseLayerId) {
                 case "bing_road":
-                    this.baseLayer = new BingLayer("Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU", {
-                        type: "Road"
+                    this.baseLayer = leaflet_1.default.tileLayer('https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d', {
+                        maxZoom: 20,
+                        attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
                     });
                     break;
-                // @baseLayer = L.tileLayer('https://{s}.api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-                //   attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
-                //   tileSize: 512,
-                //   maxZoom: 21,
-                //   maxNativeZoom: 19,
-                //   subdomains: ["a", "b"],
-                //   zoomOffset: -1,
-                //   id: 'mapbox/streets-v11',
-                //   accessToken: 'pk.eyJ1IjoiZ3Jhc3NpY2siLCJhIjoiY2ozMzU1N3ZoMDA3ZDJxbzh0aTRtOTRoeSJ9.fFWBZ88vbdezyhfw-I-fag'
-                // })
                 case "bing_aerial":
-                    this.baseLayer = new BingLayer("Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU", {
-                        type: "AerialWithLabels"
+                    this.baseLayer = leaflet_1.default.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}.jpg?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d', {
+                        maxZoom: 20,
+                        attribution: '&copy; CNES, Distribution Airbus DS, &copy; Airbus DS, &copy; PlanetObserver (Contains Copernicus Data) | &copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
                     });
                     break;
                 case "cartodb_positron":
-                    this.baseLayer = leaflet_1.default.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
-                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
+                    this.baseLayer = leaflet_1.default.tileLayer("https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d", {
+                        attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
                         maxZoom: 21
                     });
                     break;
                 case "cartodb_dark_matter":
-                    this.baseLayer = leaflet_1.default.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png", {
-                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
+                    this.baseLayer = leaflet_1.default.tileLayer("https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d", {
+                        attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
                         maxZoom: 21
                     });
                     break;

package/lib/maps/MapComponent.js

@@ -170,7 +170,6 @@ class MapComponent extends react_1.default.Component {
     }
     render() {
         const designerVisible = !this.getDesign().hideDesignPanel;
-        console.log("designerVisible", designerVisible);
         return R("div", {
             style: {
                 width: "100%",