@mwater/visualization 5.0.0

package/lib/maps/MapLayersDesignerComponent.js

@@ -0,0 +1,98 @@
+"use strict";
+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 AddLayerComponent_1 = __importDefault(require("./AddLayerComponent"));
+const MapLayerViewDesignerComponent_1 = __importDefault(require("./MapLayerViewDesignerComponent"));
+const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
+const expressions_1 = require("@mwater/expressions");
+const expressions_2 = require("@mwater/expressions");
+// Designer for layer selection in the map
+class MapLayersDesignerComponent extends react_1.default.Component {
+    // Updates design with the specified changes
+    updateDesign(changes) {
+        const design = lodash_1.default.extend({}, this.props.design, changes);
+        return this.props.onDesignChange(design);
+    }
+    handleLayerViewChange = (index, layerView) => {
+        const layerViews = this.props.design.layerViews.slice();
+        // Update self
+        layerViews[index] = layerView;
+        // Unselect any in same group if selected
+        if (layerView.group && layerView.visible) {
+            lodash_1.default.each(this.props.design.layerViews, (lv, i) => {
+                if (lv.visible && i !== index && lv.group === layerView.group) {
+                    layerViews[i] = lodash_1.default.extend({}, lv, { visible: false });
+                }
+            });
+        }
+        return this.updateDesign({ layerViews });
+    };
+    handleRemoveLayerView = (index) => {
+        const layerViews = this.props.design.layerViews.slice();
+        layerViews.splice(index, 1);
+        return this.updateDesign({ layerViews });
+    };
+    handleReorder = (layerList) => {
+        return this.updateDesign({ layerViews: layerList });
+    };
+    renderLayerView = (layerView, index, connectDragSource, connectDragPreview, connectDropTarget) => {
+        const style = {
+            padding: "10px 15px",
+            border: "1px solid #ddd",
+            marginBottom: -1,
+            backgroundColor: "#fff"
+        };
+        const filters = lodash_1.default.clone(this.props.filters) || [];
+        if (layerView.design.filter != null) {
+            const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+            const exprCleaner = new expressions_2.ExprCleaner(this.props.schema);
+            // Clean filter first
+            const filter = exprCleaner.cleanExpr(layerView.design.filter, { types: ["boolean"] });
+            if (filter) {
+                const jsonql = exprCompiler.compileExpr({ expr: filter, tableAlias: "{alias}" });
+                if (jsonql) {
+                    filters.push({ table: filter.table, jsonql });
+                }
+            }
+        }
+        return R("div", { style }, react_1.default.createElement(MapLayerViewDesignerComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            layerView,
+            onLayerViewChange: (lv) => this.handleLayerViewChange(index, lv),
+            onRemove: () => this.handleRemoveLayerView(index),
+            connectDragSource,
+            connectDragPreview,
+            connectDropTarget,
+            allowEditingLayer: this.props.allowEditingLayers,
+            filters: lodash_1.default.compact(filters)
+        }));
+    };
+    render() {
+        return R("div", { className: "mb-3" }, this.props.design.layerViews.length > 0
+            ? R("div", { style: { padding: 5 }, key: "layers" }, R("div", { className: "list-group", key: "layers", style: { marginBottom: 10 } }, 
+            // _.map(@props.design.layerViews, @renderLayerView)
+            react_1.default.createElement(ReorderableListComponent_1.default, {
+                items: this.props.design.layerViews,
+                onReorder: this.handleReorder,
+                renderItem: this.renderLayerView,
+                getItemId: (layerView) => layerView.id
+            })))
+            : undefined, this.props.allowEditingLayers
+            ? R(AddLayerComponent_1.default, {
+                key: "addlayer",
+                layerNumber: this.props.design.layerViews.length,
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                design: this.props.design,
+                onDesignChange: this.props.onDesignChange
+            })
+            : undefined);
+    }
+}
+exports.default = MapLayersDesignerComponent;

package/lib/maps/MapUtils.d.ts

