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

Merge branch '132-about-page' into 'dev'

About and Home pages

Closes #132 and #131

See merge request !55
parents 8424100a 62dac7d6
Pipeline #32004 passed with stages
in 3 minutes and 7 seconds
......@@ -9,7 +9,11 @@
</v-content>
<v-footer class="pa-3">
<v-spacer></v-spacer>
<div>Metagenomics Signature group, Institut Pasteur. <span class="font-italic font-weight-light">This work is founded by <a target="_blank" href="https://www.bpifrance.fr/">bpifrance</a></span></div>
<div>
Metagenomics Signature group, Institut Pasteur.
<span class="font-italic font-weight-light">Work founded by <a target="_blank" href="https://www.bpifrance.fr/">bpifrance</a></span>.
<span class="font-italic font-weight-light">Icons from <a target="_blank" href="https://fontawesome.com/license">fontawesome</a></span>.
</div>
<v-spacer></v-spacer>
<span class="font-weight-light"><a :href="commitURL" target="_blank">{{commitHash}}</a></span>
</v-footer>
......@@ -36,7 +40,7 @@ export default {
},
baseTitle() {
return process.env.VUE_APP_TITLE;
}
},
},
created () {
document.title = this.baseTitle;
......
......@@ -2,23 +2,28 @@
<v-navigation-drawer
v-bind:value="value"
v-on:input="$emit('input', $event)"
app width=200 class="primary" dark
app width=220 class="primary" dark
>
<v-toolbar flat class="primary">
<v-list>
<v-list-tile>
<v-list-tile router to="/" active-class="secondary" key="home">
<v-list-tile-action>
<v-icon>fas fa-database</v-icon>
</v-list-tile-action>
<v-list-tile-title>
Browse content
<span class="font-weight-light">Metagene</span>
<span>DB</span>
<span class="font-weight-light"></span>
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-toolbar>
<v-divider></v-divider>
<v-list class="pt-0">
<!-- Main menu -->
<v-list>
<v-list-tile
v-for="item in items"
v-for="item in menuMain"
:key="item.title"
router :to="item.route"
active-class="secondary"
......@@ -26,7 +31,24 @@
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<!-- Secondary menu -->
<v-list>
<v-list-tile
v-for="item in menuSec"
:key="item.title"
router :to="item.route"
active-class="secondary"
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
......@@ -38,7 +60,11 @@
<script>
export default {
props: {
items: {
menuMain: {
type: Array,
required: true,
},
menuSec: {
type: Array,
required: true,
},
......
<template>
<nav>
<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>
......@@ -14,7 +15,7 @@
</v-btn>
</v-toolbar>
<Drawer :items="items" v-model="drawer"/>
<Drawer :menuMain="menuMain" :menuSec="menuSec" v-model="drawer"/>
</nav>
</template>
......@@ -27,16 +28,24 @@ export default {
components: { Drawer, Help },
data() {
return {
drawer: false,
items: [
{ title: 'Home', icon: 'fa-home', route: '/' },
{ title: 'Catalog Statistics', icon: 'far fa-chart-bar', route: '/stats' },
{ title: 'Compare Taxonomy', icon: 'far fa-clone', route: '/compare' },
{ title: 'Genes', icon: 'format_list_bulleted', route: '/genes' },
{ title: 'About', icon: 'contact_support', route: '/about' },
],
drawer: true,
right: null,
};
},
computed: {
menuMain() {
return [
{ title: 'Catalog Statistics', icon: 'far fa-chart-bar', route: '/stats' },
{ title: 'Compare Taxonomy', icon: 'far fa-clone', route: '/compare' },
{ title: 'List genes', icon: 'format_list_bulleted', route: '/genes' },
];
},
menuSec() {
return [
{ title: 'About', icon: 'contact_support', route: '/about' },
{ title: 'Contact us', icon: 'fas fa-address-book'}
];
},
}
};
</script>
<div class="logos">
<v-container fluid grid-list-md>
<v-layout wrap row align-center justify-center>
<v-flex v-for="item in mediumLogos"
sm12 md4 lg3 xl2
>
<v-img
:src="item.src"
:alt="item.alt"
/>
</v-flex>
<v-flex v-for="item in smallLogos"
sm6 md2 lg1
>
<v-img
:src="item.src"
:alt="item.alt"
/>
</v-flex>
</v-layout>
</v-container>
</div>
\ No newline at end of file
export default {
computed: {
pasteurLogo() {
return {
'src': require("/app/public/img/logos/pasteur.png"),
'alt': 'Institut Pasteur'
};
},
bpiLogo() {
return {
'src': require("/app/public/img/logos/bpifrance.png"),
'alt': 'BPI France'
}
},
elvesysLogo() {
return {
'src': require("/app/public/img/logos/elvesys.png"),
'alt': 'Elvesys'
}
},
riskInPregnancyLogo() {
return {
'src': require("/app/public/img/logos/riskinpregnancy.png"),
'alt': 'Risk in Pregnancy'
}
},
aphpLogo() {
return {
'src': require("/app/public/img/logos/aphp.png"),
'alt': 'APHP'
}
},
insermLogo() {
return {
'src': require("/app/public/img/logos/inserm.png"),
'alt': 'Inserm'
}
},
uniParisLogo() {
return {
'src': require("/app/public/img/logos/uniparis.png"),
'alt': 'Université de Paris'
}
},
mediumLogos() {
return [
this.pasteurLogo,
this.aphpLogo,
this.elvesysLogo,
this.uniParisLogo,
this.insermLogo,
]
},
smallLogos() {
return [
this.riskInPregnancyLogo,
this.bpiLogo,
]
}
}
}
\ No newline at end of file
<template src="./logos.html" lang="html"></template>
<script src="./logos.js" lang="js"></script>
\ No newline at end of file
......@@ -8,6 +8,8 @@ import 'vuetify/dist/vuetify.min.css';
import './assets/styles/fonts.css';
import '@fortawesome/fontawesome-free/css/all.css';
var pouet = 2;
Vue.config.productionTip = false;
Vue.use(Vuetify, {
iconfont: 'fa',
......
<div class="about">
<h1>This is an about page</h1>
<v-toolbar class="secondary darken-1 white--text" dense>
<v-icon class="white--text">contact_support</v-icon>
<v-toolbar-title>About</v-toolbar-title>
</v-toolbar>
<v-card>
<v-timeline>
<v-timeline-item
color="primary"
large
>
<template v-slot:opposite>
<span class="title">The MetageneDB project</span>
</template>
<v-card class="elevation-2 ma-4">
<v-card-text class="text-xs-justify">
<v-container class="pa-0">
<p>
This work is lead by the <a href="https://research.pasteur.fr/en/department/computational-biology/">Metagenomics Signature group</a>
at <a href="https://research.pasteur.fr/en">Institut Pasteur</a> and is part of the InSPIRe project.
</p>
Our main motivation is to provide a support for all the analysis that are based on gene catalogs.
</v-container>
</v-card-text>
</v-card>
</v-timeline-item>
<v-timeline-item
color="primary lighten-2"
right
>
<template v-slot:opposite>
<span class="subheading">Architecture overview</span>
</template>
<v-card class="pa-2 elevation-2 ma-4">
<v-img :src="archiImg"/></v-flex>
</v-card>
</v-timeline-item>
<v-timeline-item
color="primary lighten-2"
small
>
<template v-slot:opposite>
<span class="subheading">Technical details</span>
</template>
<v-card class="ma-0 elevation-2 ma-4">
<v-card-text>
<v-container class="pa-0">
<v-list subheader>
<v-list-tile
v-for="item in techStack"
avatar
:href="item.url"
target="_blank"
>
<v-list-tile-action>
<v-icon :color="item.color">{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-container>
</v-card-text>
</v-card>
</v-timeline-item>
<v-timeline-item
color="secondary"
large
>
<template v-slot:opposite>
<span class="title">The InSPIRe project</span>
</template>
<v-card class="elevation-2 ma-4">
<v-card-text class="text-xs-justify">
<v-container class="pa-0">
<p>
The <b>In</b>novative <b>S</b>trategies for <b>P</b>erinatal <b>I</b>nfection Risk-<b>Re</b>duction project is coordinated by Elvesys, INSERM, Institut Pasteur and APHP.</br>
</p>
The clinical aspect of the study is based on a large cohort of mother/child and aims to identify the main germs and the best biomarkers from the vaginal flora to predict neonatal infections.
</v-container>
</v-card-text>
</v-card>
</v-timeline-item>
</v-timeline>
</v-card>
<!-- Logos -->
<logos/>
</div>
\ No newline at end of file
import Logos from '@/components/logos/logos.vue';
export default {
computed: {
techStack() {
return [
{
icon: "fas fa-database",
title: "PostgreSQL",
subtitle: "Database",
url: "https://www.postgresql.org/",
color: "tertiary",
},
{
icon: "fab fa-python",
title: "Django",
subtitle: "Backend - ORM",
url: "https://www.djangoproject.com/",
color: "kegg",
},
{
icon: "fab fa-python",
title: "Django REST framework",
subtitle: "Backend - API",
url: "https://www.django-rest-framework.org/",
color: "kegg",
},
{
icon: "fab fa-vuejs",
title: "Vue.js",
subtitle: "Frontend",
url: "https://vuejs.org/",
color: "green",
},
{
icon: "fab fa-docker",
title: "Docker Compose",
subtitle: "Local development environment",
url: "https://docs.docker.com/compose/",
color: 'tertiary',
},
{
icon: "fab fa-docker",
title: "Kubernetes",
subtitle: "Production environment",
url: "https://kubernetes.io/",
color: 'tertiary',
},
]
},
archiImg() {
return require("/app/public/img/archi.png")
}
},
components: {
logos: Logos,
},
}
\ No newline at end of file
<div class="compare">
<v-flex>
<v-toolbar class="secondary darken-1 white--text" dense>
<v-icon class="white--text">far fa-clone</v-icon>
<v-toolbar-title>Taxonomy comparison</v-toolbar-title>
<v-spacer/>
<v-flex xs3 md2>
<v-select
dark
:items="selectLevel"
v-model="taxLevel"
color="taxonomy ligthen-1"
@change="getAllStats"
></v-select>
</v-flex>
</v-toolbar>
<v-toolbar class="secondary darken-1 white--text" dense>
<v-icon class="white--text">far fa-clone</v-icon>
<v-toolbar-title>Taxonomy comparison</v-toolbar-title>
<v-spacer/>
<v-flex xs3 md2>
<v-select
dark
:items="selectLevel"
v-model="taxLevel"
color="taxonomy ligthen-1"
@change="getAllStats"
></v-select>
</v-flex>
</v-toolbar>
<v-card>
<v-container
fluid
grid-list-md
>
<v-layout row wrap class="mt-2">
<!-- First Doughnut -->
<v-flex md6>
<v-toolbar
class="taxonomy"
<v-card>
<v-container
fluid
grid-list-md
>
<v-layout row wrap class="mt-2">
<!-- First Doughnut -->
<v-flex md6>
<v-toolbar
class="taxonomy"
dark
dense
>
<v-icon class="white--text">fa-sitemap</v-icon>
<v-toolbar-title>{{firstGeneSource}} <span class="font-weight-thin">- {{firstGeneCounts}} genes</span></v-toolbar-title>
<v-spacer></v-spacer>
<v-flex xs12 sm6 md4 lg2 d-flex>
<v-select
dark
dense
>
<v-icon class="white--text">fa-sitemap</v-icon>
<v-toolbar-title>{{firstGeneSource}} <span class="font-weight-thin">- {{firstGeneCounts}} genes</span></v-toolbar-title>
<v-spacer></v-spacer>
<v-flex xs12 sm6 md4 lg2 d-flex>
<v-select
dark
:items="geneSources"
v-model="firstGeneSource"
@change="getAllFirstStats"
></v-select>
</v-flex>
</v-toolbar>
<doughnut :doughnutData="firstTaxoCounts" chartId="first_taxo_annotation"></doughnut>
:items="geneSources"
v-model="firstGeneSource"
@change="getAllFirstStats"
></v-select>
</v-flex>
<!-- Second Doughnut -->
<v-flex md6>
<v-toolbar
class="taxonomy"
</v-toolbar>
<doughnut :doughnutData="firstTaxoCounts" chartId="first_taxo_annotation"></doughnut>
</v-flex>
<!-- Second Doughnut -->
<v-flex md6>
<v-toolbar
class="taxonomy"
dark
dense
>
<v-icon class="white--text">fa-sitemap</v-icon>
<v-toolbar-title>{{secondGeneSource}} <span class="font-weight-thin">- {{secondGeneCounts}} genes</span></v-toolbar-title>
<v-spacer></v-spacer>
<v-flex xs12 sm6 md4 lg2 d-flex>
<v-select
dark
dense
>
<v-icon class="white--text">fa-sitemap</v-icon>
<v-toolbar-title>{{secondGeneSource}} <span class="font-weight-thin">- {{secondGeneCounts}} genes</span></v-toolbar-title>
<v-spacer></v-spacer>
<v-flex xs12 sm6 md4 lg2 d-flex>
<v-select
dark
:items="geneSources"
v-model="secondGeneSource"
@change="getAllSecondStats"
></v-select>
</v-flex>
</v-toolbar>
<doughnut :doughnutData="secondTaxoCounts" chartId="second_taxo_annotation"></doughnut>
:items="geneSources"
v-model="secondGeneSource"
@change="getAllSecondStats"
></v-select>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-flex>
</div>
\ No newline at end of file
</v-toolbar>
<doughnut :doughnutData="secondTaxoCounts" chartId="second_taxo_annotation"></doughnut>
</v-flex>
</v-layout>
</v-container>
</v-card>
</div>
\ No newline at end of file
<div class="home">
<v-toolbar class="secondary darken-1 white--text" dense>
<v-icon class="white--text">fa-home</v-icon>
<v-toolbar-title>Home</v-toolbar-title>
</v-toolbar>
<v-card>
<v-container fluid>
<v-layout wrap align-center>
<v-flex sm12 md6 class="mr-4">
<v-toolbar class="primary lighten-1 white--text" dense>
<v-toolbar-title>Welcome to MetageneDB</v-toolbar-title>
</v-toolbar>
<v-card>
<v-card-text>
<v-container class="pa-0 text-xs-justify">
<p>
<b>MetageneDB</b> supports metagenomic gene catalogs by easing their use and providing an intuitive interface to browse and visualize their content.</br>
</p>
The backend server also exposes an API that can be requested to obtain annotations about a given gene and its documentation can be found
<a href="/api/swagger" target="_blank">here</a>.
</v-container>
</v-card-text>
</v-card>
</v-flex>
<v-flex md5 class="ml-4">
<!-- <v-container fluid> -->
<v-layout wrap justify-space-between>
<v-flex
v-for="item in menu"
md6
class="px-2"
>
<v-btn :to="item.route" large block class="primary lighten-1">
<v-layout align-center>
<v-icon>{{ item.icon }}</v-icon>
<v-spacer/>
<span class="body-2">{{ item.title }}</span>
<v-spacer/>
</v-layout>
</v-btn>
</v-flex>
</v-layout>
<!-- </v-container> -->
</v-flex>
</v-layout>
</v-container>
</v-card>
<!-- Logos -->
<logos/>
</div>
\ No newline at end of file
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