Commit cfe82121 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion
Browse files

continue improving frontend for discussion

parent 23bb1f90
Pipeline #12960 passed with stage
in 1 minute and 17 seconds
......@@ -2,7 +2,7 @@
<v-app>
<Navbar/>
<v-content>
<v-content class="ma-3">
<router-view></router-view>
</v-content>
</v-app>
......
<template>
<div v-if="geneLengthData.counts" id="app">
<div v-if="geneLengthData.counts">
<canvas id="histogram"></canvas>
</div>
</template>
......@@ -26,6 +26,8 @@ export default {
{
label: 'Number of genes',
data: this.geneLengthData.counts,
borderColor: '#edb183',
backgroundColor: '#f15152',
},
],
};
......
<template>
<nav>
<v-toolbar flat app dark height="50" class="primary">
<v-toolbar flat app dark height="40" class="primary">
<v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="headline">
<span class="font-weight-light">Metagene</span>
......
......@@ -9,8 +9,8 @@ import 'vuetify/dist/vuetify.min.css';
Vue.config.productionTip = false;
Vue.use(Vuetify, {
theme: {
primary: '#212836',
secondary: '#677ea3',
primary: '#263238',
secondary: '#508991',
},
});
......
<template>
<div class="catalogstats">
<h1>Statistics</h1>
<div class="card">
<div class="card-header">
Gene length distribution
</div>
<div class="card-body">
<histogram v-bind:geneLengthData="geneLengthData"></histogram>
<label for="geneLengthWindowSize">Gene size window</label>
<input type="range" class="custom-range" min="200" max="10000" step="200"
v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)"
debounce="500">
{{geneLengthWindowSize}}
</div>
</div>
<h1 class="subheading primary--text">Statistics</h1>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 md6>
<v-toolbar
class="secondary"
dark
>
<v-toolbar-title>Gene length distribution</v-toolbar-title>
</v-toolbar>
<v-card class="pa-2">
<div class="card-body">
<histogram v-bind:geneLengthData="geneLengthData"></histogram>
<!-- <label for="geneLengthWindowSize">Gene size window</label>
<input type="range" class="custom-range" min="200" max="10000" step="200"
v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)"
debounce="500">
{{geneLengthWindowSize}} -->
</div>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
......
<template>
<div class="genes">
<h1>Genes</h1>
<p>
The catalog currently contains
<span class="badge badge-secondary"> {{ count }} </span>
genes.
</p>
<div v-for="(gene, i) in genes" :key="i">
<h4>{{ gene.gene_id }}</h4>
<p>Gene length: {{ gene.gene_length }} {{ gene.functions }}</p>
</div>
<h1 class="subheading primary--text">Genes</h1>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12>
<v-toolbar
class="secondary"
dark
>
<v-toolbar-title>Catalog content</v-toolbar-title>
</v-toolbar>
<v-list>
<v-subheader>
<p><span class="badge badge-secondary"> {{ count }} </span> genes in the calalog.</p>
</v-subheader>
<v-data-table
:headers="headers"
:items="genes"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.gene_id }}</td>
<td class="text-xs-right">{{ props.item.gene_length }}</td>
<td class="text-xs-right">{{ props.item.functions[0] }}</td>
</template>
</v-data-table>
</v-list>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
......@@ -20,6 +43,16 @@ export default {
return {
genes: [],
count: 0,
headers: [
{
text: 'Gene name',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Length', value: 'gene_length' },
{ text: 'Functions', value: 'functions', align: 'right', },
]
};
},
mounted() {
......
Supports Markdown
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