Relative image paths in HTML

[ewels]

Hi there,

Many thanks for this tool! We use it in the @nf-core / viralrecon pipeline. I'm new to this type of analysis and am just poking around my first proper run of the pipeline.

I noticed that in the HTML report, the image embeds aren't working for me. When I look at the HTML source, the <img> src is an absolute file path back to the location that the pipeline ran on the server. The above pipeline is written in Nextflow which executes each sub-task in its own directory before copying final results to a folder. So even if I hadn't moved the report from my cluster that would still break each report.

I wonder if the HTML report could instead use relative image paths instead of absolute? If I edit in the browser from this:

<a href="file:///cluster/path/analysis/work/0a/7489264fc24b66e4ef634ad280a2303/NO_GROUP/P1234_567/images/P1234_567_REF.png" target="_blank">
<img src="file:///cluster/path/analysis/work/0a/7489264fc24b66e4ef634ad280a2303/NO_GROUP/P1234_567/images/P1234_567_REF.png" alt="REF">
</a>

to this:

<a href="images/P1234_567_REF.png" target="_blank">
<img src="images/P1234_567_REF.png" alt="REF">
</a>

..then the report can be moved around and the images load properly.

A very quick poke around the package source code (it's late here) makes me think that it's probably the following line that needs to be tweaked:

plasmidID/bin/summary_report_pid.py

Line 133 in 19f622f

return 'file://' + os.path.join(root, name)

I guess that using a relative path here will propagate through to the HTML report? e.g. something like this:

return os.path.relpath(os.path.join(root, name), sample_folder)

However as I've only looked at the code for about 5 minutes, I'm not sure if this will affect functionality elsewhere and break stuff..

Anyway, let me know what you think! Happy to prepare a PR for this change next week if you like (or please go ahead if you'd rather as it's such a small change).

Phil