MultiQC / MegaQC

Web application to collect and visualise data across multiple MultiQC runs.
http://megaqc.info/
GNU General Public License v3.0
94 stars 28 forks source link

Bug report - Trends page not loading #426

Open chrispyatt opened 1 year ago

chrispyatt commented 1 year ago

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.

Screenshot from 2022-11-10 14-59-48

multimeric commented 1 year ago

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 commented 1 year ago

Chrome console: image

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: image

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

chrispyatt commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

gouinK commented 1 year ago

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

gouinK commented 1 year ago

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: Screen Shot 2023-02-07 at 7 35 19 PM

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

multimeric commented 1 year ago

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 commented 1 year ago

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:

Screen Shot 2023-02-07 at 9 50 32 PM

Going into the trends page, I still get this same syntax error: Screen Shot 2023-02-07 at 9 51 19 PM

multimeric commented 1 year ago

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 commented 1 year ago
Screen Shot 2023-02-08 at 8 34 29 AM
gouinK commented 1 year ago

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 commented 9 months ago

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?