@abi-software/simulationvuer 0.5.3 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/simulationvuer",
-  "version": "0.5.3",
+  "version": "0.5.6",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --mode static",

package/src/App.vue

@@ -7,17 +7,17 @@
     <p>
       Instance for an unknown or invalid model:
     </p>
-    <SimulationVuer :apiLocation="apiLocation" :entry="noEntry" />
+    <SimulationVuer :id=0 />
     <hr />
     <p>
       Instance showing the simulation of the <a href="https://models.physiomeproject.org/e/611/HumanSAN_Fabbri_Fantini_Wilders_Severi_2017.cellml/view">Fabbri <em>et al.</em> (2017)</a> model:
     </p>
-    <SimulationVuer :apiLocation="apiLocation" :entry="normalEntry" />
+    <SimulationVuer :id=135 />
     <hr />
     <p>
       Instance showing the simulation of the <a href="https://models.physiomeproject.org/e/611/HumanSAN_Fabbri_Fantini_Wilders_Severi_2017.cellml/view">Fabbri <em>et al.</em> (2017)</a> + <a href="https://models.physiomeproject.org/workspace/694">Gerstner & Kistler (2002)</a> composite model:
     </p>
-    <SimulationVuer :apiLocation="apiLocation" :entry="compositeEntry" style="height: 500px;" />
+    <SimulationVuer :id=157 />
     <hr />
   </div>
 </template>
@@ -30,27 +30,6 @@ export default {
   components: {
     SimulationVuer,
   },
-  data: function () {
-    return {
-      apiLocation: process.env.VUE_APP_API_LOCATION,
-      noEntry: {
-      },
-      normalEntry: {
-        dataset: "https://sparc.science/datasets/135?type=dataset",
-        datasetId: 135,
-        description: "CellML version of the Fabbri et al. 2017 mathematical model of the spontaneous electrical activity of a human sinoatrial node (SAN) pacemaker cell",
-        name: "Computational analysis of the human sinus node action potential - Model development and effects of mutations",
-        resource: "https://models.physiomeproject.org/workspace/486/rawfile/55879cbc485e2d4c41f3dc6d60424b849f94c4ee/HumanSAN_Fabbri_Fantini_Wilders_Severi_2017.cellml",
-      },
-      compositeEntry: {
-        dataset: "https://sparc.science/datasets/157?type=dataset",
-        datasetId: 157,
-        description: "CellML version of the Fabbri et al. 2017 human sinoatrial node (SAN) cell model and an ODE-based version of the Gerstner & Kistler 2002 brain stem model combined to demonstrate the effect of brain stem activity on heart rate",
-        name: "Fabbri-based composite SAN model",
-        resource: "https://models.physiomeproject.org/workspace/698/rawfile/f3fc911063ac72ed44e84c0c5af28df41c25d452/fabbri_et_al_based_composite_SAN_model.sedml",
-      },
-    };
-  },
 };
 </script>
 

package/src/components/SimulationVuer.vue

@@ -3,7 +3,7 @@
     <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>
+        <p class="default name">{{name}}</p>
         <el-divider></el-divider>
         <p class="default input-parameters">Input parameters</p>
         <div>
