posit-dev / shinylive

Run Shiny on Python and R (compiled to wasm) in the browser
https://shinylive.io/py/examples/
MIT License
200 stars 15 forks source link

imageOutput coordinate interaction bug #170

Open rmcminds opened 1 month ago

rmcminds commented 1 month ago

Hello - I have an app that uses imageOutput with options 'click' and 'brush' to retrieve coordinates from a photo. The app works great when run directly from R, but once I export it with shinylive, the interactivity with the photo disappears. Not only do the input values not seem to update, the visual box that is normally created when clicking and dragging does not appear in the shinylive version.

Interestingly, the cursor does seem to have the expected '+' shape on initial load, but goes back to the standard arrow once it is moved.

Simple example:

library(shiny)

ui <- fluidPage(

  sidebarLayout(

    mainPanel(

      imageOutput("current_photo",
                  click = "photo_click",
                  brush = "photo_brush"
      )

    ),

    sidebarPanel(

      verbatimTextOutput("info")

    )
  )
)

server <- function(input, output, session) {

  output$current_photo <- renderImage({

    list(src = 'photo_1_fish.jpg',
         width = '100%')

  }, deleteFile = FALSE)

  output$info <- renderText({

    paste0(
      "click-x: ", input$photo_click$x, '\n',
      "brush-xmin: ", input$photo_brush$xmin
    )

  })
}

shinyApp(ui, server)

#shinylive::export("~/test",  "~/ex_coord")
rmcminds commented 3 weeks ago

Hello, checking in on this to see if anyone has thoughts on this issue. I haven't had any success tracking the issue down with the developer tools in Chrome, except finding an inherited 'clip' value for the photo containers which seems to be different for shinylive compared to runApp(). I'm able to change that with CSS and register that clicks happen anywhere in the photo, but the click coordinates are still not saved unless they occur in a small box in the upper left corner.

If anything else is needed to reproduce the issue, I'm happy to provide it. I have the buggy shinylive app hosted at https://thecnidaegritty.org/photo_annotator/ and the working source code at https://github.com/McMinds-Lab/USF_Library_Ogden_Collection_resources/tree/main/shiny_annotation

Thanks!