[Lens] Introduce 4 new calculation functions: counter rate, cumulative sum, differences, and moving average

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

@@ -162,7 +162,7 @@ export function WorkspacePanel({
 
   const expression = useMemo(
     () => {
-      if (!configurationValidationError || configurationValidationError.length === 0) {
+      if (!configurationValidationError?.length) {
         try {
           return buildExpression({
             visualization: activeVisualization,

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx

@@ -37,6 +37,7 @@ import { BucketNestingEditor } from './bucket_nesting_editor';
 import { IndexPattern, IndexPatternLayer } from '../types';
 import { trackUiEvent } from '../../lens_ui_telemetry';
 import { FormatSelector } from './format_selector';
+import { ReferenceEditor } from './reference_editor';
 import { TimeScaling } from './time_scaling';
 
 const operationPanels = getOperationDisplay();
@@ -107,7 +108,15 @@ export function DimensionEditor(props: DimensionEditorProps) {
     layerId,
     currentIndexPattern,
     hideGrouping,
+    dateRange,
   } = props;
+  const services = {
+    data: props.data,
+    uiSettings: props.uiSettings,
+    savedObjectsClient: props.savedObjectsClient,
+    http: props.http,
+    storage: props.storage,
+  };
   const { fieldByOperation, operationWithoutField } = operationSupportMatrix;
 
   const setStateWrapper = (layer: IndexPatternLayer) => {
@@ -148,7 +157,10 @@ export function DimensionEditor(props: DimensionEditorProps) {
         (selectedColumn && !hasField(selectedColumn) && definition.input === 'none'),
       disabledStatus:
         definition.getDisabledStatus &&
-        definition.getDisabledStatus(state.indexPatterns[state.currentIndexPatternId]),
+        definition.getDisabledStatus(
+          state.indexPatterns[state.currentIndexPatternId],
+          state.layers[layerId]
+        ),
     };
   });
 
@@ -194,9 +206,12 @@ export function DimensionEditor(props: DimensionEditorProps) {
           compatibleWithCurrentField ? '' : ' incompatible'
         }`,
         onClick() {
-          if (operationDefinitionMap[operationType].input === 'none') {
+          if (
+            operationDefinitionMap[operationType].input === 'none' ||
+            operationDefinitionMap[operationType].input === 'fullReference'
+          ) {
+            // Clear invalid state because we are reseting to a valid column
             if (selectedColumn?.operationType === operationType) {
-              // Clear invalid state because we are reseting to a valid column
               if (incompleteInfo) {
                 setStateWrapper(resetIncomplete(state.layers[layerId], columnId));
               }
@@ -283,6 +298,35 @@ export function DimensionEditor(props: DimensionEditorProps) {
       </div>
       <EuiSpacer size="s" />
       <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--shaded">
+        {!incompleteInfo &&
+        selectedColumn &&
+        'references' in selectedColumn &&
+        selectedOperationDefinition?.input === 'fullReference' ? (
+          <>
+            {selectedColumn.references.map((referenceId, index) => {
+              const validation = selectedOperationDefinition.requiredReferences[index];
+
+              return (
+                <ReferenceEditor
+                  key={index}
+                  layer={state.layers[layerId]}
+                  columnId={referenceId}
+                  updateLayer={(newLayer: IndexPatternLayer) => {
+                    setState(mergeLayer({ state, layerId, newLayer }));
+                  }}
+                  validation={validation}
+                  currentIndexPattern={currentIndexPattern}
+                  existingFields={state.existingFields}
+                  selectionStyle={selectedOperationDefinition.selectionStyle}
+                  dateRange={dateRange}
+                  {...services}
+                />
+              );
+            })}
+            <EuiSpacer size="s" />
+          </>
+        ) : null}
+
         {!selectedColumn ||
         selectedOperationDefinition?.input === 'field' ||
         (incompleteOperation && operationDefinitionMap[incompleteOperation].input === 'field') ? (
@@ -317,7 +361,13 @@ export function DimensionEditor(props: DimensionEditorProps) {
               }
               incompleteOperation={incompleteOperation}
               onDeleteColumn={() => {
-                setStateWrapper(deleteColumn({ layer: state.layers[layerId], columnId }));
+                setStateWrapper(
+                  deleteColumn({
+                    layer: state.layers[layerId],
+                    columnId,
+                    indexPattern: currentIndexPattern,
+                  })
+                );
               }}
               onChoose={(choice) => {
                 setStateWrapper(
@@ -334,32 +384,28 @@ export function DimensionEditor(props: DimensionEditorProps) {
           </EuiFormRow>
         ) : null}
 
-        {!currentFieldIsInvalid && !incompleteInfo && selectedColumn && (
-          <TimeScaling
-            selectedColumn={selectedColumn}
-            columnId={columnId}
-            layer={state.layers[layerId]}
-            updateLayer={setStateWrapper}
-          />
-        )}
-
         {!currentFieldIsInvalid && !incompleteInfo && selectedColumn && ParamEditor && (
           <>
             <ParamEditor
-              state={state}
-              setState={setState}
+              layer={state.layers[layerId]}
+              updateLayer={setStateWrapper}
               columnId={columnId}
               currentColumn={state.layers[layerId].columns[columnId]}
-              storage={props.storage}
-              uiSettings={props.uiSettings}
-              savedObjectsClient={props.savedObjectsClient}
-              layerId={layerId}
-              http={props.http}
               dateRange={props.dateRange}
-              data={props.data}
+              indexPattern={currentIndexPattern}
+              {...services}
             />
           </>
         )}
+
+        {!currentFieldIsInvalid && !incompleteInfo && selectedColumn && (
+          <TimeScaling
+            selectedColumn={selectedColumn}
+            columnId={columnId}
+            layer={state.layers[layerId]}
+            updateLayer={setStateWrapper}
+          />
+        )}
       </div>
 
       <EuiSpacer size="s" />
@@ -407,12 +453,15 @@ export function DimensionEditor(props: DimensionEditorProps) {
               selectedColumn={selectedColumn}
               onChange={(newFormat) => {
                 setState(
-                  updateColumnParam({
+                  mergeLayer({
                     state,
                     layerId,
-                    currentColumn: selectedColumn,
-                    paramName: 'format',
-                    value: newFormat,
+                    newLayer: updateColumnParam({
+                      layer: state.layers[layerId],
+                      columnId,
+                      paramName: 'format',
+                      value: newFormat,
+                    }),
                   })
                 );
               }}
@@ -425,11 +474,11 @@ export function DimensionEditor(props: DimensionEditorProps) {
 }
 function getErrorMessage(
   selectedColumn: IndexPatternColumn | undefined,
-  incompatibleSelectedOperationType: boolean,
+  incompleteOperation: boolean,
   input: 'none' | 'field' | 'fullReference' | undefined,
   fieldInvalid: boolean
 ) {
-  if (selectedColumn && incompatibleSelectedOperationType) {
+  if (selectedColumn && incompleteOperation) {
     if (input === 'field') {
       return i18n.translate('xpack.lens.indexPattern.invalidOperationLabel', {
         defaultMessage: 'To use this function, select a different field.',

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx

@@ -854,6 +854,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
             dataType: 'date',
             isBucketed: true,
             label: '',
+            customLabel: true,
             operationType: 'date_histogram',
             sourceField: 'ts',
             params: {
@@ -872,6 +873,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
         columnId: 'col2',
       };
     }
+
     it('should not show custom options if time scaling is not available', () => {
       wrapper = mount(
         <IndexPatternDimensionEditorComponent
@@ -1149,15 +1151,15 @@ describe('IndexPatternDimensionEditorPanel', () => {
         layers: {
           first: {
             ...state.layers.first,
+            columnOrder: ['col1', 'col2'],
             columns: {
               ...state.layers.first.columns,
               col2: expect.objectContaining({
-                sourceField: 'bytes',
                 operationType: 'avg',
-                // Other parts of this don't matter for this test
+                sourceField: 'bytes',
               }),
             },
-            columnOrder: ['col1', 'col2'],
+            incompleteColumns: {},
           },
         },
       },
@@ -1237,7 +1239,9 @@ describe('IndexPatternDimensionEditorPanel', () => {
   it('should indicate compatible fields when selecting the operation first', () => {
     wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} columnId={'col2'} />);
 
-    wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
+    act(() => {
+      wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
+    });
 
     const options = wrapper
       .find(EuiComboBox)
@@ -1317,10 +1321,14 @@ describe('IndexPatternDimensionEditorPanel', () => {
     expect(items.map(({ label }: { label: React.ReactNode }) => label)).toEqual([
       'Average',
       'Count',
+      'Counter rate',
+      'Cumulative sum',
+      'Differences',
       'Last value',
       'Maximum',
       'Median',
       'Minimum',
+      'Moving average',
       'Sum',
       'Unique count',
     ]);
@@ -1536,4 +1544,41 @@ describe('IndexPatternDimensionEditorPanel', () => {
       },
     });
   });
+
+  it('should hide the top level field selector when switching from non-reference to reference', () => {
+    wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
+
+    expect(wrapper.find('ReferenceEditor')).toHaveLength(0);
+
+    wrapper
+      .find('button[data-test-subj="lns-indexPatternDimension-derivative incompatible"]')
+      .simulate('click');
+
+    expect(wrapper.find('ReferenceEditor')).toHaveLength(1);
+  });
+
+  it('should hide the reference editors when switching from reference to non-reference', () => {
+    const stateWithReferences: IndexPatternPrivateState = getStateWithColumns({
+      col1: {
+        label: 'Differences of (incomplete)',
+        dataType: 'number',
+        isBucketed: false,
+        operationType: 'derivative',
+        references: ['col2'],
+        params: {},
+      },
+    });
+
+    wrapper = mount(
+      <IndexPatternDimensionEditorComponent {...defaultProps} state={stateWithReferences} />
+    );
+
+    expect(wrapper.find('ReferenceEditor')).toHaveLength(1);
+
+    wrapper
+      .find('button[data-test-subj="lns-indexPatternDimension-avg incompatible"]')
+      .simulate('click');
+
+    expect(wrapper.find('ReferenceEditor')).toHaveLength(0);
+  });
 });

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/operation_support.ts

@@ -49,7 +49,7 @@ export const getOperationSupportMatrix = (props: Props): OperationSupportMatrix
           supportedFieldsByOperation[operation.operationType] = new Set();
         }
         supportedFieldsByOperation[operation.operationType]?.add(operation.field);
-      } else if (operation.type === 'none') {
+      } else {
         supportedOperationsWithoutField.add(operation.operationType);
       }
     });