widgetti / ipypopout

Display parts of your ipywidgets or solara app in separate browser windows

Ipypopout

Use Ipypopout to display parts of your ipywidgets or solara app in separate browser windows. This is especially useful for those working with multiple screens.

Works with:

• Jupyter notebook
• Jupyter lab
• Voila (version<0.5)
• Solara (version>=1.22)

Usage

With ipywidgets

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)

ipywidgets-demo-1k.mp4

With Solara

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())

Because Solara creates elements instead of widgets, we have to use the use_effect/get_widget trick to feed the widget ID to the PopoutButton.

solara-demo-notebook2.mp4

Installation

$ pip install ipypopout

API

• PopoutButton
  • constructor arguments:
    • target - ipywidgets.Widget | None: The widget that will be shown in the popout window.
    • target_model_id - str: The widget id (defaults to target._model_id)
    • window_name - str: If a window with the same name is available it will be reused, otherwise a new window is created (defaults to target_model_id). See https://developer.mozilla.org/en-US/docs/Web/API/Window/open for more details.
    • window_features - str: See: https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features

ipypopout's Issues

Use setuptools_scm and generate a ipypopout.__version__ attribute

Motivation: Jdaviz is unable to easily query the installed version of ipypopout via ipypopout.__version__ call as it can with all its other dependencies.

404 on the popup page

I can launch a lab or notebook and display example.ipynb. The IntSlider and the Button are rendered as expected.
(Note, that I had to comment the import ipypopout.sync_patch statement of the first cell : no module ipypopout.sync_patch could be found)

When I click the button, a new browser window appears, but with a 404 error message. This URL could not been resolved : localhost:8888/voila/templates/ipypopout/static/popout.html?kernelid=65140b14-6a46-4586-a700-d30a5033462e&modelid=3bc5eb88a37a417c8843f4fad63fe923&baseurl=/

I thought I should run voila before -> voila example.ipynb returns a jinja2.exceptions.TemplateNotFound: browser-open.html error :(

Using a lab or a notebook, gives the same result.

Any idea please ?

About my setup :

• Python 3.10 virtual environment (venv)
• pip install .
• then jupyter-lab or jupyter notebook
• Below the version for some modules that might be involved :
  ipykernel==6.23.2
  ipython==8.14.0
  ipyvue==1.9.2
  ipyvuetify==1.8.10
  ipywidgets==8.0.6
  Jinja2==3.1.2
  jupyter_client==8.2.0
  jupyter_core==5.3.1
  jupyter_server==2.6.0
  jupyterlab==4.0.2
  jupyterlab-pygments==0.2.2
  jupyterlab-widgets==3.0.7
  jupyterlab_server==2.23.0
  mistune==2.0.5
  nbclassic==1.0.0
  nbclient==0.7.4
  nbconvert==7.5.0
  nbformat==5.9.0
  notebook==6.5.4
  notebook_shim==0.2.3
  Pygments==2.15.1
  requests==2.31.0
  tornado==6.3.2
  traitlets==5.9.0
  voila==0.5.0a4
  widgetsnbextension==4.0.7

Where are the release tags?

How did you make https://pypi.org/project/ipypopout/ releases without tags in this repo?

media placeholder

popout strips out base url when deployed to /voila/

The popout feature in Jdaviz works when voila is deployed to localhost, e.g. "http://localhost:8000". The data-base-url is set to / and the Jdaviz loads fine. However for our production deployments of Jdaviz embedded, the Jdaviz popout feature fails to render properly.

For our deploys, voila is deployed to urls like "http://masttest.stsci.edu/voila". Our base url is /voila. Without the trailing slash, the popout url is https://masttest.stsci.edu/voilavoila/templates/ipypopout/static/popout.html?kernelid=81e1412a-72a2-4cc7-ba8b-2113e611d7d1&modelid=2614b11e26884e799e102313ceb8bad6&baseurl=/voila, which returns a 404 error.

When I ensure a trailing slash such that the base url is /voila/ the popout url is https://masttest.stsci.edu/voila/templates/ipypopout/static/popout.html?kernelid=81e1412a-72a2-4cc7-ba8b-2113e611d7d1&modelid=2614b11e26884e799e102313ceb8bad6&baseurl=/. which fails to find the correct resource and renders internally a 403 or 404 error. The base url is getting stripped back to /, seemingly here https://github.com/mariobuikhuizen/ipypopout/blob/e1603515cf641e42f3781b327ddf9d8206736bf6/ipypopout/popout_button.vue#L43

I can manually edit the popout url to the following, which both render Jdaviz successfully. Either https://masttest.stsci.edu/voila/templates/ipypopout/static/popout.html?kernelid=81e1412a-72a2-4cc7-ba8b-2113e611d7d1&modelid=2614b11e26884e799e102313ceb8bad6&baseurl=/voila/
or
https://masttest.stsci.edu/voila/voila/templates/ipypopout/static/popout.html?kernelid=81e1412a-72a2-4cc7-ba8b-2113e611d7d1&modelid=2614b11e26884e799e102313ceb8bad6&baseurl=/voila/ work ok.

This could be an edge case just for us, but I think there should be some sort of a catch so servers deployed to /voila/ still work correctly . Or is there a manual hack we could do to get this working for us?

solara.rootPath duplicated into popout url

When using solara, the URL opened by ipypopout is currently given by:

ipypopout/ipypopout/popout_button.vue

Lines 45 to 46 in 44dc4a6

	const result = `${host}${baseUrl}${this.popoutPageUrl}` +
	`?kernelid=${this.kernel_id}&modelid=${this.target_model_id}&baseurl=${baseUrl}` + (isDark ? '&dark=true' : '');

with baseUrl given by

ipypopout/ipypopout/popout_button.vue

Lines 33 to 40 in 44dc4a6

	getBaseUrl() {
	const labConfigData = document.getElementById('jupyter-config-data');
	if (labConfigData) {
	/* lab and Voila */
	return JSON.parse(labConfigData.textContent).baseUrl;
	}
	return document.body.dataset.baseUrl
	},

which in solara goes to {{root_path}}/and this.popoutPageUrl = solara.rootPath (= root_path).