@mapsight/ui 7.0.2 → 7.1.0

package/src/js/components/feature-list/hooks/useFeatureListState.ts

@@ -8,7 +8,14 @@ import {
 } from "@mapsight/core/lib/feature-sources/selectors";
 
 import {FEATURE_LIST} from "../../../config/constants/controllers";
-import {featureListContextSelector} from "../../../store/selectors";
+import {
+	highlightSelectionSelector,
+	lastListScrollPositionSelector,
+	layerSwitcherShowExternalSelector,
+	preselectSelectionSelector,
+	selectSelectionSelector,
+	tagSwitcherShowSelector,
+} from "../../../store/selectors";
 import type {FullUiState} from "../../../types";
 import useFeatureListFeatureSource from "./useFeatureListFeatureSource";
 import type {PaginatedFilteredFeaturesState} from "./usePaginatedFilteredFeatures";
@@ -35,14 +42,15 @@ export default function useFeatureListState(
 ) {
 	const {featureSourceId, featureSource} =
 		useFeatureListFeatureSource(listControllerName);
-	const {
-		tagSwitcherShow,
-		layerSwitcherShowExternal,
-		scrollPosition,
-		selectSelection,
-		preselectSelection,
-		highlightSelection,
-	} = useSelector(featureListContextSelector);
+	const tagSwitcherShow = useSelector(tagSwitcherShowSelector);
+	const layerSwitcherShowExternal = useSelector(
+		layerSwitcherShowExternalSelector,
+	);
+	const scrollPosition = useSelector(lastListScrollPositionSelector);
+	const selectSelection = useSelector(selectSelectionSelector);
+	const preselectSelection = useSelector(preselectSelectionSelector);
+	const highlightSelection = useSelector(highlightSelectionSelector);
+
 	const paginatedFilteredFeaturesState = usePaginatedFilteredFeatures(
 		featureSource,
 		listUiOptions,

package/src/js/components/feature-list/hooks/useRestoreDocumentScroll.js

@@ -1,6 +1,6 @@
 import {useEffect} from "react";
 
-import {isViewFullscreen, isViewMobile} from "../../../store/selectors.ts";
+import {isViewFullscreen, isViewMobile} from "../../../store/selectors";
 
 export default function useRestoreDocumentScroll(view, scrollPosition) {
 	useEffect(() => {

package/src/js/components/feature-list/hooks/useSelectFeature.js

@@ -8,20 +8,20 @@ import {
 	selectExclusively,
 } from "@mapsight/core/lib/feature-selections/actions";
 
-import {VIEW_MAP_ONLY} from "../../../config/constants/app.ts";
-import {FEATURE_SELECTIONS} from "../../../config/constants/controllers.ts";
-import {FEATURE_SELECTION_HIGHLIGHT} from "../../../config/feature/selections.ts";
-import {setLastListScrollPosition, setView} from "../../../store/actions.ts";
+import {VIEW_MAP_ONLY} from "../../../config/constants/app";
+import {FEATURE_SELECTIONS} from "../../../config/constants/controllers";
+import {FEATURE_SELECTION_HIGHLIGHT} from "../../../config/feature/selections";
+import {setLastListScrollPosition, setView} from "../../../store/actions";
 import {
 	listUiOptionSelectedOnlySelector,
 	listUiOptionSelectionBehaviorSelector,
 	listUiOptionSelectionSelectionSelector,
 	viewSelector,
-} from "../../../store/selectors.ts";
+} from "../../../store/selectors";
 import {
 	APP_EVENT_SCROLL_TO_MAP,
 	useAppChannelDispatchEvent,
-} from "../../helping/app-channel.tsx";
+} from "../../helping/app-channel";
 
 const getDocumentScroll = () =>
 	window.document.documentElement.scrollTop ||

package/src/js/components/feature-list/index.jsx

@@ -8,7 +8,7 @@ import {
 	layerSwitcherConfigExternalSelector,
 	listUiOptionsSelector,
 	viewSelector,
-} from "../../store/selectors.ts";
+} from "../../store/selectors";
 import FeatureCycling from "../feature-list-cycling";
 
 import FeatureSorter from "../feature-list-sorting";
@@ -17,8 +17,8 @@ import {
 	APP_EVENT_SCROLL_TO_FEATURE_LIST,
 	useAppChannelEventListener,
 } from "../helping/app-channel";
-import LayerSwitcher from "../layer-switcher";
-import TagSwitcher from "../tag-switcher";
+import LayerSwitcher from "../layer-switcher/index";
+import TagSwitcher from "../tag-switcher/index";
 
 import {FeatureListContextProvider} from "./context";
 
@@ -31,7 +31,7 @@ import useFeatureListState from "./hooks/useFeatureListState";
 import {useMakeHeaderSticky} from "./hooks/useMakeHeaderSticky";
 import useRestoreDocumentScroll from "./hooks/useRestoreDocumentScroll";
 import useSelectFeature from "./hooks/useSelectFeature";
-import Pagination from "./pagination.tsx";
+import Pagination from "./pagination";
 
 export const DEFAULT_LIST_RENDER_AS = "ul";
 

package/src/js/components/feature-list-cycling/index.js

@@ -1,7 +1,7 @@
 import {connect} from "react-redux";
 
+import {createSelector} from "@reduxjs/toolkit";
 import {batchActions} from "redux-batched-actions";
-import {createSelector} from "reselect";
 
 import {
 	deselectAll,

package/src/js/components/feature-list-sorting/index.js

@@ -1,21 +1,18 @@
 import {connect} from "react-redux";
 
-import {createStructuredSelector} from "reselect";
-
 import {getGeolocation} from "@mapsight/core/lib/user-geolocation/actions";
 import {geolocationStatusSelector} from "@mapsight/core/lib/user-geolocation/selectors";
 
 import {USER_GEOLOCATION} from "../../config/constants/controllers";
-import {sortList} from "../../store/actions.ts";
-import {listSortingSelector, placesSelector} from "../../store/selectors.ts";
+import {sortList} from "../../store/actions";
+import {listSortingSelector, placesSelector} from "../../store/selectors";
 import FeatureSorter from "./feature-list-sorting";
 
 export default connect(
-	createStructuredSelector({
-		sorting: listSortingSelector,
-		places: placesSelector,
-		geolocationStatus: (state) =>
-			geolocationStatusSelector(state[USER_GEOLOCATION]),
+	(state) => ({
+		sorting: listSortingSelector(state),
+		places: placesSelector(state),
+		geolocationStatus: geolocationStatusSelector(state[USER_GEOLOCATION]),
 	}),
 	// dispatch map:
 	{

package/src/js/components/feature-selection-info/index.tsx

@@ -7,7 +7,7 @@ import {removeFrom} from "@mapsight/core/lib/base/actions";
 
 import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
 import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
-import {featureSelectionInfoStickyHeaderSelector} from "../../store/selectors";
+import {featureSelectionInfoUiOptionsSelector} from "../../store/selectors";
 import type {MapsightUiFeature} from "../../types";
 import FeatureDetailsContent from "../feature-details-content";
 import CloseButton from "./close-button";
@@ -25,8 +25,8 @@ export default function FeatureSelectionInfo({
 }) {
 	const dispatch = useDispatch();
 	const hasStickyHeader = useSelector(
-		featureSelectionInfoStickyHeaderSelector,
-	);
+		featureSelectionInfoUiOptionsSelector,
+	).stickyHeader;
 	const renderWrapper = useCallback(
 		(attrs) => (
 			<Wrapper

package/src/js/components/feature-selection-info/{with-sticky-header.jsx → with-sticky-header.tsx}

@@ -1,19 +1,34 @@
+import type {ReactNode} from "react";
 import {useSelector} from "react-redux";
-import useStickyHeader from "../../hooks/useStickyHeader";
-
-import {featureSelectionInfoStuckHeaderHeightSelector} from "../../store/selectors.ts";
 
+import useStickyHeader from "../../hooks/useStickyHeader";
+import {featureSelectionInfoUiOptionsSelector} from "../../store/selectors";
+import type {MapsightUiFeature} from "../../types";
 import Container from "./container";
 
 const stopEventPropagation = (e) => e.stopPropagation();
 
-function WithStickyHeader({header, content, feature, close, renderWrapper}) {
-	const stuckHeaderHeight = useSelector(
-		featureSelectionInfoStuckHeaderHeightSelector,
+type WithStickyHeaderProps = {
+	header: ReactNode;
+	feature: MapsightUiFeature;
+	content: ReactNode;
+	close: ReactNode;
+	renderWrapper: (props: any) => ReactNode;
+};
+
+function WithStickyHeader({
+	header,
+	content,
+	feature,
+	close,
+	renderWrapper,
+}: WithStickyHeaderProps) {
+	const {stuckHeaderHeight} = useSelector(
+		featureSelectionInfoUiOptionsSelector,
 	);
 	const {isHeaderStuck, stickyHeaderRef, stickyScrollAreaRef, onScroll} =
-		useStickyHeader({
-			stuckHeaderSize: stuckHeaderHeight,
+		useStickyHeader<HTMLDivElement>({
+			stuckHeaderHeight,
 			resetDeps: [feature.id],
 		});
 

package/src/js/components/helping/app-context.tsx

@@ -1,6 +1,6 @@
 import {Provider as ReduxProvider} from "react-redux";
 
-import type {Store} from "redux";
+import type {Store} from "@reduxjs/toolkit";
 
 import type {MapsightUiComponents} from "../../helpers/components";
 import {ComponentsContext} from "../../helpers/components";

package/src/js/components/layer-switcher/GroupedLayerSwitcher.js

@@ -1,6 +1,6 @@
 import {connect, shallowEqual} from "react-redux";
 
-import {createSelector} from "reselect";
+import {createSelector} from "@reduxjs/toolkit";
 
 import {MAP} from "../../config/constants/controllers";
 import GroupedSwitcher from "../switcher/GroupedSwitcher";

package/src/js/components/layer-switcher/{LayerSwitcher.js → LayerSwitcher.ts}

@@ -1,18 +1,25 @@
 import {connect} from "react-redux";
 
+import type {MapState} from "@mapsight/core/lib/map/types";
+import type {State} from "@mapsight/core/types";
+
 import {MAP} from "../../config/constants/controllers";
 import Switcher from "../switcher/Switcher";
 
-const selector = (state, {layerIdsSelector}) => ({
-	ids: layerIdsSelector(state[MAP]),
-});
+const selector = (
+	state: State,
+	{layerIdsSelector}: {layerIdsSelector: (state: MapState) => string[]},
+) =>
+	({
+		ids: layerIdsSelector(state[MAP] as MapState),
+	}) as const;
 
 export default connect(
 	selector,
 	null,
 	(
 		stateProps,
-		dispatchProps,
+		_,
 		{
 			// Need to list the selectors here so they do not get passed as attribute props to the element but get filtered:
 			layerIdsSelector: _layerIdsSelector,

package/src/js/components/layer-switcher/{LayerSwticherContainer.jsx → LayerSwitcherContainer.tsx}

@@ -1,3 +1,6 @@
+import type {ElementType} from "react";
+import {memo, useCallback} from "react";
+
 import {
 	layerIdsIntegratedSwitcherSelector,
 	makeFeatureSourceFromLayerIdSelector,
@@ -6,10 +9,9 @@ import {
 	makeLayerTitleSelector,
 	makeLayerVisibleSelector,
 } from "@mapsight/core/lib/map/selectors";
-import {memo, useCallback} from "react";
+import type {MapState} from "@mapsight/core/lib/map/types";
 
 import {translate} from "../../helpers/i18n";
-
 import GroupedLayerSwitcher from "./GroupedLayerSwitcher";
 import LayerSwitcher from "./LayerSwitcher";
 import LayerSwitcherEntry from "./LayerSwitcherEntry";
@@ -18,17 +20,24 @@ import LayerSwitcherEntry from "./LayerSwitcherEntry";
 //  damit diese Berechnung nur bei Änderungen am store berechnet neu wird
 // TODO für das visible eine eigenes connect, damit der Tree nicht dauernd neu berechnet wird
 
-function LayerSwitcherContainer(props) {
-	const {
-		as: T = "div",
-		baseClassName = "ms3-layer-switcher-container", // TODO: Use generic class name
-		onClose,
-		layerIdsSelector = layerIdsIntegratedSwitcherSelector,
-		setFeatureSourceIdPath,
-		grouped = false,
-		...attributes
-	} = props;
+export type LayerSwitcherContainerProps = {
+	as?: ElementType;
+	baseClassName?: string;
+	onClose?: () => void;
+	layerIdsSelector?: (state: MapState) => string[];
+	grouped?: boolean;
+	setFeatureSourceIdPath?: unknown;
+};
 
+function LayerSwitcherContainer({
+	as: T = "div",
+	baseClassName = "ms3-layer-switcher-container", // TODO: Use generic class name
+	onClose,
+	layerIdsSelector = layerIdsIntegratedSwitcherSelector,
+	grouped = false,
+	setFeatureSourceIdPath: _,
+	...attributes
+}: LayerSwitcherContainerProps) {
 	const renderLayerEntry = useCallback(
 		(id) => (
 			// TODO: memo comp instance & selectors
@@ -42,10 +51,9 @@ function LayerSwitcherContainer(props) {
 				featureSourceIdSelector={makeFeatureSourceIdFromLayerIdSelector(
 					id,
 				)}
-				setFeatureSourceIdPath={setFeatureSourceIdPath}
 			/>
 		),
-		[setFeatureSourceIdPath],
+		[],
 	);
 
 	const Switcher = grouped ? GroupedLayerSwitcher : LayerSwitcher;

package/src/js/components/layer-switcher/LayerSwitcherEntry.ts

@@ -0,0 +1,152 @@
+import {connect} from "react-redux";
+
+import type {Dispatch} from "@reduxjs/toolkit";
+
+import type {ActionPath} from "@mapsight/core/lib/base/actions";
+import {set as makeSetAction} from "@mapsight/core/lib/base/actions";
+import {getFeatureSourceStatus} from "@mapsight/core/lib/feature-sources/selectors";
+import type {FeatureSourceState} from "@mapsight/core/lib/feature-sources/types";
+import {setLayerVisibility} from "@mapsight/core/lib/map/actions";
+import type {MapState} from "@mapsight/core/lib/map/types";
+import type {State} from "@mapsight/core/types";
+
+import getPath from "@mapsight/lib-js/object/getPath";
+
+import {MAP} from "../../config/constants/controllers";
+import SwitcherEntry from "../switcher/SwitcherEntry";
+
+function getActiveProps({
+	setFeatureSourceIdPath,
+	currentlySetFeatureSourceId,
+	featureSourceId,
+	dispatch,
+	layerId,
+	visibility,
+	locked,
+}: {
+	locked: boolean;
+	visibility: boolean;
+	featureSourceId: string | undefined;
+	currentlySetFeatureSourceId: string | undefined;
+	dispatch: Dispatch;
+	layerId: string;
+	setFeatureSourceIdPath?: ActionPath | null;
+}) {
+	if (setFeatureSourceIdPath) {
+		const isCurrentFeatureSource =
+			currentlySetFeatureSourceId === featureSourceId;
+
+		// this will match in intermediate state; use batching?
+		//if (!visibility && isFeatureSourceCurrent) {
+		//	throw new Error('illegal state');
+		//}
+
+		return {
+			activeCheckbox: visibility,
+			activeText: isCurrentFeatureSource,
+			toggleActiveCheckbox: function toggleActiveCheckbox() {
+				dispatch(setLayerVisibility(MAP, layerId, !visibility));
+				if (isCurrentFeatureSource) {
+					dispatch(makeSetAction(setFeatureSourceIdPath, undefined));
+				}
+			},
+			toggleActiveText: function toggleActiveText() {
+				if (featureSourceId) {
+					dispatch(
+						makeSetAction(setFeatureSourceIdPath, featureSourceId),
+					);
+				}
+				dispatch(setLayerVisibility(MAP, layerId, true));
+			},
+		};
+	}
+
+	return {
+		active: visibility,
+		toggleActive: function toggleActive() {
+			if (!locked) {
+				dispatch(setLayerVisibility(MAP, layerId, !visibility));
+			}
+		},
+	};
+}
+
+export type LayerSwitcherEntryProps = {
+	layerId: string;
+	titleSelector: (state: MapState) => string;
+	lockedSelector: (state: MapState) => boolean;
+	layerVisibilitySelector: (state: MapState) => boolean;
+	featureSourceSelector: (
+		mapState: MapState,
+		state: State,
+	) => FeatureSourceState | null;
+	featureSourceIdSelector: (state: MapState) => string | undefined;
+	setFeatureSourceIdPath?: ActionPath | null;
+};
+
+const mapStateToProps = (
+	state: State,
+	{
+		titleSelector,
+		lockedSelector,
+		layerVisibilitySelector,
+		featureSourceSelector,
+		featureSourceIdSelector,
+		setFeatureSourceIdPath,
+	}: LayerSwitcherEntryProps,
+) => {
+	const mapState = state[MAP] as MapState;
+
+	return {
+		title: titleSelector(mapState),
+		locked: lockedSelector(mapState),
+		visibility: layerVisibilitySelector(mapState),
+		featureSource: featureSourceSelector(mapState, state),
+		featureSourceId: featureSourceIdSelector(mapState),
+		currentlySetFeatureSourceId: Array.isArray(setFeatureSourceIdPath)
+			? (getPath(state, setFeatureSourceIdPath) as string | undefined)
+			: undefined,
+	};
+};
+
+const LayerSwitcherEntry = connect(
+	mapStateToProps,
+	null,
+	// mergeProps:
+	(
+		stateProps,
+		{dispatch},
+		{
+			// used for active props:
+			layerId,
+			setFeatureSourceIdPath,
+
+			// Need to list the selectors here so they do not get passed as attribute props to the element but get filtered:
+			lockedSelector: _1,
+			titleSelector: _2,
+			layerVisibilitySelector: _3,
+			featureSourceSelector: _4,
+			featureSourceIdSelector: _5,
+
+			...attributes
+		},
+	) => ({
+		title: stateProps.title,
+		status: stateProps.featureSource
+			? getFeatureSourceStatus(stateProps.featureSource)
+			: undefined,
+		locked: stateProps.locked,
+		...getActiveProps({
+			visibility: stateProps.visibility,
+			featureSourceId: stateProps.featureSourceId ?? "",
+			currentlySetFeatureSourceId: stateProps.currentlySetFeatureSourceId,
+			locked: stateProps.locked,
+			dispatch,
+			layerId,
+			setFeatureSourceIdPath,
+		}),
+		...attributes,
+	}),
+)(SwitcherEntry);
+
+export default LayerSwitcherEntry;

package/src/js/components/layer-switcher/index.ts

@@ -0,0 +1,42 @@
+import {connect} from "react-redux";
+
+import type {Selector} from "@mapsight/core/types";
+
+import {FEATURE_LIST} from "../../config/constants/controllers";
+import type {RootStateSlice} from "../../store/selectors";
+import {layerSwitcherConfigInternalSelector} from "../../store/selectors";
+import type {LayerSwitcherConfigState} from "../../types";
+import LayerSwitcherContainer from "./LayerSwitcherContainer";
+
+const TRUE_SET_FEATURE_SOURCE_PATH = [FEATURE_LIST, "featureSource"] as const;
+
+type Props = {
+	configSelector?: Selector<LayerSwitcherConfigState | undefined>;
+};
+
+export default connect(
+	(
+		state: RootStateSlice,
+		{configSelector = layerSwitcherConfigInternalSelector}: Props,
+	) => {
+		const setFeatureSourceId = configSelector(state)?.setFeatureSourceId;
+
+		return {
+			layerIdsSelector: configSelector(state)?.layerIdsSelector,
+			grouped: configSelector(state)?.grouped,
+			setFeatureSourceIdPath:
+				setFeatureSourceId === true
+					? TRUE_SET_FEATURE_SOURCE_PATH
+					: setFeatureSourceId,
+		};
+	},
+	null,
+	(
+		stateProps,
+		_dispatchProps,
+		{configSelector: _configSelector, ...ownProps},
+	) => ({
+		...ownProps,
+		...stateProps,
+	}),
+)(LayerSwitcherContainer);

package/src/js/components/layout/wrapper.jsx

@@ -5,7 +5,7 @@ import {
 	isEmbeddedMapSelector,
 	mapVisible,
 	viewSelector,
-} from "../../store/selectors.ts";
+} from "../../store/selectors";
 
 function AppWrapper({children, ...attributes}) {
 	const view = useSelector(viewSelector);

package/src/js/components/main-panel/context.tsx

@@ -0,0 +1,71 @@
+import type {PropsWithChildren} from "react";
+import {createContext, useContext, useMemo} from "react";
+import {useSelector} from "react-redux";
+
+import {createMainPanelContentTypeSelector} from "../../store/selectors";
+import type {MainPanelContextOptions, MainPanelContextValue} from "../../types";
+
+const MainPanelContext = createContext<MainPanelContextValue>({
+	showSelectionInfo: false,
+	showList: false,
+	collapsible: false,
+	panelPosition: "left",
+
+	feature: null,
+	contentType: null,
+	collapsed: false,
+});
+MainPanelContext.displayName = "MainPanelContext";
+
+export function useMainPanelContext() {
+	return useContext(MainPanelContext);
+}
+
+type MainPanelStateProps = Pick<
+	MainPanelContextOptions,
+	"showSelectionInfo" | "showList" | "collapsible"
+>;
+
+function useMainPanelState({
+	showSelectionInfo,
+	showList,
+	collapsible,
+}: MainPanelStateProps) {
+	const selector = useMemo(
+		() =>
+			createMainPanelContentTypeSelector({
+				showSelectionInfo: showSelectionInfo,
+				showList: showList,
+				collapsible: collapsible,
+			}),
+		[showSelectionInfo, showList, collapsible],
+	);
+	return useSelector(selector);
+}
+
+type MainPanelContextProps = PropsWithChildren<
+	Partial<MainPanelContextOptions>
+>;
+
+export function MainPanelContextProvider({
+	showSelectionInfo = false,
+	showList = false,
+	collapsible = false,
+	panelPosition = "left",
+	children,
+}: MainPanelContextProps) {
+	const options = {
+		showSelectionInfo: showSelectionInfo,
+		showList: showList,
+		collapsible: collapsible,
+		panelPosition: panelPosition,
+	};
+	const state = useMainPanelState(options);
+	const value = {...options, ...state};
+
+	return (
+		<MainPanelContext.Provider value={value}>
+			{children}
+		</MainPanelContext.Provider>
+	);
+}

package/src/js/components/main-panel/list-toggle-button.jsx

@@ -1,9 +1,9 @@
 import {useCallback} from "react";
 import {useDispatch, useSelector} from "react-redux";
 import {translate} from "../../helpers/i18n";
-import {toggleUserPreferenceListVisible} from "../../store/actions.ts";
+import {toggleUserPreferenceListVisible} from "../../store/actions";
 
-import {userPreferenceListVisibleSelector} from "../../store/selectors.ts";
+import {userPreferenceListVisibleSelector} from "../../store/selectors";
 
 import {useMainPanelContext} from "./context";
 

package/src/js/components/map-overlay/attribution.tsx

@@ -16,7 +16,7 @@ function Attribution({children}: PropsWithChildren) {
 	const attributions = useSelector(selectVisibleLayerAttributions);
 
 	return (
-		<AttributionEntries attributions={attributions}>
+		<AttributionEntries attributions={attributions ?? undefined}>
 			{children}
 		</AttributionEntries>
 	);

package/src/js/components/map-overlay/info-overlay-left.jsx

@@ -3,12 +3,12 @@ import {useDispatch, useSelector} from "react-redux";
 
 import {translate} from "../../helpers/i18n";
 
-import {setOverlayModalVisible} from "../../store/actions.ts";
+import {setOverlayModalVisible} from "../../store/actions";
 
 import {
 	isOverlayModalVisibleSelector,
 	isViewMobileOrMapOnlySelector,
-} from "../../store/selectors.ts";
+} from "../../store/selectors";
 
 import Logo from "./logo";
 

package/src/js/components/map-overlay/info-overlay-right.jsx

@@ -4,12 +4,12 @@ import {
 } from "@mapsight/core/lib/map/selectors";
 import {memo, useCallback} from "react";
 import {useDispatch, useSelector} from "react-redux";
-import {createSelector} from "reselect";
+import {createSelector} from "@reduxjs/toolkit";
 
 import {MAP} from "../../config/constants/controllers";
 
 import {translate} from "../../helpers/i18n";
-import {setOverlayModalVisible} from "../../store/actions.ts";
+import {setOverlayModalVisible} from "../../store/actions";
 
 import Attribution from "./attribution";
 

package/src/js/components/map-overlay/legend.tsx

@@ -1,6 +1,6 @@
 import {useSelector} from "react-redux";
 
-import {createSelector} from "reselect";
+import {createSelector} from "@reduxjs/toolkit";
 
 import {
 	reduceLayersToLegends,