How to set the color of a feature based on a GFF3 attribute ?

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

How to set the color of a feature based on a GFF3 attribute ?

Sebastien Carrere-2
Dear Apollo community,

We would like to change the color of some features displayed in the
Annotation track when an attribute of the feature is set by the user.

To be more clear, our users will have to set a status on each annotation
with different values (deleted, validated, in_progress)

So we would like to display this status on directly on the glyph and my
first idea was to change the glyph color based on the value of this
attribute.

I know how to do this in JBrowse with a callback, but how can I do
within Apollo ?

Do I have to extend the WebApollo plugin ?

Thanks for any help !

Sebastien






This list is for the Apollo Annotation Editing Tool. Info at http://genomearchitect.org/
If you wish to unsubscribe from the Apollo List: 1. From the address with which you subscribed to the list, send a message to [hidden email] | 2. In the subject line of your email type: unsubscribe apollo | 3. Leave the message body blank.


sebastien_carrere.vcf (393 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: How to set the color of a feature based on a GFF3 attribute ?

nathandunn

I really like this idea.  You would have to extend the Apollo plugin to do it, though.

If you create a GitHub issue describing what you want in the ticket, I’d be happy to point you in the right direction.

Nathan


> On Nov 22, 2018, at 12:23 AM, Sebastien Carrere <[hidden email]> wrote:
>
> Dear Apollo community,
>
> We would like to change the color of some features displayed in the Annotation track when an attribute of the feature is set by the user.
>
> To be more clear, our users will have to set a status on each annotation with different values (deleted, validated, in_progress)
>
> So we would like to display this status on directly on the glyph and my first idea was to change the glyph color based on the value of this attribute.
>
> I know how to do this in JBrowse with a callback, but how can I do within Apollo ?
>
> Do I have to extend the WebApollo plugin ?
>
> Thanks for any help !
>
> Sebastien
>
>
> <sebastien_carrere.vcf>
>
>
> This list is for the Apollo Annotation Editing Tool. Info at http://genomearchitect.org/
> If you wish to unsubscribe from the Apollo List: 1. From the address with which you subscribed to the list, send a message to [hidden email] | 2. In the subject line of your email type: unsubscribe apollo | 3. Leave the message body blank.
>




This list is for the Apollo Annotation Editing Tool. Info at http://genomearchitect.org/
If you wish to unsubscribe from the Apollo List: 1. From the address with which you subscribed to the list, send a message to [hidden email] | 2. In the subject line of your email type: unsubscribe apollo | 3. Leave the message body blank.

Reply | Threaded
Open this post in threaded view
|

Re: How to set the color of a feature based on a GFF3 attribute ?

Colin
Potentially you could just modify the annotation track to have a color callback, the HTMLFeatures hooks->modify callback in particular.

It's a little trickier than CanvasFeatures callbacks but I think it is do-able.

See client/apollo/json/annot.json or directly edit web-app/jbrowse/plugins/WebApollo/json/annot.json while running

I tested this out with a bare bones config that changes div.style.backgroundColor to a random color and it seemed to work

 "modify": "function( track, feature, div ) { div.style.backgroundColor = ['green','blue','red','orange','purple'][Math.floor(Math.random()*5)];}"


-Colin

On Fri, Nov 23, 2018 at 12:54 AM Nathan Dunn <[hidden email]> wrote:

I really like this idea.  You would have to extend the Apollo plugin to do it, though.

If you create a GitHub issue describing what you want in the ticket, I’d be happy to point you in the right direction.

Nathan


> On Nov 22, 2018, at 12:23 AM, Sebastien Carrere <[hidden email]> wrote:
>
> Dear Apollo community,
>
> We would like to change the color of some features displayed in the Annotation track when an attribute of the feature is set by the user.
>
> To be more clear, our users will have to set a status on each annotation with different values (deleted, validated, in_progress)
>
> So we would like to display this status on directly on the glyph and my first idea was to change the glyph color based on the value of this attribute.
>
> I know how to do this in JBrowse with a callback, but how can I do within Apollo ?
>
> Do I have to extend the WebApollo plugin ?
>
> Thanks for any help !
>
> Sebastien
>
>
> <sebastien_carrere.vcf>
>
>
> This list is for the Apollo Annotation Editing Tool. Info at http://genomearchitect.org/
> If you wish to unsubscribe from the Apollo List: 1. From the address with which you subscribed to the list, send a message to [hidden email] | 2. In the subject line of your email type: unsubscribe apollo | 3. Leave the message body blank.
>




This list is for the Apollo Annotation Editing Tool. Info at http://genomearchitect.org/
If you wish to unsubscribe from the Apollo List: 1. From the address with which you subscribed to the list, send a message to [hidden email] | 2. In the subject line of your email type: unsubscribe apollo | 3. Leave the message body blank.





This list is for the Apollo Annotation Editing Tool. Info at http://genomearchitect.org/
If you wish to unsubscribe from the Apollo List: 1. From the address with which you subscribed to the list, send a message to [hidden email] | 2. In the subject line of your email type: unsubscribe apollo | 3. Leave the message body blank.

Reply | Threaded
Open this post in threaded view
|

Re: How to set the color of a feature based on a GFF3 attribute ?

nathandunn

Thanks Colin.  

For reference (I had to look it up):


git diff
diff --git a/client/apollo/json/annot.json b/client/apollo/json/annot.json
index 624636d6f..94114ac5e 100644
--- a/client/apollo/json/annot.json
+++ b/client/apollo/json/annot.json
@@ -9,6 +9,9 @@
     "tracks" : [
     {
          "autocomplete" : "none",
+      "hooks": {
+        "modify": "function( track, feature, div ) { div.style.height = (Math.random()*10+8)+'px';  div.style.backgroundColor = ['green','blue','red','orange','purple'][Math.round(Math.random()*5)];}"
+      },
          "style" : {
             "className" : "annot",
             "renderClassName" : "annot-render",


Unfortunately, status wasn’t being pulled through to the front.  I added this PR so that it was:


I used this hook to do what mimic what Colin had suggested above:

  "hooks": {
+        "modify": "function( track, feature, div ) { if(feature.afeature.status) { if(feature.afeature.status === 'test2' ){ div.style.backgroundColor = 'orange';} else { div.style.backgroundColor = 'green'; };}}"
+      },

However, there may be a better way to pull the status through features. 



Nathan


On Nov 26, 2018, at 1:24 PM, Colin <[hidden email]> wrote:

Potentially you could just modify the annotation track to have a color callback, the HTMLFeatures hooks->modify callback in particular.

It's a little trickier than CanvasFeatures callbacks but I think it is do-able.

See client/apollo/json/annot.json or directly edit web-app/jbrowse/plugins/WebApollo/json/annot.json while running

I tested this out with a bare bones config that changes div.style.backgroundColor to a random color and it seemed to work

 "modify": "function( track, feature, div ) { div.style.backgroundColor = ['green','blue','red','orange','purple'][Math.floor(Math.random()*5)];}"


-Colin

On Fri, Nov 23, 2018 at 12:54 AM Nathan Dunn <[hidden email]> wrote:

I really like this idea.  You would have to extend the Apollo plugin to do it, though.

If you create a GitHub issue describing what you want in the ticket, I’d be happy to point you in the right direction.

Nathan


> On Nov 22, 2018, at 12:23 AM, Sebastien Carrere <[hidden email]> wrote:
>
> Dear Apollo community,
>
> We would like to change the color of some features displayed in the Annotation track when an attribute of the feature is set by the user.
>
> To be more clear, our users will have to set a status on each annotation with different values (deleted, validated, in_progress)
>
> So we would like to display this status on directly on the glyph and my first idea was to change the glyph color based on the value of this attribute.
>
> I know how to do this in JBrowse with a callback, but how can I do within Apollo ?
>
> Do I have to extend the WebApollo plugin ?
>
> Thanks for any help !
>
> Sebastien
>
>
> <sebastien_carrere.vcf>
>
>
> This list is for the Apollo Annotation Editing Tool. Info at http://genomearchitect.org/
> If you wish to unsubscribe from the Apollo List: 1. From the address with which you subscribed to the list, send a message to [hidden email] | 2. In the subject line of your email type: unsubscribe apollo | 3. Leave the message body blank.
>




This list is for the Apollo Annotation Editing Tool. Info at http://genomearchitect.org/
If you wish to unsubscribe from the Apollo List: 1. From the address with which you subscribed to the list, send a message to [hidden email] | 2. In the subject line of your email type: unsubscribe apollo | 3. Leave the message body blank.




This list is for the Apollo Annotation Editing Tool. Info at http://genomearchitect.org/
If you wish to unsubscribe from the Apollo List: 1. From the address with which you subscribed to the list, send a message to [hidden email] | 2. In the subject line of your email type: unsubscribe apollo | 3. Leave the message body blank.






This list is for the Apollo Annotation Editing Tool. Info at http://genomearchitect.org/
If you wish to unsubscribe from the Apollo List: 1. From the address with which you subscribed to the list, send a message to [hidden email] | 2. In the subject line of your email type: unsubscribe apollo | 3. Leave the message body blank.