Data_frame with two tables in edit mode, hangs browser. Potential Bug?

[maxmoro]

Here below is a short example that hangs my browser.
I've two panels, with a large dataset (20cols, 5000 rows).

• Switching between the panels -> no problem
• Editing cells in one panel -> no problem
• Editing cells in one panel, then switching to the other panel -> Browser Hangs, CPU usage to the roof.

I'm attaching the code to create the fake dataset and the code that creates the problem.

I tried running in Shiny Live, sometimes it hangs and sometimes it takes a long time to switch the tab. I can't share the Shiny Live link as it is too long. (and can't use the faker library on Shiny Live).

I'm using shiny==0.10.2

Please try by

1. create the large fake dataset, then
2. run the app.py

Large Fake dataset creation

The dataset is fake. It is created using the Faker library.

from faker import Faker
import pandas as pd
#penguins = load_penguins()
def fakeDS():
    fake = Faker()
    df1 = pd.DataFrame([{
            'Name': fake.name(),
            'Email': fake.email(),
            'Address': fake.address(),
            'Job': fake.job(),
            'Company': fake.company(),
            'Phone Number': fake.phone_number(),
            'City': fake.city(),
            'Country': fake.country(),
            'Text': fake.text(),
            'Date': fake.date(),
            'Latitude': fake.latitude(),
            'Longitude': fake.longitude(),
            'CreditCardNumber': fake.credit_card_number(),
            'CreditCardProvider': fake.credit_card_provider(),
            'CreditCardExpire': fake.credit_card_expire(),
            'Currency': fake.currency_code(),
            'Price': fake.pydecimal(left_digits=3, right_digits=2, positive=True),
            'Password': fake.password(),
            'URL': fake.url(),
        }
        for _ in range(5000)
    ])
    df1.to_json('fakeds.json')
    df2 = pd.read_json('fakeds.json')

App.py that shows the issue

from pathlib import Path
from palmerpenguins import load_penguins
from shiny import App, render, ui, reactive, Outputs
import pandas as pd
infile = Path(__file__).parent / 'fakeds.json'
print("reading")
df1=pd.read_json(infile)
df2=df1.copy()
print("done reading")

app_ui = ui.page_fluid(
    ui.page_navbar(  
        ui.nav_panel(
            "A",
            ui.h2("Fake data 1"),
            ui.input_action_button('click1','click1'),
            ui.div(
                ui.output_data_frame("table_df1"),
                style="width:100%; font-size: small; padding: 0"
            )
        ),
        ui.nav_panel("B",
            ui.h2("Fake data 2"),
            ui.input_action_button('click2','click'),
            ui.div(
                ui.output_data_frame("table_df2"),
                style="width:100%; font-size: small; padding: 0"
            )
        ),  
    )
)

def server(input, output, session):

    @render.data_frame
    def table_df1():
        return render.DataTable(df1, editable=True,height='1000px')  

    @render.data_frame
    def table_df2():
        return render.DataTable(df2, editable=True,height='1000px')  

app = App(app_ui, server)

[schloerke]

@maxmoro Thank you for the reprex code! I was only able to reproduce it once locally. So I wasn't able to debug it 😞

Could you send me a video of what is happening on your machine?

Here is an adapted app using the faker library to dynamically generate data: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACGqAazjqYEsZVi6ZJgDF2nADoRe-QU1RQIAEygBnJqrmLJ9RnKgAbeHVSUA5gFduENdIFD9xKIoD6JiBasrtDZioAWVtg8fHZMAILoeEx0lIqcUZZRMVCEZNwAbnBRAPLmZKh5XhCSkgDEcmaW1kwAvEwOTq6VngAUAJSScTQsYgAiAMrtiJJMoz0ctSJidO0jYzFk5nQQmhi9UGRQwnSwcC1zY2PAB4enICenl0ziYAByuzeI43AY0PDteBdXhzcAojBQbj6R7PDBwAFAj5fb6jG5hRSKGIqLxIUFORFwZFQlYwy43ABSxAARiDWBwMAArYnY3F4sAAYUY8gg2FJYgwJD4CmwNNpPzAAAU-KQ4ExbuYYESJKiyS9UMKIHBnBAJVKZm1Pji+bCGdwyKyZezCHqeRroTCbozzOQ6AanrKOcRrWRbbztdcwAAVOAADzIbPJFD9bu1N3WFADL2UFBDfJuABkNnrzHFIxh9EnFnFY7SE6RTMnU4byQ53IW9mataGGTFFHr6VA6IpxZLpfajbW9c5CI2XCrW+rNe6dfTO2QG02BQx0tw4nQ04Qx93e65p7PODncZaxxPFL8fahuDEF0ue03nL7DzFNxaGUsYhBCHbQYR75Qn93iNnK8OPVPuIQcBpjgcTGgC+gtPocA0GQzh1gWZAqDUADMSTcKYfiwfBepIQATFE-AqHqGRwDUnp0OYcA-sONwCqoKgAO4CFoxZyvRTFNje3w3AAqgASvGaZLBB1G4gAvuahw0AITDODwKw7O4ewAKwAAzqR0VaHAAuicmklEoNAAIyTLKAyzIZuGmX0gz6dA6DOJYkyWFgUCmEqND6JYij7FWLnyO5ypQOkRKNr53wudA6SuAocAQZJYxwjcQ60i5fi4fsYCiBM0ZQEwRk3KJMIuVYBSwSkaSkM4RJ5GQpCZYQ+gAWwBX4B6jXNa1RURdwGB1uk4XDi5Tr5HkcEbFAzj0LsmWbESUFwcZhUpe6Kj6lBNQ3Axs5kH4iBGepACkADcLCkGQAC0REAF5wE8Kjgfop3yAiVimE8qnJQlozdWMv2jJFwUxYq8VaVcNwAEJfWDlxpRlNzZaKuVMLhy3fUwJUQGVzgVdwVU1WQdUQA1TWEGwqNtTcHVk2jMOnC5-WDe6w15NjuVTTs7w3HNC2KDQFP-TCa3YBtW07XtB2qSdZ3kFd3C3fdj3Peib0fdDfKC0Vml2Z00FMConCZDMpV5FEI1lVEBvInjEBtMMxRVgAAg+c59RNHMPFWXRMDzSp80ZQzmgsSwKbEnBrBNnpQPNez+1EcB1r7ZEUVkTB+HA6GYZtYCS6pqA+oVBmHM7Yd0G7mwe-AJze77i0ZXbQdwIsyzRKXEebFHMctHz+FMAnerRxt5GUVE6eZ2Q2e5-nhcO5IaCoJMESoC08+OdwluG5wmlgGJeDgG8CDIDEACOlgxPA5AqBgZB+vgRDnZQZDULK84QDv2lAA

[maxmoro]

Hi @schloerke,

The behavior in the recording is inconsistent. It seems to occur when I'm editing, and scrolling sometimes triggers the issue. It happens specifically when I switch tabs after editing.

When this occurs, the CPU usage maxes out. Sometimes the process completes, and the app becomes usable again, but often the browser tab remains unresponsive.

Desktop.2024.07.10.-.19.48.55.05c.mp4

I hope this helps! I'm happy to provide any additional details or run any tests that might be helpful
Thanks

[maxmoro]

I was able to create a repeatable process that shows the issue, using the Shiny Live session.
You should be able to get it from the video. Basically, you need to open the tabA, then tabB, then tabA (this just loads the ds).
Then, scroll down 3 times, write something in 3rows and 5cells. then change Tab
The browser will respond slowly, then if you do more edits will reach a point of freezing.

Desktop.2024.07.10.-.22.11.02.09.1.mp4

[schloerke]

Thank you @maxmoro for the issue and video.

After many hours, I narrowed it down to the steps:

• Scroll down far enough to remove the first row from the DOM
• Change tabs
• (Watch the DOM as the rows values rapidly go to the end; This would only get worse with a taller table.)

It was unrelated to editing or having a table on the second page. Only related scrolling down enough to remove at least the first row and then hiding the table.

Turns out, we just needed to update the TS deps and the issue goes away. 🙄 But I'm glad it's fixed 🥳

In addition, I've added overscan to pre-populate a few more rows for faster (initial) scrolling.

(Will close issue with PR)

[maxmoro]

This is great! Thank you for working on it