@abi-software/mapintegratedvuer 1.21.1 → 1.22.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.
Files changed (68) hide show
  1. package/README.md +23 -5
  2. package/assets/location-icon.html +33 -1
  3. package/assets/styleguide.css +18 -18
  4. package/cypress.config.js +7 -9
  5. package/dist/{ConnectivityGraph-CZMROk9r.js → ConnectivityGraph-BBZ3Dgat.js} +3 -3
  6. package/dist/{ContentMixin-Vn34n5t2.js → ContentMixin-B-O_IwPg.js} +16 -18
  7. package/dist/{DynamicMarkerMixin-BS6t7w_i.js → DynamicMarkerMixin-B9iqtP_f.js} +1 -1
  8. package/dist/{Flatmap-BejxA0uz.js → Flatmap-BoEFI50b.js} +4 -4
  9. package/dist/{Iframe-BWbhTjCR.js → Iframe-Slj-LQTF.js} +4 -4
  10. package/dist/{MultiFlatmap-nlmsH-Ib.js → MultiFlatmap-l6aBn6x3.js} +17 -5
  11. package/dist/{Plot-ChbPsDZX.js → Plot-CIhEip5b.js} +2 -2
  12. package/dist/{Scaffold-C6f7c7Ha.js → Scaffold-D5ZGCDvt.js} +4 -4
  13. package/dist/{Simulation-DcJScRYo.js → Simulation-C5o5DXRb.js} +2 -2
  14. package/dist/{connectivities-UXTqf7_0.js → connectivities-Br3MpoAv.js} +154 -95
  15. package/dist/index.html +9 -6
  16. package/dist/mapintegratedvuer.js +5506 -5582
  17. package/dist/mapintegratedvuer.umd.cjs +196 -196
  18. package/dist/style.css +1 -1
  19. package/eslint.config.js +39 -15
  20. package/package.json +12 -6
  21. package/public/index.html +9 -6
  22. package/src/App.vue +224 -255
  23. package/src/assets/_variables.scss +12 -10
  24. package/src/assets/header-icon.scss +8 -9
  25. package/src/assets/mapicon-species-style.css +10 -8
  26. package/src/assets/styles.scss +1 -1
  27. package/src/components/ContentBar.vue +99 -106
  28. package/src/components/ContentVuer.vue +36 -39
  29. package/src/components/ContextCard.vue +238 -199
  30. package/src/components/ContextHelp.vue +22 -26
  31. package/src/components/CustomSplitter.vue +32 -43
  32. package/src/components/DatasetHeader.vue +37 -41
  33. package/src/components/DialogToolbarContent.vue +292 -256
  34. package/src/components/FlatmapContextCard.vue +52 -57
  35. package/src/components/MapContent.vue +111 -87
  36. package/src/components/ResizeSensor.vue +8 -13
  37. package/src/components/SearchControls.vue +26 -35
  38. package/src/components/SimulatedData.js +196 -219
  39. package/src/components/SplitDialog.vue +139 -129
  40. package/src/components/SplitFlow.vue +433 -239
  41. package/src/components/index.js +1 -3
  42. package/src/components/scripts/simulation_data.js +393 -397
  43. package/src/components/scripts/utilities.js +108 -78
  44. package/src/components/viewers/CellDLViewer.vue +9 -9
  45. package/src/components/viewers/ConnectivityGraph.vue +9 -12
  46. package/src/components/viewers/Flatmap.vue +23 -25
  47. package/src/components/viewers/Iframe.vue +8 -10
  48. package/src/components/viewers/MultiFlatmap.vue +73 -69
  49. package/src/components/viewers/Plot.vue +6 -7
  50. package/src/components/viewers/Scaffold.vue +73 -63
  51. package/src/components/viewers/Simulation.vue +10 -15
  52. package/src/main.js +16 -21
  53. package/src/mixins/ContentMixin.js +208 -178
  54. package/src/mixins/DynamicMarkerMixin.js +14 -18
  55. package/src/mixins/RetrieveContextCardMixin.js +35 -30
  56. package/src/mixins/S3Bucket.vue +10 -13
  57. package/src/services/knowledgeMapping.js +53 -53
  58. package/src/services/tagging.js +4 -4
  59. package/src/stores/connectivities.js +46 -8
  60. package/src/stores/entries.js +7 -9
  61. package/src/stores/index.js +7 -7
  62. package/src/stores/settings.js +23 -31
  63. package/src/stores/splitFlow.js +395 -298
  64. package/vite.bundle-build.js +24 -26
  65. package/vite.config.js +22 -21
  66. package/vite.static-build.js +4 -4
  67. package/vitest.workspace.js +1 -3
  68. package/vuese-generator.js +47 -55
package/src/stores/splitFlow.js CHANGED
@@ -1,93 +1,90 @@
1
1
  import { defineStore } from 'pinia';
2
- import {
3
- getAvailableTermsForSpecies,
4
- } from "../components/SimulatedData.js";
2
+ import { getAvailableTermsForSpecies } from '../components/SimulatedData.js';
5
3
  import EventBus from '../components/EventBus.js';
