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

corrected axis heights

parent 730d5cc6
......@@ -10,14 +10,14 @@
Vue.component( "axis", {
template:
`
<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:this.color;stroke-width:2" />
<svg :x="x" :y="y" :width="width" :height="height" >
<line x1="0" :y1="2*vOffset" :x2="width" :y2="2*vOffset" :style="style"" />
<line x1="0" :y1="2*vOffset" x2="0" :y2="vOffset" stroke="this.color" />
<line :x1="width" :y1="2*vOffset" :x2="width" :y2="vOffset" stroke="this.color" />
<line x1="0" :y1="2*vOffset" x2="0" :y2="vOffset" stroke="this.color" :style="style"/>
<line :x1="width" :y1="2*vOffset" :x2="width" :y2="vOffset" stroke="this.color" :style="style"/>
<line v-for="tick in ticks" :x1="tick.panelPos" :y1="2*vOffset" :x2="tick.panelPos" :y2="vOffset+2" stroke="this.color"/>
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="vOffset" text-anchor="middle" fill="this.color">{{ tick.genomePos }}</text>
<line v-for="tick in ticks" :x1="tick.panelPos" :y1="2*vOffset" :x2="tick.panelPos" :y2="vOffset+2" :style="style"/>
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="vOffset" text-anchor="middle" :fill="color">{{ tick.genomePos }}</text>
</svg>
<!-- -->
`,
......@@ -29,8 +29,6 @@ Vue.component( "axis", {
genomeSize: Number,
width: Number,
height: Number,
xOffset: Number,
vOffset: Number,
color: {
default: "#888"
}
......@@ -41,6 +39,15 @@ Vue.component( "axis", {
}
},
computed:{
style(){
return {
stroke: this.color,
strokeWidth:2
}
},
vOffset(){
return this.height / 4
},
power(){
return Math.floor(Math.log10(this.length))
},
......
Vue.component("genome-viewer",{
template: `
<div style="height:100%;width:100%">
<!--<div class="container-lin-dna">
<div :id="genomeStats.id" class="lin-dna" :data-cluster-start="genomeStats.start" :data-cluster-end="genomeStats.end" style="width: 100%; height: 50px;">
<div v-for="feature in featureData" :key="feature.name" class="region-to-display" :data-region-name="feature.name" :data-region-description="feature.description" :data-region-start="feature.start" :data-region-end="feature.end" :data-region-strand="feature.strand" :data-region-type="feature.type">
</div>
</div>
</div>
-->
<svg id="genome-vuer" ref="genomeVuer" height='100%' width='100%'>
<!-- -->
<axis :x="to_w(0)" :y="to_h(0)" :vOffset="height/15" :height="one_height" :width="width" :start="axisStart" :stop="axisStop" :genomeSize="length*100">
<axis :x="to_w(0)" :y="to_h(0)" :height="one_height" :width="width" :start="axisStart" :stop="axisStop" :genomeSize="length*100">
</axis>
<!-- -->
<lane v-for="lane in lanes_arr" :key="lane.id" :x="to_w(0)" :y="to_h(lane)" :height="2*one_height" :width="to_w(100)" :color="defaultLaneColor">
<lane v-for="lane in lanes_arr" :key="lane.id" :x="to_w(0)" :y="to_h(lane)" :height="lane_height" :width="to_w(100)" :color="defaultLaneColor">
</lane>
<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 v-for="(feature, index) in sortedFeatures" :key="feature.name" :feature-id="feature.name" :svg-width="genomeToPixel(feature.end)-genomeToPixel(feature.start)" :svg-height="lane_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature))" :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>
<tool-tip v-if="currentFeature" :feature="currentFeature" :tip="genomeStats.tooltip" :x="(genomeToPixel(currentFeature.start)+genomeToPixel(currentFeature.end))/2" :y="y+to_h(lane(currentFeature)) + 1.5*one_height " >
<tool-tip v-if="currentFeature" :feature="currentFeature" :tip="genomeStats.tooltip" :x="(genomeToPixel(currentFeature.start)+genomeToPixel(currentFeature.end))/2" :y="y+to_h(lane(currentFeature))+lane_height" >
</tool-tip>
</div>`,
......@@ -93,7 +86,6 @@ Vue.component("genome-viewer",{
axisStop(){
return this.genomeStop + this.tickSize
},
genome_size(){},
length(){
if(this.genomeStats.start < this.genomeStats.end){
return this.genomeStop - this.genomeStart
......@@ -102,10 +94,11 @@ Vue.component("genome-viewer",{
}
},
one_height(){
return this.height/(1 + 2 * this.lanes_arr.length)
return this.height/3//(1 + 2 * this.lanes_arr.length)
//return this.height/(1 + 2 * this.lanes_arr.length)
},
lane_height(){
return this.height/this.lanes_arr.length
return this.one_height/this.lanes
},
tickSize(){
return Math.pow(10,Math.floor(Math.log10(this.length))-1)
......@@ -171,11 +164,11 @@ Vue.component("genome-viewer",{
//if param is 0 => axis
//if param < 0 => lane on top
//if param > 0 => lane on bottom
let zero = this.lanes_arr.length * this.one_height
let zero = this.one_height
if(param < 0){
return zero + 2 * this.one_height * (param)
return zero + this.lane_height * (param)
}else if(param > 0){
return zero + this.one_height + (param-1)*this.one_height*2
return zero + this.one_height + (param-1)*this.lane_height
//return zero + this.one_height * (param)
}
return zero
......
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