@abi-software/map-utilities 1.5.0-beta.3 → 1.5.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/package.json
CHANGED
|
@@ -1,152 +1,195 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="connectivity-list">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
<div ref="connectivityList" class="connectivity-list">
|
|
3
|
+
<el-popover
|
|
4
|
+
width="250"
|
|
5
|
+
:show-arrow="false"
|
|
6
|
+
trigger="manual"
|
|
7
|
+
:teleported="false"
|
|
8
|
+
placement="left-start"
|
|
9
|
+
:visible="(connectivityError.errorConnectivities ? true: false)"
|
|
10
|
+
popper-class="connectivity-error-container"
|
|
11
|
+
>
|
|
12
|
+
<template #reference>
|
|
13
|
+
<div class="connectivity-alert"
|
|
14
|
+
:style="{ top: alertTop + 'px' }">
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
<template #default>
|
|
18
|
+
<strong>{{ connectivityError.errorConnectivities }}</strong>
|
|
19
|
+
{{ connectivityError.errorMessage }}
|
|
20
|
+
</template>
|
|
21
|
+
</el-popover>
|
|
22
|
+
{{ entry.paths }}
|
|
23
|
+
<div v-if="origins && origins.length > 0" class="block">
|
|
24
|
+
<div class="attribute-title-container">
|
|
25
|
+
<span class="attribute-title">Origin</span>
|
|
26
|
+
<el-popover
|
|
27
|
+
width="250"
|
|
28
|
+
trigger="hover"
|
|
29
|
+
:teleported="false"
|
|
30
|
+
popper-class="popover-origin-help"
|
|
31
|
+
>
|
|
32
|
+
<template #reference>
|
|
33
|
+
<el-icon class="info"><el-icon-warning /></el-icon>
|
|
34
|
+
</template>
|
|
35
|
+
<span style="word-break: keep-all">
|
|
36
|
+
<i>Origin</i> {{ originDescription }}
|
|
37
|
+
</span>
|
|
38
|
+
</el-popover>
|
|
39
|
+
</div>
|
|
40
|
+
<div
|
|
41
|
+
v-for="(origin, i) in origins"
|
|
42
|
+
class="attribute-content"
|
|
43
|
+
:origin-item-label="origin"
|
|
44
|
+
:key="origin"
|
|
45
|
+
@mouseenter="onConnectivityHovered(origin, $event)"
|
|
46
|
+
@mouseleave="onConnectivityHovered()"
|
|
47
|
+
>
|
|
48
|
+
<el-popover
|
|
49
|
+
width="150"
|
|
50
|
+
trigger="hover"
|
|
51
|
+
:teleported="false"
|
|
52
|
+
popper-class="popover-origin-help"
|
|
53
|
+
>
|
|
54
|
+
<template #reference>
|
|
55
|
+
<el-icon
|
|
56
|
+
class="magnify-glass"
|
|
57
|
+
v-show="shouldShowMagnifyGlass(origin,)"
|
|
58
|
+
@click="onConnectivityClicked(origin)"
|
|
59
|
+
>
|
|
60
|
+
<el-icon-search />
|
|
61
|
+
</el-icon>
|
|
62
|
+
</template>
|
|
63
|
+
<span>Search connectivity</span>
|
|
64
|
+
</el-popover>
|
|
65
|
+
<span>{{ capitalise(origin) }}</span>
|
|
66
|
+
</div>
|
|
67
|
+
<el-button
|
|
68
|
+
v-show="
|
|
69
|
+
originsWithDatasets && originsWithDatasets.length > 0 &&
|
|
70
|
+
shouldShowExploreButton(originsWithDatasets)
|
|
71
|
+
"
|
|
72
|
+
class="button"
|
|
73
|
+
id="open-dendrites-button"
|
|
74
|
+
@click="openDendrites"
|
|
12
75
|
>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
</template>
|
|
16
|
-
<span style="word-break: keep-all">
|
|
17
|
-
<i>Origin</i> {{ originDescription }}
|
|
18
|
-
</span>
|
|
19
|
-
</el-popover>
|
|
76
|
+
Explore origin data
|
|
77
|
+
</el-button>
|
|
20
78
|
</div>
|
|
21
79
|
<div
|
|
22
|
-
v-
|
|
23
|
-
class="
|
|
24
|
-
:origin-item-label="origin"
|
|
25
|
-
:key="origin"
|
|
26
|
-
@mouseenter="onConnectivityHovered(origin)"
|
|
27
|
-
@mouseleave="onConnectivityHovered()"
|
|
80
|
+
v-if="components && components.length > 0"
|
|
81
|
+
class="block"
|
|
28
82
|
>
|
|
29
|
-
<
|
|
30
|
-
class="
|
|
31
|
-
|
|
32
|
-
|
|
83
|
+
<div class="attribute-title-container">
|
|
84
|
+
<span class="attribute-title">Components</span>
|
|
85
|
+
</div>
|
|
86
|
+
<div
|
|
87
|
+
v-for="(component, i) in components"
|
|
88
|
+
class="attribute-content"
|
|
89
|
+
:component-item-label="component"
|
|
90
|
+
:key="component"
|
|
91
|
+
@mouseenter="onConnectivityHovered(component, $event)"
|
|
92
|
+
@mouseleave="onConnectivityHovered()"
|
|
33
93
|
>
|
|
34
|
-
<el-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
>
|
|
54
|
-
<div class="attribute-title-container">
|
|
55
|
-
<span class="attribute-title">Components</span>
|
|
94
|
+
<el-popover
|
|
95
|
+
width="150"
|
|
96
|
+
trigger="hover"
|
|
97
|
+
:teleported="false"
|
|
98
|
+
popper-class="popover-origin-help"
|
|
99
|
+
>
|
|
100
|
+
<template #reference>
|
|
101
|
+
<el-icon
|
|
102
|
+
class="magnify-glass"
|
|
103
|
+
v-show="shouldShowMagnifyGlass(component)"
|
|
104
|
+
@click="onConnectivityClicked(component)"
|
|
105
|
+
>
|
|
106
|
+
<el-icon-search />
|
|
107
|
+
</el-icon>
|
|
108
|
+
</template>
|
|
109
|
+
<span>Search connectivity</span>
|
|
110
|
+
</el-popover>
|
|
111
|
+
<span>{{ capitalise(component) }}</span>
|
|
112
|
+
</div>
|
|
56
113
|
</div>
|
|
57
114
|
<div
|
|
58
|
-
v-
|
|
59
|
-
class="
|
|
60
|
-
:component-item-label="component"
|
|
61
|
-
:key="component"
|
|
62
|
-
@mouseenter="onConnectivityHovered(component)"
|
|
63
|
-
@mouseleave="onConnectivityHovered()"
|
|
115
|
+
v-if="destinations && destinations.length > 0"
|
|
116
|
+
class="block"
|
|
64
117
|
>
|
|
65
|
-
<
|
|
66
|
-
class="
|
|
67
|
-
|
|
68
|
-
|
|
118
|
+
<div class="attribute-title-container">
|
|
119
|
+
<span class="attribute-title">Destination</span>
|
|
120
|
+
<el-popover
|
|
121
|
+
width="250"
|
|
122
|
+
trigger="hover"
|
|
123
|
+
:teleported="false"
|
|
124
|
+
popper-class="popover-origin-help"
|
|
125
|
+
>
|
|
126
|
+
<template #reference>
|
|
127
|
+
<el-icon class="info"><el-icon-warning /></el-icon>
|
|
128
|
+
</template>
|
|
129
|
+
<span style="word-break: keep-all">
|
|
130
|
+
<i>Destination</i> is where the axons terminate
|
|
131
|
+
</span>
|
|
132
|
+
</el-popover>
|
|
133
|
+
</div>
|
|
134
|
+
<div
|
|
135
|
+
v-for="(destination, i) in destinations"
|
|
136
|
+
class="attribute-content"
|
|
137
|
+
:destination-item-label="destination"
|
|
138
|
+
:key="destination"
|
|
139
|
+
@mouseenter="onConnectivityHovered(destination, $event)"
|
|
140
|
+
@mouseleave="onConnectivityHovered()"
|
|
69
141
|
>
|
|
70
|
-
<el-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
142
|
+
<el-popover
|
|
143
|
+
width="150"
|
|
144
|
+
trigger="hover"
|
|
145
|
+
:teleported="false"
|
|
146
|
+
popper-class="popover-origin-help"
|
|
147
|
+
>
|
|
148
|
+
<template #reference>
|
|
149
|
+
<el-icon
|
|
150
|
+
class="magnify-glass"
|
|
151
|
+
v-show="shouldShowMagnifyGlass(destination)"
|
|
152
|
+
@click="onConnectivityClicked(destination)"
|
|
153
|
+
>
|
|
154
|
+
<el-icon-search />
|
|
155
|
+
</el-icon>
|
|
156
|
+
</template>
|
|
157
|
+
<span>Search connectivity</span>
|
|
158
|
+
</el-popover>
|
|
159
|
+
<span>{{ capitalise(destination) }}</span>
|
|
160
|
+
</div>
|
|
161
|
+
<el-button
|
|
162
|
+
v-show="
|
|
163
|
+
destinationsWithDatasets &&
|
|
164
|
+
destinationsWithDatasets.length > 0 &&
|
|
165
|
+
shouldShowExploreButton(destinationsWithDatasets)
|
|
166
|
+
"
|
|
167
|
+
class="button"
|
|
168
|
+
@click="openAxons"
|
|
86
169
|
>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
</template>
|
|
90
|
-
<span style="word-break: keep-all">
|
|
91
|
-
<i>Destination</i> is where the axons terminate
|
|
92
|
-
</span>
|
|
93
|
-
</el-popover>
|
|
170
|
+
Explore destination data
|
|
171
|
+
</el-button>
|
|
94
172
|
</div>
|
|
95
173
|
<div
|
|
96
|
-
v-for="(destination, i) in destinations"
|
|
97
|
-
class="attribute-content"
|
|
98
|
-
:destination-item-label="destination"
|
|
99
|
-
:key="destination"
|
|
100
|
-
@mouseenter="onConnectivityHovered(destination)"
|
|
101
|
-
@mouseleave="onConnectivityHovered()"
|
|
102
|
-
>
|
|
103
|
-
<el-icon
|
|
104
|
-
class="magnify-glass"
|
|
105
|
-
v-show="shouldShowMagnifyGlass(destination)"
|
|
106
|
-
@click="onConnectivityClicked(destination)"
|
|
107
|
-
>
|
|
108
|
-
<el-icon-search />
|
|
109
|
-
</el-icon>
|
|
110
|
-
<span>{{ capitalise(destination) }}</span>
|
|
111
|
-
</div>
|
|
112
|
-
<el-button
|
|
113
174
|
v-show="
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
shouldShowExploreButton(
|
|
175
|
+
componentsWithDatasets &&
|
|
176
|
+
componentsWithDatasets.length > 0 &&
|
|
177
|
+
shouldShowExploreButton(componentsWithDatasets)
|
|
117
178
|
"
|
|
118
|
-
class="
|
|
119
|
-
@click="openAxons"
|
|
179
|
+
class="block"
|
|
120
180
|
>
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
componentsWithDatasets.length > 0 &&
|
|
128
|
-
shouldShowExploreButton(componentsWithDatasets)
|
|
129
|
-
"
|
|
130
|
-
class="block"
|
|
131
|
-
>
|
|
132
|
-
<el-button
|
|
133
|
-
class="button"
|
|
134
|
-
@click="openAll"
|
|
135
|
-
>
|
|
136
|
-
Search for data on components
|
|
137
|
-
</el-button>
|
|
138
|
-
</div>
|
|
139
|
-
|
|
140
|
-
<div class="connectivity-error-container">
|
|
141
|
-
<div class="connectivity-error" v-show="connectivityError.errorConnectivities">
|
|
142
|
-
<strong>{{ connectivityError.errorConnectivities }}</strong>
|
|
143
|
-
{{ connectivityError.errorMessage }}
|
|
181
|
+
<el-button
|
|
182
|
+
class="button"
|
|
183
|
+
@click="openAll"
|
|
184
|
+
>
|
|
185
|
+
Search for data on components
|
|
186
|
+
</el-button>
|
|
144
187
|
</div>
|
|
145
|
-
</div>
|
|
146
188
|
</div>
|
|
147
189
|
</template>
|
|
148
190
|
|
|
149
191
|
<script>
|
|
192
|
+
import { shallowRef } from 'vue';
|
|
150
193
|
import {
|
|
151
194
|
Warning as ElIconWarning,
|
|
152
195
|
Search as ElIconSearch,
|
|
@@ -216,6 +259,7 @@ export default {
|
|
|
216
259
|
},
|
|
217
260
|
data: function () {
|
|
218
261
|
return {
|
|
262
|
+
alertTop: 0,
|
|
219
263
|
originDescriptions: {
|
|
220
264
|
motor: 'is the location of the initial cell body of the circuit',
|
|
221
265
|
sensory: 'is the location of the initial cell body in the PNS circuit',
|
|
@@ -249,8 +293,11 @@ export default {
|
|
|
249
293
|
capitalise: function (text) {
|
|
250
294
|
return capitalise(text)
|
|
251
295
|
},
|
|
252
|
-
onConnectivityHovered: function (name) {
|
|
296
|
+
onConnectivityHovered: function (name, ele) {
|
|
253
297
|
this.$emit('connectivity-hovered', name);
|
|
298
|
+
if (ele) {
|
|
299
|
+
this.alertTop = ele.srcElement.offsetParent.offsetTop + ele.srcElement.offsetTop;
|
|
300
|
+
}
|
|
254
301
|
},
|
|
255
302
|
onConnectivityClicked: function (name) {
|
|
256
303
|
const connectivity = this.connectivityError.errorConnectivities;
|
|
@@ -306,7 +353,7 @@ export default {
|
|
|
306
353
|
labels: this.originsWithDatasets.map((a) => a.name.toLowerCase()),
|
|
307
354
|
})
|
|
308
355
|
},
|
|
309
|
-
}
|
|
356
|
+
},
|
|
310
357
|
}
|
|
311
358
|
</script>
|
|
312
359
|
|
|
@@ -419,24 +466,20 @@ export default {
|
|
|
419
466
|
}
|
|
420
467
|
}
|
|
421
468
|
|
|
422
|
-
.connectivity-
|
|
423
|
-
position:
|
|
424
|
-
|
|
425
|
-
|
|
469
|
+
.connectivity-alert {
|
|
470
|
+
position: absolute;
|
|
471
|
+
width: 1px;
|
|
472
|
+
right:0px;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
:deep(.connectivity-error-container.el-popover) {
|
|
426
476
|
min-height: 31px; // placeholder
|
|
427
|
-
margin-top: -10px !important;
|
|
428
|
-
display: flex;
|
|
429
|
-
flex-direction: row;
|
|
430
477
|
align-items: center;
|
|
431
478
|
justify-content: center;
|
|
432
|
-
}
|
|
433
|
-
|
|
434
|
-
.connectivity-error {
|
|
435
|
-
width: fit-content;
|
|
436
|
-
font-size: 12px;
|
|
437
479
|
padding: 0.25rem 0.5rem;
|
|
438
480
|
background-color: var(--el-color-error-light-9);
|
|
439
481
|
border-radius: var(--el-border-radius-small);
|
|
440
482
|
border: 1px solid var(--el-color-error);
|
|
483
|
+
pointer-events: none;
|
|
441
484
|
}
|
|
442
485
|
</style>
|
|
@@ -87,6 +87,7 @@
|
|
|
87
87
|
:componentsWithDatasets="componentsWithDatasets"
|
|
88
88
|
:destinationsWithDatasets="destinationsWithDatasets"
|
|
89
89
|
:availableAnatomyFacets="availableAnatomyFacets"
|
|
90
|
+
:connectivityError="connectivityError"
|
|
90
91
|
@connectivity-action-click="onConnectivityActionClick"
|
|
91
92
|
/>
|
|
92
93
|
<external-resource-card
|
|
@@ -134,6 +135,7 @@ export default {
|
|
|
134
135
|
},
|
|
135
136
|
entryIndex: 0,
|
|
136
137
|
availableAnatomyFacets: [],
|
|
138
|
+
connectivityError: {},
|
|
137
139
|
};
|
|
138
140
|
},
|
|
139
141
|
computed: {
|