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

added z-index property to features

Closes #7
parent bd64d7bb
......@@ -10,6 +10,15 @@ var app = new Vue({
colorMap: {"xRNA":"#CC0000"}
},
feature_data: [
{ name: "Gene 1.5",
description: "GMP synthase",
start: 1707479,
end: 1708024,
strand: "+",
zIndex: "4",
type: "ncRNA",
color_border: 'red'
},
{ name: "Gene 1",
description: "GMP synthase",
start: 1706479,
......@@ -26,6 +35,14 @@ var app = new Vue({
strand: "+",
type: "xRNA"
},
{ name: "Gene 2.5",
description: "glyoxalase",
start: 1708414,
end: 1708571,
strand: "+",
zIndeX: "2",
type: "tRNA"
},
{ name: "Gene 3",
description: "ABC transporter ATP-binding protein LlsG",
start: 1709429,
......@@ -158,15 +175,31 @@ var app = new Vue({
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 27.3",
description: "LlsY",
start: 1712703,
end: 1712821,
zIndex: "10",
strand: '-',
type: "ncRNA",
},
{ name: "Gene 27",
description: "LlsY",
start: 1712303,
end: 1713221,
start: 1712503,
end: 1713021,
zIndex: "2",
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 27.6",
description: "LlsY",
start: 1712303,
end: 1713221,
strand: '-',
type: "gene",
},
{ name: "Gene 28",
description: "streptolysin-associated protein LlsD",
start: 1713213,
......
......@@ -11,7 +11,7 @@ Vue.component("feature",{
return {
'fill': this.color,
'stroke': this.borderColor,
'stroke-width': 1
'strokeWidth': 1
}
},
arrow_coordinates () {
......
......@@ -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))+ 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 sortedFeatures" :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>
......@@ -68,6 +68,15 @@ Vue.component("genome-viewer",{
},
},
computed:{
sortedFeatures(){
feats = this.featureData.map(a => ({...a}));
feats.sort((a,b) => {
let azi = (a.zIndex? a.zIndex : "1")
let bzi = (b.zIndex? b.zIndex : "1")
return azi.localeCompare(bzi,undefined,{"numeric": true})
})
return feats
},
stops(){
return this.featureData.map(f => f.end)
},
......
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