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
87cb9d53
Commit
87cb9d53
authored
Nov 29, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
add statistics about annotation
parent
8bfe6c63
Pipeline
#19071
passed with stages
in 2 minutes and 22 seconds
Changes
5
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/package-lock.json
View file @
87cb9d53
...
...
@@ -4589,6 +4589,11 @@
"integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=",
"dev": true
},
"d3-format": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.2.tgz",
"integrity": "sha512-gco1Ih54PgMsyIXgttLxEhNy/mXxq8+rLnCb5shQk+P5TsiySrwWU5gpB4zen626J4LIwBxHvDChyA8qDm57ww=="
},
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
...
...
frontend/package.json
View file @
87cb9d53
...
...
@@ -13,6 +13,7 @@
"axios"
:
"^0.19.0"
,
"chart.js"
:
"^2.8.0"
,
"core-js"
:
"^2.6.5"
,
"d3-format"
:
"^1.4.2"
,
"element-ui"
:
"^2.10.0"
,
"register-service-worker"
:
"^1.6.2"
,
"vue"
:
"^2.6.10"
,
...
...
frontend/src/components/CountCard.vue
0 → 100644
View file @
87cb9d53
<
template
>
<v-flex
xs6
sm4
md2
xl1
>
<v-card
:color=
"count.class"
dark
class=
"elevation-2"
>
<v-card-title
primary-title
>
<div
v-if=
"count.text"
>
<div
class=
"blue-grey--text text--lighten-5 subheading font-weight-thin mb-1"
>
{{
count
.
title
}}
</div>
<div
class=
"display-1 font-weight-medium"
>
{{
count
.
text
}}
</div>
</div>
<div
v-else
class=
"text-xs-center"
>
<v-progress-circular
indeterminate
color=
"secondary"
></v-progress-circular>
</div>
</v-card-title>
</v-card>
</v-flex>
</
template
>
<
script
>
export
default
{
props
:
{
count
:
{
type
:
Object
,
required
:
true
,
},
},
};
</
script
>
frontend/src/components/Histogram.vue
View file @
87cb9d53
<
template
>
<v-flex
xs12
md6
>
<v-flex
xs12
md6
xl4
>
<v-toolbar
:class=
"
geneLength
Data.class"
:class=
"
histo
Data.class"
dark
v-if=
"
geneLength
Data.data"
v-if=
"
histo
Data.data"
>
<v-icon
class=
"white--text"
>
{{
geneLength
Data
.
icon
}}
</v-icon>
<v-toolbar-title>
{{
geneLength
Data
.
title
}}
</v-toolbar-title>
<v-icon
class=
"white--text"
>
{{
histo
Data
.
icon
}}
</v-icon>
<v-toolbar-title>
{{
histo
Data
.
title
}}
</v-toolbar-title>
</v-toolbar>
<v-card
class=
"pa-2"
>
<div
class=
"card-body"
>
<div
v-if=
"
geneLength
Data.data"
>
<canvas
:id=
"
geneLength
Data.chart_id"
></canvas>
<div
v-if=
"
histo
Data.data"
>
<canvas
:id=
"
histo
Data.chart_id"
></canvas>
</div>
<div
class=
"text-xs-center"
v-else
>
<v-progress-circular
...
...
@@ -29,25 +29,25 @@ import Chart from 'chart.js';
export
default
{
props
:
{
geneLength
Data
:
{
histo
Data
:
{
type
:
Object
,
required
:
true
,
},
},
updated
()
{
this
.
createChart
(
this
.
geneLength
Data
.
chart_id
);
this
.
createChart
(
this
.
histo
Data
.
chart_id
);
},
methods
:
{
createChart
(
chartId
)
{
const
ctx
=
document
.
getElementById
(
chartId
);
const
histoData
=
{
labels
:
this
.
geneLength
Data
.
labels
,
labels
:
this
.
histo
Data
.
labels
,
datasets
:
[
{
label
:
this
.
geneLength
Data
.
label
,
data
:
this
.
geneLength
Data
.
data
,
borderColor
:
this
.
geneLength
Data
.
bordelColor
,
backgroundColor
:
this
.
geneLength
Data
.
backgroundColor
,
label
:
this
.
histo
Data
.
label
,
data
:
this
.
histo
Data
.
data
,
borderColor
:
this
.
histo
Data
.
bordelColor
,
backgroundColor
:
this
.
histo
Data
.
backgroundColor
,
},
],
};
...
...
frontend/src/views/Stats.vue
View file @
87cb9d53
...
...
@@ -5,7 +5,7 @@
<v-btn
dark
icon
>
<v-icon>
list_alt
</v-icon>
</v-btn>
<v-toolbar-title>
Gene details:
{{
gene_id
}}
</v-toolbar-title>
<v-toolbar-title>
Catalog Statistics
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
dark
icon
>
<v-icon>
search
</v-icon>
...
...
@@ -18,8 +18,13 @@
grid-list-md
>
<v-layout
row
wrap
>
<histogram
:geneLengthData=
"geneLengthData"
></histogram>
<histogram
:geneLengthData=
"geneLengthDataOther"
></histogram>
<countcard
:count=
"geneCountAll"
></countcard>
<countcard
:count=
"geneCountFunctions"
></countcard>
<countcard
:count=
"geneCountTaxo"
></countcard>
<countcard
:count=
"geneCountFull"
></countcard>
</v-layout>
<v-layout
row
wrap
>
<histogram
:histoData=
"geneLengthData"
></histogram>
</v-layout>
</v-container>
</v-card>
...
...
@@ -31,24 +36,34 @@
<
script
>
import
axios
from
'
axios
'
;
import
Histogram
from
'
@/components/Histogram.vue
'
;
import
CountCard
from
'
@/components/CountCard.vue
'
;
export
default
{
name
:
'
home
'
,
data
()
{
return
{
geneLengthData
:
{},
geneLengthDataOther
:
{},
geneLengthWindowSize
:
1000
,
geneCountAll
:
{},
geneCountFunctions
:
{},
geneCountTaxo
:
{},
geneCountFull
:
{},
geneLengthWindowSize
:
400
,
stopAt
:
5000
,
};
},
mounted
()
{
this
.
getGeneLength
(
this
.
geneLengthWindowSize
);
this
.
getGeneLength
(
this
.
geneLengthWindowSize
,
this
.
stopAt
);
this
.
getGeneCountsAll
();
this
.
getGeneCountsFunctions
();
this
.
getGeneCountsTaxo
();
this
.
getGeneCountsFull
();
},
methods
:
{
getGeneLength
(
geneLengthWindowSize
)
{
getGeneLength
(
geneLengthWindowSize
,
stopAt
)
{
axios
.
get
(
'
/api/catalog/v1/genes/gene_length
'
,
{
params
:
{
'
window_size
'
:
geneLengthWindowSize
,
'
stop_at
'
:
stopAt
,
},
headers
:
{
Accept
:
'
application/json
'
,
...
...
@@ -66,23 +81,97 @@ export default {
class
:
"
secondary
"
,
icon
:
"
bar_chart
"
,
};
this
.
geneLengthDataOther
=
{
chart_id
:
"
histo2
"
,
data
:
response
.
data
.
results
.
counts
,
labels
:
response
.
data
.
results
.
labels
,
title
:
"
Gene length distribution
"
,
label
:
"
Number of genes
"
,
borderColor
:
'
#aab183
'
,
backgroundColor
:
'
#faa152
'
,
class
:
"
genefunction
"
,
icon
:
"
graphic_eq
"
,
})
.
catch
((
error
)
=>
{
console
.
log
(
error
);
});
},
getGeneCountsAll
()
{
axios
.
get
(
'
/api/catalog/v1/genes
'
,
{
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
this
.
geneCountAll
=
{
class
:
"
secondary
"
,
icon
:
"
bar_chart
"
,
text
:
response
.
data
.
count
,
title
:
"
Genes
"
,
};
})
.
catch
((
error
)
=>
{
console
.
log
(
error
);
});
},
getGeneCountsFunctions
()
{
axios
.
get
(
'
/api/catalog/v1/genes
'
,
{
params
:
{
no_functions
:
false
,
},
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
this
.
geneCountFunctions
=
{
class
:
"
secondary
"
,
icon
:
"
bar_chart
"
,
text
:
response
.
data
.
count
,
title
:
"
Functions annotation
"
,
};
})
.
catch
((
error
)
=>
{
console
.
log
(
error
);
});
},
getGeneCountsTaxo
()
{
axios
.
get
(
'
/api/catalog/v1/genes
'
,
{
params
:
{
no_taxonomy
:
false
,
},
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
this
.
geneCountTaxo
=
{
class
:
"
secondary
"
,
icon
:
"
bar_chart
"
,
text
:
response
.
data
.
count
,
title
:
"
Taxonomy Annotation
"
,
};
})
.
catch
((
error
)
=>
{
console
.
log
(
error
);
});
},
getGeneCountsFull
()
{
axios
.
get
(
'
/api/catalog/v1/genes
'
,
{
params
:
{
no_functions
:
false
,
no_taxonomy
:
false
,
},
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
this
.
geneCountFull
=
{
class
:
"
secondary
"
,
icon
:
"
bar_chart
"
,
text
:
response
.
data
.
count
,
title
:
"
Full annotation
"
,
};
})
.
catch
((
error
)
=>
{
console
.
log
(
error
);
});
},
},
components
:
{
histogram
:
Histogram
,
countcard
:
CountCard
,
},
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