Skip to content

GitLab

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

added first version of axis

parent 9cc22857
Hide whitespace changes
Inline Side-by-side
genome-vuer/src/index.html
View file @ 777353fe
......@@ -15,7 +15,7 @@
<body>
<div id="app">
<genome-viewer :genome-stats="genome_stats" :feature-data="feature_data" width=1500 height=300></genome-viewer>
<genome-viewer :genome-stats="genome_stats" :feature-data="feature_data"></genome-viewer>
</div>
<script src="js/axis.js"></script>
<script src="js/feature.js"></script>
......
genome-vuer/src/js/axis.js
View file @ 777353fe
......@@ -10,17 +10,20 @@
Vue.component( "axis", {
template:
`
<svg :width="width" :height="height" :viewBox="xOffset +' '+ vOffset +' '+ width + xOffset +' '+ vOffset + height">
<svg :x="x" :y="y" :width="width" :height="height" ><!--:viewBox="xOffset +' '+ vOffset +' '+ width + xOffset +' '+ vOffset + height"><!-- -->
<line x1="0" :y1="2*vOffset" :x2="width" :y2="2*vOffset" style="stroke:rgb(0,0,0);stroke-width:1" />
<line x1="0" :y1="2*vOffset" x2="0" :y2="vOffset" />
<line :x1="width" :y1="2*vOffset" :x2="width" :y2="vOffset" />
<line x1="0" :y1="2*vOffset" x2="0" :y2="vOffset" stroke="black" />
<line :x1="width" :y1="2*vOffset" :x2="width" :y2="vOffset" stroke="black" />
<line v-for="tick in ticks" :x1="tick.panelPos" :y1="2*vOffset" :x2="tick.panelPos" :y2="vOffset" />
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" y="0" fill="black">{{ tick.genomePos }}</text>
<line v-for="tick in ticks" :x1="tick.panelPos" :y1="2*vOffset" :x2="tick.panelPos" :y2="vOffset+2" stroke="black"/>
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="vOffset" text-anchor="middle" fill="black">{{ tick.genomePos }}</text>
</svg>
<!-- -->
`,
props: {
x: Number,
y: Number,
start: Number,
stop: Number,
genomeSize: Number,
......@@ -31,34 +34,72 @@ Vue.component( "axis", {
},
methods: {
genomeToPixel( pos ) {
return pos/Math.abs(this.stop-this.start) * this.width
return (pos-(this.start-this.tickSize))/(this.length) * this.width
}
},
computed:{
power(){
return Math.floor(Math.log10(this.length))
},
length(){
return (this.stop - this.start)
},
genomeSectionSize(){
return (this.start > this.stop) ? (this.genomeSize-this.start + this.end) : Math.abs(this.stop-this.start) // genome section in bp
},
tickSize(){
return Math.pow(10, this.power-1)
//return Math.pow( 10, Math.round( Math.log10( this.genomeSectionSize / this.noTicks ) ) ) // axis tick size in log 10 bp
},
noTicks(){
return Math.ceil(this.length/this.tickSize)
},
ticks(){
const firstTickPos = Math.round(this.start/this.tickSize)*this.tickSize//Math.pow( 10, Math.floor( Math.log10( this.start ) ) )
let ticks = new Array(this.noTicks)
for(i=0; i<ticks.length; i+=1){
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 genomeSectionSize = (this.start > this.stop) ? (this.genomeSize-this.start + this.end) : Math.abs(this.stop-this.start) // genome section in bp
const tickSize = Math.pow( 10, Math.round( Math.log10( genomeSectionSize / this.noTicks ) ) ) // axis tick size in log 10 bp
const firstTickPos = Math.pow( 10, Math.ceil( Math.log10( this.start ) ) )
// 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 ) {
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 )
}
// 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,
ticks: []
//noTicks: 10
//ticks: []
}
}
} )
......
genome-vuer/src/js/genome_viewer.js
View file @ 777353fe
......@@ -8,13 +8,16 @@ Vue.component("genome-viewer",{
</div>
</div>
-->
<svg id="genome-vuer" ref="genomeVuer" :height="height" :width="width">
<axis :xOffset="to_w(0)" :vOffset="to_h()" :height="one_height" :width="to_w(100)" :start="100" :stop="1000" :genomeSize="10000">
<svg id="genome-vuer" ref="genomeVuer" height='100%' width='100%'>
<!-- -->
<axis :x="to_w(0)" :y="to_h(0)" :xOffset="10" :vOffset="10" :height="one_height" :width="width" :start="axisStart" :stop="axisStop" :genomeSize="length*100">
</axis>
<!-- -->
<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>
<!-- -->
</svg>
</div>`,
props: {
......@@ -40,12 +43,20 @@ Vue.component("genome-viewer",{
}
}
},
height: {},
width: {},
},
computed:{
axis_start(){},
axis_end(){},
stops(){
return this.featureData.map(f => f.end)
},
starts(){
return this.featureData.map(f => f.start)
},
axisStart(){
return Math.min(...this.starts)
},
axisStop(){
return Math.max(...this.stops)
},
genome_size(){},
length(){
if(this.genomeStats.start < this.genomeStats.end){
......@@ -59,6 +70,9 @@ Vue.component("genome-viewer",{
},
},
mounted() {
var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
this.width = svg_el.width
this.height = svg_el.height
//this.height / length([axis and lanes * 2])
// lanes are twize as big as the axis
// so height / (1 + no_of_lanes * 2)
......@@ -97,6 +111,8 @@ Vue.component("genome-viewer",{
data: function(){
return {
lanes: [-1, 1],
width: 0,
height: 0
}
},
})
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