Keep updating ui-template

Dashboard
1

I have a process that takes some time to complete and I wanted to add a Vue Timeline to show which steps are being executed. So the idea was that in the process (long chain of various nodes), at certain steps I branch out to the below ui-template node. So the same message is sent to this UI template, with different content, some properies are getting added as more steps are executed in the process.

The ui-template looks like this:

<template>
    <v-timeline side="end">
        <v-timeline-item :dot-color="voice_color" size="small">
            <div class="d-flex">
                <strong class="me-4">{{voice_amount}}</strong>
                <div>
                    <strong>Audio recording</strong>
                    <div class="text-body-small">
                        {{voice_text}}
                    </div>
                </div>
            </div>
        </v-timeline-item>

        <v-timeline-item :dot-color="whisper_color" size="small">
            <div class="d-flex">
                <strong class="me-4">{{whisper_amount}}</strong>
                <div>
                    <strong>Transcribe Audio</strong>
                    <div class="text-body-small">
                        {{whisper_text}}
                    </div>
                </div>
            </div>
        </v-timeline-item>

        <v-timeline-item :dot-color="llm_color" size="small">
            <div class="d-flex">
                <strong class="me-4">{{llm_amount}}</strong>
                <div>
                    <strong>Recognize Intent</strong>
                    <div class="text-body-small">
                        {{llm_text}}
                    </div>
                </div>
            </div>
        </v-timeline-item>

    </v-timeline>
</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                voice_color: 'grey',
                voice_text: 'No Audio',
                voice_amount: '',
                whisper_color: 'grey',
                whisper_text: 'Not completed yet',
                whisper_amount: '',
                llm_color: 'grey',
                llm_text: 'Not triggered yet',
                llm_amount: '',
            }
        },
        watch: {
            // watch for any changes of "count"

            msg: function(){
                    this.resetDefaults();

                    if (this.msg.rec_start) {
                        this.voice_color = 'red';
                        this.voice_amount = '';
                        this.voice_text = 'Recording...';
                    } 
                    if (this.msg.fname !== undefined) {
                        this.voice_color = 'green';
                        this.voice_amount = 'Saved';
                        this.voice_text = this.msg.fname;
                        this.whisper_color = 'yellow';
                    } 
                    if (this.msg.transcribedtext !== undefined) {
                        this.whisper_color = 'green';
                        this.whisper_amount = this.msg.whisperseconds + "ms";
                        this.whisper_text = this.msg.transcribedtext;
                        this.llm_color = 'yellow';
                    } 
                    if (this.msg.llmoutputstep) {
                        if (!this.msg.payload.done) { 
                            this.llm_color = 'red';
                            this.llm_amount = this.msg.llmseconds + "ms";
                            this.llm_text = "Error";
                        } else {
                            this.llm_color = 'green';
                            this.llm_amount = this.msg.llmseconds + "ms";
                            this.llm_text = this.msg.payload.message.content;
                        }
                    }
                
            }
        },
        computed: {

        },
        methods: {
            // expose a method to our <template> and Vue Application
            resetDefaults() {
                this.voice_color = 'grey';
                this.voice_text = 'No Audio';
                this.voice_amount = '';
                this.whisper_color = 'grey';
                this.whisper_text = 'Not completed yet';
                this.whisper_amount = '';
                this.llm_color = 'grey';
                this.llm_text = 'Not triggered yet';
                this.llm_amount = '';
            }
        },
        mounted() {
            // code here when the component is first loaded
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>

It sort of works and sort of not:

  • when I restart the process, I would expect step 2 and 3 to be grey because the default values, but they seem to show the values from the previous message. Although the new message clearly does not have the properties in the if statements.
  • if I send an empty payload, it does not reset the UI to the grey states that I expect.

I have not done much Node-Red work in the past few months, but I am sure I have not forgotten that much, and the basic if logic is correct. If certain attributes do not exists the UI should fall back to the default color/text.

I asked Gemini about this, he said that insteal of this.msg.... I should change the watch to a handler: function(val) { and deep: true, but that seem to make no difference at all.

I am looking at this for a few hours now and just can't figure out what I have done wrong.

P.S. ignore some of the comments on the code, it is from an earlier template node.