@abi-software/simulationvuer 2.0.11-beta.0 → 2.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/simulationvuer",
-  "version": "2.0.11-beta.0",
+  "version": "2.0.12",
   "private": false,
   "scripts": {
     "serve": "vite serve --host --force",

package/src/App.vue

@@ -2,14 +2,24 @@
   <div id="app">
     <div class="app">
       <h1>SimulationVuer</h1>
-      <h3>Simulations run on o²S²PARC:</h3>
-      <el-radio-group v-model="id" size="small">
-        <el-radio-button :class="className(dataset.id)" v-for="dataset in sparcDatasets" v-bind:key="dataset.id" :label="dataset.label" :value="dataset.id" />
-      </el-radio-group>
-      <h3>Simulations run in the browser:</h3>
-      <el-radio-group v-model="id" size="small">
-        <el-radio-button :class="className(dataset.id)" v-for="dataset in pmrDatasets" v-bind:key="dataset.id" :label="dataset.label" :value="dataset.id" />
-      </el-radio-group>
+      <div v-if="datasetIds.length !== 0">
+        <h3>Dataset IDs (run on o²S²PARC):</h3>
+        <el-radio-group v-model="activeResource" size="small">
+          <el-radio-button :class="className(datasetId.id)" v-for="datasetId in datasetIds" v-bind:key="datasetId.id" :label="datasetId.label" :value="datasetId.id" />
+        </el-radio-group>
+      </div>
+      <div v-if="datasetUrls.length !== 0">
+        <h3>Dataset URLs (run in the browser):</h3>
+        <el-radio-group v-model="activeResource" size="small">
+          <el-radio-button :class="className(datasetUrl.id)" v-for="datasetUrl in datasetUrls" v-bind:key="datasetUrl.id" :label="datasetUrl.label" :value="datasetUrl.id" />
+        </el-radio-group>
+      </div>
+      <div v-if="pmrPaths.length !== 0">
+        <h3>PMR paths (run in the browser):</h3>
+        <el-radio-group v-model="activeResource" size="small">
+          <el-radio-button :class="className(pmrPath.id)" v-for="pmrPath in pmrPaths" v-bind:key="pmrPath.id" :label="pmrPath.label" :value="pmrPath.id" />
+        </el-radio-group>
+      </div>
       <div ref="dropArea" class="drop-area" @dragenter.prevent="onDragEnter" @dragover.prevent @drop.prevent="onDrop" @dragleave.prevent="onDragLeave">
         You can drag and drop a COMBINE archive here.
       </div>
@@ -25,20 +35,20 @@
       </el-dialog>
     </div>
     <hr />
-    <div v-for="dataset in datasets()" v-bind:key="dataset.id">
-      <div v-if="initialised(dataset.id)" v-show="dataset.id == id">
-        <div v-if="typeof dataset.id === 'number'">
+    <div v-for="resource in resources()" v-bind:key="resource.id">
+      <div v-if="isResourceInitialised(resource.id)" v-show="resource.id === activeResource">
+        <div v-if="typeof resource.id === 'number'">
           <span>
-            <strong>Dataset <a :href="datasetUrl(dataset.id)" target="_blank">{{ dataset.id }}</a>:</strong> {{ dataset.description }}
+            <strong>Dataset <a :href="datasetUrl(resource.id)" target="_blank">{{ resource.id }}</a>:</strong> {{ resource.description }}
           </span>
           <hr />
         </div>
-        <SimulationVuer :apiLocation="apiLocation" :id="dataset.id" style="height: 640px;" />
+        <SimulationVuer :apiLocation="apiLocation" :id="resource.id" style="height: 640px;" />
       </div>
     </div>
-    <div v-if="id == -1">
+    <div v-if="activeResource === -1">
       <div v-for="combineArchive in combineArchives" v-bind:key="combineArchive">
-        <SimulationVuer :apiLocation="apiLocation" :combineArchive="combineArchive" style="height: 640px;" />
+        <SimulationVuer :apiLocation="apiLocation" :id="combineArchive" style="height: 640px;" />
       </div>
     </div>
     <hr />
@@ -62,46 +72,58 @@ export default {
       dropAreaCounter: 0,
       dragAndDropWarningVisible: false,
       combineArchives: [],
-      sparcDatasets: [
-        { id: 0, label: "0", description: "Non-simulation dataset" },
+      datasetIds: [
+        { id: 0, label: "Invalid", description: "Non-simulation dataset" },
         { id: 135, label: "135", description: "Computational analysis of the human sinus node action potential - Model development and effects of mutations" },
         { id: 157, label: "157", description: "Fabbri-based composite SAN model" },
         { id: 308, label: "308", description: "Kember Cardiac Nerve Model" },
         { id: 318, label: "318", description: "Multi-scale rabbit cardiac electrophysiology models" },
         { id: 320, label: "320", description: "Multi-scale human cardiac electrophysiology models" },
       ],
-      pmrDatasets: [
+      datasetUrls: [
+        { id: "https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/invalid.omex", label: "Invalid", description: "COMBINE archive" },
+        { id: "https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/135.omex", label: "135", description: "COMBINE archive" },
+        { id: "https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/157.omex", label: "157", description: "COMBINE archive" },
+        { id: "https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/lorenz.omex", label: "Lorenz", description: "COMBINE archive" },
+        { id: "https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/tt04.omex", label: "TT04", description: "COMBINE archive" },
+        { id: "https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/cvs.omex", label: "CVS", description: "COMBINE archive" },
+      ],
+      pmrPaths: [
+        { id: "workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/invalid.omex", label: "Invalid", description: "COMBINE archive from PMR" },
         { id: "workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/135.omex", label: "135", description: "COMBINE archive from PMR" },
         { id: "workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/157.omex", label: "157", description: "COMBINE archive from PMR" },
         { id: "workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/lorenz.omex", label: "Lorenz", description: "COMBINE archive from PMR" },
         { id: "workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/tt04.omex", label: "TT04", description: "COMBINE archive from PMR" },
-        { id: "workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/Gee_whiz_Exported.omex", label: "GeeWhiz", description: "COMBINE archive from PMR" },
         { id: "workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/cvs.omex", label: "CVS", description: "COMBINE archive from PMR" },
       ],
-      id: 0,
-      ready: [],
+      activeResource: 0,
+      initialisedResources: [],
     };
   },
   methods: {
     className(id) {
-      return ((id == this.sparcDatasets[0].id) || (id == this.pmrDatasets[0].id)) ? "first-dataset" : "";
+      return (   ((this.datasetIds.length !== 0) && (id === this.datasetIds[0].id))
+              || ((this.datasetUrls.length !== 0) && (id === this.datasetUrls[0].id))
+              || ((this.pmrPaths.length !== 0) && (id === this.pmrPaths[0].id))) ?
+              "first-resource" :
+              "not-first-resource";
     },
-    datasets() {
-      return this.sparcDatasets.concat(this.pmrDatasets);
+    resources() {
+      return this.datasetIds.concat(this.datasetUrls).concat(this.pmrPaths);
     },
     datasetUrl(id) {
       return `https://sparc.science/datasets/${id}?type=dataset`;
     },
-    initialised(id) {
-      if (this.ready.includes(id)) {
+    isResourceInitialised(resource) {
+      if (this.initialisedResources.includes(resource)) {
         return true;
       }
 
-      if (this.id == id) {
-        this.ready.push(id);
+      if (this.activeResource === resource) {
+        this.initialisedResources.push(resource);
       }
 
-      return this.ready.includes(id);
+      return this.initialisedResources.includes(resource);
     },
     onDragEnter() {
       this.dropAreaCounter += 1;
@@ -123,7 +145,7 @@ export default {
         files[0]
           .arrayBuffer()
           .then((arrayBuffer) => {
-            this.id = -1;
+            this.activeResource = -1;
             this.combineArchives = [new Uint8Array(arrayBuffer)];
           })
       }
@@ -181,10 +203,14 @@ export default {
   color: #8300bf;
 }
 
-.first-dataset>.el-radio-button__inner {
+.first-resource>.el-radio-button__inner {
   border-left: 1px solid #8300bf !important;
 }
 
+.not-first-resource>.el-radio-button__inner {
+  border-left: 0 !important;
+}
+
 .el-radio-button__original-radio:checked+.el-radio-button__inner {
   background-color: #8300bf !important;
   border-color: #8300bf !important;

package/src/components/SimulationVuer.vue

@@ -18,17 +18,17 @@
             :stepValue="input.stepValue"
           />
         </div>
-        <div class="primary-button">
-          <el-button type="primary" size="small" @click="startSimulation()" v-if="!libopencorSet">Run Simulation</el-button>
+        <div class="primary-button" v-if="!libopencorSet">
+          <el-button type="primary" size="small" @click="startSimulation()">Run Simulation</el-button>
         </div>
         <div class="secondary-button" v-if="uuid">
           <el-button size="small" @click="runOnOsparc()">Run on oSPARC</el-button>
         </div>
-        <div class="secondary-button">
-          <el-button size="small" @click="viewDataset()" v-if="!libopencorSet">View Dataset</el-button>
+        <div class="secondary-button" v-if="!libopencorSet">
+          <el-button size="small" @click="viewDataset()">View Dataset</el-button>
         </div>
-        <div class="secondary-button">
-          <el-button size="small" @click="viewWorkspace()" v-if="libopencorSet">View Workspace</el-button>
+        <div class="secondary-button" v-if="libopencorSet && idType === 'pmr_path'">
+          <el-button size="small" @click="viewWorkspace()">View Workspace</el-button>
         </div>
         <p class="default note" v-if="uuid">Additional parameters are available on oSPARC</p>
       </div>
@@ -66,6 +66,13 @@ const PMR_URL = "https://models.physiomeproject.org/";
 
 const math = create(all, {});
 
+const IdType = Object.freeze({
+  DATASET_ID: 'dataset_id',
+  DATASET_URL: 'dataset_url',
+  PMR_PATH: 'pmr_path',
+  RAW_COMBINE_ARCHIVE: 'raw_combine_archive',
+});
+
 /**
  * SimulationVuer
  */
@@ -89,27 +96,35 @@ export default {
       type: String,
     },
     /**
-     * The ID of the simulation-based dataset, if it is a number, or the path
-     * to a PMR file, if it is a string.
+     * The ID for this simulation, i.e. either
+     *  - the ID (as a number) of a SPARC dataset,
+     *  - the URL (as a string) of a COMBINE archive located in a SPARC dataset,
+     *  - the path (as a string) to a COMBINE archive located on PMR, or
+     *  - a raw COMBINE archive (as a Uint8Array).
      */
     id: {
-      required: false,
-      type: [Number, String],
-      default: 0,
-    },
-    /**
-     * A COMBINE archive that was passed directly.
-     */
-    combineArchive: {
-      required: false,
-      type: Uint8Array,
-      default: undefined,
+      required: true,
+      type: [Number, String, Uint8Array],
     },
   },
   data: function () {
+    // Determine the ID's type.
+
+    let idType;
+
+    if (typeof this.id === "number") {
+      idType = IdType.DATASET_ID;
+    } else if (this.id instanceof Uint8Array) {
+      idType = IdType.RAW_COMBINE_ARCHIVE;
+    } else if (this.id.startsWith("https://")) {
+      idType = IdType.DATASET_URL;
+    } else {
+      idType = IdType.PMR_PATH;
+    }
+
     // Retrieve some information about the dataset.
 
-    if (this.id > 0) {
+    if (idType === IdType.DATASET_ID) {
       const xmlhttp = new XMLHttpRequest();
 
       xmlhttp.open("GET", this.apiLocation + "/sim/dataset/" + this.id);
@@ -131,6 +146,7 @@ export default {
       fileManager: undefined,
       hasFinalisedUi: false,
       hasValidSimulationUiInfo: false,
+      idType: idType,
       instance: undefined,
       isMounted: false,
       isSimulationValid: true,
@@ -657,7 +673,7 @@ export default {
   created: function () {
     // Try to retrieve the UI information.
 
-    if (this.id > 0) {
+    if (this.idType === IdType.DATASET_ID) {
       this.userMessage = "Retrieving UI information...";
       this.showUserMessage = true;
 
@@ -682,7 +698,33 @@ export default {
         };
         xmlhttp.send();
       });
-    } else if (this.id !== 0) {
+    } else if (this.idType === IdType.DATASET_URL) {
+      this.userMessage = "Retrieving COMBINE archive...";
+      this.showUserMessage = true;
+
+      // Retrieve the COMBINE archive, extract the simulation UI JSON file from
+      // it and then build the simulation UI.
+
+      this.$nextTick(() => {
+        const xmlhttp = new XMLHttpRequest();
+
+        xmlhttp.open("GET", this.id);
+        xmlhttp.responseType = "arraybuffer";
+        xmlhttp.onreadystatechange = () => {
+          if (xmlhttp.readyState === 4) {
+            if (xmlhttp.status === 200) {
+              libOpenCOR().then((libopencor) => {
+                this.extractAndBuildSimulationUi(libopencor, new Uint8Array(xmlhttp.response));
+              });
+            } else {
+              this.errorMessage = "the COMBINE archive could not be retrieved";
+              this.showUserMessage = false;
+            }
+          }
+        };
+        xmlhttp.send();
+      });
+    } else if (this.idType === IdType.PMR_PATH) {
       this.userMessage = "Retrieving COMBINE archive from PMR...";
       this.showUserMessage = true;
 
@@ -701,14 +743,14 @@ export default {
                 this.extractAndBuildSimulationUi(libopencor, Uint8Array.from(atob(xmlhttp.response), (c) => c.charCodeAt(0)));
               });
             } else {
-              this.errorMessage = "the COMBINE archive chould not be retrieved";
+              this.errorMessage = "the COMBINE archive chould not be retrieved from PMR";
               this.showUserMessage = false;
             }
           }
         };
         xmlhttp.send(JSON.stringify({ path: this.id }));
       });
-    } else if (this.combineArchive !== undefined) {
+    } else {
       // Extract the simulation UI JSON file from the COMBINE archive and build
       // the simulation UI.
 
@@ -717,11 +759,9 @@ export default {
 
       this.$nextTick(() => {
         libOpenCOR().then((libopencor) => {
-          this.extractAndBuildSimulationUi(libopencor, this.combineArchive);
+          this.extractAndBuildSimulationUi(libopencor, this.id);
         });
       });
-    } else {
-      this.errorMessage = "an non-simulation dataset was provided";
     }
   },
   mounted: function () {