@mwater/visualization 5.4.5 → 5.6.0

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}`;
         }
@@ -262,4 +252,21 @@ class DirectLayerDataSource {
         }
         return url;
     }
+    /** Gets hover over data for hover over items
+     * @param design The design of the layer
+     * @param data The data of the current item being hovered over. e.g. { id: 123 }
+     * @param filters The filters to apply to the hover over data, not including filtering down to the current item
+     * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+     */
+    getHoverOverData(design, data, filters) {
+        // Create layer
+        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
+        return layer.getHoverOverData({
+            design,
+            data,
+            filters,
+            schema: this.options.schema,
+            dataSource: this.options.dataSource,
+        });
+    }
 }

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 const EditHoverOver: React.FC<EditHoverOverProps>;
-export default EditHoverOver;
+export declare function EditHoverOver(props: EditHoverOverProps): React.JSX.Element;

package/lib/maps/EditHoverOver.js

@@ -26,65 +26,94 @@ 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");
 const react_1 = __importStar(require("react"));
-const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const uuid_1 = __importDefault(require("uuid"));
-const EditHoverOver = props => {
+const valueFormatter_1 = require("../valueFormatter");
+const valueFormatter_2 = require("../valueFormatter");
+function EditHoverOver(props) {
+    const { schema, dataSource, design, onDesignChange, table } = props;
     const [editing, setEditing] = (0, react_1.useState)(false);
+    const [draftItems, setDraftItems] = (0, react_1.useState)(undefined);
     const handleRemovePopup = () => {
-        const design = (0, lodash_1.omit)(props.design, "hoverOver");
-        props.onDesignChange(design);
-    };
-    const handleDesignChange = (items) => {
-        const hoverOver = { ...(props.design.hoverOver ?? {}), items };
-        const design = { ...props.design, hoverOver };
-        return props.onDesignChange(design);
+        const newDesign = (0, lodash_1.omit)(design, "hoverOver");
+        onDesignChange(newDesign);
     };
     const handleItemChange = (item) => {
-        const items = (props.design.hoverOver?.items ?? []).map((i) => (item.id === i.id ? item : i));
-        const design = { ...props.design, hoverOver: { ...props.design.hoverOver, items } };
-        return props.onDesignChange(design);
+        setDraftItems(draftItems?.map((i) => (item.id === i.id ? item : i)));
     };
     const handleItemDelete = (item) => {
-        const items = (props.design.hoverOver?.items ?? []).filter((i) => item.id !== i.id);
-        const design = { ...props.design, hoverOver: { ...props.design.hoverOver, items } };
-        return props.onDesignChange(design);
+        setDraftItems(draftItems?.filter((i) => item.id !== i.id));
+    };
+    const handleAddItem = () => {
+        setDraftItems([...(draftItems ?? []), { id: (0, uuid_1.default)().replace(/-/g, ""), label: "" }]);
+    };
+    const handleSave = () => {
+        const hoverOver = { ...(design.hoverOver ?? {}), items: draftItems ?? [] };
+        const newDesign = { ...design, hoverOver };
+        onDesignChange(newDesign);
+        setEditing(false);
+        setDraftItems(undefined);
+    };
+    const handleCancel = () => {
+        setEditing(false);
+        setDraftItems(undefined);
+    };
+    const handleOpen = () => {
+        setDraftItems(design.hoverOver?.items ?? []);
+        setEditing(true);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("button", { className: "btn btn-link", onClick: () => setEditing(true) },
+        react_1.default.createElement("button", { className: "btn btn-link", onClick: handleOpen },
             react_1.default.createElement("span", { className: "fa fa-pencil" }),
             " ",
             T `Customize Hoverover`),
-        props.design.hoverOver && (react_1.default.createElement("button", { className: "btn btn-link", onClick: handleRemovePopup },
+        design.hoverOver && (react_1.default.createElement("button", { className: "btn btn-link", onClick: handleRemovePopup },
             react_1.default.createElement("span", { className: "fa fa-times" }),
             " ",
             T `Remove Hover over`)),
-        editing && (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, onRequestClose: () => setEditing(false) },
-            (props.design.hoverOver?.items ?? []).length > 0 && (react_1.default.createElement("table", { className: "table" },
+        editing && (react_1.default.createElement(ActionCancelModalComponent_1.default, { onAction: handleSave, onCancel: handleCancel, actionLabel: T `Save`, title: T `Customize Hoverover`, size: "x-large" },
+            (draftItems ?? []).length > 0 && (react_1.default.createElement("table", { className: "table" },
                 react_1.default.createElement("thead", null,
                     react_1.default.createElement("tr", null,
                         react_1.default.createElement("th", null, T `Label`),
                         react_1.default.createElement("th", null, T `Value`),
-                        react_1.default.createElement("th", null))),
-                react_1.default.createElement("tbody", null, props.design.hoverOver?.items.map((item) => (react_1.default.createElement(HoverOverItemEditor, { schema: props.schema, dataSource: props.dataSource, table: props.design.table, onItemChange: handleItemChange, onItemDelete: handleItemDelete, item: item })))))),
-            (props.design.hoverOver?.items ?? []).length < 3 && (react_1.default.createElement("button", { className: "btn btn-link", onClick: () => handleDesignChange([
-                    ...(props.design.hoverOver?.items ?? []),
-                    { id: (0, uuid_1.default)().replace(/-/g, ""), label: "" }
-                ]) },
-                react_1.default.createElement("span", { className: "fa fa-plus" }),
-                T `Add item`))))));
-};
-const HoverOverItemEditor = ({ schema, dataSource, table, item, onItemChange, onItemDelete }) => {
+                        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, 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`)))));
+}
+function HoverOverItemEditor(props) {
+    const { schema, dataSource, table, item, onItemChange, onItemDelete } = props;
+    function renderFormat() {
+        const exprUtils = new expressions_1.ExprUtils(schema);
+        const exprType = exprUtils.getExprType(item.value ?? null);
+        if (!exprType) {
+            return null;
+        }
+        if (!(0, valueFormatter_1.canFormatType)(exprType)) {
+            return null;
+        }
+        const formats = (0, valueFormatter_2.getFormatOptions)(exprType);
+        if (!formats) {
+            return null;
+        }
+        return (react_1.default.createElement(ui.Select, { options: formats.map(f => ({ value: f.value, label: f.label })), value: item.format ?? (0, valueFormatter_1.getDefaultFormat)(exprType), onChange: value => onItemChange({ ...item, format: value ?? undefined }), style: { width: "auto", display: "inline-block" } }));
+    }
     return (react_1.default.createElement("tr", null,
-        react_1.default.createElement("td", null,
+        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", null,
-            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("td", null,
+        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: 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.d.ts

@@ -1,14 +1,19 @@
 import React from "react";
-import { DataSource, Schema } from "@mwater/expressions";
+import { Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "..";
 import { HoverOverItem } from "./maps";
+import { MapLayerDataSource } from "./MapLayerDataSource";
 export interface HoverContentProps {
     /** Schema to use */
     schema: Schema;
-    dataSource: DataSource;
-    filters?: JsonQLFilter[];
-    /** Table that hover over is for */
-    table: string;
+    /** Map data source */
+    mapLayerDataSource: MapLayerDataSource;
+    /** Design of the layer */
+    design: any;
+    /** Data of the current item being hovered over. e.g. { id: 123 } */
+    data: any;
+    /** Additional filters to apply to the hover over data */
+    filters: JsonQLFilter[];
     /** Hover over items */
     items: HoverOverItem[];
     /** Locale to use */

package/lib/maps/HoverContent.js

@@ -25,7 +25,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const expressions_1 = require("@mwater/expressions");
-const lodash_1 = require("lodash");
 const valueFormatter_1 = require("../valueFormatter");
 const valueFormatter_2 = require("../valueFormatter");
 /** Component that displays hover over content */
@@ -37,42 +36,14 @@ const HoverContent = (props) => {
         let mounted = true;
         const items = props.items;
         if (items.length > 0) {
-            const exprCompiler = new expressions_1.ExprCompiler(props.schema);
-            const query = {
-                type: "query",
-                selects: [],
-                from: exprCompiler.compileTable(props.table, "main"),
-                limit: 1
-            };
-            items.forEach((item) => {
-                if (item.value) {
-                    query.selects.push({
-                        type: "select",
-                        expr: exprCompiler.compileExpr({ expr: item.value, tableAlias: "main" }),
-                        alias: item.id
-                    });
+            props.mapLayerDataSource.getHoverOverData(props.design, props.data, props.filters).then((data) => {
+                if (mounted) {
+                    setValues(data);
                 }
-            });
-            if (props.filters) {
-                let whereClauses = props.filters.map(f => (0, expressions_1.injectTableAlias)(f.jsonql, "main"));
-                whereClauses = (0, lodash_1.compact)(whereClauses);
-                // Wrap if multiple
-                if (whereClauses.length > 1) {
-                    query.where = { type: "op", op: "and", exprs: whereClauses };
-                }
-                else {
-                    query.where = whereClauses[0];
-                }
-            }
-            props.dataSource.performQuery(query, (error, data) => {
-                if (!mounted) {
-                    return;
-                }
-                if (error) {
-                    setError(props.translate("Error loading hover data"));
-                    return;
+            }).catch((error) => {
+                if (mounted) {
+                    setError(error.message);
                 }
-                setValues(data?.[0] ?? {});
             });
         }
         return () => {
@@ -82,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/Layer.d.ts

@@ -130,6 +130,25 @@ export default class Layer<LayerDesign> {
         data: any;
         event: any;
     }, options: OnGridClickOptions<LayerDesign>): OnGridClickResults;
+    /**
+     * Called when the interactivity grid is hovered over.
+     * arguments:
+     *   ev: { data: interactivty data e.g. `{ id: 123 }` }
+     *   options:
+     *     design: design of layer
+     *     schema: schema to use
+     *     dataSource: data source to use
+     *     layerDataSource: layer data source
+     *     scopeData: current scope data if layer is scoping
+     *     filters: compiled filters to apply to the popup
+     *
+     * Returns:
+     *   null
+     *   or
+     *   {
+     *     hoverOver: React element to put into a hover over
+     *   }
+     */
     onGridHoverOver(ev: {
         data: any;
         event: any;
@@ -172,6 +191,24 @@ export default class Layer<LayerDesign> {
     } | null) => void): void;
     /** Get strings to be translated */
     getTranslatableStrings(design: LayerDesign, schema: Schema): string[];
+    /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+     * It will be called on the server side if using a server map data source, or on the client side if using a direct
+     * map data source.
+     */
+    getHoverOverData(options: {
+        /** Design of the layer */
+        design: LayerDesign;
+        /** Data of the current item being hovered over. e.g. { id: 123 } */
+        data: any;
+        /** Filters to apply to the hover over data, not including filtering down to the current item */
+        filters: JsonQLFilter[];
+        /** Schema to use */
+        schema: Schema;
+        /** Data source to use */
+        dataSource: DataSource;
+    }): Promise<{
+        [key: string]: any;
+    }>;
 }
 export interface LegendOptions<LayerDesign> {
     design: LayerDesign;

package/lib/maps/Layer.js

@@ -56,6 +56,25 @@ class Layer {
     onGridClick(ev, options) {
         return null;
     }
+    /**
+     * Called when the interactivity grid is hovered over.
+     * arguments:
+     *   ev: { data: interactivty data e.g. `{ id: 123 }` }
+     *   options:
+     *     design: design of layer
+     *     schema: schema to use
+     *     dataSource: data source to use
+     *     layerDataSource: layer data source
+     *     scopeData: current scope data if layer is scoping
+     *     filters: compiled filters to apply to the popup
+     *
+     * Returns:
+     *   null
+     *   or
+     *   {
+     *     hoverOver: React element to put into a hover over
+     *   }
+     */
     onGridHoverOver(ev, options) {
         return null;
     }
@@ -168,10 +187,10 @@ class Layer {
                     const [w, s, e, n] = (0, bbox_1.default)(results[0].bounds);
                     // 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
+                        w: Math.max(w - 0.001, -180),
+                        s: Math.max(s - 0.001, -90),
+                        e: Math.min(e + 0.001, 180),
+                        n: Math.min(n + 0.001, 90)
                     };
                 }
                 return callback(null, bounds);
@@ -182,5 +201,12 @@ class Layer {
     getTranslatableStrings(design, schema) {
         return [];
     }
+    /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+     * It will be called on the server side if using a server map data source, or on the client side if using a direct
+     * map data source.
+     */
+    getHoverOverData(options) {
+        return Promise.resolve({});
+    }
 }
 exports.default = Layer;