[7.x] TypeScript cleanup in visualizations plugin (#78428) | Implemen…

…t tagcloud renderer (#77910) | Fix types (#78619) (#78666)

* TypeScript cleanup in visualizations plugin (#78428)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* Implement tagcloud renderer (#77910)

* Implement toExpressionAst for tagcloud

* Implement tagcloud vis renderer

* Use resize observer

* Use common no data message

* Update build_pipeline.test

* Update tag cloud tests

* Revert "Use common no data message"

This reverts commit fddf019.

* Update interpreter functional tests

* Add tests for toExpressionAst fn

* Use throttled chart update

* Update renderer

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* Fix types (#78619)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com>

src/plugins/input_control_vis/public/input_control_vis_type.ts

@@ -19,12 +19,15 @@
 
 import { i18n } from '@kbn/i18n';
 
+import { BaseVisTypeOptions } from 'src/plugins/visualizations/public';
 import { createInputControlVisController } from './vis_controller';
 import { getControlsTab } from './components/editor/controls_tab';
 import { OptionsTab } from './components/editor/options_tab';
 import { InputControlVisDependencies } from './plugin';
 
-export function createInputControlVisTypeDefinition(deps: InputControlVisDependencies) {
+export function createInputControlVisTypeDefinition(
+  deps: InputControlVisDependencies
+): BaseVisTypeOptions {
   const InputControlVisController = createInputControlVisController(deps);
   const ControlsTab = getControlsTab(deps);
 

src/plugins/input_control_vis/public/vis_controller.tsx

@@ -31,12 +31,12 @@ import { RangeControl } from './control/range_control_factory';
 import { ListControl } from './control/list_control_factory';
 import { InputControlVisDependencies } from './plugin';
 import { FilterManager, Filter } from '../../data/public';
-import { VisParams, Vis } from '../../visualizations/public';
+import { VisParams, ExprVis } from '../../visualizations/public';
 
 export const createInputControlVisController = (deps: InputControlVisDependencies) => {
   return class InputControlVisController {
     private I18nContext?: I18nStart['Context'];
-    private isLoaded = false;
+    private _isLoaded = false;
 
     controls: Array<RangeControl | ListControl>;
     queryBarUpdateHandler: () => void;
@@ -45,7 +45,7 @@ export const createInputControlVisController = (deps: InputControlVisDependencie
     timeFilterSubscription: Subscription;
     visParams?: VisParams;
 
-    constructor(public el: Element, public vis: Vis) {
+    constructor(public el: Element, public vis: ExprVis) {
       this.controls = [];
 
       this.queryBarUpdateHandler = this.updateControlsFromKbn.bind(this);
@@ -58,7 +58,7 @@ export const createInputControlVisController = (deps: InputControlVisDependencie
         .getTimeUpdate$()
         .subscribe(() => {
           if (this.visParams?.useTimeFilter) {
-            this.isLoaded = false;
+            this._isLoaded = false;
           }
         });
     }
@@ -68,11 +68,11 @@ export const createInputControlVisController = (deps: InputControlVisDependencie
         const [{ i18n }] = await deps.core.getStartServices();
         this.I18nContext = i18n.Context;
       }
-      if (!this.isLoaded || !isEqual(visParams, this.visParams)) {
+      if (!this._isLoaded || !isEqual(visParams, this.visParams)) {
         this.visParams = visParams;
         this.controls = [];
         this.controls = await this.initControls();
-        this.isLoaded = true;
+        this._isLoaded = true;
       }
       this.drawVis();
     }

src/plugins/vis_type_metric/public/metric_vis_type.ts

@@ -18,13 +18,14 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { BaseVisTypeOptions } from 'src/plugins/visualizations/public';
 import { MetricVisOptions } from './components/metric_vis_options';
 import { ColorSchemas, colorSchemas, ColorModes } from '../../charts/public';
 import { AggGroupNames } from '../../data/public';
 import { Schemas } from '../../vis_default_editor/public';
 import { toExpressionAst } from './to_ast';
 
-export const createMetricVisTypeDefinition = () => ({
+export const createMetricVisTypeDefinition = (): BaseVisTypeOptions => ({
   name: 'metric',
   title: i18n.translate('visTypeMetric.metricTitle', { defaultMessage: 'Metric' }),
   icon: 'visMetric',

src/plugins/vis_type_table/public/table_vis_controller.test.ts

@@ -120,7 +120,7 @@ describe('Table Vis - Controller', () => {
   function getRangeVis(params?: object) {
     return ({
       type: tableVisTypeDefinition,
-      params: Object.assign({}, tableVisTypeDefinition.visConfig.defaults, params),
+      params: Object.assign({}, tableVisTypeDefinition.visConfig?.defaults, params),
       data: {
         aggs: createAggConfigs(stubIndexPattern, [
           { type: 'count', schema: 'metric' },

src/plugins/vis_type_table/public/table_vis_type.ts

@@ -20,17 +20,19 @@ import { CoreSetup, PluginInitializerContext } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import { AggGroupNames } from '../../data/public';
 import { Schemas } from '../../vis_default_editor/public';
-import { Vis } from '../../visualizations/public';
+import { BaseVisTypeOptions, Vis } from '../../visualizations/public';
 import { tableVisResponseHandler } from './table_vis_response_handler';
 // @ts-ignore
 import tableVisTemplate from './table_vis.html';
 import { TableOptions } from './components/table_vis_options_lazy';
 import { getTableVisualizationControllerClass } from './vis_controller';
 import { VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
 
-export function getTableVisTypeDefinition(core: CoreSetup, context: PluginInitializerContext) {
+export function getTableVisTypeDefinition(
+  core: CoreSetup,
+  context: PluginInitializerContext
+): BaseVisTypeOptions {
   return {
-    type: 'table',
     name: 'table',
     title: i18n.translate('visTypeTable.tableVisTitle', {
       defaultMessage: 'Data Table',

src/plugins/vis_type_table/public/vis_controller.ts

@@ -64,7 +64,7 @@ export function getTableVisualizationControllerClass(
       }
     }
 
-    async render(esResponse: object, visParams: VisParams) {
+    async render(esResponse: object, visParams: VisParams): Promise<void> {
       getKibanaLegacy().loadFontAwesome();
       await this.initLocalAngular();
 

src/plugins/vis_type_tagcloud/public/components/label.js

@@ -28,7 +28,7 @@ export class Label extends Component {
   render() {
     return (
       <div
-        className="tgcVisLabel"
+        className="tgcChart__label"
         style={{ display: this.state.shouldShowLabel ? 'block' : 'none' }}
       >
         {this.state.label}

src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss

@@ -0,0 +1,26 @@
+// Prefix all styles with "tgc" to avoid conflicts.
+// Examples
+//   tgcChart
+//   tgcChart__legend
+//   tgcChart__legend--small
+//   tgcChart__legend-isLoading
+
+.tgcChart__container, .tgcChart__wrapper {
+  flex: 1 1 0;
+  display: flex;
+}
+
+.tgcChart {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.tgcChart__label {
+  width: 100%;
+  text-align: center;
+  font-weight: $euiFontWeightBold;
+}