Render machine annotations for multiple lines or columns

[jorg-vr]

This pull request renders machine annotations more precisely if the judge provided the optional parameters. Machine annotations are now marked in the code. The annotation can be found as an interactive tooltip on the marked code. If multiple annotations cover the same code, the marking will indicate the most important annotation, while the tooltip will show all annotations.

I updated the default display for inline annotations to 'important' when any annotations exist on page load, or when in an evaluation, as annotations are easily accessible by tooltip.

This is a first step towards more precise human annotations.
I started with machine annotations as there is less code involved and it can help to test designs already. My idea to mark human annotation ranges in a similar way with a background color.

This pr introduces Tippy.js: This helps with the interactive tooltips. It is written on top of popper.js which we already use through bootstrap. I added is because it greatly improved the UX experience in some edge case compared to using only popper.js.

Visuals of some manually generated annotations: (They are not realistic as I tried to cover all edge cases)

Currently for most judges it will look like this, with only full line markings.


Some more naos examples with comments:

• https://naos.ugent.be/nl/submissions/13036445/
• https://naos.ugent.be/nl/submissions/13036538/
• https://naos.ugent.be/nl/submissions/13036580/
• https://naos.ugent.be/nl/submissions/13036618/
• https://naos.ugent.be/nl/submissions/13036388/
• https://naos.ugent.be/nl/submissions/13036326/

But tested has already been updated in dodona-edu/universal-judge#341

• Tests were added
• Documentation update can be found at Update the documentation for machine annotations dodona-edu.github.io#240

Progress on #2826

[bmesuere]

This looks very promising! Some quick (and incomplete) feedback:

• I would still show all linting comments by default for the "student view" and only "hide" them if there is at least 1 manual comment/question. Maybe hiding them during grading might also be the right approach, but @chvp is better positioned to answer that question.
• When showing all annotations, the tooltips are still enabled which should not be the case I think?
• The order in the tooltips is different then when shown normally e.g.: line 21 on https://naos.ugent.be/nl/submissions/13036445/ In the tooltip, the info remark is shown in the top, but in the inline view it is shown at the bottom.

[pdawyndt]

This is how the wave underline looks for me (Chrome, Windows 10):