@mwater/visualization 5.4.1 → 5.4.2

package/src/datagrids/{FindReplaceModalComponent.ts → FindReplaceModalComponent.tsx}

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import { default as ReactSelect } from "react-select"
 import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent"
 import DatagridViewComponent, { RowUpdate } from "./DatagridViewComponent"
@@ -47,14 +46,14 @@ export default class FindReplaceModalComponent extends React.Component<
   FindReplaceModalComponentProps,
   FindReplaceModalComponentState
 > {
-  constructor(props: any) {
+  constructor(props: FindReplaceModalComponentProps) {
     super(props)
 
     this.state = {
-      open: false, // True if modal is open
-      replaceColumn: null, // Column id to replace
-      withExpr: null, // Replace with expression
-      conditionExpr: null, // Condition expr
+      open: false,
+      replaceColumn: null,
+      withExpr: null,
+      conditionExpr: null,
       busy: false
     }
   }
@@ -222,24 +221,27 @@ export default class FindReplaceModalComponent extends React.Component<
       }
     })
 
-    return R(AutoSizeComponent, { injectWidth: true } as any, (size: any) => {
-      return R(DatagridViewComponent, {
-        width: size.width,
-        height: 400,
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        datagridDataSource: new DirectDatagridDataSource({
-          schema: this.props.schema,
-          dataSource: this.props.dataSource
-        }),
-        design,
-        filters: this.props.filters
-      })
-    })
+    return (
+      <AutoSizeComponent injectWidth={true}>
+        {(size: any) => {
+          return <DatagridViewComponent
+            width={size.width}
+            height={400}
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            datagridDataSource={new DirectDatagridDataSource({
+              schema: this.props.schema,
+              dataSource: this.props.dataSource
+            })}
+            design={design}
+            filters={this.props.filters}
+          />
+        }}
+      </AutoSizeComponent>
+    )
   }
 
   renderContents() {
-    let value
     const exprUtils = new ExprUtils(this.props.schema)
 
     // Determine which columns are replace-able. Excludes subtables and aggregates
@@ -254,80 +256,69 @@ export default class FindReplaceModalComponent extends React.Component<
 
     // Show progress
     if (this.state.busy) {
-      return R(
-        "div",
-        null,
-        R("h3", null, T`Working...`),
-        R(
-          "div",
-          { className: "progress" },
-          R("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: `100%` } })
-        )
+      return (
+        <div>
+          <h3>{T`Working...`}</h3>
+          <div className="progress">
+            <div className="progress-bar progress-bar-striped progress-bar-animated" style={{ width: "100%" }} />
+          </div>
+        </div>
       )
     }
 
-    return R(
-      "div",
-      null,
-      R(
-        "div",
-        { key: "replace", className: "mb-3" },
-        R("label", null, T`Column with data to replace` + ": "),
-        R(ReactSelect, {
-          options: replaceColumnOptions,
-          value: _.findWhere(replaceColumnOptions, { value: this.state.replaceColumn }) || null,
-          onChange: (opt: any) => this.setState({ replaceColumn: opt.value }),
-          placeholder: T`Select Column...`,
-          styles: {
-            // Keep menu above fixed data table headers
-            menu: style => _.extend({}, style, { zIndex: 2 })
-          }
-        })
-      ),
-
-      (() => {
-        if (this.state.replaceColumn) {
-          // Get expr of replace column
-          const replaceExpr = _.findWhere(this.props.design.columns, { id: this.state.replaceColumn })!.expr
-
-          return R(
-            "div",
-            { key: "with", className: "mb-3" },
-            R("label", null, T`Value to replace data with` + ": "),
-            R(ExprComponent, {
-              schema: this.props.schema,
-              dataSource: this.props.dataSource,
-              table: this.props.design.table!,
-              value: this.state.withExpr,
-              onChange: value => this.setState({ withExpr: value }),
-              types: [exprUtils.getExprType(replaceExpr)!],
-              enumValues: exprUtils.getExprEnumValues(replaceExpr) || undefined,
-              idTable: exprUtils.getExprIdTable(replaceExpr) || undefined,
-              preferLiteral: true,
-              placeholder: T`(Blank)`,
-              refExpr: replaceExpr
-            })
-          )
-        }
-        return null
-      })(),
-
-      R(
-        "div",
-        { key: "condition", className: "mb-3" },
-        R("label", null, T`Only in rows that (optional)` + ":"),
-        R(ExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: this.props.design.table!,
-          value: this.state.conditionExpr,
-          onChange: value => this.setState({ conditionExpr: value }),
-          types: ["boolean"],
-          placeholder: T`All Rows`
-        })
-      ),
-
-      R("div", { key: "preview" }, R("h4", null, T`Preview`), this.renderPreview())
+    return (
+      <div>
+        <div key="replace" className="mb-3">
+          <label>{T`Column with data to replace`}: </label>
+          <ReactSelect
+            options={replaceColumnOptions}
+            value={_.findWhere(replaceColumnOptions, { value: this.state.replaceColumn }) || null}
+            onChange={(opt: any) => this.setState({ replaceColumn: opt.value })}
+            placeholder={T`Select Column...`}
+            styles={{
+              // Keep menu above fixed data table headers
+              menu: style => _.extend({}, style, { zIndex: 2 })
+            }}
+          />
+        </div>
+
+        {this.state.replaceColumn ? (
+          <div key="with" className="mb-3">
+            <label>{T`Value to replace data with`}: </label>
+            <ExprComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              table={this.props.design.table!}
+              value={this.state.withExpr}
+              onChange={value => this.setState({ withExpr: value })}
+              types={[exprUtils.getExprType(_.findWhere(this.props.design.columns, { id: this.state.replaceColumn })!.expr)!]}
+              enumValues={exprUtils.getExprEnumValues(_.findWhere(this.props.design.columns, { id: this.state.replaceColumn })!.expr) || undefined}
+              idTable={exprUtils.getExprIdTable(_.findWhere(this.props.design.columns, { id: this.state.replaceColumn })!.expr) || undefined}
+              preferLiteral={true}
+              placeholder={T`(Blank)`}
+              refExpr={_.findWhere(this.props.design.columns, { id: this.state.replaceColumn })!.expr}
+            />
+          </div>
+        ) : null}
+
+        <div key="condition" className="mb-3">
+          <label>{T`Only in rows that (optional)`}:</label>
+          <ExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={this.props.design.table!}
+            value={this.state.conditionExpr}
+            onChange={value => this.setState({ conditionExpr: value })}
+            types={["boolean"]}
+            placeholder={T`All Rows`}
+          />
+        </div>
+
+        <div key="preview">
+          <h4>{T`Preview`}</h4>
+          {this.renderPreview()}
+        </div>
+      </div>
     )
   }
 
@@ -336,36 +327,32 @@ export default class FindReplaceModalComponent extends React.Component<
       return null
     }
 
-    return R(
-      ModalPopupComponent,
-      {
-        size: "large",
-        header: T`Find/Replace`,
-        footer: [
-          R(
-            "button",
-            {
-              key: "cancel",
-              type: "button",
-              onClick: () => this.setState({ open: false }),
-              className: "btn btn-secondary"
-            },
-            T`Cancel`
-          ),
-          R(
-            "button",
-            {
-              key: "apply",
-              type: "button",
-              disabled: !this.state.replaceColumn || this.state.busy,
-              onClick: () => this.performReplace(),
-              className: "btn btn-primary"
-            },
-            T`Apply`
-          )
-        ]
-      },
-      this.renderContents()
+    return (
+      <ModalPopupComponent
+        size="large"
+        header={T`Find/Replace`}
+        footer={[
+          <button
+            key="cancel"
+            type="button"
+            onClick={() => this.setState({ open: false })}
+            className="btn btn-secondary"
+          >
+            {T`Cancel`}
+          </button>,
+          <button
+            key="apply"
+            type="button"
+            disabled={!this.state.replaceColumn || this.state.busy}
+            onClick={() => this.performReplace()}
+            className="btn btn-primary"
+          >
+            {T`Apply`}
+          </button>
+        ]}
+      >
+        {this.renderContents()}
+      </ModalPopupComponent>
     )
   }
 }

package/src/index.css

@@ -434,7 +434,7 @@ Lato, Lora, Inter, Merriweather, Roboto
 .dropzone {
   width: 100%;
   padding: 80px 40px;
-  border: 2px dashed rgb(102, 102, 102);
+  border: 2px dashed var(--bs-border-color);
   border-radius: 5px;
   text-align: center;
   vertical-align: middle;

package/src/index.ts

@@ -45,7 +45,6 @@ export { WidgetDataSource } from "./widgets/WidgetDataSource"
 export { default as DirectWidgetDataSource } from "./widgets/DirectWidgetDataSource"
 
 import "leaflet/dist/leaflet.css"
-import "fixed-data-table-2/dist/fixed-data-table.min.css"
 import "rc-slider/assets/index.css"
 import "./layouts/decorated-block.css"
 import "react-datepicker/dist/react-datepicker.css"

package/src/layouts/blocks/HorizontalBlockComponent.ts

@@ -84,7 +84,7 @@ export default class HorizontalBlockComponent extends React.Component<
       dragXOffset = this.state.rightSize - 100
     }
 
-    return this.setState({ dragXOffset })
+    this.setState({ dragXOffset })
   }
 
   handleMouseUp = (ev: any) => {
@@ -93,7 +93,7 @@ export default class HorizontalBlockComponent extends React.Component<
     document.removeEventListener("mouseup", this.handleMouseUp)
 
     // Determine weights of two blocks
-    const weights = this.props.block.weights || []
+    const weights = [...(this.props.block.weights || [])]
     const newLeftSize = this.state.leftSize + this.state.dragXOffset
     const newRightSize = this.state.rightSize - this.state.dragXOffset
 

package/src/mWaterLoader.ts

@@ -14,7 +14,7 @@ export interface MWaterLoaderOptions {
   /** Load schema as a specific user (for shared dashboards, etc). optional */
   asUser?: string
   /** Extra tables to load in schema. Forms are not loaded by default as they are too many */
-  extraTables: string[]
+  extraTables?: string[]
   /** False to disable local caching of queries. Default true */
   localCaching?: boolean
   /** Locales of the schema to load. Default is all. */

package/src/maps/BufferLayer.ts

@@ -2,42 +2,24 @@ import _ from "lodash"
 import produce, { original } from "immer"
 import { JsonQLExpr, JsonQLQuery, JsonQLScalar, JsonQLSelect } from "@mwater/jsonql"
 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 { BufferLayerDesign } from "./BufferLayerDesign"
-import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef } from "./Layer"
+import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef, LegendOptions } from "./Layer"
 import { OnGridClickResults, OnGridHoverResults } from "./maps"
 import { compileColorMapToMapbox } from "./mapboxUtils"
 
