Quarto Observable + Crosstalk

Observable and Crosstalk

Observable ojs cells and crosstalk can work together. I would not say it is intuitive, but below is an example using Observable Inputs.select to update crosstalk-linked reactable. Although Observable drives htmlwidget in this case, the communication could be the other way or bi-directional. Also this same mechanism could be employed with other crosstalk-enabled htmlwidgets, such as leaflet and plotly.

We first send state.name data to Observable from R with ojs_define. This is not necessary, but I wanted to reiterate that this is possible.

# send state names to Observable from R
ojs_define(stateNames = state.name)

Now we create the Observable multiple select using the stateNames supplied from R.

// use Observable select input to allow user to pick states
viewof selectedStates = Inputs.select(stateNames, {label: "Visited states", multiple: true})

Add a basic reactable on state.x77. Note since we do not supply a key in SharedData$new() the keys will be rownames(state.x77) which are the state names that populate the Observable selection output.

library(crosstalk)
library(reactable)

dat <- SharedData$new(state.x77)
reactable(dat)

We add some <script> for JavaScript, and this is where things get a little messy. See lines for the code to glue all this together.

code block here but not visible

JavaScript will not know our crosstalk group selection, so add it to window/global for reference in other JavaScript.

library(htmltools)
cat(as.character(
  tags$script(HTML(sprintf(
"
var crosstalk_select = new crosstalk.SelectionHandle('%s');
",
    dat$groupName()
  )))
))