add interface - general details

ICB-DCM · Jun 27, 2024 · 040648b · 040648b
1 parent 379056a
commit 040648b
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 25 deletions.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -3,8 +3,8 @@
 title: cOmicsART Documentation
 logo: "/assets/images/Logo_cOmicsArt.svg"  # Update to the new image file path
 description: Here you find all the information you need to use cOmicsART
-#theme: just-the-docs
-remote_theme: just-the-docs/just-the-docs
+theme: just-the-docs
+#remote_theme: just-the-docs/just-the-docs
 
 # Include custom CSS
 just_the_docs:

diff --git a/docs/_site/assets/js/search-data.json b/docs/_site/assets/js/search-data.json
@@ -49,11 +49,11 @@
     "relUrl": "/interface-details/heatmap.html"
   },"7": {
     "doc": "Welcome to cOmicsART",
-    "title": "Welcome to   cOmicsArt Documentation 🎨",
+    "title": "Welcome to    cOmicsArt Documentation 🎨",
     "content": "If you are looking for the web app, please visit: 🌐 cOmicsART Web App . Otherwise, you can navigate through the documentation using the sidebar on the left. If you’re searching for something specific, try using the search bar at the top. 🔍 It can search through the entire documentation and guide you to the relevant section. Have fun exploring! 🎉 . Quick Links to Get You Started: . | 📚 Want to know the required data and format? Visit Interface Details. | 🔧 Need to run the app locally? Check out the Installation Guide. | 💡 Looking for customization inspiration? Explore our Customization Examples. | 📊 Want to know more about the significance analysis? Visit Significance Analysis | . ",
-    "url": "/#welcome-to---comicsart-documentation-",
+    "url": "/#welcome-to----comicsart-documentation-",
 
-    "relUrl": "/#welcome-to---comicsart-documentation-"
+    "relUrl": "/#welcome-to----comicsart-documentation-"
   },"8": {
     "doc": "Welcome to cOmicsART",
     "title": "Welcome to cOmicsART",
@@ -106,17 +106,17 @@
   },"15": {
     "doc": "Interface Details",
     "title": "Interface Details",
-    "content": "If you need tab specific information navigate to the respective documentation using the left sidebar. ",
+    "content": "If you need tab-specific information, navigate to the respective documentation using the left sidebar. ",
     "url": "/interface-details.html",
 
     "relUrl": "/interface-details.html"
   },"16": {
     "doc": "Interface Details",
-    "title": "General Details about the interface.",
-    "content": ". | general design choices | when to press a button | what are buttons, tabs | dependencies of the tabs | . ",
-    "url": "/interface-details.html#general-details-about-the-interface",
+    "title": "General Design Characteristics",
+    "content": "User Interface and Analysis Features . 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. | . 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 here. | . Features Across Tabs . | 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). | . | Download Options: Users can download autogenerated, HTML reports as well as visualizations and results in common formats (e.g., PNG, XLSX). There are respective buttons. | . ",
+    "url": "/interface-details.html#general-design-characteristics",
 
-    "relUrl": "/interface-details.html#general-details-about-the-interface"
+    "relUrl": "/interface-details.html#general-design-characteristics"
   },"17": {
     "doc": "PCA",
     "title": "PCA",
@@ -217,11 +217,11 @@
     "relUrl": "/interface-details/single-gene-visualisations.html"
   },"31": {
     "doc": "Welcome to cOmicsART",
-    "title": "Welcome to   cOmicsArt Documentation 🎨",
+    "title": "Welcome to  cOmicsArt Documentation 🎨",
     "content": "If you are looking for the web app, please visit: 🌐 cOmicsART Web App . Otherwise, you can navigate through the documentation using the sidebar on the left. If you’re searching for something specific, try using the search bar at the top. 🔍 It can search through the entire documentation and guide you to the relevant section. Have fun exploring! 🎉 . Quick Links to Get You Started: . | 📚 Want to know the required data and format? Visit Interface Details. | 🔧 Need to run the app locally? Check out the Installation Guide. | 💡 Looking for customization inspiration? Explore our Customization Examples. | 📊 Want to know more about the significance analysis? Visit Significance Analysis | . ",
-    "url": "/welcome.html#welcome-to---comicsart-documentation-",
+    "url": "/welcome.html#welcome-to--comicsart-documentation-",
 
-    "relUrl": "/welcome.html#welcome-to---comicsart-documentation-"
+    "relUrl": "/welcome.html#welcome-to--comicsart-documentation-"
   },"32": {
     "doc": "Welcome to cOmicsART",
     "title": "Welcome to cOmicsART",

diff --git a/docs/_site/index.html b/docs/_site/index.html
diff --git a/docs/_site/interface-details.html b/docs/_site/interface-details.html
diff --git a/docs/_site/welcome.html b/docs/_site/welcome.html
diff --git a/docs/index.md b/docs/index.md
@@ -4,7 +4,7 @@ layout: default
 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 🎨
+# 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 🎨
 
 If you are looking for the web app, please visit: 🌐 [cOmicsART Web App](https://comicsart.org/)
 

diff --git a/docs/interface-details.md b/docs/interface-details.md
@@ -6,9 +6,50 @@ nav_order: 2
 ---
 
 # Interface Details
-If you need tab specific information navigate to the respective documentation using the left sidebar.
-## General Details about the interface.
-- general design choices
-- when to press a button
-- what are buttons, tabs
-- dependencies of the tabs
+
+If you need tab-specific information, navigate to the respective documentation using the left sidebar.
+
+## General Design Characteristics
+
+### User Interface and Analysis Features
+
+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.
+
+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.
+
+
+### 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>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>
+    </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>
+
+
+
diff --git a/docs/welcome.md b/docs/welcome.md
@@ -4,13 +4,13 @@ layout: default
 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 🎨
+# 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 🎨
 
 If you are looking for the web app, please visit: 🌐 [cOmicsART Web App](https://comicsart.org/)
 
 Otherwise, you can navigate through the documentation using the sidebar on the left. If you’re searching for something specific, try using the search bar at the top. 🔍 It can search through the entire documentation and guide you to the relevant section.
 
-Have fun exploring! 🎉
+**Have fun exploring!** 🎉
 
 ### Quick Links to Get You Started: