Feat/oncogrid updates

app/react-components/Project.js

@@ -132,8 +132,6 @@ const Project = ({
   const frequentMutations = fm.map(x => {
     let consequence = x.consequence.find(x => x.transcript.is_canonical);
 
-    console.log(consequence)
-
     return {
       ...x,
       num_affected_cases_project: x.occurrence.filter(x =>
@@ -400,13 +398,6 @@ const Project = ({
             num_affected_cases_all: `${g.num_affected_cases_all} / ${totalNumCases} (${(g.num_affected_cases_all/totalNumCases * 100).toFixed(2)}%)`,
           }))}
       /></div>) : 'No mutated gene data to display'}
-      <Column>
-        <h1 style={styles.heading} id="oncogrid">
-          <i className="fa fa-th" style={{ paddingRight: `10px` }} /> OncoGrid
-        </h1>
-      </Column>
-
-      <OncoGridWrapper projectId={project.project_id} esHost={esHost} />
 
       <Column>
         <h1 style={styles.heading} id="frequent-mutations">
@@ -421,6 +412,14 @@ const Project = ({
         totalNumCases={totalNumCases}
         project={$scope.project.project_id}
       />
+
+      <Column>
+        <h1 style={styles.heading} id="oncogrid">
+          <i className="fa fa-th" style={{ paddingRight: `10px` }} /> OncoGrid
+        </h1>
+      </Column>
+
+      <OncoGridWrapper projectId={project.project_id} esHost={esHost} width={width} />
     </span>
   );
 };

app/react-components/components/Legends.js

@@ -32,7 +32,7 @@ export const StepLegend = ({steps = [0.25, 0.5, 0.75, 1], color = '#D33682', lef
     <Row style={styles.td}>
       {
         steps.map(opacity => (
-            <div style={{ ...color, background: color, opacity }} key={opacity} />
+            <div style={{ ...styles.color, background: color, opacity }} key={opacity} />
           ))
       }
     </Row>

app/react-components/oncogrid/OncoGridWrapper.js

@@ -27,9 +27,6 @@ const colorMap = {
 const styles = {
   container: {
     overflow: 'visible',
-    maxWidth: 900,
-    marginLeft: 'auto',
-    marginRight: 'auto',
   },
   fullscreen: {
     maxWidth: '100%',
@@ -80,11 +77,11 @@ const clickHandlers = {
   },
 
   geneClick: function (g) {
-    console.log('geneClick'); // go to gene page
+    window.location = `/genes/${g.id}`;
   },
 
   donorClick: function (d) {
-    console.log('donorClick') // go to case page
+    window.location = `/cases/${d.id}`;
   },
 };
 
@@ -125,7 +122,7 @@ const OncoGridWrapper = ({
               }
             }
           >
-            <i className="fa fa-download" /><span style={styles.hidden}>reload</span>
+            <i className="fa fa-download" /><span style={styles.hidden}>download</span>
           </Button>
           <Button
             style={styles.button}
@@ -162,8 +159,7 @@ const OncoGridWrapper = ({
             onClick={() => {
               if (gridState.isFullScreen) {
                 exitFullScreen();
-                dispatch({ type: 'reload', 
-                 });
+                dispatch({ type: 'reload', grid });
               } else {
                 enterFullScreen(document.querySelector('#oncogrid-container'));
                 grid.resize(screen.width - 400, screen.height - 400, true);
@@ -206,17 +202,27 @@ OncoGridWrapper.propTypes = {
 
 const enhance = compose(
   lifecycle({
+    componentWillReceiveProps(nextProps) {
+      const { grid, gridPadding, gridHeight, gridContainer } = this.state;
+      grid.resize(gridContainer.offsetWidth - gridPadding, gridHeight);
+    },
     componentDidMount() {
       const { projectId, esHost } = this.props;
       getQueries(projectId, esHost)
         .then((responses) => {
+          const container = document.querySelector('#oncogrid-container');
+          const height = 150;
+          const padding = 306;
+
           const gridParams = oncoGridParams({
             colorMap,
             clickHandlers,
             element: `#${GRID_ID}`,
             donorData: responses.cases,
             geneData: responses.genes,
             occurencesData: responses.occurences,
+            width: container.offsetWidth - padding,
+            height: height,
             addTrackFunc: (tracks, callback) => {
               this.setState({
                 showOverlay: true,
@@ -234,7 +240,15 @@ const enhance = compose(
           if (gridParams) {
             const grid = new OncoGrid(gridParams);
             grid.render();
-            this.setState({ grid });
+
+            this.setState({
+              grid,
+              gridHeight: height,
+              gridPadding: padding,
+              gridContainer: container,
+            });
+
+            document.querySelector('.og-tooltip-oncogrid').style.transform = 'translateY(-110px)'; // TODO: fix tooltip position inside oncogrid and remove this line 
           }
         });
     },

app/react-components/oncogrid/dataMapping.js

@@ -8,7 +8,6 @@ export const mapDonors = function(donors) {
 
     const source = d.fields;
 
-
     source['summary.data_categories.data_category'].forEach((cat, i) => {
       output[cat] = source['summary.data_categories.file_count'][i];
     });
@@ -27,15 +26,15 @@ export const mapDonors = function(donors) {
   });
 }
 
-export const mapGenes = function(genes, curatedList) {
+export const mapGenes = function(genes) {
   return _.map(genes, (g) => {
     const fields = g.fields;
 
     return {
       id: g._id,
       symbol: fields.symbol,
       totalDonors: fields['case.case_id'].length,
-      cgc: curatedList.indexOf(g._id) >= 0,
+      cgc: (fields.is_cancer_gene_census && fields.is_cancer_gene_census[0]) || false,
     };
   });
 }

app/react-components/oncogrid/getQueries.js

@@ -81,7 +81,7 @@ function getQueries(projectId, esHost) {
     url: `${esHost}/gdc-r2-gene-centric/gene-centric/_search`,
     data: {
       "size": 50,
-      "fields": ["_id", "case.case_id", "symbol"],
+      "fields": ["_id", "case.case_id", "symbol", "is_cancer_gene_census"],
       "query": {
         "nested": {
           "path": "case",

app/react-components/oncogrid/oncoGridParams.js

@@ -91,11 +91,10 @@ export default function ({
   clickHandlers = {},
   height = 150,
   width = 680,
-  curatedList = [],
   addTrackFunc,
 }) {
   let donors = mapDonors(donorData);
-  let genes = mapGenes(geneData, curatedList);
+  let genes = mapGenes(geneData);
   const observations = mapOccurences(occurencesData, donors, genes);
 
   if (observations.length === 0) {
@@ -164,6 +163,7 @@ export default function ({
     width: width,
     element: element,
     colorMap: colorMap,
+    scaleToFit: true,
 
     heatMap: false,
     grid: true,

app/react-components/oncogrid/tracks.js

@@ -138,7 +138,7 @@ export const geneTracks = [
     color: 'mediumpurple',
   },
   {
-    name: 'Curated Gene Census ',
+    name: 'Cancer Gene Census ',
     fieldName: 'cgc',
     type: 'bool',
     sort: sortBool,

package.json

@@ -101,7 +101,7 @@
     "jquery": "^3.1.1",
     "js-cookie": "^2.1.3",
     "lodash": "^3.9.3",
-    "oncogrid": "git+http://[email protected]/oncojs/oncogrid.git#5aa803a826bd6ed852482e80882ffdc324a4db9d",
+    "oncogrid": "git+http://[email protected]/oncojs/oncogrid.git#6621c8bc759f08841cc1dfcaaacdde8cf7b324e1",
     "moment": "^2.15.2",
     "radium": "^0.18.1",
     "react": "^15.3.2",