search

ebi-webcomponents / protvista-uniprot

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

track colors and shapes in config files #8

Closed AurelieMLB closed 4 years ago

AurelieMLB commented 4 years ago

Hello,

I am not quite sure if it is an issue, a pull or me missing the obvious. Apologies if the two latter. I am trying to add a new track of my own (prediction of disordered regions from sequence). It works using the config file but the data is appearing with black rectangles. I was under the impression that the protvista-uniprot config file could overwrite protvista-track config file so I tried to use color and shape parameters in the protvista-uniprot config file. But it does not change anything. Is it supposed to work this way please? (disclaimer : I am not a web developer at all) if yes I suppose this is an issue.

If it is not the way it works, may I ask a question please? (even though not the right place) Can I then give a modified config file to protvista-uniprot while importing the js please? Or how can I configure shapes and colors for the tracks I am adding please?

Would there be a place to ask such questions please without bothering you here?

Many thanks

xwatkins commented 4 years ago

Hi @AurelieMLB , and thanks for the feedback, this is the correct place to ask these questions!

Currently you can specify your own colour for each data point, adding either a color or feature.color attribute to each point (this is because sometimes you don't want all features to have the same colour in a track).

However, as the protvista-track component supports the definition of a global colour, we could add this to the config file easily if it's a requirement.

Let me know what you'd prefer.

AurelieMLB commented 4 years ago

Hello, Wow! thanks so much for your quick answer!

I think that it would be really convenient to be able to define color and shape globally in the config file for protvista-uniprot. Here is what I tried for instance :

{
      "name": "GlobProt",
      "label": "GlobProt prediction",
      "trackType": "protvista-track",
      "adapter": "protvista-feature-adapter",
      "url": "https://myProject/Disorder_GlobProt/",
      "tracks": [
        {
          "name": "disorder",
          "label": "Disorder",
          "filter": "DISORDER",
          "trackType": "protvista-track",
          "tooltip": "The positions of predicted disordered regions by GlobProt",
      "shape": "rectangle",
      "color": "#FF0066"
        }
      ]
}

Does it make sense?

I do see your point as well about having several colours (one per data point) on a single track. It totally make sense. Following you message above I tried to add a color attribute to my data file, this way:

{
  "accession":"P05067",
   "entryName":"A4_HUMAN",
   "sequence":"MLPGLALLLLAAWTARALEVPTDGNAGLLAEPQIAMFCGRLNMHMNVQNGKWDSDPSGTKTCIDTKEGILQYCQEVYPELQITNVVEANQPVTIQNWCKRGRKQCKTHPHFVIPYRCLVGEFVSDALLVPDKCKFLHQERMDVCETHLHWHTVAKETCSEKSTNLHDYGMLLPCGIDKFRGVEFVCCPLAEESDNVDSADAEEDDSDVWWGGADTDYADGSEDKVVEVAEEEEVAEVEEEEADDDEDDEDGDEVEEEAEEPYEEATERTTSIATTTTTTTESVEEVVREVCSEQAETGPCRAMISRWYFDVTEGKCAPFFYGGCGGNRNNFDTEEYCMAVCGSAMSQSLLKTTQEPLARDPVKLPTTAASTPDAVDKYLETPGDENEHAHFQKAKERLEAKHRERMSQVMREWEEAERQAKNLPKADKKAVIQHFQEKVESLEQEAANERQQLVETHMARVEAMLNDRRRLALENYITALQAVPPRPRHVFNMLKKYVRAEQKDRQHTLKHFEHVRMVDPKKAAQIRSQVMTHLRVIYERMNQSLSLLYNVPAVAEEIQDEVDELLQKEQNYSDDVLANMISEPRISYGNDALMPSLTETKTTVELLPVNGEFSLDDLQPWHSFGADSVPANTENEVEPVDARPAADRGLTTRPGSGLTNIKTEEISEVKMDAEFRHDSGYEVHHQKLVFFAEDVGSNKGAIIGLMVGGVVIATVIVITLVMLKKKQYTSIHHGVVEVDAAVTPEERHLSKMQQNGYENPTYKFFEQMQN",
   "sequenceChecksum":"A12EE761403740F5",
   "taxid":9606, 
   "features":[
    {"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"47","end":"62","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]},
    {"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","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","color":"#FF0066", "begin":"615","end":"631","evidences":[{"code":"","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]},
    {"type":"DISORDER","category":"Disorder_GlobProt","color":"#FF0066","begin":"646","end":"658","evidences":[{"code":"GlobProt","id":"GlobProt","source":{"name":"GlobProt","url":"http://globplot.embl.de/"}}]}
  ]
}

But I think I am missing something because it does not seem to work. Is this what you meant please?

I would have another question regarding the evidence data and the pop up that appear when a data point is clicked. Does it make sense that I open another issue please?

Many thanks again!! Aurelie

xwatkins commented 4 years ago

Hi again, the latest release (2.0.15) has the changes which should allow you to specify the color in the config file as you have specified above. What you specified in your second example (feature based) should have worked so I will have a look at what's happening. Let me know if the changes work for you and I will close the issue.

AurelieMLB commented 4 years ago

Hello,

Thanks so much ! Apologies for the delay of answer!

Yes it does work. All the disordered track is now red. Thanks!

For info, I tried to change some colours in my data file (and omit one) (to play a bit with it), it does not change anything unfortunately. Here is my file now in case, it helps:

{
  "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/"}}]}
  ]
}

Just a heads up, I also have a question regarding the evidence pop-up. I will open another issue.

Thanks again for your help on this.

Best

xwatkins commented 4 years ago

Thanks for the feedback - I've tried this locally but it seems to work fine, do you have a repo I could check?

AurelieMLB commented 4 years ago

Hello, For some reasons, the colors of the data points started to work last Friday for me... Not sure why. Maybe a problem with my cache (?, sorry if the case) I tested again all tonight and it is all good now. We can now choose from 3 levels of colors for a single point: collapsed tracks, extended tracks and data points. Thanks again !