@abi-software/simulationvuer 0.6.5 → 0.7.0-vue-3-alpha.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 (31) hide show
  1. package/LICENSE +201 -201
  2. package/README.md +74 -74
  3. package/babel.config.js +0 -14
  4. package/dist/favicon.ico +0 -0
  5. package/dist/index.html +17 -0
  6. package/dist/simulationvuer.mjs +59054 -0
  7. package/dist/simulationvuer.umd.js +66 -83576
  8. package/dist/style.css +1 -0
  9. package/package-lock.json +14158 -16637
  10. package/package.json +71 -71
  11. package/public/index.html +17 -17
  12. package/src/App.vue +101 -103
  13. package/src/assets/_variables.scss +43 -43
  14. package/src/assets/styles.scss +7 -7
  15. package/src/components/SimulationVuer.vue +535 -530
  16. package/src/components/SimulationVuerInput.vue +141 -144
  17. package/src/components/common.js +31 -31
  18. package/src/components/index.js +7 -7
  19. package/src/components/json.js +522 -522
  20. package/src/components/ui.js +75 -77
  21. package/src/components.d.ts +24 -0
  22. package/src/main.js +20 -8
  23. package/vite.config.js +71 -0
  24. package/vue.config.js +31 -31
  25. package/dist/demo.html +0 -10
  26. package/dist/simulationvuer.common.js +0 -83566
  27. package/dist/simulationvuer.common.js.map +0 -1
  28. package/dist/simulationvuer.css +0 -1
  29. package/dist/simulationvuer.umd.js.map +0 -1
  30. package/dist/simulationvuer.umd.min.js +0 -2
  31. package/dist/simulationvuer.umd.min.js.map +0 -1
package/package.json CHANGED
@@ -1,71 +1,71 @@
1
- {
2
- "name": "@abi-software/simulationvuer",
3
- "version": "0.6.5",
4
- "private": false,
5
- "scripts": {
6
- "serve": "vue-cli-service serve --mode static",
7
- "build": "vue-cli-service build",
8
- "build-bundle": "vue-cli-service build --target lib --name simulationvuer ./src/components/index.js",
9
- "lint": "vue-cli-service lint"
10
- },
11
- "dependencies": {
12
- "@abi-software/plotvuer": "^0.2.46",
13
- "element-ui": "^2.14.1",
14
- "jsonschema": "^1.4.0",
15
- "vue": "^2.6.11"
16
- },
17
- "devDependencies": {
18
- "@vue/cli-plugin-babel": "~4.5.0",
19
- "@vue/cli-plugin-eslint": "~4.5.0",
20
- "@vue/cli-service": "~4.5.0",
21
- "babel-eslint": "^10.1.0",
22
- "babel-plugin-component": "^1.1.1",
23
- "base64-inline-loader": "^2.0.1",
24
- "eslint": "^6.7.2",
25
- "eslint-plugin-vue": "^6.2.2",
26
- "node-sass": "^4.14.1",
27
- "sass-loader": "^8.0.2",
28
- "vue-template-compiler": "^2.6.11",
29
- "webpack-node-externals": "^2.5.2"
30
- },
31
- "eslintConfig": {
32
- "root": true,
33
- "env": {
34
- "node": true
35
- },
36
- "extends": [
37
- "plugin:vue/essential",
38
- "eslint:recommended"
39
- ],
40
- "parserOptions": {
41
- "parser": "babel-eslint"
42
- },
43
- "rules": {}
44
- },
45
- "browserslist": [
46
- "> 1%",
47
- "last 2 versions",
48
- "not dead"
49
- ],
50
- "description": "SimulationVuer is a [Vue](https://vuejs.org/) component to configure and run a [CellML](https://cellml.org/)-based model of some biological process, and to visualise the results of that simulation.",
51
- "main": "./dist/simulationvuer.common.js",
52
- "files": [
53
- "data/*",
54
- "dist/*",
55
- "public/*",
56
- "scripts/*",
57
- "src/*",
58
- "*.json",
59
- "*.js"
60
- ],
61
- "repository": {
62
- "type": "git",
63
- "url": "git+https://github.com/ABI-Software/simulationvuer.git"
64
- },
65
- "author": "Alan Garny",
66
- "license": "Apache-2.0",
67
- "bugs": {
68
- "url": "https://github.com/ABI-Software/simulationvuer/issues"
69
- },
70
- "homepage": "https://github.com/ABI-Software/simulationvuer#readme"
71
- }
1
+ {
2
+ "name": "@abi-software/simulationvuer",
3
+ "version": "0.7.0-vue-3-alpha.0",
4
+ "private": false,
5
+ "scripts": {
6
+ "serve": "vite serve --host",
7
+ "build-bundle": "vite build"
8
+ },
9
+ "dependencies": {
10
+ "@abi-software/plotvuer": "^0.4.0-vue-3-alpha.4",
11
+ "element-plus": "^2.5.3",
12
+ "jsonschema": "^1.4.0",
13
+ "unplugin-vue-components": "^0.26.0",
14
+ "vue": "^3.4.15"
15
+ },
16
+ "devDependencies": {
17
+ "@vitejs/plugin-vue": "^5.0.3",
18
+ "babel-eslint": "^10.1.0",
19
+ "babel-plugin-component": "^1.1.1",
20
+ "base64-inline-loader": "^2.0.1",
21
+ "eslint": "^8.56.0",
22
+ "eslint-plugin-vue": "^9.20.1",
23
+ "node-sass": "^9.0.0",
24
+ "sass": "^1.70.0",
25
+ "sass-loader": "^14.0.0",
26
+ "vite": "^5.0.12",
27
+ "vue-router": "^4.2.5",
28
+ "vue-template-compiler": "^2.6.11",
29
+ "webpack-node-externals": "^2.5.2"
30
+ },
31
+ "eslintConfig": {
32
+ "root": true,
33
+ "env": {
34
+ "node": true
35
+ },
36
+ "extends": [
37
+ "plugin:vue/essential",
38
+ "eslint:recommended"
39
+ ],
40
+ "parserOptions": {
41
+ "parser": "babel-eslint"
42
+ },
43
+ "rules": {}
44
+ },
45
+ "browserslist": [
46
+ "> 1%",
47
+ "last 2 versions",
48
+ "not dead"
49
+ ],
50
+ "description": "SimulationVuer is a [Vue](https://vuejs.org/) component to configure and run a [CellML](https://cellml.org/)-based model of some biological process, and to visualise the results of that simulation.",
51
+ "main": "./dist/simulationvuer.common.js",
52
+ "files": [
53
+ "data/*",
54
+ "dist/*",
55
+ "public/*",
56
+ "scripts/*",
57
+ "src/*",
58
+ "*.json",
59
+ "*.js"
60
+ ],
61
+ "repository": {
62
+ "type": "git",
63
+ "url": "git+https://github.com/ABI-Software/simulationvuer.git"
64
+ },
65
+ "author": "Alan Garny",
66
+ "license": "Apache-2.0",
67
+ "bugs": {
68
+ "url": "https://github.com/ABI-Software/simulationvuer/issues"
69
+ },
70
+ "homepage": "https://github.com/ABI-Software/simulationvuer#readme"
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><%= htmlWebpackPlugin.options.title %></title>
9
- </head>
10
- <body>
11
- <noscript>
12
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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><%= htmlWebpackPlugin.options.title %></title>
9
+ </head>
10
+ <body>
11
+ <noscript>
12
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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,103 +1,101 @@
1
- <template>
2
- <div id="app">
3
- <div class="app">
4
- <h1>SimulationVuer</h1>
5
- <el-radio-group v-model="id" size="mini">
6
- <el-radio-button :class="className(dataset.id)" v-for="dataset in datasets" v-bind:key="dataset.id" :label="dataset.id" />
7
- </el-radio-group>
8
- </div>
9
- <hr />
10
- <div v-for="dataset in datasets" v-bind:key="dataset.id">
11
- <div v-if="initialised(dataset.id)" v-show="dataset.id == id">
12
- <span>
13
- <strong>Dataset <a :href="datasetUrl(dataset.id)" target="_blank">{{ dataset.id }}</a>:</strong> {{ dataset.description }}
14
- </span>
15
- <hr />
16
- <SimulationVuer :apiLocation="apiLocation" :id="dataset.id" />
17
- </div>
18
- </div>
19
- <hr />
20
- </div>
21
- </template>
22
-
23
- <script>
24
- import Vue from "vue";
25
- import SimulationVuer from "./components/SimulationVuer.vue";
26
- import { RadioButton, RadioGroup } from "element-ui";
27
-
28
- Vue.use(RadioButton);
29
- Vue.use(RadioGroup);
30
-
31
- export default {
32
- name: "App",
33
- components: {
34
- SimulationVuer,
35
- },
36
- data: function () {
37
- return {
38
- apiLocation: process.env.VUE_APP_API_LOCATION,
39
- datasets: [
40
- { id: 0, description: "Non-simulation dataset", },
41
- { id: 4, description: "Multi-scale rabbit cardiac electrophysiology models", },
42
- { id: 17, description: "Multi-scale human cardiac electrophysiology models", },
43
- { id: 78, description: "Kember Cardiac Nerve Model", },
44
- { id: 135, description: "Computational analysis of the human sinus node action potential - Model development and effects of mutations", },
45
- { id: 157, description: "Fabbri-based composite SAN model", },
46
- ],
47
- id: 0,
48
- ready: [],
49
- };
50
- },
51
- methods: {
52
- className(id) {
53
- return (id == this.datasets[0].id)?"first-dataset":"";
54
- },
55
- datasetUrl(id) {
56
- return `https://sparc.science/datasets/${id}?type=dataset`;
57
- },
58
- initialised(id) {
59
- if (this.ready.includes(id)) {
60
- return true;
61
- }
62
-
63
- if (this.id == id) {
64
- this.ready.push(id);
65
- }
66
-
67
- return this.ready.includes(id);
68
- },
69
- },
70
- };
71
- </script>
72
-
73
- <style>
74
- #app {
75
- font-family: Avenir, Helvetica, Arial, sans-serif;
76
- -webkit-font-smoothing: antialiased;
77
- -moz-osx-font-smoothing: grayscale;
78
- color: #2c3e50;
79
- }
80
- .el-radio-button__inner {
81
- background-color: #f9f2fc;
82
- border-color: #8300bf;
83
- box-shadow: -1px 0 0 0 #8300bf !important;
84
- color: #8300bf;
85
- }
86
- .first-dataset > .el-radio-button__inner {
87
- border-left: 1px solid #8300bf !important;
88
- }
89
- .el-radio-button__orig-radio:checked+.el-radio-button__inner {
90
- background-color: #8300bf;
91
- border-color: #8300bf;
92
- color: white;
93
- }
94
- .el-radio-button__inner:hover {
95
- color: #8300bf;
96
- }
97
- a {
98
- color: #2c3e50;
99
- }
100
- div.app {
101
- text-align: center;
102
- }
103
- </style>
1
+ <template>
2
+ <div id="app">
3
+ <div class="app">
4
+ <h1>SimulationVuer</h1>
5
+ <el-radio-group v-model="id" size="small">
6
+ <el-radio-button :class="className(dataset.id)" v-for="dataset in datasets" v-bind:key="dataset.id" :label="dataset.id" />
7
+ </el-radio-group>
8
+ </div>
9
+ <hr />
10
+ <div v-for="dataset in datasets" v-bind:key="dataset.id">
11
+ <div v-if="initialised(dataset.id)" v-show="dataset.id == id">
12
+ <span>
13
+ <strong>Dataset <a :href="datasetUrl(dataset.id)" target="_blank">{{ dataset.id }}</a>:</strong> {{ dataset.description }}
14
+ </span>
15
+ <hr />
16
+ <SimulationVuer :apiLocation="apiLocation" :id="dataset.id" />
17
+ </div>
18
+ </div>
19
+ <hr />
20
+ </div>
21
+ </template>
22
+
23
+ <script>
24
+ import SimulationVuer from "./components/SimulationVuer.vue";
25
+ import { ElRadioButton, ElRadioGroup } from "element-plus";
26
+
27
+ export default {
28
+ name: "App",
29
+ components: {
30
+ SimulationVuer,
31
+ ElRadioButton,
32
+ ElRadioGroup,
33
+ },
34
+ data: function () {
35
+ return {
36
+ apiLocation: process.env.VUE_APP_API_LOCATION,
37
+ datasets: [
38
+ { id: 0, description: "Non-simulation dataset", },
39
+ { id: 4, description: "Multi-scale rabbit cardiac electrophysiology models", },
40
+ { id: 17, description: "Multi-scale human cardiac electrophysiology models", },
41
+ { id: 78, description: "Kember Cardiac Nerve Model", },
42
+ { id: 135, description: "Computational analysis of the human sinus node action potential - Model development and effects of mutations", },
43
+ { id: 157, description: "Fabbri-based composite SAN model", },
44
+ ],
45
+ id: 0,
46
+ ready: [],
47
+ };
48
+ },
49
+ methods: {
50
+ className(id) {
51
+ return (id == this.datasets[0].id)?"first-dataset":"";
52
+ },
53
+ datasetUrl(id) {
54
+ return `https://sparc.science/datasets/${id}?type=dataset`;
55
+ },
56
+ initialised(id) {
57
+ if (this.ready.includes(id)) {
58
+ return true;
59
+ }
60
+
61
+ if (this.id == id) {
62
+ this.ready.push(id);
63
+ }
64
+
65
+ return this.ready.includes(id);
66
+ },
67
+ },
68
+ };
69
+ </script>
70
+
71
+ <style>
72
+ #app {
73
+ font-family: Avenir, Helvetica, Arial, sans-serif;
74
+ -webkit-font-smoothing: antialiased;
75
+ -moz-osx-font-smoothing: grayscale;
76
+ color: #2c3e50;
77
+ }
78
+ .el-radio-button__inner {
79
+ background-color: #f9f2fc;
80
+ border-color: #8300bf;
81
+ box-shadow: -1px 0 0 0 #8300bf !important;
82
+ color: #8300bf;
83
+ }
84
+ .first-dataset > .el-radio-button__inner {
85
+ border-left: 1px solid #8300bf !important;
86
+ }
87
+ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
88
+ background-color: #8300bf;
89
+ border-color: #8300bf;
90
+ color: white;
91
+ }
92
+ .el-radio-button__inner:hover {
93
+ color: #8300bf;
94
+ }
95
+ a {
96
+ color: #2c3e50;
97
+ }
98
+ div.app {
99
+ text-align: center;
100
+ }
101
+ </style>
package/src/assets/_variables.scss CHANGED
@@ -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;
32
- $app-secondary-color: $darkBlue;
33
- $text-color: $grey;
34
- $input-text: $grey;
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;
32
+ $app-secondary-color: $darkBlue;
33
+ $text-color: $grey;
34
+ $input-text: $grey;
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;
package/src/assets/styles.scss CHANGED
@@ -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
+