fix(FE): onFocusSelected bug is resolved (#258)

* fix: onFocusSelected bug is resolved

* dependecies array is updated

* updated the dependency array

* fix: TraceGantt chart is updated

Co-authored-by: Ankit Nayan <ankit@signoz.io>

frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx

@@ -20,7 +20,7 @@ interface TraceGanttChartProps {
 	treeData: pushDStree[];
 	clickedSpan: pushDStree;
 	selectedSpan: pushDStree;
-	resetZoom: () => {};
+	resetZoom: (value: boolean) => {};
 	setSpanTagsInfo: (p: { data: any }) => {};
 }
 
@@ -32,14 +32,16 @@ const TraceGanttChart = ({
 	setSpanTagsInfo,
 }: TraceGanttChartProps) => {
 	let checkStrictly = true;
-	const [selectedRows, setSelectedRows] = useState([]);
+	const [selectedRows, setSelectedRows] = useState<string[]>([]);
 	const [clickedSpanData, setClickedSpanData] = useState(clickedSpan);
-	const [defaultExpandedRows, setDefaultExpandedRows] = useState([]);
+	const [defaultExpandedRows, setDefaultExpandedRows] = useState<string[]>([]);
 	const [sortedTreeData, setSortedTreeData] = useState(treeData);
 	const [isReset, setIsReset] = useState(false);
 	const [tabsContainerWidth, setTabsContainerWidth] = useState(0);
 	const tableRef = useRef("");
-	let tabsContainer = document.querySelector("#collapsable .ant-tabs-nav-list");
+	let tabsContainer = document.querySelector<HTMLElement>(
+		"#collapsable .ant-tabs-nav-list",
+	);
 
 	let tabs = document.querySelectorAll("#collapsable .ant-tabs-tab");
 
@@ -55,7 +57,9 @@ const TraceGanttChart = ({
 			if (clickedSpan) {
 				setClickedSpanData(clickedSpan);
 			}
-			setTabsContainerWidth(tabsContainer?.offsetWidth);
+			if (tabsContainer) {
+				setTabsContainerWidth(tabsContainer.offsetWidth);
+			}
 		}
 		handleScroll(selectedSpan?.id);
 	}, [sortedTreeData, treeData, clickedSpan]);
@@ -69,12 +73,13 @@ const TraceGanttChart = ({
 		) {
 			setSelectedRows([clickedSpan.id]);
 			getParentKeys(clickedSpan);
-			handleFocusOnSelectedPath("", [clickedSpan.id], clickedSpan);
+			handleFocusOnSelectedPath("", [clickedSpan.id]);
 		}
 	}, [clickedSpan, selectedRows, isReset, clickedSpanData]);
 
-	let parentKeys = [];
-	let childrenKeys = [];
+	let parentKeys: string[] = [];
+	let childrenKeys: string[] = [];
+
 	const getParentKeys = (obj) => {
 		if (has(obj, "parent")) {
 			parentKeys.push(obj.parent.id);
@@ -82,7 +87,7 @@ const TraceGanttChart = ({
 		}
 	};
 
-	const getChildrenKeys = (obj) => {
+	const getChildrenKeys = (obj: pushDStree) => {
 		if (has(obj, "children")) {
 			childrenKeys.push(obj.id);
 			if (!isEmpty(obj.children)) {
@@ -105,7 +110,7 @@ const TraceGanttChart = ({
 			setDefaultExpandedRows([treeData?.[0]?.id]);
 			// /.setSpanTagsInfo({data: treeData?.[0]})
 		}
-	}, [selectedSpan, treeData]);
+	}, [selectedSpan, treeData, clickedSpan]);
 
 	const getMaxEndTime = (treeData) => {
 		if (treeData.length > 0) {
@@ -169,7 +174,7 @@ const TraceGanttChart = ({
 				}
 
 				let paddingLeft = 0;
-				let startTime = parseFloat(record.startTime);
+				let startTime = parseFloat(record.startTime.toString());
 				let duration = parseFloat((record.time / 1000000).toFixed(2));
 				paddingLeft = parseInt(
 					getPaddingLeft(
@@ -200,7 +205,17 @@ const TraceGanttChart = ({
 
 	const handleFocusOnSelectedPath = (event, selectedRowsList = selectedRows) => {
 		if (!isEmpty(selectedRowsList)) {
-			let node = {};
+			// initializing the node
+			let node: pushDStree = {
+				children: [],
+				id: "",
+				name: "",
+				startTime: 0,
+				tags: [],
+				time: 0,
+				value: 0,
+			};
+
 			traverseTreeData(treeData, (item: pushDStree) => {
 				if (item.id === selectedRowsList[0]) {
 					node = item;
@@ -214,13 +229,20 @@ const TraceGanttChart = ({
 				console.error("Node not found in Tree Data.");
 			}
 
+			// get the parent of the node
 			getParentKeys(node);
+
+			// get the children of the node
 			getChildrenKeys(node);
 
 			let rows = document.querySelectorAll("#collapsable table tbody tr");
-			Array.from(rows).map((row) => {
-				let attribKey = row.getAttribute("data-row-key");
-				if (!selectedRowsList.includes(attribKey)) {
+			rows.forEach((row) => {
+				let attribKey = row.getAttribute("data-row-key") || "";
+				if (
+					!isEmpty(attribKey) &&
+					!selectedRowsList.includes(attribKey) &&
+					!childrenKeys.includes(attribKey)
+				) {
 					row.classList.add("hide");
 				}
 			});
@@ -230,7 +252,7 @@ const TraceGanttChart = ({
 
 	const handleResetFocus = () => {
 		const rows = document.querySelectorAll("#collapsable table tbody tr");
-		Array.from(rows).map((row) => {
+		rows.forEach((row) => {
 			row.classList.remove("hide");
 		});
 
@@ -256,13 +278,13 @@ const TraceGanttChart = ({
 				setIsReset(false);
 			}
 		},
-		onSelect: (record) => {
+		onSelect: (record: pushDStree) => {
 			handleRowOnClick(record);
 		},
 		selectedRowKeys: selectedRows,
 	};
 
-	const handleRowOnClick = (record) => {
+	const handleRowOnClick = (record: pushDStree) => {
 		let node = {};
 		traverseTreeData(treeData, (item: pushDStree) => {
 			if (item.id === record.id) {
@@ -286,7 +308,7 @@ const TraceGanttChart = ({
 		setSelectedRows([record.id]);
 	};
 
-	const handleOnExpandedRowsChange = (item) => {
+	const handleOnExpandedRowsChange = (item: string[]) => {
 		setDefaultExpandedRows(item);
 	};
 
@@ -303,8 +325,7 @@ const TraceGanttChart = ({
 					>
 						<Col>
 							<StyledButton onClick={handleFocusOnSelectedPath}>
-								{" "}
-								Focus on selected path{" "}
+								Focus on selected path
 							</StyledButton>
 						</Col>
 						<Col>
@@ -320,14 +341,18 @@ const TraceGanttChart = ({
 						dataSource={sortedTreeData}
 						rowKey="id"
 						sticky={true}
-						onRow={(record, rowIndex) => {
+						onRow={(record) => {
 							return {
-								onClick: () => handleRowOnClick(record, rowIndex), // click row
+								onClick: () => handleRowOnClick(record), // click row
 							};
 						}}
-						expandedRowKeys={defaultExpandedRows}
-						onExpandedRowsChange={handleOnExpandedRowsChange}
+						onExpandedRowsChange={(keys) =>
+							handleOnExpandedRowsChange(keys.map((e) => e.toString()))
+						}
 						pagination={false}
+						expandable={{
+							expandedRowKeys: defaultExpandedRows,
+						}}
 						scroll={{ y: 540 }}
 						rowClassName="row-styles"
 						filterMultiple={false}