[BUG] Resolve display issue and improve performance

Signed-off-by: ananzh <ananzh@amazon.com>
ananzh · Nov 20, 2023 · 15b62f5 · 15b62f5
1 parent 524fd93
commit 15b62f5
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 160 deletions.
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
@@ -34,3 +34,7 @@
     }
   }
 }
+
+.trigger-reflow {
+  padding-right: 1px; /* Or any other property that affects layout */
+}
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx
@@ -5,16 +5,31 @@
 
 import './discover_chart_container.scss';
 import React, { useMemo } from 'react';
-import { DiscoverViewServices } from '../../../build_services';
-import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
-import { useDiscoverContext } from '../context';
-import { SearchData } from '../utils/use_search';
 import { DiscoverChart } from '../../components/chart/chart';
+import { DiscoverViewServices } from '../../../build_services';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { SavedSearch } from '../../../saved_searches';
+import { TimechartHeaderBucketInterval } from '../../components/chart/timechart_header';
+import { Chart } from '../../components/chart/utils';
+
+interface DiscoverChartContainerProps {
+  hits?: number;
+  bucketInterval?: TimechartHeaderBucketInterval | {};
+  chartData?: Chart;
+  services: DiscoverViewServices;
+  indexPattern?: IndexPattern;
+  savedSearch?: SavedSearch;
+}
 
-export const DiscoverChartContainer = ({ hits, bucketInterval, chartData }: SearchData) => {
-  const { services } = useOpenSearchDashboards<DiscoverViewServices>();
+export const DiscoverChartContainer = ({
+  hits,
+  bucketInterval,
+  chartData,
+  services,
+  indexPattern,
+  savedSearch,
+}: DiscoverChartContainerProps) => {
   const { uiSettings, data, core } = services;
-  const { indexPattern, savedSearch } = useDiscoverContext();
 
   const isTimeBased = useMemo(() => (indexPattern ? indexPattern.isTimeBased() : false), [
     indexPattern,

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
@@ -5,9 +5,7 @@
 
 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';
-import { useDiscoverContext } from '../context';
 import {
   addColumn,
   removeColumn,
@@ -22,13 +20,25 @@ import { SortOrder } from '../../../saved_searches/types';
 import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
 import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { popularizeField } from '../../helpers/popularize_field';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { SavedSearch } from '../../../saved_searches';
+import { RefetchSubject } from '../../view_components/utils/use_search';
 
-interface Props {
+interface DiscoverTableProps {
   rows?: OpenSearchSearchHit[];
+  services: DiscoverViewServices;
+  refetch: RefetchSubject;
+  indexPattern?: IndexPattern;
+  savedSearch?: SavedSearch;
 }
 
-export const DiscoverTable = ({ rows }: Props) => {
-  const { services } = useOpenSearchDashboards<DiscoverViewServices>();
+export const DiscoverTable = ({
+  rows,
+  services,
+  refetch,
+  indexPattern,
+  savedSearch,
+}: DiscoverTableProps) => {
   const {
     uiSettings,
     data: {
@@ -38,7 +48,6 @@ export const DiscoverTable = ({ rows }: Props) => {
     indexPatterns,
   } = services;
 
-  const { refetch$, indexPattern, savedSearch } = useDiscoverContext();
   const { columns, sort } = useSelector((state) => state.discover);
   const dispatch = useDispatch();
   const onAddColumn = (col: string) => {
@@ -58,7 +67,7 @@ export const DiscoverTable = ({ rows }: Props) => {
   const onSetColumns = (cols: string[]) => dispatch(setColumns({ columns: cols }));
   const onSetSort = (s: SortOrder[]) => {
     dispatch(setSort(s));
-    refetch$.next();
+    refetch.next();
   };
   const onAddFilter = useCallback(
     (field: string | IndexPatternField, values: string, operation: '+' | '-') => {

diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -19,15 +19,13 @@ 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
 export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) {
-  const { data$, refetch$, indexPattern } = useDiscoverContext();
-  const {
-    services: { uiSettings },
-  } = useOpenSearchDashboards<DiscoverViewServices>();
+  const { data$, refetch$, indexPattern, savedSearch, inspectorAdapters } = useDiscoverContext();
+  const { services } = useOpenSearchDashboards<DiscoverViewServices>();
+  const { uiSettings } = services;
   const { columns } = useSelector((state) => state.discover);
   const filteredColumns = filterColumns(
     columns,
@@ -51,7 +49,6 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
     },
     [refetch$]
   );
-  const [rows, setRows] = useState<OpenSearchSearchHit[] | undefined>(undefined);
 
   useEffect(() => {
     const subscription = data$.subscribe((next) => {
@@ -66,7 +63,6 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
       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.
@@ -89,6 +85,18 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
 
   const timeField = indexPattern?.timeFieldName ? indexPattern.timeFieldName : undefined;
 
+  useEffect(() => {
+    if (fetchState.status === ResultStatus.READY) {
+      const element = document.querySelector('.dscCanvas') as HTMLElement;
+      if (element) {
+        element.classList.add('trigger-reflow');
+        setTimeout(() => {
+          element.classList.remove('trigger-reflow');
+        }, 10);
+      }
+    }
+  }, [fetchState.status]);
+
   return (
     <EuiPanel
       hasBorder={false}
@@ -97,11 +105,15 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
       paddingSize="none"
       className="dscCanvas"
     >
-      <TopNav
+      <MemorizedTopNav
         opts={{
           setHeaderActionMenu,
           onQuerySubmit,
         }}
+        services={services}
+        inspectorAdapters={inspectorAdapters}
+        savedSearch={savedSearch}
+        indexPattern={indexPattern}
       />
       {fetchState.status === ResultStatus.NO_RESULTS && (
         <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
@@ -114,15 +126,29 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
         <>
           <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
             <EuiPanel>
-              <MemoizedDiscoverChartContainer {...fetchState} />
+              <MemoizedDiscoverChartContainer
+                hits={fetchState.hits}
+                bucketInterval={fetchState.bucketInterval}
+                chartData={fetchState.chartData}
+                services={services}
+                indexPattern={indexPattern}
+                savedSearch={savedSearch}
+              />
             </EuiPanel>
           </EuiPanel>
-          <MemoizedDiscoverTable rows={rows} />
+          <MemoizedDiscoverTable
+            rows={fetchState.rows}
+            services={services}
+            refetch={refetch$}
+            indexPattern={indexPattern}
+            savedSearch={savedSearch}
+          />
         </>
       )}
     </EuiPanel>
   );
 }
 
+const MemorizedTopNav = React.memo(TopNav);
 const MemoizedDiscoverTable = React.memo(DiscoverTable);
 const MemoizedDiscoverChartContainer = React.memo(DiscoverChartContainer);
diff --git a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx
@@ -7,24 +7,32 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { TimeRange, Query } from 'src/plugins/data/common';
 import { AppMountParameters } from '../../../../../../core/public';
 import { PLUGIN_ID } from '../../../../common';
-import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DiscoverViewServices } from '../../../build_services';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { getTopNavLinks } from '../../components/top_nav/get_top_nav_links';
-import { useDiscoverContext } from '../context';
 import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
 import { opensearchFilters, connectStorageToQueryState } from '../../../../../data/public';
+import { SavedSearch } from '../../../saved_searches';
+import { InspectorAdapters } from '../utils/use_search';
 
 export interface TopNavProps {
   opts: {
     setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
     onQuerySubmit: (payload: { dateRange: TimeRange; query?: Query }, isUpdate?: boolean) => void;
   };
+  services: DiscoverViewServices;
+  inspectorAdapters: InspectorAdapters;
+  indexPattern?: IndexPattern;
+  savedSearch?: SavedSearch;
 }
 
-export const TopNav = ({ opts }: TopNavProps) => {
-  const { services } = useOpenSearchDashboards<DiscoverViewServices>();
-  const { inspectorAdapters, savedSearch, indexPattern } = useDiscoverContext();
+export const TopNav = ({
+  opts,
+  services,
+  inspectorAdapters,
+  savedSearch,
+  indexPattern,
+}: TopNavProps) => {
   const [indexPatterns, setIndexPatterns] = useState<IndexPattern[] | undefined>(undefined);
 
   const {

diff --git a/src/plugins/discover/public/application/view_components/utils/index_pattern_helper.ts b/src/plugins/discover/public/application/view_components/utils/index_pattern_helper.ts
diff --git a/src/plugins/discover/public/application/view_components/utils/use_index_pattern.ts b/src/plugins/discover/public/application/view_components/utils/use_index_pattern.ts
@@ -62,7 +62,9 @@ export const useIndexPattern = (services: DiscoverViewServices) => {
       data.indexPatterns.getCache().then((indexPatternList) => {
         const newId = getIndexPatternId('', indexPatternList, config.get('defaultIndex'));
         store!.dispatch(updateIndexPattern(newId));
-        fetchIndexPatternDetails(newId);
+        if (indexPatternList && indexPatternList.length !== 0) {
+          fetchIndexPatternDetails(newId);
+        }
       });
     } else {
       fetchIndexPatternDetails(indexPatternIdFromState);