feat(basemap): Add and select basemap

package.json

@@ -81,6 +81,8 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/expect-puppeteer": "^5.0.6",
     "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
     "@types/recharts": "^1.8.23",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",

src/components/basemap-list-panel/basemap-list-panel.tsx

@@ -0,0 +1,227 @@
+import styled, { css } from "styled-components";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+
+import { OptionsIcon, Panels } from "../common";
+import {
+  selectSelectedBaseMapId,
+  setSelectedBaseMaps,
+  selectBaseMapsByGroup,
+} from "../../redux/slices/base-maps-slice";
+import { basemapIcons } from "../../constants/map-styles";
+import { Popover } from "react-tiny-popover";
+
+const BASEMAP_ICON_WIDTH = 100;
+const BASEMAP_ICON_HEIGHT = 70;
+
+const BasemapContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  border-width: 0;
+  margin: 0 0 0 0;
+`;
+
+const BasemapTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  color: ${({ theme }) => theme.colors.fontColor};
+
+  margin-bottom: 13px;
+`;
+
+const BasemapPanel = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: start;
+  align-items: center;
+  border-width: 0;
+  border-radius: 8px;
+  gap: 0px;
+`;
+
+const BasemapImageWrapper = styled.div<{
+  active?: boolean;
+  width: number;
+}>`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  border-width: 0;
+  border-radius: 8px;
+
+  width: ${({ width }) => `${width}px`};
+  padding: 4px 4px 4px 4px;
+
+  ${({ active = false }) =>
+    active &&
+    css`
+      background-color: ${({ theme }) => theme.colors.mainHiglightColor};
+    `}
+`;
+
+const BasemapCustomIcon = styled.div<{
+  width: number;
+  height: number;
+}>`
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  height: ${({ height }) => `${height}px`};
+  width: ${({ width }) => `${width}px`};
+  margin: 0;
+  border-width: 0;
+  border-radius: 8px;
+`;
+
+const BasemapIcon = styled.div<{
+  icon: string;
+  width: number;
+  height: number;
+}>`
+  display: flex;
+  position: relative;
+  height: ${({ height }) => `${height}px`};
+  width: ${({ width }) => `${width}px`};
+  margin: 0;
+  background-image: ${({ icon }) => `url(${icon})`};
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-width: 0;
+  border-radius: 8px;
+`;
+
+const BasemapImageName = styled.div`
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  color: ${({ theme }) => theme.colors.fontColor};
+
+  margin: 4px 0 0 0;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+`;
+
+const OptionsButton = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  top: 6px;
+  right: 6px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.mainDimColor};
+  }
+`;
+
+interface BasemapListPanelProps {
+  group: string;
+  optionsMapId: string;
+  optionsContent?: JSX.Element;
+  onOptionsClick?: (id: string) => void;
+  onOptionsClickOutside?: () => void;
+}
+
+export const BasemapListPanel = ({
+  group,
+  optionsMapId,
+  optionsContent,
+  onOptionsClick,
+  onOptionsClickOutside,
+}: BasemapListPanelProps) => {
+  const dispatch = useAppDispatch();
+
+  const imageArray = useAppSelector(selectBaseMapsByGroup(group));
+  const imagePickedKey = useAppSelector(selectSelectedBaseMapId);
+
+  return (
+    <BasemapContainer>
+      <BasemapTitle>{group}</BasemapTitle>
+      <BasemapPanel>
+        {imageArray.map((item) => {
+          const basemapIcon = basemapIcons[item.iconId];
+          const iconUrl = basemapIcon?.icon;
+          const IconComponent = basemapIcon?.Icon;
+          return (
+            <BasemapImageWrapper
+              key={item.id}
+              active={imagePickedKey === item.id}
+              width={BASEMAP_ICON_WIDTH}
+              onClick={() => {
+                dispatch(setSelectedBaseMaps(item.id));
+              }}
+            >
+              {iconUrl && (
+                <BasemapIcon
+                  key={`${item.id}`}
+                  icon={`${iconUrl}`}
+                  width={BASEMAP_ICON_WIDTH}
+                  height={BASEMAP_ICON_HEIGHT}
+                />
+              )}
+
+              {IconComponent && (
+                <BasemapCustomIcon
+                  key={`${item.id}`}
+                  width={BASEMAP_ICON_WIDTH}
+                  height={BASEMAP_ICON_HEIGHT}
+                >
+                  <IconComponent></IconComponent>
+                </BasemapCustomIcon>
+              )}
+
+              <BasemapImageName>{item.name || ""}</BasemapImageName>
+              {item.custom && onOptionsClick && optionsContent && (
+                <Popover
+                  isOpen={optionsMapId === item.id}
+                  reposition={false}
+                  positions={["left", "top", "bottom"]}
+                  align="start"
+                  content={optionsContent}
+                  containerStyle={{ zIndex: "2" }}
+                  onClickOutside={onOptionsClickOutside}
+                >
+                  <OptionsButton
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onOptionsClick(item.id);
+                    }}
+                  >
+                    <OptionsIcon $panel={Panels.Bookmarks} />
+                  </OptionsButton>
+                </Popover>
+              )}
+            </BasemapImageWrapper>
+          );
+        })}
+      </BasemapPanel>
+    </BasemapContainer>
+  );
+};

src/components/comparison/comparison-side/comparison-side.tsx

@@ -19,6 +19,7 @@ import {
   PageId,
   type TilesetMetadata,
   type LayoutProps,
+  BaseMapGroup,
 } from "../../../types";
 import { DeckGlWrapper } from "../../deck-gl-wrapper/deck-gl-wrapper";
 import { MainToolsPanel } from "../../main-tools-panel/main-tools-panel";
@@ -61,7 +62,7 @@ import { useSelector } from "react-redux";
 import { type RootState } from "../../../redux/store";
 import { selectFiltersByAttribute } from "../../../redux/slices/symbolization-slice";
 import { selectViewState } from "../../../redux/slices/view-state-slice";
-import { selectSelectedBaseMapId } from "../../../redux/slices/base-maps-slice";
+import { selectSelectedBaseMap } from "../../../redux/slices/base-maps-slice";
 import { ArcgisWrapper } from "../../../components/arcgis-wrapper/arcgis-wrapper";
 
 const Container = styled.div<LayoutProps>`
@@ -138,9 +139,11 @@ export const ComparisonSide = ({
       ? selectLeftSublayers
       : selectRightSublayers
   );
-  const selectedBaseMapId = useAppSelector(selectSelectedBaseMapId);
+  const selectedBaseMap = useAppSelector(selectSelectedBaseMap);
   const MapWrapper =
-    selectedBaseMapId === "ArcGis" ? ArcgisWrapper : DeckGlWrapper;
+    selectedBaseMap?.group === BaseMapGroup.ArcGIS
+      ? ArcgisWrapper
+      : DeckGlWrapper;
   const [isCompressedGeometry, setIsCompressedGeometry] =
     useState<boolean>(true);
   const [isCompressedTextures, setIsCompressedTextures] =

src/components/debug-panel/debug-panel.tsx

@@ -4,6 +4,7 @@ import { addIconItem } from "../../redux/slices/icon-list-slice";
 import {
   type IIconItem,
   IconListSetName,
+  BaseMapGroup,
   ButtonSize,
   FileType,
   type FileUploaded,
@@ -18,7 +19,6 @@ import { IconListPanel } from "../icon-list-panel/icon-list-panel";
 import { ActionIconButton } from "../action-icon-button/action-icon-button";
 import PlusIcon from "../../../public/icons/plus.svg";
 import { UploadPanel } from "../upload-panel/upload-panel";
-
 import { useAppLayout } from "../../utils/hooks/layout";
 import { CloseButton } from "../close-button/close-button";
 import {
@@ -35,7 +35,7 @@ import {
   setDebugOptions,
   selectDebugOptions,
 } from "../../redux/slices/debug-options-slice";
-import { selectSelectedBaseMapId } from "../../redux/slices/base-maps-slice";
+import { selectSelectedBaseMap } from "../../redux/slices/base-maps-slice";
 
 export const TEXTURE_ICON_SIZE = 54;
 
@@ -95,8 +95,8 @@ export const DebugPanel = ({ onClose }: DebugPanelProps) => {
   const dispatch = useAppDispatch();
   const [showFileUploadPanel, setShowFileUploadPanel] = useState(false);
   const debugOptions = useAppSelector(selectDebugOptions);
-  const selectedBaseMapId = useAppSelector(selectSelectedBaseMapId);
-  const minimapDisabled = selectedBaseMapId === "ArcGis";
+  const selectedBaseMap = useAppSelector(selectSelectedBaseMap);
+  const minimapDisabled = selectedBaseMap?.group === BaseMapGroup.ArcGIS;
   if (minimapDisabled && debugOptions.minimap) {
     dispatch(setDebugOptions({ minimap: false }));
   }

src/components/deck-gl-wrapper/deck-gl-wrapper.spec.tsx

@@ -1,7 +1,12 @@
 // Get tileset stub before Mocks. The order is important
 import { getTileset3d, getTile3d } from "../../test/tile-stub";
 import { getTilesetJson } from "../../test/tileset-header-stub";
-import { DragMode, TilesetType, TileColoredBy } from "../../types";
+import {
+  DragMode,
+  TilesetType,
+  TileColoredBy,
+  BaseMapGroup,
+} from "../../types";
 
 import { act } from "@testing-library/react";
 import { DeckGlWrapper } from "./deck-gl-wrapper";
@@ -349,7 +354,15 @@ describe("Deck.gl I3S map component", () => {
 
   describe("Render TerrainLayer", () => {
     const store = setupStore();
-    store.dispatch(addBaseMap({ id: "Terrain", mapUrl: "", name: "Terrain" }));
+    store.dispatch(
+      addBaseMap({
+        id: "Terrain",
+        mapUrl: "",
+        name: "Terrain",
+        group: BaseMapGroup.Terrain,
+        iconId: "Dark",
+      })
+    );
     it("Should render terrain", () => {
       callRender(renderWithProvider, undefined, store);
       expect(TerrainLayer).toHaveBeenCalled();
@@ -358,7 +371,13 @@ describe("Deck.gl I3S map component", () => {
     it("Should call onTerrainTileLoad", async () => {
       const store = setupStore();
       store.dispatch(
-        addBaseMap({ id: "Terrain", mapUrl: "", name: "Terrain" })
+        addBaseMap({
+          id: "Terrain",
+          mapUrl: "",
+          name: "Terrain",
+          group: BaseMapGroup.Terrain,
+          iconId: "Terrain",
+        })
       );
       const { rerender } = callRender(renderWithProvider, undefined, store);
       const { onTileLoad } = TerrainLayer.mock.lastCall[0];