ibdafna/webdash

Some issues with dash_table

Opened this issue · 8 comments

Thanks a bunch for the work here @ibdafna; even in its current form it feels like this could be valuable in a lot of situations!

I have an app in which I need dash.data_table; the import collection looks as follows:

//@ts-ignore
window.dashApp = `import dash
from dash.dependencies import Input, Output
import dash
from dash import dcc
from dash import html
from dash import dash_table
from flask import Flask
import pandas as pd
import plotly.graph_objects as go
import plotly.express as px
import plotly.io as pio
from plotly.subplots import make_subplots

Based on the contents of https://github.com/ibdafna/webdash/blob/main/src/webdash.ts it feels like dash_table should be usable.

I can't use npm run dev/prod for some reason, but if I run npm run build and just serve the contents of dist through python -m http.server, pyodide initializes properly, the entire import block is run, but I get a runtime error once it encounters the first usage of dash_table in the script:

f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:125 Error: dash_table was not found.
    at Cr (caad487e-1432-4373-ac43-bb5a069ee28a:2:61243)
    at _a (caad487e-1432-4373-ac43-bb5a069ee28a:2:109842)
    at ja (caad487e-1432-4373-ac43-bb5a069ee28a:2:110358)
    at caad487e-1432-4373-ac43-bb5a069ee28a:2:110697
    at Array.forEach (<anonymous>)
    at ja (caad487e-1432-4373-ac43-bb5a069ee28a:2:110644)
    at Ea (caad487e-1432-4373-ac43-bb5a069ee28a:2:110098)
    at Rc (caad487e-1432-4373-ac43-bb5a069ee28a:2:155015)
    at Bh (f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:126:456)
    at Dj (f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:162:476)
Me @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:125
Ih.c.callback @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:138
Wg @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:67
oj @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:127
Aj @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:160
unstable_runWithPriority @ b0246b33-3744-41db-88c8-870bb33cf944:25
Da @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:60
ab @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:154
Te @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:146
(anonymous) @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:61
unstable_runWithPriority @ b0246b33-3744-41db-88c8-870bb33cf944:25
Da @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:60
Pg @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:61
ha @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:60
Dj @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:163
unstable_runWithPriority @ b0246b33-3744-41db-88c8-870bb33cf944:25
Da @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:60
xb @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:162
(anonymous) @ f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:162
U @ b0246b33-3744-41db-88c8-870bb33cf944:16
B.port1.onmessage @ b0246b33-3744-41db-88c8-870bb33cf944:24
b0246b33-3744-41db-88c8-870bb33cf944:24 Uncaught Error: dash_table was not found.
    at Cr (caad487e-1432-4373-ac43-bb5a069ee28a:2:61243)
    at _a (caad487e-1432-4373-ac43-bb5a069ee28a:2:109842)
    at ja (caad487e-1432-4373-ac43-bb5a069ee28a:2:110358)
    at caad487e-1432-4373-ac43-bb5a069ee28a:2:110697
    at Array.forEach (<anonymous>)
    at ja (caad487e-1432-4373-ac43-bb5a069ee28a:2:110644)
    at Ea (caad487e-1432-4373-ac43-bb5a069ee28a:2:110098)
    at Rc (caad487e-1432-4373-ac43-bb5a069ee28a:2:155015)
    at Bh (f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:126:456)
    at Dj (f2af6847-4fee-4b0e-a1aa-e9b610c26d4a:162:476)

I can't use npm run dev/prod for some reason,

Ah, I had just missed that they use SSL. With npm run dev, it fails a bit earlier, and instead I get the following pyodide error in both Firefox and Chromium upon importing flask:

pyodide.asm.js:14 Uncaught (in promise) PythonError: Traceback (most recent call last):
  File "/lib/python3.9/site-packages/_pyodide/_base.py", line 415, in eval_code
    CodeRunner(
  File "/lib/python3.9/site-packages/_pyodide/_base.py", line 296, in run
    coroutine = eval(self.code, globals, locals)
  File "<exec>", line 2, in <module>
  File "/lib/python3.9/site-packages/dash/__init__.py", line 1, in <module>
    from .dash import Dash, no_update  # noqa: F401
  File "/lib/python3.9/site-packages/dash/dash.py", line 20, in <module>
    import flask
  File "/lib/python3.9/site-packages/flask/__init__.py", line 14, in <module>
    from jinja2 import escape
  File "/lib/python3.9/site-packages/jinja2/__init__.py", line 6, in <module>
    from markupsafe import escape
ModuleNotFoundError: No module named 'markupsafe'

With npm run prod, I get the same error as in OP.

If I remove

  "dash_table": `${sitePackagesDir}dash/dash_table/`

from webdash.ts, I get a bit further (in Firefox, but not in Chromium) but then run into a

DataCloneError: The object could not be cloned. [worker.1f0a06c3.js:2](http://localhost:8000/worker.1f0a06c3.js)

Hello @fuglede and thanks for trying out webdash! This should be relatively trivial to fix, but I've been working on an update to simplify the architecture and update the deps -- which should result in dash_table working out of the box. I might take a few weeks to release it, however.

Sounds great! If you prefer, and if you already have a fix in mind but can't be bothered to implement it since you are getting rid of it soon anyway, I'd be happy to just have a couple of hints for what it would take. Otherwise I'll just wait a bit!

@ibdafna really cool to see that this is still in development! I've been looking at shinylive/stlite as well for my dashboard needs. It's unfortunate that despite webdash being really awesome, this project isn't getting as much support from the official dash folks as well as community. I understand this was initially developed as part of a Bloomberg initiative, I am curious what are your plans in terms of longer term support for this project.

also curious on why there is a custom pyodide patch env discussed here

@bugzpodder thanks for reaching out. Stay tuned, there may be news in this space in the next couple of months!

As for the custom Pyodide build, webdash compiles a number of packages in addition to those bundled in the official Pyodide distribution. It's not a fork, however - none of Pyodide's code is modified. The patches are made to the Dash code so it can compile to Pyodide.

@bugzpodder here is something I've been working on with Plotly. It's not open sourced yet, but you can try it right now! I'll be updating the README soon so it links to this deployment.

https://wasmdash.vercel.app/

nice! looks awesome! I can just gawk at https://wasmdash.vercel.app/webWorker.js for now :)