@mwater/visualization 5.5.0 → 5.6.1

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

@@ -11,19 +11,6 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
     getLayerDefinitionType(): "VectorTile";
     getVectorTile(design: BufferLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
     createVectorJsonQL(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
-    getJsonQLCss(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): {
-        layers: {
-            id: string;
-            jsonql: import("@mwater/jsonql").JsonQLSelectQuery;
-        }[];
-        css: string;
-        interactivity: {
-            layer: string;
-            fields: string[];
-        };
-    };
-    createMapnikJsonQL(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): import("@mwater/jsonql").JsonQLSelectQuery;
-    createCss(design: BufferLayerDesign, schema: Schema): string;
     onGridClick(ev: {
         data: any;
         event: any;

package/lib/maps/BufferLayer.js

@@ -296,235 +296,6 @@ class BufferLayer extends Layer_1.default {
         }
         return query;
     }
-    // Gets the layer definition as JsonQL + CSS in format:
-    //   {
-    //     layers: array of { id: layer id, jsonql: jsonql that includes "the_webmercator_geom" as a column }
-    //     css: carto css
-    //     interactivity: (optional) { layer: id of layer, fields: array of field names }
-    //   }
-    // arguments:
-    //   design: design of layer
-    //   schema: schema to use
-    //   filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to put in table alias
-    getJsonQLCss(design, schema, filters) {
-        // Create design
-        const layerDef = {
-            layers: [{ id: "layer0", jsonql: this.createMapnikJsonQL(design, schema, filters) }],
-            css: this.createCss(design, schema),
-            interactivity: {
-                layer: "layer0",
-                fields: ["id"]
-            }
-        };
-        return layerDef;
-    }
-    createMapnikJsonQL(design, schema, filters) {
-        let colorExpr;
-        const axisBuilder = new AxisBuilder_1.default({ schema });
-        const exprCompiler = new expressions_1.ExprCompiler(schema);
-        // Get radius expression
-        const radiusCompiledExpr = exprCompiler.compileExpr({
-            expr: design.radiusExpr ?? { type: "literal", valueType: "number", value: design.radius },
-            tableAlias: "main"
-        });
-        // Convert radius in meters to a maximum number of degrees latitude
-        const radiusDegCompiledExpr = { type: "op", op: "/", exprs: [radiusCompiledExpr, 100000] };
-        /*
-        Query:
-          select
-          <primary key> as id,
-          [<color axis> as color,
-          st_transform(<geometry axis>, 3857) as the_geom_webmercator,
-          radius * 2 / (!pixel_width! * cos(st_ymin(st_transform(geometryExpr, 4326)) * 0.017453293) as width
-          from <table> as main
-          where
-            <geometry axis> is not null
-            * Bounding box filter for speed
-          and <geometry axis> &&
-          ST_Transform(ST_Expand(
-            * Prevent 3857 overflow (i.e. > 85 degrees lat)
-            ST_Intersection(
-              ST_Transform(!bbox!, 4326),
-              ST_Expand(ST_MakeEnvelope(-180, -85, 180, 85, 4326), -<radius in degrees>))
-            , <radius in degrees>})
-          , 3857)
-          and <other filters>
-        */
-        // Compile geometry axis
-        let geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "main" });
-        // radius * 2 / (!pixel_width! * cos(st_ymin(st_transform(geometryExpr, 4326)) * 0.017453293) + 1 # add one to make always visible
-        const widthExpr = {
-            type: "op",
-            op: "+",
-            exprs: [
-                {
-                    type: "op",
-                    op: "/",
-                    exprs: [
-                        { type: "op", op: "*", exprs: [radiusCompiledExpr, 2] },
-                        {
-                            type: "op",
-                            op: "*",
-                            exprs: [
-                                { type: "op", op: "nullif", exprs: [{ type: "token", token: "!pixel_height!" }, 0] },
-                                {
-                                    type: "op",
-                                    op: "cos",
-                                    exprs: [
-                                        {
-                                            type: "op",
-                                            op: "*",
-                                            exprs: [
-                                                {
-                                                    type: "op",
-                                                    op: "ST_YMIN",
-                                                    exprs: [{ type: "op", op: "ST_Transform", exprs: [geometryExpr, 4326] }]
-                                                },
-                                                0.017453293
-                                            ]
-                                        }
-                                    ]
-                                }
-                            ]
-                        }
-                    ]
-                },
-                2
-            ]
-        };
-        const selects = [
-            {
-                type: "select",
-                expr: { type: "field", tableAlias: "main", column: schema.getTable(design.table).primaryKey },
-                alias: "id"
-            }, // main primary key as id
-            { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" },
-            { type: "select", expr: widthExpr, alias: "width" } // Width of circles
-        ];
-        // Add color select if color axis
-        if (design.axes.color) {
-            colorExpr = axisBuilder.compileAxis({ axis: design.axes.color, tableAlias: "main" });
-            selects.push({ type: "select", expr: colorExpr, alias: "color" });
-        }
-        // Select _id, location and clustered row number
-        const query = {
-            type: "query",
-            selects,
-            from: exprCompiler.compileTable(design.table, "main")
-        };
-        const boundingBox = {
-            type: "op",
-            op: "ST_Transform",
-            exprs: [
-                {
-                    type: "op",
-                    op: "ST_Expand",
-                    exprs: [
-                        {
-                            type: "op",
-                            op: "ST_Intersection",
-                            exprs: [
-                                { type: "op", op: "ST_Transform", exprs: [{ type: "token", token: "!bbox!" }, 4326] },
-                                {
-                                    type: "op",
-                                    op: "ST_Expand",
-                                    exprs: [
-                                        { type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] },
-                                        { type: "op", op: "*", exprs: [radiusDegCompiledExpr, -1] }
-                                    ]
-                                }
-                            ]
-                        },
-                        radiusDegCompiledExpr
-                    ]
-                },
-                3857
-            ]
-        };
-        // Create filters. First ensure geometry and limit to bounding box
-        let whereClauses = [
-            { type: "op", op: "is not null", exprs: [geometryExpr] },
-            {
-                type: "op",
-                op: "&&",
-                exprs: [geometryExpr, boundingBox]
-            }
-        ];
-        // Then add filters baked into layer
-        if (design.filter) {
-            whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }));
-        }
-        // Then add extra filters passed in, if relevant
-        // Get relevant filters
-        const relevantFilters = lodash_1.default.where(filters, { table: design.table });
-        for (let filter of relevantFilters) {
-            whereClauses.push((0, expressions_1.injectTableAlias)(filter.jsonql, "main"));
-        }
-        whereClauses = lodash_1.default.compact(whereClauses);
-        // Wrap if multiple
-        if (whereClauses.length > 1) {
-            query.where = { type: "op", op: "and", exprs: whereClauses };
-        }
-        else {
-            query.where = whereClauses[0];
-        }
-        // Sort order
-        if (design.axes.color && design.axes.color.colorMap) {
-            // TODO should use categories, not colormap order
-            const order = design.axes.color.drawOrder || lodash_1.default.pluck(design.axes.color.colorMap, "value");
-            const categories = axisBuilder.getCategories(design.axes.color, order);
-            const cases = lodash_1.default.map(categories, (category, i) => {
-                return {
-                    when: category.value != null
-                        ? { type: "op", op: "=", exprs: [colorExpr, category.value] }
-                        : { type: "op", op: "is null", exprs: [colorExpr] },
-                    then: order.indexOf(category.value) || -1
-                };
-            });
-            if (cases.length > 0) {
-                query.orderBy = [
-                    {
-                        expr: {
-                            type: "case",
-                            cases
-                        },
-                        direction: "desc" // Reverse color map order
-                    }
-                ];
-            }
-        }
-        return query;
-    }
-    createCss(design, schema) {
-        let css = `\
-#layer0 {
-  marker-fill-opacity: ` +
-            design.fillOpacity +
-            `;
-marker-type: ellipse;
-marker-width: [width];
-marker-line-width: 0;
-marker-allow-overlap: true;
-marker-ignore-placement: true;
-marker-fill: ` +
-            (design.color || "transparent") +
-            `;
-}\
-`;
-        // If color axes, add color conditions
-        if (design.axes.color != null && design.axes.color.colorMap != null) {
-            for (let item of design.axes.color.colorMap) {
-                // If invisible
-                if ((design.axes.color.excludedValues || []).includes(item.value)) {
-                    css += `#layer0 [color=${JSON.stringify(item.value)}] { marker-fill-opacity: 0; }\n`;
-                }
-                else {
-                    css += `#layer0 [color=${JSON.stringify(item.value)}] { marker-fill: ${item.color}; }\n`;
-                }
-            }
-        }
-        return css;
-    }
     // Called when the interactivity grid is clicked.
     // arguments:
     //   ev: { data: interactivty data e.g. `{ id: 123 }` }
