Fix- Flowchart does not load for static data inputs

[studioswong]

Description

fixes issue 840.

Currently the flowchart would not load for static data soures, which causes problems for our npm component usecase. This PR fixes that.

Development notes

This problem is mainly due to the fact that the getGraphInput action does not get dispatched on first load ( it is only called via web worker which will only be triggered for future state changes. ) I have added an action within the configureStore method to ensure this action still gets fired on first load.

I have also modified the test set up with mocking the configureStore function to ensure it properly configures the store.

Please note that I had not added any tests for this given the lack of a test suite setup for store.js, and it might be an overkill to add that just for testing the dispatch of this action( especially this is a quick fix with the aim to be included in the release tomorrow).

That said, happy to look into adding one for store.js in general in a future ticket.

QA notes

Try loading the app via one of the static data sources - we should now be able to load the flowchart properly.

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[tynandebold]

This is great and is working as expected, though I think your added if condition is always true. Looks like you need to pass a second argument into the configureStore function here so the app knows if it should calculate the graph when the store is being configured.

this.store = configureStore(initialState, initialState.dataSource);

[studioswong]

This is great and is working as expected, though I think your added if condition is always true. Looks like you need to pass a second argument into the configureStore function here so the app knows if it should calculate the graph when the store is being configured.

this.store = configureStore(initialState, initialState.dataSource);

good catch, turns out I forgot to commit this change - I've just pushed it in.

The change would be this.store = configureStore(initialState, this.props.data);

[rashidakanchwala]

LGTM. thanks @studioswong

[rashidakanchwala]

we have this same issue with running kedro-viz on jupyter notebooks and databricks. the first time -- it displays a blank viz and then when u click on something, the viz loads. i am hoping this fix will sort that out too... magically ;)

[studioswong]

we have this same issue with running kedro-viz on jupyter notebooks and databricks. the first time -- it displays a blank viz and then when u click on something, the viz loads. i am hoping this fix will sort that out too... magically ;)

interesting - that sounds like it could be likely a related issue - I imagine both uses cases are passing a json object directly as a prop instead of retrieving data from the server?

[tynandebold]

Working great