Repository: dask/distributed

Issue:
Use CSS for profile and profile server plots
These plots currently only function well when they are of a certain aspect ratio.  It may be that Bokeh's layout engine isn't cut out for them.  If someone with some CSS knowledge is around, it would be great to have these operate more like the /status route (see `dashboard/components/scheduler.py::status_doc` for pointers) so that it conformed to the space that it was in.

cc @jacobtomlinson 


Discussion:
cc @dsludwig and @jsignell in case either of them feel like a side project 
Not right now, but maybe in the future :)

Resolving patch:
diff --git a/distributed/dashboard/components/scheduler.py b/distributed/dashboard/components/scheduler.py
--- a/distributed/dashboard/components/scheduler.py
+++ b/distributed/dashboard/components/scheduler.py
@@ -1852,7 +1852,7 @@ def individual_bandwidth_workers_doc(scheduler, extra, doc):
 def profile_doc(scheduler, extra, doc):
     with log_errors():
         doc.title = "Dask: Profile"
-        prof = ProfileTimePlot(scheduler, sizing_mode="scale_width", doc=doc)
+        prof = ProfileTimePlot(scheduler, sizing_mode="stretch_both", doc=doc)
         doc.add_root(prof.root)
         doc.template = env.get_template("simple.html")
         doc.template_variables.update(extra)
@@ -1864,7 +1864,7 @@ def profile_doc(scheduler, extra, doc):
 def profile_server_doc(scheduler, extra, doc):
     with log_errors():
         doc.title = "Dask: Profile of Event Loop"
-        prof = ProfileServer(scheduler, sizing_mode="scale_width", doc=doc)
+        prof = ProfileServer(scheduler, sizing_mode="stretch_both", doc=doc)
         doc.add_root(prof.root)
         doc.template = env.get_template("simple.html")
         doc.template_variables.update(extra)
diff --git a/distributed/dashboard/components/shared.py b/distributed/dashboard/components/shared.py
--- a/distributed/dashboard/components/shared.py
+++ b/distributed/dashboard/components/shared.py
@@ -312,12 +312,12 @@ def cb(attr, old, new):
         self.ts_source = ColumnDataSource({"time": [], "count": []})
         self.ts_plot = figure(
             title="Activity over time",
-            height=100,
+            height=150,
             x_axis_type="datetime",
             active_drag="xbox_select",
             y_range=[0, 1 / profile_interval],
             tools="xpan,xwheel_zoom,xbox_select,reset",
-            **kwargs
+            sizing_mode="stretch_width",
         )
         self.ts_plot.line("time", "count", source=self.ts_source)
         self.ts_plot.circle(
@@ -367,6 +367,7 @@ def select_cb(attr, old, new):
                 self.reset_button,
                 self.update_button,
                 sizing_mode="scale_width",
+                height=250,
             ),
             self.profile_plot,
             self.ts_plot,
@@ -464,12 +465,12 @@ def cb(attr, old, new):
         self.ts_source = ColumnDataSource({"time": [], "count": []})
         self.ts_plot = figure(
             title="Activity over time",
-            height=100,
+            height=150,
             x_axis_type="datetime",
             active_drag="xbox_select",
             y_range=[0, 1 / profile_interval],
             tools="xpan,xwheel_zoom,xbox_select,reset",
-            **kwargs
+            sizing_mode="stretch_width",
         )
         self.ts_plot.line("time", "count", source=self.ts_source)
         self.ts_plot.circle(


Test patch: