[ML] Show tip to drag to select a range in the Trace samples distribu…

…tion chart panel.
elastic · Aug 17, 2021 · 086c5a0 · 086c5a0
1 parent f53d428
commit 086c5a0
Showing 1 changed file with 26 additions and 0 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx
@@ -11,6 +11,7 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiIcon,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -56,6 +57,13 @@ export function TransactionDistribution({
 
   const { transactionName, start, end } = urlParams;
 
+  const emptySelectionText = i18n.translate(
+    'xpack.apm.transactionDetails.emptySelectionText',
+    {
+      defaultMessage: 'Click and drag to select a range',
+    }
+  );
+
   const clearSelectionButtonLabel = i18n.translate(
     'xpack.apm.transactionDetails.clearSelectionButtonLabel',
     {
@@ -136,6 +144,24 @@ export function TransactionDistribution({
             </h5>
           </EuiTitle>
         </EuiFlexItem>
+        {!selection && (
+          <EuiFlexItem>
+            <EuiFlexGroup justifyContent="flexEnd" gutterSize="xs">
+              <EuiFlexItem
+                grow={false}
+                style={{ flexDirection: 'row', alignItems: 'center' }}
+              >
+                <EuiIcon type="iInCircle" title={emptySelectionText} size="s" />
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+                style={{ flexDirection: 'row', alignItems: 'center' }}
+              >
+                <EuiText size="xs">{emptySelectionText}</EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        )}
         {selection && (
           <EuiFlexItem>
             <EuiFlexGroup justifyContent="flexEnd" gutterSize="xs">