Add protein sequence to variant transcript consequences in Entity Vie…

…wer (#1108)

src/content/app/entity-viewer/state/api/queries/variantTranscriptConsequencesQueries.ts

@@ -112,6 +112,13 @@ export const transcriptForVariantTranscriptConsequencesQuery = gql`
           relative_end
           nucleotide_length
         }
+        product {
+          stable_id
+          length
+          sequence {
+            checksum
+          }
+        }
       }
     }
   }
@@ -178,6 +185,16 @@ type ProductGeneratingContextInTranscript = {
       FullProductGeneratingContext['cds']
     >['nucleotide_length'];
   } | null;
+  product: {
+    stable_id: NonNullable<
+      FullProductGeneratingContext['product']
+    >['stable_id'];
+    length: NonNullable<FullProductGeneratingContext['product']>['length'];
+    sequence: Pick<
+      NonNullable<FullProductGeneratingContext['product']>['sequence'],
+      'checksum'
+    >;
+  } | null;
 };
 
 type TranscriptInResponse = Pick3<

src/content/app/entity-viewer/variant-view/transcript-consequences/TranscriptConsequences.module.css

@@ -87,6 +87,10 @@
   position: relative;
 }
 
+.rowCollapsed {
+  margin-bottom: 5px;
+}
+
 .rowExpanded {
   padding-bottom: 30px;
 }

src/content/app/entity-viewer/variant-view/transcript-consequences/TranscriptConsequences.tsx

@@ -192,7 +192,7 @@ const TranscriptConsequencesPerGene = (props: {
           </div>
         </div>
         <div className={classnames(styles.right, styles.transcriptsCount)}>
-          <span>{transcriptConsCount}</span>
+          <span>{transcriptConsCount}</span>{' '}
           <span className={styles.label}>
             {pluralise('transcript', transcriptConsCount)}
           </span>
@@ -313,6 +313,9 @@ const TranscriptConsequencesList = (props: TranscriptConsequencesListProps) => {
         <div key={index}>
           <div
             className={classnames(styles.row, {
+              [styles.rowCollapsed]: !expandedIds.has(
+                consequencesForSingleTranscript.stable_id
+              ),
               [styles.rowExpanded]: expandedIds.has(
                 consequencesForSingleTranscript.stable_id
               )

src/content/app/entity-viewer/variant-view/transcript-consequences/transcript-consequence-details/TranscriptConsequenceDetails.tsx

@@ -25,6 +25,7 @@ import useTranscriptDetails from '../useTranscriptDetails';
 import TranscriptVariantDiagram from '../transcript-variant-diagram/TranscriptVariantDiagram';
 import TranscriptVariantGenomicSequence from '../transcript-variant-genomic-sequence/TranscriptVariantGenomicSequence';
 import TranscriptVariantCDS from '../transcript-variant-cds/TranscriptVariantCDS';
+import TranscriptVariantProtein from '../transcript-variant-protein/TranscriptVariantProtein';
 import { CircleLoader } from 'src/shared/components/loader';
 
 import type { TranscriptConsequencesData } from 'src/content/app/entity-viewer/variant-view/transcript-consequences/useTranscriptConsequencesData';
@@ -70,9 +71,25 @@ const TranscriptConsequenceDetails = (props: Props) => {
 
   const strand = gene.slice.strand.code;
   const cds = transcript.product_generating_contexts[0]?.cds;
+  const { proteinData } = transcriptDetailsData;
 
   return (
     <>
+      {proteinData && (
+        <TranscriptVariantProtein
+          alleleType={allele.allele_type.value}
+          proteinId={proteinData.proteinStableId}
+          proteinSequence={proteinData.proteinSequence}
+          proteinLength={proteinData.proteinLength}
+          variantSequence={proteinData.variantAltSequence}
+          variantStart={proteinData.variantStart}
+          variantEnd={proteinData.variantEnd}
+          distanceToProteinSliceStart={proteinData.distanceToProteinSliceStart}
+          distanceToProteinSliceEnd={proteinData.distanceToProteinSliceEnd}
+          consequences={transcriptConsequences.consequences}
+        />
+      )}
+
       {cds && transcriptConsequences.cds_location && (
         <CDSSection
           exons={transcript.spliced_exons}

src/content/app/entity-viewer/variant-view/transcript-consequences/transcript-variant-cds/TranscriptVariantCDS.module.css

@@ -1,3 +1,7 @@
+.diagram {
+  margin-bottom: 50px;
+}
+
 .exonBlock {
   fill: var(--color-grey);
 }

src/content/app/entity-viewer/variant-view/transcript-consequences/transcript-variant-cds/TranscriptVariantCDS.tsx

@@ -89,6 +89,7 @@ const TranscriptVariantCDS = (props: Props) => {
       height={DIAGRAM_HEIGHT}
       viewBox={`0 0 ${DIAGRAM_WIDTH} ${DIAGRAM_HEIGHT}`}
       overflow="visible"
+      className={styles.diagram}
     >
       <Exons exons={exonsWithWidths} />
       <VariantMark

src/content/app/entity-viewer/variant-view/transcript-consequences/transcript-variant-genomic-sequence/TranscriptVariantGenomicSequence.module.css

@@ -1,3 +1,7 @@
+.diagramContainer {
+  margin-bottom: 20px;
+}
+
 .letter {
   --sequence-block-color: transparent;
   --sequence-block-letter-color: var(--color-black);

src/content/app/entity-viewer/variant-view/transcript-consequences/transcript-variant-genomic-sequence/TranscriptVariantGenomicSequence.tsx

@@ -50,7 +50,7 @@ const TranscriptVariantGenomicSequence = (props: Props) => {
   } = props;
 
   return (
-    <div>
+    <div className={styles.diagramContainer}>
       <div>
         <LeftFlankingSequence
           flankingSequence={leftFlankingSequence}
@@ -369,8 +369,8 @@ const getAltAlleleAnchorPosition = ({
   return refAlleleSequence.length > MAX_REFERENCE_ALLELE_DISPLAY_LENGTH
     ? offsetForOddLengthVariant
     : refAlleleSequence.length % 2 === 0
-    ? offsetForEvenLengthVariant
-    : offsetForOddLengthVariant;
+      ? offsetForEvenLengthVariant
+      : offsetForOddLengthVariant;
 };
 
 export default TranscriptVariantGenomicSequence;

src/content/app/entity-viewer/variant-view/transcript-consequences/transcript-variant-protein/TranscriptVariantProtein.module.css

@@ -0,0 +1,96 @@
+.diagramContainer {
+  margin-bottom: 50px;
+}
+
+.letter {
+  --sequence-block-color: transparent;
+  font-size: 11px;
+  font-weight: var(--font-weight-semibold);
+}
+
+.letterReferenceAllele {
+  --sequence-block-letter-color: var(--color-black);
+}
+
+.letterFlankingSequence {
+  --sequence-block-letter-color: var(--color-medium-dark-grey);
+}
+
+.letter + .letter {
+  margin-left: 1px;
+}
+
+/* should probably move this to common styles */
+.ellipsis {
+  letter-spacing: -3px;
+}
+
+.changedSequenceContainer {
+  position: relative;
+  display: inline-block;
+  transform: translateX(-50%);
+  margin-top: 16px;
+}
+
+.changedSequenceBlock {
+  display: inline-flex;
+  height: 16px;
+  align-items: center;
+  color: var(--color-white);
+  background-color: var(--color-dark-grey);
+  font-family: var(--font-family-monospace);
+  line-height: 1;
+  font-size: 11px;
+  padding: 0 8px;
+}
+
+.proteinImpactLabel {
+  position: absolute;
+  left: -12px;
+  transform: translateX(-100%);
+  white-space: nowrap;
+}
+
+.modificationTypeLabel {
+  position: absolute;
+  top: 50%;
+  right: -12px;
+  font-size: 10px;
+  font-weight: var(--font-weight-light);
+  transform: translate(100%, -50%);
+}
+
+.altAlleleLetter {
+  --sequence-block-color: var(--color-dark-grey);
+}
+
+.referenceVariantSequenceLength {
+  font-family: var(--font-family-monospace);
+  font-size: 10px;
+}
+
+.referenceVariantSequenceLabel {
+  font-size: 10px;
+  font-weight: var(--font-weight-light);
+}
+
+/* FIXME: remove the classes for alt allele arrow
+   after extracting it into a dedicated component
+*/
+.altAlleleArrow {
+  position: absolute;
+  left: 50%;
+  top: -11px; /* positioning styles should be passed to the arrow */
+  transform: translateX(-50%);
+  width: 9px;
+  aspect-ratio: 1.5;
+  background-color: var(--color-orange);
+}
+
+.altAlleleArrowUp {
+  clip-path: polygon(50% 0, 100% 100%, 0 100%); /* this is what creates the triangle */
+}
+
+.altAlleleArrowDown {
+  clip-path: polygon(0 0, 50% 100%, 100% 0); /* this is what creates the triangle */
+}