From beb15e0a5ffbe29fd9f7e6ebed4cbe3d96374814 Mon Sep 17 00:00:00 2001
From: NIDHI TANDON <nidhi-tandon@users.noreply.github.com>
Date: Wed, 14 Jul 2021 12:35:40 +0530
Subject: [PATCH] feat(FE:TraceGanttChart): scroll to selected row on page load
 (#213)

* feat(FE:TraceGanttChart): scroll to selected scroll on page load

* refactor: update handleScroll

* refactor(traceGanttChart): scroll on selected row
---
 .../TraceGanttChart/TraceGanttChart.tsx       | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx b/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx
index 7197a9cd04..b79bc11938 100644
--- a/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx
+++ b/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx
@@ -57,7 +57,7 @@ const TraceGanttChart = ({
 			}
 			setTabsContainerWidth(tabsContainer?.offsetWidth);
 		}
-		// handleScroll(selectedSpan?.id);
+		handleScroll(selectedSpan?.id);
 	}, [sortedTreeData, treeData, clickedSpan]);
 
 	useEffect(() => {
@@ -229,7 +229,7 @@ const TraceGanttChart = ({
 	};
 
 	const handleResetFocus = () => {
-		let rows = document.querySelectorAll("#collapsable table tbody tr");
+		const rows = document.querySelectorAll("#collapsable table tbody tr");
 		Array.from(rows).map((row) => {
 			row.classList.remove("hide");
 		});
@@ -237,16 +237,13 @@ const TraceGanttChart = ({
 		resetZoom(true);
 	};
 
-	const handleScroll = (id) => {
-		let rows = document.querySelectorAll("#collapsable table tbody tr");
-		const table = document.querySelectorAll("#collapsable table");
-		Array.from(rows).map((row) => {
-			let attribKey = row.getAttribute("data-row-key");
-			if (id === attribKey) {
-				let scrollValue = row.offsetTop;
-				table[1].scrollTop = scrollValue;
-			}
-		});
+	const handleScroll = (id: string): void => {
+		if (!isEmpty(id)) {
+			const selectedRow = document.querySelectorAll<HTMLElement>(
+				`[data-row-key='${id}']`,
+			);
+			selectedRow?.[0]?.scrollIntoView();
+		}
 	};
 
 	const rowSelection = {