Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Metagenomics
metagenedb
Commits
cfe82121
Commit
cfe82121
authored
Jul 01, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
continue improving frontend for discussion
parent
23bb1f90
Pipeline
#12960
passed with stage
in 1 minute and 17 seconds
Changes
6
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/App.vue
View file @
cfe82121
...
...
@@ -2,7 +2,7 @@
<v-app>
<Navbar/>
<v-content>
<v-content
class=
"ma-3"
>
<router-view></router-view>
</v-content>
</v-app>
...
...
frontend/src/components/Histogram.vue
View file @
cfe82121
<
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
'
,
},
],
};
...
...
frontend/src/components/Navbar.vue
View file @
cfe82121
<
template
>
<nav>
<v-toolbar
flat
app
dark
height=
"
5
0"
class=
"primary"
>
<v-toolbar
flat
app
dark
height=
"
4
0"
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>
...
...
frontend/src/main.js
View file @
cfe82121
...
...
@@ -9,8 +9,8 @@ import 'vuetify/dist/vuetify.min.css';
Vue
.
config
.
productionTip
=
false
;
Vue
.
use
(
Vuetify
,
{
theme
:
{
primary
:
'
#2
12836
'
,
secondary
:
'
#
677ea3
'
,
primary
:
'
#2
63238
'
,
secondary
:
'
#
508991
'
,
},
});
...
...
frontend/src/views/Catalogstats.vue
View file @
cfe82121
<
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
>
...
...
frontend/src/views/Genes.vue
View file @
cfe82121
<
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
()
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment