Final docs brush (#342)

* fix visual appreance; rm advanced section
* potentially fixed some links
* pictures in slide show small - added a hover to increase; quality meh but for now fine
* change pics to figures to insert proper captions

docs/code-and-data.md

@@ -16,6 +16,5 @@ This not only guarantees the reproducibility of your analysis, but also allows y
 easily adjust your analysis to your needs.
 
 This page provides information regarding the Code and Data download for 
-cOmicsART. We explain the [general code structure](code-and-data/r-code.md) and provide an [example how to adjust 
-the code](code-and-data/examples.md). Note that the adjusted code is only exemplary 
+cOmicsART. We explain the [general code structure](code-and-data/r-code.md) and provide an [example how to adjust the code](code-and-data/examples.md). Note that the adjusted code is only exemplary 
 and not exhaustive. We encourage you to explore the code and adjust it to your needs.

docs/code-and-data/examples.md

@@ -38,14 +38,21 @@ the steps to follow:
   <span id="prev" style="font-size: 2em; cursor: pointer; margin-right: 10px;">&#8592;</span>
 
   <!-- Image element -->
-  <img id="slideshow" src="/cOmicsArt/assets/images/Slideshow1.png" width="600px">
+  <img id="slideshow" src="/cOmicsArt/assets/images/Slideshow1.png" width="600px" style="transition: transform 0.3s ease;">
 
   <!-- Right arrow -->
   <span id="next" style="font-size: 2em; cursor: pointer; margin-left: 10px;">&#8594;</span>
 </div>
 
 <!-- Subtitle element -->
-<p id="subtitle" style="text-align: center;">Test 1</p>
+<p id="subtitle" style="text-align: center;">Slideshow</p>
+
+<style>
+  /* Enlarge image on hover */
+  #slideshow:hover {
+    transform: scale(1.5); /* Enlarge the image by 1.5 times */
+  }
+</style>
 
 <script>
 var images = [
@@ -72,6 +79,7 @@ document.getElementById("next").onclick = function() {
 };
 </script>
 
+
 ### Downloaded R Code
 
 If successful, you should have downloaded a folder with the files `Data.RDS`, `utils.
@@ -82,9 +90,12 @@ contains the code to reproduce the volcano plot along with the data processing s
 
 The R code is shown below:
 
-<div style="width: 90%; height: 50vh; margin: 0 auto; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; box-sizing: border-box;">
+<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
 
-```r
+  <!-- Code block with copy button -->
+  <div style="width: 90%; padding: 2px; margin-bottom: 10px;">
+    <div style="background-color: #f9f9f9; border: 1px solid #ccc; height: 800px; overflow-y: auto; padding: 10px;">
+      <pre><code id="code-block">
 # ShinyOmics R Code Download
 # Load necassary packages ----
 # Note that you do not need to install packages everytime you run the script
@@ -326,7 +337,9 @@ Volcano_plot <- ggplot(
   CUSTOM_THEME +
   ggtitle(label="Corrected p-Values")
 lapply(ls(pattern='plot'), get)
-```
+      </code></pre>
+    </div>
+  </div>
 </div>
 
 A detailed explanation of the code structure can be found [here](r-code.md). We will 
@@ -347,12 +360,12 @@ appearance by just replacing the original `CUSTOM_THEME` object with the altered
 In the code `CUTSOM_THEME` can be found in lines 71-79. Below you can see the 
 original and altered theme side by side:
 
-<div style="display: flex; align-items: center; justify-content: center;">
+<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
 
-<!-- Original Theme -->
-<div style="width: 45%; padding: 10px;">
-<h3 style="text-align: center;">Original Theme</h3>
-<div style="background-color: #f9f9f9; border: 1px solid #ccc; height: 500px; overflow-y: auto;">
+  <!-- Original Theme -->
+  <div style="width: 90%; padding: 10px; margin-bottom: 0px;">
+    <h3 style="text-align: center;">Original Theme</h3>
+    <div style="background-color: #f9f9f9; border: 1px solid #ccc; height: 500px; overflow-y: auto;">
       <pre><code>
 # Setting default options
 CUSTOM_THEME <- theme_bw(base_size = 15) + 
@@ -373,12 +386,12 @@ CUSTOM_THEME <- theme_bw(base_size = 15) +
   </div>
 
   <!-- Arrow in between -->
-  <div style="width: 10%; text-align: center; font-size: 2em;">
-    &#8594;
+  <div style="width: 90%; text-align: center; font-size: 2em; margin-bottom: 20px;">
+    &#8595;
   </div>
 
   <!-- Altered Theme -->
-  <div style="width: 45%; padding: 10px;">
+  <div style="width: 90%; padding: 10px;">
     <h3 style="text-align: center;">Altered Theme</h3>
     <div style="background-color: #f9f9f9; border: 1px solid #ccc; height: 500px; overflow-y: auto;">
       <pre><code>
@@ -404,6 +417,7 @@ CUSTOM_THEME <- theme_dark(base_size = 18) +
 
 </div>
 
+
 We can save the plot easily as pdf, png or svg using:
 
 ```r
@@ -429,13 +443,12 @@ threshold, determining the significance of the data points. In the code, the thr
 are defined in lines 194 + 195. They originally use the vales stored from the 
 application, but we can change to new values, without the need to go back to cOmicsArt.
 
-<div style="display: flex; align-items: center; justify-content: center;">
+<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
 
   <!-- Original Thresholds -->
-  <div style="width: 45%; padding: 10px;">
+  <div style="width: 90%; padding: 10px; margin-bottom: 5px;">
     <h4 style="text-align: center;">Original Thresholds</h4>
-    <div style="background-color: #f9f9f9; height: 200px; border: 1px solid #ccc; 
-overflow-x: auto; overflow-y: auto; white-space: nowrap;">
+    <div style="background-color: #f9f9f9; height: 150px; border: 1px solid #ccc; overflow-x: auto; overflow-y: auto; white-space: nowrap;">
       <pre><code>
 significance_threshold <- par_tmp$SigAna[paste0("SignificanceAnalysis-", par_name, "_psig_th")]
 lfc_threshold <- par_tmp$SigAna[paste0("SignificanceAnalysis-", par_name, "_lfc_th")]
@@ -444,15 +457,14 @@ lfc_threshold <- par_tmp$SigAna[paste0("SignificanceAnalysis-", par_name, "_lfc_
   </div>
 
   <!-- Arrow in between -->
-  <div style="width: 10%; text-align: center; font-size: 2em;">
-    &#8594;
+  <div style="width: 90%; text-align: center; font-size: 2em; margin-bottom: 20px;">
+    &#8595;
   </div>
 
   <!-- Altered Thresholds -->
-  <div style="width: 45%; padding: 10px;">
+  <div style="width: 90%; padding: 10px;">
     <h4 style="text-align: center;">Altered Thresholds</h4>
-    <div style="background-color: #f9f9f9; height: 200px; border: 1px solid #ccc; 
-overflow-x: auto; overflow-y: auto; white-space: nowrap;">
+    <div style="background-color: #f9f9f9; height: 200px; border: 1px solid #ccc; overflow-x: auto; overflow-y: auto; white-space: nowrap;">
       <pre><code>
 significance_threshold <- 0.01
 lfc_threshold <- 2.5
@@ -474,13 +486,12 @@ we will flip the treatment and control groups. We will keep the adjusted thresho
 and thus only have to take care of the `par_tmp$SigAna$comparisons` and 
 `par_tmp$SigAna$contrast`. We overwrite both after loading the RDS file, holding the data and results obtained from cOmicsArt.
 
-<div style="display: flex; align-items: center; justify-content: center;">
+<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
 
   <!-- Original Code -->
-  <div style="width: 45%; padding: 10px;">
-    <h4 style="text-align: center;">Original Thresholds</h4>
-    <div style="background-color: #f9f9f9; height: 275px; border: 1px solid #ccc; 
-overflow-x: auto; overflow-y: auto; white-space: nowrap;">
+  <div style="width: 90%; padding: 10px; margin-bottom: 20px;">
+    <h4 style="text-align: center;">Original Code</h4>
+    <div style="background-color: #f9f9f9; height: 200px; border: 1px solid #ccc; overflow-x: auto; overflow-y: auto; white-space: nowrap;">
       <pre><code>
 list2env(envList,envir = globalenv()) 
 # loads the variables directly into global env
@@ -493,15 +504,14 @@ if(exists('loadedVersion')){
   </div>
 
   <!-- Arrow in between -->
-  <div style="width: 10%; text-align: center; font-size: 2em;">
-    &#8594;
+  <div style="width: 90%; text-align: center; font-size: 2em; margin-bottom: 20px;">
+    &#8595;
   </div>
 
   <!-- Altered Comparison -->
-  <div style="width: 45%; padding: 10px;">
-    <h4 style="text-align: center;">Altered Thresholds</h4>
-    <div style="background-color: #f9f9f9; height: 275px; border: 1px solid #ccc; 
-overflow-x: auto; overflow-y: auto; white-space: nowrap;">
+  <div style="width: 90%; padding: 10px;">
+    <h4 style="text-align: center;">Altered Code</h4>
+    <div style="background-color: #f9f9f9; height: 200px; border: 1px solid #ccc; overflow-x: auto; overflow-y: auto; white-space: nowrap;">
       <pre><code>
 # Set Environment ----
 list2env(envList,envir = globalenv()) 
@@ -518,6 +528,7 @@ par_tmp$SigAna$contrast <- c("untrt", "trt")
 
 </div>
 
+
 The altered plot will look like a mirrored version of the threshold adjusted plot:
 
 ![Changed comparison to untrt:trt.](/cOmicsArt/assets/images/volcano_plot_comparison.pdf)

docs/code-and-data/r-code.md

@@ -8,8 +8,7 @@ nav_order: 2
 # R code
 
 This page contains an explanation of the R code structure when downloading R code and 
-data to reproduce/alter the analysis. We will use the original code of [the volcano 
-plot example](examples.md).
+data to reproduce/alter the analysis. We will use the original code of [the volcano plot example](code-and-data/examples.md).
 
 ## 1. Package loading and installation
 
@@ -208,10 +207,11 @@ An example how to adjust this, for example changing the comparison method is sho
 After the analysis is done, the results are visualized. There are two visualization 
 types in cOmicsArt, using ggplot2 and using pheatmap. These parts can be adjusted 
 following their respective documentation. Also, there exists gallerys and other useful resources, where one can screen for what they search for visually and get the particular code snippets:
-- [R Gallery,](ggplot2 https://r-graph-gallery.com/ggplot2-package.html)
+- [R Gallery](ggplot2 https://r-graph-gallery.com/ggplot2-package.html)
 - [Top 50 ggplot visualisaitions](https://r-statistics.co/Top50-Ggplot2-Visualizations-MasterList-R-Code.html?utm_content=cmp-true)
 - [ggplot extensions](https://exts.ggplot2.tidyverse.org/gallery/)
 - [Pheatmp function](https://r-charts.com/correlation/pheatmap/?utm_content=cmp-true)
+
 From own experience, we can also recommend LLMs such as ChatGPT to help to adjust the plotting commands. The code for a typical ggplot2 visualization 
 will look like this:
 

docs/faq.md

@@ -50,7 +50,7 @@ Common issues are: Not exactly the same row or columnnames, missing values, wron
   <div id="q5" class="answer">
   The report is generated for your download upon clicking on the hyperlink 'Download Report (as html)' underneath the cOmicsArt - text at the top left. Upon clicking you will see a loading bar and the report will be finalized. To retrieve it you need to click on 'Download report' (it is also a hyperlink) - you should get prompted by your file-browser to save the file. If this does not happen please check your browser settings and allow pop-ups for this page.
   </div>
-</div>
+
 
 
 <script>

docs/installation.md

@@ -7,22 +7,20 @@ editor_options:
     wrap: 72
 ---
 
-# Introduction
+# Local Installation
 
 ![A comic about a cat finding
 cOmicsART](/cOmicsArt/assets/images/cOmicsTurtle.png) *Image generated
 using DALL-E by OpenAI. Adjusted by Lea Seep*
 
 Why do you want to install cOmicsART locally? If you just want to use it
 make sure to checkout the website:
-[cOmicsART](https://shiny.iaas.uni-bonn.de/cOmicsArt/). For this there
+[cOmicsART](https://shiny.iaas.uni-bonn.de/cOmicsArt/). Here
 is no installation effort required. If you know you are right here,
-let's get started.
+let's get started. You can find here instructions to run cOmicsART locally within RStudio or using Docker.
 
 # Running a cOmicsART locally within RStudio
 
-# Installing and Running the Shiny App Locally
-
 This guide provides detailed instructions on how to install and run the
 Shiny app from the provided GitHub repository.
 
@@ -31,7 +29,7 @@ Shiny app from the provided GitHub repository.
 Ensure you have the following software installed on your system: -
 [Git](https://git-scm.com/) - [R](https://www.r-project.org/) -
 [RStudio](https://rstudio.com/products/rstudio/download/) -
-[renv](https://rstudio.github.io/renv/articles/renv.html) package in R
+[renv](https://rstudio.github.io/renv/articles/renv.html) package in R.
 
 ## Steps to Install and Run the Shiny App
 

docs/interface-details.md

@@ -35,23 +35,21 @@ To get more information on the tabs, navigate to the respective documentation us
 
 ### Features Across Tabs
 
-<div style="overflow: hidden;">
-  <div style="float: left; width: 70%;">
-    <ol>
-      <li><strong>Side Panel Structure:</strong> Each tab, except the input tab, has a side panel divided by a horizontal line:
-        <ul>
-          <li><strong>Upper Section:</strong> Contains options affecting the analysis, requiring recomputation when changed. The analysis is triggered by a "Do/Get analysis" button above the division line.</li>
-          <li><strong>Lower Section:</strong> Displays secondary parameters with changes reflecting immediately in the results (automatic update).</li>
-        </ul>
-      </li>
-      <li><strong>Main Panel Structure:</strong> Each main panel contains the visualization of the analysis results. Some panels are further subdivided to show multiple results, for example, the Significance Analysis tab.</li>
-      <li><strong>Picture Download Options:</strong> Users can download visualizations and results in common formats (e.g., PNG, TIFF, PDF). There are respective buttons to select the file format. Upon 'Save plot' the file is downloaded to the local machine.</li>
-      <li><strong>Sending Visualizations to Report:</strong> Upon button click on 'Send only to report' the current shown visualization and associated parameters are saved to the Report. Hence, you can play around with parameters and can save the one of interest to you without cluttering the report with all tried options.</li>
-      <li><strong>Get Underlying R Code and Data:</strong> Upon button click, the R script and respective data to generate shown plot will be presented for download. The script includes the Data selection, pre-processing as well as the respective analysis. For more details make sure to check out <a href="code-and-data.md">Code and Data</a>.</li>
-      <li><strong>Notes:</strong> At the bottom of each tab you can find the Notes field - here you can enter text which will be saved within the report. You can use <a href="https://www.markdownguide.org/cheat-sheet/">markdown syntax</a> here.</li>
-    </ol>
-  </div>
-  <div style="float: right; width: 30%;">
-    <img src="/cOmicsArt/assets/images/design_principleSidePanel.png" alt="The design of the side panel" style="width: 100%;">
-  </div>
-</div>
+1. **Side Panel Structure:** Each tab, except the input tab, has a side panel divided by a horizontal line:
+   - **Upper Section:** Contains options affecting the analysis, requiring recomputation when changed. The analysis is triggered by a "Do/Get analysis" button above the division line.
+   - **Lower Section:** Displays secondary parameters with changes reflecting immediately in the results (automatic update).
+
+![The design of the side panel](/cOmicsArt/assets/images/design_principleSidePanel.png)
+
+2. **Main Panel Structure:** Each main panel contains the visualization of the analysis results. Some panels are further subdivided to show multiple results, for example, the Significance Analysis tab.
+
+3. **Picture Download Options:** Users can download visualizations and results in common formats (e.g., PNG, TIFF, PDF). There are respective buttons to select the file format. Upon 'Save plot' the file is downloaded to the local machine.
+
+4. **Sending Visualizations to Report:** Upon clicking 'Send only to report,' the current shown visualization and associated parameters are saved to the Report. This allows you to experiment with parameters and save the preferred visualization without cluttering the report with all options tried.
+
+5. **Get Underlying R Code and Data:** Upon button click, the R script and respective data to generate the shown plot will be available for download. The script includes data selection, preprocessing, and analysis. For more details, refer to [Code and Data](code-and-data.md).
+
+6. **Notes:** At the bottom of each tab, there is a Notes field where you can enter text that will be saved within the report. You can use [markdown syntax](https://www.markdownguide.org/cheat-sheet/) here.
+
+
+

docs/interface-details/enrichment-analysis.md

@@ -9,7 +9,7 @@ nav_order: 8
 
 The Enrichment Analysis tab allows you to perform enrichment analysis specifically for transcriptomics data. This section is divided into two areas: the side panel and the main panel.
 
-## Side Panel
+## Side Panel 📚
 
 In the side panel, you have the following options:
 
@@ -56,7 +56,7 @@ In both cases GSEA and ORA, you will have the following additional options:
 - **Get Enrichment Analysis**: Clicking this button will generate the results in the 
   main panel
 
-## Main Panel
+## Main Panel 💡
 
 The main panel displays the results of the enrichment analysis. Here are some key points:
 
@@ -74,7 +74,7 @@ The main panel displays the results of the enrichment analysis. Here are some ke
   code and data. For more information, check out [Interface Details](../interface-details.md). The tables can be downloaded in common formats as well (.csv,
   .xlsx).
 
-### Other Notes
+### Other Notes 📌
 
 - **Question Marks**: The displayed question marks provide quick and immediate help. They offer guidance and additional information about the options available.
 

docs/interface-details/heatmap.md

@@ -9,7 +9,7 @@ nav_order: 6
 
 The Heatmap tab is divided into two main sections: the side panel and the main panel.
 
-## Side Panel
+## Side Panel 📚
 
 Within the side panel, you have multiple options, which depend on the selected option within
 'Select Entities to show'. Here are the general options:
@@ -59,7 +59,7 @@ Hence you need to specifcy the ordering critera and the 'k' (number of entities)
 - **row-wise scaling?**: Enable or disable row-wise scaling - note that this is z-scaling. Useful to see changes 
   within one row more clearly.
 
-## Main Panel
+## Main Panel 💡
 
 The main panel displays the heatmap and additional options. Here are some key points:
 
@@ -78,7 +78,7 @@ The main panel displays the heatmap and additional options. Here are some key po
 
 - **Notes**: Add personal notes regarding the heatmap.
 
-### Other Notes
+### Other Notes 📌
 
 - **Question Marks**: The displayed question marks provide quick and immediate help. However, since you are reading this documentation, you found the extensive version. Hope it helped!
 - **Interpretation**: The heatmap can provide insights into the relationships between different entities based on the selected annotations and clustering options. Adjusting the selection and aesthetic parameters can help in identifying the most relevant patterns.