@abi-software/flatmapvuer 0.3.14 → 0.3.15

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/package.json CHANGED
@@ -1,71 +1,71 @@
1
- {
2
- "name": "@abi-software/flatmapvuer",
3
- "version": "0.3.14",
4
- "main": "./dist/flatmapvuer.common.js",
5
- "files": [
6
- "dist/*",
7
- "src/*",
8
- "public/*",
9
- "*.json",
10
- "*.js"
11
- ],
12
- "repository": {
13
- "type": "git",
14
- "url": "https://github.com/ABI-Software/flatmapvuer.git"
15
- },
16
- "scripts": {
17
- "start": "vue-cli-service serve",
18
- "serve": "vue-cli-service serve --port 8082",
19
- "build": "vue-cli-service build --dest test_html --mode staging",
20
- "build-bundle": "vue-cli-service build --target lib --name flatmapvuer ./src/components/index.js",
21
- "lint": "vue-cli-service lint"
22
- },
23
- "dependencies": {
24
- "@abi-software/flatmap-viewer": "^2.2.9",
25
- "@abi-software/svg-sprite": "^0.1.14",
26
- "core-js": "^3.3.2",
27
- "css-element-queries": "^1.2.2",
28
- "current-script-polyfill": "^1.0.0",
29
- "element-ui": "^2.13.0",
30
- "file-loader": "^5.0.2",
31
- "lodash": "^4.17.21",
32
- "vue": "^2.6.10"
33
- },
34
- "devDependencies": {
35
- "@vue/cli-plugin-babel": "^4.0.0",
36
- "@vue/cli-plugin-eslint": "^4.0.0",
37
- "@vue/cli-service": "^4.5.13",
38
- "babel-eslint": "^10.0.3",
39
- "babel-plugin-component": "^1.1.1",
40
- "base64-inline-loader": "^2.0.1",
41
- "eslint": "^5.16.0",
42
- "eslint-plugin-vue": "^5.0.0",
43
- "node-sass": "^4.14.1",
44
- "sass-loader": "^8.0.2",
45
- "vue-template-compiler": "^2.6.10",
46
- "webpack-node-externals": "^2.5.2"
47
- },
48
- "eslintConfig": {
49
- "root": true,
50
- "env": {
51
- "node": true
52
- },
53
- "extends": [
54
- "plugin:vue/essential",
55
- "eslint:recommended"
56
- ],
57
- "rules": {},
58
- "parserOptions": {
59
- "parser": "babel-eslint"
60
- }
61
- },
62
- "postcss": {
63
- "plugins": {
64
- "autoprefixer": {}
65
- }
66
- },
67
- "browserslist": [
68
- "> 1%",
69
- "last 2 versions"
70
- ]
71
- }
1
+ {
2
+ "name": "@abi-software/flatmapvuer",
3
+ "version": "0.3.15",
4
+ "main": "./dist/flatmapvuer.common.js",
5
+ "files": [
6
+ "dist/*",
7
+ "src/*",
8
+ "public/*",
9
+ "*.json",
10
+ "*.js"
11
+ ],
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "https://github.com/ABI-Software/flatmapvuer.git"
15
+ },
16
+ "scripts": {
17
+ "start": "vue-cli-service serve",
18
+ "serve": "vue-cli-service serve --port 8082",
19
+ "build": "vue-cli-service build --dest test_html --mode staging",
20
+ "build-bundle": "vue-cli-service build --target lib --name flatmapvuer ./src/components/index.js",
21
+ "lint": "vue-cli-service lint"
22
+ },
23
+ "dependencies": {
24
+ "@abi-software/flatmap-viewer": "2.2.9",
25
+ "@abi-software/svg-sprite": "^0.1.14",
26
+ "core-js": "^3.3.2",
27
+ "css-element-queries": "^1.2.2",
28
+ "current-script-polyfill": "^1.0.0",
29
+ "element-ui": "^2.13.0",
30
+ "file-loader": "^5.0.2",
31
+ "lodash": "^4.17.21",
32
+ "vue": "^2.6.10"
33
+ },
34
+ "devDependencies": {
35
+ "@vue/cli-plugin-babel": "^4.0.0",
36
+ "@vue/cli-plugin-eslint": "^4.0.0",
37
+ "@vue/cli-service": "^4.5.13",
38
+ "babel-eslint": "^10.0.3",
39
+ "babel-plugin-component": "^1.1.1",
40
+ "base64-inline-loader": "^2.0.1",
41
+ "eslint": "^5.16.0",
42
+ "eslint-plugin-vue": "^5.0.0",
43
+ "node-sass": "^4.14.1",
44
+ "sass-loader": "^8.0.2",
45
+ "vue-template-compiler": "^2.6.10",
46
+ "webpack-node-externals": "^2.5.2"
47
+ },
48
+ "eslintConfig": {
49
+ "root": true,
50
+ "env": {
51
+ "node": true
52
+ },
53
+ "extends": [
54
+ "plugin:vue/essential",
55
+ "eslint:recommended"
56
+ ],
57
+ "rules": {},
58
+ "parserOptions": {
59
+ "parser": "babel-eslint"
60
+ }
61
+ },
62
+ "postcss": {
63
+ "plugins": {
64
+ "autoprefixer": {}
65
+ }
66
+ },
67
+ "browserslist": [
68
+ "> 1%",
69
+ "last 2 versions"
70
+ ]
71
+ }
package/public/index.html CHANGED
@@ -1,17 +1,17 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
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">
8
- <title>flatmapvuer</title>
9
- </head>
10
- <body>
11
- <noscript>
12
- <strong>We're sorry but scaffoldvuer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13
- </noscript>
14
- <div id="app"></div>
15
- <!-- built files will be auto injected -->
16
- </body>
17
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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">
8
+ <title>flatmapvuer</title>
9
+ </head>
10
+ <body>
11
+ <noscript>
12
+ <strong>We're sorry but scaffoldvuer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13
+ </noscript>
14
+ <div id="app"></div>
15
+ <!-- built files will be auto injected -->
16
+ </body>
17
+ </html>
package/src/App.vue CHANGED
@@ -1,162 +1,162 @@
1
- <template>
2
- <div id="app">
3
- <el-popover
4
- placement="bottom"
5
- trigger="click"
6
- width=500
7
- class="popover"
8
- :appendToBody=false
9
- >
10
- <div class="options-container">
11
- <el-row :gutter="20">
12
- <el-button @click="helpMode = !helpMode" size="mini">Help Mode</el-button>
13
- <el-button @click="saveSettings()" size="mini">Save Settings</el-button>
14
- <el-button :disabled="mapSettings.length === 0" @click="restoreSettings()" size="mini">Restore Settings</el-button>
15
- </el-row>
16
- </div>
17
- <el-button class="options-button" icon="el-icon-setting" slot="reference">Options</el-button>
18
- </el-popover>
19
-
20
- <MultiFlatmapVuer ref="multi" :availableSpecies="availableSpecies"
21
- @resource-selected="FlatmapSelected" :minZoom="minZoom"
22
- @pan-zoom-callback="panZoomcallback"
23
- @ready="FlatmapReady" :featureInfo="featureInfo" :searchable="searchable"
24
- :initial="initial" :pathControls="pathControls" :helpMode="helpMode"
25
- :displayMinimap=true :flatmapAPI="flatmapAPI"/>
26
- </div>
27
- </template>
28
-
29
- <script>
30
- /* eslint-disable no-alert, no-console */
31
- import Vue from "vue";
32
- import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue'
33
- import {
34
- Button,
35
- Col,
36
- Popover,
37
- Row,
38
- } from 'element-ui';
39
- import "./icons/mapicon-species-style.css";
40
- Vue.use(Button);
41
- Vue.use(Col);
42
- Vue.use(Popover);
43
- Vue.use(Row);
44
-
45
- export default {
46
- name: 'app',
47
- methods: {
48
- saveSettings: function() {
49
- this.mapSettings.push(this.$refs.multi.getState());
50
- },
51
- restoreSettings: function() {
52
- if (this.mapSettings.length > 0)
53
- this.$refs.multi.setState(this.mapSettings.pop());
54
- },
55
- FlatmapSelected: function(resource) {
56
- if (resource.eventType === "click")
57
- console.log('resource', resource);
58
- },
59
- FlatmapReady: function(component) {
60
- let taxon = component.mapImp.describes;
61
- let id = component.mapImp.addMarker("UBERON:0000948", "simulation");
62
- component.enablePanZoomEvents(true);
63
- component.showPathwaysDrawer(false);
64
- console.log(taxon, id);
65
- component.searchAndShowResult("heart");
66
- },
67
- panZoomcallback: function(payload) {
68
- this.payload = payload
69
- }
70
- },
71
- data: function(){
72
- return {
73
- featureInfo: true,
74
- searchable: true,
75
- pathControls: true,
76
- minZoom: 4,
77
- availableSpecies : {
78
- "Human Female":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass:"mapicon-icon_human", displayWarning:true},
79
- "Human Male":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass:"mapicon-icon_human", displayWarning:true},
80
- "Rat":{taxo: "NCBITaxon:10114", iconClass:"mapicon-icon_rat", displayWarning:false, displayLatestChanges:true},
81
- "Mouse":{taxo: "NCBITaxon:10090", iconClass:"mapicon-icon_mouse", displayWarning:true},
82
- "Kember":{taxo: "ABI:1000001", displayWarning:true},
83
- "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning:true},
84
- "Cat":{taxo: "NCBITaxon:9685", iconClass:"mapicon-icon_cat", displayWarning:true},
85
- "Functional Connectivity": {id: "fc-cardio", displayWarning:true},
86
- "digestive tract":{taxo: "digestive tract", displayWarning:true}
87
- },
88
- tooltipContent: undefined,
89
- tStyle: {
90
- top: "200px",
91
- left: "200px",
92
- position: "absolute"
93
- },
94
- displayCloseButton: false,
95
- initial: "Rat",
96
- helpMode: false,
97
- mapSettings: [],
98
- //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
99
- //flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
100
- flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/"
101
- // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/"
102
- }
103
- },
104
- components: {
105
- MultiFlatmapVuer,
106
- }
107
- }
108
- </script>
109
-
110
- <style lang="scss">
111
- @import "~element-ui/packages/theme-chalk/src/button";
112
- @import "~element-ui/packages/theme-chalk/src/col";
113
- @import "~element-ui/packages/theme-chalk/src/popover";
114
- @import "~element-ui/packages/theme-chalk/src/row";
115
-
116
- #app {
117
- font-family: 'Asap', 'Avenir', Helvetica, Arial, sans-serif;
118
- -webkit-font-smoothing: antialiased;
119
- -moz-osx-font-smoothing: grayscale;
120
- text-align: center;
121
- color: #2c3e50;
122
- height:100%;
123
- width: 100%;
124
- position:absolute;
125
- }
126
-
127
- .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
128
- margin-top:120px;
129
- }
130
-
131
- body {
132
- margin: 0px;
133
- }
134
-
135
- .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
136
- margin-top:120px;
137
- }
138
-
139
- .popover{
140
- top:5px;
141
- right:calc( 50% - 20px);
142
- position:absolute;
143
- z-index:1000;
144
- }
145
-
146
- .el-row {
147
- margin-bottom: 5px;
148
- &:last-child {
149
- margin-bottom: 0;
150
- }
151
- }
152
-
153
- .options-container{
154
-
155
- text-align: center;
156
- }
157
-
158
- .el-tabs__content {
159
- height:100%;
160
- }
161
-
162
- </style>
1
+ <template>
2
+ <div id="app">
3
+ <el-popover
4
+ placement="bottom"
5
+ trigger="click"
6
+ width=500
7
+ class="popover"
8
+ :appendToBody=false
9
+ >
10
+ <div class="options-container">
11
+ <el-row :gutter="20">
12
+ <el-button @click="helpMode = !helpMode" size="mini">Help Mode</el-button>
13
+ <el-button @click="saveSettings()" size="mini">Save Settings</el-button>
14
+ <el-button :disabled="mapSettings.length === 0" @click="restoreSettings()" size="mini">Restore Settings</el-button>
15
+ </el-row>
16
+ </div>
17
+ <el-button class="options-button" icon="el-icon-setting" slot="reference">Options</el-button>
18
+ </el-popover>
19
+
20
+ <MultiFlatmapVuer ref="multi" :availableSpecies="availableSpecies"
21
+ @resource-selected="FlatmapSelected" :minZoom="minZoom"
22
+ @pan-zoom-callback="panZoomcallback"
23
+ @ready="FlatmapReady" :featureInfo="featureInfo" :searchable="searchable"
24
+ :initial="initial" :pathControls="pathControls" :helpMode="helpMode"
25
+ :displayMinimap=true :flatmapAPI="flatmapAPI"/>
26
+ </div>
27
+ </template>
28
+
29
+ <script>
30
+ /* eslint-disable no-alert, no-console */
31
+ import Vue from "vue";
32
+ import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue'
33
+ import {
34
+ Button,
35
+ Col,
36
+ Popover,
37
+ Row,
38
+ } from 'element-ui';
39
+ import "./icons/mapicon-species-style.css";
40
+ Vue.use(Button);
41
+ Vue.use(Col);
42
+ Vue.use(Popover);
43
+ Vue.use(Row);
44
+
45
+ export default {
46
+ name: 'app',
47
+ methods: {
48
+ saveSettings: function() {
49
+ this.mapSettings.push(this.$refs.multi.getState());
50
+ },
51
+ restoreSettings: function() {
52
+ if (this.mapSettings.length > 0)
53
+ this.$refs.multi.setState(this.mapSettings.pop());
54
+ },
55
+ FlatmapSelected: function(resource) {
56
+ if (resource.eventType === "click")
57
+ console.log('resource', resource);
58
+ },
59
+ FlatmapReady: function(component) {
60
+ let taxon = component.mapImp.describes;
61
+ let id = component.mapImp.addMarker("UBERON:0000948", "simulation");
62
+ component.enablePanZoomEvents(true);
63
+ component.showPathwaysDrawer(false);
64
+ console.log(taxon, id);
65
+ component.searchAndShowResult("heart");
66
+ },
67
+ panZoomcallback: function(payload) {
68
+ this.payload = payload
69
+ }
70
+ },
71
+ data: function(){
72
+ return {
73
+ featureInfo: true,
74
+ searchable: true,
75
+ pathControls: true,
76
+ minZoom: 4,
77
+ availableSpecies : {
78
+ "Human Female":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass:"mapicon-icon_human", displayWarning:true},
79
+ "Human Male":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass:"mapicon-icon_human", displayWarning:true},
80
+ "Rat":{taxo: "NCBITaxon:10114", iconClass:"mapicon-icon_rat", displayWarning:false, displayLatestChanges:true},
81
+ "Mouse":{taxo: "NCBITaxon:10090", iconClass:"mapicon-icon_mouse", displayWarning:true},
82
+ "Kember":{taxo: "ABI:1000001", displayWarning:true},
83
+ "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning:true},
84
+ "Cat":{taxo: "NCBITaxon:9685", iconClass:"mapicon-icon_cat", displayWarning:true},
85
+ "Functional Connectivity": {id: "fc-cardio", displayWarning:true},
86
+ "digestive tract":{taxo: "digestive tract", displayWarning:true}
87
+ },
88
+ tooltipContent: undefined,
89
+ tStyle: {
90
+ top: "200px",
91
+ left: "200px",
92
+ position: "absolute"
93
+ },
94
+ displayCloseButton: false,
95
+ initial: "Rat",
96
+ helpMode: false,
97
+ mapSettings: [],
98
+ //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
99
+ //flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
100
+ flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/"
101
+ // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/"
102
+ }
103
+ },
104
+ components: {
105
+ MultiFlatmapVuer,
106
+ }
107
+ }
108
+ </script>
109
+
110
+ <style lang="scss">
111
+ @import "~element-ui/packages/theme-chalk/src/button";
112
+ @import "~element-ui/packages/theme-chalk/src/col";
113
+ @import "~element-ui/packages/theme-chalk/src/popover";
114
+ @import "~element-ui/packages/theme-chalk/src/row";
115
+
116
+ #app {
117
+ font-family: 'Asap', 'Avenir', Helvetica, Arial, sans-serif;
118
+ -webkit-font-smoothing: antialiased;
119
+ -moz-osx-font-smoothing: grayscale;
120
+ text-align: center;
121
+ color: #2c3e50;
122
+ height:100%;
123
+ width: 100%;
124
+ position:absolute;
125
+ }
126
+
127
+ .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
128
+ margin-top:120px;
129
+ }
130
+
131
+ body {
132
+ margin: 0px;
133
+ }
134
+
135
+ .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
136
+ margin-top:120px;
137
+ }
138
+
139
+ .popover{
140
+ top:5px;
141
+ right:calc( 50% - 20px);
142
+ position:absolute;
143
+ z-index:1000;
144
+ }
145
+
146
+ .el-row {
147
+ margin-bottom: 5px;
148
+ &:last-child {
149
+ margin-bottom: 0;
150
+ }
151
+ }
152
+
153
+ .options-container{
154
+
155
+ text-align: center;
156
+ }
157
+
158
+ .el-tabs__content {
159
+ height:100%;
160
+ }
161
+
162
+ </style>
@@ -1,43 +1,43 @@
1
- // Primary colors
2
- $purple: #8300BF;
3
- $darkBlue: #24245B;
4
- $grey: #303133;
5
-
6
- // Secondary colors
7
- $lightPurple: #BC00FC;
8
- $blue: #0026FF;
9
-
10
- // Status colors
11
- $success: #5e9f69;
12
- $warning: #FF8400;
13
- $danger: #b51d09;
14
-
15
- // Text colors
16
- $neutralGrey: #616161;
17
- $mediumGrey: #606266;
18
- $lightGrey: #909399;
19
-
20
- // Line colors
21
- $lineColor1: #DCDFE6;
22
- $lineColor2: #E4E7ED;
23
-
24
- // Background colors
25
- $background: #F5F7FA;
26
- $cochlear: #FFFFFF;
27
-
28
- //Search box colors
29
- $darkGrey: #606266;
30
-
31
- $app-primary-color: $purple !default;
32
- $app-secondary-color: $darkBlue !default;
33
- $text-color: $grey !default;
34
- $input-text: $grey !default;
35
-
36
- $system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
37
- $font-family: 'Asap', sans-serif;
38
-
39
- // Viewport Sizes
40
- $viewport-sm: 20rem;
41
- $viewport-md: 47rem;
42
- $viewport-lg: 64rem;
43
- $viewport-xlg: 120rem;
1
+ // Primary colors
2
+ $purple: #8300BF;
3
+ $darkBlue: #24245B;
4
+ $grey: #303133;
5
+
6
+ // Secondary colors
7
+ $lightPurple: #BC00FC;
8
+ $blue: #0026FF;
9
+
10
+ // Status colors
11
+ $success: #5e9f69;
12
+ $warning: #FF8400;
13
+ $danger: #b51d09;
14
+
15
+ // Text colors
16
+ $neutralGrey: #616161;
17
+ $mediumGrey: #606266;
18
+ $lightGrey: #909399;
19
+
20
+ // Line colors
21
+ $lineColor1: #DCDFE6;
22
+ $lineColor2: #E4E7ED;
23
+
24
+ // Background colors
25
+ $background: #F5F7FA;
26
+ $cochlear: #FFFFFF;
27
+
28
+ //Search box colors
29
+ $darkGrey: #606266;
30
+
31
+ $app-primary-color: $purple !default;
32
+ $app-secondary-color: $darkBlue !default;
33
+ $text-color: $grey !default;
34
+ $input-text: $grey !default;
35
+
36
+ $system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
37
+ $font-family: 'Asap', sans-serif;
38
+
39
+ // Viewport Sizes
40
+ $viewport-sm: 20rem;
41
+ $viewport-md: 47rem;
42
+ $viewport-lg: 64rem;
43
+ $viewport-xlg: 120rem;
@@ -1,7 +1,7 @@
1
- @import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
2
-
3
- @import '_variables';
4
-
5
- /* icon font path, required */
6
- $--color-primary: $app-primary-color !default;
7
- $--font-path: '~element-ui/lib/theme-chalk/fonts';
1
+ @import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
2
+
3
+ @import '_variables';
4
+
5
+ /* icon font path, required */
6
+ $--color-primary: $app-primary-color !default;
7
+ $--font-path: '~element-ui/lib/theme-chalk/fonts';
@@ -1,3 +1,3 @@
1
- import Vue from 'vue';
2
- const EventBus = new Vue();
1
+ import Vue from 'vue';
2
+ const EventBus = new Vue();
3
3
  export default EventBus;