@abi-software/map-side-bar 1.3.25 → 1.3.26-staging
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/delte.json +30 -0
- package/dist/img/logo-sparc-wave-primary.8ed83a51.svg +1 -0
- package/dist/map-side-bar.common.js +373 -136
- 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 +373 -136
- 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 +1 -1
- package/package.json +1 -1
- package/scaffold_context_info.json +1 -0
- package/src/algolia/algolia.js +13 -13
- package/src/components/ContextCard.vue +4 -1
- package/src/components/DatasetCard.vue +67 -7
- package/src/components/ImageGallery.vue +5 -10
- package/src/components/SidebarContent.vue +6 -3
- package/src/mixins/GalleryHelpers.js +104 -0
- package/src/components/delte.json +0 -27
package/package-lock.json
CHANGED
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
"description": "This dataset contains single cell scale anatomical map of the rat intrinsic cardiac nervous system (ICNS) across four male and three female hearts. These cell clusters can be seen by the yellow data points on the image as well as spherical markers on the 3D heart scaffold. The dataset provides an integrative framework to visualise the spatial distribution of ICNS across different hearts.",
|
|
3
3
|
"heading": "Mapped ICN samples",
|
|
4
4
|
"id": "sparc.science.context_data",
|
|
5
|
+
"views": [],
|
|
5
6
|
"samples": [
|
|
6
7
|
{
|
|
7
8
|
"annotation": "",
|
package/src/algolia/algolia.js
CHANGED
|
@@ -79,10 +79,10 @@ export class AlgoliaClient {
|
|
|
79
79
|
newResult = { ...res }
|
|
80
80
|
newResult = {
|
|
81
81
|
doi: res.item.curie.split(':')[1],
|
|
82
|
-
name: res.item.name,
|
|
83
|
-
description: res.item.description,
|
|
84
|
-
updated: res.pennsieve.updatedAt,
|
|
85
|
-
publishDate: res.pennsieve.publishDate,
|
|
82
|
+
name: res.item.dataset.name,
|
|
83
|
+
description: res.item.dataset.description,
|
|
84
|
+
updated: res.pennsieve ? res.pennsieve.updatedAt : 'Unkown',
|
|
85
|
+
publishDate: res.pennsieve? res.pennsieve.publishDate : 'Uknown',
|
|
86
86
|
datasetId: res.objectID,
|
|
87
87
|
detailsReady: false
|
|
88
88
|
}
|
|
@@ -133,20 +133,20 @@ export class AlgoliaClient {
|
|
|
133
133
|
page: page - 1,
|
|
134
134
|
filters: filter,
|
|
135
135
|
attributesToHighlight: [],
|
|
136
|
-
attributesToRetrieve: [
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
],
|
|
136
|
+
// attributesToRetrieve: [
|
|
137
|
+
// 'pennsieve.publishDate',
|
|
138
|
+
// 'pennsieve.updatedAt',
|
|
139
|
+
// 'item.curie',
|
|
140
|
+
// 'item.name',
|
|
141
|
+
// 'item.description',
|
|
142
|
+
// 'objectID',
|
|
143
|
+
// ],
|
|
144
144
|
})
|
|
145
145
|
.then(response => {
|
|
146
146
|
let searchData = {
|
|
147
147
|
items: this._processResultsForCards(response.hits),
|
|
148
148
|
total: response.nbHits,
|
|
149
|
-
discoverIds: response.hits.map(r => r.pennsieve.identifier),
|
|
149
|
+
discoverIds: response.hits.map(r => r.pennsieve ? r.pennsieve.identifier : undefined),
|
|
150
150
|
dois: response.hits.map(r => r.item.curie.split(':')[1])
|
|
151
151
|
}
|
|
152
152
|
resolve(searchData)
|
|
@@ -140,8 +140,11 @@ export default {
|
|
|
140
140
|
computed: {
|
|
141
141
|
samplesUnderViews: function(){
|
|
142
142
|
if (this.contextData){
|
|
143
|
+
if (!this.contextData.views || !this.contextData.samples){
|
|
144
|
+
return false
|
|
145
|
+
}
|
|
143
146
|
if (this.contextData.samplesUnderViews){
|
|
144
|
-
return
|
|
147
|
+
return this.contextData.samplesUnderViews
|
|
145
148
|
} else {
|
|
146
149
|
let viewId = this.contextData.views.map(v=>v.id)
|
|
147
150
|
let samplesView = this.contextData.samples.map(s=>s.view)
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<div class="seperator-path"></div>
|
|
5
5
|
<div v-loading="loading" class="card" >
|
|
6
6
|
<span class="card-left">
|
|
7
|
-
<image-gallery v-if="!loading
|
|
8
|
-
:datasetId="discoverId"
|
|
7
|
+
<image-gallery v-if="!loading"
|
|
8
|
+
:datasetId="String(discoverId)"
|
|
9
9
|
:datasetVersion="version"
|
|
10
10
|
:entry="entry"
|
|
11
11
|
:envVars="envVars"
|
|
@@ -172,9 +172,11 @@ export default {
|
|
|
172
172
|
splitDOI: function(doi){
|
|
173
173
|
return [doi.split('/')[doi.split('/').length-2], doi.split('/')[doi.split('/').length-1]]
|
|
174
174
|
},
|
|
175
|
-
getBanner: function () {
|
|
176
|
-
|
|
177
|
-
|
|
175
|
+
getBanner: function () { // NOTE! This getBanner uses the pennsieve api to retrive the banner. Only use for curation!
|
|
176
|
+
if (this.entry.datasetId.length > 4){
|
|
177
|
+
this.loading = true
|
|
178
|
+
this.getPennsieveBanner()
|
|
179
|
+
} else if (this.lastDoi !== this.entry.doi) {
|
|
178
180
|
this.lastDoi = this.entry.doi
|
|
179
181
|
this.loading = true
|
|
180
182
|
let doi = this.splitDOI(this.entry.doi)
|
|
@@ -191,7 +193,7 @@ export default {
|
|
|
191
193
|
this.discoverId = data.id
|
|
192
194
|
this.version = data.version
|
|
193
195
|
this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
|
|
194
|
-
this.getBiolucidaInfo(this.discoverId)
|
|
196
|
+
if (this.discoverId.length < 5) this.getBiolucidaInfo(this.discoverId)
|
|
195
197
|
this.loading = false
|
|
196
198
|
})
|
|
197
199
|
.catch(() => {
|
|
@@ -200,9 +202,67 @@ export default {
|
|
|
200
202
|
this.discoverId = Number(this.entry.datasetId)
|
|
201
203
|
this.loading = false
|
|
202
204
|
});
|
|
203
|
-
}
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
getPennsieveBanner: function(){
|
|
208
|
+
// authenticate with pennsieve
|
|
209
|
+
fetch('https://cognito-idp.us-east-1.amazonaws.com/', {
|
|
210
|
+
method: 'POST',
|
|
211
|
+
headers: {
|
|
212
|
+
'Accept': 'application/json, text/plain, */*',
|
|
213
|
+
'Content-Type': 'application/x-amz-json-1.1',
|
|
214
|
+
'X-Amz-Target': 'AWSCognitoIdentityProviderService.InitiateAuth',
|
|
215
|
+
'X-Amz-User-Agent': 'aws-amplify/0.1.x js',
|
|
216
|
+
},
|
|
217
|
+
body: JSON.stringify({"AuthFlow":"USER_PASSWORD_AUTH","ClientId":"670mo7si81pcc3sfub7o1914d8","AuthParameters":{"USERNAME":"jessekhorasanee@gmail.com","PASSWORD":"Asameswayhey@666","DEVICE_KEY":"us-east-1_0d4e8de7-6079-470d-bedd-62043ba70f7e"},"ClientMetadata":{}})
|
|
218
|
+
}).then(res => res.json())
|
|
219
|
+
.then(res => {
|
|
220
|
+
console.log(res)
|
|
221
|
+
let token = res.AuthenticationResult.AccessToken
|
|
222
|
+
let proxy = `${this.envVars.API_LOCATION}proxy/?url=` // set up proxy
|
|
223
|
+
|
|
224
|
+
// call pennsieve api via proxy
|
|
225
|
+
fetch(`${proxy}https://api.pennsieve.io/datasets/N%3Adataset%3A${this.entry.datasetId}/banner?api_key=${token}`
|
|
226
|
+
).then(res=>res.json()).then(res=>{
|
|
227
|
+
console.log('success!')
|
|
228
|
+
this.thumbnail = res.banner
|
|
229
|
+
this.discoverId = this.entry.datasetId
|
|
230
|
+
this.loading = false
|
|
231
|
+
})
|
|
232
|
+
})
|
|
204
233
|
|
|
205
234
|
},
|
|
235
|
+
// getBanner: function () {
|
|
236
|
+
// // Only load banner if card has changed
|
|
237
|
+
// if (this.lastDoi !== this.entry.doi) {
|
|
238
|
+
// this.lastDoi = this.entry.doi
|
|
239
|
+
// this.loading = true
|
|
240
|
+
// let doi = this.splitDOI(this.entry.doi)
|
|
241
|
+
// fetch(`${this.envVars.PENNSIEVE_API_LOCATION}/discover/datasets/doi/${doi[0]}/${doi[1]}`)
|
|
242
|
+
// .then((response) =>{
|
|
243
|
+
// if (!response.ok){
|
|
244
|
+
// throw Error(response.statusText)
|
|
245
|
+
// } else {
|
|
246
|
+
// return response.json()
|
|
247
|
+
// }
|
|
248
|
+
// })
|
|
249
|
+
// .then((data) => {
|
|
250
|
+
// this.thumbnail = data.banner
|
|
251
|
+
// this.discoverId = data.id
|
|
252
|
+
// this.version = data.version
|
|
253
|
+
// this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
|
|
254
|
+
// this.getBiolucidaInfo(this.discoverId)
|
|
255
|
+
// this.loading = false
|
|
256
|
+
// })
|
|
257
|
+
// .catch(() => {
|
|
258
|
+
// //set defaults if we hit an error
|
|
259
|
+
// this.thumbnail = require('@/../assets/missing-image.svg')
|
|
260
|
+
// this.discoverId = Number(this.entry.datasetId)
|
|
261
|
+
// this.loading = false
|
|
262
|
+
// });
|
|
263
|
+
// }
|
|
264
|
+
|
|
265
|
+
// },
|
|
206
266
|
lastName: function(fullName){
|
|
207
267
|
return fullName.split(',')[0]
|
|
208
268
|
},
|
|
@@ -28,7 +28,7 @@ const capitalise = function (string) {
|
|
|
28
28
|
return string.replace(/\b\w/g, (v) => v.toUpperCase());
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
-
import GalleryHelper from "
|
|
31
|
+
import GalleryHelper from "../mixins/GalleryHelpers";
|
|
32
32
|
import Gallery from "@abi-software/gallery";
|
|
33
33
|
import "@abi-software/gallery/dist/gallery.css";
|
|
34
34
|
|
|
@@ -58,8 +58,8 @@ export default {
|
|
|
58
58
|
},
|
|
59
59
|
},
|
|
60
60
|
datasetId: {
|
|
61
|
-
type:
|
|
62
|
-
default:
|
|
61
|
+
type: String,
|
|
62
|
+
default: "",
|
|
63
63
|
},
|
|
64
64
|
datasetVersion: {
|
|
65
65
|
type: Number,
|
|
@@ -228,12 +228,7 @@ export default {
|
|
|
228
228
|
let mimetype = '';
|
|
229
229
|
let thumbnailURL = undefined;
|
|
230
230
|
if (thumbnail) {
|
|
231
|
-
thumbnailURL = this.
|
|
232
|
-
id,
|
|
233
|
-
datasetId: this.datasetId,
|
|
234
|
-
datasetVersion: this.datasetVersion,
|
|
235
|
-
file_path: thumbnail.dataset.path,
|
|
236
|
-
});
|
|
231
|
+
thumbnailURL = `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${filePath}`
|
|
237
232
|
mimetype = thumbnail.mimetype.name;
|
|
238
233
|
}
|
|
239
234
|
let action = {
|
|
@@ -349,7 +344,7 @@ export default {
|
|
|
349
344
|
return undefined
|
|
350
345
|
} else {
|
|
351
346
|
// The line below checks if there is a context file for each scaffold. If there is not, we use the first context card for each scaffold.
|
|
352
|
-
let contextIndex = this.entry
|
|
347
|
+
let contextIndex = this.entry.contextualInformation.length == this.entry.scaffolds.length ? scaffoldIndex : 0
|
|
353
348
|
return `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${this.entry.contextualInformation[contextIndex]}`
|
|
354
349
|
}
|
|
355
350
|
}
|
|
@@ -311,9 +311,12 @@ export default {
|
|
|
311
311
|
}
|
|
312
312
|
data.results.forEach(element => {
|
|
313
313
|
// match the scicrunch result with algolia result
|
|
314
|
-
let i = this.results.findIndex(res=> res.
|
|
314
|
+
let i = this.results.findIndex(res=> (res.datasetId === element.dataset_identifier) || (res.identifier === element.dataset_identifier))
|
|
315
|
+
console.log('i: ', i)
|
|
316
|
+
let name = this.results[i].name
|
|
315
317
|
// Assign scicrunch results to the object
|
|
316
318
|
Object.assign(this.results[i], element)
|
|
319
|
+
this.results[i].name = name
|
|
317
320
|
// Assign the attributes that need some processing
|
|
318
321
|
Object.assign(this.results[i],{
|
|
319
322
|
numberSamples: element.sampleSize
|
|
@@ -322,8 +325,8 @@ export default {
|
|
|
322
325
|
numberSubjects: element.subjectSize
|
|
323
326
|
? parseInt(element.subjectSize)
|
|
324
327
|
: 0,
|
|
325
|
-
updated: element.updated[0].timestamp.split("T")[0],
|
|
326
|
-
url: element.uri[0],
|
|
328
|
+
updated: element.updated ? element.updated[0].timestamp.split("T")[0] : undefined,
|
|
329
|
+
url: element.uri? element.uri[0] : undefined,
|
|
327
330
|
datasetId: element.dataset_identifier,
|
|
328
331
|
datasetRevision: element.dataset_revision,
|
|
329
332
|
datasetVersion: element.dataset_version,
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import axios from 'axios'
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
//this mixin is not used by this code base but it can be used by other
|
|
5
|
+
//projects to get a handle to various resources
|
|
6
|
+
data() {
|
|
7
|
+
return {
|
|
8
|
+
defaultImg: require('../../assets/logo-sparc-wave-primary.svg'),
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
methods: {
|
|
12
|
+
async getRequest(url, params, timeout) {
|
|
13
|
+
return await axios({
|
|
14
|
+
method: 'get',
|
|
15
|
+
url,
|
|
16
|
+
params,
|
|
17
|
+
timeout,
|
|
18
|
+
})
|
|
19
|
+
},
|
|
20
|
+
/**
|
|
21
|
+
* Returns a file path for S3.
|
|
22
|
+
* @param {String} dataset_id dataset id.
|
|
23
|
+
* @param {String} dataset_version dataset version.
|
|
24
|
+
* @param {String} file_path file path.
|
|
25
|
+
* @returns {String} full path to S3 file.
|
|
26
|
+
*/
|
|
27
|
+
getS3FilePath(dataset_id, dataset_version, file_path) {
|
|
28
|
+
const encoded_file_path = encodeURIComponent(file_path)
|
|
29
|
+
return `${dataset_id}/${dataset_version}/files/${encoded_file_path}`
|
|
30
|
+
},
|
|
31
|
+
/**
|
|
32
|
+
* Find data path in the array that matches the provide path
|
|
33
|
+
*/
|
|
34
|
+
findEntryWithPathInArray(array, path) {
|
|
35
|
+
if (path && array) {
|
|
36
|
+
for (let i = 0; i < array.length; i++) {
|
|
37
|
+
if (path === array[i].dataset.path) return array[i]
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return undefined
|
|
41
|
+
},
|
|
42
|
+
getThumbnailForPlot(plot, thumbnails) {
|
|
43
|
+
if (thumbnails && plot) {
|
|
44
|
+
return this.findEntryWithPathInArray(thumbnails, plot.datacite.isSourceOf.path[0])
|
|
45
|
+
}
|
|
46
|
+
return undefined
|
|
47
|
+
},
|
|
48
|
+
/**
|
|
49
|
+
* Use the scaffoldViews to help with finding the correct thumbnails.
|
|
50
|
+
* Use the index if the workflow stated above fails.
|
|
51
|
+
*/
|
|
52
|
+
getThumbnailForScaffold(scaffold, scaffoldViews, thumbnails, index) {
|
|
53
|
+
if (thumbnails && thumbnails.length > 0) {
|
|
54
|
+
let thumbnail = undefined
|
|
55
|
+
if (scaffold && scaffoldViews) {
|
|
56
|
+
const view = this.findEntryWithPathInArray(scaffoldViews, scaffold.datacite.isSourceOf.path[0])
|
|
57
|
+
if (view) {
|
|
58
|
+
thumbnail = this.findEntryWithPathInArray(thumbnails, view.datacite.isSourceOf.path[0])
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
if (thumbnail) {
|
|
62
|
+
return thumbnail
|
|
63
|
+
} else if (index < thumbnails.length) {
|
|
64
|
+
return thumbnails[index]
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
return undefined
|
|
68
|
+
},
|
|
69
|
+
getImageURLFromS3(apiEndpoint, info) {
|
|
70
|
+
return `${apiEndpoint}/s3-resource/${info.datasetId}/${info.datasetVersion}/files/${info.file_path}?encodeBase64=true`
|
|
71
|
+
},
|
|
72
|
+
getSegmentationThumbnailURL(apiEndpoint, info) {
|
|
73
|
+
let endpoint = `${apiEndpoint}/thumbnail/neurolucida`
|
|
74
|
+
endpoint = endpoint + `?datasetId=${info.datasetId}`
|
|
75
|
+
endpoint = endpoint + `&version=${info.datasetVersion}`
|
|
76
|
+
endpoint = endpoint + `&path=files/${info.segmentationFilePath}`
|
|
77
|
+
return endpoint
|
|
78
|
+
},
|
|
79
|
+
getThumbnailURLFromBiolucida(apiEndpoint, info) {
|
|
80
|
+
return `${apiEndpoint}/thumbnail/${info.id}`
|
|
81
|
+
},
|
|
82
|
+
getImageInfoFromBiolucida(apiEndpoint, items, info) {
|
|
83
|
+
const endpoint = `${apiEndpoint}/image/${info.id}`
|
|
84
|
+
const params = {}
|
|
85
|
+
this.getRequest(endpoint, params, 20000).then(
|
|
86
|
+
(response) => {
|
|
87
|
+
let item = items.find((x) => x.id === info.id)
|
|
88
|
+
const name = response.name
|
|
89
|
+
if (name) {
|
|
90
|
+
item.title = name
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
(reason) => {
|
|
94
|
+
if (reason.message.includes('timeout') && reason.message.includes('exceeded') && info.fetchAttempts < 3) {
|
|
95
|
+
info.fetchAttempts += 1
|
|
96
|
+
this.getImageInfoFromBiolucida(apiEndpoint, items, info)
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
return Promise.reject('Maximum iterations reached.')
|
|
100
|
+
}
|
|
101
|
+
)
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"description": "Mean luminal pressure (represented by a color field with red as high pressure and blue as low pressure) recorded from the proximal, transverse and distal sections of the pig colon are mapped on the scaffold. \n\nBaseline data was collected for 30min, followed by 15min of stimulation and 30min of post-stimulation.",
|
|
3
|
-
"heading": "Direct proximal colon stimulation",
|
|
4
|
-
"id": "sparc.science.context_data",
|
|
5
|
-
"samples": [
|
|
6
|
-
{
|
|
7
|
-
"annotation": "",
|
|
8
|
-
"description": "Manometry data recorded from pigs under direct proximal colon stimulation.",
|
|
9
|
-
"doi": "https://doi.org/10.26275/up27-ibcr",
|
|
10
|
-
"heading": "Proximal direct stimulation samples",
|
|
11
|
-
"id": "Sample 1",
|
|
12
|
-
"path": "derivative\\stim_proximal-colon_manometry.csv",
|
|
13
|
-
"view": "View 1"
|
|
14
|
-
}
|
|
15
|
-
],
|
|
16
|
-
"version": "0.1.0",
|
|
17
|
-
"views": [
|
|
18
|
-
{
|
|
19
|
-
"annotation": "--",
|
|
20
|
-
"description": "Sections of pig colon scaffold with mapped manometry data where the data are collected from. ",
|
|
21
|
-
"id": "View 1",
|
|
22
|
-
"path": "colon_Layout1_view.json",
|
|
23
|
-
"sample": "Sample 1",
|
|
24
|
-
"thumbnail": "derivative\\pig_colon_main_thumbnail.jpeg"
|
|
25
|
-
}
|
|
26
|
-
]
|
|
27
|
-
}
|