@abi-software/flatmapvuer 1.13.1-simulation.6 → 1.13.2-demo.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/dist/flatmapvuer.js +2578 -2897
- package/dist/flatmapvuer.umd.cjs +11 -11
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/App.vue +0 -14
- package/src/assets/styles.scss +0 -12
- package/src/components/FlatmapVuer.vue +676 -1175
- package/src/components/MultiFlatmapVuer.vue +14 -2
- package/src/components/index.js +3 -17
- package/src/services/flatmapKnowledge.js +0 -1
- package/src/services/flatmapLoader.js +1 -1
- package/src/services/apsTestData.js +0 -40
|
@@ -11,11 +11,7 @@
|
|
|
11
11
|
style="height: 100%; width: 100%; position: relative; overflow-y: none"
|
|
12
12
|
>
|
|
13
13
|
<!-- flatmap-display -->
|
|
14
|
-
<div
|
|
15
|
-
style="height: 100%; width: 100%"
|
|
16
|
-
ref="display"
|
|
17
|
-
class="flatmap-display"
|
|
18
|
-
></div>
|
|
14
|
+
<div style="height: 100%; width: 100%" ref="display" class="flatmap-display"></div>
|
|
19
15
|
<!-- flatmap-error -->
|
|
20
16
|
<FlatmapError v-if="flatmapError" :flatmapError="flatmapError" />
|
|
21
17
|
|
|
@@ -29,7 +25,7 @@
|
|
|
29
25
|
:visible="hoverVisibilities[7].value"
|
|
30
26
|
ref="warningPopover"
|
|
31
27
|
>
|
|
32
|
-
|
|
28
|
+
<!--
|
|
33
29
|
What magic meaning do the numbers 6, 7, etc have?
|
|
34
30
|
|
|
35
31
|
Please use `const` to assign meaningful names to them...
|
|
@@ -63,7 +59,10 @@ Please use `const` to assign meaningful names to them...
|
|
|
63
59
|
SCKAN </a
|
|
64
60
|
>.
|
|
65
61
|
</p>
|
|
66
|
-
<p v-else
|
|
62
|
+
<p v-else
|
|
63
|
+
@mouseover="showTooltip(7)"
|
|
64
|
+
@mouseout="hideTooltip(7)"
|
|
65
|
+
>
|
|
67
66
|
This map displays the connectivity of neuron populations.
|
|
68
67
|
Specifically, those from the primarily rat-based
|
|
69
68
|
<a
|
|
@@ -87,9 +86,7 @@ Please use `const` to assign meaningful names to them...
|
|
|
87
86
|
@mouseover="showTooltip(7)"
|
|
88
87
|
@mouseout="hideTooltip(7)"
|
|
89
88
|
>
|
|
90
|
-
<el-icon v-if="displayWarning || isLegacy"
|
|
91
|
-
><el-icon-warning-filled
|
|
92
|
-
/></el-icon>
|
|
89
|
+
<el-icon v-if="displayWarning || isLegacy"><el-icon-warning-filled /></el-icon>
|
|
93
90
|
<template v-if="isLegacy">
|
|
94
91
|
<span class="warning-text">Legacy Map</span>
|
|
95
92
|
<div class="latest-map-text" @click="viewLatestMap">
|
|
@@ -126,13 +123,13 @@ Please use `const` to assign meaningful names to them...
|
|
|
126
123
|
<template #default>
|
|
127
124
|
<b>Connectivity References</b>
|
|
128
125
|
<p>
|
|
129
|
-
Connectivity references have been improved and available
|
|
130
|
-
various formats.
|
|
126
|
+
Connectivity references have been improved and available
|
|
127
|
+
in various formats.
|
|
131
128
|
</p>
|
|
132
129
|
<b>Improved state storing</b>
|
|
133
130
|
<p>
|
|
134
|
-
Current selection and visibility filters are now stored
|
|
135
|
-
creating a permalink.
|
|
131
|
+
Current selection and visibility filters are now stored
|
|
132
|
+
when creating a permalink.
|
|
136
133
|
</p>
|
|
137
134
|
</template>
|
|
138
135
|
</el-popover>
|
|
@@ -150,11 +147,7 @@ Please use `const` to assign meaningful names to them...
|
|
|
150
147
|
</el-icon>
|
|
151
148
|
|
|
152
149
|
<DrawToolbar
|
|
153
|
-
v-if="
|
|
154
|
-
viewingMode === 'Annotation' &&
|
|
155
|
-
(authorisedUser || offlineAnnotationEnabled) &&
|
|
156
|
-
!disableUI
|
|
157
|
-
"
|
|
150
|
+
v-if="viewingMode === 'Annotation' && (authorisedUser || offlineAnnotationEnabled) && !disableUI"
|
|
158
151
|
:mapCanvas="{
|
|
159
152
|
containerHTML: this.$el,
|
|
160
153
|
class: '.maplibregl-canvas',
|
|
@@ -173,80 +166,7 @@ Please use `const` to assign meaningful names to them...
|
|
|
173
166
|
@hideTooltip="hideTooltip"
|
|
174
167
|
ref="toolbarPopover"
|
|
175
168
|
/>
|
|
176
|
-
|
|
177
|
-
<el-popover
|
|
178
|
-
content="Open simulation protocols"
|
|
179
|
-
v-if="simulationInfo.length > 0"
|
|
180
|
-
placement="right"
|
|
181
|
-
:teleported="false"
|
|
182
|
-
trigger="manual"
|
|
183
|
-
:offset="-18"
|
|
184
|
-
popper-class="flatmap-popper"
|
|
185
|
-
:visible="hoverVisibilities[16].value"
|
|
186
|
-
ref="simulationPopover"
|
|
187
|
-
>
|
|
188
|
-
<template #reference>
|
|
189
|
-
<div
|
|
190
|
-
class="popover-location simulation top"
|
|
191
|
-
:class="{
|
|
192
|
-
open: simulationDrawerOpen,
|
|
193
|
-
close: !simulationDrawerOpen,
|
|
194
|
-
}"
|
|
195
|
-
v-show="!disableUI"
|
|
196
|
-
>
|
|
197
|
-
<div
|
|
198
|
-
class="pathway-container"
|
|
199
|
-
:class="{
|
|
200
|
-
open: simulationDrawerOpen,
|
|
201
|
-
close: !simulationDrawerOpen,
|
|
202
|
-
}"
|
|
203
|
-
v-popover:simulationPopover
|
|
204
|
-
>
|
|
205
|
-
<h4 style="margin-top: 0; margin-bottom: 10px">
|
|
206
|
-
Available Protocols
|
|
207
|
-
</h4>
|
|
208
|
-
<el-select
|
|
209
|
-
popper-class="flatmap-dropdown"
|
|
210
|
-
v-model="selectedSimulation"
|
|
211
|
-
placeholder="Select a simulation"
|
|
212
|
-
size="default"
|
|
213
|
-
style="width: 100%; margin-bottom: 10px"
|
|
214
|
-
value-key="path"
|
|
215
|
-
>
|
|
216
|
-
<el-option
|
|
217
|
-
v-for="info in simulationInfo"
|
|
218
|
-
:key="info.path"
|
|
219
|
-
:label="getSimulationLabel(info)"
|
|
220
|
-
:value="info"
|
|
221
|
-
/>
|
|
222
|
-
</el-select>
|
|
223
|
-
<el-button
|
|
224
|
-
type="primary"
|
|
225
|
-
@click="openSimulation"
|
|
226
|
-
:disabled="!selectedSimulation"
|
|
227
|
-
style="width: 100%"
|
|
228
|
-
>
|
|
229
|
-
Open Simulation
|
|
230
|
-
</el-button>
|
|
231
|
-
</div>
|
|
232
|
-
<div
|
|
233
|
-
@click="simulationDrawerOpen = !simulationDrawerOpen"
|
|
234
|
-
class="drawer-button"
|
|
235
|
-
:class="{
|
|
236
|
-
open: simulationDrawerOpen,
|
|
237
|
-
close: !simulationDrawerOpen,
|
|
238
|
-
}"
|
|
239
|
-
title="Toggle Simulation Panel"
|
|
240
|
-
>
|
|
241
|
-
<!-- Arrow icons for open/close state -->
|
|
242
|
-
<el-icon>
|
|
243
|
-
<el-icon-arrow-left />
|
|
244
|
-
</el-icon>
|
|
245
|
-
</div>
|
|
246
|
-
</div>
|
|
247
|
-
</template>
|
|
248
|
-
</el-popover>
|
|
249
|
-
<!-- </div> -->
|
|
169
|
+
|
|
250
170
|
<div class="bottom-right-control" v-show="!disableUI">
|
|
251
171
|
<el-popover
|
|
252
172
|
content="Zoom in"
|
|
@@ -265,7 +185,10 @@ Please use `const` to assign meaningful names to them...
|
|
|
265
185
|
@mouseover="showTooltip(1)"
|
|
266
186
|
@mouseout="hideTooltip(1)"
|
|
267
187
|
>
|
|
268
|
-
<map-svg-icon
|
|
188
|
+
<map-svg-icon
|
|
189
|
+
class="icon-button zoomIn"
|
|
190
|
+
icon="zoomIn"
|
|
191
|
+
/>
|
|
269
192
|
</div>
|
|
270
193
|
</template>
|
|
271
194
|
</el-popover>
|
|
@@ -273,14 +196,23 @@ Please use `const` to assign meaningful names to them...
|
|
|
273
196
|
content="Zoom out"
|
|
274
197
|
placement="top-end"
|
|
275
198
|
:teleported="false"
|
|
276
|
-
|
|
199
|
+
trigger="manual"
|
|
277
200
|
width="70"
|
|
278
201
|
popper-class="flatmap-popper"
|
|
202
|
+
:visible="hoverVisibilities[2].value"
|
|
279
203
|
ref="zoomOutPopover"
|
|
280
204
|
>
|
|
281
205
|
<template #reference>
|
|
282
|
-
<div
|
|
283
|
-
|
|
206
|
+
<div
|
|
207
|
+
class="icon-button-container"
|
|
208
|
+
@click="zoomOut()"
|
|
209
|
+
@mouseover="showTooltip(2)"
|
|
210
|
+
@mouseout="hideTooltip(2)"
|
|
211
|
+
>
|
|
212
|
+
<map-svg-icon
|
|
213
|
+
class="icon-button zoomOut"
|
|
214
|
+
icon="zoomOut"
|
|
215
|
+
/>
|
|
284
216
|
</div>
|
|
285
217
|
</template>
|
|
286
218
|
</el-popover>
|
|
@@ -306,14 +238,16 @@ Please use `const` to assign meaningful names to them...
|
|
|
306
238
|
@mouseover="showTooltip(3)"
|
|
307
239
|
@mouseout="hideTooltip(3)"
|
|
308
240
|
>
|
|
309
|
-
<map-svg-icon
|
|
241
|
+
<map-svg-icon
|
|
242
|
+
class="icon-button fitWindow"
|
|
243
|
+
icon="fitWindow"
|
|
244
|
+
/>
|
|
310
245
|
</div>
|
|
311
246
|
</template>
|
|
312
247
|
</el-popover>
|
|
313
248
|
</div>
|
|
314
249
|
<el-popover
|
|
315
250
|
content="Change pathway visibility"
|
|
316
|
-
class="somerandomclass"
|
|
317
251
|
placement="right"
|
|
318
252
|
:teleported="false"
|
|
319
253
|
trigger="manual"
|
|
@@ -324,7 +258,7 @@ Please use `const` to assign meaningful names to them...
|
|
|
324
258
|
>
|
|
325
259
|
<template #reference>
|
|
326
260
|
<div
|
|
327
|
-
class="
|
|
261
|
+
class="pathway-location"
|
|
328
262
|
:class="{ open: drawerOpen, close: !drawerOpen }"
|
|
329
263
|
v-show="!disableUI && requiresDrawer"
|
|
330
264
|
>
|
|
@@ -334,7 +268,7 @@ Please use `const` to assign meaningful names to them...
|
|
|
334
268
|
:style="{ 'max-height': pathwaysMaxHeight + 'px' }"
|
|
335
269
|
v-popover:checkBoxPopover
|
|
336
270
|
>
|
|
337
|
-
<
|
|
271
|
+
<dynamic-legends
|
|
338
272
|
v-if="legendEntry.length"
|
|
339
273
|
identifierKey="prompt"
|
|
340
274
|
colourKey="colour"
|
|
@@ -432,11 +366,7 @@ Please use `const` to assign meaningful names to them...
|
|
|
432
366
|
key="pathwaysSelection"
|
|
433
367
|
/>
|
|
434
368
|
<selections-group
|
|
435
|
-
v-if="
|
|
436
|
-
taxonConnectivity &&
|
|
437
|
-
taxonConnectivity.length > 0 &&
|
|
438
|
-
showPathwayFilter
|
|
439
|
-
"
|
|
369
|
+
v-if="taxonConnectivity && taxonConnectivity.length > 0 && showPathwayFilter"
|
|
440
370
|
title="Studied in"
|
|
441
371
|
labelKey="label"
|
|
442
372
|
identifierKey="taxon"
|
|
@@ -478,7 +408,9 @@ Please use `const` to assign meaningful names to them...
|
|
|
478
408
|
@event open-map
|
|
479
409
|
@arg {String} `mapOption.key`
|
|
480
410
|
-->
|
|
481
|
-
<el-button type="primary" plain
|
|
411
|
+
<el-button type="primary" plain
|
|
412
|
+
@click="$emit('open-map', item.key)"
|
|
413
|
+
>
|
|
482
414
|
{{ item.display }}
|
|
483
415
|
</el-button>
|
|
484
416
|
</el-row>
|
|
@@ -496,29 +428,23 @@ Please use `const` to assign meaningful names to them...
|
|
|
496
428
|
<div>
|
|
497
429
|
<el-row class="backgroundText">Viewing Mode</el-row>
|
|
498
430
|
<el-row class="backgroundControl">
|
|
499
|
-
<div style="margin-bottom: 2px">
|
|
500
|
-
<template
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
>
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
<
|
|
508
|
-
class="viewing-mode-unselected"
|
|
509
|
-
|
|
510
|
-
>{{ key }}</span
|
|
511
|
-
>
|
|
512
|
-
</template>
|
|
431
|
+
<div style="margin-bottom: 2px;">
|
|
432
|
+
<template
|
|
433
|
+
v-for="(value, key, index) in viewingModes"
|
|
434
|
+
:key="key"
|
|
435
|
+
>
|
|
436
|
+
<template v-if="key === viewingMode">
|
|
437
|
+
<span class="viewing-mode-title"><b >{{ key }}</b></span>
|
|
438
|
+
</template>
|
|
439
|
+
<template v-else>
|
|
440
|
+
<span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
|
|
441
|
+
</template>
|
|
513
442
|
</template>
|
|
514
443
|
</div>
|
|
515
444
|
<el-row class="viewing-mode-description">
|
|
516
445
|
{{ modeDescription }}
|
|
517
446
|
</el-row>
|
|
518
|
-
<el-row
|
|
519
|
-
v-if="viewingMode === 'Annotation' && offlineAnnotationEnabled"
|
|
520
|
-
class="viewing-mode-description"
|
|
521
|
-
>
|
|
447
|
+
<el-row v-if="viewingMode === 'Annotation' && offlineAnnotationEnabled" class="viewing-mode-description">
|
|
522
448
|
(Anonymous annotate)
|
|
523
449
|
</el-row>
|
|
524
450
|
</el-row>
|
|
@@ -546,21 +472,16 @@ Please use `const` to assign meaningful names to them...
|
|
|
546
472
|
</el-select>
|
|
547
473
|
</el-row>
|
|
548
474
|
</template>
|
|
549
|
-
<el-row
|
|
550
|
-
|
|
551
|
-
v-if="displayFlightPathOption"
|
|
552
|
-
></el-row>
|
|
553
|
-
<el-row class="backgroundText" v-if="displayFlightPathOption"
|
|
554
|
-
>Flight path display</el-row
|
|
555
|
-
>
|
|
475
|
+
<el-row class="backgroundSpacer" v-if="displayFlightPathOption"></el-row>
|
|
476
|
+
<el-row class="backgroundText" v-if="displayFlightPathOption">Flight path display</el-row>
|
|
556
477
|
<el-row class="backgroundControl" v-if="displayFlightPathOption">
|
|
557
478
|
<el-radio-group
|
|
558
479
|
v-model="flightPath3DRadio"
|
|
559
480
|
class="flatmap-radio"
|
|
560
481
|
@change="setFlightPath3D"
|
|
561
482
|
>
|
|
562
|
-
|
|
563
|
-
|
|
483
|
+
<el-radio :value="false">2D</el-radio>
|
|
484
|
+
<el-radio :value="true">3D</el-radio>
|
|
564
485
|
</el-radio-group>
|
|
565
486
|
</el-row>
|
|
566
487
|
<el-row class="backgroundSpacer"></el-row>
|
|
@@ -650,7 +571,10 @@ Please use `const` to assign meaningful names to them...
|
|
|
650
571
|
@mouseover="showTooltip(5)"
|
|
651
572
|
@mouseout="hideTooltip(5)"
|
|
652
573
|
>
|
|
653
|
-
<map-svg-icon
|
|
574
|
+
<map-svg-icon
|
|
575
|
+
icon="changeBckgd"
|
|
576
|
+
class="icon-button"
|
|
577
|
+
/>
|
|
654
578
|
</div>
|
|
655
579
|
</template>
|
|
656
580
|
</el-popover>
|
|
@@ -706,33 +630,30 @@ import {
|
|
|
706
630
|
getKnowledgeSource,
|
|
707
631
|
getReferenceConnectivitiesByAPI,
|
|
708
632
|
} from '../services/flatmapKnowledge.js'
|
|
709
|
-
import {
|
|
710
|
-
retrieveOmexData,
|
|
711
|
-
} from '../services/apsTestData.js'
|
|
712
633
|
import { capitalise } from './utilities.js'
|
|
713
634
|
import yellowstar from '../icons/yellowstar'
|
|
714
635
|
import ResizeSensor from 'css-element-queries/src/ResizeSensor'
|
|
715
636
|
import flatmap from '../services/flatmapLoader.js'
|
|
716
637
|
import { AnnotationService } from '@abi-software/sparc-annotation'
|
|
717
638
|
import { mapState } from 'pinia'
|
|
718
|
-
import { useMainStore } from '
|
|
639
|
+
import { useMainStore } from '@/store/index'
|
|
719
640
|
import {
|
|
720
641
|
fetchLabels,
|
|
721
642
|
DrawToolbar,
|
|
722
643
|
Tooltip,
|
|
723
644
|
TreeControls,
|
|
724
|
-
getFlatmapFilterOptions
|
|
645
|
+
getFlatmapFilterOptions
|
|
725
646
|
} from '@abi-software/map-utilities'
|
|
726
647
|
import '@abi-software/map-utilities/dist/style.css'
|
|
727
648
|
import EventBus from './EventBus.js'
|
|
728
649
|
import FlatmapError from './FlatmapError.vue'
|
|
729
650
|
|
|
730
|
-
const ERROR_MESSAGE = 'cannot be found on the map.'
|
|
651
|
+
const ERROR_MESSAGE = 'cannot be found on the map.';
|
|
731
652
|
|
|
732
653
|
const centroid = (geometry) => {
|
|
733
|
-
let featureGeometry = { lng: 0, lat: 0 }
|
|
654
|
+
let featureGeometry = { lng: 0, lat: 0, }
|
|
734
655
|
let coordinates
|
|
735
|
-
if (geometry.type ===
|
|
656
|
+
if (geometry.type === "Polygon") {
|
|
736
657
|
if (geometry.coordinates.length) {
|
|
737
658
|
coordinates = geometry.coordinates[0]
|
|
738
659
|
}
|
|
@@ -806,7 +727,6 @@ export default {
|
|
|
806
727
|
ElIconArrowDown,
|
|
807
728
|
ElIconArrowLeft,
|
|
808
729
|
DrawToolbar,
|
|
809
|
-
DynamicLegends,
|
|
810
730
|
FlatmapError,
|
|
811
731
|
},
|
|
812
732
|
beforeCreate: function () {
|
|
@@ -818,7 +738,7 @@ export default {
|
|
|
818
738
|
setup(props) {
|
|
819
739
|
let annotator = inject('$annotator')
|
|
820
740
|
if (!annotator) {
|
|
821
|
-
annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`))
|
|
741
|
+
annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
|
|
822
742
|
provide('$annotator', annotator)
|
|
823
743
|
}
|
|
824
744
|
return { annotator }
|
|
@@ -843,17 +763,17 @@ export default {
|
|
|
843
763
|
if (this.mapImp) {
|
|
844
764
|
if (this.mapImp.contextLost) {
|
|
845
765
|
if (filter) {
|
|
846
|
-
this.filterToRestore = markRaw(JSON.parse(JSON.stringify(filter)))
|
|
766
|
+
this.filterToRestore = markRaw(JSON.parse(JSON.stringify(filter)));
|
|
847
767
|
} else {
|
|
848
|
-
this.filterToRestore = undefined
|
|
768
|
+
this.filterToRestore = undefined;
|
|
849
769
|
}
|
|
850
770
|
} else {
|
|
851
771
|
if (filter) {
|
|
852
|
-
this.mapImp.setVisibilityFilter(filter)
|
|
772
|
+
this.mapImp.setVisibilityFilter(filter);
|
|
853
773
|
} else {
|
|
854
|
-
this.mapImp.clearVisibilityFilter()
|
|
774
|
+
this.mapImp.clearVisibilityFilter();
|
|
855
775
|
}
|
|
856
|
-
this.filterToRestore = undefined
|
|
776
|
+
this.filterToRestore = undefined;
|
|
857
777
|
}
|
|
858
778
|
}
|
|
859
779
|
},
|
|
@@ -862,7 +782,7 @@ export default {
|
|
|
862
782
|
* Function to manually send aborted signal when annotation tooltip popup or sidebar tab closed.
|
|
863
783
|
*/
|
|
864
784
|
manualAbortedOnClose: function () {
|
|
865
|
-
if (this.annotationSidebar) this.$emit(
|
|
785
|
+
if (this.annotationSidebar) this.$emit("annotation-close")
|
|
866
786
|
this.closeTooltip()
|
|
867
787
|
this.annotationEventCallback({}, { type: 'aborted' })
|
|
868
788
|
this.initialiseDrawing()
|
|
@@ -883,14 +803,12 @@ export default {
|
|
|
883
803
|
*/
|
|
884
804
|
cancelDrawnFeature: function () {
|
|
885
805
|
if (this.isValidDrawnCreated) {
|
|
886
|
-
if (this.annotationSidebar) this.$emit(
|
|
806
|
+
if (this.annotationSidebar) this.$emit("annotation-close")
|
|
887
807
|
this.closeTooltip()
|
|
888
|
-
this.annotationEntry = [
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
},
|
|
893
|
-
]
|
|
808
|
+
this.annotationEntry = [{
|
|
809
|
+
...this.drawnCreatedEvent.feature,
|
|
810
|
+
resourceId: this.serverURL,
|
|
811
|
+
}]
|
|
894
812
|
this.rollbackAnnotationEvent()
|
|
895
813
|
this.initialiseDrawing()
|
|
896
814
|
}
|
|
@@ -906,11 +824,7 @@ export default {
|
|
|
906
824
|
const numericId = Number(value)
|
|
907
825
|
const featureObject = numericId
|
|
908
826
|
? this.mapImp.featureProperties(numericId)
|
|
909
|
-
: {
|
|
910
|
-
feature: this.existDrawnFeatures.find(
|
|
911
|
-
(feature) => feature.id === value.trim()
|
|
912
|
-
),
|
|
913
|
-
}
|
|
827
|
+
: { feature: this.existDrawnFeatures.find(feature => feature.id === value.trim()) };
|
|
914
828
|
let payload = { feature: featureObject }
|
|
915
829
|
this.checkAndCreatePopups([payload], false)
|
|
916
830
|
} else {
|
|
@@ -941,7 +855,7 @@ export default {
|
|
|
941
855
|
* @arg {String} `name`
|
|
942
856
|
*/
|
|
943
857
|
toolbarEvent: function (type, name) {
|
|
944
|
-
if (this.isValidDrawnCreated) return
|
|
858
|
+
if (this.isValidDrawnCreated) return;
|
|
945
859
|
this.manualAbortedOnClose()
|
|
946
860
|
this.doubleClickedFeature = false
|
|
947
861
|
// Deselect any feature when draw mode/tool is changed
|
|
@@ -952,10 +866,7 @@ export default {
|
|
|
952
866
|
// Remove any unsubmitted drawn
|
|
953
867
|
this.cancelDrawnFeature()
|
|
954
868
|
if (name) {
|
|
955
|
-
const tool = name.replace(
|
|
956
|
-
/[A-Z]/g,
|
|
957
|
-
(letter) => `_${letter.toLowerCase()}`
|
|
958
|
-
)
|
|
869
|
+
const tool = name.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
|
|
959
870
|
this.changeAnnotationDrawMode({ mode: `draw${tool}` })
|
|
960
871
|
}
|
|
961
872
|
this.activeDrawTool = name
|
|
@@ -973,7 +884,7 @@ export default {
|
|
|
973
884
|
if (data.feature.feature.geometry.type !== 'Point') {
|
|
974
885
|
this.changeAnnotationDrawMode({
|
|
975
886
|
mode: 'direct_select',
|
|
976
|
-
options: { featureId: data.feature.feature.id }
|
|
887
|
+
options: { featureId: data.feature.feature.id }
|
|
977
888
|
})
|
|
978
889
|
this.modifyAnnotationFeature()
|
|
979
890
|
}
|
|
@@ -982,7 +893,7 @@ export default {
|
|
|
982
893
|
} else if (this.activeDrawMode === 'Delete') {
|
|
983
894
|
this.changeAnnotationDrawMode({
|
|
984
895
|
mode: 'simple_select',
|
|
985
|
-
options: { featureIds: [data.feature.feature.id] }
|
|
896
|
+
options: { featureIds: [data.feature.feature.id] }
|
|
986
897
|
})
|
|
987
898
|
this.modifyAnnotationFeature()
|
|
988
899
|
}
|
|
@@ -997,9 +908,7 @@ export default {
|
|
|
997
908
|
type: 'connectivity',
|
|
998
909
|
source: features[0],
|
|
999
910
|
target: features[features.length - 1],
|
|
1000
|
-
intermediates: features.filter(
|
|
1001
|
-
(f, index) => index !== 0 && index !== features.length - 1
|
|
1002
|
-
),
|
|
911
|
+
intermediates: features.filter((f, index) => index !== 0 && index !== features.length - 1),
|
|
1003
912
|
}
|
|
1004
913
|
this.annotationEntry[0].body = body
|
|
1005
914
|
}
|
|
@@ -1023,12 +932,12 @@ export default {
|
|
|
1023
932
|
this.mapImp.clearAnnotationFeature()
|
|
1024
933
|
}
|
|
1025
934
|
},
|
|
1026
|
-
forceContextLoss: function
|
|
935
|
+
forceContextLoss: function() {
|
|
1027
936
|
if (this.mapImp && !this.mapImp.contextLost && !this.loading) {
|
|
1028
937
|
this.mapImp.forceContextLoss()
|
|
1029
938
|
}
|
|
1030
939
|
},
|
|
1031
|
-
forceContextRestore: function
|
|
940
|
+
forceContextRestore: function() {
|
|
1032
941
|
if (this.mapImp) {
|
|
1033
942
|
this.flatmapError = null
|
|
1034
943
|
this.mapImp.forceContextRestore()
|
|
@@ -1070,35 +979,22 @@ export default {
|
|
|
1070
979
|
commitAnnotationEvent: function (annotation) {
|
|
1071
980
|
if (this.mapImp) {
|
|
1072
981
|
if (this.offlineAnnotationEnabled) {
|
|
1073
|
-
this.offlineAnnotations =
|
|
1074
|
-
JSON.parse(sessionStorage.getItem('anonymous-annotation')) || []
|
|
982
|
+
this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || []
|
|
1075
983
|
this.offlineAnnotations.push(annotation)
|
|
1076
984
|
if (this.annotationEntry[0].type === 'deleted') {
|
|
1077
|
-
this.offlineAnnotations = this.offlineAnnotations.filter(
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
offline.resource !== this.serverURL ||
|
|
1081
|
-
offline.item.id !== annotation.item.id
|
|
1082
|
-
)
|
|
1083
|
-
}
|
|
1084
|
-
)
|
|
985
|
+
this.offlineAnnotations = this.offlineAnnotations.filter((offline) => {
|
|
986
|
+
return offline.resource !== this.serverURL || offline.item.id !== annotation.item.id
|
|
987
|
+
})
|
|
1085
988
|
}
|
|
1086
|
-
sessionStorage.setItem(
|
|
1087
|
-
'anonymous-annotation',
|
|
1088
|
-
JSON.stringify(this.offlineAnnotations)
|
|
1089
|
-
)
|
|
989
|
+
sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations))
|
|
1090
990
|
}
|
|
1091
|
-
if (
|
|
1092
|
-
['created', 'updated', 'deleted'].includes(
|
|
1093
|
-
this.annotationEntry[0].type
|
|
1094
|
-
)
|
|
1095
|
-
) {
|
|
991
|
+
if (['created', 'updated', 'deleted'].includes(this.annotationEntry[0].type)) {
|
|
1096
992
|
this.featureAnnotationSubmitted = true
|
|
1097
993
|
this.mapImp.commitAnnotationEvent(this.annotationEntry[0])
|
|
1098
|
-
if (annotation.body.comment ===
|
|
994
|
+
if (annotation.body.comment === "Position Updated") {
|
|
1099
995
|
this.annotationEntry[0].positionUpdated = false
|
|
1100
996
|
} else if (this.annotationEntry[0].type === 'deleted') {
|
|
1101
|
-
if (this.annotationSidebar) this.$emit(
|
|
997
|
+
if (this.annotationSidebar) this.$emit("annotation-close")
|
|
1102
998
|
this.closeTooltip()
|
|
1103
999
|
// Only delete need, keep the annotation tooltip/sidebar open if created/updated
|
|
1104
1000
|
this.annotationEntry = []
|
|
@@ -1113,29 +1009,17 @@ export default {
|
|
|
1113
1009
|
* @arg {String} `userId`,
|
|
1114
1010
|
* @arg {String} `participated`
|
|
1115
1011
|
*/
|
|
1116
|
-
fetchAnnotatedItemIds: async function (
|
|
1117
|
-
userId = undefined,
|
|
1118
|
-
participated = undefined
|
|
1119
|
-
) {
|
|
1012
|
+
fetchAnnotatedItemIds: async function (userId = undefined, participated = undefined) {
|
|
1120
1013
|
let annotatedItemIds
|
|
1121
1014
|
if (this.offlineAnnotationEnabled) {
|
|
1122
|
-
this.offlineAnnotations =
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
return offline.resource === this.serverURL
|
|
1127
|
-
})
|
|
1128
|
-
.map((offline) => offline.item.id)
|
|
1015
|
+
this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || []
|
|
1016
|
+
annotatedItemIds = this.offlineAnnotations.filter((offline) => {
|
|
1017
|
+
return offline.resource === this.serverURL
|
|
1018
|
+
}).map(offline => offline.item.id)
|
|
1129
1019
|
} else {
|
|
1130
|
-
annotatedItemIds = await this.annotator.annotatedItemIds(
|
|
1131
|
-
this.userToken,
|
|
1132
|
-
this.serverURL,
|
|
1133
|
-
userId,
|
|
1134
|
-
participated
|
|
1135
|
-
)
|
|
1020
|
+
annotatedItemIds = await this.annotator.annotatedItemIds(this.userToken, this.serverURL, userId, participated)
|
|
1136
1021
|
// The annotator has `resource` and `items` fields
|
|
1137
|
-
if ('resource' in annotatedItemIds)
|
|
1138
|
-
annotatedItemIds = annotatedItemIds.itemIds
|
|
1022
|
+
if ('resource' in annotatedItemIds) annotatedItemIds = annotatedItemIds.itemIds
|
|
1139
1023
|
}
|
|
1140
1024
|
return annotatedItemIds
|
|
1141
1025
|
},
|
|
@@ -1160,23 +1044,13 @@ export default {
|
|
|
1160
1044
|
fetchDrawnFeatures: async function (userId, participated) {
|
|
1161
1045
|
let drawnFeatures
|
|
1162
1046
|
if (this.offlineAnnotationEnabled) {
|
|
1163
|
-
this.offlineAnnotations =
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
return offline.feature && offline.resource === this.serverURL
|
|
1168
|
-
})
|
|
1169
|
-
.map((offline) => offline.feature)
|
|
1047
|
+
this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || []
|
|
1048
|
+
drawnFeatures = this.offlineAnnotations.filter((offline) => {
|
|
1049
|
+
return offline.feature && offline.resource === this.serverURL
|
|
1050
|
+
}).map(offline => offline.feature)
|
|
1170
1051
|
} else {
|
|
1171
|
-
const annotatedItemIds = await this.fetchAnnotatedItemIds(
|
|
1172
|
-
|
|
1173
|
-
participated
|
|
1174
|
-
)
|
|
1175
|
-
drawnFeatures = await this.annotator.drawnFeatures(
|
|
1176
|
-
this.userToken,
|
|
1177
|
-
this.serverURL,
|
|
1178
|
-
annotatedItemIds
|
|
1179
|
-
)
|
|
1052
|
+
const annotatedItemIds = await this.fetchAnnotatedItemIds(userId, participated)
|
|
1053
|
+
drawnFeatures = await this.annotator.drawnFeatures(this.userToken, this.serverURL, annotatedItemIds)
|
|
1180
1054
|
// The annotator has `resource` and `features` fields
|
|
1181
1055
|
if ('resource' in drawnFeatures) drawnFeatures = drawnFeatures.features
|
|
1182
1056
|
}
|
|
@@ -1192,22 +1066,13 @@ export default {
|
|
|
1192
1066
|
this.clearAnnotationFeature()
|
|
1193
1067
|
this.loading = true
|
|
1194
1068
|
}
|
|
1195
|
-
const userId =
|
|
1196
|
-
this.
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
:
|
|
1201
|
-
const
|
|
1202
|
-
this.annotationFrom === 'Anyone'
|
|
1203
|
-
? undefined
|
|
1204
|
-
: this.annotationFrom === 'Me'
|
|
1205
|
-
? true
|
|
1206
|
-
: false
|
|
1207
|
-
const drawnFeatures = await this.fetchDrawnFeatures(
|
|
1208
|
-
userId,
|
|
1209
|
-
participated
|
|
1210
|
-
)
|
|
1069
|
+
const userId = this.annotationFrom === 'Anyone' ?
|
|
1070
|
+
undefined : this.authorisedUser.orcid ?
|
|
1071
|
+
this.authorisedUser.orcid : '0000-0000-0000-0000'
|
|
1072
|
+
const participated = this.annotationFrom === 'Anyone' ?
|
|
1073
|
+
undefined : this.annotationFrom === 'Me' ?
|
|
1074
|
+
true : false
|
|
1075
|
+
const drawnFeatures = await this.fetchDrawnFeatures(userId, participated)
|
|
1211
1076
|
this.existDrawnFeatures = drawnFeatures
|
|
1212
1077
|
this.loading = false
|
|
1213
1078
|
if (!this.featureAnnotationSubmitted) {
|
|
@@ -1246,10 +1111,7 @@ export default {
|
|
|
1246
1111
|
* Function to emit offline annotation enabled status
|
|
1247
1112
|
*/
|
|
1248
1113
|
emitOfflineAnnotationUpdate: function () {
|
|
1249
|
-
this.$emit(
|
|
1250
|
-
'update-offline-annotation-enabled',
|
|
1251
|
-
this.offlineAnnotationEnabled
|
|
1252
|
-
)
|
|
1114
|
+
this.$emit('update-offline-annotation-enabled', this.offlineAnnotationEnabled);
|
|
1253
1115
|
},
|
|
1254
1116
|
/**
|
|
1255
1117
|
* @public
|
|
@@ -1331,20 +1193,15 @@ export default {
|
|
|
1331
1193
|
entityLabels.forEach((entityLabel) => {
|
|
1332
1194
|
let enabled = true
|
|
1333
1195
|
if (state) {
|
|
1334
|
-
enabled = state.checkAll
|
|
1335
|
-
? true
|
|
1336
|
-
: state.checked.includes(entityLabel.taxon)
|
|
1196
|
+
enabled = state.checkAll ? true : state.checked.includes(entityLabel.taxon)
|
|
1337
1197
|
}
|
|
1338
|
-
this.taxonConnectivity.push({
|
|
1198
|
+
this.taxonConnectivity.push({...entityLabel, enabled});
|
|
1339
1199
|
if (this.mapImp) {
|
|
1340
|
-
this.mapImp.enableConnectivityByTaxonIds(
|
|
1341
|
-
entityLabel.taxon,
|
|
1342
|
-
enabled
|
|
1343
|
-
)
|
|
1200
|
+
this.mapImp.enableConnectivityByTaxonIds(entityLabel.taxon, enabled)
|
|
1344
1201
|
}
|
|
1345
|
-
})
|
|
1202
|
+
});
|
|
1346
1203
|
}
|
|
1347
|
-
})
|
|
1204
|
+
});
|
|
1348
1205
|
},
|
|
1349
1206
|
/**
|
|
1350
1207
|
* @public
|
|
@@ -1379,19 +1236,19 @@ export default {
|
|
|
1379
1236
|
},
|
|
1380
1237
|
setInitMapState: function () {
|
|
1381
1238
|
if (this.mapImp) {
|
|
1382
|
-
const map = this.mapImp.map
|
|
1383
|
-
const bounds = this.mapImp.options.bounds
|
|
1239
|
+
const map = this.mapImp.map;
|
|
1240
|
+
const bounds = this.mapImp.options.bounds;
|
|
1384
1241
|
const initBounds = [
|
|
1385
1242
|
[bounds[0], bounds[1]],
|
|
1386
|
-
[bounds[2], bounds[3]]
|
|
1387
|
-
]
|
|
1243
|
+
[bounds[2], bounds[3]]
|
|
1244
|
+
];
|
|
1388
1245
|
|
|
1389
|
-
map.setMaxBounds(null) // override default
|
|
1390
|
-
map.setRenderWorldCopies(false)
|
|
1246
|
+
map.setMaxBounds(null); // override default
|
|
1247
|
+
map.setRenderWorldCopies(false);
|
|
1391
1248
|
|
|
1392
1249
|
this.initMapState = markRaw({
|
|
1393
1250
|
initBounds,
|
|
1394
|
-
})
|
|
1251
|
+
});
|
|
1395
1252
|
}
|
|
1396
1253
|
},
|
|
1397
1254
|
/**
|
|
@@ -1402,17 +1259,17 @@ export default {
|
|
|
1402
1259
|
resetView: function () {
|
|
1403
1260
|
if (this.mapImp) {
|
|
1404
1261
|
// fit to window
|
|
1405
|
-
const map = this.mapImp.map
|
|
1406
|
-
const { initBounds } = this.initMapState
|
|
1262
|
+
const map = this.mapImp.map;
|
|
1263
|
+
const { initBounds } = this.initMapState;
|
|
1407
1264
|
// reset rotation
|
|
1408
1265
|
map.resetNorthPitch({
|
|
1409
1266
|
animate: false,
|
|
1410
|
-
})
|
|
1267
|
+
});
|
|
1411
1268
|
if (initBounds) {
|
|
1412
1269
|
// reset zoom and position
|
|
1413
1270
|
map.fitBounds(initBounds, {
|
|
1414
|
-
animate: false
|
|
1415
|
-
})
|
|
1271
|
+
animate: false
|
|
1272
|
+
});
|
|
1416
1273
|
}
|
|
1417
1274
|
if (this.$refs.skcanSelection) {
|
|
1418
1275
|
this.$refs.skcanSelection.reset()
|
|
@@ -1426,6 +1283,11 @@ export default {
|
|
|
1426
1283
|
if (this.$refs.pathwaysSelection) {
|
|
1427
1284
|
this.$refs.pathwaysSelection.reset()
|
|
1428
1285
|
}
|
|
1286
|
+
|
|
1287
|
+
this.trackEvent({
|
|
1288
|
+
'event_name': `portal_maps_zoom`,
|
|
1289
|
+
'category': 'reset',
|
|
1290
|
+
});
|
|
1429
1291
|
}
|
|
1430
1292
|
},
|
|
1431
1293
|
/**
|
|
@@ -1436,6 +1298,11 @@ export default {
|
|
|
1436
1298
|
zoomIn: function () {
|
|
1437
1299
|
if (this.mapImp) {
|
|
1438
1300
|
this.mapImp.zoomIn()
|
|
1301
|
+
|
|
1302
|
+
this.trackEvent({
|
|
1303
|
+
'event_name': `portal_maps_zoom`,
|
|
1304
|
+
'category': 'zoom_in',
|
|
1305
|
+
});
|
|
1439
1306
|
}
|
|
1440
1307
|
},
|
|
1441
1308
|
/**
|
|
@@ -1446,10 +1313,15 @@ export default {
|
|
|
1446
1313
|
zoomOut: function () {
|
|
1447
1314
|
if (this.mapImp) {
|
|
1448
1315
|
this.mapImp.zoomOut()
|
|
1316
|
+
|
|
1317
|
+
this.trackEvent({
|
|
1318
|
+
'event_name': `portal_maps_zoom`,
|
|
1319
|
+
'category': 'zoom_out',
|
|
1320
|
+
});
|
|
1449
1321
|
}
|
|
1450
1322
|
},
|
|
1451
1323
|
onSelectionsDataChanged: function (data) {
|
|
1452
|
-
this.$emit('pathway-selection-changed', data)
|
|
1324
|
+
this.$emit('pathway-selection-changed', data);
|
|
1453
1325
|
},
|
|
1454
1326
|
/**
|
|
1455
1327
|
* // Currently not in use
|
|
@@ -1492,94 +1364,76 @@ export default {
|
|
|
1492
1364
|
retrieveConnectedPaths: async function (payload, options = {}) {
|
|
1493
1365
|
// query all connected paths from flatmap
|
|
1494
1366
|
if (this.mapImp) {
|
|
1495
|
-
let connectedPaths = []
|
|
1496
|
-
let connectedTarget = options.target?.length ? options.target : []
|
|
1367
|
+
let connectedPaths = [];
|
|
1368
|
+
let connectedTarget = options.target?.length ? options.target : [];
|
|
1497
1369
|
// The line below is to get the path features from the geojson ids
|
|
1498
|
-
const nodeFeatureIds = [...this.mapImp.pathModelNodes(payload)]
|
|
1499
|
-
const pathsOfEntities = await this.mapImp.queryPathsForFeatures(payload)
|
|
1370
|
+
const nodeFeatureIds = [...this.mapImp.pathModelNodes(payload)];
|
|
1371
|
+
const pathsOfEntities = await this.mapImp.queryPathsForFeatures(payload);
|
|
1500
1372
|
if (nodeFeatureIds.length) {
|
|
1501
1373
|
if (!connectedTarget.length) {
|
|
1502
|
-
const connectedType = options.type?.length ? options.type : [
|
|
1503
|
-
const connectivity =
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
connected.push(...originsFlat)
|
|
1514
|
-
if (connectedType.includes('components'))
|
|
1515
|
-
connected.push(...componentsFlat)
|
|
1516
|
-
if (connectedType.includes('destinations'))
|
|
1517
|
-
connected.push(...destinationsFlat)
|
|
1518
|
-
if (connectedType.includes('all'))
|
|
1519
|
-
connected.push(
|
|
1520
|
-
...originsFlat,
|
|
1521
|
-
...componentsFlat,
|
|
1522
|
-
...destinationsFlat
|
|
1523
|
-
)
|
|
1524
|
-
connectedTarget = [...new Set(connected)]
|
|
1374
|
+
const connectedType = options.type?.length ? options.type : ["all"];
|
|
1375
|
+
const connectivity = await this.flatmapQueries.queryForConnectivityNew(this.mapImp, payload[0]);
|
|
1376
|
+
const originsFlat = connectivity?.ids?.dendrites.flat(Infinity);
|
|
1377
|
+
const componentsFlat = connectivity?.ids?.components.flat(Infinity);
|
|
1378
|
+
const destinationsFlat = connectivity?.ids?.axons.flat(Infinity);
|
|
1379
|
+
let connected = [];
|
|
1380
|
+
if (connectedType.includes("origins")) connected.push(...originsFlat);
|
|
1381
|
+
if (connectedType.includes("components")) connected.push(...componentsFlat);
|
|
1382
|
+
if (connectedType.includes("destinations")) connected.push(...destinationsFlat);
|
|
1383
|
+
if (connectedType.includes("all")) connected.push(...originsFlat, ...componentsFlat, ...destinationsFlat);
|
|
1384
|
+
connectedTarget = [...new Set(connected)];
|
|
1525
1385
|
}
|
|
1526
1386
|
// Loop through the node features and check if we have certain nodes
|
|
1527
1387
|
nodeFeatureIds.forEach((featureId) => {
|
|
1528
1388
|
// Get the paths from each node feature
|
|
1529
|
-
const pathsL2 = this.mapImp.nodePathModels(featureId)
|
|
1389
|
+
const pathsL2 = this.mapImp.nodePathModels(featureId);
|
|
1530
1390
|
pathsL2.forEach((path) => {
|
|
1531
1391
|
// nodes of the second level path
|
|
1532
|
-
const nodeFeatureIdsL2 = this.mapImp.pathModelNodes(path)
|
|
1392
|
+
const nodeFeatureIdsL2 = this.mapImp.pathModelNodes(path);
|
|
1533
1393
|
const nodeModelsL2 = nodeFeatureIdsL2.map((featureIdL2) => {
|
|
1534
|
-
return this.mapImp.featureProperties(featureIdL2).models
|
|
1535
|
-
})
|
|
1536
|
-
const intersection = connectedTarget.filter((element)
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
connectedPaths.push(path)
|
|
1541
|
-
})
|
|
1542
|
-
})
|
|
1394
|
+
return this.mapImp.featureProperties(featureIdL2).models;
|
|
1395
|
+
});
|
|
1396
|
+
const intersection = connectedTarget.filter(element => nodeModelsL2.includes(element));
|
|
1397
|
+
if (intersection.length && !connectedPaths.includes(path)) connectedPaths.push(path);
|
|
1398
|
+
});
|
|
1399
|
+
});
|
|
1543
1400
|
} else if (pathsOfEntities.length) {
|
|
1544
1401
|
if (connectedTarget.length) {
|
|
1545
1402
|
pathsOfEntities.forEach((path) => {
|
|
1546
|
-
const nodeFeatureIds = this.mapImp.pathModelNodes(path)
|
|
1403
|
+
const nodeFeatureIds = this.mapImp.pathModelNodes(path);
|
|
1547
1404
|
const nodeModels = nodeFeatureIds.map((featureId) => {
|
|
1548
|
-
return this.mapImp.featureProperties(featureId).models
|
|
1549
|
-
})
|
|
1550
|
-
const intersection = connectedTarget.filter((element)
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
if (intersection.length && !connectedPaths.includes(path))
|
|
1554
|
-
connectedPaths.push(path)
|
|
1555
|
-
})
|
|
1405
|
+
return this.mapImp.featureProperties(featureId).models;
|
|
1406
|
+
});
|
|
1407
|
+
const intersection = connectedTarget.filter(element => nodeModels.includes(element));
|
|
1408
|
+
if (intersection.length && !connectedPaths.includes(path)) connectedPaths.push(path);
|
|
1409
|
+
});
|
|
1556
1410
|
} else {
|
|
1557
|
-
connectedPaths = pathsOfEntities
|
|
1411
|
+
connectedPaths = pathsOfEntities;
|
|
1558
1412
|
}
|
|
1559
1413
|
}
|
|
1560
|
-
connectedPaths = [...new Set([...connectedPaths, ...payload])]
|
|
1561
|
-
return connectedPaths
|
|
1414
|
+
connectedPaths = [...new Set([...connectedPaths, ...payload])];
|
|
1415
|
+
return connectedPaths;
|
|
1562
1416
|
}
|
|
1563
1417
|
},
|
|
1564
|
-
resetMapFilter: function
|
|
1565
|
-
const alert = this.mapFilters.alert
|
|
1566
|
-
let filter
|
|
1567
|
-
const isPathways = { 'tile-layer': 'pathways' }
|
|
1568
|
-
const notPathways = { NOT: isPathways }
|
|
1418
|
+
resetMapFilter: function() {
|
|
1419
|
+
const alert = this.mapFilters.alert;
|
|
1420
|
+
let filter;
|
|
1421
|
+
const isPathways = { 'tile-layer': 'pathways' };
|
|
1422
|
+
const notPathways = { NOT: isPathways };
|
|
1569
1423
|
|
|
1570
1424
|
if (alert.with && !alert.without) {
|
|
1571
1425
|
// Show pathways with alert
|
|
1572
1426
|
filter = {
|
|
1573
|
-
OR: [notPathways, { AND: [isPathways, { HAS: 'alert' }] }]
|
|
1574
|
-
}
|
|
1427
|
+
OR: [notPathways, { AND: [isPathways, { HAS: 'alert' }] }]
|
|
1428
|
+
};
|
|
1575
1429
|
} else if (!alert.with && alert.without) {
|
|
1576
1430
|
// Show pathways without alert
|
|
1577
1431
|
filter = {
|
|
1578
|
-
OR: [notPathways, { AND: [isPathways, { NOT: { HAS: 'alert' } }] }]
|
|
1579
|
-
}
|
|
1432
|
+
OR: [notPathways, { AND: [isPathways, { NOT: { HAS: 'alert' } }] }]
|
|
1433
|
+
};
|
|
1580
1434
|
} else if (!alert.with && !alert.without) {
|
|
1581
1435
|
// Hide all pathways
|
|
1582
|
-
filter = notPathways
|
|
1436
|
+
filter = notPathways;
|
|
1583
1437
|
}
|
|
1584
1438
|
this.setVisibilityFilter(filter)
|
|
1585
1439
|
},
|
|
@@ -1592,17 +1446,16 @@ export default {
|
|
|
1592
1446
|
alertMouseEnterEmitted: function (payload) {
|
|
1593
1447
|
if (this.mapImp) {
|
|
1594
1448
|
if (payload.value) {
|
|
1595
|
-
let filter
|
|
1596
|
-
const isPathways = { 'tile-layer': 'pathways' }
|
|
1597
|
-
const notPathways = { NOT: isPathways }
|
|
1449
|
+
let filter;
|
|
1450
|
+
const isPathways = { 'tile-layer': 'pathways' };
|
|
1451
|
+
const notPathways = { NOT: isPathways };
|
|
1598
1452
|
|
|
1599
|
-
if (payload.key ===
|
|
1600
|
-
const hasAlert =
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
: { NOT: { HAS: 'alert' } }
|
|
1453
|
+
if (payload.key === "alert" || payload.key === "withoutAlert") {
|
|
1454
|
+
const hasAlert = payload.key === "alert" ?
|
|
1455
|
+
{ HAS: 'alert' } :
|
|
1456
|
+
{ NOT: { HAS: 'alert' } };
|
|
1604
1457
|
|
|
1605
|
-
filter = { OR: [notPathways, { AND: [isPathways, hasAlert] }] }
|
|
1458
|
+
filter = { OR: [notPathways, { AND: [isPathways, hasAlert] }] };
|
|
1606
1459
|
}
|
|
1607
1460
|
this.setVisibilityFilter(filter)
|
|
1608
1461
|
} else {
|
|
@@ -1618,13 +1471,13 @@ export default {
|
|
|
1618
1471
|
*/
|
|
1619
1472
|
alertSelected: function (payload) {
|
|
1620
1473
|
if (this.mapImp) {
|
|
1621
|
-
if (payload.key ===
|
|
1474
|
+
if (payload.key === "alert") {
|
|
1622
1475
|
if (payload.value) {
|
|
1623
1476
|
this.mapFilters.alert.with = true
|
|
1624
1477
|
} else {
|
|
1625
1478
|
this.mapFilters.alert.with = false
|
|
1626
1479
|
}
|
|
1627
|
-
} else if (payload.key ===
|
|
1480
|
+
} else if (payload.key === "withoutAlert") {
|
|
1628
1481
|
if (payload.value) {
|
|
1629
1482
|
this.mapFilters.alert.without = true
|
|
1630
1483
|
} else {
|
|
@@ -1725,7 +1578,7 @@ export default {
|
|
|
1725
1578
|
clearTimeout(this.taxonLeaveDelay)
|
|
1726
1579
|
let gid = this.mapImp.taxonFeatureIds(payload.key)
|
|
1727
1580
|
this.mapImp.enableConnectivityByTaxonIds(payload.key, payload.value) // make sure path is visible
|
|
1728
|
-
this.mapImp.zoomToGeoJSONFeatures(gid, {
|
|
1581
|
+
this.mapImp.zoomToGeoJSONFeatures(gid, {noZoomIn: true})
|
|
1729
1582
|
} else {
|
|
1730
1583
|
this.taxonLeaveDelay = setTimeout(() => {
|
|
1731
1584
|
// reset visibility of paths
|
|
@@ -1734,7 +1587,7 @@ export default {
|
|
|
1734
1587
|
let show = payload.checked.includes(item.taxon)
|
|
1735
1588
|
this.mapImp.enableConnectivityByTaxonIds(item.taxon, show)
|
|
1736
1589
|
})
|
|
1737
|
-
}, 1000)
|
|
1590
|
+
}, 1000);
|
|
1738
1591
|
}
|
|
1739
1592
|
}
|
|
1740
1593
|
},
|
|
@@ -1796,23 +1649,15 @@ export default {
|
|
|
1796
1649
|
else this.featureAnnotationSubmitted = false
|
|
1797
1650
|
this.annotationEntry = []
|
|
1798
1651
|
} else if (data.type === 'modeChanged') {
|
|
1799
|
-
if (data.feature.mode === 'direct_select')
|
|
1800
|
-
|
|
1801
|
-
if (
|
|
1802
|
-
this.annotationSidebar &&
|
|
1803
|
-
data.feature.mode === 'simple_select' &&
|
|
1804
|
-
this.activeDrawMode === 'Deleted'
|
|
1805
|
-
) {
|
|
1652
|
+
if (data.feature.mode === 'direct_select') this.doubleClickedFeature = true
|
|
1653
|
+
if (this.annotationSidebar && data.feature.mode === 'simple_select' && this.activeDrawMode === 'Deleted') {
|
|
1806
1654
|
this.annotationEventCallback({}, { type: 'aborted' })
|
|
1807
1655
|
}
|
|
1808
1656
|
} else if (data.type === 'selectionChanged') {
|
|
1809
|
-
this.selectedDrawnFeature =
|
|
1810
|
-
data.feature.features
|
|
1811
|
-
? undefined
|
|
1812
|
-
: data.feature.features[0]
|
|
1657
|
+
this.selectedDrawnFeature = data.feature.features.length === 0 ?
|
|
1658
|
+
undefined : data.feature.features[0]
|
|
1813
1659
|
payload.feature.feature = this.selectedDrawnFeature
|
|
1814
|
-
if (!this.activeDrawTool) {
|
|
1815
|
-
// Make sure dialog content doesn't change
|
|
1660
|
+
if (!this.activeDrawTool) { // Make sure dialog content doesn't change
|
|
1816
1661
|
this.connectionEntry = {}
|
|
1817
1662
|
// For exist drawn annotation features
|
|
1818
1663
|
if (this.selectedDrawnFeature) {
|
|
@@ -1826,16 +1671,11 @@ export default {
|
|
|
1826
1671
|
}
|
|
1827
1672
|
this.annotationDrawModeEvent(payload)
|
|
1828
1673
|
} else {
|
|
1829
|
-
if (
|
|
1830
|
-
this.
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
{
|
|
1835
|
-
...this.previousEditEvent,
|
|
1836
|
-
resourceId: this.serverURL,
|
|
1837
|
-
},
|
|
1838
|
-
]
|
|
1674
|
+
if (this.annotationSidebar && this.previousEditEvent.type === 'updated') {
|
|
1675
|
+
this.annotationEntry = [{
|
|
1676
|
+
...this.previousEditEvent,
|
|
1677
|
+
resourceId: this.serverURL
|
|
1678
|
+
}]
|
|
1839
1679
|
this.annotationEventCallback({}, { type: 'aborted' })
|
|
1840
1680
|
}
|
|
1841
1681
|
this.previousEditEvent = {}
|
|
@@ -1846,9 +1686,7 @@ export default {
|
|
|
1846
1686
|
if (data.type === 'updated' && data.feature.action) {
|
|
1847
1687
|
data.positionUpdated = data.feature.action === 'move'
|
|
1848
1688
|
}
|
|
1849
|
-
const feature = this.mapImp.refreshAnnotationFeatureGeometry(
|
|
1850
|
-
data.feature
|
|
1851
|
-
)
|
|
1689
|
+
const feature = this.mapImp.refreshAnnotationFeatureGeometry(data.feature)
|
|
1852
1690
|
payload.feature.feature = feature
|
|
1853
1691
|
// NB. this might now be `null` if user has deleted it (before OK/Submit)
|
|
1854
1692
|
// so maybe then no `service.addAnnotation` ??
|
|
@@ -1902,39 +1740,36 @@ export default {
|
|
|
1902
1740
|
const biologicalSex = this.biologicalSex
|
|
1903
1741
|
const featuresAlert = data.alert
|
|
1904
1742
|
const taxons = this.getTaxons(data)
|
|
1905
|
-
let payload = [
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
alert: featuresAlert,
|
|
1918
|
-
},
|
|
1919
|
-
]
|
|
1743
|
+
let payload = [{
|
|
1744
|
+
dataset: data.dataset,
|
|
1745
|
+
biologicalSex: biologicalSex,
|
|
1746
|
+
taxonomy: taxonomy,
|
|
1747
|
+
resource: resource,
|
|
1748
|
+
label: label,
|
|
1749
|
+
feature: data,
|
|
1750
|
+
userData: args,
|
|
1751
|
+
eventType: eventType,
|
|
1752
|
+
provenanceTaxonomy: taxons,
|
|
1753
|
+
alert: featuresAlert
|
|
1754
|
+
}]
|
|
1920
1755
|
if (eventType === 'click') {
|
|
1921
1756
|
// If multiple paths overlap at the click location,
|
|
1922
1757
|
// `data` is an object with numeric keys for each feature (e.g., {0: {...}, 1: {...}, ..., mapUUID: '...'}).
|
|
1923
1758
|
// If only one feature or path is clicked,
|
|
1924
1759
|
// `data` is a single object (e.g., {featureId: '...', mapUUID: '...'}).
|
|
1925
|
-
const singleSelection = !data[0]
|
|
1760
|
+
const singleSelection = !data[0];
|
|
1926
1761
|
if (!singleSelection) {
|
|
1927
1762
|
payload = []
|
|
1928
1763
|
const mapuuid = data.mapUUID
|
|
1929
|
-
const seenIds = new Set()
|
|
1764
|
+
const seenIds = new Set();
|
|
1930
1765
|
for (let [key, value] of Object.entries(data)) {
|
|
1931
1766
|
if (key !== 'mapUUID') {
|
|
1932
1767
|
const id = value.featureId
|
|
1933
1768
|
const label = value.label
|
|
1934
1769
|
const resource = [value.models]
|
|
1935
1770
|
const taxons = this.getTaxons(value)
|
|
1936
|
-
if (seenIds.has(id)) continue
|
|
1937
|
-
seenIds.add(id)
|
|
1771
|
+
if (seenIds.has(id)) continue;
|
|
1772
|
+
seenIds.add(id);
|
|
1938
1773
|
payload.push({
|
|
1939
1774
|
dataset: value.dataset,
|
|
1940
1775
|
biologicalSex: biologicalSex,
|
|
@@ -1946,13 +1781,13 @@ export default {
|
|
|
1946
1781
|
eventType: eventType,
|
|
1947
1782
|
provenanceTaxonomy: taxons,
|
|
1948
1783
|
alert: value.alert,
|
|
1949
|
-
mapUUID: mapuuid
|
|
1784
|
+
mapUUID: mapuuid
|
|
1950
1785
|
})
|
|
1951
1786
|
}
|
|
1952
1787
|
}
|
|
1953
1788
|
}
|
|
1954
1789
|
const clickedItem = singleSelection ? data : data[0]
|
|
1955
|
-
this.setConnectivityDataSource(this.viewingMode, clickedItem)
|
|
1790
|
+
this.setConnectivityDataSource(this.viewingMode, clickedItem);
|
|
1956
1791
|
if (this.viewingMode === 'Neuron Connection') {
|
|
1957
1792
|
// do nothing here
|
|
1958
1793
|
// the method to highlight paths is moved to checkAndCreatePopups function
|
|
@@ -1961,33 +1796,20 @@ export default {
|
|
|
1961
1796
|
// This is for annotation mode - draw connectivity between features/paths
|
|
1962
1797
|
if (this.activeDrawTool && !this.isValidDrawnCreated) {
|
|
1963
1798
|
// Check if flatmap features or existing drawn features
|
|
1964
|
-
const validDrawnFeature =
|
|
1965
|
-
clickedItem.
|
|
1966
|
-
|
|
1967
|
-
(feature) => feature.id === clickedItem.id
|
|
1968
|
-
)
|
|
1799
|
+
const validDrawnFeature = clickedItem.featureId || this.existDrawnFeatures.find(
|
|
1800
|
+
(feature) => feature.id === clickedItem.id
|
|
1801
|
+
)
|
|
1969
1802
|
// Only the linestring will have connection
|
|
1970
1803
|
if (this.activeDrawTool === 'LineString' && validDrawnFeature) {
|
|
1971
|
-
const key = clickedItem.featureId
|
|
1972
|
-
|
|
1973
|
-
: clickedItem.id
|
|
1974
|
-
const nodeLabel = clickedItem.label
|
|
1975
|
-
? clickedItem.label
|
|
1976
|
-
: `Feature ${clickedItem.id}`
|
|
1804
|
+
const key = clickedItem.featureId ? clickedItem.featureId : clickedItem.id
|
|
1805
|
+
const nodeLabel = clickedItem.label ? clickedItem.label : `Feature ${clickedItem.id}`
|
|
1977
1806
|
// Add space before key to make sure properties follows adding order
|
|
1978
1807
|
this.connectionEntry[` ${key}`] = Object.assign(
|
|
1979
1808
|
{ label: nodeLabel },
|
|
1980
1809
|
Object.fromEntries(
|
|
1981
1810
|
Object.entries(clickedItem)
|
|
1982
|
-
.filter(([key]) =>
|
|
1983
|
-
|
|
1984
|
-
)
|
|
1985
|
-
.map(([key, value]) => [
|
|
1986
|
-
key === 'featureId' ? 'id' : key,
|
|
1987
|
-
value,
|
|
1988
|
-
])
|
|
1989
|
-
)
|
|
1990
|
-
)
|
|
1811
|
+
.filter(([key]) => ['featureId', 'models'].includes(key))
|
|
1812
|
+
.map(([key, value]) => [(key === 'featureId') ? 'id' : key, value])))
|
|
1991
1813
|
}
|
|
1992
1814
|
}
|
|
1993
1815
|
}
|
|
@@ -1996,10 +1818,7 @@ export default {
|
|
|
1996
1818
|
if (data && data.type !== 'marker' && !this.activeDrawTool) {
|
|
1997
1819
|
this.checkAndCreatePopups(payload)
|
|
1998
1820
|
}
|
|
1999
|
-
} else if (
|
|
2000
|
-
eventType === 'mouseenter' &&
|
|
2001
|
-
this.viewingMode !== 'Neuron Connection'
|
|
2002
|
-
) {
|
|
1821
|
+
} else if (eventType === 'mouseenter' && this.viewingMode !== 'Neuron Connection') {
|
|
2003
1822
|
this.currentHover = data.models ? data.models : ''
|
|
2004
1823
|
}
|
|
2005
1824
|
|
|
@@ -2019,13 +1838,11 @@ export default {
|
|
|
2019
1838
|
setConnectivityDataSource: function (viewingMode, data) {
|
|
2020
1839
|
// Exploration mode, only path click will be used as data source
|
|
2021
1840
|
if (viewingMode === 'Exploration') {
|
|
2022
|
-
this.connectivityDataSource = data.models?.startsWith('ilxtr:')
|
|
2023
|
-
? data.models
|
|
2024
|
-
: ''
|
|
1841
|
+
this.connectivityDataSource = data.models?.startsWith('ilxtr:') ? data.models : '';
|
|
2025
1842
|
} else {
|
|
2026
1843
|
// Other modes, it can be anything
|
|
2027
1844
|
// (annotation drawing doesn't have featureId or models)
|
|
2028
|
-
this.connectivityDataSource = data.featureId || data.id
|
|
1845
|
+
this.connectivityDataSource = data.featureId || data.id;
|
|
2029
1846
|
}
|
|
2030
1847
|
},
|
|
2031
1848
|
/**
|
|
@@ -2048,12 +1865,12 @@ export default {
|
|
|
2048
1865
|
removeActiveTooltips: function () {
|
|
2049
1866
|
// Remove active tooltip/popup on map
|
|
2050
1867
|
if (this.mapImp) {
|
|
2051
|
-
this.mapImp.removePopup()
|
|
1868
|
+
this.mapImp.removePopup();
|
|
2052
1869
|
}
|
|
2053
1870
|
|
|
2054
1871
|
// Fallback: remove any existing toolitp on DOM
|
|
2055
|
-
const tooltips = this.$el.querySelectorAll('.flatmap-tooltip-popup')
|
|
2056
|
-
tooltips.forEach((tooltip) => tooltip.remove())
|
|
1872
|
+
const tooltips = this.$el.querySelectorAll('.flatmap-tooltip-popup');
|
|
1873
|
+
tooltips.forEach((tooltip) => tooltip.remove());
|
|
2057
1874
|
},
|
|
2058
1875
|
/**
|
|
2059
1876
|
* Function to create tooltip for the provided connectivity data.
|
|
@@ -2062,24 +1879,28 @@ export default {
|
|
|
2062
1879
|
createTooltipForConnectivity: function (connectivityData, geojsonId) {
|
|
2063
1880
|
// combine all labels to show together
|
|
2064
1881
|
// content type must be DOM object to use HTML
|
|
2065
|
-
const labelsContainer = document.createElement('div')
|
|
2066
|
-
labelsContainer.classList.add('flatmap-feature-label')
|
|
1882
|
+
const labelsContainer = document.createElement('div');
|
|
1883
|
+
labelsContainer.classList.add('flatmap-feature-label');
|
|
2067
1884
|
|
|
2068
1885
|
connectivityData.forEach((connectivity, i) => {
|
|
2069
|
-
const { label } = connectivity
|
|
2070
|
-
labelsContainer.append(capitalise(label))
|
|
1886
|
+
const { label } = connectivity;
|
|
1887
|
+
labelsContainer.append(capitalise(label));
|
|
2071
1888
|
|
|
2072
|
-
if (i + 1 < connectivityData.length) {
|
|
2073
|
-
const hr = document.createElement('hr')
|
|
2074
|
-
labelsContainer.appendChild(hr)
|
|
1889
|
+
if ((i + 1) < connectivityData.length) {
|
|
1890
|
+
const hr = document.createElement('hr');
|
|
1891
|
+
labelsContainer.appendChild(hr);
|
|
2075
1892
|
}
|
|
2076
|
-
})
|
|
1893
|
+
});
|
|
2077
1894
|
|
|
2078
|
-
this.mapImp.showPopup(
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
1895
|
+
this.mapImp.showPopup(
|
|
1896
|
+
geojsonId,
|
|
1897
|
+
labelsContainer,
|
|
1898
|
+
{
|
|
1899
|
+
className: 'custom-popup flatmap-tooltip-popup',
|
|
1900
|
+
positionAtLastClick: false,
|
|
1901
|
+
preserveSelection: true,
|
|
1902
|
+
}
|
|
1903
|
+
);
|
|
2083
1904
|
},
|
|
2084
1905
|
/**
|
|
2085
1906
|
* Function to show connectivity tooltips on the map
|
|
@@ -2087,53 +1908,53 @@ export default {
|
|
|
2087
1908
|
* @arg {Object} `payload`
|
|
2088
1909
|
*/
|
|
2089
1910
|
showConnectivityTooltips: function (payload) {
|
|
2090
|
-
const { connectivityInfo, data } = payload
|
|
2091
|
-
const featuresToHighlight = []
|
|
2092
|
-
const geojsonHighlights = []
|
|
2093
|
-
const connectivityData = []
|
|
2094
|
-
const errorData = []
|
|
1911
|
+
const { connectivityInfo, data } = payload;
|
|
1912
|
+
const featuresToHighlight = [];
|
|
1913
|
+
const geojsonHighlights = [];
|
|
1914
|
+
const connectivityData = [];
|
|
1915
|
+
const errorData = [];
|
|
2095
1916
|
|
|
2096
1917
|
// to keep the highlighted path on map
|
|
2097
1918
|
if (connectivityInfo && connectivityInfo.featureId) {
|
|
2098
|
-
featuresToHighlight.push(...connectivityInfo.featureId)
|
|
1919
|
+
featuresToHighlight.push(...connectivityInfo.featureId);
|
|
2099
1920
|
}
|
|
2100
1921
|
|
|
2101
1922
|
if (this.mapImp) {
|
|
2102
1923
|
// search the features on the map first
|
|
2103
1924
|
data.forEach((connectivity) => {
|
|
2104
|
-
const response = this.mapImp.search(connectivity.id)
|
|
1925
|
+
const response = this.mapImp.search(connectivity.id);
|
|
2105
1926
|
|
|
2106
1927
|
if (response?.results.length) {
|
|
2107
|
-
const featureId = response?.results[0].featureId
|
|
2108
|
-
connectivityData.push({ featureId, ...connectivity })
|
|
1928
|
+
const featureId = response?.results[0].featureId;
|
|
1929
|
+
connectivityData.push({ featureId, ...connectivity });
|
|
2109
1930
|
} else {
|
|
2110
|
-
errorData.push(connectivity)
|
|
1931
|
+
errorData.push(connectivity);
|
|
2111
1932
|
}
|
|
2112
|
-
})
|
|
1933
|
+
});
|
|
2113
1934
|
|
|
2114
1935
|
if (connectivityData.length) {
|
|
2115
|
-
let geojsonId = connectivityData[0].featureId
|
|
1936
|
+
let geojsonId = connectivityData[0].featureId;
|
|
2116
1937
|
|
|
2117
1938
|
this.mapImp.annotations.forEach((annotation) => {
|
|
2118
|
-
const anatomicalNodes = annotation['anatomical-nodes']
|
|
1939
|
+
const anatomicalNodes = annotation['anatomical-nodes'];
|
|
2119
1940
|
|
|
2120
1941
|
if (anatomicalNodes) {
|
|
2121
|
-
const anatomicalNodesString = anatomicalNodes.join('')
|
|
2122
|
-
const foundItem = connectivityData.every(
|
|
2123
|
-
|
|
2124
|
-
)
|
|
1942
|
+
const anatomicalNodesString = anatomicalNodes.join('');
|
|
1943
|
+
const foundItem = connectivityData.every((item) =>
|
|
1944
|
+
anatomicalNodesString.indexOf(item.id) !== -1
|
|
1945
|
+
);
|
|
2125
1946
|
|
|
2126
1947
|
if (foundItem) {
|
|
2127
|
-
geojsonId = annotation.featureId
|
|
2128
|
-
geojsonHighlights.push(geojsonId)
|
|
1948
|
+
geojsonId = annotation.featureId;
|
|
1949
|
+
geojsonHighlights.push(geojsonId);
|
|
2129
1950
|
}
|
|
2130
1951
|
}
|
|
2131
|
-
})
|
|
1952
|
+
});
|
|
2132
1953
|
|
|
2133
|
-
this.createTooltipForConnectivity(connectivityData, geojsonId)
|
|
1954
|
+
this.createTooltipForConnectivity(connectivityData, geojsonId);
|
|
2134
1955
|
} else {
|
|
2135
1956
|
// Close all tooltips on the current flatmap element
|
|
2136
|
-
this.removeActiveTooltips()
|
|
1957
|
+
this.removeActiveTooltips();
|
|
2137
1958
|
}
|
|
2138
1959
|
|
|
2139
1960
|
// Emit error message for connectivity
|
|
@@ -2143,86 +1964,75 @@ export default {
|
|
|
2143
1964
|
|
|
2144
1965
|
// highlight all available features
|
|
2145
1966
|
const connectivityFeatures = featuresToHighlight.reduce((arr, path) => {
|
|
2146
|
-
const connectivityObj = this.mapImp.pathways.paths[path]
|
|
2147
|
-
const connectivities = connectivityObj
|
|
2148
|
-
? connectivityObj.connectivity
|
|
2149
|
-
: null
|
|
1967
|
+
const connectivityObj = this.mapImp.pathways.paths[path];
|
|
1968
|
+
const connectivities = connectivityObj ? connectivityObj.connectivity : null;
|
|
2150
1969
|
if (connectivities) {
|
|
2151
|
-
const flatFeatures = connectivities.flat(Infinity)
|
|
2152
|
-
arr.push(...flatFeatures)
|
|
1970
|
+
const flatFeatures = connectivities.flat(Infinity);
|
|
1971
|
+
arr.push(...flatFeatures);
|
|
2153
1972
|
}
|
|
2154
|
-
return arr
|
|
2155
|
-
}, [])
|
|
2156
|
-
const uniqueConnectivityFeatures = [...new Set(connectivityFeatures)]
|
|
2157
|
-
const combinedFeatures = [
|
|
2158
|
-
|
|
2159
|
-
...uniqueConnectivityFeatures,
|
|
2160
|
-
]
|
|
2161
|
-
const featureIdsToHighlight =
|
|
2162
|
-
this.mapImp.modelFeatureIdList(combinedFeatures)
|
|
1973
|
+
return arr;
|
|
1974
|
+
}, []);
|
|
1975
|
+
const uniqueConnectivityFeatures = [...new Set(connectivityFeatures)];
|
|
1976
|
+
const combinedFeatures = [...featuresToHighlight, ...uniqueConnectivityFeatures];
|
|
1977
|
+
const featureIdsToHighlight = this.mapImp.modelFeatureIdList(combinedFeatures);
|
|
2163
1978
|
const allFeaturesToHighlight = [
|
|
2164
1979
|
...featureIdsToHighlight,
|
|
2165
|
-
...geojsonHighlights
|
|
2166
|
-
]
|
|
1980
|
+
...geojsonHighlights
|
|
1981
|
+
];
|
|
2167
1982
|
|
|
2168
|
-
this.mapImp.selectGeoJSONFeatures(allFeaturesToHighlight)
|
|
1983
|
+
this.mapImp.selectGeoJSONFeatures(allFeaturesToHighlight);
|
|
2169
1984
|
}
|
|
2170
1985
|
},
|
|
2171
1986
|
showConnectivitiesByReference: function (resource) {
|
|
2172
1987
|
this.searchConnectivitiesByReference(resource).then((featureIds) => {
|
|
2173
|
-
this.mapImp.selectFeatures(featureIds)
|
|
2174
|
-
})
|
|
1988
|
+
this.mapImp.selectFeatures(featureIds);
|
|
1989
|
+
});
|
|
2175
1990
|
},
|
|
2176
1991
|
searchConnectivitiesByReference: async function (resource) {
|
|
2177
|
-
const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge')
|
|
2178
|
-
let featureIds = []
|
|
1992
|
+
const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
|
|
1993
|
+
let featureIds = [];
|
|
2179
1994
|
|
|
2180
1995
|
if (flatmapKnowledge) {
|
|
2181
|
-
featureIds = await getReferenceConnectivitiesFromStorage(resource)
|
|
1996
|
+
featureIds = await getReferenceConnectivitiesFromStorage(resource);
|
|
2182
1997
|
} else {
|
|
2183
|
-
featureIds = await getReferenceConnectivitiesByAPI(
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
1998
|
+
featureIds = await getReferenceConnectivitiesByAPI(this.mapImp, resource, this.flatmapQueries);
|
|
1999
|
+
}
|
|
2000
|
+
return featureIds;
|
|
2001
|
+
},
|
|
2002
|
+
getFlatmapKnowledge: function () {
|
|
2003
|
+
let flatmapKnowledge = [];
|
|
2004
|
+
const flatmapKnowledgeRaw = sessionStorage.getItem('flatmap-knowledge');
|
|
2005
|
+
if (flatmapKnowledgeRaw) {
|
|
2006
|
+
flatmapKnowledge = JSON.parse(flatmapKnowledgeRaw);
|
|
2188
2007
|
}
|
|
2189
|
-
return
|
|
2008
|
+
return flatmapKnowledge;
|
|
2190
2009
|
},
|
|
2191
2010
|
emitConnectivityError: function (errorData) {
|
|
2192
2011
|
this.$emit('connectivity-error', {
|
|
2193
2012
|
data: {
|
|
2194
2013
|
errorData: errorData,
|
|
2195
2014
|
errorMessage: ERROR_MESSAGE,
|
|
2196
|
-
}
|
|
2197
|
-
})
|
|
2015
|
+
}
|
|
2016
|
+
});
|
|
2198
2017
|
},
|
|
2199
|
-
checkConnectivityTooltipEntry: function
|
|
2018
|
+
checkConnectivityTooltipEntry: function(tooltipEntry) {
|
|
2200
2019
|
if (tooltipEntry?.length) {
|
|
2201
|
-
return (
|
|
2202
|
-
undefined !==
|
|
2203
|
-
tooltipEntry.find(
|
|
2204
|
-
(entry) => entry?.destinations?.length || entry?.components?.length
|
|
2205
|
-
)
|
|
2206
|
-
)
|
|
2020
|
+
return undefined !== (tooltipEntry.find(entry => entry?.destinations?.length || entry?.components?.length))
|
|
2207
2021
|
}
|
|
2208
2022
|
return false
|
|
2209
2023
|
},
|
|
2210
2024
|
changeConnectivitySource: async function (payload) {
|
|
2211
|
-
const { entry, connectivitySource } = payload
|
|
2025
|
+
const { entry, connectivitySource } = payload;
|
|
2212
2026
|
if (entry.mapId === this.mapImp.id) {
|
|
2213
|
-
await this.flatmapQueries.queryForConnectivityNew(
|
|
2214
|
-
this.mapImp,
|
|
2215
|
-
entry.featureId[0],
|
|
2216
|
-
connectivitySource
|
|
2217
|
-
)
|
|
2027
|
+
await this.flatmapQueries.queryForConnectivityNew(this.mapImp, entry.featureId[0], connectivitySource);
|
|
2218
2028
|
this.tooltipEntry = this.tooltipEntry.map((tooltip) => {
|
|
2219
2029
|
if (tooltip.featureId[0] === entry.featureId[0]) {
|
|
2220
|
-
return this.flatmapQueries.updateTooltipData(tooltip)
|
|
2030
|
+
return this.flatmapQueries.updateTooltipData(tooltip);
|
|
2221
2031
|
}
|
|
2222
|
-
return tooltip
|
|
2032
|
+
return tooltip;
|
|
2223
2033
|
})
|
|
2224
2034
|
if (this.checkConnectivityTooltipEntry(this.tooltipEntry)) {
|
|
2225
|
-
this.$emit('connectivity-info-open', this.tooltipEntry)
|
|
2035
|
+
this.$emit('connectivity-info-open', this.tooltipEntry);
|
|
2226
2036
|
}
|
|
2227
2037
|
}
|
|
2228
2038
|
},
|
|
@@ -2235,39 +2045,28 @@ export default {
|
|
|
2235
2045
|
checkAndCreatePopups: async function (data, mapclick = true) {
|
|
2236
2046
|
// Call flatmap database to get the connection data
|
|
2237
2047
|
if (this.viewingMode === 'Annotation') {
|
|
2238
|
-
const features = data.filter(
|
|
2048
|
+
const features = data.filter(d => d.feature).map(d => d.feature)
|
|
2239
2049
|
if (features.length > 0) {
|
|
2240
|
-
if (
|
|
2241
|
-
this.
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
{
|
|
2246
|
-
...this.previousDeletedEvent,
|
|
2247
|
-
resourceId: this.serverURL,
|
|
2248
|
-
},
|
|
2249
|
-
]
|
|
2050
|
+
if (this.annotationSidebar && this.previousDeletedEvent.type === 'deleted') {
|
|
2051
|
+
this.annotationEntry = [{
|
|
2052
|
+
...this.previousDeletedEvent,
|
|
2053
|
+
resourceId: this.serverURL
|
|
2054
|
+
}]
|
|
2250
2055
|
this.annotationEventCallback({}, { type: 'aborted' })
|
|
2251
2056
|
}
|
|
2252
2057
|
this.annotationEntry = []
|
|
2253
|
-
features.forEach(
|
|
2058
|
+
features.forEach(feature => {
|
|
2254
2059
|
this.annotationEntry.push({
|
|
2255
2060
|
...feature,
|
|
2256
2061
|
resourceId: this.serverURL,
|
|
2257
|
-
featureId: feature.featureId
|
|
2258
|
-
|
|
2259
|
-
: feature.feature?.id,
|
|
2260
|
-
offline: this.offlineAnnotationEnabled,
|
|
2062
|
+
featureId: feature.featureId ? feature.featureId : feature.feature?.id,
|
|
2063
|
+
offline: this.offlineAnnotationEnabled
|
|
2261
2064
|
})
|
|
2262
|
-
})
|
|
2065
|
+
});
|
|
2263
2066
|
// Drawn feature annotationEntry will always have length of 1
|
|
2264
2067
|
if (features[0].feature) {
|
|
2265
2068
|
// in drawing or edit/delete mode is on or valid drawn
|
|
2266
|
-
if (
|
|
2267
|
-
this.activeDrawTool ||
|
|
2268
|
-
this.activeDrawMode ||
|
|
2269
|
-
this.isValidDrawnCreated
|
|
2270
|
-
) {
|
|
2069
|
+
if (this.activeDrawTool || this.activeDrawMode || this.isValidDrawnCreated) {
|
|
2271
2070
|
this.featureAnnotationSubmitted = false
|
|
2272
2071
|
if (this.activeDrawTool) {
|
|
2273
2072
|
this.createConnectivityBody()
|
|
@@ -2281,8 +2080,8 @@ export default {
|
|
|
2281
2080
|
}
|
|
2282
2081
|
} else {
|
|
2283
2082
|
const featureIds = this.annotationEntry
|
|
2284
|
-
.filter(
|
|
2285
|
-
.map(
|
|
2083
|
+
.filter(annotation => annotation.featureId && annotation.models)
|
|
2084
|
+
.map(annotation => annotation.models)
|
|
2286
2085
|
if (featureIds.length > 0) {
|
|
2287
2086
|
this.displayTooltip(featureIds)
|
|
2288
2087
|
}
|
|
@@ -2294,131 +2093,115 @@ export default {
|
|
|
2294
2093
|
// clicking on a connectivity explorer card will be the same as exploration mode
|
|
2295
2094
|
// the card should be opened without doing other functions
|
|
2296
2095
|
else if (this.viewingMode === 'Neuron Connection' && mapclick) {
|
|
2297
|
-
const resources = data.map(
|
|
2096
|
+
const resources = data.map(tooltip => tooltip.resource[0]);
|
|
2298
2097
|
|
|
2299
2098
|
// filter out paths
|
|
2300
|
-
const featureId = resources.find(
|
|
2301
|
-
(resource) => !resource.startsWith('ilxtr:')
|
|
2302
|
-
)
|
|
2099
|
+
const featureId = resources.find(resource => !resource.startsWith('ilxtr:'));
|
|
2303
2100
|
if (featureId) {
|
|
2304
2101
|
// fallback if it cannot find in anatomical nodes
|
|
2305
|
-
const transformResources = Array.isArray(resources)
|
|
2306
|
-
? [...resources]
|
|
2307
|
-
: [resources]
|
|
2102
|
+
const transformResources = Array.isArray(resources) ? [...resources] : [resources];
|
|
2308
2103
|
if (transformResources.length === 1) {
|
|
2309
|
-
transformResources.push([])
|
|
2104
|
+
transformResources.push([]);
|
|
2310
2105
|
}
|
|
2311
2106
|
|
|
2312
|
-
const featureId = data[0].feature?.featureId
|
|
2313
|
-
const annotation = this.mapImp.annotations.get(featureId)
|
|
2314
|
-
const anatomicalNodes = annotation?.['anatomical-nodes']
|
|
2315
|
-
const annotationModels = annotation?.['models']
|
|
2316
|
-
let anatomicalNode
|
|
2317
|
-
let uniqueResource = transformResources
|
|
2318
|
-
const models = annotation?.['models']
|
|
2107
|
+
const featureId = data[0].feature?.featureId;
|
|
2108
|
+
const annotation = this.mapImp.annotations.get(featureId);
|
|
2109
|
+
const anatomicalNodes = annotation?.['anatomical-nodes'];
|
|
2110
|
+
const annotationModels = annotation?.['models'];
|
|
2111
|
+
let anatomicalNode;
|
|
2112
|
+
let uniqueResource = transformResources;
|
|
2113
|
+
const models = annotation?.['models'];
|
|
2319
2114
|
if (anatomicalNodes?.length) {
|
|
2320
2115
|
// get the node which match the feature in a location
|
|
2321
2116
|
// [feature, location]
|
|
2322
|
-
anatomicalNode = anatomicalNodes.find(
|
|
2323
|
-
|
|
2324
|
-
)
|
|
2117
|
+
anatomicalNode = anatomicalNodes.find((node) =>
|
|
2118
|
+
JSON.parse(node)[0] === annotationModels
|
|
2119
|
+
);
|
|
2325
2120
|
}
|
|
2326
2121
|
if (anatomicalNode) {
|
|
2327
|
-
uniqueResource = JSON.parse(anatomicalNode)
|
|
2122
|
+
uniqueResource = JSON.parse(anatomicalNode);
|
|
2328
2123
|
} else if (models) {
|
|
2329
|
-
uniqueResource = [models, []]
|
|
2124
|
+
uniqueResource = [models, []];
|
|
2330
2125
|
}
|
|
2331
2126
|
|
|
2332
|
-
const knowledgeSource = this.mapImp.knowledgeSource
|
|
2333
|
-
const terms = uniqueResource.flat(Infinity)
|
|
2334
|
-
const uniqueTerms = [...new Set(terms)]
|
|
2335
|
-
const fetchResults = await fetchLabels(this.flatmapAPI, uniqueTerms)
|
|
2127
|
+
const knowledgeSource = this.mapImp.knowledgeSource;
|
|
2128
|
+
const terms = uniqueResource.flat(Infinity);
|
|
2129
|
+
const uniqueTerms = [...new Set(terms)];
|
|
2130
|
+
const fetchResults = await fetchLabels(this.flatmapAPI, uniqueTerms);
|
|
2336
2131
|
const objectResults = fetchResults.reduce((arr, item) => {
|
|
2337
|
-
const id = item[0]
|
|
2338
|
-
const valObj = JSON.parse(item[1])
|
|
2339
|
-
arr.push({ id, label: valObj.label, source: valObj.source })
|
|
2340
|
-
return arr
|
|
2341
|
-
}, [])
|
|
2132
|
+
const id = item[0];
|
|
2133
|
+
const valObj = JSON.parse(item[1]);
|
|
2134
|
+
arr.push({ id, label: valObj.label, source: valObj.source });
|
|
2135
|
+
return arr;
|
|
2136
|
+
}, []);
|
|
2342
2137
|
|
|
2343
2138
|
// sort matched knowledgeSource items for same id
|
|
2344
2139
|
objectResults.sort((a, b) => {
|
|
2345
2140
|
if (a.id === b.id) {
|
|
2346
|
-
if (a.source === knowledgeSource && b.source !== knowledgeSource)
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
return 1
|
|
2350
|
-
return 0
|
|
2141
|
+
if (a.source === knowledgeSource && b.source !== knowledgeSource) return -1;
|
|
2142
|
+
if (a.source !== knowledgeSource && b.source === knowledgeSource) return 1;
|
|
2143
|
+
return 0;
|
|
2351
2144
|
}
|
|
2352
|
-
return a.id.localeCompare(b.id)
|
|
2353
|
-
})
|
|
2145
|
+
return a.id.localeCompare(b.id);
|
|
2146
|
+
});
|
|
2354
2147
|
|
|
2355
|
-
const labels = []
|
|
2148
|
+
const labels = [];
|
|
2356
2149
|
for (let i = 0; i < uniqueTerms.length; i++) {
|
|
2357
|
-
const foundObj = objectResults.find(
|
|
2358
|
-
(obj) => obj.id === uniqueTerms[i]
|
|
2359
|
-
)
|
|
2150
|
+
const foundObj = objectResults.find((obj) => obj.id === uniqueTerms[i])
|
|
2360
2151
|
if (foundObj) {
|
|
2361
|
-
labels.push(foundObj.label)
|
|
2152
|
+
labels.push(foundObj.label);
|
|
2362
2153
|
}
|
|
2363
2154
|
}
|
|
2364
|
-
const filterItemLabel = capitalise(labels.join(', '))
|
|
2155
|
+
const filterItemLabel = capitalise(labels.join(', '));
|
|
2365
2156
|
const newConnectivityfilter = {
|
|
2366
2157
|
facet: JSON.stringify(uniqueResource),
|
|
2367
2158
|
facetPropPath: `flatmap.connectivity.source.${this.connectionType.toLowerCase()}`,
|
|
2368
2159
|
tagLabel: filterItemLabel, // used tagLabel here instead of label since the label and value are different
|
|
2369
|
-
term: this.connectionType
|
|
2370
|
-
}
|
|
2160
|
+
term: this.connectionType
|
|
2161
|
+
};
|
|
2371
2162
|
// check for existing item
|
|
2372
|
-
const isNewFilterItemExist = this.connectivityFilters.some(
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
newConnectivityfilter.facetPropPath
|
|
2377
|
-
)
|
|
2163
|
+
const isNewFilterItemExist = this.connectivityFilters.some((connectivityfilter) => (
|
|
2164
|
+
connectivityfilter.facet === newConnectivityfilter.facet &&
|
|
2165
|
+
connectivityfilter.facetPropPath === newConnectivityfilter.facetPropPath
|
|
2166
|
+
));
|
|
2378
2167
|
|
|
2379
2168
|
if (!isNewFilterItemExist) {
|
|
2380
|
-
this.connectivityFilters.push(newConnectivityfilter)
|
|
2169
|
+
this.connectivityFilters.push(newConnectivityfilter);
|
|
2381
2170
|
}
|
|
2382
2171
|
|
|
2383
2172
|
this.$emit('neuron-connection-feature-click', {
|
|
2384
2173
|
filters: this.connectivityFilters,
|
|
2385
2174
|
search: '',
|
|
2386
|
-
})
|
|
2175
|
+
});
|
|
2387
2176
|
} else {
|
|
2388
2177
|
// clicking on paths
|
|
2389
2178
|
await this.openConnectivityInfo(data);
|
|
2390
2179
|
}
|
|
2391
2180
|
} else {
|
|
2392
|
-
await this.openConnectivityInfo(data)
|
|
2181
|
+
await this.openConnectivityInfo(data);
|
|
2393
2182
|
}
|
|
2394
2183
|
},
|
|
2395
2184
|
openConnectivityInfo: async function (data) {
|
|
2396
2185
|
// load and store knowledge
|
|
2397
|
-
loadAndStoreKnowledge(this.mapImp, this.flatmapQueries)
|
|
2186
|
+
loadAndStoreKnowledge(this.mapImp, this.flatmapQueries);
|
|
2398
2187
|
let prom1 = []
|
|
2399
2188
|
// Emit placeholders first.
|
|
2400
2189
|
// This may contain invalid connectivity.
|
|
2401
2190
|
this.tooltipEntry = data
|
|
2402
|
-
.filter(
|
|
2191
|
+
.filter(tooltip => tooltip.resource[0] in this.mapImp.pathways.paths)
|
|
2403
2192
|
.map((tooltip) => {
|
|
2404
|
-
return {
|
|
2405
|
-
title: tooltip.label,
|
|
2406
|
-
featureId: tooltip.resource,
|
|
2407
|
-
ready: false,
|
|
2408
|
-
}
|
|
2193
|
+
return { title: tooltip.label, featureId: tooltip.resource, ready: false }
|
|
2409
2194
|
})
|
|
2410
2195
|
// this should only for flatmap paths not all features
|
|
2411
2196
|
if (this.tooltipEntry.length) {
|
|
2412
|
-
this.$emit('connectivity-info-open', this.tooltipEntry)
|
|
2197
|
+
this.$emit('connectivity-info-open', this.tooltipEntry);
|
|
2413
2198
|
|
|
2414
2199
|
// While having placeholders displayed, get details for all paths and then replace.
|
|
2415
2200
|
for (let index = 0; index < data.length; index++) {
|
|
2416
2201
|
prom1.push(await this.getKnowledgeTooltip(data[index]))
|
|
2417
2202
|
}
|
|
2418
2203
|
this.tooltipEntry = await Promise.all(prom1)
|
|
2419
|
-
const featureIds = this.tooltipEntry.map(
|
|
2420
|
-
(tooltip) => tooltip.featureId[0]
|
|
2421
|
-
)
|
|
2204
|
+
const featureIds = this.tooltipEntry.map(tooltip => tooltip.featureId[0])
|
|
2422
2205
|
if (featureIds.length > 0) {
|
|
2423
2206
|
this.displayTooltip(featureIds)
|
|
2424
2207
|
}
|
|
@@ -2430,93 +2213,79 @@ export default {
|
|
|
2430
2213
|
* @param {Array} payload - The array of filter items to update.
|
|
2431
2214
|
*/
|
|
2432
2215
|
updateConnectivityFilters: function (payload) {
|
|
2433
|
-
if (!payload.length) return
|
|
2434
|
-
this.connectivityFilters = payload.filter(
|
|
2435
|
-
|
|
2436
|
-
)
|
|
2216
|
+
if (!payload.length) return;
|
|
2217
|
+
this.connectivityFilters = payload.filter((filterItem) => (
|
|
2218
|
+
filterItem.facet.toLowerCase() !== 'show all'
|
|
2219
|
+
));
|
|
2437
2220
|
},
|
|
2438
2221
|
resetConnectivityfilters: function (payload) {
|
|
2439
2222
|
if (payload.length) {
|
|
2440
2223
|
// remove not found items
|
|
2441
|
-
this.connectivityFilters = this.connectivityFilters.filter(
|
|
2442
|
-
(
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
connectivityfilter.facetPropPath &&
|
|
2447
|
-
notFoundItem.facet !== connectivityfilter.facet
|
|
2448
|
-
)
|
|
2224
|
+
this.connectivityFilters = this.connectivityFilters.filter((connectivityfilter) =>
|
|
2225
|
+
payload.some((notFoundItem) => (
|
|
2226
|
+
notFoundItem.facetPropPath === connectivityfilter.facetPropPath &&
|
|
2227
|
+
notFoundItem.facet !== connectivityfilter.facet
|
|
2228
|
+
))
|
|
2449
2229
|
)
|
|
2450
2230
|
} else {
|
|
2451
2231
|
// full reset
|
|
2452
|
-
this.connectivityFilters = []
|
|
2232
|
+
this.connectivityFilters = [];
|
|
2453
2233
|
}
|
|
2454
2234
|
},
|
|
2455
2235
|
getKnowledgeTooltip: async function (data) {
|
|
2456
2236
|
//require data.resource && data.feature.source
|
|
2457
|
-
const results =
|
|
2458
|
-
|
|
2459
|
-
this.mapImp,
|
|
2460
|
-
data
|
|
2461
|
-
)
|
|
2462
|
-
let tooltip = await this.flatmapQueries.createTooltipData(
|
|
2463
|
-
this.mapImp,
|
|
2464
|
-
data
|
|
2465
|
-
)
|
|
2466
|
-
|
|
2237
|
+
const results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data)
|
|
2238
|
+
let tooltip = await this.flatmapQueries.createTooltipData(this.mapImp, data)
|
|
2467
2239
|
// The line below only creates the tooltip if some data was found on the path
|
|
2468
2240
|
// the pubmed URLs are in knowledge response.references
|
|
2469
|
-
if (
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
) {
|
|
2473
|
-
tooltip['featuresAlert'] = data.alert
|
|
2474
|
-
tooltip['knowledgeSource'] = getKnowledgeSource(this.mapImp)
|
|
2241
|
+
if ((results && results[0]) || (data.feature.hyperlinks && data.feature.hyperlinks.length > 0)) {
|
|
2242
|
+
tooltip['featuresAlert'] = data.alert;
|
|
2243
|
+
tooltip['knowledgeSource'] = getKnowledgeSource(this.mapImp);
|
|
2475
2244
|
// Map id and uuid to load connectivity information from the map
|
|
2476
|
-
tooltip['mapId'] = this.mapImp.mapMetadata.id
|
|
2477
|
-
tooltip['mapuuid'] = this.mapImp.mapMetadata.uuid
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
}
|
|
2518
|
-
tooltip['ready'] = true
|
|
2519
|
-
return tooltip
|
|
2245
|
+
tooltip['mapId'] = this.mapImp.mapMetadata.id;
|
|
2246
|
+
tooltip['mapuuid'] = this.mapImp.mapMetadata.uuid;
|
|
2247
|
+
// } else {
|
|
2248
|
+
// tooltip = {
|
|
2249
|
+
// ...tooltip,
|
|
2250
|
+
// origins: [data.label],
|
|
2251
|
+
// originsWithDatasets: [{ id: data.resource[0], name: data.label }],
|
|
2252
|
+
// components: [],
|
|
2253
|
+
// componentsWithDatasets: [],
|
|
2254
|
+
// destinations: [],
|
|
2255
|
+
// destinationsWithDatasets: [],
|
|
2256
|
+
// }
|
|
2257
|
+
// let featureIds = []
|
|
2258
|
+
// const pathsOfEntities = await this.mapImp.queryPathsForFeatures(data.resource)
|
|
2259
|
+
// if (pathsOfEntities.length) {
|
|
2260
|
+
// pathsOfEntities.forEach((path) => {
|
|
2261
|
+
// featureIds.push(...this.mapImp.pathModelNodes(path))
|
|
2262
|
+
// const searchResults = this.mapImp.search(path)
|
|
2263
|
+
// let featureId = undefined;
|
|
2264
|
+
// for (let i = 0; i < searchResults.results.length; i++) {
|
|
2265
|
+
// featureId = searchResults.results[i].featureId
|
|
2266
|
+
// const annotation = this.mapImp.annotation(featureId)
|
|
2267
|
+
// if (featureId && annotation?.label) break;
|
|
2268
|
+
// }
|
|
2269
|
+
// if (featureId) {
|
|
2270
|
+
// const feature = this.mapImp.featureProperties(featureId)
|
|
2271
|
+
// if (feature.label && !tooltip.components.includes(feature.label)) {
|
|
2272
|
+
// tooltip.components.push(feature.label)
|
|
2273
|
+
// tooltip.componentsWithDatasets.push({ id: feature.models, name: feature.label })
|
|
2274
|
+
// }
|
|
2275
|
+
// }
|
|
2276
|
+
// })
|
|
2277
|
+
// featureIds = [...new Set(featureIds)].filter(id => id !== data.feature.featureId)
|
|
2278
|
+
// featureIds.forEach((id) => {
|
|
2279
|
+
// const feature = this.mapImp.featureProperties(id)
|
|
2280
|
+
// if (feature.label && !tooltip.destinations.includes(feature.label)) {
|
|
2281
|
+
// tooltip.destinations.push(feature.label)
|
|
2282
|
+
// tooltip.destinationsWithDatasets.push({ id: feature.models, name: feature.label })
|
|
2283
|
+
// }
|
|
2284
|
+
// })
|
|
2285
|
+
// }
|
|
2286
|
+
}
|
|
2287
|
+
tooltip['ready'] = true;
|
|
2288
|
+
return tooltip;
|
|
2520
2289
|
},
|
|
2521
2290
|
/**
|
|
2522
2291
|
* A hack to remove flatmap tooltips while popup is open
|
|
@@ -2524,9 +2293,7 @@ export default {
|
|
|
2524
2293
|
popUpCssHacks: function () {
|
|
2525
2294
|
// Below is a hack to remove flatmap tooltips while popup is open
|
|
2526
2295
|
const ftooltip = document.querySelector('.flatmap-tooltip-popup')
|
|
2527
|
-
const popupCloseButton = document.querySelector(
|
|
2528
|
-
'.maplibregl-popup-close-button'
|
|
2529
|
-
)
|
|
2296
|
+
const popupCloseButton = document.querySelector('.maplibregl-popup-close-button')
|
|
2530
2297
|
if (ftooltip) ftooltip.style.display = 'none'
|
|
2531
2298
|
popupCloseButton.style.display = 'block'
|
|
2532
2299
|
this.$refs.tooltip.$el.style.display = 'flex'
|
|
@@ -2535,7 +2302,7 @@ export default {
|
|
|
2535
2302
|
* This event is emitted
|
|
2536
2303
|
* when a connectivity info (provenance popup) is closed.
|
|
2537
2304
|
*/
|
|
2538
|
-
this.$emit('connectivity-info-close')
|
|
2305
|
+
this.$emit('connectivity-info-close');
|
|
2539
2306
|
if (ftooltip) ftooltip.style.display = 'block'
|
|
2540
2307
|
}
|
|
2541
2308
|
},
|
|
@@ -2608,13 +2375,10 @@ export default {
|
|
|
2608
2375
|
'.maplibregl-ctrl-minimap'
|
|
2609
2376
|
)
|
|
2610
2377
|
if (minimapEl) {
|
|
2611
|
-
if (
|
|
2612
|
-
|
|
2613
|
-
this.$refs.minimapResize.$el.parentNode
|
|
2614
|
-
) {
|
|
2378
|
+
if (this.$refs.minimapResize &&
|
|
2379
|
+
this.$refs.minimapResize.$el.parentNode) {
|
|
2615
2380
|
this.$refs.minimapResize.$el.parentNode.removeChild(
|
|
2616
|
-
this.$refs.minimapResize.$el
|
|
2617
|
-
)
|
|
2381
|
+
this.$refs.minimapResize.$el)
|
|
2618
2382
|
}
|
|
2619
2383
|
minimapEl.appendChild(this.$refs.minimapResize.$el)
|
|
2620
2384
|
this.minimapResizeShow = true
|
|
@@ -2627,58 +2391,52 @@ export default {
|
|
|
2627
2391
|
* @arg {Boolean} `helpMode`
|
|
2628
2392
|
*/
|
|
2629
2393
|
setHelpMode: function (helpMode) {
|
|
2630
|
-
const toolTipsLength = this.hoverVisibilities.length
|
|
2631
|
-
const lastIndex = toolTipsLength - 1
|
|
2632
|
-
const activePopoverObj = this.hoverVisibilities[this.helpModeActiveIndex]
|
|
2394
|
+
const toolTipsLength = this.hoverVisibilities.length;
|
|
2395
|
+
const lastIndex = toolTipsLength - 1;
|
|
2396
|
+
const activePopoverObj = this.hoverVisibilities[this.helpModeActiveIndex];
|
|
2633
2397
|
|
|
2634
2398
|
if (activePopoverObj) {
|
|
2635
|
-
const popoverRefsId = activePopoverObj?.refs
|
|
2636
|
-
const popoverRefId = activePopoverObj?.ref
|
|
2637
|
-
const popoverRef =
|
|
2638
|
-
this.$refs[popoverRefsId ? popoverRefsId : popoverRefId]
|
|
2399
|
+
const popoverRefsId = activePopoverObj?.refs;
|
|
2400
|
+
const popoverRefId = activePopoverObj?.ref;
|
|
2401
|
+
const popoverRef = this.$refs[popoverRefsId ? popoverRefsId : popoverRefId];
|
|
2639
2402
|
|
|
2640
2403
|
if (popoverRef) {
|
|
2641
2404
|
// Open pathway drawer if the tooltip is inside or beside
|
|
2642
|
-
const { parentElement, nextElementSibling } = popoverRef.$el
|
|
2405
|
+
const { parentElement, nextElementSibling } = popoverRef.$el;
|
|
2643
2406
|
const isPathwayContainer = (element) => {
|
|
2644
|
-
return (
|
|
2645
|
-
element
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
}
|
|
2407
|
+
return element && (
|
|
2408
|
+
element.classList.contains('pathway-container') ||
|
|
2409
|
+
element.classList.contains('pathway-location')
|
|
2410
|
+
);
|
|
2411
|
+
};
|
|
2650
2412
|
|
|
2651
2413
|
if (
|
|
2652
2414
|
isPathwayContainer(parentElement) ||
|
|
2653
2415
|
isPathwayContainer(nextElementSibling)
|
|
2654
2416
|
) {
|
|
2655
2417
|
if (this.requiresDrawer) {
|
|
2656
|
-
this.drawerOpen = true
|
|
2418
|
+
this.drawerOpen = true;
|
|
2657
2419
|
} else {
|
|
2658
|
-
this.helpModeActiveIndex += 1
|
|
2420
|
+
this.helpModeActiveIndex += 1;
|
|
2659
2421
|
}
|
|
2660
2422
|
}
|
|
2661
2423
|
} else {
|
|
2662
2424
|
// skip the unavailable tooltips
|
|
2663
|
-
this.helpModeActiveIndex += 1
|
|
2664
|
-
this.setHelpMode(helpMode)
|
|
2425
|
+
this.helpModeActiveIndex += 1;
|
|
2426
|
+
this.setHelpMode(helpMode);
|
|
2665
2427
|
}
|
|
2666
2428
|
}
|
|
2667
2429
|
|
|
2668
2430
|
// Skip checkbox tooltip if pathway filter is not shown
|
|
2669
|
-
const activePopoverObjAfter =
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
!this.showPathwayFilter
|
|
2674
|
-
) {
|
|
2675
|
-
this.helpModeActiveIndex += 1
|
|
2676
|
-
this.setHelpMode(helpMode)
|
|
2431
|
+
const activePopoverObjAfter = this.hoverVisibilities[this.helpModeActiveIndex];
|
|
2432
|
+
if (activePopoverObjAfter?.ref === 'checkBoxPopover' && !this.showPathwayFilter) {
|
|
2433
|
+
this.helpModeActiveIndex += 1;
|
|
2434
|
+
this.setHelpMode(helpMode);
|
|
2677
2435
|
}
|
|
2678
2436
|
|
|
2679
2437
|
if (!helpMode) {
|
|
2680
2438
|
// reset to iniital state
|
|
2681
|
-
this.helpModeActiveIndex = this.helpModeInitialIndex
|
|
2439
|
+
this.helpModeActiveIndex = this.helpModeInitialIndex;
|
|
2682
2440
|
}
|
|
2683
2441
|
|
|
2684
2442
|
if (this.viewingMode !== 'Annotation' && this.helpModeActiveIndex > 9) {
|
|
@@ -2689,34 +2447,31 @@ export default {
|
|
|
2689
2447
|
/**
|
|
2690
2448
|
* This event is emitted when the tooltips in help mode reach the last item.
|
|
2691
2449
|
*/
|
|
2692
|
-
this.$emit('help-mode-last-item', true)
|
|
2450
|
+
this.$emit('help-mode-last-item', true);
|
|
2693
2451
|
}
|
|
2694
2452
|
|
|
2695
2453
|
if (helpMode && !this.helpModeDialog) {
|
|
2696
|
-
this.inHelp = true
|
|
2454
|
+
this.inHelp = true;
|
|
2697
2455
|
this.hoverVisibilities.forEach((item) => {
|
|
2698
|
-
item.value = true
|
|
2699
|
-
})
|
|
2700
|
-
} else if (
|
|
2701
|
-
|
|
2702
|
-
this.helpModeDialog &&
|
|
2703
|
-
toolTipsLength > this.helpModeActiveIndex
|
|
2704
|
-
) {
|
|
2456
|
+
item.value = true;
|
|
2457
|
+
});
|
|
2458
|
+
} else if (helpMode && this.helpModeDialog && toolTipsLength > this.helpModeActiveIndex) {
|
|
2459
|
+
|
|
2705
2460
|
// Show the map tooltip as first item
|
|
2706
2461
|
if (this.helpModeActiveIndex > -1) {
|
|
2707
|
-
this.closeFlatmapHelpPopup()
|
|
2462
|
+
this.closeFlatmapHelpPopup();
|
|
2708
2463
|
|
|
2709
2464
|
// wait for CSS transition
|
|
2710
2465
|
setTimeout(() => {
|
|
2711
|
-
this.inHelp = false
|
|
2466
|
+
this.inHelp = false;
|
|
2712
2467
|
this.hoverVisibilities.forEach((item) => {
|
|
2713
|
-
item.value = false
|
|
2714
|
-
})
|
|
2468
|
+
item.value = false;
|
|
2469
|
+
});
|
|
2715
2470
|
|
|
2716
|
-
this.showTooltip(this.helpModeActiveIndex, 200)
|
|
2717
|
-
}, 300)
|
|
2471
|
+
this.showTooltip(this.helpModeActiveIndex, 200);
|
|
2472
|
+
}, 300);
|
|
2718
2473
|
} else if (this.helpModeActiveIndex === -1) {
|
|
2719
|
-
this.openFlatmapHelpPopup()
|
|
2474
|
+
this.openFlatmapHelpPopup();
|
|
2720
2475
|
}
|
|
2721
2476
|
} else {
|
|
2722
2477
|
this.inHelp = false
|
|
@@ -2741,7 +2496,7 @@ export default {
|
|
|
2741
2496
|
/**
|
|
2742
2497
|
* This event is emitted after a tooltip in Flatmap is shown.
|
|
2743
2498
|
*/
|
|
2744
|
-
this.$emit('shown-tooltip')
|
|
2499
|
+
this.$emit('shown-tooltip');
|
|
2745
2500
|
}, timeout)
|
|
2746
2501
|
}
|
|
2747
2502
|
},
|
|
@@ -2770,7 +2525,6 @@ export default {
|
|
|
2770
2525
|
*/
|
|
2771
2526
|
displayTooltip: function (feature, geometry = undefined) {
|
|
2772
2527
|
let featureId = undefined
|
|
2773
|
-
console.log('Displaying tooltip for feature:', feature)
|
|
2774
2528
|
let options = { className: 'flatmapvuer-popover' }
|
|
2775
2529
|
if (geometry) {
|
|
2776
2530
|
featureId = feature
|
|
@@ -2778,7 +2532,7 @@ export default {
|
|
|
2778
2532
|
if (this.annotationEntry.length) {
|
|
2779
2533
|
options['annotationEvent'] = {
|
|
2780
2534
|
type: this.annotationEntry[0].type,
|
|
2781
|
-
feature: this.annotationEntry[0].feature
|
|
2535
|
+
feature: this.annotationEntry[0].feature
|
|
2782
2536
|
}
|
|
2783
2537
|
}
|
|
2784
2538
|
} else {
|
|
@@ -2793,19 +2547,15 @@ export default {
|
|
|
2793
2547
|
// If connectivityInfoSidebar is set to `true`
|
|
2794
2548
|
// Connectivity info will show in sidebar
|
|
2795
2549
|
if (
|
|
2796
|
-
this.connectivityInfoSidebar &&
|
|
2797
|
-
this.tooltipEntry.length &&
|
|
2550
|
+
(this.connectivityInfoSidebar && this.tooltipEntry.length) &&
|
|
2798
2551
|
this.viewingMode !== 'Annotation'
|
|
2799
2552
|
) {
|
|
2800
2553
|
if (this.checkConnectivityTooltipEntry(this.tooltipEntry)) {
|
|
2801
|
-
this.$emit('connectivity-info-open', this.tooltipEntry)
|
|
2554
|
+
this.$emit('connectivity-info-open', this.tooltipEntry);
|
|
2802
2555
|
}
|
|
2803
2556
|
}
|
|
2804
2557
|
if (this.annotationSidebar && this.viewingMode === 'Annotation') {
|
|
2805
|
-
this.$emit('annotation-open', {
|
|
2806
|
-
annotationEntry: this.annotationEntry,
|
|
2807
|
-
commitCallback: this.commitAnnotationEvent,
|
|
2808
|
-
})
|
|
2558
|
+
this.$emit('annotation-open', {annotationEntry: this.annotationEntry, commitCallback: this.commitAnnotationEvent});
|
|
2809
2559
|
}
|
|
2810
2560
|
// If UI is not disabled,
|
|
2811
2561
|
// And connectivityInfoSidebar is not set (default) or set to `false`
|
|
@@ -2814,14 +2564,16 @@ export default {
|
|
|
2814
2564
|
if (
|
|
2815
2565
|
featureId &&
|
|
2816
2566
|
!this.disableUI &&
|
|
2817
|
-
(
|
|
2818
|
-
(this.viewingMode === '
|
|
2567
|
+
(
|
|
2568
|
+
(this.viewingMode === 'Annotation' && !this.annotationSidebar) ||
|
|
2569
|
+
(this.viewingMode === 'Exploration' && !this.connectivityInfoSidebar)
|
|
2570
|
+
)
|
|
2819
2571
|
) {
|
|
2820
|
-
this.tooltipDisplay = true
|
|
2572
|
+
this.tooltipDisplay = true;
|
|
2821
2573
|
this.$nextTick(() => {
|
|
2822
|
-
this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options)
|
|
2823
|
-
this.popUpCssHacks()
|
|
2824
|
-
})
|
|
2574
|
+
this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options);
|
|
2575
|
+
this.popUpCssHacks();
|
|
2576
|
+
});
|
|
2825
2577
|
}
|
|
2826
2578
|
},
|
|
2827
2579
|
/**
|
|
@@ -2830,18 +2582,18 @@ export default {
|
|
|
2830
2582
|
* because the sidebar is opened
|
|
2831
2583
|
* @arg featureIds
|
|
2832
2584
|
*/
|
|
2833
|
-
|
|
2585
|
+
moveMap: function (featureIds, options = {}) {
|
|
2834
2586
|
if (this.mapImp) {
|
|
2835
|
-
const { offsetX = 0, offsetY = 0, zoom = 4 } = options
|
|
2836
|
-
const Map = this.mapImp.map
|
|
2837
|
-
const bbox = this.mapImp.bounds.toArray()
|
|
2587
|
+
const { offsetX = 0, offsetY = 0, zoom = 4 } = options;
|
|
2588
|
+
const Map = this.mapImp.map;
|
|
2589
|
+
const bbox = this.mapImp.bounds.toArray();
|
|
2838
2590
|
|
|
2839
2591
|
// Zoom the map to features first
|
|
2840
|
-
this.mapImp.zoomToFeatures(featureIds, { noZoomIn: true })
|
|
2592
|
+
this.mapImp.zoomToFeatures(featureIds, { noZoomIn: true });
|
|
2841
2593
|
|
|
2842
2594
|
// Hide the left pathway drawer
|
|
2843
2595
|
// to get more space for the map
|
|
2844
|
-
this.showPathwaysDrawer(false)
|
|
2596
|
+
this.showPathwaysDrawer(false);
|
|
2845
2597
|
|
|
2846
2598
|
// Move the map to left side
|
|
2847
2599
|
// since the sidebar is taking space on the right
|
|
@@ -2850,9 +2602,9 @@ export default {
|
|
|
2850
2602
|
Map.fitBounds(bbox, {
|
|
2851
2603
|
offset: [offsetX, offsetY],
|
|
2852
2604
|
zoom: zoom,
|
|
2853
|
-
animate: true
|
|
2854
|
-
})
|
|
2855
|
-
})
|
|
2605
|
+
animate: true
|
|
2606
|
+
});
|
|
2607
|
+
});
|
|
2856
2608
|
}
|
|
2857
2609
|
}
|
|
2858
2610
|
},
|
|
@@ -2872,7 +2624,7 @@ export default {
|
|
|
2872
2624
|
/**
|
|
2873
2625
|
* This event is emitted after a tooltip on Flatmap's map is shown.
|
|
2874
2626
|
*/
|
|
2875
|
-
this.$emit('shown-map-tooltip')
|
|
2627
|
+
this.$emit('shown-map-tooltip');
|
|
2876
2628
|
}
|
|
2877
2629
|
}
|
|
2878
2630
|
},
|
|
@@ -2907,19 +2659,16 @@ export default {
|
|
|
2907
2659
|
*/
|
|
2908
2660
|
getVisibilityState: function (state) {
|
|
2909
2661
|
const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection']
|
|
2910
|
-
refs.forEach(
|
|
2662
|
+
refs.forEach(ref => {
|
|
2911
2663
|
let comp = this.$refs[ref]
|
|
2912
2664
|
if (comp) {
|
|
2913
2665
|
state[ref] = comp.getState()
|
|
2914
2666
|
}
|
|
2915
2667
|
})
|
|
2916
2668
|
if (this.$refs.treeControls) {
|
|
2917
|
-
const checkedKeys =
|
|
2918
|
-
this.$refs.treeControls.$refs.regionTree.getCheckedKeys()
|
|
2669
|
+
const checkedKeys = this.$refs.treeControls.$refs.regionTree.getCheckedKeys();
|
|
2919
2670
|
//Only store first level systems (terms without .)
|
|
2920
|
-
state['systemsSelection'] = checkedKeys.filter(
|
|
2921
|
-
(term) => !term.includes('.')
|
|
2922
|
-
)
|
|
2671
|
+
state['systemsSelection'] = checkedKeys.filter(term => !term.includes('.'))
|
|
2923
2672
|
}
|
|
2924
2673
|
},
|
|
2925
2674
|
/**
|
|
@@ -2928,7 +2677,7 @@ export default {
|
|
|
2928
2677
|
*/
|
|
2929
2678
|
setVisibilityState: function (state) {
|
|
2930
2679
|
const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection']
|
|
2931
|
-
refs.forEach(
|
|
2680
|
+
refs.forEach(ref => {
|
|
2932
2681
|
const settings = state[ref]
|
|
2933
2682
|
if (settings) {
|
|
2934
2683
|
const comp = this.$refs[ref]
|
|
@@ -2939,14 +2688,9 @@ export default {
|
|
|
2939
2688
|
})
|
|
2940
2689
|
if ('systemsSelection' in state) {
|
|
2941
2690
|
if (this.$refs.treeControls) {
|
|
2942
|
-
this.$refs.treeControls.$refs.regionTree.setCheckedKeys(
|
|
2943
|
-
state['systemsSelection']
|
|
2944
|
-
)
|
|
2691
|
+
this.$refs.treeControls.$refs.regionTree.setCheckedKeys(state['systemsSelection']);
|
|
2945
2692
|
this.systems[0].children.forEach((item) => {
|
|
2946
|
-
this.mapImp.enableSystem(
|
|
2947
|
-
item.key,
|
|
2948
|
-
state['systemsSelection'].includes(item.key)
|
|
2949
|
-
)
|
|
2693
|
+
this.mapImp.enableSystem(item.key, state['systemsSelection'].includes(item.key))
|
|
2950
2694
|
})
|
|
2951
2695
|
}
|
|
2952
2696
|
}
|
|
@@ -2973,9 +2717,7 @@ export default {
|
|
|
2973
2717
|
state['outlines'] = this.outlinesRadio
|
|
2974
2718
|
state['background'] = this.currentBackground
|
|
2975
2719
|
if (this.offlineAnnotationEnabled) {
|
|
2976
|
-
state['offlineAnnotations'] = sessionStorage.getItem(
|
|
2977
|
-
'anonymous-annotation'
|
|
2978
|
-
)
|
|
2720
|
+
state['offlineAnnotations'] = sessionStorage.getItem('anonymous-annotation')
|
|
2979
2721
|
}
|
|
2980
2722
|
this.getVisibilityState(state)
|
|
2981
2723
|
return state
|
|
@@ -3012,10 +2754,7 @@ export default {
|
|
|
3012
2754
|
if (state) {
|
|
3013
2755
|
if (state.viewport) this.mapImp.setState(state.viewport)
|
|
3014
2756
|
if (state.offlineAnnotations) {
|
|
3015
|
-
sessionStorage.setItem(
|
|
3016
|
-
'anonymous-annotation',
|
|
3017
|
-
state.offlineAnnotations
|
|
3018
|
-
)
|
|
2757
|
+
sessionStorage.setItem('anonymous-annotation', state.offlineAnnotations)
|
|
3019
2758
|
}
|
|
3020
2759
|
if (state.viewingMode) this.changeViewingMode(state.viewingMode)
|
|
3021
2760
|
//The following three are boolean
|
|
@@ -3039,10 +2778,7 @@ export default {
|
|
|
3039
2778
|
*/
|
|
3040
2779
|
setFlightPathInfo: function (mapVersion) {
|
|
3041
2780
|
const mapVersionForFlightPath = 1.6
|
|
3042
|
-
if (
|
|
3043
|
-
mapVersion === mapVersionForFlightPath ||
|
|
3044
|
-
mapVersion > mapVersionForFlightPath
|
|
3045
|
-
) {
|
|
2781
|
+
if (mapVersion === mapVersionForFlightPath || mapVersion > mapVersionForFlightPath) {
|
|
3046
2782
|
// Show flight path option UI
|
|
3047
2783
|
this.displayFlightPathOption = true
|
|
3048
2784
|
// Show 2D as default on FC type
|
|
@@ -3088,10 +2824,10 @@ export default {
|
|
|
3088
2824
|
identifier.taxon = state.entry
|
|
3089
2825
|
}
|
|
3090
2826
|
if (state.biologicalSex) {
|
|
3091
|
-
|
|
2827
|
+
identifier['biologicalSex'] = state.biologicalSex;
|
|
3092
2828
|
} else if (identifier.taxon === 'NCBITaxon:9606') {
|
|
3093
2829
|
//For backward compatibility
|
|
3094
|
-
identifier['biologicalSex'] = 'PATO:0000384'
|
|
2830
|
+
identifier['biologicalSex'] = 'PATO:0000384';
|
|
3095
2831
|
}
|
|
3096
2832
|
} else {
|
|
3097
2833
|
// Set the bioloicalSex now if map is not resumed from
|
|
@@ -3101,8 +2837,6 @@ export default {
|
|
|
3101
2837
|
}
|
|
3102
2838
|
}
|
|
3103
2839
|
|
|
3104
|
-
console.log("tooltip delay")
|
|
3105
|
-
|
|
3106
2840
|
let promise1 = this.mapManagerRef.loadMap(
|
|
3107
2841
|
identifier,
|
|
3108
2842
|
this.eventCallback(),
|
|
@@ -3117,52 +2851,48 @@ export default {
|
|
|
3117
2851
|
tooltipDelay: 15, // new feature to delay tooltips showing
|
|
3118
2852
|
}
|
|
3119
2853
|
)
|
|
3120
|
-
promise1
|
|
3121
|
-
.
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
|
|
3129
|
-
|
|
3130
|
-
|
|
3131
|
-
|
|
3132
|
-
|
|
3133
|
-
this.flatmapError =
|
|
3134
|
-
|
|
3135
|
-
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
)
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
text: 'Load Default Map',
|
|
3155
|
-
callback: () => {
|
|
3156
|
-
const defaultSpecies = multiFlatmapVuer.initial
|
|
3157
|
-
multiFlatmapVuer.setSpecies(defaultSpecies, undefined, 3)
|
|
3158
|
-
},
|
|
2854
|
+
promise1.then((returnedObject) => {
|
|
2855
|
+
this.mapImp = returnedObject
|
|
2856
|
+
this.serverURL = this.mapImp.makeServerUrl('').slice(0, -1)
|
|
2857
|
+
let mapVersion = this.mapImp.details.version
|
|
2858
|
+
this.setFlightPathInfo(mapVersion)
|
|
2859
|
+
const stateToSet = this._stateToBeSet ? this._stateToBeSet : state
|
|
2860
|
+
this.onFlatmapReady(stateToSet)
|
|
2861
|
+
this.$nextTick(() => this.restoreMapState(stateToSet))
|
|
2862
|
+
}).catch((error) => {
|
|
2863
|
+
console.error('Flatmap loading error:', error)
|
|
2864
|
+
// prepare error object
|
|
2865
|
+
this.flatmapError = {};
|
|
2866
|
+
if (error.message && error.message.indexOf('Unknown map') !== -1) {
|
|
2867
|
+
this.flatmapError['title'] = 'Unknown Map!';
|
|
2868
|
+
this.flatmapError['messages'] = Object.keys(identifier).map(key => {
|
|
2869
|
+
const keyName = key === 'uuid' ? 'UUID' : capitalise(key);
|
|
2870
|
+
return `${keyName}: ${identifier[key]}`
|
|
2871
|
+
});
|
|
2872
|
+
} else {
|
|
2873
|
+
this.flatmapError['title'] = 'Error Loading Map!';
|
|
2874
|
+
this.flatmapError['messages'] = [
|
|
2875
|
+
error.message ? error.message : error.toString(),
|
|
2876
|
+
'Please try again later or contact support if the problem persists.'
|
|
2877
|
+
];
|
|
2878
|
+
}
|
|
2879
|
+
if (this.$parent?.$refs?.multiContainer) {
|
|
2880
|
+
// if the flatmap is in a multiflatmapvuer
|
|
2881
|
+
// show a button to load default map
|
|
2882
|
+
const multiFlatmapVuer = this.$parent;
|
|
2883
|
+
this.flatmapError['button'] = {
|
|
2884
|
+
text: 'Load Default Map',
|
|
2885
|
+
callback: () => {
|
|
2886
|
+
const defaultSpecies = multiFlatmapVuer.initial;
|
|
2887
|
+
multiFlatmapVuer.setSpecies(defaultSpecies, undefined, 3);
|
|
3159
2888
|
}
|
|
3160
|
-
}
|
|
3161
|
-
|
|
3162
|
-
|
|
2889
|
+
};
|
|
2890
|
+
}
|
|
2891
|
+
this.loading = false;
|
|
2892
|
+
})
|
|
3163
2893
|
} else if (state) {
|
|
3164
2894
|
this._stateToBeSet = {
|
|
3165
|
-
...state
|
|
2895
|
+
...state
|
|
3166
2896
|
}
|
|
3167
2897
|
if (this.mapImp && !this.loading) {
|
|
3168
2898
|
this.restoreMapState(this._stateToBeSet)
|
|
@@ -3204,7 +2934,7 @@ export default {
|
|
|
3204
2934
|
let filterSourcesMap = new Map()
|
|
3205
2935
|
for (const annotation of this.mapImp.annotations.values()) {
|
|
3206
2936
|
if (annotation.source) {
|
|
3207
|
-
if (
|
|
2937
|
+
if ("alert" in annotation) {
|
|
3208
2938
|
withAlert.add(annotation.source)
|
|
3209
2939
|
} else {
|
|
3210
2940
|
withoutAlert.add(annotation.source)
|
|
@@ -3221,7 +2951,7 @@ export default {
|
|
|
3221
2951
|
sourceMap.set(setKey, new Set())
|
|
3222
2952
|
}
|
|
3223
2953
|
sourceMap.get(setKey).add(`${annotation.source}`)
|
|
3224
|
-
}
|
|
2954
|
+
};
|
|
3225
2955
|
if (Array.isArray(value)) {
|
|
3226
2956
|
value.forEach(addToSourceMap)
|
|
3227
2957
|
} else {
|
|
@@ -3232,10 +2962,10 @@ export default {
|
|
|
3232
2962
|
}
|
|
3233
2963
|
}
|
|
3234
2964
|
let filterSources = {
|
|
3235
|
-
alert: {
|
|
3236
|
-
with: [...withAlert],
|
|
3237
|
-
without: [...withoutAlert]
|
|
3238
|
-
}
|
|
2965
|
+
'alert': {
|
|
2966
|
+
'with': [...withAlert],
|
|
2967
|
+
'without': [...withoutAlert]
|
|
2968
|
+
}
|
|
3239
2969
|
}
|
|
3240
2970
|
for (const [key, value] of filterSourcesMap.entries()) {
|
|
3241
2971
|
filterSources[key] = {}
|
|
@@ -3246,15 +2976,10 @@ export default {
|
|
|
3246
2976
|
return filterSources
|
|
3247
2977
|
},
|
|
3248
2978
|
getFilterOptions: async function (mapImp, _providedKnowledge) {
|
|
3249
|
-
const providedKnowledge = _providedKnowledge || this.getFlatmapKnowledge()
|
|
3250
|
-
const providedPathways = this.pathways
|
|
3251
|
-
const flatmapFilterOptions = await getFlatmapFilterOptions(
|
|
3252
|
-
|
|
3253
|
-
mapImp,
|
|
3254
|
-
providedKnowledge,
|
|
3255
|
-
providedPathways
|
|
3256
|
-
)
|
|
3257
|
-
return flatmapFilterOptions
|
|
2979
|
+
const providedKnowledge = _providedKnowledge || this.getFlatmapKnowledge();
|
|
2980
|
+
const providedPathways = this.pathways;
|
|
2981
|
+
const flatmapFilterOptions = await getFlatmapFilterOptions(this.flatmapAPI, mapImp, providedKnowledge, providedPathways);
|
|
2982
|
+
return flatmapFilterOptions;
|
|
3258
2983
|
},
|
|
3259
2984
|
/**
|
|
3260
2985
|
* @public
|
|
@@ -3262,40 +2987,33 @@ export default {
|
|
|
3262
2987
|
*/
|
|
3263
2988
|
onFlatmapReady: function (state) {
|
|
3264
2989
|
// onFlatmapReady is used for functions that need to run immediately after the flatmap is loaded
|
|
3265
|
-
this.sensor = markRaw(
|
|
3266
|
-
new ResizeSensor(this.$refs.display, this.mapResize)
|
|
3267
|
-
)
|
|
2990
|
+
this.sensor = markRaw(new ResizeSensor(this.$refs.display, this.mapResize))
|
|
3268
2991
|
if (this.mapImp.options?.style === 'functional') {
|
|
3269
2992
|
this.isFC = true
|
|
3270
2993
|
}
|
|
3271
2994
|
this.mapImp.setBackgroundOpacity(1)
|
|
3272
2995
|
this.backgroundChangeCallback(this.currentBackground)
|
|
3273
2996
|
this.pathways = this.mapImp.pathTypes()
|
|
3274
|
-
this.pathways = this.pathways.filter(
|
|
2997
|
+
this.pathways = this.pathways.filter(path => {
|
|
3275
2998
|
return path.enabled && path.type !== 'other'
|
|
3276
2999
|
})
|
|
3277
3000
|
//Disable layers for now
|
|
3278
3001
|
//this.layers = this.mapImp.getLayers();
|
|
3279
3002
|
this.processSystems(this.mapImp.getSystems())
|
|
3280
3003
|
//Async, pass the state for checking
|
|
3281
|
-
this.processTaxon(
|
|
3282
|
-
|
|
3283
|
-
state ? state['taxonSelection'] : undefined
|
|
3284
|
-
)
|
|
3285
|
-
|
|
3286
|
-
this.containsAlert = 'alert' in this.mapImp.featureFilterRanges()
|
|
3004
|
+
this.processTaxon(this.mapImp.taxonIdentifiers, state ? state['taxonSelection'] : undefined)
|
|
3005
|
+
this.containsAlert = "alert" in this.mapImp.featureFilterRanges()
|
|
3287
3006
|
this.flatmapLegends = this.mapImp.flatmapLegend
|
|
3288
3007
|
this.loading = false
|
|
3289
3008
|
this.computePathControlsMaximumHeight()
|
|
3290
3009
|
this.mapResize()
|
|
3291
|
-
this.handleMapClick()
|
|
3292
|
-
this.setInitMapState()
|
|
3010
|
+
this.handleMapClick();
|
|
3011
|
+
this.setInitMapState();
|
|
3293
3012
|
if (this.displayMinimap) {
|
|
3294
|
-
const minimapOptions = { position: 'top-right' }
|
|
3295
|
-
this.mapImp.createMinimap(minimapOptions)
|
|
3013
|
+
const minimapOptions = { position: 'top-right' };
|
|
3014
|
+
this.mapImp.createMinimap(minimapOptions);
|
|
3296
3015
|
this.addResizeButtonToMinimap()
|
|
3297
3016
|
}
|
|
3298
|
-
this.currentFlatmapUuid = this.mapImp?.mapMetadata?.uuid
|
|
3299
3017
|
/**
|
|
3300
3018
|
* This is ``onFlatmapReady`` event.
|
|
3301
3019
|
* @arg ``this`` (Component Vue Instance)
|
|
@@ -3308,35 +3026,33 @@ export default {
|
|
|
3308
3026
|
* after the map is loaded.
|
|
3309
3027
|
*/
|
|
3310
3028
|
handleMapClick: function () {
|
|
3311
|
-
const _map = this.mapImp.map
|
|
3029
|
+
const _map = this.mapImp.map;
|
|
3312
3030
|
if (_map) {
|
|
3313
3031
|
_map.on('click', (e) => {
|
|
3314
3032
|
if (!this.connectivityDataSource) {
|
|
3315
|
-
this.$emit('connectivity-info-close')
|
|
3033
|
+
this.$emit('connectivity-info-close');
|
|
3316
3034
|
}
|
|
3317
|
-
this.connectivityDataSource = '' // reset
|
|
3318
|
-
})
|
|
3035
|
+
this.connectivityDataSource = ''; // reset
|
|
3036
|
+
});
|
|
3319
3037
|
}
|
|
3320
3038
|
},
|
|
3321
|
-
onContextLost: function
|
|
3039
|
+
onContextLost: function() {
|
|
3322
3040
|
this.lastViewport = markRaw(this.mapImp.getState())
|
|
3323
|
-
this.flatmapError = {}
|
|
3041
|
+
this.flatmapError = {};
|
|
3324
3042
|
this.flatmapError['title'] = 'GL context lost!'
|
|
3325
|
-
this.flatmapError['messages'] = [
|
|
3326
|
-
`A display issue has occurred due
|
|
3043
|
+
this.flatmapError['messages'] = [`A display issue has occurred due
|
|
3327
3044
|
to a limit on available WebGL contexts. You can restore the display
|
|
3328
3045
|
using the Restore Context button. Please see the
|
|
3329
3046
|
<a href="https://docs.sparc.science/docs/integrated-maps-viewer-overview#limit-on-available-webgl-contexts" target='_blank'>documentation</a>
|
|
3330
|
-
for more details
|
|
3331
|
-
]
|
|
3047
|
+
for more details.`]
|
|
3332
3048
|
this.flatmapError['button'] = {
|
|
3333
3049
|
text: 'Restore Context',
|
|
3334
3050
|
callback: () => {
|
|
3335
3051
|
this.forceContextRestore()
|
|
3336
|
-
}
|
|
3337
|
-
}
|
|
3052
|
+
}
|
|
3053
|
+
};
|
|
3338
3054
|
},
|
|
3339
|
-
onContextRestored: function
|
|
3055
|
+
onContextRestored: function() {
|
|
3340
3056
|
if (this.mapImp) {
|
|
3341
3057
|
this.handleMapClick()
|
|
3342
3058
|
this.setInitMapState()
|
|
@@ -3346,8 +3062,8 @@ export default {
|
|
|
3346
3062
|
}
|
|
3347
3063
|
this.restoreMapState(lostState)
|
|
3348
3064
|
if (this.displayMinimap) {
|
|
3349
|
-
const minimapOptions = { position: 'top-right' }
|
|
3350
|
-
this.mapImp.createMinimap(minimapOptions)
|
|
3065
|
+
const minimapOptions = { position: 'top-right' };
|
|
3066
|
+
this.mapImp.createMinimap(minimapOptions);
|
|
3351
3067
|
this.addResizeButtonToMinimap()
|
|
3352
3068
|
}
|
|
3353
3069
|
if (this.filterToRestore) {
|
|
@@ -3378,23 +3094,23 @@ export default {
|
|
|
3378
3094
|
if (this.mapImp) {
|
|
3379
3095
|
if (term === undefined || term === '') {
|
|
3380
3096
|
this.mapImp.clearSearchResults()
|
|
3381
|
-
if (this.viewingMode ===
|
|
3382
|
-
this.$emit('connectivity-info-close')
|
|
3383
|
-
} else if (this.viewingMode ===
|
|
3097
|
+
if (this.viewingMode === "Exploration") {
|
|
3098
|
+
this.$emit('connectivity-info-close');
|
|
3099
|
+
} else if (this.viewingMode === "Annotation") {
|
|
3384
3100
|
this.manualAbortedOnClose()
|
|
3385
3101
|
}
|
|
3386
|
-
this.searchTerm =
|
|
3102
|
+
this.searchTerm = ""
|
|
3387
3103
|
return true
|
|
3388
3104
|
} else {
|
|
3389
3105
|
const searchResults = this.mapImp.search(term)
|
|
3390
3106
|
if (searchResults?.results?.length) {
|
|
3391
3107
|
this.mapImp.showSearchResults(searchResults)
|
|
3392
3108
|
if (displayInfo) {
|
|
3393
|
-
let featureId = undefined
|
|
3109
|
+
let featureId = undefined;
|
|
3394
3110
|
for (let i = 0; i < searchResults.results.length; i++) {
|
|
3395
3111
|
featureId = searchResults.results[i].featureId
|
|
3396
3112
|
const annotation = this.mapImp.annotation(featureId)
|
|
3397
|
-
if (featureId && annotation?.label) break
|
|
3113
|
+
if (featureId && annotation?.label) break;
|
|
3398
3114
|
}
|
|
3399
3115
|
if (featureId) {
|
|
3400
3116
|
const feature = this.mapImp.featureProperties(featureId)
|
|
@@ -3430,13 +3146,10 @@ export default {
|
|
|
3430
3146
|
highlightConnectedPaths: function (paths) {
|
|
3431
3147
|
if (paths.length) {
|
|
3432
3148
|
// filter paths for this map
|
|
3433
|
-
const filteredPaths = paths.filter(
|
|
3434
|
-
(path) => path in this.mapImp.pathways.paths
|
|
3435
|
-
)
|
|
3149
|
+
const filteredPaths = paths.filter(path => (path in this.mapImp.pathways.paths))
|
|
3436
3150
|
// this.zoomToFeatures is replaced with selectGeoJSONFeatures to highlight paths
|
|
3437
|
-
const featureIdsToHighlight =
|
|
3438
|
-
|
|
3439
|
-
this.mapImp.selectGeoJSONFeatures(featureIdsToHighlight)
|
|
3151
|
+
const featureIdsToHighlight = this.mapImp.modelFeatureIdList(filteredPaths);
|
|
3152
|
+
this.mapImp.selectGeoJSONFeatures(featureIdsToHighlight);
|
|
3440
3153
|
}
|
|
3441
3154
|
},
|
|
3442
3155
|
/**
|
|
@@ -3453,167 +3166,20 @@ export default {
|
|
|
3453
3166
|
EventBus.emit('onActionClick', data)
|
|
3454
3167
|
},
|
|
3455
3168
|
setConnectionType: function (type) {
|
|
3456
|
-
this.connectionType = type
|
|
3457
|
-
},
|
|
3458
|
-
/**
|
|
3459
|
-
* Main function to coordinate fetching dataset info and processing files.
|
|
3460
|
-
*/
|
|
3461
|
-
async fetchFlatmapProtocols(uuid) {
|
|
3462
|
-
const cacheKey = `flatmap_dataset_${uuid}`
|
|
3463
|
-
|
|
3464
|
-
// Try to get from cache first
|
|
3465
|
-
// console.log('------- caching temporary disabled for debugging -------')
|
|
3466
|
-
// const cachedData = null
|
|
3467
|
-
const cachedData = this.getSessionCache(cacheKey)
|
|
3468
|
-
if (cachedData) {
|
|
3469
|
-
this.datasetInfo = cachedData
|
|
3470
|
-
this.processDatasetFiles(cachedData)
|
|
3471
|
-
return
|
|
3472
|
-
}
|
|
3473
|
-
|
|
3474
|
-
// If not in cache, call the API
|
|
3475
|
-
const apiLocation = this.sparcAPI
|
|
3476
|
-
if (!apiLocation) {
|
|
3477
|
-
console.warn('VITE_API_LOCATION is not defined.')
|
|
3478
|
-
return
|
|
3479
|
-
}
|
|
3480
|
-
|
|
3481
|
-
try {
|
|
3482
|
-
console.log('Fetching dataset info from API...')
|
|
3483
|
-
// Ensure the URL matches your backend route structure
|
|
3484
|
-
const response = await fetch(`${apiLocation}flatmap/uuid?uuid=${uuid}`)
|
|
3485
|
-
|
|
3486
|
-
let data = undefined;
|
|
3487
|
-
|
|
3488
|
-
if (!response.ok) {
|
|
3489
|
-
if (this.testDataLocation) {
|
|
3490
|
-
data = await retrieveOmexData(this.testDataLocation, uuid)
|
|
3491
|
-
}
|
|
3492
|
-
} else {
|
|
3493
|
-
data = await response.json()
|
|
3494
|
-
}
|
|
3495
|
-
|
|
3496
|
-
if (!data) {
|
|
3497
|
-
throw new Error(`No protocol data available for map`)
|
|
3498
|
-
}
|
|
3499
|
-
|
|
3500
|
-
// Save to cache and process
|
|
3501
|
-
|
|
3502
|
-
this.setSessionCache(cacheKey, data)
|
|
3503
|
-
this.datasetInfo = data
|
|
3504
|
-
this.processDatasetFiles(data)
|
|
3505
|
-
} catch (error) {
|
|
3506
|
-
console.error('Error fetching flatmap protocols:', error)
|
|
3507
|
-
}
|
|
3508
|
-
},
|
|
3509
|
-
|
|
3510
|
-
/**
|
|
3511
|
-
* Extract the bucket name from an S3 URI.
|
|
3512
|
-
*
|
|
3513
|
-
* @param s3Uri
|
|
3514
|
-
*/
|
|
3515
|
-
extractBucketNameFromS3Uri(s3Uri) {
|
|
3516
|
-
try {
|
|
3517
|
-
// Use the native URL API to parse the s3:// URI
|
|
3518
|
-
// s3://bucket-name/path/to/key -> hostname is bucket-name
|
|
3519
|
-
const url = new URL(s3Uri)
|
|
3520
|
-
return url.hostname
|
|
3521
|
-
} catch (e) {
|
|
3522
|
-
console.error('Error converting S3 URI:', e)
|
|
3523
|
-
return null
|
|
3524
|
-
}
|
|
3525
|
-
},
|
|
3526
|
-
/**
|
|
3527
|
-
* Iterates through the file list, constructs full URLs, and checks for simulation content.
|
|
3528
|
-
*/
|
|
3529
|
-
async processDatasetFiles(data) {
|
|
3530
|
-
if (!data) return
|
|
3531
|
-
|
|
3532
|
-
if (data.testData) {
|
|
3533
|
-
this.simulationInfo = [] // Reset list
|
|
3534
|
-
data.simulation.forEach((item) => {
|
|
3535
|
-
this.simulationInfo.push({
|
|
3536
|
-
label: item.name,
|
|
3537
|
-
path: item.dataset.path,
|
|
3538
|
-
dataset_id: item.datasetId,
|
|
3539
|
-
type: 'Simulation',
|
|
3540
|
-
resource: item.resource.url,
|
|
3541
|
-
})
|
|
3542
|
-
})
|
|
3543
|
-
} else {
|
|
3544
|
-
if (data.length !== 0) {
|
|
3545
|
-
this.simulationInfo = [] // Reset list
|
|
3546
|
-
//FIXME: Currently only process the first dataset entry
|
|
3547
|
-
const firstData = data[0]
|
|
3548
|
-
const apiLocation = this.sparcAPI
|
|
3549
|
-
// Base URL for Pennsieve public assets
|
|
3550
|
-
const baseUrl = `${apiLocation}/s3-resource/${firstData.dataset_id}/files`
|
|
3551
|
-
const bucketName = this.extractBucketNameFromS3Uri(firstData.s3uri)
|
|
3552
|
-
|
|
3553
|
-
firstData.urls.map(async (filePath) => {
|
|
3554
|
-
const fullUrl = `${baseUrl}/${filePath}?s3BucketName=${bucketName}`
|
|
3555
|
-
// Add to our list of valid files
|
|
3556
|
-
this.simulationInfo.push({
|
|
3557
|
-
label: firstData.title,
|
|
3558
|
-
s3uri: firstData.s3uri,
|
|
3559
|
-
dataset_id: firstData.dataset_id,
|
|
3560
|
-
version: firstData.version,
|
|
3561
|
-
path: filePath,
|
|
3562
|
-
type: 'Simulation',
|
|
3563
|
-
resource: fullUrl,
|
|
3564
|
-
})
|
|
3565
|
-
})
|
|
3566
|
-
}
|
|
3567
|
-
}
|
|
3568
|
-
},
|
|
3569
|
-
/**
|
|
3570
|
-
* Retrieve data from session storage if it hasn't expired.
|
|
3571
|
-
*/
|
|
3572
|
-
getSessionCache(key) {
|
|
3573
|
-
const itemStr = sessionStorage.getItem(key)
|
|
3574
|
-
if (!itemStr) return null
|
|
3575
|
-
|
|
3576
|
-
try {
|
|
3577
|
-
const item = JSON.parse(itemStr)
|
|
3578
|
-
const now = new Date()
|
|
3579
|
-
|
|
3580
|
-
// Check if expired (compare current time to expiry time)
|
|
3581
|
-
if (now.getTime() > item.expiry) {
|
|
3582
|
-
sessionStorage.removeItem(key)
|
|
3583
|
-
return null
|
|
3584
|
-
}
|
|
3585
|
-
return item.value
|
|
3586
|
-
} catch (e) {
|
|
3587
|
-
return null
|
|
3588
|
-
}
|
|
3169
|
+
this.connectionType = type;
|
|
3589
3170
|
},
|
|
3590
|
-
|
|
3591
3171
|
/**
|
|
3592
|
-
*
|
|
3172
|
+
* @public
|
|
3173
|
+
* Function to track events.
|
|
3174
|
+
* @arg {Object} `data`
|
|
3593
3175
|
*/
|
|
3594
|
-
|
|
3595
|
-
const
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
|
|
3601
|
-
expiry: now.getTime() + ttl,
|
|
3602
|
-
}
|
|
3603
|
-
|
|
3604
|
-
try {
|
|
3605
|
-
sessionStorage.setItem(key, JSON.stringify(item))
|
|
3606
|
-
} catch (e) {
|
|
3607
|
-
console.warn('Session storage full or disabled', e)
|
|
3608
|
-
}
|
|
3609
|
-
},
|
|
3610
|
-
getSimulationLabel(info) {
|
|
3611
|
-
return info.path.split('/').pop()
|
|
3612
|
-
},
|
|
3613
|
-
openSimulation() {
|
|
3614
|
-
if (this.selectedSimulation) {
|
|
3615
|
-
this.$emit('open-simulation', this.selectedSimulation)
|
|
3616
|
-
}
|
|
3176
|
+
trackEvent: function (data) {
|
|
3177
|
+
const taggingData = {
|
|
3178
|
+
'event': 'interaction_event',
|
|
3179
|
+
'location': 'flatmap',
|
|
3180
|
+
...data,
|
|
3181
|
+
};
|
|
3182
|
+
this.$emit('trackEvent', taggingData);
|
|
3617
3183
|
},
|
|
3618
3184
|
},
|
|
3619
3185
|
props: {
|
|
@@ -3672,7 +3238,7 @@ export default {
|
|
|
3672
3238
|
* On default, `false`, clicking help will show all tooltips.
|
|
3673
3239
|
* If `true`, clicking help will show the help-mode-dialog.
|
|
3674
3240
|
*/
|
|
3675
|
-
|
|
3241
|
+
helpModeDialog: {
|
|
3676
3242
|
type: Boolean,
|
|
3677
3243
|
default: false,
|
|
3678
3244
|
},
|
|
@@ -3803,17 +3369,10 @@ export default {
|
|
|
3803
3369
|
type: String,
|
|
3804
3370
|
default: 'https://api.sparc.science/',
|
|
3805
3371
|
},
|
|
3806
|
-
/**
|
|
3807
|
-
* Specify the endpoint of the SPARC API.
|
|
3808
|
-
*/
|
|
3809
|
-
testDataLocation: {
|
|
3810
|
-
type: String,
|
|
3811
|
-
default: '',
|
|
3812
|
-
},
|
|
3813
3372
|
/**
|
|
3814
3373
|
* Flag to disable UIs on Map
|
|
3815
3374
|
*/
|
|
3816
|
-
|
|
3375
|
+
disableUI: {
|
|
3817
3376
|
type: Boolean,
|
|
3818
3377
|
default: false,
|
|
3819
3378
|
},
|
|
@@ -3876,14 +3435,12 @@ export default {
|
|
|
3876
3435
|
flatmapError: null,
|
|
3877
3436
|
sensor: null,
|
|
3878
3437
|
mapManagerRef: undefined,
|
|
3879
|
-
currentFlatmapUuid: undefined,
|
|
3880
3438
|
flatmapQueries: undefined,
|
|
3881
3439
|
annotationEntry: [],
|
|
3882
3440
|
//tooltip display has to be set to false until it is rendered
|
|
3883
|
-
//for the first time, otherwise it may display an arrow at
|
|
3441
|
+
//for the first time, otherwise it may display an arrow at a
|
|
3884
3442
|
//undesired location.
|
|
3885
3443
|
tooltipDisplay: false,
|
|
3886
|
-
tooltipTimer: null,
|
|
3887
3444
|
serverURL: undefined,
|
|
3888
3445
|
layers: [],
|
|
3889
3446
|
pathways: [],
|
|
@@ -3909,13 +3466,12 @@ export default {
|
|
|
3909
3466
|
{ value: false, ref: 'warningPopover' }, // 7
|
|
3910
3467
|
{ value: false, ref: 'whatsNewPopover' }, // 8
|
|
3911
3468
|
{ value: false, ref: 'featuredMarkerPopover' }, // 9
|
|
3912
|
-
{ value: false, refs:
|
|
3913
|
-
{ value: false, refs:
|
|
3914
|
-
{ value: false, refs:
|
|
3915
|
-
{ value: false, refs:
|
|
3916
|
-
{ value: false, refs:
|
|
3917
|
-
{ value: false, refs:
|
|
3918
|
-
{ value: false, ref: 'simulationPopover' }, // 16
|
|
3469
|
+
{ value: false, refs: "toolbarPopover", ref: "editPopover" }, // 10
|
|
3470
|
+
{ value: false, refs: "toolbarPopover", ref: "deletePopover" }, // 11
|
|
3471
|
+
{ value: false, refs: "toolbarPopover", ref: "pointPopover" }, // 12
|
|
3472
|
+
{ value: false, refs: "toolbarPopover", ref: "lineStringPopover" }, // 13
|
|
3473
|
+
{ value: false, refs: "toolbarPopover", ref: "polygonPopover" }, // 14
|
|
3474
|
+
{ value: false, refs: "toolbarPopover", ref: "connectionPopover" }, // 15
|
|
3919
3475
|
],
|
|
3920
3476
|
helpModeActiveIndex: this.helpModeInitialIndex,
|
|
3921
3477
|
yellowstar: yellowstar,
|
|
@@ -3940,14 +3496,9 @@ export default {
|
|
|
3940
3496
|
currentHover: '',
|
|
3941
3497
|
viewingMode: 'Exploration',
|
|
3942
3498
|
viewingModes: {
|
|
3943
|
-
Exploration:
|
|
3944
|
-
|
|
3945
|
-
'
|
|
3946
|
-
'Discover Neuron connections by selecting a neuron and viewing its associated network connections',
|
|
3947
|
-
Annotation: [
|
|
3948
|
-
'View feature annotations',
|
|
3949
|
-
'Add, comment on and view feature annotations',
|
|
3950
|
-
],
|
|
3499
|
+
'Exploration': 'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources',
|
|
3500
|
+
'Neuron Connection': 'Discover Neuron connections by selecting a neuron and viewing its associated network connections',
|
|
3501
|
+
'Annotation': ['View feature annotations', 'Add, comment on and view feature annotations']
|
|
3951
3502
|
},
|
|
3952
3503
|
connectionType: 'All',
|
|
3953
3504
|
offlineAnnotationEnabled: false,
|
|
@@ -3957,12 +3508,12 @@ export default {
|
|
|
3957
3508
|
openMapRef: undefined,
|
|
3958
3509
|
backgroundIconRef: undefined,
|
|
3959
3510
|
toolbarOptions: [
|
|
3960
|
-
|
|
3961
|
-
|
|
3962
|
-
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
|
|
3511
|
+
"Edit",
|
|
3512
|
+
"Delete",
|
|
3513
|
+
"Point",
|
|
3514
|
+
"LineString",
|
|
3515
|
+
"Polygon",
|
|
3516
|
+
"Connection",
|
|
3966
3517
|
],
|
|
3967
3518
|
annotator: undefined,
|
|
3968
3519
|
authorisedUser: undefined,
|
|
@@ -3978,12 +3529,12 @@ export default {
|
|
|
3978
3529
|
containsAlert: false,
|
|
3979
3530
|
alertOptions: [
|
|
3980
3531
|
{
|
|
3981
|
-
label: 'Display Path With
|
|
3532
|
+
label: 'Display Path With Notes',
|
|
3982
3533
|
key: 'alert',
|
|
3983
3534
|
enabled: true,
|
|
3984
3535
|
},
|
|
3985
3536
|
{
|
|
3986
|
-
label: 'Display Path Without
|
|
3537
|
+
label: 'Display Path Without Notes',
|
|
3987
3538
|
key: 'withoutAlert',
|
|
3988
3539
|
enabled: true,
|
|
3989
3540
|
},
|
|
@@ -3992,17 +3543,13 @@ export default {
|
|
|
3992
3543
|
alert: {
|
|
3993
3544
|
with: true,
|
|
3994
3545
|
without: true,
|
|
3995
|
-
}
|
|
3546
|
+
}
|
|
3996
3547
|
}),
|
|
3997
|
-
searchTerm:
|
|
3548
|
+
searchTerm: "",
|
|
3998
3549
|
taxonLeaveDelay: undefined,
|
|
3999
3550
|
connectivityFilters: [],
|
|
4000
3551
|
flatmapLegends: [],
|
|
4001
3552
|
lastViewport: undefined,
|
|
4002
|
-
simulationInfo: [],
|
|
4003
|
-
datasetInfo: null,
|
|
4004
|
-
simulationDrawerOpen: false,
|
|
4005
|
-
selectedSimulation: null,
|
|
4006
3553
|
}
|
|
4007
3554
|
},
|
|
4008
3555
|
computed: {
|
|
@@ -4010,17 +3557,16 @@ export default {
|
|
|
4010
3557
|
isValidDrawnCreated: function () {
|
|
4011
3558
|
return Object.keys(this.drawnCreatedEvent).length > 0
|
|
4012
3559
|
},
|
|
4013
|
-
requiresDrawer: function
|
|
3560
|
+
requiresDrawer: function() {
|
|
4014
3561
|
if (this.loading) {
|
|
4015
3562
|
this.drawerOpen = false
|
|
4016
3563
|
return false
|
|
4017
3564
|
}
|
|
4018
|
-
if (
|
|
4019
|
-
this.systems?.length > 0 ||
|
|
3565
|
+
if ((this.systems?.length > 0) ||
|
|
4020
3566
|
(this.containsAlert && this.alertOptions) ||
|
|
4021
|
-
this.pathways?.length > 0 ||
|
|
4022
|
-
this.taxonConnectivity?.length > 0 ||
|
|
4023
|
-
this.legendEntry?.length > 0
|
|
3567
|
+
(this.pathways?.length > 0) ||
|
|
3568
|
+
(this.taxonConnectivity?.length > 0) ||
|
|
3569
|
+
(this.legendEntry?.length > 0)
|
|
4024
3570
|
) {
|
|
4025
3571
|
this.drawerOpen = true
|
|
4026
3572
|
return true
|
|
@@ -4042,7 +3588,7 @@ export default {
|
|
|
4042
3588
|
return [...this.flatmapLegends, ...this.externalLegends]
|
|
4043
3589
|
},
|
|
4044
3590
|
showDatasetMarkerTooltip: function () {
|
|
4045
|
-
return this.hoverVisibilities[9].value
|
|
3591
|
+
return this.hoverVisibilities[9].value;
|
|
4046
3592
|
},
|
|
4047
3593
|
},
|
|
4048
3594
|
watch: {
|
|
@@ -4058,11 +3604,11 @@ export default {
|
|
|
4058
3604
|
// just take the action from helpModeActiveItem
|
|
4059
3605
|
// work with local value since the indexing is different
|
|
4060
3606
|
if (this.helpMode) {
|
|
4061
|
-
this.helpModeActiveIndex += 1
|
|
4062
|
-
this.setHelpMode(this.helpMode)
|
|
3607
|
+
this.helpModeActiveIndex += 1;
|
|
3608
|
+
this.setHelpMode(this.helpMode);
|
|
4063
3609
|
}
|
|
4064
3610
|
},
|
|
4065
|
-
render: function
|
|
3611
|
+
render: function(val) {
|
|
4066
3612
|
if (val) {
|
|
4067
3613
|
if (this.mapImp && this.mapImp.contextLost && !this.loading) {
|
|
4068
3614
|
this.$nextTick(() => {
|
|
@@ -4097,7 +3643,7 @@ export default {
|
|
|
4097
3643
|
this.authorisedUser = undefined
|
|
4098
3644
|
this.offlineAnnotationEnabled = true
|
|
4099
3645
|
}
|
|
4100
|
-
this.emitOfflineAnnotationUpdate()
|
|
3646
|
+
this.emitOfflineAnnotationUpdate();
|
|
4101
3647
|
this.setFeatureAnnotated()
|
|
4102
3648
|
this.addAnnotationFeature()
|
|
4103
3649
|
this.loading = false
|
|
@@ -4110,67 +3656,54 @@ export default {
|
|
|
4110
3656
|
}
|
|
4111
3657
|
},
|
|
4112
3658
|
activeDrawTool: function (tool) {
|
|
4113
|
-
let coordinates = []
|
|
4114
|
-
let lastClick = { x: null, y: null }
|
|
4115
|
-
const canvas = this.$el.querySelector('.maplibregl-canvas')
|
|
3659
|
+
let coordinates = [];
|
|
3660
|
+
let lastClick = { x: null, y: null };
|
|
3661
|
+
const canvas = this.$el.querySelector('.maplibregl-canvas');
|
|
4116
3662
|
const removeListeners = () => {
|
|
4117
|
-
canvas.removeEventListener('keydown', handleKeyboardEvent)
|
|
4118
|
-
canvas.removeEventListener('click', handleMouseEvent)
|
|
4119
|
-
}
|
|
3663
|
+
canvas.removeEventListener('keydown', handleKeyboardEvent);
|
|
3664
|
+
canvas.removeEventListener('click', handleMouseEvent);
|
|
3665
|
+
};
|
|
4120
3666
|
const handleKeyboardEvent = (event) => {
|
|
4121
|
-
if (!['Escape', 'Enter'].includes(event.key)) return
|
|
3667
|
+
if (!['Escape', 'Enter'].includes(event.key)) return;
|
|
4122
3668
|
const isValidDraw =
|
|
4123
3669
|
(tool === 'Point' && coordinates.length === 1) ||
|
|
4124
3670
|
(tool === 'LineString' && coordinates.length >= 2) ||
|
|
4125
|
-
(tool === 'Polygon' && coordinates.length >= 3)
|
|
3671
|
+
(tool === 'Polygon' && coordinates.length >= 3);
|
|
4126
3672
|
if (event.key === 'Escape' || (event.key === 'Enter' && !isValidDraw)) {
|
|
4127
|
-
this.activeDrawTool = undefined
|
|
3673
|
+
this.activeDrawTool = undefined;
|
|
4128
3674
|
}
|
|
4129
|
-
removeListeners()
|
|
4130
|
-
}
|
|
3675
|
+
removeListeners();
|
|
3676
|
+
};
|
|
4131
3677
|
const handleMouseEvent = (event) => {
|
|
4132
|
-
const rect = canvas.getBoundingClientRect()
|
|
4133
|
-
const x = event.clientX - rect.left
|
|
4134
|
-
const y = event.clientY - rect.top
|
|
4135
|
-
const distance = Math.sqrt(
|
|
4136
|
-
(x - lastClick.x) ** 2 + (y - lastClick.y) ** 2
|
|
4137
|
-
)
|
|
3678
|
+
const rect = canvas.getBoundingClientRect();
|
|
3679
|
+
const x = event.clientX - rect.left;
|
|
3680
|
+
const y = event.clientY - rect.top;
|
|
3681
|
+
const distance = Math.sqrt((x - lastClick.x) ** 2 + (y - lastClick.y) ** 2);
|
|
4138
3682
|
if (distance < 8) {
|
|
4139
|
-
if (!this.isValidDrawnCreated) this.activeDrawTool = undefined
|
|
4140
|
-
removeListeners()
|
|
4141
|
-
return
|
|
3683
|
+
if (!this.isValidDrawnCreated) this.activeDrawTool = undefined;
|
|
3684
|
+
removeListeners();
|
|
3685
|
+
return;
|
|
4142
3686
|
}
|
|
4143
|
-
lastClick = { x, y }
|
|
4144
|
-
coordinates.push(lastClick)
|
|
4145
|
-
}
|
|
3687
|
+
lastClick = { x, y };
|
|
3688
|
+
coordinates.push(lastClick);
|
|
3689
|
+
};
|
|
4146
3690
|
if (tool) {
|
|
4147
|
-
removeListeners()
|
|
4148
|
-
canvas.addEventListener('keydown', handleKeyboardEvent)
|
|
4149
|
-
canvas.addEventListener('click', handleMouseEvent)
|
|
3691
|
+
removeListeners();
|
|
3692
|
+
canvas.addEventListener('keydown', handleKeyboardEvent);
|
|
3693
|
+
canvas.addEventListener('click', handleMouseEvent);
|
|
4150
3694
|
}
|
|
4151
|
-
}
|
|
4152
|
-
currentFlatmapUuid: {
|
|
4153
|
-
handler(newUuid) {
|
|
4154
|
-
if (newUuid) {
|
|
4155
|
-
// console.log('New map loaded with uuid:', newUuid)
|
|
4156
|
-
this.fetchFlatmapProtocols(newUuid)
|
|
4157
|
-
}
|
|
4158
|
-
},
|
|
4159
|
-
// immediate: true,
|
|
4160
|
-
},
|
|
3695
|
+
}
|
|
4161
3696
|
},
|
|
4162
3697
|
created: function () {
|
|
4163
3698
|
if (this.mapManager) {
|
|
4164
|
-
this.mapManagerRef = this.mapManager
|
|
3699
|
+
this.mapManagerRef = this.mapManager;
|
|
4165
3700
|
} else {
|
|
4166
|
-
this.mapManagerRef = markRaw(
|
|
4167
|
-
new flatmap.MapViewer(this.flatmapAPI, { container: undefined })
|
|
4168
|
-
)
|
|
3701
|
+
this.mapManagerRef = markRaw(new flatmap.MapViewer(this.flatmapAPI, { container: undefined }));
|
|
4169
3702
|
/**
|
|
4170
3703
|
* The event emitted after a new mapManager is loaded.
|
|
4171
3704
|
* This mapManager can be used to create new flatmaps.
|
|
4172
3705
|
*/
|
|
4173
|
-
this.$emit('mapmanager-loaded', this.mapManagerRef)
|
|
3706
|
+
this.$emit('mapmanager-loaded', this.mapManagerRef);
|
|
4174
3707
|
}
|
|
4175
3708
|
},
|
|
4176
3709
|
mounted: function () {
|
|
@@ -4187,16 +3720,17 @@ export default {
|
|
|
4187
3720
|
} else if (this.renderAtMounted) {
|
|
4188
3721
|
this.createFlatmap()
|
|
4189
3722
|
}
|
|
4190
|
-
refreshFlatmapKnowledgeCache()
|
|
3723
|
+
refreshFlatmapKnowledgeCache();
|
|
4191
3724
|
},
|
|
4192
3725
|
}
|
|
4193
3726
|
</script>
|
|
4194
3727
|
|
|
4195
3728
|
<style lang="scss" scoped>
|
|
3729
|
+
|
|
4196
3730
|
.beta-popovers {
|
|
4197
3731
|
position: absolute;
|
|
4198
|
-
top:
|
|
4199
|
-
left:
|
|
3732
|
+
top: 90px;
|
|
3733
|
+
left: 16px;
|
|
4200
3734
|
text-align: left;
|
|
4201
3735
|
font-size: 25px;
|
|
4202
3736
|
}
|
|
@@ -4252,40 +3786,6 @@ export default {
|
|
|
4252
3786
|
width: 100%;
|
|
4253
3787
|
}
|
|
4254
3788
|
|
|
4255
|
-
.popover-location {
|
|
4256
|
-
position: absolute;
|
|
4257
|
-
left: 0px;
|
|
4258
|
-
transform: translateX(0);
|
|
4259
|
-
transition: all var(--el-transition-duration);
|
|
4260
|
-
z-index: 99;
|
|
4261
|
-
display: flex;
|
|
4262
|
-
flex-direction: row;
|
|
4263
|
-
align-items: center;
|
|
4264
|
-
|
|
4265
|
-
&.simulation {
|
|
4266
|
-
.el-button {
|
|
4267
|
-
background: $app-primary-color;
|
|
4268
|
-
}
|
|
4269
|
-
}
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
|
|
4273
|
-
&.open {
|
|
4274
|
-
transform: translateX(0);
|
|
4275
|
-
}
|
|
4276
|
-
&.close {
|
|
4277
|
-
transform: translateX(-100%);
|
|
4278
|
-
}
|
|
4279
|
-
}
|
|
4280
|
-
|
|
4281
|
-
.popover-location.top {
|
|
4282
|
-
top: 5px;
|
|
4283
|
-
}
|
|
4284
|
-
|
|
4285
|
-
.popover-location.bottom {
|
|
4286
|
-
bottom: 0px;
|
|
4287
|
-
}
|
|
4288
|
-
|
|
4289
3789
|
.pathway-location {
|
|
4290
3790
|
position: absolute;
|
|
4291
3791
|
bottom: 0px;
|
|
@@ -4532,7 +4032,7 @@ export default {
|
|
|
4532
4032
|
}
|
|
4533
4033
|
}
|
|
4534
4034
|
|
|
4535
|
-
:deep(.flatmap-marker-popup)
|
|
4035
|
+
:deep(.flatmap-marker-popup){
|
|
4536
4036
|
.maplibregl-popup-content {
|
|
4537
4037
|
padding: 0px;
|
|
4538
4038
|
}
|
|
@@ -4557,9 +4057,7 @@ export default {
|
|
|
4557
4057
|
}
|
|
4558
4058
|
}
|
|
4559
4059
|
|
|
4560
|
-
.zoomIn,
|
|
4561
|
-
.zoomOut,
|
|
4562
|
-
.fitWindow {
|
|
4060
|
+
.zoomIn, .zoomOut, .fitWindow {
|
|
4563
4061
|
padding: 4px;
|
|
4564
4062
|
}
|
|
4565
4063
|
|
|
@@ -4622,6 +4120,7 @@ export default {
|
|
|
4622
4120
|
border-color: $app-primary-color;
|
|
4623
4121
|
color: $app-primary-color;
|
|
4624
4122
|
}
|
|
4123
|
+
|
|
4625
4124
|
.el-popper__arrow {
|
|
4626
4125
|
&:before {
|
|
4627
4126
|
border-color: $app-primary-color;
|
|
@@ -4673,7 +4172,7 @@ export default {
|
|
|
4673
4172
|
color: $app-primary-color;
|
|
4674
4173
|
|
|
4675
4174
|
&.open-map-button {
|
|
4676
|
-
margin-bottom:
|
|
4175
|
+
margin-bottom:4px;
|
|
4677
4176
|
}
|
|
4678
4177
|
|
|
4679
4178
|
&:hover {
|
|
@@ -4797,7 +4296,7 @@ export default {
|
|
|
4797
4296
|
position: relative;
|
|
4798
4297
|
|
|
4799
4298
|
&::before {
|
|
4800
|
-
content:
|
|
4299
|
+
content: "";
|
|
4801
4300
|
display: block;
|
|
4802
4301
|
width: 0;
|
|
4803
4302
|
height: 0;
|
|
@@ -4926,7 +4425,7 @@ export default {
|
|
|
4926
4425
|
background-color: var(--white);
|
|
4927
4426
|
font-weight: 500;
|
|
4928
4427
|
color: rgb(48, 49, 51);
|
|
4929
|
-
width: 150px
|
|
4428
|
+
width: 150px!important;
|
|
4930
4429
|
}
|
|
4931
4430
|
|
|
4932
4431
|
:deep(.flatmap_dropdown) {
|
|
@@ -4950,10 +4449,11 @@ export default {
|
|
|
4950
4449
|
</style>
|
|
4951
4450
|
|
|
4952
4451
|
<style lang="scss">
|
|
4452
|
+
|
|
4953
4453
|
.flatmap-container {
|
|
4954
|
-
--el-color-primary: #
|
|
4955
|
-
--el-color-primary-light-5: #
|
|
4956
|
-
--el-color-primary-light-9: #
|
|
4454
|
+
--el-color-primary: #8300BF;
|
|
4455
|
+
--el-color-primary-light-5: #CD99E5;
|
|
4456
|
+
--el-color-primary-light-9: #F3E6F9;
|
|
4957
4457
|
--el-color-primary-dark-2: var(--el-color-primary);
|
|
4958
4458
|
}
|
|
4959
4459
|
|
|
@@ -4976,4 +4476,5 @@ export default {
|
|
|
4976
4476
|
}
|
|
4977
4477
|
}
|
|
4978
4478
|
}
|
|
4979
|
-
|
|
4479
|
+
|
|
4480
|
+
</style>
|