From 43ef05f0f157c18fe2b1504123014bde452155f3 Mon Sep 17 00:00:00 2001
From: LinaYahya <linaebe0@gmail.com>
Date: Tue, 23 Apr 2024 15:41:49 +0200
Subject: [PATCH] fix: fix resizing loop of analytics view

---
 src/components/Analytics/AnalyticsMenu.tsx    | 21 ++++---------------
 .../navigation/AutoScrollableMenu.tsx         |  9 ++++++++
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/Analytics/AnalyticsMenu.tsx b/src/components/Analytics/AnalyticsMenu.tsx
index cb58ed8d..6f275361 100644
--- a/src/components/Analytics/AnalyticsMenu.tsx
+++ b/src/components/Analytics/AnalyticsMenu.tsx
@@ -22,10 +22,6 @@ import {
   buildAnalyticsDetailedQuestionTabMenuCy,
 } from '../../config/selectors';
 import { useElementWidth } from '../../hooks/useElementWidth';
-import {
-  useMaxAvailableHeightInWindow,
-  useMaxAvailableHeightWithParentHeight,
-} from '../../hooks/useMaxAvailableHeight';
 import { QUIZ_TRANSLATIONS } from '../../langs/constants';
 import { getFirstOrUndefined } from '../../utils/array';
 import { QuizContext } from '../context/QuizContext';
@@ -62,13 +58,8 @@ const AnalyticsMenu = (): JSX.Element => {
   const chartContainerRef = useRef(null);
   const stackElem = useRef(null);
   const sideMenuElem = useRef(null);
-
   const chartTabs = useRef(null);
-  const maxResultViewHeight = useMaxAvailableHeightInWindow(null);
-  const maxHeightScrollableMenu = useMaxAvailableHeightWithParentHeight(
-    maxResultViewHeight,
-    chartTabs.current
-  );
+
   const [tab, setTab] = useState(0);
 
   const questionById = useMemo(
@@ -186,14 +177,13 @@ const AnalyticsMenu = (): JSX.Element => {
 
   return order.length > 0 ? (
     responses && nValidResponses && nValidResponses > 0 ? (
-      <Box data-cy={ANALYTICS_CONTAINER_CY} sx={{ height: '100%' }}>
-        <Stack direction="row" ref={stackElem} sx={{ height: '100%' }}>
+      <Box data-cy={ANALYTICS_CONTAINER_CY}>
+        <Stack direction="row" ref={stackElem}>
           <Box
             ref={sideMenuElem}
             sx={{
               minWidth: '8em',
               maxWidth: '12em',
-              maxHeight: maxResultViewHeight,
             }}
           >
             <Box
@@ -201,8 +191,6 @@ const AnalyticsMenu = (): JSX.Element => {
                 borderBottom: 1,
                 borderColor: 'divider',
                 mb: 4,
-                maxHeight: maxResultViewHeight / 2,
-                overflow: 'auto',
               }}
               ref={chartTabs}
             >
@@ -235,7 +223,7 @@ const AnalyticsMenu = (): JSX.Element => {
                 })}
               </Tabs>
             </Box>
-            <Box sx={{ overflow: 'auto', maxHeight: maxHeightScrollableMenu }}>
+            <Box>
               <AutoScrollableMenu
                 links={charts}
                 elemRefs={chartRefs}
@@ -248,7 +236,6 @@ const AnalyticsMenu = (): JSX.Element => {
             sx={{
               overflow: 'auto',
               width: '100%',
-              height: maxResultViewHeight,
               scrollBehavior: 'smooth',
             }}
             ref={chartContainerRef}
diff --git a/src/components/navigation/AutoScrollableMenu.tsx b/src/components/navigation/AutoScrollableMenu.tsx
index 1aaa5383..907491a3 100644
--- a/src/components/navigation/AutoScrollableMenu.tsx
+++ b/src/components/navigation/AutoScrollableMenu.tsx
@@ -85,6 +85,7 @@ const AutoScrollableMenu = ({
     triggerVal
   );
 
+  console.log(highlightedLink, 'higlitedlink');
   /**
    * Helper function to handle the click on a link
    *
@@ -94,6 +95,7 @@ const AutoScrollableMenu = ({
    * @param {string} link The label of the question we clicked on
    */
   const handleLinkClicked = (link: string) => {
+    console.log(link, 'link');
     clickOnLink(link);
   };
 
@@ -115,6 +117,13 @@ const AutoScrollableMenu = ({
     }
   }, [initiallyClickedId, clickOnLink]);
 
+  useEffect(() => {
+    const el = document.getElementById(highlightedLink);
+    if (el) {
+      el.scrollIntoView(true);
+    }
+  }, [highlightedLink]);
+
   return (
     <Stack data-cy={AUTO_SCROLLABLE_MENU_LINK_LIST_CY}>
       {links?.map(({ label, id, link }) => {