@mwater/visualization 5.5.0 → 5.6.0

package/lib/maps/MapUtils.js

@@ -164,20 +164,29 @@ function getTranslatableStrings(design, schema) {
  */
 async function getSimpleHoverOverData(options) {
     const { id, table, filters, schema, dataSource, hoverOverItems } = options;
+    const exprUtils = new expressions_1.ExprUtils(schema);
     const exprCompiler = new expressions_1.ExprCompiler(schema);
     const query = {
         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);
+            }
         }
     }
     if (filters) {

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,13 @@ 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"])
             });
@@ -662,6 +666,18 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
                 aggrNeed: "none"
             });
             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;
     }

package/lib/maps/MarkersLayerDesign.d.ts

@@ -33,7 +33,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,7 +1,5 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
-import EditPopupComponent from "./EditPopupComponent";
-import MarkerSymbolSelectComponent from "./MarkerSymbolSelectComponent";
 import { MarkersLayerDesign } from "./MarkersLayerDesign";
 export interface MarkersLayerDesignerComponentProps {
     /** Schema to use */
@@ -27,43 +25,16 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
     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>;
+    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;
+    renderPopup(): React.JSX.Element | null;
+    renderHoverOver(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }

package/lib/maps/MarkersLayerDesignerComponent.js

@@ -28,10 +28,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
-const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
+const AxisComponent_1 = __importDefault(require("../axes/AxisComponent"));
 const ColorComponent_1 = __importDefault(require("../ColorComponent"));
 const expressions_ui_2 = require("@mwater/expressions-ui");
 const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
@@ -39,7 +38,7 @@ const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
 const MarkerSymbolSelectComponent_1 = __importDefault(require("./MarkerSymbolSelectComponent"));
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
-const EditHoverOver_1 = __importDefault(require("./EditHoverOver"));
+const EditHoverOver_1 = require("./EditHoverOver");
 const rc_slider_1 = __importDefault(require("rc-slider"));
 // Designer for a markers layer
 class MarkersLayerDesignerComponent extends react_1.default.Component {
@@ -86,19 +85,22 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
         return this.update({ lineWidth });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), R("div", { style: { marginLeft: 10 } }, R(expressions_ui_2.TableSelectComponent, {
-            schema: this.props.schema,
-            value: this.props.design.table,
-            onChange: this.handleTableChange,
-            filter: this.props.design.filter,
-            onFilterChange: this.handleFilterChange
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fa fa-database" }),
+                " ",
+                T `Data Source`),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange }))));
     }
     renderGeometryAxis() {
         if (!this.props.design.table) {
             return;
         }
-        const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " ", T `Location`);
+        const title = react_1.default.createElement("span", null,
+            react_1.default.createElement("span", { className: "fas fa-map-marker-alt" }),
+            " ",
+            T `Location`);
         const filters = lodash_1.default.clone(this.props.filters) || [];
         if (this.props.design.filter != null) {
             const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
@@ -107,16 +109,10 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
                 filters.push({ table: this.props.design.filter.table, jsonql });
             }
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, title), R("div", { style: { marginLeft: 10 } }, R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            types: ["geometry"],
-            aggrNeed: "none",
-            value: this.props.design.axes.geometry,
-            onChange: this.handleGeometryAxisChange,
-            filters
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, title),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["geometry"], aggrNeed: "none", value: this.props.design.axes.geometry, onChange: this.handleGeometryAxisChange, filters: filters }))));
     }
     renderColor() {
         if (!this.props.design.axes.geometry) {
@@ -130,140 +126,114 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
                 filters.push({ table: this.props.design.filter.table, jsonql });
             }
         }
-        return R("div", null, !this.props.design.axes.color
-            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Color`), R("div", null, R(ColorComponent_1.default, {
-                color: this.props.design.color,
-                onChange: this.handleColorChange
-            })))
-            : undefined, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Color By Data`), R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            types: ["text", "enum", "boolean", "date"],
-            aggrNeed: "none",
-            value: this.props.design.axes.color,
-            defaultColor: this.props.design.color,
-            showColorMap: true,
-            onChange: this.handleColorAxisChange,
-            allowExcludedValues: true,
-            filters
-        })));
+        return (react_1.default.createElement("div", null,
+            !this.props.design.axes.color ? (react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "text-muted" },
+                    react_1.default.createElement("span", { className: "fas fa-tint" }),
+                    T `Color`),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.color, onChange: this.handleColorChange })))) : undefined,
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "text-muted" },
+                    react_1.default.createElement("span", { className: "fas fa-tint" }),
+                    T `Color By Data`),
+                react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["text", "enum", "boolean", "date"], aggrNeed: "none", value: this.props.design.axes.color, defaultColor: this.props.design.color, showColorMap: true, onChange: this.handleColorAxisChange, allowExcludedValues: true, filters: filters }))));
     }
     renderSymbol() {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R(MarkerSymbolSelectComponent_1.default, { symbol: this.props.design.symbol, onChange: this.handleSymbolChange });
+        return react_1.default.createElement(MarkerSymbolSelectComponent_1.default, { symbol: this.props.design.symbol, onChange: this.handleSymbolChange });
     }
     renderMarkerSize() {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Marker Size`), R(ui.Select, {
-            value: this.props.design.markerSize || 10,
-            options: [
-                { value: 5, label: T `Extra small` },
-                { value: 8, label: T `Small` },
-                { value: 10, label: T `Normal` },
-                { value: 13, label: T `Large` },
-                { value: 16, label: T `Extra large` }
-            ],
-            onChange: this.handleMarkerSizeChange
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Marker Size`),
+            react_1.default.createElement(ui.Select, { value: this.props.design.markerSize || 10, options: [
+                    { value: 5, label: T `Extra small` },
+                    { value: 8, label: T `Small` },
+                    { value: 10, label: T `Normal` },
+                    { value: 13, label: T `Large` },
+                    { value: 16, label: T `Extra large` }
+                ], onChange: this.handleMarkerSizeChange })));
     }
     renderLineWidth() {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Line Width (for shapes)`), R(ui.Select, {
-            value: this.props.design.lineWidth != null ? this.props.design.lineWidth : 3,
-            options: [
-                { value: 0, label: T `None` },
-                { value: 1, label: T `1 pixel` },
-                { value: 2, label: T `2 pixels` },
-                { value: 3, label: T `3 pixels` },
-                { value: 4, label: T `4 pixels` },
-                { value: 5, label: T `5 pixels` },
-                { value: 6, label: T `6 pixels` }
-            ],
-            onChange: this.handleLineWidthChange
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Line Width (for shapes)`),
+            react_1.default.createElement(ui.Select, { value: this.props.design.lineWidth != null ? this.props.design.lineWidth : 3, options: [
+                    { value: 0, label: T `None` },
+                    { value: 1, label: T `1 pixel` },
+                    { value: 2, label: T `2 pixels` },
+                    { value: 3, label: T `3 pixels` },
+                    { value: 4, label: T `4 pixels` },
+                    { value: 5, label: T `5 pixels` },
+                    { value: 6, label: T `6 pixels` }
+                ], onChange: this.handleLineWidthChange })));
     }
     renderPolygonBorderColor() {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Polygon border color (blank for same as fill color)`), R("div", null, R(ColorComponent_1.default, {
-            color: this.props.design.polygonBorderColor,
-            onChange: this.handlePolygonBorderColorChange
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Polygon border color (blank for same as fill color)`),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.polygonBorderColor, onChange: this.handlePolygonBorderColorChange }))));
     }
     renderPolygonFillOpacity() {
         if (!this.props.design.axes.geometry) {
             return;
         }
         const opacity = this.props.design.polygonFillOpacity != null ? this.props.design.polygonFillOpacity : 0.25;
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", null, T `Polygon Fill Opacity: ${Math.round(opacity * 100)}%`)), R("div", { style: { padding: "10px" } }, react_1.default.createElement(rc_slider_1.default, {
-            min: 0,
-            max: 100,
-            step: 1,
-            tipTransitionName: "rc-slider-tooltip-zoom-down",
-            value: opacity * 100,
-            onChange: this.handlePolygonFillOpacityChange
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", null, T `Polygon Fill Opacity: ${Math.round(opacity * 100)}%`)),
+            react_1.default.createElement("div", { style: { padding: "10px" } },
+                react_1.default.createElement(rc_slider_1.default, { min: 0, max: 100, step: 1, tipTransitionName: "rc-slider-tooltip-zoom-down", value: opacity * 100, onChange: this.handlePolygonFillOpacityChange }))));
     }
     renderFilter() {
         // If no data, hide
         if (!this.props.design.axes.geometry) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T `Filters`), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: this.handleFilterChange,
-            table: this.props.design.table,
-            value: this.props.design.filter
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-filter" }),
+                T `Filters`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(expressions_ui_1.FilterExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleFilterChange, table: this.props.design.table, value: this.props.design.filter }))));
     }
     renderPopup() {
         if (!this.props.design.table) {
             return null;
         }
-        return R(EditPopupComponent_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            idTable: this.props.design.table,
-            defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
-        });
+        return (react_1.default.createElement(EditPopupComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, idTable: this.props.design.table, defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table) }));
     }
     renderHoverOver() {
         if (!this.props.design.table) {
             return null;
         }
-        return R(EditHoverOver_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            idTable: this.props.design.table,
-            defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
-        });
+        return (react_1.default.createElement(EditHoverOver_1.EditHoverOver, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, idTable: this.props.design.table, defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table), aggrStatuses: ["individual", "literal"] }));
     }
     render() {
-        return R("div", null, this.renderTable(), this.renderGeometryAxis(), this.renderColor(), this.renderSymbol(), this.renderMarkerSize(), R(ui.CollapsibleSection, {
-            label: T `Shape Options`,
-            labelMuted: true
-        }, [
-            this.renderLineWidth(),
-            this.renderPolygonBorderColor(),
-            this.renderPolygonFillOpacity(),
-        ]), this.renderFilter(), this.renderPopup(), this.renderHoverOver(), this.props.design.table
-            ? R(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })
-            : undefined);
+        return (react_1.default.createElement("div", null,
+            this.renderTable(),
+            this.renderGeometryAxis(),
+            this.renderColor(),
+            this.renderSymbol(),
+            this.renderMarkerSize(),
+            react_1.default.createElement(ui.CollapsibleSection, { label: T `Shape Options`, labelMuted: true },
+                this.renderLineWidth(),
+                this.renderPolygonBorderColor(),
+                this.renderPolygonFillOpacity()),
+            this.renderFilter(),
+            this.renderPopup(),
+            this.renderHoverOver(),
+            this.props.design.table ? (react_1.default.createElement(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })) : undefined));
     }
 }
 exports.default = MarkersLayerDesignerComponent;

package/lib/maps/ServerMapDataSource.js

@@ -144,22 +144,12 @@ class ServerLayerDataSource {
             rev: this.options.rev
         };
         let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring_1.default.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, extension, filters) {
         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/lib/maps/VectorMapViewComponent.js

@@ -230,17 +230,9 @@ function VectorMapViewComponent(props) {
             else {
                 const tileUrl = props.mapDataSource.getLayerDataSource(layerView.id).getTileUrl(design, []);
                 if (tileUrl) {
-                    // Replace "{s}" with "a", "b", "c"
-                    let tiles = [];
-                    if (tileUrl.includes("{s}")) {
-                        tiles = [tileUrl.replace("{s}", "a"), tileUrl.replace("{s}", "b"), tileUrl.replace("{s}", "c")];
-                    }
-                    else {
-                        tiles = [tileUrl];
-                    }
                     newSources[layerView.id] = {
                         type: "raster",
-                        tiles,
+                        tiles: [tileUrl],
                         tileSize: 256
                     };
                     newLayers.push({