@mwater/visualization 5.3.1 → 5.4.0

package/lib/mWaterLoader.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = mWaterLoader;
 const jquery_1 = __importDefault(require("jquery"));
 const expressions_1 = require("@mwater/expressions");
 const MWaterDataSource_1 = __importDefault(require("@mwater/expressions/lib/MWaterDataSource"));
@@ -53,4 +54,3 @@ function mWaterLoader(options, callback) {
         return callback(new Error(xhr.responseText));
     });
 }
-exports.default = mWaterLoader;

package/lib/maps/AddLayerComponent.js

@@ -41,43 +41,43 @@ class AddLayerComponent extends react_1.default.Component {
         }
         const newLayers = [
             {
-                label: "Marker Layer",
-                name: "Untitled Layer",
+                label: T `Marker Layer`,
+                name: T `Untitled Layer`,
                 type: "Markers",
                 design: {}
             },
             {
-                label: "Radius (circles) Layer",
-                name: "Untitled Layer",
+                label: T `Radius (circles) Layer`,
+                name: T `Untitled Layer`,
                 type: "Buffer",
                 design: {}
             },
             {
-                label: "Choropleth Layer",
-                name: "Untitled Layer",
+                label: T `Choropleth Layer`,
+                name: T `Untitled Layer`,
                 type: "AdminChoropleth",
                 design: {}
             },
             {
-                label: "Cluster Layer",
-                name: "Untitled Layer",
+                label: T `Cluster Layer`,
+                name: T `Untitled Layer`,
                 type: "Cluster",
                 design: {}
             },
             {
-                label: "Grid Layer",
-                name: "Untitled Layer",
+                label: T `Grid Layer`,
+                name: T `Untitled Layer`,
                 type: "Grid",
                 design: {}
             },
             {
-                label: "Custom Tile Url (advanced)",
-                name: "Untitled Layer",
+                label: T `Custom Tile Url (advanced)`,
+                name: T `Untitled Layer`,
                 type: "TileUrl",
                 design: {}
             }
         ];
-        return R("div", { style: { margin: 5 }, key: "addLayer", className: "btn-group" }, R("button", { type: "button", "data-bs-toggle": "dropdown", className: "btn btn-primary dropdown-toggle" }, R("span", { className: "fas fa-plus" }), " Add Layer"), R("ul", { className: "dropdown-menu" }, lodash_1.default.map(newLayers, (layer, i) => {
+        return R("div", { style: { margin: 5 }, key: "addLayer", className: "btn-group" }, R("button", { type: "button", "data-bs-toggle": "dropdown", className: "btn btn-primary dropdown-toggle" }, R("span", { className: "fas fa-plus" }), ` ${T `Add Layer`}`), R("ul", { className: "dropdown-menu" }, lodash_1.default.map(newLayers, (layer, i) => {
             return R("li", { key: "" + i }, R("a", { className: "dropdown-item", onClick: this.handleAddLayer.bind(null, layer) }, layer.label || layer.name));
         })));
     }

package/lib/maps/AdminScopeAndDetailLevelComponent.js

@@ -25,17 +25,17 @@ class AdminScopeAndDetailLevelComponent extends react_1.default.Component {
     };
     render() {
         const basicDetailLevelOptions = [
-            { value: 0, label: "Countries" },
-            { value: 1, label: "Level 1 (State/Province/District)" }
+            { value: 0, label: T `Countries` },
+            { value: 1, label: T `Level 1 (State/Province/District)` }
         ];
-        return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Region to Map"), R(RegionSelectComponent_1.default, {
+        return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Region to Map`), R(RegionSelectComponent_1.default, {
             region: this.props.scope,
             onChange: this.handleScopeChange,
             schema: this.props.schema,
             dataSource: this.props.dataSource
         })), (() => {
             if (this.props.scope != null && this.props.detailLevel != null) {
-                return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Detail Level"), R(DetailLevelSelectComponent_1.default, {
+                return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Detail Level`), R(DetailLevelSelectComponent_1.default, {
                     scope: this.props.scope,
                     scopeLevel: this.props.scopeLevel,
                     detailLevel: this.props.detailLevel,
@@ -46,7 +46,7 @@ class AdminScopeAndDetailLevelComponent extends react_1.default.Component {
             }
             else if (this.props.scope == null && this.props.detailLevel != null) {
                 // Case of whole world. Allow selecting country or admin level 1
-                return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Detail Level"), R(react_select_1.default, {
+                return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Detail Level`), R(react_select_1.default, {
                     value: lodash_1.default.findWhere(basicDetailLevelOptions, { value: this.props.detailLevel }) || null,
                     options: basicDetailLevelOptions,
                     onChange: (opt) => this.handleDetailLevelChange(opt.value)

package/lib/maps/BaseLayerDesignerComponent.js

@@ -41,7 +41,7 @@ class BaseLayerDesignerComponent extends react_1.default.Component {
         else {
             opacity = 1;
         }
-        return R("div", { className: "mb-3", style: { paddingTop: 10 } }, R("label", { className: "text-muted" }, R("span", null, `Opacity: ${Math.round(opacity * 100)}%`)), R("div", { style: { padding: "10px" } }, react_1.default.createElement(rc_slider_1.default, {
+        return R("div", { className: "mb-3", style: { paddingTop: 10 } }, R("label", { className: "text-muted" }, R("span", null, T `Opacity: ${Math.round(opacity * 100)}%`)), R("div", { style: { padding: "10px" } }, react_1.default.createElement(rc_slider_1.default, {
             min: 0,
             max: 100,
             step: 1,
@@ -51,7 +51,7 @@ class BaseLayerDesignerComponent extends react_1.default.Component {
         })));
     }
     render() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Background Map"), R("div", { style: { marginLeft: 10 } }, R("div", null, this.renderBaseLayer("cartodb_positron", "Light"), this.renderBaseLayer("cartodb_dark_matter", "Dark"), this.renderBaseLayer("bing_road", "Roads"), this.renderBaseLayer("bing_aerial", "Satellite"), this.renderBaseLayer("blank", "Blank"), " ", R(PopoverHelpComponent_1.default, { placement: "bottom" }, "Blank map backgrounds work best with chloropleth map layers")), this.renderOpacityControl()));
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Background Map`), R("div", { style: { marginLeft: 10 } }, R("div", null, this.renderBaseLayer("cartodb_positron", T `Light`), this.renderBaseLayer("cartodb_dark_matter", T `Dark`), this.renderBaseLayer("bing_road", T `Roads`), this.renderBaseLayer("bing_aerial", T `Satellite`), this.renderBaseLayer("blank", T `Blank`), " ", R(PopoverHelpComponent_1.default, { placement: "bottom" }, T `Blank map backgrounds work best with chloropleth map layers`)), this.renderOpacityControl()));
     }
 }
 exports.default = BaseLayerDesignerComponent;

package/lib/maps/BufferLayer.js

@@ -257,7 +257,7 @@ class BufferLayer extends Layer_1.default {
                     type: "select",
                     expr: { type: "field", tableAlias: "main", column: schema.getTable(design.table).primaryKey },
                     alias: "id"
-                },
+                }, // main primary key as id
                 {
                     type: "select",
                     expr: { type: "op", op: "ST_AsMVTGeom", exprs: [bufferExpr, envelopeExpr] },
@@ -399,7 +399,7 @@ class BufferLayer extends Layer_1.default {
                 type: "select",
                 expr: { type: "field", tableAlias: "main", column: schema.getTable(design.table).primaryKey },
                 alias: "id"
-            },
+            }, // main primary key as id
             { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" },
             { type: "select", expr: widthExpr, alias: "width" } // Width of circles
         ];
@@ -592,7 +592,7 @@ marker-fill: ` +
                 // Scope to item
                 if (ids.length > 0) {
                     results.scope = {
-                        name: `Selected ${ids.length} Circle(s)`,
+                        name: T `Selected ${ids.length} Circle(s)`,
                         filter,
                         filterExpr,
                         data: ids
@@ -788,13 +788,13 @@ marker-fill: ` +
         const axisBuilder = new AxisBuilder_1.default({ schema });
         const exprValidator = new expressions_1.ExprValidator(schema);
         if (!design.table) {
-            return "Missing table";
+            return T `Missing table`;
         }
         if (design.radius == null) {
-            return "Missing radius";
+            return T `Missing radius`;
         }
         if (!design.axes || !design.axes.geometry) {
-            return "Missing axes";
+            return T `Missing axes`;
         }
         let error = axisBuilder.validateAxis({ axis: design.axes.geometry });
         if (error) {
@@ -802,7 +802,7 @@ marker-fill: ` +
         }
         // Check type of axis (prevents blank axes)
         if (axisBuilder.getAxisType(design.axes.geometry) != "geometry") {
-            return "Geometry axis required";
+            return T `Geometry axis required`;
         }
         error = axisBuilder.validateAxis({ axis: design.axes.color });
         if (error) {

package/lib/maps/BufferLayerDesignerComponent.js

@@ -77,7 +77,7 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
         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" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(expressions_ui_2.TableSelectComponent, {
+        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,
@@ -89,7 +89,7 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return;
         }
-        const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " Circle Centers");
+        const title = R("span", null, R("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);
@@ -110,7 +110,7 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
         })));
     }
     renderRadius() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Radius (meters)"), ": ", react_1.default.createElement(NumberInputComponent_1.default, {
+        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
         }));
@@ -123,7 +123,7 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
         return R("div", { className: "mb-3" }, react_1.default.createElement(bootstrap_1.Checkbox, {
             value: this.props.design.unionShapes,
             onChange: this.handleUnionShapesChange
-        }, "Combine circles (advanced)"));
+        }, T `Combine circles (advanced)`));
     }
     renderColor() {
         if (!this.props.design.axes.geometry) {
@@ -138,11 +138,11 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
             }
         }
         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" }), "Circle Color"), R("div", null, R(ColorComponent_1.default, {
+            ? 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" }), "Color By Data"), R(AxisComponent_1.default, {
+            : 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,
@@ -158,7 +158,7 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
         })));
     }
     renderFillOpacity() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Circle Opacity (%)"), ": ", react_1.default.createElement(rc_slider_1.default, {
+        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,
@@ -172,7 +172,7 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
         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" }), " Filters"), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(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 } }, react_1.default.createElement(expressions_ui_1.FilterExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             onChange: this.handleFilterChange,

package/lib/maps/ChoroplethLayer.js

@@ -220,7 +220,7 @@ class ChoroplethLayer extends Layer_1.default {
             paint: {
                 // Because of https://github.com/mapbox/mapbox-gl-js/issues/4090, line opacities < 1 create artifacts.
                 "line-color": design.borderColor || "#000",
-                "line-opacity": opacity,
+                "line-opacity": opacity, // 0.5 * opacity,
                 "line-width": 1,
                 "line-blur": 1.5
             }
@@ -523,7 +523,7 @@ class ChoroplethLayer extends Layer_1.default {
             paint: {
                 // Because of https://github.com/mapbox/mapbox-gl-js/issues/4090, line opacities < 1 create artifacts
                 "line-color": (0, mapboxUtils_1.compileColorToMapbox)(design.borderColor || "#000", design.axes.color?.excludedValues),
-                "line-opacity": opacity,
+                "line-opacity": opacity, // 0.5 * opacity,
                 "line-width": 1,
                 "line-blur": 1.5
             }
@@ -729,7 +729,7 @@ class ChoroplethLayer extends Layer_1.default {
             paint: {
                 // Because of https://github.com/mapbox/mapbox-gl-js/issues/4090, line opacities < 1 create artifacts.
                 "line-color": design.borderColor || "#000",
-                "line-opacity": opacity,
+                "line-opacity": opacity, // 0.5 * opacity,
                 "line-width": 1,
                 "line-blur": 1.5
             }
@@ -1457,10 +1457,10 @@ class ChoroplethLayer extends Layer_1.default {
         const exprValidator = new expressions_1.ExprValidator(schema);
         if (design.regionMode === "indirect") {
             if (!design.table) {
-                return "Missing table";
+                return T `Missing table`;
             }
             if (!design.adminRegionExpr || exprUtils.getExprType(design.adminRegionExpr) !== "id") {
-                return "Missing admin region expr";
+                return T `Missing admin region expr`;
             }
             error = axisBuilder.validateAxis({ axis: design.axes.color || null });
             if (error) {
@@ -1487,7 +1487,7 @@ class ChoroplethLayer extends Layer_1.default {
             }
         }
         if (design.detailLevel == null) {
-            return "Missing detail level";
+            return T `Missing detail level`;
         }
         return null;
     }

package/lib/maps/ChoroplethLayerDesigner.js

@@ -132,11 +132,11 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
     };
     renderRegionMode() {
         return (react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("label", { className: "text-muted" }, "Mode"),
+            react_1.default.createElement("label", { className: "text-muted" }, T `Mode`),
             react_1.default.createElement("div", { style: { marginLeft: 10 } },
-                react_1.default.createElement(ui.Radio, { inline: true, radioValue: "plain", value: this.props.design.regionMode, onChange: this.handleRegionModeChange }, "Single Color"),
-                react_1.default.createElement(ui.Radio, { inline: true, radioValue: "indirect", value: this.props.design.regionMode, onChange: this.handleRegionModeChange }, "Color By Data"),
-                react_1.default.createElement(ui.Radio, { inline: true, radioValue: "direct", value: this.props.design.regionMode, onChange: this.handleRegionModeChange }, "Advanced"))));
+                react_1.default.createElement(ui.Radio, { inline: true, radioValue: "plain", value: this.props.design.regionMode, onChange: this.handleRegionModeChange }, T `Single Color`),
+                react_1.default.createElement(ui.Radio, { inline: true, radioValue: "indirect", value: this.props.design.regionMode, onChange: this.handleRegionModeChange }, T `Color By Data`),
+                react_1.default.createElement(ui.Radio, { inline: true, radioValue: "direct", value: this.props.design.regionMode, onChange: this.handleRegionModeChange }, T `Advanced`))));
     }
     renderTable() {
         // Only for indirect
@@ -146,18 +146,18 @@ 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" }),
-                " 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() {
         let options = lodash_1.default.map(lodash_1.default.filter(this.props.schema.getTables(), table => table.id.startsWith("regions.")), table => ({ value: table.id, label: table.name.en }));
         const regionsTable = this.props.design.regionsTable || "admin_regions";
         return (react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("label", { className: "text-muted" }, "Regions Type"),
+            react_1.default.createElement("label", { className: "text-muted" }, T `Regions Type`),
             react_1.default.createElement("div", { style: { marginLeft: 8 } },
                 react_1.default.createElement("select", { value: regionsTable, onChange: ev => this.handleRegionsTableChange(ev.target.value), className: "form-select" },
-                    react_1.default.createElement("option", { value: "admin_regions" }, "Administrative Regions (from mWater global database)"),
-                    react_1.default.createElement("option", { disabled: true }, "\u2500\u2500 Custom regions (special regions uploaded for specific purposes) \u2500\u2500"),
+                    react_1.default.createElement("option", { value: "admin_regions" }, T `Administrative Regions (from mWater global database)`),
+                    react_1.default.createElement("option", { disabled: true }, T `── Custom regions (special regions uploaded for specific purposes) ──`),
                     options.map(opt => (react_1.default.createElement("option", { value: opt.value }, opt.label)))))));
     }
     renderAdminRegionExpr() {
@@ -173,7 +173,7 @@ 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" }),
-                " 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 }))));
     }
@@ -202,14 +202,14 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
         }
     }
     renderDisplayNames() {
-        return R("div", { className: "mb-3" }, react_1.default.createElement(ui.Checkbox, { value: this.props.design.displayNames, onChange: value => this.handleDisplayNamesChange(value) }, "Display Region Names"));
+        return R("div", { className: "mb-3" }, react_1.default.createElement(ui.Checkbox, { value: this.props.design.displayNames, onChange: value => this.handleDisplayNamesChange(value) }, T `Display Region Names`));
     }
     renderColor() {
         // Only if plain
         if (this.props.design.regionMode !== "plain") {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Fill Color"), R("div", null, R(ColorComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Fill Color`), R("div", null, R(ColorComponent_1.default, {
             color: this.props.design.color,
             onChange: this.handleColorChange
         })));
