From 1400482e6527284b4faac3444b6a4281cc67bdc5 Mon Sep 17 00:00:00 2001 From: Miki Date: Mon, 25 Nov 2024 19:16:49 -0800 Subject: [PATCH] Mitigate the incorrect layout of Discover due to a race condition between loading column definition and data Signed-off-by: Miki --- .../default_discover_table.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx b/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx index 1e92858157bc..82e33fd64cdf 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx @@ -186,6 +186,16 @@ const DefaultDiscoverTableUI = ({ // Allow auto column-sizing using the initially rendered rows and then convert to fixed const tableLayoutRequestFrameRef = useRef(0); + /* In asynchronous data loading, column metadata may arrive before the corresponding data, resulting in + layout being calculated for the new column definitions using the old data. To mitigate this issue, we + additionally trigger a recalculation when a change is observed in the index that the data attributes + itself to. This ensures a re-layout is performed when new data is loaded or the column definitions + change, effectively addressing the symptoms of the race condition. + */ + const indexOfRenderedData = rows?.[0]?._index; + const timeFromFirstRow = + indexPattern?.timeFieldName && rows?.[0]?._source?.[indexPattern.timeFieldName]; + useEffect(() => { if (tableElement) { // Load the first batch of rows and adjust the columns to the contents @@ -214,7 +224,7 @@ const DefaultDiscoverTableUI = ({ } return () => cancelAnimationFrame(tableLayoutRequestFrameRef.current); - }, [columns, tableElement]); + }, [columns, tableElement, indexOfRenderedData, timeFromFirstRow]); return ( indexPattern && (