onClick problem with URL

[mictadlo]

Hi, I usually use the below onClick event to redirect the user to NCBI side.

      {  
         "compress" : 1,
         "key" : "XPonly-besthit_addNoXP-keep-clean2",
         "label" : "XPonly-besthit_addNoXP-keep-clean2",
         "onClick" : {
            "action" : "newWindow",
            "label" : "search at NCBI",
            "url" : "http://www.ncbi.nlm.nih.gov/protein/{NCBI}"
         },
         "storeClass" : "JBrowse/Store/SeqFeature/NCList",
         "style" : {
            "className" : "feature",
            "label" : false
         },
         "trackType" : "HTMLFeatures",
         "type" : "HTMLFeatures",
         "urlTemplate" : "tracks/XPonly-besthit_addNoXP-keep-clean2/{refseq}/trackData.jsonz"
      },

Unfortunately, we have got a new GFF3 file that does not have an NCBI field instead the XP id is saved end the end of the Note field:

NbLab350C00     scallop mRNA    1275635 1284161 .       +       .       ID=NbL00g00020.1;Parent=NbL00g00020;RPKM=3.9972;Note=armadillo repeat-containing protein 8 LOC109230773 XP_019251743.1;evalue=0.00;cov=325.3290

How could the XP id be extracted and added to the URL?

Thank you in advance,

Michal

[cmdcolin]

@mictadlo see https://jbrowse.org/docs/mouse_configs.html#click-configuration-options for an example of using a configuration callback for the click action...you could probably use a regex or something like this on the note field (the note field might automatically get renamed to feature.get('description')....)

[mictadlo]

Thank you for the link. Unfortunately, I do not know JavaScript. Could you please show me how to do it?

Thank you in advance.

Michal

[cmdcolin]

Here is a method to do it on the specific example you gave

It queries the last word in the note string (in this case the XP id) on NCBI

    {
            "label": "testing",
            "storeClass": "JBrowse/Store/SeqFeature/NCList",
            "style": {
                "className": "feature"
            },
            "onClick": {
                "iconClass": "dijitIconDatabase",
                "action": "function() { var l = this.feature.get('note').split(' ').slice(-1); console.log(l); window.open('http://www.ncbi.nlm.nih.gov/gquery/?term='+l); }"
            },
            "trackType": null,
            "type": "FeatureTrack",
            "urlTemplate": "tracks/testing/{refseq}/trackData.json"
        }

[mictadlo]

Thank you it works. I received a new GFF3 file. For this one, I need to allow InterPro IDs to be open in a new window (https://www.ebi.ac.uk/interpro/entry/InterPro/IPR000484).

Peinf101Scf20611    maker   mRNA    104 2969    .   -   .   ID=Peinf101Scf20611g00003.1;Parent=Peinf101Scf20611g00003;Name=Peinf101Scf20611g00003.1;_AED=0.06;_eAED=0.06;_QI=0|0|0|1|0|0|3|0|658;AltID=maker-Peinf101Scf20611-snap-gene-0.2-mRNA-1;PreviousVersionID=Peinf101Scf20611g00003.1;PreviousVersionLoc=Peinf101Scf20611:104..2969;Functional_ahrd_qcode="*-**";Note="ATP synthase subunit alpha, chloroplastic";InterPro=IPR005294,IPR002146,IPR027417,IPR023366;Functional_ipr_hit=GO:0046034,GO:0045261,GO:0005524,GO:0015986,GO:0015991,GO:0033178,GO:0016820,GO:0045263,GO:0015078,GO:0015992,GO:0046961,GO:0046933

The InterPro field in GFF3 file has one or more IDs. How can I allow the user to click on any ID? Maybe a pop when the user mouse over a gene?

Thank you in advance,

Michal

[mictadlo]

I got Uncaught TypeError: this.feature.get(...).split is not a function with

Peinf101Ctg12151113     maker   mRNA    58      276     .       -       .       ID=Peinf101Ctg12151113g00001.1;Parent=Peinf101Ctg12151113g00001;Name=Peinf101Ctg12151113g00001.1;_AED=0.03;_eAED=0.03;_QI=0|-1|0|1|-1|1|1|0|73;AltID=snap_masked-Peinf101Ctg12151113-processed-gene-0.0-mRNA-1;PreviousVersionID=Peinf101Ctg12151113g00001.1;PreviousVersionLoc=Peinf101Ctg12151113:58..276;Functional_ahrd_qcode="*-**";Note="plasma membrane intrinsic protein 2E";InterPro=IPR023271,IPR000425;Functional_ipr_hit=GO:0016020,GO:0006810,GO:0005215

     {  
         "compress" : 1,
         "category" : "Annotations",
         "onClick": {
            "iconClass": "dijitIconDatabase",
            "action": "function() { var l = this.feature.get('InterPro').split(',').slice(-1); console.log(l); window.open('https://www.ebi.ac.uk/interpro/entry/InterPro/'+l); }"
        },

What did I miss?

[cmdcolin]

sorry we are a bit strapped for time and it's hard to get time for jb1 support... you have the right idea with console.log to aid debugging though.

the error message says

"split is not a function" because this.feature.get('InterPro') is probably already an array. in that case you can pick var l = this.feature.get('InterPro').split(',')[0] or something like this to get the first entry, or open a new tab for all of them

you can also consider modifying the feature details to contain links, but this is a little more advanced https://jbrowse.org/docs/mouse_configs.html#additional-customizations-to-the-pop-up-boxes-1

[cmdcolin]

let me know if there are any remaining issues :) maybe close for now