From 707fce2224865e5596abf2e402a5be872536bf9e Mon Sep 17 00:00:00 2001
From: lubej <9722540+lubej@users.noreply.github.com>
Date: Wed, 19 Jul 2023 13:12:24 +0200
Subject: [PATCH] Fix Graph zoomed in value

---
 .changelog/759.bugfix.md                          |  1 +
 .../HomePage/Graph/ParaTimeSelector/index.tsx     | 15 +++++++++------
 src/app/pages/HomePage/index.tsx                  |  1 +
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changelog/759.bugfix.md

diff --git a/.changelog/759.bugfix.md b/.changelog/759.bugfix.md
new file mode 100644
index 000000000..96d0e94c2
--- /dev/null
+++ b/.changelog/759.bugfix.md
@@ -0,0 +1 @@
+Fix Graph zoomed in value
diff --git a/src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx b/src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx
index b5c7fee16..3e1daaed8 100644
--- a/src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx
+++ b/src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx
@@ -126,6 +126,7 @@ const ZoomOutBtnFade = styled(Fade)(() => ({
   transitionDelay: '500ms !important',
 }))
 
+// border affecting scale (quick-pinch-zoom)
 const QuickPinchZoomOuter = styled('div')(({ theme }) => ({
   '> div': {
     position: 'absolute',
@@ -152,6 +153,7 @@ interface ParaTimeSelectorProps extends ParaTimeSelectorBaseProps {
   step: ParaTimeSelectorStep
   setStep: (value: ParaTimeSelectorStep) => void
   showInfoScreen: boolean
+  graphZoomedIn: boolean
   onGraphZoomedIn: (isGraphZoomedIn: boolean) => void
 }
 
@@ -162,6 +164,7 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({
   step,
   setStep,
   showInfoScreen,
+  graphZoomedIn,
   onGraphZoomedIn,
 }) => {
   const graphRef = useRef<SVGSVGElement & HTMLElement>(null)
@@ -227,12 +230,12 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({
     }
   }
 
-  // true when scale larger than initial zoom
-  const isZoomedIn = scale > 1.07
-
   useEffect(() => {
+    // true when scale larger than "safe" zoom, due to viewport
+    const isZoomedIn = scale > 1.5
+
     onGraphZoomedIn(isZoomedIn)
-  }, [isZoomedIn, onGraphZoomedIn])
+  }, [scale, onGraphZoomedIn])
 
   return (
     <>
@@ -256,13 +259,13 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({
                   setSelectedLayer={(layer: Layer) => setSelectedLayer({ current: layer })}
                   scale={scale}
                   setActiveMobileGraphTooltip={setActiveMobileGraphTooltip}
-                  isZoomedIn={isZoomedIn}
+                  isZoomedIn={graphZoomedIn}
                 />
               </QuickPinchZoomInner>
             </QuickPinchZoom>
           </QuickPinchZoomOuter>
           {!isMobile && (
-            <ZoomOutBtnFade in={isZoomedIn}>
+            <ZoomOutBtnFade in={graphZoomedIn}>
               <ZoomOutBtn onClick={onZoomOutClick} disabled={disabled}>
                 {t('home.zoomOutBtnText')}
               </ZoomOutBtn>
diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx
index dd3644d05..3c5dfa606 100644
--- a/src/app/pages/HomePage/index.tsx
+++ b/src/app/pages/HomePage/index.tsx
@@ -175,6 +175,7 @@ export const HomePage: FC = () => {
                 setStep={setStep}
                 disabled={searchHasFocus}
                 showInfoScreen={showInfoScreen}
+                graphZoomedIn={isGraphZoomedIn}
                 onGraphZoomedIn={setIsGraphZoomedIn}
               />
             </Box>