@mwater/visualization 5.0.0

package/lib/maps/MarkersLayerDesign.d.ts

@@ -0,0 +1,44 @@
+import { Expr } from "@mwater/expressions";
+import { Axis } from "../axes/Axis";
+import { HoverOverItem } from "./maps";
+/** Design for a markers layer */
+export interface MarkersLayerDesign {
+    /** table to get data from */
+    table: string;
+    /** axes (see below) */
+    axes: {
+        /** where to place markers */
+        geometry: Axis;
+        /** color axis (to split into series based on a color) */
+        color?: Axis;
+    };
+    /** optional logical expression to filter by */
+    filter?: Expr;
+    /** color of layer (e.g. #FF8800). Color axis overrides */
+    color?: string;
+    /** symbol to use for layer. e.g. "font-awesome/bell". Will be converted on server to proper uri. */
+    symbol?: string;
+    /** size in pixels of the markers. Default 10. */
+    markerSize?: number;
+    /** size of the lines in pixels. Default 3 */
+    lineWidth?: number;
+    /** opacity of polygon fill (0-1). Default is 0.25 */
+    polygonFillOpacity?: number;
+    /** color of polygon borders (defaults to color of fill) */
+    polygonBorderColor?: string;
+    /** contains items: which is BlocksLayoutManager items. Will be displayed when the marker is clicked TODO */
+    popup: {
+        items: any;
+    };
+    hoverOver: {
+        items: HoverOverItem[];
+    };
+    /** customizable filtering for popup. See PopupFilterJoins.md TODO */
+    popupFilterJoins: any;
+    /** minimum zoom level */
+    minZoom?: number;
+    /** maximum zoom level */
+    maxZoom?: number;
+    /** @deprecated LEGACY sublayers array that contains above design */
+    sublayers?: any[];
+}

package/lib/maps/MarkersLayerDesign.js

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

