[ML] Add border to text editor for ES|QL data visualizer (#192726)

## Summary This PR adds border to text editor for ES|QL data visualizer so make it more clear where the boundaries for the editor is. <img width="1505" alt="image" src="https://github.com/user-attachments/assets/264f4892-f361-4013-b49f-55fa5b90aa8f"> Also fixes the content of the top values overflowing. https://github.com/user-attachments/assets/19c90cb3-2d35-41df-aea4-889a00e6ebdb Fixes #192788 Fixes #192637 --------- Co-authored-by: Elastic Machine <[email protected]>
elastic · Sep 20, 2024 · 486b16e · 486b16e
1 parent 0b1bf27
commit 486b16e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/...ck/plugins/data_visualizer/public/application/common/components/top_values/top_values.tsx b/...ck/plugins/data_visualizer/public/application/common/components/top_values/top_values.tsx
@@ -14,6 +14,8 @@ import {
   EuiText,
   EuiButtonIcon,
   EuiSpacer,
+  useEuiTheme,
+  euiScrollBarStyles,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -69,6 +71,7 @@ export const TopValues: FC<Props> = ({
       data: { fieldFormats },
     },
   } = useDataVisualizerKibana();
+  const euiTheme = useEuiTheme();
 
   if (stats === undefined || !stats.topValues) return null;
   const { fieldName, sampleCount, approximate } = stats;
@@ -169,6 +172,10 @@ export const TopValues: FC<Props> = ({
     <ExpandedRowPanel
       dataTestSubj={'dataVisualizerFieldDataTopValues'}
       className={classNames('dvPanel__wrapper', compressed ? 'dvPanel--compressed' : undefined)}
+      css={css`
+        overflow-x: auto;
+        ${euiScrollBarStyles(euiTheme)}
+      `}
     >
       <ExpandedRowFieldHeader>
         {showSampledValues ? (
@@ -215,6 +222,7 @@ export const TopValues: FC<Props> = ({
                   onAddFilter !== undefined ? (
                     <div
                       css={css`
+                        position: static;
                         width: 48px;
                       `}
                     >

diff --git a/...ndex_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx b/...ndex_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx
@@ -259,15 +259,25 @@ export const IndexDataVisualizerESQL: FC<IndexDataVisualizerESQLProps> = (dataVi
           </EuiFlexGroup>
         </EuiPageTemplate.Header>
         <EuiSpacer size="m" />
-        <TextBasedLangEditor
-          query={localQuery}
-          onTextLangQueryChange={onTextLangQueryChange}
-          onTextLangQuerySubmit={onTextLangQuerySubmit}
-          detectedTimestamp={currentDataView?.timeFieldName}
-          hideRunQueryText={false}
-          isLoading={queryHistoryStatus ?? false}
-          displayDocumentationAsFlyout
-        />
+        <EuiFlexItem
+          grow={false}
+          data-test-subj="DataVisualizerESQLEditor"
+          css={css({
+            borderTop: euiTheme.euiBorderThin,
+            borderLeft: euiTheme.euiBorderThin,
+            borderRight: euiTheme.euiBorderThin,
+          })}
+        >
+          <TextBasedLangEditor
+            query={localQuery}
+            onTextLangQueryChange={onTextLangQueryChange}
+            onTextLangQuerySubmit={onTextLangQuerySubmit}
+            detectedTimestamp={currentDataView?.timeFieldName}
+            hideRunQueryText={false}
+            isLoading={queryHistoryStatus ?? false}
+            displayDocumentationAsFlyout
+          />
+        </EuiFlexItem>
 
         <EuiFlexGroup gutterSize="m" direction={isWithinLargeBreakpoint ? 'column' : 'row'}>
           <EuiFlexItem>