@mwater/visualization 5.0.0

package/lib/maps/RasterMapViewComponent.d.ts

@@ -0,0 +1,108 @@
+import PropTypes from "prop-types";
+import React, { ReactNode } from "react";
+import LeafletMapComponent from "./LeafletMapComponent";
+import { Schema, DataSource } from "@mwater/expressions";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { MapDesign } from "./MapDesign";
+import { MapDataSource } from "./MapDataSource";
+import { MapScope } from "./MapUtils";
+export interface RasterMapViewComponentProps {
+    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;
+    /** Called with underlying leaflet map component */
+    leafletMapRef?: (map: LeafletMapComponent | null) => void;
+    /** Whether to disable interaction or not. Default false (implemented for printing to reduce number of tiles request) */
+    disableInteraction?: boolean;
+}
+/** Component that displays just the map, using raster tile technology */
+export default class RasterMapViewComponent extends React.Component<RasterMapViewComponentProps, {
+    popupContents: ReactNode;
+    legendHidden: boolean;
+}> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    leafletMap?: LeafletMapComponent | null;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    performAutoZoom(): void;
+    handleBoundsChange: (bounds: any) => void;
+    handleGridClick: (layerViewId: any, ev: any) => void;
+    getCompiledFilters(): JsonQLFilter[];
+    renderLegend(): React.CElement<{
+        onShow: () => void;
+    }, HiddenLegend> | React.FunctionComponentElement<{
+        schema: Schema;
+        dataSource: DataSource;
+        layerViews: import("./MapDesign").MapLayerView[];
+        zoom: number | null;
+        filters: JsonQLFilter[];
+        locale: string;
+        onHide: () => void;
+    }>;
+    renderPopup(): React.CElement<{
+        onClose: () => void;
+        showCloseX: boolean;
+        size: string;
+    }, React.Component<{
+        onClose: () => void;
+        showCloseX: boolean;
+        size: string;
+    }, any, any>> | null;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            width: number;
+            height: number;
+            position: "relative";
+        };
+    }, HTMLElement>;
+}
+declare class HiddenLegend extends React.Component<{
+    onShow: () => void;
+}> {
+    render(): React.DOMElement<{
+        style: {
+            zIndex: number;
+            backgroundColor: string;
+            position: string;
+            bottom: number;
+            right: number;
+            fontSize: number;
+            color: string;
+            cursor: string;
+            paddingTop: number;
+            paddingBottom: number;
+            paddingLeft: number;
+            paddingRight: number;
+            borderRadius: string;
+            border: string;
+            borderRight: string;
+        };
+        onClick: () => void;
+    }, Element>;
+}
+export {};

package/lib/maps/RasterMapViewComponent.js

