Update ViewportControls.tsx

invokeai/frontend/web/src/features/nodes/components/ViewportControls.tsx

@@ -2,11 +2,19 @@ import { ButtonGroup } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { memo, useCallback } from 'react';
-import { FaCode, FaExpand, FaMinus, FaPlus, FaInfo } from 'react-icons/fa';
+import {
+  FaCode,
+  FaExpand,
+  FaMinus,
+  FaPlus,
+  FaInfo,
+  FaMapMarkerAlt,
+} from 'react-icons/fa';
 import { useReactFlow } from 'reactflow';
 import {
   shouldShowGraphOverlayChanged,
   shouldShowFieldTypeLegendChanged,
+  shouldShowMinimapPanelChanged,
 } from '../store/nodesSlice';
 
 const ViewportControls = () => {
@@ -19,6 +27,10 @@ const ViewportControls = () => {
     (state) => state.nodes.shouldShowFieldTypeLegend
   );
 
+  const shouldShowMinimapPanel = useAppSelector(
+    (state) => state.nodes.shouldShowMinimapPanel
+  );
+
   const handleClickedZoomIn = useCallback(() => {
     zoomIn();
   }, [zoomIn]);
@@ -39,6 +51,10 @@ const ViewportControls = () => {
     dispatch(shouldShowFieldTypeLegendChanged(!shouldShowFieldTypeLegend));
   }, [shouldShowFieldTypeLegend, dispatch]);
 
+  const handleClickedToggleMiniMapPanel = useCallback(() => {
+    dispatch(shouldShowMinimapPanelChanged(!shouldShowMinimapPanel));
+  }, [shouldShowMinimapPanel, dispatch]);
+
   return (
     <ButtonGroup isAttached orientation="vertical">
       <IAIIconButton
@@ -68,6 +84,12 @@ const ViewportControls = () => {
         aria-label="Show/Hide Field Type Legend"
         icon={<FaInfo />}
       />
+      <IAIIconButton
+        isChecked={shouldShowMinimapPanel}
+        onClick={handleClickedToggleMiniMapPanel}
+        aria-label="Show/Hide Minimap"
+        icon={<FaMapMarkerAlt />}
+      />
     </ButtonGroup>
   );
 };