@opencor/opencor 0.20250826.0 → 0.20250827.0

package/src/components/views/SimulationExperimentView.vue

@@ -1,218 +0,0 @@
-<template>
-  <div :class="`h-full ${simulationOnly ? 'div-simulation-only' : 'div-simulation'}`">
-    <Toolbar :id="toolbarId" class="p-1!">
-      <template #start>
-        <Button class="p-1!" icon="pi pi-play-circle" severity="secondary" text @click="onRun()" />
-        <Button class="p-1!" disabled icon="pi pi-stop-circle" severity="secondary" text />
-      </template>
-    </Toolbar>
-    <Splitter class="border-none! h-full m-0" layout="vertical">
-      <SplitterPanel :size="simulationOnly ? 100 : 89">
-        <Splitter>
-          <SplitterPanel class="ml-4 mr-4 mb-4 min-w-fit" :size="25">
-            <ScrollPanel class="h-full">
-              <SimulationPropertyEditor :file="file" />
-              <!--
-                  <SolversPropertyEditor />
-                  <GraphsPropertyEditor />
-                  <ParametersPropertyEditor />
-                  -->
-              <Fieldset legend="X-axis">
-                <Select
-                  v-model="xParameter"
-                  filter
-                  filterMode="lenient"
-                  :options="parameters"
-                  size="small"
-                  class="w-full"
-                  @change="updatePlot()"
-                />
-              </Fieldset>
-              <Fieldset legend="Y-axis">
-                <Select
-                  v-model="yParameter"
-                  filter
-                  filterMode="lenient"
-                  :options="parameters"
-                  size="small"
-                  class="w-full"
-                  @change="updatePlot()"
-                />
-              </Fieldset>
-            </ScrollPanel>
-          </SplitterPanel>
-          <SplitterPanel :size="75">
-            <GraphPanelWidget :plots="plots" />
-          </SplitterPanel>
-        </Splitter>
-      </SplitterPanel>
-      <SplitterPanel v-if="!simulationOnly" :size="11">
-        <Editor :id="editorId" class="border-none h-full" :readonly="true" v-model="consoleContents" />
-      </SplitterPanel>
-    </Splitter>
-  </div>
-</template>
-
-<script setup lang="ts">
-import * as vueusecore from '@vueuse/core'
-
-import * as vue from 'vue'
-
-import * as common from '../../common/common'
-import * as locCommon from '../../common/locCommon'
-import * as vueCommon from '../../common/vueCommon'
-import * as locApi from '../../libopencor/locApi'
-
-import { type IGraphPanelPlot } from '../widgets/GraphPanelWidget.vue'
-
-const props = defineProps<{
-  uiEnabled: boolean
-  file: locApi.File
-  isActiveFile: boolean
-  simulationOnly?: boolean
-}>()
-
-const toolbarId = `simulationExperimentToolbar_${props.file.path()}`
-const editorId = `simulationExperimentEditor_${props.file.path()}`
-const instance = props.file.instance()
-const instanceTask = instance.task(0)
-
-const parameters = vue.ref<string[]>([])
-const xParameter = vue.ref(instanceTask.voiName())
-const yParameter = vue.ref(instanceTask.stateName(0))
-const plots = vue.ref<IGraphPanelPlot[]>([])
-const consoleContents = vue.ref<string>(`<b>${props.file.path()}</b>`)
-
-function addParameter(param: string): void {
-  parameters.value.push(param)
-}
-
-addParameter(instanceTask.voiName())
-
-for (let i = 0; i < instanceTask.stateCount(); i++) {
-  addParameter(instanceTask.stateName(i))
-}
-
-for (let i = 0; i < instanceTask.rateCount(); i++) {
-  addParameter(instanceTask.rateName(i))
-}
-
-for (let i = 0; i < instanceTask.constantCount(); i++) {
-  addParameter(instanceTask.constantName(i))
-}
-
-for (let i = 0; i < instanceTask.computedConstantCount(); i++) {
-  addParameter(instanceTask.computedConstantName(i))
-}
-
-for (let i = 0; i < instanceTask.algebraicCount(); i++) {
-  addParameter(instanceTask.algebraicName(i))
-}
-
-function onRun(): void {
-  // Run the instance, output the simulation time to the console, and update the plot.
-
-  const simulationTime = instance.run()
-
-  consoleContents.value += `<br/>&nbsp;&nbsp;<b>Simulation time:</b> ${common.formatTime(simulationTime)}`
-
-  void vue.nextTick().then(() => {
-    const consoleElement = document.getElementById(editorId)?.getElementsByClassName('ql-editor')[0]
-
-    if (consoleElement !== undefined) {
-      consoleElement.scrollTop = consoleElement.scrollHeight
-    }
-  })
-
-  updatePlot()
-}
-
-const xInfo = vue.computed(() => locCommon.simulationDataInfo(instanceTask, xParameter.value))
-const yInfo = vue.computed(() => locCommon.simulationDataInfo(instanceTask, yParameter.value))
-
-function updatePlot() {
-  plots.value = [
-    {
-      x: {
-        data: locCommon.simulationData(instanceTask, xInfo.value)
-      },
-      y: {
-        data: locCommon.simulationData(instanceTask, yInfo.value)
-      }
-    }
-  ]
-}
-
-// "Initialise" our plot.
-
-vue.onMounted(() => {
-  updatePlot()
-})
-
-// Track the height of our file tablist toolbar.
-
-vueCommon.trackElementHeight(toolbarId)
-
-// Keyboard shortcuts.
-
-if (!common.isMobile()) {
-  vueusecore.onKeyStroke((event: KeyboardEvent) => {
-    if (!props.uiEnabled) {
-      return
-    }
-
-    if (props.isActiveFile && !event.ctrlKey && !event.shiftKey && !event.metaKey && event.code === 'F9') {
-      event.preventDefault()
-
-      onRun()
-    }
-  })
-}
-</script>
-
-<style scoped>
-:deep(.p-button-icon) {
-  font-size: 1.5rem;
-}
-
-:deep(.p-button-icon-only) {
-  width: 2rem;
-}
-
-:deep(.p-button-label) {
-  height: 0;
-}
-
-:deep(.p-editor-content) {
-  border: none !important;
-}
-
-:deep(.p-editor-toolbar) {
-  display: none;
-}
-
-.p-toolbar {
-  border: none;
-  border-radius: 0;
-  border-bottom: 1px solid var(--p-content-border-color);
-}
-
-:deep(.ql-editor) {
-  padding: 0.25rem 0.5rem;
-}
-
-:deep(.ql-editor > *) {
-  cursor: default;
-}
-
-.div-simulation-only {
-  height: calc(var(--block-ui-height) - var(--simulation-experiment-toolbar-height));
-}
-
-.div-simulation {
-  height: calc(
-    var(--block-ui-height) - var(--main-menu-height) - var(--file-tablist-height) -
-      var(--simulation-experiment-toolbar-height)
-  );
-}
-</style>

package/src/components/widgets/GraphPanelWidget.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="flex flex-row h-full">
-    <div v-if="showMarker" class="marker" />
-    <div ref="mainDiv" class="grow h-full" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Plotly from 'https://cdn.jsdelivr.net/npm/plotly.js-gl2d-dist-min@3.1.0/+esm'
-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
-}
-
-const props = withDefaults(
-  defineProps<{
-    plots: IGraphPanelPlot[]
-    showMarker?: boolean
-  }>(),
-  {
-    showMarker: false
-  }
-)
-
-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.useLightMode() ? '#94a3b8' : '#71717a', // --p-surface-400 / --p-surface-500
-      gridcolor: vueCommon.useLightMode() ? '#e2e8f0' : '#3f3f46', // --p-surface-200 / --p-surface-700
-      minor: {
-        gridcolor: vueCommon.useLightMode() ? '#f1f5f9' : '#27272a' // --p-surface-100 / --p-surface-800
-      }
-    }
-  }
-
-  return {
-    paper_bgcolor: vueCommon.useLightMode() ? '#ffffff' : '#18181b', // --p-content-background
-    plot_bgcolor: vueCommon.useLightMode() ? '#ffffff' : '#18181b', // --p-content-background
-    font: {
-      color: vueCommon.useLightMode() ? '#334155' : '#ffffff' // --p-text-color
-    },
-    colorway: [
-      '#7289ab', // Blue
-      '#ea7e53', // Orange
-      '#eedd78', // Yellow
-      '#e69d87', // Pink
-      '#73a373', // Green
-      '#73b9bc', // Cyan
-      '#dd6b66' // Red
-    ],
-    xaxis: axisThemeData(),
-    yaxis: axisThemeData()
-  }
-}
-
-vue.watch(
-  () => [props.plots, vueCommon.useLightMode()],
-  () => {
-    Plotly.react(
-      mainDiv.value,
-      props.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

@@ -1,128 +0,0 @@
-<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

@@ -1,167 +0,0 @@
-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'