add links and images

jplag · Jan 31, 2025 · 0a957ff · 0a957ff
1 parent 5032796
commit 0a957ff
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 5 deletions.
diff --git 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
diff --git a/docs/images/7_cluster_light.png b/docs/images/7_cluster_light.png
diff --git a/docs/images/7_comparison_dark.png b/docs/images/7_comparison_dark.png
diff --git a/docs/images/7_comparison_light.png b/docs/images/7_comparison_light.png
diff --git a/docs/images/7_information_dark.png b/docs/images/7_information_dark.png
diff --git a/docs/images/7_information_light.png b/docs/images/7_information_light.png
diff --git a/docs/images/7_landing_dark.png b/docs/images/7_landing_dark.png
diff --git a/docs/images/7_landing_light.png b/docs/images/7_landing_light.png
diff --git a/docs/images/7_overview_dark.png b/docs/images/7_overview_dark.png
diff --git a/docs/images/7_overview_light.png b/docs/images/7_overview_light.png