@mwater/visualization 5.4.0 → 5.4.2

package/lib/maps/BufferLayerDesignerComponent.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { DataSource, Schema } from "@mwater/expressions";
-import EditPopupComponent from "./EditPopupComponent";
+import { DataSource, Expr, Schema } from "@mwater/expressions";
 import { BufferLayerDesign } from "./BufferLayerDesign";
 import { JsonQLFilter } from "../JsonQLFilter";
 export interface BufferLayerDesignerComponentProps {
@@ -14,36 +13,22 @@ export interface BufferLayerDesignerComponentProps {
     filters?: JsonQLFilter[];
 }
 export default class BufferLayerDesignerComponent extends React.Component<BufferLayerDesignerComponentProps> {
-    update(updates: any): void;
-    updateAxes(changes: any): void;
-    handleTableChange: (table: any) => void;
-    handleRadiusChange: (radius: any) => void;
+    handleTableChange: (table: string) => void;
+    handleRadiusExprChange: (expr: Expr) => void;
     handleGeometryAxisChange: (axis: any) => void;
-    handleFilterChange: (expr: any) => void;
-    handleColorChange: (color: any) => void;
+    handleFilterChange: (filter: Expr) => void;
+    handleColorChange: (color: string) => void;
     handleColorAxisChange: (axis: any) => void;
-    handleFillOpacityChange: (fillOpacity: any) => void;
+    handleFillOpacityChange: (fillOpacity: number) => void;
     handleUnionShapesChange: (unionShapes: boolean) => void;
-    renderTable(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement>;
-    renderGeometryAxis(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | undefined;
-    renderRadius(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement>;
-    renderUnionShapes(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    renderColor(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
-    renderFillOpacity(): 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>;
+    renderTable(): React.JSX.Element;
+    renderGeometryAxis(): React.JSX.Element | undefined;
+    renderRadius(): React.JSX.Element;
+    renderUnionShapes(): React.JSX.Element | null;
+    renderColor(): React.JSX.Element | undefined;
+    renderFillOpacity(): React.JSX.Element;
+    renderFilter(): React.JSX.Element | null;
+    renderPopup(): React.JSX.Element | null;
+    renderHoverOver(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }

package/lib/maps/BufferLayerDesignerComponent.js

@@ -28,11 +28,9 @@ 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 expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
-const NumberInputComponent_1 = __importDefault(require("@mwater/react-library/lib/NumberInputComponent"));
-const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
+const AxisComponent_1 = __importDefault(require("../axes/AxisComponent"));
 const ColorComponent_1 = __importDefault(require("../ColorComponent"));
 const expressions_ui_2 = require("@mwater/expressions-ui");
 const rc_slider_1 = __importDefault(require("rc-slider"));
@@ -43,53 +41,48 @@ const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 const vectorMaps_1 = require("./vectorMaps");
 const EditHoverOver_1 = __importDefault(require("./EditHoverOver"));
 class BufferLayerDesignerComponent extends react_1.default.Component {
-    // Apply updates to design
-    update(updates) {
-        return this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, updates));
-    }
-    // Update axes with specified changes
-    updateAxes(changes) {
-        const axes = lodash_1.default.extend({}, this.props.design.axes, changes);
-        return this.update({ axes });
-    }
     handleTableChange = (table) => {
-        return this.update({ table });
+        this.props.onDesignChange({ ...this.props.design, table });
     };
-    handleRadiusChange = (radius) => {
-        return this.update({ radius });
+    handleRadiusExprChange = (expr) => {
+        const radius = expr?.type === "literal" ? expr.value : null;
+        this.props.onDesignChange({ ...this.props.design, radiusExpr: expr, radius });
     };
     handleGeometryAxisChange = (axis) => {
-        return this.updateAxes({ geometry: axis });
+        this.props.onDesignChange({ ...this.props.design, axes: { ...this.props.design.axes, geometry: axis } });
     };
-    handleFilterChange = (expr) => {
-        return this.update({ filter: expr });
+    handleFilterChange = (filter) => {
+        this.props.onDesignChange({ ...this.props.design, filter });
     };
     handleColorChange = (color) => {
-        return this.update({ color });
+        this.props.onDesignChange({ ...this.props.design, color });
     };
     handleColorAxisChange = (axis) => {
-        return this.updateAxes({ color: axis });
+        this.props.onDesignChange({ ...this.props.design, axes: { ...this.props.design.axes, color: axis } });
     };
     handleFillOpacityChange = (fillOpacity) => {
-        return this.update({ fillOpacity: fillOpacity / 100 });
+        this.props.onDesignChange({ ...this.props.design, fillOpacity: fillOpacity / 100 });
     };
     handleUnionShapesChange = (unionShapes) => {
         this.props.onDesignChange({ ...this.props.design, unionShapes });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), R("div", { style: { marginLeft: 10 } }, R(expressions_ui_2.TableSelectComponent, {
-            schema: this.props.schema,
-            value: this.props.design.table,
-            onChange: this.handleTableChange,
-            filter: this.props.design.filter,
-            onFilterChange: this.handleFilterChange
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fa fa-database" }),
+                " ",
+                T `Data Source`),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange }))));
     }
     renderGeometryAxis() {
         if (!this.props.design.table) {
             return;
         }
-        const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " ", T `Circle Centers`);
+        const title = (react_1.default.createElement("span", null,
+            react_1.default.createElement("span", { className: "fas fa-map-marker-alt" }),
+            " ",
+            T `Circle Centers`));
         const filters = lodash_1.default.clone(this.props.filters) || [];
         if (this.props.design.filter != null) {
             const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
@@ -98,32 +91,25 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
                 filters.push({ table: this.props.design.filter.table, jsonql });
             }
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, title), R("div", { style: { marginLeft: 10 } }, react_1.default.createElement(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            types: ["geometry"],
-            aggrNeed: "none",
-            value: this.props.design.axes.geometry,
-            onChange: this.handleGeometryAxisChange,
-            filters
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, title),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["geometry"], aggrNeed: "none", value: this.props.design.axes.geometry, onChange: this.handleGeometryAxisChange, filters: filters }))));
     }
     renderRadius() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Radius (meters)`), ": ", react_1.default.createElement(NumberInputComponent_1.default, {
-            value: this.props.design.radius,
-            onChange: this.handleRadiusChange
-        }));
+        const radiusExpr = this.props.design.radiusExpr ?? { type: "literal", valueType: "number", value: this.props.design.radius };
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Radius (meters)`),
+            ":",
+            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 R("div", { className: "mb-3" }, react_1.default.createElement(bootstrap_1.Checkbox, {
-            value: this.props.design.unionShapes,
-            onChange: this.handleUnionShapesChange
-        }, T `Combine circles (advanced)`));
+        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)`)));
     }
     renderColor() {
         if (!this.props.design.axes.geometry) {
@@ -137,81 +123,61 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
                 filters.push({ table: this.props.design.filter.table, jsonql });
             }
         }
-        return R("div", null, !this.props.design.axes.color
-            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Circle Color`), R("div", null, R(ColorComponent_1.default, {
-                color: this.props.design.color,
-                onChange: this.handleColorChange
-            })))
-            : undefined, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Color By Data`), R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            types: ["text", "enum", "boolean", "date"],
-            aggrNeed: "none",
-            value: this.props.design.axes.color,
-            defaultColor: this.props.design.color,
-            showColorMap: true,
-            onChange: this.handleColorAxisChange,
-            allowExcludedValues: true,
-            reorderable: true,
-            filters
-        })));
+        return (react_1.default.createElement("div", null,
+            !this.props.design.axes.color && (react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "text-muted" },
+                    react_1.default.createElement("span", { className: "fas fa-tint" }),
+                    T `Circle Color`),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.color, onChange: this.handleColorChange })))),
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "text-muted" },
+                    react_1.default.createElement("span", { className: "fas fa-tint" }),
+                    T `Color By Data`),
+                react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["text", "enum", "boolean", "date"], aggrNeed: "none", value: this.props.design.axes.color, defaultColor: this.props.design.color, showColorMap: true, onChange: this.handleColorAxisChange, allowExcludedValues: true, reorderable: true, filters: filters }))));
     }
     renderFillOpacity() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Circle Opacity (%)`), ": ", react_1.default.createElement(rc_slider_1.default, {
-            min: 0,
-            max: 100,
-            step: 1,
-            tipTransitionName: "rc-slider-tooltip-zoom-down",
-            value: this.props.design.fillOpacity * 100,
-            onChange: this.handleFillOpacityChange
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Circle Opacity (%)`),
+            ":",
+            react_1.default.createElement(rc_slider_1.default, { min: 0, max: 100, step: 1, tipTransitionName: "rc-slider-tooltip-zoom-down", value: this.props.design.fillOpacity * 100, onChange: this.handleFillOpacityChange })));
     }
     renderFilter() {
         // If no data, hide
         if (!this.props.design.axes.geometry) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T `Filters`), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_1.FilterExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: this.handleFilterChange,
-            table: this.props.design.table,
-            value: this.props.design.filter
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-filter" }),
+                T `Filters`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(expressions_ui_1.FilterExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleFilterChange, table: this.props.design.table, value: this.props.design.filter }))));
     }
     renderPopup() {
         if (!this.props.design.table) {
             return null;
         }
-        return R(EditPopupComponent_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            idTable: this.props.design.table,
-            defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
-        });
+        return (react_1.default.createElement(EditPopupComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, idTable: this.props.design.table, defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table) }));
     }
     renderHoverOver() {
         if (!this.props.design.table) {
             return null;
         }
-        return R(EditHoverOver_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            idTable: this.props.design.table,
-            defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
-        });
+        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) }));
     }
     render() {
-        return R("div", null, this.renderTable(), this.renderGeometryAxis(), this.renderRadius(), this.renderUnionShapes(), this.renderColor(), this.renderFillOpacity(), this.renderFilter(), this.renderPopup(), this.renderHoverOver(), this.props.design.table
-            ? R(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })
-            : undefined);
+        return (react_1.default.createElement("div", null,
+            this.renderTable(),
+            this.renderGeometryAxis(),
+            this.renderRadius(),
+            this.renderUnionShapes(),
+            this.renderColor(),
+            this.renderFillOpacity(),
+            this.renderFilter(),
+            this.renderPopup(),
+            this.renderHoverOver(),
+            this.props.design.table && (react_1.default.createElement(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange }))));
     }
 }
 exports.default = BufferLayerDesignerComponent;

package/lib/maps/ChoroplethLayer.d.ts

@@ -1,11 +1,10 @@
-import React from "react";
-import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef } from "./Layer";
+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 { JsonQLFilter } from "../index";
 import ChoroplethLayerDesign from "./ChoroplethLayerDesign";
 import { JsonQLQuery } from "@mwater/jsonql";
-import LayerLegendComponent from "./LayerLegendComponent";
 export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     /** Gets the type of layer definition */
     getLayerDefinitionType(): "VectorTile";
@@ -58,7 +57,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     getBounds(design: ChoroplethLayerDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
     getMinZoom(design: ChoroplethLayerDesign): number | undefined;
     getMaxZoom(design: ChoroplethLayerDesign): number;
-    getLegend(design: ChoroplethLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.CElement<import("./LayerLegendComponent").LayerLegendComponentProps, LayerLegendComponent>;
+    getLegend(options: LegendOptions<ChoroplethLayerDesign>): ReactNode;
     getFilterableTables(design: ChoroplethLayerDesign, schema: Schema): string[];
     /** True if layer can be edited */
     isEditable(): boolean;
@@ -71,4 +70,6 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
         onDesignChange: (design: ChoroplethLayerDesign) => void;
         filters: JsonQLFilter[];
     }): React.ReactElement<{}>;
+    /** Get strings to be translated */
+    getTranslatableStrings(design: ChoroplethLayerDesign, schema: Schema): string[];
 }

package/lib/maps/ChoroplethLayer.js

@@ -37,6 +37,8 @@ const LayerLegendComponent_1 = __importDefault(require("./LayerLegendComponent")
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 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");
 class ChoroplethLayer extends Layer_1.default {
     /** Gets the type of layer definition */
     getLayerDefinitionType() {
@@ -1228,10 +1230,10 @@ class ChoroplethLayer extends Layer_1.default {
                             design: options.design,
                             scope: null,
                             filters,
-                            onScopeChange: null,
-                            onDesignChange: null,
                             width: options.width,
-                            height: options.height
+                            height: options.height,
+                            locale: clickOptions.locale,
+                            translate: clickOptions.translate
                         });
                     }
                 });
@@ -1272,8 +1274,11 @@ class ChoroplethLayer extends Layer_1.default {
                     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;
@@ -1326,10 +1331,8 @@ class ChoroplethLayer extends Layer_1.default {
     }
     // Get the legend to be optionally displayed on the map. Returns
     // a React element
-    getLegend(design, schema, name, dataSource, locale, filters) {
-        if (filters == null) {
-            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);
@@ -1512,5 +1515,25 @@ class ChoroplethLayer extends Layer_1.default {
             }
         });
     }
+    /** 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 = ChoroplethLayer;

package/lib/maps/ChoroplethLayerDesign.d.ts

@@ -1,6 +1,8 @@
 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 that is composed of regions colored. Now extended to any other regions as well, so name
  * is legacy, as is adminRegionExpr field.
@@ -43,12 +45,14 @@ export default interface ChoroplethLayerDesign {
     /** true to display name labels on regions */
     displayNames: boolean;
     /** contains items: which is BlocksLayoutManager items. Will be displayed when the region is clicked. Only when region mode is "indirect" */
-    popup: any;
+    popup: {
+        items: LayoutBlock;
+    };
     hoverOver: {
         items: HoverOverItem[];
     };
     /** customizable filtering for popup. See PopupFilterJoins.md. Only when region mode is "indirect"  */
-    popupFilterJoins: any;
+    popupFilterJoins: PopupFilterJoins;
     /** minimum zoom level */
     minZoom?: number;
     /** maximum zoom level */

package/lib/maps/ChoroplethLayerDesigner.js

@@ -146,7 +146,8 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
         return (react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement("label", { className: "text-muted" },
                 react_1.default.createElement("i", { className: "fa fa-database" }),
-                T ` Data Source`),
+                " ",
+                T `Data Source`),
             react_1.default.createElement(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange })));
     }
     renderRegionsTable() {
@@ -173,7 +174,8 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
         return (react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement("label", { className: "text-muted" },
                 react_1.default.createElement("i", { className: "fas fa-map-marker-alt" }),
-                T ` Location`),
+                " ",
+                T `Location`),
             react_1.default.createElement("div", { style: { marginLeft: 8 } },
                 react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleAdminRegionExprChange, table: this.props.design.table, types: ["id"], idTable: regionsTable, value: this.props.design.adminRegionExpr || null }))));
     }

package/lib/maps/ClusterLayer.d.ts

@@ -1,10 +1,9 @@
 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 { ClusterLayerDesign } from "./ClusterLayerDesign";
-import Layer, { VectorTileDef } from "./Layer";
-import LayerLegendComponent from "./LayerLegendComponent";
+import Layer, { LegendOptions, VectorTileDef } from "./Layer";
 export default class ClusterLayer extends Layer<ClusterLayerDesign> {
     /** Gets the type of layer definition */
     getLayerDefinitionType(): "VectorTile";
@@ -22,7 +21,7 @@ export default class ClusterLayer extends Layer<ClusterLayerDesign> {
     getBounds(design: ClusterLayerDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
     getMinZoom(design: ClusterLayerDesign): number | undefined;
     getMaxZoom(design: ClusterLayerDesign): number;
-    getLegend(design: ClusterLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters?: JsonQLFilter[]): React.CElement<import("./LayerLegendComponent").LayerLegendComponentProps, LayerLegendComponent>;
+    getLegend(options: LegendOptions<ClusterLayerDesign>): ReactNode;
     getFilterableTables(design: ClusterLayerDesign, schema: Schema): string[];
     isEditable(): boolean;
     isIncomplete(design: ClusterLayerDesign, schema: Schema): boolean;

package/lib/maps/ClusterLayer.js

@@ -643,7 +643,8 @@ class ClusterLayer extends Layer_1.default {
     }
     // 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);

package/lib/maps/DetailLevelSelectComponent.js

@@ -84,7 +84,7 @@ class DetailLevelSelectComponent extends react_1.default.Component {
             });
         }
         else {
-            return R("div", { className: "text-muted" }, R("i", { className: "fa fa-spinner fa-spin" }), T ` Loading...`);
+            return R("div", { className: "text-muted" }, R("i", { className: "fa fa-spinner fa-spin" }), " ", T `Loading...`);
         }
     }
 }

package/lib/maps/DirectMapDataSource.js

@@ -86,7 +86,8 @@ async function getVectorTileFromDirectRequest(options) {
         throw new Error("Error getting tiles");
     }
     const { token, expires } = await response.json();
-    return { url: apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires };
+    // Client isn't necessary, but allows tracking of usage easier
+    return { url: apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}&client=${client ?? ""}`, expires };
 }
 /**
  * React hook to get a direct URL for a vector tile source.

package/lib/maps/EditPopupComponent.js

@@ -29,8 +29,8 @@ class EditPopupComponent extends react_1.default.Component {
         return this.props.onDesignChange(design);
     };
     render() {
-        return R("div", null, R("a", { className: "btn btn-link", onClick: () => this.setState({ editing: true }) }, R("i", { className: "fa fa-pencil" }), T ` Customize Popup`), this.props.design.popup
-            ? R("a", { className: "btn btn-link", onClick: this.handleRemovePopup }, R("i", { className: "fa fa-times" }), T ` Remove Popup`)
+        return R("div", null, R("a", { className: "btn btn-link", onClick: () => this.setState({ editing: true }) }, R("i", { className: "fa fa-pencil" }), " ", T `Customize Popup`), this.props.design.popup
+            ? R("a", { className: "btn btn-link", onClick: this.handleRemovePopup }, R("i", { className: "fa fa-times" }), " ", T `Remove Popup`)
             : undefined, this.props.design.popup
             ? R(PopupFilterJoinsEditComponent_1.default, {
                 schema: this.props.schema,
@@ -62,10 +62,12 @@ class EditPopupComponent extends react_1.default.Component {
                         design: options.design,
                         scope: null,
                         filters: [],
-                        onScopeChange: () => { },
                         onDesignChange: options.onDesignChange,
                         width: options.width,
                         height: options.height,
+                        // TODO: fix
+                        locale: "en",
+                        translate: (input) => input,
                         singleRowTable: this.props.table
                     });
                 }

package/lib/maps/GridLayer.d.ts

@@ -1,11 +1,10 @@
-import React from "react";
-import Layer, { VectorTileDef } from "./Layer";
+import React, { ReactNode } from "react";
+import Layer, { LegendOptions, VectorTileDef } from "./Layer";
 import { Schema, DataSource } from "@mwater/expressions";
 import { LayerDefinition } from "./maps";
 import { JsonQLFilter } from "../index";
 import GridLayerDesign from "./GridLayerDesign";
 import { JsonQLQuery } from "@mwater/jsonql";
-import LayerLegendComponent from "./LayerLegendComponent";
 /** Layer which is a grid of squares or flat-topped hexagons. Depends on "Grid Functions.sql" having been run */
 export default class GridLayer extends Layer<GridLayerDesign> {
     /** Gets the type of layer definition */
@@ -30,7 +29,7 @@ export default class GridLayer extends Layer<GridLayerDesign> {
     getMaxZoom(design: GridLayerDesign): number;
     /** Get the legend to be optionally displayed on the map. Returns
      * a React element */
-    getLegend(design: GridLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.CElement<import("./LayerLegendComponent").LayerLegendComponentProps, LayerLegendComponent>;
+    getLegend(options: LegendOptions<GridLayerDesign>): ReactNode;
     getFilterableTables(design: GridLayerDesign, schema: Schema): string[];
     /** True if layer can be edited */
     isEditable(): boolean;

package/lib/maps/GridLayer.js

@@ -563,7 +563,8 @@ class GridLayer extends Layer_1.default {
     }
     /** 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 axisBuilder = new AxisBuilder_1.default({ schema });
         return react_1.default.createElement(LayerLegendComponent_1.default, {
             schema,

package/lib/maps/GridLayerDesigner.js

@@ -125,7 +125,8 @@ class GridLayerDesigner extends react_1.default.Component {
         return (react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement("label", { className: "text-muted" },
                 react_1.default.createElement("i", { className: "fa fa-database" }),
-                T ` Data Source`),
+                " ",
+                T `Data Source`),
             react_1.default.createElement(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange })));
     }
     renderGeometryExpr() {
@@ -136,7 +137,8 @@ class GridLayerDesigner extends react_1.default.Component {
         return (react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement("label", { className: "text-muted" },
                 react_1.default.createElement("i", { className: "fas fa-map-marker-alt" }),
-                T ` Location`),
+                " ",
+                T `Location`),
             react_1.default.createElement("div", { style: { marginLeft: 8 } },
                 react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleGeometryExprChange, table: this.props.design.table, types: ["geometry"], value: this.props.design.geometryExpr }))));
     }
@@ -191,7 +193,7 @@ class GridLayerDesigner extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T ` Filters`), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T `Filters`), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             onChange: this.handleFilterChange,