@mwater/visualization 5.5.0 → 5.6.1

package/lib/maps/GridLayer.js

@@ -219,218 +219,6 @@ class GridLayer extends Layer_1.default {
         };
         return query;
     }
-    /** 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
-     */
-    getJsonQLCss(design, schema, filters) {
-        // Create design
-        const layerDef = {
-            layers: [{ id: "layer0", jsonql: this.createMapnikJsonQL(design, schema, filters) }],
-            css: this.createCss(design, schema, filters),
-            interactivity: {
-                layer: "layer0",
-                fields: ["id", "name"]
-            }
-        };
-        return layerDef;
-    }
-    createMapnikJsonQL(design, schema, filters) {
-        const axisBuilder = new AxisBuilder_1.default({ schema });
-        const exprCompiler = new expressions_1.ExprCompiler(schema);
-        /* Compile to a query like this:
-          select mwater_hex_make(grid.q, grid.r, !pixel_width!*SIZE) as the_geom_webmercator, data.color as color from
-              mwater_hex_grid(!bbox!, !pixel_width!*SIZE) as grid
-            left outer join
-              (select qr.q as q, qr.r as r, COLOREXPR as color from TABLE as innerquery
-                inner join mwater_hex_xy_to_qr(st_xmin(innerquery.LOCATIONEXPR), st_ymin(innerquery.LOCATIONEXPR), !pixel_width!*10) as qr
-                on true
-                where innerquery.LOCATIONEXPR && ST_Expand(!bbox!, SIZE)
-              group by 1, 2) as data
-            on data.q = grid.q and data.r = grid.r
-        */
-        const compiledGeometryExpr = exprCompiler.compileExpr({ expr: design.geometryExpr, tableAlias: "innerquery" });
-        const colorExpr = axisBuilder.compileAxis({ axis: design.colorAxis, tableAlias: "innerquery" });
-        let compiledSizeExpr;
-        if (design.shape == "hex") {
-            // Hex needs distance from center to points
-            compiledSizeExpr =
-                design.sizeUnits == "pixels"
-                    ? { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, design.size / 1.73205] }
-                    : { type: "literal", value: design.size / 1.73205 };
-        }
-        else if (design.shape == "square") {
-            // Square needs distance from center to center
-            compiledSizeExpr =
-                design.sizeUnits == "pixels"
-                    ? { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, design.size] }
-                    : { type: "literal", value: design.size };
-        }
-        else {
-            throw new Error("Unknown shape");
-        }
-        // Create inner query
-        const innerQuery = {
-            type: "query",
-            selects: [
-                { type: "select", expr: { type: "field", tableAlias: "qr", column: "q" }, alias: "q" },
-                { type: "select", expr: { type: "field", tableAlias: "qr", column: "r" }, alias: "r" },
-                { type: "select", expr: colorExpr, alias: "color" }
-            ],
-            from: {
-                type: "join",
-                kind: "inner",
-                left: { type: "table", table: design.table, alias: "innerquery" },
-                right: {
-                    type: "subexpr",
-                    expr: {
-                        type: "op",
-                        op: `mwater_${design.shape}_xy_to_qr`,
-                        exprs: [
-                            { type: "op", op: "ST_XMin", exprs: [compiledGeometryExpr] },
-                            { type: "op", op: "ST_YMin", exprs: [compiledGeometryExpr] },
-                            compiledSizeExpr
-                        ]
-                    },
-                    alias: "qr"
-                },
-                on: { type: "literal", value: true }
-            },
-            groupBy: [1, 2]
-        };
-        // Filter by bounding box
-        let whereClauses = [
-            {
-                type: "op",
-                op: "&&",
-                exprs: [
-                    compiledGeometryExpr,
-                    { type: "op", op: "ST_Expand", exprs: [{ type: "token", token: "!bbox!" }, compiledSizeExpr] }
-                ]
-            }
-        ];
-        // Then add filters
-        if (design.filter) {
-            whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "innerquery" }));
-        }
-        // Then add extra filters passed in, if relevant
-        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);
-        if (whereClauses.length > 0) {
-            innerQuery.where = { type: "op", op: "and", exprs: whereClauses };
-        }
-        // Now create outer query
-        const query = {
-            type: "query",
-            selects: [
-                {
-                    type: "select",
-                    expr: {
-                        type: "op",
-                        op: `mwater_${design.shape}_make`,
-                        exprs: [
-                            { type: "field", tableAlias: "grid", column: "q" },
-                            { type: "field", tableAlias: "grid", column: "r" },
-                            compiledSizeExpr
-                        ]
-                    },
-                    alias: "the_geom_webmercator"
-                },
-                { type: "select", expr: { type: "field", tableAlias: "data", column: "color" }, alias: "color" }
-            ],
-            from: {
-                type: "join",
-                kind: "left",
-                left: {
-                    type: "subexpr",
-                    expr: {
-                        type: "op",
-                        op: `mwater_${design.shape}_grid`,
-                        exprs: [{ type: "token", token: "!bbox!" }, compiledSizeExpr]
-                    },
-                    alias: "grid"
-                },
-                right: { type: "subquery", query: innerQuery, alias: "data" },
-                // on data.q = grid.q and data.r = grid.r
-                on: {
-                    type: "op",
-                    op: "and",
-                    exprs: [
-                        {
-                            type: "op",
-                            op: "=",
-                            exprs: [
-                                { type: "field", tableAlias: "data", column: "q" },
-                                { type: "field", tableAlias: "grid", column: "q" }
-                            ]
-                        },
-                        {
-                            type: "op",
-                            op: "=",
-                            exprs: [
-                                { type: "field", tableAlias: "data", column: "r" },
-                                { type: "field", tableAlias: "grid", column: "r" }
-                            ]
-                        }
-                    ]
-                }
-            }
-        };
-        return query;
-    }
-    createCss(design, schema, filters) {
-        let css = `
-#layer0 {
-  polygon-opacity: ` +
-            design.fillOpacity +
-            `;
-  ` +
-            (design.borderStyle == "color"
-                ? `line-opacity: ` + (1 - (1 - design.fillOpacity) / 2) + `; `
-                : `line-width: 0;`) +
-            `
-  polygon-fill: transparent;
-}
-\
-`;
-        if (!design.colorAxis) {
-            throw new Error("Color axis not set");
-        }
-        // If color axes, add color conditions
-        if (design.colorAxis.colorMap) {
-            for (let item of design.colorAxis.colorMap) {
-                // If invisible
-                if (design.colorAxis.excludedValues && lodash_1.default.any(design.colorAxis.excludedValues, (ev) => ev === item.value)) {
-                    css += `#layer0 [color=${JSON.stringify(item.value)}] { 
-            line-color: transparent; 
-            line-opacity: 0; 
-            polygon-opacity: 0; 
-            polygon-fill: transparent; 
-          }\n`;
-                }
-                else {
-                    css +=
-                        `#layer0 [color=${JSON.stringify(item.value)}] { 
-            ` +
-                            (design.borderStyle == "color" ? `line-color: ${item.color};` : "") +
-                            ` 
-            polygon-fill: ${item.color}; 
-          }\n`;
-                }
-            }
-        }
-        return css;
-    }
     // TODO
     // /**
     //  * Called when the interactivity grid is clicked.

package/lib/maps/HoverContent.js

@@ -53,7 +53,7 @@ const HoverContent = (props) => {
     if (error) {
         return react_1.default.createElement("div", { className: "text-danger" }, error);
     }
-    return (react_1.default.createElement("div", { className: "_mviz-map-hover-content" }, props.items.map((item) => {
+    return (react_1.default.createElement("div", { className: "mwater-visualization-map-hover-content" }, props.items.map((item) => {
         let value = values[item.id];
         if (value != null && item.value) {
             // Get expression type

package/lib/maps/Layer.d.ts

@@ -5,22 +5,6 @@ import { ReactNode } from "react";
 import { JsonQLQuery } from "@mwater/jsonql";
 import { LayerSpecification } from "maplibre-gl";
 import { MapLayerDataSource } from "./MapLayerDataSource";
-export interface JsonQLCssLayerDefinition {
-    layers: Array<{
-        /** Layer id */
-        id: string;
-        /** jsonql that includes "the_webmercator_geom" as a column */
-        jsonql: JsonQLQuery;
-    }>;
-    /** carto css */
-    css: string;
-    interactivity?: {
-        /** id of layer */
-        layer: string;
-        /** array of field names */
-        fields: string[];
-    };
-}
 export interface OnGridClickOptions<LayerDesign> {
     /** design of layer */
     design: LayerDesign;
@@ -91,16 +75,7 @@ export interface VectorTileCTE {
 /** Defines a layer for a map which has all the logic for rendering the specific data to be viewed */
 export default class Layer<LayerDesign> {
     /** Gets the type of layer definition */
-    getLayerDefinitionType(): "JsonQLCss" | "TileUrl" | "VectorTile";
-    /** Gets the layer definition as JsonQL + CSS for type "JsonQLCss"
-        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: LayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLCssLayerDefinition;
-    /** Gets the utf grid url for definition type "TileUrl" */
-    getUtfGridUrl(design: LayerDesign, filters: JsonQLFilter[]): string | null;
+    getLayerDefinitionType(): "TileUrl" | "VectorTile";
     /** Gets the layer definition for "VectorTile" type
      * @param sourceId id of the source. Should be prefixed to sublayers with a colon (prefix:id)
      * @param opacity opacity of the layer, which MapBox does not allow to be implemented for a whole layer (https://github.com/mapbox/mapbox-gl-js/issues/4090)

package/lib/maps/Layer.js

@@ -11,19 +11,6 @@ const bbox_1 = __importDefault(require("@turf/bbox"));
 class Layer {
     /** Gets the type of layer definition */
     getLayerDefinitionType() {
-        return "JsonQLCss";
-    }
-    /** Gets the layer definition as JsonQL + CSS for type "JsonQLCss"
-        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) {
-        throw new Error("Not implemented");
-    }
-    /** Gets the utf grid url for definition type "TileUrl" */
-    getUtfGridUrl(design, filters) {
         throw new Error("Not implemented");
     }
     /** Gets the layer definition for "VectorTile" type

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/MapComponent.d.ts

@@ -1,10 +1,9 @@
 import React, { ReactNode } from "react";
-import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 import UndoStack from "../UndoStack";
 import { DataSource, Schema } from "@mwater/expressions";
 import { MapDataSource } from "./MapDataSource";
 import { MapDesign } from "./MapDesign";
-import { JsonQLFilter } from "../JsonQLFilter";
+import { JsonQLFilter } from "..";
 export interface MapComponentProps {
     schema: Schema;
     dataSource: DataSource;
@@ -27,6 +26,8 @@ export interface MapComponentProps {
     quickfiltersValues?: any[];
     /** True to hide title bar and related controls */
     hideTitleBar?: boolean;
+    /** Locale to prefer if available */
+    preferredLocale?: string;
 }
 interface MapComponentState {
     undoStack: UndoStack;
@@ -36,55 +37,38 @@ interface MapComponentState {
     quickfiltersValues: any[] | null;
     /** True to hide quickfilters */
     hideQuickfilters: boolean;
+    /** Locale to use for display. Ignored if in edit mode */
+    locale: string;
+    /** Locale being previewed while in edit mode. Non-null when previewing a translation. */
+    previewLocale: string | null;
 }
 /** Map with designer on right */
 export default class MapComponent extends React.Component<MapComponentProps, MapComponentState> {
-    static contextType: React.Context<string>;
     constructor(props: MapComponentProps);
     componentDidUpdate(prevProps: MapComponentProps): void;
     handleUndo: () => void;
     handleRedo: () => void;
     handleShowQuickfilters: () => void;
     handleZoomLockClick: () => void;
-    renderActionLinks(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    renderHeader(): React.DetailedReactHTMLElement<{
-        style: {
-            padding: number;
-            borderBottom: string;
-            gridArea: "header";
-        };
-    }, HTMLElement>;
+    /** Handle locale selection from dropdown */
+    handleLocaleSelect: (locale: string) => void;
+    /** Render the language selector dropdown */
+    renderLanguageDropdown(): React.JSX.Element;
+    renderActionLinks(): React.JSX.Element;
+    renderHeader(): React.JSX.Element;
     handleDesignChange: (design: any) => void;
     getDesign(): MapDesign;
     handleToggleDesignPanel: () => void;
     getQuickfilterValues: () => any[];
-    renderView(): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent>;
+    renderView(): React.JSX.Element;
     getCompiledFilters(): {
         table: string;
         jsonql: import("@mwater/jsonql").JsonQLExpr;
     }[];
-    renderQuickfilter(): React.DetailedReactHTMLElement<{
-        style: {
-            gridArea: "quickfilters";
-            borderBottom: string;
-        };
-    }, HTMLElement>;
-    renderDesigner(): React.DetailedReactHTMLElement<{
-        style: {
-            gridArea: "designer";
-            borderLeft: string;
-            overflowY: "scroll";
-        };
-    }, HTMLElement>;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            width: string;
-            height: string;
-            display: "grid";
-            gridTemplateColumns: string;
-            gridTemplateRows: string;
-            gridTemplateAreas: "\"header designer\" \"quickfilters designer\" \"view designer\"";
-        };
-    }, HTMLElement>;
+    renderQuickfilter(): React.JSX.Element;
+    /** Translate function to use for display based on current locale */
+    translate: (input: string) => string;
+    renderDesigner(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};