[Gmod-ajax] Feature colors customization

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

[Gmod-ajax] Feature colors customization

Wells, Isabelle
Hi Everyone,
In JBrowse FAQ I read how to customize feature colors with a function (http://gmod.org/wiki/JBrowse_FAQ#How_do_I_customize_feature_colors_.28with_CanvasFeatures.29). However when trying it in my own instance of Jbrowse, it doesn't work... Here's the code and the screen shot of the result:

"style" : {
            "className" : "feature",
            "color" : "function(feature) {return feature.get('subtype')=='GEexon' ? 'red':'blue'}",
            "label" : "function(feature) {return feature.get('subtype')=='GEexon' ? 'red':'blue'}"
         },

As you can see in the screenshot, the color remains blue, however the label is correctly assigned to blue or red. 

Inline image 1

As a note, I've also tried to color the features according to their strand as described in another post (http://gmod.827538.n3.nabble.com/Gmod-ajax-Add-color-to-gff-file-td4051002.html#a4051108) and this worked correctly. 
Does anyone know what the problem is? Thanks in advance!

Isabelle


------------------------------------------------------------------------------
Attend Shape: An AT&T Tech Expo July 15-16. Meet us at AT&T Park in San
Francisco, CA to explore cutting-edge tech and listen to tech luminaries
present their vision of the future. This family event has something for
everyone, including kids. Get more information and register today.
http://sdm.link/attshape
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: Feature colors customization

Colin
Two things I'd double check -

a) that this is indeed a CanvasFeatures type track. Should say "type": "CanvasFeatures" or similar in the trackList.json
b) that the cache is cleared on the browser (sometimes older things in cache are used, and it seems especially so if the browser detects problems with the new content :))

Hope that helps

-Colin

On Mon, Jun 27, 2016 at 9:36 AM, Wells, Isabelle <[hidden email]> wrote:
Hi Everyone,
In JBrowse FAQ I read how to customize feature colors with a function (http://gmod.org/wiki/JBrowse_FAQ#How_do_I_customize_feature_colors_.28with_CanvasFeatures.29). However when trying it in my own instance of Jbrowse, it doesn't work... Here's the code and the screen shot of the result:

"style" : {
            "className" : "feature",
            "color" : "function(feature) {return feature.get('subtype')=='GEexon' ? 'red':'blue'}",
            "label" : "function(feature) {return feature.get('subtype')=='GEexon' ? 'red':'blue'}"
         },

As you can see in the screenshot, the color remains blue, however the label is correctly assigned to blue or red. 

Inline image 1

As a note, I've also tried to color the features according to their strand as described in another post (http://gmod.827538.n3.nabble.com/Gmod-ajax-Add-color-to-gff-file-td4051002.html#a4051108) and this worked correctly. 
Does anyone know what the problem is? Thanks in advance!

Isabelle


------------------------------------------------------------------------------
Attend Shape: An AT&T Tech Expo July 15-16. Meet us at AT&T Park in San
Francisco, CA to explore cutting-edge tech and listen to tech luminaries
present their vision of the future. This family event has something for
everyone, including kids. Get more information and register today.
http://sdm.link/attshape
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax



------------------------------------------------------------------------------
Attend Shape: An AT&T Tech Expo July 15-16. Meet us at AT&T Park in San
Francisco, CA to explore cutting-edge tech and listen to tech luminaries
present their vision of the future. This family event has something for
everyone, including kids. Get more information and register today.
http://sdm.link/attshape
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: Feature colors customization

Wells, Isabelle
Hi Colin,

Yes, this is a CanvasFeatures track and I make sure the browser is refreshed. I actually had problems with that but use IE with InPrivate browsing now.

One more thing, "subtype" is an attribute I defined in the gff3 file I loaded for this track
eg
chr1    GenomeAnalysisPipeline  transcript      137283  137683  .       -       .       ID=92960;subtype=GEexon
chr1    GenomeAnalysisPipeline  exon    137283  137683  .       -       .       Parent=92960
chr1    GenomeAnalysisPipeline  transcript      137683  663245  .       -       .       ID=339579;subtype=GEjunct
chr1    GenomeAnalysisPipeline  exon    137683  663245  .       -       .       Parent=339579

Here's a screen shot of the detailed view for one such element:
Inline image 1

After trying  different things in the javascript code, it seems to me that  feature.get('subtype')=='GEexon' is never true for the color line. 
However as I mentioned before coloring according to strand is working (ie feature.get('strand')==-1) but then this is a number and not a string.

Thanks for your help!
Isabelle

On Tue, Jun 28, 2016 at 12:16 AM, Colin <[hidden email]> wrote:
Two things I'd double check -

a) that this is indeed a CanvasFeatures type track. Should say "type": "CanvasFeatures" or similar in the trackList.json
b) that the cache is cleared on the browser (sometimes older things in cache are used, and it seems especially so if the browser detects problems with the new content :))

Hope that helps

-Colin

On Mon, Jun 27, 2016 at 9:36 AM, Wells, Isabelle <[hidden email]> wrote:
Hi Everyone,
In JBrowse FAQ I read how to customize feature colors with a function (http://gmod.org/wiki/JBrowse_FAQ#How_do_I_customize_feature_colors_.28with_CanvasFeatures.29). However when trying it in my own instance of Jbrowse, it doesn't work... Here's the code and the screen shot of the result:

"style" : {
            "className" : "feature",
            "color" : "function(feature) {return feature.get('subtype')=='GEexon' ? 'red':'blue'}",
            "label" : "function(feature) {return feature.get('subtype')=='GEexon' ? 'red':'blue'}"
         },

As you can see in the screenshot, the color remains blue, however the label is correctly assigned to blue or red. 

Inline image 1

As a note, I've also tried to color the features according to their strand as described in another post (http://gmod.827538.n3.nabble.com/Gmod-ajax-Add-color-to-gff-file-td4051002.html#a4051108) and this worked correctly. 
Does anyone know what the problem is? Thanks in advance!

Isabelle


------------------------------------------------------------------------------
Attend Shape: An AT&T Tech Expo July 15-16. Meet us at AT&T Park in San
Francisco, CA to explore cutting-edge tech and listen to tech luminaries
present their vision of the future. This family event has something for
everyone, including kids. Get more information and register today.
http://sdm.link/attshape
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax





--

Isabelle Wells, Ph. D.

Bioinformatics Scientist

                             Roche Pharmaceutical Research and Early Development (pRED)

                            Pharmaceutical Sciences, Translational Technologies and Bioinformatics

                            Roche Innovation Center Basel

                Building 93/3.34

F. Hoffmann-La Roche Ltd

CH-4070 Basel, Switzerland 

Phone: +41-61-688-1870 
E-mail: [hidden email]  

"Want to know more about TTB? Click here!"


Confidentiality Note: This message is intended only for the use of the named recipient(s) and may contain confidential and/or privileged information. If you are not the intended recipient, please contact the sender and delete this message. Any unauthorized use of the information contained in this message is prohibited.

 


------------------------------------------------------------------------------
Attend Shape: An AT&T Tech Expo July 15-16. Meet us at AT&T Park in San
Francisco, CA to explore cutting-edge tech and listen to tech luminaries
present their vision of the future. This family event has something for
everyone, including kids. Get more information and register today.
http://sdm.link/attshape
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: Feature colors customization

Colin
Apparently, in this case, the style->color callback is being passed the exon subfeatures instead of the "transcript", so that is why feature.get('subtype') isn't working. You can use feature.parent().get('subtype') to get the parent data and from my this seems to fix the red/blue coloring in my test.

The behavior seen here could be seen as a little bit strange (receiving the exons instead of the parent feature) but I am not sure what the ramifications of changing it would be

Hope that helps again though!

-Colin

On Tue, Jun 28, 2016 at 2:29 AM, Wells, Isabelle <[hidden email]> wrote:
Hi Colin,

Yes, this is a CanvasFeatures track and I make sure the browser is refreshed. I actually had problems with that but use IE with InPrivate browsing now.

One more thing, "subtype" is an attribute I defined in the gff3 file I loaded for this track
eg
chr1    GenomeAnalysisPipeline  transcript      137283  137683  .       -       .       ID=92960;subtype=GEexon
chr1    GenomeAnalysisPipeline  exon    137283  137683  .       -       .       Parent=92960
chr1    GenomeAnalysisPipeline  transcript      137683  663245  .       -       .       ID=339579;subtype=GEjunct
chr1    GenomeAnalysisPipeline  exon    137683  663245  .       -       .       Parent=339579

Here's a screen shot of the detailed view for one such element:
Inline image 1

After trying  different things in the javascript code, it seems to me that  feature.get('subtype')=='GEexon' is never true for the color line. 
However as I mentioned before coloring according to strand is working (ie feature.get('strand')==-1) but then this is a number and not a string.

Thanks for your help!
Isabelle

On Tue, Jun 28, 2016 at 12:16 AM, Colin <[hidden email]> wrote:
Two things I'd double check -

a) that this is indeed a CanvasFeatures type track. Should say "type": "CanvasFeatures" or similar in the trackList.json
b) that the cache is cleared on the browser (sometimes older things in cache are used, and it seems especially so if the browser detects problems with the new content :))

