Skip to content
Snippets Groups Projects

Filter gene on a given KEGG or EggNOG ID of gene list

Merged Filter gene on a given KEGG or EggNOG ID of gene list
105-filter-on-kegg-KO into dev
Merged Kenzo-Hugo Hillion requested to merge 105-filter-on-kegg-KO into dev
Compare
and
4 files
+ 275
− 1
Compare changes
  • Side-by-side
  • Inline
Files
4
frontend/src/views/genes/genes.html 0 → 100644
+ 151
− 0
 
<div class="genes">
 
<v-layout row wrap>
 
<v-flex xs12>
 
<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>
 
<!-- 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>
 
</div>
 
\ No newline at end of file