Button is not working after refresh or page switch

[Swasthik-Jain]

Question

I wanted to achieve this

if toggled, do a first load
if toggled again, hide
if toggled again, show the previously loaded kpi, run a refresh in background --> should be much faster and updates values if changes have occurred

I have a main page called search.py from there I'm calling

async def create_search_panel() -> None:
    with ui.row().classes('w-full'):
        ui.label("Search").classes("text-bold text-xl mt-2")
        ui.button('View Insights', icon='dvr', on_click=toggle_kpi_panel)

I have another page where I defined kpi_panel in kpi.py

 kpi = None
async def toggle_kpi_panel():
    global kpi
    if kpi is None:
        kpi = await kpi_panel()
    else:
        kpi.toggle()

def handle_tab_change():
    global kpi
    if kpi is not None and hasattr(kpi, 'hide'):
        kpi.hide()

async def kpi_panel():
    global kpi
    if kpi is None:
        with ui.right_drawer() as kpi:
            with ui.row().classes(
                    "flex items-center flex-row p-4 left-0 fixed top-[-88.8px] w-[302px] h-24 bg-gray-100"):
                ui.label("Insights ").classes("text-xl font-bold absolute")
                close_button = ui.icon('close').classes('text-2xl cursor-pointer absolute right-8').tooltip(
                    'Close insights')

            async def close_kpi():
                kpi.hide()

            close_button.on('click', close_kpi)
            spinner = Spinner().classes('flex justify-center items-center w-full h-full')
            # Displaying other contents
           spinner.set_visibility(False)
    return kpi

When the page first loads toggling function works fine[show/hide] and even the close button works fine
if I switch to any other page or refresh the page, I'm not able to trigger the kpi_panel again [ button will not work]
I need your guidance on this matter how to achieve above statements stated in the beginning.

[falkoschindler]

Hi @Swasthik-Jain,

Please try to provide a minimal executable example. This allows us and the community to help more efficiently. Thanks!
Why is it important to provide a minimal reproducible example?

[falkoschindler]

When the page first loads toggling function works fine[show/hide] and even the close button works fine

The close button doesn't work for me. But it can be fixed, e.g., like this:

close_button.on('click', kpi.hide)

But the problem occurs when we refresh

The "View Insights" button still works after a refresh.

All in all, your state management is a bit strange. There's one major bug I noticed: You're assigning kpi in this line:

with ui.right_drawer().classes('text-gray-700') as kpi:

But then you assign it again to the return value of kpi_panel():

kpi = await kpi_panel()

This will set kpi back to None, because kpi_panel doesn't return anything. Removing the later assignment also solves the kpi.hide problem mentioned above.

[Swasthik-Jain]

Hi @falkoschindler, could you please reproduce the code with your changes to help me understand it better?

[falkoschindler]

Find kpi = await kpi_panel(), replace it with await kpi_panel().

[Swasthik-Jain]

Sorry to disturb again "View Insights" button isn't functioning properly for me after refreshing the page or switching to another page.

[falkoschindler]

Ok, I was wrong. kpi_panel is returning kpi, so my fix doesn't work.

I think the real problem is that you have only one global kpi variable holding a ui.right_drawer object. But when serving multiple clients via @ui.page('/'), the second visitor doesn't get a new drawer created. I'm not sure why I missed that the first time. Probably because your example was still quite complex.

Let me show you a minimal reproduction of your problem:

kpi = None

def toggle_drawer():
    global kpi
    if kpi is None:
        with ui.right_drawer() as kpi:
            ui.label('Drawer')
    else:
        kpi.toggle()

@ui.page('/')
def page():
    ui.button('Show drawer', on_click=toggle_drawer)

You can solve it by nesting the kpi object in the page function:

@ui.page('/')
def page():
    kpi = None

    def toggle_drawer():
        nonlocal kpi
        if kpi is None:
            with ui.right_drawer() as kpi:
                ui.label('Drawer')
        else:
            kpi.toggle()

    ui.button('Show drawer', on_click=toggle_drawer)

Much better would be to create the drawer immediately and to toggle it on button click:

@ui.page('/')
def page():
    with ui.right_drawer() as kpi:
        ui.label('Drawer')

    ui.button('Show drawer', on_click=kpi.toggle)

[Swasthik-Jain]

Thank you for your response. Yes, your approach works well, but the issue is that it reloads whenever the page is refreshed or when switching pages.
I have previously done it in the same way.
loading the data when the page is loading then using the button to toggle

from nicegui import ui

kpi = ui.right_drawer()
async def toggle_drawer():
    kpi.toggle()

async def kpi_panel():
    global kpi
    with ui.right_drawer(value=False) as kpi:
        ui.label('Drawer')
    return kpi

@ui.page('/')
async def page():
    ui.button('Show drawer', on_click=toggle_drawer)
    await kpi_panel()

ui.run()

This setup functions effectively, similar to your approach, as we are simply displaying labels, and it works well.
For instance, if we have 10 cards that need to fetch data via a query, the page will only load after the data has been retrieved for the cards.
To address this, I am considering implementing a button that, when activated, will reveal the content, thus allowing the page to load more swiftly. Once the data is available, I want to avoid reloading it, as it is time-consuming. My proposed approach is as follows:

• On toggle, perform the initial load.
• On re-toggle, hide the content.
• On toggle once more, display the previously loaded KPIs and execute a background refresh, which should be quicker and update the values if any changes have occurred.

[falkoschindler]

Ok, I see. I strongly recommend separating UI from your data model. If you want to fetch KPIs only once, do it and store it in a global kpi object (e.g. a dictionary or other data structure). The UI can be created independently, presenting the data stored in kpi. If there is no data yet, it can trigger and await the load and render it afterwards.