From f3e8c21bd50b0a3127cc6db6c92810c5f76f18e9 Mon Sep 17 00:00:00 2001
From: dan_the_3rd <43445237+danthe3rd@users.noreply.github.com>
Date: Thu, 4 Nov 2021 13:51:23 +0100
Subject: [PATCH] Streamlit: Dont forget to change streamlit height when
 resizing plugins (#223)

Co-authored-by: danthe3rd <danthe3rd@users.noreply.github.com>
---
 src/distribution/plugin.tsx | 2 ++
 src/hiplot_streamlit.tsx    | 1 +
 src/parallel/parallel.tsx   | 1 +
 src/plotxy.tsx              | 7 ++++++-
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/distribution/plugin.tsx b/src/distribution/plugin.tsx
index bc0fb261..25cdad99 100644
--- a/src/distribution/plugin.tsx
+++ b/src/distribution/plugin.tsx
@@ -88,6 +88,7 @@ export class HiPlotDistributionPlugin extends React.Component<DistributionPlugin
     }
     componentDidUpdate(prevProps: HiPlotPluginData, prevState: HiPlotDistributionPluginState) {
         if (prevState.axis != this.state.axis) {
+            this.props.sendMessage("height_changed", () => null);
             if (this.props.persistentState) {
                 this.props.persistentState.set('axis', this.state.axis);
             }
@@ -123,6 +124,7 @@ export class HiPlotDistributionPlugin extends React.Component<DistributionPlugin
     onResize = _.debounce(function(height: number, width: number) {
         if (height != this.state.height || width != this.state.width) {
             this.setState({height: height, width: width});
+            this.props.sendMessage("height_changed", () => null);
         }
     }.bind(this), 150);
     disable(): void {
diff --git a/src/hiplot_streamlit.tsx b/src/hiplot_streamlit.tsx
index d423c1c6..01569797 100644
--- a/src/hiplot_streamlit.tsx
+++ b/src/hiplot_streamlit.tsx
@@ -43,6 +43,7 @@ class ReactTemplate extends StreamlitComponentBase<State> {
       'selected_uids': this.onChange.bind(this),
       'filtered_uids': this.onChange.bind(this),
       'brush_extents': this.onChange.bind(this),
+      'height_changed': () => Streamlit.setFrameHeight(),
     };
     return <HiPlot experiment={this.state.experiment} onChange={onChangeHandlers} />;
   }
diff --git a/src/parallel/parallel.tsx b/src/parallel/parallel.tsx
index fa3edd09..190fa4c2 100644
--- a/src/parallel/parallel.tsx
+++ b/src/parallel/parallel.tsx
@@ -623,6 +623,7 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
 
       // render data
       this.setState(function(prevState) { return { brush_count: prevState.brush_count + 1}; });
+      this.props.sendMessage("height_changed", () => null);
     }, 100);
 
     me.compute_dimensions();
diff --git a/src/plotxy.tsx b/src/plotxy.tsx
index ae5570b4..9fabb3c0 100644
--- a/src/plotxy.tsx
+++ b/src/plotxy.tsx
@@ -591,10 +591,14 @@ export class PlotXY extends React.Component<PlotXYProps, PlotXYState> {
     if (prevState.height != this.state.height || prevState.width != this.state.width) {
         if (this.plot) {
           this.plot.on_resize();
+          this.props.sendMessage("height_changed", () => null);
         }
     }
     if (!this.isEnabled()) {
-      this.plot = null;
+      if (this.plot !== null) {
+        this.plot = null;
+        this.props.sendMessage("height_changed", () => null);
+      }
       if (this.state.hover_uid !== null) {
         this.setState({
           hover_uid: null,
@@ -604,6 +608,7 @@ export class PlotXY extends React.Component<PlotXYProps, PlotXYState> {
     else {
       if (anyAxisChanged) {
         this.plot.update_axis();
+        this.props.sendMessage("height_changed", () => null);
       }
     }
     if (this.state.hover_uid != prevState.hover_uid) {