Fix tagcloud word overlapping (elastic#81161) (elastic#81300)

* Fix overlaps on resize

* Set up font family

* Update snapshots

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

@@ -48,7 +48,11 @@ export class TagCloud extends EventEmitter {
     this.resize();
 
     //SETTING (non-configurable)
-    this._fontFamily = 'Open Sans, sans-serif';
+    /**
+     * the fontFamily should be set explicitly for calculating a layout
+     * and to avoid words overlapping
+     */
+    this._fontFamily = 'Inter UI, sans-serif';
     this._fontStyle = 'normal';
     this._fontWeight = 'normal';
     this._spiral = 'archimedean'; //layout shape

src/plugins/vis_type_tagcloud/public/components/tag_cloud_chart.tsx

@@ -62,10 +62,10 @@ export const TagCloudChart = ({
     () =>
       throttle(() => {
         if (visController.current) {
-          visController.current.render().then(renderComplete);
+          visController.current.render(visData, visParams).then(renderComplete);
         }
       }, 300),
-    [renderComplete]
+    [renderComplete, visData, visParams]
   );
 
   return (

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

@@ -85,11 +85,8 @@ export class TagCloudVisualization {
   }
 
   async render(data, visParams) {
-    if (data && visParams) {
-      this._updateParams(visParams);
-      this._updateData(data);
-    }
-
+    this._updateParams(visParams);
+    this._updateData(data);
     this._resize();
 
     await this._renderComplete$.pipe(take(1)).toPromise();