5

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

  • 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 Hung Dec 19 '18 at 15:20
  • 1
    I have edited the question adding more context. – Anirudh Sridhar Dec 20 '18 at 7:41
  • What's the who and why for this feature? Before looking at the how. – DarrylGodden Dec 20 '18 at 9:17
  • 1
    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. – Anirudh Sridhar Dec 20 '18 at 9:24
  • 1
    @NicolasHung I apologize for the confusion. I will rewrite the question soon and add a lot more context. – Anirudh Sridhar Dec 21 '18 at 5:36
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?

  • 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 Feb 25 at 9:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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