feat: simplify the trigger tooltip logic

Author: vedhav

R/tm_g_spiderplot.R

@@ -276,27 +276,6 @@ srv_g_spiderplot <- function(id,
 
     plotly_selected <- reactive(plotly::event_data("plotly_selected", source = "spiderplot"))
 
-    observeEvent(input$show_tooltips, {
-      sel <- plotly_selected()
-
-      if (!is.null(sel) && nrow(sel) > 0) {
-        tooltip_points <- lapply(seq_len(nrow(sel)), function(i) {
-          list(
-            curve = sel$curveNumber[i],
-            index = sel$pointNumber[i]
-          )
-        })
-
-        session$sendCustomMessage(
-          "triggerTooltips",
-          list(
-            plotID = session$ns("plot"),
-            tooltipPoints = jsonlite::toJSON(tooltip_points, auto_unbox = TRUE)
-          )
-        )
-      }
-    })
-
     tables_selected_q <- .plotly_selected_filter_children(
       data = plotly_q,
       plot_dataname = plot_dataname,

R/tm_g_swimlane.R

@@ -252,27 +252,6 @@ srv_g_swimlane <- function(id,
       plotly::event_data("plotly_selected", source = "swimlane")
     })
 
-    observeEvent(input$show_tooltips, {
-      sel <- plotly_selected()
-
-      if (!is.null(sel) && nrow(sel) > 0) {
-        tooltip_points <- lapply(seq_len(nrow(sel)), function(i) {
-          list(
-            curve = sel$curveNumber[i],
-            index = sel$pointNumber[i]
-          )
-        })
-
-        session$sendCustomMessage(
-          "triggerTooltips",
-          list(
-            plotID = session$ns("plot"),
-            tooltipPoints = jsonlite::toJSON(tooltip_points, auto_unbox = TRUE)
-          )
-        )
-      }
-    })
-
     observeEvent(input$subject_tooltips, {
       hovervalues <- data()[[plot_dataname]] |>
         dplyr::mutate(customdata = dplyr::row_number()) |>

R/utils.R

@@ -507,11 +507,7 @@ setup_trigger_tooltips <- function(plot, ns) {
               button.className = 'teal-modules-general trigger-tooltips-button';
 
               button.onclick = function () {
-                const current = parseInt(this.getAttribute('data-count'));
-                const next = current + 1;
-                this.setAttribute('data-count', next);
-                console.log('Button clicked ' + next + ' times');
-                Shiny.setInputValue('", ns("show_tooltips"), "', next);
+                triggerSelectedTooltips('", ns("plot"), "')
               };
 
               const icon = document.createElement('i');

inst/triggerTooltips/triggerTooltips.css

@@ -22,25 +22,22 @@
   top: 125%;
   right: 0;
   transform: translateX(0);
-  background-color: #121f3d;
+  background: #121f3d;
   color: #fff;
   padding: 6px 10px;
   border-radius: 3px;
   z-index: 1000;
   font-size: 12px;
 }
 
+.teal-modules-general.trigger-tooltips-button:hover > .plotly-icon-tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
 .teal-modules-general.trigger-tooltips-button > .plotly-icon-tooltip::after {
   content: "";
   position: absolute;
   bottom: 100%;
   right: 10px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: transparent transparent #121f3d transparent;
-}
-
-.teal-modules-general.trigger-tooltips-button:hover > .plotly-icon-tooltip {
-  visibility: visible;
-  opacity: 1;
 }

inst/triggerTooltips/triggerTooltips.js

@@ -1,8 +1,33 @@
-Shiny.addCustomMessageHandler("triggerTooltips", function (message) {
-  const plotDiv = document.getElementById(message.plotID);
+triggerTooltips = function (message) {
+  const plotElement = document.getElementById(message.plotID);
   const hoverPoints = message.tooltipPoints.map((point) => ({
     curveNumber: point.curve || 0,
     pointNumber: point.index,
   }));
-  Plotly.Fx.hover(plotDiv, hoverPoints);
-});
+  Plotly.Fx.hover(plotElement, hoverPoints);
+};
+
+Shiny.addCustomMessageHandler("triggerTooltips", triggerTooltips);
+
+function triggerSelectedTooltips(plotID) {
+  const plotElement = document.getElementById(plotID);
+  const tooltipPoints = [];
+
+  plotElement.data.forEach((trace, curveIndex) => {
+    if (trace.selectedpoints && Array.isArray(trace.selectedpoints)) {
+      trace.selectedpoints.forEach((pointIndex) => {
+        tooltipPoints.push({
+          x: trace.x[pointIndex],
+          y: trace.y[pointIndex],
+          curve: curveIndex,
+          index: pointIndex,
+        });
+      });
+    }
+  });
+
+  triggerTooltips({
+    plotID: plotID,
+    tooltipPoints: tooltipPoints,
+  });
+}