@mwater/visualization 5.4.1 → 5.4.2

package/lib/maps/HoverContent.d.ts

@@ -1,13 +1,21 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "..";
+import { HoverOverItem } from "./maps";
 export interface HoverContentProps {
     /** Schema to use */
     schema: Schema;
     dataSource: DataSource;
-    /** Design of the marker layer */
-    design: any;
     filters?: JsonQLFilter[];
+    /** Table that hover over is for */
+    table: string;
+    /** Hover over items */
+    items: HoverOverItem[];
+    /** Locale to use */
+    locale: string;
+    /** Translate function to use */
+    translate: (input: string) => string;
 }
-declare const HoverContent: React.FC<HoverContentProps>;
+/** Component that displays hover over content */
+declare const HoverContent: (props: HoverContentProps) => React.JSX.Element;
 export default HoverContent;

package/lib/maps/HoverContent.js

@@ -28,17 +28,20 @@ const expressions_1 = require("@mwater/expressions");
 const lodash_1 = require("lodash");
 const valueFormatter_1 = require("../valueFormatter");
 const valueFormatter_2 = require("../valueFormatter");
-const HoverContent = props => {
+/** Component that displays hover over content */
+const HoverContent = (props) => {
     const [values, setValues] = (0, react_1.useState)({});
+    const [error, setError] = (0, react_1.useState)(null);
     const exprUtils = new expressions_1.ExprUtils(props.schema);
     (0, react_1.useEffect)(() => {
-        const items = props.design.hoverOver?.items ?? [];
+        let mounted = true;
+        const items = props.items;
         if (items.length > 0) {
             const exprCompiler = new expressions_1.ExprCompiler(props.schema);
             const query = {
                 type: "query",
                 selects: [],
-                from: exprCompiler.compileTable(props.design.table, "main"),
+                from: exprCompiler.compileTable(props.table, "main"),
                 limit: 1
             };
             items.forEach((item) => {
@@ -62,21 +65,34 @@ const HoverContent = props => {
                 }
             }
             props.dataSource.performQuery(query, (error, data) => {
+                if (!mounted) {
+                    return;
+                }
+                if (error) {
+                    setError(props.translate("Error loading hover data"));
+                    return;
+                }
                 setValues(data?.[0] ?? {});
             });
         }
+        return () => {
+            mounted = false;
+        };
     }, []);
-    return (react_1.default.createElement("div", { className: "_mviz-map-hover-content" }, props.design.hoverOver?.items.map((item) => {
+    if (error) {
+        return react_1.default.createElement("div", { className: "text-danger" }, error);
+    }
+    return (react_1.default.createElement("div", { className: "_mviz-map-hover-content" }, props.items.map((item) => {
         let value = values[item.id];
-        if (value !== null && item.value) {
+        if (value != null && item.value) {
             // Get expression type
             const exprType = exprUtils.getExprType(item.value);
             // Format if can format
             if (exprType && (0, valueFormatter_1.canFormatType)(exprType)) {
-                value = (0, valueFormatter_2.formatValue)(exprType, value, undefined);
+                value = (0, valueFormatter_2.formatValue)(exprType, value, item.format, props.locale);
             }
             else {
-                value = exprUtils.stringifyExprLiteral(item.value, value);
+                value = exprUtils.stringifyExprLiteral(item.value, value, props.locale);
             }
         }
         else {
@@ -84,9 +100,9 @@ const HoverContent = props => {
         }
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("span", null,
-                item.label,
+                props.translate(item.label),
                 ":"),
-            react_1.default.createElement("span", { className: "text-muted" }, values[item.id] === null ? "n/a" : values[item.id] ?? "■■■■")));
+            react_1.default.createElement("span", { className: "text-muted" }, values[item.id] === null ? "n/a" : value)));
     })));
 };
 exports.default = HoverContent;

package/lib/maps/Layer.d.ts

@@ -4,6 +4,7 @@ import { OnGridClickResults, OnGridHoverResults } from "./maps";
 import { ReactNode } from "react";
 import { JsonQLQuery } from "@mwater/jsonql";
 import { LayerSpecification } from "maplibre-gl";
+import { MapLayerDataSource } from "./MapLayerDataSource";
 export interface JsonQLCssLayerDefinition {
     layers: Array<{
         /** Layer id */
@@ -28,11 +29,15 @@ export interface OnGridClickOptions<LayerDesign> {
     /** data source to use */
     dataSource: DataSource;
     /** layer data source */
-    layerDataSource: any;
+    layerDataSource: MapLayerDataSource;
     /** current scope data if layer is scoping */
     scopeData: any;
     /** compiled filters to apply to the popup */
     filters: JsonQLFilter[];
+    /** Locale to use */
+    locale: string;
+    /** Translate function to use */
+    translate: (input: string) => string;
 }
 export interface OnGridHoverOptions<LayerDesign> {
     /** design of layer */
@@ -42,11 +47,15 @@ export interface OnGridHoverOptions<LayerDesign> {
     /** data source to use */
     dataSource: DataSource;
     /** layer data source */
-    layerDataSource: any;
+    layerDataSource: MapLayerDataSource;
     /** current scope data if layer is scoping */
     scopeData: any;
     /** compiled filters to apply to the popup */
     filters: JsonQLFilter[];
+    /** Locale to use */
+    locale: string;
+    /** Translate function to use */
+    translate: (input: string) => string;
 }
 /** Definition of a vector tile layer */
 export interface VectorTileDef {
@@ -137,7 +146,7 @@ export default class Layer<LayerDesign> {
     /** Get max zoom level */
     getMaxZoom(design: LayerDesign): number | null | undefined;
     /** Get the legend to be optionally displayed on the map. Returns a React element */
-    getLegend(design: LayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): ReactNode;
+    getLegend(options: LegendOptions<LayerDesign>): ReactNode;
     /** Get a list of table ids that can be filtered on */
     getFilterableTables(design: LayerDesign, schema: Schema): string[];
     /** True if layer can be edited */
@@ -161,4 +170,16 @@ export default class Layer<LayerDesign> {
         w: number;
         s: number;
     } | null) => void): void;
+    /** Get strings to be translated */
+    getTranslatableStrings(design: LayerDesign, schema: Schema): string[];
+}
+export interface LegendOptions<LayerDesign> {
+    design: LayerDesign;
+    schema: Schema;
+    name: string;
+    dataSource: DataSource;
+    locale: string;
+    filters: JsonQLFilter[];
+    /** Translate function to use */
+    translate: (input: string) => string;
 }

package/lib/maps/Layer.js

@@ -72,7 +72,7 @@ class Layer {
         return null;
     }
     /** Get the legend to be optionally displayed on the map. Returns a React element */
-    getLegend(design, schema, name, dataSource, locale, filters) {
+    getLegend(options) {
         return null;
     }
     /** Get a list of table ids that can be filtered on */
@@ -178,5 +178,9 @@ class Layer {
             }
         });
     }
+    /** Get strings to be translated */
+    getTranslatableStrings(design, schema) {
+        return [];
+    }
 }
 exports.default = Layer;

package/lib/maps/LayerFactory.js

@@ -17,29 +17,21 @@ class LayerFactory {
         switch (type) {
             case "MWaterServer":
                 return new MWaterServerLayer_1.default();
-                break;
             case "Markers":
                 return new MarkersLayer_1.default();
-                break;
             case "Buffer":
                 return new BufferLayer_1.default();
-                break;
             // Uses a legacy type name
             case "AdminChoropleth":
                 return new ChoroplethLayer_1.default();
-                break;
             case "Cluster":
                 return new ClusterLayer_1.default();
-                break;
             case "TileUrl":
                 return new TileUrlLayer_1.default();
-                break;
             case "SwitchableTileUrl":
                 return new SwitchableTileUrlLayer_1.default();
-                break;
             case "Grid":
                 return new GridLayer_1.default();
-                break;
         }
         throw new Error(`Unknown type ${type}`);
     }

package/lib/maps/LayerLegendComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const lodash_1 = __importDefault(require("lodash"));
-const R = react_1.default.createElement;
 const AxisBuilder_1 = __importDefault(require("../axes/AxisBuilder"));
 const LegendGroup_1 = __importDefault(require("./LegendGroup"));
 // wraps the legends for a layer

package/lib/maps/LayerSwitcherComponent.d.ts

@@ -4,4 +4,5 @@ import { MapDesign } from "./MapDesign";
 export declare function LayerSwitcherComponent(props: {
     design: MapDesign;
     onDesignChange: (design: MapDesign) => void;
+    translate: (input: string) => string;
 }): React.JSX.Element;

package/lib/maps/LayerSwitcherComponent.js

@@ -65,7 +65,7 @@ function LayerSwitcherComponent(props) {
         return (react_1.default.createElement("div", { key: index, style: { fontSize: 12, whiteSpace: "nowrap", cursor: "pointer" }, onClick: handleClick },
             react_1.default.createElement("i", { className: lv.visible ? "fa fa-fw fa-check-square text-primary" : "fa fa-fw fa-square text-muted" }),
             "\u00A0",
-            lv.name));
+            props.translate(lv.name)));
     }
     return (react_1.default.createElement("div", { style: { textAlign: "right" }, ref: useClickOutside(() => {
             setDropdownOpen(false);

package/lib/maps/LeafletMapComponent.js

@@ -123,7 +123,9 @@ class LeafletMapComponent extends react_1.Component {
             if (pad) {
                 lBounds = lBounds.pad(pad);
             }
-            this.map.fitBounds(lBounds, { animate: true });
+            if (lBounds.getEast() !== Infinity && lBounds.getWest() !== -Infinity && lBounds.getNorth() !== Infinity && lBounds.getSouth() !== -Infinity) {
+                this.map.fitBounds(lBounds, { animate: true });
+            }
         }
         else {
             // Fit world doesn't work sometimes. Make sure that entire left-right is included

package/lib/maps/LegendComponent.d.ts

@@ -10,5 +10,6 @@ export default function LegendComponent(props: {
     /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
     filters: JsonQLFilter[];
     locale: string;
+    translate: (input: string) => string;
     onHide: () => void;
 }): React.JSX.Element | null;

package/lib/maps/LegendComponent.js

@@ -37,7 +37,15 @@ function LegendComponent(props) {
         // }
         return {
             key: layerView.id,
-            legend: layer.getLegend(design, props.schema, layerView.name, props.dataSource, props.locale, props.filters)
+            legend: layer.getLegend({
+                design,
+                schema: props.schema,
+                name: layerView.name,
+                dataSource: props.dataSource,
+                locale: props.locale,
+                filters: props.filters,
+                translate: props.translate
+            })
         };
     }));
     if (legendItems.length === 0) {

package/lib/maps/MWaterServerLayer.d.ts

@@ -1,4 +1,4 @@
-import Layer from "./Layer";
+import Layer, { LegendOptions } from "./Layer";
 import React from "react";
 import { Schema } from "@mwater/expressions";
 export default class MWaterServerLayer extends Layer<any> {
@@ -10,7 +10,7 @@ export default class MWaterServerLayer extends Layer<any> {
     } | null;
     getMinZoom(design: any): any;
     getMaxZoom(design: any): any;
-    getLegend(design: any, schema: Schema): React.CElement<any, LoadingLegend>;
+    getLegend(options: LegendOptions<any>): React.CElement<any, LoadingLegend>;
     getFilterableTables(design: any, schema: Schema): any[];
     isEditable(): boolean;
     cleanDesign(design: any, schema: Schema): any;

package/lib/maps/MWaterServerLayer.js

@@ -45,11 +45,11 @@ class MWaterServerLayer extends Layer_1.default {
     }
     // Get the legend to be optionally displayed on the map. Returns
     // a React element
-    getLegend(design, schema) {
+    getLegend(options) {
         // Create loading legend component
         // TODO hardcoded
         const apiUrl = "https://api.mwater.co/v3/";
-        return react_1.default.createElement(LoadingLegend, { url: `${apiUrl}maps/legend?type=${design.type}` });
+        return react_1.default.createElement(LoadingLegend, { url: `${apiUrl}maps/legend?type=${options.design.type}` });
     }
     // Get a list of table ids that can be filtered on
     getFilterableTables(design, schema) {

package/lib/maps/MapComponent.js

@@ -65,16 +65,16 @@ class MapComponent extends react_1.default.Component {
                     key: "undo",
                     className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
                     onClick: this.handleUndo
-                }, R("span", { className: "fas fa-caret-left" }), R("span", { className: "hide-600px" }, T ` Undo`)),
+                }, R("span", { className: "fas fa-caret-left" }), R("span", { className: "hide-600px" }, " ", T `Undo`)),
                 " ",
                 R("a", {
                     key: "redo",
                     className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
                     onClick: this.handleRedo
-                }, R("span", { className: "fas fa-caret-right" }), R("span", { className: "hide-600px" }, T ` Redo`))
+                }, R("span", { className: "fas fa-caret-right" }), R("span", { className: "hide-600px" }, " ", T `Redo`))
             ]
             : undefined, this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
-            ? R("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters }, R("span", { className: "fa fa-filter" }), R("span", { className: "hide-600px" }, T ` Show Quickfilters`))
+            ? R("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters }, R("span", { className: "fa fa-filter" }), R("span", { className: "hide-600px" }, " ", T `Show Quickfilters`))
             : undefined, this.props.extraTitleButtonsElem, R("a", { key: "toggleDesign", className: "btn btn-link btn-sm", onClick: this.handleToggleDesignPanel, alt: T `Toggle design panel` }, this.getDesign().hideDesignPanel ?
             R("span", { className: "fas fa-angle-double-left" })
             : R("span", { className: "fas fa-angle-double-right" })));

package/lib/maps/MapDesign.d.ts

@@ -19,6 +19,8 @@ export interface MapDesign {
     attribution?: string;
     /** true to automatically zoom to bounds of data */
     autoBounds?: boolean;
+    /** True to animate zoom to bounds of data. Default is true */
+    animateAutoBounds?: boolean;
     /** maximum allowed zoom level */
     maxZoom?: number | null;
     /** array of global filters. See below. */

package/lib/maps/MapDesignerComponent.d.ts

@@ -17,12 +17,13 @@ export interface MapDesignerComponentProps {
     enableQuickfilters?: boolean;
 }
 export default class MapDesignerComponent extends React.Component<MapDesignerComponentProps> {
-    handleAttributionChange: (text: any) => void;
-    handleAutoBoundsChange: (value: any) => void;
+    handleAttributionChange: (text: string | undefined) => void;
+    handleAutoBoundsChange: (value: boolean) => void;
+    handleAnimateAutoBoundsChange: (value: boolean) => void;
     handleShowLayerSwitcherChange: (value: any) => void;
     handleConvertToClusterMap: () => void;
     handleConvertToMarkersMap: () => void;
     handleInitialLegendDisplayChange: (value: any) => void;
-    renderOptionsTab(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderOptionsTab(): React.JSX.Element;
     render(): React.JSX.Element;
 }

package/lib/maps/MapDesignerComponent.js

@@ -30,7 +30,6 @@ const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
-const NumberInputComponent_1 = __importDefault(require("@mwater/react-library/lib/NumberInputComponent"));
 const CheckboxComponent_1 = __importDefault(require("../CheckboxComponent"));
 const react_onclickout_1 = __importDefault(require("react-onclickout"));
 const MapLayersDesignerComponent_1 = __importDefault(require("./MapLayersDesignerComponent"));
@@ -51,6 +50,10 @@ class MapDesignerComponent extends react_1.default.Component {
         const design = { ...this.props.design, autoBounds: value };
         return this.props.onDesignChange(design);
     };
+    handleAnimateAutoBoundsChange = (value) => {
+        const design = { ...this.props.design, animateAutoBounds: value };
+        return this.props.onDesignChange(design);
+    };
     handleShowLayerSwitcherChange = (value) => {
         const design = { ...this.props.design, showLayerSwitcher: value };
         return this.props.onDesignChange(design);
@@ -66,35 +69,32 @@ class MapDesignerComponent extends react_1.default.Component {
         return this.props.onDesignChange(design);
     };
     renderOptionsTab() {
-        return R("div", null, R(BaseLayerDesignerComponent_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange
-        }), R(CheckboxComponent_1.default, {
-            checked: this.props.design.autoBounds,
-            onChange: this.handleAutoBoundsChange
-        }, R("span", { className: "text-muted" }, T `Automatic zoom `, R(PopoverHelpComponent_1.default, { placement: "left" }, T `Automatically zoom to the complete data whenever the map is loaded or the filters change`))), R(CheckboxComponent_1.default, {
-            checked: this.props.design.showLayerSwitcher,
-            onChange: this.handleShowLayerSwitcherChange
-        }, R("span", { className: "text-muted" }, T `Show Layer Switcher `, R(PopoverHelpComponent_1.default, { placement: "left" }, T `Show a control in the map allowing switching layers`))), R(ui.FormGroup, { label: T `Initial Legend Display`, labelMuted: true }, R(ui.Select, {
-            value: this.props.design.initialLegendDisplay || "open",
-            onChange: this.handleInitialLegendDisplayChange,
-            options: [
-                { value: "open", label: T `Open` },
-                { value: "closed", label: T `Closed` },
-                { value: "closedIfSmall", label: T `Open if wide enough` }
-            ],
-            style: { width: "auto" }
-        })), MapUtils.canConvertToClusterMap(this.props.design)
-            ? R("div", { key: "tocluster" }, R("a", { onClick: this.handleConvertToClusterMap, className: "btn btn-link btn-sm" }, T `Convert to cluster map`))
-            : undefined, MapUtils.canConvertToMarkersMap(this.props.design)
-            ? R("div", { key: "toMarker" }, R("a", { onClick: this.handleConvertToMarkersMap, className: "btn btn-link btn-sm" }, T `Convert to markers map`))
-            : undefined, R(AttributionComponent, {
-            text: this.props.design.attribution,
-            onTextChange: this.handleAttributionChange
-        }), R("br"), R(AdvancedOptionsComponent, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange
-        }));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(BaseLayerDesignerComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange }),
+            react_1.default.createElement(CheckboxComponent_1.default, { checked: this.props.design.autoBounds, onChange: this.handleAutoBoundsChange },
+                react_1.default.createElement("span", { className: "text-muted" },
+                    T `Automatic zoom`,
+                    " ",
+                    react_1.default.createElement(PopoverHelpComponent_1.default, { placement: "left" }, T `Automatically zoom to the complete data whenever the map is loaded or the filters change`))),
+            this.props.design.autoBounds && (react_1.default.createElement(CheckboxComponent_1.default, { checked: this.props.design.animateAutoBounds ?? true, onChange: this.handleAnimateAutoBoundsChange },
+                react_1.default.createElement("span", { className: "text-muted" }, T `Animate automatic zoom`))),
+            react_1.default.createElement(CheckboxComponent_1.default, { checked: this.props.design.showLayerSwitcher, onChange: this.handleShowLayerSwitcherChange },
+                react_1.default.createElement("span", { className: "text-muted" },
+                    T `Show Layer Switcher `,
+                    react_1.default.createElement(PopoverHelpComponent_1.default, { placement: "left" }, T `Show a control in the map allowing switching layers`))),
+            react_1.default.createElement(ui.FormGroup, { label: T `Initial Legend Display`, labelMuted: true },
+                react_1.default.createElement(ui.Select, { value: this.props.design.initialLegendDisplay || "open", onChange: this.handleInitialLegendDisplayChange, options: [
+                        { value: "open", label: T `Open|adjective` },
+                        { value: "closed", label: T `Closed` },
+                        { value: "closedIfSmall", label: T `Open if wide enough` }
+                    ], style: { width: "auto" } })),
+            MapUtils.canConvertToClusterMap(this.props.design) ? (react_1.default.createElement("div", { key: "tocluster" },
+                react_1.default.createElement("a", { onClick: this.handleConvertToClusterMap, className: "btn btn-link btn-sm" }, T `Convert to cluster map`))) : undefined,
+            MapUtils.canConvertToMarkersMap(this.props.design) ? (react_1.default.createElement("div", { key: "toMarker" },
+                react_1.default.createElement("a", { onClick: this.handleConvertToMarkersMap, className: "btn btn-link btn-sm" }, T `Convert to markers map`))) : undefined,
+            react_1.default.createElement(AttributionComponent, { text: this.props.design.attribution, onTextChange: this.handleAttributionChange }),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(AdvancedOptionsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange })));
     }
     render() {
         const filterableTables = MapUtils.getFilterableTables(this.props.design, this.props.schema);
@@ -102,47 +102,42 @@ class MapDesignerComponent extends react_1.default.Component {
         const tabs = [
             {
                 id: "layers",
-                label: [R("i", { className: "fa fa-bars" }), T ` Layers`],
-                elem: R(MapLayersDesignerComponent_1.default, {
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    design: this.props.design,
-                    onDesignChange: this.props.onDesignChange,
-                    allowEditingLayers: true,
-                    filters: lodash_1.default.compact(filters)
-                })
+                label: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("i", { className: "fa fa-bars" }),
+                    " ",
+                    T `Layers`),
+                elem: react_1.default.createElement(MapLayersDesignerComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.props.design, onDesignChange: this.props.onDesignChange, allowEditingLayers: true, filters: lodash_1.default.compact(filters) })
             },
             {
                 id: "filters",
-                label: [R("i", { className: "fa fa-filter" }), T ` Filters`],
-                elem: R(MapFiltersDesignerComponent_1.default, {
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    design: this.props.design,
-                    onDesignChange: this.props.onDesignChange
-                })
+                label: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("i", { className: "fa fa-filter" }),
+                    " ",
+                    T `Filters`),
+                elem: react_1.default.createElement(MapFiltersDesignerComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.props.design, onDesignChange: this.props.onDesignChange })
             },
             {
                 id: "options",
-                label: [R("i", { className: "fa fa-cog" }), T ` Options`],
+                label: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("i", { className: "fa fa-cog" }),
+                    " ",
+                    T `Options`),
                 elem: this.renderOptionsTab()
             }
         ];
         if (this.props.enableQuickfilters) {
             tabs.splice(2, 0, {
                 id: "quickfilters",
-                label: [R("i", { className: "fa fa-bolt" }), " ", T `Quickfilters`],
-                elem: R("div", { style: { marginBottom: 200 } }, R(QuickfiltersDesignComponent_1.default, {
-                    design: this.props.design.quickfilters || [],
-                    onDesignChange: (qfDesign) => {
-                        this.props.onDesignChange((0, immer_1.default)(this.props.design, (draft) => {
-                            draft.quickfilters = qfDesign;
-                        }));
-                    },
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    tables: filterableTables
-                }))
+                label: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("i", { className: "fa fa-bolt" }),
+                    " ",
+                    T `Quickfilters`),
+                elem: react_1.default.createElement("div", { style: { marginBottom: 200 } },
+                    react_1.default.createElement(QuickfiltersDesignComponent_1.default, { design: this.props.design.quickfilters || [], onDesignChange: (qfDesign) => {
+                            this.props.onDesignChange((0, immer_1.default)(this.props.design, (draft) => {
+                                draft.quickfilters = qfDesign;
+                            }));
+                        }, schema: this.props.schema, dataSource: this.props.dataSource, tables: filterableTables }))
             });
         }
         const activeTables = MapUtils.getFilterableTables(this.props.design, this.props.schema);
