# streamlit tree independent components
Component is React component designed to render a hierarchical tree view with checkboxes, integrated with Streamlit for use within Streamlit applications. It allows users to navigate and select items in a nested structure, with customizable icons and state management features.
## Features
Hierarchical Tree Structure:
Renders a nested tree structure using TreeView and TreeItem from Material-UI.
Nodes can have multiple child nodes, creating a multi-level hierarchy.
Checkbox Selection:
## Each node includes a checkbox for selection.
The component manages the selection state, ensuring it reflects the user's choices.
Node Icon Customization:
> Nodes can display different icons based on their type **(None, folder, settings, document, or a default file icon)**.
### Icons are determined using the determineIcon function.
> Disabled Nodes: Nodes can be marked as disabled using the disable property.
> Disabled nodes are visually distinct (grayed out) and cannot be selected.
> The component skips these nodes when managing state changes and rendering.
> Parent-Child Relationship Management:
Includes functions (getChildById and findParentById) to manage selection states across parent and child nodes.
### Ensures consistent selection/deselection of parent and child nodes.
> State Management: Manages the state using selected (to track selected nodes) and setSelected.
> State updates occur whenever a user interacts with the component.
### Integration with Streamlit:
Uses StreamlitComponentBase and the Streamlit API for seamless integration with Streamlit apps.
Sends updated state back to the Streamlit environment for dynamic interactions.
Recursive Rendering:
> The renderTree method handles recursive rendering of the tree structure, ensuring all child nodes are displayed correctly.
> Expandable Nodes: Includes icons for expanding (ExpandMoreIcon) and collapsing (ChevronRightIcon) nodes, enhancing navigation through the tree.
## Installation instructions
```sh
pip pip install -i streamlit-tree-independent-components
```
## Usage instructions
```
import streamlit as st
from streamlit_tree_independent_components import tree_independent_components
st.subheader("Component with input args")
treeItems = {
"id":"0",
"name":"Project Dashboard",
"icon":"",
"disable":False,
"children":[
{
"id":"1",
"name":"Technology Expense Summary",
"icon":"",
"disable":False,
"children":[
{
"id":"2",
"name":"Cost Efficiency Analysis",
"icon":"",
"disable":False,
"children":[
{
"id":"3",
"name":"Financial Data Preparation",
"icon":"",
"disable":False
},
{
"id":"4",
"name":"Database Operations Review",
"icon":"",
"disable":False,
"children":[
{
"id":"5",
"name":"Data Entry for Operations",
"icon":"",
"disable":False,
"children":[
{
"id":"6",
"name":"User Data Extension",
"icon":"",
"disable":False,
"children":[
{
"id":"7",
"name":"Data Enhancement Process",
"icon":"",
"disable":False,
"children":[
{
"id":"8",
"name":"Business Analysis Report",
"icon":"",
"disable":False
},
{
"id":"9",
"name":"Performance Overview",
"icon":"",
"disable":False,
"children":[
{
"id":"10",
"name":"Manual Input for Performance",
"icon":"",
"disable":False
},
{
"id":"11",
"name":"Post-Report Evaluation Post-Report Evaluation Post-Report Evaluation Post-Report Evaluation Post-Report Evaluation Post-Report Evaluation Post-Report Evaluation",
"icon":"",
"disable": False
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
checkItems = ["0","1","2","3","4","5","6","7","9","8"]
if "change" not in st.session_state:
st.session_state["change"] = checkItems
if "i" not in st.session_state:
st.session_state["i"] = 0
if "disable" not in st.session_state:
st.session_state["disable"] = False
if "single_mode" not in st.session_state:
st.session_state["single_mode"] = False
if "show_select_mode" not in st.session_state:
st.session_state["show_select_mode"] = False
change = st.button("Select index from 0 to 9")
if change:
st.session_state["change"] = ["0", "1", "2", "3", "4", "5", "6", "7", "9", "8"]
change2 = st.button("Deselect all")
if change2:
st.session_state["change"] = []
disable_toggle = st.button("Toggle Treeview View Enable/Disable")
if disable_toggle:
st.session_state["disable"] = not st.session_state["disable"]
st.warning(f"Treeview disable! Current set: {st.session_state['disable']}")
single_mode = st.button("Toggle Single Select True/False")
if single_mode:
st.session_state["single_mode"] = not st.session_state["single_mode"]
st.warning(f"Treeview select_mode ! Current set: {st.session_state['single_mode']}")
show_select_mode = st.button("Toggle To Show Select Mode")
if show_select_mode:
st.session_state["show_select_mode"] = not st.session_state["show_select_mode"]
result = tree_independent_components(treeItems, checkItems=st.session_state["change"],disable=st.session_state['disable'], single_mode=st.session_state["single_mode"],show_select_mode=st.session_state["show_select_mode"], x_scroll=True, y_scroll=True, x_scroll_width=40, frameHeight=20, border=True)
st.warning(result)
try:
st.write(sorted(result["setSelected"], key=int))
#st.session_state["change"] = sorted(result["setSelected"], key=int)
except:
pass
```
Raw data
{
"_id": null,
"home_page": "https://github.com/SGTANYIHAO",
"name": "streamlit-tree-independent-components",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": null,
"keywords": null,
"author": "TAN YI HAO",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/ff/e5/a31085eef152d46d34a78c8ce78f5fc8cc0676bb65552ad58577258813d8/streamlit_tree_independent_components-0.3.1.tar.gz",
"platform": null,
"description": "# streamlit tree independent components\r\n\r\n\r\n\r\nComponent is React component designed to render a hierarchical tree view with checkboxes, integrated with Streamlit for use within Streamlit applications. It allows users to navigate and select items in a nested structure, with customizable icons and state management features.\r\n\r\n## Features\r\n\r\nHierarchical Tree Structure:\r\n\r\nRenders a nested tree structure using TreeView and TreeItem from Material-UI.\r\nNodes can have multiple child nodes, creating a multi-level hierarchy.\r\nCheckbox Selection:\r\n\r\n## Each node includes a checkbox for selection.\r\n\r\nThe component manages the selection state, ensuring it reflects the user's choices.\r\nNode Icon Customization:\r\n\r\n> Nodes can display different icons based on their type **(None, folder, settings, document, or a default file icon)**.\r\n\r\n### Icons are determined using the determineIcon function.\r\n\r\n> Disabled Nodes: Nodes can be marked as disabled using the disable property.\r\n> Disabled nodes are visually distinct (grayed out) and cannot be selected.\r\n> The component skips these nodes when managing state changes and rendering.\r\n> Parent-Child Relationship Management:\r\n\r\nIncludes functions (getChildById and findParentById) to manage selection states across parent and child nodes.\r\n\r\n### Ensures consistent selection/deselection of parent and child nodes.\r\n\r\n> State Management: Manages the state using selected (to track selected nodes) and setSelected.\r\n> State updates occur whenever a user interacts with the component.\r\n\r\n### Integration with Streamlit:\r\n\r\nUses StreamlitComponentBase and the Streamlit API for seamless integration with Streamlit apps.\r\nSends updated state back to the Streamlit environment for dynamic interactions.\r\nRecursive Rendering:\r\n\r\n> The renderTree method handles recursive rendering of the tree structure, ensuring all child nodes are displayed correctly.\r\n\r\n> Expandable Nodes: Includes icons for expanding (ExpandMoreIcon) and collapsing (ChevronRightIcon) nodes, enhancing navigation through the tree.\r\n\r\n## Installation instructions\r\n\r\n```sh\r\npip pip install -i streamlit-tree-independent-components\r\n```\r\n\r\n## Usage instructions\r\n\r\n```\r\nimport streamlit as st\r\nfrom streamlit_tree_independent_components import tree_independent_components\r\n\r\n\r\nst.subheader(\"Component with input args\")\r\n\r\n\r\ntreeItems = {\r\n \"id\":\"0\",\r\n \"name\":\"Project Dashboard\",\r\n \"icon\":\"\",\r\n \"disable\":False,\r\n \"children\":[\r\n {\r\n \"id\":\"1\",\r\n \"name\":\"Technology Expense Summary\",\r\n \"icon\":\"\",\r\n \"disable\":False,\r\n \"children\":[\r\n {\r\n \"id\":\"2\",\r\n \"name\":\"Cost Efficiency Analysis\",\r\n \"icon\":\"\",\r\n \"disable\":False,\r\n \"children\":[\r\n {\r\n \"id\":\"3\",\r\n \"name\":\"Financial Data Preparation\",\r\n \"icon\":\"\",\r\n \"disable\":False\r\n },\r\n {\r\n \"id\":\"4\",\r\n \"name\":\"Database Operations Review\",\r\n \"icon\":\"\",\r\n \"disable\":False,\r\n \"children\":[\r\n {\r\n \"id\":\"5\",\r\n \"name\":\"Data Entry for Operations\",\r\n \"icon\":\"\",\r\n \"disable\":False,\r\n \"children\":[\r\n {\r\n \"id\":\"6\",\r\n \"name\":\"User Data Extension\",\r\n \"icon\":\"\",\r\n \"disable\":False,\r\n \"children\":[\r\n {\r\n \"id\":\"7\",\r\n \"name\":\"Data Enhancement Process\",\r\n \"icon\":\"\",\r\n \"disable\":False,\r\n \"children\":[\r\n {\r\n \"id\":\"8\",\r\n \"name\":\"Business Analysis Report\",\r\n \"icon\":\"\",\r\n \"disable\":False\r\n },\r\n {\r\n \"id\":\"9\",\r\n \"name\":\"Performance Overview\",\r\n \"icon\":\"\",\r\n \"disable\":False,\r\n \"children\":[\r\n {\r\n \"id\":\"10\",\r\n \"name\":\"Manual Input for Performance\",\r\n \"icon\":\"\",\r\n \"disable\":False\r\n },\r\n {\r\n \"id\":\"11\",\r\n \"name\":\"Post-Report Evaluation Post-Report Evaluation Post-Report Evaluation Post-Report Evaluation Post-Report Evaluation Post-Report Evaluation Post-Report Evaluation\",\r\n \"icon\":\"\",\r\n \"disable\": False\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n}\r\n\r\ncheckItems = [\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"9\",\"8\"]\r\nif \"change\" not in st.session_state:\r\n st.session_state[\"change\"] = checkItems\r\nif \"i\" not in st.session_state:\r\n st.session_state[\"i\"] = 0\r\nif \"disable\" not in st.session_state:\r\n st.session_state[\"disable\"] = False\r\nif \"single_mode\" not in st.session_state:\r\n st.session_state[\"single_mode\"] = False\r\nif \"show_select_mode\" not in st.session_state:\r\n st.session_state[\"show_select_mode\"] = False\r\n\r\nchange = st.button(\"Select index from 0 to 9\")\r\nif change:\r\n st.session_state[\"change\"] = [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"9\", \"8\"]\r\n\r\nchange2 = st.button(\"Deselect all\")\r\nif change2:\r\n st.session_state[\"change\"] = []\r\n\r\ndisable_toggle = st.button(\"Toggle Treeview View Enable/Disable\")\r\nif disable_toggle:\r\n st.session_state[\"disable\"] = not st.session_state[\"disable\"]\r\n\r\nst.warning(f\"Treeview disable! Current set: {st.session_state['disable']}\")\r\n\r\nsingle_mode = st.button(\"Toggle Single Select True/False\")\r\nif single_mode:\r\n st.session_state[\"single_mode\"] = not st.session_state[\"single_mode\"]\r\n\r\nst.warning(f\"Treeview select_mode ! Current set: {st.session_state['single_mode']}\")\r\n\r\nshow_select_mode = st.button(\"Toggle To Show Select Mode\")\r\nif show_select_mode:\r\n st.session_state[\"show_select_mode\"] = not st.session_state[\"show_select_mode\"]\r\n\r\nresult = tree_independent_components(treeItems, checkItems=st.session_state[\"change\"],disable=st.session_state['disable'], single_mode=st.session_state[\"single_mode\"],show_select_mode=st.session_state[\"show_select_mode\"], x_scroll=True, y_scroll=True, x_scroll_width=40, frameHeight=20, border=True)\r\nst.warning(result)\r\ntry:\r\n st.write(sorted(result[\"setSelected\"], key=int))\r\n #st.session_state[\"change\"] = sorted(result[\"setSelected\"], key=int)\r\nexcept:\r\n pass\r\n\r\n\r\n```\r\n",
"bugtrack_url": null,
"license": null,
"summary": null,
"version": "0.3.1",
"project_urls": {
"Homepage": "https://github.com/SGTANYIHAO"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "84fb235a754dfd6297531cbf1b65a1dde9348fd29002b05176828dbbed37fd62",
"md5": "979a4e9e7d4a47beb45df959e39632a8",
"sha256": "2ed852a0a54dc9b91c45c4cab080246bc230dda0f495b1ee267e6720eda82bd1"
},
"downloads": -1,
"filename": "streamlit_tree_independent_components-0.3.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "979a4e9e7d4a47beb45df959e39632a8",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 3409400,
"upload_time": "2024-10-11T07:53:46",
"upload_time_iso_8601": "2024-10-11T07:53:46.273878Z",
"url": "https://files.pythonhosted.org/packages/84/fb/235a754dfd6297531cbf1b65a1dde9348fd29002b05176828dbbed37fd62/streamlit_tree_independent_components-0.3.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "ffe5a31085eef152d46d34a78c8ce78f5fc8cc0676bb65552ad58577258813d8",
"md5": "c05ef2a6fb4fd46cab8a8657536602c7",
"sha256": "6769bb0d96019c8d525dfc0bf8e8e3bed7dd01a53a55866d72e99dc3690d677b"
},
"downloads": -1,
"filename": "streamlit_tree_independent_components-0.3.1.tar.gz",
"has_sig": false,
"md5_digest": "c05ef2a6fb4fd46cab8a8657536602c7",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 713626,
"upload_time": "2024-10-11T07:53:48",
"upload_time_iso_8601": "2024-10-11T07:53:48.958297Z",
"url": "https://files.pythonhosted.org/packages/ff/e5/a31085eef152d46d34a78c8ce78f5fc8cc0676bb65552ad58577258813d8/streamlit_tree_independent_components-0.3.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-10-11 07:53:48",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "streamlit-tree-independent-components"
}
JSON