General UI improvement brainstorm

[rien]

This discussion is made to collect possible improvements that could be made on the UI/UX side of Dolos. Inconventient UI issues can be reported here, as well as suggestions to improve them.

[rien]

General UI improvements

Globally, I think a few things are missing:

• Information about the current version of Dolos (a git commit, npm release , ...)
• Links to the webpage with the documentation
• Links to the GitHub?

Since a few PR's are coming up (#660, #718) which are working with similarity thresholds, I think it would make sense to have this as a global slider. But maybe not too easy to change (to prevent accidental changes).

Landing page

Users are now greeted with the boring pair view. While this page gives the "most" information currently, this should not serve as the initial page and something better is surely possible. This has been touched in issue #557 and PR #718 is a good candidate for this.

A few properties I think the main landing page should have (in order of importance):

• An immediate indication of how "bad" the situation is. A prominent indication of the highest similarity or a histogram of the similarities is a goof candidate for this.
• Useful, actionable leads for the user to start exploring the data in case something is off. The user should be nudged in the direction they will find the most valuable information.
• Information about which files were analyzed (programming language, file count, ...). Most likely, the user will know this, but it should be present for the purpose of confirming what is shown.
• Some information for "new" users who don't know where to start.

Pair view

There is one big improvement that I think can be applied to all other views as well: we should have simple, short names for the files. This can either be extracted form a metadata file, or an educated guess could be taken by trying to figure out the unique part of the filename. The full path should not be thrown away however.

Compare view

This is again a very "technical" page. Some improvements:

• The code itself is the main feature of this page and can use as much space as possible, we might reconsider if a card is needed here and just use the whole page?
• The colors used to highlight common parts are 1) not visually attractive and 2) not immediately clear what they mean (what is the difference between lighter yellow and darker yellow?). A general look at the color scheme and maybe an addition of something clarifying (a legend?) might be good here.
• Some actionable links or buttons might be good here. For example: go back (to the pair view), look at the current cluster, do some actions on one of the two files (pairs with this file for example).

I also think that the whole fragments panel can use improvements, but I'm not sure what or how.

Graph view

• Show labels for nodes
• Snap to nodes / edges

[toonijn]

For me, the compare view can be improved the most. The excess of nonsense yellow makes it useless. It does not tell us which lines correspond to which other lines, and I have seen multiple cases where everything was yellow.

[rien]

The "everything was yellow" bug should be fixed with a recent release (#672). If you still encounter this problem, can you send me some examples?

[rien]

A lot of the issues above have been resolved in the past months. We've done a brainstorm again and listed a few issues:

Landing page

While this is already a huge improvement over showing the pair view, there are still some ways we could improve this page:

• The text box on the top left has too much information, reducing the effectiveness. We should pick the most important information and make this more easily readable.
• Some of this information can be made more actionable. For example: when showing information about clusters "We found 45 different clusters", the user could be invited to open the graph view (showing clusters) by a prominent button nearby.
• Extra information is now shown in different ways: a dotted underline (similarity cutoff value) and a information icon. We should preferably make this more homogeneous.
• The similarity histogram has some small styling issues: slider is not a Vue component, tooltips are in a different font and do not fade.

Cluster view

• Clicking on nodes / clusters could be more streamlined: clicking on a node should also select its cluster, clicking on a cluster should show the node information panel with a hint: "Click a node to show more information about a file".
• Having to scroll down to view cluster information is not intuitive, and the information shown there is sometimes redundant to the graph view itself. We could show the extra information (heat map, timeline) in the cluster card or in an extra model.
• The simulation should move less, it could "cool down" quicker for example.

File view

• Loading this page hangs for a moment
• Again a lot of text / information in the header.
• Too much text in the tooltip of the information icon
• Some styling issues (spacing in the card, hide "semantic match" instead of disabling it, ...)

Pair view

This page needs most work, we will rethink this page while replacing the editor (#682).