From 37e1e60150b960654bd136cbc9ddb0bee3bb5f50 Mon Sep 17 00:00:00 2001
From: Ubuntu <26949006+hallieswan@users.noreply.github.com>
Date: Fri, 28 Feb 2025 21:58:03 +0000
Subject: [PATCH 1/2] AG-1658: float download button and modal-link right,
 AG-1701: round buttons, fix fontawesome icons

---
 ...omparison-tool-how-to-panel.component.html |  4 +--
 ...-comparison-tool-how-to-panel.component.ts | 21 +++++++++++----
 .../lib/gene-comparison-tool.component.html   | 15 ++++++-----
 .../src/lib/gene-comparison-tool.component.ts | 16 +++++++-----
 .../download-dom-image.component.html         | 24 +++++++----------
 .../download-dom-image.component.scss         |  4 +++
 .../gene-details/gene-details.component.html  |  4 +--
 .../gene-details/gene-details.component.ts    | 26 ++++++++++++-------
 .../lib/modal-link/modal-link.component.scss  |  2 +-
 .../styles/src/lib/components/_radio.scss     |  4 +++
 .../src/lib/components/_typography.scss       |  8 +++---
 11 files changed, 76 insertions(+), 52 deletions(-)

diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.html b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.html
index f0d7770c1c..c24757b940 100644
--- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.html
+++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.html
@@ -28,12 +28,12 @@
     <div>
       @if (activePane > 0) {
         <button class="gct-how-to-panel-previous" (click)="previous()">
-          <i class="fa-solid fa-angle-left"></i> Back
+          <fa-icon [icon]="faAngleLeft"></fa-icon> Back
         </button>
       }
       @if (activePane !== panes.length - 1) {
         <button class="gct-how-to-panel-next" (click)="next()">
-          Next <i class="fa-solid fa-angle-right"></i>
+          Next <fa-icon [icon]="faAngleRight"></fa-icon>
         </button>
       }
       @if (activePane === panes.length - 1) {
diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.ts b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.ts
index d6166ee94d..eae146c7f2 100644
--- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.ts
+++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.ts
@@ -1,14 +1,16 @@
 // -------------------------------------------------------------------------- //
 // External
 // -------------------------------------------------------------------------- //
+import { CommonModule } from '@angular/common';
 import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { CookieService } from 'ngx-cookie-service';
+import { FormsModule } from '@angular/forms';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { LoadingIconComponent } from '@sagebionetworks/agora/shared';
+import { CookieService } from 'ngx-cookie-service';
 import { CheckboxModule } from 'primeng/checkbox';
 import { DialogModule } from 'primeng/dialog';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { LoadingIconComponent } from '@sagebionetworks/agora/shared';
 
 // -------------------------------------------------------------------------- //
 // Internal
@@ -25,7 +27,14 @@ interface Pane {
 // -------------------------------------------------------------------------- //
 @Component({
   selector: 'agora-gene-comparison-tool-how-to-panel',
-  imports: [CommonModule, FormsModule, CheckboxModule, DialogModule, LoadingIconComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    CheckboxModule,
+    DialogModule,
+    FontAwesomeModule,
+    LoadingIconComponent,
+  ],
   providers: [CookieService],
   templateUrl: './gene-comparison-tool-how-to-panel.component.html',
   styleUrls: ['./gene-comparison-tool-how-to-panel.component.scss'],
@@ -38,6 +47,8 @@ export class GeneComparisonToolHowToPanelComponent implements OnInit {
   isActive = false;
   willHide = false;
   willHideCookieName = 'gct_hide_how_to';
+  faAngleRight = faAngleRight;
+  faAngleLeft = faAngleLeft;
 
   panes: Pane[] = [
     {
diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html
index 2a6abadd6b..388820efb4 100644
--- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html
+++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html
@@ -8,9 +8,10 @@
     <div class="gct-header">
       <div class="gct-header-inner">
         <div class="gct-header-left">
-          <button
-            class="btn btn-rounded btn-primary"
+          <p-button
             (click)="filterPanel.toggle()"
+            size="small"
+            rounded="true"
             pTooltip="Filter genes by Nominations, Teams, Cohort, and more"
             tooltipPosition="right"
             tooltipStyleClass="tooltip"
@@ -28,21 +29,23 @@
               />
             </svg>
             Filter Genes
-          </button>
+          </p-button>
         </div>
         <div class="gct-header-middle">
           <h1 class="gct-heading h2">Gene Comparison Tool</h1>
         </div>
         <div class="gct-header-right">
-          <button
-            class="btn btn-rounded btn-outlined-primary"
+          <p-button
+            size="small"
+            rounded="true"
+            variant="outlined"
             (click)="copyUrl()"
             pTooltip="Copy the URL that captures the table's current filters, sorting, and pinned genes"
             tooltipPosition="left"
             tooltipStyleClass="tooltip"
           >
             Share URL
-          </button>
+          </p-button>
         </div>
       </div>
     </div>
diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
index 704920acac..faf0fcd996 100644
--- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
+++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
@@ -26,37 +26,39 @@ import {
 import { HelperService } from '@sagebionetworks/agora/services';
 import { cloneDeep } from 'lodash';
 import { FilterService, MessageService, SortEvent } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
 import { Table, TableModule } from 'primeng/table';
 import { TooltipModule } from 'primeng/tooltip';
 import { combineLatest, Subscription } from 'rxjs';
 
-import * as variables from './gene-comparison-tool.variables';
 import * as helpers from './gene-comparison-tool.helpers';
+import * as variables from './gene-comparison-tool.variables';
 
-import { GeneComparisonToolScorePanelComponent as ScorePanelComponent } from './components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component';
 import { GeneComparisonToolDetailsPanelComponent as DetailsPanelComponent } from './components/gene-comparison-tool-details-panel/gene-comparison-tool-details-panel.component';
 import { GeneComparisonToolFilterPanelComponent as FilterPanelComponent } from './components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component';
 import { GeneComparisonToolPinnedGenesModalComponent as PinnedGenesModalComponent } from './components/gene-comparison-tool-pinned-genes-modal/gene-comparison-tool-pinned-genes-modal.component';
+import { GeneComparisonToolScorePanelComponent as ScorePanelComponent } from './components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component';
 
-import { GeneComparisonToolScorePanelComponent } from './components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component';
 import { GeneComparisonToolDetailsPanelComponent } from './components/gene-comparison-tool-details-panel/gene-comparison-tool-details-panel.component';
 import { GeneComparisonToolFilterPanelComponent } from './components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component';
 import { GeneComparisonToolPinnedGenesModalComponent } from './components/gene-comparison-tool-pinned-genes-modal/gene-comparison-tool-pinned-genes-modal.component';
+import { GeneComparisonToolScorePanelComponent } from './components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component';
 
+import { FormsModule } from '@angular/forms';
+import { OverlayPanelLinkComponent } from '@sagebionetworks/agora/genes';
+import { LoadingIconComponent, SvgIconComponent } from '@sagebionetworks/agora/shared';
 import { DropdownModule } from 'primeng/dropdown';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import { OverlayPanelModule } from 'primeng/overlaypanel';
-import { FormsModule } from '@angular/forms';
+import { GeneComparisonToolFilterListComponent } from './components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component';
 import { GeneComparisonToolHowToPanelComponent } from './components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component';
 import { GeneComparisonToolLegendPanelComponent } from './components/gene-comparison-tool-legend-panel/gene-comparison-tool-legend-panel.component';
-import { GeneComparisonToolFilterListComponent } from './components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component';
-import { OverlayPanelLinkComponent } from '@sagebionetworks/agora/genes';
-import { LoadingIconComponent, SvgIconComponent } from '@sagebionetworks/agora/shared';
 
 @Component({
   selector: 'agora-gene-comparison-tool',
   imports: [
     CommonModule,
+    ButtonModule,
     FormsModule,
     RouterModule,
     TableModule,
diff --git a/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.html b/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.html
index 5501119c07..9b429f99bb 100644
--- a/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.html
+++ b/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.html
@@ -1,6 +1,6 @@
-<button type="button" class="btn btn-rounded btn-primary" (click)="op.toggle($event)">
+<p-button type="button" rounded="true" size="small" (click)="op.toggle($event)">
   <fa-icon [icon]="downloadIcon"></fa-icon>
-</button>
+</p-button>
 <p-overlayPanel
   #op
   styleClass="download-dom-image-panel"
@@ -11,24 +11,18 @@
     {{ heading }}
   </div>
   <div class="download-dom-image-body">
-    <div *ngFor="let type of types">
-      <p-radioButton
+    <div class="download-dom-image-option" *ngFor="let type of types">
+      <p-radiobutton
         value="{{ type.value }}"
-        inputId="download-radio"
+        inputId="download-radio-{{ type.label }}"
         [(ngModel)]="selectedType"
-      ></p-radioButton>
-      <label for="download-radio">{{ type.label }}</label>
+      ></p-radiobutton>
+      <label for="download-radio-{{ type.label }}">{{ type.label }}</label>
     </div>
     <div>
-      <button
-        pButton
-        type="button"
-        label="Download"
-        class="btn-rounded btn-primary"
-        (click)="download()"
-      >
+      <p-button label="Download" rounded="true" size="small" (click)="download()">
         <fa-icon *ngIf="isLoading" [icon]="spinnerIcon" animation="spin"></fa-icon>
-      </button>
+      </p-button>
       <div *ngIf="error" class="download-dom-image-error">{{ error }}</div>
     </div>
   </div>
diff --git a/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.scss b/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.scss
index 2863d66ebc..a475b3683c 100644
--- a/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.scss
+++ b/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.scss
@@ -10,6 +10,10 @@
 .download-dom-image-panel {
   margin-top: 5px;
 
+  .download-dom-image-option {
+    display: flex;
+  }
+
   .p-overlaypanel-content {
     width: 290px;
     padding: 25px;
diff --git a/libs/agora/genes/src/lib/components/gene-details/gene-details.component.html b/libs/agora/genes/src/lib/components/gene-details/gene-details.component.html
index 9126ad771a..7ca975bfb9 100644
--- a/libs/agora/genes/src/lib/components/gene-details/gene-details.component.html
+++ b/libs/agora/genes/src/lib/components/gene-details/gene-details.component.html
@@ -8,7 +8,7 @@
             class="gene-details-nav-scroll gene-details-nav-scroll-prev"
             (click)="slideNavigation(-1)"
           >
-            <i class="fa-solid fa-angle-left"></i>
+            <fa-icon [icon]="faAngleLeft"></fa-icon>
           </button>
         }
         <div class="gene-details-nav-container">
@@ -54,7 +54,7 @@
             class="gene-details-nav-scroll gene-details-nav-scroll-next"
             (click)="slideNavigation(1)"
           >
-            <i class="fa-solid fa-angle-right"></i>
+            <fa-icon [icon]="faAngleRight"></fa-icon>
           </button>
         }
       </div>
diff --git a/libs/agora/genes/src/lib/components/gene-details/gene-details.component.ts b/libs/agora/genes/src/lib/components/gene-details/gene-details.component.ts
index af19b63965..d13958b413 100644
--- a/libs/agora/genes/src/lib/components/gene-details/gene-details.component.ts
+++ b/libs/agora/genes/src/lib/components/gene-details/gene-details.component.ts
@@ -1,25 +1,27 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
+import { CommonModule, Location } from '@angular/common';
 import {
-  Component,
-  OnInit,
+  AfterViewChecked,
   AfterViewInit,
+  Component,
   HostListener,
   inject,
-  AfterViewChecked,
+  OnInit,
 } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { CommonModule, Location } from '@angular/common';
 
-import { HelperService } from '@sagebionetworks/agora/services';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { Gene, GenesService } from '@sagebionetworks/agora/api-client-angular';
-import { GeneSoeComponent } from '../gene-soe/gene-soe.component';
-import { GeneHeroComponent } from '../gene-hero/gene-hero.component';
-import { GeneEvidenceRnaComponent } from '../gene-evidence-rna/gene-evidence-rna.component';
-import { GeneResourcesComponent } from '../gene-resources/gene-resources.component';
-import { GeneEvidenceProteomicsComponent } from '../gene-evidence-proteomics/gene-evidence-proteomics.component';
+import { HelperService } from '@sagebionetworks/agora/services';
 import { GeneEvidenceMetabolomicsComponent } from '../gene-evidence-metabolomics/gene-evidence-metabolomics.component';
+import { GeneEvidenceProteomicsComponent } from '../gene-evidence-proteomics/gene-evidence-proteomics.component';
+import { GeneEvidenceRnaComponent } from '../gene-evidence-rna/gene-evidence-rna.component';
 import { ExperimentalValidationComponent } from '../gene-experimental-validation/gene-experimental-validation.component';
+import { GeneHeroComponent } from '../gene-hero/gene-hero.component';
 import { GeneNominationsComponent } from '../gene-nominations/gene-nominations.component';
+import { GeneResourcesComponent } from '../gene-resources/gene-resources.component';
+import { GeneSoeComponent } from '../gene-soe/gene-soe.component';
 
 interface Panel {
   name: string;
@@ -40,6 +42,7 @@ interface Panel {
     ExperimentalValidationComponent,
     GeneNominationsComponent,
     GeneResourcesComponent,
+    FontAwesomeModule,
   ],
   providers: [HelperService, GenesService],
   templateUrl: './gene-details.component.html',
@@ -52,6 +55,9 @@ export class GeneDetailsComponent implements OnInit, AfterViewInit, AfterViewChe
   helperService = inject(HelperService);
   geneService = inject(GenesService);
 
+  faAngleRight = faAngleRight;
+  faAngleLeft = faAngleLeft;
+
   gene: Gene | undefined;
 
   panels: Panel[] = [
diff --git a/libs/agora/shared/src/lib/modal-link/modal-link.component.scss b/libs/agora/shared/src/lib/modal-link/modal-link.component.scss
index 6ad1d89900..c93901061d 100644
--- a/libs/agora/shared/src/lib/modal-link/modal-link.component.scss
+++ b/libs/agora/shared/src/lib/modal-link/modal-link.component.scss
@@ -1,7 +1,7 @@
 @import 'libs/agora/styles/src/lib/variables';
 @import 'libs/agora/styles/src/lib/mixins';
 
-modal-link,
+agora-modal-link,
 .modal-link {
   display: inline-block;
 }
diff --git a/libs/agora/styles/src/lib/components/_radio.scss b/libs/agora/styles/src/lib/components/_radio.scss
index ba6d5495fc..7c2e191cf0 100644
--- a/libs/agora/styles/src/lib/components/_radio.scss
+++ b/libs/agora/styles/src/lib/components/_radio.scss
@@ -50,6 +50,10 @@ p-radiobutton {
     }
   }
 
+  /* 
+    In PrimeNG v19, the radiobutton label does not have this class and is not a child of p-radiobutton, 
+    so this style does not apply to the label. TODO: move this style into the preset.
+  */
   .p-radiobutton-label {
     font-size: 16px;
     color: var(--color-text);
diff --git a/libs/agora/styles/src/lib/components/_typography.scss b/libs/agora/styles/src/lib/components/_typography.scss
index 895ed6b95e..efac725b35 100644
--- a/libs/agora/styles/src/lib/components/_typography.scss
+++ b/libs/agora/styles/src/lib/components/_typography.scss
@@ -30,23 +30,23 @@ h3,
 h4,
 h5,
 h6 {
-  download-dom-image {
+  agora-download-dom-image {
     float: right;
   }
 
-  modal-link {
+  agora-modal-link {
     float: right;
   }
 }
 
 h2 {
-  modal-link {
+  agora-modal-link {
     transform: translateY(-3px);
   }
 }
 
 h3 {
-  download-dom-image {
+  agora-download-dom-image {
     transform: translateY(-4px);
   }
 }

From b88727623e9748ded2b24d1d3bdb61a7ee48aad5 Mon Sep 17 00:00:00 2001
From: Ubuntu <26949006+hallieswan@users.noreply.github.com>
Date: Fri, 28 Feb 2025 22:52:40 +0000
Subject: [PATCH 2/2] AG-1524: align dropdown styles

---
 apps/agora/app/src/app/myPrimeNGPreset.ts      | 10 +++++-----
 .../lib/gene-comparison-tool.component.html    |  8 ++++----
 .../lib/gene-comparison-tool.component.scss    | 18 +++++++-----------
 .../src/lib/gene-comparison-tool.component.ts  |  4 ++--
 .../gene-model-selector.component.html         |  5 +++--
 .../gene-model-selector.component.ts           |  6 +++---
 .../gene-protein-selector.component.html       |  5 +++--
 .../gene-protein-selector.component.ts         |  6 +++---
 .../styles/src/lib/components/_dropdown.scss   |  8 ++++----
 9 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/apps/agora/app/src/app/myPrimeNGPreset.ts b/apps/agora/app/src/app/myPrimeNGPreset.ts
index dd1be5e4c6..bd5cdc8d54 100644
--- a/apps/agora/app/src/app/myPrimeNGPreset.ts
+++ b/apps/agora/app/src/app/myPrimeNGPreset.ts
@@ -4074,11 +4074,11 @@ export const MyPreset = definePreset(Lara, {
         paddingY: '{form.field.padding.y}',
         borderRadius: '{form.field.border.radius}',
         focusRing: {
-          width: '{form.field.focus.ring.width}',
-          style: '{form.field.focus.ring.style}',
-          color: '{form.field.focus.ring.color}',
-          offset: '{form.field.focus.ring.offset}',
-          shadow: '{form.field.focus.ring.shadow}',
+          width: '0',
+          style: 'none',
+          color: 'transparent',
+          offset: '0',
+          shadow: 'none',
         },
         transitionDuration: '{form.field.transition.duration}',
         sm: {
diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html
index 388820efb4..300906e918 100644
--- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html
+++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html
@@ -106,11 +106,11 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
               <div class="gct-controls-right-top">
                 <div class="gct-category-selector">
                   <div>
-                    <p-dropdown
+                    <p-select
                       [options]="categories"
                       [(ngModel)]="category"
                       (onChange)="onCategoryChange()"
-                    ></p-dropdown>
+                    ></p-select>
                   </div>
                   <div>
                     <agora-overlay-panel-link
@@ -227,12 +227,12 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
               <div class="gct-controls-right-bottom">
                 <div class="gct-filter-label">{{ subCategoryLabel }}</div>
                 <div class="gct-sub-category-selector">
-                  <p-dropdown
+                  <p-select
                     id="subCategory"
                     [options]="subCategories"
                     [(ngModel)]="subCategory"
                     (onChange)="onSubCategoryChange()"
-                  ></p-dropdown>
+                  ></p-select>
                 </div>
               </div>
             </div>
diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.scss b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.scss
index cf6c867f6f..7ae14fdfa0 100644
--- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.scss
+++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.scss
@@ -128,28 +128,24 @@
       font-weight: 900;
     }
 
-    .p-dropdown {
+    .p-select {
       padding: 0;
       border: none;
       background-color: transparent;
 
-      .p-dropdown-label {
+      .p-select-label {
         padding-left: 0;
         font-size: 14px;
         font-weight: 400;
         color: var(--color-text);
       }
 
-      .p-dropdown-trigger {
-        margin-left: 8px;
-      }
-
-      .p-dropdown-trigger-icon {
+      .p-select-dropdown-icon {
         font-size: 14px;
         color: var(--color-text);
       }
 
-      .p-dropdown-panel {
+      .p-select-list-container {
         background-color: #fff;
         box-shadow: 0 1px 10px 0 rgb(0 0 0 / 15%);
         border-radius: 5px;
@@ -195,7 +191,7 @@
       }
 
       &:hover {
-        .p-dropdown-trigger-icon {
+        .p-select-dropdown-icon {
           color: var(--color-action-primary);
         }
       }
@@ -226,12 +222,12 @@
       }
     }
 
-    .p-dropdown-label {
+    .p-select-label {
       text-transform: uppercase;
       font-weight: 700 !important;
     }
 
-    .p-dropdown-panel {
+    .p-select-panel {
       ul {
         li {
           span {
diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
index faf0fcd996..dfc5e31378 100644
--- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
+++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
@@ -47,9 +47,9 @@ import { GeneComparisonToolScorePanelComponent } from './components/gene-compari
 import { FormsModule } from '@angular/forms';
 import { OverlayPanelLinkComponent } from '@sagebionetworks/agora/genes';
 import { LoadingIconComponent, SvgIconComponent } from '@sagebionetworks/agora/shared';
-import { DropdownModule } from 'primeng/dropdown';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { SelectModule } from 'primeng/select';
 import { GeneComparisonToolFilterListComponent } from './components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component';
 import { GeneComparisonToolHowToPanelComponent } from './components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component';
 import { GeneComparisonToolLegendPanelComponent } from './components/gene-comparison-tool-legend-panel/gene-comparison-tool-legend-panel.component';
@@ -63,7 +63,7 @@ import { GeneComparisonToolLegendPanelComponent } from './components/gene-compar
     RouterModule,
     TableModule,
     TooltipModule,
-    DropdownModule,
+    SelectModule,
     InputSwitchModule,
     OverlayPanelLinkComponent,
     OverlayPanelModule,
diff --git a/libs/agora/genes/src/lib/components/gene-model-selector/gene-model-selector.component.html b/libs/agora/genes/src/lib/components/gene-model-selector/gene-model-selector.component.html
index f12e0ca844..53fb2210d9 100644
--- a/libs/agora/genes/src/lib/components/gene-model-selector/gene-model-selector.component.html
+++ b/libs/agora/genes/src/lib/components/gene-model-selector/gene-model-selector.component.html
@@ -1,9 +1,10 @@
 <div class="gene-model-selector">
-  <p-dropdown
+  <p-select
     [options]="_options"
     optionLabel="name"
     [(ngModel)]="selected"
     (onChange)="_onChange()"
     placeholder="Select a model"
-  ></p-dropdown>
+    fluid="true"
+  ></p-select>
 </div>
diff --git a/libs/agora/genes/src/lib/components/gene-model-selector/gene-model-selector.component.ts b/libs/agora/genes/src/lib/components/gene-model-selector/gene-model-selector.component.ts
index 98ce875188..1b60c58f07 100644
--- a/libs/agora/genes/src/lib/components/gene-model-selector/gene-model-selector.component.ts
+++ b/libs/agora/genes/src/lib/components/gene-model-selector/gene-model-selector.component.ts
@@ -1,8 +1,8 @@
-import { Component, Input, Output, EventEmitter, OnInit, inject } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { removeParenthesis } from '@sagebionetworks/agora/util';
-import { DropdownModule } from 'primeng/dropdown';
+import { SelectModule } from 'primeng/select';
 
 interface Option {
   name: string;
@@ -11,7 +11,7 @@ interface Option {
 
 @Component({
   selector: 'agora-gene-model-selector',
-  imports: [FormsModule, DropdownModule],
+  imports: [FormsModule, SelectModule],
   templateUrl: './gene-model-selector.component.html',
   styleUrls: ['./gene-model-selector.component.scss'],
 })
diff --git a/libs/agora/genes/src/lib/components/gene-protein-selector/gene-protein-selector.component.html b/libs/agora/genes/src/lib/components/gene-protein-selector/gene-protein-selector.component.html
index da8c184d2b..25ecd387e1 100644
--- a/libs/agora/genes/src/lib/components/gene-protein-selector/gene-protein-selector.component.html
+++ b/libs/agora/genes/src/lib/components/gene-protein-selector/gene-protein-selector.component.html
@@ -1,9 +1,10 @@
 <div class="gene-protein-selector">
-  <p-dropdown
+  <p-select
     [options]="_options"
     optionLabel="name"
     [(ngModel)]="selected"
     (onChange)="_onChange()"
     placeholder="Select a protein"
-  ></p-dropdown>
+    fluid="true"
+  ></p-select>
 </div>
diff --git a/libs/agora/genes/src/lib/components/gene-protein-selector/gene-protein-selector.component.ts b/libs/agora/genes/src/lib/components/gene-protein-selector/gene-protein-selector.component.ts
index c2e2b21453..908cd8a552 100644
--- a/libs/agora/genes/src/lib/components/gene-protein-selector/gene-protein-selector.component.ts
+++ b/libs/agora/genes/src/lib/components/gene-protein-selector/gene-protein-selector.component.ts
@@ -1,6 +1,6 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { DropdownModule } from 'primeng/dropdown';
+import { SelectModule } from 'primeng/select';
 
 interface Option {
   name: string;
@@ -9,7 +9,7 @@ interface Option {
 
 @Component({
   selector: 'agora-gene-protein-selector',
-  imports: [FormsModule, DropdownModule],
+  imports: [FormsModule, SelectModule],
   templateUrl: './gene-protein-selector.component.html',
   styleUrls: ['./gene-protein-selector.component.scss'],
 })
diff --git a/libs/agora/styles/src/lib/components/_dropdown.scss b/libs/agora/styles/src/lib/components/_dropdown.scss
index c528b4fb25..2ce8f18d87 100644
--- a/libs/agora/styles/src/lib/components/_dropdown.scss
+++ b/libs/agora/styles/src/lib/components/_dropdown.scss
@@ -1,10 +1,10 @@
-div.p-dropdown {
+div.p-select {
   display: flex;
   padding: 12px 20px 12px 30px;
   background-color: var(--color-gray-100);
   border: 1px solid var(--color-gray-300);
 
-  .p-dropdown-panel {
+  .p-select-list-container {
     border: 1px solid var(--color-gray-300);
     background-color: #fff;
     border-radius: 0 0 5px 5px;
@@ -20,12 +20,12 @@ div.p-dropdown {
     }
   }
 
-  .p-dropdown-trigger {
+  .p-select-dropdown {
     margin-left: 30px;
   }
 
   &:hover {
-    .p-dropdown-trigger-icon {
+    .p-select-dropdown-icon {
       color: var(--color-action-primary);
     }
   }