Using a callback to set the height of sub-features is causing some of those features to be only partially-rendered

[john-portwood]

Hello!

I'm working with some gene data where the UTRs, CDS's, and Introns all have a score assigned to them, and I would like to color-code all of these features based on this score. I first tried using the default glyph with this data, but when attempting to use a callback for style->connectorColor, the callback wasn't able to read feature data from the introns. I then tried to use the Segments glyph and got the display mostly working the way I wanted, but I would still like the CDS features to stand out and so I've attempted to make them bigger than the other sub-features by using a callback for style->height. However when doing this it seems the larger CDS features aren't rendering completely in the first transcript, as shown in this screenshot:

Interestingly you can see that it renders completely in the other 2 transcripts. It just seems to be only the first transcript that is having this issue. Would it be possible to fix this? If there's a workaround too that would be much appreciated!

I'm using JBrowse 1.16.11, and the issue is occurring on Chrome, Safari, and FireFox (haven't tested Edge).

Thank you!

[cmdcolin]

if you can share an exact reproducible config trackList.json and even data files, it may help. the behavior of the glyphs follows a couple rules for the gene/processed transcript normal glyphs, it makes e.g. the utr's like 70% of the total height, but i don't know what the exact behavior is in your situation, probably best to just see a reproducible env if possible

[john-portwood]

Thanks Colin!

Here's the track config:

{
         "category" : "Annotations/ReelGene",
         "compress" : 0,
         "histograms" : {
            "color" : "crimson"
         },
         "key" : "PhyloP",
         "label" : "reelGene_phylop",
         "glyph" : "JBrowse/View/FeatureGlyph/Segments",
         "storeClass" : "JBrowse/Store/SeqFeature/NCList",
          "style" : {
            "className" : "feature",
            "color" : "{phylopcolors}",
            "utrColor" : "{phylopcolors}",
            "height" : "{phylopheight}",
            "connectorColor" : "{phylopcolors}"
         },
         "trackType" : "CanvasFeatures",
         "type" : "CanvasFeatures",
         "urlTemplate" : "tracks/reelGene_phylop/{refseq}/trackData.json"
  },

And the callback functions:

 phylopcolors = function(feature) {
   var score = feature.get('PhyloP_score');
   var type = feature.get('Type');
   console.log("colorcode type: " + type + "; score: " + score);
   if (parseFloat(score) < -3) {
     return "#0435ff";
   }
   else if (parseFloat(score) < -1) {
     return "#9609d7";
   }
   else if (parseFloat(score) < 1) {
     return "#c40681";
   }
   else if (parseFloat(score) < 3) {
     return "#b70303";
   }
   else if (parseFloat(score) > 3) {
     return "#f80808";
   }
   else {
     return "black"; 
   }
 }

 phylopheight = function(feature) {
   var type = feature.get('Type');
   console.log("height for: " + type);
   if (type == "CDS") { 
     return 11;
   }
   else {
     return 7;
   }
 }

A snippet of data is attached to this post as well. PhyloP-chr9-47884923..48346099.gff3.txt

Appreciate your help!

[cmdcolin]

I think if you make the parent feature e.g. type=="mRNA" the maximum height, then it ends up working

modified callback here

phylopheight = function(feature) {
   var type = feature.get('Type');
   console.log("height for: " + type);
   if (type == "CDS"||type=="mRNA") {
     return 11;
   }
   else {
     return 7;
   }
  }

increased the 11 to 30 just for exaggeration in screenshot

[cmdcolin]

pic without the mRNA case

[john-portwood]

That was it!!! Looks like the issue was caused by attempting to increase the height of a subfeature higher than its parent.

Thanks so much Colin! Really appreciate your help!

[cmdcolin]

glad to help :) i've been continually impressed by the jbrowse integration at maizegdb!