Scroll to gene in variant transcript consequences panel (#1128)

Also: - Used the TextButton component for the clickable transcript ids that expand and collapse the consequences for a given transcript.
Ensembl · May 8, 2024 · 7703df9 · 7703df9
1 parent 0f33671
commit 7703df9
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 9 deletions.
diff --git a/.../app/entity-viewer/variant-view/transcript-consequences/TranscriptConsequences.module.css b/.../app/entity-viewer/variant-view/transcript-consequences/TranscriptConsequences.module.css
@@ -22,12 +22,32 @@
   font-weight: var(--font-weight-bold);
 }
 
+.transcriptConsqTitle {
+  margin-left: 20px;
+}
+
+.scrollToGeneSection {
+  display: inline-flex;
+  align-items: baseline;
+  column-gap: 10px;
+  margin-left: 64px;
+}
+
+.scrollToLabel {
+  font-weight: var(--font-weight-light);
+  font-size: 11px;
+}
+
+.geneButtons {
+  display: flex;
+  column-gap: 25px;
+}
+
 .transcriptLeftColumn {
   padding-top: 6px;
 }
 
 .transcriptId {
-  color: var(--color-blue);
   width: fit-content;
   padding-top: 8px;
 }
@@ -47,10 +67,6 @@
   padding-left: 10px;
 }
 
-.transcriptConsqTitle {
-  margin-left: 20px;
-}
-
 .geneSection:not(:first-child) {
   margin-top: 100px;
 }

diff --git a/...content/app/entity-viewer/variant-view/transcript-consequences/TranscriptConsequences.tsx b/...content/app/entity-viewer/variant-view/transcript-consequences/TranscriptConsequences.tsx
@@ -38,6 +38,7 @@ import Panel from 'src/shared/components/panel/Panel';
 import TranscriptConsequenceDetails from './transcript-consequence-details/TranscriptConsequenceDetails';
 import { TranscriptQualityLabel } from 'src/content/app/entity-viewer/shared/components/default-transcript-label/TranscriptQualityLabel';
 import { CircleLoader } from 'src/shared/components/loader';
+import TextButton from 'src/shared/components/text-button/TextButton';
 
 import type { GeneInResponse } from '../../state/api/queries/variantTranscriptConsequencesQueries';
 
@@ -93,7 +94,9 @@ const TranscriptConsequences = (props: Props) => {
   }
 
   const { variant, transcriptConsequences, allele, geneData } = currentData;
-  const panelHeader = <PanelHeader variant={variant} />;
+  const panelHeader = (
+    <PanelHeader variant={variant} genesCount={geneData.length} />
+  );
 
   if (!transcriptConsequences) {
     return (
@@ -149,8 +152,21 @@ const TranscriptConsequences = (props: Props) => {
 
 const PanelHeader = (props: {
   variant: TranscriptConsequencesData['variant'];
+  genesCount: number;
 }) => {
-  const { variant } = props;
+  const { variant, genesCount } = props;
+
+  const scrollToGene = (geneIndex: number) => {
+    const geneSections = document.querySelectorAll(`.${styles.geneDetails}`);
+    const geneSection = geneSections[geneIndex];
+
+    if (geneSection) {
+      // this should always be the case
+      geneSection.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  };
 
   return (
     <div className={styles.panelHeader}>
@@ -160,6 +176,19 @@ const PanelHeader = (props: {
       <span className={styles.transcriptConsqTitle}>
         Transcript consequences
       </span>
+
+      {genesCount > 1 && (
+        <div className={styles.scrollToGeneSection}>
+          <span className={styles.scrollToLabel}>Scroll to</span>
+          <div className={styles.geneButtons}>
+            {[...Array(genesCount)].map((_, index) => (
+              <TextButton key={index} onClick={() => scrollToGene(index)}>
+                Gene {index + 1}
+              </TextButton>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 };
@@ -419,7 +448,7 @@ const TranscriptConsequencesList = (props: TranscriptConsequencesListProps) => {
                 </div>
               </div>
             </div>
-            <button
+            <TextButton
               className={classNames(styles.right, styles.transcriptId)}
               onClick={() =>
                 handleTranscriptConsequenceClick(
@@ -428,7 +457,7 @@ const TranscriptConsequencesList = (props: TranscriptConsequencesListProps) => {
               }
             >
               {consequencesForSingleTranscript.stable_id}
-            </button>
+            </TextButton>
           </div>
 
           {expandedIds.has(consequencesForSingleTranscript.stable_id) ? (