Add Toggle for Minimap and Tooltips (#3809)

## What type of PR is this? (check all applicable)

- [ ] Refactor
- [x] Feature
- [ ] Bug Fix
- [ ] Optimization
- [ ] Documentation Update


## Have you discussed this change with the InvokeAI team?
- [ ] Yes
- [x] No, because:
If its not useful, they do not have to use it 😄 
      
## Description
While I was still in the viewportcontrols.tsx
added Option to toggle off the minimap with default being on(true)
added Tooltips to the buttons in viewportcontrols.tsx

## Related Tickets & Documents

<!--
For pull requests that relate or close an issue, please include them
below. 

For example having the text: "closes #1234" would connect the current
pull
request to issue 1234.  And when we merge the pull request, Github will
automatically close the issue.
-->

- Related Issue #
- Closes #

## QA Instructions, Screenshots, Recordings

<!-- 
Please provide steps on how to test changes, any hardware or 
software specifications as well as any other pertinent information. 
-->

## Added/updated tests?

- [ ] Yes
- [ ] No : _please replace this line with details on why tests
      have not been included_

## [optional] Are there any post deployment tasks we need to perform?

invokeai/frontend/web/public/locales/en.json

@@ -694,6 +694,15 @@
         "reloadSchema": "Reload Schema",
         "saveNodes": "Save Nodes",
         "loadNodes": "Load Nodes",
-        "clearNodes": "Clear Nodes"
+        "clearNodes": "Clear Nodes",
+        "zoomInNodes": "Zoom In",
+        "zoomOutNodes": "Zoom Out",
+        "fitViewportNodes": "Fit View",
+        "hideGraphNodes": "Hide Graph Overlay",
+        "showGraphNodes": "Show Graph Overlay",
+        "hideLegendNodes": "Hide Field Type Legend",
+        "showLegendNodes": "Show Field Type Legend",
+        "hideMinimapnodes": "Hide MiniMap",
+        "showMinimapnodes": "Show MiniMap"
     }
 }

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

@@ -1,15 +1,25 @@
-import { ButtonGroup } from '@chakra-ui/react';
+import { ButtonGroup, Tooltip } 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 { useTranslation } from 'react-i18next';
 import {
   shouldShowGraphOverlayChanged,
   shouldShowFieldTypeLegendChanged,
+  shouldShowMinimapPanelChanged,
 } from '../store/nodesSlice';
 
 const ViewportControls = () => {
+  const { t } = useTranslation();
   const { zoomIn, zoomOut, fitView } = useReactFlow();
   const dispatch = useAppDispatch();
   const shouldShowGraphOverlay = useAppSelector(
@@ -18,6 +28,9 @@ const ViewportControls = () => {
   const shouldShowFieldTypeLegend = useAppSelector(
     (state) => state.nodes.shouldShowFieldTypeLegend
   );
+  const shouldShowMinimapPanel = useAppSelector(
+    (state) => state.nodes.shouldShowMinimapPanel
+  );
 
   const handleClickedZoomIn = useCallback(() => {
     zoomIn();
@@ -39,35 +52,60 @@ const ViewportControls = () => {
     dispatch(shouldShowFieldTypeLegendChanged(!shouldShowFieldTypeLegend));
   }, [shouldShowFieldTypeLegend, dispatch]);
 
+  const handleClickedToggleMiniMapPanel = useCallback(() => {
+    dispatch(shouldShowMinimapPanelChanged(!shouldShowMinimapPanel));
+  }, [shouldShowMinimapPanel, dispatch]);
+
   return (
     <ButtonGroup isAttached orientation="vertical">
-      <IAIIconButton
+      <Tooltip label={t('nodes.zoomInNodes')}>
-        onClick={handleClickedZoomIn}
+        <IAIIconButton onClick={handleClickedZoomIn} icon={<FaPlus />} />
-        aria-label="Zoom In"
+      </Tooltip>
-        icon={<FaPlus />}
+      <Tooltip label={t('nodes.zoomOutNodes')}>
-      />
+        <IAIIconButton onClick={handleClickedZoomOut} icon={<FaMinus />} />
-      <IAIIconButton
+      </Tooltip>
-        onClick={handleClickedZoomOut}
+      <Tooltip label={t('nodes.fitViewportNodes')}>
-        aria-label="Zoom Out"
+        <IAIIconButton onClick={handleClickedFitView} icon={<FaExpand />} />
-        icon={<FaMinus />}
+      </Tooltip>
-      />
+      <Tooltip
-      <IAIIconButton
+        label={
-        onClick={handleClickedFitView}
+          shouldShowGraphOverlay
-        aria-label="Fit to Viewport"
+            ? t('nodes.hideGraphNodes')
-        icon={<FaExpand />}
+            : t('nodes.showGraphNodes')
-      />
+        }
-      <IAIIconButton
+      >
-        isChecked={shouldShowGraphOverlay}
+        <IAIIconButton
-        onClick={handleClickedToggleGraphOverlay}
+          isChecked={shouldShowGraphOverlay}
-        aria-label="Show/Hide Graph"
+          onClick={handleClickedToggleGraphOverlay}
-        icon={<FaCode />}
+          icon={<FaCode />}
-      />
+        />
-      <IAIIconButton
+      </Tooltip>
-        isChecked={shouldShowFieldTypeLegend}
+      <Tooltip
-        onClick={handleClickedToggleFieldTypeLegend}
+        label={
-        aria-label="Show/Hide Field Type Legend"
+          shouldShowFieldTypeLegend
-        icon={<FaInfo />}
+            ? t('nodes.hideLegendNodes')
-      />
+            : t('nodes.showLegendNodes')
+        }
+      >
+        <IAIIconButton
+          isChecked={shouldShowFieldTypeLegend}
+          onClick={handleClickedToggleFieldTypeLegend}
+          icon={<FaInfo />}
+        />
+      </Tooltip>
+      <Tooltip
+        label={
+          shouldShowMinimapPanel
+            ? t('nodes.hideMinimapnodes')
+            : t('nodes.showMinimapnodes')
+        }
+      >
+        <IAIIconButton
+          isChecked={shouldShowMinimapPanel}
+          onClick={handleClickedToggleMiniMapPanel}
+          icon={<FaMapMarkerAlt />}
+        />
+      </Tooltip>
     </ButtonGroup>
   );
 };

invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx

@@ -1,3 +1,5 @@
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useColorModeValue } from '@chakra-ui/react';
 import { memo } from 'react';
 import { MiniMap } from 'reactflow';
@@ -12,6 +14,10 @@ const MinimapPanel = () => {
     }
   );
 
+  const shouldShowMinimapPanel = useAppSelector(
+    (state: RootState) => state.nodes.shouldShowMinimapPanel
+  );
+
   const nodeColor = useColorModeValue(
     'var(--invokeai-colors-accent-300)',
     'var(--invokeai-colors-accent-700)'
@@ -23,15 +29,19 @@ const MinimapPanel = () => {
   );
 
   return (
-    <MiniMap
+    <>
-      nodeStrokeWidth={3}
+      {shouldShowMinimapPanel && (
-      pannable
+        <MiniMap
-      zoomable
+          nodeStrokeWidth={3}
-      nodeBorderRadius={30}
+          pannable
-      style={miniMapStyle}
+          zoomable
-      nodeColor={nodeColor}
+          nodeBorderRadius={30}
-      maskColor={maskColor}
+          style={miniMapStyle}
-    />
+          nodeColor={nodeColor}
+          maskColor={maskColor}
+        />
+      )}
+    </>
   );
 };
 

invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts

@@ -33,6 +33,7 @@ export type NodesState = {
   connectionStartParams: OnConnectStartParams | null;
   shouldShowGraphOverlay: boolean;
   shouldShowFieldTypeLegend: boolean;
+  shouldShowMinimapPanel: boolean;
   editorInstance: ReactFlowInstance | undefined;
 };
 
@@ -44,6 +45,7 @@ export const initialNodesState: NodesState = {
   connectionStartParams: null,
   shouldShowGraphOverlay: false,
   shouldShowFieldTypeLegend: false,
+  shouldShowMinimapPanel: true,
   editorInstance: undefined,
 };
 
@@ -133,6 +135,9 @@ const nodesSlice = createSlice({
     ) => {
       state.shouldShowFieldTypeLegend = action.payload;
     },
+    shouldShowMinimapPanelChanged: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowMinimapPanel = action.payload;
+    },
     nodeTemplatesBuilt: (
       state,
       action: PayloadAction<Record<string, InvocationTemplate>>
@@ -170,6 +175,7 @@ export const {
   connectionEnded,
   shouldShowGraphOverlayChanged,
   shouldShowFieldTypeLegendChanged,
+  shouldShowMinimapPanelChanged,
   nodeTemplatesBuilt,
   nodeEditorReset,
   imageCollectionFieldValueChanged,