Skip to content

Fix snapshot diff viewer highlights and diff panel#7081

Open
andypalmi wants to merge 2 commits intomainfrom
fix/snapshot-diff-viewer
Open

Fix snapshot diff viewer highlights and diff panel#7081
andypalmi wants to merge 2 commits intomainfrom
fix/snapshot-diff-viewer

Conversation

@andypalmi
Copy link
Copy Markdown
Contributor

Summary

  • Use persistentHighlight and clearHighlight() from flow-renderer so highlights persist until navigation and stale glows are cleared
  • Use allChanges option so all changed nodes get highlight() entries
  • Skip highlighting for config nodes (no canvas presence); show "Global Config" / "Flow Config" badge
  • Detect config nodes by absence of x/y coordinates — works for all node packages
  • Ignore w/h in computeDiff (computed by Node-RED at render time)
  • Add "Simple view" toggle to hide position changes
  • Add word wrap and Prettify/Raw toggles in the diff panel
  • Resolve group (g) property to display name; capitalize labels

Depends on FlowFuse/flow-renderer#94

Closes #7062

Test plan

  • Compare two snapshots — verify highlights persist when navigating between changes
  • Navigate to a config node (e.g. mqtt-broker) — verify no highlight attempt, "Flow Config" or "Global Config" badge shown
  • Toggle "Simple view" — verify position-only nodes are hidden and x/y props disappear
  • Expand a diff panel with long lines — verify "Wrap" toggle works
  • Expand a diff panel with JSON string values — verify "Prettify" / "Raw" toggle works
  • Verify w/h changes do not appear in the diff

…panel

- Use persistentHighlight and clearHighlight() from flow-renderer so
  highlights persist until the user navigates and stale glows are cleared
- Use allChanges option so all changed nodes get highlight() entries
- Skip highlighting for config nodes (no canvas presence); show
  "Global Config" / "Flow Config" badge in navigation bar
- Detect config nodes by absence of x/y coordinates
- Ignore w/h in computeDiff (computed by Node-RED, not user data)
- Add "Simple view" toggle to hide position (x, y) changes
- Add word wrap and Prettify/Raw toggles in the diff panel
- Resolve group (g) property to display name; capitalize labels
- Add g to compact props set

Closes #7062
@andypalmi andypalmi force-pushed the fix/snapshot-diff-viewer branch from d40cb37 to eaa9a9e Compare April 14, 2026 14:44
IGNORED_PROPS was only applied in computeDiff for changed nodes but
not when expanding all properties for added/deleted nodes in the
grouped changes view.
@codecov
Copy link
Copy Markdown

codecov bot commented Apr 14, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.29%. Comparing base (531d622) to head (433224c).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7081   +/-   ##
=======================================
  Coverage   76.29%   76.29%           
=======================================
  Files         405      405           
  Lines       20348    20348           
  Branches     4895     4895           
=======================================
  Hits        15525    15525           
  Misses       4823     4823           
Flag Coverage Δ
backend 76.29% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Copy Markdown
Contributor

@Steve-Mcl Steve-Mcl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

couple of minor points

Copy link
Copy Markdown
Contributor

@Steve-Mcl Steve-Mcl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually add the review items this time :doh:

const v1 = this.stringify(this.value1)
const v2 = this.stringify(this.value2)
looksLikeJson (v) {
if (typeof v === 'string' && v.length > 2) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[] is 2 characters. {} is 2 characters. Both are valid JSON.

looksLikeJson (v) {
if (typeof v === 'string' && v.length > 2) {
const c = v[0]
return c === '{' || c === '['
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would fail if spaces are present. Also, I would test if the last character matches the opposite bracket.

return false
},
tryPrettify (v) {
if (typeof v === 'string' && v.length > 2 && (v[0] === '{' || v[0] === '[')) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why repeat code & not use the looksLikeJson function?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Snapshot DIff View: Investigate failure points

2 participants