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

108-module-output very flickery on IE11 #1634

Closed
jcheng5 opened this Issue Mar 29, 2017 · 14 comments

Comments

Projects
None yet
2 participants
@jcheng5
Member

jcheng5 commented Mar 29, 2017

When testing the shiny-examples app 108-module-output on IE11 (and Shiny Server Pro FWIW), brushing the left plot results in a bunch of flickering as the outputs redraw themselves quite a few times--but with identical results every time (i.e. it's not a matter of mid-brush events being sent). I turned on shiny.trace and filtered down the messages to those that were sent by the client to the server, and saw this (note the xmax values):

RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912967,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912963,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.80346854791296,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912956,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912953,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.80346854791295,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912945,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912942,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.80346854791294,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912935,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.80346854791293,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912928,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912924,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.80346854791292,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912917,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912914,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.80346854791291,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912906,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912903,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.8034685479129,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912896,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.803468547912892,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}
RECV {"method":"update","data":{"scatters-brush":{"xmin":14.456790123456784,"xmax":30.80346854791289,"ymin":17.08749928876246,"ymax":38.92117970602182,"mapping":{"x":"cty","y":"hwy"},"domain":{"left":7.7,"right":36.3,"bottom":10.4,"top":45.6},"range":{"left":36.8904109589041,"right":549.520547945206,"bottom":366.609589041096,"top":5.47945205479452},"log":{"x":null,"y":null},"direction":"xy","brushId":"scatters-brush","outputId":"scatters-plot1"}}}

Note that these were all sent as the result of a single brush event from my perspective.

@wch

This comment has been minimized.

Collaborator

wch commented Mar 29, 2017

Strange - that sounds like the debouncing wasn't working. Playing with it on Chrome/Mac/RSC, it seems like it debounces correctly most of the time, but sometimes it changes behavior and seems like it's throttled instead. I'll check it out.

@jcheng5

This comment has been minimized.

Member

jcheng5 commented Mar 29, 2017

No, I don't think it's a lack of debouncing, but rather that the xmax value isn't stable when renderPlot (re-)executes.

@jcheng5

This comment has been minimized.

Member

jcheng5 commented Mar 29, 2017

Maybe decreasing the precision on xmin/xmax/ymin/ymax will solve the problem.

@wch

This comment has been minimized.

Collaborator

wch commented Mar 29, 2017

But the debouncing shouldn't care if the xmin/max values are stable -- it shouldn't even call the function that retrieves the brush value until the brush stops moving for 0.25s (or whatever the threshold is).

I'm able to reproduce the problem (or my version of it, anyway) by doing the following: move the brush, then wait long enough for it to send the values to the server, then, before the server finishes making the new plots and sending them back, move the brush, and keep moving it. This is easier to do with options(shiny.trace=TRUE). My hunch is that the problem is due to the updated scatters-plot1, the one being brushed on. I think that when the client receives the updated plot, it starts a new debounce timer.

@wch

This comment has been minimized.

Collaborator

wch commented Mar 29, 2017

Also, this time I was testing locally with Chrome on my Mac.

@jcheng5

This comment has been minimized.

Member

jcheng5 commented Mar 29, 2017

I think in my case it's hitting this code path:

if (!opts.brushResetOnNew) {
if ($el.data("mostRecentBrush")) {
brush.importOldBrush();
brushInfoSender.immediateCall();
}
}

@jcheng5

This comment has been minimized.

Member

jcheng5 commented Mar 29, 2017

This is what I'm seeing: https://www.dropbox.com/sh/decrtetzzmq66bk/AACOMIlE_kGN0dahQSB46N9Oa?dl=0

Ignore the stray brush operation on the right plot at the very beginning, that's not necessary for the repro.

The flickering isn't usually this stable, it usually only goes 3-6 times and then stops. This time it went for several minutes until I stopped it. Also, it only seems to happen if I make the browser window relatively large, which I can't explain.

@wch

This comment has been minimized.

Collaborator

wch commented Mar 29, 2017

That looks different from the issue I was hitting, but I wonder if the root cause is the same.

I don't understand why it's redrawing the second plot every time. dataWithSelection() should return the same thing each time, so the output$plot2 shouldn't be invalidated, right?

