User interface and style improvements

R/comparison_editor.R

@@ -4,7 +4,7 @@
 #' @noRd
 comparison_editor_ui <- function(id, options) {
   verticalLayout(
-    h3("Comparison"),
+    h5("Comparison"),
     selectInput(
       NS(id, "comparison_genes"),
       "Comparison genes",

R/details.R

@@ -8,11 +8,15 @@ details_ui <- function(id) {
       splitLayout(
         cellWidths = "auto",
         uiOutput(NS(id, "copy")),
-        downloadButton(NS(id, "download"), "Download CSV")
+        downloadButton(
+          NS(id, "download"),
+          "Download CSV",
+          class = "btn-outline-primary"
+        )
       )
     ),
     div(
-      style = "margin-top: 16px",
+      style = "margin-top: 16px; margin-bottom: 8px;",
       DT::DTOutput(NS(id, "genes"))
     )
   )
@@ -43,13 +47,15 @@ details_server <- function(id, options, results) {
           "copy_ids_button",
           "Copy gene IDs",
           genes_text,
-          icon = icon("clipboard")
+          icon = icon("clipboard"),
+          class = "btn-outline-primary"
         ),
         rclipboard::rclipButton(
           "copy_names_button",
           "Copy gene names",
           names_text,
-          icon = icon("clipboard")
+          icon = icon("clipboard"),
+          class = "btn-outline-primary"
         )
       )
     })

R/filters.R

@@ -2,18 +2,22 @@
 filters_ui <- function(id) {
   div(
     class = "well",
-    style = "margin-top: 24px; margin-bottom: 16px; padding-top: 24px;",
+    style = "margin-top: 24px; margin-bottom: 16px;",
     verticalLayout(
-      radioButtons(
-        NS(id, "method"),
-        label = NULL,
-        choices = list(
-          "Filter percentiles" = "percentile",
-          "Filter scores" = "score",
-          "Filter ranks" = "rank",
-          "No filtering" = "none"
-        ),
-        inline = TRUE
+      h5("Filter criteria"),
+      div(
+        style = "margin-top: 8px;",
+        radioButtons(
+          NS(id, "method"),
+          label = NULL,
+          choices = list(
+            "Filter percentiles" = "percentile",
+            "Filter scores" = "score",
+            "Filter ranks" = "rank",
+            "No filtering" = "none"
+          ),
+          inline = TRUE
+        )
       ),
       tabsetPanel(
         id = NS(id, "sliders"),

R/methods.R

@@ -1,7 +1,7 @@
 # Construct UI for the methods editor.
 methods_ui <- function(id, options) {
   verticalLayout(
-    h3("Methods"),
+    h5("Methods"),
     selectInput(
       NS(id, "optimization_genes"),
       "Genes to optimize for",

R/preset_editor.R

@@ -16,7 +16,7 @@ preset_editor_ui <- function(id, options) {
   }
 
   verticalLayout(
-    h3("Inputs"),
+    h5("Inputs"),
     selectInput(
       NS(id, "species"),
       "Species to include",

R/results.R

@@ -37,7 +37,22 @@ results_ui <- function(id, options) {
           )
         ),
         tabPanel(
-          title = "Method comparison",
+          title = "Gene sets",
+          div(
+            style = "margin-top: 16px",
+            htmlOutput(NS(id, "comparison_text")),
+            div(
+              style = "margin-top: 16px;",
+              plotly::plotlyOutput(
+                NS(id, "boxplot"),
+                width = "100%",
+                height = "600px"
+              )
+            )
+          )
+        ),
+        tabPanel(
+          title = "Methods",
           div(
             style = "margin-top: 16px",
             plotly::plotlyOutput(
@@ -100,29 +115,6 @@ results_ui <- function(id, options) {
             height = "600px"
           )
         ),
-        tabPanel(
-          title = "Comparison",
-          div(
-            style = "margin-top: 16px",
-            htmlOutput(NS(id, "comparison_text")),
-            plotly::plotlyOutput(
-              NS(id, "boxplot"),
-              width = "100%",
-              height = "600px"
-            )
-          )
-        ),
-        tabPanel(
-          title = "Ortholog locations",
-          div(
-            style = "margin-top: 16px",
-            plotly::plotlyOutput(
-              NS(id, "gene_locations_plot"),
-              width = "100%",
-              height = "1200px"
-            )
-          )
-        ),
         tabPanel(
           title = "Scores by position",
           div(
@@ -143,6 +135,17 @@ results_ui <- function(id, options) {
             )
           )
         ),
+        tabPanel(
+          title = "Ortholog locations",
+          div(
+            style = "margin-top: 16px",
+            plotly::plotlyOutput(
+              NS(id, "gene_locations_plot"),
+              width = "100%",
+              height = "1200px"
+            )
+          )
+        ),
         tabPanel(
           title = "Detailed results",
           details_ui(NS(id, "results"))
@@ -330,7 +333,10 @@ results_server <- function(id, options, analysis) {
       if (!is.null(comparison)) {
         div(
           reference_div,
-          div(HTML(comparison_text("comparison genes", comparison)))
+          div(
+            style = "margin-top: 16px;",
+            HTML(comparison_text("comparison genes", comparison))
+          )
         )
       } else {
         reference_div

R/style.R

@@ -9,7 +9,9 @@ custom_css <- function() {
       "vertical-align: top;",
       "margin-right: 12px;",
       "}",
-      ".shiny-input-container { width: auto !important; min-width: 200px; }"
+      ".shiny-input-container { width: auto !important; min-width: 200px; }",
+      "h5 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: bold; }",
+      ".navbar-brand { font-weight: bold; }"
     ))
   )
 }