@abi-software/simulationvuer 2.0.20 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/simulationvuer",
-  "version": "2.0.20",
+  "version": "3.0.0",
   "private": false,
   "scripts": {
     "serve": "vite serve --host --force",
@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "@abi-software/plotvuer": "1.0.7",
+    "@opencor/opencor": "^0.20251112.0",
     "element-plus": "2.8.4",
     "jsonschema": "^1.4.0",
-    "mathjs": "^13.0.2",
     "unplugin-vue-components": "^0.26.0",
     "vue": "^3.4.21"
   },

package/src/App.vue

@@ -174,7 +174,6 @@ export default {
   top: 8px;
   right: 8px;
   width: 192px;
-  height: 48px;
   border: 2px dashed #8300bf;
   background-color: #f9f2fc;
   color: #8300bf;
@@ -227,6 +226,7 @@ a {
 
 div.app {
   text-align: center;
+  margin-bottom: 8px;
 }
 
 h3 {

package/src/components/SimulationVuer.vue

@@ -1,53 +1,58 @@
 <template>
   <div class="simulation-vuer" v-loading="showUserMessage" :element-loading-text="userMessage">
-    <p v-if="!hasValidSimulationUiInfo && !showUserMessage" class="default error"><span class="error">Error:</span> {{ errorMessage }}.</p>
-    <div class="main" v-if="hasValidSimulationUiInfo">
-      <div class="main-left" :class="{'with-buttons': !libopencorSet || uuid}">
-        <p class="default name" v-if="!libopencorSet">{{ name }}</p>
-        <el-divider v-if="!libopencorSet"></el-divider>
-        <p class="default input-parameters">Input parameters</p>
-        <div class="input scrollbar">
-          <SimulationVuerInput v-for="(input, index) in simulationUiInfo.input"
-            ref="simInput"
-            :defaultValue="input.defaultValue"
-            :key="`input-${index}`"
-            :name="input.name"
-            :maximumValue="input.maximumValue"
-            :minimumValue="input.minimumValue"
-            :possibleValues="input.possibleValues"
-            :stepValue="input.stepValue"
-          />
-        </div>
-        <div class="buttons-container">
-          <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 class="container" v-if="opencorOmexFile === null">
+      <p v-if="!hasValidSimulationUiInfo && !showUserMessage" class="default error"><span class="error">Error:</span> {{ errorMessage }}.</p>
+      <div class="main" v-if="hasValidSimulationUiInfo">
+        <div class="main-left" :class="{'with-buttons': !libopencorSet || uuid}">
+          <p class="default name" v-if="!libopencorSet">{{ name }}</p>
+          <el-divider v-if="!libopencorSet"></el-divider>
+          <p class="default input-parameters">Input parameters</p>
+          <div class="input scrollbar">
+            <SimulationVuerInput v-for="(input, index) in simulationUiInfo.input"
+              ref="simInput"
+              :defaultValue="input.defaultValue"
+              :key="`input-${index}`"
+              :name="input.name"
+              :maximumValue="input.maximumValue"
+              :minimumValue="input.minimumValue"
+              :possibleValues="input.possibleValues"
+              :stepValue="input.stepValue"
+            />
           </div>
-          <div class="secondary-button" v-if="!libopencorSet">
-            <el-button size="small" @click="viewDataset()">View Dataset</el-button>
+          <div class="buttons-container">
+            <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" v-if="!libopencorSet">
+              <el-button size="small" @click="viewDataset()">View Dataset</el-button>
+            </div>
+            <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>
-          <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>
-      </div>
-      <div class="main-right" ref="output" v-show="isSimulationValid">
-        <PlotVuer v-for="(_outputPlot, index) in simulationUiInfo.output.plots"
-          :key="`output-${index}`"
-          :metadata="plotMetadata(index)"
-          :data-source="{ data: simulationResults[index] }"
-          :plotLayout="layout[index]"
-          :plotType="'plotly-only'"
-          :selectorUi="false"
-        />
-      </div>
-      <div class="main-right" v-show="!isSimulationValid">
-        <p class="default error"><span class="error">Error:</span> <span v-html="errorMessage"></span>.</p>
+        <div class="main-right" ref="output" v-show="isSimulationValid">
+          <PlotVuer v-for="(_outputPlot, index) in simulationUiInfo.output.plots"
+            :key="`output-${index}`"
+            :metadata="plotMetadata(index)"
+            :data-source="{ data: simulationResults[index] }"
+            :plotLayout="layout[index]"
+            :plotType="'plotly-only'"
+            :selectorUi="false"
+          />
+        </div>
+        <div class="main-right" v-show="!isSimulationValid">
+          <p class="default error"><span class="error">Error:</span> <span v-html="errorMessage"></span>.</p>
+        </div>
       </div>
     </div>
+    <div v-else class="opencor">
+      <OpenCOR :omex="opencorOmexFile" theme="light" />
+    </div>
   </div>
 </template>
 
@@ -61,9 +66,9 @@ import { validJson } from "./json.js";
 import libOpenCOR from "https://mapcore-demo.org/current/opencor-wasm/0.0.3/libopencor.js";
 import { markRaw } from "vue";
 import { create, all } from "mathjs";
+import OpenCOR from '@opencor/opencor';
+import '@opencor/opencor/style.css';
 
-const LIBOPENCOR_SOLVER = "libOpenCOR";
-const OSPARC_SOLVER = "oSPARC";
 const PMR_URL = "https://models.physiomeproject.org/";
 
 const math = create(all, {});
@@ -79,8 +84,6 @@ const IdType = Object.freeze({
  * SimulationVuer
  */
 export default {
-  LIBOPENCOR_SOLVER: LIBOPENCOR_SOLVER,
-  OSPARC_SOLVER: OSPARC_SOLVER,
   name: "SimulationVuer",
   components: {
     PlotVuer,
@@ -88,6 +91,7 @@ export default {
     ElButton,
     ElDivider,
     ElLoading,
+    OpenCOR,
   },
   props: {
     /**
@@ -158,6 +162,7 @@ export default {
       model: undefined,
       name: null,
       opencorBasedSimulation: true,
+      opencorOmexFile: null,
       output: undefined,
       perfectScollbarOptions: {
         suppressScrollX: true,
@@ -741,57 +746,9 @@ export default {
         xmlhttp.send();
       });
     } 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();
-      });
+      this.opencorOmexFile = this.id;
     } else if (this.idType === IdType.PMR_PATH) {
-      this.userMessage = "Retrieving COMBINE archive from PMR...";
-      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("POST", this.apiLocation + "/pmr_file");
-        xmlhttp.setRequestHeader("Content-type", "application/json");
-        xmlhttp.onreadystatechange = () => {
-          if (xmlhttp.readyState === 4) {
-            if (xmlhttp.status === 200) {
-              libOpenCOR().then((libopencor) => {
-                this.extractAndBuildSimulationUi(libopencor, Uint8Array.from(atob(xmlhttp.response), (c) => c.charCodeAt(0)));
-              });
-            } else {
-              this.errorMessage = "the COMBINE archive chould not be retrieved from PMR";
-              this.showUserMessage = false;
-            }
-          }
-        };
-        xmlhttp.send(JSON.stringify({ path: this.id }));
-      });
+      this.opencorOmexFile = PMR_URL + this.id;
     } else {
       // Extract the simulation UI JSON file from the COMBINE archive and build
       // the simulation UI.
@@ -848,6 +805,22 @@ export default {
   }
 }
 
+:deep(.p-floatlabel:has(input:focus)) label, :deep(.p-floatlabel:has(input:-webkit-autofill)) label, :deep(.p-floatlabel:has(textarea:focus)) label, :deep(.p-floatlabel:has(.p-inputwrapper-focus)) label {
+  color: #8300BF;
+}
+
+:deep(.p-inputtext:enabled:focus) {
+    border-color: #8300BF;
+}
+
+:deep(.p-select:not(.p-disabled).p-focus) {
+    border-color: #8300BF;
+}
+
+:deep(.p-slider-range) {
+  background-color: #8300BF;
+}
+
 div.input {
   display: flex;
   flex-direction: column;
@@ -866,6 +839,10 @@ div.input {
   flex-shrink: 0;
 }
 
+div.container {
+  height: 100%;
+}
+
 div.main {
   display: grid;
   --mainLeftWidth: 243px;
@@ -929,6 +906,10 @@ div.main-right.x9 > .plotvuer_parent {
   height: 0;
 }
 
+div.opencor {
+  height: 100%;
+}
+
 div.primary-button,
 div.secondary-button {
   display: flex;
@@ -1035,3 +1016,21 @@ span.error {
   }
 }
 </style>
+
+<style>
+/* Note: not sure why, but the following rules need to be global!? */
+
+.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
+    background: #F5F7FA;
+}
+
+.p-select-option.p-select-option-selected.p-focus {
+    background: #F5F7FA;
+    color: #8300BF;
+}
+
+.p-select-option.p-select-option-selected {
+    background: white;
+    color: #8300BF;
+}
+</style>