Fix the "zoom out" button

.changelog/1413.bugfix.md

@@ -0,0 +1 @@
+Fix the "zoom out" button

src/app/pages/HomePage/Graph/Graph/graph-utils.ts

@@ -1,9 +1,13 @@
 import { ScaleToOptions } from 'react-quick-pinch-zoom'
 import { Layer } from '../../../../../oasis-nexus/api'
 import { exhaustedTypeWarning } from '../../../../../types/errors'
+import { SelectorLayer, UniverseLayer } from '../ParaTimeSelector'
 
 export abstract class GraphUtils {
-  static getScaleTo(layer: Layer, { width, height }: { width?: number; height?: number }): ScaleToOptions {
+  static getScaleTo(
+    layer: SelectorLayer,
+    { width, height }: { width?: number; height?: number },
+  ): ScaleToOptions {
     const initialValue = {
       scale: 1,
       x: 0,
@@ -43,6 +47,8 @@ export abstract class GraphUtils {
           x: 0.65 * width,
           y: 0.65 * height,
         }
+      case UniverseLayer:
+        return initialValue
       default:
         exhaustedTypeWarning('Unexpected layer', layer)
         return initialValue

src/app/pages/HomePage/Graph/Graph/index.tsx

@@ -19,6 +19,7 @@ import { COLORS } from '../../../../../styles/theme/testnet/colors'
 import { useTranslation } from 'react-i18next'
 import { useConsensusFreshness, useRuntimeFreshness } from '../../../../components/OfflineBanner/hook'
 import { SearchScope } from '../../../../../types/searchScope'
+import { SelectorLayer } from '../ParaTimeSelector'
 
 interface GraphBaseProps {
   disabled?: boolean
@@ -29,14 +30,14 @@ interface GraphProps extends GraphBaseProps {
   network: Network
   scale: number
   // TODO: Consider moving this to a state management solution
-  selectedLayer?: Layer
+  selectedLayer?: SelectorLayer
   setSelectedLayer: (value: Layer) => void
   setActiveMobileGraphTooltip: (layer: { current: Layer | null }) => void
   isZoomedIn: boolean
 }
 
 interface GraphStyledProps extends GraphBaseProps {
-  selectedLayer?: Layer
+  selectedLayer?: SelectorLayer
   hoveredLayer: Layer | null
 }
 

src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx

@@ -19,6 +19,7 @@ import Fade from '@mui/material/Fade'
 import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
 import { zIndexHomePage } from '../../index'
+import { SelectorLayer, UniverseLayer } from '../ParaTimeSelector'
 
 interface GraphTooltipStyledProps {
   isMobile: boolean
@@ -116,7 +117,7 @@ const MobileGraphTooltip = styled(Box)(({ theme }) => ({
 
 interface GraphTooltipMobileProps {
   network: Network
-  layer: Layer
+  layer: SelectorLayer
   onClose: (e?: MouseEvent) => void
 }
 
@@ -140,7 +141,7 @@ const layerTooltipBodyCaption = (t: TFunction, layer: Layer, enabled: boolean, o
       : t('common.paraTimeOnline')
 }
 
-const useLayerTooltipMap = (network: Network): Partial<Record<Layer, TooltipInfo>> => {
+const useLayerTooltipMap = (network: Network): Partial<Record<SelectorLayer, TooltipInfo>> => {
   const isSapphireEnabled = RouteUtils.getAllLayersForNetwork(network).enabled.includes(Layer.sapphire)
   const isEmeraldEnabled = RouteUtils.getAllLayersForNetwork(network).enabled.includes(Layer.emerald)
   const isCipherEnabled = RouteUtils.getAllLayersForNetwork(network).enabled.includes(Layer.cipher)
@@ -206,7 +207,7 @@ const useLayerTooltipMap = (network: Network): Partial<Record<Layer, TooltipInfo
 interface GraphTooltipHeaderProps {
   disabled: boolean
   network: Network
-  layer: Layer
+  layer: SelectorLayer
 }
 
 const GraphTooltipHeader: FC<GraphTooltipHeaderProps> = ({ disabled, network, layer }) => {
@@ -285,7 +286,9 @@ export const GraphTooltipMobile: FC<GraphTooltipMobileProps> = ({ network, layer
     if (disabled) {
       return
     }
-
+    if (layer === UniverseLayer) {
+      return
+    }
     navigate(RouteUtils.getDashboardRoute({ network, layer }))
   }
 

src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx

@@ -160,6 +160,12 @@ interface ParaTimeSelectorProps extends ParaTimeSelectorBaseProps {
 
 const localStore = storage()
 
+// This is a special layer used to indicate that we should zoom out,
+// and see the whole universe.
+export const UniverseLayer = 'Universe'
+
+export type SelectorLayer = Layer | typeof UniverseLayer
+
 const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({
   disabled,
   step,
@@ -177,10 +183,12 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({
   const { network, setNetwork } = useSearchQueryNetworkParam()
 
   // Using object here to force side effect trigger when setting to the same layer
-  const [selectedLayer, setSelectedLayer] = useState<{ current: Layer }>()
-  const [activeMobileGraphTooltip, setActiveMobileGraphTooltip] = useState<{ current: Layer | null }>({
-    current: null,
-  })
+  const [selectedLayer, setSelectedLayer] = useState<{ current: SelectorLayer }>()
+  const [activeMobileGraphTooltip, setActiveMobileGraphTooltip] = useState<{ current: SelectorLayer | null }>(
+    {
+      current: null,
+    },
+  )
 
   const [scale, setScale] = useState<number>(1)
 
@@ -212,7 +220,7 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({
   }
 
   const onZoomOutClick = () => {
-    setSelectedLayer({ current: Layer.consensus })
+    setSelectedLayer({ current: UniverseLayer })
   }
 
   const onPinchZoom = ({ x, y, scale }: UpdateAction) => {