@abi-software/map-side-bar 2.14.1-simulation.5 → 2.14.1-simulation.7
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.js +4028 -4034
- package/dist/map-side-bar.umd.cjs +61 -61
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/DatasetCard.vue +5 -5
- package/src/components/DatasetExplorer.vue +3 -1
- package/src/components/FileBrowser.vue +101 -81
package/package.json
CHANGED
|
@@ -265,7 +265,7 @@ export default {
|
|
|
265
265
|
}
|
|
266
266
|
}
|
|
267
267
|
let action = {
|
|
268
|
-
label:
|
|
268
|
+
label: baseName(filePath),
|
|
269
269
|
resource: flatmap.associated_flatmap.identifier,
|
|
270
270
|
title: 'View Flatmap',
|
|
271
271
|
type: 'Flatmap',
|
|
@@ -354,7 +354,7 @@ export default {
|
|
|
354
354
|
}
|
|
355
355
|
|
|
356
356
|
let action = {
|
|
357
|
-
label:
|
|
357
|
+
label: baseName(filePath),
|
|
358
358
|
resource: resource,
|
|
359
359
|
s3uri: this.entry.s3uri,
|
|
360
360
|
title: 'View plot',
|
|
@@ -400,7 +400,7 @@ export default {
|
|
|
400
400
|
mimetype = thumbnail.mimetype.name
|
|
401
401
|
}
|
|
402
402
|
let action = {
|
|
403
|
-
label:
|
|
403
|
+
label: baseName(filePath),
|
|
404
404
|
resource: `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix()}files/${filePath}${this.getS3Args()}`,
|
|
405
405
|
title: "View 3D scaffold",
|
|
406
406
|
type: "Scaffold",
|
|
@@ -482,7 +482,7 @@ export default {
|
|
|
482
482
|
this.envVars.TEST_DATA_LOCATION)
|
|
483
483
|
}
|
|
484
484
|
let action = {
|
|
485
|
-
label:
|
|
485
|
+
label: baseName(filePath),
|
|
486
486
|
resource: resource,
|
|
487
487
|
s3uri: this.entry.s3uri,
|
|
488
488
|
title: 'View simulation',
|
|
@@ -514,7 +514,7 @@ export default {
|
|
|
514
514
|
let mimetype = ''
|
|
515
515
|
let resource = protocol.protocol
|
|
516
516
|
let action = {
|
|
517
|
-
label:
|
|
517
|
+
label: baseName(protocol.csv_file),
|
|
518
518
|
csv_file: protocol.csv_file,
|
|
519
519
|
columns: protocol.columns,
|
|
520
520
|
resource: resource,
|
|
@@ -244,9 +244,9 @@ export default {
|
|
|
244
244
|
},
|
|
245
245
|
methods: {
|
|
246
246
|
fileActionTriggered: function(action) {
|
|
247
|
-
this.fileBrowserVisible = false
|
|
248
247
|
EventBus.emit('PopoverActionClick', action)
|
|
249
248
|
EventBus.emit('contextUpdate', action) // Pass to mapintegratedvuer
|
|
249
|
+
this.fileBrowserVisible = true
|
|
250
250
|
},
|
|
251
251
|
fileInfoReady: function(payload) {
|
|
252
252
|
if (this.fileSearch.onGoing) {
|
|
@@ -828,4 +828,6 @@ export default {
|
|
|
828
828
|
}
|
|
829
829
|
}
|
|
830
830
|
|
|
831
|
+
|
|
832
|
+
|
|
831
833
|
</style>
|
|
@@ -1,101 +1,111 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
2
|
+
<div class="file-browser-container">
|
|
3
3
|
<div class="badges-container">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
/>
|
|
10
|
-
</div>
|
|
11
|
-
<el-table
|
|
12
|
-
v-if="fileLists"
|
|
13
|
-
:data="fileLists"
|
|
14
|
-
style="width: 100%;"
|
|
15
|
-
height="600"
|
|
16
|
-
:stripe="true"
|
|
17
|
-
>
|
|
18
|
-
<el-table-column type="expand">
|
|
19
|
-
<template #default="props">
|
|
20
|
-
<div class="file-details" m="4">
|
|
21
|
-
<p m="t-0 b-2" v-if="props.row.description">
|
|
22
|
-
<b>Description:</b> {{ props.row.description }}
|
|
23
|
-
</p>
|
|
24
|
-
<p m="t-0 b-2">
|
|
25
|
-
<b>File path:</b> {{ props.row.filePath }}
|
|
26
|
-
</p>
|
|
27
|
-
<p m="t-0 b-2" v-if="props.row.protocol">
|
|
28
|
-
<b>Protocol</b>: {{ props.row.protocol }}
|
|
29
|
-
</p>
|
|
30
|
-
<div v-for="(val, key) in props.row.columns">
|
|
31
|
-
<p :key="key" m="t-0 b-2"><b>Column {{ key + 1 }}</b>: {{ val }}</p>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
</template>
|
|
35
|
-
</el-table-column>
|
|
36
|
-
<el-table-column
|
|
37
|
-
prop="thumbnail"
|
|
38
|
-
label="Thumbnail"
|
|
39
|
-
width="170"
|
|
40
|
-
>
|
|
41
|
-
<template #default="scope">
|
|
42
|
-
<el-image
|
|
43
|
-
v-if="scope.row.thumbnail"
|
|
44
|
-
:src="scope.row.thumbnail"
|
|
45
|
-
style="max-width: 150px; max-height: 150px"
|
|
46
|
-
fit="contain"
|
|
47
|
-
lazy
|
|
48
|
-
/>
|
|
49
|
-
</template>
|
|
50
|
-
</el-table-column>
|
|
51
|
-
<el-table-column
|
|
52
|
-
prop="fileName"
|
|
53
|
-
label="File name"
|
|
54
|
-
width="200"
|
|
55
|
-
class-name="column-text"
|
|
4
|
+
<BadgesGroup
|
|
5
|
+
:displayDataset="false"
|
|
6
|
+
:displayText="false"
|
|
7
|
+
:items="items"
|
|
8
|
+
@categoryChanged="categoryChanged"
|
|
56
9
|
/>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
10
|
+
</div>
|
|
11
|
+
<div class="table-container">
|
|
12
|
+
<el-table
|
|
13
|
+
v-if="fileLists"
|
|
14
|
+
:data="fileLists"
|
|
15
|
+
style="width: 100%;"
|
|
16
|
+
height="100%"
|
|
17
|
+
:stripe="true"
|
|
65
18
|
>
|
|
66
|
-
<
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
19
|
+
<el-table-column type="expand">
|
|
20
|
+
<template #default="props">
|
|
21
|
+
<div class="file-details" m="4">
|
|
22
|
+
<p m="t-0 b-2" v-if="props.row.description">
|
|
23
|
+
<b>>Description:</b> {{ props.row.description }}
|
|
24
|
+
</p>
|
|
25
|
+
<p m="t-0 b-2" v-if="props.row.protocol">
|
|
26
|
+
<b>Protocol</b>: {{ props.row.protocol }}
|
|
27
|
+
</p>
|
|
28
|
+
<div v-for="(val, key) in props.row.columns">
|
|
29
|
+
<p :key="key" m="t-0 b-2">Column {{ key + 1 }}: {{ val }}</p>
|
|
30
|
+
</div>
|
|
31
|
+
<p m="t-0 b-2">
|
|
32
|
+
<b>File path:</b> {{ props.row.filePath }}
|
|
33
|
+
</p>
|
|
34
|
+
</div>
|
|
35
|
+
</template>
|
|
36
|
+
</el-table-column>
|
|
37
|
+
<el-table-column
|
|
38
|
+
prop="thumbnail"
|
|
39
|
+
label="Thumbnail"
|
|
40
|
+
width="170"
|
|
41
|
+
>
|
|
42
|
+
<template #default="scope">
|
|
43
|
+
<el-image
|
|
44
|
+
v-if="scope.row.thumbnail"
|
|
45
|
+
:src="scope.row.thumbnail"
|
|
46
|
+
style="max-width: 150px; max-height: 150px"
|
|
47
|
+
fit="contain"
|
|
48
|
+
lazy
|
|
49
|
+
/>
|
|
50
|
+
</template>
|
|
51
|
+
</el-table-column>
|
|
52
|
+
<el-table-column
|
|
53
|
+
prop="fileName"
|
|
54
|
+
label="File name"
|
|
55
|
+
width="200"
|
|
56
|
+
class-name="column-text"
|
|
57
|
+
/>
|
|
58
|
+
<el-table-column
|
|
59
|
+
prop="type"
|
|
60
|
+
label="Type"
|
|
61
|
+
width="100"
|
|
62
|
+
class-name="column-text"
|
|
63
|
+
/>
|
|
64
|
+
<el-table-column
|
|
65
|
+
fixed="right"
|
|
66
|
+
>
|
|
67
|
+
<template #header>
|
|
68
|
+
<el-input v-model="search" size="small" placeholder="Type to search" clearable/>
|
|
69
|
+
</template>
|
|
70
|
+
<template #default="scope">
|
|
71
|
+
<el-button
|
|
72
|
+
class="file-button"
|
|
73
|
+
@click="handleView(scope.row)"
|
|
74
|
+
:icon="ElIconView"
|
|
75
|
+
type="primary"
|
|
76
|
+
/>
|
|
77
|
+
</template>
|
|
78
|
+
</el-table-column>
|
|
79
|
+
</el-table>
|
|
80
|
+
</div>
|
|
79
81
|
</div>
|
|
80
82
|
</template>
|
|
81
83
|
|
|
82
84
|
<script>
|
|
83
85
|
//provide the s3Bucket related methods and data.
|
|
86
|
+
import { shallowRef } from 'vue';
|
|
84
87
|
import BadgesGroup from './BadgesGroup.vue'
|
|
85
88
|
import {
|
|
86
89
|
ElButton as Button,
|
|
87
90
|
ElImage as Image,
|
|
91
|
+
ElIcon as Icon,
|
|
88
92
|
ElInput as Input,
|
|
89
93
|
ElTable as Table,
|
|
90
94
|
ElTableColumn as TableColumn
|
|
91
95
|
} from "element-plus";
|
|
92
96
|
import { ref } from 'vue'
|
|
97
|
+
import {
|
|
98
|
+
View as ElIconView,
|
|
99
|
+
} from '@element-plus/icons-vue'
|
|
100
|
+
|
|
93
101
|
|
|
94
102
|
export default {
|
|
95
103
|
name: 'FileBrowser',
|
|
96
104
|
components: {
|
|
97
105
|
BadgesGroup,
|
|
98
106
|
Button,
|
|
107
|
+
ElIconView,
|
|
108
|
+
Icon,
|
|
99
109
|
Image,
|
|
100
110
|
Input,
|
|
101
111
|
Table,
|
|
@@ -104,6 +114,7 @@ export default {
|
|
|
104
114
|
data() {
|
|
105
115
|
return {
|
|
106
116
|
category: "All",
|
|
117
|
+
ElIconView: shallowRef(ElIconView),
|
|
107
118
|
items: {
|
|
108
119
|
Dataset: [],
|
|
109
120
|
Flatmaps:[],
|
|
@@ -119,13 +130,6 @@ export default {
|
|
|
119
130
|
categoryChanged: function(name) {
|
|
120
131
|
this.category = name
|
|
121
132
|
},
|
|
122
|
-
getActionLabel: function(type) {
|
|
123
|
-
if (type === "Simulations" || type === "Protocol Data") {
|
|
124
|
-
return "Run"
|
|
125
|
-
} else {
|
|
126
|
-
return "View"
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
133
|
setSearchTerm: function(searchTerm) {
|
|
130
134
|
this.search = searchTerm
|
|
131
135
|
},
|
|
@@ -225,8 +229,24 @@ export default {
|
|
|
225
229
|
}
|
|
226
230
|
}
|
|
227
231
|
|
|
232
|
+
.file-button {
|
|
233
|
+
border-radius: 50%;
|
|
234
|
+
width: 26px;
|
|
235
|
+
height: 26px;
|
|
236
|
+
padding:5px;
|
|
237
|
+
:deep(svg) {
|
|
238
|
+
scale: 1.2;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
|
|
228
242
|
.file-details {
|
|
229
243
|
padding-left: 8px;
|
|
230
244
|
font-size: 12px;
|
|
231
245
|
}
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
.file-browser-container {
|
|
249
|
+
max-height: 75vh;
|
|
250
|
+
overflow: auto;
|
|
251
|
+
}
|
|
232
252
|
</style>
|