inhibit refresh of element when visible

[arne123]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

nic_list = [{'name': 'if1'},
            {'name': 'if2'},]

@ui.refreshable
def generate_nic_dd():
    global nicdd
    with ui.dropdown_button('Network Interface') as nicdd:
        for nic in nic_list:
            name = nic['name']
            with ui.item(on_click=lambda name=name: ui.notify(f'You clicked item {name}')):
                ui.label(name)


def update_nic_list():
    # I tried delay with async.sleep() 
    # I tried nicdd.update()
    if nicdd.value is False:
        #nic_list = get_nics_in_system()
        generate_nic_dd.refresh()
    
generate_nic_dd()
ui.timer(1, update_nic_list)
ui.run()

Description

I want to update a drop down menu each second,
but I don't want to update it, when the user has it open.

so dropdown has value, which is True when opnend.
But there is somehow a race condition, this works sometimes, but not always

Any Idea or proposal for a better approach here?

NiceGUI Version

2.11.1

Python Version

Python 3.10.12

Browser

Other

Operating System

Linux

Additional Context

No response

[evnchn]

@arne123 Thank you for your report.

To summarize:

• nic_list is the list of interfaces, which may change if, say, user plugs in a USB WiFi dongle.
• nic_list is refreshed once every second, which disrupts the dropdown element, and closes the dropdown forcibly on the user.
• You are arguing for a mode of operation, where the nic_list refresh is paused when the dropdown is open.

But then, two burning questions:

• When the user then selected an interface which used to exist, they're screwed over because nobody told them the interface list changed, so the user experience is not nice either
• User is not notified, when the user has the opportunity to select a new interface

With that said, I think this is a UI/UX design problem more than a NiceGUI problem.

I would propose:

We don't commit to the dropdown button right away, but we notify the user to reload the dropdown button if there is a new interface.

See if the code makes more sense:

from nicegui import ui

nic_list = [{'name': 'if1'},
            {'name': 'if2'},]



@ui.page('/')
def main_page():
    # go to /selector, and /manage_interfaces
    ui.link('Selector', '/selector')
    ui.link('Manage Interfaces', '/manage_interfaces')

@ui.page('/manage_interfaces')
def manage_interfaces_page():
    ui.label('Manage Interfaces')
    interface_input = ui.input('Enter interface name', placeholder='e.g. eth0')
    def add_interface_from_input():
        print('Adding interface:', interface_input.value)
        add_interface(interface_input.value)
    def add_interface(name):
        # Add the interface to the list
        nic_list.append({'name': name})
        ui.navigate.reload()
    ui.button('Add Interface', on_click=add_interface_from_input)

    def delete_interface(name):
        # Delete the interface from the list
        global nic_list
        nic_list = [nic for nic in nic_list if nic['name'] != name]
        ui.navigate.reload()

    for nic in nic_list:
        name = nic['name']
        with ui.card():
            ui.label(name)
            ui.button('Delete', on_click=lambda name=name: delete_interface(name))

    ui.link('Back', '/')


@ui.page('/selector')
def selector_page():
    last_nic_list = nic_list.copy()

    with ui.row():
        with ui.dropdown_button('Network Interface') as nicdd:
            ui.label('Loading...')

        def generate_nic_dd():
            global nic_list
            nicdd.clear()
            with nicdd:
                for nic in nic_list:
                    name = nic['name']
                    with ui.item(on_click=lambda name=name: ui.notify(f'You clicked item {name}')):
                        ui.label(name)
            reload_button.set_visibility(False)
            
        reload_button = ui.button('Reload', on_click=generate_nic_dd)
        reload_button.set_visibility(False)

    def poll_nic_list():
        nonlocal last_nic_list
        if nic_list != last_nic_list:
            last_nic_list = nic_list.copy()
            reload_button.set_visibility(True)
            ui.notify('Network interface list changed, please reload.')
        
    generate_nic_dd()
    ui.timer(1, poll_nic_list)

ui.run()

Notable changes:

• Use individual clients by means of page decorator @ui.page instead of auto-index page with shared client.
• We poll_nic_list instead of generate_nic_dd right away, leaving the choice to the user to generate_nic_dd at their disposal.

[arne123]

Thanks for your thoughts,
I like the approach with the poll_nic_list, thia could be a solution, thanks for that.

To your Questions:
the use case here is a small helper tool for configuration of some Equipment,
which is not necessarily connected to a network, so Ethernet but mostly point to point.
Often Notebooks are used, with a usb / ethernet adapter, which is grabbed, plugged in, doing something, switching over to the next unit, probably using a different adapter. So the User is well aware that he physically connected / disconnected something.

But thinking more about the poll_nic_list, I could even sort the list with the latest changes on top, or high-lite them.

[evnchn]

You can pick up from my starting point, and tell me if you face any issues from then on ☺️

[arne123]

I implemented based on your idea, work's well for my usecase.
I update the dropdown when a new Interface is Identified, but since this is not happing very often, the user does not get interrupted.
Even when the Dropdown is closeing once when a new interface is identified, it is acceptable.