From d02577f951f31c91b1d6dd6158f6fd0b56a5b208 Mon Sep 17 00:00:00 2001
From: sulemanof <daniil_suleiman@epam.com>
Date: Tue, 22 Sep 2020 15:45:05 +0300
Subject: [PATCH] Use resize observer

---
 .../public/components/tag_cloud.scss          |  3 +-
 .../public/components/tag_cloud_chart.tsx     | 43 +++++++++++++------
 .../components/tag_cloud_visualization.js     | 30 ++++++++-----
 3 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss b/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss
index 686e07ac4798..37867f1ed1c1 100644
--- a/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss
+++ b/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss
@@ -5,8 +5,7 @@
 //   tgcChart__legend--small
 //   tgcChart__legend-isLoading
 
-.tgcChart__container {
-  min-height: 0;
+.tgcChart__container, .tgcChart__wrapper {
   flex: 1 1 0;
   display: flex;
 }
diff --git a/src/plugins/vis_type_tagcloud/public/components/tag_cloud_chart.tsx b/src/plugins/vis_type_tagcloud/public/components/tag_cloud_chart.tsx
index 441c5f9e7713..8962f19eb549 100644
--- a/src/plugins/vis_type_tagcloud/public/components/tag_cloud_chart.tsx
+++ b/src/plugins/vis_type_tagcloud/public/components/tag_cloud_chart.tsx
@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import React, { useEffect, useRef } from 'react';
-import * as Rx from 'rxjs';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { EuiResizeObserver } from '@elastic/eui';
 
 import { TagCloudVisDependencies } from '../plugin';
 import { TagCloudVisRenderValue } from '../tag_cloud_fn';
@@ -33,30 +33,45 @@ type TagCloudChartProps = TagCloudVisDependencies &
     renderComplete: () => void;
   };
 
-export const TagCloudChart = ({ colors, visData, visParams, fireEvent }: TagCloudChartProps) => {
+export const TagCloudChart = ({
+  colors,
+  visData,
+  visParams,
+  fireEvent,
+  renderComplete,
+}: TagCloudChartProps) => {
   const chartDiv = useRef<HTMLDivElement>(null);
   const visController = useRef<any>(null);
-  const renderSubject = useRef(new Rx.Subject());
 
   useEffect(() => {
     visController.current = new TagCloudVisualization(chartDiv.current, colors, fireEvent);
-    renderSubject.current.subscribe((params: any) => {
-      visController.current.render(params.visData, params.visParams);
-    });
-
     return () => {
       visController.current.destroy();
+      visController.current = null;
     };
   }, [colors, fireEvent]);
 
   useEffect(() => {
-    renderSubject.current.next({
-      visData,
-      visParams,
-    });
-  }, [visData, visParams]);
+    if (visController.current) {
+      visController.current.render(visData, visParams).then(renderComplete);
+    }
+  }, [visData, visParams, renderComplete]);
+
+  const onResize = useCallback(() => {
+    if (visController.current) {
+      visController.current.render().then(renderComplete);
+    }
+  }, [renderComplete]);
 
-  return <div className="tgcChart__container" ref={chartDiv} />;
+  return (
+    <EuiResizeObserver onResize={onResize}>
+      {(resizeRef) => (
+        <div className="tgcChart__wrapper" ref={resizeRef}>
+          <div className="tgcChart__container" ref={chartDiv} />
+        </div>
+      )}
+    </EuiResizeObserver>
+  );
 };
 
 // default export required for React.Lazy
diff --git a/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js b/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
index 892099ff5675..5ec22d2c6a4d 100644
--- a/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
+++ b/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
@@ -85,13 +85,16 @@ export class TagCloudVisualization {
   }
 
   async render(data, visParams) {
-    this._updateParams(visParams);
-    this._updateData(data);
+    if (data && visParams) {
+      this._updateParams(visParams);
+      this._updateData(data);
+    }
+
     this._resize();
 
     await this._renderComplete$.pipe(take(1)).toPromise();
 
-    if (data.columns.length !== 2) {
+    if (data && data.columns.length !== 2 && this._feedbackMessage.current) {
       this._feedbackMessage.current.setState({
         shouldShowTruncate: false,
         shouldShowIncomplete: false,
@@ -99,14 +102,19 @@ export class TagCloudVisualization {
       return;
     }
 
-    this._label.current.setState({
-      label: `${data.columns[0].name} - ${data.columns[1].name}`,
-      shouldShowLabel: visParams.showLabel,
-    });
-    this._feedbackMessage.current.setState({
-      shouldShowTruncate: this._truncated,
-      shouldShowIncomplete: this._tagCloud.getStatus() === TagCloud.STATUS.INCOMPLETE,
-    });
+    if (data && this._label.current) {
+      this._label.current.setState({
+        label: `${data.columns[0].name} - ${data.columns[1].name}`,
+        shouldShowLabel: visParams.showLabel,
+      });
+    }
+
+    if (this._feedbackMessage.current) {
+      this._feedbackMessage.current.setState({
+        shouldShowTruncate: this._truncated,
+        shouldShowIncomplete: this._tagCloud.getStatus() === TagCloud.STATUS.INCOMPLETE,
+      });
+    }
   }
 
   destroy() {