[WIP] Show included modules on pipeline pages

[lmReef]

trafficstars

Preview for #2722

[netlify[bot]]

✅ Deploy Preview for nf-core-main-site ready!

Name	Link
🔨 Latest commit	20853fbeeaa6c834a1bf164d9a3dacaa8639fab3
🔍 Latest deploy log	https://app.netlify.com/projects/nf-core-main-site/deploys/6850e3bd5f431700088349cf
😎 Deploy Preview	https://deploy-preview-3094--nf-core-main-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mashehu]

hmm, maybe make the "show more" button a bit more subtle, e.g. similar to how we do it in the module cards

[lmReef]

So the implementation for this in Astro is looking more scuffed than it needs to be. I think it could be better to abstract this out from the other places its implemented (module/subworkflow cards and pages) into a new svelte component so we can reuse it across all 3 places.

This approach should make it easier to maintain and fix issues like this going forward too.

I can do up a draft for now in svelte 5 and wait for #3047 before opening a new PR/updating this one. Let me know what you think.

Probably something along these lines with a few extras for handling the differences with pipelines:

<script lang="ts">
    const {
        tags,
        maxSliced = 5,
        type,
    }: { tags: string[]; maxSliced?: number; type: "modules" | "subworkflows" | "pipelines" } = $props();
    let expanded = $state(false);
</script>

<div class="tags-section mb-2">
    {#each expanded ? tags : tags.slice(0, maxSliced) as tag}
        <a
            href={`/${type}/${tag.replace("/", "_")}/`}
            class="badge fw-normal border border-info-subtle bg-info-subtle text-body me-2 text-decoration-none"
        >
            {tag}
        </a>
    {/each}
</div>
<span
    class="text-small cursor-pointer tags-show-more"
    title={`click to show all ${tags}`}
    on:click={() => (expanded = !expanded)}
    on:keydown={() => (expanded = !expanded)}
    role="button"
    data-bs-toggle="tooltip"
    data-bs-delay="500">+{tags.length - maxSliced} more {tags}</span
>

[mashehu]

great idea!

[mashehu]

#3047 is merged so give the component approach a shot

[lmReef]

awesome! I'll get started

[mashehu]

any updates for this @lmReef?

[lmReef]

hey @mashehu, yep! those last changes I made are working in local dev, was just hesitant to mark the PR as ready for review because there's still placeholder code in some places while deciding/tweaking things, happy to change that if its more clear

placeholder modules button in tab nav

modules + subworkflows in the sidebar on pipeline page

[mashehu]

Nice! What would you like to put in the modules tab, that is not already in the sidebar?

[lmReef]

I don't think the tab is necessary just tried it out as an option, happy to remove it and move along with the sidebar!

[mashehu]

I fixed an polished a few things. if you are happy with the changes feel free to merge. Very nice work!

[lmReef]

@mashehu seems I'm not authorized to push to main so requested review :+1: