@abi-software/map-side-bar 2.3.1 → 2.4.0-alpha-1

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.
Files changed (43) hide show
  1. package/.eslintrc.js +12 -12
  2. package/.postcssrc.json +5 -5
  3. package/LICENSE +201 -201
  4. package/README.md +168 -168
  5. package/cypress.config.js +23 -23
  6. package/dist/data/pmr-sample.json +3181 -0
  7. package/dist/map-side-bar.js +15142 -9024
  8. package/dist/map-side-bar.umd.cjs +50 -103
  9. package/dist/style.css +1 -1
  10. package/package.json +77 -77
  11. package/public/data/pmr-sample.json +3181 -0
  12. package/reporter-config.json +9 -9
  13. package/src/App.vue +266 -265
  14. package/src/algolia/algolia.js +255 -242
  15. package/src/algolia/utils.js +100 -100
  16. package/src/assets/_variables.scss +43 -43
  17. package/src/assets/styles.scss +6 -6
  18. package/src/components/BadgesGroup.vue +124 -124
  19. package/src/components/ConnectivityInfo.vue +619 -619
  20. package/src/components/DatasetCard.vue +367 -357
  21. package/src/components/EventBus.js +3 -3
  22. package/src/components/ExternalResourceCard.vue +113 -113
  23. package/src/components/FlatmapDatasetCard.vue +171 -0
  24. package/src/components/ImageGallery.vue +542 -542
  25. package/src/components/PMRDatasetCard.vue +237 -0
  26. package/src/components/SearchFilters.vue +1023 -1006
  27. package/src/components/SearchHistory.vue +175 -175
  28. package/src/components/SideBar.vue +436 -436
  29. package/src/components/SidebarContent.vue +730 -603
  30. package/src/components/Tabs.vue +145 -145
  31. package/src/components/allPaths.js +5928 -0
  32. package/src/components/index.js +8 -8
  33. package/src/components/pmrTest.js +4 -0
  34. package/src/components/species-map.js +8 -8
  35. package/src/components.d.ts +2 -0
  36. package/src/exampleConnectivityInput.js +291 -291
  37. package/src/flatmapQueries/flatmapQueries.js +169 -0
  38. package/src/main.js +9 -9
  39. package/src/mixins/S3Bucket.vue +37 -37
  40. package/src/mixins/mixedPageCalculation.vue +78 -0
  41. package/static.json +6 -6
  42. package/vite.config.js +55 -55
  43. package/vuese-generator.js +65 -65
