Merge branch 'feature-shape' into 'development'

Feature shapes: Arrows (left) and Rectangle

See merge request !9

genome-vuer/src/js/app.js

@@ -7,9 +7,18 @@ var app = new Vue({
       end: 1718084,
       //tooltip: "name: {name}</br>description: {description}</br>start: {start}</br>end: {end}"
       tooltip: ["name:Gene Name","type:Gene Type","description","start:Start","end:End","strand:Strand"],
-      colorMap: {"xRNA":"#CC0000"}
+      colorMap: {"xRNA":"#CC0000", "PFAM":"#8e44ad"}
     },
     feature_data: [
+      { name: "Gene 1.5",
+        description: "GMP synthase",
+        start: 1707479,
+        end: 1708024,
+        strand: "+",
+        zIndex: "4",
+        type: "ncRNA",
+        color_border: 'red'
+      },
       { name: "Gene 1",
         description: "GMP synthase",
         start: 1706479,
@@ -26,6 +35,14 @@ var app = new Vue({
         strand: "+",
         type: "xRNA"
       },
+      { name: "Gene 2.5",
+        description: "glyoxalase",
+        start: 1708414,
+        end: 1708571,
+        strand: "+",
+        zIndeX: "2",
+        type: "tRNA"
+      },
       { name: "Gene 3",
         description: "ABC transporter ATP-binding protein LlsG",
         start: 1709429,
@@ -106,6 +123,16 @@ var app = new Vue({
       }
     ],
     feature_data2: [
+      { name: "PIWI",
+        description: "dsRNA guided hydrolysis of ssRNA",
+        start: 1706879,
+        end: 1707525,
+        strand: "+",
+        zIndex: "12",
+        type: "PFAM",
+        shape: "rect",
+        color_border: 'red'
+      },
       { name: "Gene 21",
         description: "GMP synthase",
         start: 1706479,
@@ -158,15 +185,31 @@ var app = new Vue({
         color: '#454aff',
         color_border: '#000000'
       },
+      { name: "Gene 27.3",
+        description: "LlsY",
+        start: 1712703,
+        end: 1712821,
+        zIndex: "10",
+        strand: '-',
+        type: "ncRNA",
+      },
       { name: "Gene 27",
         description: "LlsY",
-        start: 1712303,
-        end: 1713221,
+        start: 1712503,
+        end: 1713021,
+        zIndex: "2",
         strand: '-',
         type: "gene",
         color: '#454aff',
         color_border: '#000000'
       },
+      { name: "Gene 27.6",
+        description: "LlsY",
+        start: 1712303,
+        end: 1713221,
+        strand: '-',
+        type: "gene",
+      },
       { name: "Gene 28",
         description: "streptolysin-associated protein LlsD",
         start: 1713213,

genome-vuer/src/js/feature.js

@@ -2,16 +2,33 @@ Vue.component("feature",{
   template: 
     `
     <svg :height="svgHeight" :width="svgWidth" :x="svgX" :y="svgY">
-        <polygon :points="arrow_coordinates" :style=featureStyle @click="clickEvent" @mouseover="hoverEvent" @mouseout="$emit('unhover')"/>
+        <polygon :points="points" :style=featureStyle @click="clickEvent" @mouseover="hoverEvent" @mouseout="$emit('unhover')"/>
     </svg>
     `,
-  props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId'],
+  props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId', 'shape','inverse'],
   computed: {
     featureStyle () {
       return {
         'fill': this.color,
         'stroke': this.borderColor,
-        'stroke-width': 1
+        'strokeWidth': 1
+      }
+    },
+    points(){
+      switch(this.shape){
+        case "arrow":
+          if(this.inverse){
+            return this.arrow_coordinates_inverse
+          }
+          else{
+            return this.arrow_coordinates
+          }
+          break;
+        case "rect":
+          return this.rect_coordinates
+          break;
+        default:
+          return this.arrow_coordinates
       }
     },
     arrow_coordinates () {
@@ -26,6 +43,27 @@ Vue.component("feature",{
       ]
       return points.join(' ')
     },
+    arrow_coordinates_inverse () {
+      let points = [
+        this.svgWidth + ', ' + this.svgHeight * 0.25,
+        this.svgWidth + ', ' + this.svgHeight * 0.75,
+        this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.75,
+        this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.95,
+        0 + ', ' + this.svgHeight * 0.5,
+        this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.05,
+        this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.25
+      ]
+      return points.join(' ')
+    },
+    rect_coordinates(){
+      let points = [
+        this.svgWidth + ', ' + this.svgHeight * 0.25,
+        '0, ' + this.svgHeight * 0.25,
+        '0, ' + this.svgHeight * 0.75,
+        this.svgWidth + ', ' + this.svgHeight * 0.75,
+      ]
+      return points.join(' ')
+    }
   },
   methods: {
     clickEvent (evt) {

genome-vuer/src/js/genome_viewer.js

@@ -15,7 +15,7 @@ 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)" :color="defaultLaneColor">
         </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))+ one_height/2" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="currentFeature = undefined">
+        <feature v-for="(feature, index) in sortedFeatures" :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))+ one_height/2" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="currentFeature = undefined" :shape="feature.shape? feature.shape : 'arrow'" :inverse="lane(feature)>0">
         </feature>
         <!-- -->
       </svg>
@@ -68,6 +68,15 @@ Vue.component("genome-viewer",{
     },
   },
   computed:{
+    sortedFeatures(){
+      feats = this.featureData.map(a => ({...a}));
+      feats.sort((a,b) => {
+          let azi = (a.zIndex? a.zIndex : "1")
+          let bzi = (b.zIndex? b.zIndex : "1")
+          return azi.localeCompare(bzi,undefined,{"numeric": true})
+      })
+      return feats
+    },
     stops(){
       return this.featureData.map(f => f.end)
     },
@@ -126,6 +135,9 @@ Vue.component("genome-viewer",{
     window.removeEventListener('resize', this.handleResize)
   },
   methods:{
+    shape(feat){
+      return "arrow"
+    },
     handleResize(){
       var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
       this.y = svg_el.y