feat: Help widget

pharmaverse · Dec 18, 2024 · c2858ca · c2858ca
1 parent 8f351ea
commit c2858ca
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/inst/shiny/modules/tlg_plot.R b/inst/shiny/modules/tlg_plot.R
@@ -4,7 +4,37 @@ tlg_plot_ui <- function(id) {
   layout_sidebar(
     sidebar = sidebar(
       position = "right",
-      uiOutput(ns("options"), class = "plot-options-container")
+      div(
+        class = "plot-options-container",
+        dropdown(
+          div(
+            tags$h2("Plot options"),
+            tags$p("
+              You can specify any plot customization options that are supported by the specific
+              plot module.
+            "),
+            tags$p("Leaving a widget empty will allow default behaviour of the plotting function."),
+            tags$p(
+              "In text fields, you can reference values / columns in the dataset by using
+              the dollar sign (", tags$b("$"), ") and providing column name, e.g. ",
+              tags$b("$DOSEU"), "."
+            ),
+            tags$p("
+              You can also reference ", tags$i("label"), " attribute of any column by prefacing the
+              column name by exclamation mark (", tags$b("!"), "), e.g. ", tags$b("!DOSEU"), ".
+            ")
+          ),
+          style = "unite",
+          right = TRUE,
+          icon = icon("question"),
+          status = "primary"
+        ),
+        actionButton(
+          inputId = ns("reset_widgets"),
+          label = "Reset to defaults"
+        ),
+        uiOutput(ns("options"), class = "plot-options-container")
+      )
     ),
     div(
       class = "plot-widgets-container",
@@ -123,13 +153,7 @@ tlg_plot_server <- function(id, render_plot, options = NULL) {
 
     #' creates widgets responsible for custimizing the plots
     output$options <- renderUI({
-      tagList(
-        actionButton(
-          inputId = session$ns("reset_widgets"),
-          label = "Reset to defaults"
-        ),
-        purrr::imap(options, create_edit_widget)
-      )
+      purrr::imap(options, create_edit_widget)
     })
   })
 }

diff --git a/inst/shiny/www/style.css b/inst/shiny/www/style.css
@@ -154,6 +154,22 @@
     height: min-content;
   }
 
+  .sw-dropdown {
+    font-size: 1em;
+    display: block;
+    position: relative;
+    top: -2.5em;
+    right: -0.5em;
+    margin-bottom: -1.25em;
+    height: 2em;
+    width: 2em;
+    float: right;
+  }
+
+  .sw-dropdown-in {
+    width: 200px;
+  }
+
   .plot-widgets-container {
     display: flex;
     justify-content: space-around;
@@ -171,7 +187,7 @@
   }
 
   .plot-options-container {
-    button {
+     & > button {
       width: 75%;
       margin-left: 15%;
       margin-top: 1em;