Add more variant information to right hand panel (#1079)

Ensembl · Jan 31, 2024 · c7b956e · c7b956e
1 parent afd4908
commit c7b956e
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 14 deletions.
diff --git a/src/content/app/entity-viewer/state/api/queries/variantDefaultQuery.ts b/src/content/app/entity-viewer/state/api/queries/variantDefaultQuery.ts
@@ -65,6 +65,9 @@ export const variantDefaultQuery = gql`
             start
             end
           }
+          strand {
+            code
+          }
         }
         allele_sequence
         reference_sequence
@@ -126,6 +129,7 @@ type VariantDetailsAllelePredictionResult = Pick<
 export type VariantDetails = Pick<Variant, 'name'> &
   Pick3<Variant, 'slice', 'location', 'start' | 'end' | 'length'> &
   Pick3<Variant, 'slice', 'region', 'name'> &
+  Pick3<Variant, 'slice', 'strand', 'code'> &
   Pick2<Variant, 'allele_type', 'value'> &
   Pick2<Variant, 'primary_source', 'url'> &
   Pick3<Variant, 'primary_source', 'source', 'name' | 'release'> & {

diff --git a/src/content/app/entity-viewer/variant-view/variant-view-sidebar/overview/MainAccordion.tsx b/src/content/app/entity-viewer/variant-view/variant-view-sidebar/overview/MainAccordion.tsx
@@ -27,10 +27,17 @@ import {
   AccordionItemPanel,
   AccordionItemButton
 } from 'src/shared/components/accordion';
+import VariantVCF from 'src/shared/components/variant-vcf/VariantVCF';
+import ViewInApp from 'src/shared/components/view-in-app/ViewInApp';
 
+import VariantLocation from 'src/content/app/genome-browser/components/drawer/drawer-views/variant-summary/variant-location/VariantLocation';
+
+import { buildFocusIdForUrl } from 'src/shared/helpers/focusObjectHelpers';
 import { getReferenceAndAltAlleles } from 'src/shared/helpers/variantHelpers';
+import { getStrandDisplayName } from 'src/shared/helpers/formatters/strandFormatter';
 
 import type { VariantDetails } from 'src/content/app/entity-viewer/state/api/queries/variantDefaultQuery';
+import { Strand } from 'src/shared/types/core-api/strand';
 
 import styles from './VariantOverview.module.css';
 
@@ -43,6 +50,15 @@ type Props = {
 
 const MainAccordion = (props: Props) => {
   const { genomeId, variantId, variant, activeAlleleId } = props;
+
+  const gbVariantUrl = urlFor.browser({
+    genomeId: genomeId,
+    focus: buildFocusIdForUrl({
+      type: 'variant',
+      objectId: variantId
+    })
+  });
+
   const disabledAccordionButtonClass = classNames(
     styles.entityViewerAccordionButton,
     {
@@ -55,7 +71,7 @@ const MainAccordion = (props: Props) => {
       <Accordion
         className={styles.entityViewerAccordion}
         allowMultipleExpanded={true}
-        preExpanded={['alleles']}
+        preExpanded={['alleles', 'in_this_region']}
       >
         <AccordionItem
           className={styles.entityViewerAccordionItem}
@@ -78,22 +94,44 @@ const MainAccordion = (props: Props) => {
           </AccordionItemPanel>
         </AccordionItem>
 
+        <section>
+          <div className={styles.sectionHead}>Location</div>
+          <div className={styles.sectionContent}>
+            <div>
+              <VariantLocation variant={variant} />
+              <span className={styles.featureDetails}>
+                {getStrandDisplayName(Strand.FORWARD)}
+              </span>
+            </div>
+
+            <div className={styles.labelValueWrapper}>
+              <div className={styles.label}>VCF</div>
+              <VariantVCF variant={variant} withCopy={true} />
+            </div>
+          </div>
+        </section>
+
         <AccordionItem
           className={styles.entityViewerAccordionItem}
           uuid={'in_this_region'}
         >
           <AccordionItemHeading className={styles.entityViewerAccordionHeader}>
-            <AccordionItemButton
-              className={disabledAccordionButtonClass}
-              disabled={true}
-            >
+            <AccordionItemButton className={styles.entityViewerAccordionButton}>
               In this region
             </AccordionItemButton>
           </AccordionItemHeading>
           <AccordionItemPanel
             className={styles.entityViewerAccordionItemContent}
           >
-            <div>No data available</div>
+            <section>
+              <div>
+                See other variants, structural variants, genes and regulatory
+                features in their genomic context
+              </div>
+              <div className={styles.newRowGroup}>
+                <ViewInApp links={{ genomeBrowser: { url: gbVariantUrl } }} />
+              </div>
+            </section>
           </AccordionItemPanel>
         </AccordionItem>
 

diff --git a/...t/app/entity-viewer/variant-view/variant-view-sidebar/overview/VariantOverview.module.css b/...t/app/entity-viewer/variant-view/variant-view-sidebar/overview/VariantOverview.module.css
@@ -2,10 +2,6 @@
   font-size: 13px;
 }
 
-.defaultContent {
-  margin: 15px;
-}
-
 .row {
   display: flex;
   align-items: baseline;
@@ -16,13 +12,15 @@
 }
 
 .label {
-  line-height: 1.2;
   font-weight: var(--font-weight-light);
-  text-align: right;
   font-size: 12px;
   margin-right: 10px;
 }
 
+.labelValueWrapper {
+  display: flex;
+  margin-top: 10px;
+}
 .externalLink {
   padding-top: 8px;
 }
@@ -49,6 +47,24 @@
   flex-direction: column;
 }
 
+.sectionHead {
+  font-size: 12px;
+  font-weight: var(--font-weight-light);
+  border-bottom: 1px solid var(--color-grey);
+  margin-bottom: 15px;
+  margin-top: 20px;
+}
+
+.sectionContent {
+  margin-left: 15px;
+  margin-bottom: 15px;
+}
+
+.featureDetails {
+  font-size: 11px;
+  font-weight: var(--font-weight-light);
+  margin-left: 12px;
+}
 
 /* NOTE: the styles below require the extra specificity in order to overwrite Accordion styles
   We should update the Accordion to use CSS variables.

diff --git a/src/content/app/entity-viewer/variant-view/variant-view-sidebar/overview/VariantOverview.tsx b/src/content/app/entity-viewer/variant-view/variant-view-sidebar/overview/VariantOverview.tsx
@@ -78,7 +78,7 @@ const VariantOverview = () => {
 
   return (
     <div className={styles.overviewContainer}>
-      <section className={styles.defaultContent}>
+      <section className={styles.sectionContent}>
         <div>
           <span className={styles.labelTextStrong}>{variant.name}</span>
           <span className={styles.variantType}>

diff --git a/src/shared/components/variant-vcf/VariantVCF.tsx b/src/shared/components/variant-vcf/VariantVCF.tsx
@@ -48,7 +48,6 @@ type Props = {
 
 const VariantVCF = (props: Props) => {
   const vcfSequenceParts = getVCFStringParts(props.variant);
-
   const componentClasses = classNames(styles.container, props.className);
 
   return (