[Lens] Avoid to change sub chart type on field drop for multiple layers

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

@@ -81,7 +81,8 @@ export function EditorFrame(props: EditorFrameProps) {
       visualizationMap,
       datasourceMap[activeDatasourceId],
       field,
-      framePublicAPI.dataViews
+      framePublicAPI.dataViews,
+      true
     );
   };
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.ts

@@ -53,6 +53,7 @@ export function getSuggestions({
   activeData,
   dataViews,
   mainPalette,
+  allowMixed,
 }: {
   datasourceMap: DatasourceMap;
   datasourceStates: DatasourceStates;
@@ -65,6 +66,7 @@ export function getSuggestions({
   activeData?: Record<string, Datatable>;
   dataViews: DataViewsState;
   mainPalette?: PaletteOutput;
+  allowMixed?: boolean;
 }): Suggestion[] {
   const datasources = Object.entries(datasourceMap).filter(
     ([datasourceId]) => datasourceStates[datasourceId] && !datasourceStates[datasourceId].isLoading
@@ -164,7 +166,8 @@ export function getSuggestions({
             subVisualizationId,
             palette,
             visualizeTriggerFieldContext && 'isVisualizeAction' in visualizeTriggerFieldContext,
-            activeData
+            activeData,
+            allowMixed
           );
         });
     })
@@ -233,7 +236,8 @@ function getVisualizationSuggestions(
   subVisualizationId?: string,
   mainPalette?: PaletteOutput,
   isFromContext?: boolean,
-  activeData?: Record<string, Datatable>
+  activeData?: Record<string, Datatable>,
+  allowMixed?: boolean
 ) {
   try {
     return visualization
@@ -245,6 +249,7 @@ function getVisualizationSuggestions(
         mainPalette,
         isFromContext,
         activeData,
+        allowMixed,
       })
       .map(({ state, ...visualizationSuggestion }) => ({
         ...visualizationSuggestion,
@@ -296,7 +301,8 @@ export function getTopSuggestionForField(
   visualizationMap: Record<string, Visualization<unknown>>,
   datasource: Datasource,
   field: DragDropIdentifier,
-  dataViews: DataViewsState
+  dataViews: DataViewsState,
+  allowMixed?: boolean
 ) {
   const hasData = Object.values(datasourceLayers).some(
     (datasourceLayer) => datasourceLayer && datasourceLayer.getTableSpec().length > 0
@@ -319,6 +325,7 @@ export function getTopSuggestionForField(
     field,
     mainPalette,
     dataViews,
+    allowMixed,
   });
   return (
     suggestions.find((s) => s.visualizationId === visualization.activeId) ||

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

@@ -897,6 +897,7 @@ export interface SuggestionRequest<T = unknown> {
    */
   subVisualizationId?: string;
   activeData?: Record<string, Datatable>;
+  allowMixed?: boolean;
 }
 
 /**

x-pack/plugins/lens/public/visualizations/xy/xy_suggestions.test.ts

@@ -422,6 +422,69 @@ describe('xy_suggestions', () => {
     ]);
   });
 
+  test('suggests mixed xy chart keeping original subType when switching from another x y chart with multiple layers', () => {
+    (generateId as jest.Mock).mockReturnValueOnce('aaa');
+    const suggestions = getSuggestions({
+      allowMixed: true,
+      table: {
+        isMultiRow: true,
+        columns: [numCol('bytes'), dateCol('date')],
+        layerId: 'first',
+        changeType: 'unchanged',
+      },
+      keptLayerIds: ['first', 'second'],
+      state: {
+        legend: { isVisible: true, position: 'bottom' },
+        valueLabels: 'hide',
+        preferredSeriesType: 'bar',
+        layers: [
+          {
+            layerId: 'first',
+            layerType: LayerTypes.DATA,
+            seriesType: 'bar',
+            xAccessor: 'date',
+            accessors: ['bytes'],
+            splitAccessor: undefined,
+          },
+          {
+            layerId: 'second',
+            layerType: LayerTypes.DATA,
+            seriesType: 'line',
+            xAccessor: undefined,
+            accessors: [],
+            splitAccessor: undefined,
+          },
+        ],
+      },
+    });
+
+    expect(suggestions).toHaveLength(visualizationTypes.length);
+    expect(suggestions.map(({ state }) => xyVisualization.getVisualizationTypeId(state))).toEqual([
+      'line', // line + line = line
+      'mixed', // any other combination is mixed
+      'mixed',
+      'mixed',
+      'mixed',
+      'mixed',
+      'mixed',
+      'mixed',
+      'mixed',
+      'mixed',
+    ]);
+    expect(suggestions.map(({ state }) => state.layers.map((l) => l.layerId))).toEqual([
+      ['first', 'second'],
+      ['first', 'second'],
+      ['first', 'second'],
+      ['first', 'second'],
+      ['first', 'second'],
+      ['first', 'second'],
+      ['first', 'second'],
+      ['first', 'second'],
+      ['first', 'second'],
+      ['first', 'second'],
+    ]);
+  });
+
   test('suggests all basic x y chart with date on x', () => {
     (generateId as jest.Mock).mockReturnValueOnce('aaa');
     const [suggestion, ...rest] = getSuggestions({

x-pack/plugins/lens/public/visualizations/xy/xy_suggestions.ts

@@ -55,6 +55,7 @@ export function getSuggestions({
   subVisualizationId,
   mainPalette,
   isFromContext,
+  allowMixed,
 }: SuggestionRequest<State>): Array<VisualizationSuggestion<State>> {
   const incompleteTable =
     !table.isMultiRow ||
@@ -79,10 +80,11 @@ export function getSuggestions({
     keptLayerIds,
     state,
     subVisualizationId as SeriesType | undefined,
-    mainPalette
+    mainPalette,
+    allowMixed
   );
 
-  if (suggestions && suggestions instanceof Array) {
+  if (Array.isArray(suggestions)) {
     return suggestions;
   }
 
@@ -94,7 +96,8 @@ function getSuggestionForColumns(
   keptLayerIds: string[],
   currentState?: State,
   seriesType?: SeriesType,
-  mainPalette?: PaletteOutput
+  mainPalette?: PaletteOutput,
+  allowMixed?: boolean
 ): VisualizationSuggestion<State> | Array<VisualizationSuggestion<State>> | undefined {
   const [buckets, values] = partition(table.columns, (col) => col.operation.isBucketed);
 
@@ -111,6 +114,7 @@ function getSuggestionForColumns(
       keptLayerIds,
       requestedSeriesType: seriesType,
       mainPalette,
+      allowMixed,
     });
   } else if (buckets.length === 0) {
     const [yValues, [xValue, splitBy]] = partition(
@@ -128,6 +132,7 @@ function getSuggestionForColumns(
       keptLayerIds,
       requestedSeriesType: seriesType,
       mainPalette,
+      allowMixed,
     });
   }
 }
@@ -214,6 +219,7 @@ function getSuggestionsForLayer({
   keptLayerIds,
   requestedSeriesType,
   mainPalette,
+  allowMixed,
 }: {
   layerId: string;
   changeType: TableChangeType;
@@ -225,6 +231,7 @@ function getSuggestionsForLayer({
   keptLayerIds: string[];
   requestedSeriesType?: SeriesType;
   mainPalette?: PaletteOutput;
+  allowMixed?: boolean;
 }): VisualizationSuggestion<State> | Array<VisualizationSuggestion<State>> {
   const title = getSuggestionTitle(yValues, xValue, tableLabel);
   const seriesType: SeriesType =
@@ -242,6 +249,7 @@ function getSuggestionsForLayer({
     keptLayerIds,
     // only use palette if there is a breakdown by dimension
     mainPalette: splitBy ? mainPalette : undefined,
+    allowMixed,
   };
 
   // handles the simplest cases, acting as a chart switcher
@@ -473,6 +481,7 @@ function buildSuggestion({
   keptLayerIds,
   hide,
   mainPalette,
+  allowMixed,
 }: {
   currentState: XYState | undefined;
   seriesType: SeriesType;
@@ -485,6 +494,7 @@ function buildSuggestion({
   keptLayerIds: string[];
   hide?: boolean;
   mainPalette?: PaletteOutput;
+  allowMixed?: boolean;
 }) {
   if (seriesType.includes('percentage') && xValue?.operation.scale === 'ordinal' && !splitBy) {
     splitBy = xValue;
@@ -526,10 +536,14 @@ function buildSuggestion({
         // Update in place
         .map((layer) => (layer.layerId === layerId ? newLayer : layer))
         // Replace the seriesType on all previous layers
-        .map((layer) => ({
-          ...layer,
-          seriesType,
-        }))
+        .map((layer) =>
+          allowMixed
+            ? layer
+            : {
+                ...layer,
+                seriesType,
+              }
+        )
     : [];
 
   const state: State = {