How to display transcript's name when clicking on a gene in JbrowseLinearView

[Akusem]

Question

I'm currently using JbrowseLinearView to diplay basic information about gene, which work correctly. However I would like to have some additional information about transcript when the user click on a gene. Like writing transcript's name in the Attributes field for example. Is there a way to do that ?

Additional information

I don't know if it useful, but here is my config of JbrowseLinearView:

      const genomeView = new JBrowseLinearView({
        container: document.getElementById("jbrowse_linear_view"),
        assembly,
        tracks,
        defaultSession,
        location,
      });

Assembly config:

 {
        "name": "ASM15095v2",
        "sequence": {
            "type": "ReferenceSequenceTrack",
            "trackId": "ASM15095v2-ReferenceSequenceTrack",
            "adapter": {
                "type": "BgzipFastaAdapter",
                "fastaLocation": {
                    "uri": "http://localhost:5000/Phaeodactylum_tricornutum.ASM15095v2.dna.toplevel.fa.gz",
                },
                "faiLocation": {
                    "uri": "http://localhost:5000/Phaeodactylum_tricornutum.ASM15095v2.dna.toplevel.fa.gz.fai",
                },
                "gziLocation": {
                    "uri": "http://localhost:5000/Phaeodactylum_tricornutum.ASM15095v2.dna.toplevel.fa.gz.gzi",
                },
            },
        },
    }

Tracks config:

    "ASM15095v2": [
        {
            "type": "BasicTrack",
            "trackId": "ASM15095v2-genes",
            "name": "Phaeodactylum tricornutum Ensembl genes",
            "category": ["Ensembl", "Genes"],
            "assemblyNames": ["ASM15095v2"],
            "adapter": {
                "type": "Gff3TabixAdapter",
                "gffGzLocation": {
                    "uri": "http://localhost:5000/Phaeodactylum_tricornutum_sort.ASM15095v2.47.gff3.gz",
                },
                "index": {
                    "location": {
                        "uri": "http://localhost:5000/Phaeodactylum_tricornutum_sort.ASM15095v2.47.gff3.gz.tbi",
                    },
                    "indexType": "TBI",
                },
            },
            "renderer": {
                "type": "SvgFeatureRenderer",
            },
        },
    ]

DefaultSession config:

let defaultSession = {
  name: "DefaultView",
  view: {
    id: "LinearGenomeView",
    type: "LinearGenomeView",
    displayRegions: [
      {
        id: "ASM15095v2-ReferenceSequenceTrack",
        refName: "1",
        assemblyNames: ["ASM15095v2"],
      },
    ],
    tracks: [
      {
        type: "BasicTrack",
        height: 250,
        configuration: "ASM15095v2-genes",
      },
    ],
  },
};

[cmdcolin]

Currently the feature details dialog does not render information about subfeatures such as transcripts, which is probably a needed here. Additionally, rendering the transcript names directly on the track might be useful too...might require #175

[Akusem]

Thanks for the answer, I've taken a look on how to render subfeatures information, and for what I understand the feature detail window is implemented in by BaseFeatureDetails in Jbrowse-core/BaseFeatureWidget and configure in linear-genome-view here ?
And I imagine as it's used by for variants and alignments, It would certainly need to be extended in another widget to avoid bug in them.

Anyway, as I don't really know how to transpile the code to be importable like in the BCC2020 course, I don't see how I could try to implement it. Is there a doc on that somewhere ?

[cmdcolin]

I think that probably we can make subfeatures rendered using just BaseFeatureDetails. It's true there are some specialized types but we should make BaseFeatureDetails able to render anything that allows feature.get('subfeatures') which a gene with transcripts has. If you are interested in taking on such a task, you can comment out the "subfeatures" line from the omit array, and then fix the formatting as the formatting (currently the code does a hack and renders highly nested data to JSON in the feature detail panel but it should actually instantiate subsections in the feature detail panel for each nested data structure)

[cmdcolin]

Picture of the feature details after commenting out subfeatures from the omit array, showing JSON rendering of the nested features

[cmdcolin]

It's also certainly something we can take care of in time, but you are welcome to contribute and this would be super great :)))

[cmdcolin]

As far as setting up a development environment I recommend

clone github repo
yarn
cd products/jbrowse-web
yarn start

Then navigate to http://localhost:3000/?config=test_data/volvox/config.json for example to get the volvox data pictured above

That will probably be easier than developing with the embedded lgv itself

