better typing

src/plugins/chart_expressions/common/index.ts

@@ -12,5 +12,11 @@ export {
   getOverridesFor,
   isOnAggBasedEditor,
 } from './utils';
-export type { Simplify, MakeOverridesSerializable } from './types';
+export type {
+  Simplify,
+  MakeOverridesSerializable,
+  ChartDimensionOptions,
+  DimensionsEvent,
+} from './types';
+export { isDimensionsEvent } from './types';
 export { getColorCategories } from './color_categories';

src/plugins/chart_expressions/common/types.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import type { ExpressionRendererEvent } from '@kbn/expressions-plugin/public';
 import React from 'react';
 
 export type Simplify<T> = { [KeyType in keyof T]: T[KeyType] } & {};
@@ -26,3 +27,26 @@ export type MakeOverridesSerializable<T> = {
     ? MakeOverridesSerializable<T[KeyType]>
     : NonNullable<T[KeyType]>;
 };
+
+export interface DimensionsEvent extends ExpressionRendererEvent {
+  name: 'dimensions';
+  data: ChartDimensionOptions;
+}
+
+export type ChartDimensionOptions =
+  | {
+      // if maxDimensions are provided, the aspect ratio will be computed from them
+      maxDimensionsPX?: {
+        x: number;
+        y: number;
+      };
+      aspectRatio?: never;
+    }
+  | {
+      aspectRatio?: { x: number; y: number };
+      maxDimensionsPX?: never;
+    };
+
+export function isDimensionsEvent(event: ExpressionRendererEvent): event is DimensionsEvent {
+  return event.name === 'dimensions';
+}

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

@@ -39,7 +39,7 @@ import { css } from '@emotion/react';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { useResizeObserver, useEuiScrollBar, EuiIcon } from '@elastic/eui';
 import { AllowedChartOverrides, AllowedSettingsOverrides } from '@kbn/charts-plugin/common';
-import { getOverridesFor } from '@kbn/chart-expressions-common';
+import { DimensionsEvent, getOverridesFor } from '@kbn/chart-expressions-common';
 import { DEFAULT_TRENDLINE_NAME } from '../../common/constants';
 import { VisParams } from '../../common';
 import { getPaletteService, getThemeService, getFormatService } from '../services';
@@ -145,15 +145,16 @@ export const MetricVis = ({
 
   const onWillRender = useCallback(() => {
     const maxTileSideLength = grid.current.length * grid.current[0].length > 1 ? 200 : 300;
-    fireEvent({
-      name: 'setDimensions',
+    const event: DimensionsEvent = {
+      name: 'dimensions',
       data: {
         maxDimensionsPX: {
           y: grid.current.length * maxTileSideLength,
           x: grid.current[0]?.length * maxTileSideLength,
         },
       },
-    });
+    };
+    fireEvent(event);
   }, [fireEvent, grid]);
 
   const [scrollChildHeight, setScrollChildHeight] = useState<string>('100%');

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

@@ -36,6 +36,7 @@ import type { Datatable } from '@kbn/expressions-plugin/public';
 import { DropIllustration } from '@kbn/chart-icons';
 import { DragDrop, useDragDropContext, DragDropIdentifier } from '@kbn/dom-drag-drop';
 import { reportPerformanceMetricEvent } from '@kbn/ebt-tools';
+import { ChartDimensionOptions, isDimensionsEvent } from '@kbn/chart-expressions-common';
 import { trackUiCounterEvents } from '../../../lens_ui_telemetry';
 import { getSearchWarningMessages } from '../../../utils';
 import {
@@ -52,7 +53,6 @@ import {
   UserMessagesGetter,
   AddUserMessages,
   isMessageRemovable,
-  VisualizationDisplayOptions,
 } from '../../../types';
 import { switchToSuggestion } from '../suggestion_helpers';
 import { buildExpression } from '../expression_helpers';
@@ -421,7 +421,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
   }, [expressionExists, localState.expressionToRender]);
 
   const [dimensionDisplayOptions, setDimensionOptions] = useState<
-    VisualizationDisplayOptions | undefined
+    ChartDimensionOptions | undefined
   >();
 
   const onEvent = useCallback(
@@ -455,7 +455,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
         );
       }
 
-      if (event.name === 'setDimensions') {
+      if (isDimensionsEvent(event)) {
         setDimensionOptions(event.data);
       }
     },

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

@@ -11,13 +11,13 @@ import React, { useCallback } from 'react';
 import { EuiPageTemplate, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
 import classNames from 'classnames';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { ChartDimensionOptions } from '@kbn/chart-expressions-common';
 import {
   DatasourceMap,
   FramePublicAPI,
   UserMessagesGetter,
   VisualizationMap,
   Visualization,
-  VisualizationDisplayOptions,
 } from '../../../types';
 import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../../../utils';
 import { ChartSwitch } from './chart_switch';
@@ -47,7 +47,7 @@ export interface WorkspacePanelWrapperProps {
   isFullscreen: boolean;
   lensInspector: LensInspector;
   getUserMessages: UserMessagesGetter;
-  displayOptions: VisualizationDisplayOptions | undefined;
+  displayOptions: ChartDimensionOptions | undefined;
 }
 
 export function VisualizationToolbar(props: {

x-pack/plugins/lens/public/types.ts

@@ -975,23 +975,10 @@ export interface VisualizationType {
   showExperimentalBadge?: boolean;
 }
 
-export type VisualizationDisplayOptions = {
+export interface VisualizationDisplayOptions {
   noPanelTitle?: boolean;
   noPadding?: boolean;
-} & (
-  | {
-      // if maxDimensions are provided, the aspect ratio will be computed from them
-      maxDimensionsPX?: {
-        x: number;
-        y: number;
-      };
-      aspectRatio?: never;
-    }
-  | {
-      aspectRatio?: { x: number; y: number };
-      maxDimensionsPX?: never;
-    }
-);
+}
 
 interface VisualizationStateFromContextChangeProps {
   suggestions: Suggestion[];