New component: streamlit-condition-tree, an elegant way to filter a DataFrame & build a query

[Cedric]

Hi everyone,

I created a component that allows users to build condition trees (nested and/or conditions) that can be used, for example, to filter a dataframe or build a query.

GitHub: https://github.com/cedricvlt/streamlit-condition-tree
PyPi: https://pypi.org/project/streamlit-condition-tree/
Example app: https://condition-tree-demo.streamlit.app/

Please try it out and don’t hesitate to give me your feedback !

[CarlosSerrano]

Nice!

[Shawn_Pereira]

This is really awesome, @Cedric

Cheers

[unofficed]

This is so strange that it was in my todo list for my app of Squirrel Bot - Unofficed and I was about to start on it right now.

You created a beautiful builder which will be appreciated for generations to come

[Cedric]

Glad you like it

I just released the version 0.1.2, which allows the filtering of a DataFrame only with a few lines :

config = config_from_dataframe(df)
query_string = condition_tree(config)
df = df.query(query_string)

I updated the demo, hope you will find it useful.

[Javidan]

Hello, thank you for very useful component.
I have a question:
Is it possible to set a default tree within your component? I noticed in the https://condition-tree-demo.streamlit.app/ demo that some default conditions are already set. Could you please provide a code example that demonstrates how to achieve this?

[Charly_Wargnier]

Awesome job on this component, @Cedric!!

Shared it internally.

Best wishes,
Charly

[Cedric]

Thanks for your feedbacks, I appreciate.

@Javidan, I’ve incorporated the default tree feature into the demonstration. I hope it’s more clear.

[w3hbi]

Hello @Cedric,
Great Job, but i was asking if this component can be used to create to return a json object like this example :

{
“title”: “abc”,
“type”: “node”,
“children”: [
{
“title”: “dddd”,
“type”: “leaf”
},
{
“title”: “fffffff”,
“type”: “node”,
“children”:
}
}

[Cedric]

Good afternoon @w3hbi, I think what you are looking for is the condition tree.
Once you have defined a key for the component, the tree is accessible through st.session_state[key] (cf readme & demo).

[w3hbi]

Hello @Cedric, thanks a lot for your replay,

I made a simple script that takes tree result from session_state[key] and make changes to create a new tree that can be displayed on a graph using st_echart i found this is a good solution for me.

[aumisb]

This is a great component for Streamlit.

I’m using it in a form and am getting an issue with the form cutting off the lower half of the top level buttons upon first load. This issue goes away after interacting with the page.

I’ve posted the issue here. The result looks like this:

Is anyone else using it in a form and seeing this issue?

Thanks.

[Cedric]

Hi all,

I just updated the component, adding an option always_show_buttons to force the buttons rendering even when they are not being hovered.

It also solved @aumisb issue mentioned above.

[Christian]

i have tried using the default config option like this:

config = {
                    'fields': {
                        'Date': {
                            'label': 'Date',
                            'type': 'date',
                            'operators': ['less', 'equal']

                        },
                    },
                }

But sadly only that filter option will be available on the menu.

I am looking to have a default filter being used since the filter window won´t be displayed until you add a filter element which might confuse people when they see a blank window.

The othe issue i am having when used in combination with st.popover or experimental dialog the filter will reset after closing the popover or experimental dialog. Has anyone a work around?

[mailalesci]

Hello @Cedric ,

Thanks a lot for your component, it is absolutely amazing!

It says in the doc that the RHS can be “functions (arguments also can be values/fields/funcs)” but I have trouble understanding how to do so. For instance, I would like a rule to be : Field1 >= Quantile(Field1, 10%). How is it possible to do so? My workaround so far is to prepare the initial dataframe with additional quantile columns that are treated as “regular” fields but I believe it might exist a more elegant solution.

I have another question regarding the filtering process: is it possible to see the impact of each rule one-by-one?

[Cedric]

Hi there,
Thanks for your feedbacks and sorry for my late response !

@Christian

I agree that it can be quite confusing for the user when the tree is empty since the component does not appear. To resolve this, I invite you to check the parameters placeholder and always_show_buttons (see doc). You can also define an initial filter tree with the parameter tree.

Regarding the combination with st.popover and dialogs, I noticed the issue as well. However, I have no idea on how to maintain the component value when its container is closed. If anyone has suggestions on how to address this, I am open to ideas.

@mailalesci

Interesting question, I assume the config to do something like this would look like this (see component’s doc about functions) :

config = {
    'fields': {
        'field1': {
            'label': 'Field 1',
            'type': 'number',
            'valueSources': ['value', 'func'],
            'funcs': ["quantile10"]
        }

    },
    'funcs': {
        'quantile10': {
            'label': 'Quantile 10%',
            'type': 'number',
            'returnType': 'number',
            ...
        }
    }
}

However, defining funtions is currently not possible since it requires javascript code injection into the config. I’ll implement this feature when I have time but not sure if I will make it soon. I also just corrected the doc to remove the “func” as possible source for RHS.

Regarding your second question, I’m not entirely sure what you mean, but I guess you might be able to manipulate the query string before filtering your DataFrame.

[Cedric]

Hi all,

I just release version 0.2.0, that supports javascript code injection into the config. Therefore, you can now integrate validators and functions in the query builder.

I’ve taken a lot of inspiration from the streamlit-echarts and streamlit-aggrid code for this, so thanks to their creators !

I also added a new page in the demo to show how to build a complex config and inject javascript code.

I hope you’ll enjoy this update