Merge pull request #1178 from ropensci/v1.32.0

Bump plotly.js version

Author: cpsievert

NEWS.md

@@ -2,14 +2,16 @@
 
 ## NEW FEATURES & IMPROVEMENTS
 
+* Upgraded to plotly.js v1.33.1. A _huge_ amount of features and improvements have been made since v1.29.2 (i.e., the version included in the last CRAN release of the R package - v4.7.1). Highlights include a complete re-write of `scattergl` to make it nearly feature complete with `scatter`, localization of text rendering (i.e., international translations), and two new trace types (`violin` & `table`). Read more about the v1.32.0 release [here](https://codeburst.io/notes-from-the-latest-plotly-js-release-b035a5b43e21) and the complete list of changes [here](https://github.com/plotly/plotly.js/releases).
+* The selection mode can now switch from 'transient' to 'persistent' by holding the 'shift' key. It's still possible to _force_ persistent selection by setting `persistent = TRUE` in `highlight()`, but `persistent = FALSE` (the default) is now recommended since it allows one to switch between [persistent/transient selection](https://plotly-book.cpsievert.me/linking-views-without-shiny.html#transient-versus-persistent-selection) in the browser, rather than at the command line.
+
 ## CHANGES
 
 * The `elementId` field is no longer populated, which fixes the "Ignoring explicitly provided widget ID" warning in shiny applications (see #985).
-* Upgraded to plotly.js v1.31.2 -- https://github.com/plotly/plotly.js/releases/tag/v1.31.2
 
 ## BUG FIXES
 
-Fixed algorithm for coercing the proposed layout to the plot schema (see #1156).
+* Fixed algorithm for coercing the proposed layout to the plot schema (see #1156).
 
 # 4.7.1
 

R/ggplotly.R

@@ -46,18 +46,20 @@
 #' # linked scatterplot brushing
 #' library(crosstalk)
 #' d <- SharedData$new(mtcars)
-#' subplot(
-#'  qplot(data = d, x = mpg, y = wt),
-#'  qplot(data = d, x = mpg, y = vs)
-#' )
+#' qplot(data = d, x = mpg, y = wt) %>%
+#'   subplot(qplot(data = d, x = mpg, y = vs)) %>% 
+#'   layout(title = "Click and drag to select points") %>%
+#'   highlight("plotly_selected")
+#' 
 #' 
 #' # more brushing (i.e. highlighting) examples
 #' demo("crosstalk-highlight-ggplotly", package = "plotly")
 #' 
 #' # client-side linked brushing in a scatterplot matrix
 #' SharedData$new(iris) %>%
 #'   GGally::ggpairs(aes(colour = Species), columns = 1:4) %>%
-#'   ggplotly(tooltip = c("x", "y", "colour"))
+#'   ggplotly(tooltip = c("x", "y", "colour")) %>%
+#'   highlight("plotly_selected")
 #' }
 #'
 ggplotly <- function(p = ggplot2::last_plot(), width = NULL, height = NULL,

R/highlight.R

@@ -28,7 +28,10 @@
 #'  (i.e., clicking the home button in the modebar) or whenever the height/width
 #'  of the plot changes.
 #' }
-#' @param persistent should selections persist (i.e., accumulate)?
+#' @param persistent should selections persist (i.e., accumulate)? We often
+#' refer to the default (`FALSE`) as a 'transient' selection mode; 
+#' which is recommended, because one may switch from 'transient' to 
+#' 'persistent' selection by holding the shift key.
 #' @param dynamic should a widget for changing selection colors be included? 
 #' @param color character string of color(s) to use for 
 #' highlighting selections. See [toRGB()] for valid color
@@ -41,6 +44,7 @@
 #' @param opacityDim a number between 0 and 1 used to reduce the
 #' opacity of non-selected traces (by multiplying with the existing opacity).
 #' @param selected attributes of the selection, see [attrs_selected()].
+#' @param unselected attributes of the non-selected marks, see [attrs_unselected()].
 #' @param ... currently not supported.
 #' @export
 #' @author Carson Sievert
@@ -56,13 +60,11 @@
 #' d <- SharedData$new(txhousing, ~city)
 #' p <- ggplot(d, aes(date, median, group = city)) + geom_line()
 #' gg <- ggplotly(p, tooltip = "city") 
-#' highlight(gg, persistent = TRUE, dynamic = TRUE)
+#' highlight(gg, dynamic = TRUE)
 #' 
 #' # supply custom colors to the brush 
 #' cols <- toRGB(RColorBrewer::brewer.pal(3, "Dark2"), 0.5)
-#' highlight(
-#'   gg, on = "plotly_hover", color = cols, persistent = TRUE, dynamic = TRUE
-#' )
+#' highlight(gg, on = "plotly_hover", color = cols, dynamic = TRUE)
 #' 
 #' # Use attrs_selected() for complete control over the selection appearance
 #' # note any relevant colors you specify here should override the color argument
@@ -72,10 +74,7 @@
 #'   marker = list(symbol = "x")
 #' )
 #' 
-#' highlight(
-#'  layout(gg, showlegend = TRUE),  
-#'  selected = s, persistent = TRUE
-#' )
+#' highlight(layout(gg, showlegend = TRUE), selected = s)
 #' 
 
 highlight <- function(p, on = "plotly_click", off, 
@@ -102,12 +101,12 @@ highlight <- function(p, on = "plotly_click", off,
     stop("opacityDim must be between 0 and 1", call. = FALSE)
   }
   if (dynamic && length(color) < 2) {
-    message("Adding more colors to the selection color palette")
+    message("Adding more colors to the selection color palette.")
     color <- c(color, RColorBrewer::brewer.pal(4, "Set1"))
   }
   if (!dynamic && length(color) > 1) {
     warning(
-      "Can only use a single color for selections when dynamic=FALSE",
+      "Can only use a single color for selections when `dynamic = FALSE`.",
       call. = FALSE
     )
     color <- color[1] 
@@ -137,6 +136,14 @@ highlight <- function(p, on = "plotly_click", off,
     off <- default(off_default %||% "plotly_relayout")
   }
 
+  if (isTRUE(persistent)) {
+    message(
+      "We recommend setting `persistent` to `FALSE` (the default) because ",
+      "persistent selection mode can now be used by holding the shift key ",
+      "(while triggering the `on` event)."
+    )
+  }
+  
   # main (non-plotly.js) spec passed along to HTMLwidgets.renderValue()
   p$x$highlight <- list(
     # NULL may be used to disable on/off events

R/plotly.R

@@ -373,7 +373,7 @@ typedArrayPolyfill <- function() {
 # and bundle size at print time.
 plotlyMainBundle <- function() {
   htmltools::htmlDependency(
-    "plotlyjs", "1.31.2.9000",
+    "plotlyjs", "1.33.1",
     src = depPath("plotlyjs"),
     script = "plotly-latest.min.js",
     stylesheet = "plotly-htmlwidgets.css"

R/sysdata.rda

@@ -267,12 +267,6 @@ supply_defaults <- function(p) {
 supply_highlight_attrs <- function(p) {
   # set "global" options via crosstalk variable
   p$x$highlight <- p$x$highlight %||% highlight_defaults()
-  p <- htmlwidgets::onRender(
-    p, sprintf(
-      "function(el, x) { var ctConfig = crosstalk.var('plotlyCrosstalkOpts').set(%s); }", 
-      to_JSON(p$x$highlight)
-    )
-  )
 
   # defaults are now populated, allowing us to populate some other 
   # attributes such as the selectize widget definition

R/utils.R

@@ -3,15 +3,24 @@ library(crosstalk)
 library(plotly)
 
 d <- SharedData$new(mpg)
-dots <- plot_ly(d, color = ~class, x = ~displ, y = ~cyl)
-boxs <- plot_ly(d, color = ~class, x = ~class, y = ~cty) %>% add_boxplot()
-bars <- plot_ly(d, x = ~class, color = ~class)
+dots <- plot_ly(d, colors = "Set1", color = ~class, x = ~displ, y = ~cyl) %>%
+  layout(
+    xaxis = list(title = "Engine displacement"),
+    yaxis = list(title = "Number of cylinders")
+  )
+boxs <- plot_ly(d, colors = "Set1", color = ~class, x = ~class, y = ~cty) %>% 
+  add_boxplot() %>%
+  layout(
+    xaxis = list(title = ""),
+    yaxis = list(title = "Miles per gallon (city)")
+  )
+bars <- plot_ly(d, colors = "Set1", x = ~class, color = ~class)
 
 subplot(dots, boxs, titleX = TRUE, titleY = TRUE) %>%
   subplot(bars, nrows = 2, titleX = TRUE, titleY = TRUE) %>%
   layout(
-    title = "Click and drag on scatterplot",
+    title = "Dynamic 2-way ANOVA (clik & drag on scatterplot)",
     barmode = "overlay",
     showlegend = FALSE
   ) %>%
-  highlight("plotly_selected")
+  highlight("plotly_selected", opacityDim = 0.6)

demo/crosstalk-highlight-binned-target-a.R

@@ -10,7 +10,4 @@ p2 <- plot_ly(tx, x = ~median, color = I("black")) %>%
 
 subplot(gg1, p2, titleX = TRUE, titleY = TRUE) %>% 
   layout(barmode = "overlay") %>%
-  highlight(
-    dynamic = TRUE, persistent = TRUE, 
-    selected = attrs_selected(opacity = 0.3)
-  )
+  highlight(dynamic = TRUE, selected = attrs_selected(opacity = 0.3))

demo/crosstalk-highlight-binned-target-c.R

@@ -37,7 +37,6 @@ gg <- ggplotly(p, width = 1050, height = 600, tooltip = "team")
 
 highlight(
   gg, 
-  persistent = TRUE,
   dynamic = TRUE, 
   selectize = TRUE,
   color = RColorBrewer::brewer.pal(12, "Paired")

demo/crosstalk-highlight-epl-2.R

@@ -6,7 +6,7 @@ d <- SharedData$new(txhousing, ~city, "Select a city")
 p <- ggplot(d, aes(date, median, group = city)) + geom_line()
 ggplotly(p, tooltip = "city") %>%
   layout(title = "Click on a line to highlight a year") %>%
-  highlight(dynamic = TRUE, selectize = TRUE, persistent = TRUE)
+  highlight(dynamic = TRUE, selectize = TRUE)
 
 # crosstalk keys are automatically added to the group aesthetic...
 # if you want to avoid adding the key to group for a layer,

demo/crosstalk-highlight-ggplotly.R

@@ -46,9 +46,9 @@ p %>%
 
 # By default, all selections are transient, meaning prior selections are 
 # removed from the selection set before new selections are added. To prevent
-# prior selections from being removed, simply set the persistent argument to 
-# `TRUE`.
-highlight(p, on = "plotly_hover", persistent = TRUE)
+# prior selections from being removed, hold down the shift key while triggering
+# the event
+highlight(p, on = "plotly_hover")
 
 # Sometimes its useful to compare two or more different selection sets. 
 # For example, how do patients with a high response on visit 1 compare to those 
@@ -57,10 +57,10 @@ highlight(p, on = "plotly_hover", persistent = TRUE)
 # a colourpicker htmlwidget (@colourpicker) will appear just above the plotly 
 # visualization. At any given time, the value of this widget controls the 
 # color of new selection(s).
-highlight(p, on = "plotly_hover", persistent = TRUE, dynamic = TRUE)
+highlight(p, on = "plotly_hover", dynamic = TRUE)
 
 # By default, the colourpicker widget uses colors from the "Set1" 
 # colour brewer palette (@RColorBrewer), but any set of valid R colors can 
 # be supplied to the color argument.
 colors <- RColorBrewer::brewer.pal(4, "Dark2")
-highlight(p, on = "plotly_hover", color = colors, dynamic = TRUE, persistent = TRUE)
+highlight(p, on = "plotly_hover", color = colors, dynamic = TRUE)

demo/crosstalk-highlight-intro.R

@@ -5,9 +5,7 @@ library(crosstalk)
 library(htmltools)
 
 # leaflet should respect these "global" highlight() options
-options(
-  opacityDim = 1, persistent = TRUE
-)
+options(opacityDim = 0.5)
 
 sd <- SharedData$new(quakes)
 

demo/crosstalk-highlight-leaflet.R

@@ -24,4 +24,4 @@ p2 <- base %>%
  subplot(p1, p2, titleX = TRUE, widths = c(0.3, 0.7)) %>% 
   layout(margin = list(l = 120)) %>%
   hide_legend() %>%
-  highlight(dynamic = TRUE, persistent = TRUE, selectize = TRUE)
+  highlight(dynamic = TRUE, selectize = TRUE)

demo/crosstalk-highlight-pipeline.R

@@ -16,11 +16,36 @@ HTMLWidgets.widget({
   },  
 
   renderValue: function(el, x, instance) {
+    
+    /* 
+    / 'inform the world' about highlighting options this is so other
+    / crosstalk libraries have a chance to respond to special settings 
+    / such as persistent selection. 
+    / AFAIK, leaflet is the only library with such intergration
+    / https://github.com/rstudio/leaflet/pull/346/files#diff-ad0c2d51ce5fdf8c90c7395b102f4265R154
+    */
+    var ctConfig = crosstalk.var('plotlyCrosstalkOpts').set(x.highlight);
 
     if (typeof(window) !== "undefined") {
       // make sure plots don't get created outside the network (for on-prem)
       window.PLOTLYENV = window.PLOTLYENV || {};
       window.PLOTLYENV.BASE_URL = x.base_url;
+      
+      // Enable persistent selection when shift key is down
+      // https://stackoverflow.com/questions/1828613/check-if-a-key-is-down
+       var persistOnShift = function(e) {
+        if (!e) window.event;
+        if (e.shiftKey) { 
+          x.highlight.persistent = true; 
+        } else {
+          x.highlight.persistent = false; 
+        }
+      };
+      
+      // Only relevant if we haven't forced persistent mode at command line
+      if (!x.highlight.persistent) {
+        window.onmousemove = persistOnShift;
+      }
     }
 
     var graphDiv = document.getElementById(el.id);
@@ -431,15 +456,7 @@ HTMLWidgets.widget({
           }
         });
       }
-      
-      
-      
-      
-      
-          
-      
-      
-    }
+    } // end of selectionChange
 
   } // end of renderValue
 }); // end of widget definition
@@ -551,9 +568,6 @@ TraceManager.prototype.updateSelection = function(group, keys) {
     var selectionColour = crosstalk.group(group).var("plotlySelectionColour").get() || 
       this.highlight.color[0];
 
-    // selection brush attributes
-    var selectAttrs = Object.keys(this.highlight.selected);
-
     for (var i = 0; i < this.origData.length; i++) {
       // TODO: try using Lib.extendFlat() as done in  
       // https://github.com/plotly/plotly.js/pull/1136 
@@ -570,50 +584,31 @@ TraceManager.prototype.updateSelection = function(group, keys) {
         if (!trace._isSimpleKey) {
           trace = subsetArrayAttrs(trace, matches);
         }
-        // Apply selection brush attributes (supplied from R)
-        // TODO: it would be neat to have a dropdown to dynamically specify these
-        for (var j = 0; j < selectAttrs.length; j++) {
-          var attr = selectAttrs[j];
-          trace[attr] = this.highlight.selected[attr];
-        }
+        // reach into the full trace object so we can properly reflect the 
+        // selection attributes in every view
+        var d = this.gd._fullData[i];
+        
+        /* 
+        / Recursively inherit selection attributes from various sources, 
+        / in order of preference:
+        /  (1) official plotly.js selected attribute
+        /  (2) highlight(selected = attrs_selected(...))
+        */
+        // TODO: it would be neat to have a dropdown to dynamically specify these!
+        $.extend(true, trace, this.highlight.selected, d.selected);
 
         // if it is defined, override color with the "dynamic brush color""
-        // TODO: DRY this up
-        var d = this.gd._fullData[i];
         if (d.marker) {
           trace.marker = trace.marker || {};
           trace.marker.color =  selectionColour || trace.marker.color || d.marker.color;
-          
-          // adopt any user-defined styling for the selection
-          var selected = this.highlight.selected.marker || {};
-          var attrs = Object.keys(selected);
-          for (var j = 0; j < attrs.length; j++) {
-            trace.marker[attrs[j]] = selected[attrs[j]];
-          }
         }
-        
         if (d.line) {
           trace.line = trace.line || {};
           trace.line.color =  selectionColour || trace.line.color || d.line.color;
-          
-          // adopt any user-defined styling for the selection
-          var selected = this.highlight.selected.line || {};
-          var attrs = Object.keys(selected);
-          for (var j = 0; j < attrs.length; j++) {
-            trace.line[attrs[j]] = selected[attrs[j]];
-          }
         }
-        
         if (d.textfont) {
           trace.textfont = trace.textfont || {};
           trace.textfont.color =  selectionColour || trace.textfont.color || d.textfont.color;
-          
-          // adopt any user-defined styling for the selection
-          var selected = this.highlight.selected.textfont || {};
-          var attrs = Object.keys(selected);
-          for (var j = 0; j < attrs.length; j++) {
-            trace.textfont[attrs[j]] = selected[attrs[j]];
-          }
         }
         // attach a sensible name/legendgroup
         trace.name = trace.name || keys.join("<br />");
@@ -712,6 +707,9 @@ TraceManager.prototype.updateSelection = function(group, keys) {
 
       if (tracesToDim.length > 0) {
         Plotly.restyle(this.gd, {"opacity": opacities}, tracesToDim);
+        // this is an unfortunate consequence of the selected/unselected API
+        // https://codepen.io/cpsievert/pen/opOawp
+        Plotly.restyle(this.gd, {"unselected": {"marker": {"opacity": 1}}});
       }
 
     }

inst/htmlwidgets/lib/plotlyjs/plotly-latest.min.js

@@ -1,6 +1,6 @@
 library(httr)
 # download latest GitHub release
-# for a particular version: `zip <- "https://github.com/plotly/plotly.js/archive/v1.25.0.zip"`
+# for a particular version: `zip <- "https://github.com/plotly/plotly.js/archive/v1.33.1.zip"`
 x <- GET('https://api.github.com/repos/plotly/plotly.js/releases/latest')
 zip <- content(x)$zipball_url
 tmp <- tempfile(fileext = ".zip")