@@ -0,0 +1,21 @@
+import { JsonQLExpr } from "@mwater/jsonql";
+import { Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { MapDesign } from "./MapDesign";
+export interface MapScope {
+    name: string;
+    filter: JsonQLFilter;
+    data: {
+        layerViewId: string;
+        data: any;
+    };
+}
+export declare function canConvertToClusterMap(design: MapDesign): boolean;
+export declare function canConvertToMarkersMap(design: MapDesign): boolean;
+export declare function convertToClusterMap(design: MapDesign): MapDesign;
+export declare function convertToMarkersMap(design: MapDesign): MapDesign;
+export declare function getFilterableTables(design: MapDesign, schema: Schema): string[];
+export declare function getCompiledFilters(design: MapDesign, schema: Schema, filterableTables: string[]): {
+    table: string;
+    jsonql: JsonQLExpr;
+}[];

package/lib/maps/MapUtils.js

@@ -0,0 +1,119 @@
+"use strict";
+// General utilities for a map
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompiledFilters = exports.getFilterableTables = exports.convertToMarkersMap = exports.convertToClusterMap = exports.canConvertToMarkersMap = exports.canConvertToClusterMap = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+const LayerFactory_1 = __importDefault(require("./LayerFactory"));
+// Check if can convert to a cluster map. Only maps containing marker views can be
+function canConvertToClusterMap(design) {
+    return lodash_1.default.any(design.layerViews, (lv) => lv.type === "Markers");
+}
+exports.canConvertToClusterMap = canConvertToClusterMap;
+// Check if can convert to a markers map. Only maps containing cluster views can be
+function canConvertToMarkersMap(design) {
+    return lodash_1.default.any(design.layerViews, (lv) => lv.type === "Cluster");
+}
+exports.canConvertToMarkersMap = canConvertToMarkersMap;
+// Convert to a cluster map
+function convertToClusterMap(design) {
+    const layerViews = lodash_1.default.map(design.layerViews, (lv) => {
+        if (lv.type !== "Markers") {
+            return lv;
+        }
+        lv = lodash_1.default.cloneDeep(lv);
+        // Set type and design
+        lv.type = "Cluster";
+        lv.design = {
+            table: lv.design.table,
+            axes: { geometry: lv.design.axes != null ? lv.design.axes.geometry : undefined },
+            filter: lv.design.filter,
+            fillColor: lv.design.color,
+            minZoom: lv.design.minZoom,
+            maxZoom: lv.design.maxZoom
+        };
+        return lv;
+    });
+    return lodash_1.default.extend({}, design, { layerViews });
+}
+exports.convertToClusterMap = convertToClusterMap;
+// Convert to a markers map
+function convertToMarkersMap(design) {
+    const layerViews = lodash_1.default.map(design.layerViews, (lv) => {
+        if (lv.type !== "Cluster") {
+            return lv;
+        }
+        lv = lodash_1.default.cloneDeep(lv);
+        // Set type and design
+        lv.type = "Markers";
+        lv.design = {
+            table: lv.design.table,
+            axes: { geometry: lv.design.axes != null ? lv.design.axes.geometry : undefined },
+            filter: lv.design.filter,
+            color: lv.design.fillColor,
+            minZoom: lv.design.minZoom,
+            maxZoom: lv.design.maxZoom
+        };
+        return lv;
+    });
+    return lodash_1.default.extend({}, design, { layerViews });
+}
+exports.convertToMarkersMap = convertToMarkersMap;
+// Get ids of filterable tables
+function getFilterableTables(design, schema) {
+    let filterableTables = [];
+    for (let layerView of design.layerViews) {
+        // Create layer
+        const layer = LayerFactory_1.default.createLayer(layerView.type);
+        // Get filterable tables
+        filterableTables = lodash_1.default.uniq(filterableTables.concat(layer.getFilterableTables(layerView.design, schema)));
+    }
+    // Remove non-existant tables
+    filterableTables = lodash_1.default.filter(filterableTables, (table) => schema.getTable(table));
+    return filterableTables;
+}
+exports.getFilterableTables = getFilterableTables;
+// Compile map filters with global filters
+function getCompiledFilters(design, schema, filterableTables) {
+    const exprCompiler = new expressions_1.ExprCompiler(schema);
+    const exprCleaner = new expressions_1.ExprCleaner(schema);
+    const exprUtils = new expressions_1.ExprUtils(schema);
+    const compiledFilters = [];
+    // Compile filters to JsonQL expected by layers
+    for (const table in design.filters || {}) {
+        let expr = design.filters[table];
+        // Clean expr
+        expr = exprCleaner.cleanExpr(expr, { table });
+        const jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" });
+        if (jsonql) {
+            compiledFilters.push({ table, jsonql });
+        }
+    }
+    // Add global filters
+    for (let filter of design.globalFilters || []) {
+        for (const table of filterableTables) {
+            // Check if exists and is correct type
+            const column = schema.getColumn(table, filter.columnId);
+            if (!column) {
+                continue;
+            }
+            const columnExpr = { type: "field", table, column: column.id };
+            if (exprUtils.getExprType(columnExpr) !== filter.columnType) {
+                continue;
+            }
+            // Create expr
+            let expr = { type: "op", op: filter.op, table, exprs: [columnExpr].concat(filter.exprs) };
+            // Clean expr
+            expr = exprCleaner.cleanExpr(expr, { table });
+            const jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" });
+            if (jsonql) {
+                compiledFilters.push({ table, jsonql });
+            }
+        }
+    }
+    return compiledFilters;
+}
+exports.getCompiledFilters = getCompiledFilters;

package/lib/maps/MapViewComponent.d.ts

@@ -0,0 +1,38 @@
+import { DataSource, Schema } from "@mwater/expressions";
+import React from "react";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { MapDesign } from "./MapDesign";
+import { MapDataSource } from "./MapDataSource";
+import { MapScope } from "./MapUtils";
+/** Component that displays just the map */
+export declare function MapViewComponent(props: {
+    schema: Schema;
+    dataSource: DataSource;
+    mapDataSource: MapDataSource;
+    design: MapDesign;
+    onDesignChange?: (design: MapDesign) => void;
+    /** Width in pixels */
+    width: number;
+    /** Height in pixels */
+    height: number;
+    /** Called with (tableId, rowId) when item is clicked */
+    onRowClick?: (tableId: string, rowId: any) => void;
+    /** Extra filters to apply to view */
+    extraFilters?: JsonQLFilter[];
+    /** scope of the map (when a layer self-selects a particular scope) */
+    scope?: MapScope;
+    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+    onScopeChange?: (scope: MapScope | null) => void;
+    /** Whether the map be draggable with mouse/touch or not. Default true */
+    dragging?: boolean;
+    /** Whether the map can be zoomed by touch-dragging with two fingers. Default true */
+    touchZoom?: boolean;
+    /** Whether the map can be zoomed by using the mouse wheel. Default true */
+    scrollWheelZoom?: boolean;
+    /** Whether changes to zoom level should be persisted. Default false  */
+    zoomLocked?: boolean;
+    /** Locale to use. Overrides map design locale */
+    locale?: string;
+    /** Whether to disable interaction or not. Default false (implemented for printing to reduce number of tiles request) */
+    disableInteraction?: boolean;
+}): React.JSX.Element;

package/lib/maps/MapViewComponent.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapViewComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const VectorMapViewComponent_1 = require("./VectorMapViewComponent");
+const RasterMapViewComponent_1 = __importDefault(require("./RasterMapViewComponent"));
+const vectorMaps_1 = require("./vectorMaps");
+/** Component that displays just the map */
+function MapViewComponent(props) {
+    if ((0, vectorMaps_1.areVectorMapsEnabled)()) {
+        return react_1.default.createElement(VectorMapViewComponent_1.VectorMapViewComponent, { ...props });
+    }
+    else {
+        return react_1.default.createElement(RasterMapViewComponent_1.default, { ...props });
+    }
+}
+exports.MapViewComponent = MapViewComponent;

package/lib/maps/MarkerSymbolSelectComponent.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface MarkerSymbolSelectComponentProps {
+    symbol?: string;
+    onChange: any;
+}
+export default class MarkerSymbolSelectComponent extends React.Component<MarkerSymbolSelectComponentProps> {
+    render(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+}

package/lib/maps/MarkerSymbolSelectComponent.js

@@ -0,0 +1,28 @@
+"use strict";
+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 react_select_1 = __importDefault(require("react-select"));
+const mapSymbols_1 = require("./mapSymbols");
+// Allows selecting of map marker symbol
+class MarkerSymbolSelectComponent extends react_1.default.Component {
+    render() {
+        // Create options
+        const options = mapSymbols_1.mapSymbols;
+        const optionRenderer = (option) => R("span", null, R("i", { className: `fa fa-${option.value.substr(13)}` }), // Trim "font-awesome/"
+        ` ${option.label}`);
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fa fa-star" }), " ", "Symbol"), R(react_select_1.default, {
+            placeholder: "Circle",
+            value: lodash_1.default.findWhere(options, { value: this.props.symbol }) || null,
+            options,
+            formatOptionLabel: optionRenderer,
+            isClearable: true,
+            onChange: (opt) => this.props.onChange(opt?.value || null)
+        }));
+    }
+}
+exports.default = MarkerSymbolSelectComponent;

package/lib/maps/MarkersLayer.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef } from "./Layer";
+import { Schema, DataSource } from "@mwater/expressions";
+import { OnGridClickResults, OnGridHoverResults } from "./maps";
+import { JsonQLFilter } from "../index";
+import { JsonQLQuery, JsonQLSelectQuery } from "@mwater/jsonql";
+import { MarkersLayerDesign } from "./MarkersLayerDesign";
+import LayerLegendComponent from "./LayerLegendComponent";
+export default class MarkersLayer extends Layer<MarkersLayerDesign> {
+    /** Gets the type of layer definition */
+    getLayerDefinitionType(): "VectorTile";
+    getVectorTile(design: MarkersLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
+    createJsonQL(design: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLSelectQuery;
+    getJsonQLCss(design: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]): {
+        layers: {
+            id: string;
+            jsonql: JsonQLQuery;
+        }[];
+        css: string;
+        interactivity: {
+            layer: string;
+            fields: string[];
+        };
+    };
+    createMapnikJsonQL(design: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
+    createCss(design: MarkersLayerDesign): string;
+    onGridHoverOver(ev: {
+        data: any;
+        event: any;
+    }, hoverOptions: OnGridHoverOptions<MarkersLayerDesign>): OnGridHoverResults;
+    onGridClick(ev: {
+        data: any;
+        event: any;
+    }, clickOptions: OnGridClickOptions<MarkersLayerDesign>): OnGridClickResults;
+    getBounds(design: MarkersLayerDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
+    getMinZoom(design: MarkersLayerDesign): number | undefined;
+    getMaxZoom(design: MarkersLayerDesign): number;
+    getLegend(design: MarkersLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.CElement<import("./LayerLegendComponent").LayerLegendComponentProps, LayerLegendComponent>;
+    getFilterableTables(design: MarkersLayerDesign, schema: Schema): string[];
+    isEditable(): boolean;
+    createDesignerElement(options: {
+        design: MarkersLayerDesign;
+        schema: Schema;
+        dataSource: DataSource;
+        onDesignChange: (design: MarkersLayerDesign) => void;
+        filters: JsonQLFilter[];
+    }): React.ReactElement<{}>;
+    cleanDesign(design: MarkersLayerDesign, schema: Schema): MarkersLayerDesign;
+    validateDesign(design: MarkersLayerDesign, schema: Schema): string | null;
+}
+/**
+ * Takes a base query that has any number of selects and where conditions. It must have a geometry
+ * field called the_geom_webmercator. It then adds a select that is a row_number() over a partition by the rounded
+ * ST_XMin and ST_YMin of the geometry divided by the scale of the tile. This creates clusters of markers
+ * that are within the same grid square of the size of the scale. The row_number() is aliased as "r".
+ *
+ * It then adds a where clause that clips the geometry to the envelope of the tile plus a margin.
+ *
+ * The outer query then selects all non-geometry and non-cluster fields and wraps the geometry in
+ * ST_AsMVTGeom to prepare it for display. It also limits the clusters to a maximum of 3 markers per
+ * small area to limit tile sizes
+ *
+ * @param baseQuery query to build from
+ * @returns query ready for sending to server
+ */
+export declare function createMarkersVectorQuery(baseQuery: JsonQLSelectQuery): JsonQLSelectQuery;