-import LegendGroup from "./LegendGroup"
 import LayerLegendComponent from "./LayerLegendComponent"
 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"
 
-/*
-Layer which draws a buffer around geometries (i.e. a radius circle around points)
-
-Design is:
-  table: table to get data from
-  axes: axes (see below)
-  filter: optional logical expression to filter by
-  color: color of layer (e.g. #FF8800). Color axis overrides
-  fillOpacity: Opacity to fill the circles (0-1)
-  radius: radius to draw in meters
-  minZoom: minimum zoom level
-  maxZoom: maximum zoom level
-
-  popup: contains items: which is BlocksLayoutManager items. Will be displayed when the circle is clicked
-  popupFilterJoins: customizable filtering for popup. See PopupFilterJoins.md
-
-axes:
-  geometry: where to draw buffers around
-  color: color axis
-
-*/
+/** Layer which draws a buffer around geometries (i.e. a radius circle around points) */
 export default class BufferLayer extends Layer<BufferLayerDesign> {
   /** Gets the type of layer definition */
   getLayerDefinitionType(): "VectorTile" {
@@ -51,7 +33,7 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
     filters: JsonQLFilter[],
     opacity: number
   ): VectorTileDef {
-    const jsonql = this.createJsonQL(design, schema, filters)
+    const jsonql = this.createVectorJsonQL(design, schema, filters)
 
     const mapLayers: LayerSpecification[] = []
 
@@ -95,7 +77,7 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
     }
   }
 
-  createJsonQL(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery {
+  createVectorJsonQL(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery {
     let colorExpr: JsonQLExpr
     const axisBuilder = new AxisBuilder({ schema })
     const exprCompiler = new ExprCompiler(schema)
@@ -144,8 +126,15 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
     //       ST_Expand(ST_MakeEnvelope(-180, -85, 180, 85, 4326), -<radius in degrees>))
     //     , <radius in degrees>})
     //   , 3857)
-    // TODO document how we compute this
-    const radiusDeg = design.radius / 100000
+
+    // Get radius expression
+    const radiusCompiledExpr: JsonQLExpr = exprCompiler.compileExpr({
+      expr: design.radiusExpr ?? { type: "literal", valueType: "number", value: design.radius },
+      tableAlias: "main"
+    })
+
+    // Convert radius in meters to a maximum number of degrees latitude
+    const radiusDegCompiledExpr: JsonQLExpr = { type: "op", op: "/", exprs: [radiusCompiledExpr, 100000] }
 
     const boundingBox: JsonQLExpr = {
       type: "op",
@@ -163,11 +152,14 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
                 {
                   type: "op",
                   op: "ST_Expand",
-                  exprs: [{ type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] }, -radiusDeg]
+                  exprs: [
+                    { type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] },
+                    { type: "op", op: "*", exprs: [radiusDegCompiledExpr, -1] }
+                  ]
                 }
               ]
             },
-            radiusDeg
+            radiusDegCompiledExpr
           ]
         },
         3857
@@ -211,7 +203,7 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
       type: "op",
       op: "/",
       exprs: [
-        design.radius,
+        radiusCompiledExpr,
         {
           type: "op",
           op: "cos",
@@ -349,6 +341,15 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
     const axisBuilder = new AxisBuilder({ schema })
     const exprCompiler = new ExprCompiler(schema)
 
+    // Get radius expression
+    const radiusCompiledExpr: JsonQLExpr = exprCompiler.compileExpr({
+      expr: design.radiusExpr ?? { type: "literal", valueType: "number", value: design.radius },
+      tableAlias: "main"
+    })
+
+    // Convert radius in meters to a maximum number of degrees latitude
+    const radiusDegCompiledExpr: JsonQLExpr = { type: "op", op: "/", exprs: [radiusCompiledExpr, 100000] }
+
     /*
     Query:
       select
@@ -383,7 +384,7 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
           type: "op",
           op: "/",
           exprs: [
-            { type: "op", op: "*", exprs: [design.radius, 2] },
+            { type: "op", op: "*", exprs: [radiusCompiledExpr, 2] },
             {
               type: "op",
               op: "*",
@@ -438,16 +439,6 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
       from: exprCompiler.compileTable(design.table, "main")
     }
 
-    // ST_Transform(ST_Expand(
-    //     # Prevent 3857 overflow (i.e. > 85 degrees lat)
-    //     ST_Intersection(
-    //       ST_Transform(!bbox!, 4326),
-    //       ST_Expand(ST_MakeEnvelope(-180, -85, 180, 85, 4326), -<radius in degrees>))
-    //     , <radius in degrees>})
-    //   , 3857)
-    // TODO document how we compute this
-    const radiusDeg = design.radius / 100000
-
     const boundingBox: JsonQLExpr = {
       type: "op",
       op: "ST_Transform",
@@ -464,11 +455,14 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
                 {
                   type: "op",
                   op: "ST_Expand",
-                  exprs: [{ type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] }, -radiusDeg]
+                  exprs: [
+                    { type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] },
+                    { type: "op", op: "*", exprs: [radiusDegCompiledExpr, -1] }
+                  ]
                 }
               ]
             },
-            radiusDeg
+            radiusDegCompiledExpr
           ]
         },
         3857
@@ -662,7 +656,7 @@ marker-fill: ` +
           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)
 
@@ -679,10 +673,11 @@ marker-fill: ` +
               design: options.design,
               scope: null,
               filters,
-              onScopeChange: null,
-              onDesignChange: null,
+              onDesignChange: undefined,
               width: options.width,
-              height: options.height
+              height: options.height,
+              locale: clickOptions.locale,
+              translate: clickOptions.translate
             })
           }
         })
@@ -721,8 +716,11 @@ marker-fill: ` +
           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
         })
       }
 
@@ -773,14 +771,8 @@ marker-fill: ` +
 
   // Get the legend to be optionally displayed on the map. Returns
   // a React element
-  getLegend(
-    design: BufferLayerDesign,
-    schema: Schema,
-    name: string,
-    dataSource: DataSource,
-    locale: string,
-    filters: JsonQLFilter[]
-  ) {
+  getLegend(options: LegendOptions<BufferLayerDesign>): ReactNode {
+    const { design, schema, name, dataSource, locale, filters } = options
     const _filters = filters.slice()
     if (design.filter != null) {
       const exprCompiler = new ExprCompiler(schema)
@@ -865,7 +857,14 @@ marker-fill: ` +
       draft.color = design.color || "#0088FF"
 
       draft.axes = design.axes || {}
-      draft.radius = design.radius || 1000
+
+      // Default radius if both radius and radiusExpr are not specified
+      if (design.radius == null && design.radiusExpr == null) {
+        draft.radius = 1000
+        draft.radiusExpr = { type: "literal", valueType: "number", value: 1000 }
+      }
+
+      // Default fill opacity
       draft.fillOpacity = design.fillOpacity != null ? design.fillOpacity : 0.5
 
       draft.axes.geometry = axisBuilder.cleanAxis({
@@ -896,7 +895,7 @@ marker-fill: ` +
       return T`Missing table`
     }
 
-    if (design.radius == null) {
+    if (design.radius == null && design.radiusExpr == null) {
       return T`Missing radius`
     }
 
@@ -927,4 +926,28 @@ marker-fill: ` +
 
     return null
   }
+
+  /** Get strings to be translated */
+  getTranslatableStrings(design: BufferLayerDesign, 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/BufferLayerDesign.ts

@@ -1,48 +1,54 @@
 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 which draws a buffer around geometries (i.e. a radius circle around points) */
 export interface BufferLayerDesign {
-  /** table to get data from */
+  /** Table to get data from */
   table: string
 
-  /** axes (see below) */
+  /** Axes (see below) */
   axes: {
-    /** where to draw buffers around */
+    /** Where to draw buffers around */
     geometry: Axis | null
 
-    /** color axis */
+    /** Color axis */
     color: Axis | null
   }
 
-  /** optional logical expression to filter by */
+  /** Optional logical expression to filter by */
   filter?: Expr
 
-  /** color of layer (e.g. #FF8800). Color axis overrides */
+  /** Color of layer (e.g. #FF8800). Color axis overrides */
   color?: string
 
   /** Opacity to fill the circles (0-1) */
   fillOpacity: number
 
-  /** radius to draw in meters */
-  radius: number
+  /** Radius to draw in meters @deprecated use radiusExpr instead */
+  radius?: number
 
-  /** minimum zoom level */
+  /** Expression to get radius in meters */
+  radiusExpr?: Expr
+
+  /** Minimum zoom level */
   minZoom?: number
 
-  /** maximum zoom level */
+  /** Maximum zoom level */
   maxZoom?: number
 
   /** True to union circles together. Makes ids unavailable as geometries are combined.
    * Only implemented for vector tiles */
   unionShapes?: boolean
 
-  /** contains items: which is BlocksLayoutManager items. Will be displayed when the circle is clicked */
-  popup: any
+  /** Contains items: which is BlocksLayoutManager items. Will be displayed when the circle is clicked */
+  popup: { items: LayoutBlock }
 
+  /** Contains items: which is HoverOverItem[] */
   hoverOver: { items: HoverOverItem[] }
 
-  /** customizable filtering for popup. See PopupFilterJoins.md */
-  popupFilterJoins: any
+  /** Customizable filtering for popup. See PopupFilterJoins.md */
+  popupFilterJoins: PopupFilterJoins
 }