Repository navigation
feat(web): side-by-side old and new views in compare mode - #6
Merged
Merged
Conversation
A changed component's compare page gets a view switch, kept in the link (v=): Changes (the highlighted later version, now with its diagram), Side by side, Old and New. - Side by side: each version's own class diagram, laid out once from the union graph so matching boxes sit at the same place; removed items are marked on the left, added on the right, changed on both. Pan and zoom can be linked, double-click expands on both sides, export per side. - Content trees of both versions lined up row by row, with blank rows for items only one side has; opening a node opens it on both sides. - XSD source of both versions with a Myers line diff, word highlights in changed lines, folded unchanged stretches and a unified mode; type links on the left open the earlier version's pages. - Old / New: the full normal page of either version; earlier-version pages get their own route (#/old/...). - Markers (+, -, ~) and strike-through besides colour; works in dark mode.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Requested by Mathias · project thread
Compare mode showed changes only as colours on the later version. The page of a changed component now also shows the previous state and the new state, in the diagram and in the code, side by side.
What changed
v=).xq=). Each side has its own export. The two sides stack on narrow screens.web/src/textdiff.ts(no new dependency) gives line pairs and word highlights inside changed lines. Indentation-only changes are ignored. Long unchanged stretches are folded, a Unified toggle is available, and both sides scroll as one table. Type links still work: links on the left open the earlier version's pages through a new#/old/<kind>/<qname>route, and links on the right open the later version.+/−/~markers, strike-through and dashed outlines are used alongside colour, and the views were checked in the dark theme..xsdfiles are now available for its source view (compareSources=when they are not next to its bundle).x=diagram parameter no longer adds component 0 to the expanded set.Tested with railML 3.2 vs 3.3 (
rail3:Balise) in Chromium via Playwright: light and dark themes, 400 px width, linked pan and zoom, unified and fold toggles, and links on the left side.Generated by Claude Code