search

Grasia / grasia-dash-components

Extending Plotly's Dash component suite for @Grasia.
MIT License
18 stars 0 forks source link

Update to dash==1.0.0 when it's released #8

Closed Akronix closed 5 years ago

Akronix commented 5 years ago

Dash is going to make breaking changes in its next major release 1.0.0, some adjustments will need to be taken in order to make this suite compatible with newer versions of Dash. More info in this issue: https://github.com/plotly/dash/issues/469

Things to do:

zouhairm commented 5 years ago

Is it possible that the recent Dash upgrade to 0.41 which bumped React to 16.8.6 (https://github.com/plotly/dash-renderer/blob/master/CHANGELOG.md#0220) has broken things with the grasia-dash-components ?

I'm getting the following error: 

4react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:117 Error: grasia_dash_components was not found.
    at Object.resolve (registry.js:16)
    at isLoadingComponent (TreeContainer.js:237)
    at getLoadingState (TreeContainer.js:175)
    at mergeProps (TreeContainer.js:168)
    at computeMergedProps (connect.js:110)
    at Connect.updateMergedPropsIfNeeded (connect.js:224)
    at Connect.render (connect.js:348)
    at ce (react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:98)
    at qg (react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:97)
    at hi (react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:104)
Bg @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:117
c.callback @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:126
Ag @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:116
zg @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:116
qi @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:131
ui @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:133
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:158
unstable_runWithPriority @ react@16.8.6.min.js?v=0.22.0&m=1555001323:27
Vc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:158
Sc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:158
Z @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:156
Kc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:155
ya @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:153
enqueueSetState @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:202
t.setState @ react@16.8.6.min.js?v=0.22.0&m=1555001323:20
handleChange @ connect.js:302
dispatch @ createStore.js:173
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ api.js:52
Promise.then (async)
(anonymous) @ api.js:51
Promise.then (async)
(anonymous) @ api.js:45
(anonymous) @ index.js:8
initialization @ APIController.react.js:47
componentDidMount @ APIController.react.js:28
qi @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:130
ui @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:133
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:158
unstable_runWithPriority @ react@16.8.6.min.js?v=0.22.0&m=1555001323:27
Vc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:158
Sc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:158
Z @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:156
Kc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:155
ya @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:153
bh @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:160
xe @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:160
nb.render @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:215
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:164
$g @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:159
Wc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:164
render @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:217
DashRenderer @ DashRenderer.js:12

api.js:73 Error: grasia_dash_components was not found.
    at Object.resolve (registry.js:16)
    at isLoadingComponent (TreeContainer.js:237)
    at getLoadingState (TreeContainer.js:175)
    at mergeProps (TreeContainer.js:168)
    at computeMergedProps (connect.js:110)
    at Connect.updateMergedPropsIfNeeded (connect.js:224)
    at Connect.render (connect.js:348)
    at ce (react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:98)
    at qg (react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:97)
    at hi (react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:104)
(anonymous) @ api.js:73
Promise.catch (async)
(anonymous) @ api.js:44
(anonymous) @ index.js:8
initialization @ APIController.react.js:47
componentDidMount @ APIController.react.js:28
qi @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:130
ui @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:133
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:158
unstable_runWithPriority @ react@16.8.6.min.js?v=0.22.0&m=1555001323:27
Vc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:158
Sc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:158
Z @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:156
Kc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:155
ya @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:153
bh @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:160
xe @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:160
nb.render @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:215
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:164
$g @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:159
Wc @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:164
render @ react-dom@16.8.6.min.js?v=0.22.0&m=1555001323:217
DashRenderer @ DashRenderer.js:12
Akronix commented 5 years ago

Hi @zoohair! What a coincidence! I was just trying to update my app too and came up with the same problem as you.

Yes, indeed. I think something broke with dash 0.41. I'll try to have a look and try to fix it asap.

zouhairm commented 5 years ago

@Akronix : looks like Dash 1.0.0 is officially live, and upgrading to it is incompatible with the grasia_dash_components

This is the error message I'm getting:

Error: grasia_dash_components was not found.

    at Object.resolve (http://127.0.0.1:3000/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1561856823:40995:15)

    at isLoadingComponent (http://127.0.0.1:3000/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1561856823:36628:21)

    at getLoadingState (http://127.0.0.1:3000/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1561856823:36665:15)

    at http://127.0.0.1:3000/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1561856823:36711:36

    at computeMergedProps (http://127.0.0.1:3000/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1561856823:32367:25)

    at Connect.updateMergedPropsIfNeeded (http://127.0.0.1:3000/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1561856823:32481:31)

    at Connect.render (http://127.0.0.1:3000/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1561856823:32605:41)

    at ce (http://127.0.0.1:3000/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1561856823:98:136)

    at qg (http://127.0.0.1:3000/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1561856823:97:440)

    at hi (http://127.0.0.1:3000/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1561856823:104:285)

Not sure if there is an alternative to grasia for loading files after React?

Akronix commented 5 years ago

I'm afraid I have no idea of any alternative. I'm sorry :confused:.

I see. I'm afraid to say that I won't put any personal effort in upgrading grasia-dash-components to dash 1.0.0, unfortunately :disappointed:. Thus, I'm closing this for now. If I ever have some spare time, I'll try to at least make it compatible with the last version of dash 0.x.y.

zouhairm commented 5 years ago

@Akronix : I understand, but I think it'd be better to keep this issue open so that others are aware of the problem (otherwise it's not visible in the issues tab anymore as default only shows open issues).

With that being said, do you have any hints on how to fix it? I could try to do a PR if you point me in the right direction.

Thanks,

zouhairm commented 5 years ago

Hmm, after some thought, I realized that there are a few extra components here that are not really needed for my purpose (and others on dash) - namely using the Import(src=...)

So I decided to publish another package that just has the defered Import: https://pypi.org/project/dash-defer-js-import/

I'll push to github and post about it on the plotly/dash forum soon.

Akronix commented 5 years ago

@zouhairm Cool! Did you publish the code anywhere?

zouhairm commented 5 years ago

@Akronix yes:

I’ve published it to npm as well as pypi so anyone can use pip to install it.

pip install dash_defer_js_import

Alternatively, it can be built locally from source code which I published here: https://github.com/zouhairm/dash_defer_js_import

It can then be used as follows:

import dash_defer_js_import as dji

# Dash server init and layout setup
# ...

app.layout = html.Article(dji.Import(src="./path/to/script.js"))
yueyericardo commented 4 years ago

@Akronix yes:

I’ve published it to npm as well as pypi so anyone can use pip to install it.

pip install dash_defer_js_import

Alternatively, it can be built locally from source code which I published here: https://github.com/zouhairm/dash_defer_js_import

It can then be used as follows:

import dash_defer_js_import as dji

# Dash server init and layout setup
# ...

app.layout = html.Article(dji.Import(src="./path/to/script.js"))

Thanks a million!!!