to a ) this felt OK in this
-// particular occasion.
-const Root = styled("div")(() => ({
- margin: -10, // special case, we need to "unset" the padding for Window content that's set in Window.js
-}));
+import LayerPackage from "./components/LayerPackage";
+import QuickAccessView from "./components/QuickAccessView.js";
+import LayerItemDetails from "./components/LayerItemDetails.js";
+import LayerListFilter from "./components/LayerListFilter.js";
+import { debounce } from "utils/debounce";
const StyledAppBar = styled(AppBar)(() => ({
top: -10,
}));
-const ContentWrapper = styled("div")(() => ({
- padding: 10,
-}));
+/**
+ * BreadCrumbs are a feature used to "link" content between LayerSwitcher
+ * and Informative plugins. They get rendered directly to #map, as they
+ * are not part of LayerSwitcher plugin, at least not visually. To achieve
+ * that we use createPortal().
+ *
+ * @returns
+ * @memberof LayersSwitcherView
+ */
+const BreadCrumbsContainer = ({ map, app }) => {
+ return createPortal(
+ // We must wrap the component in a div, on which we can catch
+ // events. This is done to prevent event bubbling to the
+ // layerSwitcher component.
+
);
}
}
diff --git a/apps/client/src/plugins/LayerSwitcher/components/BackgroundLayer.js b/apps/client/src/plugins/LayerSwitcher/components/BackgroundLayer.js
new file mode 100644
index 000000000..c537b35ec
--- /dev/null
+++ b/apps/client/src/plugins/LayerSwitcher/components/BackgroundLayer.js
@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+
+import LayerItem from "./LayerItem";
+
+import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined";
+import WallpaperIcon from "@mui/icons-material/Wallpaper";
+import RadioButtonChecked from "@mui/icons-material/RadioButtonChecked";
+import RadioButtonUnchecked from "@mui/icons-material/RadioButtonUnchecked";
+
+export default function BackgroundLayer({ layer, app, toggleable, draggable }) {
+ // Keep visible backgroundlayer in state
+ const [backgroundVisible, setBackgroundVisible] = useState(
+ layer.get("visible")
+ );
+
+ // When component is successfully mounted into the DOM.
+ useEffect(() => {
+ app.globalObserver.subscribe(
+ "layerswitcher.backgroundLayerChanged",
+ (activeLayer) => {
+ if (activeLayer !== layer.get("name")) {
+ if (!layer.isFakeMapLayer) {
+ layer.setVisible(false);
+ }
+ setBackgroundVisible(false);
+ } else {
+ setBackgroundVisible(true);
+ }
+ }
+ );
+ }, [layer, app.globalObserver]);
+
+ // Handles list item click
+ const handleLayerItemClick = () => {
+ const name = layer.get("name");
+ document.getElementById("map").style.backgroundColor = "#FFF"; // sets the default background color to white
+ if (layer.isFakeMapLayer) {
+ switch (name) {
+ case "-2":
+ document.getElementById("map").style.backgroundColor = "#000";
+ break;
+ case "-1":
+ default:
+ document.getElementById("map").style.backgroundColor = "#FFF";
+ break;
+ }
+ } else {
+ layer.setVisible(true);
+ }
+ // Publish event to ensure all other background layers are disabled
+ app.globalObserver.publish("layerswitcher.backgroundLayerChanged", name);
+ };
+
+ // Render method for backgroundlayer icon
+ const getLayerToggleIcon = () => {
+ if (toggleable) {
+ return !backgroundVisible ? (
+ e.stopPropagation()}>
+
,
+ document.getElementById("breadcrumbs-container")
+ );
+};
class LayersSwitcherView extends React.PureComponent {
static propTypes = {
app: propTypes.object.isRequired,
map: propTypes.object.isRequired,
- model: propTypes.object.isRequired,
- observer: propTypes.object.isRequired,
+ localObserver: propTypes.object.isRequired,
+ globalObserver: propTypes.object.isRequired,
options: propTypes.object.isRequired,
};
- // Static members to determine which Tabs should be rendered.
- #renderRegularLayersView;
- #renderBackgroundLayersView;
- #renderActiveLayersView;
-
constructor(props) {
super(props);
this.options = props.options;
-
- // Let's prepare some constants that will be used to determine which
- // tabs should be rendered.
-
- // Regular layers are straightforward.
- this.#renderRegularLayersView = this.options.groups.length > 0;
-
- // The Backgrounds tab should be visible if there are baselayers in
- // config or if any of the special layers is enabled.
- this.#renderBackgroundLayersView =
- this.options.baselayers.length > 0 ||
- this.options.enableOSM === true ||
- this.options.backgroundSwitcherBlack ||
- this.options.backgroundSwitcherWhite;
-
- // The Active layers tab is straightforward too.
- this.#renderActiveLayersView = this.options.showActiveLayersView ?? false;
-
+ this.layerMap = props.map
+ .getLayers()
+ .getArray()
+ .reduce((a, b) => {
+ a[b.get("name")] = b;
+ return a;
+ }, {});
+ this.layerTree = this.addLayerNames(this.options.groups);
+ // Create a ref to store a reference to the search layer input element
this.state = {
chapters: [],
- baseLayers: props.model.getBaseLayers(),
- activeTab: this.#renderRegularLayersView // Let's calculate which
- ? "regularLayers" // view should be visible on start, given
- : this.#renderBackgroundLayersView // that we must find out which
- ? "backgroundLayers" // tabs are available.
- : false,
+ baseLayers: props.map
+ .getLayers()
+ .getArray()
+ .filter((l) => l.get("layerType") === "base")
+ .map((l) => l.getProperties()),
+ activeTab: 0,
+ displayContentOverlay: null, // 'layerPackage' | 'favorites' | 'layerItemDetails'
+ layerItemDetails: null,
+ filterValue: "",
+ treeData: this.layerTree,
+ scrollPositions: {
+ tab0: 0,
+ tab1: 0,
+ tab2: 0,
+ },
};
+ this.localObserver = this.props.localObserver;
+ this.globalObserver = this.props.globalObserver;
+
props.app.globalObserver.subscribe("informativeLoaded", (chapters) => {
if (Array.isArray(chapters)) {
this.setState({
@@ -78,20 +90,314 @@ class LayersSwitcherView extends React.PureComponent {
});
}
});
+
+ props.app.globalObserver.subscribe("setLayerDetails", (details) => {
+ if (details) {
+ // Set scroll position state when layer details is opened
+ const currentScrollPosition = this.getScrollPosition();
+ this.setState((prevState) => ({
+ layerItemDetails: details,
+ displayContentOverlay: "layerItemDetails",
+ scrollPositions: {
+ ...prevState.scrollPositions,
+ [`tab${prevState.activeTab}`]: currentScrollPosition,
+ },
+ }));
+ } else {
+ this.setState({
+ displayContentOverlay: null,
+ });
+ }
+ });
+
+ // this.globalHideLayerSubscription = props.app.globalObserver.subscribe(
+ // "layerswitcher.hideLayer",
+ // (la) => console.log("LSV: globalHideLayer", la.get("caption"))
+ // );
+
+ // this.globalShowLayerSubscription = props.app.globalObserver.subscribe(
+ // "layerswitcher.showLayer",
+ // (la) => console.log("LSV: globalShowLayer", la.get("caption"))
+ // );
+ // TODO This is a work around for showing/hideing group layers which are
+ // collapsed. It's also the GroupLayer component that listens for this.
+ // That should be refactored.
+ // TODO Unsubscribe
+ this.localHideLayerSubscription = this.localObserver.subscribe(
+ "hideLayer",
+ (la) => {
+ // TODO Make sure QuickAccess updates
+ // Send some event
+ la.setVisible(false);
+ // this.setState({ treeData: [...this.layerTree] });
+ }
+ );
+ this.localShowLayerSubscription = this.localObserver.subscribe(
+ "showLayer",
+ (la) => {
+ la.setVisible(true);
+ // TODO Make sure QuickAccess updates
+ // Send some event
+ // this.setState({ treeData: [...this.layerTree] });
+ }
+ );
}
+ // Prepare tree data for filtering
+ addLayerNames = (data) => {
+ data.forEach((item) => {
+ item.isFiltered = true;
+ item.isExpanded = false;
+ item.changeIndicator = new Date();
+ if (item.layers) {
+ item.layers.forEach((layer) => {
+ const mapLayer = this.layerMap[layer.id];
+ if (!mapLayer) {
+ console.warn(`Maplayer with id ${layer.id} not found`);
+ return;
+ }
+ layer.name = mapLayer.get("caption");
+ layer.isFiltered = true;
+ item.changeIndicator = new Date();
+ // Check if layer is a group
+ if (mapLayer.get("layerType") === "group") {
+ layer.subLayers = [];
+ const subLayers = mapLayer.get("subLayers");
+ subLayers.forEach((subLayer) => {
+ const subLayerMapLayer = mapLayer.layersInfo[subLayer].caption;
+ layer.subLayers.push({
+ id: subLayer,
+ name: subLayerMapLayer,
+ isFiltered: true,
+ changeIndicator: new Date(),
+ });
+ });
+ }
+ });
+ }
+
+ if (item.groups) {
+ // Call recursevly for subgroups
+ this.addLayerNames(item.groups);
+ }
+ });
+ return data;
+ };
+
+ // Handles click on Layerpackage button and backbutton
+ handleLayerPackageToggle = (layerPackageState) => {
+ layerPackageState?.event?.stopPropagation();
+ // Set scroll position state when layer package is opened
+ const currentScrollPosition = this.getScrollPosition();
+ this.setState((prevState) => ({
+ displayContentOverlay:
+ this.state.displayContentOverlay === "layerPackage"
+ ? null
+ : "layerPackage",
+ scrollPositions: {
+ ...prevState.scrollPositions,
+ [`tab${prevState.activeTab}`]: currentScrollPosition,
+ },
+ }));
+ };
+
+ // Filter tree data
+ filterTree = (node, filterText, parentMatch = false) => {
+ let foundInChild = false;
+
+ // Determine if the current node matches the filter
+ const selfMatch =
+ filterText === "" ||
+ node.name.toLocaleLowerCase().includes(filterText.toLocaleLowerCase());
+
+ // If the current node matches the filter criteria or if there is a parent match, mark it as filtered
+ if (parentMatch || selfMatch) {
+ this.updateNode(node, true, true); // Update node to be visible
+ foundInChild = true;
+ }
+
+ // Process child layers
+ if (node.layers) {
+ node.layers.forEach((layer) => {
+ // Pass true if either parent matches, or this node itself matches
+ foundInChild =
+ this.filterTree(layer, filterText, parentMatch || selfMatch) ||
+ foundInChild;
+ });
+ }
+
+ // Process child groups
+ if (node.groups) {
+ node.groups.forEach((group) => {
+ // Pass true if either parent matches, or this node itself matches
+ foundInChild =
+ this.filterTree(group, filterText, parentMatch || selfMatch) ||
+ foundInChild;
+ });
+ }
+
+ // Update the current node based on child findings or its own match status
+ this.updateNode(node, foundInChild || selfMatch, false);
+
+ // If a parentMatch exists or the current node itself is a match, check the expandFilteredResults setting to determine if the node should be expanded
+ if (foundInChild || selfMatch) {
+ if (this.options.expandFilteredResults) {
+ node.isExpanded = true; // Expand the node if expandFilteredResults is true
+ }
+ }
+
+ return foundInChild || selfMatch;
+ };
+
+ updateNode = (node, isFiltered, compare) => {
+ if (!compare) {
+ // Indicate that node has changed
+ node.changeIndicator = new Date();
+ } else if (node.isFiltered !== isFiltered) {
+ // Indicate that node has changed
+ node.changeIndicator = new Date();
+ }
+ node.isFiltered = isFiltered;
+ };
+
+ setChildrenFiltered = (node, value) => {
+ if (node.layers) {
+ node.layers.forEach((layer) => {
+ this.updateNode(layer, value, true);
+ this.setChildrenFiltered(layer, value);
+ });
+ }
+
+ if (node.groups) {
+ node.groups.forEach((group) => {
+ this.updateNode(group, value, true);
+ this.setChildrenFiltered(group, value);
+ });
+ }
+
+ if (node.subLayers) {
+ node.subLayers.forEach((subLayer) => {
+ this.updateNode(subLayer, value, true);
+ subLayer.isFiltered = value;
+ });
+ }
+ };
+
+ // Handles click on Favorites button and backbutton
+ handleFavoritesViewToggle = (layerPackageState) => {
+ layerPackageState?.event?.stopPropagation();
+ // Set scroll position state when favorites view is opened
+ const currentScrollPosition = this.getScrollPosition();
+ this.setState((prevState) => ({
+ displayContentOverlay:
+ this.state.displayContentOverlay === "favorites" ? null : "favorites",
+ scrollPositions: {
+ ...prevState.scrollPositions,
+ [`tab${prevState.activeTab}`]: currentScrollPosition,
+ },
+ }));
+ };
+
+ collapseAllGroups = () => {
+ const collapseGroups = (groups) => {
+ groups.forEach((group) => {
+ group.isExpanded = false;
+ if (group.groups && group.groups.length > 0) {
+ collapseGroups(group.groups);
+ }
+ });
+ };
+
+ collapseGroups(this.layerTree);
+ };
+
+ // Call this method for each root node in the tree when the filter is cleared
+ resetFilterStatus = (node) => {
+ node.isFiltered = true; // Mark node as filtered
+ node.isExpanded = false; // Collapse all groups by default
+ node.changeIndicator = new Date(); // Update change indicator
+
+ // Recursively reset status for layers, groups, and subLayers
+ if (node.layers) {
+ node.layers.forEach((layer) => this.resetFilterStatus(layer));
+ }
+ if (node.groups) {
+ node.groups.forEach((group) => this.resetFilterStatus(group));
+ }
+ if (node.subLayers) {
+ node.subLayers.forEach((subLayer) => this.resetFilterStatus(subLayer));
+ }
+ };
+
+ // Handles filter functionality
+ handleFilterValueChange = debounce((value) => {
+ const filterCleared = value === "" && this.state.filterValue !== "";
+ this.setState({ filterValue: value });
+
+ if (filterCleared) {
+ // Reset filter status when filter is cleared
+ this.layerTree.forEach((node) => this.resetFilterStatus(node));
+ } else {
+ // Apply filter and propagate matches
+ this.layerTree.forEach((node) => this.filterTree(node, value));
+ }
+
+ // Trigger re-render
+ this.setState({ treeData: [...this.layerTree] });
+ }, 100);
+
/**
- * LayerSwitcher consists of one to three Tabs:
- * - one shows regular layers (as checkboxes, multi select)
- * - one show the background layers (as radio buttons, one-at-at-time)
- * - there's also an option to show a tab with active layers only.
+ * LayerSwitcher consists of two Tabs: one shows
+ * "regular" layers (as checkboxes, multi select), and the
+ * other shows background layers (as radio buttons, one-at-at-time).
*
- * This method handles switching to the selected tab's content.
+ * This method controls which of the two Tabs is visible and hides LayerPackage view.
*
* @memberof LayersSwitcherView
*/
handleChangeTabs = (event, activeTab) => {
- this.setState({ activeTab });
+ // Set scroll position state when tab is changed
+ const currentScrollPosition = this.getScrollPosition();
+ this.setState((prevState) => ({
+ activeTab,
+ displayContentOverlay: null,
+ scrollPositions: {
+ ...prevState.scrollPositions,
+ [`tab${prevState.activeTab}`]: currentScrollPosition,
+ },
+ }));
+ };
+
+ /**
+ * This method resets scrollposition when component updates,
+ * but only when tab is changed or content overlay is opened.
+ *
+ * @memberof LayersSwitcherView
+ */
+ componentDidUpdate(prevProps, prevState) {
+ if (
+ prevState.activeTab !== this.state.activeTab ||
+ prevState.displayContentOverlay !== this.state.displayContentOverlay
+ ) {
+ // Reset scroll position when tab is changed, or when content overlay is opened
+ const { scrollPositions } = this.state;
+ const currentScrollPosition =
+ scrollPositions[`tab${this.state.activeTab}`];
+ if (currentScrollPosition !== undefined) {
+ const scrollContainer = document.getElementById("scroll-container");
+ scrollContainer.scrollTop = currentScrollPosition;
+ }
+ }
+ }
+
+ /**
+ * This method gets scrollposition of container
+ *
+ * @memberof LayersSwitcherView
+ */
+ getScrollPosition = () => {
+ const scrollContainer = document.getElementById("scroll-container"); // Byt ut mot din scroll-container ID
+ return scrollContainer.scrollTop;
};
/**
@@ -111,68 +417,14 @@ class LayersSwitcherView extends React.PureComponent {
}, 1);
};
- /**
- * @summary Loops through map configuration and
- * renders all groups. Visible only if @param shouldRender is true.
- *
- * @param {boolean} [shouldRender=true]
- * @returns {}
- */
- renderLayerGroups = (shouldRender = true) => {
+ render() {
+ const { windowVisible } = this.props;
return (
- {this.#renderRegularLayersView && (
-
-
- {this.#renderRegularLayersView &&
- this.renderLayerGroups(this.state.activeTab === "regularLayers")}
- {this.#renderBackgroundLayersView && (
-
+
+ {this.props.options.showFilter && (
+
+ this.handleFilterValueChange(value)
+ }
+ />
+ )}
+
+ this.handleLayerPackageToggle({ event: e })
+ }
+ favoritesViewDisplay={
+ this.state.displayContentOverlay === "favorites"
+ }
+ handleFavoritesViewToggle={this.handleFavoritesViewToggle}
+ favoritesInfoText={this.options.userQuickAccessFavoritesInfoText}
+ treeData={this.state.treeData}
+ filterValue={this.state.filterValue}
/>
+ {this.state.treeData.map((group, i) => (
+
+ {this.props.options.enableQuickAccessTopics && (
+
- {this.renderBreadCrumbs()}
-
+
+
- {this.options.groups.map((group, i) => {
- return (
-
- );
- };
-
- /**
- * BreadCrumbs are a feature used to "link" content between LayerSwitcher
- * and Informative plugins. They get rendered directly to #map, as they
- * are not part of LayerSwitcher plugin, at least not visually. To achieve
- * that we use createPortal().
- *
- * @returns
- * @memberof LayersSwitcherView
- */
- renderBreadCrumbs = () => {
- return (
- this.options.showBreadcrumbs &&
- createPortal(
- // We must wrap the component in a div, on which we can catch
- // events. This is done to prevent event bubbling to the
- // layerSwitcher component.
- e.stopPropagation()}>
-
,
- document.getElementById("breadcrumbs-container")
- )
- );
- };
-
- render() {
- const { windowVisible } = this.props;
- return (
- -
- {sortedLayers.map((l) => (
-
+
-
+
-
+ {!favorites.length ? (
+
{this.getCheckbox()}
-
+ {this.props.group.layers.map((layer, i) => {
+ const mapLayer = this.props.layerMap[layer.id];
+ // If mapLayer doesn't exist, the layer shouldn't be displayed
+ if (!mapLayer) {
+ return null;
+ }
+
+ // Check if it's a group or a regular layer
+ const isGroup = mapLayer.get("layerType") === "group";
+ const Component = isGroup ? GroupLayer : LayerItem;
+
+ // Render the component with the appropriate attributes
+ return (
+
+ );
+ }
+
+ static getDerivedStateFromProps(nextProps, prevState) {
+ // Check if the isExpanded property has changed
+ if (nextProps.group.isExpanded !== prevState.isExpanded) {
+ return {
+ expanded: nextProps.group.isExpanded,
+ isExpanded: nextProps.group.isExpanded, // Keep a copy of isExpanded in state for comparison
+ };
+ }
+ return null;
}
render() {
const { expanded } = this.state;
return (
- // If the layerItem is a child, it should be rendered a tad to the
- // right. Apparently 21px.
-
- {this.state.layers.map((layer, i) => {
- const mapLayer = this.model.layerMap[layer.id];
- if (mapLayer) {
- return (
- {
- const informativeWindow = this.props.app.windows.find(
- (window) => window.type === "informative"
- );
- informativeWindow.props.custom.open(chapter);
- }}
- />
- );
- } else {
- return null;
- }
- })}
- {this.renderLayerGroups()}
-
-
+ setState({ expanded: !state.expanded })}
+ sx={{
+ p: 0,
+ }}
+ dense
+ >
+
+
+
+ `${theme.spacing(0.2)} solid ${theme.palette.divider}`,
+ }}
+ >
+ {toggleable && toggleDetails}
+ {layerGroupTitle}
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/apps/client/src/plugins/LayerSwitcher/components/LayerGroupItem.js b/apps/client/src/plugins/LayerSwitcher/components/LayerGroupItem.js
deleted file mode 100644
index d4de2584e..000000000
--- a/apps/client/src/plugins/LayerSwitcher/components/LayerGroupItem.js
+++ /dev/null
@@ -1,1027 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { Button, Typography, Grid, Box } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { withSnackbar } from "notistack";
-import IconWarning from "@mui/icons-material/Warning";
-import CallMadeIcon from "@mui/icons-material/CallMade";
-import InfoIcon from "@mui/icons-material/Info";
-import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
-import CheckBoxIcon from "@mui/icons-material/CheckBox";
-import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import CloseIcon from "@mui/icons-material/Close";
-import LayerSettings from "./LayerSettings.js";
-import DownloadLink from "./DownloadLink";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import HajkToolTip from "components/HajkToolTip";
-
-const ExpandButtonWrapper = styled("div")(() => ({
- display: "flex",
- float: "left",
- cursor: "pointer",
-}));
-
-const LayerInfo = styled("div")(({ theme }) => ({
- width: "100%",
- borderBottom: `${theme.spacing(0.2)} solid ${theme.palette.divider}`,
-}));
-
-const LayerSummaryContainer = styled((props) => (
-
- {this.renderInfo()}
- {this.renderMetadataLink()}
- {this.renderOpenDataLink()}
- {this.renderOwner()}
-
- );
- } else {
- return null;
- }
- }
-
- toggleSettings() {
- this.setState({
- toggleSettings: !this.state.toggleSettings,
- });
- }
-
- toggleSubLayerSettings(index) {
- var selected = this.state.toggleSubLayerSettings;
- selected[index] = !selected[index];
- this.setState({ toggleSubLayerSettings: selected });
- }
-
- renderInfoToggler = () => {
- return (
- !this.isInfoEmpty() && (
- {this.renderChapterLinks(this.props.chapters || [])}
- : null} -
-
- {this.renderSubLayers()}
-
- {this.renderInfo()}
- {this.renderMetadataLink()}
- {this.renderOpenDataLink()}
- {this.renderOwner()}
-
- );
+ if (legendIsActive) {
+ return `${theme.spacing(0.2)} solid transparent`;
}
- }
-
- toggleSettings = () => {
- this.setState({
- toggleSettings: !this.state.toggleSettings,
- });
- };
-
- toggleInfo = () => {
- this.setState({
- infoVisible: !this.state.infoVisible,
- });
+ return `${theme.spacing(0.2)} solid ${theme.palette.divider}`;
};
- renderLegendIcon() {
- return {this.renderChapterLinks(this.props.chapters || [])}
-
- {this.renderDetails()}
- {this.state.toggleSettings &&
- this.state.infoVisible &&
- !this.isInfoEmpty() ? (
-
- ) : null} - {layer.isFakeMapLayer ? null : ( -
- - ) : null} - {layer.isFakeMapLayer ? null : ( -
-
+ {chaptersWithLayer.map((chapter, i) => {
+ return (
+
-
+ {!filter.list.length ? (
+
-
- {this.props.options?.enableTransparencySlider !== false &&
- this.props.showOpacity
- ? this.renderOpacitySlider()
- : null}
- {this.props.showLegend ? this.renderLegendImage() : null}
- {this.props.layer.getProperties().filterable ? (
-
-
- );
- }
-
- renderLegendImage() {
- const index = this.props.index ? this.props.index : 0;
- const src = this.state.legend?.[index]?.url ?? "";
-
- return src ? (
-
- 
-
- ) : null;
- }
-
- render() {
- return (
-
-
- );
- }
-}
-
-export default LayerSettings;
diff --git a/apps/client/src/plugins/LayerSwitcher/components/LegendIcon.js b/apps/client/src/plugins/LayerSwitcher/components/LegendIcon.js
new file mode 100644
index 000000000..5817e1dcd
--- /dev/null
+++ b/apps/client/src/plugins/LayerSwitcher/components/LegendIcon.js
@@ -0,0 +1,9 @@
+export default function LegendIcon({ url }) {
+ return (
+ {this.props.toggled ? this.renderSettings() : null}
-
+
+
+
+ (toggleable ? toggleSubLayer(subLayer, visible) : null)}
+ sx={{
+ pl: 0,
+ borderBottom: (theme) =>
+ toggleable
+ ? `${theme.spacing(0.2)} solid ${theme.palette.divider}`
+ : "none",
+ }}
+ dense
+ >
+ {toggleable && (
+
+ {getLayerToggleIcon()}
+
+ )}
+ {getIconFromLayer()}
+
+ showLayerDetails(e)}>
+ theme.palette.grey[500],
+ }}
+ >
+
+
+
+ {layer.layersInfo[subLayer].legendIcon ? null : (
+
+ );
+}
diff --git a/apps/client/src/plugins/LayerSwitcher/components/VectorFilter.js b/apps/client/src/plugins/LayerSwitcher/components/VectorFilter.js
index 32fd9f3ff..9845e97ce 100644
--- a/apps/client/src/plugins/LayerSwitcher/components/VectorFilter.js
+++ b/apps/client/src/plugins/LayerSwitcher/components/VectorFilter.js
@@ -1,43 +1,31 @@
-import React from "react";
-import { styled } from "@mui/material/styles";
-import Select from "@mui/material/Select";
-import MenuItem from "@mui/material/MenuItem";
-import InputLabel from "@mui/material/InputLabel";
-import FormControl from "@mui/material/FormControl";
-import Input from "@mui/material/Input";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
-import { Vector as VectorLayer } from "ol/layer";
-import { hfetch } from "../../../utils/FetchWrapper";
-
-const StyledFormControl = styled(FormControl)(({ theme }) => ({
- margin: theme.spacing(1),
- minWidth: 120,
-}));
-
-const StyledTypography = styled(Typography)(({ theme }) => ({
- fontWeight: 500,
-}));
-
-class VectorFilter extends React.PureComponent {
- constructor(props) {
- super(props);
- this.state = {
- filterAttribute: props.layer.get("filterAttribute") || "",
- filterValue: props.layer.get("filterValue") || "",
- filterComparer: props.layer.get("filterComparer") || "",
- layerProperties: [],
- };
- this.loadFeatureInfo();
- }
+import React, { useState, useEffect, useCallback } from "react";
+
+import {
+ Button,
+ Chip,
+ Input,
+ MenuItem,
+ Select,
+ Typography,
+ Stack,
+} from "@mui/material";
+
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+
+import { hfetch } from "utils/FetchWrapper";
+
+function VectorFilter({ layer }) {
+ const [filterAttribute, setFilterAttribute] = useState("");
+ const [filterValue, setFilterValue] = useState("");
+ const [filterComparer, setFilterComparer] = useState("");
+ const [currentFilter, setCurrentFilter] = useState("");
+ const [layerProperties, setLayerProperties] = useState([]);
/**
- * @summary Prepare entries for dropdown, will contain possible values for filterAttribute.
- *
- * @memberof VectorFilter
+ * Prepare entries for dropdown, will contain possible values for filterAttribute.
*/
- loadFeatureInfo = () => {
- const { url, featureType } = this.props.layer.getProperties();
+ const loadFeatureInfo = useCallback(() => {
+ const { url, featureType } = layer.getProperties();
hfetch(
url +
`?service=WFS&request=describeFeatureType&outputFormat=application/json&typename=${featureType}`
@@ -50,74 +38,156 @@ class VectorFilter extends React.PureComponent {
const layerProperties = featureTypeInfo.properties
.filter((property) => property.type !== "gml:Geometry")
.map((property) => property.name);
- this.setState({
- layerProperties,
- });
+ setLayerProperties(layerProperties);
}
});
});
+ }, [layer, setLayerProperties]);
+
+ /**
+ * Load filter options from layer and set state.
+ */
+ useEffect(() => {
+ setFilterAttribute(layer.get("filterAttribute") || "");
+ setFilterValue(layer.get("filterValue") || "");
+ setFilterComparer(layer.get("filterComparer") || "");
+ if (
+ layer.get("filterAttribute") &&
+ layer.get("filterComparer") &&
+ layer.get("filterValue")
+ ) {
+ setCurrentFilter(
+ `${layer.get("filterAttribute")} ${translateComparer(
+ layer.get("filterComparer")
+ )} ${layer.get("filterValue")}`
+ );
+ } else {
+ setCurrentFilter("");
+ }
+ loadFeatureInfo();
+ }, [layer, loadFeatureInfo]);
+
+ /**
+ * Translates the comparer to a more human readable format
+ **/
+ const translateComparer = (comparer) => {
+ switch (comparer) {
+ case "gt":
+ return ">";
+ case "lt":
+ return "<";
+ case "eq":
+ return "=";
+ case "not":
+ return "≠";
+ default:
+ return comparer;
+ }
};
- handleChange = (e) => {
- this.setState({
- [e.target.name]: e.target.value,
- });
+ /**
+ * Handles change of filter options
+ */
+ const handleChange = (e, type) => {
+ switch (type) {
+ case "attribute":
+ setFilterAttribute(e.target.value);
+ break;
+ case "comparer":
+ setFilterComparer(e.target.value);
+ break;
+ case "value":
+ setFilterValue(e.target.value);
+ break;
+ default:
+ break;
+ }
};
/**
- * @summary Reads filter options from state, applies them on layer and refreshes the source.
- *
- * @memberof VectorFilter
+ * Reads filter options from state, applies them on layer and refreshes the source.
*/
- setFilter = (e) => {
- this.props.layer.set("filterAttribute", this.state.filterAttribute);
- this.props.layer.set("filterComparer", this.state.filterComparer);
- this.props.layer.set("filterValue", this.state.filterValue);
+ const setFilter = () => {
+ layer.set("filterAttribute", filterAttribute);
+ layer.set("filterComparer", filterComparer);
+ layer.set("filterValue", filterValue);
+
+ setCurrentFilter(
+ `${filterAttribute} ${translateComparer(filterComparer)} ${filterValue}`
+ );
- this.props.layer.getSource().refresh();
+ layer.getSource().refresh();
};
/**
- * @ Resets the UI to no filter and reloads the source
- *
- * @memberof VectorFilter
+ * Resets the UI to no filter and reloads the source
*/
- resetFilter = (e) => {
+ const resetFilter = () => {
// Reset the UI
- this.setState({
- filterAttribute: "",
- filterValue: "",
- filterComparer: "",
- });
+ setCurrentFilter("");
+ setFilterAttribute("");
+ setFilterComparer("");
+ setFilterValue("");
// Reset filter options on layer
- this.props.layer.set("filterAttribute", "");
- this.props.layer.set("filterComparer", "");
- this.props.layer.set("filterValue", "");
+ layer.set("filterAttribute", "");
+ layer.set("filterComparer", "");
+ layer.set("filterValue", "");
// Refresh source
- this.props.layer.getSource().refresh();
+ layer.getSource().refresh();
+ };
+
+ /**
+ * Enables the activate button if both attribute and comparer are set.
+ */
+ const enableActivateButton = () => {
+ if (filterAttribute !== "" && filterComparer !== "") {
+ return true;
+ }
+ return false;
};
- render() {
- const { layer } = this.props;
- if (layer instanceof VectorLayer) {
- return (
+ return (
+ <>
+ {currentFilter ? (
+