@mwater/visualization 5.6.0 → 5.6.1

package/lib/maps/DirectMapDataSource.js

@@ -35,7 +35,6 @@ const LayerFactory_1 = __importDefault(require("./LayerFactory"));
 const MapBoundsCalculator_1 = __importDefault(require("./MapBoundsCalculator"));
 const DirectWidgetDataSource_1 = __importDefault(require("../widgets/DirectWidgetDataSource"));
 const compressJson_1 = __importDefault(require("../compressJson"));
-const querystring_1 = __importDefault(require("querystring"));
 const QuickfilterUtils = __importStar(require("../quickfilter/QuickfilterUtils"));
 const react_1 = require("react");
 const useStableCallback_1 = require("@mwater/react-library/lib/useStableCallback");
@@ -175,26 +174,7 @@ class DirectLayerDataSource {
         if (layer.getLayerDefinitionType() === "TileUrl") {
             return layer.getTileUrl(design, filters);
         }
-        // Get JsonQLCss
-        const jsonqlCss = layer.getJsonQLCss(design, this.options.schema, filters);
-        return this.createUrl("png", jsonqlCss);
-    }
-    // Get the url for the interactivity tiles with the specified filters applied
-    // Called with (design, filters) where design is the design of the layer and filters are filters to apply. Returns URL
-    getUtfGridUrl(design, filters) {
-        // Create layer
-        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
-        // Handle special cases
-        if (this.options.layerView.type === "MWaterServer") {
-            return this.createLegacyUrl(design, "grid.json", filters);
-        }
-        // If layer has tiles url directly available
-        if (layer.getLayerDefinitionType() === "TileUrl") {
-            return layer.getUtfGridUrl(design, filters);
-        }
-        // Get JsonQLCss
-        const jsonqlCss = layer.getJsonQLCss(design, this.options.schema, filters);
-        return this.createUrl("grid.json", jsonqlCss);
+        throw new Error("Layer type not supported: " + this.options.layerView.type);
     }
     // Gets widget data source for a popup widget
     getPopupWidgetDataSource(design, widgetId) {
@@ -213,23 +193,6 @@ class DirectLayerDataSource {
         });
     }
     // Create query string
-    createUrl(extension, jsonqlCss) {
-        const query = {
-            type: "jsonql",
-            design: (0, compressJson_1.default)(jsonqlCss)
-        };
-        if (this.options.client) {
-            query.client = this.options.client;
-        }
-        // Make URL change when cache expired
-        const cacheExpiry = this.options.dataSource.getCacheExpiry();
-        if (cacheExpiry) {
-            query.cacheExpiry = cacheExpiry;
-        }
-        let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring_1.default.stringify(query);
-        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`;

package/lib/maps/GridLayer.d.ts

@@ -1,7 +1,6 @@
 import React, { ReactNode } from "react";
 import Layer, { LegendOptions, VectorTileDef } from "./Layer";
 import { Schema, DataSource } from "@mwater/expressions";
-import { LayerDefinition } from "./maps";
 import { JsonQLFilter } from "../index";
 import GridLayerDesign from "./GridLayerDesign";
 import { JsonQLQuery } from "@mwater/jsonql";
@@ -11,20 +10,6 @@ export default class GridLayer extends Layer<GridLayerDesign> {
     getLayerDefinitionType(): "VectorTile";
     getVectorTile(design: GridLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
     createJsonQL(design: GridLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
-    /** 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: GridLayerDesign, schema: Schema, filters: JsonQLFilter[]): LayerDefinition;
-    createMapnikJsonQL(design: GridLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
-    createCss(design: GridLayerDesign, schema: Schema, filters: JsonQLFilter[]): string;
     getMinZoom(design: GridLayerDesign): number | undefined;
     getMaxZoom(design: GridLayerDesign): number;
     /** Get the legend to be optionally displayed on the map. Returns

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/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/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 {};