@@ -0,0 +1,283 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const LeafletMapComponent_1 = __importDefault(require("./LeafletMapComponent"));
+const LayerFactory_1 = __importDefault(require("./LayerFactory"));
+const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
+const MapUtils = __importStar(require("./MapUtils"));
+const LayerSwitcherComponent_1 = require("./LayerSwitcherComponent");
+const LegendComponent_1 = __importDefault(require("./LegendComponent"));
+/** Component that displays just the map, using raster tile technology */
+class RasterMapViewComponent extends react_1.default.Component {
+    static contextTypes = { locale: prop_types_1.default.string };
+    leafletMap;
+    constructor(props) {
+        super(props);
+        const initialLegendDisplay = props.design.initialLegendDisplay || "open";
+        this.state = {
+            popupContents: null,
+            legendHidden: initialLegendDisplay === "closed" || (props.width < 500 && initialLegendDisplay === "closedIfSmall")
+        };
+    }
+    componentDidMount() {
+        // Autozoom
+        if (this.props.design.autoBounds) {
+            return this.performAutoZoom();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.design.autoBounds) {
+            // Autozoom if filters or autozoom changed
+            if (!lodash_1.default.isEqual(this.props.design.filters, prevProps.design.filters) ||
+                !lodash_1.default.isEqual(this.props.design.globalFilters, prevProps.design.globalFilters) ||
+                !lodash_1.default.isEqual(this.props.extraFilters, prevProps.extraFilters) ||
+                !prevProps.design.autoBounds) {
+                return this.performAutoZoom();
+            }
+        }
+        else {
+            // Update bounds
+            if (!lodash_1.default.isEqual(this.props.design.bounds, prevProps.design.bounds)) {
+                return this.leafletMap?.setBounds(this.props.design.bounds);
+            }
+        }
+    }
+    performAutoZoom() {
+        return this.props.mapDataSource.getBounds(this.props.design, this.getCompiledFilters(), (error, bounds) => {
+            if (bounds) {
+                this.leafletMap?.setBounds(bounds, 0.2);
+                // Also record if editable as part of bounds
+                if (this.props.onDesignChange != null) {
+                    return this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { bounds }));
+                }
+            }
+        });
+    }
+    handleBoundsChange = (bounds) => {
+        // Ignore if readonly
+        if (this.props.onDesignChange == null) {
+            return;
+        }
+        if (this.props.zoomLocked) {
+            return;
+        }
+        // Ignore if autoBounds
+        if (this.props.design.autoBounds) {
+            return;
+        }
+        const design = lodash_1.default.extend({}, this.props.design, { bounds });
+        return this.props.onDesignChange(design);
+    };
+    handleGridClick = (layerViewId, ev) => {
+        const layerView = lodash_1.default.findWhere(this.props.design.layerViews, { id: layerViewId });
+        // Create layer
+        const layer = LayerFactory_1.default.createLayer(layerView.type);
+        // Clean design (prevent ever displaying invalid/legacy designs)
+        const design = layer.cleanDesign(layerView.design, this.props.schema);
+        // Handle click of layer
+        const results = layer.onGridClick(ev, {
+            design,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            layerDataSource: this.props.mapDataSource.getLayerDataSource(layerViewId),
+            scopeData: this.props.scope?.data?.layerViewId === layerViewId ? this.props.scope.data.data : undefined,
+            filters: this.getCompiledFilters()
+        });
+        if (!results) {
+            return;
+        }
+        // Handle popup first
+        if (results.popup) {
+            this.setState({ popupContents: results.popup });
+        }
+        // Handle onRowClick case
+        if (results.row && this.props.onRowClick) {
+            this.props.onRowClick(results.row.tableId, results.row.primaryKey);
+        }
+        // Handle scoping
+        if (this.props.onScopeChange && lodash_1.default.has(results, "scope")) {
+            let scope;
+            if (results.scope) {
+                // Encode layer view id into scope
+                scope = {
+                    name: results.scope.name,
+                    filter: results.scope.filter,
+                    data: { layerViewId, data: results.scope.data }
+                };
+            }
+            else {
+                scope = null;
+            }
+            return this.props.onScopeChange(scope);
+        }
+    };
+    // Get filters from extraFilters combined with map filters
+    getCompiledFilters() {
+        return (this.props.extraFilters || []).concat(MapUtils.getCompiledFilters(this.props.design, this.props.schema, MapUtils.getFilterableTables(this.props.design, this.props.schema)));
+    }
+    renderLegend() {
+        if (this.state.legendHidden) {
+            return R(HiddenLegend, { onShow: () => this.setState({ legendHidden: false }) });
+        }
+        else {
+            return R(LegendComponent_1.default, {
+                schema: this.props.schema,
+                layerViews: this.props.design.layerViews,
+                filters: this.getCompiledFilters(),
+                dataSource: this.props.dataSource,
+                locale: this.context.locale,
+                onHide: () => this.setState({ legendHidden: true }),
+                zoom: null
+            });
+        }
+    }
+    renderPopup() {
+        if (!this.state.popupContents) {
+            return null;
+        }
+        return R(ModalPopupComponent_1.default, {
+            onClose: () => this.setState({ popupContents: null }),
+            showCloseX: true,
+            size: "x-large"
+        }, 
+        // Render in fixed height div so that dashboard doesn't collapse to nothing
+        R("div", { style: { height: "80vh" } }, this.state.popupContents), R("div", { style: { textAlign: "right", marginTop: 10 } }, R("button", { className: "btn btn-secondary", onClick: () => this.setState({ popupContents: null }) }, "Close")));
+    }
+    render() {
+        let design, scopedCompiledFilters;
+        const compiledFilters = this.getCompiledFilters();
+        // Determine scoped filters
+        if (this.props.scope) {
+            scopedCompiledFilters = compiledFilters.concat([this.props.scope.filter]);
+        }
+        else {
+            scopedCompiledFilters = compiledFilters;
+        }
+        // Convert to leaflet layers, if layers are valid
+        const leafletLayers = [];
+        for (let index = 0; index < this.props.design.layerViews.length; index++) {
+            // Create layer
+            const layerView = this.props.design.layerViews[index];
+            const layer = LayerFactory_1.default.createLayer(layerView.type);
+            // Clean design (prevent ever displaying invalid/legacy designs)
+            design = layer.cleanDesign(layerView.design, this.props.schema);
+            // Ignore if invalid
+            if (layer.validateDesign(design, this.props.schema)) {
+                continue;
+            }
+            // Get layer data source
+            const layerDataSource = this.props.mapDataSource.getLayerDataSource(layerView.id);
+            // If layer is scoping, fade opacity and add extra filtered version
+            const isScoping = this.props.scope && this.props.scope.data.layerViewId === layerView.id;
+            // Create leafletLayer
+            let leafletLayer = {
+                tileUrl: layerDataSource.getTileUrl(design, isScoping ? compiledFilters : scopedCompiledFilters),
+                utfGridUrl: this.props.disableInteraction
+                    ? undefined
+                    : layerDataSource.getUtfGridUrl(design, isScoping ? compiledFilters : scopedCompiledFilters) ?? undefined,
+                visible: layerView.visible,
+                opacity: isScoping ? layerView.opacity * 0.3 : layerView.opacity,
+                minZoom: layer.getMinZoom(design) ?? undefined,
+                maxZoom: layer.getMaxZoom(design) ?? undefined,
+                onGridClick: this.handleGridClick.bind(null, layerView.id)
+            };
+            leafletLayers.push(leafletLayer);
+            // Add scoped layer if scoping
+            if (isScoping) {
+                leafletLayer = {
+                    tileUrl: layerDataSource.getTileUrl(design, scopedCompiledFilters),
+                    utfGridUrl: this.props.disableInteraction
+                        ? undefined
+                        : layerDataSource.getUtfGridUrl(design, scopedCompiledFilters) ?? undefined,
+                    visible: layerView.visible,
+                    opacity: layerView.opacity,
+                    minZoom: layer.getMinZoom(design) ?? undefined,
+                    maxZoom: layer.getMaxZoom(design) ?? undefined,
+                    onGridClick: this.handleGridClick.bind(null, layerView.id)
+                };
+                leafletLayers.push(leafletLayer);
+            }
+        }
+        return R("div", { style: { width: this.props.width, height: this.props.height, position: "relative" } }, this.renderPopup(), R("div", { style: { position: "absolute", maxWidth: 250, top: 10, right: 10, zIndex: 999, userSelect: "none" } }, R("div", { style: { display: "flex", gap: 6, position: "relative", flexDirection: "column", alignItems: "right" } }, this.props.onDesignChange && this.props.design.showLayerSwitcher
+            ? R(LayerSwitcherComponent_1.LayerSwitcherComponent, {
+                design: this.props.design,
+                onDesignChange: this.props.onDesignChange
+            })
+            : undefined)), R(LeafletMapComponent_1.default, {
+            ref: (c) => {
+                this.leafletMap = c;
+                if (this.props.leafletMapRef) {
+                    this.props.leafletMapRef(c);
+                }
+            },
+            initialBounds: this.props.design.bounds,
+            baseLayerId: this.props.design.baseLayer,
+            baseLayerOpacity: this.props.design.baseLayerOpacity ?? undefined,
+            layers: leafletLayers,
+            width: this.props.width,
+            height: this.props.height,
+            legend: this.renderLegend(),
+            dragging: this.props.dragging,
+            touchZoom: this.props.touchZoom,
+            scrollWheelZoom: this.props.scrollWheelZoom,
+            onBoundsChange: this.handleBoundsChange,
+            extraAttribution: this.props.design.attribution,
+            loadingSpinner: true,
+            maxZoom: this.props.design.maxZoom ?? undefined,
+            showZoomControlOnHover: true
+        }));
+    }
+}
+exports.default = RasterMapViewComponent;
+// Legend display tab at bottom right
+class HiddenLegend extends react_1.default.Component {
+    render() {
+        const style = {
+            zIndex: 1000,
+            backgroundColor: "white",
+            position: "absolute",
+            bottom: 34,
+            right: 0,
+            fontSize: 14,
+            color: "#337ab7",
+            cursor: "pointer",
+            paddingTop: 4,
+            paddingBottom: 3,
+            paddingLeft: 3,
+            paddingRight: 3,
+            borderRadius: "4px 0px 0px 4px",
+            border: "solid 1px #AAA",
+            borderRight: "none"
+        };
+        return R("div", { style, onClick: this.props.onShow }, R("i", { className: "fa fa-angle-double-left" }));
+    }
+}

