update interface_details landing page

ICB-DCM · Jul 4, 2024 · 7b76a8f · 7b76a8f
1 parent 800728d
commit 7b76a8f
Show file tree

Hide file tree

Showing 29 changed files with 100 additions and 101 deletions.
diff --git a/docs/_site/assets/css/just-the-docs-dark.css b/docs/_site/assets/css/just-the-docs-dark.css
@@ -435,7 +435,7 @@ blockquote { margin: 10px 0; margin-block-start: 0; margin-inline-start: 0; padd
 @media (min-width: 31.25rem) { .site-title { font-size: 1.5rem !important; line-height: 1.25; } }
 @media (min-width: 50rem) { .site-title { padding-top: 0.5rem; padding-bottom: 0.5rem; } }
 
-.site-logo { width: 100%; height: 100%; background-image: url("/assets/images/Logo_cOmicsArt.svg"); background-repeat: no-repeat; background-position: left center; background-size: contain; }
+.site-logo { width: 100%; height: 100%; background-image: url("/OmicShiny/assets/images/Logo_cOmicsArt.svg"); background-repeat: no-repeat; background-position: left center; background-size: contain; }
 
 .site-button { display: flex; height: 100%; padding: 1rem; align-items: center; }
 

diff --git a/docs/_site/assets/css/just-the-docs-default.css b/docs/_site/assets/css/just-the-docs-default.css
@@ -307,7 +307,7 @@ blockquote { margin: 10px 0; margin-block-start: 0; margin-inline-start: 0; padd
 @media (min-width: 31.25rem) { .site-title { font-size: 1.5rem !important; line-height: 1.25; } }
 @media (min-width: 50rem) { .site-title { padding-top: 0.5rem; padding-bottom: 0.5rem; } }
 
-.site-logo { width: 100%; height: 100%; background-image: url("/assets/images/Logo_cOmicsArt.svg"); background-repeat: no-repeat; background-position: left center; background-size: contain; }
+.site-logo { width: 100%; height: 100%; background-image: url("/OmicShiny/assets/images/Logo_cOmicsArt.svg"); background-repeat: no-repeat; background-position: left center; background-size: contain; }
 
 .site-button { display: flex; height: 100%; padding: 1rem; align-items: center; }
 

diff --git a/docs/_site/assets/css/just-the-docs-light.css b/docs/_site/assets/css/just-the-docs-light.css
@@ -307,7 +307,7 @@ blockquote { margin: 10px 0; margin-block-start: 0; margin-inline-start: 0; padd
 @media (min-width: 31.25rem) { .site-title { font-size: 1.5rem !important; line-height: 1.25; } }
 @media (min-width: 50rem) { .site-title { padding-top: 0.5rem; padding-bottom: 0.5rem; } }
 
-.site-logo { width: 100%; height: 100%; background-image: url("/assets/images/Logo_cOmicsArt.svg"); background-repeat: no-repeat; background-position: left center; background-size: contain; }
+.site-logo { width: 100%; height: 100%; background-image: url("/OmicShiny/assets/images/Logo_cOmicsArt.svg"); background-repeat: no-repeat; background-position: left center; background-size: contain; }
 
 .site-button { display: flex; height: 100%; padding: 1rem; align-items: center; }
 

diff --git a/docs/_site/assets/js/just-the-docs.js b/docs/_site/assets/js/just-the-docs.js
@@ -77,7 +77,7 @@ function disableHeadStyleSheets() {
 
 function initSearch() {
   var request = new XMLHttpRequest();
-  request.open('GET', '/assets/js/search-data.json', true);
+  request.open('GET', '/OmicShiny/assets/js/search-data.json', true);
 
   request.onload = function(){
     if (request.status >= 200 && request.status < 400) {
@@ -456,7 +456,7 @@ jtd.getTheme = function() {
 
 jtd.setTheme = function(theme) {
   var cssFile = document.querySelector('[rel="stylesheet"]');
-  cssFile.setAttribute('href', '/assets/css/just-the-docs-' + theme + '.css');
+  cssFile.setAttribute('href', '/OmicShiny/assets/css/just-the-docs-' + theme + '.css');
 }
 
 // Note: pathname can have a trailing slash on a local jekyll server

diff --git a/docs/_site/assets/js/search-data.json b/docs/_site/assets/js/search-data.json
diff --git a/docs/_site/code-and-data.html b/docs/_site/code-and-data.html
diff --git a/docs/_site/code-and-data/data.html b/docs/_site/code-and-data/data.html
diff --git a/docs/_site/code-and-data/examples.html b/docs/_site/code-and-data/examples.html
diff --git a/docs/_site/code-and-data/r-code.html b/docs/_site/code-and-data/r-code.html
diff --git a/docs/_site/faq.html b/docs/_site/faq.html
diff --git a/docs/_site/index.html b/docs/_site/index.html
diff --git a/docs/_site/installation.html b/docs/_site/installation.html
diff --git a/docs/_site/interface-details.html b/docs/_site/interface-details.html
diff --git a/docs/_site/interface-details/enrichment-analysis.html b/docs/_site/interface-details/enrichment-analysis.html
diff --git a/docs/_site/interface-details/heatmap.html b/docs/_site/interface-details/heatmap.html
diff --git a/docs/_site/interface-details/pca.html b/docs/_site/interface-details/pca.html
diff --git a/docs/_site/interface-details/pre-processing.html b/docs/_site/interface-details/pre-processing.html
diff --git a/docs/_site/interface-details/required-data-input.html b/docs/_site/interface-details/required-data-input.html
diff --git a/docs/_site/interface-details/sample-correlation.html b/docs/_site/interface-details/sample-correlation.html
diff --git a/docs/_site/interface-details/selection.html b/docs/_site/interface-details/selection.html
diff --git a/docs/_site/interface-details/significance-analysis.html b/docs/_site/interface-details/significance-analysis.html
diff --git a/docs/_site/interface-details/single-gene-visualisations.html b/docs/_site/interface-details/single-gene-visualisations.html
diff --git a/docs/_site/showcases.html b/docs/_site/showcases.html
diff --git a/docs/_site/showcases/showcase-a.html b/docs/_site/showcases/showcase-a.html
diff --git a/docs/_site/showcases/showcase-b.html b/docs/_site/showcases/showcase-b.html
diff --git a/docs/_site/welcome.html b/docs/_site/welcome.html
diff --git a/docs/index.md b/docs/index.md
@@ -7,10 +7,8 @@ nav_exclude: true
 # Welcome to   <span style="color:#EC0014"> c</span><span style="color:#FD8D33">O</span><span style="color:#3897F1">m</span><span style="color:#FFD335">i</span><span style="color:#A208BA">c</span><span style="color:#EF0089">s</span><span style="color:#EC0014">A</span><span style="color:#FD8D33">r</span><span style="color:#3897F1">t</span> Documentation 🎨
 
 
-![Example Image](/OmicShiny/assets/images/cOmicsCat.png)
-![Example Image](./OmicShiny/assets/images/cOmicsCat.png)
-
-
+![A comic about a cat finding cOmicsART](/OmicShiny/assets/images/cOmicsCat.png)
+*Image generated using DALL-E by OpenAI. Adjusted by Lea Seep*
 
 If you are looking for the web app, please visit: 🌐 [cOmicsART Web App](https://shiny.iaas.uni-bonn.de/OmicShiny/)
 

diff --git a/docs/interface-details.md b/docs/interface-details.md
@@ -15,41 +15,41 @@ If you need tab-specific information, navigate to the respective documentation u
 
 The cOmicsART user interface evolves gradually to guide users through the necessary steps:
 
-- **Data Input Tab**: The initial tab where users upload their data. A successful data upload is necessary before accessing the next tab.
-- **Pre-Processing Tab**: This tab becomes accessible after a successful data upload. It offers multiple options to prepare the data for analysis, including diagnostic plots to check for normal distribution.
-- **Analysis Tabs**: Six analysis options are available, each in its own tab. These tabs provide interactive result visualizations and various analytical functions.
+- 📥 **Data Input Tab**: The initial tab where users upload their data. A successful data upload is necessary before accessing the next tab.
+- ⚙️ **Pre-Processing Tab**: This tab becomes accessible after a successful data upload. It offers multiple options to prepare the data for analysis, including diagnostic plots to check for normal distribution.
+- 📈 **Analysis Tabs**: Six analysis options are available, each in its own tab. These tabs provide interactive result visualizations and various analytical functions.
 
 To get more information on the tabs, navigate to the respective documentation using the left sidebar.
 
-
 ### Navigation Principles
 
-- **Button Clicks**: Used to evoke actions.
-- **Loading Bars**: Display waiting times during processing.
-- **Question Marks**: Provide quick help and guide to respective detailed documentation found on this very site
-- **Dropdown Menus**: Offer options for selection. Sometime multiple items can be selected. If clicking on a selected item it is removed from the selection
-- **Checkboxes**: If a checkbox is clicked, the respective feature is activated. If clicked again, the feature is deactivated.
-- **Sliding Bars**: Used to adjust numeric parameters or ranges. The range of the sliding bar is displayed above the bar. Simply slide the bar to the desired value.
-- **Text Fields**: Used to enter text. Within cOmicsART these fields are mostly used to hold your Notes, which are saved in the HTML report at approporiate position. You can use [markdown syntax](https://www.markdownguide.org/cheat-sheet/) here.
-
+- 🖱️ **Button Clicks**: Used to evoke actions.
+- ⏳ **Loading Bars**: Display waiting times during processing.
+- ❓ **Question Marks**: Provide quick help and guide to respective detailed documentation found on this very site.
+- 🔽 **Dropdown Menus**: Offer options for selection. Sometimes multiple items can be selected. If clicking on a selected item it is removed from the selection.
+- ☑️ **Checkboxes**: If a checkbox is clicked, the respective feature is activated. If clicked again, the feature is deactivated.
+- 📏 **Sliding Bars**: Used to adjust numeric parameters or ranges. The range of the sliding bar is displayed above the bar. Simply slide the bar to the desired value.
+- 📝 **Text Fields**: Used to enter text. Within cOmicsART these fields are mostly used to hold your Notes, which are saved in the HTML report at the appropriate position. You can use [markdown syntax](https://www.markdownguide.org/cheat-sheet/) here.
 
 ### Features Across Tabs
+
 <div style="overflow: hidden;">
-    <div style="float: left; width: 70%;">
+  <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>Download Options:</strong> Users can download autogenerated, HTML reports as well as visualizations and results in common formats (e.g., PNG, XLSX). There are respective buttons.
-        </li>
+      <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 [Code and Data](code-and-data.md).</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 [markdown syntax](https://www.markdownguide.org/cheat-sheet/) here.</li>
     </ol>
-    </div>
-<div style="float: right; width: 30%;">
-        <img src="{{ site.baseurl }}/assets/images/desing_principleSidePanel.png" alt="The design of the sidepanel" style="width: 100%;">
+  </div>
+  <div style="float: right; width: 30%;">
+    <img src="{{ site.baseurl }}/assets/images/design_principleSidePanel.png" alt="The design of the side panel" style="width: 100%;">
+  </div>
 </div>
-
-
-
diff --git a/docs/welcome.md b/docs/welcome.md
@@ -6,7 +6,8 @@ nav_order: 1
 
 # Welcome to <span style="color:#EC0014"> c</span><span style="color:#FD8D33">O</span><span style="color:#3897F1">m</span><span style="color:#FFD335">i</span><span style="color:#A208BA">c</span><span style="color:#EF0089">s</span><span style="color:#EC0014">A</span><span style="color:#FD8D33">r</span><span style="color:#3897F1">t</span> Documentation 🎨
 
-![Example Image](/OmicShiny/docs/assets/images/cOmicsCat.png)
+![A comic about a cat finding cOmicsART](/OmicShiny/assets/images/cOmicsCat.png)
+*Image generated using DALL-E by OpenAI. Adjusted by Lea Seep*
 
 If you are looking for the web app, please visit: 🌐 [cOmicsART Web App](https://comicsart.org/)