@mwater/visualization 5.4.5 → 5.6.0

package/lib/index.d.ts

@@ -1,4 +1,5 @@
-export { default as LeafletMapComponent, MapBounds, TileLayer, GeoJsonLayer, MapLayer } from "./maps/LeafletMapComponent";
+export { default as LeafletMapComponent } from "./maps/LeafletMapComponent";
+export type { MapBounds, TileLayer, GeoJsonLayer, MapLayer } from "./maps/LeafletMapComponent";
 export { default as DateRangeComponent } from "./DateRangeComponent";
 export { default as RegionSelectComponent } from "./maps/RegionSelectComponent";
 export * from "./datagrids/DatagridDesign";
@@ -7,7 +8,7 @@ export { default as DashboardComponent } from "./dashboards/DashboardComponent";
 export { default as DashboardDataSource } from "./dashboards/DashboardDataSource";
 export { default as DirectDashboardDataSource } from "./dashboards/DirectDashboardDataSource";
 export * from "./dashboards/DashboardDesign";
-export { MapDesign, MapLayerView } from "./maps/MapDesign";
+export type { MapDesign, MapLayerView } from "./maps/MapDesign";
 export { default as compressJson } from "./compressJson";
 export { default as LocaleContextInjector } from "./LocaleContextInjector";
 export * from "./WidgetScope";
@@ -15,12 +16,12 @@ export { default as WidgetFactory } from "./widgets/WidgetFactory";
 export { default as Widget } from "./widgets/Widget";
 export { default as DatagridUtils } from "./datagrids/DatagridUtils";
 export * from "./maps/MapViewComponent";
-export { MapScope } from "./maps/MapUtils";
+export type { MapScope } from "./maps/MapUtils";
 export { languages } from "./languages";
 export { default as MWaterLoaderComponent } from "./MWaterLoaderComponent";
 export { default as MWaterContextComponent } from "./MWaterContextComponent";
 export { default as mWaterLoader } from "./mWaterLoader";
-export { WidgetDataSource } from "./widgets/WidgetDataSource";
+export type { WidgetDataSource } from "./widgets/WidgetDataSource";
 export { default as DirectWidgetDataSource } from "./widgets/DirectWidgetDataSource";
 import "leaflet/dist/leaflet.css";
 import "rc-slider/assets/index.css";
@@ -31,7 +32,6 @@ import "./index.css";
 export { setMapTilerApiKey } from "./maps/vectorMaps";
 export { default as UndoStack } from "./UndoStack";
 export { default as DashboardViewComponent } from "./dashboards/DashboardViewComponent";
-export declare let BingLayer: any;
 export declare let UtfGridLayer: any;
 export { default as LayerFactory } from "./maps/LayerFactory";
 export { default as MapDesignerComponent } from "./maps/MapDesignerComponent";

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.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;
+exports.DropdownWidgetComponent = 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.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 = 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");
@@ -68,7 +68,6 @@ var UndoStack_1 = require("./UndoStack");
 Object.defineProperty(exports, "UndoStack", { enumerable: true, get: function () { return __importDefault(UndoStack_1).default; } });
 var DashboardViewComponent_1 = require("./dashboards/DashboardViewComponent");
 Object.defineProperty(exports, "DashboardViewComponent", { enumerable: true, get: function () { return __importDefault(DashboardViewComponent_1).default; } });
-exports.BingLayer = require("./maps/BingLayer");
 exports.UtfGridLayer = require("./maps/UtfGridLayer");
 var LayerFactory_1 = require("./maps/LayerFactory");
 Object.defineProperty(exports, "LayerFactory", { enumerable: true, get: function () { return __importDefault(LayerFactory_1).default; } });

package/lib/layouts/blocks/BlocksDisplayComponent.d.ts

@@ -20,11 +20,18 @@ export interface BlocksDisplayComponentProps {
     /** message to display if clipboard can't be pasted into current dashboard */
     cantPasteMessage?: string;
 }
