Skip to content

Conversation

@corneliusroemer
Copy link
Contributor

@corneliusroemer corneliusroemer commented Dec 18, 2025

Based on quick vibe code session with @maverbiest

First attempt at offering some diffing between versions - we have nothing so far. This is better than nothing - clearly has room for improvement.

Try it out:

image

Summary

Add interactive diff view to compare metadata changes between sequence versions on the /seq/{accession}/versions page.

Features

  • Smart defaults: Auto-compares when only 2 versions exist, shows checkboxes for 3+ versions
  • URL persistence: Shareable links with ?compare=1,3 format
  • Toggle view: Show all fields or only changed fields
  • Noisy field handling: Timestamps and version info displayed greyed out at bottom
  • Visual design: Changed fields highlighted with amber background, grouped by metadata headers

Components

  • VersionsWithDiff.tsx - Main React component with version selection and data fetching
  • DiffTable.tsx - Table display with field comparisons
  • compareVersions.ts - Logic to identify changed/unchanged/noisy fields
  • types.ts - TypeScript types for comparison results

Test Plan

  • Type checking passes (npm run check-types)
  • Unit tests pass (CI=1 npm run test)
  • Code formatted (npm run format)
  • Manual test: Browse to a sequence with 2 versions on preview, verify auto-compare
  • Manual test: Browse to a sequence with 3+ versions, select 2, verify comparison
  • Manual test: Toggle "Show all fields", verify unchanged fields appear
  • Manual test: Verify URL params persist and are shareable
  • Manual test: Verify noisy fields (timestamps) are greyed out

🤖 Generated with Claude Code

🚀 Preview: https://diff-versions.loculus.org

Add interactive diff view to compare metadata changes between sequence versions.

Features:
- Smart defaults: auto-compares when only 2 versions exist
- Checkbox selection for 3+ versions
- URL persistence with ?compare=1,3 for shareable links
- Toggle to show all fields vs only changed fields
- Noisy fields (timestamps, version info) displayed greyed out
- Fields grouped by metadata headers
- Visual highlighting of changed values with amber background

Components:
- VersionsWithDiff: Main React component with version selection
- DiffTable: Table display component for field comparisons
- compareVersions: Logic to identify changed/unchanged/noisy fields
- Integrated into existing /seq/{accession}/versions page

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@corneliusroemer corneliusroemer added the preview Triggers a deployment to argocd label Dec 18, 2025
@anna-parker
Copy link
Contributor

anna-parker commented Dec 19, 2025

@anna-parker tetsing notes:
Navigated to a sequence with multiple versions: https://diff-versions.loculus.org/seq/LOC_0002H0D.4

Display name and Annotations should not be highlighted - potentially lets completely remove the annotations.

certain fields are shown even if they do not change on each comparison view (e.g. the NCBI release date at the bottom):
image
however, other fields that do not chnage (e.g. sequence details are not shown on default view as desired)

I can select 2 different versions to compare, the compare urls persist and are sharable.

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

Labels

preview Triggers a deployment to argocd

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants