From fab20da9b894c0e50a60ea78d0951d955468f2f2 Mon Sep 17 00:00:00 2001
From: aaronlisman <lismanBusiness@gmail.com>
Date: Thu, 9 Aug 2018 17:46:20 -0400
Subject: [PATCH] Use opacity to hide hit zones in mutation lollipop plot
 (fixes PDF download issue)

---
 src/shared/components/downloadControls/DownloadControls.tsx | 4 ++--
 src/shared/components/lollipopMutationPlot/Domain.tsx       | 3 ++-
 src/shared/components/lollipopMutationPlot/Lollipop.tsx     | 2 +-
 src/shared/components/lollipopMutationPlot/Sequence.tsx     | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/downloadControls/DownloadControls.tsx b/src/shared/components/downloadControls/DownloadControls.tsx
index 2e664181d73..a1545109ff4 100644
--- a/src/shared/components/downloadControls/DownloadControls.tsx
+++ b/src/shared/components/downloadControls/DownloadControls.tsx
@@ -53,7 +53,7 @@ function makeMenuItem(spec:ButtonSpec) {
 
 @observer
 export default class DownloadControls extends React.Component<IDownloadControlsProps, {}> {
-    private svgsaver = new SvgSaver({},{});
+    private svgsaver = new SvgSaver();
     @observable private collapsed = true;
 
     @autobind
@@ -124,7 +124,7 @@ export default class DownloadControls extends React.Component<IDownloadControlsP
     }
 
     @computed get buttonSpecs() {
-        const middleButtons = (this.props.buttons || ["SVG", "PNG"]).map(x=>this.downloadControlsButtons[x]);
+        const middleButtons = (this.props.buttons || ["SVG", "PNG", "PDF"]).map(x=>this.downloadControlsButtons[x]);
         return (this.props.additionalLeftButtons || []).concat(middleButtons).concat(this.props.additionalRightButtons || []);
     }
 
diff --git a/src/shared/components/lollipopMutationPlot/Domain.tsx b/src/shared/components/lollipopMutationPlot/Domain.tsx
index 572560a735b..751d40bad84 100644
--- a/src/shared/components/lollipopMutationPlot/Domain.tsx
+++ b/src/shared/components/lollipopMutationPlot/Domain.tsx
@@ -101,6 +101,7 @@ export default class Domain extends React.Component<DomainProps, {}> {
         if (reference) {
             props.ref=this.handlers.textRef;
             props.visibility="hidden";
+            props.style={opacity:0};
             props.className=this.props.hitzoneClassName;
         }
         return (<text {...props}>{text}</text>);
@@ -124,7 +125,7 @@ export default class Domain extends React.Component<DomainProps, {}> {
                     y={this.props.y}
                     width={this.props.width}
                     height={this.props.height}
-                    fill="rgba(0,0,0,0)"
+                    style={{opacity:0}}
                 />
             </g>
         );
diff --git a/src/shared/components/lollipopMutationPlot/Lollipop.tsx b/src/shared/components/lollipopMutationPlot/Lollipop.tsx
index 34c3149e0dd..9169a0cc830 100644
--- a/src/shared/components/lollipopMutationPlot/Lollipop.tsx
+++ b/src/shared/components/lollipopMutationPlot/Lollipop.tsx
@@ -80,11 +80,11 @@ export default class Lollipop extends React.Component<LollipopProps, {}> {
                 />
                 <circle
                     className={this.props.hitzoneClassName}
-                    fill="rgba(0,0,0,0)"
                     r={this.props.hoverHeadRadius}
                     cx={this.circleX}
                     cy={this.circleY}
                     cursor="pointer"
+                    style={{opacity:0}}
                 />
                 {label}
             </g>
diff --git a/src/shared/components/lollipopMutationPlot/Sequence.tsx b/src/shared/components/lollipopMutationPlot/Sequence.tsx
index 4aba19c1701..6d0620bdd03 100644
--- a/src/shared/components/lollipopMutationPlot/Sequence.tsx
+++ b/src/shared/components/lollipopMutationPlot/Sequence.tsx
@@ -50,7 +50,7 @@ export default class Sequence extends React.Component<ISequenceProps, {}> {
                     y={this.props.y}
                     width={this.props.width}
                     height={this.props.height}
-                    fill="rgba(0,0,0,0)"
+                    style={{opacity:0}}
                 />
             </g>
         );