fix(minimap): disable minimap for ArcGIS base map

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

@@ -24,6 +24,7 @@ import {
   setDebugOptions,
   selectDebugOptions,
 } from "../../redux/slices/debug-options-slice";
+import { selectSelectedBaseMapId } from "../../redux/slices/base-maps-slice";
 
 const CloseButtonWrapper = styled.div`
   position: absolute;
@@ -64,6 +65,11 @@ export const DebugPanel = ({ onClose }: DebugPanelProps) => {
   const layout = useAppLayout();
   const dispatch = useAppDispatch();
   const debugOptions = useAppSelector(selectDebugOptions);
+  const selectedBaseMapId = useAppSelector(selectSelectedBaseMapId);
+  const minimapDisabled = selectedBaseMapId === "ArcGis";
+  if (minimapDisabled && debugOptions.minimap) {
+    dispatch(setDebugOptions({ minimap: false }));
+  }
 
   return (
     <PanelContainer layout={layout}>
@@ -84,6 +90,7 @@ export const DebugPanel = ({ onClose }: DebugPanelProps) => {
           <ToggleSwitch
             id={"toggle-minimap"}
             checked={debugOptions.minimap}
+            disabled={minimapDisabled}
             onChange={() =>
               dispatch(setDebugOptions({ minimap: !debugOptions.minimap }))
             }

src/components/toogle-switch/toggle-switch.tsx

@@ -1,11 +1,7 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { color_canvas_primary_inverted } from "../../constants/colors";
 
-const Switch = styled.div`
-  position: relative;
-  width: 28px;
-  height: 18px;
-`;
+const color_control_disabled = "#808080";
 
 const Input = styled.input`
   height: 0;
@@ -22,7 +18,6 @@ const Label = styled.label<{
   width: 28px;
   height: 18px;
   border-radius: 8px;
-  cursor: pointer;
   ${Input} {
     opacity: 0;
     width: 0;
@@ -32,7 +27,6 @@ const Label = styled.label<{
 
 const Slider = styled.span`
   position: absolute;
-  cursor: pointer;
   top: 1px;
   left: 0;
   right: 0;
@@ -71,26 +65,51 @@ const Slider = styled.span`
     -ms-transform: translateX(11px);
     transform: translateX(11px);
   }
+
+  ${Input}:disabled + &::before {
+    background-color: ${color_control_disabled};
+  }
 `;
 
-/**
- * TODO: Add types to component
- */
+const Switch = styled.div<{ disabled?: boolean }>`
+  position: relative;
+  width: 28px;
+  height: 18px;
+  ${Label} {
+    ${({ disabled }) =>
+      !disabled &&
+      css`
+        cursor: pointer;
+      `}
+  }
+`;
+
+type ToggleSwitchProps = {
+  checked: boolean;
+  onChange: () => void;
+  name?: string;
+  id?: string;
+  title?: string;
+  disabled?: boolean;
+};
+
 export const ToggleSwitch = ({
   checked,
   onChange,
   name = "",
   id = "",
   title = "",
-}) => {
+  disabled = false,
+}: ToggleSwitchProps) => {
   return (
-    <Switch>
+    <Switch disabled={disabled}>
       <Label htmlFor={id} title={title}>
         <Input
           id={id}
           type="checkbox"
           name={name}
           checked={checked}
+          disabled={disabled}
           title={title}
           onChange={onChange}
         />

src/pages/debug-app/debug-app.tsx

@@ -236,7 +236,7 @@ export const DebugApp = () => {
     setColoredTilesMap({});
     setSelectedTile(null);
     dispatch(resetDebugOptions());
-    dispatch(setDebugOptions({ minimap: true }));
+    dispatch(setDebugOptions({ minimap: !(selectedBaseMapId === "ArcGis") }));
     dispatch(clearBSLStatisitcsSummary());
     dispatch(setFiltersByAttrubute({ filter: null }));
   }, [activeLayers, buildingExplorerOpened]);