Commit 35939e21 authored by Oliver Schwengers's avatar Oliver Schwengers
Browse files

implement logarithmic axis scaling

parent 0d941e38
/***********************************
* TODO:
* add logic to print human readable tick sizes, i.e.
* 10 kb instead of 10,000 bp
*/
Vue.component( "axis", {
template:
`
......@@ -10,55 +19,46 @@ Vue.component( "axis", {
<line x1="0", y1="{{ 2*vOffset }}", x2="0", y1="{{ vOffset }}" />
<line x1="{{ width }}", y1="{{ 2*vOffset }}", x2="{{ width }}", y1="{{ vOffset }}" />
<line v-for="tick in ticks()", x1="{{ tick.pos }}", y1="{{ 2*vOffset }}", x2="{{ tick.pos }}", y1="{{ vOffset }}" />
<text v-for="tick in ticks()", class="small" x="{{ tick.pos }}" y="0" fill="black">{{ tick.genomePos }}</text>
<line v-for="tick in ticks()", x1="{{ tick.panelPos }}", y1="{{ 2*vOffset }}", x2="{{ tick.panelPos }}", y1="{{ vOffset }}" />
<text v-for="tick in ticks()", class="small" x="{{ tick.panelPos }}" y="0" fill="black">{{ tick.genomePos }}</text>
</svg>
`,
props: {
start: Number,
stop: Number,
size: Number,
genomeSize: Number,
width: Number,
heigth: Number,
xOffset: Number,
vOffset: Number
},
methods: {
genomeToPixel( pos ) {
return pos/Math.abs(this.stop-this.start) * this.width
}
},
computed: {
ticks(){
const genomeSectionSize = Math.abs(this.stop-this.start) // genome section in bp
const tickSize = genomeSectionSize / this.noTicks // axis tick size in bp
const tickWidth = this.width / this.noTicks // axis tick size in pixels
/***********************************
* TODO:
* add logic to select human readable tick sizes, i.e.
* multiples of 10 bp
*/
getTicks() {
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 ) ) )
let ticks = []
let genomePos = this.start
let pos = 0
for( let i=0; i<this.noTicks; i++ ) { // skip the first an
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,
pos: pos
panelPos: panelPos
}
ticks.push( tick )
genomePos += tickSize
pos += tickWidth
if( this.start > this.stop && genomePos > this.size ) {
let tick = {
genomePos: 0,
pos: (this.size-this.start)/genomeSectionSize*this.with
}
ticks.push( tick )
}
panelPos = this.genometoPixel( genomePos )
}
// remove first and last tick for aesthetic reasons
ticks.shift()
ticks.pop()
return ticks
}
},
......
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