[Lens] Transient suggestions (elastic#44234)

* [lens] Initial Commit (elastic#35627) * [visualization editor] Initial Commit * [lens] Add more complete initial state * [lens] Fix type issues * [lens] Remove feature control * [lens] Bring back feature control and add tests * [lens] Update plugin structure and naming per comments * replace any usage by safe casting * [lens] Respond to review comments * [lens] Remove unused EditorFrameState type * [lens] Initial state for IndexPatternDatasource (elastic#36052) * [lens] Add first tests to indexpattern data source * Respond to review comments * Fix type definitions * [lens] Editor frame initializes datasources and visualizations (elastic#36060) * [lens] Editor frame initializes datasources and visualizations * Respond to review comments * Fix build issues * Fix state management issue * [lens][draft] Lens/drag drop (elastic#36268) Add basic drag / drop component to Lens * remove local package (elastic#36456) * [lens] Native renderer (elastic#36165) * Add nativerenderer component * Use native renderer in app and editor frame * [Lens] No explicit any (elastic#36515) * [Lens] Implement basic editor frame state handling (elastic#36443) * [lens] Load index patterns and render in data panel (elastic#36463) * [lens] Editor frame initializes datasources and visualizations * Respond to review comments * Fix build issues * remove local package * [lens] Load index patterns into data source * Redo types for Index Pattern Datasource * Fix one more type * Respond to review comments * [draft] Lens/line chart renderer (elastic#36827) Expression logic for the Lens xy chart. * [lens] Index pattern data panel (initial) (elastic#37015) * [lens] Index pattern switcher * Respond to review comments * [Lens] Editor state 2 (elastic#36513) * [lens] Dimension panel that generates columns (elastic#37117) * [lens] Dimension panel that generates columns * Update from review comments * [lens] Generate esdocs queries from index pattern (elastic#37361) * [lens] Generate esdocs queries from index pattern * Remove unused code * Update yarn.lock from yarn kbn bootstrap * [Lens] Add basic Lens xy chart suggestions (elastic#37030) Basic xy chart suggestions * [Lens] Expression rendering (elastic#37648) * [Lens] Expression handling (elastic#37876) * [Lens] Lens/xy config panel (elastic#37391) Basic xy chart configuration panel * [Lens] Xy expression building (elastic#37967) * [Lens] Initialize visualization with datasource api (elastic#38142) * [lens] Dimension panel lets users select operations and fields individually (elastic#37573) * [lens] Dimension panel lets users select operations and fields individually * Split files and add tests * Fix dimension labeling and add clear button * Support more aggregations, aggregation nesting, rollups, and clearing * Fix esaggs expression * Increase top-level test coverage of dimension panel * Update from review comments * [Lens] Rename columns (elastic#38278) * [Lens] Lens/index pattern drag drop (elastic#37711) * Basic xy chart suggestions * Re-apply XY config panel after force merge * Initial integration of lens drag and drop * Tweak naming, remove irellevant comment * Tweaks per Wylie's feedback * Add xy chart internationalization Tweak types per Joe's feedback * Update xy chart i18n implementation * Fix i18n id * Add drop tests to the lens index pattern * improve tests * [lens] Only allow aggregated dimensions (elastic#38820) * [lens] Only allow aggregated dimensions * [lens] Index pattern suggest on drop * Fully remove value * Revert "[lens] Index pattern suggest on drop" This reverts commit 604c6ed. * Fix type errors * [lens] Suggest on drop (elastic#38848) * [lens] Index pattern suggest on drop * Add test for suggestion without date field * fix merge * [Lens] Parameter configurations and new dimension config flow (elastic#38863) * fix eslint failure * [lens] Fix build by updating saved objects and i18n (elastic#39391) * [lens] Update location of saved objects code * Update internatationalization * Remove added file * Lens basic metric visualization * [lens] Fix arguments to esaggs using booleans (elastic#39462) * [lens] Datatable visualization plugin (elastic#39390) * [lens] Datatable visualization plugin * Fix merge issues and add tests * Update from review * Fix file locations * Fix merge issues, localize expression help text * Add auto-scaling to the lens metric visualization * Fix unit tests broken by autoscale * Move autoscale to the new Lens folder * [lens] Use first suggestion when switching visualizations (elastic#39377) * [lens] Label each Y axis with its operation label (elastic#39461) * [lens] Label each Y axis with its operation label * Remove comment * Add link to chart issue * [Lens] Suggestion preview rendering (elastic#39576) * [Lens] Popover configs (elastic#39565) * [Lens] Basic layouting (elastic#39587) * remove datasource public API in suggestions (elastic#39772) * [Lens] Basic save / load (elastic#39257) Add basic routing, save, and load to Lens * [lens] Fix lint error * [lens] Use node scripts/eslint.js --fix to fix errors * [lens] Include link to lens from Visualize (elastic#40542) * [lens] Support stacking in xy visualization (elastic#40546) * [lens] Support stacking in xy visualization * Use chart type switcher for stacked and horizontal xy charts * Clean up remaining isStacked code * Fix type error * [Lens] Add xy split series support (elastic#39726) * Add split series to lens xy chart * [lens] Lens Filter Ratio (elastic#40196) * WIP filter ratio * Fix test issues * Pass dependencies through plugin like new platform * Pass props into filter ratio popover editor * Provide mocks to filter_ratio popover test * Add another test * Clean up to prepare for review * Clean up unnecessary changes * Respond to review comments * Fix tests * [Lens] Terms order direction (elastic#39884) * fix types * [Lens] Data panel styling and optimizations (elastic#40787) Style the data panel (mostly Joe Reuter's doing). Optimize a bunch of the Lens stack. * Add metric preview icon * Fix metric vis tests * Fix metric plugin imports * Use the operation label as the metric title * [Lens] Optimize dimension panel flow (elastic#41114) * [Lens] re-introduce no-explicit-any (elastic#41454) * [Lens] No results marker (elastic#41450) * [lens] Support layers for visualizing results of multiple queries (elastic#41290) * [lens] WIP add support for layers * [lens] WIP switch to nested tables * Get basic layering to work * Load multiple tables and render in one chart * Fix priority ordering * Reduce quantity of linting errors * Ensure that new xy layer state has a split column * Make the "add" y / split the trailing accessor * Various fixes for datasource public API and implementation * Unify datasource deletion and accessor removal * Fix broken scss * Fix xy visualization TypeScript errors? * Build basic suggestions * Restore save/load and fix typescript bugs * simplify init routine * fix save tests * fix persistence tests * fix state management tests * Ensure the data table is aligned to the top * Add layer support to Lens datatable * Give xy chart a default layer initially * Allow deletion of layers in xy charts * xy: Make split accessor singular Remove commented code blocks * Change expression type for lens_merge_tables * Fix XY chart rendering expression * Fix type errors relating to `layerId` in table suggestions * Pass around tables for suggestions with associated layerIds * fix tests in workspace panel * fix editor_frame tests * Fix xy tests, skip inapplicable tests that will be implemented in a separate PR * add some tests for multiple datasources and layers * Suggest that split series comes before X axis in XY chart * Get datatable suggestion working * Adjust how xy axis labels are computed * Datasource suggestions should handle layers and have tests * Fix linting in XY chart and remove commented code * Update snapshots from earlier change * Fix linting errors * More cleanup * Remove commented code * Test the multi-column editor * XY Visualization does not need to track datasourceId * Fix various comments * Remove unused xy prop Add datasource header to datatable config * Use operation labels for XY chart * Adding and removing layers is reflected in the datasource * rewrote datasource state init * clean up editor_frame frame api implementation * clean up editor frame * [Lens] Embeddable (elastic#41361) * [lens] Move XY chart config into popover and fix layering (elastic#41927) * [lens] Move XY chart config into popover and fix layering * Fix tests * Update style * Change wrapping of layer settings popover * [Lens] Fix bugs in date_histogram and filter ratio (elastic#42046) * [Lens] Performance improvements (elastic#41784) * fix type error * switch default size of terms operation to 3 (elastic#42334) * [lens] Improve suggestions for split series (elastic#42052) * [lens] Add chart switcher (elastic#42093) * solve merge conflicts * fix test case * [Lens] Allow only current visualization on field drop in workspace (elastic#42344) * [Lens] Remove indexpattern id on column (elastic#42429) * [lens] Implement app-level filtering and time picker (elastic#42031) * [lens] Implement app-level filtering and time picker * More integration with filter bar * Clean up test code and type errors * Add frame level tests for syncing with app * Add test coverage for app logic * Simplify state management from app down * Fix import errors * Clarify whether properties are ids or titles for index pattern * pass new saved object by ref * add dirty state checking * Fix tests * [Lens] Add some tests around document handling in dimension panel (elastic#42670) * [Lens] Terms operation boolean support (elastic#42817) * [lens] Minor UX/UI improvements in Lens (elastic#42852) * Make dimension popover toggle when clicking button * Without suggestions hide suggestion panel * Add missing translations (elastic#42921) * [Lens] Config panel design (elastic#42980) * Fix up design of config panel Does not include config popover * Add metric suggestions, fix tests * Remove a couple of non-null assertions (elastic#43013) * Remove a couple of non-null assertions * Remove orphaned import * [Lens] Switch indexpattern manually (elastic#42599) * [Lens] Update frame to put suggestions at the bottom (elastic#42997) * Back out suggestion changes, in lieu of Joe's work * fix type errors * switch indexpattern on layer if there is only a single empty one (elastic#43079) * [Lens] Suggest reduced versions of current data table (elastic#42537) * [Lens] Field formatter support (elastic#38874) * Fix bugs * Fix metric autoscale logic * Register metric as an embeddable * Fix metric autoscale flicker * Render mini metric in suggestions panel * Cache the metric filterOperations function * fix auto scaling edge cases * [Lens] Add bucket nesting editor to indexpattern (elastic#42869) * Modify auto-scale to handle resize events * use format hints in metric vis * start cleaning up suggestions * [Lens] Remove unnecessary fields and indexing from mappings (elastic#43285) * Tweak metric to only scale down so far, and scale both the number and the label. * Fix lens metric tests * [Lens] Xy scale type (elastic#42142) * start adding more suggestions * remove unused imports * work on suggestions * work more on suggestions * work more on suggestions * work more on suggestions * [lens] Allow updater function to be used for updating state (elastic#43373) * [Lens] Lens metric visualization (elastic#39364) * clean up tests and add new ones * remove isMetric * area as default on time dimension * fix bug in area chart for time * Fix axis rotation (elastic#43792) * remove title form layer * [Lens] Auto date histogram (elastic#43775) * Add auto date histogram * Improve documentation and cleanup * Add tests * Change test name * handle state in app * fix isMetric usages * fix integration tests * fix type errors * fix date handling on submit * add new suggestion types * fix test * do not suggest single tables * remove unused import * [Lens] Fix query bar integration (elastic#43865) * switch order of appending new string column * resolve merge conflicts * [Lens] Clean up operations code (elastic#43784) * fix merge conflicts * poc implementation * highlight currently active suggestion and provide button to submit current choice * [Lens] Functional tests (elastic#44279) Foundational layer for lens functional tests. Lens-specific page objects are not in this PR. * [Lens] Add Lens visualizations to Visualize list (elastic#43398) * [Lens] Suggestion improvements (elastic#43688) * fix bugs * [lens] Calculate existence of fields in datasource (elastic#44422) * [lens] Calculate existence of fields in datasource * Fix route registration * Add page object and use existence in functional test * Simplify layout of filters for index pattern * Respond to review feedback * Update class names * Use new URL constant * Fix usage of base path * Fix lint errors * [Lens ] Preview metric (elastic#43755) * format filter ratio as percentage (elastic#44625) * [Lens] Remove datasource suggestion id (elastic#44495) * [Lens] Make breadcrumbs look and feel like Visualize (elastic#44258) * [lens] Fix breakage from app-arch movements (elastic#44720) * Design cleanup * PR review comments * fix tests * small cleanup * remove unused import * [lens] Fix type error in test from merge * [lens] Fix registration of embeddable (elastic#45171) * keep references stable if table is just extended and add tests * changed label for stack/unstack * fix test * [Lens] Functional tests (elastic#44814) Basic functional tests for Lens, by no means comprehensive. This is more of a smokescreen test of some normal use cases. * [lens] Add Lens to CODEOWNERS (elastic#45296) * [lens] Fix visualization alias registration * [lens] Fix usage of EUI after typescript upgrade (elastic#45404) * [lens] Fix usage of EUI after typescript upgrade * Use local fix instead of workaround * fix bug and address reviews * Fix frame tests
wylieconlon · Sep 18, 2019 · fe9b2da · fe9b2da
1 parent da666a5
commit fe9b2da
Show file tree

Hide file tree

Showing 27 changed files with 871 additions and 357 deletions.
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx
@@ -77,10 +77,15 @@ export function ChartSwitch(props: Props) {
   const commitSelection = (selection: VisualizationSelection) => {
     setFlyoutOpen(false);
 
-    switchToSuggestion(props.framePublicAPI, props.dispatch, {
-      ...selection,
-      visualizationState: selection.getVisualizationState(),
-    });
+    switchToSuggestion(
+      props.framePublicAPI,
+      props.dispatch,
+      {
+        ...selection,
+        visualizationState: selection.getVisualizationState(),
+      },
+      'SWITCH_VISUALIZATION'
+    );
   };
 
   function getSelection(

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/config_panel_wrapper.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/config_panel_wrapper.tsx
@@ -34,6 +34,7 @@ export const ConfigPanelWrapper = memo(function ConfigPanelWrapper(props: Config
       props.dispatch({
         type: 'UPDATE_VISUALIZATION_STATE',
         newState,
+        clearStagedPreview: false,
       });
     },
     [props.dispatch]

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/data_panel_wrapper.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/data_panel_wrapper.tsx
@@ -32,6 +32,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
         type: 'UPDATE_DATASOURCE_STATE',
         updater,
         datasourceId: props.activeDatasource!,
+        clearStagedPreview: true,
       });
     },
     [props.dispatch, props.activeDatasource]

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx
@@ -1153,7 +1153,14 @@ describe('editor_frame', () => {
           .find('[data-test-subj="lnsSuggestion"]')
           .find(EuiPanel)
           .map(el => el.parents(EuiToolTip).prop('content'))
-      ).toEqual(['Suggestion1', 'Suggestion2', 'Suggestion3', 'Suggestion4', 'Suggestion5']);
+      ).toEqual([
+        'Current',
+        'Suggestion1',
+        'Suggestion2',
+        'Suggestion3',
+        'Suggestion4',
+        'Suggestion5',
+      ]);
     });
 
     it('should switch to suggested visualization', async () => {
@@ -1196,7 +1203,7 @@ describe('editor_frame', () => {
       act(() => {
         instance
           .find('[data-test-subj="lnsSuggestion"]')
-          .first()
+          .at(2)
           .simulate('click');
       });
 

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx
@@ -84,6 +84,7 @@ export function EditorFrame(props: EditorFrameProps) {
               type: 'UPDATE_DATASOURCE_STATE',
               datasourceId: id,
               updater: newState,
+              clearStagedPreview: true,
             });
           },
           layer
@@ -265,6 +266,7 @@ export function EditorFrame(props: EditorFrameProps) {
             visualizationMap={props.visualizationMap}
             dispatch={dispatch}
             ExpressionRenderer={props.ExpressionRenderer}
+            stagedPreview={state.stagedPreview}
           />
         )
       }

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/state_management.ts b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/state_management.ts
@@ -8,14 +8,18 @@ import { i18n } from '@kbn/i18n';
 import { EditorFrameProps } from '../editor_frame';
 import { Document } from '../../persistence/saved_object_store';
 
-export interface EditorFrameState {
-  persistedId?: string;
-  title: string;
+export interface PreviewState {
   visualization: {
     activeId: string | null;
     state: unknown;
   };
   datasourceStates: Record<string, { state: unknown; isLoading: boolean }>;
+}
+
+export interface EditorFrameState extends PreviewState {
+  persistedId?: string;
+  title: string;
+  stagedPreview?: PreviewState;
   activeDatasourceId: string | null;
 }
 
@@ -32,10 +36,12 @@ export type Action =
       type: 'UPDATE_DATASOURCE_STATE';
       updater: unknown | ((prevState: unknown) => unknown);
       datasourceId: string;
+      clearStagedPreview?: boolean;
     }
   | {
       type: 'UPDATE_VISUALIZATION_STATE';
       newState: unknown;
+      clearStagedPreview?: boolean;
     }
   | {
       type: 'UPDATE_LAYER';
@@ -59,6 +65,19 @@ export type Action =
       datasourceState: unknown;
       datasourceId: string;
     }
+  | {
+      type: 'SELECT_SUGGESTION';
+      newVisualizationId: string;
+      initialState: unknown;
+      datasourceState: unknown;
+      datasourceId: string;
+    }
+  | {
+      type: 'ROLLBACK_SUGGESTION';
+    }
+  | {
+      type: 'SUBMIT_SUGGESTION';
+    }
   | {
       type: 'SWITCH_DATASOURCE';
       newDatasourceId: string;
@@ -176,6 +195,41 @@ export const reducer = (state: EditorFrameState, action: Action): EditorFrameSta
           activeId: action.newVisualizationId,
           state: action.initialState,
         },
+        stagedPreview: undefined,
+      };
+    case 'SELECT_SUGGESTION':
+      return {
+        ...state,
+        datasourceStates:
+          'datasourceId' in action && action.datasourceId
+            ? {
+                ...state.datasourceStates,
+                [action.datasourceId]: {
+                  ...state.datasourceStates[action.datasourceId],
+                  state: action.datasourceState,
+                },
+              }
+            : state.datasourceStates,
+        visualization: {
+          ...state.visualization,
+          activeId: action.newVisualizationId,
+          state: action.initialState,
+        },
+        stagedPreview: state.stagedPreview || {
+          datasourceStates: state.datasourceStates,
+          visualization: state.visualization,
+        },
+      };
+    case 'ROLLBACK_SUGGESTION':
+      return {
+        ...state,
+        ...(state.stagedPreview || {}),
+        stagedPreview: undefined,
+      };
+    case 'SUBMIT_SUGGESTION':
+      return {
+        ...state,
+        stagedPreview: undefined,
       };
     case 'UPDATE_DATASOURCE_STATE':
       return {
@@ -190,6 +244,7 @@ export const reducer = (state: EditorFrameState, action: Action): EditorFrameSta
             isLoading: false,
           },
         },
