Fix SVG download button by properly propagating ref (#413)

opentargets · Jul 19, 2024 · 4c7f3f7 · 4c7f3f7
1 parent 22467fe
commit 4c7f3f7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/sections/src/target/Expression/GtexVariability.jsx b/packages/sections/src/target/Expression/GtexVariability.jsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, forwardRef } from "react";
 import {
   scaleLinear,
   scalePoint,
@@ -48,7 +48,7 @@ function buildTooltip(X, tooltipObject, data) {
     .join("");
 }
 
-function GtexVariability({ data }) {
+const GtexVariability = forwardRef(function GtexVariability({ data }, ref) {
   const theme = useTheme();
   const boxPlotRef = useRef();
   const tooltipRef = useRef();
@@ -239,7 +239,7 @@ function GtexVariability({ data }) {
   }
 
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width}>
+    <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} ref={ref}>
       <text x={margin.left} y="15" fill={theme.palette.grey[700]} fontSize="14">
         Normalised expression (RPKM)
       </text>
@@ -253,6 +253,6 @@ function GtexVariability({ data }) {
       <g ref={tooltipRef} transform={`translate(${margin.left}, ${margin.top})`} />
     </svg>
   );
-}
+});
 
 export default GtexVariability;
diff --git a/packages/ui/src/components/DownloadSvgPlot/DownloadSvgPlot.jsx b/packages/ui/src/components/DownloadSvgPlot/DownloadSvgPlot.jsx
@@ -4,8 +4,8 @@ import downloadSvg from "./DownloadSvg";
 import PlotContainer from "../PlotContainer";
 
 const handleSvgDownload = (svgContainer, filenameStem) => {
-  const node = svgContainer;
-  const svgNode = node.nodeName === "svg" ? node : node.querySelector("svg");
+  const svgNode = svgContainer.current;
+  if (svgNode === null) return;
   downloadSvg({ svgNode, filenameStem });
 };
 
@@ -34,7 +34,7 @@ function DownloadSvgPlot({
                 if (reportDownloadEvent) {
                   reportDownloadEvent();
                 }
-                handleSvgDownload(svgContainer.current, filenameStem);
+                handleSvgDownload(svgContainer, filenameStem);
               }}
             >
               SVG