package/lib/maps/MarkersLayerDesignerComponent.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import EditPopupComponent from "./EditPopupComponent";
+import MarkerSymbolSelectComponent from "./MarkerSymbolSelectComponent";
+import { MarkersLayerDesign } from "./MarkersLayerDesign";
+export interface MarkersLayerDesignerComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** Design of the marker layer */
+    design: MarkersLayerDesign;
+    /** Called with new design */
+    onDesignChange: any;
+    filters?: any;
+}
+export default class MarkersLayerDesignerComponent extends React.Component<MarkersLayerDesignerComponentProps> {
+    update(updates: any): any;
+    updateAxes(changes: any): any;
+    handleTableChange: (table: any) => any;
+    handleGeometryAxisChange: (axis: any) => any;
+    handleColorAxisChange: (axis: any) => any;
+    handleFilterChange: (expr: any) => any;
+    handleColorChange: (color: any) => any;
+    handlePolygonBorderColorChange: (polygonBorderColor: any) => any;
+    handlePolygonFillOpacityChange: (polygonFillOpacity: any) => any;
+    handleSymbolChange: (symbol: any) => any;
+    handleNameChange: (e: any) => any;
+    handleMarkerSizeChange: (markerSize: any) => any;
+    handleLineWidthChange: (lineWidth: any) => any;
+    renderTable(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderGeometryAxis(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderColor(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
+    renderSymbol(): React.CElement<import("./MarkerSymbolSelectComponent").MarkerSymbolSelectComponentProps, MarkerSymbolSelectComponent> | undefined;
+    renderMarkerSize(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderLineWidth(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderPolygonBorderColor(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderPolygonFillOpacity(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderFilter(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+    renderPopup(): React.CElement<any, EditPopupComponent> | null;
+    renderHoverOver(): React.FunctionComponentElement<import("./EditHoverOver").EditHoverOverProps> | null;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/maps/MarkersLayerDesignerComponent.js

@@ -0,0 +1,269 @@
+"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 expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_1 = require("@mwater/expressions");
+const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
+const ColorComponent_1 = __importDefault(require("../ColorComponent"));
+const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
+const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
+const MarkerSymbolSelectComponent_1 = __importDefault(require("./MarkerSymbolSelectComponent"));
+const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const EditHoverOver_1 = __importDefault(require("./EditHoverOver"));
+const rc_slider_1 = __importDefault(require("rc-slider"));
+// Designer for a markers layer
+class MarkersLayerDesignerComponent extends react_1.default.Component {
+    // Apply updates to design
+    update(updates) {
+        return this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, updates));
+    }
+    // Update axes with specified changes
+    updateAxes(changes) {
+        const axes = lodash_1.default.extend({}, this.props.design.axes, changes);
+        return this.update({ axes });
+    }
+    handleTableChange = (table) => {
+        return this.update({ table });
+    };
+    handleGeometryAxisChange = (axis) => {
+        return this.updateAxes({ geometry: axis });
+    };
+    handleColorAxisChange = (axis) => {
+        return this.updateAxes({ color: axis });
+    };
+    handleFilterChange = (expr) => {
+        return this.update({ filter: expr });
+    };
+    handleColorChange = (color) => {
+        return this.update({ color });
+    };
+    handlePolygonBorderColorChange = (polygonBorderColor) => {
+        return this.update({ polygonBorderColor });
+    };
+    handlePolygonFillOpacityChange = (polygonFillOpacity) => {
+        return this.update({ polygonFillOpacity: polygonFillOpacity / 100 });
+    };
+    handleSymbolChange = (symbol) => {
+        return this.update({ symbol });
+    };
+    handleNameChange = (e) => {
+        return this.update({ name: e.target.value });
+    };
+    handleMarkerSizeChange = (markerSize) => {
+        return this.update({ markerSize });
+    };
+    handleLineWidthChange = (lineWidth) => {
+        return this.update({ lineWidth });
+    };
+    renderTable() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(TableSelectComponent_1.default, {
+            schema: this.props.schema,
+            value: this.props.design.table,
+            onChange: this.handleTableChange,
+            filter: this.props.design.filter,
+            onFilterChange: this.handleFilterChange
+        })));
+    }
+    renderGeometryAxis() {
+        if (!this.props.design.table) {
+            return;
+        }
+        const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " Location");
+        const filters = lodash_1.default.clone(this.props.filters) || [];
+        if (this.props.design.filter != null) {
+            const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+            const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" });
+            if (jsonql) {
+                filters.push({ table: this.props.design.filter.table, jsonql });
+            }
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, title), R("div", { style: { marginLeft: 10 } }, R(AxisComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.design.table,
+            types: ["geometry"],
+            aggrNeed: "none",
+            value: this.props.design.axes.geometry,
+            onChange: this.handleGeometryAxisChange,
+            filters
+        })));
+    }
+    renderColor() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        const filters = lodash_1.default.clone(this.props.filters) || [];
+        if (this.props.design.filter != null) {
+            const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+            const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" });
+            if (jsonql) {
+                filters.push({ table: this.props.design.filter.table, jsonql });
+            }
+        }
+        return R("div", null, !this.props.design.axes.color
+            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color"), R("div", null, R(ColorComponent_1.default, {
+                color: this.props.design.color,
+                onChange: this.handleColorChange
+            })))
+            : undefined, 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: "none",
+            value: this.props.design.axes.color,
+            defaultColor: this.props.design.color,
+            showColorMap: true,
+            onChange: this.handleColorAxisChange,
+            allowExcludedValues: true,
+            filters
+        })));
+    }
+    renderSymbol() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        return R(MarkerSymbolSelectComponent_1.default, { symbol: this.props.design.symbol, onChange: this.handleSymbolChange });
+    }
+    renderMarkerSize() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Marker Size"), R(ui.Select, {
+            value: this.props.design.markerSize || 10,
+            options: [
+                { value: 5, label: "Extra small" },
+                { value: 8, label: "Small" },
+                { value: 10, label: "Normal" },
+                { value: 13, label: "Large" },
+                { value: 16, label: "Extra large" }
+            ],
+            onChange: this.handleMarkerSizeChange
+        }));
+    }
+    renderLineWidth() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Line Width (for shapes)"), R(ui.Select, {
+            value: this.props.design.lineWidth != null ? this.props.design.lineWidth : 3,
+            options: [
+                { value: 0, label: "None" },
+                { value: 1, label: "1 pixel" },
+                { value: 2, label: "2 pixels" },
+                { value: 3, label: "3 pixels" },
+                { value: 4, label: "4 pixels" },
+                { value: 5, label: "5 pixels" },
+                { value: 6, label: "6 pixels" }
+            ],
+            onChange: this.handleLineWidthChange
+        }));
+    }
+    renderPolygonBorderColor() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Polygon border color (blank for same as fill color)"), R("div", null, R(ColorComponent_1.default, {
+            color: this.props.design.polygonBorderColor,
+            onChange: this.handlePolygonBorderColorChange
+        })));
+    }
+    renderPolygonFillOpacity() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        const opacity = this.props.design.polygonFillOpacity != null ? this.props.design.polygonFillOpacity : 0.25;
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", null, `Polygon Fill Opacity: ${Math.round(opacity * 100)}%`)), R("div", { style: { padding: "10px" } }, react_1.default.createElement(rc_slider_1.default, {
+            min: 0,
+            max: 100,
+            step: 1,
+            tipTransitionName: "rc-slider-tooltip-zoom-down",
+            value: opacity * 100,
+            onChange: this.handlePolygonFillOpacityChange
+        })));
+    }
+    renderFilter() {
+        // If no data, hide
+        if (!this.props.design.axes.geometry) {
+            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 (!this.props.design.table) {
+            return null;
+        }
+        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: this.props.design.table,
+            defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
+        });
+    }
+    renderHoverOver() {
+        if (!this.props.design.table) {
+            return null;
+        }
+        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: this.props.design.table,
+            defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
+        });
+    }
+    render() {
+        return R("div", null, this.renderTable(), this.renderGeometryAxis(), this.renderColor(), this.renderSymbol(), this.renderMarkerSize(), R(ui.CollapsibleSection, {
+            label: "Shape Options",
+            labelMuted: true
+        }, [
+            this.renderLineWidth(),
+            this.renderPolygonBorderColor(),
+            this.renderPolygonFillOpacity(),
+        ]), this.renderFilter(), this.renderPopup(), this.renderHoverOver(), this.props.design.table
+            ? R(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })
+            : undefined);
+    }
+}
+exports.default = MarkersLayerDesignerComponent;

