Bug report - Trends page not loading

[chrispyatt]

All the other pages of the site load fine, but the Trends page is just a blank template (i.e. the MegaQC header and menu buttons are there, but the filtering and plotting parts do not appear).

I'm running this through the docker container with a local postgres database. I have seen the issue before but can't remember what, if anything, I did to fix it. I don't see it when using the same container on my laptop so it's not a very consistent bug. This page does sometimes take a long time to load on other platforms so I wonder whether it is struggling to render something and crashing silently?

Any idea what I could change to get the plots to load up? Or alternatively how can I see some debugging info? I remember when running megaqc outside of docker, it printed each server request to terminal so that at least might be helpful but I don't see it currently.

[multimeric]

Hmm, it's hard to know what is happening here. Firstly, can you print out the Chrome console output, and secondly, could you try setting FLASK_ENV=development as an environment variable in the docker config? I think you can either add it in the docker compose file or maybe on the command line.

[chrispyatt]

Chrome console:

On the network tab, it seems to be getting stuck on the content download stage (achieved in a few milliseconds on my local machine).
Network tab:

I have started a new container with the FLASK_ENV set as above but do not see any additional output.

[chrispyatt]

Update: this seems to be a Chrome specific issue (although only on that particular server). I can load the trends page using Firefox, although it is still quite flaky. Is there a way to slim the page down, on the assumption that it's simply trying to load too many things for either our server, or perhaps the BYOD connection, to handle?

[multimeric]

Hmm I don't think MegaQC uses web sockets, so I don't think those errors are actually caused by MegaQC. If it's working on firefox, can you try disabling your chrome extensions e.g. with chrome --disable-extensions (or chrome.exe) and see what happens?

Also, can you tell me which requests are failing/being slow in the network tab? It's not clear to me from your screenshot.

[chrispyatt]

Sorry this got forgotten over Christmas. We've had issues loading the page in Firefox too, it just seems to fare slightly better than Chrome (where it always fails). It's specifically the trends.js script that fails. So when I access the Trends page, I get the generic MegaQC layout but none of the filters/plots appear.

[gouinK]

I am getting the same error, but I am not running it in a container. It seems to be pointing to /static/js/trend.js which does not actually exist, or at least for me it doesn't.

[multimeric]

I will need more information about how you have installed MegaQC, @gouinK. A blank page suggests that you haven't compiled the JavaScript.

[gouinK]

Ah yes, I was following this and did not see steps 9 and 10. Will try now, thanks!

[gouinK]

Ok I successfully compiled. The trend.js was in src so I copied it over to static/js. Page is still blank though, here is the output from the request:

127.0.0.1 - - [08/Feb/2023 03:28:27] "GET /trends/ HTTP/1.1" 200 -
127.0.0.1 - - [08/Feb/2023 03:28:27] "GET /_debug_toolbar/static/css/toolbar.css?0.8125436329349774 HTTP/1.1" 200 -
Console output:

All of the other pages (Report Plot, Data Distributions, Compare Data) work fine.

[multimeric]

No that's not right. Please don't copy the source into the static dir, it's in a completely different format. Can you instead run npm run build please? I had thought that npm run watch which you should have run would do that for me, but perhaps it no longer does.

[gouinK]

Ha ok I'm dumb, alright I wiped everything that I had and did a fresh install (including npm run build at the end). It looks like the build succeeded, the output was this followed by a bunch of [built] statements:

Going into the trends page, I still get this same syntax error:

[multimeric]

Can you post the output of ls -l megaqc/static/js? If everything has built correctly, you should have a date indicating that the trend page was just compiled, e.g. 8 Feb 17:28 trend.js

[gouinK]

[gouinK]

After some testing, I did a fresh install and used Node version 16.15.1, and now it works great. Maybe the Node version that I was using previously was outdated.

[fgvieira]

I am having the same issue, and I also do not have any megaqc/static/js/trend.js file.
I installed MegaQC using pip (pip install git+https://github.com/ewels/MegaQC.git), and not sure how to build trends.js.

@gouinK that Node you updated, is it nodejs on conda?