@mwater/visualization 5.5.0 → 5.6.1

package/lib/maps/ChoroplethLayerDesigner.js

@@ -28,7 +28,6 @@ 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 immer_1 = require("immer");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
@@ -41,7 +40,7 @@ const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const AdminScopeAndDetailLevelComponent_1 = __importDefault(require("./AdminScopeAndDetailLevelComponent"));
 const ScopeAndDetailLevelComponent_1 = __importDefault(require("./ScopeAndDetailLevelComponent"));
-const EditHoverOver_1 = __importDefault(require("./EditHoverOver"));
+const EditHoverOver_1 = require("./EditHoverOver");
 // Designer for a choropleth layer
 class ChoroplethLayerDesigner extends react_1.default.Component {
     update(mutation) {
@@ -151,7 +150,8 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
             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 })));
     }
     renderRegionsTable() {
-        let options = lodash_1.default.map(lodash_1.default.filter(this.props.schema.getTables(), table => table.id.startsWith("regions.")), table => ({ value: table.id, label: table.name.en }));
+        // Regions tables are either "regions." or "regions_<name>" with a shape column
+        let options = lodash_1.default.map(lodash_1.default.filter(this.props.schema.getTables(), table => table.id.startsWith("regions.") || (table.id.startsWith("regions_") && this.props.schema.getColumn(table.id, "shape") != null)), table => ({ value: table.id, label: expressions_1.ExprUtils.localizeString(table.name) }));
         const regionsTable = this.props.design.regionsTable || "admin_regions";
         return (react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement("label", { className: "text-muted" }, T `Regions Type`),
@@ -182,39 +182,27 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
     renderScopeAndDetailLevel() {
         const regionsTable = this.props.design.regionsTable || "admin_regions";
         if (regionsTable === "admin_regions") {
-            return R(AdminScopeAndDetailLevelComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                scope: this.props.design.scope,
-                scopeLevel: this.props.design.scopeLevel || 0,
-                detailLevel: this.props.design.detailLevel,
-                onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange
-            });
+            return react_1.default.createElement(AdminScopeAndDetailLevelComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, scope: this.props.design.scope, scopeLevel: this.props.design.scopeLevel || 0, detailLevel: this.props.design.detailLevel, onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange });
         }
         else {
-            return R(ScopeAndDetailLevelComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                scope: this.props.design.scope,
-                scopeLevel: this.props.design.scopeLevel,
-                detailLevel: this.props.design.detailLevel,
-                onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange,
-                regionsTable
-            });
+            return react_1.default.createElement(ScopeAndDetailLevelComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, scope: this.props.design.scope, scopeLevel: this.props.design.scopeLevel, detailLevel: this.props.design.detailLevel, onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange, regionsTable: regionsTable });
         }
     }
     renderDisplayNames() {
-        return R("div", { className: "mb-3" }, react_1.default.createElement(ui.Checkbox, { value: this.props.design.displayNames, onChange: value => this.handleDisplayNamesChange(value) }, T `Display Region Names`));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement(ui.Checkbox, { value: this.props.design.displayNames, onChange: value => this.handleDisplayNamesChange(value) }, T `Display Region Names`)));
     }
     renderColor() {
         // Only if plain
         if (this.props.design.regionMode !== "plain") {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Fill Color`), R("div", null, R(ColorComponent_1.default, {
-            color: this.props.design.color,
-            onChange: this.handleColorChange
-        })));
+        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-tint" }),
+                T `Fill Color`),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.color, onChange: this.handleColorChange }))));
     }
     renderColorAxis() {
         // Not applicable if in plain mode, or if in indirect mode with no table
@@ -235,19 +223,12 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
                 }
             }
             const table = this.props.design.table;
-            return R("div", null, 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: "required",
-                value: this.props.design.axes.color,
-                defaultColor: this.props.design.color,
-                showColorMap: true,
-                onChange: this.handleColorAxisChange,
-                allowExcludedValues: true,
-                filters: filters
-            })));
+            return (react_1.default.createElement("div", null,
+                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: "required", value: this.props.design.axes.color, defaultColor: this.props.design.color, showColorMap: true, onChange: this.handleColorAxisChange, allowExcludedValues: true, filters: filters }))));
         }
         else {
             // direct mode
@@ -275,19 +256,12 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
                     }
                 });
             }
-            return R("div", null, 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: regionsTable,
-                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
-            })));
+            return (react_1.default.createElement("div", null,
+                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: regionsTable, 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 }))));
         }
     }
     // renderLabelAxis: ->
@@ -309,33 +283,30 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
     //         showColorMap: true
     //         onChange: @handleColorAxisChange)
     renderFillOpacity() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`), ": ", R(rc_slider_1.default, {
-            min: 0,
-            max: 100,
-            step: 1,
-            tipTransitionName: "rc-slider-tooltip-zoom-down",
-            value: Math.round(this.props.design.fillOpacity * this.props.design.fillOpacity * 100),
-            onChange: (val) => this.handleFillOpacityChange(Math.sqrt(val / 100))
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`),
+            ": ",
+            react_1.default.createElement(rc_slider_1.default, { min: 0, max: 100, step: 1, tipTransitionName: "rc-slider-tooltip-zoom-down", value: Math.round(this.props.design.fillOpacity * this.props.design.fillOpacity * 100), onChange: (val) => this.handleFillOpacityChange(Math.sqrt(val / 100)) })));
     }
     renderBorderColor() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Border Color`), R("div", null, R(ColorComponent_1.default, {
-            color: this.props.design.borderColor || "#000",
-            onChange: this.handleBorderColorChange
-        })));
+        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-tint" }),
+                T `Border Color`),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.borderColor || "#000", onChange: this.handleBorderColorChange }))));
     }
     renderFilter() {
         // If not in indirect mode with table, hide
         if (this.props.design.regionMode !== "indirect" || !this.props.design.table) {
             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 not in indirect mode with table, hide
@@ -347,15 +318,7 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
         if (this.props.design.adminRegionExpr) {
             defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr;
         }
-        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: regionsTable,
-            defaultPopupFilterJoins
-        });
+        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: regionsTable, defaultPopupFilterJoins: defaultPopupFilterJoins });
     }
     renderHoverOver() {
         // If not in indirect mode with table, hide
@@ -367,18 +330,24 @@ class ChoroplethLayerDesigner extends react_1.default.Component {
         if (this.props.design.adminRegionExpr) {
             defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr;
         }
-        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: regionsTable,
-            defaultPopupFilterJoins
-        });
+        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: regionsTable, defaultPopupFilterJoins: defaultPopupFilterJoins, aggrStatuses: ["individual", "aggregate", "literal"] });
     }
     render() {
-        return R("div", null, this.renderRegionMode(), this.renderRegionsTable(), this.renderTable(), this.renderAdminRegionExpr(), this.renderScopeAndDetailLevel(), this.renderDisplayNames(), this.renderColor(), this.renderColorAxis(), this.renderFillOpacity(), this.renderBorderColor(), this.renderFilter(), this.renderPopup(), this.renderHoverOver(), R(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange }));
+        return (react_1.default.createElement("div", null,
+            this.renderRegionMode(),
+            this.renderRegionsTable(),
+            this.renderTable(),
+            this.renderAdminRegionExpr(),
+            this.renderScopeAndDetailLevel(),
+            this.renderDisplayNames(),
+            this.renderColor(),
+            this.renderColorAxis(),
+            this.renderFillOpacity(),
+            this.renderBorderColor(),
+            this.renderFilter(),
+            this.renderPopup(),
+            this.renderHoverOver(),
+            react_1.default.createElement(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })));
     }
 }
 exports.default = ChoroplethLayerDesigner;

package/lib/maps/ClusterLayer.d.ts

@@ -9,15 +9,6 @@ export default class ClusterLayer extends Layer<ClusterLayerDesign> {
     getLayerDefinitionType(): "VectorTile";
     getVectorTile(design: ClusterLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
     createJsonQL(design: ClusterLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
-    getJsonQLCss(design: ClusterLayerDesign, schema: Schema, filters: JsonQLFilter[]): {
-        layers: {
-            id: string;
-            jsonql: JsonQLQuery;
-        }[];
-        css: string;
-    };
-    createMapnikJsonQL(design: ClusterLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
-    createCss(design: ClusterLayerDesign, schema: Schema): string;
     getBounds(design: ClusterLayerDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
     getMinZoom(design: ClusterLayerDesign): number | undefined;
     getMaxZoom(design: ClusterLayerDesign): number;

package/lib/maps/ClusterLayer.js

@@ -295,256 +295,6 @@ class ClusterLayer 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) {
-        const axisBuilder = new AxisBuilder_1.default({ schema });
-        const exprCompiler = new expressions_1.ExprCompiler(schema);
-        /*
-        Query:
-          Works by first snapping to grid and then clustering the clusters with slower DBSCAN method
-    
-          select
-            ST_Centroid(ST_Collect(center)) as the_geom_webmercator,
-            sum(cnt) as cnt,
-            log(sum(cnt)) * 6 + 14 as size from
-              (
-                select
-                ST_ClusterDBSCAN(center, (!pixel_width!*30 + !pixel_height!*30)/2, 1) over () as clust,
-                sub1.center as center,
-                cnt as cnt
-                from
-                (
-                  select
-                  count(*) as cnt,
-                  ST_Centroid(ST_Collect(<geometry axis>)) as center,
-                  round(ST_XMin(<geometry axis>) /  (!pixel_width!*40)) as gridx,
-                  round(ST_YMin(<geometry axis>) /  (!pixel_width!*40)) as gridy,
-                  from <table> as main
-                  where <geometry axis> && !bbox!
-                    and <geometry axis> is not null
-                    and <other filters>
-                  group by 3, 4
-                ) as sub1
-              ) as sub2
-            group by sub2.clust
-    
-        */
-        // Compile geometry axis
-        let geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "main" });
-        // ST_Centroid(ST_Collect(<geometry axis>))
-        let centerExpr = {
-            type: "op",
-            op: "ST_Centroid",
-            exprs: [
-                {
-                    type: "op",
-                    op: "ST_Collect",
-                    exprs: [geometryExpr]
-                }
-            ]
-        };
-        const gridXExpr = {
-            type: "op",
-            op: "round",
-            exprs: [
-                {
-                    type: "op",
-                    op: "/",
-                    exprs: [
-                        { type: "op", op: "ST_XMin", exprs: [geometryExpr] },
-                        { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, 40] }
-                    ]
-                }
-            ]
-        };
-        const gridYExpr = {
-            type: "op",
-            op: "round",
-            exprs: [
-                {
-                    type: "op",
-                    op: "/",
-                    exprs: [
-                        { type: "op", op: "ST_YMin", exprs: [geometryExpr] },
-                        { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_height!" }, 5] }
-                    ]
-                }
-            ]
-        };
-        // Create inner query
-        const innerQuery = {
-            type: "query",
-            selects: [
-                { type: "select", expr: { type: "op", op: "count", exprs: [] }, alias: "cnt" },
-                { type: "select", expr: centerExpr, alias: "center" },
-                { type: "select", expr: gridXExpr, alias: "gridx" },
-                { type: "select", expr: gridYExpr, alias: "gridy" }
-            ],
-            from: exprCompiler.compileTable(design.table, "main"),
-            groupBy: [3, 4]
-        };
-        // Create filters. First ensure geometry and limit to bounding box
-        let whereClauses = [
-            {
-                type: "op",
-                op: "&&",
-                exprs: [geometryExpr, { type: "token", token: "!bbox!" }]
-            }
-        ];
-        // Then add filters baked into layer
-        if (design.filter) {
-            whereClauses.push(exprCompiler.compileExpr({ expr: design.filter || null, 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) {
-            innerQuery.where = { type: "op", op: "and", exprs: whereClauses };
-        }
-        else {
-            innerQuery.where = whereClauses[0];
-        }
-        // Create next level
-        // select
-        // ST_ClusterDBSCAN(center, (!pixel_width!*30 + !pixel_height!*30)/2, 1) over () as clust,
-        // sub1.center as center,
-        // cnt as cnt from () as innerquery
-        const clustExpr = {
-            type: "op",
-            op: "ST_ClusterDBSCAN",
-            exprs: [
-                { type: "field", tableAlias: "innerquery", column: "center" },
-                {
-                    type: "op",
-                    op: "/",
-                    exprs: [
-                        {
-                            type: "op",
-                            op: "+",
-                            exprs: [
-                                { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, 30] },
-                                { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_height!" }, 30] }
-                            ]
-                        },
-                        2
-                    ]
-                },
-                1
-            ],
-            over: {}
-        };
-        const inner2Query = {
-            type: "query",
-            selects: [
-                { type: "select", expr: clustExpr, alias: "clust" },
-                { type: "select", expr: { type: "field", tableAlias: "innerquery", column: "center" }, alias: "center" },
-                { type: "select", expr: { type: "field", tableAlias: "innerquery", column: "cnt" }, alias: "cnt" }
-            ],
-            from: { type: "subquery", query: innerQuery, alias: "innerquery" }
-        };
-        // Create final level
-        // ST_Centroid(ST_Collect(center)) as the_geom_webmercator,
-        // sum(cnt) as cnt,
-        // log(sum(cnt)) * 6 + 14 as size from
-        // ST_Centroid(ST_Collect(center))
-        centerExpr = {
-            type: "op",
-            op: "ST_Centroid",
-            exprs: [
-                {
-                    type: "op",
-                    op: "ST_Collect",
-                    exprs: [{ type: "field", tableAlias: "inner2query", column: "center" }]
-                }
-            ]
-        };
-        const cntExpr = {
-            type: "op",
-            op: "sum",
-            exprs: [{ type: "field", tableAlias: "inner2query", column: "cnt" }]
-        };
-        const sizeExpr = {
-            type: "op",
-            op: "+",
-            exprs: [{ type: "op", op: "*", exprs: [{ type: "op", op: "log", exprs: [cntExpr] }, 6] }, 14]
-        };
-        const query = {
-            type: "query",
-            selects: [
-                { type: "select", expr: centerExpr, alias: "the_geom_webmercator" },
-                { type: "select", expr: cntExpr, alias: "cnt" },
-                { type: "select", expr: sizeExpr, alias: "size" }
-            ],
-            from: { type: "subquery", query: inner2Query, alias: "inner2query" },
-            groupBy: [{ type: "field", tableAlias: "inner2query", column: "clust" }]
-        };
-        return query;
-    }
-    createCss(design, schema) {
-        const css = `\
-#layer0 [cnt>1] {
-  marker-width: [size];
-  marker-line-color: white;
-  marker-line-width: 4;
-  marker-line-opacity: 0.6;
-  marker-placement: point;
-  marker-type: ellipse;
-  marker-allow-overlap: true;
-  marker-fill: ` +
-            (design.fillColor || "#337ab7") +
-            `;
-}
-
-#layer0::l1 [cnt>1] { 
-  text-name: [cnt];
-  text-face-name: 'Arial Bold';
-  text-allow-overlap: true;
-  text-fill: ` +
-            (design.textColor || "white") +
-            `;
-}
-
-#layer0 [cnt=1] {
-  marker-width: 10;
-  marker-line-color: white;
-  marker-line-width: 2;
-  marker-line-opacity: 0.6;
-  marker-placement: point;
-  marker-type: ellipse;
-  marker-allow-overlap: true;
-  marker-fill: ` +
-            (design.fillColor || "#337ab7") +
-            `;
-}\
-`;
-        return css;
-    }
     // # Called when the interactivity grid is clicked.
     // # arguments:
     // #   ev: { data: interactivty data e.g. `{ id: 123 }` }

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,36 +193,9 @@ 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);
-        // 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}`;
         }

package/lib/maps/EditHoverOver.d.ts

@@ -1,4 +1,4 @@
-import { DataSource, Schema } from "@mwater/expressions";
+import { AggrStatus, DataSource, Schema } from "@mwater/expressions";
 import React from "react";
 export interface EditHoverOverProps {
     /** Schema to use */
@@ -13,6 +13,7 @@ export interface EditHoverOverProps {
     /** Table of the row that join is to. Usually same as table except for choropleth maps */
     idTable: string;
     defaultPopupFilterJoins: any;
+    /** Aggr statuses to allow in hover over expressions */
+    aggrStatuses: AggrStatus[];
 }
-declare function EditHoverOver(props: EditHoverOverProps): React.JSX.Element;
-export default EditHoverOver;
+export declare function EditHoverOver(props: EditHoverOverProps): React.JSX.Element;

package/lib/maps/EditHoverOver.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditHoverOver = EditHoverOver;
 const lodash_1 = require("lodash");
 const expressions_1 = require("@mwater/expressions");
 const expressions_ui_1 = require("@mwater/expressions-ui");
@@ -84,7 +85,7 @@ function EditHoverOver(props) {
                         react_1.default.createElement("th", null, T `Value`),
                         react_1.default.createElement("th", { style: { width: "1%", whiteSpace: "nowrap" } }, T `Format`),
                         react_1.default.createElement("th", { style: { width: "1%", whiteSpace: "nowrap" } }))),
-                react_1.default.createElement("tbody", null, draftItems?.map((item) => (react_1.default.createElement(HoverOverItemEditor, { key: item.id, schema: schema, dataSource: dataSource, table: table, onItemChange: handleItemChange, onItemDelete: handleItemDelete, item: item })))))),
+                react_1.default.createElement("tbody", null, draftItems?.map((item) => (react_1.default.createElement(HoverOverItemEditor, { key: item.id, schema: schema, dataSource: dataSource, table: table, onItemChange: handleItemChange, onItemDelete: handleItemDelete, item: item, aggrStatuses: props.aggrStatuses })))))),
             react_1.default.createElement("button", { className: "btn btn-link", onClick: handleAddItem },
                 react_1.default.createElement("span", { className: "fas fa-plus me-1" }),
                 T `Add Item`)))));
@@ -110,10 +111,9 @@ function HoverOverItemEditor(props) {
         react_1.default.createElement("td", { className: "align-middle" },
             react_1.default.createElement(ui.TextInput, { value: item.label, onChange: value => onItemChange({ ...item, label: value }) })),
         react_1.default.createElement("td", { className: "align-middle" },
-            react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: schema, dataSource: dataSource, table: table, types: ["text", "number", "enum", "boolean", "date", "datetime", "id"], onChange: expr => onItemChange({ ...item, value: expr }), value: item.value ?? null, aggrStatuses: ["individual", "literal", "aggregate"] })),
+            react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: schema, dataSource: dataSource, table: table, types: ["text", "number", "enum", "boolean", "date", "datetime", "id"], onChange: expr => onItemChange({ ...item, value: expr }), value: item.value ?? null, aggrStatuses: props.aggrStatuses })),
         react_1.default.createElement("td", { className: "align-middle", style: { width: "1%", whiteSpace: "nowrap" } }, renderFormat()),
         react_1.default.createElement("td", { className: "align-middle", style: { width: "1%", whiteSpace: "nowrap" } },
             react_1.default.createElement("button", { className: "btn btn-link", onClick: () => onItemDelete(item) },
                 react_1.default.createElement("span", { className: "fa fa-close" })))));
 }
-exports.default = EditHoverOver;

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