Skip to content
Snippets Groups Projects
Commit 08d2a370 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion :recycle:
Browse files

refacto genes.vue

parent 2d52654e
No related branches found
No related tags found
2 merge requests!59Prod,!42Filter gene on a given KEGG or EggNOG ID of gene list
Hide whitespace changes
Inline Side-by-side
frontend/src/router.js
+ 1
− 1
View file @ 08d2a370
...@@ -3,7 +3,7 @@ import Router from 'vue-router'; ...@@ -3,7 +3,7 @@ import Router from 'vue-router';
import Home from '@/views/Home.vue'; import Home from '@/views/Home.vue';
import GeneDetail from '@/views/GeneDetail.vue'; import GeneDetail from '@/views/GeneDetail.vue';
import Genes from '@/views/Genes.vue'; import Genes from '@/views/genes/genes.vue';
import Catalogstats from '@/views/Stats.vue'; import Catalogstats from '@/views/Stats.vue';
Vue.use(Router); Vue.use(Router);
......
frontend/src/views/genes/genes.html 0 → 100644
+ 151
− 0
View file @ 08d2a370
<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>
<!-- 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-card>
</v-flex>
</v-layout>
</div>
\ No newline at end of file
frontend/src/views/Genes.vue → frontend/src/views/genes/genes.js
+ 116
− 0
View file @ 08d2a370
<template>
<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>
<v-flex xs12 sm6 md4 lg2 d-flex>
<v-select
:items="taxonomyRanks"
v-model="taxonomyRank"
label="Taxonomy rank"
></v-select>
</v-flex>
<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-card>
</v-flex>
</v-layout>
</div>
</template>
<script>
import axios from 'axios'; import axios from 'axios';
export default { export default {
...@@ -258,5 +113,4 @@ export default { ...@@ -258,5 +113,4 @@ export default {
this.getGenes(); this.getGenes();
}, },
}, },
}; };
</script> \ No newline at end of file
frontend/src/views/genes/genes.vue 0 → 100644
+ 2
− 0
View file @ 08d2a370
<template src="./genes.html" lang="html"></template>
<script src="./genes.js" lang="js"></script>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment