functional lane added with testing values in genome_viewer

genome-vuer/src/js/genome_viewer.js

@@ -13,8 +13,10 @@ Vue.component("genome-viewer",{
       <axis>
       </axis>
       <!-- TODO: lanes -->
-      <lane v-for="lane in lanes" :key="lane.id">
+      <svg :height="400" :width="1000">
+      <lane v-for="(lane, index) in lanes" :key="lane.id" :x="0" :y="100*index" :height="100" :width="1000">
       </lane>
+      </svg>
       <!-- TODO: features -->
       <feature v-for="feature in featureData" :key="feature.name">
       </feature>

genome-vuer/src/js/lane.js

 Vue.component("lane",{
   template: 
     `
-    <div class="gv-lane" @click="my_method()">
-      TODO: im the lane component
-    </div>
+<svg :height="height" :x="x" :y="y">
+  <line :x1="x+10" :y1="height/2" :x2="width" :y2="height/2" stroke="#39FF14" stroke-width="2" stroke-dasharray="20, 5" />
+</svg>
+
     `,
   props: {
-    todoprop1: {
+    x: {
       validator (value) {
         return true
       }
     },
-    todoprop2: {
+    y: {
       validator (value) {
           return true
       }
-    }
+    },
+    height: {
+      validator (value) {
+           return true
+      }
+    },
+    width: {
+      validator (value) {
+           return true
+      }
+    },
   },
   methods: {
     my_method(){
@@ -24,9 +35,18 @@ Vue.component("lane",{
     },
   },
   computed: {
-    Todo(){
-      return this.todo.charAt(0).toUpperCase() + this.todo.substr(1);
-    },
+//      y() {
+//        return y;
+//      },
+//      x() {
+//        return lib.map(0, this.o.xMin, this.o.xMax, 0, this.svg.w);
+//      },
+//      tickXs() {
+//        const ticks = lib.range(this.o.xMin, this.o.xMax, 10)
+//        return ticks.map(tick =>
+//          lib.map(tick, this.o.xMin, this.o.xMax, 0, this.svg.w)
+//        );
+//    },
   },
   data: function(){
     return {