How to access the dbxrefs in the subfeatures?

[Chi-HsienChang]

Hi JBrowse2 developers,

Our group has started working on a plugin to handle linkouts for dbxrefs in features and subfeatures.
The specific use case is to use this with NCBI generated gene sets so that users can link out to the different NCBI resource pages. We are done well in getting the linkouts working for dbxrefs at the feature level, but we are having problems figuring out how to access the dbxrefs in the subfeatures. Below is a link to the GitHub repo for the plugin, and any advice you might have on accessing subfeatures would be greatly appreciated.

https://github.com/Chi-HsienChang/jbrowse-plugin-template

Thank you!

[cmdcolin]

@Chi-HsienChang How is your plugin being used in e.g. your config file? I see it defines custom jexl functions but how are they used

[Chi-HsienChang]

Hi @cmdcolin,

I use the plugin by adding the below setting to jbrowse-plugin-template/.jbrowse/config.json manually:
"formatDetails": {
"feature": "jexl:{dbxref:linkout_by_dbxref(feature), description:linkout_to_ncbi(feature)}"
}

In addition, I study about how to automatically add the setting to the user's config.json by the plugin now.

Thank you!

[cmdcolin]

Thanks for this info

• What is an example GFF e.g. where is the Genbank stored? I would recommend not JSON.stringifying things probably because it removes the structure of the feature object. It may work ok, but if you have knowledge of where the Genbank field is stored on the feature object, you can access that directly instead of stringifying the whole feature object and searching inside the string

• Do you want to display "on the parent feature" the details of the subfeatures? If so, then your approach may be fine, you can access feature.subfeatures (you do this in your plugin, but you also didn't explain what error you ran into doing this). If not, then you can also consider adding links to the subfeatures directly, but there was a bug related to this that is being fixed here Fix subfeatures formatter not being applied to feature detail panel #3608

[cmdcolin]

I also made another issue for your request to make plugins be able to set a custom default value here #3609

[Chi-HsienChang]

Hi @cmdcolin ,

Thank you for your guidance and help!

1. I add the example GFF file to the path ./src/file.gff

   I want to access that directly instead of stringifying the whole feature object and searching inside the string. However, I fail it.

2. I want to use subfeatures.name or subfeatures.id (https://d.pr/i/1qRvcI) to access the variable, it does not work for me.
   For example:

   "formatDetails": {
   "feature": "jexl:{NCBI_Gene:linkout_gene(feature)}",
   "subfeatures": "jexl:{name:'<a href=https://google.com/?q='+subfeatures.name+'>'+subfeatures.name+'<slash&a>'}"
   }

   "feature" works for me, but "subfeatures" does not work for me.
   I want to add links to the subfeatures directly.

3. I am not sure whether the plugin is able to automatically add the setting:
   "formatDetails": { "feature": "jexl:{NCBI_Gene:linkout_gene(feature)}" }
   to the user's config.json on JBrowse2 desktop or web versions.

4. I want to ask whether I need to clone https://github.com/GMOD/jbrowse-components.git to develop our linkout plugin. Now, I just
   add jexl functions to the plugin's src/index.ts.
   If I want to publish the plugin in the future whether it necessary to clone the jbrowse-components to develop it?

Thank you!

[Chi-HsienChang]

Hi @cmdcolin,
Your responses are very helpful to me. I successfully accesse the subfeatures now. Thank you very much!

[Chi-HsienChang]

Hi @cmdcolin,

I have an another question:

I want to use the similar way to instead of JSON.stringify(feature.dbxref), but it does not work (subfeatures works for me).
I try several ways, I don't know how to fix it.

`"formatDetails": {
        "feature": "jexl:{dbxref:linkout_GeneID(feature)}",
        "subfeatures": "jexl:{dbxref:linkout_Genbank(feature)}"
      },

pluginManager.jexl.addFunction('linkout_GeneID', (feature: any) => {
      let dbxref = feature.dbxref
        ?.find((f: any) => f.startsWith('GeneID:'))
        ?.replace('GeneID:', '')
      if (!dbxref) {
        return feature.name 
      }
      return `<a href=https://www.ncbi.nlm.nih.gov/gene/?term=${dbxref}>GeneID:${feature.name||dbxref}</a>`
    })

Thank you!

[cmdcolin]

potential fix @Chi-HsienChang edit: see #3603 (comment)

pluginManager.jexl.addFunction('linkout_GeneID', feature => {
        if (feature.dbxref) {
          const ref = Array.isArray(feature.dbxref)
            ? feature.dbxref
            : [feature.dbxref]
          let dbxref = ref
            ?.find(f => f.startsWith('GeneID:'))
            ?.replace('GeneID:', '')
          if (!dbxref) {
            return feature.name
          }
          return `<a href=https://www.ncbi.nlm.nih.gov/gene/?term=${dbxref}>GeneID:${
            feature.name || dbxref
          }</a>`
        }
        return feature.name
      })

[cmdcolin]

you can see this code checks if feature.dbxref is an array, and if so, it uses it normally, otherwise it turns it into an array (with one element, itself). this is sort of awkward but is needed due to how the gff is parsed...if it is a single entry, it is a plain string, if it is multiple entries, it is an array of strings

in our other data parsing modules like @gmod/vcf, we make "everything an array by default" but with gff it is sometimes a string and sometimes an array

[Chi-HsienChang]

Hi @cmdcolin ,

Thank you for your guidance, I understand, thank you!

[cmdcolin]

@Chi-HsienChang Here is an alternative solution that handles multiple dbxref types in a single callback, and importantly handles MULTIPLE dbxrefs in a single feature. before, the usage of "find" would find the single dbxref type we were looking for and ignore others, but then the others wouldn't get printed in the feature details.

This new callback will properly handle multiple

Example

pluginManager.jexl.addFunction('linkout', feature => {
        // no dbxref found, so return empty string
        if (!feature.dbxref) {
          return ''
        }
        const dbxrefs = Array.isArray(feature.dbxref)
          ? feature.dbxref
          : [feature.dbxref]
        return dbxrefs.map(dbxref => {
          // customized link for Genbank dbxref
          if (dbxref.startsWith('Genbank:')) {
            const ref = dbxref.replace('Genbank:', '')
            return `<a href=https://www.ncbi.nlm.nih.gov/gene/?term=${ref}>${dbxref}</a>`
          }
          // customized link for GeneID dbxref
          else if (dbxref.startsWith('GeneID:')) {
            const ref = dbxref.replace('GeneID:', '')
            return `<a href=https://www.ncbi.nlm.nih.gov/gene/?term=${ref}>${dbxref}</a>`
          }
          // no link, just plaintext returned
          return dbxref
        })
      })

Config

"formatDetails": {
        "feature": "jexl:{dbxref:linkout(feature)}",
        "subfeatures": "jexl:{dbxref:linkout(feature)}"
      }

Screenshot

You can see on the subfeature it correctly has multiple dbxref links for that entry

[Chi-HsienChang]

Hi @cmdcolin,

It works for me, thank you so so much!