Merge pull request #385 from lindsaycarr/webpack

Webpack

DESCRIPTION

@@ -1,8 +1,8 @@
 Package: vizlab
 Type: Package
 Title: Utilities for building online data visualizations
-Version: 0.3.7
-Date: 2018-07-20
+Version: 0.3.8
+Date: 2018-08-07
 Author: Jordan Walker, Alison Appling, Lindsay Carr, Luke Winslow, Jordan Read, Laura DeCicco, Marty Wernimont, David Watkins
 Maintainer: Alison Appling <aappling@usgs.gov>
 Description: Provides utility functions to organize, develop, and publish

NAMESPACE

@@ -59,6 +59,7 @@ S3method(publish,svg)
 S3method(publish,tabular)
 S3method(publish,template)
 S3method(publish,thumbnail)
+S3method(publish,webpack)
 S3method(readData,character)
 S3method(readData,excel)
 S3method(readData,filepath)
@@ -146,6 +147,7 @@ export(validateVizYaml)
 export(visualize)
 export(vizSkeleton)
 export(vizmake)
+export(webpacker)
 export(writeTimestamp)
 import(yaml)
 importFrom(digest,digest)

R/publish.R

@@ -489,6 +489,21 @@ publish.landing <- function(viz){
   publish(pageviz)
 }
 
+#' publish webpack
+#'
+#' @rdname publish
+#' @export
+publish.webpack <- function(viz) {
+
+  checkRequired(viz, "relpath")
+
+  # webpacked js file is already saved to `target/js/`
+  # just need to get a script tag
+  html <- sprintf('<script src="%s?_c=%s" type="text/javascript"></script>',
+                  viz[["relpath"]], uniqueness())
+  return(html)
+}
+
 #' publish template
 #'
 #' @rdname publish

R/vizmake.R

@@ -46,6 +46,13 @@ vizmake <- function(target_names=NULL, ...) {
     source(remake.yaml$sources[i])
   }
 
+  if(file.exists('webpack.config.js')) {
+    # run webpack
+    message('Running webpack ', Sys.time())
+    webpacker()
+    message('Finished webpack ', Sys.time())
+  }
+
   # run remake::make(target_name, ..., remake_file='remake.yaml')
   message('Starting build at ', Sys.time())
   out <- remake::make(target_names=target_names, ..., remake_file='remake.yaml')

R/webpacker.R

@@ -0,0 +1,56 @@
+#' Run webpack for the project
+#'
+#' This is called at the very end of `vizmake()` if you have a webpack block in your `viz.yaml`.
+#' @param webpack.config list containing at least an input and output element that contain a
+#' filepath for the javasript file going into webpack, and the name for the bundled file that results.
+#' @md
+#' @export
+webpacker <- function() {
+
+  # check if node, npm are installed
+  checkInstalled("node")
+  checkInstalled("npm")
+
+  checkAndInstallNodeModule("webpack")
+  checkAndInstallNodeModule("webpack-cli")
+
+  ## have a way to fail if `start` is not the default?
+  system("npm run start")
+}
+
+#' Check that a system library is installed
+#' 
+#' @param name string of the system library to look for
+#' 
+checkInstalled <- function(name) {
+  tryCatch(system(paste(name, "-v"), show.output.on.console = FALSE), 
+           warning = function(w) { 
+             stop(paste(name, "not installed:", w)) 
+           })
+}
+
+#' Check if a node package is installed already or not. If not, install it
+#' 
+#' @param module character string of the node module to install,
+#' e.g. `webpack`, `d3`, etc
+#' @param addSave logical indicating whether `--save` should be inlcuded 
+#' in the install command
+#' 
+checkAndInstallNodeModule <- function(module, addSave=TRUE) {
+
+  oldwd <- getwd()
+  setwd(exportLocation())
+
+  cmd <- paste("npm list", module)
+  output <- system(cmd, intern=TRUE)
+
+  err_status <- !is.null(attr(output, "status")) && attr(output, "status") != 0
+  notInstalled <-  err_status || any(grep("empty", output))
+  if(notInstalled) {
+    cmd_install <- paste("npm install", module)
+    if(addSave) { cmd_install <- paste(cmd_install, "--save") }
+    system(cmd_install)
+  }
+
+  setwd(oldwd)
+}

inst/resource.library.yaml

@@ -188,6 +188,14 @@
     id:
     figure:
     caption:
+-
+  id: simpleSVG
+  location: templates/simpleSVG.mustache
+  publisher: template
+  mimetype: text/mustache
+  context:
+    script:
+    div_id:
 
 ### RESOURCES ###
 -

inst/templates/simpleSVG.mustache

@@ -0,0 +1,4 @@
+<div id={{div_id}}>
+</div>
+
+{{{ script }}}

inst/testviz/.gitignore

@@ -3,3 +3,6 @@ figures
 Makefile
 vizlab
 target
+.remake
+remake.yaml
+node_modules

