@mwater/visualization 5.4.0 → 5.4.2

package/lib/maps/MapViewComponent.d.ts

@@ -4,8 +4,7 @@ import { JsonQLFilter } from "../JsonQLFilter";
 import { MapDesign } from "./MapDesign";
 import { MapDataSource } from "./MapDataSource";
 import { MapScope } from "./MapUtils";
-/** Component that displays just the map */
-export declare function MapViewComponent(props: {
+export interface MapViewComponentProps {
     schema: Schema;
     dataSource: DataSource;
     mapDataSource: MapDataSource;
@@ -33,6 +32,12 @@ export declare function MapViewComponent(props: {
     zoomLocked?: boolean;
     /** Locale to use. Overrides map design locale */
     locale?: string;
+    /** Translate function to use for display. TODO: implement this */
+    translate?: (input: string) => string;
+    /** Increment to force refresh */
+    refreshTrigger?: number;
     /** Whether to disable interaction or not. Default false (implemented for printing to reduce number of tiles request) */
     disableInteraction?: boolean;
-}): React.JSX.Element;
+}
+/** Component that displays just the map */
+export declare function MapViewComponent(props: MapViewComponentProps): React.JSX.Element;

package/lib/maps/MarkersLayer.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 { OnGridClickResults, OnGridHoverResults } from "./maps";
 import { JsonQLFilter } from "../index";
 import { JsonQLQuery, JsonQLSelectQuery } from "@mwater/jsonql";
 import { MarkersLayerDesign } from "./MarkersLayerDesign";
-import LayerLegendComponent from "./LayerLegendComponent";
 export default class MarkersLayer extends Layer<MarkersLayerDesign> {
     /** Gets the type of layer definition */
     getLayerDefinitionType(): "VectorTile";
@@ -35,7 +34,7 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
     getBounds(design: MarkersLayerDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
     getMinZoom(design: MarkersLayerDesign): number | undefined;
     getMaxZoom(design: MarkersLayerDesign): number;
-    getLegend(design: MarkersLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.CElement<import("./LayerLegendComponent").LayerLegendComponentProps, LayerLegendComponent>;
+    getLegend(options: LegendOptions<MarkersLayerDesign>): ReactNode;
     getFilterableTables(design: MarkersLayerDesign, schema: Schema): string[];
     isEditable(): boolean;
     createDesignerElement(options: {
@@ -47,6 +46,8 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
     }): React.ReactElement<{}>;
     cleanDesign(design: MarkersLayerDesign, schema: Schema): MarkersLayerDesign;
     validateDesign(design: MarkersLayerDesign, schema: Schema): string | null;
+    /** Get strings to be translated */
+    getTranslatableStrings(design: MarkersLayerDesign, schema: Schema): string[];
 }
 /**
  * Takes a base query that has any number of selects and where conditions. It must have a geometry

package/lib/maps/MarkersLayer.js

@@ -38,6 +38,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 MarkersLayer extends Layer_1.default {
     /** Gets the type of layer definition */
     getLayerDefinitionType() {
@@ -453,7 +455,8 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
                     key: ev.data.id,
                     schema: hoverOptions.schema,
                     dataSource: hoverOptions.dataSource,
-                    design: hoverOptions.design,
+                    table,
+                    items: hoverOptions.design.hoverOver.items,
                     filters: [
                         {
                             table,
@@ -466,7 +469,9 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
                                 ]
                             }
                         }
-                    ]
+                    ],
+                    locale: hoverOptions.locale,
+                    translate: hoverOptions.translate
                 });
             }
             return results;
@@ -555,10 +560,10 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
                             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
                         });
                     }
                 });
