@mwater/visualization 5.4.5 → 5.6.0

package/lib/maps/LeafletMapComponent.js

@@ -32,7 +32,6 @@ const react_1 = __importStar(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const LeafletLoading_1 = __importDefault(require("./LeafletLoading"));
 const leaflet_1 = __importDefault(require("leaflet"));
-let BingLayer = require("./BingLayer");
 let UtfGridLayer = require("./UtfGridLayer");
 const R = react_1.default.createElement;
 const marker_icon_2x_png_1 = __importDefault(require("./marker-icon-2x.png"));
@@ -266,34 +265,26 @@ class LeafletMapComponent extends react_1.Component {
             }
             switch (this.props.baseLayerId) {
                 case "bing_road":
-                    this.baseLayer = new BingLayer("Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU", {
-                        type: "Road"
+                    this.baseLayer = leaflet_1.default.tileLayer('https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d', {
+                        maxZoom: 20,
+                        attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
                     });
                     break;
-                // @baseLayer = L.tileLayer('https://{s}.api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-                //   attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
-                //   tileSize: 512,
-                //   maxZoom: 21,
-                //   maxNativeZoom: 19,
-                //   subdomains: ["a", "b"],
-                //   zoomOffset: -1,
-                //   id: 'mapbox/streets-v11',
-                //   accessToken: 'pk.eyJ1IjoiZ3Jhc3NpY2siLCJhIjoiY2ozMzU1N3ZoMDA3ZDJxbzh0aTRtOTRoeSJ9.fFWBZ88vbdezyhfw-I-fag'
-                // })
                 case "bing_aerial":
-                    this.baseLayer = new BingLayer("Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU", {
-                        type: "AerialWithLabels"
+                    this.baseLayer = leaflet_1.default.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}.jpg?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d', {
+                        maxZoom: 20,
+                        attribution: '&copy; CNES, Distribution Airbus DS, &copy; Airbus DS, &copy; PlanetObserver (Contains Copernicus Data) | &copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
                     });
                     break;
                 case "cartodb_positron":
-                    this.baseLayer = leaflet_1.default.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
-                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
+                    this.baseLayer = leaflet_1.default.tileLayer("https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d", {
+                        attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
                         maxZoom: 21
                     });
                     break;
                 case "cartodb_dark_matter":
-                    this.baseLayer = leaflet_1.default.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png", {
-                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
+                    this.baseLayer = leaflet_1.default.tileLayer("https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d", {
+                        attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
                         maxZoom: 21
                     });
                     break;

package/lib/maps/MWaterServerLayer.d.ts

@@ -24,8 +24,8 @@ interface LoadingLegendState {
 }
 declare class LoadingLegend extends React.Component<LoadingLegendProps, LoadingLegendState> {
     constructor(props: any);
-    componentDidMount(): JQuery.jqXHR<any>;
-    componentWillReceiveProps(nextProps: any): JQuery.jqXHR<any> | undefined;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
     render(): React.DetailedReactHTMLElement<{
         style: {
             font: "14px/16px Arial, Helvetica, sans-serif";

package/lib/maps/MWaterServerLayer.js

@@ -81,14 +81,14 @@ class LoadingLegend extends react_1.default.Component {
         this.state = { html: T `Loading...` };
     }
     componentDidMount() {
-        return jquery_1.default.get(this.props.url).done((data) => {
-            return this.setState({ html: data });
+        jquery_1.default.get(this.props.url).done((data) => {
+            this.setState({ html: data });
         });
     }
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.url !== this.props.url) {
-            return jquery_1.default.get(nextProps.url).done((data) => {
-                return this.setState({ html: data });
+    componentDidUpdate(prevProps) {
+        if (prevProps.url !== this.props.url) {
+            jquery_1.default.get(this.props.url).done((data) => {
+                this.setState({ html: data });
             });
         }
     }

package/lib/maps/MapComponent.js

@@ -170,7 +170,6 @@ class MapComponent extends react_1.default.Component {
     }
     render() {
         const designerVisible = !this.getDesign().hideDesignPanel;
-        console.log("designerVisible", designerVisible);
         return R("div", {
             style: {
                 width: "100%",

package/lib/maps/MapLayerDataSource.d.ts

@@ -19,4 +19,13 @@ export interface MapLayerDataSource {
     }>;
     /** Gets widget data source for a popup widget */
     getPopupWidgetDataSource(design: any, widgetId: string): WidgetDataSource;
+    /** Gets hover over data for hover over items
+     * @param design The design of the layer
+     * @param data The data of the current item being hovered over. e.g. { id: 123 }
+     * @param filters The filters to apply to the layer does not include filters that narrow down to a specific item
+     * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+     */
+    getHoverOverData(design: any, data: any, filters: JsonQLFilter[]): Promise<{
+        [key: string]: any;
+    }>;
 }

package/lib/maps/MapUtils.d.ts

@@ -1,7 +1,8 @@
 import { JsonQLExpr } from "@mwater/jsonql";
-import { Schema } from "@mwater/expressions";
+import { DataSource, Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { MapDesign } from "./MapDesign";
+import { HoverOverItem } from "./maps";
 export interface MapScope {
     name: string;
     filter: JsonQLFilter;
@@ -23,3 +24,20 @@ export declare function getCompiledFilters(design: MapDesign, schema: Schema, fi
  * Get a list of translatable strings in the map design
  */
 export declare function getTranslatableStrings(design: MapDesign, schema: Schema): string[];
+/**
+ * Convenience function to get hover over data for a map given an id and a list of hover over items
+ */
+export declare function getSimpleHoverOverData(options: {
+    /** Id of the item to get hover over data for. If null, will not filter by id */
+    id: any;
+    /** Table of the item to get hover over data for */
+    table: string;
+    /** Extra filters to apply to the hover over data, not including filtering down to the current item */
+    filters: JsonQLFilter[];
+    /** Schema to use */
+    schema: Schema;
+    /** Data source to use */
+    dataSource: DataSource;
+    /** Hover over items */
+    hoverOverItems: HoverOverItem[];
+}): Promise<import("@mwater/expressions").Row>;

package/lib/maps/MapUtils.js

@@ -1,5 +1,28 @@
 "use strict";
 // General utilities for a map
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -11,7 +34,8 @@ exports.convertToMarkersMap = convertToMarkersMap;
 exports.getFilterableTables = getFilterableTables;
 exports.getCompiledFilters = getCompiledFilters;
 exports.getTranslatableStrings = getTranslatableStrings;
-const lodash_1 = __importDefault(require("lodash"));
+exports.getSimpleHoverOverData = getSimpleHoverOverData;
+const lodash_1 = __importStar(require("lodash"));
 const expressions_1 = require("@mwater/expressions");
 const LayerFactory_1 = __importDefault(require("./LayerFactory"));
 // Check if can convert to a cluster map. Only maps containing marker views can be
@@ -135,3 +159,58 @@ function getTranslatableStrings(design, schema) {
     // Remove duplicates
     return lodash_1.default.uniq(strings);
 }
+/**
+ * Convenience function to get hover over data for a map given an id and a list of hover over items
+ */
+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
+    };
+    // 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) {
+        let whereClauses = filters.filter(f => f.table === table).map(f => (0, expressions_1.injectTableAlias)(f.jsonql, "main"));
+        // Add id filter
+        if (id != null) {
+            whereClauses.push({
+                type: "op",
+                op: "=",
+                exprs: [
+                    exprCompiler.compileExpr({ expr: { type: "id", table }, tableAlias: "main" }),
+                    { type: "literal", value: id }
+                ]
+            });
+        }
+        whereClauses = (0, lodash_1.compact)(whereClauses);
+        // Wrap if multiple
+        if (whereClauses.length > 1) {
+            query.where = { type: "op", op: "and", exprs: whereClauses };
+        }
+        else {
+            query.where = whereClauses[0];
+        }
+    }
+    const rows = await dataSource.performQuery(query);
+    return rows?.[0] ?? {};
+}

package/lib/maps/MarkersLayer.d.ts

@@ -48,6 +48,24 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
     validateDesign(design: MarkersLayerDesign, schema: Schema): string | null;
     /** Get strings to be translated */
     getTranslatableStrings(design: MarkersLayerDesign, schema: Schema): string[];
+    /** 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
+     * map data source.
+     */
+    getHoverOverData(options: {
+        /** Design of the layer */
+        design: MarkersLayerDesign;
+        /** Data of the current item being hovered over. e.g. { id: 123 } */
+        data: any;
+        /** Filters to apply to the hover over data, not including filtering down to the current item */
+        filters: JsonQLFilter[];
+        /** Schema to use */
+        schema: Schema;
+        /** Data source to use */
+        dataSource: DataSource;
+    }): Promise<{
+        [key: string]: any;
+    }>;
 }
 /**
  * Takes a base query that has any number of selects and where conditions. It must have a geometry

package/lib/maps/MarkersLayer.js

@@ -40,6 +40,7 @@ const HoverContent_1 = __importDefault(require("./HoverContent"));
 const layoutOptions_1 = require("../dashboards/layoutOptions");
 const BlocksLayoutManager_1 = __importDefault(require("../layouts/blocks/BlocksLayoutManager"));
 const DashboardUtils_1 = require("../dashboards/DashboardUtils");
+const MapUtils_1 = require("./MapUtils");
 class MarkersLayer extends Layer_1.default {
     /** Gets the type of layer definition */
     getLayerDefinitionType() {
@@ -120,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",
@@ -128,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"])
             });
@@ -445,35 +450,20 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
     }
     // same as onGridClick but handles hover over
     onGridHoverOver(ev, hoverOptions) {
-        if (ev.data && ev.data.id) {
-            const { table } = hoverOptions.design;
-            const results = {};
-            // Popup
-            if (hoverOptions.design.hoverOver) {
-                const exprCompiler = new expressions_1.ExprCompiler(hoverOptions.schema);
-                results.hoverOver = react_1.default.createElement(HoverContent_1.default, {
+        if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
+            const results = {
+                hoverOver: react_1.default.createElement(HoverContent_1.default, {
                     key: ev.data.id,
                     schema: hoverOptions.schema,
-                    dataSource: hoverOptions.dataSource,
-                    table,
+                    mapLayerDataSource: hoverOptions.layerDataSource,
                     items: hoverOptions.design.hoverOver.items,
-                    filters: [
-                        {
-                            table,
-                            jsonql: {
-                                type: "op",
-                                op: "=",
-                                exprs: [
-                                    exprCompiler.compileExpr({ expr: { type: "id", table }, tableAlias: "{alias}" }),
-                                    { type: "literal", value: ev.data.id }
-                                ]
-                            }
-                        }
-                    ],
+                    design: hoverOptions.design,
+                    data: ev.data,
+                    filters: hoverOptions.filters,
                     locale: hoverOptions.locale,
                     translate: hoverOptions.translate
-                });
-            }
+                })
+            };
             return results;
         }
         else {
@@ -676,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;
     }
@@ -729,6 +731,20 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
         // Remove duplicates
         return lodash_1.default.uniq(strings);
     }
+    /** 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
+     * map data source.
+     */
+    getHoverOverData(options) {
+        return (0, MapUtils_1.getSimpleHoverOverData)({
+            id: options.data.id,
+            table: options.design.table,
+            filters: options.filters,
+            schema: options.schema,
+            dataSource: options.dataSource,
+            hoverOverItems: options.design.hoverOver.items,
+        });
+    }
 }
 exports.default = MarkersLayer;
 /**

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,30 +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<import("./EditHoverOver").EditHoverOverProps> | 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;
 }