WIP adding React Grid Layout Template

[nghenzi]

This pull request is trying to add an easy way to use a draggable and droppable grid in the panel templates. It is based on

https://github.com/STRML/react-grid-layout

The main difference with the other templates is you have to add the position and size of the grid element. Here you have an example

import panel as pn, numpy as np
import holoviews as hv
from panel.template import DarkTheme
from holoviews import opts
pn.extension()

    
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)
cur = hv.DynamicMap(sine)
cur.opts(responsive = True)

tmpl = pn.template.ReactTemplate(title='React Grid Layout Template', theme=DarkTheme)

tmpl.main.append(pn.Row(hv.element.tiles.CartoDark().opts(shared_axes=False,responsive=True), sizing_mode = 'stretch_both'))
tmpl.add_data_grid('grilla1', {'x':0,'y':0,'h':6,'w':4})

tmpl.main.append(pn.Card(cur, title='Sine',sizing_mode = 'stretch_both'))
tmpl.add_data_grid('grilla2', {'x':4,'y':0,'h':6,'w':4})

tmpl.main.append(pn.Row(cur, sizing_mode = 'stretch_both'))
tmpl.add_data_grid('grilla3', {'x':8,'y':0,'h':6,'w':4})

tmpl.main.append(pn.Row(cur, sizing_mode = 'stretch_both'))
tmpl.add_data_grid('grilla4', {'x':0,'y':6,'h':6,'w':4})

tmpl.main.append(pn.Row(cur, sizing_mode = 'stretch_both'))
tmpl.add_data_grid('grilla5', {'x':4,'y':6,'h':6,'w':4})

tmpl.main.append(pn.Row(cur, sizing_mode = 'stretch_both'))
tmpl.add_data_grid('grilla6', {'x':8,'y':6,'h':6,'w':4})

tmpl.sidebar.append(freq)
tmpl.sidebar.append(phase)

tmpl.show()

and here you have how it works.

[MarcSkovMadsen]

@nghenzi . This is such a nice template! Thanks for contributing.

[MarcSkovMadsen]

One question @nghenzi . I can see on the Github page that the cards actually can have a "maximize" button in the upper right corner. Do you know if that can be (easily) done in Panel also?

I've had on my todo list for a long time that I would like to enable maximizing my plots.

[MarcSkovMadsen]

Another question. Is it possible to use the template with just one plot that should be maximized? I guess the x, y and h and w are some relative sizes?

Another question. Would it be possible to extend the template to provide functionality to dynamically add and remove cards? For example if I click a button I add a new cell. Of as the result of a lengthy calculation I might end up with 2 or 3 new plots that I want to display in seperate cards?

[MarcSkovMadsen]

Another question @nghenzi . I've been writing the awesome-panel-extensions guide at https://awesome-panel.readthedocs.io/en/latest/guides/awesome-panel-extensions-guide/index.html.

One of the things I have not yet described is Template extensions. I would like to either link to the code of this template or include it in the docs one day. Would that be ok?

Another thing I would like to do is describe how to create bokeh extensions based on React or Vue. I have never used React so getting started I've not been able to do yet. If you have some time and energy it would be awesome if you could contribute a small example or describe how to do it. You can do so in a post on discourse, contribute and example notebook to the Panel gallery, contribute a widget or Panel to Panel or maybe do a PR to the Awesome Panel Extensions guide.

[MarcSkovMadsen]

One more question. Can you actually fix the layout. So that you can actually use the React grid based for static layouts and layouts that the user can drag+drop or resize?

[philippjfr]

This is looking fabulous. I'm going to have to spend some time playing around here but at first glance I love it!

Can you actually fix the layout. So that you can actually use the React grid based for static layouts and layouts that the user can drag+drop or resize?

That would be fabulous along with the ability to persist the layout. So you could lay things out, export the layout and then freeze it.

[philippjfr]

I suppose my other question is: "Can this grid can automatically reflow based on screen size?", e.g. on a mobile device it shows 1 card per row but on a desktop machine it'll have 3.

[nghenzi]

@MarcSkovMadsen @philippjfr

Thanks for your answers, the idea of showing the template was to discuss the implementation for easy use of the template. I answer below the quoted question

One question @nghenzi . I can see on the Github page that the cards actually can have a "maximize" button in the upper right corner. Do you know if that can be (easily) done in Panel also?

I've had on my todo list for a long time that I would like to enable maximizing my plots.

Yes, I am going to add the maximize button. I think it is easy

Another question. Is it possible to use the template with just one plot that should be maximized? I guess the x, y and h and w are some relative sizes?

The size and position are based in somed parameters inside the template. Now the template has 12 columns with a heigth of 30 px each column. These numbers can be exposed in the initialization of the template

<ResponsiveGridLayout className="layout" 
          breakpoints={% raw %}{{lg: 800,  xs: 240}}{% endraw %}
          cols={% raw %}{{lg: 12, xs: 12}}{% endraw %}
          rowHeight={30} width = {window.screen.width}
          onResize = {this.resize_layout} 

but they are a lot of parameters to configure and the notion of easy-to-use template is lost.

Another question. Would it be possible to extend the template to provide functionality to dynamically add and remove cards? For example if I click a button I add a new cell. Of as the result of a lengthy calculation I might end up with 2 or 3 new plots that I want to display in seperate cards?

Yes, in the examples sections of the react grid layout template they dynamically add and remove elements. I'm not sure how it can be done, but I am going to watch it.

Another question @nghenzi . I've been writing the awesome-panel-extensions guide at https://awesome-panel.readthedocs.io/en/latest/guides/awesome-panel-extensions-guide/index.html.
One of the things I have not yet described is Template extensions. I would like to either link to the code of this template or include it in the docs one day. Would that be ok?

You can add the code or add a link wherever you want. Once the template is fully working, I can write some docs for the template. I love the awesome-panel-extensions-guide, it is helping me a lot to learn to write bokeh extensions.

Another thing I would like to do is describe how to create bokeh extensions based on React or Vue. I have never used React so getting started I've not been able to do yet. If you have some time and energy it would be awesome if you could contribute a small example or describe how to do it. You can do so in a post on discourse, contribute and example notebook to the Panel gallery, contribute a widget or Panel to Panel or maybe do a PR to the Awesome Panel Extensions guide.

I am not an expert in React or Vue, so writing a guide how to use them is out of my scope.

One more question. Can you actually fix the layout. So that you can actually use the React grid based for static layouts and layouts that the user can drag+drop or resize?

You can define additional properties of the container (or card )in the dictionary when you add it. For example

tmpl.main.append(pn.Rowncur, dummy_js , sizing_mode = 'stretch_both'))
tmpl.add_data_grid('grilla6', {'x':8,'y':6,'h':6,'w':4, 'static': 'true'}}

Note the true is a string lowercase. Aditionally minimun and maximun width and height can be fixed. ( minW: 2, maxW: 4 , minH: 2, maxH: 4 )

That would be fabulous along with the ability to persist the layout. So you could lay things out, export the layout and then freeze it.
I suppose my other question is: "Can this grid can automatically reflow based on screen size?", e.g. on a mobile device it shows 1 card per row but on a desktop machine it'll have 3.

The reflow and persistence is the main thing I like of this framework. They have break points and you can save the layout in local storage. I'm working in something similar to the example linked below, but I am still having problem how to reset the layout from python and not from react.

https://strml.github.io/react-grid-layout/examples/8-localstorage-responsive.html

When I have a fully working version of this I am going to add to this PR.

Any other suggestions or comments you have are well accepted and thanks to both of you because I'm learning a lot when using panel (a year ago I only programmed in labview)

[nghenzi]

Here is a gif of the template in default theme.

I will continue working into support responsive design for multiple size screen with the reflow of the card and adding/removing cards as you suggested.

[nghenzi]

I suppose my other question is: "Can this grid can automatically reflow based on screen size?", e.g. on a mobile device it shows 1 card per row but on a desktop machine it'll have 3.

Only changing the configurations of the breakpoints and the numbers of columns

<ResponsiveGridLayout className="layout"
breakpoints={% raw %}{{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}{% endraw %}
cols={% raw %}{{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}{% endraw %}

it seems the framework do some magic and re-arrange the layout.

As you can see, when the window get smaller works ok, but when the window get bigger it does not re-arrange. I need more work yet.

It is related to this issue,
react-grid-layout/react-grid-layout#1222
but i think it can be solved re-defining the layouts props. I Will give a try.

[MarcSkovMadsen]

For me this template is a game changer. It solves at lot of problems at onde: grid layout, mobile, rediger, maximize.

If we you/we can keep it simple and straightfoward to use then its a game changer in my opinion.

If we have to say goodbye to some Advanced feature so be it. an Advanced user Can always create a custom template if needed.

[philippjfr]

This all looks incredible. Let me know what I can help you with here.

[MarcSkovMadsen]

One suggestion. Would it be an idea to change .add_data_grid into something more general in order to support other layouts than the react data grid in the future?

For example .main_configuration.add or .main_layout.add?

FYI. @philippjfr

[MarcSkovMadsen]

"Bug report"

Sometimes when I drag resize the map everything disappears.

[MarcSkovMadsen]

"Bug Report". @nghenzi . The widgets in the side bar in your example do not "stretch_width".

You should just change to

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

[MarcSkovMadsen]

@philippjfr and @kebowen730 . I guess the progress indicator in the upper right is something from the general template.

It looks like this for me

There are two problems. One is the overflow of the bar onto the scrollbar? The other is just that in my personal opinion the progress circle should have a little bit more margin on the right.

[MarcSkovMadsen]

@nghenzi . A lot of times when I drag elements they don't drag or I actually drag to content of the plot. Maybe it is something to get used to. Maybe it is just me that have not yet figured out exactly what triggers the drag or where to click for dragging.

If you can only drag in certain areas I was thinking whether it would be helpful to have a special mouse cursor when the mouse is over that area?

[MarcSkovMadsen]

@nghenzi (and @philippjfr )

In your example the card does not have a nice margin at the bottom.

I tried to solve it by playing with the margin but it did not change anything.

I tried for example

tmpl.main.append(pn.Card(cur, title='Sine',sizing_mode = 'stretch_both', margin=50))

I tried a lot of different hacks without luck.

[MarcSkovMadsen]

@kebowen730 and others

When I have clicked the title link it turns blue and underlined. I believe that today people would just keep it the original color (in this case white) and without the underline.

[MarcSkovMadsen]

@kebowen730 and others

Regarding the sidebar in the dark theme. It would be really, really nice to have something indicating a clear seperation between the sidebar and the main area.

Like for example this example from https://material-ui.com

[MarcSkovMadsen]

@kebowen730 and others

I believe (personal preference?) that the hamburger menu needs a little bit more margin.

And it would also be really awesome if the menu closed when you click outside the sidebar

For inspiration take a look at material-ui.com

[MarcSkovMadsen]

Hi @nghenzi

One more question. Do you/ we know that react grid table is the "best" one to choose. I thinking about user experience, about performance about "bundle size" about responsiveness etc.

There are alternatives I can see like

https://packery.metafizzy.co/
http://dsmorse.github.io/gridster.js/
https://interactjs.io/
https://shopify.github.io/draggable/examples/simple-list.html
https://gridstackjs.com/

For fixed layouts I've found this

http://callmecavs.com/bricks.js/

This one also looks interesting

https://muuri.dev/

[philippjfr]

Thanks @MarcSkovMadsen for the detailed feedback. Most of these are matters of polish and something I'm happy to tackle even after this is merged. The main items I'd like to see addressed before merging this:

• Figuring out the API. I'm not sure I currently understand what add_data_grid is actually doing and how it interacts with main.append
• The various resizing issues should be addressed

I don't have strong opinions about the various grid libraries but I'd love to see someone summarize the differences between the libraries that @MarcSkovMadsen listed.

[nghenzi]

@kebowen730 and others

I believe (personal preference?) that the hamburger menu needs a little bit more margin.

And it would also be really awesome if the menu closed when you click outside the sidebar

For inspiration take a look at material-ui.com

I still working in incorporating your suggestions. Thanks @MarcSkovMadsen and @philippjfr . Today in the night or tomorrow I think I can answer the issues.

https://gridstackjs.com/ seems to have the same funcionality that react grid layout, and may be it is easier to use.

[nghenzi]

"Bug report"

Sometimes when I drag resize the map everything disappears.

I am observing the same thing. When dragging or resizing, the map zooms out. If you observe your image you can see that you have a lot of worlds inside the map. These two functions do the resizing of the bokeh plot when the card resizes.

resize_layout(obj, old_, new_, p, e, element) {
// window.Bokeh.index[new_['i'].split('_')[1]].resize_layout();
console.log(obj)
}

resize_layout_stop(obj, old_, new_, p, e, element) {
setTimeout(function(){
console.log("I am setTimeout", new_['i']);
window.Bokeh.index[new_['i'].split('_')[1]].resize_layout();
},50);

The first function does the resize of bokeh plots while resizing and the second function does the resize when the resize stop. I commented the first function to obtain the same behaviour that the golden layou template, then the crash is leess frecuent, but it is still active.

After that, I tried resizing the tab of a map with the golden layout template and the same error appears.

I think the error is related to some number really big as the error in js console says "ncaught TypeError: coordinates must be finite numbers" . The x and y scale in the tiles are in web mercator, then in a single plot you have numbers like 10 o 100 thousand. After a while looking for, I found an option of min and max zoom out in bokeh tiles model, but I dont know how to use it.

http://docs.bokeh.org/en/latest/docs/reference/models/tiles.html

About the dragging, there is no much space due to the fact that you have the plots. I changed the color of the card to white, you can see that if you press in the top white zone, the dragging is working. Maybe that zone can be bigger.

I am working to add the maximize button. Once I have that button working, a dragging button or dragging zone can be added to make it easy to select the dragging.

[nghenzi]

@nghenzi (and @philippjfr )

In your example the card does not have a nice margin at the bottom.

I tried to solve it by playing with the margin but it did not change anything.

I tried for example

tmpl.main.append(pn.Card(cur, title='Sine',sizing_mode = 'stretch_both', margin=50))

I tried a lot of different hacks without luck.

I try to add a little margin to the card to avoid that, but bokeh do not take it into account. I am searching a solution, but the sizing behaviour is different to common plots.

[philippjfr]

Don't worry about minor tweaks like margins and so on for now. I'll take care of that, I'm really more interested in getting the API in good shape and ensuring that resizing works consistently.

[philippjfr]

These two functions do the resizing of the bokeh plot when the card resizes.

I really wouldn't expect you to have to trigger relayout events on individual plots. It should be sufficient to run global resize events on the window to trigger a relayout:

window.dispatchEvent(new Event("resize"))

[nghenzi]

These two functions do the resizing of the bokeh plot when the card resizes.

I really wouldn't expect you to have to trigger relayout events on individual plots. It should be sufficient to run global resize events on the window to trigger a relayout:

window.dispatchEvent(new Event("resize"))

great !!! it is very much easy because there is no need to keep track of the id of the plot. The same problem with the resizing of the map appears. Here you can see the same problem with the map resizing in golden layout template

About the API, the React grid layout has two different ways of setting the grid properties.

The first one is setting the grid properties in the div containing the plot of the element add to the main section

<div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>   plot or whatever added to the main section </div>

With this the React grid layout make some magic and rearrange the card according to the window width. I have a first protoype working, but in some windows width the card appears in random places.

I need to add the data grid property to use this api. This is the reason of the add_data_grid method, after that with some jinja logic I build the div. Each div with a key is a card. I use this print to see the created template print (tmpl._repr_mimebundle_()[0]['text/html'])

The other api is something like this

   // {lg: layout1, md: layout2, ...}
    const layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout className="layout" layouts={layouts}
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>

In this case, the user can define the breakpoints, the number of columns and the layout for each different device window width

layout = [
      {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
      {i: 'c', x: 4, y: 0, w: 1, h: 2}
    ]

This is a lot of configuration as you have to define a layout of evry card for each different breakpoint that you define, but it can be exposed in python trough jinja variables. I am going to create an example for the two api and you can define wich one you prefer to merge.

The last thing, in the weekends I have more time to work in these things, so sorry if in working days I am late to answer.

[nghenzi]

I found this issue in bokeh tiles

bokeh/bokeh#3034

Where they force the aspect ratio of the map.

[nghenzi]

@nghenzi (and @philippjfr )

In your example the card does not have a nice margin at the bottom.

I tried to solve it by playing with the margin but it did not change anything.

I tried for example

tmpl.main.append(pn.Card(cur, title='Sine',sizing_mode = 'stretch_both', margin=50))

I tried a lot of different hacks without luck.

A work around to this is add a little spacer in a column

tmpl.main.append(pn.Column(pn.Card(cur, title='Sine',sizing_mode = 'stretch_both'),
pn.Spacer(height=10, sizing_mode="stretch_width"),sizing_mode = 'stretch_both'))

[nghenzi]

I recently commit the last version of the grid. Now the config of the layouts is exposed through a a dictionary and a method config_layout. There is no magic to interpolate the layout, you have to define the layout in each breakpoint.

The i key in the layouts properties now it is defined like a integer from 1 (1,2,3 for each element appended to the layout.) . Later I am going to change it to relate with the ID or data-root-id which the embed(root) provides.

Here you have an example

import panel as pn, numpy as np
import holoviews as hv
from panel.template import DarkTheme
from holoviews import opts
pn.extension()

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

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

map = pn.Row(hv.element.tiles.CartoDark().opts(shared_axes=False,
                                               responsive=True),
             sizing_mode = 'stretch_both')

card = pn.Column(pn.Card(cur, title='Sine',sizing_mode = 'stretch_both'), 
                           pn.Spacer(height=10, sizing_mode="stretch_width"),
                 sizing_mode = 'stretch_both')
                 
tmpl = pn.template.ReactTemplate(title='React Grid Layout Template')#, theme=DarkTheme)

tmpl.main.append(card)
tmpl.main.append(pn.Row(cur, sizing_mode = 'stretch_both'))
tmpl.main.append(pn.Column(cur, freq, sizing_mode = 'stretch_both'))
tmpl.main.append(pn.Row(cur, sizing_mode = 'stretch_both'))
tmpl.main.append(pn.Row(cur, sizing_mode = 'stretch_both'))
tmpl.main.append(pn.Row(cur, sizing_mode = 'stretch_both'))

tmpl.sidebar.append(freq)
tmpl.sidebar.append(phase)




layouts = { 'lg': [{'w':4,'h':8,'x':0,'y':0,'i':'1'},
                   {'w':4,'h':8,'x':4,'y':0,'i':'2'},
                   {'w':4,'h':8,'x':0,'y':8,'i':'3'},
                   {'w':4,'h':8,'x':4,'y':8,'i':'4'},
                   {'w':4,'h':8,'x':8,'y':8,'i':'5'},
                   {'w':4,'h':8,'x':8,'y':8,'i':'6'}
                  ],
            'md':[{'w':4,'h':6,'x':0,'y':0,'i':'1'},
                  {'w':4,'h':6,'x':4,'y':0,'i':'2'},
                  {'w':4,'h':6,'x':0,'y':6,'i':'3'},
                  {'w':4,'h':6,'x':4,'y':12,'i':'4'},
                  {'w':4,'h':6,'x':4,'y':6,'i':'5'},
                  {'w':4,'h':6,'x':0,'y':12,'i':'6'}
                 ],
            'sm':[{'w':4,'h':6,'x':0,'y':0,'i':'1'},
                  {'w':4,'h':6,'x':0,'y':6,'i':'2'},
                  {'w':4,'h':6,'x':0,'y':12,'i':'3'},
                  {'w':4,'h':6,'x':0,'y':18,'i':'4'},
                  {'w':4,'h':6,'x':0,'y':24,'i':'5'},
                  {'w':4,'h':6,'x':0,'y':30,'i':'6'}
                 ],
            'xs':[{'w':4,'h':6,'x':0,'y':0,'i':'1'},
                  {'w':4,'h':6,'x':0,'y':6,'i':'2'},
                  {'w':4,'h':6,'x':0,'y':12,'i':'3'},
                  {'w':4,'h':6,'x':0,'y':24,'i':'4'},
                  {'w':4,'h':6,'x':0,'y':18,'i':'5'},
                  {'w':4,'h':6,'x':0,'y':30,'i':'6'}
                 ],
           'xxs':[{'w':2,'h':6,'x':0,'y':0,'i':'1'},
                  {'w':2,'h':6,'x':0,'y':6,'i':'2'},
                  {'w':2,'h':6,'x':0,'y':12,'i':'3'},
                  {'w':2,'h':6,'x':0,'y':24,'i':'4'},
                  {'w':2,'h':6,'x':0,'y':18,'i':'5'},
                  {'w':2,'h':6,'x':0,'y':30,'i':'6'}
                 ]
          }

breakpoints = {'lg': 1200, 'md': 996, 'sm': 768, 'xs': 480, 'xxs': 0}

cols = {'lg': 12, 'md': 10, 'sm': 6, 'xs': 4, 'xxs': 2}

rowHeight = 30

tmpl.config_layout(layouts, breakpoints,cols,rowHeight)

tmpl.show()

Here you have it working

You can define less breakpoints, but you should supply at least one breakpoint via the layouts property.

In the layouts properties there is an option to define the card static or dynamic, but I could not get it working, due to the difference in the True from python and the true bolean in jsx.

The To Do list is

• Solve the problem with tiles (the overfloat of the scale commented above)
• make the static properties works
• add maximize button (it was not so easy)
• add/remove cards (I see that the people does it, but I still do not know the way to rerender the layout)

I

[philippjfr]

Solve the problem with tiles (the overfloat of the scale commented above)

This is definitely an unrelated problem and I would not try to solve it here.

add maximize button (it was not so easy)

I'd be okay with merging it without this but it's definitely a nice to have.

[nghenzi]

Solve the problem with tiles (the overfloat of the scale commented above)

This is definitely an unrelated problem and I would not try to solve it here.

add maximize button (it was not so easy)

I'd be okay with merging it without this but it's definitely a nice to have.

Ok. Great if you merge it ! let me know if something else is necessary

When I found the way with the maximize button I'll make other PR.

[philippjfr]

Brilliant, could you just resolve the linting issues, it's just a few unused import

./panel/template/__init__.py:7:1: F401 '.react.ReactTemplate' imported but unused
./panel/template/react/__init__.py:11:1: F401 '...layout.ListLike' imported but unused
./panel/template/react/__init__.py:14:1: F401 'random' imported but unused
./panel/template/react/__init__.py:15:1: F401 'string' imported but unused

For the first one simple add # noqa after the ReactTemplate import.

[nghenzi]

Done !

[philippjfr]

Could you also just clean up the leftover comments and log statements here?

[nghenzi]

sorry, I'm not used to community programming

[philippjfr]

No worries, happens to all of us. This is an amazing first contribution to a project!

[codecov]

Codecov Report

Merging #1530 into master will decrease coverage by 0.38%.
The diff coverage is 59.63%.

@@            Coverage Diff             @@
##           master    #1530      +/-   ##
==========================================
- Coverage   86.07%   85.69%   -0.39%     
==========================================
  Files         141      146       +5     
  Lines       15640    16069     +429     
==========================================
+ Hits        13462    13770     +308     
- Misses       2178     2299     +121     

Impacted Files	Coverage Δ
panel/auth.py	34.24% <0.00%> (-0.41%)	⬇️
setup.py	0.00% <ø> (ø)
panel/io/location.py	81.44% <16.66%> (-10.67%)	⬇️
panel/command/serve.py	19.10% <25.00%> (+1.76%)	⬆️
panel/io/rest.py	26.96% <26.96%> (ø)
panel/io/state.py	46.62% <32.50%> (-10.26%)	⬇️
panel/io/callbacks.py	29.41% <33.33%> (ø)
panel/reactive.py	85.36% <50.00%> (-0.29%)	⬇️
panel/template/react/__init__.py	76.47% <76.47%> (ø)
panel/template/base.py	72.62% <77.27%> (+14.84%)	⬆️
... and 30 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c028511...bdaff5f. Read the comment docs.

[philippjfr]

Will merge and start improving it in a new PR.

[philippjfr]

Thanks so much for this contribution @nghenzi!