Skip to content
GitLab
Menu
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
fb873d72
Commit
fb873d72
authored
Jun 25, 2020
by
Kenzo-Hugo Hillion
♻
Browse files
refactor and handle no data in components #135
parent
28ac30ab
Pipeline
#32919
passed with stages
in 3 minutes and 41 seconds
Changes
15
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/CountCard.vue
deleted
100644 → 0
View file @
28ac30ab
<
template
>
<v-flex
xs6
sm4
lg2
>
<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/countcard/countcard.html
0 → 100644
View file @
fb873d72
<v-flex
xs6
sm4
lg2
>
<v-card
:color=
"color"
dark
class=
"elevation-2"
>
<v-card-title
primary-title
>
<div
v-if=
"text"
>
<div
class=
"blue-grey--text text--lighten-5 subheading font-weight-thin mb-1"
>
{{ title }}
</div>
<div
class=
"display-1 font-weight-medium"
>
{{ text }}
</div>
</div>
<div
v-else
class=
"align-xs-center"
>
<v-progress-circular
indeterminate
color=
"secondary"
></v-progress-circular>
</div>
</v-card-title>
</v-card>
</v-flex>
\ No newline at end of file
frontend/src/components/countcard/countcard.js
0 → 100644
View file @
fb873d72
export
default
{
props
:
{
title
:
{
type
:
String
,
required
:
true
,
},
text
:
String
,
color
:
{
type
:
String
,
required
:
true
,
},
},
};
\ No newline at end of file
frontend/src/components/countcard/countcard.vue
0 → 100644
View file @
fb873d72
<
template
src=
"./countcard.html"
lang=
"html"
></
template
>
<
script
src=
"./countcard.js"
lang=
"hs"
></
script
>
\ No newline at end of file
frontend/src/components/graphs/doughnut/doughnut.html
0 → 100644
View file @
fb873d72
<v-card
class=
"pa-2"
>
<div
class=
"card-body"
>
<div
class=
"text-xs-center"
v-if=
"!requestDone && noGraph"
>
<v-progress-circular
indeterminate
color=
"secondary"
></v-progress-circular>
</div>
<v-alert
v-else-if=
"requestDone && noGraph"
:value=
"requestDone && noGraph"
type=
"warning"
class=
"text-xs-center"
>
Could not retrieve data from the server.
</v-alert>
<div>
<canvas
:id=
"chartId"
></canvas>
</div>
<v-layout
class=
"mx-2"
justify-space-between
row
wrap
>
<v-flex
md2
>
<v-switch
color=
"secondary"
v-model=
"hideLegend"
label=
"Hide legend"
@
change=
"updateChartOptions"
>
</v-switch>
</v-flex>
<v-flex
sm6
md4
v-if=
"hideLegend === false"
>
<v-radio-group
row
v-model=
"legendPosition"
@
change=
"updateChartOptions"
>
<template
v-slot:label
>
<div>
Position:
</div>
</template>
<v-radio
color=
"secondary"
v-for=
"n in ['top', 'right']"
:key=
"n"
:label=
"`${n}`"
:value=
"n"
></v-radio>
</v-radio-group>
</v-flex>
<v-flex
sm12
md6
>
<v-select
v-model=
"hideLabels"
:items=
"this.labels"
attach
chips
:label=
"hideLabelsLabel"
multiple
clearable
@
change=
"updateChartData"
></v-select>
</v-flex>
</v-layout>
</div>
</v-card>
\ No newline at end of file
frontend/src/components/
D
oughnut.
vue
→
frontend/src/components/
graphs/doughnut/d
oughnut.
js
View file @
fb873d72
<
template
>
<v-card
class=
"pa-2"
>
<div
class=
"card-body"
>
<div
class=
"text-xs-center"
v-if=
"noGraph"
>
<v-progress-circular
indeterminate
color=
"secondary"
></v-progress-circular>
</div>
<div>
<canvas
:id=
"chartId"
></canvas>
</div>
<v-layout
class=
"mx-2"
justify-space-between
row
wrap
>
<v-flex
md2
>
<v-switch
color=
"secondary"
v-model=
"hideLegend"
label=
"Hide legend"
@
change=
"updateChartOptions"
>
</v-switch>
</v-flex>
<v-flex
sm6
md4
v-if=
"hideLegend === false"
>
<v-radio-group
row
v-model=
"legendPosition"
@
change=
"updateChartOptions"
>
<template
v-slot:label
>
<div>
Position:
</div>
</
template
>
<v-radio
color=
"secondary"
v-for=
"n in ['top', 'right']"
:key=
"n"
:label=
"`${n}`"
:value=
"n"
></v-radio>
</v-radio-group>
</v-flex>
<v-flex
sm12
md6
>
<v-select
v-model=
"hideLabels"
:items=
"this.labels"
attach
chips
:label=
"hideLabelsLabel"
multiple
clearable
@
change=
"updateChartData"
></v-select>
</v-flex>
</v-layout>
</div>
</v-card>
</template>
<
script
>
import
Chart
from
'
chart.js
'
;
export
default
{
...
...
@@ -69,6 +7,7 @@ export default {
required
:
true
,
},
chartId
:
String
,
requestDone
:
Boolean
,
},
data
()
{
return
{
...
...
@@ -150,5 +89,4 @@ export default {
this
.
updateChart
();
},
},
};
</
script
>
};
\ No newline at end of file
frontend/src/components/graphs/doughnut/doughnut.vue
0 → 100644
View file @
fb873d72
<
template
src=
"./doughnut.html"
lang=
"html"
></
template
>
<
script
src=
"./doughnut.js"
lang=
"hs"
></
script
>
\ No newline at end of file
frontend/src/components/graphs/histogram/histogram.html
0 → 100644
View file @
fb873d72
<v-card
class=
"pa-2"
>
<div
class=
"card-body"
>
<div
class=
"text-xs-center"
v-if=
"!requestDone && noGraph"
>
<v-progress-circular
indeterminate
color=
"secondary"
></v-progress-circular>
</div>
<v-alert
v-else-if=
"requestDone && noGraph"
:value=
"requestDone && noGraph"
type=
"warning"
class=
"text-xs-center"
>
Could not retrieve data from the server.
</v-alert>
<div>
<canvas
:id=
"chartId"
></canvas>
</div>
</div>
</v-card>
\ No newline at end of file
frontend/src/components/
H
istogram.
vue
→
frontend/src/components/
graphs/histogram/h
istogram.
js
View file @
fb873d72
<
template
>
<v-card
class=
"pa-2"
>
<div
class=
"card-body"
>
<div
class=
"text-xs-center"
v-if=
"requestStatus === false"
>
<v-progress-circular
indeterminate
color=
"secondary"
></v-progress-circular>
</div>
<div
class=
"text-xs-center"
v-if=
"(noGraph)"
>
no data
</div>
<div>
<canvas
:id=
"chartId"
></canvas>
</div>
</div>
</v-card>
</
template
>
<
script
>
import
Chart
from
'
chart.js
'
;
export
default
{
...
...
@@ -27,7 +7,7 @@ export default {
required
:
true
,
},
chartId
:
String
,
request
Status
:
Boolean
,
request
Done
:
Boolean
,
},
data
()
{
return
{
...
...
@@ -83,5 +63,4 @@ export default {
this
.
updateChart
();
},
},
};
</
script
>
};
\ No newline at end of file
frontend/src/components/graphs/histogram/histogram.vue
0 → 100644
View file @
fb873d72
<
template
src=
"./histogram.html"
lang=
"html"
></
template
>
<
script
src=
"./histogram.js"
lang=
"hs"
></
script
>
\ No newline at end of file
frontend/src/views/compare/compare.html
View file @
fb873d72
...
...
@@ -39,7 +39,7 @@
></v-select>
</v-flex>
</v-toolbar>
<doughnut
:doughnutData=
"firstTaxoCounts"
chartId=
"first_taxo_annotation"
></doughnut>
<doughnut
:doughnutData=
"firstTaxoCounts"
:requestDone=
"firstRequestDone"
chartId=
"first_taxo_annotation"
></doughnut>
</v-flex>
<!-- Second Doughnut -->
<v-flex
md6
>
...
...
@@ -60,7 +60,7 @@
></v-select>
</v-flex>
</v-toolbar>
<doughnut
:doughnutData=
"secondTaxoCounts"
chartId=
"second_taxo_annotation"
></doughnut>
<doughnut
:doughnutData=
"secondTaxoCounts"
:requestDone=
"secondRequestDone"
chartId=
"second_taxo_annotation"
></doughnut>
</v-flex>
</v-layout>
</v-container>
...
...
frontend/src/views/compare/compare.js
View file @
fb873d72
import
axios
from
'
axios
'
;
import
Histogram
from
'
@/components/Histogram.vue
'
;
import
CountCard
from
'
@/components/CountCard.vue
'
;
import
Doughnut
from
'
@/components/Doughnut.vue
'
;
import
Doughnut
from
'
@/components/graphs/doughnut/doughnut.vue
'
;
export
default
{
...
...
@@ -17,6 +15,9 @@ export default {
// Gene counts
firstGeneCounts
:
null
,
secondGeneCounts
:
null
,
// Requests status
firstRequestDone
:
false
,
secondRequestDone
:
false
,
taxLevel
:
'
phylum
'
,
};
},
...
...
@@ -34,7 +35,7 @@ export default {
this
.
getAllStats
();
},
methods
:
{
getTaxoCounts
(
endpoint
,
objName
)
{
getTaxoCounts
(
endpoint
,
objName
,
statusName
)
{
axios
.
get
(
endpoint
.
toLowerCase
(),
{
headers
:
{
Accept
:
'
application/json
'
,
...
...
@@ -50,15 +51,15 @@ export default {
})
.
catch
((
error
)
=>
{
console
.
error
(
error
);
});
})
.
then
(()
=>
this
[
statusName
]
=
true
)
;
},
getFirstTaxoCounts
()
{
var
endpoint
=
`/api/catalog/v1/statistics/genestatistics-
${
this
.
firstGeneSource
}
-taxonomy-repartition-
${
this
.
taxLevel
}
`
;
this
.
getTaxoCounts
(
endpoint
,
'
firstTaxoCounts
'
);
this
.
getTaxoCounts
(
endpoint
,
'
firstTaxoCounts
'
,
'
firstRequestDone
'
);
},
getSecondTaxoCounts
()
{
var
endpoint
=
`/api/catalog/v1/statistics/genestatistics-
${
this
.
secondGeneSource
}
-taxonomy-repartition-
${
this
.
taxLevel
}
`
;
this
.
getTaxoCounts
(
endpoint
,
'
secondTaxoCounts
'
);
this
.
getTaxoCounts
(
endpoint
,
'
secondTaxoCounts
'
,
'
secondRequestDone
'
);
},
getGeneCountsGeneric
(
stats_id
,
geneCountObj
)
{
axios
.
get
(
'
/api/catalog/v1/statistics/
'
+
stats_id
.
toLowerCase
(),
{
...
...
@@ -97,8 +98,6 @@ export default {
},
},
components
:
{
histogram
:
Histogram
,
countcard
:
CountCard
,
doughnut
:
Doughnut
,
},
};
\ No newline at end of file
frontend/src/views/genes/genes.html
View file @
fb873d72
...
...
@@ -19,7 +19,7 @@
></v-progress-linear>
</v-flex>
<v-spacer/>
</v-layout>
</v-layout>
</v-alert>
</template>
<v-layout
row
wrap
>
...
...
frontend/src/views/stats/stats.html
View file @
fb873d72
...
...
@@ -20,12 +20,9 @@
grid-list-md
>
<v-layout
row
wrap
>
<countcard
:count=
"geneCountAll"
></countcard>
<countcard
:count=
"geneCountFunctions"
></countcard>
<countcard
:count=
"geneCountEggnogs"
></countcard>
<countcard
:count=
"geneCountKeggs"
></countcard>
<countcard
:count=
"geneCountTaxo"
></countcard>
<countcard
:count=
"geneCountFull"
></countcard>
<template
v-for=
"(item, index) in geneCountsElements"
>
<countcard
:title=
"item.title"
:color=
"item.color"
:text=
"item.text"
></countcard>
</template>
</v-layout>
<v-layout
row
wrap
class=
"mt-2"
>
<!-- Histogram -->
...
...
@@ -68,7 +65,7 @@
></v-slider>
</v-flex>
</v-toolbar>
<histogram
:histoData=
"geneLengthData"
:request
Status
=
"geneLengthRequestDone"
chartId=
"histo_gene_length"
></histogram>
<histogram
:histoData=
"geneLengthData"
:request
Done
=
"geneLengthRequestDone"
chartId=
"histo_gene_length"
></histogram>
</v-flex>
<!-- Doughnut -->
<v-flex
md12
xl6
>
...
...
@@ -89,7 +86,7 @@
></v-select>
</v-flex>
</v-toolbar>
<doughnut
:doughnutData=
"taxoCounts"
chartId=
"taxo_annotation"
></doughnut>
<doughnut
:doughnutData=
"taxoCounts"
:requestDone=
"taxoRequestDone"
chartId=
"taxo_annotation"
></doughnut>
</v-flex>
</v-layout>
</v-container>
...
...
frontend/src/views/stats/stats.js
View file @
fb873d72
import
axios
from
'
axios
'
;
import
Histogram
from
'
@/components/
H
istogram.vue
'
;
import
CountCard
from
'
@/components/
C
ount
C
ard.vue
'
;
import
Doughnut
from
'
@/components/
D
oughnut.vue
'
;
import
Histogram
from
'
@/components/
graphs/histogram/h
istogram.vue
'
;
import
CountCard
from
'
@/components/
c
ount
card/countc
ard.vue
'
;
import
Doughnut
from
'
@/components/
graphs/doughnut/d
oughnut.vue
'
;
export
default
{
...
...
@@ -22,13 +22,14 @@ export default {
geneLengthWindowSize
:
200
,
stopAt
:
4000
,
// Gene counts data
geneCountAll
:
{}
,
geneCountFunctions
:
{}
,
geneCountKegg
s
:
{}
,
geneCountEggnog
s
:
{}
,
geneCountTax
o
:
{}
,
geneCountFull
:
{}
,
geneCount
s
All
:
null
,
geneCount
s
Functions
:
null
,
geneCount
s
Kegg
:
null
,
geneCount
s
Eggnog
:
null
,
geneCount
s
Tax
:
null
,
geneCount
s
Full
:
null
,
// Taxonomy repartition
taxoRequestDone
:
false
,
taxoCounts
:
{},
taxLevel
:
'
phylum
'
,
};
...
...
@@ -55,6 +56,40 @@ export default {
],
};
},
geneCountsElements
()
{
return
[
{
title
:
"
All
"
,
color
:
"
primary
"
,
text
:
this
.
geneCountsAll
,
},
{
title
:
"
Functions
"
,
color
:
"
function darken-1
"
,
text
:
this
.
geneCountsFunctions
,
},
{
title
:
"
KEGG
"
,
color
:
"
kegg
"
,
text
:
this
.
geneCountsKegg
,
},
{
title
:
"
EggNOG
"
,
color
:
"
eggnog darken-1
"
,
text
:
this
.
geneCountsEggnog
,
},
{
title
:
"
Taxonomy
"
,
color
:
"
taxonomy darken-1
"
,
text
:
this
.
geneCountsTax
,
},
{
title
:
"
Full
"
,
color
:
"
tertiary
"
,
text
:
this
.
geneCountsFull
,
},
]
}
},
mounted
()
{
this
.
getAllStats
();
...
...
@@ -73,14 +108,12 @@ export default {
label
:
label
,
backgroundColor
:
backgroundColor
,
};
this
.
geneLengthRequestDone
=
true
;
})
.
catch
((
error
)
=>
{
this
[
geneLengthLabelObj
]
=
[];
this
[
geneLengthObj
]
=
{};
console
.
error
(
error
);
this
.
geneLengthRequestDone
=
true
;
});
}).
then
(()
=>
this
.
geneLengthRequestDone
=
true
);
},
getGeneLength
()
{
this
.
getGeneLengthGeneric
(
...
...
@@ -145,68 +178,54 @@ export default {
this
.
getGeneLengthWithTaxonomy
();
this
.
getGeneLengthWithFunctionsAndTaxonomy
();
},
getGeneCountsGeneric
(
stats_id
,
className
,
title
,
geneCountObj
)
{
getGeneCountsGeneric
(
stats_id
,
geneCount
s
Obj
)
{
axios
.
get
(
'
/api/catalog/v1/statistics/
'
+
stats_id
.
toLowerCase
(),
{
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
this
[
geneCountObj
]
=
{
class
:
className
,
text
:
response
.
data
.
body
.
count
,
title
:
title
,
};
this
[
geneCountsObj
]
=
response
.
data
.
body
.
count
.
toString
();
})
.
catch
((
error
)
=>
{
this
[
geneCountsObj
]
=
"
no data
"
;
console
.
error
(
error
);
});
},
getGeneCountsAll
()
{
this
.
getGeneCountsGeneric
(
`genestatistics-
${
this
.
geneSource
}
-count-all`
,
'
primary
'
,
'
All
'
,
'
geneCountAll
'
);
'
geneCountsAll
'
);
},
getGeneCountsFunctions
()
{
this
.
getGeneCountsGeneric
(
`genestatistics-
${
this
.
geneSource
}
-count-has-function`
,
'
function darken-1
'
,
'
Functions
'
,
'
geneCountFunctions
'
,
'
geneCountsFunctions
'
,
);
},
getGeneCountsKeggs
()
{
this
.
getGeneCountsGeneric
(
`genestatistics-
${
this
.
geneSource
}
-count-has-function-source-kegg`
,
'
kegg
'
,
'
KEGG
'
,
'
geneCountKeggs
'
,
'
geneCountsKegg
'
,
);
},
getGeneCountsEggnogs
()
{
this
.
getGeneCountsGeneric
(
`genestatistics-
${
this
.
geneSource
}
-count-has-function-source-eggnog`
,
'
eggnog darken-1
'
,
'
EggNOG
'
,
'
geneCountEggnogs
'
,
'
geneCountsEggnog
'
,
);
},
getGeneCountsTaxo
()
{
this
.
getGeneCountsGeneric
(
`genestatistics-
${
this
.
geneSource
}
-count-has-taxonomy`
,
'
taxonomy darken-1
'
,
'
Taxonomy
'
,
'
geneCountTaxo
'
,
'
geneCountsTax
'
,
);
},
getGeneCountsFull
()
{
this
.
getGeneCountsGeneric
(
`genestatistics-
${
this
.
geneSource
}
-count-has-function-has-taxonomy`
,
'
tertiary
'
,
'
Full
'
,
'
geneCountFull
'
,
'
geneCountsFull
'
,
);
},
getGeneCounts
()
{
...
...
@@ -237,7 +256,7 @@ export default {
})
.
catch
((
error
)
=>
{
console
.
error
(
error
);
});
})
.
then
(()
=>
this
.
taxoRequestDone
=
true
)
;
},
getAllStats
()
{
this
.
getAllGeneLength
();
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a 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