@abi-software/map-side-bar 1.2.3 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/map-side-bar.common.js +1087 -363
- package/dist/map-side-bar.common.js.map +1 -1
- package/dist/map-side-bar.css +1 -1
- package/dist/map-side-bar.umd.js +1087 -363
- package/dist/map-side-bar.umd.js.map +1 -1
- package/dist/map-side-bar.umd.min.js +1 -1
- package/dist/map-side-bar.umd.min.js.map +1 -1
- package/package-lock.json +259 -109
- package/package.json +2 -1
- package/public/index.html +1 -1
- package/src/App.vue +6 -3
- package/src/algolia/algolia.js +12 -4
- package/src/components/BadgesGroup.vue +141 -0
- package/src/components/ContextCard.vue +33 -15
- package/src/components/DatasetCard.vue +69 -149
- package/src/components/ImageGallery.vue +505 -0
- package/src/components/SidebarContent.vue +79 -60
- package/src/components/scaffold-meta-map.js +0 -29
package/public/index.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
6
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
7
7
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
8
|
-
<title>
|
|
8
|
+
<title>Map Sidebar</title>
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<noscript>
|
package/src/App.vue
CHANGED
|
@@ -78,7 +78,7 @@ export default {
|
|
|
78
78
|
},
|
|
79
79
|
data: function(){
|
|
80
80
|
return {
|
|
81
|
-
tabArray: [{title: 'Flatmap', id:1}
|
|
81
|
+
tabArray: [{title: 'Flatmap', id:1}],
|
|
82
82
|
contextArray: [null,null,null],
|
|
83
83
|
sideBarVisibility: true,
|
|
84
84
|
envVars: {
|
|
@@ -86,7 +86,10 @@ export default {
|
|
|
86
86
|
ALGOLIA_KEY: process.env.VUE_APP_ALGOLIA_KEY,
|
|
87
87
|
ALGOLIA_ID: process.env.VUE_APP_ALGOLIA_ID,
|
|
88
88
|
ALGOLIA_INDEX: process.env.VUE_APP_ALGOLIA_INDEX,
|
|
89
|
-
PENNSIEVE_API_LOCATION: process.env.VUE_APP_PENNSIEVE_API_LOCATION
|
|
89
|
+
PENNSIEVE_API_LOCATION: process.env.VUE_APP_PENNSIEVE_API_LOCATION,
|
|
90
|
+
BL_SERVER_URL: process.env.VUE_APP_BL_SERVER_URL,
|
|
91
|
+
NL_LINK_PREFIX: process.env.VUE_APP_NL_LINK_PREFIX,
|
|
92
|
+
ROOT_URL: process.env.VUE_APP_ROOT_URL,
|
|
90
93
|
},
|
|
91
94
|
activeId: 1,
|
|
92
95
|
}
|
|
@@ -102,7 +105,7 @@ export default {
|
|
|
102
105
|
console.log("action fired: ", val)
|
|
103
106
|
},
|
|
104
107
|
openSearch: function(){
|
|
105
|
-
this.$refs.sideBar.openSearch('heart'
|
|
108
|
+
this.$refs.sideBar.openSearch([], 'heart')
|
|
106
109
|
},
|
|
107
110
|
singleFacets: function(){
|
|
108
111
|
this.$refs.sideBar.addFilter({facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'})
|
package/src/algolia/algolia.js
CHANGED
|
@@ -75,7 +75,6 @@ export class AlgoliaClient {
|
|
|
75
75
|
_processResultsForCards(results) {
|
|
76
76
|
let newResults = []
|
|
77
77
|
let newResult = {}
|
|
78
|
-
let id = 0
|
|
79
78
|
for (let res of results) {
|
|
80
79
|
newResult = {...res}
|
|
81
80
|
newResult = {
|
|
@@ -84,9 +83,9 @@ export class AlgoliaClient {
|
|
|
84
83
|
description: res.item.description,
|
|
85
84
|
updated: res.pennsieve.updatedAt,
|
|
86
85
|
publishDate: res.pennsieve.publishDate,
|
|
87
|
-
|
|
86
|
+
datasetId: res.objectID,
|
|
87
|
+
detailsReady: false
|
|
88
88
|
}
|
|
89
|
-
id++
|
|
90
89
|
newResults.push(newResult)
|
|
91
90
|
}
|
|
92
91
|
return newResults
|
|
@@ -103,7 +102,16 @@ export class AlgoliaClient {
|
|
|
103
102
|
facets:['*'],
|
|
104
103
|
hitsPerPage: hitsperPage,
|
|
105
104
|
page: page-1,
|
|
106
|
-
filters: filter
|
|
105
|
+
filters: filter,
|
|
106
|
+
attributesToHighlight: [],
|
|
107
|
+
attributesToRetrieve: [
|
|
108
|
+
'pennsieve.publishDate',
|
|
109
|
+
'pennsieve.updatedAt',
|
|
110
|
+
'item.curie',
|
|
111
|
+
'item.name',
|
|
112
|
+
'item.description',
|
|
113
|
+
'objectID',
|
|
114
|
+
],
|
|
107
115
|
})
|
|
108
116
|
.then(response => {
|
|
109
117
|
let searchData = {
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div v-if="categories['All'].size > 1" class="container" ref="container">
|
|
3
|
+
<div>
|
|
4
|
+
View data types:
|
|
5
|
+
</div>
|
|
6
|
+
<template v-for="(item, key) in categories" >
|
|
7
|
+
<el-button
|
|
8
|
+
v-if="item.size > 0"
|
|
9
|
+
:class="[{ 'active': key == active},'tag-button']"
|
|
10
|
+
@click="categoryClicked(key)"
|
|
11
|
+
size="small" :key="key">{{ key + " (" + item.size + ")" }}
|
|
12
|
+
</el-button>
|
|
13
|
+
</template>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
/* eslint-disable no-alert, no-console */
|
|
20
|
+
import Vue from "vue";
|
|
21
|
+
import { Button } from "element-ui";
|
|
22
|
+
import lang from "element-ui/lib/locale/lang/en";
|
|
23
|
+
import locale from "element-ui/lib/locale";
|
|
24
|
+
|
|
25
|
+
locale.use(lang);
|
|
26
|
+
Vue.use(Button);
|
|
27
|
+
|
|
28
|
+
export default {
|
|
29
|
+
name: "BadgesGroup",
|
|
30
|
+
props: {
|
|
31
|
+
/**
|
|
32
|
+
* Object containing information for
|
|
33
|
+
* the required viewing.
|
|
34
|
+
*/
|
|
35
|
+
additionalLinks: {
|
|
36
|
+
type: Array,
|
|
37
|
+
default: () => {
|
|
38
|
+
return [];
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
datasetBiolucida: {
|
|
42
|
+
type: Object,
|
|
43
|
+
default: () => {
|
|
44
|
+
return {};
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
entry: {
|
|
48
|
+
type: Object,
|
|
49
|
+
default: () => {
|
|
50
|
+
return {};
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
data: function () {
|
|
55
|
+
return {
|
|
56
|
+
categories: { "All": {size: 1} },
|
|
57
|
+
active: "All"
|
|
58
|
+
};
|
|
59
|
+
},
|
|
60
|
+
methods: {
|
|
61
|
+
addToCategories: function (array, name) {
|
|
62
|
+
if (array && array.length > 0) {
|
|
63
|
+
this.categories[name] = { size: array.length };
|
|
64
|
+
this.categories["All"].size += array.length;
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
addSimulationsToCategories: function (array) {
|
|
68
|
+
if (array && array.length > 0) {
|
|
69
|
+
const size = 1;
|
|
70
|
+
this.categories["Simulations"] = { size };
|
|
71
|
+
this.categories["All"].size += size;
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
categoryClicked: function(name) {
|
|
75
|
+
this.active = name;
|
|
76
|
+
this.$emit("categoryChanged", name);
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
watch: {
|
|
80
|
+
datasetBiolucida: {
|
|
81
|
+
deep: true,
|
|
82
|
+
immediate: true,
|
|
83
|
+
handler: function (biolucidaData) {
|
|
84
|
+
if ("dataset_images" in biolucidaData) {
|
|
85
|
+
this.addToCategories(biolucidaData["dataset_images"], "Biolucida Images");
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
entry: {
|
|
90
|
+
deep: true,
|
|
91
|
+
immediate: true,
|
|
92
|
+
handler: function () {
|
|
93
|
+
this.addToCategories(this.entry.scaffolds, 'Scaffolds');
|
|
94
|
+
this.addToCategories(this.entry.segmentation, 'Segmentations');
|
|
95
|
+
this.addToCategories(this.entry.plots, 'Plots');
|
|
96
|
+
this.addSimulationsToCategories(this.entry.simulation);
|
|
97
|
+
/** disable the following
|
|
98
|
+
this.addToCategories(this.entry.images, 'Images');
|
|
99
|
+
this.addToCategories(this.entry.videos, 'Videos');
|
|
100
|
+
**/
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
};
|
|
105
|
+
</script>
|
|
106
|
+
|
|
107
|
+
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
108
|
+
<style scoped>
|
|
109
|
+
.tag-button,
|
|
110
|
+
.tag-button:hover,
|
|
111
|
+
.tag-button:focus,
|
|
112
|
+
.tag-button.active
|
|
113
|
+
{
|
|
114
|
+
border-radius: 4px;
|
|
115
|
+
font-size: 0.75rem;
|
|
116
|
+
padding: 0.2rem 0.2rem;
|
|
117
|
+
margin: 0.5rem 0 0 0;
|
|
118
|
+
margin-right: 0.75rem!important;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.tag-button,
|
|
122
|
+
.tag-button:hover,
|
|
123
|
+
.tag-button:focus
|
|
124
|
+
{
|
|
125
|
+
background: #f9f2fc;
|
|
126
|
+
border: 1px solid #8300BF;
|
|
127
|
+
color: #8300BF;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.tag-button.active
|
|
131
|
+
{
|
|
132
|
+
background: #8300BF;
|
|
133
|
+
border: 1px solid #8300BF;
|
|
134
|
+
color: #fff;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.tag-button+.tag-button
|
|
138
|
+
{
|
|
139
|
+
margin-left:0;
|
|
140
|
+
}
|
|
141
|
+
</style>
|
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
<div v-show="showContextCard">
|
|
4
4
|
<div v-show="showDetails" class="hide" @click="showDetails = !showDetails">Hide information<i class="el-icon-arrow-up"></i></div>
|
|
5
5
|
<div v-show="!showDetails" class="hide" @click="showDetails = !showDetails">Show information<i class="el-icon-arrow-down"></i></div>
|
|
6
|
-
<el-card v-if="showDetails && Object.keys(contextData).length !== 0" v-loading="loading" class="context-card
|
|
6
|
+
<el-card v-if="showDetails && Object.keys(contextData).length !== 0" v-loading="loading" class="context-card" >
|
|
7
7
|
<div class="card-left">
|
|
8
8
|
<img :src="entry.banner" class="context-image">
|
|
9
9
|
</div>
|
|
10
|
-
<div class="card-right">
|
|
10
|
+
<div class="card-right scrollbar">
|
|
11
11
|
<div class="title">{{contextData.heading}}</div>
|
|
12
12
|
<div>{{contextData.description}}</div>
|
|
13
13
|
<br/>
|
|
14
|
-
<div v-if="contextData.views" class="subtitle">Scaffold Views</div>
|
|
14
|
+
<div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
|
|
15
15
|
<template v-for="(view, i) in contextData.views">
|
|
16
16
|
<span v-bind:key="i+'_1'" @click="openViewFile(view)" class="context-card-item">
|
|
17
17
|
<img class="key-image" :src="getFileFromPath(view.thumbnail)">
|
|
@@ -123,6 +123,8 @@ export default {
|
|
|
123
123
|
removeDoubleFilesPath: function(path){
|
|
124
124
|
if (path.includes('files/')){
|
|
125
125
|
return path.replace('files/', '')
|
|
126
|
+
} else if (path.includes('files\\')) {
|
|
127
|
+
return path.replace('files\\', '')
|
|
126
128
|
} else {
|
|
127
129
|
return path
|
|
128
130
|
}
|
|
@@ -147,9 +149,8 @@ export default {
|
|
|
147
149
|
|
|
148
150
|
},
|
|
149
151
|
openViewFile: function(view){
|
|
150
|
-
|
|
151
152
|
// note that we assume that the view file is in the same directory as the scaffold (viewUrls take relative paths)
|
|
152
|
-
this.entry.viewUrl =
|
|
153
|
+
this.entry.viewUrl = `${this.entry.apiLocation}s3-resource/${this.entry.discoverId}/${this.entry.version}/${view.path}`
|
|
153
154
|
this.entry.type = 'Scaffold View'
|
|
154
155
|
EventBus.$emit("PopoverActionClick", this.entry)
|
|
155
156
|
}
|
|
@@ -170,6 +171,12 @@ export default {
|
|
|
170
171
|
max-height: 10 50px;
|
|
171
172
|
padding: 8px;
|
|
172
173
|
font-size: 14px;
|
|
174
|
+
margin-bottom: 18px;
|
|
175
|
+
position: relative;
|
|
176
|
+
border: solid 1px #e4e7ed;
|
|
177
|
+
display: flex;
|
|
178
|
+
width: 500px;
|
|
179
|
+
max-height: 258px;
|
|
173
180
|
}
|
|
174
181
|
|
|
175
182
|
.context-card-item{
|
|
@@ -185,7 +192,7 @@ export default {
|
|
|
185
192
|
.context-card >>> .el-card__body {
|
|
186
193
|
padding: 0px;
|
|
187
194
|
display: flex;
|
|
188
|
-
width: 516px;
|
|
195
|
+
width: 516px;
|
|
189
196
|
}
|
|
190
197
|
|
|
191
198
|
.context-image{
|
|
@@ -201,15 +208,6 @@ export default {
|
|
|
201
208
|
margin-right: 8px;
|
|
202
209
|
}
|
|
203
210
|
|
|
204
|
-
.card {
|
|
205
|
-
margin-bottom: 18px;
|
|
206
|
-
position: relative;
|
|
207
|
-
border: solid 1px #e4e7ed;
|
|
208
|
-
display: flex;
|
|
209
|
-
width: 500px;
|
|
210
|
-
max-height: 480px;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
211
|
.card-left{
|
|
214
212
|
flex: 1
|
|
215
213
|
}
|
|
@@ -217,6 +215,8 @@ export default {
|
|
|
217
215
|
.card-right {
|
|
218
216
|
flex: 1.3;
|
|
219
217
|
padding-left: 6px;
|
|
218
|
+
overflow-y: scroll;
|
|
219
|
+
scrollbar-width: thin;
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
.cursor-pointer {
|
|
@@ -237,4 +237,22 @@ export default {
|
|
|
237
237
|
.subtitle{
|
|
238
238
|
font-weight: bold;
|
|
239
239
|
}
|
|
240
|
+
|
|
241
|
+
.scrollbar::-webkit-scrollbar-track {
|
|
242
|
+
border-radius: 10px;
|
|
243
|
+
background-color: #f5f5f5;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.scrollbar::-webkit-scrollbar {
|
|
247
|
+
width: 12px;
|
|
248
|
+
right: -12px;
|
|
249
|
+
background-color: #f5f5f5;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.scrollbar::-webkit-scrollbar-thumb {
|
|
253
|
+
border-radius: 4px;
|
|
254
|
+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
|
|
255
|
+
background-color: #979797;
|
|
256
|
+
}
|
|
257
|
+
|
|
240
258
|
</style>
|
|
@@ -1,35 +1,38 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="dataset-card-container" ref="container">
|
|
3
|
-
<div
|
|
4
|
-
<div
|
|
3
|
+
<div class="dataset-card" ref="card">
|
|
4
|
+
<div class="seperator-path"></div>
|
|
5
5
|
<div v-loading="loading" class="card" >
|
|
6
6
|
<span class="card-left">
|
|
7
|
-
<
|
|
7
|
+
<image-gallery v-if="!loading && discoverId"
|
|
8
|
+
:datasetId="discoverId"
|
|
9
|
+
:datasetVersion="version"
|
|
10
|
+
:entry="entry"
|
|
11
|
+
:envVars="envVars"
|
|
12
|
+
:label="label"
|
|
13
|
+
:datasetThumbnail="thumbnail"
|
|
14
|
+
:dataset-biolucida="biolucidaData"
|
|
15
|
+
:category="currentCategory"
|
|
16
|
+
@card-clicked="galleryClicked"
|
|
17
|
+
/>
|
|
8
18
|
</span>
|
|
9
19
|
<div class="card-right" >
|
|
10
20
|
<div class="title" @click="cardClicked">{{entry.name}}</div>
|
|
11
21
|
<div class="details">{{contributors}} {{entry.publishDate ? `(${publishYear})` : ''}}</div>
|
|
12
22
|
<div class="details">{{samples}}</div>
|
|
13
|
-
<div class="details"
|
|
14
|
-
<div>
|
|
15
|
-
<el-button v-if="!entry.simulation" @click="openDataset" size="mini" class="button" icon="el-icon-coin">View dataset</el-button>
|
|
16
|
-
</div>
|
|
17
|
-
<div>
|
|
18
|
-
<el-button v-if="entry.scaffolds" @click="openScaffold" size="mini" class="button" icon="el-icon-view">View scaffold</el-button>
|
|
19
|
-
</div>
|
|
20
|
-
<div>
|
|
21
|
-
<el-button v-if="hasCSVFile" @click="openPlot" size="mini" class="button" icon="el-icon-view">View plot</el-button>
|
|
22
|
-
</div>
|
|
23
|
+
<div v-if="!entry.detailsReady" class="details loading-icon" v-loading="!entry.detailsReady"></div>
|
|
23
24
|
<div>
|
|
24
25
|
<el-button v-if="entry.simulation" @click="openRepository" size="mini" class="button" icon="el-icon-view">View repository</el-button>
|
|
25
26
|
</div>
|
|
26
|
-
<div>
|
|
27
|
-
<
|
|
27
|
+
<div class="badges-container">
|
|
28
|
+
<badges-group
|
|
29
|
+
:entry="entry"
|
|
30
|
+
:dataset-biolucida="biolucidaData"
|
|
31
|
+
@categoryChanged="categoryChanged"
|
|
32
|
+
/>
|
|
28
33
|
</div>
|
|
29
34
|
</div>
|
|
30
|
-
|
|
31
35
|
</div>
|
|
32
|
-
<p v-if="(cardOverflow && !expanded)" class="read-more"><el-button @click="expand" class="read-more-button">Read more...</el-button></p>
|
|
33
36
|
</div>
|
|
34
37
|
</div>
|
|
35
38
|
</template>
|
|
@@ -38,24 +41,21 @@
|
|
|
38
41
|
<script>
|
|
39
42
|
/* eslint-disable no-alert, no-console */
|
|
40
43
|
import Vue from "vue";
|
|
44
|
+
import BadgesGroup from "./BadgesGroup.vue";
|
|
41
45
|
import { Button, Icon } from "element-ui";
|
|
42
46
|
import lang from "element-ui/lib/locale/lang/en";
|
|
43
47
|
import locale from "element-ui/lib/locale";
|
|
44
48
|
import EventBus from "./EventBus"
|
|
45
49
|
import speciesMap from "./species-map";
|
|
46
|
-
import
|
|
50
|
+
import ImageGallery from "./ImageGallery.vue";
|
|
47
51
|
|
|
48
52
|
locale.use(lang);
|
|
49
53
|
Vue.use(Button);
|
|
50
54
|
Vue.use(Icon);
|
|
51
55
|
|
|
52
|
-
|
|
53
|
-
const capitalise = function(string){
|
|
54
|
-
return string.replace(/\b\w/g, v => v.toUpperCase());
|
|
55
|
-
}
|
|
56
|
-
|
|
57
56
|
export default {
|
|
58
57
|
name: "DatasetCard",
|
|
58
|
+
components: { BadgesGroup, ImageGallery },
|
|
59
59
|
props: {
|
|
60
60
|
/**
|
|
61
61
|
* Object containing information for
|
|
@@ -75,16 +75,14 @@ export default {
|
|
|
75
75
|
thumbnail: require('@/../assets/missing-image.svg'),
|
|
76
76
|
dataLocation: this.entry.doi,
|
|
77
77
|
discoverId: undefined,
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
loading: false,
|
|
78
|
+
loading: true,
|
|
79
|
+
version: 1,
|
|
81
80
|
lastDoi: undefined,
|
|
81
|
+
biolucidaData: undefined,
|
|
82
|
+
currentCategory: "All"
|
|
82
83
|
};
|
|
83
84
|
},
|
|
84
85
|
computed: {
|
|
85
|
-
hasCSVFile: function(){
|
|
86
|
-
return ( this.entry.csvFiles && this.entry.csvFiles.length !== 0 )
|
|
87
|
-
},
|
|
88
86
|
contributors: function() {
|
|
89
87
|
let text = "";
|
|
90
88
|
if (this.entry.contributors) {
|
|
@@ -133,42 +131,13 @@ export default {
|
|
|
133
131
|
},
|
|
134
132
|
methods: {
|
|
135
133
|
cardClicked: function(){
|
|
136
|
-
|
|
137
|
-
this.openScaffold()
|
|
138
|
-
}else{
|
|
139
|
-
this.openDataset()
|
|
140
|
-
}
|
|
134
|
+
this.openDataset()
|
|
141
135
|
},
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
label: capitalise(this.label),
|
|
145
|
-
resource: this.getScaffoldPath(this.discoverId, this.version, this.entry.scaffolds[0].dataset.path),
|
|
146
|
-
title: "View 3D scaffold",
|
|
147
|
-
type: "Scaffold",
|
|
148
|
-
discoverId: this.discoverId,
|
|
149
|
-
apiLocation: this.envVars.API_LOCATION,
|
|
150
|
-
version: this.version,
|
|
151
|
-
contextCardUrl: this.entry.contextualInformation ? this.getFileFromPath(this.discoverId, this.version,this.entry.contextualInformation) : undefined,
|
|
152
|
-
banner: this.thumbnail
|
|
153
|
-
}
|
|
154
|
-
if (hardcoded_info[this.discoverId]){
|
|
155
|
-
action.contextCardUrl = true
|
|
156
|
-
}
|
|
157
|
-
this.propogateCardAction(action)
|
|
136
|
+
categoryChanged: function(name) {
|
|
137
|
+
this.currentCategory = name;
|
|
158
138
|
},
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
label: capitalise(this.label),
|
|
162
|
-
resource: this.getFileFromPath(this.discoverId, this.version, this.entry.csvFiles[0].dataset.path),
|
|
163
|
-
title: "View plot",
|
|
164
|
-
type: "Plot",
|
|
165
|
-
discoverId: this.discoverId,
|
|
166
|
-
apiLocation: this.envVars.API_LOCATION,
|
|
167
|
-
version: this.version,
|
|
168
|
-
contextCardUrl: this.entry.contextualInformation ? this.getFileFromPath(this.discoverId, this.version,this.entry.contextualInformation) : undefined,
|
|
169
|
-
banner: this.thumbnail
|
|
170
|
-
}
|
|
171
|
-
this.propogateCardAction(action)
|
|
139
|
+
galleryClicked: function(payload) {
|
|
140
|
+
this.propogateCardAction(payload)
|
|
172
141
|
},
|
|
173
142
|
openDataset: function(){
|
|
174
143
|
window.open(this.dataLocation,'_blank');
|
|
@@ -196,51 +165,10 @@ export default {
|
|
|
196
165
|
}
|
|
197
166
|
});
|
|
198
167
|
},
|
|
199
|
-
openSimulation: function() {
|
|
200
|
-
let isSedmlResource = false;
|
|
201
|
-
let resource = undefined;
|
|
202
|
-
this.entry.additionalLinks.forEach(function(el) {
|
|
203
|
-
if (el.description == "SED-ML file") {
|
|
204
|
-
isSedmlResource = true;
|
|
205
|
-
resource = el.uri;
|
|
206
|
-
} else if (!isSedmlResource && (el.description == "CellML file")) {
|
|
207
|
-
resource = el.uri;
|
|
208
|
-
}
|
|
209
|
-
});
|
|
210
|
-
let action = {
|
|
211
|
-
label: undefined,
|
|
212
|
-
resource: resource,
|
|
213
|
-
dataset: this.dataLocation,
|
|
214
|
-
apiLocation: this.envVars.API_LOCATION,
|
|
215
|
-
version: this.version,
|
|
216
|
-
discoverId: this.discoverId,
|
|
217
|
-
contextCardUrl: this.entry.contextualInformation ? this.getFileFromPath(this.discoverId, this.version,this.entry.contextualInformation) : undefined,
|
|
218
|
-
banner: this.thumbnail,
|
|
219
|
-
title: "View simulation",
|
|
220
|
-
name: this.entry.name,
|
|
221
|
-
description: this.entry.description,
|
|
222
|
-
type: "Simulation"
|
|
223
|
-
}
|
|
224
|
-
this.propogateCardAction(action)
|
|
225
|
-
},
|
|
226
168
|
propogateCardAction: function(action){
|
|
227
169
|
EventBus.$emit("PopoverActionClick", action)
|
|
228
170
|
this.$emit('contextUpdate', action)
|
|
229
171
|
},
|
|
230
|
-
getScaffoldPath: function(discoverId, version, scaffoldPath){
|
|
231
|
-
let id = discoverId
|
|
232
|
-
let path = `${this.envVars.API_LOCATION}s3-resource/${id}/${version}/files/${scaffoldPath}`
|
|
233
|
-
return path
|
|
234
|
-
},
|
|
235
|
-
getFileFromPath: function(discoverId, version, path){
|
|
236
|
-
return `${this.envVars.API_LOCATION}s3-resource/${discoverId}/${version}/files/${path}`
|
|
237
|
-
},
|
|
238
|
-
isOverflown: function(el){
|
|
239
|
-
return el.clientHeight < el.scrollHeight
|
|
240
|
-
},
|
|
241
|
-
expand: function() {
|
|
242
|
-
this.expanded = true
|
|
243
|
-
},
|
|
244
172
|
splitDOI: function(doi){
|
|
245
173
|
return [doi.split('/')[doi.split('/').length-2], doi.split('/')[doi.split('/').length-1]]
|
|
246
174
|
},
|
|
@@ -250,7 +178,7 @@ export default {
|
|
|
250
178
|
this.lastDoi = this.entry.doi
|
|
251
179
|
this.loading = true
|
|
252
180
|
let doi = this.splitDOI(this.entry.doi)
|
|
253
|
-
fetch(
|
|
181
|
+
fetch(`${this.envVars.PENNSIEVE_API_LOCATION}/discover/datasets/doi/${doi[0]}/${doi[1]}`)
|
|
254
182
|
.then((response) =>{
|
|
255
183
|
if (!response.ok){
|
|
256
184
|
throw Error(response.statusText)
|
|
@@ -263,12 +191,13 @@ export default {
|
|
|
263
191
|
this.discoverId = data.id
|
|
264
192
|
this.version = data.version
|
|
265
193
|
this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
|
|
194
|
+
this.getBiolucidaInfo(this.discoverId)
|
|
266
195
|
this.loading = false
|
|
267
196
|
})
|
|
268
197
|
.catch(() => {
|
|
269
198
|
//set defaults if we hit an error
|
|
270
199
|
this.thumbnail = require('@/../assets/missing-image.svg')
|
|
271
|
-
this.discoverId =
|
|
200
|
+
this.discoverId = Number(this.entry.datasetId)
|
|
272
201
|
this.loading = false
|
|
273
202
|
});
|
|
274
203
|
}
|
|
@@ -277,19 +206,24 @@ export default {
|
|
|
277
206
|
lastName: function(fullName){
|
|
278
207
|
return fullName.split(',')[0]
|
|
279
208
|
},
|
|
209
|
+
getBiolucidaInfo: function(id) {
|
|
210
|
+
let apiLocation = this.envVars.API_LOCATION;
|
|
211
|
+
let endpoint = apiLocation + "image_search/" + id;
|
|
212
|
+
// Add parameters if we are sent them
|
|
213
|
+
fetch(endpoint)
|
|
214
|
+
.then(response => response.json())
|
|
215
|
+
.then(data => {
|
|
216
|
+
if (data.status == "success")
|
|
217
|
+
this.biolucidaData = data;
|
|
218
|
+
});
|
|
219
|
+
}
|
|
280
220
|
},
|
|
281
|
-
|
|
221
|
+
created: function() {
|
|
282
222
|
this.getBanner()
|
|
283
|
-
this.cardOverflow = this.isOverflown(this.$refs.card)
|
|
284
|
-
},
|
|
285
|
-
updated: function () {
|
|
286
223
|
},
|
|
287
224
|
watch: {
|
|
288
225
|
// currently not using card overflow
|
|
289
226
|
'entry.description': function() { // watch it
|
|
290
|
-
this.cardOverflow = false
|
|
291
|
-
this.expanded = false
|
|
292
|
-
this.cardOverflow = this.isOverflown(this.$refs.card)
|
|
293
227
|
this.getBanner()
|
|
294
228
|
}
|
|
295
229
|
},
|
|
@@ -301,15 +235,11 @@ export default {
|
|
|
301
235
|
.dataset-card {
|
|
302
236
|
padding-left: 16px;
|
|
303
237
|
position: relative;
|
|
238
|
+
min-height:17rem;
|
|
304
239
|
}
|
|
305
|
-
|
|
306
|
-
width: 486px;
|
|
307
|
-
height: 0px;
|
|
308
|
-
border: solid 1px #e4e7ed;
|
|
309
|
-
background-color: #e4e7ed;
|
|
310
|
-
}
|
|
240
|
+
|
|
311
241
|
.title {
|
|
312
|
-
padding-bottom:
|
|
242
|
+
padding-bottom: 0.75rem;
|
|
313
243
|
font-family: Asap;
|
|
314
244
|
font-size: 14px;
|
|
315
245
|
font-weight: bold;
|
|
@@ -335,35 +265,6 @@ export default {
|
|
|
335
265
|
padding-left: 6px;
|
|
336
266
|
}
|
|
337
267
|
|
|
338
|
-
.dataset-card .read-more {
|
|
339
|
-
position: absolute;
|
|
340
|
-
z-index: 9;
|
|
341
|
-
bottom: 0;
|
|
342
|
-
left: 0;
|
|
343
|
-
width: 100%;
|
|
344
|
-
height: 20px;
|
|
345
|
-
margin: 0; padding: 20px 66px;
|
|
346
|
-
/* "transparent" only works here because == rgba(0,0,0,0) */
|
|
347
|
-
background-image: linear-gradient(to bottom, transparent, white);
|
|
348
|
-
pointer-events: none;
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
.read-more-button{
|
|
352
|
-
width: 85px;
|
|
353
|
-
height: 20px;
|
|
354
|
-
font-family: Asap;
|
|
355
|
-
font-size: 14px;
|
|
356
|
-
font-weight: normal;
|
|
357
|
-
font-stretch: normal;
|
|
358
|
-
font-style: normal;
|
|
359
|
-
line-height: normal;
|
|
360
|
-
letter-spacing: normal;
|
|
361
|
-
color: #8300bf;
|
|
362
|
-
padding: 0px;
|
|
363
|
-
pointer-events: all;
|
|
364
|
-
cursor: pointer;
|
|
365
|
-
}
|
|
366
|
-
|
|
367
268
|
.button{
|
|
368
269
|
z-index: 10;
|
|
369
270
|
font-family: Asap;
|
|
@@ -402,4 +303,23 @@ export default {
|
|
|
402
303
|
letter-spacing: 1.05px;
|
|
403
304
|
color: #484848;
|
|
404
305
|
}
|
|
306
|
+
|
|
307
|
+
.badges-container {
|
|
308
|
+
margin-top:0.75rem;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.loading-icon {
|
|
312
|
+
z-index: 20;
|
|
313
|
+
width: 40px;
|
|
314
|
+
height: 40px;
|
|
315
|
+
left: 80px;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.loading-icon >>> .el-loading-mask {
|
|
319
|
+
background-color: rgba(117, 190, 218, 0.0) !important;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.loading-icon >>> .el-loading-spinner .path {
|
|
323
|
+
stroke: #8300bf;
|
|
324
|
+
}
|
|
405
325
|
</style>
|