Extra line in header table in version 1.19 & 1.20

Ask for help
1

I’m seeing this in v1.19 & v1.20 (but not in 1.14, haven’t tried the versions in between)

there seems to be a problem with how a custom logo interacts with the information in the report_header_info.

the following yaml results in screenshot below it. Notice the empty lines in the header-info table:

title: "My Best Report yet"
custom_logo: "./free-circular-logo-999x999.jpg"
custom_logo_title: "Best logo"
subtitle: "subtitle"
intro_text: "An analysis pipeline"
show_analysis_paths: False
report_header_info:
  - plot_genes: "GeneA,GeneB"
  - n_pcs: "50"
  - threshold: "1.1"
custom_data:
  my_data_type:
    id: "runtime_information_table"
    section_name: "Run Information"
    plot_type: "table"
    pconfig:
      id: "runtime_info_table"
      title: "?"
      col1_header: "Parameter"
    data:
      batch_id:
        value: "1234"

image
image829×794 106 KB

2

Hi @yfarjoun,

Are you able to attach the HTML report itself to this post? That would help to replicate the issue.

For the future, things like this where you think that there’s a bug in MultiQC are better put in as GitHub issues. They can be triaged and handled better there. The forum is best for usage questions and getting help etc.

Phil

3

I’m happy to move this issue there.

My-Best-Report-yet_multiqc_report.html.gz (1.5 MB)

(sorry, was not able to upload the html directly)

4

Yeah, as I suspected this is not an issue of having blank lines, but rather an issue with the CSS in the report.

The logo image is put on the right hand side of the page using a CSS float. Then the parameters in the report_header_info box are formatted as a <dl> with a layout that uses floats and a clearfix. This clearfix clashes with the logo float and means that the second item drops down to below the bottom of the logo. You can see this by making the browser small so that the image gets put up top and not on the same horizontal, then the report_header_info box is fine. You can also mess with the CSS in the browser console to fix it.

The image has a maximum width set but not a maximum height. A quick fix is to just use a smaller logo image. Then it doesn’t clash with the list and it renders fine:

CleanShot 2024-02-27 at 23.39.58@2x
CleanShot 2024-02-27 at 23.39.58@2x2578×1116 222 KB

A longer fix is possible in the report template (likely simply setting a maximum height), but we’re about to do a big overhaul of the template anyway. But maybe it’s worth putting a GitHub issue in about it if you like, just so that it doesn’t get forgotten.

The only thing that doesn’t make sense to me is that anything would change between v1.14 and more recent versions. I don’t remember us changing anything in the template that would affect this over those versions. Could it be a coincidence to do with different images used in the template maybe? Or perhaps I’ve just forgotten some change that I made back closer to v1.14…

Phil

1 Like