diff --git a/invokeai/frontend/web/src/features/nodes/components/ViewportControls.tsx b/invokeai/frontend/web/src/features/nodes/components/ViewportControls.tsx index 9044c392a9..0699d000e9 100644 --- a/invokeai/frontend/web/src/features/nodes/components/ViewportControls.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/ViewportControls.tsx @@ -1,4 +1,4 @@ -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'; @@ -11,6 +11,7 @@ import { FaMapMarkerAlt, } from 'react-icons/fa'; import { useReactFlow } from 'reactflow'; +import { useTranslation } from 'react-i18next'; import { shouldShowGraphOverlayChanged, shouldShowFieldTypeLegendChanged, @@ -18,6 +19,7 @@ import { } from '../store/nodesSlice'; const ViewportControls = () => { + const { t } = useTranslation(); const { zoomIn, zoomOut, fitView } = useReactFlow(); const dispatch = useAppDispatch(); const shouldShowGraphOverlay = useAppSelector( @@ -26,7 +28,6 @@ const ViewportControls = () => { const shouldShowFieldTypeLegend = useAppSelector( (state) => state.nodes.shouldShowFieldTypeLegend ); - const shouldShowMinimapPanel = useAppSelector( (state) => state.nodes.shouldShowMinimapPanel ); @@ -57,39 +58,54 @@ const ViewportControls = () => { return ( - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> + + } /> + + + } /> + + + } /> + + + } + /> + + + } + /> + + + } + /> + ); };