[Akusem]

@cmdcolin Thanks for the instructions, I've been able to setup a dev environment and I will try to do it this week.

[Akusem]

Hi @cmdcolin,

I've finally got some time to take a look on it today, and I've been able to make BaseFeatureDetails render subfeatures in Card similar to Attributes.
Each subfeatures is using their field type as the Card title (which mean repetition of the title between multiple transcript/exon/id :/ ).

I precise that I've made the SubFeatures Cards closed by default.
However, If it is okay on my datasets (or on small one), it is getting really huge and unreadable on human dataset, and also it can be slow:

In the actual state I don't think I can make a PR today, due to the optimization problem.
Maybe I should put a length limit to not render to much card at the same time, or wait for the user to click on subfeatures Card to parse and render them.

If you have any idea for optimization, or for the title of the subfeatures Card, I appreciate it !

[cmdcolin]

If you have any idea for optimization, or for the title of the subfeatures Card, I appreciate it !

This has been a persistent challenge for us where loading up the webpage with too much data slows it down a lot. On jbrowse 1, we have a button called "load subfeatures" in the dialog box

See https://jbrowse.org/code/JBrowse-1.16.10/?loc=ctgA%3A1..20779&tracks=Genes&data=sample_data%2Fjson%2Fvolvox&tracklist=1&highlight=&nav=1&overview=1

It loads all genes and transcripts but does not attempt to render the exon/cds features unless a button "Load subfeatures" is clicked. Might be an ok balance

[Akusem]

It loads all genes and transcripts but does not attempt to render the exon/cds features unless a button "Load subfeatures" is clicked.

Thank for the answer, it's a good idea indeed !
Note the slowness come for rendering all the subfeatures card, not the subfeatures parsing. So this, or a render on scroll may be a good optimization.

[cmdcolin]

Note the slowness come for rendering all the subfeatures card

Right, the slowness generally comes from putting a lot of data into the DOM. The "load subfeatures" is just to "load subfeatures into the display", they are already parsed in memory

Render on scroll, aka "virtualized" rendering, is another option. I'm currently working on a virtualized rendering for our tracklist because if there are hundreds or thousands of tracks it slows down in a similar way

[Akusem]

I've found some react packages for simple on scroll render, but I imagine we prefer to avoid adding around 7.5kb (not gzipped) for just that

[Akusem]

Anyways, I think I've found some examples on how to do that without adding a dependancies.

[Akusem]

So, some update.
Finally I've used the load button, (simpler to implement), thus giving this result:

But i hadn't seen that the load subfeatures button was recursive T_T, so the actual implementation load everything at the same level (see next picture), and not just in the transcript wanted. Not really PR worthy.

Finally what I wanted to ask was concerning the fields to display in each subfeatures. Currently for each subfeatures I've reused the code of BaseAttributes and added 'gene_id', 'gene_name', 'gene_type', and 'gene_status' to the omitted fields to avoid redundancy. But maybe should I display something specifics for exon/cds/3'UTR and other ?

[cmdcolin]

Don't hesitate to make a PR, can set the PR as a draft and we can continue dialog on the code. It's your call though :)

I am not sure if I understand the question you mentioned in your last sentence? "But maybe should I display something specifics for exon/cds/3'UTR and other ?". I guess it is true those are pretty redundant too. It's possible we could try to make a compressed version of it. For example, like this https://github.com/Arabidopsis-Information-Portal/SeqLighter where it automatically stitches the exon sequences together to make cdna sequence. That would be pretty cool, and likely more informative than the long list of exons. It's been something people always wanted in jbrowse 1 but was never in core jbrowse 1, just made a plugin

[Akusem]

Hi @cmdcolin,
Sorry for the long absence, it's rude from me, but I simply didn't had time to work on the issue :(
I can finally get back to it and I've made a PR #1317 with the work i had done last time.

This afternoon I've also made a recursive version (but without a load additionnal data button for now):

Notice it display also the subfeature primary data (which was not the case in the one in PR), but is clearly not pretty for now. I think I will change at least some color if not shape of subfeature once I've had add the load additionnal data button in this version.

[cmdcolin]

Thanks again @Akusem :) I did a little refining on master after your PR merged but this is great. Lemme know what you think

[Akusem]

Thanks @cmdcolin, your version is indeed more elegant, and I'm happy to see the issue resolved.
Just in time now that @jbrowse/react-linear-genome-view work !