From fc4ea4d9160f7f40175216ed6291d8942320f773 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Sun, 10 Mar 2024 12:27:08 +0100 Subject: [PATCH 01/26] Revision of control interface and addition of clade highlight function --- App.R | 897 ++++++++++++++++++++++++++++---------------------- www/mycss.css | 59 ++++ 2 files changed, 563 insertions(+), 393 deletions(-) diff --git a/App.R b/App.R index 61f4908..10e108a 100644 --- a/App.R +++ b/App.R @@ -1500,447 +1500,455 @@ ui <- dashboardPage( "input.tree_algo=='Neighbour-Joining'", fluidRow( column( - width = 4, - align = "center", + width = 1, + radioGroupButtons( + inputId = "nj_controls", + label = "", + choices = c("Layout", "Label", "Elements"), + direction = "vertical" + ) + ), + conditionalPanel( + "input.nj_controls=='Layout'" + ), + column( + width = 2, box( solidHeader = TRUE, - status = "primary", + status = "info", width = "100%", - h3(p("Layout"), style = "color:white"), - hr(), - fluidRow( - column( - width = 6, - fluidRow( - column( - width = 12, - align = "left", - h4(p("Theme"), style = "color:white; position: relative; right: -15px"), + column( + width = 12, + align = "left", + h4(p("Theme"), style = "color:white; position: relative; right: -15px"), + fluidRow( + column( + width = 12, + align = "center", + selectInput( + inputId = "nj_layout", + label = "", + choices = list( + Linear = list( + "Rectangular" = "rectangular", + "Roundrect" = "roundrect", + "Slanted" = "slanted", + "Ellipse" = "ellipse" + ), + Circular = list("Circular" = "circular", + "Inward" = "inward") + ), + selected = "rectangular", + width = "90%" + ) + ) + ), + br(), + fluidRow( + column( + width = 5, + align = "left", + checkboxInput( + "nj_ladder", + h5(p("Ladder"), style = "color:white; position: relative; bottom: 3px; right: -15px; margin-top: 22px; margin-bottom: 27px"), + value = TRUE + ) + ), + column( + width = 3, + align = "left", + checkboxInput( + "nj_rootedge_show", + h5(p("Root"), style = "color:white; position: relative; bottom: 3px; right: -5px; margin-top: 23px"), + value = FALSE + ) + ), + column( + width = 2, + align = "right", + dropMenu( + actionBttn( + "nj_rootedge_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", fluidRow( column( width = 12, align = "center", + uiOutput("nj_rootedge_length"), + br(), selectInput( - inputId = "nj_layout", - label = "", - choices = list( - Linear = list( - "Rectangular" = "rectangular", - "Roundrect" = "roundrect", - "Slanted" = "slanted", - "Ellipse" = "ellipse" - ), - Circular = list("Circular" = "circular", - "Inward" = "inward") - ), - selected = "rectangular", - width = "90%" - ) - ) - ), - fluidRow( - column( - width = 5, - align = "left", - checkboxInput( - "nj_ladder", - h5(p("Ladder"), style = "color:white; position: relative; bottom: 3px; right: -15px; margin-top: 22px"), - value = TRUE - ) - ), - column( - width = 3, - align = "left", - checkboxInput( - "nj_rootedge_show", - h5(p("Root"), style = "color:white; position: relative; bottom: 3px; right: -5px; margin-top: 23px"), - value = FALSE - ) - ), - column( - width = 2, - align = "right", - dropMenu( - actionBttn( - "nj_rootedge_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_rootedge_length"), - br(), - selectInput( - "nj_rootedge_line", - label = h5("Linetype", style = "color:white"), - choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), - selected = c(Dotted = "solid"), - width = "100px" - ) - ) - ) - ) - ) - ), - conditionalPanel( - "input.nj_layout=='circular' | input.nj_layout=='inward'", - fluidRow( - column( - width = 3, - h5(p("Adjust"), style = "color:white; position: relative; right: -15px; margin-top: 20px") - ), - column( - width = 8, - align = "right", - conditionalPanel( - "input.nj_layout=='circular'", - sliderInput( - "nj_xlim", - label = NULL, - min = -50, - max = 0, - value = -10, - width = "150px", - ticks = FALSE - ) - ), - conditionalPanel( - "input.nj_layout=='inward'", - sliderInput( - "nj_inward_xlim", - label = NULL, - min = 30, - max = 120, - value = 50, - ticks = FALSE, - width = "150px", - ) - ) + "nj_rootedge_line", + label = h5("Linetype", style = "color:white"), + choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), + selected = c(Dotted = "solid"), + width = "100px" ) ) ) ) ) ), - column( - width = 6, + conditionalPanel( + "input.nj_layout=='circular' | input.nj_layout=='inward'", fluidRow( column( - width = 12, - align = "left", - h4(p("Color"), style = "color:white; position: relative; right: -15px"), - fluidRow( - column( - width = 5, - h5(p("Lines/Text"), style = "color:white; position: relative; right: -15px; margin-top: 30px") - ), - column( - width = 7, - colorPickr( - inputId = "nj_color", - width = "90%", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) + width = 3, + h5(p("Adjust"), style = "color:white; position: relative; right: -15px; margin-top: 20px") + ), + column( + width = 8, + align = "right", + conditionalPanel( + "input.nj_layout=='circular'", + sliderInput( + "nj_xlim", + label = NULL, + min = -50, + max = 0, + value = -10, + width = "150px", + ticks = FALSE ) ), - fluidRow( - column( - width = 5, - h5(p("Background"), style = "color:white; position: relative; right: -15px; margin-top: 30px") - ), - column( - width = 7, - colorPickr( - inputId = "nj_bg", - width = "90%", - selected = "#ffffff", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) + conditionalPanel( + "input.nj_layout=='inward'", + sliderInput( + "nj_inward_xlim", + label = NULL, + min = 30, + max = 120, + value = 50, + ticks = FALSE, + width = "150px", ) ) ) - ), br() + ) ) - ), - hr(), - fluidRow( + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + h4(p("Color"), style = "color:white; position: relative; right: -15px"), + fluidRow( + column( + width = 5, + h5(p("Lines/Text"), style = "color:white; position: relative; right: -15px; margin-top: 30px") + ), + column( + width = 7, + colorPickr( + inputId = "nj_color", + width = "90%", + selected = "#000000", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" + ) + ) + ), + br(), + fluidRow( + column( + width = 5, + h5(p("Background"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: -8px") + ), + column( + width = 7, + colorPickr( + inputId = "nj_bg", + width = "90%", + selected = "#ffffff", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" + ) + ) + ), + br() + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + h4(p("Title"), style = "color:white; position: relative; right: -15px"), column( - width = 6, + width = 12, + align = "center", + textInput( + "nj_title", + label = "", + width = "100%", + placeholder = "Plot Title" + ), + br(), fluidRow( column( - width = 12, - align = "left", - h4(p("Title"), style = "color:white; position: relative; right: -15px"), - column( - width = 12, - align = "center", - textInput( - "nj_title", + width = 7, + colorPickr( + inputId = "nj_title_color", + selected = "#000000", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 5, + align = "right", + dropMenu( + actionBttn( + "nj_title_menu", label = "", - width = "100%", - placeholder = "Plot Title" + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), + placement = "top-start", + theme = "translucent", fluidRow( column( - width = 7, - colorPickr( - inputId = "nj_title_color", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 5, - align = "right", - dropMenu( - actionBttn( - "nj_title_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - numericInput( - "nj_title_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - value = 30, - min = 15, - max = 40, - step = 1, - width = "80px" - ) - ) - ) + width = 12, + align = "center", + numericInput( + "nj_title_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + value = 30, + min = 15, + max = 40, + step = 1, + width = "80px" ) ) - ), - br() + ) ) ) - ) - ), + ), + br() + ) + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + h4(p("Subtitle"), style = "color:white; position: relative; right: -15px"), column( - width = 6, + width = 12, + align = "center", + textInput( + "nj_subtitle", + label = "", + width = "100%", + placeholder = "Plot Subtitle" + ), + br(), fluidRow( column( - width = 12, - align = "left", - h4(p("Subtitle"), style = "color:white; position: relative; right: -15px"), - column( - width = 12, - align = "center", - textInput( - "nj_subtitle", + width = 7, + colorPickr( + inputId = "nj_subtitle_color", + selected = "#000000", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 5, + align = "right", + dropMenu( + actionBttn( + "nj_subtitle_menu", label = "", - width = "100%", - placeholder = "Plot Subtitle" + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), - fluidRow( - column( - width = 7, - colorPickr( - inputId = "nj_subtitle_color", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 5, - align = "right", - dropMenu( - actionBttn( - "nj_subtitle_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - numericInput( - "nj_subtitle_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - value = 20, - min = 15, - max = 40, - step = 1, - width = "80px" - ) - ) - ) + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + numericInput( + "nj_subtitle_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + value = 20, + min = 15, + max = 40, + step = 1, + width = "80px" ) ) - ), - br() + ) ) ) - ) + ), + br() ) - ), - hr(), - fluidRow( + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + h4(p("Tree scale"), style = "color:white; position: relative; right: -15px"), column( - width = 6, + width = 12, fluidRow( column( - width = 12, + width = 7, align = "left", - h4(p("Tree scale"), style = "color:white; position: relative; right: -15px"), - column( - width = 12, + checkboxInput( + "nj_treescale_show", + h5(p("Show "), style = "color:white; position: relative; bottom: -7px; right: 0px"), + value = TRUE + ), + br() + ), + column( + width = 5, + align = "right", + dropMenu( + actionBttn( + "nj_treescale_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", fluidRow( column( - width = 7, - align = "left", - checkboxInput( - "nj_treescale_show", - h5(p("Show "), style = "color:white; position: relative; bottom: -7px; right: 0px"), - value = TRUE - ), - br() - ), - column( - width = 5, - align = "right", - dropMenu( - actionBttn( - "nj_treescale_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_treescale_width"), - br(), - uiOutput("nj_treescale_x"), - br(), - uiOutput("nj_treescale_y") - ) - ) - ) + width = 12, + align = "center", + uiOutput("nj_treescale_width"), + br(), + uiOutput("nj_treescale_x"), + br(), + uiOutput("nj_treescale_y") ) ) ) ) ) - ), + ) + ), + column( + width = 12, + align = "left", + h4(p("Legend"), style = "color:white; position: relative; right: -15px; margin-top: -3px; margin-bottom: -5px"), column( - width = 6, + width = 12, + align = "center", fluidRow( column( - width = 12, + width = 7, align = "left", - h4(p("Legend"), style = "color:white; position: relative; right: -15px"), - column( - width = 12, - align = "center", + prettyRadioButtons( + "nj_legend_orientation", + "", + choices = c(Horizontal = "horizontal", + Vertical = "vertical"), + selected = c(Horizontal = "horizontal"), + inline = FALSE + ) + ), + column( + width = 5, + align = "right", + dropMenu( + actionBttn( + "nj_legend_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", fluidRow( column( - width = 7, - align = "left", - prettyRadioButtons( - "nj_legend_orientation", - "", - choices = c(Horizontal = "horizontal", - Vertical = "vertical"), - selected = c(Horizontal = "horizontal"), - inline = FALSE - ) - ), - column( - width = 5, - align = "right", - dropMenu( - actionBttn( - "nj_legend_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - numericInput( - "nj_legend_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - value = 10, - min = 5, - max = 25, - step = 1, - width = "80px" - ), - br(), - sliderInput( - "nj_legend_x", - label = h5("X Position", style = "color:white; margin-bottom: 0px"), - value = 0.1, - min = -0.9, - max = 1.9, - width = "150px", - ticks = FALSE - ), - br(), - sliderInput( - "nj_legend_y", - label = h5("Y Position", style = "color:white; margin-bottom: 0px"), - value = 1, - min = -1, - max = 1, - width = "150px", - ticks = FALSE - ) - ) - ) + width = 12, + align = "center", + numericInput( + "nj_legend_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + value = 10, + min = 5, + max = 25, + step = 1, + width = "80px" + ), + br(), + sliderInput( + "nj_legend_x", + label = h5("X Position", style = "color:white; margin-bottom: 0px"), + value = 0.1, + min = -0.9, + max = 1.9, + width = "150px", + ticks = FALSE + ), + br(), + sliderInput( + "nj_legend_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + value = 1, + min = -1, + max = 1, + width = "150px", + ticks = FALSE ) ) ) @@ -1950,7 +1958,11 @@ ui <- dashboardPage( ) ) ) - ), + ) + ), + fluidRow( + br(), br(), br(), br(), br(), br(), br(), + br(), br(), br(), br(), br(), br(), br(), column( width = 4, align = "center", @@ -3474,6 +3486,50 @@ ui <- dashboardPage( ) ) ) + ), + column( + width = 6, + fluidRow( + column( + width = 12, + align = "left", + fluidRow( + column( + width = 6, + h4(p("Clade Highlight"), style = "color:white; position: relative; right: -15px") + ) + ), + fluidRow( + column( + width = 5, + checkboxInput( + "nj_clades_show", + "Show" + ) + ) + ), + fluidRow( + column( + width = 12, + materialSwitch( + "nj_nodelabel_show", + "Show Nodes", + value = FALSE + ) + ) + ), + fluidRow( + column( + width = 5, + h5(p("Parent node"), style = "color:white; position: relative; right: -20px; margin-top: 30px") + ), + column( + width = 7, + uiOutput("nj_parentnode") + ) + ) + ) + ) ) ), conditionalPanel( @@ -10089,6 +10145,39 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- + # Clade Highlights + output$nj_parentnode <- renderUI({ + if(!is.null(Vis$nj_parentnodes)) { + pickerInput( + "nj_parentnode", + label = "", + choices = Vis$nj_parentnodes, + multiple = TRUE, + options = list( + `live-search` = TRUE, + `actions-box` = TRUE, + size = 10, + style = "background-color: white; border-radius: 5px;" + ), + width = "90%" + ) + } else { + pickerInput( + "nj_parentnode", + label = "", + choices = c(), + multiple = TRUE, + options = list( + `live-search` = TRUE, + `actions-box` = TRUE, + size = 10, + style = "background-color: white; border-radius: 5px;" + ), + width = "90%" + ) + } + }) + # Branch label size output$nj_branch_size <- renderUI( numericInput( @@ -11212,7 +11301,8 @@ server <- function(input, output, session) { ggtree(Vis$nj, color = input$nj_color, layout = layout_nj(), - ladderize = input$nj_ladder) %<+% Vis$meta_nj + + ladderize = input$nj_ladder, + alpha = nj_alpha()) %<+% Vis$meta_nj + nj_tiplab() + limit() + inward() + @@ -11222,6 +11312,8 @@ server <- function(input, output, session) { tippoint() + clip_label() + nj_rootedge() + + nj_nodelabel() + + nj_clades() + ggtitle(label = input$nj_title, subtitle = input$nj_subtitle) + theme_tree(bgcolor = input$nj_bg) + @@ -11257,10 +11349,6 @@ server <- function(input, output, session) { nj_fruit5() + nj_gradient5() - # Extract plot meta data - Vis$xrange_nj <- tree$data$x - Vis$yrange_nj <- tree$data$y - if(input$nj_heatmap_show == TRUE & length(input$nj_heatmap_select) > 0) { tree <- gheatmap(tree, data = select(Vis$meta_nj, input$nj_heatmap_select), @@ -11282,6 +11370,28 @@ server <- function(input, output, session) { theme(plot.background = element_rect(fill = input$nj_bg, color = input$nj_bg)) }) + # Clade Highlight + nj_clades <- reactive({ + if(!is.null(input$nj_parentnode)) { + if(input$nj_clades_show == TRUE & (!length(input$nj_parentnode) == 0)) { + geom_highlight(node = input$nj_parentnode) + } else {NULL} + } + }) + + # Nodelabel + nj_nodelabel <- reactive({ + if(input$nj_nodelabel_show == TRUE) { + geom_nodelab(aes(label = node), color = "#29303A", size = nj_tiplab_size() + 1, hjust = 0.7) + } else {NULL} + }) + + nj_alpha <- reactive({ + if(input$nj_nodelabel_show == TRUE) { + 0.2 + } else {1} + }) + # Legend Position nj_legend_pos <- reactive({ if(!is.null(input$nj_legend_x) & !is.null(input$nj_legend_y)) { @@ -11938,10 +12048,6 @@ server <- function(input, output, session) { upgma_fruit5() + upgma_gradient5() - # Extract plot meta data - Vis$xrange_upgma <- tree$data$x - Vis$yrange_upgma <- tree$data$y - if(input$upgma_heatmap_show == TRUE & length(input$upgma_heatmap_select) > 0) { tree <- gheatmap(tree, data = select(Vis$meta_upgma, input$upgma_heatmap_select), @@ -13241,9 +13347,14 @@ server <- function(input, output, session) { Vis$branch_size_nj <- 3.5 } + Vis$nj_tree <- ggtree(Vis$nj) + # Get upper and lower end of x range - Vis$nj_max_x <- max(ggtree(Vis$nj)$data$x) - Vis$nj_min_x <- min(ggtree(Vis$nj)$data$x) + Vis$nj_max_x <- max(Vis$nj_tree$data$x) + Vis$nj_min_x <- min(Vis$nj_tree$data$x) + + # Get parent node numbers + Vis$nj_parentnodes <- Vis$nj_tree$data$parent # Update visualization control inputs if(!is.null(input$nj_tiplab_size)) { diff --git a/www/mycss.css b/www/mycss.css index 17a790b..3219d1b 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -12,10 +12,45 @@ animation: none; } +.box.box-solid.box-info{ + background: #282F38; + margin-top: 20px; + position: relative; + left: 30px; +} + +.box.box-solid.box-info, .box.box-info { + border-color: #ffffff; + border-left-color: #ffffff; + border-right-color: #ffffff; + border-top-color: #ffffff; + border-radius: 7px; +} + +#nj_layout_ctrl, #nj_label_ctrl, #nj_elements_ctrl { + width: 134px; + margin-left: 25px; + margin-bottom: 5px; + margin-top: 10px; + height: 40px; + text-align-last: justify; + font-size: larger; +} + +#nj_layout_ctrl { + margin-top: 20px !important; +} + + + h1, h2, h3, h4, h5, p, body { font-family: 'Liberation Sans', sans-serif; } +#nj_field img { + border-radius: 10px; +} + label { color: white; } @@ -535,6 +570,10 @@ input.form-control.pickr-color { margin-top: -10px; } +#nj_subtitle_color, #nj_title_color, #nj_bg { + margin-bottom: 11px; +} + #nj_branch_label_menu-template > div > div:nth-child(2) > div:nth-child(2) { margin-top: 26px; margin-bottom: -10px; @@ -573,6 +612,26 @@ input.form-control.pickr-color { margin-bottom: 30px } +#nj_controls { + margin-left: 25px; + margin-top: 35px; +} + +#nj_controls > div > div:nth-child(1) { + height: 50px; + width: 100px; +} + +#nj_controls > div > div:nth-child(2) { + height: 50px; + width: 100px; +} + +#nj_controls > div > div:nth-child(3) { + height: 50px; + width: 100px; +} + button#nj_labeltext_menu { height: 34px; background: #20E6E5; From dd46f9a6844934d64c7c3022fb73332b7839ad97 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Mon, 11 Mar 2024 17:01:55 +0100 Subject: [PATCH 02/26] Transfer old visualization UI to new --- App.R | 3401 +++++++++++++++++++++++++++++---------------------------- 1 file changed, 1702 insertions(+), 1699 deletions(-) diff --git a/App.R b/App.R index 10e108a..1451c53 100644 --- a/App.R +++ b/App.R @@ -1509,225 +1509,65 @@ ui <- dashboardPage( ) ), conditionalPanel( - "input.nj_controls=='Layout'" - ), - column( - width = 2, - box( - solidHeader = TRUE, - status = "info", - width = "100%", - column( - width = 12, - align = "left", - h4(p("Theme"), style = "color:white; position: relative; right: -15px"), - fluidRow( - column( - width = 12, - align = "center", - selectInput( - inputId = "nj_layout", - label = "", - choices = list( - Linear = list( - "Rectangular" = "rectangular", - "Roundrect" = "roundrect", - "Slanted" = "slanted", - "Ellipse" = "ellipse" - ), - Circular = list("Circular" = "circular", - "Inward" = "inward") - ), - selected = "rectangular", - width = "90%" - ) - ) - ), - br(), - fluidRow( - column( - width = 5, - align = "left", - checkboxInput( - "nj_ladder", - h5(p("Ladder"), style = "color:white; position: relative; bottom: 3px; right: -15px; margin-top: 22px; margin-bottom: 27px"), - value = TRUE - ) - ), - column( - width = 3, - align = "left", - checkboxInput( - "nj_rootedge_show", - h5(p("Root"), style = "color:white; position: relative; bottom: 3px; right: -5px; margin-top: 23px"), - value = FALSE - ) - ), - column( - width = 2, - align = "right", - dropMenu( - actionBttn( - "nj_rootedge_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_rootedge_length"), - br(), - selectInput( - "nj_rootedge_line", - label = h5("Linetype", style = "color:white"), - choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), - selected = c(Dotted = "solid"), - width = "100px" - ) - ) - ) - ) - ) - ), - conditionalPanel( - "input.nj_layout=='circular' | input.nj_layout=='inward'", + "input.nj_controls=='Layout'", + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + h4(p("Theme"), style = "color:white; position: relative; right: -15px"), fluidRow( column( - width = 3, - h5(p("Adjust"), style = "color:white; position: relative; right: -15px; margin-top: 20px") - ), - column( - width = 8, - align = "right", - conditionalPanel( - "input.nj_layout=='circular'", - sliderInput( - "nj_xlim", - label = NULL, - min = -50, - max = 0, - value = -10, - width = "150px", - ticks = FALSE - ) - ), - conditionalPanel( - "input.nj_layout=='inward'", - sliderInput( - "nj_inward_xlim", - label = NULL, - min = 30, - max = 120, - value = 50, - ticks = FALSE, - width = "150px", - ) + width = 12, + align = "center", + selectInput( + inputId = "nj_layout", + label = "", + choices = list( + Linear = list( + "Rectangular" = "rectangular", + "Roundrect" = "roundrect", + "Slanted" = "slanted", + "Ellipse" = "ellipse" + ), + Circular = list("Circular" = "circular", + "Inward" = "inward") + ), + selected = "rectangular", + width = "90%" ) ) - ) - ) - ) - ) - ), - column( - width = 2, - box( - solidHeader = TRUE, - status = "info", - width = "100%", - column( - width = 12, - align = "left", - h4(p("Color"), style = "color:white; position: relative; right: -15px"), - fluidRow( - column( - width = 5, - h5(p("Lines/Text"), style = "color:white; position: relative; right: -15px; margin-top: 30px") - ), - column( - width = 7, - colorPickr( - inputId = "nj_color", - width = "90%", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ) - ), - br(), - fluidRow( - column( - width = 5, - h5(p("Background"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: -8px") - ), - column( - width = 7, - colorPickr( - inputId = "nj_bg", - width = "90%", - selected = "#ffffff", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ) - ), - br() - ) - ) - ), - column( - width = 2, - box( - solidHeader = TRUE, - status = "info", - width = "100%", - column( - width = 12, - align = "left", - h4(p("Title"), style = "color:white; position: relative; right: -15px"), - column( - width = 12, - align = "center", - textInput( - "nj_title", - label = "", - width = "100%", - placeholder = "Plot Title" ), br(), fluidRow( column( - width = 7, - colorPickr( - inputId = "nj_title_color", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + width = 5, + align = "left", + checkboxInput( + "nj_ladder", + h5(p("Ladder"), style = "color:white; position: relative; bottom: 3px; right: -15px; margin-top: 22px; margin-bottom: 27px"), + value = TRUE ) ), column( - width = 5, + width = 3, + align = "left", + checkboxInput( + "nj_rootedge_show", + h5(p("Root"), style = "color:white; position: relative; bottom: 3px; right: -5px; margin-top: 23px"), + value = FALSE + ) + ), + column( + width = 2, align = "right", dropMenu( actionBttn( - "nj_title_menu", + "nj_rootedge_menu", label = "", color = "default", size = "sm", @@ -1740,215 +1580,375 @@ ui <- dashboardPage( column( width = 12, align = "center", - numericInput( - "nj_title_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - value = 30, - min = 15, - max = 40, - step = 1, - width = "80px" + uiOutput("nj_rootedge_length"), + br(), + selectInput( + "nj_rootedge_line", + label = h5("Linetype", style = "color:white"), + choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), + selected = c(Dotted = "solid"), + width = "100px" ) ) ) ) ) ), - br() + conditionalPanel( + "input.nj_layout=='circular' | input.nj_layout=='inward'", + fluidRow( + column( + width = 3, + h5(p("Adjust"), style = "color:white; position: relative; right: -15px; margin-top: 20px") + ), + column( + width = 8, + align = "right", + conditionalPanel( + "input.nj_layout=='circular'", + sliderInput( + "nj_xlim", + label = NULL, + min = -50, + max = 0, + value = -10, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.nj_layout=='inward'", + sliderInput( + "nj_inward_xlim", + label = NULL, + min = 30, + max = 120, + value = 50, + ticks = FALSE, + width = "150px", + ) + ) + ) + ) + ) ) ) - ) - ), - column( - width = 2, - box( - solidHeader = TRUE, - status = "info", - width = "100%", - column( - width = 12, - align = "left", - h4(p("Subtitle"), style = "color:white; position: relative; right: -15px"), + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( width = 12, - align = "center", - textInput( - "nj_subtitle", - label = "", - width = "100%", - placeholder = "Plot Subtitle" - ), - br(), + align = "left", + h4(p("Color"), style = "color:white; position: relative; right: -15px"), fluidRow( + column( + width = 5, + h5(p("Lines/Text"), style = "color:white; position: relative; right: -15px; margin-top: 30px") + ), column( width = 7, colorPickr( - inputId = "nj_subtitle_color", + inputId = "nj_color", + width = "90%", selected = "#000000", label = "", update = "changestop", interaction = list(clear = FALSE, save = FALSE), - position = "right-start", - width = "100%" + position = "right-start" ) - ), + ) + ), + br(), + fluidRow( column( width = 5, - align = "right", - dropMenu( - actionBttn( - "nj_subtitle_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - numericInput( - "nj_subtitle_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - value = 20, - min = 15, - max = 40, - step = 1, - width = "80px" - ) - ) - ) + h5(p("Background"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: -8px") + ), + column( + width = 7, + colorPickr( + inputId = "nj_bg", + width = "90%", + selected = "#ffffff", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" ) ) ), br() ) ) - ) - ), - column( - width = 2, - box( - solidHeader = TRUE, - status = "info", - width = "100%", - column( - width = 12, - align = "left", - h4(p("Tree scale"), style = "color:white; position: relative; right: -15px"), + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( width = 12, - fluidRow( - column( - width = 7, - align = "left", - checkboxInput( - "nj_treescale_show", - h5(p("Show "), style = "color:white; position: relative; bottom: -7px; right: 0px"), - value = TRUE - ), - br() + align = "left", + h4(p("Title"), style = "color:white; position: relative; right: -15px"), + column( + width = 12, + align = "center", + textInput( + "nj_title", + label = "", + width = "100%", + placeholder = "Plot Title" ), - column( - width = 5, - align = "right", - dropMenu( - actionBttn( - "nj_treescale_menu", + br(), + fluidRow( + column( + width = 7, + colorPickr( + inputId = "nj_title_color", + selected = "#000000", label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_treescale_width"), - br(), - uiOutput("nj_treescale_x"), - br(), - uiOutput("nj_treescale_y") + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 5, + align = "right", + dropMenu( + actionBttn( + "nj_title_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + numericInput( + "nj_title_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + value = 30, + min = 15, + max = 40, + step = 1, + width = "80px" + ) + ) ) ) ) - ) + ), + br() ) ) - ), - column( - width = 12, - align = "left", - h4(p("Legend"), style = "color:white; position: relative; right: -15px; margin-top: -3px; margin-bottom: -5px"), + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( width = 12, - align = "center", - fluidRow( - column( - width = 7, - align = "left", - prettyRadioButtons( - "nj_legend_orientation", - "", - choices = c(Horizontal = "horizontal", - Vertical = "vertical"), - selected = c(Horizontal = "horizontal"), - inline = FALSE - ) + align = "left", + h4(p("Subtitle"), style = "color:white; position: relative; right: -15px"), + column( + width = 12, + align = "center", + textInput( + "nj_subtitle", + label = "", + width = "100%", + placeholder = "Plot Subtitle" ), - column( - width = 5, - align = "right", - dropMenu( - actionBttn( - "nj_legend_menu", + br(), + fluidRow( + column( + width = 7, + colorPickr( + inputId = "nj_subtitle_color", + selected = "#000000", label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 5, + align = "right", + dropMenu( + actionBttn( + "nj_subtitle_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + numericInput( + "nj_subtitle_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + value = 20, + min = 15, + max = 40, + step = 1, + width = "80px" + ) + ) + ) + ) + ) + ), + br() + ) + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + h4(p("Tree scale"), style = "color:white; position: relative; right: -15px"), + column( + width = 12, + fluidRow( + column( + width = 7, + align = "left", + checkboxInput( + "nj_treescale_show", + h5(p("Show "), style = "color:white; position: relative; bottom: -7px; right: 0px"), + value = TRUE ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - numericInput( - "nj_legend_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - value = 10, - min = 5, - max = 25, - step = 1, - width = "80px" - ), - br(), - sliderInput( - "nj_legend_x", - label = h5("X Position", style = "color:white; margin-bottom: 0px"), - value = 0.1, - min = -0.9, - max = 1.9, - width = "150px", - ticks = FALSE - ), - br(), - sliderInput( - "nj_legend_y", - label = h5("Y Position", style = "color:white; margin-bottom: 0px"), - value = 1, - min = -1, - max = 1, - width = "150px", - ticks = FALSE + br() + ), + column( + width = 5, + align = "right", + dropMenu( + actionBttn( + "nj_treescale_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + uiOutput("nj_treescale_width"), + br(), + uiOutput("nj_treescale_x"), + br(), + uiOutput("nj_treescale_y") + ) + ) + ) + ) + ) + ) + ), + column( + width = 12, + align = "left", + h4(p("Legend"), style = "color:white; position: relative; right: -15px; margin-top: -3px; margin-bottom: -5px"), + column( + width = 12, + align = "center", + fluidRow( + column( + width = 7, + align = "left", + prettyRadioButtons( + "nj_legend_orientation", + "", + choices = c(Horizontal = "horizontal", + Vertical = "vertical"), + selected = c(Horizontal = "horizontal"), + inline = FALSE + ) + ), + column( + width = 5, + align = "right", + dropMenu( + actionBttn( + "nj_legend_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + numericInput( + "nj_legend_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + value = 10, + min = 5, + max = 25, + step = 1, + width = "80px" + ), + br(), + sliderInput( + "nj_legend_x", + label = h5("X Position", style = "color:white; margin-bottom: 0px"), + value = 0.1, + min = -0.9, + max = 1.9, + width = "150px", + ticks = FALSE + ), + br(), + sliderInput( + "nj_legend_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + value = 1, + min = -1, + max = 1, + width = "150px", + ticks = FALSE + ) ) ) ) @@ -1958,46 +1958,240 @@ ui <- dashboardPage( ) ) ) - ) - ), - fluidRow( - br(), br(), br(), br(), br(), br(), br(), - br(), br(), br(), br(), br(), br(), br(), - column( - width = 4, - align = "center", - box( - solidHeader = TRUE, - status = "primary", - width = "100%", - h3(p("Label"), style = "color:white"), - hr(), - fluidRow( + ), + conditionalPanel( + "input.nj_controls=='Label'", + column( + width = 6, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( width = 12, - align = "left", - h4(p("Tips"), style = "color:white; position: relative; right: -15px"), + fluidRow( + column( + width = 12, + align = "left", + h4(p("Tips"), style = "color:white; position: relative; right: -15px"), + fluidRow( + column( + width = 4, + align = "left", + checkboxInput( + "nj_tiplab_show", + h5(p("Show"), style = "color:white; position: relative; right: -17px; bottom: -7px"), + value = TRUE + ) + ), + column( + width = 4, + align = "center", + uiOutput("nj_tiplab") + ), + column( + width = 3, + align = "right", + dropMenu( + actionBttn( + "nj_labeltext_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 6, + align = "center", + sliderInput( + "nj_tiplab_alpha", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE + ), + br(), + conditionalPanel( + "!(input.nj_layout=='inward'|input.nj_layout=='circular')", + sliderInput( + inputId = "nj_tiplab_nudge_x", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + step = 0.05, + value = 0, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.nj_layout=='circular'", + sliderInput( + inputId = "nj_tiplab_position", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + step = 0.05, + value = -0.05, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.nj_layout=='inward'", + sliderInput( + inputId = "nj_tiplab_position_inw", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + step = 0.05, + value = 1.1, + width = "150px", + ticks = FALSE + ) + ), + br(), + sliderInput( + inputId = "nj_tiplab_angle", + label = h5("Angle", style = "color:white; margin-bottom: 0px"), + min = -90, + max = 90, + value = 0, + ticks = FALSE, + width = "150px", + ) + ), + column( + width = 6, + align = "center", + uiOutput("nj_tiplab_size"), + br(), + selectInput( + "nj_tiplab_fontface", + label = h5("Fontface", style = "color:white; margin-bottom: 5px; margin-top: 16px"), + width = "250px", + choices = c(Plain = "plain", Bold = "bold", Italic = "italic", `B & I` = "bold.italic") + ) + ) + ) + ) + ) + ) + ) + ), fluidRow( column( width = 4, align = "left", checkboxInput( - "nj_tiplab_show", - h5(p("Show"), style = "color:white; position: relative; right: -17px; bottom: -7px"), - value = TRUE + "nj_align", + h5(p("Align labels"), style = "color:white; position: relative; bottom: -10px; right: -15px"), + value = FALSE + ) + ), + column( + width = 1, + HTML( + paste( + tags$span(style='color: white; font-size: 14px; position: relative; bottom: -28px; margin-left: 0px ', 'Width') + ) + ) + ), + column( + width = 3, + align = "left", + numericInput( + "nj_tiplab_linesize", + "", + value = 0.5, + min = 0.1, + max = 3, + step = 0.1, + width = "80px" + ) + ), + column( + width = 3, + selectInput( + "nj_tiplab_linetype", + "", + choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), + selected = c(Dotted = "dotted") ) + ) + ), + fluidRow( + column( + width = 4, + align = "left", + h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 30px") ), column( width = 4, - align = "center", - uiOutput("nj_tiplab") + conditionalPanel( + "input.nj_mapping_show==false", + colorPickr( + inputId = "nj_tiplab_color", + width = "100%", + selected = "#000000", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" + ) + ), + conditionalPanel( + "input.nj_mapping_show==true", + uiOutput("nj_color_mapping") + ) + ), + column( + width = 4, + align = "left", + checkboxInput( + "nj_mapping_show", + label = h5("Add variable", style = "color:white; font-size: 14px; position: relative; bottom: -10px;"), + value = FALSE + ) + ) + ), + fluidRow( + column( + width = 4, + align = "left", + br(), + checkboxInput( + "nj_geom", + h5(p("Panel"), style = "color:white; position: relative; bottom: 10px; right: -17px"), + value = FALSE + ) + ), + column( + width = 4, + colorPickr( + inputId = "nj_tiplab_fill", + width = "100%", + selected = "#84D9A0", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" + ) ), column( width = 3, align = "right", dropMenu( actionBttn( - "nj_labeltext_menu", + "nj_labelformat_menu", label = "", color = "default", size = "sm", @@ -2008,78 +2202,18 @@ ui <- dashboardPage( theme = "translucent", fluidRow( column( - width = 6, + width = 12, align = "center", - sliderInput( - "nj_tiplab_alpha", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ), - br(), - conditionalPanel( - "!(input.nj_layout=='inward'|input.nj_layout=='circular')", - sliderInput( - inputId = "nj_tiplab_nudge_x", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step = 0.05, - value = 0, - width = "150px", - ticks = FALSE - ) - ), - conditionalPanel( - "input.nj_layout=='circular'", - sliderInput( - inputId = "nj_tiplab_position", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step = 0.05, - value = -0.05, - width = "150px", - ticks = FALSE - ) - ), - conditionalPanel( - "input.nj_layout=='inward'", - sliderInput( - inputId = "nj_tiplab_position_inw", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step = 0.05, - value = 1.1, - width = "150px", - ticks = FALSE - ) - ), + uiOutput("nj_tiplab_padding"), br(), sliderInput( - inputId = "nj_tiplab_angle", - label = h5("Angle", style = "color:white; margin-bottom: 0px"), - min = -90, - max = 90, - value = 0, - ticks = FALSE, + inputId = "nj_tiplab_labelradius", + label = h5("Smooth edge", style = "color:white; margin-bottom: 0px"), + min = 0, + max = 0.5, + value = 0.2, width = "150px", - ) - ), - column( - width = 6, - align = "center", - uiOutput("nj_tiplab_size"), - br(), - selectInput( - "nj_tiplab_fontface", - label = h5("Fontface", style = "color:white; margin-bottom: 5px; margin-top: 16px"), - width = "250px", - choices = c(Plain = "plain", Bold = "bold", Italic = "italic", `B & I` = "bold.italic") + ticks = FALSE ) ) ) @@ -2087,321 +2221,189 @@ ui <- dashboardPage( ) ) ) - ), - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "nj_align", - h5(p("Align labels"), style = "color:white; position: relative; bottom: -10px; right: -15px"), - value = FALSE - ) - ), - column( - width = 1, - HTML( - paste( - tags$span(style='color: white; font-size: 14px; position: relative; bottom: -28px; margin-left: 0px ', 'Width') - ) - ) - ), - column( - width = 3, - align = "left", - numericInput( - "nj_tiplab_linesize", - "", - value = 0.5, - min = 0.1, - max = 3, - step = 0.1, - width = "80px" - ) - ), + ) + ), + column( + width = 4, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( - width = 3, - selectInput( - "nj_tiplab_linetype", - "", - choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), - selected = c(Dotted = "dotted") - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 30px") - ), - column( - width = 4, - conditionalPanel( - "input.nj_mapping_show==false", - colorPickr( - inputId = "nj_tiplab_color", - width = "100%", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" + width = 12, + fluidRow( + column( + width = 12, + align = "left", + h4(p("Branches"), style = "color:white; position: relative; right: -15px"), + fluidRow( + column( + width = 4, + align = "left", + checkboxInput( + "nj_show_branch_label", + h5(p("Show"), style = "color:white; position: relative; bottom: -7px; right: -17px"), + value = FALSE + ) + ), + column( + width = 4, + align = "center", + uiOutput("nj_branch_label") + ), + column( + width = 3, + align = "right", + dropMenu( + actionBttn( + "nj_branch_label_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 6, + align = "center", + sliderInput( + "nj_branchlab_alpha", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 0.65, + width = "250px", + ticks = FALSE + ), + br(), + sliderInput( + inputId = "nj_branch_x", + label = h5("X Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + value = 0, + width = "250px", + ticks = FALSE + ), + br(), + sliderInput( + inputId = "nj_branch_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + value = 0, + width = "250px", + ticks = FALSE + ) + ), + column( + width = 6, + align = "center", + uiOutput("nj_branch_size"), + selectInput( + "nj_branchlab_fontface", + label = h5("Fontface", style = "color:white; margin-bottom: 0px;"), + width = "250px", + choices = c(Plain = "plain", Bold = "bold", Italic = "italic", `B & I` = "bold.italic") + ), + br(), + sliderInput( + "nj_branch_labelradius", + label = h5("Smooth edge", style = "color:white; margin-bottom: 0px"), + min = 0, + max = 0.5, + value = 0.5, + width = "250px", + ticks = FALSE + ) + ) + ) + ) + ) + ) ) ), - conditionalPanel( - "input.nj_mapping_show==true", - uiOutput("nj_color_mapping") - ) - ), - column( - width = 4, - align = "left", - checkboxInput( - "nj_mapping_show", - label = h5("Add variable", style = "color:white; font-size: 14px; position: relative; bottom: -10px;"), - value = FALSE - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - br(), - checkboxInput( - "nj_geom", - h5(p("Panel"), style = "color:white; position: relative; bottom: 10px; right: -17px"), - value = FALSE - ) - ), - column( - width = 4, - colorPickr( - inputId = "nj_tiplab_fill", - width = "100%", - selected = "#84D9A0", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ), - column( - width = 3, - align = "right", - dropMenu( - actionBttn( - "nj_labelformat_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") + fluidRow( + column( + width = 4, + align = "left", + h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 30px") ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_tiplab_padding"), - br(), - sliderInput( - inputId = "nj_tiplab_labelradius", - label = h5("Smooth edge", style = "color:white; margin-bottom: 0px"), - min = 0, - max = 0.5, - value = 0.2, - width = "150px", - ticks = FALSE - ) + column( + width = 4, + colorPickr( + inputId = "nj_branch_label_color", + width = "100%", + selected = "#FFB7B7", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" ) ) ) ) - ), - hr(), - fluidRow( + ) + ) + ), + conditionalPanel( + "input.nj_controls=='Elements'", + column( + width = 3, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( width = 12, align = "left", - h4(p("Branches"), style = "color:white; position: relative; right: -15px"), + h4(p("Tip points"), style = "color:white; position: relative; right: -15px"), fluidRow( column( width = 4, align = "left", checkboxInput( - "nj_show_branch_label", - h5(p("Show"), style = "color:white; position: relative; bottom: -7px; right: -17px"), + "nj_tippoint_show", + h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), value = FALSE ) ), column( - width = 4, - align = "center", - uiOutput("nj_branch_label") - ), - column( - width = 3, - align = "right", + width = 2, + align = "left", dropMenu( actionBttn( - "nj_branch_label_menu", + "nj_tippoint_menu", label = "", color = "default", size = "sm", style = "material-flat", icon = icon("sliders") ), - placement = "top-start", + placement = "top-end", theme = "translucent", fluidRow( column( - width = 6, + width = 12, align = "center", sliderInput( - "nj_branchlab_alpha", + "nj_tippoint_alpha", label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + value = 0.5, min = 0.1, max = 1, - value = 0.65, - width = "250px", - ticks = FALSE - ), - br(), - sliderInput( - inputId = "nj_branch_x", - label = h5("X Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = 0, - width = "250px", - ticks = FALSE - ), - br(), - sliderInput( - inputId = "nj_branch_y", - label = h5("Y Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = 0, - width = "250px", + width = "150px", ticks = FALSE - ) - ), - column( - width = 6, - align = "center", - uiOutput("nj_branch_size"), - selectInput( - "nj_branchlab_fontface", - label = h5("Fontface", style = "color:white; margin-bottom: 0px;"), - width = "250px", - choices = c(Plain = "plain", Bold = "bold", Italic = "italic", `B & I` = "bold.italic") - ), + ), br(), - sliderInput( - "nj_branch_labelradius", - label = h5("Smooth edge", style = "color:white; margin-bottom: 0px"), - min = 0, - max = 0.5, - value = 0.5, - width = "250px", - ticks = FALSE - ) + uiOutput("nj_tippoint_size") ) ) - ) - ) - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 30px") - ), - column( - width = 4, - colorPickr( - inputId = "nj_branch_label_color", - width = "100%", - selected = "#FFB7B7", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ) - ), - br(), br(), br(), - conditionalPanel( - "input.nj_layout=='inward'|input.nj_layout=='circular'", - br(), br() - ) - ) - ), - column( - width = 4, - align = "center", - box( - solidHeader = TRUE, - status = "primary", - width = "100%", - h3(p("Elements"), style = "color:white"), - hr(), - fluidRow( - column( - width = 12, - align = "left", - h4(p("Tip points"), style = "color:white; position: relative; right: -15px"), - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "nj_tippoint_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 2, - align = "left", - dropMenu( - actionBttn( - "nj_tippoint_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_tippoint_alpha", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - value = 0.5, - min = 0.1, - max = 1, - width = "150px", - ticks = FALSE - ), - br(), - uiOutput("nj_tippoint_size") - ) - ) - ) + ) ) ), fluidRow( @@ -2485,1059 +2487,1060 @@ ui <- dashboardPage( ) ) ) - ), - hr(), - fluidRow( + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( - width = 6, + width = 12, + align = "left", + h4(p("Node points"), style = "color:white; position: relative; right: -15px"), fluidRow( column( - width = 12, + width = 5, align = "left", - h4(p("Node points"), style = "color:white; position: relative; right: -15px"), - fluidRow( - column( - width = 5, - align = "left", - checkboxInput( - "nj_nodepoint_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_nodepoint_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_nodepoint_alpha", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - value = 1, - min = 0.1, - max = 1, - width = "150px", - ticks = FALSE - ), - br(), - uiOutput("nj_nodepoint_size") - ) - ) - ) - ) - ), - fluidRow( - column( - width = 5, - h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 30px") + checkboxInput( + "nj_nodepoint_show", + h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ), + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "nj_nodepoint_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), - column( - width = 7, - align = "center", - colorPickr( - inputId = "nj_nodepoint_color", - width = "100%", - selected = "#3A4657", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" + placement = "top-end", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_nodepoint_alpha", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + value = 1, + min = 0.1, + max = 1, + width = "150px", + ticks = FALSE + ), + br(), + uiOutput("nj_nodepoint_size") ) ) - ), - fluidRow( - column( - width = 5, - h5(p("Shape"), style = "color:white; position: relative; right: -20px; margin-top: 30px") - ), - column( - width = 7, - align = "center", - selectInput( - "nj_nodepoint_shape", - "", - choices = c( - Circle = "circle", - Square = "square", - Diamond = "diamond", - Triangle = "triangle", - Cross = "cross", - Asterisk = "asterisk" - ) - ) + ) + ) + ), + fluidRow( + column( + width = 5, + h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 30px") + ), + column( + width = 7, + align = "center", + colorPickr( + inputId = "nj_nodepoint_color", + width = "100%", + selected = "#3A4657", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" + ) + ) + ), + fluidRow( + column( + width = 5, + h5(p("Shape"), style = "color:white; position: relative; right: -20px; margin-top: 30px") + ), + column( + width = 7, + align = "center", + selectInput( + "nj_nodepoint_shape", + "", + choices = c( + Circle = "circle", + Square = "square", + Diamond = "diamond", + Triangle = "triangle", + Cross = "cross", + Asterisk = "asterisk" ) ) ) ) - ), + ) + ) + ), + column( + width = 3, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( - width = 6, + width = 12, + align = "left", fluidRow( column( - width = 12, - align = "left", - fluidRow( - column( - width = 6, - h4(p("Tiles"), style = "color:white; position: relative; right: -15px") - ), - column( - width = 6, - div( - class = "tile1", - selectInput( - "nj_tile_num", - "", - choices = 1:5, - width = "70px" - ) - ) + width = 6, + h4(p("Tiles"), style = "color:white; position: relative; right: -15px") + ), + column( + width = 6, + div( + class = "tile1", + selectInput( + "nj_tile_num", + "", + choices = 1:5, + width = "70px" + ) + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 1", + fluidRow( + column( + width = 4, + align = "left", + checkboxInput( + "nj_tiles_show", + h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE ) ), - conditionalPanel( - "input.nj_tile_num == 1", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "nj_tiles_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "nj_tile_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-end", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + uiOutput("nj_fruit_width"), + br() ) ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_tile_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_fruit_width"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_offset_circ", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step= 0.05, - value = 0, - width = "150px", - ticks = FALSE - ), - br() - ) + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_fruit_offset_circ", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + step= 0.05, + value = 0, + width = "150px", + ticks = FALSE ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) + br() ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') + ), + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_fruit_alpha", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE ) ) - ), - column( - width = 7, - align = "center", - uiOutput("nj_fruit_variable") ) - ), - fluidRow( - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_low", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_mid", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_high", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) + ) + ) + ), + fluidRow( + column( + width = 4, + align = "left", + HTML( + paste( + tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') ) - ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "nj_div_tiles", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "nj_tile_mid", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) - ) + ) + ), + column( + width = 7, + align = "center", + uiOutput("nj_fruit_variable") + ) + ), + fluidRow( + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_low", + selected = "#F53900", + label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_mid", + selected = "#FFFFFF", + label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_high", + selected = "#68B127", + label = h5(p("High"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ) + ), + br(), + fluidRow( + column( + width = 6, + align = "left", + checkboxInput( + "nj_div_tiles", + h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + ) + ), + column( + width = 6, + div( + class = "tile_select", + selectInput( + "nj_tile_mid", + h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + choices = c("Zero", "Mean", "Median"), + width = "90px" ) ) + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 2", + fluidRow( + column( + width = 4, + align = "left", + checkboxInput( + "nj_tiles_show_2", + h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) ), - conditionalPanel( - "input.nj_tile_num == 2", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "nj_tiles_show_2", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "nj_tile_menu_2", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-end", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + uiOutput("nj_fruit_width2"), + br() ) ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_tile_menu_2", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_fruit_width2"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_offset_circ_2", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step= 0.05, - value = 0, - width = "150px", - ticks = FALSE - ), - br() - ) + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_fruit_offset_circ_2", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + step= 0.05, + value = 0, + width = "150px", + ticks = FALSE ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_2", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) + br() ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') + ), + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_fruit_alpha_2", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE ) ) - ), - column( - width = 7, - align = "center", - uiOutput("nj_fruit_variable2") ) - ), - fluidRow( - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_low_2", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) + ) + ) + ), + fluidRow( + column( + width = 4, + align = "left", + HTML( + paste( + tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') + ) + ) + ), + column( + width = 7, + align = "center", + uiOutput("nj_fruit_variable2") + ) + ), + fluidRow( + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_low_2", + selected = "#F53900", + label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_mid_2", + selected = "#FFFFFF", + label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_high_2", + selected = "#68B127", + label = h5(p("High"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ) + ), + br(), + fluidRow( + column( + width = 6, + align = "left", + checkboxInput( + "nj_div_tiles_2", + h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + ) + ), + column( + width = 6, + div( + class = "tile_select", + selectInput( + "nj_tile_mid_2", + h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + choices = c("Zero", "Mean", "Median"), + width = "90px" + ) + ) + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 3", + fluidRow( + column( + width = 4, + align = "left", + checkboxInput( + "nj_tiles_show_3", + h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ), + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "nj_tile_menu_3", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_mid_2", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + placement = "top-end", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + uiOutput("nj_fruit_width3"), + br() ) ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_high_2", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ) - ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "nj_div_tiles_2", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_fruit_offset_circ_3", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + step= 0.05, + value = 0, + width = "150px", + ticks = FALSE + ), + br() ) ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "nj_tile_mid_2", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_fruit_alpha_3", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE ) ) ) ) + ) + ), + fluidRow( + column( + width = 4, + align = "left", + HTML( + paste( + tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') + ) + ) ), - conditionalPanel( - "input.nj_tile_num == 3", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "nj_tiles_show_3", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_tile_menu_3", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_fruit_width3"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_offset_circ_3", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step= 0.05, - value = 0, - width = "150px", - ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_3", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, - align = "center", - uiOutput("nj_fruit_variable3") - ) - ), - fluidRow( - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_low_3", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_mid_3", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_high_3", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ) - ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "nj_div_tiles_3", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "nj_tile_mid_3", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) - ) - ) + column( + width = 7, + align = "center", + uiOutput("nj_fruit_variable3") + ) + ), + fluidRow( + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_low_3", + selected = "#F53900", + label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" ) ), - conditionalPanel( - "input.nj_tile_num == 4", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "nj_tiles_show_4", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_tile_menu_4", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_fruit_width4"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_offset_circ_4", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = 0, - step= 0.05, - width = "150px", - ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_4", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, - align = "center", - uiOutput("nj_fruit_variable4") + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_mid_3", + selected = "#FFFFFF", + label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_high_3", + selected = "#68B127", + label = h5(p("High"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ) + ), + br(), + fluidRow( + column( + width = 6, + align = "left", + checkboxInput( + "nj_div_tiles_3", + h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + ) + ), + column( + width = 6, + div( + class = "tile_select", + selectInput( + "nj_tile_mid_3", + h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + choices = c("Zero", "Mean", "Median"), + width = "90px" ) - ), - fluidRow( - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_low_4", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) + ) + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 4", + fluidRow( + column( + width = 4, + align = "left", + checkboxInput( + "nj_tiles_show_4", + h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ), + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "nj_tile_menu_4", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_mid_4", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + placement = "top-end", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + uiOutput("nj_fruit_width4"), + br() ) ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_high_4", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ) - ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "nj_div_tiles_4", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_fruit_offset_circ_4", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + value = 0, + step= 0.05, + width = "150px", + ticks = FALSE + ), + br() ) ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "nj_tile_mid_4", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_fruit_alpha_4", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE ) ) ) ) + ) + ), + fluidRow( + column( + width = 4, + align = "left", + HTML( + paste( + tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') + ) + ) ), - conditionalPanel( - "input.nj_tile_num == 5", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "nj_tiles_show_5", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_tile_menu_5", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_fruit_width5"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_offset_circ_5", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = 0, - step= 0.05, - width = "150px", - ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_5", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) - ) + column( + width = 7, + align = "center", + uiOutput("nj_fruit_variable4") + ) + ), + fluidRow( + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_low_4", + selected = "#F53900", + label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_mid_4", + selected = "#FFFFFF", + label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_high_4", + selected = "#68B127", + label = h5(p("High"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ) + ), + br(), + fluidRow( + column( + width = 6, + align = "left", + checkboxInput( + "nj_div_tiles_4", + h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + ) + ), + column( + width = 6, + div( + class = "tile_select", + selectInput( + "nj_tile_mid_4", + h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + choices = c("Zero", "Mean", "Median"), + width = "90px" ) - ), - fluidRow( - column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) + ) + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 5", + fluidRow( + column( + width = 4, + align = "left", + checkboxInput( + "nj_tiles_show_5", + h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ), + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "nj_tile_menu_5", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), - column( - width = 7, - align = "center", - uiOutput("nj_fruit_variable5") - ) - ), - fluidRow( - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_low_5", - selected = "#F53900", - label = h5(p("Low"), style = "color:white; margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + placement = "top-end", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + uiOutput("nj_fruit_width5"), + br() ) ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_mid_5", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_fruit_offset_circ_5", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + value = 0, + step= 0.05, + width = "150px", + ticks = FALSE + ), + br() ) ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_high_5", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + fluidRow( + column( + width = 12, + align = "center", + sliderInput( + "nj_fruit_alpha_5", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE + ) ) ) + ) + ) + ), + fluidRow( + column( + width = 4, + align = "left", + HTML( + paste( + tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') + ) + ) + ), + column( + width = 7, + align = "center", + uiOutput("nj_fruit_variable5") + ) + ), + fluidRow( + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_low_5", + selected = "#F53900", + label = h5(p("Low"), style = "color:white; margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_mid_5", + selected = "#FFFFFF", + label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 4, + align = "center", + colorPickr( + inputId = "nj_tile_color_high_5", + selected = "#68B127", + label = h5(p("High"), style = "color:white;margin-bottom: -5px"), + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ) + ), + br(), + fluidRow( + column( + width = 6, + align = "left", + checkboxInput( + "nj_div_tiles_5", + h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + ) + ), + column( + width = 6, + div( + class = "tile_select", + selectInput( + "nj_tile_mid_5", + h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + choices = c("Zero", "Mean", "Median"), + width = "90px" + ) + ) + ) + ) + ) + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + fluidRow( + column( + width = 6, + h4(p("Heatmap"), style = "color:white; position: relative; right: -15px") + ) + ), + fluidRow( + column( + width = 4, + align = "left", + checkboxInput( + "nj_heatmap_show", + h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ), + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "nj_heatmap_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), - br(), + placement = "top-end", + theme = "translucent", fluidRow( column( width = 6, - align = "left", - checkboxInput( - "nj_div_tiles_5", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) + align = "center", + sliderInput( + "nj_heatmap_width", + label = h5("Width", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 5, + value = 0.5, + width = "250px", + ticks = FALSE + ), + br(), + uiOutput("nj_heatmap_offs"), ), column( width = 6, - div( - class = "tile_select", - selectInput( - "nj_tile_mid_5", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) + align = "center", + br(), + sliderInput( + "nj_colnames_angle", + label = h5("Names angle", style = "color:white; margin-bottom: 0px"), + min = -90, + max = 90, + value = 0, + width = "250px", + ticks = FALSE + ), + br(), + sliderInput( + "nj_colnames_x", + label = h5("Names X Pos", style = "color:white; margin-bottom: 0px"), + min = -10, + max = 10, + value = 0, + width = "250px", + ticks = FALSE + ), + br(), + sliderInput( + "nj_colnames_y", + label = h5("Names Y Pos", style = "color:white; margin-bottom: 0px"), + min = -10, + max = 10, + value = 0, + width = "250px", + ticks = FALSE ) ) ) ) ) + ), + fluidRow( + column( + width = 6, + uiOutput("nj_heatmap_sel") + ), + column( + width = 6, + textInput( + "nj_heatmap_title", + label = h5("Legend title", style = "color:white; margin-bottom: 0px; position: relative; bottom: -20px"), + value = "Heatmap", + placeholder = "Heatmap" + ) + ) ) ) - ), - hr(), - fluidRow( + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( - width = 6, + width = 12, + align = "left", fluidRow( column( - width = 12, - align = "left", - fluidRow( - column( - width = 6, - h4(p("Heatmap"), style = "color:white; position: relative; right: -15px") - ) - ), - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "nj_heatmap_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_heatmap_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 6, - align = "center", - sliderInput( - "nj_heatmap_width", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 5, - value = 0.5, - width = "250px", - ticks = FALSE - ), - br(), - uiOutput("nj_heatmap_offs"), - ), - column( - width = 6, - align = "center", - br(), - sliderInput( - "nj_colnames_angle", - label = h5("Names angle", style = "color:white; margin-bottom: 0px"), - min = -90, - max = 90, - value = 0, - width = "250px", - ticks = FALSE - ), - br(), - sliderInput( - "nj_colnames_x", - label = h5("Names X Pos", style = "color:white; margin-bottom: 0px"), - min = -10, - max = 10, - value = 0, - width = "250px", - ticks = FALSE - ), - br(), - sliderInput( - "nj_colnames_y", - label = h5("Names Y Pos", style = "color:white; margin-bottom: 0px"), - min = -10, - max = 10, - value = 0, - width = "250px", - ticks = FALSE - ) - ) - ) - ) - ) - ), - fluidRow( - column( - width = 6, - uiOutput("nj_heatmap_sel") - ), - column( - width = 6, - textInput( - "nj_heatmap_title", - label = h5("Legend title", style = "color:white; margin-bottom: 0px; position: relative; bottom: -20px"), - value = "Heatmap", - placeholder = "Heatmap" - ) - ) + width = 6, + h4(p("Clade Highlight"), style = "color:white; position: relative; right: -15px") + ) + ), + fluidRow( + column( + width = 5, + checkboxInput( + "nj_clades_show", + "Show" ) ) - ) - ), - column( - width = 6, + ), fluidRow( column( width = 12, - align = "left", - fluidRow( - column( - width = 6, - h4(p("Clade Highlight"), style = "color:white; position: relative; right: -15px") - ) - ), - fluidRow( - column( - width = 5, - checkboxInput( - "nj_clades_show", - "Show" - ) - ) - ), - fluidRow( - column( - width = 12, - materialSwitch( - "nj_nodelabel_show", - "Show Nodes", - value = FALSE - ) - ) - ), - fluidRow( - column( - width = 5, - h5(p("Parent node"), style = "color:white; position: relative; right: -20px; margin-top: 30px") - ), - column( - width = 7, - uiOutput("nj_parentnode") - ) + materialSwitch( + "nj_nodelabel_show", + "Show Nodes", + value = FALSE ) ) + ), + fluidRow( + column( + width = 5, + h5(p("Parent node"), style = "color:white; position: relative; right: -20px; margin-top: 30px") + ), + column( + width = 7, + uiOutput("nj_parentnode") + ) ) ) - ), - conditionalPanel( - "input.nj_layout=='inward'|input.nj_layout=='circular'", - br(), br() ) - ), - br(), br(), br(), br(), br(), br(), br() + ) ) ) ), From 35244b11793ab782c7717ad4b1cd5b2995ed3941 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Mon, 11 Mar 2024 23:09:00 +0100 Subject: [PATCH 03/26] Visualization UI changes, added variable scale selection feature --- App.R | 519 +++++++++++++++++++++++++++++++++----------------- www/mycss.css | 48 ++++- 2 files changed, 386 insertions(+), 181 deletions(-) diff --git a/App.R b/App.R index 1451c53..d53f73e 100644 --- a/App.R +++ b/App.R @@ -1504,7 +1504,7 @@ ui <- dashboardPage( radioGroupButtons( inputId = "nj_controls", label = "", - choices = c("Layout", "Label", "Elements"), + choices = c("Layout", "Label", "Elements", "Variables"), direction = "vertical" ) ), @@ -1549,7 +1549,7 @@ ui <- dashboardPage( align = "left", checkboxInput( "nj_ladder", - h5(p("Ladder"), style = "color:white; position: relative; bottom: 3px; right: -15px; margin-top: 22px; margin-bottom: 27px"), + h5(p("Ladder"), style = "color:white; position: relative; bottom: 14px; right: -10px; margin-top: 22px; margin-bottom: 13px"), value = TRUE ) ), @@ -1558,7 +1558,7 @@ ui <- dashboardPage( align = "left", checkboxInput( "nj_rootedge_show", - h5(p("Root"), style = "color:white; position: relative; bottom: 3px; right: -5px; margin-top: 23px"), + h5(p("Root"), style = "color:white; position: relative; bottom: 15px; right: -5px; margin-top: 23px"), value = FALSE ) ), @@ -1682,7 +1682,7 @@ ui <- dashboardPage( position = "right-start" ) ) - ), + ), br() ) ) @@ -1838,7 +1838,7 @@ ui <- dashboardPage( column( width = 12, align = "left", - h4(p("Tree scale"), style = "color:white; position: relative; right: -15px"), + h4(p("Tree Scale"), style = "color:white; position: relative; right: -15px"), column( width = 12, fluidRow( @@ -1962,7 +1962,7 @@ ui <- dashboardPage( conditionalPanel( "input.nj_controls=='Label'", column( - width = 6, + width = 4, box( solidHeader = TRUE, status = "info", @@ -2077,6 +2077,12 @@ ui <- dashboardPage( label = h5("Fontface", style = "color:white; margin-bottom: 5px; margin-top: 16px"), width = "250px", choices = c(Plain = "plain", Bold = "bold", Italic = "italic", `B & I` = "bold.italic") + ), + br(), + checkboxInput( + "nj_align", + h5(p("Align labels"), style = "color:white;"), + value = FALSE ) ) ) @@ -2089,76 +2095,20 @@ ui <- dashboardPage( column( width = 4, align = "left", - checkboxInput( - "nj_align", - h5(p("Align labels"), style = "color:white; position: relative; bottom: -10px; right: -15px"), - value = FALSE - ) - ), - column( - width = 1, - HTML( - paste( - tags$span(style='color: white; font-size: 14px; position: relative; bottom: -28px; margin-left: 0px ', 'Width') - ) - ) - ), - column( - width = 3, - align = "left", - numericInput( - "nj_tiplab_linesize", - "", - value = 0.5, - min = 0.1, - max = 3, - step = 0.1, - width = "80px" - ) - ), - column( - width = 3, - selectInput( - "nj_tiplab_linetype", - "", - choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), - selected = c(Dotted = "dotted") - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 30px") + h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 23px") ), column( width = 4, - conditionalPanel( - "input.nj_mapping_show==false", - colorPickr( - inputId = "nj_tiplab_color", - width = "100%", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ), - conditionalPanel( - "input.nj_mapping_show==true", - uiOutput("nj_color_mapping") - ) - ), - column( - width = 4, - align = "left", - checkboxInput( - "nj_mapping_show", - label = h5("Add variable", style = "color:white; font-size: 14px; position: relative; bottom: -10px;"), - value = FALSE + align = "center", + colorPickr( + inputId = "nj_tiplab_color", + width = "100%", + selected = "#000000", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" ) ) ), @@ -2330,7 +2280,7 @@ ui <- dashboardPage( column( width = 4, align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 30px") + h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 23px; margin-bottom: 94px") ), column( width = 4, @@ -2343,7 +2293,8 @@ ui <- dashboardPage( interaction = list(clear = FALSE, save = FALSE), position = "right-start" - ) + ), + br(), br(), br(), br() ) ) ) @@ -2353,7 +2304,7 @@ ui <- dashboardPage( conditionalPanel( "input.nj_controls=='Elements'", column( - width = 3, + width = 2, box( solidHeader = TRUE, status = "info", @@ -2361,10 +2312,10 @@ ui <- dashboardPage( column( width = 12, align = "left", - h4(p("Tip points"), style = "color:white; position: relative; right: -15px"), + h4(p("Tip Points"), style = "color:white; position: relative; right: -15px"), fluidRow( column( - width = 4, + width = 5, align = "left", checkboxInput( "nj_tippoint_show", @@ -2373,7 +2324,7 @@ ui <- dashboardPage( ) ), column( - width = 2, + width = 7, align = "left", dropMenu( actionBttn( @@ -2408,52 +2359,33 @@ ui <- dashboardPage( ), fluidRow( column( - width = 4, + width = 5, align = "left", h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 30px") ), column( - width = 4, + width = 7, align = "center", - conditionalPanel( - "input.nj_tipcolor_mapping_show==true & input.nj_mapping_show==false", - uiOutput("nj_tipcolor_mapping") - ), - conditionalPanel( - "input.nj_tipcolor_mapping_show==false || input.nj_mapping_show==true", - colorPickr( - inputId = "nj_tippoint_color", - width = "100%", - selected = "#3A4657", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ) - ), - column( - width = 4, - align = "left", - conditionalPanel( - "input.nj_mapping_show==false", - checkboxInput( - "nj_tipcolor_mapping_show", - label = h5("Add variable", style = "color:white; font-size: 14px; position: relative; bottom: -10px;"), - value = FALSE - ) + colorPickr( + inputId = "nj_tippoint_color", + width = "100%", + selected = "#3A4657", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" ) ) ), fluidRow( column( - width = 4, + width = 5, align = "left", h5(p("Shape"), style = "color:white; position: relative; right: -17px; margin-top: 30px") ), column( - width = 4, + width = 7, align = "center", conditionalPanel( "input.nj_tipshape_mapping_show==false", @@ -2473,16 +2405,7 @@ ui <- dashboardPage( ), conditionalPanel( "input.nj_tipshape_mapping_show==true", - uiOutput("nj_tipshape_mapping") - ) - ), - column( - width = 4, - align = "left", - checkboxInput( - "nj_tipshape_mapping_show", - label = h5("Add variable", style = "color:white; font-size: 14px; position: relative; bottom: -10px;"), - value = FALSE + h5(p("Variable assigned"), style = "color:white; position: relative; right: -17px; margin-top: 30px; font-style: italic") ) ) ) @@ -2498,7 +2421,7 @@ ui <- dashboardPage( column( width = 12, align = "left", - h4(p("Node points"), style = "color:white; position: relative; right: -15px"), + h4(p("Node Points"), style = "color:white; position: relative; right: -15px"), fluidRow( column( width = 5, @@ -2589,7 +2512,7 @@ ui <- dashboardPage( ) ), column( - width = 3, + width = 2, box( solidHeader = TRUE, status = "info", @@ -3541,8 +3464,117 @@ ui <- dashboardPage( ) ) ) + ), + conditionalPanel( + "input.nj_controls=='Variables'", + column( + width = 4, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + fluidRow( + column( + width = 4, + h4(p("Element"), style = "color:white; margin-left: 8px") + ), + column( + width = 4, + h4(p("Variable"), style = "color:white; margin-left: 8px") + ), + column( + width = 4, + h4(p("Color Scale"), style = "color:white; margin-left: 8px") + ) + ), + fluidRow( + column( + width = 4, + checkboxInput( + "nj_mapping_show", + label = h5("Tip Label Color", style = "color:white; font-size: 14px; position: relative; bottom: -3px;"), + value = FALSE + ) + ), + column( + width = 4, + align = "center", + uiOutput("nj_color_mapping") + ), + column( + width = 4, + align = "center", + selectInput( + "nj_tiplab_scale", + "", + choices = list( + Viridis = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) + ) + ) + ) + ), + fluidRow( + column( + width = 4, + checkboxInput( + "nj_tipcolor_mapping_show", + label = h5("Tip Point Color", style = "color:white; font-size: 14px;"), + value = FALSE + ) + ), + column( + width = 4, + align = "center", + uiOutput("nj_tipcolor_mapping") + ), + column( + width = 4, + align = "center", + uiOutput("nj_tippoint_scale") + ) + ), + fluidRow( + column( + width = 4, + checkboxInput( + "nj_tipshape_mapping_show", + label = h5("Tip Point Shape", style = "color:white; font-size: 14px;"), + value = FALSE + ) + ), + column( + width = 4, + align = "center", + uiOutput("nj_tipshape_mapping") + ), + column( + width = 4, + HTML( + paste( + tags$span(style='color: white; font-size: 14px; font-style: italic; position: relative; bottom: -16px; right: -5px;', 'No scale for shapes') + ) + ) + ) + ) + ) + ) + ) ) - ) + ), + br(), br(), br(), br(), br(), br(), br(), br(), br(), + br(), br(), br(), br(), br(), br(), br(), br(), br(), ), ### Control Panels UPGMA ---- @@ -9017,6 +9049,8 @@ server <- function(input, output, session) { # Change scheme observeEvent(input$reload_db, { + test <<- DB$meta[input$nj_color_mapping] + if(tail(readLines(paste0(getwd(), "/execute/script_log.txt")), 1)!= "0") { show_toast( title = "Pending Multi Typing", @@ -10148,6 +10182,75 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- + # Tippoint Scale + + output$nj_tippoint_scale <- renderUI({ + if(class(unlist(DB$meta[input$nj_tipcolor_mapping])) == "numeric") { + selectInput( + "nj_tippoint_scale", + "", + choices = list( + Sequential = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo", + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) + } else { + selectInput( + "nj_tippoint_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ) + ) + ) + } + }) + # Clade Highlights output$nj_parentnode <- renderUI({ if(!is.null(Vis$nj_parentnodes)) { @@ -11307,12 +11410,16 @@ server <- function(input, output, session) { ladderize = input$nj_ladder, alpha = nj_alpha()) %<+% Vis$meta_nj + nj_tiplab() + + nj_tiplab_scale() + + new_scale_color() + limit() + inward() + label_branch() + treescale() + nodepoint() + tippoint() + + nj_tippoint_scale() + + new_scale_color() + clip_label() + nj_rootedge() + nj_nodelabel() + @@ -11373,6 +11480,100 @@ server <- function(input, output, session) { theme(plot.background = element_rect(fill = input$nj_bg, color = input$nj_bg)) }) + # Tippoint Scale + nj_tippoint_scale <- reactive({ + if(!is.null(input$nj_tippoint_scale)) { + if(input$nj_tippoint_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$nj_tipcolor_mapping])) == "numeric") { + if(input$nj_tippoint_scale == "magma") { + scale_color_viridis(option = "A") + } else if(input$nj_tippoint_scale == "inferno") { + scale_color_viridis(option = "B") + } else if(input$nj_tippoint_scale == "plasma") { + scale_color_viridis(option = "C") + } else if(input$nj_tippoint_scale == "viridis") { + scale_color_viridis(option = "D") + } else if(input$nj_tippoint_scale == "cividis") { + scale_color_viridis(option = "E") + } else if(input$nj_tippoint_scale == "rocket") { + scale_color_viridis(option = "F") + } else if(input$nj_tippoint_scale == "mako") { + scale_color_viridis(option = "G") + } else if(input$nj_tippoint_scale == "turbo") { + scale_color_viridis(option = "H") + } + } else { + if(input$nj_tippoint_scale == "magma") { + scale_color_viridis(discrete = TRUE, option = "A") + } else if(input$nj_tippoint_scale == "inferno") { + scale_color_viridis(discrete = TRUE, option = "B") + } else if(input$nj_tippoint_scale == "plasma") { + scale_color_viridis(discrete = TRUE, option = "C") + } else if(input$nj_tippoint_scale == "viridis") { + scale_color_viridis(discrete = TRUE, option = "D") + } else if(input$nj_tippoint_scale == "cividis") { + scale_color_viridis(discrete = TRUE, option = "E") + } else if(input$nj_tippoint_scale == "rocket") { + scale_color_viridis(discrete = TRUE, option = "F") + } else if(input$nj_tippoint_scale == "mako") { + scale_color_viridis(discrete = TRUE, option = "G") + } else if(input$nj_tippoint_scale == "turbo") { + scale_color_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_color_brewer(palette = input$nj_tippoint_scale) + } + } + }) + + # Tiplab Scale + nj_tiplab_scale <- reactive({ + if(!is.null(input$nj_tiplab_scale)) { + if(input$nj_tiplab_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$nj_color_mapping])) == "numeric") { + if(input$nj_tiplab_scale == "magma") { + scale_color_viridis(option = "A") + } else if(input$nj_tiplab_scale == "inferno") { + scale_color_viridis(option = "B") + } else if(input$nj_tiplab_scale == "plasma") { + scale_color_viridis(option = "C") + } else if(input$nj_tiplab_scale == "viridis") { + scale_color_viridis(option = "D") + } else if(input$nj_tiplab_scale == "cividis") { + scale_color_viridis(option = "E") + } else if(input$nj_tiplab_scale == "rocket") { + scale_color_viridis(option = "F") + } else if(input$nj_tiplab_scale == "mako") { + scale_color_viridis(option = "G") + } else if(input$nj_tiplab_scale == "turbo") { + scale_color_viridis(option = "H") + } + } else { + if(input$nj_tiplab_scale == "magma") { + scale_color_viridis(discrete = TRUE, option = "A") + } else if(input$nj_tiplab_scale == "inferno") { + scale_color_viridis(discrete = TRUE, option = "B") + } else if(input$nj_tiplab_scale == "plasma") { + scale_color_viridis(discrete = TRUE, option = "C") + } else if(input$nj_tiplab_scale == "viridis") { + scale_color_viridis(discrete = TRUE, option = "D") + } else if(input$nj_tiplab_scale == "cividis") { + scale_color_viridis(discrete = TRUE, option = "E") + } else if(input$nj_tiplab_scale == "rocket") { + scale_color_viridis(discrete = TRUE, option = "F") + } else if(input$nj_tiplab_scale == "mako") { + scale_color_viridis(discrete = TRUE, option = "G") + } else if(input$nj_tiplab_scale == "turbo") { + scale_color_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_color_brewer(palette = input$nj_tiplab_scale) + } + } + }) + # Clade Highlight nj_clades <- reactive({ if(!is.null(input$nj_parentnode)) { @@ -11763,21 +11964,12 @@ server <- function(input, output, session) { tippoint <- reactive({ if(input$nj_tippoint_show == TRUE) { if(input$nj_tipcolor_mapping_show == TRUE & input$nj_tipshape_mapping_show == FALSE) { - if(input$nj_mapping_show == TRUE) { - geom_tippoint( - aes(shape = !!sym(input$nj_tipcolor_mapping)), - alpha = input$nj_tippoint_alpha, - color = input$nj_tippoint_color, - size = nj_tippoint_size() - ) - } else { - geom_tippoint( - aes(color = !!sym(input$nj_tipcolor_mapping)), - alpha = input$nj_tippoint_alpha, - shape = input$nj_tippoint_shape, - size = nj_tippoint_size() - ) - } + geom_tippoint( + aes(color = !!sym(input$nj_tipcolor_mapping)), + alpha = input$nj_tippoint_alpha, + shape = input$nj_tippoint_shape, + size = nj_tippoint_size() + ) } else if (input$nj_tipcolor_mapping_show == FALSE & input$nj_tipshape_mapping_show == TRUE) { geom_tippoint( aes(shape = !!sym(input$nj_tipshape_mapping)), @@ -11786,21 +11978,12 @@ server <- function(input, output, session) { size = nj_tippoint_size() ) } else if (input$nj_tipcolor_mapping_show == TRUE & input$nj_tipshape_mapping_show == TRUE) { - if(input$nj_mapping_show == TRUE) { - geom_tippoint( - aes(shape = !!sym(input$nj_tipshape_mapping)), - color = input$nj_tippoint_color, - alpha = input$nj_tippoint_alpha, - size = nj_tippoint_size() - ) - } else { - geom_tippoint( - aes(shape = !!sym(input$nj_tipshape_mapping), - color = !!sym(input$nj_tipcolor_mapping)), - alpha = input$nj_tippoint_alpha, - size = nj_tippoint_size() - ) - } + geom_tippoint( + aes(shape = !!sym(input$nj_tipshape_mapping), + color = !!sym(input$nj_tipcolor_mapping)), + alpha = input$nj_tippoint_alpha, + size = nj_tippoint_size() + ) } else { geom_tippoint( alpha = input$nj_tippoint_alpha, @@ -11810,9 +11993,7 @@ server <- function(input, output, session) { size = nj_tippoint_size() ) } - } else {NULL - - } + } else {NULL} }) # Nodepoints @@ -11845,8 +12026,6 @@ server <- function(input, output, session) { mapping_tiplab(), geom = "text", size = nj_tiplab_size(), - linesize = input$nj_tiplab_linesize, - linetype = input$nj_tiplab_linetype, alpha = input$nj_tiplab_alpha, fontface = input$nj_tiplab_fontface, align = as.logical(input$nj_align), @@ -11859,8 +12038,6 @@ server <- function(input, output, session) { color = input$nj_tiplab_color, geom = "text", size = nj_tiplab_size(), - linesize = input$nj_tiplab_linesize, - linetype = input$nj_tiplab_linetype, alpha = input$nj_tiplab_alpha, fontface = input$nj_tiplab_fontface, align = as.logical(input$nj_align), @@ -11874,8 +12051,6 @@ server <- function(input, output, session) { mapping_tiplab(), geom = "text", size = nj_tiplab_size(), - linesize = input$nj_tiplab_linesize, - linetype = input$nj_tiplab_linetype, alpha = input$nj_tiplab_alpha, fontface = input$nj_tiplab_fontface, align = as.logical(input$nj_align), @@ -11888,8 +12063,6 @@ server <- function(input, output, session) { color = input$nj_tiplab_color, geom = "text", size = nj_tiplab_size(), - linesize = input$nj_tiplab_linesize, - linetype = input$nj_tiplab_linetype, alpha = input$nj_tiplab_alpha, fontface = input$nj_tiplab_fontface, align = as.logical(input$nj_align), @@ -11904,8 +12077,6 @@ server <- function(input, output, session) { geom = nj_geom(), angle = input$nj_tiplab_angle, size = nj_tiplab_size(), - linesize = input$nj_tiplab_linesize, - linetype = input$nj_tiplab_linetype, alpha = input$nj_tiplab_alpha, fontface = input$nj_tiplab_fontface, align = as.logical(input$nj_align), @@ -11922,8 +12093,6 @@ server <- function(input, output, session) { color = input$nj_tiplab_color, angle = input$nj_tiplab_angle, size = nj_tiplab_size(), - linesize = input$nj_tiplab_linesize, - linetype = input$nj_tiplab_linetype, alpha = input$nj_tiplab_alpha, fontface = input$nj_tiplab_fontface, align = as.logical(input$nj_align), @@ -11974,11 +12143,15 @@ server <- function(input, output, session) { # NJ Tiplab color mapping_tiplab <- reactive({ - if(input$nj_mapping_show == TRUE) { - aes(label = !!sym(input$nj_tiplab), - colour = !!sym(input$nj_color_mapping)) + if(!is.null(input$nj_tiplab)) { + if(input$nj_mapping_show == TRUE) { + aes(label = !!sym(input$nj_tiplab), + color = !!sym(input$nj_color_mapping)) + } else { + aes(label = !!sym(input$nj_tiplab)) + } } else { - aes(label = !!sym(input$nj_tiplab)) + aes(label = !!sym("Assembly Name")) } }) diff --git a/www/mycss.css b/www/mycss.css index 3219d1b..8969265 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -632,6 +632,15 @@ input.form-control.pickr-color { width: 100px; } +#nj_color_mapping { + margin-top: -7px; + margin-bottom: -10px; +} + +#nj_branch_label_color { + margin-top: -7px; +} + button#nj_labeltext_menu { height: 34px; background: #20E6E5; @@ -703,7 +712,7 @@ button#nj_rootedge_menu { background: #20E6E5; color: #000000; margin-left: 10px; - margin-top: 22px; + margin-top: 8px; border-radius: 5px } @@ -819,29 +828,51 @@ button#nj_tile_menu_5 { } #nj_ladder { - margin-top: 19px; + margin-top: 8px; margin-left: -5px } #nj_align { - margin-top: 21px; - margin-left: -5px + margin-top: 10px; + margin-left: -60px } #nj_rootedge_show, #upgma_rootedge_show { - margin-top: 20px + margin-top: 8px; + margin-left: -15px; } #nj_mapping_show { - margin-top: 20px; + margin-top: 13px; } #nj_tipcolor_mapping_show { - margin-top: 20px; + margin-top: 10px; } #nj_tipshape_mapping_show { - margin-top: 20px; + margin-top: 10px; +} + +#nj_tipshape_mapping { + margin-top: -6px; +} + +#nj_tiplab_scale { + margin-top: -7px; + margin-bottom: -10px; +} + +#shiny-tab-visualization > div:nth-child(5) > div > div:nth-child(5) > div > div > div > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div { + margin-top: -7px; +} + +##nj_tipcolor_mapping > div > div > div { + margin-top: -10px; +} + +#shiny-tab-visualization > div:nth-child(5) > div > div:nth-child(5) > div > div > div > div > div > div:nth-child(3) > div:nth-child(3) > div > div > div { + margin-top: -10px; } #nj_geom { @@ -851,6 +882,7 @@ button#nj_tile_menu_5 { #nj_tiplab_color { margin-bottom: 0px; + margin-top: -7px; } #nj_show_branch_label { From 04d6027c40e88791ff25944a05d8b9e7aab0197f Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Tue, 12 Mar 2024 18:50:12 +0100 Subject: [PATCH 04/26] Fixes for new visualization functionalities; addition of color scale functions --- App.R | 328 +++++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 219 insertions(+), 109 deletions(-) diff --git a/App.R b/App.R index d53f73e..19d0415 100644 --- a/App.R +++ b/App.R @@ -34,6 +34,8 @@ library(visNetwork) library(proxy) library(phangorn) library(cowplot) +library(viridis) +library(RColorBrewer) schemes <- c("Acinetobacter_baumanii", "Bacillus_anthracis", "Bordetella_pertussis", "Brucella_melitensis", "Brucella_spp", "Burkholderia_mallei_FLI", @@ -3468,7 +3470,7 @@ ui <- dashboardPage( conditionalPanel( "input.nj_controls=='Variables'", column( - width = 4, + width = 6, box( solidHeader = TRUE, status = "info", @@ -3478,21 +3480,21 @@ ui <- dashboardPage( align = "left", fluidRow( column( - width = 4, + width = 3, h4(p("Element"), style = "color:white; margin-left: 8px") ), column( - width = 4, + width = 3, h4(p("Variable"), style = "color:white; margin-left: 8px") ), column( - width = 4, + width = 6, h4(p("Color Scale"), style = "color:white; margin-left: 8px") ) ), fluidRow( column( - width = 4, + width = 3, checkboxInput( "nj_mapping_show", label = h5("Tip Label Color", style = "color:white; font-size: 14px; position: relative; bottom: -3px;"), @@ -3500,34 +3502,31 @@ ui <- dashboardPage( ) ), column( - width = 4, + width = 3, align = "center", uiOutput("nj_color_mapping") ), column( - width = 4, + width = 3, align = "center", - selectInput( - "nj_tiplab_scale", - "", - choices = list( - Viridis = list( - "Magma" = "magma", - "Inferno" = "inferno", - "Plasma" = "plasma", - "Viridis" = "viridis", - "Cividis" = "cividis", - "Rocket" = "rocket", - "Mako" = "mako", - "Turbo" = "turbo" - ) + uiOutput("nj_tiplab_scale") + ), + conditionalPanel( + "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiplab_scale)", + column( + width = 3, + selectInput( + "nj_color_mapping_div_mid", + label = h5("Midpoint", style = "color:white; font-size: 14px;"), + choices = c("Zero", "Mean", "Median"), + selected = "Mean" ) ) ) ), fluidRow( column( - width = 4, + width = 3, checkboxInput( "nj_tipcolor_mapping_show", label = h5("Tip Point Color", style = "color:white; font-size: 14px;"), @@ -3535,19 +3534,31 @@ ui <- dashboardPage( ) ), column( - width = 4, + width = 3, align = "center", uiOutput("nj_tipcolor_mapping") ), column( - width = 4, + width = 3, align = "center", uiOutput("nj_tippoint_scale") + ), + conditionalPanel( + "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tippoint_scale)", + column( + width = 3, + selectInput( + "nj_tipcolor_mapping_div_mid", + label = h5("Midpoint", style = "color:white; font-size: 14px;"), + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) ) ), fluidRow( column( - width = 4, + width = 3, checkboxInput( "nj_tipshape_mapping_show", label = h5("Tip Point Shape", style = "color:white; font-size: 14px;"), @@ -3555,12 +3566,12 @@ ui <- dashboardPage( ) ), column( - width = 4, + width = 3, align = "center", uiOutput("nj_tipshape_mapping") ), column( - width = 4, + width = 3, HTML( paste( tags$span(style='color: white; font-size: 14px; font-style: italic; position: relative; bottom: -16px; right: -5px;', 'No scale for shapes') @@ -10182,15 +10193,14 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- - # Tippoint Scale - - output$nj_tippoint_scale <- renderUI({ - if(class(unlist(DB$meta[input$nj_tipcolor_mapping])) == "numeric") { + # Tip Labels Variable Color Scale + output$nj_tiplab_scale <- renderUI({ + if(class(unlist(DB$meta[input$nj_color_mapping])) == "numeric") { selectInput( - "nj_tippoint_scale", + "nj_tiplab_scale", "", choices = list( - Sequential = list( + Continous = list( "Magma" = "magma", "Inferno" = "inferno", "Plasma" = "plasma", @@ -10198,7 +10208,37 @@ server <- function(input, output, session) { "Cividis" = "cividis", "Rocket" = "rocket", "Mako" = "mako", - "Turbo" = "turbo", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) + } else { + selectInput( + "nj_tiplab_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( "YlOrRd", "YlOrBr", "YlGnBu", @@ -10217,6 +10257,28 @@ server <- function(input, output, session) { "BuPu", "BuGn", "Blues" + ) + ) + ) + } + }) + + # Tippoint Scale + output$nj_tippoint_scale <- renderUI({ + if(class(unlist(DB$meta[input$nj_tipcolor_mapping])) == "numeric") { + selectInput( + "nj_tippoint_scale", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" ), Diverging = list( "Spectral", @@ -10245,6 +10307,26 @@ server <- function(input, output, session) { "Paired", "Dark2", "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" ) ) ) @@ -11483,46 +11565,60 @@ server <- function(input, output, session) { # Tippoint Scale nj_tippoint_scale <- reactive({ if(!is.null(input$nj_tippoint_scale)) { - if(input$nj_tippoint_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { - if(class(unlist(DB$meta[input$nj_tipcolor_mapping])) == "numeric") { - if(input$nj_tippoint_scale == "magma") { - scale_color_viridis(option = "A") - } else if(input$nj_tippoint_scale == "inferno") { - scale_color_viridis(option = "B") - } else if(input$nj_tippoint_scale == "plasma") { - scale_color_viridis(option = "C") - } else if(input$nj_tippoint_scale == "viridis") { - scale_color_viridis(option = "D") - } else if(input$nj_tippoint_scale == "cividis") { - scale_color_viridis(option = "E") - } else if(input$nj_tippoint_scale == "rocket") { - scale_color_viridis(option = "F") - } else if(input$nj_tippoint_scale == "mako") { - scale_color_viridis(option = "G") - } else if(input$nj_tippoint_scale == "turbo") { - scale_color_viridis(option = "H") - } + if(input$nj_tippoint_scale %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$nj_tipcolor_mapping_div_mid == "Zero") { + midpoint <- 0 + } else if(input$nj_tipcolor_mapping_div_mid == "Mean") { + midpoint <- mean(DB$meta_true[[input$nj_tipcolor_mapping]], na.rm = TRUE) } else { - if(input$nj_tippoint_scale == "magma") { - scale_color_viridis(discrete = TRUE, option = "A") - } else if(input$nj_tippoint_scale == "inferno") { - scale_color_viridis(discrete = TRUE, option = "B") - } else if(input$nj_tippoint_scale == "plasma") { - scale_color_viridis(discrete = TRUE, option = "C") - } else if(input$nj_tippoint_scale == "viridis") { - scale_color_viridis(discrete = TRUE, option = "D") - } else if(input$nj_tippoint_scale == "cividis") { - scale_color_viridis(discrete = TRUE, option = "E") - } else if(input$nj_tippoint_scale == "rocket") { - scale_color_viridis(discrete = TRUE, option = "F") - } else if(input$nj_tippoint_scale == "mako") { - scale_color_viridis(discrete = TRUE, option = "G") - } else if(input$nj_tippoint_scale == "turbo") { - scale_color_viridis(discrete = TRUE, option = "H") - } + midpoint <- median(DB$meta_true[[input$nj_tipcolor_mapping]], na.rm = TRUE) } + scale_color_gradient2(low = brewer.pal(3, input$nj_tippoint_scale)[1], + mid = brewer.pal(3, input$nj_tippoint_scale)[2], + high = brewer.pal(3, input$nj_tippoint_scale)[3], + midpoint = midpoint) } else { - scale_color_brewer(palette = input$nj_tippoint_scale) + if(input$nj_tippoint_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$nj_tipcolor_mapping])) == "numeric") { + if(input$nj_tippoint_scale == "magma") { + scale_color_viridis(option = "A") + } else if(input$nj_tippoint_scale == "inferno") { + scale_color_viridis(option = "B") + } else if(input$nj_tippoint_scale == "plasma") { + scale_color_viridis(option = "C") + } else if(input$nj_tippoint_scale == "viridis") { + scale_color_viridis(option = "D") + } else if(input$nj_tippoint_scale == "cividis") { + scale_color_viridis(option = "E") + } else if(input$nj_tippoint_scale == "rocket") { + scale_color_viridis(option = "F") + } else if(input$nj_tippoint_scale == "mako") { + scale_color_viridis(option = "G") + } else if(input$nj_tippoint_scale == "turbo") { + scale_color_viridis(option = "H") + } + } else { + if(input$nj_tippoint_scale == "magma") { + scale_color_viridis(discrete = TRUE, option = "A") + } else if(input$nj_tippoint_scale == "inferno") { + scale_color_viridis(discrete = TRUE, option = "B") + } else if(input$nj_tippoint_scale == "plasma") { + scale_color_viridis(discrete = TRUE, option = "C") + } else if(input$nj_tippoint_scale == "viridis") { + scale_color_viridis(discrete = TRUE, option = "D") + } else if(input$nj_tippoint_scale == "cividis") { + scale_color_viridis(discrete = TRUE, option = "E") + } else if(input$nj_tippoint_scale == "rocket") { + scale_color_viridis(discrete = TRUE, option = "F") + } else if(input$nj_tippoint_scale == "mako") { + scale_color_viridis(discrete = TRUE, option = "G") + } else if(input$nj_tippoint_scale == "turbo") { + scale_color_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_color_brewer(palette = input$nj_tippoint_scale) + } } } }) @@ -11530,46 +11626,60 @@ server <- function(input, output, session) { # Tiplab Scale nj_tiplab_scale <- reactive({ if(!is.null(input$nj_tiplab_scale)) { - if(input$nj_tiplab_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { - if(class(unlist(DB$meta[input$nj_color_mapping])) == "numeric") { - if(input$nj_tiplab_scale == "magma") { - scale_color_viridis(option = "A") - } else if(input$nj_tiplab_scale == "inferno") { - scale_color_viridis(option = "B") - } else if(input$nj_tiplab_scale == "plasma") { - scale_color_viridis(option = "C") - } else if(input$nj_tiplab_scale == "viridis") { - scale_color_viridis(option = "D") - } else if(input$nj_tiplab_scale == "cividis") { - scale_color_viridis(option = "E") - } else if(input$nj_tiplab_scale == "rocket") { - scale_color_viridis(option = "F") - } else if(input$nj_tiplab_scale == "mako") { - scale_color_viridis(option = "G") - } else if(input$nj_tiplab_scale == "turbo") { - scale_color_viridis(option = "H") - } + if(input$nj_tiplab_scale %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$nj_color_mapping_div_mid == "Zero") { + midpoint <- 0 + } else if(input$nj_color_mapping_div_mid == "Mean") { + midpoint <- mean(DB$meta_true[[input$nj_color_mapping]], na.rm = TRUE) } else { - if(input$nj_tiplab_scale == "magma") { - scale_color_viridis(discrete = TRUE, option = "A") - } else if(input$nj_tiplab_scale == "inferno") { - scale_color_viridis(discrete = TRUE, option = "B") - } else if(input$nj_tiplab_scale == "plasma") { - scale_color_viridis(discrete = TRUE, option = "C") - } else if(input$nj_tiplab_scale == "viridis") { - scale_color_viridis(discrete = TRUE, option = "D") - } else if(input$nj_tiplab_scale == "cividis") { - scale_color_viridis(discrete = TRUE, option = "E") - } else if(input$nj_tiplab_scale == "rocket") { - scale_color_viridis(discrete = TRUE, option = "F") - } else if(input$nj_tiplab_scale == "mako") { - scale_color_viridis(discrete = TRUE, option = "G") - } else if(input$nj_tiplab_scale == "turbo") { - scale_color_viridis(discrete = TRUE, option = "H") - } + midpoint <- median(DB$meta_true[[input$nj_color_mapping]], na.rm = TRUE) } + scale_color_gradient2(low = brewer.pal(3, input$nj_tiplab_scale)[1], + mid = brewer.pal(3, input$nj_tiplab_scale)[2], + high = brewer.pal(3, input$nj_tiplab_scale)[3], + midpoint = midpoint) } else { - scale_color_brewer(palette = input$nj_tiplab_scale) + if(input$nj_tiplab_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$nj_color_mapping])) == "numeric") { + if(input$nj_tiplab_scale == "magma") { + scale_color_viridis(option = "A") + } else if(input$nj_tiplab_scale == "inferno") { + scale_color_viridis(option = "B") + } else if(input$nj_tiplab_scale == "plasma") { + scale_color_viridis(option = "C") + } else if(input$nj_tiplab_scale == "viridis") { + scale_color_viridis(option = "D") + } else if(input$nj_tiplab_scale == "cividis") { + scale_color_viridis(option = "E") + } else if(input$nj_tiplab_scale == "rocket") { + scale_color_viridis(option = "F") + } else if(input$nj_tiplab_scale == "mako") { + scale_color_viridis(option = "G") + } else if(input$nj_tiplab_scale == "turbo") { + scale_color_viridis(option = "H") + } + } else { + if(input$nj_tiplab_scale == "magma") { + scale_color_viridis(discrete = TRUE, option = "A") + } else if(input$nj_tiplab_scale == "inferno") { + scale_color_viridis(discrete = TRUE, option = "B") + } else if(input$nj_tiplab_scale == "plasma") { + scale_color_viridis(discrete = TRUE, option = "C") + } else if(input$nj_tiplab_scale == "viridis") { + scale_color_viridis(discrete = TRUE, option = "D") + } else if(input$nj_tiplab_scale == "cividis") { + scale_color_viridis(discrete = TRUE, option = "E") + } else if(input$nj_tiplab_scale == "rocket") { + scale_color_viridis(discrete = TRUE, option = "F") + } else if(input$nj_tiplab_scale == "mako") { + scale_color_viridis(discrete = TRUE, option = "G") + } else if(input$nj_tiplab_scale == "turbo") { + scale_color_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_color_brewer(palette = input$nj_tiplab_scale) + } } } }) @@ -11962,7 +12072,7 @@ server <- function(input, output, session) { # Tippoints tippoint <- reactive({ - if(input$nj_tippoint_show == TRUE) { + if(input$nj_tippoint_show == TRUE | input$nj_tipcolor_mapping_show == TRUE) { if(input$nj_tipcolor_mapping_show == TRUE & input$nj_tipshape_mapping_show == FALSE) { geom_tippoint( aes(color = !!sym(input$nj_tipcolor_mapping)), From 8b5684a21255aba38e50ebf0dde5b52114d5080e Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Tue, 12 Mar 2024 20:06:18 +0100 Subject: [PATCH 05/26] Reworked tiling functionality --- App.R | 2420 +++++++++++++++++++++++++++++++-------------------------- 1 file changed, 1303 insertions(+), 1117 deletions(-) diff --git a/App.R b/App.R index 19d0415..51037d4 100644 --- a/App.R +++ b/App.R @@ -2526,782 +2526,331 @@ ui <- dashboardPage( column( width = 6, h4(p("Tiles"), style = "color:white; position: relative; right: -15px") - ), - column( - width = 6, - div( - class = "tile1", - selectInput( - "nj_tile_num", - "", - choices = 1:5, - width = "70px" - ) - ) ) ), conditionalPanel( "input.nj_tile_num == 1", fluidRow( column( - width = 4, - align = "left", - checkboxInput( - "nj_tiles_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_tile_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_fruit_width"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_offset_circ", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step= 0.05, - value = 0, - width = "150px", - ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) - ) + width = 12, + align = "center", + uiOutput("nj_fruit_width"), + br() ) ), fluidRow( column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, + width = 12, align = "center", - uiOutput("nj_fruit_variable") + sliderInput( + "nj_fruit_offset_circ", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + step= 0.05, + value = 0, + width = "150px", + ticks = FALSE + ), + br() ) ), fluidRow( column( - width = 4, + width = 12, align = "center", - colorPickr( - inputId = "nj_tile_color_low", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + sliderInput( + "nj_fruit_alpha", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE ) - ), + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 2", + fluidRow( column( - width = 4, + width = 12, align = "center", - colorPickr( - inputId = "nj_tile_color_mid", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), + uiOutput("nj_fruit_width2"), + br() + ) + ), + fluidRow( column( - width = 4, + width = 12, align = "center", - colorPickr( - inputId = "nj_tile_color_high", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) + sliderInput( + "nj_fruit_offset_circ_2", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + step= 0.05, + value = 0, + width = "150px", + ticks = FALSE + ), + br() ) ), - br(), fluidRow( column( - width = 6, - align = "left", - checkboxInput( - "nj_div_tiles", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "nj_tile_mid", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) + width = 12, + align = "center", + sliderInput( + "nj_fruit_alpha_2", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE ) ) ) ), conditionalPanel( - "input.nj_tile_num == 2", + "input.nj_tile_num == 3", fluidRow( column( - width = 4, - align = "left", - checkboxInput( - "nj_tiles_show_2", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_tile_menu_2", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_fruit_width2"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_offset_circ_2", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step= 0.05, - value = 0, - width = "150px", - ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_2", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) - ) + width = 12, + align = "center", + uiOutput("nj_fruit_width3"), + br() ) ), fluidRow( column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, + width = 12, align = "center", - uiOutput("nj_fruit_variable2") + sliderInput( + "nj_fruit_offset_circ_3", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + step= 0.05, + value = 0, + width = "150px", + ticks = FALSE + ), + br() ) ), fluidRow( column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_low_2", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, + width = 12, align = "center", - colorPickr( - inputId = "nj_tile_color_mid_2", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + sliderInput( + "nj_fruit_alpha_3", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE ) - ), + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 4", + fluidRow( column( - width = 4, + width = 12, align = "center", - colorPickr( - inputId = "nj_tile_color_high_2", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) + uiOutput("nj_fruit_width4"), + br() ) ), - br(), fluidRow( column( - width = 6, - align = "left", - checkboxInput( - "nj_div_tiles_2", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), + width = 12, + align = "center", + sliderInput( + "nj_fruit_offset_circ_4", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + value = 0, + step= 0.05, + width = "150px", + ticks = FALSE + ), + br() + ) + ), + fluidRow( column( - width = 6, - div( - class = "tile_select", - selectInput( - "nj_tile_mid_2", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) + width = 12, + align = "center", + sliderInput( + "nj_fruit_alpha_4", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE ) ) ) ), conditionalPanel( - "input.nj_tile_num == 3", + "input.nj_tile_num == 5", fluidRow( column( - width = 4, - align = "left", - checkboxInput( - "nj_tiles_show_3", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_tile_menu_3", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_fruit_width3"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_offset_circ_3", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step= 0.05, - value = 0, - width = "150px", - ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_3", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) - ) + width = 12, + align = "center", + uiOutput("nj_fruit_width5"), + br() ) ), fluidRow( column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, + width = 12, align = "center", - uiOutput("nj_fruit_variable3") + sliderInput( + "nj_fruit_offset_circ_5", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + value = 0, + step= 0.05, + width = "150px", + ticks = FALSE + ), + br() ) ), fluidRow( column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_low_3", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_mid_3", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, + width = 12, align = "center", - colorPickr( - inputId = "nj_tile_color_high_3", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + sliderInput( + "nj_fruit_alpha_5", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + width = "150px", + ticks = FALSE ) ) + ) + ) + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + fluidRow( + column( + width = 6, + h4(p("Heatmap"), style = "color:white; position: relative; right: -15px") + ) + ), + fluidRow( + column( + width = 4, + align = "left", + checkboxInput( + "nj_heatmap_show", + h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "nj_div_tiles_3", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "nj_tile_mid_3", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "nj_heatmap_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-end", + theme = "translucent", + fluidRow( + column( + width = 6, + align = "center", + sliderInput( + "nj_heatmap_width", + label = h5("Width", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 5, + value = 0.5, + width = "250px", + ticks = FALSE + ), + br(), + uiOutput("nj_heatmap_offs"), + ), + column( + width = 6, + align = "center", + br(), + sliderInput( + "nj_colnames_angle", + label = h5("Names angle", style = "color:white; margin-bottom: 0px"), + min = -90, + max = 90, + value = 0, + width = "250px", + ticks = FALSE + ), + br(), + sliderInput( + "nj_colnames_x", + label = h5("Names X Pos", style = "color:white; margin-bottom: 0px"), + min = -10, + max = 10, + value = 0, + width = "250px", + ticks = FALSE + ), + br(), + sliderInput( + "nj_colnames_y", + label = h5("Names Y Pos", style = "color:white; margin-bottom: 0px"), + min = -10, + max = 10, + value = 0, + width = "250px", + ticks = FALSE + ) ) ) ) ) ), - conditionalPanel( - "input.nj_tile_num == 4", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "nj_tiles_show_4", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_tile_menu_4", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_fruit_width4"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_offset_circ_4", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = 0, - step= 0.05, - width = "150px", - ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_4", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, - align = "center", - uiOutput("nj_fruit_variable4") - ) - ), - fluidRow( - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_low_4", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_mid_4", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_high_4", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ) - ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "nj_div_tiles_4", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "nj_tile_mid_4", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) - ) - ) - ) - ), - conditionalPanel( - "input.nj_tile_num == 5", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "nj_tiles_show_5", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_tile_menu_5", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("nj_fruit_width5"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_offset_circ_5", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = 0, - step= 0.05, - width = "150px", - ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_5", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, - align = "center", - uiOutput("nj_fruit_variable5") - ) - ), - fluidRow( - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_low_5", - selected = "#F53900", - label = h5(p("Low"), style = "color:white; margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_mid_5", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "nj_tile_color_high_5", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ) + fluidRow( + column( + width = 6, + uiOutput("nj_heatmap_sel") ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "nj_div_tiles_5", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "nj_tile_mid_5", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) - ) + column( + width = 6, + textInput( + "nj_heatmap_title", + label = h5("Legend title", style = "color:white; margin-bottom: 0px; position: relative; bottom: -20px"), + value = "Heatmap", + placeholder = "Heatmap" ) ) ) @@ -3320,140 +2869,29 @@ ui <- dashboardPage( fluidRow( column( width = 6, - h4(p("Heatmap"), style = "color:white; position: relative; right: -15px") + h4(p("Clade Highlight"), style = "color:white; position: relative; right: -15px") ) ), fluidRow( column( - width = 4, - align = "left", + width = 5, checkboxInput( - "nj_heatmap_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + "nj_clades_show", + "Show" + ) + ) + ), + fluidRow( + column( + width = 12, + materialSwitch( + "nj_nodelabel_show", + "Show Nodes", value = FALSE ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "nj_heatmap_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 6, - align = "center", - sliderInput( - "nj_heatmap_width", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 5, - value = 0.5, - width = "250px", - ticks = FALSE - ), - br(), - uiOutput("nj_heatmap_offs"), - ), - column( - width = 6, - align = "center", - br(), - sliderInput( - "nj_colnames_angle", - label = h5("Names angle", style = "color:white; margin-bottom: 0px"), - min = -90, - max = 90, - value = 0, - width = "250px", - ticks = FALSE - ), - br(), - sliderInput( - "nj_colnames_x", - label = h5("Names X Pos", style = "color:white; margin-bottom: 0px"), - min = -10, - max = 10, - value = 0, - width = "250px", - ticks = FALSE - ), - br(), - sliderInput( - "nj_colnames_y", - label = h5("Names Y Pos", style = "color:white; margin-bottom: 0px"), - min = -10, - max = 10, - value = 0, - width = "250px", - ticks = FALSE - ) - ) - ) - ) - ) - ), - fluidRow( - column( - width = 6, - uiOutput("nj_heatmap_sel") - ), - column( - width = 6, - textInput( - "nj_heatmap_title", - label = h5("Legend title", style = "color:white; margin-bottom: 0px; position: relative; bottom: -20px"), - value = "Heatmap", - placeholder = "Heatmap" - ) - ) - ) - ) - ) - ), - column( - width = 2, - box( - solidHeader = TRUE, - status = "info", - width = "100%", - column( - width = 12, - align = "left", - fluidRow( - column( - width = 6, - h4(p("Clade Highlight"), style = "color:white; position: relative; right: -15px") - ) - ), - fluidRow( - column( - width = 5, - checkboxInput( - "nj_clades_show", - "Show" - ) - ) - ), - fluidRow( - column( - width = 12, - materialSwitch( - "nj_nodelabel_show", - "Show Nodes", - value = FALSE - ) - ) - ), - fluidRow( + ) + ), + fluidRow( column( width = 5, h5(p("Parent node"), style = "color:white; position: relative; right: -20px; margin-top: 30px") @@ -3578,6 +3016,188 @@ ui <- dashboardPage( ) ) ) + ), + fluidRow( + column( + width = 3, + fluidRow( + column( + width = 6, + conditionalPanel( + "input.nj_tile_num == 1", + checkboxInput( + "nj_tiles_show_1", + h5(p("Tile"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ), + conditionalPanel( + "input.nj_tile_num == 2", + checkboxInput( + "nj_tiles_show_2", + h5(p("Tile"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ), + conditionalPanel( + "input.nj_tile_num == 3", + checkboxInput( + "nj_tiles_show_3", + h5(p("Tile"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ), + conditionalPanel( + "input.nj_tile_num == 4", + checkboxInput( + "nj_tiles_show_4", + h5(p("Tile"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ), + conditionalPanel( + "input.nj_tile_num == 5", + checkboxInput( + "nj_tiles_show_5", + h5(p("Tile"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ) + ), + column( + width = 6, + selectInput( + "nj_tile_num", + "", + choices = 1:5, + width = "70px" + ) + ) + ) + ), + column( + width = 3, + conditionalPanel( + "input.nj_tile_num == 1", + uiOutput("nj_fruit_variable") + ), + conditionalPanel( + "input.nj_tile_num == 2", + uiOutput("nj_fruit_variable2") + ), + conditionalPanel( + "input.nj_tile_num == 3", + uiOutput("nj_fruit_variable3") + ), + conditionalPanel( + "input.nj_tile_num == 4", + uiOutput("nj_fruit_variable4") + ), + conditionalPanel( + "input.nj_tile_num == 5", + uiOutput("nj_fruit_variable5") + ) + ), + conditionalPanel( + "input.nj_tile_num == 1", + column( + width = 3, + align = "center", + uiOutput("nj_tiles_scale_1") + ), + conditionalPanel( + "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_1)", + column( + width = 3, + selectInput( + "nj_tiles_mapping_div_mid_1", + label = h5("Midpoint", style = "color:white; font-size: 14px;"), + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 2", + column( + width = 3, + align = "center", + uiOutput("nj_tiles_scale_2") + ), + conditionalPanel( + "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_2)", + column( + width = 3, + selectInput( + "nj_tiles_mapping_div_mid_2", + label = h5("Midpoint", style = "color:white; font-size: 14px;"), + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 3", + column( + width = 3, + align = "center", + uiOutput("nj_tiles_scale_3") + ), + conditionalPanel( + "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_3)", + column( + width = 3, + selectInput( + "nj_tiles_mapping_div_mid_3", + label = h5("Midpoint", style = "color:white; font-size: 14px;"), + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 4", + column( + width = 3, + align = "center", + uiOutput("nj_tiles_scale_4") + ), + conditionalPanel( + "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_4)", + column( + width = 3, + selectInput( + "nj_tiles_mapping_div_mid_4", + label = h5("Midpoint", style = "color:white; font-size: 14px;"), + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ), + conditionalPanel( + "input.nj_tile_num == 5", + column( + width = 3, + align = "center", + uiOutput("nj_tiles_scale_5") + ), + conditionalPanel( + "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_5)", + column( + width = 3, + selectInput( + "nj_tiles_mapping_div_mid_5", + label = h5("Midpoint", style = "color:white; font-size: 14px;"), + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) ) ) ) @@ -9060,8 +8680,6 @@ server <- function(input, output, session) { # Change scheme observeEvent(input$reload_db, { - test <<- DB$meta[input$nj_color_mapping] - if(tail(readLines(paste0(getwd(), "/execute/script_log.txt")), 1)!= "0") { show_toast( title = "Pending Multi Typing", @@ -10160,39 +9778,385 @@ server <- function(input, output, session) { actionButton("load", "Load", class = "btn btn-default") ) ) - ) + ) + }) + + + + # Download Target Info (CSV Table) + + + output$cgmlst_scheme <- renderTable({ + scheme_overview <- read_html(Scheme$link_scheme) %>% + html_table(header = FALSE) %>% + as.data.frame(stringsAsFactors = FALSE) + names(scheme_overview) <- NULL + scheme_overview + }) + + ### Display Target Table ---- + + output$cgmlst_targets <- renderDataTable({ + targets_overview <- Scheme$target_table + }, + options = list(pageLength = 10, + columnDefs = list( + list(searchable = FALSE, targets = "_all") + ))) + + # _______________________ #### + + ## Visualization ---- + ### Render Visualization Controls ---- + + #### NJ and UPGMA controls ---- + + # Tiles variable color scale + output$nj_tiles_scale_1 <- renderUI({ + if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + selectInput( + "nj_tiles_scale_1", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) + } else { + selectInput( + "nj_tiles_scale_1", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + } + }) + + output$nj_tiles_scale_2 <- renderUI({ + if(class(unlist(DB$meta[input$nj_fruit_variable_2])) == "numeric") { + selectInput( + "nj_tiles_scale_2", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) + } else { + selectInput( + "nj_tiles_scale_2", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + } + }) + + output$nj_tiles_scale_3 <- renderUI({ + if(class(unlist(DB$meta[input$nj_fruit_variable_3])) == "numeric") { + selectInput( + "nj_tiles_scale_3", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) + } else { + selectInput( + "nj_tiles_scale_3", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + } + }) + + output$nj_tiles_scale_4 <- renderUI({ + if(class(unlist(DB$meta[input$nj_fruit_variable_4])) == "numeric") { + selectInput( + "nj_tiles_scale_4", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) + } else { + selectInput( + "nj_tiles_scale_4", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + } }) - - - # Download Target Info (CSV Table) - - - output$cgmlst_scheme <- renderTable({ - scheme_overview <- read_html(Scheme$link_scheme) %>% - html_table(header = FALSE) %>% - as.data.frame(stringsAsFactors = FALSE) - names(scheme_overview) <- NULL - scheme_overview + output$nj_tiles_scale_5 <- renderUI({ + if(class(unlist(DB$meta[input$nj_fruit_variable_5])) == "numeric") { + selectInput( + "nj_tiles_scale_5", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) + } else { + selectInput( + "nj_tiles_scale_5", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + } }) - ### Display Target Table ---- - - output$cgmlst_targets <- renderDataTable({ - targets_overview <- Scheme$target_table - }, - options = list(pageLength = 10, - columnDefs = list( - list(searchable = FALSE, targets = "_all") - ))) - - # _______________________ #### - - ## Visualization ---- - ### Render Visualization Controls ---- - - #### NJ and UPGMA controls ---- - # Tip Labels Variable Color Scale output$nj_tiplab_scale <- renderUI({ if(class(unlist(DB$meta[input$nj_color_mapping])) == "numeric") { @@ -10993,88 +10957,98 @@ server <- function(input, output, session) { }) output$nj_fruit_width <- renderUI({ - if(round(ceiling(Vis$nj_min_x), 0) < 1) { - min <- 1 - } else { - min <- round(ceiling(Vis$nj_min_x), 0) + if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { + if(round(ceiling(Vis$nj_min_x), 0) < 1) { + min <- 1 + } else { + min <- round(ceiling(Vis$nj_min_x), 0) + } + sliderInput( + "nj_fruit_width_circ", + label = h5("Width", style = "color:white; margin-bottom: 0px"), + min = min, + max = round(ceiling(Vis$nj_max_x) * 0.5, 0), + value = ceiling(Vis$nj_max_x * 0.08), + width = "150px", + ticks = FALSE + ) } - sliderInput( - "nj_fruit_width_circ", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = min, - max = round(ceiling(Vis$nj_max_x) * 0.5, 0), - value = ceiling(Vis$nj_max_x * 0.08), - width = "150px", - ticks = FALSE - ) }) output$nj_fruit_width2 <- renderUI({ - if(round(ceiling(Vis$nj_min_x), 0) < 1) { - min <- 1 - } else { - min <- round(ceiling(Vis$nj_min_x), 0) + if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { + if(round(ceiling(Vis$nj_min_x), 0) < 1) { + min <- 1 + } else { + min <- round(ceiling(Vis$nj_min_x), 0) + } + sliderInput( + "nj_fruit_width_circ_2", + label = h5("Width", style = "color:white; margin-bottom: 0px"), + min = min, + max = round(ceiling(Vis$nj_max_x) * 0.5, 0), + value = ceiling(Vis$nj_max_x * 0.08), + width = "150px", + ticks = FALSE + ) } - sliderInput( - "nj_fruit_width_circ_2", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = min, - max = round(ceiling(Vis$nj_max_x) * 0.5, 0), - value = ceiling(Vis$nj_max_x * 0.08), - width = "150px", - ticks = FALSE - ) }) output$nj_fruit_width3 <- renderUI({ - if(round(ceiling(Vis$nj_min_x), 0) < 1) { - min <- 1 - } else { - min <- round(ceiling(Vis$nj_min_x), 0) + if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { + if(round(ceiling(Vis$nj_min_x), 0) < 1) { + min <- 1 + } else { + min <- round(ceiling(Vis$nj_min_x), 0) + } + sliderInput( + "nj_fruit_width_circ_3", + label = h5("Width", style = "color:white; margin-bottom: 0px"), + min = min, + max = round(ceiling(Vis$nj_max_x) * 0.5, 0), + value = ceiling(Vis$nj_max_x * 0.08), + width = "150px", + ticks = FALSE + ) } - sliderInput( - "nj_fruit_width_circ_3", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = min, - max = round(ceiling(Vis$nj_max_x) * 0.5, 0), - value = ceiling(Vis$nj_max_x * 0.08), - width = "150px", - ticks = FALSE - ) }) output$nj_fruit_width4 <- renderUI({ - if(round(ceiling(Vis$nj_min_x), 0) < 1) { - min <- 1 - } else { - min <- round(ceiling(Vis$nj_min_x), 0) + if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { + if(round(ceiling(Vis$nj_min_x), 0) < 1) { + min <- 1 + } else { + min <- round(ceiling(Vis$nj_min_x), 0) + } + sliderInput( + "nj_fruit_width_circ_4", + label = h5("Width", style = "color:white; margin-bottom: 0px"), + min = min, + max = round(ceiling(Vis$nj_max_x) * 0.5, 0), + value = ceiling(Vis$nj_max_x * 0.08), + width = "150px", + ticks = FALSE + ) } - sliderInput( - "nj_fruit_width_circ_4", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = min, - max = round(ceiling(Vis$nj_max_x) * 0.5, 0), - value = ceiling(Vis$nj_max_x * 0.08), - width = "150px", - ticks = FALSE - ) }) output$nj_fruit_width5 <- renderUI({ - if(round(ceiling(Vis$nj_min_x), 0) < 1) { - min <- 1 - } else { - min <- round(ceiling(Vis$nj_min_x), 0) + if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { + if(round(ceiling(Vis$nj_min_x), 0) < 1) { + min <- 1 + } else { + min <- round(ceiling(Vis$nj_min_x), 0) + } + sliderInput( + "nj_fruit_width_circ_5", + label = h5("Width", style = "color:white; margin-bottom: 0px"), + min = min, + max = round(ceiling(Vis$nj_max_x) * 0.5, 0), + value = ceiling(Vis$nj_max_x * 0.08), + width = "150px", + ticks = FALSE + ) } - sliderInput( - "nj_fruit_width_circ_5", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = min, - max = round(ceiling(Vis$nj_max_x) * 0.5, 0), - value = ceiling(Vis$nj_max_x * 0.08), - width = "150px", - ticks = FALSE - ) }) # Tip color mapping @@ -11724,142 +11698,323 @@ server <- function(input, output, session) { # Tiles fill color gradient nj_gradient <- reactive({ - if(input$nj_tiles_show == TRUE) { - if(class(DB$meta_true[[input$nj_fruit_variable]]) == "numeric") { - if(input$nj_div_tiles == TRUE) { - if(input$nj_tile_mid == "Median"){ - scale_fill_gradient2(low = input$nj_tile_color_low, - mid = input$nj_tile_color_mid, - midpoint = median(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE), - high = input$nj_tile_color_high) - } else if(input$nj_tile_mid == "Mean") { - scale_fill_gradient2(low = input$nj_tile_color_low, - mid = input$nj_tile_color_mid, - midpoint = mean(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE), - high = input$nj_tile_color_high) + if((!is.null(input$nj_tiles_show_1)) & + (!is.null(input$nj_fruit_variable)) & + (!is.null(input$nj_tiles_scale_1))) { + if(input$nj_tiles_show_1 == TRUE) { + if(input$nj_tiles_scale_1 %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$nj_tiles_mapping_div_mid_1 == "Zero") { + midpoint <- 0 + } else if(input$nj_tiles_mapping_div_mid_1 == "Mean") { + midpoint <- mean(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) } else { - scale_fill_gradient2(low = input$nj_tile_color_low, - mid = input$nj_tile_color_mid, - high = input$nj_tile_color_high) + midpoint <- median(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) } + scale_fill_gradient2(low = brewer.pal(3, input$nj_tiles_scale_1)[1], + mid = brewer.pal(3, input$nj_tiles_scale_1)[2], + high = brewer.pal(3, input$nj_tiles_scale_1)[3], + midpoint = midpoint) } else { - scale_fill_gradient(low = input$nj_tile_color_low, - high = input$nj_tile_color_high) + if(input$nj_tiles_scale_1 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + if(input$nj_tiles_scale_1 == "magma") { + scale_fill_viridis(option = "A") + } else if(input$nj_tiles_scale_1 == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$nj_tiles_scale_1 == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$nj_tiles_scale_1 == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$nj_tiles_scale_1 == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$nj_tiles_scale_1 == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$nj_tiles_scale_1 == "mako") { + scale_fill_viridis(option = "G") + } else if(input$nj_tiles_scale_1 == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$nj_tiles_scale_1 == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$nj_tiles_scale_1 == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$nj_tiles_scale_1 == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$nj_tiles_scale_1 == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$nj_tiles_scale_1 == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$nj_tiles_scale_1 == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$nj_tiles_scale_1 == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$nj_tiles_scale_1 == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_fill_brewer(palette = input$nj_tiles_scale_1) + } } } else {NULL} - } else {NULL} + } }) nj_gradient2 <- reactive({ - if(input$nj_tiles_show_2 == TRUE) { - if(class(DB$meta_true[[input$nj_fruit_variable_2]]) == "numeric") { - if(input$nj_div_tiles == TRUE) { - if(input$nj_tile_mid == "Median"){ - scale_fill_gradient2(low = input$nj_tile_color_low_2, - mid = input$nj_tile_color_mid_2, - midpoint = median(DB$meta_true[[input$nj_fruit_variable_2]], na.rm = TRUE), - high = input$nj_tile_color_high_2) - } else if(input$nj_tile_mid == "Mean") { - scale_fill_gradient2(low = input$nj_tile_color_low_2, - mid = input$nj_tile_color_mid_2, - midpoint = mean(DB$meta_true[[input$nj_fruit_variable_2]], na.rm = TRUE), - high = input$nj_tile_color_high_2) + if((!is.null(input$nj_tiles_show_2)) & + (!is.null(input$nj_fruit_variable_2)) & + (!is.null(input$nj_tiles_scale_2))) { + if(input$nj_tiles_show_2 == TRUE) { + if(input$nj_tiles_scale_2 %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$nj_tiles_mapping_div_mid_2 == "Zero") { + midpoint <- 0 + } else if(input$nj_tiles_mapping_div_mid_2 == "Mean") { + midpoint <- mean(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) } else { - scale_fill_gradient2(low = input$nj_tile_color_low_2, - mid = input$nj_tile_color_mid_2, - high = input$nj_tile_color_high_2) + midpoint <- median(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) } + scale_fill_gradient2(low = brewer.pal(3, input$nj_tiles_scale_2)[1], + mid = brewer.pal(3, input$nj_tiles_scale_2)[2], + high = brewer.pal(3, input$nj_tiles_scale_2)[3], + midpoint = midpoint) } else { - scale_fill_gradient(low = input$nj_tile_color_low_2, - high = input$nj_tile_color_high_2) + if(input$nj_tiles_scale_2 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + if(input$nj_tiles_scale_2 == "magma") { + scale_fill_viridis(option = "A") + } else if(input$nj_tiles_scale_2 == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$nj_tiles_scale_2 == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$nj_tiles_scale_2 == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$nj_tiles_scale_2 == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$nj_tiles_scale_2 == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$nj_tiles_scale_2 == "mako") { + scale_fill_viridis(option = "G") + } else if(input$nj_tiles_scale_2 == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$nj_tiles_scale_2 == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$nj_tiles_scale_2 == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$nj_tiles_scale_2 == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$nj_tiles_scale_2 == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$nj_tiles_scale_2 == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$nj_tiles_scale_2 == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$nj_tiles_scale_2 == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$nj_tiles_scale_2 == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_fill_brewer(palette = input$nj_tiles_scale_2) + } } } else {NULL} - } else {NULL} - + } }) nj_gradient3 <- reactive({ - if(input$nj_tiles_show_3 == TRUE) { - if(class(DB$meta_true[[input$nj_fruit_variable_3]]) == "numeric") { - if(input$nj_div_tiles == TRUE) { - if(input$nj_tile_mid == "Median"){ - scale_fill_gradient3(low = input$nj_tile_color_low_3, - mid = input$nj_tile_color_mid_3, - midpoint = median(DB$meta_true[[input$nj_fruit_variable_3]], na.rm = TRUE), - high = input$nj_tile_color_high_3) - } else if(input$nj_tile_mid == "Mean") { - scale_fill_gradient3(low = input$nj_tile_color_low_3, - mid = input$nj_tile_color_mid_3, - midpoint = mean(DB$meta_true[[input$nj_fruit_variable_3]], na.rm = TRUE), - high = input$nj_tile_color_high_3) + if((!is.null(input$nj_tiles_show_3)) & + (!is.null(input$nj_fruit_variable_3)) & + (!is.null(input$nj_tiles_scale_3))) { + if(input$nj_tiles_show_3 == TRUE) { + if(input$nj_tiles_scale_3 %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$nj_tiles_mapping_div_mid_3 == "Zero") { + midpoint <- 0 + } else if(input$nj_tiles_mapping_div_mid_3 == "Mean") { + midpoint <- mean(DB$meta_true[[input$nj_fruit_variable_1]], na.rm = TRUE) } else { - scale_fill_gradient3(low = input$nj_tile_color_low_3, - mid = input$nj_tile_color_mid_3, - high = input$nj_tile_color_high_3) + midpoint <- median(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) } + scale_fill_gradient3(low = brewer.pal(3, input$nj_tiles_scale_3)[1], + mid = brewer.pal(3, input$nj_tiles_scale_3)[2], + high = brewer.pal(3, input$nj_tiles_scale_3)[3], + midpoint = midpoint) } else { - scale_fill_gradient(low = input$nj_tile_color_low_3, - high = input$nj_tile_color_high_3) + if(input$nj_tiles_scale_3 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + if(input$nj_tiles_scale_3 == "magma") { + scale_fill_viridis(option = "A") + } else if(input$nj_tiles_scale_3 == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$nj_tiles_scale_3 == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$nj_tiles_scale_3 == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$nj_tiles_scale_3 == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$nj_tiles_scale_3 == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$nj_tiles_scale_3 == "mako") { + scale_fill_viridis(option = "G") + } else if(input$nj_tiles_scale_3 == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$nj_tiles_scale_3 == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$nj_tiles_scale_3 == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$nj_tiles_scale_3 == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$nj_tiles_scale_3 == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$nj_tiles_scale_3 == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$nj_tiles_scale_3 == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$nj_tiles_scale_3 == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$nj_tiles_scale_3 == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_fill_brewer(palette = input$nj_tiles_scale_3) + } } } else {NULL} - }else {NULL} - + } }) nj_gradient4 <- reactive({ - if(input$nj_tiles_show_4 == TRUE) { - if(class(DB$meta_true[[input$nj_fruit_variable_4]]) == "numeric") { - if(input$nj_div_tiles == TRUE) { - if(input$nj_tile_mid == "Median"){ - scale_fill_gradient2(low = input$nj_tile_color_low_4, - mid = input$nj_tile_color_mid_4, - midpoint = median(DB$meta_true[[input$nj_fruit_variable_4]], na.rm = TRUE), - high = input$nj_tile_color_high_4) - } else if(input$nj_tile_mid == "Mean") { - scale_fill_gradient2(low = input$nj_tile_color_low_4, - mid = input$nj_tile_color_mid_4, - midpoint = mean(DB$meta_true[[input$nj_fruit_variable_4]], na.rm = TRUE), - high = input$nj_tile_color_high_4) + if((!is.null(input$nj_tiles_show_4)) & + (!is.null(input$nj_fruit_variable_4)) & + (!is.null(input$nj_tiles_scale_4))) { + if(input$nj_tiles_show_4 == TRUE) { + if(input$nj_tiles_scale_4 %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$nj_tiles_mapping_div_mid_4 == "Zero") { + midpoint <- 0 + } else if(input$nj_tiles_mapping_div_mid_4 == "Mean") { + midpoint <- mean(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) } else { - scale_fill_gradient2(low = input$nj_tile_color_low_4, - mid = input$nj_tile_color_mid_4, - high = input$nj_tile_color_high_4) + midpoint <- median(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) } + scale_fill_gradient4(low = brewer.pal(3, input$nj_tiles_scale_4)[1], + mid = brewer.pal(3, input$nj_tiles_scale_4)[2], + high = brewer.pal(3, input$nj_tiles_scale_4)[3], + midpoint = midpoint) } else { - scale_fill_gradient(low = input$nj_tile_color_low_4, - high = input$nj_tile_color_high_4) + if(input$nj_tiles_scale_4 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + if(input$nj_tiles_scale_4 == "magma") { + scale_fill_viridis(option = "A") + } else if(input$nj_tiles_scale_4 == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$nj_tiles_scale_4 == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$nj_tiles_scale_4 == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$nj_tiles_scale_4 == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$nj_tiles_scale_4 == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$nj_tiles_scale_4 == "mako") { + scale_fill_viridis(option = "G") + } else if(input$nj_tiles_scale_4 == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$nj_tiles_scale_4 == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$nj_tiles_scale_4 == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$nj_tiles_scale_4 == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$nj_tiles_scale_4 == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$nj_tiles_scale_4 == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$nj_tiles_scale_4 == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$nj_tiles_scale_4 == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$nj_tiles_scale_4 == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_fill_brewer(palette = input$nj_tiles_scale_4) + } } } else {NULL} - } else {NULL} - + } }) nj_gradient5 <- reactive({ - if(input$nj_tiles_show_5 == TRUE) { - if(class(DB$meta_true[[input$nj_fruit_variable_5]]) == "numeric") { - if(input$nj_div_tiles == TRUE) { - if(input$nj_tile_mid == "Median"){ - scale_fill_gradient2(low = input$nj_tile_color_low_5, - mid = input$nj_tile_color_mid_5, - midpoint = median(DB$meta_true[[input$nj_fruit_variable_5]], na.rm = TRUE), - high = input$nj_tile_color_high_5) - } else if(input$nj_tile_mid == "Mean") { - scale_fill_gradient2(low = input$nj_tile_color_low_5, - mid = input$nj_tile_color_mid_5, - midpoint = mean(DB$meta_true[[input$nj_fruit_variable_5]], na.rm = TRUE), - high = input$nj_tile_color_high_5) + if((!is.null(input$nj_tiles_show_5)) & + (!is.null(input$nj_fruit_variable_5)) & + (!is.null(input$nj_tiles_scale_5))) { + if(input$nj_tiles_show_5 == TRUE) { + if(input$nj_tiles_scale_5 %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$nj_tiles_mapping_div_mid_5 == "Zero") { + midpoint <- 0 + } else if(input$nj_tiles_mapping_div_mid_5 == "Mean") { + midpoint <- mean(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) } else { - scale_fill_gradient2(low = input$nj_tile_color_low_5, - mid = input$nj_tile_color_mid_5, - high = input$nj_tile_color_high_5) + midpoint <- median(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) } + scale_fill_gradient5(low = brewer.pal(3, input$nj_tiles_scale_5)[1], + mid = brewer.pal(3, input$nj_tiles_scale_5)[2], + high = brewer.pal(3, input$nj_tiles_scale_5)[3], + midpoint = midpoint) } else { - scale_fill_gradient(low = input$nj_tile_color_low_5, - high = input$nj_tile_color_high_5) + if(input$nj_tiles_scale_5 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + if(input$nj_tiles_scale_5 == "magma") { + scale_fill_viridis(option = "A") + } else if(input$nj_tiles_scale_5 == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$nj_tiles_scale_5 == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$nj_tiles_scale_5 == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$nj_tiles_scale_5 == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$nj_tiles_scale_5 == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$nj_tiles_scale_5 == "mako") { + scale_fill_viridis(option = "G") + } else if(input$nj_tiles_scale_5 == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$nj_tiles_scale_5 == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$nj_tiles_scale_5 == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$nj_tiles_scale_5 == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$nj_tiles_scale_5 == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$nj_tiles_scale_5 == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$nj_tiles_scale_5 == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$nj_tiles_scale_5 == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$nj_tiles_scale_5 == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_fill_brewer(palette = input$nj_tiles_scale_5) + } } } else {NULL} - } else {NULL} - + } }) # No label clip off for linear NJ tree @@ -11871,118 +12026,149 @@ server <- function(input, output, session) { # Geom Fruit nj_fruit <- reactive({ - if(input$nj_tiles_show == TRUE) { - if(input$nj_layout == "circular" | input$nj_layout == "inward") { - geom_fruit( - geom = geom_tile, - mapping = aes(fill= !!sym(input$nj_fruit_variable)), - offset = input$nj_fruit_offset_circ, - pwidth = input$nj_fruit_width_circ, - alpha = input$nj_fruit_alpha - ) - } else { - geom_fruit( - geom = geom_tile, - mapping = aes(fill= !!sym(input$nj_fruit_variable)), - offset = input$nj_fruit_offset_circ, - pwidth = input$nj_fruit_width_circ, - alpha = input$nj_fruit_alpha - ) - } + if((!is.null(input$nj_tiles_show_1)) & + (!is.null(input$nj_fruit_variable)) & + (!is.null(input$nj_layout)) & + (!is.null(input$nj_fruit_offset_circ)) & + (!is.null(input$nj_fruit_width_circ)) & + (!is.null(input$nj_fruit_alpha))) { + if(input$nj_tiles_show_1 == TRUE) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = input$nj_fruit_offset_circ, + pwidth = input$nj_fruit_width_circ, + alpha = input$nj_fruit_alpha + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = input$nj_fruit_offset_circ, + pwidth = input$nj_fruit_width_circ, + alpha = input$nj_fruit_alpha + ) + } + } else {NULL} } else {NULL} }) # Geom Fruit nj_fruit2 <- reactive({ - if(input$nj_tiles_show_2 == TRUE) { - if(input$nj_layout == "circular" | input$nj_layout == "inward") { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$nj_fruit_variable_2)), - offset = input$nj_fruit_offset_circ_2, - pwidth = input$nj_fruit_width_circ_2, - alpha = input$nj_fruit_alpha_2 - ) - } else { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$nj_fruit_variable_2)), - offset = input$nj_fruit_offset_circ_2, - pwidth = input$nj_fruit_width_circ_2, - alpha = input$nj_fruit_alpha_2 - ) - } + if((!is.null(input$nj_tiles_show_2)) & + (!is.null(input$nj_fruit_variable_2)) & + (!is.null(input$nj_layout)) & + (!is.null(input$nj_fruit_offset_circ_2)) & + (!is.null(input$nj_fruit_width_circ_2)) & + (!is.null(input$nj_fruit_alpha_2))) { + if(input$nj_tiles_show_2 == TRUE) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$nj_fruit_variable_2)), + offset = input$nj_fruit_offset_circ_2, + pwidth = input$nj_fruit_width_circ_2, + alpha = input$nj_fruit_alpha_2 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$nj_fruit_variable_2)), + offset = input$nj_fruit_offset_circ_2, + pwidth = input$nj_fruit_width_circ_2, + alpha = input$nj_fruit_alpha_2 + ) + } + } else {NULL} } else {NULL} }) nj_fruit3 <- reactive({ - if(input$nj_tiles_show_3 == TRUE) { - if(input$nj_layout == "circular" | input$nj_layout == "inward") { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$nj_fruit_variable_3)), - offset = input$nj_fruit_offset_circ_3, - pwidth = input$nj_fruit_width_circ_3, - alpha = input$nj_fruit_alpha_3 - ) - } else { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$nj_fruit_variable_3)), - offset = input$nj_fruit_offset_circ_3, - pwidth = input$nj_fruit_width_circ_3, - alpha = input$nj_fruit_alpha_3 - ) - } + if((!is.null(input$nj_tiles_show_3)) & + (!is.null(input$nj_fruit_variable_3)) & + (!is.null(input$nj_layout)) & + (!is.null(input$nj_fruit_offset_circ_3)) & + (!is.null(input$nj_fruit_width_circ_3)) & + (!is.null(input$nj_fruit_alpha_3))) { + if(input$nj_tiles_show_3 == TRUE) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$nj_fruit_variable_3)), + offset = input$nj_fruit_offset_circ_3, + pwidth = input$nj_fruit_width_circ_3, + alpha = input$nj_fruit_alpha_3 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$nj_fruit_variable_3)), + offset = input$nj_fruit_offset_circ_3, + pwidth = input$nj_fruit_width_circ_3, + alpha = input$nj_fruit_alpha_3 + ) + } + } else {NULL} } else {NULL} - - }) nj_fruit4 <- reactive({ - if(input$nj_tiles_show_4 == TRUE) { - if(input$nj_layout == "circular" | input$nj_layout == "inward") { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$nj_fruit_variable_4)), - offset = input$nj_fruit_offset_circ_4, - pwidth = input$nj_fruit_width_circ_4, - alpha = input$nj_fruit_alpha_4 - ) - } else { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$nj_fruit_variable_4)), - offset = input$nj_fruit_offset_circ_4, - pwidth = input$nj_fruit_width_circ_4, - alpha = input$nj_fruit_alpha_4 - ) - } - } else {NULL} - + if((!is.null(input$nj_tiles_show_4)) & + (!is.null(input$nj_fruit_variable_4)) & + (!is.null(input$nj_layout)) & + (!is.null(input$nj_fruit_offset_circ_4)) & + (!is.null(input$nj_fruit_width_circ_4)) & + (!is.null(input$nj_fruit_alpha_4))) { + if(input$nj_tiles_show_4 == TRUE) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$nj_fruit_variable_4)), + offset = input$nj_fruit_offset_circ_4, + pwidth = input$nj_fruit_width_circ_4, + alpha = input$nj_fruit_alpha_4 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$nj_fruit_variable_4)), + offset = input$nj_fruit_offset_circ_4, + pwidth = input$nj_fruit_width_circ_4, + alpha = input$nj_fruit_alpha_4 + ) + } + } else {NULL} + } }) nj_fruit5 <- reactive({ - if(input$nj_tiles_show_5 == TRUE) { - if(input$nj_layout == "circular" | input$nj_layout == "inward") { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$nj_fruit_variable_5)), - offset = input$nj_fruit_offset_circ_5, - pwidth = input$nj_fruit_width_circ_5, - alpha = input$nj_fruit_alpha_5 - ) - } else { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$nj_fruit_variable_5)), - offset = input$nj_fruit_offset_circ_5, - pwidth = input$nj_fruit_width_circ_5, - alpha = input$nj_fruit_alpha_5 - ) - } + if((!is.null(input$nj_tiles_show_5)) & + (!is.null(input$nj_fruit_variable_5)) & + (!is.null(input$nj_layout)) & + (!is.null(input$nj_fruit_offset_circ_5)) & + (!is.null(input$nj_fruit_width_circ_5)) & + (!is.null(input$nj_fruit_alpha_5))) { + if(input$nj_tiles_show_5 == TRUE) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$nj_fruit_variable_5)), + offset = input$nj_fruit_offset_circ_5, + pwidth = input$nj_fruit_width_circ_5, + alpha = input$nj_fruit_alpha_5 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$nj_fruit_variable_5)), + offset = input$nj_fruit_offset_circ_5, + pwidth = input$nj_fruit_width_circ_5, + alpha = input$nj_fruit_alpha_5 + ) + } + } else {NULL} } else {NULL} - }) # Xlim From 329973de8202076ffd1ec8889c194ce03f91bc23 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Tue, 12 Mar 2024 21:10:26 +0100 Subject: [PATCH 06/26] Adapted heatmap feature to visualization changes --- App.R | 201 ++++++++++++++++++++++++++++++++++++++++++++------ www/mycss.css | 5 -- 2 files changed, 177 insertions(+), 29 deletions(-) diff --git a/App.R b/App.R index 51037d4..f91127a 100644 --- a/App.R +++ b/App.R @@ -2763,16 +2763,17 @@ ui <- dashboardPage( ), fluidRow( column( - width = 4, + width = 7, align = "left", - checkboxInput( - "nj_heatmap_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + textInput( + "nj_heatmap_title", + label = h5("Legend Title", style = "color:white; margin-bottom: 0px;"), + value = "Heatmap", + placeholder = "Heatmap" ) ), column( - width = 7, + width = 5, align = "right", dropMenu( actionBttn( @@ -2838,21 +2839,6 @@ ui <- dashboardPage( ) ) ) - ), - fluidRow( - column( - width = 6, - uiOutput("nj_heatmap_sel") - ), - column( - width = 6, - textInput( - "nj_heatmap_title", - label = h5("Legend title", style = "color:white; margin-bottom: 0px; position: relative; bottom: -20px"), - value = "Heatmap", - placeholder = "Heatmap" - ) - ) ) ) ) @@ -3198,6 +3184,38 @@ ui <- dashboardPage( ) ) ) + ), + fluidRow( + column( + width = 3, + checkboxInput( + "nj_heatmap_show", + h5(p("Heatmap"), style = "color:white; position: relative; bottom: -8px; right: -17px"), + value = FALSE + ) + ), + column( + width = 3, + align = "center", + uiOutput("nj_heatmap_sel") + ), + column( + width = 3, + align = "center", + uiOutput("nj_heatmap_scale") + ), + conditionalPanel( + "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_heatmap_scale)", + column( + width = 3, + selectInput( + "nj_heatmap_div_mid", + label = h5("Midpoint", style = "color:white; font-size: 14px;"), + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) ) ) ) @@ -9811,6 +9829,76 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- + # Heatmap variable color scale + output$nj_heatmap_scale <- renderUI({ + if(class(unlist(DB$meta[input$nj_heatmap_select])) == "numeric") { + selectInput( + "nj_heatmap_scale", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) + } else { + selectInput( + "nj_heatmap_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + } + }) + # Tiles variable color scale output$nj_tiles_scale_1 <- renderUI({ if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { @@ -11513,8 +11601,10 @@ server <- function(input, output, session) { nj_gradient4() + new_scale_fill() + nj_fruit5() + - nj_gradient5() + nj_gradient5() + + new_scale_fill() + # Add heatmap if(input$nj_heatmap_show == TRUE & length(input$nj_heatmap_select) > 0) { tree <- gheatmap(tree, data = select(Vis$meta_nj, input$nj_heatmap_select), @@ -11523,19 +11613,82 @@ server <- function(input, output, session) { legend_title = input$nj_heatmap_title, colnames_angle = -(input$nj_colnames_angle), colnames_offset_x = input$nj_colnames_x, - colnames_offset_y = input$nj_colnames_y - ) + colnames_offset_y = input$nj_colnames_y) + + heatmap_scale() } + # Sizing control Vis$nj_plot <- ggplotify::as.ggplot(tree, scale = input$nj_zoom, hjust = input$nj_h, vjust = input$nj_v) + # Correct background color if zoomed out cowplot::ggdraw(Vis$nj_plot) + theme(plot.background = element_rect(fill = input$nj_bg, color = input$nj_bg)) }) + # Heatmap scale + heatmap_scale <- reactive({ + if(!is.null(input$nj_heatmap_scale)) { + if(input$nj_heatmap_scale %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$nj_heatmap_div_mid == "Zero") { + midpoint <- 0 + } else if(input$nj_heatmap_div_mid == "Mean") { + midpoint <- mean(DB$meta_true[[input$nj_heatmap_select]], na.rm = TRUE) + } else { + midpoint <- median(DB$meta_true[[input$nj_heatmap_select]], na.rm = TRUE) + } + scale_fill_gradient2(low = brewer.pal(3, input$nj_heatmap_scale)[1], + mid = brewer.pal(3, input$nj_heatmap_scale)[2], + high = brewer.pal(3, input$nj_heatmap_scale)[3], + midpoint = midpoint) + } else { + if(input$nj_heatmap_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$nj_heatmap_select])) == "numeric") { + if(input$nj_heatmap_scale == "magma") { + scale_fill_viridis(option = "A") + } else if(input$nj_heatmap_scale == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$nj_heatmap_scale == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$nj_heatmap_scale == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$nj_heatmap_scale == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$nj_heatmap_scale == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$nj_heatmap_scale == "mako") { + scale_fill_viridis(option = "G") + } else if(input$nj_heatmap_scale == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$nj_heatmap_scale == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$nj_heatmap_scale == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$nj_heatmap_scale == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$nj_heatmap_scale == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$nj_heatmap_scale == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$nj_heatmap_scale == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$nj_heatmap_scale == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$nj_heatmap_scale == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_fill_brewer(palette = input$nj_heatmap_scale) + } + } + } + }) + # Tippoint Scale nj_tippoint_scale <- reactive({ if(!is.null(input$nj_tippoint_scale)) { diff --git a/www/mycss.css b/www/mycss.css index 8969265..3a218cb 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -1046,11 +1046,6 @@ button#nj_tile_menu_5 { margin-left: 15px } -#nj_heatmap_title { - position: relative; - bottom: -20px -} - #nj_nodepoint_show { margin-top: 18px; margin-left: -5px From d5dc35d340afc9800637eadfaf11549a22fa2039 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Tue, 12 Mar 2024 22:33:10 +0100 Subject: [PATCH 07/26] Extended clade highlight function --- App.R | 338 +++++++++++++++++++++++++++++++++++--------------- www/mycss.css | 8 ++ 2 files changed, 246 insertions(+), 100 deletions(-) diff --git a/App.R b/App.R index f91127a..d731aa2 100644 --- a/App.R +++ b/App.R @@ -2858,15 +2858,6 @@ ui <- dashboardPage( h4(p("Clade Highlight"), style = "color:white; position: relative; right: -15px") ) ), - fluidRow( - column( - width = 5, - checkboxInput( - "nj_clades_show", - "Show" - ) - ) - ), fluidRow( column( width = 12, @@ -2886,6 +2877,64 @@ ui <- dashboardPage( width = 7, uiOutput("nj_parentnode") ) + ), + uiOutput("nj_clade_coloring"), + fluidRow( + column( + width = 5, + align = "left", + selectInput( + "nj_clade_type", + h5(p("Type"), style = "color:white;"), + choices = c("Rectangular" = "rect", + "Roundrect" = "roundrect", + "Gradient" = "gradient") + ) + ), + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "nj_clade_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-end", + theme = "translucent", + fluidRow( + column( + width = 12, + selectInput( + "nj_clade_align", + label = h5("Align", style = "color:white; font-size: 14px;"), + choices = c("None" = "none", + "Left" = "left", + "Right" = "right", + "Both" = "both") + ), + br(), + selectInput( + "nj_clade_grad_dir", + label = h5("Gradient Direction", style = "color:white; font-size: 14px; "), + choices = c("Right" = "rt", + "Left" = "tr") + ), + br(), + sliderInput( + "nj_grad_len", + label = h5("Gradient Length", style = "color:white; font-size: 14px; "), + min = 1, + max = 10, + value = 2 + ) + ) + ) + ) + ) ) ) ) @@ -9829,6 +9878,77 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- + # Clade coloring + output$nj_clade_coloring <- renderUI({ + if(length(input$nj_parentnode) <= 1) { + fluidRow( + column( + width = 4, + h5("Color", style = "color:white; margin-bottom: 0px") + ), + column( + width = 8, + colorPickr( + inputId = "nj_clade_scale", + selected = "#D0F221", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ) + ) + } else { + fluidRow( + column( + width = 4, + h5("Scale", style = "color:white; margin-bottom: 0px") + ), + column( + width = 8, + selectInput( + "nj_clade_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + ) + ) + } + }) + # Heatmap variable color scale output$nj_heatmap_scale <- renderUI({ if(class(unlist(DB$meta[input$nj_heatmap_select])) == "numeric") { @@ -10391,7 +10511,7 @@ server <- function(input, output, session) { pickerInput( "nj_parentnode", label = "", - choices = Vis$nj_parentnodes, + choices = sort(unique(as.numeric(Vis$nj_parentnodes))), multiple = TRUE, options = list( `live-search` = TRUE, @@ -11547,85 +11667,90 @@ server <- function(input, output, session) { #### NJ ---- nj_tree <- reactive({ - tree <- - ggtree(Vis$nj, - color = input$nj_color, - layout = layout_nj(), - ladderize = input$nj_ladder, - alpha = nj_alpha()) %<+% Vis$meta_nj + - nj_tiplab() + - nj_tiplab_scale() + - new_scale_color() + - limit() + - inward() + - label_branch() + - treescale() + - nodepoint() + - tippoint() + - nj_tippoint_scale() + - new_scale_color() + - clip_label() + - nj_rootedge() + - nj_nodelabel() + - nj_clades() + - ggtitle(label = input$nj_title, - subtitle = input$nj_subtitle) + - theme_tree(bgcolor = input$nj_bg) + - theme(plot.title = element_text(colour = input$nj_title_color, - size = input$nj_title_size), - plot.subtitle = element_text(colour = input$nj_subtitle_color, - size = input$nj_subtitle_size), - legend.background = element_rect(fill = input$nj_bg), - legend.direction = input$nj_legend_orientation, - legend.title = element_text(color = input$nj_color, - size = input$nj_legend_size*1.2), - legend.title.align = 0.5, - legend.position = nj_legend_pos(), - legend.text = element_text(color = input$nj_color, - size = input$nj_legend_size), - legend.key = element_rect(fill = input$nj_bg), - legend.box.spacing = unit(1.5, "cm"), - legend.key.size = unit(0.05*input$nj_legend_size, 'cm'), - plot.background = element_rect(fill = input$nj_bg, color = input$nj_bg)) + - new_scale_fill() + - nj_fruit() + - nj_gradient() + - new_scale_fill() + - nj_fruit2() + - nj_gradient2() + - new_scale_fill() + - nj_fruit3() + - nj_gradient3() + - new_scale_fill() + - nj_fruit4() + - nj_gradient4() + - new_scale_fill() + - nj_fruit5() + - nj_gradient5() + - new_scale_fill() - - # Add heatmap - if(input$nj_heatmap_show == TRUE & length(input$nj_heatmap_select) > 0) { - tree <- gheatmap(tree, - data = select(Vis$meta_nj, input$nj_heatmap_select), - offset = nj_heatmap_offset(), - width = input$nj_heatmap_width, - legend_title = input$nj_heatmap_title, - colnames_angle = -(input$nj_colnames_angle), - colnames_offset_x = input$nj_colnames_x, - colnames_offset_y = input$nj_colnames_y) + - heatmap_scale() - } - - # Sizing control - Vis$nj_plot <- ggplotify::as.ggplot(tree, - scale = input$nj_zoom, - hjust = input$nj_h, - vjust = input$nj_v) - - # Correct background color if zoomed out - cowplot::ggdraw(Vis$nj_plot) + - theme(plot.background = element_rect(fill = input$nj_bg, color = input$nj_bg)) + if(input$nj_nodelabel_show == TRUE) { + ggtree(Vis$nj, alpha = 0.2) + + geom_nodelab(aes(label = node), color = "#29303A", size = nj_tiplab_size() + 1, hjust = 0.7) + + limit() + + inward() + } else { + tree <- + ggtree(Vis$nj, + color = input$nj_color, + layout = layout_nj(), + ladderize = input$nj_ladder) %<+% Vis$meta_nj + + nj_tiplab() + + nj_tiplab_scale() + + new_scale_color() + + limit() + + inward() + + label_branch() + + treescale() + + nodepoint() + + tippoint() + + nj_tippoint_scale() + + new_scale_color() + + clip_label() + + nj_rootedge() + + nj_clades() + + ggtitle(label = input$nj_title, + subtitle = input$nj_subtitle) + + theme_tree(bgcolor = input$nj_bg) + + theme(plot.title = element_text(colour = input$nj_title_color, + size = input$nj_title_size), + plot.subtitle = element_text(colour = input$nj_subtitle_color, + size = input$nj_subtitle_size), + legend.background = element_rect(fill = input$nj_bg), + legend.direction = input$nj_legend_orientation, + legend.title = element_text(color = input$nj_color, + size = input$nj_legend_size*1.2), + legend.title.align = 0.5, + legend.position = nj_legend_pos(), + legend.text = element_text(color = input$nj_color, + size = input$nj_legend_size), + legend.key = element_rect(fill = input$nj_bg), + legend.box.spacing = unit(1.5, "cm"), + legend.key.size = unit(0.05*input$nj_legend_size, 'cm'), + plot.background = element_rect(fill = input$nj_bg, color = input$nj_bg)) + + new_scale_fill() + + nj_fruit() + + nj_gradient() + + new_scale_fill() + + nj_fruit2() + + nj_gradient2() + + new_scale_fill() + + nj_fruit3() + + nj_gradient3() + + new_scale_fill() + + nj_fruit4() + + nj_gradient4() + + new_scale_fill() + + nj_fruit5() + + nj_gradient5() + + new_scale_fill() + + # Add heatmap + if(input$nj_heatmap_show == TRUE & length(input$nj_heatmap_select) > 0) { + tree <- gheatmap(tree, + data = select(Vis$meta_nj, input$nj_heatmap_select), + offset = nj_heatmap_offset(), + width = input$nj_heatmap_width, + legend_title = input$nj_heatmap_title, + colnames_angle = -(input$nj_colnames_angle), + colnames_offset_x = input$nj_colnames_x, + colnames_offset_y = input$nj_colnames_y) + + heatmap_scale() + } + + # Sizing control + Vis$nj_plot <- ggplotify::as.ggplot(tree, + scale = input$nj_zoom, + hjust = input$nj_h, + vjust = input$nj_v) + + # Correct background color if zoomed out + cowplot::ggdraw(Vis$nj_plot) + + theme(plot.background = element_rect(fill = input$nj_bg, color = input$nj_bg)) + } }) # Heatmap scale @@ -11814,23 +11939,36 @@ server <- function(input, output, session) { # Clade Highlight nj_clades <- reactive({ if(!is.null(input$nj_parentnode)) { - if(input$nj_clades_show == TRUE & (!length(input$nj_parentnode) == 0)) { - geom_highlight(node = input$nj_parentnode) + if(!length(input$nj_parentnode) == 0) { + if(length(input$nj_parentnode) == 1) { + fill <- input$nj_clade_scale + } else if (length(input$nj_parentnode) == 2) { + fill <- brewer.pal(3, input$nj_clade_scale)[1:2] + } else { + fill <- brewer.pal(length(input$nj_parentnode), input$nj_clade_scale) + } + geom_hilight(node = as.numeric(input$nj_parentnode), + fill = fill, + align = input$nj_clade_align, + type = input$nj_clade_type, + gradient.direction = nj_clade_grad_dir(), + gradient.length.out = nj_clade_grad_len()) } else {NULL} } }) - # Nodelabel - nj_nodelabel <- reactive({ - if(input$nj_nodelabel_show == TRUE) { - geom_nodelab(aes(label = node), color = "#29303A", size = nj_tiplab_size() + 1, hjust = 0.7) - } else {NULL} + # Clade highlight gradient direction + nj_clade_grad_dir <- reactive({ + if(input$nj_clade_type == "gradient") { + input$nj_clade_grad_dir + } else {"rt"} }) - nj_alpha <- reactive({ - if(input$nj_nodelabel_show == TRUE) { - 0.2 - } else {1} + # Clade hightlight gradient length + nj_clade_grad_len <- reactive({ + if(input$nj_clade_type == "gradient") { + nj_clade_grad_len + } else {2} }) # Legend Position diff --git a/www/mycss.css b/www/mycss.css index 3a218cb..9eebb82 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -740,6 +740,14 @@ button#nj_heatmap_menu { border-radius: 5px } +button#nj_clade_menu { + height: 34px; + background: #20E6E5; + color: #000000; + margin-top: 21px; + border-radius: 5px +} + button#nj_tile_menu { height: 34px; background: #20E6E5; From 53a83ad5b6025b2e9158885ae94763e47ed13901 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Wed, 13 Mar 2024 11:39:04 +0100 Subject: [PATCH 08/26] Colored variable scale selectors --- App.R | 16 +- www/mycss.css | 444 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 456 insertions(+), 4 deletions(-) diff --git a/App.R b/App.R index d731aa2..5333cf6 100644 --- a/App.R +++ b/App.R @@ -8747,6 +8747,9 @@ server <- function(input, output, session) { # Change scheme observeEvent(input$reload_db, { + test <<- input$nj_tiplab + est <<- input$nj_tiplab_show + if(tail(readLines(paste0(getwd(), "/execute/script_log.txt")), 1)!= "0") { show_toast( title = "Pending Multi Typing", @@ -12730,15 +12733,20 @@ server <- function(input, output, session) { # NJ Tiplab color mapping_tiplab <- reactive({ - if(!is.null(input$nj_tiplab)) { - if(input$nj_mapping_show == TRUE) { + if(input$nj_mapping_show == TRUE) { + if(!is.null(input$nj_tiplab)) { aes(label = !!sym(input$nj_tiplab), color = !!sym(input$nj_color_mapping)) } else { - aes(label = !!sym(input$nj_tiplab)) + aes(label = !!sym("Assembly Name"), + color = !!sym(input$nj_color_mapping)) } } else { - aes(label = !!sym("Assembly Name")) + if(!is.null(input$nj_tiplab)) { + aes(label = !!sym(input$nj_tiplab)) + } else { + aes(label = !!sym("Assembly Name")) + } } }) diff --git a/www/mycss.css b/www/mycss.css index 9eebb82..8663a2a 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -8,6 +8,450 @@ animation: pulsate 1s ease infinite; } + +#nj_tiplab_scale .option[data-value="Set1"], +#nj_tippoint_scale .option[data-value="Set1"], +#nj_tiles_scale_1 .option[data-value="Set1"], +#nj_tiles_scale_2 .option[data-value="Set1"], +#nj_tiles_scale_3 .option[data-value="Set1"], +#nj_tiles_scale_4 .option[data-value="Set1"], +#nj_tiles_scale_5 .option[data-value="Set1"], +#nj_heatmap_scale .option[data-value="Set1"] { + background: linear-gradient(to right, #E41A1C 0%, #E41A1C 11%, #377EB8 11%, #377EB8 22%, #4DAF4A 22%, #4DAF4A 33%, #984EA3 33%, #984EA3 44%, #FF7F00 44%, #FF7F00 55%, #FFFF33 55%, #FFFF33 66%, #A65628 66%, #A65628 77%, #F781BF 77%, #F781BF 88%, #999999 88%, #999999 100%); + color: black; + margin-bottom: 2px; +} + + +#nj_tiplab_scale .option[data-value="Set2"], +#nj_tippoint_scale .option[data-value="Set2"], +#nj_tiles_scale_1 .option[data-value="Set2"], +#nj_tiles_scale_2 .option[data-value="Set2"], +#nj_tiles_scale_3 .option[data-value="Set2"], +#nj_tiles_scale_4 .option[data-value="Set2"], +#nj_tiles_scale_5 .option[data-value="Set2"], +#nj_heatmap_scale .option[data-value="Set2"] { + background: linear-gradient(to right, #66C2A5 0%, #66C2A5 12.5%, #FC8D62 12.5%, #FC8D62 25%, #8DA0CB 25%, #8DA0CB 37.5%, #E78AC3 37.5%, #E78AC3 50%, #A6D854 50%, #A6D854 62.5%, #FFD92F 62.5%, #FFD92F 75%, #E5C494 75%, #E5C494 87.5%, #B3B3B3 87.5%, #B3B3B3 100%); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Set3"], +#nj_tippoint_scale .option[data-value="Set3"], +#nj_tiles_scale_1 .option[data-value="Set3"], +#nj_tiles_scale_2 .option[data-value="Set3"], +#nj_tiles_scale_3 .option[data-value="Set3"], +#nj_tiles_scale_4 .option[data-value="Set3"], +#nj_tiles_scale_5 .option[data-value="Set3"], +#nj_heatmap_scale .option[data-value="Set3"] { + background: linear-gradient(to right, #8DD3C7 0%, #8DD3C7 8.33333%, #FFFFB3 8.33333%, #FFFFB3 16.6667%, #BEBADA 16.6667%, #BEBADA 25%, #FB8072 25%, #FB8072 33.3333%, #80B1D3 33.3333%, #80B1D3 41.6667%, #FDB462 41.6667%, #FDB462 50%, #B3DE69 50%, #B3DE69 58.3333%, #FCCDE5 58.3333%, #FCCDE5 66.6667%, #D9D9D9 66.6667%, #D9D9D9 75%, #BC80BD 75%, #BC80BD 83.3333%, #CCEBC5 83.3333%, #CCEBC5 91.6667%, #FFED6F 91.6667%, #FFED6F 100%); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Pastel1"], +#nj_tippoint_scale .option[data-value="Pastel1"], +#nj_tiles_scale_1 .option[data-value="Pastel1"], +#nj_tiles_scale_2 .option[data-value="Pastel1"], +#nj_tiles_scale_3 .option[data-value="Pastel1"], +#nj_tiles_scale_4 .option[data-value="Pastel1"], +#nj_tiles_scale_5 .option[data-value="Pastel1"], +#nj_heatmap_scale .option[data-value="Pastel1"] { + background: linear-gradient(to right, #FBB4AE 0%, #FBB4AE 11.1111%, #B3CDE3 11.1111%, #B3CDE3 22.2222%, #CCEBC5 22.2222%, #CCEBC5 33.3333%, #DECBE4 33.3333%, #DECBE4 44.4444%, #FED9A6 44.4444%, #FED9A6 55.5556%, #FFFFCC 55.5556%, #FFFFCC 66.6667%, #E5D8BD 66.6667%, #E5D8BD 77.7778%, #FDDAEC 77.7778%, #FDDAEC 88.8889%, #F2F2F2 88.8889%, #F2F2F2 100%); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Pastel2"], +#nj_tippoint_scale .option[data-value="Pastel2"], +#nj_tiles_scale_1 .option[data-value="Pastel2"], +#nj_tiles_scale_2 .option[data-value="Pastel2"], +#nj_tiles_scale_3 .option[data-value="Pastel2"], +#nj_tiles_scale_4 .option[data-value="Pastel2"], +#nj_tiles_scale_5 .option[data-value="Pastel2"], +#nj_heatmap_scale .option[data-value="Pastel2"] { + background: linear-gradient(to right, #B3E2CD 0%, #B3E2CD 12.5%, #FDCDAC 12.5%, #FDCDAC 25%, #CBD5E8 25%, #CBD5E8 37.5%, #F4CAE4 37.5%, #F4CAE4 50%, #E6F5C9 50%, #E6F5C9 62.5%, #FFF2AE 62.5%, #FFF2AE 75%, #F1E2CC 75%, #F1E2CC 87.5%, #CCCCCC 87.5%, #CCCCCC 100%); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Paired"], +#nj_tippoint_scale .option[data-value="Paired"], +#nj_tiles_scale_1 .option[data-value="Paired"], +#nj_tiles_scale_2 .option[data-value="Paired"], +#nj_tiles_scale_3 .option[data-value="Paired"], +#nj_tiles_scale_4 .option[data-value="Paired"], +#nj_tiles_scale_5 .option[data-value="Paired"], +#nj_heatmap_scale .option[data-value="Paired"] { + background: linear-gradient(to right, #A6CEE3 0%, #A6CEE3 8.33333%, #1F78B4 8.33333%, #1F78B4 16.6667%, #B2DF8A 16.6667%, #B2DF8A 25%, #33A02C 25%, #33A02C 33.3333%, #FB9A99 33.3333%, #FB9A99 41.6667%, #E31A1C 41.6667%, #E31A1C 50%, #FDBF6F 50%, #FDBF6F 58.3333%, #FF7F00 58.3333%, #FF7F00 66.6667%, #CAB2D6 66.6667%, #CAB2D6 75%, #6A3D9A 75%, #6A3D9A 83.3333%, #FFFF99 83.3333%, #FFFF99 91.6667%, #B15928 91.6667%, #B15928 100%); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Dark2"], +#nj_tippoint_scale .option[data-value="Dark2"], +#nj_tiles_scale_1 .option[data-value="Dark2"], +#nj_tiles_scale_2 .option[data-value="Dark2"], +#nj_tiles_scale_3 .option[data-value="Dark2"], +#nj_tiles_scale_4 .option[data-value="Dark2"], +#nj_tiles_scale_5 .option[data-value="Dark2"], +#nj_heatmap_scale .option[data-value="Dark2"] { + background: linear-gradient(to right, #1B9E77 0%, #1B9E77 12.5%, #D95F02 12.5%, #D95F02 25%, #7570B3 25%, #7570B3 37.5%, #E7298A 37.5%, #E7298A 50%, #66A61E 50%, #66A61E 62.5%, #E6AB02 62.5%, #E6AB02 75%, #A6761D 75%, #A6761D 87.5%, #666666 87.5%, #666666 100%); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Accent"], +#nj_tippoint_scale .option[data-value="Accent"], +#nj_tiles_scale_1 .option[data-value="Accent"], +#nj_tiles_scale_2 .option[data-value="Accent"], +#nj_tiles_scale_3 .option[data-value="Accent"], +#nj_tiles_scale_4 .option[data-value="Accent"], +#nj_tiles_scale_5 .option[data-value="Accent"], +#nj_heatmap_scale .option[data-value="Accent"] { + background: linear-gradient(to right, #7FC97F 0%, #7FC97F 12.5%, #BEAED4 12.5%, #BEAED4 25%, #FDC086 25%, #FDC086 37.5%, #FFFF99 37.5%, #FFFF99 50%, #386CB0 50%, #386CB0 62.5%, #F0027F 62.5%, #F0027F 75%, #BF5B17 75%, #BF5B17 87.5%, #666666 87.5%, #666666 100%); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="YlOrRd"], +#nj_tippoint_scale .option[data-value="YlOrRd"], +#nj_tiles_scale_1 .option[data-value="YlOrRd"], +#nj_tiles_scale_2 .option[data-value="YlOrRd"], +#nj_tiles_scale_3 .option[data-value="YlOrRd"], +#nj_tiles_scale_4 .option[data-value="YlOrRd"], +#nj_tiles_scale_5 .option[data-value="YlOrRd"], +#nj_heatmap_scale .option[data-value="YlOrRd"] { + background: linear-gradient(to right, #FFFFCC 0%, #FFFFCC 11.1111%, #FFEDA0 11.1111%, #FFEDA0 22.2222%, #FED976 22.2222%, #FED976 33.3333%, #FEB24C 33.3333%, #FEB24C 44.4444%, #FD8D3C 44.4444%, #FD8D3C 55.5556%, #FC4E2A 55.5556%, #FC4E2A 66.6667%, #E31A1C 66.6667%, #E31A1C 77.7778%, #BD0026 77.7778%, #BD0026 88.8889%, #800026 88.8889%, #800026 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="YlOrBr"], +#nj_tippoint_scale .option[data-value="YlOrBr"], +#nj_tiles_scale_1 .option[data-value="YlOrBr"], +#nj_tiles_scale_2 .option[data-value="YlOrBr"], +#nj_tiles_scale_3 .option[data-value="YlOrBr"], +#nj_tiles_scale_4 .option[data-value="YlOrBr"], +#nj_tiles_scale_5 .option[data-value="YlOrBr"], +#nj_heatmap_scale .option[data-value="YlOrBr"] { + background: linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11.1111%, #FFF7BC 11.1111%, #FFF7BC 22.2222%, #FEE391 22.2222%, #FEE391 33.3333%, #FEC44F 33.3333%, #FEC44F 44.4444%, #FE9929 44.4444%, #FE9929 55.5556%, #EC7014 55.5556%, #EC7014 66.6667%, #CC4C02 66.6667%, #CC4C02 77.7778%, #993404 77.7778%, #993404 88.8889%, #662506 88.8889%, #662506 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="YlGnBu"], +#nj_tippoint_scale .option[data-value="YlGnBu"], +#nj_tiles_scale_1 .option[data-value="YlGnBu"], +#nj_tiles_scale_2 .option[data-value="YlGnBu"], +#nj_tiles_scale_3 .option[data-value="YlGnBu"], +#nj_tiles_scale_4 .option[data-value="YlGnBu"], +#nj_tiles_scale_5 .option[data-value="YlGnBu"], +#nj_heatmap_scale .option[data-value="YlGnBu"] { + background: linear-gradient(to right, #FFFFD9 0%, #FFFFD9 11.1111%, #EDF8B1 11.1111%, #EDF8B1 22.2222%, #C7E9B4 22.2222%, #C7E9B4 33.3333%, #7FCDBB 33.3333%, #7FCDBB 44.4444%, #41B6C4 44.4444%, #41B6C4 55.5556%, #1D91C0 55.5556%, #1D91C0 66.6667%, #225EA8 66.6667%, #225EA8 77.7778%, #253494 77.7778%, #253494 88.8889%, #081D58 88.8889%, #081D58 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="YlGn"], +#nj_tippoint_scale .option[data-value="YlGn"], +#nj_tiles_scale_1 .option[data-value="YlGn"], +#nj_tiles_scale_2 .option[data-value="YlGn"], +#nj_tiles_scale_3 .option[data-value="YlGn"], +#nj_tiles_scale_4 .option[data-value="YlGn"], +#nj_tiles_scale_5 .option[data-value="YlGn"], +#nj_heatmap_scale .option[data-value="YlGn"] { + background: linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11.1111%, #F7FCB9 11.1111%, #F7FCB9 22.2222%, #D9F0A3 22.2222%, #D9F0A3 33.3333%, #ADDD8E 33.3333%, #ADDD8E 44.4444%, #78C679 44.4444%, #78C679 55.5556%, #41AB5D 55.5556%, #41AB5D 66.6667%, #238443 66.6667%, #238443 77.7778%, #006837 77.7778%, #006837 88.8889%, #004529 88.8889%, #004529 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Reds"], +#nj_tippoint_scale .option[data-value="Reds"], +#nj_tiles_scale_1 .option[data-value="Reds"], +#nj_tiles_scale_2 .option[data-value="Reds"], +#nj_tiles_scale_3 .option[data-value="Reds"], +#nj_tiles_scale_4 .option[data-value="Reds"], +#nj_tiles_scale_5 .option[data-value="Reds"], +#nj_heatmap_scale .option[data-value="Reds"] { + background: linear-gradient(to right, #FFF5F0 0%, #FFF5F0 11.1111%, #FEE0D2 11.1111%, #FEE0D2 22.2222%, #FCBBA1 22.2222%, #FCBBA1 33.3333%, #FC9272 33.3333%, #FC9272 44.4444%, #FB6A4A 44.4444%, #FB6A4A 55.5556%, #EF3B2C 55.5556%, #EF3B2C 66.6667%, #CB181D 66.6667%, #CB181D 77.7778%, #A50F15 77.7778%, #A50F15 88.8889%, #67000D 88.8889%, #67000D 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="RdPu"], +#nj_tippoint_scale .option[data-value="RdPu"], +#nj_tiles_scale_1 .option[data-value="RdPu"], +#nj_tiles_scale_2 .option[data-value="RdPu"], +#nj_tiles_scale_3 .option[data-value="RdPu"], +#nj_tiles_scale_4 .option[data-value="RdPu"], +#nj_tiles_scale_5 .option[data-value="RdPu"], +#nj_heatmap_scale .option[data-value="RdPu"] { + background: linear-gradient(to right, #FFF7F3 0%, #FFF7F3 11.1111%, #FDE0DD 11.1111%, #FDE0DD 22.2222%, #FCC5C0 22.2222%, #FCC5C0 33.3333%, #FA9FB5 33.3333%, #FA9FB5 44.4444%, #F768A1 44.4444%, #F768A1 55.5556%, #DD3497 55.5556%, #DD3497 66.6667%, #AE017E 66.6667%, #AE017E 77.7778%, #7A0177 77.7778%, #7A0177 88.8889%, #49006A 88.8889%, #49006A 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Purples"], +#nj_tippoint_scale .option[data-value="Purples"], +#nj_tiles_scale_1 .option[data-value="Purples"], +#nj_tiles_scale_2 .option[data-value="Purples"], +#nj_tiles_scale_3 .option[data-value="Purples"], +#nj_tiles_scale_4 .option[data-value="Purples"], +#nj_tiles_scale_5 .option[data-value="Purples"], +#nj_heatmap_scale .option[data-value="Purples"] { + background: linear-gradient(to right, #FCFBFD 0%, #FCFBFD 11.1111%, #EFEDF5 11.1111%, #EFEDF5 22.2222%, #DADAEB 22.2222%, #DADAEB 33.3333%, #BCBDDC 33.3333%, #BCBDDC 44.4444%, #9E9AC8 44.4444%, #9E9AC8 55.5556%, #807DBA 55.5556%, #807DBA 66.6667%, #6A51A3 66.6667%, #6A51A3 77.7778%, #54278F 77.7778%, #54278F 88.8889%, #3F007D 88.8889%, #3F007D 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="PuRd"], +#nj_tippoint_scale .option[data-value="PuRd"], +#nj_tiles_scale_1 .option[data-value="PuRd"], +#nj_tiles_scale_2 .option[data-value="PuRd"], +#nj_tiles_scale_3 .option[data-value="PuRd"], +#nj_tiles_scale_4 .option[data-value="PuRd"], +#nj_tiles_scale_5 .option[data-value="PuRd"], +#nj_heatmap_scale .option[data-value="PuRd"] { + background: linear-gradient(to right, #F7F4F9 0%, #F7F4F9 11.1111%, #E7E1EF 11.1111%, #E7E1EF 22.2222%, #D4B9DA 22.2222%, #D4B9DA 33.3333%, #C994C7 33.3333%, #C994C7 44.4444%, #DF65B0 44.4444%, #DF65B0 55.5556%, #E7298A 55.5556%, #E7298A 66.6667%, #CE1256 66.6667%, #CE1256 77.7778%, #980043 77.7778%, #980043 88.8889%, #67001F 88.8889%, #67001F 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="PuBuGn"], +#nj_tippoint_scale .option[data-value="PuBuGn"], +#nj_tiles_scale_1 .option[data-value="PuBuGn"], +#nj_tiles_scale_2 .option[data-value="PuBuGn"], +#nj_tiles_scale_3 .option[data-value="PuBuGn"], +#nj_tiles_scale_4 .option[data-value="PuBuGn"], +#nj_tiles_scale_5 .option[data-value="PuBuGn"], +#nj_heatmap_scale .option[data-value="PuBuGn"] { + background: linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11.1111%, #ECE2F0 11.1111%, #ECE2F0 22.2222%, #D0D1E6 22.2222%, #D0D1E6 33.3333%, #A6BDDB 33.3333%, #A6BDDB 44.4444%, #67A9CF 44.4444%, #67A9CF 55.5556%, #3690C0 55.5556%, #3690C0 66.6667%, #02818A 66.6667%, #02818A 77.7778%, #016C59 77.7778%, #016C59 88.8889%, #014636 88.8889%, #014636 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="PuBu"], +#nj_tippoint_scale .option[data-value="PuBu"], +#nj_tiles_scale_1 .option[data-value="PuBu"], +#nj_tiles_scale_2 .option[data-value="PuBu"], +#nj_tiles_scale_3 .option[data-value="PuBu"], +#nj_tiles_scale_4 .option[data-value="PuBu"], +#nj_tiles_scale_5 .option[data-value="PuBu"], +#nj_heatmap_scale .option[data-value="PuBu"] { + background: linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11.1111%, #ECE7F2 11.1111%, #ECE7F2 22.2222%, #D0D1E6 22.2222%, #D0D1E6 33.3333%, #A6BDDB 33.3333%, #A6BDDB 44.4444%, #74A9CF 44.4444%, #74A9CF 55.5556%, #3690C0 55.5556%, #3690C0 66.6667%, #0570B0 66.6667%, #0570B0 77.7778%, #045A8D 77.7778%, #045A8D 88.8889%, #023858 88.8889%, #023858 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="OrRd"], +#nj_tippoint_scale .option[data-value="OrRd"], +#nj_tiles_scale_1 .option[data-value="OrRd"], +#nj_tiles_scale_2 .option[data-value="OrRd"], +#nj_tiles_scale_3 .option[data-value="OrRd"], +#nj_tiles_scale_4 .option[data-value="OrRd"], +#nj_tiles_scale_5 .option[data-value="OrRd"], +#nj_heatmap_scale .option[data-value="OrRd"] { + background: linear-gradient(to right, #FFF7EC 0%, #FFF7EC 11.1111%, #FEE8C8 11.1111%, #FEE8C8 22.2222%, #FDD49E 22.2222%, #FDD49E 33.3333%, #FDBB84 33.3333%, #FDBB84 44.4444%, #FC8D59 44.4444%, #FC8D59 55.5556%, #EF6548 55.5556%, #EF6548 66.6667%, #D7301F 66.6667%, #D7301F 77.7778%, #B30000 77.7778%, #B30000 88.8889%, #7F0000 88.8889%, #7F0000 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Oranges"], +#nj_tippoint_scale .option[data-value="Oranges"], +#nj_tiles_scale_1 .option[data-value="Oranges"], +#nj_tiles_scale_2 .option[data-value="Oranges"], +#nj_tiles_scale_3 .option[data-value="Oranges"], +#nj_tiles_scale_4 .option[data-value="Oranges"], +#nj_tiles_scale_5 .option[data-value="Oranges"], +#nj_heatmap_scale .option[data-value="Oranges"] { + background: linear-gradient(to right, #FFF5EB 0%, #FFF5EB 11.1111%, #FEE6CE 11.1111%, #FEE6CE 22.2222%, #FDD0A2 22.2222%, #FDD0A2 33.3333%, #FDAE6B 33.3333%, #FDAE6B 44.4444%, #FD8D3C 44.4444%, #FD8D3C 55.5556%, #F16913 55.5556%, #F16913 66.6667%, #D94801 66.6667%, #D94801 77.7778%, #A63603 77.7778%, #A63603 88.8889%, #7F2704 88.8889%, #7F2704 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Greys"], +#nj_tippoint_scale .option[data-value="Greys"], +#nj_tiles_scale_1 .option[data-value="Greys"], +#nj_tiles_scale_2 .option[data-value="Greys"], +#nj_tiles_scale_3 .option[data-value="Greys"], +#nj_tiles_scale_4 .option[data-value="Greys"], +#nj_tiles_scale_5 .option[data-value="Greys"], +#nj_heatmap_scale .option[data-value="Greys"] { + background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 11.1111%, #F0F0F0 11.1111%, #F0F0F0 22.2222%, #D9D9D9 22.2222%, #D9D9D9 33.3333%, #BDBDBD 33.3333%, #BDBDBD 44.4444%, #969696 44.4444%, #969696 55.5556%, #737373 55.5556%, #737373 66.6667%, #525252 66.6667%, #525252 77.7778%, #252525 77.7778%, #252525 88.8889%, #000000 88.8889%, #000000 100%); + color: white; +} + +#nj_tiplab_scale .option[data-value="Greens"], +#nj_tippoint_scale .option[data-value="Greens"], +#nj_tiles_scale_1 .option[data-value="Greens"], +#nj_tiles_scale_2 .option[data-value="Greens"], +#nj_tiles_scale_3 .option[data-value="Greens"], +#nj_tiles_scale_4 .option[data-value="Greens"], +#nj_tiles_scale_5 .option[data-value="Greens"], +#nj_heatmap_scale .option[data-value="Greens"] { + background: linear-gradient(to right, #F7FCF5 0%, #F7FCF5 11.1111%, #E5F5E0 11.1111%, #E5F5E0 22.2222%, #C7E9C0 22.2222%, #C7E9C0 33.3333%, #A1D99B 33.3333%, #A1D99B 44.4444%, #74C476 44.4444%, #74C476 55.5556%, #41AB5D 55.5556%, #41AB5D 66.6667%, #238B45 66.6667%, #238B45 77.7778%, #006D2C 77.7778%, #006D2C 88.8889%, #00441B 88.8889%, #00441B 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="GnBu"], +#nj_tippoint_scale .option[data-value="GnBu"], +#nj_tiles_scale_1 .option[data-value="GnBu"], +#nj_tiles_scale_2 .option[data-value="GnBu"], +#nj_tiles_scale_3 .option[data-value="GnBu"], +#nj_tiles_scale_4 .option[data-value="GnBu"], +#nj_tiles_scale_5 .option[data-value="GnBu"], +#nj_heatmap_scale .option[data-value="GnBu"] { + background: linear-gradient(to right, #F7FCF0 0%, #F7FCF0 11.1111%, #E0F3DB 11.1111%, #E0F3DB 22.2222%, #CCEBC5 22.2222%, #CCEBC5 33.3333%, #A8DDB5 33.3333%, #A8DDB5 44.4444%, #7BCCC4 44.4444%, #7BCCC4 55.5556%, #4EB3D3 55.5556%, #4EB3D3 66.6667%, #2B8CBE 66.6667%, #2B8CBE 77.7778%, #0868AC 77.7778%, #0868AC 88.8889%, #084081 88.8889%, #084081 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="BuPu"], +#nj_tippoint_scale .option[data-value="BuPu"], +#nj_tiles_scale_1 .option[data-value="BuPu"], +#nj_tiles_scale_2 .option[data-value="BuPu"], +#nj_tiles_scale_3 .option[data-value="BuPu"], +#nj_tiles_scale_4 .option[data-value="BuPu"], +#nj_tiles_scale_5 .option[data-value="BuPu"], +#nj_heatmap_scale .option[data-value="BuPu"] { + background: linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11.1111%, #E0ECF4 11.1111%, #E0ECF4 22.2222%, #BFD3E6 22.2222%, #BFD3E6 33.3333%, #9EBCDA 33.3333%, #9EBCDA 44.4444%, #8C96C6 44.4444%, #8C96C6 55.5556%, #8C6BB1 55.5556%, #8C6BB1 66.6667%, #88419D 66.6667%, #88419D 77.7778%, #810F7C 77.7778%, #810F7C 88.8889%, #4D004B 88.8889%, #4D004B 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="BuGn"], +#nj_tippoint_scale .option[data-value="BuGn"], +#nj_tiles_scale_1 .option[data-value="BuGn"], +#nj_tiles_scale_2 .option[data-value="BuGn"], +#nj_tiles_scale_3 .option[data-value="BuGn"], +#nj_tiles_scale_4 .option[data-value="BuGn"], +#nj_tiles_scale_5 .option[data-value="BuGn"], +#nj_heatmap_scale .option[data-value="BuGn"] { + background: linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11.1111%, #E5F5F9 11.1111%, #E5F5F9 22.2222%, #CCECE6 22.2222%, #CCECE6 33.3333%, #99D8C9 33.3333%, #99D8C9 44.4444%, #66C2A4 44.4444%, #66C2A4 55.5556%, #41AE76 55.5556%, #41AE76 66.6667%, #238B45 66.6667%, #238B45 77.7778%, #006D2C 77.7778%, #006D2C 88.8889%, #00441B 88.8889%, #00441B 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Blues"], +#nj_tippoint_scale .option[data-value="Blues"], +#nj_tiles_scale_1 .option[data-value="Blues"], +#nj_tiles_scale_2 .option[data-value="Blues"], +#nj_tiles_scale_3 .option[data-value="Blues"], +#nj_tiles_scale_4 .option[data-value="Blues"], +#nj_tiles_scale_5 .option[data-value="Blues"], +#nj_heatmap_scale .option[data-value="Blues"] { + background: linear-gradient(to right, #F7FBFF 0%, #F7FBFF 11.1111%, #DEEBF7 11.1111%, #DEEBF7 22.2222%, #C6DBEF 22.2222%, #C6DBEF 33.3333%, #9ECAE1 33.3333%, #9ECAE1 44.4444%, #6BAED6 44.4444%, #6BAED6 55.5556%, #4292C6 55.5556%, #4292C6 66.6667%, #2171B5 66.6667%, #2171B5 77.7778%, #08519C 77.7778%, #08519C 88.8889%, #08306B 88.8889%, #08306B 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="magma"], +#nj_tippoint_scale .option[data-value="magma"], +#nj_tiles_scale_1 .option[data-value="magma"], +#nj_tiles_scale_2 .option[data-value="magma"], +#nj_tiles_scale_3 .option[data-value="magma"], +#nj_tiles_scale_4 .option[data-value="magma"], +#nj_tiles_scale_5 .option[data-value="magma"], +#nj_heatmap_scale .option[data-value="magma"] { + background: linear-gradient(to right, #000004FF, #07071DFF, #160F3BFF, #29115AFF, #400F73FF, #56147DFF, #6B1D81FF, #802582FF, #952C80FF, #AB337CFF, #C03A76FF, #D6456CFF, #E85362FF, #F4685CFF, #FA815FFF, #FD9A6AFF, #FEB37BFF, #FECC8FFF, #FDE4A6FF, #FCFDBFFF); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="inferno"], +#nj_tippoint_scale .option[data-value="inferno"], +#nj_tiles_scale_1 .option[data-value="inferno"], +#nj_tiles_scale_2 .option[data-value="inferno"], +#nj_tiles_scale_3 .option[data-value="inferno"], +#nj_tiles_scale_4 .option[data-value="inferno"], +#nj_tiles_scale_5 .option[data-value="inferno"], +#nj_heatmap_scale .option[data-value="inferno"] { + background: linear-gradient(to right, #000004FF, #08051EFF, #190C3EFF, #300A5BFF, #460B6AFF, #5C126EFF, #711A6EFF, #87216BFF, #9C2964FF, #B1325AFF, #C43C4EFF, #D64B40FF, #E55C30FF, #F17020FF, #F8870EFF, #FCA007FF, #FBB91FFF, #F7D340FF, #F1ED6FFF, #FCFFA4FF); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="plasma"], +#nj_tippoint_scale .option[data-value="plasma"], +#nj_tiles_scale_1 .option[data-value="plasma"], +#nj_tiles_scale_2 .option[data-value="plasma"], +#nj_tiles_scale_3 .option[data-value="plasma"], +#nj_tiles_scale_4 .option[data-value="plasma"], +#nj_tiles_scale_5 .option[data-value="plasma"], +#nj_heatmap_scale .option[data-value="plasma"] { + background: linear-gradient(to right, #0D0887FF, #2D0594FF, #44039EFF, #5901A5FF, #6F00A8FF, #8305A7FF, #9512A1FF, #A72197FF, #B6308BFF, #C5407EFF, #D14E72FF, #DD5E66FF, #E76E5BFF, #EF7F4FFF, #F79044FF, #FBA238FF, #FEB72DFF, #FDCB26FF, #F7E225FF, #F0F921FF); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="viridis"], +#nj_tippoint_scale .option[data-value="viridis"], +#nj_tiles_scale_1 .option[data-value="viridis"], +#nj_tiles_scale_2 .option[data-value="viridis"], +#nj_tiles_scale_3 .option[data-value="viridis"], +#nj_tiles_scale_4 .option[data-value="viridis"], +#nj_tiles_scale_5 .option[data-value="viridis"], +#nj_heatmap_scale .option[data-value="viridis"] { + background: linear-gradient(to right, #440154FF, #481568FF, #482677FF, #453781FF, #3F4788FF, #39558CFF, #32648EFF, #2D718EFF, #287D8EFF, #238A8DFF, #1F968BFF, #20A386FF, #29AF7FFF, #3CBC75FF, #56C667FF, #74D055FF, #94D840FF, #B8DE29FF, #DCE318FF, #FDE725FF); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="cividis"], +#nj_tippoint_scale .option[data-value="cividis"], +#nj_tiles_scale_1 .option[data-value="cividis"], +#nj_tiles_scale_2 .option[data-value="cividis"], +#nj_tiles_scale_3 .option[data-value="cividis"], +#nj_tiles_scale_4 .option[data-value="cividis"], +#nj_tiles_scale_5 .option[data-value="cividis"], +#nj_heatmap_scale .option[data-value="cividis"] { + background: linear-gradient(to right, #00204DFF, #002A64FF, #00336FFF, #1F3C6DFF, #35466BFF, #444F6BFF, #53596CFF, #5F636EFF, #6B6C71FF, #777776FF, #838079FF, #908B79FF, #9D9677FF, #ABA074FF, #B9AC70FF, #C7B76BFF, #D7C463FF, #E5D05AFF, #F5DD4DFF, #FFEA46FF); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="rocket"], +#nj_tippoint_scale .option[data-value="rocket"], +#nj_tiles_scale_1 .option[data-value="rocket"], +#nj_tiles_scale_2 .option[data-value="rocket"], +#nj_tiles_scale_3 .option[data-value="rocket"], +#nj_tiles_scale_4 .option[data-value="rocket"], +#nj_tiles_scale_5 .option[data-value="rocket"], +#nj_heatmap_scale .option[data-value="rocket"] { + background: linear-gradient(to right, #03051AFF, #150E26FF, #281535FF, #3C1A42FF, #511E4DFF, #661F54FF, #7C1F5AFF, #931C5BFF, #AA185AFF, #C11754FF, #D3214BFF, #E33541FF, #ED4E3EFF, #F26847FF, #F4815AFF, #F5986FFF, #F6AE86FF, #F7C2A2FF, #F8D7BFFF, #FAEBDDFF); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="mako"], +#nj_tippoint_scale .option[data-value="mako"], +#nj_tiles_scale_1 .option[data-value="mako"], +#nj_tiles_scale_2 .option[data-value="mako"], +#nj_tiles_scale_3 .option[data-value="mako"], +#nj_tiles_scale_4 .option[data-value="mako"], +#nj_tiles_scale_5 .option[data-value="mako"], +#nj_heatmap_scale .option[data-value="mako"] { + background: linear-gradient(to right, #0B0405FF, #190E19FF, #27182DFF, #312142FF, #3A2C59FF, #3F3770FF, #414388FF, #3C5397FF, #38639DFF, #3573A1FF, #3482A4FF, #3491A8FF, #35A0ABFF, #3AAEADFF, #46BEADFF, #5ACCADFF, #7ED7AFFF, #A4E0BBFF, #C3E9CEFF, #DEF5E5FF); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="turbo"], +#nj_tippoint_scale .option[data-value="turbo"], +#nj_tiles_scale_1 .option[data-value="turbo"], +#nj_tiles_scale_2 .option[data-value="turbo"], +#nj_tiles_scale_3 .option[data-value="turbo"], +#nj_tiles_scale_4 .option[data-value="turbo"], +#nj_tiles_scale_5 .option[data-value="turbo"], +#nj_heatmap_scale .option[data-value="turbo"] { + background: linear-gradient(to right, #30123BFF, #3F3994FF, #455ED2FF, #4681F7FF, #3AA2FCFF, #23C3E4FF, #18DEC1FF, #2CF09EFF, #5BFB72FF, #8EFF49FF, #B5F836FF, #D6E635FF, #EFCD3AFF, #FCB036FF, #FD8A26FF, #F36215FF, #E14209FF, #C82803FF, #A51301FF, #7A0403FF); + color: black; + margin-bottom: 2px; +} + + .pulsating-button:hover { animation: none; } From 84f94e9b5d1fbf72345419235f3df7e82db45fdd Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Wed, 13 Mar 2024 16:23:45 +0100 Subject: [PATCH 09/26] Styled clade highlight box --- App.R | 77 +++++++--------- www/mycss.css | 251 +++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 249 insertions(+), 79 deletions(-) diff --git a/App.R b/App.R index 5333cf6..85f872e 100644 --- a/App.R +++ b/App.R @@ -2852,47 +2852,43 @@ ui <- dashboardPage( column( width = 12, align = "left", - fluidRow( - column( - width = 6, - h4(p("Clade Highlight"), style = "color:white; position: relative; right: -15px") - ) - ), + h4(p("Clade Highlight"), style = "color:white; position: relative; right: -15px"), fluidRow( column( width = 12, materialSwitch( "nj_nodelabel_show", - "Show Nodes", - value = FALSE + h5(p("Toggle Node View"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE ) ) ), fluidRow( column( - width = 5, - h5(p("Parent node"), style = "color:white; position: relative; right: -20px; margin-top: 30px") + width = 3, + h5(p("Nodes"), style = "color:white; position: relative; right: -20px; margin-top: 20px") ), column( - width = 7, + width = 9, uiOutput("nj_parentnode") ) ), - uiOutput("nj_clade_coloring"), + uiOutput("nj_clade_scale"), fluidRow( column( - width = 5, - align = "left", + width = 8, + align = "center", selectInput( "nj_clade_type", - h5(p("Type"), style = "color:white;"), - choices = c("Rectangular" = "rect", - "Roundrect" = "roundrect", - "Gradient" = "gradient") + "", + choices = c("Rect" = "rect", + "Round" = "roundrect"), + selected = c("Round" = "roundrect") ) ), column( - width = 7, + width = 4, align = "right", dropMenu( actionBttn( @@ -2908,28 +2904,15 @@ ui <- dashboardPage( fluidRow( column( width = 12, + align = "center", selectInput( "nj_clade_align", label = h5("Align", style = "color:white; font-size: 14px;"), choices = c("None" = "none", "Left" = "left", "Right" = "right", - "Both" = "both") - ), - br(), - selectInput( - "nj_clade_grad_dir", - label = h5("Gradient Direction", style = "color:white; font-size: 14px; "), - choices = c("Right" = "rt", - "Left" = "tr") - ), - br(), - sliderInput( - "nj_grad_len", - label = h5("Gradient Length", style = "color:white; font-size: 14px; "), - min = 1, - max = 10, - value = 2 + "Both" = "both"), + width = "100px" ) ) ) @@ -9882,15 +9865,16 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- # Clade coloring - output$nj_clade_coloring <- renderUI({ + output$nj_clade_scale <- renderUI({ if(length(input$nj_parentnode) <= 1) { fluidRow( column( - width = 4, - h5("Color", style = "color:white; margin-bottom: 0px") + width = 5, + h5("Color", style = "color:white; position: relative; right: -20px; margin-top: 30px") ), column( - width = 8, + width = 7, + align = "center", colorPickr( inputId = "nj_clade_scale", selected = "#D0F221", @@ -9906,11 +9890,12 @@ server <- function(input, output, session) { } else { fluidRow( column( - width = 4, - h5("Scale", style = "color:white; margin-bottom: 0px") + width = 5, + h5("Scale", style = "color:white; position: relative; right: -20px; margin-top: 30px") ), column( - width = 8, + width = 7, + align = "center", selectInput( "nj_clade_scale", "", @@ -10518,11 +10503,11 @@ server <- function(input, output, session) { multiple = TRUE, options = list( `live-search` = TRUE, - `actions-box` = TRUE, + `noneSelectedText` = "Test", size = 10, style = "background-color: white; border-radius: 5px;" ), - width = "90%" + width = "99%" ) } else { pickerInput( @@ -10532,11 +10517,11 @@ server <- function(input, output, session) { multiple = TRUE, options = list( `live-search` = TRUE, - `actions-box` = TRUE, + noneSelectedText = "Test", size = 10, style = "background-color: white; border-radius: 5px;" ), - width = "90%" + width = "99%" ) } }) diff --git a/www/mycss.css b/www/mycss.css index 8663a2a..e0e465a 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -8,6 +8,49 @@ animation: pulsate 1s ease infinite; } +#shiny-tab-visualization > div:nth-child(5) > div > div:nth-child(4) > div:nth-child(5) > div > div > div > div > div:nth-child(5) > div.col-sm-8 > div { + margin-left: 20px; +} + +#nj_parentnode { + margin-left: 38px; + margin-top: -10px; +} + +#shiny-tab-visualization > div:nth-child(5) > div > div:nth-child(4) > div:nth-child(5) > div > div > div > div > div:nth-child(2) > div > div > div > label.switch.label-default.bg-default { + margin-left: 20px; + margin-top: 35px; +} + +.material-switch>label.switch:before { + background: #20E6E5 !important; + border-radius: 8px; + content: ""; + height: 13px; + margin-top: -10px; + opacity: .3; + position: absolute; + transition: all .4s ease-in-out; + width: 40px; +} + +.material-switch>input[type=checkbox]:checked+label.switch:before { + opacity: 1; +} + +.material-switch>label.switch:after { + background: #E6E6E6 !important; + border-radius: 1pc; + box-shadow: 0 0 5px rgba(0,0,0,.3); + content: ""; + height: 20px; + left: -4px; + margin-top: -10px; + position: absolute; + top: -4px; + transition: all .3s ease-in-out; + width: 20px; +} #nj_tiplab_scale .option[data-value="Set1"], #nj_tippoint_scale .option[data-value="Set1"], @@ -16,7 +59,8 @@ #nj_tiles_scale_3 .option[data-value="Set1"], #nj_tiles_scale_4 .option[data-value="Set1"], #nj_tiles_scale_5 .option[data-value="Set1"], -#nj_heatmap_scale .option[data-value="Set1"] { +#nj_heatmap_scale .option[data-value="Set1"], +#nj_clade_scale .option[data-value="Set1"] { background: linear-gradient(to right, #E41A1C 0%, #E41A1C 11%, #377EB8 11%, #377EB8 22%, #4DAF4A 22%, #4DAF4A 33%, #984EA3 33%, #984EA3 44%, #FF7F00 44%, #FF7F00 55%, #FFFF33 55%, #FFFF33 66%, #A65628 66%, #A65628 77%, #F781BF 77%, #F781BF 88%, #999999 88%, #999999 100%); color: black; margin-bottom: 2px; @@ -30,7 +74,8 @@ #nj_tiles_scale_3 .option[data-value="Set2"], #nj_tiles_scale_4 .option[data-value="Set2"], #nj_tiles_scale_5 .option[data-value="Set2"], -#nj_heatmap_scale .option[data-value="Set2"] { +#nj_heatmap_scale .option[data-value="Set2"], +#nj_clade_scale .option[data-value="Set2"] { background: linear-gradient(to right, #66C2A5 0%, #66C2A5 12.5%, #FC8D62 12.5%, #FC8D62 25%, #8DA0CB 25%, #8DA0CB 37.5%, #E78AC3 37.5%, #E78AC3 50%, #A6D854 50%, #A6D854 62.5%, #FFD92F 62.5%, #FFD92F 75%, #E5C494 75%, #E5C494 87.5%, #B3B3B3 87.5%, #B3B3B3 100%); color: black; margin-bottom: 2px; @@ -43,7 +88,8 @@ #nj_tiles_scale_3 .option[data-value="Set3"], #nj_tiles_scale_4 .option[data-value="Set3"], #nj_tiles_scale_5 .option[data-value="Set3"], -#nj_heatmap_scale .option[data-value="Set3"] { +#nj_heatmap_scale .option[data-value="Set3"], +#nj_clade_scale .option[data-value="Set3"] { background: linear-gradient(to right, #8DD3C7 0%, #8DD3C7 8.33333%, #FFFFB3 8.33333%, #FFFFB3 16.6667%, #BEBADA 16.6667%, #BEBADA 25%, #FB8072 25%, #FB8072 33.3333%, #80B1D3 33.3333%, #80B1D3 41.6667%, #FDB462 41.6667%, #FDB462 50%, #B3DE69 50%, #B3DE69 58.3333%, #FCCDE5 58.3333%, #FCCDE5 66.6667%, #D9D9D9 66.6667%, #D9D9D9 75%, #BC80BD 75%, #BC80BD 83.3333%, #CCEBC5 83.3333%, #CCEBC5 91.6667%, #FFED6F 91.6667%, #FFED6F 100%); color: black; margin-bottom: 2px; @@ -56,7 +102,8 @@ #nj_tiles_scale_3 .option[data-value="Pastel1"], #nj_tiles_scale_4 .option[data-value="Pastel1"], #nj_tiles_scale_5 .option[data-value="Pastel1"], -#nj_heatmap_scale .option[data-value="Pastel1"] { +#nj_heatmap_scale .option[data-value="Pastel1"], +#nj_clade_scale .option[data-value="Pastel1"] { background: linear-gradient(to right, #FBB4AE 0%, #FBB4AE 11.1111%, #B3CDE3 11.1111%, #B3CDE3 22.2222%, #CCEBC5 22.2222%, #CCEBC5 33.3333%, #DECBE4 33.3333%, #DECBE4 44.4444%, #FED9A6 44.4444%, #FED9A6 55.5556%, #FFFFCC 55.5556%, #FFFFCC 66.6667%, #E5D8BD 66.6667%, #E5D8BD 77.7778%, #FDDAEC 77.7778%, #FDDAEC 88.8889%, #F2F2F2 88.8889%, #F2F2F2 100%); color: black; margin-bottom: 2px; @@ -69,7 +116,8 @@ #nj_tiles_scale_3 .option[data-value="Pastel2"], #nj_tiles_scale_4 .option[data-value="Pastel2"], #nj_tiles_scale_5 .option[data-value="Pastel2"], -#nj_heatmap_scale .option[data-value="Pastel2"] { +#nj_heatmap_scale .option[data-value="Pastel2"], +#nj_clade_scale .option[data-value="Pastel2"] { background: linear-gradient(to right, #B3E2CD 0%, #B3E2CD 12.5%, #FDCDAC 12.5%, #FDCDAC 25%, #CBD5E8 25%, #CBD5E8 37.5%, #F4CAE4 37.5%, #F4CAE4 50%, #E6F5C9 50%, #E6F5C9 62.5%, #FFF2AE 62.5%, #FFF2AE 75%, #F1E2CC 75%, #F1E2CC 87.5%, #CCCCCC 87.5%, #CCCCCC 100%); color: black; margin-bottom: 2px; @@ -82,7 +130,8 @@ #nj_tiles_scale_3 .option[data-value="Paired"], #nj_tiles_scale_4 .option[data-value="Paired"], #nj_tiles_scale_5 .option[data-value="Paired"], -#nj_heatmap_scale .option[data-value="Paired"] { +#nj_heatmap_scale .option[data-value="Paired"], +#nj_clade_scale .option[data-value="Paired"] { background: linear-gradient(to right, #A6CEE3 0%, #A6CEE3 8.33333%, #1F78B4 8.33333%, #1F78B4 16.6667%, #B2DF8A 16.6667%, #B2DF8A 25%, #33A02C 25%, #33A02C 33.3333%, #FB9A99 33.3333%, #FB9A99 41.6667%, #E31A1C 41.6667%, #E31A1C 50%, #FDBF6F 50%, #FDBF6F 58.3333%, #FF7F00 58.3333%, #FF7F00 66.6667%, #CAB2D6 66.6667%, #CAB2D6 75%, #6A3D9A 75%, #6A3D9A 83.3333%, #FFFF99 83.3333%, #FFFF99 91.6667%, #B15928 91.6667%, #B15928 100%); color: black; margin-bottom: 2px; @@ -95,7 +144,8 @@ #nj_tiles_scale_3 .option[data-value="Dark2"], #nj_tiles_scale_4 .option[data-value="Dark2"], #nj_tiles_scale_5 .option[data-value="Dark2"], -#nj_heatmap_scale .option[data-value="Dark2"] { +#nj_heatmap_scale .option[data-value="Dark2"], +#nj_clade_scale .option[data-value="Dark2"] { background: linear-gradient(to right, #1B9E77 0%, #1B9E77 12.5%, #D95F02 12.5%, #D95F02 25%, #7570B3 25%, #7570B3 37.5%, #E7298A 37.5%, #E7298A 50%, #66A61E 50%, #66A61E 62.5%, #E6AB02 62.5%, #E6AB02 75%, #A6761D 75%, #A6761D 87.5%, #666666 87.5%, #666666 100%); color: black; margin-bottom: 2px; @@ -108,7 +158,8 @@ #nj_tiles_scale_3 .option[data-value="Accent"], #nj_tiles_scale_4 .option[data-value="Accent"], #nj_tiles_scale_5 .option[data-value="Accent"], -#nj_heatmap_scale .option[data-value="Accent"] { +#nj_heatmap_scale .option[data-value="Accent"], +#nj_clade_scale .option[data-value="Accent"] { background: linear-gradient(to right, #7FC97F 0%, #7FC97F 12.5%, #BEAED4 12.5%, #BEAED4 25%, #FDC086 25%, #FDC086 37.5%, #FFFF99 37.5%, #FFFF99 50%, #386CB0 50%, #386CB0 62.5%, #F0027F 62.5%, #F0027F 75%, #BF5B17 75%, #BF5B17 87.5%, #666666 87.5%, #666666 100%); color: black; margin-bottom: 2px; @@ -121,7 +172,8 @@ #nj_tiles_scale_3 .option[data-value="YlOrRd"], #nj_tiles_scale_4 .option[data-value="YlOrRd"], #nj_tiles_scale_5 .option[data-value="YlOrRd"], -#nj_heatmap_scale .option[data-value="YlOrRd"] { +#nj_heatmap_scale .option[data-value="YlOrRd"], +#nj_clade_scale .option[data-value="YlOrRd"] { background: linear-gradient(to right, #FFFFCC 0%, #FFFFCC 11.1111%, #FFEDA0 11.1111%, #FFEDA0 22.2222%, #FED976 22.2222%, #FED976 33.3333%, #FEB24C 33.3333%, #FEB24C 44.4444%, #FD8D3C 44.4444%, #FD8D3C 55.5556%, #FC4E2A 55.5556%, #FC4E2A 66.6667%, #E31A1C 66.6667%, #E31A1C 77.7778%, #BD0026 77.7778%, #BD0026 88.8889%, #800026 88.8889%, #800026 100%); color: white; margin-bottom: 2px; @@ -134,7 +186,8 @@ #nj_tiles_scale_3 .option[data-value="YlOrBr"], #nj_tiles_scale_4 .option[data-value="YlOrBr"], #nj_tiles_scale_5 .option[data-value="YlOrBr"], -#nj_heatmap_scale .option[data-value="YlOrBr"] { +#nj_heatmap_scale .option[data-value="YlOrBr"], +#nj_clade_scale .option[data-value="YlOrBr"] { background: linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11.1111%, #FFF7BC 11.1111%, #FFF7BC 22.2222%, #FEE391 22.2222%, #FEE391 33.3333%, #FEC44F 33.3333%, #FEC44F 44.4444%, #FE9929 44.4444%, #FE9929 55.5556%, #EC7014 55.5556%, #EC7014 66.6667%, #CC4C02 66.6667%, #CC4C02 77.7778%, #993404 77.7778%, #993404 88.8889%, #662506 88.8889%, #662506 100%); color: white; margin-bottom: 2px; @@ -147,7 +200,8 @@ #nj_tiles_scale_3 .option[data-value="YlGnBu"], #nj_tiles_scale_4 .option[data-value="YlGnBu"], #nj_tiles_scale_5 .option[data-value="YlGnBu"], -#nj_heatmap_scale .option[data-value="YlGnBu"] { +#nj_heatmap_scale .option[data-value="YlGnBu"], +#nj_clade_scale .option[data-value="YlGnBu"] { background: linear-gradient(to right, #FFFFD9 0%, #FFFFD9 11.1111%, #EDF8B1 11.1111%, #EDF8B1 22.2222%, #C7E9B4 22.2222%, #C7E9B4 33.3333%, #7FCDBB 33.3333%, #7FCDBB 44.4444%, #41B6C4 44.4444%, #41B6C4 55.5556%, #1D91C0 55.5556%, #1D91C0 66.6667%, #225EA8 66.6667%, #225EA8 77.7778%, #253494 77.7778%, #253494 88.8889%, #081D58 88.8889%, #081D58 100%); color: white; margin-bottom: 2px; @@ -160,7 +214,8 @@ #nj_tiles_scale_3 .option[data-value="YlGn"], #nj_tiles_scale_4 .option[data-value="YlGn"], #nj_tiles_scale_5 .option[data-value="YlGn"], -#nj_heatmap_scale .option[data-value="YlGn"] { +#nj_heatmap_scale .option[data-value="YlGn"], +#nj_clade_scale .option[data-value="YlGn"] { background: linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11.1111%, #F7FCB9 11.1111%, #F7FCB9 22.2222%, #D9F0A3 22.2222%, #D9F0A3 33.3333%, #ADDD8E 33.3333%, #ADDD8E 44.4444%, #78C679 44.4444%, #78C679 55.5556%, #41AB5D 55.5556%, #41AB5D 66.6667%, #238443 66.6667%, #238443 77.7778%, #006837 77.7778%, #006837 88.8889%, #004529 88.8889%, #004529 100%); color: white; margin-bottom: 2px; @@ -173,7 +228,8 @@ #nj_tiles_scale_3 .option[data-value="Reds"], #nj_tiles_scale_4 .option[data-value="Reds"], #nj_tiles_scale_5 .option[data-value="Reds"], -#nj_heatmap_scale .option[data-value="Reds"] { +#nj_heatmap_scale .option[data-value="Reds"], +#nj_clade_scale .option[data-value="Reds"] { background: linear-gradient(to right, #FFF5F0 0%, #FFF5F0 11.1111%, #FEE0D2 11.1111%, #FEE0D2 22.2222%, #FCBBA1 22.2222%, #FCBBA1 33.3333%, #FC9272 33.3333%, #FC9272 44.4444%, #FB6A4A 44.4444%, #FB6A4A 55.5556%, #EF3B2C 55.5556%, #EF3B2C 66.6667%, #CB181D 66.6667%, #CB181D 77.7778%, #A50F15 77.7778%, #A50F15 88.8889%, #67000D 88.8889%, #67000D 100%); color: white; margin-bottom: 2px; @@ -186,7 +242,8 @@ #nj_tiles_scale_3 .option[data-value="RdPu"], #nj_tiles_scale_4 .option[data-value="RdPu"], #nj_tiles_scale_5 .option[data-value="RdPu"], -#nj_heatmap_scale .option[data-value="RdPu"] { +#nj_heatmap_scale .option[data-value="RdPu"], +#nj_clade_scale .option[data-value="RdPu"] { background: linear-gradient(to right, #FFF7F3 0%, #FFF7F3 11.1111%, #FDE0DD 11.1111%, #FDE0DD 22.2222%, #FCC5C0 22.2222%, #FCC5C0 33.3333%, #FA9FB5 33.3333%, #FA9FB5 44.4444%, #F768A1 44.4444%, #F768A1 55.5556%, #DD3497 55.5556%, #DD3497 66.6667%, #AE017E 66.6667%, #AE017E 77.7778%, #7A0177 77.7778%, #7A0177 88.8889%, #49006A 88.8889%, #49006A 100%); color: white; margin-bottom: 2px; @@ -199,7 +256,8 @@ #nj_tiles_scale_3 .option[data-value="Purples"], #nj_tiles_scale_4 .option[data-value="Purples"], #nj_tiles_scale_5 .option[data-value="Purples"], -#nj_heatmap_scale .option[data-value="Purples"] { +#nj_heatmap_scale .option[data-value="Purples"], +#nj_clade_scale .option[data-value="Purples"] { background: linear-gradient(to right, #FCFBFD 0%, #FCFBFD 11.1111%, #EFEDF5 11.1111%, #EFEDF5 22.2222%, #DADAEB 22.2222%, #DADAEB 33.3333%, #BCBDDC 33.3333%, #BCBDDC 44.4444%, #9E9AC8 44.4444%, #9E9AC8 55.5556%, #807DBA 55.5556%, #807DBA 66.6667%, #6A51A3 66.6667%, #6A51A3 77.7778%, #54278F 77.7778%, #54278F 88.8889%, #3F007D 88.8889%, #3F007D 100%); color: white; margin-bottom: 2px; @@ -212,7 +270,8 @@ #nj_tiles_scale_3 .option[data-value="PuRd"], #nj_tiles_scale_4 .option[data-value="PuRd"], #nj_tiles_scale_5 .option[data-value="PuRd"], -#nj_heatmap_scale .option[data-value="PuRd"] { +#nj_heatmap_scale .option[data-value="PuRd"], +#nj_clade_scale .option[data-value="PuRd"] { background: linear-gradient(to right, #F7F4F9 0%, #F7F4F9 11.1111%, #E7E1EF 11.1111%, #E7E1EF 22.2222%, #D4B9DA 22.2222%, #D4B9DA 33.3333%, #C994C7 33.3333%, #C994C7 44.4444%, #DF65B0 44.4444%, #DF65B0 55.5556%, #E7298A 55.5556%, #E7298A 66.6667%, #CE1256 66.6667%, #CE1256 77.7778%, #980043 77.7778%, #980043 88.8889%, #67001F 88.8889%, #67001F 100%); color: white; margin-bottom: 2px; @@ -225,7 +284,8 @@ #nj_tiles_scale_3 .option[data-value="PuBuGn"], #nj_tiles_scale_4 .option[data-value="PuBuGn"], #nj_tiles_scale_5 .option[data-value="PuBuGn"], -#nj_heatmap_scale .option[data-value="PuBuGn"] { +#nj_heatmap_scale .option[data-value="PuBuGn"], +#nj_clade_scale .option[data-value="PuBuGn"] { background: linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11.1111%, #ECE2F0 11.1111%, #ECE2F0 22.2222%, #D0D1E6 22.2222%, #D0D1E6 33.3333%, #A6BDDB 33.3333%, #A6BDDB 44.4444%, #67A9CF 44.4444%, #67A9CF 55.5556%, #3690C0 55.5556%, #3690C0 66.6667%, #02818A 66.6667%, #02818A 77.7778%, #016C59 77.7778%, #016C59 88.8889%, #014636 88.8889%, #014636 100%); color: white; margin-bottom: 2px; @@ -238,7 +298,8 @@ #nj_tiles_scale_3 .option[data-value="PuBu"], #nj_tiles_scale_4 .option[data-value="PuBu"], #nj_tiles_scale_5 .option[data-value="PuBu"], -#nj_heatmap_scale .option[data-value="PuBu"] { +#nj_heatmap_scale .option[data-value="PuBu"], +#nj_clade_scale .option[data-value="PuBu"] { background: linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11.1111%, #ECE7F2 11.1111%, #ECE7F2 22.2222%, #D0D1E6 22.2222%, #D0D1E6 33.3333%, #A6BDDB 33.3333%, #A6BDDB 44.4444%, #74A9CF 44.4444%, #74A9CF 55.5556%, #3690C0 55.5556%, #3690C0 66.6667%, #0570B0 66.6667%, #0570B0 77.7778%, #045A8D 77.7778%, #045A8D 88.8889%, #023858 88.8889%, #023858 100%); color: white; margin-bottom: 2px; @@ -251,7 +312,8 @@ #nj_tiles_scale_3 .option[data-value="OrRd"], #nj_tiles_scale_4 .option[data-value="OrRd"], #nj_tiles_scale_5 .option[data-value="OrRd"], -#nj_heatmap_scale .option[data-value="OrRd"] { +#nj_heatmap_scale .option[data-value="OrRd"], +#nj_clade_scale .option[data-value="OrRd"] { background: linear-gradient(to right, #FFF7EC 0%, #FFF7EC 11.1111%, #FEE8C8 11.1111%, #FEE8C8 22.2222%, #FDD49E 22.2222%, #FDD49E 33.3333%, #FDBB84 33.3333%, #FDBB84 44.4444%, #FC8D59 44.4444%, #FC8D59 55.5556%, #EF6548 55.5556%, #EF6548 66.6667%, #D7301F 66.6667%, #D7301F 77.7778%, #B30000 77.7778%, #B30000 88.8889%, #7F0000 88.8889%, #7F0000 100%); color: white; margin-bottom: 2px; @@ -264,7 +326,8 @@ #nj_tiles_scale_3 .option[data-value="Oranges"], #nj_tiles_scale_4 .option[data-value="Oranges"], #nj_tiles_scale_5 .option[data-value="Oranges"], -#nj_heatmap_scale .option[data-value="Oranges"] { +#nj_heatmap_scale .option[data-value="Oranges"], +#nj_clade_scale .option[data-value="Oranges"] { background: linear-gradient(to right, #FFF5EB 0%, #FFF5EB 11.1111%, #FEE6CE 11.1111%, #FEE6CE 22.2222%, #FDD0A2 22.2222%, #FDD0A2 33.3333%, #FDAE6B 33.3333%, #FDAE6B 44.4444%, #FD8D3C 44.4444%, #FD8D3C 55.5556%, #F16913 55.5556%, #F16913 66.6667%, #D94801 66.6667%, #D94801 77.7778%, #A63603 77.7778%, #A63603 88.8889%, #7F2704 88.8889%, #7F2704 100%); color: white; margin-bottom: 2px; @@ -277,7 +340,8 @@ #nj_tiles_scale_3 .option[data-value="Greys"], #nj_tiles_scale_4 .option[data-value="Greys"], #nj_tiles_scale_5 .option[data-value="Greys"], -#nj_heatmap_scale .option[data-value="Greys"] { +#nj_heatmap_scale .option[data-value="Greys"], +#nj_clade_scale .option[data-value="Greys"] { background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 11.1111%, #F0F0F0 11.1111%, #F0F0F0 22.2222%, #D9D9D9 22.2222%, #D9D9D9 33.3333%, #BDBDBD 33.3333%, #BDBDBD 44.4444%, #969696 44.4444%, #969696 55.5556%, #737373 55.5556%, #737373 66.6667%, #525252 66.6667%, #525252 77.7778%, #252525 77.7778%, #252525 88.8889%, #000000 88.8889%, #000000 100%); color: white; } @@ -289,7 +353,8 @@ #nj_tiles_scale_3 .option[data-value="Greens"], #nj_tiles_scale_4 .option[data-value="Greens"], #nj_tiles_scale_5 .option[data-value="Greens"], -#nj_heatmap_scale .option[data-value="Greens"] { +#nj_heatmap_scale .option[data-value="Greens"], +#nj_clade_scale .option[data-value="Greens"] { background: linear-gradient(to right, #F7FCF5 0%, #F7FCF5 11.1111%, #E5F5E0 11.1111%, #E5F5E0 22.2222%, #C7E9C0 22.2222%, #C7E9C0 33.3333%, #A1D99B 33.3333%, #A1D99B 44.4444%, #74C476 44.4444%, #74C476 55.5556%, #41AB5D 55.5556%, #41AB5D 66.6667%, #238B45 66.6667%, #238B45 77.7778%, #006D2C 77.7778%, #006D2C 88.8889%, #00441B 88.8889%, #00441B 100%); color: white; margin-bottom: 2px; @@ -302,7 +367,8 @@ #nj_tiles_scale_3 .option[data-value="GnBu"], #nj_tiles_scale_4 .option[data-value="GnBu"], #nj_tiles_scale_5 .option[data-value="GnBu"], -#nj_heatmap_scale .option[data-value="GnBu"] { +#nj_heatmap_scale .option[data-value="GnBu"], +#nj_clade_scale .option[data-value="GnBu"] { background: linear-gradient(to right, #F7FCF0 0%, #F7FCF0 11.1111%, #E0F3DB 11.1111%, #E0F3DB 22.2222%, #CCEBC5 22.2222%, #CCEBC5 33.3333%, #A8DDB5 33.3333%, #A8DDB5 44.4444%, #7BCCC4 44.4444%, #7BCCC4 55.5556%, #4EB3D3 55.5556%, #4EB3D3 66.6667%, #2B8CBE 66.6667%, #2B8CBE 77.7778%, #0868AC 77.7778%, #0868AC 88.8889%, #084081 88.8889%, #084081 100%); color: white; margin-bottom: 2px; @@ -315,7 +381,8 @@ #nj_tiles_scale_3 .option[data-value="BuPu"], #nj_tiles_scale_4 .option[data-value="BuPu"], #nj_tiles_scale_5 .option[data-value="BuPu"], -#nj_heatmap_scale .option[data-value="BuPu"] { +#nj_heatmap_scale .option[data-value="BuPu"], +#nj_clade_scale .option[data-value="BuPu"] { background: linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11.1111%, #E0ECF4 11.1111%, #E0ECF4 22.2222%, #BFD3E6 22.2222%, #BFD3E6 33.3333%, #9EBCDA 33.3333%, #9EBCDA 44.4444%, #8C96C6 44.4444%, #8C96C6 55.5556%, #8C6BB1 55.5556%, #8C6BB1 66.6667%, #88419D 66.6667%, #88419D 77.7778%, #810F7C 77.7778%, #810F7C 88.8889%, #4D004B 88.8889%, #4D004B 100%); color: white; margin-bottom: 2px; @@ -328,7 +395,8 @@ #nj_tiles_scale_3 .option[data-value="BuGn"], #nj_tiles_scale_4 .option[data-value="BuGn"], #nj_tiles_scale_5 .option[data-value="BuGn"], -#nj_heatmap_scale .option[data-value="BuGn"] { +#nj_heatmap_scale .option[data-value="BuGn"], +#nj_clade_scale .option[data-value="BuGn"] { background: linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11.1111%, #E5F5F9 11.1111%, #E5F5F9 22.2222%, #CCECE6 22.2222%, #CCECE6 33.3333%, #99D8C9 33.3333%, #99D8C9 44.4444%, #66C2A4 44.4444%, #66C2A4 55.5556%, #41AE76 55.5556%, #41AE76 66.6667%, #238B45 66.6667%, #238B45 77.7778%, #006D2C 77.7778%, #006D2C 88.8889%, #00441B 88.8889%, #00441B 100%); color: white; margin-bottom: 2px; @@ -341,7 +409,8 @@ #nj_tiles_scale_3 .option[data-value="Blues"], #nj_tiles_scale_4 .option[data-value="Blues"], #nj_tiles_scale_5 .option[data-value="Blues"], -#nj_heatmap_scale .option[data-value="Blues"] { +#nj_heatmap_scale .option[data-value="Blues"], +#nj_clade_scale .option[data-value="Blues"] { background: linear-gradient(to right, #F7FBFF 0%, #F7FBFF 11.1111%, #DEEBF7 11.1111%, #DEEBF7 22.2222%, #C6DBEF 22.2222%, #C6DBEF 33.3333%, #9ECAE1 33.3333%, #9ECAE1 44.4444%, #6BAED6 44.4444%, #6BAED6 55.5556%, #4292C6 55.5556%, #4292C6 66.6667%, #2171B5 66.6667%, #2171B5 77.7778%, #08519C 77.7778%, #08519C 88.8889%, #08306B 88.8889%, #08306B 100%); color: white; margin-bottom: 2px; @@ -356,7 +425,7 @@ #nj_tiles_scale_5 .option[data-value="magma"], #nj_heatmap_scale .option[data-value="magma"] { background: linear-gradient(to right, #000004FF, #07071DFF, #160F3BFF, #29115AFF, #400F73FF, #56147DFF, #6B1D81FF, #802582FF, #952C80FF, #AB337CFF, #C03A76FF, #D6456CFF, #E85362FF, #F4685CFF, #FA815FFF, #FD9A6AFF, #FEB37BFF, #FECC8FFF, #FDE4A6FF, #FCFDBFFF); - color: black; + color: white; margin-bottom: 2px; } @@ -369,7 +438,7 @@ #nj_tiles_scale_5 .option[data-value="inferno"], #nj_heatmap_scale .option[data-value="inferno"] { background: linear-gradient(to right, #000004FF, #08051EFF, #190C3EFF, #300A5BFF, #460B6AFF, #5C126EFF, #711A6EFF, #87216BFF, #9C2964FF, #B1325AFF, #C43C4EFF, #D64B40FF, #E55C30FF, #F17020FF, #F8870EFF, #FCA007FF, #FBB91FFF, #F7D340FF, #F1ED6FFF, #FCFFA4FF); - color: black; + color: white; margin-bottom: 2px; } @@ -382,7 +451,7 @@ #nj_tiles_scale_5 .option[data-value="plasma"], #nj_heatmap_scale .option[data-value="plasma"] { background: linear-gradient(to right, #0D0887FF, #2D0594FF, #44039EFF, #5901A5FF, #6F00A8FF, #8305A7FF, #9512A1FF, #A72197FF, #B6308BFF, #C5407EFF, #D14E72FF, #DD5E66FF, #E76E5BFF, #EF7F4FFF, #F79044FF, #FBA238FF, #FEB72DFF, #FDCB26FF, #F7E225FF, #F0F921FF); - color: black; + color: white; margin-bottom: 2px; } @@ -395,7 +464,7 @@ #nj_tiles_scale_5 .option[data-value="viridis"], #nj_heatmap_scale .option[data-value="viridis"] { background: linear-gradient(to right, #440154FF, #481568FF, #482677FF, #453781FF, #3F4788FF, #39558CFF, #32648EFF, #2D718EFF, #287D8EFF, #238A8DFF, #1F968BFF, #20A386FF, #29AF7FFF, #3CBC75FF, #56C667FF, #74D055FF, #94D840FF, #B8DE29FF, #DCE318FF, #FDE725FF); - color: black; + color: white; margin-bottom: 2px; } @@ -408,7 +477,7 @@ #nj_tiles_scale_5 .option[data-value="cividis"], #nj_heatmap_scale .option[data-value="cividis"] { background: linear-gradient(to right, #00204DFF, #002A64FF, #00336FFF, #1F3C6DFF, #35466BFF, #444F6BFF, #53596CFF, #5F636EFF, #6B6C71FF, #777776FF, #838079FF, #908B79FF, #9D9677FF, #ABA074FF, #B9AC70FF, #C7B76BFF, #D7C463FF, #E5D05AFF, #F5DD4DFF, #FFEA46FF); - color: black; + color: white; margin-bottom: 2px; } @@ -421,7 +490,7 @@ #nj_tiles_scale_5 .option[data-value="rocket"], #nj_heatmap_scale .option[data-value="rocket"] { background: linear-gradient(to right, #03051AFF, #150E26FF, #281535FF, #3C1A42FF, #511E4DFF, #661F54FF, #7C1F5AFF, #931C5BFF, #AA185AFF, #C11754FF, #D3214BFF, #E33541FF, #ED4E3EFF, #F26847FF, #F4815AFF, #F5986FFF, #F6AE86FF, #F7C2A2FF, #F8D7BFFF, #FAEBDDFF); - color: black; + color: white; margin-bottom: 2px; } @@ -434,7 +503,7 @@ #nj_tiles_scale_5 .option[data-value="mako"], #nj_heatmap_scale .option[data-value="mako"] { background: linear-gradient(to right, #0B0405FF, #190E19FF, #27182DFF, #312142FF, #3A2C59FF, #3F3770FF, #414388FF, #3C5397FF, #38639DFF, #3573A1FF, #3482A4FF, #3491A8FF, #35A0ABFF, #3AAEADFF, #46BEADFF, #5ACCADFF, #7ED7AFFF, #A4E0BBFF, #C3E9CEFF, #DEF5E5FF); - color: black; + color: white; margin-bottom: 2px; } @@ -447,10 +516,126 @@ #nj_tiles_scale_5 .option[data-value="turbo"], #nj_heatmap_scale .option[data-value="turbo"] { background: linear-gradient(to right, #30123BFF, #3F3994FF, #455ED2FF, #4681F7FF, #3AA2FCFF, #23C3E4FF, #18DEC1FF, #2CF09EFF, #5BFB72FF, #8EFF49FF, #B5F836FF, #D6E635FF, #EFCD3AFF, #FCB036FF, #FD8A26FF, #F36215FF, #E14209FF, #C82803FF, #A51301FF, #7A0403FF); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Spectral"], +#nj_tippoint_scale .option[data-value="Spectral"], +#nj_tiles_scale_1 .option[data-value="Spectral"], +#nj_tiles_scale_2 .option[data-value="Spectral"], +#nj_tiles_scale_3 .option[data-value="Spectral"], +#nj_tiles_scale_4 .option[data-value="Spectral"], +#nj_tiles_scale_5 .option[data-value="Spectral"], +#nj_heatmap_scale .option[data-value="Spectral"] { + background: linear-gradient(to right, #9E0142, #D53E4F, #F46D43, #FDAE61, #FEE08B, #FFFFBF, #E6F598, #ABDDA4, #66C2A5, #3288BD, #5E4FA2); color: black; margin-bottom: 2px; } +#nj_tiplab_scale .option[data-value="RdYlGn"], +#nj_tippoint_scale .option[data-value="RdYlGn"], +#nj_tiles_scale_1 .option[data-value="RdYlGn"], +#nj_tiles_scale_2 .option[data-value="RdYlGn"], +#nj_tiles_scale_3 .option[data-value="RdYlGn"], +#nj_tiles_scale_4 .option[data-value="RdYlGn"], +#nj_tiles_scale_5 .option[data-value="RdYlGn"], +#nj_heatmap_scale .option[data-value="RdYlGn"] { + background: linear-gradient(to right, #A50026, #D73027, #F46D43, #FDAE61, #FEE08B, #FFFFBF, #D9EF8B, #A6D96A, #66BD63, #1A9850, #006837); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="RdYlBu"], +#nj_tippoint_scale .option[data-value="RdYlBu"], +#nj_tiles_scale_1 .option[data-value="RdYlBu"], +#nj_tiles_scale_2 .option[data-value="RdYlBu"], +#nj_tiles_scale_3 .option[data-value="RdYlBu"], +#nj_tiles_scale_4 .option[data-value="RdYlBu"], +#nj_tiles_scale_5 .option[data-value="RdYlBu"], +#nj_heatmap_scale .option[data-value="RdYlBu"] { + background: linear-gradient(to right, #A50026, #D73027, #F46D43, #FDAE61, #FEE090, #FFFFBF, #E0F3F8, #ABD9E9, #74ADD1, #4575B4, #313695); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="RdGy"], +#nj_tippoint_scale .option[data-value="RdGy"], +#nj_tiles_scale_1 .option[data-value="RdGy"], +#nj_tiles_scale_2 .option[data-value="RdGy"], +#nj_tiles_scale_3 .option[data-value="RdGy"], +#nj_tiles_scale_4 .option[data-value="RdGy"], +#nj_tiles_scale_5 .option[data-value="RdGy"], +#nj_heatmap_scale .option[data-value="RdGy"] { + background: linear-gradient(to right, #67001F, #B2182B, #D6604D, #F4A582, #FDDBC7, #FFFFFF, #E0E0E0, #BABABA, #878787, #4D4D4D, #1A1A1A); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="RdBu"], +#nj_tippoint_scale .option[data-value="RdBu"], +#nj_tiles_scale_1 .option[data-value="RdBu"], +#nj_tiles_scale_2 .option[data-value="RdBu"], +#nj_tiles_scale_3 .option[data-value="RdBu"], +#nj_tiles_scale_4 .option[data-value="RdBu"], +#nj_tiles_scale_5 .option[data-value="RdBu"], +#nj_heatmap_scale .option[data-value="RdBu"] { + background: linear-gradient(to right, #67001F, #B2182B, #D6604D, #F4A582, #FDDBC7, #F7F7F7, #D1E5F0, #92C5DE, #4393C3, #2166AC, #053061); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="PuOr"], +#nj_tippoint_scale .option[data-value="PuOr"], +#nj_tiles_scale_1 .option[data-value="PuOr"], +#nj_tiles_scale_2 .option[data-value="PuOr"], +#nj_tiles_scale_3 .option[data-value="PuOr"], +#nj_tiles_scale_4 .option[data-value="PuOr"], +#nj_tiles_scale_5 .option[data-value="PuOr"], +#nj_heatmap_scale .option[data-value="PuOr"] { + background: linear-gradient(to right, #7F3B08, #B35806, #E08214, #FDB863, #FEE0B6, #F7F7F7, #D8DAEB, #B2ABD2, #8073AC, #542788, #2D004B); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="PRGn"], +#nj_tippoint_scale .option[data-value="PRGn"], +#nj_tiles_scale_1 .option[data-value="PRGn"], +#nj_tiles_scale_2 .option[data-value="PRGn"], +#nj_tiles_scale_3 .option[data-value="PRGn"], +#nj_tiles_scale_4 .option[data-value="PRGn"], +#nj_tiles_scale_5 .option[data-value="PRGn"], +#nj_heatmap_scale .option[data-value="PRGn"] { + background: linear-gradient(to right, #40004B, #762A83, #9970AB, #C2A5CF, #E7D4E8, #F7F7F7, #D9F0D3, #A6DBA0, #5AAE61, #1B7837, #00441B); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="PiYG"], +#nj_tippoint_scale .option[data-value="PiYG"], +#nj_tiles_scale_1 .option[data-value="PiYG"], +#nj_tiles_scale_2 .option[data-value="PiYG"], +#nj_tiles_scale_3 .option[data-value="PiYG"], +#nj_tiles_scale_4 .option[data-value="PiYG"], +#nj_tiles_scale_5 .option[data-value="PiYG"], +#nj_heatmap_scale .option[data-value="PiYG"] { + background: linear-gradient(to right, #8E0152, #C51B7D, #DE77AE, #F1B6DA, #FDE0EF, #F7F7F7, #E6F5D0, #B8E186, #7FBC41, #4D9221, #276419); + color: black; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="BrBG"], +#nj_tippoint_scale .option[data-value="BrBG"], +#nj_tiles_scale_1 .option[data-value="BrBG"], +#nj_tiles_scale_2 .option[data-value="BrBG"], +#nj_tiles_scale_3 .option[data-value="BrBG"], +#nj_tiles_scale_4 .option[data-value="BrBG"], +#nj_tiles_scale_5 .option[data-value="BrBG"], +#nj_heatmap_scale .option[data-value="BrBG"] { + background: linear-gradient(to right, #543005, #8C510A, #BF812D, #DFC27D, #F6E8C3, #F5F5F5, #C7EAE5, #80CDC1, #35978F, #01665E, #003C30); + color: black; + margin-bottom: 2px; +} .pulsating-button:hover { animation: none; From cb10450f40182b8064a5ab2865b00438fad1588d Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Wed, 13 Mar 2024 17:09:20 +0100 Subject: [PATCH 10/26] Further adaptions in visualization UI for NJ tree --- App.R | 46 +++++++++++++++++++++++++++------------------- www/mycss.css | 12 ++++++------ 2 files changed, 33 insertions(+), 25 deletions(-) diff --git a/App.R b/App.R index 85f872e..20e8bf0 100644 --- a/App.R +++ b/App.R @@ -2327,7 +2327,7 @@ ui <- dashboardPage( ), column( width = 7, - align = "left", + align = "right", dropMenu( actionBttn( "nj_tippoint_menu", @@ -2408,7 +2408,8 @@ ui <- dashboardPage( conditionalPanel( "input.nj_tipshape_mapping_show==true", h5(p("Variable assigned"), style = "color:white; position: relative; right: -17px; margin-top: 30px; font-style: italic") - ) + ), + br(), br() ) ) ) @@ -2491,7 +2492,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5(p("Shape"), style = "color:white; position: relative; right: -20px; margin-top: 30px") + h5(p("Shape"), style = "color:white; position: relative; right: -15px; margin-top: 30px") ), column( width = 7, @@ -2507,7 +2508,8 @@ ui <- dashboardPage( Cross = "cross", Asterisk = "asterisk" ) - ) + ), + br(), br() ) ) ) @@ -2856,18 +2858,21 @@ ui <- dashboardPage( fluidRow( column( width = 12, - materialSwitch( - "nj_nodelabel_show", - h5(p("Toggle Node View"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), - value = FALSE, - right = TRUE + div( + class = "mat-switch", + materialSwitch( + "nj_nodelabel_show", + h5(p("Toggle Node View"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ) ), fluidRow( column( width = 3, - h5(p("Nodes"), style = "color:white; position: relative; right: -20px; margin-top: 20px") + h5(p("Nodes"), style = "color:white; position: relative; right: -15px; margin-top: 20px") ), column( width = 9, @@ -2879,13 +2884,16 @@ ui <- dashboardPage( column( width = 8, align = "center", - selectInput( - "nj_clade_type", - "", - choices = c("Rect" = "rect", - "Round" = "roundrect"), - selected = c("Round" = "roundrect") - ) + div( + class = "sel-clade", + selectInput( + "nj_clade_type", + "", + choices = c("Rect" = "rect", + "Round" = "roundrect"), + selected = c("Round" = "roundrect") + ) + ) ), column( width = 4, @@ -9870,7 +9878,7 @@ server <- function(input, output, session) { fluidRow( column( width = 5, - h5("Color", style = "color:white; position: relative; right: -20px; margin-top: 30px") + h5("Color", style = "color:white; position: relative; right: -15px; margin-top: 30px") ), column( width = 7, @@ -9891,7 +9899,7 @@ server <- function(input, output, session) { fluidRow( column( width = 5, - h5("Scale", style = "color:white; position: relative; right: -20px; margin-top: 30px") + h5("Scale", style = "color:white; position: relative; right: -15px; margin-top: 30px") ), column( width = 7, diff --git a/www/mycss.css b/www/mycss.css index e0e465a..2733d05 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -8,8 +8,8 @@ animation: pulsate 1s ease infinite; } -#shiny-tab-visualization > div:nth-child(5) > div > div:nth-child(4) > div:nth-child(5) > div > div > div > div > div:nth-child(5) > div.col-sm-8 > div { - margin-left: 20px; +.sel-clade { + margin-left: 15px; } #nj_parentnode { @@ -17,9 +17,9 @@ margin-top: -10px; } -#shiny-tab-visualization > div:nth-child(5) > div > div:nth-child(4) > div:nth-child(5) > div > div > div > div > div:nth-child(2) > div > div > div > label.switch.label-default.bg-default { - margin-left: 20px; - margin-top: 35px; +.mat-switch { + margin-left: 15px; + margin-top: 20px; } .material-switch>label.switch:before { @@ -1427,7 +1427,7 @@ button#nj_tile_menu_5 { } #nj_nodepoint_color { - margin-bottom: 16px; + margin-bottom: 0px; } #nj_treescale_show { From 50dc693a8ba39fe1b637b771ef38a8238bd32cb2 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Wed, 13 Mar 2024 18:44:16 +0100 Subject: [PATCH 11/26] Changes in plot fields --- App.R | 40 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/App.R b/App.R index 20e8bf0..edb0434 100644 --- a/App.R +++ b/App.R @@ -9868,6 +9868,18 @@ server <- function(input, output, session) { # _______________________ #### ## Visualization ---- + + # Render placeholder image + + output$placeholder <- renderImage({ + # Path to your PNG image with a transparent background + image_path <- paste0(getwd(), "/www/PhyloTrace.png") + + # Use HTML to display the image with the tag + list(src = image_path, + height = 180) + }, deleteFile = FALSE) + ### Render Visualization Controls ---- #### NJ and UPGMA controls ---- @@ -11176,6 +11188,16 @@ server <- function(input, output, session) { width = "150px", ticks = FALSE ) + } else { + sliderInput( + "nj_fruit_width_circ", + label = h5("Width", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 10, + value = 5, + width = "150px", + ticks = FALSE + ) } }) @@ -11486,15 +11508,27 @@ server <- function(input, output, session) { ### Render Plot field ---- output$mst_field <- renderUI({ - visNetworkOutput("tree_mst", width = paste0(as.character(as.numeric(input$mst_scale) * as.numeric(input$mst_ratio)), "px"), height = paste0(as.character(input$mst_scale), "px")) + addSpinner( + visNetworkOutput("tree_mst", width = paste0(as.character(as.numeric(input$mst_scale) * as.numeric(input$mst_ratio)), "px"), height = paste0(as.character(input$mst_scale), "px")), + spin = "dots", + color = "#ffffff" + ) }) output$nj_field <- renderUI({ - plotOutput("tree_nj", width = paste0(as.character(as.numeric(input$nj_scale) * as.numeric(input$nj_ratio)), "px"), height = paste0(as.character(input$nj_scale), "px")) + addSpinner( + plotOutput("tree_nj", width = paste0(as.character(as.numeric(input$nj_scale) * as.numeric(input$nj_ratio)), "px"), height = paste0(as.character(input$nj_scale), "px")) , + spin = "dots", + color = "#ffffff" + ) }) output$upgma_field <- renderUI({ - plotOutput("tree_upgma", width = paste0(as.character(as.numeric(input$upgma_scale) * as.numeric(input$upgma_ratio)), "px"), height = paste0(as.character(input$upgma_scale), "px")) + addSpinner( + plotOutput("tree_upgma", width = paste0(as.character(as.numeric(input$upgma_scale) * as.numeric(input$upgma_ratio)), "px"), height = paste0(as.character(input$upgma_scale), "px")), + spin = "dots", + color = "#ffffff" + ) }) ### Plot Reactives ---- From d1a2c0ec1f8844235f3d880dc120fdc15b6b2ba9 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Wed, 13 Mar 2024 19:12:35 +0100 Subject: [PATCH 12/26] UI changes for NJ tile selector --- App.R | 39 +++++++++++++++++++++++++++++++++++++++ www/mycss.css | 4 ++++ 2 files changed, 43 insertions(+) diff --git a/App.R b/App.R index edb0434..0dc8aba 100644 --- a/App.R +++ b/App.R @@ -2530,6 +2530,36 @@ ui <- dashboardPage( h4(p("Tiles"), style = "color:white; position: relative; right: -15px") ) ), + fluidRow( + column( + width = 5, + div( + class = "tile-sel", + selectInput( + "nj_tile_number", + "", + choices = 1:5, + width = "70px" + ) + ) + ), + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "mst_title_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent" + ) + ) + ), conditionalPanel( "input.nj_tile_num == 1", fluidRow( @@ -9884,6 +9914,15 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- + # Tile number selector update each other + observeEvent(input$nj_tile_num, { + updateSelectInput(session, "nj_tile_number", selected = input$nj_tile_num) + }) + + observeEvent(input$nj_tile_number, { + updateSelectInput(session, "nj_tile_num", selected = input$nj_tile_number) + }) + # Clade coloring output$nj_clade_scale <- renderUI({ if(length(input$nj_parentnode) <= 1) { diff --git a/www/mycss.css b/www/mycss.css index 2733d05..31bb3c4 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -12,6 +12,10 @@ margin-left: 15px; } +.tile-sel { + margin-left: 15px; +} + #nj_parentnode { margin-left: 38px; margin-top: -10px; From 88ecfe4f0b69e994e2ef663bc686d0e7807eb08b Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Wed, 13 Mar 2024 22:02:45 +0100 Subject: [PATCH 13/26] Beautified visualization controls for heatmap and tiles --- App.R | 424 ++++++++++++++++++++++++++++++++------------------ www/mycss.css | 19 ++- 2 files changed, 288 insertions(+), 155 deletions(-) diff --git a/App.R b/App.R index 0dc8aba..3200ec8 100644 --- a/App.R +++ b/App.R @@ -2363,7 +2363,7 @@ ui <- dashboardPage( column( width = 5, align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 30px") + h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 40px") ), column( width = 7, @@ -2384,7 +2384,7 @@ ui <- dashboardPage( column( width = 5, align = "left", - h5(p("Shape"), style = "color:white; position: relative; right: -17px; margin-top: 30px") + h5(p("Shape"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: 50px") ), column( width = 7, @@ -2407,9 +2407,9 @@ ui <- dashboardPage( ), conditionalPanel( "input.nj_tipshape_mapping_show==true", - h5(p("Variable assigned"), style = "color:white; position: relative; right: -17px; margin-top: 30px; font-style: italic") + h5(p("Variable assigned"), style = "color:white; position: relative; right: -15px; margin-top: 30px; font-style: italic") ), - br(), br() + br() ) ) ) @@ -2472,7 +2472,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 30px") + h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 40px") ), column( width = 7, @@ -2492,7 +2492,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5(p("Shape"), style = "color:white; position: relative; right: -15px; margin-top: 30px") + h5(p("Shape"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: 50px") ), column( width = 7, @@ -2509,7 +2509,7 @@ ui <- dashboardPage( Asterisk = "asterisk" ) ), - br(), br() + br() ) ) ) @@ -2548,7 +2548,7 @@ ui <- dashboardPage( align = "right", dropMenu( actionBttn( - "mst_title_menu", + "nj_tile_menu", label = "", color = "default", size = "sm", @@ -2556,15 +2556,90 @@ ui <- dashboardPage( icon = icon("sliders") ), placement = "top-start", - theme = "translucent" + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + conditionalPanel( + "input.nj_tile_num == 1", + sliderInput( + "nj_fruit_alpha", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.nj_tile_num == 2", + sliderInput( + "nj_fruit_alpha_2", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.nj_tile_num == 3", + sliderInput( + "nj_fruit_alpha_3", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.nj_tile_num == 4", + sliderInput( + "nj_fruit_alpha_4", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.nj_tile_num == 5", + sliderInput( + "nj_fruit_alpha_5", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + ) + ) ) + ) ) ), conditionalPanel( "input.nj_tile_num == 1", fluidRow( column( - width = 12, + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 27px;") + ), + column( + width = 7, align = "center", uiOutput("nj_fruit_width"), br() @@ -2572,11 +2647,15 @@ ui <- dashboardPage( ), fluidRow( column( - width = 12, + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 51px") + ), + column( + width = 7, align = "center", sliderInput( "nj_fruit_offset_circ", - label = h5("Position", style = "color:white; margin-bottom: 0px"), + label = "", min = -3, max = 3, step= 0.05, @@ -2586,28 +2665,17 @@ ui <- dashboardPage( ), br() ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) ) ), conditionalPanel( "input.nj_tile_num == 2", fluidRow( column( - width = 12, + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 27px;") + ), + column( + width = 7, align = "center", uiOutput("nj_fruit_width2"), br() @@ -2615,11 +2683,15 @@ ui <- dashboardPage( ), fluidRow( column( - width = 12, + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 62px") + ), + column( + width = 7, align = "center", sliderInput( "nj_fruit_offset_circ_2", - label = h5("Position", style = "color:white; margin-bottom: 0px"), + label = "", min = -3, max = 3, step= 0.05, @@ -2629,28 +2701,17 @@ ui <- dashboardPage( ), br() ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_2", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) ) ), conditionalPanel( "input.nj_tile_num == 3", fluidRow( column( - width = 12, + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 27px;") + ), + column( + width = 7, align = "center", uiOutput("nj_fruit_width3"), br() @@ -2658,11 +2719,15 @@ ui <- dashboardPage( ), fluidRow( column( - width = 12, + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 62px") + ), + column( + width = 7, align = "center", sliderInput( "nj_fruit_offset_circ_3", - label = h5("Position", style = "color:white; margin-bottom: 0px"), + label = "", min = -3, max = 3, step= 0.05, @@ -2672,28 +2737,17 @@ ui <- dashboardPage( ), br() ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_3", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) ) ), conditionalPanel( "input.nj_tile_num == 4", fluidRow( column( - width = 12, + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 27px;") + ), + column( + width = 7, align = "center", uiOutput("nj_fruit_width4"), br() @@ -2701,11 +2755,15 @@ ui <- dashboardPage( ), fluidRow( column( - width = 12, + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 62px") + ), + column( + width = 7, align = "center", sliderInput( "nj_fruit_offset_circ_4", - label = h5("Position", style = "color:white; margin-bottom: 0px"), + label = "", min = -3, max = 3, value = 0, @@ -2715,28 +2773,17 @@ ui <- dashboardPage( ), br() ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_4", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) ) ), conditionalPanel( "input.nj_tile_num == 5", fluidRow( column( - width = 12, + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 27px;") + ), + column( + width = 7, align = "center", uiOutput("nj_fruit_width5"), br() @@ -2744,11 +2791,15 @@ ui <- dashboardPage( ), fluidRow( column( - width = 12, + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 62px") + ), + column( + width = 7, align = "center", sliderInput( "nj_fruit_offset_circ_5", - label = h5("Position", style = "color:white; margin-bottom: 0px"), + label = "", min = -3, max = 3, value = 0, @@ -2758,21 +2809,6 @@ ui <- dashboardPage( ), br() ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "nj_fruit_alpha_5", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) ) ) ) @@ -2795,17 +2831,21 @@ ui <- dashboardPage( ), fluidRow( column( - width = 7, - align = "left", + width = 3, + h5("Title", style = "color:white; margin-left: 15px; margin-top: 32px;") + ), + column( + width = 6, + align = "center", textInput( "nj_heatmap_title", - label = h5("Legend Title", style = "color:white; margin-bottom: 0px;"), + label = "", value = "Heatmap", placeholder = "Heatmap" ) ), column( - width = 5, + width = 3, align = "right", dropMenu( actionBttn( @@ -2820,58 +2860,70 @@ ui <- dashboardPage( theme = "translucent", fluidRow( column( - width = 6, - align = "center", - sliderInput( - "nj_heatmap_width", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 5, - value = 0.5, - width = "250px", - ticks = FALSE - ), - br(), - uiOutput("nj_heatmap_offs"), - ), - column( - width = 6, + width = 12, align = "center", - br(), sliderInput( "nj_colnames_angle", - label = h5("Names angle", style = "color:white; margin-bottom: 0px"), + label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), min = -90, max = 90, value = 0, - width = "250px", + width = "150px", ticks = FALSE ), br(), sliderInput( "nj_colnames_x", - label = h5("Names X Pos", style = "color:white; margin-bottom: 0px"), + label = h5("Names X-Position", style = "color:white; margin-bottom: 0px"), min = -10, max = 10, value = 0, - width = "250px", + width = "150px", ticks = FALSE ), br(), sliderInput( "nj_colnames_y", - label = h5("Names Y Pos", style = "color:white; margin-bottom: 0px"), + label = h5("Names Y-Position", style = "color:white; margin-bottom: 0px"), min = -10, max = 10, value = 0, - width = "250px", + width = "150px", ticks = FALSE ) ) ) ) ) - ) + ), + fluidRow( + column( + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 32px;") + ), + column( + width = 7, + uiOutput("nj_heatmap_offset") + ) + ), + fluidRow( + column( + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px;") + ), + column( + width = 7, + sliderInput( + "nj_heatmap_width", + label = "", + min = 0.1, + max = 5, + value = 0.5, + width = "150px", + ticks = FALSE + ) + ) + ), br(), br() ) ) ), @@ -10898,28 +10950,56 @@ server <- function(input, output, session) { }) # Heatmap offset - output$nj_heatmap_offs <- renderUI({ - numericInput( - "nj_heatmap_offset", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -ceiling(Vis$nj_max_x), - max = ceiling(Vis$nj_max_x), - step = 1, - value = 0, - width = "80px" - ) + output$nj_heatmap_offset <- renderUI({ + if(!is.null(Vis$nj_max_x)) { + sliderInput( + "nj_heatmap_offset", + label = "", + min = -ceiling(Vis$nj_max_x), + max = ceiling(Vis$nj_max_x), + step = 1, + value = 0, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_heatmap_offset", + label = "", + min = -10, + max = 10, + step = 1, + value = 0, + width = "150px", + ticks = FALSE + ) + } }) output$upgma_heatmap_offs <- renderUI({ - numericInput( - "upgma_heatmap_offset", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -ceiling(Vis$upgma_max_x), - max = ceiling(Vis$upgma_max_x), - step = 1, - value = 0, - width = "80px" - ) + if(!is.null(Vis$upgma_max_x)) { + sliderInput( + "upgma_heatmap_offset", + label = "", + min = -ceiling(Vis$upgma_max_x), + max = ceiling(Vis$upgma_max_x), + step = 1, + value = 0, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_heatmap_offset", + label = "", + min = -10, + max = 10, + step = 1, + value = 0, + width = "150px", + ticks = FALSE + ) + } }) ### Tiling @@ -11220,7 +11300,7 @@ server <- function(input, output, session) { } sliderInput( "nj_fruit_width_circ", - label = h5("Width", style = "color:white; margin-bottom: 0px"), + label = "", min = min, max = round(ceiling(Vis$nj_max_x) * 0.5, 0), value = ceiling(Vis$nj_max_x * 0.08), @@ -11230,7 +11310,7 @@ server <- function(input, output, session) { } else { sliderInput( "nj_fruit_width_circ", - label = h5("Width", style = "color:white; margin-bottom: 0px"), + label = "", min = 1, max = 10, value = 5, @@ -11249,13 +11329,23 @@ server <- function(input, output, session) { } sliderInput( "nj_fruit_width_circ_2", - label = h5("Width", style = "color:white; margin-bottom: 0px"), + label = "", min = min, max = round(ceiling(Vis$nj_max_x) * 0.5, 0), value = ceiling(Vis$nj_max_x * 0.08), width = "150px", ticks = FALSE ) + } else { + sliderInput( + "nj_fruit_width_circ_2", + label = "", + min = 1, + max = 10, + value = 5, + width = "150px", + ticks = FALSE + ) } }) @@ -11268,13 +11358,23 @@ server <- function(input, output, session) { } sliderInput( "nj_fruit_width_circ_3", - label = h5("Width", style = "color:white; margin-bottom: 0px"), + label = "", min = min, max = round(ceiling(Vis$nj_max_x) * 0.5, 0), value = ceiling(Vis$nj_max_x * 0.08), width = "150px", ticks = FALSE ) + } else { + sliderInput( + "nj_fruit_width_circ_3", + label = "", + min = 1, + max = 10, + value = 5, + width = "150px", + ticks = FALSE + ) } }) @@ -11287,13 +11387,23 @@ server <- function(input, output, session) { } sliderInput( "nj_fruit_width_circ_4", - label = h5("Width", style = "color:white; margin-bottom: 0px"), + label = "", min = min, max = round(ceiling(Vis$nj_max_x) * 0.5, 0), value = ceiling(Vis$nj_max_x * 0.08), width = "150px", ticks = FALSE ) + } else { + sliderInput( + "nj_fruit_width_circ_4", + label = "", + min = 1, + max = 10, + value = 5, + width = "150px", + ticks = FALSE + ) } }) @@ -11306,13 +11416,23 @@ server <- function(input, output, session) { } sliderInput( "nj_fruit_width_circ_5", - label = h5("Width", style = "color:white; margin-bottom: 0px"), + label = "", min = min, max = round(ceiling(Vis$nj_max_x) * 0.5, 0), value = ceiling(Vis$nj_max_x * 0.08), width = "150px", ticks = FALSE ) + } else { + sliderInput( + "nj_fruit_width_circ_5", + label = "", + min = 1, + max = 10, + value = 5, + width = "150px", + ticks = FALSE + ) } }) diff --git a/www/mycss.css b/www/mycss.css index 31bb3c4..5b5269e 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -10,6 +10,7 @@ .sel-clade { margin-left: 15px; + margin-block: -2px; } .tile-sel { @@ -1370,7 +1371,8 @@ button#nj_heatmap_menu { background: #20E6E5; color: #000000; margin-top: 21px; - border-radius: 5px + border-radius: 5px; + margin-left: -10px; } button#nj_clade_menu { @@ -1427,11 +1429,13 @@ button#nj_tile_menu_5 { } #nj_tippoint_color { - margin-bottom: 0px + margin-bottom: 10px; + margin-top: 10px; } #nj_nodepoint_color { - margin-bottom: 0px; + margin-bottom: 10px; + margin-top: 10px; } #nj_treescale_show { @@ -1627,6 +1631,15 @@ button#nj_tile_menu_5 { top: -17px; } +#nj_heatmap_offset { + margin-bottom: 10px; +} + +#nj_fruit_width, #nj_fruit_width_2, #nj_fruit_width_3, #nj_fruit_width_4, #nj_fruit_width_5 { + margin-top: -5px; + margin-bottom: -15px; +} + #nj_tile_color_low { position: relative; right: -13px; From 797ed6a9714556c373e80d7653a0727201c122c0 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Thu, 14 Mar 2024 09:32:41 +0100 Subject: [PATCH 14/26] Small changes in control input defaults and UI changes --- App.R | 338 ++++++++++++++++++++++++++++++++++---------------- www/mycss.css | 9 +- 2 files changed, 236 insertions(+), 111 deletions(-) diff --git a/App.R b/App.R index 3200ec8..6bf367e 100644 --- a/App.R +++ b/App.R @@ -1551,7 +1551,7 @@ ui <- dashboardPage( align = "left", checkboxInput( "nj_ladder", - h5(p("Ladder"), style = "color:white; position: relative; bottom: 14px; right: -10px; margin-top: 22px; margin-bottom: 13px"), + h5(p("Ladder"), style = "color:white; position: relative; bottom: 14px; right: -10px; margin-top: 22px; margin-bottom: 12px"), value = TRUE ) ), @@ -2296,7 +2296,7 @@ ui <- dashboardPage( save = FALSE), position = "right-start" ), - br(), br(), br(), br() + br(), br() ) ) ) @@ -10664,43 +10664,82 @@ server <- function(input, output, session) { # Tippanel size output$nj_tiplab_padding <- renderUI( - sliderInput( - inputId = "nj_tiplab_padding", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - min = 0.05, - max = 1, - value = Vis$tiplab_padding_nj, - step = 0.05, - width = "150px", - ticks = FALSE - ) + if(!is.null(Vis$tiplab_padding_nj)) { + sliderInput( + inputId = "nj_tiplab_padding", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 0.05, + max = 1, + value = Vis$tiplab_padding_nj, + step = 0.05, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + inputId = "nj_tiplab_padding", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 0.05, + max = 1, + value = 0.2, + step = 0.05, + width = "150px", + ticks = FALSE + ) + } ) output$upgma_tiplab_padding <- renderUI( - sliderInput( - inputId = "upgma_tiplab_padding", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - min = 0.05, - max = 1, - value = Vis$tiplab_padding_upgma, - step = 0.05, - width = "150px", - ticks = FALSE - ) + if(!is.null(Vis$tiplab_padding_upgma)) { + sliderInput( + inputId = "upgma_tiplab_padding", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 0.05, + max = 1, + value = Vis$tiplab_padding_upgma, + step = 0.05, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + inputId = "upgma_tiplab_padding", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 0.05, + max = 1, + value = 0.2, + step = 0.05, + width = "150px", + ticks = FALSE + ) + } ) # Nodepoint size output$nj_nodepoint_size <- renderUI( - sliderInput( - inputId = "nj_nodepoint_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - min = 1, - max = 20, - value = Vis$nodepointsize_nj, - step = 0.5, - width = "150px", - ticks = FALSE - ) + if(!is.null(Vis$nodepointsize_nj)) { + sliderInput( + inputId = "nj_nodepoint_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 20, + value = Vis$nodepointsize_nj, + step = 0.5, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + inputId = "nj_nodepoint_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 20, + value = 2.5, + step = 0.5, + width = "150px", + ticks = FALSE + ) + } ) output$upgma_nodepoint_size <- renderUI( @@ -10719,16 +10758,29 @@ server <- function(input, output, session) { # Tippoint size output$nj_tippoint_size <- renderUI( - sliderInput( - inputId = "nj_tippoint_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - min = 1, - max = 20, - step = 0.5, - value = Vis$tippointsize_nj, - width = "150px", - ticks = FALSE - ) + if(!is.null(Vis$tippointsize_nj)) { + sliderInput( + inputId = "nj_tippoint_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 20, + step = 0.5, + value = Vis$tippointsize_nj, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + inputId = "nj_tippoint_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 20, + step = 0.5, + value = 4, + width = "150px", + ticks = FALSE + ) + } ) output$upgma_tippoint_size <- renderUI( @@ -10808,89 +10860,157 @@ server <- function(input, output, session) { # Treescale output$nj_treescale_width <- renderUI({ - numericInput( - "nj_treescale_width", - label = h5("Length", style = "color:white; margin-bottom: 0px"), - value = round(ceiling(Vis$nj_max_x) * 0.1, 0), - min = 1, - max = round(floor(Vis$nj_max_x) * 0.5, 0), - step = 1, - width = "80px" - ) + if(!is.null(Vis$nj_max_x)) { + numericInput( + "nj_treescale_width", + label = h5("Length", style = "color:white; margin-bottom: 0px"), + value = round(ceiling(Vis$nj_max_x) * 0.1, 0), + min = 1, + max = round(floor(Vis$nj_max_x) * 0.5, 0), + step = 1, + width = "80px" + ) + } else { + numericInput( + "nj_treescale_width", + label = h5("Length", style = "color:white; margin-bottom: 0px"), + value = 2, + min = 1, + max = 10, + step = 1, + width = "80px" + ) + } }) output$nj_treescale_x <- renderUI({ - - if(ceiling(Vis$nj_min_x) < 1) { - floor <- 1 + if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { + if(ceiling(Vis$nj_min_x) < 1) { + floor <- 1 + } else { + floor <- ceiling(Vis$nj_min_x) + } + sliderInput( + "nj_treescale_x", + label = h5("X Position", style = "color:white; margin-bottom: 0px"), + min = floor, + max = round(floor(Vis$nj_max_x)), + value = round(ceiling(Vis$nj_max_x) * 0.2, 0), + width = "150px", + ticks = FALSE + ) } else { - floor <- ceiling(Vis$nj_min_x) + sliderInput( + "nj_treescale_x", + label = h5("X Position", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 10, + value = 2, + width = "150px", + ticks = FALSE + ) } - - sliderInput( - "nj_treescale_x", - label = h5("X Position", style = "color:white; margin-bottom: 0px"), - min = floor, - max = round(floor(Vis$nj_max_x)), - value = round(ceiling(Vis$nj_max_x) * 0.2, 0), - width = "150px", - ticks = FALSE - ) }) output$nj_treescale_y <- renderUI({ - sliderInput( - "nj_treescale_y", - label = h5("Y Position", style = "color:white; margin-bottom: 0px"), - min = 0, - max = max(Vis$yrange_nj), - value = 0, - width = "150px", - ticks = FALSE - ) + if(!is.null(Vis$nj_min_x)) { + sliderInput( + "nj_treescale_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + min = 0, + max = max(Vis$yrange_nj), + value = 0, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_treescale_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + min = 0, + max = 10, + value = 0, + width = "150px", + ticks = FALSE + ) + } }) output$upgma_treescale_width <- renderUI({ - numericInput( - "upgma_treescale_width", - label = h5("Length", style = "color:white; margin-bottom: 0px"), - value = round(ceiling(Vis$upgma_max_x) * 0.1, 0), - min = 1, - max = round(floor(Vis$upgma_max_x) * 0.5, 0), - step = 1, - width = "80px" - ) + if(!is.null(Vis$upgma_max_x)) { + numericInput( + "upgma_treescale_width", + label = h5("Length", style = "color:white; margin-bottom: 0px"), + value = round(ceiling(Vis$upgma_max_x) * 0.1, 0), + min = 1, + max = round(floor(Vis$upgma_max_x) * 0.5, 0), + step = 1, + width = "80px" + ) + } else { + numericInput( + "upgma_treescale_width", + label = h5("Length", style = "color:white; margin-bottom: 0px"), + value = 2, + min = 1, + max = 10, + step = 1, + width = "80px" + ) + } }) output$upgma_treescale_x <- renderUI({ - - if(ceiling(Vis$upgma_min_x) < 1) { - floor <- 1 + if((!is.null(Vis$upgma_min_x)) & (!is.null(Vis$upgma_max_x))) { + if(ceiling(Vis$upgma_min_x) < 1) { + floor <- 1 + } else { + floor <- ceiling(Vis$upgma_min_x) + } + sliderInput( + "upgma_treescale_x", + label = h5("X Position", style = "color:white; margin-bottom: 0px"), + min = floor, + max = round(floor(Vis$upgma_max_x)), + value = round(ceiling(Vis$upgma_max_x) * 0.2, 0), + width = "150px", + ticks = FALSE + ) } else { - floor <- ceiling(Vis$upgma_min_x) + sliderInput( + "upgma_treescale_x", + label = h5("X Position", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 10, + value = 2, + width = "150px", + ticks = FALSE + ) } - - sliderInput( - "upgma_treescale_x", - label = h5("X Position", style = "color:white; margin-bottom: 0px"), - min = floor, - max = round(floor(Vis$upgma_max_x)), - value = round(ceiling(Vis$upgma_max_x) * 0.2, 0), - ticks = FALSE, - width = "150px" - ) }) output$upgma_treescale_y <- renderUI({ - sliderInput( - "upgma_treescale_y", - label = h5("Y Position", style = "color:white; margin-bottom: 0px"), - min = 0, - max = max(Vis$yrange_upgma), - value = 0, - width = "150px", - ticks = FALSE - ) + if(!is.null(Vis$upgma_min_x)) { + sliderInput( + "upgma_treescale_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + min = 0, + max = max(Vis$yrange_upgma), + value = 0, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_treescale_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + min = 0, + max = 10, + value = 0, + width = "150px", + ticks = FALSE + ) + } }) ### Heatmap @@ -11670,7 +11790,7 @@ server <- function(input, output, session) { addSpinner( visNetworkOutput("tree_mst", width = paste0(as.character(as.numeric(input$mst_scale) * as.numeric(input$mst_ratio)), "px"), height = paste0(as.character(input$mst_scale), "px")), spin = "dots", - color = "#ffffff" + color = "white" ) }) @@ -11678,7 +11798,7 @@ server <- function(input, output, session) { addSpinner( plotOutput("tree_nj", width = paste0(as.character(as.numeric(input$nj_scale) * as.numeric(input$nj_ratio)), "px"), height = paste0(as.character(input$nj_scale), "px")) , spin = "dots", - color = "#ffffff" + color = "white" ) }) @@ -11686,7 +11806,7 @@ server <- function(input, output, session) { addSpinner( plotOutput("tree_upgma", width = paste0(as.character(as.numeric(input$upgma_scale) * as.numeric(input$upgma_ratio)), "px"), height = paste0(as.character(input$upgma_scale), "px")), spin = "dots", - color = "#ffffff" + color = "white" ) }) diff --git a/www/mycss.css b/www/mycss.css index 5b5269e..b27f9a5 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -1204,10 +1204,14 @@ input.form-control.pickr-color { margin-top: -10px; } -#nj_subtitle_color, #nj_title_color, #nj_bg { +#nj_subtitle_color, #nj_title_color { margin-bottom: 11px; } +#nj_bg { + margin-bottom: 10px; +} + #nj_branch_label_menu-template > div > div:nth-child(2) > div:nth-child(2) { margin-top: 26px; margin-bottom: -10px; @@ -1522,7 +1526,8 @@ button#nj_tile_menu_5 { #nj_geom { margin-top: 0px; - margin-left: -5px + margin-left: -5px; + margin-bottom: 0px; } #nj_tiplab_color { From 42990c18924d6933a5f40166c25649bdda3a08ed Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Thu, 14 Mar 2024 11:04:25 +0100 Subject: [PATCH 15/26] Beautified variable tab of nj visualization --- App.R | 315 +++++++++++++++++++++++++++++++++----------------- www/mycss.css | 54 +++++---- 2 files changed, 239 insertions(+), 130 deletions(-) diff --git a/App.R b/App.R index 6bf367e..660a55a 100644 --- a/App.R +++ b/App.R @@ -2282,7 +2282,7 @@ ui <- dashboardPage( column( width = 4, align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 23px; margin-bottom: 94px") + h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 23px; margin-bottom: 87px") ), column( width = 4, @@ -2533,14 +2533,11 @@ ui <- dashboardPage( fluidRow( column( width = 5, - div( - class = "tile-sel", - selectInput( - "nj_tile_number", - "", - choices = 1:5, - width = "70px" - ) + selectInput( + "nj_tile_number", + "", + choices = 1:5, + width = "70px" ) ), column( @@ -2941,7 +2938,7 @@ ui <- dashboardPage( column( width = 12, div( - class = "mat-switch", + class = "mat-switch-v", materialSwitch( "nj_nodelabel_show", h5(p("Toggle Node View"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), @@ -3016,7 +3013,7 @@ ui <- dashboardPage( conditionalPanel( "input.nj_controls=='Variables'", column( - width = 6, + width = 7, box( solidHeader = TRUE, status = "info", @@ -3027,24 +3024,31 @@ ui <- dashboardPage( fluidRow( column( width = 3, - h4(p("Element"), style = "color:white; margin-left: 8px") + align = "center", + h4(p("Element"), style = "color:white; margin-bottom: 20px") ), column( width = 3, - h4(p("Variable"), style = "color:white; margin-left: 8px") + align = "center", + h4(p("Variable"), style = "color:white; margin-bottom: 20px; margin-right: 30px;") ), column( width = 6, - h4(p("Color Scale"), style = "color:white; margin-left: 8px") + align = "center", + h4(p("Color Scale"), style = "color:white; margin-bottom: 20px") ) ), fluidRow( column( width = 3, - checkboxInput( - "nj_mapping_show", - label = h5("Tip Label Color", style = "color:white; font-size: 14px; position: relative; bottom: -3px;"), - value = FALSE + div( + class = "mat-switch-v", + materialSwitch( + "nj_mapping_show", + h5(p("Tip Label Color"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), column( @@ -3060,12 +3064,19 @@ ui <- dashboardPage( conditionalPanel( "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiplab_scale)", column( - width = 3, - selectInput( - "nj_color_mapping_div_mid", - label = h5("Midpoint", style = "color:white; font-size: 14px;"), - choices = c("Zero", "Mean", "Median"), - selected = "Mean" + width = 1, + h5("Midpoint", style = "color: white; margin-top: 20px;") + ), + column( + width = 2, + div( + class = "divmid-sel", + selectInput( + "nj_color_mapping_div_mid", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) ) ) ) @@ -3073,10 +3084,14 @@ ui <- dashboardPage( fluidRow( column( width = 3, - checkboxInput( - "nj_tipcolor_mapping_show", - label = h5("Tip Point Color", style = "color:white; font-size: 14px;"), - value = FALSE + div( + class = "mat-switch-v", + materialSwitch( + "nj_tipcolor_mapping_show", + h5(p("Tip Point Color"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), column( @@ -3092,12 +3107,19 @@ ui <- dashboardPage( conditionalPanel( "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tippoint_scale)", column( - width = 3, - selectInput( - "nj_tipcolor_mapping_div_mid", - label = h5("Midpoint", style = "color:white; font-size: 14px;"), - choices = c("Zero", "Mean", "Median"), - selected = "Mean" + width = 1, + h5("Midpoint", style = "color: white; margin-top: 20px;") + ), + column( + width = 2, + div( + class = "divmid-sel", + selectInput( + "nj_tipcolor_mapping_div_mid", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) ) ) ) @@ -3105,10 +3127,14 @@ ui <- dashboardPage( fluidRow( column( width = 3, - checkboxInput( - "nj_tipshape_mapping_show", - label = h5("Tip Point Shape", style = "color:white; font-size: 14px;"), - value = FALSE + div( + class = "mat-switch-v", + materialSwitch( + "nj_tipshape_mapping_show", + h5(p("Tip Point Shape"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), column( @@ -3120,7 +3146,7 @@ ui <- dashboardPage( width = 3, HTML( paste( - tags$span(style='color: white; font-size: 14px; font-style: italic; position: relative; bottom: -16px; right: -5px;', 'No scale for shapes') + tags$span(style='color: white; font-size: 14px; font-style: italic; position: relative; bottom: -16px; right: -15px;', 'No scale for shapes') ) ) ) @@ -3130,61 +3156,86 @@ ui <- dashboardPage( width = 3, fluidRow( column( - width = 6, + width = 8, conditionalPanel( "input.nj_tile_num == 1", - checkboxInput( - "nj_tiles_show_1", - h5(p("Tile"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + div( + class = "mat-switch-v", + materialSwitch( + "nj_tiles_show_1", + h5(p("Tile"), style = "color:white; position: relative; top: -4px; right: -5px; margin-right: 10px"), + value = FALSE, + right = TRUE + ) ) ), conditionalPanel( "input.nj_tile_num == 2", - checkboxInput( - "nj_tiles_show_2", - h5(p("Tile"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + div( + class = "mat-switch-v", + materialSwitch( + "nj_tiles_show_2", + h5(p("Tile"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), conditionalPanel( "input.nj_tile_num == 3", - checkboxInput( - "nj_tiles_show_3", - h5(p("Tile"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + div( + class = "mat-switch-v", + materialSwitch( + "nj_tiles_show_3", + h5(p("Tile"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), conditionalPanel( "input.nj_tile_num == 4", - checkboxInput( - "nj_tiles_show_4", - h5(p("Tile"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + div( + class = "mat-switch-v", + materialSwitch( + "nj_tiles_show_4", + h5(p("Tile"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), conditionalPanel( "input.nj_tile_num == 5", - checkboxInput( - "nj_tiles_show_5", - h5(p("Tile"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + div( + class = "mat-switch-v", + materialSwitch( + "nj_tiles_show_5", + h5(p("Tile"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ) ), column( - width = 6, - selectInput( - "nj_tile_num", - "", - choices = 1:5, - width = "70px" + width = 4, + align = "left", + div( + class = "tile-sel", + selectInput( + "nj_tile_num", + "", + choices = 1:5, + width = "50px" + ) ) ) ) ), column( width = 3, + align = "center", conditionalPanel( "input.nj_tile_num == 1", uiOutput("nj_fruit_variable") @@ -3216,12 +3267,19 @@ ui <- dashboardPage( conditionalPanel( "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_1)", column( - width = 3, - selectInput( - "nj_tiles_mapping_div_mid_1", - label = h5("Midpoint", style = "color:white; font-size: 14px;"), - choices = c("Zero", "Mean", "Median"), - selected = "Mean" + width = 1, + h5("Midpoint", style = "color: white; margin-top: 20px;") + ), + column( + width = 2, + div( + class = "divmid-sel", + selectInput( + "nj_tiles_mapping_div_mid_1", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) ) ) ) @@ -3236,12 +3294,19 @@ ui <- dashboardPage( conditionalPanel( "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_2)", column( - width = 3, - selectInput( - "nj_tiles_mapping_div_mid_2", - label = h5("Midpoint", style = "color:white; font-size: 14px;"), - choices = c("Zero", "Mean", "Median"), - selected = "Mean" + width = 1, + h5("Midpoint", style = "color: white; margin-top: 20px;") + ), + column( + width = 2, + div( + class = "divmid-sel", + selectInput( + "nj_tiles_mapping_div_mid_2", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) ) ) ) @@ -3256,12 +3321,19 @@ ui <- dashboardPage( conditionalPanel( "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_3)", column( - width = 3, - selectInput( - "nj_tiles_mapping_div_mid_3", - label = h5("Midpoint", style = "color:white; font-size: 14px;"), - choices = c("Zero", "Mean", "Median"), - selected = "Mean" + width = 1, + h5("Midpoint", style = "color: white; margin-top: 20px;") + ), + column( + width = 2, + div( + class = "divmid-sel", + selectInput( + "nj_tiles_mapping_div_mid_3", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) ) ) ) @@ -3276,12 +3348,19 @@ ui <- dashboardPage( conditionalPanel( "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_4)", column( - width = 3, - selectInput( - "nj_tiles_mapping_div_mid_4", - label = h5("Midpoint", style = "color:white; font-size: 14px;"), - choices = c("Zero", "Mean", "Median"), - selected = "Mean" + width = 1, + h5("Midpoint", style = "color: white; margin-top: 20px;") + ), + column( + width = 2, + div( + class = "divmid-sel", + selectInput( + "nj_tiles_mapping_div_mid_4", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) ) ) ) @@ -3296,12 +3375,19 @@ ui <- dashboardPage( conditionalPanel( "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_5)", column( - width = 3, - selectInput( - "nj_tiles_mapping_div_mid_5", - label = h5("Midpoint", style = "color:white; font-size: 14px;"), - choices = c("Zero", "Mean", "Median"), - selected = "Mean" + width = 1, + h5("Midpoint", style = "color: white; margin-top: 20px;") + ), + column( + width = 2, + div( + class = "divmid-sel", + selectInput( + "nj_tiles_mapping_div_mid_5", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) ) ) ) @@ -3310,10 +3396,14 @@ ui <- dashboardPage( fluidRow( column( width = 3, - checkboxInput( - "nj_heatmap_show", - h5(p("Heatmap"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + div( + class = "mat-switch-v", + materialSwitch( + "nj_heatmap_show", + h5(p("Heatmap"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), column( @@ -3329,12 +3419,19 @@ ui <- dashboardPage( conditionalPanel( "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_heatmap_scale)", column( - width = 3, - selectInput( - "nj_heatmap_div_mid", - label = h5("Midpoint", style = "color:white; font-size: 14px;"), - choices = c("Zero", "Mean", "Median"), - selected = "Mean" + width = 1, + h5("Midpoint", style = "color: white; margin-top: 20px;") + ), + column( + width = 2, + div( + class = "divmid-sel", + selectInput( + "nj_heatmap_div_mid", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) ) ) ) @@ -11017,7 +11114,7 @@ server <- function(input, output, session) { # Heatmap picker output$upgma_heatmap_sel <- renderUI({ div( - class = "heatmap_picker", + class = "heatmap-picker", pickerInput( inputId = "upgma_heatmap_select", label = h5("Variables", style = "color:white; margin-bottom: 0px"), @@ -11044,10 +11141,10 @@ server <- function(input, output, session) { output$nj_heatmap_sel <- renderUI({ div( - class = "heatmap_picker", + class = "heatmap-picker", pickerInput( inputId = "nj_heatmap_select", - label = h5("Variables", style = "color:white; margin-bottom: 0px"), + label = "", width = "100%", choices = if(ncol(DB$meta) == 12) { c( diff --git a/www/mycss.css b/www/mycss.css index b27f9a5..5750c6c 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -13,8 +13,13 @@ margin-block: -2px; } +.divmid-sel { + margin-top: -10px; +} + .tile-sel { - margin-left: 15px; + margin-left: -20px; + margin-top: -10px; } #nj_parentnode { @@ -27,6 +32,11 @@ margin-top: 20px; } +.mat-switch-v { + margin-left: 25px; + margin-top: 15px; +} + .material-switch>label.switch:before { background: #20E6E5 !important; border-radius: 8px; @@ -167,7 +177,6 @@ #nj_clade_scale .option[data-value="Accent"] { background: linear-gradient(to right, #7FC97F 0%, #7FC97F 12.5%, #BEAED4 12.5%, #BEAED4 25%, #FDC086 25%, #FDC086 37.5%, #FFFF99 37.5%, #FFFF99 50%, #386CB0 50%, #386CB0 62.5%, #F0027F 62.5%, #F0027F 75%, #BF5B17 75%, #BF5B17 87.5%, #666666 87.5%, #666666 100%); color: black; - margin-bottom: 2px; } #nj_tiplab_scale .option[data-value="YlOrRd"], @@ -522,7 +531,6 @@ #nj_heatmap_scale .option[data-value="turbo"] { background: linear-gradient(to right, #30123BFF, #3F3994FF, #455ED2FF, #4681F7FF, #3AA2FCFF, #23C3E4FF, #18DEC1FF, #2CF09EFF, #5BFB72FF, #8EFF49FF, #B5F836FF, #D6E635FF, #EFCD3AFF, #FCB036FF, #FD8A26FF, #F36215FF, #E14209FF, #C82803FF, #A51301FF, #7A0403FF); color: white; - margin-bottom: 2px; } #nj_tiplab_scale .option[data-value="Spectral"], @@ -1272,9 +1280,14 @@ input.form-control.pickr-color { #nj_color_mapping { margin-top: -7px; - margin-bottom: -10px; + margin-bottom: 0px; + margin-right: 30px; } +#nj_heatmap_scale, #nj_tiles_scale_1, #nj_tiles_scale_2, #nj_tiles_scale_3, #nj_tiles_scale_4, #nj_tiles_scale_5 { + margin-top: -10px; +} + #nj_branch_label_color { margin-top: -7px; } @@ -1495,20 +1508,18 @@ button#nj_tile_menu_5 { margin-top: 13px; } -#nj_tipcolor_mapping_show { - margin-top: 10px; -} - -#nj_tipshape_mapping_show { - margin-top: 10px; +#nj_tipcolor_mapping, #nj_tipshape_mapping_show { + margin-top: -10px; + margin-right: 30px; } -#nj_tipshape_mapping { - margin-top: -6px; +#nj_tipshape_mapping, #nj_fruit_variable, #nj_fruit_variable2, #nj_fruit_variable3, #nj_fruit_variable4, #nj_fruit_variable5 { + margin-top: -10px; + margin-right: 30px; } -#nj_tiplab_scale { - margin-top: -7px; +#nj_tiplab_scale, #nj_tippoint_scale { + margin-top: 0px; margin-bottom: -10px; } @@ -1516,7 +1527,7 @@ button#nj_tile_menu_5 { margin-top: -7px; } -##nj_tipcolor_mapping > div > div > div { +#nj_tipcolor_mapping { margin-top: -10px; } @@ -1700,9 +1711,10 @@ button#nj_tile_menu_5 { margin-left: -5px; } -.heatmap_picker { - margin-top: 20px; - margin-left: 15px +.heatmap-picker { + margin-top: 0px; + margin-left: 3px; + margin-right: 30px; } #nj_nodepoint_show { @@ -2092,9 +2104,9 @@ button#upgma_tile_menu_5 { margin-left: -5px; } -.heatmap_picker { - margin-top: 20px; - margin-left: 15px +.heatmap-picker { + margin-top: -10px; + margin-left: 3px } #upgma_heatmap_title { From 99625011fffce03bde35554bb8d8a73f13069719 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Thu, 14 Mar 2024 16:19:49 +0100 Subject: [PATCH 16/26] Switch all checkBox inputs to materialSwitch --- App.R | 436 ++++++++++++++++++++++++++++++++------------------ www/mycss.css | 83 +++++++--- 2 files changed, 342 insertions(+), 177 deletions(-) diff --git a/App.R b/App.R index 660a55a..b727393 100644 --- a/App.R +++ b/App.R @@ -1544,28 +1544,22 @@ ui <- dashboardPage( ) ) ), - br(), fluidRow( column( - width = 5, - align = "left", - checkboxInput( - "nj_ladder", - h5(p("Ladder"), style = "color:white; position: relative; bottom: 14px; right: -10px; margin-top: 22px; margin-bottom: 12px"), - value = TRUE - ) - ), - column( - width = 3, + width = 8, align = "left", - checkboxInput( - "nj_rootedge_show", - h5(p("Root"), style = "color:white; position: relative; bottom: 15px; right: -5px; margin-top: 23px"), - value = FALSE + div( + class = "mat-switch-layout", + materialSwitch( + "nj_rootedge_show", + h5(p("Rootedge"), style = "color:white; padding-left: 0px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), column( - width = 2, + width = 4, align = "right", dropMenu( actionBttn( @@ -1596,6 +1590,21 @@ ui <- dashboardPage( ) ) ), + fluidRow( + column( + width = 8, + align = "left", + div( + class = "mat-switch-re", + materialSwitch( + "nj_ladder", + h5(p("Ladderize"), style = "color:white; padding-left: 0px; position: relative; top: -4px; right: -5px;"), + value = TRUE, + right = TRUE + ) + ) + ) + ), conditionalPanel( "input.nj_layout=='circular' | input.nj_layout=='inward'", fluidRow( @@ -1669,7 +1678,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5(p("Background"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: -8px") + h5(p("Background"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: 38px") ), column( width = 7, @@ -1845,17 +1854,21 @@ ui <- dashboardPage( width = 12, fluidRow( column( - width = 7, + width = 8, align = "left", - checkboxInput( - "nj_treescale_show", - h5(p("Show "), style = "color:white; position: relative; bottom: -7px; right: 0px"), - value = TRUE + div( + class = "mat-switch-layout", + materialSwitch( + "nj_treescale_show", + h5(p("Show"), style = "color:white; padding-left: 0px; position: relative; top: -4px; right: -5px;"), + value = TRUE, + right = TRUE + ) ), br() ), column( - width = 5, + width = 4, align = "right", dropMenu( actionBttn( @@ -1887,7 +1900,7 @@ ui <- dashboardPage( column( width = 12, align = "left", - h4(p("Legend"), style = "color:white; position: relative; right: -15px; margin-top: -3px; margin-bottom: -5px"), + h4(p("Legend"), style = "color:white; position: relative; right: -15px; margin-top: 10px; margin-bottom: -2px"), column( width = 12, align = "center", @@ -1980,10 +1993,14 @@ ui <- dashboardPage( column( width = 4, align = "left", - checkboxInput( - "nj_tiplab_show", - h5(p("Show"), style = "color:white; position: relative; right: -17px; bottom: -7px"), - value = TRUE + div( + class = "mat-switch-lab", + materialSwitch( + "nj_tiplab_show", + h5(p("Show"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = TRUE, + right = TRUE + ) ) ), column( @@ -1993,6 +2010,18 @@ ui <- dashboardPage( ), column( width = 3, + div( + class = "mat-switch-align", + materialSwitch( + "nj_align", + h5(p("Align"), style = "color:white; padding-left: 0px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) + ), + column( + width = 1, align = "right", dropMenu( actionBttn( @@ -2079,12 +2108,6 @@ ui <- dashboardPage( label = h5("Fontface", style = "color:white; margin-bottom: 5px; margin-top: 16px"), width = "250px", choices = c(Plain = "plain", Bold = "bold", Italic = "italic", `B & I` = "bold.italic") - ), - br(), - checkboxInput( - "nj_align", - h5(p("Align labels"), style = "color:white;"), - value = FALSE ) ) ) @@ -2119,10 +2142,14 @@ ui <- dashboardPage( width = 4, align = "left", br(), - checkboxInput( - "nj_geom", - h5(p("Panel"), style = "color:white; position: relative; bottom: 10px; right: -17px"), - value = FALSE + div( + class = "mat-switch-geom", + materialSwitch( + "nj_geom", + h5(p("Show"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), column( @@ -2140,7 +2167,7 @@ ui <- dashboardPage( ), column( width = 3, - align = "right", + align = "left", dropMenu( actionBttn( "nj_labelformat_menu", @@ -2192,10 +2219,14 @@ ui <- dashboardPage( column( width = 4, align = "left", - checkboxInput( - "nj_show_branch_label", - h5(p("Show"), style = "color:white; position: relative; bottom: -7px; right: -17px"), - value = FALSE + div( + class = "mat-switch-lab", + materialSwitch( + "nj_show_branch_label", + h5(p("Show"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), column( @@ -2282,7 +2313,7 @@ ui <- dashboardPage( column( width = 4, align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 23px; margin-bottom: 87px") + h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 23px; margin-bottom: 82px") ), column( width = 4, @@ -2317,16 +2348,20 @@ ui <- dashboardPage( h4(p("Tip Points"), style = "color:white; position: relative; right: -15px"), fluidRow( column( - width = 5, + width = 8, align = "left", - checkboxInput( - "nj_tippoint_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + div( + class = "mat-switch", + materialSwitch( + "nj_tippoint_show", + h5(p("Show"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), column( - width = 7, + width = 4, align = "right", dropMenu( actionBttn( @@ -2363,7 +2398,7 @@ ui <- dashboardPage( column( width = 5, align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 40px") + h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 36px") ), column( width = 7, @@ -2384,7 +2419,7 @@ ui <- dashboardPage( column( width = 5, align = "left", - h5(p("Shape"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: 50px") + h5(p("Shape"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: 48px") ), column( width = 7, @@ -2427,16 +2462,20 @@ ui <- dashboardPage( h4(p("Node Points"), style = "color:white; position: relative; right: -15px"), fluidRow( column( - width = 5, + width = 8, align = "left", - checkboxInput( - "nj_nodepoint_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + div( + class = "mat-switch", + materialSwitch( + "nj_nodepoint_show", + h5(p("Show"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), column( - width = 7, + width = 4, align = "right", dropMenu( actionBttn( @@ -2472,7 +2511,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 40px") + h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 36px") ), column( width = 7, @@ -2492,7 +2531,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5(p("Shape"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: 50px") + h5(p("Shape"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: 48px") ), column( width = 7, @@ -2533,11 +2572,14 @@ ui <- dashboardPage( fluidRow( column( width = 5, - selectInput( - "nj_tile_number", - "", - choices = 1:5, - width = "70px" + div( + class = "sel-tile-number", + selectInput( + "nj_tile_number", + "", + choices = 1:5, + width = "70px" + ) ) ), column( @@ -2645,7 +2687,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 51px") + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 54px") ), column( width = 7, @@ -2681,7 +2723,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 62px") + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 49px") ), column( width = 7, @@ -2717,7 +2759,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 62px") + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 49px") ), column( width = 7, @@ -2753,7 +2795,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 62px") + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 49px") ), column( width = 7, @@ -2789,7 +2831,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 62px") + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 49px") ), column( width = 7, @@ -2859,15 +2901,7 @@ ui <- dashboardPage( column( width = 12, align = "center", - sliderInput( - "nj_colnames_angle", - label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), - min = -90, - max = 90, - value = 0, - width = "150px", - ticks = FALSE - ), + uiOutput("nj_colnames_angle"), br(), sliderInput( "nj_colnames_x", @@ -2896,17 +2930,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5("Width", style = "color:white; margin-left: 15px; margin-top: 32px;") - ), - column( - width = 7, - uiOutput("nj_heatmap_offset") - ) - ), - fluidRow( - column( - width = 5, - h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px;") + h5("Width", style = "color: white; margin-left: 15px; margin-top: 40px;") ), column( width = 7, @@ -2920,7 +2944,18 @@ ui <- dashboardPage( ticks = FALSE ) ) - ), br(), br() + ), + fluidRow( + column( + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 36px;") + ), + column( + width = 7, + uiOutput("nj_heatmap_offset") + ) + ), + br(), br() ) ) ), @@ -2938,7 +2973,7 @@ ui <- dashboardPage( column( width = 12, div( - class = "mat-switch-v", + class = "mat-switch", materialSwitch( "nj_nodelabel_show", h5(p("Toggle Node View"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), @@ -3065,12 +3100,12 @@ ui <- dashboardPage( "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiplab_scale)", column( width = 1, - h5("Midpoint", style = "color: white; margin-top: 20px;") + h5("Midpoint", style = "color: white; margin-top: 22px;") ), column( width = 2, div( - class = "divmid-sel", + class = "divmid-sel1", selectInput( "nj_color_mapping_div_mid", label = "", @@ -8917,9 +8952,6 @@ server <- function(input, output, session) { # Change scheme observeEvent(input$reload_db, { - test <<- input$nj_tiplab - est <<- input$nj_tiplab_show - if(tail(readLines(paste0(getwd(), "/execute/script_log.txt")), 1)!= "0") { show_toast( title = "Pending Multi Typing", @@ -10063,15 +10095,65 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- + # Heatmap column titles angle + output$nj_colnames_angle <- renderUI({ + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + angle <- 90 + } else {angle <- 0} + sliderInput( + "nj_colnames_angle", + label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), + min = -90, + max = 90, + value = angle, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_colnames_angle", + label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), + min = -90, + max = 90, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + observeEvent(input$nj_layout, { + if(input$nj_layout == "circular" | input$nj_layout == "inward"){ + angle <- 90 + } else {angle <- 0} + updateSliderInput(session, "nj_colnames_angle", value = angle) + }) + # Tile number selector update each other observeEvent(input$nj_tile_num, { - updateSelectInput(session, "nj_tile_number", selected = input$nj_tile_num) + updateSelectInput(session, "nj_colnames_angle", selected = input$nj_tile_num) }) observeEvent(input$nj_tile_number, { updateSelectInput(session, "nj_tile_num", selected = input$nj_tile_number) }) + observeEvent(input$nj_tipcolor_mapping_show, { + updateCheckboxInput(session, "nj_tippoint_show", value = input$nj_tipcolor_mapping_show) + }) + + observeEvent(input$nj_tipshape_mapping_show, { + updateCheckboxInput(session, "nj_tippoint_show", value = input$nj_tipshape_mapping_show) + }) + + observeEvent(input$nj_tippoint_show, { + if(input$nj_tippoint_show == FALSE) { + updateCheckboxInput(session, "nj_tipcolor_mapping_show", value = FALSE) + updateCheckboxInput(session, "nj_tipshape_mapping_show", value = FALSE) + } + }) + # Clade coloring output$nj_clade_scale <- renderUI({ if(length(input$nj_parentnode) <= 1) { @@ -10104,39 +10186,42 @@ server <- function(input, output, session) { column( width = 7, align = "center", - selectInput( - "nj_clade_scale", - "", - choices = list( - Qualitative = list( - "Set1", - "Set2", - "Set3", - "Pastel1", - "Pastel2", - "Paired", - "Dark2", - "Accent" - ), - Sequential = list( - "YlOrRd", - "YlOrBr", - "YlGnBu", - "YlGn", - "Reds", - "RdPu", - "Purples", - "PuRd", - "PuBuGn", - "PuBu", - "OrRd", - "Oranges", - "Greys", - "Greens", - "GnBu", - "BuPu", - "BuGn", - "Blues" + div( + class = "sel-clade-scale", + selectInput( + "nj_clade_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) ) ) ) @@ -10907,34 +10992,58 @@ server <- function(input, output, session) { ) output$nj_tiplab_size <- renderUI( - numericInput( - "nj_tiplab_size", - label = h5("Label size", style = "color:white; margin-bottom: 0px"), - min = 1, - max = 10, - step = 0.5, - value = Vis$labelsize_nj, - width = "80px" - ) + if(!is.null(Vis$labelsize_nj)) { + numericInput( + "nj_tiplab_size", + label = h5("Label size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 10, + step = 0.5, + value = Vis$labelsize_nj, + width = "80px" + ) + } else { + numericInput( + "nj_tiplab_size", + label = h5("Label size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 10, + step = 0.5, + value = 4, + width = "80px" + ) + } ) # Rootedge length output$nj_rootedge_length <- renderUI({ - if(round(ceiling(Vis$nj_max_x) * 0.02, 0) < 1) { - min <- 1 + if(!is.null(Vis$nj_max_x)) { + if(round(ceiling(Vis$nj_max_x) * 0.02, 0) < 1) { + min <- 1 + } else { + min <- round(ceiling(Vis$nj_max_x) * 0.02, 0) + } + max <- round(ceiling(Vis$nj_max_x) * 0.2, 0) + sliderInput( + "nj_rootedge_length", + label = h5("Length", style = "color:white; margin-bottom: 0px"), + min = min, + max = max, + value = round(ceiling(Vis$nj_max_x) * 0.05, 0), + width = "150px", + ticks = FALSE + ) } else { - min <- round(ceiling(Vis$nj_max_x) * 0.02, 0) + sliderInput( + "nj_rootedge_length", + label = h5("Length", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 10, + value = 2, + width = "150px", + ticks = FALSE + ) } - max <- round(ceiling(Vis$nj_max_x) * 0.2, 0) - sliderInput( - "nj_rootedge_length", - label = h5("Length", style = "color:white; margin-bottom: 0px"), - min = min, - max = max, - value = round(ceiling(Vis$nj_max_x) * 0.05, 0), - width = "150px", - ticks = FALSE - ) }) output$upgma_rootedge_length <- renderUI({ @@ -11010,12 +11119,12 @@ server <- function(input, output, session) { }) output$nj_treescale_y <- renderUI({ - if(!is.null(Vis$nj_min_x)) { + if(!is.null(sum(DB$data$Include))) { sliderInput( "nj_treescale_y", label = h5("Y Position", style = "color:white; margin-bottom: 0px"), min = 0, - max = max(Vis$yrange_nj), + max = sum(DB$data$Include), value = 0, width = "150px", ticks = FALSE @@ -12141,7 +12250,7 @@ server <- function(input, output, session) { offset = nj_heatmap_offset(), width = input$nj_heatmap_width, legend_title = input$nj_heatmap_title, - colnames_angle = -(input$nj_colnames_angle), + colnames_angle = -nj_colnames_angle(), colnames_offset_x = input$nj_colnames_x, colnames_offset_y = input$nj_colnames_y) + heatmap_scale() @@ -12159,6 +12268,19 @@ server <- function(input, output, session) { } }) + # Heatmap column titles angle + nj_colnames_angle <- reactive({ + if(!is.null(input$nj_colnames_angle)) { + input$nj_colnames_angle + } else { + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "inward" | input$nj_layout == "circular") { + 90 + } else {0} + } else {0} + } + }) + # Heatmap scale heatmap_scale <- reactive({ if(!is.null(input$nj_heatmap_scale)) { @@ -12955,7 +13077,7 @@ server <- function(input, output, session) { # Tippoints tippoint <- reactive({ - if(input$nj_tippoint_show == TRUE | input$nj_tipcolor_mapping_show == TRUE) { + if(input$nj_tippoint_show == TRUE | input$nj_tipcolor_mapping_show == TRUE | input$nj_tipshape_mapping_show == TRUE) { if(input$nj_tipcolor_mapping_show == TRUE & input$nj_tipshape_mapping_show == FALSE) { geom_tippoint( aes(color = !!sym(input$nj_tipcolor_mapping)), diff --git a/www/mycss.css b/www/mycss.css index 5750c6c..971e6b0 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -13,10 +13,22 @@ margin-block: -2px; } +.sel-clade-scale { + margin-bottom: -14px; +} + +#nj_clade_scale { + margin-bottom 1px; +} + .divmid-sel { margin-top: -10px; } +.divmid-sel1 { + margin-top: -8px; +} + .tile-sel { margin-left: -20px; margin-top: -10px; @@ -29,7 +41,7 @@ .mat-switch { margin-left: 15px; - margin-top: 20px; + margin-top: 25px; } .mat-switch-v { @@ -37,6 +49,32 @@ margin-top: 15px; } +.mat-switch-geom { + margin-top: 5px; + margin-left: 15px; +} + +.mat-switch-lab { + margin-top: 25px; + margin-left: 15px; +} + +.mat-switch-layout { + margin-left: 10px; + margin-top: 20px; +} + +.mat-switch-re { + margin-left: 10px; + margin-top: 10px; + margin-block: -2px; +} + +.mat-switch-align { + margin-top: 25px; + margin-left: -10px; +} + .material-switch>label.switch:before { background: #20E6E5 !important; border-radius: 8px; @@ -1213,7 +1251,7 @@ input.form-control.pickr-color { } #nj_subtitle_color, #nj_title_color { - margin-bottom: 11px; + margin-bottom: 32px; } #nj_bg { @@ -1298,7 +1336,7 @@ button#nj_labeltext_menu { color: #000000; border-radius: 5px; margin-top: 20px; - margin-left: 10px + margin-left: -50px } button#nj_labelformat_menu { @@ -1358,21 +1396,22 @@ button#nj_treescale_menu { border-radius: 5px } -button#nj_rootedge_menu { +button#nj_tippoint_menu { height: 34px; background: #20E6E5; color: #000000; - margin-left: 10px; - margin-top: 8px; + margin-top: 21px; border-radius: 5px } -button#nj_tippoint_menu { +button#nj_rootedge_menu { height: 34px; background: #20E6E5; color: #000000; - margin-top: 21px; - border-radius: 5px + margin-top: 16px; + border-radius: 5px; + margin-right: 10px; + margin-bottom: 23px; } button#nj_nodepoint_menu { @@ -1396,7 +1435,7 @@ button#nj_clade_menu { height: 34px; background: #20E6E5; color: #000000; - margin-top: 21px; + margin-top: 19px; border-radius: 5px } @@ -1445,14 +1484,9 @@ button#nj_tile_menu_5 { border-radius: 5px } -#nj_tippoint_color { +#nj_nodepoint_color, #nj_tippoint_color { margin-bottom: 10px; - margin-top: 10px; -} - -#nj_nodepoint_color { - margin-bottom: 10px; - margin-top: 10px; + margin-top: 6px; } #nj_treescale_show { @@ -1542,7 +1576,7 @@ button#nj_tile_menu_5 { } #nj_tiplab_color { - margin-bottom: 0px; + margin-bottom: 7px; margin-top: -7px; } @@ -1647,11 +1681,20 @@ button#nj_tile_menu_5 { top: -17px; } +.sel-tile-number { + margin-left: 14px; +} + +#nj_heatmap_width { + margin-top: 8px; +} + #nj_heatmap_offset { - margin-bottom: 10px; + margin-top: 4px; + margin-bottom: 3px; } -#nj_fruit_width, #nj_fruit_width_2, #nj_fruit_width_3, #nj_fruit_width_4, #nj_fruit_width_5 { +#nj_fruit_width, #nj_fruit_width2, #nj_fruit_width3, #nj_fruit_width4, #nj_fruit_width5 { margin-top: -5px; margin-bottom: -15px; } From ea72ffee64e69319952bcc411e7226bdd1d7146c Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Thu, 14 Mar 2024 19:23:13 +0100 Subject: [PATCH 17/26] Heatmap smartified for NJ --- App.R | 293 +++++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 237 insertions(+), 56 deletions(-) diff --git a/App.R b/App.R index b727393..390b320 100644 --- a/App.R +++ b/App.R @@ -2903,25 +2903,7 @@ ui <- dashboardPage( align = "center", uiOutput("nj_colnames_angle"), br(), - sliderInput( - "nj_colnames_x", - label = h5("Names X-Position", style = "color:white; margin-bottom: 0px"), - min = -10, - max = 10, - value = 0, - width = "150px", - ticks = FALSE - ), - br(), - sliderInput( - "nj_colnames_y", - label = h5("Names Y-Position", style = "color:white; margin-bottom: 0px"), - min = -10, - max = 10, - value = 0, - width = "150px", - ticks = FALSE - ) + uiOutput("nj_colnames_y") ) ) ) @@ -2934,15 +2916,7 @@ ui <- dashboardPage( ), column( width = 7, - sliderInput( - "nj_heatmap_width", - label = "", - min = 0.1, - max = 5, - value = 0.5, - width = "150px", - ticks = FALSE - ) + uiOutput("nj_heatmap_width") ) ), fluidRow( @@ -10095,12 +10069,157 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- + # Heatmap width + + output$nj_heatmap_width <- renderUI({ + if(!is.null(input$nj_heatmap_select)) { + length_input <- length(input$nj_heatmap_select) + if((!(input$nj_layout == "circular")) & (!(input$nj_layout == "inward"))) { + if(length_input < 3) { + width <- 0.1 + } else { + if (length_input >= 3 && length_input <= 50) { + width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 1.5 + } + } + } else { + if(length_input < 3) { + width <- 0.3 + } else if (length_input >= 3 && length_input <= 27) { + width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 3 + } + } + + sliderInput( + "nj_heatmap_width", + label = "", + min = 0.05, + max = 1.5, + value = width, + step = 0.05, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_heatmap_width", + label = "", + min = 0.05, + max = 1.5, + value = 0.1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + } + }) + + # Update value if new variables added + observeEvent(input$nj_heatmap_select, { + length_input <- length(input$nj_heatmap_select) + if((!(input$nj_layout == "circular")) & (!(input$nj_layout == "inward"))) { + if(length_input < 3) { + width <- 0.1 + } else { + if (length_input >= 3 && length_input <= 50) { + width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 1.5 + } + } + } else { + if(length_input < 3) { + width <- 0.3 + } else if (length_input >= 3 && length_input <= 27) { + width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 3 + } + } + updateSliderInput(session, "nj_heatmap_width", value = width) + }) + + # Update value if layout changed + observeEvent(input$nj_layout, { + length_input <- length(input$nj_heatmap_select) + if((!(input$nj_layout == "circular")) & (!(input$nj_layout == "inward"))) { + if(length_input < 3) { + width <- 0.1 + } else { + if (length_input >= 3 && length_input <= 50) { + width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 1.5 + } + } + } else { + if(length_input < 3) { + width <- 0.3 + } else if (length_input >= 3 && length_input <= 27) { + width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 3 + } + } + updateSliderInput(session, "nj_heatmap_width", value = width) + }) + + # Heatmap column titles position + observeEvent(input$nj_layout, { + if(!(input$nj_layout == "inward" | input$nj_layout == "circular")) { + updateSliderInput(session, "nj_colnames_y", value = -1) + } else { + updateSliderInput(session, "nj_colnames_y", value = 0) + } + }) + + output$nj_colnames_y <- renderUI({ + if(!is.null(sum(DB$data$Include))) { + if(input$nj_layout == "inward" | input$nj_layout == "circular") { + min <- 0 + val <- 0 + } else { + val <- -1 + if((sum(DB$data$Include) * -0.1) > -2) { + min <- -2 + } else { + min <- round(sum(DB$data$Include) * -0.1, 0) + } + } + sliderInput( + "nj_colnames_y", + label = h5("Names Y-Position", style = "color:white; margin-bottom: 0px"), + min = min, + max = sum(DB$data$Include), + value = val, + step = 1, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_colnames_y", + label = h5("Names Y-Position", style = "color:white; margin-bottom: 0px"), + min = -10, + max = 10, + value = 0, + step = 1, + width = "150px", + ticks = FALSE + ) + } + }) + # Heatmap column titles angle output$nj_colnames_angle <- renderUI({ if(!is.null(input$nj_layout)) { if(input$nj_layout == "circular" | input$nj_layout == "inward") { angle <- 90 - } else {angle <- 0} + } else {angle <- -90} sliderInput( "nj_colnames_angle", label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), @@ -10123,16 +10242,22 @@ server <- function(input, output, session) { } }) + # Change heatmap column titles angle and label align when switching layout observeEvent(input$nj_layout, { if(input$nj_layout == "circular" | input$nj_layout == "inward"){ angle <- 90 - } else {angle <- 0} + val <- TRUE + } else { + angle <- -90 + val <- FALSE + } + updateSwitchInput(session, "nj_align", value = val) updateSliderInput(session, "nj_colnames_angle", value = angle) }) # Tile number selector update each other observeEvent(input$nj_tile_num, { - updateSelectInput(session, "nj_colnames_angle", selected = input$nj_tile_num) + updateSelectInput(session, "nj_tile_number", selected = input$nj_tile_num) }) observeEvent(input$nj_tile_number, { @@ -12248,11 +12373,10 @@ server <- function(input, output, session) { tree <- gheatmap(tree, data = select(Vis$meta_nj, input$nj_heatmap_select), offset = nj_heatmap_offset(), - width = input$nj_heatmap_width, + width = nj_heatmap_width(), legend_title = input$nj_heatmap_title, colnames_angle = -nj_colnames_angle(), - colnames_offset_x = input$nj_colnames_x, - colnames_offset_y = input$nj_colnames_y) + + colnames_offset_y = nj_colnames_y()) + heatmap_scale() } @@ -12268,6 +12392,45 @@ server <- function(input, output, session) { } }) + # Heatmap width + nj_heatmap_width <- reactive({ + if(!is.null(input$nj_heatmap_width)) { + input$nj_heatmap_width + } else { + length_input <- length(input$nj_heatmap_select) + if((!(input$nj_layout == "circular")) & (!(input$nj_layout == "inward"))) { + if(length_input < 3) { + 0.1 + } else { + if (length_input >= 3 && length_input <= 50) { + min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + 1.5 + } + } + } else { + if(length_input < 3) { + 0.3 + } else if (length_input >= 3 && length_input <= 27) { + min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + 3 + } + } + } + }) + + # Heatmap column titles position + nj_colnames_y <- reactive({ + if(!is.null(input$nj_colnames_y)) { + input$nj_colnames_y + } else { + if(input$nj_layout == "inward" | input$nj_layout == "circular") { + 0 + } else {-1} + } + }) + # Heatmap column titles angle nj_colnames_angle <- reactive({ if(!is.null(input$nj_colnames_angle)) { @@ -12276,8 +12439,8 @@ server <- function(input, output, session) { if(!is.null(input$nj_layout)) { if(input$nj_layout == "inward" | input$nj_layout == "circular") { 90 - } else {0} - } else {0} + } else {-90} + } else {-90} } }) @@ -12293,50 +12456,68 @@ server <- function(input, output, session) { midpoint <- median(DB$meta_true[[input$nj_heatmap_select]], na.rm = TRUE) } scale_fill_gradient2(low = brewer.pal(3, input$nj_heatmap_scale)[1], - mid = brewer.pal(3, input$nj_heatmap_scale)[2], - high = brewer.pal(3, input$nj_heatmap_scale)[3], - midpoint = midpoint) + mid = brewer.pal(3, input$nj_heatmap_scale)[2], + high = brewer.pal(3, input$nj_heatmap_scale)[3], + midpoint = midpoint, + name = input$nj_heatmap_title) } else { if(input$nj_heatmap_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { if(class(unlist(DB$meta[input$nj_heatmap_select])) == "numeric") { if(input$nj_heatmap_scale == "magma") { - scale_fill_viridis(option = "A") + scale_fill_viridis(option = "A", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "inferno") { - scale_fill_viridis(option = "B") + scale_fill_viridis(option = "B", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "plasma") { - scale_fill_viridis(option = "C") + scale_fill_viridis(option = "C", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "viridis") { - scale_fill_viridis(option = "D") + scale_fill_viridis(option = "D", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "cividis") { - scale_fill_viridis(option = "E") + scale_fill_viridis(option = "E", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "rocket") { - scale_fill_viridis(option = "F") + scale_fill_viridis(option = "F", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "mako") { - scale_fill_viridis(option = "G") + scale_fill_viridis(option = "G", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "turbo") { - scale_fill_viridis(option = "H") + scale_fill_viridis(option = "H", + name = input$nj_heatmap_title) } } else { if(input$nj_heatmap_scale == "magma") { - scale_fill_viridis(discrete = TRUE, option = "A") + scale_fill_viridis(discrete = TRUE, option = "A", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "inferno") { - scale_fill_viridis(discrete = TRUE, option = "B") + scale_fill_viridis(discrete = TRUE, option = "B", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "plasma") { - scale_fill_viridis(discrete = TRUE, option = "C") + scale_fill_viridis(discrete = TRUE, option = "C", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "viridis") { - scale_fill_viridis(discrete = TRUE, option = "D") + scale_fill_viridis(discrete = TRUE, option = "D", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "cividis") { - scale_fill_viridis(discrete = TRUE, option = "E") + scale_fill_viridis(discrete = TRUE, option = "E", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "rocket") { - scale_fill_viridis(discrete = TRUE, option = "F") + scale_fill_viridis(discrete = TRUE, option = "F", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "mako") { - scale_fill_viridis(discrete = TRUE, option = "G") + scale_fill_viridis(discrete = TRUE, option = "G", + name = input$nj_heatmap_title) } else if(input$nj_heatmap_scale == "turbo") { - scale_fill_viridis(discrete = TRUE, option = "H") + scale_fill_viridis(discrete = TRUE, option = "H", + name = input$nj_heatmap_title) } } } else { - scale_fill_brewer(palette = input$nj_heatmap_scale) + scale_fill_brewer(palette = input$nj_heatmap_scale, + name = input$nj_heatmap_title) } } } From 5ed30dfc0a30f988be506d7bee972e9fe4b75845 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Thu, 14 Mar 2024 20:14:46 +0100 Subject: [PATCH 18/26] Changes in tile visualization automation functionality --- App.R | 386 ++++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 280 insertions(+), 106 deletions(-) diff --git a/App.R b/App.R index 390b320..39bdc62 100644 --- a/App.R +++ b/App.R @@ -2146,7 +2146,7 @@ ui <- dashboardPage( class = "mat-switch-geom", materialSwitch( "nj_geom", - h5(p("Show"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + h5(p("Panels"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), value = FALSE, right = TRUE ) @@ -2695,9 +2695,9 @@ ui <- dashboardPage( sliderInput( "nj_fruit_offset_circ", label = "", - min = -3, - max = 3, - step= 0.05, + min = -0.1, + max = 0.1, + step= 0.01, value = 0, width = "150px", ticks = FALSE @@ -2723,7 +2723,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 49px") + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 54px") ), column( width = 7, @@ -2731,10 +2731,10 @@ ui <- dashboardPage( sliderInput( "nj_fruit_offset_circ_2", label = "", - min = -3, - max = 3, - step= 0.05, - value = 0, + min = -0.1, + max = 0.1, + step= 0.01, + value = 0.05, width = "150px", ticks = FALSE ), @@ -2759,7 +2759,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 49px") + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 54px") ), column( width = 7, @@ -2767,10 +2767,10 @@ ui <- dashboardPage( sliderInput( "nj_fruit_offset_circ_3", label = "", - min = -3, - max = 3, - step= 0.05, - value = 0, + min = -0.1, + max = 0.1, + step= 0.01, + value = 0.05, width = "150px", ticks = FALSE ), @@ -2795,7 +2795,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 49px") + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 54px") ), column( width = 7, @@ -2803,10 +2803,10 @@ ui <- dashboardPage( sliderInput( "nj_fruit_offset_circ_4", label = "", - min = -3, - max = 3, - value = 0, - step= 0.05, + min = -0.1, + max = 0.1, + step= 0.01, + value = 0.05, width = "150px", ticks = FALSE ), @@ -2831,7 +2831,7 @@ ui <- dashboardPage( fluidRow( column( width = 5, - h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 49px") + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 54px") ), column( width = 7, @@ -2839,10 +2839,10 @@ ui <- dashboardPage( sliderInput( "nj_fruit_offset_circ_5", label = "", - min = -3, - max = 3, - value = 0, - step= 0.05, + min = -0.1, + max = 0.1, + step= 0.01, + value = 0.05, width = "150px", ticks = FALSE ), @@ -11406,8 +11406,8 @@ server <- function(input, output, session) { sliderInput( "nj_heatmap_offset", label = "", - min = -ceiling(Vis$nj_max_x), - max = ceiling(Vis$nj_max_x), + min = 0, + max = round(ceiling(Vis$nj_max_x)*1.5, 0), step = 1, value = 0, width = "150px", @@ -11417,7 +11417,7 @@ server <- function(input, output, session) { sliderInput( "nj_heatmap_offset", label = "", - min = -10, + min = 0, max = 10, step = 1, value = 0, @@ -11744,17 +11744,17 @@ server <- function(input, output, session) { output$nj_fruit_width <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { - if(round(ceiling(Vis$nj_min_x), 0) < 1) { - min <- 1 + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + width <- 1 } else { - min <- round(ceiling(Vis$nj_min_x), 0) + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) } sliderInput( "nj_fruit_width_circ", label = "", - min = min, + min = 1, max = round(ceiling(Vis$nj_max_x) * 0.5, 0), - value = ceiling(Vis$nj_max_x * 0.08), + value = width, width = "150px", ticks = FALSE ) @@ -11773,17 +11773,17 @@ server <- function(input, output, session) { output$nj_fruit_width2 <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { - if(round(ceiling(Vis$nj_min_x), 0) < 1) { - min <- 1 + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + width <- 1 } else { - min <- round(ceiling(Vis$nj_min_x), 0) + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) } sliderInput( "nj_fruit_width_circ_2", label = "", - min = min, + min = 1, max = round(ceiling(Vis$nj_max_x) * 0.5, 0), - value = ceiling(Vis$nj_max_x * 0.08), + value = width, width = "150px", ticks = FALSE ) @@ -11802,17 +11802,17 @@ server <- function(input, output, session) { output$nj_fruit_width3 <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { - if(round(ceiling(Vis$nj_min_x), 0) < 1) { - min <- 1 + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + width <- 1 } else { - min <- round(ceiling(Vis$nj_min_x), 0) + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) } sliderInput( "nj_fruit_width_circ_3", label = "", - min = min, + min = 1, max = round(ceiling(Vis$nj_max_x) * 0.5, 0), - value = ceiling(Vis$nj_max_x * 0.08), + value = width, width = "150px", ticks = FALSE ) @@ -11831,17 +11831,17 @@ server <- function(input, output, session) { output$nj_fruit_width4 <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { - if(round(ceiling(Vis$nj_min_x), 0) < 1) { - min <- 1 + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + width <- 1 } else { - min <- round(ceiling(Vis$nj_min_x), 0) + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) } sliderInput( "nj_fruit_width_circ_4", label = "", - min = min, + min = 1, max = round(ceiling(Vis$nj_max_x) * 0.5, 0), - value = ceiling(Vis$nj_max_x * 0.08), + value = width, width = "150px", ticks = FALSE ) @@ -11860,17 +11860,17 @@ server <- function(input, output, session) { output$nj_fruit_width5 <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { - if(round(ceiling(Vis$nj_min_x), 0) < 1) { - min <- 1 + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + width <- 1 } else { - min <- round(ceiling(Vis$nj_min_x), 0) + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) } sliderInput( "nj_fruit_width_circ_5", label = "", - min = min, + min = 1, max = round(ceiling(Vis$nj_max_x) * 0.5, 0), - value = ceiling(Vis$nj_max_x * 0.08), + value = width, width = "150px", ticks = FALSE ) @@ -13038,7 +13038,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill= !!sym(input$nj_fruit_variable)), offset = input$nj_fruit_offset_circ, - pwidth = input$nj_fruit_width_circ, + width = input$nj_fruit_width_circ, alpha = input$nj_fruit_alpha ) } else { @@ -13046,12 +13046,41 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill= !!sym(input$nj_fruit_variable)), offset = input$nj_fruit_offset_circ, - pwidth = input$nj_fruit_width_circ, + width = input$nj_fruit_width_circ, alpha = input$nj_fruit_alpha ) } } else {NULL} - } else {NULL} + } else { + if(input$nj_tiles_show_1 == TRUE) { + if(!is.null(Vis$nj_max_x)) { + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + width <- 1 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } + } else { + width <- 2 + } + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = 0, + width = width, + alpha = 1 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = 0, + width = width, + alpha = 1 + ) + } + } else {NULL} + } }) # Geom Fruit @@ -13068,7 +13097,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$nj_fruit_variable_2)), offset = input$nj_fruit_offset_circ_2, - pwidth = input$nj_fruit_width_circ_2, + width = input$nj_fruit_width_circ_2, alpha = input$nj_fruit_alpha_2 ) } else { @@ -13076,12 +13105,41 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$nj_fruit_variable_2)), offset = input$nj_fruit_offset_circ_2, - pwidth = input$nj_fruit_width_circ_2, + width = input$nj_fruit_width_circ_2, alpha = input$nj_fruit_alpha_2 ) } } else {NULL} - } else {NULL} + } else { + if(input$nj_tiles_show_2 == TRUE) { + if(!is.null(Vis$nj_max_x)) { + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + width <- 1 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } + } else { + width <- 2 + } + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = 0.05, + width = width, + alpha = 1 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = 0.05, + width = width, + alpha = 1 + ) + } + } else {NULL} + } }) nj_fruit3 <- reactive({ @@ -13097,7 +13155,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$nj_fruit_variable_3)), offset = input$nj_fruit_offset_circ_3, - pwidth = input$nj_fruit_width_circ_3, + width = input$nj_fruit_width_circ_3, alpha = input$nj_fruit_alpha_3 ) } else { @@ -13105,12 +13163,41 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$nj_fruit_variable_3)), offset = input$nj_fruit_offset_circ_3, - pwidth = input$nj_fruit_width_circ_3, + width = input$nj_fruit_width_circ_3, alpha = input$nj_fruit_alpha_3 ) } } else {NULL} - } else {NULL} + } else { + if(input$nj_tiles_show_3 == TRUE) { + if(!is.null(Vis$nj_max_x)) { + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + width <- 1 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } + } else { + width <- 2 + } + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = 0.05, + width = width, + alpha = 1 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = 0.05, + width = width, + alpha = 1 + ) + } + } else {NULL} + } }) nj_fruit4 <- reactive({ @@ -13126,7 +13213,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$nj_fruit_variable_4)), offset = input$nj_fruit_offset_circ_4, - pwidth = input$nj_fruit_width_circ_4, + width = input$nj_fruit_width_circ_4, alpha = input$nj_fruit_alpha_4 ) } else { @@ -13134,11 +13221,40 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$nj_fruit_variable_4)), offset = input$nj_fruit_offset_circ_4, - pwidth = input$nj_fruit_width_circ_4, + width = input$nj_fruit_width_circ_4, alpha = input$nj_fruit_alpha_4 ) } - } else {NULL} + } else { + if(input$nj_tiles_show_4 == TRUE) { + if(!is.null(Vis$nj_max_x)) { + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + width <- 1 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } + } else { + width <- 2 + } + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = 0.05, + width = width, + alpha = 1 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = 0.05, + width = width, + alpha = 1 + ) + } + } else {NULL} + } } }) @@ -13155,7 +13271,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$nj_fruit_variable_5)), offset = input$nj_fruit_offset_circ_5, - pwidth = input$nj_fruit_width_circ_5, + width = input$nj_fruit_width_circ_5, alpha = input$nj_fruit_alpha_5 ) } else { @@ -13163,12 +13279,41 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$nj_fruit_variable_5)), offset = input$nj_fruit_offset_circ_5, - pwidth = input$nj_fruit_width_circ_5, + width = input$nj_fruit_width_circ_5, alpha = input$nj_fruit_alpha_5 ) } } else {NULL} - } else {NULL} + } else { + if(input$nj_tiles_show_5 == TRUE) { + if(!is.null(Vis$nj_max_x)) { + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + width <- 1 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } + } else { + width <- 2 + } + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = 0.05, + width = width, + alpha = 1 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$nj_fruit_variable)), + offset = 0.05, + width = width, + alpha = 1 + ) + } + } else {NULL} + } }) # Xlim @@ -13368,36 +13513,65 @@ server <- function(input, output, session) { } } else { if(input$nj_mapping_show == TRUE) { - geom_tiplab( - mapping_tiplab(), - geom = nj_geom(), - angle = input$nj_tiplab_angle, - size = nj_tiplab_size(), - alpha = input$nj_tiplab_alpha, - fontface = input$nj_tiplab_fontface, - align = as.logical(input$nj_align), - nudge_x = input$nj_tiplab_nudge_x, - check.overlap = input$nj_tiplab_overlap, - label.padding = unit(nj_tiplab_padding(), "lines"), - label.r = unit(input$nj_tiplab_labelradius, "lines"), - fill = input$nj_tiplab_fill - ) + if(input$nj_geom == TRUE) { + geom_tiplab( + mapping_tiplab(), + geom = nj_geom(), + angle = input$nj_tiplab_angle, + size = nj_tiplab_size(), + alpha = input$nj_tiplab_alpha, + fontface = input$nj_tiplab_fontface, + align = as.logical(input$nj_align), + nudge_x = input$nj_tiplab_nudge_x, + check.overlap = input$nj_tiplab_overlap, + label.padding = unit(nj_tiplab_padding(), "lines"), + label.r = unit(input$nj_tiplab_labelradius, "lines"), + fill = input$nj_tiplab_fill + ) + } else { + geom_tiplab( + mapping_tiplab(), + geom = nj_geom(), + angle = input$nj_tiplab_angle, + size = nj_tiplab_size(), + alpha = input$nj_tiplab_alpha, + fontface = input$nj_tiplab_fontface, + align = as.logical(input$nj_align), + nudge_x = input$nj_tiplab_nudge_x, + check.overlap = input$nj_tiplab_overlap + ) + } } else { - geom_tiplab( - mapping_tiplab(), - geom = nj_geom(), - color = input$nj_tiplab_color, - angle = input$nj_tiplab_angle, - size = nj_tiplab_size(), - alpha = input$nj_tiplab_alpha, - fontface = input$nj_tiplab_fontface, - align = as.logical(input$nj_align), - nudge_x = input$nj_tiplab_nudge_x, - check.overlap = input$nj_tiplab_overlap, - label.padding = unit(nj_tiplab_padding(), "lines"), - label.r = unit(input$nj_tiplab_labelradius, "lines"), - fill = input$nj_tiplab_fill - ) + if(input$nj_geom == TRUE) { + geom_tiplab( + mapping_tiplab(), + geom = nj_geom(), + color = input$nj_tiplab_color, + angle = input$nj_tiplab_angle, + size = nj_tiplab_size(), + alpha = input$nj_tiplab_alpha, + fontface = input$nj_tiplab_fontface, + align = as.logical(input$nj_align), + nudge_x = input$nj_tiplab_nudge_x, + check.overlap = input$nj_tiplab_overlap, + label.padding = unit(nj_tiplab_padding(), "lines"), + label.r = unit(input$nj_tiplab_labelradius, "lines"), + fill = input$nj_tiplab_fill + ) + } else { + geom_tiplab( + mapping_tiplab(), + geom = nj_geom(), + color = input$nj_tiplab_color, + angle = input$nj_tiplab_angle, + size = nj_tiplab_size(), + alpha = input$nj_tiplab_alpha, + fontface = input$nj_tiplab_fontface, + align = as.logical(input$nj_align), + nudge_x = input$nj_tiplab_nudge_x, + check.overlap = input$nj_tiplab_overlap + ) + } } } } else {NULL} @@ -13718,7 +13892,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$upgma_fruit_variable)), offset = input$upgma_fruit_offset_circ, - pwidth = input$upgma_fruit_width_circ, + width = input$upgma_fruit_width_circ, alpha = input$upgma_fruit_alpha ) } else { @@ -13726,7 +13900,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$upgma_fruit_variable)), offset = input$upgma_fruit_offset_circ, - pwidth = input$upgma_fruit_width_circ, + width = input$upgma_fruit_width_circ, alpha = input$upgma_fruit_alpha ) } @@ -13741,7 +13915,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$upgma_fruit_variable_2)), offset = input$upgma_fruit_offset_circ_2, - pwidth = input$upgma_fruit_width_circ_2, + width = input$upgma_fruit_width_circ_2, alpha = input$upgma_fruit_alpha_2 ) } else { @@ -13749,7 +13923,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$upgma_fruit_variable_2)), offset = input$upgma_fruit_offset_circ_2, - pwidth = input$upgma_fruit_width_circ_2, + width = input$upgma_fruit_width_circ_2, alpha = input$upgma_fruit_alpha_2 ) } @@ -13763,7 +13937,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$upgma_fruit_variable_3)), offset = input$upgma_fruit_offset_circ_3, - pwidth = input$upgma_fruit_width_circ_3, + width = input$upgma_fruit_width_circ_3, alpha = input$upgma_fruit_alpha_3 ) } else { @@ -13771,7 +13945,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$upgma_fruit_variable_3)), offset = input$upgma_fruit_offset_circ_3, - pwidth = input$upgma_fruit_width_circ_3, + width = input$upgma_fruit_width_circ_3, alpha = input$upgma_fruit_alpha_3 ) } @@ -13787,7 +13961,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$upgma_fruit_variable_4)), offset = input$upgma_fruit_offset_circ_4, - pwidth = input$upgma_fruit_width_circ_4, + width = input$upgma_fruit_width_circ_4, alpha = input$upgma_fruit_alpha_4 ) } else { @@ -13795,7 +13969,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$upgma_fruit_variable_4)), offset = input$upgma_fruit_offset_circ_4, - pwidth = input$upgma_fruit_width_circ_4, + width = input$upgma_fruit_width_circ_4, alpha = input$upgma_fruit_alpha_4 ) } @@ -13810,7 +13984,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$upgma_fruit_variable_5)), offset = input$upgma_fruit_offset_circ_5, - pwidth = input$upgma_fruit_width_circ_5, + width = input$upgma_fruit_width_circ_5, alpha = input$upgma_fruit_alpha_5 ) } else { @@ -13818,7 +13992,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill = !!sym(input$upgma_fruit_variable_5)), offset = input$upgma_fruit_offset_circ_5, - pwidth = input$upgma_fruit_width_circ_5, + width = input$upgma_fruit_width_circ_5, alpha = input$upgma_fruit_alpha_5 ) } From d3dfe60fc353c34d013b7447cdcbdf5c41d04562 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Fri, 15 Mar 2024 10:46:54 +0100 Subject: [PATCH 19/26] Adjusted automatic tiling for nj trees --- App.R | 627 ++++++++++++++++++++++++++++++++++++-------------- www/mycss.css | 2 +- 2 files changed, 454 insertions(+), 175 deletions(-) diff --git a/App.R b/App.R index 39bdc62..d3e3f80 100644 --- a/App.R +++ b/App.R @@ -1580,10 +1580,35 @@ ui <- dashboardPage( br(), selectInput( "nj_rootedge_line", - label = h5("Linetype", style = "color:white"), + label = h5("Rootedge Line", style = "color:white"), choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), selected = c(Dotted = "solid"), width = "100px" + ), + br(), + conditionalPanel( + "input.nj_layout=='circular'", + sliderInput( + "nj_xlim", + label = h5("Adjust Circular", style = "color:white"), + min = -50, + max = 0, + value = -10, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.nj_layout=='inward'", + sliderInput( + "nj_inward_xlim", + label = h5("Adjust Circular", style = "color:white"), + min = 30, + max = 120, + value = 50, + ticks = FALSE, + width = "150px", + ) ) ) ) @@ -1604,43 +1629,6 @@ ui <- dashboardPage( ) ) ) - ), - conditionalPanel( - "input.nj_layout=='circular' | input.nj_layout=='inward'", - fluidRow( - column( - width = 3, - h5(p("Adjust"), style = "color:white; position: relative; right: -15px; margin-top: 20px") - ), - column( - width = 8, - align = "right", - conditionalPanel( - "input.nj_layout=='circular'", - sliderInput( - "nj_xlim", - label = NULL, - min = -50, - max = 0, - value = -10, - width = "150px", - ticks = FALSE - ) - ), - conditionalPanel( - "input.nj_layout=='inward'", - sliderInput( - "nj_inward_xlim", - label = NULL, - min = 30, - max = 120, - value = 50, - ticks = FALSE, - width = "150px", - ) - ) - ) - ) ) ) ) @@ -2692,16 +2680,7 @@ ui <- dashboardPage( column( width = 7, align = "center", - sliderInput( - "nj_fruit_offset_circ", - label = "", - min = -0.1, - max = 0.1, - step= 0.01, - value = 0, - width = "150px", - ticks = FALSE - ), + uiOutput("nj_fruit_offset_circ"), br() ) ) @@ -2728,16 +2707,7 @@ ui <- dashboardPage( column( width = 7, align = "center", - sliderInput( - "nj_fruit_offset_circ_2", - label = "", - min = -0.1, - max = 0.1, - step= 0.01, - value = 0.05, - width = "150px", - ticks = FALSE - ), + uiOutput("nj_fruit_offset_circ_2"), br() ) ) @@ -2764,16 +2734,7 @@ ui <- dashboardPage( column( width = 7, align = "center", - sliderInput( - "nj_fruit_offset_circ_3", - label = "", - min = -0.1, - max = 0.1, - step= 0.01, - value = 0.05, - width = "150px", - ticks = FALSE - ), + uiOutput("nj_fruit_offset_circ_3"), br() ) ) @@ -2800,16 +2761,7 @@ ui <- dashboardPage( column( width = 7, align = "center", - sliderInput( - "nj_fruit_offset_circ_4", - label = "", - min = -0.1, - max = 0.1, - step= 0.01, - value = 0.05, - width = "150px", - ticks = FALSE - ), + uiOutput("nj_fruit_offset_circ_4"), br() ) ) @@ -2836,16 +2788,7 @@ ui <- dashboardPage( column( width = 7, align = "center", - sliderInput( - "nj_fruit_offset_circ_5", - label = "", - min = -0.1, - max = 0.1, - step= 0.01, - value = 0.05, - width = "150px", - ticks = FALSE - ), + uiOutput("nj_fruit_offset_circ_5"), br() ) ) @@ -10069,8 +10012,219 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- - # Heatmap width + # Tiles offset + output$nj_fruit_offset_circ <- renderUI({ + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "nj_fruit_offset_circ", + label = "", + min = min, + max = max, + step= step, + value = 0, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_offset_circ", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$nj_fruit_offset_circ_2 <- renderUI({ + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "nj_fruit_offset_circ_2", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_offset_circ_2", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$nj_fruit_offset_circ_3 <- renderUI({ + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "nj_fruit_offset_circ_3", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_offset_circ_3", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$nj_fruit_offset_circ_4 <- renderUI({ + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "nj_fruit_offset_circ_4", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_offset_circ_4", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$nj_fruit_offset_circ_5 <- renderUI({ + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "nj_fruit_offset_circ_5", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_offset_circ_5", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + # For Layout change update tiles offset position + observeEvent(input$nj_layout, { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } else { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } + + updateSliderInput(session, "nj_fruit_offset_circ", min = min, step = step, max = max) + updateSliderInput(session, "nj_fruit_offset_circ_2", min = min, step = step, max = max, value = offset) + updateSliderInput(session, "nj_fruit_offset_circ_3", min = min, step = step, max = max, value = offset) + updateSliderInput(session, "nj_fruit_offset_circ_4", min = min, step = step, max = max, value = offset) + updateSliderInput(session, "nj_fruit_offset_circ_5", min = min, step = step, max = max, value = offset) + }) + # Heatmap width output$nj_heatmap_width <- renderUI({ if(!is.null(input$nj_heatmap_select)) { length_input <- length(input$nj_heatmap_select) @@ -11151,7 +11305,7 @@ server <- function(input, output, session) { max <- round(ceiling(Vis$nj_max_x) * 0.2, 0) sliderInput( "nj_rootedge_length", - label = h5("Length", style = "color:white; margin-bottom: 0px"), + label = h5("Rootedge Length", style = "color:white; margin-bottom: 0px"), min = min, max = max, value = round(ceiling(Vis$nj_max_x) * 0.05, 0), @@ -11745,9 +11899,17 @@ server <- function(input, output, session) { output$nj_fruit_width <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { - width <- 1 + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- 3 + } else { + width <- 1 + } } else { - width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } } sliderInput( "nj_fruit_width_circ", @@ -11759,24 +11921,44 @@ server <- function(input, output, session) { ticks = FALSE ) } else { - sliderInput( - "nj_fruit_width_circ", - label = "", - min = 1, - max = 10, - value = 5, - width = "150px", - ticks = FALSE - ) + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + sliderInput( + "nj_fruit_width_circ", + label = "", + min = 1, + max = 10, + value = 3, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_width_circ", + label = "", + min = 1, + max = 10, + value = 1, + width = "150px", + ticks = FALSE + ) + } } }) output$nj_fruit_width2 <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { - width <- 1 + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- 3 + } else { + width <- 1 + } } else { - width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } } sliderInput( "nj_fruit_width_circ_2", @@ -11788,24 +11970,44 @@ server <- function(input, output, session) { ticks = FALSE ) } else { - sliderInput( - "nj_fruit_width_circ_2", - label = "", - min = 1, - max = 10, - value = 5, - width = "150px", - ticks = FALSE - ) + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + sliderInput( + "nj_fruit_width_circ_2", + label = "", + min = 1, + max = 10, + value = 3, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_width_circ_2", + label = "", + min = 1, + max = 10, + value = 1, + width = "150px", + ticks = FALSE + ) + } } }) output$nj_fruit_width3 <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { - width <- 1 + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- 3 + } else { + width <- 1 + } } else { - width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } } sliderInput( "nj_fruit_width_circ_3", @@ -11817,24 +12019,44 @@ server <- function(input, output, session) { ticks = FALSE ) } else { - sliderInput( - "nj_fruit_width_circ_3", - label = "", - min = 1, - max = 10, - value = 5, - width = "150px", - ticks = FALSE - ) + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + sliderInput( + "nj_fruit_width_circ_3", + label = "", + min = 1, + max = 10, + value = 3, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_width_circ_3", + label = "", + min = 1, + max = 10, + value = 1, + width = "150px", + ticks = FALSE + ) + } } }) output$nj_fruit_width4 <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { - width <- 1 + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- 3 + } else { + width <- 1 + } } else { - width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } } sliderInput( "nj_fruit_width_circ_4", @@ -11844,26 +12066,46 @@ server <- function(input, output, session) { value = width, width = "150px", ticks = FALSE - ) - } else { - sliderInput( - "nj_fruit_width_circ_4", - label = "", - min = 1, - max = 10, - value = 5, - width = "150px", - ticks = FALSE ) + } else { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + sliderInput( + "nj_fruit_width_circ_4", + label = "", + min = 1, + max = 10, + value = 3, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_width_circ_4", + label = "", + min = 1, + max = 10, + value = 1, + width = "150px", + ticks = FALSE + ) + } } }) output$nj_fruit_width5 <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { - width <- 1 + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- 3 + } else { + width <- 1 + } } else { - width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } } sliderInput( "nj_fruit_width_circ_5", @@ -11875,15 +12117,52 @@ server <- function(input, output, session) { ticks = FALSE ) } else { - sliderInput( - "nj_fruit_width_circ_5", - label = "", - min = 1, - max = 10, - value = 5, - width = "150px", - ticks = FALSE - ) + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + sliderInput( + "nj_fruit_width_circ_5", + label = "", + min = 1, + max = 10, + value = 3, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_width_circ_5", + label = "", + min = 1, + max = 10, + value = 1, + width = "150px", + ticks = FALSE + ) + } + } + }) + + # For Layout change update tiles + observeEvent(input$nj_layout, { + if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { + if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- 3 + } else { + width <- 1 + } + } else { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$nj_max_x) * 0.033, 0) + } + } + + updateSliderInput(session, "nj_fruit_width_circ", value = width) + updateSliderInput(session, "nj_fruit_width_circ_2", value = width) + updateSliderInput(session, "nj_fruit_width_circ_3", value = width) + updateSliderInput(session, "nj_fruit_width_circ_4", value = width) + updateSliderInput(session, "nj_fruit_width_circ_5", value = width) } }) @@ -12770,9 +13049,9 @@ server <- function(input, output, session) { if(input$nj_tiles_mapping_div_mid_2 == "Zero") { midpoint <- 0 } else if(input$nj_tiles_mapping_div_mid_2 == "Mean") { - midpoint <- mean(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) + midpoint <- mean(DB$meta_true[[input$nj_fruit_variable_2]], na.rm = TRUE) } else { - midpoint <- median(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) + midpoint <- median(DB$meta_true[[input$nj_fruit_variable_2]], na.rm = TRUE) } scale_fill_gradient2(low = brewer.pal(3, input$nj_tiles_scale_2)[1], mid = brewer.pal(3, input$nj_tiles_scale_2)[2], @@ -12780,7 +13059,7 @@ server <- function(input, output, session) { midpoint = midpoint) } else { if(input$nj_tiles_scale_2 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { - if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + if(class(unlist(DB$meta[input$nj_fruit_variable_2])) == "numeric") { if(input$nj_tiles_scale_2 == "magma") { scale_fill_viridis(option = "A") } else if(input$nj_tiles_scale_2 == "inferno") { @@ -12834,9 +13113,9 @@ server <- function(input, output, session) { if(input$nj_tiles_mapping_div_mid_3 == "Zero") { midpoint <- 0 } else if(input$nj_tiles_mapping_div_mid_3 == "Mean") { - midpoint <- mean(DB$meta_true[[input$nj_fruit_variable_1]], na.rm = TRUE) + midpoint <- mean(DB$meta_true[[input$nj_fruit_variable_3]], na.rm = TRUE) } else { - midpoint <- median(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) + midpoint <- median(DB$meta_true[[input$nj_fruit_variable_3]], na.rm = TRUE) } scale_fill_gradient3(low = brewer.pal(3, input$nj_tiles_scale_3)[1], mid = brewer.pal(3, input$nj_tiles_scale_3)[2], @@ -12844,7 +13123,7 @@ server <- function(input, output, session) { midpoint = midpoint) } else { if(input$nj_tiles_scale_3 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { - if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + if(class(unlist(DB$meta[input$nj_fruit_variable_3])) == "numeric") { if(input$nj_tiles_scale_3 == "magma") { scale_fill_viridis(option = "A") } else if(input$nj_tiles_scale_3 == "inferno") { @@ -12898,9 +13177,9 @@ server <- function(input, output, session) { if(input$nj_tiles_mapping_div_mid_4 == "Zero") { midpoint <- 0 } else if(input$nj_tiles_mapping_div_mid_4 == "Mean") { - midpoint <- mean(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) + midpoint <- mean(DB$meta_true[[input$nj_fruit_variable_4]], na.rm = TRUE) } else { - midpoint <- median(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) + midpoint <- median(DB$meta_true[[input$nj_fruit_variable_4]], na.rm = TRUE) } scale_fill_gradient4(low = brewer.pal(3, input$nj_tiles_scale_4)[1], mid = brewer.pal(3, input$nj_tiles_scale_4)[2], @@ -12962,9 +13241,9 @@ server <- function(input, output, session) { if(input$nj_tiles_mapping_div_mid_5 == "Zero") { midpoint <- 0 } else if(input$nj_tiles_mapping_div_mid_5 == "Mean") { - midpoint <- mean(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) + midpoint <- mean(DB$meta_true[[input$nj_fruit_variable_5]], na.rm = TRUE) } else { - midpoint <- median(DB$meta_true[[input$nj_fruit_variable]], na.rm = TRUE) + midpoint <- median(DB$meta_true[[input$nj_fruit_variable_5]], na.rm = TRUE) } scale_fill_gradient5(low = brewer.pal(3, input$nj_tiles_scale_5)[1], mid = brewer.pal(3, input$nj_tiles_scale_5)[2], @@ -12972,7 +13251,7 @@ server <- function(input, output, session) { midpoint = midpoint) } else { if(input$nj_tiles_scale_5 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { - if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + if(class(unlist(DB$meta[input$nj_fruit_variable_5])) == "numeric") { if(input$nj_tiles_scale_5 == "magma") { scale_fill_viridis(option = "A") } else if(input$nj_tiles_scale_5 == "inferno") { @@ -13067,7 +13346,7 @@ server <- function(input, output, session) { geom = geom_tile, mapping = aes(fill= !!sym(input$nj_fruit_variable)), offset = 0, - width = width, + width = width * 3, alpha = 1 ) } else { @@ -13124,15 +13403,15 @@ server <- function(input, output, session) { if(input$nj_layout == "circular" | input$nj_layout == "inward") { geom_fruit( geom = geom_tile, - mapping = aes(fill= !!sym(input$nj_fruit_variable)), - offset = 0.05, - width = width, + mapping = aes(fill= !!sym(input$nj_fruit_variable_2)), + offset = 0.15, + width = width * 3, alpha = 1 ) } else { geom_fruit( geom = geom_tile, - mapping = aes(fill= !!sym(input$nj_fruit_variable)), + mapping = aes(fill= !!sym(input$nj_fruit_variable_2)), offset = 0.05, width = width, alpha = 1 @@ -13182,15 +13461,15 @@ server <- function(input, output, session) { if(input$nj_layout == "circular" | input$nj_layout == "inward") { geom_fruit( geom = geom_tile, - mapping = aes(fill= !!sym(input$nj_fruit_variable)), - offset = 0.05, - width = width, + mapping = aes(fill= !!sym(input$nj_fruit_variable_3)), + offset = 0.15, + width = width * 3, alpha = 1 ) } else { geom_fruit( geom = geom_tile, - mapping = aes(fill= !!sym(input$nj_fruit_variable)), + mapping = aes(fill= !!sym(input$nj_fruit_variable_3)), offset = 0.05, width = width, alpha = 1 @@ -13239,15 +13518,15 @@ server <- function(input, output, session) { if(input$nj_layout == "circular" | input$nj_layout == "inward") { geom_fruit( geom = geom_tile, - mapping = aes(fill= !!sym(input$nj_fruit_variable)), - offset = 0.05, - width = width, + mapping = aes(fill= !!sym(input$nj_fruit_variable_4)), + offset = 0.15, + width = width * 3, alpha = 1 ) } else { geom_fruit( geom = geom_tile, - mapping = aes(fill= !!sym(input$nj_fruit_variable)), + mapping = aes(fill= !!sym(input$nj_fruit_variable_4)), offset = 0.05, width = width, alpha = 1 @@ -13298,15 +13577,15 @@ server <- function(input, output, session) { if(input$nj_layout == "circular" | input$nj_layout == "inward") { geom_fruit( geom = geom_tile, - mapping = aes(fill= !!sym(input$nj_fruit_variable)), - offset = 0.05, - width = width, + mapping = aes(fill= !!sym(input$nj_fruit_variable_5)), + offset = 0.15, + width = width * 3, alpha = 1 ) } else { geom_fruit( geom = geom_tile, - mapping = aes(fill= !!sym(input$nj_fruit_variable)), + mapping = aes(fill= !!sym(input$nj_fruit_variable_5)), offset = 0.05, width = width, alpha = 1 diff --git a/www/mycss.css b/www/mycss.css index 971e6b0..0ff02ca 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -1691,7 +1691,7 @@ button#nj_tile_menu_5 { #nj_heatmap_offset { margin-top: 4px; - margin-bottom: 3px; + margin-bottom: 2px; } #nj_fruit_width, #nj_fruit_width2, #nj_fruit_width3, #nj_fruit_width4, #nj_fruit_width5 { From 1903b25611f963dd03c6b082abada72d5d4c300b Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Fri, 15 Mar 2024 16:35:58 +0100 Subject: [PATCH 20/26] Added variable mapping feedback and rules for overmapping --- App.R | 1303 +++++++++++++++++++++++++++++++++---------------- www/mycss.css | 4 + 2 files changed, 876 insertions(+), 431 deletions(-) diff --git a/App.R b/App.R index d3e3f80..e1d416a 100644 --- a/App.R +++ b/App.R @@ -3013,25 +3013,7 @@ ui <- dashboardPage( align = "center", uiOutput("nj_tiplab_scale") ), - conditionalPanel( - "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiplab_scale)", - column( - width = 1, - h5("Midpoint", style = "color: white; margin-top: 22px;") - ), - column( - width = 2, - div( - class = "divmid-sel1", - selectInput( - "nj_color_mapping_div_mid", - label = "", - choices = c("Zero", "Mean", "Median"), - selected = "Mean" - ) - ) - ) - ) + uiOutput("nj_tiplab_mapping_info"), ), fluidRow( column( @@ -3056,25 +3038,7 @@ ui <- dashboardPage( align = "center", uiOutput("nj_tippoint_scale") ), - conditionalPanel( - "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tippoint_scale)", - column( - width = 1, - h5("Midpoint", style = "color: white; margin-top: 20px;") - ), - column( - width = 2, - div( - class = "divmid-sel", - selectInput( - "nj_tipcolor_mapping_div_mid", - label = "", - choices = c("Zero", "Mean", "Median"), - selected = "Mean" - ) - ) - ) - ) + uiOutput("nj_tipcolor_mapping_info") ), fluidRow( column( @@ -3098,10 +3062,11 @@ ui <- dashboardPage( width = 3, HTML( paste( - tags$span(style='color: white; font-size: 14px; font-style: italic; position: relative; bottom: -16px; right: -15px;', 'No scale for shapes') + tags$span(style='color: white; font-size: 14px; font-style: italic; position: relative; bottom: -16px; right: -40px;', 'No scale for shapes') ) ) - ) + ), + uiOutput("nj_tipshape_mapping_info") ), fluidRow( column( @@ -3215,25 +3180,6 @@ ui <- dashboardPage( width = 3, align = "center", uiOutput("nj_tiles_scale_1") - ), - conditionalPanel( - "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_1)", - column( - width = 1, - h5("Midpoint", style = "color: white; margin-top: 20px;") - ), - column( - width = 2, - div( - class = "divmid-sel", - selectInput( - "nj_tiles_mapping_div_mid_1", - label = "", - choices = c("Zero", "Mean", "Median"), - selected = "Mean" - ) - ) - ) ) ), conditionalPanel( @@ -3242,25 +3188,6 @@ ui <- dashboardPage( width = 3, align = "center", uiOutput("nj_tiles_scale_2") - ), - conditionalPanel( - "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_2)", - column( - width = 1, - h5("Midpoint", style = "color: white; margin-top: 20px;") - ), - column( - width = 2, - div( - class = "divmid-sel", - selectInput( - "nj_tiles_mapping_div_mid_2", - label = "", - choices = c("Zero", "Mean", "Median"), - selected = "Mean" - ) - ) - ) ) ), conditionalPanel( @@ -3269,25 +3196,6 @@ ui <- dashboardPage( width = 3, align = "center", uiOutput("nj_tiles_scale_3") - ), - conditionalPanel( - "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_3)", - column( - width = 1, - h5("Midpoint", style = "color: white; margin-top: 20px;") - ), - column( - width = 2, - div( - class = "divmid-sel", - selectInput( - "nj_tiles_mapping_div_mid_3", - label = "", - choices = c("Zero", "Mean", "Median"), - selected = "Mean" - ) - ) - ) ) ), conditionalPanel( @@ -3296,25 +3204,6 @@ ui <- dashboardPage( width = 3, align = "center", uiOutput("nj_tiles_scale_4") - ), - conditionalPanel( - "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_4)", - column( - width = 1, - h5("Midpoint", style = "color: white; margin-top: 20px;") - ), - column( - width = 2, - div( - class = "divmid-sel", - selectInput( - "nj_tiles_mapping_div_mid_4", - label = "", - choices = c("Zero", "Mean", "Median"), - selected = "Mean" - ) - ) - ) ) ), conditionalPanel( @@ -3323,27 +3212,9 @@ ui <- dashboardPage( width = 3, align = "center", uiOutput("nj_tiles_scale_5") - ), - conditionalPanel( - "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_tiles_scale_5)", - column( - width = 1, - h5("Midpoint", style = "color: white; margin-top: 20px;") - ), - column( - width = 2, - div( - class = "divmid-sel", - selectInput( - "nj_tiles_mapping_div_mid_5", - label = "", - choices = c("Zero", "Mean", "Median"), - selected = "Mean" - ) - ) - ) ) - ) + ), + uiOutput("nj_fruit_mapping_info") ), fluidRow( column( @@ -3368,25 +3239,7 @@ ui <- dashboardPage( align = "center", uiOutput("nj_heatmap_scale") ), - conditionalPanel( - "['Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG'].includes(input.nj_heatmap_scale)", - column( - width = 1, - h5("Midpoint", style = "color: white; margin-top: 20px;") - ), - column( - width = 2, - div( - class = "divmid-sel", - selectInput( - "nj_heatmap_div_mid", - label = "", - choices = c("Zero", "Mean", "Median"), - selected = "Mean" - ) - ) - ) - ) + uiOutput("nj_heatmap_mapping_info") ) ) ) @@ -8869,6 +8722,8 @@ server <- function(input, output, session) { # Change scheme observeEvent(input$reload_db, { + test <<- DB$meta + if(tail(readLines(paste0(getwd(), "/execute/script_log.txt")), 1)!= "0") { show_toast( title = "Pending Multi Typing", @@ -10012,6 +9867,410 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- + # Mapping value number information + + output$nj_tiplab_mapping_info <- renderUI({ + if(!is.null(input$nj_color_mapping)) { + if(is.numeric(unlist(DB$meta[input$nj_color_mapping]))) { + if(input$nj_tiplab_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_color_mapping_div_mid", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 23px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_color_mapping]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_color_mapping]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_color_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + }) + + output$nj_tipcolor_mapping_info <- renderUI({ + if(!is.null(input$nj_tipcolor_mapping)) { + if(is.numeric(unlist(DB$meta[input$nj_tipcolor_mapping]))) { + if(input$nj_tippoint_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tipcolor_mapping_div_mid", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_tipcolor_mapping]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_tipcolor_mapping]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_tipcolor_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + }) + + output$nj_tipshape_mapping_info <- renderUI({ + if(!is.null(input$nj_tipshape_mapping)) { + if(is.numeric(unlist(DB$meta[input$nj_tipshape_mapping]))) { + column( + width = 3, + h5("Mapping continous variables to shape not possible", style = "color: #E18B00; font-style: italic; font-size: 12px; margin-top: 15px; margin-left: 40px") + ) + } else { + if(length(unique(unlist(DB$meta[input$nj_tipshape_mapping]))) > 6) { + column( + width = 3, + h5("Mapping > 6 variables to shape not possible", style = "color: #E18B00; font-style: italic; font-size: 12px; margin-top: 15px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_tipshape_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + }) + + output$nj_fruit_mapping_info <- renderUI({ + if(input$nj_tile_num == 1) { + if(!is.null(input$nj_fruit_variable)) { + if(is.numeric(unlist(DB$meta[input$nj_fruit_variable]))) { + if(input$nj_tiles_scale_1 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tiles_mapping_div_mid_1", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + } else if (input$nj_tile_num == 2) { + if(!is.null(input$nj_fruit_variable_2)) { + if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_2]))) { + if(input$nj_tiles_scale_2 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tiles_mapping_div_mid_2", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + } else if (input$nj_tile_num == 3) { + if(!is.null(input$nj_fruit_variable_3)) { + if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_3]))) { + if(input$nj_tiles_scale_3 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tiles_mapping_div_mid_3", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + } else if (input$nj_tile_num == 4) { + if(!is.null(input$nj_fruit_variable_4)) { + if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_4]))) { + if(input$nj_tiles_scale_4 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tiles_mapping_div_mid_4", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + } else if (input$nj_tile_num == 5) { + if(!is.null(input$nj_fruit_variable_5)) { + if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_5]))) { + if(input$nj_tiles_scale_5 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tiles_mapping_div_mid_5", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + } + }) + + output$nj_heatmap_mapping_info <- renderUI({ + if(!is.null(input$nj_heatmap_select)) { + if (any(sapply(DB$meta[input$nj_heatmap_select], is.numeric)) & + any(!sapply(DB$meta[input$nj_heatmap_select], is.numeric))) { + column( + width = 3, + h5("Heatmap with categorical and continous values not possible", + style = "color: #E18B00; font-size: 12px; font-style: italic; margin-top: 15px; margin-left: 40px") + ) + } else { + if(any(sapply(DB$meta[input$nj_heatmap_select], is.numeric))) { + if(input$nj_heatmap_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_heatmap_div_mid", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 23px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_heatmap_select]))) > 7) { + column( + width = 3, + h5(paste0("> 7 categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5("Categorical values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } + } else {NULL} + }) + # Tiles offset output$nj_fruit_offset_circ <- renderUI({ if(!is.null(input$nj_layout)) { @@ -10540,42 +10799,62 @@ server <- function(input, output, session) { ) ) } else { - selectInput( - "nj_heatmap_scale", - "", - choices = list( - Qualitative = list( - "Set1", - "Set2", - "Set3", - "Pastel1", - "Pastel2", - "Paired", - "Dark2", - "Accent" + if(length(unique(unlist(DB$meta[input$nj_heatmap_select]))) > 7) { + selectInput( + "nj_heatmap_scale", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) ), - Sequential = list( - "YlOrRd", - "YlOrBr", - "YlGnBu", - "YlGn", - "Reds", - "RdPu", - "Purples", - "PuRd", - "PuBuGn", - "PuBu", - "OrRd", - "Oranges", - "Greys", - "Greens", - "GnBu", - "BuPu", - "BuGn", - "Blues" + selected = "turbo" + ) + } else { + selectInput( + "nj_heatmap_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) ) ) - ) + } } }) @@ -10610,42 +10889,62 @@ server <- function(input, output, session) { ) ) } else { - selectInput( - "nj_tiles_scale_1", - "", - choices = list( - Qualitative = list( - "Set1", - "Set2", - "Set3", - "Pastel1", - "Pastel2", - "Paired", - "Dark2", - "Accent" + if(length(unique(unlist(DB$meta[input$nj_fruit_variable]))) > 7) { + selectInput( + "nj_tiles_scale_1", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) ), - Sequential = list( - "YlOrRd", - "YlOrBr", - "YlGnBu", - "YlGn", - "Reds", - "RdPu", - "Purples", - "PuRd", - "PuBuGn", - "PuBu", - "OrRd", - "Oranges", - "Greys", - "Greens", - "GnBu", - "BuPu", - "BuGn", - "Blues" + selected = "turbo" + ) + } else { + selectInput( + "nj_tiles_scale_1", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) ) ) - ) + } } }) @@ -10679,42 +10978,62 @@ server <- function(input, output, session) { ) ) } else { - selectInput( - "nj_tiles_scale_2", - "", - choices = list( - Qualitative = list( - "Set1", - "Set2", - "Set3", - "Pastel1", - "Pastel2", - "Paired", - "Dark2", - "Accent" + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))) > 7) { + selectInput( + "nj_tiles_scale_2", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) ), - Sequential = list( - "YlOrRd", - "YlOrBr", - "YlGnBu", - "YlGn", - "Reds", - "RdPu", - "Purples", - "PuRd", - "PuBuGn", - "PuBu", - "OrRd", - "Oranges", - "Greys", - "Greens", - "GnBu", - "BuPu", - "BuGn", - "Blues" + selected = "turbo" + ) + } else { + selectInput( + "nj_tiles_scale_2", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) ) ) - ) + } } }) @@ -10748,42 +11067,62 @@ server <- function(input, output, session) { ) ) } else { - selectInput( - "nj_tiles_scale_3", - "", - choices = list( - Qualitative = list( - "Set1", - "Set2", - "Set3", - "Pastel1", - "Pastel2", - "Paired", - "Dark2", - "Accent" + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))) > 7) { + selectInput( + "nj_tiles_scale_3", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) ), - Sequential = list( - "YlOrRd", - "YlOrBr", - "YlGnBu", - "YlGn", - "Reds", - "RdPu", - "Purples", - "PuRd", - "PuBuGn", - "PuBu", - "OrRd", - "Oranges", - "Greys", - "Greens", - "GnBu", - "BuPu", - "BuGn", - "Blues" + selected = "turbo" + ) + } else { + selectInput( + "nj_tiles_scale_3", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) ) ) - ) + } } }) @@ -10817,42 +11156,62 @@ server <- function(input, output, session) { ) ) } else { - selectInput( - "nj_tiles_scale_4", - "", - choices = list( - Qualitative = list( - "Set1", - "Set2", - "Set3", - "Pastel1", - "Pastel2", - "Paired", - "Dark2", - "Accent" + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))) > 7) { + selectInput( + "nj_tiles_scale_4", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) ), - Sequential = list( - "YlOrRd", - "YlOrBr", - "YlGnBu", - "YlGn", - "Reds", - "RdPu", - "Purples", - "PuRd", - "PuBuGn", - "PuBu", - "OrRd", - "Oranges", - "Greys", - "Greens", - "GnBu", - "BuPu", - "BuGn", - "Blues" + selected = "turbo" + ) + } else { + selectInput( + "nj_tiles_scale_4", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) ) ) - ) + } } }) @@ -10886,42 +11245,62 @@ server <- function(input, output, session) { ) ) } else { - selectInput( - "nj_tiles_scale_5", - "", - choices = list( - Qualitative = list( - "Set1", - "Set2", - "Set3", - "Pastel1", - "Pastel2", - "Paired", - "Dark2", - "Accent" + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))) > 7) { + selectInput( + "nj_tiles_scale_5", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) ), - Sequential = list( - "YlOrRd", - "YlOrBr", - "YlGnBu", - "YlGn", - "Reds", - "RdPu", - "Purples", - "PuRd", - "PuBuGn", - "PuBu", - "OrRd", - "Oranges", - "Greys", - "Greens", - "GnBu", - "BuPu", - "BuGn", - "Blues" + selected = "turbo" + ) + } else { + selectInput( + "nj_tiles_scale_5", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) ) ) - ) + } } }) @@ -10956,42 +11335,62 @@ server <- function(input, output, session) { ) ) } else { - selectInput( - "nj_tiplab_scale", - "", - choices = list( - Qualitative = list( - "Set1", - "Set2", - "Set3", - "Pastel1", - "Pastel2", - "Paired", - "Dark2", - "Accent" + if(length(unique(unlist(DB$meta[input$nj_color_mapping]))) > 7) { + selectInput( + "nj_tiplab_scale", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) ), - Sequential = list( - "YlOrRd", - "YlOrBr", - "YlGnBu", - "YlGn", - "Reds", - "RdPu", - "Purples", - "PuRd", - "PuBuGn", - "PuBu", - "OrRd", - "Oranges", - "Greys", - "Greens", - "GnBu", - "BuPu", - "BuGn", - "Blues" + selected = "turbo" + ) + } else { + selectInput( + "nj_tiplab_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) ) ) - ) + } } }) @@ -11026,42 +11425,62 @@ server <- function(input, output, session) { ) ) } else { - selectInput( - "nj_tippoint_scale", - "", - choices = list( - Qualitative = list( - "Set1", - "Set2", - "Set3", - "Pastel1", - "Pastel2", - "Paired", - "Dark2", - "Accent" + if(length(unique(unlist(DB$meta[input$nj_tipcolor_mapping]))) > 7) { + selectInput( + "nj_tippoint_scale", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) ), - Sequential = list( - "YlOrRd", - "YlOrBr", - "YlGnBu", - "YlGn", - "Reds", - "RdPu", - "Purples", - "PuRd", - "PuBuGn", - "PuBu", - "OrRd", - "Oranges", - "Greys", - "Greens", - "GnBu", - "BuPu", - "BuGn", - "Blues" + selected = "turbo" + ) + } else { + selectInput( + "nj_tippoint_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) ) ) - ) + } } }) @@ -11528,6 +11947,27 @@ server <- function(input, output, session) { }) output$nj_heatmap_sel <- renderUI({ + + meta <- select(DB$meta, -c(Index, Include, `Assembly ID`, `Assembly Name`, + Scheme, `Typing Date`, Successes, Errors)) + + # Identify numeric columns + numeric_columns <- sapply(meta, is.numeric) + + numeric_column_names <- names(meta[numeric_columns]) + + non_numeric_column_names <- names(meta)[!numeric_columns] + + choices <- list() + + # Add Continuous list only if there are numeric columns + if (length(numeric_column_names) > 0) { + choices$Continuous <- as.list(setNames(numeric_column_names, numeric_column_names)) + } + + # Add Diverging list + choices$Categorical <- as.list(setNames(non_numeric_column_names, non_numeric_column_names)) + div( class = "heatmap-picker", pickerInput( @@ -11541,11 +11981,9 @@ server <- function(input, output, session) { Country = "Country", City = "City" ) - } else { - append(c(`Isolation Date` = "Isolation Date", Host = "Host", Country = "Country", City = "City"), - names(DB$meta)[13:ncol(DB$meta)]) - }, + } else {choices}, options = list( + `dropdown-align-center` = TRUE, size = 10, style = "background-color: white; border-radius: 5px;" ), @@ -12649,14 +13087,17 @@ server <- function(input, output, session) { # Add heatmap if(input$nj_heatmap_show == TRUE & length(input$nj_heatmap_select) > 0) { - tree <- gheatmap(tree, - data = select(Vis$meta_nj, input$nj_heatmap_select), - offset = nj_heatmap_offset(), - width = nj_heatmap_width(), - legend_title = input$nj_heatmap_title, - colnames_angle = -nj_colnames_angle(), - colnames_offset_y = nj_colnames_y()) + - heatmap_scale() + if (!(any(sapply(DB$meta[input$nj_heatmap_select], is.numeric)) & + any(!sapply(DB$meta[input$nj_heatmap_select], is.numeric)))) { + tree <- gheatmap(tree, + data = select(Vis$meta_nj, input$nj_heatmap_select), + offset = nj_heatmap_offset(), + width = nj_heatmap_width(), + legend_title = input$nj_heatmap_title, + colnames_angle = -nj_colnames_angle(), + colnames_offset_y = nj_colnames_y()) + + heatmap_scale() + } } # Sizing control diff --git a/www/mycss.css b/www/mycss.css index 0ff02ca..ea365bd 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -105,6 +105,10 @@ width: 20px; } +#nj_heatmap_sel .filter-option-inner { + text-align: center; +} + #nj_tiplab_scale .option[data-value="Set1"], #nj_tippoint_scale .option[data-value="Set1"], #nj_tiles_scale_1 .option[data-value="Set1"], From 74ce7c1a8448a1948dcf989b0e662260de9709fe Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Fri, 15 Mar 2024 17:45:53 +0100 Subject: [PATCH 21/26] Moved Sizing parameters for NJ --- App.R | 227 +++++++++++++++++++++----------------------------- www/mycss.css | 29 ++++++- 2 files changed, 119 insertions(+), 137 deletions(-) diff --git a/App.R b/App.R index e1d416a..d6b8d20 100644 --- a/App.R +++ b/App.R @@ -1705,6 +1705,12 @@ ui <- dashboardPage( width = "100%", placeholder = "Plot Title" ), + textInput( + "nj_subtitle", + label = "", + width = "100%", + placeholder = "Plot Subtitle" + ), br(), fluidRow( column( @@ -1740,12 +1746,22 @@ ui <- dashboardPage( align = "center", numericInput( "nj_title_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), + label = h5("Title Size", style = "color:white; margin-bottom: 0px"), value = 30, min = 15, max = 40, step = 1, width = "80px" + ), + br(), + numericInput( + "nj_subtitle_size", + label = h5("Subtitle Size", style = "color:white; margin-bottom: 0px"), + value = 20, + min = 15, + max = 40, + step = 1, + width = "80px" ) ) ) @@ -1766,37 +1782,33 @@ ui <- dashboardPage( column( width = 12, align = "left", - h4(p("Subtitle"), style = "color:white; position: relative; right: -15px"), + h4(p("Sizing"), style = "color:white; position: relative; right: -15px"), column( width = 12, align = "center", - textInput( - "nj_subtitle", - label = "", - width = "100%", - placeholder = "Plot Subtitle" - ), br(), fluidRow( column( - width = 7, - colorPickr( - inputId = "nj_subtitle_color", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + width = 3, + h5("Ratio", style = "color: white; font-size: 14px;") + ), + column( + width = 6, + align = "left", + div( + class = "ratio-sel", + selectInput( + "nj_ratio", + "", + choices = c("16:10" = (16/10), "16:9" = (16/9), "4:3" = (4/3)) + ) ) ), column( - width = 5, - align = "right", + width = 3, dropMenu( actionBttn( - "nj_subtitle_menu", + "nj_size_menu", label = "", color = "default", size = "sm", @@ -1808,22 +1820,71 @@ ui <- dashboardPage( fluidRow( column( width = 12, - align = "center", - numericInput( - "nj_subtitle_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - value = 20, - min = 15, - max = 40, - step = 1, - width = "80px" + sliderInput( + "nj_v", + label = "Vertical Position", + min = -0.5, + max = 0.5, + step = 0.01, + value = 0, + width = "150px", + ticks = FALSE + ), + br(), + sliderInput( + "nj_h", + label = "Horizontal Position", + min = -0.5, + max = 0.5, + step = 0.01, + value = 0, + width = "150px", + ticks = FALSE ) ) ) ) ) ), - br() + fluidRow( + column( + width = 3, + h5("Size", style = "color: white; font-size: 14px; margin-top: 30px") + ), + column( + width = 9, + sliderInput( + "nj_scale", + "", + min = 500, + max = 1200, + value = 800, + width = "95%", + ticks = FALSE + ) + ) + ), + fluidRow( + column( + width = 3, + h5("Zoom", style = "color: white; font-size: 14px; margin-top: 30px") + ), + column( + width = 9, + div( + class = "zoom-slider", + sliderInput( + "nj_zoom", + label = NULL, + min = 0.5, + max = 1.5, + step = 0.05, + value = 0.95, + ticks = FALSE + ) + ) + ) + ) ) ) ) @@ -3245,9 +3306,7 @@ ui <- dashboardPage( ) ) ) - ), - br(), br(), br(), br(), br(), br(), br(), br(), br(), - br(), br(), br(), br(), br(), br(), br(), br(), br(), + ) ), ### Control Panels UPGMA ---- @@ -6624,102 +6683,6 @@ server <- function(input, output, session) { ), conditionalPanel( "input.tree_algo=='Neighbour-Joining'", - fluidRow( - column( - width = 12, - align = "left", - br(), - HTML( - paste( - tags$span(style='color: white; font-size: 16px; margin-left: 15px', "Sizing") - ) - ) - ) - ), - fluidRow( - column( - width = 12, - radioGroupButtons( - "nj_ratio", - "", - choiceNames = c("16:10", "16:9", "4:3"), - choiceValues = c((16/10), (16/9), (4/3)), - width = "100%" - ), - br(), - sliderInput( - "nj_scale", - "", - min = 500, - max = 1200, - value = 800, - width = "95%", - ticks = FALSE - ) - ) - ), - fluidRow( - column( - width = 3, - align = "left", - br(), - HTML( - paste( - tags$span(style='color: white; font-size: 14px; position: relative; bottom: -28px; margin-left: 15px ', "Zoom") - ) - ) - ), - column( - width = 8, - align = "right", - br(), - sliderInput( - "nj_zoom", - label = NULL, - min = 0.5, - max = 1.5, - step = 0.05, - value = 0.95, - ticks = FALSE - ) - ) - ), - fluidRow( - column( - width = 5, - align = "left", - div( - class = "arrow_move", - numericInput( - "nj_v", - label = h5("Y", style = "color:white; margin-bottom: -6px; margin-left: 10px"), - min = -0.5, - max = 0.5, - step = 0.01, - value = 0, - width = "80px" - ) - ) - ), - column( - width = 5, - align = "left", - div( - class = "arrow_move", - numericInput( - "nj_h", - label = h5("X", style = "color:white; margin-bottom: -6px; margin-left: 10px"), - min = -0.5, - max = 0.5, - step = 0.01, - value = 0, - width = "80px" - ) - ) - ) - ), - br(), - hr(), fluidRow( column( width = 12, @@ -8722,8 +8685,6 @@ server <- function(input, output, session) { # Change scheme observeEvent(input$reload_db, { - test <<- DB$meta - if(tail(readLines(paste0(getwd(), "/execute/script_log.txt")), 1)!= "0") { show_toast( title = "Pending Multi Typing", @@ -13054,7 +13015,7 @@ server <- function(input, output, session) { theme_tree(bgcolor = input$nj_bg) + theme(plot.title = element_text(colour = input$nj_title_color, size = input$nj_title_size), - plot.subtitle = element_text(colour = input$nj_subtitle_color, + plot.subtitle = element_text(colour = input$nj_title_color, size = input$nj_subtitle_size), legend.background = element_rect(fill = input$nj_bg), legend.direction = input$nj_legend_orientation, diff --git a/www/mycss.css b/www/mycss.css index ea365bd..7974607 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -1242,6 +1242,11 @@ input.form-control.pickr-color { margin-bottom: -6px !important; } +.ratio-sel { + margin-top: -20px; + margin-bottom: -40px; +} + .label_sel { margin-bottom: -16px; } @@ -1254,8 +1259,9 @@ input.form-control.pickr-color { margin-top: -10px; } -#nj_subtitle_color, #nj_title_color { - margin-bottom: 32px; +#nj_title_color { + margin-bottom: -15px; + margin-top: -16px; } #nj_bg { @@ -1320,6 +1326,11 @@ input.form-control.pickr-color { width: 100px; } +.zoom-slider { + margin-top: 20px; + margin-bottom: 6px; +} + #nj_color_mapping { margin-top: -7px; margin-bottom: 0px; @@ -1368,11 +1379,21 @@ button#nj_footer_menu { } button#nj_title_menu { + height: 34px; + background: #20E6E5; + color: #000000; + margin-top: 4px; + border-radius: 5px; + margin-bottom: -24px; +} + +button#nj_size_menu { height: 34px; background: #20E6E5; color: #000000; - margin-top: 20px; - border-radius: 5px + margin-top: 0px; + border-radius: 5px; + margin-left: -15px; } button#nj_branch_label_menu { From 4ee8707242238122cf4926016e9d73ea11b4c788 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Fri, 15 Mar 2024 18:05:31 +0100 Subject: [PATCH 22/26] Fix legend position function --- App.R | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/App.R b/App.R index d6b8d20..b2651e9 100644 --- a/App.R +++ b/App.R @@ -1997,9 +1997,10 @@ ui <- dashboardPage( sliderInput( "nj_legend_x", label = h5("X Position", style = "color:white; margin-bottom: 0px"), - value = 0.1, + value = 0.9, min = -0.9, max = 1.9, + step = 0.2, width = "150px", ticks = FALSE ), @@ -2007,9 +2008,10 @@ ui <- dashboardPage( sliderInput( "nj_legend_y", label = h5("Y Position", style = "color:white; margin-bottom: 0px"), - value = 1, - min = -1, - max = 1, + value = 0.2, + min = -1.5, + max = 1.5, + step = 0.1, width = "150px", ticks = FALSE ) From 8a895a623949b4905c89258e49aa2933b7ff63b3 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Fri, 15 Mar 2024 19:22:59 +0100 Subject: [PATCH 23/26] Added rcolorbrewer and viridis in environment yaml file; Clean-up of css styling sheet --- PhyloTrace.yml | 2 + www/mycss.css | 2450 +++++++++++++++++++++++------------------------- 2 files changed, 1200 insertions(+), 1252 deletions(-) diff --git a/PhyloTrace.yml b/PhyloTrace.yml index 5d53183..e9951c0 100644 --- a/PhyloTrace.yml +++ b/PhyloTrace.yml @@ -117,6 +117,7 @@ dependencies: - r-quadprog=1.5_8 - r-ragg=1.2.5 - r-rappdirs=0.3.3 + - r-rcolorbrewer=1.1_3 - r-readr=2.1.4 - r-readxl=1.4.3 - r-rematch=2.0.0 @@ -155,6 +156,7 @@ dependencies: - r-utf8=1.2.3 - r-uuid=1.1_1 - r-vctrs=0.6.4 + - r-viridis=0.6.5 - r-viridisLite=0.4.2 - r-visNetwork=2.1.2 - r-vroom=1.6.4 diff --git a/www/mycss.css b/www/mycss.css index 7974607..500d00e 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -1,1262 +1,763 @@ -@keyframes pulsate { - 0% { transform: scale(1); } - 50% { transform: scale(1.1); } - 100% { transform: scale(1); } -} +/* CSS Styling for PhyloTrace */ -.pulsating-button { - animation: pulsate 1s ease infinite; -} +/* General */ -.sel-clade { - margin-left: 15px; - margin-block: -2px; +h1, h2, h3, h4, h5, p, body { + font-family: 'Liberation Sans', sans-serif; } -.sel-clade-scale { - margin-bottom: -14px; +label { + color: white; } -#nj_clade_scale { - margin-bottom 1px; +.white { + color: white; + font-size: 16px; } -.divmid-sel { - margin-top: -10px; +.main-sidebar .sidebar .sidebar-menu .treeview-menu a { + color: #ffffff !important; + margin-left: 25px; + border-radius: 20px; + margin-top: 7px; + margin-bottom: 7px; } -.divmid-sel1 { - margin-top: -8px; +.main-sidebar .sidebar .sidebar-menu a { + border: none; } -.tile-sel { - margin-left: -20px; - margin-top: -10px; +.main-sidebar .sidebar .sidebar-menu .treeview-menu li.active a { + color: #000000 !important; + border-radius: 20px; + margin-top: 7px; + margin-bottom: 7px; } -#nj_parentnode { - margin-left: 38px; - margin-top: -10px; +.main-sidebar .sidebar .sidebar-menu .treeview-menu li:hover a { + color: #000000 !important; + border-radius: 20px; + margin-top: 7px; + margin-bottom: 7px; } -.mat-switch { - margin-left: 15px; - margin-top: 25px; +.main-sidebar .sidebar .sidebar-menu li:hover a { + color: #000000; + border: none; } -.mat-switch-v { - margin-left: 25px; - margin-top: 15px; +file.select { + background-color: white; } -.mat-switch-geom { - margin-top: 5px; - margin-left: 15px; +.box.box-solid.box-info{ + background: #282F38; + margin-top: 20px; + position: relative; + left: 30px; } -.mat-switch-lab { - margin-top: 25px; - margin-left: 15px; +.box.box-solid.box-info, .box.box-info { + border-color: #ffffff; + border-left-color: #ffffff; + border-right-color: #ffffff; + border-top-color: #ffffff; + border-radius: 7px; } -.mat-switch-layout { - margin-left: 10px; - margin-top: 20px; +.selectize-control.single .selectize-input:after { + right: 10px; } -.mat-switch-re { - margin-left: 10px; - margin-top: 10px; - margin-block: -2px; +#scheme_db .selectize-control { + font-size: 12px; } -.mat-switch-align { - margin-top: 25px; - margin-left: -10px; +.scheme_start { + margin-left: -20px; } -.material-switch>label.switch:before { - background: #20E6E5 !important; - border-radius: 8px; - content: ""; - height: 13px; - margin-top: -10px; - opacity: .3; - position: absolute; - transition: all .4s ease-in-out; - width: 40px; +.irs--shiny .irs-min, +.irs--shiny .irs-max { + top: 0; + padding: 1px 3px; + text-shadow: none; + background-color: rgba(0, 0, 0, 0.2); + border-radius: 3px; + font-size: 10px; + line-height: 1.333; + color: white } -.material-switch>input[type=checkbox]:checked+label.switch:before { - opacity: 1; +#reload_db i.fas.fa-rotate { + position: relative; + left: -5px; + top: -2px; } -.material-switch>label.switch:after { - background: #E6E6E6 !important; - border-radius: 1pc; - box-shadow: 0 0 5px rgba(0,0,0,.3); - content: ""; - height: 20px; - left: -4px; - margin-top: -10px; - position: absolute; - top: -4px; - transition: all .3s ease-in-out; - width: 20px; +button#reload_db.btn.btn-default.action-button.shiny-bound-input { + height: 30px; + width: 30px; + position: relative; + left: -20px; } -#nj_heatmap_sel .filter-option-inner { - text-align: center; +.irs.irs--shiny.js-irs-0 { + margin-right: -15px; } -#nj_tiplab_scale .option[data-value="Set1"], -#nj_tippoint_scale .option[data-value="Set1"], -#nj_tiles_scale_1 .option[data-value="Set1"], -#nj_tiles_scale_2 .option[data-value="Set1"], -#nj_tiles_scale_3 .option[data-value="Set1"], -#nj_tiles_scale_4 .option[data-value="Set1"], -#nj_tiles_scale_5 .option[data-value="Set1"], -#nj_heatmap_scale .option[data-value="Set1"], -#nj_clade_scale .option[data-value="Set1"] { - background: linear-gradient(to right, #E41A1C 0%, #E41A1C 11%, #377EB8 11%, #377EB8 22%, #4DAF4A 22%, #4DAF4A 33%, #984EA3 33%, #984EA3 44%, #FF7F00 44%, #FF7F00 55%, #FFFF33 55%, #FFFF33 66%, #A65628 66%, #A65628 77%, #F781BF 77%, #F781BF 88%, #999999 88%, #999999 100%); - color: black; - margin-bottom: 2px; +.irs.irs--shiny.js-irs-1 { + margin-right: -15px; } +.irs.irs--shiny.js-irs-2 { + margin-right: -15px; +} -#nj_tiplab_scale .option[data-value="Set2"], -#nj_tippoint_scale .option[data-value="Set2"], -#nj_tiles_scale_1 .option[data-value="Set2"], -#nj_tiles_scale_2 .option[data-value="Set2"], -#nj_tiles_scale_3 .option[data-value="Set2"], -#nj_tiles_scale_4 .option[data-value="Set2"], -#nj_tiles_scale_5 .option[data-value="Set2"], -#nj_heatmap_scale .option[data-value="Set2"], -#nj_clade_scale .option[data-value="Set2"] { - background: linear-gradient(to right, #66C2A5 0%, #66C2A5 12.5%, #FC8D62 12.5%, #FC8D62 25%, #8DA0CB 25%, #8DA0CB 37.5%, #E78AC3 37.5%, #E78AC3 50%, #A6D854 50%, #A6D854 62.5%, #FFD92F 62.5%, #FFD92F 75%, #E5C494 75%, #E5C494 87.5%, #B3B3B3 87.5%, #B3B3B3 100%); - color: black; - margin-bottom: 2px; +div#scheme_db .form-control, .selectize-input, .selectize-control.single .selectize-input { + border-color: #000000 !important; } -#nj_tiplab_scale .option[data-value="Set3"], -#nj_tippoint_scale .option[data-value="Set3"], -#nj_tiles_scale_1 .option[data-value="Set3"], -#nj_tiles_scale_2 .option[data-value="Set3"], -#nj_tiles_scale_3 .option[data-value="Set3"], -#nj_tiles_scale_4 .option[data-value="Set3"], -#nj_tiles_scale_5 .option[data-value="Set3"], -#nj_heatmap_scale .option[data-value="Set3"], -#nj_clade_scale .option[data-value="Set3"] { - background: linear-gradient(to right, #8DD3C7 0%, #8DD3C7 8.33333%, #FFFFB3 8.33333%, #FFFFB3 16.6667%, #BEBADA 16.6667%, #BEBADA 25%, #FB8072 25%, #FB8072 33.3333%, #80B1D3 33.3333%, #80B1D3 41.6667%, #FDB462 41.6667%, #FDB462 50%, #B3DE69 50%, #B3DE69 58.3333%, #FCCDE5 58.3333%, #FCCDE5 66.6667%, #D9D9D9 66.6667%, #D9D9D9 75%, #BC80BD 75%, #BC80BD 83.3333%, #CCEBC5 83.3333%, #CCEBC5 91.6667%, #FFED6F 91.6667%, #FFED6F 100%); - color: black; - margin-bottom: 2px; +#distmatrix_triangle { + margin-top: -35px; } -#nj_tiplab_scale .option[data-value="Pastel1"], -#nj_tippoint_scale .option[data-value="Pastel1"], -#nj_tiles_scale_1 .option[data-value="Pastel1"], -#nj_tiles_scale_2 .option[data-value="Pastel1"], -#nj_tiles_scale_3 .option[data-value="Pastel1"], -#nj_tiles_scale_4 .option[data-value="Pastel1"], -#nj_tiles_scale_5 .option[data-value="Pastel1"], -#nj_heatmap_scale .option[data-value="Pastel1"], -#nj_clade_scale .option[data-value="Pastel1"] { - background: linear-gradient(to right, #FBB4AE 0%, #FBB4AE 11.1111%, #B3CDE3 11.1111%, #B3CDE3 22.2222%, #CCEBC5 22.2222%, #CCEBC5 33.3333%, #DECBE4 33.3333%, #DECBE4 44.4444%, #FED9A6 44.4444%, #FED9A6 55.5556%, #FFFFCC 55.5556%, #FFFFCC 66.6667%, #E5D8BD 66.6667%, #E5D8BD 77.7778%, #FDDAEC 77.7778%, #FDDAEC 88.8889%, #F2F2F2 88.8889%, #F2F2F2 100%); - color: black; - margin-bottom: 2px; +#distmatrix_diag { + margin-top: -55px; } -#nj_tiplab_scale .option[data-value="Pastel2"], -#nj_tippoint_scale .option[data-value="Pastel2"], -#nj_tiles_scale_1 .option[data-value="Pastel2"], -#nj_tiles_scale_2 .option[data-value="Pastel2"], -#nj_tiles_scale_3 .option[data-value="Pastel2"], -#nj_tiles_scale_4 .option[data-value="Pastel2"], -#nj_tiles_scale_5 .option[data-value="Pastel2"], -#nj_heatmap_scale .option[data-value="Pastel2"], -#nj_clade_scale .option[data-value="Pastel2"] { - background: linear-gradient(to right, #B3E2CD 0%, #B3E2CD 12.5%, #FDCDAC 12.5%, #FDCDAC 25%, #CBD5E8 25%, #CBD5E8 37.5%, #F4CAE4 37.5%, #F4CAE4 50%, #E6F5C9 50%, #E6F5C9 62.5%, #FFF2AE 62.5%, #FFF2AE 75%, #F1E2CC 75%, #F1E2CC 87.5%, #CCCCCC 87.5%, #CCCCCC 100%); - color: black; - margin-bottom: 2px; +#distmatrix_true { + margin-top: -15px; } -#nj_tiplab_scale .option[data-value="Paired"], -#nj_tippoint_scale .option[data-value="Paired"], -#nj_tiles_scale_1 .option[data-value="Paired"], -#nj_tiles_scale_2 .option[data-value="Paired"], -#nj_tiles_scale_3 .option[data-value="Paired"], -#nj_tiles_scale_4 .option[data-value="Paired"], -#nj_tiles_scale_5 .option[data-value="Paired"], -#nj_heatmap_scale .option[data-value="Paired"], -#nj_clade_scale .option[data-value="Paired"] { - background: linear-gradient(to right, #A6CEE3 0%, #A6CEE3 8.33333%, #1F78B4 8.33333%, #1F78B4 16.6667%, #B2DF8A 16.6667%, #B2DF8A 25%, #33A02C 25%, #33A02C 33.3333%, #FB9A99 33.3333%, #FB9A99 41.6667%, #E31A1C 41.6667%, #E31A1C 50%, #FDBF6F 50%, #FDBF6F 58.3333%, #FF7F00 58.3333%, #FF7F00 66.6667%, #CAB2D6 66.6667%, #CAB2D6 75%, #6A3D9A 75%, #6A3D9A 83.3333%, #FFFF99 83.3333%, #FFFF99 91.6667%, #B15928 91.6667%, #B15928 100%); - color: black; - margin-bottom: 2px; +.format { + position: absolute; + top: -16px; + width: -webkit-fill-available; } -#nj_tiplab_scale .option[data-value="Dark2"], -#nj_tippoint_scale .option[data-value="Dark2"], -#nj_tiles_scale_1 .option[data-value="Dark2"], -#nj_tiles_scale_2 .option[data-value="Dark2"], -#nj_tiles_scale_3 .option[data-value="Dark2"], -#nj_tiles_scale_4 .option[data-value="Dark2"], -#nj_tiles_scale_5 .option[data-value="Dark2"], -#nj_heatmap_scale .option[data-value="Dark2"], -#nj_clade_scale .option[data-value="Dark2"] { - background: linear-gradient(to right, #1B9E77 0%, #1B9E77 12.5%, #D95F02 12.5%, #D95F02 25%, #7570B3 25%, #7570B3 37.5%, #E7298A 37.5%, #E7298A 50%, #66A61E 50%, #66A61E 62.5%, #E6AB02 62.5%, #E6AB02 75%, #A6761D 75%, #A6761D 87.5%, #666666 87.5%, #666666 100%); - color: black; - margin-bottom: 2px; +.tippy-tooltip.translucent-theme { + background-color: rgba(0,0,0,0.9); } -#nj_tiplab_scale .option[data-value="Accent"], -#nj_tippoint_scale .option[data-value="Accent"], -#nj_tiles_scale_1 .option[data-value="Accent"], -#nj_tiles_scale_2 .option[data-value="Accent"], -#nj_tiles_scale_3 .option[data-value="Accent"], -#nj_tiles_scale_4 .option[data-value="Accent"], -#nj_tiles_scale_5 .option[data-value="Accent"], -#nj_heatmap_scale .option[data-value="Accent"], -#nj_clade_scale .option[data-value="Accent"] { - background: linear-gradient(to right, #7FC97F 0%, #7FC97F 12.5%, #BEAED4 12.5%, #BEAED4 25%, #FDC086 25%, #FDC086 37.5%, #FFFF99 37.5%, #FFFF99 50%, #386CB0 50%, #386CB0 62.5%, #F0027F 62.5%, #F0027F 75%, #BF5B17 75%, #BF5B17 87.5%, #666666 87.5%, #666666 100%); - color: black; +.arrow_move input::-webkit-inner-spin-button { + margin-right: 8px; } -#nj_tiplab_scale .option[data-value="YlOrRd"], -#nj_tippoint_scale .option[data-value="YlOrRd"], -#nj_tiles_scale_1 .option[data-value="YlOrRd"], -#nj_tiles_scale_2 .option[data-value="YlOrRd"], -#nj_tiles_scale_3 .option[data-value="YlOrRd"], -#nj_tiles_scale_4 .option[data-value="YlOrRd"], -#nj_tiles_scale_5 .option[data-value="YlOrRd"], -#nj_heatmap_scale .option[data-value="YlOrRd"], -#nj_clade_scale .option[data-value="YlOrRd"] { - background: linear-gradient(to right, #FFFFCC 0%, #FFFFCC 11.1111%, #FFEDA0 11.1111%, #FFEDA0 22.2222%, #FED976 22.2222%, #FED976 33.3333%, #FEB24C 33.3333%, #FEB24C 44.4444%, #FD8D3C 44.4444%, #FD8D3C 55.5556%, #FC4E2A 55.5556%, #FC4E2A 66.6667%, #E31A1C 66.6667%, #E31A1C 77.7778%, #BD0026 77.7778%, #BD0026 88.8889%, #800026 88.8889%, #800026 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="YlOrBr"], -#nj_tippoint_scale .option[data-value="YlOrBr"], -#nj_tiles_scale_1 .option[data-value="YlOrBr"], -#nj_tiles_scale_2 .option[data-value="YlOrBr"], -#nj_tiles_scale_3 .option[data-value="YlOrBr"], -#nj_tiles_scale_4 .option[data-value="YlOrBr"], -#nj_tiles_scale_5 .option[data-value="YlOrBr"], -#nj_heatmap_scale .option[data-value="YlOrBr"], -#nj_clade_scale .option[data-value="YlOrBr"] { - background: linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11.1111%, #FFF7BC 11.1111%, #FFF7BC 22.2222%, #FEE391 22.2222%, #FEE391 33.3333%, #FEC44F 33.3333%, #FEC44F 44.4444%, #FE9929 44.4444%, #FE9929 55.5556%, #EC7014 55.5556%, #EC7014 66.6667%, #CC4C02 66.6667%, #CC4C02 77.7778%, #993404 77.7778%, #993404 88.8889%, #662506 88.8889%, #662506 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="YlGnBu"], -#nj_tippoint_scale .option[data-value="YlGnBu"], -#nj_tiles_scale_1 .option[data-value="YlGnBu"], -#nj_tiles_scale_2 .option[data-value="YlGnBu"], -#nj_tiles_scale_3 .option[data-value="YlGnBu"], -#nj_tiles_scale_4 .option[data-value="YlGnBu"], -#nj_tiles_scale_5 .option[data-value="YlGnBu"], -#nj_heatmap_scale .option[data-value="YlGnBu"], -#nj_clade_scale .option[data-value="YlGnBu"] { - background: linear-gradient(to right, #FFFFD9 0%, #FFFFD9 11.1111%, #EDF8B1 11.1111%, #EDF8B1 22.2222%, #C7E9B4 22.2222%, #C7E9B4 33.3333%, #7FCDBB 33.3333%, #7FCDBB 44.4444%, #41B6C4 44.4444%, #41B6C4 55.5556%, #1D91C0 55.5556%, #1D91C0 66.6667%, #225EA8 66.6667%, #225EA8 77.7778%, #253494 77.7778%, #253494 88.8889%, #081D58 88.8889%, #081D58 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="YlGn"], -#nj_tippoint_scale .option[data-value="YlGn"], -#nj_tiles_scale_1 .option[data-value="YlGn"], -#nj_tiles_scale_2 .option[data-value="YlGn"], -#nj_tiles_scale_3 .option[data-value="YlGn"], -#nj_tiles_scale_4 .option[data-value="YlGn"], -#nj_tiles_scale_5 .option[data-value="YlGn"], -#nj_heatmap_scale .option[data-value="YlGn"], -#nj_clade_scale .option[data-value="YlGn"] { - background: linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11.1111%, #F7FCB9 11.1111%, #F7FCB9 22.2222%, #D9F0A3 22.2222%, #D9F0A3 33.3333%, #ADDD8E 33.3333%, #ADDD8E 44.4444%, #78C679 44.4444%, #78C679 55.5556%, #41AB5D 55.5556%, #41AB5D 66.6667%, #238443 66.6667%, #238443 77.7778%, #006837 77.7778%, #006837 88.8889%, #004529 88.8889%, #004529 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="Reds"], -#nj_tippoint_scale .option[data-value="Reds"], -#nj_tiles_scale_1 .option[data-value="Reds"], -#nj_tiles_scale_2 .option[data-value="Reds"], -#nj_tiles_scale_3 .option[data-value="Reds"], -#nj_tiles_scale_4 .option[data-value="Reds"], -#nj_tiles_scale_5 .option[data-value="Reds"], -#nj_heatmap_scale .option[data-value="Reds"], -#nj_clade_scale .option[data-value="Reds"] { - background: linear-gradient(to right, #FFF5F0 0%, #FFF5F0 11.1111%, #FEE0D2 11.1111%, #FEE0D2 22.2222%, #FCBBA1 22.2222%, #FCBBA1 33.3333%, #FC9272 33.3333%, #FC9272 44.4444%, #FB6A4A 44.4444%, #FB6A4A 55.5556%, #EF3B2C 55.5556%, #EF3B2C 66.6667%, #CB181D 66.6667%, #CB181D 77.7778%, #A50F15 77.7778%, #A50F15 88.8889%, #67000D 88.8889%, #67000D 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="RdPu"], -#nj_tippoint_scale .option[data-value="RdPu"], -#nj_tiles_scale_1 .option[data-value="RdPu"], -#nj_tiles_scale_2 .option[data-value="RdPu"], -#nj_tiles_scale_3 .option[data-value="RdPu"], -#nj_tiles_scale_4 .option[data-value="RdPu"], -#nj_tiles_scale_5 .option[data-value="RdPu"], -#nj_heatmap_scale .option[data-value="RdPu"], -#nj_clade_scale .option[data-value="RdPu"] { - background: linear-gradient(to right, #FFF7F3 0%, #FFF7F3 11.1111%, #FDE0DD 11.1111%, #FDE0DD 22.2222%, #FCC5C0 22.2222%, #FCC5C0 33.3333%, #FA9FB5 33.3333%, #FA9FB5 44.4444%, #F768A1 44.4444%, #F768A1 55.5556%, #DD3497 55.5556%, #DD3497 66.6667%, #AE017E 66.6667%, #AE017E 77.7778%, #7A0177 77.7778%, #7A0177 88.8889%, #49006A 88.8889%, #49006A 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="Purples"], -#nj_tippoint_scale .option[data-value="Purples"], -#nj_tiles_scale_1 .option[data-value="Purples"], -#nj_tiles_scale_2 .option[data-value="Purples"], -#nj_tiles_scale_3 .option[data-value="Purples"], -#nj_tiles_scale_4 .option[data-value="Purples"], -#nj_tiles_scale_5 .option[data-value="Purples"], -#nj_heatmap_scale .option[data-value="Purples"], -#nj_clade_scale .option[data-value="Purples"] { - background: linear-gradient(to right, #FCFBFD 0%, #FCFBFD 11.1111%, #EFEDF5 11.1111%, #EFEDF5 22.2222%, #DADAEB 22.2222%, #DADAEB 33.3333%, #BCBDDC 33.3333%, #BCBDDC 44.4444%, #9E9AC8 44.4444%, #9E9AC8 55.5556%, #807DBA 55.5556%, #807DBA 66.6667%, #6A51A3 66.6667%, #6A51A3 77.7778%, #54278F 77.7778%, #54278F 88.8889%, #3F007D 88.8889%, #3F007D 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="PuRd"], -#nj_tippoint_scale .option[data-value="PuRd"], -#nj_tiles_scale_1 .option[data-value="PuRd"], -#nj_tiles_scale_2 .option[data-value="PuRd"], -#nj_tiles_scale_3 .option[data-value="PuRd"], -#nj_tiles_scale_4 .option[data-value="PuRd"], -#nj_tiles_scale_5 .option[data-value="PuRd"], -#nj_heatmap_scale .option[data-value="PuRd"], -#nj_clade_scale .option[data-value="PuRd"] { - background: linear-gradient(to right, #F7F4F9 0%, #F7F4F9 11.1111%, #E7E1EF 11.1111%, #E7E1EF 22.2222%, #D4B9DA 22.2222%, #D4B9DA 33.3333%, #C994C7 33.3333%, #C994C7 44.4444%, #DF65B0 44.4444%, #DF65B0 55.5556%, #E7298A 55.5556%, #E7298A 66.6667%, #CE1256 66.6667%, #CE1256 77.7778%, #980043 77.7778%, #980043 88.8889%, #67001F 88.8889%, #67001F 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="PuBuGn"], -#nj_tippoint_scale .option[data-value="PuBuGn"], -#nj_tiles_scale_1 .option[data-value="PuBuGn"], -#nj_tiles_scale_2 .option[data-value="PuBuGn"], -#nj_tiles_scale_3 .option[data-value="PuBuGn"], -#nj_tiles_scale_4 .option[data-value="PuBuGn"], -#nj_tiles_scale_5 .option[data-value="PuBuGn"], -#nj_heatmap_scale .option[data-value="PuBuGn"], -#nj_clade_scale .option[data-value="PuBuGn"] { - background: linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11.1111%, #ECE2F0 11.1111%, #ECE2F0 22.2222%, #D0D1E6 22.2222%, #D0D1E6 33.3333%, #A6BDDB 33.3333%, #A6BDDB 44.4444%, #67A9CF 44.4444%, #67A9CF 55.5556%, #3690C0 55.5556%, #3690C0 66.6667%, #02818A 66.6667%, #02818A 77.7778%, #016C59 77.7778%, #016C59 88.8889%, #014636 88.8889%, #014636 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="PuBu"], -#nj_tippoint_scale .option[data-value="PuBu"], -#nj_tiles_scale_1 .option[data-value="PuBu"], -#nj_tiles_scale_2 .option[data-value="PuBu"], -#nj_tiles_scale_3 .option[data-value="PuBu"], -#nj_tiles_scale_4 .option[data-value="PuBu"], -#nj_tiles_scale_5 .option[data-value="PuBu"], -#nj_heatmap_scale .option[data-value="PuBu"], -#nj_clade_scale .option[data-value="PuBu"] { - background: linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11.1111%, #ECE7F2 11.1111%, #ECE7F2 22.2222%, #D0D1E6 22.2222%, #D0D1E6 33.3333%, #A6BDDB 33.3333%, #A6BDDB 44.4444%, #74A9CF 44.4444%, #74A9CF 55.5556%, #3690C0 55.5556%, #3690C0 66.6667%, #0570B0 66.6667%, #0570B0 77.7778%, #045A8D 77.7778%, #045A8D 88.8889%, #023858 88.8889%, #023858 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="OrRd"], -#nj_tippoint_scale .option[data-value="OrRd"], -#nj_tiles_scale_1 .option[data-value="OrRd"], -#nj_tiles_scale_2 .option[data-value="OrRd"], -#nj_tiles_scale_3 .option[data-value="OrRd"], -#nj_tiles_scale_4 .option[data-value="OrRd"], -#nj_tiles_scale_5 .option[data-value="OrRd"], -#nj_heatmap_scale .option[data-value="OrRd"], -#nj_clade_scale .option[data-value="OrRd"] { - background: linear-gradient(to right, #FFF7EC 0%, #FFF7EC 11.1111%, #FEE8C8 11.1111%, #FEE8C8 22.2222%, #FDD49E 22.2222%, #FDD49E 33.3333%, #FDBB84 33.3333%, #FDBB84 44.4444%, #FC8D59 44.4444%, #FC8D59 55.5556%, #EF6548 55.5556%, #EF6548 66.6667%, #D7301F 66.6667%, #D7301F 77.7778%, #B30000 77.7778%, #B30000 88.8889%, #7F0000 88.8889%, #7F0000 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="Oranges"], -#nj_tippoint_scale .option[data-value="Oranges"], -#nj_tiles_scale_1 .option[data-value="Oranges"], -#nj_tiles_scale_2 .option[data-value="Oranges"], -#nj_tiles_scale_3 .option[data-value="Oranges"], -#nj_tiles_scale_4 .option[data-value="Oranges"], -#nj_tiles_scale_5 .option[data-value="Oranges"], -#nj_heatmap_scale .option[data-value="Oranges"], -#nj_clade_scale .option[data-value="Oranges"] { - background: linear-gradient(to right, #FFF5EB 0%, #FFF5EB 11.1111%, #FEE6CE 11.1111%, #FEE6CE 22.2222%, #FDD0A2 22.2222%, #FDD0A2 33.3333%, #FDAE6B 33.3333%, #FDAE6B 44.4444%, #FD8D3C 44.4444%, #FD8D3C 55.5556%, #F16913 55.5556%, #F16913 66.6667%, #D94801 66.6667%, #D94801 77.7778%, #A63603 77.7778%, #A63603 88.8889%, #7F2704 88.8889%, #7F2704 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="Greys"], -#nj_tippoint_scale .option[data-value="Greys"], -#nj_tiles_scale_1 .option[data-value="Greys"], -#nj_tiles_scale_2 .option[data-value="Greys"], -#nj_tiles_scale_3 .option[data-value="Greys"], -#nj_tiles_scale_4 .option[data-value="Greys"], -#nj_tiles_scale_5 .option[data-value="Greys"], -#nj_heatmap_scale .option[data-value="Greys"], -#nj_clade_scale .option[data-value="Greys"] { - background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 11.1111%, #F0F0F0 11.1111%, #F0F0F0 22.2222%, #D9D9D9 22.2222%, #D9D9D9 33.3333%, #BDBDBD 33.3333%, #BDBDBD 44.4444%, #969696 44.4444%, #969696 55.5556%, #737373 55.5556%, #737373 66.6667%, #525252 66.6667%, #525252 77.7778%, #252525 77.7778%, #252525 88.8889%, #000000 88.8889%, #000000 100%); - color: white; -} - -#nj_tiplab_scale .option[data-value="Greens"], -#nj_tippoint_scale .option[data-value="Greens"], -#nj_tiles_scale_1 .option[data-value="Greens"], -#nj_tiles_scale_2 .option[data-value="Greens"], -#nj_tiles_scale_3 .option[data-value="Greens"], -#nj_tiles_scale_4 .option[data-value="Greens"], -#nj_tiles_scale_5 .option[data-value="Greens"], -#nj_heatmap_scale .option[data-value="Greens"], -#nj_clade_scale .option[data-value="Greens"] { - background: linear-gradient(to right, #F7FCF5 0%, #F7FCF5 11.1111%, #E5F5E0 11.1111%, #E5F5E0 22.2222%, #C7E9C0 22.2222%, #C7E9C0 33.3333%, #A1D99B 33.3333%, #A1D99B 44.4444%, #74C476 44.4444%, #74C476 55.5556%, #41AB5D 55.5556%, #41AB5D 66.6667%, #238B45 66.6667%, #238B45 77.7778%, #006D2C 77.7778%, #006D2C 88.8889%, #00441B 88.8889%, #00441B 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="GnBu"], -#nj_tippoint_scale .option[data-value="GnBu"], -#nj_tiles_scale_1 .option[data-value="GnBu"], -#nj_tiles_scale_2 .option[data-value="GnBu"], -#nj_tiles_scale_3 .option[data-value="GnBu"], -#nj_tiles_scale_4 .option[data-value="GnBu"], -#nj_tiles_scale_5 .option[data-value="GnBu"], -#nj_heatmap_scale .option[data-value="GnBu"], -#nj_clade_scale .option[data-value="GnBu"] { - background: linear-gradient(to right, #F7FCF0 0%, #F7FCF0 11.1111%, #E0F3DB 11.1111%, #E0F3DB 22.2222%, #CCEBC5 22.2222%, #CCEBC5 33.3333%, #A8DDB5 33.3333%, #A8DDB5 44.4444%, #7BCCC4 44.4444%, #7BCCC4 55.5556%, #4EB3D3 55.5556%, #4EB3D3 66.6667%, #2B8CBE 66.6667%, #2B8CBE 77.7778%, #0868AC 77.7778%, #0868AC 88.8889%, #084081 88.8889%, #084081 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="BuPu"], -#nj_tippoint_scale .option[data-value="BuPu"], -#nj_tiles_scale_1 .option[data-value="BuPu"], -#nj_tiles_scale_2 .option[data-value="BuPu"], -#nj_tiles_scale_3 .option[data-value="BuPu"], -#nj_tiles_scale_4 .option[data-value="BuPu"], -#nj_tiles_scale_5 .option[data-value="BuPu"], -#nj_heatmap_scale .option[data-value="BuPu"], -#nj_clade_scale .option[data-value="BuPu"] { - background: linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11.1111%, #E0ECF4 11.1111%, #E0ECF4 22.2222%, #BFD3E6 22.2222%, #BFD3E6 33.3333%, #9EBCDA 33.3333%, #9EBCDA 44.4444%, #8C96C6 44.4444%, #8C96C6 55.5556%, #8C6BB1 55.5556%, #8C6BB1 66.6667%, #88419D 66.6667%, #88419D 77.7778%, #810F7C 77.7778%, #810F7C 88.8889%, #4D004B 88.8889%, #4D004B 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="BuGn"], -#nj_tippoint_scale .option[data-value="BuGn"], -#nj_tiles_scale_1 .option[data-value="BuGn"], -#nj_tiles_scale_2 .option[data-value="BuGn"], -#nj_tiles_scale_3 .option[data-value="BuGn"], -#nj_tiles_scale_4 .option[data-value="BuGn"], -#nj_tiles_scale_5 .option[data-value="BuGn"], -#nj_heatmap_scale .option[data-value="BuGn"], -#nj_clade_scale .option[data-value="BuGn"] { - background: linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11.1111%, #E5F5F9 11.1111%, #E5F5F9 22.2222%, #CCECE6 22.2222%, #CCECE6 33.3333%, #99D8C9 33.3333%, #99D8C9 44.4444%, #66C2A4 44.4444%, #66C2A4 55.5556%, #41AE76 55.5556%, #41AE76 66.6667%, #238B45 66.6667%, #238B45 77.7778%, #006D2C 77.7778%, #006D2C 88.8889%, #00441B 88.8889%, #00441B 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="Blues"], -#nj_tippoint_scale .option[data-value="Blues"], -#nj_tiles_scale_1 .option[data-value="Blues"], -#nj_tiles_scale_2 .option[data-value="Blues"], -#nj_tiles_scale_3 .option[data-value="Blues"], -#nj_tiles_scale_4 .option[data-value="Blues"], -#nj_tiles_scale_5 .option[data-value="Blues"], -#nj_heatmap_scale .option[data-value="Blues"], -#nj_clade_scale .option[data-value="Blues"] { - background: linear-gradient(to right, #F7FBFF 0%, #F7FBFF 11.1111%, #DEEBF7 11.1111%, #DEEBF7 22.2222%, #C6DBEF 22.2222%, #C6DBEF 33.3333%, #9ECAE1 33.3333%, #9ECAE1 44.4444%, #6BAED6 44.4444%, #6BAED6 55.5556%, #4292C6 55.5556%, #4292C6 66.6667%, #2171B5 66.6667%, #2171B5 77.7778%, #08519C 77.7778%, #08519C 88.8889%, #08306B 88.8889%, #08306B 100%); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="magma"], -#nj_tippoint_scale .option[data-value="magma"], -#nj_tiles_scale_1 .option[data-value="magma"], -#nj_tiles_scale_2 .option[data-value="magma"], -#nj_tiles_scale_3 .option[data-value="magma"], -#nj_tiles_scale_4 .option[data-value="magma"], -#nj_tiles_scale_5 .option[data-value="magma"], -#nj_heatmap_scale .option[data-value="magma"] { - background: linear-gradient(to right, #000004FF, #07071DFF, #160F3BFF, #29115AFF, #400F73FF, #56147DFF, #6B1D81FF, #802582FF, #952C80FF, #AB337CFF, #C03A76FF, #D6456CFF, #E85362FF, #F4685CFF, #FA815FFF, #FD9A6AFF, #FEB37BFF, #FECC8FFF, #FDE4A6FF, #FCFDBFFF); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="inferno"], -#nj_tippoint_scale .option[data-value="inferno"], -#nj_tiles_scale_1 .option[data-value="inferno"], -#nj_tiles_scale_2 .option[data-value="inferno"], -#nj_tiles_scale_3 .option[data-value="inferno"], -#nj_tiles_scale_4 .option[data-value="inferno"], -#nj_tiles_scale_5 .option[data-value="inferno"], -#nj_heatmap_scale .option[data-value="inferno"] { - background: linear-gradient(to right, #000004FF, #08051EFF, #190C3EFF, #300A5BFF, #460B6AFF, #5C126EFF, #711A6EFF, #87216BFF, #9C2964FF, #B1325AFF, #C43C4EFF, #D64B40FF, #E55C30FF, #F17020FF, #F8870EFF, #FCA007FF, #FBB91FFF, #F7D340FF, #F1ED6FFF, #FCFFA4FF); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="plasma"], -#nj_tippoint_scale .option[data-value="plasma"], -#nj_tiles_scale_1 .option[data-value="plasma"], -#nj_tiles_scale_2 .option[data-value="plasma"], -#nj_tiles_scale_3 .option[data-value="plasma"], -#nj_tiles_scale_4 .option[data-value="plasma"], -#nj_tiles_scale_5 .option[data-value="plasma"], -#nj_heatmap_scale .option[data-value="plasma"] { - background: linear-gradient(to right, #0D0887FF, #2D0594FF, #44039EFF, #5901A5FF, #6F00A8FF, #8305A7FF, #9512A1FF, #A72197FF, #B6308BFF, #C5407EFF, #D14E72FF, #DD5E66FF, #E76E5BFF, #EF7F4FFF, #F79044FF, #FBA238FF, #FEB72DFF, #FDCB26FF, #F7E225FF, #F0F921FF); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="viridis"], -#nj_tippoint_scale .option[data-value="viridis"], -#nj_tiles_scale_1 .option[data-value="viridis"], -#nj_tiles_scale_2 .option[data-value="viridis"], -#nj_tiles_scale_3 .option[data-value="viridis"], -#nj_tiles_scale_4 .option[data-value="viridis"], -#nj_tiles_scale_5 .option[data-value="viridis"], -#nj_heatmap_scale .option[data-value="viridis"] { - background: linear-gradient(to right, #440154FF, #481568FF, #482677FF, #453781FF, #3F4788FF, #39558CFF, #32648EFF, #2D718EFF, #287D8EFF, #238A8DFF, #1F968BFF, #20A386FF, #29AF7FFF, #3CBC75FF, #56C667FF, #74D055FF, #94D840FF, #B8DE29FF, #DCE318FF, #FDE725FF); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="cividis"], -#nj_tippoint_scale .option[data-value="cividis"], -#nj_tiles_scale_1 .option[data-value="cividis"], -#nj_tiles_scale_2 .option[data-value="cividis"], -#nj_tiles_scale_3 .option[data-value="cividis"], -#nj_tiles_scale_4 .option[data-value="cividis"], -#nj_tiles_scale_5 .option[data-value="cividis"], -#nj_heatmap_scale .option[data-value="cividis"] { - background: linear-gradient(to right, #00204DFF, #002A64FF, #00336FFF, #1F3C6DFF, #35466BFF, #444F6BFF, #53596CFF, #5F636EFF, #6B6C71FF, #777776FF, #838079FF, #908B79FF, #9D9677FF, #ABA074FF, #B9AC70FF, #C7B76BFF, #D7C463FF, #E5D05AFF, #F5DD4DFF, #FFEA46FF); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="rocket"], -#nj_tippoint_scale .option[data-value="rocket"], -#nj_tiles_scale_1 .option[data-value="rocket"], -#nj_tiles_scale_2 .option[data-value="rocket"], -#nj_tiles_scale_3 .option[data-value="rocket"], -#nj_tiles_scale_4 .option[data-value="rocket"], -#nj_tiles_scale_5 .option[data-value="rocket"], -#nj_heatmap_scale .option[data-value="rocket"] { - background: linear-gradient(to right, #03051AFF, #150E26FF, #281535FF, #3C1A42FF, #511E4DFF, #661F54FF, #7C1F5AFF, #931C5BFF, #AA185AFF, #C11754FF, #D3214BFF, #E33541FF, #ED4E3EFF, #F26847FF, #F4815AFF, #F5986FFF, #F6AE86FF, #F7C2A2FF, #F8D7BFFF, #FAEBDDFF); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="mako"], -#nj_tippoint_scale .option[data-value="mako"], -#nj_tiles_scale_1 .option[data-value="mako"], -#nj_tiles_scale_2 .option[data-value="mako"], -#nj_tiles_scale_3 .option[data-value="mako"], -#nj_tiles_scale_4 .option[data-value="mako"], -#nj_tiles_scale_5 .option[data-value="mako"], -#nj_heatmap_scale .option[data-value="mako"] { - background: linear-gradient(to right, #0B0405FF, #190E19FF, #27182DFF, #312142FF, #3A2C59FF, #3F3770FF, #414388FF, #3C5397FF, #38639DFF, #3573A1FF, #3482A4FF, #3491A8FF, #35A0ABFF, #3AAEADFF, #46BEADFF, #5ACCADFF, #7ED7AFFF, #A4E0BBFF, #C3E9CEFF, #DEF5E5FF); - color: white; - margin-bottom: 2px; -} - -#nj_tiplab_scale .option[data-value="turbo"], -#nj_tippoint_scale .option[data-value="turbo"], -#nj_tiles_scale_1 .option[data-value="turbo"], -#nj_tiles_scale_2 .option[data-value="turbo"], -#nj_tiles_scale_3 .option[data-value="turbo"], -#nj_tiles_scale_4 .option[data-value="turbo"], -#nj_tiles_scale_5 .option[data-value="turbo"], -#nj_heatmap_scale .option[data-value="turbo"] { - background: linear-gradient(to right, #30123BFF, #3F3994FF, #455ED2FF, #4681F7FF, #3AA2FCFF, #23C3E4FF, #18DEC1FF, #2CF09EFF, #5BFB72FF, #8EFF49FF, #B5F836FF, #D6E635FF, #EFCD3AFF, #FCB036FF, #FD8A26FF, #F36215FF, #E14209FF, #C82803FF, #A51301FF, #7A0403FF); - color: white; -} - -#nj_tiplab_scale .option[data-value="Spectral"], -#nj_tippoint_scale .option[data-value="Spectral"], -#nj_tiles_scale_1 .option[data-value="Spectral"], -#nj_tiles_scale_2 .option[data-value="Spectral"], -#nj_tiles_scale_3 .option[data-value="Spectral"], -#nj_tiles_scale_4 .option[data-value="Spectral"], -#nj_tiles_scale_5 .option[data-value="Spectral"], -#nj_heatmap_scale .option[data-value="Spectral"] { - background: linear-gradient(to right, #9E0142, #D53E4F, #F46D43, #FDAE61, #FEE08B, #FFFFBF, #E6F598, #ABDDA4, #66C2A5, #3288BD, #5E4FA2); - color: black; - margin-bottom: 2px; +.textinput_var .form-group.shiny-input-container { + padding: 0px 0px 0px 0px; } -#nj_tiplab_scale .option[data-value="RdYlGn"], -#nj_tippoint_scale .option[data-value="RdYlGn"], -#nj_tiles_scale_1 .option[data-value="RdYlGn"], -#nj_tiles_scale_2 .option[data-value="RdYlGn"], -#nj_tiles_scale_3 .option[data-value="RdYlGn"], -#nj_tiles_scale_4 .option[data-value="RdYlGn"], -#nj_tiles_scale_5 .option[data-value="RdYlGn"], -#nj_heatmap_scale .option[data-value="RdYlGn"] { - background: linear-gradient(to right, #A50026, #D73027, #F46D43, #FDAE61, #FEE08B, #FFFFBF, #D9EF8B, #A6D96A, #66BD63, #1A9850, #006837); - color: black; - margin-bottom: 2px; +button#load.pulsating-button.btn.btn-default.action-button.shiny-bound-input { + background: #20E6E5; + color: #000000; + width: 40px; } -#nj_tiplab_scale .option[data-value="RdYlBu"], -#nj_tippoint_scale .option[data-value="RdYlBu"], -#nj_tiles_scale_1 .option[data-value="RdYlBu"], -#nj_tiles_scale_2 .option[data-value="RdYlBu"], -#nj_tiles_scale_3 .option[data-value="RdYlBu"], -#nj_tiles_scale_4 .option[data-value="RdYlBu"], -#nj_tiles_scale_5 .option[data-value="RdYlBu"], -#nj_heatmap_scale .option[data-value="RdYlBu"] { - background: linear-gradient(to right, #A50026, #D73027, #F46D43, #FDAE61, #FEE090, #FFFFBF, #E0F3F8, #ABD9E9, #74ADD1, #4575B4, #313695); - color: black; - margin-bottom: 2px; +#load .fas.fa-rotate { + position: relative; + left: 0px !important; } -#nj_tiplab_scale .option[data-value="RdGy"], -#nj_tippoint_scale .option[data-value="RdGy"], -#nj_tiles_scale_1 .option[data-value="RdGy"], -#nj_tiles_scale_2 .option[data-value="RdGy"], -#nj_tiles_scale_3 .option[data-value="RdGy"], -#nj_tiles_scale_4 .option[data-value="RdGy"], -#nj_tiles_scale_5 .option[data-value="RdGy"], -#nj_heatmap_scale .option[data-value="RdGy"] { - background: linear-gradient(to right, #67001F, #B2182B, #D6604D, #F4A582, #FDDBC7, #FFFFFF, #E0E0E0, #BABABA, #878787, #4D4D4D, #1A1A1A); - color: black; - margin-bottom: 2px; +.shiny-input-container input[type="text"] { + border-radius: 5px; + } -#nj_tiplab_scale .option[data-value="RdBu"], -#nj_tippoint_scale .option[data-value="RdBu"], -#nj_tiles_scale_1 .option[data-value="RdBu"], -#nj_tiles_scale_2 .option[data-value="RdBu"], -#nj_tiles_scale_3 .option[data-value="RdBu"], -#nj_tiles_scale_4 .option[data-value="RdBu"], -#nj_tiles_scale_5 .option[data-value="RdBu"], -#nj_heatmap_scale .option[data-value="RdBu"] { - background: linear-gradient(to right, #67001F, #B2182B, #D6604D, #F4A582, #FDDBC7, #F7F7F7, #D1E5F0, #92C5DE, #4393C3, #2166AC, #053061); - color: black; - margin-bottom: 2px; +.box.box-solid.box-primary>.box-header { + background:#282F38; } -#nj_tiplab_scale .option[data-value="PuOr"], -#nj_tippoint_scale .option[data-value="PuOr"], -#nj_tiles_scale_1 .option[data-value="PuOr"], -#nj_tiles_scale_2 .option[data-value="PuOr"], -#nj_tiles_scale_3 .option[data-value="PuOr"], -#nj_tiles_scale_4 .option[data-value="PuOr"], -#nj_tiles_scale_5 .option[data-value="PuOr"], -#nj_heatmap_scale .option[data-value="PuOr"] { - background: linear-gradient(to right, #7F3B08, #B35806, #E08214, #FDB863, #FEE0B6, #F7F7F7, #D8DAEB, #B2ABD2, #8073AC, #542788, #2D004B); - color: black; - margin-bottom: 2px; +.box.box-solid.box-primary { + background:#282F38; } -#nj_tiplab_scale .option[data-value="PRGn"], -#nj_tippoint_scale .option[data-value="PRGn"], -#nj_tiles_scale_1 .option[data-value="PRGn"], -#nj_tiles_scale_2 .option[data-value="PRGn"], -#nj_tiles_scale_3 .option[data-value="PRGn"], -#nj_tiles_scale_4 .option[data-value="PRGn"], -#nj_tiles_scale_5 .option[data-value="PRGn"], -#nj_heatmap_scale .option[data-value="PRGn"] { - background: linear-gradient(to right, #40004B, #762A83, #9970AB, #C2A5CF, #E7D4E8, #F7F7F7, #D9F0D3, #A6DBA0, #5AAE61, #1B7837, #00441B); - color: black; - margin-bottom: 2px; +.image { + height: 240px; } -#nj_tiplab_scale .option[data-value="PiYG"], -#nj_tippoint_scale .option[data-value="PiYG"], -#nj_tiles_scale_1 .option[data-value="PiYG"], -#nj_tiles_scale_2 .option[data-value="PiYG"], -#nj_tiles_scale_3 .option[data-value="PiYG"], -#nj_tiles_scale_4 .option[data-value="PiYG"], -#nj_tiles_scale_5 .option[data-value="PiYG"], -#nj_heatmap_scale .option[data-value="PiYG"] { - background: linear-gradient(to right, #8E0152, #C51B7D, #DE77AE, #F1B6DA, #FDE0EF, #F7F7F7, #E6F5D0, #B8E186, #7FBC41, #4D9221, #276419); - color: black; - margin-bottom: 2px; +.loci_table .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { + color: #ffffff !important; } -#nj_tiplab_scale .option[data-value="BrBG"], -#nj_tippoint_scale .option[data-value="BrBG"], -#nj_tiles_scale_1 .option[data-value="BrBG"], -#nj_tiles_scale_2 .option[data-value="BrBG"], -#nj_tiles_scale_3 .option[data-value="BrBG"], -#nj_tiles_scale_4 .option[data-value="BrBG"], -#nj_tiles_scale_5 .option[data-value="BrBG"], -#nj_heatmap_scale .option[data-value="BrBG"] { - background: linear-gradient(to right, #543005, #8C510A, #BF812D, #DFC27D, #F6E8C3, #F5F5F5, #C7EAE5, #80CDC1, #35978F, #01665E, #003C30); - color: black; - margin-bottom: 2px; +input.form-control.pickr-color { + text-align: center; + font-size: 11px; } -.pulsating-button:hover { - animation: none; +.checkbox_bg .checkbox { + margin-top: 25px !important; } -.box.box-solid.box-info{ - background: #282F38; - margin-top: 20px; - position: relative; - left: 30px; +.form-group { + margin-bottom: 0px; } -.box.box-solid.box-info, .box.box-info { - border-color: #ffffff; - border-left-color: #ffffff; - border-right-color: #ffffff; - border-top-color: #ffffff; - border-radius: 7px; -} +/* Icons */ -#nj_layout_ctrl, #nj_label_ctrl, #nj_elements_ctrl { - width: 134px; - margin-left: 25px; - margin-bottom: 5px; - margin-top: 10px; - height: 40px; - text-align-last: justify; - font-size: larger; +i.fas { + margin-right: 5px; } -#nj_layout_ctrl { - margin-top: 20px !important; +i.fas.fa-rotate { + position: relative; + left: -5px; } - - -h1, h2, h3, h4, h5, p, body { - font-family: 'Liberation Sans', sans-serif; +i.far { + margin-right: 5px; } -#nj_field img { - border-radius: 10px; +i.fas.fa-sliders { + margin-right: 0px; + margin-top: 5px; } - -label { - color: white; + +i.fas.fa-xmark, i.fas.fa-download, i.far.fa-bookmark { + margin-right: 0px; } -.white { - color: white; - font-size: 16px; +i.fas.fa-triangle-exclamation { + color: yellow; } -.main-sidebar .sidebar .sidebar-menu .treeview-menu a { - color: #ffffff !important; - margin-left: 25px; - border-radius: 20px; - margin-top: 7px; - margin-bottom: 7px; +i.far.fa-file-lines { + margin-left: 2px; + margin-right: 8px; } -.main-sidebar .sidebar .sidebar-menu a { - border: none; +i.far.fa-pen-to-square { + position: relative; + left: -3px } -.main-sidebar .sidebar .sidebar-menu .treeview-menu li.active a { - color: #000000 !important; - border-radius: 20px; - margin-top: 7px; - margin-bottom: 7px; -} +/* Database */ -.main-sidebar .sidebar .sidebar-menu .treeview-menu li:hover a { - color: #000000 !important; - border-radius: 20px; - margin-top: 7px; - margin-bottom: 7px; +div#db_distancematrix.rhandsontable { + font-size: 11px; } -.main-sidebar .sidebar .sidebar-menu li:hover a { - color: #000000; - border: none; +button#download_cgMLST { + font-size: 14px; + height: 34px; + background: #20E6E5; + color: #000000; } -file.select { - background-color: white; +button#download_cgMLST i.fas.fa-download { + margin-right: 5px !important } -#include_edge, #include_node { - width: 20px; - height: 20px; - margin-top: 13px; +#show_cust_var { + color:black; + font-size: 14px; } -.selectize-control.single .selectize-input:after { - right: 10px; +button#download_distmatrix_bttn { + font-size: 14px; + height: 34px; + background: #20E6E5; + color: #000000; + position: absolute; + top: -50px; } -#scheme_db .selectize-control { - font-size: 12px; +button#download_entry_table_bttn { + height: 34px; + background: #20E6E5; + color: #000000; } -.scheme_start { - margin-left: -20px; +button#download_schemeinfo_bttn { + height: 28px; + background: #20E6E5; + color: #000000; + margin-top: 19px; + margin-left: 10px; } -.irs--shiny .irs-min, -.irs--shiny .irs-max { - top: 0; - padding: 1px 3px; - text-shadow: none; - background-color: rgba(0, 0, 0, 0.2); - border-radius: 3px; - font-size: 10px; - line-height: 1.333; - color: white +button#download_loci_info_bttn { + height: 28px; + background: #20E6E5; + color: #000000; + margin-top: 19px; + margin-left: 10px; } -i.fas { - margin-right: 5px; +button#download_na_matrix_bttn { + height: 34px; + background: #20E6E5; + color: #000000; + margin-top: 14px; + margin-left: 10px; } -i.fas.fa-rotate { - position: relative; - left: -5px; +button#edit_button.btn.btn-default.action-button.shiny-bound-input { + background: #20E6E5; + color: #000000; } -#reload_db i.fas.fa-rotate { - position: relative; - left: -5px; - top: -2px; -} +/* Typing */ -i.far { - margin-right: 5px; +.append_table { + margin-top: 0px; + margin-left: 3px } -i.fas.fa-sliders { - margin-right: 0px; - margin-top: 5px; +span#progress_bar-title.progress-text { + color: white; + font-size: 13px; + font-weight: normal; } - -i.fas.fa-xmark, i.fas.fa-download, i.far.fa-bookmark { - margin-right: 0px; + +div#progress_bar.progress-bar { + font-size:13px; + line-height: 30px; } -i.fas.fa-triangle-exclamation { - color: yellow; +.progress { + border-radius: 5px; + height: 30px; + line-height: 30px; } -i.far.fa-file-lines { - margin-left: 2px; - margin-right: 8px; +/* Visualization MST */ + +@keyframes pulsate { + 0% { transform: scale(1); } + 50% { transform: scale(1.1); } + 100% { transform: scale(1); } } -i.far.fa-pen-to-square { - position: relative; - left: -3px +.pulsating-button { + animation: pulsate 1s ease infinite; } -button#reload_db.btn.btn-default.action-button.shiny-bound-input { - height: 30px; - width: 30px; - position: relative; - left: -20px; +.pulsating-button:hover { + animation: none; } -button#edit_button.btn.btn-default.action-button.shiny-bound-input { - background: #20E6E5; - color: #000000; +#mst_ratio { + position: absolute; + right: 36px; + top: 23px; } -button#save_plot_jpeg { - font-size: 14px; - height: 34px; +button#mst_general_menu { + height: 27px; + width: 27px; background: #20E6E5; color: #000000; - position: relative; - top: 10px; - right: 20px + border-radius: 5px; + margin-top: 2px; } -button#save_plot_png { - font-size: 14px; - height: 34px; +button#mst_analysis_menu { + height: 27px; + width: 27px; background: #20E6E5; color: #000000; - position: relative; - top: 10px; - right: 20px + border-radius: 5px; + margin-top: -17px } -button#save_plot_bmp { - font-size: 14px; +button#mst_node_menu { height: 34px; background: #20E6E5; color: #000000; - position: relative; - top: 10px; - right: 20px; + border-radius: 5px; + margin-top: 3px; } -button#save_plot_html_bttn { - font-size: 14px; +button#mst_edge_menu { height: 34px; background: #20E6E5; color: #000000; - position: relative; - top: 10px; - right: 20px; + border-radius: 5px; } -button#download_nj_bttn { - font-size: 14px; +button#mst_title_menu { height: 34px; background: #20E6E5; color: #000000; - position: relative; - top: 10px; - right: 20px; + margin-top: 20px; + border-radius: 5px } -button#download_upgma_bttn { - font-size: 14px; +button#mst_edgelabel_menu { height: 34px; background: #20E6E5; color: #000000; - position: relative; - top: 10px; - right: 20px; + margin-top: 37px; + border-radius: 5px } -button#download_distmatrix_bttn { - font-size: 14px; +button#mst_edgecolor_menu { height: 34px; background: #20E6E5; color: #000000; - position: absolute; - top: -50px; + margin-top: 20px; + border-radius: 5px } -button#download_entry_table_bttn { +button#mst_subtitle_menu { height: 34px; background: #20E6E5; - color: #000000; -} - -button#download_schemeinfo_bttn { - height: 28px; - background: #20E6E5; color: #000000; - margin-top: 19px; - margin-left: 10px; + margin-top: 20px; + border-radius: 5px } -button#download_loci_info_bttn { - height: 28px; +button#mst_footer_menu { + height: 34px; background: #20E6E5; color: #000000; - margin-top: 19px; - margin-left: 10px; + margin-top: 20px; + border-radius: 5px } -button#download_na_matrix_bttn { +button#mst_label_menu { height: 34px; background: #20E6E5; color: #000000; - margin-top: 14px; - margin-left: 10px; + margin-top: 37px; + border-radius: 5px } -.irs.irs--shiny.js-irs-0 { - margin-right: -15px; +#mst_background_transparent { + margin-bottom: -6px !important; } -.irs.irs--shiny.js-irs-1 { - margin-right: -15px; +#mst_color_node { + margin-top: -17px } -.irs.irs--shiny.js-irs-2 { - margin-right: -15px; +#mst_shadow { + position: relative; + bottom: -1px; } -div#scheme_db .form-control, .selectize-input, .selectize-control.single .selectize-input { - border-color: #000000 !important; +#mst_edge_font_color { + margin-top: 17px } -#distmatrix_triangle { - margin-top: -35px; +#mst_scale_edges { + position: relative; + bottom: -1px; + margin-bottom: 30px } -#distmatrix_diag { - margin-top: -55px; +#mst_date_general_select .form-control { + height: 28px; + position: relative; + right: -22px } -#distmatrix_true { - margin-top: -15px; +#mst_operator_general_select { + height: 28px; + margin-top: -15px; + position: relative; + right: -22px; } -#rep_general { - margin-top: -13px; +#mst_institute_general_select { + height: 28px; + margin-top: -15px; + position: relative; + right: -22px } -#rep_analysis { - margin-top: -32px; +#mst_comm_general_select { + margin-top: -15px; + border-radius: 5px; + position: relative; + right: -22px } -#rep_plot_report { - margin-top: -51px; +/* Visualization NJ & UPGMA */ + +/* Classes*/ + +.label_sel { + margin-bottom: -16px; } -#mst_ratio { - position: absolute; - right: 36px; - top: 23px; +.slider { + margin-bottom: -6px; } -#nj_ratio { - position: absolute; - right: 36px; - top: 23px; +.slider_edge { + margin-top: -10px; } -#upgma_ratio { - position: absolute; - right: 36px; - top: 23px; +.sel-clade { + margin-left: 15px; + margin-block: -2px; } -.format { - position: absolute; - top: -16px; - width: -webkit-fill-available; +.sel-clade-scale { + margin-bottom: -14px; } -button#mst_general_menu { - height: 27px; - width: 27px; - background: #20E6E5; - color: #000000; - border-radius: 5px; - margin-top: 2px; +.divmid-sel { + margin-top: -10px; } -button#mst_analysis_menu { - height: 27px; - width: 27px; - background: #20E6E5; - color: #000000; - border-radius: 5px; - margin-top: -17px +.divmid-sel1 { + margin-top: -8px; } -button#download_report_bttn { - font-size: 14px; - height: 34px; - background: #20E6E5; - color: #000000; - position: relative; - top: -25px; +.tile1 { + position: absolute; + top: -17px; + right: 35px } -.tippy-tooltip.translucent-theme { - background-color: rgba(0,0,0,0.9); +.tile_select { + position: absolute; + top: -17px; } -#nj_v { - padding: initial; - margin-top: 3px; - width: 75px; - text-align: center; +.sel-tile-number { + margin-left: 14px; } -.arrow_move input::-webkit-inner-spin-button { - margin-right: 8px; +.tile-sel { + margin-left: -20px; + margin-top: -10px; } -#nj_h { - padding: initial; - margin-top: 3px; - width: 75px; - text-align: center; +.mat-switch { + margin-left: 15px; + margin-top: 25px; } -#upgma_v { - padding: initial; - margin-top: 3px; - width: 75px; - text-align: center; +.mat-switch-v { + margin-left: 25px; + margin-top: 15px; } -#upgma_h { - padding: initial; - margin-top: 3px; - width: 75px; - text-align: center; +.mat-switch-geom { + margin-top: 5px; + margin-left: 15px; } -#upgma_zoom irs.irs--shiny.js-irs-4.irs.irs-line { - width: 108px; +.mat-switch-lab { + margin-top: 25px; + margin-left: 15px; } -.textinput_var .form-group.shiny-input-container { - padding: 0px 0px 0px 0px; +.mat-switch-layout { + margin-left: 10px; + margin-top: 20px; } -#show_cust_var { - color:black; - font-size: 14px; +.mat-switch-re { + margin-left: 10px; + margin-top: 10px; + margin-block: -2px; } -button#load.pulsating-button.btn.btn-default.action-button.shiny-bound-input { - background: #20E6E5; - color: #000000; - width: 40px; +.mat-switch-align { + margin-top: 25px; + margin-left: -10px; } -#load .fas.fa-rotate { - position: relative; - left: 0px !important; +.material-switch>label.switch:before { + background: #20E6E5 !important; + border-radius: 8px; + content: ""; + height: 13px; + margin-top: -10px; + opacity: .3; + position: absolute; + transition: all .4s ease-in-out; + width: 40px; } -.shiny-input-container input[type="text"] { - border-radius: 5px; - +.material-switch>input[type=checkbox]:checked+label.switch:before { + opacity: 1; } -.box.box-solid.box-primary>.box-header { - background:#282F38; +.material-switch>label.switch:after { + background: #E6E6E6 !important; + border-radius: 1pc; + box-shadow: 0 0 5px rgba(0,0,0,.3); + content: ""; + height: 20px; + left: -4px; + margin-top: -10px; + position: absolute; + top: -4px; + transition: all .3s ease-in-out; + width: 20px; } -.box.box-solid.box-primary { - background:#282F38; +.ratio-sel { + margin-top: -20px; + margin-bottom: -40px; } -.image { - height: 240px; +.zoom-slider { + margin-top: 20px; + margin-bottom: 6px; } -.loci_table .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { - color: #ffffff !important; +.heatmap-picker { + margin-top: -10px; + margin-left: 2px; + margin-right: 30px; } -div#db_distancematrix.rhandsontable { - font-size: 11px; +#nj_heatmap_sel .filter-option-inner, +#nj_heatmap_sel .filter-option-inner { + text-align: center; } -button#download_cgMLST { - font-size: 14px; - height: 34px; - background: #20E6E5; - color: #000000; +#upgma_zoom irs.irs--shiny.js-irs-4.irs.irs-line { + width: 108px; } -button#download_cgMLST i.fas.fa-download { - margin-right: 5px !important +#nj_clade_scale { + margin-bottom:; 1px; } -span#progress_bar-title.progress-text { - color: white; - font-size: 13px; - font-weight: normal; +#nj_parentnode { + margin-left: 38px; + margin-top: -10px; } -div#progress_bar.progress-bar { - font-size:13px; - line-height: 30px; +#nj_layout_ctrl, #nj_label_ctrl, #nj_elements_ctrl { + width: 134px; + margin-left: 25px; + margin-bottom: 5px; + margin-top: 10px; + height: 40px; + text-align-last: justify; + font-size: larger; } -.progress { - border-radius: 5px; - height: 30px; - line-height: 30px; +#nj_layout_ctrl { + margin-top: 20px !important; } -button#mst_node_menu { - height: 34px; - background: #20E6E5; - color: #000000; - border-radius: 5px; - margin-top: 3px; +#nj_field img { + border-radius: 10px; } -button#mst_edge_menu { - height: 34px; - background: #20E6E5; - color: #000000; - border-radius: 5px; +#include_edge, #include_node { + width: 20px; + height: 20px; + margin-top: 13px; } -button#mst_title_menu { +button#save_plot_jpeg { + font-size: 14px; height: 34px; background: #20E6E5; color: #000000; - margin-top: 20px; - border-radius: 5px + position: relative; + top: 10px; + right: 20px } -button#mst_edgelabel_menu { +button#save_plot_png { + font-size: 14px; height: 34px; background: #20E6E5; color: #000000; - margin-top: 37px; - border-radius: 5px + position: relative; + top: 10px; + right: 20px } -button#mst_edgecolor_menu { +button#save_plot_bmp { + font-size: 14px; height: 34px; background: #20E6E5; color: #000000; - margin-top: 20px; - border-radius: 5px + position: relative; + top: 10px; + right: 20px; } -button#mst_subtitle_menu { +button#save_plot_html_bttn { + font-size: 14px; height: 34px; background: #20E6E5; color: #000000; - margin-top: 20px; - border-radius: 5px + position: relative; + top: 10px; + right: 20px; } -button#mst_footer_menu { +button#download_nj_bttn { + font-size: 14px; height: 34px; background: #20E6E5; color: #000000; - margin-top: 20px; - border-radius: 5px + position: relative; + top: 10px; + right: 20px; } -button#mst_label_menu { +button#download_upgma_bttn { + font-size: 14px; height: 34px; background: #20E6E5; color: #000000; - margin-top: 37px; - border-radius: 5px + position: relative; + top: 10px; + right: 20px; } -input.form-control.pickr-color { - text-align: center; - font-size: 11px; +#nj_ratio { + position: absolute; + right: 36px; + top: 23px; } -.checkbox_bg .checkbox { - margin-top: 25px !important; +#upgma_ratio { + position: absolute; + right: 36px; + top: 23px; } -#mst_background_transparent { - margin-bottom: -6px !important; +button#download_report_bttn { + font-size: 14px; + height: 34px; + background: #20E6E5; + color: #000000; + position: relative; + top: -25px; } -.ratio-sel { - margin-top: -20px; - margin-bottom: -40px; +#nj_v { + padding: initial; + margin-top: 3px; + width: 75px; + text-align: center; } -.label_sel { - margin-bottom: -16px; +#nj_h { + padding: initial; + margin-top: 3px; + width: 75px; + text-align: center; } -.slider { - margin-bottom: -6px; +#upgma_v { + padding: initial; + margin-top: 3px; + width: 75px; + text-align: center; } -.slider_edge { - margin-top: -10px; +#upgma_h { + padding: initial; + margin-top: 3px; + width: 75px; + text-align: center; } #nj_title_color { @@ -1278,34 +779,15 @@ input.form-control.pickr-color { margin-bottom: -10px; } -#mst_color_node { - margin-top: -17px -} - -#mst_shadow { - position: relative; - bottom: -1px; -} - #node_font_color { margin-top: 17px } -#mst_edge_font_color { - margin-top: 17px -} - #scale_nodes { position: relative; bottom: -1px } -#mst_scale_edges { - position: relative; - bottom: -1px; - margin-bottom: 30px -} - #nj_controls { margin-left: 25px; margin-top: 35px; @@ -1326,11 +808,6 @@ input.form-control.pickr-color { width: 100px; } -.zoom-slider { - margin-top: 20px; - margin-bottom: 6px; -} - #nj_color_mapping { margin-top: -7px; margin-bottom: 0px; @@ -1695,21 +1172,6 @@ button#nj_tile_menu_5 { margin-left: -5px } -.tile1 { - position: absolute; - top: -17px; - right: 35px -} - -.tile_select { - position: absolute; - top: -17px; -} - -.sel-tile-number { - margin-left: 14px; -} - #nj_heatmap_width { margin-top: 8px; } @@ -1779,12 +1241,6 @@ button#nj_tile_menu_5 { margin-left: -5px; } -.heatmap-picker { - margin-top: 0px; - margin-left: 3px; - margin-right: 30px; -} - #nj_nodepoint_show { margin-top: 18px; margin-left: -5px @@ -1921,322 +1377,860 @@ button#upgma_tile_menu_3 { border-radius: 5px } -button#upgma_tile_menu_4 { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px +button#upgma_tile_menu_4 { + height: 34px; + background: #20E6E5; + color: #000000; + margin-left: 15px; + margin-top: 21px; + border-radius: 5px +} + +button#upgma_tile_menu_5 { + height: 34px; + background: #20E6E5; + color: #000000; + margin-left: 15px; + margin-top: 21px; + border-radius: 5px +} + +#upgma_tippoint_color { + margin-bottom: 0px +} + +#upgma_nodepoint_color { + margin-bottom: 16px; +} + +#upgma_treescale_show { + margin-top: 17px; +} + +#upgma_tiles_show { + margin-top: 18px; + margin-left: -5px +} + +#upgma_tiles_show_2 { + margin-top: 18px; + margin-left: -5px +} + +#upgma_tiles_show_3 { + margin-top: 18px; + margin-left: -5px +} + +#upgma_tiles_show_4 { + margin-top: 18px; + margin-left: -5px +} + +#upgma_tiles_show_5 { + margin-top: 18px; + margin-left: -5px +} + +#upgma_nodepoint_show { + margin-top: 18px; + margin-left: -5px +} + +#upgma_ladder { + margin-top: 19px; + margin-left: -5px +} + +#upgma_align { + margin-top: 21px; + margin-left: -5px +} + +#upgma_rootedge_show { + margin-top: 20px +} + +#upgma_mapping_show { + margin-top: 20px; +} + +#upgma_tipcolor_mapping_show { + margin-top: 20px; +} + +#upgma_tipshape_mapping_show { + margin-top: 20px; +} + +#upgma_geom { + margin-top: 0px; + margin-left: -5px +} + +#upgma_tiplab_color { + margin-bottom: 0px; +} + +#upgma_show_branch_label { + margin-top: 17px; + margin-left: -5px +} + +#upgma_tippoint_show { + margin-top: 17px; + margin-left: -5px +} + +#upgma_tiplab_show { + margin-top: 17px; + margin-left: -5px +} + +#upgma_fruit_offset { + position: relative; + top: -20px +} + +#upgma_layout .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { + margin-bottom: 16px +} + +#upgma_div_tiles { + position: absolute; + bottom: 4px; + margin-left: -5px +} + +#upgma_fruit_offset_2 { + position: relative; + top: -20px +} + +#upgma_layout_2 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { + margin-bottom: 16px +} + +#upgma_div_tiles_2 { + position: absolute; + bottom: 4px; + margin-left: -5px +} + +#upgma_fruit_offset_3 { + position: relative; + top: -20px +} + +#upgma_layout_3 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { + margin-bottom: 16px +} + +#upgma_div_tiles_3 { + position: absolute; + bottom: 4px; + margin-left: -5px +} + +#upgma_fruit_offset_4 { + position: relative; + top: -20px +} + +#upgma_layout_4 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { + margin-bottom: 16px +} + +#upgma_div_tiles_4 { + position: absolute; + bottom: 4px; + margin-left: -5px +} + +#upgma_fruit_offset_5 { + position: relative; + top: -20px +} + +#upgma_layout_5 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { + margin-bottom: 16px +} + +#upgma_div_tiles_5 { + position: absolute; + bottom: 4px; + margin-left: -5px +} + +#upgma_tile_color_low { + position: relative; + right: -13px; +} + +#upgma_tile_color_low_2 { + position: relative; + right: -13px; +} + +#upgma_tile_color_low_3 { + position: relative; + right: -13px; } -button#upgma_tile_menu_5 { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px +#upgma_tile_color_low_4 { + position: relative; + right: -13px; } -#upgma_tippoint_color { - margin-bottom: 0px +#upgma_tile_color_low_5 { + position: relative; + right: -13px; } -#upgma_nodepoint_color { - margin-bottom: 16px; +#upgma_tile_color_high { + position: relative; + right: 13px; } -#upgma_treescale_show { - margin-top: 17px; +#upgma_tile_color_high_2 { + position: relative; + right: 13px; } -#upgma_tiles_show { - margin-top: 18px; - margin-left: -5px +#upgma_tile_color_high_3 { + position: relative; + right: 13px; } -#upgma_tiles_show_2 { - margin-top: 18px; - margin-left: -5px +#upgma_tile_color_high_4 { + position: relative; + right: 13px; } -#upgma_tiles_show_3 { - margin-top: 18px; - margin-left: -5px +#upgma_tile_color_high_5 { + position: relative; + right: 13px; } -#upgma_tiles_show_4 { +#upgma_heatmap_show { margin-top: 18px; - margin-left: -5px + margin-left: -5px; } -#upgma_tiles_show_5 { - margin-top: 18px; - margin-left: -5px +#upgma_heatmap_title { + position: relative; + bottom: -20px } -#upgma_nodepoint_show { - margin-top: 18px; - margin-left: -5px +button#create_tree { + position: relative; + left: -15px; + width = 100%; + border: none; } -#upgma_ladder { - margin-top: 19px; - margin-left: -5px +button#create_tree:hover { + background: #3c8c56; + border: none; } -#upgma_align { - margin-top: 21px; - margin-left: -5px +#nj_tiplab_scale .option[data-value="Set1"], +#nj_tippoint_scale .option[data-value="Set1"], +#nj_tiles_scale_1 .option[data-value="Set1"], +#nj_tiles_scale_2 .option[data-value="Set1"], +#nj_tiles_scale_3 .option[data-value="Set1"], +#nj_tiles_scale_4 .option[data-value="Set1"], +#nj_tiles_scale_5 .option[data-value="Set1"], +#nj_heatmap_scale .option[data-value="Set1"], +#nj_clade_scale .option[data-value="Set1"] { + background: linear-gradient(to right, #E41A1C 0%, #E41A1C 11%, #377EB8 11%, #377EB8 22%, #4DAF4A 22%, #4DAF4A 33%, #984EA3 33%, #984EA3 44%, #FF7F00 44%, #FF7F00 55%, #FFFF33 55%, #FFFF33 66%, #A65628 66%, #A65628 77%, #F781BF 77%, #F781BF 88%, #999999 88%, #999999 100%); + color: black; + margin-bottom: 2px; } -#upgma_rootedge_show { - margin-top: 20px + +#nj_tiplab_scale .option[data-value="Set2"], +#nj_tippoint_scale .option[data-value="Set2"], +#nj_tiles_scale_1 .option[data-value="Set2"], +#nj_tiles_scale_2 .option[data-value="Set2"], +#nj_tiles_scale_3 .option[data-value="Set2"], +#nj_tiles_scale_4 .option[data-value="Set2"], +#nj_tiles_scale_5 .option[data-value="Set2"], +#nj_heatmap_scale .option[data-value="Set2"], +#nj_clade_scale .option[data-value="Set2"] { + background: linear-gradient(to right, #66C2A5 0%, #66C2A5 12.5%, #FC8D62 12.5%, #FC8D62 25%, #8DA0CB 25%, #8DA0CB 37.5%, #E78AC3 37.5%, #E78AC3 50%, #A6D854 50%, #A6D854 62.5%, #FFD92F 62.5%, #FFD92F 75%, #E5C494 75%, #E5C494 87.5%, #B3B3B3 87.5%, #B3B3B3 100%); + color: black; + margin-bottom: 2px; } -#upgma_mapping_show { - margin-top: 20px; +#nj_tiplab_scale .option[data-value="Set3"], +#nj_tippoint_scale .option[data-value="Set3"], +#nj_tiles_scale_1 .option[data-value="Set3"], +#nj_tiles_scale_2 .option[data-value="Set3"], +#nj_tiles_scale_3 .option[data-value="Set3"], +#nj_tiles_scale_4 .option[data-value="Set3"], +#nj_tiles_scale_5 .option[data-value="Set3"], +#nj_heatmap_scale .option[data-value="Set3"], +#nj_clade_scale .option[data-value="Set3"] { + background: linear-gradient(to right, #8DD3C7 0%, #8DD3C7 8.33333%, #FFFFB3 8.33333%, #FFFFB3 16.6667%, #BEBADA 16.6667%, #BEBADA 25%, #FB8072 25%, #FB8072 33.3333%, #80B1D3 33.3333%, #80B1D3 41.6667%, #FDB462 41.6667%, #FDB462 50%, #B3DE69 50%, #B3DE69 58.3333%, #FCCDE5 58.3333%, #FCCDE5 66.6667%, #D9D9D9 66.6667%, #D9D9D9 75%, #BC80BD 75%, #BC80BD 83.3333%, #CCEBC5 83.3333%, #CCEBC5 91.6667%, #FFED6F 91.6667%, #FFED6F 100%); + color: black; + margin-bottom: 2px; } -#upgma_tipcolor_mapping_show { - margin-top: 20px; +#nj_tiplab_scale .option[data-value="Pastel1"], +#nj_tippoint_scale .option[data-value="Pastel1"], +#nj_tiles_scale_1 .option[data-value="Pastel1"], +#nj_tiles_scale_2 .option[data-value="Pastel1"], +#nj_tiles_scale_3 .option[data-value="Pastel1"], +#nj_tiles_scale_4 .option[data-value="Pastel1"], +#nj_tiles_scale_5 .option[data-value="Pastel1"], +#nj_heatmap_scale .option[data-value="Pastel1"], +#nj_clade_scale .option[data-value="Pastel1"] { + background: linear-gradient(to right, #FBB4AE 0%, #FBB4AE 11.1111%, #B3CDE3 11.1111%, #B3CDE3 22.2222%, #CCEBC5 22.2222%, #CCEBC5 33.3333%, #DECBE4 33.3333%, #DECBE4 44.4444%, #FED9A6 44.4444%, #FED9A6 55.5556%, #FFFFCC 55.5556%, #FFFFCC 66.6667%, #E5D8BD 66.6667%, #E5D8BD 77.7778%, #FDDAEC 77.7778%, #FDDAEC 88.8889%, #F2F2F2 88.8889%, #F2F2F2 100%); + color: black; + margin-bottom: 2px; } -#upgma_tipshape_mapping_show { - margin-top: 20px; +#nj_tiplab_scale .option[data-value="Pastel2"], +#nj_tippoint_scale .option[data-value="Pastel2"], +#nj_tiles_scale_1 .option[data-value="Pastel2"], +#nj_tiles_scale_2 .option[data-value="Pastel2"], +#nj_tiles_scale_3 .option[data-value="Pastel2"], +#nj_tiles_scale_4 .option[data-value="Pastel2"], +#nj_tiles_scale_5 .option[data-value="Pastel2"], +#nj_heatmap_scale .option[data-value="Pastel2"], +#nj_clade_scale .option[data-value="Pastel2"] { + background: linear-gradient(to right, #B3E2CD 0%, #B3E2CD 12.5%, #FDCDAC 12.5%, #FDCDAC 25%, #CBD5E8 25%, #CBD5E8 37.5%, #F4CAE4 37.5%, #F4CAE4 50%, #E6F5C9 50%, #E6F5C9 62.5%, #FFF2AE 62.5%, #FFF2AE 75%, #F1E2CC 75%, #F1E2CC 87.5%, #CCCCCC 87.5%, #CCCCCC 100%); + color: black; + margin-bottom: 2px; } -#upgma_geom { - margin-top: 0px; - margin-left: -5px +#nj_tiplab_scale .option[data-value="Paired"], +#nj_tippoint_scale .option[data-value="Paired"], +#nj_tiles_scale_1 .option[data-value="Paired"], +#nj_tiles_scale_2 .option[data-value="Paired"], +#nj_tiles_scale_3 .option[data-value="Paired"], +#nj_tiles_scale_4 .option[data-value="Paired"], +#nj_tiles_scale_5 .option[data-value="Paired"], +#nj_heatmap_scale .option[data-value="Paired"], +#nj_clade_scale .option[data-value="Paired"] { + background: linear-gradient(to right, #A6CEE3 0%, #A6CEE3 8.33333%, #1F78B4 8.33333%, #1F78B4 16.6667%, #B2DF8A 16.6667%, #B2DF8A 25%, #33A02C 25%, #33A02C 33.3333%, #FB9A99 33.3333%, #FB9A99 41.6667%, #E31A1C 41.6667%, #E31A1C 50%, #FDBF6F 50%, #FDBF6F 58.3333%, #FF7F00 58.3333%, #FF7F00 66.6667%, #CAB2D6 66.6667%, #CAB2D6 75%, #6A3D9A 75%, #6A3D9A 83.3333%, #FFFF99 83.3333%, #FFFF99 91.6667%, #B15928 91.6667%, #B15928 100%); + color: black; + margin-bottom: 2px; } -#upgma_tiplab_color { - margin-bottom: 0px; +#nj_tiplab_scale .option[data-value="Dark2"], +#nj_tippoint_scale .option[data-value="Dark2"], +#nj_tiles_scale_1 .option[data-value="Dark2"], +#nj_tiles_scale_2 .option[data-value="Dark2"], +#nj_tiles_scale_3 .option[data-value="Dark2"], +#nj_tiles_scale_4 .option[data-value="Dark2"], +#nj_tiles_scale_5 .option[data-value="Dark2"], +#nj_heatmap_scale .option[data-value="Dark2"], +#nj_clade_scale .option[data-value="Dark2"] { + background: linear-gradient(to right, #1B9E77 0%, #1B9E77 12.5%, #D95F02 12.5%, #D95F02 25%, #7570B3 25%, #7570B3 37.5%, #E7298A 37.5%, #E7298A 50%, #66A61E 50%, #66A61E 62.5%, #E6AB02 62.5%, #E6AB02 75%, #A6761D 75%, #A6761D 87.5%, #666666 87.5%, #666666 100%); + color: black; + margin-bottom: 2px; } -#upgma_show_branch_label { - margin-top: 17px; - margin-left: -5px +#nj_tiplab_scale .option[data-value="Accent"], +#nj_tippoint_scale .option[data-value="Accent"], +#nj_tiles_scale_1 .option[data-value="Accent"], +#nj_tiles_scale_2 .option[data-value="Accent"], +#nj_tiles_scale_3 .option[data-value="Accent"], +#nj_tiles_scale_4 .option[data-value="Accent"], +#nj_tiles_scale_5 .option[data-value="Accent"], +#nj_heatmap_scale .option[data-value="Accent"], +#nj_clade_scale .option[data-value="Accent"] { + background: linear-gradient(to right, #7FC97F 0%, #7FC97F 12.5%, #BEAED4 12.5%, #BEAED4 25%, #FDC086 25%, #FDC086 37.5%, #FFFF99 37.5%, #FFFF99 50%, #386CB0 50%, #386CB0 62.5%, #F0027F 62.5%, #F0027F 75%, #BF5B17 75%, #BF5B17 87.5%, #666666 87.5%, #666666 100%); + color: black; } -#upgma_tippoint_show { - margin-top: 17px; - margin-left: -5px +#nj_tiplab_scale .option[data-value="YlOrRd"], +#nj_tippoint_scale .option[data-value="YlOrRd"], +#nj_tiles_scale_1 .option[data-value="YlOrRd"], +#nj_tiles_scale_2 .option[data-value="YlOrRd"], +#nj_tiles_scale_3 .option[data-value="YlOrRd"], +#nj_tiles_scale_4 .option[data-value="YlOrRd"], +#nj_tiles_scale_5 .option[data-value="YlOrRd"], +#nj_heatmap_scale .option[data-value="YlOrRd"], +#nj_clade_scale .option[data-value="YlOrRd"] { + background: linear-gradient(to right, #FFFFCC 0%, #FFFFCC 11.1111%, #FFEDA0 11.1111%, #FFEDA0 22.2222%, #FED976 22.2222%, #FED976 33.3333%, #FEB24C 33.3333%, #FEB24C 44.4444%, #FD8D3C 44.4444%, #FD8D3C 55.5556%, #FC4E2A 55.5556%, #FC4E2A 66.6667%, #E31A1C 66.6667%, #E31A1C 77.7778%, #BD0026 77.7778%, #BD0026 88.8889%, #800026 88.8889%, #800026 100%); + color: white; + margin-bottom: 2px; } -#upgma_tiplab_show { - margin-top: 17px; - margin-left: -5px +#nj_tiplab_scale .option[data-value="YlOrBr"], +#nj_tippoint_scale .option[data-value="YlOrBr"], +#nj_tiles_scale_1 .option[data-value="YlOrBr"], +#nj_tiles_scale_2 .option[data-value="YlOrBr"], +#nj_tiles_scale_3 .option[data-value="YlOrBr"], +#nj_tiles_scale_4 .option[data-value="YlOrBr"], +#nj_tiles_scale_5 .option[data-value="YlOrBr"], +#nj_heatmap_scale .option[data-value="YlOrBr"], +#nj_clade_scale .option[data-value="YlOrBr"] { + background: linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11.1111%, #FFF7BC 11.1111%, #FFF7BC 22.2222%, #FEE391 22.2222%, #FEE391 33.3333%, #FEC44F 33.3333%, #FEC44F 44.4444%, #FE9929 44.4444%, #FE9929 55.5556%, #EC7014 55.5556%, #EC7014 66.6667%, #CC4C02 66.6667%, #CC4C02 77.7778%, #993404 77.7778%, #993404 88.8889%, #662506 88.8889%, #662506 100%); + color: white; + margin-bottom: 2px; } -#upgma_fruit_offset { - position: relative; - top: -20px +#nj_tiplab_scale .option[data-value="YlGnBu"], +#nj_tippoint_scale .option[data-value="YlGnBu"], +#nj_tiles_scale_1 .option[data-value="YlGnBu"], +#nj_tiles_scale_2 .option[data-value="YlGnBu"], +#nj_tiles_scale_3 .option[data-value="YlGnBu"], +#nj_tiles_scale_4 .option[data-value="YlGnBu"], +#nj_tiles_scale_5 .option[data-value="YlGnBu"], +#nj_heatmap_scale .option[data-value="YlGnBu"], +#nj_clade_scale .option[data-value="YlGnBu"] { + background: linear-gradient(to right, #FFFFD9 0%, #FFFFD9 11.1111%, #EDF8B1 11.1111%, #EDF8B1 22.2222%, #C7E9B4 22.2222%, #C7E9B4 33.3333%, #7FCDBB 33.3333%, #7FCDBB 44.4444%, #41B6C4 44.4444%, #41B6C4 55.5556%, #1D91C0 55.5556%, #1D91C0 66.6667%, #225EA8 66.6667%, #225EA8 77.7778%, #253494 77.7778%, #253494 88.8889%, #081D58 88.8889%, #081D58 100%); + color: white; + margin-bottom: 2px; } -#upgma_layout .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { - margin-bottom: 16px +#nj_tiplab_scale .option[data-value="YlGn"], +#nj_tippoint_scale .option[data-value="YlGn"], +#nj_tiles_scale_1 .option[data-value="YlGn"], +#nj_tiles_scale_2 .option[data-value="YlGn"], +#nj_tiles_scale_3 .option[data-value="YlGn"], +#nj_tiles_scale_4 .option[data-value="YlGn"], +#nj_tiles_scale_5 .option[data-value="YlGn"], +#nj_heatmap_scale .option[data-value="YlGn"], +#nj_clade_scale .option[data-value="YlGn"] { + background: linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11.1111%, #F7FCB9 11.1111%, #F7FCB9 22.2222%, #D9F0A3 22.2222%, #D9F0A3 33.3333%, #ADDD8E 33.3333%, #ADDD8E 44.4444%, #78C679 44.4444%, #78C679 55.5556%, #41AB5D 55.5556%, #41AB5D 66.6667%, #238443 66.6667%, #238443 77.7778%, #006837 77.7778%, #006837 88.8889%, #004529 88.8889%, #004529 100%); + color: white; + margin-bottom: 2px; +} + +#nj_tiplab_scale .option[data-value="Reds"], +#nj_tippoint_scale .option[data-value="Reds"], +#nj_tiles_scale_1 .option[data-value="Reds"], +#nj_tiles_scale_2 .option[data-value="Reds"], +#nj_tiles_scale_3 .option[data-value="Reds"], +#nj_tiles_scale_4 .option[data-value="Reds"], +#nj_tiles_scale_5 .option[data-value="Reds"], +#nj_heatmap_scale .option[data-value="Reds"], +#nj_clade_scale .option[data-value="Reds"] { + background: linear-gradient(to right, #FFF5F0 0%, #FFF5F0 11.1111%, #FEE0D2 11.1111%, #FEE0D2 22.2222%, #FCBBA1 22.2222%, #FCBBA1 33.3333%, #FC9272 33.3333%, #FC9272 44.4444%, #FB6A4A 44.4444%, #FB6A4A 55.5556%, #EF3B2C 55.5556%, #EF3B2C 66.6667%, #CB181D 66.6667%, #CB181D 77.7778%, #A50F15 77.7778%, #A50F15 88.8889%, #67000D 88.8889%, #67000D 100%); + color: white; + margin-bottom: 2px; } -#upgma_div_tiles { - position: absolute; - bottom: 4px; - margin-left: -5px +#nj_tiplab_scale .option[data-value="RdPu"], +#nj_tippoint_scale .option[data-value="RdPu"], +#nj_tiles_scale_1 .option[data-value="RdPu"], +#nj_tiles_scale_2 .option[data-value="RdPu"], +#nj_tiles_scale_3 .option[data-value="RdPu"], +#nj_tiles_scale_4 .option[data-value="RdPu"], +#nj_tiles_scale_5 .option[data-value="RdPu"], +#nj_heatmap_scale .option[data-value="RdPu"], +#nj_clade_scale .option[data-value="RdPu"] { + background: linear-gradient(to right, #FFF7F3 0%, #FFF7F3 11.1111%, #FDE0DD 11.1111%, #FDE0DD 22.2222%, #FCC5C0 22.2222%, #FCC5C0 33.3333%, #FA9FB5 33.3333%, #FA9FB5 44.4444%, #F768A1 44.4444%, #F768A1 55.5556%, #DD3497 55.5556%, #DD3497 66.6667%, #AE017E 66.6667%, #AE017E 77.7778%, #7A0177 77.7778%, #7A0177 88.8889%, #49006A 88.8889%, #49006A 100%); + color: white; + margin-bottom: 2px; } -#upgma_fruit_offset_2 { - position: relative; - top: -20px +#nj_tiplab_scale .option[data-value="Purples"], +#nj_tippoint_scale .option[data-value="Purples"], +#nj_tiles_scale_1 .option[data-value="Purples"], +#nj_tiles_scale_2 .option[data-value="Purples"], +#nj_tiles_scale_3 .option[data-value="Purples"], +#nj_tiles_scale_4 .option[data-value="Purples"], +#nj_tiles_scale_5 .option[data-value="Purples"], +#nj_heatmap_scale .option[data-value="Purples"], +#nj_clade_scale .option[data-value="Purples"] { + background: linear-gradient(to right, #FCFBFD 0%, #FCFBFD 11.1111%, #EFEDF5 11.1111%, #EFEDF5 22.2222%, #DADAEB 22.2222%, #DADAEB 33.3333%, #BCBDDC 33.3333%, #BCBDDC 44.4444%, #9E9AC8 44.4444%, #9E9AC8 55.5556%, #807DBA 55.5556%, #807DBA 66.6667%, #6A51A3 66.6667%, #6A51A3 77.7778%, #54278F 77.7778%, #54278F 88.8889%, #3F007D 88.8889%, #3F007D 100%); + color: white; + margin-bottom: 2px; } -#upgma_layout_2 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { - margin-bottom: 16px +#nj_tiplab_scale .option[data-value="PuRd"], +#nj_tippoint_scale .option[data-value="PuRd"], +#nj_tiles_scale_1 .option[data-value="PuRd"], +#nj_tiles_scale_2 .option[data-value="PuRd"], +#nj_tiles_scale_3 .option[data-value="PuRd"], +#nj_tiles_scale_4 .option[data-value="PuRd"], +#nj_tiles_scale_5 .option[data-value="PuRd"], +#nj_heatmap_scale .option[data-value="PuRd"], +#nj_clade_scale .option[data-value="PuRd"] { + background: linear-gradient(to right, #F7F4F9 0%, #F7F4F9 11.1111%, #E7E1EF 11.1111%, #E7E1EF 22.2222%, #D4B9DA 22.2222%, #D4B9DA 33.3333%, #C994C7 33.3333%, #C994C7 44.4444%, #DF65B0 44.4444%, #DF65B0 55.5556%, #E7298A 55.5556%, #E7298A 66.6667%, #CE1256 66.6667%, #CE1256 77.7778%, #980043 77.7778%, #980043 88.8889%, #67001F 88.8889%, #67001F 100%); + color: white; + margin-bottom: 2px; } -#upgma_div_tiles_2 { - position: absolute; - bottom: 4px; - margin-left: -5px +#nj_tiplab_scale .option[data-value="PuBuGn"], +#nj_tippoint_scale .option[data-value="PuBuGn"], +#nj_tiles_scale_1 .option[data-value="PuBuGn"], +#nj_tiles_scale_2 .option[data-value="PuBuGn"], +#nj_tiles_scale_3 .option[data-value="PuBuGn"], +#nj_tiles_scale_4 .option[data-value="PuBuGn"], +#nj_tiles_scale_5 .option[data-value="PuBuGn"], +#nj_heatmap_scale .option[data-value="PuBuGn"], +#nj_clade_scale .option[data-value="PuBuGn"] { + background: linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11.1111%, #ECE2F0 11.1111%, #ECE2F0 22.2222%, #D0D1E6 22.2222%, #D0D1E6 33.3333%, #A6BDDB 33.3333%, #A6BDDB 44.4444%, #67A9CF 44.4444%, #67A9CF 55.5556%, #3690C0 55.5556%, #3690C0 66.6667%, #02818A 66.6667%, #02818A 77.7778%, #016C59 77.7778%, #016C59 88.8889%, #014636 88.8889%, #014636 100%); + color: white; + margin-bottom: 2px; } -#upgma_fruit_offset_3 { - position: relative; - top: -20px +#nj_tiplab_scale .option[data-value="PuBu"], +#nj_tippoint_scale .option[data-value="PuBu"], +#nj_tiles_scale_1 .option[data-value="PuBu"], +#nj_tiles_scale_2 .option[data-value="PuBu"], +#nj_tiles_scale_3 .option[data-value="PuBu"], +#nj_tiles_scale_4 .option[data-value="PuBu"], +#nj_tiles_scale_5 .option[data-value="PuBu"], +#nj_heatmap_scale .option[data-value="PuBu"], +#nj_clade_scale .option[data-value="PuBu"] { + background: linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11.1111%, #ECE7F2 11.1111%, #ECE7F2 22.2222%, #D0D1E6 22.2222%, #D0D1E6 33.3333%, #A6BDDB 33.3333%, #A6BDDB 44.4444%, #74A9CF 44.4444%, #74A9CF 55.5556%, #3690C0 55.5556%, #3690C0 66.6667%, #0570B0 66.6667%, #0570B0 77.7778%, #045A8D 77.7778%, #045A8D 88.8889%, #023858 88.8889%, #023858 100%); + color: white; + margin-bottom: 2px; } -#upgma_layout_3 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { - margin-bottom: 16px +#nj_tiplab_scale .option[data-value="OrRd"], +#nj_tippoint_scale .option[data-value="OrRd"], +#nj_tiles_scale_1 .option[data-value="OrRd"], +#nj_tiles_scale_2 .option[data-value="OrRd"], +#nj_tiles_scale_3 .option[data-value="OrRd"], +#nj_tiles_scale_4 .option[data-value="OrRd"], +#nj_tiles_scale_5 .option[data-value="OrRd"], +#nj_heatmap_scale .option[data-value="OrRd"], +#nj_clade_scale .option[data-value="OrRd"] { + background: linear-gradient(to right, #FFF7EC 0%, #FFF7EC 11.1111%, #FEE8C8 11.1111%, #FEE8C8 22.2222%, #FDD49E 22.2222%, #FDD49E 33.3333%, #FDBB84 33.3333%, #FDBB84 44.4444%, #FC8D59 44.4444%, #FC8D59 55.5556%, #EF6548 55.5556%, #EF6548 66.6667%, #D7301F 66.6667%, #D7301F 77.7778%, #B30000 77.7778%, #B30000 88.8889%, #7F0000 88.8889%, #7F0000 100%); + color: white; + margin-bottom: 2px; } -#upgma_div_tiles_3 { - position: absolute; - bottom: 4px; - margin-left: -5px +#nj_tiplab_scale .option[data-value="Oranges"], +#nj_tippoint_scale .option[data-value="Oranges"], +#nj_tiles_scale_1 .option[data-value="Oranges"], +#nj_tiles_scale_2 .option[data-value="Oranges"], +#nj_tiles_scale_3 .option[data-value="Oranges"], +#nj_tiles_scale_4 .option[data-value="Oranges"], +#nj_tiles_scale_5 .option[data-value="Oranges"], +#nj_heatmap_scale .option[data-value="Oranges"], +#nj_clade_scale .option[data-value="Oranges"] { + background: linear-gradient(to right, #FFF5EB 0%, #FFF5EB 11.1111%, #FEE6CE 11.1111%, #FEE6CE 22.2222%, #FDD0A2 22.2222%, #FDD0A2 33.3333%, #FDAE6B 33.3333%, #FDAE6B 44.4444%, #FD8D3C 44.4444%, #FD8D3C 55.5556%, #F16913 55.5556%, #F16913 66.6667%, #D94801 66.6667%, #D94801 77.7778%, #A63603 77.7778%, #A63603 88.8889%, #7F2704 88.8889%, #7F2704 100%); + color: white; + margin-bottom: 2px; } -#upgma_fruit_offset_4 { - position: relative; - top: -20px +#nj_tiplab_scale .option[data-value="Greys"], +#nj_tippoint_scale .option[data-value="Greys"], +#nj_tiles_scale_1 .option[data-value="Greys"], +#nj_tiles_scale_2 .option[data-value="Greys"], +#nj_tiles_scale_3 .option[data-value="Greys"], +#nj_tiles_scale_4 .option[data-value="Greys"], +#nj_tiles_scale_5 .option[data-value="Greys"], +#nj_heatmap_scale .option[data-value="Greys"], +#nj_clade_scale .option[data-value="Greys"] { + background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 11.1111%, #F0F0F0 11.1111%, #F0F0F0 22.2222%, #D9D9D9 22.2222%, #D9D9D9 33.3333%, #BDBDBD 33.3333%, #BDBDBD 44.4444%, #969696 44.4444%, #969696 55.5556%, #737373 55.5556%, #737373 66.6667%, #525252 66.6667%, #525252 77.7778%, #252525 77.7778%, #252525 88.8889%, #000000 88.8889%, #000000 100%); + color: white; } -#upgma_layout_4 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { - margin-bottom: 16px +#nj_tiplab_scale .option[data-value="Greens"], +#nj_tippoint_scale .option[data-value="Greens"], +#nj_tiles_scale_1 .option[data-value="Greens"], +#nj_tiles_scale_2 .option[data-value="Greens"], +#nj_tiles_scale_3 .option[data-value="Greens"], +#nj_tiles_scale_4 .option[data-value="Greens"], +#nj_tiles_scale_5 .option[data-value="Greens"], +#nj_heatmap_scale .option[data-value="Greens"], +#nj_clade_scale .option[data-value="Greens"] { + background: linear-gradient(to right, #F7FCF5 0%, #F7FCF5 11.1111%, #E5F5E0 11.1111%, #E5F5E0 22.2222%, #C7E9C0 22.2222%, #C7E9C0 33.3333%, #A1D99B 33.3333%, #A1D99B 44.4444%, #74C476 44.4444%, #74C476 55.5556%, #41AB5D 55.5556%, #41AB5D 66.6667%, #238B45 66.6667%, #238B45 77.7778%, #006D2C 77.7778%, #006D2C 88.8889%, #00441B 88.8889%, #00441B 100%); + color: white; + margin-bottom: 2px; } -#upgma_div_tiles_4 { - position: absolute; - bottom: 4px; - margin-left: -5px +#nj_tiplab_scale .option[data-value="GnBu"], +#nj_tippoint_scale .option[data-value="GnBu"], +#nj_tiles_scale_1 .option[data-value="GnBu"], +#nj_tiles_scale_2 .option[data-value="GnBu"], +#nj_tiles_scale_3 .option[data-value="GnBu"], +#nj_tiles_scale_4 .option[data-value="GnBu"], +#nj_tiles_scale_5 .option[data-value="GnBu"], +#nj_heatmap_scale .option[data-value="GnBu"], +#nj_clade_scale .option[data-value="GnBu"] { + background: linear-gradient(to right, #F7FCF0 0%, #F7FCF0 11.1111%, #E0F3DB 11.1111%, #E0F3DB 22.2222%, #CCEBC5 22.2222%, #CCEBC5 33.3333%, #A8DDB5 33.3333%, #A8DDB5 44.4444%, #7BCCC4 44.4444%, #7BCCC4 55.5556%, #4EB3D3 55.5556%, #4EB3D3 66.6667%, #2B8CBE 66.6667%, #2B8CBE 77.7778%, #0868AC 77.7778%, #0868AC 88.8889%, #084081 88.8889%, #084081 100%); + color: white; + margin-bottom: 2px; } -#upgma_fruit_offset_5 { - position: relative; - top: -20px +#nj_tiplab_scale .option[data-value="BuPu"], +#nj_tippoint_scale .option[data-value="BuPu"], +#nj_tiles_scale_1 .option[data-value="BuPu"], +#nj_tiles_scale_2 .option[data-value="BuPu"], +#nj_tiles_scale_3 .option[data-value="BuPu"], +#nj_tiles_scale_4 .option[data-value="BuPu"], +#nj_tiles_scale_5 .option[data-value="BuPu"], +#nj_heatmap_scale .option[data-value="BuPu"], +#nj_clade_scale .option[data-value="BuPu"] { + background: linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11.1111%, #E0ECF4 11.1111%, #E0ECF4 22.2222%, #BFD3E6 22.2222%, #BFD3E6 33.3333%, #9EBCDA 33.3333%, #9EBCDA 44.4444%, #8C96C6 44.4444%, #8C96C6 55.5556%, #8C6BB1 55.5556%, #8C6BB1 66.6667%, #88419D 66.6667%, #88419D 77.7778%, #810F7C 77.7778%, #810F7C 88.8889%, #4D004B 88.8889%, #4D004B 100%); + color: white; + margin-bottom: 2px; } -#upgma_layout_5 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { - margin-bottom: 16px +#nj_tiplab_scale .option[data-value="BuGn"], +#nj_tippoint_scale .option[data-value="BuGn"], +#nj_tiles_scale_1 .option[data-value="BuGn"], +#nj_tiles_scale_2 .option[data-value="BuGn"], +#nj_tiles_scale_3 .option[data-value="BuGn"], +#nj_tiles_scale_4 .option[data-value="BuGn"], +#nj_tiles_scale_5 .option[data-value="BuGn"], +#nj_heatmap_scale .option[data-value="BuGn"], +#nj_clade_scale .option[data-value="BuGn"] { + background: linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11.1111%, #E5F5F9 11.1111%, #E5F5F9 22.2222%, #CCECE6 22.2222%, #CCECE6 33.3333%, #99D8C9 33.3333%, #99D8C9 44.4444%, #66C2A4 44.4444%, #66C2A4 55.5556%, #41AE76 55.5556%, #41AE76 66.6667%, #238B45 66.6667%, #238B45 77.7778%, #006D2C 77.7778%, #006D2C 88.8889%, #00441B 88.8889%, #00441B 100%); + color: white; + margin-bottom: 2px; } -#upgma_div_tiles_5 { - position: absolute; - bottom: 4px; - margin-left: -5px +#nj_tiplab_scale .option[data-value="Blues"], +#nj_tippoint_scale .option[data-value="Blues"], +#nj_tiles_scale_1 .option[data-value="Blues"], +#nj_tiles_scale_2 .option[data-value="Blues"], +#nj_tiles_scale_3 .option[data-value="Blues"], +#nj_tiles_scale_4 .option[data-value="Blues"], +#nj_tiles_scale_5 .option[data-value="Blues"], +#nj_heatmap_scale .option[data-value="Blues"], +#nj_clade_scale .option[data-value="Blues"] { + background: linear-gradient(to right, #F7FBFF 0%, #F7FBFF 11.1111%, #DEEBF7 11.1111%, #DEEBF7 22.2222%, #C6DBEF 22.2222%, #C6DBEF 33.3333%, #9ECAE1 33.3333%, #9ECAE1 44.4444%, #6BAED6 44.4444%, #6BAED6 55.5556%, #4292C6 55.5556%, #4292C6 66.6667%, #2171B5 66.6667%, #2171B5 77.7778%, #08519C 77.7778%, #08519C 88.8889%, #08306B 88.8889%, #08306B 100%); + color: white; + margin-bottom: 2px; } -.tile1 { - position: absolute; - top: -17px; - right: 35px +#nj_tiplab_scale .option[data-value="magma"], +#nj_tippoint_scale .option[data-value="magma"], +#nj_tiles_scale_1 .option[data-value="magma"], +#nj_tiles_scale_2 .option[data-value="magma"], +#nj_tiles_scale_3 .option[data-value="magma"], +#nj_tiles_scale_4 .option[data-value="magma"], +#nj_tiles_scale_5 .option[data-value="magma"], +#nj_heatmap_scale .option[data-value="magma"] { + background: linear-gradient(to right, #000004FF, #07071DFF, #160F3BFF, #29115AFF, #400F73FF, #56147DFF, #6B1D81FF, #802582FF, #952C80FF, #AB337CFF, #C03A76FF, #D6456CFF, #E85362FF, #F4685CFF, #FA815FFF, #FD9A6AFF, #FEB37BFF, #FECC8FFF, #FDE4A6FF, #FCFDBFFF); + color: white; + margin-bottom: 2px; } -.tile_select { - position: absolute; - top: -17px; +#nj_tiplab_scale .option[data-value="inferno"], +#nj_tippoint_scale .option[data-value="inferno"], +#nj_tiles_scale_1 .option[data-value="inferno"], +#nj_tiles_scale_2 .option[data-value="inferno"], +#nj_tiles_scale_3 .option[data-value="inferno"], +#nj_tiles_scale_4 .option[data-value="inferno"], +#nj_tiles_scale_5 .option[data-value="inferno"], +#nj_heatmap_scale .option[data-value="inferno"] { + background: linear-gradient(to right, #000004FF, #08051EFF, #190C3EFF, #300A5BFF, #460B6AFF, #5C126EFF, #711A6EFF, #87216BFF, #9C2964FF, #B1325AFF, #C43C4EFF, #D64B40FF, #E55C30FF, #F17020FF, #F8870EFF, #FCA007FF, #FBB91FFF, #F7D340FF, #F1ED6FFF, #FCFFA4FF); + color: white; + margin-bottom: 2px; } -#upgma_tile_color_low { - position: relative; - right: -13px; +#nj_tiplab_scale .option[data-value="plasma"], +#nj_tippoint_scale .option[data-value="plasma"], +#nj_tiles_scale_1 .option[data-value="plasma"], +#nj_tiles_scale_2 .option[data-value="plasma"], +#nj_tiles_scale_3 .option[data-value="plasma"], +#nj_tiles_scale_4 .option[data-value="plasma"], +#nj_tiles_scale_5 .option[data-value="plasma"], +#nj_heatmap_scale .option[data-value="plasma"] { + background: linear-gradient(to right, #0D0887FF, #2D0594FF, #44039EFF, #5901A5FF, #6F00A8FF, #8305A7FF, #9512A1FF, #A72197FF, #B6308BFF, #C5407EFF, #D14E72FF, #DD5E66FF, #E76E5BFF, #EF7F4FFF, #F79044FF, #FBA238FF, #FEB72DFF, #FDCB26FF, #F7E225FF, #F0F921FF); + color: white; + margin-bottom: 2px; } -#upgma_tile_color_low_2 { - position: relative; - right: -13px; +#nj_tiplab_scale .option[data-value="viridis"], +#nj_tippoint_scale .option[data-value="viridis"], +#nj_tiles_scale_1 .option[data-value="viridis"], +#nj_tiles_scale_2 .option[data-value="viridis"], +#nj_tiles_scale_3 .option[data-value="viridis"], +#nj_tiles_scale_4 .option[data-value="viridis"], +#nj_tiles_scale_5 .option[data-value="viridis"], +#nj_heatmap_scale .option[data-value="viridis"] { + background: linear-gradient(to right, #440154FF, #481568FF, #482677FF, #453781FF, #3F4788FF, #39558CFF, #32648EFF, #2D718EFF, #287D8EFF, #238A8DFF, #1F968BFF, #20A386FF, #29AF7FFF, #3CBC75FF, #56C667FF, #74D055FF, #94D840FF, #B8DE29FF, #DCE318FF, #FDE725FF); + color: white; + margin-bottom: 2px; } -#upgma_tile_color_low_3 { - position: relative; - right: -13px; +#nj_tiplab_scale .option[data-value="cividis"], +#nj_tippoint_scale .option[data-value="cividis"], +#nj_tiles_scale_1 .option[data-value="cividis"], +#nj_tiles_scale_2 .option[data-value="cividis"], +#nj_tiles_scale_3 .option[data-value="cividis"], +#nj_tiles_scale_4 .option[data-value="cividis"], +#nj_tiles_scale_5 .option[data-value="cividis"], +#nj_heatmap_scale .option[data-value="cividis"] { + background: linear-gradient(to right, #00204DFF, #002A64FF, #00336FFF, #1F3C6DFF, #35466BFF, #444F6BFF, #53596CFF, #5F636EFF, #6B6C71FF, #777776FF, #838079FF, #908B79FF, #9D9677FF, #ABA074FF, #B9AC70FF, #C7B76BFF, #D7C463FF, #E5D05AFF, #F5DD4DFF, #FFEA46FF); + color: white; + margin-bottom: 2px; } -#upgma_tile_color_low_4 { - position: relative; - right: -13px; +#nj_tiplab_scale .option[data-value="rocket"], +#nj_tippoint_scale .option[data-value="rocket"], +#nj_tiles_scale_1 .option[data-value="rocket"], +#nj_tiles_scale_2 .option[data-value="rocket"], +#nj_tiles_scale_3 .option[data-value="rocket"], +#nj_tiles_scale_4 .option[data-value="rocket"], +#nj_tiles_scale_5 .option[data-value="rocket"], +#nj_heatmap_scale .option[data-value="rocket"] { + background: linear-gradient(to right, #03051AFF, #150E26FF, #281535FF, #3C1A42FF, #511E4DFF, #661F54FF, #7C1F5AFF, #931C5BFF, #AA185AFF, #C11754FF, #D3214BFF, #E33541FF, #ED4E3EFF, #F26847FF, #F4815AFF, #F5986FFF, #F6AE86FF, #F7C2A2FF, #F8D7BFFF, #FAEBDDFF); + color: white; + margin-bottom: 2px; } -#upgma_tile_color_low_5 { - position: relative; - right: -13px; +#nj_tiplab_scale .option[data-value="mako"], +#nj_tippoint_scale .option[data-value="mako"], +#nj_tiles_scale_1 .option[data-value="mako"], +#nj_tiles_scale_2 .option[data-value="mako"], +#nj_tiles_scale_3 .option[data-value="mako"], +#nj_tiles_scale_4 .option[data-value="mako"], +#nj_tiles_scale_5 .option[data-value="mako"], +#nj_heatmap_scale .option[data-value="mako"] { + background: linear-gradient(to right, #0B0405FF, #190E19FF, #27182DFF, #312142FF, #3A2C59FF, #3F3770FF, #414388FF, #3C5397FF, #38639DFF, #3573A1FF, #3482A4FF, #3491A8FF, #35A0ABFF, #3AAEADFF, #46BEADFF, #5ACCADFF, #7ED7AFFF, #A4E0BBFF, #C3E9CEFF, #DEF5E5FF); + color: white; + margin-bottom: 2px; } -#upgma_tile_color_high { - position: relative; - right: 13px; +#nj_tiplab_scale .option[data-value="turbo"], +#nj_tippoint_scale .option[data-value="turbo"], +#nj_tiles_scale_1 .option[data-value="turbo"], +#nj_tiles_scale_2 .option[data-value="turbo"], +#nj_tiles_scale_3 .option[data-value="turbo"], +#nj_tiles_scale_4 .option[data-value="turbo"], +#nj_tiles_scale_5 .option[data-value="turbo"], +#nj_heatmap_scale .option[data-value="turbo"] { + background: linear-gradient(to right, #30123BFF, #3F3994FF, #455ED2FF, #4681F7FF, #3AA2FCFF, #23C3E4FF, #18DEC1FF, #2CF09EFF, #5BFB72FF, #8EFF49FF, #B5F836FF, #D6E635FF, #EFCD3AFF, #FCB036FF, #FD8A26FF, #F36215FF, #E14209FF, #C82803FF, #A51301FF, #7A0403FF); + color: white; } -#upgma_tile_color_high_2 { - position: relative; - right: 13px; +#nj_tiplab_scale .option[data-value="Spectral"], +#nj_tippoint_scale .option[data-value="Spectral"], +#nj_tiles_scale_1 .option[data-value="Spectral"], +#nj_tiles_scale_2 .option[data-value="Spectral"], +#nj_tiles_scale_3 .option[data-value="Spectral"], +#nj_tiles_scale_4 .option[data-value="Spectral"], +#nj_tiles_scale_5 .option[data-value="Spectral"], +#nj_heatmap_scale .option[data-value="Spectral"] { + background: linear-gradient(to right, #9E0142, #D53E4F, #F46D43, #FDAE61, #FEE08B, #FFFFBF, #E6F598, #ABDDA4, #66C2A5, #3288BD, #5E4FA2); + color: black; + margin-bottom: 2px; } -#upgma_tile_color_high_3 { - position: relative; - right: 13px; +#nj_tiplab_scale .option[data-value="RdYlGn"], +#nj_tippoint_scale .option[data-value="RdYlGn"], +#nj_tiles_scale_1 .option[data-value="RdYlGn"], +#nj_tiles_scale_2 .option[data-value="RdYlGn"], +#nj_tiles_scale_3 .option[data-value="RdYlGn"], +#nj_tiles_scale_4 .option[data-value="RdYlGn"], +#nj_tiles_scale_5 .option[data-value="RdYlGn"], +#nj_heatmap_scale .option[data-value="RdYlGn"] { + background: linear-gradient(to right, #A50026, #D73027, #F46D43, #FDAE61, #FEE08B, #FFFFBF, #D9EF8B, #A6D96A, #66BD63, #1A9850, #006837); + color: black; + margin-bottom: 2px; } -#upgma_tile_color_high_4 { - position: relative; - right: 13px; +#nj_tiplab_scale .option[data-value="RdYlBu"], +#nj_tippoint_scale .option[data-value="RdYlBu"], +#nj_tiles_scale_1 .option[data-value="RdYlBu"], +#nj_tiles_scale_2 .option[data-value="RdYlBu"], +#nj_tiles_scale_3 .option[data-value="RdYlBu"], +#nj_tiles_scale_4 .option[data-value="RdYlBu"], +#nj_tiles_scale_5 .option[data-value="RdYlBu"], +#nj_heatmap_scale .option[data-value="RdYlBu"] { + background: linear-gradient(to right, #A50026, #D73027, #F46D43, #FDAE61, #FEE090, #FFFFBF, #E0F3F8, #ABD9E9, #74ADD1, #4575B4, #313695); + color: black; + margin-bottom: 2px; } -#upgma_tile_color_high_5 { - position: relative; - right: 13px; +#nj_tiplab_scale .option[data-value="RdGy"], +#nj_tippoint_scale .option[data-value="RdGy"], +#nj_tiles_scale_1 .option[data-value="RdGy"], +#nj_tiles_scale_2 .option[data-value="RdGy"], +#nj_tiles_scale_3 .option[data-value="RdGy"], +#nj_tiles_scale_4 .option[data-value="RdGy"], +#nj_tiles_scale_5 .option[data-value="RdGy"], +#nj_heatmap_scale .option[data-value="RdGy"] { + background: linear-gradient(to right, #67001F, #B2182B, #D6604D, #F4A582, #FDDBC7, #FFFFFF, #E0E0E0, #BABABA, #878787, #4D4D4D, #1A1A1A); + color: black; + margin-bottom: 2px; } -#upgma_heatmap_show { - margin-top: 18px; - margin-left: -5px; +#nj_tiplab_scale .option[data-value="RdBu"], +#nj_tippoint_scale .option[data-value="RdBu"], +#nj_tiles_scale_1 .option[data-value="RdBu"], +#nj_tiles_scale_2 .option[data-value="RdBu"], +#nj_tiles_scale_3 .option[data-value="RdBu"], +#nj_tiles_scale_4 .option[data-value="RdBu"], +#nj_tiles_scale_5 .option[data-value="RdBu"], +#nj_heatmap_scale .option[data-value="RdBu"] { + background: linear-gradient(to right, #67001F, #B2182B, #D6604D, #F4A582, #FDDBC7, #F7F7F7, #D1E5F0, #92C5DE, #4393C3, #2166AC, #053061); + color: black; + margin-bottom: 2px; } -.heatmap-picker { - margin-top: -10px; - margin-left: 3px +#nj_tiplab_scale .option[data-value="PuOr"], +#nj_tippoint_scale .option[data-value="PuOr"], +#nj_tiles_scale_1 .option[data-value="PuOr"], +#nj_tiles_scale_2 .option[data-value="PuOr"], +#nj_tiles_scale_3 .option[data-value="PuOr"], +#nj_tiles_scale_4 .option[data-value="PuOr"], +#nj_tiles_scale_5 .option[data-value="PuOr"], +#nj_heatmap_scale .option[data-value="PuOr"] { + background: linear-gradient(to right, #7F3B08, #B35806, #E08214, #FDB863, #FEE0B6, #F7F7F7, #D8DAEB, #B2ABD2, #8073AC, #542788, #2D004B); + color: black; + margin-bottom: 2px; } -#upgma_heatmap_title { - position: relative; - bottom: -20px +#nj_tiplab_scale .option[data-value="PRGn"], +#nj_tippoint_scale .option[data-value="PRGn"], +#nj_tiles_scale_1 .option[data-value="PRGn"], +#nj_tiles_scale_2 .option[data-value="PRGn"], +#nj_tiles_scale_3 .option[data-value="PRGn"], +#nj_tiles_scale_4 .option[data-value="PRGn"], +#nj_tiles_scale_5 .option[data-value="PRGn"], +#nj_heatmap_scale .option[data-value="PRGn"] { + background: linear-gradient(to right, #40004B, #762A83, #9970AB, #C2A5CF, #E7D4E8, #F7F7F7, #D9F0D3, #A6DBA0, #5AAE61, #1B7837, #00441B); + color: black; + margin-bottom: 2px; } -button#create_tree { - position: relative; - left: -15px; - width = 100%; - border: none; +#nj_tiplab_scale .option[data-value="PiYG"], +#nj_tippoint_scale .option[data-value="PiYG"], +#nj_tiles_scale_1 .option[data-value="PiYG"], +#nj_tiles_scale_2 .option[data-value="PiYG"], +#nj_tiles_scale_3 .option[data-value="PiYG"], +#nj_tiles_scale_4 .option[data-value="PiYG"], +#nj_tiles_scale_5 .option[data-value="PiYG"], +#nj_heatmap_scale .option[data-value="PiYG"] { + background: linear-gradient(to right, #8E0152, #C51B7D, #DE77AE, #F1B6DA, #FDE0EF, #F7F7F7, #E6F5D0, #B8E186, #7FBC41, #4D9221, #276419); + color: black; + margin-bottom: 2px; } -button#create_tree:hover { - background: #3c8c56; - border: none; +#nj_tiplab_scale .option[data-value="BrBG"], +#nj_tippoint_scale .option[data-value="BrBG"], +#nj_tiles_scale_1 .option[data-value="BrBG"], +#nj_tiles_scale_2 .option[data-value="BrBG"], +#nj_tiles_scale_3 .option[data-value="BrBG"], +#nj_tiles_scale_4 .option[data-value="BrBG"], +#nj_tiles_scale_5 .option[data-value="BrBG"], +#nj_heatmap_scale .option[data-value="BrBG"] { + background: linear-gradient(to right, #543005, #8C510A, #BF812D, #DFC27D, #F6E8C3, #F5F5F5, #C7EAE5, #80CDC1, #35978F, #01665E, #003C30); + color: black; + margin-bottom: 2px; } -#mst_date_general_select .form-control { - height: 28px; - position: relative; - right: -22px -} +/* Report */ #rep_date_general { margin-top: 17px } -.form-group { - margin-bottom: 0px; -} - -#mst_operator_general_select { - height: 28px; - margin-top: -15px; - position: relative; - right: -22px; -} - #rep_operator_general { margin-top: 0px; } -#mst_institute_general_select { - height: 28px; - margin-top: -15px; - position: relative; - right: -22px -} - #rep_institute_general { margin-top: 0px; } -#mst_comm_general_select { - margin-top: -15px; - border-radius: 5px; - position: relative; - right: -22px -} - #rep_comm_general { margin-top: 0px; } @@ -2261,62 +2255,14 @@ button#create_tree:hover { margin-top: 0px } -.append_table { - margin-top: 0px; - margin-left: 3px -} - -div#append_isodate.shiny-date-input.form-group.shiny-input-container.shiny-bound-input input.form-control.shinyjs-resettable { - text-align: center -} - -div#append_analysisdate.shiny-date-input.form-group.shiny-input-container.shiny-bound-input input.form-control.shinyjs-resettable { - text-align: center -} - -.append_table_country .btn { - height: 32px -} - -.append_table_country { - margin-top: 23px; - margin-bottom: 5px -} - -button#conf_meta_single { - background: #20e6e5; - color: black -} - -.append_table { - margin-top: 0px; - margin-left: 3px -} - -div#append_isodate_multi.shiny-date-input.form-group.shiny-input-container.shiny-bound-input input.form-control.shinyjs-resettable { - text-align: center -} - -div#append_analysisdate_multi.shiny-date-input.form-group.shiny-input-container.shiny-bound-input input.form-control.shinyjs-resettable { - text-align: center -} - -.append_table_country .btn { - height: 32px -} - -.append_table_country { - margin-top: 23px; - margin-bottom: 5px +#rep_general { + margin-top: -13px; } -button#conf_meta_multi { - background: #20e6e5; - color: black +#rep_analysis { + margin-top: -32px; } -#logText { - color:black; - white-space: pre-wrap; - max-width: 100%; -} +#rep_plot_report { + margin-top: -51px; +} \ No newline at end of file From 401c32e5964d514b823771cc0da8fb423dfdaca9 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Fri, 15 Mar 2024 19:45:04 +0100 Subject: [PATCH 24/26] Prepared CSS style sheet for UPGMA transfer from NJ --- www/mycss.css | 771 ++++++++------------------------------------------ 1 file changed, 113 insertions(+), 658 deletions(-) diff --git a/www/mycss.css b/www/mycss.css index 500d00e..6973814 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -193,6 +193,20 @@ input.form-control.pickr-color { margin-bottom: 0px; } +@keyframes pulsate { + 0% { transform: scale(1); } + 50% { transform: scale(1.1); } + 100% { transform: scale(1); } +} + +.pulsating-button { + animation: pulsate 1s ease infinite; +} + +.pulsating-button:hover { + animation: none; +} + /* Icons */ i.fas { @@ -323,18 +337,16 @@ div#progress_bar.progress-bar { /* Visualization MST */ -@keyframes pulsate { - 0% { transform: scale(1); } - 50% { transform: scale(1.1); } - 100% { transform: scale(1); } -} - -.pulsating-button { - animation: pulsate 1s ease infinite; +button#create_tree { + position: relative; + left: -15px; + width = 100%; + border: none; } -.pulsating-button:hover { - animation: none; +button#create_tree:hover { + background: #3c8c56; + border: none; } #mst_ratio { @@ -474,6 +486,15 @@ button#mst_label_menu { right: -22px } +#node_font_color { + margin-top: 17px +} + +#scale_nodes { + position: relative; + bottom: -1px +} + /* Visualization NJ & UPGMA */ /* Classes*/ @@ -614,20 +635,17 @@ button#mst_label_menu { text-align: center; } -#upgma_zoom irs.irs--shiny.js-irs-4.irs.irs-line { - width: 108px; -} - -#nj_clade_scale { +#nj_clade_scale, #upgma_clade_scale { margin-bottom:; 1px; } -#nj_parentnode { +#nj_parentnode, #upgma_parentnode { margin-left: 38px; margin-top: -10px; } -#nj_layout_ctrl, #nj_label_ctrl, #nj_elements_ctrl { +#nj_layout_ctrl, #nj_label_ctrl, #nj_elements_ctrl, +#upgma_layout_ctrl, #upgma_label_ctrl, #upgma_elements_ctrl { width: 134px; margin-left: 25px; margin-bottom: 5px; @@ -637,20 +655,15 @@ button#mst_label_menu { font-size: larger; } -#nj_layout_ctrl { +#nj_layout_ctrl, #upgma_layout_ctrl { margin-top: 20px !important; } -#nj_field img { +#nj_field img, +#upgma_field img{ border-radius: 10px; } -#include_edge, #include_node { - width: 20px; - height: 20px; - margin-top: 13px; -} - button#save_plot_jpeg { font-size: 14px; height: 34px; @@ -691,17 +704,7 @@ button#save_plot_html_bttn { right: 20px; } -button#download_nj_bttn { - font-size: 14px; - height: 34px; - background: #20E6E5; - color: #000000; - position: relative; - top: 10px; - right: 20px; -} - -button#download_upgma_bttn { +button#download_nj_bttn, button#download_upgma_bttn { font-size: 14px; height: 34px; background: #20E6E5; @@ -711,13 +714,7 @@ button#download_upgma_bttn { right: 20px; } -#nj_ratio { - position: absolute; - right: 36px; - top: 23px; -} - -#upgma_ratio { +#nj_ratio, #upgma_ratio { position: absolute; right: 36px; top: 23px; @@ -732,97 +729,59 @@ button#download_report_bttn { top: -25px; } -#nj_v { +#nj_v, #nj_h, #upgma_h, #upgma_v { padding: initial; margin-top: 3px; width: 75px; text-align: center; } -#nj_h { - padding: initial; - margin-top: 3px; - width: 75px; - text-align: center; -} - -#upgma_v { - padding: initial; - margin-top: 3px; - width: 75px; - text-align: center; -} - -#upgma_h { - padding: initial; - margin-top: 3px; - width: 75px; - text-align: center; -} - -#nj_title_color { +#nj_title_color, #upgma_title_color { margin-bottom: -15px; margin-top: -16px; } -#nj_bg { +#nj_bg, #upgma_bg { margin-bottom: 10px; } -#nj_branch_label_menu-template > div > div:nth-child(2) > div:nth-child(2) { - margin-top: 26px; - margin-bottom: -10px; -} - +#nj_branch_label_menu-template > div > div:nth-child(2) > div:nth-child(2), #upgma_branch_label_menu-template > div > div:nth-child(2) > div:nth-child(2) { margin-top: 26px; margin-bottom: -10px; } -#node_font_color { - margin-top: 17px -} - -#scale_nodes { - position: relative; - bottom: -1px -} - -#nj_controls { +#nj_controls, #upgma_controls { margin-left: 25px; margin-top: 35px; } -#nj_controls > div > div:nth-child(1) { - height: 50px; - width: 100px; -} - -#nj_controls > div > div:nth-child(2) { +#nj_controls > div > div:nth-child(1), +#upgma_controls > div > div:nth-child(1), +#nj_controls > div > div:nth-child(2), +#upgma_controls > div > div:nth-child(2), +#nj_controls > div > div:nth-child(3), +#upgma_controls > div > div:nth-child(3) { height: 50px; width: 100px; } -#nj_controls > div > div:nth-child(3) { - height: 50px; - width: 100px; -} - -#nj_color_mapping { +#nj_color_mapping, +#upgma_color_mapping { margin-top: -7px; margin-bottom: 0px; margin-right: 30px; } -#nj_heatmap_scale, #nj_tiles_scale_1, #nj_tiles_scale_2, #nj_tiles_scale_3, #nj_tiles_scale_4, #nj_tiles_scale_5 { +#nj_heatmap_scale, #nj_tiles_scale_1, #nj_tiles_scale_2, #nj_tiles_scale_3, #nj_tiles_scale_4, #nj_tiles_scale_5, #upgma_heatmap_scale, #upgma_tiles_scale_1, #upgma_tiles_scale_2, #upgma_tiles_scale_3, #upgma_tiles_scale_4, #upgma_tiles_scale_5 { margin-top: -10px; } -#nj_branch_label_color { +#nj_branch_label_color, #upgma_branch_label_color { margin-top: -7px; } -button#nj_labeltext_menu { +button#nj_labeltext_menu, button#upgma_labeltext_menu { height: 34px; background: #20E6E5; color: #000000; @@ -831,7 +790,7 @@ button#nj_labeltext_menu { margin-left: -50px } -button#nj_labelformat_menu { +button#nj_labelformat_menu, button#upgma_labelformat_menu { height: 34px; background: #20E6E5; color: #000000; @@ -839,15 +798,7 @@ button#nj_labelformat_menu { margin-top: 20px } -button#nj_subtitle_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-top: 20px; - border-radius: 5px -} - -button#nj_footer_menu { +button#nj_footer_menu, button#upgma_footer_menu { height: 34px; background: #20E6E5; color: #000000; @@ -855,7 +806,7 @@ button#nj_footer_menu { border-radius: 5px } -button#nj_title_menu { +button#nj_title_menu, button#upgma_title_menu { height: 34px; background: #20E6E5; color: #000000; @@ -864,7 +815,7 @@ button#nj_title_menu { margin-bottom: -24px; } -button#nj_size_menu { +button#nj_size_menu, button#upgma_size_menu { height: 34px; background: #20E6E5; color: #000000; @@ -873,7 +824,7 @@ button#nj_size_menu { margin-left: -15px; } -button#nj_branch_label_menu { +button#nj_branch_label_menu, button#upgma_branch_label_menu { height: 34px; background: #20E6E5; color: #000000; @@ -882,7 +833,7 @@ button#nj_branch_label_menu { margin-left: 10px } -button#nj_legend_menu { +button#nj_legend_menu, button#upgma_legend_menu { height: 34px; background: #20E6E5; color: #000000; @@ -890,7 +841,7 @@ button#nj_legend_menu { border-radius: 5px } -button#nj_treescale_menu { +button#nj_treescale_menu, button#upgma_treescale_menu { height: 34px; background: #20E6E5; color: #000000; @@ -898,7 +849,7 @@ button#nj_treescale_menu { border-radius: 5px } -button#nj_tippoint_menu { +button#nj_tippoint_menu, button#upgma_tippoint_menu { height: 34px; background: #20E6E5; color: #000000; @@ -906,7 +857,7 @@ button#nj_tippoint_menu { border-radius: 5px } -button#nj_rootedge_menu { +button#nj_rootedge_menu, button#upgma_rootedge_menu { height: 34px; background: #20E6E5; color: #000000; @@ -916,7 +867,7 @@ button#nj_rootedge_menu { margin-bottom: 23px; } -button#nj_nodepoint_menu { +button#nj_nodepoint_menu, button#upgma_nodepoint_menu { height: 34px; background: #20E6E5; color: #000000; @@ -924,7 +875,7 @@ button#nj_nodepoint_menu { border-radius: 5px } -button#nj_heatmap_menu { +button#nj_heatmap_menu, button#upgma_heatmap_menu { height: 34px; background: #20E6E5; color: #000000; @@ -933,7 +884,7 @@ button#nj_heatmap_menu { margin-left: -10px; } -button#nj_clade_menu { +button#nj_clade_menu, button#upgma_clade_menu { height: 34px; background: #20E6E5; color: #000000; @@ -941,7 +892,9 @@ button#nj_clade_menu { border-radius: 5px } -button#nj_tile_menu { +button#nj_tile_menu, button#nj_tile_menu_2, button#nj_tile_menu_3, +button#nj_tile_menu_4, button#nj_tile_menu_5, button#upgma_tile_menu, +button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, button#upgma_tile_menu_5 { height: 34px; background: #20E6E5; color: #000000; @@ -950,87 +903,27 @@ button#nj_tile_menu { border-radius: 5px } -button#nj_tile_menu_2 { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px -} - -button#nj_tile_menu_3 { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px -} - -button#nj_tile_menu_4 { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px -} - -button#nj_tile_menu_5 { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px -} - -#nj_nodepoint_color, #nj_tippoint_color { +#nj_nodepoint_color, #nj_tippoint_color, #upgma_nodepoint_color, #upgma_tippoint_color { margin-bottom: 10px; margin-top: 6px; } -#nj_treescale_show { +#nj_treescale_show, #upgma_treescale_show { margin-top: 17px; } -#nj_tiles_show { - margin-top: 18px; - margin-left: -5px -} - -#nj_tiles_show_2 { - margin-top: 18px; - margin-left: -5px -} - -#nj_tiles_show_3 { - margin-top: 18px; - margin-left: -5px -} - -#nj_tiles_show_4 { - margin-top: 18px; - margin-left: -5px -} - -#nj_tiles_show_5 { - margin-top: 18px; - margin-left: -5px -} - -#nodepoint_show { +#nj_tiles_show, #nj_tiles_show_2, #nj_tiles_show_3, #nj_tiles_show_4, #nj_tiles_show_5, +#upgma_tiles_show, #upgma_tiles_show_2, #upgma_tiles_show_3, #upgma_tiles_show_4, #upgma_tiles_show_5 { margin-top: 18px; margin-left: -5px } -#nj_ladder { +#nj_ladder, #upgma_ladder { margin-top: 8px; margin-left: -5px } -#nj_align { +#nj_align, #upgma_align { margin-top: 10px; margin-left: -60px } @@ -1040,21 +933,21 @@ button#nj_tile_menu_5 { margin-left: -15px; } -#nj_mapping_show { +#nj_mapping_show, #upgma_mapping_show { margin-top: 13px; } -#nj_tipcolor_mapping, #nj_tipshape_mapping_show { +#nj_tipcolor_mapping, #nj_tipshape_mapping_show, #upgma_tipcolor_mapping, #upgma_tipshape_mapping_show { margin-top: -10px; margin-right: 30px; } -#nj_tipshape_mapping, #nj_fruit_variable, #nj_fruit_variable2, #nj_fruit_variable3, #nj_fruit_variable4, #nj_fruit_variable5 { +#nj_tipshape_mapping, #nj_fruit_variable, #nj_fruit_variable2, #nj_fruit_variable3, #nj_fruit_variable4, #nj_fruit_variable5, #upgma_tipshape_mapping, #upgma_fruit_variable, #upgma_fruit_variable2, #upgma_fruit_variable3, #upgma_fruit_variable4, #upgma_fruit_variable5 { margin-top: -10px; margin-right: 30px; } -#nj_tiplab_scale, #nj_tippoint_scale { +#nj_tiplab_scale, #nj_tippoint_scale, #upgma_tiplab_scale, #upgma_tippoint_scale { margin-top: 0px; margin-bottom: -10px; } @@ -1063,577 +956,140 @@ button#nj_tile_menu_5 { margin-top: -7px; } -#nj_tipcolor_mapping { +#shiny-tab-visualization > div:nth-child(5) > div > div:nth-child(5) > div > div > div > div > div > div:nth-child(3) > div:nth-child(3) > div > div > div { margin-top: -10px; } -#shiny-tab-visualization > div:nth-child(5) > div > div:nth-child(5) > div > div > div > div > div > div:nth-child(3) > div:nth-child(3) > div > div > div { +#nj_tipcolor_mapping, #upgma_tipcolor_mapping { margin-top: -10px; } -#nj_geom { +#nj_geom, #upgma_geom { margin-top: 0px; margin-left: -5px; margin-bottom: 0px; } -#nj_tiplab_color { +#nj_tiplab_color, #upgma_tiplab_color { margin-bottom: 7px; margin-top: -7px; } -#nj_show_branch_label { - margin-top: 17px; - margin-left: -5px -} - -#tippoint_show { +#nj_show_branch_label, #upgma_show_branch_label { margin-top: 17px; margin-left: -5px } -#nj_tiplab_show { +#nj_tiplab_show, #upgma_tiplab_show { margin-top: 17px; margin-left: -5px } -#nj_fruit_offset { +#nj_fruit_offset, #upgma_fruit_offset { position: relative; top: -20px } -#nj_layout .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { +#nj_layout .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y, +#upgma_layout .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y{ margin-bottom: 16px } -#nj_div_tiles { +#nj_div_tiles, #upgma_div_tiles { position: absolute; bottom: 4px; margin-left: -5px } -#nj_fruit_offset_2 { +#nj_fruit_offset_2, #upgma_fruit_offset_2 { position: relative; top: -20px } -#nj_layout_2 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { +#nj_layout_2 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y, +#upgma_layout_2 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y{ margin-bottom: 16px } -#nj_div_tiles_2 { +#nj_div_tiles_2, #upgma_div_tiles_2 { position: absolute; bottom: 4px; margin-left: -5px } -#nj_fruit_offset_3 { +#nj_fruit_offset_3, #upgma_fruit_offset_3 { position: relative; top: -20px } -#nj_layout_3 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { +#nj_layout_3 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y, +#upgma_layout_3 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y{ margin-bottom: 16px } -#nj_div_tiles_3 { +#nj_div_tiles_3, #upgma_div_tiles_3 { position: absolute; bottom: 4px; margin-left: -5px } -#nj_fruit_offset_4 { +#nj_fruit_offset_4, #upgma_fruit_offset_4 { position: relative; top: -20px } -#nj_layout_4 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { +#nj_layout_4 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y, +#upgma_layout_4 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y{ margin-bottom: 16px } -#nj_div_tiles_4 { +#nj_div_tiles_4, #upgma_div_tiles_4 { position: absolute; bottom: 4px; margin-left: -5px } -#nj_fruit_offset_5 { +#nj_fruit_offset_5, #upgma_fruit_offset_5 { position: relative; top: -20px } -#nj_layout_5 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { +#nj_layout_5 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y, +#upgma_layout_5 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { margin-bottom: 16px } -#nj_div_tiles_5 { +#nj_div_tiles_5, #upgma_div_tiles_5 { position: absolute; bottom: 4px; margin-left: -5px } -#nj_heatmap_width { +#nj_heatmap_width, #upgma_heatmap_width { margin-top: 8px; } -#nj_heatmap_offset { +#nj_heatmap_offset, #upgma_heatmap_offset { margin-top: 4px; margin-bottom: 2px; } -#nj_fruit_width, #nj_fruit_width2, #nj_fruit_width3, #nj_fruit_width4, #nj_fruit_width5 { +#nj_fruit_width, #nj_fruit_width2, #nj_fruit_width3, #nj_fruit_width4, #nj_fruit_width5, +#upgma_fruit_width, #upgma_fruit_width2, #upgma_fruit_width3, #upgma_fruit_width4, #upgma_fruit_width5{ margin-top: -5px; margin-bottom: -15px; } -#nj_tile_color_low { - position: relative; - right: -13px; -} - -#nj_tile_color_low_2 { - position: relative; - right: -13px; -} - -#nj_tile_color_low_3 { - position: relative; - right: -13px; -} - -#nj_tile_color_low_4 { - position: relative; - right: -13px; -} - -#nj_tile_color_low_5 { - position: relative; - right: -13px; -} - -#nj_tile_color_high { - position: relative; - right: 13px; -} - -#nj_tile_color_high_2 { - position: relative; - right: 13px; -} - -#nj_tile_color_high_3 { - position: relative; - right: 13px; -} - -#nj_tile_color_high_4 { - position: relative; - right: 13px; -} - -#nj_tile_color_high_5 { - position: relative; - right: 13px; -} - -#nj_heatmap_show { +#nj_heatmap_show, #upgma_heatmap_show { margin-top: 18px; margin-left: -5px; } -#nj_nodepoint_show { - margin-top: 18px; - margin-left: -5px -} - -#nj_tippoint_show { +#nj_nodepoint_show, #nj_tippoint_show, #upgma_nodepoint_show, #upgma_tippoint_show { margin-top: 18px; margin-left: -5px } -#upgma_labeltext_menu { - height: 34px; - background: #20E6E5; - color: #000000; - border-radius: 5px; - margin-top: 20px; - margin-left: 10px -} - -button#upgma_labelformat_menu { - height: 34px; - background: #20E6E5; - color: #000000; - border-radius: 5px; - margin-top: 20px -} - -button#upgma_subtitle_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-top: 20px; - border-radius: 5px -} - -button#upgma_footer_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-top: 20px; - border-radius: 5px -} - -button#upgma_title_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-top: 20px; - border-radius: 5px -} - -button#upgma_branch_label_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-top: 20px; - border-radius: 5px; - margin-left: 10px -} - -button#upgma_legend_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-top: 20px; - border-radius: 5px -} - -button#upgma_treescale_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-top: 20px; - border-radius: 5px -} - -button#upgma_rootedge_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 10px; - margin-top: 22px; - border-radius: 5px -} - -button#upgma_tippoint_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-top: 21px; - border-radius: 5px -} - -button#upgma_nodepoint_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-top: 21px; - border-radius: 5px -} - -button#upgma_heatmap_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-top: 21px; - border-radius: 5px -} - -button#upgma_tile_menu { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px -} - -button#upgma_tile_menu_2 { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px -} - -button#upgma_tile_menu_3 { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px -} - -button#upgma_tile_menu_4 { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px -} - -button#upgma_tile_menu_5 { - height: 34px; - background: #20E6E5; - color: #000000; - margin-left: 15px; - margin-top: 21px; - border-radius: 5px -} - -#upgma_tippoint_color { - margin-bottom: 0px -} - -#upgma_nodepoint_color { - margin-bottom: 16px; -} - -#upgma_treescale_show { - margin-top: 17px; -} - -#upgma_tiles_show { - margin-top: 18px; - margin-left: -5px -} - -#upgma_tiles_show_2 { - margin-top: 18px; - margin-left: -5px -} - -#upgma_tiles_show_3 { - margin-top: 18px; - margin-left: -5px -} - -#upgma_tiles_show_4 { - margin-top: 18px; - margin-left: -5px -} - -#upgma_tiles_show_5 { - margin-top: 18px; - margin-left: -5px -} - -#upgma_nodepoint_show { - margin-top: 18px; - margin-left: -5px -} - -#upgma_ladder { - margin-top: 19px; - margin-left: -5px -} - -#upgma_align { - margin-top: 21px; - margin-left: -5px -} - -#upgma_rootedge_show { - margin-top: 20px -} - -#upgma_mapping_show { - margin-top: 20px; -} - -#upgma_tipcolor_mapping_show { - margin-top: 20px; -} - -#upgma_tipshape_mapping_show { - margin-top: 20px; -} - -#upgma_geom { - margin-top: 0px; - margin-left: -5px -} - -#upgma_tiplab_color { - margin-bottom: 0px; -} - -#upgma_show_branch_label { - margin-top: 17px; - margin-left: -5px -} - -#upgma_tippoint_show { - margin-top: 17px; - margin-left: -5px -} - -#upgma_tiplab_show { - margin-top: 17px; - margin-left: -5px -} - -#upgma_fruit_offset { - position: relative; - top: -20px -} - -#upgma_layout .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { - margin-bottom: 16px -} - -#upgma_div_tiles { - position: absolute; - bottom: 4px; - margin-left: -5px -} - -#upgma_fruit_offset_2 { - position: relative; - top: -20px -} - -#upgma_layout_2 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { - margin-bottom: 16px -} - -#upgma_div_tiles_2 { - position: absolute; - bottom: 4px; - margin-left: -5px -} - -#upgma_fruit_offset_3 { - position: relative; - top: -20px -} - -#upgma_layout_3 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { - margin-bottom: 16px -} - -#upgma_div_tiles_3 { - position: absolute; - bottom: 4px; - margin-left: -5px -} - -#upgma_fruit_offset_4 { - position: relative; - top: -20px -} - -#upgma_layout_4 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { - margin-bottom: 16px -} - -#upgma_div_tiles_4 { - position: absolute; - bottom: 4px; - margin-left: -5px -} - -#upgma_fruit_offset_5 { - position: relative; - top: -20px -} - -#upgma_layout_5 .shiny-input-select.shinyjs-resettable.selectize-control.single plugin-selectize-plugin-a11y { - margin-bottom: 16px -} - -#upgma_div_tiles_5 { - position: absolute; - bottom: 4px; - margin-left: -5px -} - -#upgma_tile_color_low { - position: relative; - right: -13px; -} - -#upgma_tile_color_low_2 { - position: relative; - right: -13px; -} - -#upgma_tile_color_low_3 { - position: relative; - right: -13px; -} - -#upgma_tile_color_low_4 { - position: relative; - right: -13px; -} - -#upgma_tile_color_low_5 { - position: relative; - right: -13px; -} - -#upgma_tile_color_high { - position: relative; - right: 13px; -} - -#upgma_tile_color_high_2 { - position: relative; - right: 13px; -} - -#upgma_tile_color_high_3 { - position: relative; - right: 13px; -} - -#upgma_tile_color_high_4 { - position: relative; - right: 13px; -} - -#upgma_tile_color_high_5 { - position: relative; - right: 13px; -} - -#upgma_heatmap_show { - margin-top: 18px; - margin-left: -5px; -} - -#upgma_heatmap_title { - position: relative; - bottom: -20px -} - -button#create_tree { - position: relative; - left: -15px; - width = 100%; - border: none; -} - -button#create_tree:hover { - background: #3c8c56; - border: none; -} - #nj_tiplab_scale .option[data-value="Set1"], #nj_tippoint_scale .option[data-value="Set1"], #nj_tiles_scale_1 .option[data-value="Set1"], @@ -1648,7 +1104,6 @@ button#create_tree:hover { margin-bottom: 2px; } - #nj_tiplab_scale .option[data-value="Set2"], #nj_tippoint_scale .option[data-value="Set2"], #nj_tiles_scale_1 .option[data-value="Set2"], From b158b7b08bf74cc9c838e5c2fb2f27f4bccfed9e Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Sat, 16 Mar 2024 17:46:38 +0100 Subject: [PATCH 25/26] Transfer NJ changes to UPGMA Part 1 --- App.R | 1489 +++++++++++++++++++++++++++++++++++-------------- www/mycss.css | 456 +++++++++++++-- 2 files changed, 1491 insertions(+), 454 deletions(-) diff --git a/App.R b/App.R index b2651e9..f0ec8c0 100644 --- a/App.R +++ b/App.R @@ -12990,8 +12990,8 @@ server <- function(input, output, session) { if(input$nj_nodelabel_show == TRUE) { ggtree(Vis$nj, alpha = 0.2) + geom_nodelab(aes(label = node), color = "#29303A", size = nj_tiplab_size() + 1, hjust = 0.7) + - limit() + - inward() + nj_limit() + + nj_inward() } else { tree <- ggtree(Vis$nj, @@ -13001,15 +13001,15 @@ server <- function(input, output, session) { nj_tiplab() + nj_tiplab_scale() + new_scale_color() + - limit() + - inward() + - label_branch() + - treescale() + - nodepoint() + - tippoint() + + nj_limit() + + nj_inward() + + nj_label_branch() + + nj_treescale() + + nj_nodepoint() + + nj_tippoint() + nj_tippoint_scale() + new_scale_color() + - clip_label() + + nj_clip_label() + nj_rootedge() + nj_clades() + ggtitle(label = input$nj_title, @@ -13059,7 +13059,7 @@ server <- function(input, output, session) { legend_title = input$nj_heatmap_title, colnames_angle = -nj_colnames_angle(), colnames_offset_y = nj_colnames_y()) + - heatmap_scale() + nj_heatmap_scale() } } @@ -13128,7 +13128,7 @@ server <- function(input, output, session) { }) # Heatmap scale - heatmap_scale <- reactive({ + nj_heatmap_scale <- reactive({ if(!is.null(input$nj_heatmap_scale)) { if(input$nj_heatmap_scale %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { if(input$nj_heatmap_div_mid == "Zero") { @@ -13701,7 +13701,7 @@ server <- function(input, output, session) { }) # No label clip off for linear NJ tree - clip_label <- reactive({ + nj_clip_label <- reactive({ if(!(input$nj_layout == "circular" | input$nj_layout == "inward")) { coord_cartesian(clip = "off") } else {NULL} @@ -14000,14 +14000,14 @@ server <- function(input, output, session) { }) # Xlim - limit <- reactive({ + nj_limit <- reactive({ if(input$nj_layout == "circular") { xlim(input$nj_xlim, NA) } else {NULL} }) # Treescale - treescale <- reactive({ + nj_treescale <- reactive({ if(!input$nj_layout == "circular") { if(input$nj_treescale_show == TRUE) { geom_treescale(x = nj_treescale_x(), @@ -14043,7 +14043,7 @@ server <- function(input, output, session) { }) # Label branches - label_branch <- reactive({ + nj_label_branch <- reactive({ if(!input$nj_layout == "circular" | !input$nj_layout == "inward") { if(input$nj_show_branch_label == TRUE) { geom_label( @@ -14085,7 +14085,7 @@ server <- function(input, output, session) { }) # Tippoints - tippoint <- reactive({ + nj_tippoint <- reactive({ if(input$nj_tippoint_show == TRUE | input$nj_tipcolor_mapping_show == TRUE | input$nj_tipshape_mapping_show == TRUE) { if(input$nj_tipcolor_mapping_show == TRUE & input$nj_tipshape_mapping_show == FALSE) { geom_tippoint( @@ -14121,7 +14121,7 @@ server <- function(input, output, session) { }) # Nodepoints - nodepoint <- reactive({ + nj_nodepoint <- reactive({ if(input$nj_nodepoint_show == TRUE) { geom_nodepoint( alpha = input$nj_nodepoint_alpha, @@ -14321,7 +14321,7 @@ server <- function(input, output, session) { }) # NJ inward circular - inward <- reactive({ + nj_inward <- reactive({ if (input$nj_layout == "inward") { layout_inward_circular(xlim = input$nj_inward_xlim) } else { @@ -14332,75 +14332,380 @@ server <- function(input, output, session) { #### UPGMA ---- upgma_tree <- reactive({ - Vis$meta_upgma$Errors <- as.numeric(Vis$meta_upgma$Errors) - tree <- - ggtree(Vis$upgma, - color = input$upgma_color, - layout = layout_upgma(), - ladderize = input$upgma_ladder) %<+% Vis$meta_upgma + - upgma_tiplab() + - upgma_limit() + - upgma_inward() + - upgma_label_branch() + - upgma_treescale() + - upgma_nodepoint() + - upgma_tippoint() + - upgma_clip_label() + - upgma_rootedge() + - ggtitle(label = input$upgma_title, - subtitle = input$upgma_subtitle) + - theme_tree(bgcolor = input$upgma_bg) + - theme(plot.title = element_text(colour = input$upgma_title_color, - size = input$upgma_title_size), - plot.subtitle = element_text(colour = input$upgma_subtitle_color, - size = input$upgma_subtitle_size), - legend.background = element_rect(fill = input$upgma_bg), - legend.direction = input$upgma_legend_orientation, - legend.position = upgma_legend_pos(), - legend.title = element_text(color = input$upgma_color, - size = input$upgma_legend_size*1.2), - legend.title.align = 0.5, - legend.text = element_text(color = input$upgma_color, - size = input$upgma_legend_size), - legend.key = element_rect(fill = input$upgma_bg), - legend.box.spacing = unit(1.5, "cm"), - legend.key.size = unit(0.05*input$upgma_legend_size, 'cm'), - plot.background = element_rect(fill = input$upgma_bg, color = input$upgma_bg)) + - new_scale_fill() + - upgma_fruit() + - upgma_gradient() + - new_scale_fill() + - upgma_fruit2() + - upgma_gradient2() + - new_scale_fill() + - upgma_fruit3() + - upgma_gradient3() + - new_scale_fill() + - upgma_fruit4() + - upgma_gradient4() + - new_scale_fill() + - upgma_fruit5() + - upgma_gradient5() - - if(input$upgma_heatmap_show == TRUE & length(input$upgma_heatmap_select) > 0) { - tree <- gheatmap(tree, - data = select(Vis$meta_upgma, input$upgma_heatmap_select), - offset = upgma_heatmap_offset(), - width = input$upgma_heatmap_width, - legend_title = input$upgma_heatmap_title, - colnames_angle = -(input$upgma_colnames_angle), - colnames_offset_x = input$upgma_colnames_x, - colnames_offset_y = input$upgma_colnames_y - ) - } - - Vis$upgma_plot <- ggplotify::as.ggplot(tree, - scale = input$upgma_zoom, - hjust = input$upgma_h, - vjust = input$upgma_v) - - cowplot::ggdraw(Vis$upgma_plot) + - theme(plot.background = element_rect(fill = input$upgma_bg, color = input$upgma_bg)) + if(input$upgma_nodelabel_show == TRUE) { + ggtree(Vis$upgma, alpha = 0.2) + + geom_nodelab(aes(label = node), color = "#29303A", size = upgma_tiplab_size() + 1, hjust = 0.7) + + upgma_limit() + + upgma_inward() + } else { + tree <- + ggtree(Vis$upgma, + color = input$upgma_color, + layout = layout_upgma(), + ladderize = input$upgma_ladder) %<+% Vis$meta_upgma + + upgma_tiplab() + + upgma_tiplab_scale() + + new_scale_color() + + upgma_limit() + + upgma_inward() + + upgma_label_branch() + + upgma_treescale() + + upgma_nodepoint() + + upgma_tippoint() + + upgma_tippoint_scale() + + new_scale_color() + + upgma_clip_label() + + upgma_rootedge() + + upgma_clades() + + ggtitle(label = input$upgma_title, + subtitle = input$upgma_subtitle) + + theme_tree(bgcolor = input$upgma_bg) + + theme(plot.title = element_text(colour = input$upgma_title_color, + size = input$upgma_title_size), + plot.subtitle = element_text(colour = input$upgma_title_color, + size = input$upgma_subtitle_size), + legend.background = element_rect(fill = input$upgma_bg), + legend.direction = input$upgma_legend_orientation, + legend.title = element_text(color = input$upgma_color, + size = input$upgma_legend_size*1.2), + legend.title.align = 0.5, + legend.position = upgma_legend_pos(), + legend.text = element_text(color = input$upgma_color, + size = input$upgma_legend_size), + legend.key = element_rect(fill = input$upgma_bg), + legend.box.spacing = unit(1.5, "cm"), + legend.key.size = unit(0.05*input$upgma_legend_size, 'cm'), + plot.background = element_rect(fill = input$upgma_bg, color = input$upgma_bg)) + + new_scale_fill() + + upgma_fruit() + + upgma_gradient() + + new_scale_fill() + + upgma_fruit2() + + upgma_gradient2() + + new_scale_fill() + + upgma_fruit3() + + upgma_gradient3() + + new_scale_fill() + + upgma_fruit4() + + upgma_gradient4() + + new_scale_fill() + + upgma_fruit5() + + upgma_gradient5() + + new_scale_fill() + + # Add heatmap + if(input$upgma_heatmap_show == TRUE & length(input$upgma_heatmap_select) > 0) { + if (!(any(sapply(DB$meta[input$upgma_heatmap_select], is.numeric)) & + any(!sapply(DB$meta[input$upgma_heatmap_select], is.numeric)))) { + tree <- gheatmap(tree, + data = select(Vis$meta_upgma, input$upgma_heatmap_select), + offset = upgma_heatmap_offset(), + width = upgma_heatmap_width(), + legend_title = input$upgma_heatmap_title, + colnames_angle = -upgma_colnames_angle(), + colnames_offset_y = upgma_colnames_y()) + + upgma_heatmap_scale() + } + } + + # Sizing control + Vis$upgma_plot <- ggplotify::as.ggplot(tree, + scale = input$upgma_zoom, + hjust = input$upgma_h, + vjust = input$upgma_v) + + # Correct background color if zoomed out + cowplot::ggdraw(Vis$upgma_plot) + + theme(plot.background = element_rect(fill = input$upgma_bg, color = input$upgma_bg)) + } + }) + + # Heatmap width + upgma_heatmap_width <- reactive({ + if(!is.null(input$upgma_heatmap_width)) { + input$upgma_heatmap_width + } else { + length_input <- length(input$upgma_heatmap_select) + if((!(input$upgma_layout == "circular")) & (!(input$upgma_layout == "inward"))) { + if(length_input < 3) { + 0.1 + } else { + if (length_input >= 3 && length_input <= 50) { + min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + 1.5 + } + } + } else { + if(length_input < 3) { + 0.3 + } else if (length_input >= 3 && length_input <= 27) { + min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + 3 + } + } + } + }) + + # Heatmap column titles position + upgma_colnames_y <- reactive({ + if(!is.null(input$upgma_colnames_y)) { + input$upgma_colnames_y + } else { + if(input$upgma_layout == "inward" | input$upgma_layout == "circular") { + 0 + } else {-1} + } + }) + + # Heatmap column titles angle + upgma_colnames_angle <- reactive({ + if(!is.null(input$upgma_colnames_angle)) { + input$upgma_colnames_angle + } else { + if(!is.null(input$upgma_layout)) { + if(input$upgma_layout == "inward" | input$upgma_layout == "circular") { + 90 + } else {-90} + } else {-90} + } + }) + + # Heatmap scale + upgma_heatmap_scale <- reactive({ + if(!is.null(input$upgma_heatmap_scale)) { + if(input$upgma_heatmap_scale %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$upgma_heatmap_div_mid == "Zero") { + midpoint <- 0 + } else if(input$upgma_heatmap_div_mid == "Mean") { + midpoint <- mean(DB$meta_true[[input$upgma_heatmap_select]], na.rm = TRUE) + } else { + midpoint <- median(DB$meta_true[[input$upgma_heatmap_select]], na.rm = TRUE) + } + scale_fill_gradient2(low = brewer.pal(3, input$upgma_heatmap_scale)[1], + mid = brewer.pal(3, input$upgma_heatmap_scale)[2], + high = brewer.pal(3, input$upgma_heatmap_scale)[3], + midpoint = midpoint, + name = input$upgma_heatmap_title) + } else { + if(input$upgma_heatmap_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$upgma_heatmap_select])) == "numeric") { + if(input$upgma_heatmap_scale == "magma") { + scale_fill_viridis(option = "A", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "inferno") { + scale_fill_viridis(option = "B", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "plasma") { + scale_fill_viridis(option = "C", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "viridis") { + scale_fill_viridis(option = "D", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "cividis") { + scale_fill_viridis(option = "E", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "rocket") { + scale_fill_viridis(option = "F", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "mako") { + scale_fill_viridis(option = "G", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "turbo") { + scale_fill_viridis(option = "H", + name = input$upgma_heatmap_title) + } + } else { + if(input$upgma_heatmap_scale == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G", + name = input$upgma_heatmap_title) + } else if(input$upgma_heatmap_scale == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H", + name = input$upgma_heatmap_title) + } + } + } else { + scale_fill_brewer(palette = input$upgma_heatmap_scale, + name = input$upgma_heatmap_title) + } + } + } + }) + + # Tippoint Scale + upgma_tippoint_scale <- reactive({ + if(!is.null(input$upgma_tippoint_scale)) { + if(input$upgma_tippoint_scale %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$upgma_tipcolor_mapping_div_mid == "Zero") { + midpoint <- 0 + } else if(input$upgma_tipcolor_mapping_div_mid == "Mean") { + midpoint <- mean(DB$meta_true[[input$upgma_tipcolor_mapping]], na.rm = TRUE) + } else { + midpoint <- median(DB$meta_true[[input$upgma_tipcolor_mapping]], na.rm = TRUE) + } + scale_color_gradient2(low = brewer.pal(3, input$upgma_tippoint_scale)[1], + mid = brewer.pal(3, input$upgma_tippoint_scale)[2], + high = brewer.pal(3, input$upgma_tippoint_scale)[3], + midpoint = midpoint) + } else { + if(input$upgma_tippoint_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$upgma_tipcolor_mapping])) == "numeric") { + if(input$upgma_tippoint_scale == "magma") { + scale_color_viridis(option = "A") + } else if(input$upgma_tippoint_scale == "inferno") { + scale_color_viridis(option = "B") + } else if(input$upgma_tippoint_scale == "plasma") { + scale_color_viridis(option = "C") + } else if(input$upgma_tippoint_scale == "viridis") { + scale_color_viridis(option = "D") + } else if(input$upgma_tippoint_scale == "cividis") { + scale_color_viridis(option = "E") + } else if(input$upgma_tippoint_scale == "rocket") { + scale_color_viridis(option = "F") + } else if(input$upgma_tippoint_scale == "mako") { + scale_color_viridis(option = "G") + } else if(input$upgma_tippoint_scale == "turbo") { + scale_color_viridis(option = "H") + } + } else { + if(input$upgma_tippoint_scale == "magma") { + scale_color_viridis(discrete = TRUE, option = "A") + } else if(input$upgma_tippoint_scale == "inferno") { + scale_color_viridis(discrete = TRUE, option = "B") + } else if(input$upgma_tippoint_scale == "plasma") { + scale_color_viridis(discrete = TRUE, option = "C") + } else if(input$upgma_tippoint_scale == "viridis") { + scale_color_viridis(discrete = TRUE, option = "D") + } else if(input$upgma_tippoint_scale == "cividis") { + scale_color_viridis(discrete = TRUE, option = "E") + } else if(input$upgma_tippoint_scale == "rocket") { + scale_color_viridis(discrete = TRUE, option = "F") + } else if(input$upgma_tippoint_scale == "mako") { + scale_color_viridis(discrete = TRUE, option = "G") + } else if(input$upgma_tippoint_scale == "turbo") { + scale_color_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_color_brewer(palette = input$upgma_tippoint_scale) + } + } + } + }) + + # Tiplab Scale + upgma_tiplab_scale <- reactive({ + if(!is.null(input$upgma_tiplab_scale)) { + if(input$upgma_tiplab_scale %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$upgma_color_mapping_div_mid == "Zero") { + midpoint <- 0 + } else if(input$upgma_color_mapping_div_mid == "Mean") { + midpoint <- mean(DB$meta_true[[input$upgma_color_mapping]], na.rm = TRUE) + } else { + midpoint <- median(DB$meta_true[[input$upgma_color_mapping]], na.rm = TRUE) + } + scale_color_gradient2(low = brewer.pal(3, input$upgma_tiplab_scale)[1], + mid = brewer.pal(3, input$upgma_tiplab_scale)[2], + high = brewer.pal(3, input$upgma_tiplab_scale)[3], + midpoint = midpoint) + } else { + if(input$upgma_tiplab_scale %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$upgma_color_mapping])) == "numeric") { + if(input$upgma_tiplab_scale == "magma") { + scale_color_viridis(option = "A") + } else if(input$upgma_tiplab_scale == "inferno") { + scale_color_viridis(option = "B") + } else if(input$upgma_tiplab_scale == "plasma") { + scale_color_viridis(option = "C") + } else if(input$upgma_tiplab_scale == "viridis") { + scale_color_viridis(option = "D") + } else if(input$upgma_tiplab_scale == "cividis") { + scale_color_viridis(option = "E") + } else if(input$upgma_tiplab_scale == "rocket") { + scale_color_viridis(option = "F") + } else if(input$upgma_tiplab_scale == "mako") { + scale_color_viridis(option = "G") + } else if(input$upgma_tiplab_scale == "turbo") { + scale_color_viridis(option = "H") + } + } else { + if(input$upgma_tiplab_scale == "magma") { + scale_color_viridis(discrete = TRUE, option = "A") + } else if(input$upgma_tiplab_scale == "inferno") { + scale_color_viridis(discrete = TRUE, option = "B") + } else if(input$upgma_tiplab_scale == "plasma") { + scale_color_viridis(discrete = TRUE, option = "C") + } else if(input$upgma_tiplab_scale == "viridis") { + scale_color_viridis(discrete = TRUE, option = "D") + } else if(input$upgma_tiplab_scale == "cividis") { + scale_color_viridis(discrete = TRUE, option = "E") + } else if(input$upgma_tiplab_scale == "rocket") { + scale_color_viridis(discrete = TRUE, option = "F") + } else if(input$upgma_tiplab_scale == "mako") { + scale_color_viridis(discrete = TRUE, option = "G") + } else if(input$upgma_tiplab_scale == "turbo") { + scale_color_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_color_brewer(palette = input$upgma_tiplab_scale) + } + } + } + }) + + # Clade Highlight + upgma_clades <- reactive({ + if(!is.null(input$upgma_parentnode)) { + if(!length(input$upgma_parentnode) == 0) { + if(length(input$upgma_parentnode) == 1) { + fill <- input$upgma_clade_scale + } else if (length(input$upgma_parentnode) == 2) { + fill <- brewer.pal(3, input$upgma_clade_scale)[1:2] + } else { + fill <- brewer.pal(length(input$upgma_parentnode), input$upgma_clade_scale) + } + geom_hilight(node = as.numeric(input$upgma_parentnode), + fill = fill, + align = input$upgma_clade_align, + type = input$upgma_clade_type, + gradient.direction = upgma_clade_grad_dir(), + gradient.length.out = upgma_clade_grad_len()) + } else {NULL} + } + }) + + # Clade highlight gradient direction + upgma_clade_grad_dir <- reactive({ + if(input$upgma_clade_type == "gradient") { + input$upgma_clade_grad_dir + } else {"rt"} + }) + + # Clade hightlight gradient length + upgma_clade_grad_len <- reactive({ + if(input$upgma_clade_type == "gradient") { + upgma_clade_grad_len + } else {2} }) # Legend Position @@ -14421,266 +14726,622 @@ server <- function(input, output, session) { # Tiles fill color gradient upgma_gradient <- reactive({ - if(input$upgma_tiles_show == TRUE) { - if(class(DB$meta_true[[input$upgma_fruit_variable]]) == "numeric") { - if(input$upgma_div_tiles == TRUE) { - if(input$upgma_tile_mid == "Median"){ - scale_fill_gradient2(low = input$upgma_tile_color_low, - mid = input$upgma_tile_color_mid, - midpoint = median(DB$meta_true[[input$upgma_fruit_variable]], na.rm = TRUE), - high = input$upgma_tile_color_high) - } else if(input$upgma_tile_mid == "Mean") { - scale_fill_gradient2(low = input$upgma_tile_color_low, - mid = input$upgma_tile_color_mid, - midpoint = mean(DB$meta_true[[input$upgma_fruit_variable]], na.rm = TRUE), - high = input$upgma_tile_color_high) + if((!is.null(input$upgma_tiles_show_1)) & + (!is.null(input$upgma_fruit_variable)) & + (!is.null(input$upgma_tiles_scale_1))) { + if(input$upgma_tiles_show_1 == TRUE) { + if(input$upgma_tiles_scale_1 %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$upgma_tiles_mapping_div_mid_1 == "Zero") { + midpoint <- 0 + } else if(input$upgma_tiles_mapping_div_mid_1 == "Mean") { + midpoint <- mean(DB$meta_true[[input$upgma_fruit_variable]], na.rm = TRUE) + } else { + midpoint <- median(DB$meta_true[[input$upgma_fruit_variable]], na.rm = TRUE) + } + scale_fill_gradient2(low = brewer.pal(3, input$upgma_tiles_scale_1)[1], + mid = brewer.pal(3, input$upgma_tiles_scale_1)[2], + high = brewer.pal(3, input$upgma_tiles_scale_1)[3], + midpoint = midpoint) + } else { + if(input$upgma_tiles_scale_1 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$upgma_fruit_variable])) == "numeric") { + if(input$upgma_tiles_scale_1 == "magma") { + scale_fill_viridis(option = "A") + } else if(input$upgma_tiles_scale_1 == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$upgma_tiles_scale_1 == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$upgma_tiles_scale_1 == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$upgma_tiles_scale_1 == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$upgma_tiles_scale_1 == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$upgma_tiles_scale_1 == "mako") { + scale_fill_viridis(option = "G") + } else if(input$upgma_tiles_scale_1 == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$upgma_tiles_scale_1 == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$upgma_tiles_scale_1 == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$upgma_tiles_scale_1 == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$upgma_tiles_scale_1 == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$upgma_tiles_scale_1 == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$upgma_tiles_scale_1 == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$upgma_tiles_scale_1 == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$upgma_tiles_scale_1 == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_fill_brewer(palette = input$upgma_tiles_scale_1) + } + } + } else {NULL} + } + }) + + upgma_gradient2 <- reactive({ + if((!is.null(input$upgma_tiles_show_2)) & + (!is.null(input$upgma_fruit_variable_2)) & + (!is.null(input$upgma_tiles_scale_2))) { + if(input$upgma_tiles_show_2 == TRUE) { + if(input$upgma_tiles_scale_2 %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$upgma_tiles_mapping_div_mid_2 == "Zero") { + midpoint <- 0 + } else if(input$upgma_tiles_mapping_div_mid_2 == "Mean") { + midpoint <- mean(DB$meta_true[[input$upgma_fruit_variable_2]], na.rm = TRUE) + } else { + midpoint <- median(DB$meta_true[[input$upgma_fruit_variable_2]], na.rm = TRUE) + } + scale_fill_gradient2(low = brewer.pal(3, input$upgma_tiles_scale_2)[1], + mid = brewer.pal(3, input$upgma_tiles_scale_2)[2], + high = brewer.pal(3, input$upgma_tiles_scale_2)[3], + midpoint = midpoint) + } else { + if(input$upgma_tiles_scale_2 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$upgma_fruit_variable_2])) == "numeric") { + if(input$upgma_tiles_scale_2 == "magma") { + scale_fill_viridis(option = "A") + } else if(input$upgma_tiles_scale_2 == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$upgma_tiles_scale_2 == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$upgma_tiles_scale_2 == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$upgma_tiles_scale_2 == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$upgma_tiles_scale_2 == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$upgma_tiles_scale_2 == "mako") { + scale_fill_viridis(option = "G") + } else if(input$upgma_tiles_scale_2 == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$upgma_tiles_scale_2 == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$upgma_tiles_scale_2 == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$upgma_tiles_scale_2 == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$upgma_tiles_scale_2 == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$upgma_tiles_scale_2 == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$upgma_tiles_scale_2 == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$upgma_tiles_scale_2 == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$upgma_tiles_scale_2 == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_fill_brewer(palette = input$upgma_tiles_scale_2) + } + } + } else {NULL} + } + }) + + upgma_gradient3 <- reactive({ + if((!is.null(input$upgma_tiles_show_3)) & + (!is.null(input$upgma_fruit_variable_3)) & + (!is.null(input$upgma_tiles_scale_3))) { + if(input$upgma_tiles_show_3 == TRUE) { + if(input$upgma_tiles_scale_3 %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$upgma_tiles_mapping_div_mid_3 == "Zero") { + midpoint <- 0 + } else if(input$upgma_tiles_mapping_div_mid_3 == "Mean") { + midpoint <- mean(DB$meta_true[[input$upgma_fruit_variable_3]], na.rm = TRUE) + } else { + midpoint <- median(DB$meta_true[[input$upgma_fruit_variable_3]], na.rm = TRUE) + } + scale_fill_gradient3(low = brewer.pal(3, input$upgma_tiles_scale_3)[1], + mid = brewer.pal(3, input$upgma_tiles_scale_3)[2], + high = brewer.pal(3, input$upgma_tiles_scale_3)[3], + midpoint = midpoint) + } else { + if(input$upgma_tiles_scale_3 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$upgma_fruit_variable_3])) == "numeric") { + if(input$upgma_tiles_scale_3 == "magma") { + scale_fill_viridis(option = "A") + } else if(input$upgma_tiles_scale_3 == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$upgma_tiles_scale_3 == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$upgma_tiles_scale_3 == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$upgma_tiles_scale_3 == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$upgma_tiles_scale_3 == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$upgma_tiles_scale_3 == "mako") { + scale_fill_viridis(option = "G") + } else if(input$upgma_tiles_scale_3 == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$upgma_tiles_scale_3 == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$upgma_tiles_scale_3 == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$upgma_tiles_scale_3 == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$upgma_tiles_scale_3 == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$upgma_tiles_scale_3 == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$upgma_tiles_scale_3 == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$upgma_tiles_scale_3 == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$upgma_tiles_scale_3 == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_fill_brewer(palette = input$upgma_tiles_scale_3) + } + } + } else {NULL} + } + }) + + upgma_gradient4 <- reactive({ + if((!is.null(input$upgma_tiles_show_4)) & + (!is.null(input$upgma_fruit_variable_4)) & + (!is.null(input$upgma_tiles_scale_4))) { + if(input$upgma_tiles_show_4 == TRUE) { + if(input$upgma_tiles_scale_4 %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$upgma_tiles_mapping_div_mid_4 == "Zero") { + midpoint <- 0 + } else if(input$upgma_tiles_mapping_div_mid_4 == "Mean") { + midpoint <- mean(DB$meta_true[[input$upgma_fruit_variable_4]], na.rm = TRUE) + } else { + midpoint <- median(DB$meta_true[[input$upgma_fruit_variable_4]], na.rm = TRUE) + } + scale_fill_gradient4(low = brewer.pal(3, input$upgma_tiles_scale_4)[1], + mid = brewer.pal(3, input$upgma_tiles_scale_4)[2], + high = brewer.pal(3, input$upgma_tiles_scale_4)[3], + midpoint = midpoint) + } else { + if(input$upgma_tiles_scale_4 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$upgma_fruit_variable])) == "numeric") { + if(input$upgma_tiles_scale_4 == "magma") { + scale_fill_viridis(option = "A") + } else if(input$upgma_tiles_scale_4 == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$upgma_tiles_scale_4 == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$upgma_tiles_scale_4 == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$upgma_tiles_scale_4 == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$upgma_tiles_scale_4 == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$upgma_tiles_scale_4 == "mako") { + scale_fill_viridis(option = "G") + } else if(input$upgma_tiles_scale_4 == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$upgma_tiles_scale_4 == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$upgma_tiles_scale_4 == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$upgma_tiles_scale_4 == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$upgma_tiles_scale_4 == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$upgma_tiles_scale_4 == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$upgma_tiles_scale_4 == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$upgma_tiles_scale_4 == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$upgma_tiles_scale_4 == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } + } else { + scale_fill_brewer(palette = input$upgma_tiles_scale_4) + } + } + } else {NULL} + } + }) + + upgma_gradient5 <- reactive({ + if((!is.null(input$upgma_tiles_show_5)) & + (!is.null(input$upgma_fruit_variable_5)) & + (!is.null(input$upgma_tiles_scale_5))) { + if(input$upgma_tiles_show_5 == TRUE) { + if(input$upgma_tiles_scale_5 %in% c("Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PuOr", "PRGn", "PiYG", "BrBG")) { + if(input$upgma_tiles_mapping_div_mid_5 == "Zero") { + midpoint <- 0 + } else if(input$upgma_tiles_mapping_div_mid_5 == "Mean") { + midpoint <- mean(DB$meta_true[[input$upgma_fruit_variable_5]], na.rm = TRUE) + } else { + midpoint <- median(DB$meta_true[[input$upgma_fruit_variable_5]], na.rm = TRUE) + } + scale_fill_gradient5(low = brewer.pal(3, input$upgma_tiles_scale_5)[1], + mid = brewer.pal(3, input$upgma_tiles_scale_5)[2], + high = brewer.pal(3, input$upgma_tiles_scale_5)[3], + midpoint = midpoint) + } else { + if(input$upgma_tiles_scale_5 %in% c("magma", "inferno", "plasma", "viridis", "cividis", "rocket", "mako", "turbo")) { + if(class(unlist(DB$meta[input$upgma_fruit_variable_5])) == "numeric") { + if(input$upgma_tiles_scale_5 == "magma") { + scale_fill_viridis(option = "A") + } else if(input$upgma_tiles_scale_5 == "inferno") { + scale_fill_viridis(option = "B") + } else if(input$upgma_tiles_scale_5 == "plasma") { + scale_fill_viridis(option = "C") + } else if(input$upgma_tiles_scale_5 == "viridis") { + scale_fill_viridis(option = "D") + } else if(input$upgma_tiles_scale_5 == "cividis") { + scale_fill_viridis(option = "E") + } else if(input$upgma_tiles_scale_5 == "rocket") { + scale_fill_viridis(option = "F") + } else if(input$upgma_tiles_scale_5 == "mako") { + scale_fill_viridis(option = "G") + } else if(input$upgma_tiles_scale_5 == "turbo") { + scale_fill_viridis(option = "H") + } + } else { + if(input$upgma_tiles_scale_5 == "magma") { + scale_fill_viridis(discrete = TRUE, option = "A") + } else if(input$upgma_tiles_scale_5 == "inferno") { + scale_fill_viridis(discrete = TRUE, option = "B") + } else if(input$upgma_tiles_scale_5 == "plasma") { + scale_fill_viridis(discrete = TRUE, option = "C") + } else if(input$upgma_tiles_scale_5 == "viridis") { + scale_fill_viridis(discrete = TRUE, option = "D") + } else if(input$upgma_tiles_scale_5 == "cividis") { + scale_fill_viridis(discrete = TRUE, option = "E") + } else if(input$upgma_tiles_scale_5 == "rocket") { + scale_fill_viridis(discrete = TRUE, option = "F") + } else if(input$upgma_tiles_scale_5 == "mako") { + scale_fill_viridis(discrete = TRUE, option = "G") + } else if(input$upgma_tiles_scale_5 == "turbo") { + scale_fill_viridis(discrete = TRUE, option = "H") + } + } } else { - scale_fill_gradient2(low = input$upgma_tile_color_low, - mid = input$upgma_tile_color_mid, - high = input$upgma_tile_color_high) + scale_fill_brewer(palette = input$upgma_tiles_scale_5) } + } + } else {NULL} + } + }) + + # No label clip off for linear upgma tree + upgma_clip_label <- reactive({ + if(!(input$upgma_layout == "circular" | input$upgma_layout == "inward")) { + coord_cartesian(clip = "off") + } else {NULL} + }) + + # Geom Fruit + upgma_fruit <- reactive({ + if((!is.null(input$upgma_tiles_show_1)) & + (!is.null(input$upgma_fruit_variable)) & + (!is.null(input$upgma_layout)) & + (!is.null(input$upgma_fruit_offset_circ)) & + (!is.null(input$upgma_fruit_width_circ)) & + (!is.null(input$upgma_fruit_alpha))) { + if(input$upgma_tiles_show_1 == TRUE) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable)), + offset = input$upgma_fruit_offset_circ, + width = input$upgma_fruit_width_circ, + alpha = input$upgma_fruit_alpha + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable)), + offset = input$upgma_fruit_offset_circ, + width = input$upgma_fruit_width_circ, + alpha = input$upgma_fruit_alpha + ) + } + } else {NULL} + } else { + if(input$upgma_tiles_show_1 == TRUE) { + if(!is.null(Vis$upgma_max_x)) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + width <- 1 + } else { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) + } + } else { + width <- 2 + } + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable)), + offset = 0, + width = width * 3, + alpha = 1 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable)), + offset = 0, + width = width, + alpha = 1 + ) + } + } else {NULL} + } + }) + + # Geom Fruit + upgma_fruit2 <- reactive({ + if((!is.null(input$upgma_tiles_show_2)) & + (!is.null(input$upgma_fruit_variable_2)) & + (!is.null(input$upgma_layout)) & + (!is.null(input$upgma_fruit_offset_circ_2)) & + (!is.null(input$upgma_fruit_width_circ_2)) & + (!is.null(input$upgma_fruit_alpha_2))) { + if(input$upgma_tiles_show_2 == TRUE) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$upgma_fruit_variable_2)), + offset = input$upgma_fruit_offset_circ_2, + width = input$upgma_fruit_width_circ_2, + alpha = input$upgma_fruit_alpha_2 + ) } else { - scale_fill_gradient(low = input$upgma_tile_color_low, - high = input$upgma_tile_color_high) + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$upgma_fruit_variable_2)), + offset = input$upgma_fruit_offset_circ_2, + width = input$upgma_fruit_width_circ_2, + alpha = input$upgma_fruit_alpha_2 + ) } } else {NULL} - } else {NULL} - }) - - upgma_gradient2 <- reactive({ - if(input$upgma_tiles_show_2 == TRUE) { - if(class(DB$meta_true[[input$upgma_fruit_variable_2]]) == "numeric") { - if(input$upgma_div_tiles == TRUE) { - if(input$upgma_tile_mid == "Median"){ - scale_fill_gradient2(low = input$upgma_tile_color_low_2, - mid = input$upgma_tile_color_mid_2, - midpoint = median(DB$meta_true[[input$upgma_fruit_variable_2]], na.rm = TRUE), - high = input$upgma_tile_color_high_2) - } else if(input$upgma_tile_mid == "Mean") { - scale_fill_gradient2(low = input$upgma_tile_color_low_2, - mid = input$upgma_tile_color_mid_2, - midpoint = mean(DB$meta_true[[input$upgma_fruit_variable_2]], na.rm = TRUE), - high = input$upgma_tile_color_high_2) + } else { + if(input$upgma_tiles_show_2 == TRUE) { + if(!is.null(Vis$upgma_max_x)) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + width <- 1 } else { - scale_fill_gradient2(low = input$upgma_tile_color_low_2, - mid = input$upgma_tile_color_mid_2, - high = input$upgma_tile_color_high_2) + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) } } else { - scale_fill_gradient(low = input$upgma_tile_color_low_2, - high = input$upgma_tile_color_high_2) + width <- 2 } - } else {NULL} - } else {NULL} - - }) - - upgma_gradient3 <- reactive({ - if(input$upgma_tiles_show_3 == TRUE) { - if(class(DB$meta_true[[input$upgma_fruit_variable_2]]) == "numeric") { - if(input$upgma_div_tiles == TRUE) { - if(input$upgma_tile_mid == "Median"){ - scale_fill_gradient2(low = input$upgma_tile_color_low_2, - mid = input$upgma_tile_color_mid_2, - midpoint = median(DB$meta_true[[input$upgma_fruit_variable_2]], na.rm = TRUE), - high = input$upgma_tile_color_high_2) - } else if(input$upgma_tile_mid == "Mean") { - scale_fill_gradient2(low = input$upgma_tile_color_low_2, - mid = input$upgma_tile_color_mid_2, - midpoint = mean(DB$meta_true[[input$upgma_fruit_variable_2]], na.rm = TRUE), - high = input$upgma_tile_color_high_2) - } else { - scale_fill_gradient2(low = input$upgma_tile_color_low_2, - mid = input$upgma_tile_color_mid_2, - high = input$upgma_tile_color_high_2) - } + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable_2)), + offset = 0.15, + width = width * 3, + alpha = 1 + ) } else { - scale_fill_gradient(low = input$upgma_tile_color_low_2, - high = input$upgma_tile_color_high_2) + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable_2)), + offset = 0.05, + width = width, + alpha = 1 + ) } } else {NULL} - }else {NULL} - + } }) - upgma_gradient4 <- reactive({ - if(input$upgma_tiles_show_4 == TRUE) { - if(class(DB$meta_true[[input$upgma_fruit_variable_4]]) == "numeric") { - if(input$upgma_div_tiles == TRUE) { - if(input$upgma_tile_mid == "Median"){ - scale_fill_gradient2(low = input$upgma_tile_color_low_4, - mid = input$upgma_tile_color_mid_4, - midpoint = median(DB$meta_true[[input$upgma_fruit_variable_4]], na.rm = TRUE), - high = input$upgma_tile_color_high_4) - } else if(input$upgma_tile_mid == "Mean") { - scale_fill_gradient2(low = input$upgma_tile_color_low_4, - mid = input$upgma_tile_color_mid_4, - midpoint = mean(DB$meta_true[[input$upgma_fruit_variable_4]], na.rm = TRUE), - high = input$upgma_tile_color_high_4) - } else { - scale_fill_gradient2(low = input$upgma_tile_color_low_4, - mid = input$upgma_tile_color_mid_4, - high = input$upgma_tile_color_high_4) - } + upgma_fruit3 <- reactive({ + if((!is.null(input$upgma_tiles_show_3)) & + (!is.null(input$upgma_fruit_variable_3)) & + (!is.null(input$upgma_layout)) & + (!is.null(input$upgma_fruit_offset_circ_3)) & + (!is.null(input$upgma_fruit_width_circ_3)) & + (!is.null(input$upgma_fruit_alpha_3))) { + if(input$upgma_tiles_show_3 == TRUE) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$upgma_fruit_variable_3)), + offset = input$upgma_fruit_offset_circ_3, + width = input$upgma_fruit_width_circ_3, + alpha = input$upgma_fruit_alpha_3 + ) } else { - scale_fill_gradient(low = input$upgma_tile_color_low_4, - high = input$upgma_tile_color_high_4) + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$upgma_fruit_variable_3)), + offset = input$upgma_fruit_offset_circ_3, + width = input$upgma_fruit_width_circ_3, + alpha = input$upgma_fruit_alpha_3 + ) } } else {NULL} - } else {NULL} - - }) - - upgma_gradient5 <- reactive({ - if(input$upgma_tiles_show_5 == TRUE) { - if(class(DB$meta_true[[input$upgma_fruit_variable_5]]) == "numeric") { - if(input$upgma_div_tiles == TRUE) { - if(input$upgma_tile_mid == "Median"){ - scale_fill_gradient2(low = input$upgma_tile_color_low_5, - mid = input$upgma_tile_color_mid_5, - midpoint = median(DB$meta_true[[input$upgma_fruit_variable_5]], na.rm = TRUE), - high = input$upgma_tile_color_high_5) - } else if(input$upgma_tile_mid == "Mean") { - scale_fill_gradient2(low = input$upgma_tile_color_low_5, - mid = input$upgma_tile_color_mid_5, - midpoint = mean(DB$meta_true[[input$upgma_fruit_variable_5]], na.rm = TRUE), - high = input$upgma_tile_color_high_5) + } else { + if(input$upgma_tiles_show_3 == TRUE) { + if(!is.null(Vis$upgma_max_x)) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + width <- 1 } else { - scale_fill_gradient2(low = input$upgma_tile_color_low_5, - mid = input$upgma_tile_color_mid_5, - high = input$upgma_tile_color_high_5) + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) } } else { - scale_fill_gradient(low = input$upgma_tile_color_low_5, - high = input$upgma_tile_color_high_5) + width <- 2 + } + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable_3)), + offset = 0.15, + width = width * 3, + alpha = 1 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable_3)), + offset = 0.05, + width = width, + alpha = 1 + ) } } else {NULL} - } else {NULL} - - }) - - - # No label clip off for linear UPGMA tree - upgma_clip_label <- reactive({ - if(!(input$upgma_layout == "circular" | input$upgma_layout == "inward")) { - coord_cartesian(clip = "off") - } else {NULL} - }) - - # Geom Fruit - upgma_fruit <- reactive({ - if(input$upgma_tiles_show == TRUE) { - if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$upgma_fruit_variable)), - offset = input$upgma_fruit_offset_circ, - width = input$upgma_fruit_width_circ, - alpha = input$upgma_fruit_alpha - ) - } else { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$upgma_fruit_variable)), - offset = input$upgma_fruit_offset_circ, - width = input$upgma_fruit_width_circ, - alpha = input$upgma_fruit_alpha - ) - } - } else {NULL} - }) - - # Geom Fruit - upgma_fruit2 <- reactive({ - if(input$upgma_tiles_show_2 == TRUE) { - if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$upgma_fruit_variable_2)), - offset = input$upgma_fruit_offset_circ_2, - width = input$upgma_fruit_width_circ_2, - alpha = input$upgma_fruit_alpha_2 - ) - } else { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$upgma_fruit_variable_2)), - offset = input$upgma_fruit_offset_circ_2, - width = input$upgma_fruit_width_circ_2, - alpha = input$upgma_fruit_alpha_2 - ) - } - } else {NULL} - }) - - upgma_fruit3 <- reactive({ - if(input$upgma_tiles_show_3 == TRUE) { - if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$upgma_fruit_variable_3)), - offset = input$upgma_fruit_offset_circ_3, - width = input$upgma_fruit_width_circ_3, - alpha = input$upgma_fruit_alpha_3 - ) - } else { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$upgma_fruit_variable_3)), - offset = input$upgma_fruit_offset_circ_3, - width = input$upgma_fruit_width_circ_3, - alpha = input$upgma_fruit_alpha_3 - ) - } - } else {NULL} - - + } }) upgma_fruit4 <- reactive({ - if(input$upgma_tiles_show_4 == TRUE) { - if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$upgma_fruit_variable_4)), - offset = input$upgma_fruit_offset_circ_4, - width = input$upgma_fruit_width_circ_4, - alpha = input$upgma_fruit_alpha_4 - ) + if((!is.null(input$upgma_tiles_show_4)) & + (!is.null(input$upgma_fruit_variable_4)) & + (!is.null(input$upgma_layout)) & + (!is.null(input$upgma_fruit_offset_circ_4)) & + (!is.null(input$upgma_fruit_width_circ_4)) & + (!is.null(input$upgma_fruit_alpha_4))) { + if(input$upgma_tiles_show_4 == TRUE) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$upgma_fruit_variable_4)), + offset = input$upgma_fruit_offset_circ_4, + width = input$upgma_fruit_width_circ_4, + alpha = input$upgma_fruit_alpha_4 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$upgma_fruit_variable_4)), + offset = input$upgma_fruit_offset_circ_4, + width = input$upgma_fruit_width_circ_4, + alpha = input$upgma_fruit_alpha_4 + ) + } } else { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$upgma_fruit_variable_4)), - offset = input$upgma_fruit_offset_circ_4, - width = input$upgma_fruit_width_circ_4, - alpha = input$upgma_fruit_alpha_4 - ) + if(input$upgma_tiles_show_4 == TRUE) { + if(!is.null(Vis$upgma_max_x)) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + width <- 1 + } else { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) + } + } else { + width <- 2 + } + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable_4)), + offset = 0.15, + width = width * 3, + alpha = 1 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable_4)), + offset = 0.05, + width = width, + alpha = 1 + ) + } + } else {NULL} } - } else {NULL} - + } }) upgma_fruit5 <- reactive({ - if(input$upgma_tiles_show_5 == TRUE) { - if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$upgma_fruit_variable_5)), - offset = input$upgma_fruit_offset_circ_5, - width = input$upgma_fruit_width_circ_5, - alpha = input$upgma_fruit_alpha_5 - ) - } else { - geom_fruit( - geom = geom_tile, - mapping = aes(fill = !!sym(input$upgma_fruit_variable_5)), - offset = input$upgma_fruit_offset_circ_5, - width = input$upgma_fruit_width_circ_5, - alpha = input$upgma_fruit_alpha_5 - ) - } - } else {NULL} - + if((!is.null(input$upgma_tiles_show_5)) & + (!is.null(input$upgma_fruit_variable_5)) & + (!is.null(input$upgma_layout)) & + (!is.null(input$upgma_fruit_offset_circ_5)) & + (!is.null(input$upgma_fruit_width_circ_5)) & + (!is.null(input$upgma_fruit_alpha_5))) { + if(input$upgma_tiles_show_5 == TRUE) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$upgma_fruit_variable_5)), + offset = input$upgma_fruit_offset_circ_5, + width = input$upgma_fruit_width_circ_5, + alpha = input$upgma_fruit_alpha_5 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill = !!sym(input$upgma_fruit_variable_5)), + offset = input$upgma_fruit_offset_circ_5, + width = input$upgma_fruit_width_circ_5, + alpha = input$upgma_fruit_alpha_5 + ) + } + } else {NULL} + } else { + if(input$upgma_tiles_show_5 == TRUE) { + if(!is.null(Vis$upgma_max_x)) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + width <- 1 + } else { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) + } + } else { + width <- 2 + } + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable_5)), + offset = 0.15, + width = width * 3, + alpha = 1 + ) + } else { + geom_fruit( + geom = geom_tile, + mapping = aes(fill= !!sym(input$upgma_fruit_variable_5)), + offset = 0.05, + width = width, + alpha = 1 + ) + } + } else {NULL} + } }) # Xlim @@ -14732,8 +15393,8 @@ server <- function(input, output, session) { if(input$upgma_show_branch_label == TRUE) { geom_label( aes( - x = !!sym("branch"), - label = !!sym(input$upgma_branch_label)), + x=!!sym("branch"), + label= !!sym(input$upgma_branch_label)), fill = input$upgma_branch_label_color, size = upgma_branch_size(), label.r = unit(input$upgma_branch_labelradius, "lines"), @@ -14770,23 +15431,14 @@ server <- function(input, output, session) { # Tippoints upgma_tippoint <- reactive({ - if(input$upgma_tippoint_show == TRUE) { + if(input$upgma_tippoint_show == TRUE | input$upgma_tipcolor_mapping_show == TRUE | input$upgma_tipshape_mapping_show == TRUE) { if(input$upgma_tipcolor_mapping_show == TRUE & input$upgma_tipshape_mapping_show == FALSE) { - if(input$upgma_mapping_show == TRUE) { - geom_tippoint( - aes(shape = !!sym(input$upgma_tipcolor_mapping)), - alpha = input$upgma_tippoint_alpha, - color = input$upgma_tippoint_color, - size = upgma_tippoint_size() - ) - } else { - geom_tippoint( - aes(color = !!sym(input$upgma_tipcolor_mapping)), - alpha = input$upgma_tippoint_alpha, - shape = input$upgma_tippoint_shape, - size = upgma_tippoint_size() - ) - } + geom_tippoint( + aes(color = !!sym(input$upgma_tipcolor_mapping)), + alpha = input$upgma_tippoint_alpha, + shape = input$upgma_tippoint_shape, + size = upgma_tippoint_size() + ) } else if (input$upgma_tipcolor_mapping_show == FALSE & input$upgma_tipshape_mapping_show == TRUE) { geom_tippoint( aes(shape = !!sym(input$upgma_tipshape_mapping)), @@ -14795,21 +15447,12 @@ server <- function(input, output, session) { size = upgma_tippoint_size() ) } else if (input$upgma_tipcolor_mapping_show == TRUE & input$upgma_tipshape_mapping_show == TRUE) { - if(input$upgma_mapping_show == TRUE) { - geom_tippoint( - aes(shape = !!sym(input$upgma_tipshape_mapping)), - color = input$upgma_tippoint_color, - alpha = input$upgma_tippoint_alpha, - size = upgma_tippoint_size() - ) - } else { - geom_tippoint( - aes(shape = !!sym(input$upgma_tipshape_mapping), - color = !!sym(input$upgma_tipcolor_mapping)), - alpha = input$upgma_tippoint_alpha, - size = upgma_tippoint_size() - ) - } + geom_tippoint( + aes(shape = !!sym(input$upgma_tipshape_mapping), + color = !!sym(input$upgma_tipcolor_mapping)), + alpha = input$upgma_tippoint_alpha, + size = upgma_tippoint_size() + ) } else { geom_tippoint( alpha = input$upgma_tippoint_alpha, @@ -14819,9 +15462,7 @@ server <- function(input, output, session) { size = upgma_tippoint_size() ) } - } else {NULL - - } + } else {NULL} }) # Nodepoints @@ -14851,11 +15492,9 @@ server <- function(input, output, session) { if(input$upgma_layout == "circular") { if(input$upgma_mapping_show == TRUE) { geom_tiplab( - upgma_mapping_tiplab(), + mapping_tiplab(), geom = "text", size = upgma_tiplab_size(), - linesize = input$upgma_tiplab_linesize, - linetype = input$upgma_tiplab_linetype, alpha = input$upgma_tiplab_alpha, fontface = input$upgma_tiplab_fontface, align = as.logical(input$upgma_align), @@ -14864,12 +15503,10 @@ server <- function(input, output, session) { ) } else { geom_tiplab( - upgma_mapping_tiplab(), + mapping_tiplab(), color = input$upgma_tiplab_color, geom = "text", size = upgma_tiplab_size(), - linesize = input$upgma_tiplab_linesize, - linetype = input$upgma_tiplab_linetype, alpha = input$upgma_tiplab_alpha, fontface = input$upgma_tiplab_fontface, align = as.logical(input$upgma_align), @@ -14880,11 +15517,9 @@ server <- function(input, output, session) { } else if (input$upgma_layout == "inward") { if(input$upgma_mapping_show == TRUE) { geom_tiplab( - upgma_mapping_tiplab(), + mapping_tiplab(), geom = "text", size = upgma_tiplab_size(), - linesize = input$upgma_tiplab_linesize, - linetype = input$upgma_tiplab_linetype, alpha = input$upgma_tiplab_alpha, fontface = input$upgma_tiplab_fontface, align = as.logical(input$upgma_align), @@ -14893,12 +15528,10 @@ server <- function(input, output, session) { ) } else { geom_tiplab( - upgma_mapping_tiplab(), + mapping_tiplab(), color = input$upgma_tiplab_color, geom = "text", size = upgma_tiplab_size(), - linesize = input$upgma_tiplab_linesize, - linetype = input$upgma_tiplab_linetype, alpha = input$upgma_tiplab_alpha, fontface = input$upgma_tiplab_fontface, align = as.logical(input$upgma_align), @@ -14908,40 +15541,65 @@ server <- function(input, output, session) { } } else { if(input$upgma_mapping_show == TRUE) { - geom_tiplab( - upgma_mapping_tiplab(), - geom = upgma_geom(), - angle = input$upgma_tiplab_angle, - size = upgma_tiplab_size(), - linesize = input$upgma_tiplab_linesize, - linetype = input$upgma_tiplab_linetype, - alpha = input$upgma_tiplab_alpha, - fontface = input$upgma_tiplab_fontface, - align = as.logical(input$upgma_align), - nudge_x = input$upgma_tiplab_nudge_x, - check.overlap = input$upgma_tiplab_overlap, - label.padding = unit(upgma_tiplab_padding(), "lines"), - label.r = unit(input$upgma_tiplab_labelradius, "lines"), - fill = input$upgma_tiplab_fill - ) + if(input$upgma_geom == TRUE) { + geom_tiplab( + mapping_tiplab(), + geom = upgma_geom(), + angle = input$upgma_tiplab_angle, + size = upgma_tiplab_size(), + alpha = input$upgma_tiplab_alpha, + fontface = input$upgma_tiplab_fontface, + align = as.logical(input$upgma_align), + nudge_x = input$upgma_tiplab_nudge_x, + check.overlap = input$upgma_tiplab_overlap, + label.padding = unit(upgma_tiplab_padding(), "lines"), + label.r = unit(input$upgma_tiplab_labelradius, "lines"), + fill = input$upgma_tiplab_fill + ) + } else { + geom_tiplab( + mapping_tiplab(), + geom = upgma_geom(), + angle = input$upgma_tiplab_angle, + size = upgma_tiplab_size(), + alpha = input$upgma_tiplab_alpha, + fontface = input$upgma_tiplab_fontface, + align = as.logical(input$upgma_align), + nudge_x = input$upgma_tiplab_nudge_x, + check.overlap = input$upgma_tiplab_overlap + ) + } } else { - geom_tiplab( - upgma_mapping_tiplab(), - geom = upgma_geom(), - color = input$upgma_tiplab_color, - angle = input$upgma_tiplab_angle, - size = upgma_tiplab_size(), - linesize = input$upgma_tiplab_linesize, - linetype = input$upgma_tiplab_linetype, - alpha = input$upgma_tiplab_alpha, - fontface = input$upgma_tiplab_fontface, - align = as.logical(input$upgma_align), - nudge_x = input$upgma_tiplab_nudge_x, - check.overlap = input$upgma_tiplab_overlap, - label.padding = unit(upgma_tiplab_padding(), "lines"), - label.r = unit(input$upgma_tiplab_labelradius, "lines"), - fill = input$upgma_tiplab_fill - ) + if(input$upgma_geom == TRUE) { + geom_tiplab( + mapping_tiplab(), + geom = upgma_geom(), + color = input$upgma_tiplab_color, + angle = input$upgma_tiplab_angle, + size = upgma_tiplab_size(), + alpha = input$upgma_tiplab_alpha, + fontface = input$upgma_tiplab_fontface, + align = as.logical(input$upgma_align), + nudge_x = input$upgma_tiplab_nudge_x, + check.overlap = input$upgma_tiplab_overlap, + label.padding = unit(upgma_tiplab_padding(), "lines"), + label.r = unit(input$upgma_tiplab_labelradius, "lines"), + fill = input$upgma_tiplab_fill + ) + } else { + geom_tiplab( + mapping_tiplab(), + geom = upgma_geom(), + color = input$upgma_tiplab_color, + angle = input$upgma_tiplab_angle, + size = upgma_tiplab_size(), + alpha = input$upgma_tiplab_alpha, + fontface = input$upgma_tiplab_fontface, + align = as.logical(input$upgma_align), + nudge_x = input$upgma_tiplab_nudge_x, + check.overlap = input$upgma_tiplab_overlap + ) + } } } } else {NULL} @@ -14956,15 +15614,6 @@ server <- function(input, output, session) { } }) - # Tippoint size - upgma_tippoint_size <- reactive({ - if(!is.null(input$upgma_tippoint_size)) { - input$upgma_tippoint_size - } else { - Vis$tippointsize_upgma - } - }) - # Tiplab size upgma_tiplab_size <- reactive({ if(!is.null(input$upgma_tiplab_size)) { @@ -14974,6 +15623,15 @@ server <- function(input, output, session) { } }) + # Tippoint size + upgma_tippoint_size <- reactive({ + if(!is.null(input$upgma_tippoint_size)) { + input$upgma_tippoint_size + } else { + Vis$tippointsize_upgma + } + }) + # Show Label Panels? upgma_geom <- reactive({ if(input$upgma_geom == TRUE) { @@ -14982,12 +15640,21 @@ server <- function(input, output, session) { }) # upgma Tiplab color - upgma_mapping_tiplab <- reactive({ + mapping_tiplab <- reactive({ if(input$upgma_mapping_show == TRUE) { - aes(label = !!sym(input$upgma_tiplab), - colour = !!sym(input$upgma_color_mapping)) + if(!is.null(input$upgma_tiplab)) { + aes(label = !!sym(input$upgma_tiplab), + color = !!sym(input$upgma_color_mapping)) + } else { + aes(label = !!sym("Assembly Name"), + color = !!sym(input$upgma_color_mapping)) + } } else { - aes(label = !!sym(input$upgma_tiplab)) + if(!is.null(input$upgma_tiplab)) { + aes(label = !!sym(input$upgma_tiplab)) + } else { + aes(label = !!sym("Assembly Name")) + } } }) diff --git a/www/mycss.css b/www/mycss.css index 6973814..7b6677a 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -1098,7 +1098,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Set1"], #nj_tiles_scale_5 .option[data-value="Set1"], #nj_heatmap_scale .option[data-value="Set1"], -#nj_clade_scale .option[data-value="Set1"] { +#nj_clade_scale .option[data-value="Set1"], +#upgma_tiplab_scale .option[data-value="Set1"], +#upgma_tippoint_scale .option[data-value="Set1"], +#upgma_tiles_scale_1 .option[data-value="Set1"], +#upgma_tiles_scale_2 .option[data-value="Set1"], +#upgma_tiles_scale_3 .option[data-value="Set1"], +#upgma_tiles_scale_4 .option[data-value="Set1"], +#upgma_tiles_scale_5 .option[data-value="Set1"], +#upgma_heatmap_scale .option[data-value="Set1"], +#upgma_clade_scale .option[data-value="Set1"] { background: linear-gradient(to right, #E41A1C 0%, #E41A1C 11%, #377EB8 11%, #377EB8 22%, #4DAF4A 22%, #4DAF4A 33%, #984EA3 33%, #984EA3 44%, #FF7F00 44%, #FF7F00 55%, #FFFF33 55%, #FFFF33 66%, #A65628 66%, #A65628 77%, #F781BF 77%, #F781BF 88%, #999999 88%, #999999 100%); color: black; margin-bottom: 2px; @@ -1112,7 +1121,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Set2"], #nj_tiles_scale_5 .option[data-value="Set2"], #nj_heatmap_scale .option[data-value="Set2"], -#nj_clade_scale .option[data-value="Set2"] { +#nj_clade_scale .option[data-value="Set2"], +#upgma_tiplab_scale .option[data-value="Set2"], +#upgma_tippoint_scale .option[data-value="Set2"], +#upgma_tiles_scale_1 .option[data-value="Set2"], +#upgma_tiles_scale_2 .option[data-value="Set2"], +#upgma_tiles_scale_3 .option[data-value="Set2"], +#upgma_tiles_scale_4 .option[data-value="Set2"], +#upgma_tiles_scale_5 .option[data-value="Set2"], +#upgma_heatmap_scale .option[data-value="Set2"], +#upgma_clade_scale .option[data-value="Set2"] { background: linear-gradient(to right, #66C2A5 0%, #66C2A5 12.5%, #FC8D62 12.5%, #FC8D62 25%, #8DA0CB 25%, #8DA0CB 37.5%, #E78AC3 37.5%, #E78AC3 50%, #A6D854 50%, #A6D854 62.5%, #FFD92F 62.5%, #FFD92F 75%, #E5C494 75%, #E5C494 87.5%, #B3B3B3 87.5%, #B3B3B3 100%); color: black; margin-bottom: 2px; @@ -1126,7 +1144,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Set3"], #nj_tiles_scale_5 .option[data-value="Set3"], #nj_heatmap_scale .option[data-value="Set3"], -#nj_clade_scale .option[data-value="Set3"] { +#nj_clade_scale .option[data-value="Set3"], +#upgma_tiplab_scale .option[data-value="Set3"], +#upgma_tippoint_scale .option[data-value="Set3"], +#upgma_tiles_scale_1 .option[data-value="Set3"], +#upgma_tiles_scale_2 .option[data-value="Set3"], +#upgma_tiles_scale_3 .option[data-value="Set3"], +#upgma_tiles_scale_4 .option[data-value="Set3"], +#upgma_tiles_scale_5 .option[data-value="Set3"], +#upgma_heatmap_scale .option[data-value="Set3"], +#upgma_clade_scale .option[data-value="Set3"] { background: linear-gradient(to right, #8DD3C7 0%, #8DD3C7 8.33333%, #FFFFB3 8.33333%, #FFFFB3 16.6667%, #BEBADA 16.6667%, #BEBADA 25%, #FB8072 25%, #FB8072 33.3333%, #80B1D3 33.3333%, #80B1D3 41.6667%, #FDB462 41.6667%, #FDB462 50%, #B3DE69 50%, #B3DE69 58.3333%, #FCCDE5 58.3333%, #FCCDE5 66.6667%, #D9D9D9 66.6667%, #D9D9D9 75%, #BC80BD 75%, #BC80BD 83.3333%, #CCEBC5 83.3333%, #CCEBC5 91.6667%, #FFED6F 91.6667%, #FFED6F 100%); color: black; margin-bottom: 2px; @@ -1140,7 +1167,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Pastel1"], #nj_tiles_scale_5 .option[data-value="Pastel1"], #nj_heatmap_scale .option[data-value="Pastel1"], -#nj_clade_scale .option[data-value="Pastel1"] { +#nj_clade_scale .option[data-value="Pastel1"], +#upgma_tiplab_scale .option[data-value="Pastel1"], +#upgma_tippoint_scale .option[data-value="Pastel1"], +#upgma_tiles_scale_1 .option[data-value="Pastel1"], +#upgma_tiles_scale_2 .option[data-value="Pastel1"], +#upgma_tiles_scale_3 .option[data-value="Pastel1"], +#upgma_tiles_scale_4 .option[data-value="Pastel1"], +#upgma_tiles_scale_5 .option[data-value="Pastel1"], +#upgma_heatmap_scale .option[data-value="Pastel1"], +#upgma_clade_scale .option[data-value="Pastel1"] { background: linear-gradient(to right, #FBB4AE 0%, #FBB4AE 11.1111%, #B3CDE3 11.1111%, #B3CDE3 22.2222%, #CCEBC5 22.2222%, #CCEBC5 33.3333%, #DECBE4 33.3333%, #DECBE4 44.4444%, #FED9A6 44.4444%, #FED9A6 55.5556%, #FFFFCC 55.5556%, #FFFFCC 66.6667%, #E5D8BD 66.6667%, #E5D8BD 77.7778%, #FDDAEC 77.7778%, #FDDAEC 88.8889%, #F2F2F2 88.8889%, #F2F2F2 100%); color: black; margin-bottom: 2px; @@ -1154,7 +1190,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Pastel2"], #nj_tiles_scale_5 .option[data-value="Pastel2"], #nj_heatmap_scale .option[data-value="Pastel2"], -#nj_clade_scale .option[data-value="Pastel2"] { +#nj_clade_scale .option[data-value="Pastel2"], +#upgma_tiplab_scale .option[data-value="Pastel2"], +#upgma_tippoint_scale .option[data-value="Pastel2"], +#upgma_tiles_scale_1 .option[data-value="Pastel2"], +#upgma_tiles_scale_2 .option[data-value="Pastel2"], +#upgma_tiles_scale_3 .option[data-value="Pastel2"], +#upgma_tiles_scale_4 .option[data-value="Pastel2"], +#upgma_tiles_scale_5 .option[data-value="Pastel2"], +#upgma_heatmap_scale .option[data-value="Pastel2"], +#upgma_clade_scale .option[data-value="Pastel2"] { background: linear-gradient(to right, #B3E2CD 0%, #B3E2CD 12.5%, #FDCDAC 12.5%, #FDCDAC 25%, #CBD5E8 25%, #CBD5E8 37.5%, #F4CAE4 37.5%, #F4CAE4 50%, #E6F5C9 50%, #E6F5C9 62.5%, #FFF2AE 62.5%, #FFF2AE 75%, #F1E2CC 75%, #F1E2CC 87.5%, #CCCCCC 87.5%, #CCCCCC 100%); color: black; margin-bottom: 2px; @@ -1168,7 +1213,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Paired"], #nj_tiles_scale_5 .option[data-value="Paired"], #nj_heatmap_scale .option[data-value="Paired"], -#nj_clade_scale .option[data-value="Paired"] { +#nj_clade_scale .option[data-value="Paired"], +#upgma_tiplab_scale .option[data-value="Paired"], +#upgma_tippoint_scale .option[data-value="Paired"], +#upgma_tiles_scale_1 .option[data-value="Paired"], +#upgma_tiles_scale_2 .option[data-value="Paired"], +#upgma_tiles_scale_3 .option[data-value="Paired"], +#upgma_tiles_scale_4 .option[data-value="Paired"], +#upgma_tiles_scale_5 .option[data-value="Paired"], +#upgma_heatmap_scale .option[data-value="Paired"], +#upgma_clade_scale .option[data-value="Paired"] { background: linear-gradient(to right, #A6CEE3 0%, #A6CEE3 8.33333%, #1F78B4 8.33333%, #1F78B4 16.6667%, #B2DF8A 16.6667%, #B2DF8A 25%, #33A02C 25%, #33A02C 33.3333%, #FB9A99 33.3333%, #FB9A99 41.6667%, #E31A1C 41.6667%, #E31A1C 50%, #FDBF6F 50%, #FDBF6F 58.3333%, #FF7F00 58.3333%, #FF7F00 66.6667%, #CAB2D6 66.6667%, #CAB2D6 75%, #6A3D9A 75%, #6A3D9A 83.3333%, #FFFF99 83.3333%, #FFFF99 91.6667%, #B15928 91.6667%, #B15928 100%); color: black; margin-bottom: 2px; @@ -1182,7 +1236,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Dark2"], #nj_tiles_scale_5 .option[data-value="Dark2"], #nj_heatmap_scale .option[data-value="Dark2"], -#nj_clade_scale .option[data-value="Dark2"] { +#nj_clade_scale .option[data-value="Dark2"], +#upgma_tiplab_scale .option[data-value="Dark2"], +#upgma_tippoint_scale .option[data-value="Dark2"], +#upgma_tiles_scale_1 .option[data-value="Dark2"], +#upgma_tiles_scale_2 .option[data-value="Dark2"], +#upgma_tiles_scale_3 .option[data-value="Dark2"], +#upgma_tiles_scale_4 .option[data-value="Dark2"], +#upgma_tiles_scale_5 .option[data-value="Dark2"], +#upgma_heatmap_scale .option[data-value="Dark2"], +#upgma_clade_scale .option[data-value="Dark2"] { background: linear-gradient(to right, #1B9E77 0%, #1B9E77 12.5%, #D95F02 12.5%, #D95F02 25%, #7570B3 25%, #7570B3 37.5%, #E7298A 37.5%, #E7298A 50%, #66A61E 50%, #66A61E 62.5%, #E6AB02 62.5%, #E6AB02 75%, #A6761D 75%, #A6761D 87.5%, #666666 87.5%, #666666 100%); color: black; margin-bottom: 2px; @@ -1196,7 +1259,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Accent"], #nj_tiles_scale_5 .option[data-value="Accent"], #nj_heatmap_scale .option[data-value="Accent"], -#nj_clade_scale .option[data-value="Accent"] { +#nj_clade_scale .option[data-value="Accent"], +#upgma_tiplab_scale .option[data-value="Accent"], +#upgma_tippoint_scale .option[data-value="Accent"], +#upgma_tiles_scale_1 .option[data-value="Accent"], +#upgma_tiles_scale_2 .option[data-value="Accent"], +#upgma_tiles_scale_3 .option[data-value="Accent"], +#upgma_tiles_scale_4 .option[data-value="Accent"], +#upgma_tiles_scale_5 .option[data-value="Accent"], +#upgma_heatmap_scale .option[data-value="Accent"], +#upgma_clade_scale .option[data-value="Accent"]{ background: linear-gradient(to right, #7FC97F 0%, #7FC97F 12.5%, #BEAED4 12.5%, #BEAED4 25%, #FDC086 25%, #FDC086 37.5%, #FFFF99 37.5%, #FFFF99 50%, #386CB0 50%, #386CB0 62.5%, #F0027F 62.5%, #F0027F 75%, #BF5B17 75%, #BF5B17 87.5%, #666666 87.5%, #666666 100%); color: black; } @@ -1209,7 +1281,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="YlOrRd"], #nj_tiles_scale_5 .option[data-value="YlOrRd"], #nj_heatmap_scale .option[data-value="YlOrRd"], -#nj_clade_scale .option[data-value="YlOrRd"] { +#nj_clade_scale .option[data-value="YlOrRd"], +#upgma_tiplab_scale .option[data-value="YlOrRd"], +#upgma_tippoint_scale .option[data-value="YlOrRd"], +#upgma_tiles_scale_1 .option[data-value="YlOrRd"], +#upgma_tiles_scale_2 .option[data-value="YlOrRd"], +#upgma_tiles_scale_3 .option[data-value="YlOrRd"], +#upgma_tiles_scale_4 .option[data-value="YlOrRd"], +#upgma_tiles_scale_5 .option[data-value="YlOrRd"], +#upgma_heatmap_scale .option[data-value="YlOrRd"], +#upgma_clade_scale .option[data-value="YlOrRd"] { background: linear-gradient(to right, #FFFFCC 0%, #FFFFCC 11.1111%, #FFEDA0 11.1111%, #FFEDA0 22.2222%, #FED976 22.2222%, #FED976 33.3333%, #FEB24C 33.3333%, #FEB24C 44.4444%, #FD8D3C 44.4444%, #FD8D3C 55.5556%, #FC4E2A 55.5556%, #FC4E2A 66.6667%, #E31A1C 66.6667%, #E31A1C 77.7778%, #BD0026 77.7778%, #BD0026 88.8889%, #800026 88.8889%, #800026 100%); color: white; margin-bottom: 2px; @@ -1223,7 +1304,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="YlOrBr"], #nj_tiles_scale_5 .option[data-value="YlOrBr"], #nj_heatmap_scale .option[data-value="YlOrBr"], -#nj_clade_scale .option[data-value="YlOrBr"] { +#nj_clade_scale .option[data-value="YlOrBr"], +#upgma_tiplab_scale .option[data-value="YlOrBr"], +#upgma_tippoint_scale .option[data-value="YlOrBr"], +#upgma_tiles_scale_1 .option[data-value="YlOrBr"], +#upgma_tiles_scale_2 .option[data-value="YlOrBr"], +#upgma_tiles_scale_3 .option[data-value="YlOrBr"], +#upgma_tiles_scale_4 .option[data-value="YlOrBr"], +#upgma_tiles_scale_5 .option[data-value="YlOrBr"], +#upgma_heatmap_scale .option[data-value="YlOrBr"], +#upgma_clade_scale .option[data-value="YlOrBr"] { background: linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11.1111%, #FFF7BC 11.1111%, #FFF7BC 22.2222%, #FEE391 22.2222%, #FEE391 33.3333%, #FEC44F 33.3333%, #FEC44F 44.4444%, #FE9929 44.4444%, #FE9929 55.5556%, #EC7014 55.5556%, #EC7014 66.6667%, #CC4C02 66.6667%, #CC4C02 77.7778%, #993404 77.7778%, #993404 88.8889%, #662506 88.8889%, #662506 100%); color: white; margin-bottom: 2px; @@ -1237,7 +1327,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="YlGnBu"], #nj_tiles_scale_5 .option[data-value="YlGnBu"], #nj_heatmap_scale .option[data-value="YlGnBu"], -#nj_clade_scale .option[data-value="YlGnBu"] { +#nj_clade_scale .option[data-value="YlGnBu"], +#upgma_tiplab_scale .option[data-value="YlGnBu"], +#upgma_tippoint_scale .option[data-value="YlGnBu"], +#upgma_tiles_scale_1 .option[data-value="YlGnBu"], +#upgma_tiles_scale_2 .option[data-value="YlGnBu"], +#upgma_tiles_scale_3 .option[data-value="YlGnBu"], +#upgma_tiles_scale_4 .option[data-value="YlGnBu"], +#upgma_tiles_scale_5 .option[data-value="YlGnBu"], +#upgma_heatmap_scale .option[data-value="YlGnBu"], +#upgma_clade_scale .option[data-value="YlGnBu"] { background: linear-gradient(to right, #FFFFD9 0%, #FFFFD9 11.1111%, #EDF8B1 11.1111%, #EDF8B1 22.2222%, #C7E9B4 22.2222%, #C7E9B4 33.3333%, #7FCDBB 33.3333%, #7FCDBB 44.4444%, #41B6C4 44.4444%, #41B6C4 55.5556%, #1D91C0 55.5556%, #1D91C0 66.6667%, #225EA8 66.6667%, #225EA8 77.7778%, #253494 77.7778%, #253494 88.8889%, #081D58 88.8889%, #081D58 100%); color: white; margin-bottom: 2px; @@ -1251,7 +1350,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="YlGn"], #nj_tiles_scale_5 .option[data-value="YlGn"], #nj_heatmap_scale .option[data-value="YlGn"], -#nj_clade_scale .option[data-value="YlGn"] { +#nj_clade_scale .option[data-value="YlGn"], +#upgma_tiplab_scale .option[data-value="YlGn"], +#upgma_tippoint_scale .option[data-value="YlGn"], +#upgma_tiles_scale_1 .option[data-value="YlGn"], +#upgma_tiles_scale_2 .option[data-value="YlGn"], +#upgma_tiles_scale_3 .option[data-value="YlGn"], +#upgma_tiles_scale_4 .option[data-value="YlGn"], +#upgma_tiles_scale_5 .option[data-value="YlGn"], +#upgma_heatmap_scale .option[data-value="YlGn"], +#upgma_clade_scale .option[data-value="YlGn"]{ background: linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11.1111%, #F7FCB9 11.1111%, #F7FCB9 22.2222%, #D9F0A3 22.2222%, #D9F0A3 33.3333%, #ADDD8E 33.3333%, #ADDD8E 44.4444%, #78C679 44.4444%, #78C679 55.5556%, #41AB5D 55.5556%, #41AB5D 66.6667%, #238443 66.6667%, #238443 77.7778%, #006837 77.7778%, #006837 88.8889%, #004529 88.8889%, #004529 100%); color: white; margin-bottom: 2px; @@ -1265,7 +1373,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Reds"], #nj_tiles_scale_5 .option[data-value="Reds"], #nj_heatmap_scale .option[data-value="Reds"], -#nj_clade_scale .option[data-value="Reds"] { +#nj_clade_scale .option[data-value="Reds"], +#upgma_tiplab_scale .option[data-value="Reds"], +#upgma_tippoint_scale .option[data-value="Reds"], +#upgma_tiles_scale_1 .option[data-value="Reds"], +#upgma_tiles_scale_2 .option[data-value="Reds"], +#upgma_tiles_scale_3 .option[data-value="Reds"], +#upgma_tiles_scale_4 .option[data-value="Reds"], +#upgma_tiles_scale_5 .option[data-value="Reds"], +#upgma_heatmap_scale .option[data-value="Reds"], +#upgma_clade_scale .option[data-value="Reds"] { background: linear-gradient(to right, #FFF5F0 0%, #FFF5F0 11.1111%, #FEE0D2 11.1111%, #FEE0D2 22.2222%, #FCBBA1 22.2222%, #FCBBA1 33.3333%, #FC9272 33.3333%, #FC9272 44.4444%, #FB6A4A 44.4444%, #FB6A4A 55.5556%, #EF3B2C 55.5556%, #EF3B2C 66.6667%, #CB181D 66.6667%, #CB181D 77.7778%, #A50F15 77.7778%, #A50F15 88.8889%, #67000D 88.8889%, #67000D 100%); color: white; margin-bottom: 2px; @@ -1279,7 +1396,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="RdPu"], #nj_tiles_scale_5 .option[data-value="RdPu"], #nj_heatmap_scale .option[data-value="RdPu"], -#nj_clade_scale .option[data-value="RdPu"] { +#nj_clade_scale .option[data-value="RdPu"], +#upgma_tiplab_scale .option[data-value="RdPu"], +#upgma_tippoint_scale .option[data-value="RdPu"], +#upgma_tiles_scale_1 .option[data-value="RdPu"], +#upgma_tiles_scale_2 .option[data-value="RdPu"], +#upgma_tiles_scale_3 .option[data-value="RdPu"], +#upgma_tiles_scale_4 .option[data-value="RdPu"], +#upgma_tiles_scale_5 .option[data-value="RdPu"], +#upgma_heatmap_scale .option[data-value="RdPu"], +#upgma_clade_scale .option[data-value="RdPu"] { background: linear-gradient(to right, #FFF7F3 0%, #FFF7F3 11.1111%, #FDE0DD 11.1111%, #FDE0DD 22.2222%, #FCC5C0 22.2222%, #FCC5C0 33.3333%, #FA9FB5 33.3333%, #FA9FB5 44.4444%, #F768A1 44.4444%, #F768A1 55.5556%, #DD3497 55.5556%, #DD3497 66.6667%, #AE017E 66.6667%, #AE017E 77.7778%, #7A0177 77.7778%, #7A0177 88.8889%, #49006A 88.8889%, #49006A 100%); color: white; margin-bottom: 2px; @@ -1293,7 +1419,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Purples"], #nj_tiles_scale_5 .option[data-value="Purples"], #nj_heatmap_scale .option[data-value="Purples"], -#nj_clade_scale .option[data-value="Purples"] { +#nj_clade_scale .option[data-value="Purples"], +#upgma_tiplab_scale .option[data-value="Purples"], +#upgma_tippoint_scale .option[data-value="Purples"], +#upgma_tiles_scale_1 .option[data-value="Purples"], +#upgma_tiles_scale_2 .option[data-value="Purples"], +#upgma_tiles_scale_3 .option[data-value="Purples"], +#upgma_tiles_scale_4 .option[data-value="Purples"], +#upgma_tiles_scale_5 .option[data-value="Purples"], +#upgma_heatmap_scale .option[data-value="Purples"], +#upgma_clade_scale .option[data-value="Purples"] { background: linear-gradient(to right, #FCFBFD 0%, #FCFBFD 11.1111%, #EFEDF5 11.1111%, #EFEDF5 22.2222%, #DADAEB 22.2222%, #DADAEB 33.3333%, #BCBDDC 33.3333%, #BCBDDC 44.4444%, #9E9AC8 44.4444%, #9E9AC8 55.5556%, #807DBA 55.5556%, #807DBA 66.6667%, #6A51A3 66.6667%, #6A51A3 77.7778%, #54278F 77.7778%, #54278F 88.8889%, #3F007D 88.8889%, #3F007D 100%); color: white; margin-bottom: 2px; @@ -1307,7 +1442,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="PuRd"], #nj_tiles_scale_5 .option[data-value="PuRd"], #nj_heatmap_scale .option[data-value="PuRd"], -#nj_clade_scale .option[data-value="PuRd"] { +#nj_clade_scale .option[data-value="PuRd"], +#upgma_tiplab_scale .option[data-value="PuRd"], +#upgma_tippoint_scale .option[data-value="PuRd"], +#upgma_tiles_scale_1 .option[data-value="PuRd"], +#upgma_tiles_scale_2 .option[data-value="PuRd"], +#upgma_tiles_scale_3 .option[data-value="PuRd"], +#upgma_tiles_scale_4 .option[data-value="PuRd"], +#upgma_tiles_scale_5 .option[data-value="PuRd"], +#upgma_heatmap_scale .option[data-value="PuRd"], +#upgma_clade_scale .option[data-value="PuRd"] { background: linear-gradient(to right, #F7F4F9 0%, #F7F4F9 11.1111%, #E7E1EF 11.1111%, #E7E1EF 22.2222%, #D4B9DA 22.2222%, #D4B9DA 33.3333%, #C994C7 33.3333%, #C994C7 44.4444%, #DF65B0 44.4444%, #DF65B0 55.5556%, #E7298A 55.5556%, #E7298A 66.6667%, #CE1256 66.6667%, #CE1256 77.7778%, #980043 77.7778%, #980043 88.8889%, #67001F 88.8889%, #67001F 100%); color: white; margin-bottom: 2px; @@ -1321,7 +1465,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="PuBuGn"], #nj_tiles_scale_5 .option[data-value="PuBuGn"], #nj_heatmap_scale .option[data-value="PuBuGn"], -#nj_clade_scale .option[data-value="PuBuGn"] { +#nj_clade_scale .option[data-value="PuBuGn"], +#upgma_tiplab_scale .option[data-value="PuBuGn"], +#upgma_tippoint_scale .option[data-value="PuBuGn"], +#upgma_tiles_scale_1 .option[data-value="PuBuGn"], +#upgma_tiles_scale_2 .option[data-value="PuBuGn"], +#upgma_tiles_scale_3 .option[data-value="PuBuGn"], +#upgma_tiles_scale_4 .option[data-value="PuBuGn"], +#upgma_tiles_scale_5 .option[data-value="PuBuGn"], +#upgma_heatmap_scale .option[data-value="PuBuGn"], +#upgma_clade_scale .option[data-value="PuBuGn"] { background: linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11.1111%, #ECE2F0 11.1111%, #ECE2F0 22.2222%, #D0D1E6 22.2222%, #D0D1E6 33.3333%, #A6BDDB 33.3333%, #A6BDDB 44.4444%, #67A9CF 44.4444%, #67A9CF 55.5556%, #3690C0 55.5556%, #3690C0 66.6667%, #02818A 66.6667%, #02818A 77.7778%, #016C59 77.7778%, #016C59 88.8889%, #014636 88.8889%, #014636 100%); color: white; margin-bottom: 2px; @@ -1335,7 +1488,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="PuBu"], #nj_tiles_scale_5 .option[data-value="PuBu"], #nj_heatmap_scale .option[data-value="PuBu"], -#nj_clade_scale .option[data-value="PuBu"] { +#nj_clade_scale .option[data-value="PuBu"], +#upgma_tiplab_scale .option[data-value="PuBu"], +#upgma_tippoint_scale .option[data-value="PuBu"], +#upgma_tiles_scale_1 .option[data-value="PuBu"], +#upgma_tiles_scale_2 .option[data-value="PuBu"], +#upgma_tiles_scale_3 .option[data-value="PuBu"], +#upgma_tiles_scale_4 .option[data-value="PuBu"], +#upgma_tiles_scale_5 .option[data-value="PuBu"], +#upgma_heatmap_scale .option[data-value="PuBu"], +#upgma_clade_scale .option[data-value="PuBu"] { background: linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11.1111%, #ECE7F2 11.1111%, #ECE7F2 22.2222%, #D0D1E6 22.2222%, #D0D1E6 33.3333%, #A6BDDB 33.3333%, #A6BDDB 44.4444%, #74A9CF 44.4444%, #74A9CF 55.5556%, #3690C0 55.5556%, #3690C0 66.6667%, #0570B0 66.6667%, #0570B0 77.7778%, #045A8D 77.7778%, #045A8D 88.8889%, #023858 88.8889%, #023858 100%); color: white; margin-bottom: 2px; @@ -1349,7 +1511,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="OrRd"], #nj_tiles_scale_5 .option[data-value="OrRd"], #nj_heatmap_scale .option[data-value="OrRd"], -#nj_clade_scale .option[data-value="OrRd"] { +#nj_clade_scale .option[data-value="OrRd"], +#upgma_tiplab_scale .option[data-value="OrRd"], +#upgma_tippoint_scale .option[data-value="OrRd"], +#upgma_tiles_scale_1 .option[data-value="OrRd"], +#upgma_tiles_scale_2 .option[data-value="OrRd"], +#upgma_tiles_scale_3 .option[data-value="OrRd"], +#upgma_tiles_scale_4 .option[data-value="OrRd"], +#upgma_tiles_scale_5 .option[data-value="OrRd"], +#upgma_heatmap_scale .option[data-value="OrRd"], +#upgma_clade_scale .option[data-value="OrRd"] { background: linear-gradient(to right, #FFF7EC 0%, #FFF7EC 11.1111%, #FEE8C8 11.1111%, #FEE8C8 22.2222%, #FDD49E 22.2222%, #FDD49E 33.3333%, #FDBB84 33.3333%, #FDBB84 44.4444%, #FC8D59 44.4444%, #FC8D59 55.5556%, #EF6548 55.5556%, #EF6548 66.6667%, #D7301F 66.6667%, #D7301F 77.7778%, #B30000 77.7778%, #B30000 88.8889%, #7F0000 88.8889%, #7F0000 100%); color: white; margin-bottom: 2px; @@ -1363,7 +1534,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Oranges"], #nj_tiles_scale_5 .option[data-value="Oranges"], #nj_heatmap_scale .option[data-value="Oranges"], -#nj_clade_scale .option[data-value="Oranges"] { +#nj_clade_scale .option[data-value="Oranges"], +#upgma_tiplab_scale .option[data-value="Oranges"], +#upgma_tippoint_scale .option[data-value="Oranges"], +#upgma_tiles_scale_1 .option[data-value="Oranges"], +#upgma_tiles_scale_2 .option[data-value="Oranges"], +#upgma_tiles_scale_3 .option[data-value="Oranges"], +#upgma_tiles_scale_4 .option[data-value="Oranges"], +#upgma_tiles_scale_5 .option[data-value="Oranges"], +#upgma_heatmap_scale .option[data-value="Oranges"], +#upgma_clade_scale .option[data-value="Oranges"] { background: linear-gradient(to right, #FFF5EB 0%, #FFF5EB 11.1111%, #FEE6CE 11.1111%, #FEE6CE 22.2222%, #FDD0A2 22.2222%, #FDD0A2 33.3333%, #FDAE6B 33.3333%, #FDAE6B 44.4444%, #FD8D3C 44.4444%, #FD8D3C 55.5556%, #F16913 55.5556%, #F16913 66.6667%, #D94801 66.6667%, #D94801 77.7778%, #A63603 77.7778%, #A63603 88.8889%, #7F2704 88.8889%, #7F2704 100%); color: white; margin-bottom: 2px; @@ -1377,7 +1557,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Greys"], #nj_tiles_scale_5 .option[data-value="Greys"], #nj_heatmap_scale .option[data-value="Greys"], -#nj_clade_scale .option[data-value="Greys"] { +#nj_clade_scale .option[data-value="Greys"], +#upgma_tiplab_scale .option[data-value="Greys"], +#upgma_tippoint_scale .option[data-value="Greys"], +#upgma_tiles_scale_1 .option[data-value="Greys"], +#upgma_tiles_scale_2 .option[data-value="Greys"], +#upgma_tiles_scale_3 .option[data-value="Greys"], +#upgma_tiles_scale_4 .option[data-value="Greys"], +#upgma_tiles_scale_5 .option[data-value="Greys"], +#upgma_heatmap_scale .option[data-value="Greys"], +#upgma_clade_scale .option[data-value="Greys"] { background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 11.1111%, #F0F0F0 11.1111%, #F0F0F0 22.2222%, #D9D9D9 22.2222%, #D9D9D9 33.3333%, #BDBDBD 33.3333%, #BDBDBD 44.4444%, #969696 44.4444%, #969696 55.5556%, #737373 55.5556%, #737373 66.6667%, #525252 66.6667%, #525252 77.7778%, #252525 77.7778%, #252525 88.8889%, #000000 88.8889%, #000000 100%); color: white; } @@ -1390,7 +1579,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Greens"], #nj_tiles_scale_5 .option[data-value="Greens"], #nj_heatmap_scale .option[data-value="Greens"], -#nj_clade_scale .option[data-value="Greens"] { +#nj_clade_scale .option[data-value="Greens"], +#upgma_tiplab_scale .option[data-value="Greens"], +#upgma_tippoint_scale .option[data-value="Greens"], +#upgma_tiles_scale_1 .option[data-value="Greens"], +#upgma_tiles_scale_2 .option[data-value="Greens"], +#upgma_tiles_scale_3 .option[data-value="Greens"], +#upgma_tiles_scale_4 .option[data-value="Greens"], +#upgma_tiles_scale_5 .option[data-value="Greens"], +#upgma_heatmap_scale .option[data-value="Greens"], +#upgma_clade_scale .option[data-value="Greens"] { background: linear-gradient(to right, #F7FCF5 0%, #F7FCF5 11.1111%, #E5F5E0 11.1111%, #E5F5E0 22.2222%, #C7E9C0 22.2222%, #C7E9C0 33.3333%, #A1D99B 33.3333%, #A1D99B 44.4444%, #74C476 44.4444%, #74C476 55.5556%, #41AB5D 55.5556%, #41AB5D 66.6667%, #238B45 66.6667%, #238B45 77.7778%, #006D2C 77.7778%, #006D2C 88.8889%, #00441B 88.8889%, #00441B 100%); color: white; margin-bottom: 2px; @@ -1404,7 +1602,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="GnBu"], #nj_tiles_scale_5 .option[data-value="GnBu"], #nj_heatmap_scale .option[data-value="GnBu"], -#nj_clade_scale .option[data-value="GnBu"] { +#nj_clade_scale .option[data-value="GnBu"], +#upgma_tiplab_scale .option[data-value="GnBu"], +#upgma_tippoint_scale .option[data-value="GnBu"], +#upgma_tiles_scale_1 .option[data-value="GnBu"], +#upgma_tiles_scale_2 .option[data-value="GnBu"], +#upgma_tiles_scale_3 .option[data-value="GnBu"], +#upgma_tiles_scale_4 .option[data-value="GnBu"], +#upgma_tiles_scale_5 .option[data-value="GnBu"], +#upgma_heatmap_scale .option[data-value="GnBu"], +#upgma_clade_scale .option[data-value="GnBu"] { background: linear-gradient(to right, #F7FCF0 0%, #F7FCF0 11.1111%, #E0F3DB 11.1111%, #E0F3DB 22.2222%, #CCEBC5 22.2222%, #CCEBC5 33.3333%, #A8DDB5 33.3333%, #A8DDB5 44.4444%, #7BCCC4 44.4444%, #7BCCC4 55.5556%, #4EB3D3 55.5556%, #4EB3D3 66.6667%, #2B8CBE 66.6667%, #2B8CBE 77.7778%, #0868AC 77.7778%, #0868AC 88.8889%, #084081 88.8889%, #084081 100%); color: white; margin-bottom: 2px; @@ -1418,7 +1625,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="BuPu"], #nj_tiles_scale_5 .option[data-value="BuPu"], #nj_heatmap_scale .option[data-value="BuPu"], -#nj_clade_scale .option[data-value="BuPu"] { +#nj_clade_scale .option[data-value="BuPu"], +#upgma_tiplab_scale .option[data-value="BuPu"], +#upgma_tippoint_scale .option[data-value="BuPu"], +#upgma_tiles_scale_1 .option[data-value="BuPu"], +#upgma_tiles_scale_2 .option[data-value="BuPu"], +#upgma_tiles_scale_3 .option[data-value="BuPu"], +#upgma_tiles_scale_4 .option[data-value="BuPu"], +#upgma_tiles_scale_5 .option[data-value="BuPu"], +#upgma_heatmap_scale .option[data-value="BuPu"], +#upgma_clade_scale .option[data-value="BuPu"] { background: linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11.1111%, #E0ECF4 11.1111%, #E0ECF4 22.2222%, #BFD3E6 22.2222%, #BFD3E6 33.3333%, #9EBCDA 33.3333%, #9EBCDA 44.4444%, #8C96C6 44.4444%, #8C96C6 55.5556%, #8C6BB1 55.5556%, #8C6BB1 66.6667%, #88419D 66.6667%, #88419D 77.7778%, #810F7C 77.7778%, #810F7C 88.8889%, #4D004B 88.8889%, #4D004B 100%); color: white; margin-bottom: 2px; @@ -1432,7 +1648,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="BuGn"], #nj_tiles_scale_5 .option[data-value="BuGn"], #nj_heatmap_scale .option[data-value="BuGn"], -#nj_clade_scale .option[data-value="BuGn"] { +#nj_clade_scale .option[data-value="BuGn"], +#upgma_tiplab_scale .option[data-value="BuGn"], +#upgma_tippoint_scale .option[data-value="BuGn"], +#upgma_tiles_scale_1 .option[data-value="BuGn"], +#upgma_tiles_scale_2 .option[data-value="BuGn"], +#upgma_tiles_scale_3 .option[data-value="BuGn"], +#upgma_tiles_scale_4 .option[data-value="BuGn"], +#upgma_tiles_scale_5 .option[data-value="BuGn"], +#upgma_heatmap_scale .option[data-value="BuGn"], +#upgma_clade_scale .option[data-value="BuGn"] { background: linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11.1111%, #E5F5F9 11.1111%, #E5F5F9 22.2222%, #CCECE6 22.2222%, #CCECE6 33.3333%, #99D8C9 33.3333%, #99D8C9 44.4444%, #66C2A4 44.4444%, #66C2A4 55.5556%, #41AE76 55.5556%, #41AE76 66.6667%, #238B45 66.6667%, #238B45 77.7778%, #006D2C 77.7778%, #006D2C 88.8889%, #00441B 88.8889%, #00441B 100%); color: white; margin-bottom: 2px; @@ -1446,7 +1671,16 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_4 .option[data-value="Blues"], #nj_tiles_scale_5 .option[data-value="Blues"], #nj_heatmap_scale .option[data-value="Blues"], -#nj_clade_scale .option[data-value="Blues"] { +#nj_clade_scale .option[data-value="Blues"], +#upgma_tiplab_scale .option[data-value="Blues"], +#upgma_tippoint_scale .option[data-value="Blues"], +#upgma_tiles_scale_1 .option[data-value="Blues"], +#upgma_tiles_scale_2 .option[data-value="Blues"], +#upgma_tiles_scale_3 .option[data-value="Blues"], +#upgma_tiles_scale_4 .option[data-value="Blues"], +#upgma_tiles_scale_5 .option[data-value="Blues"], +#upgma_heatmap_scale .option[data-value="Blues"], +#upgma_clade_scale .option[data-value="Blues"] { background: linear-gradient(to right, #F7FBFF 0%, #F7FBFF 11.1111%, #DEEBF7 11.1111%, #DEEBF7 22.2222%, #C6DBEF 22.2222%, #C6DBEF 33.3333%, #9ECAE1 33.3333%, #9ECAE1 44.4444%, #6BAED6 44.4444%, #6BAED6 55.5556%, #4292C6 55.5556%, #4292C6 66.6667%, #2171B5 66.6667%, #2171B5 77.7778%, #08519C 77.7778%, #08519C 88.8889%, #08306B 88.8889%, #08306B 100%); color: white; margin-bottom: 2px; @@ -1459,7 +1693,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="magma"], #nj_tiles_scale_4 .option[data-value="magma"], #nj_tiles_scale_5 .option[data-value="magma"], -#nj_heatmap_scale .option[data-value="magma"] { +#nj_heatmap_scale .option[data-value="magma"], +#upgma_tiplab_scale .option[data-value="magma"], +#upgma_tippoint_scale .option[data-value="magma"], +#upgma_tiles_scale_1 .option[data-value="magma"], +#upgma_tiles_scale_2 .option[data-value="magma"], +#upgma_tiles_scale_3 .option[data-value="magma"], +#upgma_tiles_scale_4 .option[data-value="magma"], +#upgma_tiles_scale_5 .option[data-value="magma"], +#upgma_heatmap_scale .option[data-value="magma"] { background: linear-gradient(to right, #000004FF, #07071DFF, #160F3BFF, #29115AFF, #400F73FF, #56147DFF, #6B1D81FF, #802582FF, #952C80FF, #AB337CFF, #C03A76FF, #D6456CFF, #E85362FF, #F4685CFF, #FA815FFF, #FD9A6AFF, #FEB37BFF, #FECC8FFF, #FDE4A6FF, #FCFDBFFF); color: white; margin-bottom: 2px; @@ -1472,7 +1714,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="inferno"], #nj_tiles_scale_4 .option[data-value="inferno"], #nj_tiles_scale_5 .option[data-value="inferno"], -#nj_heatmap_scale .option[data-value="inferno"] { +#nj_heatmap_scale .option[data-value="inferno"], +#upgma_tiplab_scale .option[data-value="inferno"], +#upgma_tippoint_scale .option[data-value="inferno"], +#upgma_tiles_scale_1 .option[data-value="inferno"], +#upgma_tiles_scale_2 .option[data-value="inferno"], +#upgma_tiles_scale_3 .option[data-value="inferno"], +#upgma_tiles_scale_4 .option[data-value="inferno"], +#upgma_tiles_scale_5 .option[data-value="inferno"], +#upgma_heatmap_scale .option[data-value="inferno"] { background: linear-gradient(to right, #000004FF, #08051EFF, #190C3EFF, #300A5BFF, #460B6AFF, #5C126EFF, #711A6EFF, #87216BFF, #9C2964FF, #B1325AFF, #C43C4EFF, #D64B40FF, #E55C30FF, #F17020FF, #F8870EFF, #FCA007FF, #FBB91FFF, #F7D340FF, #F1ED6FFF, #FCFFA4FF); color: white; margin-bottom: 2px; @@ -1485,7 +1735,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="plasma"], #nj_tiles_scale_4 .option[data-value="plasma"], #nj_tiles_scale_5 .option[data-value="plasma"], -#nj_heatmap_scale .option[data-value="plasma"] { +#nj_heatmap_scale .option[data-value="plasma"], +#upgma_tiplab_scale .option[data-value="plasma"], +#upgma_tippoint_scale .option[data-value="plasma"], +#upgma_tiles_scale_1 .option[data-value="plasma"], +#upgma_tiles_scale_2 .option[data-value="plasma"], +#upgma_tiles_scale_3 .option[data-value="plasma"], +#upgma_tiles_scale_4 .option[data-value="plasma"], +#upgma_tiles_scale_5 .option[data-value="plasma"], +#upgma_heatmap_scale .option[data-value="plasma"] { background: linear-gradient(to right, #0D0887FF, #2D0594FF, #44039EFF, #5901A5FF, #6F00A8FF, #8305A7FF, #9512A1FF, #A72197FF, #B6308BFF, #C5407EFF, #D14E72FF, #DD5E66FF, #E76E5BFF, #EF7F4FFF, #F79044FF, #FBA238FF, #FEB72DFF, #FDCB26FF, #F7E225FF, #F0F921FF); color: white; margin-bottom: 2px; @@ -1498,7 +1756,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="viridis"], #nj_tiles_scale_4 .option[data-value="viridis"], #nj_tiles_scale_5 .option[data-value="viridis"], -#nj_heatmap_scale .option[data-value="viridis"] { +#nj_heatmap_scale .option[data-value="viridis"], +#upgma_tiplab_scale .option[data-value="viridis"], +#upgma_tippoint_scale .option[data-value="viridis"], +#upgma_tiles_scale_1 .option[data-value="viridis"], +#upgma_tiles_scale_2 .option[data-value="viridis"], +#upgma_tiles_scale_3 .option[data-value="viridis"], +#upgma_tiles_scale_4 .option[data-value="viridis"], +#upgma_tiles_scale_5 .option[data-value="viridis"], +#upgma_heatmap_scale .option[data-value="viridis"] { background: linear-gradient(to right, #440154FF, #481568FF, #482677FF, #453781FF, #3F4788FF, #39558CFF, #32648EFF, #2D718EFF, #287D8EFF, #238A8DFF, #1F968BFF, #20A386FF, #29AF7FFF, #3CBC75FF, #56C667FF, #74D055FF, #94D840FF, #B8DE29FF, #DCE318FF, #FDE725FF); color: white; margin-bottom: 2px; @@ -1511,7 +1777,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="cividis"], #nj_tiles_scale_4 .option[data-value="cividis"], #nj_tiles_scale_5 .option[data-value="cividis"], -#nj_heatmap_scale .option[data-value="cividis"] { +#nj_heatmap_scale .option[data-value="cividis"], +#upgma_tiplab_scale .option[data-value="cividis"], +#upgma_tippoint_scale .option[data-value="cividis"], +#upgma_tiles_scale_1 .option[data-value="cividis"], +#upgma_tiles_scale_2 .option[data-value="cividis"], +#upgma_tiles_scale_3 .option[data-value="cividis"], +#upgma_tiles_scale_4 .option[data-value="cividis"], +#upgma_tiles_scale_5 .option[data-value="cividis"], +#upgma_heatmap_scale .option[data-value="cividis"] { background: linear-gradient(to right, #00204DFF, #002A64FF, #00336FFF, #1F3C6DFF, #35466BFF, #444F6BFF, #53596CFF, #5F636EFF, #6B6C71FF, #777776FF, #838079FF, #908B79FF, #9D9677FF, #ABA074FF, #B9AC70FF, #C7B76BFF, #D7C463FF, #E5D05AFF, #F5DD4DFF, #FFEA46FF); color: white; margin-bottom: 2px; @@ -1524,7 +1798,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="rocket"], #nj_tiles_scale_4 .option[data-value="rocket"], #nj_tiles_scale_5 .option[data-value="rocket"], -#nj_heatmap_scale .option[data-value="rocket"] { +#nj_heatmap_scale .option[data-value="rocket"], +#upgma_tiplab_scale .option[data-value="rocket"], +#upgma_tippoint_scale .option[data-value="rocket"], +#upgma_tiles_scale_1 .option[data-value="rocket"], +#upgma_tiles_scale_2 .option[data-value="rocket"], +#upgma_tiles_scale_3 .option[data-value="rocket"], +#upgma_tiles_scale_4 .option[data-value="rocket"], +#upgma_tiles_scale_5 .option[data-value="rocket"], +#upgma_heatmap_scale .option[data-value="rocket"] { background: linear-gradient(to right, #03051AFF, #150E26FF, #281535FF, #3C1A42FF, #511E4DFF, #661F54FF, #7C1F5AFF, #931C5BFF, #AA185AFF, #C11754FF, #D3214BFF, #E33541FF, #ED4E3EFF, #F26847FF, #F4815AFF, #F5986FFF, #F6AE86FF, #F7C2A2FF, #F8D7BFFF, #FAEBDDFF); color: white; margin-bottom: 2px; @@ -1537,7 +1819,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="mako"], #nj_tiles_scale_4 .option[data-value="mako"], #nj_tiles_scale_5 .option[data-value="mako"], -#nj_heatmap_scale .option[data-value="mako"] { +#nj_heatmap_scale .option[data-value="mako"], +#upgma_tiplab_scale .option[data-value="mako"], +#upgma_tippoint_scale .option[data-value="mako"], +#upgma_tiles_scale_1 .option[data-value="mako"], +#upgma_tiles_scale_2 .option[data-value="mako"], +#upgma_tiles_scale_3 .option[data-value="mako"], +#upgma_tiles_scale_4 .option[data-value="mako"], +#upgma_tiles_scale_5 .option[data-value="mako"], +#upgma_heatmap_scale .option[data-value="mako"]{ background: linear-gradient(to right, #0B0405FF, #190E19FF, #27182DFF, #312142FF, #3A2C59FF, #3F3770FF, #414388FF, #3C5397FF, #38639DFF, #3573A1FF, #3482A4FF, #3491A8FF, #35A0ABFF, #3AAEADFF, #46BEADFF, #5ACCADFF, #7ED7AFFF, #A4E0BBFF, #C3E9CEFF, #DEF5E5FF); color: white; margin-bottom: 2px; @@ -1550,7 +1840,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="turbo"], #nj_tiles_scale_4 .option[data-value="turbo"], #nj_tiles_scale_5 .option[data-value="turbo"], -#nj_heatmap_scale .option[data-value="turbo"] { +#nj_heatmap_scale .option[data-value="turbo"], +#upgma_tiplab_scale .option[data-value="turbo"], +#upgma_tippoint_scale .option[data-value="turbo"], +#upgma_tiles_scale_1 .option[data-value="turbo"], +#upgma_tiles_scale_2 .option[data-value="turbo"], +#upgma_tiles_scale_3 .option[data-value="turbo"], +#upgma_tiles_scale_4 .option[data-value="turbo"], +#upgma_tiles_scale_5 .option[data-value="turbo"], +#upgma_heatmap_scale .option[data-value="turbo"] { background: linear-gradient(to right, #30123BFF, #3F3994FF, #455ED2FF, #4681F7FF, #3AA2FCFF, #23C3E4FF, #18DEC1FF, #2CF09EFF, #5BFB72FF, #8EFF49FF, #B5F836FF, #D6E635FF, #EFCD3AFF, #FCB036FF, #FD8A26FF, #F36215FF, #E14209FF, #C82803FF, #A51301FF, #7A0403FF); color: white; } @@ -1562,7 +1860,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="Spectral"], #nj_tiles_scale_4 .option[data-value="Spectral"], #nj_tiles_scale_5 .option[data-value="Spectral"], -#nj_heatmap_scale .option[data-value="Spectral"] { +#nj_heatmap_scale .option[data-value="Spectral"], +#upgma_tiplab_scale .option[data-value="Spectral"], +#upgma_tippoint_scale .option[data-value="Spectral"], +#upgma_tiles_scale_1 .option[data-value="Spectral"], +#upgma_tiles_scale_2 .option[data-value="Spectral"], +#upgma_tiles_scale_3 .option[data-value="Spectral"], +#upgma_tiles_scale_4 .option[data-value="Spectral"], +#upgma_tiles_scale_5 .option[data-value="Spectral"], +#upgma_heatmap_scale .option[data-value="Spectral"]{ background: linear-gradient(to right, #9E0142, #D53E4F, #F46D43, #FDAE61, #FEE08B, #FFFFBF, #E6F598, #ABDDA4, #66C2A5, #3288BD, #5E4FA2); color: black; margin-bottom: 2px; @@ -1575,7 +1881,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="RdYlGn"], #nj_tiles_scale_4 .option[data-value="RdYlGn"], #nj_tiles_scale_5 .option[data-value="RdYlGn"], -#nj_heatmap_scale .option[data-value="RdYlGn"] { +#nj_heatmap_scale .option[data-value="RdYlGn"], +#upgma_tiplab_scale .option[data-value="RdYlGn"], +#upgma_tippoint_scale .option[data-value="RdYlGn"], +#upgma_tiles_scale_1 .option[data-value="RdYlGn"], +#upgma_tiles_scale_2 .option[data-value="RdYlGn"], +#upgma_tiles_scale_3 .option[data-value="RdYlGn"], +#upgma_tiles_scale_4 .option[data-value="RdYlGn"], +#upgma_tiles_scale_5 .option[data-value="RdYlGn"], +#upgma_heatmap_scale .option[data-value="RdYlGn"]{ background: linear-gradient(to right, #A50026, #D73027, #F46D43, #FDAE61, #FEE08B, #FFFFBF, #D9EF8B, #A6D96A, #66BD63, #1A9850, #006837); color: black; margin-bottom: 2px; @@ -1588,7 +1902,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="RdYlBu"], #nj_tiles_scale_4 .option[data-value="RdYlBu"], #nj_tiles_scale_5 .option[data-value="RdYlBu"], -#nj_heatmap_scale .option[data-value="RdYlBu"] { +#nj_heatmap_scale .option[data-value="RdYlBu"], +#upgma_tiplab_scale .option[data-value="RdYlBu"], +#upgma_tippoint_scale .option[data-value="RdYlBu"], +#upgma_tiles_scale_1 .option[data-value="RdYlBu"], +#upgma_tiles_scale_2 .option[data-value="RdYlBu"], +#upgma_tiles_scale_3 .option[data-value="RdYlBu"], +#upgma_tiles_scale_4 .option[data-value="RdYlBu"], +#upgma_tiles_scale_5 .option[data-value="RdYlBu"], +#upgma_heatmap_scale .option[data-value="RdYlBu"]{ background: linear-gradient(to right, #A50026, #D73027, #F46D43, #FDAE61, #FEE090, #FFFFBF, #E0F3F8, #ABD9E9, #74ADD1, #4575B4, #313695); color: black; margin-bottom: 2px; @@ -1601,7 +1923,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="RdGy"], #nj_tiles_scale_4 .option[data-value="RdGy"], #nj_tiles_scale_5 .option[data-value="RdGy"], -#nj_heatmap_scale .option[data-value="RdGy"] { +#nj_heatmap_scale .option[data-value="RdGy"], +#upgma_tiplab_scale .option[data-value="RdGy"], +#upgma_tippoint_scale .option[data-value="RdGy"], +#upgma_tiles_scale_1 .option[data-value="RdGy"], +#upgma_tiles_scale_2 .option[data-value="RdGy"], +#upgma_tiles_scale_3 .option[data-value="RdGy"], +#upgma_tiles_scale_4 .option[data-value="RdGy"], +#upgma_tiles_scale_5 .option[data-value="RdGy"], +#upgma_heatmap_scale .option[data-value="RdGy"] { background: linear-gradient(to right, #67001F, #B2182B, #D6604D, #F4A582, #FDDBC7, #FFFFFF, #E0E0E0, #BABABA, #878787, #4D4D4D, #1A1A1A); color: black; margin-bottom: 2px; @@ -1614,7 +1944,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="RdBu"], #nj_tiles_scale_4 .option[data-value="RdBu"], #nj_tiles_scale_5 .option[data-value="RdBu"], -#nj_heatmap_scale .option[data-value="RdBu"] { +#nj_heatmap_scale .option[data-value="RdBu"], +#upgma_tiplab_scale .option[data-value="RdBu"], +#upgma_tippoint_scale .option[data-value="RdBu"], +#upgma_tiles_scale_1 .option[data-value="RdBu"], +#upgma_tiles_scale_2 .option[data-value="RdBu"], +#upgma_tiles_scale_3 .option[data-value="RdBu"], +#upgma_tiles_scale_4 .option[data-value="RdBu"], +#upgma_tiles_scale_5 .option[data-value="RdBu"], +#upgma_heatmap_scale .option[data-value="RdBu"] { background: linear-gradient(to right, #67001F, #B2182B, #D6604D, #F4A582, #FDDBC7, #F7F7F7, #D1E5F0, #92C5DE, #4393C3, #2166AC, #053061); color: black; margin-bottom: 2px; @@ -1627,7 +1965,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="PuOr"], #nj_tiles_scale_4 .option[data-value="PuOr"], #nj_tiles_scale_5 .option[data-value="PuOr"], -#nj_heatmap_scale .option[data-value="PuOr"] { +#nj_heatmap_scale .option[data-value="PuOr"], +#upgma_tiplab_scale .option[data-value="PuOr"], +#upgma_tippoint_scale .option[data-value="PuOr"], +#upgma_tiles_scale_1 .option[data-value="PuOr"], +#upgma_tiles_scale_2 .option[data-value="PuOr"], +#upgma_tiles_scale_3 .option[data-value="PuOr"], +#upgma_tiles_scale_4 .option[data-value="PuOr"], +#upgma_tiles_scale_5 .option[data-value="PuOr"], +#upgma_heatmap_scale .option[data-value="PuOr"] { background: linear-gradient(to right, #7F3B08, #B35806, #E08214, #FDB863, #FEE0B6, #F7F7F7, #D8DAEB, #B2ABD2, #8073AC, #542788, #2D004B); color: black; margin-bottom: 2px; @@ -1640,7 +1986,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="PRGn"], #nj_tiles_scale_4 .option[data-value="PRGn"], #nj_tiles_scale_5 .option[data-value="PRGn"], -#nj_heatmap_scale .option[data-value="PRGn"] { +#nj_heatmap_scale .option[data-value="PRGn"], +#upgma_tiplab_scale .option[data-value="PRGn"], +#upgma_tippoint_scale .option[data-value="PRGn"], +#upgma_tiles_scale_1 .option[data-value="PRGn"], +#upgma_tiles_scale_2 .option[data-value="PRGn"], +#upgma_tiles_scale_3 .option[data-value="PRGn"], +#upgma_tiles_scale_4 .option[data-value="PRGn"], +#upgma_tiles_scale_5 .option[data-value="PRGn"], +#upgma_heatmap_scale .option[data-value="PRGn"] { background: linear-gradient(to right, #40004B, #762A83, #9970AB, #C2A5CF, #E7D4E8, #F7F7F7, #D9F0D3, #A6DBA0, #5AAE61, #1B7837, #00441B); color: black; margin-bottom: 2px; @@ -1653,7 +2007,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="PiYG"], #nj_tiles_scale_4 .option[data-value="PiYG"], #nj_tiles_scale_5 .option[data-value="PiYG"], -#nj_heatmap_scale .option[data-value="PiYG"] { +#nj_heatmap_scale .option[data-value="PiYG"], +#upgma_tiplab_scale .option[data-value="PiYG"], +#upgma_tippoint_scale .option[data-value="PiYG"], +#upgma_tiles_scale_1 .option[data-value="PiYG"], +#upgma_tiles_scale_2 .option[data-value="PiYG"], +#upgma_tiles_scale_3 .option[data-value="PiYG"], +#upgma_tiles_scale_4 .option[data-value="PiYG"], +#upgma_tiles_scale_5 .option[data-value="PiYG"], +#upgma_heatmap_scale .option[data-value="PiYG"] { background: linear-gradient(to right, #8E0152, #C51B7D, #DE77AE, #F1B6DA, #FDE0EF, #F7F7F7, #E6F5D0, #B8E186, #7FBC41, #4D9221, #276419); color: black; margin-bottom: 2px; @@ -1666,7 +2028,15 @@ button#upgma_tile_menu_2, button#upgma_tile_menu_3, button#upgma_tile_menu_4, bu #nj_tiles_scale_3 .option[data-value="BrBG"], #nj_tiles_scale_4 .option[data-value="BrBG"], #nj_tiles_scale_5 .option[data-value="BrBG"], -#nj_heatmap_scale .option[data-value="BrBG"] { +#nj_heatmap_scale .option[data-value="BrBG"], +#upgma_tiplab_scale .option[data-value="BrBG"], +#upgma_tippoint_scale .option[data-value="BrBG"], +#upgma_tiles_scale_1 .option[data-value="BrBG"], +#upgma_tiles_scale_2 .option[data-value="BrBG"], +#upgma_tiles_scale_3 .option[data-value="BrBG"], +#upgma_tiles_scale_4 .option[data-value="BrBG"], +#upgma_tiles_scale_5 .option[data-value="BrBG"], +#upgma_heatmap_scale .option[data-value="BrBG"] { background: linear-gradient(to right, #543005, #8C510A, #BF812D, #DFC27D, #F6E8C3, #F5F5F5, #C7EAE5, #80CDC1, #35978F, #01665E, #003C30); color: black; margin-bottom: 2px; From 49d296aef6c86eb8436a5119da3a5be715251710 Mon Sep 17 00:00:00 2001 From: infinity-a11y Date: Sun, 17 Mar 2024 12:40:37 +0100 Subject: [PATCH 26/26] Finalized transfer of NJ changes to UPGMA --- App.R | 7014 ++++++++++++++++++++++++++++++------------------- www/mycss.css | 4 + 2 files changed, 4320 insertions(+), 2698 deletions(-) diff --git a/App.R b/App.R index f0ec8c0..096c277 100644 --- a/App.R +++ b/App.R @@ -3308,7 +3308,8 @@ ui <- dashboardPage( ) ) ) - ) + ), + br(), br(), br(), br() ), ### Control Panels UPGMA ---- @@ -3317,803 +3318,519 @@ ui <- dashboardPage( "input.tree_algo=='UPGMA'", fluidRow( column( - width = 4, - align = "center", - box( - solidHeader = TRUE, - status = "primary", - width = "100%", - h3(p("Layout"), style = "color:white"), - hr(), - fluidRow( + width = 1, + radioGroupButtons( + inputId = "upgma_controls", + label = "", + choices = c("Layout", "Label", "Elements", "Variables"), + direction = "vertical" + ) + ), + conditionalPanel( + "input.upgma_controls=='Layout'", + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( - width = 6, + width = 12, + align = "left", + h4(p("Theme"), style = "color:white; position: relative; right: -15px"), fluidRow( column( width = 12, + align = "center", + selectInput( + inputId = "upgma_layout", + label = "", + choices = list( + Linear = list( + "Rectangular" = "rectangular", + "Roundrect" = "roundrect", + "Slanted" = "slanted", + "Ellipse" = "ellipse" + ), + Circular = list("Circular" = "circular", + "Inward" = "inward") + ), + selected = "rectangular", + width = "90%" + ) + ) + ), + fluidRow( + column( + width = 8, align = "left", - h4(p("Theme"), style = "color:white; position: relative; right: -15px"), - fluidRow( - column( - width = 12, - align = "center", - selectInput( - inputId = "upgma_layout", - label = "", - choices = list( - Linear = list( - "Rectangular" = "rectangular", - "Roundrect" = "roundrect", - "Slanted" = "slanted", - "Ellipse" = "ellipse" - ), - Circular = list("Circular" = "circular", - "Inward" = "inward") - ), - selected = "circular", - width = "90%" - ) + div( + class = "mat-switch-layout", + materialSwitch( + "upgma_rootedge_show", + h5(p("Rootedge"), style = "color:white; padding-left: 0px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE ) - ), - fluidRow( - column( - width = 5, - align = "left", - checkboxInput( - "upgma_ladder", - h5(p("Ladder"), style = "color:white; position: relative; bottom: 3px; right: -15px; margin-top: 22px"), - value = TRUE - ) - ), - column( - width = 3, - align = "left", - checkboxInput( - "upgma_rootedge_show", - h5(p("Root"), style = "color:white; position: relative; bottom: 3px; right: -5px; margin-top: 23px"), - value = FALSE - ) + ) + ), + column( + width = 4, + align = "right", + dropMenu( + actionBttn( + "upgma_rootedge_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), - column( - width = 2, - align = "right", - dropMenu( - actionBttn( - "upgma_rootedge_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("upgma_rootedge_length"), - br(), - selectInput( - "upgma_rootedge_line", - label = h5("Linetype", style = "color:white"), - choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), - selected = c(Dotted = "solid"), - width = "100px" - ) - ) - ) - ) - ) - ), - conditionalPanel( - "input.upgma_layout=='circular' | input.upgma_layout=='inward'", + placement = "top-start", + theme = "translucent", fluidRow( column( - width = 3, - h5(p("Adjust"), style = "color:white; position: relative; right: -15px; margin-top: 20px") - ), - column( - width = 8, - align = "right", + width = 12, + align = "center", + uiOutput("upgma_rootedge_length"), + br(), + selectInput( + "upgma_rootedge_line", + label = h5("Rootedge Line", style = "color:white"), + choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), + selected = c(Dotted = "solid"), + width = "100px" + ), + br(), conditionalPanel( "input.upgma_layout=='circular'", sliderInput( "upgma_xlim", - label = NULL, + label = h5("Adjust Circular", style = "color:white"), min = -50, max = 0, value = -10, - ticks = FALSE, - width = "150px" + width = "150px", + ticks = FALSE ) ), conditionalPanel( "input.upgma_layout=='inward'", sliderInput( "upgma_inward_xlim", - label = NULL, + label = h5("Adjust Circular", style = "color:white"), min = 30, max = 120, value = 50, ticks = FALSE, - width = "150px" + width = "150px", ) ) ) ) ) ) - ) - ), - column( - width = 6, + ), fluidRow( column( - width = 12, + width = 8, align = "left", - h4(p("Color"), style = "color:white; position: relative; right: -15px"), - fluidRow( - column( - width = 5, - h5(p("Lines/Text"), style = "color:white; position: relative; right: -15px; margin-top: 30px") - ), - column( - width = 7, - colorPickr( - inputId = "upgma_color", - width = "90%", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ) - ), - fluidRow( - column( - width = 5, - h5(p("Background"), style = "color:white; position: relative; right: -15px; margin-top: 30px") - ), - column( - width = 7, - colorPickr( - inputId = "upgma_bg", - width = "90%", - selected = "#ffffff", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) + div( + class = "mat-switch-re", + materialSwitch( + "upgma_ladder", + h5(p("Ladderize"), style = "color:white; padding-left: 0px; position: relative; top: -4px; right: -5px;"), + value = TRUE, + right = TRUE ) ) ) - ), br() + ) ) - ), - hr(), - fluidRow( + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( - width = 6, + width = 12, + align = "left", + h4(p("Color"), style = "color:white; position: relative; right: -15px"), fluidRow( column( - width = 12, - align = "left", - h4(p("Title"), style = "color:white; position: relative; right: -15px"), - column( - width = 12, - align = "center", - textInput( - "upgma_title", - label = "", - width = "100%", - placeholder = "Plot Title" - ), - fluidRow( - column( - width = 7, - colorPickr( - inputId = "upgma_title_color", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 5, - align = "right", - dropMenu( - actionBttn( - "upgma_title_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - numericInput( - "upgma_title_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - value = 30, - min = 15, - max = 40, - step = 1, - width = "80px" - ) - ) - ) - ) - ) - ), - br() + width = 5, + h5(p("Lines/Text"), style = "color:white; position: relative; right: -15px; margin-top: 30px") + ), + column( + width = 7, + colorPickr( + inputId = "upgma_color", + width = "90%", + selected = "#000000", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" ) ) - ) - ), - column( - width = 6, + ), + br(), fluidRow( column( - width = 12, - align = "left", - h4(p("Subtitle"), style = "color:white; position: relative; right: -15px"), - column( - width = 12, - align = "center", - textInput( - "upgma_subtitle", - label = "", - width = "100%", - placeholder = "Plot Subtitle" - ), - fluidRow( - column( - width = 7, - colorPickr( - inputId = "upgma_subtitle_color", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 5, - align = "right", - dropMenu( - actionBttn( - "upgma_subtitle_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - numericInput( - "upgma_subtitle_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - value = 20, - min = 15, - max = 40, - step = 1, - width = "80px" - ) - ) - ) - ) - ) - ), - br() + width = 5, + h5(p("Background"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: 38px") + ), + column( + width = 7, + colorPickr( + inputId = "upgma_bg", + width = "90%", + selected = "#ffffff", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" ) ) - ) + ), + br() ) - ), - hr(), - fluidRow( + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( - width = 6, - fluidRow( - column( - width = 12, - align = "left", - h4(p("Tree scale"), style = "color:white; position: relative; right: -15px"), + width = 12, + align = "left", + h4(p("Title"), style = "color:white; position: relative; right: -15px"), + column( + width = 12, + align = "center", + textInput( + "upgma_title", + label = "", + width = "100%", + placeholder = "Plot Title" + ), + textInput( + "upgma_subtitle", + label = "", + width = "100%", + placeholder = "Plot Subtitle" + ), + br(), + fluidRow( column( - width = 12, - fluidRow( - column( - width = 7, - align = "left", - checkboxInput( - "upgma_treescale_show", - h5(p("Show "), style = "color:white; position: relative; bottom: -7px; right: 0px"), - value = TRUE - ), - br() + width = 7, + colorPickr( + inputId = "upgma_title_color", + selected = "#000000", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ), + column( + width = 5, + align = "right", + dropMenu( + actionBttn( + "upgma_title_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), - column( - width = 5, - align = "right", - dropMenu( - actionBttn( - "upgma_treescale_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + numericInput( + "upgma_title_size", + label = h5("Title Size", style = "color:white; margin-bottom: 0px"), + value = 30, + min = 15, + max = 40, + step = 1, + width = "80px" ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("upgma_treescale_width"), - br(), - uiOutput("upgma_treescale_x"), - br(), - uiOutput("upgma_treescale_y") - ) + br(), + numericInput( + "upgma_subtitle_size", + label = h5("Subtitle Size", style = "color:white; margin-bottom: 0px"), + value = 20, + min = 15, + max = 40, + step = 1, + width = "80px" ) ) ) ) ) - ) + ), + br() ) - ), + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( - width = 6, - fluidRow( - column( - width = 12, - align = "left", - h4(p("Legend"), style = "color:white; position: relative; right: -15px"), + width = 12, + align = "left", + h4(p("Sizing"), style = "color:white; position: relative; right: -15px"), + column( + width = 12, + align = "center", + br(), + fluidRow( column( - width = 12, - align = "center", - fluidRow( - column( - width = 5, - align = "left", - prettyRadioButtons( - "upgma_legend_orientation", - "", - choices = c(Horizontal = "horizontal", - Vertical = "vertical"), - selected = c(Horizontal = "horizontal"), - inline = FALSE - ) + width = 3, + h5("Ratio", style = "color: white; font-size: 14px;") + ), + column( + width = 6, + align = "left", + div( + class = "ratio-sel", + selectInput( + "upgma_ratio", + "", + choices = c("16:10" = (16/10), "16:9" = (16/9), "4:3" = (4/3)) + ) + ) + ), + column( + width = 3, + dropMenu( + actionBttn( + "upgma_size_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), - column( - width = 5, - align = "right", - dropMenu( - actionBttn( - "upgma_legend_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 12, + sliderInput( + "upgma_v", + label = "Vertical Position", + min = -0.5, + max = 0.5, + step = 0.01, + value = 0, + width = "150px", + ticks = FALSE ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - numericInput( - "upgma_legend_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - value = 10, - min = 5, - max = 25, - step = 1, - width = "80px" - ), - br(), - sliderInput( - "upgma_legend_x", - label = h5("X Position", style = "color:white; margin-bottom: 0px"), - value = 0.1, - min = -0.9, - max = 1.9, - step = 0.2, - ticks = FALSE, - width = "150px" - ), - br(), - sliderInput( - "upgma_legend_y", - label = h5("Y Position", style = "color:white; margin-bottom: 0px"), - value = 1, - min = -1, - max = 1, - ticks = FALSE, - width = "150px" - ) - ) + br(), + sliderInput( + "upgma_h", + label = "Horizontal Position", + min = -0.5, + max = 0.5, + step = 0.01, + value = 0, + width = "150px", + ticks = FALSE ) ) ) ) ) - ) - ) - ) - ) - ) - ), - column( - width = 4, - align = "center", - box( - solidHeader = TRUE, - status = "primary", - width = "100%", - h3(p("Label"), style = "color:white"), - hr(), - fluidRow( - column( - width = 12, - align = "left", - h4(p("Tips"), style = "color:white; position: relative; right: -15px"), - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "upgma_tiplab_show", - h5(p("Show"), style = "color:white; position: relative; right: -17px; bottom: -7px"), - value = TRUE - ) ), - column( - width = 4, - align = "center", - uiOutput("upgma_tiplab") + fluidRow( + column( + width = 3, + h5("Size", style = "color: white; font-size: 14px; margin-top: 30px") + ), + column( + width = 9, + sliderInput( + "upgma_scale", + "", + min = 500, + max = 1200, + value = 800, + width = "95%", + ticks = FALSE + ) + ) ), - column( - width = 3, - align = "right", - dropMenu( - actionBttn( - "upgma_labeltext_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 6, - align = "center", - sliderInput( - "upgma_tiplab_alpha", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - ticks = FALSE, - width = "150px" - ), - br(), - conditionalPanel( - "!(input.upgma_layout=='inward'|input.upgma_layout=='circular')", - sliderInput( - inputId = "upgma_tiplab_nudge_x", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = 0, - width = "150px", - ticks = FALSE - ) - ), - conditionalPanel( - "input.upgma_layout=='circular'", - sliderInput( - inputId = "upgma_tiplab_position", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = -0.05, - width = "150px", - ticks = FALSE - ) - ), - conditionalPanel( - "input.upgma_layout=='inward'", - sliderInput( - inputId = "upgma_tiplab_position_inw", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = 1.1, - width = "150px", - ticks = FALSE - ) - ), - br(), - sliderInput( - inputId = "upgma_tiplab_angle", - label = h5("Angle", style = "color:white; margin-bottom: 0px"), - min = -90, - max = 90, - value = 0, - width = "150px", - ticks = FALSE - ) - ), - column( - width = 6, - align = "center", - uiOutput("upgma_tiplab_size"), - br(), - selectInput( - "upgma_tiplab_fontface", - label = h5("Fontface", style = "color:white; margin-bottom: 5px; margin-top: 16px"), - width = "250px", - choices = c(Plain = "plain", Bold = "bold", Italic = "italic", `B & I` = "bold.italic") - ) + fluidRow( + column( + width = 3, + h5("Zoom", style = "color: white; font-size: 14px; margin-top: 30px") + ), + column( + width = 9, + div( + class = "zoom-slider", + sliderInput( + "upgma_zoom", + label = NULL, + min = 0.5, + max = 1.5, + step = 0.05, + value = 0.95, + ticks = FALSE ) ) ) ) ) ) - ), - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "upgma_align", - h5(p("Align labels"), style = "color:white; position: relative; bottom: -10px; right: -15px"), - value = FALSE - ) - ), - column( - width = 1, - HTML( - paste( - tags$span(style='color: white; font-size: 14px; position: relative; bottom: -28px; margin-left: 0px ', 'Width') - ) - ) - ), - column( - width = 3, - align = "left", - numericInput( - "upgma_tiplab_linesize", - "", - value = 0.5, - min = 0.1, - max = 3, - step = 0.1, - width = "80px" - ) - ), - column( - width = 3, - selectInput( - "upgma_tiplab_linetype", - "", - choices = c(Solid = "solid", Dashed = "dashed", Dotted = "dotted"), - selected = c(Dotted = "dotted") - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 30px") - ), - column( - width = 4, - conditionalPanel( - "input.upgma_mapping_show==false", - colorPickr( - inputId = "upgma_tiplab_color", - width = "100%", - selected = "#000000", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ), - conditionalPanel( - "input.upgma_mapping_show==true", - uiOutput("upgma_color_mapping") - ) - ), - column( - width = 4, - align = "left", - checkboxInput( - "upgma_mapping_show", - label = h5("Add variable", style = "color:white; font-size: 14px; position: relative; bottom: -10px;"), - value = FALSE - ) - ) - ), - fluidRow( + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( - width = 4, + width = 12, align = "left", - br(), - checkboxInput( - "upgma_geom", - h5(p("Panel"), style = "color:white; position: relative; bottom: 10px; right: -17px"), - value = FALSE - ) - ), - column( - width = 4, - colorPickr( - inputId = "upgma_tiplab_fill", - width = "100%", - selected = "#84D9A0", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ), - column( - width = 3, - align = "right", - dropMenu( - actionBttn( - "upgma_labelformat_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", + h4(p("Tree Scale"), style = "color:white; position: relative; right: -15px"), + column( + width = 12, fluidRow( column( - width = 12, - align = "center", - uiOutput("upgma_tiplab_padding"), - br(), - sliderInput( - inputId = "upgma_tiplab_labelradius", - label = h5("Smooth edge", style = "color:white; margin-bottom: 0px"), - min = 0, - max = 0.5, - value = 0.2, - width = "150px", - ticks = FALSE + width = 8, + align = "left", + div( + class = "mat-switch-layout", + materialSwitch( + "upgma_treescale_show", + h5(p("Show"), style = "color:white; padding-left: 0px; position: relative; top: -4px; right: -5px;"), + value = TRUE, + right = TRUE + ) + ), + br() + ), + column( + width = 4, + align = "right", + dropMenu( + actionBttn( + "upgma_treescale_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + uiOutput("upgma_treescale_width"), + br(), + uiOutput("upgma_treescale_x"), + br(), + uiOutput("upgma_treescale_y") + ) + ) ) ) ) ) - ) - ), - hr(), - fluidRow( + ), column( width = 12, align = "left", - h4(p("Branches"), style = "color:white; position: relative; right: -15px"), - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "upgma_show_branch_label", - h5(p("Show"), style = "color:white; position: relative; bottom: -7px; right: -17px"), - value = FALSE - ) - ), - column( - width = 4, - align = "center", - uiOutput("upgma_branch_label") - ), - column( - width = 3, - align = "right", - dropMenu( - actionBttn( - "upgma_branch_label_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-start", - theme = "translucent", - fluidRow( - column( - width = 6, - align = "center", - sliderInput( - "upgma_branchlab_alpha", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 0.65, - width = "250px", - ticks = FALSE - ), - br(), - sliderInput( - inputId = "upgma_branch_x", - label = h5("X Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = 0, - width = "250px", - ticks = FALSE - ), - br(), - sliderInput( - inputId = "upgma_branch_y", - label = h5("Y Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - value = 0, - width = "250px", - ticks = FALSE - ) - ), - column( - width = 6, - align = "center", - uiOutput("upgma_branch_size"), - selectInput( - "upgma_branchlab_fontface", - label = h5("Fontface", style = "color:white; margin-bottom: 0px;"), - width = "250px", - choices = c(Plain = "plain", Bold = "bold", Italic = "italic", `B & I` = "bold.italic") - ), - br(), - sliderInput( - "upgma_branch_labelradius", - label = h5("Smooth edge", style = "color:white; margin-bottom: 0px"), - min = 0, - max = 0.5, - value = 0.5, - width = "250px", - ticks = FALSE + h4(p("Legend"), style = "color:white; position: relative; right: -15px; margin-top: 10px; margin-bottom: -2px"), + column( + width = 12, + align = "center", + fluidRow( + column( + width = 7, + align = "left", + prettyRadioButtons( + "upgma_legend_orientation", + "", + choices = c(Horizontal = "horizontal", + Vertical = "vertical"), + selected = c(Horizontal = "horizontal"), + inline = FALSE + ) + ), + column( + width = 5, + align = "right", + dropMenu( + actionBttn( + "upgma_legend_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 12, + align = "center", + numericInput( + "upgma_legend_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + value = 10, + min = 5, + max = 25, + step = 1, + width = "80px" + ), + br(), + sliderInput( + "upgma_legend_x", + label = h5("X Position", style = "color:white; margin-bottom: 0px"), + value = 0.9, + min = -0.9, + max = 1.9, + step = 0.2, + width = "150px", + ticks = FALSE + ), + br(), + sliderInput( + "upgma_legend_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + value = 0.2, + min = -1.5, + max = 1.5, + step = 0.1, + width = "150px", + ticks = FALSE + ) ) ) ) @@ -4121,1057 +3838,999 @@ ui <- dashboardPage( ) ) ) - ), - fluidRow( - column( - width = 4, - align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 30px") - ), - column( - width = 4, - colorPickr( - inputId = "upgma_branch_label_color", - width = "100%", - selected = "#FFB7B7", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ) - ), - br(), br(), br(), - conditionalPanel( - "input.upgma_layout=='inward'|input.upgma_layout=='circular'", - br(), br() ) ) ), - column( - width = 4, - align = "center", - box( - solidHeader = TRUE, - status = "primary", - width = "100%", - h3(p("Elements"), style = "color:white"), - hr(), - fluidRow( + conditionalPanel( + "input.upgma_controls=='Label'", + column( + width = 4, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( width = 12, - align = "left", - h4(p("Tip points"), style = "color:white; position: relative; right: -15px"), - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "upgma_tippoint_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 2, - align = "left", - dropMenu( - actionBttn( - "upgma_tippoint_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "upgma_tippoint_alpha", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - value = 0.5, - min = 0.1, - max = 1, - width = "150px", - ticks = FALSE - ), - br(), - uiOutput("upgma_tippoint_size") - ) - ) - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 30px") - ), - column( - width = 4, - align = "center", - conditionalPanel( - "input.upgma_tipcolor_mapping_show==true & input.upgma_mapping_show==false", - uiOutput("upgma_tipcolor_mapping") - ), - conditionalPanel( - "input.upgma_tipcolor_mapping_show==false || input.upgma_mapping_show==true", - colorPickr( - inputId = "upgma_tippoint_color", - width = "100%", - selected = "#3A4657", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ) - ), - column( - width = 4, - align = "left", - conditionalPanel( - "input.upgma_mapping_show==false", - checkboxInput( - "upgma_tipcolor_mapping_show", - label = h5("Add variable", style = "color:white; font-size: 14px; position: relative; bottom: -10px;"), - value = FALSE - ) - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - h5(p("Shape"), style = "color:white; position: relative; right: -17px; margin-top: 30px") - ), - column( - width = 4, - align = "center", - conditionalPanel( - "input.upgma_tipshape_mapping_show==false", - selectInput( - "upgma_tippoint_shape", - "", - width = "100%", - choices = c( - Circle = "circle", - Square = "square", - Diamond = "diamond", - Triangle = "triangle", - Cross = "cross", - Asterisk = "asterisk" - ) - ) - ), - conditionalPanel( - "input.upgma_tipshape_mapping_show==true", - uiOutput("upgma_tipshape_mapping") - ) - ), - column( - width = 4, - align = "left", - checkboxInput( - "upgma_tipshape_mapping_show", - label = h5("Add variable", style = "color:white; font-size: 14px; position: relative; bottom: -10px;"), - value = FALSE - ) - ) - ) - ) - ), - hr(), - fluidRow( - column( - width = 6, fluidRow( column( width = 12, align = "left", - h4(p("Node points"), style = "color:white; position: relative; right: -15px"), + h4(p("Tips"), style = "color:white; position: relative; right: -15px"), fluidRow( column( - width = 5, + width = 4, align = "left", - checkboxInput( - "upgma_nodepoint_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + div( + class = "mat-switch-lab", + materialSwitch( + "upgma_tiplab_show", + h5(p("Show"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = TRUE, + right = TRUE + ) + ) + ), + column( + width = 4, + align = "center", + uiOutput("upgma_tiplab") + ), + column( + width = 3, + div( + class = "mat-switch-align", + materialSwitch( + "upgma_align", + h5(p("Align"), style = "color:white; padding-left: 0px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) ) ), column( - width = 7, + width = 1, align = "right", dropMenu( actionBttn( - "upgma_nodepoint_menu", + "upgma_labeltext_menu", label = "", color = "default", size = "sm", style = "material-flat", icon = icon("sliders") ), - placement = "top-end", + placement = "top-start", theme = "translucent", fluidRow( column( - width = 12, + width = 6, align = "center", sliderInput( - "upgma_nodepoint_alpha", + "upgma_tiplab_alpha", label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - value = 1, min = 0.1, max = 1, + value = 1, width = "150px", ticks = FALSE - ), + ), br(), - uiOutput("upgma_nodepoint_size") - ) - ) - ) - ) - ), - fluidRow( - column( - width = 5, - h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 30px") - ), - column( - width = 7, - align = "center", - colorPickr( - inputId = "upgma_nodepoint_color", - width = "100%", - selected = "#3A4657", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start" - ) - ) - ), - fluidRow( - column( - width = 5, - h5(p("Shape"), style = "color:white; position: relative; right: -20px; margin-top: 30px") - ), - column( - width = 7, - align = "center", - selectInput( - "upgma_nodepoint_shape", - "", - choices = c( - Circle = "circle", - Square = "square", - Diamond = "diamond", - Triangle = "triangle", - Cross = "cross", - Asterisk = "asterisk" - ) - ) - ) - ) - ) - ) - ), - column( - width = 6, - fluidRow( - column( - width = 12, - align = "left", - fluidRow( - column( - width = 6, - h4(p("Tiles"), style = "color:white; position: relative; right: -15px") - ), - column( - width = 6, - div( - class = "tile1", - selectInput( - "upgma_tile_num", - "", - choices = 1:5, - width = "70px" - ) - ) - ) - ), - conditionalPanel( - "input.upgma_tile_num == 1", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "upgma_tiles_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "upgma_tile_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("upgma_fruit_width"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", + conditionalPanel( + "!(input.upgma_layout=='inward'|input.upgma_layout=='circular')", sliderInput( - "upgma_fruit_offset_circ", + inputId = "upgma_tiplab_nudge_x", label = h5("Position", style = "color:white; margin-bottom: 0px"), min = -3, max = 3, - step= 0.05, + step = 0.05, value = 0, width = "150px", ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "upgma_fruit_alpha", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE ) - ) - ) - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, - align = "center", - uiOutput("upgma_fruit_variable") - ) - ), - fluidRow( - column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_low", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_mid", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_high", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ) - ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "upgma_div_tiles", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "upgma_tile_mid", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) - ) - ) - ) - ), - conditionalPanel( - "input.upgma_tile_num == 2", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "upgma_tiles_show_2", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "upgma_tile_menu_2", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("upgma_fruit_width2"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", + ), + conditionalPanel( + "input.upgma_layout=='circular'", sliderInput( - "upgma_fruit_offset_circ_2", + inputId = "upgma_tiplab_position", label = h5("Position", style = "color:white; margin-bottom: 0px"), min = -3, max = 3, - step= 0.05, - value = 0, + step = 0.05, + value = -0.05, width = "150px", ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", + ) + ), + conditionalPanel( + "input.upgma_layout=='inward'", sliderInput( - "upgma_fruit_alpha_2", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, + inputId = "upgma_tiplab_position_inw", + label = h5("Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + step = 0.05, + value = 1.1, width = "150px", ticks = FALSE ) + ), + br(), + sliderInput( + inputId = "upgma_tiplab_angle", + label = h5("Angle", style = "color:white; margin-bottom: 0px"), + min = -90, + max = 90, + value = 0, + ticks = FALSE, + width = "150px", + ) + ), + column( + width = 6, + align = "center", + uiOutput("upgma_tiplab_size"), + br(), + selectInput( + "upgma_tiplab_fontface", + label = h5("Fontface", style = "color:white; margin-bottom: 5px; margin-top: 16px"), + width = "250px", + choices = c(Plain = "plain", Bold = "bold", Italic = "italic", `B & I` = "bold.italic") ) ) ) ) + ) + ) + ) + ), + fluidRow( + column( + width = 4, + align = "left", + h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 23px") + ), + column( + width = 4, + align = "center", + colorPickr( + inputId = "upgma_tiplab_color", + width = "100%", + selected = "#000000", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" + ) + ) + ), + fluidRow( + column( + width = 4, + align = "left", + br(), + div( + class = "mat-switch-geom", + materialSwitch( + "upgma_geom", + h5(p("Panels"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) + ), + column( + width = 4, + colorPickr( + inputId = "upgma_tiplab_fill", + width = "100%", + selected = "#84D9A0", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" + ) + ), + column( + width = 3, + align = "left", + dropMenu( + actionBttn( + "upgma_labelformat_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), + placement = "top-start", + theme = "translucent", fluidRow( column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, - align = "center", - uiOutput("upgma_fruit_variable2") - ) - ), - fluidRow( - column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_low_2", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_mid_2", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, + width = 12, align = "center", - colorPickr( - inputId = "upgma_tile_color_high_2", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ) - ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "upgma_div_tiles_2", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "upgma_tile_mid_2", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) + uiOutput("upgma_tiplab_padding"), + br(), + sliderInput( + inputId = "upgma_tiplab_labelradius", + label = h5("Smooth edge", style = "color:white; margin-bottom: 0px"), + min = 0, + max = 0.5, + value = 0.2, + width = "150px", + ticks = FALSE ) ) ) - ), - conditionalPanel( - "input.upgma_tile_num == 3", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "upgma_tiles_show_3", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + ) + ) + ) + ) + ) + ), + column( + width = 4, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + fluidRow( + column( + width = 12, + align = "left", + h4(p("Branches"), style = "color:white; position: relative; right: -15px"), + fluidRow( + column( + width = 4, + align = "left", + div( + class = "mat-switch-lab", + materialSwitch( + "upgma_show_branch_label", + h5(p("Show"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "upgma_tile_menu_3", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("upgma_fruit_width3"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "upgma_fruit_offset_circ_3", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step= 0.05, - value = 0, - width = "150px", - ticks = FALSE - ), - br() + ) + ), + column( + width = 4, + align = "center", + uiOutput("upgma_branch_label") + ), + column( + width = 3, + align = "right", + dropMenu( + actionBttn( + "upgma_branch_label_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") + ), + placement = "top-start", + theme = "translucent", + fluidRow( + column( + width = 6, + align = "center", + sliderInput( + "upgma_branchlab_alpha", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 0.65, + width = "250px", + ticks = FALSE + ), + br(), + sliderInput( + inputId = "upgma_branch_x", + label = h5("X Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + value = 0, + width = "250px", + ticks = FALSE + ), + br(), + sliderInput( + inputId = "upgma_branch_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + min = -3, + max = 3, + value = 0, + width = "250px", + ticks = FALSE ) ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "upgma_fruit_alpha_3", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) + column( + width = 6, + align = "center", + uiOutput("upgma_branch_size"), + selectInput( + "upgma_branchlab_fontface", + label = h5("Fontface", style = "color:white; margin-bottom: 0px;"), + width = "250px", + choices = c(Plain = "plain", Bold = "bold", Italic = "italic", `B & I` = "bold.italic") + ), + br(), + sliderInput( + "upgma_branch_labelradius", + label = h5("Smooth edge", style = "color:white; margin-bottom: 0px"), + min = 0, + max = 0.5, + value = 0.5, + width = "250px", + ticks = FALSE ) ) ) ) + ) + ) + ) + ), + fluidRow( + column( + width = 4, + align = "left", + h5(p("Color"), style = "color:white; position: relative; right: -14px; margin-top: 23px; margin-bottom: 82px") + ), + column( + width = 4, + colorPickr( + inputId = "upgma_branch_label_color", + width = "100%", + selected = "#FFB7B7", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" + ), + br(), br() + ) + ) + ) + ) + ) + ), + conditionalPanel( + "input.upgma_controls=='Elements'", + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + h4(p("Tip Points"), style = "color:white; position: relative; right: -15px"), + fluidRow( + column( + width = 8, + align = "left", + div( + class = "mat-switch", + materialSwitch( + "upgma_tippoint_show", + h5(p("Show"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) + ), + column( + width = 4, + align = "right", + dropMenu( + actionBttn( + "upgma_tippoint_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), + placement = "top-end", + theme = "translucent", fluidRow( column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, - align = "center", - uiOutput("upgma_fruit_variable3") - ) - ), - fluidRow( - column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_low_3", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_mid_3", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, + width = 12, align = "center", - colorPickr( - inputId = "upgma_tile_color_high_3", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) + sliderInput( + "upgma_tippoint_alpha", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + value = 0.5, + min = 0.1, + max = 1, + width = "150px", + ticks = FALSE + ), + br(), + uiOutput("upgma_tippoint_size") ) - ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "upgma_div_tiles_3", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "upgma_tile_mid_3", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) - ) + ) + ) + ) + ), + fluidRow( + column( + width = 5, + align = "left", + h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 36px") + ), + column( + width = 7, + align = "center", + colorPickr( + inputId = "upgma_tippoint_color", + width = "100%", + selected = "#3A4657", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" + ) + ) + ), + fluidRow( + column( + width = 5, + align = "left", + h5(p("Shape"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: 48px") + ), + column( + width = 7, + align = "center", + conditionalPanel( + "input.upgma_tipshape_mapping_show==false", + selectInput( + "upgma_tippoint_shape", + "", + width = "100%", + choices = c( + Circle = "circle", + Square = "square", + Diamond = "diamond", + Triangle = "triangle", + Cross = "cross", + Asterisk = "asterisk" ) ) ), conditionalPanel( - "input.upgma_tile_num == 4", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "upgma_tiles_show_4", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "upgma_tile_menu_4", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("upgma_fruit_width4"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "upgma_fruit_offset_circ_4", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step = 0.05, - value = 0, - width = "150px", - ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "upgma_fruit_alpha_4", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) - ) - ) - ), - fluidRow( - column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') - ) - ) - ), - column( - width = 7, - align = "center", - uiOutput("upgma_fruit_variable4") - ) + "input.upgma_tipshape_mapping_show==true", + h5(p("Variable assigned"), style = "color:white; position: relative; right: -15px; margin-top: 30px; font-style: italic") + ), + br() + ) + ) + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + h4(p("Node Points"), style = "color:white; position: relative; right: -15px"), + fluidRow( + column( + width = 8, + align = "left", + div( + class = "mat-switch", + materialSwitch( + "upgma_nodepoint_show", + h5(p("Show"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) + ), + column( + width = 4, + align = "right", + dropMenu( + actionBttn( + "upgma_nodepoint_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), + placement = "top-end", + theme = "translucent", fluidRow( column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_low_4", - selected = "#F53900", - label = h5(p("Low"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_mid_4", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, + width = 12, align = "center", - colorPickr( - inputId = "upgma_tile_color_high_4", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ) - ), - br(), - fluidRow( - column( - width = 6, - align = "left", - checkboxInput( - "upgma_div_tiles_4", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "upgma_tile_mid_4", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) - ) + sliderInput( + "upgma_nodepoint_alpha", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + value = 1, + min = 0.1, + max = 1, + width = "150px", + ticks = FALSE + ), + br(), + uiOutput("upgma_nodepoint_size") ) ) + ) + ) + ), + fluidRow( + column( + width = 5, + h5(p("Color"), style = "color:white; position: relative; right: -15px; margin-top: 36px") + ), + column( + width = 7, + align = "center", + colorPickr( + inputId = "upgma_nodepoint_color", + width = "100%", + selected = "#3A4657", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start" + ) + ) + ), + fluidRow( + column( + width = 5, + h5(p("Shape"), style = "color:white; position: relative; right: -15px; margin-top: 30px; margin-bottom: 48px") + ), + column( + width = 7, + align = "center", + selectInput( + "upgma_nodepoint_shape", + "", + choices = c( + Circle = "circle", + Square = "square", + Diamond = "diamond", + Triangle = "triangle", + Cross = "cross", + Asterisk = "asterisk" + ) ), - conditionalPanel( - "input.upgma_tile_num == 5", - fluidRow( - column( - width = 4, - align = "left", - checkboxInput( - "upgma_tiles_show_5", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE - ) - ), - column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "upgma_tile_menu_5", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 12, - align = "center", - uiOutput("upgma_fruit_width5"), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "upgma_fruit_offset_circ_5", - label = h5("Position", style = "color:white; margin-bottom: 0px"), - min = -3, - max = 3, - step = 0.05, - value = 0, - width = "150px", - ticks = FALSE - ), - br() - ) - ), - fluidRow( - column( - width = 12, - align = "center", - sliderInput( - "upgma_fruit_alpha_5", - label = h5("Opacity", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 1, - value = 1, - width = "150px", - ticks = FALSE - ) - ) - ) - ) - ) + br() + ) + ) + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + fluidRow( + column( + width = 6, + h4(p("Tiles"), style = "color:white; position: relative; right: -15px") + ) + ), + fluidRow( + column( + width = 5, + div( + class = "sel-tile-number", + selectInput( + "upgma_tile_number", + "", + choices = 1:5, + width = "70px" + ) + ) + ), + column( + width = 7, + align = "right", + dropMenu( + actionBttn( + "upgma_tile_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), + placement = "top-start", + theme = "translucent", fluidRow( column( - width = 4, - align = "left", - HTML( - paste( - tags$span(style='color: white; font-size: 14px; margin-left: 16px; position: relative; bottom: -28px', 'Variable') + width = 12, + align = "center", + conditionalPanel( + "input.upgma_tile_num == 1", + sliderInput( + "upgma_fruit_alpha", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.upgma_tile_num == 2", + sliderInput( + "upgma_fruit_alpha_2", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.upgma_tile_num == 3", + sliderInput( + "upgma_fruit_alpha_3", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.upgma_tile_num == 4", + sliderInput( + "upgma_fruit_alpha_4", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + ), + conditionalPanel( + "input.upgma_tile_num == 5", + sliderInput( + "upgma_fruit_alpha_5", + label = h5("Opacity", style = "color:white; margin-bottom: 0px"), + min = 0.1, + max = 1, + value = 1, + step = 0.05, + width = "150px", + ticks = FALSE ) ) - ), - column( - width = 7, - align = "center", - uiOutput("upgma_fruit_variable5") ) + ) + ) + ) + ), + conditionalPanel( + "input.upgma_tile_num == 1", + fluidRow( + column( + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 27px;") + ), + column( + width = 7, + align = "center", + uiOutput("upgma_fruit_width"), + br() + ) + ), + fluidRow( + column( + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 54px") + ), + column( + width = 7, + align = "center", + uiOutput("upgma_fruit_offset_circ"), + br() + ) + ) + ), + conditionalPanel( + "input.upgma_tile_num == 2", + fluidRow( + column( + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 27px;") + ), + column( + width = 7, + align = "center", + uiOutput("upgma_fruit_width2"), + br() + ) + ), + fluidRow( + column( + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 54px") + ), + column( + width = 7, + align = "center", + uiOutput("upgma_fruit_offset_circ_2"), + br() + ) + ) + ), + conditionalPanel( + "input.upgma_tile_num == 3", + fluidRow( + column( + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 27px;") + ), + column( + width = 7, + align = "center", + uiOutput("upgma_fruit_width3"), + br() + ) + ), + fluidRow( + column( + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 54px") + ), + column( + width = 7, + align = "center", + uiOutput("upgma_fruit_offset_circ_3"), + br() + ) + ) + ), + conditionalPanel( + "input.upgma_tile_num == 4", + fluidRow( + column( + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 27px;") + ), + column( + width = 7, + align = "center", + uiOutput("upgma_fruit_width4"), + br() + ) + ), + fluidRow( + column( + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 54px") + ), + column( + width = 7, + align = "center", + uiOutput("upgma_fruit_offset_circ_4"), + br() + ) + ) + ), + conditionalPanel( + "input.upgma_tile_num == 5", + fluidRow( + column( + width = 5, + h5("Width", style = "color:white; margin-left: 15px; margin-top: 27px;") + ), + column( + width = 7, + align = "center", + uiOutput("upgma_fruit_width5"), + br() + ) + ), + fluidRow( + column( + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 32px; margin-bottom: 54px") + ), + column( + width = 7, + align = "center", + uiOutput("upgma_fruit_offset_circ_5"), + br() + ) + ) + ) + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + fluidRow( + column( + width = 6, + h4(p("Heatmap"), style = "color:white; position: relative; right: -15px") + ) + ), + fluidRow( + column( + width = 3, + h5("Title", style = "color:white; margin-left: 15px; margin-top: 32px;") + ), + column( + width = 6, + align = "center", + textInput( + "upgma_heatmap_title", + label = "", + value = "Heatmap", + placeholder = "Heatmap" + ) + ), + column( + width = 3, + align = "right", + dropMenu( + actionBttn( + "upgma_heatmap_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), + placement = "top-end", + theme = "translucent", fluidRow( column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_low_5", - selected = "#F53900", - label = h5(p("Low"), style = "color:white; margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, - align = "center", - colorPickr( - inputId = "upgma_tile_color_mid_5", - selected = "#FFFFFF", - label = h5(p("Mid"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) - ), - column( - width = 4, + width = 12, align = "center", - colorPickr( - inputId = "upgma_tile_color_high_5", - selected = "#68B127", - label = h5(p("High"), style = "color:white;margin-bottom: -5px"), - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" - ) + uiOutput("upgma_colnames_angle"), + br(), + uiOutput("upgma_colnames_y") ) + ) + ) + ) + ), + fluidRow( + column( + width = 5, + h5("Width", style = "color: white; margin-left: 15px; margin-top: 40px;") + ), + column( + width = 7, + uiOutput("upgma_heatmap_width") + ) + ), + fluidRow( + column( + width = 5, + h5("Position", style = "color:white; margin-left: 15px; margin-top: 36px;") + ), + column( + width = 7, + uiOutput("upgma_heatmap_offset") + ) + ), + br(), br() + ) + ) + ), + column( + width = 2, + box( + solidHeader = TRUE, + status = "info", + width = "100%", + column( + width = 12, + align = "left", + h4(p("Clade Highlight"), style = "color:white; position: relative; right: -15px"), + fluidRow( + column( + width = 12, + div( + class = "mat-switch", + materialSwitch( + "upgma_nodelabel_show", + h5(p("Toggle Node View"), style = "color:white; padding-left: 5px; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) + ) + ), + fluidRow( + column( + width = 3, + h5(p("Nodes"), style = "color:white; position: relative; right: -15px; margin-top: 20px") + ), + column( + width = 9, + uiOutput("upgma_parentnode") + ) + ), + uiOutput("upgma_clade_scale"), + fluidRow( + column( + width = 8, + align = "center", + div( + class = "sel-clade", + selectInput( + "upgma_clade_type", + "", + choices = c("Rect" = "rect", + "Round" = "roundrect"), + selected = c("Round" = "roundrect") + ) + ) + ), + column( + width = 4, + align = "right", + dropMenu( + actionBttn( + "upgma_clade_menu", + label = "", + color = "default", + size = "sm", + style = "material-flat", + icon = icon("sliders") ), - br(), + placement = "top-end", + theme = "translucent", fluidRow( column( - width = 6, - align = "left", - checkboxInput( - "upgma_div_tiles_5", - h5(p("Diverging"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - ) - ), - column( - width = 6, - div( - class = "tile_select", - selectInput( - "upgma_tile_mid_5", - h5(p("Midpoint"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - choices = c("Zero", "Mean", "Median"), - width = "90px" - ) + width = 12, + align = "center", + selectInput( + "upgma_clade_align", + label = h5("Align", style = "color:white; font-size: 14px;"), + choices = c("None" = "none", + "Left" = "left", + "Right" = "right", + "Both" = "both"), + width = "100px" ) ) ) @@ -5179,128 +4838,295 @@ ui <- dashboardPage( ) ) ) - ), - hr(), - fluidRow( + ) + ) + ), + conditionalPanel( + "input.upgma_controls=='Variables'", + column( + width = 7, + box( + solidHeader = TRUE, + status = "info", + width = "100%", column( - width = 6, + width = 12, + align = "left", fluidRow( column( - width = 12, - align = "left", - fluidRow( - column( - width = 6, - h4(p("Heatmap"), style = "color:white; position: relative; right: -15px") + width = 3, + align = "center", + h4(p("Element"), style = "color:white; margin-bottom: 20px") + ), + column( + width = 3, + align = "center", + h4(p("Variable"), style = "color:white; margin-bottom: 20px; margin-right: 30px;") + ), + column( + width = 6, + align = "center", + h4(p("Color Scale"), style = "color:white; margin-bottom: 20px") + ) + ), + fluidRow( + column( + width = 3, + div( + class = "mat-switch-v", + materialSwitch( + "upgma_mapping_show", + h5(p("Tip Label Color"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE ) - ), + ) + ), + column( + width = 3, + align = "center", + uiOutput("upgma_color_mapping") + ), + column( + width = 3, + align = "center", + uiOutput("upgma_tiplab_scale") + ), + uiOutput("upgma_tiplab_mapping_info"), + ), + fluidRow( + column( + width = 3, + div( + class = "mat-switch-v", + materialSwitch( + "upgma_tipcolor_mapping_show", + h5(p("Tip Point Color"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) + ), + column( + width = 3, + align = "center", + uiOutput("upgma_tipcolor_mapping") + ), + column( + width = 3, + align = "center", + uiOutput("upgma_tippoint_scale") + ), + uiOutput("upgma_tipcolor_mapping_info") + ), + fluidRow( + column( + width = 3, + div( + class = "mat-switch-v", + materialSwitch( + "upgma_tipshape_mapping_show", + h5(p("Tip Point Shape"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) + ), + column( + width = 3, + align = "center", + uiOutput("upgma_tipshape_mapping") + ), + column( + width = 3, + HTML( + paste( + tags$span(style='color: white; font-size: 14px; font-style: italic; position: relative; bottom: -16px; right: -40px;', 'No scale for shapes') + ) + ) + ), + uiOutput("upgma_tipshape_mapping_info") + ), + fluidRow( + column( + width = 3, fluidRow( column( - width = 4, - align = "left", - checkboxInput( - "upgma_heatmap_show", - h5(p("Show"), style = "color:white; position: relative; bottom: -8px; right: -17px"), - value = FALSE + width = 8, + conditionalPanel( + "input.upgma_tile_num == 1", + div( + class = "mat-switch-v", + materialSwitch( + "upgma_tiles_show_1", + h5(p("Tile"), style = "color:white; position: relative; top: -4px; right: -5px; margin-right: 10px"), + value = FALSE, + right = TRUE + ) + ) + ), + conditionalPanel( + "input.upgma_tile_num == 2", + div( + class = "mat-switch-v", + materialSwitch( + "upgma_tiles_show_2", + h5(p("Tile"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) + ), + conditionalPanel( + "input.upgma_tile_num == 3", + div( + class = "mat-switch-v", + materialSwitch( + "upgma_tiles_show_3", + h5(p("Tile"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) + ), + conditionalPanel( + "input.upgma_tile_num == 4", + div( + class = "mat-switch-v", + materialSwitch( + "upgma_tiles_show_4", + h5(p("Tile"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) + ), + conditionalPanel( + "input.upgma_tile_num == 5", + div( + class = "mat-switch-v", + materialSwitch( + "upgma_tiles_show_5", + h5(p("Tile"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE + ) + ) ) - ), + ), column( - width = 7, - align = "right", - dropMenu( - actionBttn( - "upgma_heatmap_menu", - label = "", - color = "default", - size = "sm", - style = "material-flat", - icon = icon("sliders") - ), - placement = "top-end", - theme = "translucent", - fluidRow( - column( - width = 6, - align = "center", - sliderInput( - "upgma_heatmap_width", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = 0.1, - max = 5, - value = 0.5, - width = "250px", - ticks = FALSE - ), - br(), - uiOutput("upgma_heatmap_offs") - ), - column( - width = 6, - align = "center", - br(), - sliderInput( - "upgma_colnames_angle", - label = h5("Names angle", style = "color:white; margin-bottom: 0px"), - min = -90, - max = 90, - value = 0, - width = "250px", - ticks = FALSE - ), - br(), - sliderInput( - "upgma_colnames_x", - label = h5("Names X Pos", style = "color:white; margin-bottom: 0px"), - min = -10, - max = 10, - value = 0, - width = "250px", - ticks = FALSE - ), - br(), - sliderInput( - "upgma_colnames_y", - label = h5("Names Y Pos", style = "color:white; margin-bottom: 0px"), - min = -10, - max = 10, - value = 0, - width = "250px", - ticks = FALSE - ) - ) + width = 4, + align = "left", + div( + class = "tile-sel", + selectInput( + "upgma_tile_num", + "", + choices = 1:5, + width = "50px" ) ) ) + ) + ), + column( + width = 3, + align = "center", + conditionalPanel( + "input.upgma_tile_num == 1", + uiOutput("upgma_fruit_variable") + ), + conditionalPanel( + "input.upgma_tile_num == 2", + uiOutput("upgma_fruit_variable2") + ), + conditionalPanel( + "input.upgma_tile_num == 3", + uiOutput("upgma_fruit_variable3") + ), + conditionalPanel( + "input.upgma_tile_num == 4", + uiOutput("upgma_fruit_variable4") ), - fluidRow( - column( - width = 6, - uiOutput("upgma_heatmap_sel") - ), - column( - width = 6, - textInput( - "upgma_heatmap_title", - label = h5("Legend title", style = "color:white; margin-bottom: 0px; position: relative; bottom: -20px"), - value = "Heatmap", - placeholder = "Heatmap" - ) + conditionalPanel( + "input.upgma_tile_num == 5", + uiOutput("upgma_fruit_variable5") + ) + ), + conditionalPanel( + "input.upgma_tile_num == 1", + column( + width = 3, + align = "center", + uiOutput("upgma_tiles_scale_1") + ) + ), + conditionalPanel( + "input.upgma_tile_num == 2", + column( + width = 3, + align = "center", + uiOutput("upgma_tiles_scale_2") + ) + ), + conditionalPanel( + "input.upgma_tile_num == 3", + column( + width = 3, + align = "center", + uiOutput("upgma_tiles_scale_3") + ) + ), + conditionalPanel( + "input.upgma_tile_num == 4", + column( + width = 3, + align = "center", + uiOutput("upgma_tiles_scale_4") + ) + ), + conditionalPanel( + "input.upgma_tile_num == 5", + column( + width = 3, + align = "center", + uiOutput("upgma_tiles_scale_5") + ) + ), + uiOutput("upgma_fruit_mapping_info") + ), + fluidRow( + column( + width = 3, + div( + class = "mat-switch-v", + materialSwitch( + "upgma_heatmap_show", + h5(p("Heatmap"), style = "color:white; position: relative; top: -4px; right: -5px;"), + value = FALSE, + right = TRUE ) ) - ) + ), + column( + width = 3, + align = "center", + uiOutput("upgma_heatmap_sel") + ), + column( + width = 3, + align = "center", + uiOutput("upgma_heatmap_scale") + ), + uiOutput("upgma_heatmap_mapping_info") ) ) - ), - conditionalPanel( - "input.upgma_layout=='inward'|input.upgma_layout=='circular'", - br(), br() ) - ), - br(), br(), br(), br(), br(), br(), br() + ) ) - ) - ), - br(), br(), br(), br(), br(), br(), br() + ), + br(), br(), br(), br() + ) ) ) # End tabItems ) # End dashboardPage @@ -6725,102 +6551,6 @@ server <- function(input, output, session) { ), conditionalPanel( "input.tree_algo=='UPGMA'", - fluidRow( - column( - width = 12, - align = "left", - br(), - HTML( - paste( - tags$span(style='color: white; font-size: 16px; margin-left: 15px', "Sizing") - ) - ) - ) - ), - fluidRow( - column( - width = 12, - radioGroupButtons( - "upgma_ratio", - "", - choiceNames = c("16:10", "16:9", "4:3"), - choiceValues = c((16/10), (16/9), (4/3)), - width = "100%" - ), - br(), - sliderInput( - "upgma_scale", - "", - min = 500, - max = 1200, - value = 800, - width = "100%", - ticks = FALSE - ) - ) - ), - fluidRow( - column( - width = 3, - align = "left", - br(), - HTML( - paste( - tags$span(style='color: white; font-size: 14px; position: relative; bottom: -28px; margin-left: 15px ', "Zoom") - ) - ) - ), - column( - width = 9, - align = "right", - br(), - sliderInput( - "upgma_zoom", - label = NULL, - min = 0.5, - max = 1.5, - step = 0.05, - value = 0.95, - ticks = FALSE - ) - ) - ), - fluidRow( - column( - width = 5, - align = "left", - div( - class = "arrow_move", - numericInput( - "upgma_v", - label = h5("Y", style = "color:white; margin-bottom: -6px; margin-left: 10px"), - min = -0.5, - max = 0.5, - step = 0.01, - value = 0, - width = "80px" - ) - ) - ), - column( - width = 5, - align = "left", - div( - class = "arrow_move", - numericInput( - "upgma_h", - label = h5("X", style = "color:white; margin-bottom: -6px; margin-left: 10px"), - min = -0.5, - max = 0.5, - step = 0.01, - value = 0, - width = "80px" - ) - ) - ) - ), - br(), - hr(), fluidRow( column( width = 12, @@ -9831,11 +9561,151 @@ server <- function(input, output, session) { #### NJ and UPGMA controls ---- # Mapping value number information + output$nj_tiplab_mapping_info <- renderUI({ + if(!is.null(input$nj_color_mapping)) { + if(is.numeric(unlist(DB$meta[input$nj_color_mapping]))) { + if(input$nj_tiplab_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_color_mapping_div_mid", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 23px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_color_mapping]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_color_mapping]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_color_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + }) + + output$upgma_tiplab_mapping_info <- renderUI({ + if(!is.null(input$upgma_color_mapping)) { + if(is.numeric(unlist(DB$meta[input$upgma_color_mapping]))) { + if(input$upgma_tiplab_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "upgma_color_mapping_div_mid", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 23px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$upgma_color_mapping]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$upgma_color_mapping]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$upgma_color_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + }) + + output$nj_tipcolor_mapping_info <- renderUI({ + if(!is.null(input$nj_tipcolor_mapping)) { + if(is.numeric(unlist(DB$meta[input$nj_tipcolor_mapping]))) { + if(input$nj_tippoint_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tipcolor_mapping_div_mid", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_tipcolor_mapping]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_tipcolor_mapping]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_tipcolor_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + }) - output$nj_tiplab_mapping_info <- renderUI({ - if(!is.null(input$nj_color_mapping)) { - if(is.numeric(unlist(DB$meta[input$nj_color_mapping]))) { - if(input$nj_tiplab_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + output$upgma_tipcolor_mapping_info <- renderUI({ + if(!is.null(input$upgma_tipcolor_mapping)) { + if(is.numeric(unlist(DB$meta[input$upgma_tipcolor_mapping]))) { + if(input$upgma_tippoint_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { column( width = 3, fluidRow( @@ -9848,7 +9718,7 @@ server <- function(input, output, session) { div( class = "divmid-sel1", selectInput( - "nj_color_mapping_div_mid", + "upgma_tipcolor_mapping_div_mid", label = "", choices = c("Zero", "Mean", "Median"), selected = "Mean" @@ -9856,104 +9726,399 @@ server <- function(input, output, session) { ) ) ) - ) - } else { - column( - width = 3, - h5("Continous values", style = "color: white; font-size: 14px; margin-top: 23px; margin-left: 40px") - ) - } - } else { - if(length(unique(unlist(DB$meta[input$nj_color_mapping]))) > 7) { - column( - width = 3, - h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_color_mapping]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") - ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$upgma_tipcolor_mapping]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$upgma_tipcolor_mapping]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$upgma_tipcolor_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + }) + + output$nj_tipshape_mapping_info <- renderUI({ + if(!is.null(input$nj_tipshape_mapping)) { + if(is.numeric(unlist(DB$meta[input$nj_tipshape_mapping]))) { + column( + width = 3, + h5("Mapping continous variables to shape not possible", style = "color: #E18B00; font-style: italic; font-size: 12px; margin-top: 15px; margin-left: 40px") + ) + } else { + if(length(unique(unlist(DB$meta[input$nj_tipshape_mapping]))) > 6) { + column( + width = 3, + h5("Mapping > 6 variables to shape not possible", style = "color: #E18B00; font-style: italic; font-size: 12px; margin-top: 15px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_tipshape_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + }) + + output$upgma_tipshape_mapping_info <- renderUI({ + if(!is.null(input$upgma_tipshape_mapping)) { + if(is.numeric(unlist(DB$meta[input$upgma_tipshape_mapping]))) { + column( + width = 3, + h5("Mapping continous variables to shape not possible", style = "color: #E18B00; font-style: italic; font-size: 12px; margin-top: 15px; margin-left: 40px") + ) + } else { + if(length(unique(unlist(DB$meta[input$upgma_tipshape_mapping]))) > 6) { + column( + width = 3, + h5("Mapping > 6 variables to shape not possible", style = "color: #E18B00; font-style: italic; font-size: 12px; margin-top: 15px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$upgma_tipshape_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + }) + + output$nj_fruit_mapping_info <- renderUI({ + if(input$nj_tile_num == 1) { + if(!is.null(input$nj_fruit_variable)) { + if(is.numeric(unlist(DB$meta[input$nj_fruit_variable]))) { + if(input$nj_tiles_scale_1 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tiles_mapping_div_mid_1", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + } else if (input$nj_tile_num == 2) { + if(!is.null(input$nj_fruit_variable_2)) { + if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_2]))) { + if(input$nj_tiles_scale_2 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tiles_mapping_div_mid_2", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + } else if (input$nj_tile_num == 3) { + if(!is.null(input$nj_fruit_variable_3)) { + if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_3]))) { + if(input$nj_tiles_scale_3 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tiles_mapping_div_mid_3", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + } else if (input$nj_tile_num == 4) { + if(!is.null(input$nj_fruit_variable_4)) { + if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_4]))) { + if(input$nj_tiles_scale_4 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tiles_mapping_div_mid_4", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } else { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } + } + } else {NULL} + } else if (input$nj_tile_num == 5) { + if(!is.null(input$nj_fruit_variable_5)) { + if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_5]))) { + if(input$nj_tiles_scale_5 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "nj_tiles_mapping_div_mid_5", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } } else { - column( - width = 3, - h5(paste0(length(unique(unlist(DB$meta[input$nj_color_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") - ) + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } } - } - } else {NULL} + } else {NULL} + } }) - output$nj_tipcolor_mapping_info <- renderUI({ - if(!is.null(input$nj_tipcolor_mapping)) { - if(is.numeric(unlist(DB$meta[input$nj_tipcolor_mapping]))) { - if(input$nj_tippoint_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { - column( - width = 3, - fluidRow( - column( - width = 4, - h5("Midpoint", style = "color: white; margin-top: 22px;") - ), - column( - width = 8, - div( - class = "divmid-sel1", - selectInput( - "nj_tipcolor_mapping_div_mid", - label = "", - choices = c("Zero", "Mean", "Median"), - selected = "Mean" + output$upgma_fruit_mapping_info <- renderUI({ + if(input$upgma_tile_num == 1) { + if(!is.null(input$upgma_fruit_variable)) { + if(is.numeric(unlist(DB$meta[input$upgma_fruit_variable]))) { + if(input$upgma_tiles_scale_1 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "upgma_tiles_mapping_div_mid_1", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) ) ) ) ) - ) - } else { - column( - width = 3, - h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") - ) - } - } else { - if(length(unique(unlist(DB$meta[input$nj_tipcolor_mapping]))) > 7) { - column( - width = 3, - h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_tipcolor_mapping]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") - ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } } else { - column( - width = 3, - h5(paste0(length(unique(unlist(DB$meta[input$nj_tipcolor_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") - ) + if(length(unique(unlist(DB$meta[input$upgma_fruit_variable]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$upgma_fruit_variable]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$upgma_fruit_variable]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } } - } - } else {NULL} - }) - - output$nj_tipshape_mapping_info <- renderUI({ - if(!is.null(input$nj_tipshape_mapping)) { - if(is.numeric(unlist(DB$meta[input$nj_tipshape_mapping]))) { - column( - width = 3, - h5("Mapping continous variables to shape not possible", style = "color: #E18B00; font-style: italic; font-size: 12px; margin-top: 15px; margin-left: 40px") - ) - } else { - if(length(unique(unlist(DB$meta[input$nj_tipshape_mapping]))) > 6) { - column( - width = 3, - h5("Mapping > 6 variables to shape not possible", style = "color: #E18B00; font-style: italic; font-size: 12px; margin-top: 15px; margin-left: 40px") - ) + } else {NULL} + } else if (input$upgma_tile_num == 2) { + if(!is.null(input$upgma_fruit_variable_2)) { + if(is.numeric(unlist(DB$meta[input$upgma_fruit_variable_2]))) { + if(input$upgma_tiles_scale_2 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + column( + width = 3, + fluidRow( + column( + width = 4, + h5("Midpoint", style = "color: white; margin-top: 22px;") + ), + column( + width = 8, + div( + class = "divmid-sel1", + selectInput( + "upgma_tiles_mapping_div_mid_2", + label = "", + choices = c("Zero", "Mean", "Median"), + selected = "Mean" + ) + ) + ) + ) + ) + } else { + column( + width = 3, + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } } else { - column( - width = 3, - h5(paste0(length(unique(unlist(DB$meta[input$nj_tipshape_mapping]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") - ) + if(length(unique(unlist(DB$meta[input$upgma_fruit_variable_2]))) > 7) { + column( + width = 3, + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$upgma_fruit_variable_2]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + ) + } else { + column( + width = 3, + h5(paste0(length(unique(unlist(DB$meta[input$upgma_fruit_variable_2]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + ) + } } - } - } else {NULL} - }) - - output$nj_fruit_mapping_info <- renderUI({ - if(input$nj_tile_num == 1) { - if(!is.null(input$nj_fruit_variable)) { - if(is.numeric(unlist(DB$meta[input$nj_fruit_variable]))) { - if(input$nj_tiles_scale_1 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + } else {NULL} + } else if (input$upgma_tile_num == 3) { + if(!is.null(input$upgma_fruit_variable_3)) { + if(is.numeric(unlist(DB$meta[input$upgma_fruit_variable_3]))) { + if(input$upgma_tiles_scale_3 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { column( width = 3, fluidRow( @@ -9966,7 +10131,7 @@ server <- function(input, output, session) { div( class = "divmid-sel1", selectInput( - "nj_tiles_mapping_div_mid_1", + "upgma_tiles_mapping_div_mid_3", label = "", choices = c("Zero", "Mean", "Median"), selected = "Mean" @@ -9982,23 +10147,23 @@ server <- function(input, output, session) { ) } } else { - if(length(unique(unlist(DB$meta[input$nj_fruit_variable]))) > 7) { + if(length(unique(unlist(DB$meta[input$upgma_fruit_variable_3]))) > 7) { column( width = 3, - h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$upgma_fruit_variable_3]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") ) } else { column( width = 3, - h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + h5(paste0(length(unique(unlist(DB$meta[input$upgma_fruit_variable_3]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") ) } } } else {NULL} - } else if (input$nj_tile_num == 2) { - if(!is.null(input$nj_fruit_variable_2)) { - if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_2]))) { - if(input$nj_tiles_scale_2 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + } else if (input$upgma_tile_num == 4) { + if(!is.null(input$upgma_fruit_variable_4)) { + if(is.numeric(unlist(DB$meta[input$upgma_fruit_variable_4]))) { + if(input$upgma_tiles_scale_4 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { column( width = 3, fluidRow( @@ -10011,7 +10176,7 @@ server <- function(input, output, session) { div( class = "divmid-sel1", selectInput( - "nj_tiles_mapping_div_mid_2", + "upgma_tiles_mapping_div_mid_4", label = "", choices = c("Zero", "Mean", "Median"), selected = "Mean" @@ -10027,23 +10192,23 @@ server <- function(input, output, session) { ) } } else { - if(length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))) > 7) { + if(length(unique(unlist(DB$meta[input$upgma_fruit_variable_4]))) > 7) { column( width = 3, - h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$upgma_fruit_variable_4]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") ) } else { column( width = 3, - h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + h5(paste0(length(unique(unlist(DB$meta[input$upgma_fruit_variable_4]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") ) } } } else {NULL} - } else if (input$nj_tile_num == 3) { - if(!is.null(input$nj_fruit_variable_3)) { - if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_3]))) { - if(input$nj_tiles_scale_3 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + } else if (input$upgma_tile_num == 5) { + if(!is.null(input$upgma_fruit_variable_5)) { + if(is.numeric(unlist(DB$meta[input$upgma_fruit_variable_5]))) { + if(input$upgma_tiles_scale_5 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { column( width = 3, fluidRow( @@ -10056,7 +10221,7 @@ server <- function(input, output, session) { div( class = "divmid-sel1", selectInput( - "nj_tiles_mapping_div_mid_3", + "upgma_tiles_mapping_div_mid_5", label = "", choices = c("Zero", "Mean", "Median"), selected = "Mean" @@ -10072,23 +10237,34 @@ server <- function(input, output, session) { ) } } else { - if(length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))) > 7) { + if(length(unique(unlist(DB$meta[input$upgma_fruit_variable_5]))) > 7) { column( width = 3, - h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$upgma_fruit_variable_5]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") ) } else { column( width = 3, - h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + h5(paste0(length(unique(unlist(DB$meta[input$upgma_fruit_variable_5]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") ) } } } else {NULL} - } else if (input$nj_tile_num == 4) { - if(!is.null(input$nj_fruit_variable_4)) { - if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_4]))) { - if(input$nj_tiles_scale_4 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + } + }) + + output$nj_heatmap_mapping_info <- renderUI({ + if(!is.null(input$nj_heatmap_select)) { + if (any(sapply(DB$meta[input$nj_heatmap_select], is.numeric)) & + any(!sapply(DB$meta[input$nj_heatmap_select], is.numeric))) { + column( + width = 3, + h5("Heatmap with categorical and continous values not possible", + style = "color: #E18B00; font-size: 12px; font-style: italic; margin-top: 15px; margin-left: 40px") + ) + } else { + if(any(sapply(DB$meta[input$nj_heatmap_select], is.numeric))) { + if(input$nj_heatmap_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { column( width = 3, fluidRow( @@ -10101,7 +10277,7 @@ server <- function(input, output, session) { div( class = "divmid-sel1", selectInput( - "nj_tiles_mapping_div_mid_4", + "nj_heatmap_div_mid", label = "", choices = c("Zero", "Mean", "Median"), selected = "Mean" @@ -10113,27 +10289,38 @@ server <- function(input, output, session) { } else { column( width = 3, - h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 23px; margin-left: 40px") ) } } else { - if(length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))) > 7) { + if(length(unique(unlist(DB$meta[input$nj_heatmap_select]))) > 7) { column( width = 3, - h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + h5(paste0("> 7 categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") ) } else { column( width = 3, - h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + h5("Categorical values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") ) } } - } else {NULL} - } else if (input$nj_tile_num == 5) { - if(!is.null(input$nj_fruit_variable_5)) { - if(is.numeric(unlist(DB$meta[input$nj_fruit_variable_5]))) { - if(input$nj_tiles_scale_5 %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { + } + } else {NULL} + }) + + output$upgma_heatmap_mapping_info <- renderUI({ + if(!is.null(input$upgma_heatmap_select)) { + if (any(sapply(DB$meta[input$upgma_heatmap_select], is.numeric)) & + any(!sapply(DB$meta[input$upgma_heatmap_select], is.numeric))) { + column( + width = 3, + h5("Heatmap with categorical and continous values not possible", + style = "color: #E18B00; font-size: 12px; font-style: italic; margin-top: 15px; margin-left: 40px") + ) + } else { + if(any(sapply(DB$meta[input$upgma_heatmap_select], is.numeric))) { + if(input$upgma_heatmap_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { column( width = 3, fluidRow( @@ -10146,7 +10333,7 @@ server <- function(input, output, session) { div( class = "divmid-sel1", selectInput( - "nj_tiles_mapping_div_mid_5", + "upgma_heatmap_div_mid", label = "", choices = c("Zero", "Mean", "Median"), selected = "Mean" @@ -10158,84 +10345,332 @@ server <- function(input, output, session) { } else { column( width = 3, - h5("Continous values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + h5("Continous values", style = "color: white; font-size: 14px; margin-top: 23px; margin-left: 40px") ) } } else { - if(length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))) > 7) { + if(length(unique(unlist(DB$meta[input$upgma_heatmap_select]))) > 7) { column( width = 3, - h5(paste0("> 7 (", length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))), ") categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") + h5(paste0("> 7 categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") ) } else { column( width = 3, - h5(paste0(length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))), paste0(" categorical values")), style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") + h5("Categorical values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") ) } } - } else {NULL} + } + } else {NULL} + }) + + # Tiles offset + output$nj_fruit_offset_circ <- renderUI({ + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "nj_fruit_offset_circ", + label = "", + min = min, + max = max, + step= step, + value = 0, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_offset_circ", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$upgma_fruit_offset_circ <- renderUI({ + if(!is.null(input$upgma_layout)) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "upgma_fruit_offset_circ", + label = "", + min = min, + max = max, + step= step, + value = 0, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_fruit_offset_circ", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$nj_fruit_offset_circ_2 <- renderUI({ + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "nj_fruit_offset_circ_2", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_offset_circ_2", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$upgma_fruit_offset_circ_2 <- renderUI({ + if(!is.null(input$upgma_layout)) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "upgma_fruit_offset_circ_2", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_fruit_offset_circ_2", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$nj_fruit_offset_circ_3 <- renderUI({ + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "nj_fruit_offset_circ_3", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_offset_circ_3", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$upgma_fruit_offset_circ_3 <- renderUI({ + if(!is.null(input$upgma_layout)) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "upgma_fruit_offset_circ_3", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_fruit_offset_circ_3", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$nj_fruit_offset_circ_4 <- renderUI({ + if(!is.null(input$nj_layout)) { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "nj_fruit_offset_circ_4", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_offset_circ_4", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) } }) - output$nj_heatmap_mapping_info <- renderUI({ - if(!is.null(input$nj_heatmap_select)) { - if (any(sapply(DB$meta[input$nj_heatmap_select], is.numeric)) & - any(!sapply(DB$meta[input$nj_heatmap_select], is.numeric))) { - column( - width = 3, - h5("Heatmap with categorical and continous values not possible", - style = "color: #E18B00; font-size: 12px; font-style: italic; margin-top: 15px; margin-left: 40px") - ) + output$upgma_fruit_offset_circ_4 <- renderUI({ + if(!is.null(input$upgma_layout)) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 } else { - if(any(sapply(DB$meta[input$nj_heatmap_select], is.numeric))) { - if(input$nj_heatmap_scale %in% c('Spectral', 'RdYlGn', 'RdYlBu', 'RdGy', 'RdBu', 'PuOr', 'PRGn', 'PiYG', 'BrBG')) { - column( - width = 3, - fluidRow( - column( - width = 4, - h5("Midpoint", style = "color: white; margin-top: 22px;") - ), - column( - width = 8, - div( - class = "divmid-sel1", - selectInput( - "nj_heatmap_div_mid", - label = "", - choices = c("Zero", "Mean", "Median"), - selected = "Mean" - ) - ) - ) - ) - ) - } else { - column( - width = 3, - h5("Continous values", style = "color: white; font-size: 14px; margin-top: 23px; margin-left: 40px") - ) - } - } else { - if(length(unique(unlist(DB$meta[input$nj_heatmap_select]))) > 7) { - column( - width = 3, - h5(paste0("> 7 categorical values"), style = "color: #E18B00; font-size: 12px; margin-top: 23px; margin-left: 40px") - ) - } else { - column( - width = 3, - h5("Categorical values", style = "color: white; font-size: 14px; margin-top: 20px; margin-left: 40px") - ) - } - } + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 } - } else {NULL} + + sliderInput( + "upgma_fruit_offset_circ_4", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_fruit_offset_circ_4", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } }) - # Tiles offset - output$nj_fruit_offset_circ <- renderUI({ + output$nj_fruit_offset_circ_5 <- renderUI({ if(!is.null(input$nj_layout)) { if(input$nj_layout == "circular" | input$nj_layout == "inward") { offset <- 0.15 @@ -10250,136 +10685,413 @@ server <- function(input, output, session) { } sliderInput( - "nj_fruit_offset_circ", + "nj_fruit_offset_circ_5", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_fruit_offset_circ_5", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + output$upgma_fruit_offset_circ_5 <- renderUI({ + if(!is.null(input$upgma_layout)) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } else { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } + + sliderInput( + "upgma_fruit_offset_circ_5", + label = "", + min = min, + max = max, + step= step, + value = offset, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_fruit_offset_circ_5", + label = "", + min = -0.2, + max = 0.2, + step= 0.01, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + + # For Layout change update tiles offset position + observeEvent(input$nj_layout, { + if(input$nj_layout == "circular" | input$nj_layout == "inward") { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } else { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } + + updateSliderInput(session, "nj_fruit_offset_circ", min = min, step = step, max = max) + updateSliderInput(session, "nj_fruit_offset_circ_2", min = min, step = step, max = max, value = offset) + updateSliderInput(session, "nj_fruit_offset_circ_3", min = min, step = step, max = max, value = offset) + updateSliderInput(session, "nj_fruit_offset_circ_4", min = min, step = step, max = max, value = offset) + updateSliderInput(session, "nj_fruit_offset_circ_5", min = min, step = step, max = max, value = offset) + }) + + observeEvent(input$upgma_layout, { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + offset <- 0.05 + step <- 0.01 + min <- -0.2 + max <- 0.2 + } else { + offset <- 0.15 + step <- 0.03 + min <- -0.6 + max <- 0.6 + } + + updateSliderInput(session, "upgma_fruit_offset_circ", min = min, step = step, max = max) + updateSliderInput(session, "upgma_fruit_offset_circ_2", min = min, step = step, max = max, value = offset) + updateSliderInput(session, "upgma_fruit_offset_circ_3", min = min, step = step, max = max, value = offset) + updateSliderInput(session, "upgma_fruit_offset_circ_4", min = min, step = step, max = max, value = offset) + updateSliderInput(session, "upgma_fruit_offset_circ_5", min = min, step = step, max = max, value = offset) + }) + + # Heatmap width + output$nj_heatmap_width <- renderUI({ + if(!is.null(input$nj_heatmap_select)) { + length_input <- length(input$nj_heatmap_select) + if((!(input$nj_layout == "circular")) & (!(input$nj_layout == "inward"))) { + if(length_input < 3) { + width <- 0.1 + } else { + if (length_input >= 3 && length_input <= 50) { + width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 1.5 + } + } + } else { + if(length_input < 3) { + width <- 0.3 + } else if (length_input >= 3 && length_input <= 27) { + width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 3 + } + } + + sliderInput( + "nj_heatmap_width", + label = "", + min = 0.05, + max = 1.5, + value = width, + step = 0.05, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_heatmap_width", + label = "", + min = 0.05, + max = 1.5, + value = 0.1, + step = 0.05, + width = "150px", + ticks = FALSE + ) + } + }) + + output$upgma_heatmap_width <- renderUI({ + if(!is.null(input$upgma_heatmap_select)) { + length_input <- length(input$upgma_heatmap_select) + if((!(input$upgma_layout == "circular")) & (!(input$upgma_layout == "inward"))) { + if(length_input < 3) { + width <- 0.1 + } else { + if (length_input >= 3 && length_input <= 50) { + width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 1.5 + } + } + } else { + if(length_input < 3) { + width <- 0.3 + } else if (length_input >= 3 && length_input <= 27) { + width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 3 + } + } + + sliderInput( + "upgma_heatmap_width", label = "", - min = min, - max = max, - step= step, - value = 0, + min = 0.05, + max = 1.5, + value = width, + step = 0.05, width = "150px", ticks = FALSE ) } else { sliderInput( - "nj_fruit_offset_circ", + "upgma_heatmap_width", label = "", - min = -0.2, - max = 0.2, - step= 0.01, - value = 0, + min = 0.05, + max = 1.5, + value = 0.1, + step = 0.05, width = "150px", ticks = FALSE ) } }) - output$nj_fruit_offset_circ_2 <- renderUI({ - if(!is.null(input$nj_layout)) { - if(input$nj_layout == "circular" | input$nj_layout == "inward") { - offset <- 0.15 - step <- 0.03 - min <- -0.6 - max <- 0.6 + # Update value if new variables added + observeEvent(input$nj_heatmap_select, { + length_input <- length(input$nj_heatmap_select) + if((!(input$nj_layout == "circular")) & (!(input$nj_layout == "inward"))) { + if(length_input < 3) { + width <- 0.1 } else { - offset <- 0.05 - step <- 0.01 - min <- -0.2 - max <- 0.2 + if (length_input >= 3 && length_input <= 50) { + width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 1.5 + } + } + } else { + if(length_input < 3) { + width <- 0.3 + } else if (length_input >= 3 && length_input <= 27) { + width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 3 + } + } + updateSliderInput(session, "nj_heatmap_width", value = width) + }) + + observeEvent(input$upgma_heatmap_select, { + length_input <- length(input$upgma_heatmap_select) + if((!(input$upgma_layout == "circular")) & (!(input$upgma_layout == "inward"))) { + if(length_input < 3) { + width <- 0.1 + } else { + if (length_input >= 3 && length_input <= 50) { + width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 1.5 + } + } + } else { + if(length_input < 3) { + width <- 0.3 + } else if (length_input >= 3 && length_input <= 27) { + width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 3 + } + } + updateSliderInput(session, "upgma_heatmap_width", value = width) + }) + + # Update value if layout changed + observeEvent(input$nj_layout, { + length_input <- length(input$nj_heatmap_select) + if((!(input$nj_layout == "circular")) & (!(input$nj_layout == "inward"))) { + if(length_input < 3) { + width <- 0.1 + } else { + if (length_input >= 3 && length_input <= 50) { + width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 1.5 + } + } + } else { + if(length_input < 3) { + width <- 0.3 + } else if (length_input >= 3 && length_input <= 27) { + width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 3 + } + } + updateSliderInput(session, "nj_heatmap_width", value = width) + }) + + observeEvent(input$upgma_layout, { + length_input <- length(input$upgma_heatmap_select) + if((!(input$upgma_layout == "circular")) & (!(input$upgma_layout == "inward"))) { + if(length_input < 3) { + width <- 0.1 + } else { + if (length_input >= 3 && length_input <= 50) { + width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 1.5 + } + } + } else { + if(length_input < 3) { + width <- 0.3 + } else if (length_input >= 3 && length_input <= 27) { + width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + } else { + width <- 3 + } + } + updateSliderInput(session, "upgma_heatmap_width", value = width) + }) + + # Heatmap column titles position + observeEvent(input$nj_layout, { + if(!(input$nj_layout == "inward" | input$nj_layout == "circular")) { + updateSliderInput(session, "nj_colnames_y", value = -1) + } else { + updateSliderInput(session, "nj_colnames_y", value = 0) + } + }) + + observeEvent(input$upgma_layout, { + if(!(input$upgma_layout == "inward" | input$upgma_layout == "circular")) { + updateSliderInput(session, "upgma_colnames_y", value = -1) + } else { + updateSliderInput(session, "upgma_colnames_y", value = 0) + } + }) + + output$nj_colnames_y <- renderUI({ + if(!is.null(sum(DB$data$Include))) { + if(input$nj_layout == "inward" | input$nj_layout == "circular") { + min <- 0 + val <- 0 + } else { + val <- -1 + if((sum(DB$data$Include) * -0.1) > -2) { + min <- -2 + } else { + min <- round(sum(DB$data$Include) * -0.1, 0) + } } - sliderInput( - "nj_fruit_offset_circ_2", - label = "", + "nj_colnames_y", + label = h5("Names Y-Position", style = "color:white; margin-bottom: 0px"), min = min, - max = max, - step= step, - value = offset, + max = sum(DB$data$Include), + value = val, + step = 1, width = "150px", ticks = FALSE ) } else { sliderInput( - "nj_fruit_offset_circ_2", - label = "", - min = -0.2, - max = 0.2, - step= 0.01, + "nj_colnames_y", + label = h5("Names Y-Position", style = "color:white; margin-bottom: 0px"), + min = -10, + max = 10, value = 0, + step = 1, width = "150px", ticks = FALSE ) } }) - output$nj_fruit_offset_circ_3 <- renderUI({ - if(!is.null(input$nj_layout)) { - if(input$nj_layout == "circular" | input$nj_layout == "inward") { - offset <- 0.15 - step <- 0.03 - min <- -0.6 - max <- 0.6 + output$upgma_colnames_y <- renderUI({ + if(!is.null(sum(DB$data$Include))) { + if(input$upgma_layout == "inward" | input$upgma_layout == "circular") { + min <- 0 + val <- 0 } else { - offset <- 0.05 - step <- 0.01 - min <- -0.2 - max <- 0.2 + val <- -1 + if((sum(DB$data$Include) * -0.1) > -2) { + min <- -2 + } else { + min <- round(sum(DB$data$Include) * -0.1, 0) + } } - sliderInput( - "nj_fruit_offset_circ_3", - label = "", + "upgma_colnames_y", + label = h5("Names Y-Position", style = "color:white; margin-bottom: 0px"), min = min, - max = max, - step= step, - value = offset, + max = sum(DB$data$Include), + value = val, + step = 1, width = "150px", ticks = FALSE ) } else { sliderInput( - "nj_fruit_offset_circ_3", - label = "", - min = -0.2, - max = 0.2, - step= 0.01, + "upgma_colnames_y", + label = h5("Names Y-Position", style = "color:white; margin-bottom: 0px"), + min = -10, + max = 10, value = 0, + step = 1, width = "150px", ticks = FALSE ) } }) - output$nj_fruit_offset_circ_4 <- renderUI({ + # Heatmap column titles angle + output$nj_colnames_angle <- renderUI({ if(!is.null(input$nj_layout)) { if(input$nj_layout == "circular" | input$nj_layout == "inward") { - offset <- 0.15 - step <- 0.03 - min <- -0.6 - max <- 0.6 - } else { - offset <- 0.05 - step <- 0.01 - min <- -0.2 - max <- 0.2 - } - + angle <- 90 + } else {angle <- -90} sliderInput( - "nj_fruit_offset_circ_4", - label = "", - min = min, - max = max, - step= step, - value = offset, + "nj_colnames_angle", + label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), + min = -90, + max = 90, + value = angle, width = "150px", ticks = FALSE ) } else { sliderInput( - "nj_fruit_offset_circ_4", - label = "", - min = -0.2, - max = 0.2, - step= 0.01, + "nj_colnames_angle", + label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), + min = -90, + max = 90, value = 0, width = "150px", ticks = FALSE @@ -10387,37 +11099,26 @@ server <- function(input, output, session) { } }) - output$nj_fruit_offset_circ_5 <- renderUI({ - if(!is.null(input$nj_layout)) { - if(input$nj_layout == "circular" | input$nj_layout == "inward") { - offset <- 0.15 - step <- 0.03 - min <- -0.6 - max <- 0.6 - } else { - offset <- 0.05 - step <- 0.01 - min <- -0.2 - max <- 0.2 - } - + output$upgma_colnames_angle <- renderUI({ + if(!is.null(input$upgma_layout)) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + angle <- 90 + } else {angle <- -90} sliderInput( - "nj_fruit_offset_circ_5", - label = "", - min = min, - max = max, - step= step, - value = offset, + "upgma_colnames_angle", + label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), + min = -90, + max = 90, + value = angle, width = "150px", ticks = FALSE ) } else { sliderInput( - "nj_fruit_offset_circ_5", - label = "", - min = -0.2, - max = 0.2, - step= 0.01, + "upgma_colnames_angle", + label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), + min = -90, + max = 90, value = 0, width = "150px", ticks = FALSE @@ -10425,317 +11126,858 @@ server <- function(input, output, session) { } }) - # For Layout change update tiles offset position + # Change heatmap column titles angle and label align when switching layout observeEvent(input$nj_layout, { - if(input$nj_layout == "circular" | input$nj_layout == "inward") { - offset <- 0.05 - step <- 0.01 - min <- -0.2 - max <- 0.2 - } else { - offset <- 0.15 - step <- 0.03 - min <- -0.6 - max <- 0.6 - } - - updateSliderInput(session, "nj_fruit_offset_circ", min = min, step = step, max = max) - updateSliderInput(session, "nj_fruit_offset_circ_2", min = min, step = step, max = max, value = offset) - updateSliderInput(session, "nj_fruit_offset_circ_3", min = min, step = step, max = max, value = offset) - updateSliderInput(session, "nj_fruit_offset_circ_4", min = min, step = step, max = max, value = offset) - updateSliderInput(session, "nj_fruit_offset_circ_5", min = min, step = step, max = max, value = offset) + if(input$nj_layout == "circular" | input$nj_layout == "inward"){ + angle <- 90 + val <- TRUE + } else { + angle <- -90 + val <- FALSE + } + updateSwitchInput(session, "nj_align", value = val) + updateSliderInput(session, "nj_colnames_angle", value = angle) }) - # Heatmap width - output$nj_heatmap_width <- renderUI({ - if(!is.null(input$nj_heatmap_select)) { - length_input <- length(input$nj_heatmap_select) - if((!(input$nj_layout == "circular")) & (!(input$nj_layout == "inward"))) { - if(length_input < 3) { - width <- 0.1 - } else { - if (length_input >= 3 && length_input <= 50) { - width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) - } else { - width <- 1.5 - } - } - } else { - if(length_input < 3) { - width <- 0.3 - } else if (length_input >= 3 && length_input <= 27) { - width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) - } else { - width <- 3 - } - } - - sliderInput( - "nj_heatmap_width", - label = "", - min = 0.05, - max = 1.5, - value = width, - step = 0.05, - width = "150px", - ticks = FALSE + observeEvent(input$upgma_layout, { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward"){ + angle <- 90 + val <- TRUE + } else { + angle <- -90 + val <- FALSE + } + updateSwitchInput(session, "upgma_align", value = val) + updateSliderInput(session, "upgma_colnames_angle", value = angle) + }) + + # Tile number selector update each other + observeEvent(input$nj_tile_num, { + updateSelectInput(session, "nj_tile_number", selected = input$nj_tile_num) + }) + + observeEvent(input$nj_tile_number, { + updateSelectInput(session, "nj_tile_num", selected = input$nj_tile_number) + }) + + observeEvent(input$nj_tipcolor_mapping_show, { + updateCheckboxInput(session, "nj_tippoint_show", value = input$nj_tipcolor_mapping_show) + }) + + observeEvent(input$nj_tipshape_mapping_show, { + updateCheckboxInput(session, "nj_tippoint_show", value = input$nj_tipshape_mapping_show) + }) + + observeEvent(input$nj_tippoint_show, { + if(input$nj_tippoint_show == FALSE) { + updateCheckboxInput(session, "nj_tipcolor_mapping_show", value = FALSE) + updateCheckboxInput(session, "nj_tipshape_mapping_show", value = FALSE) + } + }) + + observeEvent(input$upgma_tile_num, { + updateSelectInput(session, "upgma_tile_number", selected = input$upgma_tile_num) + }) + + observeEvent(input$upgma_tile_number, { + updateSelectInput(session, "upgma_tile_num", selected = input$upgma_tile_number) + }) + + observeEvent(input$upgma_tipcolor_mapping_show, { + updateCheckboxInput(session, "upgma_tippoint_show", value = input$upgma_tipcolor_mapping_show) + }) + + observeEvent(input$upgma_tipshape_mapping_show, { + updateCheckboxInput(session, "upgma_tippoint_show", value = input$upgma_tipshape_mapping_show) + }) + + observeEvent(input$upgma_tippoint_show, { + if(input$upgma_tippoint_show == FALSE) { + updateCheckboxInput(session, "upgma_tipcolor_mapping_show", value = FALSE) + updateCheckboxInput(session, "upgma_tipshape_mapping_show", value = FALSE) + } + }) + + # Clade coloring + output$nj_clade_scale <- renderUI({ + if(length(input$nj_parentnode) <= 1) { + fluidRow( + column( + width = 5, + h5("Color", style = "color:white; position: relative; right: -15px; margin-top: 30px") + ), + column( + width = 7, + align = "center", + colorPickr( + inputId = "nj_clade_scale", + selected = "#D0F221", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ) ) } else { - sliderInput( - "nj_heatmap_width", - label = "", - min = 0.05, - max = 1.5, - value = 0.1, - step = 0.05, - width = "150px", - ticks = FALSE + fluidRow( + column( + width = 5, + h5("Scale", style = "color:white; position: relative; right: -15px; margin-top: 30px") + ), + column( + width = 7, + align = "center", + div( + class = "sel-clade-scale", + selectInput( + "nj_clade_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + ) + ) + ) + } + }) + + output$upgma_clade_scale <- renderUI({ + if(length(input$upgma_parentnode) <= 1) { + fluidRow( + column( + width = 5, + h5("Color", style = "color:white; position: relative; right: -15px; margin-top: 30px") + ), + column( + width = 7, + align = "center", + colorPickr( + inputId = "upgma_clade_scale", + selected = "#D0F221", + label = "", + update = "changestop", + interaction = list(clear = FALSE, + save = FALSE), + position = "right-start", + width = "100%" + ) + ) + ) + } else { + fluidRow( + column( + width = 5, + h5("Scale", style = "color:white; position: relative; right: -15px; margin-top: 30px") + ), + column( + width = 7, + align = "center", + div( + class = "sel-clade-scale", + selectInput( + "upgma_clade_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + ) + ) ) } }) - # Update value if new variables added - observeEvent(input$nj_heatmap_select, { - length_input <- length(input$nj_heatmap_select) - if((!(input$nj_layout == "circular")) & (!(input$nj_layout == "inward"))) { - if(length_input < 3) { - width <- 0.1 - } else { - if (length_input >= 3 && length_input <= 50) { - width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) - } else { - width <- 1.5 - } - } + # Heatmap variable color scale + output$nj_heatmap_scale <- renderUI({ + if(class(unlist(DB$meta[input$nj_heatmap_select])) == "numeric") { + selectInput( + "nj_heatmap_scale", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) } else { - if(length_input < 3) { - width <- 0.3 - } else if (length_input >= 3 && length_input <= 27) { - width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + if(length(unique(unlist(DB$meta[input$nj_heatmap_select]))) > 7) { + selectInput( + "nj_heatmap_scale", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) + ), + selected = "turbo" + ) } else { - width <- 3 + selectInput( + "nj_heatmap_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) } } - updateSliderInput(session, "nj_heatmap_width", value = width) }) - # Update value if layout changed - observeEvent(input$nj_layout, { - length_input <- length(input$nj_heatmap_select) - if((!(input$nj_layout == "circular")) & (!(input$nj_layout == "inward"))) { - if(length_input < 3) { - width <- 0.1 + output$upgma_heatmap_scale <- renderUI({ + if(class(unlist(DB$meta[input$upgma_heatmap_select])) == "numeric") { + selectInput( + "upgma_heatmap_scale", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) + } else { + if(length(unique(unlist(DB$meta[input$upgma_heatmap_select]))) > 7) { + selectInput( + "upgma_heatmap_scale", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) + ), + selected = "turbo" + ) } else { - if (length_input >= 3 && length_input <= 50) { - width <- min(0.15 + 0.05 * floor((length_input - 3) / 2), 1.5) - } else { - width <- 1.5 - } + selectInput( + "upgma_heatmap_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) } + } + }) + + # Tiles variable color scale + output$nj_tiles_scale_1 <- renderUI({ + if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + selectInput( + "nj_tiles_scale_1", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) } else { - if(length_input < 3) { - width <- 0.3 - } else if (length_input >= 3 && length_input <= 27) { - width <- min(0.6 + 0.2 * floor((length_input - 3) / 2), 1.5) + if(length(unique(unlist(DB$meta[input$nj_fruit_variable]))) > 7) { + selectInput( + "nj_tiles_scale_1", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) + ), + selected = "turbo" + ) } else { - width <- 3 + selectInput( + "nj_tiles_scale_1", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) } } - updateSliderInput(session, "nj_heatmap_width", value = width) }) - # Heatmap column titles position - observeEvent(input$nj_layout, { - if(!(input$nj_layout == "inward" | input$nj_layout == "circular")) { - updateSliderInput(session, "nj_colnames_y", value = -1) + output$upgma_tiles_scale_1 <- renderUI({ + if(class(unlist(DB$meta[input$upgma_fruit_variable])) == "numeric") { + selectInput( + "upgma_tiles_scale_1", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) } else { - updateSliderInput(session, "nj_colnames_y", value = 0) - } - }) - - output$nj_colnames_y <- renderUI({ - if(!is.null(sum(DB$data$Include))) { - if(input$nj_layout == "inward" | input$nj_layout == "circular") { - min <- 0 - val <- 0 + if(length(unique(unlist(DB$meta[input$upgma_fruit_variable]))) > 7) { + selectInput( + "upgma_tiles_scale_1", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) + ), + selected = "turbo" + ) } else { - val <- -1 - if((sum(DB$data$Include) * -0.1) > -2) { - min <- -2 - } else { - min <- round(sum(DB$data$Include) * -0.1, 0) - } + selectInput( + "upgma_tiles_scale_1", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) } - sliderInput( - "nj_colnames_y", - label = h5("Names Y-Position", style = "color:white; margin-bottom: 0px"), - min = min, - max = sum(DB$data$Include), - value = val, - step = 1, - width = "150px", - ticks = FALSE - ) - } else { - sliderInput( - "nj_colnames_y", - label = h5("Names Y-Position", style = "color:white; margin-bottom: 0px"), - min = -10, - max = 10, - value = 0, - step = 1, - width = "150px", - ticks = FALSE - ) } }) - # Heatmap column titles angle - output$nj_colnames_angle <- renderUI({ - if(!is.null(input$nj_layout)) { - if(input$nj_layout == "circular" | input$nj_layout == "inward") { - angle <- 90 - } else {angle <- -90} - sliderInput( - "nj_colnames_angle", - label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), - min = -90, - max = 90, - value = angle, - width = "150px", - ticks = FALSE + output$nj_tiles_scale_2 <- renderUI({ + if(class(unlist(DB$meta[input$nj_fruit_variable_2])) == "numeric") { + selectInput( + "nj_tiles_scale_2", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) ) } else { - sliderInput( - "nj_colnames_angle", - label = h5("Names Angle", style = "color:white; margin-bottom: 0px"), - min = -90, - max = 90, - value = 0, - width = "150px", - ticks = FALSE - ) + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))) > 7) { + selectInput( + "nj_tiles_scale_2", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) + ), + selected = "turbo" + ) + } else { + selectInput( + "nj_tiles_scale_2", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + } } }) - # Change heatmap column titles angle and label align when switching layout - observeEvent(input$nj_layout, { - if(input$nj_layout == "circular" | input$nj_layout == "inward"){ - angle <- 90 - val <- TRUE + output$upgma_tiles_scale_2 <- renderUI({ + if(class(unlist(DB$meta[input$upgma_fruit_variable_2])) == "numeric") { + selectInput( + "upgma_tiles_scale_2", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) } else { - angle <- -90 - val <- FALSE - } - updateSwitchInput(session, "nj_align", value = val) - updateSliderInput(session, "nj_colnames_angle", value = angle) - }) - - # Tile number selector update each other - observeEvent(input$nj_tile_num, { - updateSelectInput(session, "nj_tile_number", selected = input$nj_tile_num) - }) - - observeEvent(input$nj_tile_number, { - updateSelectInput(session, "nj_tile_num", selected = input$nj_tile_number) - }) - - observeEvent(input$nj_tipcolor_mapping_show, { - updateCheckboxInput(session, "nj_tippoint_show", value = input$nj_tipcolor_mapping_show) - }) - - observeEvent(input$nj_tipshape_mapping_show, { - updateCheckboxInput(session, "nj_tippoint_show", value = input$nj_tipshape_mapping_show) - }) - - observeEvent(input$nj_tippoint_show, { - if(input$nj_tippoint_show == FALSE) { - updateCheckboxInput(session, "nj_tipcolor_mapping_show", value = FALSE) - updateCheckboxInput(session, "nj_tipshape_mapping_show", value = FALSE) + if(length(unique(unlist(DB$meta[input$upgma_fruit_variable_2]))) > 7) { + selectInput( + "upgma_tiles_scale_2", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) + ), + selected = "turbo" + ) + } else { + selectInput( + "upgma_tiles_scale_2", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + } } }) - # Clade coloring - output$nj_clade_scale <- renderUI({ - if(length(input$nj_parentnode) <= 1) { - fluidRow( - column( - width = 5, - h5("Color", style = "color:white; position: relative; right: -15px; margin-top: 30px") - ), - column( - width = 7, - align = "center", - colorPickr( - inputId = "nj_clade_scale", - selected = "#D0F221", - label = "", - update = "changestop", - interaction = list(clear = FALSE, - save = FALSE), - position = "right-start", - width = "100%" + output$nj_tiles_scale_3 <- renderUI({ + if(class(unlist(DB$meta[input$nj_fruit_variable_3])) == "numeric") { + selectInput( + "nj_tiles_scale_3", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" ) ) ) } else { - fluidRow( - column( - width = 5, - h5("Scale", style = "color:white; position: relative; right: -15px; margin-top: 30px") - ), - column( - width = 7, - align = "center", - div( - class = "sel-clade-scale", - selectInput( - "nj_clade_scale", - "", - choices = list( - Qualitative = list( - "Set1", - "Set2", - "Set3", - "Pastel1", - "Pastel2", - "Paired", - "Dark2", - "Accent" - ), - Sequential = list( - "YlOrRd", - "YlOrBr", - "YlGnBu", - "YlGn", - "Reds", - "RdPu", - "Purples", - "PuRd", - "PuBuGn", - "PuBu", - "OrRd", - "Oranges", - "Greys", - "Greens", - "GnBu", - "BuPu", - "BuGn", - "Blues" - ) - ) + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))) > 7) { + selectInput( + "nj_tiles_scale_3", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) + ), + selected = "turbo" + ) + } else { + selectInput( + "nj_tiles_scale_3", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" ) ) ) - ) + } } }) - # Heatmap variable color scale - output$nj_heatmap_scale <- renderUI({ - if(class(unlist(DB$meta[input$nj_heatmap_select])) == "numeric") { + output$upgma_tiles_scale_3 <- renderUI({ + if(class(unlist(DB$meta[input$upgma_fruit_variable_3])) == "numeric") { selectInput( - "nj_heatmap_scale", + "upgma_tiles_scale_3", "", choices = list( Continous = list( @@ -10762,9 +12004,9 @@ server <- function(input, output, session) { ) ) } else { - if(length(unique(unlist(DB$meta[input$nj_heatmap_select]))) > 7) { + if(length(unique(unlist(DB$meta[input$upgma_fruit_variable_3]))) > 7) { selectInput( - "nj_heatmap_scale", + "upgma_tiles_scale_3", "", choices = list( Gradient = list( @@ -10782,7 +12024,7 @@ server <- function(input, output, session) { ) } else { selectInput( - "nj_heatmap_scale", + "upgma_tiles_scale_3", "", choices = list( Qualitative = list( @@ -10821,11 +12063,10 @@ server <- function(input, output, session) { } }) - # Tiles variable color scale - output$nj_tiles_scale_1 <- renderUI({ - if(class(unlist(DB$meta[input$nj_fruit_variable])) == "numeric") { + output$nj_tiles_scale_4 <- renderUI({ + if(class(unlist(DB$meta[input$nj_fruit_variable_4])) == "numeric") { selectInput( - "nj_tiles_scale_1", + "nj_tiles_scale_4", "", choices = list( Continous = list( @@ -10852,9 +12093,9 @@ server <- function(input, output, session) { ) ) } else { - if(length(unique(unlist(DB$meta[input$nj_fruit_variable]))) > 7) { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))) > 7) { selectInput( - "nj_tiles_scale_1", + "nj_tiles_scale_4", "", choices = list( Gradient = list( @@ -10872,7 +12113,7 @@ server <- function(input, output, session) { ) } else { selectInput( - "nj_tiles_scale_1", + "nj_tiles_scale_4", "", choices = list( Qualitative = list( @@ -10911,10 +12152,10 @@ server <- function(input, output, session) { } }) - output$nj_tiles_scale_2 <- renderUI({ - if(class(unlist(DB$meta[input$nj_fruit_variable_2])) == "numeric") { + output$upgma_tiles_scale_4 <- renderUI({ + if(class(unlist(DB$meta[input$upgma_fruit_variable_4])) == "numeric") { selectInput( - "nj_tiles_scale_2", + "upgma_tiles_scale_4", "", choices = list( Continous = list( @@ -10941,9 +12182,9 @@ server <- function(input, output, session) { ) ) } else { - if(length(unique(unlist(DB$meta[input$nj_fruit_variable_2]))) > 7) { + if(length(unique(unlist(DB$meta[input$upgma_fruit_variable_4]))) > 7) { selectInput( - "nj_tiles_scale_2", + "upgma_tiles_scale_4", "", choices = list( Gradient = list( @@ -10961,7 +12202,7 @@ server <- function(input, output, session) { ) } else { selectInput( - "nj_tiles_scale_2", + "upgma_tiles_scale_4", "", choices = list( Qualitative = list( @@ -11000,10 +12241,10 @@ server <- function(input, output, session) { } }) - output$nj_tiles_scale_3 <- renderUI({ - if(class(unlist(DB$meta[input$nj_fruit_variable_3])) == "numeric") { + output$nj_tiles_scale_5 <- renderUI({ + if(class(unlist(DB$meta[input$nj_fruit_variable_5])) == "numeric") { selectInput( - "nj_tiles_scale_3", + "nj_tiles_scale_5", "", choices = list( Continous = list( @@ -11030,9 +12271,9 @@ server <- function(input, output, session) { ) ) } else { - if(length(unique(unlist(DB$meta[input$nj_fruit_variable_3]))) > 7) { + if(length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))) > 7) { selectInput( - "nj_tiles_scale_3", + "nj_tiles_scale_5", "", choices = list( Gradient = list( @@ -11050,7 +12291,7 @@ server <- function(input, output, session) { ) } else { selectInput( - "nj_tiles_scale_3", + "nj_tiles_scale_5", "", choices = list( Qualitative = list( @@ -11089,10 +12330,10 @@ server <- function(input, output, session) { } }) - output$nj_tiles_scale_4 <- renderUI({ - if(class(unlist(DB$meta[input$nj_fruit_variable_4])) == "numeric") { + output$upgma_tiles_scale_5 <- renderUI({ + if(class(unlist(DB$meta[input$upgma_fruit_variable_5])) == "numeric") { selectInput( - "nj_tiles_scale_4", + "upgma_tiles_scale_5", "", choices = list( Continous = list( @@ -11119,9 +12360,9 @@ server <- function(input, output, session) { ) ) } else { - if(length(unique(unlist(DB$meta[input$nj_fruit_variable_4]))) > 7) { + if(length(unique(unlist(DB$meta[input$upgma_fruit_variable_5]))) > 7) { selectInput( - "nj_tiles_scale_4", + "upgma_tiles_scale_5", "", choices = list( Gradient = list( @@ -11139,7 +12380,7 @@ server <- function(input, output, session) { ) } else { selectInput( - "nj_tiles_scale_4", + "upgma_tiles_scale_5", "", choices = list( Qualitative = list( @@ -11178,10 +12419,11 @@ server <- function(input, output, session) { } }) - output$nj_tiles_scale_5 <- renderUI({ - if(class(unlist(DB$meta[input$nj_fruit_variable_5])) == "numeric") { + # Tip Labels Variable Color Scale + output$nj_tiplab_scale <- renderUI({ + if(class(unlist(DB$meta[input$nj_color_mapping])) == "numeric") { selectInput( - "nj_tiles_scale_5", + "nj_tiplab_scale", "", choices = list( Continous = list( @@ -11208,9 +12450,9 @@ server <- function(input, output, session) { ) ) } else { - if(length(unique(unlist(DB$meta[input$nj_fruit_variable_5]))) > 7) { + if(length(unique(unlist(DB$meta[input$nj_color_mapping]))) > 7) { selectInput( - "nj_tiles_scale_5", + "nj_tiplab_scale", "", choices = list( Gradient = list( @@ -11228,7 +12470,7 @@ server <- function(input, output, session) { ) } else { selectInput( - "nj_tiles_scale_5", + "nj_tiplab_scale", "", choices = list( Qualitative = list( @@ -11267,11 +12509,10 @@ server <- function(input, output, session) { } }) - # Tip Labels Variable Color Scale - output$nj_tiplab_scale <- renderUI({ - if(class(unlist(DB$meta[input$nj_color_mapping])) == "numeric") { + output$upgma_tiplab_scale <- renderUI({ + if(class(unlist(DB$meta[input$upgma_color_mapping])) == "numeric") { selectInput( - "nj_tiplab_scale", + "upgma_tiplab_scale", "", choices = list( Continous = list( @@ -11298,9 +12539,9 @@ server <- function(input, output, session) { ) ) } else { - if(length(unique(unlist(DB$meta[input$nj_color_mapping]))) > 7) { + if(length(unique(unlist(DB$meta[input$upgma_color_mapping]))) > 7) { selectInput( - "nj_tiplab_scale", + "upgma_tiplab_scale", "", choices = list( Gradient = list( @@ -11318,7 +12559,7 @@ server <- function(input, output, session) { ) } else { selectInput( - "nj_tiplab_scale", + "upgma_tiplab_scale", "", choices = list( Qualitative = list( @@ -11447,6 +12688,95 @@ server <- function(input, output, session) { } }) + output$upgma_tippoint_scale <- renderUI({ + if(class(unlist(DB$meta[input$upgma_tipcolor_mapping])) == "numeric") { + selectInput( + "upgma_tippoint_scale", + "", + choices = list( + Continous = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ), + Diverging = list( + "Spectral", + "RdYlGn", + "RdYlBu", + "RdGy", + "RdBu", + "PuOr", + "PRGn", + "PiYG", + "BrBG" + ) + ) + ) + } else { + if(length(unique(unlist(DB$meta[input$upgma_tipcolor_mapping]))) > 7) { + selectInput( + "upgma_tippoint_scale", + "", + choices = list( + Gradient = list( + "Magma" = "magma", + "Inferno" = "inferno", + "Plasma" = "plasma", + "Viridis" = "viridis", + "Cividis" = "cividis", + "Rocket" = "rocket", + "Mako" = "mako", + "Turbo" = "turbo" + ) + ), + selected = "turbo" + ) + } else { + selectInput( + "upgma_tippoint_scale", + "", + choices = list( + Qualitative = list( + "Set1", + "Set2", + "Set3", + "Pastel1", + "Pastel2", + "Paired", + "Dark2", + "Accent" + ), + Sequential = list( + "YlOrRd", + "YlOrBr", + "YlGnBu", + "YlGn", + "Reds", + "RdPu", + "Purples", + "PuRd", + "PuBuGn", + "PuBu", + "OrRd", + "Oranges", + "Greys", + "Greens", + "GnBu", + "BuPu", + "BuGn", + "Blues" + ) + ) + ) + } + } + }) + # Clade Highlights output$nj_parentnode <- renderUI({ if(!is.null(Vis$nj_parentnodes)) { @@ -11480,6 +12810,38 @@ server <- function(input, output, session) { } }) + output$upgma_parentnode <- renderUI({ + if(!is.null(Vis$upgma_parentnodes)) { + pickerInput( + "upgma_parentnode", + label = "", + choices = sort(unique(as.numeric(Vis$upgma_parentnodes))), + multiple = TRUE, + options = list( + `live-search` = TRUE, + `noneSelectedText` = "Test", + size = 10, + style = "background-color: white; border-radius: 5px;" + ), + width = "99%" + ) + } else { + pickerInput( + "upgma_parentnode", + label = "", + choices = c(), + multiple = TRUE, + options = list( + `live-search` = TRUE, + noneSelectedText = "Test", + size = 10, + style = "background-color: white; border-radius: 5px;" + ), + width = "99%" + ) + } + }) + # Branch label size output$nj_branch_size <- renderUI( numericInput( @@ -11586,19 +12948,31 @@ server <- function(input, output, session) { ) output$upgma_nodepoint_size <- renderUI( - sliderInput( - inputId = "upgma_nodepoint_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - min = 1, - max = 20, - value = Vis$nodepointsize_upgma, - step = 0.5, - width = "150px", - ticks = FALSE - ) + if(!is.null(Vis$nodepointsize_upgma)) { + sliderInput( + inputId = "upgma_nodepoint_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 20, + value = Vis$nodepointsize_upgma, + step = 0.5, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + inputId = "upgma_nodepoint_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 20, + value = 2.5, + step = 0.5, + width = "150px", + ticks = FALSE + ) + } ) - # Tippoint size output$nj_tippoint_size <- renderUI( if(!is.null(Vis$tippointsize_nj)) { @@ -11627,45 +13001,70 @@ server <- function(input, output, session) { ) output$upgma_tippoint_size <- renderUI( - sliderInput( - inputId = "upgma_tippoint_size", - label = h5("Size", style = "color:white; margin-bottom: 0px"), - min = 1, - max = 20, - step = 0.5, - value = Vis$tippointsize_upgma, - width = "150px", - ticks = FALSE - ) + if(!is.null(Vis$tippointsize_upgma)) { + sliderInput( + inputId = "upgma_tippoint_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 20, + step = 0.5, + value = Vis$tippointsize_upgma, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + inputId = "upgma_tippoint_size", + label = h5("Size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 20, + step = 0.5, + value = 4, + width = "150px", + ticks = FALSE + ) + } + ) + + # Tiplabel size + output$nj_tiplab_size <- renderUI( + if(!is.null(Vis$labelsize_nj)) { + numericInput( + "nj_tiplab_size", + label = h5("Label size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 10, + step = 0.5, + value = Vis$labelsize_nj, + width = "80px" + ) + } else { + numericInput( + "nj_tiplab_size", + label = h5("Label size", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 10, + step = 0.5, + value = 4, + width = "80px" + ) + } ) - # Tiplabel size output$upgma_tiplab_size <- renderUI( - numericInput( - "upgma_tiplab_size", - label = h5("Label size", style = "color:white; margin-bottom: 0px"), - min = 1, - max = 10, - step = 0.5, - value = Vis$labelsize_upgma, - width = "80px" - ) - ) - - output$nj_tiplab_size <- renderUI( - if(!is.null(Vis$labelsize_nj)) { + if(!is.null(Vis$labelsize_upgma)) { numericInput( - "nj_tiplab_size", + "upgma_tiplab_size", label = h5("Label size", style = "color:white; margin-bottom: 0px"), min = 1, max = 10, step = 0.5, - value = Vis$labelsize_nj, + value = Vis$labelsize_upgma, width = "80px" ) } else { numericInput( - "nj_tiplab_size", + "upgma_tiplab_size", label = h5("Label size", style = "color:white; margin-bottom: 0px"), min = 1, max = 10, @@ -11708,21 +13107,33 @@ server <- function(input, output, session) { }) output$upgma_rootedge_length <- renderUI({ - if(round(ceiling(Vis$upgma_max_x) * 0.02, 0) < 1) { - min <- 1 + if(!is.null(Vis$upgma_max_x)) { + if(round(ceiling(Vis$upgma_max_x) * 0.02, 0) < 1) { + min <- 1 + } else { + min <- round(ceiling(Vis$upgma_max_x) * 0.02, 0) + } + max <- round(ceiling(Vis$upgma_max_x) * 0.2, 0) + sliderInput( + "upgma_rootedge_length", + label = h5("Rootedge Length", style = "color:white; margin-bottom: 0px"), + min = min, + max = max, + value = round(ceiling(Vis$upgma_max_x) * 0.05, 0), + width = "150px", + ticks = FALSE + ) } else { - min <- round(ceiling(Vis$upgma_max_x) * 0.02, 0) + sliderInput( + "upgma_rootedge_length", + label = h5("Length", style = "color:white; margin-bottom: 0px"), + min = 1, + max = 10, + value = 2, + width = "150px", + ticks = FALSE + ) } - max <- round(ceiling(Vis$upgma_max_x) * 0.4, 0) - sliderInput( - "upgma_rootedge_length", - label = h5("Length", style = "color:white; margin-bottom: 0px"), - min = min, - max = max, - value = round(ceiling(Vis$upgma_max_x) * 0.05, 0), - width = "150px", - ticks = FALSE - ) }) # Treescale @@ -11750,6 +13161,30 @@ server <- function(input, output, session) { } }) + output$upgma_treescale_width <- renderUI({ + if(!is.null(Vis$upgma_max_x)) { + numericInput( + "upgma_treescale_width", + label = h5("Length", style = "color:white; margin-bottom: 0px"), + value = round(ceiling(Vis$upgma_max_x) * 0.1, 0), + min = 1, + max = round(floor(Vis$upgma_max_x) * 0.5, 0), + step = 1, + width = "80px" + ) + } else { + numericInput( + "upgma_treescale_width", + label = h5("Length", style = "color:white; margin-bottom: 0px"), + value = 2, + min = 1, + max = 10, + step = 1, + width = "80px" + ) + } + }) + output$nj_treescale_x <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { if(ceiling(Vis$nj_min_x) < 1) { @@ -11779,54 +13214,6 @@ server <- function(input, output, session) { } }) - output$nj_treescale_y <- renderUI({ - if(!is.null(sum(DB$data$Include))) { - sliderInput( - "nj_treescale_y", - label = h5("Y Position", style = "color:white; margin-bottom: 0px"), - min = 0, - max = sum(DB$data$Include), - value = 0, - width = "150px", - ticks = FALSE - ) - } else { - sliderInput( - "nj_treescale_y", - label = h5("Y Position", style = "color:white; margin-bottom: 0px"), - min = 0, - max = 10, - value = 0, - width = "150px", - ticks = FALSE - ) - } - }) - - output$upgma_treescale_width <- renderUI({ - if(!is.null(Vis$upgma_max_x)) { - numericInput( - "upgma_treescale_width", - label = h5("Length", style = "color:white; margin-bottom: 0px"), - value = round(ceiling(Vis$upgma_max_x) * 0.1, 0), - min = 1, - max = round(floor(Vis$upgma_max_x) * 0.5, 0), - step = 1, - width = "80px" - ) - } else { - numericInput( - "upgma_treescale_width", - label = h5("Length", style = "color:white; margin-bottom: 0px"), - value = 2, - min = 1, - max = 10, - step = 1, - width = "80px" - ) - } - }) - output$upgma_treescale_x <- renderUI({ if((!is.null(Vis$upgma_min_x)) & (!is.null(Vis$upgma_max_x))) { if(ceiling(Vis$upgma_min_x) < 1) { @@ -11856,13 +13243,37 @@ server <- function(input, output, session) { } }) + output$nj_treescale_y <- renderUI({ + if(!is.null(sum(DB$data$Include))) { + sliderInput( + "nj_treescale_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + min = 0, + max = sum(DB$data$Include), + value = 0, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "nj_treescale_y", + label = h5("Y Position", style = "color:white; margin-bottom: 0px"), + min = 0, + max = 10, + value = 0, + width = "150px", + ticks = FALSE + ) + } + }) + output$upgma_treescale_y <- renderUI({ - if(!is.null(Vis$upgma_min_x)) { + if(!is.null(sum(DB$data$Include))) { sliderInput( "upgma_treescale_y", label = h5("Y Position", style = "color:white; margin-bottom: 0px"), min = 0, - max = max(Vis$yrange_upgma), + max = sum(DB$data$Include), value = 0, width = "150px", ticks = FALSE @@ -11882,12 +13293,33 @@ server <- function(input, output, session) { ### Heatmap # Heatmap picker - output$upgma_heatmap_sel <- renderUI({ + output$nj_heatmap_sel <- renderUI({ + + meta <- select(DB$meta, -c(Index, Include, `Assembly ID`, `Assembly Name`, + Scheme, `Typing Date`, Successes, Errors)) + + # Identify numeric columns + numeric_columns <- sapply(meta, is.numeric) + + numeric_column_names <- names(meta[numeric_columns]) + + non_numeric_column_names <- names(meta)[!numeric_columns] + + choices <- list() + + # Add Continuous list only if there are numeric columns + if (length(numeric_column_names) > 0) { + choices$Continuous <- as.list(setNames(numeric_column_names, numeric_column_names)) + } + + # Add Diverging list + choices$Categorical <- as.list(setNames(non_numeric_column_names, non_numeric_column_names)) + div( class = "heatmap-picker", pickerInput( - inputId = "upgma_heatmap_select", - label = h5("Variables", style = "color:white; margin-bottom: 0px"), + inputId = "nj_heatmap_select", + label = "", width = "100%", choices = if(ncol(DB$meta) == 12) { c( @@ -11896,11 +13328,9 @@ server <- function(input, output, session) { Country = "Country", City = "City" ) - } else { - append(c(`Isolation Date` = "Isolation Date", Host = "Host", Country = "Country", City = "City"), - names(DB$meta)[13:ncol(DB$meta)]) - }, + } else {choices}, options = list( + `dropdown-align-center` = TRUE, size = 10, style = "background-color: white; border-radius: 5px;" ), @@ -11909,11 +13339,11 @@ server <- function(input, output, session) { ) }) - output$nj_heatmap_sel <- renderUI({ + output$upgma_heatmap_sel <- renderUI({ meta <- select(DB$meta, -c(Index, Include, `Assembly ID`, `Assembly Name`, Scheme, `Typing Date`, Successes, Errors)) - + # Identify numeric columns numeric_columns <- sapply(meta, is.numeric) @@ -11934,7 +13364,7 @@ server <- function(input, output, session) { div( class = "heatmap-picker", pickerInput( - inputId = "nj_heatmap_select", + inputId = "upgma_heatmap_select", label = "", width = "100%", choices = if(ncol(DB$meta) == 12) { @@ -11982,13 +13412,13 @@ server <- function(input, output, session) { } }) - output$upgma_heatmap_offs <- renderUI({ + output$upgma_heatmap_offset <- renderUI({ if(!is.null(Vis$upgma_max_x)) { sliderInput( "upgma_heatmap_offset", label = "", - min = -ceiling(Vis$upgma_max_x), - max = ceiling(Vis$upgma_max_x), + min = 0, + max = round(ceiling(Vis$upgma_max_x)*1.5, 0), step = 1, value = 0, width = "150px", @@ -11998,7 +13428,7 @@ server <- function(input, output, session) { sliderInput( "upgma_heatmap_offset", label = "", - min = -10, + min = 0, max = 10, step = 1, value = 0, @@ -12010,30 +13440,9 @@ server <- function(input, output, session) { ### Tiling # Geom Fruit select Variable - output$upgma_fruit_variable <- renderUI({ - selectInput( - "upgma_fruit_variable", - "", - choices = if(ncol(DB$meta) == 12) { - c( - `Isolation Date` = "Isolation Date", - Host = "Host", - Country = "Country", - City = "City", - Errors = "Errors" - ) - } else { - append(c(`Isolation Date` = "Isolation Date", Host = "Host", Country = "Country", City = "City", Errors = "Errors"), - names(DB$meta)[13:ncol(DB$meta)]) - }, - selected = c("Country" = "Country"), - width = "100%" - ) - }) - - output$upgma_fruit_variable2 <- renderUI({ + output$nj_fruit_variable <- renderUI({ selectInput( - "upgma_fruit_variable_2", + "nj_fruit_variable", "", choices = if(ncol(DB$meta) == 12) { c( @@ -12051,9 +13460,9 @@ server <- function(input, output, session) { ) }) - output$upgma_fruit_variable3 <- renderUI({ + output$nj_fruit_variable2 <- renderUI({ selectInput( - "upgma_fruit_variable_3", + "nj_fruit_variable_2", "", choices = if(ncol(DB$meta) == 12) { c( @@ -12071,9 +13480,9 @@ server <- function(input, output, session) { ) }) - output$upgma_fruit_variable4 <- renderUI({ + output$nj_fruit_variable3 <- renderUI({ selectInput( - "upgma_fruit_variable_4", + "nj_fruit_variable_3", "", choices = if(ncol(DB$meta) == 12) { c( @@ -12091,9 +13500,9 @@ server <- function(input, output, session) { ) }) - output$upgma_fruit_variable5 <- renderUI({ + output$nj_fruit_variable4 <- renderUI({ selectInput( - "upgma_fruit_variable_5", + "nj_fruit_variable_4", "", choices = if(ncol(DB$meta) == 12) { c( @@ -12111,9 +13520,9 @@ server <- function(input, output, session) { ) }) - output$nj_fruit_variable <- renderUI({ + output$nj_fruit_variable5 <- renderUI({ selectInput( - "nj_fruit_variable", + "nj_fruit_variable_5", "", choices = if(ncol(DB$meta) == 12) { c( @@ -12131,9 +13540,9 @@ server <- function(input, output, session) { ) }) - output$nj_fruit_variable2 <- renderUI({ + output$upgma_fruit_variable <- renderUI({ selectInput( - "nj_fruit_variable_2", + "upgma_fruit_variable", "", choices = if(ncol(DB$meta) == 12) { c( @@ -12151,9 +13560,9 @@ server <- function(input, output, session) { ) }) - output$nj_fruit_variable3 <- renderUI({ + output$upgma_fruit_variable2 <- renderUI({ selectInput( - "nj_fruit_variable_3", + "upgma_fruit_variable_2", "", choices = if(ncol(DB$meta) == 12) { c( @@ -12171,9 +13580,9 @@ server <- function(input, output, session) { ) }) - output$nj_fruit_variable4 <- renderUI({ + output$upgma_fruit_variable3 <- renderUI({ selectInput( - "nj_fruit_variable_4", + "upgma_fruit_variable_3", "", choices = if(ncol(DB$meta) == 12) { c( @@ -12191,9 +13600,9 @@ server <- function(input, output, session) { ) }) - output$nj_fruit_variable5 <- renderUI({ + output$upgma_fruit_variable4 <- renderUI({ selectInput( - "nj_fruit_variable_5", + "upgma_fruit_variable_4", "", choices = if(ncol(DB$meta) == 12) { c( @@ -12205,98 +13614,33 @@ server <- function(input, output, session) { } else { append(c(`Isolation Date` = "Isolation Date", Host = "Host", Country = "Country", City = "City"), names(DB$meta)[13:ncol(DB$meta)]) - }, - selected = c("Country" = "Country"), - width = "100%" - ) - }) - - # Geom Fruit Width - output$upgma_fruit_width <- renderUI({ - if(round(ceiling(Vis$upgma_min_x), 0) < 1) { - min <- 1 - } else { - min <- round(ceiling(Vis$upgma_min_x), 0) - } - sliderInput( - "upgma_fruit_width_circ", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = min, - max = round(ceiling(Vis$upgma_max_x) * 0.5, 0), - value = ceiling(Vis$upgma_max_x * 0.08), - width = "150px", - ticks = FALSE - ) - }) - - output$upgma_fruit_width2 <- renderUI({ - if(round(ceiling(Vis$upgma_min_x), 0) < 1) { - min <- 1 - } else { - min <- round(ceiling(Vis$upgma_min_x), 0) - } - sliderInput( - "upgma_fruit_width_circ_2", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = min, - max = round(ceiling(Vis$upgma_max_x) * 0.5, 0), - value = ceiling(Vis$upgma_max_x * 0.08), - width = "150px", - ticks = FALSE - ) - }) - - output$upgma_fruit_width3 <- renderUI({ - if(round(ceiling(Vis$upgma_min_x), 0) < 1) { - min <- 1 - } else { - min <- round(ceiling(Vis$upgma_min_x), 0) - } - sliderInput( - "upgma_fruit_width_circ_3", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = min, - max = round(ceiling(Vis$upgma_max_x) * 0.5, 0), - value = ceiling(Vis$upgma_max_x * 0.08), - width = "150px", - ticks = FALSE - ) - }) - - output$upgma_fruit_width4 <- renderUI({ - if(round(ceiling(Vis$upgma_min_x), 0) < 1) { - min <- 1 - } else { - min <- round(ceiling(Vis$upgma_min_x), 0) - } - sliderInput( - "upgma_fruit_width_circ_4", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = min, - max = round(ceiling(Vis$upgma_max_x) * 0.5, 0), - value = ceiling(Vis$upgma_max_x * 0.08), - width = "150px", - ticks = FALSE + }, + selected = c("Country" = "Country"), + width = "100%" ) }) - output$upgma_fruit_width5 <- renderUI({ - if(round(ceiling(Vis$upgma_min_x), 0) < 1) { - min <- 1 - } else { - min <- round(ceiling(Vis$upgma_min_x), 0) - } - sliderInput( - "upgma_fruit_width_circ_5", - label = h5("Width", style = "color:white; margin-bottom: 0px"), - min = min, - max = round(ceiling(Vis$upgma_max_x) * 0.5, 0), - value = ceiling(Vis$upgma_max_x * 0.08), - width = "150px", - ticks = FALSE + output$upgma_fruit_variable5 <- renderUI({ + selectInput( + "upgma_fruit_variable_5", + "", + choices = if(ncol(DB$meta) == 12) { + c( + `Isolation Date` = "Isolation Date", + Host = "Host", + Country = "Country", + City = "City" + ) + } else { + append(c(`Isolation Date` = "Isolation Date", Host = "Host", Country = "Country", City = "City"), + names(DB$meta)[13:ncol(DB$meta)]) + }, + selected = c("Country" = "Country"), + width = "100%" ) }) + # Geom Fruit Width output$nj_fruit_width <- renderUI({ if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { if(round(ceiling(Vis$nj_max_x) * 0.1, 0) < 1) { @@ -12542,6 +13886,251 @@ server <- function(input, output, session) { } }) + output$upgma_fruit_width <- renderUI({ + if((!is.null(Vis$upgma_min_x)) & (!is.null(Vis$upgma_max_x))) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- 3 + } else { + width <- 1 + } + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) + } + } + sliderInput( + "upgma_fruit_width_circ", + label = "", + min = 1, + max = round(ceiling(Vis$upgma_max_x) * 0.5, 0), + value = width, + width = "150px", + ticks = FALSE + ) + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + sliderInput( + "upgma_fruit_width_circ", + label = "", + min = 1, + max = 10, + value = 3, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_fruit_width_circ", + label = "", + min = 1, + max = 10, + value = 1, + width = "150px", + ticks = FALSE + ) + } + } + }) + + output$upgma_fruit_width2 <- renderUI({ + if((!is.null(Vis$upgma_min_x)) & (!is.null(Vis$upgma_max_x))) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- 3 + } else { + width <- 1 + } + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) + } + } + sliderInput( + "upgma_fruit_width_circ_2", + label = "", + min = 1, + max = round(ceiling(Vis$upgma_max_x) * 0.5, 0), + value = width, + width = "150px", + ticks = FALSE + ) + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + sliderInput( + "upgma_fruit_width_circ_2", + label = "", + min = 1, + max = 10, + value = 3, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_fruit_width_circ_2", + label = "", + min = 1, + max = 10, + value = 1, + width = "150px", + ticks = FALSE + ) + } + } + }) + + output$upgma_fruit_width3 <- renderUI({ + if((!is.null(Vis$upgma_min_x)) & (!is.null(Vis$upgma_max_x))) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- 3 + } else { + width <- 1 + } + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) + } + } + sliderInput( + "upgma_fruit_width_circ_3", + label = "", + min = 1, + max = round(ceiling(Vis$upgma_max_x) * 0.5, 0), + value = width, + width = "150px", + ticks = FALSE + ) + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + sliderInput( + "upgma_fruit_width_circ_3", + label = "", + min = 1, + max = 10, + value = 3, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_fruit_width_circ_3", + label = "", + min = 1, + max = 10, + value = 1, + width = "150px", + ticks = FALSE + ) + } + } + }) + + output$upgma_fruit_width4 <- renderUI({ + if((!is.null(Vis$upgma_min_x)) & (!is.null(Vis$upgma_max_x))) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- 3 + } else { + width <- 1 + } + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) + } + } + sliderInput( + "upgma_fruit_width_circ_4", + label = "", + min = 1, + max = round(ceiling(Vis$upgma_max_x) * 0.5, 0), + value = width, + width = "150px", + ticks = FALSE + ) + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + sliderInput( + "upgma_fruit_width_circ_4", + label = "", + min = 1, + max = 10, + value = 3, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_fruit_width_circ_4", + label = "", + min = 1, + max = 10, + value = 1, + width = "150px", + ticks = FALSE + ) + } + } + }) + + output$upgma_fruit_width5 <- renderUI({ + if((!is.null(Vis$upgma_min_x)) & (!is.null(Vis$upgma_max_x))) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- 3 + } else { + width <- 1 + } + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) + } + } + sliderInput( + "upgma_fruit_width_circ_5", + label = "", + min = 1, + max = round(ceiling(Vis$upgma_max_x) * 0.5, 0), + value = width, + width = "150px", + ticks = FALSE + ) + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + sliderInput( + "upgma_fruit_width_circ_5", + label = "", + min = 1, + max = 10, + value = 3, + width = "150px", + ticks = FALSE + ) + } else { + sliderInput( + "upgma_fruit_width_circ_5", + label = "", + min = 1, + max = 10, + value = 1, + width = "150px", + ticks = FALSE + ) + } + } + }) + # For Layout change update tiles observeEvent(input$nj_layout, { if((!is.null(Vis$nj_min_x)) & (!is.null(Vis$nj_max_x))) { @@ -12567,6 +14156,30 @@ server <- function(input, output, session) { } }) + observeEvent(input$upgma_layout, { + if((!is.null(Vis$upgma_min_x)) & (!is.null(Vis$upgma_max_x))) { + if(round(ceiling(Vis$upgma_max_x) * 0.1, 0) < 1) { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- 3 + } else { + width <- 1 + } + } else { + if(input$upgma_layout == "circular" | input$upgma_layout == "inward") { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) * 3 + } else { + width <- round(ceiling(Vis$upgma_max_x) * 0.033, 0) + } + } + + updateSliderInput(session, "upgma_fruit_width_circ", value = width) + updateSliderInput(session, "upgma_fruit_width_circ_2", value = width) + updateSliderInput(session, "upgma_fruit_width_circ_3", value = width) + updateSliderInput(session, "upgma_fruit_width_circ_4", value = width) + updateSliderInput(session, "upgma_fruit_width_circ_5", value = width) + } + }) + # Tip color mapping output$nj_tipcolor_mapping <- renderUI({ selectInput( @@ -12652,9 +14265,9 @@ server <- function(input, output, session) { }) # Branch label - output$upgma_branch_label <- renderUI({ + output$nj_branch_label <- renderUI({ selectInput( - "upgma_branch_label", + "nj_branch_label", "", choices = if(ncol(DB$meta) == 12) { c( @@ -12672,9 +14285,9 @@ server <- function(input, output, session) { ) }) - output$nj_branch_label <- renderUI({ + output$upgma_branch_label <- renderUI({ selectInput( - "nj_branch_label", + "upgma_branch_label", "", choices = if(ncol(DB$meta) == 12) { c( @@ -16238,6 +17851,7 @@ server <- function(input, output, session) { ) ) } else { + set.seed(1) if (input$tree_algo == "Neighbour-Joining") { @@ -16492,10 +18106,14 @@ server <- function(input, output, session) { Vis$branch_size_upgma <- 3.5 } + Vis$upgma_tree <- ggtree(Vis$upgma) + + # Get upper and lower end of x range + Vis$upgma_max_x <- max(Vis$upgma_tree$data$x) + Vis$upgma_min_x <- min(Vis$upgma_tree$data$x) - # Get upper end of x range - Vis$upgma_max_x <- max(ggtree(Vis$upgma)$data$x) - Vis$upgma_min_x <- min(ggtree(Vis$upgma)$data$x) + # Get parent node numbers + Vis$upgma_parentnodes <- Vis$upgma_tree$data$parent # Update visualization control inputs if(!is.null(input$upgma_tiplab_size)) { diff --git a/www/mycss.css b/www/mycss.css index 7b6677a..1ec01be 100644 --- a/www/mycss.css +++ b/www/mycss.css @@ -495,6 +495,10 @@ button#mst_label_menu { bottom: -1px } +#tree_mst { + border-radius: 10px; +} + /* Visualization NJ & UPGMA */ /* Classes*/