trungleduc/ipyflex

A WYSIWYG layout editor for Jupyter widgets

ipyflex

A WYSIWYG layout editor for Jupyter widgets

Based on the React library FlexLayout, ipyflex allows you to compose the sophisticated dashboard layouts from existing Jupyter widgets without coding. It supports multiple tabs, resizable cards, drag-and-drop layout, save dashboard template to disk, and many more.

Example

Dynamic layout

Widget factory

Configurable header

ipyflex-0.2.0-1.1.mp4

Stock indexes dashboard

Documentation

You can read the documentation following this link: https://ipyflex.readthedocs.io

Installation

You can install using pip:

pip install ipyflex

Or using conda:

conda install -c conda-forge  ipyflex

And if you use jupyterlab <= 2:

mamba install -c conda-forge yarn
jupyter labextension install @jupyter-widgets/jupyterlab-manager ipyflex

Development Installation

Create a dev environment:

conda create -n ipyflex-dev -c conda-forge nodejs yarn python jupyterlab
conda activate ipyflex-dev

Install the python. This will also build the TS package.

pip install -e ".[test, examples]"

When developing your extensions, you need to manually enable your extensions with the notebook / lab frontend. For lab, this is done by the command:

jupyter labextension develop --overwrite .
yarn run build

For classic notebook, you need to run:

jupyter nbextension install --sys-prefix --symlink --overwrite --py ipyflex
jupyter nbextension enable --sys-prefix --py ipyflex

Note that the --symlink flag doesn't work on Windows, so you will here have to run the install command every time that you rebuild your extension. For certain installations you might also need another flag instead of --sys-prefix, but we won't cover the meaning of those flags here.

How to see your changes

Typescript:

If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the widget.

# Watch the source directory in one terminal, automatically rebuilding when needed
yarn run watch
# Run JupyterLab in another terminal
jupyter lab

After a change wait for the build to finish and then refresh your browser and the changes should take effect.

Python:

If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.

Thanks

The following libraries / open-source projects were used or inspired in the development of ipyflex:

• FlexLayout
• CoSApp Lab

ipyflex's Issues

Compare with Lumino?

Very nice! Have you considered using https://github.com/jupyterlab/lumino, too?

Update documentation for `0.2.0`

Enable/disable individually tab set

For now ipyflex only allows users to enable/disable the tab set of a section, we should allow users to have a hybrid section with and without a tab set.

Allow download/upload template from interface

#9

Add auto fit mode to compute the height and width of dashboard automatically.

Add a option to compute the size of the dashboard automatically when it is deployed with Voila

Tab bar hides upon FlexLayout.load_template

We use ipyflex to let our users build their own dashboard. This works great, but at some moments the tab bar, with the '+' button, becomes hidden without any user interaction requesting this behavior. One of such moment is upon FlexLayout.load_template.

Unfortunately, I cannot share the full code we are using. But if needed I can try to create a MWE. Note that just disabling the whole 'hide tab bar' feature would already be a big help.

Ipyflex with Jupyterlite

Hi, Ipyflex is a great library. Thanks for sharing!

I couldn't get Ipyflex to display in Jupyterlite. If possible, please could you show an example of Ipyflex working in Jupyterlite.

Here is the sample code I used that didn't work.

import micropip
await micropip.install("ipyflex")
import ipyflex

ipyflex.FlexLayout(
    header={"title": "Test", "style": {"backgroundColor": "rgb(53 53 53)"}}, # , "buttons":["export","import"]
)

The widget doesn't display. I just get the "Loading widget..." text under the cell.

configuring the layout / flex functionality?

hi there,

excited to use this!

I'm considering a use case for ipyflex as a UI for creating an A4 format output pdf report.

To do so i'd like to use the widget factory, allowing users to add items to the report, and specify that items must be vertically stacked, i.e.:

ideally the user would be able to drag the boxes up and down to change order but wouldn't be able to do anything else...

is this possible?

many thanks

Template with multiple section tabs does not work

Reproduce:

• Create a dashboard with multiple sections
• Drag the sections to create different section-tabset
• Save then reload the template.

Saving of template doesn't work outside of notebook

Thanks for this great package! I noticed that FlexLayout() can be rendered statically, but in that case, the template saving doesn't work (it'd be awesome if it did)

from ipyflex import FlexLayout
import ipywidgets as ipw

widgets = {
    "Widget 1": ipw.HTML("<h1>Widget 1</h1>"),
    "Widget 2": ipw.HTML("<h1>Widget 2</h1>"),
    "Widget 3": ipw.HTML("<h1>Widget 3</h1>"),
    "Widget 4": ipw.HTML("<h1>Widget 4</h1>"),
}
w = FlexLayout(widgets, style={"height": "400px"})

from ipywidgets.embed import embed_minimal_html
embed_minimal_html("index.html", views=[w])

Add configurable header and footer

FlexLayout widget fails to render in voila v0.4 and ipywidgets v8

In voila v0.4, I get the following Javascript error:

Model class 'FlexLayoutModel' from module 'ipyflex' is loaded but can not be instantiated
TypeError: this.widget_manager.display_model is not a function
    at d.initialize (https://cdn.jsdelivr.net/npm/ipyflex@%5E0.2.2/dist/index.js:75:782852)
    at new t.Model (http://localhost:8888/voila/templates/lab/static/voila.js?v=8db1cadbfba43a6dfc2d64128318e696bcb26b1783db1b991faf7404d438cd53200b6c434c4897064c090b68aa1151cd96c6dab50c3e138553365e6b30889172:61:579272)
    at new T (http://localhost:8888/voila/templates/lab/static/voila.js?v=8db1cadbfba43a6dfc2d64128318e696bcb26b1783db1b991faf7404d438cd53200b6c434c4897064c090b68aa1151cd96c6dab50c3e138553365e6b30889172:23:17621)
    at new S (http://localhost:8888/voila/templates/lab/static/voila.js?v=8db1cadbfba43a6dfc2d64128318e696bcb26b1783db1b991faf7404d438cd53200b6c434c4897064c090b68aa1151cd96c6dab50c3e138553365e6b30889172:23:23418)
    at new d (https://cdn.jsdelivr.net/npm/ipyflex@%5E0.2.2/dist/index.js:75:782350)
    at tn._make_model (http://localhost:8888/voila/templates/lab/static/voila.js?v=8db1cadbfba43a6dfc2d64128318e696bcb26b1783db1b991faf7404d438cd53200b6c434c4897064c090b68aa1151cd96c6dab50c3e138553365e6b30889172:458:112234)

In Jupyterlab, the FlexLayout widget renders fine, however.

binder not working

0.2.0 Release Plan

This is an issue for 0.2.0 release planning. Please feel free to submit feature requests you want to have in the next release.

Add the possibility of creating multiple instances of the same widget

Hello! ipyflex does not allow for creating multiple instances of the same widget. At the moment the instances of the same widget are connected. This does not allow for comparing for example the same chart in two different sections.

Compare to Jupyter-Flex

This looks really cool! Can you compare it to https://github.com/danielfrg/jupyter-flex in the docs?

Add `galata` UI tests

Add python api to save and load template.

Issue with loading template with multiple tabs and sections

Hi there,

I'm running into an issue loading a saved template correctly. The template JSON and a notebook with a minimal example is attached. The template I saved had two "Section" (tabs on the bottom) and Section One has one widget box up top and 3 widgets in "Tabs" on the bottom.

[ ---------- Header ---------- ]
[ -------- Widget 1 -------- ]
[Widget 2 | Widget 3 | Widget 4]

|Section One | Section Two |

When the template is loaded with editable=True, you'll only see Widget 1 up top and Widget 2 on the bottom but if you right click on each of them you can "Show Tab Bar" which makes Widgets 3 and 4 available too. But I don't think there's a way to bring Section Two back into view. Is there a way to make sure sure that all of the widget tabs and sections are visible when reloading using a template?

Thanks!!

ipyflex-issue.zip

Release `ipyflex` with ` jupyter_releaser`

https://github.com/jupyter-server/jupyter_releaser

please add to the collection of examples the one corresponding to the first git of readme

Well, not much to add.
That example is a simple one easy to start with playing around.

Thanks.