diff --git a/.gitignore b/.gitignore index 7c673ec4..d3b28cc7 100644 --- a/.gitignore +++ b/.gitignore @@ -57,3 +57,13 @@ coverage/ *.synctex.gz .vscode + +*.tmp + +# Microsoft Office temporary files +~$*.doc* +Backup of *.doc* +~$*.xls* +*.xlk +~$*.ppt* +*.~vsd* diff --git a/package-lock.json b/package-lock.json index 252e0acc..c191e9db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9399,6 +9399,11 @@ "integrity": "sha512-1HwIYD/8UlOtFS3QO3w7ey+SdSDFE4HRNLZoZRYVQefrOY3l17epswImeB1ijgJFQJodIaHcwkp3r/myBjFVbg==", "dev": true }, + "save-svg-as-png": { + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/save-svg-as-png/-/save-svg-as-png-1.4.14.tgz", + "integrity": "sha512-hJqOFSdRvhBVD2pQSM+mJStvQGfnvQCCF6ULtAxdjF4lDwXYfWZ9Eug0fcRl05YyPL2yknCDBEOpbO4Fkw5qmg==" + }, "sax": { "version": "0.5.8", "resolved": "https://registry.npmjs.org/sax/-/sax-0.5.8.tgz", diff --git a/package.json b/package.json index 8a3c21a2..428e116d 100644 --- a/package.json +++ b/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", diff --git a/web-client/public/js/constants.js b/web-client/public/js/constants.js index 9dfa2162..cd88027d 100644 --- a/web-client/public/js/constants.js +++ b/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 ], diff --git a/web-client/public/js/graph.js b/web-client/public/js/graph.js index 7ced3387..b94c01b5 100644 --- a/web-client/public/js/graph.js +++ b/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"); + }); }; diff --git a/web-client/views/upload.jade b/web-client/views/upload.jade index 0314a560..87799405 100644 --- a/web-client/views/upload.jade +++ b/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