Using CSS to handle layout of expression renderer

src/legacy/core_plugins/expressions/index.ts

@@ -34,6 +34,7 @@ export default function DataExpressionsPlugin(kibana: any) {
     init: (server: Legacy.Server) => ({}),
     uiExports: {
       injectDefaultVars: () => ({}),
+      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
     },
   };
 

src/legacy/core_plugins/expressions/public/index.scss

@@ -0,0 +1,13 @@
+// Import the EUI global scope so we can use EUI constants
+@import 'src/legacy/ui/public/styles/_styling_constants';
+
+/* Expressions plugin styles */
+
+// Prefix all styles with "exp" to avoid conflicts.
+// Examples
+//  expChart
+//  expChart__legend
+//  expChart__legend--small
+//  expChart__legend-isLoading
+
+@import './np_ready/public/index';

src/legacy/core_plugins/expressions/public/np_ready/public/_expression_renderer.scss

@@ -0,0 +1,11 @@
+.expExpressionRenderer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.expExpressionRenderer__expression {
+  width: 100%;
+  height: 100%;
+}

src/legacy/core_plugins/expressions/public/np_ready/public/_index.scss

@@ -0,0 +1 @@
+@import './expression_renderer';

src/legacy/core_plugins/expressions/public/np_ready/public/expression_renderer.tsx

@@ -19,7 +19,8 @@
 
 import { useRef, useEffect, useState } from 'react';
 import React from 'react';
-import { EuiProgress } from '@elastic/eui';
+import classNames from 'classnames';
+import { EuiLoadingChart, EuiProgress } from '@elastic/eui';
 import { ExpressionAST, IExpressionLoaderParams } from './types';
 import { ExpressionLoader } from './loader';
 
@@ -116,25 +117,25 @@ export const ExpressionRendererImplementation = ({
     mountpoint.current,
   ]);
 
+  const classes = classNames('expExpressionRenderer', className);
+
   return (
-    <div
-      {...dataAttrs}
-      style={{
-        display: state.hasError ? 'none' : 'flex',
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      {state.isLoading ? <EuiProgress size="xs" color="accent" position="absolute" /> : null}
-      {state.hasError && state.errorType ? (
-        options.renderError ? (
-          options.renderError(state.errorType, state.errorMessage)
-        ) : (
-          <div data-test-subj="expression-renderer-error">{state.errorMessage}</div>
-        )
-      ) : null}
-      <div className={className} ref={mountpoint} />
+    <div {...dataAttrs} className={classes}>
+      {false ? ( // TODO: Hook this up to show if there is no chart at all but it is loading, so there's no blank area
+        <EuiLoadingChart mono />
+      ) : (
+        <>
+          {state.isLoading ? <EuiProgress size="xs" color="accent" position="absolute" /> : null}
+          {state.hasError && state.errorType ? (
+            options.renderError ? (
+              options.renderError(state.errorType, state.errorMessage)
+            ) : (
+              <div data-test-subj="expression-renderer-error">{state.errorMessage}</div>
+            )
+          ) : null}
+          <div className="expExpressionRenderer__expression" ref={mountpoint} />
+        </>
+      )}
     </div>
   );
 };

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_expression_renderer.scss

@@ -5,7 +5,3 @@
   overflow-x: hidden;
   padding: $euiSize;
 }
-
-.lnsExpressionRenderer > * {
-  flex: 1;
-}

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_suggestion_panel.scss

@@ -16,6 +16,7 @@
 }
 
 .lnsSuggestionPanel__button {
+  position: relative; // Let the expression progress indicator position itself against the button
   flex: 0 0 auto;
   width: $lnsSuggestionWidth !important; // sass-lint:disable-line no-important
   height: $lnsSuggestionHeight;
@@ -44,18 +45,20 @@
 }
 
 .lnsSuggestionPanel__chartWrapper {
+  position: static; // Let the progress indicator position itself against the button
   display: flex;
-  height: $lnsSuggestionHeight - $euiSize;
+  height: 100%;
   width: 100%;
   pointer-events: none;
-  margin: 0 $euiSizeS;
+  padding: $euiSizeS;
 }
 
 .lnsSuggestionPanel__chartWrapper--withLabel {
-  height: $lnsSuggestionHeight - $euiSizeL;
+  height: calc(100% - #{$euiSizeL});
 }
 
 .lnsSuggestionPanel__buttonLabel {
+  @include euiTextTruncate;
   @include euiFontSizeXS;
   display: block;
   font-weight: $euiFontWeightBold;