Updated On : Apr-07,2020 Tags 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


  Support Us to Make a Difference

Thank You for visiting our website. If you like our work, please support us so that we can keep on creating new tutorials/blogs on interesting topics (like AI, ML, Data Science, Python, Digital Marketing, SEO, etc.) that can help people learn new things faster. You can support us by clicking on the Coffee button at the bottom right corner. We would appreciate even if you can give a thumbs-up to our article in the comments section below.

 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 let us know in the comments section below (Guest Comments are allowed). We appreciate and value your feedbacks.



Sunny Solanki  Sunny Solanki