@@ -233,7 +233,7 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
                 }
             }
             const table = this.props.design.table;
-            return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"), R(AxisComponent_1.default, {
+            return R("div", null, 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,
@@ -273,7 +273,7 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
                     }
                 });
             }
-            return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"), R(AxisComponent_1.default, {
+            return R("div", null, 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: regionsTable,
@@ -307,7 +307,7 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
     //         showColorMap: true
     //         onChange: @handleColorAxisChange)
     renderFillOpacity() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, `Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`), ": ", R(rc_slider_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`), ": ", R(rc_slider_1.default, {
             min: 0,
             max: 100,
             step: 1,
@@ -317,7 +317,7 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
         }));
     }
     renderBorderColor() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Border Color"), R("div", null, R(ColorComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Border Color`), R("div", null, R(ColorComponent_1.default, {
             color: this.props.design.borderColor || "#000",
             onChange: this.handleBorderColorChange
         })));
@@ -327,7 +327,7 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
         if (this.props.design.regionMode !== "indirect" || !this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " 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,

package/lib/maps/ClusterLayer.js

@@ -724,10 +724,10 @@ class ClusterLayer extends Layer_1.default {
         const axisBuilder = new AxisBuilder_1.default({ schema });
         const exprValidator = new expressions_1.ExprValidator(schema);
         if (!design.table) {
-            return "Missing table";
+            return T `Missing table`;
         }
         if (!design.axes || !design.axes.geometry) {
-            return "Missing axes";
+            return T `Missing axes`;
         }
         let error = axisBuilder.validateAxis({ axis: design.axes.geometry });
         if (error) {
@@ -735,7 +735,7 @@ class ClusterLayer extends Layer_1.default {
         }
         // Check type of axis (prevents blank axes)
         if (axisBuilder.getAxisType(design.axes.geometry) != "geometry") {
-            return "Geometry axis required";
+            return T `Geometry axis required`;
         }
         // Validate filter
         error = exprValidator.validateExpr(design.filter || null);

package/lib/maps/ClusterLayerDesignerComponent.js

@@ -38,7 +38,7 @@ class ClusterLayerDesignerComponent extends react_1.default.Component {
         return this.update({ fillColor: color });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(expressions_ui_2.TableSelectComponent, {
+        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,
@@ -50,7 +50,7 @@ class ClusterLayerDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return;
         }
-        const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " Locations to Cluster");
+        const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " ", T `Locations to Cluster`);
         const filters = lodash_1.default.clone(this.props.filters) || [];
         if (this.props.design.filter != null) {
             const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
@@ -74,7 +74,7 @@ class ClusterLayerDesignerComponent extends react_1.default.Component {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Text Color"), R("div", null, R(ColorComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Text Color`), R("div", null, R(ColorComponent_1.default, {
             color: this.props.design.textColor,
             onChange: this.handleTextColorChange
         })));
@@ -83,7 +83,7 @@ class ClusterLayerDesignerComponent extends react_1.default.Component {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Marker Color"), R("div", null, R(ColorComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Marker Color`), R("div", null, R(ColorComponent_1.default, {
             color: this.props.design.fillColor,
             onChange: this.handleFillColorChange
         })));
