Enrichments: Fix downloading gene plot

cBioPortal · Feb 18, 2020 · 2d2dac9 · 2d2dac9
1 parent 38e1fe1
commit 2d2dac9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/pages/resultsView/enrichments/GeneBarPlot.tsx b/src/pages/resultsView/enrichments/GeneBarPlot.tsx
@@ -37,8 +37,6 @@ export interface IGeneBarPlotProps {
     dataStore: EnrichmentsTableDataStore;
 }
 
-const SVG_ID = 'GroupComparisonGeneFrequencyPlot';
-
 const DEFAULT_GENES_COUNT = 10;
 
 const MAXIMUM_ALLOWED_GENES = 100;
@@ -57,6 +55,7 @@ export default class GeneBarPlot extends React.Component<
     @observable selectedGenes: SingleGeneQuery[] | undefined;
     @observable _label: GeneOptionLabel | undefined;
     @observable isGeneSelectionPopupVisible: boolean | undefined = false;
+    @observable private svgContainer: SVGElement | null;
 
     @computed get geneListOptions() {
         return getGeneListOptions(this.props.data, this.props.showCNAInTable);
@@ -138,11 +137,6 @@ export default class GeneBarPlot extends React.Component<
         return _.flatMap(this.barPlotOrderedGenes, gene => [gene + '*', gene]);
     }
 
-    @autobind
-    private getSvg() {
-        return document.getElementById(SVG_ID) as SVGElement | null;
-    }
-
     @autobind
     private getTooltip(datum: any) {
         let geneSymbol = datum.majorCategory as string;
@@ -271,8 +265,8 @@ export default class GeneBarPlot extends React.Component<
                             </div>
                         </DefaultTooltip>
                         <DownloadControls
-                            getSvg={this.getSvg}
-                            filename={SVG_ID}
+                            getSvg={() => this.svgContainer}
+                            filename={'GroupComparisonGeneFrequencyPlot'}
                             dontFade={true}
                             type="button"
                         />
@@ -307,7 +301,6 @@ export default class GeneBarPlot extends React.Component<
                 {this.toolbar}
                 <div style={{ overflow: 'auto hidden', position: 'relative' }}>
                     <MultipleCategoryBarPlot
-                        svgId={SVG_ID}
                         barWidth={CHART_BAR_WIDTH}
                         domainPadding={CHART_BAR_WIDTH}
                         chartBase={300}
@@ -323,6 +316,7 @@ export default class GeneBarPlot extends React.Component<
                         countAxisLabel={`${this.yAxislabel} (%)`}
                         tooltip={this.getTooltip}
                         categoryToColor={this.props.categoryToColor}
+                        containerRef={ref => (this.svgContainer = ref)}
                     />
                 </div>
             </div>

diff --git a/src/shared/components/plots/MultipleCategoryBarPlot.tsx b/src/shared/components/plots/MultipleCategoryBarPlot.tsx
@@ -55,6 +55,7 @@ export interface IMultipleCategoryBarPlotProps {
     axisStyle?: any;
     countAxisLabel?: string;
     tooltip?: (datum: any) => JSX.Element;
+    containerRef?: (svgContainer: SVGElement | null) => void;
 }
 
 export interface IMultipleCategoryBarPlotData {
@@ -846,6 +847,11 @@ export default class MultipleCategoryBarPlot extends React.Component<
                         role="img"
                         viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}
                         onMouseMove={this.onMouseMove}
+                        ref={ref => {
+                            if (this.props.containerRef) {
+                                this.props.containerRef(ref);
+                            }
+                        }}
                     >
                         <g
                             transform={`translate(${this.leftPadding}, ${this.topPadding})`}