add sequence to gene detail view

backend/metagenedb/apps/catalog/serializers/gene.py

@@ -69,7 +69,7 @@ class GeneSerializer(serializers.ModelSerializer):
     class Meta:
         model = Gene
         list_serializer_class = GeneListSerializer
-        fields = ('gene_id', 'name', 'length', 'functions', 'taxonomy')
+        fields = ('gene_id', 'name', 'length', 'functions', 'taxonomy', 'sequence')
 
     def _extract_many_to_many(self, validated_data, info):
         many_to_many = {}

frontend/src/main.js

@@ -16,7 +16,7 @@ Vue.use(Vuetify, {
     primary: '#263238',
     secondary: '#508991',
     tertiary: '#104f55',
-    dropdown: '#f3e9dc',
+    dropdown: '#d8e2e3',
     // Category colors
     function: '#db5461',
     kegg: '#db9d47',

frontend/src/views/GeneDetail.vue

@@ -4,10 +4,6 @@
       <v-toolbar class="secondary darken-1 white--text" dense>
         <v-icon class="white--text">fa-clipboard</v-icon>
         <v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn dark icon>
-          <v-icon>search</v-icon>
-        </v-btn>
       </v-toolbar>
 
       <v-card>
@@ -38,6 +34,26 @@
                       </v-list-tile-content>
                     </v-list-tile>
                   </template>
+                  <v-expansion-panel>
+                    <v-expansion-panel-content>
+                      <template v-slot:header><div>FASTA sequence</div></template>
+                      <div>
+                        <v-textarea
+                          readonly
+                          background-color="dropdown"
+                          hide-details
+                          :value="sequence"
+                          id="fastaseq"
+                        ></v-textarea>
+                        <v-layout wrap align-center>
+                          <v-spacer></v-spacer>
+                          <v-btn @click="copyFasta" class="ma-2 secondary lighten-1">Copy FASTA
+                            <v-icon right dark>far fa-copy</v-icon>
+                          </v-btn>
+                        </v-layout>
+                      </div>
+                    </v-expansion-panel-content>
+                  </v-expansion-panel>
                 </v-list>
               </v-card>
             </v-flex>
@@ -63,6 +79,7 @@ export default {
     return {
       gene_id: '',
       gene_detail: [],
+      sequence: '',
       kegg_id: '',
       taxonomy_id: '',
     };
@@ -93,6 +110,7 @@ export default {
               content: response.data.length,
             },
           ];
+          this.sequence = '>' + response.data.gene_id + '\n' + response.data.sequence;
           if (response.data.functions.length > 0) {
             this.kegg_id = response.data.functions[0].function_id;
           } else {
@@ -108,6 +126,12 @@ export default {
           console.log(error);
         });
     },
+    copyFasta(){
+      var copyText = document.getElementById("fastaseq");
+      copyText.select();
+      document.execCommand("copy");
+    }
   },
 };
 </script>
+<style src="./genedetails.scss" lang="scss" scoped></style>

frontend/src/views/genedetails.scss

+.v-textarea {
+    font-size: 0.9em;
+}
+
+.v-text-field {
+    padding-top: 0px;
+    margin-top: 0px;
+}
\ No newline at end of file