@@ -93,7 +93,7 @@ class ClusterLayerDesignerComponent extends react_1.default.Component {
         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" }), " Filters"), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(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 } }, react_1.default.createElement(expressions_ui_1.FilterExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             onChange: this.handleFilterChange,

package/lib/maps/DetailLevelSelectComponent.d.ts

@@ -23,7 +23,17 @@ export default class DetailLevelSelectComponent extends React.Component<DetailLe
     componentWillMount(): any;
     componentWillReceiveProps(nextProps: any): any;
     loadLevels(props: any): any;
-    render(): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>> | React.DetailedReactHTMLElement<{
+    render(): React.FunctionComponentElement<{
+        value: {
+            label: string;
+            value: any;
+        } | null;
+        options: {
+            label: string;
+            value: any;
+        }[];
+        onChange: (opt: any) => any;
+    }> | React.DetailedReactHTMLElement<{
         className: string;
     }, HTMLElement>;
 }

package/lib/maps/DetailLevelSelectComponent.js

@@ -36,7 +36,7 @@ class DetailLevelSelectComponent extends react_1.default.Component {
         // Execute query
         return props.dataSource.performQuery(query, (err, rows) => {
             if (err) {
-                alert("Error loading detail levels");
+                alert(T `Error loading detail levels`);
                 return;
             }
             const countryId = rows[0].level0;
@@ -58,7 +58,7 @@ class DetailLevelSelectComponent extends react_1.default.Component {
             // Execute query
             return props.dataSource.performQuery(query, (err, rows) => {
                 if (err) {
-                    alert("Error loading detail levels");
+                    alert(T `Error loading detail levels`);
                     return;
                 }
                 // Only greater than current scope level
@@ -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" }), " Loading...");
+            return R("div", { className: "text-muted" }, R("i", { className: "fa fa-spinner fa-spin" }), T ` Loading...`);
         }
     }
 }

package/lib/maps/DirectMapDataSource.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDirectVectorTileUrl = void 0;
+exports.useDirectVectorTileUrl = useDirectVectorTileUrl;
 const lodash_1 = __importDefault(require("lodash"));
 const expressions_1 = require("@mwater/expressions");
 const BlocksLayoutManager_1 = __importDefault(require("../layouts/blocks/BlocksLayoutManager"));
@@ -124,7 +124,6 @@ function useDirectVectorTileUrl(options) {
     }, [expires]);
     return url;
 }
-exports.useDirectVectorTileUrl = useDirectVectorTileUrl;
 class DirectLayerDataSource {
     options;
     // Create map url source that uses direct jsonql maps

package/lib/maps/EditHoverOver.js

@@ -56,16 +56,18 @@ const EditHoverOver = props => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("button", { className: "btn btn-link", onClick: () => setEditing(true) },
             react_1.default.createElement("span", { className: "fa fa-pencil" }),
-            " Customize Hoverover"),
+            " ",
+            T `Customize Hoverover`),
         props.design.hoverOver && (react_1.default.createElement("button", { className: "btn btn-link", onClick: handleRemovePopup },
             react_1.default.createElement("span", { className: "fa fa-times" }),
-            " Remove Hover over")),
+            " ",
+            T `Remove Hover over`)),
         editing && (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, onRequestClose: () => setEditing(false) },
             (props.design.hoverOver?.items ?? []).length > 0 && (react_1.default.createElement("table", { className: "table" },
                 react_1.default.createElement("thead", null,
                     react_1.default.createElement("tr", null,
-                        react_1.default.createElement("th", null, "Label"),
-                        react_1.default.createElement("th", null, "Value"),
+                        react_1.default.createElement("th", null, T `Label`),
+                        react_1.default.createElement("th", null, T `Value`),
                         react_1.default.createElement("th", null))),
                 react_1.default.createElement("tbody", null, props.design.hoverOver?.items.map((item) => (react_1.default.createElement(HoverOverItemEditor, { schema: props.schema, dataSource: props.dataSource, table: props.design.table, onItemChange: handleItemChange, onItemDelete: handleItemDelete, item: item })))))),
             (props.design.hoverOver?.items ?? []).length < 3 && (react_1.default.createElement("button", { className: "btn btn-link", onClick: () => handleDesignChange([
@@ -73,7 +75,7 @@ const EditHoverOver = props => {
                     { id: (0, uuid_1.default)().replace(/-/g, ""), label: "" }
                 ]) },
                 react_1.default.createElement("span", { className: "fa fa-plus" }),
-                "Add item"))))));
+                T `Add item`))))));
 };
 const HoverOverItemEditor = ({ schema, dataSource, table, item, onItemChange, onItemDelete }) => {
     return (react_1.default.createElement("tr", null,

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" }), " Customize Popup"), this.props.design.popup
-            ? R("a", { className: "btn btn-link", onClick: this.handleRemovePopup }, R("i", { className: "fa fa-times" }), " 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,

package/lib/maps/GridLayer.js

@@ -636,19 +636,19 @@ class GridLayer extends Layer_1.default {
         const axisBuilder = new AxisBuilder_1.default({ schema });
         const exprValidator = new expressions_1.ExprValidator(schema);
         if (!design.shape) {
-            return "Missing shape";
+            return T `Missing shape`;
         }
         if (!design.table) {
-            return "Missing table";
+            return T `Missing table`;
         }
         if (!design.geometryExpr || exprUtils.getExprType(design.geometryExpr) !== "geometry") {
-            return "Missing geometry expr";
+            return T `Missing geometry expr`;
         }
         if (!design.size || !design.sizeUnits) {
-            return "Missing size";
+            return T `Missing size`;
         }
         if (!design.colorAxis) {
-            return "Missing color axis";
+            return T `Missing color axis`;
         }
         error = axisBuilder.validateAxis({ axis: design.colorAxis });
         if (error) {