From 09c8795415b276a37e697b3a976ef15efb808598 Mon Sep 17 00:00:00 2001
From: hhaensel <helmut.haensel@gmx.com>
Date: Mon, 7 Oct 2024 22:44:24 +0200
Subject: [PATCH] fix react() for plots with data and layout, update README

---
 README.md                  |  2 +-
 assets/js/vueplotly.min.js | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 52e473f..0852466 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ end
 #     @in plot_cursor = Dict{String, Any}()
 # end
 
-Stipple.js_mounted(::Example) = watchplots()
+@mounted Example watchplots()
 
 # the keyword argument 'keepselection' (default = false) controls whether the selection outline shall be removed after selection
 function ui()
diff --git a/assets/js/vueplotly.min.js b/assets/js/vueplotly.min.js
index e02c861..770c17f 100644
--- a/assets/js/vueplotly.min.js
+++ b/assets/js/vueplotly.min.js
@@ -215,7 +215,16 @@
             }
         },
         react() {
-            Plotly.react(this.$el, this.data, this.innerLayout, this.config)
+            Plotly.react(this.$el, this.data, this.innerLayout, this.config).then(
+                () => {
+                    // if data and layout are stored in one object, it turns out that
+                    // react() is not sufficient to update the plot and relayout() is needed.
+                    // if layouting was successful, the height is different from '100%'
+                    if (this.$el.querySelector('.user-select-none').style.height == '100%') {
+                        this.relayout(this.innerLayout)
+                    }
+                }
+            )
         },
         removeSelection() {
             gd = this.$el;