@abi-software/map-side-bar 2.4.0-alpha-1 → 2.4.0-isan-0
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/.eslintrc.js +12 -12
- package/.postcssrc.json +5 -5
- package/LICENSE +201 -201
- package/README.md +168 -168
- package/cypress.config.js +23 -23
- package/dist/map-side-bar.js +9362 -15112
- package/dist/map-side-bar.umd.cjs +103 -50
- package/dist/style.css +1 -1
- package/package.json +77 -77
- package/reporter-config.json +9 -9
- package/src/App.vue +268 -266
- package/src/algolia/algolia.js +256 -255
- package/src/algolia/utils.js +105 -100
- package/src/assets/_variables.scss +43 -43
- package/src/assets/styles.scss +6 -6
- package/src/components/BadgesGroup.vue +124 -124
- package/src/components/ConnectivityInfo.vue +619 -619
- package/src/components/DatasetCard.vue +367 -367
- package/src/components/EventBus.js +3 -3
- package/src/components/ExternalResourceCard.vue +113 -113
- package/src/components/ImageGallery.vue +542 -542
- package/src/components/PMRDatasetCard.vue +303 -237
- package/src/components/SearchFilters.vue +1023 -1023
- package/src/components/SearchHistory.vue +175 -175
- package/src/components/SideBar.vue +456 -436
- package/src/components/SidebarContent.vue +710 -730
- package/src/components/Tabs.vue +145 -145
- package/src/components/index.js +8 -8
- package/src/components/species-map.js +8 -8
- package/src/components.d.ts +0 -1
- package/src/exampleConnectivityInput.js +291 -291
- package/src/flatmapQueries/flatmapQueries.js +220 -168
- package/src/main.js +9 -9
- package/src/mixins/S3Bucket.vue +37 -37
- package/src/mixins/mixedPageCalculation.vue +102 -78
- package/static.json +6 -6
- package/vite.config.js +55 -55
- package/vuese-generator.js +65 -65
- package/dist/data/pmr-sample.json +0 -3181
- package/public/data/pmr-sample.json +0 -3181
- package/src/components/FlatmapDatasetCard.vue +0 -171
- package/src/components/allPaths.js +0 -5928
- package/src/components/pmrTest.js +0 -4
|
@@ -1,169 +1,221 @@
|
|
|
1
|
-
function transformKeyValueArrayToObject(data) {
|
|
2
|
-
|
|
3
|
-
data.
|
|
4
|
-
acc
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
this.
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
this.
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
this.
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
this.
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
})
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
this.
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
let
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
.
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
}
|
|
168
|
-
|
|
1
|
+
function transformKeyValueArrayToObject(data) {
|
|
2
|
+
try {
|
|
3
|
+
let result = data.values.map(valueArray =>
|
|
4
|
+
data.keys.reduce((acc, key, index) => {
|
|
5
|
+
acc[key] = valueArray[index];
|
|
6
|
+
return acc;
|
|
7
|
+
}, {})
|
|
8
|
+
)
|
|
9
|
+
return result
|
|
10
|
+
} catch (error) {
|
|
11
|
+
console.error(`Error occured during conversion of Key Value Array to Object: ${error}`)
|
|
12
|
+
return {}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// remove duplicates by stringifying the objects
|
|
18
|
+
const removeDuplicates = function (arrayOfAnything) {
|
|
19
|
+
if (!arrayOfAnything) return []
|
|
20
|
+
return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
|
|
21
|
+
JSON.parse(e)
|
|
22
|
+
)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
let FlatmapQueries = function () {
|
|
27
|
+
this.initialise = function (flatmapApi) {
|
|
28
|
+
this.flatmapApi = flatmapApi
|
|
29
|
+
this.features = []
|
|
30
|
+
this.limit = 10
|
|
31
|
+
this.offset = 0
|
|
32
|
+
this.numberOfHits = 0
|
|
33
|
+
this.sqlPreOffset = ''
|
|
34
|
+
this.lookup = {}
|
|
35
|
+
this.createLookup()
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
this.updateOffset = function (offset) {
|
|
39
|
+
this.offset = offset
|
|
40
|
+
}
|
|
41
|
+
this.updateLimit = function (limit) {
|
|
42
|
+
this.limit = limit
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
this.offsetText = function () {
|
|
46
|
+
return 'limit ' + this.limit + ' offset ' + this.offset
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
this.createTermSQL = function (terms) {
|
|
50
|
+
let sql = ''
|
|
51
|
+
let validFilter = false
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
if (terms && terms.length > 0) {
|
|
55
|
+
sql += 'and '
|
|
56
|
+
terms.forEach((t, i) => {
|
|
57
|
+
if (i == 0) {
|
|
58
|
+
sql += '('
|
|
59
|
+
}
|
|
60
|
+
if (t !== '') {
|
|
61
|
+
sql += `m.term='${t}'`
|
|
62
|
+
validFilter = true
|
|
63
|
+
if (i < terms.length - 1) {
|
|
64
|
+
sql += ' or '
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
if (i == terms.length - 1) {
|
|
68
|
+
sql += ') '
|
|
69
|
+
}
|
|
70
|
+
})
|
|
71
|
+
}
|
|
72
|
+
if (!validFilter) {
|
|
73
|
+
sql = ''
|
|
74
|
+
}
|
|
75
|
+
return sql
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
this.pmrSQL = function (terms=[], search='') {
|
|
80
|
+
let sql = 'select distinct m.term, m.exposure, m.score, m.workspace, d.metadata from pmr_text '
|
|
81
|
+
sql += 'as t left join pmr_metadata as d on t.entity=d.entity left join pmr_models as m on m.exposure=t.entity '
|
|
82
|
+
sql += 'where d.metadata is not null '
|
|
83
|
+
|
|
84
|
+
// add filters for the terms
|
|
85
|
+
const termsSql = this.createTermSQL(terms)
|
|
86
|
+
sql += termsSql
|
|
87
|
+
|
|
88
|
+
// Add the text search
|
|
89
|
+
if (search && search !== '') {
|
|
90
|
+
sql += `and (t.pmr_text match '${search}')`
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// Add exposure and score filters if we aren't text searching
|
|
94
|
+
if (!search || search === '') {
|
|
95
|
+
sql += 'and m.exposure is not null and score > 0.69'
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// group by exposure
|
|
99
|
+
sql += ' group by m.exposure'
|
|
100
|
+
|
|
101
|
+
this.sqlPreOffset = sql
|
|
102
|
+
|
|
103
|
+
// add the limit and offset for pagination
|
|
104
|
+
sql += ' ' + this.offsetText() + ';'
|
|
105
|
+
|
|
106
|
+
console.log(sql)
|
|
107
|
+
return sql
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
this.convertTermsToIds = function (terms) {
|
|
111
|
+
return terms.map(t => this.lookUpId(t))
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
this.labelSQL = function (){
|
|
115
|
+
return "select entity, label from labels"
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
this.countSQL = function (sql) {
|
|
119
|
+
sql = `select count(*) from (${sql})`
|
|
120
|
+
return sql
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
this.flatmapQuery = function (sql) {
|
|
125
|
+
const data = { sql: sql }
|
|
126
|
+
return fetch(`${this.flatmapApi}knowledge/query/`, {
|
|
127
|
+
method: 'POST',
|
|
128
|
+
headers: {
|
|
129
|
+
'Content-Type': 'application/json',
|
|
130
|
+
},
|
|
131
|
+
body: JSON.stringify(data),
|
|
132
|
+
})
|
|
133
|
+
.then((response) => response.json())
|
|
134
|
+
.catch((error) => {
|
|
135
|
+
console.error('Error:', error)
|
|
136
|
+
})
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
this.processFilters = function (filters) {
|
|
140
|
+
let featureLabels = []
|
|
141
|
+
filters.forEach((f) => {
|
|
142
|
+
if (f.label !== 'Show all' && f.label !== 'PMR')
|
|
143
|
+
featureLabels.push(f.facet)
|
|
144
|
+
})
|
|
145
|
+
return featureLabels
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
this.pmrSearch = function (filters=[], search='') {
|
|
151
|
+
let features = this.processFilters(filters)
|
|
152
|
+
let featureIds = this.convertTermsToIds(features)
|
|
153
|
+
return new Promise((resolve, reject) => {
|
|
154
|
+
this.flatmapQuery(this.pmrSQL(featureIds, search))
|
|
155
|
+
.then(data => {
|
|
156
|
+
const pd = this.processPMRData(data, featureIds)
|
|
157
|
+
this.setAvailableFeatures(pd)
|
|
158
|
+
|
|
159
|
+
// get the number of hits for pagination
|
|
160
|
+
this.flatmapQuery(this.countSQL(this.sqlPreOffset)).then(data => {
|
|
161
|
+
this.numberOfHits = data.values[0][0]
|
|
162
|
+
resolve(pd);
|
|
163
|
+
})
|
|
164
|
+
})
|
|
165
|
+
.catch(reject);
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// setAvailableFeatures returns the available features in the flatmap for filtering
|
|
170
|
+
// pd is the processed data from the flatmap
|
|
171
|
+
this.setAvailableFeatures = function (pd) {
|
|
172
|
+
pd.forEach((d) => {
|
|
173
|
+
Object.keys(d).forEach((key) => {
|
|
174
|
+
if (!this.features.includes(key)) {
|
|
175
|
+
this.features.push(key)
|
|
176
|
+
}
|
|
177
|
+
})
|
|
178
|
+
})
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
this.processPMRData = function (data, featureIds=[]) {
|
|
183
|
+
// Convert the flatmap data into an array of objects
|
|
184
|
+
let dataObj = transformKeyValueArrayToObject(data)
|
|
185
|
+
|
|
186
|
+
// Only use the results with metadata
|
|
187
|
+
let metadataResults = dataObj.filter(d => d.metadata)
|
|
188
|
+
let metadataOnly = metadataResults.map(d => {
|
|
189
|
+
let md = JSON.parse(d.metadata)
|
|
190
|
+
md.dataSource = 'PMR'
|
|
191
|
+
return md
|
|
192
|
+
})
|
|
193
|
+
|
|
194
|
+
// If there are featureIds, filter the results
|
|
195
|
+
if (featureIds.length > 0) {
|
|
196
|
+
metadataOnly = metadataOnly.filter(d => featureIds.includes(d.term))
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
// Remove duplicates
|
|
200
|
+
let uniqueResults = removeDuplicates(metadataOnly)
|
|
201
|
+
return uniqueResults
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
this.createLookup = function () {
|
|
205
|
+
this.flatmapQuery(this.labelSQL())
|
|
206
|
+
.then(data => {
|
|
207
|
+
data.values.forEach(d => {
|
|
208
|
+
if (d[1] && (typeof d[1] === 'string' || d[1] instanceof String)) {
|
|
209
|
+
this.lookup[d[1].toLowerCase()] = d[0]
|
|
210
|
+
}
|
|
211
|
+
})
|
|
212
|
+
})
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
this.lookUpId = function (label) {
|
|
216
|
+
return this.lookup[label.toLowerCase()]
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
}
|
|
220
|
+
|
|
169
221
|
export default FlatmapQueries
|
package/src/main.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { createApp } from 'vue'
|
|
2
|
-
import App from './App.vue'
|
|
3
|
-
import MapSideBar from './components/SideBar.vue'
|
|
4
|
-
|
|
5
|
-
const app = createApp(App);
|
|
6
|
-
|
|
7
|
-
app.component('MapSideBar', MapSideBar)
|
|
8
|
-
|
|
9
|
-
app.mount("#app");
|
|
1
|
+
import { createApp } from 'vue'
|
|
2
|
+
import App from './App.vue'
|
|
3
|
+
import MapSideBar from './components/SideBar.vue'
|
|
4
|
+
|
|
5
|
+
const app = createApp(App);
|
|
6
|
+
|
|
7
|
+
app.component('MapSideBar', MapSideBar)
|
|
8
|
+
|
|
9
|
+
app.mount("#app");
|
package/src/mixins/S3Bucket.vue
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
name: "S3Bucket",
|
|
4
|
-
data() {
|
|
5
|
-
return {
|
|
6
|
-
s3Bucket: undefined,
|
|
7
|
-
s3Prefix: "",
|
|
8
|
-
};
|
|
9
|
-
},
|
|
10
|
-
methods: {
|
|
11
|
-
updateS3Bucket: function(s3uri) {
|
|
12
|
-
this.s3Bucket = undefined;
|
|
13
|
-
if (s3uri) {
|
|
14
|
-
const substring = s3uri.split("//")[1];
|
|
15
|
-
if (substring) {
|
|
16
|
-
this.s3Bucket = substring.split("/")[0];
|
|
17
|
-
const n = substring.indexOf('/');
|
|
18
|
-
this.s3Prefix = substring.substring(n + 1);
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
getS3Args: function() {
|
|
24
|
-
if (this.s3Bucket) {
|
|
25
|
-
return `?s3BucketName=${this.s3Bucket}`
|
|
26
|
-
}
|
|
27
|
-
return "";
|
|
28
|
-
},
|
|
29
|
-
getS3Prefix: function() {
|
|
30
|
-
return this.s3Prefix;
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
|
|
34
|
-
};
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
|
-
|
|
1
|
+
<script>
|
|
2
|
+
export default {
|
|
3
|
+
name: "S3Bucket",
|
|
4
|
+
data() {
|
|
5
|
+
return {
|
|
6
|
+
s3Bucket: undefined,
|
|
7
|
+
s3Prefix: "",
|
|
8
|
+
};
|
|
9
|
+
},
|
|
10
|
+
methods: {
|
|
11
|
+
updateS3Bucket: function(s3uri) {
|
|
12
|
+
this.s3Bucket = undefined;
|
|
13
|
+
if (s3uri) {
|
|
14
|
+
const substring = s3uri.split("//")[1];
|
|
15
|
+
if (substring) {
|
|
16
|
+
this.s3Bucket = substring.split("/")[0];
|
|
17
|
+
const n = substring.indexOf('/');
|
|
18
|
+
this.s3Prefix = substring.substring(n + 1);
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
getS3Args: function() {
|
|
24
|
+
if (this.s3Bucket) {
|
|
25
|
+
return `?s3BucketName=${this.s3Bucket}`
|
|
26
|
+
}
|
|
27
|
+
return "";
|
|
28
|
+
},
|
|
29
|
+
getS3Prefix: function() {
|
|
30
|
+
return this.s3Prefix;
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
|
|
34
|
+
};
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
|