Is there a way to create a Dynamic Layout Based on user input?

image

Episki on Twitter: “Hi @Panel_org @MarcSkovMadsen, is there a way to create a dynamic layout depending on the user input? Example: “+”/”-" buttons to add/remove a new graph dynamically." / Twitter

Sure.

You can use list like layouts like pane.Column, panel.Row, panel.Accordion, panel.Tabs etc.

image

or use the layout properties of matplotlib, bokeh, holoviews, plotly and update the Panel pane panel.pane.Matplotlib, panel.pane.Bokeh, panel.pane.HoloViews, panel.pane.Plotly etc when the object changes.

image

Here is a Layout Example

import numpy as np
import pandas as pd
import panel as pn
pn.extension(sizing_mode="stretch_width")
pd.options.plotting.backend = "holoviews"


def new_plot():
    ts = pd.Series(np.random.randn(1000), index=pd.date_range("1/1/2000", periods=1000))
    ts = ts.cumsum()
    return ts.plot(title="Plot", height=400, color="#A01346", line_width=5)


# Accordion, Column, Row, Tabs, WidgetBox
container = pn.Column()

def add_plot(*events):
    container.append(new_plot())
add_plot()

add_plot_button = pn.widgets.Button(name="ADD PLOT", button_type="primary")
add_plot_button.on_click(add_plot)

def remove_plot(*events):
    if len(container)>0:
        container.pop(len(container)-1)

remove_plot_button = pn.widgets.Button(name="REMOVE PLOT", button_type="success")
remove_plot_button.on_click(remove_plot)


pn.template.FastListTemplate(
    title="Dynamic Layouts with Panel",
    sidebar = [add_plot_button, remove_plot_button],
    main=[container,]
).servable()
2 Likes