Move plot widget to bottom (#1199)

Co-authored-by: maximlt <[email protected]>
holoviz · Dec 21, 2023 · c8efb3e · c8efb3e
1 parent 1c2eb15
commit c8efb3e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/hvplot/tests/testui.py b/hvplot/tests/testui.py
@@ -64,6 +64,7 @@ def test_explorer_plot_code():
             "    kind='scatter',\n"
             "    x='bill_length_mm',\n"
             "    y=['bill_depth_mm'],\n"
+            "    widget_location='bottom',\n"
             ")"
         )
     )
@@ -77,6 +78,7 @@ def test_explorer_plot_code():
             "    kind='scatter',\n"
             "    x='bill_length_mm',\n"
             "    y=['bill_depth_mm'],\n"
+            "    widget_location='bottom',\n"
             ")"
         )
     )
@@ -278,6 +280,7 @@ def test_explorer_code_dataframe():
             kind='points',
             x='bill_length_mm',
             y='species',
+            widget_location='bottom',
         )"""
     )
     assert explorer._code_pane.object == dedent("""\
@@ -286,6 +289,7 @@ def test_explorer_code_dataframe():
             kind='points',
             x='bill_length_mm',
             y='species',
+            widget_location='bottom',
         )
         ```"""
     )
@@ -301,6 +305,7 @@ def test_explorer_code_gridded():
             kind='image',
             x='lon',
             y='lat',
+            widget_location='bottom',
         )""")
 
     assert explorer._code_pane.object == dedent("""\
@@ -311,6 +316,7 @@ def test_explorer_code_gridded():
             kind='image',
             x='lon',
             y='lat',
+            widget_location='bottom',
         )
         ```"""
     )
@@ -327,6 +333,7 @@ def test_explorer_code_gridded_dataarray():
             kind='image',
             x='lon',
             y='lat',
+            widget_location='bottom',
         )""")
 
     assert explorer._code_pane.object == dedent("""\
@@ -337,6 +344,7 @@ def test_explorer_code_gridded_dataarray():
             kind='image',
             x='lon',
             y='lat',
+            widget_location='bottom',
         )
         ```"""
     )
@@ -353,6 +361,7 @@ def test_explorer_code_opts():
             kind='image',
             x='lon',
             y='lat',
+            widget_location='bottom',
         ).opts(
             color_levels=3,
         )""")
@@ -365,6 +374,7 @@ def test_explorer_code_opts():
             kind='image',
             x='lon',
             y='lat',
+            widget_location='bottom',
         ).opts(
             color_levels=3,
         )

diff --git a/hvplot/ui.py b/hvplot/ui.py
@@ -517,8 +517,11 @@ def __init__(self, df, **params):
         self._alert = pn.pane.Alert(
             alert_type='danger', visible=False, sizing_mode='stretch_width'
         )
-        self._hv_pane = pn.pane.HoloViews(sizing_mode='stretch_width', margin=(5, 20, 5, 20))
-        self._code_pane = pn.pane.Markdown(sizing_mode='stretch_width', margin=(5, 20, 0, 20))
+        self._hv_pane = pn.pane.HoloViews(
+            sizing_mode='stretch_both', min_height=250, margin=(5, 5, 5, 20),
+            widget_location="bottom", widget_layout=pn.Row)
+        self._code_pane = pn.pane.Markdown(
+            sizing_mode='stretch_both', min_height=250, margin=(5, 5, 0, 20))
         self._layout = pn.Column(
             self._alert,
             self._statusbar,
@@ -528,9 +531,10 @@ def __init__(self, df, **params):
                 # Using .layout on the HoloViews pane to display the widgets
                 # https://github.com/holoviz/panel/issues/5628#issuecomment-1763443895
                 pn.Tabs(('Plot', self._hv_pane.layout), ('Code', self._code_pane)),
-                sizing_mode='stretch_width',
+                sizing_mode='stretch_both'
             ),
-            sizing_mode='stretch_both'
+            sizing_mode='stretch_width',
+            height=600
         )
 
         # initialize
@@ -596,6 +600,12 @@ def _plot(self, *events):
             if opts_kwargs:
                 self._hvplot.opts(**opts_kwargs)
             self._hv_pane.object = self._hvplot
+            # Working around a Panel issue that cause the widgets not to
+            # be well aligned when in a Row layout.
+            # See https://github.com/holoviz/panel/issues/6110
+            if len(self._hv_pane.widget_box) > 1:
+                for w in self._hv_pane.widget_box:
+                    w.margin = (20, 5, 5, 5)
             self._alert.visible = False
         except Exception as e:
             self._alert.param.update(
@@ -687,6 +697,7 @@ def plot_code(self, var_name=None):
             Data variable name by which the returned string will start.
         """
         settings = self.settings()
+        settings["widget_location"] = "bottom"
         settings_args = ''
         if settings:
             settings_args = self._build_kwargs_string(settings)