Finalize Basic Tutorials

[MarcSkovMadsen]

WAITING FOR PHILIPP REVIEW AND GUIDANCE

Closes #6390

Adds the missing content to the basic tutorials

Todo

• React to User Input
  • Draft content proposal
  • Check that it covers what is needed by other sections
  • Philipp to review content and update code to best practice
  • Refactor and reformulate content to make it readable, engaging and easy to digest.
• Reactive Expressions
  • Draft content proposal
  • Check that it covers what is needed by other sections
  • Philipp to review content and update code to best practice
  • Refactor and reformulate content to make it readable, engaging and easy to digest.
• Update Todo App
  • Philipp to provide code for best practice version.
  • Marc to add/ update explanation
• Update Classifier App
  • Philipp to provide code for best practice version
  • Marc to add/ update the explanation.
• Panes: Add note that this is very much a repetition of pn.panel. If it feels too repetitive it can quickly be skimmed. But its there to be able to compare and contrast the two approaches.
• Philipp to get {pyodide} code blocks to render output when build and interactive when run.
• Improve Streaming Dashboard (build_streaming_dashboard.md) to be consistent with other tutorials.
• Convert (tutorial) mp4 videos to iphone compatible mp4 videos
  • Clean up build_animation.md. It includes extra video for demonstrating issue

Related issues

To finish the Todo list above Philipp would have to help fix or workaround the issues below.

• Make ReactiveExpr available in pn.pane namespace #6427
• ReactiveExpr.show_widgets=False raises NotImplementedError in served app #6428
• Add param.watch function/decorator param#806 (comment)
• Button name not updated when using reactive expression #6426
• Add .is_active parameter to reactive expressions param#912
• Let reactive expressions .watch method support async functions param#913

[MarcSkovMadsen]

Should we ask the user to add caching as an exercise?

[MarcSkovMadsen]

Please provide your best practice version of the example in this section Philipp taking into account holoviz/param#806 (comment), #6426 and holoviz/param#912.

[MarcSkovMadsen]

I've requested a preliminary of the content of this PR from @philippjfr . Does this cover the skills we want to teach our basic users? Are the examples best practice? If not please update the code.

Please also guide how we get the issues mentioned fixed or worked around. Thanks.

[MarcSkovMadsen]

We will probably have to update this list once in a while.

It would be really awesome if @sophiamyang would update the 3 Ways to Build a Panel Visualization Dashboard blog post. Main points to update would be

• hvplot.interactive to pn.rx (code below)
• button_type+button_style (as in code below)
• sizing_mode of HoloViews pane (as in code below)
• accent (as in code below)
• the picture showing logos and download numbers. Panel logo is blue number and download numbers much higher.

import panel as pn
import hvplot.pandas

# Load Data
from bokeh.sampledata.autompg import autompg_clean as df

# Make DataFrame Pipeline Interactive
idf = pn.rx(df)

# Define Panel widgets
cylinders = pn.widgets.IntSlider(name='Cylinders', start=4, end=8, step=2)
mfr = pn.widgets.ToggleGroup(
    name='MFR',
    options=['ford', 'chevrolet', 'honda', 'toyota', 'audi'], 
    value=['ford', 'chevrolet', 'honda', 'toyota', 'audi'],
    button_type='primary',
    button_style="outline",
    )
yaxis = pn.widgets.RadioButtonGroup(
    name='Y axis', 
    options=['hp', 'weight'],
    button_type='primary',
    button_style="outline",
)

# Combine pipeline and widgets
rx_pipeline = (
    idf[
        (idf.cyl == cylinders) & 
        (idf.mfr.isin(mfr))
    ]
    .groupby(['origin', 'mpg'])[yaxis].mean()
    .to_frame()
    .reset_index()
    .sort_values(by='mpg')  
    .reset_index(drop=True)
)

# Pipe to hvplot
rx_plot = rx_pipeline.hvplot(x='mpg', y=yaxis, by='origin', color=["#ff6f69", "#ffcc5c", "#88d8b0"], line_width=6, height=400)

# Layout using Template
template = pn.template.FastListTemplate(
    title='Interactive DataFrame Dashboards with hvplot .interactive', 
    sidebar=[cylinders, 'Manufacturers', mfr, 'Y axis' , yaxis],
    main=[pn.pane.HoloViews(rx_plot, sizing_mode="stretch_width")],
    accent="#88d8b0",
)
template.servable()

[philippjfr]

Merging this as is for now and picking it up again tomorrow for final edits.