fix: add symbollic allele example in alt field

... and corresponding exception handling in case any other issue causes invalid SVG/XML in the future
uc-cdis · Jun 28, 2023 · 859108a · 859108a
1 parent 0cf45c0
commit 859108a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/src/Analysis/GWASResults/TestData/Diagrams/ManhattanPlotTestDataLarge.json b/src/Analysis/GWASResults/TestData/Diagrams/ManhattanPlotTestDataLarge.json
@@ -25104,7 +25104,7 @@
             "chrom": "6",
             "pos": 31321100,
             "ref": "T",
-            "alt": "C",
+            "alt": "<CN0>",
             "rsids": "rs7748141",
             "nearest_genes": "HLA-B",
             "consequence": "intergenic_variant",

diff --git a/src/Analysis/GWASResults/Views/Results/ResultsPheWeb/ResultsPheWeb.jsx b/src/Analysis/GWASResults/Views/Results/ResultsPheWeb/ResultsPheWeb.jsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { useQuery } from 'react-query';
-import { Spin, Button } from 'antd';
+import { Spin, Button, notification } from 'antd';
 import * as d3 from 'd3-selection';
 import SharedContext from '../../../Utils/SharedContext';
 import {
@@ -21,6 +21,14 @@ const ResultsPheWeb = () => {
     () => getDataForWorkflowArtifact(name, uid, 'pheweb_json_index'),
     queryConfig,
   );
+  const [api, contextHolder] = notification.useNotification();
+  const openNotification = (notificationMessage) => {
+    api.open({
+      message: notificationMessage,
+      description: '',
+      duration: 0,
+    });
+  };
   const manhattanPlotContainerId = 'manhattan_plot_container';
 
   const downloadManhattanPlot = () => {
@@ -29,7 +37,6 @@ const ResultsPheWeb = () => {
       .select('svg')
       .attr('version', 1.1)
       .attr('xmlns', 'http://www.w3.org/2000/svg')
-      .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink') // https://stackoverflow.com/questions/59138117/svg-namespace-prefix-xlink-for-href-on-image-is-not-defined - this deprecated xlink is still used by PheWeb
       .node().parentNode.innerHTML;
 
     const svgAsInnerHTMLAsUtf8Buffer = Buffer.from(svgAsInnerHTML);
@@ -39,7 +46,6 @@ const ResultsPheWeb = () => {
 
     const svgData = `data:image/svg+xml;base64,${svgAsInnerHTMLAsBase64}`;
     const tmpImage = new Image();
-    tmpImage.src = svgData;
     tmpImage.onload = function () {
       const hiddenCanvas = document.createElement('canvas');
       hiddenCanvas.width = document.body.clientWidth;
@@ -59,6 +65,15 @@ const ResultsPheWeb = () => {
       a.href = canvasData;
       a.click();
     };
+    tmpImage.onerror = function (error) {
+      // when SVG is invalid, the error.message will be undefined:
+      if (!error.message) {
+        openNotification('❌ Could not download. Invalid SVG');
+      } else {
+        openNotification(`❌ Could not download. \n\n${error.message}`);
+      }
+    };
+    tmpImage.src = svgData;
   };
 
   const displayTopSection = () => (
@@ -101,17 +116,20 @@ const ResultsPheWeb = () => {
   }
 
   return (
-    <div className='results-view'>
-      {displayTopSection()}
-      <section className='data-viz'>
-        <ManhattanPlot
-          variant_bins={data.variant_bins}
-          unbinned_variants={data.unbinned_variants}
-          manhattan_plot_container_id={manhattanPlotContainerId}
-        />
-      </section>
-      <TopLociTable data={data.unbinned_variants} />
-    </div>
+    <React.Fragment>
+      {contextHolder}
+      <div className='results-view'>
+        {displayTopSection()}
+        <section className='data-viz'>
+          <ManhattanPlot
+            variant_bins={data.variant_bins}
+            unbinned_variants={data.unbinned_variants}
+            manhattan_plot_container_id={manhattanPlotContainerId}
+          />
+        </section>
+        <TopLociTable data={data.unbinned_variants} />
+      </div>
+    </React.Fragment>
   );
 };
 export default ResultsPheWeb;