fix: scroll to selected row

Author: astandrik

src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx

@@ -30,6 +30,8 @@ import {
     TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
 } from './columns/constants';
 import {DEFAULT_TIME_FILTER_VALUE, TIME_FRAME_OPTIONS} from './constants';
+import type {ReactList} from './hooks/useScrollToSelected';
+import {useScrollToSelected} from './hooks/useScrollToSelected';
 import {useSetSelectedTopQueryRowFromParams} from './hooks/useSetSelectedTopQueryRowFromParams';
 import {useTopQueriesSort} from './hooks/useTopQueriesSort';
 import i18n from './i18n';
@@ -61,6 +63,9 @@ export const TopQueriesData = ({
     // null is reserved for not found state
     const [selectedRow, setSelectedRow] = React.useState<KeyValueRow | null | undefined>(undefined);
 
+    // Ref for react-list component to enable scrolling to selected row
+    const reactListRef = React.useRef<ReactList>(null);
+
     // Get columns for top queries
     const columns: Column<KeyValueRow>[] = React.useMemo(() => {
         return getTopQueriesColumns();
@@ -89,6 +94,19 @@ export const TopQueriesData = ({
     const rows = currentData?.resultSets?.[0]?.result;
     useSetSelectedTopQueryRowFromParams(setSelectedRow, rows);
 
+    // Enhanced table settings with dynamicInnerRef for scrolling
+    const tableSettings = React.useMemo(
+        () => ({
+            ...TOP_QUERIES_TABLE_SETTINGS,
+            dynamicInnerRef: reactListRef,
+            // Using 'uniform' type - react-list automatically calculates size from first item
+        }),
+        [],
+    );
+
+    // Use custom hook to handle scrolling to selected row
+    useScrollToSelected({selectedRow, rows, reactListRef});
+
     const handleCloseDetails = React.useCallback(() => {
         setSelectedRow(undefined);
     }, [setSelectedRow]);
@@ -182,7 +200,7 @@ export const TopQueriesData = ({
                         columns={columnsToShow}
                         data={rows || []}
                         loading={isFetching && currentData === undefined}
-                        settings={TOP_QUERIES_TABLE_SETTINGS}
+                        settings={tableSettings}
                         onRowClick={onRowClick}
                         rowClassName={(row) => b('row', {active: isEqual(row, selectedRow)})}
                         sortOrder={tableSort}

src/containers/Tenant/Diagnostics/TopQueries/hooks/useScrollToSelected.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {isEqual} from 'lodash';
+
+import type {KeyValueRow} from '../../../../../types/api/query';
+
+// Type for react-list component
+export interface ReactList {
+    scrollTo: (index: number) => void;
+    scrollAround: (index: number) => void;
+    getVisibleRange: () => [number, number];
+}
+
+interface UseScrollToSelectedParams {
+    selectedRow: KeyValueRow | null | undefined;
+    rows: KeyValueRow[] | undefined;
+    reactListRef: React.RefObject<ReactList>;
+}
+
+/**
+ * Custom hook to handle scrolling to selected row in react-list
+ * Only scrolls if the selected item is not currently visible
+ * When scrolling, positions the item in the middle of the viewport
+ */
+export function useScrollToSelected({selectedRow, rows, reactListRef}: UseScrollToSelectedParams) {
+    React.useEffect(() => {
+        if (selectedRow && rows && reactListRef.current) {
+            const selectedIndex = rows.findIndex((row) => isEqual(row, selectedRow));
+            if (selectedIndex !== -1) {
+                const reactList = reactListRef.current;
+
+                try {
+                    const visibleRange = reactList.getVisibleRange();
+                    const [firstVisible, lastVisible] = visibleRange;
+
+                    // Check if selected item is already visible
+                    const isVisible = selectedIndex >= firstVisible && selectedIndex <= lastVisible;
+
+                    if (!isVisible) {
+                        // Only scroll if not visible - position in middle of viewport
+                        const visibleCount = lastVisible - firstVisible + 1;
+                        const middleOffset = Math.floor(visibleCount / 2);
+                        const targetIndex = Math.max(0, selectedIndex - middleOffset);
+
+                        reactList.scrollTo(targetIndex);
+                    }
+                    // If already visible, don't scroll (better UX)
+                } catch {
+                    // Fallback to scrollAround if getVisibleRange fails
+                    reactList.scrollAround(selectedIndex);
+                }
+            }
+        }
+    }, [selectedRow, rows, reactListRef]);
+}

src/containers/Tenant/Diagnostics/TopQueries/utils.ts

@@ -13,6 +13,7 @@ export const TOP_QUERIES_TABLE_SETTINGS: Settings = {
     ...QUERY_TABLE_SETTINGS,
     disableSortReset: true,
     externalSort: true,
+    dynamicRenderType: 'uniform', // All rows have fixed height due to FixedHeightQuery
 };
 
 export function createQueryInfoItems(data: KeyValueRow): InfoViewerItem[] {