ReactiveChart.vue seems to work fine

guiapp/package-lock.json

@@ -15,6 +15,7 @@
         "mathjs": "^9.5.0",
         "plotly.js-dist-min": "^2.6.2",
         "quasar": "^2.0.0",
+        "uuid": "^8.3.2",
         "vuex": "^4.0.1"
       },
       "devDependencies": {
@@ -24,6 +25,7 @@
         "@types/lodash": "^4.14.175",
         "@types/node": "^12.20.21",
         "@types/plotly.js-dist-min": "^2.3.0",
+        "@types/uuid": "^8.3.1",
         "@typescript-eslint/eslint-plugin": "^4.16.1",
         "@typescript-eslint/parser": "^4.16.1",
         "electron": "^14.0.0",
@@ -2445,6 +2447,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@types/uuid": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz",
+      "integrity": "sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg==",
+      "dev": true
+    },
     "node_modules/@types/webpack": {
       "version": "4.41.30",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz",
@@ -12670,6 +12678,16 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
+      "dev": true,
+      "bin": {
+        "uuid": "bin/uuid"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -13764,13 +13782,11 @@
       }
     },
     "node_modules/uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
-      "dev": true,
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "bin": {
-        "uuid": "bin/uuid"
+        "uuid": "dist/bin/uuid"
       }
     },
     "node_modules/v8-compile-cache": {
@@ -16544,6 +16560,12 @@
         }
       }
     },
+    "@types/uuid": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz",
+      "integrity": "sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.30",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz",
@@ -24393,6 +24415,14 @@
         "faye-websocket": "^0.11.3",
         "uuid": "^3.4.0",
         "websocket-driver": "^0.7.4"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "source-list-map": {
@@ -25236,10 +25266,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "v8-compile-cache": {
       "version": "2.3.0",

guiapp/package.json

@@ -17,6 +17,7 @@
     "mathjs": "^9.5.0",
     "plotly.js-dist-min": "^2.6.2",
     "quasar": "^2.0.0",
+    "uuid": "^8.3.2",
     "vuex": "^4.0.1"
   },
   "devDependencies": {
@@ -26,6 +27,7 @@
     "@types/lodash": "^4.14.175",
     "@types/node": "^12.20.21",
     "@types/plotly.js-dist-min": "^2.3.0",
+    "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
     "electron": "^14.0.0",

guiapp/src/components/ReactiveChart.vue

@@ -1,18 +1,20 @@
 <template>
-  <div id="plotly_chart"></div>
+  <div :id="chartUUID"></div>
 </template>
 
 <script lang="ts">
-import { newPlot, Data, Layout, Config } from 'plotly.js-dist-min'
+import { newPlot, react, Data, Layout, Config } from 'plotly.js-dist-min'
 import {
   defineComponent,
   PropType,
+  watch,
   onMounted,
   onUnmounted,
 } from 'vue'
+import {cloneDeep} from 'lodash'
+import { v4 as uuidv4 } from 'uuid'
 
 interface PlotlyChart {
-  uuid: string,
   data: Data[],
   layout: Layout,
   config: Config|undefined
@@ -26,30 +28,47 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const chartUUID = uuidv4()
+    let chartLocal = cloneDeep(props.chart)
 
-    function  handleResize() {
+    // Update (or add if absent) width and height of the layout to fit current window
+    // and replot it.
+    function plotlyReact () {
       const width = window.innerWidth
       const height = window.innerHeight*0.8
-      // props.chart.layout.width = width * 0.92
-      // props.chart.layout.height = height * 0.95
-      // // if (width < 600) props.chart.layout.width = width
-      // if (height < 600) props.chart.layout.height = height
-      console.log(width, height)
-      console.log('layout', props.chart.layout.width, props.chart.layout.height)
+      chartLocal.layout.width = width * 0.92
+      chartLocal.layout.height = height * 0.95
+      if (height < 600) chartLocal.layout.height = height
+
+      // react(...) is a promise, but we do not care to await it, so mark it with `void` keyword
+      if (chartLocal.config == undefined) {
+        void react(chartUUID, chartLocal.data, chartLocal.layout)
+      } else {
+        void react(chartUUID, chartLocal.data, chartLocal.layout, chartLocal.config)
+      }
     }
 
-    window.addEventListener('resize', handleResize)
-    handleResize()
-    onUnmounted(()=>{
-      window.removeEventListener('resize', handleResize)
-    })
     onMounted( async () => {
-      if (props.chart.config == undefined) {
-        await newPlot('plotly_chart', props.chart.data, props.chart.layout)
+      if (chartLocal.config == undefined) {
+        await newPlot(chartUUID, chartLocal.data, chartLocal.layout)
       } else {
-        await newPlot('plotly_chart', props.chart.data, props.chart.layout, props.chart.config)
+        await newPlot(chartUUID, chartLocal.data, chartLocal.layout, chartLocal.config)
       }
     })
+
+    window.addEventListener('resize', plotlyReact)
+    onUnmounted(()=>{
+      window.removeEventListener('resize', plotlyReact)
+    })
+
+    watch(props, ()=>{
+      chartLocal = cloneDeep(props.chart)
+      plotlyReact()
+    })
+
+    return {
+      chartUUID
     }
+  }
 })
 </script>

guiapp/src/pages/Spectrum.vue

@@ -75,10 +75,11 @@ export default defineComponent({
           x: -.1,
           y: 1.05
         },
-        width: 100,
-        height: 100,
       }
     })
+    setTimeout(()=>{
+      chart.value.layout.yaxis.title='some new title'
+    }, 3000)
     // const $store = useStore()
     return {chart}
   }