Tabs sizing_mode - Can't scale to fit screen

I have tried a all the sizing_mode options in my figure() callout, but when this figure is inserted into a tab the sizing no longer works? I have been trying to override the settings via CSS with no luck. Is there a trick to getting a tabbed plot to fill the screen and adjust dynamically?

Hi beezerlm,

I have a similar use case - various plots in tabs as well as bokeh tables inside the tabs.

As far as I know , tabs are basically broken when it comes to making plots responsive (up to the current .15 release anyway).

I have my bokeh plot (bkroot element) injected into a parent div I’ve created which is responsive. Then I’m manually resizing the various bokeh layout height and width elements and then triggering the bokehJS “resize” event which will create the needed .png.

Here’s how I trigger the redraw with new height and width of the element:
https://groups.google.com/a/continuum.io/forum/m/#!topic/bokeh/_zN-pvdS520

···

On Apr 9, 2018, at 2:31 AM, beezerlm [email protected] wrote:

I have tried a all the sizing_mode options in my figure() callout, but when this figure is inserted into a tab the sizing no longer works? I have been trying to override the settings via CSS with no luck. Is there a trick to getting a tabbed plot to fill the screen and adjust dynamically?

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/13bf7782-a685-4efa-9a1e-53ed463ebf02%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thanks for the reply omearac. Are you implementing this using something like:

export class CustomView extends LayoutDOMView

or is this done by using CustomJS?  I have never implemented javascript in a bokeh plot so I'm a bit confused on how to apply this to the tabs.

<details class='elided'>
<summary title='Show trimmed content'>&#183;&#183;&#183;</summary>

On Monday, April 9, 2018 at 3:30:56 AM UTC-4, omearac wrote:
> Hi beezerlm,
> 

> I have a similar use case - various plots in tabs as well as bokeh tables inside the tabs.

> 

> As far as I know , tabs are basically broken when it comes to making plots responsive (up to the current .15 release anyway).

> 

> I have my bokeh plot (bkroot element) injected into a parent div I’ve created which is responsive. Then I’m manually resizing the  various bokeh layout height and width elements and then triggering the bokehJS “resize” event which will create the needed .png.

> 

> Here’s how I trigger the redraw with new height and width of the element: 
> [https://groups.google.com/a/continuum.io/forum/m/#!topic/bokeh/_zN-pvdS520](https://groups.google.com/a/continuum.io/forum/m/#!topic/bokeh/_zN-pvdS520)

> 

> 
> Sent from my iPhone

> 
> On Apr 9, 2018, at 2:31 AM, beezerlm <[email protected]> wrote:
> 

> > I have tried a all the sizing_mode options in my figure() callout, but when this figure is inserted into a tab the sizing no longer works?  I have been trying to override the settings via CSS with no luck.  Is there a trick to getting a tabbed plot to fill the screen and adjust dynamically?

> > --
> > 
> > You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> > 
> > To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]
> > 
> > To post to this group, send email to [email protected]
> > 
> > To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/13bf7782-a685-4efa-9a1e-53ed463ebf02%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/13bf7782-a685-4efa-9a1e-53ed463ebf02%40continuum.io?utm_medium=email&utm_source=footer).
> > 
> > For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).
> >

</details>

No problem. I’m away from the code right now but I believe if you search through bokehJS there’s a method called somewhere like “__on_open” for a websocket object. In that method I just have something like window.WS=_this

Then in my own JavaScript file which is also loaded (not using any “bokehJS callback”) I access the .WS variable and call the bokeh method “.close”.

If this doesn’t help I can post a snippet tmrw

···

On Apr 9, 2018, at 2:33 PM, beezerlm [email protected] wrote:

Thanks for the reply omearac. Are you implementing this using something like:

export class CustomView extends LayoutDOMView

or is this done by using CustomJS? I have never implemented javascript in a bokeh plot so I’m a bit confused on how to apply this to the tabs.

On Monday, April 9, 2018 at 3:30:56 AM UTC-4, omearac wrote:

Hi beezerlm,

I have a similar use case - various plots in tabs as well as bokeh tables inside the tabs.

As far as I know , tabs are basically broken when it comes to making plots responsive (up to the current .15 release anyway).

I have my bokeh plot (bkroot element) injected into a parent div I’ve created which is responsive. Then I’m manually resizing the various bokeh layout height and width elements and then triggering the bokehJS “resize” event which will create the needed .png.

Here’s how I trigger the redraw with new height and width of the element:
https://groups.google.com/a/continuum.io/forum/m/#!topic/bokeh/_zN-pvdS520

Sent from my iPhone

On Apr 9, 2018, at 2:31 AM, beezerlm [email protected] wrote:

I have tried a all the sizing_mode options in my figure() callout, but when this figure is inserted into a tab the sizing no longer works? I have been trying to override the settings via CSS with no luck. Is there a trick to getting a tabbed plot to fill the screen and adjust dynamically?

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/13bf7782-a685-4efa-9a1e-53ed463ebf02%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/c25ded7e-569a-4cdd-a0bd-98dfb0bb5d1e%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Oh damn sorry. I replied to someone else just before this today about how to manually close the web socket connection haha. Wrong thread.

I’ll post the resize code changes you want tomorrow.

···

On Apr 9, 2018, at 2:33 PM, beezerlm [email protected] wrote:

Thanks for the reply omearac. Are you implementing this using something like:

export class CustomView extends LayoutDOMView

or is this done by using CustomJS? I have never implemented javascript in a bokeh plot so I’m a bit confused on how to apply this to the tabs.

On Monday, April 9, 2018 at 3:30:56 AM UTC-4, omearac wrote:

Hi beezerlm,

I have a similar use case - various plots in tabs as well as bokeh tables inside the tabs.

As far as I know , tabs are basically broken when it comes to making plots responsive (up to the current .15 release anyway).

I have my bokeh plot (bkroot element) injected into a parent div I’ve created which is responsive. Then I’m manually resizing the various bokeh layout height and width elements and then triggering the bokehJS “resize” event which will create the needed .png.

Here’s how I trigger the redraw with new height and width of the element:
https://groups.google.com/a/continuum.io/forum/m/#!topic/bokeh/_zN-pvdS520

Sent from my iPhone

On Apr 9, 2018, at 2:31 AM, beezerlm [email protected] wrote:

I have tried a all the sizing_mode options in my figure() callout, but when this figure is inserted into a tab the sizing no longer works? I have been trying to override the settings via CSS with no luck. Is there a trick to getting a tabbed plot to fill the screen and adjust dynamically?

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/13bf7782-a685-4efa-9a1e-53ed463ebf02%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/c25ded7e-569a-4cdd-a0bd-98dfb0bb5d1e%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.