Skip to content

Commit

Permalink
Merge pull request nf-core#2744 from mashehu/fix-modules-description
Browse files Browse the repository at this point in the history
Fix modules parameter tables
  • Loading branch information
mashehu authored Sep 27, 2024
2 parents 563b3cd + ae58be4 commit 428519f
Show file tree
Hide file tree
Showing 10 changed files with 201 additions and 55 deletions.
8 changes: 1 addition & 7 deletions sites/main-site/src/components/ThemeSwitch.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,7 @@
</script>

<div class="dropdown" title="Change theme" data-bs-toggle="tooltip" data-bs-placement="bottom">
<button
class="nav-link dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
title="Change theme"
>
<button class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="theme-icon-light" class:d-none={theme !== 'light'}>
<slot name="light" />
</i>
Expand Down
12 changes: 12 additions & 0 deletions sites/main-site/src/components/component/ComponentCard.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
name: string;
keywords?: string[];
modules?: string[];
components?: string[];
};
pipelines?: {
name: string;
Expand Down Expand Up @@ -67,6 +68,17 @@
{/if}
</div>
{/if}
{#if component.type !== 'module' && component.meta.components}
<div class="text-body-secondary align-self-bottom components">
<span class="text-small">Includes:</span>
{#each component.meta.components as sub_component}
<span
class={`badge fw-normal border border-info-subtle bg-info-subtle text-body me-2 ${component.type}-topic`}
>{sub_component}</span
>
{/each}
</div>
{/if}
{#if component.subworkflows}
<span class="text-body-secondary align-self-bottom">
<span class="text-small">Part of:</span>
Expand Down
10 changes: 10 additions & 0 deletions sites/main-site/src/components/component/ComponentListing.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,9 @@
<ListingTableHeader name="Name" />
<th scope="col">Description</th>
<th class="keywords" scope="col">Keywords</th>
{#if components[0].type !== 'module'}
<th class="components" scope="col"> Components</th>
{/if}
<ListingTableHeader
name="# Pipeline integrations"
title={'Sort by number of pipelines with ' + components[0].type}
Expand Down Expand Up @@ -132,6 +135,13 @@
{/each}
<!-- {/if} -->
</td>
{#if component.type !== 'module'}
<td class="components">
{#each component.meta.components as sub_component}
<span class={`badge me-2 ${component.type}-topic`}>{sub_component}</span>
{/each}
</td>
{/if}
<td class="text-end">
{#if component.pipelines}
{component.pipelines.length}
Expand Down
49 changes: 49 additions & 0 deletions sites/main-site/src/components/component/ComponentParamItem.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
import { Markdown } from '@astropub/md';
import ComponentParamList from './ComponentParamList.astro';
const { name, value, depth = 0, lastItem = false } = Astro.props;
const { type, description, pattern } = value;
const hasNestedParams = Array.isArray(value) || (typeof value === 'object' && !type);
---

{
name.slice(0, 6) !== 'input[' && (
<div
class:list={[
`row align-items-center ${depth > 0 ? 'ms-' + depth * 2 : ''}`,
{ 'border-bottom': !lastItem },
]}
>
<div class="col-12 col-md-4 col-xxl-3 small-h">
<h4 id={name + '_' + depth} class="module-row-name-id d-flex align-items-center mb-0 text-start">
<code>
{name}
{type && <span class="opacity-75 ms-0 small">:{type}</span>}
</code>
<a href={'#' + name + '_' + depth} class="header-link scroll_to_link me-2 mb-2">
<span class="fas fa-link" aria-hidden="true" />
</a>
</h4>
</div>
<div class={`col-12 description py-1 small col-md-${pattern ? '5' : '7'}`}>
{description && <Markdown of={description.replace(/(\n)/g, ' \n').replace(/\*./g, '\\*.')} />}
</div>
<div class={`col-12 col-md-${pattern ? '4' : '1'} ms-auto`}>
{pattern && <code class="float-end pattern">{pattern}</code>}
</div>
</div>
)
}
{
hasNestedParams && (
<div class="col-12 nested">
<ComponentParamList params={value} depth={depth + 1} />
</div>
)
}
<style>
.description :global(p) {
margin-bottom: 0;
}
</style>
23 changes: 23 additions & 0 deletions sites/main-site/src/components/component/ComponentParamList.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
import ParameterItem from './ComponentParamItem.astro';
const { params, depth = 0 } = Astro.props;
---

{
params.map((param, i) => {
const [name, value] = Object.entries(param)[0];
return (
<div class:list={[{ 'card card-body mt-3 py-1': depth === 0 }]}>
<ParameterItem
name={name}
value={value}
depth={depth}
lastItem={i === params.length - 1 && depth > 0}
/>
</div>
);
})
}

<style></style>
62 changes: 20 additions & 42 deletions sites/main-site/src/components/component/ComponentParamTable.astro
Original file line number Diff line number Diff line change
@@ -1,69 +1,47 @@
---
const { name, icon, params } = Astro.props;
let { name, icon, params = [] } = Astro.props;
import ComponentParamList from './ComponentParamList.astro';
import { Markdown } from '@astropub/md';
export interface Props {
name: string;
icon: string;
params?: {}[];
params?: any[];
}
if (name == 'Input') {
params = params.map((param, i) => {
param = Array.isArray(param) ? param : [param];
return { [`input[${i}]`]: param };
});
}
---

<h2 id={name.toLowerCase()} class="text-success ms-n3">
<i class={`fad ${icon} fa-fw`}></i>
{name}
<a href={'#' + name.toLowerCase()} class="header-link scroll_to_link"
><span class="fas fa-link" aria-hidden="true"></span>
<a href={'#' + name.toLowerCase()} class="header-link scroll_to_link">
<span class="fas fa-link" aria-hidden="true"></span>
</a>
</h2>

{
params ? (
params.length > 0 && (
<div class="row border-bottom border-3">
<div class="col-12 col-md-3 col-xxl-2">
<span class="text-body-secondary">Name (Type)</span>
<div class="col-12 col-md-4 col-xxl-3">
<span class="text-body-secondary ps-3">
name<span class="ps-0 font-monospace opacity-75 small">:type</span>
</span>
</div>
<div class="col-12 col-md-6">
<span class="text-body-secondary text-start">Description</span>
<div class="col-12 col-md-7">
<span class="text-body-secondary text-start ps-3">description</span>
</div>
<div class="col-12 col-md">
<span class="text-body-secondary float-end">Pattern</span>
<span class="text-body-secondary float-end">pattern</span>
</div>
</div>
) : (
''
)
}
{
params ? (
params.map((param) => {
const name = Object.keys(param)[0];
const { type, description, pattern } = param[name];
return (
<div class="row border-bottom align-items-center">
<div class="col-12 col-md-3 col-xxl-2 small-h">
<h4 id={name} class="module-row-name-id d-flex align-items-center mb-0">
<code>{name}</code>
{type && <span class="text-body-secondary ms-1"> ({type})</span>}
<a href={'#' + name} class="header-link scroll_to_link me-2 mb-2">
<span class="fas fa-link" aria-hidden="true" />
</a>
</h4>
</div>
{params.length > 0 ? <ComponentParamList params={params} /> : <p class="text-body-secondary">No input parameters</p>}

<div class={'col-12 description py-1 small col-md-' + (pattern ? '5' : '7')}>
<Markdown of={description?.replace(/(\n)/g, ' \n').replace(/\*./g, '\\*.')} />
</div>
<div class={'col-12 col-md-' + (pattern ? '4' : '1') + ' ms-auto'}>
{pattern && <code class="float-end pattern">{pattern}</code>}
</div>
</div>
);
})
) : (
<p class="text-body-secondary">No input parameters</p>
)
}
<style>
h4 {
overflow: hidden;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
import { Markdown } from '@astropub/md';
let { name, icon, params = [] } = Astro.props;
export interface Props {
name: string;
icon: string;
params?: any[];
}
---

<h2 id={name.toLowerCase()} class="text-success ms-n3">
<i class={`fad ${icon} fa-fw`}></i>
{name}
<a href={'#' + name.toLowerCase()} class="header-link scroll_to_link"
><span class="fas fa-link" aria-hidden="true"></span>
</a>
</h2>

{
params ? (
<div class="row border-bottom border-3">
<div class="col-12 col-md-3 col-xxl-2">
<span class="text-body-secondary">
name<span class="ps-0 font-monospace opacity-75 small">:type</span>
</span>
</div>
<div class="col-12 col-md-6">
<span class="text-body-secondary text-start">description</span>
</div>
<div class="col-12 col-md">
<span class="text-body-secondary float-end">pattern</span>
</div>
</div>
) : (
''
)
}
{
params ? (
params.map((param) => {
const name = Object.keys(param)[0];
const { type, description, pattern } = param[name];
return (
<div class="row border-bottom align-items-center">
<div class="col-12 col-md-3 col-xxl-2 small-h">
<h4 id={name} class="module-row-name-id d-flex align-items-center mb-0">
<code>
{name}
{type && <span class="opacity-75 small">:{type}</span>}
</code>
<a href={'#' + name} class="header-link scroll_to_link me-2 mb-2">
<span class="fas fa-link" aria-hidden="true" />
</a>
</h4>
</div>

<div class={'col-12 description py-1 small col-md-' + (pattern ? '5' : '7')}>
<Markdown of={description?.replace(/(\n)/g, ' \n').replace(/\*./g, '\\*.')} />
</div>
<div class={'col-12 col-md-' + (pattern ? '4' : '1') + ' ms-auto'}>
{pattern && <code class="float-end pattern">{pattern}</code>}
</div>
</div>
);
})
) : (
<p class="text-body-secondary">No input parameters</p>
)
}
<style>
h4 {
overflow: hidden;
}
.description :global(p) {
margin-bottom: 0;
}
.pattern {
line-break: anywhere;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
}
}
const graphs = document.getElementsByClassName('mermaid');
console.log('grpahs', graphs);
if (document.getElementsByClassName('mermaid').length > 0) {
renderDiagrams(graphs);
window.addEventListener('theme-changed', (e) => {
Expand Down
2 changes: 1 addition & 1 deletion sites/main-site/tests/main-site.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ test('dark mode', async ({ page }) => {
// get background-color value
const bodyBackgroundColorLight = await page.evaluate(() => getComputedStyle(document.body).backgroundColor);
//click dark mode dropdown
await page.getByRole('button', { name: 'Change theme' }).click();
await page.getByRole('button', { name: 'Change theme button' }).click();
//click dark mode
await page.getByRole('button', { name: 'dark' }).click();
const bodyBackgroundColorDark = await page.evaluate(() => getComputedStyle(document.body).backgroundColor);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
import { Markdown } from '@astropub/md';
import ComponentParamTable from '@components/component/ComponentParamTable.astro';
import SubworkflowParamTable from '@components/component/SubworkflowParamTable.astro';
import SidebarStats from '@components/sidebar/SidebarStats.astro';
import ComponentPageLayout from '@layouts/ComponentPageLayout.astro';
import components_json from '@public/components.json';
Expand Down Expand Up @@ -44,16 +44,16 @@ const { subworkflow } = Astro.props;
{
subworkflow.meta.input ? (
<div class="subworkflow input mb-5">
<ComponentParamTable name={'Input'} icon={'fa-sign-in'} params={subworkflow.meta.input} />
<SubworkflowParamTable name={'Input'} icon={'fa-sign-in'} params={subworkflow.meta.input} />
</div>
) : (
<div class="subworkflow input mb-5">
<ComponentParamTable name={'Input'} icon={'fa-sign-in'} />
<SubworkflowParamTable name={'Input'} icon={'fa-sign-in'} />
</div>
)
}
<div class="subworkflow output mb-5">
<ComponentParamTable name={'Output'} icon={'fa-sign-out'} params={subworkflow.meta.output} />
<SubworkflowParamTable name={'Output'} icon={'fa-sign-out'} params={subworkflow.meta.output} />
</div>
</div>
</div>
Expand Down

0 comments on commit 428519f

Please sign in to comment.