@opencor/opencor 0.20250813.0

package/src/components/dialogs/SettingsDialog.vue

@@ -0,0 +1,42 @@
+<template>
+  <BaseDialog header="Settings..." @hide="initialiseDialog">
+    <div class="flex gap-2 items-center">
+      <Checkbox inputId="checkForUpdatesAtStartup" :binary="true" v-model="checkForUpdatesAtStartup" />
+      <label for="checkForUpdatesAtStartup">Check for updates at startup</label>
+    </div>
+    <template #footer>
+      <Button autofocus label="OK" @click="onOk" />
+      <Button label="Cancel" severity="secondary" @click="$emit('close')" />
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import * as vue from 'vue'
+
+import { settings } from '../../common/settings'
+
+const emit = defineEmits(['close'])
+
+const checkForUpdatesAtStartup = vue.ref(settings.general.checkForUpdatesAtStartup)
+
+function initialiseDialog() {
+  // Note: we can come here as a result of hiding the dialog and this in case the dialog gets opened multiple times. We
+  //       could do this when showing the dialog, but it might result in the UI flashing (e.g., a checkbox was checked
+  //       and then it gets unchecked), hence we do it when hiding the dialog.
+
+  checkForUpdatesAtStartup.value = settings.general.checkForUpdatesAtStartup
+}
+
+settings.onInitialised(() => {
+  initialiseDialog()
+})
+
+function onOk() {
+  settings.general.checkForUpdatesAtStartup = checkForUpdatesAtStartup.value
+
+  settings.save()
+
+  emit('close')
+}
+</script>

package/src/components/dialogs/UpdateAvailableDialog.vue

@@ -0,0 +1,16 @@
+<template>
+  <BaseDialog header="Check For Updates...">
+    <div class="mt-2 mb-4">Version {{ version }} is available. Do you want to download it and install it?</div>
+    <template #footer>
+      <Button autofocus label="Yes" @click="$emit('downloadAndInstall')" />
+      <Button label="No" severity="secondary" @click="$emit('close')" />
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+defineEmits(['downloadAndInstall', 'close'])
+defineProps<{
+  version: string
+}>()
+</script>

package/src/components/dialogs/UpdateDownloadProgressDialog.vue

@@ -0,0 +1,17 @@
+<template>
+  <BaseDialog header="Downloading Update..." :closable="false" :closeOnEscape="false" style="width: 39rem">
+    <ProgressBar class="no-animation" :showValue="false" :value="percent" />
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  percent: number
+}>()
+</script>
+
+<style scoped>
+.no-animation :deep(.p-progressbar-value) {
+  transition: none !important;
+}
+</style>

package/src/components/dialogs/UpdateErrorDialog.vue

@@ -0,0 +1,18 @@
+<template>
+  <BaseDialog :header="title">
+    <div class="mt-2 mb-4">
+      {{ issue }}
+    </div>
+    <template #footer>
+      <Button autofocus label="OK" @click="$emit('close')" />
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+defineEmits(['close'])
+defineProps<{
+  title: string
+  issue: string
+}>()
+</script>

package/src/components/dialogs/UpdateNotAvailableDialog.vue

@@ -0,0 +1,12 @@
+<template>
+  <BaseDialog header="Check For Updates...">
+    <div class="mt-2 mb-4">No updates are available at this time.</div>
+    <template #footer>
+      <Button autofocus label="OK" @click="$emit('close')" />
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+defineEmits(['close'])
+</script>

package/src/components/propertyEditors/GraphsPropertyEditor.vue

@@ -0,0 +1,3 @@
+<template>
+  <PropertyEditor name="Graphs" :hasUnits="false" :properties="[]" />
+</template>

package/src/components/propertyEditors/ParametersPropertyEditor.vue

@@ -0,0 +1,3 @@
+<template>
+  <PropertyEditor name="Parameters" :properties="[]" />
+</template>

package/src/components/propertyEditors/PropertyEditor.vue

@@ -0,0 +1,61 @@
+<template>
+  <Fieldset :legend="name">
+    <DataTable
+      editMode="cell"
+      resizableColumns
+      showGridlines
+      size="small"
+      :value="properties"
+      @cell-edit-complete="onCellEditComplete"
+    >
+      <Column field="property" header="Property" :style="columnWidth" />
+      <Column field="value" header="Value" :style="columnWidth">
+        <template #body="{ data, field }">
+          {{ data[field as string] }}
+        </template>
+        <template #editor="{ data, field }">
+          <InputNumber fluid :maxFractionDigits="15" v-model="data[field]" size="small" />
+        </template>
+      </Column>
+      <Column v-if="hasUnits" field="unit" header="Unit" :style="columnWidth" />
+    </DataTable>
+  </Fieldset>
+</template>
+
+<script setup lang="ts">
+import { type DataTableCellEditCompleteEvent } from 'primevue/datatable'
+
+interface IProps {
+  name: string
+  hasUnits?: boolean
+  properties: {
+    property: string
+    value: number
+    unit?: string
+  }[]
+}
+
+const { hasUnits = true, name, properties } = defineProps<IProps>()
+const columnWidth = `width: calc(100% / ${hasUnits ? '3' : '2'})`
+const emit = defineEmits(['propertyUpdated'])
+
+function onCellEditComplete(event: DataTableCellEditCompleteEvent): void {
+  const { data, newValue, field } = event
+
+  data[field] = newValue
+
+  emit('propertyUpdated', event.index, event.newValue)
+}
+</script>
+
+<style scoped>
+:deep(.p-datatable-header-cell) {
+  transition: none;
+}
+
+:deep(.p-inputnumber-input) {
+  padding: 0 2px !important;
+  margin: 0 !important;
+  line-height: 1.2px !important;
+}
+</style>

