Skip to content

Commit d8cccad

Browse files
PabloG02PabloG02
committed
Show Related Software tab only when available
1 parent 0a7ed86 commit d8cccad

File tree

3 files changed

+48
-55
lines changed

3 files changed

+48
-55
lines changed

‎src/app/features/containers/pages/container/container.component.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -546,16 +546,3 @@ table th {
546546
color: rgb(var(--picton-blue-300));
547547
border-color: rgba(var(--picton-blue-300), 0.3);
548548
}
549-
550-
.related-software-empty {
551-
display: flex;
552-
align-items: center;
553-
justify-content: center;
554-
padding: 48px 24px;
555-
text-align: center;
556-
color: rgba(var(--main-font-color), 0.6);
557-
font-size: 1rem;
558-
border: 1px dashed rgba(var(--main-font-color), 0.2);
559-
border-radius: 8px;
560-
background-color: rgba(var(--main-font-color), 0.02);
561-
}

‎src/app/features/containers/pages/container/container.component.html‎

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -114,13 +114,20 @@ <h2>{{ container.name }}</h2>
114114
</div>
115115
<div class="details-container">
116116
<div class="tabs-and-dropdown">
117-
<app-tabs (activeTab)="onTabSelectedGettingStarted($event)" [tabs]="[
118-
{ id: TabName.README, label: 'README', active: selectedTab() === TabName.README },
119-
{ id: TabName.TAGS, label: TabName.TAGS, active: selectedTab() === TabName.TAGS },
120-
{ id: TabName.TESTING, label: 'Testing', active: selectedTab() === TabName.TESTING },
121-
{ id: TabName.DOCKERFILE, label: 'Dockerfile', active: selectedTab() === TabName.DOCKERFILE },
122-
{ id: TabName.RELATED_SOFTWARE, label: 'Related software', active: selectedTab() === TabName.RELATED_SOFTWARE }
123-
]" />
117+
<app-tabs (activeTab)="onTabSelectedGettingStarted($event)" [tabs]="hasRelatedSoftware()
118+
? [
119+
{ id: TabName.README, label: 'README', active: selectedTab() === TabName.README },
120+
{ id: TabName.TAGS, label: TabName.TAGS, active: selectedTab() === TabName.TAGS },
121+
{ id: TabName.TESTING, label: 'Testing', active: selectedTab() === TabName.TESTING },
122+
{ id: TabName.DOCKERFILE, label: 'Dockerfile', active: selectedTab() === TabName.DOCKERFILE },
123+
{ id: TabName.RELATED_SOFTWARE, label: 'Related software', active: selectedTab() === TabName.RELATED_SOFTWARE }
124+
]
125+
: [
126+
{ id: TabName.README, label: 'README', active: selectedTab() === TabName.README },
127+
{ id: TabName.TAGS, label: TabName.TAGS, active: selectedTab() === TabName.TAGS },
128+
{ id: TabName.TESTING, label: 'Testing', active: selectedTab() === TabName.TESTING },
129+
{ id: TabName.DOCKERFILE, label: 'Dockerfile', active: selectedTab() === TabName.DOCKERFILE }
130+
]" />
124131
@if (selectedTab() === TabName.TESTING) {
125132
<app-dropdown [items]="containerPlatforms" [(selected)]="selectedContainerPlatform"/>
126133
}
@@ -266,41 +273,33 @@ <h3>{{ tag.name }}</h3>
266273
</ng-template>
267274

268275
<ng-template #relatedSoftware>
269-
@if (this.relatedSoftware() && getSortedRelatedSoftware().length > 0) {
270-
<div class="related-software">
271-
<div class="related-software-header">
272-
<h3>Software that co-occurs with {{ container!.name }} in Bio-Protocol articles</h3>
273-
<p>This list shows software tools that appear together with {{ container!.name }} in scientific protocols from Bio-Protocol. Software available in BDIP is highlighted and linked for easy access.</p>
274-
</div>
275-
<div class="related-software-list">
276-
@for (software of getSortedRelatedSoftware(); track software.name) {
277-
<div class="software-item">
278-
<div class="software-info">
279-
@if (software.inBdip) {
280-
<a [routerLink]="['/container', software.name]" class="software-name bdip-link">
281-
{{ software.displayName }}
282-
</a>
283-
} @else {
284-
<span class="software-name">{{ software.displayName }}</span>
285-
}
286-
<span class="cooccurrence-count">{{ software.count }} {{ software.count === 1 ? 'article' : 'articles' }}</span>
287-
</div>
288-
<div class="article-links">
289-
@for (articleId of getCooccurringArticles(software.name); track articleId) {
290-
<a [href]="getBioProtocolArticleUrl(articleId)" target="_blank" class="article-link">
291-
{{ articleId }}
292-
</a>
293-
}
294-
</div>
295-
</div>
296-
}
297-
</div>
276+
<div class="related-software">
277+
<div class="related-software-header">
278+
<h3>Software that co-occurs with {{ container!.name }} in Bio-Protocol articles</h3>
279+
<p>This list shows software tools that appear together with {{ container!.name }} in scientific protocols from Bio-Protocol. Software available in BDIP is highlighted and linked for easy access.</p>
298280
</div>
299-
} @else if (this.relatedSoftware() && getSortedRelatedSoftware().length === 0) {
300-
<div class="related-software-empty">
301-
<p>No related software information is available for {{ container!.name }} yet.</p>
281+
<div class="related-software-list">
282+
@for (software of getSortedRelatedSoftware(); track software.name) {
283+
<div class="software-item">
284+
<div class="software-info">
285+
@if (software.inBdip) {
286+
<a [routerLink]="['/container', software.name]" class="software-name bdip-link">
287+
{{ software.displayName }}
288+
</a>
289+
} @else {
290+
<span class="software-name">{{ software.displayName }}</span>
291+
}
292+
<span class="cooccurrence-count">{{ software.count }} {{ software.count === 1 ? 'article' : 'articles' }}</span>
293+
</div>
294+
<div class="article-links">
295+
@for (articleId of getCooccurringArticles(software.name); track articleId) {
296+
<a [href]="getBioProtocolArticleUrl(articleId)" target="_blank" class="article-link">
297+
{{ articleId }}
298+
</a>
299+
}
300+
</div>
301+
</div>
302+
}
302303
</div>
303-
} @else {
304-
<app-loading />
305-
}
304+
</div>
306305
</ng-template>

‎src/app/features/containers/pages/container/container.component.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,13 @@ export class ContainerComponent {
314314
return `https://doi.org/10.21769/BioProtoc.${articleId}`;
315315
}
316316

317+
/**
318+
* Check if the related software tab should be shown
319+
*/
320+
hasRelatedSoftware(): boolean {
321+
return this.getSortedRelatedSoftware().length > 0;
322+
}
323+
317324
/* Markdown reactive files */
318325
/* ---------------------------------------------------------------------------------------------------------------- */
319326
getCliMarkdown(containerMetadata: ImageMetadata): string {

0 commit comments

Comments
 (0)