From 273487087178eb8506303e613ffad4871387bae5 Mon Sep 17 00:00:00 2001
From: "D. Berge" <dberge@aaltronav.eu>
Date: Fri, 22 Aug 2025 15:54:17 +0200
Subject: [PATCH] Fix errors when loading graphs.

Errors due to the parent element having zero width / height or
rendering too early.
---
 .../project/sequence/inline-crossline.vue     | 25 +++++++++++++------
 .../project/sequence/shotpoint-timing.vue     | 25 +++++++++++++------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/lib/www/client/source/src/components/graphs/project/sequence/inline-crossline.vue b/lib/www/client/source/src/components/graphs/project/sequence/inline-crossline.vue
index 1b24792..bb44209 100644
--- a/lib/www/client/source/src/components/graphs/project/sequence/inline-crossline.vue
+++ b/lib/www/client/source/src/components/graphs/project/sequence/inline-crossline.vue
@@ -39,7 +39,8 @@ export default {
         default:
           return {
             editable: false,
-            displaylogo: false
+            displaylogo: false,
+            responsive: true
           };
       }
     },
@@ -48,7 +49,8 @@ export default {
       const base = {
         font: {
           color: this.$vuetify.theme.isDark ? "#fff" : undefined
-        }
+        },
+        autosize: true
       };
 
       switch (this.facet) {
@@ -274,18 +276,25 @@ export default {
     replot () {
       if (this.plotted) {
         const ref = this.$refs.graph;
-        Plotly.relayout(ref, {
-          width: ref.clientWidth,
-          height: ref.clientHeight
-        });
+        if (ref && ref.clientWidth > 0 && ref.clientHeight > 0) {
+          Plotly.relayout(ref, {
+            width: ref.clientWidth,
+            height: ref.clientHeight
+          });
+        }
       }
     }
 
   },
 
   mounted () {
-    this.resizeObserver = new ResizeObserver(this.replot)
-    this.resizeObserver.observe(this.$refs.graph);
+    this.$nextTick( () => {
+      if (this.items?.length) {
+        this.plot();
+      }
+      this.resizeObserver = new ResizeObserver(this.replot)
+      this.resizeObserver.observe(this.$refs.graph);
+    });
   },
 
   beforeDestroy () {
diff --git a/lib/www/client/source/src/components/graphs/project/sequence/shotpoint-timing.vue b/lib/www/client/source/src/components/graphs/project/sequence/shotpoint-timing.vue
index f716028..1a224c5 100644
--- a/lib/www/client/source/src/components/graphs/project/sequence/shotpoint-timing.vue
+++ b/lib/www/client/source/src/components/graphs/project/sequence/shotpoint-timing.vue
@@ -36,7 +36,8 @@ export default {
     config () {
       return {
         editable: false,
-        displaylogo: false
+        displaylogo: false,
+        responsive: true
       };
     },
 
@@ -53,7 +54,8 @@ export default {
           title: "Time (s)"
         },
         plot_bgcolor:"rgba(0,0,0,0)",
-        paper_bgcolor:"rgba(0,0,0,0)"
+        paper_bgcolor:"rgba(0,0,0,0)",
+        autosize: true
       };
     },
 
@@ -154,10 +156,12 @@ export default {
     replot () {
       if (this.plotted) {
         const ref = this.$refs.graph;
-        Plotly.relayout(ref, {
-          width: ref.clientWidth,
-          height: ref.clientHeight
-        });
+        if (ref && ref.clientWidth > 0 && ref.clientHeight > 0) {
+          Plotly.relayout(ref, {
+            width: ref.clientWidth,
+            height: ref.clientHeight
+          });
+        }
       }
     },
 
@@ -190,8 +194,13 @@ export default {
   },
 
   mounted () {
-    this.resizeObserver = new ResizeObserver(this.replot)
-    this.resizeObserver.observe(this.$refs.graph);
+    this.$nextTick( () => {
+      if (this.items?.length) {
+        this.plot();
+      }
+      this.resizeObserver = new ResizeObserver(this.replot)
+      this.resizeObserver.observe(this.$refs.graph);
+    });
   },
 
   beforeDestroy () {