From a1d12e840f9a9efd03259296b95b4a048299de05 Mon Sep 17 00:00:00 2001
From: Alan Garny <agarny@hellix.com>
Date: Tue, 24 Feb 2026 14:37:50 +1300
Subject: [PATCH 1/6] New version.

---
 package.json              | 2 +-
 src/renderer/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index dfdd9b2f..b0e59a62 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260224.0",
+  "version": "0.20260224.1",
   "scripts": {
     "archive:web": "bun src/renderer/scripts/archive.web.js",
     "build": "electron-vite build",
diff --git a/src/renderer/package.json b/src/renderer/package.json
index fc5ccf1d..e5fd5b3d 100644
--- a/src/renderer/package.json
+++ b/src/renderer/package.json
@@ -39,7 +39,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260224.0",
+  "version": "0.20260224.1",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.js",
     "build:lib": "vite build --config vite.lib.config.ts && cp index.d.ts dist/index.d.ts",

From 374ae3beac205ec20c447ec1e7602c2b0865ca8b Mon Sep 17 00:00:00 2001
From: Alan Garny <agarny@hellix.com>
Date: Tue, 24 Feb 2026 12:41:30 +1300
Subject: [PATCH 2/6] Some minor cleaning up.

---
 src/renderer/src/components/OpenCOR.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/renderer/src/components/OpenCOR.vue b/src/renderer/src/components/OpenCOR.vue
index 62504c87..b9708b1d 100644
--- a/src/renderer/src/components/OpenCOR.vue
+++ b/src/renderer/src/components/OpenCOR.vue
@@ -21,7 +21,7 @@
     >
       <input ref="files" type="file" multiple style="display: none;" @change="onChange" />
       <DragNDropComponent v-show="dragAndDropCounter" />
-      <MainMenu ref="mainMenu" :id="mainMenuId" v-if="showMainMenu"
+      <MainMenu ref="mainMenu" v-if="showMainMenu"
         :isActive="compIsActive"
         :uiEnabled="compUiEnabled"
         :hasFiles="hasFiles"
@@ -143,7 +143,6 @@ const { isDialogActive } = provideDialogState();
 const blockUi = vue.ref<vue.ComponentPublicInstance | null>(null);
 const toastId = vue.ref('opencorToast');
 const mainMenu = vue.ref<vue.ComponentPublicInstance | null>(null);
-const mainMenuId = vue.ref('opencorMainMenu');
 const files = vue.ref<HTMLElement | null>(null);
 const contents = vue.ref<InstanceType<typeof IContentsComponent> | null>(null);
 const issues = vue.ref<locApi.IIssue[]>([]);
@@ -843,7 +842,6 @@ vue.onMounted(() => {
   // Customise our IDs.
 
   toastId.value = `opencorToast${crtInstanceUid}`;
-  mainMenuId.value = `opencorMainMenu${crtInstanceUid}`;
 
   // Make ourselves the active instance.
 

From 7ea5a0982dd5cacce9c5efe0e7b86055f59b9e03 Mon Sep 17 00:00:00 2001
From: Alan Garny <agarny@hellix.com>
Date: Tue, 24 Feb 2026 13:38:32 +1300
Subject: [PATCH 3/6] OpenCOR: make sure that toasts get shown and in the
 correct instance.

---
 src/renderer/src/components/OpenCOR.vue | 48 +++++++++++--------------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/renderer/src/components/OpenCOR.vue b/src/renderer/src/components/OpenCOR.vue
index b9708b1d..01a9949e 100644
--- a/src/renderer/src/components/OpenCOR.vue
+++ b/src/renderer/src/components/OpenCOR.vue
@@ -141,7 +141,6 @@ const props = defineProps<IOpenCORProps>();
 const { isDialogActive } = provideDialogState();
 
 const blockUi = vue.ref<vue.ComponentPublicInstance | null>(null);
-const toastId = vue.ref('opencorToast');
 const mainMenu = vue.ref<vue.ComponentPublicInstance | null>(null);
 const files = vue.ref<HTMLElement | null>(null);
 const contents = vue.ref<InstanceType<typeof IContentsComponent> | null>(null);
@@ -302,7 +301,17 @@ if (crtVueAppInstance) {
 
 vueCommon.useTheme().setTheme(props.theme);
 
+// Get ready to show toasts and provide a helper to show them that ensures that the proper group id is used and that the
+// instance becomes active before the message is pushed.
+
 const toast = useToast();
+const toastId = vue.ref(`opencorToast${crtInstanceUid}`);
+
+const addToast = (options: Parameters<typeof toast.add>[0]) => {
+  activateInstance();
+
+  toast.add({ ...options, group: toastId.value });
+};
 
 // Finish initialising OpenCOR.
 
@@ -408,9 +417,8 @@ const handleAction = (action: string): void => {
         openFile(filePath);
       }
     } else {
-      toast.add({
+      addToast({
         severity: 'error',
-        group: toastId.value,
         summary: 'Handling an action',
         detail: `${action}\n\nThe action could not be handled.`,
         life: TOAST_LIFE
@@ -493,9 +501,8 @@ electronApi?.onUpdateCheckError((issue: string) => {
 // Handle errors.
 
 const onError = (message: string): void => {
-  toast.add({
+  addToast({
     severity: 'error',
-    group: toastId.value,
     summary: 'Error',
     detail: message,
     life: TOAST_LIFE
@@ -555,9 +562,8 @@ const openFile = (fileFilePathOrFileContents: string | Uint8Array | File): void
   locCommon.zipCellmlDataUrl(fileFilePathOrFileContents).then((zipCellmlDataUriInfo: locCommon.IDataUriInfo) => {
     if (zipCellmlDataUriInfo.res) {
       if (zipCellmlDataUriInfo.error) {
-        toast.add({
+        addToast({
           severity: 'error',
-          group: toastId.value,
           summary: 'Opening a file',
           detail: zipCellmlDataUriInfo.error,
           life: TOAST_LIFE
@@ -575,9 +581,8 @@ const openFile = (fileFilePathOrFileContents: string | Uint8Array | File): void
 
       if (combineArchiveDataUriInfo.res) {
         if (combineArchiveDataUriInfo.error) {
-          toast.add({
+          addToast({
             severity: 'error',
-            group: toastId.value,
             summary: 'Opening a file',
             detail: combineArchiveDataUriInfo.error,
             life: TOAST_LIFE
@@ -631,9 +636,8 @@ const openFile = (fileFilePathOrFileContents: string | Uint8Array | File): void
               });
             });
           } else {
-            toast.add({
+            addToast({
               severity: 'error',
-              group: toastId.value,
               summary: 'Opening a file',
               detail:
                 filePath +
@@ -661,9 +665,8 @@ const openFile = (fileFilePathOrFileContents: string | Uint8Array | File): void
             });
           });
         } else {
-          toast.add({
+          addToast({
             severity: 'error',
-            group: toastId.value,
             summary: 'Opening a file',
             detail: `${filePath}\n\n${common.formatMessage(common.formatError(error))}`,
             life: TOAST_LIFE
@@ -839,10 +842,6 @@ electronApi?.onSelect((filePath: string) => {
 vue.onMounted(() => {
   const blockUiElement = blockUi.value?.$el as HTMLElement;
 
-  // Customise our IDs.
-
-  toastId.value = `opencorToast${crtInstanceUid}`;
-
   // Make ourselves the active instance.
 
   setTimeout(() => {
@@ -940,9 +939,8 @@ if (props.omex) {
                 if (action.value.startsWith(FULL_URI_SCHEME)) {
                   handleAction(action.value.slice(FULL_URI_SCHEME.length));
                 } else {
-                  toast.add({
+                  addToast({
                     severity: 'error',
-                    group: toastId.value,
                     summary: 'Handling an action',
                     detail: `${action.value}\n\nThe action could not be handled.`,
                     life: TOAST_LIFE
@@ -1027,18 +1025,16 @@ const saveGitHubAccessToken = async (accessToken: string): Promise<void> => {
     const stored = await electronApi.saveGitHubAccessToken(accessToken);
 
     if (!stored) {
-      toast.add({
+      addToast({
         severity: 'warn',
-        group: toastId.value,
         summary: 'Remembering GitHub access token',
         detail: 'The token could not be stored securely, so you will need to sign in again next time.',
         life: TOAST_LIFE
       });
     }
   } catch (error: unknown) {
-    toast.add({
+    addToast({
       severity: 'warn',
-      group: toastId.value,
       summary: 'Remembering GitHub access token',
       detail: common.formatMessage(common.formatError(error)),
       life: TOAST_LIFE
@@ -1081,9 +1077,8 @@ const onDisconnectFromGitHub = async (): Promise<void> => {
       await electronApi.clearGitHubCache();
     }
   } catch (error: unknown) {
-    toast.add({
+    addToast({
       severity: 'error',
-      group: toastId.value,
       summary: 'GitHub sign-out',
       detail: common.formatMessage(common.formatError(error)),
       life: TOAST_LIFE
@@ -1124,9 +1119,8 @@ const onGitHubButtonClick = async (): Promise<void> => {
 
     await checkGitHubAccessToken(accessToken);
   } catch (error: unknown) {
-    toast.add({
+    addToast({
       severity: 'error',
-      group: toastId.value,
       summary: 'GitHub sign-in',
       detail: common.formatMessage(common.formatError(error)),
       life: TOAST_LIFE

From 1bcab51c5b639e4e3f79160141f1ab5ab9bf1932 Mon Sep 17 00:00:00 2001
From: Alan Garny <agarny@hellix.com>
Date: Tue, 24 Feb 2026 13:46:50 +1300
Subject: [PATCH 4/6] Cleaned up our use of references and IDs.

---
 .../src/components/ContentsComponent.vue      | 22 +-----
 src/renderer/src/components/MainMenu.vue      | 12 +--
 src/renderer/src/components/OpenCOR.vue       | 47 ++++++------
 ...SimulationExperimentViewSettingsDialog.vue | 19 ++---
 .../views/SimulationExperimentView.vue        | 43 ++++-------
 .../components/widgets/GraphPanelWidget.vue   | 76 +++++++++----------
 6 files changed, 94 insertions(+), 125 deletions(-)

diff --git a/src/renderer/src/components/ContentsComponent.vue b/src/renderer/src/components/ContentsComponent.vue
index df4af653..7f2252a0 100644
--- a/src/renderer/src/components/ContentsComponent.vue
+++ b/src/renderer/src/components/ContentsComponent.vue
@@ -21,7 +21,7 @@
       :scrollable="true"
       :selectOnFocus="true"
     >
-      <TabList :id="fileTablistId" class="border-b border-b-primary shrink-0">
+      <TabList class="border-b border-b-primary shrink-0">
         <Tab
           v-for="fileTab in fileTabs"
           :id="`tab_${fileTab.file.path()}`"
@@ -81,16 +81,6 @@ const props = defineProps<{
 }>();
 defineEmits<(event: 'error', message: string) => void>();
 
-export interface IContentsComponent {
-  openFile(file: locApi.File): void;
-  closeCurrentFile(): void;
-  closeAllFiles(): void;
-  hasFile(filePath: string): boolean;
-  hasFiles(): boolean;
-  selectFile(filePath: string): void;
-}
-
-const fileTablistId = vue.ref('contentsComponentFileTablist');
 const fileTabs = vue.ref<IFileTab[]>([]);
 const activeFile = vue.ref<string>('');
 
@@ -201,16 +191,6 @@ vue.watch(activeFile, (newActiveFile: string) => {
   electronApi?.fileSelected(newActiveFile);
 });
 
-// Various things that need to be done once we are mounted.
-
-const crtInstance = vue.getCurrentInstance();
-
-vue.onMounted(() => {
-  // Customise our IDs.
-
-  fileTablistId.value = `contentsComponentFileTablist${String(crtInstance?.uid)}`;
-});
-
 // Keyboard shortcuts.
 
 if (common.isDesktop()) {
diff --git a/src/renderer/src/components/MainMenu.vue b/src/renderer/src/components/MainMenu.vue
index 28f0f65f..c1d61765 100644
--- a/src/renderer/src/components/MainMenu.vue
+++ b/src/renderer/src/components/MainMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <Menubar ref="menuBar" :id="props.id" :model="items">
+  <Menubar ref="menuBarRef" :id="props.id" :model="items">
     <template #item="{ item, props }">
       <a v-bind="props.action">
         <div class="p-menubar-item-label">{{ item.label }}</div>
@@ -152,13 +152,13 @@ const items = [
 
 // A few things that can only be done when the component is mounted.
 
-const menuBar = vue.ref<(vue.ComponentPublicInstance<typeof Menubar> & { hide: () => void }) | null>(null);
+const menuBarRef = vue.ref<(InstanceType<typeof Menubar> & { hide: () => void }) | null>(null);
 
 vue.onMounted(() => {
-  if (menuBar.value) {
+  if (menuBarRef.value) {
     // Ensure that the menubar never gets the 'p-menubar-mobile' class, which would turn it into a hamburger menu.
 
-    const menuBarElement = menuBar.value.$el as HTMLElement;
+    const menuBarElement = menuBarRef.value.$el as HTMLElement;
     const mutationObserver = new MutationObserver(() => {
       if (menuBarElement.classList.contains('p-menubar-mobile')) {
         menuBarElement.classList.remove('p-menubar-mobile');
@@ -167,7 +167,7 @@ vue.onMounted(() => {
 
     mutationObserver.observe(menuBarElement, { attributes: true, attributeFilter: ['class'] });
 
-    // Close the menu when clicking clicking on the menubar but outside of the main menu items.
+    // Close the menu when clicking on the menubar but outside of the main menu items.
 
     const onClick = (event: MouseEvent) => {
       const target = event.target as Node;
@@ -177,7 +177,7 @@ vue.onMounted(() => {
         !menuBarElement.querySelector('.p-menubar-root-list')?.contains(target) &&
         !Array.from(document.querySelectorAll('.p-menubar-submenu')).some((submenu) => submenu.contains(target))
       ) {
-        menuBar.value?.hide();
+        menuBarRef.value?.hide();
       }
     };
 
diff --git a/src/renderer/src/components/OpenCOR.vue b/src/renderer/src/components/OpenCOR.vue
index 01a9949e..63ffaf1e 100644
--- a/src/renderer/src/components/OpenCOR.vue
+++ b/src/renderer/src/components/OpenCOR.vue
@@ -1,5 +1,5 @@
 <template>
-  <BlockUI ref="blockUi" class="opencor overflow-hidden h-full" :class="showMainMenu ? 'with-main-menu' : ''"
+  <BlockUI ref="blockUiRef" class="opencor overflow-hidden h-full" :class="showMainMenu ? 'with-main-menu' : ''"
     :blocked="blockUiBlocked"
     @click="activateInstance"
     @focus="activateInstance"
@@ -19,9 +19,9 @@
       @drop.prevent="onDrop"
       @dragleave="onDragLeave"
     >
-      <input ref="files" type="file" multiple style="display: none;" @change="onChange" />
+      <input ref="filesRef" type="file" multiple style="display: none;" @change="onChange" />
       <DragNDropComponent v-show="dragAndDropCounter" />
-      <MainMenu ref="mainMenu" v-if="showMainMenu"
+      <MainMenu ref="mainMenuRef" v-if="showMainMenu"
         :isActive="compIsActive"
         :uiEnabled="compUiEnabled"
         :hasFiles="hasFiles"
@@ -48,7 +48,7 @@
         />
       </div>
       -->
-      <ContentsComponent ref="contents" class="grow min-h-0"
+      <ContentsComponent ref="contentsRef" class="grow min-h-0"
         :isActive="compIsActive"
         :uiEnabled="compUiEnabled"
         :simulationOnly="!!omex"
@@ -104,17 +104,17 @@
 import primeVueAuraTheme from '@primeuix/themes/aura';
 import * as vueusecore from '@vueuse/core';
 
-import * as vue from 'vue';
-
 /* TODO: enable once our GitHub integration is fully ready.
 import firebase from 'firebase/compat/app';
 import 'firebase/compat/auth';
 import { Octokit } from 'octokit';
 */
+import BlockUI from 'primevue/blockui';
 import primeVueConfig from 'primevue/config';
 import primeVueConfirmationService from 'primevue/confirmationservice';
 import primeVueToastService from 'primevue/toastservice';
 import { useToast } from 'primevue/usetoast';
+import * as vue from 'vue';
 
 import type { IOpenCORProps } from '../../index.ts';
 
@@ -131,19 +131,20 @@ import * as initialisation from '../common/initialisation.ts';
 import * as locCommon from '../common/locCommon.ts';
 import * as version from '../common/version.ts';
 import * as vueCommon from '../common/vueCommon.ts';
-import type IContentsComponent from '../components/ContentsComponent.vue';
+import ContentsComponent from '../components/ContentsComponent.vue';
 import * as locApi from '../libopencor/locApi.ts';
 
 import { provideDialogState } from './dialogs/BaseDialog.vue';
+import MainMenu from './MainMenu.vue';
 
 const props = defineProps<IOpenCORProps>();
 
 const { isDialogActive } = provideDialogState();
 
-const blockUi = vue.ref<vue.ComponentPublicInstance | null>(null);
-const mainMenu = vue.ref<vue.ComponentPublicInstance | null>(null);
-const files = vue.ref<HTMLElement | null>(null);
-const contents = vue.ref<InstanceType<typeof IContentsComponent> | null>(null);
+const blockUiRef = vue.ref<InstanceType<typeof BlockUI> | null>(null);
+const mainMenuRef = vue.ref<InstanceType<typeof MainMenu> | null>(null);
+const filesRef = vue.ref<HTMLElement | null>(null);
+const contentsRef = vue.ref<InstanceType<typeof ContentsComponent> | null>(null);
 const issues = vue.ref<locApi.IIssue[]>([]);
 const compIssues = vue.computed(() => {
   return [...initialisation.issues.value, ...issues.value];
@@ -430,7 +431,7 @@ const handleAction = (action: string): void => {
 // Enable/disable some menu items.
 
 const hasFiles = vue.computed(() => {
-  return contents.value?.hasFiles() ?? false;
+  return contentsRef.value?.hasFiles() ?? false;
 });
 
 vue.watch(hasFiles, (newHasFiles: boolean) => {
@@ -600,8 +601,8 @@ const openFile = (fileFilePathOrFileContents: string | Uint8Array | File): void
 
     const filePath = locCommon.filePath(fileFilePathOrFileContents, cellmlDataUrlFileName, omexDataUrlCounter);
 
-    if (contents.value?.hasFile(filePath) ?? false) {
-      contents.value?.selectFile(filePath);
+    if (contentsRef.value?.hasFile(filePath) ?? false) {
+      contentsRef.value?.selectFile(filePath);
 
       return;
     }
@@ -653,7 +654,7 @@ const openFile = (fileFilePathOrFileContents: string | Uint8Array | File): void
 
           electronApi?.fileIssue(filePath);
         } else {
-          contents.value?.openFile(file);
+          contentsRef.value?.openFile(file);
         }
       })
       .catch((error: unknown) => {
@@ -749,7 +750,7 @@ const onOpenMenu = (): void => {
     return;
   }
 
-  files.value?.click();
+  filesRef.value?.click();
 };
 
 // Open remote.
@@ -802,7 +803,7 @@ const onCloseMenu = (): void => {
     return;
   }
 
-  contents.value?.closeCurrentFile();
+  contentsRef.value?.closeCurrentFile();
 };
 
 // Close all.
@@ -816,7 +817,7 @@ const onCloseAllMenu = (): void => {
     return;
   }
 
-  contents.value?.closeAllFiles();
+  contentsRef.value?.closeAllFiles();
 };
 
 // Reset all.
@@ -834,13 +835,13 @@ const onResetAll = (): void => {
 // Select.
 
 electronApi?.onSelect((filePath: string) => {
-  contents.value?.selectFile(filePath);
+  contentsRef.value?.selectFile(filePath);
 });
 
 // A few things that can only be done when the component is mounted.
 
 vue.onMounted(() => {
-  const blockUiElement = blockUi.value?.$el as HTMLElement;
+  const blockUiElement = blockUiRef.value?.$el;
 
   // Make ourselves the active instance.
 
@@ -853,7 +854,7 @@ vue.onMounted(() => {
   setTimeout(() => {
     const toastElement = document.getElementById(toastId.value);
 
-    if (toastElement) {
+    if (toastElement && blockUiElement && toastElement.parentElement !== blockUiElement) {
       blockUiElement.appendChild(toastElement);
     }
   }, SHORT_DELAY);
@@ -869,8 +870,8 @@ vue.onMounted(() => {
   }
 
   void vue.nextTick(() => {
-    const mainMenuElement = mainMenu.value?.$el as HTMLElement | undefined;
-    const blockUiElement = blockUi.value?.$el as HTMLElement | undefined;
+    const mainMenuElement = mainMenuRef.value?.$el;
+    const blockUiElement = blockUiRef.value?.$el;
 
     if (mainMenuElement && blockUiElement) {
       stopTrackingMainMenuHeight = vueCommon.trackElementHeight(mainMenuElement, blockUiElement, '--main-menu-height');
diff --git a/src/renderer/src/components/dialogs/SimulationExperimentViewSettingsDialog.vue b/src/renderer/src/components/dialogs/SimulationExperimentViewSettingsDialog.vue
index f8bff58e..a0e26a73 100644
--- a/src/renderer/src/components/dialogs/SimulationExperimentViewSettingsDialog.vue
+++ b/src/renderer/src/components/dialogs/SimulationExperimentViewSettingsDialog.vue
@@ -664,7 +664,7 @@
         <!-- Simulation issues -->
 
         <template v-if="activeTab === 'simulation'">
-          <Popover ref="simulationSettingsIssuesPopup" v-if="simulationSettingsIssues.length">
+          <Popover ref="simulationSettingsIssuesPopoverRef" v-if="simulationSettingsIssues.length">
             <div class="issues-popover-content">
               <IssuesView :issues="simulationSettingsIssues" :extraSpace="false" />
             </div>
@@ -687,7 +687,7 @@
         <!-- Solvers issues -->
 
         <template v-else-if="activeTab === 'solvers'">
-          <Popover ref="solversSettingsIssuesPopup" v-if="solversSettingsIssues.length">
+          <Popover ref="solversSettingsIssuesPopoverRef" v-if="solversSettingsIssues.length">
             <div class="issues-popover-content">
               <IssuesView :issues="solversSettingsIssues" :extraSpace="false" />
             </div>
@@ -710,7 +710,7 @@
         <!-- UI JSON issues -->
 
         <template v-else-if="activeTab === 'interactive'">
-          <Popover ref="uiJsonIssuesPopup" v-if="uiJsonIssues.length">
+          <Popover ref="uiJsonIssuesPopoverRef" v-if="uiJsonIssues.length">
             <div class="issues-popover-content">
               <IssuesView :issues="uiJsonIssues" :extraSpace="false" />
             </div>
@@ -744,6 +744,7 @@
 </template>
 
 <script setup lang="ts">
+import Popover from 'primevue/popover';
 import * as vue from 'vue';
 
 import * as locApi from '../../libopencor/locApi.ts';
@@ -786,9 +787,9 @@ const emit = defineEmits<{
 const DEFAULT_TAB = 'interactive';
 const DEFAULT_INTERACTIVE_TAB = 'simulationInputs';
 
-const simulationSettingsIssuesPopup = vue.ref<{ toggle: (event: Event) => void } | null>(null);
-const solversSettingsIssuesPopup = vue.ref<{ toggle: (event: Event) => void } | null>(null);
-const uiJsonIssuesPopup = vue.ref<{ toggle: (event: Event) => void } | null>(null);
+const simulationSettingsIssuesPopoverRef = vue.ref<InstanceType<typeof Popover> | null>(null);
+const solversSettingsIssuesPopoverRef = vue.ref<InstanceType<typeof Popover> | null>(null);
+const uiJsonIssuesPopoverRef = vue.ref<InstanceType<typeof Popover> | null>(null);
 const activeTab = vue.ref(DEFAULT_TAB);
 const activeInteractiveTab = vue.ref(DEFAULT_INTERACTIVE_TAB);
 const showSimulationSettingsIssuesPanel = vue.ref(false);
@@ -1133,19 +1134,19 @@ const onCancel = () => {
 };
 
 const toggleSimulationSettingsIssues = (event: Event) => {
-  simulationSettingsIssuesPopup.value?.toggle(event);
+  simulationSettingsIssuesPopoverRef.value?.toggle(event);
 
   showSimulationSettingsIssuesPanel.value = !showSimulationSettingsIssuesPanel.value;
 };
 
 const toggleSolversSettingsIssues = (event: Event) => {
-  solversSettingsIssuesPopup.value?.toggle(event);
+  solversSettingsIssuesPopoverRef.value?.toggle(event);
 
   showSolversSettingsIssuesPanel.value = !showSolversSettingsIssuesPanel.value;
 };
 
 const toggleUiJsonIssues = (event: Event) => {
-  uiJsonIssuesPopup.value?.toggle(event);
+  uiJsonIssuesPopoverRef.value?.toggle(event);
 
   showUiJsonIssuesPanel.value = !showUiJsonIssuesPanel.value;
 };
diff --git a/src/renderer/src/components/views/SimulationExperimentView.vue b/src/renderer/src/components/views/SimulationExperimentView.vue
index 6b1918e8..70c96e5c 100644
--- a/src/renderer/src/components/views/SimulationExperimentView.vue
+++ b/src/renderer/src/components/views/SimulationExperimentView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-full flex flex-col">
-    <Toolbar v-if="toolbarNeeded" :id="toolbarId" class="p-1! shrink-0">
+    <Toolbar v-if="toolbarNeeded" class="p-1! shrink-0">
       <template #start>
         <div :class="{ 'invisible': interactiveModeEnabled && interactiveLiveUpdatesEnabled }">
           <Button class="p-1! toolbar-button"
@@ -86,7 +86,7 @@
           </Splitter>
         </SplitterPanel>
         <SplitterPanel v-if="!simulationOnly" :size="11">
-          <div :id="editorId" class="h-full console overflow-y-auto px-2 py-1 leading-[1.42] text-[13px]" aria-readonly="true" v-html="standardConsoleContents"></div>
+          <div ref="editorRef" class="h-full console overflow-y-auto px-2 py-1 leading-[1.42] text-[13px]" aria-readonly="true" v-html="standardConsoleContents"></div>
         </SplitterPanel>
       </Splitter>
     </div>
@@ -165,7 +165,7 @@
                             :title="`Change ${run.isLiveRun ? 'live run' : 'run'} colour`"
                             @click="onToggleRunColorPopover(index, $event)"
                           />
-                          <Popover :ref="(element: any) => interactiveRunColorPopovers[index] = element as unknown as IPopover ?? undefined"
+                          <Popover :ref="(element: any) => interactiveRunColorPopoverRefs[index] = element as unknown as InstanceType<typeof Popover> ?? undefined"
                             v-if="interactiveRunColorPopoverIndex === index"
                           >
                             <div class="flex gap-2">
@@ -212,7 +212,7 @@
             <IssuesView v-show="interactiveInstanceIssues.length" class="mt-4 mr-4" style="height: calc(100% - 2rem);" :issues="interactiveInstanceIssues" />
             <GraphPanelWidget v-show="!interactiveInstanceIssues.length"
               v-for="(_plot, index) in interactiveUiJson.output.plots"
-              :ref="(element: any) => interactiveGraphPanels[index] = element as unknown as InstanceType<typeof GraphPanelWidget> ?? undefined"
+              :ref="(element: any) => interactiveGraphPanelRefs[index] = element as unknown as InstanceType<typeof GraphPanelWidget> ?? undefined"
               :key="`plot_${index}`"
               class="w-full min-h-0"
               :margins="interactiveCompMargins"
@@ -241,6 +241,7 @@
 <script setup lang="ts">
 import * as vueusecore from '@vueuse/core';
 
+import Popover from 'primevue/popover';
 import * as vue from 'vue';
 
 import * as colors from '../../common/colors.ts';
@@ -273,14 +274,12 @@ const props = defineProps<{
 }>();
 const emit = defineEmits<(event: 'error', message: string) => void>();
 
+const editorRef = vue.ref<HTMLElement | null>(null);
+
 const toolbarNeeded = vue.computed(() => {
   return (props.simulationOnly && !interactiveUiJson) || !props.simulationOnly;
 });
 
-const toolbarId = vue.ref('simulationExperimentViewToolbar');
-const editorId = vue.ref('simulationExperimentViewEditor');
-const liveUpdatesCheckboxId = vue.ref('simulationExperimentViewLiveUpdatesCheckbox');
-
 const populateParameters = (
   parameters: vue.Ref<string[]>,
   instanceTask: locSedApi.SedInstanceTask,
@@ -357,7 +356,7 @@ const onRun = (): void => {
     }
 
     vue.nextTick(() => {
-      const consoleElement = document.getElementById(editorId.value);
+      const consoleElement = editorRef.value;
 
       if (consoleElement) {
         consoleElement.scrollTop = consoleElement.scrollHeight;
@@ -474,11 +473,6 @@ const updatePlot = () => {
 
 // Interactive mode.
 
-interface IPopover {
-  toggle: (event: MouseEvent) => void;
-  hide: () => void;
-}
-
 const interactiveModeEnabled = vue.ref<boolean>(!!props.uiJson);
 const interactiveLiveUpdatesEnabled = vue.ref<boolean>(true);
 const interactiveSettingsVisible = vue.ref<boolean>(false);
@@ -549,8 +543,8 @@ const interactiveRuns = vue.ref<ISimulationRun[]>([
   }
 ]);
 const interactiveRunColorPopoverIndex = vue.ref<number>(-1);
-const interactiveRunColorPopovers = vue.ref<Record<number, IPopover | undefined>>({});
-const interactiveGraphPanels = vue.ref<Record<number, InstanceType<typeof GraphPanelWidget> | undefined>>({});
+const interactiveRunColorPopoverRefs = vue.ref<Record<number, InstanceType<typeof Popover> | undefined>>({});
+const interactiveGraphPanelRefs = vue.ref<Record<number, InstanceType<typeof GraphPanelWidget> | undefined>>({});
 const interactiveCompData = vue.computed(() => {
   // Combine the live data with the data from the tracked runs.
 
@@ -947,7 +941,7 @@ const onToggleRunColorPopover = (index: number, event: MouseEvent) => {
   vue.nextTick(() => {
     // Note: we do this in a next tick to ensure that the reference is available.
 
-    interactiveRunColorPopovers.value[index]?.toggle(event);
+    interactiveRunColorPopoverRefs.value[index]?.toggle(event);
   });
 };
 
@@ -1016,11 +1010,11 @@ const onInteractiveSettingsOk = (settings: ISimulationExperimentViewSettings): v
   // Resize our graph panels if the number of plots has changed.
 
   if (interactiveUiJson.value.output.plots.length !== oldNbOfGraphPanelWidgets) {
-    interactiveGraphPanels.value = {};
+    interactiveGraphPanelRefs.value = {};
 
     vue.nextTick().then(() => {
       for (let i = 0; i < settings.interactive.uiJson.output.plots.length; ++i) {
-        const graphPanelRef = interactiveGraphPanels.value[i];
+        const graphPanelRef = interactiveGraphPanelRefs.value[i];
 
         if (graphPanelRef) {
           graphPanelRef.resize();
@@ -1038,18 +1032,11 @@ vue.onMounted(() => {
   updateInteractiveSimulation();
 });
 
-// Various things that need to be done once we are is mounted.
+// Various things that need to be done once we are mounted.
 
-const crtInstance = vue.getCurrentInstance();
 const windowIsFocused = vueusecore.useWindowFocus();
 
 vue.onMounted(() => {
-  // Customise our IDs.
-
-  toolbarId.value = `simulationExperimentViewToolbar${String(crtInstance?.uid)}`;
-  editorId.value = `simulationExperimentViewEditor${String(crtInstance?.uid)}`;
-  liveUpdatesCheckboxId.value = `simulationExperimentViewLiveUpdatesCheckbox${String(crtInstance?.uid)}`;
-
   // Make sure that our active popover gets hidden when the window loses focus.
 
   vue.watch(
@@ -1057,7 +1044,7 @@ vue.onMounted(() => {
     (isFocused) => {
       if (!isFocused) {
         if (interactiveRunColorPopoverIndex.value !== -1) {
-          interactiveRunColorPopovers.value[interactiveRunColorPopoverIndex.value]?.hide();
+          interactiveRunColorPopoverRefs.value[interactiveRunColorPopoverIndex.value]?.hide();
 
           interactiveRunColorPopoverIndex.value = -1;
         }
diff --git a/src/renderer/src/components/widgets/GraphPanelWidget.vue b/src/renderer/src/components/widgets/GraphPanelWidget.vue
index 3e1721ab..433eafd1 100644
--- a/src/renderer/src/components/widgets/GraphPanelWidget.vue
+++ b/src/renderer/src/components/widgets/GraphPanelWidget.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-row h-full" :class="isVisible ? 'visible' : 'invisible'">
     <div v-if="showMarker" class="w-0.75 bg-primary" />
-    <div ref="mainDiv" class="grow h-full" @contextmenu="onContextMenu" />
-    <ContextMenu ref="contextMenu" :model="contextMenuItems" />
+    <div ref="mainDivRef" class="grow h-full" @contextmenu="onContextMenu" />
+    <ContextMenu ref="contextMenuRef" :model="contextMenuItems" />
   </div>
 </template>
 
@@ -71,8 +71,8 @@ const emit = defineEmits<{
 const resize = (): Promise<unknown> => {
   return Promise.resolve()
     .then(() => {
-      if (mainDiv.value) {
-        dependencies._plotlyJs.Plots.resize(mainDiv.value);
+      if (mainDivRef.value) {
+        dependencies._plotlyJs.Plots.resize(mainDivRef.value);
       }
     })
     .then(() => {
@@ -85,11 +85,11 @@ defineExpose({
 });
 
 const instanceId = Symbol('GraphPanelWidget');
-const mainDiv = vue.ref<HTMLElement | null>(null);
+const mainDivRef = vue.ref<HTMLElement | null>(null);
 const isVisible = vue.ref(false);
 const margins = vue.ref<IGraphPanelMargins>({ left: -1, right: -1 });
 const theme = vueCommon.useTheme();
-const contextMenu = vue.ref<InstanceType<typeof ContextMenu> | null>(null);
+const contextMenuRef = vue.ref<InstanceType<typeof ContextMenu> | null>(null);
 let updatingMargins = false;
 const progressMessage = vue.inject<IProgressMessage>('progressMessage');
 
@@ -166,15 +166,15 @@ const onContextMenu = (event: MouseEvent): void => {
     })
   );
 
-  contextMenu.value?.show(event);
+  contextMenuRef.value?.show(event);
 };
 
 const zoomIn = (): void => {
-  if (!mainDiv.value) {
+  if (!mainDivRef.value) {
     return;
   }
 
-  const layout = (mainDiv.value as unknown as { layout?: IPlotlyLayout }).layout;
+  const layout = (mainDivRef.value as unknown as { layout?: IPlotlyLayout }).layout;
 
   if (!layout?.xaxis?.range || !layout?.yaxis?.range) {
     return;
@@ -188,7 +188,7 @@ const zoomIn = (): void => {
   const xSpan = 0.5 * (xRange[1] - xRange[0]);
   const ySpan = 0.5 * (yRange[1] - yRange[0]);
 
-  dependencies._plotlyJs.relayout(mainDiv.value, {
+  dependencies._plotlyJs.relayout(mainDivRef.value, {
     'xaxis.range': [xCenter - 0.5 * xSpan, xCenter + 0.5 * xSpan],
     'yaxis.range': [yCenter - 0.5 * ySpan, yCenter + 0.5 * ySpan]
   });
@@ -197,11 +197,11 @@ const zoomIn = (): void => {
 };
 
 const zoomOut = (): void => {
-  if (!mainDiv.value) {
+  if (!mainDivRef.value) {
     return;
   }
 
-  const layout = (mainDiv.value as unknown as { layout?: IPlotlyLayout }).layout;
+  const layout = (mainDivRef.value as unknown as { layout?: IPlotlyLayout }).layout;
 
   if (!layout?.xaxis?.range || !layout?.yaxis?.range) {
     return;
@@ -215,7 +215,7 @@ const zoomOut = (): void => {
   const xSpan = 0.5 * (xRange[1] - xRange[0]);
   const ySpan = 0.5 * (yRange[1] - yRange[0]);
 
-  dependencies._plotlyJs.relayout(mainDiv.value, {
+  dependencies._plotlyJs.relayout(mainDivRef.value, {
     'xaxis.range': [xCenter - 2 * xSpan, xCenter + 2 * xSpan],
     'yaxis.range': [yCenter - 2 * ySpan, yCenter + 2 * ySpan]
   });
@@ -224,11 +224,11 @@ const zoomOut = (): void => {
 };
 
 const resetZoom = (): void => {
-  if (!mainDiv.value) {
+  if (!mainDivRef.value) {
     return;
   }
 
-  dependencies._plotlyJs.relayout(mainDiv.value, {
+  dependencies._plotlyJs.relayout(mainDivRef.value, {
     'xaxis.autorange': true,
     'yaxis.autorange': true
   });
@@ -237,15 +237,15 @@ const resetZoom = (): void => {
 };
 
 const copyToClipboard = async (): Promise<void> => {
-  if (!mainDiv.value) {
+  if (!mainDivRef.value) {
     return;
   }
 
   try {
-    const imageData = await dependencies._plotlyJs.toImage(mainDiv.value, {
+    const imageData = await dependencies._plotlyJs.toImage(mainDivRef.value, {
       format: 'png',
-      width: mainDiv.value.clientWidth,
-      height: mainDiv.value.clientHeight
+      width: mainDivRef.value.clientWidth,
+      height: mainDivRef.value.clientHeight
     });
 
     const binaryData = atob(imageData.split(',')[1]);
@@ -262,15 +262,15 @@ const copyToClipboard = async (): Promise<void> => {
 };
 
 const exportToImage = async (format: 'jpeg' | 'png' | 'svg' | 'webp'): Promise<void> => {
-  if (!mainDiv.value) {
+  if (!mainDivRef.value) {
     return;
   }
 
   try {
-    await dependencies._plotlyJs.downloadImage(mainDiv.value, {
+    await dependencies._plotlyJs.downloadImage(mainDivRef.value, {
       format: format,
-      width: mainDiv.value.clientWidth,
-      height: mainDiv.value.clientHeight,
+      width: mainDivRef.value.clientWidth,
+      height: mainDivRef.value.clientHeight,
       filename: 'plot'
     });
   } catch (error: unknown) {
@@ -493,7 +493,7 @@ const resolvedMargin = (propValue: number | undefined, compValue: number): numbe
 const compMargins = (): IGraphPanelMargins => {
   // Retrieve the width of the Y ticks.
 
-  const yTicks = mainDiv.value?.querySelectorAll('.ytick text');
+  const yTicks = mainDivRef.value?.querySelectorAll('.ytick text');
   let yTicksWidth = 0;
 
   if (yTicks?.length) {
@@ -505,7 +505,7 @@ const compMargins = (): IGraphPanelMargins => {
   // Retrieve the width of the Y Axis title.
 
   const yTitleWidth = props.data.yAxisTitle
-    ? mainDiv.value?.querySelector('.ytitle')?.getBoundingClientRect()?.width || 0
+    ? mainDivRef.value?.querySelector('.ytitle')?.getBoundingClientRect()?.width || 0
     : 0;
 
   // Compute the final left margin.
@@ -520,10 +520,10 @@ const compMargins = (): IGraphPanelMargins => {
   let rightMargin = 0;
 
   if (props.showLegend) {
-    rightMargin = mainDiv.value?.querySelector('.legend')?.getBoundingClientRect()?.width || 0;
+    rightMargin = mainDivRef.value?.querySelector('.legend')?.getBoundingClientRect()?.width || 0;
   }
 
-  const xTicks = mainDiv.value?.querySelectorAll('.xtick text');
+  const xTicks = mainDivRef.value?.querySelectorAll('.xtick text');
 
   if (xTicks?.length) {
     const lastTick = xTicks[xTicks.length - 1] as HTMLElement;
@@ -577,7 +577,7 @@ const updateMarginsAsync = (): void => {
     }
 
     if (Object.keys(relayoutUpdates).length) {
-      dependencies._plotlyJs.relayout(mainDiv.value, relayoutUpdates);
+      dependencies._plotlyJs.relayout(mainDivRef.value, relayoutUpdates);
     }
 
     updatingMargins = false;
@@ -604,7 +604,7 @@ const updatePlot = (): void => {
 
   dependencies._plotlyJs
     .react(
-      mainDiv.value,
+      mainDivRef.value,
       traces,
       {
         // Note: the various keys can be found at https://plotly.com/javascript/reference/.
@@ -634,7 +634,7 @@ const updatePlot = (): void => {
       if (!isVisible.value) {
         // Force Plotly to recalculate the layout after the plot is rendered to ensure that it has correct dimensions.
 
-        return dependencies._plotlyJs.Plots.resize(mainDiv.value);
+        return dependencies._plotlyJs.Plots.resize(mainDivRef.value);
       }
     })
     .then(() => {
@@ -666,7 +666,7 @@ const handleContextMenu = (event: Event): void => {
     return;
   }
 
-  contextMenu.value?.hide?.();
+  contextMenuRef.value?.hide?.();
 };
 
 vue.onMounted(() => {
@@ -675,7 +675,7 @@ vue.onMounted(() => {
   vue.nextTick(() => {
     // Reset our margins on double-click and relayout.
 
-    const plotlyElement = mainDiv.value as IPlotlyHTMLElement;
+    const plotlyElement = mainDivRef.value as IPlotlyHTMLElement;
 
     plotlyElement.on('plotly_doubleclick', () => {
       emit('resetMargins');
@@ -709,8 +709,8 @@ vue.watch(
   () => theme.useLightMode(),
   () => {
     vue.nextTick(() => {
-      if (mainDiv.value) {
-        dependencies._plotlyJs.relayout(mainDiv.value, {
+      if (mainDivRef.value) {
+        dependencies._plotlyJs.relayout(mainDivRef.value, {
           ...themeData(),
           ...axesData()
         });
@@ -725,8 +725,8 @@ vue.watch(
   () => {
     vue
       .nextTick(() => {
-        if (mainDiv.value) {
-          return dependencies._plotlyJs.relayout(mainDiv.value, {
+        if (mainDivRef.value) {
+          return dependencies._plotlyJs.relayout(mainDivRef.value, {
             'margin.l': resolvedMargin(props.margins?.left, margins.value.left),
             'margin.r': resolvedMargin(props.margins?.right, margins.value.right)
           });
@@ -745,9 +745,9 @@ vue.watch(
   () => props.showLegend,
   () => {
     vue.nextTick(() => {
-      if (mainDiv.value) {
+      if (mainDivRef.value) {
         dependencies._plotlyJs
-          .relayout(mainDiv.value, {
+          .relayout(mainDivRef.value, {
             showlegend: props.showLegend
           })
           .then(() => {

From 7d0d07647fcd5f920876f5dca4a55564d60344ac Mon Sep 17 00:00:00 2001
From: Alan Garny <agarny@hellix.com>
Date: Tue, 24 Feb 2026 15:54:42 +1300
Subject: [PATCH 5/6] Simulation Experiment view: properly show/hide the
 toolbar.

---
 .../components/views/SimulationExperimentView.vue  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/components/views/SimulationExperimentView.vue b/src/renderer/src/components/views/SimulationExperimentView.vue
index 70c96e5c..33700310 100644
--- a/src/renderer/src/components/views/SimulationExperimentView.vue
+++ b/src/renderer/src/components/views/SimulationExperimentView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-full flex flex-col">
-    <Toolbar v-if="toolbarNeeded" class="p-1! shrink-0">
+    <Toolbar v-if="showToolbar" class="p-1! shrink-0">
       <template #start>
         <div :class="{ 'invisible': interactiveModeEnabled && interactiveLiveUpdatesEnabled }">
           <Button class="p-1! toolbar-button"
@@ -11,7 +11,7 @@
           />
         </div>
       </template>
-      <template #center>
+      <template #center v-if="!simulationOnly">
         <div>
           <ToggleButton
             size="small"
@@ -276,10 +276,6 @@ const emit = defineEmits<(event: 'error', message: string) => void>();
 
 const editorRef = vue.ref<HTMLElement | null>(null);
 
-const toolbarNeeded = vue.computed(() => {
-  return (props.simulationOnly && !interactiveUiJson) || !props.simulationOnly;
-});
-
 const populateParameters = (
   parameters: vue.Ref<string[]>,
   instanceTask: locSedApi.SedInstanceTask,
@@ -611,6 +607,12 @@ const interactiveSettings = vue.computed(() => ({
 }));
 const interactiveOldSettings = vue.ref<string>(JSON.stringify(vue.toRaw(interactiveSettings.value)));
 
+// Determine whether to show the toolbar.
+
+const showToolbar = vue.computed(() => {
+  return (props.simulationOnly && interactiveUiJsonEmpty.value) || !props.simulationOnly;
+});
+
 // Populate our model parameters.
 
 populateParameters(interactiveAllModelParameters, interactiveInstanceTask);

From 140072897da20177f23fc04f40d5a4c4fae3ea9e Mon Sep 17 00:00:00 2001
From: Alan Garny <agarny@hellix.com>
Date: Tue, 24 Feb 2026 17:17:50 +1300
Subject: [PATCH 6/6] Some minor cleaning up.

---
 src/renderer/src/components/MainMenu.vue                    | 4 ++--
 src/renderer/src/components/OpenCOR.vue                     | 6 +++---
 .../src/components/views/SimulationExperimentView.vue       | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/renderer/src/components/MainMenu.vue b/src/renderer/src/components/MainMenu.vue
index c1d61765..8640a76f 100644
--- a/src/renderer/src/components/MainMenu.vue
+++ b/src/renderer/src/components/MainMenu.vue
@@ -152,13 +152,13 @@ const items = [
 
 // A few things that can only be done when the component is mounted.
 
-const menuBarRef = vue.ref<(InstanceType<typeof Menubar> & { hide: () => void }) | null>(null);
+const menuBarRef = vue.ref<(InstanceType<typeof Menubar> & { hide: () => void; $el: HTMLElement }) | null>(null);
 
 vue.onMounted(() => {
   if (menuBarRef.value) {
     // Ensure that the menubar never gets the 'p-menubar-mobile' class, which would turn it into a hamburger menu.
 
-    const menuBarElement = menuBarRef.value.$el as HTMLElement;
+    const menuBarElement = menuBarRef.value.$el;
     const mutationObserver = new MutationObserver(() => {
       if (menuBarElement.classList.contains('p-menubar-mobile')) {
         menuBarElement.classList.remove('p-menubar-mobile');
diff --git a/src/renderer/src/components/OpenCOR.vue b/src/renderer/src/components/OpenCOR.vue
index 63ffaf1e..f8a8da49 100644
--- a/src/renderer/src/components/OpenCOR.vue
+++ b/src/renderer/src/components/OpenCOR.vue
@@ -841,7 +841,7 @@ electronApi?.onSelect((filePath: string) => {
 // A few things that can only be done when the component is mounted.
 
 vue.onMounted(() => {
-  const blockUiElement = blockUiRef.value?.$el;
+  const blockUiElement = (blockUiRef.value as unknown as { $el: HTMLElement })?.$el;
 
   // Make ourselves the active instance.
 
@@ -870,8 +870,8 @@ vue.onMounted(() => {
   }
 
   void vue.nextTick(() => {
-    const mainMenuElement = mainMenuRef.value?.$el;
-    const blockUiElement = blockUiRef.value?.$el;
+    const mainMenuElement = (mainMenuRef.value as unknown as { $el: HTMLElement })?.$el;
+    const blockUiElement = (blockUiRef.value as unknown as { $el: HTMLElement })?.$el;
 
     if (mainMenuElement && blockUiElement) {
       stopTrackingMainMenuHeight = vueCommon.trackElementHeight(mainMenuElement, blockUiElement, '--main-menu-height');
diff --git a/src/renderer/src/components/views/SimulationExperimentView.vue b/src/renderer/src/components/views/SimulationExperimentView.vue
index 33700310..94ede7b1 100644
--- a/src/renderer/src/components/views/SimulationExperimentView.vue
+++ b/src/renderer/src/components/views/SimulationExperimentView.vue
@@ -165,7 +165,7 @@
                             :title="`Change ${run.isLiveRun ? 'live run' : 'run'} colour`"
                             @click="onToggleRunColorPopover(index, $event)"
                           />
-                          <Popover :ref="(element: any) => interactiveRunColorPopoverRefs[index] = element as unknown as InstanceType<typeof Popover> ?? undefined"
+                          <Popover :ref="(element: any) => interactiveRunColorPopoverRefs[index] = element"
                             v-if="interactiveRunColorPopoverIndex === index"
                           >
                             <div class="flex gap-2">
@@ -212,7 +212,7 @@
             <IssuesView v-show="interactiveInstanceIssues.length" class="mt-4 mr-4" style="height: calc(100% - 2rem);" :issues="interactiveInstanceIssues" />
             <GraphPanelWidget v-show="!interactiveInstanceIssues.length"
               v-for="(_plot, index) in interactiveUiJson.output.plots"
-              :ref="(element: any) => interactiveGraphPanelRefs[index] = element as unknown as InstanceType<typeof GraphPanelWidget> ?? undefined"
+              :ref="(element: any) => interactiveGraphPanelRefs[index] = element"
               :key="`plot_${index}`"
               class="w-full min-h-0"
               :margins="interactiveCompMargins"