@mwater/visualization 5.4.0 → 5.4.2

package/src/maps/MapDesignerComponent.tsx

@@ -1,6 +1,6 @@
 import _ from "lodash"
 import PropTypes from "prop-types"
-import React, { ReactElement } from "react"
+import React, { ReactElement, ReactNode } from "react"
 const R = React.createElement
 
 import TabbedComponent, { TabbedComponentTab } from "@mwater/react-library/lib/TabbedComponent"
@@ -37,16 +37,21 @@ export interface MapDesignerComponentProps {
 }
 
 export default class MapDesignerComponent extends React.Component<MapDesignerComponentProps> {
-  handleAttributionChange = (text: any) => {
+  handleAttributionChange = (text: string | undefined) => {
     const design = { ...this.props.design, attribution: text }
     return this.props.onDesignChange(design)
   }
 
-  handleAutoBoundsChange = (value: any) => {
+  handleAutoBoundsChange = (value: boolean) => {
     const design = { ...this.props.design, autoBounds: value }
     return this.props.onDesignChange(design)
   }
 
+  handleAnimateAutoBoundsChange = (value: boolean) => {
+    const design = { ...this.props.design, animateAutoBounds: value }
+    return this.props.onDesignChange(design)
+  }
+
   handleShowLayerSwitcherChange = (value: any) => {
     const design = { ...this.props.design, showLayerSwitcher: value }
     return this.props.onDesignChange(design)
@@ -66,96 +71,90 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
   }
 
   renderOptionsTab() {
-    return R(
-      "div",
-      null,
-      R(BaseLayerDesignerComponent, {
-        design: this.props.design,
-        onDesignChange: this.props.onDesignChange
-      }),
-
-      R(
-        CheckboxComponent,
-        {
-          checked: this.props.design.autoBounds,
-          onChange: this.handleAutoBoundsChange
-        },
-        R(
-          "span",
-          { className: "text-muted" },
-          T`Automatic zoom `,
-          R(
-            PopoverHelpComponent,
-            { placement: "left" },
-            T`Automatically zoom to the complete data whenever the map is loaded or the filters change`
-          )
-        )
-      ),
-
-      R(
-        CheckboxComponent,
-        {
-          checked: this.props.design.showLayerSwitcher,
-          onChange: this.handleShowLayerSwitcherChange
-        },
-        R(
-          "span",
-          { className: "text-muted" },
-          T`Show Layer Switcher `,
-          R(PopoverHelpComponent, { 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 (
+      <div>
+        <BaseLayerDesignerComponent
+          design={this.props.design}
+          onDesignChange={this.props.onDesignChange}
+        />
+
+        <CheckboxComponent
+          checked={this.props.design.autoBounds}
+          onChange={this.handleAutoBoundsChange}
+        >
+          <span className="text-muted">
+            {T`Automatic zoom`}
+            {" "}
+            <PopoverHelpComponent placement="left">
+              {T`Automatically zoom to the complete data whenever the map is loaded or the filters change`}
+            </PopoverHelpComponent>
+          </span>
+        </CheckboxComponent>
+
+        {this.props.design.autoBounds && (
+          <CheckboxComponent
+            checked={this.props.design.animateAutoBounds ?? true}
+            onChange={this.handleAnimateAutoBoundsChange}
+          >
+            <span className="text-muted">
+              {T`Animate automatic zoom`}
+            </span>
+          </CheckboxComponent>
+        )}
+
+        <CheckboxComponent
+          checked={this.props.design.showLayerSwitcher}
+          onChange={this.handleShowLayerSwitcherChange}
+        >
+          <span className="text-muted">
+            {T`Show Layer Switcher `}
+            <PopoverHelpComponent placement="left">
+              {T`Show a control in the map allowing switching layers`}
+            </PopoverHelpComponent>
+          </span>
+        </CheckboxComponent>
+
+        <ui.FormGroup label={T`Initial Legend Display`} labelMuted>
+          <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" }}
+          />
+        </ui.FormGroup>
+
+        {MapUtils.canConvertToClusterMap(this.props.design) ? (
+          <div key="tocluster">
+            <a onClick={this.handleConvertToClusterMap} className="btn btn-link btn-sm">
+              {T`Convert to cluster map`}
+            </a>
+          </div>
+        ) : undefined}
+
+        {MapUtils.canConvertToMarkersMap(this.props.design) ? (
+          <div key="toMarker">
+            <a onClick={this.handleConvertToMarkersMap} className="btn btn-link btn-sm">
+              {T`Convert to markers map`}
+            </a>
+          </div>
+        ) : undefined}
+
+        <AttributionComponent
+          text={this.props.design.attribution}
+          onTextChange={this.handleAttributionChange}
+        />
+
+        <br />
+
+        <AdvancedOptionsComponent
+          design={this.props.design}
+          onDesignChange={this.props.onDesignChange}
+        />
+      </div>
     )
   }
 
@@ -172,29 +171,29 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
     const tabs: TabbedComponentTab[] = [
       {
         id: "layers",
-        label: [R("i", { className: "fa fa-bars" }), T` Layers`],
-        elem: R(MapLayersDesignerComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          design: this.props.design,
-          onDesignChange: this.props.onDesignChange,
-          allowEditingLayers: true,
-          filters: _.compact(filters)
-        })
+        label: <><i className="fa fa-bars" /> {T`Layers`}</>,
+        elem: <MapLayersDesignerComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          design={this.props.design}
+          onDesignChange={this.props.onDesignChange}
+          allowEditingLayers={true}
+          filters={_.compact(filters)}
+        />
       },
       {
         id: "filters",
-        label: [R("i", { className: "fa fa-filter" }), T` Filters`],
-        elem: R(MapFiltersDesignerComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          design: this.props.design,
-          onDesignChange: this.props.onDesignChange
-        })
+        label: <><i className="fa fa-filter" /> {T`Filters`}</>,
+        elem: <MapFiltersDesignerComponent
+          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: <><i className="fa fa-cog" /> {T`Options`}</>,
         elem: this.renderOptionsTab()
       }
     ]
@@ -202,22 +201,20 @@ 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`],
-        elem: R(
-          "div",
-          { style: { marginBottom: 200 } },
-          R(QuickfiltersDesignComponent, {
-            design: this.props.design.quickfilters || [],
-            onDesignChange: (qfDesign) => {
+        label: <><i className="fa fa-bolt" /> {T`Quickfilters`}</>,
+        elem: <div style={{ marginBottom: 200 }}>
+          <QuickfiltersDesignComponent
+            design={this.props.design.quickfilters || []}
+            onDesignChange={(qfDesign) => {
               this.props.onDesignChange(produce(this.props.design, (draft) => {
                 draft.quickfilters = qfDesign
               }))
-            },
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            tables: filterableTables
-          })
-        )
+            }}
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            tables={filterableTables}
+          />
+        </div>
       })
     }
 
@@ -263,10 +260,10 @@ class AttributionComponent extends React.Component<AttributionComponentProps, At
   }
 
   renderEditor() {
-    return R(
-      ClickOutHandler,
-      { onClickOut: this.handleClickOut },
-      R("input", { onChange: this.handleTextChange, value: this.props.text, className: "form-control" })
+    return (
+      <ClickOutHandler onClickOut={this.handleClickOut}>
+        <input onChange={this.handleTextChange} value={this.props.text} className="form-control" />
+      </ClickOutHandler>
     )
   }
 
@@ -275,18 +272,29 @@ class AttributionComponent extends React.Component<AttributionComponentProps, At
   }
 
   render() {
-    let elem: ReactElement = 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 = (
+      <div style={{ marginLeft: 5 }}>
+        {this.state.editing ? (
+          this.renderEditor()
+        ) : this.props.text ? (
+          <span onClick={this.handleTextClick} style={{ cursor: "pointer" }}>
+            {this.props.text}
+          </span>
+        ) : (
+          <a onClick={this.handleTextClick} className="btn btn-link btn-sm">
+            {T`+ Add attribution`}
+          </a>
+        )}
+      </div>
     )
 
     if (this.props.text || this.state.editing) {
-      elem = R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T`Attribution`), elem)
+      elem = (
+        <div className="mb-3">
+          <label className="text-muted">{T`Attribution`}</label>
+          {elem}
+        </div>
+      )
     }
 
     return elem
@@ -314,35 +322,30 @@ class AdvancedOptionsComponent extends React.Component<AdvancedOptionsComponentP
 
   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 (
+        <div>
+          <a className="btn btn-link btn-sm" onClick={() => this.setState({ expanded: true })}>
+            {T`Advanced options...`}
+          </a>
+        </div>
       )
     }
 
-    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, {
-          small: true,
-          style: { display: "inline-block" },
-          placeholder: T`None`,
-          value: this.props.design.maxZoom,
-          onChange: (v: any) => this.props.onDesignChange(_.extend({}, this.props.design, { maxZoom: v }))
-        })
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Advanced`}</label>
+        <div>
+          <span className="text-muted">{T`Maximum Zoom Level: `}</span>{" "}
+          <ui.NumberInput
+            decimal={false}
+            size="sm"
+            style={{ display: "inline-block" }}
+            placeholder={T`None`}
+            value={this.props.design.maxZoom}
+            onChange={(v: any) => this.props.onDesignChange(_.extend({}, this.props.design, { maxZoom: v }))}
+          />
+        </div>
+      </div>
     )
   }
 }

package/src/maps/MapLayerViewDesignerComponent.ts

@@ -161,8 +161,8 @@ export default class MapLayerViewDesignerComponent extends React.Component<
         "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...`]
       )
     )
   }

package/src/maps/MapUtils.ts

@@ -6,6 +6,7 @@ import { Expr, ExprCleaner, ExprCompiler, ExprUtils, FieldExpr, Schema } from "@
 import { JsonQLFilter } from "../JsonQLFilter"
 import LayerFactory from "./LayerFactory"
 import { MapDesign } from "./MapDesign"
+import { produce } from "immer"
 
 export interface MapScope {
   name: string
@@ -146,3 +147,26 @@ export function getCompiledFilters(
 
   return compiledFilters
 }
+
+/**
+ * Get a list of translatable strings in the map design
+ */
+export function getTranslatableStrings(design: MapDesign, schema: Schema): string[] {
+  const strings: string[] = []
+
+  // 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.createLayer(layerView.type)
+
+    // Get the translatable strings from the layer design
+    const layerStrings = layer.getTranslatableStrings(layerView.design, schema)
+    strings.push(...layerStrings)
+  }
+
+  // Remove duplicates
+  return _.uniq(strings)
+}

package/src/maps/MapViewComponent.tsx

@@ -9,8 +9,7 @@ import { MapScope } from "./MapUtils"
 import RasterMapViewComponent from "./RasterMapViewComponent"
 import { areVectorMapsEnabled } from "./vectorMaps"
 
-/** Component that displays just the map */
-export function MapViewComponent(props: {
+export interface MapViewComponentProps {
   schema: Schema
   dataSource: DataSource
   mapDataSource: MapDataSource
@@ -51,9 +50,18 @@ export function MapViewComponent(props: {
   /** Locale to use. Overrides map design locale */
   locale?: string
 
+  /** Translate function to use for display. TODO: implement this */
+  translate?: (input: string) => string
+
+  /** Increment to force refresh */
+  refreshTrigger?: number
+
   /** Whether to disable interaction or not. Default false (implemented for printing to reduce number of tiles request) */
   disableInteraction?: boolean
-}) {
+}
+
+/** Component that displays just the map */
+export function MapViewComponent(props: MapViewComponentProps) {
   if (areVectorMapsEnabled()) {
     return <VectorMapViewComponent {...props} />
   } else {

package/src/maps/MarkersLayer.ts

@@ -1,9 +1,9 @@
 import _ from "lodash"
-import React from "react"
+import React, { ReactNode } from "react"
 
 import { original, produce } from "immer"
 
-import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef } from "./Layer"
+import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef, LegendOptions } from "./Layer"
 import { ExprCompiler, ExprCleaner, injectTableAlias, Schema, DataSource, ExprValidator } from "@mwater/expressions"
 import AxisBuilder from "../axes/AxisBuilder"
 import { OnGridClickResults, OnGridHoverResults } from "./maps"
@@ -16,6 +16,10 @@ import * as PopupFilterJoinsUtils from "./PopupFilterJoinsUtils"
 import { ExpressionSpecification, FilterSpecification, LayerSpecification } from "maplibre-gl"
 import HoverContent from "./HoverContent"
 import { getDefaultLayoutOptions } from "../dashboards/layoutOptions"
+import Widget from "../widgets/Widget"
+import { WidgetDataSource } from "../widgets/WidgetDataSource"
+import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
+import { getTranslatableStringsFromLayoutManager } from "../dashboards/DashboardUtils"
 
 export default class MarkersLayer extends Layer<MarkersLayerDesign> {
   /** Gets the type of layer definition */
@@ -479,7 +483,8 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
           key: ev.data.id,
           schema: hoverOptions.schema,
           dataSource: hoverOptions.dataSource,
-          design: hoverOptions.design,
+          table,
+          items: hoverOptions.design.hoverOver.items,
           filters: [
             {
               table,
@@ -492,7 +497,9 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
                 ]
               }
             }
-          ]
+          ],
+          locale: hoverOptions.locale,
+          translate: hoverOptions.translate
         })
       }
 
@@ -581,12 +588,12 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
           items: clickOptions.design.popup.items,
           layoutOptions: getDefaultLayoutOptions("default"),
           renderWidget: (options: any) => {
-            const widget = WidgetFactory.createWidget(options.type)
+            const widget = WidgetFactory.createWidget(options.type) as Widget
 
             const filters = clickOptions.filters.concat(popupFilters)
 
             // Get data source for widget
-            const widgetDataSource = clickOptions.layerDataSource.getPopupWidgetDataSource(
+            const widgetDataSource: WidgetDataSource = clickOptions.layerDataSource.getPopupWidgetDataSource(
               clickOptions.design,
               options.id
             )
@@ -598,10 +605,10 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
               design: options.design,
               scope: null,
               filters,
-              onScopeChange: null,
-              onDesignChange: null,
               width: options.width,
-              height: options.height
+              height: options.height,
+              locale: clickOptions.locale,
+              translate: clickOptions.translate
             })
           }
         })
@@ -644,14 +651,8 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
 
   // Get the legend to be optionally displayed on the map. Returns
   // a React element
-  getLegend(
-    design: MarkersLayerDesign,
-    schema: Schema,
-    name: string,
-    dataSource: DataSource,
-    locale: string,
-    filters: JsonQLFilter[]
-  ) {
+  getLegend(options: LegendOptions<MarkersLayerDesign>): ReactNode {
+    const { design, schema, name, dataSource, locale, filters, translate } = options
     const _filters = filters.slice()
     if (design.filter != null) {
       const exprCompiler = new ExprCompiler(schema)
@@ -667,7 +668,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
       defaultColor: design.color,
       symbol: design.symbol || "font-awesome/circle",
       markerSize: design.markerSize,
-      name,
+      name: translate(name),
       filters: _.compact(_filters),
       axis: axisBuilder.cleanAxis({
         axis: design.axes.color || null,
@@ -793,6 +794,30 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
 
     return null
   }
+
+  /** Get strings to be translated */
+  getTranslatableStrings(design: MarkersLayerDesign, schema: Schema): string[] {
+    const strings: string[] = []
+
+    // Add strings from hoverOver items
+    if (design.hoverOver && design.hoverOver.items) {
+      for (const item of design.hoverOver.items) {
+        if (item.label) {
+          strings.push(item.label)
+        }
+      }
+    }
+
+    // Add strings from popup items using a layout manager approach
+    if (design.popup && design.popup.items) {
+      const layoutManager = new BlocksLayoutManager()
+      const popupStrings = getTranslatableStringsFromLayoutManager(layoutManager, design.popup.items, schema)
+      strings.push(...popupStrings)
+    }
+
+    // Remove duplicates
+    return _.uniq(strings)
+  }
 }
 
 /**
@@ -936,3 +961,4 @@ export function createMarkersVectorQuery(baseQuery: JsonQLSelectQuery) {
 
   return outerquery
 }
+