posit-dev / posit-dev/shinylive

imageOutput coordinate interaction bug

Open
#170 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
251
Forks
25
Avg merge
19m
Merged PRs (30d)
2

Description

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")

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the provided R example with shinylive::export and compare it with the app run directly from R. Investigate the imageOutput click and brush interaction in the browser; done means the coordinate inputs update and the click-drag selection box appears in the exported app.

Written by the indexing model from the issue text.

Assessment

Tech stack
r, typescript, wasm
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.