[Lens] Clean up operations code

x-pack/legacy/plugins/lens/public/app_plugin/app.tsx

@@ -27,6 +27,25 @@ interface State {
   query: Query;
   indexPatternTitles: string[];
   persistedDoc?: Document;
+  localQueryBarState: {
+    query?: Query;
+    dateRange?: {
+      from: string;
+      to: string;
+    };
+  };
+}
+
+function isLocalStateDirty(
+  localState: State['localQueryBarState'],
+  query: Query,
+  dateRange: State['dateRange']
+) {
+  return Boolean(
+    (localState.query && query && localState.query.query !== query.query) ||
+      (localState.dateRange && dateRange.fromDate !== localState.dateRange.from) ||
+      (localState.dateRange && dateRange.toDate !== localState.dateRange.to)
+  );
 }
 
 export function App({
@@ -57,6 +76,13 @@ export function App({
       toDate: timeDefaults.to,
     },
     indexPatternTitles: [],
+    localQueryBarState: {
+      query: { query: '', language },
+      dateRange: {
+        from: timeDefaults.from,
+        to: timeDefaults.to,
+      },
+    },
   });
 
   const lastKnownDocRef = useRef<Document | undefined>(undefined);
@@ -72,6 +98,10 @@ export function App({
             isLoading: false,
             persistedDoc: doc,
             query: doc.state.query,
+            localQueryBarState: {
+              ...state.localQueryBarState,
+              query: doc.state.query,
+            },
             indexPatternTitles: doc.state.datasourceMetaData.filterableIndexPatterns.map(
               ({ title }) => title
             ),
@@ -152,24 +182,34 @@ export function App({
           <QueryBar
             data-test-subj="lnsApp_queryBar"
             screenTitle={'lens'}
-            onSubmit={({ dateRange, query }) => {
+            onSubmit={payload => {
+              const { dateRange, query } = payload;
               setState({
                 ...state,
                 dateRange: {
                   fromDate: dateRange.from,
                   toDate: dateRange.to,
                 },
                 query: query || state.query,
+                localQueryBarState: payload,
               });
             }}
+            onChange={localQueryBarState => {
+              setState({ ...state, localQueryBarState });
+            }}
+            isDirty={isLocalStateDirty(state.localQueryBarState, state.query, state.dateRange)}
             appName={'lens'}
             indexPatterns={state.indexPatternTitles}
             store={store}
             showDatePicker={true}
             showQueryInput={true}
-            query={state.query}
-            dateRangeFrom={state.dateRange && state.dateRange.fromDate}
-            dateRangeTo={state.dateRange && state.dateRange.toDate}
+            query={state.localQueryBarState.query}
+            dateRangeFrom={
+              state.localQueryBarState.dateRange && state.localQueryBarState.dateRange.from
+            }
+            dateRangeTo={
+              state.localQueryBarState.dateRange && state.localQueryBarState.dateRange.to
+            }
             uiSettings={uiSettings}
           />
         </div>

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/index.scss

@@ -115,12 +115,14 @@ $lnsPanelMinWidth: $euiSize * 18;
   width: 100%;
   height: 100%;
   display: flex;
-  align-items: center;
-  justify-content: center;
   overflow-x: hidden;
   padding: $euiSize;
 }
 
+.lnsExpressionOutput > * {
+  flex: 1;
+}
+
 .lnsTitleInput {
   width: 100%;
   min-width: 100%;

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx

@@ -20,7 +20,7 @@ import { Storage } from 'ui/storage';
 jest.mock('ui/new_platform');
 jest.mock('../loader');
 jest.mock('../state_helpers');
-jest.mock('../operations');
+jest.mock('../operations/operations');
 
 // Used by indexpattern plugin, which is a dependency of a dependency
 jest.mock('ui/chrome');

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx

@@ -18,12 +18,7 @@ import {
   OperationType,
 } from '../indexpattern';
 
-import {
-  getAvailableOperationsByMetadata,
-  buildColumn,
-  operationDefinitionMap,
-  OperationDefinition,
-} from '../operations';
+import { getAvailableOperationsByMetadata, buildColumn, changeField } from '../operations';
 import { PopoverEditor } from './popover_editor';
 import { DragContextState, ChildDragDropProvider, DragDrop } from '../../drag_drop';
 import { changeColumn, deleteColumn } from '../state_helpers';
@@ -130,9 +125,7 @@ export const IndexPatternDimensionPanel = memo(function IndexPatternDimensionPan
           // If only the field has changed use the onFieldChange method on the operation to get the
           // new column, otherwise use the regular buildColumn to get a new column.
           const newColumn = hasFieldChanged
-            ? (operationDefinitionMap[selectedColumn.operationType] as OperationDefinition<
-                IndexPatternColumn
-              >).onFieldChange(selectedColumn, currentIndexPattern, droppedItem.field)
+            ? changeField(selectedColumn, currentIndexPattern, droppedItem.field)
             : buildColumn({
                 columns: props.state.layers[props.layerId].columns,
                 indexPattern: currentIndexPattern,

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx

@@ -32,7 +32,7 @@ import {
   operationDefinitionMap,
   getOperationDisplay,
   buildColumn,
-  OperationDefinition,
+  changeField,
 } from '../operations';
 import { deleteColumn, changeColumn } from '../state_helpers';
 import { FieldSelect } from './field_select';
@@ -284,14 +284,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
                 ) {
                   // If we just changed the field are not in an error state and the operation didn't change,
                   // we use the operations onFieldChange method to calculate the new column.
-                  const operation = operationDefinitionMap[
-                    choice.operationType
-                  ] as OperationDefinition<IndexPatternColumn>;
-                  column = operation.onFieldChange(
-                    selectedColumn,
-                    currentIndexPattern,
-                    fieldMap[choice.field]
-                  );
+                  column = changeField(selectedColumn, currentIndexPattern, fieldMap[choice.field]);
                 } else {
                   // Otherwise we'll use the buildColumn method to calculate a new column
                   column = buildColumn({
@@ -358,6 +351,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
                     state={state}
                     setState={setState}
                     columnId={columnId}
+                    currentColumn={state.layers[layerId].columns[columnId]}
                     storage={props.storage}
                     uiSettings={props.uiSettings}
                     layerId={layerId}

x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx

@@ -12,11 +12,9 @@ import { Storage } from 'ui/storage';
 import {
   DatasourceDimensionPanelProps,
   DatasourceDataPanelProps,
-  DimensionPriority,
   Operation,
   DatasourceLayerPanelProps,
 } from '../types';
-import { Query } from '../../../../../../src/legacy/core_plugins/data/public/query';
 import { getIndexPatterns } from './loader';
 import { toExpression } from './to_expression';
 import { IndexPatternDimensionPanel } from './dimension_panel';
@@ -29,70 +27,10 @@ import {
 
 import { isDraggedField } from './utils';
 import { LayerPanel } from './layerpanel';
+import { IndexPatternColumn } from './operations';
 import { Datasource } from '..';
 
-export type OperationType = IndexPatternColumn['operationType'];
-
-export type IndexPatternColumn =
-  | DateHistogramIndexPatternColumn
-  | TermsIndexPatternColumn
-  | SumIndexPatternColumn
-  | AvgIndexPatternColumn
-  | MinIndexPatternColumn
-  | MaxIndexPatternColumn
-  | CountIndexPatternColumn
-  | FilterRatioIndexPatternColumn;
-
-export interface BaseIndexPatternColumn extends Operation {
-  // Private
-  operationType: OperationType;
-  suggestedPriority?: DimensionPriority;
-}
-
-type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
-type ParameterlessIndexPatternColumn<
-  TOperationType extends OperationType,
-  TBase extends BaseIndexPatternColumn = FieldBasedIndexPatternColumn
-> = Omit<TBase, 'operationType'> & { operationType: TOperationType };
-
-export interface FieldBasedIndexPatternColumn extends BaseIndexPatternColumn {
-  sourceField: string;
-  suggestedPriority?: DimensionPriority;
-}
-
-export interface DateHistogramIndexPatternColumn extends FieldBasedIndexPatternColumn {
-  operationType: 'date_histogram';
-  params: {
-    interval: string;
-    timeZone?: string;
-  };
-}
-
-export interface TermsIndexPatternColumn extends FieldBasedIndexPatternColumn {
-  operationType: 'terms';
-  params: {
-    size: number;
-    orderBy: { type: 'alphabetical' } | { type: 'column'; columnId: string };
-    orderDirection: 'asc' | 'desc';
-  };
-}
-
-export interface FilterRatioIndexPatternColumn extends BaseIndexPatternColumn {
-  operationType: 'filter_ratio';
-  params: {
-    numerator: Query;
-    denominator: Query;
-  };
-}
-
-export type CountIndexPatternColumn = ParameterlessIndexPatternColumn<
-  'count',
-  BaseIndexPatternColumn
->;
-export type SumIndexPatternColumn = ParameterlessIndexPatternColumn<'sum'>;
-export type AvgIndexPatternColumn = ParameterlessIndexPatternColumn<'avg'>;
-export type MinIndexPatternColumn = ParameterlessIndexPatternColumn<'min'>;
-export type MaxIndexPatternColumn = ParameterlessIndexPatternColumn<'max'>;
+export { OperationType, IndexPatternColumn } from './operations';
 
 export interface IndexPattern {
   id: string;

x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.ts

@@ -14,7 +14,7 @@ import {
   IndexPatternPrivateState,
   IndexPattern,
 } from './indexpattern';
-import { buildColumn, getOperationTypesForField } from './operations';
+import { buildColumn, getOperationTypesForField } from './operations/operations';
 import { hasField } from './utils';
 
 function buildSuggestion({