Maximize option to card

[nghenzi]

In this PR there is the posibility of maximize the card to the viewport height and width.

Some assumptions were done to make this plausible. I hardcoded the rowheight of the rgl grid to 50px and make the grid calculations based in the following diagram.

I spent a lot of time trying to use only functional components, but I was not able yet to do it work. Then I come back to a class component to manage the state of the maximized card.

I found this nice example with angular + bokeh

https://towardsdatascience.com/building-dynamic-dashboards-with-angular-and-bokeh-51668a5367f1

Maybe it is posible to add a right div container to minimize the card but that would be other PR.

Here is the code to test the example

import panel as pn, holoviews as hv, numpy as np
pn.extension()

responsive = pn.template.ReactTemplate(title='React Grid Template', row_height=50)

pn.config.sizing_mode = 'stretch_both'

sli = pn.widgets.FloatSlider(name='Float Slider', start=0, end=3.141, step=0.01, 
                            value=1.57, width = 200, sizing_mode='fixed')
responsive.header.append(sli)

xs = np.linspace(0, np.pi)
freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

@pn.depends(freq=freq, phase=phase)
def sine(freq, phase):
    return hv.Curve((xs, np.sin(xs*freq+phase))).opts(
        responsive=True)

@pn.depends(freq=freq, phase=phase)
def cosine(freq, phase):
    return hv.Curve((xs, np.cos(xs*freq+phase))).opts(
        responsive=True)

@pn.depends(freq=freq, phase=phase)
def tan(freq, phase):
    return hv.Curve((xs, np.tan(xs*freq+phase))).opts(
        responsive=True)

responsive.sidebar.append(freq)
responsive.sidebar.append(phase)

responsive.main[0:10, 0:4] = pn.Card(hv.DynamicMap(sine), title='Sine')
responsive.main[0:10, 4:8] = pn.Card(hv.DynamicMap(cosine), title='Cosine')
responsive.main[0:10, 8:11] = pn.Card(hv.DynamicMap(tan), title='Tan')

pn.serve(responsive, port=5901)

and here it is a gif showing how it works. I testeed in a big monitor and in my 13 inches laptop and it works ok. One problem I see with this aproach is when the grid is done, it is not possible to generalize to different resolution monitors.

[philippjfr]

Can we base64 encode this?

[philippjfr]

And add one to dark.css where the path is white?

[philippjfr]

Looks like a great start but it's not quite ready so won't go into the 0.10.0 release.

[nghenzi]

There is no hurry. I am going to watch the 64 encoding , and make the requested changes.

[nghenzi]

Still figuring out some problems that appear.

I found a hacky way to control the layout from python (using global variables in javascript which maybe it's not good). With something like this and hiding the divs, it is easy "add" and "remove" cards dinamically from python, though it has to be tested yet.

The workaorund is suggested in this SO question

https://stackoverflow.com/questions/31612598/call-a-react-component-method-from-outside

Then including a function in the grid component and making the function global with window.helloComponent = this; in the props

maximize_item_from_python(id){
      const { layouts, resizedWidgets } = this.state;
       console.log("Called from outside", layouts);
      //  const id='1'
       const newState = {...this.state.resizedWidgets};
       const maximized = typeof newState[id] === 'boolean' ? newState[id] : false;
      newState[id] = !maximized;

      this.setState({resizedWidgets: newState,}, () => {
                    window.dispatchEvent(new Event("resize"));          
         });
    } 

it is possible to call to the function from python with a HTML pane

def from_python(e):
    html.object = f""" <script>
    window.helloComponent.maximize_item_from_python({str(int_input.value)});
    console.log('triggering maximize with python code' + {str(np.random.random(1))});
    </script>
    """
    html.param.trigger('object')

Here I added a button and a number input to show the functionality (I have some problems with the css yet because it is a old version of panel).

[nghenzi]

The 64 based icon in light and dark mode are added.

I don't know how to solve the overlap of the maximize icon with the bokeh logo of the toolbar.

[MarcSkovMadsen]

It’s really cool. The first thing I as a user would ask for is an option to save the current layout as the layout to use the next time I open the app. And a way to reset to the default.

[nghenzi]

In the examples of the RGL they save the layou to localstorage of the browser. In this PR the state is conserved, then it will be easy to implement it. The problem is how to implement the way to reset it? Add a button like they do in the examples do not seem a nice solution. Maybe it can be added a method to be called from python.

[nghenzi]

I think this is ready to review @philippjfr .

The only thing to discuss is the superposition with the bokeh logo when the bokeh figure has no title

I can try to look for a smaller icon, for example something like this

The main problem is the space in the top left corner is really tight with the toolbar. I was watching other people using the RGL cards, and they add a top margin to put icons like a normal desktop program.

Pd: sorry for the lots of commits to this PR. Severals are of a previous PR. In the following, I will try to clean this non-wished commits.

[nghenzi]

@MarcSkovMadsen

Watching this talk from the voila people.

https://youtu.be/5DYH1TY7M8s?t=750

They use gridstack as you suggested in other comment. They save the layout inside the metadata of the notebook, or something similar to use the resizable items like a layout constructor. I did not use voila, but i think their api must be different to the panel api.

[MarcSkovMadsen]

@nghenzi . Regarding maximize take a look at awesome-Streamlit.org. Every plot etc. In Streamlit has maximize button automatically.

[nghenzi]

@nghenzi . Regarding maximize take a look at awesome-Streamlit.org. Every plot etc. In Streamlit has maximize button automatically.

@MarcSkovMadsen Nice page the streamlit, but I think the functionality is a little different. In streamlit you maximize to full screen, then you can not change the controls in the sidebar for example. The idea here was after watching all the plots in the dashboard, maybe you want analize one particular plot, then you can maximize to the viewport in the main div to change the controls in the sidebar and perform your analysis. I think more in an analytical functionality, but if you consider the full screen option is more relevant, I think it should be easier implement it. I am going to give it a try.

[nghenzi]

I am closing this for now due it can be done with the full screen api as shown in the gif. I'll make other PR with that functionality, adding an ID to each of the card divs. It is going to be more easy to implement it, it works better and it does not depends on the row height.

[MarcSkovMadsen]

@nghenzi . I did not see you comment about maximize in main div before now. Never thought about that. But you are right that it would be more functional.

[nghenzi]

Yes, it would be much more functional, but there is no really way to get the grid to full height. There is some kind of border according to the rowheight value. If we put something fixed like rowheight=10 maybe it is almost imperceptible. The fullscreen is nice and more easy to get working with the code that now it is in master branch