@abi-software/simulationvuer 0.6.3 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/simulationvuer",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --mode static",
@@ -9,11 +9,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@abi-software/plotvuer": "^0.2.45",
+    "@abi-software/plotvuer": "^0.2.46",
     "element-ui": "^2.14.1",
     "jsonschema": "^1.4.0",
-    "vue": "^2.6.11",
-    "vue2-perfect-scrollbar": "^1.5.5"
+    "vue": "^2.6.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

package/src/components/SimulationVuer.vue

@@ -6,10 +6,8 @@
         <p class="default name">{{name}}</p>
         <el-divider></el-divider>
         <p class="default input-parameters">Input parameters</p>
-        <div class="input-frame">
-          <PerfectScrollbar ref="input" class="input" :options="perfectScollbarOptions">
-            <SimulationVuerInput v-for="(input, index) in simulationUiInfo.input" :defaultValue="input.defaultValue" :key="`input-${index}`" :name="input.name" :maximumValue="input.maximumValue" :minimumValue="input.minimumValue" :possibleValues="input.possibleValues" :stepValue="input.stepValue" />
-          </PerfectScrollbar>
+        <div class="input scrollbar">
+          <SimulationVuerInput v-for="(input, index) in simulationUiInfo.input" :defaultValue="input.defaultValue" :key="`input-${index}`" :name="input.name" :maximumValue="input.maximumValue" :minimumValue="input.minimumValue" :possibleValues="input.possibleValues" :stepValue="input.stepValue" />
         </div>
         <div class="primary-button">
           <el-button type="primary" size="mini" @click="startSimulation()">Run Simulation</el-button>
@@ -41,13 +39,10 @@ import { Button, Divider, Loading } from "element-ui";
 import { evaluateValue, evaluateSimulationValue, OPENCOR_SOLVER_NAME } from "./common.js";
 import { validJson } from "./json.js";
 import { initialiseUi, finaliseUi } from "./ui.js";
-import PerfectScrollbar from "vue2-perfect-scrollbar";
-import "vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css";
 
 Vue.use(Button);
 Vue.use(Divider);
 Vue.use(Loading.directive);
-Vue.use(PerfectScrollbar);
 
 export default {
   name: "SimulationVuer",
@@ -70,7 +65,7 @@ export default {
     let name = undefined;
     let uuid = undefined;
 
-    xmlhttp.open("GET", this.apiLocation + "/sim/dataset/" + this.id + "/nodebug", false);
+    xmlhttp.open("GET", this.apiLocation + "/sim/dataset/" + this.id, false);
     xmlhttp.setRequestHeader("Content-type", "application/json");
     xmlhttp.onreadystatechange = () => {
       if (xmlhttp.readyState === 4) {
@@ -399,7 +394,7 @@ export default {
 }
 ::v-deep .el-divider {
   margin: -8px 0 8px 0 !important;
-  width: 202px;
+  width: 210px;
 }
 ::v-deep .el-loading-spinner {
   .path {
@@ -410,15 +405,13 @@ export default {
   }
 }
 div.input {
+  border: 1px solid #dcdfe6;
   padding: 4px;
   height: 300px;
 }
-div.input-frame {
-  border: 1px solid #dcdfe6;
-}
 div.main {
   display: grid;
-  --mainLeftWidth: 235px;
+  --mainLeftWidth: 243px;
   grid-template-columns: var(--mainLeftWidth) calc(100% - var(--mainLeftWidth));
   height: 100%;
 }
@@ -462,7 +455,7 @@ div.primary-button,
 div.secondary-button {
   display: flex;
   justify-content: flex-end;
-  width: 202px;
+  width: 210px;
 }
 div.primary-button {
   margin-top: 14px;
@@ -486,6 +479,24 @@ div.secondary-button .el-button:hover {
   background-color: #f9f2fc;
   color: #8300bf;
 }
+div.scrollbar {
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}
+div.scrollbar::-webkit-scrollbar {
+  width: 8px;
+  right: -8px;
+  background-color: #f5f5f5;
+}
+div.scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  background-color: #979797;
+}
+div.scrollbar::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
 div.simulation-vuer {
   height: 100%;
 }

package/src/components/SimulationVuerInput.vue

@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     updateUi: function() {
-      updateUi(this.$parent.$parent);
+      updateUi(this.$parent);
     },
   },
 };

package/src/components/common.js

@@ -16,7 +16,7 @@ export function evaluateValue(parent, value) {
   parent.simulationUiInfo.input.forEach((input) => {
     ++index;
 
-    value = doEvaluateValue(value, input.id, parent.$refs.input.$children[index].vModel);
+    value = doEvaluateValue(value, input.id, parent.$children[index].vModel);
   });
 
   return Function("return " + value + ";")();

package/src/components/ui.js

@@ -13,6 +13,14 @@ export function initialiseUi(parent) {
     ++index;
 
     parent.layout[index] = {
+      margin: {
+        t: 5,
+        l: 55,
+        r: 55,
+        b: 90,
+        pad: 4
+      },
+      dragmode: "pan",
       xaxis: {
         title: {
           text: outputPlot.xAxisTitle,
@@ -48,15 +56,6 @@ export function finaliseUi(parent) {
 
     updateUi(parent);
 
-    // Make sure that the (vertical) scrollbar's thumb is of the right length.
-    // Note: it may indeed be of the incorrect length if we hid some components
-    //       in updateUi().
-
-    parent.$nextTick(() => {
-      parent.$refs.input.$el.scroll(0, 1);
-      parent.$refs.input.$el.scroll(0, -1);
-    });
-
     parent.hasFinalisedUi = true;
   }
 }
@@ -72,7 +71,7 @@ export function updateUi(parent) {
     parent.simulationUiInfo.input.forEach((input) => {
       ++index;
 
-      parent.$refs.input.$children[index].visible = (input.visible === undefined)?true:evaluateValue(parent, input.visible);
+      parent.$children[index].visible = (input.visible === undefined)?true:evaluateValue(parent, input.visible);
     });
   });
 }

package/vue.config.js

@@ -3,7 +3,7 @@ const nodeExternals = require('webpack-node-externals');
 module.exports = {
   configureWebpack: config => {
       if (process.env.NODE_ENV === 'production') {
-        config.externals =  [ nodeExternals({allowlist: [/^element-ui/, "@abi-software/plotvuer", "vue2-perfect-scrollbar"]}) ];
+        config.externals =  [ nodeExternals({allowlist: [/^element-ui/, "@abi-software/plotvuer"]}) ];
       }
   },
   chainWebpack: config => {
@@ -15,7 +15,7 @@ module.exports = {
       .use('base64-inline-loader')
       .loader('base64-inline-loader')
       .tap(options => {
-        // modify the options...    
+        // modify the options...
         return options
       })
       .end()