[Discover] Improve styling of graphs in sidebar

src/plugins/discover/public/application/components/sidebar/discover_field_bucket.scss

@@ -0,0 +1,4 @@
+.dscFieldDetails__barContainer {
+  // Constrains value to the flex item, and allows for truncation when necessary
+  min-width: 0;
+}

src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx

@@ -17,11 +17,19 @@
  * under the License.
  */
 import React from 'react';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import {
+  EuiText,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiToolTip,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { StringFieldProgressBar } from './string_progress_bar';
 import { Bucket } from './types';
 import { IndexPatternField } from '../../../../../data/public';
+import './discover_field_bucket.scss';
 
 interface Props {
   bucket: Bucket;
@@ -45,13 +53,29 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
     }
   );
 
+  const tooltipContent = `${bucket.value}: ${bucket.count} (${bucket.percent}%)`;
+
   return (
     <>
-      <EuiFlexGroup gutterSize="xs" responsive={false}>
-        <EuiFlexItem className="eui-textTruncate">
-          <EuiText size="xs" className="eui-textTruncate">
-            {bucket.display === '' ? emptyTxt : bucket.display}
-          </EuiText>
+      <EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="s">
+        <EuiFlexItem className="dscFieldDetails__barContainer" grow={1}>
+          <EuiToolTip content={tooltipContent} delay="long" position="right">
+            <>
+              <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
+                <EuiFlexItem grow={1} className="eui-textTruncate">
+                  <EuiText size="xs" className="eui-textTruncate">
+                    {bucket.display === '' ? emptyTxt : bucket.display}
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false} className="eui-textTruncate">
+                  <EuiText color="secondary" size="xs" className="eui-textTruncate">
+                    {bucket.percent}%
+                  </EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <StringFieldProgressBar percent={bucket.percent} />
+            </>
+          </EuiToolTip>
         </EuiFlexItem>
         {field.filterable && (
           <EuiFlexItem grow={false}>
@@ -90,7 +114,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
           </EuiFlexItem>
         )}
       </EuiFlexGroup>
-      <StringFieldProgressBar percent={bucket.percent} count={bucket.count} />
+      <EuiSpacer size="s" />
     </>
   );
 }

src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { EuiLink, EuiSpacer, EuiIconTip, EuiText } from '@elastic/eui';
+import { EuiLink, EuiIconTip, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { DiscoverFieldBucket } from './discover_field_bucket';
 import { getWarnings } from './lib/get_warnings';
@@ -78,7 +78,6 @@ export function DiscoverFieldDetails({
 
       {details.visualizeUrl && (
         <>
-          <EuiSpacer size={'s'} />
           <EuiLink
             onClick={() => {
               getServices().core.application.navigateToApp(details.visualizeUrl.app, {

src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss

@@ -121,14 +121,6 @@
   }
 }
 
-/*
-  Fixes EUI known issue https://github.com/elastic/eui/issues/1749
-*/
-.dscProgressBarTooltip__anchor {
-  display: block;
-}
-
-
 .dscFieldSearch {
   padding: $euiSizeS;
 }

src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx

@@ -17,35 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiProgress } from '@elastic/eui';
 
 interface Props {
   percent: number;
-  count: number;
 }
 
-export function StringFieldProgressBar(props: Props) {
-  return (
-    <EuiToolTip
-      anchorClassName="dscProgressBarTooltip__anchor"
-      content={props.count}
-      delay="regular"
-      position="right"
-    >
-      <EuiFlexGroup alignItems="center" responsive={false}>
-        <EuiFlexItem>
-          <EuiProgress
-            value={props.percent}
-            max={100}
-            color="secondary"
-            aria-hidden={true}
-            size="l"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiText size="xs">{props.percent}%</EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiToolTip>
-  );
+export function StringFieldProgressBar({ percent }: Props) {
+  return <EuiProgress value={percent} max={100} color="secondary" aria-hidden={true} size="s" />;
 }