package/lib/maps/RegionSelectComponent.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface RegionSelectComponentProps {
+    schema: Schema;
+    dataSource: DataSource;
+    /** _id of region */
+    region: string | number | null | undefined;
+    onChange: (region: number | null, level: number | null) => void;
+    /** Default "All Countries" */
+    placeholder?: string;
+    /** e.g. "admin_regions" */
+    regionsTable?: string;
+    /** Maximum region level allowed */
+    maxLevel?: number;
+}
+export default class RegionSelectComponent extends React.Component<RegionSelectComponentProps> {
+    static defaultProps: {
+        placeholder: string;
+        regionsTable: string;
+    };
+    handleChange: (id: any) => void;
+    render(): React.CElement<{
+        value: string | number | null | undefined;
+        onChange: (id: any) => void;
+        idTable: string;
+        schema: Schema;
+        dataSource: DataSource;
+        placeholder: string | undefined;
+        orderBy: {
+            expr: {
+                type: string;
+                tableAlias: string;
+                column: string;
+            };
+            direction: string;
+        }[];
+        filter: import("@mwater/jsonql").JsonQLOp | undefined;
+    }, React.Component<{
+        value: string | number | null | undefined;
+        onChange: (id: any) => void;
+        idTable: string;
+        schema: Schema;
+        dataSource: DataSource;
+        placeholder: string | undefined;
+        orderBy: {
+            expr: {
+                type: string;
+                tableAlias: string;
+                column: string;
+            };
+            direction: string;
+        }[];
+        filter: import("@mwater/jsonql").JsonQLOp | undefined;
+    }, any, any>>;
+}

package/lib/maps/RegionSelectComponent.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const expressions_ui_1 = require("@mwater/expressions-ui");
+// Allows selecting of a single region
+class RegionSelectComponent extends react_1.default.Component {
+    static defaultProps = {
+        placeholder: "All Countries",
+        regionsTable: "admin_regions"
+    };
+    handleChange = (id) => {
+        if (!id) {
+            this.props.onChange(null, null);
+            return;
+        }
+        // Look up level
+        const query = {
+            type: "query",
+            selects: [{ type: "select", expr: { type: "field", tableAlias: "main", column: "level" }, alias: "level" }],
+            from: { type: "table", table: this.props.regionsTable, alias: "main" },
+            where: {
+                type: "op",
+                op: "=",
+                exprs: [{ type: "field", tableAlias: "main", column: "_id" }, id]
+            }
+        };
+        // Execute query
+        return this.props.dataSource.performQuery(query, (err, rows) => {
+            if (err) {
+                console.log("Error getting regions: " + err?.message);
+                return;
+            }
+            return this.props.onChange(id, rows[0].level);
+        });
+    };
+    render() {
+        let filter = undefined;
+        if (this.props.maxLevel != null) {
+            filter = {
+                type: "op",
+                op: "<=",
+                exprs: [{ type: "field", tableAlias: "main", column: "level" }, this.props.maxLevel]
+            };
+        }
+        return R(expressions_ui_1.IdLiteralComponent, {
+            value: this.props.region,
+            onChange: this.handleChange,
+            idTable: this.props.regionsTable,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            placeholder: this.props.placeholder,
+            orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }],
+            filter
+        });
+    }
+}
+exports.default = RegionSelectComponent;

