Merge pull request #104 from animint/feature-fill-off

Support for feature `fill_off`

Author: Faye-yufan

NEWS.md

@@ -1,3 +1,7 @@
+# Changes in 2023.10.6
+
+- User-configurable selection style - fill_off.
+
 # Changes in 2023.6.11
 
 - Remove maptools dependency.
@@ -12,9 +16,6 @@
 # Changes in 2022.9.14
 
 - Include Yufan Fei as contributor in DESCRIPTION.
-
-# Changes in 2022.9.14
-
 - Allow configurable legend/axis text size via theme.
 
 # Changes in 2022.8.31
@@ -92,4 +93,4 @@
 
 # Changes in 2017.08.24
 
-- DSL: clickSelects/showSelected are now specified as parameters rather than aesthetics.
+- DSL: clickSelects/showSelected are now specified as parameters rather than aesthetics.

R/geom-.r

@@ -307,7 +307,7 @@ Geom <- gganimintproto("Geom",
     g.data <- processed_values$g.data
 
     ## Check g.data for color/fill - convert to hexadecimal so JS can parse correctly.
-    for(color.var in c("colour", "color", "fill", "colour_off", "color_off")){
+    for(color.var in c("colour", "color", "fill", "colour_off", "color_off", "fill_off")){
       if(color.var %in% names(g.data)){
         g.data[,color.var] <- toRGB(g.data[,color.var])
       }
@@ -330,6 +330,14 @@ Geom <- gganimintproto("Geom",
       warning(sprintf("%s has %s which is not used because this geom has no clickSelects; please specify clickSelects or remove %s",
       g$classed, paste(off.vec, collapse=", "), paste(off.vec, collapse=", ")))
     }
+
+    ## raise warning for geoms does not support fill
+    has.fill.off <- any(names(g$params) == "fill_off")
+    no.fill.geom <- c("path", "line", "segment", "linerange", "hline", "vline")
+    if (g$geom %in% no.fill.geom && has.fill.off) {
+      g$params <- g$params[!names(g$params) %in% "fill_off"]
+      warning(sprintf("%s has fill_off which is not supported.", g$classed))
+    }
     ## TODO: coord_transform maybe won't work for
     ## geom_dotplot|rect|segment and polar/log transformations, which
     ## could result in something nonlinear. For the time being it is

inst/htmljs/animint.js

@@ -184,25 +184,35 @@ var animint = function (to_select, json_file) {
     // geom. This is a hack and should be removed when we implement
     // the selected.color, selected.size, etc aesthetics.
     //
-    // 2022.08.01 update: get rid of the hack of "rect stroke" to 
-    // implement a general function for alpha_off, color_off. 
+    // 2022.08.01 update: get rid of the hack of "rect stroke" to
+    // implement a general function for alpha_off, color_off.
     // In order to have multiple styles functioning together
-    // so here use array to store the styles.   
+    // so here use array to store the styles.
     // Default using alpha/opacity style, execpt rect/tile geom
     // rect/tile geom default using stroke style
+    const checkProperty = (prop) =>
+      g_info.params.hasOwnProperty(prop) || g_info.aes.hasOwnProperty(prop);
+
     let select_styles = [];
-    let has_colour_off = g_info.params.hasOwnProperty("colour_off") || g_info.aes.hasOwnProperty("colour_off");
-    let has_alpha_off = g_info.params.hasOwnProperty("alpha_off") || g_info.aes.hasOwnProperty("alpha_off");
-    if(has_colour_off || g_info.geom == "rect"){
-      select_styles.push("stroke");
-    } 
-    if (has_alpha_off){
-      select_styles.push("opacity");
-    } 
-    if (!has_colour_off && !has_alpha_off && !select_styles.length){
-      select_styles = ["opacity"];
+    const has_colour_off = checkProperty('colour_off');
+    const has_alpha_off = checkProperty('alpha_off');
+    const has_fill_off = checkProperty('fill_off');
+
+    if (has_colour_off || g_info.geom === 'rect') {
+      select_styles.push('stroke');
+    }
+    if (has_alpha_off) {
+      select_styles.push('opacity');
     }
+    if (has_fill_off) {
+      select_styles.push('fill');
+    }
+    if (!select_styles.length) {
+      select_styles = ['opacity'];
+    }
+
     g_info.select_style = select_styles;
+
     // Determine if data will be an object or an array.
     if(g_info.geom in data_object_geoms){
       g_info.data_is_object = true;
@@ -228,8 +238,8 @@ var animint = function (to_select, json_file) {
       g_info.common_tsv = common_tsv;
       var common_path = getTSVpath(common_tsv);
       d3.tsv(common_path, function (error, response) {
-	var converted = convert_R_types(response, g_info.types);
-	g_info.data[common_tsv] = nest_by_group.map(converted);
+        var converted = convert_R_types(response, g_info.types);
+        g_info.data[common_tsv] = nest_by_group.map(converted);
       });
     } else {
       g_info.common_tsv = null;
@@ -1184,6 +1194,16 @@ var animint = function (to_select, json_file) {
       fill = g_info.params.colour;
     }
 
+    const get_fill_off = function (d) {
+      let off_fill;
+      if (aes.hasOwnProperty("fill_off") && d.hasOwnProperty("fill_off")) {
+        off_fill = d["fill_off"];
+      } else if (g_info.params.hasOwnProperty("fill_off")) {
+        off_fill = g_info.params.fill_off;
+      }
+      return off_fill;
+    };
+
     // For aes(hjust) the compiler should make an "anchor" column.
     var text_anchor = "middle";
     if(g_info.params.hasOwnProperty("anchor")){
@@ -1219,6 +1239,9 @@ var animint = function (to_select, json_file) {
       if(!g_info.select_style.includes("opacity")){
         e.style("opacity", get_alpha);
       }
+      if(!g_info.select_style.includes("fill")){
+        e.style("fill", get_fill);
+      }
     };
     if(g_info.data_is_object) {
 
@@ -1487,7 +1510,6 @@ var animint = function (to_select, json_file) {
       eActions = function (e) {
         e.attr("x", toXY("x", "x"))
           .attr("y", toXY("y", "y"))
-          .style("fill", get_colour)
           .attr("font-size", get_size)
           .style("text-anchor", get_text_anchor)
           .attr("transform", get_angle)
@@ -1503,7 +1525,6 @@ var animint = function (to_select, json_file) {
         e.attr("cx", toXY("x", "x"))
         .attr("cy", toXY("y", "y"))
         .attr("r", get_size)
-        .style("fill", get_fill)
         .style("stroke-width", get_stroke_width);
       select_style_fun(g_info, e);
       };
@@ -1518,7 +1539,6 @@ var animint = function (to_select, json_file) {
           })
           .attr("y", scales.y.range()[1])
           .attr("height", scales.y.range()[0] - scales.y.range()[1])
-          .style("fill", get_fill)
           .style("stroke-dasharray", get_dasharray)
           .style("stroke-width", get_size);
           select_style_fun(g_info, e);
@@ -1534,7 +1554,6 @@ var animint = function (to_select, json_file) {
           })
           .attr("x", scales.x.range()[0])
           .attr("width", scales.x.range()[1] - scales.x.range()[0])
-          .style("fill", get_fill)
           .style("stroke-dasharray", get_dasharray)
           .style("stroke-width", get_size);
           select_style_fun(g_info, e);
@@ -1560,7 +1579,6 @@ var animint = function (to_select, json_file) {
           })
           .style("stroke-dasharray", get_dasharray)
           .style("stroke-width", get_size)
-          .style("fill", get_fill);
           select_style_fun(g_info, e);
       };
       eAppend = "rect";
@@ -1626,7 +1644,6 @@ var animint = function (to_select, json_file) {
           })
           .style("stroke-dasharray", get_dasharray)
           .style("stroke-width", get_size)
-          .style("fill", get_fill);
           select_style_fun(g_info, e);
         e.append("line")
           .attr("x1", function (d) {
@@ -1659,11 +1676,13 @@ var animint = function (to_select, json_file) {
       var selected_funs = function(style_name, select_fun){
         style_on_funs = {
           "opacity": get_alpha,
-          "stroke": get_colour
+          "stroke": get_colour,
+          "fill": get_fill
         };
         style_off_funs = {
           "opacity": get_alpha_off,
-          "stroke": get_colour_off
+          "stroke": get_colour_off,
+          "fill": get_fill_off
         };
         if(select_fun == "mouseout"){
           return function (d) {
@@ -1752,8 +1771,13 @@ var animint = function (to_select, json_file) {
 	});
       }
     }else{//has neither clickSelects nor clickSelects.variable.
-      elements.style("opacity", get_alpha)
-      if(g_info.geom != "text"){
+      elements.style("opacity", get_alpha);
+      // geom_segment/linerange/hline/vline no `stroke` with no clickSelects
+      const excludedGeoms = ["segment", "linerange", "hline", "vline"];
+      if (!excludedGeoms.includes(g_info.geom)) {
+          elements.style("fill", get_fill);
+      }
+      if(g_info.geom != "text"){ // geom_text no `stroke` with no clickSelects
         elements.style("stroke", get_colour);
       }
     }

tests/testthat/test-renderer2-fill.R

@@ -0,0 +1,148 @@
+acontext("fill_off")
+
+#
+# Test geoms with both fill and colour styles
+#
+viz.point <- list(
+  defaultAlphaOff = ggplot() +
+    geom_point(
+      data = mtcars,
+      size = 10,
+      aes(
+        x = wt, y = mpg,
+        colour = disp
+      ),
+      clickSelects = "gear"
+    ) +
+    ggtitle("default alpha_off(0.5) style"),
+  fillOffSpecified = ggplot() +
+    geom_point(
+      data = mtcars,
+      fill_off = "transparent",
+      size = 10,
+      aes(
+        x = wt, y = mpg,
+        fill = disp
+      ),
+      clickSelects = "gear"
+    ) +
+    ggtitle("colour corresponding to `disp` group, fill_off=\"transparent\" "),
+  fillAndAlphaOff = ggplot() +
+    geom_point(
+      data = mtcars,
+      alpha_off = 0.5,
+      fill_off = "grey",
+      size = 10,
+      aes(
+        x = wt, y = mpg,
+        fill = disp,
+        id = paste0("fillAndAlphaOff_disp", disp, "gear", gear, "wt", wt)
+      ),
+      clickSelects = "gear"
+    ) +
+    ggtitle("fill_off + alpha_off")
+)
+
+viz_info <- animint2HTML(viz.point)
+
+test_that("fill_off only changes fill when clicked, colour does not change", {
+  point.xpath <- '//svg[@id="plot_fillAndAlphaOff"]//circle[@id="fillAndAlphaOff_disp275.8gear3wt3.73"]'
+  circle.list <- getNodeSet(viz_info$html, point.xpath)
+  before.click.color <- getStyleValue(viz_info$html, point.xpath, "stroke")
+  before.click.fill <- getStyleValue(viz_info$html, point.xpath, "fill")
+
+  clickID("fillAndAlphaOff_disp275.8gear3wt3.73")
+  html <- getHTML()
+  after.click.color <- getStyleValue(html, point.xpath, "stroke")
+  after.click.fill <- getStyleValue(html, point.xpath, "fill")
+
+  expect_false(isTRUE(all.equal(before.click.fill, after.click.fill)))
+  expect_color(after.click.color, before.click.color)
+})
+
+test_that("fill and color are not same", {
+  point.xpath <- '//svg[@id="plot_fillAndAlphaOff"]//circle[@class="geom"]'
+  circle.list <- getNodeSet(viz_info$html, point.xpath)
+  circle.color <- getStyleValue(viz_info$html, point.xpath, "stroke")
+  circle.fill <- getStyleValue(viz_info$html, point.xpath, "fill")
+  expect_false(isTRUE(all.equal(circle.color, circle.fill)))
+})
+
+rect.data <- data.frame(
+  xmin = c(1, 3, 5),
+  xmax = c(2, 4, 6),
+  ymin = c(1, 2, 3),
+  ymax = c(2, 3, 4),
+  category = c("A", "B", "C")
+)
+
+viz.rect <- list(rectFillOff = ggplot() +
+  geom_rect(
+    data = rect.data, aes(
+      xmin = xmin, xmax = xmax, ymin = ymin, ymax = ymax,
+      id = paste0("rectFillOff_", category)
+    ),
+    color = "black", fill = "blue", fill_off = "transparent", clickSelects = "category"
+  ))
+
+viz_info <- animint2HTML(viz.rect)
+
+test_that("with fill_off, fill changes when clicked", {
+  rect_xpath <- '//svg[@id="plot_rectFillOff"]//rect[@id="rectFillOff_A"]'
+
+  rect_list <- getNodeSet(viz_info$html, rect_xpath)
+
+  before_click_color <- getStyleValue(viz_info$html, rect_xpath, "stroke")
+  before_click_fill <- getStyleValue(viz_info$html, rect_xpath, "fill")
+
+  clickID("rectFillOff_B")
+
+  html <- getHTML()
+
+  after_click_color <- getStyleValue(html, rect_xpath, "stroke")
+  after_click_fill <- getStyleValue(html, rect_xpath, "fill")
+  expect_false(isTRUE(all.equal(before_click_fill, after_click_fill)))
+})
+
+vline.data <- data.frame(
+  xintercept = c(1, 2, 3),
+  category = c("A", "B", "C")
+)
+
+viz.vline <- list(
+  v = ggplot() +
+    geom_vline(
+      data = vline.data, aes(xintercept = xintercept, key = category,
+      id = paste0("v_", category)),
+      fill = "blue", fill_off = "grey", clickSelects = "category"
+    ) +
+    ggtitle("Click to Select a Vertical Line")
+)
+
+test_that("Warning message shows up when using fill_off parameter with geom_vline", {
+  expect_warning(
+    animint2HTML(viz.vline),
+    "geom1_vline_v has fill_off which is not supported."
+  )
+})
+
+test_that("When using fill_off and clickSelects parameter with geom_vline, use default(alpha) selection style", {
+  viz_info <- animint2HTML(viz.vline)
+  
+  vline_xpath <- '//g[@class="geom1_vline_v"]//line[@id="v_A"]'
+  
+  before_click_color <- getStyleValue(viz_info$html, vline_xpath, "stroke")
+  before_click_opacity <- getStyleValue(viz_info$html, vline_xpath, "opacity")
+  
+  clickID("v_B")
+  
+  html <- getHTML()
+  after_click_color <- getStyleValue(html, vline_xpath, "stroke")
+  after_click_opacity <- getStyleValue(html, vline_xpath, "opacity")
+ 
+  expect_color(before_click_color, "black")
+  expect_color(after_click_color, before_click_color)
+
+  expect_equal(before_click_opacity, "1")
+  expect_equal(after_click_opacity, "0.5")
+})