explicitly set figure height, for jupyterlab v4

Author: alexcjohnson

packages/javascript/jupyterlab-plotly/src/Figure.ts

@@ -849,6 +849,9 @@ export class FigureView extends DOMWidgetView {
     // the model is not directly mutated by the Plotly.js library.
     var initialTraces = _.cloneDeep(this.model.get("_data"));
     var initialLayout = _.cloneDeep(this.model.get("_layout"));
+    if (!initialLayout.height) {
+      initialLayout.height = 360;
+    }
     var config = this.model.get("_config");
     config.editSelection = false;
 

packages/javascript/jupyterlab-plotly/src/plotly-renderer.ts

@@ -126,12 +126,16 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
       | any
       | IPlotlySpec;
 
+    if (!layout.height) {
+      layout.height = 360;
+    }
+
     // Load plotly asynchronously
     const loadPlotly = async (): Promise<void> => {
       if (RenderedPlotly.Plotly === null) {
         RenderedPlotly.Plotly = await import("plotly.js/dist/plotly");
         RenderedPlotly._resolveLoadingPlotly();
-      } 
+      }
       return RenderedPlotly.loadingPlotly;
     };
 

packages/javascript/jupyterlab-plotly/style/index.css

@@ -21,12 +21,7 @@
   overflow: hidden;
 }
 
-/* Output styles */
-.jp-OutputArea .jp-RenderedPlotly {
-  min-height: 360px;
-}
-
 /* Document icon */
 .jp-PlotlyIcon {
   background-image: var(--jp-icon-plotly);
-}
+}