OpenCOR

OpenCOR is a frontend to libOpenCOR, a library that can be used to organise, edit, simulate, and analyse CellML files.

There are two versions of OpenCOR:

1. OpenCOR: a desktop application that can be run on Intel-based and ARM-based Windows, Linux, and macOS machines; and
2. OpenCOR's Web app: a Web app that can be run on a Web browser.

Some characteristics of this package are that:

• It is built as a Vue 3 component using the Composition API.
• It uses PrimeVue as its UI framework.
• It uses Tailwind CSS for styling.
• It can be used as a standalone Web app or embedded in a Vue 3 application.
• It uses CSS containment to prevent CSS leakage when embedded in an application that uses a different UI framework.

Usage

The component comes with the following props:

| Name | Type | Default | Description | | ------- | ------------------------------------------ | ---------- | -------------------------------------------------------------------------------- | | omex | String | null | The URL of the OMEX file to use. | | theme | String: 'light', 'dark', or 'system' | 'system' | The theme to use. Note that it is set once and for all, i.e. it is not reactive. |

• main.ts:

import { createApp } from 'vue';

import App from './App.vue';

createApp(App).mount('#app');

No omex prop provided

When no omex prop is provided, the component gives access to all of OpenCOR's features

• App.vue:

<template>
  <div style="height: 100vh; height: 100dvh;">
    <OpenCOR />
  </div>
</template>

<script setup lang="ts">
import OpenCOR from '@opencor/opencor';
import '@opencor/opencor/style.css';
</script>

omex prop provided

When an omex prop is provided, the component goes straight into OpenCOR's simulation mode, using the specified OMEX file.

• App.vue:

<template>
  <div style="height: 100vh; height: 100dvh;">
    <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/lorenz.omex" />
  </div>
</template>

<script setup lang="ts">
import OpenCOR from '@opencor/opencor';
import '@opencor/opencor/style.css';
</script>