[ML] Add Index data visualizer grid embeddable as extra view within Discover

src/plugins/discover/common/index.ts

@@ -19,5 +19,6 @@ export const DOC_TABLE_LEGACY = 'doc_table:legacy';
 export const MODIFY_COLUMNS_ON_SWITCH = 'discover:modifyColumnsOnSwitch';
 export const SEARCH_FIELDS_FROM_SOURCE = 'discover:searchFieldsFromSource';
 export const MAX_DOC_FIELDS_DISPLAYED = 'discover:maxDocFieldsDisplayed';
+export const SHOW_FIELD_STATISTICS = 'discover:showFieldStatistics';
 export const SHOW_MULTIFIELDS = 'discover:showMultiFields';
 export const SEARCH_EMBEDDABLE_TYPE = 'search';

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

@@ -19,6 +19,7 @@ import { discoverServiceMock } from '../../../../../__mocks__/services';
 import { FetchStatus } from '../../../../types';
 import { Chart } from './point_series';
 import { DiscoverChart } from './discover_chart';
+import { VIEW_MODE } from '../view_mode_toggle';
 
 setHeaderActionMenuMounter(jest.fn());
 
@@ -94,6 +95,8 @@ function getProps(timefield?: string) {
     state: { columns: [] },
     stateContainer: {} as GetStateReturn,
     timefield,
+    viewMode: VIEW_MODE.DOCUMENT_LEVEL,
+    setDiscoverViewMode: jest.fn(),
   };
 }
 

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

@@ -23,6 +23,8 @@ import { DiscoverHistogram } from './histogram';
 import { DataCharts$, DataTotalHits$ } from '../../services/use_saved_search';
 import { DiscoverServices } from '../../../../../build_services';
 import { useChartPanels } from './use_chart_panels';
+import { VIEW_MODE, DocumentViewModeToggle } from '../view_mode_toggle';
+import { SHOW_FIELD_STATISTICS } from '../../../../../../common';
 
 const DiscoverHistogramMemoized = memo(DiscoverHistogram);
 export const CHART_HIDDEN_KEY = 'discover:chartHidden';
@@ -36,6 +38,8 @@ export function DiscoverChart({
   state,
   stateContainer,
   timefield,
+  viewMode,
+  setDiscoverViewMode,
 }: {
   resetSavedSearch: () => void;
   savedSearch: SavedSearch;
@@ -45,8 +49,11 @@ export function DiscoverChart({
   state: AppState;
   stateContainer: GetStateReturn;
   timefield?: string;
+  viewMode: VIEW_MODE;
+  setDiscoverViewMode: (viewMode: VIEW_MODE) => void;
 }) {
   const [showChartOptionsPopover, setShowChartOptionsPopover] = useState(false);
+  const showViewModeToggle = services.uiSettings.get(SHOW_FIELD_STATISTICS) ?? false;
 
   const { data, storage } = services;
 
@@ -108,6 +115,16 @@ export function DiscoverChart({
               onResetQuery={resetSavedSearch}
             />
           </EuiFlexItem>
+
+          {showViewModeToggle && (
+            <EuiFlexItem grow={false}>
+              <DocumentViewModeToggle
+                viewMode={viewMode}
+                setDiscoverViewMode={setDiscoverViewMode}
+              />
+            </EuiFlexItem>
+          )}
+
           {timefield && (
             <EuiFlexItem className="dscResultCount__toggle" grow={false}>
               <EuiPopover

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

@@ -4,6 +4,10 @@ discover-app {
   flex-grow: 1;
 }
 
+.dscAppWrapper {
+  overflow-y: hidden;
+}
+
 .dscPage {
   @include euiBreakpoint('m', 'l', 'xl') {
     @include kibanaFullBodyHeight();

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

@@ -6,9 +6,8 @@
  * Side Public License, v 1.
  */
 import './discover_layout.scss';
-import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  EuiSpacer,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
@@ -17,6 +16,7 @@ import {
   EuiPage,
   EuiPageBody,
   EuiPageContent,
+  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
@@ -26,7 +26,7 @@ import { LoadingSpinner } from '../loading_spinner/loading_spinner';
 import { esFilters, IndexPatternField } from '../../../../../../../data/public';
 import { DiscoverSidebarResponsive } from '../sidebar';
 import { DiscoverLayoutProps } from './types';
-import { SEARCH_FIELDS_FROM_SOURCE } from '../../../../../../common';
+import { SEARCH_FIELDS_FROM_SOURCE, SHOW_FIELD_STATISTICS } from '../../../../../../common';
 import { popularizeField } from '../../../../helpers/popularize_field';
 import { DiscoverTopNav } from '../top_nav/discover_topnav';
 import { DocViewFilterFn, ElasticSearchHit } from '../../../../doc_views/doc_views_types';
@@ -43,6 +43,8 @@ import {
   SavedSearchURLConflictCallout,
   useSavedSearchAliasMatchRedirect,
 } from '../../../../../saved_searches';
+import { DiscoverDataVisualizerGrid } from '../../../../components/data_visualizer_grid';
+import { VIEW_MODE } from '../view_mode_toggle';
 
 /**
  * Local storage key for sidebar persistence state
@@ -52,6 +54,7 @@ export const SIDEBAR_CLOSED_KEY = 'discover:sidebarClosed';
 const SidebarMemoized = React.memo(DiscoverSidebarResponsive);
 const TopNavMemoized = React.memo(DiscoverTopNav);
 const DiscoverChartMemoized = React.memo(DiscoverChart);
+const DataVisualizerGridMemoized = React.memo(DiscoverDataVisualizerGrid);
 
 export function DiscoverLayout({
   indexPattern,
@@ -83,6 +86,19 @@ export function DiscoverLayout({
   const { main$, charts$, totalHits$ } = savedSearchData$;
   const [expandedDoc, setExpandedDoc] = useState<ElasticSearchHit | undefined>(undefined);
   const [inspectorSession, setInspectorSession] = useState<InspectorSession | undefined>(undefined);
+
+  const viewMode = useMemo(() => {
+    if (uiSettings.get(SHOW_FIELD_STATISTICS) !== true) return VIEW_MODE.DOCUMENT_LEVEL;
+    return state.viewMode ?? VIEW_MODE.DOCUMENT_LEVEL;
+  }, [uiSettings, state.viewMode]);
+
+  const setDiscoverViewMode = useCallback(
+    (mode: VIEW_MODE) => {
+      stateContainer.setAppState({ viewMode: mode });
+    },
+    [stateContainer]
+  );
+
   const fetchCounter = useRef<number>(0);
   const dataState: DataMainMsg = useDataState(main$);
 
@@ -213,6 +229,7 @@ export function DiscoverLayout({
               trackUiMetric={trackUiMetric}
               useNewFieldsApi={useNewFieldsApi}
               onEditRuntimeField={onEditRuntimeField}
+              viewMode={viewMode}
             />
           </EuiFlexItem>
           <EuiHideFor sizes={['xs', 's']}>
@@ -279,22 +296,36 @@ export function DiscoverLayout({
                       services={services}
                       stateContainer={stateContainer}
                       timefield={timeField}
+                      viewMode={viewMode}
+                      setDiscoverViewMode={setDiscoverViewMode}
                     />
                   </EuiFlexItem>
                   <EuiHorizontalRule margin="none" />
-
-                  <DiscoverDocuments
-                    documents$={savedSearchData$.documents$}
-                    expandedDoc={expandedDoc}
-                    indexPattern={indexPattern}
-                    navigateTo={navigateTo}
-                    onAddFilter={onAddFilter as DocViewFilterFn}
-                    savedSearch={savedSearch}
-                    services={services}
-                    setExpandedDoc={setExpandedDoc}
-                    state={state}
-                    stateContainer={stateContainer}
-                  />
+                  {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? (
+                    <DiscoverDocuments
+                      documents$={savedSearchData$.documents$}
+                      expandedDoc={expandedDoc}
+                      indexPattern={indexPattern}
+                      navigateTo={navigateTo}
+                      onAddFilter={onAddFilter as DocViewFilterFn}
+                      savedSearch={savedSearch}
+                      services={services}
+                      setExpandedDoc={setExpandedDoc}
+                      state={state}
+                      stateContainer={stateContainer}
+                    />
+                  ) : (
+                    <DataVisualizerGridMemoized
+                      savedSearch={savedSearch}
+                      services={services}
+                      indexPattern={indexPattern}
+                      query={state.query}
+                      filters={state.filters}
+                      columns={columns}
+                      stateContainer={stateContainer}
+                      onAddFilter={onAddFilter}
+                    />
+                  )}
                 </EuiFlexGroup>
               )}
             </EuiPageContent>

src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx

@@ -19,6 +19,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { UiCounterMetricType } from '@kbn/analytics';
@@ -251,6 +252,11 @@ export interface DiscoverFieldProps {
    * @param fieldName name of the field to delete
    */
   onDeleteField?: (fieldName: string) => void;
+
+  /**
+   * Optionally show or hide field stats in the popover
+   */
+  showFieldStats?: boolean;
 }
 
 function DiscoverFieldComponent({
@@ -266,6 +272,7 @@ function DiscoverFieldComponent({
   multiFields,
   onEditField,
   onDeleteField,
+  showFieldStats,
 }: DiscoverFieldProps) {
   const [infoIsOpen, setOpen] = useState(false);
 
@@ -362,22 +369,35 @@ function DiscoverFieldComponent({
     const details = getDetails(field);
     return (
       <>
-        <DiscoverFieldDetails
-          indexPattern={indexPattern}
-          field={field}
-          details={details}
-          onAddFilter={onAddFilter}
-        />
+        {showFieldStats && (
+          <>
+            <EuiTitle size="xxxs">
+              <h5>
+                {i18n.translate('discover.fieldChooser.discoverField.fieldTopValuesLabel', {
+                  defaultMessage: 'Top 5 values',
+                })}
+              </h5>
+            </EuiTitle>
+            <DiscoverFieldDetails
+              indexPattern={indexPattern}
+              field={field}
+              details={details}
+              onAddFilter={onAddFilter}
+            />
+          </>
+        )}
+
         {multiFields && (
           <>
-            <EuiSpacer size="m" />
+            {showFieldStats && <EuiSpacer size="m" />}
             <MultiFields
               multiFields={multiFields}
               alwaysShowActionButton={alwaysShowActionButton}
               toggleDisplay={toggleDisplay}
             />
           </>
         )}
+        {(showFieldStats || multiFields) && <EuiHorizontalRule margin="m" />}
         <DiscoverFieldVisualize
           field={field}
           indexPattern={indexPattern}
@@ -388,7 +408,6 @@ function DiscoverFieldComponent({
       </>
     );
   };
-
   return (
     <EuiPopover
       display="block"
@@ -418,13 +437,6 @@ function DiscoverFieldComponent({
       panelClassName="dscSidebarItem__fieldPopoverPanel"
     >
       {popoverTitle}
-      <EuiTitle size="xxxs">
-        <h5>
-          {i18n.translate('discover.fieldChooser.discoverField.fieldTopValuesLabel', {
-            defaultMessage: 'Top 5 values',
-          })}
-        </h5>
-      </EuiTitle>
       {infoIsOpen && renderPopover()}
     </EuiPopover>
   );

src/plugins/discover/public/application/apps/main/components/sidebar/discover_field_visualize.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { EuiButton, EuiPopoverFooter } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { METRIC_TYPE, UiCounterMetricType } from '@kbn/analytics';
 import type { IndexPattern, IndexPatternField } from 'src/plugins/data/common';
@@ -46,21 +46,19 @@ export const DiscoverFieldVisualize: React.FC<Props> = React.memo(
     };
 
     return (
-      <EuiPopoverFooter>
-        {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
-        <EuiButton
-          fullWidth
-          size="s"
-          href={visualizeInfo.href}
-          onClick={handleVisualizeLinkClick}
-          data-test-subj={`fieldVisualize-${field.name}`}
-        >
-          <FormattedMessage
-            id="discover.fieldChooser.visualizeButton.label"
-            defaultMessage="Visualize"
-          />
-        </EuiButton>
-      </EuiPopoverFooter>
+      // eslint-disable-next-line @elastic/eui/href-or-on-click
+      <EuiButton
+        fullWidth
+        size="s"
+        href={visualizeInfo.href}
+        onClick={handleVisualizeLinkClick}
+        data-test-subj={`fieldVisualize-${field.name}`}
+      >
+        <FormattedMessage
+          id="discover.fieldChooser.visualizeButton.label"
+          defaultMessage="Visualize"
+        />
+      </EuiButton>
     );
   }
 );

src/plugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.test.tsx

@@ -22,6 +22,7 @@ import { DiscoverSidebarComponent as DiscoverSidebar } from './discover_sidebar'
 import { ElasticSearchHit } from '../../../../doc_views/doc_views_types';
 import { discoverServiceMock as mockDiscoverServices } from '../../../../../__mocks__/services';
 import { stubLogstashIndexPattern } from '../../../../../../../data/common/stubs';
+import { VIEW_MODE } from '../view_mode_toggle';
 
 jest.mock('../../../../../kibana_services', () => ({
   getServices: () => mockDiscoverServices,
@@ -65,6 +66,7 @@ function getCompProps(): DiscoverSidebarProps {
     setFieldFilter: jest.fn(),
     onEditRuntimeField: jest.fn(),
     editField: jest.fn(),
+    viewMode: VIEW_MODE.DOCUMENT_LEVEL,
   };
 }