add 2 plots per row and then make a new row

in the newly created outer table, add 2 plots per row and then make a new row. this implementation will be built upon to complete if it is the suitable.

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

@@ -6,7 +6,7 @@
 // Constructor for animint Object.
 
 var animint = function (to_select, json_file) {
-
+  console.log("hello")
   var default_axis_px = 16;
 
    function wait_until_then(timeout, condFun, readyFun) {
@@ -222,14 +222,18 @@ var animint = function (to_select, json_file) {
   //Add a cell to the row (1st row, 1st column)
 
 
-  var add_plot = function (p_name, p_info,outer_table) {
+  var add_plot = function (p_name, p_info,outer_table,rowIdx=1,colIdx=1) {
     // 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 = element.append("table").style("display", "inline-block");
-    var row = outer_table.append("tr");
-    var cell = row.append("td");
-    var plot_table = cell.append("table").style("display", "inline-block");
+    //var row = outer_table.append("tr");
+    //var cell = row.append("td");
+    //var cell = outer_table.select(`tr:nth-child(${rowIdx + 1})`).select(`td:nth-child(${colIdx + 1})`);
+
+    //var plot_table = cell.append("table").style("display", "inline-block");
+    //var outer_table = d3.select("#outerTable")
+    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");
@@ -2033,16 +2037,28 @@ var animint = function (to_select, json_file) {
     // Add plots.
     var construct_outer_table = function () {
     var outer_table = element.append("table").attr("id", "outerTable").style("width", "100%").style("border", "1px solid black");
-  //var row1 = outer_table1.append("tr");
+    //var row = outer_table.append("tr");
+    //var cell = row.append("td");
   return outer_table;
   }
   var outer_table=construct_outer_table();
+  var current_row=outer_table.append("tr")
+  var current_col=current_row.append("td")
+  var count=0;
     for (var p_name in response.plots) {
-      add_plot(p_name, response.plots[p_name],outer_table);
+      count=count+1
+      if (count>2){
+        count=1
+        current_row=outer_table.append("tr")
+        current_col=current_row.append("td")
+      }
+      //console.log(count)
+      add_plot(p_name, response.plots[p_name],current_col);
       add_legend(p_name, response.plots[p_name]);
       // Append style sheet to document head.
       css.appendChild(document.createTextNode(styles.join(" ")));
       document.head.appendChild(css);
+      current_col=current_row.append("td")
     }
     // Then add selectors and start downloading the first data subset.
     for (var s_name in response.selectors) {