Embed necessary dependencies in Report_StudyInfo().

R/Report_StudyInfo.R

@@ -1,13 +1,15 @@
 #' Report Study Information
 #'
-#' @description
-#' `r lifecycle::badge("stable")`
+#' @description `r lifecycle::badge("stable")`
 #'
 #' This function generates a table summarizing study metadata as an interactive
 #' [gt::gt()] wrapped in HTML.
 #'
 #' @inheritParams shared-params
-#' @param lStudyLabels A list containing study labels. Default is NULL.
+#' @param lStudyLabels `list` A list containing study labels. Default is NULL.
+#' @param strId `character` A string to identify the output table.
+#' @param tagHeader `shiny.tag` An HTML tag or tags to use as a header for the
+#'   table.
 #' @param lStudy `deprecated` Study information as a named list.
 #'
 #' @export
@@ -17,36 +19,75 @@
 Report_StudyInfo <- function(
   dfGroups,
   lStudyLabels = NULL,
+  strId = "study_table",
+  tagHeader = htmltools::h2("Study Status"),
   lStudy = deprecated()
 ) {
   rlang::check_installed("gt", reason = "to render table from `Report_StudyInfo`")
 
   study_status_table <- MakeStudyInfo(dfGroups, lStudyLabels, lStudy = lStudy)
 
+  subcols <- c("GroupID", "nickname", "Status", "SiteCount", "ParticipantCount")
   show_table <- study_status_table %>%
-    dplyr::filter(
-      .data$Param %in% c("GroupID", "nickname", "Status", "SiteCount", "ParticipantCount")
-    ) %>%
-    dplyr::select("Description", "Value") %>%
-    gsm_gt(id = "study_table")
+    dplyr::filter(.data$Param %in% subcols) %>%
+    gt_StudyInfo(id = strId)
 
-  hide_table <- study_status_table %>%
-    dplyr::select("Description", "Value") %>%
-    gsm_gt(id = "study_table_hide")
+  strId_hide <- paste0(strId, "_hide")
+  hide_table <- htmltools::div(
+    id = strId_hide,
+    style = "display: none;",
+    gt_StudyInfo(study_status_table, id = paste0(strId_hide, "_gt"))
+  )
 
-  show_details_button <- HTML(glue::glue(
+  htmltools::tagList(
+    tagHeader,
+    htmlDetailsButton(strId, strId_hide),
+    show_table,
+    hide_table,
+    htmlDependency_toggleTables()
+  )
+}
+
+htmlDetailsButton <- function(strId, strId_hide) {
+  HTML(glue::glue(
     '<label class="toggle">',
-    '  <input class="toggle-checkbox btn-show-details" type="checkbox">',
+    '  <input class="toggle-checkbox btn-show-details" type="checkbox"',
+    '    data-shown-table="{strId}"',
+    '    data-hidden-table="{strId_hide}"',
+    '    data-hidden="false"',
+    '    onclick="toggleTables(this)">',
     '  <div class="toggle-switch"></div>',
     '  <span class="toggle-label">Show Details</span>',
-    "</label>",
+    '</label>',
     .sep = "\n"
   ))
+}
 
+htmlDependency_toggleTables <- function() {
   htmltools::tagList(
-    htmltools::h2("Study Status"),
-    show_details_button,
-    show_table,
-    hide_table
+    htmltools::htmlDependency(
+      name = "toggleTables",
+      version = "1.0.0",
+      src = "report/lib",
+      package = "gsm",
+      script = "toggleTables.js"
+    ),
+    htmltools::htmlDependency(
+      name = "toggleButton",
+      version = "1.0.0",
+      src = "report",
+      package = "gsm",
+      stylesheet = "toggleButton.css"
+    )
   )
 }
+
+gt_StudyInfo <- function(data, ...) {
+  data %>%
+    dplyr::select("Description", "Value") %>%
+    gsm_gt(...) %>%
+    gt::cols_align(columns = "Value", align = "right") %>%
+    gt::tab_options(
+      column_labels.hidden = TRUE
+    )
+}

inst/README.md

@@ -139,7 +139,7 @@ JavaScript utility functions used to configure `htmlwidgets` and for custom repo
 ├── dragOverallSiteDropdown.js
 ├── number_to_array.js
 ├── overallSiteDropdown.js
-└── showMetaTableDetails.js
+└── toggleTables.js
 ```
 ---
 

inst/report/Report_KRI.Rmd

@@ -154,14 +154,10 @@ params$dfMetrics %>%
 ```{r echo=FALSE}
 group_dropdown <- system.file('report', 'lib', 'overallGroupDropdown.js', package = "gsm")
 dropdown_drag <- system.file('report', 'lib', 'dragOverallGroupDropdown.js', package = "gsm")
-meta_details <- system.file('report', 'lib', 'showMetaTableDetails.js', package = "gsm")
 ```
 
 ```{js, file={group_dropdown}, echo=FALSE}
 ```
 
 ```{js, file={dropdown_drag}, echo=FALSE}
 ```
-
-```{js, file={meta_details}, echo=FALSE}
-```

inst/report/lib/toggleTables.js

@@ -0,0 +1,29 @@
+/**
+ * Toggles between two tables when a checkbox is clicked.
+ *
+ * The checkbox element should have the following data attributes:
+ * - data-shown-table: The ID of the table to show when hidden.
+ * - data-hidden-table: The ID of the table to hide when shown.
+ *
+ * @param {HTMLInputElement} checkbox - The checkbox element that triggers the toggle action.
+ */
+function toggleTables(checkbox) {
+    const hidden = checkbox.checked;
+
+    const shownTableId = checkbox.dataset.shownTable;
+    const hiddenTableId = checkbox.dataset.hiddenTable;
+
+    const shownTable = document.querySelector(`#${shownTableId}`);
+    const hiddenTable = document.querySelector(`#${hiddenTableId}`);
+    const toggleLabel = checkbox.parentElement.querySelector('.toggle-label');
+
+    if (hidden) {
+        shownTable.style.display = 'none';
+        hiddenTable.style.display = 'block';
+        toggleLabel.innerHTML = 'Hide Details';
+    } else {
+        shownTable.style.display = 'block';
+        hiddenTable.style.display = 'none';
+        toggleLabel.innerHTML = 'Show Details';
+    }
+}

inst/report/styles.css

@@ -131,78 +131,6 @@ tbody.gt_table_body tr:hover:nth-child(odd) {
   background: #f9f9f9;
 }
 
-
-div#study_table_hide {
-    display: none;
-}
-
-
-
-/* credit to: https://codepen.io/alvarotrigo/pen/YzEdrKj */
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-.toggle {
-  cursor: pointer;
-  display: inline-block;
-}
-
-.toggle-switch {
-  display: inline-block;
-  background: #ccc;
-  border-radius: 16px;
-  width: 58px;
-  height: 26px;
-  position: relative;
-  vertical-align: middle;
-  transition: background 0.25s;
-}
-
-.toggle-switch:before, .toggle-switch:after {
-  content: "";
-}
-
-.toggle-switch:before {
-  display: block;
-  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  transition: left 0.25s;
-}
-
-.toggle:hover .toggle-switch:before {
-  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
-}
-
-.toggle-checkbox:checked + .toggle-switch {
-  background: var(--blue-button-color);
-}
-
-.toggle-checkbox:checked + .toggle-switch:before {
-  left: 30px;
-}
-
-.toggle-checkbox {
-  position: absolute;
-  visibility: hidden;
-}
-
-.toggle-label {
-  margin-left: 5px;
-  position: relative;
-  top: 2px;
-}
-
 #timeline {
   display: none;
 }

