part of views

docs/7.-Report-Viewer.md

@@ -1,7 +1,6 @@
-
+The JPlag Report Viewer is a web application that can be used to display the result zip file generated by JPlag. 
 
 ## Opening Reports
-
 The report viewer can be started over the Jar, by specifying a view mode. This is done over the `--mode`/`-M` flag:
 |Value|Effect|
 |---|---|
@@ -12,7 +11,8 @@ The report viewer can be started over the Jar, by specifying a view mode. This i
 ### Landing Page
 On the landing page a report can be opened by either dragging the zip file onto the page. Alternatively when clicking the red square a file chooser will open.
 
-Reports can fetched from a server by appending `?file=URL`. Example: `jplag.github.io/JPlag?file=domain.tld/my-report.zip` 
+Reports can fetched from a server by appending `?file=URL`. 
+Example: `jplag.github.io/JPlag?file=domain.tld/my-report.zip` 
 
 ### Reports from older versions
 With increasing versions the report may change and the report viewer may not be able to read a report from an earlier version. 
@@ -60,7 +60,55 @@ npm run build-demo
 Similar to the production build, this build will have `demo` as its base url.
 
 ## Views
+The report viewer and the information provided 
+
+### File Upload / Landing Page (`/`)
+This view is used to load files into the report viewer.
+
+### Overview
+The Overview shows general information about the entire dataset and is not specific to a single comparison.
+
+The top shows some general information about the report. More information can be accessed over the more button.
+
+The distribution diagram splits the submissions into buckets according to a certain similarity metric. This includes all calculated comparisons, not just the ones included in the report.
+The used metric can be changed in the options under the diagram. In addition the amount of buckets can be changed. The scale can be switched between a linear and a logarithmic representation.
+
+The comparison table displays the included comparisons. These may not be all comparisons performed by JPlag depending on the number of submissions and the configured options. The table can be sorted by each metric or grouped by cluster. 
+The search bar has multiple features:
+- It filters the rows of the table by the names of the submissions. To filter for multiple names, separate them by a space. The parts come together in a disjunctive way.
+- It filters the table by index, either by just typing a number (e.g. `81`) or prefacing it with the `index` keyword (e.g. `index:81`)
+- It filters by metric when the number is prefaced with a comparator (</>/<=/>=) (e.g. >90). To filter by a specific metric, preface the comparator with its short metric name (e.g. avg:>90)
+- When fully typing out a name, it gets unhidden
+
+Each row shows the index, the names of the two submissions in the comparison and its similarities in the different metrics. Comparisons that are part of a cluster, will have that information displayed at the end of a row. All comparisons in a cluster have their icon colored the same. The number behind the icon shows how many submissions are included in the cluster. Clicking this icon will open the cluster in its own view.
+When hovering over a name, an eye will show up. Clicking this eye toggles the annonymization of this submission.
+Clicking the other parts of the opens the comparison.
+
+### Comparison
+At the top of the comparison view different similarities for the submission can be seen. The average similarity is the same from the comparison table. The similarities labeled with the submission names show the percentage of token for the named submission that appear in the other one.
+
+Below that the bubbles show always show represent a single match. They show the file names in both submissions and the number of tokens in the match. Clicking on this bubble will scroll to both matches in the code.
+
+The files can also be sorted by the following options:
+| Alphabetic | Sorts the files by their name. |
+| Match Coverage | Sorts the files by how many of its tokens are part of a match in descending order. |
+| Match Count | Sorts the files by the number of matches in them in descending order. |
+| Match size | Sorts the files by their largest match in descending order. |
+
+Each code container has a list of files. The file order can be changed either through the options described above or by dragging them around.
+The percentage at the end of each files header shows how many tokens of the file are part of a match.
+Clicking on this header expands and collapses the files content.
+
+The matches are colored in. Clicking on one scrolls to the match in the other submissions code.
+
+### Cluster
+
+### Information
+The information view displays data about the run, like date, execution time and number of submission.
+
+It also displays all the options used by JPlag.
 
+## Annonymization
 
 ## Contributing