Hope that helps

-Colin

On Mon, Jun 27, 2016 at 9:36 AM, Wells, Isabelle <[hidden email]> wrote:
Hi Everyone,
In JBrowse FAQ I read how to customize feature colors with a function (http://gmod.org/wiki/JBrowse_FAQ#How_do_I_customize_feature_colors_.28with_CanvasFeatures.29). However when trying it in my own instance of Jbrowse, it doesn't work... Here's the code and the screen shot of the result:

"style" : {
            "className" : "feature",
            "color" : "function(feature) {return feature.get('subtype')=='GEexon' ? 'red':'blue'}",
            "label" : "function(feature) {return feature.get('subtype')=='GEexon' ? 'red':'blue'}"
         },

As you can see in the screenshot, the color remains blue, however the label is correctly assigned to blue or red. 

Inline image 1

As a note, I've also tried to color the features according to their strand as described in another post (http://gmod.827538.n3.nabble.com/Gmod-ajax-Add-color-to-gff-file-td4051002.html#a4051108) and this worked correctly. 
Does anyone know what the problem is? Thanks in advance!

Isabelle


------------------------------------------------------------------------------
Attend Shape: An AT&T Tech Expo July 15-16. Meet us at AT&T Park in San
Francisco, CA to explore cutting-edge tech and listen to tech luminaries
present their vision of the future. This family event has something for
everyone, including kids. Get more information and register today.
http://sdm.link/attshape
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax





--

Isabelle Wells, Ph. D.

Bioinformatics Scientist

                             Roche Pharmaceutical Research and Early Development (pRED)

                            Pharmaceutical Sciences, Translational Technologies and Bioinformatics

                            Roche Innovation Center Basel

                Building 93/3.34

F. Hoffmann-La Roche Ltd

CH-4070 Basel, Switzerland 

Phone: <a href="tel:%2B41-61-688-1870" value="+41616881870" target="_blank">+41-61-688-1870 
E-mail: [hidden email]  

"Want to know more about TTB? Click here!"


Confidentiality Note: This message is intended only for the use of the named recipient(s) and may contain confidential and/or privileged information. If you are not the intended recipient, please contact the sender and delete this message. Any unauthorized use of the information contained in this message is prohibited.

 



------------------------------------------------------------------------------
Attend Shape: An AT&T Tech Expo July 15-16. Meet us at AT&T Park in San
Francisco, CA to explore cutting-edge tech and listen to tech luminaries
present their vision of the future. This family event has something for
everyone, including kids. Get more information and register today.
http://sdm.link/attshape
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: Feature colors customization

Wells, Isabelle
Hi Colin,
That did it!
Thank you very much for your support!
Best regards,
Isabelle

On Tue, Jun 28, 2016 at 7:26 PM, Colin <[hidden email]> wrote:
Apparently, in this case, the style->color callback is being passed the exon subfeatures instead of the "transcript", so that is why feature.get('subtype') isn't working. You can use feature.parent().get('subtype') to get the parent data and from my this seems to fix the red/blue coloring in my test.

The behavior seen here could be seen as a little bit strange (receiving the exons instead of the parent feature) but I am not sure what the ramifications of changing it would be

Hope that helps again though!

-Colin

On Tue, Jun 28, 2016 at 2:29 AM, Wells, Isabelle <[hidden email]> wrote:
Hi Colin,

Yes, this is a CanvasFeatures track and I make sure the browser is refreshed. I actually had problems with that but use IE with InPrivate browsing now.

One more thing, "subtype" is an attribute I defined in the gff3 file I loaded for this track
eg
chr1    GenomeAnalysisPipeline  transcript      137283  137683  .       -       .       ID=92960;subtype=GEexon
chr1    GenomeAnalysisPipeline  exon    137283  137683  .       -       .       Parent=92960
chr1    GenomeAnalysisPipeline  transcript      137683  663245  .       -       .       ID=339579;subtype=GEjunct
chr1    GenomeAnalysisPipeline  exon    137683  663245  .       -       .       Parent=339579

Here's a screen shot of the detailed view for one such element:
Inline image 1

After trying  different things in the javascript code, it seems to me that  feature.get('subtype')=='GEexon' is never true for the color line. 
However as I mentioned before coloring according to strand is working (ie feature.get('strand')==-1) but then this is a number and not a string.

Thanks for your help!
Isabelle

On Tue, Jun 28, 2016 at 12:16 AM, Colin <[hidden email]> wrote:
Two things I'd double check -

a) that this is indeed a CanvasFeatures type track. Should say "type": "CanvasFeatures" or similar in the trackList.json
b) that the cache is cleared on the browser (sometimes older things in cache are used, and it seems especially so if the browser detects problems with the new content :))