package/lib/maps/PopupFilterJoinsEditComponent.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+interface PopupFilterJoinsEditComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** table of the row that the popup will be for */
+    table: string;
+    /** table of the row that join is to. Usually same as table except for choropleth maps */
+    idTable: string;
+    /** Default popup filter joins */
+    defaultPopupFilterJoins: any;
+    /** Design of the popup this is for */
+    popup: any;
+    /** popup filter joins object */
+    design?: any;
+    onDesignChange: any;
+}
+interface PopupFilterJoinsEditComponentState {
+    expanded: any;
+}
+export default class PopupFilterJoinsEditComponent extends React.Component<PopupFilterJoinsEditComponentProps, PopupFilterJoinsEditComponentState> {
+    constructor(props: any);
+    handleExprChange: (table: any, expr: any) => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedReactHTMLElement<{
+        className: string;
+        onClick: () => void;
+    }, HTMLElement>;
+}
+export {};

package/lib/maps/PopupFilterJoinsEditComponent.js

@@ -0,0 +1,75 @@
+"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 expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_1 = require("@mwater/expressions");
+const DashboardUtils = __importStar(require("../dashboards/DashboardUtils"));
+// Designer for popup filter joins (see PopupFilterJoins.md)
+class PopupFilterJoinsEditComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            expanded: false
+        };
+    }
+    handleExprChange = (table, expr) => {
+        let design = this.props.design || this.props.defaultPopupFilterJoins;
+        design = lodash_1.default.clone(design);
+        design[table] = expr;
+        return this.props.onDesignChange(design);
+    };
+    render() {
+        if (!this.state.expanded) {
+            return R("a", { className: "btn btn-link", onClick: () => this.setState({ expanded: true }) }, "Advanced Popup Options");
+        }
+        // Get filterable tables of popup
+        const popupDashboard = { items: this.props.popup.items, layout: "blocks" };
+        let filterableTables = DashboardUtils.getFilterableTables(popupDashboard, this.props.schema);
+        // Always include self as first
+        filterableTables = [this.props.table].concat(lodash_1.default.without(filterableTables, this.props.table));
+        // Get popupFilterJoins
+        const popupFilterJoins = this.props.design || this.props.defaultPopupFilterJoins;
+        return R("div", null, R("div", { className: "text-muted" }, "Optional connections for other tables to filtering the popup"), R("table", { className: "table table-sm table-bordered" }, R("thead", null, R("tr", null, R("th", null, "Data Source"), R("th", null, "Connection"))), R("tbody", null, lodash_1.default.map(filterableTables, (filterableTable) => {
+            return R("tr", { key: filterableTable }, R("td", { style: { verticalAlign: "middle" } }, expressions_1.ExprUtils.localizeString(this.props.schema.getTable(filterableTable)?.name)), R("td", null, R(expressions_ui_1.ExprComponent, {
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                table: filterableTable,
+                value: popupFilterJoins[filterableTable],
+                onChange: this.handleExprChange.bind(null, filterableTable),
+                types: this.props.table === this.props.idTable ? ["id", "id[]"] : ["id"],
+                idTable: this.props.idTable,
+                preferLiteral: false,
+                placeholder: "None"
+            })));
+        }))));
+    }
+}
+exports.default = PopupFilterJoinsEditComponent;

package/lib/maps/PopupFilterJoinsUtils.d.ts

@@ -0,0 +1,15 @@
+import { Expr, Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "..";
+/**
+ * Utilities for popup filter joins.
+ * Object keyed by table name that has expressions as values.
+ * Each value is an expression for its key's table that is a type `id` or `idTable` of the layer's table.
+ * This is used to filter the popup so that the rows are scoped to the item clicked on.
+ * For example, if the map displays water systems, the popup will (by default) only be filtered by water systems, selecting only the row that was clicked on.
+ * However, it could also filter to only water points that are related to the water system by adding the following key-value:
+ * entities.water_point: { table: "entities.water_point", type: "field", column: "water_system" }
+ */
+export declare function createPopupFilters(popupFilterJoins: {
+    [tableId: string]: Expr;
+}, schema: Schema, layerTable: any, rowId: any, useWithin?: boolean): JsonQLFilter[];
+export declare function createDefaultPopupFilterJoins(table: any): {};

package/lib/maps/PopupFilterJoinsUtils.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDefaultPopupFilterJoins = exports.createPopupFilters = void 0;
+const expressions_1 = require("@mwater/expressions");
+const expressions_2 = require("@mwater/expressions");
+/**
+ * Utilities for popup filter joins.
+ * Object keyed by table name that has expressions as values.
+ * Each value is an expression for its key's table that is a type `id` or `idTable` of the layer's table.
+ * This is used to filter the popup so that the rows are scoped to the item clicked on.
+ * For example, if the map displays water systems, the popup will (by default) only be filtered by water systems, selecting only the row that was clicked on.
+ * However, it could also filter to only water points that are related to the water system by adding the following key-value:
+ * entities.water_point: { table: "entities.water_point", type: "field", column: "water_system" }
+ */
+function createPopupFilters(popupFilterJoins, schema, layerTable, rowId, useWithin = false) {
+    const exprUtils = new expressions_2.ExprUtils(schema);
+    const exprCompiler = new expressions_1.ExprCompiler(schema);
+    const filters = [];
+    // For each filter join
+    for (let table in popupFilterJoins) {
+        // Determine type of expression (id or id[])
+        const expr = popupFilterJoins[table];
+        const exprType = exprUtils.getExprType(expr);
+        // Handle useWithin
+        if (useWithin) {
+            // For simple id type
+            if (exprType === "id") {
+                // Compile filter
+                const filterExpr = {
+                    type: "op",
+                    op: "within",
+                    table,
+                    exprs: [expr, { type: "literal", idTable: exprUtils.getExprIdTable(expr), valueType: "id", value: rowId }]
+                };
+                filters.push({ table, jsonql: exprCompiler.compileExpr({ expr: filterExpr, tableAlias: "{alias}" }) });
+            }
+            // id[] not supported
+            // else if exprType == "id[]"
+            //   # Compile filter
+            //   filterExpr = {
+            //     type: "op"
+            //     op: "within any"
+            //     table: table
+            //     exprs: [
+            //       expr
+            //       { type: "literal", idTable: exprUtils.getExprIdTable(expr), valueType: "id", value: ev.data.id }
+            //     ]
+            //   }
+            //   filters.push(exprCompiler.compileExpr(expr: filterExpr, tableAlias: "{alias}"))
+        }
+        else {
+            // For simple id type
+            var filter;
+            if (exprType === "id") {
+                filter = {
+                    table,
+                    jsonql: {
+                        type: "op",
+                        op: "=",
+                        exprs: [exprCompiler.compileExpr({ expr, tableAlias: "{alias}" }), { type: "literal", value: rowId }]
+                    }
+                };
+                filters.push(filter);
+            }
+            else if (exprType === "id[]") {
+                filter = {
+                    table,
+                    jsonql: {
+                        type: "op",
+                        op: "@>",
+                        exprs: [
+                            exprCompiler.compileExpr({ expr, tableAlias: "{alias}" }),
+                            { type: "op", op: "::jsonb", exprs: [{ type: "literal", value: JSON.stringify([rowId]) }] }
+                        ]
+                    }
+                };
+                filters.push(filter);
+            }
+        }
+    }
+    return filters;
+}
+exports.createPopupFilters = createPopupFilters;
+// Create default popup filter joins where the join is just the id (not used for choropleth since that needs to join to admin_regions)
+function createDefaultPopupFilterJoins(table) {
+    const popupFilterJoins = {};
+    // Return id of row for a simple match
+    popupFilterJoins[table] = { table, type: "id" };
+    return popupFilterJoins;
+}
+exports.createDefaultPopupFilterJoins = createDefaultPopupFilterJoins;