Commit 208db83c authored by Raphael Müller's avatar Raphael Müller
Browse files

colorMap

parent 27fa4069
......@@ -95,7 +95,6 @@ var app = new Vue({
end: 1716321,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 11",
......@@ -103,9 +102,7 @@ var app = new Vue({
start: 1717235,
end: 1718084,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
type: "rRNA"
}
]
}
......
......@@ -15,7 +15,7 @@ Vue.component("genome-viewer",{
<!-- -->
<lane v-for="lane in lanes" :key="lane.id" :x="to_w(0)" :y="to_h(lane)" :height="2*one_height" :width="to_w(100)">
</lane>
<feature v-for="(feature, index) in featureData" :key="feature.name" :feature-id="feature.name" :svg-width="genomeToPixel(feature.end)-genomeToPixel(feature.start)" :svg-height="one_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature.strand))+ one_height/2" color="grey" border-color="red" @click="featureClick">
<feature v-for="(feature, index) in featureData" :key="feature.name" :feature-id="feature.name" :svg-width="genomeToPixel(feature.end)-genomeToPixel(feature.start)" :svg-height="one_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature.strand))+ one_height/2" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick">
</feature>
<!-- -->
</svg>
......@@ -43,6 +43,24 @@ Vue.component("genome-viewer",{
}
}
},
defaultColor: {
default: "#000000"
},
defaultBorderColor: {
default: "#000000"
},
colorMap: {
default: function(){
return {
'region':'#bdbdbd', // greyLighten
'gene':'#757575', // greyDarken
'cds': '#000000', // black
'rRNA': '#795548', // brown
'tRNA': '#4caf50', // green
'ncRNA': '#ff9800' // orange
}
}
},
},
computed:{
stops(){
......@@ -96,6 +114,21 @@ Vue.component("genome-viewer",{
},
methods:{
getColor(feature){
if(feature.hasOwnProperty("color")){
return feature.color
}else{
if(feature.hasOwnProperty("type")){
if(this.colorMap.hasOwnProperty(feature.type)){
return this.colorMap[feature.type]
}else{
return this.defaultColor
}
}else {
return this.defaultColor
}
}
},
lane(str){
return (str=="+")? 1 : -1
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment