@mwater/visualization 5.3.1 → 5.4.0

package/src/maps/ChoroplethLayerDesigner.tsx

@@ -135,28 +135,28 @@ export default class ChoroplethLayerDesigner extends React.Component<{
   renderRegionMode() {
     return (
       <div className="mb-3">
-        <label className="text-muted">Mode</label>
+        <label className="text-muted">{T`Mode`}</label>
         <div style={{ marginLeft: 10 }}>
           <ui.Radio
             inline
             radioValue="plain"
             value={this.props.design.regionMode}
             onChange={this.handleRegionModeChange}>
-            Single Color
+            {T`Single Color`}
           </ui.Radio>
           <ui.Radio
             inline
             radioValue="indirect"
             value={this.props.design.regionMode}
             onChange={this.handleRegionModeChange}>
-            Color By Data
+            {T`Color By Data`}
           </ui.Radio>
           <ui.Radio
             inline
             radioValue="direct"
             value={this.props.design.regionMode}
             onChange={this.handleRegionModeChange}>
-            Advanced
+            {T`Advanced`}
           </ui.Radio>
         </div>
       </div>
@@ -173,7 +173,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       <div className="mb-3">
         <label className="text-muted">
           <i className="fa fa-database" />
-          {" Data Source"}
+          {T` Data Source`}
         </label>
         <TableSelectComponent
           schema={this.props.schema}
@@ -196,14 +196,14 @@ export default class ChoroplethLayerDesigner extends React.Component<{
 
     return (
       <div className="mb-3">
-        <label className="text-muted">Regions Type</label>
+        <label className="text-muted">{T`Regions Type`}</label>
         <div style={{ marginLeft: 8 }}>
           <select
             value={regionsTable}
             onChange={ev => this.handleRegionsTableChange(ev.target.value)}
             className="form-select">
-            <option value="admin_regions">Administrative Regions (from mWater global database)</option>
-            <option disabled>── Custom regions (special regions uploaded for specific purposes) ──</option>
+            <option value="admin_regions">{T`Administrative Regions (from mWater global database)`}</option>
+            <option disabled>{T`── Custom regions (special regions uploaded for specific purposes) ──`}</option>
             {options.map(opt => (
               <option value={opt.value}>{opt.label}</option>
             ))}
@@ -230,7 +230,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       <div className="mb-3">
         <label className="text-muted">
           <i className="fas fa-map-marker-alt" />
-          {" Location"}
+          {T` Location`}
         </label>
         <div style={{ marginLeft: 8 }}>
           <ExprComponent
@@ -277,7 +277,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       "div",
       { className: "mb-3" },
       <ui.Checkbox value={this.props.design.displayNames} onChange={value => this.handleDisplayNamesChange(value)}>
-        Display Region Names
+        {T`Display Region Names`}
       </ui.Checkbox>
     )
   }
@@ -291,7 +291,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Fill Color"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Fill Color`),
 
       R(
         "div",
@@ -332,7 +332,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
         R(
           "div",
           { className: "mb-3" },
-          R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"),
+          R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color By Data`),
 
           R(AxisComponent, {
             schema: this.props.schema,
@@ -384,7 +384,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
         R(
           "div",
           { className: "mb-3" },
-          R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"),
+          R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color By Data`),
 
           R(AxisComponent, {
             schema: this.props.schema,
@@ -432,7 +432,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       R(
         "label",
         { className: "text-muted" },
-        `Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`
+        T`Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`
       ),
       ": ",
       R(Rcslider, {
@@ -450,7 +450,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Border Color"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Border Color`),
 
       R(
         "div",
@@ -472,7 +472,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " Filters"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T`Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },

package/src/maps/ClusterLayer.ts

@@ -810,11 +810,11 @@ export default class ClusterLayer extends Layer<ClusterLayerDesign> {
     const exprValidator = new 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 })
@@ -824,7 +824,7 @@ export default class ClusterLayer extends Layer<ClusterLayerDesign> {
 
     // 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

package/src/maps/ClusterLayerDesignerComponent.ts

@@ -54,7 +54,7 @@ export default class ClusterLayerDesignerComponent extends React.Component<Clust
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
       R(
         "div",
         { style: { marginLeft: 10 } },
@@ -74,7 +74,7 @@ export default class ClusterLayerDesignerComponent extends React.Component<Clust
       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 = _.clone(this.props.filters) || []
 
@@ -115,7 +115,7 @@ export default class ClusterLayerDesignerComponent extends React.Component<Clust
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Text Color"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Text Color`),
 
       R(
         "div",
@@ -136,7 +136,7 @@ export default class ClusterLayerDesignerComponent extends React.Component<Clust
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Marker Color"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Marker Color`),
 
       R(
         "div",
@@ -158,7 +158,7 @@ export default class ClusterLayerDesignerComponent extends React.Component<Clust
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " Filters"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T`Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },

package/src/maps/DetailLevelSelectComponent.ts

@@ -59,7 +59,7 @@ export default class DetailLevelSelectComponent extends React.Component<
     // Execute query
     return props.dataSource.performQuery(query, (err: any, rows: any) => {
       if (err) {
-        alert("Error loading detail levels")
+        alert(T`Error loading detail levels`)
         return
       }
 
@@ -84,7 +84,7 @@ export default class DetailLevelSelectComponent extends React.Component<
       // Execute query
       return props.dataSource.performQuery(query, (err: any, rows: any[]) => {
         if (err) {
-          alert("Error loading detail levels")
+          alert(T`Error loading detail levels`)
           return
         }
 
@@ -113,7 +113,7 @@ export default class DetailLevelSelectComponent extends React.Component<
         onChange: (opt: any) => this.props.onChange(opt.value)
       })
     } 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/src/maps/EditHoverOver.tsx

@@ -54,11 +54,11 @@ const EditHoverOver: React.FC<EditHoverOverProps> = props => {
   return (
     <>
       <button className="btn btn-link" onClick={() => setEditing(true)}>
-        <span className="fa fa-pencil" /> Customize Hoverover
+        <span className="fa fa-pencil" /> {T`Customize Hoverover`}
       </button>
       {props.design.hoverOver && (
         <button className="btn btn-link" onClick={handleRemovePopup}>
-          <span className="fa fa-times" /> Remove Hover over
+          <span className="fa fa-times" /> {T`Remove Hover over`}
         </button>
       )}
 
@@ -68,8 +68,8 @@ const EditHoverOver: React.FC<EditHoverOverProps> = props => {
             <table className="table">
               <thead>
                 <tr>
-                  <th>Label</th>
-                  <th>Value</th>
+                  <th>{T`Label`}</th>
+                  <th>{T`Value`}</th>
                   <th></th>
                 </tr>
               </thead>
@@ -98,7 +98,7 @@ const EditHoverOver: React.FC<EditHoverOverProps> = props => {
                 ])
               }>
               <span className="fa fa-plus" />
-              Add item
+              {T`Add item`}
             </button>
           )}
         </ModalWindowComponent>

package/src/maps/EditPopupComponent.ts

@@ -56,7 +56,7 @@ export default class EditPopupComponent extends React.Component<EditPopupCompone
         "a",
         { className: "btn btn-link", onClick: () => this.setState({ editing: true }) },
         R("i", { className: "fa fa-pencil" }),
-        " Customize Popup"
+        T` Customize Popup`
       ),
 
       this.props.design.popup
@@ -64,7 +64,7 @@ export default class EditPopupComponent extends React.Component<EditPopupCompone
             "a",
             { className: "btn btn-link", onClick: this.handleRemovePopup },
             R("i", { className: "fa fa-times" }),
-            " Remove Popup"
+            T` Remove Popup`
           )
         : undefined,
 

package/src/maps/GridLayer.ts

@@ -718,19 +718,19 @@ export default class GridLayer extends Layer<GridLayerDesign> {
     const exprValidator = new 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 as Axis })

package/src/maps/GridLayerDesigner.tsx

@@ -94,7 +94,7 @@ export default class GridLayerDesigner extends React.Component<{
   renderShape() {
     return (
       <div className="mb-3">
-        <label className="text-muted">Grid Type</label>
+        <label className="text-muted">{T`Grid Type`}</label>
         <div style={{ marginLeft: 10 }}>
           <ui.Toggle<"square" | "hex" | undefined>
             allowReset={false}
@@ -102,8 +102,8 @@ export default class GridLayerDesigner extends React.Component<{
             onChange={this.handleShapeChange}
             size="sm"
             options={[
-              { value: "hex", label: "Hexagonal" },
-              { value: "square", label: "Square" }
+              { value: "hex", label: T`Hexagonal` },
+              { value: "square", label: T`Square` }
             ]}
           />
         </div>
@@ -114,7 +114,7 @@ export default class GridLayerDesigner extends React.Component<{
   renderSize() {
     return (
       <div className="mb-3">
-        <label className="text-muted">Size</label>
+        <label className="text-muted">{T`Size`}</label>
         <div style={{ marginLeft: 10 }}>
           <div style={{ display: "inline-block" }}>
             <ui.NumberInput decimal={true} value={this.props.design.size} onChange={this.handleSizeChange} />
@@ -127,15 +127,14 @@ export default class GridLayerDesigner extends React.Component<{
               onChange={this.handleSizeUnitsChange}
               size="sm"
               options={[
-                { value: "pixels", label: "Pixels" },
-                { value: "meters", label: "Meters (approximate)" }
+                { value: "pixels", label: T`Pixels` },
+                { value: "meters", label: T`Meters (approximate)` }
               ]}
             />
           </div>
           &nbsp;
           <PopoverHelpComponent placement="bottom">
-            Pixel grids always appear to be the same size when zoomed. Meters are for a fixed-size grid and have limits
-            on how far the user can zoom out.
+            {T`Pixel grids always appear to be the same size when zoomed. Meters are for a fixed-size grid and have limits on how far the user can zoom out.`}
           </PopoverHelpComponent>
         </div>
       </div>
@@ -147,7 +146,7 @@ export default class GridLayerDesigner extends React.Component<{
       <div className="mb-3">
         <label className="text-muted">
           <i className="fa fa-database" />
-          {" Data Source"}
+          {T` Data Source`}
         </label>
         <TableSelectComponent
           schema={this.props.schema}
@@ -170,7 +169,7 @@ export default class GridLayerDesigner extends React.Component<{
       <div className="mb-3">
         <label className="text-muted">
           <i className="fas fa-map-marker-alt" />
-          {" Location"}
+          {T` Location`}
         </label>
         <div style={{ marginLeft: 8 }}>
           <ExprComponent
@@ -210,7 +209,7 @@ export default class GridLayerDesigner extends React.Component<{
       R(
         "div",
         { className: "mb-3" },
-        R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"),
+        R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color By Data`),
 
         R(AxisComponent, {
           schema: this.props.schema,
@@ -232,7 +231,7 @@ export default class GridLayerDesigner extends React.Component<{
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Fill Opacity (%)"),
+      R("label", { className: "text-muted" }, T`Fill Opacity (%)`),
       ": ",
       R(Rcslider, {
         min: 0,
@@ -248,7 +247,7 @@ export default class GridLayerDesigner extends React.Component<{
   renderBorderStyle() {
     return (
       <div className="mb-3">
-        <label className="text-muted">Border Style</label>
+        <label className="text-muted">{T`Border Style`}</label>
         <div style={{ marginLeft: 10 }}>
           <ui.Toggle<"none" | "color" | undefined>
             allowReset={false}
@@ -256,8 +255,8 @@ export default class GridLayerDesigner extends React.Component<{
             onChange={this.handleBorderStyleChange}
             size="sm"
             options={[
-              { value: "none", label: "None" },
-              { value: "color", label: "Line" }
+              { value: "none", label: T`None` },
+              { value: "color", label: T`Line` }
             ]}
           />
         </div>
@@ -273,7 +272,7 @@ export default class GridLayerDesigner extends React.Component<{
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " Filters"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T` Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },

package/src/maps/MWaterServerLayer.ts

@@ -90,7 +90,7 @@ interface LoadingLegendState {
 class LoadingLegend extends React.Component<LoadingLegendProps, LoadingLegendState> {
   constructor(props: any) {
     super(props)
-    this.state = { html: "Loading..." }
+    this.state = { html: T`Loading...` }
   }
 
   componentDidMount() {

package/src/maps/MapComponent.ts

@@ -15,7 +15,7 @@ import { JsonQLFilter } from "../JsonQLFilter"
 import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
 import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent"
 import { getCompiledFilters, getFilterableTables } from "./MapUtils"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface MapComponentProps {
   schema: Schema
@@ -123,7 +123,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
               className: `fa ${this.state.zoomLocked ? "fa-lock red" : "fa-unlock green"}`,
               style: { marginRight: 5 }
             }),
-            R(PopoverHelpComponent, { placement: "bottom" }, "Changes to zoom level wont be saved in locked mode")
+            R(PopoverHelpComponent, { placement: "bottom" }, T`Changes to zoom level wont be saved in locked mode`)
           ),
           R(
             "a",
@@ -133,7 +133,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
               onClick: this.handleUndo
             },
             R("span", { className: "fas fa-caret-left" }),
-            R("span", { className: "hide-600px" }, " Undo")
+            R("span", { className: "hide-600px" }, T` Undo`)
           ),
           " ",
           R(
@@ -144,7 +144,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
               onClick: this.handleRedo
             },
             R("span", { className: "fas fa-caret-right" }),
-            R("span", { className: "hide-600px" }, " Redo")
+            R("span", { className: "hide-600px" }, T` Redo`)
           )
         ]
         : undefined,
@@ -153,11 +153,11 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
         "a",
         { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
         R("span", { className: "fa fa-filter" }),
-        R("span", { className: "hide-600px" }, " Show Quickfilters")
+        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: "Toggle design panel" },
+      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/src/maps/MapControlComponent.ts

@@ -34,7 +34,7 @@ export default class MapControlComponent extends React.Component<MapControlCompo
       R(
         "div",
         { className: "mb-3" },
-        R("label", { className: "text-muted" }, "Map Style"),
+        R("label", { className: "text-muted" }, T`Map Style`),
 
         R(BaseLayerDesignerComponent, {
           design: this.props.design,

package/src/maps/MapDesignerComponent.tsx

@@ -83,11 +83,11 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
         R(
           "span",
           { className: "text-muted" },
-          "Automatic zoom ",
+          T`Automatic zoom `,
           R(
             PopoverHelpComponent,
             { placement: "left" },
-            "Automatically zoom to the complete data whenever the map is loaded or the filters change"
+            T`Automatically zoom to the complete data whenever the map is loaded or the filters change`
           )
         )
       ),
@@ -101,21 +101,21 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
         R(
           "span",
           { className: "text-muted" },
-          "Show Layer Switcher ",
-          R(PopoverHelpComponent, { placement: "left" }, "Show a control in the map allowing switching layers")
+          T`Show Layer Switcher `,
+          R(PopoverHelpComponent, { placement: "left" }, T`Show a control in the map allowing switching layers`)
         )
       ),
 
       R(
         ui.FormGroup,
-        { label: "Initial Legend Display", labelMuted: true },
+        { label: T`Initial Legend Display`, labelMuted: true },
         R(ui.Select, {
           value: this.props.design.initialLegendDisplay || "open",
           onChange: this.handleInitialLegendDisplayChange,
           options: [
-            { value: "open", label: "Open" },
-            { value: "closed", label: "Closed" },
-            { value: "closedIfSmall", label: "Open if wide enough" }
+            { value: "open", label: T`Open` },
+            { value: "closed", label: T`Closed` },
+            { value: "closedIfSmall", label: T`Open if wide enough` }
           ],
           style: { width: "auto" }
         })
@@ -128,7 +128,7 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
           R(
             "a",
             { onClick: this.handleConvertToClusterMap, className: "btn btn-link btn-sm" },
-            "Convert to cluster map"
+            T`Convert to cluster map`
           )
         )
         : undefined,
@@ -140,7 +140,7 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
           R(
             "a",
             { onClick: this.handleConvertToMarkersMap, className: "btn btn-link btn-sm" },
-            "Convert to markers map"
+            T`Convert to markers map`
           )
         )
         : undefined,
@@ -172,7 +172,7 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
     const tabs: TabbedComponentTab[] = [
       {
         id: "layers",
-        label: [R("i", { className: "fa fa-bars" }), " Layers"],
+        label: [R("i", { className: "fa fa-bars" }), T` Layers`],
         elem: R(MapLayersDesignerComponent, {
           schema: this.props.schema,
           dataSource: this.props.dataSource,
@@ -184,7 +184,7 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
       },
       {
         id: "filters",
-        label: [R("i", { className: "fa fa-filter" }), " Filters"],
+        label: [R("i", { className: "fa fa-filter" }), T` Filters`],
         elem: R(MapFiltersDesignerComponent, {
           schema: this.props.schema,
           dataSource: this.props.dataSource,
@@ -194,7 +194,7 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
       },
       {
         id: "options",
-        label: [R("i", { className: "fa fa-cog" }), " Options"],
+        label: [R("i", { className: "fa fa-cog" }), T` Options`],
         elem: this.renderOptionsTab()
       }
     ]
@@ -202,7 +202,7 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
     if (this.props.enableQuickfilters) {
       tabs.splice(2, 0, {
         id: "quickfilters",
-        label: [R("i", { className: "fa fa-bolt" }), " ", T("Quickfilters")],
+        label: [R("i", { className: "fa fa-bolt" }), " ", T`Quickfilters`],
         elem: R(
           "div",
           { style: { marginBottom: 200 } },
@@ -282,11 +282,11 @@ class AttributionComponent extends React.Component<AttributionComponentProps, At
         ? 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" }, "+ Add attribution")
+          : R("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" }, "Attribution"), elem)
+      elem = R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T`Attribution`), elem)
     }
 
     return elem
@@ -320,7 +320,7 @@ class AdvancedOptionsComponent extends React.Component<AdvancedOptionsComponentP
         R(
           "a",
           { className: "btn btn-link btn-sm", onClick: () => this.setState({ expanded: true }) },
-          "Advanced options..."
+          T`Advanced options...`
         )
       )
     }
@@ -328,17 +328,17 @@ class AdvancedOptionsComponent extends React.Component<AdvancedOptionsComponentP
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Advanced"),
+      R("label", { className: "text-muted" }, T`Advanced`),
 
       R(
         "div",
         null,
-        R("span", { className: "text-muted" }, "Maximum Zoom Level: "),
+        R("span", { className: "text-muted" }, T`Maximum Zoom Level: `),
         " ",
         R(NumberInputComponent, {
           small: true,
           style: { display: "inline-block" },
-          placeholder: "None",
+          placeholder: T`None`,
           value: this.props.design.maxZoom,
           onChange: (v: any) => this.props.onDesignChange(_.extend({}, this.props.design, { maxZoom: v }))
         })

package/src/maps/MapFiltersDesignerComponent.tsx

@@ -46,11 +46,11 @@ export default class MapFiltersDesignerComponent extends React.Component<MapFilt
         R(
           "label",
           { className: "text-muted" },
-          "Filters ",
+          T`Filters `,
           R(
             PopoverHelpComponent,
             { placement: "left" },
-            "Filters all layers in the map. Individual layers can be filtered by clicking on Customize..."
+            T`Filters all layers in the map. Individual layers can be filtered by clicking on Customize...`
           )
         ),
 
@@ -73,7 +73,7 @@ export default class MapFiltersDesignerComponent extends React.Component<MapFilt
             ? R(
                 "div",
                 { className: "mb-3" },
-                R("label", { className: "text-muted" }, "Global Filters "),
+                R("label", { className: "text-muted" }, T`Global Filters `),
 
                 R(
                   "div",