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

features are now visible

parent 777353fe
......@@ -30,7 +30,7 @@ Vue.component( "axis", {
width: Number,
height: Number,
xOffset: Number,
vOffset: Number
vOffset: Number,
},
methods: {
genomeToPixel( pos ) {
......@@ -61,41 +61,10 @@ Vue.component( "axis", {
ticks[i] = {}
ticks[i].genomePos = firstTickPos + i*this.tickSize
ticks[i].panelPos = this.genomeToPixel(ticks[i].genomePos)
console.log(ticks[i])
}
return ticks
},
},
mounted(){
// const firstTickPos = Math.pow( 10, Math.ceil( Math.log10( this.start ) ) )
// let ticks = []
// let genomePos = firstTickPos
// let panelPos = this.genomeToPixel( genomePos )
// while( panelPos <= this.width ) {
// console.log("before")
// console.log(tickSize);
// console.log(genomePos);
// console.log(panelPos);
// console.log(this.width);
// if( this.start > this.stop && genomePos > this.genomeSize ) {
// genomePos = tickSize
// }
// let tick = {
// genomePos: genomePos,
// panelPos: panelPos
// }
// this.ticks.push( tick )
// genomePos += tickSize
// panelPos = this.genomeToPixel( genomePos )
// console.log("after")
// console.log(tickSize);
// console.log(genomePos);
// console.log(panelPos);
// console.log(this.width);
// break
// }
},
data: function(){
return {
//noTicks: 10
......
......@@ -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="(1+index)*20" :svg-height="(1+index)*10" :svg-x="10+(index%2 * 400)" :svg-y="index*100+10" color="grey" border-color="red" @click="featureClick">
<feature v-for="(feature, index) in featureData" :key="feature.name" :feature-id="feature.name" :svg-width="(1+index)*20" :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>
<!-- -->
</svg>
......@@ -60,7 +60,7 @@ Vue.component("genome-viewer",{
genome_size(){},
length(){
if(this.genomeStats.start < this.genomeStats.end){
return this.genomeStats.end - this.genomeStats.start
return this.axisStop - this.axisStart
}else{
// TODO: if genome is circular
}
......@@ -68,6 +68,9 @@ Vue.component("genome-viewer",{
one_height(){
return this.height/(1 + 2 * this.lanes.length)
},
tickSize(){
return Math.pow(10,Math.floor(Math.log10(this.length))-1)
},
},
mounted() {
var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
......@@ -87,6 +90,9 @@ Vue.component("genome-viewer",{
},
methods:{
lane(str){
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
//if param is 0 => axis
......@@ -103,7 +109,10 @@ Vue.component("genome-viewer",{
to_w(param){
//param is a value between 0 and 100, where 100 is the full length of the svg
return (this.width*param)/100
},
},
genomeToPixel(pos){
return (this.width*(pos - (this.axisStart - this.tickSize)))/this.length
},
featureClick (featureId) {
console.log(featureId)
}
......
Supports Markdown
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