@abi-software/simulationvuer 3.0.12 → 3.0.14

package/src/components/SimulationVuer.vue

@@ -1,14 +1,24 @@
 <template>
-  <div class="simulation-vuer" v-loading="showUserMessage" :element-loading-text="userMessage">
+  <div
+    class="simulation-vuer"
+    v-loading="showUserMessage"
+    :element-loading-text="userMessage"
+  >
     <div class="container" v-if="opencorOmexFile === null">
-      <p v-if="!hasValidSimulationUiInfo && !showUserMessage" class="default error"><span class="error">Error:</span> {{ errorMessage }}.</p>
+      <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': uuid}">
+        <div class="main-left" :class="{ 'with-buttons': uuid }">
           <p class="default name">{{ name }}</p>
           <el-divider></el-divider>
           <p class="default input-parameters">Input parameters</p>
           <div class="input scrollbar">
-            <SimulationVuerInput v-for="(input, index) in simulationUiInfo.input"
+            <SimulationVuerInput
+              v-for="(input, index) in simulationUiInfo.input"
               ref="simInput"
               :defaultValue="input.defaultValue"
               :key="`input-${index}`"
@@ -21,19 +31,28 @@
           </div>
           <div class="buttons-container">
             <div class="primary-button">
-              <el-button type="primary" size="small" @click="startSimulation()">Run Simulation</el-button>
+              <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>
+              <el-button size="small" @click="runOnOsparc()"
+                >Run on oSPARC</el-button
+              >
             </div>
             <div class="secondary-button">
-              <el-button size="small" @click="viewDataset()">View Dataset</el-button>
+              <el-button size="small" @click="viewDataset()"
+                >View Dataset</el-button
+              >
             </div>
-            <p class="default note" v-if="uuid">Additional parameters are available on oSPARC</p>
+            <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"
+          <PlotVuer
+            v-for="(_outputPlot, index) in simulationUiInfo.output.plots"
             :key="`output-${index}`"
             :metadata="plotMetadata(index)"
             :data-source="{ data: simulationResults[index] }"
@@ -43,7 +62,19 @@
           />
         </div>
         <div class="main-right" v-show="!isSimulationValid">
-          <p class="default error"><span class="error">Error:</span> <span v-html="errorMessage"></span>.</p>
+          <p class="default error">
+            <span class="error">Error:</span>
+            {{ errorMessage }}
+            <span v-if="errorStatus">
+              (<a
+                :href="`https://httpstatuses.com/${errorStatus}`"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {{ errorStatus }} </a
+              >) </span
+            >.
+          </p>
         </div>
       </div>
     </div>
@@ -61,23 +92,25 @@
 <script>
 import { PlotVuer } from "@abi-software/plotvuer";
 import "@abi-software/plotvuer/dist/style.css";
-import SimulationVuerInput from "./SimulationVuerInput.vue";
-import { ElButton, ElDivider, ElLoading } from "element-plus";
+import OpenCOR from "@opencor/opencor";
+import "@opencor/opencor/style.css";
+
+import { ElButton, ElDivider } from "element-plus";
+import { create, all } from "mathjs";
+
 import { evaluateValue, finaliseUi, OPENCOR_SOLVER_NAME } from "./common.js";
 import { validJson } from "./json.js";
-import { create, all } from "mathjs";
-import OpenCOR from '@opencor/opencor';
-import '@opencor/opencor/style.css';
+import SimulationVuerInput from "./SimulationVuerInput.vue";
 
 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',
