Use resize observer

elastic · Sep 22, 2020 · d02577f · d02577f
1 parent bce20af
commit d02577f
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 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
@@ -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
@@ -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
@@ -85,28 +85,36 @@ 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,
       });
       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() {