Browse code

beautifying UI

pablo-rodr-bio2 authored on 14/05/2021 09:37:52
Showing9 changed files

... ...
@@ -1,5 +1,9 @@
1 1
 Package: GSVA
2
+<<<<<<< HEAD
2 3
 Version: 1.39.31
4
+=======
5
+Version: 1.39.30
6
+>>>>>>> beautifying UI
3 7
 Title: Gene Set Variation Analysis for microarray and RNA-seq data
4 8
 Authors@R: c(person("Justin", "Guinney", role=c("aut", "cre"), email="justin.guinney@sagebase.org"),
5 9
              person("Robert", "Castelo", role="aut", email="robert.castelo@upf.edu"),
... ...
@@ -9,7 +9,7 @@ argumentsDataUI <- function(id) {
9 9
       column(
10 10
         width = 12,
11 11
         align = "center",
12
-        h3("Parameters", style="font-weight: bold")
12
+        h4("Parameters", style="font-weight: bold")
13 13
       )
14 14
     ),
15 15
     wellPanel(
... ...
@@ -2,10 +2,14 @@ closeBtnUI <- function(id){
2 2
   ns <- NS(id)
3 3
   hidden(actionButton(ns("closeSave"), "Save & Close", 
4 4
                       icon = icon("window-close"),
5
-                      style = "color: #fff;
6
-                      font-weight: bold;
5
+                      width = "10vw",
6
+                      style = "color: #fff; 
7 7
                       background-color: red;
8
-                      border-color: #fff;"))
8
+                      font-weight: bold;
9
+                      border-color: #fff;
10
+                      padding: 5px 5px 5px 5px;
11
+                      margin: 6px 5px 6px 15px;"
12
+                      ))
9 13
 }
10 14
 
11 15
 closeBtnServer <- function(id, gs){
... ...
@@ -1,9 +1,14 @@
1 1
 downloadUI <- function(id) {
2 2
   ns <- NS(id)
3
-  hidden(downloadButton(ns('downloadData'), 'Download', style = "color: #fff;
4
-  font-weight: bold;
5
-  background-color: #27ae60;
6
-  border-color: #fff;" ))
3
+  hidden(
4
+    downloadButton(ns('downloadData'), 'Download',
5
+                   style = "color: #fff;
6
+                   background-color: #27ae60;
7
+                   font-weight: bold;
8
+                   border-color: #fff;
9
+                   padding: 5px 14px 5px 14px;
10
+                   margin: 6px 5px 6px 15px;
11
+                   width: 10vw;")) 
7 12
 }
8 13
 
9 14
 downloadServer <- function(id, gs){
... ...
@@ -1,7 +1,7 @@
1 1
 geneSetsUI <- function(id){
2 2
   ns <- NS(id)
3
-  tagList(
4
-    radioButtons(ns("genesetSourceType"), "Select gene sets:",
3
+  div( id = ns("genesets-input"),
4
+    radioButtons(ns("genesetSourceType"), "Select Gene Sets:",
5 5
                  c("From file" = "fileGeneset",
6 6
                    "From workspace" = "varGeneset")),
7 7
     conditionalPanel(
... ...
@@ -1,7 +1,7 @@
1 1
 matrixUI <- function(id){
2 2
   ns <- NS(id)
3
-  tagList(
4
-    radioButtons(ns("matrixSourceType"), "Select expression data matrix:",
3
+  div(id = ns("matrix-input"),
4
+    radioButtons(ns("matrixSourceType"), "Select Expression Data Matrix:",
5 5
                  c("From file" = "fileMatrix",
6 6
                    "From workspace" = "varMatrix")),
7 7
     conditionalPanel(
... ...
@@ -181,14 +181,17 @@ function(input, output, session) {
181 181
   
182 182
   # CLOSE BTN
183 183
   closeBtnServer("close", reactive(rv$gs))
184
-
184
+  
185 185
   
186 186
   # TEXT1
187 187
   output$text1 <- renderUI({
188 188
     req(rv$gs)
189
-    HTML(paste("<br/>", "\t To see the Empirical Cumulative Distribution Function 
190
-    of a Sample, click on its line in this plot and go
191
-      to the 'Gene.Set' Panel", "<br/>", sep="<br/>"))
189
+    tagList(
190
+      br(),
191
+      div("To see the Empirical Cumulative Distribution Function 
192
+      of a Sample, click on its line in this plot and go to the 
193
+      'Gene.Set' Panel", style="text-align: center;")
194
+    )
192 195
   })
193 196
   
194 197
   # TABLE
... ...
@@ -24,14 +24,15 @@ dashboardPage(
24 24
     br(),
25 25
     geneSetsUI("genes1"),
26 26
     br(),
27
-    radioButtons("arg", "Change default settings:",
27
+    radioButtons("arg", "Change default settings?",
28 28
                  c("No" = "no",
29 29
                    "Yes" = "yes")),
30 30
     br(),
31 31
     fluidRow(
32 32
       column(
33 33
         width = 12, align = "left",
34
-        actionButton("button", "Run"),
34
+        actionButton("button", "Run", class = "run-btn", icon = icon("play-circle"),
35
+                     width = "10vw"),
35 36
         downloadUI("download"),
36 37
         closeBtnUI("close")
37 38
       )
... ...
@@ -40,7 +41,7 @@ dashboardPage(
40 41
   
41 42
   dashboardBody(
42 43
     shinyjs::useShinyjs(),
43
-    add_busy_spinner(spin = "double-bounce", position = "bottom-right",
44
+    add_busy_spinner(spin = "cube-grid", position = "bottom-right",
44 45
                      height = "100px", width = "100px"),
45 46
     fluidRow(
46 47
       box(
... ...
@@ -50,7 +51,14 @@ dashboardPage(
50 51
                              textOutput("errorsGsva"),
51 52
                              htmlOutput("text1"),
52 53
                              plot1_UI("plot1"),
53
-                             tableOutput("result")
54
+                             br(),
55
+                             fluidRow(
56
+                               column(
57
+                                 width = 12,
58
+                                 align = "center",
59
+                                 tableOutput("result")
60
+                               )
61
+                             )
54 62
                     ),
55 63
                     tabPanel("GeneSets",
56 64
                              uiOutput("text2"),
... ...
@@ -15,6 +15,14 @@ font-weight: bold;
15 15
   margin: 5px 5px 5px 5px;
16 16
 }
17 17
 
18
+#matrix1-matrix-input, #genes1-genesets-input {
19
+  background-color: #708090;
20
+}
21
+
22
+#arg {
23
+  background-color: #BC8F8F;
24
+}
25
+
18 26
 .left-side, .main-sidebar {
19 27
   padding-top: 75px;
20 28
 }
... ...
@@ -28,6 +36,15 @@ font-weight: bold;
28 36
   
29 37
 }
30 38
 
39
+.run-btn {
40
+  color: #fff; 
41
+  background-color: #6495ED;
42
+  font-weight: bold;
43
+  border-color: #fff;
44
+  padding: 5px 5px 5px 5px;
45
+  margin: 5px 5px 5px 5px;
46
+}
47
+
31 48
 
32 49
 /**
33 50
 .main-header {