[Discover] Fixes table optimization (opensearch-project#5763)

* [Discover] Fixes table optimization Signed-off-by: Ashwin P Chandran <[email protected]> * improved loader Signed-off-by: Ashwin P Chandran <[email protected]> --------- Signed-off-by: Ashwin P Chandran <[email protected]>
abbyhu2000 · Jan 31, 2024 · 8ec8176 · 8ec8176
1 parent 14913c6
commit 8ec8176
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 62 deletions.
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
@@ -160,19 +160,21 @@ export const DataGridTable = ({
         onAddColumn={onAddColumn}
         onFilter={onFilter}
         onClose={() => setInspectedHit(undefined)}
+        sampleSize={pageSizeLimit}
       />
     ),
     [
       displayedTableColumns,
       adjustedColumns,
+      rows,
       indexPattern,
-      onAddColumn,
+      sortingColumns,
       onColumnSort,
-      onFilter,
       onRemoveColumn,
       onReorderColumn,
-      rows,
-      sortingColumns,
+      onAddColumn,
+      onFilter,
+      pageSizeLimit,
     ]
   );
 

diff --git a/.../discover/public/application/components/default_discover_table/default_discover_table.tsx b/.../discover/public/application/components/default_discover_table/default_discover_table.tsx
@@ -6,7 +6,14 @@
 import './_doc_table.scss';
 
 import React, { useEffect, useRef, useState } from 'react';
-import { EuiDataGridColumn, EuiDataGridSorting } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiDataGridColumn,
+  EuiDataGridSorting,
+  EuiProgress,
+} from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
 import { TableHeader } from './table_header';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { TableRow } from './table_rows';
@@ -27,6 +34,7 @@ export interface DefaultDiscoverTableProps {
   onAddColumn: (column: string) => void;
   onFilter: DocViewFilterFn;
   onClose: () => void;
+  sampleSize: number;
 }
 
 export const LegacyDiscoverTable = ({
@@ -41,70 +49,93 @@ export const LegacyDiscoverTable = ({
   onAddColumn,
   onFilter,
   onClose,
+  sampleSize,
 }: DefaultDiscoverTableProps) => {
-  const [intersectingRows, setIntersectingRows] = useState([]);
-  const tableRef = useRef(null);
+  const [renderedRowCount, setRenderedRowCount] = useState(50); // Start with 50 rows
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    const options = {
-      root: null, // viewport
-      rootMargin: '0px',
-      threshold: 0.5, // 50% of the element is visible
-    };
-
-    const observer = new IntersectionObserver((entries) => {
-      const visibleRows = entries
-        .filter((entry) => entry.isIntersecting)
-        .map((entry) => Number(entry.target.dataset.index));
+  const loadMoreRows = () => {
+    setRenderedRowCount((prevRowCount) => prevRowCount + 50); // Load 50 more rows
+  };
 
-      setIntersectingRows((prevIntersectingRows) => [...prevIntersectingRows, ...visibleRows]);
-    }, options);
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          loadMoreRows();
+        }
+      },
+      { threshold: 1.0 }
+    );
 
-    const tableRows = tableRef.current.querySelectorAll('tbody tr');
-    tableRows.forEach((row, index) => {
-      observer.observe(row);
-      row.dataset.index = index; // Storing the index for reference
-    });
+    if (sentinelRef.current) {
+      observerRef.current.observe(sentinelRef.current);
+    }
 
     return () => {
-      observer.disconnect();
+      if (observerRef.current && sentinel) {
+        observerRef.current.unobserve(sentinel);
+      }
     };
-  }, [rows, columns]); // Re-run if the data changes
+  }, []);
 
   return (
     indexPattern && (
-      <table data-test-subj="docTable" className="osd-table table" ref={tableRef}>
-        <thead>
-          <TableHeader
-            displayedTableColumns={displayedTableColumns}
-            defaultSortOrder={''}
-            // hideTimeColumn,
-            indexPattern={indexPattern}
-            // isShortDots,
-            onChangeSortOrder={onChangeSortOrder}
-            onReorderColumn={onReorderColumn}
-            onRemoveColumn={onRemoveColumn}
-            sortOrder={sortOrder}
-          />
-        </thead>
-        <tbody>
-          {rows.map((row: OpenSearchSearchHit, index: number) => {
-            return (
-              <TableRow
-                opacity={intersectingRows.includes(index) ? 1 : 0}
-                row={row}
-                columnIds={displayedTableColumns.map((column) => column.id)}
-                columns={columns}
-                indexPattern={indexPattern}
-                onRemoveColumn={onRemoveColumn}
-                onAddColumn={onAddColumn}
-                onFilter={onFilter}
-                onClose={onClose}
-              />
-            );
-          })}
-        </tbody>
-      </table>
+      <>
+        <table data-test-subj="docTable" className="osd-table table">
+          <thead>
+            <TableHeader
+              displayedTableColumns={displayedTableColumns}
+              defaultSortOrder={''}
+              // hideTimeColumn,
+              indexPattern={indexPattern}
+              // isShortDots,
+              onChangeSortOrder={onChangeSortOrder}
+              onReorderColumn={onReorderColumn}
+              onRemoveColumn={onRemoveColumn}
+              sortOrder={sortOrder}
+            />
+          </thead>
+          <tbody>
+            {rows.slice(0, renderedRowCount).map((row: OpenSearchSearchHit, index: number) => {
+              return (
+                <TableRow
+                  key={index}
+                  row={row}
+                  columnIds={displayedTableColumns.map((column) => column.id)}
+                  columns={columns}
+                  indexPattern={indexPattern}
+                  onRemoveColumn={onRemoveColumn}
+                  onAddColumn={onAddColumn}
+                  onFilter={onFilter}
+                  onClose={onClose}
+                />
+              );
+            })}
+          </tbody>
+        </table>
+        {renderedRowCount < rows.length && (
+          <div ref={sentinelRef}>
+            <EuiProgress size="xs" color="accent" />
+          </div>
+        )}
+        {rows.length === sampleSize && (
+          <EuiCallOut className="dscTable__footer" data-test-subj="discoverDocTableFooter">
+            <FormattedMessage
+              id="discover.howToSeeOtherMatchingDocumentsDescription"
+              defaultMessage="These are the first {sampleSize} documents matching
+              your search, refine your search to see others."
+              values={{ sampleSize }}
+            />
+
+            <EuiButtonEmpty onClick={() => window.scrollTo(0, 0)}>
+              <FormattedMessage id="discover.backToTopLinkText" defaultMessage="Back to top." />
+            </EuiButtonEmpty>
+          </EuiCallOut>
+        )}
+      </>
     )
   );
 };
diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx
@@ -20,7 +20,6 @@ import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { fetchSourceTypeDataCell } from '../data_grid/data_grid_table_cell_value';
 
 export interface TableRowProps {
-  opacity: number;
   row: OpenSearchSearchHit;
   columnIds: string[];
   columns: string[];
@@ -32,7 +31,6 @@ export interface TableRowProps {
 }
 
 export const TableRow = ({
-  opacity,
   row,
   columnIds,
   columns,
@@ -45,7 +43,7 @@ export const TableRow = ({
   const flattened = indexPattern.flattenHit(row);
   const [isExpanded, setIsExpanded] = useState(false);
   const tableRow = (
-    <tr style={{ opacity }}>
+    <tr>
       <td data-test-subj="docTableExpandToggleColumn" className="osdDocTableCell__toggleDetails">
         <EuiButtonIcon
           color="text"