feat(plot): autosize plots

- arrange delay spectrum plots vertically

bondia/plot/delayspectrum.py

@@ -44,9 +44,6 @@ class DelaySpectrumPlot(param.Parameterized, BondiaPlot):
     # Hide lsd selector by setting precedence < 0
     lsd = param.Selector(precedence=-1)
 
-    def panel(self):
-        return panel.Column(self.title, self.view)
-
     def __init__(self, data, **params):
         self.data = data
         self.selections = None
@@ -77,8 +74,8 @@ def view(self):
 
         nplot = ux.size
 
-        # Fill a row with plots (one per pair of cylinders)
-        all_img = panel.Row()
+        # Fill a column with plots (one per pair of cylinders)
+        all_img = panel.Column(width_policy="max")
         mplot = {}
         ylim = None
         for pp, pux in reversed(list(enumerate(ux))):
@@ -142,7 +139,6 @@ def view(self):
                         hv.opts.VLine(color="white", line_width=3, line_dash="dotted"),
                         hv.opts.HLine(color="white", line_width=3, line_dash="dotted"),
                     )
-                all_img.insert(0, img)
             else:
                 # set colormap
                 cmap_inferno = matplotlib_cm.__dict__["inferno"]
@@ -170,7 +166,7 @@ def view(self):
                         hv.opts.VLine(color="white", line_width=3, line_dash="dotted"),
                         hv.opts.HLine(color="white", line_width=3, line_dash="dotted"),
                     )
-
-                all_img.insert(0, img)
+            img.opts(responsive="width", height=500)
+            all_img.insert(0, img)
 
         return all_img

bondia/plot/plot.py

@@ -1,12 +1,12 @@
-from panel import Row
+from panel import Column, Row
 
 
 class BondiaPlot:
     def __init__(self, name: str, activated: bool = True):
         self._name = name
         self._id = name.lower().replace(" ", "_")
-        self._panel_row_active = activated
-        self._panel_row = None
+        self._panel_col_active = activated
+        self._panel_col = None
 
     @property
     def id(self):
@@ -22,20 +22,25 @@ def title(self):
 
     @property
     def panel_row(self):
-        if self._panel_row is None:
-            if self._panel_row_active:
-                self._panel_row = Row(self.panel(), self.param)
+        if self._panel_col is None:
+            if self._panel_col_active:
+
+                self._panel_col = Column(
+                    self.title, Row(self.view, self.param), width_policy="max"
+                )
             else:
-                self._panel_row = Row()
-        return self._panel_row
+                self._panel_col = Column(None, Row())
+        return self._panel_col
 
     @panel_row.setter
     def panel_row(self, value: bool):
-        self._panel_row_active = value
-        if self._panel_row:
+        self._panel_col_active = value
+        if self._panel_col:
             if value:
-                self._panel_row[0] = self.panel()
-                self._panel_row[1] = self.param
+                self._panel_col[0] = self.title
+                self._panel_col[1][0] = self.view
+                self._panel_col[1][1] = self.param
             else:
-                self._panel_row[0] = None
-                self._panel_row[1] = None
+                self._panel_col[0] = None
+                self._panel_col[1][0] = None
+                self._panel_col[1][1] = None

bondia/templates/mwc.html

@@ -12,20 +12,6 @@
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 
-<style>
-.grid {
-  width: 100%;
-  background: #EEEEEE;
-}
-
-.grid-cell {
-  height: 210px;
-  border-radius: 4px;
-  <-- box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -->
-  padding: 5px;
-}
-</style>
-
 <style>
 body {
     font-family: roboto;