package/src/components/propertyEditors/SimulationPropertyEditor.vue

@@ -0,0 +1,45 @@
+<template>
+  <PropertyEditor name="Simulation" :properties="properties" @propertyUpdated="onPropertyUpdated" />
+</template>
+
+<script setup lang="ts">
+import * as vue from 'vue'
+
+import * as locApi from '../../libopencor/locApi'
+
+const props = defineProps<{
+  file: locApi.File
+}>()
+
+const uniformTimeCourse = props.file.document().simulation(0) as locApi.SedSimulationUniformTimeCourse
+const voiUnit = props.file.instance().task(0).voiUnit()
+
+const properties = vue.ref([
+  {
+    property: 'Starting point',
+    value: uniformTimeCourse.outputStartTime(),
+    unit: voiUnit
+  },
+  {
+    property: 'Ending point',
+    value: uniformTimeCourse.outputEndTime(),
+    unit: voiUnit
+  },
+  {
+    property: 'Point interval',
+    value:
+      (uniformTimeCourse.outputEndTime() - uniformTimeCourse.outputStartTime()) / uniformTimeCourse.numberOfSteps(),
+    unit: voiUnit
+  }
+])
+
+function onPropertyUpdated(index: number, value: number): void {
+  if (index === 0) {
+    uniformTimeCourse.setOutputStartTime(value)
+  } else if (index === 1) {
+    uniformTimeCourse.setOutputEndTime(value)
+  } else if (index === 2) {
+    uniformTimeCourse.setNumberOfSteps((properties.value[1].value - properties.value[0].value) / value)
+  }
+}
+</script>

package/src/components/propertyEditors/SolversPropertyEditor.vue

@@ -0,0 +1,3 @@
+<template>
+  <PropertyEditor name="Solvers" :properties="[]" />
+</template>

package/src/components/views/IssuesView.vue

@@ -0,0 +1,37 @@
+<template>
+  <Fieldset class="ml-4! mr-4! mb-4!" legend="Issues">
+    <ScrollPanel :class="simulationOnly ? 'issues-scroll-panel-only' : 'issues-scroll-panel'">
+      <div v-for="(issue, index) in issues" :key="`issue_${index}`" :class="`issue ${index > 0 ? 'mt-4!' : ''}`">
+        <Message v-if="issue.type === locApi.EIssueType.ERROR" severity="error" icon="pi pi-times-circle">
+          {{ issue.description }}
+        </Message>
+        <Message v-else severity="warn" icon="pi pi-exclamation-triangle">
+          {{ issue.description }}
+        </Message>
+      </div>
+    </ScrollPanel>
+  </Fieldset>
+</template>
+
+<script setup lang="ts">
+import * as locApi from '../../libopencor/locApi'
+
+defineProps<{
+  issues: locApi.IIssue[]
+  simulationOnly?: boolean
+}>()
+</script>
+
+<style scoped>
+.issue {
+  user-select: text;
+}
+
+.issues-scroll-panel-only {
+  height: calc(100vh - 4.75rem);
+}
+
+.issues-scroll-panel {
+  height: calc(100vh - var(--main-menu-height) - var(--file-tablist-height) - 4.75rem);
+}
+</style>

package/src/components/views/SimulationExperimentUiView.vue

@@ -0,0 +1,152 @@
+<template>
+  <div :class="`flex flex-row h-full ${simulationOnly ? 'simulation-experiment-only' : 'simulation-experiment'}`">
+    <IssuesView v-if="issues.length !== 0" class="grow" :issues="issues" :simulationOnly="simulationOnly" />
+    <div v-else class="flex flex-row grow">
+      <div class="ml-4 mr-4 mb-4">
+        <Fieldset legend="Input parameters">
+          <InputWidget
+            v-for="(input, index) in (uiJson as any).input"
+            v-model="inputValues[index]"
+            v-show="showInput[index]"
+            :key="`input_${index}`"
+            :name="input.name"
+            :maximumValue="input.maximumValue"
+            :minimumValue="input.minimumValue"
+            :possibleValues="input.possibleValues"
+            :stepValue="input.stepValue"
+            :class="index !== 0 ? 'mt-6' : ''"
+            @change="updateUiAndSimulation"
+          />
+        </Fieldset>
+      </div>
+      <div :id="plotsDivId" class="grow">
+        <GraphPanelWidget
+          v-for="(_plot, index) in (uiJson as any).output.plots"
+          :key="`plot_${index}`"
+          class="graph-panel-widget"
+          :plots="plots.length !== 0 ? plots[index] : []"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as mathjs from 'mathjs'
+import * as vue from 'vue'
+
+import * as locCommon from '../../common/locCommon'
+import * as locApi from '../../libopencor/locApi'
+
+import { type IGraphPanelPlot } from '../widgets/GraphPanelWidget.vue'
+
+const props = defineProps<{
+  file: locApi.File
+  simulationOnly?: boolean
+  uiJson: locApi.IUiJson
+}>()
+
+const math = mathjs.create(mathjs.all, {})
+const model = props.file.document().model(0)
+const instance = props.file.instance()
+const instanceTask = instance.task(0)
+const plotsDivId = `plotsDiv_${props.file.path()}`
+const plots = vue.ref<IGraphPanelPlot[][]>([])
+const issues = vue.ref(locApi.uiJsonIssues(props.uiJson))
+const inputValues = vue.ref<number[]>([])
+const showInput = vue.ref<boolean[]>([])
+const idToInfo: Record<string, locCommon.ISimulationDataInfo> = {}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function evaluateValue(value: string): any {
+  let index = -1
+  const parser = math.parser()
+
+  props.uiJson.input.forEach((input: locApi.IUiJsonInput) => {
+    if (input.id !== undefined && input.id !== '') {
+      parser.set(input.id, inputValues.value[++index])
+    }
+  })
+
+  return parser.evaluate(value)
+}
+
+props.uiJson.input.forEach((input: locApi.IUiJsonInput) => {
+  inputValues.value.push(input.defaultValue)
+})
+
+props.uiJson.input.forEach((input: locApi.IUiJsonInput) => {
+  showInput.value.push(evaluateValue(input.visible ?? 'true'))
+})
+
+props.uiJson.output.data.forEach((data: locApi.IUiJsonOutputData) => {
+  idToInfo[data.id] = locCommon.simulationDataInfo(instanceTask, data.name)
+})
+
+vue.onMounted(() => {
+  updateUiAndSimulation()
+
+  // Determine the number of graph panel widgets (needed to set their height).
+
+  const plotsDiv = document.getElementById(plotsDivId)
+
+  plotsDiv?.style.setProperty('--graph-panel-widget-count', String(plotsDiv.children.length))
+})
+
+function updateUiAndSimulation() {
+  // Make sure that there are no issues.
+
+  if (issues.value.length > 0) {
+    return
+  }
+
+  // Show/hide the input widgets.
+
+  props.uiJson.input.forEach((input: locApi.IUiJsonInput, index: number) => {
+    showInput.value[index] = evaluateValue(input.visible ?? 'true')
+  })
+
+  // Update the SED-ML document.
+
+  model.removeAllChanges()
+
+  props.uiJson.parameters.forEach((parameter: locApi.IUiJsonParameter) => {
+    const componentVariableNames = parameter.name.split('/')
+
+    model.addChange(componentVariableNames[0], componentVariableNames[1], String(evaluateValue(parameter.value)))
+  })
+
+  // Run the instance and update the plots.
+
+  instance.run()
+
+  const parser = math.parser()
+
+  props.uiJson.output.data.forEach((data: locApi.IUiJsonOutputData) => {
+    parser.set(data.id, locCommon.simulationData(instanceTask, idToInfo[data.id]))
+  })
+
+  plots.value = props.uiJson.output.plots.map((plot: locApi.IUiJsonOutputPlot) => {
+    return [
+      {
+        x: { data: parser.evaluate(plot.xValue) },
+        y: { data: parser.evaluate(plot.yValue) }
+      }
+    ]
+  })
+}
+</script>
+
+<style scoped>
+.graph-panel-widget {
+  height: calc(100% / var(--graph-panel-widget-count));
+}
+
+.simulation-experiment-only {
+  height: 100vh;
+}
+
+.simulation-experiment {
+  height: calc(100vh - var(--main-menu-height) - var(--file-tablist-height));
+}
+</style>

package/src/components/views/SimulationExperimentView.vue

@@ -0,0 +1,214 @@
+<template>
+  <div :class="`h-full ${simulationOnly ? 'simulation-experiment-only' : 'simulation-experiment'}`">
+    <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">
+            <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>
+          </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<{
+  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.isActiveFile && !event.ctrlKey && !event.shiftKey && !event.metaKey && event.code === 'F9') {
+      event.preventDefault()
+
+      onRun()
+    }
+  })
+}
+</script>
+
+<style scoped>
+:deep(.p-button) {
+  transition: none;
+}
+
+: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;
+}
+
+.simulation-experiment-only {
+  height: calc(100vh - var(--simulation-experiment-toolbar-height));
+}
+
+.simulation-experiment {
+  height: calc(
+    100vh - var(--main-menu-height) - var(--file-tablist-height) - var(--simulation-experiment-toolbar-height)
+  );
+}
+</style>