8

How can I represent the changes between two rows of a database similar to the split diff of GitHub?

Context

I would like to visualize the changes made to a table which are happening over time. For instance, LHS would be the table from one week ago and RHS would be the current value of the table.

Since there can be a lot of changes and showing all the changes at once can be overwhelming/confusing. Hence, I want to show a condensed version of the changes as shown in the first image. If the user clicks on View All Changes button, I want to show all the differences between the rows.

Problems

The main issue is the identification of each row. How do I convey to the user which row's difference they're viewing? For now (image 1), I am showing all the columns of the row with a limit on the max string length after which it shows '...' and on hover, it shows the entire string (just like Chrome's network tab does). Not every row has an ID (or row number) or primary key so I can't just use that.

condensed row diff

Secondly, the difference is calculated for each column in a row. Once the user clicks on view all changes, how do I represent column wise difference? Currently, I am doing it as I have shown in the second image using a modal/popup.

complete diff once the user clicks on view all changes

Improve this question
5
  • Not sure I understand the question or what's happening in the table. Can you give some background info and walk us through a use-case (describe the situation, what the user is trying to accomplish) and how that relates to the table? Thanks!
    – Nicolas
    Commented Dec 19, 2018 at 15:20
  • What's the who and why for this feature? Before looking at the how.
    – DarrylGodden
    Commented Dec 20, 2018 at 9:17
  • As Nicolas said, I'm struggling with the use case here, so, assuming the data is a reflection of what you're trying to do, you want to see a history of user's username changes?
    – DarrylGodden
    Commented Dec 20, 2018 at 13:44
  • Yeah, sorry for asking again, why does "ID, username, ABC" turn into "ID:6" in the second screen? What is Abcdefgh and Abcdeabc? Why is "fgh" colored different from "abc"? What is x1, x2... y1, y2... etc? Why does x1 etc in the first column in blue while they are in orange in the second column? Why is y1... etc in green in the third column?
    – Nicolas
    Commented Dec 20, 2018 at 16:55
  • 1
    @NicolasHung I apologize for the confusion. I will rewrite the question soon and add a lot more context.
    – Anirudh Sridhar
    Commented Dec 21, 2018 at 5:36

2 Answers 2

Reset to default
1

Disclaimer: My answer does not exactly cover your case of multiple iterations (changes) over time.

Although it shows how existing database tools cope with single iteration as side-by-side diff.

  1. For example the DataGrip of JetBrains Idea (IDE): compare table data

  2. Similar the KS DB merge tool: data-diff

Maybe they help you to visualize the simple changes from version A to next version B (single iteration).

Improve this answer
0

Your second image is very clear as to what changed. I would love a gtool like that!

This, of course, is a text based answer. If you would like a GUI answer, have look at the GIT diff tool. Or whatever you use for CM configuration.

Can the user set the color/font to use to highlight the differences?

Improve this answer
1
  • Rather than using a tool, I am trying to build the tool on my own. The main challenge I am facing is when the data size is very large. Currently, we are not allowing the user to set the color/font
    – Anirudh Sridhar
    Commented Feb 25, 2019 at 9:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.