@mwater/visualization 5.0.0

package/lib/maps/GridLayerDesign.d.ts

@@ -0,0 +1,35 @@
+import { Expr } from "@mwater/expressions";
+import { Axis } from "../axes/Axis";
+/**
+ * Layer that is composed of a grid (hex/square) colored by a value
+ */
+export default interface GridLayerDesign {
+    /** Shape of grid */
+    shape?: "square" | "hex";
+    /**
+     * Size units for the grid. Distance between centers.
+     * "pixels": fixed pixels across
+     * "meters": approximate meters across
+     */
+    sizeUnits?: "pixels" | "meters";
+    /**
+     * Size of the grid (from center to center)
+     */
+    size?: number;
+    /** table to get data from */
+    table?: string;
+    /** expression to get geometry to map to a grid */
+    geometryExpr: Expr;
+    /** color axis of how to color grid */
+    colorAxis: Axis;
+    /** optional logical expression to filter by */
+    filter?: Expr;
+    /** opacity of fill grid (0-1) */
+    fillOpacity?: number;
+    /** Border of the polygons. Color means to color it the same as the color axis */
+    borderStyle?: "none" | "color";
+    /** minimum zoom level */
+    minZoom?: number;
+    /** maximum zoom level */
+    maxZoom?: number;
+}

