@mwater/visualization 5.5.0 → 5.6.1

package/src/maps/BufferLayer.ts

@@ -18,7 +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"
+import { getSimpleHoverOverData, getTranslatableStringsFromAxis, translateAxis } from "./MapUtils"
 
 /** Layer which draws a buffer around geometries (i.e. a radius circle around points) */
 export default class BufferLayer extends Layer<BufferLayerDesign> {
@@ -313,259 +313,6 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
     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: BufferLayerDesign, 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: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]) {
-    let colorExpr: JsonQLExpr
-    const axisBuilder = new AxisBuilder({ schema })
-    const exprCompiler = new ExprCompiler(schema)
-
-    // Get radius expression
-    const radiusCompiledExpr: JsonQLExpr = exprCompiler.compileExpr({
-      expr: design.radiusExpr ?? { type: "literal", valueType: "number", value: design.radius },
-      tableAlias: "main"
-    })
-
-    // Convert radius in meters to a maximum number of degrees latitude
-    const radiusDegCompiledExpr: JsonQLExpr = { type: "op", op: "/", exprs: [radiusCompiledExpr, 100000] }
-
-    /*
-    Query:
-      select
-      <primary key> as id,
-      [<color axis> as color,
-      st_transform(<geometry axis>, 3857) as the_geom_webmercator,
-      radius * 2 / (!pixel_width! * cos(st_ymin(st_transform(geometryExpr, 4326)) * 0.017453293) as width
-      from <table> as main
-      where
-        <geometry axis> is not null
-        * Bounding box filter for speed
-      and <geometry axis> &&
-      ST_Transform(ST_Expand(
-        * Prevent 3857 overflow (i.e. > 85 degrees lat)
-        ST_Intersection(
-          ST_Transform(!bbox!, 4326),
-          ST_Expand(ST_MakeEnvelope(-180, -85, 180, 85, 4326), -<radius in degrees>))
-        , <radius in degrees>})
-      , 3857)
-      and <other filters>
-    */
-
-    // Compile geometry axis
-    let geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry!, tableAlias: "main" })
-
-    // radius * 2 / (!pixel_width! * cos(st_ymin(st_transform(geometryExpr, 4326)) * 0.017453293) + 1 # add one to make always visible
-    const widthExpr: JsonQLExpr = {
-      type: "op",
-      op: "+",
-      exprs: [
-        {
-          type: "op",
-          op: "/",
-          exprs: [
-            { type: "op", op: "*", exprs: [radiusCompiledExpr, 2] },
-            {
-              type: "op",
-              op: "*",
-              exprs: [
-                { type: "op", op: "nullif", exprs: [{ type: "token", token: "!pixel_height!" }, 0] },
-                {
-                  type: "op",
-                  op: "cos",
-                  exprs: [
-                    {
-                      type: "op",
-                      op: "*",
-                      exprs: [
-                        {
-                          type: "op",
-                          op: "ST_YMIN",
-                          exprs: [{ type: "op", op: "ST_Transform", exprs: [geometryExpr, 4326] }]
-                        },
-                        0.017453293
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        2
-      ]
-    }
-
-    const selects: JsonQLSelect[] = [
-      {
-        type: "select",
-        expr: { type: "field", tableAlias: "main", column: schema.getTable(design.table)!.primaryKey },
-        alias: "id"
-      }, // main primary key as id
-      { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" },
-      { type: "select", expr: widthExpr, alias: "width" } // Width of circles
-    ]
-
-    // Add color select if color axis
-    if (design.axes.color) {
-      colorExpr = axisBuilder.compileAxis({ axis: design.axes.color, tableAlias: "main" })
-      selects.push({ type: "select", expr: colorExpr, alias: "color" })
-    }
-
-    // Select _id, location and clustered row number
-    const query: JsonQLQuery = {
-      type: "query",
-      selects,
-      from: exprCompiler.compileTable(design.table, "main")
-    }
-
-    const boundingBox: JsonQLExpr = {
-      type: "op",
-      op: "ST_Transform",
-      exprs: [
-        {
-          type: "op",
-          op: "ST_Expand",
-          exprs: [
-            {
-              type: "op",
-              op: "ST_Intersection",
-              exprs: [
-                { type: "op", op: "ST_Transform", exprs: [{ type: "token", token: "!bbox!" }, 4326] },
-                {
-                  type: "op",
-                  op: "ST_Expand",
-                  exprs: [
-                    { type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] },
-                    { type: "op", op: "*", exprs: [radiusDegCompiledExpr, -1] }
-                  ]
-                }
-              ]
-            },
-            radiusDegCompiledExpr
-          ]
-        },
-        3857
-      ]
-    }
-
-    // Create filters. First ensure geometry and limit to bounding box
-    let whereClauses: JsonQLExpr[] = [
-      { type: "op", op: "is not null", exprs: [geometryExpr] },
-      {
-        type: "op",
-        op: "&&",
-        exprs: [geometryExpr, boundingBox]
-      }
-    ]
-
-    // Then add filters baked into layer
-    if (design.filter) {
-      whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, 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) {
-      query.where = { type: "op", op: "and", exprs: whereClauses }
-    } else {
-      query.where = whereClauses[0]
-    }
-
-    // Sort order
-    if (design.axes.color && design.axes.color.colorMap) {
-      // TODO should use categories, not colormap order
-      const order = design.axes.color.drawOrder || _.pluck(design.axes.color.colorMap, "value")
-      const categories = axisBuilder.getCategories(design.axes.color, order)
-
-      const cases = _.map(categories, (category, i) => {
-        return {
-          when:
-            category.value != null
-              ? ({ type: "op", op: "=", exprs: [colorExpr, category.value] } as JsonQLExpr)
-              : ({ type: "op", op: "is null", exprs: [colorExpr] } as JsonQLExpr),
-          then: order.indexOf(category.value) || -1
-        }
-      })
-
-      if (cases.length > 0) {
-        query.orderBy = [
-          {
-            expr: {
-              type: "case",
-              cases
-            },
-            direction: "desc" // Reverse color map order
-          }
-        ]
-      }
-    }
-
-    return query
-  }
-
-  createCss(design: BufferLayerDesign, schema: Schema) {
-    let css =
-      `\
-#layer0 {
-  marker-fill-opacity: ` +
-      design.fillOpacity +
-      `;
-marker-type: ellipse;
-marker-width: [width];
-marker-line-width: 0;
-marker-allow-overlap: true;
-marker-ignore-placement: true;
-marker-fill: ` +
-      (design.color || "transparent") +
-      `;
-}\
-`
-
-    // If color axes, add color conditions
-    if (design.axes.color != null && design.axes.color.colorMap != null) {
-      for (let item of design.axes.color.colorMap) {
-        // If invisible
-        if ((design.axes.color.excludedValues || []).includes(item.value)) {
-          css += `#layer0 [color=${JSON.stringify(item.value)}] { marker-fill-opacity: 0; }\n`
-        } else {
-          css += `#layer0 [color=${JSON.stringify(item.value)}] { marker-fill: ${item.color}; }\n`
-        }
-      }
-    }
-
-    return css
-  }
-
   // Called when the interactivity grid is clicked.
   // arguments:
   //   ev: { data: interactivty data e.g. `{ id: 123 }` }
@@ -760,7 +507,7 @@ marker-fill: ` +
   // Get the legend to be optionally displayed on the map. Returns
   // a React element
   getLegend(options: LegendOptions<BufferLayerDesign>): ReactNode {
-    const { design, schema, name, dataSource, locale, filters } = options
+    const { design, schema, name, dataSource, locale, filters, translate } = options
     const _filters = filters.slice()
     if (design.filter != null) {
       const exprCompiler = new ExprCompiler(schema)
@@ -771,16 +518,20 @@ marker-fill: ` +
     }
 
     const axisBuilder = new AxisBuilder({ schema })
+    
+    // Clean and translate axis
+    const axis = translateAxis(axisBuilder.cleanAxis({
+      axis: design.axes.color,
+      table: design.table,
+      types: ["enum", "text", "boolean", "date"],
+      aggrNeed: "none"
+    }), translate)
+
     return React.createElement(LayerLegendComponent, {
       schema,
-      name,
+      name: translate(name),
       filters: _.compact(_filters),
-      axis: axisBuilder.cleanAxis({
-        axis: design.axes.color,
-        table: design.table,
-        types: ["enum", "text", "boolean", "date"],
-        aggrNeed: "none"
-      })!,
+      axis: axis!,
       radiusLayer: true,
       defaultColor: design.color,
       locale
@@ -869,6 +620,19 @@ marker-fill: ` +
       })
 
       draft.filter = exprCleaner.cleanExpr(design.filter || null, { table: design.table })
+
+      // Clean hover over expressions 
+      if (design.table && design.hoverOver && design.hoverOver.items) {
+        for (let i = 0; i < design.hoverOver.items.length; i++) {
+          const item = design.hoverOver.items[i]
+          if (item.value) {
+            draft.hoverOver!.items[i].value = exprCleaner.cleanExpr(item.value || null, {
+              table: design.table,
+              aggrStatuses: ["individual", "literal"]
+            })
+          }
+        }
+      }
     })
 
     return design
@@ -919,6 +683,9 @@ marker-fill: ` +
   getTranslatableStrings(design: BufferLayerDesign, schema: Schema): string[] {
     const strings: string[] = []
 
+    // Add strings from axis category labels and null labels
+    strings.push(...getTranslatableStringsFromAxis(design.axes.color))
+
     // Add strings from hoverOver items
     if (design.hoverOver && design.hoverOver.items) {
       for (const item of design.hoverOver.items) {
@@ -962,7 +729,7 @@ marker-fill: ` +
       filters: options.filters,
       schema: options.schema,
       dataSource: options.dataSource,
-      hoverOverItems: options.design.hoverOver.items,
+      hoverOverItems: options.design.hoverOver!.items,
     })
   }
 }

package/src/maps/BufferLayerDesign.ts

@@ -47,7 +47,7 @@ export interface BufferLayerDesign {
   popup: { items: LayoutBlock }
 
   /** Contains items: which is HoverOverItem[] */
-  hoverOver: { items: HoverOverItem[] }
+  hoverOver?: { items: HoverOverItem[] }
 
   /** Customizable filtering for popup. See PopupFilterJoins.md */
   popupFilterJoins: PopupFilterJoins

package/src/maps/BufferLayerDesignerComponent.tsx

@@ -14,8 +14,7 @@ import * as PopupFilterJoinsUtils from "./PopupFilterJoinsUtils"
 import { Checkbox } from "@mwater/react-library/lib/bootstrap"
 import { BufferLayerDesign } from "./BufferLayerDesign"
 import { JsonQLFilter } from "../JsonQLFilter"
-import { areVectorMapsEnabled } from "./vectorMaps"
-import EditHoverOver from "./EditHoverOver"
+import { EditHoverOver } from "./EditHoverOver"
 
 export interface BufferLayerDesignerComponentProps {
   /** Schema to use */
@@ -138,11 +137,6 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
   }
 
   renderUnionShapes() {
-    // Only implemented for vector maps
-    if (!areVectorMapsEnabled()) {
-      return null
-    }
-
     return (
       <div className="mb-3">
         <Checkbox
@@ -281,6 +275,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
         table={this.props.design.table}
         idTable={this.props.design.table}
         defaultPopupFilterJoins={PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)}
+        aggrStatuses={["individual", "literal"]}
       />
     )
   }