Hot reload #73

T4rk1n · 2018-08-31T20:58:39Z

Available with the following version:

dash==0.27.0rc7
dash-renderer==0.14.0rc6

Add hot-reload capability on project file changes by periodically requesting a hash and checking it's the same hash as the initial one.

Adds:

Reloader component
reloadRequest api thunk.

Need plotly/dash#362

T4rk1n · 2018-09-11T20:00:27Z

@plotly/dash Ready for review!

rmarren1

Nice! There's two questions I had, and two newlines missing

rmarren1 · 2018-09-12T01:26:47Z

src/components/core/Reloader.react.js

+    }),
+    dispatch => ({dispatch})
+)(Reloader);
+


src/actions/api.js

rmarren1 · 2018-09-12T01:35:37Z

src/components/core/Reloader.react.js

+        if (!disabled && !this._intervalId) {
+            this._intervalId = setInterval(() => {
+                if (!this.state.reloading) {
+                    dispatch(getReloadHash());


Should state.reloading be set to true here? I do not see anywhere that state.reloading is changed, it seems to always be false.

I think it's a leftover from something I tried, I will remove thanks.

rmarren1 · 2018-09-12T01:55:22Z

src/reducers/reducer.js

+function rootReducer(reducer) {
+    return function(state, action) {
+        if (action.type === 'RELOAD') {
+            const {history} = state;


I there extra stuff in state that is stripped when you do this? I don't see what these two lines do, I don't think state is changed here

Everything but the history is stripped down, it triggers a soft reload.

Oh okay so everything else gets set to default except the history, looks good

Hmm, can you not combine this reducer into the recordHistory function that's already there? I'm not sure I understand why it is a separate reducer.

I think it should be separate from recordHistory. This reducer doesn't really change the history, it just removes everything else. It could have a different name though for sake of clarity, maybe like preserveHistoryOnReload

valentijnnieman

Left you a couple of questions!

valentijnnieman · 2018-09-13T14:27:50Z

src/reducers/reducer.js

+function rootReducer(reducer) {
+    return function(state, action) {
+        if (action.type === 'RELOAD') {
+            const {history} = state;


Hmm, can you not combine this reducer into the recordHistory function that's already there? I'm not sure I understand why it is a separate reducer.

valentijnnieman · 2018-09-13T14:35:32Z

src/components/core/Reloader.react.js

+            }
+            if (reloadHash.content.reloadHash !== this.state.hash) {
+                // eslint-disable-next-line no-undef
+                window.clearInterval(this._intervalId);


So the no-undef rule here should not trigger if it's sure that this._intervalId is set, right? Maybe it's better to write a check here that makes sure that it's not null, instead of disabling the rule.

The no-undef is for window, it highlight as error in pycharm.

The rootReducer is for soft-reload, it destroy the state of the store and then the other reducers can reload the application. I think it's cleaner to keep it separate as the logic for the historyReducer come after and they do different operations.

Ah ok! Hmm maybe that rule can be turned off globally then, if it's always going to trigger on window?

Last question: isn't it maybe better to put the rootReducer in a separate file, and call it something else, like reloadReducer or whatever?

maybe that rule can be turned off globally then

I think we can put window in a global exclude or something. Anyway it underline as error in IDE, I just hit alt-enter and select a fix, doesn't take more than a second.

Last question: isn't it maybe better to put the rootReducer in a separate file

It's only a couple lines and is the last reducer exported, keeping it in reducer make more sense to me.

valentijnnieman · 2018-09-13T14:36:09Z

src/components/core/Reloader.react.js

+                if (reloadHash.content.hard) {
+                    // Assets file have changed, need to reload them.
+                    // eslint-disable-next-line no-undef
+                    window.top.location.reload();


Hmm, why is the no-undef rule triggering here?

valentijnnieman · 2018-09-13T14:41:25Z

src/reducers/reducer.js

@@ -20,6 +20,7 @@ const reducer = combineReducers({
    dependenciesRequest: API.dependenciesRequest,
    layoutRequest: API.layoutRequest,
    loginRequest: API.loginRequest,
+    reloadHash: API.reloadRequest,


Any reason why it's named reloadHash here and reloadRequest on API.reloadRequest?

Good catch, I refactored reloadHash to reloadRequest to conform to the other API, I guess that one didn't follow up.

valentijnnieman · 2018-09-13T14:43:49Z

src/components/core/Reloader.react.js

+                disabled: true
+            }
+        }
+        this._intervalId = null;


Can _intervalId not be in state as well?

valentijnnieman · 2018-09-13T14:51:56Z

src/components/core/Reloader.react.js

+                hash: null,
+                interval,
+                disabled: false
+            }


What if this state is also handled in a reducer? Would there be value in having this state in the store? Perhaps saving the hash in the store for example would make it easier to at some point in the future to enable the store to be saved client-side, so that it can be rehydrated upon refreshing.

The hash is null at first, it is set in the state from the server on the first hash request so I don't think it needs to be rehydrated.

rmarren1

Just a few minor style changes 💃

rmarren1 · 2018-11-14T03:00:13Z

.gitignore

@@ -19,3 +19,4 @@ simple*

 *.csv
 .idea/
+.vscode


rmarren1 · 2018-11-14T03:06:50Z

src/components/core/Reloader.react.js

+                disabled: false,
+                intervalId: null,
+                packages: null,
+                max_retry: max_retry,


just max_retry

rmarren1 · 2018-11-14T03:20:54Z

src/components/core/Reloader.react.js

+                            );
+                            let node = it.iterateNext();
+
+                            while (node) {


Is node a proper iterator? You should be able to do const nodesToDisable = [...it.iterateNext()]

It's a proper iterator but it doesn't work, if there's no element found (asset file added) it will fail to make an array with the iterator.

rmarren1 · 2018-11-14T03:37:48Z

src/components/core/Reloader.react.js

+                                nodesToDisable.push(node);
+                                node = it.iterateNext();
+                            }
+                            nodesToDisable.forEach(n =>


I know we are trying to use ramda 🐏 in this repo even when a core library function would do the job. I think R.forEach would do the job.

rmarren1 · 2018-11-14T03:42:28Z

src/components/core/Reloader.react.js

+        } else if (reloadRequest.status === 500) {
+            if (this._retry > this.state.max_retry) {
+                window.clearInterval(this.state.intervalId);
+                // Integrate with dev tools ui?!


rmarren1 · 2018-11-14T04:00:38Z

src/reducers/reducer.js

+function rootReducer(reducer) {
+    return function(state, action) {
+        if (action.type === 'RELOAD') {
+            const {history} = state;


I think it should be separate from recordHistory. This reducer doesn't really change the history, it just removes everything else. It could have a different name though for sake of clarity, maybe like preserveHistoryOnReload

T4rk1n mentioned this pull request Aug 31, 2018

Hot reload plotly/dash#362

Merged

T4rk1n force-pushed the hot-reload branch from 1a78f29 to b0338df Compare September 5, 2018 17:45

T4rk1n changed the title ~~[WIP] Hot reload~~ Hot reload Sep 6, 2018

T4rk1n force-pushed the hot-reload branch from b0338df to 71a42e2 Compare September 7, 2018 20:56

T4rk1n requested review from chriddyp, rmarren1 and valentijnnieman September 11, 2018 19:59

rmarren1 suggested changes Sep 12, 2018

View reviewed changes

rmarren1 approved these changes Sep 12, 2018

View reviewed changes

valentijnnieman reviewed Sep 13, 2018

View reviewed changes

T4rk1n force-pushed the hot-reload branch 2 times, most recently from 9c9c797 to 232b6a4 Compare September 13, 2018 17:25

T4rk1n force-pushed the hot-reload branch from a4e0ea0 to 4661e21 Compare October 5, 2018 02:58

T4rk1n added 12 commits October 18, 2018 14:18

Add reloader.

d8e75cc

Only enable the reloader if hot reload enabled, add interval config.

2b90779

Rename reloadHash to reloadRequest.

86afb93

Add soft reload capability.

b138169

Remove reloading state.

c0c88b3

Rename reloadHash store to reloadRequests, add intervalId as state.

e7ba1cc

Support reloading added component packages.

1bff05b

Support reloading css files only.

5e4c1ca

Fix soft-reload clearInterval.

2911610

Add max_retry, stop the polling, send an alert.

3ecb101

Fix soft reload.

28e67af

format prettier.

c108d1d

T4rk1n force-pushed the hot-reload branch from d1c40fa to c108d1d Compare October 18, 2018 18:23

T4rk1n added 2 commits October 18, 2018 14:24

Delete .vscode, add to .gitignore

3eaf61d

exlint fixes.

dd88c65

rmarren1 approved these changes Nov 14, 2018

View reviewed changes

Small style fix.

89c8653

T4rk1n force-pushed the hot-reload branch from 6264635 to 89c8653 Compare November 14, 2018 17:57

T4rk1n added 4 commits November 14, 2018 13:22

Only insert a link tag if not deleted.

044838e

Ramda forEach.

97d884f

📛 rootReducer -> reloaderReducer

09e7a80

Update requirements versions

f08ed4b

T4rk1n force-pushed the hot-reload branch from a0f9ed9 to f08ed4b Compare November 14, 2018 20:31

T4rk1n added 3 commits November 14, 2018 15:33

Update version and changelog.

4f8b4ed

Fix changelog typo.

8ca20a5

Update bundles.

cabf3e3

T4rk1n merged commit a38da62 into master Nov 14, 2018

T4rk1n deleted the hot-reload branch November 14, 2018 21:09

rpkyle mentioned this pull request Sep 3, 2019

Need to implement hot reloading support in Dash for R plotly/dashR#125

Closed

rpkyle mentioned this pull request Sep 18, 2019

Provide support for hot reloading in Dash for R plotly/dashR#127

Merged

12 tasks

rpkyle mentioned this pull request May 18, 2020

Hot reloading support in Dash.jl plotly/Dash.jl#20

Closed

waralex mentioned this pull request May 19, 2020

Hot reload plotly/Dash.jl#25

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hot reload #73

Hot reload #73

T4rk1n commented Aug 31, 2018 •

edited

Loading

T4rk1n commented Sep 11, 2018

rmarren1 left a comment

rmarren1 Sep 12, 2018

rmarren1 Sep 12, 2018

T4rk1n Sep 12, 2018

rmarren1 Sep 12, 2018

T4rk1n Sep 12, 2018

rmarren1 Sep 12, 2018

valentijnnieman Sep 13, 2018

rmarren1 Nov 14, 2018

valentijnnieman left a comment

valentijnnieman Sep 13, 2018

valentijnnieman Sep 13, 2018

T4rk1n Sep 13, 2018

T4rk1n Sep 13, 2018

valentijnnieman Sep 14, 2018

valentijnnieman Sep 14, 2018

T4rk1n Sep 14, 2018

valentijnnieman Sep 13, 2018

valentijnnieman Sep 13, 2018

T4rk1n Sep 13, 2018

valentijnnieman Sep 13, 2018

valentijnnieman Sep 13, 2018

T4rk1n Sep 13, 2018

rmarren1 left a comment

rmarren1 Nov 14, 2018

rmarren1 Nov 14, 2018

rmarren1 Nov 14, 2018

T4rk1n Nov 14, 2018

rmarren1 Nov 14, 2018

rmarren1 Nov 14, 2018

rmarren1 Nov 14, 2018

@@ @@ -19,3 +19,4 @@ simple* @@
               *.csv
               .idea/
+              .vscode

Hot reload #73

Hot reload #73

Conversation

T4rk1n commented Aug 31, 2018 • edited Loading

T4rk1n commented Sep 11, 2018

rmarren1 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

valentijnnieman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rmarren1 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

T4rk1n commented Aug 31, 2018 •

edited

Loading