Improve UI

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: clinsight
 Title: ClinSight
-Version: 0.0.0.9023
+Version: 0.0.0.9024
 Authors@R: c(
     person("Leonard Daniël", "Samson", , "[email protected]", role = c("cre", "aut"),
            comment = c(ORCID = "0000-0002-6252-7639")),

R/app_ui.R

@@ -20,6 +20,7 @@ app_ui <- function(request){
         ),
       bg = "#43464c",
       title = tags$a(
+        href = "/",
         tags$img(src='www/gcp_logo.png', height = '40', width ='180')
       ), 
       sidebar = bslib::sidebar(mod_main_sidebar_ui("main_sidebar_1")),

R/mod_common_forms.R

@@ -7,20 +7,26 @@ mod_common_forms_ui <- function(id, form){
   ns <- NS(id)
   bslib::nav_panel(
     title = form, 
-    bslib::card(
-      mod_timeline_ui(ns("timeline_fig")),
-      bslib::layout_columns(
-        col_widths = c(3, 9, 12, 12),
-        fillable = FALSE,
+    mod_timeline_ui(ns("timeline_fig")),
+    bslib::layout_sidebar(
+      fillable = FALSE,
+      if(form == "Adverse events"){
+        DT::dataTableOutput(ns("SAE_table"))
+      },
+      DT::dataTableOutput(ns("common_form_table")), 
+      sidebar = bslib::sidebar(
+        bg = "white", 
+        position = "right",
         shinyWidgets::materialSwitch(
           inputId = ns("show_all_data"),
           label = "Show all participants", 
           status = "primary",
           right = TRUE
         ),
-        HTML("<b>Bold*</b>: New/updated data"),
-        DT::dataTableOutput(ns("SAE_table")),
-        DT::dataTableOutput(ns("common_form_table"))
+        bslib::card_body(
+          HTML("<b>Bold*:</b> New/updated data"), 
+          fillable = FALSE
+          )
       )
     )
   )
@@ -115,9 +121,6 @@ mod_common_forms_server <- function(
 
     mod_timeline_server("timeline_fig", r = r, form = form)
 
-    if(form != "Adverse events"){
-      shinyjs::hide("SAE_table")
-    }
     output[["SAE_table"]] <- DT::renderDT({
       req(form == "Adverse events")
       SAE_data <- data_active() |> 

R/mod_study_forms.R

@@ -9,45 +9,51 @@ mod_study_forms_ui <- function(id, form, form_items){
   bslib::nav_panel(
     title = form,
     bslib::card(
-      full_screen = T,
-      bslib::layout_columns(
-        col_widths = c(2, -4, 2, -4, 12, 12),
-        shinyWidgets::radioGroupButtons(
-          inputId = ns("switch_view"),
-          choiceNames = list(icon("line-chart"), icon("table-list")),
-          choiceValues = list("graph", "table"),
-          selected = "graph"
-        ),
+      full_screen = T, 
+      bslib::layout_sidebar(
         conditionalPanel(
           condition = "input.switch_view === 'graph'",
           ns = NS(id),
-          shinyWidgets::pickerInput(
-            inputId = ns("filter"),
-            label = NULL,
-            choices = form_items,
-            selected = form_items,
-            options = shinyWidgets::pickerOptions(
-              actionsBox = TRUE,
-              size = 10,
-              selectedTextFormat = "count > 3",
-              style = "btn-outline-primary"
-            ),
-            multiple = TRUE
+          shinycssloaders::withSpinner(
+            plotly::plotlyOutput(ns("figure"), height = "100%"),
+            type = 5
           )
         ),
         conditionalPanel(
-          condition = "input.switch_view === 'graph'",
+          condition = "input.switch_view === 'table'",
           ns = NS(id),
-          bslib::layout_columns(
-            col_widths = c(8,4),
-            shinycssloaders::withSpinner(
-              plotly::plotlyOutput(ns("figure"), height = "100%"),
-              type = 5
-            ),
-            img(src="www/figure_legend.png", width = 200, height = 233)
-          )
+          DT::dataTableOutput(ns("table"), width = "auto")
         ),
-        bslib::card_body(
+        sidebar = bslib::sidebar(
+          position = "right", 
+          bg = "white",
+          shinyWidgets::radioGroupButtons(
+            inputId = ns("switch_view"),
+            choiceNames = list(icon("line-chart"), icon("table-list")),
+            choiceValues = list("graph", "table"),
+            selected = "graph"
+          ),
+          conditionalPanel(
+            condition = "input.switch_view === 'graph'",
+            ns = NS(id),
+            shinyWidgets::pickerInput(
+              inputId = ns("filter"),
+              label = NULL,
+              choices = form_items,
+              selected = form_items,
+              options = shinyWidgets::pickerOptions(
+                actionsBox = TRUE,
+                size = 10,
+                selectedTextFormat = "count > 3",
+                style = "btn-outline-primary"
+              ),
+              multiple = TRUE
+            ), 
+            bslib::popover(
+              tags$a("Legend", tags$sup(icon("circle-info")), class =  "link"),
+              bslib::card_body(img(src="www/figure_legend.png"))
+            )
+          ),
           conditionalPanel(
             condition = "input.switch_view === 'table'",
             ns = NS(id),
@@ -56,8 +62,7 @@ mod_study_forms_ui <- function(id, form, form_items){
               label = "Show all participants", 
               status = "primary",
               right = TRUE
-            ),
-            DT::dataTableOutput(ns("table"), width = "auto")
+            )
           )
         )
       )
@@ -206,7 +211,7 @@ mod_study_forms_server <- function(
         id = "subject_id",
         id_to_highlight = r$subject_id, 
         point_size = "reviewed",
-        height = ceiling(0.5*length(unique(fig_data()$item_name))*125+150),
+        height = ceiling(0.5*length(unique(fig_data()$item_name))*125+175),
         scale = scale_yval,
         use_unscaled_limits = scaling_data()$use_unscaled_limits
       )

dev/improve_figures.qmd

@@ -17,8 +17,7 @@ library(ggplot2)
 library(plotly)
 pkgname <- "clinsight"
 library(pkgname, character.only = TRUE)
-merged_data <- merge_meta_with_data(clinsightful_data, metadata)
-appdata <- get_appdata(merged_data)
+appdata <- get_appdata(clinsightful_data)
 vars <- get_meta_vars(data = appdata, meta = metadata)
 apptables <- lapply(
     setNames(names(appdata), names(appdata)), \(x){
@@ -69,19 +68,36 @@ create_legend()
 ```
 
 
-```{r , fig.width=2.5, fig.height=2.75}
+```{r , fig.width=2.25, fig.height=4.5}
 sizes <- c("old", "new/updated")
-df <- data.frame(col = factor(names(col_palette), levels = names(col_palette)))
-df$status <- factor(sample(sizes, nrow(df), replace = TRUE), levels = sizes)
+lims <- gsub(", ", ",\n", names(col_palette))
+palette <- setNames(col_palette, lims)
+
+df <- data.frame(col = factor(lims, levels = lims))
+df$status <- factor(rep_len(sizes, length.out = nrow(df)), levels = sizes)
 fig <- ggplot(df) +
-  scale_fill_manual(values = col_palette) +
+  scale_fill_manual(values = palette) +
   theme(legend.key = element_rect(fill = "white", colour = NA)) +
   geom_point(aes(fill = col, x = 1, y = 1, size = status), shape = 21) + 
   labs(legend.title = "Legend") + 
-  theme(legend.position = "right", legend.title = element_text(face = "bold")) +
+  theme(
+    legend.position = "right", 
+    legend.title = element_text(face = "bold", size = 16), 
+    legend.text = element_text(size = 14), 
+    legend.key = element_blank(),
+    legend.background = element_blank()
+    ) +
   guides(
-    size=guide_legend(title = "Status", override.aes = list(fill = "grey", size = c(2L,6L))),
-    fill=guide_legend(title = "Limits", override.aes = list(size = 6L))
+    size=guide_legend(
+      title = "Status", 
+      override.aes = list(fill = "grey", size = c(2L,6L)), 
+      keyheight = 1.75
+      ),
+    fill=guide_legend(
+      title = "Limits", 
+      override.aes = list(size = 6L), 
+      keyheight = 2.75
+      )
     )
 suppressWarnings(cowplot::ggdraw(cowplot::get_legend(fig)))
 ggsave("figure_legend.png")

inst/app/www/custom.css

@@ -5,11 +5,11 @@
 
 .bslib-value-box .value-box-area > :nth-child(2) {
   content: '';
-  font-size: 0.9vw;
+  font-size: calc(4px + .6vw);
 }
 
 .bslib-value-box .value-box-area > :first-child {
-    font-size: 0.9vw;
+    font-size: calc(4px + .6vw);
 }
 
 .bslib-value-box .value-box-showcase {
@@ -29,11 +29,6 @@
    padding-left: 0rem;
 }
 
-.timeline-fig-basic {
-  overflow-x: scroll;
-  min-width: 250px;
-}
-
 /* below is needed for good alignment of the top-widgets */
 .bslib-card {
   height:100%;
@@ -65,3 +60,4 @@ div.datatables div.header {
   text-align: center;
   font-weight: bold;
 }
+

inst/golem-config.yml

@@ -1,6 +1,6 @@
 default:
   golem_name: clinsight
-  golem_version: 0.0.0.9023
+  golem_version: 0.0.0.9024
   app_prod: no
   user_identification: test_user
   study_data: !expr clinsight::clinsightful_data