@abi-software/simulationvuer 0.5.0 → 0.5.3

package/src/components/SimulationVuer.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="simulation-vuer" v-loading="simulationBeingComputed" element-loading-text="Loading simulation results...">
-    <p v-if="!hasValidJson" class="default error"><span class="error">Error:</span> an unknown or invalid model was provided.</p>
-    <div class="main" v-if="hasValidJson">
+  <div class="simulation-vuer" v-loading="showUserMessage" :element-loading-text="userMessage">
+    <p v-if="!hasValidSimulationUiInformation && !showUserMessage" class="default error"><span class="error">Error:</span> an unknown or invalid model was provided.</p>
+    <div class="main" v-if="hasValidSimulationUiInformation">
       <div class="main-left">
         <p class="default title">{{title}}</p>
         <el-divider></el-divider>
         <p class="default input-parameters">Input parameters</p>
+        <div>
+          <SimulationVuerInput v-for="(input, index) in simulationUiInformation.input" :defaultValue="input.defaultValue" :firstScalarInput="firstScalarInput[index]" :key="`input-${index}`" :name="input.name" :maximumValue="input.maximumValue" :minimumValue="input.minimumValue" :possibleValues="input.possibleValues" />
+        </div>
         <div ref="input" />
         <div class="primary-button">
           <el-button type="primary" size="mini" @click="runSimulation()">Run simulation</el-button>
@@ -18,10 +21,10 @@
         </div>
         <p class="default note">Additional parameters are available on oSPARC</p>
       </div>
-      <div class="main-right" ref="output" v-show="simulationValid">
-        <PlotVuer v-for="(outputPlot, index) in json.output.plots" :key="`output-${index}`" :layout-input="layout[index]" :dataInput="simulationData[index]" :plotType="'plotly-only'" />
+      <div class="main-right" ref="output" v-show="isSimulationValid">
+        <PlotVuer v-for="(outputPlot, index) in simulationUiInformation.output.plots" :key="`output-${index}`" :layout-input="layout[index]" :dataInput="simulationData[index]" :plotType="'plotly-only'" />
       </div>
-      <div class="main-right" v-show="!simulationValid">
+      <div class="main-right" v-show="!isSimulationValid">
         <p class="default error"><span class="error">Error:</span> <span v-html="errorMessage"></span>.</p>
       </div>
     </div>
@@ -32,28 +35,21 @@
 import Vue from "vue";
 import { PlotVuer } from "@abi-software/plotvuer";
 import "@abi-software/plotvuer/dist/plotvuer.css";
-import { Aside, Button, Container, Divider, InputNumber, Loading, Main, Option, Select, Slider } from "element-ui";
-import { jsonForNormalModel, jsonForCompositeModel } from "./configuration.js";
+import SimulationVuerInput from "./SimulationVuerInput.vue";
+import { Button, Divider, Loading } from "element-ui";
 import { evaluateValue, evaluateSimulationValue } from "./common.js";
 import { validJson } from "./json.js";
-import Ui from "./ui.js";
-import { prepareForUi } from "./ui.js";
+import { initialiseUi, finaliseUi } from "./ui.js";
 
-Vue.use(Aside);
 Vue.use(Button);
-Vue.use(Container);
 Vue.use(Divider);
-Vue.use(InputNumber);
 Vue.use(Loading);
-Vue.use(Main);
-Vue.use(Option);
-Vue.use(Select);
-Vue.use(Slider);
 
 export default {
   name: "SimulationVuer",
   components: {
     PlotVuer,
+    SimulationVuerInput,
   },
   props: {
     apiLocation: {
@@ -67,15 +63,18 @@ export default {
   },
   data: function() {
     return {
-      mode: 0, //---GRY--- TO BE DELETED!
-      json: {},
-      hasValidJson: true,
       errorMessage: "",
+      firstScalarInput: [],
+      hasFinalisedUi: false,
+      hasValidSimulationUiInformation: false,
+      isMounted: false,
+      isSimulationValid: true,
       layout: [],
+      showUserMessage: false,
       simulationData: [],
       simulationDataId: {},
-      simulationBeingComputed: false,
-      simulationValid: true,
+      simulationUiInformation: {},
+      userMessage: "",
       title: (this.entry !== undefined)?this.entry.name:"",
       ui: null,
     };
@@ -88,41 +87,42 @@ export default {
       window.open(this.entry.dataset, "_blank");
     },
     runSimulation() {
-      this.simulationBeingComputed = true;
+      this.userMessage = "Loading simulation results...";
+      this.showUserMessage = true;
 
       let request = {
         model_url: this.entry.resource,
         json_config: {},
       };
 
-      // Specify the ending point and point interval for the normal mode (since
-      // our resource is a CellML file).
+      // Specify the ending point and point interval, if we have some simulation
+      // data.
 
-      if (this.json.simulation !== undefined) {
+      if (this.simulationUiInformation.simulation !== undefined) {
         request.json_config.simulation = {
-          "Ending point": this.json.simulation.endingPoint,
-          "Point interval": this.json.simulation.pointInterval,
+          "Ending point": this.simulationUiInformation.simulation.endingPoint,
+          "Point interval": this.simulationUiInformation.simulation.pointInterval,
         };
       }
 
       // Specify the simulation parameters.
 
-      if (this.json.parameters != undefined) {
+      if (this.simulationUiInformation.parameters != undefined) {
         request.json_config.parameters = {};
 
-        this.json.parameters.forEach((parameter) => {
-          request.json_config.parameters[parameter.name] = evaluateValue(this.ui, parameter.value);
+        this.simulationUiInformation.parameters.forEach((parameter) => {
+          request.json_config.parameters[parameter.name] = evaluateValue(this, parameter.value);
         });
       }
 
       // Specify what we want to retrieve.
 
-      if (this.json.output.data !== undefined)  {
+      if (this.simulationUiInformation.output.data !== undefined)  {
         let index = -1;
 
         request.json_config.output = [];
 
-        this.json.output.data.forEach((outputData) => {
+        this.simulationUiInformation.output.data.forEach((outputData) => {
           request.json_config.output[++index] = outputData.name;
         });
       }
@@ -135,20 +135,20 @@ export default {
       xmlhttp.setRequestHeader("Content-type", "application/json");
       xmlhttp.onreadystatechange = () => {
         if (xmlhttp.readyState === 4) {
-          this.simulationBeingComputed = false;
+          this.showUserMessage = false;
 
           if (xmlhttp.status === 200) {
             let response = JSON.parse(xmlhttp.responseText);
 
-            this.simulationValid = response.status === "ok";
+            this.isSimulationValid = response.status === "ok";
 
-            if (this.simulationValid) {
+            if (this.isSimulationValid) {
               // Retrieve and post-process the simulation data.
 
               let index = -1;
               let iMax = response.results[this.simulationDataId[Object.keys(this.simulationDataId)[0]]].length;
 
-              this.json.output.plots.forEach((outputPlot) => {
+              this.simulationUiInformation.output.plots.forEach((outputPlot) => {
                 let xValue = [];
                 let yValue = [];
 
@@ -168,7 +168,7 @@ export default {
               this.errorMessage = response.description;
             }
           } else {
-            this.simulationValid = false;
+            this.isSimulationValid = false;
 
             this.errorMessage = xmlhttp.statusText.toLowerCase() + " (<a href='https://httpstatuses.com/" + xmlhttp.status + "/' target='_blank'>" + xmlhttp.status + "</a>)";
           }
@@ -178,39 +178,58 @@ export default {
     },
   },
   created: function() {
-    // Manually (for now) specify the JSON configuration to be used by either
-    // the normal model or the composite model.
-
-    this.mode = -1;
-
-    if (this.entry !== undefined) {
-      if (this.entry.resource === "https://models.physiomeproject.org/workspace/486/rawfile/55879cbc485e2d4c41f3dc6d60424b849f94c4ee/HumanSAN_Fabbri_Fantini_Wilders_Severi_2017.cellml") {
-        this.mode = 0;
-        this.json = jsonForNormalModel();
-      } else if (this.entry.resource === "https://models.physiomeproject.org/workspace/698/rawfile/f3fc911063ac72ed44e84c0c5af28df41c25d452/fabbri_et_al_based_composite_SAN_model.sedml") {
-        this.mode = 1;
-        this.json = jsonForCompositeModel();
-      }
-    }
+    this.userMessage = "Retrieving UI information...";
+    this.showUserMessage = true;
+
+    // Retrieve the simulation UI file for the given dataset.
+
+    let xmlhttp = new XMLHttpRequest();
 
-    // Make sure that the JSON configuration is valid.
+    xmlhttp.open("GET", this.apiLocation + "/simulation_ui_file/" + this.entry.datasetId, true);
+    xmlhttp.setRequestHeader("Content-type", "application/json");
+    xmlhttp.onreadystatechange = () => {
+      if (xmlhttp.readyState === 4) {
+        // Keep track of the simulation UI information.
 
-    this.hasValidJson = validJson(this.json);
+        this.simulationUiInformation = JSON.parse(xmlhttp.responseText);
 
-    if (!this.hasValidJson) {
-      return;
-    }
+        // Make sure that the simulation UI information is valid.
 
-    // Prepare ourselves for the UI by initialising some data.
+        this.hasValidSimulationUiInformation = validJson(this.simulationUiInformation);
+
+        if (!this.hasValidSimulationUiInformation) {
+          this.showUserMessage = false;
+
+          return;
+        }
 
-    prepareForUi(this);
+        // Initialise our UI.
+
+        initialiseUi(this);
+
+        // Finalise our UI.
+        // Note: we try both here and in the mounded() function since we have no
+        //       idea how long it's going to take to retrieve the simulation UI
+        //       information.
+
+        this.$nextTick(() => {
+          finaliseUi(this);
+
+          this.showUserMessage = false;
+        });
+      }
+    };
+    xmlhttp.send();
   },
   mounted: function() {
-    // Finish mounting by creating the UI for the given simulation dataset.
+    // Finalise our UI.
+    // Note: we try both here and in the created() function since we have no
+    //       idea how long it's going to take to retrieve the simulation UI
+    //       information.
+
+    this.isMounted = true;
 
-    if (this.hasValidJson) {
-      this.ui = new Ui(this);
-    }
+    finaliseUi(this);
   },
 };
 </script>
@@ -222,51 +241,9 @@ export default {
   box-shadow: -3px 2px 4px #00000040;
 }
 >>> .el-divider {
-  margin: -8px 0 8px 0;
+  margin: -8px 0 8px 0 !important;
   width: 191px;
 }
->>> .el-input-number.scalar {
-  margin-top: -8px;
-  width: 0;
-  height: 0;
-}
->>> .el-input-number.scalar .el-input {
-  width: 60px;
-}
->>> .el-input-number.scalar .el-input__inner:focus {
-  border-color: #8300bf;
-}
->>> .el-select.discrete {
-  margin-bottom: 16px;
-}
->>> .el-slider {
-  width: 108px;
-  margin-top: -12px;
-  margin-left: 8px;
-}
->>> .el-slider__bar {
-  background-color: #8300bf;
-}
->>> .el-slider__button {
-  border-color: #8300bf;
-}
-.discrete {
-  margin-left: 8px;
-}
-.discrete >>> .el-input__inner {
-  font-family: Asap, sans-serif;
-}
-.discrete >>> .el-input__inner:focus,
-.discrete >>> .el-input.is-focus .el-input__inner {
-  border-color: #8300bf;
-}
-.discrete-popper .el-select-dropdown__item {
-  font-family: Asap, sans-serif;
-}
-.discrete-popper .el-select-dropdown__item.selected {
-  font-weight: normal;
-  color: #8300bf;
-}
 div.main {
   display: grid;
   --mainLeftWidth: 224px;
@@ -309,10 +286,6 @@ div.main-right.x9 {
 >>> div.main-right div.controls {
   height: 0;
 }
-div.plot-vuer {
-  display: grid;
-  width: 100%;
-}
 div.primary-button,
 div.secondary-button {
   display: flex;
@@ -344,11 +317,6 @@ div.secondary-button .el-button:hover {
 div.simulation-vuer {
   height: 100%;
 }
-div.sliders-and-fields {
-  display: grid;
-  grid-template-columns: 132px auto;
-  width: 191px;
-}
 p.default {
   font-family: Asap, sans-serif;
   letter-spacing: 0;
@@ -358,12 +326,6 @@ p.default {
 p.error {
   margin-left: 16px;
 }
-p.first-scalar,
-p.scalar {
-  grid-column-start: 1;
-  grid-column-end: 3;
-  margin-bottom: 8px;
-}
 p.note {
   font-size: 12px;
   line-height: 16px;
@@ -376,31 +338,13 @@ p.input-parameters {
 p.title {
   line-height: 20px;
 }
-p.discrete {
-  margin-top: 0;
-  margin-bottom: 4px;
-}
-p.first-scalar {
-  margin-top: 0;
-}
-p.scalar {
-  margin-top: 6px;
-}
 span.error {
   font-weight: 500 /* Medium */;
 }
 </style>
-<style scoped src="../styles/purple/aside.css">
-</style>
 <style scoped src="../styles/purple/button.css">
 </style>
-<style scoped src="../styles/purple/container.css">
-</style>
-<style scoped src="../styles/purple/input-number.css">
-</style>
-<style scoped src="../styles/purple/option.css">
-</style>
-<style scoped src="../styles/purple/select.css">
+<style scoped src="../styles/purple/divider.css">
 </style>
-<style scoped src="../styles/purple/slider.css">
+<style scoped src="../styles/purple/loading.css">
 </style>

package/src/components/SimulationVuerInput.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <p :class="labelClasses">{{ name }}</p>
+    <el-select class="discrete" popper-class="discrete-popper" size="mini" v-if="isDiscrete" v-model="vModel" :disabled="!enabled" :popper-append-to-body="false" @change="updateUi()">
+      <el-option v-for="possibleValue in possibleValues" :key="possibleValue.value" :label="possibleValue.name" :value="possibleValue.value" />
+    </el-select>
+    <div class="sliders-and-fields" v-if="!isDiscrete">
+      <el-slider v-model="vModel" :disabled="!enabled" :max="maximumValue" :min="minimumValue" :show-input="false" :show-tooltip="false" @change="updateUi()" />
+      <el-input-number class="scalar" size="mini" v-model="vModel" :controls="false" :disabled="!enabled" :max="maximumValue" :min="minimumValue" @input="updateUi()" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import { InputNumber, Option, Select, Slider } from "element-ui";
+import { updateUi } from "./ui.js";
+
+Vue.use(InputNumber);
+Vue.use(Option);
+Vue.use(Select);
+Vue.use(Slider);
+
+export default {
+  name: "SimulationVuerInput",
+  props: {
+    defaultValue: {
+      required: true,
+      type: Number,
+    },
+    firstScalarInput: {
+      type: Boolean,
+    },
+    maximumValue: {
+      type: Number,
+    },
+    minimumValue: {
+      type: Number,
+    },
+    name: {
+      required: true,
+      type: String,
+    },
+    possibleValues: {
+      type: Array,
+    },
+  },
+  data: function() {
+    return {
+      enabled: true,
+      isDiscrete: this.possibleValues !== undefined,
+      labelClasses: "default " + ((this.possibleValues !== undefined)?"discrete":this.firstScalarInput?"first-scalar":"scalar"),
+      vModel: this.defaultValue,
+    };
+  },
+  methods: {
+    updateUi: function() {
+      updateUi(this.$parent);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+@import url("//unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css");
+>>> .el-input-number.scalar {
+  margin-top: -8px;
+  width: 0;
+}
+>>> .el-input-number.scalar .el-input {
+  width: 60px;
+}
+>>> .el-input-number.scalar .el-input__inner:focus {
+  border-color: #8300bf;
+}
+>>> .el-select.discrete {
+  margin-bottom: 16px;
+}
+>>> .el-slider {
+  width: 108px;
+  margin-top: -12px;
+  margin-left: 8px;
+}
+>>> .el-slider__bar {
+  background-color: #8300bf;
+}
+>>> .el-slider__button {
+  border-color: #8300bf;
+}
+.discrete {
+  margin-left: 8px;
+}
+.discrete >>> .el-input__inner {
+  font-family: Asap, sans-serif;
+}
+.discrete >>> .el-input__inner:focus,
+.discrete >>> .el-input.is-focus .el-input__inner {
+  border-color: #8300bf;
+}
+.discrete-popper .el-select-dropdown__item {
+  font-family: Asap, sans-serif;
+}
+.discrete-popper .el-select-dropdown__item.selected {
+  font-weight: normal;
+  color: #8300bf;
+}
+.scalar >>> .el-input__inner {
+  text-align: center;
+}
+div.simulation-vuer {
+  height: 100%;
+}
+div.sliders-and-fields {
+  display: grid;
+  grid-template-columns: 132px auto;
+  width: 191px;
+  height: 26px;
+}
+p.default {
+  font-family: Asap, sans-serif;
+  letter-spacing: 0;
+  margin: 16px 0;
+  text-align: start;
+}
+p.first-scalar,
+p.scalar {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  margin-bottom: 8px;
+}
+p.discrete {
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+p.first-scalar {
+  margin-top: 0;
+}
+p.scalar {
+  margin-top: 6px;
+}
+</style>
+<style scoped src="../styles/purple/input-number.css">
+</style>
+<style scoped src="../styles/purple/option.css">
+</style>
+<style scoped src="../styles/purple/select.css">
+</style>
+<style scoped src="../styles/purple/slider.css">
+</style>

package/src/components/common.js

@@ -8,20 +8,20 @@ function doEvaluateValue(value, from, to) {
   return value;
 }
 
-export function evaluateValue(ui, value) {
-  ui.discreteElements.forEach((discreteElement) => {
-    value = doEvaluateValue(value, discreteElement.id, discreteElement.select.vModel);
-  });
+export function evaluateValue(parent, value) {
+  let index = -1;
+
+  parent.simulationUiInformation.input.forEach((input) => {
+    ++index;
 
-  ui.scalarElements.forEach((scalarElement) => {
-    value = doEvaluateValue(value, scalarElement.id, scalarElement.input_number.vModel);
+    value = doEvaluateValue(value, input.id, parent.$children[index].vModel);
   });
 
   return Function("return " + value + ";")();
 }
 
 export function evaluateSimulationValue(parent, results, value, i) {
-  parent.json.output.data.forEach((data) => {
+  parent.simulationUiInformation.output.data.forEach((data) => {
     value = doEvaluateValue(value, data.id, results[parent.simulationDataId[data.id]][i]);
   });
 

package/src/components/json.js

@@ -17,6 +17,9 @@ export function validJson(json) {
                   required: true,
                   type: "number",
                 },
+                enabled: {
+                  type: "string",
+                },
                 id: {
                   type: "string",
                 },
@@ -76,16 +79,19 @@ export function validJson(json) {
           type: "object",
         },
         minItems: 1,
+        required: true,
         type: "array",
       },
       output: {
         additionalProperties: false,
+        minItems: 1,
         properties: {
           data: {
             items: {
               additionalProperties: false,
               properties: {
                 id: {
+                  required: true,
                   type: "string",
                 },
                 name: {
@@ -95,6 +101,8 @@ export function validJson(json) {
               },
               type: "object",
             },
+            minItems: 1,
+            required: true,
             type: "array",
           },
           plots: {