[BUG][Data Explorer][Discover] Allow data grid to auto adjust size ba…

…sed on fetched data count * This PR adds a new rows state to the DiscoverCanvas component and updated it whenever the data$ observable emitted new row data. * The DiscoverTable component was then refactored to accept rows as a prop, making it dependent on the parent component to provide the correct set of data. This ensures that the table renders correctly based on the current data and doesn't rely on its internal state, which could be outdated. Issue Resolve opensearch-project#5181 Signed-off-by: ananzh <[email protected]>
ananzh · Oct 3, 2023 · 8418017 · 8418017
1 parent 9601c6c
commit 8418017
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 41 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
@@ -29,7 +29,6 @@ export interface DataGridTableProps {
   onSetColumns: (columns: string[]) => void;
   sort: SortOrder[];
   displayTimeColumn: boolean;
-  services: DiscoverServices;
   title?: string;
   description?: string;
   isToolbarVisible?: boolean;

diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss
@@ -1,5 +1,5 @@
 .dscCanvas {
   @include euiYScrollWithShadows;
 
-  height: 100%;
+  height: auto;
 }
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx
@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { History } from 'history';
+import React, { useCallback, useMemo } from 'react';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DataGridTable } from '../../components/data_grid/data_grid_table';
@@ -17,30 +16,27 @@ import {
   useDispatch,
   useSelector,
 } from '../../utils/state_management';
-import { ResultStatus, SearchData, useSearch } from '../utils/use_search';
+import { useSearch } from '../utils/use_search';
 import { IndexPatternField, opensearchFilters } from '../../../../../data/public';
 import { DocViewFilterFn } from '../../doc_views/doc_views_types';
 import { SortOrder } from '../../../saved_searches/types';
 import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
+import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 
 interface Props {
-  history: History;
+  rows: OpenSearchSearchHit[];
 }
 
-export const DiscoverTable = ({ history }: Props) => {
+export const DiscoverTable = ({ rows }: Props) => {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
   const {
     uiSettings,
     data: {
       query: { filterManager },
     },
   } = services;
-  const { data$, refetch$, indexPattern, savedSearch } = useDiscoverContext();
-  const [fetchState, setFetchState] = useState<SearchData>({
-    status: data$.getValue().status,
-    rows: [],
-  });
 
+  const { refetch$, indexPattern, savedSearch } = useDiscoverContext();
   const { columns, sort } = useSelector((state) => state.discover);
   const dispatch = useDispatch();
   const onAddColumn = (col: string) => dispatch(addColumn({ column: col }));
@@ -70,20 +66,6 @@ export const DiscoverTable = ({ history }: Props) => {
     [indexPattern, uiSettings]
   );
 
-  const { rows } = fetchState || {};
-
-  useEffect(() => {
-    const subscription = data$.subscribe((next) => {
-      if (next.status === ResultStatus.LOADING) return;
-      if (next.status !== fetchState.status || (next.rows && next.rows !== fetchState.rows)) {
-        setFetchState({ ...fetchState, ...next });
-      }
-    });
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [data$, fetchState]);
-
   if (indexPattern === undefined) {
     // TODO: handle better
     return null;
@@ -106,7 +88,6 @@ export const DiscoverTable = ({ history }: Props) => {
       sort={sort}
       rows={rows}
       displayTimeColumn={displayTimeColumn}
-      services={services}
       title={savedSearch?.id ? savedSearch.title : ''}
       description={savedSearch?.id ? savedSearch.description : ''}
     />

diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { TopNav } from './top_nav';
 import { ViewProps } from '../../../../../data_explorer/public';
@@ -19,6 +19,7 @@ import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { filterColumns } from '../utils/filter_columns';
 import { DEFAULT_COLUMNS_SETTING } from '../../../../common';
+import { OpenSearchSearchHit } from '../../../application/doc_views/doc_views_types';
 import './discover_canvas.scss';
 
 // eslint-disable-next-line import/no-default-export
@@ -42,7 +43,6 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
     bucketInterval: {},
   });
 
-  const { status } = fetchState;
   const onQuerySubmit = useCallback(
     (payload, isUpdate) => {
       if (isUpdate === false) {
@@ -51,18 +51,30 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
     },
     [refetch$]
   );
+  const [rows, setRows] = useState<OpenSearchSearchHit[] | undefined>(undefined);
 
   useEffect(() => {
     const subscription = data$.subscribe((next) => {
-      if (
-        next.status !== fetchState.status ||
-        (next.hits && next.hits !== fetchState.hits) ||
-        (next.bucketInterval && next.bucketInterval !== fetchState.bucketInterval) ||
-        (next.chartData && next.chartData !== fetchState.chartData)
-      ) {
+      if (next.status === ResultStatus.LOADING) return;
+
+      let shouldUpdateState = false;
+
+      if (next.status !== fetchState.status) shouldUpdateState = true;
+      if (next.hits && next.hits !== fetchState.hits) shouldUpdateState = true;
+      if (next.bucketInterval && next.bucketInterval !== fetchState.bucketInterval)
+        shouldUpdateState = true;
+      if (next.chartData && next.chartData !== fetchState.chartData) shouldUpdateState = true;
+      if (next.rows && next.rows !== fetchState.rows) {
+        shouldUpdateState = true;
+        setRows(next.rows);
+      }
+
+      // Update the state if any condition is met.
+      if (shouldUpdateState) {
         setFetchState({ ...fetchState, ...next });
       }
     });
+
     return () => {
       subscription.unsubscribe();
     };
@@ -77,6 +89,9 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
 
   const timeField = indexPattern?.timeFieldName ? indexPattern.timeFieldName : undefined;
 
+  const MemoizedDiscoverTable = React.memo(DiscoverTable);
+  const MemoizedDiscoverChartContainer = React.memo(DiscoverChartContainer);
+
   return (
     <EuiPanel
       hasBorder={false}
@@ -91,21 +106,21 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
           onQuerySubmit,
         }}
       />
-      {status === ResultStatus.NO_RESULTS && (
+      {fetchState.status === ResultStatus.NO_RESULTS && (
         <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
       )}
-      {status === ResultStatus.UNINITIALIZED && (
+      {fetchState.status === ResultStatus.UNINITIALIZED && (
         <DiscoverUninitialized onRefresh={() => refetch$.next()} />
       )}
-      {status === ResultStatus.LOADING && <LoadingSpinner />}
-      {status === ResultStatus.READY && (
+      {fetchState.status === ResultStatus.LOADING && <LoadingSpinner />}
+      {fetchState.status === ResultStatus.READY && (
         <>
           <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
             <EuiPanel>
-              <DiscoverChartContainer {...fetchState} />
+              <MemoizedDiscoverChartContainer {...fetchState} />
             </EuiPanel>
           </EuiPanel>
-          <DiscoverTable history={history} />
+          <MemoizedDiscoverTable rows={rows} />
         </>
       )}
     </EuiPanel>