Merge branch 'grid' into 'development'

added tooltip component with mouseover and -out event handling

See merge request !4

genome-vuer/src/index.html

@@ -20,6 +20,7 @@
   <script src="js/axis.js"></script>
   <script src="js/feature.js"></script>
   <script src="js/lane.js"></script>
+  <script src="js/tool_tip.js"></script>
   <script src="js/genome_viewer.js"></script>
   <script src="js/app.js"> </script>
 </body>

genome-vuer/src/js/app.js

@@ -5,7 +5,8 @@ var app = new Vue({
       id: "my-genome",
       start: 1706479,
       end: 1718084,
-      tooltip: "name: {name}</br>description: {description}</br>start: {start}</br>end: {end}"
+      //tooltip: "name: {name}</br>description: {description}</br>start: {start}</br>end: {end}"
+      tooltip: ["name","type","description","start","end","strand"]
     },
     feature_data: [
       { name: "Gene 1",

genome-vuer/src/js/feature.js

@@ -2,7 +2,7 @@ Vue.component("feature",{
   template: 
     `
     <svg :height="svgHeight" :width="svgWidth" :x="svgX" :y="svgY">
-        <polygon :points="arrow_coordinates" :style=featureStyle @click="clickEvent" @mouseover="hoverEvent" />
+        <polygon :points="arrow_coordinates" :style=featureStyle @click="clickEvent" @mouseover="hoverEvent" @mouseout="$emit('unhover')"/>
     </svg>
     `,
   props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId'],

genome-vuer/src/js/genome_viewer.js

@@ -15,10 +15,13 @@ 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="genomeToPixel(feature.end)-genomeToPixel(feature.start)" :svg-height="one_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature.strand))+ one_height/2" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick">
+        <feature v-for="(feature, index) in featureData" :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.strand))+ one_height/2" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="currentFeature = undefined">
         </feature>
         <!-- -->
       </svg>
+      <tool-tip v-if="currentFeature" :feature="currentFeature" :tip="genomeStats.tooltip" :x="(genomeToPixel(currentFeature.start)+genomeToPixel(currentFeature.end))/2" :y="to_h(lane(currentFeature.strand)) + 1.75*one_height" >
+
+      </tool-tip>
     </div>`,
   props: {
     genomeStats: {
@@ -174,12 +177,18 @@ Vue.component("genome-viewer",{
       }
       console.log( this.fill_in_tooltip_template( feature, this.genomeStats.tooltip ) )
     },
+    updateFeature(feature){
+      this.currentFeature = this.featureData.find(feat => {
+        return feat.name == feature;
+      })
+    }
   },
   data: function(){
     return {
       lanes: [-1, 1],
       width: 0,
-      height: 0
+      height: 0,
+      currentFeature: undefined
     }
   },
 })

genome-vuer/src/js/tool_tip.js

+Vue.component("tool-tip",{
+  template: 
+    `
+    <div style="transform:translate(-50%,0%);" :style="tooltipStyle">
+      <p v-for="property in tip" :key='property.id'>
+        <b>{{property}}:</b> {{feature[property]}}
+      </p>
+    </div>
+    `,
+  props: {
+    x: {
+      validator (value) {
+        return true
+      }
+    },
+    y: {
+      validator (value) {
+          return true
+      }
+    },
+    width: {
+      validator (value) {
+           return true
+      }
+    },
+    tip: {
+      default: []
+    },
+    feature: {
+      default: {}
+    }
+  },
+  methods: {
+    fill_in_tooltip_template (feature, template) {
+      let tooltip = template
+      //TODO: Iterate over custom properties
+      for ( let property of ['name', 'description', 'start', 'end', 'strand', 'type'] ){
+        tooltip = tooltip.replace( "{" + property + "}", feature[property] )
+      }
+      return( tooltip )
+    },
+    get_tooltip (e){
+      let element = e.currentTarget
+      let id = element.getAttribute( "name" )
+      let feature = null
+      for(let entry of this.featureData){
+        if(entry.name === id){
+          feature = entry
+        }
+      }
+      console.log( this.fill_in_tooltip_template( feature, this.genomeStats.tooltip ) )
+    },
+  },
+  computed: {
+    tooltipStyle(){
+      return {
+        position: "absolute",
+        "left": this.x+"px",
+        "top": this.y+"px",
+        zIndex: 3,
+        color: "black",
+        backgroundColor: "white",
+        border: "1px solid black",
+        textFont: "1vw",
+        padding: "10px"
+      }
+    }
+  },
+  data: function(){
+    return {
+      todo: "todo"
+    }
+  },
+})