updated for production

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucsc-xena-geneset",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Xena Gene Set Viewer",
   "main": "lib/index.js",
   "module": "es/index.js",

src/components/CanvasDrawing.js

@@ -1,9 +1,10 @@
 import ReactDOM from 'react-dom';
 import React, {Component} from 'react'
 import PropTypes from 'prop-types';
-import underscore, {omit} from 'underscore'
+import {omit,isEqual} from 'underscore'
 
-let styles = {
+const omitArray = ['associateData'];
+const styles = {
     canvas: {
         cursor: 'crosshair',
         position: 'relative',
@@ -33,7 +34,10 @@ let styles = {
 
 export default class CanvasDrawing extends Component {
     componentWillReceiveProps(newProps) {
-        if (this.vg && !underscore.isEqual(omit(newProps,['associateData']), omit(this.props,['associateData']))) {
+        // console.log('UNFILRTERD',newProps,this.props)
+        // console.log('FILTERED',underscore.isEqual(omit(newProps,omitArray),newProps,this.props, omit(this.props,omitArray)),omit(newProps,omitArray), omit(this.props,omitArray))
+        if (this.vg && !isEqual(omit(newProps,omitArray), omit(this.props,omitArray))) {
+            // console.log('redrawing')
             this.draw(newProps);
         }
     }

src/components/CohortSelector.js

@@ -2,7 +2,14 @@ import React from 'react'
 import PureComponent from './PureComponent';
 import PropTypes from 'prop-types';
 import BaseStyle from '../css/base.css';
-import subCohorts from '../data/Subtype_Selected';
+import {Button} from 'react-toolbox/lib/button';
+import FaFilter from 'react-icons/lib/fa/filter';
+import {SubCohortSelector} from "./SubCohortSelector";
+import { getSubCohortsOnlyForCohort } from "../functions/CohortFunctions";
+import {isEqual} from 'underscore';
+import {Tooltip} from "react-toolbox/lib";
+const TooltipButton = Tooltip(Button);
+
 
 
 export class CohortSelector extends PureComponent {
@@ -11,29 +18,98 @@ export class CohortSelector extends PureComponent {
         super(props);
         this.state = {
             selectedCohort: props.selectedCohort,
-            selectedSubCohort: props.selectedSubCohort,
+            selectedSubCohorts: props.selectedSubCohorts ? props.selectedSubCohorts : getSubCohortsOnlyForCohort(props.selectedCohort),
+            showSubCohortSelector: false,
+            subCohortLabel: 'All Subtypes',
         };
     }
 
     onChange = (event) => {
-        this.setState({selectedCohort: event.target.value});
-        let {onChange} = this.props;
-        if (onChange) {
-            onChange(event.target.value);
+        // populate selected sub cohorts for the cohorts
+        let subCohortsForSelected = getSubCohortsOnlyForCohort(event.target.value);
+        this.setState( {
+                selectedCohort: event.target.value,
+                selectedSubCohorts:subCohortsForSelected,
+        }
+            );
+        this.props.onChange(event.target.value);
+    };
+
+    handleSubCohortToggle = () => {
+        this.setState({showSubCohortSelector: !this.state.showSubCohortSelector});
+    };
+
+
+    generateSubCohortDetails(){
+        let selectedSubCohorts = this.state.selectedSubCohorts;
+        let subCohortsForSelected = getSubCohortsOnlyForCohort(this.state.selectedCohort);
+        if(!subCohortsForSelected) return '';
+        return Object.values(selectedSubCohorts).map( s => {
+            let splits = s.split(".");
+            if(splits.length>0) {
+                return splits[1];
+            } else {
+                return s;
+            }
+        }).join(", ");
+    };
+
+    generateSubCohortLabels(){
+        let selectedSubCohorts = this.state.selectedSubCohorts;
+        let subCohortsForSelected = getSubCohortsOnlyForCohort(this.state.selectedCohort);
+        if(!subCohortsForSelected) return '';
+        const availableSubtypes = Object.keys(subCohortsForSelected).length;
+        const selectedSubTypes = Object.values(selectedSubCohorts).filter( s => s ).length;
+        if(selectedSubCohorts.length===0 || availableSubtypes===selectedSubTypes){
+            return `All ${availableSubtypes} Subtypes`;
+        }
+        return `(${selectedSubTypes}/${availableSubtypes}) Subtypes`;
+    };
+
+    onChangeSubCohort = (newSelected) => {
+        const changes = !isEqual(this.state.selectedSubCohorts,newSelected);
+        console.log(this.state.selectedSubCohorts,newSelected,changes);
+
+        this.setState({showSubCohortSelector:false});
+        if(!changes){
+            return ;
         }
+
+        this.setState(
+        {
+                selectedSubCohorts: newSelected,
+            }
+        );
+
+
+        let selectionObject = {
+            selected:this.state.selectedCohort,
+            selectedSubCohorts:newSelected,
+        };
+        this.props.onChangeSubCohort(selectionObject)
     };
 
-    onChangeSubCohort = (event) => {
-        this.setState({selectedSubCohort: event.target.value});
-        this.props.onChangeSubCohort(event.target.value);
+    selectCohortSelection = () => {
+        this.setState({showSubCohortSelector: true});
     };
 
     render() {
 
-        let subCohortsForSelected = subCohorts[this.state.selectedCohort];
         let {cohorts,cohortLabel} = this.props ;
+        let subCohortsForSelected = getSubCohortsOnlyForCohort(this.state.selectedCohort);
+        let subCohortLabel = this.generateSubCohortLabels();
+        let subCohortDetails = this.generateSubCohortDetails();
+
         return (
             <div>
+                <SubCohortSelector active={this.state.showSubCohortSelector}
+                                   handleToggle={this.handleSubCohortToggle}
+                                   handleSubCohortChange={this.onChangeSubCohort}
+                                   selectedCohort={this.state.selectedCohort}
+                                   selectedSubCohorts={this.state.selectedSubCohorts}
+                                   subCohortsForSelected={subCohortsForSelected}
+                                   cohortLabel={subCohortLabel}
+                />
                 <div style={{
                     marginTop: 10,
                     marginLeft: 10,
@@ -57,24 +133,11 @@ export class CohortSelector extends PureComponent {
                         })
                     }
                 </select>
-                {subCohortsForSelected &&
-                <select style={{marginLeft: 10, marginTop: 3, marginBottom: 3}}
-                        onChange={this.onChangeSubCohort}
-                        value={this.state.selectedSubCohort}
-                        className={BaseStyle.softflow}
-                >
-                    <option>All</option>
-                    {
-                        Object.entries(subCohortsForSelected).map(c => {
-                                return (
-                                    <option value={c[0]} key={c[0]}>
-                                        {c[0]}
-                                    </option>
-                                )
-                            }
-                        )
-                    }
-                </select>
+                {subCohortsForSelected.length>0 &&
+                   <TooltipButton tooltip={subCohortDetails} style={{marginLeft:20}} raised onClick={this.selectCohortSelection} label={subCohortLabel}>
+                       <FaFilter/>
+                   </TooltipButton>
+
                 }
             </div>
         );
@@ -86,7 +149,7 @@ CohortSelector.propTypes = {
     subCohorts: PropTypes.array.isRequired,
     cohortLabel: PropTypes.string.isRequired,
     selectedCohort: PropTypes.string.isRequired,
-    selectedSubCohort: PropTypes.string,
+    selectedSubCohorts: PropTypes.any,
     onChange: PropTypes.any.isRequired,
     onChangeSubCohort: PropTypes.any.isRequired,
 };

src/components/DiffLabel.js

@@ -0,0 +1,90 @@
+import React from 'react'
+import PureComponent from './PureComponent';
+import PropTypes from 'prop-types';
+import {Dropdown} from "react-toolbox";
+import underscore from 'underscore'
+import {
+    getSelectColor,
+    getWhiteColor,
+    getHighlightedColor,
+    scoreData,
+} from '../functions/ColorFunctions'
+import * as d3 from "d3";
+
+let interpolate;
+const highColor = '#1A535C';
+const midColor = '#A4DDE6';
+const lowColor = '#FFFFFF';
+
+export class DiffLabel extends PureComponent {
+
+
+    constructor(props) {
+        super(props);
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return !underscore.isEqual(nextProps, this.props);
+    }
+
+    /**
+     * Score is from 0 to 1
+     * @param score
+     * @returns {*}
+     */
+    style(score) {
+        let {labelOffset, left, width, labelHeight, cohortIndex} = this.props;
+
+        // let colorString = interpolate(score);
+        let colorString = cohortIndex === 0 ? 'green' : 'hotpink';
+
+        return {
+            position: 'absolute',
+            top: labelOffset,
+            left: left,
+            height: labelHeight,
+            width: width,
+            backgroundColor: colorString,
+            strokeWidth: 1,
+            opacity: 0.5,
+            cursor: 'pointer',
+        }
+    }
+
+    //
+    // fontColor(colorDensity) {
+    //     return colorDensity < 0.7 ? 'black' : getWhiteColor();
+    // }
+
+    render() {
+        // let {width, labelString, labelHeight, item, geneLength, numSamples, colorSettings} = this.props;
+        let {item, geneLength, numSamples, colorSettings} = this.props;
+        let className = (item.gene.length === 1 ? item.gene[0] : item.golabel).replace(/ /g, '-');
+        let colorDensity = scoreData(item.samplesAffected, numSamples, geneLength) * colorSettings.shadingValue;
+        interpolate = d3.scaleLinear().domain([0, 1]).range([lowColor, highColor]).interpolate(d3.interpolateRgb.gamma(colorSettings.geneGamma));
+        return (
+            <svg
+                style={this.style(colorDensity)}
+                className={className}
+            >
+                {/*<text x={-labelHeight + 2} y={10} fontFamily='Arial' fontSize={10} fill={this.fontColor(colorDensity)}*/}
+                {/*      transform='rotate(-90)'*/}
+                {/*>*/}
+                {/*    {width < 10 ? '' : labelString}*/}
+                {/*</text>*/}
+            </svg>
+        );
+    }
+}
+
+DiffLabel.propTypes = {
+    labelOffset: PropTypes.any.isRequired,
+    labelHeight: PropTypes.any.isRequired,
+    left: PropTypes.any.isRequired,
+    width: PropTypes.any.isRequired,
+    labelString: PropTypes.string.isRequired,
+    numSamples: PropTypes.number.isRequired,
+    item: PropTypes.any.isRequired,
+    geneLength: PropTypes.any.isRequired,
+    colorSettings: PropTypes.any.isRequired,
+};

src/components/GeneSetSelector.js

@@ -126,15 +126,14 @@ export class GeneSetSelector extends PureComponent {
                 <div></div>
             )
         }
-        let newRefPathways =  JSON.parse(JSON.stringify(pathways));
         let hoveredLabel = hoveredPathways ? hoveredPathways.golabel : '';
         let genesToHover = hoveredPathways ? hoveredPathways.gene : '';
         let selectedLabels = selectedPathways.map(p => p && p.golabel);
         let colorMask = getGeneSetColorMask();
         interpolate = d3.scaleLinear().domain([geneStateColors.lowDomain,geneStateColors.midDomain,geneStateColors.highDomain]).range([geneStateColors.lowColor,geneStateColors.midColor,geneStateColors.highColor]).interpolate(d3.interpolateRgb.gamma(geneStateColors.gamma));
         // interpolate = d3.scaleLinear().domain([-this.props.domain,0,this.props.domain]).range([this.props.lowColor,'white',this.props.highColor]).interpolate(d3.interpolateRgb.gamma(this.props.gamma));
 
-        return newRefPathways.map((p) => {
+        return pathways.map((p) => {
             let labelString = '(' + p.gene.length + ') ' + p.golabel;
             let hovered = hoveredPathways ? p.golabel === hoveredPathways.golabel : false ;
             if(showReciprocalPathway){

src/components/HeaderLabel.js

@@ -99,14 +99,14 @@ export class HeaderLabel extends PureComponent {
     render() {
         let {width, labelString, labelHeight, item, geneLength, numSamples, colorSettings} = this.props;
         let className = (item.gene.length === 1 ? item.gene[0] : item.golabel).replace(/ /g, '-');
-        let colorDensity = scoreData(item.density, numSamples, geneLength) * colorSettings.shadingValue;
+        let colorDensity = scoreData(item.samplesAffected, numSamples, geneLength) * colorSettings.shadingValue;
         interpolate = d3.scaleLinear().domain([0,1]).range([lowColor,highColor]).interpolate(d3.interpolateRgb.gamma(colorSettings.geneGamma));
         return (
             <svg
                 style={this.style(colorDensity)}
                 className={className}
             >
-                <text x={-labelHeight + 2} y={10} fontFamily='Arial' fontSize={10} fill={this.fontColor(colorDensity)}
+                <text x={-labelHeight + 4} y={10} fontFamily='Arial' fontSize={10} fill={this.fontColor(colorDensity)}
                       transform='rotate(-90)'
                 >
                     {width < 10 ? '' : labelString}

src/components/HoverGeneView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PureComponent from './PureComponent';
 import PropTypes from 'prop-types';
-import {Chip, Avatar, List, ListItem, ListSubHeader} from "react-toolbox";
+import {Chip} from "react-toolbox";
 import BaseStyle from '../css/base.css';
 import {ScoreBadge} from "./ScoreBadge";
 
@@ -13,9 +13,9 @@ export default class HoverGeneView extends PureComponent {
      * @returns {string}
      */
     getRatio(data) {
-        let returnString = data.expression.affected + '/' + data.expression.total;
+        let returnString = data.expression.samplesAffected + '/' + data.expression.total;
         returnString += '  (';
-        returnString += ((Number.parseFloat(data.expression.affected) / Number.parseFloat(data.expression.total)) * 100.0).toFixed(0);
+        returnString += ((Number.parseFloat(data.expression.samplesAffected ) / Number.parseFloat(data.expression.total)) * 100.0).toFixed(0);
         returnString += '%)';
         return returnString;
     }