Responsive layout with reflow for screen rotations?

Community Support
8

Right, this would entail new development for sure, which is my suggestion for opening a GH discussion. cc also @Philipp_Rudiger who I believe is also interested in more document-level events.

Edit: I guess for completeness I will mention the terrible option, which is that a Python callback for document init is currently available. Presumably that callback could set some random property value just in order to then trigger a CustomJS callback in the client. I don’t think this is an especially good idea.

1 Like
9

It seems I don’t have permissions to create a discussion. Can you give me permissions? Otherwise, if you can create the discussion I could comment there.

10

You are the second person to report this, I’m really at a loss as to what might be going on. There are no settings I can find related to GH disucssions permissions and GH docs explicity state that “anyone with access to the repository” should be able to post. I guess I will have to open a support ticket with GH about it.

11

@ghomem try now, it was an org setting, not a repo setting (and also “beta”)

1 Like
12

To be more accurate: I do not find a button to create a new discussion. I concluded it would be due to lack of permissions but who knows.

13

here it is:

1 Like
14

Nice app !!

you can check it panel flexbox component, which is compatible with bokeh server

https://panel.holoviz.org/reference/layouts/FlexBox.html#layouts-gallery-flexbox

15

Thank you @nghenzi . Sounds interesting.

After installing panel with pip do I need to run

panel serve ...

instead of

bokeh serve ...

?

Or do I have do to deeper changes in the application?

16

yes, you can run it with both commands, but you need to change your Row and columns by pn.flexbox,

17

I am not sure flexbox does what I am after. I want to keep the current grid layout, with scaling, unless the browser window becomes “vertical”. Or, better said, until a minimum width, for which scaling makes the plots too small, is hit. Like here:

This sounds like a hybrid between flexbox and gridbox, because it is a grid that flexes only after a certain width threshold is hit.

The grid on the app above has a certain layout that follows a certain logic and it makes sense to retain the grid as it is (scaled) until a certain width threshold is hit, below which we accept graceful degradation, i.e., we sacrifice the grid layout for readability because scaling would not longer help.

18

Hi @Bryan ,

As there is no progress on the github discussion yet and I understand such things take time to implement properly, could you please share how to use a python callback for document init?

I would at least run an experiment with this.

Thanks in advance.

19

@ghomem it’s a standard event from bokeh.events that can be used to add a callback with on_event

from bokeh.events import DocumentReady

def callback(evt):
    pass

curdoc().on_event(DocumentReady, callback)
20

Thanks @Bryan.

Then how would that call back allow me to pull the window size from the Javascript world? It would maybe toggle state on a hidden Toggle that was connected to a CustomJS callback, that would in turn invoke the call back that sets the layout?

21

There’s not any especially clean way I can think of. Did someone suggest otherwise? Maybe something like:

  • Python DocumentReady sets some property value just to trigger a CustomJS
  • JavaScript CustomJS reads window size and sets as a property value on some other object
  • Python property change callback uses window size
1 Like
22

Hi @Bryan

I am perfectly aware that no solution is ideal :slight_smile: Just want to check if I was thinking right and from your answer it seems so.

I will test and let you know how it went.

Thanks again.

1 Like
23

Hello,

So here is the progress on this matter:

Click here using your phone:

https://coviz.io/

and compare to the result on a desktop.

This is not perfect but is much better than before. There are absolutely no performance problems on reflowing the layouts like I am doing here:

If we had a window resize event that could do some work after the user finishes resizing the window the situation would be much improved. Any ideas about that?

Thanks for great support.

24

That seems reasonably self-contained so I’d suggest a GitHub Issue.

1 Like
25

Thanks. Here is the issue:

1 Like
26

Hi @Bryan ,

Just wanted to leave you a note about the window size versus reflow topic: the method you provided above is proven to work. It enabled much progress on making the Bokeh app more mobile friendly whereas keeping the python code clean and tidy, and not mixed with the HTML.

We are experimenting with a PWA:

https://coviz.io/pwa/

You will see that there is a funky loading behavior that is caused by the necessity of using the DocumentReady callback hack, instead of having the window size from the beginning. Having the window size at the python side and having access to a window resize event would clean up the situation.

That said, what we are doing now is much better than nothing :slight_smile: It makes a big difference for mobile browsing.

Thanks for the support :slight_smile:

1 Like
27

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.