Components stop rendering

[devinrsmith]

I'm able to get some DH (UI plugin) components to completely stop rendering. It happens during normal operation as I'm tabbing between views, but to illustrate it faster, I can click rapidly and reproduce it usually in <20 seconds.

I'll note that this only seems to be happening in Firefox - so far, I haven't been able to reproduce in chrome.

Attached is a video showing off the behavior. The console logs and server logs don't seem to contain any interesting information.

components-stop-rendering.mp4

Engine Version: 0.35.0
Web UI Version: 0.83.0
Java Version: 21.0.3
Barrage Version: 0.6.0
Browser Name: Firefox 127
OS Name: Linux
@deephaven/js-plugin-ui: 0.16.0

Also to note, I'm using a caddy proxy that looks something like:

w1.dh.mydomain.com {
        reverse_proxy {
                to h2c://my-internal-ip:10000
        }
        tls internal
}

The behavior seems to persist in Firefox even when I open a new browser; hard refreshing fixes the issue. This makes me think somehow Firefox (or the connection) is getting into some bad state.

[devinrsmith]

I was able to reproduce this on Ubuntu 24.04, FF version 125 (snap).

[AkshatJawne]

Was able to reproduce through Remote Desktop, but upon investigating the console and attempting to research online, not sure what the cause could be. The component renders, and then when it breaks, nothing renders -- but there is no errors thrown, or any warning message.

@mofojed The only thing I could suspect is that there is some weird connection behaviour with Firefox, maybe something related to this open issue regarding nested tabs (which is the setup here) adobe/react-spectrum#5469.

Otherwise, not exactly clear on what code changes could be made to fix this issue.

EDIT: There is also this issue, but this appears to already have had a fix merged in: adobe/react-spectrum#4938

[AkshatJawne]

Have continued to try and reproduce locally, without using remote desktop, both just with Tabs in a Spectrum Code Sandbox, as well as in deephaven.ui. I was not able to reproduce in either, and so, without having the ability consistently reproduce (without using that specific snippet), it is difficult to propose a solution.

@devinrsmith , is there any way you can distill your example down to be one that can be transported and or easily reproduced on other machines?

[mofojed]

Tried reproducing with some nested tabs:

from deephaven import ui
from deephaven.plot import express as dx

stocks = dx.data.stocks()
p = dx.line(stocks.where(["sym=`CAT`", "exchange=`TPET`"]), x="timestamp", y="price")

@ui.component
def tabs(count=3):
    return ui.tabs(
        ui.tab_list(list(map(lambda i: ui.item(f"Tab {i}"), range(count)))),
        ui.tab_panels(list(map(lambda i: ui.item(stocks if i % 2 == 0 else p, key=f"Tab {i}"), range(count)))),
        flex_grow=1
    )

@ui.component
def nested_tabs(count=3):
    return ui.tabs(
        ui.tab_list(list(map(lambda i: ui.item(f"Tab {i}"), range(count)))),
        ui.tab_panels(list(map(lambda i: ui.item(tabs(i + 1), key=f"Tab {i}"), range(count)))),
        flex_grow=1
    )

nt = nested_tabs(5)

Wasn't able to reproduce though.