@mwater/visualization 5.4.5 → 5.6.0

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 */
@@ -349,12 +350,6 @@ class DirectLayerDataSource implements MapLayerDataSource {
 
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring.stringify(query)
 
-    // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-    // Used to speed queries
-    if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-      url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/")
-    }
-
     return url
   }
 
@@ -363,12 +358,6 @@ class DirectLayerDataSource implements MapLayerDataSource {
     let where
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`
 
-    // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-    // Used to speed queries
-    if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-      url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/")
-    }
-
     if (this.options.client) {
       url += `&client=${this.options.client}`
     }
@@ -392,4 +381,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 { AggrStatus, 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 */
@@ -20,88 +22,105 @@ export interface EditHoverOverProps {
   /** Table of the row that join is to. Usually same as table except for choropleth maps */
   idTable: string
   defaultPopupFilterJoins: any
+
+  /** Aggr statuses to allow in hover over expressions */
+  aggrStatuses: AggrStatus[]
 }
 
-const EditHoverOver: React.FC<EditHoverOverProps> = props => {
+export 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}
+                    aggrStatuses={props.aggrStatuses}
                   />
                 ))}
               </tbody>
             </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>
       )}
     </>
   )
@@ -114,21 +133,45 @@ interface HoverOverItemEditorProps {
   onItemChange: (item: HoverOverItem) => void
   onItemDelete: (item: HoverOverItem) => void
   table: string
+  /** Aggr statuses to allow in hover over expressions */
+  aggrStatuses: AggrStatus[]
 }
-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}
@@ -136,10 +179,13 @@ const HoverOverItemEditor: React.FC<HoverOverItemEditorProps> = ({
           types={["text", "number", "enum", "boolean", "date", "datetime", "id"]}
           onChange={expr => onItemChange({ ...item, value: expr })}
           value={item.value ?? null}
-          aggrStatuses={["individual", "literal", "aggregate"]}
+          aggrStatuses={props.aggrStatuses}
         />
       </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>
@@ -147,5 +193,3 @@ const HoverOverItemEditor: React.FC<HoverOverItemEditorProps> = ({
     </tr>
   )
 }
-
-export default EditHoverOver

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] ?? {})
       })
     }
 
@@ -88,7 +57,7 @@ const HoverContent = (props: HoverContentProps) => {
   }
 
   return (
-    <div className="_mviz-map-hover-content">
+    <div className="mwater-visualization-map-hover-content">
       {props.items.map((item: HoverOverItem) => {
         let value = values[item.id]
 

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/LeafletMapComponent.tsx

@@ -3,7 +3,6 @@ import React, { ReactElement, Component } from "react"
 import ReactDOM from "react-dom"
 import LeafletLoading from "./LeafletLoading"
 import L, { PathOptions, CircleMarkerOptions } from "leaflet"
-let BingLayer = require("./BingLayer")
 let UtfGridLayer = require("./UtfGridLayer")
 
 const R = React.createElement
@@ -387,36 +386,28 @@ export default class LeafletMapComponent extends Component<Props> {
 
       switch (this.props.baseLayerId) {
         case "bing_road":
-          this.baseLayer = new BingLayer("Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU", {
-            type: "Road"
+          this.baseLayer = L.tileLayer('https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d', {
+            maxZoom: 20,
+            attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>', 
           })
           break
-        // @baseLayer = L.tileLayer('https://{s}.api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-        //   attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
-        //   tileSize: 512,
-        //   maxZoom: 21,
-        //   maxNativeZoom: 19,
-        //   subdomains: ["a", "b"],
-        //   zoomOffset: -1,
-        //   id: 'mapbox/streets-v11',
-        //   accessToken: 'pk.eyJ1IjoiZ3Jhc3NpY2siLCJhIjoiY2ozMzU1N3ZoMDA3ZDJxbzh0aTRtOTRoeSJ9.fFWBZ88vbdezyhfw-I-fag'
-        // })
         case "bing_aerial":
-          this.baseLayer = new BingLayer("Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU", {
-            type: "AerialWithLabels"
+          this.baseLayer = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}.jpg?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d', {
+            maxZoom: 20,
+            attribution: '&copy; CNES, Distribution Airbus DS, &copy; Airbus DS, &copy; PlanetObserver (Contains Copernicus Data) | &copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>', 
           })
           break
         case "cartodb_positron":
-          this.baseLayer = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
+          this.baseLayer = L.tileLayer("https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d", {
             attribution:
-              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
+              '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
             maxZoom: 21
           })
           break
         case "cartodb_dark_matter":
-          this.baseLayer = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png", {
+          this.baseLayer = L.tileLayer("https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d", {
             attribution:
-              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
+              '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
             maxZoom: 21
           })
           break

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/MapComponent.ts

@@ -290,7 +290,6 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
 
   render() {
     const designerVisible = !this.getDesign().hideDesignPanel
-    console.log("designerVisible", designerVisible)
     return R(
       "div",
       {

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,81 @@ 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 exprUtils = new ExprUtils(schema)
+  const exprCompiler = new ExprCompiler(schema)
+  const query: JsonQLSelectQuery = {
+    type: "query",
+    selects: [],
+    from: exprCompiler.compileTable(table, "main"),
+    groupBy: [],
+    limit: 1
+  }
+
+  // Check if any items are aggregate
+  const isAggregate = hoverOverItems.some(item => exprUtils.getExprAggrStatus(item.value ?? null) === "aggregate")
+
+  for (let i = 0; i < hoverOverItems.length; i++) {
+    const item = hoverOverItems[i]
+
+    if (item.value) {
+      query.selects.push({
+        type: "select",
+        expr: exprCompiler.compileExpr({ expr: item.value, tableAlias: "main" }),
+        alias: item.id
+      })
+
+      // Group by if there are aggregate items and this is not aggregate
+      if (isAggregate && exprUtils.getExprAggrStatus(item.value) !== "aggregate") {
+        query.groupBy!.push(i + 1)
+      }
+    }
+  }
+
+  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] ?? {}
+}