Graph Panel widget: improve graph panel resizing and visibility handling

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260324.0",
+  "version": "0.20260325.0",
   "engines": {
     "bun": ">=1.2.0"
   },
@@ -41,8 +41,8 @@
     "release": "bun src/renderer/scripts/libopencor.js && electron-builder",
     "release:local": "bun src/renderer/scripts/libopencor.js && CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --config.mac.notarize=false --publish=never",
     "start": "bun src/renderer/scripts/libopencor.js && electron-vite preview",
-    "typecheck": "bunx --bun vue-tsc --noEmit -p tsconfig.app.json",
     "start:web": "bun --cwd src/renderer start",
+    "typecheck": "bunx --bun vue-tsc --noEmit -p tsconfig.app.json",
     "version:new": "bun src/renderer/scripts/version.new.js"
   },
   "bun": {
@@ -72,7 +72,7 @@
     "@types/node": "^25.5.0",
     "@types/plotly.js": "^3.0.10",
     "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/tsconfig": "^0.9.0",
+    "@vue/tsconfig": "^0.9.1",
     "@wasm-fmt/clang-format": "^22.1.1",
     "autoprefixer": "^10.4.27",
     "cmake-js": "^8.0.0",
@@ -89,8 +89,8 @@
     "stylelint-config-standard": "^40.0.0",
     "tailwindcss": "^4.2.2",
     "tailwindcss-primeui": "^0.6.1",
-    "tar": "^7.5.12",
-    "typescript": "^5.9.3",
+    "tar": "^7.5.13",
+    "typescript": "^6.0.2",
     "unplugin-vue-components": "^32.0.0",
     "vite": "^7.3.1",
     "vue-tsc": "^3.2.6"

src/renderer/package.json

@@ -42,7 +42,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260324.0",
+  "version": "0.20260325.0",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.js",
     "build:lib": "vite build --config vite.lib.config.ts && bun scripts/copy.indexdts.js",
@@ -81,7 +81,7 @@
     "@types/node": "^25.5.0",
     "@types/plotly.js": "^3.0.10",
     "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/tsconfig": "^0.9.0",
+    "@vue/tsconfig": "^0.9.1",
     "autoprefixer": "^10.4.27",
     "esbuild": "^0.27.4",
     "postcss": "^8.5.8",
@@ -90,7 +90,7 @@
     "stylelint-config-standard": "^40.0.0",
     "tailwindcss": "^4.2.2",
     "tailwindcss-primeui": "^0.6.1",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.2",
     "unplugin-vue-components": "^32.0.0",
     "vite": "^7.3.1",
     "vue-tsc": "^3.2.6"

src/renderer/src/components/widgets/GraphPanelWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-row h-full" :class="isVisible ? 'visible' : 'invisible'">
+  <div class="flex flex-row h-full">
     <div v-if="showMarker" class="w-0.75 bg-primary" />
     <div ref="mainDivRef" class="grow h-full" @contextmenu="onContextMenu" />
     <ContextMenu ref="contextMenuRef" :model="contextMenuItems" />
@@ -123,7 +123,6 @@ defineExpose({
 
 const instanceId = Symbol('GraphPanelWidget');
 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 contextMenuRef = vue.ref<InstanceType<typeof ContextMenu> | null>(null);
@@ -596,6 +595,18 @@ const compMargins = (): IGraphPanelMargins => {
   };
 };
 
+const canMeasureMargins = (): boolean => {
+  const mainDiv = mainDivRef.value;
+
+  if (!mainDiv) {
+    return false;
+  }
+
+  const { width, height } = mainDiv.getBoundingClientRect();
+
+  return width > 0 && height > 0;
+};
+
 const updateMarginsAsync = (): void => {
   // Skip if we are already updating our margins.
 
@@ -608,6 +619,14 @@ const updateMarginsAsync = (): void => {
   // Use requestAnimationFrame for optimal timing.
 
   requestAnimationFrame(() => {
+    // Make sure that we can measure our margins before proceeding.
+
+    if (!canMeasureMargins()) {
+      updatingMargins = false;
+
+      return;
+    }
+
     const newMargins = compMargins();
 
     // Emit an update if our margins have changed.
@@ -722,26 +741,9 @@ const updatePlot = (): void => {
     .then(() => {
       plotIsReady = true;
 
-      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(mainDivRef.value);
-      }
-    })
-    .then(() => {
-      trackSize();
-
-      if (!isVisible.value) {
-        // Show the component now that the plot has been properly sized.
-
-        vue.nextTick(() => {
-          isVisible.value = true;
-        });
-      }
-
-      // Update our margins asynchronously after our initial render.
+      // Force Plotly to recalculate the layout after each react() call to keep the graph aligned with sibling panels.
 
-      updateMarginsAsync();
+      resize();
     });
 };
 

src/renderer/tsconfig.json

@@ -1,13 +1,13 @@
 {
   "compilerOptions": {
     "allowImportingTsExtensions": true,
-    "baseUrl": ".",
     "composite": true,
     "module": "nodenext",
     "moduleResolution": "nodenext",
     "noEmit": true,
     "strictNullChecks": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "emitDeclarationOnly": false
   },
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["**/*.js", "**/*.ts", "**/*.vue", "package.json"]

tsconfig.app.json

@@ -1,13 +1,14 @@
 {
   "compilerOptions": {
     "allowImportingTsExtensions": true,
-    "baseUrl": ".",
     "composite": true,
     "module": "nodenext",
     "moduleResolution": "nodenext",
-    "noEmit": true,
+    "noEmit": false,
     "strictNullChecks": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true
   },
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["**/*.js", "**/*.ts", "**/*.vue", "package.json"]

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "module": "nodenext",
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "noEmit": false,
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true
   },
   "include": ["*.ts"],
   "references": [

tsconfig.node.json

@@ -1,7 +1,10 @@
 {
   "compilerOptions": {
     "composite": true,
-    "types": ["electron-vite/node"]
+    "types": ["electron-vite/node"],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "noEmit": false
   },
   "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
   "include": ["src/main/**/*", "src/preload/**/*"]

tsconfig.web.json

@@ -1,11 +1,13 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
     "composite": true,
     "lib": ["dom", "esnext"],
     "paths": {
       "@renderer/*": ["src/renderer/src/*"]
-    }
+    },
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "noEmit": false
   },
   "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
   "include": ["src/**/*.ts"]