6
4
 
7
- /* eslint-disable no-alert, no-console */
8
5
  const presetLayouts = (view) => {
9
6
  switch (view) {
10
- case "2horpanel":
7
+ case '2horpanel':
11
8
  return {
12
- "split-1": {content: false, horizontal: true, children: ["pane-1", "pane-2"]},
13
- "pane-1": {content: true, id: 1},
14
- "pane-2": {content: true, id: 2},
9
+ 'split-1': { content: false, horizontal: true, children: ['pane-1', 'pane-2'] },
10
+ 'pane-1': { content: true, id: 1 },
11
+ 'pane-2': { content: true, id: 2 },
15
12
  };
16
- case "2vertpanel":
13
+ case '2vertpanel':
17
14
  return {
18
- "split-1": {content: false, horizontal: false, children: ["pane-1", "pane-2"]},
19
- "pane-1": {content: true, id: 1},
20
- "pane-2": {content: true, id: 2},
21
- }
22
- case "3panel":
15
+ 'split-1': { content: false, horizontal: false, children: ['pane-1', 'pane-2'] },
16
+ 'pane-1': { content: true, id: 1 },
17
+ 'pane-2': { content: true, id: 2 },
18
+ };
19
+ case '3panel':
23
20
  return {
24
- "split-1": {content: false, horizontal: false, children: ["pane-1", "split-2"]},
25
- "split-2": {content: false, horizontal: true, children: ["pane-2", "pane-3"]},
26
- "pane-1": {content: true, id: 1},
27
- "pane-2": {content: true, id: 2},
28
- "pane-3": {content: true, id: 3},
29
- }
30
- case "4panel":
21
+ 'split-1': { content: false, horizontal: false, children: ['pane-1', 'split-2'] },
22
+ 'split-2': { content: false, horizontal: true, children: ['pane-2', 'pane-3'] },
23
+ 'pane-1': { content: true, id: 1 },
24
+ 'pane-2': { content: true, id: 2 },
25
+ 'pane-3': { content: true, id: 3 },
26
+ };
27
+ case '4panel':
31
28
  return {
32
- "split-1": {content: false, horizontal: false, children: ["split-3", "split-2"]},
33
- "split-2": {content: false, horizontal: true, children: ["pane-2", "pane-3"]},
34
- "split-3": {content: false, horizontal: true, children: ["pane-1", "pane-4"]},
35
- "pane-1": {content: true, id: 1},
36
- "pane-2": {content: true, id: 2},
37
- "pane-3": {content: true, id: 3},
38
- "pane-4": {content: true, id: 4},
39
- }
40
- case "5panel":
29
+ 'split-1': { content: false, horizontal: false, children: ['split-3', 'split-2'] },
30
+ 'split-2': { content: false, horizontal: true, children: ['pane-2', 'pane-3'] },
31
+ 'split-3': { content: false, horizontal: true, children: ['pane-1', 'pane-4'] },
32
+ 'pane-1': { content: true, id: 1 },
33
+ 'pane-2': { content: true, id: 2 },
34
+ 'pane-3': { content: true, id: 3 },
35
+ 'pane-4': { content: true, id: 4 },
36
+ };
37
+ case '5panel':
41
38
  return {
42
- "split-1": {content: false, horizontal: true, children: ["split-3", "split-2"]},
43
- "split-2": {content: false, horizontal: false, children: ["pane-2", "pane-3"]},
44
- "split-3": {content: false, horizontal: false, children: ["pane-1","pane-4", "pane-5"]},
45
- "pane-1": {content: true, id: 1},
46
- "pane-2": {content: true, id: 2},
47
- "pane-3": {content: true, id: 3},
48
- "pane-4": {content: true, id: 4},
49
- "pane-5": {content: true, id: 5},
50
- }
51
- case "6panel":
39
+ 'split-1': { content: false, horizontal: true, children: ['split-3', 'split-2'] },
40
+ 'split-2': { content: false, horizontal: false, children: ['pane-2', 'pane-3'] },
41
+ 'split-3': { content: false, horizontal: false, children: ['pane-1', 'pane-4', 'pane-5'] },
42
+ 'pane-1': { content: true, id: 1 },
43
+ 'pane-2': { content: true, id: 2 },
44
+ 'pane-3': { content: true, id: 3 },
45
+ 'pane-4': { content: true, id: 4 },
46
+ 'pane-5': { content: true, id: 5 },
47
+ };
48
+ case '6panel':
52
49
  return {
53
- "split-1": {content: false, horizontal: true, children: ["split-3", "split-2"]},
54
- "split-2": {content: false, horizontal: false, children: ["pane-2", "pane-3", "pane-5"]},
55
- "split-3": {content: false, horizontal: false, children: ["pane-1","pane-4", "pane-6"]},
56
- "pane-1": {content: true, id: 1},
57
- "pane-2": {content: true, id: 2},
58
- "pane-3": {content: true, id: 3},
59
- "pane-4": {content: true, id: 4},
60
- "pane-5": {content: true, id: 5},
61
- "pane-6": {content: true, id: 6},
62
- }
63
- case "6panelVertical":
50
+ 'split-1': { content: false, horizontal: true, children: ['split-3', 'split-2'] },
51
+ 'split-2': { content: false, horizontal: false, children: ['pane-2', 'pane-3', 'pane-5'] },
52
+ 'split-3': { content: false, horizontal: false, children: ['pane-1', 'pane-4', 'pane-6'] },
53
+ 'pane-1': { content: true, id: 1 },
54
+ 'pane-2': { content: true, id: 2 },
55
+ 'pane-3': { content: true, id: 3 },
56
+ 'pane-4': { content: true, id: 4 },
57
+ 'pane-5': { content: true, id: 5 },
58
+ 'pane-6': { content: true, id: 6 },
59
+ };
60
+ case '6panelVertical':
64
61
  return {
65
- "split-1": {content: false, horizontal: false, children: ["split-3", "split-2"]},
66
- "split-2": {content: false, horizontal: true, children: ["pane-2", "pane-3", "pane-5"]},
67
- "split-3": {content: false, horizontal: true, children: ["pane-1","pane-4", "pane-6"]},
68
- "pane-1": {content: true, id: 1},
69
- "pane-2": {content: true, id: 2},
70
- "pane-3": {content: true, id: 3},
71
- "pane-4": {content: true, id: 4},
72
- "pane-5": {content: true, id: 5},
73
- "pane-6": {content: true, id: 6},
74
- }
75
- case "singlepanel":
62
+ 'split-1': { content: false, horizontal: false, children: ['split-3', 'split-2'] },
63
+ 'split-2': { content: false, horizontal: true, children: ['pane-2', 'pane-3', 'pane-5'] },
64
+ 'split-3': { content: false, horizontal: true, children: ['pane-1', 'pane-4', 'pane-6'] },
65
+ 'pane-1': { content: true, id: 1 },
66
+ 'pane-2': { content: true, id: 2 },
67
+ 'pane-3': { content: true, id: 3 },
68
+ 'pane-4': { content: true, id: 4 },
69
+ 'pane-5': { content: true, id: 5 },
70
+ 'pane-6': { content: true, id: 6 },
71
+ };
72
+ case 'singlepanel':
76
73
  default:
