@abi-software/flatmapvuer 1.17.0 → 1.17.1-demo.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/eslint.config.js CHANGED
@@ -1,23 +1,57 @@
1
- import js from "@eslint/js";
2
- import vue from "eslint-plugin-vue";
3
- import globals from "globals";
1
+ import js from '@eslint/js';
2
+ import { includeIgnoreFile } from 'eslint/config';
3
+ import prettier from 'eslint-plugin-prettier';
4
+ import prettierConfig from 'eslint-config-prettier';
5
+ import cypress from 'eslint-plugin-cypress';
6
+ import vue from 'eslint-plugin-vue';
7
+ import globals from 'globals';
8
+ import { fileURLToPath } from 'node:url';
9
+
10
+ const gitignorePath = fileURLToPath(new URL('.gitignore', import.meta.url));
4
11
 
5
12
  export default [
13
+ includeIgnoreFile(gitignorePath, { gitignoreResolution: true }),
6
14
  {
7
- ignores: ["dist/**", "docs/.vitepress/**", "docs/components/**"],
15
+ ignores: ['dist/**', 'docs/.vitepress/**', 'docs/components/**'],
8
16
  },
9
17
  js.configs.recommended,
10
- ...vue.configs["flat/essential"],
18
+ ...vue.configs['flat/essential'],
19
+ prettierConfig,
20
+ {
21
+ ...cypress.configs.recommended,
22
+ files: ['cypress/**/*.js'],
23
+ },
11
24
  {
12
- files: ["**/*.{js,vue}"],
25
+ files: ['**/*.{js,vue}'],
26
+ plugins: {
27
+ prettier,
28
+ },
13
29
  languageOptions: {
14
- ecmaVersion: "latest",
15
- sourceType: "module",
30
+ ecmaVersion: 'latest',
31
+ sourceType: 'module',
16
32
  globals: {
17
33
  ...globals.node,
18
34
  ...globals.browser,
19
35
  },
20
36
  },
21
- rules: {},
37
+ rules: {
38
+ 'prettier/prettier': [
39
+ 'error',
40
+ {
41
+ singleQuote: true,
42
+ trailingComma: 'all',
43
+ },
44
+ ],
45
+ 'arrow-body-style': 'off',
46
+ 'prefer-arrow-callback': 'off',
47
+ 'no-unused-vars': [
48
+ 'error',
49
+ {
50
+ varsIgnorePattern: '^_',
51
+ argsIgnorePattern: '^_',
52
+ caughtErrorsIgnorePattern: '^_',
53
+ },
54
+ ],
55
+ },
22
56
  },
23
57
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abi-software/flatmapvuer",
3
- "version": "1.17.0",
3
+ "version": "1.17.1-demo.1",
4
4
  "license": "Apache-2.0",
5
5
  "engines": {
6
6
  "node": "^24.20.0"
@@ -21,6 +21,8 @@
21
21
  "build-bundle": "vite build",
22
22
  "build-static": "vite build -c vite.static-build.js",
23
23
  "lint": "eslint .",
24
+ "format": "prettier --write .",
25
+ "format:check": "prettier --check .",
24
26
  "cypress:open": "cypress open",
25
27
  "cypress:component": "cypress run --component",
26
28
  "cypress:record": "cypress run --component --record",
@@ -71,11 +73,15 @@
71
73
  "cypress-visual-regression": "^6.0.0",
72
74
  "cypress-wait-until": "^3.0.2",
73
75
  "eslint": "^10.9.1",
76
+ "eslint-config-prettier": "^10.1.8",
77
+ "eslint-plugin-prettier": "^5.5.6",
74
78
  "eslint-plugin-cypress": "^7.0.0",
75
79
  "eslint-plugin-vue": "^10.10.0",
76
80
  "globals": "^17.11.0",
77
81
  "mochawesome": "^8.0.1",
82
+ "prettier": "3.9.6",
78
83
  "sass": "^1.103.1",
84
+ "unplugin-auto-import": "^21.1.0",
79
85
  "vite": "^8.2.1",
80
86
  "vitepress": "^1.6.4",
81
87
  "vue-docgen-api": "^4.79.2"
package/public/index.html CHANGED
@@ -1,15 +1,18 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="en">
3
3
  <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
7
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
8
8
  <title>flatmapvuer</title>
9
9
  </head>
10
10
  <body>
11
11
  <noscript>
12
- <strong>We're sorry but scaffoldvuer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12
+ <strong>
13
+ We're sorry but scaffoldvuer doesn't work properly without JavaScript enabled. Please enable
14
+ it to continue.
15
+ </strong>
13
16
  </noscript>
14
17
  <div id="app"></div>
15
18
  <!-- built files will be auto injected -->
@@ -7,4 +7,4 @@
7
7
  "html": true,
8
8
  "json": true
9
9
  }
10
- }
10
+ }
package/src/App.vue CHANGED
@@ -10,31 +10,20 @@
10
10
  <div class="options-container">
11
11
  <el-row :gutter="20">
12
12
  <el-col :span="8">
13
- <el-button @click="helpMode = !helpMode" size="small"
14
- >Help Mode</el-button
15
- >
13
+ <el-button @click="helpMode = !helpMode" size="small">Help Mode</el-button>
16
14
  </el-col>
17
15
  <el-col :span="8">
18
- <el-button @click="saveSettings()" size="small"
19
- >Save Settings</el-button
20
- >
16
+ <el-button @click="saveSettings()" size="small">Save Settings</el-button>
21
17
  </el-col>
22
18
  <el-col :span="8">
23
- <el-button
24
- :disabled="mapSettings.length === 0"
25
- @click="restoreSettings()"
26
- size="small"
27
- >Restore Settings</el-button
28
- >
19
+ <el-button :disabled="mapSettings.length === 0" @click="restoreSettings()" size="small">
20
+ Restore Settings
21
+ </el-button>
29
22
  </el-col>
30
23
  </el-row>
31
24
  <el-row>
32
25
  <el-col>
33
- <el-switch
34
- v-model="disableUI"
35
- active-text="Disable UI"
36
- >
37
- </el-switch>
26
+ <el-switch v-model="disableUI" active-text="Disable UI"></el-switch>
38
27
  </el-col>
39
28
  </el-row>
40
29
  <el-row>
@@ -48,14 +37,12 @@
48
37
  @select="search"
49
38
  popper-class="autocomplete-popper"
50
39
  :teleported="false"
51
- >
52
- </el-autocomplete>
40
+ ></el-autocomplete>
53
41
  </el-col>
54
42
  </el-row>
55
43
  </div>
56
44
  <template #reference>
57
- <el-button class="options-button" :icon="ElIconSetting"
58
- >Options</el-button>
45
+ <el-button class="options-button" :icon="ElIconSetting">Options</el-button>
59
46
  </template>
60
47
  </el-popover>
61
48
 
@@ -97,52 +84,37 @@
97
84
  </template>
98
85
 
99
86
  <script>
100
- /* eslint-disable no-alert, no-console */
101
- import { AnnotationService } from '@abi-software/sparc-annotation'
87
+ import { AnnotationService } from '@abi-software/sparc-annotation';
102
88
  import { markRaw, shallowRef } from 'vue';
103
- import { Setting as ElIconSetting } from '@element-plus/icons-vue'
104
- import {
105
- ElAutocomplete as Autocomplete,
106
- ElButton as Button,
107
- ElCol as Col,
108
- ElPopover as Popover,
109
- ElRow as Row,
110
- } from 'element-plus'
111
- import './icons/mapicon-species-style.css'
112
- import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue'
113
- import { HelpModeDialog } from '@abi-software/map-utilities'
114
- import '@abi-software/map-utilities/dist/style.css'
89
+ import { Setting as ElIconSetting } from '@element-plus/icons-vue';
90
+ import './icons/mapicon-species-style.css';
91
+ import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue';
92
+ import { HelpModeDialog } from '@abi-software/map-utilities';
93
+ import '@abi-software/map-utilities/dist/style.css';
115
94
 
