Mermaid improvements

[ewels]

• Added CSS styling for the mermaid DAG
  • Uses VSCode CSS classes, so matches the current theme
  • Has fallback values in case rendering outside of VSCode context (see below)
• Added button to copy mermaid code in a markdown code block
  • Perfect for pasting into GitHub issues!
• Added button to export SVG
  • Exports the rendered diagram from the DOM. Does not include styling.
• Added button to export HTML
  • Slightly thinner version of the same HTML as shown in VSCode
  • Uses fallback CSS styling so has Nextflow green ✨

The HTML export gets a bit meta, but hopefully the code makes some sense. Let me know if you want me to clean it up at all (eg. splitting into separate files etc).

Usage / colour schemes:

CleanShot.2024-11-28.at.16.26.16.mp4

Exported SVG:

Exported HTML:
DAG-BISMARK-demo.html.zip

Exported mermaid markdown:

flowchart TB
    subgraph BISMARK
    subgraph take
    v2["bismark_index"]
    v3["skip_deduplication"]
    v0["reads"]
    v1["fasta"]
    v4["cytosine_report"]
    end
    v6([BISMARK_ALIGN])
    v8([SAMTOOLS_SORT_ALIGNED])
    v12([BISMARK_DEDUPLICATE])
    v16([BISMARK_METHYLATIONEXTRACTOR])
    v18([BISMARK_COVERAGE2CYTOSINE])
    v20([BISMARK_REPORT])
    v22([BISMARK_SUMMARY])
    v24([SAMTOOLS_SORT_DEDUPLICATED])
    v26([SAMTOOLS_INDEX_DEDUPLICATED])
    subgraph emit
    v32["versions"]
    v30["dedup"]
    v31["mqc"]
    v29["bam"]
    end
    v0 --> v6
    v1 --> v6
    v2 --> v6
    v6 --> v8
    v6 --> v12
    v2 --> v16
    v12 --> v16
    v16 --> v18
    v1 --> v18
    v2 --> v18
    v16 --> v20
    v6 --> v20
    v12 --> v20
    v16 --> v22
    v6 --> v22
    v12 --> v22
    v12 --> v24
    v24 --> v26
    v8 --> v29
    v24 --> v30
    v16 --> v31
    v20 --> v31
    v22 --> v31
    v6 --> v31
    v12 --> v31
    v16 --> v32
    v18 --> v32
    v20 --> v32
    v22 --> v32
    v6 --> v32
    v24 --> v32
    v8 --> v32
    v26 --> v32
    v12 --> v32
    end

Loading

[bentsherman]

Today I am thankful for you Phil 😄

[maxulysse]

Today I am thankful for you Phil 😄

just today?

[ewels]

Today I am thankful for you Phil 😄

just today?

Thanksgiving 😉

[ewels]

For the record, stuff I wanted to do and haven't figured out yet:

• Dim all elements except current node + directly connected lines on node hover
• Click take / emit elements to remove their lines / drop their opacity

In both cases it's because the connector lines in the SVG are semantically unconnected to the node elements. So it's impossible to use CSS selectors alone to control stuff like hover colours 😞

Both are pretty low priority though and I won't be that sad if they never happen. Moving to topic channels in nf-core should negate most of the need for the second one anyway.

The styling of this PR, and the action buttons can be ported to the Nextflow HTML DAG export if we want.

[ewels]

I think I might be able to get the exported mermaid SVG to use the Nextflow greens too 🤔 If I use the mermaid built-in theming with the backup colours, then still override those in CSS. I think that might work. I'll give it a go later.

[ewels]

It worked! Exported SVGs now also with custom styling 🎉

I think that this is functionally complete now and ready for review / merge.