Shiny inline input/outputs

[gadenbuie]

https://twitter.com/sharlagelfand/status/1271209025926037505
http://worrydream.com/Tangle/

Easy

• Click inputs

Need some thought

• Drag inputs
• Slider inputs
• Dropdown inputs
• Text inputs

I need to think a little more about these inputs. The click input doesn't modify the HTML element, all of the updates are handled by Shiny. But for a text input (inline modifiable text), the update could be from the server or the user and these probably need to be structure more like a typical Shiny input.

Also how should the options, initial values, etc. for sliders and drop-down menus be set?

One thought would be have special syntax for these elements, e.g.: {{.dropdown pet}} and then use a separate function in the UI epoxyHTMLOptions() to set the choices for the pet drop down. Rather than updating these values via renderEpoxyHTML(), there would be a separate server-side function updateEpoxyDropdown() to change choice values or the current choice.

Tasks

• Ensure that it works with modules

[gadenbuie]

Here's a very simple demo app using precip

library(shiny)

ui <- fluidPage(
  h2("Is it rainy there?"),
  epoxyHTML(
    .id = "demo",
    .watch = list(click = "city"),
    "<p>If you lived in {{city}}, ", 
    "you'd see an average of {{rain}} inches of rain each year.</p>"
  ),
  tags$style(
    # not necessary, just looks cool
    '[data-epoxy-input-click]:hover { background-color: #fcf0cb; }'
  )
)

server <- function(input, output, session) {
  city <- reactive({
    input$demo_city_clicked
    sample(names(precip), 1)
  })
  
  output$demo <- renderEpoxyHTML(
    city = city(),
    rain = precip[city()]
  )
}

shinyApp(ui, server)

[gadenbuie]

Here's a demo of epoxyInlineText()

[gadenbuie]

@senthilthyagarajan thanks for being brave and trying this out. Which version of epoxy did you install? That output is what I would expect from the main branch. To install the version in this PR branch, use

remotes::install_github("gadenbuie/epoxy@shiny-inline-inputs")

[senthilthyagarajan]

If I can ask another question here. This works fine in a normal app. As soon as I use it with modules in a shiny app it doesn't work. Unfortunately, the code for my app is too huge to be minimized and shared here. I pass the input via the server when I call my module. I have the module where I get the output and then pass it to my UI function but it doesn't seem to work that way.

[gadenbuie]

@senthilthyagarajan Thanks for letting me know. It's still early days for this so I don't recommend you use this in production yet. I'm definitely going to change the API for the rotating-click input and it's possible that the entire API might change as I work on this. I've added a note to make sure this works for modules and you're subscribed to the PR so you'll get notified when I make updates 😄

In principle, though, I would think that this should work out of the box with modules. I just created a test app using modules and it worked as expected for me.

[senthilthyagarajan]

Thanks @gadenbuie . So what this has done for us is cut down 100 lines of data summary to one line and our team totally loves it :)

I would like to test the modules and see if that works for us and based on your changes I would definitely like to know how this goes on.

[gadenbuie]

Just added epoxyInlineClickChoice(), click, or press Enter or Space when focused, to cycle through the options.

Also comes with updateEpoxyInlineClickChoice().

Demo App

library(shiny)
library(epoxy)

ui <- fluidPage(
  h2("What's your favorite fruit?"),
  epoxyHTML(
    .id = "demo",
    "<p>My favorite fruit is <strong>",
    epoxy:::epoxyInlineClickChoice(
      "fruit",
      "Name of your favorite fruit",
      sample(stringr::fruit, 20)
    ),
    ".</strong></p>"
  ),
  verbatimTextOutput("debug")
)

server <- function(input, output, session) {
  output$debug <- renderPrint(input$fruit)
}

shinyApp(ui, server)

[sharlagelfand]

I know you know I'm using this, but I'm using it with updateEpoxyInlineClickChoice() now too! 🎉 Works great with multiple inputs and calculated outputs inline too 🙏

Deployed here, UI, server.

Thanks for your work on this!! 🚀

[gadenbuie]

https://github.com/FWeinb/Scrubbing.js