Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

e_showtip_p/ e_dispatch_action_p not working in modularized shiny app, attempting to debug with local fork but debugger doesn't register in the addCustomMessageHandler #612

Open
yogat3ch opened this issue Jan 11, 2024 · 2 comments

Comments

@yogat3ch
Copy link
Contributor

yogat3ch commented Jan 11, 2024

Hi @JohnCoene and echarts4r maintainers,
I'm not having any luck getting any of the echarts4r action handling helper functions to work in a modularized environment.
I'm attempting to connect the showing of a tooltip between two different plots and the e_dispatch_action_p and e_showtip_p used based on the echarts docs here appear to not be functioning. I've attempted to debug the problem with a local fork of echarts4r by adding debugger to the associated sendCustomMessage callbacks:

 Shiny.addCustomMessageHandler('e_showtip_p',
    function(data) {
      var chart = get_e_charts(data.id);
      debugger;
      if (typeof chart != 'undefined') {
        chart.dispatchAction(data.opts);
      }
  });
Shiny.addCustomMessageHandler('e_dispatch_action_p',
    function(data) {
      debugger;
      var chart = get_e_charts(data.id);
      if (typeof chart != 'undefined') {
        chart.dispatchAction(data.opts);
      }
  });

but those don't appear to be being passed through to the rendered code. Probably something to do with the HTMLWidgets framework.

There's a reprex below where the intended outcome is to have the mouseover event on a serie activate the tooltip for the same series on the other chart.

Can anyone:

  • Manage to get the reproducible example below working?
  • Provide instruction on how to debug the sendCustomMessage callbacks for future reference?
library(shiny)
library(echarts4r)

ui <- fluidPage(
  fluidRow(
    column(6, echarts4rOutput("plot")),
    column(6, echarts4rOutput("plot2"))
  )
)

server <- function(input, output, session) {
  output$plot <- renderEcharts4r({
    mtcars |>
      e_charts(mpg) |>
      e_line(disp, bind = carb, name = "displacement") |>
      e_line(hp) |>
      e_x_axis(min = 10) |>
      e_tooltip() |>
      e_theme("westeros")
  })
  output$plot2 <- renderEcharts4r({
    mtcars |>
      e_charts(mpg) |>
      e_line(disp, bind = carb, name = "displacement") |>
      e_line(hp) |>
      e_x_axis(min = 10) |>
      e_tooltip() |>
      e_theme("westeros")
  })

  observeEvent(input$plot_mouseover_serie, {

    echarts4rProxy("plot2") |>
      e_dispatch_action_p(
        'showTip',
        name = input$plot_mouseover_serie,
        position = c(10,10)
      )
  })
  observeEvent(input$plot2_mouseover_serie, {

    echarts4rProxy("plot") |>
      e_dispatch_action_p(
        'showTip',
        name = input$plot2_mouseover_serie,
        position = "['50%', '50%']"
      )
  })


}

if (interactive()) {
  shinyApp(ui, server)
}
`devtools::session_info`
─ Session info ───────────────────────────────────────────────────────
 setting  value
 version  R version 4.3.0 (2023-04-21)
 os       macOS 14.2.1
 system   aarch64, darwin20
 ui       RStudio
 language (EN)
 collate  en_US.UTF-8
 ctype    en_US.UTF-8
 tz       America/New_York
 date     2024-01-11
 rstudio  2023.12.0+369 Ocean Storm (desktop)
 pandoc   NA

