[Lens] Suggestion improvements

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.test.tsx

@@ -97,7 +97,6 @@ describe('Datatable Visualization', () => {
       const baseOperation: Operation = {
         dataType: 'string',
         isBucketed: true,
-        isMetric: false,
         label: '',
       };
       expect(filterOperations({ ...baseOperation })).toEqual(true);

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx

@@ -127,42 +127,57 @@ export const datatableVisualization: Visualization<
 
   getSuggestions({
     tables,
+    state,
   }: SuggestionRequest<DatatableVisualizationState>): Array<
     VisualizationSuggestion<DatatableVisualizationState>
   > {
     const maxColumnCount = Math.max.apply(undefined, tables.map(table => table.columns.length));
-    return tables.map(table => {
-      const title = i18n.translate('xpack.lens.datatable.visualizationOf', {
-        defaultMessage: 'Table: {operations}',
-        values: {
-          operations: table.columns
-            .map(col => col.operation.label)
-            .join(
-              i18n.translate('xpack.lens.datatable.conjunctionSign', {
-                defaultMessage: ' & ',
-                description:
-                  'A character that can be used for conjunction of multiple enumarated items. Make sure to include spaces around it if needed.',
-              })
-            ),
-        },
-      });
-
-      return {
-        title,
-        // largest possible table will have a score of 0.2, less columns reduce score
-        score: (table.columns.length / maxColumnCount) * 0.2,
-        datasourceSuggestionId: table.datasourceSuggestionId,
-        state: {
-          layers: [
-            {
-              layerId: table.layerId,
-              columns: table.columns.map(col => col.columnId),
+    return (
+      tables
+        // don't suggest current table if visualization is active
+        .filter(({ changeType }) => !state || changeType !== 'unchanged')
+        .map(table => {
+          const title =
+            table.changeType === 'unchanged'
+              ? i18n.translate('xpack.lens.datatable.suggestionLabel', {
+                  defaultMessage: 'As table',
+                })
+              : i18n.translate('xpack.lens.datatable.visualizationOf', {
+                  defaultMessage: 'Table {operations}',
+                  values: {
+                    operations:
+                      table.label ||
+                      table.columns
+                        .map(col => col.operation.label)
+                        .join(
+                          i18n.translate('xpack.lens.datatable.conjunctionSign', {
+                            defaultMessage: ' & ',
+                            description:
+                              'A character that can be used for conjunction of multiple enumarated items. Make sure to include spaces around it if needed.',
+                          })
+                        ),
+                  },
+                });
+
+          return {
+            title,
+            // largest possible table will have a score of 0.2, less columns reduce score
+            score: (table.columns.length / maxColumnCount) * 0.2,
+            datasourceSuggestionId: table.datasourceSuggestionId,
+            state: {
+              layers: [
+                {
+                  layerId: table.layerId,
+                  columns: table.columns.map(col => col.columnId),
+                },
+              ],
             },
-          ],
-        },
-        previewIcon: 'visTable',
-      };
-    });
+            previewIcon: 'visTable',
+            // dont show suggestions for reduced versions or single-line tables
+            hide: table.changeType === 'reduced' || !table.isMultiRow,
+          };
+        })
+    );
   },
 
   renderConfigPanel: (domElement, props) =>

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.test.tsx

@@ -94,6 +94,7 @@ describe('chart_switch', () => {
           datasourceSuggestionId: 0,
           isMultiRow: true,
           layerId: 'a',
+          changeType: 'unchanged',
         },
       },
     ]);
@@ -205,7 +206,6 @@ describe('chart_switch', () => {
                 label: '',
                 dataType: 'string',
                 isBucketed: true,
-                isMetric: false,
               },
             },
             {
@@ -214,13 +214,13 @@ describe('chart_switch', () => {
                 label: '',
                 dataType: 'number',
                 isBucketed: false,
-                isMetric: true,
               },
             },
           ],
           datasourceSuggestionId: 0,
           layerId: 'first',
           isMultiRow: true,
+          changeType: 'unchanged',
         },
       },
     ]);
@@ -435,7 +435,6 @@ describe('chart_switch', () => {
                 label: '',
                 dataType: 'string',
                 isBucketed: true,
-                isMetric: false,
               },
             },
             {
@@ -444,13 +443,13 @@ describe('chart_switch', () => {
                 label: '',
                 dataType: 'number',
                 isBucketed: false,
-                isMetric: true,
               },
             },
           ],
           datasourceSuggestionId: 0,
           layerId: 'a',
           isMultiRow: true,
