New Cluster Visualization

[Kr0nox]

This PR adds a new way to default way to visualize clusters. The default is a graph having the submissions in the cluster as nodes and the average similarity as edges. Edges can only exists between the comparisons in the top list.

The old radar chart visualization is still accassible through a selector at the top of the container.

[sonarqubecloud]

[JPlag Report Viewer] Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[tsaglam]

I tested the feature with a few real-world datasets. Looks already really good! I have the following comments solely based on using the feature:

• When hiding submissions, the names are hidden in the list of cluster members but not in the graph view itself
• It would be cool if the cluster member list also supports filtering/searching
• It would be cool to have either a mouseover for edges showing the similarity or if a mouseover for the edges highlights the corresponding comparison in the cluster member list to the right
• If comparisons are not included in the report, then there are no lines in the graph view. Currently, this is not explained to the user. We could either introduce thin, gray, dashed lines for these missing edges or add a legend that states why these are missing (or both)
• the edges of the graph are in the foreground, it would probably look a bit better if the nodes are in the foreground
• In some clusters, it is hard to differentiate by the line opacity which edges are the important ones. Maybe we could scale the opacity based on the lowest and highest edges in the graph? (I have more ideas here; we can discuss them in the next dev meeting)
• unrelated: The radar view breaks when either there are <= 3 submissions in the cluster or when comparisons are not part of the report. We could disable the radar view in these cases.

Not all of these points need to be addressed in this PR, maybe we can discuss which ones we want to include directly and which ones we want in a separate PR.

[sebinside]

In big clusters, I also wondered about the missing lines, see the attached image. I don't know what you discussed with @tsaglam, but this can of course also be a separate PR together with the other ideas by timur. If time allows it, these other improvements would be great for v5, nevertheless.

[sebinside]

Really great PR, could be easliy one of the biggest improvements of the JPlag clustering since its introduction. I only have minor comments, please see above.

[Kr0nox]

I have implemented the dashed line. (newest version here
The issues I see with it are

• Especially with large clusters it gets really overloaded
• The use of a potential mouse over will be really difficult to use, due to all the lines so close to each other

What are your opinions on that @tsaglam @sebinside ?

[tsaglam]

What are your opinions on that?

I think it looks good! On a large screen, the lines are not too crowded. On my smaller one it is a bit more dense but still fine! Ideally, we would not have mouseover/clicking for the dashed lines, only for the included ones.
Distinction between red lines is now also much better!

For some additional opinions: @dfuchss @dr6817

[Kr0nox]

I have implemented that the row to the hovered edge in the tablle gets highlighted now. (accessile here again)
Is that how you wanted it @tsaglam ?

Do you also want me to try and implement a tooltip in addition to that? If so what text would you want on that tooltip?

[tsaglam]

@Kr0nox

Is that how you wanted it

Yes looks great! One minor thing: When an edge is at the bottom of the list, it seems at first glance that there is no mousover. Would it be possible to scroll down if the mouseover edge is not visible in the scroll view?

Do you also want me to try and implement a tooltip in addition to that? If so what text would you want on that tooltip?

No, I think we do not need that anymore, as the highlighting fulfills all the needs.

Two minor issue:

1. The gray lines should be a bit darker/less transparent

2. When min=100% then the edges look somewhat thin. They should probably strong and red, as it is 100%:

Click to expand!

Here is the cluster:

[dfuchss]

What are your opinions on that?

I think it looks good! On a large screen, the lines are not too crowded. On my smaller one it is a bit more dense but still fine! Ideally, we would not have mouseover/clicking for the dashed lines, only for the included ones. Distinction between red lines is now also much better!

For some additional opinions: @dfuchss @dr6817

It looks nice :)

[tsaglam]

As far as I can tell, it looks good. The darker lines are also much better!

[sebinside]

LGTM

[tsaglam]

@Kr0nox if we solve the conflicts, we can merge. 👍

[sonarqubecloud]

[JPlag Report Viewer] Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[Kr0nox]

@tsaglam Conflicts are resolved