@mwater/visualization 5.5.0 → 5.6.1

package/src/maps/ClusterLayer.ts

@@ -305,280 +305,6 @@ export default class ClusterLayer extends Layer<ClusterLayerDesign> {
     return query
   }
 
-  // Gets the layer definition as JsonQL + CSS in format:
-  //   {
-  //     layers: array of { id: layer id, jsonql: jsonql that includes "the_webmercator_geom" as a column }
-  //     css: carto css
-  //     interactivity: (optional) { layer: id of layer, fields: array of field names }
-  //   }
-  // arguments:
-  //   design: design of layer
-  //   schema: schema to use
-  //   filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to put in table alias
-  getJsonQLCss(design: ClusterLayerDesign, schema: Schema, filters: JsonQLFilter[]) {
-    // Create design
-    const layerDef = {
-      layers: [{ id: "layer0", jsonql: this.createMapnikJsonQL(design, schema, filters) }],
-      css: this.createCss(design, schema)
-      // interactivity: {
-      //   layer: "layer0"
-      //   fields: ["id"]
-      // }
-    }
-
-    return layerDef
-  }
-
-  createMapnikJsonQL(design: ClusterLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery {
-    const axisBuilder = new AxisBuilder({ schema })
-    const exprCompiler = new ExprCompiler(schema)
-
-    /*
-    Query:
-      Works by first snapping to grid and then clustering the clusters with slower DBSCAN method
-
-      select 
-        ST_Centroid(ST_Collect(center)) as the_geom_webmercator,
-        sum(cnt) as cnt, 
-        log(sum(cnt)) * 6 + 14 as size from 
-          (
-            select 
-            ST_ClusterDBSCAN(center, (!pixel_width!*30 + !pixel_height!*30)/2, 1) over () as clust,
-            sub1.center as center,
-            cnt as cnt
-            from
-            (
-              select 
-              count(*) as cnt, 
-              ST_Centroid(ST_Collect(<geometry axis>)) as center, 
-              round(ST_XMin(<geometry axis>) /  (!pixel_width!*40)) as gridx,
-              round(ST_YMin(<geometry axis>) /  (!pixel_width!*40)) as gridy,
-              from <table> as main
-              where <geometry axis> && !bbox! 
-                and <geometry axis> is not null
-                and <other filters>
-              group by 3, 4
-            ) as sub1
-          ) as sub2 
-        group by sub2.clust
-
-    */
-
-    // Compile geometry axis
-    let geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry!, tableAlias: "main" })
-
-    // ST_Centroid(ST_Collect(<geometry axis>))
-    let centerExpr: JsonQLExpr = {
-      type: "op",
-      op: "ST_Centroid",
-      exprs: [
-        {
-          type: "op",
-          op: "ST_Collect",
-          exprs: [geometryExpr]
-        }
-      ]
-    }
-
-    const gridXExpr: JsonQLExpr = {
-      type: "op",
-      op: "round",
-      exprs: [
-        {
-          type: "op",
-          op: "/",
-          exprs: [
-            { type: "op", op: "ST_XMin", exprs: [geometryExpr] },
-            { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, 40] }
-          ]
-        }
-      ]
-    }
-
-    const gridYExpr: JsonQLExpr = {
-      type: "op",
-      op: "round",
-      exprs: [
-        {
-          type: "op",
-          op: "/",
-          exprs: [
-            { type: "op", op: "ST_YMin", exprs: [geometryExpr] },
-            { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_height!" }, 5] }
-          ]
-        }
-      ]
-    }
-
-    // Create inner query
-    const innerQuery: JsonQLQuery = {
-      type: "query",
-      selects: [
-        { type: "select", expr: { type: "op", op: "count", exprs: [] }, alias: "cnt" },
-        { type: "select", expr: centerExpr, alias: "center" },
-        { type: "select", expr: gridXExpr, alias: "gridx" },
-        { type: "select", expr: gridYExpr, alias: "gridy" }
-      ],
-      from: exprCompiler.compileTable(design.table, "main"),
-      groupBy: [3, 4]
-    }
-
-    // Create filters. First ensure geometry and limit to bounding box
-    let whereClauses: JsonQLExpr[] = [
-      {
-        type: "op",
-        op: "&&",
-        exprs: [geometryExpr, { type: "token", token: "!bbox!" }]
-      }
-    ]
-
-    // Then add filters baked into layer
-    if (design.filter) {
-      whereClauses.push(exprCompiler.compileExpr({ expr: design.filter || null, tableAlias: "main" }))
-    }
-
-    // Then add extra filters passed in, if relevant
-    // Get relevant filters
-    const relevantFilters = _.where(filters, { table: design.table })
-    for (let filter of relevantFilters) {
-      whereClauses.push(injectTableAlias(filter.jsonql, "main"))
-    }
-
-    whereClauses = _.compact(whereClauses)
-
-    // Wrap if multiple
-    if (whereClauses.length > 1) {
-      innerQuery.where = { type: "op", op: "and", exprs: whereClauses }
-    } else {
-      innerQuery.where = whereClauses[0]
-    }
-
-    // Create next level
-    // select
-    // ST_ClusterDBSCAN(center, (!pixel_width!*30 + !pixel_height!*30)/2, 1) over () as clust,
-    // sub1.center as center,
-    // cnt as cnt from () as innerquery
-    const clustExpr: JsonQLExpr = {
-      type: "op",
-      op: "ST_ClusterDBSCAN",
-      exprs: [
-        { type: "field", tableAlias: "innerquery", column: "center" },
-        {
-          type: "op",
-          op: "/",
-          exprs: [
-            {
-              type: "op",
-              op: "+",
-              exprs: [
-                { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, 30] },
-                { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_height!" }, 30] }
-              ]
-            },
-            2
-          ]
-        },
-        1
-      ],
-      over: {}
-    }
-
-    const inner2Query: JsonQLQuery = {
-      type: "query",
-      selects: [
-        { type: "select", expr: clustExpr, alias: "clust" },
-        { type: "select", expr: { type: "field", tableAlias: "innerquery", column: "center" }, alias: "center" },
-        { type: "select", expr: { type: "field", tableAlias: "innerquery", column: "cnt" }, alias: "cnt" }
-      ],
-      from: { type: "subquery", query: innerQuery, alias: "innerquery" }
-    }
-
-    // Create final level
-    // ST_Centroid(ST_Collect(center)) as the_geom_webmercator,
-    // sum(cnt) as cnt,
-    // log(sum(cnt)) * 6 + 14 as size from
-
-    // ST_Centroid(ST_Collect(center))
-    centerExpr = {
-      type: "op",
-      op: "ST_Centroid",
-      exprs: [
-        {
-          type: "op",
-          op: "ST_Collect",
-          exprs: [{ type: "field", tableAlias: "inner2query", column: "center" }]
-        }
-      ]
-    }
-
-    const cntExpr: JsonQLExpr = {
-      type: "op",
-      op: "sum",
-      exprs: [{ type: "field", tableAlias: "inner2query", column: "cnt" }]
-    }
-
-    const sizeExpr: JsonQLExpr = {
-      type: "op",
-      op: "+",
-      exprs: [{ type: "op", op: "*", exprs: [{ type: "op", op: "log", exprs: [cntExpr] }, 6] }, 14]
-    }
-
-    const query: JsonQLQuery = {
-      type: "query",
-      selects: [
-        { type: "select", expr: centerExpr, alias: "the_geom_webmercator" },
-        { type: "select", expr: cntExpr, alias: "cnt" },
-        { type: "select", expr: sizeExpr, alias: "size" }
-      ],
-      from: { type: "subquery", query: inner2Query, alias: "inner2query" },
-      groupBy: [{ type: "field", tableAlias: "inner2query", column: "clust" }]
-    }
-
-    return query
-  }
-
-  createCss(design: ClusterLayerDesign, schema: Schema) {
-    const css =
-      `\
-#layer0 [cnt>1] {
-  marker-width: [size];
-  marker-line-color: white;
-  marker-line-width: 4;
-  marker-line-opacity: 0.6;
-  marker-placement: point;
-  marker-type: ellipse;
-  marker-allow-overlap: true;
-  marker-fill: ` +
-      (design.fillColor || "#337ab7") +
-      `;
-}
-
-#layer0::l1 [cnt>1] { 
-  text-name: [cnt];
-  text-face-name: 'Arial Bold';
-  text-allow-overlap: true;
-  text-fill: ` +
-      (design.textColor || "white") +
-      `;
-}
-
-#layer0 [cnt=1] {
-  marker-width: 10;
-  marker-line-color: white;
-  marker-line-width: 2;
-  marker-line-opacity: 0.6;
-  marker-placement: point;
-  marker-type: ellipse;
-  marker-allow-overlap: true;
-  marker-fill: ` +
-      (design.fillColor || "#337ab7") +
-      `;
-}\
-`
-
-    return css
-  }
-
   // # Called when the interactivity grid is clicked.
   // # arguments:
   // #   ev: { data: interactivty data e.g. `{ id: 123 }` }

package/src/maps/DirectMapDataSource.ts

@@ -8,7 +8,7 @@ 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 { VectorTileCTE, VectorTileDef, VectorTileSourceLayer } from "./Layer"
 import compressJson from "../compressJson"
 import querystring from "querystring"
 import { MapLayerDataSource } from "./MapLayerDataSource"
@@ -282,32 +282,7 @@ class DirectLayerDataSource implements MapLayerDataSource {
       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)
+    throw new Error("Layer type not supported: " + this.options.layerView.type)
   }
 
   // Gets widget data source for a popup widget
@@ -331,45 +306,11 @@ class DirectLayerDataSource implements MapLayerDataSource {
     })
   }
 
-  // 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}`
     }

package/src/maps/EditHoverOver.tsx

@@ -1,5 +1,5 @@
 import { omit } from "lodash"
-import { DataSource, Expr, ExprUtils, 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 ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
@@ -22,9 +22,12 @@ 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[]
 }
 
-function EditHoverOver(props: EditHoverOverProps) {
+export function EditHoverOver(props: EditHoverOverProps) {
   const { schema, dataSource, design, onDesignChange, table } = props
   const [editing, setEditing] = useState(false)
   const [draftItems, setDraftItems] = useState<HoverOverItem[] | undefined>(undefined)
@@ -103,6 +106,7 @@ function EditHoverOver(props: EditHoverOverProps) {
                     onItemChange={handleItemChange}
                     onItemDelete={handleItemDelete}
                     item={item}
+                    aggrStatuses={props.aggrStatuses}
                   />
                 ))}
               </tbody>
@@ -129,6 +133,8 @@ interface HoverOverItemEditorProps {
   onItemChange: (item: HoverOverItem) => void
   onItemDelete: (item: HoverOverItem) => void
   table: string
+  /** Aggr statuses to allow in hover over expressions */
+  aggrStatuses: AggrStatus[]
 }
 
 function HoverOverItemEditor(props: HoverOverItemEditorProps) {
@@ -173,7 +179,7 @@ function HoverOverItemEditor(props: 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 className="align-middle" style={{ width: "1%", whiteSpace: "nowrap" }}>
@@ -187,5 +193,3 @@ function HoverOverItemEditor(props: HoverOverItemEditorProps) {
     </tr>
   )
 }
-
-export default EditHoverOver

package/src/maps/GridLayer.ts

@@ -254,230 +254,6 @@ export default class GridLayer extends Layer<GridLayerDesign> {
     return query
   }
 
-  /** Gets the layer definition as JsonQL + CSS in format:
-   *   {
-   *     layers: array of { id: layer id, jsonql: jsonql that includes "the_webmercator_geom" as a column }
-   *     css: carto css
-   *     interactivity: (optional) { layer: id of layer, fields: array of field names }
-   *   }
-   * arguments:
-   *   design: design of layer
-   *   schema: schema to use
-   *   filters: array of filters to apply
-   */
-  getJsonQLCss(design: GridLayerDesign, schema: Schema, filters: JsonQLFilter[]): LayerDefinition {
-    // Create design
-    const layerDef = {
-      layers: [{ id: "layer0", jsonql: this.createMapnikJsonQL(design, schema, filters) }],
-      css: this.createCss(design, schema, filters),
-      interactivity: {
-        layer: "layer0",
-        fields: ["id", "name"]
-      }
-    }
-
-    return layerDef
-  }
-
-  createMapnikJsonQL(design: GridLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery {
-    const axisBuilder = new AxisBuilder({ schema })
-    const exprCompiler = new ExprCompiler(schema)
-
-    /* Compile to a query like this:
-      select mwater_hex_make(grid.q, grid.r, !pixel_width!*SIZE) as the_geom_webmercator, data.color as color from 
-          mwater_hex_grid(!bbox!, !pixel_width!*SIZE) as grid 
-        left outer join
-          (select qr.q as q, qr.r as r, COLOREXPR as color from TABLE as innerquery
-            inner join mwater_hex_xy_to_qr(st_xmin(innerquery.LOCATIONEXPR), st_ymin(innerquery.LOCATIONEXPR), !pixel_width!*10) as qr 
-            on true
-            where innerquery.LOCATIONEXPR && ST_Expand(!bbox!, SIZE)
-          group by 1, 2) as data
-        on data.q = grid.q and data.r = grid.r 
-    */
-    const compiledGeometryExpr = exprCompiler.compileExpr({ expr: design.geometryExpr, tableAlias: "innerquery" })
-    const colorExpr = axisBuilder.compileAxis({ axis: design.colorAxis, tableAlias: "innerquery" })
-    let compiledSizeExpr: JsonQLExpr
-
-    if (design.shape == "hex") {
-      // Hex needs distance from center to points
-      compiledSizeExpr =
-        design.sizeUnits == "pixels"
-          ? { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, design.size! / 1.73205] }
-          : { type: "literal", value: design.size! / 1.73205 }
-    } else if (design.shape == "square") {
-      // Square needs distance from center to center
-      compiledSizeExpr =
-        design.sizeUnits == "pixels"
-          ? { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, design.size!] }
-          : { type: "literal", value: design.size! }
-    } else {
-      throw new Error("Unknown shape")
-    }
-
-    // Create inner query
-    const innerQuery: JsonQLQuery = {
-      type: "query",
-      selects: [
-        { type: "select", expr: { type: "field", tableAlias: "qr", column: "q" }, alias: "q" },
-        { type: "select", expr: { type: "field", tableAlias: "qr", column: "r" }, alias: "r" },
-        { type: "select", expr: colorExpr, alias: "color" }
-      ],
-      from: {
-        type: "join",
-        kind: "inner",
-        left: { type: "table", table: design.table!, alias: "innerquery" },
-        right: {
-          type: "subexpr",
-          expr: {
-            type: "op",
-            op: `mwater_${design.shape}_xy_to_qr`,
-            exprs: [
-              { type: "op", op: "ST_XMin", exprs: [compiledGeometryExpr] },
-              { type: "op", op: "ST_YMin", exprs: [compiledGeometryExpr] },
-              compiledSizeExpr
-            ]
-          },
-          alias: "qr"
-        },
-        on: { type: "literal", value: true }
-      },
-      groupBy: [1, 2]
-    }
-
-    // Filter by bounding box
-    let whereClauses: JsonQLExpr[] = [
-      {
-        type: "op",
-        op: "&&",
-        exprs: [
-          compiledGeometryExpr,
-          { type: "op", op: "ST_Expand", exprs: [{ type: "token", token: "!bbox!" }, compiledSizeExpr] }
-        ]
-      }
-    ]
-
-    // Then add filters
-    if (design.filter) {
-      whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "innerquery" }))
-    }
-
-    // Then add extra filters passed in, if relevant
-    const relevantFilters = _.where(filters, { table: design.table })
-    for (let filter of relevantFilters) {
-      whereClauses.push(injectTableAlias(filter.jsonql, "innerquery"))
-    }
-
-    whereClauses = _.compact(whereClauses)
-    if (whereClauses.length > 0) {
-      innerQuery.where = { type: "op", op: "and", exprs: whereClauses }
-    }
-
-    // Now create outer query
-    const query: JsonQLQuery = {
-      type: "query",
-      selects: [
-        {
-          type: "select",
-          expr: {
-            type: "op",
-            op: `mwater_${design.shape}_make`,
-            exprs: [
-              { type: "field", tableAlias: "grid", column: "q" },
-              { type: "field", tableAlias: "grid", column: "r" },
-              compiledSizeExpr
-            ]
-          },
-          alias: "the_geom_webmercator"
-        },
-        { type: "select", expr: { type: "field", tableAlias: "data", column: "color" }, alias: "color" }
-      ],
-      from: {
-        type: "join",
-        kind: "left",
-        left: {
-          type: "subexpr",
-          expr: {
-            type: "op",
-            op: `mwater_${design.shape}_grid`,
-            exprs: [{ type: "token", token: "!bbox!" }, compiledSizeExpr]
-          },
-          alias: "grid"
-        },
-        right: { type: "subquery", query: innerQuery, alias: "data" },
-        // on data.q = grid.q and data.r = grid.r
-        on: {
-          type: "op",
-          op: "and",
-          exprs: [
-            {
-              type: "op",
-              op: "=",
-              exprs: [
-                { type: "field", tableAlias: "data", column: "q" },
-                { type: "field", tableAlias: "grid", column: "q" }
-              ]
-            },
-            {
-              type: "op",
-              op: "=",
-              exprs: [
-                { type: "field", tableAlias: "data", column: "r" },
-                { type: "field", tableAlias: "grid", column: "r" }
-              ]
-            }
-          ]
-        }
-      }
-    }
-
-    return query
-  }
-
-  createCss(design: GridLayerDesign, schema: Schema, filters: JsonQLFilter[]): string {
-    let css =
-      `
-#layer0 {
-  polygon-opacity: ` +
-      design.fillOpacity +
-      `;
-  ` +
-      (design.borderStyle == "color"
-        ? `line-opacity: ` + (1 - (1 - design.fillOpacity!) / 2) + `; `
-        : `line-width: 0;`) +
-      `
-  polygon-fill: transparent;
-}
-\
-`
-    if (!design.colorAxis) {
-      throw new Error("Color axis not set")
-    }
-    // If color axes, add color conditions
-    if (design.colorAxis.colorMap) {
-      for (let item of design.colorAxis.colorMap) {
-        // If invisible
-        if (design.colorAxis.excludedValues && _.any(design.colorAxis.excludedValues, (ev) => ev === item.value)) {
-          css += `#layer0 [color=${JSON.stringify(item.value)}] { 
-            line-color: transparent; 
-            line-opacity: 0; 
-            polygon-opacity: 0; 
-            polygon-fill: transparent; 
-          }\n`
-        } else {
-          css +=
-            `#layer0 [color=${JSON.stringify(item.value)}] { 
-            ` +
-            (design.borderStyle == "color" ? `line-color: ${item.color};` : "") +
-            ` 
-            polygon-fill: ${item.color}; 
-          }\n`
-        }
-      }
-    }
-
-    return css
-  }
-
   // TODO
   // /**
   //  * Called when the interactivity grid is clicked.

package/src/maps/HoverContent.tsx

@@ -57,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]