import ipywidgets as widgets
from ipypopout import PopoutButton

main = widgets.VBox()

# see https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features
# for window_features
popout_button = PopoutButton(main, window_features='popup,width=400,height=600')

slider1 = widgets.IntSlider(value=1)
slider2 = widgets.IntSlider(value=2)
result = widgets.Label()
def update_result(_ignore=None):
    result.value = value=f"Sum of {slider1.value} and {slider2.value} = {slider1.value + slider2.value}"
update_result()

main.children = (slider1, slider2, result, popout_button)
slider1.observe(update_result, "value")
slider2.observe(update_result, "value")

display(main)

import solara
import plotly.express as px
import numpy as np
from ipypopout import PopoutButton


freq = solara.reactive(1)
damping = solara.reactive(0.5)

t = np.arange(0, 100, 0.1)/10

@solara.component
def Page():
    target_model_id = solara.use_reactive("")

    y = np.sin(t * 2 * np.pi * freq.value) * np.exp(-t*damping.value)

    with solara.Column():
        with solara.Card("Controls") as control:
            solara.SliderFloat("Freq", value=freq, min=1, max=10)
            solara.SliderFloat("zeta", value=damping, min=0, max=2)
            if target_model_id.value:
                PopoutButton.element(target_model_id=target_model_id.value, window_features='popup,width=400,height=300')
        fig = px.line(x=t, y=y)
        solara.FigurePlotly(fig)
    # with solara we have to use use_effect + get_widget to get the widget id
    solara.use_effect(lambda: target_model_id.set(solara.get_widget(control)._model_id))
display(Page())