Exon-Intron Structure Display

[jjrozewicki]

I have a question about visualization of gene data in the current version of JBrowse2. Depending on whether or not this is currently implemented, this might be a request for a new feature -or- a request for documentation about an existing feature.

It appears right now that JBrowse2 displays some information about genes using lines and arrowheads. However, it seems like the exon-intron structure (specifically, length of exons) is not currently displayed for our data from AUGUSTUS.

Has this feature been implemented in JBrowse2? If so, what fields are necessary in the GFF3 file for gene data to make the exon-intron structure visible?

[cmdcolin]

Do you happen to have a sample snippet or screenshot of what is seen? One issue might be that the default that AUGUSTUS outputs may be more like GTF instead of GFF3

This thread has some notes about how you can either convert the "GFF" that it outputs by default, which is probably more like GTF, into a GFF3 https://github.com/jorvis/biocode/blob/master/gff/convert_augustus_to_gff3.py or possibly the program takes a --gff3 flag too

[jjrozewicki]

It looks to me like my output is closer to proper GFF3 than the examples in that script, but I will attempt to run that script.

Here is what the contents of the GFF3 file look like:

Here is how it is displayed in JBrowse2:

[jjrozewicki]

When I run the linked script I get this Exception:

Exception: ERROR: Found CDS column with parent (Test0000001.t1) mRNA not yet in the file

As the exon/intron information appears to be in the file already, is it really necessary for me to run other tools to add mRNA information and reconvert for JBrowse2?

[cmdcolin]

Which part of the current rendering is unexpected? Currently the exons are drawn using directional arrows in orange. We had talked about possibly making them more simple boxes, and we might also do a refactor on how genes are drawn in #674 so definitely open to how genes look

[jjrozewicki]

The current view appears to show position of exon starts, but not exon length.

UCSC Genome Browser, for example, shows exon length with these kind of blue boxes:

This makes the intron/exon/CDS/etc. structure more clear. However, documentation of what the symbols mean is also important because it was also difficult for me to understand (and explain to users) what the arrowheads in the current visualization meant.

I realize a lot of these features are currently in flux, by the way, but some kind of simple legend would be very useful in addition to a more detailed view exposing lengths of more features.

[jjrozewicki]

I have done some work on this on my own, and I have discovered the problem we were having.

Here is the current output of SvgFeatureRenderer:

Here is the output with a modified version of the renderer that disables the chevron arrowheads:

The difference is a bit subtle, but it's very meaningful. In the version without arrows the difference in exon length can be more clearly seen. This is because the arrows in the current version of the SvgFeatureRenderer are drawn with a fixed screen size that is calculated based on the screen height of the track.

This means that displayed length of exons is currently not accurate. Every exon has additional width appended (or prepended), and this width is variable depending on zoom level. When zoomed in very far this doesn't matter as much, but when zoomed out to reasonable levels the arrowheads greatly affect the displayed width of the exons. When the screen length of the exon is less than the width of the arrowhead all that is visible is the arrowhead. This gives a misleading impression of exon length that could cause problems for users.

With my colleagues I have been experimenting with some different ways to address this issue:

1. Move the chevron arrowheads to the middle of the exon (but only when the exon is long enough to accommodate the arrow)
2. Put the strand direction information on the line segment using a polyline marker.
3. Put the strand information in the gene name using a bit of JEXL in the configuration.

We're not sure which of these is best, but all are preferable to the current approach which gives an inaccurate representation of exon/UTR length.

[jjrozewicki]

Was anything decided about potential fixes for this issue?

[cmdcolin]

I very much agree with you that the current glyphs are misleading. I think we should probably remove directional arrows on exons/CDS, with maybe only a directional arrow at the end or something like this (indeed, all three of your suggestions very good).

We can add this to the current SVG renderer, and I am also working on a canvas renderer. This is still a work in progress but it will feel much faster than SVG when done (and the canvas renderer already has a style much more similar to your renderings)

https://jbrowse.org/code/jb2/add_canvas_feature_renderer/?config=test_data%2Fvolvox%2Fconfig.json&session=local-_bBPfEEVx

[garrettjstevens]

@cmdcolin I think you probably meant for that to be a shareable link.

[cmdcolin]

yep thanks, share link https://jbrowse.org/code/jb2/add_canvas_feature_renderer/?config=test_data%2Fvolvox%2Fconfig.json&session=share-jUnun4Yghl&password=UDzrk

[jjrozewicki]

So as to not leave anyone in the dark about my work on this last year, the design we eventually landed on in my lab was this:

1. Chevrons are not part of the drawn regions at all, but instead the direction is indicated with arrows along the line segment along with a final arrow at the head of the feature to ensure that direction is still communicated even when the feature is majority exon.
2. Direction is also shown in the labels with a tiny bit of JEXL that adds arrows based on the strand information.

This solution is very similar to what @cmdcolin suggested above, and only required minor modifications to SvgFeatureRenderer

[cmdcolin]

The exon-intron structure display was changed to be square in 1.6.9 with the default svg renderer, canvas may follow later on

Strand display will be improved sometime soon hopefully also, either with arrows like in your screenshot @jjrozewicki or with floating arrows

[cmdcolin]

Thanks so much again for the feedback and really appreciate your contributions :)