@mwater/visualization 5.4.4 → 5.5.0

package/src/datagrids/ExprCellComponent.tsx

@@ -39,51 +39,54 @@ export default class ExprCellComponent extends React.Component<ExprCellComponent
     return <a href={url} key={id} target="_blank" style={{ paddingLeft: 5, paddingRight: 5 }}>{T`Image`}</a>
   }
 
-  render() {
-    let node
-    const exprUtils = new ExprUtils(this.props.schema)
+  renderCellContent() {
     let { value } = this.props
 
+    const exprUtils = new ExprUtils(this.props.schema)
+
     if (value == null || !this.props.expr) {
-      node = null
+      return null
     } else {
       // Parse if should be JSON
       if (["image", "imagelist", "geometry", "text[]"].includes(this.props.exprType) && _.isString(value)) {
-        value = JSON.parse(value)
+        try {
+          value = JSON.parse(value)
+        } catch (e) {
+          console.error("Error parsing JSON", e)
+          return "???"
+        }
       }
 
       // Format if possible
       if (canFormatType(this.props.exprType)) {
-        node = formatValue(this.props.exprType, value, this.props.format)
+        return formatValue(this.props.exprType, value, this.props.format)
       } else {
         // Convert to node based on type
         switch (this.props.exprType) {
           case "text":
-            node = <Linkify properties={{ target: "_blank" }}>{value}</Linkify>
-            break
+            return <Linkify properties={{ target: "_blank" }}>{value}</Linkify>
           case "boolean":
           case "enum":
           case "enumset":
           case "text[]":
-            node = exprUtils.stringifyExprLiteral(this.props.expr, value, this.props.locale)
-            break
+            return exprUtils.stringifyExprLiteral(this.props.expr, value, this.props.locale)
           case "date":
-            node = moment(value, "YYYY-MM-DD").format("ll")
-            break
+            return moment(value, "YYYY-MM-DD").format("ll")
           case "datetime":
-            node = moment(value, moment.ISO_8601).format("lll")
-            break
+            return moment(value, moment.ISO_8601).format("lll")
           case "image":
-            node = this.renderImage(value.id)
-            break
+            return this.renderImage(value.id)
           case "imagelist":
-            node = _.map(value, (v: any) => this.renderImage(v.id))
-            break
+            return _.map(value, (v: any) => this.renderImage(v.id))
           default:
-            node = "" + value
+            return "" + value
         }
       }
     }
+  }
+
+  render() {
+    const content = this.renderCellContent()
 
     return (
       <div
@@ -101,7 +104,7 @@ export default class ExprCellComponent extends React.Component<ExprCellComponent
         onClick={this.props.onClick}
         onDoubleClick={this.props.onDoubleClick}
       >
-        {node}
+        {content}
       </div>
     )
   }

package/src/maps/BufferLayer.ts

@@ -18,6 +18,7 @@ import { getDefaultLayoutOptions } from "../dashboards/layoutOptions"
 import Widget from "../widgets/Widget"
 import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
 import { getTranslatableStringsFromLayoutManager } from "../dashboards/DashboardUtils"
+import { getSimpleHoverOverData } from "./MapUtils"
 
 /** Layer which draws a buffer around geometries (i.e. a radius circle around points) */
 export default class BufferLayer extends Layer<BufferLayerDesign> {
@@ -696,29 +697,16 @@ marker-fill: ` +
     ev: { data: any; event: any },
     hoverOptions: OnGridHoverOptions<BufferLayerDesign>
   ): OnGridHoverResults {
-    if (ev.data && ev.data.id) {
-      const { table } = hoverOptions.design
-      const results: OnGridHoverResults = {}
-
-      // Popup
-      if (hoverOptions.design.hoverOver) {
-        // Create filter using popupFilterJoins
-        const popupFilterJoins =
-          hoverOptions.design.popupFilterJoins || PopupFilterJoinsUtils.createDefaultPopupFilterJoins(table)
-        const popupFilters = PopupFilterJoinsUtils.createPopupFilters(
-          popupFilterJoins,
-          hoverOptions.schema,
-          table,
-          ev.data.id
-        )
-
-        results.hoverOver = React.createElement(HoverContent, {
+    if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
+      const results: OnGridHoverResults = {
+        hoverOver: React.createElement(HoverContent, {
           key: ev.data.id,
           schema: hoverOptions.schema,
-          dataSource: hoverOptions.dataSource,
-          table,
+          data: ev.data,
+          mapLayerDataSource: hoverOptions.layerDataSource,
+          design: hoverOptions.design,
           items: hoverOptions.design.hoverOver.items,
-          filters: popupFilters,
+          filters: hoverOptions.filters,
           locale: hoverOptions.locale,
           translate: hoverOptions.translate
         })
@@ -950,4 +938,31 @@ marker-fill: ` +
     // Remove duplicates
     return _.uniq(strings)
   }
+
+
+  /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+   * It will be called on the server side if using a server map data source, or on the client side if using a direct 
+   * map data source.
+   */
+  getHoverOverData(options: {
+    /** Design of the layer */
+    design: BufferLayerDesign,
+    /** Data of the current item being hovered over. e.g. { id: 123 } */
+    data: any,
+    /** Filters to apply to the hover over data, not including filtering down to the current item */
+    filters: JsonQLFilter[],
+    /** Schema to use */
+    schema: Schema,
+    /** Data source to use */
+    dataSource: DataSource,
+  }): Promise<{ [key: string]: any }> {
+    return getSimpleHoverOverData({
+      id: options.data.id,
+      table: options.design.table,
+      filters: options.filters,
+      schema: options.schema,
+      dataSource: options.dataSource,
+      hoverOverItems: options.design.hoverOver.items,
+    })
+  }
 }

package/src/maps/ChoroplethLayer.ts

@@ -29,6 +29,7 @@ import { getDefaultLayoutOptions } from "../dashboards/layoutOptions"
 import Widget from "../widgets/Widget"
 import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
 import { getTranslatableStringsFromLayoutManager } from "../dashboards/DashboardUtils"
+import { getSimpleHoverOverData } from "./MapUtils"
 
 export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
   /** Gets the type of layer definition */
@@ -1377,13 +1378,9 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     ev: { data: any; event: any },
     hoverOptions: OnGridHoverOptions<ChoroplethLayerDesign>
   ): OnGridHoverResults {
-    const regionsTable = hoverOptions.design.regionsTable || "admin_regions"
-
-    // Row only if mode is "plain" or "direct"
-    if (hoverOptions.design.regionMode == "plain" || hoverOptions.design.regionMode == "direct") {
-      if (!ev.data || !ev.data.id) {
-        return null
-      }
+    // Only applicable to indirect mode
+    if (hoverOptions.design.regionMode !== "indirect") {
+      return null
     }
 
     // Ignore if indirect with no table
@@ -1391,35 +1388,16 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       return null
     }
 
-    if (ev.data && ev.data.id) {
-      const { table } = hoverOptions.design
-      const results: OnGridHoverResults = {}
-
-      // Popup
-      if (hoverOptions.design.hoverOver) {
-        // Create default popup filter joins
-        const defaultPopupFilterJoins: { [tableId: string]: Expr } = {}
-        if (hoverOptions.design.adminRegionExpr) {
-          defaultPopupFilterJoins[hoverOptions.design.table] = hoverOptions.design.adminRegionExpr
-        }
-
-        // Create filter using popupFilterJoins
-        const popupFilterJoins = hoverOptions.design.popupFilterJoins || defaultPopupFilterJoins
-        const popupFilters = PopupFilterJoinsUtils.createPopupFilters(
-          popupFilterJoins,
-          hoverOptions.schema,
-          table,
-          ev.data.id,
-          true
-        )
-
-        results.hoverOver = React.createElement(HoverContent, {
+    if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
+      const results: OnGridHoverResults = {
+        hoverOver: React.createElement(HoverContent, {
           key: ev.data.id,
           schema: hoverOptions.schema,
-          dataSource: hoverOptions.dataSource,
-          table,
+          mapLayerDataSource: hoverOptions.layerDataSource,
+          design: hoverOptions.design,
           items: hoverOptions.design.hoverOver.items,
-          filters: popupFilters,
+          data: ev.data,
+          filters: hoverOptions.filters,
           locale: hoverOptions.locale,
           translate: hoverOptions.translate
         })
@@ -1731,4 +1709,44 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     // Remove duplicates
     return _.uniq(strings)
   }
+
+  /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+   * It will be called on the server side if using a server map data source, or on the client side if using a direct 
+   * map data source.
+   */
+  getHoverOverData(options: {
+    /** Design of the layer */
+    design: ChoroplethLayerDesign,
+    /** Data of the current item being hovered over. e.g. { id: 123 } */
+    data: any,
+    /** Filters to apply to the hover over data, not including filtering down to the current item */
+    filters: JsonQLFilter[],
+    /** Schema to use */
+    schema: Schema,
+    /** Data source to use */
+    dataSource: DataSource,
+  }): Promise<{ [key: string]: any }> {
+    // Use popup filter joins utilities to create filters
+    const popupFilterJoins: { [tableId: string]: Expr } = {}
+    if (options.design.adminRegionExpr) {
+      popupFilterJoins[options.design.table!] = options.design.adminRegionExpr
+    }
+    const popupFilters = PopupFilterJoinsUtils.createPopupFilters(
+      popupFilterJoins,
+      options.schema,
+      options.design.table!,
+      options.data.id,
+      true
+    )
+
+    return getSimpleHoverOverData({
+      // Filter using popup filters instead of id since will return multiple rows
+      id: null,
+      table: options.design.table!,
+      filters: popupFilters,
+      schema: options.schema,
+      dataSource: options.dataSource,
+      hoverOverItems: options.design.hoverOver.items,
+    })
+  }
 }

package/src/maps/ChoroplethLayerDesign.ts

@@ -62,11 +62,12 @@ export default interface ChoroplethLayerDesign {
   /** contains items: which is BlocksLayoutManager items. Will be displayed when the region is clicked. Only when region mode is "indirect" */
   popup: { items: LayoutBlock }
 
-  hoverOver: { items: HoverOverItem[] }
-
   /** customizable filtering for popup. See PopupFilterJoins.md. Only when region mode is "indirect"  */
   popupFilterJoins: PopupFilterJoins
 
+  /** Hover over items to display when hovering over a region. Only when region mode is "indirect" */
+  hoverOver: { items: HoverOverItem[] }
+
   /** minimum zoom level */
   minZoom?: number
 

package/src/maps/ChoroplethLayerDesigner.tsx

@@ -497,7 +497,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
 
     const regionsTable = this.props.design.regionsTable || "admin_regions"
 
-    const defaultPopupFilterJoins = {}
+    const defaultPopupFilterJoins: { [tableId: string]: Expr } = {}
     if (this.props.design.adminRegionExpr) {
       defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr
     }
@@ -521,7 +521,7 @@ export default class ChoroplethLayerDesigner extends React.Component<{
 
     const regionsTable = this.props.design.regionsTable || "admin_regions"
 
-    const defaultPopupFilterJoins = {}
+    const defaultPopupFilterJoins: { [tableId: string]: Expr } = {}
     if (this.props.design.adminRegionExpr) {
       defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr
     }

package/src/maps/DirectMapDataSource.ts

@@ -1,5 +1,5 @@
 import _ from "lodash"
-import { DataSource, Expr, injectTableAlias, Schema } from "@mwater/expressions"
+import { DataSource, Expr, ExprCompiler, injectTableAlias, Schema } from "@mwater/expressions"
 import { JsonQLFilter } from "../JsonQLFilter"
 import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
 import WidgetFactory from "../widgets/WidgetFactory"
@@ -16,6 +16,7 @@ import TileUrlLayer from "./TileUrlLayer"
 import * as QuickfilterUtils from "../quickfilter/QuickfilterUtils"
 import { useState, useEffect } from 'react'
 import { useStableCallback } from "@mwater/react-library/lib/useStableCallback"
+import { JsonQLSelectQuery } from "@mwater/jsonql"
 
 export interface DirectMapDataSourceOptions {
   /** schema to use */
@@ -392,4 +393,23 @@ class DirectLayerDataSource implements MapLayerDataSource {
 
     return url
   }
+
+  /** Gets hover over data for hover over items
+   * @param design The design of the layer
+   * @param data The data of the current item being hovered over. e.g. { id: 123 }
+   * @param filters The filters to apply to the hover over data, not including filtering down to the current item
+   * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+   */
+  getHoverOverData(design: any, data: any, filters: JsonQLFilter[]): Promise<{ [key: string]: any }> {
+    // Create layer
+    const layer = LayerFactory.createLayer(this.options.layerView.type)
+
+    return layer.getHoverOverData({
+      design,
+      data,
+      filters,
+      schema: this.options.schema,
+      dataSource: this.options.dataSource,
+    })
+  }
 }

package/src/maps/EditHoverOver.tsx

@@ -1,11 +1,13 @@
 import { omit } from "lodash"
-import { DataSource, Expr, Schema } from "@mwater/expressions"
+import { DataSource, Expr, ExprUtils, Schema } from "@mwater/expressions"
 import { ExprComponent } from "@mwater/expressions-ui"
 import React, { useState } from "react"
-import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import uuid from "uuid"
 import { HoverOverItem } from "./maps"
+import { canFormatType, getDefaultFormat } from "../valueFormatter"
+import { getFormatOptions } from "../valueFormatter"
 
 export interface EditHoverOverProps {
   /** Schema to use */
@@ -22,63 +24,82 @@ export interface EditHoverOverProps {
   defaultPopupFilterJoins: any
 }
 
-const EditHoverOver: React.FC<EditHoverOverProps> = props => {
+function EditHoverOver(props: EditHoverOverProps) {
+  const { schema, dataSource, design, onDesignChange, table } = props
   const [editing, setEditing] = useState(false)
+  const [draftItems, setDraftItems] = useState<HoverOverItem[] | undefined>(undefined)
 
   const handleRemovePopup = () => {
-    const design = omit(props.design, "hoverOver")
-    props.onDesignChange(design)
+    const newDesign = omit(design, "hoverOver")
+    onDesignChange(newDesign)
   }
 
-  const handleDesignChange = (items: HoverOverItem[]) => {
-    const hoverOver = { ...(props.design.hoverOver ?? {}), items }
-    const design = { ...props.design, hoverOver }
+  const handleItemChange = (item: HoverOverItem) => {
+    setDraftItems(draftItems?.map((i) => (item.id === i.id ? item : i)))
+  }
 
-    return props.onDesignChange(design)
+  const handleItemDelete = (item: HoverOverItem) => {
+    setDraftItems(draftItems?.filter((i) => item.id !== i.id))
   }
 
-  const handleItemChange = (item: HoverOverItem) => {
-    const items = (props.design.hoverOver?.items ?? []).map((i: HoverOverItem) => (item.id === i.id ? item : i))
-    const design = { ...props.design, hoverOver: { ...props.design.hoverOver, items } }
+  const handleAddItem = () => {
+    setDraftItems([...(draftItems ?? []), { id: uuid().replace(/-/g, ""), label: "" }])
+  }
 
-    return props.onDesignChange(design)
+  const handleSave = () => {
+    const hoverOver = { ...(design.hoverOver ?? {}), items: draftItems ?? [] }
+    const newDesign = { ...design, hoverOver }
+    onDesignChange(newDesign)
+    setEditing(false)
+    setDraftItems(undefined)
   }
 
-  const handleItemDelete = (item: HoverOverItem) => {
-    const items = (props.design.hoverOver?.items ?? []).filter((i: HoverOverItem) => item.id !== i.id)
-    const design = { ...props.design, hoverOver: { ...props.design.hoverOver, items } }
+  const handleCancel = () => {
+    setEditing(false)
+    setDraftItems(undefined)
+  }
 
-    return props.onDesignChange(design)
+  const handleOpen = () => {
+    setDraftItems(design.hoverOver?.items ?? [])
+    setEditing(true)
   }
 
   return (
     <>
-      <button className="btn btn-link" onClick={() => setEditing(true)}>
+      <button className="btn btn-link" onClick={handleOpen}>
         <span className="fa fa-pencil" /> {T`Customize Hoverover`}
       </button>
-      {props.design.hoverOver && (
+      {design.hoverOver && (
         <button className="btn btn-link" onClick={handleRemovePopup}>
           <span className="fa fa-times" /> {T`Remove Hover over`}
         </button>
       )}
 
       {editing && (
-        <ModalWindowComponent isOpen onRequestClose={() => setEditing(false)}>
-          {(props.design.hoverOver?.items ?? []).length > 0 && (
+        <ActionCancelModalComponent
+          onAction={handleSave}
+          onCancel={handleCancel}
+          actionLabel={T`Save`}
+          title={T`Customize Hoverover`}
+          size="x-large"
+        >
+          {(draftItems ?? []).length > 0 && (
             <table className="table">
               <thead>
                 <tr>
                   <th>{T`Label`}</th>
                   <th>{T`Value`}</th>
-                  <th></th>
+                  <th style={{ width: "1%", whiteSpace: "nowrap" }}>{T`Format`}</th>
+                  <th style={{ width: "1%", whiteSpace: "nowrap" }}></th>
                 </tr>
               </thead>
               <tbody>
-                {props.design.hoverOver?.items.map((item: HoverOverItem) => (
+                {draftItems?.map((item: HoverOverItem) => (
                   <HoverOverItemEditor
-                    schema={props.schema}
-                    dataSource={props.dataSource}
-                    table={props.design.table}
+                    key={item.id}
+                    schema={schema}
+                    dataSource={dataSource}
+                    table={table}
                     onItemChange={handleItemChange}
                     onItemDelete={handleItemDelete}
                     item={item}
@@ -88,20 +109,14 @@ const EditHoverOver: React.FC<EditHoverOverProps> = props => {
             </table>
           )}
 
-          {(props.design.hoverOver?.items ?? []).length < 3 && (
-            <button
-              className="btn btn-link"
-              onClick={() =>
-                handleDesignChange([
-                  ...(props.design.hoverOver?.items ?? []),
-                  { id: uuid().replace(/-/g, ""), label: "" }
-                ])
-              }>
-              <span className="fa fa-plus" />
-              {T`Add item`}
-            </button>
-          )}
-        </ModalWindowComponent>
+          <button
+            className="btn btn-link"
+            onClick={handleAddItem}
+          >
+            <span className="fas fa-plus me-1" />
+            {T`Add Item`}
+          </button>
+        </ActionCancelModalComponent>
       )}
     </>
   )
@@ -115,20 +130,42 @@ interface HoverOverItemEditorProps {
   onItemDelete: (item: HoverOverItem) => void
   table: string
 }
-const HoverOverItemEditor: React.FC<HoverOverItemEditorProps> = ({
-  schema,
-  dataSource,
-  table,
-  item,
-  onItemChange,
-  onItemDelete
-}) => {
+
+function HoverOverItemEditor(props: HoverOverItemEditorProps) {
+  const { schema, dataSource, table, item, onItemChange, onItemDelete } = props
+
+  function renderFormat() {
+    const exprUtils = new ExprUtils(schema)
+    const exprType = exprUtils.getExprType(item.value ?? null)
+    if (!exprType) {
+      return null
+    }
+
+    if (!canFormatType(exprType)) {
+      return null
+    }
+
+    const formats = getFormatOptions(exprType)
+    if (!formats) {
+      return null
+    }
+
+    return (
+        <ui.Select
+          options={formats.map(f => ({ value: f.value, label: f.label }))}
+          value={item.format ?? getDefaultFormat(exprType)}
+          onChange={value => onItemChange({ ...item, format: value ?? undefined })}
+          style={{ width: "auto", display: "inline-block" }}
+        />  
+    )
+  }
+
   return (
     <tr>
-      <td>
+      <td className="align-middle">
         <ui.TextInput value={item.label} onChange={value => onItemChange({ ...item, label: value })} />
       </td>
-      <td>
+      <td className="align-middle">
         <ExprComponent
           schema={schema}
           dataSource={dataSource}
@@ -139,7 +176,10 @@ const HoverOverItemEditor: React.FC<HoverOverItemEditorProps> = ({
           aggrStatuses={["individual", "literal", "aggregate"]}
         />
       </td>
-      <td>
+      <td className="align-middle" style={{ width: "1%", whiteSpace: "nowrap" }}>
+        {renderFormat()}
+      </td>
+      <td className="align-middle" style={{ width: "1%", whiteSpace: "nowrap" }}>
         <button className="btn btn-link" onClick={() => onItemDelete(item)}>
           <span className="fa fa-close" />
         </button>

package/src/maps/HoverContent.tsx

@@ -1,19 +1,22 @@
 import React, { useEffect, useState } from "react"
-import { DataSource, ExprCompiler, ExprUtils, Schema, injectTableAlias } from "@mwater/expressions"
-import { JsonQLSelectQuery } from "@mwater/jsonql"
+import { ExprUtils, Schema } from "@mwater/expressions"
 import { JsonQLFilter } from ".."
-import { compact } from "lodash"
 import { HoverOverItem } from "./maps"
 import { canFormatType } from "../valueFormatter"
 import { formatValue } from "../valueFormatter"
+import { MapLayerDataSource } from "./MapLayerDataSource"
 
 export interface HoverContentProps {
   /** Schema to use */
   schema: Schema
-  dataSource: DataSource
-  filters?: JsonQLFilter[]
-  /** Table that hover over is for */
-  table: string
+  /** Map data source */
+  mapLayerDataSource: MapLayerDataSource
+  /** Design of the layer */
+  design: any
+  /** Data of the current item being hovered over. e.g. { id: 123 } */
+  data: any
+  /** Additional filters to apply to the hover over data */
+  filters: JsonQLFilter[]
   /** Hover over items */
   items: HoverOverItem[]
   /** Locale to use */
@@ -33,48 +36,14 @@ const HoverContent = (props: HoverContentProps) => {
     const items = props.items
 
     if (items.length > 0) {
-      const exprCompiler = new ExprCompiler(props.schema)
-      const query: JsonQLSelectQuery = {
-        type: "query",
-        selects: [],
-        from: exprCompiler.compileTable(props.table, "main"),
-        limit: 1
-      }
-
-      items.forEach((item: HoverOverItem) => {
-        if (item.value) {
-          query.selects.push({
-            type: "select",
-            expr: exprCompiler.compileExpr({ expr: item.value, tableAlias: "main" }),
-            alias: item.id
-          })
+      props.mapLayerDataSource.getHoverOverData(props.design, props.data, props.filters).then((data) => {
+        if (mounted) {
+          setValues(data)
         }
-      })
-
-      if (props.filters) {
-        let whereClauses = props.filters.map(f => injectTableAlias(f.jsonql, "main"))
-
-        whereClauses = compact(whereClauses)
-
-        // Wrap if multiple
-        if (whereClauses.length > 1) {
-          query.where = { type: "op", op: "and", exprs: whereClauses }
-        } else {
-          query.where = whereClauses[0]
+      }).catch((error) => {
+        if (mounted) {
+          setError(error.message)
         }
-      }
-
-      props.dataSource.performQuery(query, (error: any, data: any) => {
-        if (!mounted) {
-          return
-        }
-
-        if (error) {
-          setError(props.translate("Error loading hover data"))
-          return
-        }
-
-        setValues(data?.[0] ?? {})
       })
     }