Merge pull request #44 from BioDT/dev

Dev

app/js/popover.js

@@ -0,0 +1,9 @@
+// popovers.js
+$( document ).ready(function() {
+
+  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+  return new bootstrap.Popover(popoverTriggerEl)
+  })
+
+});

app/logic/waiter.R

@@ -1,17 +1,37 @@
 box::use(
-  shiny[tagList, h3],
+  shiny[tagList, h3, tags],
   waiter[spin_loaders],
 )
 
 #' @export
 waiter_text <- function(
     message = h3("Working..."),
+    style = "color: #414f2f;",
+    css,
     spinner = spin_loaders(
       id = 19,
       color = "#414f2f"
     )) {
+  if (missing(css)) { # default
+    css <- tags$style(
+      paste0(
+        ".waiter-overlay-content {
+          background-image: url('./img/forest2.png');
+          background-repeat: no-repeat;
+          background-size: 100%;
+          background-position: bottom;
+          display: flex; ",
+        style,
+        "}"
+      )
+    )
+  } else { # if someone wants to completely rewrite css of the loader
+    css <- css
+  }
+
   tagList(
+    css,
     spinner,
-    message
+    message,
   )
 }

app/main.R

@@ -5,6 +5,7 @@ box::use(
   waiter[useWaiter, useHostess, waiterShowOnLoad, waiter_hide, spin_loaders],
   cicerone[use_cicerone],
   stringi[stri_rand_strings],
+  htmltools[includeScript],
 )
 
 box::use(
@@ -48,6 +49,7 @@ ui <- function(id) {
       ),
       color = "rgba(256,256,256,0.9)"
     ),
+    includeScript("app/js/popover.js"),
     # Body ----
     # Main navbar----
     page_navbar(

app/styles/main.scss

@@ -40,15 +40,6 @@
   }
 }
 
-
-.waiter-fullscreen {
-  background-image: url("../img/forest2.png");
-  background-repeat: no-repeat;
-  background-size: 100%;
-  background-position: bottom;
-  display: flex;
-}
-
 /* START help button */
 .help-button {
   width: 70px;

app/view/honeybee/beekeeper_lookup.R

@@ -2,6 +2,8 @@ box::use(
   shiny[moduleServer, NS, tagList, tags, reactive, reactiveVal, observeEvent],
   bslib[card, card_header, card_body],
   DT[DTOutput, renderDT],
+  htmlwidgets[JS],
+
 )
 
 #' @export
@@ -18,6 +20,7 @@ honeybee_lookup_ui <- function(id) {
       ),
       card_body(
         tags$div(
+          id = "bee-lookup-table",
           DTOutput(
             ns("lookup_table")
           )
@@ -48,7 +51,35 @@ honeybee_lookup_server <- function(id,
         searching = FALSE,
         info = FALSE
       ),
-      class = c("hover", "compact")
+      class = c("hover", "compact"),
+      callback = JS(paste0('
+        let th_cells = document.querySelectorAll("#bee-lookup-table table thead tr th")
+
+        const tooltipInfo = [
+          "Amount of pollen g/m^2 per day",
+          "Conversion factor (mol/l) from nectar (l) into sugar (mol)",
+          "Amount of nectar l/m^2 per day",
+          "Minimum time in seconds a bee needs to harvest nectar resources during one flight",
+          "Minimum time in seconds a bee needs to harvest pollen resources during one flight",
+          "Calendar day when resources become available",
+          "Calendar day until resources are available"
+        ]
+
+        th_cells.forEach((el, idx) => {
+          if (idx == 0 || idx == 1) {
+            return;
+          } else {
+            let tooltipEl = document.createElement("span");
+            tooltipEl.innerText = "🛈"
+            tooltipEl.setAttribute("type", "button");
+            tooltipEl.setAttribute("data-bs-toggle", "popover");
+            tooltipEl.setAttribute("data-bs-content", "body content here");
+            tooltipEl.setAttribute("title", tooltipInfo[idx - 2]);
+
+            th_cells[idx].appendChild(tooltipEl)
+          }
+        })
+      '))
     )
 
     # Lookup table edit logic ----

dependencies.R

@@ -9,6 +9,7 @@ library(leaflet.extras)
 library(readr)
 library(rhino)
 library(shinyjs)
+library(stringi)
 library(stringr)
 library(terra)
 library(uuid)