@abi-software/simulationvuer 0.7.0-vue-3-alpha.4 → 1.0.0

package/src/App.vue

@@ -1,101 +1,101 @@
-<template>
-  <div id="app">
-    <div class="app">
-      <h1>SimulationVuer</h1>
-      <el-radio-group v-model="id" size="small">
-        <el-radio-button :class="className(dataset.id)" v-for="dataset in datasets" v-bind:key="dataset.id" :label="dataset.id" />
-      </el-radio-group>
-    </div>
-    <hr />
-    <div v-for="dataset in datasets" v-bind:key="dataset.id">
-      <div v-if="initialised(dataset.id)" v-show="dataset.id == id">
-        <span>
-          <strong>Dataset <a :href="datasetUrl(dataset.id)" target="_blank">{{ dataset.id }}</a>:</strong> {{ dataset.description }}
-        </span>
-        <hr />
-        <SimulationVuer :apiLocation="apiLocation" :id="dataset.id" />
-      </div>
-    </div>
-    <hr />
-  </div>
-</template>
-
-<script>
-import SimulationVuer from "./components/SimulationVuer.vue";
-import { ElRadioButton, ElRadioGroup } from "element-plus";
-
-export default {
-  name: "App",
-  components: {
-    SimulationVuer,
-    ElRadioButton,
-    ElRadioGroup,
-  },
-  data: function () {
-    return {
-      apiLocation: import.meta.env.VITE_API_LOCATION,
-      datasets: [
-        { id: 0, description: "Non-simulation dataset", },
-        { id: 4, description: "Multi-scale rabbit cardiac electrophysiology models", },
-        { id: 17, description: "Multi-scale human cardiac electrophysiology models", },
-        { id: 78, description: "Kember Cardiac Nerve Model", },
-        { id: 135, description: "Computational analysis of the human sinus node action potential - Model development and effects of mutations", },
-        { id: 157, description: "Fabbri-based composite SAN model", },
-      ],
-      id: 0,
-      ready: [],
-    };
-  },
-  methods: {
-    className(id) {
-      return (id == this.datasets[0].id)?"first-dataset":"";
-    },
-    datasetUrl(id) {
-      return `https://sparc.science/datasets/${id}?type=dataset`;
-    },
-    initialised(id) {
-      if (this.ready.includes(id)) {
-        return true;
-      }
-
-      if (this.id == id) {
-        this.ready.push(id);
-      }
-
-      return this.ready.includes(id);
-    },
-  },
-};
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-.el-radio-button__inner {
-  background-color: #f9f2fc;
-  border-color: #8300bf;
-  box-shadow: -1px 0 0 0 #8300bf !important;
-  color: #8300bf;
-}
-.first-dataset > .el-radio-button__inner {
-  border-left: 1px solid #8300bf !important;
-}
-.el-radio-button__orig-radio:checked+.el-radio-button__inner {
-  background-color: #8300bf;
-  border-color: #8300bf;
-  color: white;
-}
-.el-radio-button__inner:hover {
-  color: #8300bf;
-}
-a {
-  color: #2c3e50;
-}
-div.app {
-  text-align: center;
-}
-</style>
+<template>
+  <div id="app">
+    <div class="app">
+      <h1>SimulationVuer</h1>
+      <el-radio-group v-model="id" size="small">
+        <el-radio-button :class="className(dataset.id)" v-for="dataset in datasets" v-bind:key="dataset.id" :label="dataset.id" />
+      </el-radio-group>
+    </div>
+    <hr />
+    <div v-for="dataset in datasets" v-bind:key="dataset.id">
+      <div v-if="initialised(dataset.id)" v-show="dataset.id == id">
+        <span>
+          <strong>Dataset <a :href="datasetUrl(dataset.id)" target="_blank">{{ dataset.id }}</a>:</strong> {{ dataset.description }}
+        </span>
+        <hr />
+        <SimulationVuer :apiLocation="apiLocation" :id="dataset.id" />
+      </div>
+    </div>
+    <hr />
+  </div>
+</template>
+
+<script>
+import SimulationVuer from "./components/SimulationVuer.vue";
+import { ElRadioButton, ElRadioGroup } from "element-plus";
+
+export default {
+  name: "App",
+  components: {
+    SimulationVuer,
+    ElRadioButton,
+    ElRadioGroup,
+  },
+  data: function () {
+    return {
+      apiLocation: import.meta.env.VITE_API_LOCATION,
+      datasets: [
+        { id: 0, description: "Non-simulation dataset", },
+        { id: 135, description: "Computational analysis of the human sinus node action potential - Model development and effects of mutations", },
+        { id: 157, description: "Fabbri-based composite SAN model", },
+        { id: 308, description: "Kember Cardiac Nerve Model", },
+        { id: 318, description: "Multi-scale rabbit cardiac electrophysiology models", },
+        { id: 320, description: "Multi-scale human cardiac electrophysiology models", },
+      ],
+      id: 0,
+      ready: [],
+    };
+  },
+  methods: {
+    className(id) {
+      return (id == this.datasets[0].id)?"first-dataset":"";
+    },
+    datasetUrl(id) {
+      return `https://sparc.science/datasets/${id}?type=dataset`;
+    },
+    initialised(id) {
+      if (this.ready.includes(id)) {
+        return true;
+      }
+
+      if (this.id == id) {
+        this.ready.push(id);
+      }
+
+      return this.ready.includes(id);
+    },
+  },
+};
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+.el-radio-button__inner {
+  background-color: #f9f2fc;
+  border-color: #8300bf;
+  box-shadow: -1px 0 0 0 #8300bf !important;
+  color: #8300bf;
+}
+.first-dataset > .el-radio-button__inner {
+  border-left: 1px solid #8300bf !important;
+}
+.el-radio-button__original-radio:checked+.el-radio-button__inner {
+  background-color: #8300bf;
+  border-color: #8300bf;
+  color: white;
+}
+.el-radio-button__inner:hover {
+  color: #8300bf;
+}
+a {
+  color: #2c3e50;
+}
+div.app {
+  text-align: center;
+}
+</style>

package/src/assets/_variables.scss

@@ -1,43 +1,43 @@
-// Primary colors
-$purple: #8300BF;
-$darkBlue: #24245B;
-$grey: #303133;
-
-// Secondary colors
-$lightPurple: #BC00FC;
-$blue: #0026FF;
-
-// Status colors
-$success: #5e9f69;
-$warning: #FF8400;
-$danger: #b51d09;
-
-// Text colors
-$neutralGrey: #616161;
-$mediumGrey: #606266;
-$lightGrey: #909399;
-
-// Line colors
-$lineColor1: #DCDFE6;
-$lineColor2: #E4E7ED;
-
-// Background colors
-$background: #F5F7FA;
-$cochlear: #FFFFFF;
-
-//Search box colors
-$darkGrey: #606266;
-
-$app-primary-color: $purple;
-$app-secondary-color: $darkBlue;
-$text-color: $grey;
-$input-text: $grey;
-
-$system-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
-$font-family: 'Asap', sans-serif;
-
-// Viewport Sizes
-$viewport-sm: 20rem;
-$viewport-md: 47rem;
-$viewport-lg: 64rem;
-$viewport-xlg: 120rem;
+// Primary colors
+$purple: #8300BF;
+$darkBlue: #24245B;
+$grey: #303133;
+
+// Secondary colors
+$lightPurple: #BC00FC;
+$blue: #0026FF;
+
+// Status colors
+$success: #5e9f69;
+$warning: #FF8400;
+$danger: #b51d09;
+
+// Text colors
+$neutralGrey: #616161;
+$mediumGrey: #606266;
+$lightGrey: #909399;
+
+// Line colors
+$lineColor1: #DCDFE6;
+$lineColor2: #E4E7ED;
+
+// Background colors
+$background: #F5F7FA;
+$cochlear: #FFFFFF;
+
+//Search box colors
+$darkGrey: #606266;
+
+$app-primary-color: $purple;
+$app-secondary-color: $darkBlue;
+$text-color: $grey;
+$input-text: $grey;
+
+$system-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+$font-family: 'Asap', sans-serif;
+
+// Viewport Sizes
+$viewport-sm: 20rem;
+$viewport-md: 47rem;
+$viewport-lg: 64rem;
+$viewport-xlg: 120rem;

package/src/assets/styles.scss

@@ -1,7 +1,6 @@
-@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
-
-@import '_variables';
-
-/* icon font path, required */
-$--color-primary: $app-primary-color !default;
-
+@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
+
+@import '_variables';
+
+/* icon font path, required */
+$--color-primary: $app-primary-color !default;