@abi-software/mapintegratedvuer 1.6.0-sim2-1 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{ContentMixin-BPFt-RUj.js → ContentMixin-BTXCMWvE.js} +11 -1
- package/dist/{Flatmap-qGnhSBev.js → Flatmap-BPYW-zJs.js} +8 -8
- package/dist/{Iframe-BlUcXHyz.js → Iframe-BZW4KSMI.js} +2 -2
- package/dist/{MultiFlatmap-BHpWg0EN.js → MultiFlatmap-DIlQi9RY.js} +124 -47
- package/dist/Plot-BHrtko8L.js +24 -0
- package/dist/{Scaffold-hE1o6z7H.js → Scaffold-D6q4r5RG.js} +5325 -5468
- package/dist/Simulation-DPVhTovy.js +10849 -0
- package/dist/index-D_VgD-w_.js +93354 -0
- package/dist/mapintegratedvuer.js +1 -1
- package/dist/mapintegratedvuer.umd.cjs +693 -622
- package/dist/{Plot-Cmg1sCOU.js → plotvuer-DSwGHaaa.js} +2873 -2891
- package/dist/{style-yUf7xZ7d.js → style-ZSZlDMUI.js} +23401 -23057
- package/dist/style.css +1 -1
- package/package.json +7 -6
- package/src/App.vue +1 -0
- package/src/components/ContentBar.vue +16 -4
- package/src/components/ContentVuer.vue +2 -1
- package/src/components/DialogToolbarContent.vue +12 -2
- package/src/components/MapContent.vue +10 -0
- package/src/components/SplitDialog.vue +4 -0
- package/src/components/SplitFlow.vue +96 -4
- package/src/components/viewers/MultiFlatmap.vue +149 -1
- package/src/components/viewers/Scaffold.vue +4 -3
- package/src/mixins/ContentMixin.js +11 -1
- package/src/stores/settings.js +8 -0
- package/src/stores/splitFlow.js +0 -1
- package/vite.bundle-build.js +1 -2
- package/dist/Simulation-DpqWobV9.js +0 -22
- package/dist/index-Fw8GJEyq.js +0 -58670
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@abi-software/mapintegratedvuer",
|
3
|
-
"version": "1.6.
|
3
|
+
"version": "1.6.1",
|
4
4
|
"license": "Apache-2.0",
|
5
5
|
"scripts": {
|
6
6
|
"serve": "vite --host --force",
|
@@ -50,12 +50,13 @@
|
|
50
50
|
"*.js"
|
51
51
|
],
|
52
52
|
"dependencies": {
|
53
|
-
"@abi-software/flatmapvuer": "^1.
|
54
|
-
"@abi-software/map-side-bar": "^2.
|
55
|
-
"@abi-software/map-utilities": "^1.
|
53
|
+
"@abi-software/flatmapvuer": "^1.6.0",
|
54
|
+
"@abi-software/map-side-bar": "^2.5.1",
|
55
|
+
"@abi-software/map-utilities": "^1.2.0",
|
56
56
|
"@abi-software/plotvuer": "^1.0.3",
|
57
|
-
"@abi-software/scaffoldvuer": "^1.
|
58
|
-
"@abi-software/simulationvuer": "^
|
57
|
+
"@abi-software/scaffoldvuer": "^1.6.2",
|
58
|
+
"@abi-software/simulationvuer": "^1.0.1",
|
59
|
+
"@abi-software/sparc-annotation": "0.3.1",
|
59
60
|
"@abi-software/svg-sprite": "^1.0.1",
|
60
61
|
"@element-plus/icons-vue": "^2.3.1",
|
61
62
|
"@vitejs/plugin-vue": "^4.6.2",
|
package/src/App.vue
CHANGED
@@ -149,10 +149,22 @@ export default {
|
|
149
149
|
},
|
150
150
|
popperOptions: function() {
|
151
151
|
return {
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
152
|
+
modifiers: [
|
153
|
+
{
|
154
|
+
name: 'preventOverflow',
|
155
|
+
options: {
|
156
|
+
boundary: this.boundariesElement,
|
157
|
+
}
|
158
|
+
},
|
159
|
+
{
|
160
|
+
name: 'flip',
|
161
|
+
options: {
|
162
|
+
boundary: this.boundariesElement,
|
163
|
+
flipVariations: false,
|
164
|
+
allowedAutoPlacements: ['bottom'],
|
165
|
+
}
|
166
|
+
},
|
167
|
+
]
|
156
168
|
}
|
157
169
|
},
|
158
170
|
entries: function() {
|
@@ -117,10 +117,11 @@ export default {
|
|
117
117
|
this.$refs.viewer?.searchSuggestions(term, suggestions);
|
118
118
|
},
|
119
119
|
setPanesBoundary: function() {
|
120
|
-
this.$refs.contentBar?.setBoundary(this.$refs["container"]
|
120
|
+
this.$refs.contentBar?.setBoundary(this.$refs["container"]);
|
121
121
|
},
|
122
122
|
speciesChanged: function (species) {
|
123
123
|
this.activeSpecies = species;
|
124
|
+
this.$emit("species-changed", species);
|
124
125
|
},
|
125
126
|
receiveSynchronisedEvent: async function (data) {
|
126
127
|
this.$refs.viewer?.receiveSynchronisedEvent(data);
|
@@ -26,7 +26,7 @@
|
|
26
26
|
<map-svg-icon icon="help" class="sync-help header-icon"/>
|
27
27
|
</template>
|
28
28
|
<template #default>
|
29
|
-
When in Linked mode the two maps will interact
|
29
|
+
When in Linked mode the two maps will interact
|
30
30
|
<br>
|
31
31
|
together. Select an organ in one and it will
|
32
32
|
<br>
|
@@ -279,6 +279,11 @@ export default {
|
|
279
279
|
this.$emit("onFullscreen");
|
280
280
|
this.isFullscreen = !this.isFullscreen;
|
281
281
|
},
|
282
|
+
onFullscreenEsc: function () {
|
283
|
+
if (!document.fullscreenElement) {
|
284
|
+
this.isFullscreen = false;
|
285
|
+
}
|
286
|
+
},
|
282
287
|
close: function() {
|
283
288
|
this.$emit("close");
|
284
289
|
},
|
@@ -306,6 +311,11 @@ export default {
|
|
306
311
|
mounted: function () {
|
307
312
|
this.activeViewRef = shallowRef(this.$refs.activeViewRef);
|
308
313
|
this.permalinkRef = shallowRef(this.$refs.permalinkRef);
|
314
|
+
|
315
|
+
document.addEventListener('fullscreenchange', this.onFullscreenEsc);
|
316
|
+
},
|
317
|
+
unmounted: function () {
|
318
|
+
document.removeEventListener('fullscreenchange', this.onFullscreenEsc);
|
309
319
|
},
|
310
320
|
};
|
311
321
|
</script>
|
@@ -372,7 +382,7 @@ export default {
|
|
372
382
|
&:hover, &:focus {
|
373
383
|
color:#FFFFFF;
|
374
384
|
background-color:$app-primary-color;
|
375
|
-
box-shadow: -3px 2px 4px #000000;
|
385
|
+
box-shadow: -3px 2px 4px #000000;
|
376
386
|
}
|
377
387
|
}
|
378
388
|
|
@@ -91,6 +91,14 @@ export default {
|
|
91
91
|
type: Boolean,
|
92
92
|
default: true,
|
93
93
|
},
|
94
|
+
/**
|
95
|
+
* The option to show annotation in sidebar.
|
96
|
+
* Default is `true`. Set `false` to show as popup on map.
|
97
|
+
*/
|
98
|
+
annotationSidebar: {
|
99
|
+
type: Boolean,
|
100
|
+
default: true,
|
101
|
+
},
|
94
102
|
},
|
95
103
|
data: function () {
|
96
104
|
return {
|
@@ -305,6 +313,7 @@ export default {
|
|
305
313
|
this.options.algoliaId ? this.settingsStore.updateAlgoliaId(this.options.algoliaId) : null
|
306
314
|
this.options.pennsieveApi ? this.settingsStore.updatePennsieveApi(this.options.pennsieveApi) : null
|
307
315
|
this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null,
|
316
|
+
this.options.flatmapAPI2 ? this.settingsStore.updateFlatmapAPI2(this.options.flatmapAPI2) : null,
|
308
317
|
this.options.nlLinkPrefix ? this.settingsStore.updateNLLinkPrefix(this.options.nlLinkPrefix) : null
|
309
318
|
this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null
|
310
319
|
}
|
@@ -336,6 +345,7 @@ export default {
|
|
336
345
|
this.isReady = true;
|
337
346
|
this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
|
338
347
|
this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);
|
348
|
+
this.settingsStore.updateAnnotationSidebar(this.annotationSidebar);
|
339
349
|
}
|
340
350
|
}
|
341
351
|
|
@@ -15,6 +15,7 @@
|
|
15
15
|
:entry="entry"
|
16
16
|
ref="content"
|
17
17
|
@resource-selected="resourceSelected"
|
18
|
+
@species-changed="speciesChanged"
|
18
19
|
:visible="isIdVisible(entry.id)"
|
19
20
|
/>
|
20
21
|
</div>
|
@@ -56,6 +57,9 @@ export default {
|
|
56
57
|
resourceSelected: function(result) {
|
57
58
|
this.$emit("resource-selected", result);
|
58
59
|
},
|
60
|
+
speciesChanged: function (species) {
|
61
|
+
this.$emit("species-changed", species);
|
62
|
+
},
|
59
63
|
getClass: function(id) {
|
60
64
|
if (this.isIdVisible(id)) {
|
61
65
|
return this.getRefsName(id);
|
@@ -25,22 +25,30 @@
|
|
25
25
|
:class="['side-bar', { 'start-up': startUp }]"
|
26
26
|
:activeTabId="activeDockedId"
|
27
27
|
:open-at-start="startUp"
|
28
|
+
:annotationEntry="annotationEntry"
|
29
|
+
:createData="createData"
|
28
30
|
:connectivityInfo="connectivityInfo"
|
29
|
-
@
|
31
|
+
@tab-close="onSidebarTabClose"
|
30
32
|
@actionClick="actionClick"
|
31
33
|
@tabClicked="tabClicked"
|
32
34
|
@search-changed="searchChanged($event)"
|
33
35
|
@anatomy-in-datasets="updateMarkers($event)"
|
36
|
+
@annotation-submitted="onAnnotationSubmitted"
|
37
|
+
@confirm-create="onConfirmCreate"
|
38
|
+
@cancel-create="onCancelCreate"
|
39
|
+
@confirm-delete="onConfirmDelete"
|
34
40
|
@number-of-datasets-for-anatomies="updateScaffoldMarkers($event)"
|
35
41
|
@hover-changed="hoverChanged($event)"
|
36
42
|
@contextUpdate="contextUpdate($event)"
|
37
43
|
@datalink-clicked="datalinkClicked($event)"
|
38
44
|
@show-connectivity="onShowConnectivity"
|
45
|
+
@connectivity-component-click="onConnectivityComponentClick"
|
39
46
|
/>
|
40
47
|
<SplitDialog
|
41
48
|
:entries="entries"
|
42
49
|
ref="splitdialog"
|
43
50
|
@resource-selected="resourceSelected"
|
51
|
+
@species-changed="speciesChanged"
|
44
52
|
/>
|
45
53
|
</div>
|
46
54
|
</el-main>
|
@@ -49,6 +57,7 @@
|
|
49
57
|
|
50
58
|
<script>
|
51
59
|
/* eslint-disable no-alert, no-console */
|
60
|
+
import { provide, markRaw } from 'vue'
|
52
61
|
import Tagging from '../services/tagging.js';
|
53
62
|
import DialogToolbarContent from "./DialogToolbarContent.vue";
|
54
63
|
import EventBus from "./EventBus";
|
@@ -61,8 +70,10 @@ import {
|
|
61
70
|
initialDefaultState,
|
62
71
|
intersectArrays,
|
63
72
|
} from "./scripts/utilities.js";
|
73
|
+
import { AnnotationService } from '@abi-software/sparc-annotation'
|
64
74
|
import { mapStores } from 'pinia';
|
65
75
|
import { useEntriesStore } from '../stores/entries';
|
76
|
+
import { useMainStore } from '../stores/index'
|
66
77
|
import { useSettingsStore } from '../stores/settings';
|
67
78
|
import { useSplitFlowStore } from '../stores/splitFlow';
|
68
79
|
import {
|
@@ -86,6 +97,14 @@ export default {
|
|
86
97
|
SplitDialog,
|
87
98
|
SideBar,
|
88
99
|
},
|
100
|
+
setup() {
|
101
|
+
const mainStore = useMainStore();
|
102
|
+
provide('userApiKey', mainStore.userToken);
|
103
|
+
const settings = useSettingsStore();
|
104
|
+
let annotator = markRaw(new AnnotationService(`${settings.flatmapAPI}annotator`));
|
105
|
+
provide('$annotator', annotator)
|
106
|
+
return { annotator }
|
107
|
+
},
|
89
108
|
props: {
|
90
109
|
state: {
|
91
110
|
type: Object,
|
@@ -101,6 +120,12 @@ export default {
|
|
101
120
|
filterTriggered: false,
|
102
121
|
availableFacets: [],
|
103
122
|
connectivityInfo: null,
|
123
|
+
annotationEntry: {},
|
124
|
+
annotationCallback: undefined,
|
125
|
+
confirmCreateCallback: undefined,
|
126
|
+
cancelCreateCallback: undefined,
|
127
|
+
confirmDeleteCallback: undefined,
|
128
|
+
createData: {},
|
104
129
|
}
|
105
130
|
},
|
106
131
|
watch: {
|
@@ -255,7 +280,12 @@ export default {
|
|
255
280
|
const activeContents = splitdialog.getActiveContents();
|
256
281
|
//Push new suggestions into the pre-existing suggestions array
|
257
282
|
activeContents.forEach(content => content.searchSuggestions(payload.data.term, suggestions));
|
258
|
-
const
|
283
|
+
const parsed = [];
|
284
|
+
//Remove double quote as it is used as a speical character
|
285
|
+
suggestions.forEach(suggestion => {
|
286
|
+
parsed.push(suggestion.replaceAll("\"", ""));
|
287
|
+
});
|
288
|
+
const unique = new Set(parsed);
|
259
289
|
suggestions.length = 0;
|
260
290
|
for (const item of unique) {
|
261
291
|
suggestions.push({"value": "\"" + item +"\""});
|
@@ -276,6 +306,12 @@ export default {
|
|
276
306
|
offset: activeView === 'singlepanel' || activeView === '2horpanel'
|
277
307
|
});
|
278
308
|
},
|
309
|
+
onConnectivityComponentClick: function (data) {
|
310
|
+
EventBus.emit('connectivity-component-click', {
|
311
|
+
connectivityInfo: this.connectivityInfo,
|
312
|
+
data
|
313
|
+
});
|
314
|
+
},
|
279
315
|
hoverChanged: function (data) {
|
280
316
|
const hoverAnatomies = data && data.anatomy ? data.anatomy : [];
|
281
317
|
const hoverOrgans = data && data.organs ? data.organs : [];
|
@@ -451,6 +487,11 @@ export default {
|
|
451
487
|
this.$refs.splitdialog.sendSynchronisedEvent(result);
|
452
488
|
}
|
453
489
|
},
|
490
|
+
speciesChanged: function (species) {
|
491
|
+
if (this.$refs.sideBar) {
|
492
|
+
this.$refs.sideBar.close();
|
493
|
+
}
|
494
|
+
},
|
454
495
|
tabClicked: function ({id, type}) {
|
455
496
|
this.activeDockedId = id;
|
456
497
|
},
|
@@ -492,8 +533,29 @@ export default {
|
|
492
533
|
'dataset_id': datasetId || ''
|
493
534
|
});
|
494
535
|
},
|
495
|
-
|
496
|
-
|
536
|
+
onAnnotationSubmitted: function(annotation) {
|
537
|
+
if (this.annotationCallback) {
|
538
|
+
this.annotationCallback(annotation);
|
539
|
+
}
|
540
|
+
},
|
541
|
+
onConfirmCreate: function(payload) {
|
542
|
+
if (this.confirmCreateCallback) {
|
543
|
+
this.confirmCreateCallback(payload);
|
544
|
+
}
|
545
|
+
},
|
546
|
+
onCancelCreate: function() {
|
547
|
+
if (this.cancelCreateCallback) {
|
548
|
+
this.cancelCreateCallback();
|
549
|
+
}
|
550
|
+
},
|
551
|
+
onConfirmDelete: function(payload) {
|
552
|
+
if (this.confirmDeleteCallback) {
|
553
|
+
this.confirmDeleteCallback(payload);
|
554
|
+
}
|
555
|
+
},
|
556
|
+
onSidebarTabClose: function (id) {
|
557
|
+
if (id === 2) EventBus.emit('connectivity-info-close');
|
558
|
+
if (id === 3) EventBus.emit('annotation-close', { tabClose: true });
|
497
559
|
},
|
498
560
|
resetActivePathways: function () {
|
499
561
|
const containerEl = this.$el;
|
@@ -517,6 +579,30 @@ export default {
|
|
517
579
|
EventBus.on("PopoverActionClick", payload => {
|
518
580
|
this.actionClick(payload);
|
519
581
|
});
|
582
|
+
EventBus.on('annotation-open', payload => {
|
583
|
+
this.annotationEntry = payload.annotationEntry;
|
584
|
+
this.annotationCallback = markRaw(payload.commitCallback);
|
585
|
+
if (!payload.createData) {
|
586
|
+
this.createData = markRaw({});
|
587
|
+
} else {
|
588
|
+
this.createData = markRaw(payload.createData);
|
589
|
+
}
|
590
|
+
this.confirmCreateCallback = markRaw(payload.confirmCreate);
|
591
|
+
this.cancelCreateCallback = markRaw(payload.cancelCreate);
|
592
|
+
this.confirmDeleteCallback = markRaw(payload.confirmDelete);
|
593
|
+
if (this.$refs.sideBar) {
|
594
|
+
this.tabClicked({id: 3, type: 'annotation'});
|
595
|
+
this.$refs.sideBar.setDrawerOpen(true);
|
596
|
+
}
|
597
|
+
});
|
598
|
+
EventBus.on('annotation-close', payload => {
|
599
|
+
this.tabClicked({id: 1, type: 'search'});
|
600
|
+
this.annotationEntry = {};
|
601
|
+
this.createData = {};
|
602
|
+
if (this.$refs.sideBar) {
|
603
|
+
this.$refs.sideBar.setDrawerOpen(false);
|
604
|
+
}
|
605
|
+
});
|
520
606
|
EventBus.on('connectivity-info-open', payload => {
|
521
607
|
this.connectivityInfo = payload;
|
522
608
|
if (this.$refs.sideBar) {
|
@@ -529,6 +615,11 @@ export default {
|
|
529
615
|
this.connectivityInfo = null;
|
530
616
|
this.resetActivePathways();
|
531
617
|
});
|
618
|
+
EventBus.on('connectivity-graph-error', payload => {
|
619
|
+
if (this.$refs.sideBar) {
|
620
|
+
this.$refs.sideBar.updateConnectivityGraphError(payload.data);
|
621
|
+
}
|
622
|
+
});
|
532
623
|
EventBus.on("OpenNewMap", type => {
|
533
624
|
this.openNewMap(type);
|
534
625
|
});
|
@@ -559,6 +650,7 @@ export default {
|
|
559
650
|
PENNSIEVE_API_LOCATION: this.settingsStore.pennsieveApi,
|
560
651
|
NL_LINK_PREFIX: this.settingsStore.nlLinkPrefix,
|
561
652
|
ROOT_URL: this.settingsStore.rootUrl,
|
653
|
+
FLATMAPAPI_LOCATION: this.settingsStore.flatmapAPI2, // temporary
|
562
654
|
};
|
563
655
|
},
|
564
656
|
entries: function() {
|
@@ -14,6 +14,9 @@
|
|
14
14
|
@help-mode-last-item="onHelpModeLastItem"
|
15
15
|
@shown-tooltip="onTooltipShown"
|
16
16
|
@shown-map-tooltip="onMapTooltipShown"
|
17
|
+
@annotation-open="onAnnotationOpen"
|
18
|
+
@annotation-close="onAnnotationClose"
|
19
|
+
:annotationSidebar="annotationSidebar"
|
17
20
|
@connectivity-info-open="onConnectivityInfoOpen"
|
18
21
|
@connectivity-info-close="onConnectivityInfoClose"
|
19
22
|
:connectivityInfoSidebar="connectivityInfoSidebar"
|
@@ -48,6 +51,7 @@ import Tagging from '../../services/tagging.js';
|
|
48
51
|
import ContentMixin from "../../mixins/ContentMixin";
|
49
52
|
import EventBus from "../EventBus";
|
50
53
|
import {
|
54
|
+
capitalise,
|
51
55
|
availableSpecies,
|
52
56
|
getBodyScaffoldInfo,
|
53
57
|
transformObjToString
|
@@ -179,7 +183,8 @@ export default {
|
|
179
183
|
const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
|
180
184
|
if (term && flatmap.mapImp) {
|
181
185
|
const results = flatmap.mapImp.search(term);
|
182
|
-
results.__featureIds
|
186
|
+
const featureIds = results.__featureIds || results.featureIds;
|
187
|
+
featureIds.forEach(id => {
|
183
188
|
const annotation = flatmap.mapImp.annotation(id);
|
184
189
|
if (annotation && annotation.label)
|
185
190
|
suggestions.push(annotation.label);
|
@@ -412,6 +417,138 @@ export default {
|
|
412
417
|
const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
|
413
418
|
flatmap.changeViewingMode(modeName);
|
414
419
|
},
|
420
|
+
removeConnectivityTooltips: function () {
|
421
|
+
const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
|
422
|
+
if (flatmap?.$el) {
|
423
|
+
// close all tooltips on the current flatmap element
|
424
|
+
const tooltips = flatmap.$el.querySelectorAll('.flatmap-tooltip-popup');
|
425
|
+
tooltips.forEach(tooltip => tooltip.remove());
|
426
|
+
}
|
427
|
+
},
|
428
|
+
createTooltipForConnectivity: function (filteredConnectivityData, mapImp) {
|
429
|
+
// combine all labels to show together
|
430
|
+
// content type must be DOM object to use HTML
|
431
|
+
const labelsContainer = document.createElement('div');
|
432
|
+
labelsContainer.classList.add('flatmap-feature-label');
|
433
|
+
|
434
|
+
filteredConnectivityData.forEach((connectivity, i) => {
|
435
|
+
const { label } = connectivity;
|
436
|
+
labelsContainer.append(capitalise(label));
|
437
|
+
|
438
|
+
if ((i + 1) < filteredConnectivityData.length) {
|
439
|
+
const hr = document.createElement('hr');
|
440
|
+
labelsContainer.appendChild(hr);
|
441
|
+
}
|
442
|
+
});
|
443
|
+
|
444
|
+
mapImp.showPopup(
|
445
|
+
filteredConnectivityData[0].featureId,
|
446
|
+
labelsContainer,
|
447
|
+
{
|
448
|
+
className: 'custom-popup flatmap-tooltip-popup',
|
449
|
+
positionAtLastClick: false,
|
450
|
+
preserveSelection: true,
|
451
|
+
}
|
452
|
+
);
|
453
|
+
},
|
454
|
+
emitConnectivityGraphError: function (errorData) {
|
455
|
+
if (errorData.length) {
|
456
|
+
const errorDataToEmit = [...new Set(errorData)];
|
457
|
+
let errorMessage = '';
|
458
|
+
|
459
|
+
errorDataToEmit.forEach((connectivity, i) => {
|
460
|
+
const { label } = connectivity;
|
461
|
+
errorMessage += (i === 0) ? capitalise(label) : label;
|
462
|
+
|
463
|
+
if (errorDataToEmit.length > 1) {
|
464
|
+
if ((i + 2) === errorDataToEmit.length) {
|
465
|
+
errorMessage += ' and ';
|
466
|
+
} else if ((i + 1) < errorDataToEmit.length) {
|
467
|
+
errorMessage += ', ';
|
468
|
+
}
|
469
|
+
}
|
470
|
+
});
|
471
|
+
errorMessage += ' cannot be found on the map!';
|
472
|
+
EventBus.emit('connectivity-graph-error', {
|
473
|
+
data: errorMessage
|
474
|
+
});
|
475
|
+
}
|
476
|
+
},
|
477
|
+
showConnectivityTooltips: function (payload) {
|
478
|
+
const { connectivityInfo, data } = payload;
|
479
|
+
const featuresToHighlight = [];
|
480
|
+
const connectivityData = [];
|
481
|
+
const filteredConnectivityData = [];
|
482
|
+
const errorData = [];
|
483
|
+
|
484
|
+
if (!data.length) {
|
485
|
+
this.removeConnectivityTooltips();
|
486
|
+
} else {
|
487
|
+
if (typeof data[0] === 'object') {
|
488
|
+
// Connectivity list hover emits array of objects
|
489
|
+
data.forEach((item) => {
|
490
|
+
connectivityData.push({
|
491
|
+
id: item.id,
|
492
|
+
label: item.name,
|
493
|
+
});
|
494
|
+
})
|
495
|
+
} else {
|
496
|
+
// Connectivity graph node click emits an array of data,
|
497
|
+
// a combination of ids and labels.
|
498
|
+
// The first half is ids and the second half is labels.
|
499
|
+
for (let i = 0; i < data.length / 2; i++) {
|
500
|
+
connectivityData.push({
|
501
|
+
id: data[i],
|
502
|
+
label: data[i + data.length / 2]
|
503
|
+
});
|
504
|
+
}
|
505
|
+
}
|
506
|
+
}
|
507
|
+
|
508
|
+
// to keep the highlighted path on map
|
509
|
+
if (connectivityInfo && connectivityInfo.featureId) {
|
510
|
+
featuresToHighlight.push(...connectivityInfo.featureId);
|
511
|
+
}
|
512
|
+
|
513
|
+
// search the features on the map first
|
514
|
+
if (this.flatmapReady) {
|
515
|
+
const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
|
516
|
+
if (flatmap.mapImp) {
|
517
|
+
connectivityData.forEach((connectivity, i) => {
|
518
|
+
const {id, label} = connectivity;
|
519
|
+
const response = flatmap.mapImp.search(id);
|
520
|
+
|
521
|
+
if (response?.results.length) {
|
522
|
+
const featureId = response?.results[0].featureId;
|
523
|
+
|
524
|
+
filteredConnectivityData.push({
|
525
|
+
featureId,
|
526
|
+
id,
|
527
|
+
label,
|
528
|
+
});
|
529
|
+
featuresToHighlight.push(id);
|
530
|
+
} else {
|
531
|
+
errorData.push(connectivity);
|
532
|
+
}
|
533
|
+
});
|
534
|
+
|
535
|
+
if (filteredConnectivityData.length) {
|
536
|
+
// show tooltip of the first item
|
537
|
+
// with all labels
|
538
|
+
this.createTooltipForConnectivity(filteredConnectivityData, flatmap.mapImp);
|
539
|
+
} else {
|
540
|
+
errorData.push(...connectivityData);
|
541
|
+
this.removeConnectivityTooltips();
|
542
|
+
}
|
543
|
+
|
544
|
+
// Emit error message for connectivity graph
|
545
|
+
this.emitConnectivityGraphError(errorData);
|
546
|
+
|
547
|
+
// highlight all available features
|
548
|
+
flatmap.mapImp.zoomToFeatures(featuresToHighlight, { noZoomIn: true });
|
549
|
+
}
|
550
|
+
}
|
551
|
+
},
|
415
552
|
},
|
416
553
|
computed: {
|
417
554
|
facetSpecies() {
|
@@ -436,6 +573,13 @@ export default {
|
|
436
573
|
},
|
437
574
|
mounted: function () {
|
438
575
|
this.getFeaturedDatasets();
|
576
|
+
|
577
|
+
EventBus.on('annotation-close', (payload) => {
|
578
|
+
if (payload?.tabClose && this.$refs.multiflatmap.getCurrentFlatmap()) {
|
579
|
+
this.$refs.multiflatmap.getCurrentFlatmap().annotationEventCallback({}, { type: 'aborted' })
|
580
|
+
}
|
581
|
+
});
|
582
|
+
|
439
583
|
EventBus.on('show-connectivity', (payload) => {
|
440
584
|
const { featureIds, offset } = payload;
|
441
585
|
if (this.flatmapReady && this.$refs.multiflatmap) {
|
@@ -449,6 +593,10 @@ export default {
|
|
449
593
|
}
|
450
594
|
});
|
451
595
|
|
596
|
+
EventBus.on('connectivity-component-click', (payload) => {
|
597
|
+
this.showConnectivityTooltips(payload);
|
598
|
+
});
|
599
|
+
|
452
600
|
EventBus.on("markerUpdate", () => {
|
453
601
|
if (this.flatmapReady) {
|
454
602
|
this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
|
@@ -15,6 +15,9 @@
|
|
15
15
|
:helpMode="helpMode"
|
16
16
|
:helpModeActiveItem="helpModeActiveItem"
|
17
17
|
:helpModeDialog="useHelpModeDialog"
|
18
|
+
@annotation-open="onAnnotationOpen"
|
19
|
+
@annotation-close="onAnnotationClose"
|
20
|
+
:annotationSidebar="annotationSidebar"
|
18
21
|
@help-mode-last-item="onHelpModeLastItem"
|
19
22
|
@shown-tooltip="onTooltipShown"
|
20
23
|
@shown-map-tooltip="onMapTooltipShown"
|
@@ -69,9 +72,7 @@ export default {
|
|
69
72
|
* Perform a local search on this contentvuer
|
70
73
|
*/
|
71
74
|
search: function (term) {
|
72
|
-
|
73
|
-
const parsed = term.replace(/(^"|"$)/g, '');
|
74
|
-
return this.$refs.scaffold.search(parsed, true);
|
75
|
+
return this.$refs.scaffold.search(term, true);
|
75
76
|
},
|
76
77
|
searchSuggestions: function(term, suggestions){
|
77
78
|
if (term === "" || !this.$refs.scaffold) {
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { markRaw } from "vue";
|
1
2
|
import {
|
2
3
|
getNerveNames,
|
3
4
|
getParentsRegion,
|
@@ -45,6 +46,9 @@ export default {
|
|
45
46
|
connectivityInfoSidebar() {
|
46
47
|
return this.settingsStore.connectivityInfoSidebar;
|
47
48
|
},
|
49
|
+
annotationSidebar() {
|
50
|
+
return this.settingsStore.annotationSidebar;
|
51
|
+
},
|
48
52
|
},
|
49
53
|
mounted: function () {
|
50
54
|
EventBus.on("startHelp", () => {
|
@@ -486,6 +490,12 @@ export default {
|
|
486
490
|
}
|
487
491
|
}
|
488
492
|
},
|
493
|
+
onAnnotationOpen: function (payload) {
|
494
|
+
EventBus.emit('annotation-open', payload);
|
495
|
+
},
|
496
|
+
onAnnotationClose: function () {
|
497
|
+
EventBus.emit('annotation-close');
|
498
|
+
},
|
489
499
|
onConnectivityInfoOpen: function (connectivityInfoData) {
|
490
500
|
EventBus.emit('connectivity-info-open', connectivityInfoData);
|
491
501
|
},
|
@@ -511,7 +521,7 @@ export default {
|
|
511
521
|
scaffoldRef: null,
|
512
522
|
scaffoldLoaded: false,
|
513
523
|
isInHelp: false,
|
514
|
-
hoverDelay: undefined
|
524
|
+
hoverDelay: undefined,
|
515
525
|
};
|
516
526
|
},
|
517
527
|
created: function () {
|
package/src/stores/settings.js
CHANGED
@@ -13,6 +13,7 @@ export const useSettingsStore = defineStore('settings', {
|
|
13
13
|
pennsieveApi: undefined,
|
14
14
|
flatmapAPI: undefined,
|
15
15
|
nlLinkPrefix: undefined,
|
16
|
+
flatmapAPI2: "https://mapcore-demo.org/curation/flatmap/",
|
16
17
|
rootUrl: undefined,
|
17
18
|
facets: { species: [], gender: [], organ: [] },
|
18
19
|
numberOfDatasetsForFacets: [],
|
@@ -27,6 +28,7 @@ export const useSettingsStore = defineStore('settings', {
|
|
27
28
|
helpDelay: 0,
|
28
29
|
useHelpModeDialog: false,
|
29
30
|
connectivityInfoSidebar: true,
|
31
|
+
annotationSidebar: true,
|
30
32
|
}
|
31
33
|
},
|
32
34
|
getters: {
|
@@ -62,6 +64,9 @@ export const useSettingsStore = defineStore('settings', {
|
|
62
64
|
updateFlatmapAPI(flatmapAPI) {
|
63
65
|
this.flatmapAPI = flatmapAPI;
|
64
66
|
},
|
67
|
+
updateFlatmapAPI2(flatmapAPI2) {
|
68
|
+
this.flatmapAPI2 = flatmapAPI2;
|
69
|
+
},
|
65
70
|
updateNLLinkPrefix(nlLinkPrefix) {
|
66
71
|
this.nlLinkPrefix = nlLinkPrefix;
|
67
72
|
},
|
@@ -154,5 +159,8 @@ export const useSettingsStore = defineStore('settings', {
|
|
154
159
|
updateConnectivityInfoSidebar(connectivityInfoSidebar) {
|
155
160
|
this.connectivityInfoSidebar = connectivityInfoSidebar;
|
156
161
|
},
|
162
|
+
updateAnnotationSidebar(annotationSidebar) {
|
163
|
+
this.annotationSidebar = annotationSidebar;
|
164
|
+
},
|
157
165
|
}
|
158
166
|
});
|
package/src/stores/splitFlow.js
CHANGED
@@ -261,7 +261,6 @@ export const useSplitFlowStore = defineStore('splitFlow', {
|
|
261
261
|
customLayout = newState.customLayout;
|
262
262
|
} else {
|
263
263
|
customLayout = presetLayouts(this.activeView);
|
264
|
-
console.log(newState, customLayout)
|
265
264
|
if (newState.slotInfo) {
|
266
265
|
for (let i = 0; i < newState.slotInfo.length; i++) {
|
267
266
|
switch (newState.slotInfo[i].name) {
|
package/vite.bundle-build.js
CHANGED
@@ -12,12 +12,11 @@ export default defineConfig((configEnv) => {
|
|
12
12
|
fileName: "mapintegratedvuer",
|
13
13
|
},
|
14
14
|
rollupOptions: {
|
15
|
-
external: ["vue", "pinia"
|
15
|
+
external: ["vue", "pinia"],
|
16
16
|
output: {
|
17
17
|
globals: {
|
18
18
|
vue: "Vue",
|
19
19
|
pinia: "pinia",
|
20
|
-
"@abi-software/simulationvuer": "simulationvuer",
|
21
20
|
},
|
22
21
|
},
|
23
22
|
},
|