@opencor/opencor 0.20250813.0

package/src/components/widgets/GraphPanelWidget.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="h-full">
+    <div v-if="showMarker" class="marker" />
+    <div ref="mainDiv" class="h-full" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Plotly from 'plotly.js-gl2d-dist-min'
+import * as vue from 'vue'
+
+import * as vueCommon from '../../common/vueCommon'
+import { MEDIUM_DELAY } from '../../common/constants'
+
+let oldMainDivClientWidth = -1
+let oldMainDivClientHeight = -1
+
+function resizeIfNeeded() {
+  if (mainDiv.value !== null) {
+    if (mainDiv.value.clientWidth !== oldMainDivClientWidth || mainDiv.value.clientHeight !== oldMainDivClientHeight) {
+      oldMainDivClientWidth = mainDiv.value.clientWidth
+      oldMainDivClientHeight = mainDiv.value.clientHeight
+
+      Plotly.Plots.resize(mainDiv.value)
+    }
+  }
+
+  setTimeout(resizeIfNeeded, MEDIUM_DELAY)
+}
+
+vue.onMounted(() => {
+  resizeIfNeeded()
+})
+
+interface IGraphPanelPlotData {
+  data: number[]
+}
+
+export interface IGraphPanelPlot {
+  x: IGraphPanelPlotData
+  y: IGraphPanelPlotData
+}
+
+interface IProps {
+  plots: IGraphPanelPlot[]
+  showMarker?: boolean
+}
+
+const { plots, showMarker = false } = defineProps<IProps>()
+
+const mainDiv = vue.ref<InstanceType<typeof Element> | null>(null)
+
+function themeData() {
+  // Note: the various keys can be found at https://plotly.com/javascript/reference/.
+
+  function axisThemeData() {
+    return {
+      zerolinecolor: vueCommon.isDarkMode.value ? '#71717a' : '#94a3b8', // --p-surface-500 / --p-surface-400
+      gridcolor: vueCommon.isDarkMode.value ? '#3f3f46' : '#e2e8f0', // --p-surface-700 / --p-surface-200
+      minor: {
+        gridcolor: vueCommon.isDarkMode.value ? '#27272a' : '#f1f5f9' // --p-surface-800 / --p-surface-100
+      }
+    }
+  }
+
+  return {
+    paper_bgcolor: vueCommon.isDarkMode.value ? '#18181b' : '#ffffff', // --p-content-background
+    plot_bgcolor: vueCommon.isDarkMode.value ? '#18181b' : '#ffffff', // --p-content-background
+    font: {
+      color: vueCommon.isDarkMode.value ? '#ffffff' : '#334155' // --p-text-color
+    },
+    colorway: [
+      '#7289ab', // Blue
+      '#ea7e53', // Orange
+      '#eedd78', // Yellow
+      '#e69d87', // Pink
+      '#73a373', // Green
+      '#73b9bc', // Cyan
+      '#dd6b66' // Red
+    ],
+    xaxis: axisThemeData(),
+    yaxis: axisThemeData()
+  }
+}
+
+vue.watch(
+  () => [plots, vueCommon.isDarkMode.value],
+  () => {
+    Plotly.react(
+      mainDiv.value,
+      plots.map((plot) => ({
+        x: plot.x.data,
+        y: plot.y.data,
+        type: 'scattergl'
+        //---OPENCOR---
+        // WebGL rendering currently results in "Performance warning: clear() called with no buffers in bitmask" being
+        // logged to the console. This is a known issue and it should hopefully be fixed in the next version of Plotly.
+        // See https://github.com/plotly/plotly.js/issues/7387 and https://github.com/plotly/plotly.js/pull/7390.
+      })),
+      {
+        // Note: the various keys can be found at https://plotly.com/javascript/reference/.
+
+        ...themeData(),
+        margin: {
+          t: 5,
+          l: 30,
+          b: 20,
+          r: 5
+        },
+        showlegend: false,
+        xaxis: {
+          tickangle: 0
+        },
+        yaxis: {
+          tickangle: 0
+        }
+      },
+      {
+        // Note: the various keys can be found at https://plotly.com/javascript/configuration-options/.
+
+        responsive: true,
+        displayModeBar: false,
+        doubleClickDelay: 1000,
+        scrollZoom: true,
+        showTips: false
+      }
+    )
+  }
+)
+</script>
+
+<style scoped>
+.marker {
+  width: 3px;
+  background-color: var(--p-primary-color);
+}
+</style>

