Lens formula improvements

src/plugins/kibana_react/public/code_editor/code_editor.tsx

@@ -35,9 +35,9 @@ export interface Props {
   /**
    * Options for the Monaco Code Editor
    * Documentation of options can be found here:
-   * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html
+   * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
    */
-  options?: monaco.editor.IEditorConstructionOptions;
+  options?: monaco.editor.IStandaloneEditorConstructionOptions;
 
   /**
    * Suggestion provider for autocompletion

src/plugins/kibana_react/public/code_editor/index.tsx

@@ -19,6 +19,8 @@ const Fallback = () => (
   </EuiDelayRender>
 );
 
+export type CodeEditorProps = Props;
+
 export const CodeEditor: React.FunctionComponent<Props> = (props) => {
   const darkMode = useUiSetting<boolean>('theme:darkMode');
   return (

x-pack/plugins/canvas/shareable_runtime/webpack.config.js

@@ -39,7 +39,7 @@ module.exports = {
         'src/plugins/data/public/expressions/interpreter'
       ),
       'kbn/interpreter': path.resolve(KIBANA_ROOT, 'packages/kbn-interpreter/target/common'),
-      tinymath: path.resolve(KIBANA_ROOT, 'node_modules/tinymath/lib/tinymath.es5.js'),
+      tinymath: path.resolve(KIBANA_ROOT, 'node_modules/tinymath/lib/tinymath.min.js'),
       core_app_image_assets: path.resolve(KIBANA_ROOT, 'src/core/public/core_app/images'),
     },
     extensions: ['.js', '.json', '.ts', '.tsx', '.scss'],

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

@@ -30,7 +30,7 @@ export function DimensionContainer({
 }: {
   isOpen: boolean;
   handleClose: () => void;
-  panel: React.ReactElement;
+  panel: React.ReactElement | null;
   groupLabel: string;
 }) {
   const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false);
@@ -51,7 +51,19 @@ export function DimensionContainer({
 
   return isOpen ? (
     <EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
-      <EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!isOpen}>
+      <EuiOutsideClickDetector
+        onOutsideClick={(e) => {
+          let current = e.target as HTMLElement;
+          while (current) {
+            if (current?.getAttribute?.('data-test-subj') === 'lnsFormulaWidget') {
+              return;
+            }
+            current = current.parentNode as HTMLElement;
+          }
+          closeFlyout();
+        }}
+        isDisabled={!isOpen}
+      >
         <div
           role="dialog"
           aria-labelledby="lnsDimensionContainerTitle"

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

@@ -8,5 +8,5 @@
 import uuid from 'uuid/v4';
 
 export function generateId() {
-  return uuid();
+  return 'c' + uuid().replaceAll(/-/g, '');
 }

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

@@ -18,6 +18,7 @@ import {
   EuiFormLabel,
   EuiToolTip,
   EuiText,
+  EuiTabbedContent,
 } from '@elastic/eui';
 import { IndexPatternDimensionEditorProps } from './dimension_panel';
 import { OperationSupportMatrix } from './operation_support';
@@ -150,8 +151,11 @@ export function DimensionEditor(props: DimensionEditorProps) {
 
   const ParamEditor = selectedOperationDefinition?.paramEditor;
 
+  const [temporaryQuickFunction, setQuickFunction] = useState(false);
+
   const possibleOperations = useMemo(() => {
     return Object.values(operationDefinitionMap)
+      .filter(({ hidden }) => !hidden)
       .sort((op1, op2) => {
         return op1.displayName.localeCompare(op2.displayName);
       })
@@ -243,6 +247,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
         onClick() {
           if (
             operationDefinitionMap[operationType].input === 'none' ||
+            operationDefinitionMap[operationType].input === 'managedReference' ||
             operationDefinitionMap[operationType].input === 'fullReference'
           ) {
             // Clear invalid state because we are reseting to a valid column
@@ -320,7 +325,8 @@ export function DimensionEditor(props: DimensionEditorProps) {
 
   // Need to workout early on the error to decide whether to show this or an help text
   const fieldErrorMessage =
-    (selectedOperationDefinition?.input !== 'fullReference' ||
+    ((selectedOperationDefinition?.input !== 'fullReference' &&
+      selectedOperationDefinition?.input !== 'managedReference') ||
       (incompleteOperation && operationDefinitionMap[incompleteOperation].input === 'field')) &&
     getErrorMessage(
       selectedColumn,
@@ -329,8 +335,14 @@ export function DimensionEditor(props: DimensionEditorProps) {
       currentFieldIsInvalid
     );
 
-  return (
-    <div id={columnId}>
+  const shouldDisplayExtraOptions =
+    !currentFieldIsInvalid &&
+    !incompleteInfo &&
+    selectedColumn &&
+    selectedColumn.operationType !== 'formula';
+
+  const quickFunctions = (
+    <>
       <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--shaded">
         <EuiFormLabel>
           {i18n.translate('xpack.lens.indexPattern.functionsLabel', {
@@ -388,7 +400,8 @@ export function DimensionEditor(props: DimensionEditorProps) {
 
         {!selectedColumn ||
         selectedOperationDefinition?.input === 'field' ||
-        (incompleteOperation && operationDefinitionMap[incompleteOperation].input === 'field') ? (
+        (incompleteOperation && operationDefinitionMap[incompleteOperation].input === 'field') ||
+        temporaryQuickFunction ? (
           <EuiFormRow
             data-test-subj="indexPattern-field-selection-row"
             label={i18n.translate('xpack.lens.indexPattern.chooseField', {
@@ -448,18 +461,17 @@ export function DimensionEditor(props: DimensionEditorProps) {
           </EuiFormRow>
         ) : null}
 
-        {!currentFieldIsInvalid && !incompleteInfo && selectedColumn && ParamEditor && (
-          <>
-            <ParamEditor
-              layer={state.layers[layerId]}
-              updateLayer={setStateWrapper}
-              columnId={columnId}
-              currentColumn={state.layers[layerId].columns[columnId]}
-              dateRange={dateRange}
-              indexPattern={currentIndexPattern}
-              {...services}
-            />
-          </>
+        {shouldDisplayExtraOptions && ParamEditor && (
+          <ParamEditor
+            layer={state.layers[layerId]}
+            updateLayer={setStateWrapper}
+            columnId={columnId}
+            currentColumn={state.layers[layerId].columns[columnId]}
+            dateRange={dateRange}
+            indexPattern={currentIndexPattern}
+            operationDefinitionMap={operationDefinitionMap}
+            {...services}
+          />
         )}
 
         {!currentFieldIsInvalid && !incompleteInfo && selectedColumn && (
@@ -525,6 +537,77 @@ export function DimensionEditor(props: DimensionEditorProps) {
       </div>
 
       <EuiSpacer size="s" />
+    </>
+  );
+
+  const tabs = [
+    {
+      id: 'quickFunctions',
+      name: i18n.translate('xpack.lens.indexPattern.quickFunctionsLabel', {
+        defaultMessage: 'Quick functions',
+      }),
+      content: quickFunctions,
+    },
+    {
+      id: 'formula',
+      name: i18n.translate('xpack.lens.indexPattern.formulaLabel', {
+        defaultMessage: 'Formula',
+      }),
+      content: ParamEditor && (
+        <>
+          <ParamEditor
+            layer={state.layers[layerId]}
+            updateLayer={setStateWrapper}
+            columnId={columnId}
+            currentColumn={state.layers[layerId].columns[columnId]}
+            dateRange={dateRange}
+            indexPattern={currentIndexPattern}
+            operationDefinitionMap={operationDefinitionMap}
+            {...services}
+          />
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <div id={columnId}>
+      {operationSupportMatrix.operationWithoutField.has('formula') ? (
+        <EuiTabbedContent
+          tabs={tabs}
+          selectedTab={
+            selectedOperationDefinition?.type === 'formula' && !temporaryQuickFunction
+              ? tabs[1]
+              : tabs[0]
+          }
+          onTabClick={(selectedTab) => {
+            if (
+              selectedTab.id === 'quickFunctions' &&
+              selectedColumn?.operationType === 'formula'
+            ) {
+              // Temporary switch to quick function ui
+              setQuickFunction(true);
+            } else if (selectedColumn?.operationType !== 'formula') {
+              setQuickFunction(false);
+              const newLayer = insertOrReplaceColumn({
+                layer: props.state.layers[props.layerId],
+                indexPattern: currentIndexPattern,
+                columnId,
+                op: 'formula',
+                visualizationGroups: dimensionGroups,
+              });
+              setStateWrapper(newLayer);
+              trackUiEvent(`indexpattern_dimension_operation_formula`);
+              return;
+            } else if (selectedTab.id === 'formula') {
+              setQuickFunction(false);
+            }
+          }}
+          size="s"
+        />
+      ) : (
+        quickFunctions
+      )}
 
       {!currentFieldIsInvalid && (
         <div className="lnsIndexPatternDimensionEditor__section">
@@ -591,7 +674,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
 function getErrorMessage(
   selectedColumn: IndexPatternColumn | undefined,
   incompleteOperation: boolean,
-  input: 'none' | 'field' | 'fullReference' | undefined,
+  input: 'none' | 'field' | 'fullReference' | 'managedReference' | undefined,
   fieldInvalid: boolean
 ) {
   if (selectedColumn && incompleteOperation) {

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

@@ -41,7 +41,7 @@ const operationPanels = getOperationDisplay();
 
 export interface ReferenceEditorProps {
   layer: IndexPatternLayer;
-  selectionStyle: 'full' | 'field';
+  selectionStyle: 'full' | 'field' | 'hidden';
   validation: RequiredReference;
   columnId: string;
   updateLayer: (newLayer: IndexPatternLayer) => void;
@@ -197,6 +197,10 @@ export function ReferenceEditor(props: ReferenceEditorProps) {
     return;
   }
 
+  if (selectionStyle === 'hidden') {
+    return null;
+  }
+
   const selectedOption = incompleteOperation
     ? [functionOptions.find(({ value }) => value === incompleteOperation)!]
     : column
@@ -340,6 +344,7 @@ export function ReferenceEditor(props: ReferenceEditorProps) {
               columnId={columnId}
               indexPattern={currentIndexPattern}
               dateRange={dateRange}
+              operationDefinitionMap={operationDefinitionMap}
               {...services}
             />
           </>

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/counter_rate.tsx

@@ -50,7 +50,7 @@ export const counterRateOperation: OperationDefinition<
   selectionStyle: 'field',
   requiredReferences: [
     {
-      input: ['field'],
+      input: ['field', 'managedReference'],
       specificOperations: ['max'],
       validateMetadata: (meta) => meta.dataType === 'number' && !meta.isBucketed,
     },

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/cumulative_sum.tsx

@@ -48,7 +48,7 @@ export const cumulativeSumOperation: OperationDefinition<
   selectionStyle: 'field',
   requiredReferences: [
     {
-      input: ['field'],
+      input: ['field', 'managedReference'],
       specificOperations: ['count', 'sum'],
       validateMetadata: (meta) => meta.dataType === 'number' && !meta.isBucketed,
     },

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/differences.tsx

@@ -52,7 +52,7 @@ export const derivativeOperation: OperationDefinition<
   selectionStyle: 'full',
   requiredReferences: [
     {
-      input: ['field'],
+      input: ['field', 'managedReference'],
       validateMetadata: (meta) => meta.dataType === 'number' && !meta.isBucketed,
     },
   ],

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx

@@ -37,6 +37,8 @@ const ofName = buildLabelFunction((name?: string) => {
   });
 });
 
+const WINDOW_DEFAULT_VALUE = 5;
+
 export type MovingAverageIndexPatternColumn = FormattedIndexPatternColumn &
   ReferenceBasedIndexPatternColumn & {
     operationType: 'moving_average';
@@ -58,10 +60,11 @@ export const movingAverageOperation: OperationDefinition<
   selectionStyle: 'full',
   requiredReferences: [
     {
-      input: ['field'],
+      input: ['field', 'managedReference'],
       validateMetadata: (meta) => meta.dataType === 'number' && !meta.isBucketed,
     },
   ],
+  operationParams: [{ name: 'window', type: 'number', required: true }],
   getPossibleOperation: (indexPattern) => {
     if (hasDateField(indexPattern)) {
       return {
@@ -79,8 +82,12 @@ export const movingAverageOperation: OperationDefinition<
       window: [(layer.columns[columnId] as MovingAverageIndexPatternColumn).params.window],
     });
   },
-  buildColumn: ({ referenceIds, previousColumn, layer }) => {
+  buildColumn: (
+    { referenceIds, previousColumn, layer },
+    columnParams = { window: WINDOW_DEFAULT_VALUE }
+  ) => {
     const metric = layer.columns[referenceIds[0]];
+    const { window = WINDOW_DEFAULT_VALUE } = columnParams;
     return {
       label: ofName(metric?.label, previousColumn?.timeScale),
       dataType: 'number',
@@ -91,7 +98,7 @@ export const movingAverageOperation: OperationDefinition<
       timeScale: previousColumn?.timeScale,
       filter: previousColumn?.filter,
       params: {
-        window: 5,
+        window,
         ...getFormatFromPreviousColumn(previousColumn),
       },
     };

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.test.tsx

@@ -97,6 +97,7 @@ const defaultOptions = {
   data: dataStart,
   http: {} as HttpSetup,
   indexPattern: indexPattern1,
+  operationDefinitionMap: {},
 };
 
 describe('date_histogram', () => {

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.tsx

@@ -58,6 +58,7 @@ export const dateHistogramOperation: OperationDefinition<
   }),
   input: 'field',
   priority: 5, // Highest priority level used
+  operationParams: [{ name: 'interval', type: 'string', required: false }],
   getErrorMessage: (layer, columnId, indexPattern) =>
     getInvalidFieldMessage(layer.columns[columnId] as FieldBasedIndexPatternColumn, indexPattern),
   getHelpMessage: (props) => <AutoDateHistogramPopover {...props} />,
@@ -75,8 +76,8 @@ export const dateHistogramOperation: OperationDefinition<
     }
   },
   getDefaultLabel: (column, indexPattern) => getSafeName(column.sourceField, indexPattern),
-  buildColumn({ field }) {
-    let interval = autoInterval;
+  buildColumn({ field }, columnParams) {
+    let interval = columnParams?.interval ?? autoInterval;
     let timeZone: string | undefined;
     if (field.aggregationRestrictions && field.aggregationRestrictions.date_histogram) {
       interval = restrictedInterval(field.aggregationRestrictions) as string;

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx

@@ -27,6 +27,7 @@ const defaultProps = {
   data: dataPluginMock.createStartContract(),
   http: {} as HttpSetup,
   indexPattern: createMockedIndexPattern(),
+  operationDefinitionMap: {},
 };
 
 // mocking random id generator function

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/formula.scss

@@ -0,0 +1,4 @@
+.lnsFormulaOverflow {
+  // Needs to be higher than the modal and all flyouts
+  z-index: $euiZLevel9 + 1;
+}