Tree Anatomy and User Interface

This in-depth article will guide you on the different parts of the Tree. It also shows a tutorial on its interface, navigation, and other features.

This guide comprehensively explains the Tree of Knowledge's anatomy, features, and user interface to help users navigate it.

We highly recommend reading "How to Use the Tree of Knowledge?" before proceeding.

Anatomy

The application has two parts: the Tree itself and the sidebar.

The Tree

The Tree contains the network of ideas. It follows a tree data structure consisting of nodes (the circular objects) and branches (the lines connecting nodes).

The nodes represent an idea or concept. These are carefully structured so that ideas flow from one idea to another. It will start from one node called the "root," which is at the Tree's center, and then other ideas will stem from it.

Consider one node. Relative to this, there are several terms to take note:

  1. Parent - the node above it
  2. Siblings - nodes of the same level
  3. Children - nodes that come out of it

Sidebar

Sidebar

The sidebar contains six functions:

  1. Search Function - contains a search bar where you can type a topic to see its location in the Tree. While typing, a search box will show you relevant results. Clicking any item in the results box will lead you to that node.
  2. Index Navigation - contains a link to the Index page showing all nodes in a list view.
  3. Node Card - contains information about the node or post, such as title, brief description, category, subcategory, topic, sibling order, and post types. Access the post by clicking on the "Read More" button.
  4. Clear Button - button to clear any selected node in the Tree
  5. Tree Settings - contains settings manipulating the Tree. You can use it (1) to filter the Tree so it will show only specific nodes belonging to the same category, (2) to color code nodes according to category or topic, and (3) to show connections. You can hover the mouse or click on tooltips ("?") for more information on these features.
  6. Resources - contains links that help you navigate or understand the Tree.

In the mobile view, the sidebar UI is different. 

Mobile view
  • The Node Card is at the bottom of the screen, 
  • The Search Function is at the top of the screen, 
  • The Clear Button is just below the search bar, 

You can access other functions by pressing the gear icon on the upper right.

Navigation

To pan across the Tree, click on any point and drag to the direction you want to go.

You can use the navigation buttons to help you go around the Tree.

  1. Zoom In - Button to zoom in on the Tree
  2. Zoom Out - Button to zoom out of the Tree
  3. Center to Root - Button to return to the "Root" node, the center of the Tree.

In mobile view, use standard touch gestures like on any smartphone or tablet to pan, zoom in, or zoom out.

Tracks

Tracks

Tracks are topics composed of multiple nodes. 

The currently displayed track is on the bottom-right part of the screen. It consists of the track name, its edition, and a progress bar highlighting your progress relative to that track. The current track will encircle the nodes belonging to it.

If you master the encircled nodes, you will progress in that track. Getting a 100% progress will allow you to obtain a certificate for the active track. To download it, click on the button just above the currently selected track. Learn more about this feature in "Mastery."

Clicking on the current track will reveal a box containing other track items. If you click on any track item on the box, it will change the current track displayed on the screen and the encircled nodes.

Additional Features

One helpful feature of the Tree of Knowledge is to see how one topic correlates with another idea in another discipline. For example, you can connect Calculus in Mathematics to different concepts in Engineering. You can check on "See Connections" on the Tree Settings to show these links.

Created On
February 9, 2024
Updated On
February 17, 2024
Contributors

Edgar Christian Dirige

Founder

References
Revision
1.00
Got some questions? Something wrong? Contact us
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.