@@ -168,19 +163,18 @@ class AttributionComponent extends react_1.default.Component {
         return this.setState({ editing: false });
     };
     renderEditor() {
-        return R(react_onclickout_1.default, { onClickOut: this.handleClickOut }, R("input", { onChange: this.handleTextChange, value: this.props.text, className: "form-control" }));
+        return (react_1.default.createElement(react_onclickout_1.default, { onClickOut: this.handleClickOut },
+            react_1.default.createElement("input", { onChange: this.handleTextChange, value: this.props.text, className: "form-control" })));
     }
     handleTextClick = () => {
         return this.setState({ editing: true });
     };
     render() {
-        let elem = R("div", { style: { marginLeft: 5 } }, this.state.editing
-            ? this.renderEditor()
-            : this.props.text
-                ? R("span", { onClick: this.handleTextClick, style: { cursor: "pointer" } }, this.props.text)
-                : R("a", { onClick: this.handleTextClick, className: "btn btn-link btn-sm" }, T `+ Add attribution`));
+        let elem = (react_1.default.createElement("div", { style: { marginLeft: 5 } }, this.state.editing ? (this.renderEditor()) : this.props.text ? (react_1.default.createElement("span", { onClick: this.handleTextClick, style: { cursor: "pointer" } }, this.props.text)) : (react_1.default.createElement("a", { onClick: this.handleTextClick, className: "btn btn-link btn-sm" }, T `+ Add attribution`))));
         if (this.props.text || this.state.editing) {
-            elem = R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Attribution`), elem);
+            elem = (react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "text-muted" }, T `Attribution`),
+                elem));
         }
         return elem;
     }
@@ -195,14 +189,14 @@ class AdvancedOptionsComponent extends react_1.default.Component {
     }
     render() {
         if (!this.state.expanded) {
-            return R("div", null, R("a", { className: "btn btn-link btn-sm", onClick: () => this.setState({ expanded: true }) }, T `Advanced options...`));
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("a", { className: "btn btn-link btn-sm", onClick: () => this.setState({ expanded: true }) }, T `Advanced options...`)));
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Advanced`), R("div", null, R("span", { className: "text-muted" }, T `Maximum Zoom Level: `), " ", R(NumberInputComponent_1.default, {
-            small: true,
-            style: { display: "inline-block" },
-            placeholder: T `None`,
-            value: this.props.design.maxZoom,
-            onChange: (v) => this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { maxZoom: v }))
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Advanced`),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-muted" }, T `Maximum Zoom Level: `),
+                " ",
+                react_1.default.createElement(ui.NumberInput, { decimal: false, size: "sm", style: { display: "inline-block" }, placeholder: T `None`, value: this.props.design.maxZoom, onChange: (v) => this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { maxZoom: v })) }))));
     }
 }

package/lib/maps/MapLayerViewDesignerComponent.js

@@ -111,8 +111,8 @@ class MapLayerViewDesignerComponent extends react_1.default.Component {
     }
     renderLayerEditToggle() {
         return R("div", { key: "edit", style: { marginBottom: this.state.editing ? 10 : undefined } }, R("a", { className: "link-plain", onClick: this.handleToggleEditing, style: { fontSize: 12 } }, this.state.editing
-            ? [R("i", { className: "fa fa-caret-up" }), T ` Close`]
-            : [R("i", { className: "fa fa-cog" }), T ` Customize...`]));
+            ? [R("i", { className: "fa fa-caret-up" }), " ", T `Close`]
+            : [R("i", { className: "fa fa-cog" }), " ", T `Customize...`]));
     }
     handleOpacityChange = (newValue) => {
         return this.update({ opacity: newValue / 100 });

package/lib/maps/MapUtils.d.ts

@@ -19,3 +19,7 @@ export declare function getCompiledFilters(design: MapDesign, schema: Schema, fi
     table: string;
     jsonql: JsonQLExpr;
 }[];
+/**
+ * Get a list of translatable strings in the map design
+ */
+export declare function getTranslatableStrings(design: MapDesign, schema: Schema): string[];

package/lib/maps/MapUtils.js

@@ -10,6 +10,7 @@ exports.convertToClusterMap = convertToClusterMap;
 exports.convertToMarkersMap = convertToMarkersMap;
 exports.getFilterableTables = getFilterableTables;
 exports.getCompiledFilters = getCompiledFilters;
+exports.getTranslatableStrings = getTranslatableStrings;
 const lodash_1 = __importDefault(require("lodash"));
 const expressions_1 = require("@mwater/expressions");
 const LayerFactory_1 = __importDefault(require("./LayerFactory"));
@@ -116,3 +117,21 @@ function getCompiledFilters(design, schema, filterableTables) {
     }
     return compiledFilters;
 }
+/**
+ * Get a list of translatable strings in the map design
+ */
+function getTranslatableStrings(design, schema) {
+    const strings = [];
+    // Iterate through each layer view in the design
+    for (const layerView of design.layerViews) {
+        // Name of the layer is translatable
+        strings.push(layerView.name);
+        // Create the layer using the LayerFactory
+        const layer = LayerFactory_1.default.createLayer(layerView.type);
+        // Get the translatable strings from the layer design
+        const layerStrings = layer.getTranslatableStrings(layerView.design, schema);
+        strings.push(...layerStrings);
+    }
+    // Remove duplicates
+    return lodash_1.default.uniq(strings);
+}