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
3e3005c0
Commit
3e3005c0
authored
Jun 28, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
reorganize front content to components and views
parent
7f30478a
Changes
8
Hide whitespace changes
Inline
Side-by-side
frontend/public/index.html
View file @
3e3005c0
...
...
@@ -6,7 +6,7 @@
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0"
>
<link
href=
"https://fonts.googleapis.com/css?family=Material+Icons"
rel=
"stylesheet"
>
<link
rel=
"icon"
href=
"<%= BASE_URL %>favicon.ico"
>
<title>
code
</title>
<title>
MetageneDB
</title>
</head>
<body>
<noscript>
...
...
frontend/src/components/Drawer.vue
View file @
3e3005c0
...
...
@@ -8,7 +8,7 @@
<v-list>
<v-list-tile>
<v-list-tile-title>
Browse
Browse
content
</v-list-tile-title>
</v-list-tile>
</v-list>
...
...
@@ -16,11 +16,12 @@
<v-divider></v-divider>
<v-list
dense
class=
"pt-0"
>
<v-list
class=
"pt-0"
>
<v-list-tile
v-for=
"item in items"
:key=
"item.title"
@
click=
""
router
:to=
"item.route"
active-class=
"secondary"
>
<v-list-tile-action>
<v-icon>
{{
item
.
icon
}}
</v-icon>
...
...
frontend/src/components/Navbar.vue
View file @
3e3005c0
...
...
@@ -31,10 +31,10 @@ export default {
return
{
drawer
:
false
,
items
:
[
{
title
:
'
Home
'
,
icon
:
'
home
'
},
{
title
:
'
Catalog Statistics
'
,
icon
:
'
bar_chart
'
},
{
title
:
'
Genes
'
,
icon
:
'
list
'
},
{
title
:
'
About
'
,
icon
:
'
contact_support
'
},
{
title
:
'
Home
'
,
icon
:
'
home
'
,
route
:
'
/
'
},
{
title
:
'
Catalog Statistics
'
,
icon
:
'
bar_chart
'
,
route
:
'
/catalogstats
'
},
{
title
:
'
Genes
'
,
icon
:
'
list
'
,
route
:
'
/genes
'
},
{
title
:
'
About
'
,
icon
:
'
contact_support
'
,
route
:
'
/about
'
},
],
right
:
null
,
};
...
...
frontend/src/main.js
View file @
3e3005c0
...
...
@@ -9,7 +9,8 @@ import 'vuetify/dist/vuetify.min.css';
Vue
.
config
.
productionTip
=
false
;
Vue
.
use
(
Vuetify
,
{
theme
:
{
primary
:
'
#042630
'
,
primary
:
'
#212836
'
,
secondary
:
'
#677ea3
'
,
},
});
...
...
frontend/src/router.js
View file @
3e3005c0
import
Vue
from
'
vue
'
;
import
Router
from
'
vue-router
'
;
import
Home
from
'
./views/Home.vue
'
;
import
Home
from
'
@/views/Home.vue
'
;
import
Genes
from
'
@/views/Genes.vue
'
;
import
Catalogstats
from
'
@/views/Catalogstats.vue
'
;
Vue
.
use
(
Router
);
...
...
@@ -13,6 +16,16 @@ export default new Router({
name
:
'
home
'
,
component
:
Home
,
},
{
path
:
'
/catalogstats
'
,
name
:
'
catalogstats
'
,
component
:
Catalogstats
,
},
{
path
:
'
/genes
'
,
name
:
'
genes
'
,
component
:
Genes
,
},
{
path
:
'
/about
'
,
name
:
'
about
'
,
...
...
frontend/src/views/Catalogstats.vue
0 → 100644
View file @
3e3005c0
<
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>
</div>
</
template
>
<
script
>
import
Histogram
from
'
@/components/Histogram.vue
'
;
export
default
{
name
:
'
home
'
,
data
()
{
return
{
geneLengthData
:
{},
geneLengthWindowSize
:
10000
,
};
},
mounted
()
{
this
.
fetchGeneLength
(
this
.
geneLengthWindowSize
);
},
methods
:
{
fetchGeneLength
(
geneLengthWindowSize
)
{
fetch
(
'
/catalog/api/gene_length?window_size=
'
.
concat
(
geneLengthWindowSize
),
{
method
:
'
GET
'
,
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
if
(
response
.
ok
)
{
response
.
json
().
then
((
json
)
=>
{
this
.
geneLengthData
=
json
.
data
;
});
}
});
},
},
components
:
{
histogram
:
Histogram
},
};
</
script
>
frontend/src/views/Genes.vue
View file @
3e3005c0
<
template
>
<div
class=
"about"
>
<h1>
This is an about page
</h1>
<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>
</div>
</
template
>
<
script
>
export
default
{
name
:
'
genes
'
,
data
()
{
return
{
genes
:
[],
count
:
0
,
};
},
mounted
()
{
this
.
fetchGenes
();
},
methods
:
{
fetchGenes
()
{
fetch
(
'
/catalog/api/genes/
'
,
{
method
:
'
GET
'
,
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
if
(
response
.
ok
)
{
response
.
json
().
then
((
json
)
=>
{
this
.
genes
=
json
.
data
;
this
.
count
=
json
.
count
;
});
}
});
},
},
};
</
script
>
frontend/src/views/Home.vue
View file @
3e3005c0
<
template
>
<div
class=
"jumbotron"
>
<h3>
Genes
</h3>
<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>
<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>
</div>
<h1>
Welcome!
</h1>
</
template
>
<
script
>
import
Histogram
from
'
../components/Histogram.vue
'
;
export
default
{
name
:
'
home
'
,
data
()
{
return
{
genes
:
[],
count
:
0
,
geneLengthData
:
{},
geneLengthWindowSize
:
10000
,
};
},
mounted
()
{
this
.
fetchGenes
();
this
.
fetchGeneLength
(
this
.
geneLengthWindowSize
);
},
methods
:
{
fetchGenes
()
{
fetch
(
'
/catalog/api/genes/
'
,
{
method
:
'
GET
'
,
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
if
(
response
.
ok
)
{
response
.
json
().
then
((
json
)
=>
{
this
.
genes
=
json
.
data
;
this
.
count
=
json
.
count
;
});
}
});
},
fetchGeneLength
(
geneLengthWindowSize
)
{
fetch
(
'
/catalog/api/gene_length?window_size=
'
.
concat
(
geneLengthWindowSize
),
{
method
:
'
GET
'
,
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
if
(
response
.
ok
)
{
response
.
json
().
then
((
json
)
=>
{
this
.
geneLengthData
=
json
.
data
;
});
}
});
},
},
components
:
{
histogram
:
Histogram
},
};
</
script
>
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