@mwater/visualization 5.4.1 → 5.4.2

package/src/maps/BufferLayerDesignerComponent.tsx

@@ -0,0 +1,309 @@
+import _ from "lodash"
+import React from "react"
+
+import { ExprComponent, FilterExprComponent } from "@mwater/expressions-ui"
+import { DataSource, Expr, OpExpr, Schema } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import AxisComponent from "../axes/AxisComponent"
+import ColorComponent from "../ColorComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
+import { default as Rcslider } from "rc-slider"
+import EditPopupComponent from "./EditPopupComponent"
+import ZoomLevelsComponent from "./ZoomLevelsComponent"
+import * as PopupFilterJoinsUtils from "./PopupFilterJoinsUtils"
+import { Checkbox } from "@mwater/react-library/lib/bootstrap"
+import { BufferLayerDesign } from "./BufferLayerDesign"
+import { JsonQLFilter } from "../JsonQLFilter"
+import { areVectorMapsEnabled } from "./vectorMaps"
+import EditHoverOver from "./EditHoverOver"
+
+export interface BufferLayerDesignerComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** Design of the design */
+  design: BufferLayerDesign
+  /** Called with new design */
+  onDesignChange: (design: BufferLayerDesign) => void
+  filters?: JsonQLFilter[]
+}
+
+export default class BufferLayerDesignerComponent extends React.Component<BufferLayerDesignerComponentProps> {
+  handleTableChange = (table: string) => {
+    this.props.onDesignChange({ ...this.props.design, table })
+  }
+
+  handleRadiusExprChange = (expr: Expr) => {
+    const radius = expr?.type === "literal" ? expr.value : null
+    this.props.onDesignChange({ ...this.props.design, radiusExpr: expr, radius })
+  }
+
+  handleGeometryAxisChange = (axis: any) => {
+    this.props.onDesignChange({ ...this.props.design, axes: { ...this.props.design.axes, geometry: axis } })
+  }
+
+  handleFilterChange = (filter: Expr) => {
+    this.props.onDesignChange({ ...this.props.design, filter })
+  }
+
+  handleColorChange = (color: string) => {
+    this.props.onDesignChange({ ...this.props.design, color })
+  }
+
+  handleColorAxisChange = (axis: any) => {
+    this.props.onDesignChange({ ...this.props.design, axes: { ...this.props.design.axes, color: axis } })
+  }
+
+  handleFillOpacityChange = (fillOpacity: number) => {
+    this.props.onDesignChange({ ...this.props.design, fillOpacity: fillOpacity / 100 })
+  }
+
+  handleUnionShapesChange = (unionShapes: boolean) => {
+    this.props.onDesignChange({ ...this.props.design, unionShapes })
+  }
+
+  renderTable() {
+    return (
+      <div className="mb-3">
+        <label className="text-muted"><i className="fa fa-database" /> {T`Data Source`}</label>
+        <div style={{ marginLeft: 10 }}>
+          <TableSelectComponent
+            schema={this.props.schema}
+            value={this.props.design.table}
+            onChange={this.handleTableChange}
+            filter={this.props.design.filter}
+            onFilterChange={this.handleFilterChange}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderGeometryAxis() {
+    if (!this.props.design.table) {
+      return
+    }
+
+    const title = (
+      <span>
+        <span className="fas fa-map-marker-alt" /> {T`Circle Centers`}
+      </span>
+    )
+
+    const filters = _.clone(this.props.filters) || []
+
+    if (this.props.design.filter != null) {
+      const exprCompiler = new ExprCompiler(this.props.schema)
+      const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" })
+      if (jsonql) {
+        filters.push({ table: (this.props.design.filter as OpExpr).table!, jsonql })
+      }
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{title}</label>
+        <div style={{ marginLeft: 10 }}>
+          <AxisComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={this.props.design.table}
+            types={["geometry"]}
+            aggrNeed="none"
+            value={this.props.design.axes.geometry}
+            onChange={this.handleGeometryAxisChange}
+            filters={filters}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderRadius() {
+    const radiusExpr = this.props.design.radiusExpr ?? { type: "literal", valueType: "number", value: this.props.design.radius }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Radius (meters)`}</label>: 
+        <ExprComponent
+          schema={this.props.schema}
+          value={radiusExpr}
+          onChange={this.handleRadiusExprChange}
+          dataSource={this.props.dataSource}
+          table={this.props.design.table}
+          types={["number"]}
+        />
+      </div>
+    )
+  }
+
+  renderUnionShapes() {
+    // Only implemented for vector maps
+    if (!areVectorMapsEnabled()) {
+      return null
+    }
+
+    return (
+      <div className="mb-3">
+        <Checkbox
+          value={this.props.design.unionShapes}
+          onChange={this.handleUnionShapesChange}
+        >
+          {T`Combine circles (advanced)`}
+        </Checkbox>
+      </div>
+    )
+  }
+
+  renderColor() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    const filters = _.clone(this.props.filters) || []
+
+    if (this.props.design.filter != null) {
+      const exprCompiler = new ExprCompiler(this.props.schema)
+      const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" })
+      if (jsonql) {
+        filters.push({ table: (this.props.design.filter as OpExpr).table!, jsonql })
+      }
+    }
+
+    return (
+      <div>
+        {!this.props.design.axes.color && (
+          <div className="mb-3">
+            <label className="text-muted">
+              <span className="fas fa-tint" />{T`Circle Color`}
+            </label>
+            <div>
+              <ColorComponent
+                color={this.props.design.color}
+                onChange={this.handleColorChange}
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="mb-3">
+          <label className="text-muted">
+            <span className="fas fa-tint" />{T`Color By Data`}
+          </label>
+          <AxisComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={this.props.design.table}
+            types={["text", "enum", "boolean", "date"]}
+            aggrNeed="none"
+            value={this.props.design.axes.color}
+            defaultColor={this.props.design.color}
+            showColorMap={true}
+            onChange={this.handleColorAxisChange}
+            allowExcludedValues={true}
+            reorderable={true}
+            filters={filters}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderFillOpacity() {
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Circle Opacity (%)`}</label>: 
+        <Rcslider
+          min={0}
+          max={100}
+          step={1}
+          tipTransitionName="rc-slider-tooltip-zoom-down"
+          value={this.props.design.fillOpacity * 100}
+          onChange={this.handleFillOpacityChange}
+        />
+      </div>
+    )
+  }
+
+  renderFilter() {
+    // If no data, hide
+    if (!this.props.design.axes.geometry) {
+      return null
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          <span className="fas fa-filter" />{T`Filters`}
+        </label>
+        <div style={{ marginLeft: 8 }}>
+          <FilterExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            onChange={this.handleFilterChange}
+            table={this.props.design.table}
+            value={this.props.design.filter}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderPopup() {
+    if (!this.props.design.table) {
+      return null
+    }
+
+    return (
+      <EditPopupComponent
+        design={this.props.design}
+        onDesignChange={this.props.onDesignChange}
+        schema={this.props.schema}
+        dataSource={this.props.dataSource}
+        table={this.props.design.table}
+        idTable={this.props.design.table}
+        defaultPopupFilterJoins={PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)}
+      />
+    )
+  }
+
+  renderHoverOver() {
+    if (!this.props.design.table) {
+      return null
+    }
+
+    return (
+      <EditHoverOver
+        design={this.props.design}
+        onDesignChange={this.props.onDesignChange}
+        schema={this.props.schema}
+        dataSource={this.props.dataSource}
+        table={this.props.design.table}
+        idTable={this.props.design.table}
+        defaultPopupFilterJoins={PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)}
+      />
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderTable()}
+        {this.renderGeometryAxis()}
+        {this.renderRadius()}
+        {this.renderUnionShapes()}
+        {this.renderColor()}
+        {this.renderFillOpacity()}
+        {this.renderFilter()}
+        {this.renderPopup()}
+        {this.renderHoverOver()}
+        {this.props.design.table && (
+          <ZoomLevelsComponent
+            design={this.props.design}
+            onDesignChange={this.props.onDesignChange}
+          />
+        )}
+      </div>
+    )
+  }
+}

package/src/maps/ChoroplethLayer.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 {
   ExprUtils,
   ExprCompiler,
@@ -26,6 +26,9 @@ import * as PopupFilterJoinsUtils from "./PopupFilterJoinsUtils"
 import { LayerSpecification } from "maplibre-gl"
 import HoverContent from "./HoverContent"
 import { getDefaultLayoutOptions } from "../dashboards/layoutOptions"
+import Widget from "../widgets/Widget"
+import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
+import { getTranslatableStringsFromLayoutManager } from "../dashboards/DashboardUtils"
 
 export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
   /** Gets the type of layer definition */
@@ -1336,7 +1339,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
           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
 
             // Create filters for single row
             const filters = clickOptions.filters.concat(popupFilters)
@@ -1354,10 +1357,10 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
               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
             })
           }
         })
@@ -1414,8 +1417,11 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
           key: ev.data.id,
           schema: hoverOptions.schema,
           dataSource: hoverOptions.dataSource,
-          design: hoverOptions.design,
-          filters: popupFilters
+          table,
+          items: hoverOptions.design.hoverOver.items,
+          filters: popupFilters,
+          locale: hoverOptions.locale,
+          translate: hoverOptions.translate
         })
       }
 
@@ -1489,17 +1495,8 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
 
   // Get the legend to be optionally displayed on the map. Returns
   // a React element
-  getLegend(
-    design: ChoroplethLayerDesign,
-    schema: Schema,
-    name: string,
-    dataSource: DataSource,
-    locale: string,
-    filters: JsonQLFilter[]
-  ) {
-    if (filters == null) {
-      filters = []
-    }
+  getLegend(options: LegendOptions<ChoroplethLayerDesign>): ReactNode {
+    const { design, schema, name, dataSource, locale, filters } = options
     const _filters = filters.slice()
     if (design.filter != null) {
       const exprCompiler = new ExprCompiler(schema)
@@ -1710,4 +1707,28 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       }
     })
   }
+
+  /** Get strings to be translated */
+  getTranslatableStrings(design: ChoroplethLayerDesign, 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)
+  }
 }

package/src/maps/ChoroplethLayerDesign.ts

@@ -1,6 +1,8 @@
 import { Expr } from "@mwater/expressions"
 import { Axis } from "../axes/Axis"
 import { HoverOverItem } from "./maps"
+import { LayoutBlock } from "../layouts/blocks/blockUtils"
+import { PopupFilterJoins } from "./PopupFilterJoinsUtils"
 
 /**
  * Layer that is composed of regions colored. Now extended to any other regions as well, so name
@@ -58,12 +60,12 @@ export default interface ChoroplethLayerDesign {
   displayNames: boolean
 
   /** contains items: which is BlocksLayoutManager items. Will be displayed when the region is clicked. Only when region mode is "indirect" */
-  popup: any
+  popup: { items: LayoutBlock }
 
   hoverOver: { items: HoverOverItem[] }
 
   /** customizable filtering for popup. See PopupFilterJoins.md. Only when region mode is "indirect"  */
-  popupFilterJoins: any
+  popupFilterJoins: PopupFilterJoins
 
   /** minimum zoom level */
   minZoom?: number

package/src/maps/ChoroplethLayerDesigner.tsx

@@ -173,7 +173,8 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       <div className="mb-3">
         <label className="text-muted">
           <i className="fa fa-database" />
-          {T` Data Source`}
+          {" "}
+          {T`Data Source`}
         </label>
         <TableSelectComponent
           schema={this.props.schema}
@@ -230,7 +231,8 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       <div className="mb-3">
         <label className="text-muted">
           <i className="fas fa-map-marker-alt" />
-          {T` Location`}
+          {" "}
+          {T`Location`}
         </label>
         <div style={{ marginLeft: 8 }}>
           <ExprComponent

package/src/maps/ClusterLayer.ts

@@ -2,11 +2,11 @@ import produce, { original } from "immer"
 import { JsonQLExpr, JsonQLQuery, JsonQLScalar } from "@mwater/jsonql"
 import _ from "lodash"
 import { DataSource, ExprCleaner, ExprCompiler, ExprValidator, injectTableAlias, Schema } from "@mwater/expressions"
-import React from "react"
+import React, { ReactNode } from "react"
 import { JsonQLFilter } from "../JsonQLFilter"
 import AxisBuilder from "../axes/AxisBuilder"
 import { ClusterLayerDesign } from "./ClusterLayerDesign"
-import Layer, { VectorTileDef } from "./Layer"
+import Layer, { LegendOptions, VectorTileDef } from "./Layer"
 import LayerLegendComponent from "./LayerLegendComponent"
 import { LayerSpecification } from "maplibre-gl"
 
@@ -705,14 +705,8 @@ export default class ClusterLayer extends Layer<ClusterLayerDesign> {
 
   // Get the legend to be optionally displayed on the map. Returns
   // a React element
-  getLegend(
-    design: ClusterLayerDesign,
-    schema: Schema,
-    name: string,
-    dataSource: DataSource,
-    locale: string,
-    filters: JsonQLFilter[] = []
-  ) {
+  getLegend(options: LegendOptions<ClusterLayerDesign>): ReactNode {
+    const { design, schema, name, dataSource, locale, filters } = options
     const _filters = filters.slice()
     if (design.filter != null) {
       const exprCompiler = new ExprCompiler(schema)

package/src/maps/DetailLevelSelectComponent.ts

@@ -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" }), T` Loading...`)
+      return R("div", { className: "text-muted" }, R("i", { className: "fa fa-spinner fa-spin" }), " ", T`Loading...`)
     }
   }
 }

package/src/maps/DirectMapDataSource.ts

@@ -161,7 +161,8 @@ async function getVectorTileFromDirectRequest(options: {
   }
   const { token, expires } = await response.json()
 
-  return { url: apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires }
+  // Client isn't necessary, but allows tracking of usage easier
+  return { url: apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}&client=${client ?? ""}`, expires }
 }
 
 /**

package/src/maps/EditPopupComponent.ts

@@ -56,7 +56,8 @@ export default class EditPopupComponent extends React.Component<EditPopupCompone
         "a",
         { className: "btn btn-link", onClick: () => this.setState({ editing: true }) },
         R("i", { className: "fa fa-pencil" }),
-        T` Customize Popup`
+        " ",
+        T`Customize Popup`
       ),
 
       this.props.design.popup
@@ -64,7 +65,8 @@ export default class EditPopupComponent extends React.Component<EditPopupCompone
             "a",
             { className: "btn btn-link", onClick: this.handleRemovePopup },
             R("i", { className: "fa fa-times" }),
-            T` Remove Popup`
+            " ",
+            T`Remove Popup`
           )
         : undefined,
 
@@ -107,10 +109,12 @@ export default class EditPopupComponent extends React.Component<EditPopupCompone
                   design: options.design,
                   scope: null,
                   filters: [],
-                  onScopeChange: () => {},
                   onDesignChange: options.onDesignChange,
                   width: options.width,
                   height: options.height,
+                  // TODO: fix
+                  locale: "en",
+                  translate: (input: string) => input,
                   singleRowTable: this.props.table
                 })
               }

package/src/maps/GridLayer.ts

@@ -1,7 +1,7 @@
 import _ from "lodash"
-import React from "react"
+import React, { ReactNode } from "react"
 
-import Layer, { VectorTileDef } from "./Layer"
+import Layer, { LegendOptions, VectorTileDef } from "./Layer"
 import {
   ExprUtils,
   ExprCompiler,
@@ -625,14 +625,8 @@ export default class GridLayer extends Layer<GridLayerDesign> {
 
   /** Get the legend to be optionally displayed on the map. Returns
    * a React element */
-  getLegend(
-    design: GridLayerDesign,
-    schema: Schema,
-    name: string,
-    dataSource: DataSource,
-    locale: string,
-    filters: JsonQLFilter[]
-  ) {
+  getLegend(options: LegendOptions<GridLayerDesign>): ReactNode {
+    const { design, schema, name, dataSource, locale, filters } = options
     const axisBuilder = new AxisBuilder({ schema })
 
     return React.createElement(LayerLegendComponent, {

package/src/maps/GridLayerDesigner.tsx

@@ -146,7 +146,8 @@ export default class GridLayerDesigner extends React.Component<{
       <div className="mb-3">
         <label className="text-muted">
           <i className="fa fa-database" />
-          {T` Data Source`}
+          {" "}
+          {T`Data Source`}
         </label>
         <TableSelectComponent
           schema={this.props.schema}
@@ -169,7 +170,8 @@ export default class GridLayerDesigner extends React.Component<{
       <div className="mb-3">
         <label className="text-muted">
           <i className="fas fa-map-marker-alt" />
-          {T` Location`}
+          {" "}
+          {T`Location`}
         </label>
         <div style={{ marginLeft: 8 }}>
           <ExprComponent
@@ -272,7 +274,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" }), T` Filters`),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T`Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },