Updated On : Apr-07,2020 Tags ipytree, ipywidgets

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

 Want to Share Your Views? Have Any Suggestions?

If you want to

  • provide some suggestions on topic
  • share your views
  • include some details in tutorial
  • suggest some new topics on which we should create tutorials/blogs
Please feel free to contact us at coderzcolumn07@gmail.com. We appreciate and value your feedbacks. You can also support us with a small contribution by clicking HERE.