@@ -52,16 +52,39 @@ export default {
     SimulationVuerInput,
   },
   props: {
-    apiLocation: {
+    id: {
       required: true,
-      type: String,
-    },
-    entry: {
-      required: true,
-      type: Object,
+      type: Number,
     },
   },
   data: function() {
+    let xmlhttp = new XMLHttpRequest();
+    let name = undefined;
+    let resource = undefined;
+
+    xmlhttp.open("GET", process.env.VUE_APP_API_LOCATION + "dataset_info/using_pennsieve_identifier?identifier=" + this.id, false);
+    xmlhttp.setRequestHeader("Content-type", "application/json");
+    xmlhttp.send();
+
+    if (xmlhttp.status === 200) {
+      let datasetInfo = JSON.parse(xmlhttp.responseText).result[0];
+
+      if (datasetInfo !== undefined) {
+        name = datasetInfo.name;
+
+        let isSedmlResource = false;
+
+        datasetInfo.additionalLinks.forEach(function(el) {
+          if (el.description == "SED-ML file") {
+            isSedmlResource = true;
+            resource = el.uri;
+          } else if (!isSedmlResource && (el.description == "CellML file")) {
+            resource = el.uri;
+          }
+        });
+      }
+    }
+
     return {
       errorMessage: "",
       firstScalarInput: [],
@@ -70,12 +93,13 @@ export default {
       isMounted: false,
       isSimulationValid: true,
       layout: [],
+      name: name,
+      resource: resource,
       showUserMessage: false,
       simulationData: [],
       simulationDataId: {},
       simulationUiInformation: {},
       userMessage: "",
-      title: (this.entry !== undefined)?this.entry.name:"",
       ui: null,
     };
   },
@@ -84,14 +108,14 @@ export default {
       window.open("https://osparc.io/", "_blank");
     },
     viewDataset() {
-      window.open(this.entry.dataset, "_blank");
+      window.open(`https://sparc.science/datasets/${this.id}?type=dataset`, "_blank");
     },
     runSimulation() {
       this.userMessage = "Loading simulation results...";
       this.showUserMessage = true;
 
       let request = {
-        model_url: this.entry.resource,
+        model_url: this.resource,
         json_config: {},
       };
 
@@ -131,7 +155,7 @@ export default {
 
       let xmlhttp = new XMLHttpRequest();
 
-      xmlhttp.open("POST", this.apiLocation + "/simulation", true);
+      xmlhttp.open("POST", process.env.VUE_APP_API_LOCATION + "simulation", true);
       xmlhttp.setRequestHeader("Content-type", "application/json");
       xmlhttp.onreadystatechange = () => {
         if (xmlhttp.readyState === 4) {
@@ -178,48 +202,52 @@ export default {
     },
   },
   created: function() {
-    this.userMessage = "Retrieving UI information...";
-    this.showUserMessage = true;
+    // Try to retrieve the UI information, but only if we have a resource.
 
-    // Retrieve the simulation UI file for the given dataset.
+    if (this.resource !== undefined) {
+      this.userMessage = "Retrieving UI information...";
+      this.showUserMessage = true;
 
-    let xmlhttp = new XMLHttpRequest();
+      // Retrieve the simulation UI file for the given dataset.
 
-    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.
+      let xmlhttp = new XMLHttpRequest();
 
-        this.simulationUiInformation = JSON.parse(xmlhttp.responseText);
+      xmlhttp.open("GET", process.env.VUE_APP_API_LOCATION + "simulation_ui_file/" + this.id, true);
+      xmlhttp.setRequestHeader("Content-type", "application/json");
+      xmlhttp.onreadystatechange = () => {
+        if (xmlhttp.readyState === 4) {
+          this.showUserMessage = false;
 
-        // Make sure that the simulation UI information is valid.
+          if (xmlhttp.status === 200) {
+            // Keep track of the simulation UI information.
 
-        this.hasValidSimulationUiInformation = validJson(this.simulationUiInformation);
+            this.simulationUiInformation = JSON.parse(xmlhttp.responseText);
 
-        if (!this.hasValidSimulationUiInformation) {
-          this.showUserMessage = false;
+            // Make sure that the simulation UI information is valid.
 
-          return;
-        }
+            this.hasValidSimulationUiInformation = validJson(this.simulationUiInformation);
 
-        // Initialise our UI.
+            if (!this.hasValidSimulationUiInformation) {
+              return;
+            }
 
-        initialiseUi(this);
+            // Initialise our UI.
 
-        // 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.
+            initialiseUi(this);
 
-        this.$nextTick(() => {
-          finaliseUi(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.showUserMessage = false;
-        });
-      }
-    };
-    xmlhttp.send();
+            this.$nextTick(() => {
+              finaliseUi(this);
+            });
+          }
+        }
+      };
+      xmlhttp.send();
+    }
   },
   mounted: function() {
     // Finalise our UI.
@@ -326,18 +354,18 @@ p.default {
 p.error {
   margin-left: 16px;
 }
-p.note {
-  font-size: 12px;
-  line-height: 16px;
-}
-p.title,
+p.name,
 p.input-parameters {
   margin-top: 0;
   font-weight: 500 /* Medium */;
 }
-p.title {
+p.name {
   line-height: 20px;
 }
+p.note {
+  font-size: 12px;
+  line-height: 16px;
+}
 span.error {
   font-weight: 500 /* Medium */;
 }