SimulationVuer

SimulationVuer is a Vue component used in the SPARC portal to run some simulation-based datasets. Some of those datasets (e.g., 135 and 157) reference a CellML-based model of some biological process and include a JSON file.

The JSON file is used by SimulationVuer to create a user interface (Fig. 1). The interface can then be used by someone to configure the simulation and then run it. Using the SPARC API, SimulationVuer asks oSPARC to run the model (using its OpenCOR-based service) and to retrieve the simulation results, which can then be visualised and interacted with using the interface.

Figure 1: user interface for dataset 135.

How to use

To install the package to your Vue application:

npm install @abi-software/simulationvuer

To include the package in your script:

import { SimulationVuer } from '@abi-software/simulationvuer';

To register in a Vue component:

export default {
  ...
  components: {
    ...,
    SimulationVuer,
    ...
  }
  ...
}

The above registers the SimulationVuer component into the global scope. You can now use the SimulationVuer in your Vue template as follows:

<SimulationVuer :apiLocation="apiLocation" :id=123 />

where apiLocation is the URL to the API location and id the id of the simulation-based dataset, if it is a number, or the path to a PMR file, if it is a string.

Project setup

Clone the respository

git clone https://github.com/ABI-Software/simulationvuer.git

Vue component

Setup

npm install

Run the sample application

npm run serve

Compile and minify for production

npm run build-bundle

Vue 2 vs. Vue 3

SimulationVuer is now being developed as a Vue 3 component only. The Vue 2 version of SimulationVuer is not maintained anymore.

Documentation

The documentation is written using VitePress and vuese, and it can be found in the docs folder.

To run in local development mode

npm run docs:watch

This will start the documentation server with VitePress on port 5173: http://localhost:5173/simulationvuer/.