Compare Snapshots

[MarianRaphael]

Epic

#3574

Description

As a Node-RED Developer and FlowFuse User,

I want to have the ability to compare Snapshots visually within the FlowFuse platform,

So that I can immediately and effortlessly identify differences between two Snapshots, enhancing my ability to debug, understand changes, and maintain the integrity of my flows

Which customers would this be availble to

Everyone - CE/Starter/Team/Enterprise

Acceptance Criteria

No response

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Customer Requested this features

1. https://app-eu1.hubspot.com/contacts/26586079/record/0-1/14701
2. https://app-eu1.hubspot.com/contacts/26586079/record/0-1/9233951
3. https://app-eu1.hubspot.com/contacts/26586079/record/0-2/10189549510

Tasks

Preview Give feedback

1. Flow Comparison: Support injection of a second flow to comparing changes flow-renderer#33
   size:M - 3 task +2
   
2. Flow Comparison: Render a list of properties that have been changed flow-renderer#34
   size:M - 3 task +2
   
3. UX Design for how to choose two snapshots to compare against #3968
   task +1
4. Development work to plug two selected snapshots into flowviewer for comparison of changes #3977
   +0
5. change log entry for snapshot compare website#2154
   size:XS - 1 task +2
   

[Steve-Mcl]

Design work for how flow-viewer would render comparative flows

The flow viewer component is now integrated into FF core and is used for viewing the flows of a snapshot but there are other parts of a snapshot to consider (installed modules/module versions/env vars). These should be taken into consideration at design time (or perhaps implemented first?)

As an MVP, the flows diff could be a quick scan of the objects in the flow array and list out any property differences in a table. Would be worth seeing what we can borrow from NR source as the logic is already written.

To do a visual diff, we could have a toggle to show before and after (with suitable blending opacities?).
We could also give the flow nodes a visual cue (like an outline) but this would likely require changes to flow renderer.

UX Design for how to choose two snapshots to compare against
A quick win here could be to add a compare button that adds "select for compare" buttons to the rows. After 2 have been selected, pop open the flow viewer?

[joepavitt]

This was delivered, but feedback is that is is a little clunky and non-intuitive to use, and uptake has been very limited.

Could do with some usability/discoverability improvements, so will move a new task into a "Design" phase to see what a design iteration could look like. Design issue/task to follow.

[Steve-Mcl]

Joe, can we schedule in a chat around design and get something drawn up next week pls?

[joepavitt]

It's a lower priority atm Steve - will likely merge this in with work planned for #4304

[joepavitt]

Majority of this has been shipped. Follow on items are open, and we can triage accordingly.