Merge pull request #1413 from oasisprotocol/csillag/fix-zoom-out-button

Fix the "zoom out" button
oasisprotocol · May 16, 2024 · 4f656d6 · 4f656d6
2 parents 488fc17 + 29f6c82
commit 4f656d6
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 62 deletions.
diff --git a/.changelog/1413.bugfix.md b/.changelog/1413.bugfix.md
@@ -0,0 +1 @@
+Fix the "zoom out" button
diff --git a/src/app/pages/HomePage/Graph/Graph/graph-utils.ts b/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 { SelectorArea, UniverseArea } from '../ParaTimeSelector'
 
 export abstract class GraphUtils {
-  static getScaleTo(layer: Layer, { width, height }: { width?: number; height?: number }): ScaleToOptions {
+  static getScaleTo(
+    area: SelectorArea,
+    { width, height }: { width?: number; height?: number },
+  ): ScaleToOptions {
     const initialValue = {
       scale: 1,
       x: 0,
@@ -14,7 +18,7 @@ export abstract class GraphUtils {
       return initialValue
     }
 
-    switch (layer) {
+    switch (area) {
       case Layer.emerald:
         return {
           scale: 2.4,
@@ -27,10 +31,6 @@ export abstract class GraphUtils {
           x: 1.2 * width,
           y: 0.7 * height,
         }
-      case Layer.pontusx:
-        // TODO: update this if/when we want to display this layer
-        // We meed this case here since this switch/case is declared to be exhaustive.
-        return initialValue
       case Layer.sapphire:
         return {
           scale: 2.4,
@@ -43,8 +43,10 @@ export abstract class GraphUtils {
           x: 0.65 * width,
           y: 0.65 * height,
         }
+      case UniverseArea:
+        return initialValue
       default:
-        exhaustedTypeWarning('Unexpected layer', layer)
+        exhaustedTypeWarning('Unexpected area', area)
         return initialValue
     }
   }

diff --git a/src/app/pages/HomePage/Graph/Graph/index.tsx b/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 { SelectorArea, UniverseArea } from '../ParaTimeSelector'
 
 interface GraphBaseProps {
   disabled?: boolean
@@ -29,23 +30,23 @@ interface GraphProps extends GraphBaseProps {
   network: Network
   scale: number
   // TODO: Consider moving this to a state management solution
-  selectedLayer?: Layer
-  setSelectedLayer: (value: Layer) => void
-  setActiveMobileGraphTooltip: (layer: { current: Layer | null }) => void
+  selectedArea?: SelectorArea
+  setSelectedArea: (value: SelectorArea) => void
+  setActiveMobileGraphTooltip: (area: { current: SelectorArea | null }) => void
   isZoomedIn: boolean
 }
 
 interface GraphStyledProps extends GraphBaseProps {
-  selectedLayer?: Layer
+  selectedArea?: SelectorArea
   hoveredLayer: Layer | null
 }
 
 const GraphStyled = styled('svg', {
   shouldForwardProp: prop =>
-    !(['disabled', 'transparent', 'selectedLayer', 'hoveredLayer'] as (keyof GraphStyledProps)[]).includes(
+    !(['disabled', 'transparent', 'selectedArea', 'hoveredLayer'] as (keyof GraphStyledProps)[]).includes(
       prop as keyof GraphStyledProps,
     ),
-})<GraphStyledProps>(({ theme, disabled, transparent, selectedLayer, hoveredLayer }) => ({
+})<GraphStyledProps>(({ theme, disabled, transparent, selectedArea, hoveredLayer }) => ({
   position: 'absolute',
   left: '50%',
   top: '45%',
@@ -66,9 +67,9 @@ const GraphStyled = styled('svg', {
     cursor: 'pointer',
   },
   path: {
-    ...(selectedLayer && selectedLayer !== Layer.consensus
+    ...(selectedArea && selectedArea !== Layer.consensus && selectedArea !== UniverseArea
       ? {
-          [`&:not(.${selectedLayer})`]: {
+          [`&:not(.${selectedArea})`]: {
             opacity: 0.5,
           },
           '&.status-icon': {
@@ -84,9 +85,9 @@ const GraphStyled = styled('svg', {
     'ellipse:last-child': {
       display: 'none',
     },
-    ...(selectedLayer && selectedLayer !== Layer.consensus
+    ...(selectedArea && selectedArea !== Layer.consensus && selectedArea !== UniverseArea
       ? {
-          [`&:not([id=${selectedLayer}-circle])`]: {
+          [`&:not([id=${selectedArea}-circle])`]: {
             opacity: 0.5,
           },
         }
@@ -260,9 +261,9 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
   {
     disabled = false,
     transparent = false,
-    selectedLayer,
+    selectedArea,
     network,
-    setSelectedLayer,
+    setSelectedArea,
     scale,
     setActiveMobileGraphTooltip,
     isZoomedIn,
@@ -293,7 +294,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
     return !RouteUtils.getAllLayersForNetwork(network).enabled.includes(Layer)
   }
 
-  const disabledMap: Partial<Record<Layer, boolean>> = {
+  const disabledMap: Partial<Record<SelectorArea, boolean>> = {
     [Layer.emerald]: isLayerDisabled(Layer.emerald),
     [Layer.consensus]: isLayerDisabled(Layer.consensus),
     [Layer.cipher]: isLayerDisabled(Layer.cipher),
@@ -302,25 +303,26 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
 
   const enabledLayers: Layer[] = useMemo(() => RouteUtils.getAllLayersForNetwork(network).enabled, [network])
 
-  const onSelectLayer = (layer: Layer) => {
-    if (isMobile && (isZoomedIn || layer === Layer.consensus)) {
-      setSelectedLayer(layer)
-      setActiveMobileGraphTooltip({ current: layer })
+  const onSelectArea = (area: SelectorArea) => {
+    if (isMobile && (isZoomedIn || area === Layer.consensus)) {
+      setSelectedArea(area)
+      setActiveMobileGraphTooltip({ current: area })
 
       return
     }
 
     if (
-      ((!isMobile && !isZoomedIn) || layer === selectedLayer) &&
-      RouteUtils.getAllLayersForNetwork(network).enabled.includes(layer)
+      ((!isMobile && !isZoomedIn) || area === selectedArea) &&
+      area !== UniverseArea &&
+      RouteUtils.getAllLayersForNetwork(network).enabled.includes(area)
     ) {
-      navigate(RouteUtils.getDashboardRoute({ network, layer }))
+      navigate(RouteUtils.getDashboardRoute({ network, layer: area }))
 
       return
     }
 
-    if (!disabledMap[layer]) {
-      setSelectedLayer(layer)
+    if (!disabledMap[area]) {
+      setSelectedArea(area)
     }
   }
 
@@ -392,7 +394,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
         preserveAspectRatio="xMidYMid slice"
         ref={ref}
         className={network}
-        selectedLayer={selectedLayer}
+        selectedArea={selectedArea}
         hoveredLayer={hoveredLayer}
       >
         <path
@@ -539,7 +541,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
         <g
           id={`${Layer.emerald}-circle`}
           aria-disabled={disabledMap[Layer.emerald]}
-          onClick={() => onSelectLayer(Layer.emerald)}
+          onClick={() => onSelectArea(Layer.emerald)}
           filter={graphTheme.emeraldCircleFilter}
           {...preventDoubleClick}
           {...handleHover(Layer.emerald, setHoveredLayer)}
@@ -560,7 +562,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
         <g
           id={`${Layer.emerald}-label`}
           aria-disabled={disabledMap[Layer.emerald]}
-          onClick={() => onSelectLayer(Layer.emerald)}
+          onClick={() => onSelectArea(Layer.emerald)}
           {...preventDoubleClick}
           {...handleHover(Layer.emerald, setHoveredLayer)}
         >
@@ -596,7 +598,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
         <g
           id={`${Layer.sapphire}-circle`}
           aria-disabled={disabledMap[Layer.sapphire]}
-          onClick={() => onSelectLayer(Layer.sapphire)}
+          onClick={() => onSelectArea(Layer.sapphire)}
           filter={graphTheme.sapphireCircleFilter}
           {...preventDoubleClick}
           {...handleHover(Layer.sapphire, setHoveredLayer)}
@@ -617,7 +619,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
         <g
           id={`${Layer.sapphire}-label`}
           aria-disabled={disabledMap[Layer.sapphire]}
-          onClick={() => onSelectLayer(Layer.sapphire)}
+          onClick={() => onSelectArea(Layer.sapphire)}
           {...preventDoubleClick}
           {...handleHover(Layer.sapphire, setHoveredLayer)}
         >
@@ -651,7 +653,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
         </g>
         <g
           id={`${Layer.consensus}-circle`}
-          onClick={() => onSelectLayer(Layer.consensus)}
+          onClick={() => onSelectArea(Layer.consensus)}
           aria-disabled={disabledMap[Layer.consensus]}
           {...handleHover(Layer.consensus, setHoveredLayer)}
         >
@@ -694,7 +696,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
         <g
           id={`${Layer.consensus}-label`}
           aria-disabled={disabledMap[Layer.consensus]}
-          onClick={() => onSelectLayer(Layer.consensus)}
+          onClick={() => onSelectArea(Layer.consensus)}
           {...preventDoubleClick}
           {...handleHover(Layer.consensus, setHoveredLayer)}
         >
@@ -729,7 +731,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
         <g
           filter={graphTheme.cipherCircleFilter}
           aria-disabled={disabledMap[Layer.cipher]}
-          onClick={() => onSelectLayer(Layer.cipher)}
+          onClick={() => onSelectArea(Layer.cipher)}
           id={`${Layer.cipher}-circle`}
           {...preventDoubleClick}
           {...handleHover(Layer.cipher, setHoveredLayer)}
@@ -750,7 +752,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
         <g
           id={`${Layer.cipher}-label`}
           aria-disabled={disabledMap[Layer.cipher]}
-          onClick={() => onSelectLayer(Layer.cipher)}
+          onClick={() => onSelectArea(Layer.cipher)}
           {...preventDoubleClick}
           {...handleHover(Layer.cipher, setHoveredLayer)}
         >

diff --git a/src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx b/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 { SelectorArea, UniverseArea } from '../ParaTimeSelector'
 
 interface GraphTooltipStyledProps {
   isMobile: boolean
@@ -116,7 +117,7 @@ const MobileGraphTooltip = styled(Box)(({ theme }) => ({
 
 interface GraphTooltipMobileProps {
   network: Network
-  layer: Layer
+  area: SelectorArea
   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 useAreaTooltipMap = (network: Network): Partial<Record<SelectorArea, 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,10 +207,10 @@ const useLayerTooltipMap = (network: Network): Partial<Record<Layer, TooltipInfo
 interface GraphTooltipHeaderProps {
   disabled: boolean
   network: Network
-  layer: Layer
+  area: SelectorArea
 }
 
-const GraphTooltipHeader: FC<GraphTooltipHeaderProps> = ({ disabled, network, layer }) => {
+const GraphTooltipHeader: FC<GraphTooltipHeaderProps> = ({ disabled, network, area }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   const icons = getNetworkIcons({ size: 38 })
@@ -226,7 +227,7 @@ const GraphTooltipHeader: FC<GraphTooltipHeaderProps> = ({ disabled, network, la
             color={COLORS.white}
             sx={{ fontSize: '10px', position: 'absolute', bottom: '10px' }}
           >
-            {layer === Layer.consensus ? t('home.tooltip.openConsensus') : t('home.tooltip.openParatime')}
+            {area === Layer.consensus ? t('home.tooltip.openConsensus') : t('home.tooltip.openParatime')}
           </Typography>
         </>
       )}
@@ -273,20 +274,22 @@ const GraphTooltipBody: FC<GraphTooltipBodyProps> = ({ title, caption, body, dis
   )
 }
 
-export const GraphTooltipMobile: FC<GraphTooltipMobileProps> = ({ network, layer, onClose }) => {
+export const GraphTooltipMobile: FC<GraphTooltipMobileProps> = ({ network, area, onClose }) => {
   const navigate = useNavigate()
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
-  const tooltip = useLayerTooltipMap(network)[layer]
+  const tooltip = useAreaTooltipMap(network)[area]
   if (!tooltip) return
   const { body, disabled, failing } = tooltip
 
   const navigateTo = () => {
     if (disabled) {
       return
     }
-
-    navigate(RouteUtils.getDashboardRoute({ network, layer }))
+    if (area === UniverseArea) {
+      return
+    }
+    navigate(RouteUtils.getDashboardRoute({ network, layer: area }))
   }
 
   return (
@@ -298,7 +301,7 @@ export const GraphTooltipMobile: FC<GraphTooltipMobileProps> = ({ network, layer
             <CloseIcon fontSize="medium" sx={{ color: COLORS.white }} aria-label={t('home.tooltip.close')} />
           </IconButton>
           <GraphTooltipStyled disabled={disabled} isMobile={isMobile} onClick={navigateTo}>
-            <GraphTooltipHeader disabled={disabled} network={network} layer={layer} />
+            <GraphTooltipHeader disabled={disabled} network={network} area={area} />
             <GraphTooltipBody {...body} disabled={disabled} failing={failing} />
           </GraphTooltipStyled>
         </MobileGraphTooltip>