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

Merge branch 'feature-shape' into 'development'

Feature shapes: Arrows (left) and Rectangle

See merge request !9
parents bd64d7bb 1a0993be
......@@ -7,9 +7,18 @@ var app = new Vue({
end: 1718084,
//tooltip: "name: {name}</br>description: {description}</br>start: {start}</br>end: {end}"
tooltip: ["name:Gene Name","type:Gene Type","description","start:Start","end:End","strand:Strand"],
colorMap: {"xRNA":"#CC0000"}
colorMap: {"xRNA":"#CC0000", "PFAM":"#8e44ad"}
},
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,
......@@ -106,6 +123,16 @@ var app = new Vue({
}
],
feature_data2: [
{ name: "PIWI",
description: "dsRNA guided hydrolysis of ssRNA",
start: 1706879,
end: 1707525,
strand: "+",
zIndex: "12",
type: "PFAM",
shape: "rect",
color_border: 'red'
},
{ name: "Gene 21",
description: "GMP synthase",
start: 1706479,
......@@ -158,15 +185,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,
......
......@@ -2,16 +2,33 @@ Vue.component("feature",{
template:
`
<svg :height="svgHeight" :width="svgWidth" :x="svgX" :y="svgY">
<polygon :points="arrow_coordinates" :style=featureStyle @click="clickEvent" @mouseover="hoverEvent" @mouseout="$emit('unhover')"/>
<polygon :points="points" :style=featureStyle @click="clickEvent" @mouseover="hoverEvent" @mouseout="$emit('unhover')"/>
</svg>
`,
props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId'],
props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId', 'shape','inverse'],
computed: {
featureStyle () {
return {
'fill': this.color,
'stroke': this.borderColor,
'stroke-width': 1
'strokeWidth': 1
}
},
points(){
switch(this.shape){
case "arrow":
if(this.inverse){
return this.arrow_coordinates_inverse
}
else{
return this.arrow_coordinates
}
break;
case "rect":
return this.rect_coordinates
break;
default:
return this.arrow_coordinates
}
},
arrow_coordinates () {
......@@ -26,6 +43,27 @@ Vue.component("feature",{
]
return points.join(' ')
},
arrow_coordinates_inverse () {
let points = [
this.svgWidth + ', ' + this.svgHeight * 0.25,
this.svgWidth + ', ' + this.svgHeight * 0.75,
this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.75,
this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.95,
0 + ', ' + this.svgHeight * 0.5,
this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.05,
this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.25
]
return points.join(' ')
},
rect_coordinates(){
let points = [
this.svgWidth + ', ' + this.svgHeight * 0.25,
'0, ' + this.svgHeight * 0.25,
'0, ' + this.svgHeight * 0.75,
this.svgWidth + ', ' + this.svgHeight * 0.75,
]
return points.join(' ')
}
},
methods: {
clickEvent (evt) {
......
......@@ -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" :shape="feature.shape? feature.shape : 'arrow'" :inverse="lane(feature)>0">
</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)
},
......@@ -126,6 +135,9 @@ Vue.component("genome-viewer",{
window.removeEventListener('resize', this.handleResize)
},
methods:{
shape(feat){
return "arrow"
},
handleResize(){
var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
this.y = svg_el.y
......
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