01-ipywidgets-interactive-plots.py

import solara
import ipywidgets as widgets
import numpy as np
import matplotlib.pyplot as plt

@solara.component
def PlotLeft(alpha, beta, color1, color2):
    fig = plt.figure(figsize=(4, 5))
    xlim, ylim = [-np.pi, np.pi], [-1, 1]
    x = np.linspace(*xlim)
    plt.plot(x, beta*np.sin(x * alpha), label=r'$\beta\sin(\alpha x)$', color=color1)
    plt.plot(x, (1-beta)*np.cos(2*alpha*x), label=r'$(1-\beta)\cos(2\alpha x)$', color=color2)
    plt.xlabel('$x$')
    plt.xlim(xlim)
    plt.ylim(ylim)
    plt.legend()
    plt.show()

@solara.component
def PlotRight(alpha):
    fig = plt.figure(figsize=(4, 5))
    xlim, ylim = [-np.pi, np.pi], [0, 10]
    x = np.linspace(*xlim)
    plt.plot(x, np.exp(x * alpha), label=r'$e^{\alpha x}$')
    plt.xlabel('$x$')
    plt.xlim(xlim)
    plt.ylim(ylim)
    plt.legend()
    plt.show()

alpha = solara.reactive(1.0)
beta = solara.reactive(.5)
color1 = solara.reactive('blue')
color2 = solara.reactive('red')
@solara.component
def Page():
    #solara.Markdown("#Hello World", style="margin:auto;")
    with solara.Column(style="padding:50px;"):
        with solara.Row():
            PlotLeft(alpha.value, beta.value, color1.value, color2.value)
            with solara.Column(style="padding:50px"):
                solara.Markdown("Parameters")
                widgets.FloatSlider.element(min=0, max=2, value=alpha.value, on_value=alpha.set, description='$\\alpha$')
                widgets.FloatSlider.element(min=0, max=1, value=beta.value, on_value=beta.set, continuous_update=False, description='$\\beta$')
                solara.Markdown("Colors")
                widgets.Dropdown.element(options=['blue', 'green', 'red'], value=color1.value, on_value=color1.set,
                                  description=r'$\beta\sin(\alpha x)$')
                widgets.Dropdown.element(options=['red', 'yellow', 'orange'], value=color2.value, on_value=color2.set,
                                  description=r'$(1-\beta)\cos(2\alpha x)$', 
                                  style={'description_width': 'initial'})
            PlotRight(alpha.value)