From 8ede5aaa39bddf4c04a99c3ffebcc9be07d09f76 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Mon, 15 Jun 2020 15:05:55 -0700
Subject: [PATCH 1/8] moved percentage

---
 .../components/sidebar/discover_field_bucket.tsx           | 7 ++++++-
 .../application/components/sidebar/string_progress_bar.tsx | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
index 398a945e0f876a..b2977af3ed7328 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
@@ -48,11 +48,16 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
   return (
     <>
       <EuiFlexGroup gutterSize="xs" responsive={false}>
-        <EuiFlexItem className="eui-textTruncate">
+        <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>
         {field.filterable && (
           <EuiFlexItem grow={false}>
             <div>
diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
index 7ea41aa4bf270c..bc0a81e8cba7e3 100644
--- a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
@@ -32,14 +32,14 @@ export function StringFieldProgressBar(props: Props) {
       delay="regular"
       position="right"
     >
-      <EuiFlexGroup alignItems="center" responsive={false}>
+      <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
         <EuiFlexItem>
           <EuiProgress
             value={props.percent}
             max={100}
             color="secondary"
             aria-hidden={true}
-            size="l"
+            size="s"
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

From 3a85faa4c42c788dd1851101207ff4271a9d17ce Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Mon, 15 Jun 2020 20:46:40 -0700
Subject: [PATCH 2/8] rearrange parts of graph

---
 .../sidebar/discover_field_bucket.tsx         | 51 ++++--------
 .../sidebar/string_progress_bar.scss          |  3 +
 .../sidebar/string_progress_bar.tsx           | 78 +++++++++++++++----
 3 files changed, 81 insertions(+), 51 deletions(-)
 create mode 100644 src/plugins/discover/public/application/components/sidebar/string_progress_bar.scss

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
index b2977af3ed7328..46c48bef9fe7b3 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
@@ -47,7 +47,12 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
 
   return (
     <>
-      <EuiFlexGroup gutterSize="xs" responsive={false}>
+      <EuiFlexGroup
+        justifyContent="spaceBetween"
+        style={{ width: 156 }}
+        gutterSize="xs"
+        responsive={false}
+      >
         <EuiFlexItem grow={1} className="eui-textTruncate">
           <EuiText size="xs" className="eui-textTruncate">
             {bucket.display === '' ? emptyTxt : bucket.display}
@@ -58,44 +63,14 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
             {bucket.percent}%
           </EuiText>
         </EuiFlexItem>
-        {field.filterable && (
-          <EuiFlexItem grow={false}>
-            <div>
-              <EuiButtonIcon
-                iconSize="s"
-                iconType="magnifyWithPlus"
-                onClick={() => onAddFilter(field, bucket.value, '+')}
-                aria-label={addLabel}
-                data-test-subj={`plus-${field.name}-${bucket.value}`}
-                style={{
-                  minHeight: 'auto',
-                  minWidth: 'auto',
-                  paddingRight: 2,
-                  paddingLeft: 2,
-                  paddingTop: 0,
-                  paddingBottom: 0,
-                }}
-              />
-              <EuiButtonIcon
-                iconSize="s"
-                iconType="magnifyWithMinus"
-                onClick={() => onAddFilter(field, bucket.value, '-')}
-                aria-label={removeLabel}
-                data-test-subj={`minus-${field.name}-${bucket.value}`}
-                style={{
-                  minHeight: 'auto',
-                  minWidth: 'auto',
-                  paddingTop: 0,
-                  paddingBottom: 0,
-                  paddingRight: 2,
-                  paddingLeft: 2,
-                }}
-              />
-            </div>
-          </EuiFlexItem>
-        )}
       </EuiFlexGroup>
-      <StringFieldProgressBar percent={bucket.percent} count={bucket.count} />
+      <StringFieldProgressBar
+        field={field}
+        value={bucket.value}
+        percent={bucket.percent}
+        onAddFilter={onAddFilter}
+        count={bucket.count}
+      />
     </>
   );
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.scss b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.scss
new file mode 100644
index 00000000000000..0cf0a2f352283e
--- /dev/null
+++ b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.scss
@@ -0,0 +1,3 @@
+.dscProgressBarTooltip__anchor {
+  margin-top: $euiSizeM * -1;
+}
diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
index bc0a81e8cba7e3..e2c34e57f632d6 100644
--- a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
@@ -17,34 +17,86 @@
  * under the License.
  */
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiText, EuiToolTip } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiProgress,
+  EuiText,
+  EuiToolTip,
+  EuiButtonIcon,
+} from '@elastic/eui';
+import { IndexPatternField } from '../../../../../data/public';
+import { i18n } from '@kbn/i18n';
+import './string_progress_bar.scss';
 
 interface Props {
   percent: number;
   count: number;
+  field: IndexPatternField;
+  onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void;
+  value: string;
 }
 
-export function StringFieldProgressBar(props: Props) {
+export function StringFieldProgressBar({ field, value, onAddFilter, percent, count }: Props) {
+  const addLabel = i18n.translate('discover.fieldChooser.detailViews.filterValueButtonAriaLabel', {
+    defaultMessage: 'Filter for {field}: "{value}"',
+    values: { value: value, field: field.name },
+  });
+  const removeLabel = i18n.translate(
+    'discover.fieldChooser.detailViews.filterOutValueButtonAriaLabel',
+    {
+      defaultMessage: 'Filter out {field}: "{value}"',
+      values: { value: value, field: field.name },
+    }
+  );
+  const tooltipContent = `${value} ${count}`;
   return (
     <EuiToolTip
       anchorClassName="dscProgressBarTooltip__anchor"
-      content={props.count}
+      content={tooltipContent}
       delay="regular"
       position="right"
     >
       <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
         <EuiFlexItem>
-          <EuiProgress
-            value={props.percent}
-            max={100}
-            color="secondary"
-            aria-hidden={true}
-            size="s"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiText size="xs">{props.percent}%</EuiText>
+          <EuiProgress value={percent} max={100} color="secondary" aria-hidden={true} size="s" />
         </EuiFlexItem>
+        {field.filterable && (
+          <EuiFlexItem grow={false}>
+            <div>
+              <EuiButtonIcon
+                iconSize="s"
+                iconType="magnifyWithPlus"
+                onClick={() => onAddFilter(field, value, '+')}
+                aria-label={addLabel}
+                data-test-subj={`plus-${field.name}-${value}`}
+                style={{
+                  minHeight: 'auto',
+                  minWidth: 'auto',
+                  paddingRight: 2,
+                  paddingLeft: 2,
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                }}
+              />
+              <EuiButtonIcon
+                iconSize="s"
+                iconType="magnifyWithMinus"
+                onClick={() => onAddFilter(field, value, '-')}
+                aria-label={removeLabel}
+                data-test-subj={`minus-${field.name}-${value}`}
+                style={{
+                  minHeight: 'auto',
+                  minWidth: 'auto',
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                  paddingRight: 2,
+                  paddingLeft: 2,
+                }}
+              />
+            </div>
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
     </EuiToolTip>
   );

From 063bf10ba0529afeab950e831726741254cecafe Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 16 Jun 2020 21:03:50 -0700
Subject: [PATCH 3/8] fixed layout

---
 .../sidebar/discover_field_bucket.scss        |  4 +
 .../sidebar/discover_field_bucket.tsx         | 81 +++++++++++++------
 .../sidebar/string_progress_bar.scss          |  3 -
 .../sidebar/string_progress_bar.tsx           | 66 +--------------
 4 files changed, 64 insertions(+), 90 deletions(-)
 create mode 100644 src/plugins/discover/public/application/components/sidebar/discover_field_bucket.scss
 delete mode 100644 src/plugins/discover/public/application/components/sidebar/string_progress_bar.scss

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.scss b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.scss
new file mode 100644
index 00000000000000..90b645f70084e6
--- /dev/null
+++ b/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;
+}
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
index 46c48bef9fe7b3..a982860b37d30a 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
@@ -17,11 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { EuiText, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer } 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;
@@ -47,30 +48,64 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
 
   return (
     <>
-      <EuiFlexGroup
-        justifyContent="spaceBetween"
-        style={{ width: 156 }}
-        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>
+      <EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="xs">
+        <EuiFlexItem className="dscFieldDetails__barContainer" grow={1}>
+          <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
+            value={bucket.value}
+            percent={bucket.percent}
+            count={bucket.count}
+          />
         </EuiFlexItem>
+        {field.filterable && (
+          <EuiFlexItem grow={false}>
+            <div>
+              <EuiButtonIcon
+                iconSize="s"
+                iconType="magnifyWithPlus"
+                onClick={() => onAddFilter(field, bucket.value, '+')}
+                aria-label={addLabel}
+                data-test-subj={`plus-${field.name}-${bucket.value}`}
+                style={{
+                  minHeight: 'auto',
+                  minWidth: 'auto',
+                  paddingRight: 2,
+                  paddingLeft: 2,
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                }}
+              />
+              <EuiButtonIcon
+                iconSize="s"
+                iconType="magnifyWithMinus"
+                onClick={() => onAddFilter(field, bucket.value, '-')}
+                aria-label={removeLabel}
+                data-test-subj={`minus-${field.name}-${bucket.value}`}
+                style={{
+                  minHeight: 'auto',
+                  minWidth: 'auto',
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                  paddingRight: 2,
+                  paddingLeft: 2,
+                }}
+              />
+            </div>
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
-      <StringFieldProgressBar
-        field={field}
-        value={bucket.value}
-        percent={bucket.percent}
-        onAddFilter={onAddFilter}
-        count={bucket.count}
-      />
+      <EuiSpacer size="s" />
     </>
   );
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.scss b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.scss
deleted file mode 100644
index 0cf0a2f352283e..00000000000000
--- a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.dscProgressBarTooltip__anchor {
-  margin-top: $euiSizeM * -1;
-}
diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
index e2c34e57f632d6..25fe4cf6765e57 100644
--- a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
@@ -17,38 +17,16 @@
  * under the License.
  */
 import React from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiProgress,
-  EuiText,
-  EuiToolTip,
-  EuiButtonIcon,
-} from '@elastic/eui';
-import { IndexPatternField } from '../../../../../data/public';
+import { EuiProgress, EuiText, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import './string_progress_bar.scss';
 
 interface Props {
   percent: number;
   count: number;
-  field: IndexPatternField;
-  onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void;
   value: string;
 }
 
 export function StringFieldProgressBar({ field, value, onAddFilter, percent, count }: Props) {
-  const addLabel = i18n.translate('discover.fieldChooser.detailViews.filterValueButtonAriaLabel', {
-    defaultMessage: 'Filter for {field}: "{value}"',
-    values: { value: value, field: field.name },
-  });
-  const removeLabel = i18n.translate(
-    'discover.fieldChooser.detailViews.filterOutValueButtonAriaLabel',
-    {
-      defaultMessage: 'Filter out {field}: "{value}"',
-      values: { value: value, field: field.name },
-    }
-  );
   const tooltipContent = `${value} ${count}`;
   return (
     <EuiToolTip
@@ -57,47 +35,7 @@ export function StringFieldProgressBar({ field, value, onAddFilter, percent, cou
       delay="regular"
       position="right"
     >
-      <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
-        <EuiFlexItem>
-          <EuiProgress value={percent} max={100} color="secondary" aria-hidden={true} size="s" />
-        </EuiFlexItem>
-        {field.filterable && (
-          <EuiFlexItem grow={false}>
-            <div>
-              <EuiButtonIcon
-                iconSize="s"
-                iconType="magnifyWithPlus"
-                onClick={() => onAddFilter(field, value, '+')}
-                aria-label={addLabel}
-                data-test-subj={`plus-${field.name}-${value}`}
-                style={{
-                  minHeight: 'auto',
-                  minWidth: 'auto',
-                  paddingRight: 2,
-                  paddingLeft: 2,
-                  paddingTop: 0,
-                  paddingBottom: 0,
-                }}
-              />
-              <EuiButtonIcon
-                iconSize="s"
-                iconType="magnifyWithMinus"
-                onClick={() => onAddFilter(field, value, '-')}
-                aria-label={removeLabel}
-                data-test-subj={`minus-${field.name}-${value}`}
-                style={{
-                  minHeight: 'auto',
-                  minWidth: 'auto',
-                  paddingTop: 0,
-                  paddingBottom: 0,
-                  paddingRight: 2,
-                  paddingLeft: 2,
-                }}
-              />
-            </div>
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
+      <EuiProgress value={percent} max={100} color="secondary" aria-hidden={true} size="s" />
     </EuiToolTip>
   );
 }

From d7b9db2a4e52732affa320e06c822c6606cf639d Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 17 Jun 2020 10:57:42 -0700
Subject: [PATCH 4/8] cleanup

---
 .../application/components/sidebar/discover_field_bucket.tsx | 2 +-
 .../application/components/sidebar/discover_sidebar.scss     | 1 -
 .../application/components/sidebar/string_progress_bar.tsx   | 5 ++---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
index a982860b37d30a..16fad8affed1ae 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
@@ -48,7 +48,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
 
   return (
     <>
-      <EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="xs">
+      <EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="s">
         <EuiFlexItem className="dscFieldDetails__barContainer" grow={1}>
           <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
             <EuiFlexItem grow={1} className="eui-textTruncate">
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
index 9f7700c7f395cf..786b5f2cfcb11e 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -128,7 +128,6 @@
   display: block;
 }
 
-
 .dscFieldSearch {
   padding: $euiSizeS;
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
index 25fe4cf6765e57..51252f4902dfb0 100644
--- a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
@@ -17,8 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { EuiProgress, EuiText, EuiToolTip } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { EuiProgress, EuiToolTip } from '@elastic/eui';
 
 interface Props {
   percent: number;
@@ -26,7 +25,7 @@ interface Props {
   value: string;
 }
 
-export function StringFieldProgressBar({ field, value, onAddFilter, percent, count }: Props) {
+export function StringFieldProgressBar({ value, percent, count }: Props) {
   const tooltipContent = `${value} ${count}`;
   return (
     <EuiToolTip

From 74e768dc2a99a45f405c5c8c2a29fd1c05756043 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Mon, 22 Jun 2020 20:16:36 -0700
Subject: [PATCH 5/8] improved tooltip's content

---
 .../sidebar/discover_field_bucket.tsx         | 45 +++++++++++--------
 .../sidebar/discover_field_details.tsx        |  3 +-
 .../components/sidebar/discover_sidebar.scss  |  7 ---
 .../sidebar/string_progress_bar.tsx           | 18 ++------
 4 files changed, 31 insertions(+), 42 deletions(-)

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
index 16fad8affed1ae..4b4fbf679011d4 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
@@ -17,7 +17,14 @@
  * under the License.
  */
 import React from 'react';
-import { EuiText, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer } 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';
@@ -46,27 +53,29 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
     }
   );
 
+  const tooltipContent = `${bucket.value}: ${bucket.count} (${bucket.percent}%)`;
+
   return (
     <>
       <EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="s">
         <EuiFlexItem className="dscFieldDetails__barContainer" grow={1}>
-          <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
-            value={bucket.value}
-            percent={bucket.percent}
-            count={bucket.count}
-          />
+          <EuiToolTip content={tooltipContent} delay="regular" 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}>
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx
index b56f7ba8a852fe..dd95a45f71626f 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx
+++ b/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, {
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
index 786b5f2cfcb11e..ae7e915f097737 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -121,13 +121,6 @@
   }
 }
 
-/*
-  Fixes EUI known issue https://github.com/elastic/eui/issues/1749
-*/
-.dscProgressBarTooltip__anchor {
-  display: block;
-}
-
 .dscFieldSearch {
   padding: $euiSizeS;
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
index 51252f4902dfb0..9866ad381ae464 100644
--- a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
@@ -17,24 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import { EuiProgress, EuiToolTip } from '@elastic/eui';
+import { EuiProgress } from '@elastic/eui';
 
 interface Props {
   percent: number;
-  count: number;
-  value: string;
 }
 
-export function StringFieldProgressBar({ value, percent, count }: Props) {
-  const tooltipContent = `${value} ${count}`;
-  return (
-    <EuiToolTip
-      anchorClassName="dscProgressBarTooltip__anchor"
-      content={tooltipContent}
-      delay="regular"
-      position="right"
-    >
-      <EuiProgress value={percent} max={100} color="secondary" aria-hidden={true} size="s" />
-    </EuiToolTip>
-  );
+export function StringFieldProgressBar({ percent }: Props) {
+  return <EuiProgress value={percent} max={100} color="secondary" aria-hidden={true} size="s" />;
 }

From b353aa73e853e880b1835147782f3e326cfcb490 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 23 Jun 2020 16:11:24 -0700
Subject: [PATCH 6/8] changed tooltip to long delay

---
 .../application/components/sidebar/discover_field_bucket.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
index 4b4fbf679011d4..3a19d7c2923f8e 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
@@ -59,7 +59,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
     <>
       <EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="s">
         <EuiFlexItem className="dscFieldDetails__barContainer" grow={1}>
-          <EuiToolTip content={tooltipContent} delay="regular" position="right">
+          <EuiToolTip content={tooltipContent} delay="long" position="right">
             <>
               <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
                 <EuiFlexItem grow={1} className="eui-textTruncate">

From d259b580d84ae608d0390b99eeb8a267b63370fd Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 24 Jun 2020 10:43:14 -0700
Subject: [PATCH 7/8] removed EuiTooltip and added title

---
 .../sidebar/discover_field_bucket.tsx         | 49 +++++++++----------
 .../sidebar/string_progress_bar.tsx           | 10 +++-
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
index 3a19d7c2923f8e..f1f27a383076cd 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
@@ -17,14 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import {
-  EuiText,
-  EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiToolTip,
-} from '@elastic/eui';
+import { EuiText, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { StringFieldProgressBar } from './string_progress_bar';
 import { Bucket } from './types';
@@ -53,29 +46,31 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
     }
   );
 
-  const tooltipContent = `${bucket.value}: ${bucket.count} (${bucket.percent}%)`;
-
   return (
     <>
       <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>
+          <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
+            <EuiFlexItem grow={1} className="eui-textTruncate">
+              <EuiText
+                title={bucket.display === '' ? emptyTxt : bucket.display}
+                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
+            value={bucket.value}
+            percent={bucket.percent}
+            count={bucket.count}
+          />
         </EuiFlexItem>
         {field.filterable && (
           <EuiFlexItem grow={false}>
diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
index 9866ad381ae464..c5a7a8a2c5b2af 100644
--- a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
@@ -21,8 +21,14 @@ import { EuiProgress } from '@elastic/eui';
 
 interface Props {
   percent: number;
+  count: number;
+  value: string;
 }
 
-export function StringFieldProgressBar({ percent }: Props) {
-  return <EuiProgress value={percent} max={100} color="secondary" aria-hidden={true} size="s" />;
+export function StringFieldProgressBar({ value, percent, count }: Props) {
+  const tooltipContent = `${value}: ${count} (${percent}%)`;
+
+  return (
+    <EuiProgress value={percent} max={100} color="secondary" aria-label={tooltipContent} size="s" />
+  );
 }

From bec621060fac9d52caf71bfc943a04423d3441cf Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Fri, 26 Jun 2020 09:49:38 -0700
Subject: [PATCH 8/8] change icons and improved title

---
 .../components/sidebar/discover_field_bucket.tsx       | 10 +++++++---
 .../components/sidebar/string_progress_bar.tsx         |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
index f1f27a383076cd..281fc9a392d7da 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
@@ -53,7 +53,11 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
           <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
             <EuiFlexItem grow={1} className="eui-textTruncate">
               <EuiText
-                title={bucket.display === '' ? emptyTxt : bucket.display}
+                title={
+                  bucket.display === ''
+                    ? emptyTxt
+                    : `${bucket.display}: ${bucket.count} (${bucket.percent}%)`
+                }
                 size="xs"
                 className="eui-textTruncate"
               >
@@ -77,7 +81,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
             <div>
               <EuiButtonIcon
                 iconSize="s"
-                iconType="magnifyWithPlus"
+                iconType="plusInCircle"
                 onClick={() => onAddFilter(field, bucket.value, '+')}
                 aria-label={addLabel}
                 data-test-subj={`plus-${field.name}-${bucket.value}`}
@@ -92,7 +96,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
               />
               <EuiButtonIcon
                 iconSize="s"
-                iconType="magnifyWithMinus"
+                iconType="minusInCircle"
                 onClick={() => onAddFilter(field, bucket.value, '-')}
                 aria-label={removeLabel}
                 data-test-subj={`minus-${field.name}-${bucket.value}`}
diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
index c5a7a8a2c5b2af..c8693727b07255 100644
--- a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
@@ -26,9 +26,9 @@ interface Props {
 }
 
 export function StringFieldProgressBar({ value, percent, count }: Props) {
-  const tooltipContent = `${value}: ${count} (${percent}%)`;
+  const ariaLabel = `${value}: ${count} (${percent}%)`;
 
   return (
-    <EuiProgress value={percent} max={100} color="secondary" aria-label={tooltipContent} size="s" />
+    <EuiProgress value={percent} max={100} color="secondary" aria-label={ariaLabel} size="s" />
   );
 }