[Discover] Update layout for unified histogram

src/plugins/discover/public/application/main/components/chart/discover_chart.tsx

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import React, { memo, ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import moment from 'moment';
 import {
   EuiButtonIcon,
@@ -14,7 +14,6 @@ import {
   EuiFlexItem,
   EuiPopover,
   EuiToolTip,
-  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { DataView } from '@kbn/data-views-plugin/public';
@@ -24,8 +23,6 @@ import { GetStateReturn } from '../../services/discover_state';
 import { DiscoverHistogram } from './histogram';
 import { DataCharts$, DataTotalHits$ } from '../../hooks/use_saved_search';
 import { useChartPanels } from './use_chart_panels';
-import { VIEW_MODE, DocumentViewModeToggle } from '../../../../components/view_mode_toggle';
-import { SHOW_FIELD_STATISTICS } from '../../../../../common';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import {
   getVisualizeInformation,
@@ -36,33 +33,32 @@ const DiscoverHistogramMemoized = memo(DiscoverHistogram);
 export const CHART_HIDDEN_KEY = 'discover:chartHidden';
 
 export function DiscoverChart({
+  className,
   resetSavedSearch,
   savedSearch,
   savedSearchDataChart$,
   savedSearchDataTotalHits$,
   stateContainer,
   dataView,
-  viewMode,
-  setDiscoverViewMode,
   hideChart,
   interval,
   isTimeBased,
+  appendHistogram,
 }: {
+  className?: string;
   resetSavedSearch: () => void;
   savedSearch: SavedSearch;
   savedSearchDataChart$: DataCharts$;
   savedSearchDataTotalHits$: DataTotalHits$;
   stateContainer: GetStateReturn;
   dataView: DataView;
-  viewMode: VIEW_MODE;
-  setDiscoverViewMode: (viewMode: VIEW_MODE) => void;
   isTimeBased: boolean;
   hideChart?: boolean;
   interval?: string;
+  appendHistogram?: ReactElement;
 }) {
-  const { uiSettings, data, storage } = useDiscoverServices();
+  const { data, storage } = useDiscoverServices();
   const [showChartOptionsPopover, setShowChartOptionsPopover] = useState(false);
-  const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false;
 
   const chartRef = useRef<{ element: HTMLElement | null; moveFocus: boolean }>({
     element: null,
@@ -126,9 +122,15 @@ export function DiscoverChart({
   );
 
   return (
-    <EuiFlexGroup direction="column" alignItems="stretch" gutterSize="none" responsive={false}>
+    <EuiFlexGroup
+      className={className}
+      direction="column"
+      alignItems="stretch"
+      gutterSize="none"
+      responsive={false}
+    >
       <EuiFlexItem grow={false} className="dscResultCount">
-        <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
+        <EuiFlexGroup justifyContent="spaceBetween" gutterSize="none" responsive={false}>
           <EuiFlexItem
             grow={false}
             className="dscResultCount__title eui-textTruncate eui-textNoWrap"
@@ -139,14 +141,6 @@ export function DiscoverChart({
               onResetQuery={resetSavedSearch}
             />
           </EuiFlexItem>
-          {showViewModeToggle && (
-            <EuiFlexItem grow={false}>
-              <DocumentViewModeToggle
-                viewMode={viewMode}
-                setDiscoverViewMode={setDiscoverViewMode}
-              />
-            </EuiFlexItem>
-          )}
           {isTimeBased && (
             <EuiFlexItem className="dscResultCount__toggle" grow={false}>
               <EuiFlexGroup direction="row" gutterSize="s" responsive={false}>
@@ -203,7 +197,7 @@ export function DiscoverChart({
         </EuiFlexGroup>
       </EuiFlexItem>
       {isTimeBased && !hideChart && (
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem>
           <section
             ref={(element) => (chartRef.current.element = element)}
             tabIndex={-1}
@@ -218,7 +212,7 @@ export function DiscoverChart({
               stateContainer={stateContainer}
             />
           </section>
-          <EuiSpacer size="s" />
+          {appendHistogram}
         </EuiFlexItem>
       )}
     </EuiFlexGroup>

src/plugins/discover/public/application/main/components/field_stats_table/field_stats_table.tsx

@@ -18,6 +18,8 @@ import {
   isErrorEmbeddable,
 } from '@kbn/embeddable-plugin/public';
 import type { SavedSearch } from '@kbn/saved-search-plugin/public';
+import { EuiFlexItem } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import { FIELD_STATISTICS_LOADED } from './constants';
 import type { GetStateReturn } from '../../services/discover_state';
@@ -226,13 +228,22 @@ export const FieldStatisticsTable = (props: FieldStatisticsTableProps) => {
     };
   }, [embeddable, embeddableRoot, trackUiMetric]);
 
+  const statsTableCss = css`
+    overflow-y: auto;
+
+    .kbnDocTableWrapper {
+      overflow-x: hidden;
+    }
+  `;
+
   return (
-    <div
-      data-test-subj="dscFieldStatsEmbeddedContent"
-      ref={embeddableRoot}
-      style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden' }}
-      // Match the scroll bar of the Discover doc table
-      className="kbnDocTableWrapper"
-    />
+    <EuiFlexItem css={statsTableCss}>
+      <div
+        data-test-subj="dscFieldStatsEmbeddedContent"
+        ref={embeddableRoot}
+        // Match the scroll bar of the Discover doc table
+        className="kbnDocTableWrapper"
+      />
+    </EuiFlexItem>
   );
 };

src/plugins/discover/public/application/main/components/layout/discover_layout.scss

@@ -70,7 +70,9 @@ discover-app {
 }
 
 .dscTimechart {
-  display: block;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
   position: relative;
 
   // SASSTODO: the visualizing component should have an option or a modifier
@@ -81,13 +83,12 @@ discover-app {
 }
 
 .dscHistogram {
-  height: $euiSize * 7;
-  padding: 0 $euiSizeS $euiSizeS * 2 $euiSizeS;
+  flex-grow: 1;
+  padding: 0 $euiSizeS $euiSizeS $euiSizeS;
 }
 
 .dscHistogramTimeRange {
   padding: 0 $euiSizeS 0 $euiSizeS;
-  margin-top: - $euiSizeS;
 }
 
 .dscTable {

src/plugins/discover/public/application/main/components/layout/discover_layout.test.tsx

@@ -172,24 +172,27 @@ function mountComponent(
 
 describe('Discover component', () => {
   test('selected data view without time field displays no chart toggle', () => {
-    const component = mountComponent(dataViewMock);
-    expect(component.find('[data-test-subj="discoverChartOptionsToggle"]').exists()).toBeFalsy();
+    const container = document.createElement('div');
+    mountComponent(dataViewMock, undefined, { attachTo: container });
+    expect(container.querySelector('[data-test-subj="discoverChartOptionsToggle"]')).toBeNull();
   });
 
   test('selected data view with time field displays chart toggle', () => {
-    const component = mountComponent(dataViewWithTimefieldMock);
-    expect(component.find('[data-test-subj="discoverChartOptionsToggle"]').exists()).toBeTruthy();
+    const container = document.createElement('div');
+    mountComponent(dataViewWithTimefieldMock, undefined, { attachTo: container });
+    expect(container.querySelector('[data-test-subj="discoverChartOptionsToggle"]')).not.toBeNull();
   });
 
   test('sql query displays no chart toggle', () => {
-    const component = mountComponent(
+    const container = document.createElement('div');
+    mountComponent(
       dataViewWithTimefieldMock,
       false,
-      {},
+      { attachTo: container },
       { sql: 'SELECT * FROM test' },
       true
     );
-    expect(component.find('[data-test-subj="discoverChartOptionsToggle"]').exists()).toBeFalsy();
+    expect(container.querySelector('[data-test-subj="discoverChartOptionsToggle"]')).toBeNull();
   });
 
   test('the saved search title h1 gains focus on navigate', () => {

src/plugins/discover/public/application/main/components/layout/discover_layout.tsx

@@ -12,7 +12,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiHideFor,
-  EuiHorizontalRule,
   EuiPage,
   EuiPageBody,
   EuiPageContent_Deprecated as EuiPageContent,
@@ -34,20 +33,17 @@ import { SEARCH_FIELDS_FROM_SOURCE, SHOW_FIELD_STATISTICS } from '../../../../..
 import { popularizeField } from '../../../../utils/popularize_field';
 import { DiscoverTopNav } from '../top_nav/discover_topnav';
 import { DocViewFilterFn } from '../../../../services/doc_views/doc_views_types';
-import { DiscoverChart } from '../chart';
 import { getResultState } from '../../utils/get_result_state';
 import { DiscoverUninitialized } from '../uninitialized/uninitialized';
 import { DataMainMsg, RecordRawType } from '../../hooks/use_saved_search';
 import { useColumns } from '../../../../hooks/use_data_grid_columns';
-import { DiscoverDocuments } from './discover_documents';
 import { FetchStatus } from '../../../types';
 import { useDataState } from '../../hooks/use_data_state';
-import { FieldStatisticsTable } from '../field_stats_table';
 import { VIEW_MODE } from '../../../../components/view_mode_toggle';
-import { DOCUMENTS_VIEW_CLICK, FIELD_STATISTICS_VIEW_CLICK } from '../field_stats_table/constants';
 import { hasActiveFilter } from './utils';
 import { getRawRecordType } from '../../utils/get_raw_record_type';
 import { SavedSearchURLConflictCallout } from '../../../../components/saved_search_url_conflict_callout/saved_search_url_conflict_callout';
+import { DiscoverMainContent } from './discover_main_content';
 
 /**
  * Local storage key for sidebar persistence state
@@ -56,8 +52,6 @@ export const SIDEBAR_CLOSED_KEY = 'discover:sidebarClosed';
 
 const SidebarMemoized = React.memo(DiscoverSidebarResponsive);
 const TopNavMemoized = React.memo(DiscoverTopNav);
-const DiscoverChartMemoized = React.memo(DiscoverChart);
-const FieldStatisticsTableMemoized = React.memo(FieldStatisticsTable);
 
 export function DiscoverLayout({
   dataView,
@@ -88,7 +82,7 @@ export function DiscoverLayout({
     spaces,
     inspector,
   } = useDiscoverServices();
-  const { main$, charts$, totalHits$ } = savedSearchData$;
+  const { main$ } = savedSearchData$;
   const [inspectorSession, setInspectorSession] = useState<InspectorSession | undefined>(undefined);
   const dataState: DataMainMsg = useDataState(main$);
 
@@ -97,21 +91,6 @@ export function DiscoverLayout({
     return state.viewMode ?? VIEW_MODE.DOCUMENT_LEVEL;
   }, [uiSettings, state.viewMode]);
 
-  const setDiscoverViewMode = useCallback(
-    (mode: VIEW_MODE) => {
-      stateContainer.setAppState({ viewMode: mode });
-
-      if (trackUiMetric) {
-        if (mode === VIEW_MODE.AGGREGATED_LEVEL) {
-          trackUiMetric(METRIC_TYPE.CLICK, FIELD_STATISTICS_VIEW_CLICK);
-        } else {
-          trackUiMetric(METRIC_TYPE.CLICK, DOCUMENTS_VIEW_CLICK);
-        }
-      }
-    },
-    [trackUiMetric, stateContainer]
-  );
-
   const fetchCounter = useRef<number>(0);
 
   useEffect(() => {
@@ -219,6 +198,8 @@ export function DiscoverLayout({
     }
   }, [dataState.error, isPlainRecord]);
 
+  const resizeRef = useRef<HTMLDivElement>(null);
+
   return (
     <EuiPage className="dscPage" data-fetch-counter={fetchCounter.current}>
       <h1
@@ -303,6 +284,7 @@ export function DiscoverLayout({
           </EuiHideFor>
           <EuiFlexItem className="dscPageContent__wrapper">
             <EuiPageContent
+              panelRef={resizeRef}
               verticalPosition={contentCentered ? 'center' : undefined}
               horizontalPosition={contentCentered ? 'center' : undefined}
               paddingSize="none"
@@ -327,61 +309,25 @@ export function DiscoverLayout({
               )}
               {resultState === 'loading' && <LoadingSpinner />}
               {resultState === 'ready' && (
-                <EuiFlexGroup
-                  className="dscPageContent__inner"
-                  direction="column"
-                  alignItems="stretch"
-                  gutterSize="none"
-                  responsive={false}
-                >
-                  {!isPlainRecord && (
-                    <>
-                      <EuiFlexItem grow={false}>
-                        <DiscoverChartMemoized
-                          resetSavedSearch={resetSavedSearch}
-                          savedSearch={savedSearch}
-                          savedSearchDataChart$={charts$}
-                          savedSearchDataTotalHits$={totalHits$}
-                          stateContainer={stateContainer}
-                          dataView={dataView}
-                          viewMode={viewMode}
-                          setDiscoverViewMode={setDiscoverViewMode}
-                          hideChart={state.hideChart}
-                          interval={state.interval}
-                          isTimeBased={isTimeBased}
-                        />
-                      </EuiFlexItem>
-                      <EuiHorizontalRule margin="none" />
-                    </>
-                  )}
-                  {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? (
-                    <DiscoverDocuments
-                      documents$={savedSearchData$.documents$}
-                      expandedDoc={expandedDoc}
-                      dataView={dataView}
-                      navigateTo={navigateTo}
-                      onAddFilter={!isPlainRecord ? (onAddFilter as DocViewFilterFn) : undefined}
-                      savedSearch={savedSearch}
-                      setExpandedDoc={setExpandedDoc}
-                      state={state}
-                      stateContainer={stateContainer}
-                      onFieldEdited={!isPlainRecord ? onFieldEdited : undefined}
-                    />
-                  ) : (
-                    <FieldStatisticsTableMemoized
-                      availableFields$={savedSearchData$.availableFields$}
-                      savedSearch={savedSearch}
-                      dataView={dataView}
-                      query={state.query}
-                      filters={state.filters}
-                      columns={columns}
-                      stateContainer={stateContainer}
-                      onAddFilter={!isPlainRecord ? (onAddFilter as DocViewFilterFn) : undefined}
-                      trackUiMetric={trackUiMetric}
-                      savedSearchRefetch$={savedSearchRefetch$}
-                    />
-                  )}
-                </EuiFlexGroup>
+                <DiscoverMainContent
+                  isPlainRecord={isPlainRecord}
+                  dataView={dataView}
+                  navigateTo={navigateTo}
+                  resetSavedSearch={resetSavedSearch}
+                  expandedDoc={expandedDoc}
+                  setExpandedDoc={setExpandedDoc}
+                  savedSearch={savedSearch}
+                  savedSearchData$={savedSearchData$}
+                  savedSearchRefetch$={savedSearchRefetch$}
+                  state={state}
+                  stateContainer={stateContainer}
+                  isTimeBased={isTimeBased}
+                  viewMode={viewMode}
+                  onAddFilter={onAddFilter as DocViewFilterFn}
+                  onFieldEdited={onFieldEdited}
+                  columns={columns}
+                  resizeRef={resizeRef}
+                />
               )}
             </EuiPageContent>
           </EuiFlexItem>