colorMap

genome-vuer/src/js/app.js

@@ -95,7 +95,6 @@ var app = new Vue({
         end: 1716321,
         strand: '+',
         type: "gene",
-        color: '#454aff',
         color_border: '#000000'
       },
       { name: "Gene 11",
@@ -103,9 +102,7 @@ var app = new Vue({
         start: 1717235,
         end: 1718084,
         strand: '-',
-        type: "gene",
-        color: '#454aff',
-        color_border: '#000000'
+        type: "rRNA"
       }
     ]
   }

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)">
         </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="grey" border-color="red" @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">
         </feature>
         <!-- -->
       </svg>
@@ -43,6 +43,24 @@ Vue.component("genome-viewer",{
         }
       }
     },
+    defaultColor: {
+      default: "#000000"
+    },
+    defaultBorderColor: {
+      default: "#000000"
+    },
+    colorMap: {
+      default: function(){
+        return {
+          'region':'#bdbdbd', // greyLighten
+          'gene':'#757575', // greyDarken
+          'cds': '#000000', // black
+          'rRNA': '#795548', // brown
+          'tRNA': '#4caf50', // green
+          'ncRNA': '#ff9800' // orange
+        }
+      }
+    },
   },
   computed:{
     stops(){
@@ -96,6 +114,21 @@ Vue.component("genome-viewer",{
     
     },
   methods:{
+    getColor(feature){
+      if(feature.hasOwnProperty("color")){
+        return feature.color
+      }else{
+        if(feature.hasOwnProperty("type")){
+          if(this.colorMap.hasOwnProperty(feature.type)){
+            return this.colorMap[feature.type]
+          }else{
+            return this.defaultColor
+          }
+        }else {
+          return this.defaultColor
+        }
+      }
+    },
     lane(str){
       return (str=="+")? 1 : -1
     },