From aa5f8e47c604af8876c4994e172a6ce0e1581786 Mon Sep 17 00:00:00 2001 From: "anna.abelman" Date: Thu, 2 Jan 2025 13:34:55 -0800 Subject: [PATCH] added shinybrowser package to get user screen width to adjust font size. made sidebar width smaller. fixed weird action button formatting. --- DESCRIPTION | 1 + inst/ShinyFiles/MainApp/fleetUI.R | 14 ++- inst/ShinyFiles/MainApp/fleet_helpers.R | 9 ++ inst/ShinyFiles/MainApp/map_viewer_app.R | 2 +- inst/ShinyFiles/MainApp/server.R | 19 ++- inst/ShinyFiles/MainApp/ui.R | 151 ++++++++++++----------- 6 files changed, 116 insertions(+), 80 deletions(-) diff --git a/DESCRIPTION b/DESCRIPTION index d734fe97..833f0942 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -73,6 +73,7 @@ Imports: servr, sf (>= 1.0-0), shiny (>= 1.7.4), + shinybrowser, shinycssloaders, shinyjs, shinyWidgets, diff --git a/inst/ShinyFiles/MainApp/fleetUI.R b/inst/ShinyFiles/MainApp/fleetUI.R index 11fdaec0..bea08607 100644 --- a/inst/ShinyFiles/MainApp/fleetUI.R +++ b/inst/ShinyFiles/MainApp/fleetUI.R @@ -6,10 +6,10 @@ saveFleetUI <- function(id) { tagList( downloadLink(ns('downloadplotHIDE'), label = ''), - actionButton(ns('downloadplot'), label = 'Save plot to folder', + actionButton(ns('downloadplot'), label = HTML('Save plot to
folder'), class = "btn-primary"), downloadLink(ns('downloadTableHIDE'), label = ''), - actionButton(ns('downloadTable'), label = 'Save table to folder as csv', + actionButton(ns('downloadTable'), label = HTML("Save table to folder
as csv"), class = "btn-primary") ) } @@ -19,9 +19,10 @@ plotSaveUI <- function(id) { tagList( downloadLink(ns('downloadPlotHIDE'), label = ''), - actionButton(ns('save_plot'), label = 'Save plot to folder', + actionButton(ns('save_plot'), label = HTML('Save plot to
folder'), class = "btn-primary", - width = "49%")) + width = "49%" + )) } tableSaveUI <- function(id) { @@ -29,9 +30,10 @@ tableSaveUI <- function(id) { tagList( downloadLink(ns('downloadTableHIDE'), label = ''), - actionButton(ns('save_table'), label = 'Save table to folder as csv', + actionButton(ns('save_table'), label = HTML("Save table to
folder as csv"), class = "btn-primary", - width = "50%") + width = "49%" + ) ) } diff --git a/inst/ShinyFiles/MainApp/fleet_helpers.R b/inst/ShinyFiles/MainApp/fleet_helpers.R index 02c753ae..8c27e279 100644 --- a/inst/ShinyFiles/MainApp/fleet_helpers.R +++ b/inst/ShinyFiles/MainApp/fleet_helpers.R @@ -1,3 +1,12 @@ +### themes for different screen size -- only adjusting the font_scale +small_theme <- bslib::bs_theme(primary = "#41729F", secondary = "#AACDE5", + info = "#274472", + font_scale = 0.9, + preset = "cerulean") +big_theme <- bslib::bs_theme(primary = "#41729F", secondary = "#AACDE5", + info = "#274472", + font_scale = 1.1, + preset = "cerulean") date_select <- function(dat) { diff --git a/inst/ShinyFiles/MainApp/map_viewer_app.R b/inst/ShinyFiles/MainApp/map_viewer_app.R index c5b5b6cf..b3a1b341 100644 --- a/inst/ShinyFiles/MainApp/map_viewer_app.R +++ b/inst/ShinyFiles/MainApp/map_viewer_app.R @@ -18,7 +18,7 @@ map_viewer_serv <- function(id, dat, spatdat, project) { output$var_select <- renderUI({ bslib::page_sidebar( - sidebar = bslib::sidebar( width = 550, + sidebar = bslib::sidebar( width = 350, selectInput(ns("avd"), "Area ID variable (primary data)", choices = colnames(dat$dataset), selected = "ZoneID"), diff --git a/inst/ShinyFiles/MainApp/server.R b/inst/ShinyFiles/MainApp/server.R index 196394d1..924db0e9 100644 --- a/inst/ShinyFiles/MainApp/server.R +++ b/inst/ShinyFiles/MainApp/server.R @@ -9,6 +9,8 @@ source("zone_closure_Server.R", local = TRUE) source("run_policy_UI.R", local = TRUE) source("run_policy_server.R", local = TRUE) + + # default global search value if(!exists("default_search")) {default_search <- ""} @@ -22,6 +24,14 @@ fs_exist <- exists("folderpath", where = ".GlobalEnv") server = function(input, output, session) { options(shiny.maxRequestSize = 8000*1024^2) + observe(session$setCurrentTheme( + if (isTRUE(shinybrowser::get_width() > 1500)) big_theme else small_theme + )) + + # observe({ + # as.numeric(str(shinybrowser::get_width())) + # }) + # #Disable buttons toggle_inputs <- function(input_list, enable_inputs = TRUE){ # Toggle elements @@ -1100,7 +1110,8 @@ server = function(input, output, session) { output$load_manage_proj_ui <- renderUI({ actionButton('load_manage_proj', 'Manage Projects', class = "btn-secondary", - style = "padding-left:20px; padding-right: 20px;") + #style = "padding-left:20px; padding-right: 20px;" + ) }) # Manage Projects @@ -5857,9 +5868,9 @@ server = function(input, output, session) { tags$br(), actionButton("mod_add", "Save model and add new model", - style="color: #fff; background-color: #337ab7; border-color: #800000;"), + class = "btn-primary"), - tags$br(), tags$br(), + tags$br(), uiOutput('mod_run_bttn') ) @@ -5923,7 +5934,7 @@ server = function(input, output, session) { uiOutput('mod_run_custom_ui'), actionButton("mod_submit", "Run model(s)", - style = "color: #fff; background-color: #6EC479; border-color:#000000;") + class = "btn-primary") ) } }) diff --git a/inst/ShinyFiles/MainApp/ui.R b/inst/ShinyFiles/MainApp/ui.R index ab2e3bdc..12d049e5 100644 --- a/inst/ShinyFiles/MainApp/ui.R +++ b/inst/ShinyFiles/MainApp/ui.R @@ -8,18 +8,19 @@ source("run_policy_UI.R", local = TRUE) source("run_policy_server.R", local = TRUE) + + + ## USER INTERFACE ui = function(request){ bslib::page_navbar( - theme = bslib::bs_theme(primary = "#41729F", secondary = "#AACDE5", - info = "#274472", #font_scale = 0.8, - preset = "cerulean", - "font-size-base" = "0.85rem"), + theme = small_theme, id = "tabs", + # Pop up information icons header= tags$head( - + shinybrowser::detect(), shinyjs::useShinyjs(), use_prompter(), tags$style(".fa-info-circle {color:#0066FF}"), @@ -237,10 +238,10 @@ ui = function(request){ # Upload data tabset panel ---- #--- bslib::nav_panel(title = "Upload Data", id = "upload", - bslib::page_sidebar(fillable = TRUE, + bslib::page_fillable( #tags$style(type='text/css', "#uploadMain { width:100%; margin-top: 24px;margin-left:-20px;padding-left:2px; padding-right:5px}"), - - sidebar = bslib::sidebar( width = 500, + bslib::layout_sidebar(fillable = TRUE, fill = TRUE, + sidebar = bslib::sidebar( fillable = TRUE, fill = TRUE, width = 350, h5(strong("Steps for uploading data:")), p("1. Select folder that contains 'FishSETFolder'."), @@ -250,35 +251,41 @@ ui = function(request){ p("2. Enter name of project. If uploading from FishSET database, projects will appear after 'FishSET database' is selected."), p("3. Select files to upload."), p("4. Click on 'Load data' to create FishSET database and upload files into tables."), - splitLayout( - actionButton(inputId = 'loadDat',label ="Load data", class = "btn-primary",width = "100%"), + # splitLayout( + actionButton(inputId = 'loadDat',label ="Load data", class = "btn-primary"#,width = "100%" + ), actionButton("refresh", "Refresh data", class = "btn-primary", icon = icon('sync', verify_fa = FALSE), - width = "100%") - ), + #width = "100%" + ) , tags$br(), - splitLayout( + # splitLayout( actionButton(inputId ="meta_modal", label ="Metadata", class = "btn-secondary", - style = "padding-left: 40px; padding-right: 42px;"), + #style = "padding-left: 40px; padding-right: 42px;" + ), actionButton(inputId ="delete_tabs_bttn", label ="Manage Tables", class = "btn-secondary", - style = "padding-left: 27px; padding-right: 25px;"), - uiOutput('load_manage_proj_ui') - ), + # style = "padding-left: 27px; padding-right: 25px;" + ), + uiOutput('load_manage_proj_ui'), conditionalPanel("input.loadDat > 0", # TODO: update to a more reliable method - splitLayout( + # splitLayout( actionButton("confid_modal", "Confidentiality", class = "btn-secondary", - style = "padding-left: 25px; padding-right: 25px;"), + # style = "padding-left: 25px; padding-right: 25px;" + ), actionButton("reset_modal", "Reset log", class = "btn-secondary", - style = "padding-left: 45px; padding-right: 45px;"), + # style = "padding-left: 45px; padding-right: 45px;" + ), actionButton("plot_set", "Plot settings", class = "btn-secondary", - style = "padding-left: 35px; padding-right: 35px;"))), + #style = "padding-left: 35px; padding-right: 35px;" + # ) + )), @@ -299,34 +306,38 @@ ui = function(request){ ), tags$br(), actionButton("closeUp", "Close app", icon = icon("circle-xmark"), - width = "50%", + width = "100%", class = "btn-danger", onclick = "setTimeout(function(){window.close();},500);") ) + ), tags$br(), - bslib::card( - height = 200, - uiOutput('fish_folder_path'), - - uiOutput("projects")), # define project name + bslib::card(fill = FALSE, + # height = 200, + bslib::card_body( + uiOutput('fish_folder_path'), + uiOutput("projects")) + ), # define project name - bslib::layout_column_wrap( + bslib::layout_column_wrap( fill = FALSE, width = 1/3, bslib::card( - height = 400, + # height = 400, + bslib::card_body( radioButtons('load_main_src', tags$strong("Source primary data from:"), choices=c('Upload new file','FishSET database'), selected='Upload new file', inline=TRUE), uiOutput('main_upload'), - uiOutput('ui.action2')), + uiOutput('ui.action2')) + ), bslib::card( - height = 400, + # height = 400, radioButtons('load_port_src', tags$strong("Source port data from:"), choices=c('Upload new file','FishSET database'), inline=TRUE), @@ -337,7 +348,7 @@ ui = function(request){ uiOutput("PortAddtableMerge")), bslib::card( - height = 400, + # height = 400, radioButtons('load_spat_src', tags$strong("Source spatial data from:"), choices=c('Upload new file', 'FishSET database'), selected='Upload new file', inline=TRUE), @@ -347,10 +358,10 @@ ui = function(request){ uiOutput('spatial_upload2')) ), - bslib::layout_column_wrap( + bslib::layout_column_wrap( fill = FALSE, width = 1/2, bslib::card( - height = 300, + # height = 300, radioButtons('load_grid_src', tags$strong("Source gridded data from:"), choices=c('Upload new file','FishSET database'), selected='Upload new file', inline=TRUE), @@ -359,7 +370,7 @@ ui = function(request){ uiOutput('gridded_uploaded')), bslib::card( - height = 300, + # height = 300, radioButtons('load_aux_src', tags$strong("Source auxiliary data from:"), choices=c('Upload new file','FishSET database'), selected='Upload new file', inline=TRUE), @@ -369,7 +380,7 @@ ui = function(request){ ) ) - + ) ), @@ -377,13 +388,15 @@ ui = function(request){ # Data quality evaluation tabset panel ---- #--- bslib::nav_panel("Data Quality Evaluation", value = "qaqc", - bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + bslib::page_fillable( + bslib::layout_sidebar(fillable = TRUE, fill = TRUE, + sidebar = bslib::sidebar( fillable = TRUE, fill = TRUE, width = 350, actionButton('saveData','Save data to FishSET database', width = "100%", class = "btn-primary"), - splitLayout( - tabPlotUI("qaqc", type = "tab_plot")), + splitLayout( + tabPlotUI("qaqc", type = "tab_plot") + ), radioButtons("checks", "Select data quality check function to run:", choices = c('Variable class', 'Summary table', 'Outliers', @@ -520,6 +533,7 @@ ui = function(request){ style = "font-size: 75%; width: 100%") ))) ) + ) ), #--- @@ -527,14 +541,15 @@ ui = function(request){ #--- bslib::nav_menu(title = "Explore the Data",header = NULL, footer = NULL, bslib::nav_panel(title = "Data Exploration", id = "explore", - bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + bslib::page_fillable( + bslib::layout_sidebar(fillable = TRUE, fill = TRUE, + sidebar = bslib::sidebar( fillable = TRUE, fill = TRUE, width = 350, actionButton('saveDataExplore','Save data to FishSET database', width = "100%", class = "btn-primary"), conditionalPanel("input.plot_table=='Plots'", - tabPlotUI("explore") + splitLayout(tabPlotUI("explore")) ), conditionalPanel("input.SelectDatasetExplore=='main' || input.SelectDatasetExplore=='grid'", @@ -656,15 +671,17 @@ ui = function(request){ "input.SelectDatasetExplore == 'grid' && input.plot_table == 'Plots'", shinycssloaders::withSpinner(plotOutput("grid_plot"), type = 6) ) - )), + )) + ), #--- ## Basic analyses tabset panel ---- #--- bslib::nav_panel(title = "Simple Analyses", id = "analysis",#value - bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + bslib::page_fillable( + bslib::layout_sidebar(fillable = TRUE, fill = TRUE, + sidebar = bslib::sidebar( fillable = TRUE, fill = TRUE, width = 350, splitLayout( tabPlotUI("anal")), @@ -723,8 +740,8 @@ ui = function(request){ shinycssloaders::withSpinner(plotOutput("output_plot_reg", width='100%', height = "600px"), type = 6) )) ) - - ), + + )), #--- @@ -741,7 +758,7 @@ ui = function(request){ #--- bslib::nav_panel(title = 'Compute New Variables', id='new',#value bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + sidebar = bslib::sidebar( width = 350, actionButton('saveDataNewVars','Save data to FishSET database', width = "100%", class = "btn-primary"), @@ -994,11 +1011,9 @@ ui = function(request){ bslib::navset_tab(id = 'select_fleet', bslib::nav_panel(title = "Fleet Assignment", value = "fleet_assignment", bslib::page_sidebar( - sidebar = bslib::sidebar(width = 500, + sidebar = bslib::sidebar( width = 350, saveDataTableUI("fleet"), # "Save data to FishSET database" - tags$br(), - - uiOutput("fleetSaveOutput1"), # "Save table..." and "Save plot..." + splitLayout(uiOutput("fleetSaveOutput1")), # "Save table..." and "Save plot..." tags$br(), tags$br(), selectInput("assign_fun", label = "Select task", @@ -1046,11 +1061,9 @@ ui = function(request){ bslib::nav_panel(title = "Fleet Summary", id = "fleet_summary", bslib::page_sidebar( - sidebar = bslib::sidebar(width = 500, + sidebar = bslib::sidebar( width = 350, saveDataTableUI("fleet_summary"), # "Save data to FishSET database" - tags$br(), - - uiOutput("fleetSaveOutput2"), # "Save table..." and "Save plot..." + splitLayout(uiOutput("fleetSaveOutput2")), # "Save table..." and "Save plot..." tags$br(), tags$br(), @@ -1145,7 +1158,7 @@ ui = function(request){ #--- bslib::nav_panel(title = 'Define Alternative Fishing Choices', id = "altc", bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + sidebar = bslib::sidebar( width = 350, uiOutput("disableMsg1"), actionButton("save_final_modal", "Save final table to FishSET database", @@ -1203,7 +1216,7 @@ ui = function(request){ bslib::navset_tab(id = 'exp_tab', bslib::nav_panel(title = 'Create expected catch', id = 'exp_create', bslib::page_sidebar( - sidebar = bslib::sidebar(width = 500, + sidebar = bslib::sidebar( width = 350, tags$br(), @@ -1353,7 +1366,7 @@ ui = function(request){ bslib::nav_panel(title ='Merge expected catch', id = 'exp_merge', bslib::page_sidebar( - sidebar = bslib::sidebar(width = 500, + sidebar = bslib::sidebar( width = 350, actionButton('exp_merge_reload', 'Refresh expected catch list', class = "btn-primary"), @@ -1384,7 +1397,7 @@ ui = function(request){ bslib::navset_tab(id = 'mod_sub', bslib::nav_panel(title="Run model(s)", id = 'model_run', bslib::page_sidebar( - sidebar = bslib::sidebar(width = 500, + sidebar = bslib::sidebar( width = 350, # Models can't be run if final dataset not detected uiOutput("disableMsg"), @@ -1544,7 +1557,7 @@ ui = function(request){ bslib::nav_panel(title = "Compare models", id = 'model_compare', bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + sidebar = bslib::sidebar( width = 350, actionButton("mod_reload", "Reload model output", class = "btn-primary"), actionButton("mod_compare_delete", "Delete row", class = "btn-primary"), # h3(''), @@ -1579,7 +1592,7 @@ ui = function(request){ bslib::nav_panel(title = 'Manage models', id = 'model_man', bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + sidebar = bslib::sidebar( width = 350, actionButton("mod_reload", "Reload model output", class = "btn-primary"), @@ -1607,7 +1620,7 @@ ui = function(request){ ), bslib::nav_panel(title = 'View model list', id = 'model_list', bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + sidebar = bslib::sidebar( width = 350, actionButton('mod_list_reload', 'Reload model list', class = "btn-primary"), @@ -1619,7 +1632,7 @@ ui = function(request){ ), bslib::nav_panel(title='Cross-validation', id = 'cross_validation', bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + sidebar = bslib::sidebar( width = 350, actionButton('run_cv', "Run cross-validation", class = "btn-primary"), @@ -1650,7 +1663,7 @@ ui = function(request){ ), bslib::nav_panel(title = 'Out-of-sample prediction', id = 'outsample_predict', bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + sidebar = bslib::sidebar( width = 350, h5(strong('Step 1: Upload out-of-sample data')), uiOutput("load_outsample"), @@ -1693,7 +1706,7 @@ ui = function(request){ bslib::nav_menu(title ='Policy', bslib::nav_panel(title = "Zone Closure", id = "zone_closures", bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + sidebar = bslib::sidebar( width = 350, "Click on one or more zones to select closed zones.", "\nPress the 'Add closure' button to record choices.", "Repeat to add another closure.", @@ -1708,7 +1721,7 @@ ui = function(request){ ), bslib::nav_panel(title = "Run Policy", id = "run_policy", bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + sidebar = bslib::sidebar( width = 350, bslib::accordion( bslib::accordion_panel( "To run policy scenarios", icon = bsicons::bs_icon("sliders"), @@ -1797,7 +1810,7 @@ ui = function(request){ ), bslib::nav_panel(title = "Rerun logged function calls", id = "log_rerun", bslib::page_sidebar( - sidebar = bslib::sidebar( width = 500, + sidebar = bslib::sidebar( width = 350, actionButton("run_log", "Rerun log", class = "btn-secondary"),