From 4207472873e650871998092623948d2195dc9b88 Mon Sep 17 00:00:00 2001
From: Kenzo-Hugo Hillion <kenzo-hugo.hillion1@pasteur.fr>
Date: Mon, 10 Feb 2020 12:26:23 +0100
Subject: [PATCH] add way of filtering on a given KEGG or EggNOG ID

---
 frontend/src/views/genes/genes.html | 290 ++++++++++++++--------------
 frontend/src/views/genes/genes.js   |   5 +
 2 files changed, 150 insertions(+), 145 deletions(-)

diff --git a/frontend/src/views/genes/genes.html b/frontend/src/views/genes/genes.html
index 2c69e71..bde5ee2 100644
--- a/frontend/src/views/genes/genes.html
+++ b/frontend/src/views/genes/genes.html
@@ -1,151 +1,151 @@
 <div class="genes">
-    <v-layout row wrap>
+  <v-layout row wrap>
     <v-flex xs12>
-        <v-toolbar
+      <v-toolbar
         class="secondary darken-1 white--text"
-        >
-        <v-icon class="white--text">format_list_bulleted</v-icon>
-        <v-toolbar-title>Catalog content</v-toolbar-title>
-        <v-text-field
-            label="Search gene"
-            solo
-            class="mx-4 mt-2"
-            flat
-            append-icon="search"
-            v-model="searchGeneName"
-            v-on:keyup.enter.native="runSearch"
-        ></v-text-field>
-        </v-toolbar>
-        <!-- Filters -->
-        <v-expansion-panel>
-        <v-expansion-panel-content class="grey lighten-2">
-            <template v-slot:header>
-            <div>Show Filters</div>
-            </template>
-            <v-card class="grey lighten-3 px-2">
-            <v-card-text>
-                <v-layout wrap align-center>
-                <!-- Taxonomy ranks -->
-                <v-flex xs12 sm6 md4 lg2 d-flex>
-                    <v-select
-                    :items="taxonomyRanks"
-                    v-model="taxonomyRank"
-                    label="Taxonomy rank"
-                    ></v-select>
-                </v-flex>
-                <!-- KEGG KO -->
-                <!-- <v-flex xs12 sm6 md4 lg2 d-flex>
-                    <v-select
-                    :items="taxonomyRanks"
-                    v-model="taxonomyRank"
-                    label="KEGG KO"
-                    ></v-select>
-                </v-flex> -->
-                <!-- Gene length -->
-                <v-flex class="ml-4">
-                    <v-switch
-                    v-model="filterGeneLength"
-                    label="Filter on gene length"
-                    color="secondary lighten-1"
-                    ></v-switch>
-                </v-flex>
-                <v-flex
-                    shrink
-                    style="width: 60px"
-                    v-if="filterGeneLength"
-                >
-                    <v-text-field
-                    v-model="geneLengthFilterRange[0]"
-                    class="mt-0"
-                    hide-details
-                    single-line
-                    type="number"
-                    ></v-text-field>
-                </v-flex>
-                <v-flex class="mx-4" v-if="filterGeneLength">
-                    <v-range-slider
-                    v-model="geneLengthFilterRange"
-                    color="secondary lighten-1"
-                    :max="maxGeneLength"
-                    :min="minGeneLength"
-                    ></v-range-slider>
-                </v-flex>
-                <v-flex
-                    shrink
-                    style="width: 60px"
-                    v-if="filterGeneLength"
-                >
-                    <v-text-field
-                    v-model="geneLengthFilterRange[1]"
-                    class="mt-0"
-                    hide-details
-                    single-line
-                    type="number"
-                    ></v-text-field>
-                </v-flex>
-                <v-spacer></v-spacer>
-                <v-btn
-                    color="deep-orange lighten-1 white--text"
-                    @click="emptyFilters"
-                >
-                    Clear<v-icon right>far fa-window-close</v-icon>
-                </v-btn>
-                <v-btn
-                    color="secondary lighten-1"
-                    @click="runSearch"
-                >
-                    Apply<v-icon right>far fa-check-square</v-icon>
-                </v-btn>
-                </v-layout>
-            </v-card-text>
-            </v-card>
-        </v-expansion-panel-content>
-        </v-expansion-panel>
-        <!-- Table -->
-        <v-card class="text-xs-center" v-if="!requestDone">
-        <v-progress-circular
-            indeterminate
-            color="secondary"
-            class="ma-2"
-        ></v-progress-circular>
-        </v-card>
-        <v-list v-else>
-        <v-data-table
-            :rows-per-page-items="rowsPerPageItems"
-            :pagination.sync="pagination"
-            :headers="headers"
-            :items="genes"
-            hide-actions
-        >
-            <template v-slot:items="props">
-            <td>
-                <router-link :to="/gene-detail/ + props.item.gene_id">{{ props.item.gene_id }}</router-link>
-            </td>
-            <td>{{ props.item.name }}</td>
-            <td class="text-xs">{{ props.item.length }}</td>
-            <td class="text-xs">
-                {{ props.item.taxonomy }}
-                <v-btn :href="props.item.tax_url" icon flat small target="_blank" class="taxonomy--text mt-1 ml-0" v-if="props.item.taxonomy">
-                <v-icon small>
-                    open_in_new
-                </v-icon>
-                </v-btn>
-            </td>
-            <td class="text-xs">
-                {{ props.item.kegg }}
-                <v-btn :href="props.item.kegg_url" icon flat small target="_blank" class="kegg--text mt-1 ml-0" v-if="props.item.kegg">
-                <v-icon small>
-                    open_in_new
-                </v-icon>
-                </v-btn>
-            </td>
-            <td class="text-xs">{{ props.item.eggnog }}</td>
-            </template>
-        </v-data-table>
-        </v-list>
-        <v-card class="white" flat>
-        <v-subheader class="text-right">{{count}} genes found</v-subheader>
+      >
+      <v-icon class="white--text">format_list_bulleted</v-icon>
+      <v-toolbar-title>Catalog content</v-toolbar-title>
+      <v-text-field
+        label="Search gene"
+        solo
+        class="mx-4 mt-2"
+        flat
+        append-icon="search"
+        v-model="searchGeneName"
+        v-on:keyup.enter.native="runSearch"
+      ></v-text-field>
+      </v-toolbar>
+      <!-- Filters -->
+      <v-expansion-panel>
+      <v-expansion-panel-content class="grey lighten-2">
+        <template v-slot:header>
+        <div>Show Filters</div>
+        </template>
+        <v-card class="grey lighten-3 px-2">
+        <v-card-text>
+          <v-layout wrap align-center>
+            <!-- Taxonomy ranks -->
+            <v-flex xs12 sm6 md4 lg2 d-flex>
+              <v-select
+                :items="taxonomyRanks"
+                v-model="taxonomyRank"
+                label="Taxonomy rank"
+              ></v-select>
+            </v-flex>
+            <!-- Function -->
+            <v-flex xs12 sm6 md4 lg2 d-flex class="ml-2">
+              <v-text-field
+                label="KEGG KO of EggNOG ID"
+                v-model="functionID"
+              ></v-text-field>
+            </v-flex>
+            <!-- Gene length -->
+            <v-flex class="ml-4">
+              <v-switch
+                v-model="filterGeneLength"
+                label="Filter on gene length"
+                color="secondary lighten-1"
+              ></v-switch>
+            </v-flex>
+            <v-flex
+              shrink
+              style="width: 60px"
+              v-if="filterGeneLength"
+            >
+              <v-text-field
+                v-model="geneLengthFilterRange[0]"
+                class="mt-0"
+                hide-details
+                single-line
+                type="number"
+              ></v-text-field>
+            </v-flex>
+            <v-flex class="mx-4" v-if="filterGeneLength">
+              <v-range-slider
+                v-model="geneLengthFilterRange"
+                color="secondary lighten-1"
+                :max="maxGeneLength"
+                :min="minGeneLength"
+              ></v-range-slider>
+            </v-flex>
+            <v-flex
+              shrink
+              style="width: 60px"
+              v-if="filterGeneLength"
+            >
+              <v-text-field
+                v-model="geneLengthFilterRange[1]"
+                class="mt-0"
+                hide-details
+                single-line
+                type="number"
+              ></v-text-field>
+            </v-flex>
+          </v-layout>
+          <v-layout row wrap justify-end>
+            <v-btn
+              color="deep-orange lighten-1 white--text"
+              @click="emptyFilters"
+            >
+              Clear<v-icon right>far fa-window-close</v-icon>
+            </v-btn>
+            <v-btn
+              color="secondary lighten-1"
+              @click="runSearch"
+            >
+              Apply<v-icon right>far fa-check-square</v-icon>
+            </v-btn>
+          </v-layout>
+        </v-card-text>
         </v-card>
+      </v-expansion-panel-content>
+      </v-expansion-panel>
+      <!-- Table -->
+      <v-card class="text-xs-center" v-if="!requestDone">
+      <v-progress-circular
+        indeterminate
+        color="secondary"
+        class="ma-2"
+      ></v-progress-circular>
+      </v-card>
+      <v-list v-else>
+      <v-data-table
+        :rows-per-page-items="rowsPerPageItems"
+        :pagination.sync="pagination"
+        :headers="headers"
+        :items="genes"
+        hide-actions
+      >
+        <template v-slot:items="props">
+        <td>
+          <router-link :to="/gene-detail/ + props.item.gene_id">{{ props.item.gene_id }}</router-link>
+        </td>
+        <td>{{ props.item.name }}</td>
+        <td class="text-xs">{{ props.item.length }}</td>
+        <td class="text-xs">
+          {{ props.item.taxonomy }}
+          <v-btn :href="props.item.tax_url" icon flat small target="_blank" class="taxonomy--text mt-1 ml-0" v-if="props.item.taxonomy">
+          <v-icon small>
+            open_in_new
+          </v-icon>
+          </v-btn>
+        </td>
+        <td class="text-xs">
+          {{ props.item.kegg }}
+          <v-btn :href="props.item.kegg_url" icon flat small target="_blank" class="kegg--text mt-1 ml-0" v-if="props.item.kegg">
+          <v-icon small>
+            open_in_new
+          </v-icon>
+          </v-btn>
+        </td>
+        <td class="text-xs">{{ props.item.eggnog }}</td>
+        </template>
+      </v-data-table>
+      </v-list>
+      <v-card class="white" flat>
+      <v-subheader class="text-right">{{count}} genes found</v-subheader>
+      </v-card>
     </v-flex>
-    </v-layout>
+  </v-layout>
 </div>
\ No newline at end of file
diff --git a/frontend/src/views/genes/genes.js b/frontend/src/views/genes/genes.js
index a59278f..88298f3 100644
--- a/frontend/src/views/genes/genes.js
+++ b/frontend/src/views/genes/genes.js
@@ -13,6 +13,7 @@ export default {
       },
       searchGeneName: null,
       taxonomyRank: null,
+      functionID: null,
       requestDone: false,
       filterGeneLength: false,
       geneLengthFilterRange: [0, 2000],
@@ -53,6 +54,9 @@ export default {
       if (this.searchGeneName) {
         qParams.name = this.searchGeneName;
       }
+      if (this.functionID){
+        qParams.function = this.functionID
+      }
       return qParams;
     },
     maxGeneLength() {
@@ -105,6 +109,7 @@ export default {
     },
     emptyFilters() {
       this.taxonomyRank = null;
+      this.functionID = null;
       this.filterGeneLength = false;
       this.geneLengthFilterRange = [0, 2000];
     },
-- 
GitLab