@mwater/visualization 5.6.0 → 5.6.1

package/src/maps/MapUtils.ts

@@ -8,6 +8,7 @@ import LayerFactory from "./LayerFactory"
 import { MapDesign } from "./MapDesign"
 import { produce } from "immer"
 import { HoverOverItem } from "./maps"
+import { Axis } from "../axes/Axis"
 
 export interface MapScope {
   name: string
@@ -172,6 +173,53 @@ export function getTranslatableStrings(design: MapDesign, schema: Schema): strin
   return _.uniq(strings)
 }
 
+/**
+ * Get translatable strings from an axis's categoryLabels and nullLabel.
+ * Always includes "None" since it's the default label for null values in AxisBuilder.
+ */
+export function getTranslatableStringsFromAxis(axis: Axis | null | undefined): string[] {
+  const strings: string[] = []
+  if (axis?.categoryLabels) {
+    strings.push(...Object.values(axis.categoryLabels))
+  }
+  if (axis?.nullLabel) {
+    strings.push(axis.nullLabel)
+  } else {
+    // Always include "None" as it's the default nullLabel in AxisBuilder
+    strings.push("None")
+  }
+  return strings
+}
+
+/**
+ * Translate an axis's category labels and null label.
+ * If no nullLabel is set, translates the default "None" and sets it so AxisBuilder uses it.
+ */
+export function translateAxis(
+  axis: Axis | null | undefined, 
+  translate: (input: string) => string
+): Axis | null | undefined {
+  if (!axis) return axis
+  
+  return produce(axis, draft => {
+    if (draft.categoryLabels) {
+      for (const key in draft.categoryLabels) {
+        draft.categoryLabels[key] = translate(draft.categoryLabels[key])
+      }
+    }
+    if (draft.nullLabel) {
+      draft.nullLabel = translate(draft.nullLabel)
+    } else {
+      // Translate the default "None" and set it so AxisBuilder uses it
+      // instead of falling back to T`None` which uses the global locale
+      const translatedNone = translate("None")
+      if (translatedNone !== "None") {
+        draft.nullLabel = translatedNone
+      }
+    }
+  })
+}
+
 /**
  * Convenience function to get hover over data for a map given an id and a list of hover over items
  */

package/src/maps/MapViewComponent.tsx

@@ -6,8 +6,6 @@ import { MapDesign } from "./MapDesign"
 import { MapDataSource } from "./MapDataSource"
 import { VectorMapViewComponent } from "./VectorMapViewComponent"
 import { MapScope } from "./MapUtils"
-import RasterMapViewComponent from "./RasterMapViewComponent"
-import { areVectorMapsEnabled } from "./vectorMaps"
 
 export interface MapViewComponentProps {
   schema: Schema
@@ -50,7 +48,7 @@ export interface MapViewComponentProps {
   /** Locale to use. Overrides map design locale */
   locale?: string
 
-  /** Translate function to use for display. TODO: implement this */
+  /** Translate function to use for display */
   translate?: (input: string) => string
 
   /** Increment to force refresh */
@@ -62,9 +60,5 @@ export interface MapViewComponentProps {
 
 /** Component that displays just the map */
 export function MapViewComponent(props: MapViewComponentProps) {
-  if (areVectorMapsEnabled()) {
-    return <VectorMapViewComponent {...props} />
-  } else {
-    return <RasterMapViewComponent {...props} />
-  }
+  return <VectorMapViewComponent {...props} />
 }

package/src/maps/MarkersLayer.ts

@@ -20,7 +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"
+import { getSimpleHoverOverData, getTranslatableStringsFromAxis, translateAxis } from "./MapUtils"
 
 export default class MarkersLayer extends Layer<MarkersLayerDesign> {
   /** Gets the type of layer definition */
@@ -138,6 +138,53 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
       })
     }
 
+    // Add labels layer if label axis is defined (points only)
+    if (design.axes.label) {
+      // Determine text-anchor and text-offset based on labelPosition
+      let textAnchor: "top" | "bottom" | "left" | "right"
+      let textOffset: [number, number]
+      switch (design.labelPosition) {
+        case "top":
+          textAnchor = "bottom"
+          textOffset = [0, -0.8]
+          break
+        case "left":
+          textAnchor = "right"
+          textOffset = [-0.8, 0]
+          break
+        case "right":
+          textAnchor = "left"
+          textOffset = [0.8, 0]
+          break
+        case "bottom":
+        default:
+          textAnchor = "top"
+          textOffset = [0, 0.8]
+          break
+      }
+
+      mapLayers.push({
+        id: `${sourceId}:labels`,
+        type: "symbol",
+        source: sourceId,
+        "source-layer": "main",
+        layout: {
+          "text-field": ["to-string", ["get", "label"]],
+          "text-size": 10,
+          "text-anchor": textAnchor,
+          "text-offset": textOffset,
+          "text-allow-overlap": false
+        },
+        paint: {
+          "text-color": compileColorToMapbox("#000000", design.axes.color?.excludedValues),
+          "text-halo-color": compileColorToMapbox("rgba(255, 255, 255, 0.8)", design.axes.color?.excludedValues),
+          "text-halo-width": 1.5,
+          "text-opacity": opacity
+        },
+        filter: addFilter(["==", ["geometry-type"], "Point"])
+      })
+    }
+
     return {
       sourceLayers: [{ id: "main", jsonql }],
       ctes: [],
@@ -180,6 +227,12 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
       basequery.selects.push({ type: "select", expr: colorExpr, alias: "color" })
     }
 
+    // Add label select if label axis
+    if (design.axes.label) {
+      const labelExpr = axisBuilder.compileAxis({ axis: design.axes.label, tableAlias: "basequery" })
+      basequery.selects.push({ type: "select", expr: labelExpr, alias: "label" })
+    }
+
     // Create filters
     let whereClauses: JsonQLExpr[] = []
 
@@ -209,269 +262,6 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
     return markersQuery
   }
 
-  // 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: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]) {
-    // Create design
-    const layerDef = {
-      layers: [
-        {
-          id: "layer0",
-          jsonql: this.createMapnikJsonQL(design, schema, filters)
-        }
-      ],
-      css: this.createCss(design),
-      interactivity: {
-        layer: "layer0",
-        fields: ["id"]
-      }
-    }
-
-    return layerDef
-  }
-
-  createMapnikJsonQL(design: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery {
-    const axisBuilder = new AxisBuilder({ schema })
-    const exprCompiler = new ExprCompiler(schema)
-
-    // Compile geometry axis
-    let geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "innerquery" })
-
-    // row_number() over (partition by round(ST_XMin(location)/!(pixel_width!*5)), round(ST_YMin(location)/(!pixel_height!*5))) AS r
-    const cluster: JsonQLSelect = {
-      type: "select",
-      expr: {
-        type: "op",
-        op: "row_number",
-        exprs: [],
-        over: {
-          partitionBy: [
-            {
-              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!" }, 5] }
-                  ]
-                }
-              ]
-            },
-            {
-              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] }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      },
-      alias: "r"
-    }
-
-    // Select _id, location and clustered row number
-    const innerquery: JsonQLSelectQuery = {
-      type: "query",
-      selects: [
-        {
-          type: "select",
-          expr: { type: "field", tableAlias: "innerquery", column: schema.getTable(design.table)!.primaryKey },
-          alias: "id"
-        }, // main primary key as id
-        { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" }, // geometry as the_geom_webmercator
-        cluster
-      ],
-      from: exprCompiler.compileTable(design.table, "innerquery")
-    }
-
-    // Add color select if color axis
-    if (design.axes.color) {
-      const colorExpr = axisBuilder.compileAxis({ axis: design.axes.color, tableAlias: "innerquery" })
-      innerquery.selects.push({ type: "select", expr: colorExpr, alias: "color" })
-    }
-
-    // Create filters. First 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, tableAlias: "innerquery" }))
-    }
-
-    // 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, "innerquery"))
-    }
-
-    whereClauses = _.compact(whereClauses)
-
-    // Wrap if multiple
-    if (whereClauses.length > 1) {
-      innerquery.where = { type: "op", op: "and", exprs: whereClauses }
-    } else {
-      innerquery.where = whereClauses[0]
-    }
-
-    // Create outer query which takes where r <= 3 to limit # of points in a cluster
-    const outerquery: JsonQLQuery = {
-      type: "query",
-      selects: [
-        {
-          type: "select",
-          expr: { type: "field", tableAlias: "innerquery", column: "id" },
-          alias: "id"
-        }, // innerquery._id as id
-        {
-          type: "select",
-          expr: { type: "field", tableAlias: "innerquery", column: "the_geom_webmercator" },
-          alias: "the_geom_webmercator"
-        }, // innerquery.the_geom_webmercator as the_geom_webmercator
-        {
-          type: "select",
-          expr: {
-            type: "op",
-            op: "ST_GeometryType",
-            exprs: [{ type: "field", tableAlias: "innerquery", column: "the_geom_webmercator" }]
-          },
-          alias: "geometry_type"
-        } // ST_GeometryType(innerquery.the_geom_webmercator) as geometry_type
-      ],
-      from: { type: "subquery", query: innerquery, alias: "innerquery" },
-      where: { type: "op", op: "<=", exprs: [{ type: "field", tableAlias: "innerquery", column: "r" }, 3] }
-    }
-
-    // Add color select if color axis
-    if (design.axes.color) {
-      outerquery.selects.push({
-        type: "select",
-        expr: { type: "field", tableAlias: "innerquery", column: "color" },
-        alias: "color"
-      }) // innerquery.color as color
-    }
-
-    return outerquery
-  }
-
-  // Creates CartoCSS
-  createCss(design: MarkersLayerDesign) {
-    let stroke, symbol
-    let css = ""
-
-    if (design.symbol) {
-      symbol = `marker-file: url(${design.symbol});`
-      stroke = "marker-line-width: 60;"
-    } else {
-      symbol = "marker-type: ellipse;"
-      stroke = "marker-line-width: 1;"
-    }
-
-    // Should only display markers when it is a point geometry
-    css +=
-      `\
-#layer0[geometry_type='ST_Point'] {
-  marker-fill: ` +
-      (design.color || "#666666") +
-      `;
-marker-width: ` +
-      (design.markerSize || 10) +
-      `;
-marker-line-color: white;\
-` +
-      stroke +
-      `\
-marker-line-opacity: 0.6;
-marker-placement: point;\
-` +
-      symbol +
-      `\
-  marker-allow-overlap: true;
-}
-#layer0 {
-  line-color: ` +
-      (design.color || "#666666") +
-      `;
-line-width: ` +
-      (design.lineWidth != null ? design.lineWidth : "3") +
-      `;
-}
-#layer0[geometry_type='ST_Polygon'],#layer0[geometry_type='ST_MultiPolygon'] {
-  polygon-fill: ` +
-      (design.color || "#666666") +
-      `;
-  polygon-opacity: ${design.polygonFillOpacity ?? 0.25};
-}
-\
-`
-
-    // If color axes, add color conditions
-    if (design.axes.color && design.axes.color.colorMap) {
-      for (let item of design.axes.color.colorMap) {
-        // If invisible
-        if (_.includes(design.axes.color.excludedValues || [], item.value)) {
-          css +=
-            `\
-#layer0[color=` +
-            JSON.stringify(item.value) +
-            `] { line-opacity: 0; marker-line-opacity: 0; marker-fill-opacity: 0; polygon-opacity: 0; }\
-`
-        } else {
-          css +=
-            `\
-#layer0[color=` +
-            JSON.stringify(item.value) +
-            "] { line-color: " +
-            item.color +
-            ` }
-#layer0[color=` +
-            JSON.stringify(item.value) +
-            "][geometry_type='ST_Point'] { marker-fill: " +
-            item.color +
-            ` }
-#layer0[color=` +
-            JSON.stringify(item.value) +
-            "][geometry_type='ST_Polygon'],#layer0[color=" +
-            JSON.stringify(item.value) +
-            `][geometry_type='ST_MultiPolygon'] {
-polygon-fill: ` +
-            item.color +
-            `;\
-${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" : ""}\
-}\
-`
-        }
-      }
-    }
-
-    return css
-  }
-
   // same as onGridClick but handles hover over
   onGridHoverOver(
     ev: { data: any; event: any },
@@ -652,6 +442,15 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
     }
 
     const axisBuilder = new AxisBuilder({ schema })
+    
+    // Clean and translate axis
+    const axis = translateAxis(axisBuilder.cleanAxis({
+      axis: design.axes.color || null,
+      table: design.table,
+      types: ["enum", "text", "boolean", "date"],
+      aggrNeed: "none"
+    }), translate)
+
     return React.createElement(LayerLegendComponent, {
       schema,
       defaultColor: design.color,
@@ -659,12 +458,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
       markerSize: design.markerSize,
       name: translate(name),
       filters: _.compact(_filters),
-      axis: axisBuilder.cleanAxis({
-        axis: design.axes.color || null,
-        table: design.table,
-        types: ["enum", "text", "boolean", "date"],
-        aggrNeed: "none"
-      }),
+      axis,
       locale
     })
   }
@@ -739,6 +533,12 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
         types: ["enum", "text", "boolean", "date"],
         aggrNeed: "none"
       })!
+      draft.axes.label = axisBuilder.cleanAxis({
+        axis: draft.axes.label ? original(draft.axes.label) || null : null,
+        table: design.table,
+        types: ["text", "number"],
+        aggrNeed: "none"
+      }) || undefined
 
       draft.filter = exprCleaner.cleanExpr(design.filter || null, { table: draft.table })
 
@@ -783,6 +583,12 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
       return error
     }
 
+    // Validate label
+    error = axisBuilder.validateAxis({ axis: design.axes.label || null })
+    if (error) {
+      return error
+    }
+
     // Check that doesn't compile to null (persistent bug that haven't been able to track down)
     if (!axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "innerquery" })) {
       return "Null geometry axis"
@@ -801,6 +607,9 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
   getTranslatableStrings(design: MarkersLayerDesign, 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) {

package/src/maps/MarkersLayerDesign.ts

@@ -16,8 +16,14 @@ export interface MarkersLayerDesign {
 
     /** Color axis (to split into series based on a color) */
     color?: Axis
+
+    /** Label expression to display on/near markers (points only) */
+    label?: Axis
   }
 
+  /** Position of label relative to marker. Default "bottom" */
+  labelPosition?: "top" | "bottom" | "left" | "right"
+
   /** Optional logical expression to filter by */
   filter?: Expr