Fixed png download for group comparison clinical data (#4888)

* fix: download plot as png using juice for css inlining
cBioPortal · Apr 15, 2024 · f87c744 · f87c744
1 parent ff03554
commit f87c744
Show file tree

Hide file tree

Showing 3 changed files with 222 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -206,6 +206,7 @@
     "jspdf": "^1.3.3",
     "jstree": "^3.3.4",
     "jszip": "^3.7.1",
+    "juice": "^10.0.0",
     "lerna": "3.19.0",
     "less": "^2.7.2",
     "linear-algebra": "^3.1.4",

diff --git a/packages/cbioportal-frontend-commons/src/components/downloadControls/DownloadControls.tsx b/packages/cbioportal-frontend-commons/src/components/downloadControls/DownloadControls.tsx
@@ -11,6 +11,7 @@ import { saveSvg, saveSvgAsPng } from 'save-svg-as-png';
 import svgToPdfDownload from '../../lib/svgToPdfDownload';
 import { CSSProperties } from 'react';
 import { isPromiseLike } from 'cbioportal-utils';
+import juice from 'juice';
 
 type ButtonSpec = {
     key: string;
@@ -127,11 +128,22 @@ export default class DownloadControls extends React.Component<
                         }
                     });
                 } else {
-                    saveMethod(
-                        result,
-                        `${this.props.filename}.${fileExtension}`,
-                        { excludeCss: true }
+                    // using serlizer to convert svg to string
+                    let serializer = new XMLSerializer();
+                    const inlinedSVG = juice(
+                        serializer.serializeToString(result)
                     );
+
+                    // parsing as SVGElement after css inlining
+                    let parser = new DOMParser();
+                    let svg = (parser.parseFromString(
+                        inlinedSVG,
+                        'image/svg+xml'
+                    ).documentElement as unknown) as SVGElement;
+
+                    saveMethod(svg, `${this.props.filename}.${fileExtension}`, {
+                        excludeCss: true,
+                    });
                 }
             }
         }