inst/testviz/images/usgs_watermark.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<g id="watermark-group" onclick="vizlab.clicklink('https://www2.usgs.gov/water/')">
+  <path d="m234.95 15.44v85.037c0 17.938-10.132 36.871-40.691 36.871-27.569 0-40.859-14.281-40.859-36.871v-85.04h25.08v83.377c0 14.783 6.311 20.593 15.447 20.593 10.959 0 15.943-7.307 15.943-20.593v-83.377h25.08m40.79 121.91c-31.058 0-36.871-18.27-35.542-39.03h25.078c0 11.462 0.5 21.092 14.282 21.092 8.472 0 12.62-5.482 12.62-13.618 0-21.592-50.486-22.922-50.486-58.631 0-18.769 8.968-33.715 39.525-33.715 24.42 0 36.543 10.963 34.883 36.043h-24.419c0-8.974-1.492-18.106-11.627-18.106-8.136 0-12.953 4.486-12.953 12.787 0 22.757 50.493 20.763 50.493 58.465 0 31.06-22.75 34.72-41.85 34.72m168.6 0c-31.06 0-36.871-18.27-35.539-39.03h25.075c0 11.462 0.502 21.092 14.285 21.092 8.475 0 12.625-5.482 12.625-13.618 0-21.592-50.494-22.922-50.494-58.631 0-18.769 8.969-33.715 39.531-33.715 24.412 0 36.536 10.963 34.875 36.043h-24.412c0-8.974-1.494-18.106-11.625-18.106-8.144 0-12.955 4.486-12.955 12.787 0 22.757 50.486 20.763 50.486 58.465 0 31.06-22.75 34.72-41.85 34.72m-79.89-46.684h14.76v26.461l-1.229 0.454c-3.816 1.332-8.301 2.327-12.453 2.327-14.287 0-17.943-6.645-17.943-44.177 0-23.256 0-44.348 15.615-44.348 12.146 0 14.711 8.198 14.933 18.107h24.981c0.198-23.271-14.789-36.043-38.42-36.043-41.021 0-42.52 30.724-42.52 60.954 0 45.507 4.938 63.167 47.12 63.167 9.784 0 25.36-2.211 32.554-4.18 0.436-0.115 1.212-0.596 1.212-1.216v-59.598h-38.612v18.09" id="usgs-watermark-text" class="watermark"/>
+  <path d="m48.736 55.595l0.419 0.403c11.752 9.844 24.431 8.886 34.092 2.464 6.088-4.049 33.633-22.367 49.202-32.718v-10.344h-116.03v27.309c7.071-1.224 18.47-0.022 32.316 12.886m43.651 45.425l-13.705-13.142c-1.926-1.753-3.571-3.04-3.927-3.313-11.204-7.867-21.646-5.476-26.149-3.802-1.362 0.544-2.665 1.287-3.586 1.869l-28.602 19.13v34.666h116.03v-24.95c-2.55 1.62-18.27 10.12-40.063-10.46m-44.677-42.322c-0.619-0.578-1.304-1.194-1.915-1.698-13.702-10.6-26.646-5.409-29.376-4.116v11.931l6.714-4.523s10.346-7.674 26.446 0.195l-1.869-1.789m16.028 15.409c-0.603-0.534-1.214-1.083-1.823-1.664-12.157-10.285-23.908-7.67-28.781-5.864-1.382 0.554-2.7 1.303-3.629 1.887l-13.086 8.754v12.288l21.888-14.748s10.228-7.589 26.166 0.054l-0.735-0.707m68.722 12.865c-4.563 3.078-9.203 6.203-11.048 7.441-4.128 2.765-13.678 9.614-29.577 2.015l1.869 1.797c0.699 0.63 1.554 1.362 2.481 2.077 11.418 8.53 23.62 7.303 32.769 1.243 1.267-0.838 2.424-1.609 3.507-2.334v-12.234m0-24.61c-10.02 6.738-23.546 15.833-26.085 17.536-4.127 2.765-13.82 9.708-29.379 2.273l1.804 1.729c0.205 0.19 0.409 0.375 0.612 0.571l-0.01 0.01 0.01-0.01c12.079 10.22 25.379 8.657 34.501 2.563 5.146-3.436 12.461-8.38 18.548-12.507l-0.01-12.165m0-24.481c-14.452 9.682-38.162 25.568-41.031 27.493-4.162 2.789-13.974 9.836-29.335 2.5l1.864 1.796c1.111 1.004 2.605 2.259 4.192 3.295 10.632 6.792 21.759 5.591 30.817-0.455 6.512-4.351 22.528-14.998 33.493-22.285v-12.344" id="usgs-watermark-wave" class="watermark"/>
+</g>

inst/testviz/js/app.js

@@ -0,0 +1,26 @@
+// require d3 (can only do this is d3 has been installed, `npm install d3`)
+var d3 = require('d3');
+
+// webpack import functions
+import {add_circles} from './modules/circles';
+
+// setup
+var h = 200;
+var w = 700;
+var margin = {
+  top: 20,
+  bottom: 60,
+  left: 60,
+  right: 60
+};
+var plotwidth = w - margin.left - margin.right;
+var plotheight = h - margin.top - margin.bottom;
+
+// create an svg element
+var svg = d3.select("body").select("#circle_fig")
+    .append("svg")
+      .attr("id", "plotarea") // id == #plot in css, class == .plot in css
+      .attr("width", w)
+      .attr("height", h);
+
+add_circles([1,6,7,2]);

inst/testviz/js/modules/circles.js

@@ -0,0 +1,17 @@
+function add_circles(data) {
+  d3.select("#plotarea").selectAll("circle")
+    .data(data)
+    .enter()
+    .append("circle")
+      .attr("cx", function(d, i) { return i*100 + 20; })
+      .attr("cy", function(d, i) { return Math.random()*200; })
+      .attr("r", function(d) { return d*10; })
+      .on("mouseover", function(d) {
+        d3.select(this).attr("fill", "orange");
+      })
+      .on("mouseout", function() {
+        d3.select(this).attr("fill", null);
+      });
+}
+
+export {add_circles};