From bd609f4e2041c5937e25ef0263965cd55a56863d Mon Sep 17 00:00:00 2001 From: lubej <9722540+lubej@users.noreply.github.com> Date: Wed, 28 Jun 2023 13:12:17 +0200 Subject: [PATCH 1/3] Remove desktop tooltips on Graph --- src/app/hooks/useGetBoundingClientRect.tsx | 18 -- src/app/pages/HomePage/Graph/Graph/index.tsx | 207 +++++------------- .../Graph/GraphTooltip/GraphTooltipMobile.tsx | 75 ------- .../index.tsx | 116 +++++----- .../HomePage/Graph/ParaTimeSelector/index.tsx | 2 +- 5 files changed, 109 insertions(+), 309 deletions(-) delete mode 100644 src/app/hooks/useGetBoundingClientRect.tsx delete mode 100644 src/app/pages/HomePage/Graph/GraphTooltip/GraphTooltipMobile.tsx rename src/app/pages/HomePage/Graph/{GraphTooltip => GraphTooltipMobile}/index.tsx (74%) diff --git a/src/app/hooks/useGetBoundingClientRect.tsx b/src/app/hooks/useGetBoundingClientRect.tsx deleted file mode 100644 index 2e79485b0..000000000 --- a/src/app/hooks/useGetBoundingClientRect.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { RefObject, useCallback, useLayoutEffect, useState } from 'react' - -export const useGetBoundingClientRect = ( - ref: RefObject, -): [DOMRect | null, () => void] => { - const [rect, setRect] = useState(null) - - const setBoundingRect = useCallback(() => { - const boundingClientRect = ref.current?.getBoundingClientRect() ?? null - setRect(boundingClientRect) - }, [ref]) - - useLayoutEffect(() => { - setBoundingRect() - }, [setBoundingRect]) - - return [rect, setBoundingRect] -} diff --git a/src/app/pages/HomePage/Graph/Graph/index.tsx b/src/app/pages/HomePage/Graph/Graph/index.tsx index 9a25e09a0..0567116e3 100644 --- a/src/app/pages/HomePage/Graph/Graph/index.tsx +++ b/src/app/pages/HomePage/Graph/Graph/index.tsx @@ -1,19 +1,9 @@ import { Link, useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { styled } from '@mui/material/styles' -import { - forwardRef, - ForwardRefRenderFunction, - memo, - MouseEventHandler, - useEffect, - useRef, - useState, -} from 'react' +import { forwardRef, ForwardRefRenderFunction, memo, MouseEventHandler, useEffect } from 'react' import { RouteUtils } from '../../../../utils/route-utils' -import { useGetBoundingClientRect } from '../../../../hooks/useGetBoundingClientRect' import { useScreenSize } from '../../../../hooks/useScreensize' -import { GraphTooltip } from '../GraphTooltip' import { Layer } from '../../../../../oasis-indexer/api' import { Network } from '../../../../../types/network' import { COLORS } from '../../../../../styles/theme/testnet/colors' @@ -98,38 +88,8 @@ const GraphCmp: ForwardRefRenderFunction = ( const { t } = useTranslation() const navigate = useNavigate() const { isMobile } = useScreenSize() - const consensusRef = useRef(null) - const consensusRefInnerCircle = useRef(null) - const emeraldRef = useRef(null) - const sapphireRef = useRef(null) - const cipherRef = useRef(null) - - const [showZoomedInLayerTooltip, setShowZoomedInLayerTooltip] = useState(null) - - const [emeraldRect, emeraldRectRefresh] = useGetBoundingClientRect(emeraldRef) - const [sapphireRect, sapphireRectRefresh] = useGetBoundingClientRect(sapphireRef) - const [cipherRect, cipherRectRefresh] = useGetBoundingClientRect(cipherRef) - const [consensusRect, consensusRectRefresh] = useGetBoundingClientRect(consensusRef) - const [consensusInnerCircleRect, consensusInnerCircleRectRefresh] = - useGetBoundingClientRect(consensusRefInnerCircle) - - useEffect(() => { - emeraldRectRefresh() - sapphireRectRefresh() - cipherRectRefresh() - consensusRectRefresh() - consensusInnerCircleRectRefresh() - }, [ - scale, - emeraldRectRefresh, - sapphireRectRefresh, - cipherRectRefresh, - consensusRectRefresh, - consensusInnerCircleRectRefresh, - ]) useEffect(() => { - setShowZoomedInLayerTooltip(null) setActiveMobileGraphTooltip(null) // should only close tooltips on isMobile change // eslint-disable-next-line react-hooks/exhaustive-deps @@ -165,18 +125,6 @@ const GraphCmp: ForwardRefRenderFunction = ( } } - const handleOpenZoomedInLayerTooltip = (layer: Layer) => { - if (selectedLayer !== layer) { - return - } - - setShowZoomedInLayerTooltip(layer) - } - - const handleCloseZoomedInLayerTooltip = () => { - setShowZoomedInLayerTooltip(null) - } - const graphThemes = { mainnet: { cipherCircle: 'url(#paint5_radial_3537_177608)', @@ -250,45 +198,28 @@ const GraphCmp: ForwardRefRenderFunction = ( fill={graphTheme.line} {...preventDoubleClick} /> - - onSelectLayer(Layer.consensus)} - cx="188.875" - cy="171.546" - r="37.3907" - transform="rotate(-90 188.875 171.546)" - fill={graphTheme.line} - {...preventDoubleClick} - /> - - - - onSelectLayer(Layer.consensus)} - cx="189.074" - cy="171.547" - r="25.5236" - transform="rotate(-90 189.074 171.547)" - fill={graphTheme.textBackground} - {...preventDoubleClick} - /> - + onSelectLayer(Layer.consensus)} + cx="188.875" + cy="171.546" + r="37.3907" + transform="rotate(-90 188.875 171.546)" + fill={graphTheme.line} + {...preventDoubleClick} + /> + onSelectLayer(Layer.consensus)} + cx="189.074" + cy="171.547" + r="25.5236" + transform="rotate(-90 189.074 171.547)" + fill={graphTheme.textBackground} + {...preventDoubleClick} + /> onSelectLayer(Layer.consensus)} @@ -384,30 +315,16 @@ const GraphCmp: ForwardRefRenderFunction = ( strokeWidth="6.16169" strokeDasharray="0.27 2.71" /> - handleOpenZoomedInLayerTooltip(Layer.emerald)} - onClose={handleCloseZoomedInLayerTooltip} - onClick={() => { - onSelectLayer(Layer.emerald) - }} - offsetWidth={emeraldRect?.width} - offsetHeight={emeraldRect?.height} - network={network} - layer={Layer.emerald} + onSelectLayer(Layer.emerald)} + filter={graphTheme.emeraldCircleFilter} + {...preventDoubleClick} > - onSelectLayer(Layer.emerald)} - filter={graphTheme.emeraldCircleFilter} - {...preventDoubleClick} - > - - - - + + + = ( fill={graphTheme.text} {...preventDoubleClick} /> - onSelectLayer(Layer.cipher)} + id={`${Layer.cipher}-circle`} + filter={graphTheme.cipherCircleFilter} + {...preventDoubleClick} > - onSelectLayer(Layer.cipher)} - id={`${Layer.cipher}-circle`} - filter={graphTheme.cipherCircleFilter} - {...preventDoubleClick} - > - - - - - + + + + = ( fill={graphTheme.text} {...preventDoubleClick} /> - handleOpenZoomedInLayerTooltip(Layer.sapphire)} - onClose={handleCloseZoomedInLayerTooltip} - onClick={() => { - onSelectLayer(Layer.sapphire) - }} - offsetWidth={sapphireRect?.width} - offsetHeight={sapphireRect?.height} - network={network} - layer={Layer.sapphire} + onSelectLayer(Layer.sapphire)} + filter={graphTheme.sapphireCircleFilter} + {...preventDoubleClick} > - onSelectLayer(Layer.sapphire)} - filter={graphTheme.sapphireCircleFilter} - {...preventDoubleClick} - > - - - - + + + ({ - position: 'fixed', - inset: 0, - backgroundColor: COLORS.black, - opacity: 0.3, - zIndex: zIndexHomePage.mobileTooltip, -})) - -export const MobileGraphTooltip = styled(Box)(({ theme }) => ({ - position: 'fixed', - bottom: 0, - left: 0, - right: 0, - height: 120, - zIndex: zIndexHomePage.mobileTooltip, - '> button': { - position: 'fixed', - right: theme.spacing(2), - bottom: 125, - }, -})) - -export interface GraphTooltipMobileProps { - network: Network - layer: Layer - onClose: (e?: MouseEvent) => void -} - -export const GraphTooltipMobile: FC = ({ network, layer, onClose }) => { - const navigate = useNavigate() - const { t } = useTranslation() - const { isMobile } = useScreenSize() - const { body, disabled, failing, enableNavigation } = useLayerTooltipMap(network)[layer] - - const navigateTo = () => { - if (!enableNavigation) { - return - } - - navigate(RouteUtils.getDashboardRoute({ network, layer })) - } - - return ( - <> - - - - - - - - - - - - - - ) -} diff --git a/src/app/pages/HomePage/Graph/GraphTooltip/index.tsx b/src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx similarity index 74% rename from src/app/pages/HomePage/Graph/GraphTooltip/index.tsx rename to src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx index a99267f3e..600dda01f 100644 --- a/src/app/pages/HomePage/Graph/GraphTooltip/index.tsx +++ b/src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx @@ -1,6 +1,5 @@ import { styled } from '@mui/material/styles' -import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip' -import { FC } from 'react' +import { FC, MouseEvent } from 'react' import Box from '@mui/material/Box' import { COLORS } from '../../../../../styles/theme/colors' import AccessTimeIcon from '@mui/icons-material/AccessTime' @@ -10,19 +9,23 @@ import ErrorIcon from '@mui/icons-material/Error' import { useScreenSize } from '../../../../hooks/useScreensize' import { useTranslation } from 'react-i18next' import { TFunction } from 'i18next' -import { RouteUtils } from '../../../../utils/route-utils' -import { useNavigate } from 'react-router-dom' import { Layer } from '../../../../../oasis-indexer/api' import { Network } from '../../../../../types/network' import { useRuntimeFreshness } from '../../../../components/OfflineBanner/hook' import { getNetworkIcons } from '../../../../utils/content' +import { useNavigate } from 'react-router-dom' +import { RouteUtils } from '../../../../utils/route-utils' +import Fade from '@mui/material/Fade' +import IconButton from '@mui/material/IconButton' +import CloseIcon from '@mui/icons-material/Close' +import { zIndexHomePage } from '../../index' -export interface GraphTooltipStyledProps { +interface GraphTooltipStyledProps { isMobile: boolean disabled?: boolean } -export const GraphTooltipStyled = styled(Box, { +const GraphTooltipStyled = styled(Box, { shouldForwardProp: (prop: PropertyKey) => !(['isMobile', 'disabled'] as (keyof GraphTooltipStyledProps)[]).includes( prop as keyof GraphTooltipStyledProps, @@ -35,11 +38,11 @@ export const GraphTooltipStyled = styled(Box, { cursor: disabled ? 'default' : 'pointer', })) -export interface GraphTooltipIconProps { +interface GraphTooltipIconProps { isMobile: boolean } -export const GraphTooltipIcon = styled(Box, { +const GraphTooltipIcon = styled(Box, { shouldForwardProp: (prop: PropertyKey) => !(['isMobile'] as (keyof GraphTooltipIconProps)[]).includes(prop as keyof GraphTooltipIconProps), })(({ isMobile }) => ({ @@ -61,7 +64,7 @@ interface GraphTooltipTextProps { isMobile: boolean } -export const GraphTooltipText = styled(Box, { +const GraphTooltipText = styled(Box, { shouldForwardProp: (prop: PropertyKey) => !(['disabled', 'isMobile'] as (keyof GraphTooltipTextProps)[]).includes( prop as keyof GraphTooltipTextProps, @@ -76,48 +79,47 @@ export const GraphTooltipText = styled(Box, { borderRadius: isMobile ? '0 12px 0 0' : '0 12px 12px 0', })) -export const GraphTooltipHeaderText = styled(Box)(() => ({ +const GraphTooltipHeaderText = styled(Box)(() => ({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flex: '0 0', })) -export const GraphTooltipDescriptionText = styled(Box)(() => ({ +const GraphTooltipDescriptionText = styled(Box)(() => ({ flex: '0 1 100%', display: 'flex', alignItems: 'center', })) -interface GraphTooltipWrapperProps extends TooltipProps { - offsetWidth?: number - offsetHeight?: number -} +const MobileBackdrop = styled(Box)(() => ({ + position: 'fixed', + inset: 0, + backgroundColor: COLORS.black, + opacity: 0.3, + zIndex: zIndexHomePage.mobileTooltip, +})) -const GraphTooltipWrapper = styled( - ({ className, children, offsetWidth: _, offsetHeight: __, ...props }: GraphTooltipWrapperProps) => ( - - {children} - - ), -)(({ offsetHeight, offsetWidth }) => ({ - [`& .${tooltipClasses.tooltip}`]: { - position: 'absolute', - width: 375, - height: 120, - borderRadius: 0, - transform: - offsetWidth && - offsetHeight && - `translate(${((offsetWidth + (120 - offsetWidth) / 2) * -1) /* center icon adjustment */ - .toFixed()}px, ${(((120 - offsetHeight) / 2) * -1).toFixed()}px) !important`, - padding: 0, - margin: '0 !important', - backgroundColor: 'transparent', - boxShadow: 'none', +const MobileGraphTooltip = styled(Box)(({ theme }) => ({ + position: 'fixed', + bottom: 0, + left: 0, + right: 0, + height: 120, + zIndex: zIndexHomePage.mobileTooltip, + '> button': { + position: 'fixed', + right: theme.spacing(2), + bottom: 125, }, })) +interface GraphTooltipMobileProps { + network: Network + layer: Layer + onClose: (e?: MouseEvent) => void +} + type TooltipInfo = { disabled: boolean failing?: boolean @@ -125,7 +127,7 @@ type TooltipInfo = { body: GraphTooltipBodyProps } -export const useLayerTooltipMap = (network: Network): Record => { +const useLayerTooltipMap = (network: Network): Record => { const isEmeraldOutOfDate = useRuntimeFreshness({ network, layer: Layer.emerald }).outOfDate const isSapphireOutOfDate = useRuntimeFreshness({ network, layer: Layer.sapphire }).outOfDate return { @@ -170,19 +172,12 @@ export const useLayerTooltipMap = (network: Network): Record } } -interface GraphTooltipProps extends Omit { - offsetWidth?: number - offsetHeight?: number - network: Network - layer: Layer -} - interface GraphTooltipHeaderProps { disabled: boolean network: Network } -export const GraphTooltipHeader: FC = ({ disabled, network }) => { +const GraphTooltipHeader: FC = ({ disabled, network }) => { const { t } = useTranslation() const { isMobile } = useScreenSize() const icons = getNetworkIcons({ size: 38 }) @@ -215,7 +210,7 @@ interface GraphTooltipBodyProps { failing?: boolean } -export const GraphTooltipBody: FC = ({ title, caption, body, disabled, failing }) => { +const GraphTooltipBody: FC = ({ title, caption, body, disabled, failing }) => { const { t } = useTranslation() const { isMobile } = useScreenSize() return ( @@ -246,8 +241,9 @@ export const GraphTooltipBody: FC = ({ title, caption, bo ) } -export const GraphTooltip: FC = ({ children, network, layer, ...restProps }) => { +export const GraphTooltipMobile: FC = ({ network, layer, onClose }) => { const navigate = useNavigate() + const { t } = useTranslation() const { isMobile } = useScreenSize() const { body, disabled, failing, enableNavigation } = useLayerTooltipMap(network)[layer] @@ -260,17 +256,19 @@ export const GraphTooltip: FC = ({ children, network, layer, } return ( - - - - - } - > - {children} - + <> + + + + + + + + + + + + + ) } diff --git a/src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx b/src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx index 0b7ff61a6..0ee16afe1 100644 --- a/src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx +++ b/src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx @@ -17,13 +17,13 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' import { GraphUtils } from '../Graph/graph-utils' import useResizeObserver from 'use-resize-observer' import HelpScreen from '../HelpScreen' -import { GraphTooltipMobile } from '../GraphTooltip/GraphTooltipMobile' import { NetworkSelector } from '../NetworkSelector' import { Layer } from '../../../../../oasis-indexer/api' import { Network } from '../../../../../types/network' import { useSearchQueryNetworkParam } from '../../../../hooks/useSearchQueryNetworkParam' import { storage } from '../../../../utils/storage' import { StorageKeys } from '../../../../../types/storage' +import { GraphTooltipMobile } from '../GraphTooltipMobile' interface ParaTimeSelectorBaseProps { disabled: boolean From d16e6dacad773c371603b816150d5b44ea9522a0 Mon Sep 17 00:00:00 2001 From: lubej <9722540+lubej@users.noreply.github.com> Date: Wed, 28 Jun 2023 13:14:10 +0200 Subject: [PATCH 2/3] Add changelog --- .changelog/612.internal.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 .changelog/612.internal.md diff --git a/.changelog/612.internal.md b/.changelog/612.internal.md new file mode 100644 index 000000000..1cfa79378 --- /dev/null +++ b/.changelog/612.internal.md @@ -0,0 +1 @@ +Remove desktop tooltips on Graph From 4a280e7443aff1b54998f55d18d3a70bfdd26336 Mon Sep 17 00:00:00 2001 From: lubej <9722540+lubej@users.noreply.github.com> Date: Wed, 28 Jun 2023 13:45:41 +0200 Subject: [PATCH 3/3] Open tooltip for disabled layer on mobile --- src/app/pages/HomePage/Graph/Graph/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/HomePage/Graph/Graph/index.tsx b/src/app/pages/HomePage/Graph/Graph/index.tsx index 0567116e3..bfd2221f1 100644 --- a/src/app/pages/HomePage/Graph/Graph/index.tsx +++ b/src/app/pages/HomePage/Graph/Graph/index.tsx @@ -107,7 +107,7 @@ const GraphCmp: ForwardRefRenderFunction = ( } const onSelectLayer = (Layer: Layer) => { - if (isMobile && !disabledMap[Layer] && isZoomedIn) { + if (isMobile && isZoomedIn) { setSelectedLayer(Layer) setActiveMobileGraphTooltip(Layer)