New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the layout subsystem #8085

Merged
merged 232 commits into from Feb 1, 2019

Conversation

Projects
None yet
@mattpap
Copy link
Contributor

mattpap commented Jul 17, 2018

addresses #8084

fixes #4407 (new feature)
fixes #4643 (irrelevant)
fixes #5169 (fixed, needs a test)
fixes #5572 (fixed)
fixes #6294 (fixed)
fixes #6417 (fixed, needs a test)
fixes #6768 (fixed, needs a test)
fixes #7120 (fixed, needs a test)
fixes #7185 (irrelevant)
fixes #7497 (fixed)
fixes #7590 (fixed) [already closed?]
fixes #7771 (fixed)
fixes #8227 (fixed)
fixes #8229 (new feature, needs tests, examples)
fixes #6822 (fixed)
fixes #4395 (fixed)

fixes #8391 (fixed, needs test)
fixes #7260 (fixed)
fixes #7454 (fixed, needs test)
fixes #5749 (fixed)
fixes #6259 (fixed)
fixes #4608 (fixed)
fixes #8611 (fixed)

@mattpap mattpap added the status: WIP label Jul 17, 2018

@mattpap mattpap force-pushed the mattpap/8084_layout branch from c6d3a60 to f6d0024 Jul 18, 2018

@mattpap mattpap force-pushed the mattpap/8084_layout branch 5 times, most recently from 151bda8 to 6358e3a Aug 8, 2018

@mattpap mattpap force-pushed the mattpap/8084_layout branch from 6358e3a to e3fd5d4 Aug 17, 2018

@bryevdv

This comment has been minimized.

Copy link
Member

bryevdv commented Aug 20, 2018

@mattpap I'd like to suggest an alternative to deprecation for widgetbox. It's fairly common in other tools to be able to create a columns of widgets of fixed width, and perhaps with a different background, e.g. light grey, to offset the area of controls visually. I believe we could make widgetbox be that, i..e just a convenience function that creates a column but with a standard fixed width and a light grey background configured. It's not something we have to heavily emphasize or endorse, but it would be a little useful and also would let us avoid a deprecation in 1.0

@mattpap mattpap force-pushed the mattpap/8084_layout branch from e3fd5d4 to 899eea0 Aug 20, 2018

@mattpap

This comment has been minimized.

Copy link
Contributor Author

mattpap commented Aug 20, 2018

I'd like to suggest an alternative to deprecation for widgetbox.

I'm open to suggestions regarding this. One thing that I particularly dislike about widgetbox, is that it doesn't tell from its name what kind of layout to expect. I presume it makes sense it's a column, but nevertheless it's confusing to me.

@bryevdv

This comment has been minimized.

Copy link
Member

bryevdv commented Aug 20, 2018

I'm open to suggestions regarding this.

Do you have thoughts on what I suggested above? I agree "widgetbox" is somewhat vague but I think visually distinguished boxes with vertical layouts are common enough that we could reasonably use it for that (and it would also be simple to implement I expect)

@mattpap

This comment has been minimized.

Copy link
Contributor Author

mattpap commented Aug 20, 2018

I will implement what was suggested.

@mattpap mattpap force-pushed the mattpap/8084_layout branch 4 times, most recently from 71c5fbd to e6c640e Aug 22, 2018

@bryevdv bryevdv referenced this pull request Aug 27, 2018

Merged

Bryanv/5231 json embeds #8193

3 of 3 tasks complete
@bryevdv

This comment has been minimized.

Copy link
Member

bryevdv commented Sep 1, 2018

@mattpap a data point to keep in mind:

https://groups.google.com/a/continuum.io/forum/#!topic/bokeh/AGB2JEuRoSs

After some investigation I discovered that the issue was excessive calls to render on the data table, and that those calls to render were ultimately triggered by lots of re-layout-ing. I would definitely be nice if we can avoid things like that, do you think this work as it is may already help?


A quick run with the PR does have the panning much more responsive, though the data table is not really rendering yet (just the header). In general I guess it might be worth trying to optimize for the fact that unless a canvas size changes, any layout changes inside the canvas can't really affect any widget layouts. And perhaps that's already the case -- I don't see excessive call to render the table anymore on layout.

@mattpap

This comment has been minimized.

Copy link
Contributor Author

mattpap commented Sep 1, 2018

In this PR rendering happens exactly once, before the first layout. It's up to a model's view to decide if it needs to anything more after layout, so it can render again or just update its subcomponents based on possibly changed layout. This way you can control exactly what needs to be updated and how expensive it will be.

@mattpap mattpap force-pushed the mattpap/8084_layout branch from 14ffebd to 750f52c Sep 4, 2018

@philippjfr philippjfr referenced this pull request Sep 6, 2018

Open

Compatibility for new bokeh layout system #32

4 of 9 tasks complete
@bryevdv

This comment has been minimized.

Copy link
Member

bryevdv commented Sep 6, 2018

@mattpap you will probably want to merge/rebase on master due to #8219

@mattpap mattpap force-pushed the mattpap/8084_layout branch from 750f52c to e202d51 Sep 7, 2018

@philippjfr

This comment has been minimized.

Copy link
Contributor

philippjfr commented Sep 7, 2018

@mattpap At what point is feedback here valuable to you? I've been trying out this PR every once in a while and have noticed a large number of regressions and backward incompatible changes. Obviously I wasn't going to raise those while you're still working on this, but if you're nearing completion I want to make sure these are either addressed or explicitly acknowledged as incompatibilities before this is merged.

@mattpap

This comment has been minimized.

Copy link
Contributor Author

mattpap commented Sep 7, 2018

@philippjfr, I'm presuming you are referring to pyviz/panel#32? So, widgets/tabs are still work in progress, so feedback will be welcome when things are fully implemented (hopefully today, but more realistically on Monday). bokehjs' APIs changed almost completely with regards to layout, so external models will have to be updated (perhaps pyviz/panel should be added to downstream tests, to avoid future regressions). I can do it when I'm done with this PR. There should be no API difference in Python, though there are some corner cases that have changed (e.g. sizing mode propagation in grids), however you shouldn't be affected by them. There are some regressions to updating things on change, especially when children change. I will be reviewing all listeners/emits when I'm done with the base implementation. I'm also expecting a "tweaking" period after this PR is done and possibly merged, to get all the corner cases right (and there are a lot of those).

@philippjfr

This comment has been minimized.

Copy link
Contributor

philippjfr commented Sep 7, 2018

Okay thanks, sounds perfect! I'll be available for any amount of testing once you think it's ready for that.

@bryevdv

This comment has been minimized.

Copy link
Member

bryevdv commented Sep 7, 2018

@philippjfr thank you for being available for testing, we will need all the help we can get. Also +1 to adding as much new downstream tests as possible.

@mattpap mattpap force-pushed the mattpap/8084_layout branch from e202d51 to 56c4a1e Sep 7, 2018

@mattpap

This comment has been minimized.

Copy link
Contributor Author

mattpap commented Feb 1, 2019

@cutright, are there any errors in the JS console? Can you show me the output of:

JSON.stringify(Object.values(Bokeh.index).map((v) => v.serializable_state()))
@cutright

This comment has been minimized.

Copy link

cutright commented Feb 1, 2019

Oh... this is interesting. Chrome actually suffers from the same issue. The layout looks fine initially, but squeezes into that small area after additional python code has run to change the options in the Select. I'll write back with some minimal code.

@mattpap

This comment has been minimized.

Copy link
Contributor Author

mattpap commented Feb 1, 2019

In such a case please start a new issue with all the information.

@bryevdv

This comment has been minimized.

Copy link
Member

bryevdv commented Feb 1, 2019

@cutright How did you install?? the 1.1dev1 build failed deploy due to a build script issue. I am building dev2 right now. I was not aware that 1.1dev ever got published

@cutright

This comment has been minimized.

Copy link

cutright commented Feb 1, 2019

Sorry... I have a ginormous layout.

JSON.stringify(Object.values(Bokeh.index).map((v) => v.serializable_state())) "[{"type":"Tabs","bbox":{"left":0,"top":0,"width":1310,"height":1746},"children":[{"type":"Column","bbox":{"left":0,"top":36,"width":1010,"height":410},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":10,"width":190,"height":10},"children":[{"type":"TextInput","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":50,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":65,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":70,"top":0,"width":50,"height":10},"children":[]},{"type":"Button","bbox":{"left":125,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":130,"top":0,"width":50,"height":10},"children":[]},{"type":"Dropdown","bbox":{"left":185,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Div","bbox":{"left":5,"top":25,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":5,"top":35,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":40,"width":80,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":10,"height":10},"children":[]},{"type":"Select","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":35,"top":5,"width":0,"height":0},"children":[]},{"type":"CheckboxButtonGroup","bbox":{"left":45,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":55,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":60,"top":0,"width":10,"height":10},"children":[]},{"type":"CheckboxGroup","bbox":{"left":75,"top":5,"width":0,"height":0},"children":[]}]},{"type":"DataTable","bbox":{"left":5,"top":55,"width":1000,"height":150},"children":[]},{"type":"Div","bbox":{"left":5,"top":215,"width":0,"height":0},"children":[]},{"type":"Div","bbox":{"left":5,"top":225,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":5,"top":235,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":240,"width":150,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":10,"height":10},"children":[]},{"type":"Select","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]},{"type":"TextInput","bbox":{"left":35,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":40,"top":0,"width":30,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":75,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":80,"top":0,"width":30,"height":10},"children":[]},{"type":"CheckboxButtonGroup","bbox":{"left":115,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":125,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":130,"top":0,"width":10,"height":10},"children":[]},{"type":"CheckboxGroup","bbox":{"left":145,"top":5,"width":0,"height":0},"children":[]}]},{"type":"DataTable","bbox":{"left":5,"top":255,"width":1000,"height":150},"children":[]}]},{"type":"Column","bbox":{"left":0,"top":36,"width":1210,"height":1580},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":10,"width":70,"height":10},"children":[{"type":"TextInput","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":50,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":65,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":20,"width":20,"height":10},"children":[{"type":"RadioGroup","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"RadioGroup","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":30,"width":30,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"TextInput","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Plot","bbox":{"left":0,"top":40,"width":1050,"height":500},"children":[{"type":"LinearAxis","bbox":{"left":75,"top":425,"width":836,"height":54}},{"type":"LinearAxis","bbox":{"left":16,"top":5,"width":59,"height":420}},{"type":"Legend","bbox":{"left":911,"top":5,"width":109,"height":420}},{"type":"Title","bbox":{"left":75,"top":5,"width":836,"height":0}},{"type":"ToolbarPanel","bbox":{"left":1020,"top":5,"width":30,"height":420}}]},{"type":"Div","bbox":{"left":5,"top":545,"width":0,"height":0},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":555,"width":1200,"height":400},"children":[]},{"type":"Div","bbox":{"left":5,"top":965,"width":0,"height":0},"children":[]},{"type":"Div","bbox":{"left":5,"top":975,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":5,"top":985,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":990,"width":140,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":10,"height":10},"children":[]},{"type":"Select","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]},{"type":"TextInput","bbox":{"left":35,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":40,"top":0,"width":20,"height":10},"children":[]},{"type":"RadioButtonGroup","bbox":{"left":65,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":75,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":80,"top":0,"width":50,"height":10},"children":[]},{"type":"Button","bbox":{"left":135,"top":5,"width":0,"height":0},"children":[]}]},{"type":"DataTable","bbox":{"left":5,"top":1005,"width":300,"height":150},"children":[]},{"type":"Div","bbox":{"left":5,"top":1165,"width":0,"height":0},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":1175,"width":1200,"height":400},"children":[]}]},{"type":"Column","bbox":{"left":0,"top":36,"width":1110,"height":980},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":10,"width":70,"height":10},"children":[{"type":"TextInput","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":50,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":65,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Div","bbox":{"left":5,"top":25,"width":0,"height":0},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":35,"width":1100,"height":400},"children":[]},{"type":"Div","bbox":{"left":5,"top":445,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":450,"width":250,"height":10},"children":[{"type":"TextInput","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":50,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":65,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":70,"top":0,"width":50,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":125,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":130,"top":0,"width":50,"height":10},"children":[]},{"type":"CheckboxButtonGroup","bbox":{"left":185,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":190,"top":0,"width":50,"height":10},"children":[]},{"type":"Button","bbox":{"left":245,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Div","bbox":{"left":5,"top":465,"width":0,"height":0},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":475,"width":1100,"height":400},"children":[]},{"type":"Spacer","bbox":{"left":0,"top":880,"width":1000,"height":100},"children":[]}]},{"type":"Column","bbox":{"left":0,"top":36,"width":1000,"height":810},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":10,"width":70,"height":10},"children":[{"type":"TextInput","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":50,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":65,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":20,"width":30,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Div","bbox":{"left":5,"top":35,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":40,"width":50,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":35,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":45,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Div","bbox":{"left":5,"top":55,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":60,"width":40,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":35,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":70,"width":40,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":35,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":80,"width":10,"height":10},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":90,"width":30,"height":10},"children":[{"type":"Button","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":100,"width":10,"height":10},"children":[{"type":"CheckboxGroup","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":110,"width":825,"height":600},"children":[{"type":"Plot","bbox":{"left":0,"top":0,"width":825,"height":600},"children":[{"type":"LinearAxis","bbox":{"left":75,"top":525,"width":720,"height":54}},{"type":"LinearAxis","bbox":{"left":12,"top":5,"width":63,"height":520}},{"type":"Title","bbox":{"left":75,"top":5,"width":720,"height":0}},{"type":"ToolbarPanel","bbox":{"left":795,"top":5,"width":30,"height":520}}]}]},{"type":"Row","bbox":{"left":0,"top":710,"width":1000,"height":100},"children":[{"type":"Spacer","bbox":{"left":0,"top":0,"width":1000,"height":100},"children":[]}]}]},{"type":"Column","bbox":{"left":0,"top":36,"width":1310,"height":1700},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":10,"width":70,"height":10},"children":[{"type":"TextInput","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":50,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":65,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Div","bbox":{"left":5,"top":25,"width":0,"height":0},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":35,"width":1300,"height":400},"children":[]},{"type":"Div","bbox":{"left":5,"top":445,"width":0,"height":0},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":455,"width":1300,"height":400},"children":[]},{"type":"Div","bbox":{"left":5,"top":865,"width":0,"height":0},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":875,"width":1300,"height":400},"children":[]},{"type":"Div","bbox":{"left":5,"top":1285,"width":0,"height":0},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":1295,"width":1300,"height":400},"children":[]}]},{"type":"Column","bbox":{"left":0,"top":36,"width":1120,"height":1140},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":130,"height":16},"children":[]},{"type":"Row","bbox":{"left":0,"top":26,"width":670,"height":57},"children":[{"type":"TextInput","bbox":{"left":5,"top":5,"width":300,"height":47},"children":[]},{"type":"Spacer","bbox":{"left":310,"top":0,"width":50,"height":57},"children":[]},{"type":"TextInput","bbox":{"left":365,"top":5,"width":300,"height":47},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":83,"width":1120,"height":57},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":300,"height":47},"children":[]},{"type":"Select","bbox":{"left":315,"top":5,"width":200,"height":47},"children":[]},{"type":"TextInput","bbox":{"left":525,"top":5,"width":200,"height":47},"children":[]},{"type":"Spacer","bbox":{"left":730,"top":0,"width":10,"height":57},"children":[]},{"type":"TextInput","bbox":{"left":745,"top":5,"width":200,"height":47},"children":[]},{"type":"Spacer","bbox":{"left":950,"top":0,"width":10,"height":57},"children":[]},{"type":"Button","bbox":{"left":965,"top":5,"width":150,"height":47},"children":[]}]},{"type":"Plot","bbox":{"left":0,"top":140,"width":1050,"height":400},"children":[{"type":"DatetimeAxis","bbox":{"left":75,"top":325,"width":775,"height":33}},{"type":"LinearAxis","bbox":{"left":69,"top":5,"width":6,"height":320}},{"type":"Legend","bbox":{"left":850,"top":5,"width":170,"height":320}},{"type":"Title","bbox":{"left":75,"top":5,"width":775,"height":0}},{"type":"ToolbarPanel","bbox":{"left":1020,"top":5,"width":30,"height":320}}]},{"type":"Button","bbox":{"left":5,"top":545,"width":1110,"height":31},"children":[]},{"type":"Div","bbox":{"left":5,"top":586,"width":0,"height":13},"children":[]},{"type":"Row","bbox":{"left":0,"top":604,"width":516,"height":42},"children":[{"type":"Slider","bbox":{"left":5,"top":5,"width":300,"height":31},"children":[]},{"type":"RadioGroup","bbox":{"left":315,"top":5,"width":196,"height":32},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":646,"width":460,"height":42},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":183,"height":32},"children":[]},{"type":"Div","bbox":{"left":198,"top":5,"width":257,"height":32},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":688,"width":465,"height":42},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":183,"height":32},"children":[]},{"type":"Div","bbox":{"left":198,"top":5,"width":262,"height":32},"children":[]}]},{"type":"Plot","bbox":{"left":0,"top":730,"width":1050,"height":400},"children":[{"type":"LinearAxis","bbox":{"left":75,"top":325,"width":832,"height":6}},{"type":"LinearAxis","bbox":{"left":42,"top":5,"width":33,"height":320}},{"type":"Legend","bbox":{"left":907,"top":5,"width":113,"height":320}},{"type":"Title","bbox":{"left":75,"top":5,"width":832,"height":0}},{"type":"ToolbarPanel","bbox":{"left":1020,"top":5,"width":30,"height":320}}]},{"type":"Spacer","bbox":{"left":0,"top":1130,"width":1000,"height":10},"children":[]}]},{"type":"Column","bbox":{"left":0,"top":36,"width":920,"height":740},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":10,"width":70,"height":10},"children":[{"type":"TextInput","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":50,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":65,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Button","bbox":{"left":5,"top":25,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":30,"width":30,"height":10},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Div","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"Div","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":40,"width":920,"height":700},"children":[{"type":"Plot","bbox":{"left":0,"top":0,"width":900,"height":700},"children":[{"type":"CategoricalAxis","bbox":{"left":185,"top":0,"width":556,"height":140}},{"type":"CategoricalAxis","bbox":{"left":0,"top":140,"width":185,"height":555}},{"type":"Legend","bbox":{"left":741,"top":140,"width":129,"height":555}},{"type":"Title","bbox":{"left":185,"top":0,"width":556,"height":0}},{"type":"ToolbarPanel","bbox":{"left":870,"top":140,"width":30,"height":555}}]},{"type":"CheckboxGroup","bbox":{"left":905,"top":5,"width":0,"height":0},"children":[]},{"type":"CheckboxGroup","bbox":{"left":915,"top":5,"width":0,"height":0},"children":[]}]}]},{"type":"Column","bbox":{"left":0,"top":36,"width":1050,"height":1710},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":10,"width":70,"height":10},"children":[{"type":"TextInput","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":50,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":65,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":20,"width":655,"height":190},"children":[{"type":"Column","bbox":{"left":0,"top":0,"width":40,"height":30},"children":[{"type":"CheckboxGroup","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":10,"width":40,"height":10},"children":[{"type":"Button","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":20,"top":0,"width":10,"height":10},"children":[]},{"type":"Select","bbox":{"left":35,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":20,"width":40,"height":10},"children":[{"type":"Button","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":20,"top":0,"width":10,"height":10},"children":[]},{"type":"Select","bbox":{"left":35,"top":5,"width":0,"height":0},"children":[]}]}]},{"type":"Spacer","bbox":{"left":40,"top":0,"width":10,"height":175},"children":[]},{"type":"DataTable","bbox":{"left":55,"top":5,"width":300,"height":180},"children":[]},{"type":"Spacer","bbox":{"left":360,"top":0,"width":10,"height":175},"children":[]},{"type":"DataTable","bbox":{"left":375,"top":5,"width":275,"height":175},"children":[]}]},{"type":"Plot","bbox":{"left":0,"top":210,"width":1050,"height":400},"children":[{"type":"LinearAxis","bbox":{"left":75,"top":325,"width":832,"height":6}},{"type":"LinearAxis","bbox":{"left":69,"top":5,"width":6,"height":320}},{"type":"Legend","bbox":{"left":907,"top":5,"width":113,"height":320}},{"type":"Title","bbox":{"left":75,"top":5,"width":832,"height":0}},{"type":"ToolbarPanel","bbox":{"left":1020,"top":5,"width":30,"height":320}}]},{"type":"Div","bbox":{"left":5,"top":615,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":5,"top":625,"width":0,"height":0},"children":[]},{"type":"Plot","bbox":{"left":0,"top":630,"width":1050,"height":400},"children":[{"type":"LinearAxis","bbox":{"left":75,"top":325,"width":832,"height":33}},{"type":"LinearAxis","bbox":{"left":69,"top":5,"width":6,"height":320}},{"type":"Legend","bbox":{"left":907,"top":5,"width":113,"height":320}},{"type":"Title","bbox":{"left":75,"top":5,"width":832,"height":0}},{"type":"ToolbarPanel","bbox":{"left":1020,"top":5,"width":30,"height":320}}]},{"type":"Div","bbox":{"left":5,"top":1035,"width":0,"height":0},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":1045,"width":600,"height":60},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":1115,"width":600,"height":200},"children":[]},{"type":"Div","bbox":{"left":5,"top":1325,"width":0,"height":0},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":1335,"width":600,"height":60},"children":[]},{"type":"DataTable","bbox":{"left":5,"top":1405,"width":600,"height":200},"children":[]},{"type":"Spacer","bbox":{"left":0,"top":1610,"width":1000,"height":100},"children":[]}]},{"type":"Column","bbox":{"left":0,"top":36,"width":1210,"height":560},"children":[{"type":"Div","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":10,"width":70,"height":10},"children":[{"type":"TextInput","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":10,"top":0,"width":50,"height":10},"children":[]},{"type":"TextInput","bbox":{"left":65,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":20,"width":30,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":30,"width":10,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Div","bbox":{"left":5,"top":45,"width":0,"height":0},"children":[]},{"type":"Row","bbox":{"left":0,"top":50,"width":80,"height":10},"children":[{"type":"Select","bbox":{"left":5,"top":5,"width":0,"height":0},"children":[]},{"type":"Select","bbox":{"left":15,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":25,"top":5,"width":0,"height":0},"children":[]},{"type":"Button","bbox":{"left":35,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":40,"top":0,"width":10,"height":10},"children":[]},{"type":"Button","bbox":{"left":55,"top":5,"width":0,"height":0},"children":[]},{"type":"Spacer","bbox":{"left":60,"top":0,"width":10,"height":10},"children":[]},{"type":"Div","bbox":{"left":75,"top":5,"width":0,"height":0},"children":[]}]},{"type":"Row","bbox":{"left":0,"top":60,"width":1210,"height":500},"children":[{"type":"Plot","bbox":{"left":0,"top":0,"width":500,"height":500},"children":[{"type":"LinearAxis","bbox":{"left":75,"top":425,"width":395,"height":54}},{"type":"LinearAxis","bbox":{"left":7,"top":5,"width":68,"height":420}},{"type":"Title","bbox":{"left":75,"top":5,"width":395,"height":0}},{"type":"ToolbarPanel","bbox":{"left":470,"top":5,"width":30,"height":420}}]},{"type":"DataTable","bbox":{"left":505,"top":5,"width":700,"height":425},"children":[]}]}]}]}]"

@bryevdv

This comment has been minimized.

Copy link
Member

bryevdv commented Feb 1, 2019

@cutright right, there is no 1.1dev1 published:

https://anaconda.org/bokeh/bokeh/files

I'm not sure what you are running but it's not a real/valid release. 1.1dev2 is now available, before going further, can you please install and test with that?

@cutright

This comment has been minimized.

Copy link

cutright commented Feb 1, 2019

For 1.1.0dev1 I downloaded from GitHub, ran npm install and then python setup.py install.

I've since installed 1.1.0.dev2 from the anaconda link above (although pip install couldn't find it yet, installed from local package). I'm getting the same layout bug for Bokeh >1.0.4. I'll start working on some minimal code and start a new issue.

@bryevdv

This comment has been minimized.

Copy link
Member

bryevdv commented Feb 1, 2019

I'm getting the same layout bug for Bokeh >1.0.4. I'll start working on some minimal code and start a new issue.

OK, yes that would be the best next step, thanks for helping us run down issues. This is a large update we are expecting bumps to have to smooth over

@cutright

This comment has been minimized.

Copy link

cutright commented Feb 1, 2019

I've got some minimal code nearly ready, will start a new issue soon.

It appears to be related to rewriting CDS.data for a plot when using tabs.

@birdsarah

