Dashboard notification dismissed early

[JonnyTech]

Current Behavior

Notification is triggered with 5 second timeout
Countdown bar starts to show progress
After 3 seconds another notification is triggered
The second notification replaces the first notification
Countdown bar starts to show progress again
After 2 seconds the notification disappears

Expected Behavior

The first notification should remain on screen for 3 seconds and then get replaced by the second triggered button click
The second notification should remain on screen for the full 5 seconds until the timeout countdown bar has completed

Steps To Reproduce

Add a button node and a trigger node and a notification node to the flow
Wire up to link the button node to the trigger node to the notification node
Set the repeat node to send a trigger then again after 3 seconds
Edit notification node to display top right for 5 seconds with a countdown bar
Click the button and observe the notification(s) for 5 seconds rather than 8 (3+5)

Environment

• Dashboard version: 1.11.1
• Node-RED version: 3.1.9
• Node.js version: v20.14.0
• npm version: 10.7.0
• Platform/OS: MX Linux x64
• Browser: Firefox 126.0.1 (64-bit)

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

[colinl]

I can confirm the issue.
Here is a flow to demonstrate it

[{"id":"882ea9cf77f2158f","type":"ui-button","z":"997da33a0beedade","group":"4f87bd59a15b847e","name":"","label":"notification","order":0,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":300,"y":5200,"wires":[["cd666412aaa38259"]]},{"id":"cd666412aaa38259","type":"trigger","z":"997da33a0beedade","name":"","op1":"Notification 1","op2":"Notification 2","op1type":"str","op2type":"str","duration":"3","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":480,"y":5200,"wires":[["dbd8b9ae440c89dd"]]},{"id":"dbd8b9ae440c89dd","type":"ui-notification","z":"997da33a0beedade","ui":"ID-BASE-1","position":"top right","colorDefault":true,"color":"#000000","displayTime":"5","showCountdown":true,"outputs":1,"allowDismiss":true,"dismissText":"Close","raw":false,"className":"","name":"","x":690,"y":5200,"wires":[[]]},{"id":"4f87bd59a15b847e","type":"ui-group","name":"test","page":"c6ff182a4185f2f2","width":"6","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"]},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"ID-BASE-1","path":"/testpage","icon":"home","layout":"grid","theme":"f9b6670b127dc219","order":1,"className":"","visible":"true","disabled":"false"},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

I am not certain what the ideal result should be when the the node is sent a new notification before the first has expired.

[cgjgh]

The Vuetify snackbar component used for notifications does not have a queuing feature as it goes against the Material Design guidelines. As it seems, successive notifications replace the previous one which is not ideal when receiving multiple notifications.

There is a Vuetify lab component to allow queuing in progress but seems to be still some way off from being usable.

Here is an alternative third-party snackbar component that offers a rich set of features, including the ability to display multiple notifications at once. https://vuetify-sonner.vercel.app/

I believe this listed feature would help resolve #733 as well.

Curious to know what your opinions are on using it in D2.

[colinl]

As a workaround, once the enhancements described in pull request #932 have been released then one will be able to easily implement a queuing strategy around the node in node red so that they appear sequentially.

[joepavitt]

This should be possible to build a workaround into the Dashboard-level logic, rather than relying on Vuetify to implement features for us.