─ Packages ───────────────────────────────────────────────────────────
 !  package     * version date (UTC) lib source
 P  backports     1.4.1   2021-12-13 [?] CRAN (R 4.3.0)
    brio          1.1.3   2021-11-30 [1] CRAN (R 4.3.0)
    broom         1.0.5   2023-06-09 [1] CRAN (R 4.3.0)
    bslib         0.6.1   2023-11-28 [1] CRAN (R 4.3.1)
    cachem        1.0.8   2023-05-01 [1] CRAN (R 4.3.0)
    callr         3.7.3   2022-11-02 [1] CRAN (R 4.3.0)
 VP cli           3.6.1   2023-12-11 [?] CRAN (R 4.3.1) (on disk 3.6.2)
 P  colorspace    2.1-0   2023-01-23 [?] CRAN (R 4.3.0)
 P  corrplot      0.92    2021-11-18 [?] CRAN (R 4.3.0)
    countrycode   1.5.0   2023-05-30 [1] CRAN (R 4.3.0)
 P  crayon        1.5.2   2022-09-29 [?] CRAN (R 4.3.0)
 P  desc          1.4.2   2022-09-08 [?] CRAN (R 4.3.0)
    devtools      2.4.5   2022-10-11 [1] CRAN (R 4.3.0)
 P  digest        0.6.33  2023-07-07 [?] CRAN (R 4.3.0)
 P  dplyr         1.1.3   2023-09-03 [?] CRAN (R 4.3.0)
 P  echarts4r   * 0.4.5   2023-06-16 [?] CRAN (R 4.3.0)
    ellipsis      0.3.2   2021-04-29 [1] CRAN (R 4.3.0)
 P  fansi         1.0.4   2023-01-22 [?] CRAN (R 4.3.0)
    fastmap       1.1.1   2023-02-24 [1] CRAN (R 4.3.0)
 P  fs            1.6.3   2023-07-20 [?] CRAN (R 4.3.0)
    generics      0.1.3   2022-07-05 [1] CRAN (R 4.3.0)
 P  glue          1.6.2   2022-02-24 [?] CRAN (R 4.3.0)
 P  htmltools     0.5.7   2023-11-03 [?] CRAN (R 4.3.1)
    htmlwidgets   1.6.2   2023-03-17 [1] CRAN (R 4.3.0)
 P  httpuv        1.6.12  2023-10-23 [?] CRAN (R 4.3.1)
    jquerylib     0.1.4   2021-04-26 [1] CRAN (R 4.3.0)
 P  jsonlite      1.8.8   2023-12-04 [?] CRAN (R 4.3.1)
    later         1.3.1   2023-05-02 [1] CRAN (R 4.3.0)
 P  lifecycle     1.0.3   2022-10-07 [?] CRAN (R 4.3.0)
 P  magrittr      2.0.3   2022-03-30 [?] CRAN (R 4.3.0)
    memoise       2.0.1   2021-11-26 [1] CRAN (R 4.3.0)
    mime          0.12    2021-09-28 [1] CRAN (R 4.3.0)
    miniUI        0.1.1.1 2018-05-18 [1] CRAN (R 4.3.0)
 P  munsell       0.5.0   2018-06-12 [?] CRAN (R 4.3.0)
 P  pillar        1.9.0   2023-03-22 [?] CRAN (R 4.3.0)
 P  pkgbuild      1.4.2   2023-06-26 [?] CRAN (R 4.3.0)
 P  pkgconfig     2.0.3   2019-09-22 [?] CRAN (R 4.3.0)
 P  pkgload       1.3.3   2023-09-22 [?] CRAN (R 4.3.1)
 VP plyr          1.8.8   2023-10-02 [?] CRAN (R 4.3.1) (on disk 1.8.9)
    prettyunits   1.2.0   2023-09-24 [1] CRAN (R 4.3.1)
 P  processx      3.8.2   2023-06-30 [?] CRAN (R 4.3.0)
 P  profvis       0.3.8   2023-05-02 [?] CRAN (R 4.3.0)
    promises      1.2.1   2023-08-10 [1] CRAN (R 4.3.0)
 P  ps            1.7.5   2023-04-18 [?] CRAN (R 4.3.0)
 P  purrr         1.0.2   2023-08-10 [?] CRAN (R 4.3.0)
 P  R6            2.5.1   2021-08-19 [?] CRAN (R 4.3.0)
 P  Rcpp          1.0.11  2023-07-06 [?] CRAN (R 4.3.0)
 P  remotes       2.4.2.1 2023-07-18 [?] CRAN (R 4.3.0)
 P  renv          1.0.3   2023-09-19 [?] CRAN (R 4.3.1)
 VP rlang         1.1.1   2023-11-04 [?] CRAN (R 4.3.1) (on disk 1.1.2)
 P  rprojroot     2.0.3   2022-04-02 [?] CRAN (R 4.3.0)
 P  rstudioapi    0.15.0  2023-07-07 [?] CRAN (R 4.3.0)
 P  sass          0.4.7   2023-07-15 [?] CRAN (R 4.3.0)
 P  scales        1.2.1   2022-08-20 [?] CRAN (R 4.3.0)
    sessioninfo   1.2.2   2021-12-06 [1] CRAN (R 4.3.0)
 P  shiny       * 1.8.0   2023-11-17 [?] CRAN (R 4.3.1)
 VP stringi       1.7.12  2023-12-11 [?] CRAN (R 4.3.1) (on disk 1.8.3)
 VP stringr       1.5.0   2023-11-14 [?] CRAN (R 4.3.1) (on disk 1.5.1)
 P  testthat    * 3.1.10  2023-07-06 [?] CRAN (R 4.3.0)
 P  tibble        3.2.1   2023-03-20 [?] CRAN (R 4.3.0)
 P  tidyr         1.3.0   2023-01-24 [?] CRAN (R 4.3.0)
    tidyselect    1.2.0   2022-10-10 [1] CRAN (R 4.3.0)
    urlchecker    1.0.1   2021-11-30 [1] CRAN (R 4.3.0)
    usethis       2.2.2   2023-07-06 [1] CRAN (R 4.3.0)
 VP utf8          1.2.3   2023-10-22 [?] CRAN (R 4.3.1) (on disk 1.2.4)
 P  vctrs         0.6.5   2023-12-01 [?] CRAN (R 4.3.1)
 P  withr         2.5.2   2023-10-30 [?] CRAN (R 4.3.1)
    xtable        1.8-4   2019-04-21 [1] CRAN (R 4.3.0)
 P  yaml          2.3.7   2023-01-23 [?] CRAN (R 4.3.0)

 [1] /Users/stephenholsenbeck/Library/Caches/org.R-project.R/R/renv/library/dmdu-4393acb2/R-4.3/aarch64-apple-darwin20
 [2] /Users/stephenholsenbeck/Library/Caches/org.R-project.R/R/renv/sandbox/R-4.3/aarch64-apple-darwin20/ac5c2659

 V ── Loaded and on-disk version mismatch.
 P ── Loaded and on-disk path mismatch.

──────────────────────────────────────────────────────────────────────

@yogat3ch yogat3ch changed the title e_showtip_p not working in modularized shiny app, attempting to debug with local fork but debugger doesn't register in the addCustomMessageHandler e_showtip_p/ e_dispatch_action_p not working in modularized shiny app, attempting to debug with local fork but debugger doesn't register in the addCustomMessageHandler Jan 11, 2024
@yogat3ch
Copy link
Contributor Author

After much trial & error, I've managed to get e_highlight_p and e_downplay_p to work in tandem with one another, but no luck on the tooltips:

library(shiny)
devtools::load_all()

ui <- fluidPage(
  fluidRow(
    column(6, echarts4rOutput("plot")),
    column(6, echarts4rOutput("plot2"))
  )
)

server <- function(input, output, session) {
  output$plot <- renderEcharts4r({
    mtcars |>
      e_charts(mpg) |>
      e_line(disp, bind = carb, name = "displacement", emphasis = list(
        disabled = FALSE,
        lineStyle = list(opacity = 1,
                         width = 6)
      )) |>
      e_line(hp, emphasis = list(
        disabled = FALSE,
        lineStyle = list(opacity = 1,
                         width = 6)
      )) |>
      e_x_axis(min = 10) |>
      e_tooltip() |>
      e_theme("westeros") |> 
      e_group('p') |> 
      e_on(
        "series",
        event = "mouseover", 
        "
        (event) => {
          Shiny.setInputValue('plot_mouseover_seriesIndex', event.seriesIndex, {priority: 'event'})
        }
        "
      ) |> 
      e_on(
        "series",
        event = "mouseover", 
        "
        (event) => {
          Shiny.setInputValue('plot_mouseout_seriesIndex', event.seriesIndex, {priority: 'event'})
        }
        "
      )
  })
  output$plot2 <- renderEcharts4r({
    mtcars |>
      e_charts(mpg) |>
      e_line(disp, bind = carb, name = "displacement", emphasis = list(
        disabled = FALSE,
        lineStyle = list(opacity = 1,
                         width = 6)
      )) |>
      e_line(hp, emphasis = list(
        disabled = FALSE,
        lineStyle = list(opacity = 1,
                         width = 6)
      )) |>
      e_x_axis(min = 10) |>
      e_tooltip() |>
      e_theme("westeros") |> 
      e_group('p') |> 
      e_on(
        "series",
        event = "mouseover", 
        "
        (event) => {
          Shiny.setInputValue('plot2_mouseover_seriesIndex', event.seriesIndex, {priority: 'event'})
        }
        "
      ) |> 
      e_on(
        "series",
        event = "mouseout", 
        "
        (event) => {
          Shiny.setInputValue('plot2_mouseout_seriesIndex', event.seriesIndex, {priority: 'event'})
        }
        "
      )
    # |> 
    #   e_connect_group("p")
  })


  browse = FALSE
  observeEvent(input$plot_mouseover_seriesIndex, {
    cli::cli_inform("plot_mouseover")
    if (browse)
      browser()
    prox <- echarts4rProxy("plot2")
    e_dispatch_action_p(
      prox,
      "select",
      seriesIndex = input$plot_mouseover_seriesIndex
    )
    e_showtip_p(
      prox,
      seriesIndex = input$plot_mouseover_seriesIndex
    )
    e_highlight_p(
      prox,
      series_index = input$plot_mouseover_seriesIndex
    )
  })
  observeEvent(input$plot2_mouseover_seriesIndex, {
    cli::cli_inform("plot2_mouseover")
    if (browse)
      browser()
    prox <- echarts4rProxy("plot")
      e_dispatch_action_p(
        prox,
        "select",
        seriesIndex = input$plot2_mouseover_seriesIndex
      )
      e_showtip_p(
        prox,
        seriesIndex = input$plot2_mouseover_seriesIndex
      )
      e_highlight_p(
        prox,
        series_index = input$plot2_mouseover_seriesIndex
      )
  })
  observeEvent(input$plot_mouseout_seriesIndex, {
    cli::cli_inform("plot2_mouseout")
    if (browse)
      browser()
    prox <- echarts4rProxy("plot2")
    e_dispatch_action_p(
      prox,
      "select",
      seriesIndex = input$plot_mouseout_seriesIndex
    )
    e_hidetip_p(
      prox
    )
    e_downplay_p(
      prox,
      series_index = input$plot_mouseout_seriesIndex
    )
  })
  observeEvent(input$plot2_mouseout_seriesIndex, {
    cli::cli_inform("plot2_mouseout")
    if (browse)
      browser()
    prox <- echarts4rProxy("plot")
      e_dispatch_action_p(
        prox,
        "select",
        seriesIndex = input$plot2_mouseout_seriesIndex
      )
      e_hidetip_p(
        prox
      )
      e_downplay_p(
        prox,
        series_index = input$plot2_mouseout_seriesIndex
      )
  })





}

if (interactive()) {
  shinyApp(ui, server)
}

@JohnCoene
Copy link
Owner

Thanks for the detailed issue once again!

I'm afraid I haven't had any luck either. Doesn't work in pure. JavaScript either, echarts4r proxy code does execute but echarts.js fails to show the tooltip.

Perhaps we'll need to update the JavaScript dependencies in echarts4r.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants