Report Viewer Bugfixes and Enhancements

[sebinside]

The new report viewer has been introduced with the release 4.0.0. Although this represents a giant step forward compared to the old string-concatenating HTML-file-generation, there is still some work to do for the next releases of JPlag. This issue shall gather all these TODOs. It replaces #357, #658, and #686.

Bugs

• Files and matches shall be represented based on their full path (incl. root directory). This shall prevent collisions in the report viewer match display. Please also see the discussions in Report Viewer Bug Fixes and Tests for v4.0.0 Release #686 and Report Viewer does not show matches properly #658. The quick fix from Quick fix for matches not display properly in the report viewer. #691 has to be therefore reverted. In the viewer, the file paths shall be shown in an abbreviated way if they are too long. File paths shall be platform-independent. (Addressed in fix bug: representation for name of file and match #785)
• The report generation does overwrite source code files if they have the same name because all files are "flat mapped", i.e., written in one single folder per submission. It does not throw an error but will put out wrong results that might be noticed later (or even not noticed at all). Here, the solution is probably to preserve the original folder structure also in the resulting zip file in the submissions folder. This could also be based on selecting which files to copy. This problem probably also affects the multi-root and subdir features. (Addressed in fix bug: representation for name of file and match #785)
• The ends of displayed matches are sometimes off by one. This is probably a display bug as the information is correctly represented in the generated JSON files. (Addressed in Fix/match display off-by-one error and reenable clustering display #816)
• Clustering shall be reenabled (disabled in Quick fix for matches not display properly in the report viewer. #691) and tested comprehensively (Addressed in Fix/match display off-by-one error and reenable clustering display #816)
• Match highlighting in the comparison view seems to be broken for single-file submissions (added by @tsaglam)
• Same submission names break the ComparisonView, please see below (Addressed in Fix/same submission #829)
• The folder in the results holding the submission files should be renamed from "submissions" to "files" (Addressed in Fix/same submission #829)
• Clicking on the colored match highlighting sometimes does not work (or stops working after several clicks), e.g., with this example, (Addressed in Fix/clicking problem on match highlighting #855)

Enhancements

• The main screen where the files are dropped should contain a line of text that states that no files get uploaded anywhere (Addressed in Fix/same submission #829)
• The code comparison view always shows "submission 1" and "submission 2", but should show the names. But not if the names are hidden (Addressed in Fix/same submission #829)
• In the code comparison view, the left sidebar should be visible by default (Addressed in Fix/same submission #829)
• In the comparison view, there should be a "back" button (added by @tsaglam), (Addressed in Fix/clicking problem on match highlighting #855)
• In the code comparison view, code cannot be selected (added by @tsaglam), (Addressed in Enhance/codes selection #877)
• Enhance the version check introduced by Quick fix for matches not display properly in the report viewer. #691 and display more than a console warning, e.g., a prompt displaying the warning. There should be a warning for development versions (0.0.0) and version mismatches. Load the report viewer version from a JSON file in src directory with the content {"jplag_version":{"major":0,"minor":0,"patch":0}}
• Enable collapsing by clicking on the file header in the comparison view (Addressed in Enhance/enable collapsing by clicking file header #879)
• Show a warning if some/all comparison files are missing, in the console log and also in the report viewer when scrolling down, e.g., because there are 1000 comparisons, but only 100 are included in the resulting zip file
• Change the color scheme of matches (something without implicit semantics)
• Enhance test coverage (> 0%), focus on unit tests. Jest is a popular framework for this, here can be found additional information about testing with Vue
• Investigate the real bad performance of navigating to the overview, add incremental rendering to overcome these issues
• Make the report viewer more resilient to errors and properly report them. Currently, even minor parsing errors break the complete viewer without any message to the end user (besides console printing of the deceased viewer).
• Enhance logging in both the JSON serializer and the report viewer code.
• Redirect to file upload if the overview or a comparison view is reloaded (i.e., on error after reload)

Cluster enhancements

• the cluster button for a comparison in the overview should only be shown if there are more than two submissions in the cluster, as the visualization offers no insights for pairs (added by @tsaglam)
• the somewhat non-descriptive clustering button should be replaced with a better one. It should show the number of submissions per clusters and maybe the avg similarity of the cluster, e.g. like this (added by @tsaglam)
• Cluster should be visualized with a graph with submissions as nodes and comparisons as edges where the edges are thicker when the avg similarity is higher, e.g. like this (added by @tsaglam)
• The old cluster visualization should be accessible as well, but as a non-default version names "submissions-relative" (added by @tsaglam)
• Color the table of matches based on the identified clusters (should be optional, e.g., by using a checkbox)

Other enhancements

• The landing page should show the current version number, maybe even the minimal required version number (proposed in Report viewer unexpectedly requires a new minimal JPlag version. #963)
• The overview should show the number of parsed submissions
• The comparison view should either show the max similarity, or just bother similarities for the submissions themselves. The average similarity should be denoted as such (added by @tsaglam)
• Add button "collapse all" to the comparison view
• The histogram should have the possibility to switch to a log scale (added by @tsaglam)
• Support opening comparison views in new tabs
• Highlight base code, e.g., gray
• Hiding the names should replace them with some first names from the chair with a random number. This could also include replacing the names in the shown source code
• Supporting a dark mode (e.g., by user choice or even by default)
• Change comparison view file order, e.g., based on packages rather than alphabetical
• Add a printable view or a possibility to generate printable reports (see Feature request: option for printing/(option for additional) printable view #754 for details)
• Complete UI Overhaul - enhance overall frontend design/impression
• The CD deployed version should have sample files ready to go (added in the deployment pipeline)
• A new, easy-to-use code similarity view that hides any details (ask @sebinside for more details)

Open bugs

• The back button in the comparison view is in an awkward position
• Syntax highlighting in the comparison view seems to be broken for JDoc comments (added by @tsaglam)
• If there is only one root folder, the root folder name should not be visible in the report viewer
• Support for same root directory names
• The distribution seems to be broken for some submission sets, which might be connected to switching between metrics (added by @tsaglam)
• The comparison view occasionally freezes after clicking on too many matches (needs additional investigation)
• Switching between avg and max metric freezes the UI if there are many submissions in the overview
• The max metric selection is not stored; after returning from a comparison view, it is reset to avg (added by @tsaglam)
• Fix the indent of code with different line numbers
• Shuffle colors in the array or find a different generation algorithm
• Normalize file paths in the Report Viewer, e.g., to mitigate problems such as discussed in Enhance/add error page if overview or comparison missing #923

Build/CI/Dev tasks

• Move Report Viewer from webpack to vite
• Add automatic testing to the Report Viewer actions pipeline
• Remove building core JPlag from the Report Viewer actions pipeline
• Include and enforce eslint
• Older versions of the report viewer shall be deployed somewhere for end users of the older versions (starting with version 4.0.0)
• Include automated testing in the report viewer action
• Do not run maven if only the report viewer is changed

[tsaglam]

I just added a few enhancements and bugs from this year's prog grading. For more details ask me.

[sebinside]

@cyfml While same file names now work (thank you!), same submission names and same root directory names break the comparison view. I attached two example down below. Both use the multi root feature, i.e., -old root1 -new root2. After we merged PR #785, please have a look at it in a new PR.

SameSubmissionName.zip
SameRootName.zip

[cyfml]

@sebinside Ok.

[tsaglam]

@sebinside the syntax highlighting for single-file submissions is currently broken. The reason is that we put the file in a folder with the same name in the "submissions" folder of the zip. E.g. imagine a submission is just one file Sub.java without a folder. Then your file structure in the zip looks like this: submissions/Sub.java/Sub.java. However, in the match files, the id will be "id1": "Sub.java", and the file will be "file1": "",, thus the viewer cannot find the file and no highlighting is shown.

There are two ways to fix this:

• Store single-file submissions directly in the submissions folder of the zip, and adapt the viewer accordingly
• Ensure that for single-file submissions, the match files have the file name as id value and as file value

EDIT: It seems this behavior is fixed on the develop branch.

[cyfml]

@tsaglam After today's classes, i will try to fix it.

[tsaglam]

@tsaglam After today's classes, i will try to fix it.

I think you already did with your last PR, so should be fine

[cyfml]

@sebinside @tsaglam I found an issue with the highlighting. In the LineOfCode Component, one single line of codes will be highlighted. The codes are not highlighted as a whole. That is why highlighting is broken for JDoc. It also influences the performance of the report-viewer, because each line of code will call highlight JS.

[cyfml]

@sebinside
The requirement: Load the report viewer version from a JSON file in src directory with the content {"jplag_version":{"major":0,"minor":0,"patch":0}}.

"jplag_version" should be "report-viewer_version", i think.

[sebinside]

@cyfml You are right but I would prefer report_viewer_version to keep it consistent.

[cyfml]

@sebinside I am not clear, what does stopping working after several clicks means. I tested just now, i didn't find this problem. Let me introduce two clicks.

1. When you click the match in the matchTable, it will just open the corresponding files.
2. When you close one file and click the highlighting in the CodePanel, it will also just open the corresponding file.

[sebinside]

That's also what I tested. But after several matches (e.g., quickly clicking on all possible matches in a row), it stopped working after some clicks. I'm not able to properly replicate this for now.

[cyfml]

@sebinside Maybe there are serval matches in the same two-files-pair. when you click the first match, it opens two files. When you click second match, this match has the same files as the first match. So it has no reaction, because these two files are already opened.

[sebinside]

@cyfml Ah, that might be the solution, I did not think of that. However, in this case, the view should scroll to this match as well (just like the view scrolls to the first match if the file is opened). So maybe this could be easily fixed by you.

[cyfml]

@sebinside I spent some time to find reason. The reason is that, submissionId has already transformed into normal path(e.g. root1_A=>root1/A). DOM can't find the corresponding element by id. This id is codelPanelId+submissionId+lineNumber. So it can't scroll automatically.

[cyfml]

@tsaglam last merged PR fixed this problem: Enable collapsing by clicking on the file header in the comparison view. Could you mark it as finished and quote the PR number? Thanks.

[tsaglam]

@sebinside @cyfml sometimes I encounter this:

This is a data set of 85 submissions, argument -n 1000 and thus 3655 comparisons in total.

[cyfml]

@tsaglam Because there is only one parameter in zip file. This parameter is totalComparisons(3655). But if you use zip file generated before, there is no this field in zip. Are you sure, there is a field(totalComparisons) in zip file?

[cyfml]

@tsaglam @sebinside Report-viewer don't know the totalComparisons. The solution might report-viewer don't show this info when using zip file generated by last version of Jplag.

[tsaglam]

Because there is only one parameter in zip file. This parameter is totalComparisons(3655). But if you use zip file generated before, there is no this field in zip. Are you sure, there is a field(totalComparisons) in zip file?

Ah, it could be an older jar, I am not sure but I can check.

Report-viewer don't know the totalComparisons. The solution might report-viewer don't show this info when using zip file generated by last version of Jplag.

I think this would be an elegant solution!

[sebinside]

This issue has been replaced by #1000 (also: what a cool number!).