[7.x] [Lens] Formula editor (#99297)

packages/kbn-monaco/src/monaco_imports.ts

@@ -21,5 +21,6 @@ import 'monaco-editor/esm/vs/editor/contrib/folding/folding.js'; // Needed for f
 import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js'; // Needed for suggestions
 import 'monaco-editor/esm/vs/editor/contrib/hover/hover.js'; // Needed for hover
 import 'monaco-editor/esm/vs/editor/contrib/parameterHints/parameterHints.js'; // Needed for signature
+import 'monaco-editor/esm/vs/editor/contrib/bracketMatching/bracketMatching.js'; // Needed for brackets matching highlight
 
 export { monaco };

packages/kbn-tinymath/grammar/grammar.peggy

@@ -1,16 +1,16 @@
 // tinymath parsing grammar
 
 {
-   function simpleLocation (location) {
-  // Returns an object representing the position of the function within the expression,
-  // demarcated by the position of its first character and last character. We calculate these values
-  // using the offset because the expression could span multiple lines, and we don't want to deal
-  // with column and line values.
-  return {
-   min: location.start.offset,
-   max: location.end.offset
+  function simpleLocation (location) {
+    // Returns an object representing the position of the function within the expression,
+    // demarcated by the position of its first character and last character. We calculate these values
+    // using the offset because the expression could span multiple lines, and we don't want to deal
+    // with column and line values.
+    return {
+      min: location.start.offset,
+      max: location.end.offset
+    }
   }
- }
 }
 
 start
@@ -74,26 +74,34 @@ Expression
   = AddSubtract
 
 AddSubtract
-  = _ left:MultiplyDivide rest:(('+' / '-') MultiplyDivide)* _ {
-    return rest.reduce((acc, curr) => ({
+  = _ left:MultiplyDivide rest:(('+' / '-') MultiplyDivide)+ _ {
+    const topLevel = rest.reduce((acc, curr) => ({
       type: 'function',
       name: curr[0] === '+' ? 'add' : 'subtract',
       args: [acc, curr[1]],
-      location: simpleLocation(location()),
-      text: text()
-    }), left)
+    }), left);
+    if (typeof topLevel === 'object') {
+      topLevel.location = simpleLocation(location());
+      topLevel.text = text();
+    }
+    return topLevel;
   }
+  / MultiplyDivide
 
 MultiplyDivide
   = _ left:Factor rest:(('*' / '/') Factor)* _ {
-    return rest.reduce((acc, curr) => ({
+    const topLevel = rest.reduce((acc, curr) => ({
       type: 'function',
       name: curr[0] === '*' ? 'multiply' : 'divide',
       args: [acc, curr[1]],
-      location: simpleLocation(location()),
-      text: text()
-    }), left)
+    }), left);
+    if (typeof topLevel === 'object') {
+      topLevel.location = simpleLocation(location());
+      topLevel.text = text();
+    }
+    return topLevel;
   }
+  / Factor
 
 Factor
   = Group

packages/kbn-tinymath/index.d.ts

@@ -24,9 +24,11 @@ export interface TinymathLocation {
 export interface TinymathFunction {
   type: 'function';
   name: string;
-  text: string;
   args: TinymathAST[];
-  location: TinymathLocation;
+  // Location is not guaranteed because PEG grammars are not left-recursive
+  location?: TinymathLocation;
+  // Text is not guaranteed because PEG grammars are not left-recursive
+  text?: string;
 }
 
 export interface TinymathVariable {

packages/kbn-tinymath/test/library.test.js

@@ -41,6 +41,35 @@ describe('Parser', () => {
     });
   });
 
+  describe('Math', () => {
+    it('converts basic symbols into left-to-right pairs', () => {
+      expect(parse('a + b + c - d')).toEqual({
+        args: [
+          {
+            name: 'add',
+            type: 'function',
+            args: [
+              {
+                name: 'add',
+                type: 'function',
+                args: [
+                  expect.objectContaining({ location: { min: 0, max: 2 } }),
+                  expect.objectContaining({ location: { min: 3, max: 6 } }),
+                ],
+              },
+              expect.objectContaining({ location: { min: 7, max: 10 } }),
+            ],
+          },
+          expect.objectContaining({ location: { min: 11, max: 13 } }),
+        ],
+        name: 'subtract',
+        type: 'function',
+        text: 'a + b + c - d',
+        location: { min: 0, max: 13 },
+      });
+    });
+  });
+
   describe('Variables', () => {
     it('strings', () => {
       expect(parse('f')).toEqual(variableEqual('f'));
@@ -263,6 +292,8 @@ describe('Evaluate', () => {
     expect(evaluate('5/20')).toEqual(0.25);
     expect(evaluate('1 + 1 + 2 + 3 + 12')).toEqual(19);
     expect(evaluate('100 / 10 / 10')).toEqual(1);
+    expect(evaluate('0 * 1 - 100 / 10 / 10')).toEqual(-1);
+    expect(evaluate('100 / (10 / 10)')).toEqual(100);
   });
 
   it('equations with functions', () => {

src/plugins/dashboard/server/usage/dashboard_telemetry.test.ts

@@ -72,6 +72,22 @@ const lensXYSeriesB = ({
         visualization: {
           preferredSeriesType: 'seriesB',
         },
+        datasourceStates: {
+          indexpattern: {
+            layers: {
+              first: {
+                columns: {
+                  first: {
+                    operationType: 'terms',
+                  },
+                  second: {
+                    operationType: 'formula',
+                  },
+                },
+              },
+            },
+          },
+        },
       },
     },
   },
@@ -144,6 +160,7 @@ describe('dashboard telemetry', () => {
       expect(collectorData.lensByValue.a).toBe(3);
       expect(collectorData.lensByValue.seriesA).toBe(2);
       expect(collectorData.lensByValue.seriesB).toBe(1);
+      expect(collectorData.lensByValue.formula).toBe(1);
     });
 
     it('handles misshapen lens panels', () => {

src/plugins/dashboard/server/usage/dashboard_telemetry.ts

@@ -27,6 +27,16 @@ interface LensPanel extends SavedDashboardPanel730ToLatest {
         visualization?: {
           preferredSeriesType?: string;
         };
+        datasourceStates?: {
+          indexpattern?: {
+            layers: Record<
+              string,
+              {
+                columns: Record<string, { operationType: string }>;
+              }
+            >;
+          };
+        };
       };
     };
   };
@@ -109,6 +119,19 @@ export const collectByValueLensInfo: DashboardCollectorFunction = (panels, colle
       }
 
       collectorData.lensByValue[type] = collectorData.lensByValue[type] + 1;
+
+      const hasFormula = Object.values(
+        lensPanel.embeddableConfig.attributes.state?.datasourceStates?.indexpattern?.layers || {}
+      ).some((layer) =>
+        Object.values(layer.columns).some((column) => column.operationType === 'formula')
+      );
+
+      if (hasFormula && !collectorData.lensByValue.formula) {
+        collectorData.lensByValue.formula = 0;
+      }
+      if (hasFormula) {
+        collectorData.lensByValue.formula++;
+      }
     }
   }
 };

src/plugins/expressions/common/expression_functions/specs/map_column.ts

@@ -10,7 +10,7 @@ import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { i18n } from '@kbn/i18n';
 import { ExpressionFunctionDefinition } from '../types';
-import { Datatable, getType } from '../../expression_types';
+import { Datatable, DatatableColumn, getType } from '../../expression_types';
 
 export interface MapColumnArguments {
   id?: string | null;
@@ -110,10 +110,10 @@ export const mapColumn: ExpressionFunctionDefinition<
 
     return Promise.all(rowPromises).then((rows) => {
       const type = rows.length ? getType(rows[0][columnId]) : 'null';
-      const newColumn = {
+      const newColumn: DatatableColumn = {
         id: columnId,
         name: args.name,
-        meta: { type },
+        meta: { type, params: { id: type } },
       };
       if (args.copyMetaFrom) {
         const metaSourceFrom = columns.find(({ id }) => id === args.copyMetaFrom);

src/plugins/expressions/common/expression_functions/specs/tests/map_column.test.ts

@@ -29,7 +29,11 @@ describe('mapColumn', () => {
     expect(result.type).toBe('datatable');
     expect(result.columns).toEqual([
       ...testTable.columns,
-      { id: 'pricePlusTwo', name: 'pricePlusTwo', meta: { type: 'number' } },
+      {
+        id: 'pricePlusTwo',
+        name: 'pricePlusTwo',
+        meta: { type: 'number', params: { id: 'number' } },
+      },
     ]);
     expect(result.columns[result.columns.length - 1]).toHaveProperty('name', 'pricePlusTwo');
     expect(result.rows[arbitraryRowIndex]).toHaveProperty('pricePlusTwo');

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

@@ -187,10 +187,16 @@ export class CodeEditor extends React.Component<Props, {}> {
             wordBasedSuggestions: false,
             wordWrap: 'on',
             wrappingIndent: 'indent',
+            matchBrackets: 'never',
             ...options,
           }}
         />
-        <ReactResizeDetector handleWidth handleHeight onResize={this._updateDimensions} />
+        <ReactResizeDetector
+          handleWidth
+          handleHeight
+          onResize={this._updateDimensions}
+          refreshMode="debounce"
+        />
       </>
     );
   }

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

@@ -38,7 +38,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'],