@mwater/visualization 5.5.0 → 5.6.1

package/lib/maps/MapViewComponent.d.ts

@@ -32,7 +32,7 @@ export interface MapViewComponentProps {
     zoomLocked?: boolean;
     /** 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 */
     refreshTrigger?: number;

package/lib/maps/MapViewComponent.js

@@ -6,14 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapViewComponent = MapViewComponent;
 const react_1 = __importDefault(require("react"));
 const VectorMapViewComponent_1 = require("./VectorMapViewComponent");
-const RasterMapViewComponent_1 = __importDefault(require("./RasterMapViewComponent"));
-const vectorMaps_1 = require("./vectorMaps");
 /** Component that displays just the map */
 function MapViewComponent(props) {
-    if ((0, vectorMaps_1.areVectorMapsEnabled)()) {
-        return react_1.default.createElement(VectorMapViewComponent_1.VectorMapViewComponent, { ...props });
-    }
-    else {
-        return react_1.default.createElement(RasterMapViewComponent_1.default, { ...props });
-    }
+    return react_1.default.createElement(VectorMapViewComponent_1.VectorMapViewComponent, { ...props });
 }

package/lib/maps/MarkersLayer.d.ts

@@ -3,26 +3,13 @@ import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef, LegendOpt
 import { Schema, DataSource } from "@mwater/expressions";
 import { OnGridClickResults, OnGridHoverResults } from "./maps";
 import { JsonQLFilter } from "../index";
-import { JsonQLQuery, JsonQLSelectQuery } from "@mwater/jsonql";
+import { JsonQLSelectQuery } from "@mwater/jsonql";
 import { MarkersLayerDesign } from "./MarkersLayerDesign";
 export default class MarkersLayer extends Layer<MarkersLayerDesign> {
     /** Gets the type of layer definition */
     getLayerDefinitionType(): "VectorTile";
     getVectorTile(design: MarkersLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
     createJsonQL(design: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLSelectQuery;
-    getJsonQLCss(design: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]): {
-        layers: {
-            id: string;
-            jsonql: JsonQLQuery;
-        }[];
-        css: string;
-        interactivity: {
-            layer: string;
-            fields: string[];
-        };
-    };
-    createMapnikJsonQL(design: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
-    createCss(design: MarkersLayerDesign): string;
     onGridHoverOver(ev: {
         data: any;
         event: any;

package/lib/maps/MarkersLayer.js

@@ -121,6 +121,8 @@ class MarkersLayer extends Layer_1.default {
             });
         }
         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",
@@ -129,11 +131,58 @@ class MarkersLayer extends Layer_1.default {
                 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": (0, mapboxUtils_1.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;
+            let textOffset;
+            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": (0, mapboxUtils_1.compileColorToMapbox)("#000000", design.axes.color?.excludedValues),
+                    "text-halo-color": (0, mapboxUtils_1.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 +224,11 @@ class MarkersLayer extends Layer_1.default {
             const colorExpr = axisBuilder.compileAxis({ axis: design.axes.color, tableAlias: "basequery" });
             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 = [];
         // Add filters baked into layer
@@ -198,252 +252,6 @@ class MarkersLayer extends Layer_1.default {
         const markersQuery = createMarkersVectorQuery(basequery);
         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, schema, filters) {
-        // 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, schema, filters) {
-        const axisBuilder = new AxisBuilder_1.default({ schema });
-        const exprCompiler = new expressions_1.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 = {
-            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 = {
-            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 = [
-            {
-                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 = lodash_1.default.where(filters, { table: design.table });
-        for (let filter of relevantFilters) {
-            whereClauses.push((0, expressions_1.injectTableAlias)(filter.jsonql, "innerquery"));
-        }
-        whereClauses = lodash_1.default.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 = {
-            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) {
-        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 (lodash_1.default.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, hoverOptions) {
         if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
@@ -587,6 +395,13 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
             }
         }
         const axisBuilder = new AxisBuilder_1.default({ schema });
+        // Clean and translate axis
+        const axis = (0, MapUtils_1.translateAxis)(axisBuilder.cleanAxis({
+            axis: design.axes.color || null,
+            table: design.table,
+            types: ["enum", "text", "boolean", "date"],
+            aggrNeed: "none"
+        }), translate);
         return react_1.default.createElement(LayerLegendComponent_1.default, {
             schema,
             defaultColor: design.color,
@@ -594,12 +409,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
             markerSize: design.markerSize,
             name: translate(name),
             filters: lodash_1.default.compact(_filters),
-            axis: axisBuilder.cleanAxis({
-                axis: design.axes.color || null,
-                table: design.table,
-                types: ["enum", "text", "boolean", "date"],
-                aggrNeed: "none"
-            }),
+            axis,
             locale
         });
     }
@@ -661,7 +471,25 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
                 types: ["enum", "text", "boolean", "date"],
                 aggrNeed: "none"
             });
+            draft.axes.label = axisBuilder.cleanAxis({
+                axis: draft.axes.label ? (0, immer_1.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;
     }
@@ -684,6 +512,11 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
         if (error) {
             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";
@@ -698,6 +531,8 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
     /** Get strings to be translated */
     getTranslatableStrings(design, schema) {
         const strings = [];
+        // Add strings from axis category labels and null labels
+        strings.push(...(0, MapUtils_1.getTranslatableStringsFromAxis)(design.axes.color));
         // Add strings from hoverOver items
         if (design.hoverOver && design.hoverOver.items) {
             for (const item of design.hoverOver.items) {

package/lib/maps/MarkersLayerDesign.d.ts

@@ -13,7 +13,11 @@ export interface MarkersLayerDesign {
         geometry: Axis;
         /** 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;
     /** Color of layer (e.g. #FF8800). Color axis overrides */
@@ -33,7 +37,7 @@ export interface MarkersLayerDesign {
         items: LayoutBlock;
     };
     /** Contains items to display when hovering over the layer */
-    hoverOver: {
+    hoverOver?: {
         items: HoverOverItem[];
     };
     /** Customizable filtering for popup */

package/lib/maps/MarkersLayerDesignerComponent.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { DataSource, Schema } from "@mwater/expressions";
-import EditPopupComponent from "./EditPopupComponent";
-import MarkerSymbolSelectComponent from "./MarkerSymbolSelectComponent";
+import { DataSource, Expr, Schema } from "@mwater/expressions";
 import { MarkersLayerDesign } from "./MarkersLayerDesign";
+import { Axis } from "../axes/Axis";
+import { JsonQLFilter } from "../JsonQLFilter";
 export interface MarkersLayerDesignerComponentProps {
     /** Schema to use */
     schema: Schema;
@@ -10,60 +10,35 @@ export interface MarkersLayerDesignerComponentProps {
     /** Design of the marker layer */
     design: MarkersLayerDesign;
     /** Called with new design */
-    onDesignChange: any;
-    filters?: any;
+    onDesignChange: (design: MarkersLayerDesign) => void;
+    filters?: JsonQLFilter[];
 }
+/** Designer for a markers layer */
 export default class MarkersLayerDesignerComponent extends React.Component<MarkersLayerDesignerComponentProps> {
-    update(updates: any): any;
-    updateAxes(changes: any): any;
-    handleTableChange: (table: any) => any;
-    handleGeometryAxisChange: (axis: any) => any;
-    handleColorAxisChange: (axis: any) => any;
-    handleFilterChange: (expr: any) => any;
-    handleColorChange: (color: any) => any;
-    handlePolygonBorderColorChange: (polygonBorderColor: any) => any;
-    handlePolygonFillOpacityChange: (polygonFillOpacity: any) => any;
-    handleSymbolChange: (symbol: any) => any;
-    handleNameChange: (e: any) => any;
-    handleMarkerSizeChange: (markerSize: any) => any;
-    handleLineWidthChange: (lineWidth: any) => any;
-    renderTable(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement>;
-    renderGeometryAxis(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | undefined;
-    renderColor(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
-    renderSymbol(): React.CElement<import("./MarkerSymbolSelectComponent").MarkerSymbolSelectComponentProps, MarkerSymbolSelectComponent> | undefined;
-    renderMarkerSize(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | undefined;
-    renderLineWidth(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | undefined;
-    renderPolygonBorderColor(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | undefined;
-    renderPolygonFillOpacity(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | undefined;
-    renderFilter(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    renderPopup(): React.CElement<any, EditPopupComponent> | null;
-    renderHoverOver(): React.FunctionComponentElement<{
-        design: MarkersLayerDesign;
-        onDesignChange: any;
-        schema: Schema;
-        dataSource: DataSource;
-        table: string;
-        idTable: string;
-        defaultPopupFilterJoins: {
-            [x: number]: {
-                table: any;
-                type: string;
-            };
-        };
-    }> | null;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    handleTableChange: (table: string) => void;
+    handleGeometryAxisChange: (axis: Axis) => void;
+    handleColorAxisChange: (axis: Axis | null) => void;
+    handleFilterChange: (expr: Expr) => void;
+    handleColorChange: (color: string) => void;
+    handlePolygonBorderColorChange: (polygonBorderColor: string) => void;
+    handlePolygonFillOpacityChange: (polygonFillOpacity: number) => void;
+    handleSymbolChange: (symbol: string) => void;
+    handleMarkerSizeChange: (markerSize: number) => void;
+    handleLineWidthChange: (lineWidth: number) => void;
+    handleLabelAxisChange: (axis: Axis | null) => void;
+    handleLabelPositionChange: (labelPosition: "top" | "bottom" | "left" | "right") => void;
+    renderTable(): React.JSX.Element;
+    renderGeometryAxis(): React.JSX.Element | undefined;
+    renderColor(): React.JSX.Element | undefined;
+    renderSymbol(): React.JSX.Element | undefined;
+    renderMarkerSize(): React.JSX.Element | undefined;
+    renderLineWidth(): React.JSX.Element | undefined;
+    renderPolygonBorderColor(): React.JSX.Element | undefined;
+    renderPolygonFillOpacity(): React.JSX.Element | undefined;
+    renderFilter(): React.JSX.Element | null;
+    renderLabelAxis(): React.JSX.Element | undefined;
+    renderLabelPosition(): React.JSX.Element | undefined;
+    renderPopup(): React.JSX.Element | null;
+    renderHoverOver(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }