A tree widget from jsTree

Hello there,

After some vacation I decided to solve another problem I have: an interactive tree widget. This is essential for me as I have a lot of data (and subdatas) to show in the interface.

I searched a bit over the internet and found jsTree, which I liked very much, particularly because it is customizable as I need.


I’ve implemented it in my convoluted way as I wanted it not to feel as a custom widget, but part of panel (and hopefully included through a PR). Be aware that the only thing I know (even if limit as I am not a programmer) is python, I learned to really dislike TypeScript and jQuery.

So…there is a model and a widget, both files named jstree.py. The TypeScript I included as an “__implementation__” because I don’t know how to pre-compile it.

  1. model:jstree.py (4.5 KB) (panel\modulesfolder)

  2. widget:jstree.py (2.2 KB) (panel\widgets folder)

Also, I have changed three other files:

  1. config.py: I added to the _imports:

‘jstree’: ‘panel.models.jstree’

  1. index.ts: I don’t know if it is important or not, but I added

export {jsTreePlot} from “./jstree”

  1. init.py: inside panel/widgets and added

from .jstree import jsTree # noqa

note: I did not create a dist\bundled\jstreeplot folder with tthe js and css files because I am calling it from a CDN, but it is an option run it locally.

I also included a tree.py file with an example. I managed to make the callbacks work, so if you update “value” property with another tree or “show_icons” / “show_dots” with True/False it updates on screen and if you select a node you can get information on that node back to python.
tree.py (1.9 KB)

I’d like to thank @Marc for one of his posts here on custom Bokeh Model which really allowed me to make it work.

I still have a few questions on why somethings exactly as for other widgets/models work and I havd to make it different, andsome other that I included, but I don’t know what it does.

A gif with what i’ve done:

1 Like

Awesome @miliante

Some thoughts.

  1. I have for a long time wanted to create a template or repository that should make it much easier to develop and share custom bokeh/ panel extensions. Maybe it’s time and could be used to share this widget?

  2. I think though that a tree widget is important to have in Panel. Why did you choose this one and which competing widgets are there?

  3. Could you share a code example of using the widget a video or gif? That would help users try it out.


Hello @Marc, I’ve updated the post with a GIF. Hope it helps.

Yes, please share as much as possible. Hopefully other people will implement more options as I don’t have time to implement it and i’d love to have more flexibility with the widgets :wink: I use Panel for work, that is, not development of Panel, but as a GUI for post-processing of my motion routines which are in Python (backend) and I only play with these widgets (frontend) when I have time at home. I am cenrtainly not a fornt-end guy. I hope to be an incentive for other people to continuing to implement more into these (or alternative ones)

I chose this one for the same reasons as the terminal: small, functional, free, simple to implement. I confess I did not do an extensive search for all available options and perhaps it may be more interesting to wait for a more “complete” alternative to actually include in Panel.

1 Like

Hi, do you have any plan to relese a TreeWidget?
Thank you!

1 Like

I have not seen a request no Github. If you would like a Treewidget could you create a request there @davidpasquale ? Thanks.