inst/report/toggleButton.css

@@ -0,0 +1,45 @@
+/* Toggle Switch Styling */
+.toggle {
+  display: inline-flex; /* Aligns the checkbox and label */
+  align-items: center;  /* Centers the items vertically */
+  cursor: pointer;
+}
+
+.toggle-switch {
+  background: #ccc; /* Default background color */
+  border-radius: 16px; /* Makes the edges rounded */
+  width: 58px;
+  height: 26px;
+  position: relative;
+  transition: background 0.25s ease-in-out; /* Smooth transition for color change */
+}
+
+.toggle-switch::before {
+  content: "";
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 3px; /* Centers the knob vertically */
+  left: 3px; /* Starts at the leftmost side */
+  transition: left 0.25s ease-in-out; /* Smooth transition for position change */
+}
+
+.toggle-checkbox:checked + .toggle-switch {
+  background: var(--blue-button-color); /* Changes color when toggled */
+}
+
+.toggle-checkbox:checked + .toggle-switch::before {
+  left: 33px; /* Moves the knob to the right when checked */
+}
+
+.toggle-checkbox {
+  position: absolute;
+  visibility: hidden; /* Hides the checkbox but maintains accessibility */
+}
+
+.toggle-label {
+  margin-left: 8px; /* Adds space between the switch and label text */
+}