+interface BlocksDisplayComponentState {
+    isPaletteVisible: boolean;
+    isManuallyHidden: boolean;
+}
 /**
   Renders the complete layout of the blocks and also optionally a palette to the left
   that can be used to drag new items into the layout. Palette is only displayed if onItemsChange is not null
 */
-declare class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps> {
+declare class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps, BlocksDisplayComponentState> {
+    state: BlocksDisplayComponentState;
+    componentDidUpdate(prevProps: BlocksDisplayComponentProps): void;
+    handlePaletteToggle: () => void;
     handleBlockDrop: (sourceBlock: LayoutBlock, targetBlock: LayoutBlock, side: "top" | "left" | "right" | "bottom") => void;
     handleBlockRemove: (block: LayoutBlock) => void;
     handleBlockUpdate: (block: LayoutBlock) => void;

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

@@ -50,4 +50,22 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
     validateDesign(design: BufferLayerDesign, schema: Schema): string | null;
     /** Get strings to be translated */
     getTranslatableStrings(design: BufferLayerDesign, 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: BufferLayerDesign;
+        /** 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;
+    }>;
 }

package/lib/maps/BufferLayer.js

@@ -39,6 +39,7 @@ const HoverContent_1 = __importDefault(require("./HoverContent"));
 const layoutOptions_1 = require("../dashboards/layoutOptions");
 const BlocksLayoutManager_1 = __importDefault(require("../layouts/blocks/BlocksLayoutManager"));
 const DashboardUtils_1 = require("../dashboards/DashboardUtils");
+const MapUtils_1 = require("./MapUtils");
 /** Layer which draws a buffer around geometries (i.e. a radius circle around points) */
 class BufferLayer extends Layer_1.default {
     /** Gets the type of layer definition */
@@ -635,25 +636,20 @@ marker-fill: ` +
     }
     // same as onGridClick but handles hover over
     onGridHoverOver(ev, hoverOptions) {
-        if (ev.data && ev.data.id) {
-            const { table } = hoverOptions.design;
-            const results = {};
-            // Popup
-            if (hoverOptions.design.hoverOver) {
-                // Create filter using popupFilterJoins
-                const popupFilterJoins = hoverOptions.design.popupFilterJoins || PopupFilterJoinsUtils.createDefaultPopupFilterJoins(table);
-                const popupFilters = PopupFilterJoinsUtils.createPopupFilters(popupFilterJoins, hoverOptions.schema, table, ev.data.id);
-                results.hoverOver = react_1.default.createElement(HoverContent_1.default, {
+        if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
+            const results = {
+                hoverOver: react_1.default.createElement(HoverContent_1.default, {
                     key: ev.data.id,
                     schema: hoverOptions.schema,
-                    dataSource: hoverOptions.dataSource,
-                    table,
+                    data: ev.data,
+                    mapLayerDataSource: hoverOptions.layerDataSource,
+                    design: hoverOptions.design,
                     items: hoverOptions.design.hoverOver.items,
-                    filters: popupFilters,
+                    filters: hoverOptions.filters,
                     locale: hoverOptions.locale,
                     translate: hoverOptions.translate
-                });
-            }
+                })
+            };
             return results;
         }
         else {
@@ -781,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;
     }
@@ -836,5 +844,19 @@ marker-fill: ` +
         // Remove duplicates
         return lodash_1.default.uniq(strings);
     }
+    /** 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 (0, MapUtils_1.getSimpleHoverOverData)({
+            id: options.data.id,
+            table: options.design.table,
+            filters: options.filters,
+            schema: options.schema,
+            dataSource: options.dataSource,
+            hoverOverItems: options.design.hoverOver.items,
+        });
+    }
 }
 exports.default = BufferLayer;

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

@@ -72,4 +72,22 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     }): React.ReactElement<{}>;
     /** Get strings to be translated */
     getTranslatableStrings(design: ChoroplethLayerDesign, 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: ChoroplethLayerDesign;
+        /** 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;
+    }>;
 }

package/lib/maps/ChoroplethLayer.js

@@ -39,6 +39,7 @@ const HoverContent_1 = __importDefault(require("./HoverContent"));
 const layoutOptions_1 = require("../dashboards/layoutOptions");
 const BlocksLayoutManager_1 = __importDefault(require("../layouts/blocks/BlocksLayoutManager"));
 const DashboardUtils_1 = require("../dashboards/DashboardUtils");
+const MapUtils_1 = require("./MapUtils");
 class ChoroplethLayer extends Layer_1.default {
     /** Gets the type of layer definition */
     getLayerDefinitionType() {
@@ -1246,41 +1247,28 @@ class ChoroplethLayer extends Layer_1.default {
     }
     // same as onGridClick but handles hover over
     onGridHoverOver(ev, hoverOptions) {
-        const regionsTable = hoverOptions.design.regionsTable || "admin_regions";
-        // Row only if mode is "plain" or "direct"
-        if (hoverOptions.design.regionMode == "plain" || hoverOptions.design.regionMode == "direct") {
-            if (!ev.data || !ev.data.id) {
-                return null;
-            }
+        // Only applicable to indirect mode
+        if (hoverOptions.design.regionMode !== "indirect") {
+            return null;
         }
         // Ignore if indirect with no table
         if (!hoverOptions.design.table) {
             return null;
         }
-        if (ev.data && ev.data.id) {
-            const { table } = hoverOptions.design;
-            const results = {};
-            // Popup
-            if (hoverOptions.design.hoverOver) {
-                // Create default popup filter joins
-                const defaultPopupFilterJoins = {};
-                if (hoverOptions.design.adminRegionExpr) {
-                    defaultPopupFilterJoins[hoverOptions.design.table] = hoverOptions.design.adminRegionExpr;
-                }
-                // Create filter using popupFilterJoins
-                const popupFilterJoins = hoverOptions.design.popupFilterJoins || defaultPopupFilterJoins;
-                const popupFilters = PopupFilterJoinsUtils.createPopupFilters(popupFilterJoins, hoverOptions.schema, table, ev.data.id, true);
-                results.hoverOver = react_1.default.createElement(HoverContent_1.default, {
+        if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
+            const results = {
+                hoverOver: react_1.default.createElement(HoverContent_1.default, {
                     key: ev.data.id,
                     schema: hoverOptions.schema,
-                    dataSource: hoverOptions.dataSource,
-                    table,
+                    mapLayerDataSource: hoverOptions.layerDataSource,
+                    design: hoverOptions.design,
                     items: hoverOptions.design.hoverOver.items,
-                    filters: popupFilters,
+                    data: ev.data,
+                    filters: hoverOptions.filters,
                     locale: hoverOptions.locale,
                     translate: hoverOptions.translate
-                });
-            }
+                })
+            };
             return results;
         }
         else {
@@ -1446,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;
             }
@@ -1535,5 +1535,26 @@ class ChoroplethLayer extends Layer_1.default {
         // Remove duplicates
         return lodash_1.default.uniq(strings);
     }
+    /** 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) {
+        // Use popup filter joins utilities to create filters
+        const popupFilterJoins = {};
+        if (options.design.adminRegionExpr) {
+            popupFilterJoins[options.design.table] = options.design.adminRegionExpr;
+        }
+        const popupFilters = PopupFilterJoinsUtils.createPopupFilters(popupFilterJoins, options.schema, options.design.table, options.data.id, true);
+        return (0, MapUtils_1.getSimpleHoverOverData)({
+            // Filter using popup filters instead of id since will return multiple rows
+            id: null,
+            table: options.design.table,
+            filters: popupFilters,
+            schema: options.schema,
+            dataSource: options.dataSource,
+            hoverOverItems: options.design.hoverOver.items,
+        });
+    }
 }
 exports.default = ChoroplethLayer;

package/lib/maps/ChoroplethLayerDesign.d.ts

@@ -48,11 +48,15 @@ export default interface ChoroplethLayerDesign {
     popup: {
         items: LayoutBlock;
     };
-    hoverOver: {
-        items: HoverOverItem[];
-    };
     /** 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".
+     * 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 */
     minZoom?: number;
     /** maximum 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,24 +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<import("./EditHoverOver").EditHoverOverProps> | 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;
 }