+          changeType: 'unchanged',
         },
       },
     ]);

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx

@@ -112,6 +112,10 @@ export function ChartSwitch(props: Props) {
       visualizationMap: { [visualizationId]: newVisualization },
       activeVisualizationId: props.visualizationId,
       visualizationState: props.visualizationState,
+    }).filter(suggestion => {
+      // don't use extended versions of current data table on switching between visualizations
+      // to avoid confusing the user.
+      return suggestion.changeType !== 'extended';
     })[0];
 
     let dataLoss: VisualizationSelection['dataLoss'];

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx

@@ -32,6 +32,7 @@ function generateSuggestion(datasourceSuggestionId = 1, state = {}): DatasourceS
       datasourceSuggestionId,
       isMultiRow: true,
       layerId: 'first',
+      changeType: 'unchanged',
     },
   };
 }
@@ -907,6 +908,7 @@ describe('editor_frame', () => {
             datasourceSuggestionId: 0,
             isMultiRow: true,
             layerId: 'first',
+            changeType: 'unchanged',
           },
         },
       ]);
@@ -1068,18 +1070,32 @@ describe('editor_frame', () => {
       expect(mockVisualization2.getSuggestions).toHaveBeenCalled();
     });
 
-    it('should display top 3 suggestions in descending order', async () => {
+    it('should display top 5 suggestions in descending order', async () => {
       const instance = mount(
         <EditorFrame
           {...getDefaultProps()}
           visualizationMap={{
             testVis: {
               ...mockVisualization,
               getSuggestions: () => [
+                {
+                  datasourceSuggestionId: 0,
+                  score: 0.1,
+                  state: {},
+                  title: 'Suggestion6',
+                  previewIcon: 'empty',
+                },
                 {
                   datasourceSuggestionId: 0,
                   score: 0.5,
                   state: {},
+                  title: 'Suggestion3',
+                  previewIcon: 'empty',
+                },
+                {
+                  datasourceSuggestionId: 0,
+                  score: 0.7,
+                  state: {},
                   title: 'Suggestion2',
                   previewIcon: 'empty',
                 },
@@ -1099,14 +1115,14 @@ describe('editor_frame', () => {
                   datasourceSuggestionId: 0,
                   score: 0.4,
                   state: {},
-                  title: 'Suggestion4',
+                  title: 'Suggestion5',
                   previewIcon: 'empty',
                 },
                 {
                   datasourceSuggestionId: 0,
                   score: 0.45,
                   state: {},
-                  title: 'Suggestion3',
+                  title: 'Suggestion4',
                   previewIcon: 'empty',
                 },
               ],
@@ -1133,7 +1149,7 @@ describe('editor_frame', () => {
           .find('[data-test-subj="lnsSuggestion"]')
           .find(EuiPanel)
           .map(el => el.parents(EuiToolTip).prop('content'))
-      ).toEqual(['Suggestion1', 'Suggestion2', 'Suggestion3']);
+      ).toEqual(['Suggestion1', 'Suggestion2', 'Suggestion3', 'Suggestion4', 'Suggestion5']);
     });
 
     it('should switch to suggested visualization', async () => {

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.test.ts

@@ -14,7 +14,13 @@ const generateSuggestion = (
   layerId: string = 'first'
 ): DatasourceSuggestion => ({
   state,
-  table: { datasourceSuggestionId, columns: [], isMultiRow: false, layerId },
+  table: {
+    datasourceSuggestionId,
+    columns: [],
+    isMultiRow: false,
+    layerId,
+    changeType: 'unchanged',
+  },
 });
 
 let datasourceMap: Record<string, DatasourceMock>;
@@ -233,12 +239,14 @@ describe('suggestion helpers', () => {
       columns: [],
       isMultiRow: true,
       layerId: 'first',
+      changeType: 'unchanged',
     };
     const table2: TableSuggestion = {
       datasourceSuggestionId: 1,
       columns: [],
       isMultiRow: true,
       layerId: 'first',
+      changeType: 'unchanged',
     };
     datasourceMap.mock.getDatasourceSuggestionsFromCurrentState.mockReturnValue([
       { state: {}, table: table1 },

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.ts

@@ -6,7 +6,7 @@
 
 import _ from 'lodash';
 import { Ast } from '@kbn/interpreter/common';
-import { Visualization, Datasource, FramePublicAPI } from '../../types';
+import { Visualization, Datasource, FramePublicAPI, TableChangeType } from '../../types';
 import { Action } from './state_management';
 
 export interface Suggestion {
@@ -20,6 +20,8 @@ export interface Suggestion {
   visualizationState: unknown;
   previewExpression?: Ast | string;
   previewIcon: string;
+  hide?: boolean;
+  changeType: TableChangeType;
 }
 
 /**
@@ -100,6 +102,7 @@ export function getSuggestions({
             datasourceState: datasourceSuggestion.state,
             datasourceId: datasourceSuggestion.datasourceId,
             columns: datasourceSuggestion.table.columns.length,
+            changeType: datasourceSuggestion.table.changeType,
           };
         });
     })

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.test.tsx

@@ -156,6 +156,23 @@ describe('suggestion_panel', () => {
     expect(passedExpression).toMatchInlineSnapshot(`
       Object {
         "chain": Array [
+          Object {
+            "arguments": Object {},
+            "function": "kibana",
+            "type": "function",
+          },
+          Object {
+            "arguments": Object {
+              "query": Array [
+                "{\\"query\\":\\"\\",\\"language\\":\\"lucene\\"}",
+              ],
+              "timeRange": Array [
+                "{\\"from\\":\\"now-7d\\",\\"to\\":\\"now\\"}",
+              ],
+            },
+            "function": "kibana_context",
+            "type": "function",
+          },
           Object {
             "arguments": Object {
               "layerIds": Array [

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx

@@ -13,10 +13,10 @@ import { Action } from './state_management';
 import { Datasource, Visualization, FramePublicAPI } from '../../types';
 import { getSuggestions, Suggestion, switchToSuggestion } from './suggestion_helpers';
 import { ExpressionRenderer } from '../../../../../../../src/legacy/core_plugins/data/public';
-import { prependDatasourceExpression } from './expression_helpers';
+import { prependDatasourceExpression, prependKibanaContext } from './expression_helpers';
 import { debouncedComponent } from '../../debounced_component';
 
-const MAX_SUGGESTIONS_DISPLAYED = 3;
+const MAX_SUGGESTIONS_DISPLAYED = 5;
 
 export interface SuggestionPanelProps {
   activeDatasourceId: string | null;
@@ -122,7 +122,9 @@ function InnerSuggestionPanel({
     visualizationMap,
     activeVisualizationId,
     visualizationState,
-  }).slice(0, MAX_SUGGESTIONS_DISPLAYED);
+  })
+    .filter(suggestion => !suggestion.hide)
+    .slice(0, MAX_SUGGESTIONS_DISPLAYED);
 
   if (suggestions.length === 0) {
     return null;
@@ -139,14 +141,13 @@ function InnerSuggestionPanel({
         </h3>
       </EuiTitle>
       <div className="lnsSuggestionsPanel__suggestions">
-        {suggestions.map(suggestion => {
-          const previewExpression = suggestion.previewExpression
-            ? prependDatasourceExpression(
-                suggestion.previewExpression,
-                datasourceMap,
-                datasourceStates
-              )
-            : null;
+        {suggestions.map((suggestion: Suggestion) => {
+          const previewExpression = preparePreviewExpression(
+            suggestion,
+            datasourceMap,
+            datasourceStates,
+            frame
+          );
           return (
             <SuggestionPreview
               suggestion={suggestion}
@@ -162,3 +163,35 @@ function InnerSuggestionPanel({
     </div>
   );
 }
+function preparePreviewExpression(
+  suggestion: Suggestion,
+  datasourceMap: Record<string, Datasource<unknown, unknown>>,
+  datasourceStates: Record<string, { isLoading: boolean; state: unknown }>,
+  framePublicAPI: FramePublicAPI
+) {
+  if (!suggestion.previewExpression) return null;
+
+  const expressionWithDatasource = prependDatasourceExpression(
+    suggestion.previewExpression,
+    datasourceMap,
+    suggestion.datasourceId
+      ? {
+          ...datasourceStates,
+          [suggestion.datasourceId]: {
+            isLoading: false,
+            state: suggestion.datasourceState,
+          },
+        }
+      : datasourceStates
+  );
+
+  const expressionContext = {
+    query: framePublicAPI.query,
+    timeRange: {
+      from: framePublicAPI.dateRange.fromDate,
+      to: framePublicAPI.dateRange.toDate,
+    },
+  };
+
+  return prependKibanaContext(expressionWithDatasource, expressionContext);
+}