@gregoriusrippenstein/node-red-contrib-flowcompare

FlowCompare

FlowCompare node is a node for visually comparing the editor flows with flows deployed to the server.

Flows are deployed from the editor to the server, hence they can differ. This node highlights changes that have occurred in the editor.

Why?

I wanted to have a visual comparison between versions of flows. Also I wanted changes to be classified as being either visual or textual: visual changes movements of nodes, textual are content changes. Node-RED does have a diff tool however, for me, this shows too much (all nodes are shown even those that haven't changed) and changes that are visual are shown textually.

Screencast

For more details why this node exists, check out the screencast.

Description

Once installed, node can be accessed via the menu:

The panel is split into a list of changes, an image visually showing changes and a detailed change panel at the bottom:

Clicking the compare button generates the comparison details.

Update: A double click in the listing of changes will now open the edit panel for that node. That is not shown in the above animation.

Iconography

The top box contains all changes that have happened:

pencil are nodes that have content changes in addition - potentially - to visual changes
eye are nodes that have only visual changes
ticks are nodes that have been added
cross are nodes that have been deleted.

Colourisation

In the image, nodes are colorised:

grey/black are deleted nodes
green are added nodes
green with blue border are moved nodes, nodes that have only changed visually
purple nodes have textual, i.e., content changes
nodes are highlighted with red-border when change is selected in the change box

The slider to the left is the server version, to the right its the local version of the flow.

In the textual diff box:

Red are deletions and green are additions, i.e., changes.

Not Perfect

1) Image Zoom

Zoom of comparison image is not perfect since pinch does not work, only the scroll works for zoom. Since scroll is also used to scroll up and down, scroll left and right to zoom image in and out.