@abi-software/mapintegratedvuer 1.21.0 → 1.21.2

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-DrSaFEDd.js} +3 -3
  6. package/dist/{ContentMixin-Vn34n5t2.js → ContentMixin-Xg0PjBqG.js} +2 -2
  7. package/dist/{DynamicMarkerMixin-B087dVL_.js → DynamicMarkerMixin-D5Ruu_hd.js} +2 -2
  8. package/dist/{Flatmap-Bm7m_5m_.js → Flatmap-CxN8TbnS.js} +4 -4
  9. package/dist/{Iframe-BWbhTjCR.js → Iframe-CkgbLfJt.js} +4 -4
  10. package/dist/{MultiFlatmap-JziqSEwL.js → MultiFlatmap-CkejvAJe.js} +4 -4
  11. package/dist/{Plot-ChbPsDZX.js → Plot-BfwoipSl.js} +2 -2
  12. package/dist/{Scaffold-C6f7c7Ha.js → Scaffold-DCqsTKpg.js} +4 -4
  13. package/dist/{Simulation-DcJScRYo.js → Simulation-BOtU3kTT.js} +2 -2
  14. package/dist/{connectivities-UXTqf7_0.js → connectivities-DyeS8w0c.js} +126 -95
  15. package/dist/index.html +9 -6
  16. package/dist/mapintegratedvuer.js +5489 -5578
  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 +234 -249
  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 +98 -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 +90 -86
  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 +421 -237
  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 +59 -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 +17 -21
  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 +364 -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,8 +343,8 @@ 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
  }
