Add "Related software" tab to container details view

Author: PabloG02

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

@@ -428,3 +428,134 @@ table th {
     height: 38px;
   }
 }
+
+/* Related Software Section */
+.related-software {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.related-software-header {
+  h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+
+  p {
+    color: rgba(var(--main-font-color), 0.85);
+    line-height: 1.5;
+  }
+}
+
+.related-software-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.software-item {
+  border: 1px solid rgba(var(--main-font-color), 0.2);
+  border-radius: 8px;
+  padding: 16px;
+  background-color: rgb(var(--color-surface-container-lowest));
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &:hover {
+    border-color: rgba(var(--picton-blue-600), 0.4);
+    box-shadow: 0 2px 8px rgba(var(--picton-blue-600), 0.1);
+  }
+}
+
+:host-context(.dark) .software-item:hover {
+  border-color: rgba(var(--picton-blue-300), 0.4);
+  box-shadow: 0 2px 8px rgba(var(--picton-blue-400), 0.1);
+}
+
+.software-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.software-name {
+  font-size: 1.125rem;
+  font-weight: 600;
+
+  &.bdip-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: rgb(var(--picton-blue-600));
+    text-decoration: none;
+    transition: color 0.2s;
+
+    &:hover {
+      color: rgb(var(--picton-blue-700));
+      text-decoration: underline;
+    }
+  }
+}
+
+:host-context(.dark) .software-name.bdip-link {
+  color: rgb(var(--picton-blue-300));
+
+  &:hover {
+    color: rgb(var(--picton-blue-200));
+  }
+}
+
+.cooccurrence-count {
+  font-size: 0.875rem;
+  color: rgba(var(--main-font-color), 0.7);
+  padding: 4px 12px;
+  background-color: rgba(var(--main-font-color), 0.07);
+  border-radius: 1rem;
+}
+
+.article-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.article-link {
+  display: inline-block;
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  background-color: rgba(var(--main-font-color), 0.05);
+  color: rgb(var(--main-font-color));
+  text-decoration: none;
+  transition: background-color 0.2s, color 0.2s;
+  border: 1px solid rgba(var(--main-font-color), 0.1);
+
+  &:hover {
+    background-color: rgba(var(--picton-blue-500), 0.1);
+    color: rgb(var(--picton-blue-700));
+    border-color: rgba(var(--picton-blue-500), 0.4);
+  }
+}
+
+:host-context(.dark) .article-link:hover {
+  background-color: rgba(var(--picton-blue-300), 0.1);
+  color: rgb(var(--picton-blue-300));
+  border-color: rgba(var(--picton-blue-300), 0.3);
+}
+
+.related-software-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+  color: rgba(var(--main-font-color), 0.6);
+  font-size: 1rem;
+  border: 1px dashed rgba(var(--main-font-color), 0.2);
+  border-radius: 8px;
+  background-color: rgba(var(--main-font-color), 0.02);
+}

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

@@ -118,7 +118,8 @@ <h2>{{ container.name }}</h2>
           { id: TabName.README, label: 'README', active: selectedTab() === TabName.README },
           { id: TabName.TAGS, label: TabName.TAGS, active: selectedTab() === TabName.TAGS },
           { id: TabName.TESTING, label: 'Testing', active: selectedTab() === TabName.TESTING },
-          { id: TabName.DOCKERFILE, label: 'Dockerfile', active: selectedTab() === TabName.DOCKERFILE }
+          { id: TabName.DOCKERFILE, label: 'Dockerfile', active: selectedTab() === TabName.DOCKERFILE },
+          { id: TabName.RELATED_SOFTWARE, label: 'Related software', active: selectedTab() === TabName.RELATED_SOFTWARE }
         ]" />
       @if (selectedTab() === TabName.TESTING) {
         <app-dropdown [items]="containerPlatforms" [(selected)]="selectedContainerPlatform"/>
@@ -136,6 +137,8 @@ <h2>{{ container.name }}</h2>
       <ng-container *ngTemplateOutlet="testing; context: { containerMetadata: containerMetadata }"></ng-container>
     } @else if (selectedTab() === 'dockerfile') {
       <ng-container *ngTemplateOutlet="dockerfile"></ng-container>
+    } @else if (selectedTab() === 'related-software') {
+      <ng-container *ngTemplateOutlet="relatedSoftware"></ng-container>
     }
   </div>
 } @else if (status === Status.LOADING) {
@@ -261,3 +264,43 @@ <h3>{{ tag.name }}</h3>
     ```
   </markdown>
 </ng-template>
+
+<ng-template #relatedSoftware>
+  @if (this.relatedSoftware() && getSortedRelatedSoftware().length > 0) {
+    <div class="related-software">
+      <div class="related-software-header">
+        <h3>Software that co-occurs with {{ container!.name }} in Bio-Protocol articles</h3>
+        <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>
+      </div>
+      <div class="related-software-list">
+        @for (software of getSortedRelatedSoftware(); track software.name) {
+          <div class="software-item">
+            <div class="software-info">
+              @if (software.inBdip) {
+                <a [routerLink]="['/container', software.name]" class="software-name bdip-link">
+                  {{ software.displayName }}
+                </a>
+              } @else {
+                <span class="software-name">{{ software.displayName }}</span>
+              }
+              <span class="cooccurrence-count">{{ software.count }} {{ software.count === 1 ? 'article' : 'articles' }}</span>
+            </div>
+            <div class="article-links">
+              @for (articleId of getCooccurringArticles(software.name); track articleId) {
+                <a [href]="getBioProtocolArticleUrl(articleId)" target="_blank" class="article-link">
+                  {{ articleId }}
+                </a>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  } @else if (this.relatedSoftware() && getSortedRelatedSoftware().length === 0) {
+    <div class="related-software-empty">
+      <p>No related software information is available for {{ container!.name }} yet.</p>
+    </div>
+  } @else {
+    <app-loading />
+  }
+</ng-template>

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

@@ -12,17 +12,17 @@ import { BytesToSizePipe } from "../../../../shared/pipes/bytes-to-size/bytes-to
 import { SvgIconComponent } from 'angular-svg-icon';
 import { LoadingComponent } from "../../../../shared/components/loading/loading.component";
 import { ImageMetadata } from "../../../../models/image-metadata";
-import { ReplacePipe } from "../../../../shared/pipes/replace/replace.pipe";
 import { TermStanza } from "../../../../obo/TermStanza";
 import { DockerfileService } from "../../../../services/dockerfile.service";
 import { DropdownComponent } from "../../../../shared/components/dropdown/dropdown.component";
+import { RelatedSoftware } from "../../../../models/related-software";
 
 @Component({
     selector: 'app-container',
     templateUrl: './container.component.html',
     styleUrl: './container.component.css',
     host: { '[class.dark]': 'isDarkTheme()' },
-  imports: [DatePipe, SlicePipe, MarkdownModule, TabsComponent, BytesToSizePipe, ClipboardButtonComponent, SvgIconComponent, LoadingComponent, NgTemplateOutlet, ReplacePipe, RouterLink, DropdownComponent]
+  imports: [DatePipe, SlicePipe, MarkdownModule, TabsComponent, BytesToSizePipe, ClipboardButtonComponent, SvgIconComponent, LoadingComponent, NgTemplateOutlet, RouterLink, DropdownComponent]
 })
 export class ContainerComponent {
   /* Services */
@@ -41,6 +41,7 @@ export class ContainerComponent {
   containerTags: Signal<DockerHubTag[]> = signal([]);
   ontologyCategories: Signal<TermStanza[][]> = signal([]);
   dockerfileContent: Signal<string | undefined> = signal<string>('');
+  relatedSoftware: Signal<RelatedSoftware | null> = signal(null);
 
   selectedTab = signal<TabName>(TabName.README);
 
@@ -89,6 +90,7 @@ export class ContainerComponent {
         this.containerTags = this.containerService.getContainerTagsRes(containerName).value;
         this.ontologyCategories = this.containerService.getContainerCategoryHierarchy(containerName);
         this.dockerfileContent = this.dockerfileService.getContainerDockerfileContent(containerName).value;
+        this.relatedSoftware = this.containerService.getRelatedSoftwareRes().value;
       });
     });
     this.viewportScroller.setOffset([0, 150]);
@@ -237,6 +239,81 @@ export class ContainerComponent {
     return parentIds.flat().concat(category.id);
   }
 
+  /**
+   * Get sorted related software by cooccurrence count and name
+   */
+  getSortedRelatedSoftware(): { name: string; displayName: string; count: number; inBdip: boolean }[] {
+    const relatedSoftwareData = this.relatedSoftware();
+    if (!relatedSoftwareData || !this.container) {
+      return [];
+    }
+
+    const currentSoftware = this.container.name.toLowerCase();
+    const currentEntry = relatedSoftwareData.software[currentSoftware];
+
+    if (!currentEntry || !currentEntry.cooccurrences) {
+      return [];
+    }
+
+    const allContainersMetadata = this.containerService.getAllContainersMetadataRes().value();
+    const bdipContainers = new Set(allContainersMetadata ? Array.from(allContainersMetadata.keys()).map(k => k.toLowerCase()) : []);
+
+    return Object.entries(currentEntry.cooccurrences)
+      .map(([softwareName, cooccurrence]) => {
+        const softwareEntry = relatedSoftwareData.software[softwareName];
+        const displayName = softwareEntry?.names?.[0] || softwareName;
+        const count = cooccurrence?.count ?? 0;
+        const inBdip = bdipContainers.has(softwareName.toLowerCase());
+
+        return {
+          name: softwareName,
+          displayName,
+          count,
+          inBdip
+        };
+      })
+      .sort((a, b) => {
+        // Sort by count desc
+        if (b.count !== a.count) {
+          return b.count - a.count;
+        }
+        // Then by displayName asc (case-insensitive)
+        return a.displayName.localeCompare(b.displayName, undefined, { sensitivity: 'base' });
+      });
+  }
+
+  /**
+   * Get articles where a specific software appears with the current container
+   */
+  getCooccurringArticles(softwareName: string): string[] {
+    const relatedSoftwareData = this.relatedSoftware();
+    if (!relatedSoftwareData || !this.container) {
+      return [];
+    }
+
+    const currentSoftware = this.container.name.toLowerCase();
+    const currentEntry = relatedSoftwareData.software[currentSoftware];
+
+    if (!currentEntry || !currentEntry.cooccurrences) {
+      return [];
+    }
+
+    const cooccurrence = currentEntry.cooccurrences[softwareName];
+
+    if (!cooccurrence || !Array.isArray(cooccurrence.articles)) {
+      return [];
+    }
+
+    return cooccurrence.articles;
+  }
+
+  /**
+   * Generate Bio-Protocol article URL from article ID
+   */
+  getBioProtocolArticleUrl(articleId: string): string {
+    return `https://bio-protocol.org/en/bpdetail?id=${articleId}&type=0`;
+  }
+
   /* Markdown reactive files */
   /* ---------------------------------------------------------------------------------------------------------------- */
   getCliMarkdown(containerMetadata: ImageMetadata): string {
@@ -375,4 +452,5 @@ enum TabName {
   TAGS = 'tags',
   TESTING = 'testing',
   DOCKERFILE = 'dockerfile',
+  RELATED_SOFTWARE = 'related-software',
 }

src/app/models/related-software.ts

@@ -0,0 +1,50 @@
+export type RelatedSoftware = {
+  metadata: {
+    generated_at: string;
+    source_files: {
+      extraction: string;
+      cooccurrences: string;
+    };
+    cooccurrence_metadata: {
+      generated_at: string;
+      source_file: string;
+      total_software: number;
+      min_cooccurrence_threshold: number;
+    };
+  };
+  articles: Article[];
+  software: Record<string, SoftwareEntry>;
+}
+
+export type Article = {
+  article_number: string;
+  title: string | null;
+  abstract: string | null;
+  software: ArticleSoftware[];
+}
+
+export type ArticleSoftware = {
+  name: string;
+  version: string | null;
+  url: string | null;
+}
+
+export type SoftwareEntry = {
+  names: string[];
+  versions: string[];
+  urls: string[];
+  statistics: SoftwareStatistics;
+  articles: string[];
+  cooccurrences: Record<string, SoftwareCooccurrence>;
+}
+
+export type SoftwareStatistics = {
+  total_mentions: number;
+  total_papers: number;
+  cooccurrence_count: number;
+}
+
+export type SoftwareCooccurrence = {
+  count: number;
+  articles: string[];
+}