ebi-webcomponents / protvista-uniprot

The ProtVista tool for the UniProt website
MIT License
12 stars 6 forks source link

Evidence pop-up not showing anything #9

Closed AurelieMLB closed 4 years ago

AurelieMLB commented 4 years ago

Hello,

I am trying to add an extra track (disorder prediction from sequence) to the existing uniprot viewer. I might miss something, apologies if this is the case, but I cannot get the evidence in my data file to be visible in the pop-up that appear when one click on a data point in the tack.

Here is my file:

{
  "accession":"P05067",
   "entryName":"A4_HUMAN",
   "sequence":"MLPGLALLLLAAWTARALEVPTDGNAGLLAEPQIAMFCGRLNMHMNVQNGKWDSDPSGTKTCIDTKEGILQYCQEVYPELQITNVVEANQPVTIQNWCKRGRKQCKTHPHFVIPYRCLVGEFVSDALLVPDKCKFLHQERMDVCETHLHWHTVAKETCSEKSTNLHDYGMLLPCGIDKFRGVEFVCCPLAEESDNVDSADAEEDDSDVWWGGADTDYADGSEDKVVEVAEEEEVAEVEEEEADDDEDDEDGDEVEEEAEEPYEEATERTTSIATTTTTTTESVEEVVREVCSEQAETGPCRAMISRWYFDVTEGKCAPFFYGGCGGNRNNFDTEEYCMAVCGSAMSQSLLKTTQEPLARDPVKLPTTAASTPDAVDKYLETPGDENEHAHFQKAKERLEAKHRERMSQVMREWEEAERQAKNLPKADKKAVIQHFQEKVESLEQEAANERQQLVETHMARVEAMLNDRRRLALENYITALQAVPPRPRHVFNMLKKYVRAEQKDRQHTLKHFEHVRMVDPKKAAQIRSQVMTHLRVIYERMNQSLSLLYNVPAVAEEIQDEVDELLQKEQNYSDDVLANMISEPRISYGNDALMPSLTETKTTVELLPVNGEFSLDDLQPWHSFGADSVPANTENEVEPVDARPAADRGLTTRPGSGLTNIKTEEISEVKMDAEFRHDSGYEVHHQKLVFFAEDVGSNKGAIIGLMVGGVVIATVIVITLVMLKKKQYTSIHHGVVEVDAAVTPEERHLSKMQQNGYENPTYKFFEQMQN",
   "sequenceChecksum":"A12EE761403740F5",
   "taxid":9606, 
   "features":[
    {"type":"DISORDER","category":"Disorder_GlobProt","color":"#FFCC00","begin":"47","end":"62","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]},
    {"type":"DISORDER","category":"Disorder_GlobProt","begin":"167","end":"171","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]},
    {"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"202","end":"219","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]},
    {"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"245","end":"250","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]},
    {"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"316","end":"331","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]},
    {"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"363","end":"369","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]},
    {"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"376","end":"381","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]},
    {"type":"DISORDER","category":"Disorder_GlobProt", "begin":"615","end":"631","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]},
    {"type":"DISORDER","category":"Disorder_GlobProt","color":"#FFCC00","begin":"646","end":"658","evidences":[{"code":"GlobProt","id":"GlobProt","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]}
  ]
}

I am not sure how to organise the evidence so that it is visible in the pop-up. I was trying to get the resource name "GlobProt" and the link in the pop-up. I have tried various combinations. But the pop-up stays empty. There is just for instance:

DISORDER 646-658
Evidence

What is the right way to write the data file please?

Many thanks

xwatkins commented 4 years ago

Hi @AurelieMLB - the content of the tooltip should be in the tooltipContent field which is then rendered. This is usually handled by the data adapters (e.g. protvista-feature-adapter) which adds tooltipContent to the data points as HTML. Hope that helps!

AurelieMLB commented 4 years ago

Hello, thanks a lot for your answer! I had few tries at adding tooltipContent in my data points and reading the code of protvista-feature-adapter. But I do not manage to get it right I think... May I ask you an example please? Where would you put the tooltipContent in this data point for instance please?

{"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"202","end":"219","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]}

I tried:

{"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"202","end":"219","tooltipContent":"test","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]}

,

{"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"202","end":"219","evidences":[{"code":"","tooltipContent":"test","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]}

,

{"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"202","end":"219","tooltipContent":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]}

None of it was the good solution it seems. From your code, you seem to load a field called "description", so I tried that too. But no luck...

Thanks again ! Best

AurelieMLB commented 4 years ago

Hello,

Sorry I got pulled on another project and I am only coming back to this. Did you change anything? It seems that now my data point :

{"type":"DISORDER","category":"Disorder_GlobProt","description":"yoyo","color":"#FFCC00","begin":"47","end":"62","tooltipContent":"test","evidences":[{"code":"ECO:0000313","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]}

triggers the appearing of data in the tooltip. Please see image below. That is great ! Thanks !

image

One last question please? The link toward the url is entitle as "undefined" in the tooltip. May I ask you how I can defined what will be shown please?

Many thanks again for your help

xwatkins commented 4 years ago

Hi @AurelieMLB - the undefined is because id is missing from your source object.