Update UI with navbar and selectize

DESCRIPTION

@@ -23,5 +23,4 @@ Imports:
     rlang,
     rclipboard,
     shiny,
-    shinyjs,
+    shinyjs
-    shinyWidgets

R/app.R

@@ -8,7 +8,6 @@ run_app <- function(port = 3464) {
 
     shinyjs::useShinyjs()
     rclipboard::rclipboardSetup()
-    shinyWidgets::pickerInput("none", choices = NULL)
 
     # Actually run the app.
 

R/comparison_editor.R

@@ -1,9 +1,5 @@
 # Create a comparison editor.
 comparison_editor_ui <- function(id) {
-    known_genes <- genes[name != ""]
-    gene_choices <- known_genes$id
-    names(gene_choices) <- known_genes$name
-
     verticalLayout(
         h3("Comparison"),
         selectInput(
@@ -18,24 +14,19 @@ comparison_editor_ui <- function(id) {
                 "Customize" = "custom"
             )
         ),
-        tabsetPanel(
+        conditionalPanel(
-            id = NS(id, "custom_comparison_genes_panel"),
+            condition = sprintf(
-            type = "hidden",
+                "input['%s'] == 'custom'",
-            tabPanelBody(value = "hide"),
+                NS(id, "comparison_genes")
-            tabPanelBody(
-                value = "show",
-                shinyWidgets::pickerInput(
-                    inputId = NS(id, "custom_comparison_genes"),
-                    choices = gene_choices,
-                    options = list(
-                        "actions-box" = TRUE,
-                        "live-search" = TRUE
             ),
+            selectizeInput(
+                inputId = NS(id, "custom_comparison_genes"),
+                label = "Select comparison genes",
+                choices = NULL,
                 multiple = TRUE
             )
         )
     )
-    )
 }
 
 # Create a server for the comparison editor.
@@ -46,21 +37,16 @@ comparison_editor_ui <- function(id) {
 # @return A reactive containing the comparison gene IDs.
 comparison_editor_server <- function(id, preset) {
     moduleServer(id, function(input, output, session) {
-        observeEvent(input$comparison_genes, {
+        known_genes <- genes[name != ""]
-            if (input$comparison_genes == "custom") {
+        gene_choices <- known_genes$id
-                updateTabsetPanel(
+        names(gene_choices) <- known_genes$name
+
+        updateSelectizeInput(
             session,
-                    "custom_comparison_genes_panel",
+            "custom_comparison_genes",
-                    selected = "show"
+            choices = gene_choices,
+            server = TRUE
         )
-            } else {
-                updateTabsetPanel(
-                    session,
-                    "custom_comparison_genes_panel",
-                    selected = "hide"
-                )
-            }
-        })
 
         reactive({
             if (input$comparison_genes == "none") {

R/preset_editor.R

@@ -1,12 +1,5 @@
 # Create a preset editor.
 preset_editor_ui <- function(id) {
-    species_choices <- species$id
-    names(species_choices) <- species$name
-
-    known_genes <- genes[name != ""]
-    gene_choices <- known_genes$id
-    names(gene_choices) <- known_genes$name
-
     verticalLayout(
         h3("Inputs"),
         selectInput(
@@ -18,22 +11,14 @@ preset_editor_ui <- function(id) {
                 "Customize" = "custom"
             )
         ),
-        tabsetPanel(
+        conditionalPanel(
-            id = NS(id, "custom_species_panel"),
+            condition = sprintf("input['%s'] == 'custom'", NS(id, "species")),
-            type = "hidden",
+            selectizeInput(
-            tabPanelBody(value = "hide"),
-            tabPanelBody(
-                value = "show",
-                shinyWidgets::pickerInput(
                 inputId = NS(id, "custom_species"),
-                    choices = species_choices,
+                label = "Select input species",
-                    options = list(
+                choices = NULL,
-                        "actions-box" = TRUE,
-                        "live-search" = TRUE
-                    ),
                 multiple = TRUE
-                )
+            ),
-            )
         ),
         selectInput(
             NS(id, "reference_genes"),
@@ -44,22 +29,17 @@ preset_editor_ui <- function(id) {
                 "Customize" = "custom"
             )
         ),
-        tabsetPanel(
+        conditionalPanel(
-            id = NS(id, "custom_reference_genes_panel"),
+            condition = sprintf(
-            type = "hidden",
+                "input['%s'] == 'custom'",
-            tabPanelBody(value = "hide"),
+                NS(id, "reference_genes")
-            tabPanelBody(
-                value = "show",
-                shinyWidgets::pickerInput(
-                    inputId = NS(id, "custom_reference_genes"),
-                    choices = gene_choices,
-                    options = list(
-                        "actions-box" = TRUE,
-                        "live-search" = TRUE
             ),
+            selectizeInput(
+                inputId = NS(id, "custom_reference_genes"),
+                label = "Select reference genes",
+                choices = NULL,
                 multiple = TRUE
             )
-            )
         ),
         selectInput(
             NS(id, "optimization_target"),
@@ -95,6 +75,27 @@ preset_editor_ui <- function(id) {
 # @return A reactive containing the preset.
 preset_editor_server <- function(id) {
     moduleServer(id, function(input, output, session) {
+        species_choices <- species$id
+        names(species_choices) <- species$name
+
+        known_genes <- genes[name != ""]
+        gene_choices <- known_genes$id
+        names(gene_choices) <- known_genes$name
+
+        updateSelectizeInput(
+            session,
+            "custom_species",
+            choices = species_choices,
+            server = TRUE
+        )
+
+        updateSelectizeInput(
+            session,
+            "custom_reference_genes",
+            choices = gene_choices,
+            server = TRUE
+        )
+
         current_preset <- reactiveVal(geposan::preset(
             methods = method_ids,
             species_ids = species$id,
@@ -103,38 +104,6 @@ preset_editor_server <- function(id) {
             optimization_target = "mean"
         ))
 
-        observeEvent(input$species, {
-            if (input$species == "custom") {
-                updateTabsetPanel(
-                    session,
-                    "custom_species_panel",
-                    selected = "show"
-                )
-            } else {
-                updateTabsetPanel(
-                    session,
-                    "custom_species_panel",
-                    selected = "hide"
-                )
-            }
-        })
-
-        observeEvent(input$reference_genes, {
-            if (input$reference_genes == "custom") {
-                updateTabsetPanel(
-                    session,
-                    "custom_reference_genes_panel",
-                    selected = "show"
-                )
-            } else {
-                updateTabsetPanel(
-                    session,
-                    "custom_reference_genes_panel",
-                    selected = "hide"
-                )
-            }
-        })
-
         new_preset <- reactive({
             species_ids <- if (input$species == "replicative") {
                 species[replicative == TRUE, id]

R/ui.R

@@ -1,38 +1,42 @@
-ui <- fluidPage(
+ui <- div(
     shinyjs::useShinyjs(),
     rclipboard::rclipboardSetup(),
-    titlePanel("TPE-OLD candidates"),
+    navbarPage(
+        theme = bslib::bs_theme(
+            version = 3,
+            bootswatch = "united",
+            primary = "#1c71d8"
+        ),
+        title = "TPE-OLD candidates",
+        selected = "Ranking",
+        tabPanel(
+            "Input data",
             sidebarLayout(
                 sidebarPanel(
                     width = 3,
                     preset_editor_ui("preset_editor"),
-            comparison_editor_ui("comparison_editor"),
+                    comparison_editor_ui("comparison_editor")
-            filters_ui("filters"),
-            methods_ui("methods")
                 ),
                 mainPanel(
-            tabsetPanel(
+                    width = 9,
-                type = "pills",
-                header = div(style = "margin-top: 16px"),
-                tabPanel(
-                    "Results",
-                    uiOutput("copy"),
-                    div(
-                        style = "margin-top: 16px",
-                        DT::DTOutput("genes")
-                    )
-                ),
-                tabPanel(
-                    "Input Data",
                     plotly::plotlyOutput(
                         "scatter",
                         width = "100%",
                         height = "600px"
                     )
+                )
+            ),
         ),
         tabPanel(
-                    "Assessment",
+            "Ranking",
-                    htmlOutput("assessment_synopsis"),
+            sidebarLayout(
+                sidebarPanel(
+                    width = 3,
+                    methods_ui("methods"),
+                    filters_ui("filters")
+                ),
+                mainPanel(
+                    width = 9,
                     div(
                         style = "margin-top: 16px",
                         plotly::plotlyOutput(
@@ -49,6 +53,20 @@ ui <- fluidPage(
                             height = "600px"
                         )
                     ),
+                )
+            ),
+        ),
+        tabPanel(
+            "Detailed results",
+            uiOutput("copy"),
+            div(
+                style = "margin-top: 16px",
+                DT::DTOutput("genes")
+            )
+        ),
+        tabPanel(
+            "Assessment",
+            htmlOutput("assessment_synopsis"),
             div(
                 style = "margin-top: 16px",
                 plotly::plotlyOutput(
@@ -83,6 +101,4 @@ ui <- fluidPage(
             )
         )
     )
-        )
-    )
 )