+  DATASET_ID: "dataset_id",
+  DATASET_URL: "dataset_url",
+  PMR_PATH: "pmr_path",
+  RAW_COMBINE_ARCHIVE: "raw_combine_archive",
 });
 
 function isWebProtocol(urlString) {
@@ -101,7 +134,6 @@ export default {
     SimulationVuerInput,
     ElButton,
     ElDivider,
-    ElLoading,
     OpenCOR,
   },
   props: {
@@ -144,14 +176,17 @@ export default {
     if (idType === IdType.DATASET_ID) {
       const xmlhttp = new XMLHttpRequest();
 
-      xmlhttp.open("GET", this.apiLocation + "/sim/dataset/" + this.id);
+      xmlhttp.open("GET", `${this.apiLocation}/sim/dataset/${this.id}`);
       xmlhttp.onreadystatechange = () => {
         if (xmlhttp.readyState === 4) {
           if (xmlhttp.status === 200) {
             const datasetInfo = JSON.parse(xmlhttp.responseText);
 
             this.name = datasetInfo.name;
-            this.uuid = (datasetInfo.study !== undefined) ? datasetInfo.study.uuid : undefined;
+            this.uuid =
+              datasetInfo.study !== undefined
+                ? datasetInfo.study.uuid
+                : undefined;
           }
         }
       };
@@ -160,6 +195,7 @@ export default {
 
     return {
       errorMessage: "",
+      errorStatus: null,
       fileManager: undefined,
       hasFinalisedUi: false,
       hasValidSimulationUiInfo: false,
@@ -191,40 +227,48 @@ export default {
     /**
      * @public
      * Add a data subscription.
-     * @arg `subscription `
+     * @param `subscription`
      */
     addDataSubscription(subscription) {
       // Check that the subscription is valid.
 
-      if (!subscription || typeof subscription !== 'object') {
-        console.error('addDataSubscription: subscription must be an object.');
+      if (!subscription || typeof subscription !== "object") {
+        console.warn(
+          "SimulationVuer: addDataSubscription: subscription must be an object.",
+        );
 
         return;
       }
 
       // Check that the subscription has the expected ID.
 
-      const EXPECTED_ID = 'nz.ac.auckland.simulation-data-request';
+      const EXPECTED_ID = "nz.ac.auckland.simulation-data-request";
       const EXPECTED_MAJOR_VERSION = 0;
 
       if (subscription.id !== EXPECTED_ID) {
-        console.warn(`addDataSubscription: invalid ID (expected '${EXPECTED_ID}' but got '${subscription.id}').`);
+        console.warn(
+          `SimulationVuer: addDataSubscription: invalid ID (expected '${EXPECTED_ID}' but got '${subscription.id}').`,
+        );
 
         return;
       }
 
       // Check that the version is valid and compatible with what we expect.
 
-      if (typeof subscription.version !== 'string') {
-        console.warn(`addDataSubscription: missing or non-string version ('${subscription.version}').`);
+      if (typeof subscription.version !== "string") {
+        console.warn(
+          `SimulationVuer: addDataSubscription: missing or non-string version ('${subscription.version}').`,
+        );
 
         return;
       }
 
-      const versionParts = subscription.version.split('.');
+      const versionParts = subscription.version.split(".");
 
       if (versionParts.length < 1 || !/^[0-9]+$/.test(versionParts[0])) {
-        console.warn(`addDataSubscription: malformed version ('${subscription.version}').`);
+        console.warn(
+          `SimulationVuer: addDataSubscription: malformed version ('${subscription.version}').`,
+        );
 
         return;
       }
@@ -232,13 +276,17 @@ export default {
       const subscriptionMajorVersion = parseInt(versionParts[0], 10);
 
       if (Number.isNaN(subscriptionMajorVersion)) {
-        console.warn(`addDataSubscription: could not parse the major version from ('${subscription.version}')`);
+        console.warn(
+          `SimulationVuer: addDataSubscription: could not parse the major version from ('${subscription.version}')`,
+        );
 
         return;
       }
 
       if (subscriptionMajorVersion !== EXPECTED_MAJOR_VERSION) {
-        console.warn(`addDataSubscription: version mismatch (expected v${EXPECTED_MAJOR_VERSION}.y.z but got v${subscription.version}).`);
+        console.warn(
+          `SimulationVuer: addDataSubscription: version mismatch (expected v${EXPECTED_MAJOR_VERSION}.y.z but got v${subscription.version}).`,
+        );
 
         return;
       }
@@ -249,23 +297,25 @@ export default {
       const missing = [];
 
       if (payload.windowId == null) {
-        missing.push('windowId');
+        missing.push("windowId");
       }
 
       if (payload.ownerId == null) {
-        missing.push('ownerId');
+        missing.push("ownerId");
       }
 
       if (!payload.component) {
-        missing.push('component');
+        missing.push("component");
       }
 
       if (!payload.variable) {
-        missing.push('variable');
+        missing.push("variable");
       }
 
       if (missing.length) {
-        console.warn(`addDataSubscription: payload missing fields: ${missing.join(', ')}.`);
+        console.warn(
+          `SimulationVuer: addDataSubscription: payload missing fields: ${missing.join(", ")}.`,
+        );
 
         return;
       }
@@ -280,52 +330,69 @@ export default {
       const modelParameters = [];
 
       if (subscription.payload?.withVOI) {
-        modelParameters.push('VOI');
+        modelParameters.push("VOI");
       }
 
-      modelParameters.push(`${subscription.payload?.component}/${subscription.payload?.variable}`);
+      modelParameters.push(
+        `${subscription.payload?.component}/${subscription.payload?.variable}`,
+      );
 
       this.$refs.opencorRef?.trackSimulationData(modelParameters);
     },
     /**
      * @public
      * Remove a data subscription.
-     * @arg `subscriptionId `
+     * @param `subscriptionId`
      */
     removeDataSubscription(subscriptionId) {
       // Ask OpenCOR to stop tracking the simulation data associated with the subscription's component and variable (and
       // the VOI, if requested and unless it's requested by another subscription).
 
-      const subscription = this.activeSubscriptions.find((activeSubscription) => {
-        return activeSubscription.windowId === subscriptionId;
-      });
+      const subscription = this.activeSubscriptions.find(
+        (activeSubscription) => {
+          return activeSubscription.windowId === subscriptionId;
+        },
+      );
 
       if (!subscription) {
-        console.warn(`removeDataSubscription: no active subscription found for id ${subscriptionId}.`);
+        console.warn(
+          `SimulationVuer: removeDataSubscription: no active subscription found for id ${subscriptionId}.`,
+        );
 
         return;
       }
 
-      const isVoiTrackedByAnotherSubscription = this.activeSubscriptions.some((activeSubscription) => {
-        return activeSubscription.windowId !== subscriptionId && activeSubscription.withVOI;
-      });
-      const isModelParameterTrackedByAnotherSubscription = this.activeSubscriptions.some((activeSubscription) => {
-        return (
-          activeSubscription.windowId !== subscriptionId &&
-          activeSubscription.component === subscription.component &&
-          activeSubscription.variable === subscription.variable
-        );
-      });
+      const isVoiTrackedByAnotherSubscription = this.activeSubscriptions.some(
+        (activeSubscription) => {
+          return (
+            activeSubscription.windowId !== subscriptionId &&
+            activeSubscription.withVOI
+          );
+        },
+      );
+      const isModelParameterTrackedByAnotherSubscription =
+        this.activeSubscriptions.some((activeSubscription) => {
+          return (
+            activeSubscription.windowId !== subscriptionId &&
+            activeSubscription.component === subscription.component &&
+            activeSubscription.variable === subscription.variable
+          );
+        });
 
-      if (!isVoiTrackedByAnotherSubscription || !isModelParameterTrackedByAnotherSubscription) {
+      if (
+        !isVoiTrackedByAnotherSubscription ||
+        !isModelParameterTrackedByAnotherSubscription
+      ) {
         const modelParameters = [];
 
         if (subscription.withVOI && !isVoiTrackedByAnotherSubscription) {
-          modelParameters.push('VOI');
+          modelParameters.push("VOI");
         }
 
         if (!isModelParameterTrackedByAnotherSubscription) {
-          modelParameters.push(`${subscription.component}/${subscription.variable}`);
+          modelParameters.push(
+            `${subscription.component}/${subscription.variable}`,
+          );
         }
 
         if (modelParameters.length) {
@@ -335,14 +402,16 @@ export default {
 
       // Remove the subscription from our list of active subscriptions.
 
-      this.activeSubscriptions = this.activeSubscriptions.filter((activeSubscription) => {
-        return activeSubscription.windowId !== subscriptionId;
-      });
+      this.activeSubscriptions = this.activeSubscriptions.filter(
+        (activeSubscription) => {
+          return activeSubscription.windowId !== subscriptionId;
+        },
+      );
     },
     /**
      * @public
      * Let the outside world know that we have received some simulation data from OpenCOR by emitting a `data-notification` event.
-     * @arg `event`
+     * @param `event`
      */
     onSimulationData(event) {
       const simulationData = event.simulationData || {};
@@ -350,33 +419,36 @@ export default {
 
       this.activeSubscriptions.forEach((activeSubscription) => {
         const modelParameter = `${activeSubscription.component}/${activeSubscription.variable}`;
+        const simData = simulationData[modelParameter];
 
-        if (simulationData[modelParameter] == null) {
-          console.warn(`onSimulationData: no data for ${modelParameter}.`);
+        if (simData == null) {
+          console.warn(
+            `SimulationVuer: onSimulationData: no data for ${modelParameter}.`,
+          );
 
           return;
         }
 
         const data = {
-          y: Array.from(simulationData[modelParameter]),
-          title: `${activeSubscription.component}.${activeSubscription.variable}`,
+          y: simData.data,
+          title: `${activeSubscription.component}.${activeSubscription.variable} (${simData.unit})`,
         };
 
         if (activeSubscription.withVOI) {
           if (simulationData.VOI == null) {
-            console.warn('onSimulationData: no data for VOI.');
+            console.warn("SimulationVuer: onSimulationData: no data for VOI.");
 
             return;
           } else {
-            voi ??= Array.from(simulationData.VOI);
+            voi ??= simulationData.VOI;
 
             data.x = voi;
           }
         }
 
-        this.$emit('data-notification', {
-          id: 'nz.ac.auckland.simulation-data-response',
-          version: '0.1.0',
+        this.$emit("data-notification", {
+          id: "nz.ac.auckland.simulation-data-response",
+          version: "0.1.0",
           payload: {
             windowId: activeSubscription.windowId,
             ownerId: activeSubscription.ownerId,
@@ -388,7 +460,7 @@ export default {
     /**
      * @public
      * Generate the metadata associated with the plot which `index` is given.
-     * @arg `index`
+     * @param `index`
      */
     plotMetadata(index) {
       return {
@@ -403,7 +475,7 @@ export default {
     /**
      * @public
      * Build the simulation UI using `simulationUiInfo`, a JSON object that describes the contents of the simulation UI.
-     * @arg `simulationUiInfo`
+     * @param `simulationUiInfo`
      */
     buildSimulationUi(simulationUiInfo) {
       // Keep track of the simulation UI information.
@@ -423,7 +495,7 @@ export default {
       // Retrieve and keep track of the solver to be used for the simulation.
 
       this.simulationUiInfo.simulation.solvers.forEach((solver) => {
-        if ((solver.if === undefined) || evaluateValue(this, solver.if)) {
+        if (solver.if === undefined || evaluateValue(this, solver.if)) {
           this.solver = solver;
         }
       });
@@ -493,6 +565,25 @@ export default {
         finaliseUi(this);
       });
     },
+    /**
+     * @private
+     * Open the given `url` in a new browser tab, making sure to do so safely.
+     * @param `url`
+     */
+    openUrl(url) {
+      const a = document.createElement("a");
+
+      a.href = url;
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      a.style.display = "none";
+
+      document.body.appendChild(a);
+
+      a.click();
+
+      document.body.removeChild(a);
+    },
     /**
      * @public
      * Run the simulation-based dataset directly on oSPARC. Not all simulation-based datasets can be run directly on
@@ -500,7 +591,7 @@ export default {
      * method.
      */
     runOnOsparc() {
-      window.open(`https://osparc.io/study/${this.uuid}`, "_blank");
+      this.openUrl(`https://osparc.io/study/${this.uuid}`);
     },
     /**
      * @public
@@ -508,7 +599,7 @@ export default {
      * clicked, calls this method.
      */
     viewDataset() {
-      window.open(`https://sparc.science/datasets/${this.id}?type=dataset`, "_blank");
+      this.openUrl(`https://sparc.science/datasets/${this.id}?type=dataset`);
     },
     /**
      * @public
@@ -517,8 +608,7 @@ export default {
      */
     viewWorkspace() {
       const url = PMR_URL + this.id;
-
-      window.open(url.substring(0, url.lastIndexOf("/")), "_blank");
+      this.openUrl(url.substring(0, url.lastIndexOf("/")));
     },
     /**
      * @public
@@ -556,7 +646,7 @@ export default {
      */
     retrieveRequest() {
       const request = {
-        solver: this.solver
+        solver: this.solver,
       };
 
       if (this.opencorBasedSimulation) {
@@ -565,11 +655,15 @@ export default {
           json_config: {},
         };
 
-        if ((this.simulationUiInfo.simulation.opencor.endingPoint !== undefined)
-          && (this.simulationUiInfo.simulation.opencor.pointInterval !== undefined)) {
+        if (
+          this.simulationUiInfo.simulation.opencor.endingPoint !== undefined &&
+          this.simulationUiInfo.simulation.opencor.pointInterval !== undefined
+        ) {
           request.opencor.json_config.simulation = {
-            "Ending point": this.simulationUiInfo.simulation.opencor.endingPoint,
-            "Point interval": this.simulationUiInfo.simulation.opencor.pointInterval,
+            "Ending point":
+              this.simulationUiInfo.simulation.opencor.endingPoint,
+            "Point interval":
+              this.simulationUiInfo.simulation.opencor.pointInterval,
           };
         }
 
@@ -592,13 +686,13 @@ export default {
      * @public
      * Process the simulation results retrieved by `checkSimulation`. The simulation results are post-processed, if
      * needed, and then readied for use by `PlotVuer`.
-     * @arg `results`
+     * @param `results`
      */
     processSimulationResults(results) {
       // Convert, if needed, the results to a JSON format that is compatible
       // with our OpenCOR results.
 
-      if (typeof (results) === "string") {
+      if (typeof results === "string") {
         const SPACES = /[ \t]+/g;
         const lines = results.trim().split("\n");
         const iMax = lines[0].trim().split(SPACES).length;
@@ -646,26 +740,27 @@ export default {
     /**
      * @public
      * Show an HTTP issue using the given `xmlhttp`.
-     * @arg `xmlhttp`
+     * @param `xmlhttp`
      */
     showHttpIssue(xmlhttp) {
       this.isSimulationValid = false;
       this.showUserMessage = false;
-      this.errorMessage = xmlhttp.statusText.toLowerCase() + " (<a href='https://httpstatuses.com/" + xmlhttp.status + "/' target='_blank'>" + xmlhttp.status + "</a>)";
+      this.errorMessage = xmlhttp.statusText.toLowerCase();
+      this.errorStatus = xmlhttp.status;
     },
     /**
      * @public
      * Check the progress of the simulation using the given `data`, a JSON object that contains the simulation job ID,
      * as well as the solver name and version. This method is first called by `startSimulation` and then every second by
      * itself until the simulation is finished.
-     * @arg `data`
+     * @param `data`
      */
     checkSimulation(data) {
       // Check the simulation.
 
       const xmlhttp = new XMLHttpRequest();
 
-      xmlhttp.open("POST", this.apiLocation + "/check_simulation");
+      xmlhttp.open("POST", `${this.apiLocation}/check_simulation`);
       xmlhttp.setRequestHeader("Content-type", "application/json");
       xmlhttp.onreadystatechange = () => {
         if (xmlhttp.readyState === 4) {
@@ -687,13 +782,14 @@ export default {
 
                 let that = this;
 
-                setTimeout(function () {
+                setTimeout(() => {
                   that.checkSimulation(data);
                 }, 1000);
               }
             } else {
               this.showUserMessage = false;
               this.errorMessage = response.description;
+              this.errorStatus = null;
             }
           } else {
             this.showHttpIssue(xmlhttp);
@@ -719,7 +815,7 @@ export default {
 
         const xmlhttp = new XMLHttpRequest();
 
-        xmlhttp.open("POST", this.apiLocation + "/start_simulation");
+        xmlhttp.open("POST", `${this.apiLocation}/start_simulation`);
         xmlhttp.setRequestHeader("Content-type", "application/json");
         xmlhttp.onreadystatechange = () => {
           if (xmlhttp.readyState === 4) {
@@ -733,6 +829,7 @@ export default {
               } else {
                 this.showUserMessage = false;
                 this.errorMessage = response.description;
+                this.errorStatus = null;
               }
             } else {
               this.showHttpIssue(xmlhttp);
@@ -755,7 +852,10 @@ export default {
       this.$nextTick(() => {
         const xmlhttp = new XMLHttpRequest();
 
-        xmlhttp.open("GET", this.apiLocation + "/simulation_ui_file/" + this.id);
+        xmlhttp.open(
+          "GET",
+          `${this.apiLocation}/simulation_ui_file/${this.id}`,
+        );
         xmlhttp.onreadystatechange = () => {
           if (xmlhttp.readyState === 4) {
             this.showUserMessage = false;
@@ -765,7 +865,9 @@ export default {
                 this.buildSimulationUi(JSON.parse(xmlhttp.responseText));
               });
             } else {
-              this.errorMessage = "the simulation dataset could not be retrieved";
+              this.errorMessage =
+                "the simulation dataset could not be retrieved";
+              this.errorStatus = null;
             }
           }
         };
@@ -774,8 +876,9 @@ export default {
     } else if (this.idType === IdType.DATASET_URL) {
       this.opencorOmexFile = this.id;
     } else if (this.idType === IdType.PMR_PATH) {
-      this.opencorOmexFile = PMR_URL + this.id;
-    } else { // IdType.RAW_COMBINE_ARCHIVE
+      this.opencorOmexFile = `${PMR_URL}${this.id}`;
+    } else {
+      // IdType.RAW_COMBINE_ARCHIVE
       this.opencorOmexFile = this.id;
     }
   },
@@ -795,10 +898,10 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 .simulation-vuer {
-  --el-color-primary: #8300BF;
-  --el-color-primary-light-7: #DAB3EC;
-  --el-color-primary-light-8: #E6CCF2;
-  --el-color-primary-light-9: #F3E6F9;
+  --el-color-primary: #8300bf;
+  --el-color-primary-light-7: #dab3ec;
+  --el-color-primary-light-8: #e6ccf2;
+  --el-color-primary-light-9: #f3e6f9;
 }
 
 :deep(.el-button:hover) {
@@ -812,12 +915,12 @@ export default {
 
 :deep(.el-loading-spinner) {
   .path {
-    stroke: #8300BF;
+    stroke: #8300bf;
   }
 
   i,
   .el-loading-text {
-    color: #8300BF;
+    color: #8300bf;
   }
 }
 
@@ -825,23 +928,23 @@ export default {
 :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;
+  color: #8300bf;
 }
 
 :deep(.p-inputtext:enabled:focus) {
-    border-color: #8300BF;
+  border-color: #8300bf;
 }
 
 :deep(.p-progressbar-value) {
-  background-color: #8300BF !important;
+  background-color: #8300bf !important;
 }
 
 :deep(.p-select:not(.p-disabled).p-focus) {
-    border-color: #8300BF;
+  border-color: #8300bf;
 }
 
 :deep(.p-slider-range) {
-  background-color: #8300BF;
+  background-color: #8300bf;
 }
 
 div.input {
@@ -1045,21 +1148,33 @@ span.error {
 
 .p-contextmenu-item-label,
 .p-select-option-label {
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    font-size: 0.875rem;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+  font-size: 0.875rem;
 }
 
 .p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
-    background: #F5F7FA !important;
+  background: #f5f7fa !important;
 }
 
 .p-select-option.p-select-option-selected.p-focus {
-    background: #F5F7FA !important;
-    color: #8300BF !important;
+  background: #f5f7fa !important;
+  color: #8300bf !important;
 }
 
 .p-select-option.p-select-option-selected {
-    background: white !important;
-    color: #8300BF !important;
+  background: white !important;
+  color: #8300bf !important;
 }
 </style>