This comment has been minimized.

Copy link
Member

birdsarah commented Feb 1, 2019

I've got some minimal code nearly ready, will start a new issue soon.

It appears to be related to rewriting CDS.data for a plot when using tabs.

I think my main takeaway from all of my time on bokeh. is that everyone loves tabs except the core devs 😄 😄

@xavArtley

This comment has been minimized.

Copy link
Contributor

xavArtley commented Feb 1, 2019

I tried to run this code :

from bokeh.io import show
from bokeh.models import TickFormatter
from bokeh.plotting import figure
from bokeh.util.compiler import TypeScript

TS_CODE = """
import {TickFormatter} from "models/formatters/tick_formatter"
import {AxisView} from "models/axes/axis"

export class MyFormatter extends TickFormatter {
    type: "MyFormatter"

    // TickFormatters should implement this method, which accepts a lisst
    // of numbers(ticks) and returns a list of strings
    doFormat(ticks: string[] | number[], _axis_view: AxisView): string[] {
        // format the first tick as- is
        const formatted = [`${ticks[0]}`]
        for (let i = 1, len = ticks.length; i < len; i++) {
            formatted.push(`+${(Number(ticks[i]) - Number(ticks[0])).toPrecision(2)}`)
        }
        return formatted
    }
}
"""


class MyFormatter(TickFormatter):

    __implementation__ = TypeScript(TS_CODE)