@@ -1,242 +1,255 @@
1
- /* eslint-disable no-alert, no-console */
2
- import algoliasearch from 'algoliasearch'
3
-
4
- // export `createAlgoliaClient` to use it in page components
5
- export class AlgoliaClient {
6
- constructor(algoliaId, algoliaKey, PENNSIEVE_API_LOCATION = 'https://api.pennsieve.io') {
7
- this.client = algoliasearch(
8
- algoliaId,
9
- algoliaKey
10
- )
11
- this.PENNSIEVE_API_LOCATION = PENNSIEVE_API_LOCATION
12
- this.anatomyFacetLabels = []
13
- }
14
- initIndex(ALGOLIA_INDEX) {
15
- this.index = this.client.initIndex(ALGOLIA_INDEX);
16
- }
17
-
18
- getAlgoliaFacets(propPathMapping) {
19
- const facetPropPaths = propPathMapping.map(facet => facet.facetPropPath)
20
- const facetSubpropPaths = propPathMapping.map(item => item.facetSubpropPath)
21
- let facetData = []
22
- let facetId = 0
23
- return this.index
24
- .search('', {
25
- sortFacetValuesBy: 'alpha',
26
- facets: facetPropPaths.concat(facetSubpropPaths),
27
- })
28
- .then(response => {
29
- facetPropPaths.map((facetPropPath) => {
30
- const parentFacet = propPathMapping.find(item => item.facetPropPath == facetPropPath)
31
- var children = []
32
- const responseFacets = response.facets
33
- if (responseFacets === undefined) {return}
34
- const responseFacetChildren =
35
- responseFacets[facetPropPath] == undefined // if no facets, return empty object
36
- ? {}
37
- : responseFacets[facetPropPath]
38
- const allPossibleChildrenSubfacets = parentFacet && responseFacets[parentFacet.facetSubpropPath] ? Object.keys(responseFacets[parentFacet.facetSubpropPath]) : []
39
- // Loop through all subfacets and find the ones that are children of the current facet
40
- Object.keys(responseFacetChildren).map(facet => {
41
- const childrenSubfacets = allPossibleChildrenSubfacets.reduce((filtered, childFacetInfo) => {
42
- const info = childFacetInfo.split('.');
43
- if (info.length !== 2) {
44
- return filtered;
45
- }
46
- if (facet === info[0]) {
47
- filtered.push({
48
- label: info[1],
49
- id: facetId++,
50
- facetPropPath: `${parentFacet ? parentFacet.facetSubpropPath : undefined}`
51
- });
52
- }
53
- return filtered;
54
- }, []); // Provide an empty array as the initial value
55
- let newChild = {
56
- label: facet,
57
- id: facetId++,
58
- facetPropPath: facetPropPath
59
- }
60
- if (childrenSubfacets.length > 0) {
61
- newChild.children = childrenSubfacets
62
- }
63
- children.push(newChild)
64
- })
65
- if (children.length > 0) {
66
- facetData.push({
67
- label: parentFacet ? parentFacet.label : '',
68
- id: facetId++,
69
- children: children,
70
- key: facetPropPath
71
- })
72
- }
73
- })
74
- return facetData
75
- })
76
- }
77
-
78
- // Returns all DOIs of all versions for a given discover dataset
79
- _discoverAllDois(discoverId, PENNSIEVE_API_LOCATION = 'https://api.pennsieve.io') {
80
- return new Promise(resolve => {
81
- fetch(`${PENNSIEVE_API_LOCATION}/discover/datasets/${discoverId}/versions`).then(r => r.json()).then(dataset => {
82
- resolve(dataset.map(version => version.doi))
83
- })
84
- })
85
- }
86
-
87
- // Get all dois given a list of discoverIds
88
- _expandDois(discoverIds, PENNSIEVE_API_LOCATION = 'https://api.pennsieve.io') {
89
- return new Promise(resolve => {
90
- let promiseList = discoverIds.map(discoverId => this._discoverAllDois(discoverId, PENNSIEVE_API_LOCATION))
91
- Promise.all(promiseList).then((values) => {
92
- resolve(values.flat())
93
- });
94
- })
95
- }
96
-
97
- _processResultsForCards(results) {
98
- let newResults = []
99
- let newResult = {}
100
- for (let res of results) {
101
- newResult = { ...res }
102
- newResult = {
103
- anatomy: res.anatomy ? res.anatomy.organ.map((organ => organ.curie)) : undefined,
104
- doi: res.item.curie.split(':')[1],
105
- name: res.item.name,
106
- description: res.item.description,
107
- updated: res.pennsieve ? res.pennsieve.updatedAt : undefined,
108
- publishDate: res.pennsieve ? res.pennsieve.publishDate : undefined,
109
- datasetId: res.objectID,
110
- detailsReady: false
111
- }
112
- newResults.push(newResult)
113
- }
114
- return newResults
115
- }
116
-
117
- _processAnatomy(hits) {
118
- let foundKeyWords = []
119
- let foundLabels = []
120
- let uniqueLabels = []
121
- let uniqueKeywords = []
122
- hits.forEach(hit => {
123
- if (hit.item && hit.item.keywords) {
124
- hit.item.keywords.forEach(keywordObj => {
125
- let keyword = keywordObj.keyword.toUpperCase()
126
- if (keyword.includes('UBERON') || keyword.includes('ILX')) {
127
- foundKeyWords.push(this._processUberonURL(keyword))
128
- }
129
- })
130
- }
131
- if (hit.anatomy && hit.anatomy.organ ) {
132
- hit.anatomy.organ.forEach(anatomy => {
133
- if (anatomy.curie) {
134
- foundKeyWords.push(anatomy.curie)
135
- foundLabels.push(anatomy.name)
136
- }
137
- })
138
- }
139
- })
140
- uniqueKeywords = [...new Set(foundKeyWords) ]
141
- uniqueLabels = [...new Set(foundLabels) ]
142
- this.anatomyFacetLabels = uniqueLabels
143
- return uniqueKeywords
144
- }
145
-
146
- _processUberonURL(url) {
147
- let ub = url.split('/').pop()
148
- return ub.replace('_', ':')
149
- }
150
-
151
- /**
152
- * Get Search results
153
- * This is using fetch from the Algolia API
154
- */
155
- search(filter, query = '', hitsperPage = 10, page = 1) {
156
- return new Promise(resolve => {
157
- this.index
158
- .search(query, {
159
- facets: ['*'],
160
- hitsPerPage: hitsperPage,
161
- page: page - 1,
162
- filters: filter,
163
- attributesToHighlight: [],
164
- attributesToRetrieve: [
165
- 'pennsieve.publishDate',
166
- 'pennsieve.updatedAt',
167
- 'item.curie',
168
- 'item.name',
169
- 'item.description',
170
- 'objectID',
171
- 'anatomy.organ.curie'
172
- ],
173
- })
174
- .then(response => {
175
- let searchData = {
176
- items: this._processResultsForCards(response.hits),
177
- total: response.nbHits,
178
- discoverIds: response.hits.map(r => r.pennsieve ? r.pennsieve.identifier : r.objectID),
179
- dois: response.hits.map(r => r.item.curie.split(':')[1])
180
- }
181
- resolve(searchData)
182
- })
183
- })
184
- }
185
-
186
- /**
187
- * Get key words
188
- * This is used to return all keywords for a given search. Note that you often want the hits per page to be maxed out
189
- */
190
- anatomyInSearch(filter, query = '', hitsperPage = 999999, page = 1) {
191
- return new Promise(resolve => {
192
- this.index
193
- .search(query, {
194
- facets: ['*'],
195
- hitsPerPage: hitsperPage,
196
- page: page - 1,
197
- filters: filter,
198
- attributesToHighlight: [],
199
- attributesToRetrieve: [
200
- 'objectID',
201
- 'item.keywords.keyword',
202
- 'anatomy.organ.name',
203
- 'anatomy.organ.curie'
204
- ],
205
- })
206
- .then(response => {
207
- // Saving the line below incase we want to starty using keywords again
208
- // let anatomyAsUberons = this._processAnatomy(response.hits)
209
-
210
- resolve({
211
- forFlatmap: this.processResultsForFlatmap(response.hits),
212
- forScaffold: this.processResultsForScaffold(response.hits)
213
- })
214
- })
215
- })
216
- }
217
- processResultsForFlatmap(hits) {
218
- let curieForDatsets = hits.map(h=>({
219
- id: h.objectID,
220
- terms: h.anatomy? h.anatomy.organ.map(o=>o.curie) : []
221
- }))
222
- return curieForDatsets
223
- }
224
- processResultsForScaffold(hits) {
225
- let numberOfDatasetsForAnatomy = {}
226
- hits.forEach(hit => {
227
- if (hit.anatomy && hit.anatomy.organ ) {
228
- hit.anatomy.organ.forEach(anatomy => {
229
- if (anatomy.name) {
230
- if (numberOfDatasetsForAnatomy[anatomy.name]) {
231
- numberOfDatasetsForAnatomy[anatomy.name]++
232
- } else {
233
- numberOfDatasetsForAnatomy[anatomy.name] = 1
234
- }
235
- }
236
- })
237
- }
238
- })
239
- return numberOfDatasetsForAnatomy
240
- }
241
-
242
- }
1
+ /* eslint-disable no-alert, no-console */
2
+ import algoliasearch from 'algoliasearch'
3
+
4
+ // export `createAlgoliaClient` to use it in page components
5
+ export class AlgoliaClient {
6
+ constructor(algoliaId, algoliaKey, PENNSIEVE_API_LOCATION = 'https://api.pennsieve.io') {
7
+ this.client = algoliasearch(
8
+ algoliaId,
9
+ algoliaKey
10
+ )
11
+ this.PENNSIEVE_API_LOCATION = PENNSIEVE_API_LOCATION
12
+ this.anatomyFacetLabels = []
13
+ }
14
+ initIndex(ALGOLIA_INDEX) {
15
+ this.index = this.client.initIndex(ALGOLIA_INDEX);
16
+ }
17
+
18
+ getAlgoliaFacets(propPathMapping) {
19
+ const facetPropPaths = propPathMapping.map(facet => facet.facetPropPath)
20
+ const facetSubpropPaths = propPathMapping.map(item => item.facetSubpropPath)
21
+ let facetData = []
22
+ let facetId = 0
23
+ return this.index
24
+ .search('', {
25
+ sortFacetValuesBy: 'alpha',
26
+ facets: facetPropPaths.concat(facetSubpropPaths),
27
+ })
28
+ .then(response => {
29
+ facetPropPaths.map((facetPropPath) => {
30
+ const parentFacet = propPathMapping.find(item => item.facetPropPath == facetPropPath)
31
+ var children = []
32
+ const responseFacets = response.facets
33
+ if (responseFacets === undefined) {return}
34
+ const responseFacetChildren =
35
+ responseFacets[facetPropPath] == undefined // if no facets, return empty object
36
+ ? {}
37
+ : responseFacets[facetPropPath]
38
+ const allPossibleChildrenSubfacets = parentFacet && responseFacets[parentFacet.facetSubpropPath] ? Object.keys(responseFacets[parentFacet.facetSubpropPath]) : []
39
+ // Loop through all subfacets and find the ones that are children of the current facet
40
+ Object.keys(responseFacetChildren).map(facet => {
41
+ const childrenSubfacets = allPossibleChildrenSubfacets.reduce((filtered, childFacetInfo) => {
42
+ const info = childFacetInfo.split('.');
43
+ if (info.length !== 2) {
44
+ return filtered;
45
+ }
46
+ if (facet === info[0]) {
47
+ filtered.push({
48
+ label: info[1],
49
+ id: facetId++,
50
+ facetPropPath: `${parentFacet ? parentFacet.facetSubpropPath : undefined}`
51
+ });
52
+ }
53
+ return filtered;
54
+ }, []); // Provide an empty array as the initial value
55
+ let newChild = {
56
+ label: facet,
57
+ id: facetId++,
58
+ facetPropPath: facetPropPath
59
+ }
60
+ if (childrenSubfacets.length > 0) {
61
+ newChild.children = childrenSubfacets
62
+ }
63
+ children.push(newChild)
64
+ })
65
+ if (children.length > 0) {
66
+ facetData.push({
67
+ label: parentFacet ? parentFacet.label : '',
68
+ id: facetId++,
69
+ children: children,
70
+ key: facetPropPath
71
+ })
72
+ }
73
+ })
74
+ return facetData
75
+ })
76
+ }
77
+
78
+ // Returns all DOIs of all versions for a given discover dataset
79
+ _discoverAllDois(discoverId, PENNSIEVE_API_LOCATION = 'https://api.pennsieve.io') {
80
+ return new Promise(resolve => {
81
+ fetch(`${PENNSIEVE_API_LOCATION}/discover/datasets/${discoverId}/versions`).then(r => r.json()).then(dataset => {
82
+ resolve(dataset.map(version => version.doi))
83
+ })
84
+ })
85
+ }
86
+
87
+ // Get all dois given a list of discoverIds
88
+ _expandDois(discoverIds, PENNSIEVE_API_LOCATION = 'https://api.pennsieve.io') {
89
+ return new Promise(resolve => {
90
+ let promiseList = discoverIds.map(discoverId => this._discoverAllDois(discoverId, PENNSIEVE_API_LOCATION))
91
+ Promise.all(promiseList).then((values) => {
92
+ resolve(values.flat())
93
+ });
94
+ })
95
+ }
96
+
97
+ _processResultsForCards(results) {
98
+ let newResults = []
99
+ let newResult = {}
100
+ for (let res of results) {
101
+ newResult = { ...res }
102
+ newResult = {
103
+ dataSource: 'SPARC',
104
+ anatomy: res.anatomy ? res.anatomy.organ.map((organ => organ.curie)) : undefined,
105
+ doi: res.item.curie.split(':')[1],
106
+ name: res.item.name,
107
+ description: res.item.description,
108
+ updated: res.pennsieve ? res.pennsieve.updatedAt : undefined,
109
+ publishDate: res.pennsieve ? res.pennsieve.publishDate : undefined,
110
+ datasetId: res.objectID,
111
+ detailsReady: false
112
+ }
113
+ newResults.push(newResult)
114
+ }
115
+ return newResults
116
+ }
117
+
118
+ _processAnatomy(hits) {
119
+ let foundKeyWords = []
120
+ let foundLabels = []
121
+ let uniqueLabels = []
122
+ let uniqueKeywords = []
123
+ hits.forEach(hit => {
124
+ if (hit.item && hit.item.keywords) {
125
+ hit.item.keywords.forEach(keywordObj => {
126
+ let keyword = keywordObj.keyword.toUpperCase()
127
+ if (keyword.includes('UBERON') || keyword.includes('ILX')) {
128
+ foundKeyWords.push(this._processUberonURL(keyword))
129
+ }
130
+ })
131
+ }
132
+ if (hit.anatomy && hit.anatomy.organ ) {
133
+ hit.anatomy.organ.forEach(anatomy => {
134
+ if (anatomy.curie) {
135
+ foundKeyWords.push(anatomy.curie)
136
+ foundLabels.push(anatomy.name)
137
+ }
138
+ })
139
+ }
140
+ })
141
+ uniqueKeywords = [...new Set(foundKeyWords) ]
142
+ uniqueLabels = [...new Set(foundLabels) ]
143
+ this.anatomyFacetLabels = uniqueLabels
144
+ return uniqueKeywords
145
+ }
146
+
147
+ _processUberonURL(url) {
148
+ let ub = url.split('/').pop()
149
+ return ub.replace('_', ':')
150
+ }
151
+
152
+ /**
153
+ * Get Search results
154
+ * This is using fetch from the Algolia API
155
+ */
156
+ search(filter, query = '', offset = 0, length = 8) {
157
+ // If the length is 0, return an empty result
158
+ if (length === 0) {
159
+ return new Promise(resolve => {
160
+ resolve({
161
+ items: [],
162
+ total: 0,
163
+ discoverIds: [],
164
+ dois: []
165
+ })
166
+ })
167
+ } else {
168
+ return new Promise(resolve => {
169
+ this.index
170
+ .search(query, {
171
+ facets: ['*'],
172
+ offset: offset,
173
+ length: length,
174
+ filters: filter,
175
+ attributesToHighlight: [],
176
+ attributesToRetrieve: [
177
+ 'pennsieve.publishDate',
178
+ 'pennsieve.updatedAt',
179
+ 'item.curie',
180
+ 'item.name',
181
+ 'item.description',
182
+ 'objectID',
183
+ 'anatomy.organ.curie'
184
+ ],
185
+ })
186
+ .then(response => {
187
+ let searchData = {
188
+ items: this._processResultsForCards(response.hits),
189
+ total: response.nbHits,
190
+ discoverIds: response.hits.map(r => r.pennsieve ? r.pennsieve.identifier : r.objectID),
191
+ dois: response.hits.map(r => r.item.curie.split(':')[1])
192
+ }
193
+ resolve(searchData)
194
+ })
195
+ })
196
+ }
197
+ }
198
+
199
+ /**
200
+ * Get key words
201
+ * This is used to return all keywords for a given search. Note that you often want the hits per page to be maxed out
202
+ */
203
+ anatomyInSearch(filter, query = '', hitsperPage = 999999, page = 1) {
204
+ return new Promise(resolve => {
205
+ this.index
206
+ .search(query, {
207
+ facets: ['*'],
208
+ hitsPerPage: hitsperPage,
209
+ page: page - 1,
210
+ filters: filter,
211
+ attributesToHighlight: [],
212
+ attributesToRetrieve: [
213
+ 'objectID',
214
+ 'item.keywords.keyword',
215
+ 'anatomy.organ.name',
216
+ 'anatomy.organ.curie'
217
+ ],
218
+ })
219
+ .then(response => {
220
+ // Saving the line below incase we want to starty using keywords again
221
+ // let anatomyAsUberons = this._processAnatomy(response.hits)
222
+
223
+ resolve({
224
+ forFlatmap: this.processResultsForFlatmap(response.hits),
225
+ forScaffold: this.processResultsForScaffold(response.hits)
226
+ })
227
+ })
228
+ })
229
+ }
230
+ processResultsForFlatmap(hits) {
231
+ let curieForDatsets = hits.map(h=>({
232
+ id: h.objectID,
233
+ terms: h.anatomy? h.anatomy.organ.map(o=>o.curie) : []
234
+ }))
235
+ return curieForDatsets
236
+ }
237
+ processResultsForScaffold(hits) {
238
+ let numberOfDatasetsForAnatomy = {}
239
+ hits.forEach(hit => {
240
+ if (hit.anatomy && hit.anatomy.organ ) {
241
+ hit.anatomy.organ.forEach(anatomy => {
242
+ if (anatomy.name) {
243
+ if (numberOfDatasetsForAnatomy[anatomy.name]) {
244
+ numberOfDatasetsForAnatomy[anatomy.name]++
245
+ } else {
246
+ numberOfDatasetsForAnatomy[anatomy.name] = 1
247
+ }
248
+ }
249
+ })
250
+ }
251
+ })
252
+ return numberOfDatasetsForAnatomy
253
+ }
254
+
255
+ }