HTML Diff for Revisions Visualization

[m6121]

Feature request

Currently, the revision visualization displays only the list of revisions (in particular the body of each revision). Despite the fact that revisions for attachments and all other information related to the experiment such as changes of linked items etc. would be needed (see also issue #1209), a visualization of the body in the form of a HTML Diff would substantially increase the usefulness of the visualization.

Source code for such comparison already exist and might be employed, e.g. https://ourcodeworld.com/articles/read/653/how-to-diff-html-compare-and-highlight-differences-and-generate-output-in-html-with-javascript

[NicolasCARPi]

Hello,

Something that might also be considered is some sort of timeline where actions like "this file was updated" or "this comment was added" could be seen on the revisions page.

Also, I would really love to store only the delta instead of the full body like now, but it's far from being trivial to implement. Some sort of git-like algorithm is needed.

As for the library you are pointing out, I will not add code that is not maintained (no commit for the past 7 years) but it could be used for inspiration.

[NicolasCARPi]

So there is this extension: Wikidiff2, used by Wikipedia so it should be usable. I would rather go with a client-side diffing like https://github.com/kpdecker/jsdiff.

[fathoni]

This would be very useful. Some experimenters are against eLabFTW adaptation as currently they are already used to having the Git-style experiment template text diff from a version control ecosystem. The use case would be when an experimenter modifies an experiment template and adapts it according to their experiment parameters - so that adapted parameters that are deviated from the experiment template are highlighted. From the discussion above, apparently, there is a chance that a plugin such as jsdiff could be adapted within eLabFTW for text-diffing? If so, could you give a hint on how a non-PHP programmer could start - e.g. any particular PHP/JS framework used for eLabFTW implementation? Thank you for eLabFTW, also thank you for your answer in advance!

[NicolasCARPi]

If so, could you give a hint on how a non-PHP programmer could start - e.g. any particular PHP/JS framework used for eLabFTW implementation?

First thing is to try and setup a dev env (see https://doc.elabftw.net/contributing.html). There are no specific frameworks used, but Symfony libraries are used, and javascript is written in typescript before being transpiled. Note that something like this: https://www.npmjs.com/package/diff-match-patch could be used to show diffs between the stored revisions of templates/experiments.

[manuSrep]

Dear Nicolas,
Recently we went through a customer audit and the auditor pointed out how important proper audit trail is for an electronic notebook system (We use elabFTW in a company environment and have Pro support). We would really need an audit trail that shows:

• differences in changes from version to version
• changes made w.r.t linked items, json field entries, attachments, ...
• highlight when and by whom! a timestamp was created
• storing only differences would be also great w.r.t to database size

Could this feature request set to high priority?

[NicolasCARPi]

highlight when and by whom! a timestamp was created

This change has been added and will be part of the next patch release:

storing only differences would be also great w.r.t to database size

You don't have to convince me there!

Could this feature request set to high priority?

Priority raised.

[manuSrep]

Priority raised.
Thanks Nicloas

highlight when and by whom! a timestamp was created

This change has been added and will be part of the next patch release:

This is looking great. How is it avoided, that the name can be edited afterwards (If I am correct it is just a comment which is editable). Will this be addressed as part of issue #3656?

What about the third aspect of audit trail for:

changes made w.r.t linked items, json field entries, attachments, ...
Are there any plans on those as well?

[NicolasCARPi]

Yes, the comment can be edited but the "author" in the database cannot. This was easy to add. What I'm planning next is to have in view mode the same thing as in edit mode with a "More information" menu entry showing all the "metadata" of that uploaded file in a non-editable way.

changes made w.r.t linked items, json field entries, attachments, ... Are there any plans on those as well?

Yes, definitely.

[NicolasCARPi]

What I'm planning next is to have in view mode the same thing as in edit mode with a "More information" menu entry showing all the "metadata" of that uploaded file in a non-editable way.

So now even if the comment is changed the user that created the archive can still be shown in an non editable way.

[manuSrep]

Looks great, very much appreciated.

[NicolasCARPi]

devlog

Turns out that diff-patch-match is already a dependency (hoisted from "ve-sequence-utils#jsondiffpatch#diff-match-patch"). So I started playing with it:

Seems much easier to get something working in JS rather than PHP. But a PHP/backend solution would allow to store only the diff in the revisions, which is the end goal here.

[m6121]

This already looks awesome! It would really much help to get the main changes in a revision.

[manuSrep]

devlog

Turns out that diff-patch-match is already a dependency (hoisted from "ve-sequence-utils#jsondiffpatch#diff-match-patch"). So I started playing with it:

Seems much easier to get something working in JS rather than PHP. But a PHP/backend solution would allow to store only the diff in the revisions, which is the end goal here.

Great Progress, thanks Nicolas, especially in combination with #3865 . Of course backend solution is desirable from technical point of view but from users perceptive, this is a huge boost already. With the proposed system, it will me much easier to see what was changed.
Keep on :-)

[NicolasCARPi]

Still very much a work in progress, but this is where I'm at: