@mwater/visualization 5.6.0 → 5.6.1

package/lib/datagrids/DatagridViewComponent.js

@@ -19,6 +19,10 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
     const [rows, setRows] = (0, react_2.useState)([]);
     const [entirelyLoaded, setEntirelyLoaded] = (0, react_2.useState)(false);
     const loadStateRef = (0, react_2.useRef)(null);
+    // Track which design key the current rows were loaded with to avoid rendering stale data
+    // with a mismatched column structure (e.g. after column reorder)
+    const [loadedDesignKey, setLoadedDesignKey] = (0, react_2.useState)(null);
+    const currentDesignKey = getDatagridReloadKey(props.design);
     // Get row header width based on selection and showRowNumbers
     const rowHeaderWidth = props.selectedRows
         ? (props.design.showRowNumbers ? 70 : 30) // With selection: 70 for both, 30 for just checkbox
@@ -75,13 +79,17 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
             whiteSpace: "nowrap",
             padding: "0 8px"
         };
-        const rowId = options.row < rows.length ? rows[options.row].id : null;
+        // If design key doesn't match, rows are stale - show loading state
+        if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
+            return (react_1.default.createElement("div", { style: rowHeaderStyle }, props.design.showRowNumbers ? (react_1.default.createElement("div", { style: { flex: 1, textAlign: "right" } }, options.row + 1)) : null));
+        }
+        const rowId = rows[options.row].id;
         const isSelected = rowId != null && props.selectedRows ? props.selectedRows.isSelected(rowId) : false;
-        const isSubtable = options.row < rows.length ? rows[options.row].subtable >= 0 : false;
+        const isSubtable = rows[options.row].subtable >= 0;
         return (react_1.default.createElement("div", { style: rowHeaderStyle },
             props.selectedRows && !isSubtable && (react_1.default.createElement("input", { type: "checkbox", style: { marginRight: 4 }, checked: isSelected, onChange: rowId != null && props.onSelectedRowsChange ? () => handleRowSelect(rowId) : undefined, readOnly: !props.onSelectedRowsChange })),
             props.design.showRowNumbers ? (react_1.default.createElement("div", { style: { flex: 1, textAlign: "right" } }, options.row + 1)) : null));
-    }, [rows, props.selectedRows, props.onSelectedRowsChange, props.design.showRowNumbers, handleRowSelect]);
+    }, [rows, props.selectedRows, props.onSelectedRowsChange, props.design.showRowNumbers, handleRowSelect, loadedDesignKey, currentDesignKey]);
     const loadMoreRows = (0, useStableCallback_1.useStableCallback)((callback) => {
         const loadState = {
             design: props.design,
@@ -103,6 +111,7 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
                 loadStateRef.current = null;
                 setRows(prev => [...prev, ...newRows]);
                 setEntirelyLoaded(newRows.length < (props.pageSize || 100));
+                setLoadedDesignKey(getDatagridReloadKey(loadState.design));
                 callback?.();
             }
         });
