feat: add nonce option to events

upsetjs · May 9, 2022 · 49acd43 · 49acd43
1 parent d40929e
commit 49acd43
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/R/selection.R b/R/selection.R
@@ -30,15 +30,22 @@ setSelection <- function(upsetjs, name = NULL) {
 #' make it an interactive chart
 #' @param upsetjs an object of class \code{upsetjs} or \code{upsetjs_proxy}
 #' @param value whether to enable or disable or set the mode: hover, click, contextMenu
+#' @param events_nonce whether to enable send a unique once (event date) for each event to prevent deduplication
 #' @return the object given as first argument
 #' @examples
 #' upsetjs() %>%
 #'   fromList(list(a = c(1, 2, 3), b = c(2, 3))) %>%
 #'   interactiveChart()
 #' @export
-interactiveChart <- function(upsetjs, value = TRUE) {
+interactiveChart <- function(upsetjs, value = TRUE, events_nonce = FALSE) {
   checkUpSetCommonArgument(upsetjs)
   stopifnot(is.logical(value) || (value %in% c("hover", "click", "contextMenu")), length(value) == 1)
 
-  setProperty(upsetjs, "interactive", value)
+  setProperties(
+    upsetjs,
+    list(
+      interactive = value,
+      events_nonce = events_nonce
+    )
+  )
 }
diff --git a/js/htmlwidget.ts b/js/htmlwidget.ts
@@ -19,6 +19,7 @@ declare type CrosstalkOptions = {
 
 declare type ShinyUpSetProps = RBindingUpSetProps & {
   crosstalk?: CrosstalkOptions;
+  events_nonce?: boolean;
 };
 
 declare type CrosstalkHandler = {
@@ -33,8 +34,10 @@ function isShinyMode(): boolean {
 
 function toShinyEventData(
   set: (ISetLike<string> & { setNames?: string[] | undefined }) | null,
-  selected?: ISetLike<string> | readonly string[] | null
+  selected?: ISetLike<string> | readonly string[] | null,
+  events_nonce = false
 ): any {
+  const nonce = events_nonce ? Date.now() : null;
   if (!set) {
     return {
       name: null,
@@ -43,6 +46,7 @@ function toShinyEventData(
       isSelected: selected == null,
       type: null,
       elems: [],
+      nonce,
     };
   }
 
@@ -60,6 +64,7 @@ function toShinyEventData(
       cleanSelected.cardinality === set.cardinality,
     type: set.type,
     elems: set.elems || [],
+    nonce,
   };
 }
 
@@ -96,7 +101,10 @@ HTMLWidgets.widget({
     function createHandler(mode: 'hover' | 'click' | 'contextMenu') {
       return (set: (ISetLike<Elem> & { setNames?: string[] }) | null) => {
         if (isShinyMode()) {
-          Shiny.onInputChange(`${el.id}_${mode}`, toShinyEventData(set, context.props.selection as ISetLike<string>));
+          Shiny.onInputChange(
+            `${el.id}_${mode}`,
+            toShinyEventData(set, context.props.selection as ISetLike<string>, context.useNonce)
+          );
         }
         const crosstalk = crosstalkHandler && crosstalkHandler.mode === mode;
         if (crosstalk && crosstalkHandler) {

diff --git a/js/model.ts b/js/model.ts
@@ -94,6 +94,7 @@ export interface RenderContext {
   attrs: UpSetAttrSpec[];
   interactive: false | 'hover' | 'click' | 'contextMenu';
   renderMode: 'upset' | 'venn' | 'euler' | 'kmap';
+  useNonce: boolean;
 }
 
 export function createContext(
@@ -105,6 +106,7 @@ export function createContext(
   return {
     interactive: interactive ? 'hover' : false,
     renderMode: 'upset',
+    useNonce: false,
     elemToIndex: new Map<Elem, number>(),
     attrs: [],
     props: {
@@ -130,6 +132,9 @@ export function fixProps(context: RenderContext, delta: any, append = false) {
   if (typeof delta.interactive === 'boolean' || typeof delta.interactive === 'string') {
     context.interactive = typeof delta.interactive === 'boolean' ? 'hover' : delta.interactive;
   }
+  if (typeof delta.events_nonce === 'boolean') {
+    context.useNonce = delta.events_nonce;
+  }
   const expressionData = delta.expressionData;
   if (typeof delta.renderMode === 'string') {
     context.renderMode = delta.renderMode;