Browser can't load page when table rows contain lists

falkoschindler commented 6 months ago

Description

As @rohitsathish noticed on #2697, the following minimal example causes the app to freeze:

ui.table(columns=[{'name': 'A', 'label': 'A', 'field': 'A'}], rows=[{'A': [1, 2, 3]}])

It's even more apparent when creating the table dynamically:

ui.button('Table', on_click=lambda: ui.table(columns=[{'name': 'A', 'label': 'A', 'field': 'A'}], rows=[{'A': [1, 2, 3]}]))

Somehow Vue and/or Quasar can't handle the row content. But a minimal Quasar app works with the same data:

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/quasar@2.15.1/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="q-app">
      <q-table :columns="[{'name': 'A','label': 'A','field': 'A'}]" :rows="[{'A': [1, 2, 3]}]" row-key="id" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@2.15.1/dist/quasar.umd.prod.js"></script>
    <script>
      const app = Vue.createApp({ setup() { return {}; } });
      app.use(Quasar);
      app.mount("#q-app");
    </script>
  </body>
</html>

I'm out of ideas. Can anyone help to find out what's going on? Thanks!

petergaultney commented 5 months ago

I'm running into this today. Thank you for creating this - I was beginning to wonder if I was sane. 😄

I don't have a great idea of how I might go about debugging this, but I'm interested in talking it through a bit. I can see that there's high CPU usage for a period of time after the Python code has apparently stopped doing anything (I assume it has at least sent the data to the nicegui JS side).

Is there a reasonably easy way to enable some kind of debugging logic on the JS side, so that I can try to see what messages are being received by the client?

In the meantime, it appears that a known workaround is converting the lists into strings before they're sent across - presumably, Quasar/Vue support JavaScript objects like arrays by doing JSON.stringify at some point? I wonder how much of an actual change to nicegui behavior it would be if nicegui did the stringification on the Python side as a workaround?

falkoschindler commented 5 months ago

I think I tried adding some console logging in JavaScript, but without much success, since everything hangs when the problem occurs. Somewhere in nicegui.js is probably a good place to start though.

Looking forward to your findings! 🤞🏻

falkoschindler commented 1 month ago

@dcslin just reported a very similar problem: #3475

zauberzeug / nicegui

Browser can't load page when table rows contain lists #2744

Description