Ensure "replace" mode chart deletes old data

[Steve-Mcl]

Description

• Add a deleteMessages mutation to remove old data from datastore
• dont let chart animate or raise events when clearing

Before

After

Demo flow for testing

Demo flow is in the issue

Related Issue(s)

closes #1899

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label

[Steve-Mcl]

@colinl would you be in a position review and test this in various forms and see if it improves matters for you?

[colinl]

I am on holiday so might not have time to look at it properly for a few days.

There is a separate issue that I have been looking at, that if data is being regularly added to the chart, and X Axis limit is set to a time, that the data is not stripped off the front of the chart as new data is added at the end. This is a browser only issue I think as switching to a different page and back again does remove the old data. The fundamental issue is that in the vue file in limitDataSize, the line
if (cutoff && d.x < cutoff) {
should be
if (cutoff && d[0] < cutoff) {
However, I am not sure it is simply a matter of changing that, as I think that then if a batch of historical timestamped data were added then that might immediately be removed as it is older than the config spec, though I have not confirmed that this is the case.
Probably this can be considered a separate issue though, so I will concentrate on this PR when I do have some time.

[colinl]

Starting to look at it now.
Is this already handled correctly server side?

[Steve-Mcl]

Is this already handled correctly server side

I have a distant memory that it is replaced in back end (but it's worth a double check)

[colinl]

Answering that myself, it seems that it is already handled in the server.

[colinl]

OK, it all looks good to me, given my rather limited knowledge of how the data store works.

[colinl]

Actually, could you take a look at the server side code @Steve-Mcl? In ui-chart.js, onInput() it has

                    if (config.action === 'replace') {
                        // clear our data store as we are replacing data
                        datastore.save(base, node, [])
                    }

Should the if also include || msg.action === 'replace'?

[colinl]

In fact the datastore has to be cleared if the action being performed is replace. This is the case either if msg.action is 'replace' or if the configured action is 'replace' and is not being overridden by msg.action set to 'append'. So the test has to be:
if (msg.action === 'replace' || (config.action === 'replace' && msg.action !== 'append')) {
I have tested this with the various combinations and it seems to work for me.