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