[Canvas] TagCloud (#106858) (#111257)

* Added `tagCloud` to canvas.

* Added `icon` to the `tagCloud` element.

* Added column name support at `tag_cloud`.

* Added condition to `vis_dimension` not to pass invalid index.

Added check of accessor index, if such column exists at vis_dimension.
Removed checks of column existance from TagCloudChart.
Added test for accessing data by column name in addition to a column number.
Updated tag_cloud element in Canvas.
Fixed types. Removed almost all `any` and `as` types.

* Added test suites for `vis_dimension` function.

* Added tests for DatatableColumn accessors at tag_cloud_fn and to_ast.

* Refactored metrics, tagcloud and tests.

Added valid functional tests to metrics and tag_cloud.
Fixed types of metrics_vis.
Added handling of empty data at tag_cloud renderer.

* Added storybook ( still doesn't work ).

* Fixed some mistakes.

* Added working storybook with mocks.

* Added clear storybook for tag_cloud_vis_renderer.

* Updated the location of vis_dimension test after movement of the function.

* Fixed unused type.

* Fixed tests and added handling of the column name at `visualizations/**/*/prepare_log_table.ts`

* Reduced the complexity of checking the accessor at `tag_cloud_chart.tsx`

* Added comments at unclear places of code.

* Added the logic for disabling elements for renderers from disabled plugins.

* removed garbage from `kibana.yml`.

* Fixed element_strings.test error.

* Made changes, based on nits.

* Fixed mistake.

* Removed `disabled` flag for `expression_*` plugins.

* recovered lost comments at the unclear places.

* removed dead code.

* fixed test errors.

* Fixed test error, I hope.

* fixed more tests.

* fixed code, based on nits.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>

src/dev/storybook/aliases.ts

@@ -23,6 +23,7 @@ export const storybookAliases = {
   expression_repeat_image: 'src/plugins/expression_repeat_image/.storybook',
   expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook',
   expression_shape: 'src/plugins/expression_shape/.storybook',
+  expression_tagcloud: 'src/plugins/chart_expressions/expression_tagcloud/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',

src/plugins/chart_expressions/expression_tagcloud/.storybook/main.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { defaultConfig } from '@kbn/storybook';
+import webpackMerge from 'webpack-merge';
+import { resolve } from 'path';
+
+const mockConfig = {
+  resolve: {
+    alias: {
+      '../format_service': resolve(__dirname, '../public/__mocks__/format_service.ts'),
+    },
+  },
+};
+
+module.exports = {
+  ...defaultConfig,
+  webpackFinal: (config) => webpackMerge(config, mockConfig),
+};

src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.test.ts

@@ -9,27 +9,76 @@
 import { tagcloudFunction } from './tagcloud_function';
 
 import { functionWrapper } from '../../../../expressions/common/expression_functions/specs/tests/utils';
+import { ExpressionValueVisDimension } from '../../../../visualizations/public';
 import { Datatable } from '../../../../expressions/common/expression_types/specs';
 
 describe('interpreter/functions#tagcloud', () => {
   const fn = functionWrapper(tagcloudFunction());
+  const column1 = 'Count';
+  const column2 = 'country';
   const context = {
     type: 'datatable',
-    rows: [{ 'col-0-1': 0 }],
-    columns: [{ id: 'col-0-1', name: 'Count' }],
+    columns: [
+      { id: column1, name: column1 },
+      { id: column2, name: column2 },
+    ],
+    rows: [
+      { [column1]: 0, [column2]: 'US' },
+      { [column1]: 10, [column2]: 'UK' },
+    ],
   };
   const visConfig = {
     scale: 'linear',
     orientation: 'single',
     minFontSize: 18,
     maxFontSize: 72,
     showLabel: true,
-    metric: { accessor: 0, format: { id: 'number' } },
-    bucket: { accessor: 1, format: { id: 'number' } },
   };
 
-  it('returns an object with the correct structure', () => {
-    const actual = fn(context, visConfig, undefined);
+  const numberAccessors = {
+    metric: { accessor: 0 },
+    bucket: { accessor: 1 },
+  };
+
+  const stringAccessors: {
+    metric: ExpressionValueVisDimension;
+    bucket: ExpressionValueVisDimension;
+  } = {
+    metric: {
+      type: 'vis_dimension',
+      accessor: {
+        id: column1,
+        name: column1,
+        meta: {
+          type: 'number',
+        },
+      },
+      format: {
+        params: {},
+      },
+    },
+    bucket: {
+      type: 'vis_dimension',
+      accessor: {
+        id: column2,
+        name: column2,
+        meta: {
+          type: 'string',
+        },
+      },
+      format: {
+        params: {},
+      },
+    },
+  };
+
+  it('returns an object with the correct structure for number accessors', () => {
+    const actual = fn(context, { ...visConfig, ...numberAccessors }, undefined);
+    expect(actual).toMatchSnapshot();
+  });
+
+  it('returns an object with the correct structure for string accessors', () => {
+    const actual = fn(context, { ...visConfig, ...stringAccessors }, undefined);
     expect(actual).toMatchSnapshot();
   });
 
@@ -44,7 +93,7 @@ describe('interpreter/functions#tagcloud', () => {
         },
       },
     };
-    await fn(context, visConfig, handlers as any);
+    await fn(context, { ...visConfig, ...numberAccessors }, handlers as any);
 
     expect(loggedTable!).toMatchSnapshot();
   });

src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.ts

@@ -8,7 +8,7 @@
 import { i18n } from '@kbn/i18n';
 
 import { prepareLogTable, Dimension } from '../../../../visualizations/common/prepare_log_table';
-import { TagCloudVisParams } from '../types';
+import { TagCloudRendererParams } from '../types';
 import { ExpressionTagcloudFunction } from '../types';
 import { EXPRESSION_NAME } from '../constants';
 
@@ -125,7 +125,7 @@ export const tagcloudFunction: ExpressionTagcloudFunction = () => {
       },
     },
     fn(input, args, handlers) {
-      const visParams = {
+      const visParams: TagCloudRendererParams = {
         scale: args.scale,
         orientation: args.orientation,
         minFontSize: args.minFontSize,
@@ -139,7 +139,7 @@ export const tagcloudFunction: ExpressionTagcloudFunction = () => {
           type: 'palette',
           name: args.palette,
         },
-      } as TagCloudVisParams;
+      };
 
       if (handlers?.inspectorAdapters?.tables) {
         const argsTable: Dimension[] = [[[args.metric], dimension.tagSize]];

src/plugins/chart_expressions/expression_tagcloud/common/types/expression_functions.ts

@@ -10,19 +10,10 @@ import {
   Datatable,
   ExpressionFunctionDefinition,
   ExpressionValueRender,
-  SerializedFieldFormat,
 } from '../../../../expressions';
 import { ExpressionValueVisDimension } from '../../../../visualizations/common';
 import { EXPRESSION_NAME } from '../constants';
 
-interface Dimension {
-  accessor: number;
-  format: {
-    id?: string;
-    params?: SerializedFieldFormat<object>;
-  };
-}
-
 interface TagCloudCommonParams {
   scale: 'linear' | 'log' | 'square root';
   orientation: 'single' | 'right angled' | 'multiple';
@@ -36,16 +27,16 @@ export interface TagCloudVisConfig extends TagCloudCommonParams {
   bucket?: ExpressionValueVisDimension;
 }
 
-export interface TagCloudVisParams extends TagCloudCommonParams {
+export interface TagCloudRendererParams extends TagCloudCommonParams {
   palette: PaletteOutput;
-  metric: Dimension;
-  bucket?: Dimension;
+  metric: ExpressionValueVisDimension;
+  bucket?: ExpressionValueVisDimension;
 }
 
 export interface TagcloudRendererConfig {
   visType: typeof EXPRESSION_NAME;
   visData: Datatable;
-  visParams: TagCloudVisParams;
+  visParams: TagCloudRendererParams;
   syncColors: boolean;
 }
 

src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/format_service.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const getFormatService = () => ({
+  deserialize: (target: any) => ({
+    convert: (text: string, format: string) => text,
+  }),
+});