view methylation data

[demis001]

I have a bed file similar to this one, the last column is a methylation ratio. I added the *.bed.gz file to the webroot and added the following conf. But, it didn't work, I have installed the other plugin including this one. Any idea?

{ "maxFeatureScreenDensity": 6, "storeClass" : "JBrowse/Store/SeqFeature/BEDTabix", "urlTemplate" : "../../rawData/data.bed.gz", "label" : "brain_GCmap_vPlotter", "type" : "GWASViewer/View/Track/VariantPlotter" }

chr1 147971108 147971158 id-1 0.590000 chr1 147971146 147971196 id-2 0.120000 chr1 147971184 147971234 id-3 0.110000 chr1 147971222 147971272 id-4 0.760000

[demis001]

I am able to plot the data BUT, I have the following issues.

1. I want to make the tooltip value to be the score instead of names. How to do this?
2. I wan to make the y-scale between 0 and 1. I changed the "heightScaler" to 100 that looks okay. BUT, I want show the y-scale between 0-1 and highlight 0.5 value. Any idea how to do that.
3. I see you color the circles based on the score value and showed the legend, how to do this?

Right now this is what I have.

{ "maxFeatureScreenDensity": 6, "storeClass" : "JBrowse/Store/SeqFeature/BEDTabix", "urlTemplate" : "../../rawData/brain_merged_sorted_dedup_CGcontext_updated_new.bed.gz", "label" : "brain_GCmap_vPlotter", "type" : "GWASViewer/View/Track/VariantPlotter", "useMyVariantInfo": false, "heightScaler": 100, "useEnsemblR2": false, "width": 10, "style": {"width": 5,"borderColor": 'black'} }

[cmdcolin]

good questions. there is some stuff in here that is tuned a lot to GWAS data so it is kind of awkward on other data types a little bit, but should be ok.

for your questions

1. style.label = function(feature) { return feature.get('score') }
2. the default score function is -Math.log so you need scoreFun= function(feature) { return feature.get('score') }. after setting this you might just have heightScalar to be 1
3. make your own color function with style.color(feature) { return 'blue' /* or something related to feature.get('score') }

So combined

{ "maxFeatureScreenDensity": 6, "storeClass" : "JBrowse/Store/SeqFeature/BEDTabix", "urlTemplate" : "../../rawData/brain_merged_sorted_dedup_CGcontext_updated_new.bed.gz", "label" : "brain_GCmap_vPlotter", "type" : "GWASViewer/View/Track/VariantPlotter", "useMyVariantInfo": false, "useEnsemblR2": false, "width": 10, "style": { "width": 5, "borderColor": 'black', "color": "blue", // or a feature callback "label": "function(feature) { return feature.get('score') }", }, "scoreFun": "function(feature) { return feature.get('score') }", "heightScalar": 1 }

also for 3, the legend is something custom that I implemented kind of custom, I might be able to advise if it is very helpful for you but it's not a simple configuration

[demis001]

@cmdcolin,

Thank!!, this is very close to what I am looking, BUT still, I am unable to show the y scale that range between 0 and 1. "heightScaler": 100 seems working, 1 is too compact -straight line. Is it possible to color the dots based on the score ranges? What I want is to highlight the methylation ration between 0.35-0.65 that aggregate around 0.5

{ "maxFeatureScreenDensity": 6, "storeClass" : "JBrowse/Store/SeqFeature/BEDTabix", "urlTemplate" : "../../rawData/brain_merged_sorted_dedup_CGcontext_updated_new.bed.gz", "label" : "brain_GCmap_vPlotter", "type" : "GWASViewer/View/Track/VariantPlotter", "useMyVariantInfo": false, "heightScaler": 100, "displayMode": "normal", "useEnsemblR2": false, "width": 10, "scoreFun": "function(feature) { return feature.get('score') }", "histograms": { "description": "feature density", "min": 0, "height": 1, "color": "goldenrod", "clip_marker_color": "red" },

         "style": {"width": 5,"borderColor": 'black', "label": "function(feature) { return feature.get('score') }"}
   }

[cmdcolin]

I found it out I think

You make heightScaler equal to maxHeight, so in this case, heightScalar = 210, maxHeight = 210

[cmdcolin]

Example config

{
      "maxFeatureScreenDensity": 6,
      "storeClass": "JBrowse/Store/SeqFeature/BEDTabix",
      "urlTemplate": "test.bed.gz",
      "label": "brain_GCmap_vPlotter",
      "type": "GWASViewer/View/Track/VariantPlotter",
      "useMyVariantInfo": false,
      "heightScaler": 210,
      "displayMode": "normal",
      "useEnsemblR2": false,
      "width": 10,
      "scoreFun": "function(feature) { return feature.get('score') }",
      "clearRect": true,
      "style": {
        "color": "function(feature) { var s = feature.get('score'); return s<0.65&&s>0.35 ? 'green':'red' }"
      }
    }

[cmdcolin]

Note the new clearRect option, it may be preferable. It is a general challenge to make glyph change on mouseover when we have overlapping features so clearRect will affect that....needs a bit of work to make it entirely perfect

[cmdcolin]

Oh ya, and pull the latest from github

[demis001]

I am not a javascirpt progammer. Would you please change the ternary operator to if else, if (s>=0.35 and s<=0.65): "color": "orange" elif(s>0.65): "color": "red" else: "color": "green"

2. How about y-axis range? Is it possible to show 0-1 range axis range?
3. How about drawing line across the x-axis? let say average or 0.5 line? May not possible

[demis001]

I have also other question:

How to disable track label? I want to export using screenshot plugin and organize the image and add the track label in incscape.

[cmdcolin]

Q1

{
      "maxFeatureScreenDensity": 6,
      "storeClass": "JBrowse/Store/SeqFeature/BEDTabix",
      "urlTemplate": "test.bed.gz",
      "label": "brain_GCmap_vPlotter",
      "type": "GWASViewer/View/Track/VariantPlotter",
      "useMyVariantInfo": false,
      "heightScaler": 210,
      "displayMode": "normal",
      "useEnsemblR2": false,
      "width": 10,
      "scoreFun": "function(feature) { return feature.get('score') }",
      "clearRect": true,
      "style": {
        "color": "function(feature) { var s = feature.get('score'); if(s<0.65 && s>0.35) return 'green'; else return 'red' }"
      }
    }

Q2. How about y-axis range? Is it possible to show 0-1 range axis range?

Should just be making heightScalar equal to maxHeight

Q3.

This is not possible yet but is a good idea

Q4 Disable track label

There is a HideTrackLabels plugin, you can activate it and it adds a button near the highlight button to hide track labels

[demis001]

Thanks! I really appreciate. it seems working now. I will try the plugin you have pointed out. I also decided to learn javascript.

[demis001]

Why jbrowse isn't responsive? When you resize the browser, the tracks will not shrink.

[cmdcolin]

Not exactly sure what you mean but JBrowse isn't really tailored for so called "responsive web design" , so it's not going to dynamically resize track heights or anything like that

[demis001]

This is mainly for export purpose, I saw the plugin handled that part. Thanks!

[demis001]

@cmdcolin

You helped me a year ago to display some data using VaraintPlotter. At that time I thought the data range was between 0 and 1 (min/max). Would you help me how to display between -1 and 1:

Here is what I want: (s >=0.65 || s<= -0.8)-> orange (s<=0.65 && s>=0.35) -> green (s>=0 && s < 0.35) -> blue (s< 0 && s> -0.2) - blue else: green

The question is, when I change "min": -1 it will not work, "min": 0 works. I know the logic to display the colors.

Would you please help?

` { "displayMode" : "normal", "heightScaler" : 200, "histograms" : { "clip_marker_color" : "red", "color" : "goldenrod", "description" : "feature density", "height" : 1, "min" : -1 }, "label" : "liver_GCmap_vPlotter", "maxFeatureScreenDensity" : 6, "maxHeight" : 210, "scoreFun" : "function(feature) { return feature.get('score') }", "storeClass" : "JBrowse/Store/SeqFeature/BEDTabix", "style" : { "color" : "function(feature) { var s = feature.get('score'); if(s<=0.65 && s>=0.35) return 'green'; else if(s>0.65) return 'orange'; else if(s<0) return 'red'; else return 'blue' }", "label" : "function(feature) { return feature.get('score') }", "width" : 10 }, "type" : "GWASViewer/View/Track/VariantPlotter", "urlTemplate" : "../../rawData/liver_merged_sorted_dedup_CGcontext_updated_new.bed.gz", "useEnsemblR2" : false, "useMyVariantInfo" : false, "width" : 10 },

`

@ demis001

[cmdcolin]

may want to rescale to between 0-1 using scoreFun

[demis001]

The score is between -1 and 1, the score between 0 to -1 represent minus strand and 0 and 1 represent positive strand. I am trying to display methylation ratio specific to both strand (-1 to 1)

[cmdcolin]

my previous comment was to change scoreFun to

"scoreFun" : "function(feature) { return (feature.get('score')+1)/2 }",

that would rescale it to 0-1 and be like the standard 0.0-1.0 type config mentioned in the readme