From 4817a17320e1aefc6deaf8a7f38e2d0c55fd7ac0 Mon Sep 17 00:00:00 2001 From: palash-signoz <88981777+palash-signoz@users.noreply.github.com> Date: Thu, 19 Aug 2021 23:13:16 +0530 Subject: [PATCH] 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 --- .../TraceGanttChart/TraceGanttChart.tsx | 75 ++++++++++++------- 1 file changed, 50 insertions(+), 25 deletions(-) diff --git a/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx b/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx index 2820c54300..7e44807c1e 100644 --- a/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx +++ b/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([]); const [clickedSpanData, setClickedSpanData] = useState(clickedSpan); - const [defaultExpandedRows, setDefaultExpandedRows] = useState([]); + const [defaultExpandedRows, setDefaultExpandedRows] = useState([]); 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( + "#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 = ({ > - {" "} - Focus on selected path{" "} + Focus on selected path @@ -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}