linkedScatter <- function(input, output, session, data, left, right) {
  # Yields the data frame with an additional column "selected_"
  # that indicates whether that observation is brushed
  dataWithSelection <- reactive({
    brushedPoints(data(), input$brush, allRows = TRUE)
  })

  output$plot1 <- renderPlot({
    scatterPlot(dataWithSelection(), left())
  })

  output$plot2 <- renderPlot({
    scatterPlot(dataWithSelection(), right())
  })

  return(dataWithSelection)
}

https://github.com/rstudio/shiny-examples/blob/d9e4578/108-module-output/linked_scatter.R#L13-L29

@jcheng5

This comment has been minimized.

Member

jcheng5 commented Mar 29, 2017

It's not the same thing every time; input$brush$xmax is very slightly different each time (like by 0.00000000000001).

@jcheng5

This comment has been minimized.

Member

jcheng5 commented Mar 29, 2017

Oh it's slightly decreasing each time (from the example above):

"xmax":30.803468547912967
"xmax":30.803468547912963
"xmax":30.80346854791296
"xmax":30.803468547912956
"xmax":30.803468547912953
"xmax":30.80346854791295
"xmax":30.803468547912945
"xmax":30.803468547912942
"xmax":30.80346854791294
"xmax":30.803468547912935
"xmax":30.80346854791293
"xmax":30.803468547912928
"xmax":30.803468547912924
"xmax":30.80346854791292
"xmax":30.803468547912917
"xmax":30.803468547912914
"xmax":30.80346854791291
"xmax":30.803468547912906
"xmax":30.803468547912903
"xmax":30.8034685479129
"xmax":30.803468547912896
"xmax":30.803468547912892
"xmax":30.80346854791289
@wch

This comment has been minimized.

Collaborator

wch commented Mar 29, 2017

Yeah, but dataWithSelection() should return the same thing each time, right?

@jcheng5

This comment has been minimized.

Member

jcheng5 commented Mar 29, 2017

Yes. You're suggesting that the instability is entirely due to the client side re-using the brush?

Oh sorry. The second plot. I don't know.

Oh sorry, I do know. :) It doesn't matter if the results from dataWithSelection() are the same. Once the invalidation happens, the plot must redraw.

@wch

This comment has been minimized.

Collaborator

wch commented Mar 30, 2017

Here's a minimal app that reproduces the problem you described:

library(shiny)
library(ggplot2)
shinyApp(
  ui = fluidPage(
    plotOutput("p", brush = "brush", width = "400px"),
    verbatimTextOutput("showcount")
  ),
  server = function(input, output) {
    dataWithSelection <- reactive({
      brushedPoints(mtcars, input$brush, allRows = TRUE)
    })

    count <- reactiveVal(0)

    output$p <- renderPlot({
      isolate(count(count() + 1))

      ggplot(dataWithSelection(), aes(wt, mpg)) +
        geom_point(aes(color = selected_)) +
        scale_color_manual(values = c("black", "#66D65C"), guide = FALSE)
    })

    output$showcount <- renderText({
      paste("Number of redraws:", count())
    })
  }
)

The problem also happens on my Mac, with the RStudio viewer. It's just that normally, the update is fast enough that the redraw isn't noticeable.

@wch

This comment has been minimized.

Collaborator

wch commented Mar 30, 2017

Another test app, but with clicking (hovering is similar):

EDIT: it turns out that clicking/hovering doesn't cause spurious redraws. For clicking/hovering, the new plot doesn't cause the client to try to remap and recalculate x and y coordinates, and send them to the server.

library(shiny)
library(ggplot2)
shinyApp(
  ui = fluidPage(
    # plotOutput("p", brush = "brush", width = "400px"),
    plotOutput("p", click = "click", width = "400px"),
    verbatimTextOutput("showcount")
  ),
  server = function(input, output) {
    lastClick <- reactiveVal(NULL)
    observe({
      if (!is.null(input$click)) {
        lastClick(input$click)
      }
    })
    
    dataWithSelection <- reactive({
      # brushedPoints(mtcars, input$brush, allRows = TRUE)
      nearPoints(mtcars, lastClick(), allRows = TRUE)
    })

    count <- reactiveVal(0)

    output$p <- renderPlot({
      isolate(count(count() + 1))

      ggplot(dataWithSelection(), aes(wt, mpg)) +
        geom_point(aes(color = selected_)) +
        scale_color_manual(values = c("black", "#66D65C"), guide = FALSE)
    })

    output$showcount <- renderText({
      paste("Number of redraws:", count())
    })
  }
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment