Skip to content

Commit 79ff10a

Browse files
authored
Merge pull request #678 from inab/dev/new-plots
Dev/new plots
2 parents 5a835c4 + 7026b06 commit 79ff10a

37 files changed

Lines changed: 2759 additions & 311 deletions

components/Header/subMenuEntriesObservatory.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
11
// Displayed in Header and Footer
22

33
const subMenuEntriesObservatory = [
4+
{
5+
title: 'Overview',
6+
title_hide: 'Overview',
7+
to: '/observatory',
8+
exact: true,
9+
},
410
{
511
title: 'Trends',
612
title_hide: 'Trends',
713
to: '/observatory/Trends',
8-
icon: 'mdi-chart-line',
914
},
1015
{
1116
title: 'FAIRness Scoreboard',
1217
title_hide: 'FAIRness Scoreboard',
1318
to: '/observatory/FAIRness',
14-
icon: 'mdi-bullseye',
1519
},
1620
{
1721
title: 'FAIRsoft Evaluator',
1822
title_hide: 'FAIRsoft Evaluator',
1923
to: '/observatory/Evaluation',
20-
icon: 'mdi-check-circle-outline',
2124
},
2225
{
2326
title: 'Data',
2427
title_hide: 'Observatory Data',
2528
to: '/observatory/Data',
26-
icon: 'mdi-database',
2729
},
2830
{
2931
title: 'About',
3032
title_hide: 'Observatory About',
3133
to: '/observatory/About',
32-
icon: 'mdi-information',
3334
},
3435
];
3536

components/observatory/CollectionSelector.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,12 @@ export default {
132132
this.$store.dispatch('observatory/trends/getVersionControlCount');
133133
this.$store.dispatch('observatory/trends/getVersionControlRepositories');
134134
this.$store.dispatch('observatory/trends/getPublications');
135+
this.$store.dispatch('observatory/trends/getDependencies');
136+
this.$store.dispatch('observatory/trends/getDependenciesCount');
137+
this.$store.dispatch('observatory/trends/getDocumentation');
138+
this.$store.dispatch('observatory/trends/getDocumentationCount');
139+
this.$store.dispatch('observatory/trends/getInputFormats');
140+
this.$store.dispatch('observatory/trends/getOutputFormats');
135141
136142
// data for data page <- data store
137143
this.$store.dispatch('observatory/data/getCountsPerSource');
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div class="mb-0 pb-0 ml-auto mr-0 pr-0 pt-2">
3+
<v-tooltip bottom>
4+
<template #activator="{ on, attrs }">
5+
<v-btn
6+
v-bind="attrs"
7+
icon
8+
class="copy-icon"
9+
v-on="on"
10+
@click="dialog = true"
11+
>
12+
<v-icon small color="grey lighten-1">mdi-content-copy</v-icon>
13+
</v-btn>
14+
</template>
15+
<span>{{ message }}</span>
16+
</v-tooltip>
17+
18+
<v-dialog v-model="dialog" width="65%">
19+
<v-card>
20+
<v-card-title> Plots Iframe Code </v-card-title>
21+
<v-card-text>
22+
Copy and paste the following code to embed the plots into your
23+
website. Change the width and height of the iframe as needed.
24+
<codeBlock
25+
v-for="(item, index) in items"
26+
:key="index"
27+
:title="item.title"
28+
:code="copyIframeCode(item.url)"
29+
/>
30+
</v-card-text>
31+
32+
<v-divider></v-divider>
33+
</v-card>
34+
</v-dialog>
35+
</div>
36+
</template>
37+
<script>
38+
import { mapGetters } from 'vuex';
39+
import CodeBlock from '~/components/observatory/visualizations/CodeBlock.vue';
40+
41+
export default {
42+
name: 'PlotWTwoOptions',
43+
components: {
44+
CodeBlock,
45+
},
46+
props: {
47+
items: {
48+
type: Array,
49+
required: true,
50+
},
51+
},
52+
data: () => ({
53+
dialog: false,
54+
message: 'See iframe code',
55+
}),
56+
computed: {
57+
...mapGetters('observatory', {
58+
currentCollection: 'getCurrentCollection',
59+
}),
60+
},
61+
methods: {
62+
copyIframeCode(url) {
63+
const newUrl = `${url}/${this.currentCollection}/`;
64+
const iframeCode = `<iframe src="${newUrl}"
65+
frameborder="0"
66+
style="width:50%; height:500px;"
67+
scrolling="no">
68+
</iframe>`;
69+
return iframeCode;
70+
},
71+
generateURL() {
72+
// add current collection to the URL
73+
return `${this.url}/${this.currentCollection}`;
74+
},
75+
},
76+
};
77+
</script>

components/observatory/evaluation/EvaluationSourceCard.vue

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-card
3-
class="pt-6 pb-4 d-flex flex-column justify-space-between"
3+
class="pt-6 pb-4 d-flex flex-column"
44
min-height="320"
55
max-height="320"
66
min-width="230"
@@ -9,31 +9,27 @@
99
outlined
1010
elevation="1"
1111
>
12-
<v-row justify="center" class="mt-5">
12+
<v-row justify="center" class="mt-5 flex-grow-0">
1313
<v-avatar color="grey" size="42">
1414
<v-icon color="white">{{ icon }}</v-icon>
1515
</v-avatar>
1616
</v-row>
17-
<v-row justify="center">
18-
<v-col cols="10" class="text-center">
17+
18+
<v-row justify="center" class="flex-grow-1">
19+
<v-col cols="10" class="text-center d-flex flex-column">
1920
<div class="font-weight-medium text-subtitle-1">
2021
{{ title }}
2122
</div>
22-
<p class="mt-3" v-html="description"></p>
23+
<p class="mt-3 mb-0" v-html="description"></p>
2324
</v-col>
2425
</v-row>
25-
<v-row justify="center" class="mb-4">
26-
<v-btn color="primary" @click="selectSource"> select </v-btn>
26+
27+
<v-row justify="center" class="mb-4 mt-auto flex-grow-0">
28+
<v-btn color="primary" @click="selectSource">select</v-btn>
2729
</v-row>
28-
<!--v-row justify="center">
29-
<v-col cols="10" class="text-center">
30-
<p class="mt-2 text-caption grey--text">
31-
<slot name="note"></slot>
32-
</p>
33-
</v-col>
34-
</v-row-->
3530
</v-card>
3631
</template>
32+
3733
<script>
3834
export default {
3935
name: 'EvaluationSourceCard',

components/observatory/evaluation/EvaluationStepper.vue

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
<v-stepper v-model="step" elevation="0" vertical class="ml-0 pl-0 mb-4">
44
<!----------------- STEP 1 ------------------->
55
<v-stepper-step :complete="step > 1" step="1">
6-
Select the source of the software's metadata
6+
<div class="text-h6">Choose a metadata source</div>
77
</v-stepper-step>
88
<v-stepper-content step="1">
9+
<p class="text-body-2">Select how you want to start the evaluation.</p>
910
<v-row
1011
justify="space-around"
1112
class="mb-4 mt-4 mr-0 ml-0 d-flex align-center"
@@ -28,7 +29,7 @@
2829
<v-col cols="3" md="3" sm="7">
2930
<EvaluationSourceCard
3031
title="GitHub repository"
31-
description="Enter the URL of the software's GitHub repository"
32+
description="Provide the URL of the software's GitHub repository"
3233
source="github"
3334
icon="mdi-github"
3435
>
@@ -55,7 +56,7 @@
5556

5657
<!----------------- STEP 2 ------------------->
5758
<v-stepper-step :complete="step > 2" step="2">
58-
Introduce software to evaluate
59+
<div class="text-h6">Introduce software to evaluate</div>
5960
</v-stepper-step>
6061
<v-stepper-content v-if="source === 'github'" step="2">
6162
<GitHubInput />
@@ -73,7 +74,7 @@
7374

7475
<!---------------- STEP 3 -------------------->
7576
<v-stepper-step :complete="step > 3" step="3">
76-
Edit the metadata if needed
77+
<div class="text-h6">Edit the metadata if needed</div>
7778
</v-stepper-step>
7879

7980
<v-stepper-content step="3">
@@ -82,7 +83,11 @@
8283
<!-------------------------------------------->
8384

8485
<!---------------- STEP 4 -------------------->
85-
<v-stepper-step step="4"> Results </v-stepper-step>
86+
<v-stepper-step step="4">
87+
<div class="text-h6">
88+
Results: FAIRsoft scores, metadata, citation file
89+
</div>
90+
</v-stepper-step>
8691
<v-stepper-content step="4">
8792
<ResultsTabs />
8893
</v-stepper-content>

components/observatory/evaluation/GitHub/DialogAppInstall.vue

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { mapGetters } from 'vuex';
2323
2424
export default {
2525
name: 'DialogAppInstall',
26-
props: ['title', 'text', 'initialDialogAppInstall', 'installationURL'],
26+
props: ['title', 'text', 'initialDialogAppInstall', 'installationUrl'],
2727
computed: {
2828
...mapGetters('observatory/evaluation/github/', {
2929
importProgressText: 'getImportProgressText',
@@ -85,10 +85,8 @@ export default {
8585
// })
8686
8787
// 2. Open App installation in new window
88-
window.open(
89-
'https://github.com/apps/metadata-extractor-for-fairsoft/installations/new',
90-
'_blank'
91-
);
88+
console.log(this.installationUrl);
89+
window.open(this.installationUrl, '_blank');
9290
},
9391
},
9492
};

components/observatory/evaluation/GitHub/GitHubInput.vue

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
<template>
22
<v-container>
33
<v-form>
4-
<v-row justify="space-around">
5-
<v-col cols="10">
6-
<p class="text-body-2">
7-
Introduce the URL of the GitHub repository of the software:
8-
</p>
9-
</v-col>
10-
</v-row>
4+
<p class="text-body-2">
5+
Introduce the URL of the GitHub repository of the software:
6+
</p>
7+
118
<v-row justify="space-around" class="mb-0 mt-0 d-flex align-center">
12-
<v-col cols="10">
9+
<v-col cols="12">
1310
<v-text-field
1411
v-model="value"
1512
class="ml-1"
@@ -42,7 +39,6 @@
4239
<v-btn text @click="goBack"> Back </v-btn>
4340
</v-col>
4441
</v-row>
45-
4642
<DialogAppInstall
4743
:initial-dialog-app-install="dialogAppInstall"
4844
:title="installDialogParameters.title"
@@ -89,7 +85,7 @@ export default {
8985
installDialogParameters: {
9086
installationURL:
9187
'https://github.com/apps/metadata-extractor-for-fairsoft/installations/select_target',
92-
title: "Unable to access repository's metadata.",
88+
title: "Unable to access repository's metadata",
9389
text: 'Let the FAIRsoft Evaluator access the requested repositories metadata by grantting the <a href="https://github.com/apps/metadata-extractor-for-fairsoft" target="_blank">Metadata Extractor for FAIRsoft GitHub App</a> the necessary permissions.',
9490
},
9591
}),

components/observatory/evaluation/Observatory/ObservatoryInput.vue

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,12 @@
1010
</v-row>
1111

1212
<v-form v-else>
13-
<v-row justify="space-around">
14-
<v-col cols="10">
15-
<p class="text-body-2">
16-
Select a tool from the Software's Observatory Database:
17-
</p>
18-
</v-col>
19-
</v-row>
13+
<p class="text-body-2">
14+
Select a tool from the Software's Observatory Database:
15+
</p>
16+
2017
<v-row class="mt-2 d-flex align-center" justify="space-around">
21-
<v-col cols="10">
18+
<v-col cols="12">
2219
<v-autocomplete
2320
v-model="value"
2421
:items="observatoryTools"

0 commit comments

Comments
 (0)