Visualize diff

[rien]

Comparing two files is the main functionality of Dolos, so this should be a clear and easy-to-use component of our web UI.

Requirements:

• code highlighting of a single file
  • the highlighter should be flexible enough so we can inject/extend the highlighting with our own styling
• highlighting which parts are unique and which parts are shared
• easy and intuitive navigation between two files
  • barcode chart: show a mini map of the file (fitting on one page) showing the parts that are shared (red) and unique (green); in order no to clutter the chart, we might only show the shared regions (hunks)
  • clicking on a shared part should scroll the common part of the other file into view; apart from aligning the two regions in the two files, we could also show a "diff" (in this case a diff between the original texts) between the two shared regions, highlighting their differences
  • if there are multiple matching parts in the other (or the current) file, they should be shown on the mini map when selected; there should be a way to toggle between these multiple parts
  • synchronous scrolling between both files (e.g. after aligning them on two hunks); Atom uses keyboard shortcut Ctrl-Alt-S to toggle scroll-sync on/off
• an overview of the matches between two files with some basic information (how long, how many kmers); where matches can be selected (showing them on the barcode chart and code viewer) and ignored

[pdawyndt]

Can we look into some existing tools for inspiration. Any existing implementations we could reuse?

Maybe try some of the browser-based IDEs that we have been looking into. Both VS Code Server and Theia have file comparison features.

[rien]

Other tools are definitely a good source for inspiration, but our implementation will be very specific because there are some distinct differences with normal differs or merge tools. So if we would decide to reuse other code, it should be very flexible and extendible.

[ArneCJacobs]

For code highlighting we could either use Prism js or Highlight js

[rien]

• No empty space between highlighted text
• Extract left and right code panel to components
• Cycle trough all hunks (left and right) when selecting a token
• Highlight all hunks on hover
• Store selected and hovered hunks/tokens in state
• Create barcode component

[ArneCJacobs]

Current todo status:

• Refine barcode component
  • the currently selected block should be shown
  • all the blocks in the barcode component should represent a line
  • the blocks should have the same colours as the selections in the code view
  • the height of the barcode should be relative to the amount of lines: see this
  • there should be a translusent square in the barchart representing where you are currently in the code view
• the current selection should be stored in the vuex store
• when scrolling horizontally, the line numbers should stay visible

[ArneCJacobs]

This issue was resolved with PR #256