awitree

A simple interface to jstree with AnyWidget that can be used in both Jupyter Notebook and Marimo

Installation

pip install git+https://github.com/srirampc/awitree.git

The environment.yml provides a simple conda environment to create an environment with awitree installed.

Usage

To create a tree, a python dictionary is provided to the constructor with the expected format specified for jstree given in jstree documentation.

# Expected format of the node (there are no required fields)
{
  id          : "string" # will be autogenerated if omitted
  text        : "string" # node text
  icon        : "string" # string for custom
  state       : {
    opened    : bool  # is the node open
    disabled  : bool  # is the node disabled
    selected  : bool  # is the node selected
  },
  children    : []  # array of strings or objects
  li_attr     : {}  # attributes for the generated LI node
  a_attr      : {}  # attributes for the generated A node
}

This python dictionary is passed to the javascript as a JSON object, which is then rendered by jstree.

tree_data = {
    "id": "0",
    "text":"Main Root",
    "state": {"open" : True},
    "children" : [
        {"id": "1", "text" : "Sub Node 1", "children":[]},
        {"id": "2", "text" : "Sub Node 2", "children":[]},
        {"id": "3", "text" : "Sub Node 3", "children":[]},
    ]
}

rtree = awit.Tree(data=tree_data)

See notebooks/example.ipynb for jupyter notebook example and notebooks/marimo_example.py for a marimo example.

Development

Create and manage your own virtual environment:

python -m venv .venv
source .venv/bin/activate
pip install -e ".[dev]"
jupyter lab notebooks/example.ipynb

The widget front-end code bundles it's JavaScript dependencies. After setting up Python, make sure to install these dependencies locally:

npm install

While developing, you can run the following in a separate terminal to automatically rebuild JavaScript as you make changes:

npm run dev