Add drop down list for lists from KEGG

frontend/src/views/GeneDetail.vue

@@ -4,7 +4,7 @@
       <v-toolbar class="secondary white--text">
         <v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title>
         <v-spacer></v-spacer>
-        <v-btn icon>
+        <v-btn dark icon>
           <v-icon>search</v-icon>
         </v-btn>
       </v-toolbar>
@@ -21,14 +21,15 @@
                   <v-list>
                     <template v-for="(item, index) in gene_detail">
                       <v-divider
-                        v-if="item.divider"
+                        v-if="index > 0"
                         :key="index"
-                        :inset="item.inset"
                       ></v-divider>
-                      <v-list-tile-content :key="item.content">
-                        <v-list-tile-title v-html="item.title"></v-list-tile-title>
-                        <v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
-                      </v-list-tile-content>
+                      <v-list-tile :key="item.title">
+                        <v-list-tile-content :key="item.content">
+                          <v-list-tile-title v-html="item.title"></v-list-tile-title>
+                          <v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
+                        </v-list-tile-content>
+                      </v-list-tile>
                     </template>
                   </v-list>
               </v-card>
@@ -39,14 +40,40 @@
                   <v-list>
                     <template v-for="(item, index) in kegg_detail">
                       <v-divider
-                        v-if="item.divider"
+                        v-if="index > 0"
                         :key="index"
-                        :inset="item.inset"
                       ></v-divider>
-                      <v-list-tile-content :key="item.content">
-                        <v-list-tile-title v-html="item.title"></v-list-tile-title>
-                        <v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
-                      </v-list-tile-content>
+                      <v-expansion-panel v-if="item.expand" :key="item.title">
+                        <v-expansion-panel-content>
+                          <template v-slot:header>
+                            <div>{{item.title}}</div>
+                          </template>
+                          <v-card>
+                            <v-list>
+                              <template v-for="(element, elindex) in item.content">
+                                <v-divider
+                                  v-if="elindex > 0"
+                                  :key="elindex"
+                                ></v-divider>
+                                <v-list-tile :key="element.title">
+                                  <v-list-tile-content :key="element.content">
+                                    <v-list-tile-title v-if="element.title" v-html="element.title"></v-list-tile-title>
+                                    <v-list-tile-title v-else v-html="elindex"></v-list-tile-title>
+                                    <v-list-tile-sub-title v-if="element.authors" v-html="element.authors"></v-list-tile-sub-title>
+                                    <v-list-tile-sub-title v-else v-html="element"></v-list-tile-sub-title>
+                                  </v-list-tile-content>
+                                </v-list-tile>
+                              </template>
+                            </v-list>
+                          </v-card>
+                        </v-expansion-panel-content>
+                      </v-expansion-panel>
+                      <v-list-tile v-else :key="item.title">
+                        <v-list-tile-content :key="item.title">
+                          <v-list-tile-title v-html="item.title"></v-list-tile-title>
+                          <v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
+                        </v-list-tile-content>
+                      </v-list-tile>
                     </template>
                   </v-list>
               </v-card>
@@ -91,12 +118,10 @@ export default {
           {
             title: 'Name',
             content: response.data.gene_name,
-            divider: true,
           },
           {
             title: 'Length',
             content: response.data.length,
-            divider: true,
           },
         ];
         var kegg_id = response.data.functions[0];
@@ -115,12 +140,20 @@ export default {
           {
             title: 'Name',
             content: response.data[0].name,
-            divider: true,
           },
           {
             title: 'Definition',
             content: response.data[0].definition,
-            divider: true,
+          },
+          {
+            title: 'Pathways',
+            content: response.data[0].pathways,
+            expand: true,
+          },
+          {
+            title: 'References',
+            content: response.data[0].references,
+            expand: true,
           },
         ];
       })