+        stagedPreview: action.clearStagedPreview ? undefined : state.stagedPreview,
       };
     case 'UPDATE_VISUALIZATION_STATE':
       if (!state.visualization.activeId) {
@@ -201,6 +256,7 @@ export const reducer = (state: EditorFrameState, action: Action): EditorFrameSta
           ...state.visualization,
           state: action.newState,
         },
+        stagedPreview: action.clearStagedPreview ? undefined : state.stagedPreview,
       };
     default:
       return state;

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.ts b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.ts
@@ -144,14 +144,15 @@ export function switchToSuggestion(
   suggestion: Pick<
     Suggestion,
     'visualizationId' | 'visualizationState' | 'datasourceState' | 'datasourceId' | 'keptLayerIds'
-  >
+  >,
+  type: 'SWITCH_VISUALIZATION' | 'SELECT_SUGGESTION' = 'SELECT_SUGGESTION'
 ) {
   const action: Action = {
-    type: 'SWITCH_VISUALIZATION',
+    type,
     newVisualizationId: suggestion.visualizationId,
     initialState: suggestion.visualizationState,
     datasourceState: suggestion.datasourceState,
-    datasourceId: suggestion.datasourceId,
+    datasourceId: suggestion.datasourceId!,
   };
   dispatch(action);
   const layerIds = Object.keys(frame.datasourceLayers).filter(id => {

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.scss b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.scss
@@ -10,25 +10,20 @@
 }
 
 .lnsSuggestionsPanel__title {
-  margin: $euiSizeS 0 $euiSizeXS;
+  margin-left: $euiSizeXS / 2;
 }
 
 .lnsSuggestionsPanel__suggestions {
   @include euiScrollBar;
   @include lnsOverflowShadowHorizontal;
   padding-top: $euiSizeXS;
-  overflow-x: auto;
+  overflow-x: scroll;
   overflow-y: hidden;
   display: flex;
 
   // Padding / negative margins to make room for overflow shadow
   padding-left: $euiSizeXS;
   margin-left: -$euiSizeXS;
-
-  // Add margin to the next of the same type
-  > * + * {
-    margin-left: $euiSizeS;
-  }
 }
 
 // These sizes also match canvas' page thumbnails for consistency
@@ -39,8 +34,13 @@ $lnsSuggestionWidth: 150px;
   flex: 0 0 auto;
   width: $lnsSuggestionWidth !important;
   height: $lnsSuggestionHeight;
-  // Allows the scrollbar to stay flush to window
-  margin-bottom: $euiSize;
+  margin-right: $euiSizeS;
+  margin-left: $euiSizeXS / 2;
+  margin-bottom: $euiSizeXS / 2;
+}
+
+.lnsSuggestionPanel__button-isSelected {
+  @include euiFocusRing;
 }
 
 .lnsSidebar__suggestionIcon {
@@ -58,3 +58,15 @@ $lnsSuggestionWidth: 150px;
   pointer-events: none;
   margin: 0 $euiSizeS;
 }
+
+.lnsSuggestionChartWrapper--withLabel {
+  height: $lnsSuggestionHeight - $euiSizeL;
+}
+
+.lnsSuggestionPanel__buttonLabel {
+  @include euiFontSizeXS;
+  display: block;
+  font-weight: $euiFontWeightBold;
+  text-align: center;
+  flex-grow: 0;
+}