Is there a way to filter paragraphs by the content of a text search box?

Dash Python
1

I have a page that lists a series of paragraphs. It is built like this:

modal = rc.Modal(
    html.Div(
        [
            html.P('R&D Optimization Levers', className='h4 mb-4 fw-bold'),
            rc.Tabs(
                [
                    rc.Tab(
                        html.Div(
                            [
                                dbc.Input(),
                                dbc.Row(
                                    [
                                        dbc.Col(
                                            '1a',
                                            className='fw-bold fs-5',
                                            width=1,
                                        ),
                                        dbc.Col(
                                            html.P(
                                                'Install robust project portfolio process'
                                            )
                                        ),
                                    ],
                                    className='g-0',
                                ),
                                dbc.Row(
                                    [
                                        dbc.Col(
                                            '1b.1',
                                            className='fw-bold fs-5',
                                            width=1,
                                        ),
                                        dbc.Col(
                                            html.P(
                                                'Establish systematic change management process'
                                            )
                                        ),
                                    ],
                                    className='g-0',
                                ),
                                dbc.Row(
                                    [
                                        dbc.Col(
                                            '1b.2',
                                            className='fw-bold fs-5',
                                            width=1,
                                        ),
                                        dbc.Col(
                                            html.P(
                                                'Set up clear rules for change requests
                                            )
                                        ),
                                    ],
                                    className='g-0',
                                ),
                               ...

And then it is used in a callback like this:

@callback(
    Output('modal_content_tabs', 'selectedValue'),
    Output('modal_content', 'is_open'),
    Output('breakdownGraph', 'clickData'),
    Input('breakdownGraph', 'clickData'),
    Input('close_modal', 'n_clicks'),
    prevent_initial_call=True,
)
def update_modal(click_data, _):
    triggered_id = ctx.triggered_id
    if triggered_id == 'breakdownGraph':
        return bar_click(click_data)
    elif triggered_id == 'close_modal':
        return close_modal()

Does Dash offer any way to hide those paragraphs depending on the content of a text search box?

2

hi @Ricardo
what paragraphs are you referring to? what are you trying to hide?

You’re planning to use a dcc.Input, and based on what people search, you would like to hide or unhide certain sections of the page?

3

Hi @adamschroeder ! Thanks for replying and sorry for not having been clear enough.

The paragraphs I would like to hide are like this:

                                dbc.Row(
                                    [
                                        dbc.Col(
                                            '1a',
                                            className='fw-bold fs-5',
                                            width=1,
                                        ),
                                        dbc.Col(
                                            html.P(
                                                'Install robust project portfolio process'
                                            )
                                        ),
                                    ],
                                    className='g-0',
                                ),

I’m pasting the whole HTML structure, but in the end what I want to hide is just the sentence 'Install robust project portfolio process'.

The text search filter would work in such a way that the user types in a search term in a search box and only those paragaphs that contain the search term are shown, and the rest are hidden.

4

So this is what the process would look like?

First, they type the term they want to see in the dcc.Input(debounce=True), then they hit Enter, and then only those paragraphs that contain the search term are shown, and the rest are hidden.

5

Yes, exactly.

6

Hello @Ricardo,

You could possibly use AG Grid instead, just clear the headers and formatting, and set your columns to autoHeight, along with your grids, domLayout.

1 Like
7

@Ricardo
The solution by @jinnyzor looks more promising (maybe even easier) than mine.

You can probably do something with regex, as you search each html content. Although, the more content you have to search, the less attractive the solution is below.

from dash import Dash, dcc, html, callback, Input, Output
import dash_bootstrap_components as dbc

app = Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)

app.layout = dbc.Container([
    dcc.Input(id='search', debounce=True),
    dbc.Row(
        [
            dbc.Col(
                '1a',
                className='fw-bold fs-5',
                width=1,
            ),
            dbc.Col(
                html.P(
                    'Install robust project portfolio process',
                    id='html-a',
                    hidden=True
                )
            ),
        ]
    ),
])

@callback(
    Output('html-a', 'hidden'),
    Input('search', 'value'),
    State('html-a', 'children'),
    prevent_initial_call=True
)
def update_layout(search_value, content_a):
    print(search_value)
    # Apply regex to check...
    # if search_value in content_a:
    #     return False  # don't hide the html.P
    # else:
    #     return True  # hide the html.P
    
    return False


if __name__ == "__main__":
    app.run_server(debug=True)
1 Like