[Lens] Add lens editor performance metrics

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx

@@ -246,7 +246,10 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
     const onRenderChange = useCallback(
       (isRendered: boolean = true) => {
         if (isRendered) {
-          renderComplete();
+          // this requestAnimationFrame call is a temporary fix for https://github.com/elastic/elastic-charts/issues/2124
+          window.requestAnimationFrame(() => {
+            renderComplete();
+          });
         }
       },
       [renderComplete]

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx

@@ -196,7 +196,10 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
     const onRenderChange = useCallback(
       (isRendered: boolean = true) => {
         if (isRendered) {
-          renderComplete();
+          // this requestAnimationFrame call is a temporary fix for https://github.com/elastic/elastic-charts/issues/2124
+          window.requestAnimationFrame(() => {
+            renderComplete();
+          });
         }
       },
       [renderComplete]

src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx

@@ -134,7 +134,10 @@ export const MetricVis = ({
   const onRenderChange = useCallback<RenderChangeListener>(
     (isRendered) => {
       if (isRendered) {
-        renderComplete();
+        // this requestAnimationFrame call is a temporary fix for https://github.com/elastic/elastic-charts/issues/2124
+        window.requestAnimationFrame(() => {
+          renderComplete();
+        });
       }
     },
     [renderComplete]

src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx

@@ -176,8 +176,11 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
   const onRenderChange = useCallback(
     (isRendered: boolean = true) => {
       if (isRendered) {
-        props.renderComplete();
-        setChartIsLoaded(true);
+        // this requestAnimationFrame call is a temporary fix for https://github.com/elastic/elastic-charts/issues/2124
+        window.requestAnimationFrame(() => {
+          props.renderComplete();
+          setChartIsLoaded(true);
+        });
       }
     },
     [props]

src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx

@@ -145,7 +145,10 @@ export const TagCloudChart = ({
   const onRenderChange = useCallback<RenderChangeListener>(
     (isRendered) => {
       if (isRendered) {
-        renderComplete();
+        // this requestAnimationFrame call is a temporary fix for https://github.com/elastic/elastic-charts/issues/2124
+        window.requestAnimationFrame(() => {
+          renderComplete();
+        });
       }
     },
     [renderComplete]

src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

@@ -309,7 +309,10 @@ export function XYChart({
   const onRenderChange = useCallback(
     (isRendered: boolean = true) => {
       if (isRendered) {
-        renderComplete();
+        // this requestAnimationFrame call is a temporary fix for https://github.com/elastic/elastic-charts/issues/2124
+        window.requestAnimationFrame(() => {
+          renderComplete();
+        });
       }
     },
     [renderComplete]

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss

@@ -100,3 +100,7 @@
   align-items: center;
   justify-content: center;
 }
+
+.lnsSuggestionPanel__loadingState {
+  height: $lnsSuggestionHeight;
+}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx

@@ -20,6 +20,7 @@ import {
   EuiButtonEmpty,
   EuiAccordion,
   EuiText,
+  EuiProgress,
 } from '@elastic/eui';
 import { IconType } from '@elastic/eui/src/components/icon/icon';
 import { Ast, fromExpression, toExpression } from '@kbn/interpreter';
@@ -30,6 +31,7 @@ import {
   ReactExpressionRendererProps,
   ReactExpressionRendererType,
 } from '@kbn/expressions-plugin/public';
+import { css } from '@emotion/react';
 import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../../utils';
 import {
   Datasource,
@@ -64,7 +66,6 @@ import {
   selectFrameDatasourceAPI,
 } from '../../state_management';
 import { filterAndSortUserMessages } from '../../app_plugin/get_application_user_messages';
-
 const MAX_SUGGESTIONS_DISPLAYED = 5;
 const LOCAL_STORAGE_SUGGESTIONS_PANEL = 'LENS_SUGGESTIONS_PANEL_HIDDEN';
 
@@ -108,11 +109,13 @@ const PreviewRenderer = ({
   ExpressionRendererComponent,
   expression,
   hasError,
+  onRender,
 }: {
   withLabel: boolean;
   expression: string | null | undefined;
   ExpressionRendererComponent: ReactExpressionRendererType;
   hasError: boolean;
+  onRender: () => void;
 }) => {
   const onErrorMessage = (
     <div className="lnsSuggestionPanel__suggestionIcon">
@@ -143,6 +146,7 @@ const PreviewRenderer = ({
           padding="s"
           renderMode="preview"
           expression={expression}
+          onRender$={onRender}
           debounce={2000}
           renderError={() => {
             return onErrorMessage;
@@ -159,6 +163,7 @@ const SuggestionPreview = ({
   selected,
   onSelect,
   showTitleAsLabel,
+  onRender,
 }: {
   onSelect: () => void;
   preview: {
@@ -170,6 +175,7 @@ const SuggestionPreview = ({
   ExpressionRenderer: ReactExpressionRendererType;
   selected: boolean;
   showTitleAsLabel?: boolean;
+  onRender: () => void;
 }) => {
   return (
     <EuiToolTip content={preview.title}>
@@ -194,6 +200,7 @@ const SuggestionPreview = ({
               expression={preview.expression && toExpression(preview.expression)}
               withLabel={Boolean(showTitleAsLabel)}
               hasError={Boolean(preview.error)}
+              onRender={onRender}
             />
           ) : (
             <span className="lnsSuggestionPanel__suggestionIcon">
@@ -358,20 +365,34 @@ export function SuggestionPanel({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [existsStagedPreview]);
 
-  if (!activeDatasourceId) {
-    return null;
-  }
-
-  if (suggestions.length === 0) {
-    return null;
-  }
+  const startTime = useRef<number>(0);
+  const suggestionsRendered = useRef<number>(0);
+  const totalSuggestions = suggestions.length + 1;
+
+  const onSuggestionRender = useCallback(() => {
+    suggestionsRendered.current++;
+    if (suggestionsRendered.current === totalSuggestions) {
+      // console.log(
+      //   'suggestions took to fetch data and render',
+      //   performance.now() - startTime.current
+      // );
+    }
+  }, [totalSuggestions]);
 
-  function rollbackToCurrentVisualization() {
+  const rollbackToCurrentVisualization = useCallback(() => {
     if (lastSelectedSuggestion !== -1) {
       setLastSelectedSuggestion(-1);
       dispatchLens(rollbackSuggestion());
       dispatchLens(applyChanges());
     }
+  }, [dispatchLens, lastSelectedSuggestion]);
+
+  if (!activeDatasourceId) {
+    return null;
+  }
+
+  if (suggestions.length === 0) {
+    return null;
   }
 
   const renderApplyChangesPrompt = () => (
@@ -400,53 +421,73 @@ export function SuggestionPanel({
     </EuiPanel>
   );
 
-  const renderSuggestionsUI = () => (
-    <>
-      {currentVisualization.activeId && !hideSuggestions && (
-        <SuggestionPreview
-          preview={{
-            error: currentStateError,
-            expression: currentStateExpression,
-            icon:
-              visualizationMap[currentVisualization.activeId].getDescription(
-                currentVisualization.state
-              ).icon || 'empty',
-            title: i18n.translate('xpack.lens.suggestions.currentVisLabel', {
-              defaultMessage: 'Current visualization',
-            }),
-          }}
-          ExpressionRenderer={AutoRefreshExpressionRenderer}
-          onSelect={rollbackToCurrentVisualization}
-          selected={lastSelectedSuggestion === -1}
-          showTitleAsLabel
-        />
-      )}
-      {!hideSuggestions &&
-        suggestions.map((suggestion, index) => {
-          return (
-            <SuggestionPreview
-              preview={{
-                expression: suggestion.previewExpression,
-                icon: suggestion.previewIcon,
-                title: suggestion.title,
-              }}
-              ExpressionRenderer={AutoRefreshExpressionRenderer}
-              key={index}
-              onSelect={() => {
-                if (lastSelectedSuggestion === index) {
-                  rollbackToCurrentVisualization();
-                } else {
-                  setLastSelectedSuggestion(index);
-                  switchToSuggestion(dispatchLens, suggestion, { applyImmediately: true });
-                }
-              }}
-              selected={index === lastSelectedSuggestion}
-            />
-          );
-        })}
-    </>
+  const renderSuggestionsLoadingState = () => (
+    <EuiPanel
+      hasShadow={false}
+      className="lnsSuggestionPanel__loadingState"
+      paddingSize="none"
+      borderRadius="m"
+      css={css`
+        overflow: hidden;
+      `}
+    >
+      <EuiProgress size="xs" color="accent" />
+    </EuiPanel>
   );
 
+  const renderSuggestionsUI = () => {
+    suggestionsRendered.current = 0;
+    startTime.current = performance.now();
+    return (
+      <>
+        {currentVisualization.activeId && !hideSuggestions && (
+          <SuggestionPreview
+            preview={{
+              error: currentStateError,
+              expression: currentStateExpression,
+              icon:
+                visualizationMap[currentVisualization.activeId].getDescription(
+                  currentVisualization.state
+                ).icon || 'empty',
+              title: i18n.translate('xpack.lens.suggestions.currentVisLabel', {
+                defaultMessage: 'Current visualization',
+              }),
+            }}
+            ExpressionRenderer={AutoRefreshExpressionRenderer}
+            onSelect={rollbackToCurrentVisualization}
+            selected={lastSelectedSuggestion === -1}
+            showTitleAsLabel
+            onRender={onSuggestionRender}
+          />
+        )}
+        {!hideSuggestions &&
+          suggestions.map((suggestion, index) => {
+            return (
+              <SuggestionPreview
+                preview={{
+                  expression: suggestion.previewExpression,
+                  icon: suggestion.previewIcon,
+                  title: suggestion.title,
+                }}
+                ExpressionRenderer={AutoRefreshExpressionRenderer}
+                key={index}
+                onSelect={() => {
+                  if (lastSelectedSuggestion === index) {
+                    rollbackToCurrentVisualization();
+                  } else {
+                    setLastSelectedSuggestion(index);
+                    switchToSuggestion(dispatchLens, suggestion, { applyImmediately: true });
+                  }
+                }}
+                selected={index === lastSelectedSuggestion}
+                onRender={onSuggestionRender}
+              />
+            );
+          })}
+      </>
+    );
+  };
+
   return (
     <div className="lnsSuggestionPanel">
       <EuiAccordion
@@ -494,7 +535,11 @@ export function SuggestionPanel({
           role="list"
           tabIndex={0}
         >
-          {changesApplied ? renderSuggestionsUI() : renderApplyChangesPrompt()}
+          {changesApplied
+            ? activeData
+              ? renderSuggestionsUI()
+              : renderSuggestionsLoadingState()
+            : renderApplyChangesPrompt()}
         </div>
       </EuiAccordion>
     </div>

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx

@@ -192,8 +192,16 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
     dataViews,
   };
 
+  // NOTE: initialRenderTime is only set once when the component mounts
+  const initialRenderTime = useRef<number>(performance.now());
+  const dataReceivedTime = useRef<number>(0);
+
   const onRender$ = useCallback(() => {
     if (renderDeps.current) {
+      // console.log(
+      //   'visualization took to render after data received',
+      //   performance.now() - dataReceivedTime.current
+      // );
       const datasourceEvents = Object.values(renderDeps.current.datasourceMap).reduce<string[]>(
         (acc, datasource) => {
           if (!renderDeps.current!.datasourceStates[datasource.id]) return [];
@@ -232,6 +240,10 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
   const onData$ = useCallback(
     (_data: unknown, adapters?: Partial<DefaultInspectorAdapters>) => {
       if (renderDeps.current) {
+        dataReceivedTime.current = performance.now();
+        // NOTE: this metric is only valid for an initial editor load of a pre-existing visualization
+        // console.log('data took to arrive', dataReceivedTime.current - initialRenderTime.current);
+
         const [defaultLayerId] = Object.keys(renderDeps.current.datasourceLayers);
         const datasource = Object.values(renderDeps.current.datasourceMap)[0];
         const datasourceState = Object.values(renderDeps.current.datasourceStates)[0].state;
@@ -687,6 +699,12 @@ export const VisualizationWrapper = ({
   // Used for reporting
   const { isRenderComplete, hasDynamicError, setIsRenderComplete, setDynamicError, nodeRef } =
     useReportingState(errors);
+
+  const onRenderHandler = useCallback(() => {
+    setIsRenderComplete(true);
+    onRender$();
+  }, [setIsRenderComplete, onRender$]);
+
   const searchContext: ExecutionContextSearch = useMemo(
     () => ({
       query: context.query,
@@ -782,10 +800,7 @@ export const VisualizationWrapper = ({
         onEvent={onEvent}
         hasCompatibleActions={hasCompatibleActions}
         onData$={onData$}
-        onRender$={() => {
-          setIsRenderComplete(true);
-          onRender$();
-        }}
+        onRender$={onRenderHandler}
         inspectorAdapters={lensInspector.adapters}
         executionContext={executionContext}
         renderMode="edit"