Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Exon-Intron Structure Display #1909

Closed
jjrozewicki opened this issue Apr 15, 2021 · 13 comments
Closed

Exon-Intron Structure Display #1909

jjrozewicki opened this issue Apr 15, 2021 · 13 comments
Labels
enhancement New feature or request

Comments

@jjrozewicki
Copy link

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?

@jjrozewicki jjrozewicki added the enhancement New feature or request label Apr 15, 2021
@cmdcolin
Copy link
Collaborator

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
Copy link
Author

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:
image

Here is how it is displayed in JBrowse2:
image

@jjrozewicki
Copy link
Author

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
Copy link
Collaborator

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
Copy link
Author

jjrozewicki commented Apr 16, 2021

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:
image

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
Copy link
Author

jjrozewicki commented Jul 1, 2021

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:
image

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

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
Copy link
Author

Was anything decided about potential fixes for this issue?

@cmdcolin
Copy link
Collaborator

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)
Screenshot from 2022-02-10 15-40-40

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

@garrettjstevens
Copy link
Collaborator

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

@jjrozewicki
Copy link
Author

jjrozewicki commented Feb 21, 2022

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:

image

  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
Copy link
Collaborator

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants