Show software identifier as main name and include alternate names in dropdown

Author: PabloG02

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

@@ -543,6 +543,34 @@ table th {
   border-radius: 1rem;
 }
 
+.display-names {
+  padding-inline: 16px 16px;
+  margin-bottom: 16px;
+  color: rgba(var(--main-font-color), 0.9);
+}
+
+
+.display-names-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-box: trim-both cap alphabetic;
+}
+
+.display-names-chips {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.display-chip {
+  text-box: trim-both cap alphabetic;
+  font-size: 0.75rem;
+  padding: 6px 6px;
+  background-color: rgba(var(--main-font-color), 0.06);
+  border: 1px solid rgba(var(--main-font-color), 0.04);
+}
+
 .article-links {
   display: flex;
   flex-direction: column;

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

@@ -285,15 +285,26 @@ <h3>Software that co-occurs with {{ container!.name }} in Bio-Protocol articles<
             <div class="software-name-wrapper">
               @if (software.inBdip) {
                 <a [routerLink]="['/container', software.name]" class="software-name bdip-link" (click)="$event.stopPropagation()">
-                  {{ software.displayName }}
+                  {{ software.name }}
                 </a>
               } @else {
-                <span class="software-name">{{ software.displayName }}</span>
+                <span class="software-name">{{ software.name }}</span>
               }
               <span class="cooccurrence-count">{{ software.count }} {{ software.count === 1 ? 'article' : 'articles' }}</span>
             </div>
             <svg-icon src="assets/icons/fluent-icons/ic_fluent_chevron_down_24_regular.svg" svgClass="chevron-icon" />
           </summary>
+          <!-- Show the different display names (if more than one) when the details are opened -->
+          @if (software.displayNames && software.displayNames.length > 1) {
+            <div class="display-names">
+              <span class="display-names-chips">
+                <span class="display-names-label">Also known as</span>
+                @for (dname of software.displayNames; track dname) {
+                  <span class="chip display-chip">{{ dname }}</span>
+                }
+              </span>
+            </div>
+          }
           <div class="article-links">
             @for (articleId of getCooccurringArticles(software.name); track articleId) {
               <a [href]="getBioProtocolArticleUrl(articleId)" target="_blank" class="article-link">

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

@@ -244,7 +244,7 @@ export class ContainerComponent {
   /**
    * Get sorted related software by cooccurrence count and name
    */
-  getSortedRelatedSoftware(): { name: string; displayName: string; count: number; inBdip: boolean }[] {
+  getSortedRelatedSoftware(): { name: string; displayNames: string[]; count: number; inBdip: boolean }[] {
     const relatedSoftwareData = this.relatedSoftware();
     if (!relatedSoftwareData || !this.container) {
       return [];
@@ -263,13 +263,13 @@ export class ContainerComponent {
     return Object.entries(currentEntry.cooccurrences)
       .map(([softwareName, cooccurrence]) => {
         const softwareEntry = relatedSoftwareData.software[softwareName];
-        const displayName = softwareEntry?.names?.[0] || softwareName;
+        const displayNames = softwareEntry?.names;
         const count = cooccurrence?.count ?? 0;
         const inBdip = bdipContainers.has(softwareName.toLowerCase());
 
         return {
           name: softwareName,
-          displayName,
+          displayNames,
           count,
           inBdip
         };
@@ -280,7 +280,7 @@ export class ContainerComponent {
           return b.count - a.count;
         }
         // Then by displayName asc (case-insensitive)
-        return a.displayName.localeCompare(b.displayName, undefined, { sensitivity: 'base' });
+        return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
       });
   }