77
74
  return {
78
- "split-1": {content: false, horizontal: false, children: ["pane-1"]},
79
- "pane-1": {content: true, id: 1},
80
- }
75
+ 'split-1': { content: false, horizontal: false, children: ['pane-1'] },
76
+ 'pane-1': { content: true, id: 1 },
77
+ };
81
78
  }
82
- }
79
+ };
83
80
 
84
81
  //A method to assign unused entry to pane with duplicated id
85
82
  const autoAssignEntryIdsToPane = (entries, layout) => {
86
- const assignedIds = [];
83
+ const assignedIds = [];
87
84
  const invalidIdKeys = [];
88
85
  for (const [key, value] of Object.entries(layout)) {
89
86
  if (value.content) {
90
- if ((1 > value.id) || assignedIds.includes(value.id)) {
87
+ if (1 > value.id || assignedIds.includes(value.id)) {
91
88
  //id has got an assigned pane or pane contains an invalid id,
92
89
  //cache it and find one later
93
90
  invalidIdKeys.push(key);
@@ -100,15 +97,14 @@ const autoAssignEntryIdsToPane = (entries, layout) => {
100
97
  invalidIdKeys.forEach((key) => {
101
98
  let done = false;
102
99
  for (let i = 0; i < entries.length && !done; i++) {
103
- if (!(assignedIds.includes(entries[i].id))) {
100
+ if (!assignedIds.includes(entries[i].id)) {
104
101
  layout[key].id = entries[i].id;
105
102
  assignedIds.push(entries.id);
106
103
  done = true;
107
104
  }
108
105
  }
109
106
  });
110
-
111
- }
107
+ };
112
108
 
113
109
  const extractPaneInfo = (layout) => {
114
110
  const panes = {};
@@ -118,7 +114,7 @@ const extractPaneInfo = (layout) => {
118
114
  }
119
115
  }
120
116
  return panes;
121
- }
117
+ };
122
118
 
123
119
  const newLayoutWithOrigInfo = (original, activeView) => {
124
120
  const panes = extractPaneInfo(original);
@@ -127,30 +123,30 @@ const newLayoutWithOrigInfo = (original, activeView) => {
127
123
  customLayout[key] = value;
128
124
  }
129
125
  return customLayout;
130
- }
126
+ };
131
127
 
132
128
  const findKeyWithId = (layout, id) => {
133
- return Object.keys(layout).find(key => layout[key]["id"] === id);
134
- }
129
+ return Object.keys(layout).find((key) => layout[key]['id'] === id);
130
+ };
135
131
 
136
132
  const getOriginalState = () => {
137
133
  return {
138
- activeView: "singlepanel",
134
+ activeView: 'singlepanel',
139
135
  idNamePair: {},
140
136
  viewIcons: [
141
- { icon: "singlepanel", name: "Single view", min: 1 },
142
- { icon: "2horpanel", name: "Horizontal split", min: 2 },
143
- { icon: "2vertpanel", name: "Vertical split", min: 2 },
144
- { icon: "3panel", name: "Three panes", min: 3 },
145
- { icon: "4panel", name: "Four panes", min: 4 },
146
- { icon: "5panel", name: "Five panes", min: 5 },
147
- { icon: "6panel", name: "Six (horizontal)", min: 6 },
148
- { icon: "6panelVertical", name: "Six (vertical)", min: 6 },
137
+ { icon: 'singlepanel', name: 'Single view', min: 1 },
138
+ { icon: '2horpanel', name: 'Horizontal split', min: 2 },
139
+ { icon: '2vertpanel', name: 'Vertical split', min: 2 },
140
+ { icon: '3panel', name: 'Three panes', min: 3 },
141
+ { icon: '4panel', name: 'Four panes', min: 4 },
142
+ { icon: '5panel', name: 'Five panes', min: 5 },
143
+ { icon: '6panel', name: 'Six (horizontal)', min: 6 },
144
+ { icon: '6panelVertical', name: 'Six (vertical)', min: 6 },
149
145
  //{ icon: "customise", name: "Customise", min: 2 }
150
146
  ],
151
147
  customLayout: {
152
- "split-1": {content: false, horizontal: false, children: ["pane-1"]},
153
- "pane-1": {content: true, id: 1},
148
+ 'split-1': { content: false, horizontal: false, children: ['pane-1'] },
149
+ 'pane-1': { content: true, id: 1 },
154
150
  /*
155
151
  Example layout
156
152
 
@@ -161,9 +157,9 @@ const getOriginalState = () => {
161
157
  "pane-3": {content: true, id: 3},
162
158
  */
163
159
  },
164
- splitters: { "first": 50, "second": 50, "third": 50 },
160
+ splitters: { first: 50, second: 50, third: 50 },
165
161
  };
166
- }
162
+ };
167
163
 
