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

added property lanes

parent cae9d1d6
......@@ -24,6 +24,9 @@
<div style="height:150px">
<genome-viewer :genome-stats="genome_stats" :color-map="genome_stats.colorMap" :feature-data="feature_data2"></genome-viewer>
</div>
<div style="height:150px">
<genome-viewer :genome-stats="genome_stats" :lanes="[-3,-2,-1,1,2,3]" :color-map="{'xRNA':'#CC0000'}":feature-data="feature_data3"></genome-viewer>
</div>
</div>
<script src="js/axis.js"></script>
<script src="js/feature.js"></script>
......
......@@ -200,6 +200,113 @@ var app = new Vue({
strand: '-',
type: "rRNA"
}
],
feature_data3: [
{ name: "Gene 21",
description: "GMP synthase",
start: 1706479,
end: 1708024,
strand: "+",
lane: 1,
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 22",
description: "glyoxalase",
start: 1708314,
end: 1708671,
lane: 2,
strand: "+",
type: "xRNA",
},
{ name: "Gene 23",
description: "ABC transporter ATP-binding protein LlsG",
start: 1709429,
end: 1710317,
lane: 3,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 24",
description: "ABC transporter permease protein LlsH",
start: 1710316,
end: 1711066,
lane: 1,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 25",
description: "LlsX",
start: 1711106,
end: 1711424,
strand: '+',
type: "gene",
lane: 2,
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 26",
description: "SagB family dehydrogenase LlsB",
start: 1711420,
end: 1712296,
lane: 3,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 27",
description: "LlsY",
start: 1712303,
end: 1713221,
strand: '-',
type: "gene",
color: '#454aff',
lane: 1,
color_border: '#000000'
},
{ name: "Gene 28",
description: "streptolysin-associated protein LlsD",
start: 1713213,
end: 1714527,
strand: '+',
type: "gene",
lane: 2,
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 29",
description: "hypothetical protein",
start: 1715351,
end: 1716125,
strand: '+',
type: "gene",
lane: 3,
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 210",
description: "glyoxalase family protein, N-terminal part",
start: 1716189,
end: 1716321,
lane: 1,
strand: '+',
type: "gene",
color_border: '#000000'
},
{ name: "Gene 211",
description: "hypothetical protein",
start: 1717235,
end: 1718084,
lane: 1,
strand: '-',
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)" :color="defaultLaneColor">
</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="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="currentFeature = undefined">
<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))+ one_height/2" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="currentFeature = undefined">
</feature>
<!-- -->
</svg>
......@@ -24,6 +24,11 @@ Vue.component("genome-viewer",{
</tool-tip>
</div>`,
props: {
lanes: {
default: function(){
return [-1, 1]
}
},
genomeStats: {
validator (value) {
for (let property of ['id', 'start', 'end']) {
......@@ -149,8 +154,11 @@ Vue.component("genome-viewer",{
}
}
},
lane(str){
return (str=="+")? -1 : +1
lane(feat){
l = feat.lane ? feat.lane : 1
l = l* ((feat.strand=="+")? -1 : +1)
return l
//return (str=="+")? -1 : +1
},
to_h(param){
//param is a value between -n and +n, where n is the number of lanes divided by 2
......@@ -161,7 +169,8 @@ Vue.component("genome-viewer",{
if(param < 0){
return zero + 2 * this.one_height * (param)
}else if(param > 0){
return zero + this.one_height * (param)
return zero + this.one_height + (param-1)*this.one_height*2
//return zero + this.one_height * (param)
}
return zero
},
......@@ -202,7 +211,6 @@ Vue.component("genome-viewer",{
},
data: function(){
return {
lanes: [-1, 1],
width: 0,
height: 0,
y: 0,
......
......@@ -3,7 +3,7 @@ Vue.component("tool-tip",{
`
<div style="transform:translate(-50%,0%);" :style="tooltipStyle">
<p v-for="property in tip" :key='property.id'>
<b>{{property}}:</b> {{feature[property]}}
<b>{{property}}:</b> {{feature[property]}}
</p>
<div :style="smallArrorStyle">
</div>
......@@ -63,8 +63,8 @@ Vue.component("tool-tip",{
color: "black",
backgroundColor: "white",
border: "1px solid black",
textFont: "1vw",
padding: "10px"
font: "0.75rem roboto",
padding: "1rem"
}
},
smallArrorStyle(){
......
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