"Too many auto-margin redraws" warnings when updating a simulation's graphs

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "1.20261016.2",
+  "version": "1.20261016.3",
   "engines": {
     "bun": ">=1.2.0"
   },

src/renderer/README.md

@@ -92,12 +92,12 @@ The `@opencor/opencor` package does **not** ship `libopencor.js`. At runtime, Op
 libopencor/downloads/wasm/<version>/libopencor.js
 ```
 
-where `<version>` is the value of the `libopencorVersion` field in the package's `package.json` file. If your application doesn't serve it, then OpenCOR fetches it from `https://opencor.ws/libopencor/downloads/wasm/<version>/libopencor.js` and imports it from a [blob URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static), so that its worker is same-origin. If your application uses a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP), then this requires:
+where `<version>` is the value of the `libopencorVersion` field in the package's `package.json` file. If your application doesn't serve it, then OpenCOR fetches it from `https://opencor.ws/libopencor/downloads/wasm/<version>/libopencor.js` and imports it from a [blob URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static), so that its pthread workers are same-origin. If your application uses a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP), then this requires:
 
 - `connect-src` to allow `https://opencor.ws` (which is needed for the threaded WASM file anyway); and
 - `script-src` and `worker-src` to allow `blob:`.
 
-If you would rather not allow `blob:` (or would rather not fetch `libopencor.js` from `https://opencor.ws`), then you can self-host `libopencor.js` by downloading it from `https://opencor.ws/libopencor/downloads/wasm/<version>/libopencor.js` and serving it, as a JavaScript file, from the above URL. Make sure to do this again whenever you update the `@opencor/opencor` package, since `<version>` will then change.
+If you would rather not fetch `libopencor.js` from `https://opencor.ws`, then you can self-host it by downloading it from `https://opencor.ws/libopencor/downloads/wasm/<version>/libopencor.js` and serving it, as a JavaScript file, from the above URL. Note that `worker-src` must still allow `blob:` since, on the Web, `libopencor.js` always spawns its pthread workers from blob URLs. Make sure to do this again whenever you update the `@opencor/opencor` package, since `<version>` will then change.
 
 ## Usage
 

src/renderer/index.html

@@ -7,7 +7,7 @@
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; connect-src *; script-src 'unsafe-eval'; script-src-elem 'self' https://apis.google.com https://cdn.jsdelivr.net https://fastly.jsdelivr.net https://gcore.jsdelivr.net https://cors-proxy.opencor.workers.dev; worker-src 'self'; font-src 'self' data:; style-src 'self' 'unsafe-inline'; frame-src 'self' https://opencorapp.firebaseapp.com; img-src 'self' blob: data:" />
+      content="default-src 'self'; connect-src *; script-src 'unsafe-eval'; script-src-elem 'self' https://apis.google.com https://cdn.jsdelivr.net https://fastly.jsdelivr.net https://gcore.jsdelivr.net https://cors-proxy.opencor.workers.dev; worker-src 'self' blob:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; frame-src 'self' https://opencorapp.firebaseapp.com; img-src 'self' blob: data:" />
     <style scoped>
     body {
       background-color: #ffffff; /* Light version of --p-content-background. */

src/renderer/package.json

@@ -42,7 +42,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "1.20261016.2",
+  "version": "1.20261016.3",
   "libopencorVersion": "1.20261016.1",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.ts",

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

@@ -537,7 +537,7 @@ const themeData = (): IThemeData => {
 };
 
 interface IAxesDataAxis {
-  automargin: boolean;
+  automargin: string;
   range?: [number, number];
   tickangle: number;
   tickfont: {
@@ -578,7 +578,7 @@ const axesData = (): IAxesData => {
 
   cachedAxesData = {
     xaxis: {
-      automargin: true,
+      automargin: 'bottom',
       tickangle: 0,
       tickfont: {
         size: axisTickFontSize
@@ -589,7 +589,7 @@ const axesData = (): IAxesData => {
       }
     },
     yaxis: {
-      automargin: true,
+      automargin: 'left+right',
       tickangle: 0,
       tickfont: {
         size: axisTickFontSize
@@ -604,6 +604,20 @@ const axesData = (): IAxesData => {
   return cachedAxesData;
 };
 
+const themeAndAxesData = (): IThemeData & IAxesData => {
+  // Merge our theme and axes data.
+  // Note: we merge each axis separately since spreading our axes data would otherwise replace our theme's axes data.
+
+  const themeLayout = themeData();
+  const axesLayout = axesData();
+
+  return {
+    ...themeLayout,
+    xaxis: { ...themeLayout.xaxis, ...axesLayout.xaxis },
+    yaxis: { ...themeLayout.yaxis, ...axesLayout.yaxis }
+  };
+};
+
 const resolvedMargin = (propValue: number | undefined, compValue: number): number => {
   if (propValue !== undefined) {
     return propValue;
@@ -798,16 +812,15 @@ const updatePlot = (): void => {
   const layout = {
     // Note: the various keys can be found at https://plotly.com/javascript/reference/.
 
-    ...themeData(),
+    ...themeAndAxesData(),
     margin: {
       t: 0,
       l: resolvedMargin(props.margins?.left, margins.value.left),
       b: props.data.xAxisTitle ? 35 : 20,
       r: resolvedMargin(props.margins?.right, margins.value.right),
       pad: 0
     },
-    showlegend: props.showLegend,
-    ...axesData()
+    showlegend: props.showLegend
   };
 
   if (props.data.xAxisRange) {
@@ -1070,10 +1083,7 @@ vue.watch(
   () => {
     vue.nextTick(() => {
       if (plotIsReady && mainDivRef.value) {
-        dependencies._plotlyJs.relayout(mainDivRef.value, {
-          ...themeData(),
-          ...axesData()
-        });
+        dependencies._plotlyJs.relayout(mainDivRef.value, themeAndAxesData());
       }
     });
   },