Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
falkoschindler opened this issue Mar 21, 2024 · 2 comments
Open

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

falkoschindler opened this issue Mar 21, 2024 · 2 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@falkoschindler
Copy link
Contributor

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!
@falkoschindler falkoschindler added bug Something isn't working help wanted Extra attention is needed labels Mar 21, 2024
@petergaultney
Copy link
Contributor

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
Copy link
Contributor Author

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! 🤞🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@petergaultney @falkoschindler