Share @ LinkedIn Facebook  ipytree, ipywidgets
ipytree - Interactive Tree Widget in Jupyter Notebook [Python]

Tree Widget in Jupyter Notebook using ipytree

ipytree provides easy to use interface to visualize tree-like data structure. We can also link it with ipywidgets widgets with ipytree tree widget. We'll try to explore it further in this tutorial.

Installation

conda install -c conda-forge ipytree

Basics

We'll start creating a basic tree and displaying it. We'll explain the basic process to add nodes and remove them below.

In [1]:
from ipytree import Tree, Node
In [ ]:
tree=Tree()

tree.add_node(Node("Node1"))
tree.add_node(Node("Node2"))
tree.add_node(Node("Node3"))

tree

Tree Widget in Jupyter Notebook using ipytree

In [ ]:
tree2  = Tree()

node1 = Node("Node1", disabled=True)
tree2.add_node(node1)
tree2.add_node(Node("Node2"))
tree2.add_node(Node("Node3", [Node("Node4"), Node("Node5")]))

tree2

Tree Widget in Jupyter Notebook using ipytree

In [4]:
tree2.nodes
Out[4]:
(Node(disabled=True, name='Node1'),
 Node(name='Node2'),
 Node(name='Node3', nodes=(Node(name='Node4'), Node(name='Node5'))))
In [ ]:
tree2.remove_node(node1)

tree2

Tree Widget in Jupyter Notebook using ipytree

In [6]:
tree2.selected_nodes
Out[6]:
()

Linking Widgets with Tree Nodes

We can also link tree Node with ipywidget widgets as well. We'll explain below with simple example about how to link Node with Text widget.

In [7]:
from ipywidgets import Text, jslink, link, HBox, VBox
In [ ]:
node1 = Node("Node1")
node2 = Node("Node2")

text1 = Text(node1.name)
text2 = Text(node2.name)

jslink((node1, "name"), (text1, "value"))
jslink((node2, "name"), (text2, "value"))

tree3 = Tree()
tree3.add_node(node1)
tree3.add_node(node2)
tree3.add_node(Node("Node3"))

HBox(children=[ VBox(children = [text1, text2]),tree3])

Tree Widget in Jupyter Notebook using ipytree

Handling Events

We can also catch events on each node when node is clicked. We have same observe() which was available with ipywidgets widgets as well to capture events and then perform necessary actions based on click. We are explaining below it's use with simple example which change name of node when clicked on it and when unselected.

In [ ]:
tree4  = Tree()

node1 = Node("Node1")

tree4.add_node(node1)
tree4.add_node(Node("Node2"))
tree4.add_node(Node("Node3", [Node("Node4"), Node("Node5")]))


def handle_click(event):
    event['owner'].name = 'Selected' if event['new'] else 'Not Selected'

node1.observe(handle_click, 'selected')
node1.selected = True

tree4

Tree Widget in Jupyter Notebook using ipytree

Node Styling

We have attributes available to style nodes as well according to our need. We can change node color using icon_style attribute and change node icon using icon attribute.

In [ ]:
tree5 = Tree()

tree5.add_node(Node("root", icon="archive", icon_style="warning"))
tree5.add_node(Node("media", icon="info", icon_style="info"))
tree5.add_node(Node("local", icon="warning", icon_style="success"))
tree5.add_node(Node("home", [Node("Desktop", [Node("File1", icon="copy", icon_style="warning"), Node("File2", icon="plus", icon_style="success")], icon="save", icon_style="info"), Node("Documents", icon="cut", icon_style="danger")], icon="home", icon_style="success"))

tree5

Tree Widget in Jupyter Notebook using ipytree

In [ ]:
tree6  = Tree()

node1 = Node("Node1", icon_style="success")

tree6.add_node(node1)
tree6.add_node(Node("Node2", icon_style="success", icon="leaf"))
tree6.add_node(Node("Node3", [Node("Node4",icon_style="success"), Node("Node5",icon_style="success")], icon_style="success"))


def handle_click(event):
    event['owner'].icon = "info"  if event['new'] else 'warning'

node1.observe(handle_click, 'selected')

tree6

Tree Widget in Jupyter Notebook using ipytree

This concludes our small tutorial on Tree widget available to use in jupyter notebook using ipytree. Please feel free to let us know your views.

References


Sunny Solanki  Sunny Solanki