116
95
  export default {
117
96
  name: 'app',
118
97
  components: {
119
- Autocomplete,
120
- Button,
121
- Col,
122
- ElIconSetting,
123
- Popover,
124
- Row,
125
98
  MultiFlatmapVuer,
126
99
  HelpModeDialog,
127
100
  },
128
101
  methods: {
129
102
  saveSettings: function () {
130
- this.mapSettings.push(this.$refs.multi.getState())
103
+ this.mapSettings.push(this.$refs.multi.getState());
131
104
  },
132
105
  restoreSettings: function () {
133
- if (this.mapSettings.length > 0)
134
- this.$refs.multi.setState(this.mapSettings.pop())
106
+ if (this.mapSettings.length > 0) this.$refs.multi.setState(this.mapSettings.pop());
135
107
  },
136
108
  FlatmapSelected: function (resource) {
137
109
  if (resource.eventType === 'click') {
138
- if (this.consoleOn) console.log('resource', resource)
110
+ if (this.consoleOn) console.log('resource', resource);
139
111
 
140
112
  // Show marker on centreline of right vagus X nerve trunk
141
113
  const { kind, models, location } = resource.feature;
142
114
  if (window.flatmapImp && models && location && kind === 'centreline') {
143
115
  window.flatmapImp.clearMarkers();
144
116
  window.flatmapImp.addMarker(models, {
145
- location: location
117
+ location: location,
146
118
  });
147
119
  }
148
120
  }
@@ -154,50 +126,44 @@ export default {
154
126
  if (this.consoleOn) console.log('pathway-selection-changed', data);
155
127
  },
156
128
  FlatmapReady: function (component) {
157
- if (this.consoleOn) console.log(component)
158
- let taxon = component.mapImp.describes
159
- let id = component.mapImp.addMarker('UBERON:0000948')
160
- window.flatmapImp = component.mapImp
161
- component.enablePanZoomEvents(true)
129
+ if (this.consoleOn) console.log(component);
130
+ let taxon = component.mapImp.describes;
131
+ let id = component.mapImp.addMarker('UBERON:0000948');
132
+ window.flatmapImp = component.mapImp;
133
+ component.enablePanZoomEvents(true);
162
134
  //component.showPathwaysDrawer(false);
163
- if (this.consoleOn) console.log(taxon, id)
135
+ if (this.consoleOn) console.log(taxon, id);
164
136
  //component.searchAndShowResult("heart");
165
137
  // component.changeViewingMode('Annotation')
166
138
  },
167
139
  panZoomcallback: function (payload) {
168
- this.payload = payload
140
+ this.payload = payload;
169
141
  },
170
142
  openMap: function (map) {
171
- if (this.consoleOn) console.log(map)
143
+ if (this.consoleOn) console.log(map);
172
144
  },
173
145
  fetchSuggestions: function (term, cb) {
174
146
  if (term === '') {
175
- cb([])
147
+ cb([]);
176
148
  } else {
177
- const suggestions = []
178
- const results = this.$refs.multi
179
- .getCurrentFlatmap()
180
- .searchSuggestions(term)
149
+ const suggestions = [];
150
+ const results = this.$refs.multi.getCurrentFlatmap().searchSuggestions(term);
181
151
  const featureIds = results.__featureIds || results.featureIds;
182
152
  featureIds.forEach((id) => {
183
- const annotation = this.$refs.multi
184
- .getCurrentFlatmap()
185
- .mapImp.annotation(id)
186
- if (annotation && annotation.label) suggestions.push(annotation.label)
187
- })
188
- const unique = new Set(suggestions)
189
- suggestions.length = 0
153
+ const annotation = this.$refs.multi.getCurrentFlatmap().mapImp.annotation(id);
154
+ if (annotation && annotation.label) suggestions.push(annotation.label);
155
+ });
156
+ const unique = new Set(suggestions);
157
+ suggestions.length = 0;
190
158
  for (const item of unique) {
191
- suggestions.push({ value: '"' + item + '"' })
159
+ suggestions.push({ value: '"' + item + '"' });
192
160
  }
193
- cb(suggestions)
161
+ cb(suggestions);
194
162
  }
195
163
  },
196
164
  search: function () {
197
- if (this.consoleOn) console.log(this.searchText)
198
- this.$refs.multi
199
- .getCurrentFlatmap()
200
- .searchAndShowResult(this.searchText, true)
165
+ if (this.consoleOn) console.log(this.searchText);
166
+ this.$refs.multi.getCurrentFlatmap().searchAndShowResult(this.searchText, true);
201
167
  },
202
168
  onFlatmapChanged: function (activeSpecies) {
203
169
  this.helpMode = false;
@@ -234,7 +200,7 @@ export default {
234
200
  provide() {
235
201
  return {
236
202
  $annotator: this.annotator,
237
- }
203
+ };
238
204
  },
239
205
  data: function () {
240
206
  return {
@@ -279,7 +245,7 @@ export default {
279
245
  },
280
246
  Vagus: {
281
247
  taxo: 'UBERON:0001759',
282
- uuid: "0ea568ec-538d-52f3-a8e7-0437d844e1cf",
248
+ uuid: '0ea568ec-538d-52f3-a8e7-0437d844e1cf',
283
249
  },
284
250
  Sample: { taxo: 'NCBITaxon:1', displayWarning: true },
285
251
  'Functional Connectivity': {
@@ -287,8 +253,8 @@ export default {
287
253
  displayWarning: true,
288
254
  },
289
255
  Test: {
290
- "taxo": "NCBITaxon:1",
291
- "displayWarning": true
256
+ taxo: 'NCBITaxon:1',
257
+ displayWarning: true,
292
258
  },
293
259
  },
294
260
  tooltipContent: undefined,
@@ -314,40 +280,42 @@ export default {
314
280
  //flatmapAPI: "https://mapcore-demo.org/staging/flatmap/v1/"
315
281
  // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/",
316
282
  ElIconSetting: shallowRef(ElIconSetting),
317
- annotator: markRaw(new AnnotationService(`https://mapcore-demo.org/devel/flatmap/v4/annotator`)),
283
+ annotator: markRaw(
284
+ new AnnotationService(`https://mapcore-demo.org/devel/flatmap/v4/annotator`),
285
+ ),
318
286
  externalLegends: [
319
287
  {
320
288
  prompt: 'Sample Circle',
321
289
  colour: '#FA00C0',
322
- border: "green",
323
- style: 'circle'
290
+ border: 'green',
291
+ style: 'circle',
324
292
  },
325
293
  {
326
294
  prompt: 'Sample square',
327
295
  border: '#EA431C',
328
- style: 'square'
296
+ style: 'square',
329
297
  },
330
298
  {
331
299
  prompt: 'Sample rounded square',
332
- style: 'rounded-square'
300
+ style: 'rounded-square',
333
301
  },
334
302
  {
335
303
  prompt: 'Sample exoid',
336
304
  colour: '#0AED59',
337
305
  border: 'purple',
338
- style: 'exoid'
306
+ style: 'exoid',
339
307
  },
340
308
  {
341
309
  prompt: 'Sample line',
342
310
  colour: '#0047AB',
343
- style: 'line'
311
+ style: 'line',
344
312
  },
345
313
  {
346
314
  prompt: 'Sample dashed arrow line',
347
315
  colour: '#099F04',
348
316
  style: 'line',
349
317
  dashed: true,
350
- arrow: true
318
+ arrow: true,
351
319
  },
352
320
  {
353
321
  prompt: 'Sample hexagon',
@@ -355,8 +323,8 @@ export default {
355
323
  style: 'hexagon',
356
324
  border: 'blue',
357
325
  },
358
- ]
359
- }
326
+ ],
327
+ };
360
328
  },
361
329
  mounted: function () {
362
330
  this.multiflatmapRef = this.$refs.multi;
@@ -368,9 +336,9 @@ export default {
368
336
  if (!newVal) {
369
337
  this.helpModeActiveItem = 0;
370
338
  }
371
- }
339
+ },
372
340
  },
373
- }
341
+ };
374
342
  </script>
375
343
 
376
344
  <style lang="scss">
@@ -432,7 +400,7 @@ body {
432
400
  }
433
401
 
434
402
  .options-button {
435
- z-index:100;
403
+ z-index: 100;
436
404
  position: absolute;
437
405
  left: 50%;
438
406
  transform: translateX(-50%);
@@ -1,15 +1,15 @@
1
1
  // Primary colors
2
- $purple: #8300BF;
3
- $darkBlue: #24245B;
2
+ $purple: #8300bf;
3
+ $darkBlue: #24245b;
4
4
  $grey: #303133;
5
5
 
6
6
  // Secondary colors
7
- $lightPurple: #BC00FC;
8
- $blue: #0026FF;
7
+ $lightPurple: #bc00fc;
8
+ $blue: #0026ff;
9
9
 
10
10
  // Status colors
11
11
  $success: #5e9f69;
12
- $warning: #FF8400;
12
+ $warning: #ff8400;
13
13
  $danger: #b51d09;
14
14
 
15
15
  // Text colors
@@ -18,12 +18,12 @@ $mediumGrey: #606266;
18
18
  $lightGrey: #909399;
19
19
 
20
20
  // Line colors
21
- $lineColor1: #DCDFE6;
22
- $lineColor2: #E4E7ED;
21
+ $lineColor1: #dcdfe6;
22
+ $lineColor2: #e4e7ed;
23
23
 
24
24
  // Background colors
25
- $background: #F5F7FA;
26
- $cochlear: #FFFFFF;
25
+ $background: #f5f7fa;
26
+ $cochlear: #ffffff;
27
27
 
28
28
  //Search box colors
29
29
  $darkGrey: #606266;
@@ -33,7 +33,9 @@ $app-secondary-color: $darkBlue !default;
33
33
  $text-color: $grey !default;
34
34
  $input-text: $grey !default;
35
35
 
36
- $system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
36
+ $system-font:
37
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
38
+ 'Helvetica Neue', sans-serif !important;
37
39
  $font-family: 'Asap', sans-serif;
38
40
 
39
41
  // Viewport Sizes
@@ -1,3 +1,3 @@
1
- import mitt from 'mitt'
2
- const EventBus = new mitt()
3
- export default EventBus
1
+ import mitt from 'mitt';
2
+ const EventBus = new mitt();
3
+ export default EventBus;
@@ -35,50 +35,50 @@ export default {
35
35
  default: () => ({}),
36
36
  },
37
37
  },
38
- }
38
+ };
39
39
  </script>
40
40
 
41
41
  <style lang="scss" scoped>
42
- .flatmap-error {
43
- width: 100%;
44
- height: 100%;
45
- position: absolute;
46
- top: 0;
47
- left: 0;
48
- display: flex;
49
- justify-content: center;
50
- align-items: center;
51
- flex-direction: column;
52
- gap: 1rem;;
53
- }
42
+ .flatmap-error {
43
+ width: 100%;
44
+ height: 100%;
45
+ position: absolute;
46
+ top: 0;
47
+ left: 0;
48
+ display: flex;
49
+ justify-content: center;
50
+ align-items: center;
51
+ flex-direction: column;
52
+ gap: 1rem;
53
+ }
54
54
 
55
- .flatmap-error-title {
56
- font-size: 18px;
57
- text-align: center;
58
- }
55
+ .flatmap-error-title {
56
+ font-size: 18px;
57
+ text-align: center;
58
+ }
59
59
 
60
- .flatmap-error-message {
61
- text-align: left;
62
- display: flex;
63
- flex-direction: column;
64
- gap: 0.5rem;
65
- padding: 1rem;
66
- line-height: 20px;
67
- border: 1px solid var(--el-border-color);
68
- border-radius: var(--el-border-radius-base);
69
- max-width: 500px;
70
- }
60
+ .flatmap-error-message {
61
+ text-align: left;
62
+ display: flex;
63
+ flex-direction: column;
64
+ gap: 0.5rem;
65
+ padding: 1rem;
66
+ line-height: 20px;
67
+ border: 1px solid var(--el-border-color);
68
+ border-radius: var(--el-border-radius-base);
69
+ max-width: 500px;
70
+ }
71
71
 
72
- .el-button--primary.button {
73
- font-family: inherit;
72
+ .el-button--primary.button {
73
+ font-family: inherit;
74
74
 
75
- &:hover,
76
- &:active,
77
- &:focus {
78
- background: $app-primary-color;
79
- border-color: $app-primary-color;
80
- box-shadow: 0px 0px 2px 0px rgba(131, 0, 191, 0.5);
81
- color: #fff;
82
- }
75
+ &:hover,
76
+ &:active,
77
+ &:focus {
78
+ background: $app-primary-color;
79
+ border-color: $app-primary-color;
80
+ box-shadow: 0px 0px 2px 0px rgba(131, 0, 191, 0.5);
81
+ color: #fff;
83
82
  }
83
+ }
84
84
  </style>