@mwater/visualization 5.0.0

package/src/maps/DirectMapDataSource.ts

@@ -0,0 +1,386 @@
+import _ from "lodash"
+import { DataSource, Expr, injectTableAlias, Schema } from "@mwater/expressions"
+import { JsonQLFilter } from "../JsonQLFilter"
+import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
+import WidgetFactory from "../widgets/WidgetFactory"
+import LayerFactory from "./LayerFactory"
+import MapBoundsCalculator from "./MapBoundsCalculator"
+import { MapDesign, MapLayerView } from "./MapDesign"
+import { MapDataSource } from "./MapDataSource"
+import DirectWidgetDataSource from "../widgets/DirectWidgetDataSource"
+import { JsonQLCssLayerDefinition, VectorTileCTE, VectorTileDef, VectorTileSourceLayer } from "./Layer"
+import compressJson from "../compressJson"
+import querystring from "querystring"
+import { MapLayerDataSource } from "./MapLayerDataSource"
+import TileUrlLayer from "./TileUrlLayer"
+import * as QuickfilterUtils from "../quickfilter/QuickfilterUtils"
+import { useState, useEffect } from 'react'
+import { useStableCallback } from "@mwater/react-library/lib/useStableCallback"
+
+
+interface DirectMapDataSourceOptions {
+  /** schema to use */
+  schema: Schema
+
+  /** general data source */
+  dataSource: DataSource
+
+  /** design of entire map */
+  design: MapDesign
+
+  /** API url to use for talking to mWater server */
+  apiUrl: string
+
+  /** client id to use for talking to mWater server */
+  client?: string
+}
+
+export default class DirectMapDataSource implements MapDataSource {
+  options: DirectMapDataSourceOptions
+
+  // Create map url source that uses direct jsonql maps
+  constructor(options: DirectMapDataSourceOptions) {
+    this.options = options
+  }
+
+  // Gets the data source for a layer
+  getLayerDataSource(layerId: string): MapLayerDataSource {
+    // Get layerView
+    const layerView = _.findWhere(this.options.design.layerViews, { id: layerId })
+    if (!layerView) {
+      throw new Error(`Layer ${layerId} not found`)
+    }
+
+    return new DirectLayerDataSource({ ...this.options, layerView })
+  }
+
+  // Gets the bounds for the map. Null for whole world. Callback as { n:, s:, w:, e: }
+  getBounds(
+    design: MapDesign,
+    filters: JsonQLFilter[],
+    callback: (error: any, bounds?: { w: number; n: number; e: number; s: number } | null) => void
+  ): void {
+    return new MapBoundsCalculator(this.options.schema, this.options.dataSource).getBounds(design, filters, callback)
+  }
+
+  /** Gets the quickfilters data source */
+  getQuickfiltersDataSource() {
+    return {
+      getValues: (index: any, expr: Expr, filters: any, offset: any, limit: any, callback: any) => {
+        // Perform query
+        return QuickfilterUtils.findExprValues(
+          expr,
+          this.options.schema,
+          this.options.dataSource,
+          filters,
+          offset,
+          limit,
+          callback
+        )
+      }
+    }
+  } 
+}
+
+interface DirectLayerDataSourceOptions {
+  /** schema to use */
+  schema: Schema
+
+  /** general data source */
+  dataSource: DataSource
+
+  /** Layer view to display */
+  layerView: MapLayerView
+
+  /** API url to use for talking to mWater server */
+  apiUrl: string
+
+  /** client id to use for talking to mWater server */
+  client?: string
+}
+
+/** Interface for a request made to get a token for vector tiles.
+ * The response is a token that can be used to get the actual tiles.
+ * The token is a string that is passed to the server as a query parameter.
+ * This type of request 
+ */
+export interface VectorTileDirectTokenRequest {
+  /** Layers to include in the resulting tiles */
+  layers: VectorTileSourceLayer[]
+
+  /** Common table expressions of the tiles */
+  ctes: VectorTileCTE[]
+
+  /** Requests that the created tiles not be based on data older than */
+  createdAfter?: string
+
+  /** Earliest expiry of the token (ISO 8601 datetime) */
+  expiresAfter: string
+
+  /** Enforced minimum zoom level */
+  minZoom?: number
+
+  /** Enforced maximum zoom level */
+  maxZoom?: number
+}
+
+/**
+ * Fetches the URL for a vector tile source with an expiry time. For direct token access.
+ */
+async function getVectorTileFromDirectRequest(options: {
+  /** The API URL to use for fetching the vector tile source. */
+  apiUrl: string
+  /** The client ID to use for fetching the vector tile source. Can be undefined. */
+  client?: string
+  /** The request to send to the server to get the token. */
+  directTokenRequest: VectorTileDirectTokenRequest
+}): Promise<{ url: string; expires: string }> {
+  const { apiUrl, client, directTokenRequest } = options
+
+  const response = await fetch(
+    apiUrl + "vector_tiles/create_token/direct?client=" + (client || ""),
+    {
+      method: "POST",
+      body: JSON.stringify(directTokenRequest),
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      }
+    }
+  )
+  if (!response.ok) {
+    throw new Error("Error getting tiles")
+  }
+  const { token, expires } = await response.json()
+
+  return { url: apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires }
+}
+
+/**
+ * React hook to get a direct URL for a vector tile source.
+ * The URL is fetched asynchronously and the hook returns the current URL.
+ * The URL is refreshed automatically when it expires.
+ * @param options The options for fetching the vector tile source.
+ * @returns The URL of the vector tile source, or null if it has not been fetched yet.
+ */
+export function useDirectVectorTileUrl(options: { 
+  /** The API URL to use for fetching the vector tile source. */
+  apiUrl: string, 
+  /** The client ID to use for fetching the vector tile source. Can be undefined. */
+  client: string, 
+  /** Request to make for tiles */
+  directTokenRequest: VectorTileDirectTokenRequest
+}): string | null {
+  const { apiUrl, client, directTokenRequest } = options
+  
+  const [url, setUrl] = useState<string | null>(null)
+  const [expires, setExpires] = useState<string | null>(null)
+
+  const fetchUrl = useStableCallback(async () => {
+    const { url, expires } = await getVectorTileFromDirectRequest({
+      apiUrl,
+      client,
+      directTokenRequest,
+    })
+    setUrl(url)
+    setExpires(expires)
+  })
+
+  useEffect(() => {
+    fetchUrl()
+  }, [apiUrl, client, JSON.stringify(directTokenRequest)])
+
+  // Refresh when expires
+  useEffect(() => {
+    if (expires) {
+      const expiryDate = new Date(expires).getTime()
+      const now = new Date().getTime()
+      const delay = expiryDate - now
+
+      const timer = setTimeout(fetchUrl, delay)
+
+      return () => clearTimeout(timer)
+    }
+    return
+  }, [expires])
+
+  return url
+}
+
+
+class DirectLayerDataSource implements MapLayerDataSource {
+  options: DirectLayerDataSourceOptions
+
+  // Create map url source that uses direct jsonql maps
+  // options:
+  //   schema: schema to use
+  //   dataSource: general data source
+  //   layerView: layerView to display
+  //   apiUrl: API url to use for talking to mWater server
+  //   client: client id to use for talking to mWater server
+  constructor(options: DirectLayerDataSourceOptions) {
+    this.options = options
+  }
+
+  /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
+   * @param createdAfter ISO 8601 timestamp requiring that tile soruce on server is created after specified datetime
+   */
+  async getVectorTileUrl(
+    layerDesign: any,
+    filters: JsonQLFilter[],
+    createdAfter: string
+  ): Promise<{ url: string; expires: string }> {
+    // Create layer
+    const layer = LayerFactory.createLayer(this.options.layerView.type)
+
+    // Put in opacity of 1 as it doesn't affect source data
+    const vectorTile = layer.getVectorTile(layerDesign, this.options.layerView.id, this.options.schema, filters, 1)
+
+    const directTokenRequest: VectorTileDirectTokenRequest = {
+      layers: vectorTile.sourceLayers,
+      ctes: vectorTile.ctes,
+      minZoom: vectorTile.minZoom,
+      maxZoom: vectorTile.maxZoom,
+      createdAfter: createdAfter,
+      // 12 hours
+      expiresAfter: new Date(Date.now() + 1000 * 3600 * 12).toISOString()
+    }
+ 
+    const { url, expires } = await getVectorTileFromDirectRequest({
+      apiUrl: this.options.apiUrl,
+      client: this.options.client,
+      directTokenRequest,
+      createdAfter
+    })
+
+    return { url, expires }
+  }
+
+  // Get the url for the image tiles with the specified filters applied
+  // Called with (design, filters) where design is the design of the layer and filters are filters to apply. Returns URL
+  getTileUrl(design: any, filters: JsonQLFilter[]) {
+    // Create layer
+    const layer = LayerFactory.createLayer(this.options.layerView.type)
+
+    // Handle special cases
+    if (this.options.layerView.type === "MWaterServer") {
+      return this.createLegacyUrl(design, "png", filters)
+    }
+
+    // If layer has tiles url directly available
+    if (layer.getLayerDefinitionType() === "TileUrl") {
+      return (layer as TileUrlLayer).getTileUrl(design, filters)
+    }
+
+    // Get JsonQLCss
+    const jsonqlCss = layer.getJsonQLCss(design, this.options.schema, filters)
+
+    return this.createUrl("png", jsonqlCss)
+  }
+
+  // Get the url for the interactivity tiles with the specified filters applied
+  // Called with (design, filters) where design is the design of the layer and filters are filters to apply. Returns URL
+  getUtfGridUrl(design: any, filters: JsonQLFilter[]) {
+    // Create layer
+    const layer = LayerFactory.createLayer(this.options.layerView.type)
+
+    // Handle special cases
+    if (this.options.layerView.type === "MWaterServer") {
+      return this.createLegacyUrl(design, "grid.json", filters)
+    }
+
+    // If layer has tiles url directly available
+    if (layer.getLayerDefinitionType() === "TileUrl") {
+      return layer.getUtfGridUrl(design, filters)
+    }
+
+    // Get JsonQLCss
+    const jsonqlCss = layer.getJsonQLCss(design, this.options.schema, filters)
+
+    return this.createUrl("grid.json", jsonqlCss)
+  }
+
+  // Gets widget data source for a popup widget
+  getPopupWidgetDataSource(design: any, widgetId: string) {
+    // Create layer
+    let type
+    const layer = LayerFactory.createLayer(this.options.layerView.type)
+
+    // Get widget
+    ;({ type, design } = new BlocksLayoutManager().getWidgetTypeAndDesign(design.popup.items, widgetId)!)
+
+    // Create widget
+    const widget = WidgetFactory.createWidget(type)
+
+    return new DirectWidgetDataSource({
+      widget,
+      schema: this.options.schema,
+      dataSource: this.options.dataSource,
+      apiUrl: this.options.apiUrl,
+      client: this.options.client
+    })
+  }
+
+  // Create query string
+  createUrl(extension: string, jsonqlCss: JsonQLCssLayerDefinition) {
+    const query: any = {
+      type: "jsonql",
+      design: compressJson(jsonqlCss)
+    }
+
+    if (this.options.client) {
+      query.client = this.options.client
+    }
+
+    // Make URL change when cache expired
+    const cacheExpiry = this.options.dataSource.getCacheExpiry()
+    if (cacheExpiry) {
+      query.cacheExpiry = cacheExpiry
+    }
+
+    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
+  }
+
+  // Create query string
+  createLegacyUrl(design: any, extension: string, filters: JsonQLFilter[]) {
+    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}`
+    }
+
+    // Add where for any relevant filters
+    const relevantFilters = _.where(filters, { table: design.table })
+
+    // If any, create and
+    const whereClauses = _.map(relevantFilters, (f) => injectTableAlias(f.jsonql, "main"))
+
+    // Wrap if multiple
+    if (whereClauses.length > 1) {
+      where = { type: "op", op: "and", exprs: whereClauses }
+    } else {
+      where = whereClauses[0]
+    }
+
+    if (where) {
+      url += "&where=" + encodeURIComponent(compressJson(where))
+    }
+
+    return url
+  }
+}

package/src/maps/EditHoverOver.tsx

@@ -0,0 +1,151 @@
+import { omit } from "lodash"
+import { DataSource, Expr, Schema } from "@mwater/expressions"
+import { ExprComponent } from "@mwater/expressions-ui"
+import React, { useState } from "react"
+import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import uuid from "uuid"
+import { HoverOverItem } from "./maps"
+
+export interface EditHoverOverProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** Design of the marker layer */
+  design: any
+  /** Called with new design */
+  onDesignChange: any
+  /** Table that popup is for */
+  table: string
+  /** Table of the row that join is to. Usually same as table except for choropleth maps */
+  idTable: string
+  defaultPopupFilterJoins: any
+}
+
+const EditHoverOver: React.FC<EditHoverOverProps> = props => {
+  const [editing, setEditing] = useState(false)
+
+  const handleRemovePopup = () => {
+    const design = omit(props.design, "hoverOver")
+    props.onDesignChange(design)
+  }
+
+  const handleDesignChange = (items: HoverOverItem[]) => {
+    const hoverOver = { ...(props.design.hoverOver ?? {}), items }
+    const design = { ...props.design, hoverOver }
+
+    return props.onDesignChange(design)
+  }
+
+  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 } }
+
+    return props.onDesignChange(design)
+  }
+
+  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 } }
+
+    return props.onDesignChange(design)
+  }
+
+  return (
+    <>
+      <button className="btn btn-link" onClick={() => setEditing(true)}>
+        <span className="fa fa-pencil" /> Customize Hoverover
+      </button>
+      {props.design.hoverOver && (
+        <button className="btn btn-link" onClick={handleRemovePopup}>
+          <span className="fa fa-times" /> Remove Hover over
+        </button>
+      )}
+
+      {editing && (
+        <ModalWindowComponent isOpen onRequestClose={() => setEditing(false)}>
+          {(props.design.hoverOver?.items ?? []).length > 0 && (
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Label</th>
+                  <th>Value</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {props.design.hoverOver?.items.map((item: HoverOverItem) => (
+                  <HoverOverItemEditor
+                    schema={props.schema}
+                    dataSource={props.dataSource}
+                    table={props.design.table}
+                    onItemChange={handleItemChange}
+                    onItemDelete={handleItemDelete}
+                    item={item}
+                  />
+                ))}
+              </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" />
+              Add item
+            </button>
+          )}
+        </ModalWindowComponent>
+      )}
+    </>
+  )
+}
+
+interface HoverOverItemEditorProps {
+  schema: Schema
+  dataSource: DataSource
+  item: HoverOverItem
+  onItemChange: (item: HoverOverItem) => void
+  onItemDelete: (item: HoverOverItem) => void
+  table: string
+}
+const HoverOverItemEditor: React.FC<HoverOverItemEditorProps> = ({
+  schema,
+  dataSource,
+  table,
+  item,
+  onItemChange,
+  onItemDelete
+}) => {
+  return (
+    <tr>
+      <td>
+        <ui.TextInput value={item.label} onChange={value => onItemChange({ ...item, label: value })} />
+      </td>
+      <td>
+        <ExprComponent
+          schema={schema}
+          dataSource={dataSource}
+          table={table}
+          types={["text", "number", "enum", "boolean", "date", "datetime", "id"]}
+          onChange={expr => onItemChange({ ...item, value: expr })}
+          value={item.value ?? null}
+          aggrStatuses={["individual", "literal", "aggregate"]}
+        />
+      </td>
+      <td>
+        <button className="btn btn-link" onClick={() => onItemDelete(item)}>
+          <span className="fa fa-close" />
+        </button>
+      </td>
+    </tr>
+  )
+}
+
+export default EditHoverOver

package/src/maps/EditPopupComponent.ts

@@ -0,0 +1,121 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent"
+import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
+import WidgetFactory from "../widgets/WidgetFactory"
+import DirectWidgetDataSource from "../widgets/DirectWidgetDataSource"
+import PopupFilterJoinsEditComponent from "./PopupFilterJoinsEditComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+
+export interface EditPopupComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** Design of the marker layer */
+  design: any
+  /** Called with new design */
+  onDesignChange: any
+  /** Table that popup is for */
+  table: string
+  /** Table of the row that join is to. Usually same as table except for choropleth maps */
+  idTable: string
+  defaultPopupFilterJoins: any
+}
+
+interface EditPopupComponentState {
+  editing: any
+}
+
+// Modal for editing design of popup
+export default class EditPopupComponent extends React.Component<EditPopupComponentProps, EditPopupComponentState> {
+  constructor(props: any) {
+    super(props)
+    this.state = { editing: false }
+  }
+
+  handleItemsChange = (items: any) => {
+    let popup = this.props.design.popup || {}
+    popup = _.extend({}, popup, { items })
+    const design = _.extend({}, this.props.design, { popup })
+    return this.props.onDesignChange(design)
+  }
+
+  handleRemovePopup = () => {
+    const design = _.omit(this.props.design, "popup")
+    return this.props.onDesignChange(design)
+  }
+
+  render() {
+    return R(
+      "div",
+      null,
+      R(
+        "a",
+        { className: "btn btn-link", onClick: () => this.setState({ editing: true }) },
+        R("i", { className: "fa fa-pencil" }),
+        " Customize Popup"
+      ),
+
+      this.props.design.popup
+        ? R(
+            "a",
+            { className: "btn btn-link", onClick: this.handleRemovePopup },
+            R("i", { className: "fa fa-times" }),
+            " Remove Popup"
+          )
+        : undefined,
+
+      this.props.design.popup
+        ? R(PopupFilterJoinsEditComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.table,
+            idTable: this.props.idTable,
+            defaultPopupFilterJoins: this.props.defaultPopupFilterJoins,
+            popup: this.props.design.popup,
+            design: this.props.design.popupFilterJoins,
+            onDesignChange: (popupFilterJoins: any) =>
+              this.props.onDesignChange(_.extend({}, this.props.design, { popupFilterJoins }))
+          })
+        : undefined,
+
+      this.state.editing
+        ? R(
+            ModalWindowComponent,
+            { isOpen: true, onRequestClose: () => this.setState({ editing: false }) },
+            new BlocksLayoutManager().renderLayout({
+              items: this.props.design.popup?.items,
+              style: "popup",
+              onItemsChange: this.handleItemsChange,
+              disableMaps: true,
+              renderWidget: (options: any) => {
+                const widget = WidgetFactory.createWidget(options.type)
+
+                const widgetDataSource = new DirectWidgetDataSource({
+                  widget,
+                  schema: this.props.schema,
+                  dataSource: this.props.dataSource
+                })
+
+                return widget.createViewElement({
+                  schema: this.props.schema,
+                  dataSource: this.props.dataSource,
+                  widgetDataSource,
+                  design: options.design,
+                  scope: null,
+                  filters: [],
+                  onScopeChange: () => {},
+                  onDesignChange: options.onDesignChange,
+                  width: options.width,
+                  height: options.height,
+                  singleRowTable: this.props.table
+                })
+              }
+            })
+          )
+        : undefined
+    )
+  }
+}