package/lib/maps/GridLayerDesign.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/maps/GridLayerDesigner.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { Schema, DataSource, Expr } from "@mwater/expressions";
+import GridLayerDesign from "./GridLayerDesign";
+import { JsonQLFilter } from "../index";
+import { Axis } from "../axes/Axis";
+/** Designer for a grid layer */
+export default class GridLayerDesigner extends React.Component<{
+    schema: Schema;
+    dataSource: DataSource;
+    design: GridLayerDesign;
+    onDesignChange: (design: GridLayerDesign) => void;
+    /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+    filters: JsonQLFilter[];
+}> {
+    update(mutation: (d: GridLayerDesign) => void): void;
+    handleShapeChange: (shape: "square" | "hex") => void;
+    handleTableChange: (table: string) => void;
+    handleFilterChange: (filter: Expr) => void;
+    handleColorAxisChange: (axis: Axis) => void;
+    handleGeometryExprChange: (expr: Expr) => void;
+    handleSizeUnitsChange: (sizeUnits: "pixels" | "meters") => void;
+    handleSizeChange: (size: number) => void;
+    handleFillOpacityChange: (fillOpacity: number) => void;
+    handleBorderStyleChange: (borderStyle: "none" | "color") => void;
+    renderShape(): React.JSX.Element;
+    renderSize(): React.JSX.Element;
+    renderTable(): React.JSX.Element;
+    renderGeometryExpr(): React.JSX.Element | null;
+    renderColorAxis(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null;
+    renderFillOpacity(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderBorderStyle(): React.JSX.Element;
+    renderFilter(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/maps/GridLayerDesigner.js

@@ -0,0 +1,229 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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");
+const AxisComponent_1 = __importDefault(require("../axes/AxisComponent"));
+const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const rc_slider_1 = __importDefault(require("rc-slider"));
+const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
+/** Designer for a grid layer */
+class GridLayerDesigner extends react_1.default.Component {
+    update(mutation) {
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, mutation));
+    }
+    handleShapeChange = (shape) => {
+        this.update((d) => {
+            d.shape = shape;
+        });
+    };
+    handleTableChange = (table) => {
+        this.update((d) => {
+            d.table = table;
+        });
+    };
+    handleFilterChange = (filter) => {
+        this.update((d) => {
+            d.filter = filter;
+        });
+    };
+    handleColorAxisChange = (axis) => {
+        this.update((d) => {
+            d.colorAxis = axis;
+        });
+    };
+    handleGeometryExprChange = (expr) => {
+        this.update((d) => {
+            d.geometryExpr = expr;
+        });
+    };
+    handleSizeUnitsChange = (sizeUnits) => {
+        if (sizeUnits === "pixels") {
+            this.update((d) => {
+                d.sizeUnits = sizeUnits;
+                d.size = 30;
+            });
+        }
+        else {
+            this.update((d) => {
+                d.sizeUnits = sizeUnits;
+                d.size = 20000;
+                d.minZoom = 6;
+            });
+        }
+    };
+    handleSizeChange = (size) => {
+        this.update((d) => {
+            d.size = size;
+        });
+    };
+    handleFillOpacityChange = (fillOpacity) => {
+        this.update((d) => {
+            d.fillOpacity = fillOpacity;
+        });
+    };
+    handleBorderStyleChange = (borderStyle) => {
+        this.update((d) => {
+            d.borderStyle = borderStyle;
+        });
+    };
+    renderShape() {
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, "Grid Type"),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(ui.Toggle, { allowReset: false, value: this.props.design.shape, onChange: this.handleShapeChange, size: "sm", options: [
+                        { value: "hex", label: "Hexagonal" },
+                        { value: "square", label: "Square" }
+                    ] }))));
+    }
+    renderSize() {
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, "Size"),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement("div", { style: { display: "inline-block" } },
+                    react_1.default.createElement(ui.NumberInput, { decimal: true, value: this.props.design.size, onChange: this.handleSizeChange })),
+                "\u00A0",
+                react_1.default.createElement("div", { style: { display: "inline-block" } },
+                    react_1.default.createElement(ui.Toggle, { allowReset: false, value: this.props.design.sizeUnits, onChange: this.handleSizeUnitsChange, size: "sm", options: [
+                            { value: "pixels", label: "Pixels" },
+                            { value: "meters", label: "Meters (approximate)" }
+                        ] })),
+                "\u00A0",
+                react_1.default.createElement(PopoverHelpComponent_1.default, { placement: "bottom" }, "Pixel grids always appear to be the same size when zoomed. Meters are for a fixed-size grid and have limits on how far the user can zoom out."))));
+    }
+    renderTable() {
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fa fa-database" }),
+                " Data Source"),
+            react_1.default.createElement(TableSelectComponent_1.default, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange })));
+    }
+    renderGeometryExpr() {
+        // If no data, hide
+        if (!this.props.design.table) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fas fa-map-marker-alt" }),
+                " Location"),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleGeometryExprChange, table: this.props.design.table, types: ["geometry"], value: this.props.design.geometryExpr }))));
+    }
+    renderColorAxis() {
+        if (!this.props.design.table) {
+            return null;
+        }
+        const filters = lodash_1.default.clone(this.props.filters) || [];
+        if (this.props.design.filter) {
+            const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+            const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" });
+            let filterTable = this.props.design.filter.table;
+            if (jsonql && filterTable) {
+                filters.push({ table: filterTable, jsonql });
+            }
+        }
+        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" }), "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.colorAxis,
+            showColorMap: true,
+            onChange: this.handleColorAxisChange,
+            allowExcludedValues: true,
+            filters: filters
+        })));
+    }
+    renderFillOpacity() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Fill Opacity (%)"), ": ", R(rc_slider_1.default, {
+            min: 0,
+            max: 100,
+            step: 1,
+            tipTransitionName: "rc-slider-tooltip-zoom-down",
+            value: this.props.design.fillOpacity * 100,
+            onChange: (val) => this.handleFillOpacityChange(val / 100)
+        }));
+    }
+    renderBorderStyle() {
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, "Border Style"),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(ui.Toggle, { allowReset: false, value: this.props.design.borderStyle, onChange: this.handleBorderStyleChange, size: "sm", options: [
+                        { value: "none", label: "None" },
+                        { value: "color", label: "Line" }
+                    ] }))));
+    }
+    renderFilter() {
+        // If not with table, hide
+        if (!this.props.design.table) {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " 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
+        })));
+    }
+    // renderPopup() {
+    //   // If not in indirect mode with table, hide
+    //   if (this.props.design.regionMode !== "indirect" || !this.props.design.table) {
+    //     return null
+    //   }
+    //   const regionsTable = this.props.design.regionsTable || "admin_regions";
+    //   const defaultPopupFilterJoins = {};
+    //   if (this.props.design.adminRegionExpr) {
+    //     defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr;
+    //   }
+    //   return R(EditPopupComponent, {
+    //     design: this.props.design,
+    //     onDesignChange: this.props.onDesignChange,
+    //     schema: this.props.schema,
+    //     dataSource: this.props.dataSource,
+    //     table: this.props.design.table,
+    //     idTable: regionsTable,
+    //     defaultPopupFilterJoins
+    //   })
+    // }
+    render() {
+        return R("div", null, this.renderShape(), this.renderSize(), this.renderTable(), this.renderGeometryExpr(), this.renderColorAxis(), this.renderFillOpacity(), this.renderBorderStyle(), this.renderFilter(), 
+        // this.renderPopup(),
+        R(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange }));
+    }
+}
+exports.default = GridLayerDesigner;

package/lib/maps/HoverContent.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "..";
+export interface HoverContentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** Design of the marker layer */
+    design: any;
+    filters?: JsonQLFilter[];
+}
+declare const HoverContent: React.FC<HoverContentProps>;
+export default HoverContent;

package/lib/maps/HoverContent.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const expressions_1 = require("@mwater/expressions");
+const lodash_1 = require("lodash");
+const valueFormatter_1 = require("../valueFormatter");
+const valueFormatter_2 = require("../valueFormatter");
+const HoverContent = props => {
+    const [values, setValues] = (0, react_1.useState)({});
+    const exprUtils = new expressions_1.ExprUtils(props.schema);
+    (0, react_1.useEffect)(() => {
+        const items = props.design.hoverOver?.items ?? [];
+        if (items.length > 0) {
+            const exprCompiler = new expressions_1.ExprCompiler(props.schema);
+            const query = {
+                type: "query",
+                selects: [],
+                from: exprCompiler.compileTable(props.design.table, "main"),
+                limit: 1
+            };
+            items.forEach((item) => {
+                if (item.value) {
+                    query.selects.push({
+                        type: "select",
+                        expr: exprCompiler.compileExpr({ expr: item.value, tableAlias: "main" }),
+                        alias: item.id
+                    });
+                }
+            });
+            if (props.filters) {
+                let whereClauses = props.filters.map(f => (0, expressions_1.injectTableAlias)(f.jsonql, "main"));
+                whereClauses = (0, lodash_1.compact)(whereClauses);
+                // Wrap if multiple
+                if (whereClauses.length > 1) {
+                    query.where = { type: "op", op: "and", exprs: whereClauses };
+                }
+                else {
+                    query.where = whereClauses[0];
+                }
+            }
+            props.dataSource.performQuery(query, (error, data) => {
+                setValues(data?.[0] ?? {});
+            });
+        }
+    }, []);
+    return (react_1.default.createElement("div", { className: "_mviz-map-hover-content" }, props.design.hoverOver?.items.map((item) => {
+        let value = values[item.id];
+        if (value !== null && item.value) {
+            // Get expression type
+            const exprType = exprUtils.getExprType(item.value);
+            // Format if can format
+            if (exprType && (0, valueFormatter_1.canFormatType)(exprType)) {
+                value = (0, valueFormatter_2.formatValue)(exprType, value, undefined);
+            }
+            else {
+                value = exprUtils.stringifyExprLiteral(item.value, value);
+            }
+        }
+        else {
+            value = "■■■■";
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("span", null,
+                item.label,
+                ":"),
+            react_1.default.createElement("span", { className: "text-muted" }, values[item.id] === null ? "n/a" : values[item.id] ?? "■■■■")));
+    })));
+};
+exports.default = HoverContent;

package/lib/maps/HtmlUrlLegend.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface HtmlUrlLegendProps {
+    url: string;
+}
+interface HtmlUrlLegendState {
+    html: string;
+}
+/** Loads a html legend and sanitizes it from a url */
+export declare class HtmlUrlLegend extends React.Component<HtmlUrlLegendProps, HtmlUrlLegendState> {
+    constructor(props: HtmlUrlLegendProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: HtmlUrlLegendProps): void;
+    loadLegend(): void;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/maps/HtmlUrlLegend.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HtmlUrlLegend = void 0;
+const react_1 = __importDefault(require("react"));
+const dompurify_1 = __importDefault(require("dompurify"));
+/** Loads a html legend and sanitizes it from a url */
+class HtmlUrlLegend extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            html: ""
+        };
+    }
+    componentDidMount() {
+        this.loadLegend();
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.url !== this.props.url) {
+            this.loadLegend();
+        }
+    }
+    loadLegend() {
+        window
+            .fetch(this.props.url)
+            .then((response) => response.text())
+            .then((html) => {
+            const safeHtml = dompurify_1.default.sanitize(html);
+            this.setState({ html: safeHtml });
+        });
+    }
+    render() {
+        return react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: this.state.html } });
+    }
+}
+exports.HtmlUrlLegend = HtmlUrlLegend;

package/lib/maps/Layer.d.ts

@@ -0,0 +1,164 @@
+import { Schema, DataSource, Expr } from "@mwater/expressions";
+import { JsonQLFilter } from "../index";
+import { OnGridClickResults, OnGridHoverResults } from "./maps";
+import { ReactNode } from "react";
+import { JsonQLQuery } from "@mwater/jsonql";
+import { LayerSpecification } from "maplibre-gl";
+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;
+    /** schema to use */
+    schema: Schema;
+    /** data source to use */
+    dataSource: DataSource;
+    /** layer data source */
+    layerDataSource: any;
+    /** current scope data if layer is scoping */
+    scopeData: any;
+    /** compiled filters to apply to the popup */
+    filters: JsonQLFilter[];
+}
+export interface OnGridHoverOptions<LayerDesign> {
+    /** design of layer */
+    design: LayerDesign;
+    /** schema to use */
+    schema: Schema;
+    /** data source to use */
+    dataSource: DataSource;
+    /** layer data source */
+    layerDataSource: any;
+    /** current scope data if layer is scoping */
+    scopeData: any;
+    /** compiled filters to apply to the popup */
+    filters: JsonQLFilter[];
+}
+/** Definition of a vector tile layer */
+export interface VectorTileDef {
+    sourceLayers: VectorTileSourceLayer[];
+    /** Common table expressions of the tiles */
+    ctes: VectorTileCTE[];
+    /** Map layers must be mapbox layers that reference the source layers */
+    mapLayers: LayerSpecification[];
+    /** Which layer ids have click handlers attached. Should be non-overlapping */
+    mapLayersHandleClicks: string[];
+    /** Enforced minimum zoom level */
+    minZoom?: number;
+    /** Enforced maximum zoom level */
+    maxZoom?: number;
+}
+export interface VectorTileSourceLayer {
+    /** Unique id of the source layer */
+    id: string;
+    /** Query that produces the source layer, without the ST_AsMVT but with the ST_AsMVTGeom.
+     * References CTE called tile which has x, y, z, scale, envelope and envelope_with_margin.
+     */
+    jsonql: JsonQLQuery;
+}
+/** Common table expression that a vector tile source layer can reference.
+ * Will be pre-computed and cached. Cannot reference tile parameters.
+ */
+export interface VectorTileCTE {
+    /** tableName of the cte table. Must be [a-z]+ */
+    tableName: string;
+    /** Contents of the CTE table */
+    jsonql: JsonQLQuery;
+}
+/** 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;
+    /** 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)
+     */
+    getVectorTile(design: LayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
+    /**
+     * Called when the interactivity grid is clicked.
+     * arguments:
+     *   ev: { data: interactivty data e.g. `{ id: 123 }` }
+     *   options:
+     *     design: design of layer
+     *     schema: schema to use
+     *     dataSource: data source to use
+     *     layerDataSource: layer data source
+     *     scopeData: current scope data if layer is scoping
+     *     filters: compiled filters to apply to the popup
+     *
+     * Returns:
+     *   null/undefined
+     *   or
+     *   {
+     *     scope: scope to apply ({ name, filter, data })
+     *     row: { tableId:, primaryKey: }  # row that was selected
+     *     popup: React element to put into a popup
+     */
+    onGridClick(ev: {
+        data: any;
+        event: any;
+    }, options: OnGridClickOptions<LayerDesign>): OnGridClickResults;
+    onGridHoverOver(ev: {
+        data: any;
+        event: any;
+    }, options: OnGridHoverOptions<LayerDesign>): OnGridHoverResults;
+    /** Gets the bounds of the layer as GeoJSON */
+    getBounds(design: LayerDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: (err: any, bounds?: {
+        n: number;
+        s: number;
+        e: number;
+        w: number;
+    } | null) => void): void;
+    /** Get min zoom level */
+    getMinZoom(design: LayerDesign): number | null | undefined;
+    /** Get max zoom level */
+    getMaxZoom(design: LayerDesign): number | null | undefined;
+    /** Get the legend to be optionally displayed on the map. Returns a React element */
+    getLegend(design: LayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): ReactNode;
+    /** Get a list of table ids that can be filtered on */
+    getFilterableTables(design: LayerDesign, schema: Schema): string[];
+    /** True if layer can be edited */
+    isEditable(): boolean;
+    /** True if layer is incomplete (e.g. brand new) and should be editable immediately */
+    isIncomplete(design: LayerDesign, schema: Schema): boolean;
+    createDesignerElement(options: {
+        design: LayerDesign;
+        schema: Schema;
+        dataSource: DataSource;
+        onDesignChange: (design: LayerDesign) => void;
+    }): ReactNode;
+    /** Returns a cleaned design */
+    cleanDesign(design: LayerDesign, schema: Schema): LayerDesign;
+    /** Validates design. Null if ok, message otherwise */
+    validateDesign(design: LayerDesign, schema: Schema): string | null;
+    /** Convenience function to get the bounds of a geometry expression with filters */
+    getBoundsFromExpr(schema: Schema, dataSource: DataSource, table: string, geometryExpr: Expr, filterExpr: Expr, filters: JsonQLFilter[], callback: (err: any, bounds?: {
+        n: number;
+        e: number;
+        w: number;
+        s: number;
+    } | null) => void): void;
+}