Improve the perceived performance of Discover (#6599)

Signed-off-by: Miki <miki@amazon.com>
(cherry picked from commit b2c4b9c)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

changelogs/fragments/6599.yml

@@ -0,0 +1,2 @@
+feat:
+- Improve the perceived performance of Discover when using the default tabular renderer ([#6599](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6599))

package.json

@@ -282,7 +282,7 @@
     "@types/dedent": "^0.7.0",
     "@types/deep-freeze-strict": "^1.1.0",
     "@types/delete-empty": "^2.0.0",
-    "@types/dompurify": "^2.3.3",
+    "@types/dompurify": "^3.0.5",
     "@types/elasticsearch": "^5.0.33",
     "@types/enzyme": "^3.10.7",
     "@types/eslint": "^6.1.3",
@@ -368,7 +368,7 @@
     "d3-cloud": "1.2.5",
     "dedent": "^0.7.0",
     "delete-empty": "^2.0.0",
-    "dompurify": "^2.4.1",
+    "dompurify": "^3.0.11",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.5.0",

src/plugins/discover/public/application/components/data_grid/data_grid.tsx

@@ -0,0 +1,153 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './_data_grid_table.scss';
+
+import React, { useMemo, useCallback } from 'react';
+import { EuiDataGrid, EuiDataGridSorting } from '@elastic/eui';
+import { IndexPattern, getServices } from '../../../opensearch_dashboards_services';
+import { fetchTableDataCell } from './data_grid_table_cell_value';
+import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
+import { DocViewInspectButton } from './data_grid_table_docview_inspect_button';
+import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
+import { usePagination } from '../utils/use_pagination';
+import { buildColumns } from '../../utils/columns';
+import { DOC_HIDE_TIME_COLUMN_SETTING, SAMPLE_SIZE_SETTING } from '../../../../common';
+import { UI_SETTINGS } from '../../../../../data/common';
+import { SortOrder } from '../../../saved_searches/types';
+import { useToolbarOptions } from './data_grid_toolbar';
+
+export interface DataGridProps {
+  columns: string[];
+  indexPattern: IndexPattern;
+  onSort: (s: SortOrder[]) => void;
+  rows: OpenSearchSearchHit[];
+  onSetColumns: (columns: string[]) => void;
+  sort: SortOrder[];
+  isToolbarVisible?: boolean;
+  isContextView?: boolean;
+}
+
+const DataGridUI = ({
+  columns,
+  indexPattern,
+  onSetColumns,
+  onSort,
+  sort,
+  rows,
+  isToolbarVisible = true,
+  isContextView = false,
+}: DataGridProps) => {
+  const services = getServices();
+  const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
+  const { toolbarOptions, lineCount } = useToolbarOptions();
+  const [pageSizeLimit, isShortDots] = useMemo(() => {
+    return [
+      services.uiSettings.get(SAMPLE_SIZE_SETTING),
+      services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE),
+    ];
+  }, [services.uiSettings]);
+  const displayTimeColumn = useMemo(
+    () =>
+      !services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && indexPattern?.isTimeBased(),
+    [indexPattern, services.uiSettings]
+  );
+  const pagination = usePagination({ rowCount, pageSizeLimit });
+
+  let adjustedColumns = buildColumns(columns);
+  // handle case where the user removes selected filed and leaves only time column
+  if (
+    adjustedColumns.length === 1 &&
+    indexPattern &&
+    adjustedColumns[0] === indexPattern.timeFieldName
+  ) {
+    adjustedColumns = [...adjustedColumns, '_source'];
+  }
+
+  const includeSourceInColumns = adjustedColumns.includes('_source');
+  const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]);
+  const rowHeightsOptions = useMemo(
+    () => ({
+      defaultHeight: {
+        lineCount: lineCount || (includeSourceInColumns ? 3 : 1),
+      },
+    }),
+    [includeSourceInColumns, lineCount]
+  );
+
+  const onColumnSort = useCallback(
+    (cols: EuiDataGridSorting['columns']) => {
+      onSort(cols.map(({ id, direction }) => [id, direction]));
+    },
+    [onSort]
+  );
+
+  const renderCellValue = useMemo(() => fetchTableDataCell(indexPattern, rows, isShortDots), [
+    indexPattern,
+    isShortDots,
+    rows,
+  ]);
+
+  const displayedTableColumns = useMemo(
+    () =>
+      buildDataGridColumns(
+        adjustedColumns,
+        indexPattern,
+        displayTimeColumn,
+        includeSourceInColumns,
+        isContextView
+      ),
+    [adjustedColumns, indexPattern, displayTimeColumn, includeSourceInColumns, isContextView]
+  );
+
+  const dataGridTableColumnsVisibility = useMemo(
+    () => ({
+      visibleColumns: computeVisibleColumns(
+        adjustedColumns,
+        indexPattern,
+        displayTimeColumn
+      ) as string[],
+      setVisibleColumns: (cols: string[]) => {
+        onSetColumns(cols);
+      },
+    }),
+    [adjustedColumns, indexPattern, displayTimeColumn, onSetColumns]
+  );
+
+  const sorting: EuiDataGridSorting = useMemo(
+    () => ({ columns: sortingColumns, onSort: onColumnSort }),
+    [sortingColumns, onColumnSort]
+  );
+
+  const leadingControlColumns = useMemo(() => {
+    return [
+      {
+        id: 'inspectCollapseColumn',
+        headerCellRender: () => null,
+        rowCellRender: DocViewInspectButton,
+        width: 40,
+      },
+    ];
+  }, []);
+
+  return (
+    <EuiDataGrid
+      aria-labelledby="aria-labelledby"
+      columns={displayedTableColumns}
+      columnVisibility={dataGridTableColumnsVisibility}
+      leadingControlColumns={leadingControlColumns}
+      data-test-subj="docTable"
+      pagination={pagination}
+      renderCellValue={renderCellValue}
+      rowCount={rowCount}
+      sorting={sorting}
+      toolbarVisibility={isToolbarVisible ? toolbarOptions : false}
+      rowHeightsOptions={rowHeightsOptions}
+      className="discoverDataGrid"
+    />
+  );
+};
+
+export const DataGrid = React.memo(DataGridUI);