@abi-software/simulationvuer 0.4.5 → 0.5.1

package/src/components/SimulationVuer.vue

@@ -1,35 +1,15 @@
 <template>
-  <div class="simulation-vuer" v-loading="simulationBeingComputed" :element-loading-text="simulationBeingComputedLabel">
-    <p v-show="mode === -1" class="default error"><span class="error">Error:</span> an unknown model was provided.</p>
-    <div class="main" v-show="mode !== -1">
+  <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 v-show="mode === 0">
-          <p class="default simulation-mode">Simulation mode</p>
-          <el-select class="simulation-mode" popper-class="simulation-mode-popper" :popper-append-to-body="false" v-model="simulationMode" size="mini" @change="simulationModeChanged()">
-            <el-option v-for="simulationMode in simulationModes" :key="simulationMode.value" :label="simulationMode.label" :value="simulationMode.value" />
-          </el-select>
-          <div class="sliders-and-fields">
-            <p class="default first-slider-and-field">Stimulation level</p>
-            <el-slider v-model="stimulationLevel" :max="10" :show-tooltip="false" :show-input="false" :disabled="simulationMode == 0" />
-            <el-input-number class="slider-and-field" v-model="stimulationLevel" size="mini" :controls="false" :min="0" :max="10" :disabled="simulationMode == 0" />
-          </div>
-        </div>
-        <div v-show="mode === 1">
-          <div class="sliders-and-fields">
-            <p class="default first-slider-and-field">Spike frequency</p>
-            <el-slider v-model="simulationSpikeFrequency" :max="1000" :show-tooltip="false" :show-input="false" />
-            <el-input-number class="slider-and-field" v-model="simulationSpikeFrequency" size="mini" :controls="false" :min="0" :max="1000" />
-            <p class="default slider-and-field">Spike number</p>
-            <el-slider v-model="simulationSpikeNumber" :max="30" :show-tooltip="false" :show-input="false" />
-            <el-input-number class="slider-and-field" v-model="simulationSpikeNumber" size="mini" :controls="false" :min="0" :max="30" />
-            <p class="default slider-and-field">Spike amplitude</p>
-            <el-slider v-model="simulationSpikeAmplitude" :max="30" :show-tooltip="false" :show-input="false" />
-            <el-input-number class="slider-and-field" v-model="simulationSpikeAmplitude" size="mini" :controls="false" :min="0" :max="30" />
-          </div>
+        <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>
         </div>
@@ -39,16 +19,12 @@
         <div class="secondary-button">
           <el-button size="mini" @click="viewDataset()">View dataset</el-button>
         </div>
-        <p class="default note">{{note}}</p>
-      </div>
-      <div class="main-right" v-if="mode === 0" v-show="simulationValid">
-        <PlotVuer :layout-input="simulationPotentialLayout" :dataInput="simulationPotentialData" :plotType="'plotly-only'" />
+        <p class="default note">Additional parameters are available on oSPARC</p>
       </div>
-      <div class="main-right composite" v-if="mode === 1" v-show="simulationValid">
-        <PlotVuer :layout-input="simulationSpikeLayout" :dataInput="simulationSpikeData" :plotType="'plotly-only'" />
-        <PlotVuer :layout-input="simulationPotentialLayout" :dataInput="simulationPotentialData" :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>
@@ -59,106 +35,48 @@
 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";
-
-var NoSimulationData = [{}];
+import SimulationVuerInput from "./SimulationVuerInput.vue";
+import { Button, Divider, Loading } from "element-ui";
+import { evaluateValue, evaluateSimulationValue } from "./common.js";
+import { validJson } from "./json.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: {
+      required: true,
       type: String,
-      default: "",
     },
     entry: {
-      /**
-       * Object containing information for the current simulation.
-       */
-      entry: Object,
+      required: true,
+      type: Object,
     },
   },
-  data: function () {
-    let title = this.entry?this.entry.name:"";
-
+  data: function() {
     return {
-      mode: 0,
       errorMessage: "",
-      note: "Additional parameters are available on oSPARC",
-      stimulationLevel: 0,
-      simulationMode: 0,
-      simulationModes: [
-        {
-          label: "Normal sinus rhythm",
-          value: 0,
-        },
-        {
-          label: "Stellate stimulation",
-          value: 1,
-        },
-        {
-          label: "Vagal stimulation",
-          value: 2,
-        },
-      ],
-      simulationSpikeLayout: {
-        xaxis: {
-          title: {
-            text: "Time (s)",
-            font: {
-              size: 10,
-            },
-          },
-        },
-        yaxis: {
-          title: {
-            text: "Spike amplitude",
-            font: {
-              size: 10,
-            },
-          }
-        },
-      },
-      simulationSpikeFrequency: 300,
-      simulationSpikeNumber: 10,
-      simulationSpikeAmplitude: 10, // The real value is 100 times smaller.
-      simulationSpikeData: NoSimulationData,
-      simulationPotentialLayout: {
-        xaxis: {
-          title: {
-            text: "Time (s)",
-            font: {
-              size: 10,
-            },
-          },
-        },
-        yaxis: {
-          title: {
-            text: "Membrane potential (mV)",
-            font: {
-              size: 10,
-            },
-          }
-        },
-      },
-      simulationPotentialData: NoSimulationData,
-      simulationBeingComputed: false,
-      simulationBeingComputedLabel: "Loading simulation results...",
-      simulationValid: true,
-      title: title,
+      firstScalarInput: [],
+      hasFinalisedUi: false,
+      hasValidSimulationUiInformation: false,
+      isMounted: false,
+      isSimulationValid: true,
+      layout: [],
+      showUserMessage: false,
+      simulationData: [],
+      simulationDataId: {},
+      simulationUiInformation: {},
+      userMessage: "",
+      title: (this.entry !== undefined)?this.entry.name:"",
+      ui: null,
     };
   },
   methods: {
@@ -168,105 +86,89 @@ export default {
     viewDataset() {
       window.open(this.entry.dataset, "_blank");
     },
-    simulationModeChanged() {
-      this.simulationPotentialData = NoSimulationData;
-      this.simulationValid = true;
-    },
     runSimulation() {
-      this.simulationBeingComputed = true;
+      this.userMessage = "Loading simulation results...";
+      this.showUserMessage = true;
 
-      var request = {
+      let request = {
         model_url: this.entry.resource,
-        json_config: {
-          output: ["Membrane/V"],
-        },
+        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.mode === 0) {
-        request.json_config["simulation"] = {
-          "Ending point": 3,
-          "Point interval": 0.001,
+      if (this.simulationUiInformation.simulation !== undefined) {
+        request.json_config.simulation = {
+          "Ending point": this.simulationUiInformation.simulation.endingPoint,
+          "Point interval": this.simulationUiInformation.simulation.pointInterval,
         };
       }
 
-      // Apply a stellate/vagal stimulation, if needed.
-      // Notes:
-      //  - this.simulationMode:
-      //     - 0: normal sinus rhythm;
-      //     - 1: stellate stimulation; and
-      //     - 2: vagal stimulation.
-      //  - this.stimulationLevel has a value in [0; 10], but to compute ACh, we
-      //    need a value in [0; 1].
-
-      if (this.simulationMode !== 0) {
-        request.json_config["parameters"] = {
-          "Rate_modulation_experiments/Iso_1_uM": 1.0,
-          "Rate_modulation_experiments/ACh": this.simulationMode === 1 ? (1.0 - 0.1 * this.stimulationLevel) * 22.0e-6 : 22.0e-6 + 0.1 * this.stimulationLevel * (38.0e-6 - 22.0e-6),
-        };
-      }
+      // Specify the simulation parameters.
 
-      // Apply the spike settings, if needed.
+      if (this.simulationUiInformation.parameters != undefined) {
+        request.json_config.parameters = {};
 
-      if (this.mode === 1) {
-        request.json_config["parameters"] = {
-          "Brain_stem/t_period": this.simulationSpikeFrequency,
-          "Brain_stem/w_n": this.simulationSpikeNumber,
-          "Brain_stem/w_value": 0.01 * this.simulationSpikeAmplitude,
-        };
+        this.simulationUiInformation.parameters.forEach((parameter) => {
+          request.json_config.parameters[parameter.name] = evaluateValue(this, parameter.value);
+        });
       }
 
-      // Request the spikes if we are in composite mode.
+      // Specify what we want to retrieve.
 
-      if (this.mode === 1) {
-        request.json_config["output"].push("Brain_stem/w");
+      if (this.simulationUiInformation.output.data !== undefined)  {
+        let index = -1;
+
+        request.json_config.output = [];
+
+        this.simulationUiInformation.output.data.forEach((outputData) => {
+          request.json_config.output[++index] = outputData.name;
+        });
       }
 
       // Run the simulation.
 
-      var xmlhttp = new XMLHttpRequest();
+      let xmlhttp = new XMLHttpRequest();
 
       xmlhttp.open("POST", this.apiLocation + "/simulation", true);
       xmlhttp.setRequestHeader("Content-type", "application/json");
       xmlhttp.onreadystatechange = () => {
         if (xmlhttp.readyState === 4) {
-          this.simulationBeingComputed = false;
+          this.showUserMessage = false;
 
           if (xmlhttp.status === 200) {
-            var response = JSON.parse(xmlhttp.responseText);
+            let response = JSON.parse(xmlhttp.responseText);
+
+            this.isSimulationValid = response.status === "ok";
+
+            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.simulationValid = response.status === "ok";
+              this.simulationUiInformation.output.plots.forEach((outputPlot) => {
+                let xValue = [];
+                let yValue = [];
 
-            if (this.simulationValid) {
-              // Retrieve the spike data, if needed. (Our default spike
-              // amplitude is 0.1, but we normalise it to 10.)
+                for (let i = 0; i < iMax; ++i) {
+                  xValue[i] = evaluateSimulationValue(this, response.results, outputPlot.xValue, i);
+                  yValue[i] = evaluateSimulationValue(this, response.results, outputPlot.yValue, i);
+                }
 
-              if (this.mode === 1) {
-                this.simulationSpikeData = [
+                this.simulationData[++index] = [
                   {
-                    x: response.results["environment/time"],
-                    y: response.results["Brain_stem/w"].map(function (element) {
-                      return 100 * element;
-                    }),
+                    x: xValue,
+                    y: yValue,
                   },
                 ];
-              }
-
-              // Retrieve the potential data.
-
-              this.simulationPotentialData = [
-                {
-                  x: response.results["environment/time"],
-                  y: response.results["Membrane/V"],
-                },
-              ];
+              });
             } else {
               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>)";
           }
@@ -275,21 +177,59 @@ export default {
       xmlhttp.send(JSON.stringify(request));
     },
   },
-  mounted: function () {
-    // Determine the mode in which we should run:
-    //  - -1: unknown mode;
-    //  -  0: normal mode; and
-    //  -  1: composite mode.
-
-    this.mode = -1;
-
-    if (this.entry) {
-      if (this.entry.resource === "https://models.physiomeproject.org/workspace/486/rawfile/55879cbc485e2d4c41f3dc6d60424b849f94c4ee/HumanSAN_Fabbri_Fantini_Wilders_Severi_2017.cellml") {
-        this.mode = 0;
-      } else if (this.entry.resource === "https://models.physiomeproject.org/workspace/698/rawfile/f3fc911063ac72ed44e84c0c5af28df41c25d452/fabbri_et_al_based_composite_SAN_model.sedml") {
-        this.mode = 1;
+  created: function() {
+    this.userMessage = "Retrieving UI information...";
+    this.showUserMessage = true;
+
+    // Retrieve the simulation UI file for the given dataset.
+
+    let xmlhttp = new XMLHttpRequest();
+
+    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.simulationUiInformation = JSON.parse(xmlhttp.responseText);
+
+        // Make sure that the simulation UI information is valid.
+
+        this.hasValidSimulationUiInformation = validJson(this.simulationUiInformation);
+
+        if (!this.hasValidSimulationUiInformation) {
+          this.showUserMessage = false;
+
+          return;
+        }
+
+        // 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() {
+    // 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;
+
+    finaliseUi(this);
   },
 };
 </script>
@@ -301,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.slider-and-field {
-  margin-top: -8px;
-  width: 0;
-  height: 0;
-}
->>> .el-input-number.slider-and-field .el-input {
-  width: 60px;
-}
->>> .el-input-number.slider-and-field .el-input__inner:focus {
-  border-color: #8300bf;
-}
->>> .el-select.simulation-mode {
-  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;
-}
-.simulation-mode {
-  margin-left: 8px;
-}
-.simulation-mode >>> .el-input__inner {
-  font-family: Asap, sans-serif;
-}
-.simulation-mode >>> .el-input__inner:focus,
-.simulation-mode >>> .el-input.is-focus .el-input__inner {
-  border-color: #8300bf;
-}
-.simulation-mode-popper .el-select-dropdown__item {
-  font-family: Asap, sans-serif;
-}
-.simulation-mode-popper .el-select-dropdown__item.selected {
-  font-weight: normal;
-  color: #8300bf;
-}
 div.main {
   display: grid;
   --mainLeftWidth: 224px;
@@ -358,16 +256,36 @@ div.main-left {
   height: 100%;
   overflow: auto;
 }
-div.main-right.composite {
+div.main-right.x1 {
+  height: 100%;
+}
+div.main-right.x2 {
   height: 50%;
 }
+div.main-right.x3 {
+  height: 33.333%;
+}
+div.main-right.x4 {
+  height: 25%;
+}
+div.main-right.x5 {
+  height: 20%;
+}
+div.main-right.x6 {
+  height: 16.667%;
+}
+div.main-right.x7 {
+  height: 14.286%;
+}
+div.main-right.x8 {
+  height: 12.5%;
+}
+div.main-right.x9 {
+  height: 11.111%;
+}
 >>> div.main-right div.controls {
   height: 0;
 }
-div.plot-vuer {
-  display: grid;
-  width: 100%;
-}
 div.primary-button,
 div.secondary-button {
   display: flex;
@@ -399,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;
@@ -413,12 +326,6 @@ p.default {
 p.error {
   margin-left: 16px;
 }
-p.first-slider-and-field,
-p.slider-and-field {
-  grid-column-start: 1;
-  grid-column-end: 3;
-  margin-bottom: 8px;
-}
 p.note {
   font-size: 12px;
   line-height: 16px;
@@ -431,30 +338,13 @@ p.input-parameters {
 p.title {
   line-height: 20px;
 }
-p.simulation-mode {
-  margin-bottom: 4px;
-}
-p.first-slider-and-field {
-  margin-top: 0;
-}
-p.slider-and-field {
-  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>