Updates based on thorough first user assessment (#426)

* changed to show debug text again; to let user know what is going on; addresses #421 * Make things clearer in layout, incl. button design, placement, tip highlights and promoting more parallelism (#419, #413, #414) * changes and clean up to the docs to easen the retrieval of information * indicate that batch collection is optional, adding explicit help file - addresses #418 * making top links more obvious; attention no order change #415 as suggested * make cOmicsArt print prettier * Crash fix sig ana (#420) * add hiding of tabs to avoid usage of results; fixes #417 * fixed to work with native SumExp next to cOmicsArt created #404 (#425)
ICB-DCM · Dec 19, 2024 · 4231db5 · 4231db5
1 parent 4ca69db
commit 4231db5
Show file tree

Hide file tree

Showing 38 changed files with 353 additions and 87 deletions.
diff --git a/docs/interface-details/02-selection.md b/docs/interface-details/02-selection.md
@@ -61,7 +61,7 @@ Very similar to the `File Input`, but replacing the sample annotation with the
 
 - **Omic Type that is uploaded**: Select the type of omics data you are uploading (Transcriptomics, Lipidomics, Metabolomics).
 
-- **Start straight away with a test-dataset!**: Click this button to start with a test dataset.
+- **Upload data**: Click this button to start with a test dataset.
 
 ## Main Panel 💡
 

diff --git a/docs/interface-details/03-pre-processing.md b/docs/interface-details/03-pre-processing.md
@@ -171,7 +171,7 @@ The options (and steps) of preprocessing are as follows:
 
 ---
 
-### Select Batch Effect Column
+### [optional] Select Batch Effect Column
 
 Choose a batch effect if applicable. Possible choices are taken from the sample 
 annotation columns. **Important**: This step is **optional**, as sometimes no batches need 

diff --git a/program/shinyApp/R/data_selection/ui.R b/program/shinyApp/R/data_selection/ui.R
@@ -44,7 +44,7 @@ data_selection_sidebar_panel <- sidebarPanel(
           label = "Upload new data",
           width = "80%",
           icon = icon('paper-plane'),
-          style = "color: #fffff; background-color: #90DBF4; border-color: #000000"
+          style = "color: black; background-color: white; border-color: black;"
         ),
         hr(style = "border-top: 1px solid #858585;")
       ),
@@ -71,7 +71,7 @@ data_selection_sidebar_panel <- sidebarPanel(
           label = "Upload new data",
           width = "80%",
           icon = icon('paper-plane'),
-          style = "color: #fffff; background-color: #90DBF4; border-color: #000000",
+          style = "color: black; background-color: white; border-color: black;"
         ),
         hr(style = "border-top: 1px solid #858585;")
       ),
@@ -111,7 +111,7 @@ data_selection_sidebar_panel <- sidebarPanel(
           label = "Upload new data",
           width = "80%",
           icon = icon('paper-plane'),
-          style = "color: #fffff; background-color: #90DBF4; border-color: #000000",
+          style = "color: black; background-color: white; border-color: black;"
         ),
         hr(style = "border-top: 1px solid #858585;")
       ),
@@ -130,9 +130,8 @@ data_selection_sidebar_panel <- sidebarPanel(
         br(),
         actionButton(
           inputId = "EasyTestForUser",
-          label = "Start straight away with a test-dataset!",
-          icon = icon('paper-plane'),
-          style = "color: #fffff; background-color: #90DBF4; border-color: #000000"
+          label = "Upload test data",
+          style = "color: black; background-color: white; border-color: black;"
         ),
         hr(style = "border-top: 1px solid #858585;")
       )