@@ -110,6 +119,7 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
     function reload() {
         setRows([]);
         setEntirelyLoaded(false);
+        setLoadedDesignKey(null);
     }
     // Reset rows when design, filters or refreshKey changes
     (0, react_2.useEffect)(() => {
@@ -203,6 +213,10 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
         return false;
     });
     const handleCopy = (0, useStableCallback_1.useStableCallback)((rowIndex, colIndex) => {
+        // If design key doesn't match, rows are stale - don't copy
+        if (loadedDesignKey !== currentDesignKey || rowIndex >= rows.length) {
+            return;
+        }
         const row = rows[rowIndex];
         const col = props.design.columns[colIndex];
         const value = row[`c${colIndex}`];
@@ -227,6 +241,13 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
         navigator.clipboard.writeText(formattedValue || "");
     });
     const renderCell = (0, useStableCallback_1.useStableCallback)((options) => {
+        // If rows were loaded with a different design key, show loading state to avoid
+        // rendering stale data with mismatched column structure (e.g. after column reorder)
+        if (loadedDesignKey !== currentDesignKey) {
+            lodash_1.default.defer(() => loadMoreRows());
+            return react_1.default.createElement("div", { style: { padding: 8 } },
+                react_1.default.createElement("i", { className: "fa fa-spinner fa-spin text-muted" }));
+        }
         if (options.row >= rows.length) {
             lodash_1.default.defer(() => loadMoreRows());
             return react_1.default.createElement("div", { style: { padding: 8 } },
@@ -272,7 +293,8 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
             } }, column.label || exprUtils.summarizeExpr(column.expr, props.design.locale)));
     });
     const renderCellEditor = (0, useStableCallback_1.useStableCallback)((options) => {
-        if (options.row >= rows.length) {
+        // If design key doesn't match, rows are stale - don't render editor
+        if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
             return react_1.default.createElement("div", null);
         }
         const column = props.design.columns[options.col];
@@ -288,6 +310,10 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
         if (options.col === -1) {
             return false;
         }
+        // If design key doesn't match, rows are stale - don't allow edit
+        if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
+            return false;
+        }
         const rowId = rows[options.row].id;
         if (rowId == null) {
             return false;

package/lib/maps/BufferLayer.d.ts

@@ -11,19 +11,6 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
     getLayerDefinitionType(): "VectorTile";
     getVectorTile(design: BufferLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
     createVectorJsonQL(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
-    getJsonQLCss(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): {
-        layers: {
-            id: string;
-            jsonql: import("@mwater/jsonql").JsonQLSelectQuery;
-        }[];
-        css: string;
-        interactivity: {
-            layer: string;
-            fields: string[];
-        };
-    };
-    createMapnikJsonQL(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): import("@mwater/jsonql").JsonQLSelectQuery;
-    createCss(design: BufferLayerDesign, schema: Schema): string;
     onGridClick(ev: {
         data: any;
         event: any;

package/lib/maps/BufferLayer.js

@@ -296,235 +296,6 @@ class BufferLayer 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. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to put in table alias
-    getJsonQLCss(design, schema, filters) {
-        // Create design
-        const layerDef = {
-            layers: [{ id: "layer0", jsonql: this.createMapnikJsonQL(design, schema, filters) }],
-            css: this.createCss(design, schema),
-            interactivity: {
-                layer: "layer0",
-                fields: ["id"]
-            }
-        };
-        return layerDef;
-    }
-    createMapnikJsonQL(design, schema, filters) {
-        let colorExpr;
-        const axisBuilder = new AxisBuilder_1.default({ schema });
-        const exprCompiler = new expressions_1.ExprCompiler(schema);
-        // Get radius expression
-        const radiusCompiledExpr = exprCompiler.compileExpr({
-            expr: design.radiusExpr ?? { type: "literal", valueType: "number", value: design.radius },
-            tableAlias: "main"
-        });
-        // Convert radius in meters to a maximum number of degrees latitude
-        const radiusDegCompiledExpr = { type: "op", op: "/", exprs: [radiusCompiledExpr, 100000] };
-        /*
-        Query:
-          select
-          <primary key> as id,
-          [<color axis> as color,
-          st_transform(<geometry axis>, 3857) as the_geom_webmercator,
-          radius * 2 / (!pixel_width! * cos(st_ymin(st_transform(geometryExpr, 4326)) * 0.017453293) as width
-          from <table> as main
-          where
-            <geometry axis> is not null
-            * Bounding box filter for speed
-          and <geometry axis> &&
-          ST_Transform(ST_Expand(
-            * Prevent 3857 overflow (i.e. > 85 degrees lat)
-            ST_Intersection(
-              ST_Transform(!bbox!, 4326),
-              ST_Expand(ST_MakeEnvelope(-180, -85, 180, 85, 4326), -<radius in degrees>))
-            , <radius in degrees>})
-          , 3857)
-          and <other filters>
-        */
-        // Compile geometry axis
-        let geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "main" });
-        // radius * 2 / (!pixel_width! * cos(st_ymin(st_transform(geometryExpr, 4326)) * 0.017453293) + 1 # add one to make always visible
-        const widthExpr = {
-            type: "op",
-            op: "+",
-            exprs: [
-                {
-                    type: "op",
-                    op: "/",
-                    exprs: [
-                        { type: "op", op: "*", exprs: [radiusCompiledExpr, 2] },
-                        {
-                            type: "op",
-                            op: "*",
-                            exprs: [
-                                { type: "op", op: "nullif", exprs: [{ type: "token", token: "!pixel_height!" }, 0] },
-                                {
-                                    type: "op",
-                                    op: "cos",
-                                    exprs: [
-                                        {
-                                            type: "op",
-                                            op: "*",
-                                            exprs: [
-                                                {
-                                                    type: "op",
-                                                    op: "ST_YMIN",
-                                                    exprs: [{ type: "op", op: "ST_Transform", exprs: [geometryExpr, 4326] }]
-                                                },
-                                                0.017453293
-                                            ]
-                                        }
-                                    ]
-                                }
-                            ]
-                        }
-                    ]
-                },
-                2
-            ]
-        };
-        const selects = [
-            {
-                type: "select",
-                expr: { type: "field", tableAlias: "main", column: schema.getTable(design.table).primaryKey },
-                alias: "id"
-            }, // main primary key as id
-            { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" },
-            { type: "select", expr: widthExpr, alias: "width" } // Width of circles
-        ];
-        // Add color select if color axis
-        if (design.axes.color) {
-            colorExpr = axisBuilder.compileAxis({ axis: design.axes.color, tableAlias: "main" });
-            selects.push({ type: "select", expr: colorExpr, alias: "color" });
-        }
-        // Select _id, location and clustered row number
-        const query = {
-            type: "query",
-            selects,
-            from: exprCompiler.compileTable(design.table, "main")
-        };
-        const boundingBox = {
-            type: "op",
-            op: "ST_Transform",
-            exprs: [
-                {
-                    type: "op",
-                    op: "ST_Expand",
-                    exprs: [
-                        {
-                            type: "op",
-                            op: "ST_Intersection",
-                            exprs: [
-                                { type: "op", op: "ST_Transform", exprs: [{ type: "token", token: "!bbox!" }, 4326] },
-                                {
-                                    type: "op",
-                                    op: "ST_Expand",
-                                    exprs: [
-                                        { type: "op", op: "ST_MakeEnvelope", exprs: [-180, -85, 180, 85, 4326] },
-                                        { type: "op", op: "*", exprs: [radiusDegCompiledExpr, -1] }
-                                    ]
-                                }
-                            ]
-                        },
-                        radiusDegCompiledExpr
-                    ]
-                },
-                3857
-            ]
-        };
-        // Create filters. First ensure geometry and limit to bounding box
-        let whereClauses = [
-            { type: "op", op: "is not null", exprs: [geometryExpr] },
-            {
-                type: "op",
-                op: "&&",
-                exprs: [geometryExpr, boundingBox]
-            }
-        ];
-        // Then add filters baked into layer
-        if (design.filter) {
-            whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }));
-        }
-        // Then add extra filters passed in, if relevant
-        // Get relevant filters
-        const relevantFilters = lodash_1.default.where(filters, { table: design.table });
-        for (let filter of relevantFilters) {
-            whereClauses.push((0, expressions_1.injectTableAlias)(filter.jsonql, "main"));
-        }
-        whereClauses = lodash_1.default.compact(whereClauses);
-        // Wrap if multiple
-        if (whereClauses.length > 1) {
-            query.where = { type: "op", op: "and", exprs: whereClauses };
-        }
-        else {
-            query.where = whereClauses[0];
-        }
-        // Sort order
-        if (design.axes.color && design.axes.color.colorMap) {
-            // TODO should use categories, not colormap order
-            const order = design.axes.color.drawOrder || lodash_1.default.pluck(design.axes.color.colorMap, "value");
-            const categories = axisBuilder.getCategories(design.axes.color, order);
-            const cases = lodash_1.default.map(categories, (category, i) => {
-                return {
-                    when: category.value != null
-                        ? { type: "op", op: "=", exprs: [colorExpr, category.value] }
-                        : { type: "op", op: "is null", exprs: [colorExpr] },
-                    then: order.indexOf(category.value) || -1
-                };
-            });
-            if (cases.length > 0) {
-                query.orderBy = [
-                    {
-                        expr: {
-                            type: "case",
-                            cases
-                        },
-                        direction: "desc" // Reverse color map order
-                    }
-                ];
-            }
-        }
-        return query;
-    }
-    createCss(design, schema) {
-        let css = `\
-#layer0 {
-  marker-fill-opacity: ` +
-            design.fillOpacity +
-            `;
-marker-type: ellipse;
-marker-width: [width];
-marker-line-width: 0;
-marker-allow-overlap: true;
-marker-ignore-placement: true;
-marker-fill: ` +
-            (design.color || "transparent") +
-            `;
-}\
-`;
-        // If color axes, add color conditions
-        if (design.axes.color != null && design.axes.color.colorMap != null) {
-            for (let item of design.axes.color.colorMap) {
-                // If invisible
-                if ((design.axes.color.excludedValues || []).includes(item.value)) {
-                    css += `#layer0 [color=${JSON.stringify(item.value)}] { marker-fill-opacity: 0; }\n`;
-                }
-                else {
-                    css += `#layer0 [color=${JSON.stringify(item.value)}] { marker-fill: ${item.color}; }\n`;
-                }
-            }
-        }
-        return css;
-    }
     // Called when the interactivity grid is clicked.
     // arguments:
     //   ev: { data: interactivty data e.g. `{ id: 123 }` }
@@ -686,7 +457,7 @@ marker-fill: ` +
     // Get the legend to be optionally displayed on the map. Returns
     // a React element
     getLegend(options) {
-        const { design, schema, name, dataSource, locale, filters } = options;
+        const { design, schema, name, dataSource, locale, filters, translate } = options;
         const _filters = filters.slice();
         if (design.filter != null) {
             const exprCompiler = new expressions_1.ExprCompiler(schema);
@@ -696,16 +467,18 @@ marker-fill: ` +
             }
         }
         const axisBuilder = new AxisBuilder_1.default({ schema });
