Unable to change .content value of ui.text() components within ui.section card

[n-srinidhi]

Hi!I am trying to update values of ui.text() based on selecting user id from a dropdown list. I am trying to access by component name but It isnt working. It works when i delete and redraw the card with updated values but not otherwise. Sharing a sample example to illustrate the same. Thank you!

from h2o_wave import main, app, Q, ui,data,run_on,on

#Sample Data
user_info={'101': {'preferred_hour': '6', 'u_mosttraded': [('AUST200', 2)], 'total_value_today': [2]},
           '102': {'preferred_hour': '6', 'u_mosttraded': [('GBPCAD', 1)], 'total_value_today': [3]},
           '103': {'preferred_hour': '6', 'u_mosttraded': [('GOLD_CASH', 1)], 'total_value_today': [4]},
           '104': {'preferred_hour': '6', 'u_mosttraded': [('NIO', 1)], 'total_value_today': [6]}
          }
@app('/demo')
async def serve(q: Q):
    # Initialize the client (browser tab) if not already
    if not q.client.initialized:
        await initialize_client(q)
    
    await run_on(q)
    await q.page.save()

@on('select_users')
async def select_user(q:Q):
    q.client.user = q.args.select_users
    q.page['top_section'].select_users.value = q.client.user #24-11-23
    q.page['top_section'].user_stat_1_val.content = str(user_info[q.client.user]['preferred_hour'])
    q.page['top_section'].user_stat_2_val.content=str(user_info[q.client.user]['u_mosttraded'][0][0]) if len(user_info[q.client.user]['u_mosttraded'])>0 else ' '
    q.page['top_section'].user_stat_3_val.content=str(user_info[q.client.user]['total_value_today'][0]) if len(user_info[q.client.user]['total_value_today'])> 0 else '0'
    q.page['top_section'].user_stat_4_val.content="Inactive"
    await q.page.save()

async def initialize_client(q: Q):
    """
    Initialize the client browser tab
    """  
    #Add layouts,header
    q.page['meta']=ui.meta_card(
        box='',
        title='Sample App',
        layouts=[
                ui.layout(
                breakpoint='xs',
                zones=[
                    ui.zone(name='header'),
                    ui.zone(name='content'),
                ])
                ]
        ,
        icon='AnalyticsView',
        )
    q.page['header']=ui.header_card(
        box='header',
        title='Sample App',
        subtitle='',
        icon='AnalyticsView',
        icon_color='#720d6d',
        color='transparent',
    )

    q.client.user='101'
    q.page['top_section']=ui.section_card(
            title='',
            subtitle='',
            box=ui.box(zone='content'),
            items=[
                ui.button(name='user_stat_1', tooltip='Preferred Hour of the day',icon='ReminderTime'),
                ui.text(name='user_stat1_val',content="15"),
                ui.button(name='user_stat_2',disabled=False,tooltip='Frequently Traded Symbol',icon='BarChart4'),
                ui.text(name='user_stat2_val',content="NDX"),
                ui.button(name='user_stat_3',disabled=False,tooltip='Total Value Traded Today',icon='StackedColumnChart2Fill'),
                ui.text(name='user_stat3_val',content="0"),
                ui.button(name='user_stat_4',disabled=False,tooltip='Current Status',icon='Signin'),
                ui.text(name='user_stat4_val',content="Inactive"),
                ui.dropdown(name='select_users', label='', tooltip='Select user to view insights',
                        choices=[ui.choice(name=str(x), label=str(x)) for x in range(101,105)],
                        value=q.client.user,  width='200px',
                                    trigger=True, popup='always', visible=True
                        )
            ]
        )
    q.client.initialized = True 

    # Save the page
    await q.page.save()

[mturoci]

Hi!

I am trying to update values of ui.text()

Please make a minimal repro example then. Thanks!

[n-srinidhi]

Hi, The above doesn't help? I created a separate runnable piece of code with an example of what I'm trying to do. Can you run the program above? You can switch different options in the dropdown n see that the ui.text values don't change. Refer to this section:

q.page['top_section']=ui.section_card(
            title='',
            subtitle='',
            box=ui.box(zone='content'),
            items=[
                ui.button(name='user_stat_1', tooltip='Preferred Hour of the day',icon='ReminderTime'),
                ui.text(name='user_stat1_val',content="15"),
                ui.button(name='user_stat_2',disabled=False,tooltip='Frequently Traded Symbol',icon='BarChart4'),
                ui.text(name='user_stat2_val',content="NDX"),
                ui.button(name='user_stat_3',disabled=False,tooltip='Total Value Traded Today',icon='StackedColumnChart2Fill'),
                ui.text(name='user_stat3_val',content="0"),
                ui.button(name='user_stat_4',disabled=False,tooltip='Current Status',icon='Signin'),
                ui.text(name='user_stat4_val',content="Inactive"),
                ui.dropdown(name='select_users', label='', tooltip='Select user to view insights',
                        choices=[ui.choice(name=str(x), label=str(x)) for x in range(101,105)],
                        value=q.client.user,  width='200px',
                                    trigger=True, popup='always', visible=True
                        )
            ]
        )

user_stat1_val, user_stat2_val, user_stat3_val and user_stat4_val are ui.text() components.

[mtanco]

Hi @n-srinidhi!

Your textbox has the name user_stat1_val, but in your update code you have q.page['top_section'].user_stat_1_val.content (note the extra underscore). When I updated the variables to match, the code worked.

To @mturoci's point, I did strip down a lot of your example to be able to get to the root cause. Here's what I might have shared an an MRE

from h2o_wave import main, app, Q, ui, data, run_on, on

# Sample Data
user_info = {'101': {'preferred_hour': '6'}, '102': {'preferred_hour': '7'}, '103': {'preferred_hour': '8'}, '104': {'preferred_hour': '9'}}

@app('/')
async def serve(q: Q):

    if not q.client.initialized:
        q.client.user_id = list(user_info.keys())[0]

        q.page['top_section'] = ui.section_card(
            title='',
            subtitle='',
            box="1 1 1 1",
            items=[
                ui.text(name='user_stat1_val', content="15"),
                ui.dropdown(name='select_user_id', label='',
                            choices=[ui.choice(name=x, label=x) for x in user_info.keys()],
                            value=q.client.user_id, trigger=True)
            ]
        )

        q.client.initialized = True

    else:
        q.client.user_id = q.args.select_user_id
        q.page['top_section'].user_stat1_val.content = str(user_info[q.client.user_id]['preferred_hour'])

    await q.page.save()

@mturoci This is good feedback that getting a console warning when you try to update a card that does not exist could be super helpful to devs. WDYT?

[n-srinidhi]

This worked!Thanks a lot!

[mturoci]

This is good feedback that getting a console warning when you try to update a card that does not exist could be super helpful to devs.

For sure! Ideally, we would incorporate this into an IDE extension and use red underline to mark the error at specific line. Feel free to file a feature request.