This proposal has been accepted to be implemented in the main repository. Check for updates in the comments

Improve Diff visualization for amendments

Ivan Vergés 28/05/2021 12:09 Main repo (accepted)

Is your feature request related to a problem? Please describe.
The current visualization of amendments uses a page that shows class diff tool that only works well for text (code like) comparisons. Comparisons between HTML texts are pretty much useless and very confusing. Also the tools for this job is very buggy (it is a customization in the Decidim code that does not work very well).

Describe the solution you'd like

As proposals are now using HTML, and there are not really good tools to compare differences in HTML (I challenge anyone to find them) I propose to modify this feature by giving the user 3 types of views to compare:

Text diff view: This strips all the HTML from the original proposal and the amendment and places automatic line endings (\n char) after 80/100 chars (similar and, in fact using, as mailers do when creating a text version of a message). This creates a good input for the diff tools and provides useful marks on the relevant differences in the text, without other decorations.
Source diff view: For the advanced user, this compares the source code (usually HTML but also without creating artificial new lines), similar as what currently exists. Still improved a little bit because now the differences are marked in stronger colors.
Preview: This view shows the amendment as if it was a proposal, so the user can see how it looks. Currently there's no way to see an amendment as if it was accepted.

The 3 views will be clearly available as tabs, with big buttons. unified and side-by-side views will be applicable as well as a submenu.

For an example of the implementation take a look at:

https://greensconnect.ca/processes/Policy2021/f/223/proposals/2241

Describe alternatives you've considered
I've tried first to improve the HTML diff tools that is customized in Decidim. but it is really complicated to do it properly as HTMl can be very unpredictable. It is a much bigger work and i've been unable to find any opensource library capable of doing it.

Additional context

see attachment

Does this issue could impact on users private data?
Ex. issues related with user's sign up/sign in process, verifications, invitations, sensitive data like email, IP addresses, etc.

Funded by
Platoniq & The Green Party of Canda

Screenshot_2021-05-28 National Seniors Strategy - Policy Proposals - GPC Policy Development Process - Greens Connect.png

Comment

Fingerprint

The piece of text below is a shortened, hashed representation of this content. It is useful to ensure the content has not been tampered with, as a single modification would result in a totally different value.

Value: 29165f6aed219678afc7f3a653b9030f740cf6881a47a97b77a4a1bfeb0161ef

Source:

{"body":{"en":"<p><strong>Is your feature request related to a problem? Please describe.</strong><br>The current visualization of amendments uses a page that shows class diff tool that only works well for text (code like) comparisons. Comparisons between HTML texts are pretty much useless and very confusing. Also the tools for this job is very buggy (it is a customization in the Decidim code that does not work very well).</p><p><strong>Describe the solution you'd like</strong></p><p>As proposals are now using HTML, and there are not really good tools to compare differences in HTML (I challenge anyone to find them) I propose to modify this feature by giving the user 3 types of views to compare:</p><ol><li><strong>Text diff view</strong>: This strips all the HTML from the original proposal and the amendment and places automatic line endings (\\n char) after 80/100 chars (similar and, in fact using, as mailers do when creating a text version of a message). This creates a good input for the diff tools and provides useful marks on the relevant differences in the text, without other decorations.</li><li><strong>Source diff view</strong>: For the advanced user, this compares the source code (usually HTML but also without creating artificial new lines), similar as what currently exists. Still improved a little bit because now the differences are marked in stronger colors.</li><li><strong>Preview</strong>: This view shows the amendment as if it was a proposal, so the user can see how it looks. Currently there's no way to see an amendment as if it was accepted.</li></ol><p><br></p><p>The 3 views will be clearly available as tabs, with big buttons. unified and side-by-side views will be applicable as well as a submenu.</p><p>For an example of the implementation take a look at:</p><p>https://greensconnect.ca/processes/Policy2021/f/223/proposals/2241</p><p><strong>Describe alternatives you've considered</strong><br>I've tried first to improve the HTML diff tools that is customized in Decidim. but it is really complicated to do it properly as HTMl can be very unpredictable. It is a much bigger work and i've been unable to find any opensource library capable of doing it.</p><p><strong>Additional context</strong><a href=\"https://imgur.com/S5sEGvS\" target=\"_blank\"><br></a></p><p>see attachment</p><p><strong>Does this issue could impact on users private data?</strong><br>Ex. issues related with user's sign up/sign in process, verifications, invitations, sensitive data like email, IP addresses, etc.</p><p><strong>Funded by</strong><br>Platoniq &amp; The Green Party of Canda</p>"},"title":{"en":"Improve Diff visualization for amendments"}}

This fingerprint is calculated using a SHA256 hashing algorithm. In order to replicate it yourself, you can use an MD5 calculator online and copy-paste the source data.

Essential

Preferences

Analytics and statistics

Marketing

Improve Diff visualization for amendments

Please log in

Cookie settings

Essential

Preferences

Analytics and statistics

Marketing

Improve Diff visualization for amendments

Confirm

Please log in

Share