From 2f8712f9357e929c7418814d771cb464ad881d09 Mon Sep 17 00:00:00 2001
From: Sam Rich <samrichca@users.noreply.github.com>
Date: Mon, 22 Apr 2019 11:43:47 -0400
Subject: [PATCH] [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 e1f1a2ea7a2b4a0888618fcc5dd287fbab829efd.

* improve styling

* remove background colours

* revert TS formatting
---
 .../components/DownloadVisualizationButton.js |   1 +
 .../@ncigdc/components/SurvivalPlotWrapper.js | 102 +++++++++---------
 .../@ncigdc/components/survivalPlot.css       |  25 -----
 .../ClinicalAnalysisResult.js                 |  27 +++--
 .../ClinicalAnalysis/ClinicalVariableCard.js  |  86 +++++++++------
 .../ClinicalAnalysis/print.css                |  80 ++++++++++++++
 .../ClinicalAnalysis/survivalPlot.css         |  33 ++++++
 src/packages/@ncigdc/theme/icons/Print.js     |   5 +
 src/packages/@ncigdc/theme/icons/index.js     |   2 +
 9 files changed, 244 insertions(+), 117 deletions(-)
 create mode 100644 src/packages/@ncigdc/modern_components/ClinicalAnalysis/print.css
 create mode 100644 src/packages/@ncigdc/modern_components/ClinicalAnalysis/survivalPlot.css
 create mode 100644 src/packages/@ncigdc/theme/icons/Print.js

diff --git a/src/packages/@ncigdc/components/DownloadVisualizationButton.js b/src/packages/@ncigdc/components/DownloadVisualizationButton.js
index ef7bdd6e8..aab8d72c1 100644
--- 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
index 90e1a8c72..870050d03 100644
--- 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
index bef2d2db8..13abe89ab 100644
--- 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
index c8cd4c130..9e4ce51f7 100644
--- 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
diff --git a/src/packages/@ncigdc/modern_components/ClinicalAnalysis/ClinicalVariableCard.js b/src/packages/@ncigdc/modern_components/ClinicalAnalysis/ClinicalVariableCard.js
index 52224a009..b31f13140 100644
--- a/src/packages/@ncigdc/modern_components/ClinicalAnalysis/ClinicalVariableCard.js
+++ b/src/packages/@ncigdc/modern_components/ClinicalAnalysis/ClinicalVariableCard.js
@@ -25,6 +25,9 @@ import { setModal } from '@ncigdc/dux/modal';
 import SaveSetModal from '@ncigdc/components/Modals/SaveSetModal';
 import AppendSetModal from '@ncigdc/components/Modals/AppendSetModal';
 import RemoveSetModal from '@ncigdc/components/Modals/RemoveSetModal';
+import DownloadVisualizationButton from '@ncigdc/components/DownloadVisualizationButton';
+import wrapSvg from '@ncigdc/utils/wrapSvg';
+import './survivalPlot.css';
 import { downloadToTSV } from '@ncigdc/components/DownloadTableToTsvButton';
 
 // survival plot
@@ -167,13 +170,13 @@ const valueIsYear = str => /year_of/.test(str);
 
 const getRangeValue = (key, field, nextInterval) => {
   if (valueIsDays(field)) {
-    return `${getLowerAgeYears(key)}${
-      nextInterval === 0 ? '+' : ' - ' + getUpperAgeYears(nextInterval - 1)
-    } years`;
+    return `${getLowerAgeYears(key)}${nextInterval === 0
+      ? '+'
+      : ' - ' + getUpperAgeYears(nextInterval - 1)} years`;
   } else if (valueIsYear(field)) {
-    return `${Math.floor(key)}${
-      nextInterval === 0 ? ' - present' : ' - ' + (nextInterval - 1)
-    }`;
+    return `${Math.floor(key)}${nextInterval === 0
+      ? ' - present'
+      : ' - ' + (nextInterval - 1)}`;
   } else {
     return key;
   }
@@ -189,7 +192,7 @@ const getCountLink = ({ doc_count, filters, totalDocs }) => (
     >
       {(doc_count || 0).toLocaleString()}
     </ExploreLink>
-    <span>{` (${(((doc_count || 0) / totalDocs) * 100).toFixed(2)}%)`}</span>
+    <span>{` (${((doc_count || 0) / totalDocs * 100).toFixed(2)}%)`}</span>
   </span>
 );
 
@@ -203,10 +206,9 @@ const enhance = compose(
   withProps(({ variable, data, fieldName }) => ({
     rawQueryData:
       variable.plotTypes === 'continuous'
-        ? (
-            (data.explore &&
-              data.explore.cases.aggregations[fieldName.replace('.', '__')]
-                .histogram) || {
+        ? ((data.explore &&
+            data.explore.cases.aggregations[fieldName.replace('.', '__')]
+              .histogram) || {
               buckets: [],
             }
           ).buckets
@@ -299,8 +301,9 @@ const enhance = compose(
                 .data.slice(0)
                 .reverse()
             : rawQueryData
-                .filter(bucket =>
-                  !IS_CDAVE_DEV ? bucket.key !== '_missing' : bucket.key
+                .filter(
+                  bucket =>
+                    !IS_CDAVE_DEV ? bucket.key !== '_missing' : bucket.key
                 )
                 .map(b => ({
                   ...b,
@@ -428,8 +431,8 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
             .data.slice(0)
             .reverse()
         : rawData
-            .filter(bucket =>
-              !IS_CDAVE_DEV ? bucket.key !== '_missing' : bucket.key
+            .filter(
+              bucket => (!IS_CDAVE_DEV ? bucket.key !== '_missing' : bucket.key)
             )
             .map(b => ({
               ...b,
@@ -499,10 +502,10 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
                   b.key === '_missing' || b.chart_doc_count < MINIMUM_CASES
                     ? 'Not enough data'
                     : selectedSurvivalValues.indexOf(b.key) > -1
-                    ? `Click icon to remove ${b.key}`
-                    : selectedSurvivalValues.length < MAXIMUM_CURVES
-                    ? `Click icon to plot ${b.key}`
-                    : `Maximum plots (${MAXIMUM_CURVES}) reached`
+                      ? `Click icon to remove ${b.key}`
+                      : selectedSurvivalValues.length < MAXIMUM_CURVES
+                        ? `Click icon to plot ${b.key}`
+                        : `Maximum plots (${MAXIMUM_CURVES}) reached`
                 }
               >
                 <Button
@@ -577,7 +580,7 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
         doc_count: (
           <span>
             {(noDataTotal || 0).toLocaleString()}
-            {` (${(((noDataTotal || 0) / totalDocs) * 100).toFixed(2)}%)`}
+            {` (${((noDataTotal || 0) / totalDocs * 100).toFixed(2)}%)`}
           </span>
         ),
         survival: '',
@@ -634,7 +637,7 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
             value:
               variable.active_calculation === 'number'
                 ? d.chart_doc_count
-                : (d.chart_doc_count / totalDocs) * 100,
+                : d.chart_doc_count / totalDocs * 100,
             tooltip: `${d.key}: ${d.chart_doc_count.toLocaleString()}`,
           };
         })
@@ -728,6 +731,7 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
         ? getContinuousSetFilters()
         : getCategoricalSetFilters();
   }
+  const wrapperId = `${fieldName.split('.')[1]}-chart`;
 
   const tsvSubstring = fieldName.replace(/\./g, '-');
   return (
@@ -790,11 +794,10 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
       )}
 
       {!_.isEmpty(tableData) && (
-        <div>
+        <div id={wrapperId}>
           <Row style={{ paddingLeft: 10 }}>
             {variable.active_chart !== 'survival' && (
-              <form>
-                {' '}
+              <form style={{ width: '100%' }}>
                 <label
                   htmlFor={`variable-percentage-radio-${fieldName}`}
                   style={{ marginRight: 10, fontSize: '1.2rem' }}
@@ -812,8 +815,7 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
                           value: 'percentage',
                           id,
                         })
-                      )
-                    }
+                      )}
                     checked={variable.active_calculation === 'percentage'}
                     style={{ marginRight: 5 }}
                   />
@@ -836,13 +838,31 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
                           value: 'number',
                           id,
                         })
-                      )
-                    }
+                      )}
                     checked={variable.active_calculation === 'number'}
                     style={{ marginRight: 5 }}
                   />
                   # of Cases
                 </label>
+                <DownloadVisualizationButton
+                  key="download"
+                  onClick={() => {
+                    console.log('chartData', chartData);
+                  }}
+                  svg={() =>
+                    wrapSvg({
+                      selector: `#${wrapperId} svg`,
+                      title: humanify({ term: fieldName }),
+                    })}
+                  data={chartData.map(d => ({
+                    label: d.fullLabel,
+                    value: d.value,
+                  }))}
+                  slug={`${fieldName}-bar-chart`}
+                  noText
+                  tooltipHTML="Download image or data"
+                  style={{ float: 'right', marginRight: 2 }}
+                />
               </form>
             )}
 
@@ -907,9 +927,9 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
             <BarChart
               data={chartData}
               yAxis={{
-                title: `${
-                  variable.active_calculation === 'number' ? '#' : '%'
-                } of Cases`,
+                title: `${variable.active_calculation === 'number'
+                  ? '#'
+                  : '%'} of Cases`,
                 style: styles.histogram(theme).axis,
               }}
               xAxis={{
@@ -942,7 +962,7 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
                 justifyContent: 'center',
                 flex: '0 0 auto',
                 height: '265px',
-                margin: '5px 5px 10px',
+                margin: '5px 2px 10px',
               }}
             >
               {selectedSurvivalValues.length === 0 ? (
@@ -972,7 +992,7 @@ const ClinicalVariableCard: React.ComponentType<IVariableCardProps> = ({
                 alignItems: 'center',
                 height: CHART_HEIGHT - 10,
                 backgroundColor: theme.greyScale5,
-                margin: '5px 5px 10px',
+                margin: '5px 2px 10px',
               }}
             >
               {variable.active_chart}
diff --git a/src/packages/@ncigdc/modern_components/ClinicalAnalysis/print.css b/src/packages/@ncigdc/modern_components/ClinicalAnalysis/print.css
new file mode 100644
index 000000000..e91ded529
--- /dev/null
+++ b/src/packages/@ncigdc/modern_components/ClinicalAnalysis/print.css
@@ -0,0 +1,80 @@
+.print-only {
+  display: none;
+}
+
+@media print {
+  *[style] {
+    font-family: Arial, Helvetica, sans-serif !important;
+    justify-content: left !important;
+    background: transparent !important;
+    background-color: transparent !important;
+  }
+  .no-print,
+  #header,
+  .test-footer,
+  .test-loading-container,
+  .test-notification-wrapper,
+  .global-tooltip,
+  .test-tabbed-links > div:first-child,
+  .test-tabs > div:first-child,
+  .fa,
+  .test-entity-table-wrapper,
+  button,
+  label {
+    display: none !important;
+  }
+  .test-tabbed-links > div[style],
+  .test-tabs > div[style] {
+    border: 0 none !important;
+  }
+
+  .test-tabs[style] {
+    min-width: auto !important;
+  }
+
+  #skip[style],
+  .test-tabbed-links[style],
+  .test-tabs[style] {
+    padding: 0 !important;
+  }
+
+  .clinical-analysis-categorical-card[style] {
+    display: inline-block !important;
+    width: 100%;
+    min-width: auto !important;
+    height: auto !important;
+    box-sizing: border-box;
+    margin: 0 !important;
+    page-break-after: always;
+    page-break-inside: avoid;
+    position: relative !important;
+  }
+
+  .clinical-analysis-categorical-card div[style] {
+    margin: 0 !important;
+  }
+
+  .print-grid[style] {
+    display: block !important;
+  }
+  .print-grid div[style] {
+    height: auto !important;
+  }
+  .test-survival-plot-meta div:nth-of-type(2),
+  .test-survival-plot-meta span:nth-of-type(1) {
+    text-align: left;
+  }
+
+  .survival-legend-wrapper[style] {
+    justify-content: left !important;
+  }
+  .survival-legend-wrapper > div > div[style] {
+    padding-left: 0 !important;
+  }
+  .p-value > div {
+    text-align: left !important;
+  }
+  .print-only {
+    display: block;
+  }
+}
diff --git a/src/packages/@ncigdc/modern_components/ClinicalAnalysis/survivalPlot.css b/src/packages/@ncigdc/modern_components/ClinicalAnalysis/survivalPlot.css
new file mode 100644
index 000000000..6dd38a2a5
--- /dev/null
+++ b/src/packages/@ncigdc/modern_components/ClinicalAnalysis/survivalPlot.css
@@ -0,0 +1,33 @@
+/* clinical analysis */
+
+.clinical-analysis-categorical-card .test-visualization-title[style] {
+  display: none !important;
+}
+
+.clinical-analysis-categorical-card .test-visualization-title + div[style] {
+  display: block !important;
+}
+
+.clinical-analysis-categorical-card .test-visualization-header[style] {
+  display: block !important;
+  margin: 0 !important;
+  text-align: right;
+  width: 100%;
+}
+
+.clinical-analysis-categorical-card .test-survival-plot-meta[style] {
+  display: block !important;
+}
+
+.clinical-analysis-categorical-card .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;
+}
+
+.test-download-viz-button + span[style] {
+  margin-left: 5px !important;
+}
diff --git a/src/packages/@ncigdc/theme/icons/Print.js b/src/packages/@ncigdc/theme/icons/Print.js
new file mode 100644
index 000000000..ffa07f6ef
--- /dev/null
+++ b/src/packages/@ncigdc/theme/icons/Print.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default ({ className = '', ...props }) => (
+  <i className={`${className} fa fa-print`} {...props} />
+);
diff --git a/src/packages/@ncigdc/theme/icons/index.js b/src/packages/@ncigdc/theme/icons/index.js
index 65acd6757..1e37590fd 100644
--- a/src/packages/@ncigdc/theme/icons/index.js
+++ b/src/packages/@ncigdc/theme/icons/index.js
@@ -2,6 +2,7 @@
 
 import DownloadIcon from './Download';
 import SurvivalIcon from './SurvivalIcon';
+import PrintIcon from './Print';
 import SortIcon from './Sort';
 import SpinnerIcon from './Spinner';
 import DoubleArrowLeftIcon from './DoubleArrowLeft';
@@ -25,6 +26,7 @@ import BoxPlot from './BoxPlot';
 export {
   DownloadIcon,
   SurvivalIcon,
+  PrintIcon,
   SortIcon,
   SpinnerIcon,
   DoubleArrowLeftIcon,