Merge pull request #280 from FlowFuse/219-onload-extraction

Improve onLoad & onInput behaviours
FlowFuse · Oct 19, 2023 · 97e6ce6 · 97e6ce6
2 parents 1bc99cb + aeac921
commit 97e6ce6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
@@ -379,6 +379,7 @@ module.exports = function (RED) {
 
             const { wNode, widgetEvents } = getWidgetAndConfig(id)
             if (!wNode) {
+                console.log('widget does not exist any more')
                 return // widget does not exist any more (e.g. deleted from NR and deployed BUT the ui page was not refreshed)
             }
             async function handler () {
@@ -387,7 +388,7 @@ module.exports = function (RED) {
                 if (msg) {
                     // only emit something if we have something to send
                     // and only to this connection, not all connected clients
-                    conn.emit('msg-input:' + id, msg)
+                    conn.emit('widget-load:' + id, msg)
                 }
             }
             // wrap execution in a try/catch to ensure we don't crash Node-RED

diff --git a/ui/src/widgets/data-tracker.js b/ui/src/widgets/data-tracker.js
@@ -2,19 +2,27 @@ import { inject, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 
 // by convention, composable function names start with "use"
-export function useDataTracker (widgetId, onInput) {
+export function useDataTracker (widgetId, onInput, onLoad) {
     const store = useStore()
     const socket = inject('$socket')
 
     // a composable can also hook into its owner component's
     // lifecycle to setup and teardown side effects.
     onMounted(() => {
         if (socket) {
+            socket.on('widget-load:' + widgetId, (msg) => {
+                store.commit('data/bind', {
+                    widgetId,
+                    msg
+                })
+                if (onLoad) {
+                    onLoad(msg)
+                }
+            })
             // This will on in msg input for ALL components
             socket.on('msg-input:' + widgetId, (msg) => {
                 // set states if passed into msg
                 if ('enabled' in msg) {
-                    console.log('setting enabled')
                     store.commit('ui/widgetState', {
                         widgetId,
                         enabled: msg.enabled

diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
@@ -42,7 +42,7 @@ export default {
     },
     created () {
         // can't do this in setup as we have custom onInput function
-        useDataTracker(this.id, this.onMsgInput)
+        useDataTracker(this.id, this.onMsgInput, this.onLoad)
     },
     mounted () {
         // get a reference to the canvas element
@@ -88,6 +88,12 @@ export default {
         this.chart = shallowRef(chart)
     },
     methods: {
+        onLoad (history) {
+            // we have received a history of data points
+            // we need to add them to the chart - fortunately,
+            // it's just the same process as receiving a new msg
+            this.onMsgInput(history)
+        },
         onMsgInput (msg) {
             if (Array.isArray(msg.payload) && !msg.payload.length) {
                 // clear the chart if msg.payload = [] is received