ui.refreshable function behaving unexpectedly

[vickorian]

Question

I'm trying to run this section of code to auto generate color based reinforcement for a client when they are selecting choices, but when i run this i get an error message so long that VS code doesn't even render the full response.

In theory, this doesn't seem to far off of the example provided in the site documentation, but there is additional logic in the if statement at the bottom. Any help would be appreciated.

This is just an excerpt taken from the total page, but extracted to a separate page, it provides the same errors. I've also modified it to run with the "on_change" property of checkbox and it yields the same results.

from nicegui import ui

@ui.refreshable
def color_change():
    color_, set_color_ = ui.state('red')
    count_, set_count_ = ui.state([0,0,0,0,0])
    ui.checkbox(value=bool(count_[0]), on_change=lambda e: set_count_(count_[0] + 1) if e.value else set_count_(count_[0]-1)).props(f'label="Property 1" color={color_}')
    ui.checkbox(value=bool(count_[1]), on_change=lambda e: set_count_(count_[1] + 1) if e.value else set_count_(count_[1]-1)).props(f'label="Property 2" color={color_}')
    ui.checkbox(value=bool(count_[2]), on_change=lambda e: set_count_(count_[2] + 1) if e.value else set_count_(count_[2]-1)).props(f'label="Property 3" color={color_}')
    ui.checkbox(value=bool(count_[3]), on_change=lambda e: set_count_(count_[3] + 1) if e.value else set_count_(count_[3]-1)).props(f'label="Property 4" color={color_}')
    ui.checkbox(value=bool(count_[4]), on_change=lambda e: set_count_(count_[4] + 1) if e.value else set_count_(count_[4]-1)).props(f'label="Property 5" color={color_}')  
    if sum(count_) == 5:
        set_color_("green")
        ui.icon("done", color="green").classes('text-5xl')
    else:
        set_color_("red")
        ui.icon("done", color="red").classes('text-5xl')
color_change()

ui.run(host="127.0.0.1")

@falkoschindler updated

[falkoschindler]

Hi @vickorian,

When calling color_change(), you're calling set_color_(), which in turn calls color_change() to re-generate the UI. This causes an infinite recursion.

But I guess set_color_ could automatically check if the value actually changed and exit early if not:

nicegui/nicegui/functions/refreshable.py

Lines 156 to 158 in 97d4027

	def set_value(new_value: Any, index=target.next_index) -> None:
	target.locals[index] = new_value
	target.refreshable.refresh()

[falkoschindler]

I just created PR #2922 to add the early exit.

[vickorian]

@falkoschindler

Deleted comment as i missed your point, i've been awake too long. Would it be possible to push that functionality? I think having the ability to do these types of logicals inside the loops would make refreshable much more powerful. Though it would need to be something people kept track of because you could end up with a really difficult debug problem. Maybe put a maximum loop counter or a heap depth to make sure you're not going too deep?

[falkoschindler]

Yes, I guess we'll add this fix with the next release.

Though it would need to be something people kept track of because you could end up with a really difficult debug problem.

I don't quite understand. Do you see a problem with the proposed solution?

[vickorian]

I just read your pr and the code change. That should catch most cases, but i was imagining the situation where someone has made an error and was setting a different value every time by some mistake. Like they referenced an incorrect index value and then that logic leads to a different values every iteration. So imagine a cycle of "Green", "Black", "Red", Green", "Black" ,"Red", etc. This would cycle forever with no significant error and there would be no catch because the New_value != indexed value.

[vickorian]

it might be one of those things where there isn't really go a good solution because by the nature of the method, it's recursive by design. So maybe we just make it apparent that these errors are difficult to debug and that caution should be used when placing logic gates in a ui.refreshable function?