Report Viewer Bugfixes and Enhancements

[sebinside]

This issue replaces #710 for newer tasks related to bug fixes and enhancements of the report viewer after the 4.2.0 release. The goal is to gather all report viewer-related TODOs until it reaches a stable enough state to switch to single issues.

Modernization

The report viewer moves from webpack to vite. This includes:

• Setup the new project and fix inconsistencies (see this branch)
• Move from vuex to pinia for state management
• Fix remaining problems with legacy node dependencies like Path and require (however, try to avoid node polyfills)
• Add husky for the pre-commit running of lint and prettier
• Add unit and e2e test boilerplates
• Have a look at the package.json whether there are dependencies not needed anymore
• Test and replace report viewer
• Other inconveniences: JS code, formatting, spotless checks, documentation, return types, types, remove var, use composition api
• Make deployed report viewer working again 😢
• Fix bug with loading local files. Move files from src/files to files, use an index-like file to reference all source files
• Change the report viewer site title and favicon from Vite App to JPlag Report Viewer

Major enhancements

These enhancements are cross-cutting and subsume some of the other bug fixes and enhancements. They are meant as placeholders for bigger tasks toward a stable report viewer.

• Switch from webpack to vite, see above
• Use a frontend framework, e.g., tailwind. The current version of the report viewer is styled manually which often breaks (and does not look that good).
• Change JSON Format to only include one similarity list. This should also come with an overhaul to the factories.
• Enhance internal code quality. The general code quality was enhanced recently, but there are still major code smells and problems, e.g., in components like CodePanel.vue
• Write more test cases. vite offers comprehensive and easy-to-use testing capabilities with vitest and playwright. (Write more Component Tests #1601)
• Move from a deployed report viewer by us back to a local version that is started by the main JPlag program, add a -mode attribute or similar, opening a local report viewer should be as easy as possible (clickable jar-file or similar)

Cluster enhancements

These enhancements relate to the clustering feature which currently only has limited support from the report viewer.

• The cluster button for 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 cluster 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 name "submissions-relative" (added by @tsaglam)
• Color the table of matches based on the identified clusters
• In cluster view, also show submissions that are close to the cluster (i.e., the distance of cluster submissions to other submissions) (Show submissions close to cluster #1602)
• Table should be sortable by clusters (no separate cluster table)
• [ ] Add DSMs as cluster visualization dsmweb.org/clustering-a-dsm

Other enhancements

• The comparison view should show both similarities for the submissions themselves. The average similarity should be denoted as such (added by @tsaglam)
• It should also show the total number of tokens for each submission in the comparison view
• The histogram should have the possibility to switch to a log scale (added by @tsaglam)
• Add an intelligent search bar to the comparison list (intelligent = combined search by name and percentage)
• 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 shown comparisons
• Add button "collapse all" to the comparison view
• Support opening comparison views in new tabs
• Highlight base code, e.g., gray (Display Base code in comparison #1604)
• 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
• The metric buttons should have a ? button nearby that opens up a help page describing the metrics and when to use it
• 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) (new additional comparison view #1603)
• The overview page shall only show relevant information (number of submissions, directory, total / shown number of matches
• Comparison view match list: Show a colored (horizontal / located at the top / vertical but quite thin) list of all matches (only showing the size and maybe the filename)
• show the percentage of matches beside the file header
• enable sorting by file names, match size, match number, percentual match per file, ... (Add default file sorting options #1605)
• Add support for multiple tabs (only working in local mode). The URLs should be sharable (with the similar port on localhost)
• Add a generated README file to the result.zip that tells beginners how to use the report viewer
• The overview table should contain both average and maximum similarity
• Hiding names should be possible directly in the table
• The diagram / histogram should have a legend and could be enhanced, e.g., using a gaussian curve showing the normal distribution (Enhance Distribution Diagramm #1606)
• All configured run options should be accessible somewhere under more in the report viewer
• 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)
• Missing comparisons warning in cluster view
• Filtering and Sorting in table on cluster view
• Hide Radar chart when <= 3 members and explain the chart

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 (not a problem to be solved in the report-viewer see Issues with same root directory name #1445)
• 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 (or use tailwind colors)
• 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
• Matches sometimes requiere two clicks to become visible in the comparison view

Build/CI/Dev tasks

• Add automatic testing to the Report Viewer actions pipeline
• Remove building core JPlag from the Report Viewer actions pipeline (Do not run maven if only the report viewer is changed)
• Include and enforce eslint or similar, e.g., using spotless
• Older versions of the report viewer shall be deployed somewhere for end users of the older versions (starting with version 4.0.0) Since 5.0.0 is the last deployed report viewer and it is backwards compatible with 4.0.0 there is no need for this
• The Report viewer should be built in the maven workflow

[sebinside]

@jplag/hiwi I added all the new feature requests and comments from our workshop

[Alberth289346]

@tsaglam For Cluster Enhancements, did you consider using DSMs rather than graphs to display them? https://dsmweb.org/clustering-a-dsm/ for a simple example. No personal experience, but afaik they tend to be more compact.

[tsaglam]

For Cluster Enhancements, did you consider using DSMs rather than graphs to display them?

We have not considered DSMs yet, but it is an interesting idea. In the long run, we want to offer different visualizations for clusters, so this could be one of them.

[tsaglam]

Also regarding the same discussion, maybe we can take a look at this work by Novak et al.: https://ieeexplore.ieee.org/abstract/document/9488644

[Kr0nox]

Things that should be disgussed:

• Are console logs wanted in a normal error free run?
• Should the light-/dark-mode button be moved? If so where?

[Kr0nox]

With the release of version 5.0.0 the report viewer reached a stable state and the majority of issues from this are solved. Due to this we decided to move away from this collection to individual issues.
All problems that are still open are now individual issue: #1601 #1602 #1603 #1604 #1605 #1606

[sebinside]

RIP #1000 and great progress!

[tsaglam]

RIP #1000 🥲