[PRTL-2503] Print/download Clinical Analysis plots (#2517)

* add button type to stop submit action * add print css and print button * move survival plot css to the right folder * add print icon to icon index * adding print css * don't print empty survival plots * Revert "don't print empty survival plots" This reverts commit e1f1a2e. * improve styling * remove background colours * revert TS formatting
NCI-GDC · Apr 22, 2019 · 2f8712f · 2f8712f
1 parent 22fb780
commit 2f8712f
Show file tree

Hide file tree

Showing 9 changed files with 244 additions and 117 deletions.
diff --git a/src/packages/@ncigdc/components/DownloadVisualizationButton.js b/src/packages/@ncigdc/components/DownloadVisualizationButton.js
@@ -76,6 +76,7 @@ const DownloadVisualizationButton = ({
           disabled={disabled}
           leftIcon={!noText && <Download />}
           style={visualizingButton}
+          type="button"
         >
           {noText ? (
             <span>

diff --git a/src/packages/@ncigdc/components/SurvivalPlotWrapper.js b/src/packages/@ncigdc/components/SurvivalPlotWrapper.js
@@ -112,58 +112,54 @@ const SurvivalPlotWrapper = ({
           <VisualizationHeader
             title={plotType === 'mutation' ? TITLE : ''}
             buttons={[
-              ...(plotType === 'mutation'
-                ? [
-                    <DownloadVisualizationButton
-                      key="download"
-                      svg={() =>
-                        wrapSvg({
-                          selector: `.${uniqueClass} .${CLASS_NAME} svg`,
-                          title: TITLE,
-                          className: CLASS_NAME,
-                          embed: {
-                            top: {
-                              elements: [
-                                document.querySelector(
-                                  `.${uniqueClass} .legend-0`
-                                ),
-                                document.querySelector(
-                                  `.${uniqueClass} .legend-1`
-                                ),
-                                pValue
-                                  ? document.querySelector(
-                                      `.${uniqueClass} .p-value`
-                                    )
-                                  : null,
-                              ],
-                            },
-                          },
-                        })}
-                      data={results.map((set, i) => ({
-                        ...set,
-                        meta: {
-                          ...set.meta,
-                          label: set.meta.label || `S${i + 1}`,
-                        },
-                      }))}
-                      stylePrefix={`.${CLASS_NAME}`}
-                      slug="survival-plot"
-                      noText
-                      tooltipHTML="Download SurvivalPlot data or image"
-                      tsvData={results.reduce((data, set, i) => {
-                        const mapData = set.donors.map(d => toMap(d));
-                        return [
-                          ...data,
-                          ...(results.length > 1
-                            ? mapData.map(m =>
-                                m.set('label', set.meta.label || `S${i + 1}`)
-                              )
-                            : mapData),
-                        ];
-                      }, [])}
-                    />,
-                  ]
-                : []),
+              <DownloadVisualizationButton
+                key="download"
+                svg={() =>
+                  wrapSvg({
+                    selector: `.${uniqueClass} .${CLASS_NAME} svg`,
+                    title: TITLE,
+                    className: CLASS_NAME,
+                    embed: {
+                      top: {
+                        elements: legend
+                          .map((l, i) =>
+                            document.querySelector(
+                              `.${uniqueClass} .legend-${i}`
+                            )
+                          )
+                          .concat(
+                            pValue
+                              ? document.querySelector(
+                                  `.${uniqueClass} .p-value`
+                                )
+                              : null
+                          ),
+                      },
+                    },
+                  })}
+                data={results.map((set, i) => ({
+                  ...set,
+                  meta: {
+                    ...set.meta,
+                    label: set.meta.label || `S${i + 1}`,
+                  },
+                }))}
+                stylePrefix={`.${CLASS_NAME}`}
+                slug="survival-plot"
+                noText
+                tooltipHTML="Download SurvivalPlot data or image"
+                tsvData={results.reduce((data, set, i) => {
+                  const mapData = set.donors.map(d => toMap(d));
+                  return [
+                    ...data,
+                    ...(results.length > 1
+                      ? mapData.map(m =>
+                          m.set('label', set.meta.label || `S${i + 1}`)
+                        )
+                      : mapData),
+                  ];
+                }, [])}
+              />,
               <Tooltip Component="Reset SurvivalPlot Zoom" key="reset">
                 <Button style={visualizingButton} onClick={() => setXDomain()}>
                   <i className="fa fa-undo" />
@@ -179,6 +175,7 @@ const SurvivalPlotWrapper = ({
                 flexWrap: 'wrap',
                 marginTop: '0.5rem',
               }}
+              className="survival-legend-wrapper"
             >
               {legend &&
                 legend.map((l, i) => (
@@ -230,6 +227,7 @@ const SurvivalPlotWrapper = ({
               marginRight: SVG_MARGINS.right,
               fontSize: '1.1rem',
             }}
+            className="no-print"
           >
             drag to zoom
           </div>

diff --git a/src/packages/@ncigdc/components/survivalPlot.css b/src/packages/@ncigdc/components/survivalPlot.css
@@ -58,28 +58,3 @@
   position: static !important;
   display: block !important;
 }
-
-/* clinical analysis */
-
-.clinical-survival-plot .test-visualization-title[style] {
-  display: none !important;
-}
-
-.clinical-survival-plot .test-visualization-header[style] {
-  display: block !important;
-  float: right;
-  margin: 0 !important;
-}
-
-.clinical-survival-plot .test-survival-plot-meta[style] {
-  display: block !important;
-}
-
-.clinical-survival-plot .p-value {
-  margin-right: 40px;
-}
-
-.clinical-analysis-categorical-card td:nth-child(2)[style] {
-  /* wrap long facet values so the table doesn't scroll */
-  white-space: normal !important;
-}
diff --git a/src/packages/@ncigdc/modern_components/ClinicalAnalysis/ClinicalAnalysisResult.js b/src/packages/@ncigdc/modern_components/ClinicalAnalysis/ClinicalAnalysisResult.js
@@ -1,5 +1,11 @@
 import React from 'react';
-import { compose, withState, withPropsOnChange, withProps, withHandlers, } from 'recompose';
+import {
+  compose,
+  withState,
+  withPropsOnChange,
+  withProps,
+  withHandlers,
+} from 'recompose';
 import { connect } from 'react-redux';
 import SearchIcon from 'react-icons/lib/fa/search';
 import _ from 'lodash';
@@ -8,7 +14,7 @@ import { Row, Column } from '@ncigdc/uikit/Flex';
 import Button from '@ncigdc/uikit/Button';
 import { Tooltip } from '@ncigdc/uikit/Tooltip';
 import {
-  DownloadIcon,
+  PrintIcon,
   CloseIcon,
   SurvivalIcon,
   BarChartIcon,
@@ -39,6 +45,8 @@ import tryParseJSON from '@ncigdc/utils/tryParseJSON';
 import getUsefulFacets from '@ncigdc/utils/getUsefulFacets';
 import DeprecatedSetResult from './DeprecatedSetResult';
 import CohortDropdown from './CohortDropdown';
+import './print.css';
+import './survivalPlot.css';
 
 // survival plot
 import { getDefaultCurve } from '@ncigdc/utils/survivalplot';
@@ -313,13 +321,16 @@ const ClinicalAnalysisResult = ({
           >
             Copy Analysis
           </Button>
-          <Tooltip Component={<span>Download</span>}>
+          <Tooltip Component={<span>Print</span>}>
             <Button
               style={{ ...visualizingButton, height: '100%' }}
               disabled={false}
+              onClick={() => {
+                window.print();
+              }}
             >
-              <DownloadIcon />
-              <Hidden>Download</Hidden>
+              <PrintIcon />
+              <Hidden>Print</Hidden>
             </Button>
           </Tooltip>
         </Row>
@@ -343,6 +354,7 @@ const ClinicalAnalysisResult = ({
               minWidth: 260,
               marginBottom: '1rem',
             }}
+            className="no-print"
           >
             <Row style={{ justifyContent: 'flex-end' }}>
               <Tooltip Component={'Hide Control Panel'}>
@@ -462,7 +474,7 @@ const ClinicalAnalysisResult = ({
                     flexDirection: 'column',
                     flex: '0 0 auto',
                     height: 250,
-                    margin: '5px 5px 10px',
+                    margin: '5px 2px 10px',
                   }}
                 >
                   <SurvivalPlotWrapper
@@ -484,6 +496,7 @@ const ClinicalAnalysisResult = ({
               gridTemplateRows: 'repeat(auto)',
               ...(controlPanelExpanded ? {} : { marginLeft: '1%' }),
             }}
+            className="print-grid"
           >
             <Column
               style={{
@@ -511,7 +524,7 @@ const ClinicalAnalysisResult = ({
               <div
                 style={{
                   height: '250px',
-                  margin: '5px 5px 10px',
+                  margin: '5px 2px 10px',
                 }}
               >
                 <SurvivalPlotWrapper