Change color of a selected point with with Javascript or ploxyplot on a plot: point selected by the plot or by the datatable

[Kisekya]

Hi!

I have an app in shiny composed by different modules with a plot and a datatable.

Currently, the interaction between the plot and the datatable pass by coordinates saved in reactive values.

When I click on rows of the datatable, red points on the plot appears and when I click on the plot only one point appears. It's the normal situation, so what I want.

Show_plot <- function(){
    output$plot <- renderPlotly({
     req(rv$data)
     D <- rv$data[rv$currentRows,]
     clusters <- rv$clusters[rv$currentRows]
     selectedCols <- c(NULL, NULL)
     ## Limit selection to two columns otherwise we get a scatterplot matrix
     ## but allow plotting only one variable
      if(length(input$selectedVar) == 1) {
               selectedCols[2] <- rv$selectedVar  # reactive values with columns selected
               selectedCols[1] <- "idx"
      } else {
             selectedCols <- rv$selectedVar
       }
      if(length(selectedCols) > 0 && length(selectedCols) <= 2) {
                p <- ggplot(data = D, aes_string(x = selectedCols[1], y = selectedCols[2], key="idx")) +             labs(x = eval(selectedCols[1]), y = eval(selectedCols[2])) +
               geom_point(colour = "grey") +
                coord_cartesian(expand = TRUE)
          
        if(!is.null(rv$clusters)) {
               p <- p + geom_point(aes(colour = factor(clusters)), alpha = 0.3) +
               scale_colour_brewer(palette = 'Set1') +
               theme(plot.title = element_blank(), legend.title = element_blank())
        }
        p <- p + geom_point(data = D[rv$selectedRows,],
                aes_string(x = selectedCols[1], y = selectedCols[2], key = "idx"),
                colour = "black")   #The part which allows to changes the colors
        
        p <-ggplotly(p, tooltip = "none") %>% layout(legend = list(orientation = "v", x = 1, y = 0.8)) %>%        config(p = ., staticPlot = FALSE, doubleClick = "reset+autosize", autosizable = TRUE, displayModeBar = TRUE,
                 sendData = FALSE, displaylogo = FALSE,
                 modeBarButtonsToRemove = c("sendDataToCloud", "lasso2d", "select2d","hoverCompareCartesian")) # Control Plotly's tool bar

The problem is that each time I click in an other point my plot recharge each time so it's not optimized and I try to improve this. I would like to only have the point I selected which change and not recharge the plot each time.

I tried to use proxyplot with

plotlyProxy("plot", session) %>%
      plotlyProxyInvoke("restyle", list(data= rv$data[rv$currentRows,][rv$selectedRows,],
       aes_string(x = rv$selectedVar[1], y = rv$selectedVar[2]),
        data.marker.color = "black"))

but it's not working, maybe because I don't use correctly or because it's not directly 'plot_ly' that I used.

I tried to use directly javascript with this :

javascript <- "
function(el, x){
  el.on('plotly_click', function(data) {
    var colors = [];
    // check if color is a string or array
    if(typeof data.points[0].data.marker.color == 'string'){
      for (var i = 0; i < data.points[0].data.marker.color.length; i++) {
        colors.push(data.points[0].data.marker.color);
        console.log('ok1')
      }
    }// else {
      //colors = data.points[0].data.marker.color;
      //console.log('ok2')
    //}


    // set color of selected point
    colors[data.points[0].pointNumber] = 'red';
    Plotly.restyle(el,
      {'marker':{color: colors}},
      [data.points[0].curveNumber]
    );
  });
}
" 

It's working for the plot but I lose the interaction between the plot and the table when I click on a row of the table no point appears on the plot.

I don't know how I can reconnected the both plot and the datatable with javascript. Maybe if I transfer coordinates directly in the JavaScript code?

So I know it's a big explanation, I tried to explained like I can.
If you have some ideas about what I done or if you have an other solution, I take it.

Thank you!