Merge pull request #791 from dondi/mihirsamdarshi

Add save graph as PNG to GRNsight

.gitignore

@@ -57,3 +57,13 @@ coverage/
 *.synctex.gz
 
 .vscode
+
+*.tmp
+
+# Microsoft Office temporary files
+~$*.doc*
+Backup of *.doc*
+~$*.xls*
+*.xlk
+~$*.ppt*
+*.~vsd*

package.json

@@ -23,6 +23,7 @@
     "node-xlsx": "0.7.2",
     "nodemon": "1.11.0",
     "parallelshell": "3.0.1",
+    "save-svg-as-png": "^1.4.14",
     "serve-static": "1.13.1",
     "should": "11.2.0",
     "stylus": "0.54.5",

web-client/public/js/constants.js

@@ -14,6 +14,8 @@ export const SCHADE_OUTPUT_ID     = "#schadeOutput";
 export const SCHADE_OUTPUT_PATH   = "demo/schadeOutput";
 export const SCHADE_OUTPUT_NAME   = "Demo #4: Weighted GRN (21 genes, 31 edges, Schade et al. 2004 data)";
 
+export const SAVE_IMAGE           = "#saveImage";
+
 export const DEMO_INFORMATION = [
     [ WEIGHTED_DEMO_ID,   WEIGHTED_DEMO_PATH,   WEIGHTED_DEMO_NAME   ],
     [ UNWEIGHTED_DEMO_ID, UNWEIGHTED_DEMO_PATH, UNWEIGHTED_DEMO_NAME ],

web-client/public/js/graph.js

@@ -8,9 +8,12 @@ import {
     ZOOM_PERCENT,
     ZOOM_SLIDER,
     ZOOM_DISPLAY_MINIMUM_VALUE,
-    ZOOM_DISPLAY_MAXIMUM_VALUE
+    ZOOM_DISPLAY_MAXIMUM_VALUE,
+    SAVE_IMAGE
 } from "./constants";
 
+import { saveSvgAsPng } from "save-svg-as-png";
+
 /* globals d3 */
 /* eslint-disable no-use-before-define, func-style */
 /*
@@ -193,7 +196,8 @@ export var drawGraph = function (network) {
 
     var svg = d3.select($container[0]).append("svg")
         .attr("width", width)
-        .attr("height", height);
+        .attr("height", height)
+        .attr("id", "exportContainer");
 
     var zoomContainer = svg.append("g") // required for zoom to work
         .attr("class", "boundingBox")
@@ -1460,4 +1464,8 @@ export var drawGraph = function (network) {
     modifyLinkDistanceParameter(grnState.linkDistanceSlider.currentVal);
 
     $(".startDisabled").removeClass("disabled");
+
+    $(SAVE_IMAGE).click(() => {
+        saveSvgAsPng(document.getElementById("exportContainer"),  grnState.name + ".png");
+    });
 };

web-client/views/upload.jade

@@ -97,6 +97,11 @@ html
                   a(href='#' id='printGraph')
                     span(class='glyphicon glyphicon-print')
                     |   Print
+                li(class='divider')
+                li(class=' startDisabled disabled')
+                  a(href='#' id='saveImage')
+                    span(class='glyphicon glyphicon-picture')
+                    |   Save Graph As PNG
 
             li(class='dropdown')
               a(href='#' class='dropdown-toggle' data-toggle='dropdown') View