New Component: Tree Select

[Tian]

Hello everyone,

I wanted to create my first Streamlit Component and after some trial and error I decided to create a Tree Selector Component.

For this I took the TreeSelect Component from Ant Desing and made it usable for Streamlit (TreeSelect - Ant Design).

Hopefully someone can do something with it - I’m also looking forward to feedback.

It’s a lot of fun to use Streamlit - many thanks for creating such an aweseome library!

GitHub: GitHub - flucas96/st_ant_tree: A Streamlit implementation of the Ant Design Tree Component (https://ant.design/components/tree-select/).
PyPI: st-ant-tree · PyPI
Example app: https://flucas96-streamlit-tree-select-example-app-s0vkjx.streamlit.app/

Example:

[bodacious-bill]

This is awesome! I’ve been wanting something like this for a long time!

[alex6]

Hey there,

Thanks for this – it has been very useful.

I noticed I think this no longer works with the latest Streamlit 1.36.0 update. When I select a new leaf I get
Type Error: ‘str’ object is not callable.

Wondering if there might be a quick fix? Thanks!

[Fabian_Lucas]

Hi,

I will have a Look at this on monday.

I am not sure what exactly the problem is but I am encountering the same issue with another component.

Best
Regards

[Tian]

Hey,

I aready had time to look at it. I do not think it is acutally an issue with the component itself but with Streamlit since version 1.36.

In my apps i am sticking for now with version 1.35 and I have opened up a GitHub issue:

Streamlit Component returning a value results in an Error in v.1.136 (worked before in v1.35 · Issue #8961 · streamlit/streamlit (github.com)

[Tian]

I changed how the on_change parameter works and now the component works also with Streamlit v1.36!

Just update to the newest version:
st-ant-tree · PyPI

[alex6]

Awesome this is working again. Thank you for the swift reply and fix!

[alonsh]

Awesome widget!

I have one main problem with it, when setting defaulValue programatically, it changes the output of the widget but the widget does not show the pre-selected defaults.
I opened a github issue:
changing defaultValue appears only after rerun · Issue #7 · flucas96/st_ant_tree (github.com)

Also, would be awesome to have UI similar to streamlit’s UI.

[alex6]

Hello,

Thank you for this great component. I am encountering the following problem. The first time I click on the element, the options do not properly expand, and they hide the search box (second picture). It only has the desired behavior when I click on + to expand a node (third picture). Would it be possible to fix this behavior? As an additional note, would it be possible to make the width use the full container width? (first picture)

[Tian]

I have adjusted the demo app - have a look if you are interested in the component - I have added an examples which styles the tree selector more like a native Streamlit widget.

URL: Streamlit Example App

[Raphael3]

Hi Fabian,
I really like your work, especially the tree select that I would like to use.
I noticed the search text is cleared after first selection of a filtered element, which makes it tedious if we have several elements to select with the same filter.

Do you think it’s something that could be improved by any chance?
Thanks a lot

Raph

[Tian]

Hi Raphael,

thanks for the Feedback - I will have a look at it shortly.

BR

[Tian]

Hey,

try if it works for you in this version:

pip install st-ant-tree==0.0.15

Best regards
Fabian

[Raphael3]

Hi Fabian,
I ran a couple of tests and it works thanks

I was struggling to use it until I figured the search is done on values, not on titles.
Since titles are displayed but not values, maybe it would be more consistent that the search is done on titles, what do you think?

Also, selecting a node with filtered children actually selects all the children, not the shown ones only. Is that behavior on purpose?

And last but not least, I saw that you tried to make it look more like genuine Streamlit, although the dark theme is not really supported.
Example of a multiselect:

BTW, some parts of your website don’t read correctly in dark mode too

[Raphael3]

Something else important:
if values are not unique, the behavior becomes inconsistent.

If I can help in any way, let me know

[jupiter.ju.91]

Hi @Tian ! Great component first of all. Is there anyway I can just select a parent node? Right now clicking any parent node will recursively select all of its descendent. Is there a mode, other than the leaf only one, where I can just select for example an intermediate layer?