inst/shiny/GUI/ui.r

In RALSA: R Analyzer for Large-Scale Assessments

suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(data.table, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(archive, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(openxlsx, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(Hmisc, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(stringr, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(readr, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(stringi, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(shiny, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(shinydashboard, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(DT, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(shinyFiles, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(ggplot2, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(rclipboard, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(haven, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(shinyWidgets, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(quantreg, warn.conflicts = FALSE, quietly = TRUE))))
suppressWarnings(suppressMessages(suppressPackageStartupMessages(library(shinyjs, warn.conflicts = FALSE, quietly = TRUE))))

# Load RALSA functions
import::from(RALSA,
             lsa.convert.data,
             lsa.select.countries.PISA,
             lsa.merge.data, lsa.vars.dict,
             lsa.data.diag, lsa.recode.vars,
             lsa.download.data,
             lsa.aggregate.vars,
             lsa.cut.vars,
             lsa.pcts.means,
             lsa.prctls,
             lsa.bench,
             lsa.crosstabs,
             lsa.corr,
             lsa.lin.reg,
             lsa.quant.reg,
             lsa.bin.log.reg)


ui <- tagList(

  load.app.CSS.screen <- "
  #loading-content {
    position: absolute;
    background: #000000;
    opacity: 1;
    z-index: 100;
    left: 0;
    right: 0;
    height: 100%;
    text-align: center;
    color: #FFFFFF;
  }
  ",
  jscode.close.RALSA.GUI <- "shinyjs.closeWindow = function() { window.close(); }",
  
  jscode.scroll.tab.to.top <- 'shinyjs.scrolltop = function() {window.scrollTo(0, 0);}',

  useShinyjs(),
  rclipboardSetup(),
  inlineCSS(load.app.CSS.screen),
  div(
    id = "loading-content", class = "center",
    h1(HTML("<br/><br/><br/><br/><br/><br/><blink>Loading...</blink><br/><br/>")),
    img(src = 'RALSA_Logo.png', style = "width: 452px; height: 170px;"),
    h1(HTML("<br/><br/><strong>R Analyzer for Large-Scale Assessments</strong><br/><br/><br/>")),
    tags$a(href="https://statr.dev/menu/ralsa/", "https://statr.dev/", style = "color: red; font-size: 24px; font-weight: bold;", target = "_blank")
  ),
  hidden(
    div(
      id = "app-content",
      dashboardPage(
        title = "RALSA",
        dashboardHeader(
          title =
          tags$a(img(src = "RALSA_Logo.png", height = "60px"), href = "https://statr.dev/menu/ralsa//", target = "_blank"), titleWidth = 260,
          tags$li(class = "dropdown",
          tags$style(".main-header .logo {height: 70px; padding-top: 5px; padding-left: 15px; background-color: #000000 !important;}"),
          tags$style(".sidebar-toggle {background-color: #000000 !important; width: 0px;}"),
          tags$style(".navbar {background-color: #000000 !important; color: #ffffff !important; font-size: 20px;}"),
          tags$header(HTML("R Analyzer for Large-Scale Assessments"), align = "left", style = "
position: fixed;
left: 300px; /*Add a left margin of 300px so that the header does not cover the logo on the left*/
width: 100%;
height: 22px;
color: white;
font-size: 25px;
padding-top: 15px;
padding-left: 75px; /*Add left padding to indent the header text so that it is displayed a bit further away from the toggle. The best would be to be centered to the navigation bar, but it is not possible at the moment.*/
background-color: #000000;"),
        )
      ),
      dashboardSidebar(width = 260,
        tags$style(".main-sidebar {background-color: #000000 !important;}"),
        sidebarMenu(id = "home",
        br(), br(),
        menuItem(text = "Home", icon = icon("home"), tabName = "home")
      ),
      sidebarMenu(id = "dataMenu",
      menuItem(text = "Data preparation", icon = icon("database"), tabName = "dataPreparation",
      menuSubItem(text = "Download data", icon = icon("cloud-arrow-down"), tabName = "downloadData"),
      menuSubItem(text = "Convert data", icon = icon("random"), tabName = "convertData"),
      menuSubItem(text = "Merge data", icon = icon("puzzle-piece"), tabName = "mergeData"),
      menuSubItem(text = "Variable dictionaries", icon = icon("clipboard-list"), tabName = "varProperties"),
      menuSubItem(text = "Data diagnostics", icon = icon("table"), tabName = "dataDiag"),
      menuSubItem(text = "Recode variables", icon = icon("sort-numeric-down"), tabName = "recodeVars"),
      menuSubItem(text = "Cut variables", icon = icon("chart-gantt"), tabName = "cutVars"),
      menuSubItem(text = "Aggregate variables", icon = icon("people-roof"), tabName = "aggrVars"),
      menuSubItem(text = "Select PISA countries", icon = icon("filter"), tabName = "selectPISACountries")
    )
  ),
  sidebarMenu(id = "analysisMenu",
  menuItem(text = "Analysis types", icon = icon("square-root-alt"), tabName = "analyzeData",
  menuSubItem(text = "Percentages and means", icon = icon("chart-pie"), tabName = "pctsMeans"),
  menuSubItem(text = "Percentiles", icon = icon("chart-pie"), tabName = "prctls"),
  menuSubItem(text = "Benchmarks", icon = icon("chart-pie"), tabName = "bnchMarks"),
  menuSubItem(text = "Crosstabulations", icon = icon("chart-pie"), tabName = "crossTabs"),
  menuSubItem(text = "Correlations", icon = icon("chart-pie"), tabName = "corr"),
  menuSubItem(text = "Linear regression", icon = icon("chart-pie"), tabName = "linReg"),
  menuSubItem(text = "Quantile regression", icon = icon("chart-pie"), tabName = "quantReg"),
  menuSubItem(text = "Binary logistic regression", icon = icon("chart-pie"), tabName = "binLogReg")
)
),
sidebarMenu(id = "help",
menuItem(text = "Help", icon = icon("question-circle"), tabName = "ralsaHelp",
menuSubItem(text = "Help sections", icon = icon("question-circle"), tabName = "helpSections"),
menuSubItem(text = "Participating countries", icon = icon("table"), tabName = "partCountries")
)
),
sidebarMenu(id = "exit",
menuItem(text = "Exit", icon = icon("power-off"), tabName = "exitUI")
),
tags$style(".main-sidebar {background-color: #000000 !important;}"),
tags$style(".sidebar-menu li a {color: white !important;}"),
tags$style(HTML(".sidebar-menu li.active a {border-left-color: red !important;}")),
tags$style(HTML(".sidebar-menu li:hover a {border-left-color: red !important;}")),
tags$style(HTML(".treeview-menu a {background-color: #000000 !important; text-indent: 5px !important;}")),
tags$style(HTML(".treeview-menu li.active a {background-color: #FE0F1A !important; text-indent: 10px !important;}")),
tags$style(HTML(".treeview-menu li:hover a {background-color: #000000 !important;}"))
),
dashboardBody(
  extendShinyjs(text = jscode.scroll.tab.to.top, functions = c("scrolltop")),
  tags$style(HTML('table.dataTable tbody>* {background-color: #ffffff !important;}')),
  tags$style(HTML('div.dt-buttons {position: fixed; right: 0;}')),
  tags$style(HTML('table.dataTable tbody tr.selected>* {box-shadow: inset 0 0 0 9999px #e2e2e2 !important; color: #000000; font-weight: bold}')),
  tags$style(HTML("input[type='checkbox']:checked {width: 10px; height: 10px; accent-color: #ffffff; outline: 2px solid #767676; outline-offset: max(0px, 0em); border-radius: 10px;}")),
  tags$style(HTML('input[type="radio"]:checked {accent-color: #767676;}')),
  tags$head(tags$link(rel = "shortcut icon", href = "favicon.ico", type="image/x-icon")),
  tags$style(HTML(".content-wrapper, .right-side {
background-color: #e2e2e2;
}")),
  tags$head(tags$style(HTML(
"
.multicol .shiny-options-group {
width: 700px;
height: auto;
padding-top: 15px !important;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4;    /* Firefox */
column-count: 4;
-moz-column-fill: balanced;
-column-fill: balanced;
}
.checkbox {
margin-top: 0px !important;
-webkit-margin-after: 0px !important;
}
"))),
    tags$script(HTML("$('body').addClass('fixed');")),
    tags$head(
      tags$style(
        HTML(".shiny-notification {
position:fixed;
top: calc(50%);;
left: calc(50%);
color: black;
font-size: 18px;
opacity: 1;}"))
      ),
      tags$head(tags$style(HTML("a {color: #FE0F1A}"))),
      tags$style(HTML('table.dataTable tr.selected td, table.dataTable td.selected {border: 0.05em solid #c1c1c1; background-color: #dddddd !important;}')),
      tags$head(tags$style(HTML('.has-feedback .form-control {padding-left: 0px; padding-right: 0px;}'))),
      tags$head(tags$script(
        HTML(
"Shiny.addCustomMessageHandler('unbindDT', function(id) {
var $table = $('#'+id).find('table');
if($table.length > 0) {
Shiny.unbindAll($table.DataTable().table().node());
}
})")
        )),
        tags$head(tags$style("td .form-group {margin-bottom: 0; margin-top: 0;}")),
        tabItems(
          tabItem(tabName = "home", class = "active",
          fluidRow(align = "center",
          h1(textOutput(outputId = "welcomeToRALSA"))
        ),
        htmlOutput(outputId = "welcomeText")
      ),
      tabItem(tabName = "helpSections", class = "active",
      h1(textOutput(outputId = "helpSectionsHeading")),
      htmlOutput(outputId = "helpOnRALSAWebsite"),
      htmlOutput(outputId = "helpSectionRALSAWebsiteLinks")
    ),
    tabItem(tabName = "partCountries", class = "active",
    h1(textOutput(outputId = "partCountriesHeading")),
    htmlOutput(outputId = "helpOnPartCountries"),
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
      div(uiOutput("selectStudyCycleDropdown")),
      tags$head(tags$style(HTML("#selectStudyCycleDropdown .dropdown-toggle {background-color: white; font-color: black; font-weight: bold;}"))),
      div(style = "width: 30px;"),
      div(checkboxInput(inputId = "partCountriesFilterParticipating", label = "Filter only the participating countries", value = FALSE), style = " padding-top: 30px;")
    ),
    DTOutput(outputId = "selectStudyCycleTable"),
    fluidRow(column(width = 12, align = "right",
    downloadButton(outputId = "downloadHelpCntList", label = "Download Excel", icon = icon("cloud-arrow-down")),
    tags$head(tags$style(HTML("#downloadHelpCntList {background-color: black; color: white; border-radius: 10px; margin-top: 15px;}")))
  ))
),
tabItem(tabName = "exitUI", class = "active",
h1(textOutput(outputId = "exitHeading")),
extendShinyjs(text = jscode.close.RALSA.GUI, functions = c("closeWindow")),
actionButton(inputId = "closeGUI", label = "Exit", icon = icon("power-off"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")
),
tabItem(tabName = "downloadData", class = "active",
h1(textOutput(outputId = "h1DownloadData")),
htmlOutput(outputId = "downloadIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  div(uiOutput("selectDownloadStudyDropdown")),
  tags$head(tags$style(HTML("#selectDownloadStudyDropdown .dropdown-toggle {background-color: white; font-color: black; font-weight: bold;}"))),
  div(style = "width: 10px;"),
  div(uiOutput("selectDownloadCycleDropdown")),
  tags$head(tags$style(HTML("#selectDownloadCycleDropdown .dropdown-toggle {background-color: white; font-color: black; font-weight: bold;}"))),
  div(style = "width: 10px;"),
  div(uiOutput("selectDownloadPopulationDropdown")),
  tags$head(tags$style(HTML("#selectDownloadPopulationDropdown .dropdown-toggle {background-color: white; font-color: black; font-weight: bold;}"))),
  div(style = "width: 10px;")
),
div(style = "display: inline-block; padding-top: 5px; padding-bottom:15px;",
htmlOutput(outputId = "downloadAvailableCntsText")
),
fluidRow(
  column(width = 6,
    DTOutput(outputId = "downloadFilteredPartCnt"),
    tags$head(tags$style("#downloadFilteredPartCnt {white-space: nowrap;}"))
  ),
  column(width = 1, align = "center",
  div(style = "margin-top: 175px;",
  uiOutput(outputId = "downloadArrowRight")),
  uiOutput(outputId = "downloadDblArrowRight"),
  div(style = "margin-top: 45px;",
  uiOutput(outputId = "downloadArrowLeft")),
  uiOutput(outputId = "downloadDblArrowLeft")
),
column(width = 5,
  DTOutput(outputId = "downloadSelectedCnt"),
  tags$head(tags$style("#downloadSelectedCnt {white-space: nowrap;}"))
)
),
conditionalPanel(condition = "input.selectDownloadStudyDropdown != 'TEDS-M'",
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex; padding-top: 30px;",
  shinyDirButton(id = "downloadChooseOutDir", label = "Choose destination folder", title = "Navigate and select a folder", icon = icon("folder-open"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.downloadChooseOutDir",
  div(style = "width: 30px;"),
  div(verbatimTextOutput(outputId = "downloadOutPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#downloadOutPathDisplay {background-color: white;}"))
)
),
div(style = "margin-top: 30px;",
checkboxInput(inputId = "downloadAppend", label = "Append only new files in the folder", value = TRUE)),
div(style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
checkboxInput(inputId = "downloadConvert", label = "Convert the files after downloading", value = TRUE),
conditionalPanel(condition = "input.downloadConvert",
checkboxInput(inputId = "downloadMissToNA", label = "Convert user-defined missings to NA", value = FALSE))
),
div(style="display:inline-block", textOutput(outputId = "downloadSyntaxHead")),
div(style="display:inline-block", shinySaveButton(id = "saveDownloadSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
div(style="display:inline-block", uiOutput(outputId = "copyDownloadSyntax")),
verbatimTextOutput(outputId = "downloadSyntax"),
tags$head(tags$style(HTML("#downloadSyntax {background-color: white; white-space: pre-wrap;}"))),
div(style = "margin-top: 30px",
textOutput(outputId = "downloadExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execDownloadData")
),
verbatimTextOutput(outputId = "consoleDownloadData"),
tags$head(tags$style("#consoleDownloadData {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleDownloadData"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);')
)
),
tabItem(tabName = "convertData", class = "active",
h1(textOutput(outputId = "h1ConvertData")),
htmlOutput(outputId = "convertIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex; padding-bottom:30px",
  shinyDirButton(id = "convertChooseSrcDir", label = "Choose source folder", title = "Navigate and select a folder", icon = icon("folder-open"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.convertChooseSrcDir",
  div(verbatimTextOutput(outputId = "convertSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#convertSrcPathDisplay {background-color: white;}"))
),
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px;",
    div(style = "display: inline-block;",
    htmlOutput(outputId = "convertIEAStudyName"),
    htmlOutput(outputId = "convertIEAStudyCycle")))
  ),
  conditionalPanel(condition = "output.convertIEAStudyName && output.convertIEAStudyCycle",
  div(style = "display: inline-block; padding-top: 30px; padding-bottom:15px;",
  htmlOutput(outputId = "convertAvailableIEACntsText")
),
fluidRow(
  column(width = 6,
    DTOutput(outputId = "convertAvailCntIEAFiles"),
    tags$head(tags$style("#convertAvailCntIEAFiles {white-space: nowrap;}"))
  ),
  column(width = 1, align = "center",
  br(), br(), br(), br(), br(), br(), br(), br(), br(),
  uiOutput(outputId = "convertArrowIEARight"),
  uiOutput(outputId = "convertDblArrowIEARight"),
  br(), br(),
  uiOutput(outputId = "convertArrowIEALeft"),
  uiOutput(outputId = "convertDblArrowIEALeft")
),
column(width = 5,
  DTOutput(outputId = "convertSelectionIEA"),
  tags$head(tags$style("#convertSelectionIEA {white-space: nowrap;}"))
)
),
),
fluidRow(column(width = 12,
  htmlOutput(outputId = "convertPISA2015PlusStudyName"),
  htmlOutput(outputId = "convertPISA2015PlusStudyCycle")
)),
conditionalPanel(condition = "output.convertPISA2015PlusStudyName && output.convertPISA2015PlusStudyCycle",
div(style = "display: inline-block; padding-top: 30px; padding-bottom:15px;",
htmlOutput(outputId = "convertAvailablePISA2015PlusFilesText")
),
fluidRow(
  column(width = 2),
  column(width = 8,
    DTOutput(outputId = "convertPISA2015PlusFiles"),
    tags$head(tags$style("#convertPISA2015PlusFiles {white-space: nowrap;}"))
  ),
  column(width = 2)
),
),
fluidRow(column(width = 12,
  htmlOutput(outputId = "convertPISApre2015StudyName"),
  htmlOutput(outputId = "convertPISApre2015StudyCycle")
)),
conditionalPanel(condition = "output.convertPISApre2015StudyName && output.convertPISApre2015StudyCycle",
div(style = "display: inline-block; padding-top: 30px; padding-bottom:15px;",
htmlOutput(outputId = "convertAvailablePISApre2015FilesText")
),
fluidRow(
  column(width = 2),
  column(width = 8,
    DTOutput(outputId = "convertPISApre2015Files"),
    tags$head(tags$style("#convertPISApre2015Files {white-space: nowrap;}"))
  ),
  column(width = 2)
),
),
fluidRow(column(width = 12,
  htmlOutput(outputId = "convertPISADev2019PlusStudyName"),
  htmlOutput(outputId = "convertPISADev2019PlusStudyCycle")
)),
conditionalPanel(condition = "output.convertPISADev2019PlusStudyName && output.convertPISADev2019PlusStudyCycle",
div(style = "display: inline-block; padding-top: 30px; padding-bottom:15px;",
htmlOutput(outputId = "convertAvailablePISADev2019PlusFilesText")
),
fluidRow(
  column(width = 2),
  column(width = 8,
    DTOutput(outputId = "convertPISADev2019PlusFiles"),
    tags$head(tags$style("#convertPISADev2019PlusFiles {white-space: nowrap;}"))
  ),
  column(width = 2)
),
),
fluidRow(
  column(width = 12,
    fluidRow(
      column(width = 4,
        div(style = "margin-top:38px;",
        checkboxInput(inputId = "convertMissToNA", label = "Convert user-defined missings to NA", value = FALSE))
      )),
      fluidRow(column(width = 6,
        div(
          style = "display:-webkit-flex; display:-ms-flexbox; display:flex; padding-top: 30px; margin-bottom: 20px;",
          shinyDirButton(id = "convertChooseOutDir", label = "Choose destination folder", title = "Navigate and select a folder", icon = icon("folder-open"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
          div(style = "width: 30px;"),
          div(verbatimTextOutput(outputId = "convertOutPathDisplay"), style = "min-width: 750px;"),
          tags$head(tags$style("#convertOutPathDisplay {background-color: white;}"))
        )
      )),
      div(style="display:inline-block", textOutput(outputId = "convertSyntaxHead")),
      div(style="display:inline-block", shinySaveButton(id = "saveConvertSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
      div(style="display:inline-block", uiOutput(outputId = "copyConvertSyntax")),
      verbatimTextOutput(outputId = "convertSyntax"),
      tags$head(tags$style(HTML("#convertSyntax {background-color: white; white-space: pre-wrap;}"))),
      div(style = "margin-top: 30px",
      textOutput(outputId = "convertExecBtnHead")
    ),
    div(style = "margin-bottom: 30px",
    uiOutput(outputId = "execConvertData")
  ),
  verbatimTextOutput(outputId = "consoleConvertData"),
  tags$head(tags$style("#consoleConvertData {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
  tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleConvertData"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);')
  )),
),
tabItem(tabName = "mergeData", class = "active",
h1(textOutput(outputId = "h1MergeData")),
htmlOutput(outputId = "mergeIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyDirButton(id = "mergeChooseSrcDir", label = "Choose source folder", title = "Navigate and select a folder", icon = icon("folder-open"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.mergeChooseSrcDir",
  div(verbatimTextOutput(outputId = "mergeSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#mergeSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "mergeIEAStudyName"),
    htmlOutput(outputId = "mergeIEAStudyCycle")
  )
)),
div(style = "display: inline-block; padding-bottom: 15px;",
htmlOutput(outputId = "mergeAvailableIEACntsText")
),
conditionalPanel(condition = "output.mergeIEAStudyName && output.mergeIEAStudyCycle",
fluidRow(
  column(width = 6,
    DTOutput(outputId = "mergeAvailCntIEAFiles"),
    tags$head(tags$style("#mergeAvailCntIEAFiles {white-space: nowrap;}"))
  ),
  conditionalPanel(condition = "output.mergeAvailCntIEAFiles",
  column(width = 1, align = "center",
  br(), br(), br(), br(), br(), br(), br(), br(), br(),
  uiOutput(outputId = "mergeArrowIEARight"),
  uiOutput(outputId = "mergeDblArrowIEARight"),
  br(), br(),
  uiOutput(outputId = "mergeArrowIEALeft"),
  uiOutput(outputId = "mergeDblArrowIEALeft")
)
),
column(width = 5,
  DTOutput(outputId = "mergeSelectionIEA"),
  tags$head(tags$style("#mergeSelectionIEA {white-space: nowrap;}"))
),
),
fluidRow(
  div(style = "display: inline-block; margin-top: 35px;",
  column(width = 12, htmlOutput(outputId = "mergeAvailRespText"))
)
),
fluidRow(
  column(width = 12,
    div(style = "display: inline-block; margin-top: 5px;",
    uiOutput(outputId = "mergeAvailRespCheckboxes")
  )
),
column(width = 12,
  uiOutput(outputId = "warnNoSuchCombination"),
  tags$head(tags$style("#warnNoSuchCombination {color: red; font-weight: bold;}"))
)
),
fluidRow(
  column(width = 12,
    div(style = "display: inline-block; margin-top: 20px; margin-bottom: 5px;",
    htmlOutput(outputId = "mergeAvailVarsText")
  )
),
column(width = 6,
  DTOutput(outputId = "mergeAllAvailableVars"),
  tags$head(tags$style("#mergeAllAvailableVars {white-space: nowrap;}"))
),
column(width = 1, align = "center",
br(), br(), br(), br(), br(), br(), br(), br(), br(),
uiOutput(outputId = "mergeArrowSelVarsRight"),
uiOutput(outputId = "mergeDblArrowSelVarsRight"),
br(), br(),
uiOutput(outputId = "mergeArrowSelVarsLeft"),
uiOutput(outputId = "mergeDblArrowSelVarsLeft")
),
column(width = 5,
  DTOutput(outputId = "mergeVarsSelection"),
  tags$head(tags$style("#mergeVarsSelection {white-space: nowrap;}"))
)
)
),
conditionalPanel(condition = "output.mergeVarsSelection",
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-top: 60px; margin-bottom: 30px",
  div(style="display:inline-block",
  shinySaveButton(id = "mergeChooseOutFile", label = "Define merged file name", title = "Define file name", icon = icon("file-import"), filetype = list(RData = "RData"), style = "color: #ffffff; background-color: #000000; border-radius: 10px"))),
  div(style="display: inline-block; margin-top: 5px;", htmlOutput(outputId = "mergeSyntaxHead")),
  div(style="display:inline-block", shinySaveButton(id = "saveMergeSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
  div(style="display:inline-block", uiOutput(outputId = "copyMergeSyntax")),
  verbatimTextOutput(outputId = "mergeSyntax"),
  tags$head(tags$style(HTML("#mergeSyntax {background-color: white; white-space: pre-wrap;}")))
),
conditionalPanel(condition = "output.mergeSyntax",
div(style = "margin-top: 40px",
textOutput(outputId = "mergeExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execMergeData")
)
),
conditionalPanel(condition = "output.execMergeData != 0",
verbatimTextOutput(outputId = "consoleMergeData"),
tags$head(tags$style("#consoleMergeData {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleMergeData"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
),
),
),
tabItem(tabName = "varProperties", class = "active",
h1(textOutput(outputId = "h1VarProperties")),
htmlOutput(outputId = "varPropsIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "varPropsChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.varPropsChooseSrcFile",
  div(verbatimTextOutput(outputId = "varPropsSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#varPropsSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "varPropsStudyName"),
    htmlOutput(outputId = "varPropsStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "varPropsRespHead"),
  htmlOutput(outputId = "varPropsRespAvailable")
)
)
),
div(style = "display: inline-block; padding-bottom:15px;",
htmlOutput(outputId = "varPropsExplText")
),
fluidRow(
  column(width = 6,
    DTOutput(outputId = "varPropsAllAvailableVars"),
    tags$head(tags$style("#varPropsAllAvailableVars {white-space: nowrap;}"))
  ),
  column(width = 1, align = "center",
  br(), br(), br(), br(), br(), br(), br(), br(), br(),
  uiOutput(outputId = "varPropsArrowSelVarsRight"),
  uiOutput(outputId = "varPropsDblArrowSelVarsRight"),
  br(), br(),
  uiOutput(outputId = "varPropsArrowSelVarsLeft"),
  uiOutput(outputId = "varPropsDblArrowSelVarsLeft")
),
column(width = 5,
  DTOutput(outputId = "varPropsVarsSelection"),
  tags$head(tags$style("#varPropsVarsSelection {white-space: nowrap;}"))
)
),
conditionalPanel(condition = "output.varPropsVarsSelection",
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-top: 20px;",
      checkboxInput(inputId = "varPropsSaveOutput", label = "Save the variable dictionaries in a file", value = FALSE, width = "400px")))),
      div(
        style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-top: 44px; margin-bottom: 25px;",
        shinySaveButton(id = "varPropsChooseOutFile", label = "Define output file name", title = "Define file name", icon = icon("file-export"), filetype = list(txt = "txt"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
        div(style="display:inline-block; margin-left: 15px; margin-top: 7px;",
        checkboxInput(inputId = "varPropsOpenOutput", label = "Open the output when done", value = TRUE)
      )
    ),
    div(style="display:inline-block", htmlOutput(outputId = "varPropsSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "saveVarPropsSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copyVarPropsSyntax")),
    verbatimTextOutput(outputId = "varPropsSyntax"),
    tags$head(tags$style(HTML("#varPropsSyntax {background-color: white; white-space: pre-wrap;}"))),
    conditionalPanel(condition = "output.varPropsSyntax",
    div(style = "margin-top: 41px",
    textOutput(outputId = "varPropsExecBtnHead")
  ),
  div(style = "margin-bottom: 30px",
  uiOutput(outputId = "execVarProps")
)
),
conditionalPanel(condition = "varPropsSyntax",
verbatimTextOutput(outputId = "consoleVarProps"),
tags$head(tags$style("#consoleVarProps {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleVarProps"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
),
)
),
),
tabItem(tabName = "dataDiag", class = "active",
h1(textOutput(outputId = "h1DataDiag")),
htmlOutput(outputId = "dataDiagIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "dataDiagChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.dataDiagChooseSrcFile",
  div(verbatimTextOutput(outputId = "dataDiagSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#dataDiagSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "dataDiagStudyName"),
    htmlOutput(outputId = "dataDiagStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "dataDiagRespHead"),
  htmlOutput(outputId = "dataDiagRespAvailable")
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "dataDiagNoWeights"),
    tags$head(tags$style("#dataDiagNoWeights {color: red; font-weight: bold;}"))
  )
),
div(style = "display: inline-block; padding-bottom:15px;",
htmlOutput(outputId = "dataDiagVariablesExplText")
),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "dataDiagAllAvailableVars"),
  tags$head(tags$style("#dataDiagAllAvailableVars {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "dataDiagArrowSelSplitVarsRight"),
    uiOutput(outputId = "dataDiagArrowSelSplitVarsLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "dataDiagSplitVars"),
    tags$head(tags$style("#dataDiagSplitVars {white-space: nowrap;}")),
    uiOutput(outputId = "dataDiagInclMiss"),
    br()
  )
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "dataDiagArrowSelAnalVarsRight"),
  uiOutput(outputId = "dataDiagArrowSelAnalVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "dataDiagAnalVars"),
  tags$head(tags$style("#dataDiagAnalVars {white-space: nowrap;}"))
),
br()
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "dataDiagArrowSelWeightVarsRight"),
  uiOutput(outputId = "dataDiagArrowSelWeightVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "dataDiagWeightVar"),
  tags$head(tags$style("#dataDiagWeightVar {white-space: nowrap;}"))
)
),
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "dataDiagWgtsNotWgts"),
    tags$head(tags$style("#dataDiagWgtsNotWgts {color: red; font-weight: bold;}")),
    br()
  )
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-top: 20px; margin-bottom:25px",
      uiOutput(outputId = "dataDiagContFreq")
    ),
    div(style="display:inline-block; margin-bottom: 33px;",
    shinySaveButton(id = "dataDiagChooseOutFile", label = "Define the output file name", title = "Define file name", icon = icon("file-export"), filetype = list(xlsx = "xlsx"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")),
    div(style="display:inline-block; margin-left: 15px; margin-top: 8px;",
    div(style="display:inline-block", uiOutput(outputId = "dataDiagOpenOutput"))
  )
)
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block", htmlOutput(outputId = "dataDiagSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "saveDataDiagSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copyDataDiagSyntax")),
    verbatimTextOutput(outputId = "dataDiagSyntax"),
    tags$head(tags$style(HTML("#dataDiagSyntax {background-color: white; white-space: pre-wrap;}")))
  )
),
conditionalPanel(condition = "output.dataDiagSyntax",
div(style = "margin-top: 30px",
textOutput(outputId = "dataDiagExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execDataDiag")
)
),
conditionalPanel(condition = "dataDiagSyntax",
verbatimTextOutput(outputId = "consoleDataDiag"),
tags$head(tags$style("#consoleDataDiag {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleDataDiag"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "recodeVars", class = "active",
h1(textOutput(outputId = "h1RecodeVars")),
htmlOutput(outputId = "recodeIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "recodeChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.recodeChooseSrcFile",
  div(verbatimTextOutput(outputId = "recodeSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#recodeSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "recodeStudyName"),
    htmlOutput(outputId = "recodeStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "recodeRespHead"),
  htmlOutput(outputId = "recodeRespAvailable")
)
)
),
div(style = "display: inline-block; padding-bottom:15px;",
htmlOutput(outputId = "recodeVariablesExplText")
),
fluidRow(
  column(width = 6,
    DTOutput(outputId = "recodeAllAvailableVars"),
    tags$head(tags$style("#recodeAllAvailableVars {white-space: nowrap;}"))
  ),
  column(width = 1, align = "center",
  br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(),
  uiOutput(outputId = "recodeArrowSelVarsRight"),
  br(), br(),
  uiOutput(outputId = "recodeArrowSelVarsLeft"),
),
column(width = 5,
  DTOutput(outputId = "recodeVarsSelection"),
  tags$head(tags$style("#recodeVarsSelection {white-space: nowrap;}"))
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-top: 20px;",
      htmlOutput(outputId = "recodeSchemeExpl"),
      htmlOutput(outputId = "recodeSchemeWarn"),
      tags$head(tags$style("#recodeSchemeWarn {color: red; font-weight: bold;}"))
    )
  )
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "recodeWarnSchemeIncomplete"),
    tags$head(tags$style("#recodeWarnSchemeIncomplete {color: red; font-weight: bold;}")),
    br(),
    htmlOutput(outputId = "warningNotNumeric"),
    tags$head(tags$style("#warningNotNumeric {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "warningDiffNumValuesLabels"),
    tags$head(tags$style("#warningDiffNumValuesLabels {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "warningUniqueLabelsValues"),
    tags$head(tags$style("#warningUniqueLabelsValues {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "warningUniqueValuesLabels"),
    tags$head(tags$style("#warningUniqueValuesLabels {color: red; font-weight: bold;}"))
  )
),
fluidRow(
  column(width = 12, align = "center",
  DTOutput(outputId = "recodeSchemeFAC"),
  tags$head(tags$style("#recodeSchemeFAC {white-space: nowrap;}")),
  DTOutput(outputId = "recodeSchemeNUM"),
  tags$head(tags$style("#recodeSchemeNUM {white-space: nowrap;}")),
  DTOutput(outputId = "recodeSchemeCHAR"),
  tags$head(tags$style("#recodeSchemeCHAR {white-space: nowrap;}"))
)
),
fluidRow(
  column(width = 6,
    htmlOutput(outputId = "recodeMissings"),
    textAreaInput(inputId = "recodeNewMissings", label = "Enter the new user-defined missing values", width = "550px", height = "175px", placeholder = 'Enter the new missing values divided by semicolons (;). For example:\n\nOmitted or invalid; Logically not applicable; Not reached\n\nThe values must be available in the newly defined levels. If no user-defined missing values are specified, the existing ones (if any) will appear as valid values in the recoded variable(s).')
  ),
  column(width = 6,
    htmlOutput(outputId = "recodeMissingsWarn"),
    tags$head(tags$style("#recodeMissingsWarn {color: red; font-weight: bold;}"))
  )
),
fluidRow(
  column(width = 12,
    checkboxInput(inputId = "recodeInNewVars", label = "Recode into new variables", value = TRUE),
    htmlOutput(outputId = "recodeOverwriteWarn"),
    tags$head(tags$style("#recodeOverwriteWarn {font-weight: bold;}")),
    DTOutput(outputId = "recodeNewVarNames")
  )
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
      div(style="display:inline-block; margin-top: 66px; margin-bottom: 35px;",
      shinySaveButton(id = "recodeChooseOutFile", label = "Define recoded output file name", title = "Define file name", icon = icon("file-export"), filetype = list(RData = "RData"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")
    )
  ))),
  fluidRow(
    column(width = 12,
      div(style="display:inline-block", htmlOutput(outputId = "recodeSyntaxHead")),
      div(style="display:inline-block", shinySaveButton(id = "saveRecodeSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
      div(style="display:inline-block", uiOutput(outputId = "copyRecodeSyntax")),
      verbatimTextOutput(outputId = "recodeSyntax"),
      tags$head(tags$style(HTML("#recodeSyntax {background-color: white; white-space: pre-wrap;}")))
    )
  ),
  conditionalPanel(condition = "output.recodeSyntax",
  div(style = "margin-top: 30px",
  textOutput(outputId = "recodeExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execRecode")
)
),
conditionalPanel(condition = "recodeSyntax",
verbatimTextOutput(outputId = "consoleRecode"),
tags$head(tags$style("#consoleRecode {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleRecode"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "cutVars", class = "active",
h1(textOutput(outputId = "h1cutVars")),
htmlOutput(outputId = "cutVarsIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "cutVarsChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.cutVarsChooseSrcFile",
  div(verbatimTextOutput(outputId = "cutVarsSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#cutVarsSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "cutVarsStudyName"),
    htmlOutput(outputId = "cutVarsStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "cutVarsRespHead"),
  htmlOutput(outputId = "cutVarsRespAvailable")
)
)
),
div(style = "display: inline-block; padding-bottom:15px;",
htmlOutput(outputId = "cutVarsVariablesExplText")
),
fluidRow(
  column(width = 6,
    DTOutput(outputId = "cutVarsAllAvailableVars"),
    tags$head(tags$style("#cutVarsAllAvailableVars {white-space: nowrap;}"))
  ),
  column(width = 1, align = "center",
  br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(),
  uiOutput(outputId = "cutVarsArrowSelVarsRight"),
  br(), br(),
  uiOutput(outputId = "cutVarsArrowSelVarsLeft"),
),
column(width = 5,
  DTOutput(outputId = "cutVarsSelection"),
  tags$head(tags$style("#cutVarsSelection {white-space: nowrap;}"))
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-top: 20px;",
      htmlOutput(outputId = "cutVarsNonNumericWarn"),
      tags$head(tags$style("#cutVarsNonNumericWarn {color: red; font-weight: bold;}"))
    ),
    div(
      htmlOutput(outputId = "cutVarsPVsWarn"),
      tags$head(tags$style("#cutVarsPVsWarn {color: red; font-weight: bold;}"))
    )
  )
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "cutVarsInstructionVarNames"),
    tags$head(tags$style("#cutVarsInstructionVarNames {text-align: left; font-weight: bold; padding-top: 25px}")),
    htmlOutput(outputId = "cutVarsWarnIncompleteVarLabs"),
    tags$head(tags$style("#cutVarsWarnIncompleteVarLabs {color: red; font-weight: bold;}")),
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; padding-top:15px; padding-bottom:15px",
      DTOutput(outputId = "cutVarsNewVarNames")
    )
  )
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    uiOutput(outputId = "cutVarsCutPoints"),
  ),
  div(style = "width: 15px;"),
  div(style = "margin-top: 55px",
  uiOutput(outputId = "cutVarsCutPointsReset")
),
div(style = "width: 15px;"),
div(style = "padding-top: 15px;",
htmlOutput(outputId = "cutVarsCutPointsNotNum"),
tags$head(tags$style("#cutVarsCutPointsNotNum {color: red; font-weight: bold;}"))
)
)
),
fluidRow(
  column(width = 12, align = "center",
  htmlOutput(outputId = "cutVarsInstructionLabels"),
  tags$head(tags$style("#cutVarsInstructionLabels {text-align: left; font-weight: bold;}")),
  htmlOutput(outputId = "cutVarsWarnIncompleteLabels"),
  tags$head(tags$style("#cutVarsWarnIncompleteLabels {text-align: left; color: red; font-weight: bold;}")),
  DTOutput(outputId = "cutVarsNewValLables"),
  tags$head(tags$style("#cutVarsNewValLables {white-space: nowrap;}"))
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
      div(style="display:inline-block; margin-top: 35px; margin-bottom: 35px;",
      shinySaveButton(id = "cutVarsChooseOutFile", label = "Define the new output file name", title = "Define file name", icon = icon("file-export"), filetype = list(RData = "RData"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")
    )
  ))),
  fluidRow(
    column(width = 12,
      div(style="display:inline-block", htmlOutput(outputId = "cutVarsSyntaxHead")),
      div(style="display:inline-block", shinySaveButton(id = "saveCutVarsSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
      div(style="display:inline-block", uiOutput(outputId = "copyCutVarsSyntax")),
      verbatimTextOutput(outputId = "cutVarsSyntax"),
      tags$head(tags$style(HTML("#cutVarsSyntax {background-color: white; white-space: pre-wrap;}")))
    )
  ),
  conditionalPanel(condition = "output.cutVarsSyntax",
  div(style = "margin-top: 30px",
  textOutput(outputId = "cutVarsExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execCutVars")
)
),
conditionalPanel(condition = "output.cutVarsSyntax",
verbatimTextOutput(outputId = "consoleCutVars"),
tags$head(tags$style("#consoleCutVars {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleCutVars"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "aggrVars", class = "active",
h1(textOutput(outputId = "h1AggrVars")),
htmlOutput(outputId = "aggrVarsIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "aggrVarsChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.aggrVarsChooseSrcFile",
  div(verbatimTextOutput(outputId = "aggrVarsSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#aggrVarsSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "aggrVarsStudyName"),
    htmlOutput(outputId = "aggrVarsStudyCycle")
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "aggrVarsRespHead"),
  htmlOutput(outputId = "aggrVarsRespAvailable"),
)
)
),
div(style = "display: inline-block; padding-bottom:10px;",
htmlOutput(outputId = "aggrVarsVariablesExplText")
),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "aggrVarsAllAvailableVars"),
  tags$head(tags$style("#aggrVarsAllAvailableVars {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "aggrVarsArrowSelGroupVarsRight"),
    uiOutput(outputId = "aggrVarsArrowSelGroupVarsLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "aggrVarsGroupVars"),
    tags$head(tags$style("#aggrVarsGroupVars {white-space: nowrap;}")),
  )
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "aggrVarsArrowSelSrcVarsRight"),
  uiOutput(outputId = "aggrVarsArrowSelSrcVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "aggrVarsSrcVars"),
  tags$head(tags$style("#aggrVarsSrcVars {white-space: nowrap;}"))
)
)
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-top: 20px;",
      htmlOutput(outputId = "aggrVarsNonNumericWarn"),
      tags$head(tags$style("#aggrVarsNonNumericWarn {color: red; font-weight: bold;}"))
    ),
    div(
      htmlOutput(outputId = "aggrVarsDesignWarn"),
      tags$head(tags$style("#aggrVarsDesignWarn {color: red; font-weight: bold;}"))
    )
  )
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "aggrVarsInstructionVarNames"),
    tags$head(tags$style("#aggrVarsInstructionVarNames {text-align: left; font-weight: bold; padding-top: 25px}")),
    htmlOutput(outputId = "aggrVarsWarnIncompleteVarLabs"),
    tags$head(tags$style("#aggrVarsWarnIncompleteVarLabs {color: red; font-weight: bold;}")),
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; padding-top:15px; padding-bottom:15px",
      DTOutput(outputId = "aggrVarsNewVarNames")
    )
  )
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom: 15px",
    div(style = "display: inline-block; margin-top: 30px;",
    uiOutput(outputId = "aggrVarsAggregationFunction")
  ),
  div(style = "width: 15px;"),
  div(style = "display: inline-block; padding-top:15px;",
  htmlOutput(outputId = "aggrVarsAggregationFunctionExpl")
)
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
      div(style="display:inline-block; margin-bottom: 35px;",
      shinySaveButton(id = "aggrVarsChooseOutFile", label = "Define the new output file name", title = "Define file name", icon = icon("file-export"), filetype = list(RData = "RData"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")
    )
  ))),
  fluidRow(
    column(width = 12,
      div(style="display:inline-block", htmlOutput(outputId = "aggrVarsSyntaxHead")),
      div(style="display:inline-block", shinySaveButton(id = "saveAggrVarsSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
      div(style="display:inline-block", uiOutput(outputId = "copyAggrVarsSyntax")),
      verbatimTextOutput(outputId = "aggrVarsSyntax"),
      tags$head(tags$style(HTML("#aggrVarsSyntax {background-color: white; white-space: pre-wrap;}")))
    )
  ),
  conditionalPanel(condition = "output.aggrVarsSyntax",
  div(style = "margin-top: 30px",
  textOutput(outputId = "aggrVarsExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execAggrVars")
)
),
conditionalPanel(condition = "aggrVarsSyntax",
verbatimTextOutput(outputId = "consoleAggrVars"),
tags$head(tags$style("#consoleAggrVars {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleAggrVars"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "selectPISACountries", class = "active",
h1(textOutput(outputId = "h1selectPISACountries")),
htmlOutput(outputId = "selectPISACountriesIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "selectPISACountriesChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.selectPISACountriesChooseSrcFile",
  div(verbatimTextOutput(outputId = "selectPISACountriesSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#selectPISACountriesSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "selectPISACountriesStudyName"),
    htmlOutput(outputId = "selectPISACountriesStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "selectPISACountriesRespHead"),
  htmlOutput(outputId = "selectPISACountriesRespAvailable")
)
)
),
div(style = "display: inline-block; padding-bottom:15px;",
htmlOutput(outputId = "selectPISACountriesExplText")
),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "selectPISACountriesAvailableCountries"),
  tags$head(tags$style("#selectPISACountriesAvailableCountries {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "selectPISACountriesArrowSelCntRight"),
    uiOutput(outputId = "selectPISACountriesArrowSelCntLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "selectPISASelectedCountries"),
    tags$head(tags$style("#selectPISASelectedCountries {white-space: nowrap;}"))
  )
)
)
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block; margin-top: 60px; margin-bottom: 33px;",
    shinySaveButton(id = "selectPISACountriesChooseOutFile", label = "Define the output file name", title = "Define file name", icon = icon("file-export"), filetype = list(RData = "RData"), style = "color: #ffffff; background-color: #000000; border-radius: 10px"))
  )
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block", htmlOutput(outputId = "selectPISACountriesSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "saveSelectPISACountriesSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copySelectPISACountriesSyntax")),
    verbatimTextOutput(outputId = "selectPISACountriesSyntax"),
    tags$head(tags$style(HTML("#selectPISACountriesSyntax {background-color: white; white-space: pre-wrap;}")))
  )
),
conditionalPanel(condition = "output.selectPISACountriesSyntax",
div(style = "margin-top: 30px",
textOutput(outputId = "selectPISACountriesExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execSelectPISACountries")
)
),
conditionalPanel(condition = "selectPISACountriesSyntax",
verbatimTextOutput(outputId = "consoleSelectPISACountries"),
tags$head(tags$style("#consoleSelectPISACountries {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleSelectPISACountries"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "pctsMeans", class = "active",
h1(textOutput(outputId = "h1PctsMeans")),
htmlOutput(outputId = "pctsMeansIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "pctsMeansChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.pctsMeansChooseSrcFile",
  div(verbatimTextOutput(outputId = "pctsMeansSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#pctsMeansSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "pctsMeansStudyName"),
    htmlOutput(outputId = "pctsMeansStudyCycle")
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "pctsMeansRespHead"),
  htmlOutput(outputId = "pctsMeansRespAvailable"),
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "pctsMeansNoWeights"),
    tags$head(tags$style("#pctsMeansNoWeights {color: red; font-weight: bold;}"))
  )
),
div(style = "display: inline-block; padding-bottom:10px;",
htmlOutput(outputId = "pctsMeansVariablesExplText")
),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "pctsMeansAllAvailableVars"),
  tags$head(tags$style("#pctsMeansAllAvailableVars {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "pctsMeansArrowSelSplitVarsRight"),
    uiOutput(outputId = "pctsMeansArrowSelSplitVarsLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "pctsMeansSplitVars"),
    tags$head(tags$style("#pctsMeansSplitVars {white-space: nowrap;}")),
    uiOutput(outputId = "pctsMeansInclMiss"),
    br()
  )
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "pctsMeansArrowSelBckgVarsRight"),
  uiOutput(outputId = "pctsMeansArrowSelBckgVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "pctsMeansBckgVars"),
  tags$head(tags$style("#pctsMeansBckgVars {white-space: nowrap;}"))
),
br()
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "pctsMeansArrowSelPVsRight"),
  uiOutput(outputId = "pctsMeansArrowSelPVsLeft"),
  uiOutput(outputId = "pctsMeansArrowSelPVsRightDisbld"),
  uiOutput(outputId = "pctsMeansArrowSelPVsLeftDisbld")
),
column(width = 10,
  DTOutput(outputId = "pctsMeansPVVars"),
  tags$head(tags$style("#pctsMeansPVVars {white-space: nowrap;}")),
  DTOutput(outputId = "pctsMeansPVVarsDisbld"),
  br()
)
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "pctsMeansArrowSelWeightVarsRight"),
  uiOutput(outputId = "pctsMeansArrowSelWeightVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "pctsMeansWeightVar"),
  tags$head(tags$style("#pctsMeansWeightVar {white-space: nowrap;}"))
)
),
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "pctsMeansPVsNotPVs"),
    tags$head(tags$style("#pctsMeansPVsNotPVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "pctsMeansSplitArePVs"),
    tags$head(tags$style("#pctsMeansSplitArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "pctsMeansBckgArePVs"),
    tags$head(tags$style("#pctsMeansBckgArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "pctsMeansWgtsNotWgts"),
    tags$head(tags$style("#pctsMeansWgtsNotWgts {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "pctsMeansWarnMoreVars")
  )
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom: 30px",
    div(style = "display: inline-block; margin-top: 30px;",
    uiOutput(outputId = "centralTendencyType")
  ),
  div(style = "width: 15px;"),
  div(style = "display: inline-block; padding-top:15px;",
  htmlOutput(outputId = "centralTendencyTypeExpl")
)
)
),
fluidRow(
  column(width = 12, offset = 0, style = "margin-top: -20px;",
  uiOutput(outputId = "pctsMeansShortcut"),
  uiOutput(outputId = "pctsMeansGraphs"),
  fluidRow(
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
      div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-left: 7px",
      uiOutput(outputId = "pctsMeansGraphsPctXlabelChk")
    ),
    div(style = "width: 15px;"),
    div(uiOutput(outputId = "pctsMeansGraphsPctXlabelTXT"), style = "min-width: 500px;")
  )
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-left: 7px",
    uiOutput(outputId = "pctsMeansGraphsPctYlabelChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "pctsMeansGraphsPctYlabelTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-left: 7px",
    uiOutput(outputId = "pctsMeansGraphsMeanXlabelsChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "pctsMeansGraphsMeanXlabelsTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-bottom: 30px; padding-left: 7px",
    uiOutput(outputId = "pctsMeansGraphsMeanYlabelsChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "pctsMeansGraphsMeanYlabelsTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "warnPctsMeansCustomXlab"),
    tags$head(tags$style("#warnPctsMeansCustomXlab {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "warnPctsMeansCustomYlab"),
    tags$head(tags$style("#warnPctsMeansCustomYlab {color: red; font-weight: bold;}"))
  )
)
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-bottom: 25px",
      div(style="display:inline-block",
      shinySaveButton(id = "pctsMeansChooseOutFile", label = "Define the output file name", title = "Define file name", icon = icon("file-export"), filetype = list(xlsx = "xlsx"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")
    ),
    div(style="display:inline-block; margin-left: 15px; margin-top: 8px;",
    uiOutput(outputId = "pctsMeansOpenOutput"))
  )
)
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block", htmlOutput(outputId = "pctsMeansSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "savePctsMeansSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copyPctsMeansSyntax")),
    verbatimTextOutput(outputId = "pctsMeansSyntax"),
    tags$head(tags$style(HTML("#pctsMeansSyntax {background-color: white; white-space: pre-wrap;}")))
  )
),
conditionalPanel(condition = "output.pctsMeansSyntax",
div(style = "margin-top: 30px",
textOutput(outputId = "pctsMeansExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execPctsMeans")
)
),
conditionalPanel(condition = "pctsMeansSyntax",
verbatimTextOutput(outputId = "consolePctsMeans"),
tags$head(tags$style("#consolePctsMeans {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consolePctsMeans"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "prctls", class = "active",
h1(textOutput(outputId = "h1Prctls")),
htmlOutput(outputId = "prctlsIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "prctlsChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.prctlsChooseSrcFile",
  div(verbatimTextOutput(outputId = "prctlsSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#prctlsSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top: 30px;",
    htmlOutput(outputId = "prctlsStudyName"),
    htmlOutput(outputId = "prctlsStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top: 17px",
  htmlOutput(outputId = "prctlsRespHead"),
  htmlOutput(outputId = "prctlsRespAvailable")
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "prctlsNoWeights"),
    tags$head(tags$style("#prctlsNoWeights {color: red; font-weight: bold;}"))
  )
),
div(style = "display: inline-block; padding-bottom:10px;",
htmlOutput(outputId = "prctlsVariablesExplText")
),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "prctlsAllAvailableVars"),
  tags$head(tags$style("#prctlsAllAvailableVars {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "prctlsArrowSelSplitVarsRight"),
    uiOutput(outputId = "prctlsArrowSelSplitVarsLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "prctlsSplitVars"),
    tags$head(tags$style("#prctlsSplitVars {white-space: nowrap;}")),
    uiOutput(outputId = "prctlsInclMiss"),
    br()
  )
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "prctlsArrowSelBckgVarsRight"),
  uiOutput(outputId = "prctlsArrowSelBckgVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "prctlsBckgVars"),
  tags$head(tags$style("#prctlsBckgVars {white-space: nowrap;}"))
),
br()
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "prctlsArrowSelPVsRight"),
  uiOutput(outputId = "prctlsArrowSelPVsLeft"),
  uiOutput(outputId = "prctlsArrowSelPVsRightDisbld"),
  uiOutput(outputId = "prctlsArrowSelPVsLeftDisbld")
),
column(width = 10,
  DTOutput(outputId = "prctlsPVVars"),
  tags$head(tags$style("#prctlsPVVars {white-space: nowrap;}")),
  DTOutput(outputId = "prctlsPVVarsDisbld"),
  br()
)
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "prctlsArrowSelWeightVarsRight"),
  uiOutput(outputId = "prctlsArrowSelWeightVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "prctlsWeightVar"),
  tags$head(tags$style("#prctlsWeightVar {white-space: nowrap;}"))
)
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "prctlsPVsNotPVs"),
    tags$head(tags$style("#prctlsPVsNotPVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "prctlsSplitArePVs"),
    tags$head(tags$style("#prctlsSplitArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "prctlsBckgArePVs"),
    tags$head(tags$style("#prctlsBckgArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "prctlsBckgNotCnt"),
    tags$head(tags$style("#prctlsBckgNotCnt {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "prctlsWgtsNotWgts"),
    tags$head(tags$style("#prctlsWgtsNotWgts {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "prctlsWarnMoreVars")
  )
),
fluidRow(
  div(style = "margin-top: 20px; margin-bottom: 30px; margin-left: 15px;",
  htmlOutput(outputId = "prctlsValuesExpl")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block;",
    uiOutput(outputId = "prctlsValues")
  ),
  div(style = "width: 15px;"),
  div(style = "margin-top: 25px",
  uiOutput(outputId = "prctlsValuesReset")
),
div(style = "width: 15px;"),
div(style = "padding-top: 15px;",
htmlOutput(outputId = "prctlsNotNum"),
tags$head(tags$style("#prctlsNotNum {color: red; font-weight: bold;}")),
htmlOutput(outputId = "prctlsNotInRange"),
tags$head(tags$style("#prctlsNotInRange {color: red; font-weight: bold;}"))
)
)
),
fluidRow(
  column(width = 12,
    uiOutput(outputId = "prctlsShortcut")
  )
),
fluidRow(
  column(width = 12,
    div(style = "margin-top: 25px",
    uiOutput(outputId = "prctlsGraphs")
  )
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-left: 7px",
    uiOutput(outputId = "prctlsGraphsPctXlabelChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "prctlsGraphsPctXlabelTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-left: 7px",
    uiOutput(outputId = "prctlsGraphsPctYlabelChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "prctlsGraphsPctYlabelTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-left: 7px",
    uiOutput(outputId = "prctlsGraphsPrctlXlabelsChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "prctlsGraphsPrctlXlabelsTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-bottom: 30px; padding-top:7px; padding-left: 7px",
    uiOutput(outputId = "prctlsGraphsPrctlYlabelsChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "prctlsGraphsPrctlYlabelsTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "warnPrctlsCustomXlab"),
    tags$head(tags$style("#warnPrctlsCustomXlab {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "warnPrctlsCustomYlab"),
    tags$head(tags$style("#warnPrctlsCustomYlab {color: red; font-weight: bold;}"))
  )
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-bottom: 25px",
      div(
        style="display:inline-block",
        shinySaveButton(id = "prctlsChooseOutFile", label = "Define the output file name", title = "Define file name", icon = icon("file-export"), filetype = list(xlsx = "xlsx"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")
      ),
      div(style="display:inline-block; margin-left: 15px; margin-top: 8px;", uiOutput(outputId = "prctlsOpenOutput"))
    )
  )
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block", htmlOutput(outputId = "prctlsSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "savePrctlstSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copyPrctlsSyntax")),
    verbatimTextOutput(outputId = "prctlsSyntax"),
    tags$head(tags$style(HTML("#prctlsSyntax {background-color: white; white-space: pre-wrap;}")))
  )
),
conditionalPanel(condition = "output.prctlsSyntax",
div(style = "margin-top: 30px;",
textOutput(outputId = "prctlsExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execPrctls")
)
),
conditionalPanel(condition = "prctlsSyntax",
verbatimTextOutput(outputId = "consolePrctls"),
tags$head(tags$style("#consolePrctls {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px;}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consolePrctls"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "bnchMarks", class = "active",
h1(textOutput(outputId = "h1Bench")),
htmlOutput(outputId = "benchIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "benchChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.benchChooseSrcFile",
  div(verbatimTextOutput(outputId = "benchSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#benchSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "benchStudyName"),
    htmlOutput(outputId = "benchStudyCycle")
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "benchRespHead"),
  htmlOutput(outputId = "benchRespAvailable")
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "benchNoWeights"),
    tags$head(tags$style("#benchNoWeights {color: red; font-weight: bold;}"))
  )
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "noPVsInFile"),
    tags$head(tags$style("#noPVsInFile {color: red; font-weight: bold;}"))
  )
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:15px",
    div(style = "display: inline-block;",
    uiOutput(outputId = "benchType"),
  ),
  div(style = "width: 15px;"),
  div(style = "display: inline-block; padding-top:5px;",
  htmlOutput(outputId = "benchTypeExpl")
)
)
),
div(style = "display: inline-block; padding-bottom:15px;",
htmlOutput(outputId = "benchVariablesExplText")
),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "benchAllAvailableVars"),
  tags$head(tags$style("#benchAllAvailableVars {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "benchArrowSelSplitVarsRight"),
    uiOutput(outputId = "benchArrowSelSplitVarsLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "benchSplitVars"),
    tags$head(tags$style("#benchSplitVars {white-space: nowrap;}")),
    uiOutput(outputId = "benchInclMiss")
  ),
  br()
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "benchArrowSelBckgVarsRight"),
  uiOutput(outputId = "benchArrowSelBckgVarsLeft"),
  uiOutput(outputId = "benchArrowSelBckgVarsRightDisbld"),
  uiOutput(outputId = "benchArrowSelBckgVarsLeftDisbld"),
),
column(width = 10,
  DTOutput(outputId = "benchBckgVars"),
  tags$head(tags$style("#benchBckgVars {white-space: nowrap;}")),
  DTOutput(outputId = "benchBckgVarsDisbld"),
  br()
)
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "benchArrowSelPVsRight"),
  uiOutput(outputId = "benchArrowSelPVsLeft"),
),
column(width = 10,
  DTOutput(outputId = "benchPVVars"),
  tags$head(tags$style("#benchPVVars {white-space: nowrap;}")),
  br()
)
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "benchArrowSelWeightVarsRight"),
  uiOutput(outputId = "benchArrowSelWeightVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "benchWeightVar"),
  tags$head(tags$style("#benchWeightVar {white-space: nowrap;}"))
)
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "benchPVsNotPVs"),
    tags$head(tags$style("#benchPVsNotPVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "benchSplitArePVs"),
    tags$head(tags$style("#benchSplitArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "benchBckgArePVs"),
    tags$head(tags$style("#benchBckgArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "benchWgtsNotWgts"),
    tags$head(tags$style("#benchWgtsNotWgts {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "benchWarnMoreVars")
  )
),
fluidRow(
  div(style = "margin-top: 20px; margin-bottom: 30px; margin-left: 15px;",
  htmlOutput(outputId = "benchValuesExpl")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block;",
    uiOutput(outputId = "benchValues"),
  ),
  div(style = "width: 15px;"),
  div(style = "margin-top: 25px",
  uiOutput(outputId = "benchValuesReset")
),
div(style = "width: 15px;"),
div(style = "padding-top: 15px;",
htmlOutput(outputId = "benchNotNum"),
tags$head(tags$style("#benchNotNum {color: red; font-weight: bold;}")),
htmlOutput(outputId = "benchNotInRange"),
tags$head(tags$style("#benchNotInRange {color: red; font-weight: bold;}"))
)
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:25px",
    div(style = "display: inline-block;",
    uiOutput(outputId = "benchComputeWithin")
  ),
  div(style = "width: 15px;"),
  div(style = "display: inline-block;",
  htmlOutput(outputId = "benchComputeWithinExpl")
)
)
),
fluidRow(
  column(width = 12,
    uiOutput(outputId = "benchShortcut"),
  )
),
fluidRow(
  column(width = 12,
    div(style = "margin-top: 25px",
    uiOutput(outputId = "benchGraphs")
  )
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-left: 7px",
    uiOutput(outputId = "benchGraphsPctXlabelChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "benchGraphsPctXlabelTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-left: 7px",
    uiOutput(outputId = "benchGraphsPctYlabelChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "benchGraphsPctYlabelTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-left: 7px",
    uiOutput(outputId = "benchGraphsMeanXlabelsChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "benchGraphsMeanXlabelsTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-bottom: 30px; padding-left: 7px",
    uiOutput(outputId = "benchGraphsMeanYlabelsChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "benchGraphsMeanYlabelsTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-bottom: 25px",
      div(style="display:inline-block",
      shinySaveButton(id = "benchChooseOutFile", label = "Define the output file name", title = "Define file name", icon = icon("file-export"), filetype = list(xlsx = "xlsx"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")
    ),
    div(style="display:inline-block; margin-left: 15px; margin-top: 8px;", uiOutput(outputId = "benchOpenOutput"))
  )
)
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block", htmlOutput(outputId = "benchSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "saveBenchSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copyBenchSyntax")),
    verbatimTextOutput(outputId = "benchSyntax"),
    tags$head(tags$style(HTML("#benchSyntax {background-color: white; white-space: pre-wrap;}")))
  )
),
conditionalPanel(condition = "output.benchSyntax",
div(style = "margin-top: 30px",
textOutput(outputId = "benchExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execBench")
)
),
conditionalPanel(condition = "benchSyntax",
verbatimTextOutput(outputId = "consoleBench"),
tags$head(tags$style("#consoleBench {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleBench"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "crossTabs", class = "active",
h1(textOutput(outputId = "h1CrossTabs")),
htmlOutput(outputId = "crossTabsIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "crossTabsChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.crossTabsChooseSrcFile",
  div(verbatimTextOutput(outputId = "crossTabsSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#crossTabsSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "crossTabsStudyName"),
    htmlOutput(outputId = "crossTabsStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "crossTabsRespHead"),
  htmlOutput(outputId = "crossTabsRespAvailable")
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "crossTabsNoWeights"),
    tags$head(tags$style("#crossTabsNoWeights {color: red; font-weight: bold;}"))
  )
),
htmlOutput(outputId = "crossTabsVariablesExplText"),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "crossTabsAllAvailableVars"),
  tags$head(tags$style("#crossTabsAllAvailableVar {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "crossTabsArrowSelSplitVarsRight"),
    uiOutput(outputId = "crossTabsArrowSelSplitVarsLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "crossTabsSplitVars"),
    tags$head(tags$style("#crossTabsSplitVars {white-space: nowrap;}")),
    uiOutput(outputId = "crossTabsInclMiss"),
    br()
  )
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "crossTabsArrowSelBckgRowVarRight"),
  uiOutput(outputId = "crossTabsArrowSelBckgRowVarLeft"),
),
column(width = 10,
  DTOutput(outputId = "crossTabsBckgRowVar"),
  tags$head(tags$style("#crossTabsBckgRowVar {white-space: nowrap;}"))
),
br()
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "crossTabsArrowSelBckgColVarRight"),
  uiOutput(outputId = "crossTabsArrowSelBckgColVarLeft"),
),
column(width = 10,
  DTOutput(outputId = "crossTabsBckgColVar"),
  tags$head(tags$style("#crossTabsBckgColVar {white-space: nowrap;}"))
),
br()
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "crossTabsArrowSelWeightVarRight"),
  uiOutput(outputId = "crossTabsArrowSelWeightVarLeft"),
),
column(width = 10,
  DTOutput(outputId = "crossTabsWeightVar"),
  tags$head(tags$style("#crossTabsWeightVar {white-space: nowrap;}"))
)
),
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "crossTabsSplitArePVs"),
    tags$head(tags$style("#crossTabsSplitArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "crossTabsBckgRowIsPVs"),
    tags$head(tags$style("#crossTabsBckgRowIsPVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "crossTabsBckgColIsPVs"),
    tags$head(tags$style("#crossTabsBckgColIsPVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "crossTabsWgtsNotWgts"),
    tags$head(tags$style("#crossTabsWgtsNotWgts {color: red; font-weight: bold;}"))
  )
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-top: 20px; padding-bottom:30px",
      div(style = "display: inline-block;",
      uiOutput(outputId = "crossTabsExpCnts"),
      uiOutput(outputId = "crossTabsRowPcts"),
      uiOutput(outputId = "crossTabsColPcts"),
      uiOutput(outputId = "crossTabsTotPcts")
    )
  )
)
),
fluidRow(
  column(width = 12,
    uiOutput(outputId = "crossTabsShortcut")
  )
),
fluidRow(
  column(width = 12,
    div(style = "margin-top: 25px",
    uiOutput(outputId = "crossTabsGraphs")
  )
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-left: 7px",
    uiOutput(outputId = "crossTabsGraphsPlotXlabelChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "crossTabsGraphsPlotXlabelTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
    div(style = "display: inline-block; margin-left: 20px; padding-top:7px; padding-bottom: 40px; padding-left: 7px",
    uiOutput(outputId = "crossTabsGraphsPlotYlabelChk")
  ),
  div(style = "width: 15px;"),
  div(uiOutput(outputId = "crossTabsGraphsPlotYlabelTXT"), style = "min-width: 500px;")
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-bottom: 25px",
      div(style="display:inline-block",
      shinySaveButton(id = "crossTabsChooseOutFile", label = "Define the output file name", title = "Define file name", icon = icon("file-export"), filetype = list(xlsx = "xlsx"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")),
      div(style="display:inline-block; margin-left: 15px; margin-top: 8px;",
      uiOutput(outputId = "crossTabsOpenOutput"))
    )
  )
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block", htmlOutput(outputId = "crossTabsSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "saveCrosstabsSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copyCrosstabsSyntax")),
    verbatimTextOutput(outputId = "crossTabsSyntax"),
    tags$head(tags$style(HTML("#crossTabsSyntax {background-color: white; white-space: pre-wrap;}")))
  )
),
conditionalPanel(condition = "output.crossTabsSyntax",
div(style = "margin-top: 30px",
textOutput(outputId = "crossTabsExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execCrossTabs")
)
),
conditionalPanel(condition = "crossTabsSyntax",
verbatimTextOutput(outputId = "consoleCrossTabs"),
tags$head(tags$style("#consoleCrossTabs {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleCrossTabs"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "corr", class = "active",
h1(textOutput(outputId = "h1Corr")),
htmlOutput(outputId = "corrIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "corrChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.corrChooseSrcFile",
  div(verbatimTextOutput(outputId = "corrSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#corrSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "corrStudyName"),
    htmlOutput(outputId = "corrStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "corrRespHead"),
  htmlOutput(outputId = "corrRespAvailable")
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "corrNoWeights"),
    tags$head(tags$style("#corrNoWeights {color: red; font-weight: bold;}"))
  )
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block;",
    uiOutput(outputId = "corrType")
  ),
  div(style = "width: 15px;"),
  div(style = "display: inline-block; margin-top:-15px;",
  htmlOutput(outputId = "corrTypeExpl")
)
)
),
div(style = "display: inline-block; padding-bottom:10px;",
htmlOutput(outputId = "corrVariablesExplText")
),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "corrAllAvailableVars"),
  tags$head(tags$style("#corrAllAvailableVars {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "corrArrowSelSplitVarsRight"),
    uiOutput(outputId = "corrArrowSelSplitVarsLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "corrSplitVars"),
    tags$head(tags$style("#corrSplitVars {white-space: nowrap;}")),
    uiOutput(outputId = "corrInclMiss"),
    br()
  )
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "corrArrowSelBckgVarsRight"),
  uiOutput(outputId = "corrArrowSelBckgVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "corrBckgVars"),
  tags$head(tags$style("#corrBckgVars {white-space: nowrap;}"))
),
br()
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "corrArrowSelPVsRight"),
  uiOutput(outputId = "corrArrowSelPVsLeft"),
  uiOutput(outputId = "corrArrowSelPVsRightDisbld"),
  uiOutput(outputId = "corrArrowSelPVsLeftDisbld")
),
column(width = 10,
  DTOutput(outputId = "corrPVVars"),
  tags$head(tags$style("#corrPVVars {white-space: nowrap;}")),
  DTOutput(outputId = "corrPVVarsDisbld"),
  br()
)
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "corrArrowSelWeightVarsRight"),
  uiOutput(outputId = "corrArrowSelWeightVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "corrWeightVar"),
  tags$head(tags$style("#corrWeightVar {white-space: nowrap;}"))
)
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "corrPVsNotPVs"),
    tags$head(tags$style("#corrPVsNotPVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "corrSplitArePVs"),
    tags$head(tags$style("#corrSplitArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "corrBckgArePVs"),
    tags$head(tags$style("#corrBckgArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "corrWgtsNotWgts"),
    tags$head(tags$style("#corrWgtsNotWgts {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "corrWarnMoreVars")
  )
),
fluidRow(
  column(width = 3,
    div(style = "margin-top: 40px",
    uiOutput(outputId = "corrEffectiveDF"),
    tags$head(tags$style("#corrEffectiveDF {white-space: nowrap;}"))
  )
),
column(width = 9,
  div(style = "margin-top: 40px",
  uiOutput(outputId = "corrComputations")
),
uiOutput(outputId = "corrShortcut")
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-top: 30px; margin-bottom: 25px",
      div(style="display:inline-block",
      div(style="display:inline-block",
      shinySaveButton(id = "corrChooseOutFile", label = "Define the output file name", title = "Define file name", icon = icon("file-export"), filetype = list(xlsx = "xlsx"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")),
      div(style="display:inline-block; margin-left: 15px; margin-top: 8px;",
      uiOutput(outputId = "corrOpenOutput"))
    )
  )
)
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block", htmlOutput(outputId = "corrSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "saveCorrSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copyCorrSyntax")),
    verbatimTextOutput(outputId = "corrSyntax"),
    tags$head(tags$style(HTML("#corrSyntax {background-color: white; white-space: pre-wrap;}")))
  )
),
conditionalPanel(condition = "output.corrSyntax",
div(style = "margin-top: 30px",
textOutput(outputId = "corrExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execCorr")
)
),
conditionalPanel(condition = "corrSyntax",
verbatimTextOutput(outputId = "consoleCorr"),
tags$head(tags$style("#consoleCorr {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleCorr"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "linReg", class = "active",
h1(textOutput(outputId = "h1LinReg")),
htmlOutput(outputId = "linRegIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "linRegChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.linRegChooseSrcFile",
  div(verbatimTextOutput(outputId = "linRegSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#linRegSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "linRegStudyName"),
    htmlOutput(outputId = "linRegStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "linRegRespHead"),
  htmlOutput(outputId = "linRegRespAvailable")
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "linRegNoWeights"),
    tags$head(tags$style("#linRegNoWeights {color: red; font-weight: bold;}"))
  )
),
div(style = "display: inline-block; padding-bottom:10px;",
htmlOutput(outputId = "linRegVariablesExplText")
),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "linRegAllAvailableVars"),
  tags$head(tags$style("#linRegAllAvailableVars {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "linRegArrowSelSplitVarsRight"),
    uiOutput(outputId = "linRegArrowSelSplitVarsLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "linRegSplitVars"),
    tags$head(tags$style("#linRegSplitVars {white-space: nowrap;}")),
    uiOutput(outputId = "linRegInclMiss")
  )
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(),
  uiOutput(outputId = "linRegArrowSelIndepCatBckgVarsRight"),
  uiOutput(outputId = "linRegArrowSelIndepCatBckgVarsLeft"),
),
column(width = 10,
  htmlOutput(outputId = "linRegIndepCatCaption"),
  tags$head(tags$style("#linRegIndepCatCaption {color: black; font-weight: bold; margin-top: -3px; padding-bottom: 9px;}")),
  DTOutput(outputId = "linRegIndepCatBckgVars"),
  tags$head(tags$style("#linRegIndepCatBckgVars {white-space: nowrap;}"))
)
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "linRegArrowSelIndepCntBckgVarsRight"),
  uiOutput(outputId = "linRegArrowSelIndepCntBckgVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "linRegIndepCntBckgVars"),
  tags$head(tags$style("#linRegIndepCntBckgVars {white-space: nowrap;}"))
)
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "linRegArrowSelIndepPVsRight"),
  uiOutput(outputId = "linRegArrowSelIndepPVsLeft"),
  br(),
  uiOutput(outputId = "linRegArrowSelIndepPVsRightDisbld"),
  uiOutput(outputId = "linRegArrowSelIndepPVsLeftDisbld")
),
column(width = 10,
  DTOutput(outputId = "linRegIndepPVVars"),
  tags$head(tags$style("#linRegIndepPVVars {white-space: nowrap;}")),
  DTOutput(outputId = "linRegIndepPVVarsDisbld")
)
),
fluidRow(
  column(width = 2),
  column(width = 9,
    uiOutput(outputId = "linRegChooseDepType")
  )
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "linRegArrowSelDepBckgVarsRight"),
  uiOutput(outputId = "linRegArrowSelDepBckgVarsLeft"),
  br(),
  uiOutput(outputId = "linRegArrowSelDepPVsRight"),
  uiOutput(outputId = "linRegArrowSelDepPVsLeft"),
  br(),
  uiOutput(outputId = "linRegArrowSelDepPVsRightDisbld"),
  uiOutput(outputId = "linRegArrowSelDepPVsLeftDisbld")
),
column(width = 10,
  DTOutput(outputId = "linRegDepBckgVars"),
  tags$head(tags$style("#linRegDepBckgVars {white-space: nowrap;}")),
  DTOutput(outputId = "linRegDepPVVars"),
  tags$head(tags$style("#linRegDepPVVars {white-space: nowrap;}")),
  DTOutput(outputId = "linRegDepPVVarsDisbld")
)
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br()
),
column(width = 10, align = "center",
DTOutput(outputId = "linRegInteractions"),
tags$head(tags$style("#linRegInteractions {white-space: nowrap;}"))
)
),
br(), br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "linRegArrowSelWeightVarsRight"),
  uiOutput(outputId = "linRegArrowSelWeightVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "linRegWeightVar"),
  tags$head(tags$style("#linRegWeightVar {white-space: nowrap;}"))
)
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "linRegSplitArePVs"),
    tags$head(tags$style("#linRegSplitArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "linRegBckgCatArePVs"),
    tags$head(tags$style("#linRegBckgCatArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "linRegBckgCntArePVs"),
    tags$head(tags$style("#linRegBckgCntArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "linRegIndepPVsAreBckg"),
    tags$head(tags$style("#linRegIndepPVsAreBckg {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "linRegDepBckgArePVs"),
    tags$head(tags$style("#linRegDepBckgArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "linRegDepPVsAreBckg"),
    tags$head(tags$style("#linRegDepPVsAreBckg {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "linRegWgtsNotWgts"),
    tags$head(tags$style("#linRegWgtsNotWgts {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "linRegWarnMoreVars")
  )
),
fluidRow(
  column(width = 3,
    div(style = "margin-top: 40px",
    uiOutput(outputId = "linRegEffectiveDF"),
    tags$head(tags$style("#linRegEffectiveDF {white-space: nowrap;}"))
  )
),
column(width = 9,
  div(style = "margin-top: 40px",
  uiOutput(outputId = "linRegComputations")
),
div(style = "margin-top: 5px",
uiOutput(outputId = "linRegStandardize")
),
div(style = "margin-top: -10px",
uiOutput(outputId = "linRegShortcut")
)
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-bottom: 25px",
      div(style="display:inline-block",
      shinySaveButton(id = "linRegChooseOutFile", label = "Define the output file name", title = "Define file name", icon = icon("file-export"), filetype = list(xlsx = "xlsx"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")),
      div(style="display:inline-block; margin-left: 15px; margin-top: 8px;", uiOutput(outputId = "linRegOpenOutput"))
    )
  )
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block", htmlOutput(outputId = "linRegSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "saveLinRegSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copyLinRegSyntax")),
    verbatimTextOutput(outputId = "linRegSyntax"),
    tags$head(tags$style(HTML("#linRegSyntax {background-color: white; white-space: pre-wrap;}")))
  )
),
conditionalPanel(condition = "output.linRegSyntax",
div(style = "margin-top: 30px",
textOutput(outputId = "linRegExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execLinReg"),
)
),
conditionalPanel(condition = "linRegSyntax",
verbatimTextOutput(outputId = "consoleLinReg"),
tags$head(tags$style("#consoleLinReg {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; ; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleLinReg"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "quantReg", class = "active",
h1(textOutput(outputId = "h1QuantReg")),
htmlOutput(outputId = "quantRegIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "quantRegChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.quantRegChooseSrcFile",
  div(verbatimTextOutput(outputId = "quantRegSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#quantRegSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "quantRegStudyName"),
    htmlOutput(outputId = "quantRegStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "quantRegRespHead"),
  htmlOutput(outputId = "quantRegRespAvailable")
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "quantRegNoWeights"),
    tags$head(tags$style("#quantRegNoWeights {color: red; font-weight: bold;}"))
  )
),
div(style = "display: inline-block; padding-bottom:10px;",
htmlOutput(outputId = "quantRegVariablesExplText")
),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "quantRegAllAvailableVars"),
  tags$head(tags$style("#quantRegAllAvailableVars {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "quantRegArrowSelSplitVarsRight"),
    uiOutput(outputId = "quantRegArrowSelSplitVarsLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "quantRegSplitVars"),
    tags$head(tags$style("#quantRegSplitVars {white-space: nowrap;}")),
    uiOutput(outputId = "quantRegInclMiss")
  )
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(),
  uiOutput(outputId = "quantRegArrowSelIndepCatBckgVarsRight"),
  uiOutput(outputId = "quantRegArrowSelIndepCatBckgVarsLeft"),
),
column(width = 10,
  htmlOutput(outputId = "quantRegIndepCatCaption"),
  tags$head(tags$style("#quantRegIndepCatCaption {color: black; font-weight: bold; margin-top: -3px; padding-bottom: 9px;}")),
  DTOutput(outputId = "quantRegIndepCatBckgVars"),
  tags$head(tags$style("#quantRegIndepCatBckgVars {white-space: nowrap;}"))
)
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "quantRegArrowSelIndepCntBckgVarsRight"),
  uiOutput(outputId = "quantRegArrowSelIndepCntBckgVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "quantRegIndepCntBckgVars"),
  tags$head(tags$style("#quantRegIndepCntBckgVars {white-space: nowrap;}"))
)
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "quantRegArrowSelIndepPVsRight"),
  uiOutput(outputId = "quantRegArrowSelIndepPVsLeft"),
  br(),
  uiOutput(outputId = "quantRegArrowSelIndepPVsRightDisbld"),
  uiOutput(outputId = "quantRegArrowSelIndepPVsLeftDisbld")
),
column(width = 10,
  DTOutput(outputId = "quantRegIndepPVVars"),
  tags$head(tags$style("#quantRegIndepPVVars {white-space: nowrap;}")),
  DTOutput(outputId = "quantRegIndepPVVarsDisbld")
)
),
fluidRow(
  column(width = 2),
  column(width = 9,
    uiOutput(outputId = "quantRegChooseDepType")
  )
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "quantRegArrowSelDepBckgVarsRight"),
  uiOutput(outputId = "quantRegArrowSelDepBckgVarsLeft"),
  br(),
  uiOutput(outputId = "quantRegArrowSelDepPVsRight"),
  uiOutput(outputId = "quantRegArrowSelDepPVsLeft"),
  br(),
  uiOutput(outputId = "quantRegArrowSelDepPVsRightDisbld"),
  uiOutput(outputId = "quantRegArrowSelDepPVsLeftDisbld")
),
column(width = 10,
  DTOutput(outputId = "quantRegDepBckgVars"),
  tags$head(tags$style("#quantRegDepBckgVars {white-space: nowrap;}")),
  DTOutput(outputId = "quantRegDepPVVars"),
  tags$head(tags$style("#quantRegDepPVVars {white-space: nowrap;}")),
  DTOutput(outputId = "quantRegDepPVVarsDisbld")
)
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br()
),
column(width = 10, align = "center",
DTOutput(outputId = "quantRegInteractions"),
tags$head(tags$style("#quantRegInteractions {white-space: nowrap;}"))
)
),
br(), br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "quantRegArrowSelWeightVarsRight"),
  uiOutput(outputId = "quantRegArrowSelWeightVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "quantRegWeightVar"),
  tags$head(tags$style("#quantRegWeightVar {white-space: nowrap;}"))
)
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "quantRegSplitArePVs"),
    tags$head(tags$style("#quantRegSplitArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "quantRegBckgCatArePVs"),
    tags$head(tags$style("#quantRegBckgCatArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "quantRegBckgCntArePVs"),
    tags$head(tags$style("#quantRegBckgCntArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "quantRegIndepPVsAreBckg"),
    tags$head(tags$style("#quantRegIndepPVsAreBckg {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "quantRegDepBckgArePVs"),
    tags$head(tags$style("#quantRegDepBckgArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "quantRegDepPVsAreBckg"),
    tags$head(tags$style("#quantRegDepPVsAreBckg {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "quantRegWgtsNotWgts"),
    tags$head(tags$style("#quantRegWgtsNotWgts {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "quantRegWarnMoreVars")
  )
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-top: 37px;",
    div(style = "display: inline-block;",
    uiOutput(outputId = "quantileValues"),
  ),
  div(style = "width: 15px;"),
  div(style = "margin-top: 25px",
  uiOutput(outputId = "quantileValuesReset")
),
div(style = "width: 15px;"),
div(style = "padding-top: 15px;",
htmlOutput(outputId = "quantilesNotNum"),
tags$head(tags$style("#quantilesNotNum {color: red; font-weight: bold;}")),
htmlOutput(outputId = "quantilesNotInRange"),
tags$head(tags$style("#quantilesNotInRange {color: red; font-weight: bold;}"))
)
)
),
fluidRow(
  column(width = 3,
    div(style = "margin-top: 30px",
    uiOutput(outputId = "quantRegEffectiveDF"),
    tags$head(tags$style("#quantRegEffectiveDF {white-space: nowrap;}"))
  )
),
column(width = 9,
  div(style = "margin-top: 40px",
  uiOutput(outputId = "quantRegComputations")
),
div(style = "margin-top: 5px",
uiOutput(outputId = "quantRegStandardize")
),
div(style = "margin-top: -10px",
uiOutput(outputId = "quantRegShortcut")
)
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-bottom: 25px",
      div(style="display:inline-block",
      shinySaveButton(id = "quantRegChooseOutFile", label = "Define the output file name", title = "Define file name", icon = icon("file-export"), filetype = list(xlsx = "xlsx"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")),
      div(style="display:inline-block; margin-left: 15px; margin-top: 8px;", uiOutput(outputId = "quantRegOpenOutput"))
    )
  )
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block", htmlOutput(outputId = "quantRegSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "saveQuantRegSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copyQuantRegSyntax")),
    verbatimTextOutput(outputId = "quantRegSyntax"),
    tags$head(tags$style(HTML("#quantRegSyntax {background-color: white; white-space: pre-wrap;}")))
  )
),
conditionalPanel(condition = "output.quantRegSyntax",
div(style = "margin-top: 30px",
textOutput(outputId = "quantRegExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execQuantReg"),
)
),
conditionalPanel(condition = "quantRegSyntax",
verbatimTextOutput(outputId = "consoleQuantReg"),
tags$head(tags$style("#consoleQuantReg {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; ; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleQuantReg"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
),
tabItem(tabName = "binLogReg", class = "active",
h1(textOutput(outputId = "h1binLogReg")),
htmlOutput(outputId = "binLogRegIntro"),
div(
  style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
  shinyFilesButton(id = "binLogRegChooseSrcFile", label = "Choose data file", title = "Navigate and select a file", multiple = FALSE, icon = icon("file-import"), style = "color: #ffffff; background-color: #000000; border-radius: 10px; height: 33px;"),
  div(style = "width: 30px;"),
  conditionalPanel(condition = "input.binLogRegChooseSrcFile",
  div(verbatimTextOutput(outputId = "binLogRegSrcPathDisplay"), style = "min-width: 750px;"),
  tags$head(tags$style("#binLogRegSrcPathDisplay {background-color: white;}"))
)
),
fluidRow(
  div(
    style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-left:15px; padding-bottom:30px",
    div(style = "display: inline-block; padding-top:30px;",
    htmlOutput(outputId = "binLogRegStudyName"),
    htmlOutput(outputId = "binLogRegStudyCycle"),
  ),
  div(style = "width: 135px;"),
  div(style = "display: inline-block; padding-top:17px;",
  htmlOutput(outputId = "binLogRegRespHead"),
  htmlOutput(outputId = "binLogRegRespAvailable")
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "binLogRegNoWeights"),
    tags$head(tags$style("#binLogRegNoWeights {color: red; font-weight: bold;}"))
  )
),
div(style = "display: inline-block; padding-bottom:10px;",
htmlOutput(outputId = "binLogRegVariablesExplText")
),
fluidRow(
  column(width = 6, align = "center",
  DTOutput(outputId = "binLogRegAllAvailableVars"),
  tags$head(tags$style("#binLogRegAllAvailableVars {white-space: nowrap;}"))
),
column(width = 6,
  fluidRow(
    column(width = 2, align = "center",
    br(), br(),  br(), br(),
    uiOutput(outputId = "binLogRegArrowSelSplitVarsRight"),
    uiOutput(outputId = "binLogRegArrowSelSplitVarsLeft"),
  ),
  column(width = 10,
    DTOutput(outputId = "binLogRegSplitVars"),
    tags$head(tags$style("#binLogRegSplitVars {white-space: nowrap;}")),
    uiOutput(outputId = "binLogRegInclMiss")
  )
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(),
  uiOutput(outputId = "binLogRegArrowSelIndepCatBckgVarsRight"),
  uiOutput(outputId = "binLogRegArrowSelIndepCatBckgVarsLeft"),
),
column(width = 10,
  htmlOutput(outputId = "binLogRegIndepCatCaption"),
  tags$head(tags$style("#binLogRegIndepCatCaption {color: black; font-weight: bold; margin-top: -3px; padding-bottom: 9px;}")),
  DTOutput(outputId = "binLogRegIndepCatBckgVars"),
  tags$head(tags$style("#binLogRegIndepCatBckgVars {white-space: nowrap;}"))
)
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "binLogRegArrowSelIndepCntBckgVarsRight"),
  uiOutput(outputId = "binLogRegArrowSelIndepCntBckgVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "binLogRegIndepCntBckgVars"),
  tags$head(tags$style("#binLogRegIndepCntBckgVars {white-space: nowrap;}"))
)
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "binLogRegArrowSelIndepPVsRight"),
  uiOutput(outputId = "binLogRegArrowSelIndepPVsLeft"),
  br(),
  uiOutput(outputId = "binLogRegArrowSelIndepPVsRightDisbld"),
  uiOutput(outputId = "binLogRegArrowSelIndepPVsLeftDisbld")
),
column(width = 10,
  DTOutput(outputId = "binLogRegIndepPVVars"),
  tags$head(tags$style("#binLogRegIndepPVVars {white-space: nowrap;}")),
  DTOutput(outputId = "binLogRegIndepPVVarsDisbld")
)
),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "binLogRegArrowSelDepBinVarsRight"),
  uiOutput(outputId = "binLogRegArrowSelDepBinVarsLeft")
),
column(width = 10,
  DTOutput(outputId = "binLogRegDepBinVars"),
  tags$head(tags$style("#binLogRegDepBinVars {white-space: nowrap;}"))
)
),
br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br()
),
column(width = 10, align = "center",
DTOutput(outputId = "binLogRegInteractions"),
tags$head(tags$style("#binLogRegInteractions {white-space: nowrap;}"))
)
),
br(), br(),
fluidRow(
  column(width = 2, align = "center",
  br(), br(),  br(), br(),
  uiOutput(outputId = "binLogRegArrowSelWeightVarsRight"),
  uiOutput(outputId = "binLogRegArrowSelWeightVarsLeft"),
),
column(width = 10,
  DTOutput(outputId = "binLogRegWeightVar"),
  tags$head(tags$style("#binLogRegWeightVar {white-space: nowrap;}"))
)
)
)
),
fluidRow(
  column(width = 12,
    htmlOutput(outputId = "binLogRegSplitArePVs"),
    tags$head(tags$style("#binLogRegSplitArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "binLogRegBckgCatArePVs"),
    tags$head(tags$style("#binLogRegBckgCatArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "binLogRegBckgCntArePVs"),
    tags$head(tags$style("#binLogRegBckgCntArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "binLogRegIndepPVsAreBckg"),
    tags$head(tags$style("#binLogRegIndepPVsAreBckg {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "binLogRegDepBinArePVs"),
    tags$head(tags$style("#binLogRegDepBinArePVs {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "binLogRegDepNotBin"),
    tags$head(tags$style("#binLogRegDepNotBin {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "binLogRegWgtsNotWgts"),
    tags$head(tags$style("#binLogRegWgtsNotWgts {color: red; font-weight: bold;}")),
    htmlOutput(outputId = "binLogRegWarnMoreVars")
  )
),
fluidRow(
  column(width = 12,
    div(style = "margin-top: 40px",
    uiOutput(outputId = "binLogRegWgtNorm")
  )
)
),
fluidRow(
  column(width = 12,
    div(style = "margin-top: 25px",
    uiOutput(outputId = "binLogRegStandardize")
  )
)
),
fluidRow(
  column(width = 12,
    div(style = "margin-top: 25px; margin-bottom: 77px",
    uiOutput(outputId = "binLogRegShortcut")
  )
)
),
fluidRow(
  column(width = 12,
    div(
      style = "display:-webkit-flex; display:-ms-flexbox; display:flex; margin-bottom: 25px",
      div(style="display:inline-block",
      shinySaveButton(id = "binLogRegChooseOutFile", label = "Define the output file name", title = "Define file name", icon = icon("file-export"), filetype = list(xlsx = "xlsx"), style = "color: #ffffff; background-color: #000000; border-radius: 10px")),
      div(style="display:inline-block; margin-left: 15px; margin-top: 8px;",
      uiOutput(outputId = "binLogRegOpenOutput"))
    )
  )
),
fluidRow(
  column(width = 12,
    div(style="display:inline-block", htmlOutput(outputId = "binLogRegSyntaxHead")),
    div(style="display:inline-block", shinySaveButton(id = "saveBinLogRegSyntax", label = "Save syntax", "Save syntax as...", filetype = list(R = "r"), icon = icon("download"), style = "color: #ffffff; background-color: #000000; border-radius: 5px; font-size: 80%; margin-bottom: 1px; padding: 1px; width: 85px; margin-bottom: 0px; margin-left: 25px")),
    div(style="display:inline-block", uiOutput(outputId = "copyBinLogRegSyntax")),
    verbatimTextOutput(outputId = "binLogRegSyntax"),
    tags$head(tags$style(HTML("#binLogRegSyntax {background-color: white; white-space: pre-wrap;}")))
  )
),
conditionalPanel(condition = "output.binLogRegSyntax",
div(style = "margin-top: 30px",
textOutput(outputId = "binLogRegExecBtnHead")
),
div(style = "margin-bottom: 30px",
uiOutput(outputId = "execBinLogReg")
)
),
conditionalPanel(condition = "binLogRegSyntax",
verbatimTextOutput(outputId = "consoleBinLogReg"),
tags$head(tags$style("#consoleBinLogReg {color:red; background-color: white; overflow-y:scroll; opacity: 1; max-height: 500px; margin-bottom: 30px}")),
tags$script(
'
Shiny.addCustomMessageHandler("scrollCallback",
function(color) {
var objDiv = document.getElementById("consoleBinLogReg"); /* Here we point to "console" output, adapt in other cases */
objDiv.scrollTop = objDiv.scrollHeight;
}
);'
)
)
)
),
tags$footer(HTML("R Analyzer for Large-Scale Assessments - &#127279; 2021-2026"), align = "center", style = "
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
height: 22px;
color: white;
font-size: 14px;
padding-top: 1px;
padding-left: 260px; /*Add left padding equal to the width of the sidebar (260px) to make the footer text centered to the dashboard body*/
background-color: #000000;
z-index: 1000;")
)
)
)
)
)