Repository: bokeh/bokeh

Issue:
dashboard.py example not behaving as expected after the layout PR
``examples/howto/layouts/dashboard.py``

Running from master locally, I get this.

![screenshot from 2019-02-11 09-49-39](https://user-images.githubusercontent.com/1796208/52574694-70cf3f80-2de2-11e9-8a69-68af9850d5cf.png)

I see the following problems:
* The axes edges of the plots are not aligned on the left or right sides.
* The sliders should have more space to the left
* The sliders  should fill the space alotted to them.

Note that this example was explicitly coded up for the last layout PR to be challenging with the left title, the missing toolbar on the right middle plot, and the 1-2-3 layout, and the sliders.




Discussion:
Here's a screenshot from 1.0.4

![screenshot from 2019-02-11 09-58-19](https://user-images.githubusercontent.com/1796208/52575339-a4f73000-2de3-11e9-88b1-4ae553240364.png)

The axes are aligned, but the sliders do not look great either. I misremembered that bit :D
I think they should be ideally, left aligned with the axes. Although that may be out of scope.

I'm indifferent about stretching them.

@birdsarah the issue with some axis alignments is known, but I am not sure there is a GH issue so this can serve as a good one for tracking it. AFAIK @mattpap has a plan or idea for how to restore that but I am not sure how much of a lift it will be. 


Lack of axis alignment is a side effect of lack of grid spans in the new layout. This will be implemented at some point. Sliders are too short, but that's a known issue. Everything is tracked in issue #8084.
Just FYI this things look different as of 1.1.0dev9:

<img width="1341" alt="screen shot 2019-03-07 at 12 13 36 pm" src="https://user-images.githubusercontent.com/1078448/53986263-81699180-40d2-11e9-8441-b1484a3e2d03.png">

If we are advocating for using grids to achieve this now, we should update this to look better with newest guidance. 

@mattpap This diff gives what I would consider a good result:
```
diff --git a/examples/howto/layouts/dashboard.py b/examples/howto/layouts/dashboard.py
index 7613e735b..1ddac2811 100644
--- a/examples/howto/layouts/dashboard.py
+++ b/examples/howto/layouts/dashboard.py
@@ -1,6 +1,6 @@
 import numpy as np

-from bokeh.layouts import grid, column
+from bokeh.layouts import grid
 from bokeh.models import CustomJS, Slider, ColumnDataSource
 from bokeh.plotting import figure, output_file, show

@@ -39,7 +39,7 @@ def slider():

     plot = figure(
         y_range=(-10, 10), tools='', toolbar_location=None,
-        title="Sliders example")
+        title="Sliders example", plot_height=250)
     plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

     callback = CustomJS(args=dict(source=source), code="""
@@ -68,7 +68,9 @@ def slider():
     offset_slider = Slider(start=-5, end=5, value=0, step=.1, title="Offset", callback=callback)
     callback.args["offset"] = offset_slider

-    widgets = column(amp_slider, freq_slider, phase_slider, offset_slider)
+    widgets = [amp_slider, freq_slider, phase_slider, offset_slider]
+    for x in widgets + [plot]:
+        x.sizing_mode = "stretch_width"
     return [widgets, plot]
```

Is there a better/cleaner way to express this? The main thing is that everything is stretch_both except the middle row (otherwise the sliders vertical space expands way too much). 
Here is the nice result (which resizes well and smoothly):

<img width="1228" alt="Screen Shot 2019-04-04 at 9 07 19 PM" src="https://user-images.githubusercontent.com/1078448/55603079-b5f65a80-571d-11e9-8845-e28fbfed45dc.png">

I think it'd be nicer id the sliders matched up with the axes but can live without
> I think it'd be nicer id the sliders matched up with the axes but can live without.

That never worked. However, this can be implemented with the new layout, because "axis alignment" can work with arbitrary lines.
Just to note. This example can be made to work as expected, however there are at least two bugs that prevent the existing setup doing so. I'm working on a fix.

Resolving patch:
diff --git a/bokeh/models/layouts.py b/bokeh/models/layouts.py
--- a/bokeh/models/layouts.py
+++ b/bokeh/models/layouts.py
@@ -285,21 +285,21 @@ class Spacer(LayoutDOM):
 
     '''
 
-QuickTrackSizing = Either(Enum("auto", "min", "max"), Int)
+QuickTrackSizing = Either(Enum("auto", "min", "fit", "max"), Int)
 
 TrackAlign = Either(Auto, Enum(Align))
 
 RowSizing = Either(
     QuickTrackSizing,
-    Struct(policy=Enum("auto", "min", "max"), align=TrackAlign),
+    Struct(policy=Enum("auto", "min"), align=TrackAlign),
     Struct(policy=Enum("fixed"), height=Int, align=TrackAlign),
-    Struct(policy=Enum("flex"), factor=Float, align=TrackAlign))
+    Struct(policy=Enum("fit", "max"), flex=Float, align=TrackAlign))
 
 ColSizing = Either(
     QuickTrackSizing,
-    Struct(policy=Enum("auto", "min", "max"), align=TrackAlign),
+    Struct(policy=Enum("auto", "min"), align=TrackAlign),
     Struct(policy=Enum("fixed"), width=Int, align=TrackAlign),
-    Struct(policy=Enum("flex"), factor=Float, align=TrackAlign))
+    Struct(policy=Enum("fit", "max"), flex=Float, align=TrackAlign))
 
 IntOrString = Either(Int, String) # XXX: work around issue #8166
 


Test patch:
diff --git a/bokehjs/test/integration.ts b/bokehjs/test/integration.ts
--- a/bokehjs/test/integration.ts
+++ b/bokehjs/test/integration.ts
@@ -150,7 +150,7 @@ describe("3x3 GridBox", () => {
       [s0, s0, s0],
     ])
 
-    const l = grid(items, {cols: {2: {policy: "flex", factor: 2}}})
+    const l = grid(items, {cols: {2: {policy: "max", flex: 2}}})
     await display(l, [300, 300])
   })
 
@@ -164,7 +164,7 @@ describe("3x3 GridBox", () => {
       [s0, s0, s0],
     ])
 
-    const l = grid(items, {cols: {2: {policy: "flex", factor: 2}}})
+    const l = grid(items, {cols: {2: {policy: "max", flex: 2}}})
     await display(l, [300, 300])
   })
 
@@ -178,7 +178,7 @@ describe("3x3 GridBox", () => {
       [s0, s0, s0],
     ])
 
-    const l = grid(items, {cols: {2: {policy: "flex", factor: 2, align: "end"}}})
+    const l = grid(items, {cols: {2: {policy: "max", flex: 2, align: "end"}}})
     await display(l, [300, 300])
   })
 
diff --git a/tests/baselines/examples/app/population b/tests/baselines/examples/app/population
--- a/tests/baselines/examples/app/population
+++ b/tests/baselines/examples/app/population
@@ -9,5 +9,5 @@ Row bbox=[0, 0, 1200, 680]
       LinearAxis bbox=[6, 29, 56, 96]
       Title bbox=[62, 0, 533, 29]
   Column bbox=[600, 0, 600, 120]
-    Select bbox=[5, 5, 300, 50]
-    Select bbox=[5, 65, 300, 50]
+    Select bbox=[5, 5, 590, 50]
+    Select bbox=[5, 65, 590, 50]
diff --git a/tests/baselines/examples/app/taylor b/tests/baselines/examples/app/taylor
--- a/tests/baselines/examples/app/taylor
+++ b/tests/baselines/examples/app/taylor
@@ -1,7 +1,7 @@
 Column bbox=[0, 0, 800, 533]
   Column bbox=[0, 0, 400, 133]
-    TextInput bbox=[5, 5, 300, 50]
-    Slider bbox=[5, 65, 300, 39]
+    TextInput bbox=[5, 5, 390, 50]
+    Slider bbox=[5, 65, 390, 39]
     PreText bbox=[5, 114, 0, 14]
   Plot bbox=[0, 133, 800, 400]
     LinearAxis bbox=[34, 376, 736, 24]
diff --git a/tests/baselines/examples/howto/layouts/dashboard b/tests/baselines/examples/howto/layouts/dashboard
--- a/tests/baselines/examples/howto/layouts/dashboard
+++ b/tests/baselines/examples/howto/layouts/dashboard
@@ -4,11 +4,11 @@ GridBox bbox=[0, 0, 984, 984]
     LinearAxis bbox=[29, 5, 31, 299]
     Title bbox=[0, 5, 29, 299]
     ToolbarPanel bbox=[954, 5, 30, 299]
-  Column bbox=[0, 328, 310, 196]
-    Slider bbox=[5, 5, 300, 39]
-    Slider bbox=[5, 54, 300, 39]
-    Slider bbox=[5, 103, 300, 39]
-    Slider bbox=[5, 152, 300, 39]
+  Column bbox=[0, 328, 492, 196]
+    Slider bbox=[5, 5, 482, 39]
+    Slider bbox=[5, 54, 482, 39]
+    Slider bbox=[5, 103, 482, 39]
+    Slider bbox=[5, 152, 482, 39]
   Plot bbox=[492, 328, 492, 328]
     LinearAxis bbox=[28, 304, 434, 24]
     LinearAxis bbox=[0, 29, 28, 275]
diff --git a/tests/baselines/examples/plotting/file/sizing_mode b/tests/baselines/examples/plotting/file/sizing_mode
--- a/tests/baselines/examples/plotting/file/sizing_mode
+++ b/tests/baselines/examples/plotting/file/sizing_mode
@@ -1,5 +1,5 @@
-Column bbox=[0, 0, 600, 660]
-  Select bbox=[5, 5, 590, 50]
+Column bbox=[0, 0, 984, 660]
+  Select bbox=[5, 5, 974, 50]
   Plot bbox=[0, 60, 600, 600]
     LinearAxis bbox=[27, 576, 543, 24]
     LinearAxis bbox=[0, 5, 27, 571]