✨ Feature - Clinical Analysis

package.json

@@ -83,6 +83,7 @@
     "react-relay-network-layer": "2.0.1",
     "react-router-dom": "4.2.2",
     "react-sizeme": "2.3.4",
+    "react-toggle": "4.0.2",
     "recompose": "0.30.0",
     "redux": "3.6.0",
     "redux-actions": "1.2.2",

src/packages/@ncigdc/components/Aggregations/TermAggregation.js

@@ -32,7 +32,7 @@ type TProps = {
   showingMore: boolean,
 };
 
-const ToggleMoreLink = styled.div({
+export const ToggleMoreLink = styled.div({
   marginLeft: 'auto',
   color: ({ theme }) => theme.greyScale7,
   fontSize: '1.2rem',
@@ -67,37 +67,35 @@ const TermAggregation = (props: TProps) => {
           [];
         return (
           <Container style={props.style} className="test-term-aggregation">
-            {!props.collapsed &&
-              props.showingValueSearch && (
-                <Row>
-                  <Input
-                    getNode={node => {
-                      input = node;
+            {!props.collapsed && props.showingValueSearch && (
+              <Row>
+                <Input
+                  getNode={node => {
+                    input = node;
+                  }}
+                  style={{ borderRadius: '4px', marginBottom: '6px' }}
+                  onChange={() => props.setFilter(input.value)}
+                  placeholder={'Search...'}
+                  aria-label="Search..."
+                  autoFocus
+                />
+                {input && input.value && (
+                  <CloseIcon
+                    style={{
+                      position: 'absolute',
+                      right: 0,
+                      padding: '10px',
+                      transition: 'all 0.3s ease',
+                      outline: 0,
+                    }}
+                    onClick={() => {
+                      props.setFilter('');
+                      input.value = '';
                     }}
-                    style={{ borderRadius: '4px', marginBottom: '6px' }}
-                    onChange={() => props.setFilter(input.value)}
-                    placeholder={'Search...'}
-                    aria-label="Search..."
-                    autoFocus
                   />
-                  {input &&
-                    input.value && (
-                      <CloseIcon
-                        style={{
-                          position: 'absolute',
-                          right: 0,
-                          padding: '10px',
-                          transition: 'all 0.3s ease',
-                          outline: 0,
-                        }}
-                        onClick={() => {
-                          props.setFilter('');
-                          input.value = '';
-                        }}
-                      />
-                    )}
-                </Row>
-              )}
+                )}
+              </Row>
+            )}
             {!props.collapsed && (
               <Column>
                 {_.orderBy(filteredBuckets, 'doc_count', 'desc')
@@ -140,17 +138,17 @@ const TermAggregation = (props: TProps) => {
                           })}
                           id={`input-${props.title}-${bucket.name.replace(
                             /\s/g,
-                            '-',
+                            '-'
                           )}`}
                           name={`input-${props.title}-${bucket.name.replace(
                             /\s/g,
-                            '-',
+                            '-'
                           )}`}
                         />
                         <OverflowTooltippedLabel
                           htmlFor={`input-${props.title}-${bucket.name.replace(
                             /\s/g,
-                            '-',
+                            '-'
                           )}`}
                           style={{
                             marginLeft: '0.3rem',
@@ -202,10 +200,10 @@ const enhance = compose(
       b =>
         b.key !== '_missing' &&
         (b.key || '').length &&
-        b.key.toLowerCase().includes(filter.toLowerCase()),
+        b.key.toLowerCase().includes(filter.toLowerCase())
     ),
   })),
-  pure,
+  pure
 );
 
 export default enhance(TermAggregation);

src/packages/@ncigdc/components/Charts/BarChart.js

@@ -4,7 +4,13 @@
 import React from 'react';
 import * as d3 from 'd3';
 import ReactFauxDOM from 'react-faux-dom';
-import { compose, withState, pure } from 'recompose';
+import {
+  compose,
+  withState,
+  pure,
+  withProps,
+  withPropsOnChange,
+} from 'recompose';
 
 // Custom
 import { withTheme } from '@ncigdc/theme';
@@ -26,6 +32,7 @@ const BarChart = ({
 }) => {
   const el = ReactFauxDOM.createElement('div');
   el.style.width = '100%';
+
   el.setAttribute('class', 'test-bar-chart');
   const innerPadding = 0.3;
   const outerPadding = 0.3;
@@ -83,13 +90,12 @@ const BarChart = ({
       .axisLeft(y)
       .ticks(Math.min(4, maxY))
       .tickSize(-chartWidth)
-      .tickSizeOuter(0),
+      .tickSizeOuter(0)
   );
 
   yG.selectAll('path').style('stroke', 'none');
   yG.selectAll('line').style('stroke', yAxisStyle.stroke);
-  yG
-    .selectAll('text')
+  yG.selectAll('text')
     .style('fontSize', yAxisStyle.fontSize)
     .style('fill', yAxisStyle.textFill);
 
@@ -110,8 +116,7 @@ const BarChart = ({
     .attr('transform', `translate(0, ${height})`)
     .call(d3.axisBottom(x));
 
-  xG
-    .selectAll('text')
+  xG.selectAll('text')
     .style('text-anchor', 'end')
     .style('fontSize', xAxisStyle.fontSize)
     .style('fontWeight', xAxisStyle.fontWeight)
@@ -124,6 +129,15 @@ const BarChart = ({
 
   xG.selectAll('line').style('stroke', xAxisStyle.stroke);
 
+  xG.selectAll('.tick')
+    .data(data)
+    .on('mouseenter', d => {
+      setTooltip(d.tooltip);
+    })
+    .on('mouseleave', () => {
+      setTooltip();
+    });
+
   const barGs = svg
     .selectAll('g.chart')
     .data(data)
@@ -165,6 +179,6 @@ export default compose(
   withTheme,
   withTooltip,
   withState('chart', 'setState', <span />),
-  withSize(),
-  pure,
+  withSize({ refreshRate: 16 }),
+  pure
 )(BarChart);

src/packages/@ncigdc/components/DownloadTableToTsvButton.js

@@ -21,12 +21,47 @@ const getSingleHeader = (headThs: Array<NodeList>) =>
     headThs[0],
     (acc, th) =>
       th.rowSpan === 2 ? [...acc, th] : [...acc, ...map(headThs[1], t => t)],
-    [],
+    []
   );
 
-const DownloadTableToTsvButton = compose(
-  withTooltip,
-)(
+export const downloadToTSV = ({ selector, filename }) => {
+  const tableEl = document.querySelector(selector);
+  const headTrs = tableEl.querySelector('thead').querySelectorAll('tr');
+  const headThs = map(headTrs, h => h.querySelectorAll('th'));
+  const thEls =
+    headThs.length === 2
+      ? getSingleHeader(headThs)
+      : tableEl.querySelectorAll('th');
+  const thText = map(thEls, el => el.innerText).map(t =>
+    t.replace(/\s+/g, ' ')
+  );
+  const trs = tableEl.querySelector('tbody').querySelectorAll('tr');
+  const tdText = map(trs, t => {
+    const tds = t.querySelectorAll('td');
+    return reduce(
+      tds,
+      (acc, td) => {
+        const markedForTsv = td.querySelector('.for-tsv-export');
+        const exportText = markedForTsv ? markedForTsv.innerText : td.innerText;
+        const joinedText = exportText
+          .trim()
+          .split(/\s*\n\s*/)
+          .join(',')
+          .replace(/[\s\u00A0]+/g, ' ');
+        const colspan = td.getAttribute('colspan');
+        const fittedToColspan = colspan
+          ? [joinedText, ...Array(colspan - 1)]
+          : [joinedText];
+        return [...acc, ...fittedToColspan];
+      },
+      []
+    );
+  });
+  saveFile(mapStringArrayToTsvString(thText, tdText), 'TSV', filename);
+  track('download-table', { type: 'tsv', filename, selector });
+};
+
+const DownloadTableToTsvButton = compose(withTooltip)(
   ({
     filename,
     selector,
@@ -39,50 +74,14 @@ const DownloadTableToTsvButton = compose(
       leftIcon={leftIcon}
       style={{ ...visualizingButton, ...style }}
       onMouseEnter={() =>
-        displayTooltip && setTooltip(<span>Export current view</span>)}
+        displayTooltip && setTooltip(<span>Export current view</span>)
+      }
       onMouseLeave={() => displayTooltip && setTooltip('')}
-      onClick={() => {
-        const tableEl = document.querySelector(selector);
-        const headTrs = tableEl.querySelector('thead').querySelectorAll('tr');
-        const headThs = map(headTrs, h => h.querySelectorAll('th'));
-        const thEls =
-          headThs.length === 2
-            ? getSingleHeader(headThs)
-            : tableEl.querySelectorAll('th');
-        const thText = map(thEls, el => el.innerText).map(t =>
-          t.replace(/\s+/g, ' '),
-        );
-        const trs = tableEl.querySelector('tbody').querySelectorAll('tr');
-        const tdText = map(trs, t => {
-          const tds = t.querySelectorAll('td');
-          return reduce(
-            tds,
-            (acc, td) => {
-              const markedForTsv = td.querySelector('.for-tsv-export');
-              const exportText = markedForTsv
-                ? markedForTsv.innerText
-                : td.innerText;
-              const joinedText = exportText
-                .trim()
-                .split(/\s*\n\s*/)
-                .join(',')
-                .replace(/[\s\u00A0]+/g, ' ');
-              const colspan = td.getAttribute('colspan');
-              const fittedToColspan = colspan
-                ? [joinedText, ...Array(colspan - 1)]
-                : [joinedText];
-              return [...acc, ...fittedToColspan];
-            },
-            [],
-          );
-        });
-        saveFile(mapStringArrayToTsvString(thText, tdText), 'TSV', filename);
-        track('download-table', { type: 'tsv', filename, selector });
-      }}
+      onClick={() => downloadToTSV({ selector, filename })}
     >
       TSV
     </Button>
-  ),
+  )
 );
 export default DownloadTableToTsvButton;
 

src/packages/@ncigdc/components/DownloadVisualizationButton.js

@@ -76,6 +76,7 @@ const DownloadVisualizationButton = ({
           disabled={disabled}
           leftIcon={!noText && <Download />}
           style={visualizingButton}
+          type="button"
         >
           {noText ? (
             <span>

src/packages/@ncigdc/components/EntityPageHorizontalTable.js

@@ -36,6 +36,7 @@ const EntityPageHorizontalTable = ({
   tableId,
   idKey,
   dividerStyle,
+  tableContainerStyle = {},
   ...props
 }) => (
   <Column
@@ -44,28 +45,29 @@ const EntityPageHorizontalTable = ({
       flexWrap: 'wrap',
       overflow: 'auto',
       ...style,
+      ...tableContainerStyle,
     }}
   >
     {(title || rightComponent) && (
-        <h1
-          style={{
-            color: theme.greyScale7,
-            width: '100%',
-            fontSize: '2rem',
-            lineHeight: '1.4em',
-            fontWeight: 'normal',
-            marginTop: 0,
-            marginBottom: 0,
-            padding: '1rem',
-            backgroundColor: '#fff',
-            display: 'flex',
-            justifyContent: 'space-between',
-            ...titleStyle,
-          }}
-        >
-          {title || <span />} {rightComponent}
-        </h1>
-      )}
+      <h1
+        style={{
+          color: theme.greyScale7,
+          width: '100%',
+          fontSize: '2rem',
+          lineHeight: '1.4em',
+          fontWeight: 'normal',
+          marginTop: 0,
+          marginBottom: 0,
+          padding: '1rem',
+          backgroundColor: '#fff',
+          display: 'flex',
+          justifyContent: 'space-between',
+          ...titleStyle,
+        }}
+      >
+        {title || <span />} {rightComponent}
+      </h1>
+    )}
     {!!data.length && (
       <Table
         id={tableId}
@@ -95,7 +97,7 @@ const EntityPageHorizontalTable = ({
               >
                 {s}
               </Th>
-            )),
+            ))
         )}
         body={
           <tbody>
@@ -126,7 +128,7 @@ const EntityPageHorizontalTable = ({
                       )}
                       {v}
                     </Td>
-                  )),
+                  ))
                 )}
               </Tr>
             ))}

src/packages/@ncigdc/components/Explore/GenesTab.js

@@ -133,8 +133,9 @@ export default compose(
             <SurvivalPlotWrapper
               {...survivalData}
               onReset={() => setSelectedSurvivalData({})}
+              plotType="mutation"
               height={240}
-              survivalPlotloading={loading}
+              survivalPlotLoading={loading}
             />
           </Column>
         </Row>