merged axis into grid

genome-vuer/src/js/axis.js

-Vue.component("axis",{
-  template: 
+
+
+/***********************************
+ * TODO:
+ * add logic to print human readable tick sizes, i.e.
+ * 10 kb instead of 10,000 bp
+ */
+
+
+Vue.component( "axis", {
+  template:
     `
-    <svg :x="x" :y="y" :width="width" :height="height">
-    <line :x1="0" :y1="height/2" :x2="width" :y2="height/2" style="stroke:rgb(255,0,0);stroke-width:2" />
+    <svg :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 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>
     </svg>
     `,
   props: {
-    width: {},
-    height: {},
-    x: {},
-    y: {},
+    start: Number,
+    stop: Number,
+    genomeSize: Number,
+    width: Number,
+    height: Number,
+    xOffset: Number,
+    vOffset: Number
   },
   methods: {
-    my_method(){
-      console.log(this.todo)
-      console.log(this.Todo)
-    },
+      genomeToPixel( pos ) {
+          return pos/Math.abs(this.stop-this.start) * this.width
+      }
   },
-  computed: {
-    Todo(){
-      return this.todo.charAt(0).toUpperCase() + this.todo.substr(1);
-    },
+  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 ) ) )
+
+    //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 )
+    }
   },
   data: function(){
     return {
-      todo: "todo"
+        noTicks: 10,
+        ticks: []
     }
-  },
-})
+  }
+} )
 

genome-vuer/src/js/genome_viewer.js

@@ -11,7 +11,7 @@ Vue.component("genome-viewer",{
       <svg id="genome-vuer" ref="genomeVuer" :height="height" :width="width">
         <!-- new stuff -->
         <!-- TODO: axis -->
-        <axis :x="to_w(0)" :y="to_h()" :height="one_height" :width="to_w(100)">
+        <axis :xOffset="to_w(0)" :vOffset="to_h()" :height="one_height" :width="to_w(100)" :start="100" :stop="1000" :genomeSize="10000">
         </axis>
         <!-- TODO: lanes -->
         <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)">