corrected axis. added locked mode for tooltip

genome-vuer/src/js/axis.js

@@ -11,13 +11,13 @@ Vue.component( "axis", {
   template:
     `
     <svg :x="x" :y="y" :width="width" :height="height" >
-        <line x1="0" :y1="2*vOffset" :x2="width" :y2="2*vOffset" :style="style"" />
+        <line x1="0" :y1="3*vOffset" :x2="width" :y2="3*vOffset" :style="style"" />
 
-        <line x1="0" :y1="2*vOffset" x2="0" :y2="vOffset" stroke="this.color" :style="style"/>
-        <line :x1="width" :y1="2*vOffset" :x2="width" :y2="vOffset" stroke="this.color" :style="style"/>
+        <line x1="0" :y1="3*vOffset" x2="0" :y2="vOffset" stroke="this.color" :style="style"/>
+        <line :x1="width" :y1="3*vOffset" :x2="width" :y2="vOffset" stroke="this.color" :style="style"/>
 
-        <line v-for="tick in ticks" :x1="tick.panelPos" :y1="2*vOffset" :x2="tick.panelPos" :y2="vOffset+2" :style="style"/>
-        <text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="vOffset" text-anchor="middle" :fill="color">{{ tick.genomePos }}</text>
+        <line v-for="tick in ticks" :x1="tick.panelPos" :y1="3*vOffset" :x2="tick.panelPos" :y2="(2+0.1)*vOffset" :style="style"/>
+        <text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="2*vOffset" text-anchor="middle" :fill="color">{{ tick.genomePos }}</text>
     </svg>
     <!-- -->
     `,

genome-vuer/src/js/genome_viewer.js

@@ -8,11 +8,11 @@ Vue.component("genome-viewer",{
         <!-- -->
         <lane v-for="lane in lanes_arr" :key="lane.id" :x="to_w(0)" :y="to_h(lane)" :height="lane_height" :width="to_w(100)" :color="defaultLaneColor">
         </lane>
-        <feature v-for="(feature, index) in sortedFeatures" :key="feature.name" :feature-id="feature.name" :svg-width="genomeToPixel(feature.end)-genomeToPixel(feature.start)" :svg-height="lane_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature))" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="unfeature" :shape="feature.shape? feature.shape : 'arrow'" :inverse="lane(feature)>0">
+        <feature v-for="(feature, index) in sortedFeatures" :key="feature.name" :feature-id="feature.name" :svg-width="genomeToPixel(feature.end)-genomeToPixel(feature.start)" :svg-height="lane_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature))" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @nhover="unfeature" :shape="feature.shape? feature.shape : 'arrow'" :inverse="lane(feature)>0">
         </feature>
         <!-- -->
       </svg>
-      <tool-tip v-if="currentFeature" :feature="currentFeature" :tip="genomeStats.tooltip" :x="(genomeToPixel(currentFeature.start)+genomeToPixel(currentFeature.end))/2" :y="y+to_h(lane(currentFeature))+lane_height" >
+      <tool-tip v-if="currentFeature" :feature="currentFeature" :tip="genomeStats.tooltip" :x="(genomeToPixel(currentFeature.start)+genomeToPixel(currentFeature.end))/2" :y="y+to_h(lane(currentFeature))+lane_height" @remove="currentFeature = undefined" >
 
       </tool-tip>
     </div>`,
@@ -126,6 +126,7 @@ Vue.component("genome-viewer",{
   },
   methods:{
     unfeature(){
+			alert("something")
       this.currentFeature = undefined
     },
     shape(feat){
@@ -199,13 +200,13 @@ Vue.component("genome-viewer",{
       y: 0,
       currentFeature: undefined,
       colorMapDefault: {
-        'region':'#555555', // greyLighten
-        'gene':'#152329', // greyDarken
-        'cds': '#D8C684', // black
-        'CDS': '#D8C684', // black
-        'ncRNA': '#F6893D', // brown
-        'rRNA': '#4caf50', // green
-        'tRNA': '#4caf50', // green
+        'region':'#555555', 
+        'gene':'#152329', 
+        'cds': '#D8C684',
+        'CDS': '#D8C684', 
+        'ncRNA': '#F6893D', 
+        'rRNA': '#4caf50', 
+        'tRNA': '#4caf50', 
       }
     }
   },

genome-vuer/src/js/tool_tip.js

 Vue.component("tool-tip",{
   template: 
     `
-    <div style="transform:translate(-50%,0%);" :style="tooltipStyle">
+    <div style="transform:translate(-50%,0%);" :style="tooltipStyle" @click="$emit('remove')">
       <p v-for="property in tipArray" :key='property.id'>
         <b>{{tipMap[property]}}:</b> {{feature[property]}} 
       </p>
@@ -32,27 +32,6 @@ Vue.component("tool-tip",{
       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: {
     tipArray(){
       let arr = [];