Issues modifying the Feature Detail pane to call an ORF ID in a search

[cjhart-1993]

Hi all! Got a maybe a niche question/issue at the moment. I'm working on deploying a really simple Jbrowse2 web instance on a server here. Everything is finally together in a way that's useful for the lab but I was hoping to essentially do what's documented on https://jbrowse.org/jb2/docs/config_guides/customizing_feature_details/#making-sophisticated-customizations-to-feature-detail-panels, where Name links out to the NCBI gene page and/or pages on InterPro. When I use an exact copy of what's documented above I end up with though is Name "undefined" (as the below screenshot) and the search is for the word "undefined" as well. Ultimately I would like for the search to be for the id string, in the below case "GL50803_0014604". I've tried modifying the '+feature.name+' to '+feature.id+' or "feature.ID+' that are listed in the jbrowse attribute window or the gff it's pulling from, but neither seems to change the output. Am I missing something here? It seems like I need to define +feature.name+ somewhere but I'm not sure where it's actually retrieving things from and the syntax is confusing, even after reading through some of the jexl docs. Any help would be amazing!!

To Reproduce

To reproduce I've taken a standard intall of Jbrowse2 and added two assemblies, gff files for each and a bigwig file for each as well. I've modified the config.json file as per https://jbrowse.org/jb2/docs/config_guides/customizing_feature_details/#making-sophisticated-customizations-to-feature-detail-panels where the below block of code was sandwiched into the gff3 section; "formatDetails": { "feature": "jexl:{name:''+feature.name+'',newfield:'Custom contents here: '+feature.name,type:undefined }" }, I've tried modifying '+feature.name+' to variants based on what things are named in the gff files themselves (e.g. +feature.ID+ or +feature.id+ or just +id+) but this has not fixed the issue.

Expected behavior

Expected behaviour would be a clickable linkout as per the tutorial page.

Screenshots

Version:

Jbrowse 2.13.1 installed on Debian Stable that's up to date. Tried across several browsers (Chrome, Firefox, Opera) with no differences between them. Additional context

[cmdcolin]

hi there I know it can be a little tricky to set up this particular configuration! there are lots of sort of moving parts including a) using jexl...jexl is tricky b) returning an object from jexl...not many of our configs do that c) not knowing which feature fields are available

and more...so...i sympathize! i think we could maybe do some stuff better in the future, but for now...

here is a working example in our volvox config

https://jbrowse.org/code/jb2/v2.13.1/?config=test_data%2Fvolvox%2Fconfig.json&session=share-y1OzdcUDKf&password=2fyF2

full track config

{
      "type": "FeatureTrack",
      "trackId": "gff3tabix_genes",
      "assemblyNames": ["volvox"],
      "name": "GFF3Tabix genes",
      "formatDetails": {
        "feature": "jexl:{name:'<a href=https://google.com/?q='+feature.name+'>'+feature.name+'</a>',extrafield:'Field added with custom callback:' + feature.name,phase:undefined,type:undefined}",
        "subfeatures": "jexl:{name:'<a href=https://google.com/?q='+feature.name+'>Subfeature: '+(!feature.name?'No name':feature.name)+'</a>'}"
      },
      "category": ["Miscellaneous"],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "volvox.sort.gff3.gz",
          "locationType": "UriLocation"
        },
        "index": {
          "location": {
            "uri": "volvox.sort.gff3.gz.tbi",
            "locationType": "UriLocation"
          }
        }
      }
    },

the subfeatures one can be omitted if you don't want to customize subfeatures

link in the config https://github.com/GMOD/jbrowse-components/blob/65ed1eb3466d5a474de7345c927acebf1196f73e/test_data/volvox/config.json#L1092-L1115

if you are still having issues, and feature.name is undefined, note that feature.name comes from the Name= field of the gff. similarly id comes from the ID= field of the gff

note that if you want to debug a little, there is a utility function called 'log' that just console.log's the output to the browser devtools, and then returned the value as an identity function so i can write

        "feature": "jexl:{name:'<a href=https://google.com/?q='+log(feature).name+'>'+feature.name+'</a>',extrafield:'Field added with custom callback:' + feature.name,phase:undefined,type:undefined}",

this will log feature, and then transparently return it, so then i get the name, off it, but it just then let's me inspect the feature object in devtools which in this case looks like

i could try to debug what you pasted if you want too. it looks like maybe there is a missing closing tag on the but that might not be the real cause

[cjhart-1993]

Fantastic! I've just had another go through it using your template above and it's working!! Thanks for your help!