diff --git a/docs/7.-Report-Viewer.md b/docs/7.-Report-Viewer.md index ef6ba30ad..8b1a43c54 100644 --- a/docs/7.-Report-Viewer.md +++ b/docs/7.-Report-Viewer.md @@ -62,12 +62,16 @@ Similar to the production build, this build will have `demo` as its base url. ## Features ### File Upload / Landing Page (`/`) -This view is used to load files into the report viewer. +![Landing Page](./images/7_landing_dark.png#gh-dark-mode-only) +![Landing Page](./images/7_landing_light.png#gh-light-mode-only) +This view is used to load files into the report viewer. More information can be found [above](###landing-page). -### Overview +### Overview (`/overview`) +![Overview View](./images/7_overview_dark.png#gh-dark-mode-only) +![Overview View](./images/7_overview_light.png#gh-light-mode-only) 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 top shows some general information about the report. More [information](###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. @@ -79,11 +83,13 @@ The search bar has multiple features: - 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. +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](###cluster). 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. +Clicking the other parts of the [opens the comparison](###comparison). ### Comparison +![Comparison View](./images/7_comparison_dark.png#gh-dark-mode-only) +![Comparison View](./images/7_comparison_light.png#gh-light-mode-only) 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. @@ -101,8 +107,12 @@ 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 +![Cluster View](./images/7_cluster_dark.png#gh-dark-mode-only) +![Cluster View](./images/7_cluster_light.png#gh-light-mode-only) ### Information +![Information View](./images/7_information_dark.png#gh-dark-mode-only) +![Information View](./images/7_information_light.png#gh-light-mode-only) 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. diff --git a/docs/images/7_cluster_dark.png b/docs/images/7_cluster_dark.png new file mode 100644 index 000000000..f4020cb67 Binary files /dev/null and b/docs/images/7_cluster_dark.png differ diff --git a/docs/images/7_cluster_light.png b/docs/images/7_cluster_light.png new file mode 100644 index 000000000..8e285bafe Binary files /dev/null and b/docs/images/7_cluster_light.png differ diff --git a/docs/images/7_comparison_dark.png b/docs/images/7_comparison_dark.png new file mode 100644 index 000000000..52e464a64 Binary files /dev/null and b/docs/images/7_comparison_dark.png differ diff --git a/docs/images/7_comparison_light.png b/docs/images/7_comparison_light.png new file mode 100644 index 000000000..b80e92fb9 Binary files /dev/null and b/docs/images/7_comparison_light.png differ diff --git a/docs/images/7_information_dark.png b/docs/images/7_information_dark.png new file mode 100644 index 000000000..0f74ed2d5 Binary files /dev/null and b/docs/images/7_information_dark.png differ diff --git a/docs/images/7_information_light.png b/docs/images/7_information_light.png new file mode 100644 index 000000000..fb02a9b1e Binary files /dev/null and b/docs/images/7_information_light.png differ diff --git a/docs/images/7_landing_dark.png b/docs/images/7_landing_dark.png new file mode 100644 index 000000000..a1839bda7 Binary files /dev/null and b/docs/images/7_landing_dark.png differ diff --git a/docs/images/7_landing_light.png b/docs/images/7_landing_light.png new file mode 100644 index 000000000..76eed2a1d Binary files /dev/null and b/docs/images/7_landing_light.png differ diff --git a/docs/images/7_overview_dark.png b/docs/images/7_overview_dark.png new file mode 100644 index 000000000..b16098b87 Binary files /dev/null and b/docs/images/7_overview_dark.png differ diff --git a/docs/images/7_overview_light.png b/docs/images/7_overview_light.png new file mode 100644 index 000000000..c614a92d8 Binary files /dev/null and b/docs/images/7_overview_light.png differ