From 32a3afe0f7fd5b8442d54b2c3aea39f0e8fefb6c Mon Sep 17 00:00:00 2001
From: CJ Yetman <cyetman@rmi.org>
Date: Thu, 18 Jan 2024 12:32:55 +0100
Subject: [PATCH] `force_network()` and `force_explorer()` improvements

---
 R/force_explorer.R    | 29 ++++++++++++++++++++++-------
 inst/force_network.js | 25 ++++++++-----------------
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/R/force_explorer.R b/R/force_explorer.R
index 6038a08..bf7ff1b 100644
--- a/R/force_explorer.R
+++ b/R/force_explorer.R
@@ -22,7 +22,7 @@ force_explorer <- function(data) {
       shiny::numericInput(
         inputId = "width",
         label = "width:",
-        value = NULL,
+        value = 952,
         min = 1,
         max = 952,
         step = 1
@@ -30,9 +30,9 @@ force_explorer <- function(data) {
       shiny::numericInput(
         inputId = "height",
         label = "height:",
-        value = NULL,
+        value = 500,
         min = 1,
-        max = 5000,
+        max = 500,
         step = 1
       ),
       shiny::numericInput(
@@ -51,6 +51,18 @@ force_explorer <- function(data) {
         max = 80,
         step = 1
       ),
+      shiny::textInput(
+        inputId = "font",
+        label = "font:",
+        value = "14px Arial",
+        placeholder = "CSS font specification"
+      ),
+      shiny::textInput(
+        inputId = "shadow_color",
+        label = "shadow_color:",
+        value = "transparent",
+        placeholder = '"transparent" [default]'
+      ),
       shiny::numericInput(
         inputId = "distanceMin",
         label = "distanceMin:",
@@ -100,7 +112,7 @@ force_explorer <- function(data) {
       ),
       shiny::downloadButton("download_png", "save PNG")
     ),
-    r2d3::d3Output("d3")
+    r2d3::d3Output("d3", height = "100vh")
   )
 
   server <- function(input, output) {
@@ -117,7 +129,9 @@ force_explorer <- function(data) {
         solid_arrows = input$solid_arrows,
         arrow_length = input$arrow_length,
         zoom_scale = input$zoom_scale,
-        plot_static = input$plot_static
+        plot_static = input$plot_static,
+        font = input$font,
+        shadow_color = input$shadow_color
       )
     })
 
@@ -126,7 +140,6 @@ force_explorer <- function(data) {
         paste0(obj_name, ".png")
       },
       content = function(file) {
-        warning(input$width)
         plot <- force_network(
           data = data,
           width = input$width,
@@ -139,7 +152,9 @@ force_explorer <- function(data) {
           solid_arrows = input$solid_arrows,
           arrow_length = input$arrow_length,
           zoom_scale = input$zoom_scale,
-          plot_static = input$plot_static
+          plot_static = input$plot_static,
+          font = input$font,
+          shadow_color = input$shadow_color
         )
         save_as_png(plot, file)
       }
diff --git a/inst/force_network.js b/inst/force_network.js
index aa3a8d0..24e56e8 100644
--- a/inst/force_network.js
+++ b/inst/force_network.js
@@ -1,7 +1,4 @@
-// !preview r2d3 data = jsonlite::read_json('test_data/marvel3.json'), d3_version = 4, container = "canvas", options = list()
-
-// https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048
-// https://bl.ocks.org/mbostock/b418a040bb28295e4a78581fe8e269d1
+// !preview r2d3 data = jsonlite::toJSON(jsonlite::fromJSON("test_data/miserables.json")), d3_version = 5, container = "canvas", options = list(draw_arrows = TRUE)
 
 var node_color = eval(options.node_color) || d3.scaleOrdinal(d3.schemeCategory10),
     node_size = options.node_size || 4,
@@ -14,6 +11,8 @@ var node_color = eval(options.node_color) || d3.scaleOrdinal(d3.schemeCategory10
     arrow_length = options.arrow_length || 10,
     zoom_scale = options.zoom_scale || 0.5,
     plot_static = options.plot_static || false == 1 ? true : false;
+    shadow_color = options.shadow_color ?? "transparent";
+    font = options.font ?? "14px Arial";
 
 var canvas_node = canvas.node(),
     context = canvas_node.getContext("2d"),
@@ -21,7 +20,7 @@ var canvas_node = canvas.node(),
     height = canvas_node.height;
 
 var simulation = d3.forceSimulation(data.nodes)
-    .force("link", d3.forceLink(data.links).id(function(d) { return d.id; }))
+    .force("link", d3.forceLink(data.links).id(d => d.id))
     .force("charge", d3.forceManyBody().strength(strength).distanceMin(distanceMin).distanceMax(distanceMax))
     .force("center", d3.forceCenter(width / 2, height / 2));
 
@@ -37,8 +36,6 @@ if (plot_static) {
   simulation.on("tick", ticked);
 }
 
-
-/*
 d3.select(canvas_node)
     .call(d3.drag()
         .container(canvas_node)
@@ -46,7 +43,6 @@ d3.select(canvas_node)
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended));
-*/
 
 // zoom
 d3.select(canvas_node)
@@ -67,15 +63,13 @@ function ticked(transform) {
 
   // draw links
   context.beginPath();
-  data.links.forEach(function(d) { drawLink(d, transform); });
+  data.links.forEach(d => drawLink(d, transform));
   context.strokeStyle = link_color;
   context.stroke();
 
   // draw arrows
   if(draw_arrows){
-      data.links.forEach(function(d) {
-        drawArrowHead(arrowHeadPoints(d, transform));
-      });
+      data.links.forEach(d => drawArrowHead(arrowHeadPoints(d, transform)));
   }
 
   // draw nodes
@@ -104,18 +98,15 @@ function ticked(transform) {
       d_node_size = node_size;
     }
 
-    var fontfillsize = 24;
-
-    context.font = fontfillsize + "px Arial";
+    context.font = font;
     context.fillStyle = d_color;
     context.strokeStyle = "white";
     context.strokeText(d.id, dx, dy);
-    context.shadowColor = "rgba(0,0,0,0.9)";
+    context.shadowColor = shadow_color;
     context.shadowOffsetX = 2;
     context.shadowOffsetY = 2;
     context.shadowBlur = 6;
     context.fillText(d.id, dx, dy);
-    context.shadowColor = "transparent";
   });
 }