react-router links fails to load plugin

[GoelBiju]

Description:

When changing the location to the plugin page (/runs/:runId/visualisations/:visualisationName/data) the plugin fails to load. This is not the case when visiting directly. This could be the fact that the plugin will load directly onto the page upon loading but will not load when the "div" is just inserting into the DOM when navigating to the new page.

We need to work out a way to manually refresh the page or the component or trigger a re-render on the whole plugin.

Acceptance criteria:

• The plugin displays when navigating to it from another page in the website.

[GoelBiju]

This has been temporarily fixed in 5245dc2 by providing a direct link to the page (outside of react-router) so the whole React app will load again (including the plugin).

At the moment I am thinking the full fix for this would involve injecting the plugin again. The real issue seems to be with every re-render div for the plugin is removed and added back. If the plugin is at a different route then the div is not present and never loads the plugin.

[GoelBiju]

It is worth having a look at the registerApplication (https://single-spa.js.org/docs/api/) and seeing if there is something useful there like the location at which the application is active at.

It is used in loadMicrofrontends and includes the runScript function which injects the script for the plugin into the body of the document. It could be possible that these could be only done when the location matches the location the plugin loads.

[GoelBiju]

Just to test out some of these ideas, I manually used a URL of a known run and set the path to render the plugin for that and passed that to the loadApp function:

This is used by the activityFn for singleSpa.registerApplication to check if the current location pathname is the same as the path provided:

One other thing to note is that I have incorporated the idea that the script for the plugin (appUrl) should be injected when singleSpa calls loadReactApp. You can see in the loadReactApp function that the runScript is called here instead of when the plugins are resolved.

The result of this is that the script is not injected when the plugins are loaded by the frontend, instead only when the route matches. One thing we do have to do to get this actually working is to ensure that plugin checks are present before loading plugin to ensure it is loaded properly since the script is not injected and therefore the plugin does not create a register route action to register itself.

There other thing is to ensure the location matching works properly so that you can have a parameter like ':runId' to allow for a run ID in the path (like how matching is handled by react-router).

[GoelBiju]

The next step is to figure out how we can register the plugin with the frontend early (like normally having the script injected on the page when the frontend loads) to check which plugins/visualisations can be used.

At the moment I have labelled this as a "Not MVP", so I can come to this later on if it does cause an issue with any of the requirements.

[GoelBiju]

This issue has impacted deployment (#43) on Heroku and when building the application since react-router we cannot handle direct links to the data page which is outside of react-router.