package/lib/maps/ScopeAndDetailLevelComponent.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface ScopeAndDetailLevelComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** admin region that is outside bounds. null for whole world */
+    scope?: string;
+    /** level of scope region. null for whole world */
+    scopeLevel?: number | null;
+    /** Detail level within scope region */
+    detailLevel?: number;
+    /** Called with (scope, scopeLevel, detailLevel) */
+    onScopeAndDetailLevelChange: any;
+    regionsTable: string;
+}
+export default class ScopeAndDetailLevelComponent extends React.Component<ScopeAndDetailLevelComponentProps> {
+    handleScopeChange: (scope: any, scopeLevel: any) => any;
+    handleDetailLevelChange: (detailLevel: any) => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/maps/ScopeAndDetailLevelComponent.js

@@ -0,0 +1,76 @@
+"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 react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const expressions_1 = require("@mwater/expressions");
+const RegionSelectComponent_1 = __importDefault(require("./RegionSelectComponent"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+// Generic scope and detail level setter for AdminChoropleth layers
+class ScopeAndDetailLevelComponent extends react_1.default.Component {
+    handleScopeChange = (scope, scopeLevel) => {
+        if (scope) {
+            return this.props.onScopeAndDetailLevelChange(scope, scopeLevel, scopeLevel + 1);
+        }
+        else {
+            return this.props.onScopeAndDetailLevelChange(null, null, 0);
+        }
+    };
+    handleDetailLevelChange = (detailLevel) => {
+        return this.props.onScopeAndDetailLevelChange(this.props.scope, this.props.scopeLevel, detailLevel);
+    };
+    render() {
+        // Determine number of levels by looking for levelN field
+        let maxLevel = 0;
+        const detailLevelOptions = [];
+        for (let level = 0; level <= 9; level++) {
+            const levelColumn = this.props.schema.getColumn(this.props.regionsTable, `level${level}`);
+            if (levelColumn) {
+                maxLevel = level;
+                // Can't select same detail level as scope
+                if (level > (this.props.scopeLevel != null ? this.props.scopeLevel : -1)) {
+                    detailLevelOptions.push({ value: level, label: expressions_1.ExprUtils.localizeString(levelColumn.name) });
+                }
+            }
+        }
+        return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Region to Map"), R(RegionSelectComponent_1.default, {
+            region: this.props.scope,
+            onChange: this.handleScopeChange,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            regionsTable: this.props.regionsTable,
+            maxLevel: maxLevel - 1,
+            placeholder: "All Regions"
+        })), R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Detail Level"), R(ui.Select, {
+            value: this.props.detailLevel,
+            options: detailLevelOptions,
+            onChange: this.handleDetailLevelChange
+        })));
+    }
+}
+exports.default = ScopeAndDetailLevelComponent;