add first version of arrows and click event

genome-vuer/src/js/feature.js

 Vue.component("feature",{
   template: 
     `
-    <div class="gv-feature" @click="my_method()">
-      TODO: im the feature component
-    </div>
+    <svg :height="svgHeight" :width="svgWidth" :x="svgX" :y="svgY">
+        <polygon :points="arrow_coordinates" :style=featureStyle @click="clickEvent" />
+    </svg>
     `,
-  props: {
-    todoprop1: {
-      validator (value) {
-        return true
+  props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId'],
+  computed: {
+    featureStyle () {
+      return {
+        'fill': this.color,
+        'stroke': this.borderColor,
+        'stroke-width': 1
       }
     },
-    todoprop2: {
-      validator (value) {
-          return true
-      }
-    }
-  },
-  methods: {
-    my_method(){
-      console.log(this.todo)
-      console.log(this.Todo)
+    arrow_coordinates () {
+      let points = [
+        '0, ' + this.svgHeight * 0.25,
+        '0, ' + this.svgHeight * 0.75,
+        this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.75,
+        this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.95,
+        this.svgWidth + ', ' + this.svgHeight * 0.5,
+        this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.05,
+        this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.25
+      ]
+      return points.join(' ')
     },
   },
-  computed: {
-    Todo(){
-      return this.todo.charAt(0).toUpperCase() + this.todo.substr(1);
-    },
+  methods: {
+    clickEvent (evt) {
+      this.$emit('click', this.featureId)
+    }
   },
   data: function(){
     return {
       todo: "todo"
     }
-  },
+  }
 })
 

genome-vuer/src/js/genome_viewer.js

@@ -16,8 +16,10 @@ Vue.component("genome-viewer",{
       <lane v-for="lane in lanes" :key="lane.id">
       </lane>
       <!-- TODO: features -->
-      <feature v-for="feature in featureData" :key="feature.name">
-      </feature>
+      <svg height="1500px" width="1500px">
+        <feature v-for="(feature, index) in featureData" :key="feature.name" :feature-id="feature.name" svg-width="200" svg-height="50" :svg-x="10+(index%2 * 400)" :svg-y="index*100+10" color="grey" border-color="red" @click="featureClick">
+        </feature>
+      </svg>
     </div>`,
   props: {
     genomeStats: {
@@ -43,6 +45,11 @@ Vue.component("genome-viewer",{
       }
     }
   },
+  methods: {
+    featureClick (featureId) {
+      console.log(featureId)
+    }
+  },
   data: function(){
     return {
       lanes: [-1, 1]