Merge pull request #1293 from alliance-genome/jbrowse_add_var_hilite

adding region highlighting for variants linked out to JBrowse
alliance-genome · Apr 3, 2024 · 22e8b2f · 22e8b2f
2 parents e5f1628 + 7bb6909
commit 22e8b2f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/containers/allelePage/AlleleSequenceView.js b/src/containers/allelePage/AlleleSequenceView.js
@@ -22,6 +22,13 @@ function findFminFmax(genomeLocation, variants) {
   return { fmin, fmax };
 }
 
+function findAlleleStart(variants) {
+  if (variants && variants.data.results) {
+//just get the start of the first variant
+    return variants[0].data.results.location.start;
+  }
+}
+
 const AlleleSequenceView = ({ allele }) => {
   const variants = useAllAlleleVariants(allele.id);
   const visibleTranscripts = useDataTableQuery(`/api/allele/${allele.id}/variants`);
@@ -41,8 +48,9 @@ const AlleleSequenceView = ({ allele }) => {
     isoformFilter = visibleTranscripts.data[0].transcriptList.map(a => a.id.split(':').pop());
   }
 
-
   const { fmin, fmax } = findFminFmax(genomeLocation, variants);
+	//highjacking the htpVaraint to send the start of the variant itself
+  const htpVariant = findAlleleStart(variants);
   return (
     <GenomeFeatureWrapper
       assembly={genomeLocation.assembly}
@@ -51,6 +59,7 @@ const AlleleSequenceView = ({ allele }) => {
       displayType='ISOFORM_AND_VARIANT'
       fmax={fmax}
       fmin={fmin}
+      htpVariant={htpVariant}
       geneSymbol={allele.symbol}
       genomeLocationList={genomeLocations}
       height='200px'

diff --git a/src/containers/genePage/genomeFeatureWrapper.js b/src/containers/genePage/genomeFeatureWrapper.js
@@ -90,13 +90,18 @@ class GenomeFeatureWrapper extends Component {
     this.gfc.closeModal();
   }
 
-  generateJBrowseLink(chr, start, end) {
+  generateJBrowseLink(chr, start, end, htpVariant) {
     //const geneSymbolUrl = '&lookupSymbol=' + this.props.geneSymbol;
     //  maybe will use this ^^^ haven't decided
     const assembly = (getSpecies(this.props.species).jBrowseName).replace(" ","_");
+    var externalJBrowsePrefix = '/jbrowse2?tracklist=true&assembly=' + assembly;
+
+	  //  htpVariant is a loc string of the format 'chr:start' for a variant
+    if (htpVariant) {
+        const pieces  = htpVariant.split(':');
+        externalJBrowsePrefix = externalJBrowsePrefix + '&highlight=' + pieces[0] + ':' + pieces[1] + '-' + pieces[1];
+    }
 
-    // this vvv will obviously have to be replaced with a proxied agr url
-    const externalJBrowsePrefix = '/jbrowse2?tracklist=true&assembly=' + assembly;
     const linkLength = end - start;
     let bufferedMin = Math.round(start - (linkLength * LINK_BUFFER / 2.0));
     bufferedMin = bufferedMin < 0 ? 0 : bufferedMin;
@@ -220,13 +225,14 @@ class GenomeFeatureWrapper extends Component {
   }
 
   render() {
-    const {assembly, id, displayType,genomeLocationList} = this.props;
+    const {assembly, id, displayType,genomeLocationList,htpVariant} = this.props;
     const genomeLocation = getSingleGenomeLocation(genomeLocationList);
 
     const coordinates = genomeLocationList.map(location => {
+	    //htpVariant contains location of variant info; can use that to set hightlight
       return(
         <span key={location.chromosome+location.start+location.end}>
-          <ExternalLink href={this.generateJBrowseLink(location.chromosome,location.start,location.end)}>
+          <ExternalLink href={this.generateJBrowseLink(location.chromosome,location.start,location.end,htpVariant)}>
             {location.chromosome.toLowerCase().startsWith('chr') || location.chromosome.toLowerCase().startsWith('scaffold') ? location.chromosome : 'Chr' + location.chromosome}:{location.start}...{location.end}
           </ExternalLink> {location.strand} ({numeral((location.end - location.start) / 1000.0).format('0,0.00')} kb)
         </span>