@@ -686,7 +457,7 @@ marker-fill: ` +
     // Get the legend to be optionally displayed on the map. Returns
     // a React element
     getLegend(options) {
-        const { design, schema, name, dataSource, locale, filters } = options;
+        const { design, schema, name, dataSource, locale, filters, translate } = options;
         const _filters = filters.slice();
         if (design.filter != null) {
             const exprCompiler = new expressions_1.ExprCompiler(schema);
@@ -696,16 +467,18 @@ marker-fill: ` +
             }
         }
         const axisBuilder = new AxisBuilder_1.default({ schema });
+        // Clean and translate axis
+        const axis = (0, MapUtils_1.translateAxis)(axisBuilder.cleanAxis({
+            axis: design.axes.color,
+            table: design.table,
+            types: ["enum", "text", "boolean", "date"],
+            aggrNeed: "none"
+        }), translate);
         return react_1.default.createElement(LayerLegendComponent_1.default, {
             schema,
-            name,
+            name: translate(name),
             filters: lodash_1.default.compact(_filters),
-            axis: axisBuilder.cleanAxis({
-                axis: design.axes.color,
-                table: design.table,
-                types: ["enum", "text", "boolean", "date"],
-                aggrNeed: "none"
-            }),
+            axis: axis,
             radiusLayer: true,
             defaultColor: design.color,
             locale
@@ -777,6 +550,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;
     }
@@ -815,6 +600,8 @@ marker-fill: ` +
     /** Get strings to be translated */
     getTranslatableStrings(design, schema) {
         const strings = [];
+        // Add strings from axis category labels and null labels
+        strings.push(...(0, MapUtils_1.getTranslatableStringsFromAxis)(design.axes.color));
         // Add strings from hoverOver items
         if (design.hoverOver && design.hoverOver.items) {
             for (const item of design.hoverOver.items) {

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

@@ -24,7 +24,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
     renderTable(): React.JSX.Element;
     renderGeometryAxis(): React.JSX.Element | undefined;
     renderRadius(): React.JSX.Element;
-    renderUnionShapes(): React.JSX.Element | null;
+    renderUnionShapes(): React.JSX.Element;
     renderColor(): React.JSX.Element | undefined;
     renderFillOpacity(): React.JSX.Element;
     renderFilter(): React.JSX.Element | null;

package/lib/maps/BufferLayerDesignerComponent.js

@@ -38,8 +38,7 @@ const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
 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 });
@@ -104,10 +103,6 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
             react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, value: radiusExpr, onChange: this.handleRadiusExprChange, dataSource: this.props.dataSource, table: this.props.design.table, types: ["number"] })));
     }
     renderUnionShapes() {
-        // Only implemented for vector maps
-        if (!(0, vectorMaps_1.areVectorMapsEnabled)()) {
-            return null;
-        }
         return (react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement(bootstrap_1.Checkbox, { value: this.props.design.unionShapes, onChange: this.handleUnionShapesChange }, T `Combine circles (advanced)`)));
     }
@@ -164,7 +159,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

@@ -1,10 +1,9 @@
 import React, { ReactNode } from "react";
 import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef, LegendOptions } from "./Layer";
 import { Schema, DataSource } from "@mwater/expressions";
-import { LayerDefinition, OnGridClickResults, OnGridHoverResults } from "./maps";
+import { OnGridClickResults, OnGridHoverResults } from "./maps";
 import { JsonQLFilter } from "../index";
 import ChoroplethLayerDesign from "./ChoroplethLayerDesign";
-import { JsonQLQuery } from "@mwater/jsonql";
 export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     /** Gets the type of layer definition */
     getLayerDefinitionType(): "VectorTile";
@@ -12,20 +11,6 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     createPlainVectorTile(design: ChoroplethLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
     createIndirectVectorTile(design: ChoroplethLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
     createDirectVectorTile(design: ChoroplethLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
-    /** Gets the layer definition as JsonQL + CSS in format:
-     *   {
-     *     layers: array of { id: layer id, jsonql: jsonql that includes "the_webmercator_geom" as a column }
-     *     css: carto css
-     *     interactivity: (optional) { layer: id of layer, fields: array of field names }
-     *   }
-     * arguments:
-     *   design: design of layer
-     *   schema: schema to use
-     *   filters: array of filters to apply
-     */
-    getJsonQLCss(design: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): LayerDefinition;
-    createMapnikJsonQL(design: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
-    createCss(design: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): string;
     /**
      * Called when the interactivity grid is clicked.
      * arguments: