@mwater/visualization 5.4.5 → 5.6.0

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/RasterMapViewComponent.js

@@ -158,7 +158,7 @@ class RasterMapViewComponent extends react_1.default.Component {
                 filters: this.getCompiledFilters(),
                 dataSource: this.props.dataSource,
                 locale: this.context,
-                translate: this.props.translate ?? (() => ""),
+                translate: this.props.translate ?? ((input) => input),
                 onHide: () => this.setState({ legendHidden: true }),
                 zoom: null
             });

package/lib/maps/ServerMapDataSource.d.ts

@@ -54,6 +54,15 @@ declare class ServerLayerDataSource implements MapLayerDataSource {
     getPopupWidgetDataSource(design: any, widgetId: string): ServerMapLayerPopupWidgetDataSource;
     createUrl(filters: JsonQLFilter[], extension: string): string;
     createLegacyUrl(design: any, extension: string, filters: JsonQLFilter[]): string;
+    /** 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;
+    }>;
 }
 interface ServerMapLayerPopupWidgetDataSourceOptions {
     /** API url to use for talking to mWater server */

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}`;
         }
@@ -182,6 +172,35 @@ class ServerLayerDataSource {
         }
         return url;
     }
+    /** 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
+     */
+    async getHoverOverData(design, data, filters) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters || []),
+            data: (0, compressJson_1.default)(data),
+            rev: this.options.rev
+        };
+        const url = `${this.options.apiUrl}maps/${this.options.mapId}/layers/${this.options.layerView.id}/hoverdata?` +
+            querystring_1.default.stringify(query);
+        const response = await fetch(url, {
+            method: "GET",
+            headers: {
+                Accept: "application/json"
+            }
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            console.error(errorText);
+            throw new Error(`Error fetching hover data: ${response.statusText}`);
+        }
+        return await response.json();
+    }
 }
 class ServerMapLayerPopupWidgetDataSource {
     options;

package/lib/maps/VectorMapViewComponent.js

@@ -66,7 +66,7 @@ function VectorMapViewComponent(props) {
     const [legendHidden, setLegendHidden] = (0, react_1.useState)(initialLegendDisplay == "closed" || (props.width < 500 && initialLegendDisplay == "closedIfSmall"));
     // Locale to use
     const locale = props.locale || props.design.locale || "en";
-    // Translate function to use TODO
+    // Translate function to use 
     const translate = props.translate || ((input) => input);
     // Last feature that mouse entered
     const lastFeature = (0, react_2.useRef)();
@@ -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({
@@ -424,12 +416,12 @@ function VectorMapViewComponent(props) {
             return;
         }
         if (!props.design.autoBounds && props.design.bounds) {
-            // If we set the new bounds, do not update map bounds
+            // If we set the new bounds, do not update map bounds unless they differ by more than 0.0001 degrees (roughly 10m)
             if (boundsRef.current == null ||
-                props.design.bounds.n != boundsRef.current.n ||
-                props.design.bounds.e != boundsRef.current.e ||
-                props.design.bounds.s != boundsRef.current.s ||
-                props.design.bounds.w != boundsRef.current.w) {
+                Math.abs(props.design.bounds.n - boundsRef.current.n) > 0.0001 ||
+                Math.abs(props.design.bounds.e - boundsRef.current.e) > 0.0001 ||
+                Math.abs(props.design.bounds.s - boundsRef.current.s) > 0.0001 ||
+                Math.abs(props.design.bounds.w - boundsRef.current.w) > 0.0001) {
                 map.fitBounds([props.design.bounds.w, props.design.bounds.s, props.design.bounds.e, props.design.bounds.n]);
                 boundsRef.current = props.design.bounds;
             }

package/lib/maps/maps.d.ts

@@ -1,5 +1,6 @@
 import { JsonQLQuery } from "@mwater/jsonql";
 import { Expr } from "@mwater/expressions";
+import { ReactNode } from "react";
 export interface LayerDefinition {
     layers: Array<{
         /** Layer id */
@@ -16,6 +17,7 @@ export interface LayerDefinition {
         fields: string[];
     };
 }
+/** Results from onGridClick that can be used to display a popup */
 export type OnGridClickResults = {
     scope?: any;
     row?: {
@@ -24,9 +26,9 @@ export type OnGridClickResults = {
     };
     popup?: React.ReactElement<{}>;
 } | null;
+/** Results from onGridHover that can be used to display a hover over */
 export type OnGridHoverResults = {
-    scope?: any;
-    hoverOver?: React.ReactElement<{}>;
+    hoverOver?: ReactNode;
 } | null;
 /** Item in hover over */
 export interface HoverOverItem {