features are now visible

genome-vuer/src/js/axis.js

@@ -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

genome-vuer/src/js/genome_viewer.js

@@ -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)
     }