@@ -585,7 +590,8 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
     }
     // 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, translate } = options;
         const _filters = filters.slice();
         if (design.filter != null) {
             const exprCompiler = new expressions_1.ExprCompiler(schema);
@@ -600,7 +606,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
             defaultColor: design.color,
             symbol: design.symbol || "font-awesome/circle",
             markerSize: design.markerSize,
-            name,
+            name: translate(name),
             filters: lodash_1.default.compact(_filters),
             axis: axisBuilder.cleanAxis({
                 axis: design.axes.color || null,
@@ -703,6 +709,26 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
         }
         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 = MarkersLayer;
 /**

package/lib/maps/MarkersLayerDesign.d.ts

@@ -1,43 +1,46 @@
 import { Expr } from "@mwater/expressions";
 import { Axis } from "../axes/Axis";
 import { HoverOverItem } from "./maps";
+import { LayoutBlock } from "../layouts/blocks/blockUtils";
+import { PopupFilterJoins } from "./PopupFilterJoinsUtils";
 /** Design for a markers layer */
 export interface MarkersLayerDesign {
     /** table to get data from */
     table: string;
-    /** axes (see below) */
+    /** Axes */
     axes: {
-        /** where to place markers */
+        /** Where to place markers */
         geometry: Axis;
-        /** color axis (to split into series based on a color) */
+        /** Color axis (to split into series based on a color) */
         color?: Axis;
     };
-    /** 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;
-    /** symbol to use for layer. e.g. "font-awesome/bell". Will be converted on server to proper uri. */
+    /** Symbol to use for layer. e.g. "font-awesome/bell". Will be converted on server to proper uri. */
     symbol?: string;
-    /** size in pixels of the markers. Default 10. */
+    /** Size in pixels of the markers. Default 10. */
     markerSize?: number;
-    /** size of the lines in pixels. Default 3 */
+    /** Size of the lines in pixels. Default 3 */
     lineWidth?: number;
-    /** opacity of polygon fill (0-1). Default is 0.25 */
+    /** Opacity of polygon fill (0-1). Default is 0.25 */
     polygonFillOpacity?: number;
-    /** color of polygon borders (defaults to color of fill) */
+    /** Color of polygon borders (defaults to color of fill) */
     polygonBorderColor?: string;
-    /** contains items: which is BlocksLayoutManager items. Will be displayed when the marker is clicked TODO */
+    /** Contains items: which is BlocksLayoutManager items. Will be displayed when the marker is clicked */
     popup: {
-        items: any;
+        items: LayoutBlock;
     };
+    /** Contains items to display when hovering over the layer */
     hoverOver: {
         items: HoverOverItem[];
     };
-    /** customizable filtering for popup. See PopupFilterJoins.md TODO */
-    popupFilterJoins: any;
-    /** minimum zoom level */
+    /** Customizable filtering for popup */
+    popupFilterJoins: PopupFilterJoins;
+    /** Minimum zoom level */
     minZoom?: number;
-    /** maximum zoom level */
+    /** Maximum zoom level */
     maxZoom?: number;
     /** @deprecated LEGACY sublayers array that contains above design */
     sublayers?: any[];

package/lib/maps/PopupFilterJoinsUtils.d.ts

@@ -1,7 +1,6 @@
 import { Expr, Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "..";
 /**
- * Utilities for popup filter joins.
  * Object keyed by table name that has expressions as values.
  * Each value is an expression for its key's table that is a type `id` or `idTable` of the layer's table.
  * This is used to filter the popup so that the rows are scoped to the item clicked on.
@@ -9,9 +8,13 @@ import { JsonQLFilter } from "..";
  * However, it could also filter to only water points that are related to the water system by adding the following key-value:
  * entities.water_point: { table: "entities.water_point", type: "field", column: "water_system" }
  */
-export declare function createPopupFilters(popupFilterJoins: {
+export type PopupFilterJoins = {
     [tableId: string]: Expr;
-}, schema: Schema, layerTable: any, rowId: any, useWithin?: boolean): JsonQLFilter[];
+};
+/**
+ * Utilities for popup filter joins.
+ */
+export declare function createPopupFilters(popupFilterJoins: PopupFilterJoins, schema: Schema, layerTable: any, rowId: any, useWithin?: boolean): JsonQLFilter[];
 export declare function createDefaultPopupFilterJoins(table: any): {
     [x: number]: {
         table: any;

package/lib/maps/PopupFilterJoinsUtils.js

@@ -6,12 +6,6 @@ const expressions_1 = require("@mwater/expressions");
 const expressions_2 = require("@mwater/expressions");
 /**
  * Utilities for popup filter joins.
- * Object keyed by table name that has expressions as values.
- * Each value is an expression for its key's table that is a type `id` or `idTable` of the layer's table.
- * This is used to filter the popup so that the rows are scoped to the item clicked on.
- * For example, if the map displays water systems, the popup will (by default) only be filtered by water systems, selecting only the row that was clicked on.
- * However, it could also filter to only water points that are related to the water system by adding the following key-value:
- * entities.water_point: { table: "entities.water_point", type: "field", column: "water_system" }
  */
 function createPopupFilters(popupFilterJoins, schema, layerTable, rowId, useWithin = false) {
     const exprUtils = new expressions_2.ExprUtils(schema);

package/lib/maps/RasterMapViewComponent.d.ts

@@ -3,39 +3,10 @@ import LeafletMapComponent from "./LeafletMapComponent";
 import { Schema, DataSource } from "@mwater/expressions";
 import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
 import { JsonQLFilter } from "../JsonQLFilter";
-import { MapDesign } from "./MapDesign";
-import { MapDataSource } from "./MapDataSource";
-import { MapScope } from "./MapUtils";
-export interface RasterMapViewComponentProps {
-    schema: Schema;
-    dataSource: DataSource;
-    mapDataSource: MapDataSource;
-    design: MapDesign;
-    onDesignChange?: (design: MapDesign) => void;
-    /** Width in pixels */
-    width: number;
-    /** Height in pixels */
-    height: number;
-    /** Called with (tableId, rowId) when item is clicked */
-    onRowClick?: (tableId: string, rowId: any) => void;
-    /** Extra filters to apply to view */
-    extraFilters?: JsonQLFilter[];
-    /** scope of the map (when a layer self-selects a particular scope) */
-    scope?: MapScope;
-    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
-    onScopeChange?: (scope: MapScope | null) => void;
-    /** Whether the map be draggable with mouse/touch or not. Default true */
-    dragging?: boolean;
-    /** Whether the map can be zoomed by touch-dragging with two fingers. Default true */
-    touchZoom?: boolean;
-    /** Whether the map can be zoomed by using the mouse wheel. Default true */
-    scrollWheelZoom?: boolean;
-    /** Whether changes to zoom level should be persisted. Default false  */
-    zoomLocked?: boolean;
+import { MapViewComponentProps } from "./MapViewComponent";
+export interface RasterMapViewComponentProps extends MapViewComponentProps {
     /** Called with underlying leaflet map component */
     leafletMapRef?: (map: LeafletMapComponent | null) => void;
-    /** Whether to disable interaction or not. Default false (implemented for printing to reduce number of tiles request) */
-    disableInteraction?: boolean;
 }
 /** Component that displays just the map, using raster tile technology */
 export default class RasterMapViewComponent extends React.Component<RasterMapViewComponentProps, {
@@ -59,6 +30,7 @@ export default class RasterMapViewComponent extends React.Component<RasterMapVie
         filters: JsonQLFilter[];
         dataSource: DataSource;
         locale: any;
+        translate: (input: string) => string;
         onHide: () => void;
         zoom: null;
     }>;

package/lib/maps/RasterMapViewComponent.js

@@ -104,13 +104,16 @@ class RasterMapViewComponent extends react_1.default.Component {
         // Clean design (prevent ever displaying invalid/legacy designs)
         const design = layer.cleanDesign(layerView.design, this.props.schema);
         // Handle click of layer
+        // TODO not translated
         const results = layer.onGridClick(ev, {
             design,
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             layerDataSource: this.props.mapDataSource.getLayerDataSource(layerViewId),
             scopeData: this.props.scope?.data?.layerViewId === layerViewId ? this.props.scope.data.data : undefined,
-            filters: this.getCompiledFilters()
+            filters: this.getCompiledFilters(),
+            locale: this.context,
+            translate: (input) => input
         });
         if (!results) {
             return;
@@ -155,6 +158,7 @@ class RasterMapViewComponent extends react_1.default.Component {
                 filters: this.getCompiledFilters(),
                 dataSource: this.props.dataSource,
                 locale: this.context,
+                translate: this.props.translate ?? (() => ""),
                 onHide: () => this.setState({ legendHidden: true }),
                 zoom: null
             });
@@ -230,7 +234,8 @@ class RasterMapViewComponent extends react_1.default.Component {
         return R("div", { style: { width: this.props.width, height: this.props.height, position: "relative" } }, this.renderPopup(), R("div", { style: { position: "absolute", maxWidth: 250, top: 10, right: 10, zIndex: 999, userSelect: "none" } }, R("div", { style: { display: "flex", gap: 6, position: "relative", flexDirection: "column", alignItems: "right" } }, this.props.onDesignChange && this.props.design.showLayerSwitcher
             ? R(LayerSwitcherComponent_1.LayerSwitcherComponent, {
                 design: this.props.design,
-                onDesignChange: this.props.onDesignChange
+                onDesignChange: this.props.onDesignChange,
+                translate: this.props.translate ?? (() => "")
             })
             : undefined)), R(LeafletMapComponent_1.default, {
             ref: (c) => {

package/lib/maps/ServerMapDataSource.js

@@ -118,7 +118,8 @@ class ServerLayerDataSource {
             throw new Error("Error getting tiles token");
         }
         const { token, expires } = await response.json();
-        return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires };
+        // Client isn't necessary, but allows tracking of usage easier
+        return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}&client=${this.options.client ?? ""}`, expires };
     }
     // Gets widget data source for a popup widget
     getPopupWidgetDataSource(design, widgetId) {

package/lib/maps/SwitchableTileUrlLayer.d.ts

@@ -1,7 +1,7 @@
-import Layer from "./Layer";
+import Layer, { LegendOptions } from "./Layer";
 import { Schema, DataSource } from "@mwater/expressions";
 import { JsonQLFilter } from "../index";
-import React from "react";
+import React, { ReactNode } from "react";
 /**
  * Layer that is composed of multiple tile urls that can be switched between
  * Loads legend from the server as well
@@ -39,7 +39,7 @@ export default class SwitchableTileUrlLayer extends Layer<SwitchableTileUrlLayer
     getTileUrl(design: SwitchableTileUrlLayerDesign, filters: JsonQLFilter[]): string | null;
     /** Gets the utf grid url for definition type "TileUrl" */
     getUtfGridUrl(design: SwitchableTileUrlLayerDesign, filters: JsonQLFilter[]): string | null;
-    getLegend(design: SwitchableTileUrlLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.JSX.Element | null;
+    getLegend(options: LegendOptions<SwitchableTileUrlLayerDesign>): ReactNode;
     /** True if layer can be edited */
     isEditable(): boolean;
     createDesignerElement(options: {

package/lib/maps/SwitchableTileUrlLayer.js

@@ -35,7 +35,8 @@ class SwitchableTileUrlLayer extends Layer_1.default {
         }
         return option.utfGridUrl || null;
     }
-    getLegend(design, schema, name, dataSource, locale, filters) {
+    getLegend(options) {
+        const { design, name } = options;
         // Find active option
         const option = design.options.find((d) => d.id === design.activeOption);
         if (!option || !option.legendUrl) {

package/lib/maps/TileUrlLayer.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
-import Layer from "./Layer";
-import { DataSource, Schema } from "@mwater/expressions";
-import { JsonQLFilter } from "../JsonQLFilter";
+import React, { ReactNode } from "react";
+import Layer, { LegendOptions } from "./Layer";
+import { Schema } from "@mwater/expressions";
 export interface TileUrlLayerDesign {
     /** Url with {s}, {z}, {x}, {y} */
     tileUrl: string;
@@ -22,7 +21,7 @@ export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
     getMaxZoom(design: any): any;
     isEditable(): boolean;
     isIncomplete(design: any, schema: Schema): boolean;
-    getLegend(design: TileUrlLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.JSX.Element | null;
+    getLegend(options: LegendOptions<TileUrlLayerDesign>): ReactNode;
     createDesignerElement(options: any): React.CElement<TileUrlLayerDesignerComponentProps, TileUrlLayerDesignerComponent>;
     cleanDesign(design: any, schema: Schema): any;
     validateDesign(design: any, schema: Schema): string | null;

package/lib/maps/TileUrlLayer.js

@@ -45,7 +45,8 @@ class TileUrlLayer extends Layer_1.default {
     isIncomplete(design, schema) {
         return this.validateDesign(this.cleanDesign(design, schema), schema) != null;
     }
-    getLegend(design, schema, name, dataSource, locale, filters) {
+    getLegend(options) {
+        const { design } = options;
         // Find active option
         if (!design.legendUrl) {
             return null;

package/lib/maps/VectorMapViewComponent.d.ts

@@ -1,44 +1,12 @@
-import { DataSource, Schema } from "@mwater/expressions";
 import React from "react";
-import { JsonQLFilter } from "../JsonQLFilter";
-import { MapDesign } from "./MapDesign";
-import { MapDataSource } from "./MapDataSource";
-import { MapScope } from "./MapUtils";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./VectorMapViewComponent.css";
-/** Component that displays just the map, using vector tile technology */
-export declare function VectorMapViewComponent(props: {
-    schema: Schema;
-    dataSource: DataSource;
-    mapDataSource: MapDataSource;
-    design: MapDesign;
-    onDesignChange?: (design: MapDesign) => void;
-    /** Width in pixels */
-    width: number;
-    /** Height in pixels */
-    height: number;
-    /** Called with (tableId, rowId) when item is clicked */
-    onRowClick?: (tableId: string, rowId: any) => void;
-    /** Extra filters to apply to view */
-    extraFilters?: JsonQLFilter[];
-    /** scope of the map (when a layer self-selects a particular scope) */
-    scope?: MapScope;
-    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
-    onScopeChange?: (scope: MapScope | null) => void;
-    /** Whether the map be draggable with mouse/touch or not. Default true */
-    dragging?: boolean;
-    /** Whether the map can be zoomed by touch-dragging with two fingers. Default true */
-    touchZoom?: boolean;
-    /** Whether the map can be zoomed by using the mouse wheel. Default true */
-    scrollWheelZoom?: boolean;
-    /** Whether changes to zoom level should be persisted. Default false  */
-    zoomLocked?: boolean;
-    /** Locale to use. Overrides map design locale */
-    locale?: string;
-    /** Increment to force refresh */
-    refreshTrigger?: number;
+import { MapViewComponentProps } from "./MapViewComponent";
+export interface VectorMapViewComponentProps extends MapViewComponentProps {
     /** Optional callback that gets updated MapLibre map each render. Used to allow
      * external zooming/panning.
      */
     onMapUpdate?: (map: maplibregl.Map) => void;
-}): React.JSX.Element;
+}
+/** Component that displays just the map, using vector tile technology */
+export declare function VectorMapViewComponent(props: VectorMapViewComponentProps): React.JSX.Element;

package/lib/maps/VectorMapViewComponent.js

@@ -64,6 +64,10 @@ function VectorMapViewComponent(props) {
     // State of legend
     const initialLegendDisplay = props.design.initialLegendDisplay || "open";
     const [legendHidden, setLegendHidden] = (0, react_1.useState)(initialLegendDisplay == "closed" || (props.width < 500 && initialLegendDisplay == "closedIfSmall"));
+    // Locale to use
+    const locale = props.locale || props.design.locale || "en";
+    // Translate function to use TODO
+    const translate = props.translate || ((input) => input);
     // Last feature that mouse entered
     const lastFeature = (0, react_2.useRef)();
     // Load map
@@ -90,17 +94,19 @@ function VectorMapViewComponent(props) {
         // Create layer
         const layer = LayerFactory_1.default.createLayer(layerView.type);
         // Clean design (prevent ever displaying invalid/legacy designs)
-        const design = layer.cleanDesign(layerView.design, props.schema);
+        const layerDesign = layer.cleanDesign(layerView.design, props.schema);
         // Handle click of layer
         const results = layer.onGridHoverOver(ev, {
-            design: design,
+            design: layerDesign,
             schema: props.schema,
             dataSource: props.dataSource,
             layerDataSource: props.mapDataSource.getLayerDataSource(layerViewId),
             scopeData: props.scope && props.scope.data && props.scope.data.layerViewId == layerViewId
                 ? props.scope.data.data
                 : undefined,
-            filters: getCompiledFilters()
+            filters: getCompiledFilters(),
+            locale: locale,
+            translate: translate
         });
         if (!results) {
             setHoverContents(null);
@@ -127,7 +133,9 @@ function VectorMapViewComponent(props) {
             scopeData: props.scope && props.scope.data && props.scope.data.layerViewId == layerViewId
                 ? props.scope.data.data
                 : undefined,
-            filters: getCompiledFilters()
+            filters: getCompiledFilters(),
+            locale: locale,
+            translate: translate
         });
         if (!results) {
             return;
@@ -391,7 +399,10 @@ function VectorMapViewComponent(props) {
         props.mapDataSource.getBounds(props.design, getCompiledFilters(), (error, bounds) => {
             setBusy(b => b - 1);
             if (bounds) {
-                map.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 30, duration: 2500 });
+                map.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], {
+                    padding: 30,
+                    duration: (props.design.animateAutoBounds ?? true) ? 2500 : 0
+                });
                 // Also record if editable as part of bounds
                 setBounds(bounds);
             }
@@ -488,7 +499,7 @@ function VectorMapViewComponent(props) {
             return react_1.default.createElement(HiddenLegend, { onShow: () => setLegendHidden(false) });
         }
         else {
-            return (react_1.default.createElement(LegendComponent_1.default, { schema: props.schema, layerViews: props.design.layerViews, filters: getCompiledFilters(), zoom: map ? map.getZoom() : null, dataSource: props.dataSource, locale: props.locale || props.design.locale || "en", onHide: () => setLegendHidden(true) }));
+            return (react_1.default.createElement(LegendComponent_1.default, { schema: props.schema, layerViews: props.design.layerViews, filters: getCompiledFilters(), zoom: map ? map.getZoom() : null, dataSource: props.dataSource, locale: locale, translate: translate, onHide: () => setLegendHidden(true) }));
         }
     }
     /** Render a spinner if loading */
@@ -518,14 +529,14 @@ function VectorMapViewComponent(props) {
             border: "solid 1px #AAA",
             maxWidth: 250
         };
-        return react_1.default.createElement("div", { style: style }, hoverContents ?? "asdksjdbfskajf");
+        return react_1.default.createElement("div", { style: style }, hoverContents);
     };
     // Overflow hidden because of problem of exceeding div
     return (react_1.default.createElement("div", { style: { width: props.width, height: props.height, position: "relative" } },
         renderPopup(),
         react_1.default.createElement("div", { style: { position: "absolute", maxWidth: 250, top: 10, right: 10, zIndex: 999, userSelect: "none" } },
             react_1.default.createElement("div", { style: { display: "flex", gap: 6, position: "relative", flexDirection: "column", alignItems: "right" } },
-                props.onDesignChange != null && props.design.showLayerSwitcher ? (react_1.default.createElement(LayerSwitcherComponent_1.LayerSwitcherComponent, { design: props.design, onDesignChange: props.onDesignChange })) : null,
+                props.onDesignChange != null && props.design.showLayerSwitcher ? (react_1.default.createElement(LayerSwitcherComponent_1.LayerSwitcherComponent, { design: props.design, onDesignChange: props.onDesignChange, translate: translate })) : null,
                 renderHoverContent())),
         react_1.default.createElement("div", { style: { width: props.width, height: props.height }, ref: setMapDiv }),
         renderLegend(),

package/lib/maps/maps.d.ts

@@ -28,8 +28,11 @@ export type OnGridHoverResults = {
     scope?: any;
     hoverOver?: React.ReactElement<{}>;
 } | null;
+/** Item in hover over */
 export interface HoverOverItem {
     id: string;
     label: string;
     value?: Expr;
+    /** See valueFormatter.ts */
+    format?: string;
 }

package/lib/quickfilter/QuickfiltersComponent.d.ts

@@ -21,6 +21,8 @@ export interface QuickfiltersComponentProps {
     hideTopBorder?: boolean;
     /** Called when user hides the quickfilter bar */
     onHide?: () => void;
+    /** Translate function to use for display */
+    translate?: (input: string) => string;
 }
 /** Displays quick filters and allows their value to be modified */
 export default class QuickfiltersComponent extends React.Component<QuickfiltersComponentProps> {

package/lib/quickfilter/QuickfiltersComponent.js

@@ -24,6 +24,8 @@ class QuickfiltersComponent extends react_1.default.Component {
         }
         let values = this.props.values || [];
         let itemValue = values[index];
+        // Translate label
+        const label = this.props.translate?.(item.label) ?? item.label;
         // Clean expression first
         const expr = new expressions_2.ExprCleaner(this.props.schema).cleanExpr(item.expr);
         // Do not render if nothing
@@ -73,7 +75,7 @@ class QuickfiltersComponent extends react_1.default.Component {
         if (["enum", "enumset"].includes(type)) {
             return R(EnumQuickfilterComponent, {
                 key: JSON.stringify(item),
-                label: item.label,
+                label,
                 schema: this.props.schema,
                 options: new expressions_1.ExprUtils(this.props.schema).getExprEnumValues(expr),
                 value: itemValue,
@@ -85,7 +87,7 @@ class QuickfiltersComponent extends react_1.default.Component {
             return R(TextQuickfilterComponent, {
                 key: JSON.stringify(item),
                 index,
-                label: item.label,
+                label,
                 expr,
                 schema: this.props.schema,
                 quickfiltersDataSource: this.props.quickfiltersDataSource,
@@ -98,7 +100,7 @@ class QuickfiltersComponent extends react_1.default.Component {
         if (["date", "datetime"].includes(type)) {
             return R(DateQuickfilterComponent, {
                 key: JSON.stringify(item),
-                label: item.label,
+                label,
                 expr,
                 schema: this.props.schema,
                 value: itemValue,
@@ -109,7 +111,7 @@ class QuickfiltersComponent extends react_1.default.Component {
             return R(IdArrayQuickfilterComponent_1.default, {
                 key: JSON.stringify(item),
                 index,
-                label: item.label,
+                label,
                 expr,
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,
@@ -123,7 +125,7 @@ class QuickfiltersComponent extends react_1.default.Component {
             return R(TextArrayQuickfilterComponent, {
                 key: JSON.stringify(item),
                 index,
-                label: item.label,
+                label,
                 expr,
                 schema: this.props.schema,
                 quickfiltersDataSource: this.props.quickfiltersDataSource,
@@ -172,7 +174,7 @@ class EnumQuickfilterComponent extends react_1.default.Component {
     };
     renderSingleSelect(options) {
         return R(react_select_1.default, {
-            placeholder: "All",
+            placeholder: T `All`,
             value: lodash_1.default.findWhere(options, { value: this.props.value }) || null,
             options,
             isClearable: true,
@@ -190,7 +192,7 @@ class EnumQuickfilterComponent extends react_1.default.Component {
     }
     renderMultiSelect(options) {
         return R(react_select_1.default, {
-            placeholder: "All",
+            placeholder: T `All`,
             value: lodash_1.default.map(this.props.value, (v) => lodash_1.default.find(options, (o) => o.value === v)),
             isClearable: true,
             isMulti: true,

package/lib/quickfilter/QuickfiltersDesignComponent.d.ts

@@ -41,6 +41,6 @@ declare class QuickfilterDesignComponent extends React.Component<QuickfilterDesi
     handleLabelChange: (ev: any) => void;
     handleMergedChange: (merged: any) => void;
     handleMultiChange: (multi: any) => void;
-    render(): React.DetailedReactHTMLElement<{}, HTMLElement>;
+    render(): React.JSX.Element;
 }
 export {};