Add styling for canvas for query enhancement

changelogs/fragments/7537.yml

@@ -0,0 +1,2 @@
+feat:
+- Add styling for canvas for query enhancement ([#7537](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7537))

src/plugins/discover/public/application/components/chart/_histogram.scss

@@ -9,3 +9,8 @@
 .dscHistogram .echChartBackground {
   background-color: inherit !important;
 }
+
+.dscChart__wrapper {
+  border-top: 1px solid $euiColorLightShade;
+  border-bottom: 1px solid $euiColorLightShade;
+}

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

@@ -5,10 +5,10 @@
 
 import './_histogram.scss';
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { IUiSettingsClient } from 'opensearch-dashboards/public';
 import { DataPublicPluginStart, search } from '../../../../../data/public';
@@ -30,6 +30,8 @@ interface DiscoverChartProps {
   showResetButton?: boolean;
   isTimeBased?: boolean;
   services: DiscoverServices;
+  isEnhancementsEnabled: boolean;
+  discoverOptions: any;
 }
 
 export const DiscoverChart = ({
@@ -42,6 +44,8 @@ export const DiscoverChart = ({
   isTimeBased,
   services,
   showResetButton = false,
+  isEnhancementsEnabled,
+  discoverOptions,
 }: DiscoverChartProps) => {
   const { refetch$ } = useDiscoverContext();
   const { from, to } = data.query.timefilter.timefilter.getTime();
@@ -65,29 +69,75 @@ export const DiscoverChart = ({
     },
     [data]
   );
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const hitsCounter = (
+    <div className="dscChart__hitsCounter">
+      <HitsCounter
+        hits={hits > 0 ? hits : 0}
+        showResetButton={showResetButton}
+        onResetQuery={resetQuery}
+      />
+    </div>
+  );
+
+  const timeChartHeader = (
+    <div className="dscChart__TimechartHeader">
+      <TimechartHeader
+        bucketInterval={bucketInterval}
+        dateFormat={config.get('dateFormat')}
+        timeRange={timeRange}
+        options={search.aggs.intervalOptions}
+        onChangeInterval={onChangeInterval}
+        stateInterval={interval || ''}
+      />
+    </div>
+  );
+
+  const toggleLabel = i18n.translate('queryEditor.collapse', {
+    defaultMessage: 'Toggle query editor',
+  });
+
+  const toggle = (
+    <EuiToolTip content={toggleLabel}>
+      <EuiButtonIcon
+        aria-expanded={!isCollapsed}
+        aria-label={toggleLabel}
+        data-test-subj="queryEditorCollapseBtn"
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        iconType={!isCollapsed ? 'arrowRight' : 'arrowDown'}
+        iconSize={'s'}
+      />
+    </EuiToolTip>
+  );
+
+  const queryEnhancedHistogramHeader = (
+    <EuiFlexGroup direction="row" gutterSize="m">
+      <EuiFlexItem grow={false}>{toggle}</EuiFlexItem>
+      <EuiFlexItem grow={false}>{hitsCounter}</EuiFlexItem>
+      <EuiFlexItem grow={false}>{isTimeBased && timeChartHeader}</EuiFlexItem>
+      <EuiFlexItem grow={false}>{discoverOptions}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  const histogramHeader = (
+    <EuiFlexGroup direction="column" gutterSize="xs">
+      <EuiFlexItem grow={false}>{hitsCounter}</EuiFlexItem>
+      <EuiFlexItem grow={false}>{isTimeBased && timeChartHeader}</EuiFlexItem>
+      <EuiFlexItem grow={false}>{discoverOptions}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  const showHistogram = !isEnhancementsEnabled || isCollapsed;
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="none">
-      <EuiFlexItem grow={false} className="dscChart__hitsCounter">
-        <HitsCounter
-          hits={hits > 0 ? hits : 0}
-          showResetButton={showResetButton}
-          onResetQuery={resetQuery}
-        />
-      </EuiFlexItem>
-      {isTimeBased && (
-        <EuiFlexItem className="dscChart__TimechartHeader">
-          <TimechartHeader
-            bucketInterval={bucketInterval}
-            dateFormat={config.get('dateFormat')}
-            timeRange={timeRange}
-            options={search.aggs.intervalOptions}
-            onChangeInterval={onChangeInterval}
-            stateInterval={interval || ''}
-          />
-        </EuiFlexItem>
-      )}
-      {isTimeBased && chartData && (
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="none"
+      className={isEnhancementsEnabled ? 'dscChart__wrapper' : ''}
+    >
+      {isEnhancementsEnabled ? queryEnhancedHistogramHeader : histogramHeader}
+      {isTimeBased && chartData && showHistogram && (
         <EuiFlexItem grow={false}>
           <section
             aria-label={i18n.translate('discover.histogramOfFoundDocumentsAriaLabel', {

src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx

@@ -3,25 +3,84 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
+
 import './discover_chart_container.scss';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
+import {
+  EuiButtonIcon,
+  EuiCompressedSwitch,
+  EuiContextMenu,
+  EuiPanel,
+  EuiPopover,
+} from '@elastic/eui';
 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 { QUERY_ENHANCEMENT_ENABLED_SETTING } from '../../../../common';
+import { getNewDiscoverSetting, setNewDiscoverSetting } from '../../components/utils/local_storage';
 
 export const DiscoverChartContainer = ({ hits, bucketInterval, chartData }: SearchData) => {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
-  const { uiSettings, data, core } = services;
+  const { uiSettings, data, core, storage } = services;
   const { indexPattern, savedSearch } = useDiscoverContext();
+  const isEnhancementsEnabled = uiSettings.get(QUERY_ENHANCEMENT_ENABLED_SETTING);
+  const [isOptionsOpen, setOptionsOpen] = useState(false);
+  const [useLegacy, setUseLegacy] = useState(!getNewDiscoverSetting(storage));
 
   const isTimeBased = useMemo(() => (indexPattern ? indexPattern.isTimeBased() : false), [
     indexPattern,
   ]);
 
   if (!hits) return null;
 
+  const discoverOptions = (
+    <EuiPopover
+      button={
+        <EuiButtonIcon
+          data-test-subj="discoverOptionsButton"
+          aria-label={i18n.translate('discover.canvas.discoverOptionsButtonLabel', {
+            defaultMessage: 'Options for discover',
+          })}
+          size="s"
+          iconType="gear"
+          onClick={() => setOptionsOpen(!isOptionsOpen)}
+        />
+      }
+      closePopover={() => setOptionsOpen(false)}
+      isOpen={isOptionsOpen}
+      panelPaddingSize="none"
+    >
+      <EuiContextMenu
+        initialPanelId={0}
+        size="s"
+        panels={[
+          {
+            id: 0,
+            title: 'Options',
+            content: (
+              <EuiPanel>
+                <EuiCompressedSwitch
+                  label="Enable legacy Discover"
+                  checked={useLegacy}
+                  data-test-subj="discoverOptionsLegacySwitch"
+                  onChange={(e) => {
+                    const checked = e.target.checked;
+                    setUseLegacy(checked);
+                    setNewDiscoverSetting(!checked, storage);
+                    window.location.reload();
+                  }}
+                />
+              </EuiPanel>
+            ),
+          },
+        ]}
+      />
+    </EuiPopover>
+  );
+
   return (
     <DiscoverChart
       bucketInterval={bucketInterval}
@@ -35,6 +94,8 @@ export const DiscoverChartContainer = ({ hits, bucketInterval, chartData }: Sear
       services={services}
       showResetButton={!!savedSearch && !!savedSearch.id}
       isTimeBased={isTimeBased}
+      isEnhancementsEnabled={isEnhancementsEnabled}
+      discoverOptions={discoverOptions}
     />
   );
 };

src/plugins/discover/public/application/view_components/canvas/index.tsx

@@ -118,54 +118,6 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR
   };
   const showSaveQuery = !!capabilities.discover?.saveQuery;
 
-  const [isOptionsOpen, setOptionsOpen] = useState(false);
-  const [useLegacy, setUseLegacy] = useState(!getNewDiscoverSetting(storage));
-  const DiscoverOptions = () => (
-    <EuiPopover
-      button={
-        <EuiButtonIcon
-          data-test-subj="discoverOptionsButton"
-          aria-label={i18n.translate('discover.canvas.discoverOptionsButtonLabel', {
-            defaultMessage: 'Options for discover',
-          })}
-          size="s"
-          iconType="gear"
-          onClick={() => setOptionsOpen(!isOptionsOpen)}
-        />
-      }
-      closePopover={() => setOptionsOpen(false)}
-      isOpen={isOptionsOpen}
-      panelPaddingSize="none"
-      className="dscCanvas_options"
-    >
-      <EuiContextMenu
-        initialPanelId={0}
-        size="s"
-        panels={[
-          {
-            id: 0,
-            title: 'Options',
-            content: (
-              <EuiPanel>
-                <EuiCompressedSwitch
-                  label="Enable legacy Discover"
-                  checked={useLegacy}
-                  data-test-subj="discoverOptionsLegacySwitch"
-                  onChange={(e) => {
-                    const checked = e.target.checked;
-                    setUseLegacy(checked);
-                    setNewDiscoverSetting(!checked, storage);
-                    window.location.reload();
-                  }}
-                />
-              </EuiPanel>
-            ),
-          },
-        ]}
-      />
-    </EuiPopover>
-  );
-
   return (
     <EuiPanel
       panelRef={panelRef}
@@ -192,11 +144,16 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR
         <DiscoverUninitialized onRefresh={() => refetch$.next()} />
       )}
       {fetchState.status === ResultStatus.LOADING && <LoadingSpinner />}
-      {fetchState.status === ResultStatus.READY && (
+      {fetchState.status === ResultStatus.READY && isEnhancementsEnabled && (
+        <>
+          <MemoizedDiscoverChartContainer {...fetchState} />
+          <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
+        </>
+      )}
+      {fetchState.status === ResultStatus.READY && !isEnhancementsEnabled && (
         <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
           <MemoizedDiscoverChartContainer {...fetchState} />
           <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
-          <DiscoverOptions />
         </EuiPanel>
       )}
     </EuiPanel>