@@ -341,189 +359,237 @@ export const useSplitFlowStore = defineStore('splitFlow', {
341
359
  if (payload) {
342
360
  let availableId = 0;
343
361
  if (payload.entries) {
344
- for (let i = 0; i < payload.entries.length &&
345
- availableId == 0; i++) {
362
+ for (let i = 0; i < payload.entries.length && availableId == 0; i++) {
346
363
  //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) {
364
+ if (
365
+ payload.entries[i].id !== payload.id &&
366
+ findKeyWithId(this.customLayout, payload.entries[i].id) === undefined
367
+ ) {
349
368
  availableId = payload.entries[i].id;
350
369
  }
351
370
  }
352
371
  }
353
372
  //Switch the view
354
- if (this.activeView !== "customise") {
373
+ if (this.activeView !== 'customise') {
355
374
  //closePaneWithStandardLayout
356
375
  const pView = this.activeView;
357
376
  switch (this.activeView) {
358
- case "2horpanel":
359
- case "2vertpanel":
360
- this.activeView = "singlepanel";
377
+ case '2horpanel':
378
+ case '2vertpanel':
379
+ this.activeView = 'singlepanel';
361
380
  break;
362
- case "3panel":
363
- this.activeView = "2vertpanel";
381
+ case '3panel':
382
+ this.activeView = '2vertpanel';
364
383
  break;
365
- case "4panel":
366
- this.activeView = "3panel";
384
+ case '4panel':
385
+ this.activeView = '3panel';
367
386
  break;
368
- case "5panel":
369
- this.activeView = "4panel";
387
+ case '5panel':
388
+ this.activeView = '4panel';
370
389
  break;
371
- case "6panelVertical":
372
- case "6panel":
373
- this.activeView = "5panel";
390
+ case '6panelVertical':
391
+ case '6panel':
392
+ this.activeView = '5panel';
374
393
  break;
375
394
  default:
376
395
  break;
377
396
  }
378
- const customLayout = newLayoutWithOrigInfo(
379
- this.customLayout, this.activeView);
397
+ const customLayout = newLayoutWithOrigInfo(this.customLayout, this.activeView);
380
398
  const key = findKeyWithId(this.customLayout, payload.id);
381
399
  // The following move the entry id to the appropriate slot
382
400
  // and remove the target id
383
401
  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;
402
+ case 'pane-1':
403
+ {
404
+ switch (pView) {
405
+ case '2horpanel':
406
+ case '2vertpanel':
407
+ {
408
+ customLayout['pane-1'].id = customLayout['pane-2'].id;
409
+ customLayout['pane-2'].id = availableId;
410
+ }
411
+ break;
412
+ case '3panel':
413
+ {
414
+ customLayout['pane-1'].id = customLayout['pane-2'].id;
415
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
416
+ customLayout['pane-3'].id = availableId;
417
+ }
418
+ break;
419
+ case '4panel':
420
+ {
421
+ customLayout['pane-1'].id = customLayout['pane-2'].id;
422
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
423
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
424
+ customLayout['pane-4'].id = availableId;
425
+ }
426
+ break;
427
+ case '5panel':
428
+ {
429
+ customLayout['pane-1'].id = customLayout['pane-2'].id;
430
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
431
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
432
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
433
+ customLayout['pane-5'].id = availableId;
434
+ }
435
+ break;
436
+ case '6panelVertical':
437
+ case '6panel':
438
+ {
439
+ customLayout['pane-1'].id = customLayout['pane-2'].id;
440
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
441
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
442
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
443
+ customLayout['pane-5'].id = customLayout['pane-6'].id;
444
+ customLayout['pane-6'].id = availableId;
445
+ }
446
+ break;
447
+ default:
448
+ break;
449
+ }
421
450
  }
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;
451
+ break;
452
+ case 'pane-2':
453
+ {
454
+ switch (pView) {
455
+ case '2horpanel':
456
+ case '2vertpanel':
457
+ {
458
+ customLayout['pane-2'].id = availableId;
459
+ }
460
+ break;
461
+ case '3panel':
462
+ {
463
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
464
+ customLayout['pane-3'].id = availableId;
465
+ }
466
+ break;
467
+ case '4panel':
468
+ {
469
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
470
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
471
+ customLayout['pane-4'].id = availableId;
472
+ }
473
+ break;
474
+ case '5panel':
475
+ {
476
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
477
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
478
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
479
+ customLayout['pane-5'].id = availableId;
480
+ }
481
+ break;
482
+ case '6panelVertical':
483
+ case '6panel':
484
+ {
485
+ customLayout['pane-2'].id = customLayout['pane-3'].id;
486
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
487
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
488
+ customLayout['pane-5'].id = customLayout['pane-6'].id;
489
+ customLayout['pane-6'].id = availableId;
490
+ }
491
+ break;
492
+ default:
493
+ break;
494
+ }
455
495
  }
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;
496
+ break;
497
+ case 'pane-3':
498
+ {
499
+ switch (pView) {
500
+ case '3panel':
501
+ {
502
+ customLayout['pane-3'].id = availableId;
503
+ }
504
+ break;
505
+ case '4panel':
506
+ {
507
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
508
+ customLayout['pane-4'].id = availableId;
509
+ }
510
+ break;
511
+ case '5panel':
512
+ {
513
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
514
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
515
+ customLayout['pane-5'].id = availableId;
516
+ }
517
+ break;
518
+ case '6panelVertical':
519
+ case '6panel':
520
+ {
521
+ customLayout['pane-3'].id = customLayout['pane-4'].id;
522
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
523
+ customLayout['pane-5'].id = customLayout['pane-6'].id;
524
+ customLayout['pane-6'].id = availableId;
525
+ }
526
+ break;
527
+ default:
528
+ break;
529
+ }
481
530
  }
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;
531
+ break;
532
+ case 'pane-4':
533
+ {
534
+ switch (pView) {
535
+ case '4panel':
536
+ {
537
+ customLayout['pane-4'].id = availableId;
538
+ }
539
+ break;
540
+ case '5panel':
541
+ {
542
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
543
+ customLayout['pane-5'].id = availableId;
544
+ }
545
+ break;
546
+ case '6panelVertical':
547
+ case '6panel':
548
+ {
549
+ customLayout['pane-4'].id = customLayout['pane-5'].id;
550
+ customLayout['pane-5'].id = customLayout['pane-6'].id;
551
+ customLayout['pane-6'].id = availableId;
552
+ }
553
+ break;
554
+ default:
555
+ break;
556
+ }
500
557
  }
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;
558
+ break;
559
+ case 'pane-5':
560
+ {
561
+ switch (pView) {
562
+ case '5panel':
563
+ {
564
+ customLayout['pane-5'].id = availableId;
565
+ }
566
+ break;
567
+ case '6panelVertical':
568
+ case '6panel':
569
+ {
570
+ customLayout['pane-5'].id = customLayout['pane-6'].id;
571
+ customLayout['pane-6'].id = availableId;
572
+ }
573
+ break;
574
+ default:
575
+ break;
576
+ }
514
577
  }
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;
578
+ break;
579
+ case 'pane-6':
580
+ {
581
+ switch (pView) {
582
+ case '6panelVertical':
583
+ case '6panel':
584
+ {
585
+ customLayout['pane-6'].id = availableId;
586
+ }
587
+ break;
588
+ default:
589
+ break;
590
+ }
525
591
  }
526
- } break;
592
+ break;
527
593
  default:
528
594
  break;
529
595
  }
@@ -536,5 +602,5 @@ export const useSplitFlowStore = defineStore('splitFlow', {
536
602
  updateSplitPanels() {
537
603
  EventBus.emit('species-layout-connectivity-update');
538
604
  },
539
- }
605
+ },
540
606
  });