@@ -145,6 +144,7 @@ data_selection_main_panel <- mainPanel(
   div(id ="InfoBox_DataSelection",
       htmlOutput(outputId = "debug", container = pre)
       ),
+  div(id = "mainPanel_other",
   # add link to toggle on the div geneAnno_toggle
   actionButton(
     inputId = "geneAnno_toggle_button",
@@ -164,7 +164,7 @@ data_selection_main_panel <- mainPanel(
   fluidRow(
     column(5,
            actionButton(
-            "select_data", "Select Data",
+            "select_data", "[optional] Select Data",
             width = "100%",
             icon = icon('filter'),
             style = "color: #fffff; background-color: white; border-color: #000000"
@@ -175,10 +175,18 @@ data_selection_main_panel <- mainPanel(
     condition = "input.select_data % 2 == 0",
     fluidRow(column(5,
         actionButton(
-          "use_full_data", "Use Full Dataset",
+          "use_full_data", "Go to Preprocessing",
           width = "100%",
-          icon = icon('rocket'),
-          style = "color: #fffff; background-color: #70BF4F47; border-color: #000000"
+          icon = icon("fas fa-mouse-pointer"),
+          style = "
+          background-color: white;
+          color: black;
+          border: 2px solid darkgrey;
+          font-size: 15px;
+          font-weight: bold;
+          box-shadow: 3px 3px 5px rgba(255, 0, 0, 0.8);
+          padding: 5px 5px;
+          border-radius: 10px;"
         )
     ))
   ),
@@ -222,6 +230,7 @@ data_selection_main_panel <- mainPanel(
     inputId = "refresh1",
     label = "YOu should not be seeing this"
   ))
+  )
 )
 
 

diff --git a/program/shinyApp/R/enrichment_analysis/ui.R b/program/shinyApp/R/enrichment_analysis/ui.R
@@ -105,7 +105,8 @@ ea_sidebar <- function(ns){
     uiOutput(outputId = ns("UniverseOfGene_ui")),
     actionButton(
       inputId = ns("enrichmentGO"),
-      label = "Get Enrichment Analysis"
+      label = "Get Enrichment Analysis",
+      icon = icon("fas fa-mouse-pointer")
     ),
     hr(style = "border-top: 1px solid #000000;"),
     uiOutput(outputId = ns("KeggPathwayID_ui")),

diff --git a/program/shinyApp/R/heatmap/ui.R b/program/shinyApp/R/heatmap/ui.R
@@ -56,7 +56,7 @@ heatmap_sidebar<- function(ns){
     actionButton(
       inputId = ns("Do_Heatmap"),
       label = "Get Heatmap",
-      icon(name = "fas fa-laptop-code")
+      icon(name = "fas fa-mouse-pointer")
     ),
     hr(style = "border-top: 1px solid #000000;"),
     h5("Aesthetics") %>% helper(type = "markdown", content = "Heatmap_Aesthetics"),

diff --git a/program/shinyApp/R/help_tab/ui.R b/program/shinyApp/R/help_tab/ui.R
@@ -17,7 +17,7 @@ help_tab_sidebar_panel <- sidebarPanel(
      inputId = "get_help",
      label = "GO!",
      icon = icon('paper-plane'),
-     style = "color: #fffff; background-color: #90DBF4; border-color: #000000"
+     style = "color: black; background-color: white; border-color: black;"
    ),
   div(
     id = "horizontalLine",
@@ -46,7 +46,17 @@ help_tab_sidebar_panel <- sidebarPanel(
 help_tab_main_panel <- mainPanel(
   id = "mainPanel_help_tab",
   h4("Main Panel",id = "Test"),
-  actionButton("start_tour", span(icon("hand-pointer"),"Tour around cOmicsArt"),style = "background-color: #00c6ff; color: white; padding: 10px 20px; border-radius: 10px; transition: transform 0.2s;"),
+  actionButton(
+    "start_tour", 
+    span(icon("hand-pointer"),"Tour around cOmicsArt"),
+    style = "
+    background-color: #00c6ff; 
+    color: white; 
+    padding: 10px 20px; 
+    border-radius: 10px; 
+    font-size: 15px;
+    font-weight: bold;
+    transition: transform 0.2s;"),
   div(
     id = "help_tab_info",
     htmlOutput(outputId = "help_tab_info", container = pre),

diff --git a/program/shinyApp/R/module_DownloadReport.R b/program/shinyApp/R/module_DownloadReport.R
@@ -5,7 +5,8 @@ DownloadReport_ui <- function(id){
   tagList(
     actionLink(
       inputId = ns("DownloadReport"),
-      label = "Download Report (as html)"
+      label = tagList(icon("download"), "Download Report (as html)"),
+      style = "font-size: 18px; font-weight: bold;  color: black;text-decoration: underline;"
     )
   )
 }

diff --git a/program/shinyApp/R/pca/ui.R b/program/shinyApp/R/pca/ui.R
@@ -17,41 +17,41 @@ pca_sidebar_panel <- function(ns){
     uiOutput(outputId = ns("SampleAnnotationTypes_pca_ui")),
     uiOutput(outputId = ns("sample_selection_pca_ui")),
     # Scale data to unit variance y/n
-    radioGroupButtons(
+    radioButtons(
       inputId = ns("scale_data"),
       label = "Scale data to unit variance?",
       choices = c("Yes","No"),
-      direction = "horizontal",
+      # direction = "horizontal",
       selected = "No"
     ),
     ### start pca ---
     actionButton(
       inputId = ns("Do_PCA"),
       label = "Get PCA",
-      icon("fas fa-laptop-code")
+      icon("fas fa-mouse-pointer")
     ),
     ### further visualizations
     hr(style = "border-top: 1px solid #000000;"),
     uiOutput(outputId = ns("coloring_options_ui")),
-    radioGroupButtons(
+    radioButtons(
       inputId = ns("x_axis_selection"),
       label = "PC for x-Axis",
       choices = c("PC1","PC2", "PC3", "PC4"),
-      direction = "vertical",
+      # direction = "horizontal",
       selected = "PC1"
     ),
-    radioGroupButtons(
+    radioButtons(
       inputId = ns("y_axis_selection"),
       label = "PC for y-Axis",
       choices = c("PC1","PC2", "PC3", "PC4"),
-      direction = "vertical",
+      # direction = "horizontal",
       selected = "PC2"
     ),
-    radioGroupButtons(
+    radioButtons(
       inputId = ns("Show_loadings"),
       label = "Plot Loadings on top? (currently top 5)",
       choices = c("Yes","No"),
-      direction = "horizontal",
+      # direction = "horizontal",
       selected = "No"
     ),
     helpText("Note: if you would like to change the annotation of the indicated loading vectors please select an option the the tab Loadings"),

diff --git a/program/shinyApp/R/pre_processing/ui.R b/program/shinyApp/R/pre_processing/ui.R
@@ -21,11 +21,11 @@ pre_processing_sidebar_panel <- sidebarPanel(
     selected = "none"
   ) %>% helper(type = "markdown", content = "PreProcessing_Procedures"),
   uiOutput(outputId = "DESeq_formula_sub_ui"),
-  uiOutput(outputId = "batch_effect_ui"),
+  uiOutput(outputId = "batch_effect_ui") %>% helper(type = "markdown", content = "PreProcessing_Batch"),
   actionButton(
     inputId = "Do_preprocessing",
     label = "Get Pre-Processing",
-    icon(name = "fas fa-laptop-code")
+    icon(name = "fas fa-mouse-pointer")
   ),
   hr(style = "border-top: 1px solid #000000;"),
   uiOutput("violin_plot_color_ui")

diff --git a/program/shinyApp/R/sample_correlation/ui.R b/program/shinyApp/R/sample_correlation/ui.R
@@ -12,7 +12,7 @@ sampleCorrelation_sidebar_panel <- function(ns){
     actionButton(
       inputId = ns("Do_SampleCorrelation"),
       label = "Get Sample Correlation",
-      icon("fas fa-laptop-code")
+      icon("fas fa-mouse-pointer")
     ),
     hr(style = "border-top: 1px solid #000000;"),
     uiOutput(outputId = ns("SampleAnnotationChoice_ui")) %>% helper(type = "markdown", content = "SampleCorr_Color"),

diff --git a/program/shinyApp/R/significance_analysis/ui.R b/program/shinyApp/R/significance_analysis/ui.R
@@ -27,7 +27,8 @@ significance_analysis_sidebar_ui<- function(ns){
     # Button to start analysis
     actionButton(
       inputId = ns("significanceGo"),
-      label = "Get Significance Analysis"
+      label = "Get Significance Analysis",
+      icon = icon("fas fa-mouse-pointer")
     ),
     hidden(actionButton(
       inputId = ns("refreshUI"),

diff --git a/program/shinyApp/R/single_gene_visualisation/ui.R b/program/shinyApp/R/single_gene_visualisation/ui.R
@@ -8,7 +8,8 @@ single_gene_visualisation_sidebar_ui<- function(ns){
 
     actionButton(
       inputId = ns("singleGeneGo"), 
-      label = "Get Single Gene Visualisation"
+      label = "Get Single Gene Visualisation",
+      icon = icon("fas fa-mouse-pointer")
       ),
     # hidden Button to refresh the UI
     hidden(actionButton(

diff --git a/program/shinyApp/helpfiles/DataSelection_DataUploadFileInput.md b/program/shinyApp/helpfiles/DataSelection_DataUploadFileInput.md
@@ -1,10 +1,14 @@
 ### Data Upload via File Input
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 With `Data upload` you can upload your data to the server via explicit csv files.<br>
-The files must be in the following format:<br>
+<strong>The files must be in the following format:</strong><br>
 1. data-matrix (.csv) <br>
   - contains the actual data, e.g. counts<br>
   - must have the samples (e.g. mouse 1) in the columns and a **unique** naming as 
@@ -22,7 +26,7 @@ The files must be in the following format:<br>
 
 Need help to prepare your data? Check out our Excel Workbook: <a href="https://github.com/ICB-DCM/cOmicsArt/blob/main/UploadHelpcOmicsArt.xlsx" target="_blank">UploadeHelpcOmicsArt.xlsx</a>.
 
-Some pitfalls you may fall into:
+<strong>Some pitfalls you may fall into:</strong>
 * The files must be uploaded at their respective position (**data matrix, 
   sample annotation, entities annotation**).
 * The files need to be **.csv** files, which also means that they need to be comma 

diff --git a/program/shinyApp/helpfiles/DataSelection_MetaData.md b/program/shinyApp/helpfiles/DataSelection_MetaData.md
@@ -1,7 +1,11 @@
 ### Data Upload via File Input + Meta Data Sheet
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html#starting-with-a-single-table-and-a-metadatasheet-" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html#starting-with-a-single-table-and-a-metadatasheet-" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 With `Data upload` you can upload your data to the server via explicit csv files.<br>
 The files must be in the following format:<br>

diff --git a/program/shinyApp/helpfiles/DataSelection_RowSelection.md b/program/shinyApp/helpfiles/DataSelection_RowSelection.md
@@ -1,7 +1,11 @@
 ### Data Selection by Columns and Rows
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/02-selection.html#row-selection---biochemical-entities" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/02-selection.html#row-selection---biochemical-entities" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 With `Row selection` you can choose the entities (e.g. genes) you want to include in the 
 analysis.

diff --git a/program/shinyApp/helpfiles/DataSelection_SummarizedExp.md b/program/shinyApp/helpfiles/DataSelection_SummarizedExp.md
@@ -1,7 +1,11 @@
 ### Data Upload via Precompiled Data
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html#starting-with-an-rds-object" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html#starting-with-an-rds-object" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 With this option, you can upload previously used data. This allows you to upload 
 everything at once. Additionally, you can upload results from previous analyses. It is 

diff --git a/program/shinyApp/helpfiles/DataSelection_UploadInspection.md b/program/shinyApp/helpfiles/DataSelection_UploadInspection.md
@@ -1,7 +1,11 @@
 ### Data Quality Check - Visual Inspection
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/02-selection.html#file-input-%EF%B8%8F" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/02-selection.html#file-input-%EF%B8%8F" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 Using the `Upload visual inspection` tab, you can see the uploaded data and perform a 
 data quality check.

diff --git a/program/shinyApp/helpfiles/EA_Options.md b/program/shinyApp/helpfiles/EA_Options.md
@@ -1,7 +1,11 @@
 ## Enrichment Analysis Options
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/09-enrichment-analysis.html" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/09-enrichment-analysis.html" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 In cOmicsArt you can do either a gene set enrichment analysis or an over-representation analysis. The options for both analyses are described below.
 For more details read here on

diff --git a/program/shinyApp/helpfiles/Heatmap_Aesthetics.md b/program/shinyApp/helpfiles/Heatmap_Aesthetics.md
@@ -1,7 +1,11 @@
 ## Heatmap Aesthetics Options
 
 ---
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#aesthetics-options" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#aesthetics-options" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 **1. Choose Variable to Color the Samples After:**
 

diff --git a/program/shinyApp/helpfiles/Heatmap_FurtherOptions.md b/program/shinyApp/helpfiles/Heatmap_FurtherOptions.md
@@ -1,7 +1,12 @@
 ## Log Fold Change (LFC) Ordering Options
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#conditional-options-for-top-k" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#conditional-options-for-top-k" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
+
 
 **1. Choose Type for LFC-Based Ordering:**
 

diff --git a/program/shinyApp/helpfiles/Heatmap_Options.md b/program/shinyApp/helpfiles/Heatmap_Options.md
@@ -1,7 +1,11 @@
 ## Row Selection Options
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#side-panel-" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#side-panel-" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 1. **Batch Correction**: Use batch-corrected data if available (set in Pre-processing).
 

diff --git a/program/shinyApp/helpfiles/Heatmap_RowAnnoBased.md b/program/shinyApp/helpfiles/Heatmap_RowAnnoBased.md
@@ -1,7 +1,11 @@
 ## Additional Row Selection Options
 
 ---
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#conditional-options-for-select-based-on-annotation" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#conditional-options-for-select-based-on-annotation" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 These options only make sense if you selected `rowAnno_based` in the `Row Selection`. 
 They serve to filter the row entities which to include in the heatmap.