+        // Clean and translate axis
+        const axis = (0, MapUtils_1.translateAxis)(axisBuilder.cleanAxis({
+            axis: design.axes.color,
+            table: design.table,
+            types: ["enum", "text", "boolean", "date"],
+            aggrNeed: "none"
+        }), translate);
         return react_1.default.createElement(LayerLegendComponent_1.default, {
             schema,
-            name,
+            name: translate(name),
             filters: lodash_1.default.compact(_filters),
-            axis: axisBuilder.cleanAxis({
-                axis: design.axes.color,
-                table: design.table,
-                types: ["enum", "text", "boolean", "date"],
-                aggrNeed: "none"
-            }),
+            axis: axis,
             radiusLayer: true,
             defaultColor: design.color,
             locale
@@ -827,6 +600,8 @@ marker-fill: ` +
     /** Get strings to be translated */
     getTranslatableStrings(design, schema) {
         const strings = [];
+        // Add strings from axis category labels and null labels
+        strings.push(...(0, MapUtils_1.getTranslatableStringsFromAxis)(design.axes.color));
         // Add strings from hoverOver items
         if (design.hoverOver && design.hoverOver.items) {
             for (const item of design.hoverOver.items) {

package/lib/maps/BufferLayerDesignerComponent.d.ts

@@ -24,7 +24,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
     renderTable(): React.JSX.Element;
     renderGeometryAxis(): React.JSX.Element | undefined;
     renderRadius(): React.JSX.Element;
-    renderUnionShapes(): React.JSX.Element | null;
+    renderUnionShapes(): React.JSX.Element;
     renderColor(): React.JSX.Element | undefined;
     renderFillOpacity(): React.JSX.Element;
     renderFilter(): React.JSX.Element | null;

package/lib/maps/BufferLayerDesignerComponent.js

@@ -38,7 +38,6 @@ const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
 const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
-const vectorMaps_1 = require("./vectorMaps");
 const EditHoverOver_1 = require("./EditHoverOver");
 class BufferLayerDesignerComponent extends react_1.default.Component {
     handleTableChange = (table) => {
@@ -104,10 +103,6 @@ class BufferLayerDesignerComponent extends react_1.default.Component {
             react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, value: radiusExpr, onChange: this.handleRadiusExprChange, dataSource: this.props.dataSource, table: this.props.design.table, types: ["number"] })));
     }
     renderUnionShapes() {
-        // Only implemented for vector maps
-        if (!(0, vectorMaps_1.areVectorMapsEnabled)()) {
-            return null;
-        }
         return (react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement(bootstrap_1.Checkbox, { value: this.props.design.unionShapes, onChange: this.handleUnionShapesChange }, T `Combine circles (advanced)`)));
     }

package/lib/maps/ChoroplethLayer.d.ts

@@ -1,10 +1,9 @@
 import React, { ReactNode } from "react";
 import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef, LegendOptions } from "./Layer";
 import { Schema, DataSource } from "@mwater/expressions";
-import { LayerDefinition, OnGridClickResults, OnGridHoverResults } from "./maps";
+import { OnGridClickResults, OnGridHoverResults } from "./maps";
 import { JsonQLFilter } from "../index";
 import ChoroplethLayerDesign from "./ChoroplethLayerDesign";
-import { JsonQLQuery } from "@mwater/jsonql";
 export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     /** Gets the type of layer definition */
     getLayerDefinitionType(): "VectorTile";
@@ -12,20 +11,6 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     createPlainVectorTile(design: ChoroplethLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
     createIndirectVectorTile(design: ChoroplethLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
     createDirectVectorTile(design: ChoroplethLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
-    /** 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: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): LayerDefinition;
-    createMapnikJsonQL(design: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
-    createCss(design: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): string;
     /**
      * Called when the interactivity grid is clicked.
      * arguments: