Hello everyone,
I created my first custom component for a simple and elegant checkbox tree user input.
Itās super useful if you if you would like to improve the user experience when it comes to user inputs with underlying tree like structures.
Check out the documentation on GitHub: streamlit-tree-select
Sexy! Will definitely use
Beautiful! You should definitely add this to the tracker: Streamlit Components - Community Tracker so we donāt lose track of it!
Fanilo
I like this! Will think about where I might be able to use it.
Hi @Schluca - Very useful component and Iām trying to use it with a list of 2,500+ cities arranged in a hierarchy of regions/countries/cities. I want to be able to control selection of leaf city nodes. The default behaviour is multi-select, but I have cases where I require single-select. How can I configure single selection only? Essentially, any previous selection would be removed and the current selection would be checked.
Any ideas, and/or can you add this feature please?
Also, can you please add another (optional) property to the node specification, called metadata, so one can add additional properties to the tree which will be returned in addition to the value. I could shoehorn this meta data into the value string, but it would be neater to have a metadata property.
Many thanks,
Arvindra
Thank you so much!
Hi @asehmi, thank you very much!
Iām not quite sure what you are looking for. Would you like single selection per region or countries? Should the user be able to select one city per country or one per region? Currently it is not implemented but I will have a look into it. On the react-checkbox-tree I found a discussion regarding the topic which might be possible to implement: https://github.com/jakezatecky/react-checkbox-tree/issues/206
I will definitely take a look how I could implement the metadata implementation, but if you have time and ideas feel always free to contribute.
Lucas
Thank you very much! I will definitely add it once I reached Trust Level 1. 
Hi,
If I could allow only one leaf node at a time to be selected, that would be awesome. Hereās an example tree you can use:
[
{
"label": "Americas",
"value": "Americas",
"children": [
{
"label": "United States",
"value": "United States",
"children": [
{
"label": "Boston",
"value": "BOS"
},
{
"label": "Chicago",
"value": "CHI"
},
{
"label": "New York",
"value": "NYC"
},
{
"label": "San Francisco",
"value": "SFO"
},
{
"label": "Seattle",
"value": "SEA"
},
{
"label": "United States - Total",
"value": "USTOT"
}
]
}
]
},
{
"label": "Europe",
"value": "Europe",
"children": [
{
"label": "United Kingdom",
"value": "United Kingdom",
"children": [
{
"label": "Cambridge",
"value": "CMB"
},
{
"label": "London",
"value": "LDN"
},
{
"label": "Oxford",
"value": "OXF"
},
{
"label": "United Kingdom - Total",
"value": "UKTOT"
}
]
}
]
}
]
Having a metadata property isnāt important, as I could put a json string into the value property if necessary.
What would be really useful is to auto-generate an id field on your end to make the nodes unique. Currently, (in my full tree of 2,500+ nodes) I had to fudge the label names of some nodes as they collided. E.g. the Singapore city node label needs to be made different from the Singapore country node label, because they have the same name of course. This would make it simpler to create trees with branches that have different views on the same set of nodes, e.g. viewing economic indicators by country > indicator or by indicator > country.
In summary:
id property to distinguish nodes (user-supplied or generated silently)Thanks,
Arvindra
P.S. I raised a couple of issues on your GitHub repo.
@Schluca - Hi there, Thanks for this component. I raised a couple of issues / feature requests about this component in your GitHub repo. I was wondering if you have a plan to address these, so I can decide what to do next?
Thanks,
Arvindra
@Schluca Thank you for such a great solution! I plan to use it to display a tree on the sidebar for navigation.
Is it possible to configure for single node selection, be it leaf node or parent node?
Based on the singly selected node, I display content in the main section.
@Schluca thanks a lot for this component. I use it in my app currently. Unfortunately, for streamlit-tree-select, the color of .rct-title does not seem to inherit text-color from the theme.
As a consequence, the contrast in the standard dark mode sidebar makes it almost unreadable. Same for the unchecked boxes (.rct-icons-fa4 .rct-icon-uncheck::before)
I tried CSS hack and streamlit.components.v1 to change the color but I failed so farā¦
Maybe, you can fix this bug?
Also maybe @andfanilo has a way in mind to hack this in the meantime (I fail to get the selector rightā¦)
Thanks a lot! Great component!
Hey @Schluca , congratulations for your component! It is really easy to use, and has been extremely useful on a project Iām currently working on.
I wanted to show, for each of the leaves, a total value so the user could know how many of that particular exam we have in the database. The only way I could highlight these values was replacing them (while creating the leafās name) with emoji-structured integer numbers, as in the following image:
However, for numbers with two or more digits, we have a āgapā between the emojis, so itās not so clear that in the above image we have a ā11ā and a ā12ā. I have seen that this space between emojis can be managed with CSS, but that would only work if the leavesā names were structured in markdown.
Could I manage the componentās inner CSS in order to do it? Thanks!!
I have nodes as below where I need user to fill up text if āOthersā were checked. Unfortunately, I have more than one āOthersā and it is not allowed by streamlit. I comment it out to and the input text of Others is display above the tree-select (supposed display below the āTradingā) as shown in the picture below. Is there any way I can display it in correct location?
Secondly, the āService Supplierā although is checked (sub tree under Service Supplier not fully checked), it is not recorded in dict of ācheckedā and only recorded as āexpandedā. It will be a issue as expanded doesnāt mean is checked (as per picture)
nodes = [
{"label": "Material Supplier", "value": "Material Supplier"},
{
"label": "Service Supplier",
"value": "Service Supplier",
"children": [
{"label": "Automation", "value": "Automation"},
{"label": "Engineering", "value": "Engineering"},
{"label": "Logistics", "value": "Logistics"},
{"label": "Management", "value": "Management"},
{"label": "Consulting", "value": "Consulting"},
{"label": "Trading", "value": "Trading"},
{"label":"Others","value": st.text_input(label="Others",key="1")},
],
},
{
"label": "Steel User",
"value": "Steel User",
"children": [
{"label": "Roll Formers", "value": "Roll Formers"},
{"label": "Coil Service Centres", "value": "Coil Service Centres"},
{"label": "Fabricators", "value": "Fabricators"},
#{"label":"Others","value": st.text_input(label="Others",key="2")},
],
},
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.
