Update ViewportControls.tsx

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

@@ -2,9 +2,18 @@ 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 } from 'react-icons/fa';
+import {
+  FaCode,
+  FaExpand,
+  FaMinus,
+  FaPlus,
+  FaGripVertical,
+} from 'react-icons/fa';
 import { useReactFlow } from 'reactflow';
-import { shouldShowGraphOverlayChanged } from '../store/nodesSlice';
+import {
+  shouldShowGraphOverlayChanged,
+  shouldShowFieldTypeLegendChanged,
+} from '../store/nodesSlice';
 
 const ViewportControls = () => {
   const { zoomIn, zoomOut, fitView } = useReactFlow();
@@ -12,6 +21,9 @@ const ViewportControls = () => {
   const shouldShowGraphOverlay = useAppSelector(
     (state) => state.nodes.shouldShowGraphOverlay
   );
+  const shouldShowFieldTypeLegend = useAppSelector(
+    (state) => state.nodes.shouldShowFieldTypeLegend
+  );
 
   const handleClickedZoomIn = useCallback(() => {
     zoomIn();
@@ -29,6 +41,10 @@ const ViewportControls = () => {
     dispatch(shouldShowGraphOverlayChanged(!shouldShowGraphOverlay));
   }, [shouldShowGraphOverlay, dispatch]);
 
+  const handleClickedToggleFieldTypeLegend = useCallback(() => {
+    dispatch(shouldShowFieldTypeLegendChanged(!shouldShowFieldTypeLegend));
+  }, [shouldShowFieldTypeLegend, dispatch]);
+
   return (
     <ButtonGroup isAttached orientation="vertical">
       <IAIIconButton
@@ -52,6 +68,12 @@ const ViewportControls = () => {
         aria-label="Show/Hide Graph"
         icon={<FaCode />}
       />
+      <IAIIconButton
+        isChecked={shouldShowFieldTypeLegend}
+        onClick={handleClickedToggleFieldTypeLegend}
+        aria-label="Show/Hide Field Type Legend"
+        icon={<FaGripVertical />}
+      />
     </ButtonGroup>
   );
 };