layout ggplots in a table

.gitignore

@@ -10,3 +10,4 @@
 *ANIMINT_TEST_FOO
 *pids.txt
 *~
+test-renderer1-knit-print.R

R/theme.r

@@ -353,18 +353,18 @@ print.theme <- function(x, ...) utils::str(x)
 #' }
 theme <- function(..., complete = FALSE, validate = TRUE) {
   elements <- list(...)
-
+  
   if (!is.null(elements$axis.ticks.margin)) {
     warning("`axis.ticks.margin` is deprecated. Please set `margin` property ",
       " of `axis.text` instead", call. = FALSE)
     elements$axis.ticks.margin <- NULL
   }
-
+  
   # Check that all elements have the correct class (element_text, unit, etc)
   if (validate) {
     mapply(validate_element, elements, names(elements))
   }
-
+  
   structure(elements, class = c("theme", "gganimint"),
             complete = complete, validate = validate)
 }
@@ -494,7 +494,7 @@ update_theme <- function(oldtheme, newtheme) {
   # the default theme -- just replace everything with newtheme
   if (attr(newtheme, "complete"))
     return(newtheme)
-
+  
   # These are elements in newtheme that aren't already set in oldtheme.
   # They will be pulled from the default theme.
   newitems <- !names(newtheme) %in% names(oldtheme)

R/z_animint.R

@@ -37,7 +37,7 @@ parsePlot <- function(meta, plot, plot.name){
   ## Now ggplot specifies panel.margin in 'pt' instead of 'lines'
   plot.info$panel_margin_lines <- pt.to.lines(theme.pars$panel.margin)
 
-  ## No legend if theme(legend.postion="none").
+  ## No legend if theme(legend.position="none").
   plot.info$legend <- if(theme.pars$legend.position != "none"){
     getLegendList(built)
   }
@@ -103,7 +103,7 @@ parsePlot <- function(meta, plot, plot.name){
   # extract minor grid lines
   plot.info$grid_minor <- get_grid(theme.pars$panel.grid.minor, theme.pars,
                                    plot.info, meta, built, major = F)
-
+  theme <- plot_theme(built$plot)
   ## Flip labels if coords are flipped - transform does not take care
   ## of this. Do this BEFORE checking if it is blank or not, so that
   ## individual axes can be hidden appropriately, e.g. #1.
@@ -200,7 +200,8 @@ parsePlot <- function(meta, plot, plot.name){
   options_list <- getWidthAndHeight(plot$theme)
   options_list <- setUpdateAxes(plot$theme, options_list)
   plot.info$options <- options_list
-
+  plot.info$attributes <- theme_attribute(plot$theme)
+
   list(
     plot.info=plot.info,
     ggplot=plot,
@@ -354,11 +355,24 @@ animint2dir <- function(plot.list, out.dir = NULL,
   ## Call ggplot_build in parsPlot for all ggplots
   ggplot.list <- list()
   AllPlotsInfo <- list()
+  custom_layout <- FALSE
   for(list.name in names(plot.list)){
     p <- plot.list[[list.name]]
     if(is.ggplot(p)){
       ## If plot is correct, save to meta for further processing
       parsed_info <- parsePlot(meta, p, list.name) # calls ggplot_build.
+      if (!is.null(parsed_info$plot.info$position$row) && is.null(parsed_info$plot.info$position$col)) {
+        stop("You passed row but not the col argument for ",parsed_info$plot.info$title)
+      }
+      if (!is.null(parsed_info$plot.info$position$col) && is.null(parsed_info$plot.info$position$row)) {
+        stop("You passed col but not the row argument for ",parsed_info$plot.info$title)
+      }
+      if (!is.null(parsed_info$plot.info$position$row) && !is.null(parsed_info$plot.info$position$col)){
+        custom_layout<- TRUE
+      }
+      if (is.null(parsed_info$plot.info$position$row) && is.null(parsed_info$plot.info$position$col) && custom_layout){
+        stop("You passed col and row for some plots and not for others, please pass for all or none")
+      }
       AllPlotsInfo[[list.name]] <- parsed_info$plot.info
       ggplot.list[[list.name]]$ggplot <- parsed_info$ggplot
       ggplot.list[[list.name]]$built <- parsed_info$built
@@ -638,7 +652,6 @@ animint2dir <- function(plot.list, out.dir = NULL,
       stop("missing first selector variable")
     }
   }
-
   meta$plots <- AllPlotsInfo
   meta$time <- AnimationInfo$time
   meta$timeValues <- AnimationInfo$timeValues
@@ -692,7 +705,6 @@ getLegendList <- function(plistextra){
   title <- theme$legend.title
   # by default, guide boxes are vertically aligned
   if(is.null(theme$legend.box)) theme$legend.box <- "vertical" else theme$legend.box
-
   # size of key (also used for bar in colorbar guide)
   if(is.null(theme$legend.key.width)) theme$legend.key.width <- theme$legend.key.size
   if(is.null(theme$legend.key.height)) theme$legend.key.height <- theme$legend.key.size

R/z_animintHelpers.R

@@ -147,6 +147,16 @@ getWidthAndHeight <- function(theme){
   options_list
 }
 
+theme_attribute <- function(theme){
+  options_list <- list()
+  for(attributes in c("rowspan", "colspan","row","col")){
+    arc <- paste0("animint.", attributes)
+    options_list[[attributes]] <- if(arc %in% names(theme)){
+      theme[[arc]]
+    }
+  }
+  options_list
+}
 
 setUpdateAxes <- function(theme, options_list){
   update_axes <- "animint.update_axes"

helper-functions2.R

@@ -0,0 +1,19 @@
+sendKey <- function(key, code, keyCode) {
+  remDr$Input$dispatchKeyEvent(type = "keyDown", key = key, code = code, windowsVirtualKeyCode = keyCode, nativeVirtualKeyCode = keyCode)
+  remDr$Input$dispatchKeyEvent(type = "keyUp", key = key, code = code, windowsVirtualKeyCode = keyCode, nativeVirtualKeyCode = keyCode)
+}
+
+clickID <- function(...){
+  v <- c(...)
+  stopifnot(length(v) == 1)
+  runtime_evaluate(script=sprintf("document.getElementById('%s').dispatchEvent(new CustomEvent('click'))", as.character(v)))
+}
+
+runtime_evaluate <- function(script=NULL,return.value=FALSE){
+  eval.result<- remDr$Runtime$evaluate(script,returnByValue = TRUE)
+  if (return.value){
+    eval.result$result$value
+  }else{
+    eval.result
+  }
+}

inst/htmljs/animint.js

@@ -218,11 +218,12 @@ var animint = function (to_select, json_file) {
     // Save this geom and load it!
     update_geom(g_name, null);
   };
-  var add_plot = function (p_name, p_info) {
+  var add_plot = function (p_name, p_info,outer_table) {
     // Each plot may have one or more legends. To make space for the
     // legends, we put each plot in a table with one row and two
     // columns: tdLeft and tdRight.
-    var plot_table = plot_td.append("table").style("display", "inline-block");
+
+    var plot_table = outer_table.append("table").style("display", "inline-block");
     var plot_tr = plot_table.append("tr");
     var tdLeft = plot_tr.append("td");
     var tdRight = plot_tr.append("td").attr("class", p_name+"_legend");
@@ -2023,13 +2024,168 @@ var animint = function (to_select, json_file) {
       d3.select("title").text(response.title);
     }
     // Add plots.
+
+
+  var check_customized_layout = function () {
+    for (var p_name in response.plots) {
+      if ("row" in response.plots[p_name].attributes){
+        return true
+      }
+      return false
+    }
+  } 
+  var layout_customized=check_customized_layout()
+  if (layout_customized){
+    var maximum_row= 0
+    var maximum_column= 0
+    var find_maximum_dimensions = function () {
+    for (var p_name in response.plots) {
+      count=count+1
+      if (response.plots[p_name].attributes.row>maximum_row){
+        maximum_row=response.plots[p_name].attributes.row
+      }
+      if (response.plots[p_name].attributes.col>maximum_column){
+        maximum_column=response.plots[p_name].attributes.col
+      }
+    }
+   }
+   find_maximum_dimensions()
+   var create_grid = function () {
+     let array2D = new Array(maximum_row);
+     for (let i = 0; i <= maximum_row; i++){
+       array2D[i] = new Array(maximum_column+1).fill(0);  // Fill each row with 0s
+      }
+      return array2D
+   }
+
+  var span_grid=create_grid()
+  var update_rowspan_values = function (start_row,col,rowspan) {
+    var current_row=start_row
+    while (current_row< start_row+rowspan-1) {
+      span_grid[current_row][col]=1
+      current_row=current_row+1
+    }
+  }
+
+  var update_rowspan_prefix = function () {
+    for (var current_row=0;current_row<=maximum_row;current_row=current_row+1){
+      for (var current_col=1;current_col<=maximum_column;current_col=current_col+1){
+        span_grid[current_row][current_col]=span_grid[current_row][current_col]+span_grid[current_row][current_col-1]
+
+      }
+
+    }
+
+  }
+  var construct_outer_table = function () {
+    function generateKey(row, col) {
+      return `${row},${col}`;
+
+    }
+    var maximum_dimensions=Math.max(maximum_column,maximum_row)
+    var outer_table = element.append("table").attr("id", "outerTable");
+    let rowspan_map = new Map();
+    let colspan_map = new Map();
     for (var p_name in response.plots) {
-      add_plot(p_name, response.plots[p_name]);
+      if (('rowspan' in response.plots[p_name].attributes)){
+      let key = generateKey(response.plots[p_name].attributes.row, response.plots[p_name].attributes.col);
+      rowspan_map.set(key,response.plots[p_name].attributes)
+      var rowspan_value=response.plots[p_name].attributes.rowspan
+      if (rowspan_value>1){
+        var start_row=response.plots[p_name].attributes.row+1
+        update_rowspan_values(start_row,response.plots[p_name].attributes.col,response.plots[p_name].attributes.rowspan)
+
+      }
+      }
+    if (('colspan' in response.plots[p_name].attributes)){
+      let key = generateKey(response.plots[p_name].attributes.row, response.plots[p_name].attributes.col);
+      colspan_map.set(key,response.plots[p_name].attributes)
+    }
+
+    }
+    for (var i = 0; i <=maximum_dimensions; i++) {
+      var current_row = outer_table.append("tr").style("border","1px solid white");
+      for (var j = 0; j <=maximum_dimensions; j++){
+        let key = generateKey(i,j);
+        if (rowspan_map.has(key) && (colspan_map.has(key))){
+          var rowspan=rowspan_map.get(key).rowspan
+          var colspan=colspan_map.get(key).colspan
+          current_row.append("td").attr("id", "row"+i+"col"+j).attr("rowspan",rowspan).attr("colspan",colspan).style("border","1px solid white");
+
+        }
+        else if(colspan_map.has(key)){
+          var colspan=colspan_map.get(key).colspan
+          current_row.append("td").attr("id", "row"+i+"col"+j).attr("colspan",colspan).style("border","1px solid white");
+        }
+        else if(rowspan_map.has(key)){
+          var rowspan=rowspan_map.get(key).rowspan
+          current_row.append("td").attr("id", "row"+i+"col"+j).attr("rowspan",rowspan).style("border","1px solid white");
+        }
+        else{
+          current_row.append("td").attr("id", "row"+i+"col"+j).style("border","1px solid white");
+        }
+      } 
+    }
+    return outer_table;
+    }
+    var outer_table=construct_outer_table();
+    update_rowspan_prefix();
+    for (var p_name in response.plots) {
+      var row=response.plots[p_name].attributes.row
+      var column=response.plots[p_name].attributes.col
+      if(column>0){
+        decrease=span_grid[row][column-1]
+      }
+      else{
+        decrease=0
+      }
+
+      var id= "#row"+response.plots[p_name].attributes.row+"col"+(response.plots[p_name].attributes.col-decrease)
+      var cell= d3.select(id);
+      add_plot(p_name, response.plots[p_name],cell);
       add_legend(p_name, response.plots[p_name]);
       // Append style sheet to document head.
       css.appendChild(document.createTextNode(styles.join(" ")));
       document.head.appendChild(css);
+
+    }
+  }else{
+    var count=0
+    for (var p_name in response.plots){
+      count=count+1
+    }
+    var maximum_dimensions = Math.ceil(Math.sqrt(count))-1;
+    var construct_outer_table = function () {
+
+    var outer_table = element.append("table").attr("id", "outerTable");
+    for (var i = 0; i <=maximum_dimensions; i++) {
+      var current_row = outer_table.append("tr").style("border","1px solid white");
+      for (var j = 0; j <=maximum_dimensions; j++){
+        current_row.append("td").attr("id", "row"+i+"col"+j).style("border","1px solid white");
+      } 
     }
+    return outer_table;
+    }  
+  var outer_table=construct_outer_table();
+
+  var pointer_row=0
+  var pointer_column=0
+  for (var p_name in response.plots) {
+    var id= "#row"+pointer_row+"col"+pointer_column
+    var cell= d3.select(id);
+    pointer_column=pointer_column+1
+    if (pointer_column>maximum_dimensions){
+      pointer_column=0
+      pointer_row=pointer_row+1
+    }
+    add_plot(p_name, response.plots[p_name],cell);
+    add_legend(p_name, response.plots[p_name]);
+    // Append style sheet to document head.
+    css.appendChild(document.createTextNode(styles.join(" ")));
+    document.head.appendChild(css);
+  }
+  }
+
     // Then add selectors and start downloading the first data subset.
     for (var s_name in response.selectors) {
       add_selector(s_name, response.selectors[s_name]);
@@ -2049,7 +2205,6 @@ var animint = function (to_select, json_file) {
         }
       }
     }
-
     ////////////////////////////////////////////
     // Widgets at bottom of page
     ////////////////////////////////////////////