@mwater/visualization 5.0.0

package/lib/maps/MapDesignerComponent.d.ts

@@ -0,0 +1,39 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { MapDesign } from "./MapDesign";
+import { JsonQLFilter } from "../JsonQLFilter";
+export interface MapDesignerComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    /** Data source to use */
+    dataSource: DataSource;
+    /** See Map Design.md */
+    design: MapDesign;
+    /** Called with new design */
+    onDesignChange: (design: MapDesign) => void;
+    /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+    filters?: JsonQLFilter[];
+    /** True to enable quickfilters */
+    enableQuickfilters?: boolean;
+}
+export default class MapDesignerComponent extends React.Component<MapDesignerComponentProps> {
+    static childContextTypes: {
+        activeTables: PropTypes.Requireable<string[]>;
+    };
+    getChildContext(): {
+        activeTables: string[];
+    };
+    handleAttributionChange: (text: any) => void;
+    handleAutoBoundsChange: (value: any) => void;
+    handleShowLayerSwitcherChange: (value: any) => void;
+    handleConvertToClusterMap: () => void;
+    handleConvertToMarkersMap: () => void;
+    handleInitialLegendDisplayChange: (value: any) => void;
+    renderOptionsTab(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            padding: number;
+        };
+    }, HTMLElement>;
+}

package/lib/maps/MapDesignerComponent.js

@@ -0,0 +1,215 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
+const NumberInputComponent_1 = __importDefault(require("@mwater/react-library/lib/NumberInputComponent"));
+const CheckboxComponent_1 = __importDefault(require("../CheckboxComponent"));
+const react_onclickout_1 = __importDefault(require("react-onclickout"));
+const MapLayersDesignerComponent_1 = __importDefault(require("./MapLayersDesignerComponent"));
+const MapFiltersDesignerComponent_1 = __importDefault(require("./MapFiltersDesignerComponent"));
+const BaseLayerDesignerComponent_1 = __importDefault(require("./BaseLayerDesignerComponent"));
+const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
+const MapUtils = __importStar(require("./MapUtils"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
+const immer_1 = __importDefault(require("immer"));
+class MapDesignerComponent extends react_1.default.Component {
+    static childContextTypes = { activeTables: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired) };
+    getChildContext() {
+        return {
+            // Pass active tables down to table select components so they can present a shorter list
+            activeTables: MapUtils.getFilterableTables(this.props.design, this.props.schema)
+        };
+    }
+    handleAttributionChange = (text) => {
+        const design = { ...this.props.design, attribution: text };
+        return this.props.onDesignChange(design);
+    };
+    handleAutoBoundsChange = (value) => {
+        const design = { ...this.props.design, autoBounds: value };
+        return this.props.onDesignChange(design);
+    };
+    handleShowLayerSwitcherChange = (value) => {
+        const design = { ...this.props.design, showLayerSwitcher: value };
+        return this.props.onDesignChange(design);
+    };
+    handleConvertToClusterMap = () => {
+        return this.props.onDesignChange(MapUtils.convertToClusterMap(this.props.design));
+    };
+    handleConvertToMarkersMap = () => {
+        return this.props.onDesignChange(MapUtils.convertToMarkersMap(this.props.design));
+    };
+    handleInitialLegendDisplayChange = (value) => {
+        const design = { ...this.props.design, initialLegendDisplay: value };
+        return this.props.onDesignChange(design);
+    };
+    renderOptionsTab() {
+        return R("div", null, R(BaseLayerDesignerComponent_1.default, {
+            design: this.props.design,
+            onDesignChange: this.props.onDesignChange
+        }), R(CheckboxComponent_1.default, {
+            checked: this.props.design.autoBounds,
+            onChange: this.handleAutoBoundsChange
+        }, R("span", { className: "text-muted" }, "Automatic zoom ", R(PopoverHelpComponent_1.default, { placement: "left" }, "Automatically zoom to the complete data whenever the map is loaded or the filters change"))), R(CheckboxComponent_1.default, {
+            checked: this.props.design.showLayerSwitcher,
+            onChange: this.handleShowLayerSwitcherChange
+        }, R("span", { className: "text-muted" }, "Show Layer Switcher ", R(PopoverHelpComponent_1.default, { placement: "left" }, "Show a control in the map allowing switching layers"))), R(ui.FormGroup, { label: "Initial Legend Display", labelMuted: true }, R(ui.Select, {
+            value: this.props.design.initialLegendDisplay || "open",
+            onChange: this.handleInitialLegendDisplayChange,
+            options: [
+                { value: "open", label: "Open" },
+                { value: "closed", label: "Closed" },
+                { value: "closedIfSmall", label: "Open if wide enough" }
+            ],
+            style: { width: "auto" }
+        })), MapUtils.canConvertToClusterMap(this.props.design)
+            ? R("div", { key: "tocluster" }, R("a", { onClick: this.handleConvertToClusterMap, className: "btn btn-link btn-sm" }, "Convert to cluster map"))
+            : undefined, MapUtils.canConvertToMarkersMap(this.props.design)
+            ? R("div", { key: "toMarker" }, R("a", { onClick: this.handleConvertToMarkersMap, className: "btn btn-link btn-sm" }, "Convert to markers map"))
+            : undefined, R(AttributionComponent, {
+            text: this.props.design.attribution,
+            onTextChange: this.handleAttributionChange
+        }), R("br"), R(AdvancedOptionsComponent, {
+            design: this.props.design,
+            onDesignChange: this.props.onDesignChange
+        }));
+    }
+    render() {
+        const filterableTables = MapUtils.getFilterableTables(this.props.design, this.props.schema);
+        const filters = (this.props.filters || []).concat(MapUtils.getCompiledFilters(this.props.design, this.props.schema, filterableTables));
+        const tabs = [
+            {
+                id: "layers",
+                label: [R("i", { className: "fa fa-bars" }), " Layers"],
+                elem: R(MapLayersDesignerComponent_1.default, {
+                    schema: this.props.schema,
+                    dataSource: this.props.dataSource,
+                    design: this.props.design,
+                    onDesignChange: this.props.onDesignChange,
+                    allowEditingLayers: true,
+                    filters: lodash_1.default.compact(filters)
+                })
+            },
+            {
+                id: "filters",
+                label: [R("i", { className: "fa fa-filter" }), " Filters"],
+                elem: R(MapFiltersDesignerComponent_1.default, {
+                    schema: this.props.schema,
+                    dataSource: this.props.dataSource,
+                    design: this.props.design,
+                    onDesignChange: this.props.onDesignChange
+                })
+            },
+            {
+                id: "options",
+                label: [R("i", { className: "fa fa-cog" }), " Options"],
+                elem: this.renderOptionsTab()
+            }
+        ];
+        if (this.props.enableQuickfilters) {
+            tabs.splice(2, 0, {
+                id: "quickfilters",
+                label: [R("i", { className: "fa fa-bolt" }), " ", T("Quickfilters")],
+                elem: R("div", { style: { marginBottom: 200 } }, R(QuickfiltersDesignComponent_1.default, {
+                    design: this.props.design.quickfilters || [],
+                    onDesignChange: (qfDesign) => {
+                        this.props.onDesignChange((0, immer_1.default)(this.props.design, (draft) => {
+                            draft.quickfilters = qfDesign;
+                        }));
+                    },
+                    schema: this.props.schema,
+                    dataSource: this.props.dataSource,
+                    tables: filterableTables
+                }))
+            });
+        }
+        return R("div", { style: { padding: 5 } }, R(TabbedComponent_1.default, {
+            initialTabId: "layers",
+            tabs
+        }));
+    }
+}
+exports.default = MapDesignerComponent;
+// Attribution inline editing
+class AttributionComponent extends react_1.default.Component {
+    static defaultProps = { text: null };
+    constructor(props) {
+        super(props);
+        this.state = {
+            editing: false
+        };
+    }
+    handleTextChange = (e) => {
+        return this.props.onTextChange(e.target.value);
+    };
+    handleClickOut = () => {
+        return this.setState({ editing: false });
+    };
+    renderEditor() {
+        return R(react_onclickout_1.default, { onClickOut: this.handleClickOut }, R("input", { onChange: this.handleTextChange, value: this.props.text, className: "form-control" }));
+    }
+    handleTextClick = () => {
+        return this.setState({ editing: true });
+    };
+    render() {
+        let elem = R("div", { style: { marginLeft: 5 } }, this.state.editing
+            ? this.renderEditor()
+            : this.props.text
+                ? R("span", { onClick: this.handleTextClick, style: { cursor: "pointer" } }, this.props.text)
+                : R("a", { onClick: this.handleTextClick, className: "btn btn-link btn-sm" }, "+ Add attribution"));
+        if (this.props.text || this.state.editing) {
+            elem = R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Attribution"), elem);
+        }
+        return elem;
+    }
+}
+// Advanced options control
+class AdvancedOptionsComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            expanded: false
+        };
+    }
+    render() {
+        if (!this.state.expanded) {
+            return R("div", null, R("a", { className: "btn btn-link btn-sm", onClick: () => this.setState({ expanded: true }) }, "Advanced options..."));
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Advanced"), R("div", null, R("span", { className: "text-muted" }, "Maximum Zoom Level: "), " ", R(NumberInputComponent_1.default, {
+            small: true,
+            style: { display: "inline-block" },
+            placeholder: "None",
+            value: this.props.design.maxZoom,
+            onChange: (v) => this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { maxZoom: v }))
+        })));
+    }
+}

package/lib/maps/MapFiltersDesignerComponent.d.ts

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface MapFiltersDesignerComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    /** Data source to use */
+    dataSource: DataSource;
+    /** See Map Design.md */
+    design: any;
+    /** Called with new design */
+    onDesignChange: any;
+}
+export default class MapFiltersDesignerComponent extends React.Component<MapFiltersDesignerComponentProps> {
+    static contextTypes: {
+        globalFiltersElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    handleFiltersChange: (filters: any) => any;
+    handleGlobalFiltersChange: (globalFilters: any) => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null;
+}

package/lib/maps/MapFiltersDesignerComponent.js

@@ -0,0 +1,70 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
+const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerComponent"));
+const MapUtils = __importStar(require("./MapUtils"));
+// Designer for filters for a map
+class MapFiltersDesignerComponent extends react_1.default.Component {
+    static contextTypes = { globalFiltersElementFactory: prop_types_1.default.func };
+    handleFiltersChange = (filters) => {
+        const design = lodash_1.default.extend({}, this.props.design, { filters });
+        return this.props.onDesignChange(design);
+    };
+    handleGlobalFiltersChange = (globalFilters) => {
+        const design = lodash_1.default.extend({}, this.props.design, { globalFilters });
+        return this.props.onDesignChange(design);
+    };
+    render() {
+        // Get filterable tables
+        const filterableTables = MapUtils.getFilterableTables(this.props.design, this.props.schema);
+        if (filterableTables.length === 0) {
+            return null;
+        }
+        return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Filters ", R(PopoverHelpComponent_1.default, { placement: "left" }, "Filters all layers in the map. Individual layers can be filtered by clicking on Customize...")), R("div", { style: { margin: 5 } }, R(FiltersDesignerComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            filters: this.props.design.filters,
+            onFiltersChange: this.handleFiltersChange,
+            filterableTables
+        }))), this.context.globalFiltersElementFactory
+            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Global Filters "), R("div", { style: { margin: 5 } }, this.context.globalFiltersElementFactory({
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                filterableTables,
+                globalFilters: this.props.design.globalFilters || [],
+                onChange: this.handleGlobalFiltersChange
+            })))
+            : undefined);
+    }
+}
+exports.default = MapFiltersDesignerComponent;

package/lib/maps/MapLayerDataSource.d.ts

@@ -0,0 +1,22 @@
+import { JsonQLFilter } from "../JsonQLFilter";
+import { WidgetDataSource } from "../widgets/WidgetDataSource";
+/** Data source for a layer of a map. Gives urls, popup data */
+export interface MapLayerDataSource {
+    /** Get the url for the image 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
+     * Only called on layers that are valid */
+    getTileUrl(design: any, filters: JsonQLFilter[]): string | null;
+    /** 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
+     * Only called on layers that are valid */
+    getUtfGridUrl(design: any, filters: JsonQLFilter[]): string | null;
+    /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
+     * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
+     */
+    getVectorTileUrl(layerDesign: any, filters: JsonQLFilter[], createdAfter: string): Promise<{
+        url: string;
+        expires: string;
+    }>;
+    /** Gets widget data source for a popup widget */
+    getPopupWidgetDataSource(design: any, widgetId: string): WidgetDataSource;
+}

package/lib/maps/MapLayerDataSource.js

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

package/lib/maps/MapLayerViewDesignerComponent.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface MapLayerViewDesignerComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** See Map Design.md */
+    layerView: any;
+    /** Called with new layer view */
+    onLayerViewChange: any;
+    /** Called to remove */
+    onRemove: any;
+    /** connector for reorderable */
+    connectDragSource?: any;
+    /** connector for reorderable */
+    connectDragPreview?: any;
+    /** connector for reorderable */
+    connectDropTarget?: any;
+    allowEditingLayer: boolean;
+    filters?: any;
+}
+interface MapLayerViewDesignerComponentState {
+    editing: any;
+}
+export default class MapLayerViewDesignerComponent extends React.Component<MapLayerViewDesignerComponentProps, MapLayerViewDesignerComponentState> {
+    constructor(props: any);
+    update(updates: any): any;
+    handleVisibleClick: () => any;
+    handleHideLegend: (hideLegend: any) => any;
+    handleGroupChange: (group: any) => any;
+    handleToggleEditing: () => void;
+    handleSaveEditing: (design: any) => any;
+    handleRename: () => any;
+    renderVisible(): React.DetailedReactHTMLElement<{
+        className: string;
+        style: {
+            color: "#2E6DA4";
+        };
+        onClick: () => any;
+    }, HTMLElement> | React.DetailedReactHTMLElement<{
+        className: string;
+        style: {
+            color: "#DDDDDD";
+        };
+        onClick: () => any;
+    }, HTMLElement>;
+    renderAdvanced(): React.DetailedReactHTMLElement<{
+        key: string;
+        style: {
+            display: "grid";
+            gridTemplateColumns: string;
+            alignItems: "center";
+            columnGap: number;
+        };
+    }, HTMLElement>;
+    renderName(): React.DetailedReactHTMLElement<{
+        className: string;
+        onClick: () => any;
+        style: {
+            cursor: "pointer";
+        };
+    }, HTMLElement>;
+    renderEditor(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderLayerEditToggle(): React.DetailedReactHTMLElement<{
+        key: string;
+        style: {
+            marginBottom: number | undefined;
+        };
+    }, HTMLElement>;
+    handleOpacityChange: (newValue: any) => any;
+    handleRemove: () => any;
+    renderOpacityControl(): React.DetailedReactHTMLElement<{
+        className: string;
+        style: {
+            paddingTop: number;
+        };
+    }, HTMLElement>;
+    renderDeleteLayer(): React.DetailedReactHTMLElement<{
+        style: {
+            float: "right";
+            marginLeft: number;
+        };
+        key: string;
+    }, HTMLElement>;
+    render(): any;
+}
+export {};

package/lib/maps/MapLayerViewDesignerComponent.js

@@ -0,0 +1,151 @@
+"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 rc_slider_1 = __importDefault(require("rc-slider"));
+const LayerFactory_1 = __importDefault(require("./LayerFactory"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
+// A single row in the table of layer views. Handles the editor state
+class MapLayerViewDesignerComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        const layer = LayerFactory_1.default.createLayer(this.props.layerView.type);
+        this.state = {
+            editing: props.allowEditingLayer && layer.isIncomplete(this.props.layerView.design, this.props.schema) // Editing initially if incomplete
+        };
+    }
+    update(updates) {
+        return this.props.onLayerViewChange(lodash_1.default.extend({}, this.props.layerView, updates));
+    }
+    handleVisibleClick = () => {
+        return this.update({ visible: !this.props.layerView.visible });
+    };
+    handleHideLegend = (hideLegend) => {
+        return this.update({ hideLegend });
+    };
+    handleGroupChange = (group) => {
+        return this.update({ group });
+    };
+    handleToggleEditing = () => {
+        return this.setState({ editing: !this.state.editing });
+    };
+    handleSaveEditing = (design) => {
+        return this.update({ design });
+    };
+    handleRename = () => {
+        if (this.props.allowEditingLayer) {
+            const name = prompt("Enter new name", this.props.layerView.name);
+            if (name) {
+                return this.update({ name });
+            }
+        }
+    };
+    renderVisible() {
+        if (this.props.layerView.visible) {
+            return R("i", {
+                className: "fa fa-fw fa-check-square",
+                style: { color: "#2E6DA4" },
+                onClick: this.handleVisibleClick
+            });
+        }
+        else {
+            return R("i", {
+                className: "fa fa-fw fa-square",
+                style: { color: "#DDDDDD" },
+                onClick: this.handleVisibleClick
+            });
+        }
+    }
+    renderAdvanced() {
+        return R("div", {
+            key: "advanced",
+            style: { display: "grid", gridTemplateColumns: "50% auto auto 1fr", alignItems: "center", columnGap: 5 }
+        }, R(ui.Checkbox, { value: this.props.layerView.hideLegend, onChange: this.handleHideLegend, inline: true }, "Hide Legend"), R("label", { className: "text-muted", key: "label" }, "Group:"), R(ui.TextInput, {
+            key: "input",
+            value: this.props.layerView.group,
+            onChange: this.handleGroupChange,
+            style: { width: "5em" },
+            placeholder: "None"
+        }), R("div", null, R(PopoverHelpComponent_1.default, { placement: "top", key: "help" }, "Layers in the same group can only be selected one at a time")));
+    }
+    renderName() {
+        return R("span", { className: "hover-display-parent", onClick: this.handleRename, style: { cursor: "pointer" } }, this.props.layerView.name, " ", R("span", { className: "hover-display-child fas fa-pencil-alt text-muted" }));
+    }
+    renderEditor() {
+        const layer = LayerFactory_1.default.createLayer(this.props.layerView.type);
+        return R("div", null, layer.isEditable() &&
+            layer.createDesignerElement({
+                design: this.props.layerView.design,
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                onDesignChange: this.handleSaveEditing
+            }), this.renderOpacityControl(), this.renderAdvanced());
+    }
+    renderLayerEditToggle() {
+        return R("div", { key: "edit", style: { marginBottom: this.state.editing ? 10 : undefined } }, R("a", { className: "link-plain", onClick: this.handleToggleEditing, style: { fontSize: 12 } }, this.state.editing
+            ? [R("i", { className: "fa fa-caret-up" }), " Close"]
+            : [R("i", { className: "fa fa-cog" }), " Customize..."]));
+    }
+    handleOpacityChange = (newValue) => {
+        return this.update({ opacity: newValue / 100 });
+    };
+    handleRemove = () => {
+        if (confirm("Delete layer?")) {
+            return this.props.onRemove();
+        }
+    };
+    renderOpacityControl() {
+        return R("div", { className: "mb-3", style: { paddingTop: 10 } }, R("label", { className: "text-muted" }, R("span", null, `Opacity: ${Math.round(this.props.layerView.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: this.props.layerView.opacity * 100,
+            onChange: this.handleOpacityChange
+        })));
+    }
+    renderDeleteLayer() {
+        return R("div", { style: { float: "right", marginLeft: 10 }, key: "delete" }, R("a", { className: "link-plain", onClick: this.handleRemove }, R("i", { className: "fa fa-remove" })));
+    }
+    render() {
+        const layer = LayerFactory_1.default.createLayer(this.props.layerView.type);
+        const style = {
+            cursor: "move",
+            marginRight: 8,
+            opacity: 0.5
+        };
+        // float: "right"
+        return this.props.connectDragPreview(this.props.connectDropTarget(R("div", null, R("div", { style: { fontSize: 16 }, key: "layerView" }, this.props.connectDragSource
+            ? this.props.connectDragSource(R("i", { className: "fa fa-bars", style }))
+            : undefined, this.props.allowEditingLayer ? this.renderDeleteLayer() : undefined, this.renderVisible(), "\u00A0", this.renderName()), this.props.allowEditingLayer ? this.renderLayerEditToggle() : undefined, this.state.editing ? this.renderEditor() : undefined)));
+    }
+}
+exports.default = MapLayerViewDesignerComponent;

package/lib/maps/MapLayersDesignerComponent.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { MapDesign, MapLayerView } from "./MapDesign";
+export interface MapLayersDesignerComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** See Map Design.md */
+    design: MapDesign;
+    /** Called with new design */
+    onDesignChange: (design: MapDesign) => void;
+    /** True to allow editing layers */
+    allowEditingLayers: boolean;
+    filters?: any;
+}
+export default class MapLayersDesignerComponent extends React.Component<MapLayersDesignerComponentProps> {
+    updateDesign(changes: any): void;
+    handleLayerViewChange: (index: any, layerView: MapLayerView) => void;
+    handleRemoveLayerView: (index: any) => void;
+    handleReorder: (layerList: any) => void;
+    renderLayerView: (layerView: any, index: any, connectDragSource: any, connectDragPreview: any, connectDropTarget: any) => React.DetailedReactHTMLElement<{
+        style: {
+            padding: string;
+            border: string;
+            marginBottom: number;
+            backgroundColor: string;
+        };
+    }, HTMLElement>;
+    render(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+}