Streamlit: Dont forget to change streamlit height when resizing plugins (#223)

Co-authored-by: danthe3rd <[email protected]>

Author: danthe3rd

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 {

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} />;
   }

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();

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) {