fix Matplotlib Responsiveness and improve reference notebook

[MarcSkovMadsen]

I believe this PR fixes the Matplotlib responsiveness issues reported in #5967. Its really hard to know because there are so many possible combinations of settings. And for example the scale_height, scale_width and scale_both values I've never understood how are expected to work. For me that is a big mystery and I'm not able to understand it from the Panel docs. The same goes for the height_policy and width_policy. I just never use them.

You can confirm manually that it works via

import panel as pn

from matplotlib.figure import Figure


fig = Figure(figsize=(16,4))
fig.set_facecolor("salmon")
ax = fig.add_subplot(111)  
ax.plot(
    [1, 2, 3, 4, 5],
    [10, 8, 6, 4, 2],
)

component = pn.pane.Matplotlib(
    fig,
    height=300,
    format="svg",
    encode=False,
    fixed_aspect=False,
    sizing_mode="stretch_width",
    styles={"border": "1px solid black"},
    stylesheets=["div {border: 1px solid yellow}"]
)

pn.state.location.sync(component, [
    "height",
    "format",
    "encode",
    "fixed_aspect",
    "sizing_mode",
])

settings=pn.WidgetBox(
    pn.widgets.IntSlider.from_param(component.param.height, start=100, end=400, step=25),
    component.param.format, 
    component.param.encode, 
    component.param.fixed_aspect,
    component.param.sizing_mode, 
)
pn.Row(settings, component).servable()

Due to bug #5971 you will have to manually refresh the page every time you change a setting.

Todo

• Add layout examples to Matplotlib reference example notebook
• Generally update Matplotlib reference notebook. Its been a long time since last update and it shows.
• Compare with alternative frameworks documentation and see if somethings missing.

It works - Samples

Comparison to other frameworks

Shiny

Makes the plots width responsive by default and recommends setting a height. Wish we did the same. Its a shame everything is fixed size by default. See https://shiny.posit.co/py/api/ui.output_plot.html#shiny.ui.output_plot

Streamlit

Streamlit is also width responsive by default.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (905cf91) 82.54% compared to head (0e0851c) 84.38%.
Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5973      +/-   ##
==========================================
+ Coverage   82.54%   84.38%   +1.84%     
==========================================
  Files         291      291              
  Lines       43348    43479     +131     
==========================================
+ Hits        35781    36691     +910     
+ Misses       7567     6788     -779     

Flag	Coverage Δ
ui-tests	40.80% <35.29%> (+2.34%)	⬆️
unitexamples-tests	72.48% <100.00%> (+0.33%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[MarcSkovMadsen]

[x] Solved

Ok. There are differences between browsers. Firefox on top. Edge below.

[MarcSkovMadsen]

Changing the height from auto to 100% made both edge and firefox behave well and in the same way.

[MarcSkovMadsen]

It would be nice to get a quick review from @philippjfr because there is a lot of history and a lot possible ways to use this Matplotlib pane.

[MarcSkovMadsen]

This one is ready for review. Don't plan any changes before review.