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