@mwater/visualization 5.5.0 → 5.6.1

package/src/maps/MapLayerViewDesignerComponent.ts

@@ -25,6 +25,8 @@ export interface MapLayerViewDesignerComponentProps {
   connectDropTarget?: any
   allowEditingLayer: boolean
   filters?: any
+  /** Translate function to use for display */
+  translate?: (input: string) => string
 }
 
 interface MapLayerViewDesignerComponentState {
@@ -36,7 +38,7 @@ export default class MapLayerViewDesignerComponent extends React.Component<
   MapLayerViewDesignerComponentProps,
   MapLayerViewDesignerComponentState
 > {
-  constructor(props: any) {
+  constructor(props: MapLayerViewDesignerComponentProps) {
     super(props)
 
     const layer = LayerFactory.createLayer(this.props.layerView.type)
@@ -127,10 +129,15 @@ export default class MapLayerViewDesignerComponent extends React.Component<
   }
 
   renderName() {
+    // Translate the name if a translate function is provided
+    const displayName = this.props.translate 
+      ? this.props.translate(this.props.layerView.name) 
+      : this.props.layerView.name
+
     return R(
       "span",
       { className: "hover-display-parent", onClick: this.handleRename, style: { cursor: "pointer" } },
-      this.props.layerView.name,
+      displayName,
       " ",
       R("span", { className: "hover-display-child fas fa-pencil-alt text-muted" })
     )

package/src/maps/MapLayersDesignerComponent.ts

@@ -21,6 +21,8 @@ export interface MapLayersDesignerComponentProps {
   /** True to allow editing layers */
   allowEditingLayers: boolean
   filters?: any
+  /** Translate function to use for display */
+  translate?: (input: string) => string
 }
 
 // Designer for layer selection in the map
@@ -102,7 +104,8 @@ export default class MapLayersDesignerComponent extends React.Component<MapLayer
         connectDragPreview,
         connectDropTarget,
         allowEditingLayer: this.props.allowEditingLayers,
-        filters: _.compact(filters)
+        filters: _.compact(filters),
+        translate: this.props.translate
       })
     )
   }

package/src/maps/MapTranslationsTab.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from "react"
+import { Schema } from "@mwater/expressions"
+import { MapDesign } from "./MapDesign"
+import { TranslationsTabComponent } from "../TranslationsTabComponent"
+import * as MapUtils from "./MapUtils"
+import produce from "immer"
+
+export interface MapTranslationsTabProps {
+  /** Schema to use */
+  schema: Schema
+  /** Map design */
+  design: MapDesign
+  /** Called with new design */
+  onDesignChange: (design: MapDesign) => void
+}
+
+/**
+ * Translations tab for map designer that wraps the reusable TranslationsTabComponent
+ */
+export function MapTranslationsTab(props: MapTranslationsTabProps) {
+  const { design, onDesignChange, schema } = props
+
+  const translatableStrings = useMemo(
+    () => MapUtils.getTranslatableStrings(design, schema),
+    [design, schema]
+  )
+
+  return (
+    <TranslationsTabComponent
+      locale={design.locale || "en"}
+      otherLocales={design.otherLocales || []}
+      translations={design.translations || {}}
+      translatableStrings={translatableStrings}
+      onLocaleChange={(locale) =>
+        onDesignChange(produce(design, draft => {
+          draft.locale = locale
+        }))
+      }
+      onOtherLocalesChange={(otherLocales) =>
+        onDesignChange(produce(design, draft => {
+          draft.otherLocales = otherLocales
+        }))
+      }
+      onTranslationsChange={(translations) =>
+        onDesignChange(produce(design, draft => {
+          draft.translations = translations
+        }))
+      }
+      downloadFilename="Map Translations.xlsx"
+      baseLanguageDescription={T`This is the language that the map is written in.`}
+    />
+  )
+}

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
  */
@@ -191,21 +239,33 @@ export async function getSimpleHoverOverData(options: {
 }) {
   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
   }
 
-  for (const item of hoverOverItems) {
+  // 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)
+      }
     }
   }
 

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 */
@@ -115,6 +115,9 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
         filter: addFilter(["==", ["geometry-type"], "Point"])
       })
     } else {
+      // For some reason, scales down from 20 to 14. No idea why
+      const iconSize = (design.markerSize || 10) / 14
+
       mapLayers.push({
         id: `${sourceId}:points`,
         type: "symbol",
@@ -123,11 +126,60 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
         layout: {
           "icon-image": design.symbol,
           "icon-allow-overlap": true,
-          "icon-size": (design.markerSize || 10) / 14 // For some reason, scales down from 20 to 14. No idea why
+          "icon-size": iconSize,
         },
         paint: {
           "icon-color": color,
-          "icon-opacity": opacity
+          "icon-opacity": opacity,
+          "icon-halo-color": compileColorToMapbox("#FFFFFFCC", design.axes.color?.excludedValues),
+          "icon-halo-width": iconSize * 5,
+        },
+        filter: addFilter(["==", ["geometry-type"], "Point"])
+      })
+    }
+
+    // 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"])
       })
@@ -175,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[] = []
 
@@ -204,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 },
@@ -647,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,
@@ -654,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
     })
   }
@@ -734,8 +533,27 @@ ${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 })
+
+      // 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
@@ -765,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"
@@ -783,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) {
@@ -804,7 +631,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
   }
 
   /** 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 
+   * 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: {
@@ -825,7 +652,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
       filters: options.filters,
       schema: options.schema,
       dataSource: options.dataSource,
-      hoverOverItems: options.design.hoverOver.items,
+      hoverOverItems: options.design.hoverOver!.items,
     })
   }
 }
@@ -971,4 +798,3 @@ export function createMarkersVectorQuery(baseQuery: JsonQLSelectQuery) {
 
   return outerquery
 }
-