Attempt to more clearly document rowIndexs that are actually `visib…

…leRowIndex`s
elastic · Jan 27, 2022 · 4a80624 · 4a80624
1 parent 7786fcc
commit 4a80624
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
@@ -180,9 +180,12 @@ export interface EuiDataGridVisibleRows {
 export interface DataGridSortingContextShape {
   sorting?: EuiDataGridSorting;
   sortedRowMap: { [key: number]: number };
-  getCorrectRowIndex: (rowIndex: number) => number;
+  getCorrectRowIndex: (visibleRowIndex: number) => number;
 }
 
+// An array of [x,y] coordinates. Note that the `y` value expected internally is a `visibleRowIndex`
+export type EuiDataGridFocusedCell = [number, number];
+
 export interface DataGridFocusContextShape {
   focusedCell?: EuiDataGridFocusedCell;
   setFocusedCell: (cell: EuiDataGridFocusedCell) => void;
@@ -196,6 +199,7 @@ export interface DataGridFocusContextShape {
 
 export interface DataGridCellPopoverContextShape {
   popoverIsOpen: boolean;
+  // Note that the rowIndex used to locate cells internally is a `visibleRowIndex`
   cellLocation: { rowIndex: number; colIndex: number };
   openCellPopover(args: { rowIndex: number; colIndex: number }): void;
   closeCellPopover(): void;
@@ -764,8 +768,6 @@ export interface EuiDataGridInMemory {
   skipColumns?: string[];
 }
 
-export type EuiDataGridFocusedCell = [number, number];
-
 export interface EuiDataGridInMemoryValues {
   [rowIndex: string]: { [columnId: string]: string };
 }

diff --git a/src/components/datagrid/utils/scrolling.ts b/src/components/datagrid/utils/scrolling.ts
@@ -74,6 +74,9 @@ export const useScrollCellIntoView = ({
   hasStickyFooter,
 }: Dependencies) => {
   const scrollCellIntoView = useCallback(
+    // Note: in order for this UX to work correctly with react-window's APIs,
+    // the `rowIndex` arg expected is actually our internal `visibleRowIndex`,
+    // not the `rowIndex` from the raw unsorted/unpaginated user data
     async ({ rowIndex, colIndex }: ScrollCellIntoView) => {
       if (!gridRef.current || !outerGridRef.current || !innerGridRef.current) {
         return; // Grid isn't rendered yet or is empty

diff --git a/src/components/datagrid/utils/sorting.ts b/src/components/datagrid/utils/sorting.ts
@@ -103,19 +103,21 @@ export const useSorting = ({
     schemaDetectors,
   ]);
 
+  // Given a visible row index, obtain the unpaginated & unsorted
+  // row index from the passed cell data
   const getCorrectRowIndex = useCallback(
-    (rowIndex: number) => {
-      let rowIndexWithOffset = rowIndex;
-
-      if (rowIndex - startRow < 0) {
-        rowIndexWithOffset = rowIndex + startRow;
-      }
-
-      const correctRowIndex = sortedRowMap.hasOwnProperty(rowIndexWithOffset)
-        ? sortedRowMap[rowIndexWithOffset]
-        : rowIndexWithOffset;
-
-      return correctRowIndex;
+    (visibleRowIndex: number) => {
+      const isPaginated = visibleRowIndex - startRow < 0;
+      const unpaginatedRowIndex = isPaginated
+        ? visibleRowIndex + startRow
+        : visibleRowIndex;
+
+      const unsortedRowIndex =
+        unpaginatedRowIndex in sortedRowMap
+          ? sortedRowMap[unpaginatedRowIndex]
+          : unpaginatedRowIndex;
+
+      return unsortedRowIndex;
     },
     [startRow, sortedRowMap]
   );