inst/ShinyBeads/ui.R

########################################################################################################################
## ui.R
## created: 2016-09-01
## creator: Muhammad Raheel
## ---------------------------------------------------------------------------------------------------------------------
## Main User Interface of the ShinyBeads tool.
########################################################################################################################


# libraries
######################################################################
library(DT)
library(shiny)
library(shinyjs)
library(plyr)
library(ggplot2)
library(plotly) #interactive graphics with D3
library(shinydashboard)
#####################################################################


choices = "NA"
topRowsPlotChoices = c('All','5000', '1000' , '500' ,'100')
topRowsChoices = c('All', '100000' ,'50000' , '20000', '10000', '1000' , '500' ,'100')
check_vectors <- c('COMPLETED Loading Data', 'COMPLETED Quality Control', 'COMPLETED Preprocessing', 'COMPLETED Tracks and Tables','COMPLETED Covariate Inference','COMPLETED Exploratory Analysis','COMPLETED Differential Methylation')



########################################################################################################################
##
## Dashboard header
## ---------------------------------------------------------------------------------------------------------------------
## User Interface components of dashboard header
########################################################################################################################

header <- dashboardHeader(

  #title = tags$a(class='pull-left', href = '.', tags$img(src = 'RnBeads.png'), style = "background-color: 'white';")
  title = HTML(paste('ShinyBeads'))

#   tags$li(a(href = 'http://shinyapps.company.com',
#             icon("power-off"),
#             title = "Back to Apps Home"),
#           class = "dropdown"),
#   tags$li(a(href = 'http://www.company.com',
#             img(src = 'RnBeads.png',
#                 title = "Company Home", height = "30px"),
#             style = "padding-top:10px; padding-bottom:10px;"),
#           class = "dropdown")



)

# header$children[[2]]$children <-  tags$a(href='http://mycompanyishere.com',
#                                            tags$img(src='RnBeads.png',height='60',width='200'))
#


########################################################################################################################
##
## Dashboard sidebar
## ---------------------------------------------------------------------------------------------------------------------
## User Interface components of dashboard sidebar
########################################################################################################################

sidebar <- dashboardSidebar(
  hr(),
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "custom.css"),
    tags$style(HTML("
                      .sidebar { position: fixed;}
                      " )
    )

  ),
  sidebarMenu(id="tabs",
              menuItem("Home", tabName="home", icon=icon("home"), selected=TRUE),
              menuItem("Analysis", tabName="analysis", icon=icon("file-text-o")),
              menuItem("Dataset", tabName="dataset", icon=icon("database")),
              menuItem("QQplots", tabName="qqplots", icon=icon("line-chart")),
              menuItem("Table Browser", tabName="tablebrowser", icon=icon("table")),
              menuItem("Top Scorer", tabName="topscorer", icon=icon("table")),


              menuItem("About", tabName = "about", icon = icon("question"))
              #menuItem("Testing", tabName = "testing", icon = icon("question"))
  ),
  hr(),
  br(),
  br(),
  conditionalPanel("input.tabs=='plot'",
                   fluidRow(
                     column(1),
                     column(10

                     )
                   )
  )
)

########################################################################################################################
##
## Dashboard Body
## ---------------------------------------------------------------------------------------------------------------------
## User Interface components of dashboard body
########################################################################################################################



body <- dashboardBody(

  tags$head(
#     tags$style(HTML("
#                       .sidebar { height: 90vh; overflow-y: auto; }
#                       " )
#     ),
    tags$style(HTML("
                      .customtabbox { height: 30vh; overflow-y: auto; }
                      .dataTables_wrapper { overflow-y: scroll; height: auto; }

                      " )
    ),
    tags$style(HTML("
                      .customtabboxcomparison { height: 65vh; overflow-y: auto; }
                      " )
    )
  ),



  tabItems(
    tabItem(tabName = "readme"

            #includeMarkdown("readMe.Rmd")
    ),

    ########################################################################################################################
    ##
    ## Tab Item : home
    ##
    ########################################################################################################################

    tabItem(tabName = "home",
            fluidRow(

              column(width = 12,
                     box(  width = NULL,

                           HTML(paste(


                             '<h2>Repository</h2>',
                             #paste('<p>',,'</p>'),

                             paste('<p>',textOutput("ErrorText1"),'</p>'),

                             paste('<h5><b>',textOutput("ErrorText2"),'</b></h5>'),



                             '<br/>')
                           ),



                           tabBox( width = NULL,




                                                 tabPanel("AnalysisList",
                                                          br(),
#                                                           shinyDirButton('folder', 'Folder select', 'Please select a folder', FALSE),
                                                         #textOutput('directorypath'),
                                                          verbatimTextOutput("count_rfolders"),

                                                          tags$strong("Below are the list of analysis generated by RnBeads"),

                                                          br(),
                                                          br(),
                                                          dataTableOutput("list_folders"),

                                                          dataTableOutput('table1'),
                                                          br(),
                                                          actionButton("view_datasets", label = "View Datasets", class="btn btn-primary"),
                                                          br()
                                                 ),

                                                 tabPanel("DatasetList",
                                                          br(),
                                                          tags$strong("List of different data sets used in the analysis:"),
                                                          tags$p(""),


                                                          verbatimTextOutput("total_datasets"),
                                                          br(),


                                                          HTML(paste('<b><p>To learn more about dataset click ',actionButton('dataset', 'here',class="btn btn-primary"),'</p></b>',sep="")),


                                                          br(),

                                                          fluidRow(

                                                            column(width = 12,
                                                                   box( width = NULL,
                                                                            dataTableOutput("list_datasets"),

                                                                            br(),
                                                                     collapsible = TRUE,
                                                                    title = "Datasets / Sample sheets", status = "primary", solidHeader = TRUE)
                                                            )
#                                                             column(width = 6,
#                                                                    box( width = NULL,
#                                                                            dataTableOutput("common_datasets_used"),
#                                                                            br(),
#                                                                     collapsible = TRUE,
#                                                                    title = "Shared Datasets / Sample sheets", status = "primary", solidHeader = TRUE)
#
#                                                             )
                                                          )
                                                 )
                     ), collapsible = TRUE,
                           title = "Overview", status = "primary", solidHeader = TRUE)
              ))
    ),

    ########################################################################################################################
    ##
    ## Tab Item : analysis
    ##
    ########################################################################################################################

    tabItem(tabName = "analysis",
            fluidRow(

              column(width = 12,

                     box(  width = NULL, selectInput("select_ia", "Select analysis folder:", choices),

#                                           tabBox( width = NULL,
#                                                  tabPanel("RnBeads Reports",
#


                                                  HTML(paste(
                                                               #'<h2>Rnbeads modules performed!</h2>',
                                                               #tags$h2(style="color:black;","Rnbeads modules performed"),
                                                                 tableOutput("list_module"),

                                                             #'<h2>Rnbeads Reports!</h2>',
                                                             #tags$h2(style="color:black;","Rnbeads Reports"),




                                                             #                                                  actionButton("view_rnbeads_reports", label = "Reports", class=""),
                                                             #
                                                             uiOutput('rnbeadsReports'),
                                                             br()






                                                  )),

                                                  br(),
                                                  tags$strong("RnBeads options"),
                                                  br(),
                                                  br(),
                                                  dataTableOutput("list_options"),


                                                  br(),

#                          )
#                          tabPanel("Analysis options",
#
#                                   br(),
#                                   tags$strong("RnBeads options"),
#                                   br(),
#                                   br(),
#                                   dataTableOutput("list_options"),
#                                   br()
#
#
#                          )

#                          tabPanel("Modules performed",
#
#                                   #tags$strong("List of modules performed are:"),
#
#                                   tableOutput("list_module"),
#                                   br()
#
#                          )
#                      ),
                     collapsible = TRUE,
                           title = "Analysis", status = "primary", solidHeader = TRUE)
              ))
    ),

    ########################################################################################################################
    ##
    ## Tab Item : dataset
    ##
    ########################################################################################################################

    tabItem(tabName = "dataset",
            fluidRow(

              column(width = 12,

                     box(  width = NULL,
                           selectInput("dd_ids_datasets", "Datasets:", choices),

                           tags$strong("Selected dataset is used in following analysis."),
                           dataTableOutput(paste0('annotationtest')),
                           br(),

                           dataTableOutput(paste0('annotation1')),

                           br(),
                           br(),
                           fluidRow(

                             column(width = 6,
                               verbatimTextOutput('totalDatasetSamples'),
                               br()
                             )),

                           tags$strong("Data set / Sample Annotation file content."),
                           br(),
                           br(),
                           dataTableOutput(paste0('annotation')),
                           br(),

#                            tabBox( width = NULL,
#
#                                     tabPanel("dataset",
#
#
#                                   ),
#                                   tabPanel("annotation file",
#
#                                   )
#
#
#                            ),
                           collapsible = TRUE,
                           title = "Dataset Information", status = "primary", solidHeader = TRUE)
              ))
    ),

    ########################################################################################################################
    ##
    ## Tab Item : QQ Plots
    ##
    ########################################################################################################################

    tabItem(tabName = "qqplots",
            fluidRow(

              column(width = 12,


                     box(  width = NULL,
                           tags$h2(style="color:black;","QQ-Plots"),

                           tags$p(paste("Quantile-quantile plots (qq-plots) can be useful for verifying that a set of values",
                                        "come from a certain distribution.")
                           ),


                           tags$p(paste("For example in a genome-wide association study,",
                                        "we expect that most of the SNPs we are testing not to be associated with the disease.",
                                        "Under the null, this means that the p-values we get from tests where no true",
                                        "association exists should follow a uniform(0,1) distribution. Since we're usually most",
                                        "interested in really small p-values, we generally transform the p-values by -log10 so",
                                        "that the smallest values near zero become the larger values and are thus easier to see.")
                           ),



                           tags$p("Select the analysis and the differential methylation comparison generated by Rnbeads from the menu below and click display:"),

#                                     tabPanel("QQ-Plot",
#                                              br(),
#
#                                              selectInput("input_dmcomp_choices", "Select analysis folder:", choices),
#                                              selectInput("input_dmcomp_files", "comparisons:", ""),
#                                              selectInput("input_qqplot_readtop", "Read top n rows:", topRowsPlotChoices),


#                                              tags$div(id = "", class="",
#                                                       #tags$h3(style="color:black;","Filter data"),
#                                                       fluidRow(
#                                                         column(width = 5,
#
#                                                                uiOutput("qq.columns")
#
#                                                         ),
#                                                         column(width = 3,
#
#                                                                uiOutput("qq.columns.equality")
#
#
#
#                                                         ),
#
#                                                         column(width = 4,
#
#                                                                uiOutput("qq.columns.range")
#
#                                                         )
#
#                                                       )# end  of  fluid row
#                                              ),
#
#
#                                              actionButton('displayQQPlotBtn', 'Display',class="btn btn-primary btn-md"),
#                                              br(),
#                                              br(),
#
#
#                                              div(id="id_qqplot",
#
#                                                  fluidRow(
#                                                    column(width = 12,
#                                                           plotlyOutput('compqqplotly'),
#                                                           br(),
#                                                           br(),
#                                                           br(),
#                                                           br(),
#                                                           br(),
#                                                           br(),
#                                                           br(),
#                                                           br(),
#                                                           br(),
#                                                           br(),
#                                                           HTML(paste(
#                                                             uiOutput('info.qqplot')
#                                                           )),
#                                                           br()
#
#
#                                                           #plotOutput('compqqplot')
#                                                    ))# end  of  fluid row
#
#                                              ),
#
#                                              br()
#                                     ),
#
# #                                     tabPanel("Testing combined QQ-Plot",
# #                                              br(),
# #
# #                                              tableOutput('testingdata'),
# #                                              div(id="id_qqplott",
# #                                                  fluidRow(
# #                                                    column(width = 8,
# #
# #                                                           plotOutput('testingcompqqplot'),
# #                                                           plotlyOutput('testingcompqqplotly')
# #                                                           #plotOutput('compqqplot')
# #                                                    ))# end  of  fluid row
# #
# #                                              ),
# #
# #                                              br()
# #                                     ),


                                             br(),

                                             #h5("Select comparison among two RnBeads analysis"),

                                             fluidRow(

                                               column(width = 6,
                                                     selectInput("input_dmcomp_choices_1", "Analysis 1:", choices),
                                                     selectInput("input_dmcomp_files_1", "Comaprisons 1:", "")

                                               ),
                                               column(width = 6,
                                                     selectInput("input_dmcomp_choices_2", "Analysis 2:", choices),
                                                     selectInput("input_dmcomp_files_2", "Comparisons 2:", "")

                                               )
                                             ),
                                              fluidRow(
                                                column(width = 2,

                                                       #selectInput("input_multiqqplot_readtop", "Read top n rows:", topRowsPlotChoices)
                                                       uiOutput("input_multiqqplot_readtop")

                                                ),
                                                column(width = 2,

                                                       uiOutput("qq.multi.columns")

                                                ),
                                                column(width = 1,

                                                       uiOutput("qq.multi.columns.equality")



                                                ),

                                                column(width = 2,

                                                       uiOutput("qq.multi.columns.range")

                                                )
                                              ),

                                              #tags$h4(style="color:black;","Filter data"),



                                             actionButton('displayBtn', 'Display',class="btn btn-primary btn-md"),
                                             br(),
                                             br(),

                                             fluidRow(

                                               column(width = 12,
                                                      tags$h4(style="color:black;","QQ-plot"),
                                                      HTML(paste(
                                                        uiOutput('info.qqplot2')
                                                      )),
                                                      br(),
                                                      plotOutput('compqqplot',height = "auto"),
                                                      tags$div(id='id_plotly_qqplot',
                                                              plotlyOutput('multicompqqplot1',height = "auto")
                                                      ),


                                                      #tableOutput('testingdata'),





                                                      br()

                                               )
                                             ),

                                             br(),









                           collapsible = TRUE,
                           title = "QQPlots", status = "primary", solidHeader = TRUE)
              )
             )
    ),

    ########################################################################################################################
    ##
    ## Tab Item : Table Browser
    ##
    ########################################################################################################################


    tabItem(tabName = "tablebrowser",
            fluidRow(

              column(width = 12,
                     box(  width = NULL,

                           tags$h2(style="color:black;","Table Browser"),
                           tags$div(id = "tb_div_info", checked=NA,

                                    tags$p(paste("Table Browser is useful for filtering and sorting of the differential methylation comparison data, Select the RnBeads analysis and then you can filter the table with all the columns and you can download the results.",
                                                 "Also you can upload external files having at least a target column whoes values are like cgxxxxxxx and the table will get filtered."
                                    )
                                    )# end p tag

                           ),

                           br(),
                           fluidRow(
                             column(width = 4,
                                     selectInput("input_tablebrowser_choices", "Select analysis folder:", choices),
                                     selectInput("input_tablebrowser_files", "Select comparison:", ""),
                                     selectInput("input_tablebrowser_readtop", "Read top n rows:", topRowsChoices),

                                    br(),
                                      actionButton('displayTableBrowserBtn', 'Display',class="btn btn-primary btn-md"),

                                      br(),
                                      br(),
                                      tags$p("The table below lists the data from the selected analysis."),

                                     br(),
                                     br()
                             ),
                             column(width = 3
                             ),
                             column(width = 5,
                                     tags$h3(style="color:black;",paste("Filter with external files",
                                                                        "e.g 450K annotation etc")),




                                     fileInput('file1', 'Choose file to filter the table below',
                                               accept = c(
                                                 'text/csv',
                                                 'text/comma-separated-values',
                                                 'text/tab-separated-values',
                                                 'text/plain',
                                                 '.csv',
                                                 '.tsv'
                                               )
                                     ),
                                     tags$hr(),
                                     checkboxInput('header', 'Header', TRUE),
                                     radioButtons('sep', 'Separator',
                                                  c(Comma=',',
                                                    Semicolon=';',
                                                    Tab='\t'),
                                                  ','),

                                     br()
                                  )
                           ),#end of fluid row


#                            tabBox(  width = NULL,
#                                     tabPanel("analysis",
#
#
#                                     ),
#                                     tabPanel("file upload",
#
#
#
#
#                                     )# end of tab panel
#
#
#
#                            ),# end of tab box


                           div(class="",




                               HTML(paste(

                                          uiOutput('rnbeadsDiffMethReport')


                               )),




                               dataTableOutput('output.comparison.file'),
                               br(),
                               br(),


                               div(id="id_tb_filterPlot_Btn",
                                   tags$h2(style="color:black;","Filtered Plot"),
                                   tags$p("Customize the plot by selecting x-axis and y-axis from the options. The plot will contains data from the above table. If the table data is quite big then please wait for some time untill the plot is displayed"),

                                   fluidRow(
                                     column(width = 3,
                                            selectInput("input_tablebrowser_x_axis", "Select x-axis:", '')
                                     ),
                                     column(width = 3,
                                            selectInput("input_tablebrowser_y_axis", "Select y-axis:", '')
                                     )
                                   ),

                                   actionButton('displayPlotBtn', 'Display Plot', class="btn btn-primary btn-md"),
                                   div(id="id_tb_filterPlot",

                                       br(),
                                       br(),
                                       HTML(paste(
                                         uiOutput('info.tb.plot')
                                       )),
                                       plotOutput('basicfilteredplot',height = "auto"),
                                       tags$div(id='id_plotly_filteredplot',
                                                plotlyOutput('filteredplotly',height = "auto")
                                       ),
                                       br(),
                                       br(),
                                       br(),
                                       br(),
                                       br(),
                                       br(),
                                       br(),
                                       br(),
                                       br(),
                                       br()
                                   )


                               ),
                               br(),
                               br(),
                               br(),
                               br(),
                               br(),
                               br()
                           ),





                           collapsible = TRUE,
                           title = "Table Browser", status = "primary", solidHeader = TRUE)
              )
            )
    ),


    ########################################################################################################################
    ##
    ## Tab Item : Top Scorer, Venn Diagram, Overlapping CpGs
    ##
    ########################################################################################################################

    tabItem(tabName = "topscorer",
            fluidRow(
              column(width = 4,
                     tabBox(  width = NULL, height = "auto",
                              tabPanel("analysis",
                                       br(),
                                       tags$div(id = "div_analysis_checkboxes", class="customtabbox",
                                                uiOutput("cb")




                                       )

                              )


                     ),
                     tabBox(  width = NULL, height = "auto",
                              tabPanel("comparisons",

                                     br(),
                                     tags$div(id = "", class="customtabboxcomparison",
                                              uiOutput("si")
                                     )
                              )
                     )


              ),
              column(width = 8,
                     box(  width = NULL,

                           tags$h2(style="color:black;","Top-scorer"),
                           tags$div(id = "ts_div_info", checked=NA,

                                    tags$p(paste("User can select multiple RnBeads analysis and filter the data based on top scores and see the overlappings in your seleted analysis in the form of Venn Diagram and also view the overlapping CpGs in table form.",
                                                 ""
                                    )
                                    )# end p tag

                           ),

                           tags$h4(style="color:black;","Venn Diagram"),
                           tags$p(paste("Check the analysis on the left for which you want to see the overlappings.")),
                           tags$p(paste("Note: Please select atleast 1 and atmost 5 analysis to draw Venn Diagram!")),


                           #checkboxGroupInput("cb_ts_comp_venn", label = h3("Select analysis"),
                           #                   choices = list("")),

                           tags$div(id = "", class="",
                                    fluidRow(
                                      column(width = 4,

                                             uiOutput("input_topscorer_readtop")


                                      ),

                                      column(width = 4,

                                             uiOutput("ts.columns")

                                      ),
                                      column(width = 2,

                                             uiOutput("ts.columns.equality")



                                      ),

                                      column(width = 2,

                                             uiOutput("ts.columns.range")

                                      )

                                    )# end  of  fluid row
                           ),


                           actionButton('btnMultipleShowVenn', 'Display',class="btn btn-primary btn-md"),




                           #tags$p(textOutput("comparison.check")),
                           tags$p(textOutput("ts.venn.overlapping.error.value"  )),
                           fluidRow(
                             column(width = 12,

                                    plotOutput('output.ts.multivenn.plot')

                             )




                           ),# end  of  fluid row


                           br(),
                           br(),
                           br(),
                           br(),
                           br(),
                           br(),
                           br(),
                           br(),
                           tableOutput('output.ts.table.multivenn.plot.labels'),





                           collapsible = TRUE,
                           title = "Venn Diagram", status = "primary", solidHeader = TRUE)
              )
            ),

            fluidRow(

              column(width = 12,
                     box(  width = NULL,

                           tags$h4(style="color:black;","Overlapping CpGs"),
                           tags$p(paste("")),

                           div(class="",


                               uiOutput("ts.selector.overlapping.value" ),
                               br()

                           ),

                           div(class="",


                               dataTableOutput('output.topscorer.overlappingComparison'),
                               br()

                           ),
                           br(),


                           collapsible = TRUE,
                           title = "Comparison details", status = "primary", solidHeader = TRUE)
              )
            )
    ),

    ########################################################################################################################
    ##
    ## Tab Item : About
    ##
    ########################################################################################################################

    tabItem(tabName = "about",
            #includeMarkdown("../../about/about.Rmd")



              # Home nav menu
              tabPanel("Home",

                       shinyjs::useShinyjs(),

                       #tags$style(type="text/css", "body {padding-top: 70px;}"),

                       tags$p(class="pull-right","Timestamp: ", span(id = "time", date()), a(id = "update", "Update")),

                       includeCSS("includes/styles.css"),

                       #shinythemes::themeSelector(),

                       HTML(paste(

                                        '<h2>ShinyBeads!</h2>',
                                        '<p>It is a tool to provide user friendly interactive interface for RnBeads generated reports. It allows to keep track of the analysis performed and prevent performing same analysis again and again. It makes it interactive and easier to compare same or different RnBeads analysis. Target users are the ones who uses RnBeads for analyzing DNA methylation data either individually or as a group.</p>',
                                        br()

                                  )),

                       HTML(paste(


                         '<div class="row">',


                         '<div class="col-md-12">',

                         tags$a(class='pull-left', href = '.', tags$img(src = 'RnBeads.png')),
                         br(),
                         br(),
                         br(),
                           '<p>RnBeads is an R package for comprehensive analysis of DNA methylation data obtained with any experimental protocol that provides single-CpG resolution. </p>',
                         br(),
                         '<p><a class="btn btn-primary btn-md" href="http://rnbeads.mpi-inf.mpg.de/" target = "blank" role="button">Learn more &raquo;</a></p>',

                         '</div>',

                         '<div class="col-md-12">',

                         '<h2>Contact!</h2>',
                         '<p>Questions and/or comments? Contact the developer. </p>',
                         '<p class= "text-info">Muhammad Raheel, [email protected] </p>',
                         '<p>Or contact my thesis supervisor. </p>',
                         '<p class= "text-info" >Pavlo Lutsik, [email protected] </p>',
                         '<p></p>',

                         '</div>',


                         '</div>',

                         '<br/>')),




                       #includeHTML("index.html"),




                       # commented is the script to change the tab

                       tags$head(tags$script('
                                             Shiny.addCustomMessageHandler("myCallbackHandler",
                                             function(typeMessage) {
                                                 console.log(typeMessage)

                                                 if(typeMessage == 4){
                                                    $("a:contains(DatasetList)").click();
                                                 }
                                             });
                                             ')
                       )

              )




    ),# end of tabitem about


    tabItem(tabName = "testing",

                 box(  width = NULL,





                      plotOutput('testingPlotly'),
                      br(),
                      br(),
                      br(),
                      br(),
                      br(),
                      br(),
                      br(),
                      br(),
                      br(),
                      br(),
                      br(),

                      collapsible = TRUE,
                       title = "Testing", status = "primary", solidHeader = TRUE
                  )


    ) #end of tabitems testing




  )# end of tab items
)# end of dashboard body


########################################################################################################################
##
## Dashboard Page
##
########################################################################################################################

dashboardPage(

  header,
  sidebar,
  body

)
m-raheel/RnShinyBeads documentation built on Dec. 13, 2017, 1:08 p.m.