Merge pull request #1382 from adamabeshouse/empty-bg-svg

Switch svg saving libraries to allow saving png with background

package.json

@@ -201,13 +201,13 @@
     "route-parser": "0.0.5",
     "sass-loader": "^4.1.1",
     "sass-resources-loader": "^1.3.1",
+    "save-svg-as-png": "^1.4.6",
     "script-loader": "^0.7.0",
     "seamless-immutable": "^7.0.1",
     "seedrandom": "^2.4.3",
     "source-map-loader": "^0.1.6",
     "style-loader": "^0.13.1",
     "superagent": "^3.4.0",
-    "svgsaver": "0.9.0",
     "swagger-client": "^2.1.32",
     "ts-loader": "^2.0.0",
     "typescript": "^2.7.2",

src/pages/resultsView/cancerSummary/CancerSummaryContent.tsx

@@ -7,7 +7,6 @@ import Slider from 'react-rangeslider';
 import {FormGroup, ControlLabel, FormControl} from 'react-bootstrap';
 import {If, Then, Else} from 'react-if';
 import classnames from 'classnames';
-import SvgSaver from 'svgsaver';
 
 import 'react-select/dist/react-select.css';
 import 'react-rangeslider/lib/index.css';

src/pages/resultsView/coExpression/CoExpressionPlot.tsx

@@ -14,7 +14,6 @@ import {action, computed, observable} from "mobx";
 import {observer, Observer} from "mobx-react";
 import {MolecularProfile} from "../../../shared/api/generated/CBioPortalAPI";
 import {AlterationTypeConstants} from "../ResultsViewPageStore";
-import SvgSaver from "svgsaver";
 import svgToPdfDownload from "shared/lib/svgToPdfDownload";
 import {getSampleViewUrl} from "../../../shared/api/urls";
 import "./styles.scss";

src/pages/resultsView/survival/SurvivalChart.tsx

@@ -10,7 +10,6 @@ import {
     VictoryChart, VictoryContainer, VictoryLine, VictoryTooltip,
     VictoryAxis, VictoryLegend, VictoryLabel, VictoryScatter, VictoryTheme, VictoryZoomContainer
 } from 'victory';
-import SvgSaver from 'svgsaver';
 import {
     getEstimates, getMedian, getLineData, getScatterData, getScatterDataWithOpacity, getStats, calculateLogRank,
     getDownloadContent, convertScatterDataToDownloadData, downSampling, GroupedScatterData, filteringScatterData
@@ -59,7 +58,6 @@ export default class SurvivalChart extends React.Component<ISurvivalChartProps,
     private alteredLegendText = 'Cases with Alteration(s) in Query Gene(s)';
     private unalteredLegendText = 'Cases without Alteration(s) in Query Gene(s)';
     private svgContainer: any;
-    private svgsaver = new SvgSaver();
     private styleOptsDefaultProps:any = {
         width: 900,
         height: 500,

src/shared/components/ChartContainer/ChartContainer.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import SvgSaver from 'svgsaver';
 import autobind from "autobind-decorator";
 import DownloadControls from "../downloadControls/DownloadControls";
 
@@ -10,18 +9,6 @@ interface IChartContainer {
 
 export default class ChartContainer extends React.Component<IChartContainer, {}> {
 
-    @autobind
-    private downloadSvg() {
-        this.svgsaver.asSvg(this.props.getSVGElement!(), this.props.exportFileName + '.svg');
-    }
-
-    @autobind
-    private downloadPng() {
-        this.svgsaver.asPng(this.props.getSVGElement!(), this.props.exportFileName + '.png');
-    }
-
-    private svgsaver = new SvgSaver();
-
     render(){
 
         return  (

src/shared/components/downloadControls/DownloadControls.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import SvgSaver from 'svgsaver';
 import svgToPdfDownload from "shared/lib/svgToPdfDownload";
 import FadeInteraction from "../fadeInteraction/FadeInteraction";
 import {observer} from "mobx-react";
@@ -9,6 +8,7 @@ import fileDownload from 'react-file-download';
 import DefaultTooltip from "../defaultTooltip/DefaultTooltip";
 import classnames from "classnames";
 import styles from "./DownloadControls.module.scss";
+import {saveSvg, saveSvgAsPng} from "save-svg-as-png";
 
 type ButtonSpec = { key:string, content:JSX.Element, onClick:()=>void, disabled?: boolean };
 
@@ -53,15 +53,14 @@ function makeMenuItem(spec:ButtonSpec) {
 
 @observer
 export default class DownloadControls extends React.Component<IDownloadControlsProps, {}> {
-    private svgsaver = new SvgSaver();
     @observable private collapsed = true;
 
     @autobind
     private downloadSvg() {
         if (this.props.getSvg) {
             const svg = this.props.getSvg();
             if (svg) {
-                this.svgsaver.asSvg(svg, `${this.props.filename}.svg`);
+                saveSvg(svg, `${this.props.filename}.svg`);
             }
         }
     }
@@ -71,7 +70,7 @@ export default class DownloadControls extends React.Component<IDownloadControlsP
         if (this.props.getSvg) {
             const svg = this.props.getSvg();
             if (svg) {
-                this.svgsaver.asPng(svg, `${this.props.filename}.png`);
+                saveSvgAsPng(svg, `${this.props.filename}.png`, {backgroundColor:"#ffffff"});
             }
         }
     }

typings/missing.d.ts

@@ -3,6 +3,7 @@ declare module '*.scss';
 declare module '*.json';
 
 // these packages are missing typings
+declare module 'save-svg-as-png'
 declare module 'react-file-download';
 declare module 'react-select-checked';
 declare module 'react-zeroclipboard';