Commit 90a4a2cd authored by Thomas Schwarzl's avatar Thomas Schwarzl

major layout updates. all data tables completely fill the page. introduced a...

major layout updates. all data tables completely fill the page. introduced a side navigation bar for filtering options
parent 5e2350f2
Pipeline #17358 failed with stage
in 58 seconds
......@@ -166,7 +166,8 @@ rowFilterButton <- dropdownButton(
),
uiOutput("filterSwitch"),
tags$span("filtering will be improved in future releases")
tags$span("filtering options will be vastly expanded in near future releases",
class = "note")
),
circle = TRUE,
......@@ -410,44 +411,30 @@ pageDownload <- fluidRow(
pageRBPTable <- fillRow(class = "RBPWindow",
flex = c(NA,1),
fillRow(width = "55px",
fillCol(class = "leftRBPPanel",
flex = c(NA, NA, NA, NA, NA, 1),
tags$div(class='organismSelector',
selectInput(
"selectedOrganism",
label = "Organism",
choices = ORGANISMS,
selected = ORGANISMS[1]
#selectize = TRUE
)
),
rowFilterButton,
columnFilterButton,
downloadButton,
pageRBPTable <- fluidRow(
fluidRow(
column(2,
rowFilterButton,
columnFilterButton,
downloadButton
), #column
column(2,
selectInput(
"selectedOrganism",
label = "Organism",
choices = ORGANISMS,
selected = ORGANISMS[1]
#selectize = TRUE
)
),
column(5,
uiOutput("filterStatus")
),
uiOutput("filterStatus", class = "filterStatus")
)
),
#column(12,
#tabsetPanel(type = "tabs",
# tabPanel("Table",
DTOutput("RBPtable",
height = "auto")
#)
#textOutput("RBPRowInfo")) #,
#tabPanel("Plots: Overlaps", plotOutput("UpsetOrganism", height = "600px")),
#tabPanel("Plots: Properties", plotOutput("plotKnown")),
#tabPanel("Enrichment Analyses", plotOutput("plotEnrichment"))
#)
#)
DTOutput("RBPtable",
height = "100%",
width = "100%")
)
pageOrthology <- fluidRow()
......@@ -459,23 +446,23 @@ pageStudies <-
pageAnnotations <- fillRow(
DTOutput("AnnotationsTable",
height = "auto")
height = "100%")
)
## --------- UI
ui <- navbarPage(id = "menu",
position = "static-top",
collapsible = TRUE,
fluid = TRUE,
fluid = FALSE,
tags$head(
includeHTML(file.path("www", "google-analytics.html")),
#tags$title("RBPbase"),
tags$script(jscode.autoHeightDT),
tags$link(href="style.css", rel="stylesheet", type="text/css"),
tags$link(href = "style.css", rel = "stylesheet", type = "text/css"),
useShinyjs(),
),
#theme = shinytheme("cerulean"),
selected = "Home",
selected = "Home", #"Home",
title = tags$a(
href = "",
div(
......@@ -506,7 +493,6 @@ ui <- navbarPage(id = "menu",
tabPanel(
"Studies",
icon = icon("search"),
div(style = "background-color: red; width: 100%; height: 100%;"),
pageStudies
),
tabPanel(
......@@ -955,8 +941,10 @@ server <- function(input, output, session) {
#})
output$FilterTable <- renderDT({
return(DT::datatable(filter$table,
rownames= FALSE,
return(DT::datatable(filter$table, #
rownames = FALSE,
height = "100%",
width = "100%",
#extensions = 'Scroller',
options = list(#deferRender = F,
#dom = 't',
......
......@@ -2,6 +2,7 @@ renderAnnotationsTable <- function(ANNO_STUDIES) {
renderDT({
return(DT::datatable(ANNO_STUDIES,
rownames = FALSE,
fillContainer = TRUE,
selection = "single",
filter = "top",
extensions = list("FixedColumns" = list(leftColumns = 1,
......@@ -10,7 +11,7 @@ renderAnnotationsTable <- function(ANNO_STUDIES) {
options = list(
#scrollY = 400,
#scroller = TRUE,
scrollX = 400,
#scrollX = 400,
#fixedColumns = TRUE,
autoWidth = TRUE,
pageLength = nrow(ANNO_STUDIES),
......@@ -21,7 +22,7 @@ renderAnnotationsTable <- function(ANNO_STUDIES) {
width = "450px"
)
)
)))
})
}
html {
height: calc(100% - 55px);
}
.note {
color: #666;
font-size: 80%;
}
.awesome-checkbox {
font-weight: 300;
}
.organismSelector .selectize-dropdown-content > .option {
background-color: white;
}
.organismSelector {
font-weight:600;
}
.organismSelector .control-label {
font-weight:600;
font-size:95%;
}
.filterStatus {
font-size: 80%;
}
.leftRBPPanel {
vertical-align: text-top;
text-align:center;
background-color: #f8f8f8;
border-right: 1px solid #CCC;
}
.selectize-control.single .selectize-input:after {
right: 2px;
top: 25%;
border-color: #999 transparent transparent transparent;
}
.RBPWindow {
}
.dataTables_length{
margin-left:20px;
margin-top:10px;
}
.filterStatus{
margin-left:2px;
margin-top:4px;
}
.container {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
.tab-content {
height: 100%;
}
.active {
height: 100%;
}
.title {
font-family: Arial, serif;
font-size:28px;
......@@ -25,7 +95,7 @@
font-size:0;
margin-bottom: 0px;
margin-top: 2px;
margin-left: 10px;
margin-left: 30px;
margin-right: 0px;
padding: 0px;
}
......@@ -35,10 +105,14 @@
font-size:0;
margin-bottom: 0px;
margin-top: 0px;
margin-left: 0px;
margin-left: 10px;
margin-right: 0px;
padding: 0px;
}
.navbar {
margin-bottom: 0px;
}
.dropdown{
display: inline;
}
......@@ -46,6 +120,7 @@
body {
font-family: Arial, serif;
font-size: 12px;
height: 100%;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment