@mwater/visualization 5.4.5 → 5.5.0

package/src/maps/Layer.ts

@@ -169,6 +169,25 @@ export default class Layer<LayerDesign> {
     return null
   }
 
+  /**
+   * Called when the interactivity grid is hovered over.
+   * arguments:
+   *   ev: { data: interactivty data e.g. `{ id: 123 }` }
+   *   options:
+   *     design: design of layer
+   *     schema: schema to use
+   *     dataSource: data source to use
+   *     layerDataSource: layer data source
+   *     scopeData: current scope data if layer is scoping
+   *     filters: compiled filters to apply to the popup
+   *
+   * Returns:
+   *   null
+   *   or
+   *   {
+   *     hoverOver: React element to put into a hover over
+   *   }
+   */
   onGridHoverOver(ev: { data: any; event: any }, options: OnGridHoverOptions<LayerDesign>): OnGridHoverResults {
     return null
   }
@@ -316,10 +335,10 @@ export default class Layer<LayerDesign> {
           const [w, s, e, n] = bbox(results[0].bounds)
           // Pad bounds to prevent too small box (100m)
           bounds = {
-            w: w - 0.001,
-            s: s - 0.001,
-            e: e + 0.001,
-            n: n + 0.001
+            w: Math.max(w - 0.001, -180),
+            s: Math.max(s - 0.001, -90),
+            e: Math.min(e + 0.001, 180),
+            n: Math.min(n + 0.001, 90)
           }
         }
 
@@ -332,6 +351,25 @@ export default class Layer<LayerDesign> {
   getTranslatableStrings(design: LayerDesign, schema: Schema): string[] {
     return []
   }
+
+  /** 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: LayerDesign,
+    /** 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 Promise.resolve({})
+  }
 }
 
 export interface LegendOptions<LayerDesign> {

package/src/maps/MWaterServerLayer.ts

@@ -94,15 +94,15 @@ class LoadingLegend extends React.Component<LoadingLegendProps, LoadingLegendSta
   }
 
   componentDidMount() {
-    return $.get(this.props.url).done((data: any) => {
-      return this.setState({ html: data })
+    $.get(this.props.url).done((data: any) => {
+      this.setState({ html: data })
     })
   }
 
-  componentWillReceiveProps(nextProps: any) {
-    if (nextProps.url !== this.props.url) {
-      return $.get(nextProps.url).done((data: any) => {
-        return this.setState({ html: data })
+  componentDidUpdate(prevProps: any) {
+    if (prevProps.url !== this.props.url) {
+      $.get(this.props.url).done((data: any) => {
+        this.setState({ html: data })
       })
     }
   }

package/src/maps/MapLayerDataSource.ts

@@ -24,4 +24,12 @@ export interface MapLayerDataSource {
 
   /** Gets widget data source for a popup widget */
   getPopupWidgetDataSource(design: any, widgetId: string): WidgetDataSource
+
+  /** 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 layer does not include filters that narrow down to a specific 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 }>
 }

package/src/maps/MapUtils.ts

@@ -1,12 +1,13 @@
 // General utilities for a map
 
-import { JsonQLExpr } from "@mwater/jsonql"
-import _ from "lodash"
-import { Expr, ExprCleaner, ExprCompiler, ExprUtils, FieldExpr, Schema } from "@mwater/expressions"
+import { JsonQLExpr, JsonQLSelectQuery } from "@mwater/jsonql"
+import _, { compact } from "lodash"
+import { DataSource, Expr, ExprCleaner, ExprCompiler, ExprUtils, FieldExpr, injectTableAlias, Schema } from "@mwater/expressions"
 import { JsonQLFilter } from "../JsonQLFilter"
 import LayerFactory from "./LayerFactory"
 import { MapDesign } from "./MapDesign"
 import { produce } from "immer"
+import { HoverOverItem } from "./maps"
 
 export interface MapScope {
   name: string
@@ -170,3 +171,69 @@ export function getTranslatableStrings(design: MapDesign, schema: Schema): strin
   // Remove duplicates
   return _.uniq(strings)
 }
+
+/**
+ * Convenience function to get hover over data for a map given an id and a list of hover over items
+ */
+export async function getSimpleHoverOverData(options: {
+  /** Id of the item to get hover over data for. If null, will not filter by id */
+  id: any,
+  /** Table of the item to get hover over data for */
+  table: string,
+  /** Extra 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,
+  /** Hover over items */
+  hoverOverItems: HoverOverItem[]
+}) {
+  const { id, table, filters, schema, dataSource, hoverOverItems } = options
+
+  const exprCompiler = new ExprCompiler(schema)
+  const query: JsonQLSelectQuery = {
+    type: "query",
+    selects: [],
+    from: exprCompiler.compileTable(table, "main"),
+    limit: 1
+  }
+
+  for (const item of hoverOverItems) {
+    if (item.value) {
+      query.selects.push({
+        type: "select",
+        expr: exprCompiler.compileExpr({ expr: item.value, tableAlias: "main" }),
+        alias: item.id
+      })
+    }
+  }
+
+  if (filters) {
+    let whereClauses = filters.filter(f => f.table === table).map(f => injectTableAlias(f.jsonql, "main"))
+
+    // Add id filter
+    if (id != null) {
+      whereClauses.push({
+        type: "op",
+        op: "=",
+        exprs: [
+          exprCompiler.compileExpr({ expr: { type: "id", table }, tableAlias: "main" }),
+          { type: "literal", value: id }
+        ]
+      })
+    }
+
+    whereClauses = compact(whereClauses)
+
+    // Wrap if multiple
+    if (whereClauses.length > 1) {
+      query.where = { type: "op", op: "and", exprs: whereClauses }
+    } else {
+      query.where = whereClauses[0]
+    }
+  }
+
+  const rows = await dataSource.performQuery(query)
+  return rows?.[0] ?? {}
+}

package/src/maps/MarkersLayer.ts

@@ -20,6 +20,7 @@ import Widget from "../widgets/Widget"
 import { WidgetDataSource } from "../widgets/WidgetDataSource"
 import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
 import { getTranslatableStringsFromLayoutManager } from "../dashboards/DashboardUtils"
+import { getSimpleHoverOverData } from "./MapUtils"
 
 export default class MarkersLayer extends Layer<MarkersLayerDesign> {
   /** Gets the type of layer definition */
@@ -471,33 +472,16 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
     ev: { data: any; event: any },
     hoverOptions: OnGridHoverOptions<MarkersLayerDesign>
   ): OnGridHoverResults {
-    if (ev.data && ev.data.id) {
-      const { table } = hoverOptions.design
-      const results: OnGridHoverResults = {}
-
-      // Popup
-      if (hoverOptions.design.hoverOver) {
-        const exprCompiler = new ExprCompiler(hoverOptions.schema)
-
-        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,
           items: hoverOptions.design.hoverOver.items,
-          filters: [
-            {
-              table,
-              jsonql: {
-                type: "op",
-                op: "=",
-                exprs: [
-                  exprCompiler.compileExpr({ expr: { type: "id", table }, tableAlias: "{alias}" }),
-                  { type: "literal", value: ev.data.id }
-                ]
-              }
-            }
-          ],
+          design: hoverOptions.design,
+          data: ev.data,
+          filters: hoverOptions.filters,
           locale: hoverOptions.locale,
           translate: hoverOptions.translate
         })
@@ -818,6 +802,32 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
     // 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: MarkersLayerDesign,
+    /** 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/RasterMapViewComponent.ts

@@ -178,7 +178,7 @@ export default class RasterMapViewComponent extends React.Component<
         filters: this.getCompiledFilters(),
         dataSource: this.props.dataSource,
         locale: this.context,
-        translate: this.props.translate ?? (() => ""),
+        translate: this.props.translate ?? ((input: string) => input),
         onHide: () => this.setState({ legendHidden: true }),
         zoom: null
       })

package/src/maps/ServerMapDataSource.ts

@@ -261,6 +261,41 @@ class ServerLayerDataSource 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 layer does not include filters that narrow down to a specific item
+   * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+   */
+  async getHoverOverData(design: any, data: any, filters: JsonQLFilter[]): Promise<{ [key: string]: any }> {
+    const query = {
+      client: this.options.client,
+      share: this.options.share,
+      filters: compressJson(filters || []),
+      data: compressJson(data),
+      rev: this.options.rev
+    }
+
+    const url =
+      `${this.options.apiUrl}maps/${this.options.mapId}/layers/${this.options.layerView.id}/hoverdata?` +
+      querystring.stringify(query)
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Accept: "application/json"
+      }
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      console.error(errorText)
+      throw new Error(`Error fetching hover data: ${response.statusText}`)
+    }
+
+    return await response.json()
+  }
 }
 
 interface ServerMapLayerPopupWidgetDataSourceOptions {

package/src/maps/VectorMapViewComponent.tsx

@@ -76,7 +76,7 @@ export function VectorMapViewComponent(props: VectorMapViewComponentProps) {
   // Locale to use
   const locale = props.locale || props.design.locale || "en"
 
-  // Translate function to use TODO
+  // Translate function to use 
   const translate = props.translate || ((input: string) => input)
 
   // Last feature that mouse entered
@@ -505,13 +505,13 @@ export function VectorMapViewComponent(props: VectorMapViewComponentProps) {
     }
 
     if (!props.design.autoBounds && props.design.bounds) {
-      // If we set the new bounds, do not update map bounds
+      // If we set the new bounds, do not update map bounds unless they differ by more than 0.0001 degrees (roughly 10m)
       if (
         boundsRef.current == null ||
-        props.design.bounds.n != boundsRef.current.n ||
-        props.design.bounds.e != boundsRef.current.e ||
-        props.design.bounds.s != boundsRef.current.s ||
-        props.design.bounds.w != boundsRef.current.w
+        Math.abs(props.design.bounds.n - boundsRef.current.n) > 0.0001 ||
+        Math.abs(props.design.bounds.e - boundsRef.current.e) > 0.0001 ||
+        Math.abs(props.design.bounds.s - boundsRef.current.s) > 0.0001 ||
+        Math.abs(props.design.bounds.w - boundsRef.current.w) > 0.0001
       ) {
         map.fitBounds([props.design.bounds.w, props.design.bounds.s, props.design.bounds.e, props.design.bounds.n])
         boundsRef.current = props.design.bounds

package/src/maps/maps.ts

@@ -1,5 +1,6 @@
 import { JsonQLQuery } from "@mwater/jsonql"
 import { Expr } from "@mwater/expressions"
+import { ReactNode } from "react"
 
 export interface LayerDefinition {
   layers: Array<{
@@ -20,15 +21,16 @@ export interface LayerDefinition {
   }
 }
 
+/** Results from onGridClick that can be used to display a popup */
 export type OnGridClickResults = {
   scope?: any
   row?: { tableId: string; primaryKey: any }
   popup?: React.ReactElement<{}>
 } | null
 
+/** Results from onGridHover that can be used to display a hover over */
 export type OnGridHoverResults = {
-  scope?: any
-  hoverOver?: React.ReactElement<{}>
+  hoverOver?: ReactNode
 } | null
 
 /** Item in hover over */

package/src/mwater_table_selection/FormsListComponent.tsx

@@ -0,0 +1,188 @@
+import _ from "lodash"
+import $ from "jquery"
+import React from "react"
+import querystring from "querystring"
+import * as uiComponents from "../UIComponents"
+import { ExprUtils, Schema } from "@mwater/expressions"
+import moment from "moment"
+import { Form } from "@mwater/forms"
+
+
+interface FormsListComponentProps {
+  /** Url to hit api */
+  apiUrl: string
+  /** Optional client */
+  client?: string
+  schema: Schema
+  /** User id */
+  user?: string
+  /** Called with table selected */
+  onChange: any
+  extraTables: any
+  onExtraTableAdd: any
+  onExtraTableRemove: any
+}
+
+interface FormsListComponentState {
+  error?: any
+  search: any
+  forms: { id: string, name: string, desc?: string }[] | null
+}
+
+// Searchable list of forms
+export class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      forms: null,
+      search: ""
+    }
+  }
+
+  componentDidMount() {
+    // Get names and basic of forms
+    const query: any = {}
+    query.fields = JSON.stringify({
+      "design.name": 1,
+      "design.description": 1,
+      roles: 1,
+      created: 1,
+      modified: 1,
+      state: 1,
+      isMaster: 1
+    })
+    query.selector = JSON.stringify({ design: { $exists: true }, state: { $ne: "deleted" } })
+    query.client = this.props.client
+
+    // Get list of all form names
+    $.getJSON(this.props.apiUrl + "forms?" + querystring.stringify(query), (forms: Form[]) => {
+      // Sort by modified.on desc but first by user
+      forms = _.sortByOrder(
+        forms,
+        [
+          (form: Form) => ((this.props.extraTables || []).includes("responses:" + form._id) ? 1 : 0),
+          (form: Form) => (form.created.by === this.props.user ? 1 : 0),
+          (form: Form) => form.modified?.on
+        ],
+        ["desc", "desc", "desc"]
+      )
+
+      // TODO use name instead of design.name
+      this.setState({
+        forms: _.map(forms, (form) => {
+          let desc = ExprUtils.localizeString(form.design.description, null) || ""
+          if (desc) {
+            desc += " - "
+          }
+          desc += T`Modified ${moment(form.modified?.on, moment.ISO_8601).format("ll")}`
+
+          return {
+            id: form._id,
+            name: ExprUtils.localizeString(form.design.name, null),
+            desc
+          }
+        })
+      })
+    }).fail((xhr: any) => {
+      this.setState({ error: xhr.responseText })
+    })
+  }
+
+  handleTableRemove = (table: any) => {
+    if (
+      confirm(
+        T`Remove ${ExprUtils.localizeString(
+          table.name,
+          T.locale
+        )}? Any widgets that depend on it will no longer work properly.`
+      )
+    ) {
+      return this.props.onExtraTableRemove(table.id)
+    }
+  }
+
+  searchRef = (comp: any) => {
+    // Focus
+    if (comp) {
+      return comp.focus()
+    }
+  }
+
+  render() {
+    let forms
+    if (this.state.error) {
+      return <div className="alert alert-danger">{this.state.error}</div>
+    }
+
+    // Filter forms
+    if (this.state.search) {
+      const escapeRegExp = (s: any) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
+
+      const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i")
+
+      forms = _.filter(this.state.forms!, (form) => form.name.match(searchStringRegExp))
+    } else {
+      ;({ forms } = this.state)
+    }
+
+    // Remove if already included
+    forms = _.filter(forms || [], (f) => !(this.props.extraTables || []).includes(`responses:${f.id}`))
+
+    let tables = _.filter(
+      this.props.schema.getTables(),
+      (table) => (table.id.match(/^responses:/) || table.id.match(/^master_responses:/)) && !table.deprecated
+    )
+    tables = _.sortBy(tables, (t) => t.name.en)
+
+    return (
+      <div>
+        <label>{T`Included Surveys:`}</label>
+        {tables.length > 0 ? (
+          <uiComponents.OptionListComponent
+            items={_.map(tables, (table) => {
+              return {
+                name: ExprUtils.localizeString(table.name, T.locale),
+                desc: ExprUtils.localizeString(table.desc, T.locale),
+                onClick: this.props.onChange.bind(null, table.id),
+                onRemove: this.handleTableRemove.bind(null, table)
+              }
+            })}
+          />
+        ) : (
+          <div>{T`None`}</div>
+        )}
+
+        <br />
+
+        <label>{T`All Surveys:`}</label>
+        {!this.state.forms || this.state.forms.length === 0 ? (
+          <div className="alert alert-info">
+            <i className="fa fa-spinner fa-spin" />
+            &nbsp;{T`Loading...`}
+          </div>
+        ) : (
+          <>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              placeholder={T`Search...`}
+              key="search"
+              ref={this.searchRef}
+              style={{ maxWidth: "20em", marginBottom: 10 }}
+              value={this.state.search}
+              onChange={(ev: any) => this.setState({ search: ev.target.value })}
+            />
+
+            <uiComponents.OptionListComponent
+              items={_.map(forms, (form) => ({
+                name: form.name,
+                desc: form.desc,
+                onClick: this.props.onChange.bind(null, "responses:" + form.id)
+              }))}
+            />
+          </>
+        )}
+      </div>
+    )
+  }
+}