p = figure()
p.circle([1, 2, 3, 4, 6], [5, 7, 3, 2, 4])

p.xaxis.formatter = MyFormatter()

show(p)

And I get this error:

    custom_impls = _compile_models(custom_models)
  File "c:\users\xavier\repos\bokeh\bokeh\util\compiler.py", line 615, in _compile_models
    raise CompilationError(compiled.error)
bokeh.util.compiler.CompilationError:
?[91merror?[0m?[90m TS6053: ?[0mFile 'c:/Users/Xavier/Repos/bokeh_custom_ext/Extensions/Ticker/extensions_example_ticking.py:MyFormatter.ts' not found.

If I put the TS_CODE in a separate file everything seems OK

@mattpap

This comment has been minimized.

Copy link
Contributor Author

mattpap commented Feb 1, 2019

Actually this isn't true anymore. In this PR tabs were promoted to a proper layout (under bokeh.models.layotus), though for compatibility you can still import them from widgets.

@mattpap

This comment has been minimized.

Copy link
Contributor Author

mattpap commented Feb 1, 2019

If I put the TS_CODE in a separate file everything seems OK

I guess this is a windows related issue, because otherwise we have examples with inline code that work (CI, locally on linux). Please start an issue for that.

@cutright

This comment has been minimized.

Copy link

cutright commented Feb 1, 2019

I've created a new issue for the layout issues I described above #8614

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment