@mwater/visualization 5.4.1 → 5.4.2

package/lib/datagrids/ExprCellComponent.js

@@ -5,21 +5,16 @@ 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 moment_1 = __importDefault(require("moment"));
 const expressions_1 = require("@mwater/expressions");
 const react_linkify_1 = __importDefault(require("react-linkify"));
-const fixed_data_table_2_1 = require("fixed-data-table-2");
 const valueFormatter_1 = require("../valueFormatter");
 const valueFormatter_2 = require("../valueFormatter");
 // Cell that displays an expression column cell
 class ExprCellComponent extends react_1.default.Component {
-    handleClick = () => {
-        return this.setState({ editing: true });
-    };
     renderImage(id) {
         const url = this.props.dataSource.getImageUrl(id);
-        return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T `Image`);
+        return react_1.default.createElement("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T `Image`);
     }
     render() {
         let node;
@@ -41,7 +36,7 @@ class ExprCellComponent extends react_1.default.Component {
                 // Convert to node based on type
                 switch (this.props.exprType) {
                     case "text":
-                        node = R(react_linkify_1.default, { properties: { target: "_blank" } }, value);
+                        node = react_1.default.createElement(react_linkify_1.default, { properties: { target: "_blank" } }, value);
                         break;
                     case "boolean":
                     case "enum":
@@ -66,16 +61,17 @@ class ExprCellComponent extends react_1.default.Component {
                 }
             }
         }
-        return R(fixed_data_table_2_1.Cell, {
-            width: this.props.width,
-            height: this.props.height,
-            onClick: this.props.onClick,
-            style: {
+        return (react_1.default.createElement("div", { style: {
+                width: this.props.width,
+                height: this.props.height,
                 whiteSpace: "nowrap",
                 textAlign: ["number"].includes(this.props.exprType) ? "right" : "left",
-                opacity: this.props.muted ? 0.4 : undefined
-            }
-        }, node);
+                opacity: this.props.muted ? 0.4 : undefined,
+                padding: 8,
+                cursor: this.props.onClick ? "pointer" : undefined,
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+            }, onClick: this.props.onClick, onDoubleClick: this.props.onDoubleClick }, node));
     }
 }
 exports.default = ExprCellComponent;

package/lib/datagrids/FindReplaceModalComponent.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
-import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 import { RowUpdate } from "./DatagridViewComponent";
-import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
 import { DataSource, Expr, Schema } from "@mwater/expressions";
 import { DatagridDesign, JsonQLFilter } from "..";
 export interface FindReplaceModalComponentProps {
@@ -26,11 +24,11 @@ interface FindReplaceModalComponentState {
     busy: boolean;
 }
 export default class FindReplaceModalComponent extends React.Component<FindReplaceModalComponentProps, FindReplaceModalComponentState> {
-    constructor(props: any);
+    constructor(props: FindReplaceModalComponentProps);
     show(): void;
     performReplace(): Promise<void>;
-    renderPreview(): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent>;
-    renderContents(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    render(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
+    renderPreview(): React.JSX.Element;
+    renderContents(): React.JSX.Element;
+    render(): React.JSX.Element | null;
 }
 export {};

package/lib/datagrids/FindReplaceModalComponent.js

@@ -5,7 +5,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 react_select_1 = __importDefault(require("react-select"));
 const AutoSizeComponent_1 = __importDefault(require("@mwater/react-library/lib/AutoSizeComponent"));
 const DatagridViewComponent_1 = __importDefault(require("./DatagridViewComponent"));
@@ -21,10 +20,10 @@ class FindReplaceModalComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.state = {
-            open: false, // True if modal is open
-            replaceColumn: null, // Column id to replace
-            withExpr: null, // Replace with expression
-            conditionExpr: null, // Condition expr
+            open: false,
+            replaceColumn: null,
+            withExpr: null,
+            conditionExpr: null,
             busy: false
         };
     }
@@ -168,23 +167,14 @@ class FindReplaceModalComponent extends react_1.default.Component {
                 }
             }
         });
-        return R(AutoSizeComponent_1.default, { injectWidth: true }, (size) => {
-            return R(DatagridViewComponent_1.default, {
-                width: size.width,
-                height: 400,
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                datagridDataSource: new DirectDatagridDataSource_1.default({
+        return (react_1.default.createElement(AutoSizeComponent_1.default, { injectWidth: true }, (size) => {
+            return react_1.default.createElement(DatagridViewComponent_1.default, { width: size.width, height: 400, schema: this.props.schema, dataSource: this.props.dataSource, datagridDataSource: new DirectDatagridDataSource_1.default({
                     schema: this.props.schema,
                     dataSource: this.props.dataSource
-                }),
-                design,
-                filters: this.props.filters
-            });
-        });
+                }), design: design, filters: this.props.filters });
+        }));
     }
     renderContents() {
-        let value;
         const exprUtils = new expressions_1.ExprUtils(this.props.schema);
         // Determine which columns are replace-able. Excludes subtables and aggregates
         const replaceColumns = lodash_1.default.filter(this.props.design.columns, column => !column.subtable && exprUtils.getExprAggrStatus(column.expr) === "individual");
@@ -194,69 +184,42 @@ class FindReplaceModalComponent extends react_1.default.Component {
         }));
         // Show progress
         if (this.state.busy) {
-            return R("div", null, R("h3", null, T `Working...`), R("div", { className: "progress" }, R("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: `100%` } })));
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("h3", null, T `Working...`),
+                react_1.default.createElement("div", { className: "progress" },
+                    react_1.default.createElement("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: "100%" } }))));
         }
-        return R("div", null, R("div", { key: "replace", className: "mb-3" }, R("label", null, T `Column with data to replace` + ": "), R(react_select_1.default, {
-            options: replaceColumnOptions,
-            value: lodash_1.default.findWhere(replaceColumnOptions, { value: this.state.replaceColumn }) || null,
-            onChange: (opt) => this.setState({ replaceColumn: opt.value }),
-            placeholder: T `Select Column...`,
-            styles: {
-                // Keep menu above fixed data table headers
-                menu: style => lodash_1.default.extend({}, style, { zIndex: 2 })
-            }
-        })), (() => {
-            if (this.state.replaceColumn) {
-                // Get expr of replace column
-                const replaceExpr = lodash_1.default.findWhere(this.props.design.columns, { id: this.state.replaceColumn }).expr;
-                return R("div", { key: "with", className: "mb-3" }, R("label", null, T `Value to replace data with` + ": "), R(expressions_ui_1.ExprComponent, {
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    table: this.props.design.table,
-                    value: this.state.withExpr,
-                    onChange: value => this.setState({ withExpr: value }),
-                    types: [exprUtils.getExprType(replaceExpr)],
-                    enumValues: exprUtils.getExprEnumValues(replaceExpr) || undefined,
-                    idTable: exprUtils.getExprIdTable(replaceExpr) || undefined,
-                    preferLiteral: true,
-                    placeholder: T `(Blank)`,
-                    refExpr: replaceExpr
-                }));
-            }
-            return null;
-        })(), R("div", { key: "condition", className: "mb-3" }, R("label", null, T `Only in rows that (optional)` + ":"), R(expressions_ui_1.ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            value: this.state.conditionExpr,
-            onChange: value => this.setState({ conditionExpr: value }),
-            types: ["boolean"],
-            placeholder: T `All Rows`
-        })), R("div", { key: "preview" }, R("h4", null, T `Preview`), this.renderPreview()));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { key: "replace", className: "mb-3" },
+                react_1.default.createElement("label", null,
+                    T `Column with data to replace`,
+                    ": "),
+                react_1.default.createElement(react_select_1.default, { options: replaceColumnOptions, value: lodash_1.default.findWhere(replaceColumnOptions, { value: this.state.replaceColumn }) || null, onChange: (opt) => this.setState({ replaceColumn: opt.value }), placeholder: T `Select Column...`, styles: {
+                        // Keep menu above fixed data table headers
+                        menu: style => lodash_1.default.extend({}, style, { zIndex: 2 })
+                    } })),
+            this.state.replaceColumn ? (react_1.default.createElement("div", { key: "with", className: "mb-3" },
+                react_1.default.createElement("label", null,
+                    T `Value to replace data with`,
+                    ": "),
+                react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, value: this.state.withExpr, onChange: value => this.setState({ withExpr: value }), types: [exprUtils.getExprType(lodash_1.default.findWhere(this.props.design.columns, { id: this.state.replaceColumn }).expr)], enumValues: exprUtils.getExprEnumValues(lodash_1.default.findWhere(this.props.design.columns, { id: this.state.replaceColumn }).expr) || undefined, idTable: exprUtils.getExprIdTable(lodash_1.default.findWhere(this.props.design.columns, { id: this.state.replaceColumn }).expr) || undefined, preferLiteral: true, placeholder: T `(Blank)`, refExpr: lodash_1.default.findWhere(this.props.design.columns, { id: this.state.replaceColumn }).expr }))) : null,
+            react_1.default.createElement("div", { key: "condition", className: "mb-3" },
+                react_1.default.createElement("label", null,
+                    T `Only in rows that (optional)`,
+                    ":"),
+                react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, value: this.state.conditionExpr, onChange: value => this.setState({ conditionExpr: value }), types: ["boolean"], placeholder: T `All Rows` })),
+            react_1.default.createElement("div", { key: "preview" },
+                react_1.default.createElement("h4", null, T `Preview`),
+                this.renderPreview())));
     }
     render() {
         if (!this.state.open) {
             return null;
         }
-        return R(ModalPopupComponent_1.default, {
-            size: "large",
-            header: T `Find/Replace`,
-            footer: [
-                R("button", {
-                    key: "cancel",
-                    type: "button",
-                    onClick: () => this.setState({ open: false }),
-                    className: "btn btn-secondary"
-                }, T `Cancel`),
-                R("button", {
-                    key: "apply",
-                    type: "button",
-                    disabled: !this.state.replaceColumn || this.state.busy,
-                    onClick: () => this.performReplace(),
-                    className: "btn btn-primary"
-                }, T `Apply`)
-            ]
-        }, this.renderContents());
+        return (react_1.default.createElement(ModalPopupComponent_1.default, { size: "large", header: T `Find/Replace`, footer: [
+                react_1.default.createElement("button", { key: "cancel", type: "button", onClick: () => this.setState({ open: false }), className: "btn btn-secondary" }, T `Cancel`),
+                react_1.default.createElement("button", { key: "apply", type: "button", disabled: !this.state.replaceColumn || this.state.busy, onClick: () => this.performReplace(), className: "btn btn-primary" }, T `Apply`)
+            ] }, this.renderContents()));
     }
 }
 exports.default = FindReplaceModalComponent;

package/lib/index.css

@@ -434,7 +434,7 @@ Lato, Lora, Inter, Merriweather, Roboto
 .dropzone {
   width: 100%;
   padding: 80px 40px;
-  border: 2px dashed rgb(102, 102, 102);
+  border: 2px dashed var(--bs-border-color);
   border-radius: 5px;
   text-align: center;
   vertical-align: middle;

package/lib/index.d.ts

@@ -23,7 +23,6 @@ export { default as mWaterLoader } from "./mWaterLoader";
 export { WidgetDataSource } from "./widgets/WidgetDataSource";
 export { default as DirectWidgetDataSource } from "./widgets/DirectWidgetDataSource";
 import "leaflet/dist/leaflet.css";
-import "fixed-data-table-2/dist/fixed-data-table.min.css";
 import "rc-slider/assets/index.css";
 import "./layouts/decorated-block.css";
 import "react-datepicker/dist/react-datepicker.css";

package/lib/index.js

@@ -57,7 +57,6 @@ Object.defineProperty(exports, "mWaterLoader", { enumerable: true, get: function
 var DirectWidgetDataSource_1 = require("./widgets/DirectWidgetDataSource");
 Object.defineProperty(exports, "DirectWidgetDataSource", { enumerable: true, get: function () { return __importDefault(DirectWidgetDataSource_1).default; } });
 require("leaflet/dist/leaflet.css");
-require("fixed-data-table-2/dist/fixed-data-table.min.css");
 require("rc-slider/assets/index.css");
 require("./layouts/decorated-block.css");
 require("react-datepicker/dist/react-datepicker.css");

package/lib/layouts/blocks/HorizontalBlockComponent.js

@@ -51,14 +51,14 @@ class HorizontalBlockComponent extends react_1.default.Component {
         if (dragXOffset > this.state.rightSize - 100) {
             dragXOffset = this.state.rightSize - 100;
         }
-        return this.setState({ dragXOffset });
+        this.setState({ dragXOffset });
     };
     handleMouseUp = (ev) => {
         // Remove listeners
         document.removeEventListener("mousemove", this.handleMouseMove);
         document.removeEventListener("mouseup", this.handleMouseUp);
         // Determine weights of two blocks
-        const weights = this.props.block.weights || [];
+        const weights = [...(this.props.block.weights || [])];
         const newLeftSize = this.state.leftSize + this.state.dragXOffset;
         const newRightSize = this.state.rightSize - this.state.dragXOffset;
         // Get current weights

package/lib/mWaterLoader.d.ts

@@ -9,7 +9,7 @@ export interface MWaterLoaderOptions {
     /** Load schema as a specific user (for shared dashboards, etc). optional */
     asUser?: string;
     /** Extra tables to load in schema. Forms are not loaded by default as they are too many */
-    extraTables: string[];
+    extraTables?: string[];
     /** False to disable local caching of queries. Default true */
     localCaching?: boolean;
     /** Locales of the schema to load. Default is all. */

package/lib/maps/BufferLayer.d.ts

@@ -1,16 +1,16 @@
 import { JsonQLQuery } from "@mwater/jsonql";
 import { DataSource, Schema } from "@mwater/expressions";
-import React from "react";
+import React, { ReactNode } from "react";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { BufferLayerDesign } from "./BufferLayerDesign";
-import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef } from "./Layer";
+import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef, LegendOptions } from "./Layer";
 import { OnGridClickResults, OnGridHoverResults } from "./maps";
-import LayerLegendComponent from "./LayerLegendComponent";
+/** Layer which draws a buffer around geometries (i.e. a radius circle around points) */
 export default class BufferLayer extends Layer<BufferLayerDesign> {
     /** Gets the type of layer definition */
     getLayerDefinitionType(): "VectorTile";
     getVectorTile(design: BufferLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
-    createJsonQL(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
+    createVectorJsonQL(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
     getJsonQLCss(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): {
         layers: {
             id: string;
@@ -35,7 +35,7 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
     getBounds(design: BufferLayerDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
     getMinZoom(design: BufferLayerDesign): number | undefined;
     getMaxZoom(design: BufferLayerDesign): number;
-    getLegend(design: BufferLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.CElement<import("./LayerLegendComponent").LayerLegendComponentProps, LayerLegendComponent>;
+    getLegend(options: LegendOptions<BufferLayerDesign>): ReactNode;
     getFilterableTables(design: BufferLayerDesign, schema: Schema): string[];
     isEditable(): boolean;
     isIncomplete(design: BufferLayerDesign, schema: Schema): boolean;
@@ -48,4 +48,6 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
     }): React.ReactElement<{}>;
     cleanDesign(design: BufferLayerDesign, schema: Schema): BufferLayerDesign;
     validateDesign(design: BufferLayerDesign, schema: Schema): string | null;
+    /** Get strings to be translated */
+    getTranslatableStrings(design: BufferLayerDesign, schema: Schema): string[];
 }

package/lib/maps/BufferLayer.js

@@ -37,34 +37,16 @@ const LayerLegendComponent_1 = __importDefault(require("./LayerLegendComponent")
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const HoverContent_1 = __importDefault(require("./HoverContent"));
 const layoutOptions_1 = require("../dashboards/layoutOptions");
-/*
-Layer which draws a buffer around geometries (i.e. a radius circle around points)
-
-Design is:
-  table: table to get data from
-  axes: axes (see below)
-  filter: optional logical expression to filter by
-  color: color of layer (e.g. #FF8800). Color axis overrides
-  fillOpacity: Opacity to fill the circles (0-1)
-  radius: radius to draw in meters
-  minZoom: minimum zoom level
-  maxZoom: maximum zoom level
-
-  popup: contains items: which is BlocksLayoutManager items. Will be displayed when the circle is clicked
-  popupFilterJoins: customizable filtering for popup. See PopupFilterJoins.md
-
-axes:
-  geometry: where to draw buffers around
-  color: color axis
-
-*/
+const BlocksLayoutManager_1 = __importDefault(require("../layouts/blocks/BlocksLayoutManager"));
+const DashboardUtils_1 = require("../dashboards/DashboardUtils");
+/** 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 */
     getLayerDefinitionType() {
         return "VectorTile";
     }
     getVectorTile(design, sourceId, schema, filters, opacity) {
-        const jsonql = this.createJsonQL(design, schema, filters);
+        const jsonql = this.createVectorJsonQL(design, schema, filters);
         const mapLayers = [];
         // If color axes, add color conditions
         const color = (0, mapboxUtils_1.compileColorMapToMapbox)(design.axes.color || undefined, design.color || "transparent");
@@ -102,7 +84,7 @@ class BufferLayer extends Layer_1.default {
             maxZoom: this.getMaxZoom(design)
         };
     }
-    createJsonQL(design, schema, filters) {
+    createVectorJsonQL(design, schema, filters) {
         let colorExpr;
         const axisBuilder = new AxisBuilder_1.default({ schema });
         const exprCompiler = new expressions_1.ExprCompiler(schema);
@@ -147,8 +129,13 @@ class BufferLayer extends Layer_1.default {
         //       ST_Expand(ST_MakeEnvelope(-180, -85, 180, 85, 4326), -<radius in degrees>))
         //     , <radius in degrees>})
         //   , 3857)
-        // TODO document how we compute this
-        const radiusDeg = design.radius / 100000;
+        // 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] };
         const boundingBox = {
             type: "op",
             op: "ST_Transform",
@@ -165,11 +152,14 @@ class BufferLayer extends Layer_1.default {
                                 {
                                     type: "op",
                                     op: "ST_Expand",
-                                    exprs: [{ type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] }, -radiusDeg]
+                                    exprs: [
+                                        { type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] },
+                                        { type: "op", op: "*", exprs: [radiusDegCompiledExpr, -1] }
+                                    ]
                                 }
                             ]
                         },
-                        radiusDeg
+                        radiusDegCompiledExpr
                     ]
                 },
                 3857
@@ -208,7 +198,7 @@ class BufferLayer extends Layer_1.default {
             type: "op",
             op: "/",
             exprs: [
-                design.radius,
+                radiusCompiledExpr,
                 {
                     type: "op",
                     op: "cos",
@@ -331,6 +321,13 @@ class BufferLayer extends Layer_1.default {
         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
@@ -363,7 +360,7 @@ class BufferLayer extends Layer_1.default {
                     type: "op",
                     op: "/",
                     exprs: [
-                        { type: "op", op: "*", exprs: [design.radius, 2] },
+                        { type: "op", op: "*", exprs: [radiusCompiledExpr, 2] },
                         {
                             type: "op",
                             op: "*",
@@ -414,15 +411,6 @@ class BufferLayer extends Layer_1.default {
             selects,
             from: exprCompiler.compileTable(design.table, "main")
         };
-        // 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)
-        // TODO document how we compute this
-        const radiusDeg = design.radius / 100000;
         const boundingBox = {
             type: "op",
             op: "ST_Transform",
@@ -439,11 +427,14 @@ class BufferLayer extends Layer_1.default {
                                 {
                                     type: "op",
                                     op: "ST_Expand",
-                                    exprs: [{ type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] }, -radiusDeg]
+                                    exprs: [
+                                        { type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] },
+                                        { type: "op", op: "*", exprs: [radiusDegCompiledExpr, -1] }
+                                    ]
                                 }
                             ]
                         },
-                        radiusDeg
+                        radiusDegCompiledExpr
                     ]
                 },
                 3857
@@ -624,10 +615,11 @@ marker-fill: ` +
                             design: options.design,
                             scope: null,
                             filters,
-                            onScopeChange: null,
-                            onDesignChange: null,
+                            onDesignChange: undefined,
                             width: options.width,
-                            height: options.height
+                            height: options.height,
+                            locale: clickOptions.locale,
+                            translate: clickOptions.translate
                         });
                     }
                 });
@@ -655,8 +647,11 @@ marker-fill: ` +
                     key: ev.data.id,
                     schema: hoverOptions.schema,
                     dataSource: hoverOptions.dataSource,
-                    design: hoverOptions.design,
-                    filters: popupFilters
+                    table,
+                    items: hoverOptions.design.hoverOver.items,
+                    filters: popupFilters,
+                    locale: hoverOptions.locale,
+                    translate: hoverOptions.translate
                 });
             }
             return results;
@@ -694,7 +689,8 @@ marker-fill: ` +
     }
     // Get the legend to be optionally displayed on the map. Returns
     // a React element
-    getLegend(design, schema, name, dataSource, locale, filters) {
+    getLegend(options) {
+        const { design, schema, name, dataSource, locale, filters } = options;
         const _filters = filters.slice();
         if (design.filter != null) {
             const exprCompiler = new expressions_1.ExprCompiler(schema);
@@ -765,7 +761,12 @@ marker-fill: ` +
             // Default color
             draft.color = design.color || "#0088FF";
             draft.axes = design.axes || {};
-            draft.radius = design.radius || 1000;
+            // Default radius if both radius and radiusExpr are not specified
+            if (design.radius == null && design.radiusExpr == null) {
+                draft.radius = 1000;
+                draft.radiusExpr = { type: "literal", valueType: "number", value: 1000 };
+            }
+            // Default fill opacity
             draft.fillOpacity = design.fillOpacity != null ? design.fillOpacity : 0.5;
             draft.axes.geometry = axisBuilder.cleanAxis({
                 axis: draft.axes.geometry ? (0, immer_1.original)(draft.axes.geometry) || null : null,
@@ -790,7 +791,7 @@ marker-fill: ` +
         if (!design.table) {
             return T `Missing table`;
         }
-        if (design.radius == null) {
+        if (design.radius == null && design.radiusExpr == null) {
             return T `Missing radius`;
         }
         if (!design.axes || !design.axes.geometry) {
@@ -815,5 +816,25 @@ marker-fill: ` +
         }
         return null;
     }
+    /** Get strings to be translated */
+    getTranslatableStrings(design, schema) {
+        const strings = [];
+        // Add strings from hoverOver items
+        if (design.hoverOver && design.hoverOver.items) {
+            for (const item of design.hoverOver.items) {
+                if (item.label) {
+                    strings.push(item.label);
+                }
+            }
+        }
+        // Add strings from popup items using a layout manager approach
+        if (design.popup && design.popup.items) {
+            const layoutManager = new BlocksLayoutManager_1.default();
+            const popupStrings = (0, DashboardUtils_1.getTranslatableStringsFromLayoutManager)(layoutManager, design.popup.items, schema);
+            strings.push(...popupStrings);
+        }
+        // Remove duplicates
+        return lodash_1.default.uniq(strings);
+    }
 }
 exports.default = BufferLayer;

package/lib/maps/BufferLayerDesign.d.ts

@@ -1,37 +1,44 @@
 import { Expr } from "@mwater/expressions";
 import { Axis } from "../axes/Axis";
 import { HoverOverItem } from "./maps";
+import { LayoutBlock } from "../layouts/blocks/blockUtils";
+import { PopupFilterJoins } from "./PopupFilterJoinsUtils";
 /** Layer which draws a buffer around geometries (i.e. a radius circle around points) */
 export interface BufferLayerDesign {
-    /** table to get data from */
+    /** Table to get data from */
     table: string;
-    /** axes (see below) */
+    /** Axes (see below) */
     axes: {
-        /** where to draw buffers around */
+        /** Where to draw buffers around */
         geometry: Axis | null;
-        /** color axis */
+        /** Color axis */
         color: Axis | null;
     };
-    /** optional logical expression to filter by */
+    /** Optional logical expression to filter by */
     filter?: Expr;
-    /** color of layer (e.g. #FF8800). Color axis overrides */
+    /** Color of layer (e.g. #FF8800). Color axis overrides */
     color?: string;
     /** Opacity to fill the circles (0-1) */
     fillOpacity: number;
-    /** radius to draw in meters */
-    radius: number;
-    /** minimum zoom level */
+    /** Radius to draw in meters @deprecated use radiusExpr instead */
+    radius?: number;
+    /** Expression to get radius in meters */
+    radiusExpr?: Expr;
+    /** Minimum zoom level */
     minZoom?: number;
-    /** maximum zoom level */
+    /** Maximum zoom level */
     maxZoom?: number;
     /** True to union circles together. Makes ids unavailable as geometries are combined.
      * Only implemented for vector tiles */
     unionShapes?: boolean;
-    /** contains items: which is BlocksLayoutManager items. Will be displayed when the circle is clicked */
-    popup: any;
+    /** Contains items: which is BlocksLayoutManager items. Will be displayed when the circle is clicked */
+    popup: {
+        items: LayoutBlock;
+    };
+    /** Contains items: which is HoverOverItem[] */
     hoverOver: {
         items: HoverOverItem[];
     };
-    /** customizable filtering for popup. See PopupFilterJoins.md */
-    popupFilterJoins: any;
+    /** Customizable filtering for popup. See PopupFilterJoins.md */
+    popupFilterJoins: PopupFilterJoins;
 }