Hope that helps

-Colin

On Mon, Jun 27, 2016 at 9:36 AM, Wells, Isabelle <[hidden email]> wrote:
Hi Everyone,
In JBrowse FAQ I read how to customize feature colors with a function (http://gmod.org/wiki/JBrowse_FAQ#How_do_I_customize_feature_colors_.28with_CanvasFeatures.29). However when trying it in my own instance of Jbrowse, it doesn't work... Here's the code and the screen shot of the result:

"style" : {
            "className" : "feature",
            "color" : "function(feature) {return feature.get('subtype')=='GEexon' ? 'red':'blue'}",
            "label" : "function(feature) {return feature.get('subtype')=='GEexon' ? 'red':'blue'}"
         },

As you can see in the screenshot, the color remains blue, however the label is correctly assigned to blue or red. 

Inline image 1

As a note, I've also tried to color the features according to their strand as described in another post (http://gmod.827538.n3.nabble.com/Gmod-ajax-Add-color-to-gff-file-td4051002.html#a4051108) and this worked correctly. 
Does anyone know what the problem is? Thanks in advance!

Isabelle


------------------------------------------------------------------------------
Attend Shape: An AT&T Tech Expo July 15-16. Meet us at AT&T Park in San
Francisco, CA to explore cutting-edge tech and listen to tech luminaries
present their vision of the future. This family event has something for
everyone, including kids. Get more information and register today.
http://sdm.link/attshape
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax





--

Isabelle Wells, Ph. D.

Bioinformatics Scientist

                             Roche Pharmaceutical Research and Early Development (pRED)

                            Pharmaceutical Sciences, Translational Technologies and Bioinformatics

                            Roche Innovation Center Basel

                Building 93/3.34

F. Hoffmann-La Roche Ltd

CH-4070 Basel, Switzerland 

Phone: <a href="tel:%2B41-61-688-1870" value="+41616881870" target="_blank">+41-61-688-1870 
E-mail: [hidden email]  

"Want to know more about TTB? Click here!"


Confidentiality Note: This message is intended only for the use of the named recipient(s) and may contain confidential and/or privileged information. If you are not the intended recipient, please contact the sender and delete this message. Any unauthorized use of the information contained in this message is prohibited.

 





--

Isabelle Wells, Ph. D.

Bioinformatics Scientist

                             Roche Pharmaceutical Research and Early Development (pRED)

                            Pharmaceutical Sciences, Translational Technologies and Bioinformatics

                            Roche Innovation Center Basel

                Building 93/3.34

F. Hoffmann-La Roche Ltd

CH-4070 Basel, Switzerland 

Phone: +41-61-688-1870 
E-mail: [hidden email]  

"Want to know more about TTB? Click here!"


Confidentiality Note: This message is intended only for the use of the named recipient(s) and may contain confidential and/or privileged information. If you are not the intended recipient, please contact the sender and delete this message. Any unauthorized use of the information contained in this message is prohibited.

 


------------------------------------------------------------------------------
Attend Shape: An AT&T Tech Expo July 15-16. Meet us at AT&T Park in San
Francisco, CA to explore cutting-edge tech and listen to tech luminaries
present their vision of the future. This family event has something for
everyone, including kids. Get more information and register today.
http://sdm.link/attshape
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax