search

JohnCoene / echarts4r

🐳 ECharts 5 for R
http://echarts4r.john-coene.com/
Other
585 stars 82 forks source link

`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 5 months ago

yogat3ch commented 5 months ago

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:

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 commented 5 months ago

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 commented 5 months ago

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.