Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace the outdated HTML report generation #192 #287

Merged
merged 80 commits into from
Mar 8, 2022

Conversation

cholakov11
Copy link
Contributor

Until now the JPlag report functionality was creating report html files by generating "hard coded" html code. In this pull request changes to the report generation as well as report presentation were introduced.

Report generation

The report generation was moved from generating "hard coded" html to generating JSON files which represent the report. An overview.json file is generated which contains the overall information of a JPlagResult as well as a .json file for each comparison done in the JPlag comparison process.
DTO classes (de.jplag.reportingV2.reportobject.model) are introduced which are used to model the JSON files. ReportObjectFactory is a factory class which takes a JPlagResult object and converts it to a JPlagReport consisting of an OverviewReport and a list of ComparisonReport objects.
The Jackson library is then used to generate json strings from the given JPlagReport. The generated strings are then saved as files on the hard drive.
The .json files can be used by any program which can display .json files or a JPlag report.

Report presentation

A new JPlag report viewer application is introduced in the form of a Vue + Typescript application. The application can be started on local host from its folder report-viewer and accepts .zip files containing overveiw and comparison json files, single json files or searches for report files in its local files folder.
When receiving the .json files the application convets them to Typescript objects (Overview.ts, Comparison.ts) and gives these object to the Vue components to be displayed.
The report viewer consists of three types of pages - a FileUpload page which the entry point to the application and where files to display are specified, an Overview page which display the overall information of a report and a Comparison page for each comparison.
The report viewer supports:

  • displaying of overall report information ( folder, submission ids, language, etc.)
  • displaying used metrics and their information ( threshold, distribution diagram)
  • displaying comparison list sorted by similarity
  • displaying of files in a comparison
  • displaying matches in a comparison with navigation
  • code highlighting
  • anonymization of ids
  • displaying of clusters (needs further discussion and refinement)

sebinside and others added 30 commits October 19, 2021 10:12
… list of Metrics, implemnted Metric creation from JPlagResult in ReportObjectFactory
…ort as json strings, implemented the function in ReportImplementation, Json strings from JPlagResult can now be generated
…check and returning index or line depending on it
…namically update top comparisons list in frontend
Added simple deployment script for report viewer to GH Pages.
… match list, set cursor to pointer for clickable areas
Copy link
Member

@sebinside sebinside left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is what i found from having another look at the vue code. Overall, pretty solid and well modularized.

report-viewer/src/utils/Utils.ts Outdated Show resolved Hide resolved
report-viewer/src/components/ClusterRadarChart.vue Outdated Show resolved Hide resolved
report-viewer/src/components/ComparisonsTable.vue Outdated Show resolved Hide resolved
report-viewer/src/components/ComparisonsTable.vue Outdated Show resolved Hide resolved
report-viewer/src/router/index.ts Outdated Show resolved Hide resolved
report-viewer/src/router/index.ts Outdated Show resolved Hide resolved
report-viewer/src/model/Match.ts Show resolved Hide resolved
report-viewer/src/model/Metric.ts Show resolved Hide resolved
report-viewer/src/views/ComparisonView.vue Outdated Show resolved Hide resolved
@sebinside
Copy link
Member

@cholakov11 Thank you for implementing the change requests. In my opinion, there are only three things left:

  • Resolve the require discussion (if there is no easy solution, I would accept the current version)
  • Resolve the CSS discussion (should be easy to fix, or I am completely wrong)
  • Resolve the merge conflicts

Then, I'll be happy to merge this pull request! 🚀

@cholakov11
Copy link
Contributor Author

@sebinside Conflicts are fixed, ready to merge.

@sebinside sebinside dismissed tsaglam’s stale review March 8, 2022 09:26

should be all done

@sebinside sebinside merged commit bc0d9a9 into jplag:master Mar 8, 2022
@sebinside sebinside mentioned this pull request Mar 15, 2022
@sebinside sebinside mentioned this pull request Apr 11, 2022
30 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Issue/PR that involves features, improvements and other changes major Major issue/feature/contribution/change PISE-WS21/22 Tasks for the PISE practical course (WS21/22)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Replace the outdated HTML report generation
4 participants