Better practices using MultiQC in Quarto Notebooks for sets of images

Ask for help
1

I’m currently using a Quarto Notebook to make custom content panels for MultiQC because I would like to display tabbed images in a certain order in addition to summaries of logs of other supported tools.

Since multiqc also became a python package, I reworked a demo to use it inside Quarto rather than making a custom panel. Now I’m wondering though if it is better practice, or should I be doing this another way. I understand including these images make the report large, but we generate sets of these multiple times as they’re diagnostic, and I’m not sure if there’s another way to sumarise the data better.

What I’m asking here is what would you do differently to this, in particular with regard to displaying sets of images like here: nextflow-quarto-multiqc-demo/docs/multiqc_report/quartoMultiqcDemo.qmd at f2226c8ef67679423554e9828a13199746edf3c0 · mahesh-panchal/nextflow-quarto-multiqc-demo · GitHub?

Edit: I realise I’m thinking about this in the wrong way. The notebook should be guiding the reader through a narrative and using what MQC has stored as objects/plots to answer questions, while the MQC report itself remains as a summary.
So the question is, how should I include this kind of custom content in the MQC object for writing at the end?

3 Likes
2

Including images as custom content should not be a problem: Custom content - MultiQC

If you want to have more control over output styling, such as tabs etc then you’ll need to create a HTML snippet manually and insert that as custom content. Or write Python code for a bespoke MultiQC module to handle it (which may be nicer and end up being similar code anyway).

Does that answer your question?

3

Yes, I had a feeling that was the case. My issue though is that I was using Quarto to transform the code generated markdown into html and then included that as a custom panel. As the code within the notebook only produces Markdown, I’m missing the conversion step running MQC directly in the notebook. I would need to change the code to write HTML instead ( so I need to find a library for that ).

Does any of the libraries MQC uses support making tabbed html output ( so I only need to label a class or something )?

4

MultiQC uses Bootstrap for rendering front-end, so you can use their classes and probably also Javascript components: Bootstrap

Note that we hope to upgrade to the latest version in the near future though, which will change basically all of the classes and components :see_no_evil: :sweat_smile:

MultiQC should also be able to render markdown. It does that in section help text and descriptions already. If it’s not a valid custom content file type then it could be quite easily :thinking: Do you have anything special in the markdown or just text? Feel free to open an issue about it if that’d be interesting.

Phil

5

It’s basically this

::: {.panel-tabset}

## Panel 1

[Image 1](/path/to/image1)

## Panel 2

[Image 2](/path/to/image2)

:::

So it’s using Pandoc Markdown’s div delimiters to make the output.

So how would I include this in the Quarto script?

    ...
    markdown = "\n\n".join(tabs) # this is the Markdown string above
    print(markdown)

    module = multiqc.BaseMultiqcModule(
        name="GenomeScope2",
        anchor="genomescope_2",
    )
    module.add_section(
        content=markdown,    # What do I fix here?
        name="My metrics",
        anchor="genome_scope_2",
        description="Genome Scope2 Panel",
    )
    multiqc.report.modules.append(module)

I guess first I need to convert the markdown to html. Are there packages already included in python with MultiQC that I can use for this?
And then I need to include the custom styling somewhere.

content=MarkdownIt().render(markdown)

will make html, but doesn’t make a div from the :::

6

Yeah the ::: is non-standard, so that’s going to be difficult :sweat:

MultiQC uses the regular markdown package. It has a load of extensions, I don’t think that any of these are being used within MultiQC currently but it looks like they’re part of the main library so I guess they should be fine to use. Though I’m not sure that any will do what you’re looking for here.

HTML such as <div> should be valid markdown though, so you could potentially just encode that manually? Or do some basic string replacement if you want the original markdown syntax.

content=markdown,    # What do I fix here?

content is HTML, description is the field that handles markdown. So just stick everything in description and that should mostly work I think.

Do you really need custom tabs? :eyes:

7

What do you suggest for other ways to do this?
Here’s the html from the demo code linked above. The actual code would be between 1-3 sections ( PacBio, HiC, ONT ) with each of the 4 tabs.

quartoMultiqcDemo.html (3.1 MB)

8

This fits well with the model that MultiQC has for multiple datasets in bar / line plots etc.

I feel like it should be possible to do this with MultiQC Python code :thinking: But I’m not sure how or if. With bar plots etc you just provide a list of data dicts. Would need to do some digging to see if it’s possible with images.