package/src/components/widgets/InputWidget.vue

@@ -0,0 +1,128 @@
+<template>
+  <div v-if="possibleValues !== undefined">
+    <FloatLabel variant="on">
+      <Select
+        v-model="discreteValue"
+        :options="possibleValues"
+        optionLabel="name"
+        @change="selectChange"
+        class="w-full"
+        size="small"
+      />
+      <label>{{ name }}</label>
+    </FloatLabel>
+  </div>
+  <div v-else>
+    <FloatLabel variant="on">
+      <InputText
+        v-model="scalarValueString"
+        v-keyfilter="{ pattern: /^[+-]?(\d*(\.\d*)?|\.d*)([eE][+-]?\d*)?$/, validateOnly: true }"
+        v-on:focusout="inputTextFocusOut"
+        v-on:keypress="inputTextKeyPress"
+        class="w-full"
+        size="small"
+      />
+      <label>{{ name }}</label>
+    </FloatLabel>
+    <Slider
+      v-model="scalarValue"
+      :min="minimumValue"
+      :max="maximumValue"
+      :step="stepValue"
+      @change="sliderChange"
+      class="w-full mt-3"
+      size="small"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as vue from 'vue'
+
+import * as locApi from '../../libopencor/locApi'
+
+const value = defineModel<number>({ required: true })
+const emits = defineEmits(['change'])
+const props = defineProps<{
+  maximumValue?: number
+  minimumValue?: number
+  name: string
+  possibleValues?: locApi.IUiJsonDiscreteInputPossibleValue[]
+  stepValue?: number
+}>()
+
+let oldValue = value.value
+const discreteValue = vue.ref<locApi.IUiJsonDiscreteInputPossibleValue | undefined>(
+  props.possibleValues ? props.possibleValues[value.value] : undefined
+)
+const scalarValue = vue.ref<number>(value.value)
+const scalarValueString = vue.ref<string>(String(value.value))
+
+// Some methods to handle a scalar value using an input text and a slider.
+
+function emitChange(newValue: number) {
+  void vue.nextTick().then(() => {
+    value.value = newValue
+
+    if (props.possibleValues === undefined) {
+      scalarValue.value = newValue
+      scalarValueString.value = String(newValue) // This will properly format the input text.
+    }
+
+    oldValue = newValue
+
+    emits('change', props.name, newValue)
+  })
+}
+
+interface ISelectChangeEvent {
+  value: {
+    name: string
+    value: number
+  }
+}
+
+function selectChange(event: ISelectChangeEvent) {
+  if (event.value.value !== oldValue) {
+    emitChange(event.value.value)
+  }
+}
+
+function inputTextChange(newValueString: string) {
+  if (newValueString === '') {
+    newValueString = String(props.minimumValue)
+  }
+
+  if (props.minimumValue !== undefined && Number(newValueString) < props.minimumValue) {
+    newValueString = String(props.minimumValue)
+  }
+
+  if (props.maximumValue !== undefined && Number(newValueString) > props.maximumValue) {
+    newValueString = String(props.maximumValue)
+  }
+
+  const newValue = Number(newValueString)
+
+  if (newValue !== oldValue) {
+    emitChange(newValue)
+  }
+}
+
+function inputTextFocusOut(event: Event) {
+  inputTextChange((event.target as HTMLInputElement).value)
+}
+
+function inputTextKeyPress(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    inputTextChange((event.target as HTMLInputElement).value)
+  }
+}
+
+function sliderChange(newValue: number | number[]) {
+  const valueToEmit = Array.isArray(newValue) ? newValue[0] : newValue
+
+  if (valueToEmit !== oldValue) {
+    emitChange(valueToEmit)
+  }
+}
+</script>

package/src/libopencor/locApi.ts

@@ -0,0 +1,167 @@
+import { proxyUrl } from '../common/locCommon.js'
+
+import { EFileType, type IWasmFile, type IWasmFileManager } from './locFileApi.js'
+import type { IIssue } from './locLoggerApi.js'
+import type { IWasmSedChangeAttribute, IWasmSedDocument } from './locSedApi.js'
+
+export interface ICppLocApi {
+  // FileManager API.
+
+  fileManagerUnmanage: (path: string) => void
+
+  // File API.
+
+  fileContents: (path: string) => Uint8Array
+  fileCreate: (path: string, contents?: Uint8Array) => void
+  fileIssues: (path: string) => IIssue[]
+  fileType: (path: string) => EFileType
+  fileUiJson: (path: string) => Uint8Array | undefined
+
+  // SedDocument API.
+
+  sedDocumentCreate: (path: string) => void
+  sedDocumentInstantiate: (path: string) => void
+  sedDocumentIssues: (path: string) => IIssue[]
+  sedDocumentModelCount: (path: string) => number
+  sedDocumentModelAddChange: (
+    path: string,
+    index: number,
+    componentName: string,
+    variableName: string,
+    newValue: string
+  ) => void
+  sedDocumentModelRemoveAllChanges: (path: string, index: number) => void
+  sedDocumentSimulationCount: (path: string) => number
+  sedDocumentSimulationType: (path: string, index: number) => number
+  sedDocumentSimulationUniformTimeCourseInitialTime: (path: string, index: number) => number
+  sedDocumentSimulationUniformTimeCourseOutputStartTime: (path: string, index: number) => number
+  sedDocumentSimulationUniformTimeCourseSetOutputStartTime: (path: string, index: number, value: number) => void
+  sedDocumentSimulationUniformTimeCourseOutputEndTime: (path: string, index: number) => number
+  sedDocumentSimulationUniformTimeCourseSetOutputEndTime: (path: string, index: number, value: number) => void
+  sedDocumentSimulationUniformTimeCourseNumberOfSteps: (path: string, index: number) => number
+  sedDocumentSimulationUniformTimeCourseSetNumberOfSteps: (path: string, index: number, value: number) => void
+  sedDocumentSimulationOneStepStep: (path: string, index: number) => number
+
+  // SedInstance API.
+
+  sedInstanceIssues: (path: string) => IIssue[]
+  sedInstanceRun: (path: string) => number
+
+  // SedInstanceTask API.
+
+  sedInstanceTaskVoiName: (path: string, index: number) => string
+  sedInstanceTaskVoiUnit: (path: string, index: number) => string
+  sedInstanceTaskVoi: (path: string, index: number) => number[]
+  sedInstanceTaskStateCount: (path: string, index: number) => number
+  sedInstanceTaskStateName: (path: string, index: number, stateIndex: number) => string
+  sedInstanceTaskStateUnit: (path: string, index: number, stateIndex: number) => string
+  sedInstanceTaskState: (path: string, index: number, stateIndex: number) => number[]
+  sedInstanceTaskRateCount: (path: string, index: number) => number
+  sedInstanceTaskRateName: (path: string, index: number, rateIndex: number) => string
+  sedInstanceTaskRateUnit: (path: string, index: number, rateIndex: number) => string
+  sedInstanceTaskRate: (path: string, index: number, rateIndex: number) => number[]
+  sedInstanceTaskConstantCount: (path: string, index: number) => number
+  sedInstanceTaskConstantName: (path: string, index: number, constantIndex: number) => string
+  sedInstanceTaskConstantUnit: (path: string, index: number, constantIndex: number) => string
+  sedInstanceTaskConstant: (path: string, index: number, constantIndex: number) => number[]
+  sedInstanceTaskComputedConstantCount: (path: string, index: number) => number
+  sedInstanceTaskComputedConstantName: (path: string, index: number, computedConstantIndex: number) => string
+  sedInstanceTaskComputedConstantUnit: (path: string, index: number, computedConstantIndex: number) => string
+  sedInstanceTaskComputedConstant: (path: string, index: number, computedConstantIndex: number) => number[]
+  sedInstanceTaskAlgebraicCount: (path: string, index: number) => number
+  sedInstanceTaskAlgebraicName: (path: string, index: number, algebraicIndex: number) => string
+  sedInstanceTaskAlgebraicUnit: (path: string, index: number, algebraicIndex: number) => string
+  sedInstanceTaskAlgebraic: (path: string, index: number, algebraicIndex: number) => number[]
+
+  // Version API.
+
+  version: () => string
+}
+
+export interface IWasmLocApi {
+  // Memory management.
+
+  HEAPU8: Uint8Array
+  _malloc: (size: number) => number
+
+  // FileManager API.
+
+  FileManager: IWasmFileManager
+
+  // File API.
+
+  File: new (path: string) => IWasmFile
+
+  // SedDocument API
+
+  SedDocument: new (wasmFile: IWasmFile) => IWasmSedDocument
+  SedChangeAttribute: new (componentName: string, variableName: string, newValue: string) => IWasmSedChangeAttribute
+
+  // Version API.
+
+  versionString: () => string
+}
+
+// Retrieve the version of libOpenCOR that is to be used. Two options:
+//  - OpenCOR: libOpenCOR can be accessed using window.locApi, which references our C++ API.
+//  - OpenCOR's Web app: libOpenCOR can be accessed using our WebAssembly module.
+
+export let _cppLocApi = {} as ICppLocApi
+export let _wasmLocApi = {} as IWasmLocApi
+
+export async function initialiseLocApi() {
+  // @ts-expect-error (window.locApi may or may not be defined which is why we test it)
+  if (window.locApi !== undefined) {
+    // We are running OpenCOR, so libOpenCOR can be accessed using window.locApi.
+
+    // @ts-expect-error (window.locApi is defined)
+    _cppLocApi = window.locApi
+  } else {
+    // We are running OpenCOR's Web app, so we must import libOpenCOR's WebAssembly module.
+
+    try {
+      const libOpenCOR = (
+        await import(/* @vite-ignore */ proxyUrl('https://opencor.ws/libopencor/downloads/0.20250805.0/libopencor.js'))
+      ).default
+
+      _wasmLocApi = (await libOpenCOR()) as IWasmLocApi
+    } catch (error) {
+      console.error("Failed to load libOpenCOR's WebAssembly module:", error)
+    }
+  }
+}
+
+// Logger API.
+
+export { EIssueType, wasmIssuesToIssues, type IIssue, type IWasmIssues } from './locLoggerApi.js'
+
+// File API.
+
+export { EFileType, File, fileManager, type IWasmFile } from './locFileApi.js'
+
+// SED-ML API.
+
+export {
+  ESedSimulationType,
+  SedDocument,
+  SedInstance,
+  SedInstanceTask,
+  SedSimulationUniformTimeCourse
+} from './locSedApi.js'
+
+// UI JSON API.
+
+export {
+  type IUiJson,
+  type IUiJsonDiscreteInputPossibleValue,
+  type IUiJsonInput,
+  type IUiJsonOutput,
+  type IUiJsonOutputData,
+  type IUiJsonOutputPlot,
+  type IUiJsonParameter,
+  uiJsonIssues
+} from './locUiJsonApi.js'
+
+// Version API.
+
+export { cppVersion, wasmVersion, version } from './locVersionApi.js'

package/src/libopencor/locFileApi.ts

@@ -0,0 +1,263 @@
+import * as vue from 'vue'
+
+import {
+  _cppLocApi,
+  _wasmLocApi,
+  cppVersion,
+  EIssueType,
+  ESedSimulationType,
+  SedDocument,
+  SedInstance,
+  SedSimulationUniformTimeCourse,
+  wasmIssuesToIssues,
+  type IIssue,
+  type IUiJson,
+  type IWasmIssues
+} from './locApi.js'
+
+// FileManager API.
+
+interface IWasmFileManagerInstance {
+  files: {
+    size(): number
+    get(index: number): { fileName: string }
+  }
+  unmanage(file: unknown): void
+}
+
+export interface IWasmFileManager {
+  instance(): IWasmFileManagerInstance
+}
+
+class FileManager {
+  private _fileManager: IWasmFileManagerInstance | undefined = undefined
+
+  private fileManager() {
+    if (this._fileManager === undefined && !cppVersion()) {
+      this._fileManager = _wasmLocApi.FileManager.instance()
+    }
+
+    return this._fileManager
+  }
+
+  unmanage(path: string): void {
+    if (cppVersion()) {
+      _cppLocApi.fileManagerUnmanage(path)
+    } else {
+      const fileManager = this.fileManager()
+
+      if (fileManager !== undefined) {
+        const files = fileManager.files
+
+        for (let i = 0; i < files.size(); ++i) {
+          const file = files.get(i)
+
+          if (file.fileName === path) {
+            fileManager.unmanage(file)
+
+            break
+          }
+        }
+      }
+    }
+  }
+}
+
+export const fileManager = new FileManager()
+
+// File API.
+
+export enum EFileType {
+  UNKNOWN_FILE,
+  CELLML_FILE,
+  SEDML_FILE,
+  COMBINE_ARCHIVE,
+  IRRETRIEVABLE_FILE
+}
+
+export interface IWasmFile {
+  type: { value: EFileType }
+  issues: IWasmIssues
+  contents(): Uint8Array
+  setContents(ptr: number, length: number): void
+  childFileFromFileName(fileName: string): File | null
+}
+
+export class File {
+  private _path: string
+  private _wasmFile: IWasmFile = {} as IWasmFile
+  private _document: SedDocument = {} as SedDocument
+  private _instance: SedInstance = {} as SedInstance
+  private _issues: IIssue[] = []
+
+  constructor(path: string, contents: Uint8Array | undefined = undefined) {
+    this._path = path
+
+    if (cppVersion()) {
+      _cppLocApi.fileCreate(path, contents)
+
+      this._issues = _cppLocApi.fileIssues(path)
+    } else if (contents !== undefined) {
+      this._wasmFile = new _wasmLocApi.File(path)
+
+      const heapContentsPtr = _wasmLocApi._malloc(contents.length)
+      const heapContents = new Uint8Array(_wasmLocApi.HEAPU8.buffer, heapContentsPtr, contents.length)
+
+      heapContents.set(contents)
+
+      this._wasmFile.setContents(heapContentsPtr, contents.length)
+
+      this._issues = wasmIssuesToIssues(this._wasmFile.issues)
+    } else {
+      // Note: we should never reach this point since we should always provide some file contents when using the WASM
+      //       version of libOpenCOR.
+
+      console.error(`No contents provided for file '${path}'.`)
+
+      return
+    }
+
+    if (this._issues.length !== 0) {
+      return
+    }
+
+    // Retrieve the SED-ML file associated with this file.
+
+    this._document = vue.markRaw(new SedDocument(this._path, this._wasmFile))
+    this._issues = this._document.issues()
+
+    if (this._issues.length !== 0) {
+      return
+    }
+
+    //---OPENCOR---
+    // We only support a limited subset of SED-ML for now, so we need to check a few more things. Might wnat to check
+    // https://github.com/opencor/opencor/blob/master/src/plugins/support/SEDMLSupport/src/sedmlfile.cpp#L579-L1492.
+
+    // Make sure that there is only one model.
+
+    const modelCount = this._document.modelCount()
+
+    if (modelCount !== 1) {
+      this._issues.push({
+        type: EIssueType.WARNING,
+        description: 'Only SED-ML files with one model are currently supported.'
+      })
+
+      return
+    }
+
+    // Make sure that the SED-ML file has only one simulation.
+
+    const simulationCount = this._document.simulationCount()
+
+    if (simulationCount !== 1) {
+      this._issues.push({
+        type: EIssueType.WARNING,
+        description: 'Only SED-ML files with one simulation are currently supported.'
+      })
+
+      return
+    }
+
+    // Make sure that the simulation is a uniform time course simulation.
+
+    const simulation = this._document.simulation(0) as SedSimulationUniformTimeCourse
+
+    if (simulation.type() !== ESedSimulationType.UNIFORM_TIME_COURSE) {
+      this._issues.push({
+        type: EIssueType.WARNING,
+        description: 'Only uniform time course simulations are currently supported.'
+      })
+
+      return
+    }
+
+    // Make sure that the initial time and output start time are the same, that the output start time and output end
+    // time are different, and that the number of steps is greater than zero.
+
+    const initialTime = simulation.initialTime()
+    const outputStartTime = simulation.outputStartTime()
+    const outputEndTime = simulation.outputEndTime()
+    const numberOfSteps = simulation.numberOfSteps()
+
+    if (initialTime !== outputStartTime) {
+      this._issues.push({
+        type: EIssueType.WARNING,
+        description: `Only uniform time course simulations with the same values for 'initialTime' (${String(initialTime)}) and 'outputStartTime' (${String(outputStartTime)}) are currently supported.`
+      })
+    }
+
+    if (outputStartTime === outputEndTime) {
+      this._issues.push({
+        type: EIssueType.ERROR,
+        description: `The uniform time course simulation must have different values for 'outputStartTime' (${String(outputStartTime)}) and 'outputEndTime' (${String(outputEndTime)}).`
+      })
+    }
+
+    if (numberOfSteps <= 0) {
+      this._issues.push({
+        type: EIssueType.ERROR,
+        description: `The uniform time course simulation must have a positive value for 'numberOfSteps' (${String(numberOfSteps)}).`
+      })
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (this._issues.length !== 0) {
+      return
+    }
+
+    // Retrieve an instance of the model.
+
+    this._instance = this._document.instantiate()
+    this._issues = this._instance.issues()
+  }
+
+  type(): EFileType {
+    return cppVersion() ? _cppLocApi.fileType(this._path) : this._wasmFile.type.value
+  }
+
+  path(): string {
+    return this._path
+  }
+
+  issues(): IIssue[] {
+    return this._issues
+  }
+
+  contents(): Uint8Array {
+    return cppVersion() ? _cppLocApi.fileContents(this._path) : this._wasmFile.contents()
+  }
+
+  document(): SedDocument {
+    return this._document
+  }
+
+  instance(): SedInstance {
+    return this._instance
+  }
+
+  uiJson(): IUiJson | undefined {
+    let uiJsonContents: Uint8Array | undefined
+
+    if (cppVersion()) {
+      uiJsonContents = _cppLocApi.fileUiJson(this._path)
+
+      if (uiJsonContents === undefined) {
+        return undefined
+      }
+    } else {
+      const uiJson = this._wasmFile.childFileFromFileName('simulation.json')
+
+      if (uiJson === null) {
+        return undefined
+      }
+
+      uiJsonContents = uiJson.contents()
+    }
+
+    const decoder = new TextDecoder()
+
+    return JSON.parse(decoder.decode(uiJsonContents))
+  }
+}