168
164
  export const useSplitFlowStore = defineStore('splitFlow', {
169
165
  state: () => {
@@ -172,33 +168,45 @@ export const useSplitFlowStore = defineStore('splitFlow', {
172
168
  getters: {
173
169
  getActivePaneIds: (state) => () => {
174
170
  const availablePaneIDs = [];
175
- let activePaneIDs = undefined;
171
+ let activePaneIDs;
176
172
  for (const key in state.customLayout) {
177
173
  if (state.customLayout[key].id) {
178
174
  availablePaneIDs.push(state.customLayout[key].id);
179
175
  }
180
176
  }
181
177
  switch (state.activeView) {
182
- case 'singlepanel': {
183
- activePaneIDs = availablePaneIDs.slice(0, 1);
184
- } break;
178
+ case 'singlepanel':
179
+ {
180
+ activePaneIDs = availablePaneIDs.slice(0, 1);
181
+ }
182
+ break;
185
183
  case '2horpanel':
186
- case '2vertpanel': {
187
- activePaneIDs = availablePaneIDs.slice(0, 2);
188
- } break;
189
- case '3panel': {
190
- activePaneIDs = availablePaneIDs.slice(0, 3);
191
- } break;
192
- case '4panel': {
193
- activePaneIDs = availablePaneIDs.slice(0, 4);
194
- } break;
195
- case '5panel': {
196
- activePaneIDs = availablePaneIDs.slice(0, 5);
197
- } break;
184
+ case '2vertpanel':
185
+ {
186
+ activePaneIDs = availablePaneIDs.slice(0, 2);
187
+ }
188
+ break;
189
+ case '3panel':
190
+ {
191
+ activePaneIDs = availablePaneIDs.slice(0, 3);
192
+ }
193
+ break;
194
+ case '4panel':
195
+ {
196
+ activePaneIDs = availablePaneIDs.slice(0, 4);
197
+ }
198
+ break;
199
+ case '5panel':
200
+ {
201
+ activePaneIDs = availablePaneIDs.slice(0, 5);
202
+ }
203
+ break;
198
204
  case '6panelVertical':
199
- case '6panel': {
200
- activePaneIDs = availablePaneIDs.slice(0, 6);
201
- } break;
205
+ case '6panel':
206
+ {
207
+ activePaneIDs = availablePaneIDs.slice(0, 6);
208
+ }
209
+ break;
202
210
  default:
203
211
  activePaneIDs = [];
204
212
  break;
@@ -217,7 +225,7 @@ export const useSplitFlowStore = defineStore('splitFlow', {
217
225
  },
218
226
  isPaneActive: (state) => (panelName) => {
219
227
  const layout = presetLayouts(state.activeView);
220
- return (Object.keys(layout).includes(panelName));
228
+ return Object.keys(layout).includes(panelName);
221
229
  },
222
230
  },
223
231
  actions: {
@@ -246,10 +254,10 @@ export const useSplitFlowStore = defineStore('splitFlow', {
246
254
  fetch(`${apiLocation}get-organ-curies`, {
247
255
  signal,
248
256
  })
249
- .then(response => response.json())
250
- .then(data => {
257
+ .then((response) => response.json())
258
+ .then((data) => {
251
259
  this._controller = undefined;
252
- data.uberon.array.forEach(pair => {
260
+ data.uberon.array.forEach((pair) => {
253
261
  this.idNamePair[pair.id.toUpperCase()] =
254
262
  pair.name.charAt(0).toUpperCase() + pair.name.slice(1);
255
263
  });
@@ -259,8 +267,7 @@ export const useSplitFlowStore = defineStore('splitFlow', {
259
267
  },
260
268
  updateActiveView(payload, emitSpeciesChanged = true) {
261
269
  this.activeView = payload.view;
262
- const customLayout = newLayoutWithOrigInfo(
263
- this.customLayout, this.activeView);
270
+ const customLayout = newLayoutWithOrigInfo(this.customLayout, this.activeView);
264
271
  autoAssignEntryIdsToPane(payload.entries, customLayout);
265
272
  for (const [key, value] of Object.entries(customLayout)) {
266
273
  this.customLayout[key] = value;
@@ -270,12 +277,11 @@ export const useSplitFlowStore = defineStore('splitFlow', {
270
277
  }
271
278
  },
272
279
  setSplitter(payload) {
273
- if (this.splitters[payload.name])
274
- this.splitters[payload.name] = payload.value;
280
+ if (this.splitters[payload.name]) this.splitters[payload.name] = payload.value;
275
281
  },
276
282
  setState(newState) {
277
283
  if (newState) {
278
- let customLayout = undefined;
284
+ let customLayout;
279
285
  if (newState.activeView) {
280
286
  this.activeView = newState.activeView;
281
287
  }
@@ -286,29 +292,41 @@ export const useSplitFlowStore = defineStore('splitFlow', {
286
292
  if (newState.slotInfo) {
287
293
  for (let i = 0; i < newState.slotInfo.length; i++) {
288
294
  switch (newState.slotInfo[i].name) {
289
- case "first": {
290
- customLayout["pane-1"].id = newState.slotInfo[i].id;
291
- } break;
292
- case "second": {
293
- if("pane-2" in customLayout)
294
- customLayout["pane-2"].id = newState.slotInfo[i].id;
295
- } break;
296
- case "thrid": {
297
- if("pane-3" in customLayout)
298
- customLayout["pane-3"].id = newState.slotInfo[i].id;
299
- } break;
300
- case "fourth": {
301
- if("pane-4" in customLayout)
302
- customLayout["pane-4"].id = newState.slotInfo[i].id;
303
- } break;
304
- case "fifth": {
305
- if("pane-5" in customLayout)
306
- customLayout["pane-5"].id = newState.slotInfo[i].id;
307
- } break;
308
- case "sixth": {
309
- if("pane-6" in customLayout)
310
- customLayout["pane-6"].id = newState.slotInfo[i].id;
311
- } break;
295
+ case 'first':
296
+ {
297
+ customLayout['pane-1'].id = newState.slotInfo[i].id;
298
+ }
299
+ break;
300
+ case 'second':
301
+ {
302
+ if ('pane-2' in customLayout)
303
+ customLayout['pane-2'].id = newState.slotInfo[i].id;
304
+ }
305
+ break;
306
+ case 'thrid':
307
+ {
308
+ if ('pane-3' in customLayout)
309
+ customLayout['pane-3'].id = newState.slotInfo[i].id;
310
+ }
311
+ break;
312
+ case 'fourth':
313
+ {
314
+ if ('pane-4' in customLayout)
315
+ customLayout['pane-4'].id = newState.slotInfo[i].id;
316
+ }
317
+ break;
318
+ case 'fifth':
319
+ {
320
+ if ('pane-5' in customLayout)
321
+ customLayout['pane-5'].id = newState.slotInfo[i].id;
322
+ }
323
+ break;
324
+ case 'sixth':
325
+ {
326
+ if ('pane-6' in customLayout)
327
+ customLayout['pane-6'].id = newState.slotInfo[i].id;
328
+ }
329
+ break;
312
330
  default:
313
331
  break;
314
332
  }
@@ -325,12 +343,43 @@ export const useSplitFlowStore = defineStore('splitFlow', {
325
343
  },
326
344
  setIdToPrimaryPane(id) {
327
345
  const currentKey = findKeyWithId(this.customLayout, id);
328
- const firstPaneId = this.customLayout["pane-1"].id;
329
- this.customLayout["pane-1"].id = id;
346
+ const firstPaneId = this.customLayout['pane-1'].id;
347
+ this.customLayout['pane-1'].id = id;
330
348
  if (currentKey) {
331
349
  this.customLayout[currentKey].id = firstPaneId;
332
350
  }
333
351
  },
352
+ /**
353
+ * Place a newly created entry alongside the source entry.
354
+ * Single view: switch to vertical split with the new entry on the right.
355
+ * Multiple views: replace the other pane (pane-2 if the source is in
356
+ * pane-1, otherwise pane-1). The replaced entry remains in the entries list.
357
+ * Falls back to the primary pane if the source is not currently visible.
358
+ */
359
+ placeEntryInSplitView(payload) {
360
+ const { id, sourceId, entries } = payload;
361
+ if (this.activeView === 'singlepanel') {
362
+ const sourceKey = findKeyWithId(this.customLayout, sourceId);
363
+ if (sourceKey !== 'pane-1') {
364
+ this.setIdToPrimaryPane(id);
365
+ return;
366
+ }
367
+ this.updateActiveView({ view: '2vertpanel', entries }, false);
368
+ this.assignOrSwapPaneWithIds({ source: id, target: this.customLayout['pane-2'].id }, false);
369
+ } else {
370
+ const sourceKey = findKeyWithId(this.customLayout, sourceId);
371
+ if (!sourceKey || !this.isPaneActive(sourceKey)) {
372
+ this.setIdToPrimaryPane(id);
373
+ return;
374
+ }
375
+ const targetKey = sourceKey === 'pane-1' ? 'pane-2' : 'pane-1';
376
+ this.assignOrSwapPaneWithIds(
377
+ { source: id, target: this.customLayout[targetKey].id },
378
+ false,
379
+ );
380
+ }
381
+ this.updateSplitPanels();
382
+ },
334
383
  reset() {
335
384
  const original = getOriginalState();
336
385
  this.activeView = original.activeView;
@@ -341,189 +390,237 @@ export const useSplitFlowStore = defineStore('splitFlow', {
341
390
  if (payload) {
342
391
  let availableId = 0;
343
392
  if (payload.entries) {
344
- for (let i = 0; i < payload.entries.length &&
345
- availableId == 0; i++) {
393
+ for (let i = 0; i < payload.entries.length && availableId == 0; i++) {
346
394
  //Find the first entry not currently in use
347
- if ((payload.entries[i].id !== payload.id) &&
348
- findKeyWithId(this.customLayout, payload.entries[i].id) === undefined) {
395
+ if (
396
+ payload.entries[i].id !== payload.id &&
397
+ findKeyWithId(this.customLayout, payload.entries[i].id) === undefined
398
+ ) {
349
399
  availableId = payload.entries[i].id;
350
400
  }
351
401
  }
352
402
  }
353
403
  //Switch the view
354
- if (this.activeView !== "customise") {
404
+ if (this.activeView !== 'customise') {
355
405
  //closePaneWithStandardLayout
356
406
  const pView = this.activeView;
357
407
  switch (this.activeView) {
358
- case "2horpanel":
359
- case "2vertpanel":
360
- this.activeView = "singlepanel";
408
+ case '2horpanel':
409
+ case '2vertpanel':
410
+ this.activeView = 'singlepanel';
361
411
  break;
362
- case "3panel":
363
- this.activeView = "2vertpanel";
412
+ case '3panel':
413
+ this.activeView = '2vertpanel';
364
414
  break;
365
- case "4panel":
366
- this.activeView = "3panel";
415
+ case '4panel':
416
+ this.activeView = '3panel';
367
417
  break;
368
- case "5panel":
369
- this.activeView = "4panel";
418
+ case '5panel':
419
+ this.activeView = '4panel';
370
420
  break;
371
- case "6panelVertical":
372
- case "6panel":
373
- this.activeView = "5panel";
421
+ case '6panelVertical':
422
+ case '6panel':
423
+ this.activeView = '5panel';
374
424
  break;
375
425
  default:
376
426
  break;
377
427
  }
378
- const customLayout = newLayoutWithOrigInfo(
379
- this.customLayout, this.activeView);
428
+ const customLayout = newLayoutWithOrigInfo(this.customLayout, this.activeView);
380
429
  const key = findKeyWithId(this.customLayout, payload.id);
381
430
  // The following move the entry id to the appropriate slot
382
431
  // and remove the target id
383
432
  switch (key) {
384
- case "pane-1": {
385
- switch (pView) {
386
- case "2horpanel":
387
- case "2vertpanel": {
388
- customLayout["pane-1"].id = customLayout["pane-2"].id;
389
- customLayout["pane-2"].id = availableId;
390
- } break;
391
- case "3panel": {
392
- customLayout["pane-1"].id = customLayout["pane-2"].id;
393
- customLayout["pane-2"].id = customLayout["pane-3"].id;
394
- customLayout["pane-3"].id = availableId;
395
- } break;
396
- case "4panel": {
397
- customLayout["pane-1"].id = customLayout["pane-2"].id;
398
- customLayout["pane-2"].id = customLayout["pane-3"].id;
399
- customLayout["pane-3"].id = customLayout["pane-4"].id;
400
- customLayout["pane-4"].id = availableId;
401
- } break;
402
- case "5panel": {
403
- customLayout["pane-1"].id = customLayout["pane-2"].id;
404
- customLayout["pane-2"].id = customLayout["pane-3"].id;
405
- customLayout["pane-3"].id = customLayout["pane-4"].id;
406
- customLayout["pane-4"].id = customLayout["pane-5"].id;
407
- customLayout["pane-5"].id = availableId;
408
- } break;
409
- case "6panelVertical":
410
- case "6panel":
411
- {
412
- customLayout["pane-1"].id = customLayout["pane-2"].id;
413
- customLayout["pane-2"].id = customLayout["pane-3"].id;
414
- customLayout["pane-3"].id = customLayout["pane-4"].id;
415
- customLayout["pane-4"].id = customLayout["pane-5"].id;
416
- customLayout["pane-5"].id = customLayout["pane-6"].id;
417
- customLayout["pane-6"].id = availableId;
418
- } break;
419
- default:
420
- break;
433
+ case 'pane-1':
434
+ {
435
+ switch (pView) {
436
+ case '2horpanel':
437
+ case '2vertpanel':
438
+ {
439
+ customLayout['pane-1'].id = customLayout['pane-2'].id;
440
+ customLayout['pane-2'].id = availableId;
441
+ }
442
+ break;
443
+ case '3panel':
444
+ {
445
+ customLayout['pane-1'].id = customLayout['pane-2'].id;
446
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
447
+ customLayout['pane-3'].id = availableId;
448
+ }
449
+ break;
450
+ case '4panel':
451
+ {
452
+ customLayout['pane-1'].id = customLayout['pane-2'].id;
453
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
454
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
455
+ customLayout['pane-4'].id = availableId;
456
+ }
457
+ break;
458
+ case '5panel':
459
+ {
460
+ customLayout['pane-1'].id = customLayout['pane-2'].id;
461
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
462
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
463
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
464
+ customLayout['pane-5'].id = availableId;
465
+ }
466
+ break;
467
+ case '6panelVertical':
468
+ case '6panel':
469
+ {
470
+ customLayout['pane-1'].id = customLayout['pane-2'].id;
471
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
472
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
473
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
474
+ customLayout['pane-5'].id = customLayout['pane-6'].id;
475
+ customLayout['pane-6'].id = availableId;
476
+ }
477
+ break;
478
+ default:
479
+ break;
480
+ }
421
481
  }
422
- } break;
423
- case "pane-2": {
424
- switch (pView) {
425
- case "2horpanel":
426
- case "2vertpanel": {
427
- customLayout["pane-2"].id = availableId;
428
- } break;
429
- case "3panel": {
430
- customLayout["pane-2"].id = customLayout["pane-3"].id;
431
- customLayout["pane-3"].id = availableId;
432
- } break;
433
- case "4panel": {
434
- customLayout["pane-2"].id = customLayout["pane-3"].id;
435
- customLayout["pane-3"].id = customLayout["pane-4"].id;
436
- customLayout["pane-4"].id = availableId;
437
- } break;
438
- case "5panel": {
439
- customLayout["pane-2"].id = customLayout["pane-3"].id;
440
- customLayout["pane-3"].id = customLayout["pane-4"].id;
441
- customLayout["pane-4"].id = customLayout["pane-5"].id;
442
- customLayout["pane-5"].id = availableId;
443
- } break;
444
- case "6panelVertical":
445
- case "6panel":
446
- {
447
- customLayout["pane-2"].id = customLayout["pane-3"].id;
448
- customLayout["pane-3"].id = customLayout["pane-4"].id;
449
- customLayout["pane-4"].id = customLayout["pane-5"].id;
450
- customLayout["pane-5"].id = customLayout["pane-6"].id;
451
- customLayout["pane-6"].id = availableId;
452
- } break;
453
- default:
454
- break;
482
+ break;
483
+ case 'pane-2':
484
+ {
485
+ switch (pView) {
486
+ case '2horpanel':
487
+ case '2vertpanel':
488
+ {
489
+ customLayout['pane-2'].id = availableId;
490
+ }
491
+ break;
492
+ case '3panel':
493
+ {
494
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
495
+ customLayout['pane-3'].id = availableId;
496
+ }
497
+ break;
498
+ case '4panel':
499
+ {
500
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
501
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
502
+ customLayout['pane-4'].id = availableId;
503
+ }
504
+ break;
505
+ case '5panel':
506
+ {
507
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
508
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
509
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
510
+ customLayout['pane-5'].id = availableId;
511
+ }
512
+ break;
513
+ case '6panelVertical':
514
+ case '6panel':
515
+ {
516
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
517
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
518
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
519
+ customLayout['pane-5'].id = customLayout['pane-6'].id;
520
+ customLayout['pane-6'].id = availableId;
521
+ }
522
+ break;
523
+ default:
524
+ break;
525
+ }
455
526
  }
456
- } break;
457
- case "pane-3": {
458
- switch (pView) {
459
- case "3panel": {
460
- customLayout["pane-3"].id = availableId;
461
- } break;
462
- case "4panel": {
463
- customLayout["pane-3"].id = customLayout["pane-4"].id;
464
- customLayout["pane-4"].id = availableId;
465
- } break;
466
- case "5panel": {
467
- customLayout["pane-3"].id = customLayout["pane-4"].id;
468
- customLayout["pane-4"].id = customLayout["pane-5"].id;
469
- customLayout["pane-5"].id = availableId;
470
- } break;
471
- case "6panelVertical":
472
- case "6panel":
473
- {
474
- customLayout["pane-3"].id = customLayout["pane-4"].id;
475
- customLayout["pane-4"].id = customLayout["pane-5"].id;
476
- customLayout["pane-5"].id = customLayout["pane-6"].id;
477
- customLayout["pane-6"].id = availableId;
478
- } break;
479
- default:
480
- break;
527
+ break;
528
+ case 'pane-3':
529
+ {
530
+ switch (pView) {
531
+ case '3panel':
532
+ {
533
+ customLayout['pane-3'].id = availableId;
534
+ }
535
+ break;
536
+ case '4panel':
537
+ {
538
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
539
+ customLayout['pane-4'].id = availableId;
540
+ }
541
+ break;
542
+ case '5panel':
543
+ {
544
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
545
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
546
+ customLayout['pane-5'].id = availableId;
547
+ }
548
+ break;
549
+ case '6panelVertical':
550
+ case '6panel':
551
+ {
552
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
553
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
554
+ customLayout['pane-5'].id = customLayout['pane-6'].id;
555
+ customLayout['pane-6'].id = availableId;
556
+ }
557
+ break;
558
+ default:
559
+ break;
560
+ }
481
561
  }
482
- } break;
483
- case "pane-4": {
484
- switch (pView) {
485
- case "4panel": {
486
- customLayout["pane-4"].id = availableId;
487
- } break;
488
- case "5panel": {
489
- customLayout["pane-4"].id = customLayout["pane-5"].id;
490
- customLayout["pane-5"].id = availableId;
491
- } break;
492
- case "6panelVertical":
493
- case "6panel": {
494
- customLayout["pane-4"].id = customLayout["pane-5"].id;
495
- customLayout["pane-5"].id = customLayout["pane-6"].id;
496
- customLayout["pane-6"].id = availableId;
497
- } break;
498
- default:
499
- break;
562
+ break;
563
+ case 'pane-4':
564
+ {
565
+ switch (pView) {
566
+ case '4panel':
567
+ {
568
+ customLayout['pane-4'].id = availableId;
569
+ }
570
+ break;
571
+ case '5panel':
572
+ {
573
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
574
+ customLayout['pane-5'].id = availableId;
575
+ }
576
+ break;
577
+ case '6panelVertical':
578
+ case '6panel':
579
+ {
580
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
581
+ customLayout['pane-5'].id = customLayout['pane-6'].id;
582
+ customLayout['pane-6'].id = availableId;
583
+ }
584
+ break;
585
+ default:
586
+ break;
587
+ }
500
588
  }
501
- } break;
502
- case "pane-5": {
503
- switch (pView) {
504
- case "5panel": {
505
- customLayout["pane-5"].id = availableId;
506
- } break;
507
- case "6panelVertical":
508
- case "6panel": {
509
- customLayout["pane-5"].id = customLayout["pane-6"].id;
510
- customLayout["pane-6"].id = availableId;
511
- } break;
512
- default:
513
- break;
589
+ break;
590
+ case 'pane-5':
591
+ {
592
+ switch (pView) {
593
+ case '5panel':
594
+ {
595
+ customLayout['pane-5'].id = availableId;
596
+ }
597
+ break;
598
+ case '6panelVertical':
599
+ case '6panel':
600
+ {
601
+ customLayout['pane-5'].id = customLayout['pane-6'].id;
602
+ customLayout['pane-6'].id = availableId;
603
+ }
604
+ break;
605
+ default:
606
+ break;
607
+ }
514
608
  }
515
- } break;
516
- case "pane-6" : {
517
- switch (pView) {
518
- case "6panelVertical":
519
- case "6panel":
520
- {
521
- customLayout["pane-6"].id = availableId;
522
- } break;
523
- default:
524
- break;
609
+ break;
610
+ case 'pane-6':
611
+ {
612
+ switch (pView) {
613
+ case '6panelVertical':
614
+ case '6panel':
615
+ {
616
+ customLayout['pane-6'].id = availableId;
617
+ }
618
+ break;
619
+ default:
620
+ break;
621
+ }
525
622
  }
526
- } break;
623
+ break;
527
624
  default:
528
625
  break;
529
626
  }
@@ -536,5 +633,5 @@ export const useSplitFlowStore = defineStore('splitFlow', {
536
633
  updateSplitPanels() {
537
634
  EventBus.emit('species-layout-connectivity-update');
538
635
  },
539
- }
636
+ },
540
637
  });