Repository: Sage-Bionetworks/sage-monorepo
Pull request #3032: fix(agora): migrate InputSwitch to ToggleSwitch (AG-1709), remove styles specific to removed gene-druggability component (AG-1710)
Author: login: hallieswan
Created: 2025-03-10T18:28:09Z | Merged: 2025-03-11T16:38:18Z

## Description

We recently updated to PrimeNG v19 from v17. There were a number of changes to the component names and style classes from v17 to v18+, see [here](https://primeng.org/guides/migration). The `InputSwitch` component was renamed `ToggleSwitch`. This PR updates the Agora components accordingly.

We also recently removed an unused component (#3026). This PR also removes remaining styles specific to this component.

## Related Issues

- [AG-1709](https://sagebionetworks.jira.com/browse/AG-1709)
- [AG-1710](https://sagebionetworks.jira.com/browse/AG-1710)

## Changelog

- Migrates Agora components to use `ToggleSwitch` instead of `InputSwitch`
- Moves global toggleswitch styles into preset
- Removes styles specific to removed component

## Validation

Current dev: 

https://github.com/user-attachments/assets/318beea9-2246-4ecc-9106-1a8957b8e20d

New dev: 

https://github.com/user-attachments/assets/fc51ca25-e2c1-47b6-9c8e-f40d3ef3f1a0

Fix: 

https://github.com/user-attachments/assets/cb14ecaf-b143-4791-b799-1bfb6035411f

[AG-1709]: https://sagebionetworks.jira.com/browse/AG-1709?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[AG-1710]: https://sagebionetworks.jira.com/browse/AG-1710?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


Diff:
diff --git a/apps/agora/app/src/app/myPrimeNGPreset.ts b/apps/agora/app/src/app/myPrimeNGPreset.ts
index 7a52030476..f7d87fd017 100644
--- a/apps/agora/app/src/app/myPrimeNGPreset.ts
+++ b/apps/agora/app/src/app/myPrimeNGPreset.ts
@@ -4798,8 +4798,8 @@ export const MyPreset = definePreset(Lara, {
     },
     toggleswitch: {
       root: {
-        width: '3rem',
-        height: '1.75rem',
+        width: '2.25rem',
+        height: '1.25rem',
         borderRadius: '30px',
         gap: '0.25rem',
         shadow: '{form.field.shadow}',
@@ -4821,7 +4821,7 @@ export const MyPreset = definePreset(Lara, {
       },
       handle: {
         borderRadius: '50%',
-        size: '1.25rem',
+        size: '0.85rem',
       },
       colorScheme: {
         light: {
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 5caa5a8c14..cb53cc09ad 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
@@ -126,7 +126,7 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
                 <div class="gct-significance-control">
                   <div>Hide insignificant</div>
                   <div>
-                    <p-inputSwitch
+                    <p-toggleswitch
                       [pTooltip]="
                         'When on, this will filter out all statistically insignificant results. Current significance cutoff is: ' +
                         significanceThreshold
@@ -136,7 +136,7 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
                       tooltipStyleClass="tooltip"
                       [(ngModel)]="significanceThresholdActive"
                       (onChange)="setSignificanceThresholdActive(significanceThresholdActive)"
-                    ></p-inputSwitch>
+                    ></p-toggleswitch>
                   </div>
                   <div>
                     <p-popover #significancePopover styleClass="gct-significance-control-panel">
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 123121af48..a95b5b9ca3 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 { PopoverLinkComponent } from '@sagebionetworks/agora/genes';
 import { LoadingIconComponent, SvgIconComponent } from '@sagebionetworks/agora/shared';
-import { InputSwitchModule } from 'primeng/inputswitch';
 import { PopoverModule } from 'primeng/popover';
 import { SelectModule } from 'primeng/select';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
 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';
@@ -64,7 +64,7 @@ import { GeneComparisonToolLegendPanelComponent } from './components/gene-compar
     TableModule,
     TooltipModule,
     SelectModule,
-    InputSwitchModule,
+    ToggleSwitchModule,
     PopoverLinkComponent,
     PopoverModule,
     SvgIconComponent,
diff --git a/libs/agora/styles/src/lib/components/_shame.scss b/libs/agora/styles/src/lib/components/_shame.scss
index ae8b6bef00..5cb925c6fe 100644
--- a/libs/agora/styles/src/lib/components/_shame.scss
+++ b/libs/agora/styles/src/lib/components/_shame.scss
@@ -1,303 +1,3 @@
-/* stylelint-disable no-descending-specificity */
-
-.gd-accordion {
-  .p-accordion {
-    .p-accordion-tab {
-      margin-bottom: var(--spacing-lg);
-    }
-
-    .p-accordion-toggle-icon {
-      position: absolute;
-      right: 60px;
-      top: calc(50% - 14px);
-      font-size: 24px;
-    }
-
-    .p-accordion-header {
-      padding: 0;
-      border: 1px solid var(--color-gray-300);
-
-      a {
-        padding: var(--spacing-xl) 144px var(--spacing-xl) var(--spacing-xl);
-      }
-
-      .row {
-        align-items: center;
-      }
-
-      &:hover {
-        .p-accordion-toggle-icon {
-          color: var(--color-action-primary);
-        }
-      }
-    }
-
-    .p-accordion-content {
-      padding: var(--spacing-xl);
-      border: 1px solid var(--color-gray-300);
-      border-top: none;
-      background-color: var(--color-gray-100);
-
-      .gd-accordion-content-heading {
-        text-align: center;
-        font-weight: 700;
-      }
-
-      .gd-accordion-content-description {
-        text-align: center;
-        font-size: var(--font-size-xs);
-        font-style: italic;
-        margin-bottom: var(--spacing-lg);
-      }
-
-      .bucket-inner-row {
-        padding-bottom: 30px;
-      }
-
-      .content-title {
-        font-size: var(--font-size-xs);
-        vertical-align: middle;
-        padding-left: 30px;
-      }
-
-      .icon-class {
-        width: 81px;
-        font-size: var(--font-size-xs);
-        text-align: center;
-        margin-bottom: 12px;
-        margin-top: 12px;
-      }
-
-      .vertical-auto {
-        margin-top: auto;
-        margin-bottom: auto;
-      }
-    }
-  }
-
-  p-header {
-    width: 100%;
-  }
-
-  .inner-row-header {
-    height: 46px;
-  }
-
-  span {
-    vertical-align: middle;
-    margin-top: auto;
-    margin-bottom: auto;
-  }
-
-  .content-row {
-    padding-top: 30px;
-    padding-bottom: 30px;
-
-    .inner-row {
-      .header-title {
-        line-height: var(--font-size-md);
-        font-size: var(--font-size-sm);
-        text-align: center;
-        margin-bottom: 15px;
-        margin-top: 12px;
-      }
-    }
-
-    .content-header-description {
-      text-align: center;
-      margin-bottom: 25px;
-      line-height: var(--font-size-xs);
-      font-size: var(--font-size-xxs);
-      height: 46px;
-    }
-
-    .vertical-auto {
-      margin-top: auto;
-      margin-bottom: auto;
-    }
-
-    .bottom-auto {
-      margin-bottom: auto;
-    }
-  }
-
-  .header-title {
-    line-height: var(--font-size-xxl);
-    font-size: var(--font-size-lg);
-  }
-
-  .header-score > div,
-  .icon-wrapper > div:nth-child(2) {
-    margin-left: auto;
-    margin-right: auto;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-
-  .container {
-    display: inline-block;
-    min-height: 99px;
-    width: 100%;
-    max-width: 100%;
-    padding-left: 0;
-
-    .header-title,
-    .header-score,
-    .header-description {
-      @include respond-to('ex-small') {
-        min-height: 43px;
-        margin-top: 25.5px !important;
-      }
-
-      @include respond-to('small') {
-        min-height: 43px;
-        margin-top: 25.5px !important;
-      }
-
-      @include respond-to('medium') {
-        margin-top: auto !important;
-        min-height: 0;
-      }
-
-      @include respond-to('large') {
-        margin-top: auto !important;
-        min-height: 0;
-      }
-
-      @include respond-to('ex-large') {
-        margin-top: auto !important;
-        min-height: 0;
-      }
-    }
-
-    .header-description {
-      line-height: var(--font-size-xl);
-      font-size: var(--font-size-md);
-    }
-
-    .row {
-      min-height: 99px;
-
-      > [class*='col-'] {
-        vertical-align: middle;
-        margin-top: auto;
-        margin-bottom: auto;
-      }
-    }
-  }
-
-  .icon-wrapper {
-    width: 81px !important;
-    display: inline-table;
-  }
-
-  .icon-description {
-    position: relative;
-    height: 0;
-    padding: 50% 0;
-    top: -12px;
-    left: -0.5px;
-    font-size: var(--font-size-xl);
-    text-align: center;
-  }
-
-  .icon-class {
-    width: 81px;
-    line-height: var(--font-size-xs);
-    font-size: var(--font-size-xxs);
-    text-align: center;
-    margin-bottom: 12px;
-    margin-top: 12px;
-  }
-
-  .custom-caret-down {
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-  }
-
-  .caret-wrapper {
-    margin: 0 0 10px calc(50% - 10px);
-  }
-
-  .class-description {
-    padding: 15px;
-  }
-
-  .criteria-row {
-    padding-left: 15px;
-    padding-right: 15px;
-    min-height: 0 !important;
-  }
-
-  .criteria-title {
-    margin-top: 0;
-    margin-bottom: 9px;
-    font-size: var(--font-size-lg);
-  }
-
-  .criteria-description {
-    margin-top: 0;
-  }
-}
-
-p-inputswitch {
-  display: block;
-
-  .p-inputswitch {
-    display: block;
-    width: 36px;
-    height: 20px;
-  }
-
-  .p-inputswitch .p-inputswitch-slider {
-    background: #ced4da;
-    transition:
-      background-color 0.2s,
-      color 0.2s,
-      border-color 0.2s,
-      box-shadow 0.2s;
-    border-radius: 30px;
-  }
-
-  .p-inputswitch .p-inputswitch-slider::before {
-    background: #fff;
-    width: 14px;
-    height: 14px;
-    left: 4px;
-    margin-top: -7px;
-    border-radius: 50%;
-    transition-duration: 0.2s;
-  }
-
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before {
-    transform: translateX(14px);
-    background: #fff;
-  }
-
-  .p-inputswitch.p-focus .p-inputswitch-slider {
-    outline: 0 none;
-    outline-offset: 0;
-  }
-
-  .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-    background: #b6bfc8;
-  }
-
-  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-    background: var(--color-action-primary);
-  }
-
-  .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-    background: var(--color-action-primary);
-  }
-}
-
-p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
-  border-color: #e24c4c;
-}
-
 /* Remove primeng popover arrow */
 .p-popover::before,
 .p-popover::after {


Reviews:
user: login: hallieswan
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-10T18:28:57Z
user: login: hallieswan
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-10T18:29:34Z
user: login: sagely1
body: LGTM!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T20:53:22Z
user: login: sagely1
body: LGTM!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T23:01:51Z

Review comments:
diff_hunk: @@ -1,303 +1,3 @@
-/* stylelint-disable no-descending-specificity */
-
-.gd-accordion {
path: libs/agora/styles/src/lib/components/_shame.scss
user: login: hallieswan
body: Style specific to the removed gene-druggability component.
created_at: 2025-03-10T18:28:57Z
author_association: COLLABORATOR
diff_hunk: @@ -1,303 +1,3 @@
-/* stylelint-disable no-descending-specificity */
-
-.gd-accordion {
-  .p-accordion {
-    .p-accordion-tab {
-      margin-bottom: var(--spacing-lg);
-    }
-
-    .p-accordion-toggle-icon {
-      position: absolute;
-      right: 60px;
-      top: calc(50% - 14px);
-      font-size: 24px;
-    }
-
-    .p-accordion-header {
-      padding: 0;
-      border: 1px solid var(--color-gray-300);
-
-      a {
-        padding: var(--spacing-xl) 144px var(--spacing-xl) var(--spacing-xl);
-      }
-
-      .row {
-        align-items: center;
-      }
-
-      &:hover {
-        .p-accordion-toggle-icon {
-          color: var(--color-action-primary);
-        }
-      }
-    }
-
-    .p-accordion-content {
-      padding: var(--spacing-xl);
-      border: 1px solid var(--color-gray-300);
-      border-top: none;
-      background-color: var(--color-gray-100);
-
-      .gd-accordion-content-heading {
-        text-align: center;
-        font-weight: 700;
-      }
-
-      .gd-accordion-content-description {
-        text-align: center;
-        font-size: var(--font-size-xs);
-        font-style: italic;
-        margin-bottom: var(--spacing-lg);
-      }
-
-      .bucket-inner-row {
-        padding-bottom: 30px;
-      }
-
-      .content-title {
-        font-size: var(--font-size-xs);
-        vertical-align: middle;
-        padding-left: 30px;
-      }
-
-      .icon-class {
-        width: 81px;
-        font-size: var(--font-size-xs);
-        text-align: center;
-        margin-bottom: 12px;
-        margin-top: 12px;
-      }
-
-      .vertical-auto {
-        margin-top: auto;
-        margin-bottom: auto;
-      }
-    }
-  }
-
-  p-header {
-    width: 100%;
-  }
-
-  .inner-row-header {
-    height: 46px;
-  }
-
-  span {
-    vertical-align: middle;
-    margin-top: auto;
-    margin-bottom: auto;
-  }
-
-  .content-row {
-    padding-top: 30px;
-    padding-bottom: 30px;
-
-    .inner-row {
-      .header-title {
-        line-height: var(--font-size-md);
-        font-size: var(--font-size-sm);
-        text-align: center;
-        margin-bottom: 15px;
-        margin-top: 12px;
-      }
-    }
-
-    .content-header-description {
-      text-align: center;
-      margin-bottom: 25px;
-      line-height: var(--font-size-xs);
-      font-size: var(--font-size-xxs);
-      height: 46px;
-    }
-
-    .vertical-auto {
-      margin-top: auto;
-      margin-bottom: auto;
-    }
-
-    .bottom-auto {
-      margin-bottom: auto;
-    }
-  }
-
-  .header-title {
-    line-height: var(--font-size-xxl);
-    font-size: var(--font-size-lg);
-  }
-
-  .header-score > div,
-  .icon-wrapper > div:nth-child(2) {
-    margin-left: auto;
-    margin-right: auto;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-
-  .container {
-    display: inline-block;
-    min-height: 99px;
-    width: 100%;
-    max-width: 100%;
-    padding-left: 0;
-
-    .header-title,
-    .header-score,
-    .header-description {
-      @include respond-to('ex-small') {
-        min-height: 43px;
-        margin-top: 25.5px !important;
-      }
-
-      @include respond-to('small') {
-        min-height: 43px;
-        margin-top: 25.5px !important;
-      }
-
-      @include respond-to('medium') {
-        margin-top: auto !important;
-        min-height: 0;
-      }
-
-      @include respond-to('large') {
-        margin-top: auto !important;
-        min-height: 0;
-      }
-
-      @include respond-to('ex-large') {
-        margin-top: auto !important;
-        min-height: 0;
-      }
-    }
-
-    .header-description {
-      line-height: var(--font-size-xl);
-      font-size: var(--font-size-md);
-    }
-
-    .row {
-      min-height: 99px;
-
-      > [class*='col-'] {
-        vertical-align: middle;
-        margin-top: auto;
-        margin-bottom: auto;
-      }
-    }
-  }
-
-  .icon-wrapper {
-    width: 81px !important;
-    display: inline-table;
-  }
-
-  .icon-description {
-    position: relative;
-    height: 0;
-    padding: 50% 0;
-    top: -12px;
-    left: -0.5px;
-    font-size: var(--font-size-xl);
-    text-align: center;
-  }
-
-  .icon-class {
-    width: 81px;
-    line-height: var(--font-size-xs);
-    font-size: var(--font-size-xxs);
-    text-align: center;
-    margin-bottom: 12px;
-    margin-top: 12px;
-  }
-
-  .custom-caret-down {
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-  }
-
-  .caret-wrapper {
-    margin: 0 0 10px calc(50% - 10px);
-  }
-
-  .class-description {
-    padding: 15px;
-  }
-
-  .criteria-row {
-    padding-left: 15px;
-    padding-right: 15px;
-    min-height: 0 !important;
-  }
-
-  .criteria-title {
-    margin-top: 0;
-    margin-bottom: 9px;
-    font-size: var(--font-size-lg);
-  }
-
-  .criteria-description {
-    margin-top: 0;
-  }
-}
-
-p-inputswitch {
-  display: block;
-
-  .p-inputswitch {
-    display: block;
-    width: 36px;
-    height: 20px;
path: libs/agora/styles/src/lib/components/_shame.scss
user: login: hallieswan
body: Moved into the preset. All the other inputswitch styles were redundant with the new preset styling.
created_at: 2025-03-10T18:29:34Z
author_association: COLLABORATOR

PR comments:
user: login: tschaffter
created_at: 2025-03-10T22:57:04Z
body: @hallieswan Why is the box titled "RNA-Differential Expression" shifted vertically when interacting with the toggle that lives inside this box?
author_association: CONTRIBUTOR
user: login: hallieswan
created_at: 2025-03-10T23:04:27Z
body: > @hallieswan Why is the box titled "RNA-Differential Expression" shifted vertically when interacting with the toggle that lives inside this box?

@tschaffter When the switch is toggled, a filter is added so that only differential expression for genes + tissues with significant p-values are displayed. Displaying the filter shifts the control panel downwards (including the RNA - Differential Expression dropdown).

https://github.com/user-attachments/assets/66496694-26a1-4a96-a195-73c7d7ca8caa


author_association: COLLABORATOR
user: login: tschaffter
created_at: 2025-03-11T00:27:26Z
body: @hallieswan What do you think about keeping the filter bar always displayed to avoid the vertical shifts. Ideally, the user should be able to click several times on the toggle to change its state without having to move the cursor. If no active filter are displayed, the "Clear All" button could be disabled.
author_association: CONTRIBUTOR
user: login: hallieswan
created_at: 2025-03-11T16:37:02Z
body: > @hallieswan What do you think about keeping the filter bar always displayed to avoid the vertical shifts. Ideally, the user should be able to click several times on the toggle to change its state without having to move the cursor. If no active filter are displayed, the "Clear All" button could be disabled.

@tschaffter great idea! I opened [a ticket](https://sagebionetworks.jira.com/browse/AG-1719) so that @JessterB can take a look and we can track the work. Thanks!
author_association: COLLABORATOR