From 6fe0f2bd64da517e314b0daf2f61e101290f17a6 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 16 Dec 2016 11:37:42 -0500
Subject: [PATCH 001/133] squashed commits for Cancer study selector

---
 my-index.ejs                                  |   2 +-
 package.json                                  |   6 +-
 src/pages/home/HomePage.tsx                   |  51 +-
 src/pages/home/styles.module.scss             |   9 +
 .../components/ExperimentalControls.tsx       | 132 ++++
 src/shared/components/StudyList/StudyList.tsx | 150 +++++
 .../components/StudyList/StudyListLogic.ts    | 183 ++++++
 .../components/StudyList/styles.module.scss   |  63 ++
 src/shared/components/flexbox/FlexBox.tsx     |  53 ++
 .../components/flexbox/styles.module.scss     |  18 +
 .../labeledCheckbox/LabeledCheckbox.tsx       |  55 ++
 .../labeledCheckbox/styles.module.scss        |  16 +
 .../components/query/CancerStudySelector.tsx  | 214 +++++++
 .../components/query/CancerStudyTreeData.ts   | 128 ++++
 .../query/GeneticProfileSelector.tsx          | 290 +++++++++
 .../components/query/QueryContainer.tsx       |  99 +++
 src/shared/components/query/QueryStore.ts     |  63 ++
 src/shared/components/query/gene_lists.json   |  70 ++
 .../query/old/CancerStudySelector.tsx         | 604 ++++++++++++++++++
 .../components/query/old/QueryConnector.ts    |  89 +++
 .../components/query/old/QueryContainer.tsx   | 120 ++++
 .../components/query/old/styles.module.scss   | 121 ++++
 .../components/query/styles.module.scss       | 109 ++++
 src/shared/components/tree/DescriptorTree.tsx | 203 ++++++
 src/shared/components/tree/styles.module.scss |  24 +
 src/shared/lib/classNames.ts                  |   2 +-
 src/shared/lib/firstDefinedValue.ts           |  11 +
 src/shared/lib/getPromiseResult.ts            |  14 +
 src/shared/lib/memoize.ts                     | 220 +++++++
 typings/missing.d.ts                          |   1 +
 30 files changed, 3099 insertions(+), 21 deletions(-)
 create mode 100644 src/pages/home/styles.module.scss
 create mode 100644 src/shared/components/ExperimentalControls.tsx
 create mode 100644 src/shared/components/StudyList/StudyList.tsx
 create mode 100644 src/shared/components/StudyList/StudyListLogic.ts
 create mode 100644 src/shared/components/StudyList/styles.module.scss
 create mode 100644 src/shared/components/flexbox/FlexBox.tsx
 create mode 100644 src/shared/components/flexbox/styles.module.scss
 create mode 100644 src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
 create mode 100644 src/shared/components/labeledCheckbox/styles.module.scss
 create mode 100644 src/shared/components/query/CancerStudySelector.tsx
 create mode 100644 src/shared/components/query/CancerStudyTreeData.ts
 create mode 100644 src/shared/components/query/GeneticProfileSelector.tsx
 create mode 100644 src/shared/components/query/QueryContainer.tsx
 create mode 100644 src/shared/components/query/QueryStore.ts
 create mode 100644 src/shared/components/query/gene_lists.json
 create mode 100644 src/shared/components/query/old/CancerStudySelector.tsx
 create mode 100644 src/shared/components/query/old/QueryConnector.ts
 create mode 100644 src/shared/components/query/old/QueryContainer.tsx
 create mode 100644 src/shared/components/query/old/styles.module.scss
 create mode 100644 src/shared/components/query/styles.module.scss
 create mode 100644 src/shared/components/tree/DescriptorTree.tsx
 create mode 100644 src/shared/components/tree/styles.module.scss
 create mode 100644 src/shared/lib/firstDefinedValue.ts
 create mode 100644 src/shared/lib/getPromiseResult.ts
 create mode 100644 src/shared/lib/memoize.ts

diff --git a/my-index.ejs b/my-index.ejs
index edd167541cb..1ff9f4cd9aa 100644
--- a/my-index.ejs
+++ b/my-index.ejs
@@ -5,7 +5,7 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
     <script>
         window.devContext = true;
-        window.defaultRoute = "/patient";
+        window.defaultRoute = "/home";
         // uncomment to enable Darwin internal MSKCC service patient view link
         // uses checkDarwinAccess.do service from cbioportal/cbioportal
         // window.enableDarwin = true;
diff --git a/package.json b/package.json
index 91538b01bde..bafe8b2e59a 100644
--- a/package.json
+++ b/package.json
@@ -42,8 +42,10 @@
     "@types/rc-tooltip": "^3.4.2",
     "@types/react": "15.0.4",
     "@types/react-bootstrap": "^0.0.43",
+    "@types/react-bootstrap-table": "^2.6.1",
     "@types/react-dom": "^0.14.21",
     "@types/react-redux": "^4.4.36",
+    "@types/react-fontawesome": "^1.1.1",
     "@types/react-router": "^2.0.46",
     "@types/react-spinkit": "^1.1.29",
     "@types/reselect": "^2.0.27",
@@ -113,6 +115,7 @@
     "react-collapse": "^2.3.3",
     "react-dom": "^15.4.2",
     "react-file-download": "^0.3.2",
+    "react-fontawesome": "^1.4.0",
     "react-height": "^2.2.0",
     "react-if": "^2.1.0",
     "react-motion": "^0.4.7",
@@ -120,7 +123,8 @@
     "react-renderif": "^1.0.2",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.7",
-    "react-spinkit": "^1.1.0",
+    "react-select": "^1.0.0-rc.2",
+    "react-spinkit": "^2.0.0",
     "react-tooltip": "^3.2.2",
     "react-zeroclipboard": "^3.2.2",
     "reactable": "^0.14.1",
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 545b0dd6235..f0e2fcc6e31 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,8 +1,20 @@
 import * as React from 'react';
-import CBioPortalAPI from "../../shared/api/generated/CBioPortalAPI";
-import {CancerStudy} from "../../shared/api/generated/CBioPortalAPI";
-import AppConfig from 'appConfig';
-import {getCbioPortalApiUrl} from "../../shared/api/urls";
+import QueryContainerOld from "../../shared/components/query/old/QueryContainer";
+import QueryContainer from "../../shared/components/query/QueryContainer";
+import * as styles_any from './styles.module.scss';
+import {FlexCol} from "../../shared/components/flexbox/FlexBox";
+
+function getRootElement()
+{
+	for (let node of document.childNodes)
+		if (node instanceof HTMLElement)
+			return node;
+	throw new Error("No HTMLElement found");
+}
+
+const styles = styles_any as {
+	rootHtml: string,
+};
 
 interface IHomePageProps
 {
@@ -10,7 +22,7 @@ interface IHomePageProps
 
 interface IHomePageState
 {
-    data?:CancerStudy[];
+	selectorVersion: 'old'|'new';
 }
 
 export default class HomePage extends React.Component<IHomePageProps, IHomePageState>
@@ -18,23 +30,26 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
     constructor(props:IHomePageProps)
     {
         super(props);
-        this.state = {};
+        this.state = {selectorVersion: 'new'};
     }
 
-    client = new CBioPortalAPI(getCbioPortalApiUrl());
-
     componentDidMount()
     {
-        this.client.getAllStudiesUsingGET({
-            projection: "DETAILED"
-        }).then(data => {
-            this.setState({data});
-        });
+		getRootElement().className += ' ' + styles.rootHtml;
     }
 
-    public render() {
-        return <pre>
-            { JSON.stringify(this.state.data, null, 4) }
-        </pre>;
+    componentWillUnmount()
+	{
+		getRootElement().className = getRootElement().className.split(styles.rootHtml).join('');
+	}
+
+    public render()
+    {
+        return (
+        	<FlexCol style={{height: '100%'}}>
+				<a style={{alignSelf: 'center'}} onClick={() => this.setState({ selectorVersion: this.state.selectorVersion == 'new' ? 'old' : 'new' })}>Switch to {this.state.selectorVersion == 'new' ? 'old' : 'new'} view</a>
+				{this.state.selectorVersion == 'new' ? <QueryContainer/> : <QueryContainerOld/>}
+			</FlexCol>
+		);
     }
-};
+}
diff --git a/src/pages/home/styles.module.scss b/src/pages/home/styles.module.scss
new file mode 100644
index 00000000000..91a713a9e5c
--- /dev/null
+++ b/src/pages/home/styles.module.scss
@@ -0,0 +1,9 @@
+// Setting HTML & BODY height to 100% allows fitting the page content to the size of the browser
+// rather than using fixed heights and forcing the user to scroll.
+html.rootHtml {
+  height: 100%;
+
+  body,:global(#reactRoot),:global(#reactRoot)>div,:global(#reactRoot)>div>div,:global(#reactRoot)>div>div>div {
+    height: 100%;
+  }
+}
diff --git a/src/shared/components/ExperimentalControls.tsx b/src/shared/components/ExperimentalControls.tsx
new file mode 100644
index 00000000000..023eb11a73d
--- /dev/null
+++ b/src/shared/components/ExperimentalControls.tsx
@@ -0,0 +1,132 @@
+// components for controlling experimental options
+
+import * as React from 'react';
+import firstDefinedValue from "../lib/firstDefinedValue";
+import LabeledCheckbox from "./labeledCheckbox/LabeledCheckbox";
+
+export type ISelectOption<V> = {
+	label:string,
+	callback?:()=>void,
+	value?:V
+};
+
+export interface ISelectProps<V>
+{
+	label?: string;
+	selected: V;
+	options: ISelectOption<V>[];
+	onChange: (option:ISelectOption<V>)=>void;
+};
+
+
+export function EditableDropdown(props:ISelectProps<string>)
+{
+	let textInput:HTMLInputElement;
+
+	function onChange(event:React.FormEvent<HTMLInputElement>)
+	{
+		if (props.onChange)
+			props.onChange({label: textInput.value, value: textInput.value});
+	}
+
+	function onSelect(option:ISelectOption<string>)
+	{
+		textInput.value = option.value || option.label;
+		if (option.callback)
+			option.callback();
+		if (props.onChange)
+			props.onChange(option);
+	}
+
+	return (
+		<label>
+			{props.label}
+			<div className="input-group dropdown">
+				<input
+					type="text"
+					className="form-control dropdown-toggle"
+					value={props.selected}
+					ref={input => textInput = input}
+					onChange={onChange}
+				/>
+				<ul className="dropdown-menu">
+					{
+						props.options.map((option, i) => (
+							<a key={i} href="#" onClick={() => onSelect(option)}>{option.label}</a>
+						))
+					}
+				</ul>
+				<span role="button" className="input-group-addon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<span className="caret"/>
+				</span>
+			</div>
+		</label>
+	);
+}
+
+export function Select(props:ISelectProps<any>)
+{
+	function onChange(event:React.FormEvent<HTMLSelectElement>)
+	{
+		let option = props.options[parseInt((event.target as HTMLInputElement).value)];
+		if (option.callback)
+			option.callback();
+		if (props.onChange)
+			props.onChange(option);
+	}
+
+	let defaultValue = "0";
+
+	let optionsJSX = props.options.map((option, i) => {
+		if (props.selected == (option.value !== undefined ? option.value : i))
+			defaultValue = i + '';
+		return (
+			<option key={i} value={i + ''}>
+				{option.label}
+			</option>
+		);
+	});
+
+	return (
+		<label>
+			{props.label}
+			<select onChange={onChange} defaultValue={defaultValue}>
+				{optionsJSX}
+			</select>
+		</label>
+	);
+}
+
+export interface IStateToggleProps<S>
+{
+	label?: string;
+	target: S | React.Component<any, S>;
+	name: keyof S;
+	defaultValue: boolean;
+}
+
+export function TypedStateToggle<T>(props:IStateToggleProps<T>)
+{
+	let {label, target, name, defaultValue} = props;
+	let currentValue = target instanceof React.Component ? !!(target as React.Component<any, T>).state[name] : !!target[name];
+	return (
+		<LabeledCheckbox
+			checked={firstDefinedValue(currentValue, defaultValue)}
+			inputProps={{
+				onChange: event => {
+					if (target instanceof React.Component)
+						target.setState({[name]: (event.target as HTMLInputElement).checked} as any);
+					else
+						target[name] = (event.target as HTMLInputElement).checked as any;
+				}
+			}}
+		>
+			{label || name}
+		</LabeledCheckbox>
+	);
+}
+
+export function StateToggle(props:IStateToggleProps<any>)
+{
+	return TypedStateToggle(props);
+}
diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
new file mode 100644
index 00000000000..835ccc842b3
--- /dev/null
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import {TypeOfCancer as CancerType, CancerStudy} from "../../api/CBioPortalAPI";
+import * as styles_any from './styles.module.scss';
+import classNames from "../../lib/classNames";
+import FontAwesome from "react-fontawesome";
+import {CancerTreeNode} from "../query/CancerStudyTreeData";
+import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
+
+const styles = {
+	...styles_any as {
+		StudyList: string,
+
+		CancerType: string,
+		CancerTypeName: string,
+
+		Study: string,
+		StudyName: string,
+		StudySamples: string,
+		StudyLinks: string,
+
+		highlighted: string,
+	},
+	Level: (level:number) => styles_any[`Level${level}`]
+};
+
+export type IStudyListProps = {
+	logic: IStudyListLogic;
+};
+
+export interface IStudyListLogic
+{
+	getRootCancerType: () => CancerType;
+	getChildCancerTypes: (cancerType:CancerType) => CancerType[];
+	getChildCancerStudies: (cancerType:CancerType) => CancerStudy[];
+	getDepth: (node:CancerType) => number;
+	isHighlighted: (node:CancerTreeNode) => boolean;
+	getCheckboxProps: (node: CancerTreeNode) => {checked: boolean, indeterminate?: boolean};
+	onCheck: (node:CancerTreeNode, event:React.FormEvent<HTMLInputElement>) => void;
+}
+
+export default class StudiesList extends React.Component<IStudyListProps, {}>
+{
+	get logic() { return this.props.logic; }
+
+	render()
+	{
+		return this.renderCancerType(this.logic.getRootCancerType());
+	}
+
+	renderCancerType = (cancerType:CancerType, arrayIndex?:number):JSX.Element =>
+	{
+		let currentLevel = this.logic.getDepth(cancerType);
+		let childCancerTypes = this.logic.getChildCancerTypes(cancerType);
+		let childStudies = this.logic.getChildCancerStudies(cancerType);
+
+		let heading:JSX.Element | undefined;
+		if (cancerType != this.logic.getRootCancerType())
+		{
+			let liClassName = classNames(
+				styles.CancerType,
+				styles.Level(currentLevel),
+				this.logic.isHighlighted(cancerType) && styles.highlighted,
+			);
+			heading = (
+				<li className={liClassName}>
+					<LabeledCheckbox
+						{...this.logic.getCheckboxProps(cancerType)}
+						inputProps={{
+							onChange: event => this.logic.onCheck(cancerType, event)
+						}}
+					>
+						<span className={styles.CancerTypeName}>
+							{cancerType.name}
+						</span>
+					</LabeledCheckbox>
+				</li>
+			);
+		}
+
+		let ulClassName = classNames(
+			styles.StudyList,
+			styles.Level(currentLevel),
+		);
+		return (
+			<ul key={arrayIndex} className={ulClassName}>
+				{heading}
+				{childStudies.map(this.renderCancerStudy)}
+				{childCancerTypes.map(this.renderCancerType)}
+			</ul>
+		);
+	}
+
+	renderCancerStudy = (study:CancerStudy, arrayIndex:number) =>
+	{
+		let liClassName = classNames(
+			styles.Study,
+			this.logic.isHighlighted(study) && styles.highlighted,
+		);
+		return (
+			<li key={arrayIndex} className={liClassName}>
+				{this.renderStudyName(study)}
+				{this.renderSamples(study)}
+				{this.renderStudyLinks(study)}
+			</li>
+		);
+	}
+
+	renderStudyName = (study:CancerStudy) =>
+	{
+		return (
+			<LabeledCheckbox
+				{...this.logic.getCheckboxProps(study)}
+				inputProps={{
+					onChange: event => this.logic.onCheck(study, event)
+				}}
+			>
+				<span className={styles.StudyName}>
+					{study.name}
+				</span>
+			</LabeledCheckbox>
+		);
+	}
+
+	renderSamples = (study:CancerStudy) =>
+	{
+		return (
+			<span className={styles.StudySamples}>
+				{`${study.allSampleCount} samples`}
+			</span>
+		);
+	}
+
+	renderStudyLinks = (study:CancerStudy) =>
+	{
+		let links = [];
+		if (study.studyId)
+			links.push({icon: 'cube', url: `/study?id=${study.studyId}#summary`});
+		if (study.pmid)
+			links.push({icon: 'book', url: `http://www.ncbi.nlm.nih.gov/pubmed/${study.pmid}`});
+		return (
+			<div className={styles.StudyLinks}>
+				{links.map((link, i) => (
+					<a key={i} href={link.url}>
+						<FontAwesome name={link.icon}/>
+					</a>
+				))}
+			</div>
+		);
+	}
+}
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
new file mode 100644
index 00000000000..12fdec1fe00
--- /dev/null
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -0,0 +1,183 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import {IStudyListLogic} from "./StudyList";
+import CancerStudyTreeData from "../query/CancerStudyTreeData";
+import {CancerTreeNode} from "../query/CancerStudyTreeData";
+import {NodeMetadata} from "../query/CancerStudyTreeData";
+import {TypeOfCancer as CancerType, CancerStudy} from "../../api/CBioPortalAPI";
+import memoize from "../../lib/memoize";
+
+export function matchesSearchText(input:string, searchText:string):boolean
+{
+	input = input.toLocaleLowerCase();
+	searchText = searchText.toLocaleLowerCase();
+
+	return searchText.split(' ').every(filter => {
+		let desired = true;
+		if (filter.startsWith('-'))
+		{
+			filter = filter.substr(1);
+			desired = false;
+		}
+
+		let found = input.indexOf(filter) >= 0;
+		return found == desired;
+	});
+}
+
+export default class StudyListLogic implements IStudyListLogic
+{
+	state:{
+		'searchText': string,
+		'selectedStudyIds': string[],
+		'selectedCancerTypeIds': string[],
+		'maxTreeDepth': number,
+	};
+
+	treeData: CancerStudyTreeData;
+	handleSelectedStudiesChange: (selectedStudyIds: string[]) => void
+
+	constructor(params: Pick<StudyListLogic, 'state' | 'treeData' | 'handleSelectedStudiesChange'>)
+	{
+		this.state = params.state;
+		this.treeData = params.treeData;
+		this.handleSelectedStudiesChange = params.handleSelectedStudiesChange;
+	}
+
+	getRootCancerType()
+	{
+		return this.treeData.rootCancerType;
+	}
+
+	getMetadata(node:CancerTreeNode)
+	{
+		return this.treeData.map_node_meta.get(node) as NodeMetadata;
+	}
+
+	// filters out empty CancerType subtrees
+	shouldConsiderNode(node:CancerTreeNode)
+	{
+		let meta = this.getMetadata(node);
+		if (meta.isCancerType)
+		{
+			// ignore cancer types excluded by selection
+			if (this.state.selectedCancerTypeIds.length)
+			{
+				let idToCancerType = (cancerTypeId:string) => this.treeData.map_cancerTypeId_cancerType.get(cancerTypeId) as CancerType;
+				let selectedCancerTypes = this.state.selectedCancerTypeIds.map(idToCancerType);
+				if (_.intersection(selectedCancerTypes, [node].concat(meta.ancestors)).length == 0)
+					return false;
+			}
+			// ignore cancer types excluded by depth
+			if (meta.ancestors.length > this.state.maxTreeDepth)
+				return false;
+			// ignore cancer types with no descendant studies
+			if (meta.descendantStudies.length == 0)
+				return false;
+		}
+		return true;
+	}
+
+	// returns true if the node or any related nodes match
+	nodeFilter = memoize({
+		getAdditionalArgs: () => [this.treeData, this.state.maxTreeDepth, this.state.searchText],
+		fixedArgsLength: 1,
+		function: (node:CancerTreeNode):boolean =>
+		{
+			//TODO this logic is broken - search for 'eas' and then select/deselect Breast cancer type to see bug
+
+			let meta = this.getMetadata(node);
+
+			if (!this.shouldConsiderNode(node))
+				return false;
+
+			// if no search text is entered, include all nodes
+			if (!this.state.searchText)
+				return true;
+
+			// check for matching text in this node and related nodes
+			for (let others of [[node], meta.descendantCancerTypes, meta.descendantStudies, meta.ancestors])
+				for (let other of others)
+					if (this.shouldConsiderNode(other) && matchesSearchText(other.name, this.state.searchText))
+						return true;
+
+			// no match
+			return false;
+		}
+	});
+
+	getChildCancerTypes(cancerType:CancerType):CancerType[]
+	{
+		let meta = this.getMetadata(cancerType);
+		let childTypes = meta.ancestors.length < this.state.maxTreeDepth ? meta.childCancerTypes : [];
+		return childTypes.filter(this.nodeFilter);
+	}
+
+	getChildCancerStudies(cancerType:CancerType):CancerStudy[]
+	{
+		let meta = this.getMetadata(cancerType);
+		let studies = meta.ancestors.length < this.state.maxTreeDepth ? meta.childStudies : meta.descendantStudies;
+		return studies.filter(this.nodeFilter);
+	}
+
+	getDescendantCancerStudies(node:CancerTreeNode):CancerStudy[]
+	{
+		let meta = this.getMetadata(node);
+		return meta.descendantStudies.filter(this.nodeFilter);
+	}
+
+	getDepth(node:CancerType):number
+	{
+		let meta = this.getMetadata(node);
+		return meta.ancestors.length;
+	}
+
+	isHighlighted(node:CancerTreeNode):boolean
+	{
+		return !!this.state.searchText && matchesSearchText(node.name, this.state.searchText);
+	}
+
+	getCheckboxProps(node: CancerTreeNode): {checked: boolean, indeterminate?: boolean}
+	{
+		let meta = this.getMetadata(node);
+		if (meta.isCancerType)
+		{
+			let selectedStudyIds = this.state.selectedStudyIds || [];
+			let selectedStudies = selectedStudyIds.map(studyId => this.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
+			let shownStudies = this.getDescendantCancerStudies(node);
+			let shownAndSelectedStudies = _.intersection(shownStudies, selectedStudies);
+			let checked = shownAndSelectedStudies.length > 0;
+			let indeterminate = checked && shownAndSelectedStudies.length != shownStudies.length;
+
+			return {checked, indeterminate};
+		}
+		else
+		{
+			let study = node as CancerStudy;
+			let checked = !!this.state.selectedStudyIds.find(id => id == study.studyId);
+			return {checked};
+		}
+	}
+
+	onCheck(node:CancerTreeNode, event:React.FormEvent<HTMLInputElement>): void
+	{
+		let clickedStudyIds:string[];
+		let meta = this.getMetadata(node);
+		if (meta.isCancerType)
+			clickedStudyIds = this.getDescendantCancerStudies(node).map(study => study.studyId);
+		else
+			clickedStudyIds = [(node as CancerStudy).studyId];
+		this.handleCheckboxStudyIds(event, clickedStudyIds);
+	}
+
+	handleCheckboxStudyIds(event:React.FormEvent<HTMLInputElement>, clickedStudyIds:string[])
+	{
+		let selectedStudyIds = this.state.selectedStudyIds;
+		if ((event.target as HTMLInputElement).checked)
+			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
+		else
+			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
+
+		this.handleSelectedStudiesChange(selectedStudyIds);
+	}
+}
diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
new file mode 100644
index 00000000000..de2c8bf9795
--- /dev/null
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -0,0 +1,63 @@
+.selectAllStudies {
+  color: #1982b8;
+  font: normal normal 600 10px/18px 'Helvetica Neue';
+  margin: 0 0 0 10px;
+  text-transform: uppercase;
+}
+
+ul.StudyList {
+  &.Level0, &.Level1 {
+    padding-left: 0px;
+  }
+
+  &.Level0 {
+    padding: 5px;
+
+    > li.CancerType, > li.Study {
+      margin-left: 0px;
+    }
+  }
+
+  li.CancerType {
+    list-style-type: none;
+
+    .CancerTypeName {
+      font-style: italic;
+      color: gray;
+    }
+  }
+
+  li.Study {
+    list-style-type: none;
+    margin-left: 40px;
+
+    label {
+      display: inline;
+    }
+
+    .StudyName {
+      font-weight: bold;
+    }
+
+    .StudySamples {
+      margin: 0 10px;
+      font-style: italic;
+    }
+
+    .StudyLinks {
+      display: inline;
+
+      a {
+        display: inline-block;
+        margin: 0 3px;
+        color: #1982b8;
+
+        span:global(.fa) {
+          margin: 0 5px 0 0;
+          min-width: 15px;
+        }
+      }
+    }
+  }
+}
+
diff --git a/src/shared/components/flexbox/FlexBox.tsx b/src/shared/components/flexbox/FlexBox.tsx
new file mode 100644
index 00000000000..1859cb12c0f
--- /dev/null
+++ b/src/shared/components/flexbox/FlexBox.tsx
@@ -0,0 +1,53 @@
+/*
+	Copyright (c) 2015 Weave Visual Analytics, Inc.
+
+	This Source Code Form is subject to the terms of the
+	Mozilla Public License, v. 2.0. If a copy of the MPL
+	was not distributed with this file, You can obtain
+	one at https://mozilla.org/MPL/2.0/.
+*/
+
+import * as React from "react";
+import * as _ from 'lodash';
+import styles from './styles.module.scss';
+import classNames from "shared/lib/classNames";
+
+export interface IFlexBoxProps <T> extends React.HTMLProps<T>
+{
+	flex?:number;
+	padded?:boolean;
+	overflow?:boolean;
+}
+
+export class IFlexBoxProps<T>
+{
+	static renderBox<T>(props:IFlexBoxProps<T>, flexDirection:"row"|"column"):JSX.Element
+	{
+		let {padded, overflow, flex, ...attributes} = props;
+		let style:React.CSSProperties = {
+			flex,
+			display: "flex",
+			overflow: overflow ? "visible" : "auto",
+			...props.style,
+			flexDirection
+		};
+		let className = classNames(props.className, styles[flexDirection], padded && styles.padded);
+		return <div {...attributes as React.HTMLAttributes<HTMLDivElement>} style={style} className={className}/>;
+	}
+}
+
+export class FlexRow extends React.Component<IFlexBoxProps<FlexRow>, {}>
+{
+	render():JSX.Element
+	{
+		return IFlexBoxProps.renderBox(this.props, "row");
+	}
+}
+
+export class FlexCol extends React.Component<IFlexBoxProps<FlexCol>, {}>
+{
+	render():JSX.Element
+	{
+		return IFlexBoxProps.renderBox(this.props, "column");
+	}
+}
diff --git a/src/shared/components/flexbox/styles.module.scss b/src/shared/components/flexbox/styles.module.scss
new file mode 100644
index 00000000000..294e2c3d1bf
--- /dev/null
+++ b/src/shared/components/flexbox/styles.module.scss
@@ -0,0 +1,18 @@
+.padded.column {
+	> * {
+		flex-shrink: 0;
+		margin-top: 8px;
+	}
+	> *:nth-child(1) {
+		margin-top: 0;
+	}
+}
+.padded.row {
+	> * {
+		flex-shrink: 0;
+		margin-left: 8px;
+	}
+	> *:nth-child(1) {
+		margin-left: 0;
+	}
+}
\ No newline at end of file
diff --git a/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx b/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
new file mode 100644
index 00000000000..552baa8987c
--- /dev/null
+++ b/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import * as styles_any from './styles.module.scss';
+import classNames from "../../lib/classNames";
+
+const styles = styles_any as {
+	labeledCheckbox: string;
+};
+
+export interface ILabeledCheckboxProps
+{
+	checked?: boolean;
+	indeterminate?: boolean;
+	labelProps?: React.HTMLProps<HTMLLabelElement>;
+	inputProps?: React.HTMLProps<HTMLInputElement>;
+}
+
+export default class LabeledCheckbox extends React.Component<ILabeledCheckboxProps, undefined>
+{
+	private input:HTMLInputElement;
+
+	handleInputRef = (input:HTMLInputElement) =>
+	{
+		this.input = input;
+
+		if (this.props.inputProps && typeof this.props.inputProps.ref === 'function')
+			this.props.inputProps.ref(input);
+	}
+
+	componentDidMount()
+	{
+		this.input.indeterminate = !!this.props.indeterminate;
+	}
+
+	componentDidUpdate()
+	{
+		this.input.indeterminate = !!this.props.indeterminate;
+	}
+
+	render()
+	{
+		let labelPropsClassName = this.props.labelProps && this.props.labelProps.className;
+		let className = classNames(styles.labeledCheckbox, labelPropsClassName);
+		return (
+			<label className={className} {...this.props.labelProps}>
+				<input
+					type="checkbox"
+					checked={this.props.checked}
+					{...this.props.inputProps}
+					ref={this.handleInputRef}
+				/>
+				{this.props.children}
+			</label>
+		);
+	}
+}
diff --git a/src/shared/components/labeledCheckbox/styles.module.scss b/src/shared/components/labeledCheckbox/styles.module.scss
new file mode 100644
index 00000000000..778a22b42c3
--- /dev/null
+++ b/src/shared/components/labeledCheckbox/styles.module.scss
@@ -0,0 +1,16 @@
+label.labeledCheckbox {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 0px;
+  min-height: 1.2em;
+  font-weight: normal;
+
+  > input[type="checkbox"] {
+    cursor: pointer;
+    margin: 0px;
+    margin-right: 4px;
+    min-width: 1em;
+  }
+}
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
new file mode 100644
index 00000000000..9eb4adb10da
--- /dev/null
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -0,0 +1,214 @@
+import * as _ from "lodash";
+import * as React from "react";
+import Dictionary = _.Dictionary;
+import {TypeOfCancer as CancerType, CancerStudy} from "../../api/CBioPortalAPI";
+import "react-bootstrap-table/css/react-bootstrap-table.css";
+import {FlexCol, FlexRow} from "../flexbox/FlexBox";
+import * as styles_any from './styles.module.scss';
+import classNames from "../../lib/classNames";
+import {default as CancerStudyTreeData, CancerTreeNode} from "../query/CancerStudyTreeData";
+import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
+import ReactSelect from 'react-select';
+import 'react-select/dist/react-select.css';
+import StudyList from "../StudyList/StudyList";
+import StudyListLogic from "../StudyList/StudyListLogic";
+import {observer} from "../../../../node_modules/mobx-react/custom";
+import queryStore from "./QueryStore";
+import {action, toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
+import memoize from "../../lib/memoize";
+
+const styles = styles_any as {
+	CancerStudySelector: string,
+	selectable: string,
+	selected: string,
+	matchingNodeText: string,
+	nonMatchingNodeText: string,
+	selectCancerStudyHeader: string,
+	selectCancerStudyRow: string,
+	searchTextInput: string,
+
+	cancerTypeListContainer: string,
+	cancerTypeList: string,
+	cancerTypeListItem: string,
+	cancerTypeListItemLabel: string,
+	cancerTypeListItemCount: string,
+	cancerStudyListContainer: string,
+};
+
+export type ICancerStudySelectorProps = {
+	style?: React.CSSProperties;
+};
+
+@observer
+export default class CancerStudySelector extends React.Component<ICancerStudySelectorProps, void>
+{
+	constructor(props: ICancerStudySelectorProps)
+	{
+		super(props);
+	}
+
+	@memoize
+	getCancerTypeListClickHandler<T>(node:CancerType)
+	{
+		return (event:React.MouseEvent<T>) => queryStore.selectCancerType(node as CancerType, event.ctrlKey);
+	}
+
+	handleStudiesCheckbox<T>(event:React.FormEvent<T>, clickedStudyIds:string[])
+	{
+		if ((event.target as HTMLInputElement).checked)
+			queryStore.selectedCancerStudyIds = _.union(queryStore.selectedCancerStudyIds, clickedStudyIds);
+		else
+			queryStore.selectedCancerStudyIds = _.difference(queryStore.selectedCancerStudyIds, clickedStudyIds);
+	}
+
+	renderCancerTypeList()
+	{
+		let logic = this.getStudyListLogic();
+		let rootMeta = logic.getMetadata(logic.treeData.rootCancerType);
+		let listItems = rootMeta && rootMeta.childCancerTypes.map(this.renderCancerTypeListItem);
+
+		return (
+			<ul className={styles.cancerTypeList}>
+				{listItems}
+			</ul>
+		);
+	}
+
+	renderCancerTypeListItem = (cancerType:CancerType, arrayIndex:number) =>
+	{
+		let logic = this.getStudyListLogic();
+		let meta = logic.getMetadata(cancerType);
+		let numStudies = logic.getDescendantCancerStudies(cancerType).length;
+
+		if (!numStudies)
+			return null;
+
+		let selected = meta.isCancerType && _.includes(queryStore.selectedCancerTypeIds, cancerType.cancerTypeId);
+		let highlighted = this.getStudyListLogic().isHighlighted(cancerType);
+		let liClassName = classNames(
+			styles.cancerTypeListItem,
+			styles.selectable,
+			{
+				[styles.selected]: selected,
+				[styles.matchingNodeText]: !!queryStore.searchText && highlighted,
+				[styles.nonMatchingNodeText]: !!queryStore.searchText && !highlighted,
+			},
+		);
+
+		return (
+			<li
+				key={arrayIndex}
+				className={liClassName}
+				onMouseDown={this.getCancerTypeListClickHandler(cancerType)}
+			>
+				<span className={styles.cancerTypeListItemLabel}>
+					{cancerType.name}
+				</span>
+				<span className={styles.cancerTypeListItemCount}>
+					{numStudies}
+				</span>
+			</li>
+		);
+	}
+
+	renderStudyHeaderCheckbox = (shownStudies:CancerStudy[]) =>
+	{
+		let logic = this.getStudyListLogic();
+		let selectedStudies = queryStore.selectedCancerStudyIds.map(studyId => logic.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
+		let shownAndSelectedStudies = _.intersection(shownStudies, selectedStudies);
+		let checked = shownAndSelectedStudies.length > 0;
+		let indeterminate = checked && shownAndSelectedStudies.length != shownStudies.length;
+		return (
+			<LabeledCheckbox
+				checked={checked}
+				indeterminate={indeterminate}
+				labelProps={{
+					onClick: (event:React.MouseEvent<HTMLLabelElement>) => event.stopPropagation()
+				}}
+				inputProps={{
+					onChange: event => {
+						let shownStudyIds = shownStudies.map(study => study.studyId);
+						this.handleStudiesCheckbox(event, shownStudyIds);
+					}
+				}}
+			/>
+		);
+	}
+
+	getTreeData = memoize({
+		getAdditionalArgs: () => [
+			queryStore.cancerTypes.result,
+			queryStore.cancerStudies.result
+		],
+		function: () => new CancerStudyTreeData({
+			cancerTypes: queryStore.cancerTypes.result || [],
+			studies: queryStore.cancerStudies.result || []
+		}),
+	});
+
+	getStudyListLogic = memoize({
+		getAdditionalArgs: () => [
+			this.getTreeData(),
+			queryStore.maxTreeDepth,
+			queryStore.searchText,
+			queryStore.selectedCancerTypeIds,
+			queryStore.selectedCancerStudyIds
+		],
+		function: () => new StudyListLogic({
+			treeData: this.getTreeData(),
+			state: {
+				maxTreeDepth: queryStore.maxTreeDepth,
+				searchText: queryStore.searchText,
+				selectedCancerTypeIds: queryStore.selectedCancerTypeIds,
+				selectedStudyIds: queryStore.selectedCancerStudyIds,
+			},
+			handleSelectedStudiesChange: selectedStudyIds => queryStore.selectedCancerStudyIds = selectedStudyIds,
+		}),
+	});
+
+	render()
+	{
+		let searchTextOptions = queryStore.searchTextPresets;
+		if (queryStore.searchText && searchTextOptions.indexOf(queryStore.searchText) < 0)
+			searchTextOptions = [queryStore.searchText].concat(searchTextOptions);
+
+		return (
+			<FlexCol className={styles.CancerStudySelector} padded flex={1} style={this.props.style}>
+				<FlexRow padded overflow className={styles.selectCancerStudyRow}>
+					<span className={styles.selectCancerStudyHeader}>Select Cancer Study:</span>
+					<ReactSelect
+						className={styles.searchTextInput}
+						value={queryStore.searchText}
+						autofocus={true}
+						options={searchTextOptions.map(str => ({label: str, value: str}))}
+						promptTextCreator={(label:string) => `Search for "${label}"`}
+						placeholder='Search...'
+						noResultsText={false}
+						onCloseResetsInput={false}
+						onInputChange={(searchText:string) => {
+							queryStore.searchText = searchText;
+							queryStore.selectedCancerTypeIds = [];
+						}}
+						onChange={(option:{value:string}) => {
+							queryStore.searchText = option ? option.value || '' : '';
+							queryStore.selectedCancerTypeIds = [];
+						}}
+					/>
+					<div style={{flex: 1}}/>
+					Number of Studies Selected: {queryStore.selectedCancerStudyIds.length}
+				</FlexRow>
+
+				<FlexRow padded flex={1}>
+					<div className={styles.cancerTypeListContainer}>
+						{this.renderCancerTypeList()}
+					</div>
+					<div className={styles.cancerStudyListContainer}>
+						<StudyList
+							logic={this.getStudyListLogic()}
+						/>
+					</div>
+				</FlexRow>
+			</FlexCol>
+		);
+	}
+}
diff --git a/src/shared/components/query/CancerStudyTreeData.ts b/src/shared/components/query/CancerStudyTreeData.ts
new file mode 100644
index 00000000000..f964a2c3c83
--- /dev/null
+++ b/src/shared/components/query/CancerStudyTreeData.ts
@@ -0,0 +1,128 @@
+import {CancerStudy, TypeOfCancer as CancerType} from "../../api/CBioPortalAPI";
+import * as _ from 'lodash';
+
+export const CANCER_TYPE_ROOT = 'tissue';
+
+export type CancerTreeNode = CancerType|CancerStudy;
+export type NodeMetadata = {
+	isCancerType:boolean,
+	childCancerTypes:CancerType[],
+	childStudies:CancerStudy[],
+	descendantStudies:CancerStudy[],
+	descendantCancerTypes:CancerType[],
+	ancestors:CancerType[], // in order of ascending distance from node, ending in root node
+	siblings:CancerStudy[], // descendants of highest level non-root ancestor
+};
+
+export default class CancerStudyTreeData
+{
+	static sortNodes<T extends CancerTreeNode[]>(nodes:T):T
+	{
+		return _.sortBy(nodes, node => node.name) as T;
+	}
+
+	rootCancerType:CancerType = {
+		clinicalTrialKeywords: '',
+		dedicatedColor: '',
+		name: 'All',
+		parent: '',
+		shortName: 'All',
+		cancerTypeId: CANCER_TYPE_ROOT
+	};
+
+	map_node_meta = new Map<CancerTreeNode, NodeMetadata>();
+	map_cancerTypeId_cancerType = new Map<string, CancerType>();
+	map_studyId_cancerStudy = new Map<string, CancerStudy>();
+
+	constructor({cancerTypes = [], studies = []}: {cancerTypes: CancerType[], studies: CancerStudy[]})
+	{
+		cancerTypes = [this.rootCancerType].concat(cancerTypes);
+
+		let nodes:CancerTreeNode[];
+		let node:CancerTreeNode;
+		let meta:NodeMetadata;
+
+		// initialize lookups and metadata entries
+		for (nodes of [cancerTypes, studies])
+		{
+			for (node of nodes)
+			{
+				if (nodes == cancerTypes)
+					this.map_cancerTypeId_cancerType.set(node.cancerTypeId, node as CancerType);
+				else
+					this.map_studyId_cancerStudy.set((node as CancerStudy).studyId, node as CancerStudy);
+
+				this.map_node_meta.set(node, {
+					isCancerType: nodes == cancerTypes,
+					childCancerTypes: [],
+					childStudies: [],
+					descendantStudies: [],
+					descendantCancerTypes: [],
+					ancestors: [],
+					siblings: [],
+				});
+			}
+		}
+
+		// fill in metadata values
+		for (nodes of [cancerTypes, studies])
+		{
+			for (node of nodes)
+			{
+				meta = this.map_node_meta.get(node) as NodeMetadata;
+				let parent;
+				if (meta.isCancerType)
+					parent = this.map_cancerTypeId_cancerType.get((node as CancerType).parent);
+				else
+					parent = this.map_cancerTypeId_cancerType.get(node.cancerTypeId);
+
+				let parentMeta = parent && this.map_node_meta.get(parent);
+				if (parentMeta)
+				{
+					if (meta.isCancerType)
+						parentMeta.childCancerTypes.push(node as CancerType);
+					else
+						parentMeta.childStudies.push(node as CancerStudy);
+				}
+
+				while (parent && parentMeta)
+				{
+					meta.ancestors.push(parent);
+					if (meta.isCancerType)
+						parentMeta.descendantCancerTypes.push(node as CancerType);
+					else
+						parentMeta.descendantStudies.push(node as CancerStudy);
+
+					parent = this.map_cancerTypeId_cancerType.get(parent.parent);
+					parentMeta = parent && this.map_node_meta.get(parent);
+				}
+			}
+		}
+
+		// final pass
+		for (nodes of [cancerTypes, studies])
+		{
+			for (node of nodes)
+			{
+				meta = this.map_node_meta.get(node) as NodeMetadata;
+
+				// sort related node lists (except ancestors)
+				meta.descendantCancerTypes = CancerStudyTreeData.sortNodes(meta.descendantCancerTypes);
+				meta.descendantStudies = CancerStudyTreeData.sortNodes(meta.descendantStudies);
+				meta.childCancerTypes = CancerStudyTreeData.sortNodes(meta.childCancerTypes);
+				meta.childStudies = CancerStudyTreeData.sortNodes(meta.childStudies);
+
+				// get sibling studies
+				if (!meta.isCancerType)
+				{
+					let firstLevelAncestor = meta.ancestors[meta.ancestors.length - 2];
+					if (firstLevelAncestor)
+					{
+						let ancestorMeta = this.map_node_meta.get(firstLevelAncestor) as NodeMetadata;
+						meta.siblings = ancestorMeta.descendantStudies;
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
new file mode 100644
index 00000000000..f8c844ea2d1
--- /dev/null
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -0,0 +1,290 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import {GeneticProfile} from "../../api/CBioPortalAPI";
+import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
+import firstDefinedValue from "../../lib/firstDefinedValue";
+import FontAwesome from "react-fontawesome";
+import * as styles_any from './styles.module.scss';
+
+const styles = styles_any as {
+	GeneticProfileSelector: string,
+	singleCheckbox: string,
+	groupCheckbox: string,
+	radioGroup: string,
+	radioItem: string,
+	zScore: string,
+	profileName: string,
+};
+
+export const DATATYPE_ZSCORE = 'Z-SCORE';
+export const defaultSelectedAlterationTypes:GeneticProfile['geneticAlterationType'][] = [
+	'MUTATION_EXTENDED',
+	'COPY_NUMBER_ALTERATION'
+];
+export const geneticAlterationTypeGroupLabels:{[K in GeneticProfile['geneticAlterationType']]?: string} = {
+	"MRNA_EXPRESSION": "mRNA Expression data",
+};
+
+export type IGeneticProfileSelectorProps = {
+	profiles: GeneticProfile[];
+	onStateChange?: (newState:IGeneticProfileSelectorState) => void;
+} & IGeneticProfileSelectorState;
+
+export interface IGeneticProfileSelectorState
+{
+	selectedProfileIds?: string[];
+	zScoreThreshold?: string;
+}
+
+export default class GeneticProfileSelector extends React.Component<IGeneticProfileSelectorProps, IGeneticProfileSelectorState>
+{
+	static defaultProps:IGeneticProfileSelectorProps = {
+		profiles: [],
+	};
+
+	constructor(props: IGeneticProfileSelectorProps)
+	{
+		super(props);
+		this.state = {zScoreThreshold: '2.0'};
+	}
+
+	get selectedProfileIds()
+	{
+		return firstDefinedValue(this.props.selectedProfileIds, this.state.selectedProfileIds || []);
+	}
+
+	get zScoreThreshold()
+	{
+		return firstDefinedValue(this.props.zScoreThreshold, this.state.zScoreThreshold);
+	}
+
+	updateState(newState:IGeneticProfileSelectorState)
+	{
+		this.setState(newState, () => {
+			if (this.props.onStateChange)
+				this.props.onStateChange(this.state)
+		});
+	}
+
+	componentDidMount()
+	{
+		this.validateState();
+	}
+
+	componentDidUpdate()
+	{
+		this.validateState();
+	}
+
+	validateState()
+	{
+		if (this.props.selectedProfileIds)
+			return;
+
+		let selectedProfileIds = this.props.profiles
+			.filter(profile => _.includes(defaultSelectedAlterationTypes, profile.geneticAlterationType))
+			.map(profile => profile.geneticProfileId);
+
+		//this.updateState({selectedProfileIds});
+	}
+
+	render()
+	{
+		let profiles = this.props.profiles.filter(profile => profile.showProfileInAnalysisTab);
+		let groupedProfiles = _.groupBy(profiles, profile => profile.geneticAlterationType);
+
+		// puts default alteration types first
+		let altTypes = _.union(
+			defaultSelectedAlterationTypes,
+			Object.keys(groupedProfiles).sort()
+		);
+
+		return (
+			<div className={styles.GeneticProfileSelector}>
+				{this.renderCheckboxes(altTypes.map(altType => groupedProfiles[altType]))}
+			</div>
+		);
+	}
+
+	renderCheckboxes(groupedProfiles:GeneticProfile[][])
+	{
+		let output:JSX.Element[] = [];
+		for (let profiles of groupedProfiles)
+			this.renderGroup(profiles, output);
+		return output;
+	}
+
+	renderGroup(profiles:GeneticProfile[], output:JSX.Element[])
+	{
+		if (!profiles || !profiles.length)
+			return;
+
+		let firstProfile = profiles[0];
+		let altType = firstProfile.geneticAlterationType;
+		let ids = profiles.map(profile => profile.geneticProfileId);
+		let checked = _.intersection(this.selectedProfileIds, ids).length > 0;
+		let label = firstProfile.name;
+		if (profiles.length > 1)
+		{
+			let groupLabel = geneticAlterationTypeGroupLabels[altType] || altType;
+			label = `${groupLabel}. Select one of the profiles below:`;
+		}
+
+		output.push(
+			<div className={profiles.length > 1 ? styles.groupCheckbox : styles.singleCheckbox}>
+				<LabeledCheckbox
+					key={output.length}
+					checked={checked}
+					inputProps={{
+						onChange: event => this.updateState({
+							selectedProfileIds: (
+								(event.target as HTMLInputElement).checked
+								?   _.union(this.selectedProfileIds, [ids[0]])
+								:   _.difference(this.selectedProfileIds, ids)
+							)
+						})
+					}}
+				>
+					{label}
+				</LabeledCheckbox>
+
+				{!!(profiles.length == 1) && (
+					<FontAwesome name='question-circle' {...{alt: firstProfile.description}}/>
+				)}
+			</div>
+		);
+
+		if (profiles.length > 1)
+		{
+			output.push(
+				<div className={styles.radioGroup}>
+					{profiles.map(profile => (
+						<div className={styles.radioItem}>
+							<label>
+								<input
+									type='radio'
+									checked={_.includes(this.selectedProfileIds, profile.geneticProfileId)}
+									style={{userSelect: 'text'}}
+									onChange={event => {
+										if ((event.target as HTMLInputElement).checked)
+											this.updateState({
+												selectedProfileIds: (
+													_.union(
+														_.difference(this.selectedProfileIds, ids),
+														[profile.geneticProfileId]
+													)
+												)
+											})
+									}}
+								/>
+								<span className={styles.profileName}>{profile.name}</span>
+							</label>
+							<FontAwesome name='question-circle' {...{alt: profile.description}}/>
+						</div>
+					))}
+				</div>
+			);
+		}
+
+		if (firstProfile.datatype == DATATYPE_ZSCORE)
+		{
+			output.push(
+				<div className={styles.zScore} key={output.length}>
+					Enter a z-score threshold ±:
+					<input
+						type="text"
+						value={this.zScoreThreshold}
+						onChange={event => {
+							let zScoreThreshold = (event.target as HTMLInputElement).value;
+							this.updateState({zScoreThreshold});
+						}}
+					/>
+				</div>
+			);
+		}
+	}
+}
+
+let sample_profiles:Partial<GeneticProfile>[] = [
+  {
+    "geneticAlterationType": "METHYLATION",
+    "datatype": "CONTINUOUS",
+    "name": "Methylation (HM450)",
+    "description": "Methylation (HM450) beta-values for genes in 194 cases. For genes with multiple methylation probes, the probe most anti-correlated with expression.",
+    "showProfileInAnalysisTab": false,
+    "geneticProfileId": "laml_tcga_methylation_hm450",
+    "studyId": "laml_tcga"
+  },
+  {
+    "geneticAlterationType": "METHYLATION",
+    "datatype": "CONTINUOUS",
+    "name": "Methylation (HM27)",
+    "description": "Methylation (HM27) beta-values for genes in 194 cases. For genes with multiple methylation probes, the probe most anti-correlated with expression.",
+    "showProfileInAnalysisTab": false,
+    "geneticProfileId": "laml_tcga_methylation_hm27",
+    "studyId": "laml_tcga"
+  },
+  {
+    "geneticAlterationType": "COPY_NUMBER_ALTERATION",
+    "datatype": "CONTINUOUS",
+    "name": "Relative linear copy-number values",
+    "description": "Relative linear copy-number values for each gene (from Affymetrix SNP6).",
+    "showProfileInAnalysisTab": false,
+    "geneticProfileId": "laml_tcga_linear_CNA",
+    "studyId": "laml_tcga"
+  },
+  {
+    "geneticAlterationType": "MRNA_EXPRESSION",
+    "datatype": "Z-SCORE",
+    "name": "mRNA Expression z-Scores (RNA Seq V2 RSEM)",
+    "description": "mRNA z-Scores (RNA Seq V2 RSEM) compared to the expression distribution of each gene tumors that are diploid for this gene.",
+    "showProfileInAnalysisTab": true,
+    "geneticProfileId": "laml_tcga_rna_seq_v2_mrna_median_Zscores",
+    "studyId": "laml_tcga"
+  },
+  {
+    "geneticAlterationType": "MRNA_EXPRESSION",
+    "datatype": "CONTINUOUS",
+    "name": "mRNA expression (RNA Seq RPKM)",
+    "description": "Expression levels for 20443 genes in 179 aml cases (RNA Seq RPKM).",
+    "showProfileInAnalysisTab": false,
+    "geneticProfileId": "laml_tcga_rna_seq_mrna",
+    "studyId": "laml_tcga"
+  },
+  {
+    "geneticAlterationType": "MRNA_EXPRESSION",
+    "datatype": "CONTINUOUS",
+    "name": "mRNA expression (RNA Seq V2 RSEM)",
+    "description": "Expression levels for 20532 genes in 173 aml cases (RNA Seq V2 RSEM).",
+    "showProfileInAnalysisTab": false,
+    "geneticProfileId": "laml_tcga_rna_seq_v2_mrna",
+    "studyId": "laml_tcga"
+  },
+  {
+    "geneticAlterationType": "MRNA_EXPRESSION",
+    "datatype": "Z-SCORE",
+    "name": "mRNA Expression z-Scores (RNA Seq RPKM)",
+    "description": "mRNA z-Scores (RNA Seq RPKM) compared to the expression distribution of each gene tumors that are diploid for this gene.",
+    "showProfileInAnalysisTab": true,
+    "geneticProfileId": "laml_tcga_rna_seq_mrna_median_Zscores",
+    "studyId": "laml_tcga"
+  },
+  {
+    "geneticAlterationType": "COPY_NUMBER_ALTERATION",
+    "datatype": "DISCRETE",
+    "name": "Putative copy-number alterations from GISTIC",
+    "description": "Putative copy-number calls on 191 cases determined using GISTIC 2.0. Values: -2 = homozygous deletion; -1 = hemizygous deletion; 0 = neutral / no change; 1 = gain; 2 = high level amplification.",
+    "showProfileInAnalysisTab": true,
+    "geneticProfileId": "laml_tcga_gistic",
+    "studyId": "laml_tcga"
+  },
+  {
+    "geneticAlterationType": "MUTATION_EXTENDED",
+    "datatype": "MAF",
+    "name": "Mutations",
+    "description": "Mutation data from whole exome sequencing.",
+    "showProfileInAnalysisTab": true,
+    "geneticProfileId": "laml_tcga_mutations",
+    "studyId": "laml_tcga"
+  }
+];
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
new file mode 100644
index 00000000000..e3af6cbde67
--- /dev/null
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -0,0 +1,99 @@
+import * as _ from "lodash";
+import * as React from "react";
+import * as ReactBootstrap from 'react-bootstrap';
+import Spinner from "react-spinkit";
+import Dictionary = _.Dictionary;
+import CancerStudySelector from "./CancerStudySelector";
+import {FlexRow, FlexCol} from "../flexbox/FlexBox";
+import Radio = ReactBootstrap.Radio;
+import Checkbox = ReactBootstrap.Checkbox;
+import {Select, StateToggle} from "../ExperimentalControls";
+import * as styles_any from './styles.module.scss';
+import firstDefinedValue from "../../lib/firstDefinedValue";
+import GeneticProfileSelector from "./GeneticProfileSelector";
+import {IGeneticProfileSelectorState} from "./GeneticProfileSelector";
+import {observer} from "../../../../node_modules/mobx-react/custom";
+import queryStore from "./QueryStore";
+import DevTools from "../../../../node_modules/mobx-react-devtools/index";
+
+const styles = styles_any as {
+	QueryContainer: string,
+	CancerStudySelector: string,
+};
+
+export interface IQueryContainerProps
+{
+}
+
+export type IQueryContainerState = {
+} & IGeneticProfileSelectorState;
+
+@observer
+export default class QueryContainer extends React.Component<IQueryContainerProps, IQueryContainerState>
+{
+    constructor(props:IQueryContainerProps)
+    {
+        super(props);
+        this.state = {};
+    }
+
+    render():JSX.Element
+    {
+        if (queryStore.cancerTypes.status == 'fetching' || queryStore.cancerStudies.status == 'fetching')
+            return <Spinner/>;
+        if (!queryStore.cancerTypes.result || !queryStore.cancerStudies.result)
+            return <span>No data</span>;
+
+        return (
+            <FlexCol padded flex={1} className={styles.QueryContainer}>
+
+                <CancerStudySelector/>
+
+				{!!(queryStore.geneticProfiles.result) && (
+					<GeneticProfileSelector
+						profiles={queryStore.geneticProfiles.result}
+						selectedProfileIds={this.state.selectedProfileIds}
+					/>
+				)}
+
+                <FlexRow padded>
+					{/* demo controls */}
+                	<FlexCol className={styles.CancerStudySelector} padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
+                		<StateToggle label='Click tree node again to deselect' target={queryStore} name='clickAgainToDeselectSingle' defaultValue={queryStore.clickAgainToDeselectSingle}/>
+						<Select
+							label="Tree depth: "
+							selected={queryStore.maxTreeDepth}
+							options={[
+								{label: "0"},
+								{label: "1"},
+								{label: "2"},
+								{label: "3"},
+								{label: "4"},
+								{label: "5"},
+								{label: "6"},
+								{label: "7"},
+								{label: "8"},
+								{label: "9"},
+							]}
+							onChange={option => queryStore.maxTreeDepth = parseInt(option.label)}
+						/>
+						<span>Note: Use cmd+click to select/deselect multiple cancer types.</span>
+					</FlexCol>
+
+					{/* display state for demo */}
+					<pre style={{flex: 1, height: 200}}>
+						{
+							JSON.stringify({
+								selectedCancerTypeIds: queryStore.selectedCancerTypeIds,
+								selectedStudyIds: queryStore.selectedCancerStudyIds,
+							}, null, 4)
+						}
+					</pre>
+				</FlexRow>
+
+				<DevTools/>
+
+            </FlexCol>
+        );
+    }
+}
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
new file mode 100644
index 00000000000..a3b77149418
--- /dev/null
+++ b/src/shared/components/query/QueryStore.ts
@@ -0,0 +1,63 @@
+import * as _ from 'lodash';
+import RemoteData from "../../api/RemoteData";
+import client from "../../api/cbioportalClientInstance";
+import {reaction, toJS, observable, action, computed, whyRun} from "../../../../node_modules/mobx/lib/mobx";
+import {TypeOfCancer as CancerType} from "../../api/CBioPortalAPI";
+
+// mobx observable
+export class QueryStore
+{
+	constructor()
+	{
+		reaction(
+			() => toJS(this.selectedCancerStudyIds),
+			studyIds => {
+				if (studyIds && studyIds.length == 1)
+					this.geneticProfiles.params = {studyId: studyIds[0]};
+				else
+					this.geneticProfiles.cancel();
+			},
+			{
+				name: 'refreshGeneticProfiles',
+				compareStructural: true
+			}
+		);
+	}
+
+	@observable cancerTypes = new RemoteData(client, client.getAllCancerTypesUsingGET, {});
+	@observable cancerStudies = new RemoteData(client, client.getAllStudiesUsingGET, {});
+	@observable geneticProfiles = new RemoteData(client, client.getAllGeneticProfilesInStudyUsingGET);
+
+	@observable searchText:string = '';
+	@observable.shallow searchTextPresets = ['lung', 'serous', 'tcga', 'tcga -provisional'];
+	@observable.shallow selectedCancerStudyIds:string[] = [];
+
+	// experimental options
+	@observable.shallow selectedCancerTypeIds:string[] = [];
+	@observable maxTreeDepth:number = 9;
+	@observable clickAgainToDeselectSingle:boolean = true;
+
+	@action selectCancerType(cancerType:CancerType, multiSelect?:boolean)
+	{
+		let clickedCancerTypeId = cancerType.cancerTypeId;
+
+		if (multiSelect)
+		{
+			if (_.includes(this.selectedCancerTypeIds, clickedCancerTypeId))
+				this.selectedCancerTypeIds = _.difference(this.selectedCancerTypeIds, [clickedCancerTypeId]);
+			else
+				this.selectedCancerTypeIds = _.union(this.selectedCancerTypeIds, [clickedCancerTypeId]);
+		}
+		else if (this.clickAgainToDeselectSingle && _.isEqual(toJS(this.selectedCancerTypeIds), [clickedCancerTypeId]))
+		{
+			this.selectedCancerTypeIds = [];
+		}
+		else
+		{
+			this.selectedCancerTypeIds = [clickedCancerTypeId];
+		}
+	}
+}
+
+const queryStore = new QueryStore();
+export default queryStore;
diff --git a/src/shared/components/query/gene_lists.json b/src/shared/components/query/gene_lists.json
new file mode 100644
index 00000000000..e8281c760d9
--- /dev/null
+++ b/src/shared/components/query/gene_lists.json
@@ -0,0 +1,70 @@
+[{
+	"id": "Prostate Cancer: AR Signaling",
+	"genes": ["SOX9", "RAN", "TNK2", "EP300", "PXN", "NCOA2", "AR", "NRIP1", "NCOR1", "NCOR2"]
+}, {
+	"id": "Prostate Cancer: AR and steroid synthesis enzymes",
+	"genes": ["AKR1C3", "AR", "CYB5A", "CYP11A1", "CYP11B1", "CYP11B2", "CYP17A1", "CYP19A1", "CYP21A2", "HSD17B1", "HSD17B10", "HSD17B11", "HSD17B12", "HSD17B13", "HSD17B14", "HSD17B2", "HSD17B3", "HSD17B4", "HSD17B6", "HSD17B7", "HSD17B8", "HSD3B1", "HSD3B2", "HSD3B7", "RDH5", "SHBG", "SRD5A1", "SRD5A2", "SRD5A3", "STAR"]
+}, {
+	"id": "Prostate Cancer: Steroid inactivating genes",
+	"genes": ["AKR1C1", "AKR1C2", "AKR1C4", "CYP3A4", "CYP3A43", "CYP3A5", "CYP3A7", "UGT2B15", "UGT2B17", "UGT2B7"]
+}, {
+	"id": "Prostate Cancer: Down-regulated by androgen",
+	"genes": ["BCHE", "CDK8", "CTBP1", "CXCR7", "DDC", "DPH1", "FN1", "HES6", "MMP16", "MYC", "PEG3", "PIK3R3", "PRKD1", "SCNN1A", "SDC4", "SERPINI1", "SLC29A1", "ST7", "TULP4"]
+}, {
+	"id": "Glioblastoma: TP53 Pathway",
+	"genes": ["CDKN2A", "MDM2", "MDM4", "TP53"]
+}, {
+	"id": "Glioblastoma: RTK/Ras/PI3K/AKT Signaling",
+	"genes": ["EGFR", "ERBB2", "PDGFRA", "MET", "KRAS", "NRAS", "HRAS", "NF1", "SPRY2", "FOXO1", "FOXO3", "AKT1", "AKT2", "AKT3", "PIK3R1", "PIK3CA", "PTEN"]
+}, {
+	"id": "Glioblastoma: RB Pathway",
+	"genes": ["CDKN2A", "CDKN2B", "CDKN2C", "CDK4", "CDK6", "CCND2", "RB1"]
+}, {
+	"id": "Ovarian Cancer: Oncogenes associated with epithelial ovarian cancer",
+	"genes": ["RAB25", "MECOM", "EIF5A2", "PRKCI", "PIK3CA", "KIT", "FGF1", "MYC", "EGFR", "NOTCH3", "KRAS", "AKT1", "ERBB2", "PIK3R1", "CCNE1", "AKT2", "AURKA"]
+}, {
+	"id": "Ovarian Cancer: Putative tumor-suppressor genes in epithelial ovarian cancer",
+	"genes": ["DIRAS3", "RASSF1", "DLEC1", "SPARC", "DAB2", "PLAGL1", "RPS6KA2", "PTEN", "OPCML", "BRCA2", "ARL11", "WWOX", "TP53", "DPH1", "BRCA1", "PEG3"]
+}, {
+	"id": "General: Cell Cycle Control",
+	"genes": ["RB1", "RBL1", "RBL2", "CCNA1", "CCNB1", "CDK1", "CCNE1", "CDK2", "CDC25A", "CCND1", "CDK4", "CDK6", "CCND2", "CDKN2A", "CDKN2B", "MYC", "CDKN1A", "CDKN1B", "E2F1", "E2F2", "E2F3", "E2F4", "E2F5", "E2F6", "E2F7", "E2F8", "SRC", "JAK1", "JAK2", "STAT1", "STAT2", "STAT3", "STAT5A", "STAT5B"]
+}, {
+	"id": "General: p53 signaling",
+	"genes": ["TP53", "MDM2", "MDM4", "CDKN2A", "CDKN2B", "TP53BP1"]
+}, {
+	"id": "General: Notch signaling",
+	"genes": ["ADAM10", "ADAM17", "APH1A", "APH1B", "ARRDC1", "CIR1", "CTBP1", "CTBP2", "CUL1", "DLL1", "DLL3", "DLL4", "DTX1", "DTX2", "DTX3", "DTX3L", "DTX4", "EP300", "FBXW7", "HDAC1", "HDAC2", "HES1", "HES5", "HEYL", "ITCH", "JAG1", "JAG2", "KDM5A", "LFNG", "MAML1", "MAML2", "MAML3", "MFNG", "NCOR2", "NCSTN", "NOTCH1", "NOTCH2", "NOTCH3", "NOTCH4", "NRARP", "NUMB", "NUMBL", "PSEN1", "PSEN2", "PSENEN", "RBPJ", "RBPJL", "RFNG", "SNW1", "SPEN", "HES2", "HES4", "HES7", "HEY1", "HEY2"]
+}, {
+	"id": "General: DNA Damage Response",
+	"genes": ["CHEK1", "CHEK2", "RAD51", "BRCA1", "BRCA2", "MLH1", "MSH2", "ATM", "ATR", "MDC1", "PARP1", "FANCF"]
+}, {
+	"id": "General: Other growth / proliferation signaling",
+	"genes": ["CSF1", "CSF1R", "IGF1", "IGF1R", "FGF1", "FGFR1", "AURKA", "DLEC1", "PLAGL1", "OPCML", "DPH1"]
+}, {
+	"id": "General: Survival / cell death regulation signaling",
+	"genes": ["NFKB1", "NFKB2", "CHUK", "DIRAS3", "FAS", "HLA-G", "BAD", "BCL2", "BCL2L1", "APAF1", "CASP9", "CASP8", "CASP10", "CASP3", "CASP6", "CASP7", "GSK3B", "ARL11", "WWOX", "PEG3", "TGFB1", "TGFBR1", "TGFBR2"]
+}, {
+	"id": "General: Telomere maintenance",
+	"genes": ["TERC", "TERT"]
+}, {
+	"id": "General: RTK signaling family",
+	"genes": ["EGFR", "ERBB2", "ERBB3", "ERBB4", "PDGFA", "PDGFB", "PDGFRA", "PDGFRB", "KIT", "FGF1", "FGFR1", "IGF1", "IGF1R", "VEGFA", "VEGFB", "KDR"]
+}, {
+	"id": "General: PI3K-AKT-mTOR signaling",
+	"genes": ["PIK3CA", "PIK3R1", "PIK3R2", "PTEN", "PDPK1", "AKT1", "AKT2", "FOXO1", "FOXO3", "MTOR", "RICTOR", "TSC1", "TSC2", "RHEB", "AKT1S1", "RPTOR", "MLST8"]
+}, {
+	"id": "General: Ras-Raf-MEK-Erk/JNK signaling",
+	"genes": ["KRAS", "HRAS", "BRAF", "RAF1", "MAP3K1", "MAP3K2", "MAP3K3", "MAP3K4", "MAP3K5", "MAP2K1", "MAP2K2", "MAP2K3", "MAP2K4", "MAP2K5", "MAPK1", "MAPK3", "MAPK4", "MAPK6", "MAPK7", "MAPK8", "MAPK9", "MAPK12", "MAPK14", "DAB2", "RASSF1", "RAB25"]
+}, {
+	"id": "General: Regulation of ribosomal protein synthesis and cell growth",
+	"genes": ["RPS6KA1", "RPS6KA2", "RPS6KB1", "RPS6KB2", "EIF5A2", "EIF4E", "EIF4EBP1", "RPS6", "HIF1A"]
+}, {
+	"id": "General: Angiogenesis",
+	"genes": ["VEGFA", "VEGFB", "KDR", "IL8", "CXCR1", "CXCR2"]
+}, {
+	"id": "General: Folate transport",
+	"genes": ["SLC19A1", "FOLR1", "FOLR2", "FOLR3", "FOLR4"]
+}, {
+	"id": "General: Invasion and metastasis",
+	"genes": ["MMP1", "MMP2", "MMP3", "MMP7", "MMP9", "MMP10", "MMP11", "MMP12", "MMP13", "MMP14", "MMP15", "MMP16", "MMP17", "MMP19", "MMP21", "MMP23B", "MMP24", "MMP25", "MMP26", "MMP27", "MMP28", "ITGB3", "ITGAV", "PTK2", "CDH1", "SPARC", "WFDC2"]
+}]
\ No newline at end of file
diff --git a/src/shared/components/query/old/CancerStudySelector.tsx b/src/shared/components/query/old/CancerStudySelector.tsx
new file mode 100644
index 00000000000..22e41a909e6
--- /dev/null
+++ b/src/shared/components/query/old/CancerStudySelector.tsx
@@ -0,0 +1,604 @@
+import * as _ from "lodash";
+import * as React from "react";
+import Dictionary = _.Dictionary;
+import {TypeOfCancer as CancerType, CancerStudy} from "../../../api/CBioPortalAPI";
+import {ITreeDescriptor, default as DescriptorTree} from "../../tree/DescriptorTree";
+import {BootstrapTable} from "react-bootstrap-table";
+import {TableHeaderColumn} from "react-bootstrap-table";
+import "react-bootstrap-table/css/react-bootstrap-table.css";
+import FontAwesome from "react-fontawesome";
+import {FlexCol, FlexRow} from "../../flexbox/FlexBox";
+import * as styles_any from './styles.module.scss';
+import memoize, {memoizeWith} from "../../../lib/memoize";
+import classNames from "../../../lib/classNames";
+import firstDefinedValue from "../../../lib/firstDefinedValue";
+import CancerStudyTreeData from "../CancerStudyTreeData";
+import {CancerTreeNode, NodeMetadata} from "../CancerStudyTreeData";
+import LabeledCheckbox from "../../labeledCheckbox/LabeledCheckbox";
+import ReactSelect from 'react-select';
+import 'react-select/dist/react-select.css';
+
+const CancerTree = DescriptorTree.of<CancerTreeNode>();
+
+const styles = styles_any as {
+	CancerStudySelector: string,
+	treeNodeContent: string,
+	selectable: string,
+	selected: string,
+	treeNodeLabel: string,
+	treeWithStudies: string,
+	cancerTypeTreeNode: string,
+	cancerStudyName: string,
+	cancerStudySamples: string,
+	matchingNodeText: string,
+	nonMatchingNodeText: string,
+	studyHeader: string,
+	selectCancerStudyHeader: string,
+	selectCancerStudyRow: string,
+	searchTextInput: string,
+	showHideTreeLink: string,
+};
+
+function matchesSearchText(input:string, searchText:string):boolean
+{
+	input = input.toLocaleLowerCase();
+	searchText = searchText.toLocaleLowerCase();
+
+	return searchText.split(' ').every(filter => {
+		let desired = true;
+		if (filter.startsWith('-'))
+		{
+			filter = filter.substr(1);
+			desired = false;
+		}
+
+		let found = input.indexOf(filter) >= 0;
+		return found == desired;
+	});
+}
+
+export type ICancerStudySelectorProps = {
+	style?: React.CSSProperties;
+
+	searchTextPresets: string[];
+	cancerTypes: CancerType[];
+	studies: CancerStudy[];
+
+	onStateChange?: (newState:ICancerStudySelectorState) => void;
+} & ICancerStudySelectorExperimentalOptions & ICancerStudySelectorState;
+
+export interface ICancerStudySelectorExperimentalOptions
+{
+	showAllStudiesByDefault?: boolean;
+	showRoot?: boolean;
+	maxTreeDepth?: number;
+	filterBySelection?: boolean;
+	showStudiesInTree?: boolean;
+	clickAgainToDeselectSingle?: boolean;
+}
+
+export interface ICancerStudySelectorState
+{
+	hideTree?: boolean;
+	searchText?: string;
+	selectedCancerTypeIds?: string[];
+	selectedStudyIds?: string[];
+}
+
+export default class CancerStudySelector extends React.Component<ICancerStudySelectorProps, ICancerStudySelectorState>
+{
+	static get defaultProps():Partial<ICancerStudySelectorProps>
+	{
+		return {
+			maxTreeDepth: 9,
+			showAllStudiesByDefault: true,
+			clickAgainToDeselectSingle: true,
+		};
+	}
+
+	tree:DescriptorTree<CancerTreeNode>;
+
+	constructor(props: ICancerStudySelectorProps)
+	{
+		super(props);
+		this.state = {};
+	}
+
+	componentDidMount()
+	{
+	}
+
+	get selectableTreeNodes()
+	{
+		return !this.props.filterBySelection && !this.props.showStudiesInTree;
+	}
+
+	get searchText()
+	{
+		return firstDefinedValue(this.props.searchText, this.state.searchText || '');
+	}
+
+	get maxTreeDepth()
+	{
+		if (firstDefinedValue(this.props.hideTree, this.state.hideTree))
+			return 0;
+		return this.props.maxTreeDepth;
+	}
+
+	get selectedCancerTypeIds()
+	{
+		return firstDefinedValue(this.props.selectedCancerTypeIds, this.state.selectedCancerTypeIds || []);
+	}
+
+	get selectedStudyIds()
+	{
+		return firstDefinedValue(this.props.selectedStudyIds, this.state.selectedStudyIds || []);
+	}
+
+	updateState(newState:ICancerStudySelectorState)
+	{
+		this.setState(newState);
+		if (this.tree)
+			this.tree.forceUpdate();
+
+		if (this.props.onStateChange)
+		{
+			this.props.onStateChange({
+				selectedCancerTypeIds: this.selectedCancerTypeIds,
+				selectedStudyIds: this.selectedStudyIds,
+				...newState
+			});
+		}
+	}
+
+	// these parameters determine when to recompute the tree info
+	getMemoizeParams = ():any[] => [this.props.cancerTypes, this.props.studies];
+
+	@memoizeWith('getMemoizeParams')
+	getTreeInfo()
+	{
+		return new CancerStudyTreeData(this.props);
+	}
+
+	@memoizeWith('getMemoizeParams')
+	getTreeDescriptor():ITreeDescriptor<CancerType|CancerStudy> & {rootNode: CancerType, setExpanded: <T>(node:CancerTreeNode, value:boolean, event:React.MouseEvent<T>) => void, nodeFilter: (node:CancerTreeNode) => boolean}
+	{
+		let {
+			rootCancerType,
+			map_node_meta,
+		} = this.getTreeInfo();
+
+		let map_cancerType_expanded = new Map<CancerTreeNode, boolean>();
+		map_cancerType_expanded.set(rootCancerType, true);
+
+		// filters out empty CancerType subtrees
+		let shouldConsiderNode = (node:CancerTreeNode) =>
+		{
+			let meta = map_node_meta.get(node) as NodeMetadata;
+			if (meta.isCancerType)
+			{
+				// ignore cancer types excluded by depth
+				if (meta.ancestors.length > this.maxTreeDepth)
+					return false;
+				// ignore cancer types with no descendant studies
+				if (meta.descendantStudies.length == 0)
+					return false;
+			}
+			return true;
+		}
+
+		// returns true if the node or any related nodes match
+		let nodeFilter = memoize({
+			getAdditionalArgs: () => [this.maxTreeDepth, this.searchText],
+			fixedArgsLength: 1,
+			function: (node:CancerTreeNode):boolean =>
+			{
+				let meta = map_node_meta.get(node) as NodeMetadata;
+
+				if (!shouldConsiderNode(node))
+					return false;
+
+				// if no search text is entered, include all nodes
+				if (!this.searchText)
+					return true;
+
+				// check for matching text in this node and related nodes
+				for (let nodes of [[node], meta.descendantCancerTypes, meta.descendantStudies, meta.ancestors])
+					for (let node of nodes)
+						if (shouldConsiderNode(node) && matchesSearchText(node.name, this.searchText))
+							return true;
+
+				// no match
+				return false;
+			}
+		});
+
+		let hasChildren = (node:CancerTreeNode):boolean =>
+		{
+			let meta = map_node_meta.get(node) as NodeMetadata;
+			if (meta.isCancerType)
+			{
+				// ignore cancer types excluded by depth
+				if (meta.ancestors.length > this.maxTreeDepth)
+					return false;
+
+				return meta.descendantStudies.some(nodeFilter);
+			}
+
+			return false;
+		}
+
+		let isExpanded = (node:CancerTreeNode) =>
+		{
+			let meta = map_node_meta.get(node) as NodeMetadata;
+			if (!meta.isCancerType)
+				return false;
+
+			if (map_cancerType_expanded.get(node))
+				return true;
+
+			// if user wants to search, expand all ancestors of matching nodes
+			if (this.searchText)
+			{
+				if (meta.descendantCancerTypes.some(nodeFilter))
+					return true;
+
+				if (meta.descendantStudies.some(nodeFilter))
+					return true;
+
+				// in fact, we want everything shown to be expanded
+				return true;
+			}
+
+			return false;
+		}
+
+		function setExpanded<T>(node:CancerTreeNode, value:boolean, event:React.MouseEvent<T>):void
+		{
+			map_cancerType_expanded.set(node, value);
+			if (event.ctrlKey || event.metaKey)
+			{
+				let meta = map_node_meta.get(node) as NodeMetadata;
+				for (let child of meta.childCancerTypes)
+					setExpanded(child, value, event);
+			}
+		}
+
+		let getChildren = (node:CancerTreeNode):CancerTreeNode[]|undefined =>
+		{
+			if (!hasChildren(node))
+				return undefined;
+
+			let meta = map_node_meta.get(node) as NodeMetadata;
+			let children:CancerTreeNode[] = meta.childCancerTypes;
+			if (this.props.showStudiesInTree)
+			{
+				let childStudies = meta.ancestors.length == this.maxTreeDepth ? meta.descendantStudies : meta.childStudies;
+				children = children.concat(childStudies);
+			}
+			return children.filter(nodeFilter);
+		}
+
+		let getContent = (node:CancerTreeNode) =>
+		{
+			let meta = map_node_meta.get(node) as NodeMetadata;
+			if (meta.isCancerType)
+				return this.renderCancerTypeTreeNode(node as CancerType);
+			else
+				return this.renderCancerStudyTreeNode(node as CancerStudy);
+		}
+
+		return {
+			rootNode: rootCancerType,
+			isExpanded,
+			setExpanded,
+			getChildren,
+			getContent,
+			getListItemProps: this.getListItemProps,
+			nodeFilter,
+		};
+	}
+
+	@memoize
+	getTreeSelectHandler<T>(node:CancerTreeNode)
+	{
+		return (event:React.MouseEvent<T>) => {
+			// stop if we clicked on the checkbox
+			if (event.target instanceof HTMLInputElement)
+				return;
+
+			event.stopPropagation();
+
+			let clickedCancerTypeId = node.cancerTypeId;
+
+			let selectedCancerTypeIds = this.selectedCancerTypeIds;
+			if (event.ctrlKey)
+			{
+				if (_.includes(selectedCancerTypeIds, clickedCancerTypeId))
+					selectedCancerTypeIds = _.difference(selectedCancerTypeIds, [clickedCancerTypeId]);
+				else
+					selectedCancerTypeIds = _.union(selectedCancerTypeIds, [clickedCancerTypeId]);
+			}
+			else if (this.props.clickAgainToDeselectSingle && _.isEqual(selectedCancerTypeIds, [clickedCancerTypeId]))
+			{
+				selectedCancerTypeIds = [];
+			}
+			else
+			{
+				selectedCancerTypeIds = [clickedCancerTypeId];
+			}
+
+			this.updateState({selectedCancerTypeIds});
+		};
+	}
+
+	@memoize
+	getOnCheckHandler<T>(node:CancerTreeNode)
+	{
+		return (event:React.FormEvent<T>) => {
+			let clickedStudyIds:string[];
+			let treeInfo = this.getTreeInfo();
+			let meta = treeInfo.map_node_meta.get(node) as NodeMetadata;
+			if (meta.isCancerType)
+				clickedStudyIds = meta.descendantStudies.map(study => study.studyId);
+			else
+				clickedStudyIds = [(node as CancerStudy).studyId];
+			this.handleStudiesCheckbox(event, clickedStudyIds);
+		};
+	}
+
+	handleStudiesCheckbox<T>(event:React.FormEvent<T>, clickedStudyIds:string[])
+	{
+		let selectedStudyIds = this.selectedStudyIds;
+		if ((event.target as HTMLInputElement).checked)
+			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
+		else
+			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
+
+		this.updateState({selectedStudyIds});
+	}
+
+	getListItemProps = (node:CancerTreeNode):React.HTMLAttributes<HTMLLIElement> =>
+	{
+		let meta = this.getTreeInfo().map_node_meta.get(node) as NodeMetadata;
+		return {
+			className: classNames({
+				[styles.selectable]: this.selectableTreeNodes,
+				[styles.selected]: this.selectableTreeNodes && meta.isCancerType && _.includes(this.selectedCancerTypeIds, node.cancerTypeId),
+			})
+		};
+	};
+
+	getMatchingNodeClassNames(node:CancerTreeNode):string
+	{
+		let matchingNode = !!this.searchText && matchesSearchText(node.name, this.searchText);
+		return classNames({
+			[styles.matchingNodeText]: !!this.searchText && matchingNode,
+			[styles.nonMatchingNodeText]: !!this.searchText && !matchingNode,
+		});
+	}
+
+	renderCancerTypeTreeNode = (cancerType:CancerType) =>
+	{
+		let treeInfo = this.getTreeInfo();
+		let desc = this.getTreeDescriptor();
+		let meta = treeInfo.map_node_meta.get(cancerType) as NodeMetadata;
+		let selectedChildStudies = _.intersection(this.selectedStudyIds, meta.descendantStudies.map(study => study.studyId));
+		let checked = selectedChildStudies.length > 0;
+		let indeterminate = checked && selectedChildStudies.length != meta.descendantStudies.length;
+
+		let label = (
+			<span
+				className={classNames(styles.treeNodeLabel, this.getMatchingNodeClassNames(cancerType))}
+				onMouseDown={this.selectableTreeNodes ? this.getTreeSelectHandler(cancerType) : undefined}
+			>
+				{`${cancerType.name} (${meta.descendantStudies.filter(desc.nodeFilter).length})`}
+			</span>
+		);
+
+		return (
+			<FlexRow overflow className={classNames(styles.cancerTypeTreeNode, styles.treeNodeContent)}>
+				<LabeledCheckbox
+					checked={checked}
+					indeterminate={indeterminate}
+					inputProps={{
+						onChange: this.getOnCheckHandler(cancerType)
+					}}
+				>
+					{this.selectableTreeNodes ? null : label}
+				</LabeledCheckbox>
+
+				{this.selectableTreeNodes ? label : null}
+			</FlexRow>
+		);
+	}
+
+	getShownStudies():CancerStudy[]
+	{
+		let treeInfo = this.getTreeInfo();
+		let treeDesc = this.getTreeDescriptor();
+
+		let selectedCancerTypes = this.selectedCancerTypeIds.map(cancerTypeId => treeInfo.map_cancerTypeId_cancerType.get(cancerTypeId) as CancerType);
+
+		// show all descendant studies of selected cancer types
+		function getDescendantStudies(cancerType:CancerType)
+		{
+			let meta = treeInfo.map_node_meta.get(cancerType);
+			return meta ? meta.descendantStudies : [];
+		}
+		let studies:CancerStudy[] = _.union.apply(_, selectedCancerTypes.map(getDescendantStudies));
+
+		// if filtering by selection, expand studies list to include siblings
+		if (this.props.filterBySelection && this.maxTreeDepth)
+		{
+			function getSiblings(studyId:string)
+			{
+				let study = treeInfo.map_studyId_cancerStudy.get(studyId) as CancerStudy;
+				let meta = treeInfo.map_node_meta.get(study) as NodeMetadata;
+				return meta.siblings;
+			}
+			studies = _.union.apply(_, this.selectedStudyIds.map(getSiblings));
+		}
+
+		// handle case where there are no descendant studies
+		if ((studies.length == 0 && this.props.showAllStudiesByDefault) || !this.maxTreeDepth)
+		{
+			let rootMeta = treeInfo.map_node_meta.get(treeInfo.rootCancerType) as NodeMetadata;
+			studies = rootMeta.descendantStudies;
+		}
+
+		// filter and sort studies list
+		return CancerStudyTreeData.sortNodes(studies.filter(treeDesc.nodeFilter));
+	}
+
+	renderStudyHeaderCheckbox = (shownStudies:CancerStudy[]) =>
+	{
+		let treeInfo = this.getTreeInfo();
+		let selectedStudies = this.selectedStudyIds.map(studyId => treeInfo.map_studyId_cancerStudy.get(studyId) as CancerStudy);
+		let shownAndSelectedStudies = _.intersection(shownStudies, selectedStudies);
+		let checked = shownAndSelectedStudies.length > 0;
+		let indeterminate = checked && shownAndSelectedStudies.length != shownStudies.length;
+		return (
+			<LabeledCheckbox
+				checked={checked}
+				indeterminate={indeterminate}
+				labelProps={{
+					onClick: (event:React.MouseEvent<HTMLLabelElement>) => event.stopPropagation()
+				}}
+				inputProps={{
+					onChange: event => {
+						let shownStudyIds = shownStudies.map(study => study.studyId);
+						this.handleStudiesCheckbox(event, shownStudyIds);
+					}
+				}}
+			/>
+		);
+	}
+
+	renderCancerStudyTreeNode = (study:CancerStudy) =>
+	{
+		return (
+			<FlexRow overflow padded className={styles.treeNodeContent}>
+				{this.renderStudyName(study.name, study)}
+				<span className={styles.cancerStudySamples}>
+					{`${study.allSampleCount} samples`}
+				</span>
+				{this.renderStudyLinks(study)}
+			</FlexRow>
+		);
+	}
+
+	renderStudyName = (name:string, study:CancerStudy) =>
+	{
+		let checked = !!this.selectedStudyIds.find(id => id == study.studyId);
+		return (
+			<LabeledCheckbox
+				checked={checked}
+				labelProps={{
+					className: styles.cancerStudyName
+				}}
+				inputProps={{
+					onChange: this.getOnCheckHandler(study)
+				}}
+			>
+				<span className={this.getMatchingNodeClassNames(study)}>
+					{name}
+				</span>
+			</LabeledCheckbox>
+		);
+	}
+
+	renderStudyLinks = (study:CancerStudy) =>
+	{
+		let links = [];
+		if (study.studyId)
+			links.push({icon: 'cube', url: `/study?id=${study.studyId}#summary`});
+		if (study.pmid)
+			links.push({icon: 'book', url: `http://www.ncbi.nlm.nih.gov/pubmed/${study.pmid}`});
+		return links.map((link, i) => (
+			<a key={i} href={link.url}>
+				<FontAwesome name={link.icon}/>
+			</a>
+		));
+	}
+
+	renderStudyLinksTableCell = (id:string, study:CancerStudy) =>
+	{
+		return (
+			<FlexRow overflow padded>
+				{this.renderStudyLinks(study)}
+			</FlexRow>
+		);
+	}
+
+	render()
+	{
+		let treeDesc = this.getTreeDescriptor();
+		let shownStudies = this.getShownStudies();
+
+		let searchTextOptions = this.props.searchTextPresets;
+		if (this.searchText && searchTextOptions.indexOf(this.searchText) < 0)
+			searchTextOptions = [this.searchText].concat(searchTextOptions);
+
+		return (
+			<FlexCol className={styles.CancerStudySelector} padded flex={1} style={this.props.style}>
+				<FlexRow padded overflow className={styles.selectCancerStudyRow}>
+					<span className={styles.selectCancerStudyHeader}>Select Cancer Study:</span>
+					<ReactSelect
+						className={styles.searchTextInput}
+						value={this.searchText}
+						autofocus={true}
+						options={searchTextOptions.map(str => ({label: str, value: str}))}
+						promptTextCreator={(label:string) => `Search for "${label}"`}
+						placeholder='Search...'
+						noResultsText={false}
+						onCloseResetsInput={false}
+						onInputChange={(searchText:string) => this.setState({searchText})}
+						onChange={(option:{value:string}) => this.setState({searchText: option ? option.value || '' : ''})}
+					/>
+					<a className={styles.showHideTreeLink} onClick={() => this.setState({hideTree: !!this.maxTreeDepth})}>
+						{this.state.hideTree ? 'Show Tree' : 'Hide Tree'}
+					</a>
+					<div style={{flex: 1}}/>
+					Number of Studies Selected: {this.selectedStudyIds.length}
+				</FlexRow>
+				<FlexRow padded flex={1}>
+					{!!(this.maxTreeDepth > 0 || this.props.showStudiesInTree) && (
+						<FlexCol flex={1}>
+							<CancerTree
+								className={this.props.showStudiesInTree ? styles.treeWithStudies : undefined}
+								ref={this.handleTreeRef}
+								treeDescriptor={treeDesc}
+								node={treeDesc.rootNode}
+								onExpand={treeDesc.setExpanded}
+								showRoot={!!this.props.showRoot}
+							/>
+						</FlexCol>
+					)}
+					{!!(!this.props.showStudiesInTree) && (
+						<FlexCol flex={2}>
+							<BootstrapTable keyField="cancerStudyId" data={shownStudies}>
+								<TableHeaderColumn width="70%" dataField='name' dataSort dataFormat={this.renderStudyName}>
+									<div className={styles.studyHeader}>
+										{this.renderStudyHeaderCheckbox(shownStudies)}
+										{'Study'}
+									</div>
+								</TableHeaderColumn>
+
+								<TableHeaderColumn width="15%" dataField='allSampleCount' dataSort dataAlign="right">
+									{'Samples'}
+								</TableHeaderColumn>
+
+								<TableHeaderColumn width="15%" dataField='studyId' dataSort dataFormat={this.renderStudyLinksTableCell}>
+									{'Links'}
+								</TableHeaderColumn>
+							</BootstrapTable>
+						</FlexCol>
+					)}
+				</FlexRow>
+			</FlexCol>
+		);
+	}
+
+	handleTreeRef = (ref:DescriptorTree<CancerTreeNode>) => this.tree = ref;
+}
diff --git a/src/shared/components/query/old/QueryConnector.ts b/src/shared/components/query/old/QueryConnector.ts
new file mode 100644
index 00000000000..4626dd5141e
--- /dev/null
+++ b/src/shared/components/query/old/QueryConnector.ts
@@ -0,0 +1,89 @@
+import {TypeOfCancer, CancerStudy, default as CBioPortalAPI} from "../../../api/CBioPortalAPI";
+import {Connector, IDispatch} from "../../../lib/ConnectorAPI";
+import {RootState} from "../../../../redux/rootReducer";
+import {IQueryContainerProps} from "./QueryContainer";
+
+const FETCH = 'query/fetch';
+const SELECT = 'query/select';
+export const actionTypes = {FETCH, SELECT};
+
+export type ActionTypes = (
+    {type: typeof FETCH, status: 'fetching'}
+    | {type: typeof FETCH, status: 'complete', payload: QueryData}
+    | {type: typeof FETCH, status: 'error', error: Error}
+    | {type: typeof SELECT, cancerStudyIdentifiers: string[] }
+);
+
+export type QueryData = {
+    status?: 'fetching' | 'complete' | 'error',
+    cancerTypes?: TypeOfCancer[],
+    studies?: CancerStudy[],
+};
+
+const client = new CBioPortalAPI(`//${(window as any)['__API_ROOT__']}`);
+
+export default new class QueryConnector extends Connector<RootState, QueryData, ActionTypes, IQueryContainerProps>
+{
+    initialState:QueryData = {
+        status: 'fetching',
+    };
+
+    actions = {
+        loadQueryData: () => {
+            this.dispatch({
+                type: FETCH,
+                status: 'fetching',
+            });
+
+            Promise.all([
+                client.getAllCancerTypesUsingGET({}),
+                client.getAllStudiesUsingGET({})
+            ]).then(
+                ([cancerTypes, studies]) => {
+                    this.dispatch({
+                        type: FETCH,
+                        status: 'complete',
+                        payload: {
+                            cancerTypes,
+                            studies
+                        }
+                    });
+                },
+                reason => this.dispatch({
+                    type: FETCH,
+                    status: 'error',
+                    error: reason
+                })
+            );
+        }
+    };
+
+    mapStateToProps(state:RootState):IQueryContainerProps {
+        return {data: state.old_query};
+    }
+
+    reducer(state:QueryData, action:ActionTypes) {
+        switch (action.type) {
+            case FETCH: {
+                switch (action.status) {
+                    case 'fetching':
+                        return this.mergeState(state, {status: 'fetching'});
+
+                    case 'complete':
+                        state = this.mergeState(state, {status: 'complete'});
+                        state = this.mergeState(state, action.payload);
+                        return state;
+
+                    case 'error':
+                        return this.mergeState(state, {status: 'error'});
+
+                    default:
+                        return state;
+                }
+            }
+            default: {
+                return state;
+            }
+        }
+    }
+};
diff --git a/src/shared/components/query/old/QueryContainer.tsx b/src/shared/components/query/old/QueryContainer.tsx
new file mode 100644
index 00000000000..a2d0ef2d272
--- /dev/null
+++ b/src/shared/components/query/old/QueryContainer.tsx
@@ -0,0 +1,120 @@
+import * as _ from "lodash";
+import * as React from "react";
+import * as ReactBootstrap from 'react-bootstrap';
+import QueryConnector, {QueryData} from "./QueryConnector";
+import Spinner from "react-spinkit";
+import Dictionary = _.Dictionary;
+import CancerStudySelector from "./CancerStudySelector";
+import {ICancerStudySelectorState} from "./CancerStudySelector";
+import {FlexRow, FlexCol} from "../../flexbox/FlexBox";
+import Radio = ReactBootstrap.Radio;
+import {ICancerStudySelectorExperimentalOptions} from "./CancerStudySelector";
+import Checkbox = ReactBootstrap.Checkbox;
+import {Select, StateToggle} from "../../ExperimentalControls";
+import * as styles_any from './styles.module.scss';
+import firstDefinedValue from "../../../lib/firstDefinedValue";
+
+const styles = styles_any as {
+    QueryContainer: string,
+    CancerStudySelector: string,
+};
+
+export interface IQueryContainerProps
+{
+    data?: QueryData,
+
+    loadQueryData?: () => void,
+}
+
+export type IQueryContainerState = {
+} & ICancerStudySelectorExperimentalOptions & ICancerStudySelectorState;
+
+@QueryConnector.decorator
+export default class QueryContainer extends React.Component<IQueryContainerProps, IQueryContainerState>
+{
+    constructor(props:IQueryContainerProps)
+    {
+        super(props);
+        this.state = {};
+    }
+
+    componentDidMount()
+    {
+        QueryConnector.actions.loadQueryData();
+    }
+
+    // for demo only
+    onStateChange = (selectionState: ICancerStudySelectorState) =>
+    {
+        this.setState(selectionState);
+    }
+
+    render():JSX.Element
+    {
+        if (this.props.data && this.props.data.status == 'fetching')
+            return <Spinner/>;
+        if (!this.props.data || !this.props.data.cancerTypes || !this.props.data.studies)
+            return <span>No data</span>;
+
+        return (
+            <FlexCol padded flex={1} className={styles.QueryContainer}>
+
+                <CancerStudySelector
+                    searchTextPresets={['lung', 'serous', 'tcga', 'tcga -provisional']}
+                    cancerTypes={this.props.data.cancerTypes}
+                    studies={this.props.data.studies}
+                    onStateChange={this.onStateChange}
+                    showStudiesInTree={this.state.showStudiesInTree}
+                    {...this.state}
+                />
+
+                <FlexRow padded>
+                    {/* demo controls */}
+                    <FlexCol className={styles.CancerStudySelector} padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
+                        <StateToggle label='Show all studies when nothing is selected' target={this} name='showAllStudiesByDefault' defaultValue={!!CancerStudySelector.defaultProps.showAllStudiesByDefault}/>
+                        <StateToggle label='Show root node ("All")' target={this} name='showRoot' defaultValue={!!CancerStudySelector.defaultProps.showRoot}/>
+                        <StateToggle label='Click tree node again to deselect' target={this} name='clickAgainToDeselectSingle' defaultValue={!!CancerStudySelector.defaultProps.clickAgainToDeselectSingle}/>
+                        <StateToggle label='Filter studies list by tree checkboxes' target={this} name='filterBySelection' defaultValue={!!CancerStudySelector.defaultProps.filterBySelection}/>
+                        <StateToggle label='Show studies in tree' target={this} name='showStudiesInTree' defaultValue={!!CancerStudySelector.defaultProps.showStudiesInTree}/>
+                        <Select
+                            label="Tree depth: "
+                            selected={firstDefinedValue(this.state.maxTreeDepth, CancerStudySelector.defaultProps.maxTreeDepth)}
+                            options={[
+                                {label: "0"},
+                                {label: "1"},
+                                {label: "2"},
+                                {label: "3"},
+                                {label: "4"},
+                                {label: "5"},
+                                {label: "6"},
+                                {label: "7"},
+                                {label: "8"},
+                                {label: "9"},
+                            ]}
+                            onChange={option => this.setState({
+                                maxTreeDepth: parseInt(option.label)
+                            })}
+                        />
+                        <span>Note: Use cmd+click tree node arrow to expand/collapse entire subtree.</span>
+                        {
+                            this.state.filterBySelection || this.state.showStudiesInTree
+                            ?   <span>&nbsp;</span>
+                            :   <span>Note: Use cmd+click to select/deselect multiple tree nodes.</span>
+                        }
+                    </FlexCol>
+
+                    {/* display state for demo */}
+                    <pre style={{flex: 1, height: 200}}>
+                        {
+                            JSON.stringify({
+                                selectedCancerTypeIds: this.state.selectedCancerTypeIds,
+                                selectedStudyIds: this.state.selectedStudyIds,
+                            }, null, 4)
+                        }
+                    </pre>
+                </FlexRow>
+
+            </FlexCol>
+        );
+    }
+}
diff --git a/src/shared/components/query/old/styles.module.scss b/src/shared/components/query/old/styles.module.scss
new file mode 100644
index 00000000000..5f57b039e0f
--- /dev/null
+++ b/src/shared/components/query/old/styles.module.scss
@@ -0,0 +1,121 @@
+.QueryContainer {
+  height: 100%;
+}
+
+.CancerStudySelector {
+
+  user-select: none;
+  label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  a {
+    cursor: pointer;
+  }
+
+  .selectCancerStudyRow {
+    align-items: center;
+
+    span.selectCancerStudyHeader {
+      color: #337ab7;
+    }
+
+ 	div.searchTextInput {
+ 	  min-width: 200px;
+ 	}
+  }
+
+  .treeWithStudies {
+    label:hover {
+      text-decoration: underline;
+    }
+
+    .cancerTypeTreeNode {
+      label {
+        font-weight: normal;
+      }
+      color: grey;
+      font-style: italic;
+    }
+    .cancerStudyName {
+      label {
+        font-weight: bold;
+      }
+    }
+    .cancerStudySamples {
+      font-style: italic;
+    }
+  }
+
+  .treeNodeContent {
+    flex: 1;
+    align-items: center;
+  }
+
+  :global(.checkbox) {
+    padding-left: 5px;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+
+    input {
+      cursor: pointer;
+    }
+  }
+
+  .treeNodeLabel {
+    cursor: pointer;
+    flex: 1;
+  }
+
+  .selectable:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .selectable.selected {
+    background-color: rgb(196, 211, 230);
+  }
+
+  .selectable.selected:hover {
+    background-color: lightsteelblue;
+  }
+
+  .matchingNodeText {
+    font-weight: bold;
+  }
+
+  .nonMatchingNodeText {
+    font-weight: normal;
+  }
+
+  /* makes react-bootstrap-table work in flexbox layout */
+  :global(.react-bs-table-container),:global(.react-bs-table),:global(.react-bs-container-body) {
+  	display: flex;
+  	flex-direction: column;
+  	flex: 1;
+  	height: initial !important;
+  }
+  :global(.react-bs-table) {
+    margin: 0px;
+  }
+
+  :global(.table) {
+    margin-bottom: 0px;
+  }
+
+  :global(th.sort-column)>* {
+    display: inline;
+  }
+
+  div.studyHeader {
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  .searchTextInput {
+    min-width: 200px;
+  }
+}
+
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
new file mode 100644
index 00000000000..c59544f6b42
--- /dev/null
+++ b/src/shared/components/query/styles.module.scss
@@ -0,0 +1,109 @@
+.QueryContainer {
+  height: 100%;
+}
+
+.CancerStudySelector {
+
+  user-select: none;
+  label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  a {
+    cursor: pointer;
+  }
+
+  .selectCancerStudyRow {
+    align-items: center;
+
+    span.selectCancerStudyHeader {
+      color: #337ab7;
+    }
+
+ 	div.searchTextInput {
+ 	  min-width: 200px;
+ 	}
+  }
+
+  div.cancerTypeListContainer, div.cancerStudyListContainer {
+    border: 1px solid lightgray;
+    border-radius: 3px;
+    overflow: auto;
+  }
+
+  div.cancerTypeListContainer {
+  }
+
+  div.cancerStudyListContainer {
+    flex: 1;
+  }
+
+  ul.cancerTypeList {
+    padding-left: 0px;
+
+    li.cancerTypeListItem {
+      padding: 4px;
+      cursor: pointer;
+      list-style-type: none;
+      display: flex;
+      flex-direction: row;
+
+      span.cancerTypeListItemLabel {
+        flex: 1;
+        padding-right: 5px;
+      }
+
+      span.cancerTypeListItemCount {
+        padding: 2px;
+        background-color: lightgray;
+        border-radius: 2px;
+        text-align: center;
+        width: 24px;
+      }
+    }
+  }
+
+  .selectable:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .selectable.selected {
+    background-color: rgb(196, 211, 230);
+  }
+
+  .selectable.selected:hover {
+    background-color: lightsteelblue;
+  }
+
+  .matchingNodeText {
+    font-weight: bold;
+  }
+
+  .nonMatchingNodeText {
+    font-weight: normal;
+  }
+
+  .searchTextInput {
+    minWidth: 200px;
+  }
+}
+
+.GeneticProfileSelector {
+  div.singleCheckbox, div.groupCheckbox {
+    label {
+      display: inline;
+    }
+  }
+  div.radioGroup {
+    margin-left: 20px;
+
+    div.radioItem {
+    }
+  }
+  div.zScore {
+    margin-left: 40px;
+  }
+  label.profileName {
+  }
+}
diff --git a/src/shared/components/tree/DescriptorTree.tsx b/src/shared/components/tree/DescriptorTree.tsx
new file mode 100644
index 00000000000..1b79dfb5009
--- /dev/null
+++ b/src/shared/components/tree/DescriptorTree.tsx
@@ -0,0 +1,203 @@
+import * as React from 'react';
+import * as styles_any from './styles.module.scss';
+import classNames from '../../lib/classNames';
+import FontAwesome from "react-fontawesome";
+
+const styles = styles_any as {
+	treeNodeList: string,
+	treeNodeItem: string,
+	row: string,
+	arrow: string,
+	noIndent: string,
+};
+
+export interface IBasicTreeNode {
+	expanded?: boolean;
+	content: React.ReactChild;
+	children?: this[];
+	listItemProps?:React.HTMLAttributes<HTMLLIElement>|undefined;
+	data?: any;
+}
+
+/**
+ * Default tree descriptor.
+ * Allows tree to be defined completely in a nested object
+ * rather than having to provide a separate descriptor object.
+ */
+export class BasicTreeDescriptor<TreeNode extends IBasicTreeNode> implements ITreeDescriptor<TreeNode>
+{
+	isExpanded(node:TreeNode) { return !!node.expanded; }
+	getContent(node:TreeNode) { return node.content; }
+	getChildren(node:TreeNode) { return node.children; }
+	getListItemProps(node:TreeNode) { return node.listItemProps; }
+}
+
+export interface ITreeDescriptor<TreeNode>
+{
+    isExpanded(node:TreeNode):boolean;
+    getContent(node:TreeNode):React.ReactChild;
+    getChildren(node:TreeNode):TreeNode[]|undefined;
+
+    /**
+	 * Allows customizing the LI element of each node.
+	 */
+    getListItemProps?(node:TreeNode):React.HTMLAttributes<HTMLLIElement>|undefined;
+}
+
+export interface IDescriptorTreeProps<TreeNode>
+{
+    treeDescriptor?: ITreeDescriptor<TreeNode>;
+    node: TreeNode;
+
+    className?: string;
+    style?: React.CSSProperties;
+    onExpand?: <T>(node:TreeNode, expand:boolean, event:React.MouseEvent<T>)=>void;
+    isChild?: boolean;
+    showRoot?: boolean;
+}
+
+export interface IDescriptorTreeState
+{
+    expand?: boolean;
+}
+
+/**
+ * DescriptorTree makes it easy to compute a tree on the fly
+ * rather than specifying the tree data entirely in a nested object structure.
+ *
+ * To use with JSX, create an alias like so:
+ *     const FooTree = DescriptorTree.of<FooNode>();
+ */
+export default class DescriptorTree<TreeNode> extends React.Component<IDescriptorTreeProps<TreeNode>, IDescriptorTreeState>
+{
+	/**
+	 * Provides a workaround for the current lack of support for generics in JSX.
+	 * See https://github.com/Microsoft/TypeScript/issues/6395
+	 */
+	static of<T>():new(p:IDescriptorTreeProps<T>) => DescriptorTree<T>
+	{
+		return DescriptorTree as new(p:IDescriptorTreeProps<T>) => DescriptorTree<T>;
+	}
+
+	static get defaultProps():IDescriptorTreeProps<any>
+	{
+		return {
+			treeDescriptor: new BasicTreeDescriptor(),
+			node: {},
+
+			showRoot: true
+		};
+	}
+
+    constructor(props:IDescriptorTreeProps<TreeNode>)
+    {
+        super(props);
+        this.state = {};
+    }
+
+    onExpand = (event:React.MouseEvent<any>) =>
+    {
+        let expand = !this.expand;
+        if (this.props.onExpand)
+            this.props.onExpand(this.props.node, expand, event);
+        this.setState({expand});
+    }
+
+    get expand():boolean
+    {
+		let desc = this.props.treeDescriptor as ITreeDescriptor<TreeNode>;
+        let expand = this.state.expand;
+        if (expand === undefined || this.props.onExpand)
+            expand = desc.isExpanded(this.props.node);
+        return expand;
+    }
+
+    renderChildNodes(children:TreeNode[] | undefined):JSX.Element[]
+	{
+		return (children || []).map((child, i) => (
+			<DescriptorTree
+				key={i}
+				treeDescriptor={this.props.treeDescriptor}
+				node={child}
+				onExpand={this.props.onExpand}
+				isChild={true}
+			/>
+		))
+	}
+
+	renderUL(asRootElement:boolean, children:React.ReactNode):JSX.Element
+	{
+		let className, style;
+		if (asRootElement)
+		{
+			className = classNames(styles.noIndent, styles.treeNodeList, this.props.className);
+			style = this.props.style;
+		}
+		else
+		{
+			className = styles.treeNodeList;
+		}
+
+		return (
+			<ul className={className} style={style}>
+				{children}
+			</ul>
+		);
+	}
+
+    render():JSX.Element
+    {
+    	let desc = this.props.treeDescriptor as ITreeDescriptor<TreeNode>;
+    	let node = this.props.node;
+        let children = desc.getChildren(node);
+
+		// if we're hiding the root node, render children at top level
+        if (!this.props.showRoot)
+			return this.renderUL(true, this.renderChildNodes(children));
+
+        // to keep indentation consistent, we always render an icon for the arrow and style controls visibility
+        let expand = this.expand;
+        let showArrow = !!children && children.length > 0;
+        let arrowStyle = showArrow ? undefined : {visibility: 'hidden'};
+        let arrow = (
+            <FontAwesome
+            	className={styles.arrow}
+                name={expand ? 'caret-down' : 'caret-right'}
+                style={arrowStyle}
+				{...{onMouseDown: this.onExpand}}
+            />
+        );
+
+		// the node is rendered as an LI element
+		let customProps = desc.getListItemProps && desc.getListItemProps(node);
+		let liProps = {...customProps};
+		liProps.className = classNames(liProps.className, styles.treeNodeItem);
+
+		let content = desc.getContent(node);
+		let childList = expand && this.renderUL(false, this.renderChildNodes(children));
+
+		let liElement = (
+			<li {...liProps}>
+				<div className={styles.row}>
+					{arrow}
+					{content}
+				</div>
+				{childList}
+			</li>
+		);
+
+		// if this is a child node, don't render outer UL element
+		if (this.props.isChild)
+			return liElement;
+
+		// root node needs an outer UL element
+		return this.renderUL(true, liElement);
+    }
+}
+
+/**
+ * BasicTree allows the tree data to be defined completely in a nested
+ * object structure implementing IBasicTreeNode.
+ * It is not necessary to provide a treeDescriptor prop.
+ */
+export class BasicTree extends DescriptorTree<IBasicTreeNode> { };
diff --git a/src/shared/components/tree/styles.module.scss b/src/shared/components/tree/styles.module.scss
new file mode 100644
index 00000000000..9dbde0c022d
--- /dev/null
+++ b/src/shared/components/tree/styles.module.scss
@@ -0,0 +1,24 @@
+.treeNodeList {
+  padding-left: 18px;
+}
+
+.treeNodeItem {
+  list-style-type: none;
+}
+
+.arrow {
+  cursor: pointer;
+  text-align: center;
+  width: 1em;
+  height: 1em;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.noIndent {
+  padding-left: 0px;
+}
diff --git a/src/shared/lib/classNames.ts b/src/shared/lib/classNames.ts
index 12814aa4bb7..6936ba12f4e 100644
--- a/src/shared/lib/classNames.ts
+++ b/src/shared/lib/classNames.ts
@@ -3,7 +3,7 @@
 // Definitions by: Dave Keen <http://www.keendevelopment.ch>, Adi Dahiya <https://github.com/adidahiya>, Jason Killian <https://github.com/JKillian>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
-declare type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null;
+declare type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null | false;
 
 interface ClassDictionary {
     [id: string]: boolean;
diff --git a/src/shared/lib/firstDefinedValue.ts b/src/shared/lib/firstDefinedValue.ts
new file mode 100644
index 00000000000..2823afeb16d
--- /dev/null
+++ b/src/shared/lib/firstDefinedValue.ts
@@ -0,0 +1,11 @@
+export default function firstDefinedValue<T1,T2>(v1:T1|undefined, v2:T2):T1|T2;
+export default function firstDefinedValue<T1,T2,T3>(v1:T1|undefined, v2:T2|undefined, v3:T3):T1|T2|T3;
+export default function firstDefinedValue<T1,T2,T3,T4>(v1:T1|undefined, v2:T2|undefined, v3:T3|undefined, v4:T4):T1|T2|T3|T4;
+export default function firstDefinedValue(...values:any[])
+{
+	let value = undefined;
+	for (value of values)
+		if (value !== undefined)
+			break;
+	return value;
+}
diff --git a/src/shared/lib/getPromiseResult.ts b/src/shared/lib/getPromiseResult.ts
new file mode 100644
index 00000000000..80a43d4885b
--- /dev/null
+++ b/src/shared/lib/getPromiseResult.ts
@@ -0,0 +1,14 @@
+const promiseResultCache = new WeakMap<Promise<any>, any>();
+export default function getPromiseResult<T>(promise:Promise<T>, hack?:Function):T|undefined
+{
+	if (!promiseResultCache.has(promise))
+	{
+		promiseResultCache.set(promise, undefined);
+		promise.then(result => {
+			promiseResultCache.set(promise, result)
+			if (hack)
+				hack();
+		});
+	}
+	return promiseResultCache.get(promise);
+}
diff --git a/src/shared/lib/memoize.ts b/src/shared/lib/memoize.ts
new file mode 100644
index 00000000000..edf5f708455
--- /dev/null
+++ b/src/shared/lib/memoize.ts
@@ -0,0 +1,220 @@
+/**
+ * @author adufilie http://github.com/adufilie
+ */
+
+let UNDEFINED = {} as any;
+
+type AnyFunction = (...args:any[])=>any;
+
+function isPrimitive(value:any):boolean
+{
+	return value === null || typeof value !== 'object';
+}
+
+/**
+ * Provides Map-like interface that uses Map for primitive keys and WeakMap for non-primitive keys.
+ */
+class Cache<K,V>
+{
+	private map = new Map<any, V>();
+	private weakMap = new WeakMap<any, V>();
+
+	has(key:K):boolean
+	{
+		return isPrimitive(key) ? this.map.has(key) : this.weakMap.has(key);
+	}
+	get(key:K):V|undefined
+	{
+		return isPrimitive(key) ? this.map.get(key) : this.weakMap.get(key);
+	}
+	set(key:K, value:V):this
+	{
+		if (isPrimitive(key))
+			this.map.set(key, value);
+		else
+			this.weakMap.set(key, value);
+		return this;
+	}
+}
+
+/**
+ * Provides a multi-dimensional Map-like interface
+ */
+class HyperMap<T>
+{
+	has(args:any[]):boolean
+	{
+		let cache:Cache<any, any>|undefined = this.getCache(args.length);
+		if (args.length > 1)
+			cache = this.traverse(cache, args.slice(0, args.length - 1)) as any;
+		return cache !== undefined && cache.has(args[args.length - 1]);
+	}
+
+	get(args:any[]):T | undefined
+	{
+		return this.traverse(this.getCache(args.length), args);
+	}
+
+	set(args:any[], value:T):void
+	{
+		this.traverse(this.getCache(args.length), args, value);
+	}
+
+	// gets the Cache designated for a specific key length
+	private getCache(numArgs:number)
+	{
+		let cache = this.map_numArgs_cache.get(numArgs);
+		if (!cache)
+			this.map_numArgs_cache.set(numArgs, cache = new Cache());
+		return cache;
+	}
+
+	// used to avoiding the varying-key-length limitation of the traverse() function below
+	private map_numArgs_cache = new Map<number, Cache<any, any>>();
+
+	// dual-purpose setter/getter
+	// note: does not work if subsequent calls vary the length of the keys array for the same cache param
+	private traverse(cache:Cache<any, any>, keys:any[], value?:T):T|undefined
+	{
+		if (keys.length == 0)
+			return undefined;
+		if (keys.length == 1)
+		{
+			if (value === undefined)
+				return cache.get(keys[0]);
+			return void cache.set(keys[0], value);
+		}
+
+		let nextCache = cache.get(keys[0]);
+		if (nextCache === undefined)
+			cache.set(keys[0], nextCache = new Cache());
+		return this.traverse(nextCache, keys.slice(1), value);
+	}
+}
+
+class Memoizer<Result, Transform extends (...args:any[])=>Result>
+{
+	private transform:Transform;
+	private cache = new HyperMap<Result>();
+
+	constructor(transform:Transform, getAdditionalArgs?:()=>any[], fixedArgsLength?:number)
+	{
+		this.transform = transform;
+		let cache = this.cache;
+		this.get = function(...args:any[]) {
+			if (fixedArgsLength !== undefined)
+				args.length = fixedArgsLength;
+			let thisArgs = [this];
+			if (getAdditionalArgs)
+				thisArgs = thisArgs.concat(getAdditionalArgs.call(this), args);
+			else
+				thisArgs = thisArgs.concat(args);
+			let result = cache.get(thisArgs);
+			if (result === undefined && !cache.has(thisArgs))
+			{
+				cache.set(thisArgs, UNDEFINED);
+				result = transform.apply(this, args);
+				if (result !== undefined)
+					cache.set(thisArgs, result);
+			}
+			return result === UNDEFINED ? undefined : result;
+		} as Transform;
+	}
+
+	get:Transform;
+}
+
+export type MemoizeParams<F extends AnyFunction> = {
+	function: F,
+	getAdditionalArgs?: ()=>any[],
+	fixedArgsLength?: number,
+};
+
+/**
+ * Creates a memoized version of a function.
+ */
+export default function memoize<F extends AnyFunction>(params:MemoizeParams<F>):F;
+
+/**
+ * A method decorator that creates a memoized version of a method.
+ */
+export default function memoize<T extends AnyFunction>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>):TypedPropertyDescriptor<T> | void;
+
+export default function memoize<T extends AnyFunction>():TypedPropertyDescriptor<T> | void
+{
+	// called as decorator, target is prototype; return modified descriptor
+	if (arguments.length == 3)
+	{
+		let [target, propertyKey, descriptor] = Array.from(arguments) as [Object, string|symbol, TypedPropertyDescriptor<T>];
+		return decorate(descriptor);
+	}
+
+	// called as function
+	let params = arguments[0] as MemoizeParams<T>;
+	if (typeof params === 'function')
+		params = {function: params};
+	if (arguments.length == 1 && params && typeof params.function === 'function')
+	{
+		return new Memoizer(params.function, params.getAdditionalArgs, params.fixedArgsLength).get;
+	}
+	else
+	{
+		throw new Error("Usage: memoize(params:{ function:Function, getAdditionalArgs?:()=>any[], fixedArgsLength?:number })");
+	}
+}
+
+type DecorateMemoizeParams<T extends AnyFunction> = Partial<Pick<MemoizeParams<T>, 'getAdditionalArgs' | 'fixedArgsLength'>>;
+
+function decorate<T extends AnyFunction>(descriptor:TypedPropertyDescriptor<T>, params?:DecorateMemoizeParams<T>)
+{
+	if (descriptor && typeof descriptor.value === 'function')
+		descriptor.value = new Memoizer(descriptor.value, params && params.getAdditionalArgs, params && params.fixedArgsLength).get;
+	else if (descriptor && (descriptor.set || descriptor.get))
+		throw new Error('memoize cannot be used as a decorator for a setter or getter');
+	return descriptor;
+}
+
+// /**
+//  * Generates a method decorator that creates a memoized version of a function with additional args to control memoization
+//  * @param getAdditionalMemoizeArgs A function that returns additional arguments for controlling memoization.
+//  *                                 If this is an inline function, it must be defined like
+//  *                                     <code>function() { return [this.a, this.b]; }</code>
+//  *                                 rather than
+//  *                                     <code>() => [this.a, this.b]</code>
+//  *                                 because when decorators are evaluated the 'this' context is undefined.
+//  */
+// export function memoizeWith<T, TARGET>(getAdditionalMemoizeArgs:(this:TARGET, self:TARGET)=>any[])
+// 	:<T>(
+// 		target: TARGET,
+// 		propertyKey: string | symbol,
+// 		descriptor: TypedPropertyDescriptor<T>
+// 	) => TypedPropertyDescriptor<T> | void
+// {
+// 	return (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>):TypedPropertyDescriptor<T> => {
+// 		return decorate(descriptor, getAdditionalMemoizeArgs);
+// 	};
+// }
+
+/**
+ * Generates a method decorator that creates a memoized version of a function with additional args to control memoization
+ * @param getMemoizeParams_propName The name of another class method that returns additional arguments for controlling memoization.
+ */
+export function memoizeWith<T extends AnyFunction, P extends string, TARGET extends {[X in P]: (this:TARGET)=>any[]}>(getMemoizeParams_propName:P)
+	:<T>(
+		target: TARGET,
+		propertyKey: string | symbol,
+		descriptor: TypedPropertyDescriptor<T>
+	) => TypedPropertyDescriptor<T> | void
+{
+	return (target: TARGET, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>):TypedPropertyDescriptor<T> => {
+		return decorate(
+			descriptor,
+			{
+				getAdditionalArgs: function(this:TARGET) {
+					let fn:()=>any[] = this[getMemoizeParams_propName] as any;
+					return fn.call(this);
+				}
+			}
+		);
+	};
+}
diff --git a/typings/missing.d.ts b/typings/missing.d.ts
index f4a41f4ebaf..ccc091857ad 100644
--- a/typings/missing.d.ts
+++ b/typings/missing.d.ts
@@ -4,6 +4,7 @@ declare module '*.json';
 
 // these packages are missing typings
 declare module 'react-file-download';
+declare module 'react-select';
 declare module 'react-zeroclipboard';
 declare module 'reactableMSK';
 declare module 'redux-seamless-immutable';

From edbbe01b29a02c22461c67db6c07b3c27be8024e Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 13 Jan 2017 16:09:07 -0500
Subject: [PATCH 002/133] squashed commits for styling changes

---
 .../bootstrap-customizations.scss             |   2 +-
 src/shared/components/StudyList/StudyList.tsx |  38 +++++-
 .../components/StudyList/StudyListLogic.ts    |  23 ++++
 .../components/StudyList/styles.module.scss   | 124 ++++++++++++++---
 .../labeledCheckbox/styles.module.scss        |   5 +-
 .../components/query/CancerStudySelector.tsx  |  65 +++++----
 .../components/query/QueryContainer.tsx       |  38 ------
 .../query/old/CancerStudySelector.tsx         |   4 +-
 .../components/query/styles.module.scss       | 127 +++++++++++++-----
 9 files changed, 297 insertions(+), 129 deletions(-)

diff --git a/src/globalStyles/bootstrap-customizations.scss b/src/globalStyles/bootstrap-customizations.scss
index 3cf7f0c2aa6..892a5034723 100755
--- a/src/globalStyles/bootstrap-customizations.scss
+++ b/src/globalStyles/bootstrap-customizations.scss
@@ -1 +1 @@
-$body-bg: #fff;
+$body-bg: #fff;
\ No newline at end of file
diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index 835ccc842b3..743efcb639f 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -12,12 +12,18 @@ const styles = {
 
 		CancerType: string,
 		CancerTypeName: string,
+		SelectAll: string,
 
 		Study: string,
 		StudyName: string,
+		StudyMeta: string,
 		StudySamples: string,
 		StudyLinks: string,
 
+		disabled: string,
+		enabled: string,
+		indentArrow: string,
+
 		highlighted: string,
 	},
 	Level: (level:number) => styles_any[`Level${level}`]
@@ -54,6 +60,8 @@ export default class StudiesList extends React.Component<IStudyListProps, {}>
 		let childStudies = this.logic.getChildCancerStudies(cancerType);
 
 		let heading:JSX.Element | undefined;
+		let indentArrow:JSX.Element | undefined;
+
 		if (cancerType != this.logic.getRootCancerType())
 		{
 			let liClassName = classNames(
@@ -61,6 +69,12 @@ export default class StudiesList extends React.Component<IStudyListProps, {}>
 				styles.Level(currentLevel),
 				this.logic.isHighlighted(cancerType) && styles.highlighted,
 			);
+
+			if (currentLevel === 3)
+				indentArrow = (
+					<FontAwesome className={styles.indentArrow} name="long-arrow-right" />
+				)
+
 			heading = (
 				<li className={liClassName}>
 					<LabeledCheckbox
@@ -69,9 +83,13 @@ export default class StudiesList extends React.Component<IStudyListProps, {}>
 							onChange: event => this.logic.onCheck(cancerType, event)
 						}}
 					>
+						{indentArrow} 
 						<span className={styles.CancerTypeName}>
 							{cancerType.name}
 						</span>
+						<span className={styles.SelectAll}>
+							Select All
+						</span>
 					</LabeledCheckbox>
 				</li>
 			);
@@ -99,8 +117,10 @@ export default class StudiesList extends React.Component<IStudyListProps, {}>
 		return (
 			<li key={arrayIndex} className={liClassName}>
 				{this.renderStudyName(study)}
-				{this.renderSamples(study)}
-				{this.renderStudyLinks(study)}
+				<div className={styles.StudyMeta}>
+					{this.renderSamples(study)}
+					{this.renderStudyLinks(study)}
+				</div>
 			</li>
 		);
 	}
@@ -114,7 +134,7 @@ export default class StudiesList extends React.Component<IStudyListProps, {}>
 					onChange: event => this.logic.onCheck(study, event)
 				}}
 			>
-				<span className={styles.StudyName}>
+				<span className={styles.StudyName} title={study.name}>
 					{study.name}
 				</span>
 			</LabeledCheckbox>
@@ -134,17 +154,21 @@ export default class StudiesList extends React.Component<IStudyListProps, {}>
 	{
 		let links = [];
 		if (study.studyId)
-			links.push({icon: 'cube', url: `/study?id=${study.studyId}#summary`});
+			links.push({icon: 'bar-chart', url: `/study?id=${study.studyId}#summary`});
 		if (study.pmid)
 			links.push({icon: 'book', url: `http://www.ncbi.nlm.nih.gov/pubmed/${study.pmid}`});
+		else 
+			links.push({icon: 'book', url: undefined });
 		return (
-			<div className={styles.StudyLinks}>
+			<span className={styles.StudyLinks}>
 				{links.map((link, i) => (
+					link.url ?
 					<a key={i} href={link.url}>
 						<FontAwesome name={link.icon}/>
-					</a>
+					</a> :
+						<FontAwesome name={link.icon}/>
 				))}
-			</div>
+			</span>
 		);
 	}
 }
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 12fdec1fe00..fc229ceecd8 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -122,6 +122,9 @@ export default class StudyListLogic implements IStudyListLogic
 
 	getDescendantCancerStudies(node:CancerTreeNode):CancerStudy[]
 	{
+		if (node === this.getRootCancerType())
+			return this.hack_getAllStudies();
+
 		let meta = this.getMetadata(node);
 		return meta.descendantStudies.filter(this.nodeFilter);
 	}
@@ -159,6 +162,26 @@ export default class StudyListLogic implements IStudyListLogic
 		}
 	}
 
+	hack_getAllStudies()
+	{
+		return _.union(...(
+			this.getChildCancerTypes(this.getRootCancerType())
+				.map(cancerType => this.getDescendantCancerStudies(cancerType))
+		));
+	}
+
+	hack_handleSelectAll(checked:boolean)
+	{
+		let selectedStudyIds = this.state.selectedStudyIds;
+		let clickedStudyIds = this.hack_getAllStudies().map(study => study.studyId);
+		if (checked)
+			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
+		else
+			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
+
+		this.handleSelectedStudiesChange(selectedStudyIds);
+	}
+
 	onCheck(node:CancerTreeNode, event:React.FormEvent<HTMLInputElement>): void
 	{
 		let clickedStudyIds:string[];
diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index de2c8bf9795..313b247d506 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -1,62 +1,146 @@
 .selectAllStudies {
   color: #1982b8;
-  font: normal normal 600 10px/18px 'Helvetica Neue';
+  font: normal normal 600 10px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   margin: 0 0 0 10px;
   text-transform: uppercase;
 }
 
 ul.StudyList {
-  &.Level0, &.Level1 {
+  padding: 0 0 0 15px;
+
+  &.Level0, &.Level1, &.Level3, &.Level4 {
     padding-left: 0px;
   }
 
+  &.Level1 li:last-of-type, &.Level2 li:last-of-type, &.Level3 li:last-of-type {
+    margin-bottom: 10px;
+  }
+
   &.Level0 {
     padding: 5px;
+    max-height: 400px;
+    overflow: auto;
 
     > li.CancerType, > li.Study {
       margin-left: 0px;
     }
   }
 
+  &.Level1 {
+    > li.Study {
+      margin-left: 15px;
+    }
+  }
+
   li.CancerType {
     list-style-type: none;
+    margin-bottom: 0px !important;
+
+    input {
+      display: none;
+    }
 
-    .CancerTypeName {
-      font-style: italic;
-      color: gray;
+    .indentArrow {
+      color: #999;
+      line-height: 18px;
+      margin-right: 5px;
+    }
+
+    .SelectAll {
+      opacity: 0;
+      font: normal normal 500 10px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      color: #999;
+      text-transform: uppercase;
+      margin: 0 10px;
+      transition: opacity .1s ease-in-out;
+      -moz-transition: opacity .1s ease-in-out;
+      -webkit-transition: opacity .1s ease-in-out;
+    }
+
+    &:hover {
+      .SelectAll {
+        opacity: 1;
+      }
+    }
+
+    &.Level1 {
+      label {      
+        font: normal normal 500 17px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        color: #333;
+        border-bottom: 1px solid rgb(232, 241, 248);
+        padding: 10px 5px 5px 5px;
+        margin: 20px 10px 5px 10px;
+      }
+    }
+
+    &.Level2 {
+      padding-top: 0px;
+
+      label {
+        font: normal normal 400 15px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        color: #1982b8;
+        padding: 5px 15px 5px 0;
+      }
+    }
+
+    &.Level3 {
+      label {
+        font: normal normal 600 11px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        color: #444;
+        padding: 0px 15px 0px 0;
+        text-transform: uppercase;
+      }
     }
   }
 
   li.Study {
     list-style-type: none;
-    margin-left: 40px;
-
-    label {
-      display: inline;
-    }
+    padding: 2px 0;
+    display: flex;
+    justify-content: space-between;
+    font-size: 13px;
+    align-items: flex-start;
 
     .StudyName {
-      font-weight: bold;
+      color: #444;
+      max-width: 435px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
     .StudySamples {
-      margin: 0 10px;
-      font-style: italic;
+      text-align: right;
+      margin-right: 5px;
+      display: inline-block;
     }
 
-    .StudyLinks {
-      display: inline;
+    .StudyMeta {
+      color: #999;
+      font-size: 12px;
 
-      a {
+      .StudyLinks {
         display: inline-block;
-        margin: 0 3px;
-        color: #1982b8;
+        width: 40px;
 
-        span:global(.fa) {
-          margin: 0 5px 0 0;
+        > span {
+          color: #ccc;
+          margin: 0 0 0 2px;
           min-width: 15px;
+          display: inline-block;
+        }
+
+        a {
+          color: #1982b8;
+          text-align: center;
+
+          span:global(.fa) {
+            margin: 0 5px 0 0;
+            min-width: 15px;
+          }
         }
       }
+
     }
   }
 }
diff --git a/src/shared/components/labeledCheckbox/styles.module.scss b/src/shared/components/labeledCheckbox/styles.module.scss
index 778a22b42c3..917d0343f44 100644
--- a/src/shared/components/labeledCheckbox/styles.module.scss
+++ b/src/shared/components/labeledCheckbox/styles.module.scss
@@ -2,15 +2,14 @@ label.labeledCheckbox {
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   margin: 0px;
   min-height: 1.2em;
   font-weight: normal;
 
   > input[type="checkbox"] {
     cursor: pointer;
-    margin: 0px;
-    margin-right: 4px;
+    margin: 3px 6px 0 0;
     min-width: 1em;
   }
 }
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 9eb4adb10da..d84a6e44e5b 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -19,8 +19,13 @@ import memoize from "../../lib/memoize";
 
 const styles = styles_any as {
 	CancerStudySelector: string,
+	cancerStudySelectorHeader: string,
 	selectable: string,
 	selected: string,
+	selectAll: string,
+	selectedCount: string,
+	cancerStudyName: string,
+	cancerStudySamples: string,
 	matchingNodeText: string,
 	nonMatchingNodeText: string,
 	selectCancerStudyHeader: string,
@@ -172,34 +177,46 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 		if (queryStore.searchText && searchTextOptions.indexOf(queryStore.searchText) < 0)
 			searchTextOptions = [queryStore.searchText].concat(searchTextOptions);
 
+		let logic = this.getStudyListLogic();
+		let allSelectedCheckboxProps = logic.getCheckboxProps(logic.getRootCancerType());
+		let allSelected = allSelectedCheckboxProps.checked && !allSelectedCheckboxProps.indeterminate;
+
 		return (
-			<FlexCol className={styles.CancerStudySelector} padded flex={1} style={this.props.style}>
+			<FlexCol className={styles.CancerStudySelector} flex={1} style={this.props.style}>
 				<FlexRow padded overflow className={styles.selectCancerStudyRow}>
-					<span className={styles.selectCancerStudyHeader}>Select Cancer Study:</span>
-					<ReactSelect
-						className={styles.searchTextInput}
-						value={queryStore.searchText}
-						autofocus={true}
-						options={searchTextOptions.map(str => ({label: str, value: str}))}
-						promptTextCreator={(label:string) => `Search for "${label}"`}
-						placeholder='Search...'
-						noResultsText={false}
-						onCloseResetsInput={false}
-						onInputChange={(searchText:string) => {
-							queryStore.searchText = searchText;
-							queryStore.selectedCancerTypeIds = [];
-						}}
-						onChange={(option:{value:string}) => {
-							queryStore.searchText = option ? option.value || '' : '';
-							queryStore.selectedCancerTypeIds = [];
-						}}
-					/>
-					<div style={{flex: 1}}/>
-					Number of Studies Selected: {queryStore.selectedCancerStudyIds.length}
+					<h2>Select Studies</h2>
+					<span className={styles.selectedCount}>
+						<b>{queryStore.selectedCancerStudyIds.length}</b> Studies Selected
+					</span>
+				</FlexRow>
+
+				<FlexRow overflow className={styles.cancerStudySelectorHeader}>
+						<ReactSelect
+							className={styles.searchTextInput}
+							value={queryStore.searchText}
+							autofocus={true}
+							options={searchTextOptions.map(str => ({label: str, value: str}))}
+							promptTextCreator={(label:string) => `Search for "${label}"`}
+							placeholder='Search...'
+							noResultsText={false}
+							onCloseResetsInput={false}
+							onInputChange={(searchText:string) => {
+								queryStore.searchText = searchText;
+								queryStore.selectedCancerTypeIds = [];
+							}}
+							onChange={(option:{value:string}) => {
+								queryStore.searchText = option ? option.value || '' : '';
+								queryStore.selectedCancerTypeIds = [];
+							}}
+						/>
+
+						<span className={styles.selectAll} onClick={() => logic.hack_handleSelectAll(!allSelected)}>
+							{allSelected ? "Deselect All" : "Select All"}
+						</span>
 				</FlexRow>
 
-				<FlexRow padded flex={1}>
-					<div className={styles.cancerTypeListContainer}>
+				<FlexRow flex={1}>
+					<div className={styles.cancerTypeListContainer}>				
 						{this.renderCancerTypeList()}
 					</div>
 					<div className={styles.cancerStudyListContainer}>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index e3af6cbde67..7a00812cd7e 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -55,44 +55,6 @@ export default class QueryContainer extends React.Component<IQueryContainerProps
 						selectedProfileIds={this.state.selectedProfileIds}
 					/>
 				)}
-
-                <FlexRow padded>
-					{/* demo controls */}
-                	<FlexCol className={styles.CancerStudySelector} padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
-                		<StateToggle label='Click tree node again to deselect' target={queryStore} name='clickAgainToDeselectSingle' defaultValue={queryStore.clickAgainToDeselectSingle}/>
-						<Select
-							label="Tree depth: "
-							selected={queryStore.maxTreeDepth}
-							options={[
-								{label: "0"},
-								{label: "1"},
-								{label: "2"},
-								{label: "3"},
-								{label: "4"},
-								{label: "5"},
-								{label: "6"},
-								{label: "7"},
-								{label: "8"},
-								{label: "9"},
-							]}
-							onChange={option => queryStore.maxTreeDepth = parseInt(option.label)}
-						/>
-						<span>Note: Use cmd+click to select/deselect multiple cancer types.</span>
-					</FlexCol>
-
-					{/* display state for demo */}
-					<pre style={{flex: 1, height: 200}}>
-						{
-							JSON.stringify({
-								selectedCancerTypeIds: queryStore.selectedCancerTypeIds,
-								selectedStudyIds: queryStore.selectedCancerStudyIds,
-							}, null, 4)
-						}
-					</pre>
-				</FlexRow>
-
-				<DevTools/>
-
             </FlexCol>
         );
     }
diff --git a/src/shared/components/query/old/CancerStudySelector.tsx b/src/shared/components/query/old/CancerStudySelector.tsx
index 22e41a909e6..61588583c4a 100644
--- a/src/shared/components/query/old/CancerStudySelector.tsx
+++ b/src/shared/components/query/old/CancerStudySelector.tsx
@@ -426,7 +426,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 			let meta = treeInfo.map_node_meta.get(cancerType);
 			return meta ? meta.descendantStudies : [];
 		}
-		let studies:CancerStudy[] = _.union.apply(_, selectedCancerTypes.map(getDescendantStudies));
+		let studies:CancerStudy[] = _.union(...selectedCancerTypes.map(getDescendantStudies));
 
 		// if filtering by selection, expand studies list to include siblings
 		if (this.props.filterBySelection && this.maxTreeDepth)
@@ -437,7 +437,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 				let meta = treeInfo.map_node_meta.get(study) as NodeMetadata;
 				return meta.siblings;
 			}
-			studies = _.union.apply(_, this.selectedStudyIds.map(getSiblings));
+			studies = _.union(...this.selectedStudyIds.map(getSiblings));
 		}
 
 		// handle case where there are no descendant studies
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index c59544f6b42..793fb1dcd07 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -2,34 +2,76 @@
   height: 100%;
 }
 
-.CancerStudySelector {
+.cancerStudySelectorHeader {
+  background-color: #1982b8;
+  border-bottom: 1px solid rgb(17, 116, 167);
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
 
+.CancerStudySelector {
+  width: 850px;
   user-select: none;
+  
   label {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
   }
   a {
     cursor: pointer;
   }
 
-  .selectCancerStudyRow {
-    align-items: center;
-
-    span.selectCancerStudyHeader {
-      color: #337ab7;
+  .selectAll {
+    background: rgb(17, 116, 167);
+    border: 1px solid rgba(0,0,0,0.05);
+    border-radius: 2px;
+    display: block;
+    text-align: center;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.90);
+    font: normal normal 500 11px/19px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 5px 10px;
+    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.1);
+    min-width: 115px;
+
+    &:hover {
+      cursor: pointer;
+      background: #1f688e;
+      color: #fff;
     }
+  }
 
- 	div.searchTextInput {
- 	  min-width: 200px;
- 	}
+  h2 {
+    font: normal normal 300 20px/23px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    flex-grow: 2;
+    margin: 0px;
+  }
+
+  .selectedCount {
+    font-size: 12px;
+    line-height: 30px;
+    text-align: right;
+    margin: 0 10px;
+  }
+
+  h3 {
+    background-color: #1982b8;
+    border-bottom: 1px solid rgb(17, 116, 167);
+    color: #fff;
+    font: normal normal 500 13px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    text-transform: uppercase;
+    margin: 0;
+    padding: 10px 15px;
+
+    .selectedCount {
+      float: right;
+    }
   }
 
   div.cancerTypeListContainer, div.cancerStudyListContainer {
-    border: 1px solid lightgray;
-    border-radius: 3px;
-    overflow: auto;
   }
 
   div.cancerTypeListContainer {
@@ -40,40 +82,50 @@
   }
 
   ul.cancerTypeList {
-    padding-left: 0px;
+    background: rgb(232, 241, 248);
+    padding: 0px;
+    margin: 0px;
+    width: 230px;
+    max-height: 400px;
+    overflow: auto;
 
-    li.cancerTypeListItem {
-      padding: 4px;
+    li {
       cursor: pointer;
       list-style-type: none;
       display: flex;
       flex-direction: row;
 
-      span.cancerTypeListItemLabel {
-        flex: 1;
-        padding-right: 5px;
-      }
-
-      span.cancerTypeListItemCount {
-        padding: 2px;
-        background-color: lightgray;
-        border-radius: 2px;
-        text-align: center;
-        width: 24px;
+      font-size: 13px;
+      color: #043852;
+      border-bottom: 1px solid rgb(222, 233, 241);
+      border-top: 1px solid rgb(243, 248, 251);
+      padding: 10px;
+
+      span {
+        &.cancerTypeListItemLabel {
+          flex: 1;
+          margin: 0 10px 0 0;
+        }
+
+        &.cancerTypeListItemCount {
+          background-color: rgb(222, 233, 241);
+          border-radius: 2px;
+          box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
+          font: normal normal 400 10px/19px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+          text-align: center;
+          width: 25px;
+        }
       }
     }
   }
 
   .selectable:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    color: #000;
+    background-color: #deeaf3;
   }
 
   .selectable.selected {
-    background-color: rgb(196, 211, 230);
-  }
-
-  .selectable.selected:hover {
-    background-color: lightsteelblue;
+    background-color: rgba(143, 189, 212, 0.42);
   }
 
   .matchingNodeText {
@@ -85,7 +137,14 @@
   }
 
   .searchTextInput {
-    minWidth: 200px;
+    min-width: 200px;
+    height: 28px;
+
+    .Select-control {
+      .Select-input {
+        height: 28px;
+      }
+    }
   }
 }
 

From 9d62a93e7169dbe18d2cd09d9f415940f7e23918 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 26 Jan 2017 16:21:25 -0500
Subject: [PATCH 003/133] fix styling errors (overflow)

---
 src/shared/components/StudyList/styles.module.scss | 2 --
 src/shared/components/query/styles.module.scss     | 4 +++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index 313b247d506..82403336638 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -18,8 +18,6 @@ ul.StudyList {
 
   &.Level0 {
     padding: 5px;
-    max-height: 400px;
-    overflow: auto;
 
     > li.CancerType, > li.Study {
       margin-left: 0px;
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 793fb1dcd07..2f3aec74b24 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -12,6 +12,7 @@
 }
 
 .CancerStudySelector {
+  max-height: 400px;
   width: 850px;
   user-select: none;
   
@@ -75,9 +76,11 @@
   }
 
   div.cancerTypeListContainer {
+    overflow: auto;
   }
 
   div.cancerStudyListContainer {
+    overflow: auto;
     flex: 1;
   }
 
@@ -87,7 +90,6 @@
     margin: 0px;
     width: 230px;
     max-height: 400px;
-    overflow: auto;
 
     li {
       cursor: pointer;

From 67319dd8473f4ab3e71adbcda6142b7676ae9b3e Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 26 Jan 2017 16:51:52 -0500
Subject: [PATCH 004/133] move computed stuff to QueryStore and add devMode
 components

---
 src/pages/home/HomePage.tsx                   |  3 +-
 .../components/query/CancerStudySelector.tsx  | 43 +++----------------
 .../components/query/QueryContainer.tsx       | 43 ++++++++++++++++++-
 src/shared/components/query/QueryStore.ts     | 24 +++++++++++
 src/shared/lib/devMode.ts                     |  2 +
 5 files changed, 76 insertions(+), 39 deletions(-)
 create mode 100644 src/shared/lib/devMode.ts

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index f0e2fcc6e31..e036001e179 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -3,6 +3,7 @@ import QueryContainerOld from "../../shared/components/query/old/QueryContainer"
 import QueryContainer from "../../shared/components/query/QueryContainer";
 import * as styles_any from './styles.module.scss';
 import {FlexCol} from "../../shared/components/flexbox/FlexBox";
+import devMode from "../../shared/lib/devMode";
 
 function getRootElement()
 {
@@ -47,7 +48,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
     {
         return (
         	<FlexCol style={{height: '100%'}}>
-				<a style={{alignSelf: 'center'}} onClick={() => this.setState({ selectorVersion: this.state.selectorVersion == 'new' ? 'old' : 'new' })}>Switch to {this.state.selectorVersion == 'new' ? 'old' : 'new'} view</a>
+				{devMode && <a style={{alignSelf: 'center'}} onClick={() => this.setState({ selectorVersion: this.state.selectorVersion == 'new' ? 'old' : 'new' })}>Switch to {this.state.selectorVersion == 'new' ? 'old' : 'new'} view</a>}
 				{this.state.selectorVersion == 'new' ? <QueryContainer/> : <QueryContainerOld/>}
 			</FlexCol>
 		);
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index d84a6e44e5b..d50ed2e4b1e 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -68,7 +68,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 
 	renderCancerTypeList()
 	{
-		let logic = this.getStudyListLogic();
+		let logic = queryStore.studyListLogic;
 		let rootMeta = logic.getMetadata(logic.treeData.rootCancerType);
 		let listItems = rootMeta && rootMeta.childCancerTypes.map(this.renderCancerTypeListItem);
 
@@ -81,7 +81,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 
 	renderCancerTypeListItem = (cancerType:CancerType, arrayIndex:number) =>
 	{
-		let logic = this.getStudyListLogic();
+		let logic = queryStore.studyListLogic;
 		let meta = logic.getMetadata(cancerType);
 		let numStudies = logic.getDescendantCancerStudies(cancerType).length;
 
@@ -89,7 +89,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 			return null;
 
 		let selected = meta.isCancerType && _.includes(queryStore.selectedCancerTypeIds, cancerType.cancerTypeId);
-		let highlighted = this.getStudyListLogic().isHighlighted(cancerType);
+		let highlighted = queryStore.studyListLogic.isHighlighted(cancerType);
 		let liClassName = classNames(
 			styles.cancerTypeListItem,
 			styles.selectable,
@@ -118,7 +118,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 
 	renderStudyHeaderCheckbox = (shownStudies:CancerStudy[]) =>
 	{
-		let logic = this.getStudyListLogic();
+		let logic = queryStore.studyListLogic;
 		let selectedStudies = queryStore.selectedCancerStudyIds.map(studyId => logic.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
 		let shownAndSelectedStudies = _.intersection(shownStudies, selectedStudies);
 		let checked = shownAndSelectedStudies.length > 0;
@@ -140,44 +140,13 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 		);
 	}
 
-	getTreeData = memoize({
-		getAdditionalArgs: () => [
-			queryStore.cancerTypes.result,
-			queryStore.cancerStudies.result
-		],
-		function: () => new CancerStudyTreeData({
-			cancerTypes: queryStore.cancerTypes.result || [],
-			studies: queryStore.cancerStudies.result || []
-		}),
-	});
-
-	getStudyListLogic = memoize({
-		getAdditionalArgs: () => [
-			this.getTreeData(),
-			queryStore.maxTreeDepth,
-			queryStore.searchText,
-			queryStore.selectedCancerTypeIds,
-			queryStore.selectedCancerStudyIds
-		],
-		function: () => new StudyListLogic({
-			treeData: this.getTreeData(),
-			state: {
-				maxTreeDepth: queryStore.maxTreeDepth,
-				searchText: queryStore.searchText,
-				selectedCancerTypeIds: queryStore.selectedCancerTypeIds,
-				selectedStudyIds: queryStore.selectedCancerStudyIds,
-			},
-			handleSelectedStudiesChange: selectedStudyIds => queryStore.selectedCancerStudyIds = selectedStudyIds,
-		}),
-	});
-
 	render()
 	{
 		let searchTextOptions = queryStore.searchTextPresets;
 		if (queryStore.searchText && searchTextOptions.indexOf(queryStore.searchText) < 0)
 			searchTextOptions = [queryStore.searchText].concat(searchTextOptions);
 
-		let logic = this.getStudyListLogic();
+		let logic = queryStore.studyListLogic;
 		let allSelectedCheckboxProps = logic.getCheckboxProps(logic.getRootCancerType());
 		let allSelected = allSelectedCheckboxProps.checked && !allSelectedCheckboxProps.indeterminate;
 
@@ -221,7 +190,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 					</div>
 					<div className={styles.cancerStudyListContainer}>
 						<StudyList
-							logic={this.getStudyListLogic()}
+							logic={queryStore.studyListLogic}
 						/>
 					</div>
 				</FlexRow>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 7a00812cd7e..bda3ce1de6f 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -15,6 +15,7 @@ import {IGeneticProfileSelectorState} from "./GeneticProfileSelector";
 import {observer} from "../../../../node_modules/mobx-react/custom";
 import queryStore from "./QueryStore";
 import DevTools from "../../../../node_modules/mobx-react-devtools/index";
+import devMode from "../../lib/devMode";
 
 const styles = styles_any as {
 	QueryContainer: string,
@@ -49,12 +50,52 @@ export default class QueryContainer extends React.Component<IQueryContainerProps
 
                 <CancerStudySelector/>
 
-				{!!(queryStore.geneticProfiles.result) && (
+				{!!(devMode && queryStore.geneticProfiles.result) && (
 					<GeneticProfileSelector
 						profiles={queryStore.geneticProfiles.result}
 						selectedProfileIds={this.state.selectedProfileIds}
 					/>
 				)}
+
+				{!!(devMode) && (
+					<FlexRow padded>
+						{/* demo controls */}
+						<FlexCol className={styles.CancerStudySelector} padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
+							<StateToggle label='Click tree node again to deselect' target={queryStore} name='clickAgainToDeselectSingle' defaultValue={queryStore.clickAgainToDeselectSingle}/>
+							<Select
+								label="Tree depth: "
+								selected={queryStore.maxTreeDepth}
+								options={[
+									{label: "0"},
+									{label: "1"},
+									{label: "2"},
+									{label: "3"},
+									{label: "4"},
+									{label: "5"},
+									{label: "6"},
+									{label: "7"},
+									{label: "8"},
+									{label: "9"},
+								]}
+								onChange={option => queryStore.maxTreeDepth = parseInt(option.label)}
+							/>
+							<span>Note: Use cmd+click to select/deselect multiple cancer types.</span>
+						</FlexCol>
+
+						{/* display state for demo */}
+						<pre style={{flex: 1, height: 200}}>
+							{
+								JSON.stringify({
+									selectedCancerTypeIds: queryStore.selectedCancerTypeIds,
+									selectedStudyIds: queryStore.selectedCancerStudyIds,
+								}, null, 4)
+							}
+						</pre>
+					</FlexRow>
+				)}
+
+				{devMode && <DevTools/>}
+
             </FlexCol>
         );
     }
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index a3b77149418..b3353d4e4db 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -3,6 +3,8 @@ import RemoteData from "../../api/RemoteData";
 import client from "../../api/cbioportalClientInstance";
 import {reaction, toJS, observable, action, computed, whyRun} from "../../../../node_modules/mobx/lib/mobx";
 import {TypeOfCancer as CancerType} from "../../api/CBioPortalAPI";
+import CancerStudyTreeData from "./CancerStudyTreeData";
+import StudyListLogic from "../StudyList/StudyListLogic";
 
 // mobx observable
 export class QueryStore
@@ -37,6 +39,28 @@ export class QueryStore
 	@observable maxTreeDepth:number = 9;
 	@observable clickAgainToDeselectSingle:boolean = true;
 
+	@computed get treeData()
+	{
+		return new CancerStudyTreeData({
+			cancerTypes: this.cancerTypes.result || [],
+			studies: this.cancerStudies.result || []
+		});
+	}
+
+	@computed get studyListLogic()
+	{
+		return new StudyListLogic({
+			treeData: this.treeData,
+			state: {
+				maxTreeDepth: this.maxTreeDepth,
+				searchText: this.searchText,
+				selectedCancerTypeIds: this.selectedCancerTypeIds,
+				selectedStudyIds: this.selectedCancerStudyIds,
+			},
+			handleSelectedStudiesChange: selectedStudyIds => this.selectedCancerStudyIds = selectedStudyIds,
+		});
+	}
+
 	@action selectCancerType(cancerType:CancerType, multiSelect?:boolean)
 	{
 		let clickedCancerTypeId = cancerType.cancerTypeId;
diff --git a/src/shared/lib/devMode.ts b/src/shared/lib/devMode.ts
new file mode 100644
index 00000000000..e39c1b474b1
--- /dev/null
+++ b/src/shared/lib/devMode.ts
@@ -0,0 +1,2 @@
+const devMode = !!localStorage.getItem('dev');
+export default devMode;

From 791d10179c2da9081d7a7297f639a454058afbe0 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Mon, 30 Jan 2017 13:44:39 -0500
Subject: [PATCH 005/133] Use MobxPromise

---
 .../components/query/QueryContainer.tsx       |  2 +-
 src/shared/components/query/QueryStore.ts     | 31 +++++++------------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index bda3ce1de6f..760bc11c9db 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -40,7 +40,7 @@ export default class QueryContainer extends React.Component<IQueryContainerProps
 
     render():JSX.Element
     {
-        if (queryStore.cancerTypes.status == 'fetching' || queryStore.cancerStudies.status == 'fetching')
+        if (queryStore.cancerTypes.isPending || queryStore.cancerStudies.isPending)
             return <Spinner/>;
         if (!queryStore.cancerTypes.result || !queryStore.cancerStudies.result)
             return <span>No data</span>;
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index b3353d4e4db..a56ecc48491 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,35 +1,28 @@
 import * as _ from 'lodash';
 import RemoteData from "../../api/RemoteData";
 import client from "../../api/cbioportalClientInstance";
-import {reaction, toJS, observable, action, computed, whyRun} from "../../../../node_modules/mobx/lib/mobx";
+import {toJS, observable, action, computed, whyRun} from "../../../../node_modules/mobx/lib/mobx";
 import {TypeOfCancer as CancerType} from "../../api/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
+import MobxPromise from "../../api/MobxPromise";
 
 // mobx observable
 export class QueryStore
 {
-	constructor()
+	@observable cancerTypes = new MobxPromise(client.getAllCancerTypesUsingGET({}));
+	@observable cancerStudies = new MobxPromise(client.getAllStudiesUsingGET({}));
+	@computed get geneticProfiles()
 	{
-		reaction(
-			() => toJS(this.selectedCancerStudyIds),
-			studyIds => {
-				if (studyIds && studyIds.length == 1)
-					this.geneticProfiles.params = {studyId: studyIds[0]};
-				else
-					this.geneticProfiles.cancel();
-			},
-			{
-				name: 'refreshGeneticProfiles',
-				compareStructural: true
-			}
-		);
+		return new MobxPromise(() => {
+			let studyIds = this.selectedCancerStudyIds;
+			if (studyIds && studyIds.length == 1)
+				return client.getAllGeneticProfilesInStudyUsingGET({studyId: studyIds[0]});
+			else
+				return Promise.resolve([]);
+		});
 	}
 
-	@observable cancerTypes = new RemoteData(client, client.getAllCancerTypesUsingGET, {});
-	@observable cancerStudies = new RemoteData(client, client.getAllStudiesUsingGET, {});
-	@observable geneticProfiles = new RemoteData(client, client.getAllGeneticProfilesInStudyUsingGET);
-
 	@observable searchText:string = '';
 	@observable.shallow searchTextPresets = ['lung', 'serous', 'tcga', 'tcga -provisional'];
 	@observable.shallow selectedCancerStudyIds:string[] = [];

From fc6c671b39391a36b22e29f7f3d2d778e110a45a Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Mon, 30 Jan 2017 17:12:41 -0500
Subject: [PATCH 006/133] update genetic profile selector to use mobx

---
 .../query/GeneticProfileSelector.tsx          | 92 +++++--------------
 .../components/query/QueryContainer.tsx       | 22 +----
 src/shared/components/query/QueryStore.ts     |  3 +-
 3 files changed, 27 insertions(+), 90 deletions(-)

diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index f8c844ea2d1..8197cf950bf 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -2,9 +2,11 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import {GeneticProfile} from "../../api/CBioPortalAPI";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
-import firstDefinedValue from "../../lib/firstDefinedValue";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
+import queryStore from "./QueryStore";
+import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
+import {observer} from "../../../../node_modules/mobx-react/custom";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
@@ -25,72 +27,27 @@ export const geneticAlterationTypeGroupLabels:{[K in GeneticProfile['geneticAlte
 	"MRNA_EXPRESSION": "mRNA Expression data",
 };
 
-export type IGeneticProfileSelectorProps = {
-	profiles: GeneticProfile[];
-	onStateChange?: (newState:IGeneticProfileSelectorState) => void;
-} & IGeneticProfileSelectorState;
-
-export interface IGeneticProfileSelectorState
-{
-	selectedProfileIds?: string[];
-	zScoreThreshold?: string;
-}
-
-export default class GeneticProfileSelector extends React.Component<IGeneticProfileSelectorProps, IGeneticProfileSelectorState>
+@observer
+export default class GeneticProfileSelector extends React.Component<{}, {}>
 {
-	static defaultProps:IGeneticProfileSelectorProps = {
-		profiles: [],
-	};
-
-	constructor(props: IGeneticProfileSelectorProps)
-	{
-		super(props);
-		this.state = {zScoreThreshold: '2.0'};
-	}
-
-	get selectedProfileIds()
-	{
-		return firstDefinedValue(this.props.selectedProfileIds, this.state.selectedProfileIds || []);
-	}
-
-	get zScoreThreshold()
+	@computed get profiles()
 	{
-		return firstDefinedValue(this.props.zScoreThreshold, this.state.zScoreThreshold);
+		return queryStore.geneticProfiles.result || [];
 	}
 
-	updateState(newState:IGeneticProfileSelectorState)
+	@computed get selectedProfileIds()
 	{
-		this.setState(newState, () => {
-			if (this.props.onStateChange)
-				this.props.onStateChange(this.state)
-		});
-	}
-
-	componentDidMount()
-	{
-		this.validateState();
-	}
+		if (queryStore.selectedProfileIds.length)
+			return queryStore.selectedProfileIds;
 
-	componentDidUpdate()
-	{
-		this.validateState();
-	}
-
-	validateState()
-	{
-		if (this.props.selectedProfileIds)
-			return;
-
-		let selectedProfileIds = this.props.profiles
+		return this.profiles
 			.filter(profile => _.includes(defaultSelectedAlterationTypes, profile.geneticAlterationType))
 			.map(profile => profile.geneticProfileId);
-
-		//this.updateState({selectedProfileIds});
 	}
 
 	render()
 	{
-		let profiles = this.props.profiles.filter(profile => profile.showProfileInAnalysisTab);
+		let profiles = this.profiles.filter(profile => profile.showProfileInAnalysisTab);
 		let groupedProfiles = _.groupBy(profiles, profile => profile.geneticAlterationType);
 
 		// puts default alteration types first
@@ -136,13 +93,13 @@ export default class GeneticProfileSelector extends React.Component<IGeneticProf
 					key={output.length}
 					checked={checked}
 					inputProps={{
-						onChange: event => this.updateState({
-							selectedProfileIds: (
+						onChange: event => {
+							queryStore.selectedProfileIds = (
 								(event.target as HTMLInputElement).checked
 								?   _.union(this.selectedProfileIds, [ids[0]])
 								:   _.difference(this.selectedProfileIds, ids)
-							)
-						})
+							);
+						}
 					}}
 				>
 					{label}
@@ -167,14 +124,12 @@ export default class GeneticProfileSelector extends React.Component<IGeneticProf
 									style={{userSelect: 'text'}}
 									onChange={event => {
 										if ((event.target as HTMLInputElement).checked)
-											this.updateState({
-												selectedProfileIds: (
-													_.union(
-														_.difference(this.selectedProfileIds, ids),
-														[profile.geneticProfileId]
-													)
+											queryStore.selectedProfileIds = (
+												_.union(
+													_.difference(this.selectedProfileIds, ids),
+													[profile.geneticProfileId]
 												)
-											})
+											);
 									}}
 								/>
 								<span className={styles.profileName}>{profile.name}</span>
@@ -193,10 +148,9 @@ export default class GeneticProfileSelector extends React.Component<IGeneticProf
 					Enter a z-score threshold ±:
 					<input
 						type="text"
-						value={this.zScoreThreshold}
+						value={queryStore.zScoreThreshold}
 						onChange={event => {
-							let zScoreThreshold = (event.target as HTMLInputElement).value;
-							this.updateState({zScoreThreshold});
+							queryStore.zScoreThreshold = (event.target as HTMLInputElement).value;
 						}}
 					/>
 				</div>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 760bc11c9db..143f8cdea15 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -9,9 +9,7 @@ import Radio = ReactBootstrap.Radio;
 import Checkbox = ReactBootstrap.Checkbox;
 import {Select, StateToggle} from "../ExperimentalControls";
 import * as styles_any from './styles.module.scss';
-import firstDefinedValue from "../../lib/firstDefinedValue";
 import GeneticProfileSelector from "./GeneticProfileSelector";
-import {IGeneticProfileSelectorState} from "./GeneticProfileSelector";
 import {observer} from "../../../../node_modules/mobx-react/custom";
 import queryStore from "./QueryStore";
 import DevTools from "../../../../node_modules/mobx-react-devtools/index";
@@ -22,22 +20,9 @@ const styles = styles_any as {
 	CancerStudySelector: string,
 };
 
-export interface IQueryContainerProps
-{
-}
-
-export type IQueryContainerState = {
-} & IGeneticProfileSelectorState;
-
 @observer
-export default class QueryContainer extends React.Component<IQueryContainerProps, IQueryContainerState>
+export default class QueryContainer extends React.Component<{}, {}>
 {
-    constructor(props:IQueryContainerProps)
-    {
-        super(props);
-        this.state = {};
-    }
-
     render():JSX.Element
     {
         if (queryStore.cancerTypes.isPending || queryStore.cancerStudies.isPending)
@@ -51,10 +36,7 @@ export default class QueryContainer extends React.Component<IQueryContainerProps
                 <CancerStudySelector/>
 
 				{!!(devMode && queryStore.geneticProfiles.result) && (
-					<GeneticProfileSelector
-						profiles={queryStore.geneticProfiles.result}
-						selectedProfileIds={this.state.selectedProfileIds}
-					/>
+					<GeneticProfileSelector/>
 				)}
 
 				{!!(devMode) && (
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index a56ecc48491..4480523a53f 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,5 +1,4 @@
 import * as _ from 'lodash';
-import RemoteData from "../../api/RemoteData";
 import client from "../../api/cbioportalClientInstance";
 import {toJS, observable, action, computed, whyRun} from "../../../../node_modules/mobx/lib/mobx";
 import {TypeOfCancer as CancerType} from "../../api/CBioPortalAPI";
@@ -26,6 +25,8 @@ export class QueryStore
 	@observable searchText:string = '';
 	@observable.shallow searchTextPresets = ['lung', 'serous', 'tcga', 'tcga -provisional'];
 	@observable.shallow selectedCancerStudyIds:string[] = [];
+	@observable.shallow selectedProfileIds:string[] = [];
+	@observable zScoreThreshold:string = '2.0';
 
 	// experimental options
 	@observable.shallow selectedCancerTypeIds:string[] = [];

From 70d0637dca4882361fb7727e40053905dede76e4 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 31 Jan 2017 10:09:11 -0500
Subject: [PATCH 007/133] no longer need @computed getter to use MobxPromise

---
 src/shared/components/query/QueryStore.ts | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 4480523a53f..68b3fdf97be 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -11,16 +11,13 @@ export class QueryStore
 {
 	@observable cancerTypes = new MobxPromise(client.getAllCancerTypesUsingGET({}));
 	@observable cancerStudies = new MobxPromise(client.getAllStudiesUsingGET({}));
-	@computed get geneticProfiles()
-	{
-		return new MobxPromise(() => {
-			let studyIds = this.selectedCancerStudyIds;
-			if (studyIds && studyIds.length == 1)
-				return client.getAllGeneticProfilesInStudyUsingGET({studyId: studyIds[0]});
-			else
-				return Promise.resolve([]);
-		});
-	}
+	@observable geneticProfiles = new MobxPromise(() => {
+		let studyIds = this.selectedCancerStudyIds;
+		if (studyIds && studyIds.length == 1)
+			return client.getAllGeneticProfilesInStudyUsingGET({studyId: studyIds[0]});
+		else
+			return Promise.resolve([]);
+	});
 
 	@observable searchText:string = '';
 	@observable.shallow searchTextPresets = ['lung', 'serous', 'tcga', 'tcga -provisional'];

From 17d7d079b9ff08c8156f6d72f6cacf531d82bda9 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 31 Jan 2017 13:29:51 -0500
Subject: [PATCH 008/133] Fix key warning in render

---
 src/shared/components/StudyList/StudyList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index 743efcb639f..2f14b84a601 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -44,7 +44,7 @@ export interface IStudyListLogic
 	onCheck: (node:CancerTreeNode, event:React.FormEvent<HTMLInputElement>) => void;
 }
 
-export default class StudiesList extends React.Component<IStudyListProps, {}>
+export default class StudyList extends React.Component<IStudyListProps, {}>
 {
 	get logic() { return this.props.logic; }
 
@@ -53,7 +53,7 @@ export default class StudiesList extends React.Component<IStudyListProps, {}>
 		return this.renderCancerType(this.logic.getRootCancerType());
 	}
 
-	renderCancerType = (cancerType:CancerType, arrayIndex?:number):JSX.Element =>
+	renderCancerType = (cancerType:CancerType, arrayIndex:number = 0):JSX.Element =>
 	{
 		let currentLevel = this.logic.getDepth(cancerType);
 		let childCancerTypes = this.logic.getChildCancerTypes(cancerType);

From 6a77dfab5a893aa9b9a45a1c7fab38a965d5fdb3 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 31 Jan 2017 14:01:27 -0500
Subject: [PATCH 009/133] Fix key warning in StudyList

---
 src/shared/components/StudyList/StudyList.tsx | 12 +++++++-----
 src/shared/lib/devMode.ts                     |  8 +++++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index 2f14b84a601..d77b9e0513a 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -162,11 +162,13 @@ export default class StudyList extends React.Component<IStudyListProps, {}>
 		return (
 			<span className={styles.StudyLinks}>
 				{links.map((link, i) => (
-					link.url ?
-					<a key={i} href={link.url}>
-						<FontAwesome name={link.icon}/>
-					</a> :
-						<FontAwesome name={link.icon}/>
+					(link.url) ? (
+						<a key={i} href={link.url}>
+							<FontAwesome name={link.icon}/>
+						</a>
+					) : (
+						<FontAwesome key={i} name={link.icon}/>
+					)
 				))}
 			</span>
 		);
diff --git a/src/shared/lib/devMode.ts b/src/shared/lib/devMode.ts
index e39c1b474b1..fae680692e0 100644
--- a/src/shared/lib/devMode.ts
+++ b/src/shared/lib/devMode.ts
@@ -1,2 +1,8 @@
-const devMode = !!localStorage.getItem('dev');
+import {observable} from "../../../node_modules/mobx/lib/mobx";
+
+class DevMode
+{
+	@observable enabled = !!localStorage.getItem('dev');
+}
+const devMode = new DevMode();
 export default devMode;

From fb072cf25384d96f7216126531bb9a2e90cb5aa2 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 31 Jan 2017 14:36:37 -0500
Subject: [PATCH 010/133] Add "Show work in progress" checkbox

---
 src/pages/home/HomePage.tsx                    | 4 +++-
 src/pages/pageHeader/PageHeader.tsx            | 5 +++++
 src/shared/components/ExperimentalControls.tsx | 4 +++-
 src/shared/components/query/QueryContainer.tsx | 6 +++---
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index e036001e179..789159c788f 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -4,6 +4,7 @@ import QueryContainer from "../../shared/components/query/QueryContainer";
 import * as styles_any from './styles.module.scss';
 import {FlexCol} from "../../shared/components/flexbox/FlexBox";
 import devMode from "../../shared/lib/devMode";
+import {observer} from "../../../node_modules/mobx-react/index";
 
 function getRootElement()
 {
@@ -26,6 +27,7 @@ interface IHomePageState
 	selectorVersion: 'old'|'new';
 }
 
+@observer
 export default class HomePage extends React.Component<IHomePageProps, IHomePageState>
 {
     constructor(props:IHomePageProps)
@@ -48,8 +50,8 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
     {
         return (
         	<FlexCol style={{height: '100%'}}>
-				{devMode && <a style={{alignSelf: 'center'}} onClick={() => this.setState({ selectorVersion: this.state.selectorVersion == 'new' ? 'old' : 'new' })}>Switch to {this.state.selectorVersion == 'new' ? 'old' : 'new'} view</a>}
 				{this.state.selectorVersion == 'new' ? <QueryContainer/> : <QueryContainerOld/>}
+				{devMode.enabled && <a style={{alignSelf: 'center'}} onClick={() => this.setState({ selectorVersion: this.state.selectorVersion == 'new' ? 'old' : 'new' })}>Switch to {this.state.selectorVersion == 'new' ? 'old' : 'new'} view</a>}
 			</FlexCol>
 		);
     }
diff --git a/src/pages/pageHeader/PageHeader.tsx b/src/pages/pageHeader/PageHeader.tsx
index 51109893c57..eb154535d6d 100644
--- a/src/pages/pageHeader/PageHeader.tsx
+++ b/src/pages/pageHeader/PageHeader.tsx
@@ -1,11 +1,15 @@
 import * as React from 'react';
 import './styles.scss';
+import {StateToggle} from "../../shared/components/ExperimentalControls";
+import devMode from "../../shared/lib/devMode";
+import {observer} from "../../../node_modules/mobx-react/index";
 
 interface IPageHeaderProps {
     router: any;
     currentRoutePath: string;
 }
 
+@observer
 export default class PageHeader extends React.Component<IPageHeaderProps, void> {
 
     routeInput: HTMLInputElement;
@@ -25,6 +29,7 @@ export default class PageHeader extends React.Component<IPageHeaderProps, void>
                                 <input className="form-control" defaultValue={this.props.currentRoutePath} ref={(c) => { this.routeInput = c; }} />
                         </div>
                     </form>
+					<StateToggle label='Show work in progress' style={{color: 'white'}} target={devMode} name='enabled' defaultValue={devMode.enabled}/>
                 </div>
             </header>
         );
diff --git a/src/shared/components/ExperimentalControls.tsx b/src/shared/components/ExperimentalControls.tsx
index 023eb11a73d..42921505846 100644
--- a/src/shared/components/ExperimentalControls.tsx
+++ b/src/shared/components/ExperimentalControls.tsx
@@ -103,15 +103,17 @@ export interface IStateToggleProps<S>
 	target: S | React.Component<any, S>;
 	name: keyof S;
 	defaultValue: boolean;
+	style?: React.CSSProperties;
 }
 
 export function TypedStateToggle<T>(props:IStateToggleProps<T>)
 {
-	let {label, target, name, defaultValue} = props;
+	let {label, target, name, defaultValue, style} = props;
 	let currentValue = target instanceof React.Component ? !!(target as React.Component<any, T>).state[name] : !!target[name];
 	return (
 		<LabeledCheckbox
 			checked={firstDefinedValue(currentValue, defaultValue)}
+			labelProps={{style}}
 			inputProps={{
 				onChange: event => {
 					if (target instanceof React.Component)
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 143f8cdea15..2c6de3f0ce2 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -35,11 +35,11 @@ export default class QueryContainer extends React.Component<{}, {}>
 
                 <CancerStudySelector/>
 
-				{!!(devMode && queryStore.geneticProfiles.result) && (
+				{!!(devMode.enabled && queryStore.geneticProfiles.result) && (
 					<GeneticProfileSelector/>
 				)}
 
-				{!!(devMode) && (
+				{!!(devMode.enabled) && (
 					<FlexRow padded>
 						{/* demo controls */}
 						<FlexCol className={styles.CancerStudySelector} padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
@@ -76,7 +76,7 @@ export default class QueryContainer extends React.Component<{}, {}>
 					</FlexRow>
 				)}
 
-				{devMode && <DevTools/>}
+				{devMode.enabled && <DevTools/>}
 
             </FlexCol>
         );

From f0e63d8dde163772a01496452634ee1f84874fa7 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 31 Jan 2017 17:12:45 -0500
Subject: [PATCH 011/133] Clean up profile selector and dev controls

---
 src/pages/home/HomePage.tsx                   |  2 ++
 .../components/query/CancerStudySelector.tsx  |  7 ++---
 .../query/GeneticProfileSelector.tsx          |  3 ++-
 .../components/query/QueryContainer.tsx       | 27 ++++++++++---------
 src/shared/components/query/QueryStore.ts     | 10 +++++--
 .../components/query/styles.module.scss       | 22 ++++++++-------
 6 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 789159c788f..ffe22ea93e0 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -5,6 +5,7 @@ import * as styles_any from './styles.module.scss';
 import {FlexCol} from "../../shared/components/flexbox/FlexBox";
 import devMode from "../../shared/lib/devMode";
 import {observer} from "../../../node_modules/mobx-react/index";
+import DevTools from "../../../node_modules/mobx-react-devtools/index";
 
 function getRootElement()
 {
@@ -52,6 +53,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
         	<FlexCol style={{height: '100%'}}>
 				{this.state.selectorVersion == 'new' ? <QueryContainer/> : <QueryContainerOld/>}
 				{devMode.enabled && <a style={{alignSelf: 'center'}} onClick={() => this.setState({ selectorVersion: this.state.selectorVersion == 'new' ? 'old' : 'new' })}>Switch to {this.state.selectorVersion == 'new' ? 'old' : 'new'} view</a>}
+				{devMode.enabled && <DevTools/>}
 			</FlexCol>
 		);
     }
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index d50ed2e4b1e..17007591c21 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -32,6 +32,7 @@ const styles = styles_any as {
 	selectCancerStudyRow: string,
 	searchTextInput: string,
 
+	cancerStudySelectorBody: string,
 	cancerTypeListContainer: string,
 	cancerTypeList: string,
 	cancerTypeListItem: string,
@@ -151,7 +152,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 		let allSelected = allSelectedCheckboxProps.checked && !allSelectedCheckboxProps.indeterminate;
 
 		return (
-			<FlexCol className={styles.CancerStudySelector} flex={1} style={this.props.style}>
+			<FlexCol className={styles.CancerStudySelector} style={this.props.style}>
 				<FlexRow padded overflow className={styles.selectCancerStudyRow}>
 					<h2>Select Studies</h2>
 					<span className={styles.selectedCount}>
@@ -184,8 +185,8 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 						</span>
 				</FlexRow>
 
-				<FlexRow flex={1}>
-					<div className={styles.cancerTypeListContainer}>				
+				<FlexRow className={styles.cancerStudySelectorBody}>
+					<div className={styles.cancerTypeListContainer}>
 						{this.renderCancerTypeList()}
 					</div>
 					<div className={styles.cancerStudyListContainer}>
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 8197cf950bf..961b89cc2df 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -58,6 +58,7 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 
 		return (
 			<div className={styles.GeneticProfileSelector}>
+				<h2>Select Genomic Profiles</h2>
 				{this.renderCheckboxes(altTypes.map(altType => groupedProfiles[altType]))}
 			</div>
 		);
@@ -141,7 +142,7 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 			);
 		}
 
-		if (firstProfile.datatype == DATATYPE_ZSCORE)
+		if (firstProfile.datatype == DATATYPE_ZSCORE && checked)
 		{
 			output.push(
 				<div className={styles.zScore} key={output.length}>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 2c6de3f0ce2..93267738814 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -12,7 +12,6 @@ import * as styles_any from './styles.module.scss';
 import GeneticProfileSelector from "./GeneticProfileSelector";
 import {observer} from "../../../../node_modules/mobx-react/custom";
 import queryStore from "./QueryStore";
-import DevTools from "../../../../node_modules/mobx-react-devtools/index";
 import devMode from "../../lib/devMode";
 
 const styles = styles_any as {
@@ -31,18 +30,22 @@ export default class QueryContainer extends React.Component<{}, {}>
             return <span>No data</span>;
 
         return (
-            <FlexCol padded flex={1} className={styles.QueryContainer}>
+            <FlexRow padded flex={1} className={styles.QueryContainer}>
 
-                <CancerStudySelector/>
+				<FlexCol padded>
 
-				{!!(devMode.enabled && queryStore.geneticProfiles.result) && (
-					<GeneticProfileSelector/>
-				)}
+					<CancerStudySelector/>
+
+					{!!(devMode.enabled && queryStore.geneticProfiles.isComplete && queryStore.geneticProfiles.result.length) && (
+						<GeneticProfileSelector/>
+					)}
+
+				</FlexCol>
 
 				{!!(devMode.enabled) && (
-					<FlexRow padded>
+					<FlexCol padded>
 						{/* demo controls */}
-						<FlexCol className={styles.CancerStudySelector} padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
+						<FlexCol padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
 							<StateToggle label='Click tree node again to deselect' target={queryStore} name='clickAgainToDeselectSingle' defaultValue={queryStore.clickAgainToDeselectSingle}/>
 							<Select
 								label="Tree depth: "
@@ -65,7 +68,7 @@ export default class QueryContainer extends React.Component<{}, {}>
 						</FlexCol>
 
 						{/* display state for demo */}
-						<pre style={{flex: 1, height: 200}}>
+						<pre>
 							{
 								JSON.stringify({
 									selectedCancerTypeIds: queryStore.selectedCancerTypeIds,
@@ -73,12 +76,10 @@ export default class QueryContainer extends React.Component<{}, {}>
 								}, null, 4)
 							}
 						</pre>
-					</FlexRow>
+					</FlexCol>
 				)}
 
-				{devMode.enabled && <DevTools/>}
-
-            </FlexCol>
+            </FlexRow>
         );
     }
 }
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 68b3fdf97be..659ef86d941 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import client from "../../api/cbioportalClientInstance";
-import {toJS, observable, action, computed, whyRun} from "../../../../node_modules/mobx/lib/mobx";
-import {TypeOfCancer as CancerType} from "../../api/CBioPortalAPI";
+import {toJS, observable, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
+import {TypeOfCancer as CancerType, GeneticProfile} from "../../api/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import MobxPromise from "../../api/MobxPromise";
@@ -25,6 +25,12 @@ export class QueryStore
 	@observable.shallow selectedProfileIds:string[] = [];
 	@observable zScoreThreshold:string = '2.0';
 
+	@computed get selectedProfiles()
+	{
+		let idToProfile = expr(() => _.keyBy(this.geneticProfiles.result || [], profile => profile.geneticProfileId));
+		return this.selectedProfileIds.map(id => idToProfile[id]);
+	}
+
 	// experimental options
 	@observable.shallow selectedCancerTypeIds:string[] = [];
 	@observable maxTreeDepth:number = 9;
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 2f3aec74b24..024207cb1e0 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -1,5 +1,11 @@
 .QueryContainer {
   height: 100%;
+
+  h2 {
+    font: normal normal 300 20px/23px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    flex-grow: 2;
+    margin: 0px;
+  }
 }
 
 .cancerStudySelectorHeader {
@@ -12,7 +18,6 @@
 }
 
 .CancerStudySelector {
-  max-height: 400px;
   width: 850px;
   user-select: none;
   
@@ -45,12 +50,6 @@
     }
   }
 
-  h2 {
-    font: normal normal 300 20px/23px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    flex-grow: 2;
-    margin: 0px;
-  }
-
   .selectedCount {
     font-size: 12px;
     line-height: 30px;
@@ -72,6 +71,10 @@
     }
   }
 
+  div.cancerStudySelectorBody {
+    height: 350px;
+  }
+
   div.cancerTypeListContainer, div.cancerStudyListContainer {
   }
 
@@ -152,18 +155,19 @@
 
 .GeneticProfileSelector {
   div.singleCheckbox, div.groupCheckbox {
+    margin-left: 20px;
     label {
       display: inline;
     }
   }
   div.radioGroup {
-    margin-left: 20px;
+    margin-left: 40px;
 
     div.radioItem {
     }
   }
   div.zScore {
-    margin-left: 40px;
+    margin-left: 60px;
   }
   label.profileName {
   }

From 9bbddba49794552d12b2312e71526c6024b0e7d5 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 1 Feb 2017 07:52:59 -0500
Subject: [PATCH 012/133] overflow

---
 src/shared/components/query/QueryContainer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 93267738814..491080045e6 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -32,7 +32,7 @@ export default class QueryContainer extends React.Component<{}, {}>
         return (
             <FlexRow padded flex={1} className={styles.QueryContainer}>
 
-				<FlexCol padded>
+				<FlexCol padded overflow>
 
 					<CancerStudySelector/>
 
@@ -43,7 +43,7 @@ export default class QueryContainer extends React.Component<{}, {}>
 				</FlexCol>
 
 				{!!(devMode.enabled) && (
-					<FlexCol padded>
+					<FlexCol padded overflow>
 						{/* demo controls */}
 						<FlexCol padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
 							<StateToggle label='Click tree node again to deselect' target={queryStore} name='clickAgainToDeselectSingle' defaultValue={queryStore.clickAgainToDeselectSingle}/>

From 3eb6c54411d77067c1aaeebb4a3752a0152b56a9 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 1 Feb 2017 15:50:32 -0500
Subject: [PATCH 013/133] minor changes

---
 .../components/query/GeneticProfileSelector.tsx  | 16 ++++++----------
 src/shared/components/query/QueryStore.ts        | 16 ++++++++--------
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 961b89cc2df..3bff2046acf 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -7,6 +7,7 @@ import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/custom";
+import Dictionary = _.Dictionary;
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
@@ -30,25 +31,20 @@ export const geneticAlterationTypeGroupLabels:{[K in GeneticProfile['geneticAlte
 @observer
 export default class GeneticProfileSelector extends React.Component<{}, {}>
 {
-	@computed get profiles()
-	{
-		return queryStore.geneticProfiles.result || [];
-	}
-
 	@computed get selectedProfileIds()
 	{
 		if (queryStore.selectedProfileIds.length)
 			return queryStore.selectedProfileIds;
 
-		return this.profiles
+		return queryStore.geneticProfiles.result
 			.filter(profile => _.includes(defaultSelectedAlterationTypes, profile.geneticAlterationType))
 			.map(profile => profile.geneticProfileId);
 	}
 
 	render()
 	{
-		let profiles = this.profiles.filter(profile => profile.showProfileInAnalysisTab);
-		let groupedProfiles = _.groupBy(profiles, profile => profile.geneticAlterationType);
+		let profiles = queryStore.geneticProfiles.result.filter(profile => profile.showProfileInAnalysisTab);
+		let groupedProfiles:Dictionary<GeneticProfile[]|undefined> = _.groupBy(profiles, profile => profile.geneticAlterationType);
 
 		// puts default alteration types first
 		let altTypes = _.union(
@@ -59,7 +55,7 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 		return (
 			<div className={styles.GeneticProfileSelector}>
 				<h2>Select Genomic Profiles</h2>
-				{this.renderCheckboxes(altTypes.map(altType => groupedProfiles[altType]))}
+				{this.renderCheckboxes(altTypes.map(altType => groupedProfiles[altType] || []))}
 			</div>
 		);
 	}
@@ -74,7 +70,7 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 
 	renderGroup(profiles:GeneticProfile[], output:JSX.Element[])
 	{
-		if (!profiles || !profiles.length)
+		if (!profiles.length)
 			return;
 
 		let firstProfile = profiles[0];
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 659ef86d941..d15a4c07de4 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -4,20 +4,20 @@ import {toJS, observable, action, computed, whyRun, expr} from "../../../../node
 import {TypeOfCancer as CancerType, GeneticProfile} from "../../api/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
-import MobxPromise from "../../api/MobxPromise";
+import {remoteData} from "../../api/remoteData";
 
 // mobx observable
 export class QueryStore
 {
-	@observable cancerTypes = new MobxPromise(client.getAllCancerTypesUsingGET({}));
-	@observable cancerStudies = new MobxPromise(client.getAllStudiesUsingGET({}));
-	@observable geneticProfiles = new MobxPromise(() => {
+	readonly cancerTypes = remoteData(client.getAllCancerTypesUsingGET({}), []);
+	readonly cancerStudies = remoteData(client.getAllStudiesUsingGET({}), []);
+	readonly geneticProfiles = remoteData(() => {
 		let studyIds = this.selectedCancerStudyIds;
 		if (studyIds && studyIds.length == 1)
 			return client.getAllGeneticProfilesInStudyUsingGET({studyId: studyIds[0]});
 		else
 			return Promise.resolve([]);
-	});
+	}, []);
 
 	@observable searchText:string = '';
 	@observable.shallow searchTextPresets = ['lung', 'serous', 'tcga', 'tcga -provisional'];
@@ -27,7 +27,7 @@ export class QueryStore
 
 	@computed get selectedProfiles()
 	{
-		let idToProfile = expr(() => _.keyBy(this.geneticProfiles.result || [], profile => profile.geneticProfileId));
+		let idToProfile = expr(() => _.keyBy(this.geneticProfiles.result, profile => profile.geneticProfileId));
 		return this.selectedProfileIds.map(id => idToProfile[id]);
 	}
 
@@ -39,8 +39,8 @@ export class QueryStore
 	@computed get treeData()
 	{
 		return new CancerStudyTreeData({
-			cancerTypes: this.cancerTypes.result || [],
-			studies: this.cancerStudies.result || []
+			cancerTypes: this.cancerTypes.result,
+			studies: this.cancerStudies.result
 		});
 	}
 

From f69388a9f4ac7debcba7735256ab78dcf3f69afa Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 2 Feb 2017 10:06:53 -0500
Subject: [PATCH 014/133] refactoring more code to use mobx

---
 src/shared/components/StudyList/StudyList.tsx | 32 +++-----
 .../components/StudyList/StudyListLogic.ts    | 75 ++++++++-----------
 .../components/query/CancerStudySelector.tsx  | 53 +++++++------
 .../components/query/QueryContainer.tsx       |  2 +-
 src/shared/components/query/QueryStore.ts     | 38 ++++++----
 5 files changed, 90 insertions(+), 110 deletions(-)

diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index d77b9e0513a..78693ad4ef1 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -3,8 +3,9 @@ import {TypeOfCancer as CancerType, CancerStudy} from "../../api/CBioPortalAPI";
 import * as styles_any from './styles.module.scss';
 import classNames from "../../lib/classNames";
 import FontAwesome from "react-fontawesome";
-import {CancerTreeNode} from "../query/CancerStudyTreeData";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
+import queryStore from "../query/QueryStore";
+import {observer} from "../../../../node_modules/mobx-react/index";
 
 const styles = {
 	...styles_any as {
@@ -29,28 +30,15 @@ const styles = {
 	Level: (level:number) => styles_any[`Level${level}`]
 };
 
-export type IStudyListProps = {
-	logic: IStudyListLogic;
-};
-
-export interface IStudyListLogic
-{
-	getRootCancerType: () => CancerType;
-	getChildCancerTypes: (cancerType:CancerType) => CancerType[];
-	getChildCancerStudies: (cancerType:CancerType) => CancerStudy[];
-	getDepth: (node:CancerType) => number;
-	isHighlighted: (node:CancerTreeNode) => boolean;
-	getCheckboxProps: (node: CancerTreeNode) => {checked: boolean, indeterminate?: boolean};
-	onCheck: (node:CancerTreeNode, event:React.FormEvent<HTMLInputElement>) => void;
-}
-
-export default class StudyList extends React.Component<IStudyListProps, {}>
+@observer
+export default class StudyList extends React.Component<{}, {}>
 {
-	get logic() { return this.props.logic; }
+	get store() { return queryStore; }
+	get logic() { return queryStore.studyListLogic; }
 
 	render()
 	{
-		return this.renderCancerType(this.logic.getRootCancerType());
+		return this.renderCancerType(this.logic.rootCancerType);
 	}
 
 	renderCancerType = (cancerType:CancerType, arrayIndex:number = 0):JSX.Element =>
@@ -62,7 +50,7 @@ export default class StudyList extends React.Component<IStudyListProps, {}>
 		let heading:JSX.Element | undefined;
 		let indentArrow:JSX.Element | undefined;
 
-		if (cancerType != this.logic.getRootCancerType())
+		if (cancerType != this.logic.rootCancerType)
 		{
 			let liClassName = classNames(
 				styles.CancerType,
@@ -80,7 +68,7 @@ export default class StudyList extends React.Component<IStudyListProps, {}>
 					<LabeledCheckbox
 						{...this.logic.getCheckboxProps(cancerType)}
 						inputProps={{
-							onChange: event => this.logic.onCheck(cancerType, event)
+							onChange: event => this.logic.onCheck(cancerType, (event.target as HTMLInputElement).checked)
 						}}
 					>
 						{indentArrow} 
@@ -131,7 +119,7 @@ export default class StudyList extends React.Component<IStudyListProps, {}>
 			<LabeledCheckbox
 				{...this.logic.getCheckboxProps(study)}
 				inputProps={{
-					onChange: event => this.logic.onCheck(study, event)
+					onChange: event => this.logic.onCheck(study, (event.target as HTMLInputElement).checked)
 				}}
 			>
 				<span className={styles.StudyName} title={study.name}>
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index fc229ceecd8..0509ab225f3 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import {IStudyListLogic} from "./StudyList";
-import CancerStudyTreeData from "../query/CancerStudyTreeData";
 import {CancerTreeNode} from "../query/CancerStudyTreeData";
 import {NodeMetadata} from "../query/CancerStudyTreeData";
 import {TypeOfCancer as CancerType, CancerStudy} from "../../api/CBioPortalAPI";
 import memoize from "../../lib/memoize";
+import {QueryStore} from "../query/QueryStore";
+import {computed, action} from "../../../../node_modules/mobx/lib/mobx";
 
 export function matchesSearchText(input:string, searchText:string):boolean
 {
@@ -25,33 +25,20 @@ export function matchesSearchText(input:string, searchText:string):boolean
 	});
 }
 
-export default class StudyListLogic implements IStudyListLogic
+export default class StudyListLogic
 {
-	state:{
-		'searchText': string,
-		'selectedStudyIds': string[],
-		'selectedCancerTypeIds': string[],
-		'maxTreeDepth': number,
-	};
-
-	treeData: CancerStudyTreeData;
-	handleSelectedStudiesChange: (selectedStudyIds: string[]) => void
-
-	constructor(params: Pick<StudyListLogic, 'state' | 'treeData' | 'handleSelectedStudiesChange'>)
+	constructor(readonly store:QueryStore)
 	{
-		this.state = params.state;
-		this.treeData = params.treeData;
-		this.handleSelectedStudiesChange = params.handleSelectedStudiesChange;
 	}
 
-	getRootCancerType()
+	@computed get rootCancerType()
 	{
-		return this.treeData.rootCancerType;
+		return this.store.treeData.rootCancerType;
 	}
 
 	getMetadata(node:CancerTreeNode)
 	{
-		return this.treeData.map_node_meta.get(node) as NodeMetadata;
+		return this.store.treeData.map_node_meta.get(node) as NodeMetadata;
 	}
 
 	// filters out empty CancerType subtrees
@@ -61,15 +48,15 @@ export default class StudyListLogic implements IStudyListLogic
 		if (meta.isCancerType)
 		{
 			// ignore cancer types excluded by selection
-			if (this.state.selectedCancerTypeIds.length)
+			if (this.store.selectedCancerTypeIds.length)
 			{
-				let idToCancerType = (cancerTypeId:string) => this.treeData.map_cancerTypeId_cancerType.get(cancerTypeId) as CancerType;
-				let selectedCancerTypes = this.state.selectedCancerTypeIds.map(idToCancerType);
+				let idToCancerType = (cancerTypeId:string) => this.store.treeData.map_cancerTypeId_cancerType.get(cancerTypeId) as CancerType;
+				let selectedCancerTypes = this.store.selectedCancerTypeIds.map(idToCancerType);
 				if (_.intersection(selectedCancerTypes, [node].concat(meta.ancestors)).length == 0)
 					return false;
 			}
 			// ignore cancer types excluded by depth
-			if (meta.ancestors.length > this.state.maxTreeDepth)
+			if (meta.ancestors.length > this.store.maxTreeDepth)
 				return false;
 			// ignore cancer types with no descendant studies
 			if (meta.descendantStudies.length == 0)
@@ -80,7 +67,7 @@ export default class StudyListLogic implements IStudyListLogic
 
 	// returns true if the node or any related nodes match
 	nodeFilter = memoize({
-		getAdditionalArgs: () => [this.treeData, this.state.maxTreeDepth, this.state.searchText],
+		getAdditionalArgs: () => [this.store.treeData, this.store.maxTreeDepth, this.store.searchText],
 		fixedArgsLength: 1,
 		function: (node:CancerTreeNode):boolean =>
 		{
@@ -92,13 +79,13 @@ export default class StudyListLogic implements IStudyListLogic
 				return false;
 
 			// if no search text is entered, include all nodes
-			if (!this.state.searchText)
+			if (!this.store.searchText)
 				return true;
 
 			// check for matching text in this node and related nodes
 			for (let others of [[node], meta.descendantCancerTypes, meta.descendantStudies, meta.ancestors])
 				for (let other of others)
-					if (this.shouldConsiderNode(other) && matchesSearchText(other.name, this.state.searchText))
+					if (this.shouldConsiderNode(other) && matchesSearchText(other.name, this.store.searchText))
 						return true;
 
 			// no match
@@ -109,20 +96,20 @@ export default class StudyListLogic implements IStudyListLogic
 	getChildCancerTypes(cancerType:CancerType):CancerType[]
 	{
 		let meta = this.getMetadata(cancerType);
-		let childTypes = meta.ancestors.length < this.state.maxTreeDepth ? meta.childCancerTypes : [];
+		let childTypes = meta.ancestors.length < this.store.maxTreeDepth ? meta.childCancerTypes : [];
 		return childTypes.filter(this.nodeFilter);
 	}
 
 	getChildCancerStudies(cancerType:CancerType):CancerStudy[]
 	{
 		let meta = this.getMetadata(cancerType);
-		let studies = meta.ancestors.length < this.state.maxTreeDepth ? meta.childStudies : meta.descendantStudies;
+		let studies = meta.ancestors.length < this.store.maxTreeDepth ? meta.childStudies : meta.descendantStudies;
 		return studies.filter(this.nodeFilter);
 	}
 
 	getDescendantCancerStudies(node:CancerTreeNode):CancerStudy[]
 	{
-		if (node === this.getRootCancerType())
+		if (node === this.rootCancerType)
 			return this.hack_getAllStudies();
 
 		let meta = this.getMetadata(node);
@@ -137,7 +124,7 @@ export default class StudyListLogic implements IStudyListLogic
 
 	isHighlighted(node:CancerTreeNode):boolean
 	{
-		return !!this.state.searchText && matchesSearchText(node.name, this.state.searchText);
+		return !!this.store.searchText && matchesSearchText(node.name, this.store.searchText);
 	}
 
 	getCheckboxProps(node: CancerTreeNode): {checked: boolean, indeterminate?: boolean}
@@ -145,8 +132,8 @@ export default class StudyListLogic implements IStudyListLogic
 		let meta = this.getMetadata(node);
 		if (meta.isCancerType)
 		{
-			let selectedStudyIds = this.state.selectedStudyIds || [];
-			let selectedStudies = selectedStudyIds.map(studyId => this.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
+			let selectedStudyIds = this.store.selectedStudyIds || [];
+			let selectedStudies = selectedStudyIds.map(studyId => this.store.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
 			let shownStudies = this.getDescendantCancerStudies(node);
 			let shownAndSelectedStudies = _.intersection(shownStudies, selectedStudies);
 			let checked = shownAndSelectedStudies.length > 0;
@@ -157,7 +144,7 @@ export default class StudyListLogic implements IStudyListLogic
 		else
 		{
 			let study = node as CancerStudy;
-			let checked = !!this.state.selectedStudyIds.find(id => id == study.studyId);
+			let checked = !!this.store.selectedStudyIds.find(id => id == study.studyId);
 			return {checked};
 		}
 	}
@@ -165,24 +152,24 @@ export default class StudyListLogic implements IStudyListLogic
 	hack_getAllStudies()
 	{
 		return _.union(...(
-			this.getChildCancerTypes(this.getRootCancerType())
+			this.getChildCancerTypes(this.rootCancerType)
 				.map(cancerType => this.getDescendantCancerStudies(cancerType))
 		));
 	}
 
-	hack_handleSelectAll(checked:boolean)
+	@action hack_handleSelectAll(checked:boolean)
 	{
-		let selectedStudyIds = this.state.selectedStudyIds;
+		let selectedStudyIds = this.store.selectedStudyIds;
 		let clickedStudyIds = this.hack_getAllStudies().map(study => study.studyId);
 		if (checked)
 			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
 		else
 			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
 
-		this.handleSelectedStudiesChange(selectedStudyIds);
+		this.store.selectedStudyIds = selectedStudyIds;
 	}
 
-	onCheck(node:CancerTreeNode, event:React.FormEvent<HTMLInputElement>): void
+	@action onCheck(node:CancerTreeNode, checked:boolean): void
 	{
 		let clickedStudyIds:string[];
 		let meta = this.getMetadata(node);
@@ -190,17 +177,17 @@ export default class StudyListLogic implements IStudyListLogic
 			clickedStudyIds = this.getDescendantCancerStudies(node).map(study => study.studyId);
 		else
 			clickedStudyIds = [(node as CancerStudy).studyId];
-		this.handleCheckboxStudyIds(event, clickedStudyIds);
+		this.handleCheckboxStudyIds(clickedStudyIds, checked);
 	}
 
-	handleCheckboxStudyIds(event:React.FormEvent<HTMLInputElement>, clickedStudyIds:string[])
+	 private handleCheckboxStudyIds(clickedStudyIds:string[], checked:boolean)
 	{
-		let selectedStudyIds = this.state.selectedStudyIds;
-		if ((event.target as HTMLInputElement).checked)
+		let selectedStudyIds = this.store.selectedStudyIds;
+		if (checked)
 			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
 		else
 			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
 
-		this.handleSelectedStudiesChange(selectedStudyIds);
+		this.store.selectedStudyIds = selectedStudyIds;
 	}
 }
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 17007591c21..0b338f2ebe3 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -6,12 +6,10 @@ import "react-bootstrap-table/css/react-bootstrap-table.css";
 import {FlexCol, FlexRow} from "../flexbox/FlexBox";
 import * as styles_any from './styles.module.scss';
 import classNames from "../../lib/classNames";
-import {default as CancerStudyTreeData, CancerTreeNode} from "../query/CancerStudyTreeData";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
 import 'react-select/dist/react-select.css';
 import StudyList from "../StudyList/StudyList";
-import StudyListLogic from "../StudyList/StudyListLogic";
 import {observer} from "../../../../node_modules/mobx-react/custom";
 import queryStore from "./QueryStore";
 import {action, toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
@@ -53,24 +51,26 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 		super(props);
 	}
 
+	get store() { return queryStore; }
+
 	@memoize
 	getCancerTypeListClickHandler<T>(node:CancerType)
 	{
-		return (event:React.MouseEvent<T>) => queryStore.selectCancerType(node as CancerType, event.ctrlKey);
+		return (event:React.MouseEvent<T>) => this.store.selectCancerType(node as CancerType, event.ctrlKey);
 	}
 
 	handleStudiesCheckbox<T>(event:React.FormEvent<T>, clickedStudyIds:string[])
 	{
 		if ((event.target as HTMLInputElement).checked)
-			queryStore.selectedCancerStudyIds = _.union(queryStore.selectedCancerStudyIds, clickedStudyIds);
+			this.store.selectedStudyIds = _.union(this.store.selectedStudyIds, clickedStudyIds);
 		else
-			queryStore.selectedCancerStudyIds = _.difference(queryStore.selectedCancerStudyIds, clickedStudyIds);
+			this.store.selectedStudyIds = _.difference(this.store.selectedStudyIds, clickedStudyIds);
 	}
 
 	renderCancerTypeList()
 	{
-		let logic = queryStore.studyListLogic;
-		let rootMeta = logic.getMetadata(logic.treeData.rootCancerType);
+		let logic = this.store.studyListLogic;
+		let rootMeta = logic.getMetadata(logic.store.treeData.rootCancerType);
 		let listItems = rootMeta && rootMeta.childCancerTypes.map(this.renderCancerTypeListItem);
 
 		return (
@@ -82,22 +82,22 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 
 	renderCancerTypeListItem = (cancerType:CancerType, arrayIndex:number) =>
 	{
-		let logic = queryStore.studyListLogic;
+		let logic = this.store.studyListLogic;
 		let meta = logic.getMetadata(cancerType);
 		let numStudies = logic.getDescendantCancerStudies(cancerType).length;
 
 		if (!numStudies)
 			return null;
 
-		let selected = meta.isCancerType && _.includes(queryStore.selectedCancerTypeIds, cancerType.cancerTypeId);
-		let highlighted = queryStore.studyListLogic.isHighlighted(cancerType);
+		let selected = meta.isCancerType && _.includes(this.store.selectedCancerTypeIds, cancerType.cancerTypeId);
+		let highlighted = this.store.studyListLogic.isHighlighted(cancerType);
 		let liClassName = classNames(
 			styles.cancerTypeListItem,
 			styles.selectable,
 			{
 				[styles.selected]: selected,
-				[styles.matchingNodeText]: !!queryStore.searchText && highlighted,
-				[styles.nonMatchingNodeText]: !!queryStore.searchText && !highlighted,
+				[styles.matchingNodeText]: !!this.store.searchText && highlighted,
+				[styles.nonMatchingNodeText]: !!this.store.searchText && !highlighted,
 			},
 		);
 
@@ -119,8 +119,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 
 	renderStudyHeaderCheckbox = (shownStudies:CancerStudy[]) =>
 	{
-		let logic = queryStore.studyListLogic;
-		let selectedStudies = queryStore.selectedCancerStudyIds.map(studyId => logic.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
+		let selectedStudies = this.store.selectedStudyIds.map(studyId => this.store.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
 		let shownAndSelectedStudies = _.intersection(shownStudies, selectedStudies);
 		let checked = shownAndSelectedStudies.length > 0;
 		let indeterminate = checked && shownAndSelectedStudies.length != shownStudies.length;
@@ -143,12 +142,12 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 
 	render()
 	{
-		let searchTextOptions = queryStore.searchTextPresets;
-		if (queryStore.searchText && searchTextOptions.indexOf(queryStore.searchText) < 0)
-			searchTextOptions = [queryStore.searchText].concat(searchTextOptions);
+		let searchTextOptions = this.store.searchTextPresets;
+		if (this.store.searchText && searchTextOptions.indexOf(this.store.searchText) < 0)
+			searchTextOptions = [this.store.searchText].concat(searchTextOptions as string[]);
 
-		let logic = queryStore.studyListLogic;
-		let allSelectedCheckboxProps = logic.getCheckboxProps(logic.getRootCancerType());
+		let logic = this.store.studyListLogic;
+		let allSelectedCheckboxProps = logic.getCheckboxProps(logic.rootCancerType);
 		let allSelected = allSelectedCheckboxProps.checked && !allSelectedCheckboxProps.indeterminate;
 
 		return (
@@ -156,14 +155,14 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 				<FlexRow padded overflow className={styles.selectCancerStudyRow}>
 					<h2>Select Studies</h2>
 					<span className={styles.selectedCount}>
-						<b>{queryStore.selectedCancerStudyIds.length}</b> Studies Selected
+						<b>{this.store.selectedStudyIds.length}</b> Studies Selected
 					</span>
 				</FlexRow>
 
 				<FlexRow overflow className={styles.cancerStudySelectorHeader}>
 						<ReactSelect
 							className={styles.searchTextInput}
-							value={queryStore.searchText}
+							value={this.store.searchText}
 							autofocus={true}
 							options={searchTextOptions.map(str => ({label: str, value: str}))}
 							promptTextCreator={(label:string) => `Search for "${label}"`}
@@ -171,12 +170,12 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 							noResultsText={false}
 							onCloseResetsInput={false}
 							onInputChange={(searchText:string) => {
-								queryStore.searchText = searchText;
-								queryStore.selectedCancerTypeIds = [];
+								this.store.searchText = searchText;
+								this.store.selectedCancerTypeIds = [];
 							}}
 							onChange={(option:{value:string}) => {
-								queryStore.searchText = option ? option.value || '' : '';
-								queryStore.selectedCancerTypeIds = [];
+								this.store.searchText = option ? option.value || '' : '';
+								this.store.selectedCancerTypeIds = [];
 							}}
 						/>
 
@@ -190,9 +189,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 						{this.renderCancerTypeList()}
 					</div>
 					<div className={styles.cancerStudyListContainer}>
-						<StudyList
-							logic={queryStore.studyListLogic}
-						/>
+						<StudyList/>
 					</div>
 				</FlexRow>
 			</FlexCol>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 491080045e6..5b292540a03 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -72,7 +72,7 @@ export default class QueryContainer extends React.Component<{}, {}>
 							{
 								JSON.stringify({
 									selectedCancerTypeIds: queryStore.selectedCancerTypeIds,
-									selectedStudyIds: queryStore.selectedCancerStudyIds,
+									selectedStudyIds: queryStore.selectedStudyIds,
 								}, null, 4)
 							}
 						</pre>
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index d15a4c07de4..9f325a86d8b 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import client from "../../api/cbioportalClientInstance";
 import {toJS, observable, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
-import {TypeOfCancer as CancerType, GeneticProfile} from "../../api/CBioPortalAPI";
+import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy} from "../../api/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
@@ -12,7 +12,7 @@ export class QueryStore
 	readonly cancerTypes = remoteData(client.getAllCancerTypesUsingGET({}), []);
 	readonly cancerStudies = remoteData(client.getAllStudiesUsingGET({}), []);
 	readonly geneticProfiles = remoteData(() => {
-		let studyIds = this.selectedCancerStudyIds;
+		let studyIds = this.selectedStudyIds;
 		if (studyIds && studyIds.length == 1)
 			return client.getAllGeneticProfilesInStudyUsingGET({studyId: studyIds[0]});
 		else
@@ -20,9 +20,9 @@ export class QueryStore
 	}, []);
 
 	@observable searchText:string = '';
-	@observable.shallow searchTextPresets = ['lung', 'serous', 'tcga', 'tcga -provisional'];
-	@observable.shallow selectedCancerStudyIds:string[] = [];
-	@observable.shallow selectedProfileIds:string[] = [];
+	@observable.ref searchTextPresets:ReadonlyArray<string> = ['lung', 'serous', 'tcga', 'tcga -provisional'];
+	@observable.ref selectedStudyIds:ReadonlyArray<string> = [];
+	@observable.ref selectedProfileIds:ReadonlyArray<string> = [];
 	@observable zScoreThreshold:string = '2.0';
 
 	@computed get selectedProfiles()
@@ -46,16 +46,24 @@ export class QueryStore
 
 	@computed get studyListLogic()
 	{
-		return new StudyListLogic({
-			treeData: this.treeData,
-			state: {
-				maxTreeDepth: this.maxTreeDepth,
-				searchText: this.searchText,
-				selectedCancerTypeIds: this.selectedCancerTypeIds,
-				selectedStudyIds: this.selectedCancerStudyIds,
-			},
-			handleSelectedStudiesChange: selectedStudyIds => this.selectedCancerStudyIds = selectedStudyIds,
-		});
+		// hack - dependencies
+		this.treeData;
+		this.maxTreeDepth;
+		this.searchText;
+		this.selectedCancerTypeIds;
+		this.selectedStudyIds;
+
+		return new StudyListLogic(this);
+	}
+
+	@computed get selectedStudies()
+	{
+		return this.selectedStudyIds.map(id => this.treeData.map_studyId_cancerStudy.get(id));
+	}
+
+	@computed get totalSelectedSampleCount()
+	{
+		return this.selectedStudies.reduce((sum:number, study:CancerStudy) => sum + study.allSampleCount, 0);
 	}
 
 	@action selectCancerType(cancerType:CancerType, multiSelect?:boolean)

From a7b9413e5dbb40efa8457b57a565b8e0bf53844a Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 2 Feb 2017 11:21:39 -0500
Subject: [PATCH 015/133] fix compile errors

---
 src/shared/components/labeledCheckbox/LabeledCheckbox.tsx | 2 +-
 src/shared/components/query/CancerStudySelector.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx b/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
index 552baa8987c..6d4cac62f83 100644
--- a/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
+++ b/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
@@ -14,7 +14,7 @@ export interface ILabeledCheckboxProps
 	inputProps?: React.HTMLProps<HTMLInputElement>;
 }
 
-export default class LabeledCheckbox extends React.Component<ILabeledCheckboxProps, undefined>
+export default class LabeledCheckbox extends React.Component<ILabeledCheckboxProps, {}>
 {
 	private input:HTMLInputElement;
 
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 0b338f2ebe3..f9e59fb53e9 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -10,7 +10,7 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
 import 'react-select/dist/react-select.css';
 import StudyList from "../StudyList/StudyList";
-import {observer} from "../../../../node_modules/mobx-react/custom";
+import {observer} from "../../../../node_modules/mobx-react/index";
 import queryStore from "./QueryStore";
 import {action, toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
 import memoize from "../../lib/memoize";

From 5a151a0c550f780a74c1f0928dc0a489cad75a72 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Thu, 2 Feb 2017 21:25:31 -0700
Subject: [PATCH 016/133] Show all selected studies

---
 src/shared/components/StudyList/StudyList.tsx |  30 +++-
 .../components/StudyList/StudyListLogic.ts    |   5 +
 .../components/StudyList/styles.module.scss   | 166 +++++++++++++-----
 .../components/query/CancerStudySelector.tsx  |  22 ++-
 src/shared/components/query/QueryStore.ts     |   2 +
 .../components/query/styles.module.scss       |  11 +-
 6 files changed, 189 insertions(+), 47 deletions(-)

diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index 78693ad4ef1..1c2a362ffc0 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -10,6 +10,7 @@ import {observer} from "../../../../node_modules/mobx-react/index";
 const styles = {
 	...styles_any as {
 		StudyList: string,
+		SelectedStudyList: string,
 
 		CancerType: string,
 		CancerTypeName: string,
@@ -25,6 +26,8 @@ const styles = {
 		enabled: string,
 		indentArrow: string,
 
+
+		closeSelected: string,
 		highlighted: string,
 	},
 	Level: (level:number) => styles_any[`Level${level}`]
@@ -38,7 +41,32 @@ export default class StudyList extends React.Component<{}, {}>
 
 	render()
 	{
-		return this.renderCancerType(this.logic.rootCancerType);
+		if (this.store.showingSelected) {
+			return this.renderSelectedStudies();
+		} else {
+			return this.renderCancerType(this.logic.rootCancerType);
+		}
+	}
+
+	renderSelectedStudies = () =>
+	{
+		let selectedStudies = this.store.selectedStudyIds.map(studyId => this.store.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
+		return (
+			<div className={styles.SelectedStudyList}>
+				<h4>
+						Selected Studies 
+						<span 
+							onClick={() => this.logic.hack_showAllSelected(!this.store.showingSelected)}
+							className={styles.closeSelected}
+						>Return to Study Selector</span>
+				</h4>
+				<ul className={styles.StudyList}>
+					{selectedStudies.map((study, index) => {
+						return this.renderCancerStudy(study, index);
+					})}
+				</ul>
+			</div>
+		);
 	}
 
 	renderCancerType = (cancerType:CancerType, arrayIndex:number = 0):JSX.Element =>
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 0509ab225f3..3ff5836c62c 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -157,6 +157,11 @@ export default class StudyListLogic
 		));
 	}
 
+	@action hack_showAllSelected(checked:boolean)
+	{
+		this.store.showingSelected = checked;
+	}
+
 	@action hack_handleSelectAll(checked:boolean)
 	{
 		let selectedStudyIds = this.store.selectedStudyIds;
diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index 82403336638..7b22f19aa0e 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -5,6 +5,87 @@
   text-transform: uppercase;
 }
 
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+
+.SelectedStudyList {
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  top: 30px;
+  left: 0px;
+  width: 100%;
+  height: 415px;
+  overflow: auto;
+  -webkit-animation: fadein 0.25s; /* Safari, Chrome and Opera > 12.1 */
+     -moz-animation: fadein 0.25s; /* Firefox < 16 */
+      -ms-animation: fadein 0.25s; /* Internet Explorer */
+       -o-animation: fadein 0.25s; /* Opera < 12.1 */
+          animation: fadein 0.25s;
+
+
+
+  ul.StudyList {
+    padding: 0 15px;
+  }
+
+  h4 {
+    margin: 15px;
+    padding: 0 5px 5px 5px;
+    font-weight: 400;
+    line-height: 26px;
+    border-bottom: 1px solid rgba(143, 189, 212, 0.42);
+  }
+
+  &:before {
+    content: '\f0d8';
+    color: #e8f1f8;
+    font-family: 'FontAwesome';
+    position: absolute;
+    top: -12px;
+    right: 15px;
+  }
+
+  .closeSelected {
+    color: #337ab7;
+    font-size: 14px;
+    font-weight: 500;
+    float: right;
+    display: inline-block;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
 ul.StudyList {
   padding: 0 0 0 15px;
 
@@ -90,56 +171,57 @@ ul.StudyList {
       }
     }
   }
+}
 
-  li.Study {
-    list-style-type: none;
-    padding: 2px 0;
-    display: flex;
-    justify-content: space-between;
-    font-size: 13px;
-    align-items: flex-start;
-
-    .StudyName {
-      color: #444;
-      max-width: 435px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
 
-    .StudySamples {
-      text-align: right;
-      margin-right: 5px;
-      display: inline-block;
-    }
 
-    .StudyMeta {
-      color: #999;
-      font-size: 12px;
+li.Study {
+  list-style-type: none;
+  padding: 2px 0;
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  align-items: flex-start;
 
-      .StudyLinks {
-        display: inline-block;
-        width: 40px;
+  .StudyName {
+    color: #444;
+    max-width: 435px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 
-        > span {
-          color: #ccc;
-          margin: 0 0 0 2px;
-          min-width: 15px;
-          display: inline-block;
-        }
+  .StudySamples {
+    text-align: right;
+    margin-right: 5px;
+    display: inline-block;
+  }
 
-        a {
-          color: #1982b8;
-          text-align: center;
+  .StudyMeta {
+    color: #999;
+    font-size: 12px;
 
-          span:global(.fa) {
-            margin: 0 5px 0 0;
-            min-width: 15px;
-          }
-        }
+    .StudyLinks {
+      display: inline-block;
+      width: 40px;
+
+      > span {
+        color: #ccc;
+        margin: 0 0 0 2px;
+        min-width: 15px;
+        display: inline-block;
       }
 
+      a {
+        color: #1982b8;
+        text-align: center;
+
+        span:global(.fa) {
+          margin: 0 5px 0 0;
+          min-width: 15px;
+        }
+      }
     }
-  }
-}
 
+  }
+}
\ No newline at end of file
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index f9e59fb53e9..39c01997c63 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -22,6 +22,7 @@ const styles = styles_any as {
 	selected: string,
 	selectAll: string,
 	selectedCount: string,
+	selectionsExist: string,
 	cancerStudyName: string,
 	cancerStudySamples: string,
 	matchingNodeText: string,
@@ -150,12 +151,27 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 		let allSelectedCheckboxProps = logic.getCheckboxProps(logic.rootCancerType);
 		let allSelected = allSelectedCheckboxProps.checked && !allSelectedCheckboxProps.indeterminate;
 
+		let selectedCountClass = classNames(
+			styles.selectedCount,
+			{
+				[styles.selectionsExist]: (this.store.selectedStudyIds.length > 0)
+			},
+		);
+
 		return (
-			<FlexCol className={styles.CancerStudySelector} style={this.props.style}>
+			<FlexCol overflow className={styles.CancerStudySelector}>
 				<FlexRow padded overflow className={styles.selectCancerStudyRow}>
 					<h2>Select Studies</h2>
-					<span className={styles.selectedCount}>
-						<b>{this.store.selectedStudyIds.length}</b> Studies Selected
+					<span 
+						onClick={() => {
+							if (this.store.selectedStudyIds.length) {
+								logic.hack_showAllSelected(!this.store.showingSelected);
+							}
+						}}
+						className={selectedCountClass}
+					>
+						<b> {this.store.selectedStudyIds.length}</b> Studies Selected
+						(<b>{this.store.totalSelectedSampleCount}</b> Samples)
 					</span>
 				</FlexRow>
 
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 9f325a86d8b..f70d0faeb9c 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -24,6 +24,7 @@ export class QueryStore
 	@observable.ref selectedStudyIds:ReadonlyArray<string> = [];
 	@observable.ref selectedProfileIds:ReadonlyArray<string> = [];
 	@observable zScoreThreshold:string = '2.0';
+	@observable.ref showingSelected:boolean;
 
 	@computed get selectedProfiles()
 	{
@@ -52,6 +53,7 @@ export class QueryStore
 		this.searchText;
 		this.selectedCancerTypeIds;
 		this.selectedStudyIds;
+		this.showingSelected;
 
 		return new StudyListLogic(this);
 	}
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 024207cb1e0..c9ff35124d6 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -18,7 +18,9 @@
 }
 
 .CancerStudySelector {
+  position: relative;
   width: 850px;
+  overflow: hidden;
   user-select: none;
   
   label {
@@ -55,6 +57,14 @@
     line-height: 30px;
     text-align: right;
     margin: 0 10px;
+
+    &.selectionsExist {
+      color: #337ab7;
+      text-decoration: underline;
+      &:hover {
+        cursor: pointer;
+      }
+    }
   }
 
   h3 {
@@ -92,7 +102,6 @@
     padding: 0px;
     margin: 0px;
     width: 230px;
-    max-height: 400px;
 
     li {
       cursor: pointer;

From 3072bc00ed8f1ec36661446e84f85f98c453b11a Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 10:57:38 -0500
Subject: [PATCH 017/133] Add two new components and clean up code

---
 src/shared/components/StudyList/StudyList.tsx |  9 +--
 .../components/StudyList/StudyListLogic.ts    |  9 +--
 .../components/query/CancerStudySelector.tsx  | 49 +++++++-------
 .../query/DataTypePrioritySelector.tsx        | 51 +++++++++++++++
 .../query/GeneticProfileSelector.tsx          |  4 ++
 .../query/PatientCaseSetSelector.tsx          | 39 +++++++++++
 .../components/query/QueryContainer.tsx       | 18 ++---
 src/shared/components/query/QueryStore.ts     | 65 +++++++++++++------
 .../components/query/styles.module.scss       |  8 +++
 9 files changed, 183 insertions(+), 69 deletions(-)
 create mode 100644 src/shared/components/query/DataTypePrioritySelector.tsx
 create mode 100644 src/shared/components/query/PatientCaseSetSelector.tsx

diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index 1c2a362ffc0..851ced28143 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -41,7 +41,7 @@ export default class StudyList extends React.Component<{}, {}>
 
 	render()
 	{
-		if (this.store.showingSelected) {
+		if (this.store.showSelectedStudiesOnly) {
 			return this.renderSelectedStudies();
 		} else {
 			return this.renderCancerType(this.logic.rootCancerType);
@@ -50,20 +50,17 @@ export default class StudyList extends React.Component<{}, {}>
 
 	renderSelectedStudies = () =>
 	{
-		let selectedStudies = this.store.selectedStudyIds.map(studyId => this.store.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
 		return (
 			<div className={styles.SelectedStudyList}>
 				<h4>
 						Selected Studies 
 						<span 
-							onClick={() => this.logic.hack_showAllSelected(!this.store.showingSelected)}
+							onClick={() => this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly}
 							className={styles.closeSelected}
 						>Return to Study Selector</span>
 				</h4>
 				<ul className={styles.StudyList}>
-					{selectedStudies.map((study, index) => {
-						return this.renderCancerStudy(study, index);
-					})}
+					{this.renderCancerType(this.logic.rootCancerType)}
 				</ul>
 			</div>
 		);
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 3ff5836c62c..a5d45dcae67 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -62,6 +62,8 @@ export default class StudyListLogic
 			if (meta.descendantStudies.length == 0)
 				return false;
 		}
+		if (this.store.showSelectedStudiesOnly && _.includes(this.store.selectedStudies, node as CancerStudy))
+			return false;
 		return true;
 	}
 
@@ -157,11 +159,6 @@ export default class StudyListLogic
 		));
 	}
 
-	@action hack_showAllSelected(checked:boolean)
-	{
-		this.store.showingSelected = checked;
-	}
-
 	@action hack_handleSelectAll(checked:boolean)
 	{
 		let selectedStudyIds = this.store.selectedStudyIds;
@@ -185,7 +182,7 @@ export default class StudyListLogic
 		this.handleCheckboxStudyIds(clickedStudyIds, checked);
 	}
 
-	 private handleCheckboxStudyIds(clickedStudyIds:string[], checked:boolean)
+	private handleCheckboxStudyIds(clickedStudyIds:string[], checked:boolean)
 	{
 		let selectedStudyIds = this.store.selectedStudyIds;
 		if (checked)
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 39c01997c63..3277c6529fd 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -164,9 +164,8 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 					<h2>Select Studies</h2>
 					<span 
 						onClick={() => {
-							if (this.store.selectedStudyIds.length) {
-								logic.hack_showAllSelected(!this.store.showingSelected);
-							}
+							if (this.store.selectedStudyIds.length)
+								this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly;
 						}}
 						className={selectedCountClass}
 					>
@@ -176,28 +175,28 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 				</FlexRow>
 
 				<FlexRow overflow className={styles.cancerStudySelectorHeader}>
-						<ReactSelect
-							className={styles.searchTextInput}
-							value={this.store.searchText}
-							autofocus={true}
-							options={searchTextOptions.map(str => ({label: str, value: str}))}
-							promptTextCreator={(label:string) => `Search for "${label}"`}
-							placeholder='Search...'
-							noResultsText={false}
-							onCloseResetsInput={false}
-							onInputChange={(searchText:string) => {
-								this.store.searchText = searchText;
-								this.store.selectedCancerTypeIds = [];
-							}}
-							onChange={(option:{value:string}) => {
-								this.store.searchText = option ? option.value || '' : '';
-								this.store.selectedCancerTypeIds = [];
-							}}
-						/>
-
-						<span className={styles.selectAll} onClick={() => logic.hack_handleSelectAll(!allSelected)}>
-							{allSelected ? "Deselect All" : "Select All"}
-						</span>
+					<ReactSelect
+						className={styles.searchTextInput}
+						value={this.store.searchText}
+						autofocus={true}
+						options={searchTextOptions.map(str => ({label: str, value: str}))}
+						promptTextCreator={(label:string) => `Search for "${label}"`}
+						placeholder='Search...'
+						noResultsText={false}
+						onCloseResetsInput={false}
+						onInputChange={(searchText:string) => {
+							this.store.searchText = searchText;
+							this.store.selectedCancerTypeIds = [];
+						}}
+						onChange={(option:{value:string}) => {
+							this.store.searchText = option ? option.value || '' : '';
+							this.store.selectedCancerTypeIds = [];
+						}}
+					/>
+
+					<span className={styles.selectAll} onClick={() => logic.hack_handleSelectAll(!allSelected)}>
+						{allSelected ? "Deselect All" : "Select All"}
+					</span>
 				</FlexRow>
 
 				<FlexRow className={styles.cancerStudySelectorBody}>
diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
new file mode 100644
index 00000000000..419428edb7b
--- /dev/null
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -0,0 +1,51 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import queryStore from "./QueryStore";
+import * as styles_any from './styles.module.scss';
+import {QueryStore} from "./QueryStore";
+import {toJS} from "../../../../node_modules/mobx/lib/mobx";
+import {observer} from "../../../../node_modules/mobx-react/index";
+import devMode from "../../lib/devMode";
+
+const styles = styles_any as {
+	DataTypePrioritySelector: string
+};
+
+@observer
+export default class DataTypePrioritySelector extends React.Component<{}, {}>
+{
+	get store()
+	{
+		return queryStore;
+	}
+
+	render()
+	{
+		if (!devMode.enabled)
+			return null;
+
+		const DataTypePriorityRadio = this.DataTypePriorityRadio;
+		return (
+			<div className={styles.DataTypePrioritySelector}>
+				<h2>Select Data Type Priority</h2>
+				<DataTypePriorityRadio label='Mutation and CNA' state={{mutation: true, cna: true}}/>
+				<DataTypePriorityRadio label='Only Mutation' state={{mutation: true, cna: false}}/>
+				<DataTypePriorityRadio label='Only CNA' state={{mutation: false, cna: true}}/>
+			</div>
+		);
+	}
+
+	DataTypePriorityRadio(props: {label: string, state:QueryStore['dataTypePriority']})
+	{
+		return (
+			<label>
+				<input
+					type="radio"
+					checked={_.isEqual(toJS(this.store.dataTypePriority), props.state)}
+					onClick={() => this.store.dataTypePriority = props.state}
+				/>
+				{props.label}
+			</label>
+		);
+	}
+}
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 3bff2046acf..354f9560595 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -8,6 +8,7 @@ import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/custom";
 import Dictionary = _.Dictionary;
+import devMode from "../../lib/devMode";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
@@ -43,6 +44,9 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 
 	render()
 	{
+		if (!devMode.enabled)
+			return null;
+
 		let profiles = queryStore.geneticProfiles.result.filter(profile => profile.showProfileInAnalysisTab);
 		let groupedProfiles:Dictionary<GeneticProfile[]|undefined> = _.groupBy(profiles, profile => profile.geneticAlterationType);
 
diff --git a/src/shared/components/query/PatientCaseSetSelector.tsx b/src/shared/components/query/PatientCaseSetSelector.tsx
new file mode 100644
index 00000000000..89590231ce9
--- /dev/null
+++ b/src/shared/components/query/PatientCaseSetSelector.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import queryStore from "./QueryStore";
+import * as styles_any from './styles.module.scss';
+import devMode from "../../lib/devMode";
+import ReactSelect from 'react-select';
+import {observer} from "../../../../node_modules/mobx-react/index";
+
+const styles = styles_any as {
+	PatientCaseSetSelector: string,
+	ReactSelect: string,
+};
+
+@observer
+export default class PatientCaseSetSelector extends React.Component<{}, {}>
+{
+	get store()
+	{
+		return queryStore;
+	}
+
+	render()
+	{
+		if (!devMode.enabled || !this.store.singleSelectedStudyId)
+			return null;
+
+		return (
+			<div className={styles.PatientCaseSetSelector}>
+				<h2>Select Patient/Case Set</h2>
+				<ReactSelect
+					className={styles.ReactSelect}
+					value={'value'}
+					options={[{label: 'label', value: 'value'}]}
+					onChange={(option:{value:string}) => this.store.patientCaseSet = option.value}
+				/>
+				<a href={`/study?id=${this.store.singleSelectedStudyId}`}>To build your own case set, try out our enhanced Study View.</a>
+			</div>
+		);
+	}
+}
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 5b292540a03..d93e5a19591 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -13,6 +13,8 @@ import GeneticProfileSelector from "./GeneticProfileSelector";
 import {observer} from "../../../../node_modules/mobx-react/custom";
 import queryStore from "./QueryStore";
 import devMode from "../../lib/devMode";
+import DataTypePrioritySelector from "./DataTypePrioritySelector";
+import PatientCaseSetSelector from "./PatientCaseSetSelector";
 
 const styles = styles_any as {
 	QueryContainer: string,
@@ -33,13 +35,10 @@ export default class QueryContainer extends React.Component<{}, {}>
             <FlexRow padded flex={1} className={styles.QueryContainer}>
 
 				<FlexCol padded overflow>
-
 					<CancerStudySelector/>
-
-					{!!(devMode.enabled && queryStore.geneticProfiles.isComplete && queryStore.geneticProfiles.result.length) && (
-						<GeneticProfileSelector/>
-					)}
-
+					<GeneticProfileSelector/>
+					<PatientCaseSetSelector/>
+					<DataTypePrioritySelector/>
 				</FlexCol>
 
 				{!!(devMode.enabled) && (
@@ -69,12 +68,7 @@ export default class QueryContainer extends React.Component<{}, {}>
 
 						{/* display state for demo */}
 						<pre>
-							{
-								JSON.stringify({
-									selectedCancerTypeIds: queryStore.selectedCancerTypeIds,
-									selectedStudyIds: queryStore.selectedStudyIds,
-								}, null, 4)
-							}
+							{JSON.stringify(queryStore.stateToSerialize, null, 4)}
 						</pre>
 					</FlexCol>
 				)}
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index f70d0faeb9c..7f090968828 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -9,33 +9,57 @@ import {remoteData} from "../../api/remoteData";
 // mobx observable
 export class QueryStore
 {
+	// query parameters
+	@observable searchText:string = '';
+	@observable.ref selectedStudyIds:ReadonlyArray<string> = [];
+	@observable.ref selectedProfileIds:ReadonlyArray<string> = [];
+	@observable zScoreThreshold:string = '2.0';
+	@observable dataTypePriority = {mutation: true, cna: true};
+	@observable patientCaseSet = 'TODO';
+
+	// visual options
+	@observable.ref searchTextPresets:ReadonlyArray<string> = ['lung', 'serous', 'tcga', 'tcga -provisional'];
+	@observable showSelectedStudiesOnly:boolean = false;
+	@observable.shallow selectedCancerTypeIds:string[] = [];
+	@observable maxTreeDepth:number = 9;
+	@observable clickAgainToDeselectSingle:boolean = true;
+
+	// remote data
 	readonly cancerTypes = remoteData(client.getAllCancerTypesUsingGET({}), []);
 	readonly cancerStudies = remoteData(client.getAllStudiesUsingGET({}), []);
 	readonly geneticProfiles = remoteData(() => {
-		let studyIds = this.selectedStudyIds;
-		if (studyIds && studyIds.length == 1)
-			return client.getAllGeneticProfilesInStudyUsingGET({studyId: studyIds[0]});
-		else
-			return Promise.resolve([]);
+		if (this.singleSelectedStudyId)
+			return client.getAllGeneticProfilesInStudyUsingGET({studyId: this.singleSelectedStudyId});
+		return Promise.resolve([]);
 	}, []);
 
-	@observable searchText:string = '';
-	@observable.ref searchTextPresets:ReadonlyArray<string> = ['lung', 'serous', 'tcga', 'tcga -provisional'];
-	@observable.ref selectedStudyIds:ReadonlyArray<string> = [];
-	@observable.ref selectedProfileIds:ReadonlyArray<string> = [];
-	@observable zScoreThreshold:string = '2.0';
-	@observable.ref showingSelected:boolean;
+	@computed get stateToSerialize()
+	{
+		let keys:Array<keyof this> = [
+			'searchText',
+			'selectedStudyIds',
+			'selectedProfileIds',
+			'zScoreThreshold',
+			'dataTypePriority',
+			'patientCaseSet',
+		];
+		return _.pick(this, keys);
+	}
 
-	@computed get selectedProfiles()
+	@computed get singleSelectedStudyId()
 	{
-		let idToProfile = expr(() => _.keyBy(this.geneticProfiles.result, profile => profile.geneticProfileId));
-		return this.selectedProfileIds.map(id => idToProfile[id]);
+		return this.selectedStudyIds.length == 1 ? this.selectedStudyIds[0] : undefined;
 	}
 
-	// experimental options
-	@observable.shallow selectedCancerTypeIds:string[] = [];
-	@observable maxTreeDepth:number = 9;
-	@observable clickAgainToDeselectSingle:boolean = true;
+	@computed get map_geneticProfileId_geneticProfile()
+	{
+		return _.keyBy(this.geneticProfiles.result, profile => profile.geneticProfileId);
+	}
+
+	@computed get selectedProfiles()
+	{
+		return this.selectedProfileIds.map(id => this.map_geneticProfileId_geneticProfile[id]);
+	}
 
 	@computed get treeData()
 	{
@@ -47,13 +71,14 @@ export class QueryStore
 
 	@computed get studyListLogic()
 	{
-		// hack - dependencies
+		// temporary hack - dependencies
+		// TODO review StudyListLogic code
 		this.treeData;
 		this.maxTreeDepth;
 		this.searchText;
 		this.selectedCancerTypeIds;
 		this.selectedStudyIds;
-		this.showingSelected;
+		this.showSelectedStudiesOnly;
 
 		return new StudyListLogic(this);
 	}
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index c9ff35124d6..446041dc4fb 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -181,3 +181,11 @@
   label.profileName {
   }
 }
+
+.DataTypePrioritySelector {
+}
+
+.PatientCaseSetSelector {
+  .ReactSelect {
+  }
+}

From 48b282f96d330b863cb29287827ea85591fbfb46 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 11:34:05 -0500
Subject: [PATCH 018/133] fix binding issue

---
 src/shared/components/query/DataTypePrioritySelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index 419428edb7b..67aa33de745 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -35,7 +35,7 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 		);
 	}
 
-	DataTypePriorityRadio(props: {label: string, state:QueryStore['dataTypePriority']})
+	DataTypePriorityRadio = (props: {label: string, state:QueryStore['dataTypePriority']}) =>
 	{
 		return (
 			<label>

From c5b40d02d636f3a961aef441692b4f5b6a9f2e6d Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 11:35:58 -0500
Subject: [PATCH 019/133] fix selected logic bug

---
 src/shared/components/StudyList/StudyListLogic.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index a5d45dcae67..3875f7cf85f 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -62,7 +62,7 @@ export default class StudyListLogic
 			if (meta.descendantStudies.length == 0)
 				return false;
 		}
-		if (this.store.showSelectedStudiesOnly && _.includes(this.store.selectedStudies, node as CancerStudy))
+		if (this.store.showSelectedStudiesOnly && !_.includes(this.store.selectedStudies, node as CancerStudy))
 			return false;
 		return true;
 	}

From bae6f272850ab2c70f85231479303903ec4b1a49 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 11:56:49 -0500
Subject: [PATCH 020/133] fix logic issue

---
 src/shared/components/StudyList/StudyListLogic.ts      | 4 ++++
 src/shared/components/query/GeneticProfileSelector.tsx | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 3875f7cf85f..90a52647146 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -61,7 +61,11 @@ export default class StudyListLogic
 			// ignore cancer types with no descendant studies
 			if (meta.descendantStudies.length == 0)
 				return false;
+
+			return true;
 		}
+
+		// cancer study
 		if (this.store.showSelectedStudiesOnly && !_.includes(this.store.selectedStudies, node as CancerStudy))
 			return false;
 		return true;
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 354f9560595..d1c82332bda 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -44,12 +44,12 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 
 	render()
 	{
-		if (!devMode.enabled)
-			return null;
-
 		let profiles = queryStore.geneticProfiles.result.filter(profile => profile.showProfileInAnalysisTab);
 		let groupedProfiles:Dictionary<GeneticProfile[]|undefined> = _.groupBy(profiles, profile => profile.geneticAlterationType);
 
+		if (!devMode.enabled || !profiles.length)
+			return null;
+
 		// puts default alteration types first
 		let altTypes = _.union(
 			defaultSelectedAlterationTypes,

From 4f85306e36702e6272e907e512693c5beb01f7e2 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 12:58:42 -0500
Subject: [PATCH 021/133] fix logic bugs

---
 src/pages/home/HomePage.tsx                   |  9 +++---
 src/shared/components/StudyList/StudyList.tsx |  8 ++++-
 .../components/StudyList/StudyListLogic.ts    |  2 +-
 .../query/DataTypePrioritySelector.tsx        |  2 +-
 .../query/GeneticProfileSelector.tsx          |  2 +-
 .../components/query/QueryContainer.tsx       | 32 +++++++++++++------
 .../components/query/styles.module.scss       | 11 +++++++
 7 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index ffe22ea93e0..5a6ee180428 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -6,6 +6,7 @@ import {FlexCol} from "../../shared/components/flexbox/FlexBox";
 import devMode from "../../shared/lib/devMode";
 import {observer} from "../../../node_modules/mobx-react/index";
 import DevTools from "../../../node_modules/mobx-react-devtools/index";
+import {toJS, observable, action, computed, whyRun, expr} from "../../../node_modules/mobx/lib/mobx";
 
 function getRootElement()
 {
@@ -25,7 +26,6 @@ interface IHomePageProps
 
 interface IHomePageState
 {
-	selectorVersion: 'old'|'new';
 }
 
 @observer
@@ -34,7 +34,6 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
     constructor(props:IHomePageProps)
     {
         super(props);
-        this.state = {selectorVersion: 'new'};
     }
 
     componentDidMount()
@@ -47,12 +46,14 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 		getRootElement().className = getRootElement().className.split(styles.rootHtml).join('');
 	}
 
+	@observable selectorVersion:'new'|'old' = 'new';
+
     public render()
     {
         return (
         	<FlexCol style={{height: '100%'}}>
-				{this.state.selectorVersion == 'new' ? <QueryContainer/> : <QueryContainerOld/>}
-				{devMode.enabled && <a style={{alignSelf: 'center'}} onClick={() => this.setState({ selectorVersion: this.state.selectorVersion == 'new' ? 'old' : 'new' })}>Switch to {this.state.selectorVersion == 'new' ? 'old' : 'new'} view</a>}
+				{this.selectorVersion == 'new' ? <QueryContainer/> : <QueryContainerOld/>}
+				{/*devMode.enabled && <a style={{alignSelf: 'center'}} onClick={() => this.selectorVersion = this.selectorVersion == 'new' ? 'old' : 'new' }>Switch to {this.selectorVersion == 'new' ? 'old' : 'new'} view</a>*/}
 				{devMode.enabled && <DevTools/>}
 			</FlexCol>
 		);
diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index 851ced28143..c3ae4bd7891 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -66,8 +66,14 @@ export default class StudyList extends React.Component<{}, {}>
 		);
 	}
 
-	renderCancerType = (cancerType:CancerType, arrayIndex:number = 0):JSX.Element =>
+	renderCancerType = (cancerType:CancerType, arrayIndex:number = 0):JSX.Element | null =>
 	{
+		// BEGIN TEMP HACK
+		let descendantStudies = this.logic.getDescendantCancerStudies(cancerType);
+		if (!descendantStudies.length)
+			return null;
+		// END TEMP HACK
+
 		let currentLevel = this.logic.getDepth(cancerType);
 		let childCancerTypes = this.logic.getChildCancerTypes(cancerType);
 		let childStudies = this.logic.getChildCancerStudies(cancerType);
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 90a52647146..5737130ced4 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -48,7 +48,7 @@ export default class StudyListLogic
 		if (meta.isCancerType)
 		{
 			// ignore cancer types excluded by selection
-			if (this.store.selectedCancerTypeIds.length)
+			if (!this.store.showSelectedStudiesOnly && this.store.selectedCancerTypeIds.length)
 			{
 				let idToCancerType = (cancerTypeId:string) => this.store.treeData.map_cancerTypeId_cancerType.get(cancerTypeId) as CancerType;
 				let selectedCancerTypes = this.store.selectedCancerTypeIds.map(idToCancerType);
diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index 67aa33de745..21d02bf4803 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -21,7 +21,7 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 
 	render()
 	{
-		if (!devMode.enabled)
+		if (!devMode.enabled || this.store.singleSelectedStudyId)
 			return null;
 
 		const DataTypePriorityRadio = this.DataTypePriorityRadio;
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index d1c82332bda..f21210ac86b 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -47,7 +47,7 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 		let profiles = queryStore.geneticProfiles.result.filter(profile => profile.showProfileInAnalysisTab);
 		let groupedProfiles:Dictionary<GeneticProfile[]|undefined> = _.groupBy(profiles, profile => profile.geneticAlterationType);
 
-		if (!devMode.enabled || !profiles.length)
+		if (!profiles.length)
 			return null;
 
 		// puts default alteration types first
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index d93e5a19591..1b097acd1da 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -24,11 +24,16 @@ const styles = styles_any as {
 @observer
 export default class QueryContainer extends React.Component<{}, {}>
 {
+	get store()
+	{
+		return queryStore;
+	}
+
     render():JSX.Element
     {
-        if (queryStore.cancerTypes.isPending || queryStore.cancerStudies.isPending)
+        if (this.store.cancerTypes.isPending || this.store.cancerStudies.isPending)
             return <Spinner/>;
-        if (!queryStore.cancerTypes.result || !queryStore.cancerStudies.result)
+        if (!this.store.cancerTypes.result.length || !this.store.cancerStudies.result.length)
             return <span>No data</span>;
 
         return (
@@ -36,19 +41,28 @@ export default class QueryContainer extends React.Component<{}, {}>
 
 				<FlexCol padded overflow>
 					<CancerStudySelector/>
-					<GeneticProfileSelector/>
-					<PatientCaseSetSelector/>
-					<DataTypePrioritySelector/>
+
+					{!!(devMode.enabled && this.store.singleSelectedStudyId) && (
+						<GeneticProfileSelector/>
+					)}
+
+					{!!(devMode.enabled && this.store.singleSelectedStudyId) && (
+						<PatientCaseSetSelector/>
+					)}
+
+					{!!(devMode.enabled && !this.store.singleSelectedStudyId) && (
+						<DataTypePrioritySelector/>
+					)}
 				</FlexCol>
 
 				{!!(devMode.enabled) && (
 					<FlexCol padded overflow>
 						{/* demo controls */}
 						<FlexCol padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
-							<StateToggle label='Click tree node again to deselect' target={queryStore} name='clickAgainToDeselectSingle' defaultValue={queryStore.clickAgainToDeselectSingle}/>
+							<StateToggle label='Click tree node again to deselect' target={this.store} name='clickAgainToDeselectSingle' defaultValue={queryStore.clickAgainToDeselectSingle}/>
 							<Select
 								label="Tree depth: "
-								selected={queryStore.maxTreeDepth}
+								selected={this.store.maxTreeDepth}
 								options={[
 									{label: "0"},
 									{label: "1"},
@@ -61,14 +75,14 @@ export default class QueryContainer extends React.Component<{}, {}>
 									{label: "8"},
 									{label: "9"},
 								]}
-								onChange={option => queryStore.maxTreeDepth = parseInt(option.label)}
+								onChange={option => this.store.maxTreeDepth = parseInt(option.label)}
 							/>
 							<span>Note: Use cmd+click to select/deselect multiple cancer types.</span>
 						</FlexCol>
 
 						{/* display state for demo */}
 						<pre>
-							{JSON.stringify(queryStore.stateToSerialize, null, 4)}
+							{JSON.stringify(this.store.stateToSerialize, null, 4)}
 						</pre>
 					</FlexCol>
 				)}
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 446041dc4fb..8a9461ff1c2 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -163,6 +163,10 @@
 }
 
 .GeneticProfileSelector {
+  border: 1px solid rgba(0,0,0,0.05);
+  border-radius: 2px;
+  padding: 5px;
+
   div.singleCheckbox, div.groupCheckbox {
     margin-left: 20px;
     label {
@@ -183,9 +187,16 @@
 }
 
 .DataTypePrioritySelector {
+  border: 1px solid rgba(0,0,0,0.05);
+  border-radius: 2px;
+  padding: 5px;
 }
 
 .PatientCaseSetSelector {
+  border: 1px solid rgba(0,0,0,0.05);
+  border-radius: 2px;
+  padding: 5px;
+
   .ReactSelect {
   }
 }

From 4d106e5a07c1d034f18acd3ea595eff1a10661b9 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 13:04:17 -0500
Subject: [PATCH 022/133] fix radio button bugs

---
 src/shared/components/query/DataTypePrioritySelector.tsx | 9 ++++++---
 src/shared/components/query/GeneticProfileSelector.tsx   | 1 -
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index 21d02bf4803..d3998e81a62 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -35,17 +35,20 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 		);
 	}
 
-	DataTypePriorityRadio = (props: {label: string, state:QueryStore['dataTypePriority']}) =>
+	DataTypePriorityRadio = observer((props: {label: string, state:QueryStore['dataTypePriority']}) =>
 	{
 		return (
 			<label>
 				<input
 					type="radio"
 					checked={_.isEqual(toJS(this.store.dataTypePriority), props.state)}
-					onClick={() => this.store.dataTypePriority = props.state}
+					onChange={event => {
+						if ((event.target as HTMLInputElement).checked)
+							this.store.dataTypePriority = props.state
+					}}
 				/>
 				{props.label}
 			</label>
 		);
-	}
+	});
 }
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index f21210ac86b..271b5e9a3f0 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -122,7 +122,6 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 								<input
 									type='radio'
 									checked={_.includes(this.selectedProfileIds, profile.geneticProfileId)}
-									style={{userSelect: 'text'}}
 									onChange={event => {
 										if ((event.target as HTMLInputElement).checked)
 											queryStore.selectedProfileIds = (

From b11cc93dd32b72660d8c3869cb3048ffdbb4dbb0 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 13:25:36 -0500
Subject: [PATCH 023/133] fix styling issues, add gene set selector

---
 .../query/DataTypePrioritySelector.tsx        |  3 +-
 .../components/query/GeneSetSelector.tsx      | 46 +++++++++++++++++++
 .../query/GeneticProfileSelector.tsx          | 31 +++++++------
 .../query/PatientCaseSetSelector.tsx          |  3 +-
 .../components/query/QueryContainer.tsx       |  5 ++
 src/shared/components/query/QueryStore.ts     |  2 +
 .../components/query/styles.module.scss       | 29 +++++++++---
 7 files changed, 95 insertions(+), 24 deletions(-)
 create mode 100644 src/shared/components/query/GeneSetSelector.tsx

diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index d3998e81a62..3689852c728 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -5,7 +5,6 @@ import * as styles_any from './styles.module.scss';
 import {QueryStore} from "./QueryStore";
 import {toJS} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/index";
-import devMode from "../../lib/devMode";
 
 const styles = styles_any as {
 	DataTypePrioritySelector: string
@@ -21,7 +20,7 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 
 	render()
 	{
-		if (!devMode.enabled || this.store.singleSelectedStudyId)
+		if (this.store.singleSelectedStudyId)
 			return null;
 
 		const DataTypePriorityRadio = this.DataTypePriorityRadio;
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
new file mode 100644
index 00000000000..774b5e4bd51
--- /dev/null
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import queryStore from "./QueryStore";
+import * as styles_any from './styles.module.scss';
+import ReactSelect from 'react-select';
+import {observer} from "../../../../node_modules/mobx-react/index";
+import {FlexRow, FlexCol} from "../flexbox/FlexBox";
+
+const styles = styles_any as {
+	GeneSetSelector: string,
+	ReactSelect: string,
+};
+
+@observer
+export default class GeneSetSelector extends React.Component<{}, {}>
+{
+	get store()
+	{
+		return queryStore;
+	}
+
+	render()
+	{
+		return (
+			<FlexCol padded className={styles.GeneSetSelector}>
+				<h2>Enter Gene Set</h2>
+				<a href='/onco_query_lang_desc.jsp'>Advanced: Onco Query Language (OQL)</a>
+				<ReactSelect
+					className={styles.ReactSelect}
+					value={'value'}
+					options={[{label: 'label', value: 'value'}]}
+					onChange={(option:{value:string}) => this.store.patientCaseSet = option.value}
+				/>
+				<FlexRow padded>
+					<button>Select from Recurrently Mutated Genes (MutSig)</button>
+					<button>Select Genes from Recurrent CNAs (Gistic)</button>
+				</FlexRow>
+				<input
+					type='text'
+					onChange={event => {
+						this.store.geneSet = (event.target as HTMLInputElement).value;
+					}}
+				/>
+			</FlexCol>
+		);
+	}
+}
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 271b5e9a3f0..139ef42464d 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -8,7 +8,6 @@ import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/custom";
 import Dictionary = _.Dictionary;
-import devMode from "../../lib/devMode";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
@@ -32,22 +31,27 @@ export const geneticAlterationTypeGroupLabels:{[K in GeneticProfile['geneticAlte
 @observer
 export default class GeneticProfileSelector extends React.Component<{}, {}>
 {
+	get store()
+	{
+		return queryStore;
+	}
+
 	@computed get selectedProfileIds()
 	{
-		if (queryStore.selectedProfileIds.length)
-			return queryStore.selectedProfileIds;
+		if (this.store.selectedProfileIds.length)
+			return this.store.selectedProfileIds;
 
-		return queryStore.geneticProfiles.result
+		return this.store.geneticProfiles.result
 			.filter(profile => _.includes(defaultSelectedAlterationTypes, profile.geneticAlterationType))
 			.map(profile => profile.geneticProfileId);
 	}
 
 	render()
 	{
-		let profiles = queryStore.geneticProfiles.result.filter(profile => profile.showProfileInAnalysisTab);
+		let profiles = this.store.geneticProfiles.result.filter(profile => profile.showProfileInAnalysisTab);
 		let groupedProfiles:Dictionary<GeneticProfile[]|undefined> = _.groupBy(profiles, profile => profile.geneticAlterationType);
 
-		if (!profiles.length)
+		if (!this.store.singleSelectedStudyId || !profiles.length)
 			return null;
 
 		// puts default alteration types first
@@ -89,13 +93,12 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 		}
 
 		output.push(
-			<div className={profiles.length > 1 ? styles.groupCheckbox : styles.singleCheckbox}>
+			<div key={output.length} className={profiles.length > 1 ? styles.groupCheckbox : styles.singleCheckbox}>
 				<LabeledCheckbox
-					key={output.length}
 					checked={checked}
 					inputProps={{
 						onChange: event => {
-							queryStore.selectedProfileIds = (
+							this.store.selectedProfileIds = (
 								(event.target as HTMLInputElement).checked
 								?   _.union(this.selectedProfileIds, [ids[0]])
 								:   _.difference(this.selectedProfileIds, ids)
@@ -115,7 +118,7 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 		if (profiles.length > 1)
 		{
 			output.push(
-				<div className={styles.radioGroup}>
+				<div key={output.length} className={styles.radioGroup}>
 					{profiles.map(profile => (
 						<div className={styles.radioItem}>
 							<label>
@@ -124,7 +127,7 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 									checked={_.includes(this.selectedProfileIds, profile.geneticProfileId)}
 									onChange={event => {
 										if ((event.target as HTMLInputElement).checked)
-											queryStore.selectedProfileIds = (
+											this.store.selectedProfileIds = (
 												_.union(
 													_.difference(this.selectedProfileIds, ids),
 													[profile.geneticProfileId]
@@ -144,13 +147,13 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 		if (firstProfile.datatype == DATATYPE_ZSCORE && checked)
 		{
 			output.push(
-				<div className={styles.zScore} key={output.length}>
+				<div key={output.length} className={styles.zScore}>
 					Enter a z-score threshold ±:
 					<input
 						type="text"
-						value={queryStore.zScoreThreshold}
+						value={this.store.zScoreThreshold}
 						onChange={event => {
-							queryStore.zScoreThreshold = (event.target as HTMLInputElement).value;
+							this.store.zScoreThreshold = (event.target as HTMLInputElement).value;
 						}}
 					/>
 				</div>
diff --git a/src/shared/components/query/PatientCaseSetSelector.tsx b/src/shared/components/query/PatientCaseSetSelector.tsx
index 89590231ce9..38700c80e2f 100644
--- a/src/shared/components/query/PatientCaseSetSelector.tsx
+++ b/src/shared/components/query/PatientCaseSetSelector.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
-import devMode from "../../lib/devMode";
 import ReactSelect from 'react-select';
 import {observer} from "../../../../node_modules/mobx-react/index";
 
@@ -20,7 +19,7 @@ export default class PatientCaseSetSelector extends React.Component<{}, {}>
 
 	render()
 	{
-		if (!devMode.enabled || !this.store.singleSelectedStudyId)
+		if (!this.store.singleSelectedStudyId)
 			return null;
 
 		return (
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 1b097acd1da..7b459152d22 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -15,6 +15,7 @@ import queryStore from "./QueryStore";
 import devMode from "../../lib/devMode";
 import DataTypePrioritySelector from "./DataTypePrioritySelector";
 import PatientCaseSetSelector from "./PatientCaseSetSelector";
+import GeneSetSelector from "./GeneSetSelector";
 
 const styles = styles_any as {
 	QueryContainer: string,
@@ -53,6 +54,10 @@ export default class QueryContainer extends React.Component<{}, {}>
 					{!!(devMode.enabled && !this.store.singleSelectedStudyId) && (
 						<DataTypePrioritySelector/>
 					)}
+
+					{!!(devMode.enabled) && (
+						<GeneSetSelector/>
+					)}
 				</FlexCol>
 
 				{!!(devMode.enabled) && (
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 7f090968828..8edbd68ac00 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -16,6 +16,7 @@ export class QueryStore
 	@observable zScoreThreshold:string = '2.0';
 	@observable dataTypePriority = {mutation: true, cna: true};
 	@observable patientCaseSet = 'TODO';
+	@observable geneSet = 'TODO';
 
 	// visual options
 	@observable.ref searchTextPresets:ReadonlyArray<string> = ['lung', 'serous', 'tcga', 'tcga -provisional'];
@@ -42,6 +43,7 @@ export class QueryStore
 			'zScoreThreshold',
 			'dataTypePriority',
 			'patientCaseSet',
+			'geneSet',
 		];
 		return _.pick(this, keys);
 	}
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 8a9461ff1c2..5501edc2e6f 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -163,8 +163,8 @@
 }
 
 .GeneticProfileSelector {
-  border: 1px solid rgba(0,0,0,0.05);
-  border-radius: 2px;
+  border: 1px solid rgba(0,0,0,0.5);
+  border-radius: 5px;
   padding: 5px;
 
   div.singleCheckbox, div.groupCheckbox {
@@ -187,16 +187,33 @@
 }
 
 .DataTypePrioritySelector {
-  border: 1px solid rgba(0,0,0,0.05);
-  border-radius: 2px;
+  border: 1px solid rgba(0,0,0,0.5);
+  border-radius: 5px;
   padding: 5px;
 }
 
 .PatientCaseSetSelector {
-  border: 1px solid rgba(0,0,0,0.05);
-  border-radius: 2px;
+  border: 1px solid rgba(0,0,0,0.5);
+  border-radius: 5px;
   padding: 5px;
 
   .ReactSelect {
   }
 }
+
+.GeneSetSelector {
+  border: 1px solid rgba(0,0,0,0.5);
+  border-radius: 5px;
+  padding: 5px;
+
+  .ReactSelect {
+  }
+
+  button {
+  }
+
+  input.geneSet {
+    width: 775px;
+    height: 135px;
+  }
+}

From 3be9c8957eec6a3c55840126dc83567b9a72af15 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 13:38:08 -0500
Subject: [PATCH 024/133] styling

---
 .../components/query/styles.module.scss       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 5501edc2e6f..cb55c454175 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -163,9 +163,9 @@
 }
 
 .GeneticProfileSelector {
-  border: 1px solid rgba(0,0,0,0.5);
-  border-radius: 5px;
-  padding: 5px;
+  border: 1px solid rgb(170, 170, 170);
+  border-radius: 10px;
+  padding: 10px;
 
   div.singleCheckbox, div.groupCheckbox {
     margin-left: 20px;
@@ -187,24 +187,24 @@
 }
 
 .DataTypePrioritySelector {
-  border: 1px solid rgba(0,0,0,0.5);
-  border-radius: 5px;
-  padding: 5px;
+  border: 1px solid rgb(170, 170, 170);
+  border-radius: 10px;
+  padding: 10px;
 }
 
 .PatientCaseSetSelector {
-  border: 1px solid rgba(0,0,0,0.5);
-  border-radius: 5px;
-  padding: 5px;
+  border: 1px solid rgb(170, 170, 170);
+  border-radius: 10px;
+  padding: 10px;
 
   .ReactSelect {
   }
 }
 
 .GeneSetSelector {
-  border: 1px solid rgba(0,0,0,0.5);
-  border-radius: 5px;
-  padding: 5px;
+  border: 1px solid rgb(170, 170, 170);
+  border-radius: 10px;
+  padding: 10px;
 
   .ReactSelect {
   }

From 14cd3e9eefc066cf446d886cf89b8576964e5431 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 13:53:25 -0500
Subject: [PATCH 025/133] cancer types w/ selected studies now appear bold

---
 src/shared/components/StudyList/StudyListLogic.ts   | 6 ++++++
 src/shared/components/query/CancerStudySelector.tsx | 4 +++-
 src/shared/components/query/styles.module.scss      | 8 ++++++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 5737130ced4..4517b01a259 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -99,6 +99,12 @@ export default class StudyListLogic
 		}
 	});
 
+	cancerTypeContainsSelectedStudies(cancerType:CancerType):boolean
+	{
+		let descendantStudies = this.getMetadata(cancerType).descendantStudies;
+		return _.intersection(this.store.selectedStudies, descendantStudies).length > 0;
+	}
+
 	getChildCancerTypes(cancerType:CancerType):CancerType[]
 	{
 		let meta = this.getMetadata(cancerType);
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 3277c6529fd..ac960502005 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -27,6 +27,7 @@ const styles = styles_any as {
 	cancerStudySamples: string,
 	matchingNodeText: string,
 	nonMatchingNodeText: string,
+	containsSelectedStudies: string,
 	selectCancerStudyHeader: string,
 	selectCancerStudyRow: string,
 	searchTextInput: string,
@@ -90,7 +91,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 		if (!numStudies)
 			return null;
 
-		let selected = meta.isCancerType && _.includes(this.store.selectedCancerTypeIds, cancerType.cancerTypeId);
+		let selected = _.includes(this.store.selectedCancerTypeIds, cancerType.cancerTypeId);
 		let highlighted = this.store.studyListLogic.isHighlighted(cancerType);
 		let liClassName = classNames(
 			styles.cancerTypeListItem,
@@ -99,6 +100,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 				[styles.selected]: selected,
 				[styles.matchingNodeText]: !!this.store.searchText && highlighted,
 				[styles.nonMatchingNodeText]: !!this.store.searchText && !highlighted,
+				[styles.containsSelectedStudies]: this.store.studyListLogic.cancerTypeContainsSelectedStudies(cancerType),
 			},
 		);
 
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index cb55c454175..521e8df1dc0 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -143,11 +143,15 @@
   }
 
   .matchingNodeText {
-    font-weight: bold;
+    font-style: italic;
   }
 
   .nonMatchingNodeText {
-    font-weight: normal;
+    font-style: normal;
+  }
+
+  .containsSelectedStudies {
+    font-weight: bold;
   }
 
   .searchTextInput {

From 017b047d3385bedf93b4db3df84a69c834259c83 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 15:39:51 -0500
Subject: [PATCH 026/133] add funcitonality to SampleListSelector and
 GeneSetSelector

---
 .../components/query/GeneSetSelector.tsx      | 23 +++--
 .../components/query/QueryContainer.tsx       |  4 +-
 src/shared/components/query/QueryStore.ts     | 15 ++--
 ...SetSelector.tsx => SampleListSelector.tsx} | 83 ++++++++++---------
 .../query/{gene_lists.json => gene_lists.ts}  |  6 +-
 .../components/query/styles.module.scss       |  4 +-
 6 files changed, 78 insertions(+), 57 deletions(-)
 rename src/shared/components/query/{PatientCaseSetSelector.tsx => SampleListSelector.tsx} (57%)
 rename src/shared/components/query/{gene_lists.json => gene_lists.ts} (98%)

diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 774b5e4bd51..ecec986e4ad 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -4,10 +4,12 @@ import * as styles_any from './styles.module.scss';
 import ReactSelect from 'react-select';
 import {observer} from "../../../../node_modules/mobx-react/index";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
+import gene_lists from './gene_lists';
 
 const styles = styles_any as {
 	GeneSetSelector: string,
 	ReactSelect: string,
+	geneSet: string,
 };
 
 @observer
@@ -20,24 +22,31 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 
 	render()
 	{
+		let options = gene_lists.map(item => ({label: item.id, value: item.genes.join(' ')}));
+
 		return (
-			<FlexCol padded className={styles.GeneSetSelector}>
+			<FlexCol padded overflow className={styles.GeneSetSelector}>
 				<h2>Enter Gene Set</h2>
 				<a href='/onco_query_lang_desc.jsp'>Advanced: Onco Query Language (OQL)</a>
 				<ReactSelect
 					className={styles.ReactSelect}
-					value={'value'}
-					options={[{label: 'label', value: 'value'}]}
-					onChange={(option:{value:string}) => this.store.patientCaseSet = option.value}
+					value={this.store.geneSet}
+					options={options}
+					onChange={(option:{value:string}) => this.store.geneSet = option.value}
 				/>
 				<FlexRow padded>
 					<button>Select from Recurrently Mutated Genes (MutSig)</button>
 					<button>Select Genes from Recurrent CNAs (Gistic)</button>
 				</FlexRow>
-				<input
-					type='text'
+				<textarea
+					className={styles.geneSet}
+					rows={5}
+					cols={80}
+					placeholder="Enter HUGO Gene Symbols or Gene Aliases"
+					title="Enter HUGO Gene Symbols or Gene Aliases"
+					value={this.store.geneSet}
 					onChange={event => {
-						this.store.geneSet = (event.target as HTMLInputElement).value;
+						this.store.geneSet = (event.target as HTMLTextAreaElement).value;
 					}}
 				/>
 			</FlexCol>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 7b459152d22..3ce4620d0a3 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -14,8 +14,8 @@ import {observer} from "../../../../node_modules/mobx-react/custom";
 import queryStore from "./QueryStore";
 import devMode from "../../lib/devMode";
 import DataTypePrioritySelector from "./DataTypePrioritySelector";
-import PatientCaseSetSelector from "./PatientCaseSetSelector";
 import GeneSetSelector from "./GeneSetSelector";
+import SampleListSelector from "./SampleListSelector";
 
 const styles = styles_any as {
 	QueryContainer: string,
@@ -48,7 +48,7 @@ export default class QueryContainer extends React.Component<{}, {}>
 					)}
 
 					{!!(devMode.enabled && this.store.singleSelectedStudyId) && (
-						<PatientCaseSetSelector/>
+						<SampleListSelector/>
 					)}
 
 					{!!(devMode.enabled && !this.store.singleSelectedStudyId) && (
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 8edbd68ac00..9584a901860 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -12,11 +12,11 @@ export class QueryStore
 	// query parameters
 	@observable searchText:string = '';
 	@observable.ref selectedStudyIds:ReadonlyArray<string> = [];
+	@observable dataTypePriority = {mutation: true, cna: true};
 	@observable.ref selectedProfileIds:ReadonlyArray<string> = [];
 	@observable zScoreThreshold:string = '2.0';
-	@observable dataTypePriority = {mutation: true, cna: true};
-	@observable patientCaseSet = 'TODO';
-	@observable geneSet = 'TODO';
+	@observable selectedSampleListId = '';
+	@observable geneSet = '';
 
 	// visual options
 	@observable.ref searchTextPresets:ReadonlyArray<string> = ['lung', 'serous', 'tcga', 'tcga -provisional'];
@@ -33,16 +33,21 @@ export class QueryStore
 			return client.getAllGeneticProfilesInStudyUsingGET({studyId: this.singleSelectedStudyId});
 		return Promise.resolve([]);
 	}, []);
+	readonly sampleLists = remoteData(() => {
+		if (this.singleSelectedStudyId)
+			return client.getAllSampleListsInStudyUsingGET({studyId: this.singleSelectedStudyId});
+		return Promise.resolve([]);
+	}, []);
 
 	@computed get stateToSerialize()
 	{
 		let keys:Array<keyof this> = [
 			'searchText',
 			'selectedStudyIds',
+			'dataTypePriority',
 			'selectedProfileIds',
 			'zScoreThreshold',
-			'dataTypePriority',
-			'patientCaseSet',
+			'selectedSampleListId',
 			'geneSet',
 		];
 		return _.pick(this, keys);
diff --git a/src/shared/components/query/PatientCaseSetSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
similarity index 57%
rename from src/shared/components/query/PatientCaseSetSelector.tsx
rename to src/shared/components/query/SampleListSelector.tsx
index 38700c80e2f..72724c6c711 100644
--- a/src/shared/components/query/PatientCaseSetSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -1,38 +1,45 @@
-import * as React from 'react';
-import queryStore from "./QueryStore";
-import * as styles_any from './styles.module.scss';
-import ReactSelect from 'react-select';
-import {observer} from "../../../../node_modules/mobx-react/index";
-
-const styles = styles_any as {
-	PatientCaseSetSelector: string,
-	ReactSelect: string,
-};
-
-@observer
-export default class PatientCaseSetSelector extends React.Component<{}, {}>
-{
-	get store()
-	{
-		return queryStore;
-	}
-
-	render()
-	{
-		if (!this.store.singleSelectedStudyId)
-			return null;
-
-		return (
-			<div className={styles.PatientCaseSetSelector}>
-				<h2>Select Patient/Case Set</h2>
-				<ReactSelect
-					className={styles.ReactSelect}
-					value={'value'}
-					options={[{label: 'label', value: 'value'}]}
-					onChange={(option:{value:string}) => this.store.patientCaseSet = option.value}
-				/>
-				<a href={`/study?id=${this.store.singleSelectedStudyId}`}>To build your own case set, try out our enhanced Study View.</a>
-			</div>
-		);
-	}
-}
+import * as React from 'react';
+import queryStore from "./QueryStore";
+import * as styles_any from './styles.module.scss';
+import ReactSelect from 'react-select';
+import {observer} from "../../../../node_modules/mobx-react/index";
+
+const styles = styles_any as {
+	SampleListSelector: string,
+	ReactSelect: string,
+};
+
+@observer
+export default class SampleListSelector extends React.Component<{}, {}>
+{
+	get store()
+	{
+		return queryStore;
+	}
+
+	render()
+	{
+		if (!this.store.singleSelectedStudyId)
+			return null;
+
+		let options = this.store.sampleLists.result.map(sampleList => {
+			return {
+				label: `${sampleList.name} ({sampleList.count})`,
+				value: sampleList.sampleListId
+			};
+		});
+
+		return (
+			<div className={styles.SampleListSelector}>
+				<h2>Select Patient/Case Set</h2>
+				<ReactSelect
+					className={styles.ReactSelect}
+					value={this.store.selectedSampleListId}
+					options={options}
+					onChange={(option:{value:string}) => this.store.selectedSampleListId = option.value}
+				/>
+				<a href={`/study?id=${this.store.singleSelectedStudyId}`}>To build your own case set, try out our enhanced Study View.</a>
+			</div>
+		);
+	}
+}
diff --git a/src/shared/components/query/gene_lists.json b/src/shared/components/query/gene_lists.ts
similarity index 98%
rename from src/shared/components/query/gene_lists.json
rename to src/shared/components/query/gene_lists.ts
index e8281c760d9..2343cb3bcec 100644
--- a/src/shared/components/query/gene_lists.json
+++ b/src/shared/components/query/gene_lists.ts
@@ -1,4 +1,4 @@
-[{
+const gene_lists = [{
 	"id": "Prostate Cancer: AR Signaling",
 	"genes": ["SOX9", "RAN", "TNK2", "EP300", "PXN", "NCOA2", "AR", "NRIP1", "NCOR1", "NCOR2"]
 }, {
@@ -67,4 +67,6 @@
 }, {
 	"id": "General: Invasion and metastasis",
 	"genes": ["MMP1", "MMP2", "MMP3", "MMP7", "MMP9", "MMP10", "MMP11", "MMP12", "MMP13", "MMP14", "MMP15", "MMP16", "MMP17", "MMP19", "MMP21", "MMP23B", "MMP24", "MMP25", "MMP26", "MMP27", "MMP28", "ITGB3", "ITGAV", "PTK2", "CDH1", "SPARC", "WFDC2"]
-}]
\ No newline at end of file
+}];
+
+export default gene_lists;
\ No newline at end of file
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 521e8df1dc0..c9ac61105ae 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -196,7 +196,7 @@
   padding: 10px;
 }
 
-.PatientCaseSetSelector {
+.SampleListSelector {
   border: 1px solid rgb(170, 170, 170);
   border-radius: 10px;
   padding: 10px;
@@ -217,7 +217,5 @@
   }
 
   input.geneSet {
-    width: 775px;
-    height: 135px;
   }
 }

From fb7d35e3ba89057ff2c5d5f0a603a9f9aa23328a Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 15:56:59 -0500
Subject: [PATCH 027/133] sorting sample lists

---
 src/shared/components/query/QueryStore.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 9584a901860..b913e41092a 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import client from "../../api/cbioportalClientInstance";
 import {toJS, observable, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
-import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy} from "../../api/CBioPortalAPI";
+import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList} from "../../api/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
@@ -33,9 +33,10 @@ export class QueryStore
 			return client.getAllGeneticProfilesInStudyUsingGET({studyId: this.singleSelectedStudyId});
 		return Promise.resolve([]);
 	}, []);
-	readonly sampleLists = remoteData(() => {
+	readonly sampleLists = remoteData<SampleList[]>(() => {
 		if (this.singleSelectedStudyId)
-			return client.getAllSampleListsInStudyUsingGET({studyId: this.singleSelectedStudyId});
+			return client.getAllSampleListsInStudyUsingGET({studyId: this.singleSelectedStudyId})
+				.then(sampleLists => _.sortBy<SampleList>(sampleLists, sampleList => sampleList.name));
 		return Promise.resolve([]);
 	}, []);
 

From 6718b8bb4ae9462e131d57a7d00b64a7c834fdf7 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 16:30:28 -0500
Subject: [PATCH 028/133] interface for custom case ids

---
 src/shared/components/query/QueryStore.ts     | 35 ++++++++-------
 .../components/query/SampleListSelector.tsx   | 43 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index b913e41092a..9511993e464 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -9,6 +9,22 @@ import {remoteData} from "../../api/remoteData";
 // mobx observable
 export class QueryStore
 {
+	@computed get stateToSerialize()
+	{
+		let keys:Array<keyof this> = [
+			'searchText',
+			'selectedStudyIds',
+			'dataTypePriority',
+			'selectedProfileIds',
+			'zScoreThreshold',
+			'selectedSampleListId',
+			'caseIds',
+			'caseIdsMode',
+			'geneSet',
+		];
+		return _.pick(this, keys);
+	}
+
 	// query parameters
 	@observable searchText:string = '';
 	@observable.ref selectedStudyIds:ReadonlyArray<string> = [];
@@ -16,6 +32,8 @@ export class QueryStore
 	@observable.ref selectedProfileIds:ReadonlyArray<string> = [];
 	@observable zScoreThreshold:string = '2.0';
 	@observable selectedSampleListId = '';
+	@observable caseIds = '';
+	@observable caseIdsMode:'sample'|'patient' = 'sample';
 	@observable geneSet = '';
 
 	// visual options
@@ -28,7 +46,7 @@ export class QueryStore
 	// remote data
 	readonly cancerTypes = remoteData(client.getAllCancerTypesUsingGET({}), []);
 	readonly cancerStudies = remoteData(client.getAllStudiesUsingGET({}), []);
-	readonly geneticProfiles = remoteData(() => {
+	readonly geneticProfiles = remoteData<GeneticProfile[]>(() => {
 		if (this.singleSelectedStudyId)
 			return client.getAllGeneticProfilesInStudyUsingGET({studyId: this.singleSelectedStudyId});
 		return Promise.resolve([]);
@@ -39,20 +57,7 @@ export class QueryStore
 				.then(sampleLists => _.sortBy<SampleList>(sampleLists, sampleList => sampleList.name));
 		return Promise.resolve([]);
 	}, []);
-
-	@computed get stateToSerialize()
-	{
-		let keys:Array<keyof this> = [
-			'searchText',
-			'selectedStudyIds',
-			'dataTypePriority',
-			'selectedProfileIds',
-			'zScoreThreshold',
-			'selectedSampleListId',
-			'geneSet',
-		];
-		return _.pick(this, keys);
-	}
+	//TODO select last sampleList when new list arrives
 
 	@computed get singleSelectedStudyId()
 	{
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index 72724c6c711..e28b30636c8 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -3,6 +3,8 @@ import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
 import ReactSelect from 'react-select';
 import {observer} from "../../../../node_modules/mobx-react/index";
+import {FlexCol} from "../flexbox/FlexBox";
+import {QueryStore} from "./QueryStore";
 
 const styles = styles_any as {
 	SampleListSelector: string,
@@ -27,7 +29,12 @@ export default class SampleListSelector extends React.Component<{}, {}>
 				label: `${sampleList.name} ({sampleList.count})`,
 				value: sampleList.sampleListId
 			};
-		});
+		}).concat([{
+			label: 'User-defined Case List',
+			value: ''
+		}]);
+
+		const CaseIdsModeRadio = this.CaseIdsModeRadio;
 
 		return (
 			<div className={styles.SampleListSelector}>
@@ -39,7 +46,41 @@ export default class SampleListSelector extends React.Component<{}, {}>
 					onChange={(option:{value:string}) => this.store.selectedSampleListId = option.value}
 				/>
 				<a href={`/study?id=${this.store.singleSelectedStudyId}`}>To build your own case set, try out our enhanced Study View.</a>
+
+				{!!(!this.store.selectedSampleListId) && (
+					<FlexCol>
+						<span>Enter case IDs below:</span>
+						<textarea
+							title="Enter case IDs"
+							rows={6}
+							cols={80}
+							value={this.store.caseIds}
+							onChange={event => {
+								this.store.caseIds = (event.target as HTMLTextAreaElement).value;
+							}}
+						/>
+						<CaseIdsModeRadio label='By sample ID' state='sample'/>
+						<CaseIdsModeRadio label='By patient ID' state='patient'/>
+					</FlexCol>
+				)}
 			</div>
 		);
 	}
+
+	CaseIdsModeRadio = observer((props: {label: string, state:QueryStore['caseIdsMode']}) =>
+	{
+		return (
+			<label>
+				<input
+					type="radio"
+					checked={this.store.caseIdsMode == props.state}
+					onChange={event => {
+						if ((event.target as HTMLInputElement).checked)
+							this.store.caseIdsMode = props.state
+					}}
+				/>
+				{props.label}
+			</label>
+		);
+	});
 }

From 2e29ed8f631380593f925336203936827013b149 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Feb 2017 17:05:50 -0500
Subject: [PATCH 029/133] Using new SampleList.sampleCount field

---
 src/shared/components/query/QueryStore.ts          | 10 ++++++++--
 src/shared/components/query/SampleListSelector.tsx |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 9511993e464..60a1b8359a4 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -53,8 +53,14 @@ export class QueryStore
 	}, []);
 	readonly sampleLists = remoteData<SampleList[]>(() => {
 		if (this.singleSelectedStudyId)
-			return client.getAllSampleListsInStudyUsingGET({studyId: this.singleSelectedStudyId})
-				.then(sampleLists => _.sortBy<SampleList>(sampleLists, sampleList => sampleList.name));
+			return (
+				client.getAllSampleListsInStudyUsingGET({
+					studyId: this.singleSelectedStudyId,
+					projection: 'DETAILED'
+				}).then(
+					sampleLists => _.sortBy(sampleLists, sampleList => sampleList.name)
+				)
+			);
 		return Promise.resolve([]);
 	}, []);
 	//TODO select last sampleList when new list arrives
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index e28b30636c8..fcb11a876b5 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -26,7 +26,7 @@ export default class SampleListSelector extends React.Component<{}, {}>
 
 		let options = this.store.sampleLists.result.map(sampleList => {
 			return {
-				label: `${sampleList.name} ({sampleList.count})`,
+				label: `${sampleList.name} (${sampleList.sampleCount})`,
 				value: sampleList.sampleListId
 			};
 		}).concat([{

From 528c2711be772767704457acdb7c81a8d54ca9df Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 7 Feb 2017 12:35:32 -0500
Subject: [PATCH 030/133] implement priority studies

---
 .../components/query/CancerStudyTreeData.ts   | 71 ++++++++++++-------
 .../query/DataTypePrioritySelector.tsx        |  7 +-
 .../components/query/GeneSetSelector.tsx      | 14 +++-
 .../query/GeneticProfileSelector.tsx          | 31 +++-----
 src/shared/components/query/QueryStore.ts     | 50 +++++++++++--
 .../components/query/SampleListSelector.tsx   |  2 +-
 .../components/query/styles.module.scss       |  3 +
 7 files changed, 122 insertions(+), 56 deletions(-)

diff --git a/src/shared/components/query/CancerStudyTreeData.ts b/src/shared/components/query/CancerStudyTreeData.ts
index f964a2c3c83..21d97d2719a 100644
--- a/src/shared/components/query/CancerStudyTreeData.ts
+++ b/src/shared/components/query/CancerStudyTreeData.ts
@@ -1,5 +1,6 @@
 import {CancerStudy, TypeOfCancer as CancerType} from "../../api/CBioPortalAPI";
 import * as _ from 'lodash';
+import {PriorityStudies} from "./QueryStore";
 
 export const CANCER_TYPE_ROOT = 'tissue';
 
@@ -34,23 +35,43 @@ export default class CancerStudyTreeData
 	map_cancerTypeId_cancerType = new Map<string, CancerType>();
 	map_studyId_cancerStudy = new Map<string, CancerStudy>();
 
-	constructor({cancerTypes = [], studies = []}: {cancerTypes: CancerType[], studies: CancerStudy[]})
+	constructor({cancerTypes = [], studies = [], priorityStudies = {}}: {cancerTypes: CancerType[], studies: CancerStudy[], priorityStudies?:PriorityStudies})
 	{
-		cancerTypes = [this.rootCancerType].concat(cancerTypes);
-
 		let nodes:CancerTreeNode[];
 		let node:CancerTreeNode;
 		let meta:NodeMetadata;
 
+		// sort by name
+		cancerTypes = CancerStudyTreeData.sortNodes(cancerTypes);
+		studies = CancerStudyTreeData.sortNodes(studies);
+
+		let priorityCategories:CancerType[] = [];
+		for (let name in priorityStudies)
+		{
+			priorityCategories.push({
+				clinicalTrialKeywords: '',
+				dedicatedColor: '',
+				name,
+				parent: CANCER_TYPE_ROOT,
+				shortName: name,
+				cancerTypeId: name
+			});
+		}
+		cancerTypes = priorityCategories.concat(this.rootCancerType, cancerTypes);
+
 		// initialize lookups and metadata entries
 		for (nodes of [cancerTypes, studies])
 		{
 			for (node of nodes)
 			{
 				if (nodes == cancerTypes)
+				{
 					this.map_cancerTypeId_cancerType.set(node.cancerTypeId, node as CancerType);
+				}
 				else
+				{
 					this.map_studyId_cancerStudy.set((node as CancerStudy).studyId, node as CancerStudy);
+				}
 
 				this.map_node_meta.set(node, {
 					isCancerType: nodes == cancerTypes,
@@ -64,6 +85,21 @@ export default class CancerStudyTreeData
 			}
 		}
 
+		// fill in childStudies for priorityCategories using existing CancerStudy objects
+		for (let category of priorityCategories)
+		{
+			meta = this.map_node_meta.get(category) as NodeMetadata;
+			for (let studyId of priorityStudies[category.cancerTypeId])
+			{
+				let study = this.map_studyId_cancerStudy.get(studyId);
+				if (study)
+				{
+					meta.childStudies.push(study);
+					meta.descendantStudies.push(study);
+				}
+			}
+		}
+
 		// fill in metadata values
 		for (nodes of [cancerTypes, studies])
 		{
@@ -99,29 +135,16 @@ export default class CancerStudyTreeData
 			}
 		}
 
-		// final pass
-		for (nodes of [cancerTypes, studies])
+		// get sibling studies
+		for (node of studies)
 		{
-			for (node of nodes)
+			meta = this.map_node_meta.get(node) as NodeMetadata;
+			// firstLevelAncestor is the ancestor below the rootCancerType
+			let firstLevelAncestor = meta.ancestors[meta.ancestors.length - 2];
+			if (firstLevelAncestor)
 			{
-				meta = this.map_node_meta.get(node) as NodeMetadata;
-
-				// sort related node lists (except ancestors)
-				meta.descendantCancerTypes = CancerStudyTreeData.sortNodes(meta.descendantCancerTypes);
-				meta.descendantStudies = CancerStudyTreeData.sortNodes(meta.descendantStudies);
-				meta.childCancerTypes = CancerStudyTreeData.sortNodes(meta.childCancerTypes);
-				meta.childStudies = CancerStudyTreeData.sortNodes(meta.childStudies);
-
-				// get sibling studies
-				if (!meta.isCancerType)
-				{
-					let firstLevelAncestor = meta.ancestors[meta.ancestors.length - 2];
-					if (firstLevelAncestor)
-					{
-						let ancestorMeta = this.map_node_meta.get(firstLevelAncestor) as NodeMetadata;
-						meta.siblings = ancestorMeta.descendantStudies;
-					}
-				}
+				let ancestorMeta = this.map_node_meta.get(firstLevelAncestor) as NodeMetadata;
+				meta.siblings = ancestorMeta.descendantStudies;
 			}
 		}
 	}
diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index 3689852c728..dd65f291f00 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -5,6 +5,7 @@ import * as styles_any from './styles.module.scss';
 import {QueryStore} from "./QueryStore";
 import {toJS} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/index";
+import {FlexRow} from "../flexbox/FlexBox";
 
 const styles = styles_any as {
 	DataTypePrioritySelector: string
@@ -25,12 +26,12 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 
 		const DataTypePriorityRadio = this.DataTypePriorityRadio;
 		return (
-			<div className={styles.DataTypePrioritySelector}>
-				<h2>Select Data Type Priority</h2>
+			<FlexRow padded className={styles.DataTypePrioritySelector}>
+				<h2>Select Data Type Priority:</h2>
 				<DataTypePriorityRadio label='Mutation and CNA' state={{mutation: true, cna: true}}/>
 				<DataTypePriorityRadio label='Only Mutation' state={{mutation: true, cna: false}}/>
 				<DataTypePriorityRadio label='Only CNA' state={{mutation: false, cna: true}}/>
-			</div>
+			</FlexRow>
 		);
 	}
 
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index ecec986e4ad..0526bcf5ca0 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -22,11 +22,18 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 
 	render()
 	{
-		let options = gene_lists.map(item => ({label: item.id, value: item.genes.join(' ')}));
+		let options = gene_lists.map(item => ({
+			label: `${item.id} (${item.genes.length} genes)`,
+			value: item.genes.join(' ')
+		}));
+		options = [{
+			label: 'User-defined List',
+			value: ''
+		}].concat(options);
 
 		return (
 			<FlexCol padded overflow className={styles.GeneSetSelector}>
-				<h2>Enter Gene Set</h2>
+				<h2>Enter Gene Set:</h2>
 				<a href='/onco_query_lang_desc.jsp'>Advanced: Onco Query Language (OQL)</a>
 				<ReactSelect
 					className={styles.ReactSelect}
@@ -34,10 +41,13 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 					options={options}
 					onChange={(option:{value:string}) => this.store.geneSet = option.value}
 				/>
+
+				{/*TODO when do these buttons show/hide?*/}
 				<FlexRow padded>
 					<button>Select from Recurrently Mutated Genes (MutSig)</button>
 					<button>Select Genes from Recurrent CNAs (Gistic)</button>
 				</FlexRow>
+
 				<textarea
 					className={styles.geneSet}
 					rows={5}
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 139ef42464d..20f826dd8bb 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -8,6 +8,7 @@ import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/custom";
 import Dictionary = _.Dictionary;
+import {defaultSelectedAlterationTypes} from "./QueryStore";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
@@ -20,10 +21,6 @@ const styles = styles_any as {
 };
 
 export const DATATYPE_ZSCORE = 'Z-SCORE';
-export const defaultSelectedAlterationTypes:GeneticProfile['geneticAlterationType'][] = [
-	'MUTATION_EXTENDED',
-	'COPY_NUMBER_ALTERATION'
-];
 export const geneticAlterationTypeGroupLabels:{[K in GeneticProfile['geneticAlterationType']]?: string} = {
 	"MRNA_EXPRESSION": "mRNA Expression data",
 };
@@ -36,16 +33,6 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 		return queryStore;
 	}
 
-	@computed get selectedProfileIds()
-	{
-		if (this.store.selectedProfileIds.length)
-			return this.store.selectedProfileIds;
-
-		return this.store.geneticProfiles.result
-			.filter(profile => _.includes(defaultSelectedAlterationTypes, profile.geneticAlterationType))
-			.map(profile => profile.geneticProfileId);
-	}
-
 	render()
 	{
 		let profiles = this.store.geneticProfiles.result.filter(profile => profile.showProfileInAnalysisTab);
@@ -62,7 +49,7 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 
 		return (
 			<div className={styles.GeneticProfileSelector}>
-				<h2>Select Genomic Profiles</h2>
+				<h2>Select Genomic Profiles:</h2>
 				{this.renderCheckboxes(altTypes.map(altType => groupedProfiles[altType] || []))}
 			</div>
 		);
@@ -84,7 +71,7 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 		let firstProfile = profiles[0];
 		let altType = firstProfile.geneticAlterationType;
 		let ids = profiles.map(profile => profile.geneticProfileId);
-		let checked = _.intersection(this.selectedProfileIds, ids).length > 0;
+		let checked = _.intersection(this.store.selectedProfileIds, ids).length > 0;
 		let label = firstProfile.name;
 		if (profiles.length > 1)
 		{
@@ -100,8 +87,8 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 						onChange: event => {
 							this.store.selectedProfileIds = (
 								(event.target as HTMLInputElement).checked
-								?   _.union(this.selectedProfileIds, [ids[0]])
-								:   _.difference(this.selectedProfileIds, ids)
+								?   _.union(this.store.selectedProfileIds, [ids[0]])
+								:   _.difference(this.store.selectedProfileIds, ids)
 							);
 						}
 					}}
@@ -119,17 +106,17 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 		{
 			output.push(
 				<div key={output.length} className={styles.radioGroup}>
-					{profiles.map(profile => (
-						<div className={styles.radioItem}>
+					{profiles.map((profile, profileIndex) => (
+						<div key={profileIndex} className={styles.radioItem}>
 							<label>
 								<input
 									type='radio'
-									checked={_.includes(this.selectedProfileIds, profile.geneticProfileId)}
+									checked={_.includes(this.store.selectedProfileIds, profile.geneticProfileId)}
 									onChange={event => {
 										if ((event.target as HTMLInputElement).checked)
 											this.store.selectedProfileIds = (
 												_.union(
-													_.difference(this.selectedProfileIds, ids),
+													_.difference(this.store.selectedProfileIds, ids),
 													[profile.geneticProfileId]
 												)
 											);
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 60a1b8359a4..d1b4bbe70b6 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,14 +1,41 @@
 import * as _ from 'lodash';
 import client from "../../api/cbioportalClientInstance";
-import {toJS, observable, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
+import {toJS, observable, reaction, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
 import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList} from "../../api/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
+import {labelMobxPromises} from "../../api/MobxPromise";
+
+export type PriorityStudies = {
+	[category:string]: string[]
+};
+export const defaultSelectedAlterationTypes:GeneticProfile['geneticAlterationType'][] = [
+	'MUTATION_EXTENDED',
+	'COPY_NUMBER_ALTERATION'
+];
 
 // mobx observable
 export class QueryStore
 {
+	constructor()
+	{
+ 		labelMobxPromises(this);
+		reaction(
+			() => this.geneticProfiles.result,
+			profiles => {
+				let selectedProfileIds = [];
+				for (let profile of profiles)
+					if (_.includes(defaultSelectedAlterationTypes, profile.geneticAlterationType))
+						selectedProfileIds.push(profile.geneticProfileId);
+				this.selectedProfileIds = selectedProfileIds;
+			},
+			{
+				name: "Select default Genetic Profile IDs"
+			}
+		);
+	}
+
 	@computed get stateToSerialize()
 	{
 		let keys:Array<keyof this> = [
@@ -37,7 +64,21 @@ export class QueryStore
 	@observable geneSet = '';
 
 	// visual options
-	@observable.ref searchTextPresets:ReadonlyArray<string> = ['lung', 'serous', 'tcga', 'tcga -provisional'];
+	@observable.ref searchTextPresets:ReadonlyArray<string> = [
+		'tcga',
+		'tcga -provisional',
+		'tcga -moratorium',
+		'tcga OR icgc',
+		'-"cell line"',
+		'prostate mskcc',
+		'esophageal OR stomach',
+		'serous',
+		'breast',
+	];
+	@observable priorityStudies:PriorityStudies = {
+		'Shared institutional Data Sets': ['mskimpact', 'cellline_mskcc'],
+		'Priority Studies': ['blca_tcga_pub', 'coadread_tcga_pub', 'brca_tcga_pub2015'], // for demo
+	};
 	@observable showSelectedStudiesOnly:boolean = false;
 	@observable.shallow selectedCancerTypeIds:string[] = [];
 	@observable maxTreeDepth:number = 9;
@@ -63,7 +104,7 @@ export class QueryStore
 			);
 		return Promise.resolve([]);
 	}, []);
-	//TODO select last sampleList when new list arrives
+	//TODO What is the default selected sampleList logic? depends on what profiles are selected?
 
 	@computed get singleSelectedStudyId()
 	{
@@ -84,7 +125,8 @@ export class QueryStore
 	{
 		return new CancerStudyTreeData({
 			cancerTypes: this.cancerTypes.result,
-			studies: this.cancerStudies.result
+			studies: this.cancerStudies.result,
+			priorityStudies: this.priorityStudies,
 		});
 	}
 
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index fcb11a876b5..76b814f6067 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -38,7 +38,7 @@ export default class SampleListSelector extends React.Component<{}, {}>
 
 		return (
 			<div className={styles.SampleListSelector}>
-				<h2>Select Patient/Case Set</h2>
+				<h2>Select Patient/Case Set:</h2>
 				<ReactSelect
 					className={styles.ReactSelect}
 					value={this.store.selectedSampleListId}
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index c9ac61105ae..4c420b7e202 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -194,6 +194,9 @@
   border: 1px solid rgb(170, 170, 170);
   border-radius: 10px;
   padding: 10px;
+  h2 {
+    flex-grow: 0;
+  }
 }
 
 .SampleListSelector {

From 7193c782999ca55688aa9aaea29583d973902215 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 9 Feb 2017 17:12:14 -0500
Subject: [PATCH 031/133] Add default selection logic for genetic profiles and
 sample list, add mutsig/gistic button show/hide logic

---
 .../components/query/CancerStudySelector.tsx  |   2 +-
 .../components/query/GeneSetSelector.tsx      |   9 +-
 .../query/GeneticProfileSelector.tsx          | 112 +-------
 src/shared/components/query/QueryStore.ts     | 254 ++++++++++++++----
 4 files changed, 218 insertions(+), 159 deletions(-)

diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index ac960502005..3816b32bdb2 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -172,7 +172,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 						className={selectedCountClass}
 					>
 						<b> {this.store.selectedStudyIds.length}</b> Studies Selected
-						(<b>{this.store.totalSelectedSampleCount}</b> Samples)
+						(<b>{this.store.selectedStudies_totalSampleCount}</b> Samples)
 					</span>
 				</FlexRow>
 
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 0526bcf5ca0..398045d4322 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -42,10 +42,13 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 					onChange={(option:{value:string}) => this.store.geneSet = option.value}
 				/>
 
-				{/*TODO when do these buttons show/hide?*/}
 				<FlexRow padded>
-					<button>Select from Recurrently Mutated Genes (MutSig)</button>
-					<button>Select Genes from Recurrent CNAs (Gistic)</button>
+					{!!(this.store.mutSigForSingleStudy.result.length) && (
+						<button>Select from Recurrently Mutated Genes (MutSig)</button>
+					)}
+					{!!(this.store.gisticForSingleStudy.result.length) && (
+						<button>Select Genes from Recurrent CNAs (Gistic)</button>
+					)}
 				</FlexRow>
 
 				<textarea
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 20f826dd8bb..a79383582dd 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -7,7 +7,6 @@ import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/custom";
-import Dictionary = _.Dictionary;
 import {defaultSelectedAlterationTypes} from "./QueryStore";
 
 const styles = styles_any as {
@@ -35,34 +34,25 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 
 	render()
 	{
-		let profiles = this.store.geneticProfiles.result.filter(profile => profile.showProfileInAnalysisTab);
-		let groupedProfiles:Dictionary<GeneticProfile[]|undefined> = _.groupBy(profiles, profile => profile.geneticAlterationType);
-
-		if (!this.store.singleSelectedStudyId || !profiles.length)
+		if (!this.store.singleSelectedStudyId
+			|| !this.store.geneticProfiles.isComplete
+			|| !this.store.geneticProfiles.result.length)
+		{
 			return null;
+		}
 
-		// puts default alteration types first
-		let altTypes = _.union(
-			defaultSelectedAlterationTypes,
-			Object.keys(groupedProfiles).sort()
-		);
+		let checkboxes:JSX.Element[] = [];
+		for (let profiles of this.store.geneticProfilesGroupedByType)
+			this.renderGroup(profiles, checkboxes);
 
 		return (
 			<div className={styles.GeneticProfileSelector}>
 				<h2>Select Genomic Profiles:</h2>
-				{this.renderCheckboxes(altTypes.map(altType => groupedProfiles[altType] || []))}
+				{checkboxes}
 			</div>
 		);
 	}
 
-	renderCheckboxes(groupedProfiles:GeneticProfile[][])
-	{
-		let output:JSX.Element[] = [];
-		for (let profiles of groupedProfiles)
-			this.renderGroup(profiles, output);
-		return output;
-	}
-
 	renderGroup(profiles:GeneticProfile[], output:JSX.Element[])
 	{
 		if (!profiles.length)
@@ -148,87 +138,3 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 		}
 	}
 }
-
-let sample_profiles:Partial<GeneticProfile>[] = [
-  {
-    "geneticAlterationType": "METHYLATION",
-    "datatype": "CONTINUOUS",
-    "name": "Methylation (HM450)",
-    "description": "Methylation (HM450) beta-values for genes in 194 cases. For genes with multiple methylation probes, the probe most anti-correlated with expression.",
-    "showProfileInAnalysisTab": false,
-    "geneticProfileId": "laml_tcga_methylation_hm450",
-    "studyId": "laml_tcga"
-  },
-  {
-    "geneticAlterationType": "METHYLATION",
-    "datatype": "CONTINUOUS",
-    "name": "Methylation (HM27)",
-    "description": "Methylation (HM27) beta-values for genes in 194 cases. For genes with multiple methylation probes, the probe most anti-correlated with expression.",
-    "showProfileInAnalysisTab": false,
-    "geneticProfileId": "laml_tcga_methylation_hm27",
-    "studyId": "laml_tcga"
-  },
-  {
-    "geneticAlterationType": "COPY_NUMBER_ALTERATION",
-    "datatype": "CONTINUOUS",
-    "name": "Relative linear copy-number values",
-    "description": "Relative linear copy-number values for each gene (from Affymetrix SNP6).",
-    "showProfileInAnalysisTab": false,
-    "geneticProfileId": "laml_tcga_linear_CNA",
-    "studyId": "laml_tcga"
-  },
-  {
-    "geneticAlterationType": "MRNA_EXPRESSION",
-    "datatype": "Z-SCORE",
-    "name": "mRNA Expression z-Scores (RNA Seq V2 RSEM)",
-    "description": "mRNA z-Scores (RNA Seq V2 RSEM) compared to the expression distribution of each gene tumors that are diploid for this gene.",
-    "showProfileInAnalysisTab": true,
-    "geneticProfileId": "laml_tcga_rna_seq_v2_mrna_median_Zscores",
-    "studyId": "laml_tcga"
-  },
-  {
-    "geneticAlterationType": "MRNA_EXPRESSION",
-    "datatype": "CONTINUOUS",
-    "name": "mRNA expression (RNA Seq RPKM)",
-    "description": "Expression levels for 20443 genes in 179 aml cases (RNA Seq RPKM).",
-    "showProfileInAnalysisTab": false,
-    "geneticProfileId": "laml_tcga_rna_seq_mrna",
-    "studyId": "laml_tcga"
-  },
-  {
-    "geneticAlterationType": "MRNA_EXPRESSION",
-    "datatype": "CONTINUOUS",
-    "name": "mRNA expression (RNA Seq V2 RSEM)",
-    "description": "Expression levels for 20532 genes in 173 aml cases (RNA Seq V2 RSEM).",
-    "showProfileInAnalysisTab": false,
-    "geneticProfileId": "laml_tcga_rna_seq_v2_mrna",
-    "studyId": "laml_tcga"
-  },
-  {
-    "geneticAlterationType": "MRNA_EXPRESSION",
-    "datatype": "Z-SCORE",
-    "name": "mRNA Expression z-Scores (RNA Seq RPKM)",
-    "description": "mRNA z-Scores (RNA Seq RPKM) compared to the expression distribution of each gene tumors that are diploid for this gene.",
-    "showProfileInAnalysisTab": true,
-    "geneticProfileId": "laml_tcga_rna_seq_mrna_median_Zscores",
-    "studyId": "laml_tcga"
-  },
-  {
-    "geneticAlterationType": "COPY_NUMBER_ALTERATION",
-    "datatype": "DISCRETE",
-    "name": "Putative copy-number alterations from GISTIC",
-    "description": "Putative copy-number calls on 191 cases determined using GISTIC 2.0. Values: -2 = homozygous deletion; -1 = hemizygous deletion; 0 = neutral / no change; 1 = gain; 2 = high level amplification.",
-    "showProfileInAnalysisTab": true,
-    "geneticProfileId": "laml_tcga_gistic",
-    "studyId": "laml_tcga"
-  },
-  {
-    "geneticAlterationType": "MUTATION_EXTENDED",
-    "datatype": "MAF",
-    "name": "Mutations",
-    "description": "Mutation data from whole exome sequencing.",
-    "showProfileInAnalysisTab": true,
-    "geneticProfileId": "laml_tcga_mutations",
-    "studyId": "laml_tcga"
-  }
-];
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index d1b4bbe70b6..0246160e4a6 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -6,13 +6,15 @@ import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
 import {labelMobxPromises} from "../../api/MobxPromise";
+import internalClient from "../../api/cbioportalInternalClientInstance";
+import {MutSig, Gistic} from "../../api/CBioPortalAPIInternal";
 
 export type PriorityStudies = {
 	[category:string]: string[]
 };
 export const defaultSelectedAlterationTypes:GeneticProfile['geneticAlterationType'][] = [
 	'MUTATION_EXTENDED',
-	'COPY_NUMBER_ALTERATION'
+	'COPY_NUMBER_ALTERATION',
 ];
 
 // mobx observable
@@ -20,20 +22,7 @@ export class QueryStore
 {
 	constructor()
 	{
- 		labelMobxPromises(this);
-		reaction(
-			() => this.geneticProfiles.result,
-			profiles => {
-				let selectedProfileIds = [];
-				for (let profile of profiles)
-					if (_.includes(defaultSelectedAlterationTypes, profile.geneticAlterationType))
-						selectedProfileIds.push(profile.geneticProfileId);
-				this.selectedProfileIds = selectedProfileIds;
-			},
-			{
-				name: "Select default Genetic Profile IDs"
-			}
-		);
+		labelMobxPromises(this);
 	}
 
 	@computed get stateToSerialize()
@@ -52,18 +41,108 @@ export class QueryStore
 		return _.pick(this, keys);
 	}
 
-	// query parameters
+	////////////////////////////////////////////////////////////////////////////////
+	// QUERY PARAMETERS
+	////////////////////////////////////////////////////////////////////////////////
+
 	@observable searchText:string = '';
+
 	@observable.ref selectedStudyIds:ReadonlyArray<string> = [];
+
 	@observable dataTypePriority = {mutation: true, cna: true};
-	@observable.ref selectedProfileIds:ReadonlyArray<string> = [];
+
+	// genetic profile ids
+	@observable.ref private _selectedProfileIds?:ReadonlyArray<string> = undefined; // user selection
+	@computed get selectedProfileIds():ReadonlyArray<string>
+	{
+		if (this._selectedProfileIds !== undefined)
+			return this._selectedProfileIds;
+
+		// compute default selection
+		let ids = [];
+		for (let profiles of this.geneticProfilesGroupedByType)
+			if (_.includes(defaultSelectedAlterationTypes, profiles[0].geneticAlterationType))
+				ids.push(profiles[0].geneticProfileId);
+		return ids;
+	}
+	set selectedProfileIds(value:ReadonlyArray<string>)
+	{
+		this._selectedProfileIds = value;
+	}
+
 	@observable zScoreThreshold:string = '2.0';
-	@observable selectedSampleListId = '';
+
+	// sample list id
+	@observable private _selectedSampleListId?:string = undefined; // user selection
+	@computed get selectedSampleListId()
+	{
+		if (this._selectedSampleListId !== undefined)
+			return this._selectedSampleListId;
+
+		// compute default selection
+		let studyId = this.singleSelectedStudyId;
+		if (!studyId)
+			return undefined;
+
+		let mutSelect = this.isGeneticAlterationTypeSelected('MUTATION_EXTENDED');
+		let cnaSelect = this.isGeneticAlterationTypeSelected('COPY_NUMBER_ALTERATION');
+		let expSelect = this.isGeneticAlterationTypeSelected('MRNA_EXPRESSION');
+		let rppaSelect = this.isGeneticAlterationTypeSelected('PROTEIN_LEVEL');
+		let sampleListId = studyId + "_all";
+
+		if (mutSelect && cnaSelect && !expSelect && !rppaSelect)
+			sampleListId = studyId + "_cnaseq";
+		else if (mutSelect && !cnaSelect && !expSelect && !rppaSelect)
+			sampleListId = studyId + "_sequenced";
+		else if (!mutSelect && cnaSelect && !expSelect && !rppaSelect)
+			sampleListId = studyId + "_acgh";
+		else if (!mutSelect && !cnaSelect && expSelect && !rppaSelect)
+		{
+			if (this.isProfileSelected(studyId + '_mrna_median_Zscores'))
+				sampleListId = studyId + "_mrna";
+			else if (this.isProfileSelected(studyId + '_rna_seq_mrna_median_Zscores'))
+				sampleListId = studyId + "_rna_seq_mrna";
+			else if (this.isProfileSelected(studyId + '_rna_seq_v2_mrna_median_Zscores'))
+				sampleListId = studyId + "_rna_seq_v2_mrna";
+		}
+		else if ((mutSelect || cnaSelect) && expSelect && !rppaSelect)
+			sampleListId = studyId + "_3way_complete";
+		else if (!mutSelect && !cnaSelect && !expSelect && rppaSelect)
+			sampleListId = studyId + "_rppa";
+
+		// BEGIN HACK if not found
+		if (!this.dict_sampleListId_sampleList[sampleListId])
+		{
+			if (sampleListId === studyId + '_cnaseq')
+				sampleListId = studyId + '_cna_seq';
+			else if (sampleListId === studyId + "_3way_complete")
+				sampleListId = studyId + "_complete";
+
+		}
+		// END HACK
+
+		// if still not found
+		if (!this.dict_sampleListId_sampleList[sampleListId])
+			sampleListId = studyId + '_all';
+
+		return sampleListId;
+	}
+	set selectedSampleListId(value)
+	{
+		this._selectedSampleListId = value;
+	}
+
 	@observable caseIds = '';
+
 	@observable caseIdsMode:'sample'|'patient' = 'sample';
+
 	@observable geneSet = '';
 
-	// visual options
+
+	////////////////////////////////////////////////////////////////////////////////
+	// VISUAL OPTIONS
+	////////////////////////////////////////////////////////////////////////////////
+
 	@observable.ref searchTextPresets:ReadonlyArray<string> = [
 		'tcga',
 		'tcga -provisional',
@@ -84,42 +163,66 @@ export class QueryStore
 	@observable maxTreeDepth:number = 9;
 	@observable clickAgainToDeselectSingle:boolean = true;
 
-	// remote data
+
+	////////////////////////////////////////////////////////////////////////////////
+	// REMOTE DATA
+	////////////////////////////////////////////////////////////////////////////////
+
 	readonly cancerTypes = remoteData(client.getAllCancerTypesUsingGET({}), []);
+
 	readonly cancerStudies = remoteData(client.getAllStudiesUsingGET({}), []);
-	readonly geneticProfiles = remoteData<GeneticProfile[]>(() => {
-		if (this.singleSelectedStudyId)
-			return client.getAllGeneticProfilesInStudyUsingGET({studyId: this.singleSelectedStudyId});
-		return Promise.resolve([]);
-	}, []);
-	readonly sampleLists = remoteData<SampleList[]>(() => {
-		if (this.singleSelectedStudyId)
-			return (
-				client.getAllSampleListsInStudyUsingGET({
-					studyId: this.singleSelectedStudyId,
-					projection: 'DETAILED'
-				}).then(
-					sampleLists => _.sortBy(sampleLists, sampleList => sampleList.name)
-				)
-			);
-		return Promise.resolve([]);
-	}, []);
-	//TODO What is the default selected sampleList logic? depends on what profiles are selected?
 
-	@computed get singleSelectedStudyId()
-	{
-		return this.selectedStudyIds.length == 1 ? this.selectedStudyIds[0] : undefined;
-	}
+	readonly geneticProfiles = remoteData<GeneticProfile[]>({
+		invoke: () => {
+			if (this.singleSelectedStudyId)
+				return client.getAllGeneticProfilesInStudyUsingGET({studyId: this.singleSelectedStudyId});
+			return Promise.resolve([]);
+		},
+		default: [],
+		reaction: () => this._selectedProfileIds = undefined
+	});
 
-	@computed get map_geneticProfileId_geneticProfile()
-	{
-		return _.keyBy(this.geneticProfiles.result, profile => profile.geneticProfileId);
-	}
+	readonly sampleLists = remoteData<SampleList[]>({
+		invoke: () => {
+			if (this.singleSelectedStudyId)
+				return (
+					client.getAllSampleListsInStudyUsingGET({
+						studyId: this.singleSelectedStudyId,
+						projection: 'DETAILED'
+					}).then(
+						sampleLists => _.sortBy(sampleLists, sampleList => sampleList.name)
+					)
+				);
+			return Promise.resolve([]);
+		},
+		default: [],
+		reaction: () => this._selectedSampleListId = undefined
+	});
 
-	@computed get selectedProfiles()
-	{
-		return this.selectedProfileIds.map(id => this.map_geneticProfileId_geneticProfile[id]);
-	}
+	readonly mutSigForSingleStudy = remoteData<MutSig[]>({
+		invoke: () => {
+			if (this.singleSelectedStudyId)
+				return internalClient.getSignificantlyMutatedGenesUsingGET({studyId: this.singleSelectedStudyId});
+			return Promise.resolve([]);
+		},
+		default: []
+	});
+
+	readonly gisticForSingleStudy = remoteData<Gistic[]>({
+		invoke: () => {
+			if (this.singleSelectedStudyId)
+				return internalClient.getSignificantCopyNumberRegionsUsingGET({studyId: this.singleSelectedStudyId});
+			return Promise.resolve([]);
+		},
+		default: []
+	});
+
+
+	////////////////////////////////////////////////////////////////////////////////
+	// DERIVED DATA
+	////////////////////////////////////////////////////////////////////////////////
+
+	// CANCER STUDY
 
 	@computed get treeData()
 	{
@@ -144,16 +247,63 @@ export class QueryStore
 		return new StudyListLogic(this);
 	}
 
+	@computed get singleSelectedStudyId()
+	{
+		return this.selectedStudyIds.length == 1 ? this.selectedStudyIds[0] : undefined;
+	}
+
 	@computed get selectedStudies()
 	{
 		return this.selectedStudyIds.map(id => this.treeData.map_studyId_cancerStudy.get(id));
 	}
 
-	@computed get totalSelectedSampleCount()
+	@computed get selectedStudies_totalSampleCount()
 	{
 		return this.selectedStudies.reduce((sum:number, study:CancerStudy) => sum + study.allSampleCount, 0);
 	}
 
+	// GENETIC PROFILE
+
+	@computed get dict_geneticProfileId_geneticProfile():_.Dictionary<GeneticProfile | undefined>
+	{
+		return _.keyBy(this.geneticProfiles.result, profile => profile.geneticProfileId);
+	}
+
+	@computed get geneticProfilesGroupedByType():GeneticProfile[][]
+	{
+		let profiles = this.geneticProfiles.result.filter(profile => profile.showProfileInAnalysisTab);
+		let groupedProfiles = _.groupBy(profiles, profile => profile.geneticAlterationType);
+		// puts default alteration types first
+		let types = _.union(defaultSelectedAlterationTypes, Object.keys(groupedProfiles).sort());
+		return types.map(type => groupedProfiles[type]).filter(_.identity);
+	}
+
+	isProfileSelected(geneticProfileId:string)
+	{
+		return _.includes(this.selectedProfileIds, geneticProfileId);
+	}
+
+	isGeneticAlterationTypeSelected(geneticAlterationType:GeneticProfile['geneticAlterationType']):boolean
+	{
+		return this.selectedProfileIds.some(profileId => {
+			let profile = this.dict_geneticProfileId_geneticProfile[profileId];
+			return !!profile && profile.geneticAlterationType == geneticAlterationType;
+		});
+	}
+
+	// SAMPLE LIST
+
+	@computed get dict_sampleListId_sampleList():_.Dictionary<SampleList | undefined>
+	{
+		return _.keyBy(this.sampleLists.result, sampleList => sampleList.sampleListId);
+	}
+
+	// GENE SET
+
+	////////////////////////////////////////////////////////////////////////////////
+	// ACTIONS
+	////////////////////////////////////////////////////////////////////////////////
+
 	@action selectCancerType(cancerType:CancerType, multiSelect?:boolean)
 	{
 		let clickedCancerTypeId = cancerType.cancerTypeId;
@@ -176,5 +326,5 @@ export class QueryStore
 	}
 }
 
-const queryStore = new QueryStore();
+const queryStore = (window as any).queryStore = new QueryStore();
 export default queryStore;

From 7d15749c2016a887c3e61ca47c46636c766adfdb Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 10 Feb 2017 15:29:44 -0500
Subject: [PATCH 032/133] Make genetic profile selector match existing behavior

---
 .../query/GeneticProfileSelector.tsx          | 76 +++++++++++--------
 src/shared/components/query/QueryStore.ts     | 33 +++++---
 .../components/query/styles.module.scss       | 23 +++++-
 3 files changed, 88 insertions(+), 44 deletions(-)

diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index a79383582dd..52ae14cb44b 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -7,7 +7,6 @@ import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/custom";
-import {defaultSelectedAlterationTypes} from "./QueryStore";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
@@ -16,14 +15,10 @@ const styles = styles_any as {
 	radioGroup: string,
 	radioItem: string,
 	zScore: string,
+	groupName: string,
 	profileName: string,
 };
 
-export const DATATYPE_ZSCORE = 'Z-SCORE';
-export const geneticAlterationTypeGroupLabels:{[K in GeneticProfile['geneticAlterationType']]?: string} = {
-	"MRNA_EXPRESSION": "mRNA Expression data",
-};
-
 @observer
 export default class GeneticProfileSelector extends React.Component<{}, {}>
 {
@@ -34,41 +29,42 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 
 	render()
 	{
-		if (!this.store.singleSelectedStudyId
-			|| !this.store.geneticProfiles.isComplete
-			|| !this.store.geneticProfiles.result.length)
-		{
+		if (!this.store.singleSelectedStudyId || !this.store.geneticProfiles.isComplete)
 			return null;
-		}
-
-		let checkboxes:JSX.Element[] = [];
-		for (let profiles of this.store.geneticProfilesGroupedByType)
-			this.renderGroup(profiles, checkboxes);
 
 		return (
 			<div className={styles.GeneticProfileSelector}>
 				<h2>Select Genomic Profiles:</h2>
-				{checkboxes}
+				{[
+					this.renderGroup("MUTATION_EXTENDED", "Mutation"),
+					this.renderGroup("COPY_NUMBER_ALTERATION", "Copy Number"),
+					this.renderGroup("MRNA_EXPRESSION", "mRNA Expression"),
+					this.renderGroup("METHYLATION", "DNA Methylation"),
+					this.renderGroup("METHYLATION_BINARY", "DNA Methylation"),
+					this.renderGroup("PROTEIN_LEVEL", "Protein/phosphoprotein level"),
+				]}
+				{!!(!this.store.geneticProfiles.result.length) && (
+					<strong>No Genomic Profiles available for this Cancer Study</strong>
+				)}
 			</div>
 		);
 	}
 
-	renderGroup(profiles:GeneticProfile[], output:JSX.Element[])
+	renderGroup(geneticAlterationType:GeneticProfile['geneticAlterationType'], groupLabel:string)
 	{
+		let profiles = this.store.getFilteredProfiles(geneticAlterationType);
 		if (!profiles.length)
-			return;
+			return null;
 
-		let firstProfile = profiles[0];
-		let altType = firstProfile.geneticAlterationType;
 		let ids = profiles.map(profile => profile.geneticProfileId);
 		let checked = _.intersection(this.store.selectedProfileIds, ids).length > 0;
-		let label = firstProfile.name;
-		if (profiles.length > 1)
-		{
-			let groupLabel = geneticAlterationTypeGroupLabels[altType] || altType;
+		let label;
+		if (profiles.length == 1)
+			label = profiles[0].name;
+		else
 			label = `${groupLabel}. Select one of the profiles below:`;
-		}
 
+		let output = [];
 		output.push(
 			<div key={output.length} className={profiles.length > 1 ? styles.groupCheckbox : styles.singleCheckbox}>
 				<LabeledCheckbox
@@ -83,12 +79,12 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 						}
 					}}
 				>
-					{label}
+					<span className={profiles.length > 1 ? styles.groupName : styles.profileName}>{label}</span>
+					{!!(profiles.length == 1) && (
+						<FontAwesome name='question-circle' {...{title: profiles[0].description}}/>
+					)}
 				</LabeledCheckbox>
 
-				{!!(profiles.length == 1) && (
-					<FontAwesome name='question-circle' {...{alt: firstProfile.description}}/>
-				)}
 			</div>
 		);
 
@@ -113,15 +109,15 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 									}}
 								/>
 								<span className={styles.profileName}>{profile.name}</span>
+								<FontAwesome name='question-circle' {...{title: profile.description}}/>
 							</label>
-							<FontAwesome name='question-circle' {...{alt: profile.description}}/>
 						</div>
 					))}
 				</div>
 			);
 		}
 
-		if (firstProfile.datatype == DATATYPE_ZSCORE && checked)
+		if (checked && geneticAlterationType == 'MRNA_EXPRESSION')
 		{
 			output.push(
 				<div key={output.length} className={styles.zScore}>
@@ -136,5 +132,23 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 				</div>
 			);
 		}
+
+		if (checked && geneticAlterationType == 'PROTEIN_LEVEL')
+		{
+			output.push(
+				<div key={output.length} className={styles.zScore}>
+					Enter a z-score threshold ±:
+					<input
+						type="text"
+						value={this.store.rppaScoreThreshold}
+						onChange={event => {
+							this.store.rppaScoreThreshold = (event.target as HTMLInputElement).value;
+						}}
+					/>
+				</div>
+			);
+		}
+
+		return output;
 	}
 }
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 0246160e4a6..f2cd475d5e3 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -12,10 +12,6 @@ import {MutSig, Gistic} from "../../api/CBioPortalAPIInternal";
 export type PriorityStudies = {
 	[category:string]: string[]
 };
-export const defaultSelectedAlterationTypes:GeneticProfile['geneticAlterationType'][] = [
-	'MUTATION_EXTENDED',
-	'COPY_NUMBER_ALTERATION',
-];
 
 // mobx observable
 export class QueryStore
@@ -33,6 +29,7 @@ export class QueryStore
 			'dataTypePriority',
 			'selectedProfileIds',
 			'zScoreThreshold',
+			'rppaScoreThreshold',
 			'selectedSampleListId',
 			'caseIds',
 			'caseIdsMode',
@@ -45,6 +42,8 @@ export class QueryStore
 	// QUERY PARAMETERS
 	////////////////////////////////////////////////////////////////////////////////
 
+	@observable forDownloadTab:boolean = false;
+
 	@observable searchText:string = '';
 
 	@observable.ref selectedStudyIds:ReadonlyArray<string> = [];
@@ -59,10 +58,17 @@ export class QueryStore
 			return this._selectedProfileIds;
 
 		// compute default selection
+		const altTypes:GeneticProfile['geneticAlterationType'][] = [
+			'MUTATION_EXTENDED',
+			'COPY_NUMBER_ALTERATION',
+		];
 		let ids = [];
-		for (let profiles of this.geneticProfilesGroupedByType)
-			if (_.includes(defaultSelectedAlterationTypes, profiles[0].geneticAlterationType))
+		for (let altType of altTypes)
+		{
+			let profiles = this.getFilteredProfiles(altType);
+			if (profiles.length)
 				ids.push(profiles[0].geneticProfileId);
+		}
 		return ids;
 	}
 	set selectedProfileIds(value:ReadonlyArray<string>)
@@ -72,6 +78,8 @@ export class QueryStore
 
 	@observable zScoreThreshold:string = '2.0';
 
+	@observable rppaScoreThreshold:string = '2.0';
+
 	// sample list id
 	@observable private _selectedSampleListId?:string = undefined; // user selection
 	@computed get selectedSampleListId()
@@ -269,13 +277,14 @@ export class QueryStore
 		return _.keyBy(this.geneticProfiles.result, profile => profile.geneticProfileId);
 	}
 
-	@computed get geneticProfilesGroupedByType():GeneticProfile[][]
+	getFilteredProfiles(geneticAlterationType:GeneticProfile['geneticAlterationType'])
 	{
-		let profiles = this.geneticProfiles.result.filter(profile => profile.showProfileInAnalysisTab);
-		let groupedProfiles = _.groupBy(profiles, profile => profile.geneticAlterationType);
-		// puts default alteration types first
-		let types = _.union(defaultSelectedAlterationTypes, Object.keys(groupedProfiles).sort());
-		return types.map(type => groupedProfiles[type]).filter(_.identity);
+		return this.geneticProfiles.result.filter(profile => {
+			if (profile.geneticAlterationType != geneticAlterationType)
+				return false;
+
+			return profile.showProfileInAnalysisTab || this.forDownloadTab;
+		});
 	}
 
 	isProfileSelected(geneticProfileId:string)
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 4c420b7e202..a4a6048f3d6 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -1,6 +1,11 @@
 .QueryContainer {
   height: 100%;
 
+  label {
+    margin-bottom: 0px;
+    font-weight: normal;
+  }
+
   h2 {
     font: normal normal 300 20px/23px 'Helvetica Neue', Helvetica, Arial, sans-serif;
     flex-grow: 2;
@@ -173,20 +178,36 @@
 
   div.singleCheckbox, div.groupCheckbox {
     margin-left: 20px;
+
     label {
       display: inline;
+      cursor: pointer;
     }
   }
+
   div.radioGroup {
     margin-left: 40px;
 
     div.radioItem {
+      label {
+        cursor: pointer;
+
+        input {
+          margin-right: 6px;
+        }
+      }
     }
   }
+
   div.zScore {
     margin-left: 60px;
   }
-  label.profileName {
+
+  span.groupName {
+  }
+
+  span.profileName {
+    margin-right: 6px;
   }
 }
 

From cb842bed18f8b6e4e206e58efd980d8f84041473 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Mon, 13 Feb 2017 20:40:43 -0500
Subject: [PATCH 033/133] preliminary work for gene validation

---
 .../components/query/GeneSetSelector.tsx      |    3 +
 .../components/query/GeneSymbolValidator.tsx  |   44 +
 src/shared/lib/oql/README.txt                 |    6 +
 src/shared/lib/oql/generateParser.py          |   17 +
 src/shared/lib/oql/oql-parser.js              | 1757 +++++++++++++++++
 src/shared/lib/oql/oql_basic.pegjs            |  102 +
 src/shared/lib/oql/test-oql-parser.js         |  108 +
 7 files changed, 2037 insertions(+)
 create mode 100644 src/shared/components/query/GeneSymbolValidator.tsx
 create mode 100644 src/shared/lib/oql/README.txt
 create mode 100644 src/shared/lib/oql/generateParser.py
 create mode 100644 src/shared/lib/oql/oql-parser.js
 create mode 100644 src/shared/lib/oql/oql_basic.pegjs
 create mode 100644 src/shared/lib/oql/test-oql-parser.js

diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 398045d4322..47dbc42f102 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -5,6 +5,7 @@ import ReactSelect from 'react-select';
 import {observer} from "../../../../node_modules/mobx-react/index";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import gene_lists from './gene_lists';
+import GeneSymbolValidator from "./GeneSymbolValidator";
 
 const styles = styles_any as {
 	GeneSetSelector: string,
@@ -62,6 +63,8 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 						this.store.geneSet = (event.target as HTMLTextAreaElement).value;
 					}}
 				/>
+
+				<GeneSymbolValidator/>
 			</FlexCol>
 		);
 	}
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
new file mode 100644
index 00000000000..378c802e00c
--- /dev/null
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -0,0 +1,44 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import queryStore from "./QueryStore";
+import * as styles_any from './styles.module.scss';
+import {toJS, observable, autorunAsync, reaction, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
+import {observer} from "../../../../node_modules/mobx-react/index";
+import {FlexRow, FlexCol} from "../flexbox/FlexBox";
+import gene_lists from './gene_lists';
+import oql_parser from '../../lib/oql/oql-parser';
+
+@observer
+export default class GeneSymbolValidator extends React.Component<{}, {}>
+{
+	get store()
+	{
+		return queryStore;
+	}
+
+	disposeAutorun = autorunAsync('validateGenes', () => {
+		try
+		{
+			this.results = oql_parser.parse(this.store.geneSet);
+		}
+		catch (e)
+		{
+			this.error = e;
+		}
+	}, 500);
+
+	@observable.ref results:ReadonlyArray<any> = [];
+	@observable.ref error?:Error = undefined;
+
+	render()
+	{
+		return (
+			<div>{JSON.stringify(this.results)}</div>
+		);
+	}
+
+	componentWillUnmount()
+	{
+		this.disposeAutorun();
+	}
+}
\ No newline at end of file
diff --git a/src/shared/lib/oql/README.txt b/src/shared/lib/oql/README.txt
new file mode 100644
index 00000000000..e6f0adb35be
--- /dev/null
+++ b/src/shared/lib/oql/README.txt
@@ -0,0 +1,6 @@
+.pegjs files are grammar specifications
+
+run $ python generateParser.py <pegjs file> [-test]
+if the test flag is up, then it is prepared for command line testing with node.js, i.e. it is written with "module.exports = " instead of the production version which is "oql_parser = "
+
+To run tests, run $ node test-oql-parser.js
diff --git a/src/shared/lib/oql/generateParser.py b/src/shared/lib/oql/generateParser.py
new file mode 100644
index 00000000000..e58fbf54b71
--- /dev/null
+++ b/src/shared/lib/oql/generateParser.py
@@ -0,0 +1,17 @@
+#!/usr/bin/python
+import os
+import sys
+
+os.system("pegjs "+sys.argv[1]+" oql-parser-tmp.js")
+
+f = open("oql-parser-tmp.js","r")
+nf = open("oql-parser.js","w")
+
+if not (len(sys.argv) >= 3 and sys.argv[2].startswith("-t")):
+	f.readline()
+	nf.write("oql_parser = (function() {\n")
+
+for line in f:
+	nf.write(line)
+
+os.system("rm oql-parser-tmp.js")
diff --git a/src/shared/lib/oql/oql-parser.js b/src/shared/lib/oql/oql-parser.js
new file mode 100644
index 00000000000..ec0273bb4c4
--- /dev/null
+++ b/src/shared/lib/oql/oql-parser.js
@@ -0,0 +1,1757 @@
+const oql_parser = (function() {
+  /*
+   * Generated by PEG.js 0.8.0.
+   *
+   * http://pegjs.majda.cz/
+   */
+
+  function peg$subclass(child, parent) {
+    function ctor() { this.constructor = child; }
+    ctor.prototype = parent.prototype;
+    child.prototype = new ctor();
+  }
+
+  function SyntaxError(message, expected, found, offset, line, column) {
+    this.message  = message;
+    this.expected = expected;
+    this.found    = found;
+    this.offset   = offset;
+    this.line     = line;
+    this.column   = column;
+
+    this.name     = "SyntaxError";
+  }
+
+  peg$subclass(SyntaxError, Error);
+
+  function parse(input) {
+    var options = arguments.length > 1 ? arguments[1] : {},
+
+        peg$FAILED = {},
+
+        peg$startRuleFunctions = { start: peg$parsestart },
+        peg$startRuleFunction  = peg$parsestart,
+
+        peg$c0 = function() { return false; },
+        peg$c1 = peg$FAILED,
+        peg$c2 = /^[\n]/,
+        peg$c3 = { type: "class", value: "[\\n]", description: "[\\n]" },
+        peg$c4 = ";",
+        peg$c5 = { type: "literal", value: ";", description: "\";\"" },
+        peg$c6 = [],
+        peg$c7 = /^[0-9]/,
+        peg$c8 = { type: "class", value: "[0-9]", description: "[0-9]" },
+        peg$c9 = function(number) { return number.join("");},
+        peg$c10 = "-",
+        peg$c11 = { type: "literal", value: "-", description: "\"-\"" },
+        peg$c12 = function(number) { return "-"+number;},
+        peg$c13 = ".",
+        peg$c14 = { type: "literal", value: ".", description: "\".\"" },
+        peg$c15 = function(whole_part, decimal_part) { return whole_part + "." + decimal_part;},
+        peg$c16 = function(decimal_part) { return "."+decimal_part;},
+        peg$c17 = function(whole_part) {return whole_part;},
+        peg$c18 = /^[\-_.@\/a-zA-Z0-9*]/,
+        peg$c19 = { type: "class", value: "[\\-_.@\\/a-zA-Z0-9*]", description: "[\\-_.@\\/a-zA-Z0-9*]" },
+        peg$c20 = function(word) { return word.join("") },
+        peg$c21 = /^[GPAVLIMCFYWHKRQNEDST]/,
+        peg$c22 = { type: "class", value: "[GPAVLIMCFYWHKRQNEDST]", description: "[GPAVLIMCFYWHKRQNEDST]" },
+        peg$c23 = function(letter) { return letter; },
+        peg$c24 = /^[ \t\r]/,
+        peg$c25 = { type: "class", value: "[ \\t\\r]", description: "[ \\t\\r]" },
+        peg$c26 = "amp",
+        peg$c27 = { type: "literal", value: "AMP", description: "\"AMP\"" },
+        peg$c28 = "homdel",
+        peg$c29 = { type: "literal", value: "HOMDEL", description: "\"HOMDEL\"" },
+        peg$c30 = "gain",
+        peg$c31 = { type: "literal", value: "GAIN", description: "\"GAIN\"" },
+        peg$c32 = "hetloss",
+        peg$c33 = { type: "literal", value: "HETLOSS", description: "\"HETLOSS\"" },
+        peg$c34 = "mut",
+        peg$c35 = { type: "literal", value: "MUT", description: "\"MUT\"" },
+        peg$c36 = "exp",
+        peg$c37 = { type: "literal", value: "EXP", description: "\"EXP\"" },
+        peg$c38 = "prot",
+        peg$c39 = { type: "literal", value: "PROT", description: "\"PROT\"" },
+        peg$c40 = function(listofgenes, rest) { return listofgenes.map(function(gene) { return {"gene":gene, "alterations":false}; }).concat(rest); },
+        peg$c41 = function(listofgenes) { return listofgenes.map(function(gene) { return {"gene":gene, "alterations":false}; }); },
+        peg$c42 = function(first, rest) { return [first].concat(rest); },
+        peg$c43 = function(first) { return [first]; },
+        peg$c44 = function(geneName, rest) { return [geneName].concat(rest);},
+        peg$c45 = function(geneName1, geneName2) { return [geneName1, geneName2]; },
+        peg$c46 = ":",
+        peg$c47 = { type: "literal", value: ":", description: "\":\"" },
+        peg$c48 = function(geneName, alts) { return {"gene": geneName, "alterations": alts}; },
+        peg$c49 = function(geneName) { return {"gene": geneName, "alterations":false}; },
+        peg$c50 = function(a1, a2) { return [a1].concat(a2);},
+        peg$c51 = function(a1) { return [a1]; },
+        peg$c52 = function(cmd) { return cmd; },
+        peg$c53 = function() { return "AMP"; },
+        peg$c54 = function() { return "HOMDEL"; },
+        peg$c55 = function() { return "GAIN"; },
+        peg$c56 = function() { return "HETLOSS"; },
+        peg$c57 = "cna",
+        peg$c58 = { type: "literal", value: "CNA", description: "\"CNA\"" },
+        peg$c59 = function(op, constrval) { return {"alteration_type":"cna", "constr_rel":op, "constr_val":constrval}; },
+        peg$c60 = function(constrval) { return {"alteration_type":"cna", "constr_rel":"=", "constr_val":constrval}; },
+        peg$c61 = "MUT",
+        peg$c62 = "=",
+        peg$c63 = { type: "literal", value: "=", description: "\"=\"" },
+        peg$c64 = function(mutation) { return {"alteration_type":"mut", "constr_rel": "=", "constr_type":mutation.type, "constr_val":mutation.value, "info":mutation.info}; },
+        peg$c65 = "!=",
+        peg$c66 = { type: "literal", value: "!=", description: "\"!=\"" },
+        peg$c67 = function(mutation) { return {"alteration_type":"mut", "constr_rel": "!=", "constr_type":mutation.type, "constr_val":mutation.value, "info":mutation.info}; },
+        peg$c68 = function() { return {"alteration_type":"mut"}; },
+        peg$c69 = "EXP",
+        peg$c70 = function(op, constrval) { return {"alteration_type":"exp", "constr_rel":op, "constr_val":parseFloat(constrval)}; },
+        peg$c71 = "FUSION",
+        peg$c72 = { type: "literal", value: "FUSION", description: "\"FUSION\"" },
+        peg$c73 = function() { return {"alteration_type":"fusion"}; },
+        peg$c74 = "PROT",
+        peg$c75 = function(op, constrval) { return {"alteration_type":"prot", "constr_rel":op, "constr_val":parseFloat(constrval)}; },
+        peg$c76 = ">=",
+        peg$c77 = { type: "literal", value: ">=", description: "\">=\"" },
+        peg$c78 = function() { return ">="; },
+        peg$c79 = "<=",
+        peg$c80 = { type: "literal", value: "<=", description: "\"<=\"" },
+        peg$c81 = function() { return "<="; },
+        peg$c82 = ">",
+        peg$c83 = { type: "literal", value: ">", description: "\">\"" },
+        peg$c84 = function() { return ">"; },
+        peg$c85 = "<",
+        peg$c86 = { type: "literal", value: "<", description: "\"<\"" },
+        peg$c87 = function() { return "<"; },
+        peg$c88 = "missense",
+        peg$c89 = { type: "literal", value: "MISSENSE", description: "\"MISSENSE\"" },
+        peg$c90 = function() { return {"type":"class", "value":"MISSENSE", "info":{}}; },
+        peg$c91 = "nonsense",
+        peg$c92 = { type: "literal", value: "NONSENSE", description: "\"NONSENSE\"" },
+        peg$c93 = function() { return {"type":"class", "value":"NONSENSE", "info":{}}; },
+        peg$c94 = "nonstart",
+        peg$c95 = { type: "literal", value: "NONSTART", description: "\"NONSTART\"" },
+        peg$c96 = function() { return {"type":"class", "value":"NONSTART", "info":{}}; },
+        peg$c97 = "nonstop",
+        peg$c98 = { type: "literal", value: "NONSTOP", description: "\"NONSTOP\"" },
+        peg$c99 = function() { return {"type":"class", "value":"NONSTOP", "info":{}}; },
+        peg$c100 = "frameshift",
+        peg$c101 = { type: "literal", value: "FRAMESHIFT", description: "\"FRAMESHIFT\"" },
+        peg$c102 = function() { return {"type":"class", "value":"FRAMESHIFT", "info":{}}; },
+        peg$c103 = "inframe",
+        peg$c104 = { type: "literal", value: "INFRAME", description: "\"INFRAME\"" },
+        peg$c105 = function() { return {"type":"class", "value":"INFRAME", "info":{}}; },
+        peg$c106 = "splice",
+        peg$c107 = { type: "literal", value: "SPLICE", description: "\"SPLICE\"" },
+        peg$c108 = function() { return {"type":"class", "value":"SPLICE", "info":{}}; },
+        peg$c109 = "trunc",
+        peg$c110 = { type: "literal", value: "TRUNC", description: "\"TRUNC\"" },
+        peg$c111 = function() { return {"type":"class", "value":"TRUNC", "info":{}}; },
+        peg$c112 = "promoter",
+        peg$c113 = { type: "literal", value: "PROMOTER", description: "\"PROMOTER\"" },
+        peg$c114 = function() { return {"type":"class", "value":"PROMOTER", "info":{}}; },
+        peg$c115 = function(letter, position, string) { return {"type":"name" , "value":(letter+position+string), "info":{}};},
+        peg$c116 = function(letter, position) { return {"type":"position", "value":parseInt(position), "info":{"amino_acid":letter.toUpperCase()}}; },
+        peg$c117 = function(mutation_name) { return {"type":"name", "value":mutation_name, "info":{}}; },
+
+        peg$currPos          = 0,
+        peg$reportedPos      = 0,
+        peg$cachedPos        = 0,
+        peg$cachedPosDetails = { line: 1, column: 1, seenCR: false },
+        peg$maxFailPos       = 0,
+        peg$maxFailExpected  = [],
+        peg$silentFails      = 0,
+
+        peg$result;
+
+    if ("startRule" in options) {
+      if (!(options.startRule in peg$startRuleFunctions)) {
+        throw new Error("Can't start parsing from rule \"" + options.startRule + "\".");
+      }
+
+      peg$startRuleFunction = peg$startRuleFunctions[options.startRule];
+    }
+
+    function text() {
+      return input.substring(peg$reportedPos, peg$currPos);
+    }
+
+    function offset() {
+      return peg$reportedPos;
+    }
+
+    function line() {
+      return peg$computePosDetails(peg$reportedPos).line;
+    }
+
+    function column() {
+      return peg$computePosDetails(peg$reportedPos).column;
+    }
+
+    function expected(description) {
+      throw peg$buildException(
+        null,
+        [{ type: "other", description: description }],
+        peg$reportedPos
+      );
+    }
+
+    function error(message) {
+      throw peg$buildException(message, null, peg$reportedPos);
+    }
+
+    function peg$computePosDetails(pos) {
+      function advance(details, startPos, endPos) {
+        var p, ch;
+
+        for (p = startPos; p < endPos; p++) {
+          ch = input.charAt(p);
+          if (ch === "\n") {
+            if (!details.seenCR) { details.line++; }
+            details.column = 1;
+            details.seenCR = false;
+          } else if (ch === "\r" || ch === "\u2028" || ch === "\u2029") {
+            details.line++;
+            details.column = 1;
+            details.seenCR = true;
+          } else {
+            details.column++;
+            details.seenCR = false;
+          }
+        }
+      }
+
+      if (peg$cachedPos !== pos) {
+        if (peg$cachedPos > pos) {
+          peg$cachedPos = 0;
+          peg$cachedPosDetails = { line: 1, column: 1, seenCR: false };
+        }
+        advance(peg$cachedPosDetails, peg$cachedPos, pos);
+        peg$cachedPos = pos;
+      }
+
+      return peg$cachedPosDetails;
+    }
+
+    function peg$fail(expected) {
+      if (peg$currPos < peg$maxFailPos) { return; }
+
+      if (peg$currPos > peg$maxFailPos) {
+        peg$maxFailPos = peg$currPos;
+        peg$maxFailExpected = [];
+      }
+
+      peg$maxFailExpected.push(expected);
+    }
+
+    function peg$buildException(message, expected, pos) {
+      function cleanupExpected(expected) {
+        var i = 1;
+
+        expected.sort(function(a, b) {
+          if (a.description < b.description) {
+            return -1;
+          } else if (a.description > b.description) {
+            return 1;
+          } else {
+            return 0;
+          }
+        });
+
+        while (i < expected.length) {
+          if (expected[i - 1] === expected[i]) {
+            expected.splice(i, 1);
+          } else {
+            i++;
+          }
+        }
+      }
+
+      function buildMessage(expected, found) {
+        function stringEscape(s) {
+          function hex(ch) { return ch.charCodeAt(0).toString(16).toUpperCase(); }
+
+          return s
+            .replace(/\\/g,   '\\\\')
+            .replace(/"/g,    '\\"')
+            .replace(/\x08/g, '\\b')
+            .replace(/\t/g,   '\\t')
+            .replace(/\n/g,   '\\n')
+            .replace(/\f/g,   '\\f')
+            .replace(/\r/g,   '\\r')
+            .replace(/[\x00-\x07\x0B\x0E\x0F]/g, function(ch) { return '\\x0' + hex(ch); })
+            .replace(/[\x10-\x1F\x80-\xFF]/g,    function(ch) { return '\\x'  + hex(ch); })
+            .replace(/[\u0180-\u0FFF]/g,         function(ch) { return '\\u0' + hex(ch); })
+            .replace(/[\u1080-\uFFFF]/g,         function(ch) { return '\\u'  + hex(ch); });
+        }
+
+        var expectedDescs = new Array(expected.length),
+            expectedDesc, foundDesc, i;
+
+        for (i = 0; i < expected.length; i++) {
+          expectedDescs[i] = expected[i].description;
+        }
+
+        expectedDesc = expected.length > 1
+          ? expectedDescs.slice(0, -1).join(", ")
+              + " or "
+              + expectedDescs[expected.length - 1]
+          : expectedDescs[0];
+
+        foundDesc = found ? "\"" + stringEscape(found) + "\"" : "end of input";
+
+        return "Expected " + expectedDesc + " but " + foundDesc + " found.";
+      }
+
+      var posDetails = peg$computePosDetails(pos),
+          found      = pos < input.length ? input.charAt(pos) : null;
+
+      if (expected !== null) {
+        cleanupExpected(expected);
+      }
+
+      return new SyntaxError(
+        message !== null ? message : buildMessage(expected, found),
+        expected,
+        found,
+        pos,
+        posDetails.line,
+        posDetails.column
+      );
+    }
+
+    function peg$parsestart() {
+      var s0, s1;
+
+      s0 = peg$parseQuery();
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        s1 = peg$parsesp();
+        if (s1 !== peg$FAILED) {
+          peg$reportedPos = s0;
+          s1 = peg$c0();
+        }
+        s0 = s1;
+      }
+
+      return s0;
+    }
+
+    function peg$parsebr() {
+      var s0, s1, s2;
+
+      s0 = peg$currPos;
+      if (peg$c2.test(input.charAt(peg$currPos))) {
+        s1 = input.charAt(peg$currPos);
+        peg$currPos++;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c3); }
+      }
+      if (s1 !== peg$FAILED) {
+        s2 = peg$parsebr();
+        if (s2 !== peg$FAILED) {
+          s1 = [s1, s2];
+          s0 = s1;
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      } else {
+        peg$currPos = s0;
+        s0 = peg$c1;
+      }
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        if (input.charCodeAt(peg$currPos) === 59) {
+          s1 = peg$c4;
+          peg$currPos++;
+        } else {
+          s1 = peg$FAILED;
+          if (peg$silentFails === 0) { peg$fail(peg$c5); }
+        }
+        if (s1 !== peg$FAILED) {
+          s2 = peg$parsebr();
+          if (s2 !== peg$FAILED) {
+            s1 = [s1, s2];
+            s0 = s1;
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+        if (s0 === peg$FAILED) {
+          if (peg$c2.test(input.charAt(peg$currPos))) {
+            s0 = input.charAt(peg$currPos);
+            peg$currPos++;
+          } else {
+            s0 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c3); }
+          }
+          if (s0 === peg$FAILED) {
+            if (input.charCodeAt(peg$currPos) === 59) {
+              s0 = peg$c4;
+              peg$currPos++;
+            } else {
+              s0 = peg$FAILED;
+              if (peg$silentFails === 0) { peg$fail(peg$c5); }
+            }
+          }
+        }
+      }
+
+      return s0;
+    }
+
+    function peg$parseNaturalNumber() {
+      var s0, s1, s2;
+
+      s0 = peg$currPos;
+      s1 = [];
+      if (peg$c7.test(input.charAt(peg$currPos))) {
+        s2 = input.charAt(peg$currPos);
+        peg$currPos++;
+      } else {
+        s2 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c8); }
+      }
+      if (s2 !== peg$FAILED) {
+        while (s2 !== peg$FAILED) {
+          s1.push(s2);
+          if (peg$c7.test(input.charAt(peg$currPos))) {
+            s2 = input.charAt(peg$currPos);
+            peg$currPos++;
+          } else {
+            s2 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c8); }
+          }
+        }
+      } else {
+        s1 = peg$c1;
+      }
+      if (s1 !== peg$FAILED) {
+        peg$reportedPos = s0;
+        s1 = peg$c9(s1);
+      }
+      s0 = s1;
+
+      return s0;
+    }
+
+    function peg$parseNumber() {
+      var s0, s1, s2, s3;
+
+      s0 = peg$currPos;
+      if (input.charCodeAt(peg$currPos) === 45) {
+        s1 = peg$c10;
+        peg$currPos++;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c11); }
+      }
+      if (s1 !== peg$FAILED) {
+        s2 = peg$parseNumber();
+        if (s2 !== peg$FAILED) {
+          peg$reportedPos = s0;
+          s1 = peg$c12(s2);
+          s0 = s1;
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      } else {
+        peg$currPos = s0;
+        s0 = peg$c1;
+      }
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        s1 = peg$parseNaturalNumber();
+        if (s1 !== peg$FAILED) {
+          if (input.charCodeAt(peg$currPos) === 46) {
+            s2 = peg$c13;
+            peg$currPos++;
+          } else {
+            s2 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c14); }
+          }
+          if (s2 !== peg$FAILED) {
+            s3 = peg$parseNaturalNumber();
+            if (s3 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c15(s1, s3);
+              s0 = s1;
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+        if (s0 === peg$FAILED) {
+          s0 = peg$currPos;
+          if (input.charCodeAt(peg$currPos) === 46) {
+            s1 = peg$c13;
+            peg$currPos++;
+          } else {
+            s1 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c14); }
+          }
+          if (s1 !== peg$FAILED) {
+            s2 = peg$parseNaturalNumber();
+            if (s2 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c16(s2);
+              s0 = s1;
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+          if (s0 === peg$FAILED) {
+            s0 = peg$currPos;
+            s1 = peg$parseNaturalNumber();
+            if (s1 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c17(s1);
+            }
+            s0 = s1;
+          }
+        }
+      }
+
+      return s0;
+    }
+
+    function peg$parseString() {
+      var s0, s1, s2;
+
+      s0 = peg$currPos;
+      s1 = [];
+      if (peg$c18.test(input.charAt(peg$currPos))) {
+        s2 = input.charAt(peg$currPos);
+        peg$currPos++;
+      } else {
+        s2 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c19); }
+      }
+      if (s2 !== peg$FAILED) {
+        while (s2 !== peg$FAILED) {
+          s1.push(s2);
+          if (peg$c18.test(input.charAt(peg$currPos))) {
+            s2 = input.charAt(peg$currPos);
+            peg$currPos++;
+          } else {
+            s2 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c19); }
+          }
+        }
+      } else {
+        s1 = peg$c1;
+      }
+      if (s1 !== peg$FAILED) {
+        peg$reportedPos = s0;
+        s1 = peg$c20(s1);
+      }
+      s0 = s1;
+
+      return s0;
+    }
+
+    function peg$parseAminoAcid() {
+      var s0, s1;
+
+      s0 = peg$currPos;
+      if (peg$c21.test(input.charAt(peg$currPos))) {
+        s1 = input.charAt(peg$currPos);
+        peg$currPos++;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c22); }
+      }
+      if (s1 !== peg$FAILED) {
+        peg$reportedPos = s0;
+        s1 = peg$c23(s1);
+      }
+      s0 = s1;
+
+      return s0;
+    }
+
+    function peg$parsesp() {
+      var s0, s1;
+
+      s0 = [];
+      if (peg$c24.test(input.charAt(peg$currPos))) {
+        s1 = input.charAt(peg$currPos);
+        peg$currPos++;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c25); }
+      }
+      if (s1 !== peg$FAILED) {
+        while (s1 !== peg$FAILED) {
+          s0.push(s1);
+          if (peg$c24.test(input.charAt(peg$currPos))) {
+            s1 = input.charAt(peg$currPos);
+            peg$currPos++;
+          } else {
+            s1 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c25); }
+          }
+        }
+      } else {
+        s0 = peg$c1;
+      }
+
+      return s0;
+    }
+
+    function peg$parsemsp() {
+      var s0, s1;
+
+      s0 = [];
+      if (peg$c24.test(input.charAt(peg$currPos))) {
+        s1 = input.charAt(peg$currPos);
+        peg$currPos++;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c25); }
+      }
+      while (s1 !== peg$FAILED) {
+        s0.push(s1);
+        if (peg$c24.test(input.charAt(peg$currPos))) {
+          s1 = input.charAt(peg$currPos);
+          peg$currPos++;
+        } else {
+          s1 = peg$FAILED;
+          if (peg$silentFails === 0) { peg$fail(peg$c25); }
+        }
+      }
+
+      return s0;
+    }
+
+    function peg$parseAMP() {
+      var s0;
+
+      if (input.substr(peg$currPos, 3).toLowerCase() === peg$c26) {
+        s0 = input.substr(peg$currPos, 3);
+        peg$currPos += 3;
+      } else {
+        s0 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c27); }
+      }
+
+      return s0;
+    }
+
+    function peg$parseHOMDEL() {
+      var s0;
+
+      if (input.substr(peg$currPos, 6).toLowerCase() === peg$c28) {
+        s0 = input.substr(peg$currPos, 6);
+        peg$currPos += 6;
+      } else {
+        s0 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c29); }
+      }
+
+      return s0;
+    }
+
+    function peg$parseGAIN() {
+      var s0;
+
+      if (input.substr(peg$currPos, 4).toLowerCase() === peg$c30) {
+        s0 = input.substr(peg$currPos, 4);
+        peg$currPos += 4;
+      } else {
+        s0 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c31); }
+      }
+
+      return s0;
+    }
+
+    function peg$parseHETLOSS() {
+      var s0;
+
+      if (input.substr(peg$currPos, 7).toLowerCase() === peg$c32) {
+        s0 = input.substr(peg$currPos, 7);
+        peg$currPos += 7;
+      } else {
+        s0 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c33); }
+      }
+
+      return s0;
+    }
+
+    function peg$parseMUT() {
+      var s0;
+
+      if (input.substr(peg$currPos, 3).toLowerCase() === peg$c34) {
+        s0 = input.substr(peg$currPos, 3);
+        peg$currPos += 3;
+      } else {
+        s0 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c35); }
+      }
+
+      return s0;
+    }
+
+    function peg$parseEXP() {
+      var s0;
+
+      if (input.substr(peg$currPos, 3).toLowerCase() === peg$c36) {
+        s0 = input.substr(peg$currPos, 3);
+        peg$currPos += 3;
+      } else {
+        s0 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c37); }
+      }
+
+      return s0;
+    }
+
+    function peg$parsePROT() {
+      var s0;
+
+      if (input.substr(peg$currPos, 4).toLowerCase() === peg$c38) {
+        s0 = input.substr(peg$currPos, 4);
+        peg$currPos += 4;
+      } else {
+        s0 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c39); }
+      }
+
+      return s0;
+    }
+
+    function peg$parseQuery() {
+      var s0, s1, s2, s3, s4, s5;
+
+      s0 = peg$currPos;
+      s1 = peg$parseListOfGenes();
+      if (s1 !== peg$FAILED) {
+        s2 = peg$parsemsp();
+        if (s2 !== peg$FAILED) {
+          s3 = peg$parsebr();
+          if (s3 !== peg$FAILED) {
+            s4 = peg$parseQuery();
+            if (s4 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c40(s1, s4);
+              s0 = s1;
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      } else {
+        peg$currPos = s0;
+        s0 = peg$c1;
+      }
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        s1 = peg$parseListOfGenes();
+        if (s1 !== peg$FAILED) {
+          s2 = peg$parsemsp();
+          if (s2 !== peg$FAILED) {
+            s3 = peg$parsebr();
+            if (s3 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c41(s1);
+              s0 = s1;
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+        if (s0 === peg$FAILED) {
+          s0 = peg$currPos;
+          s1 = peg$parseListOfGenes();
+          if (s1 !== peg$FAILED) {
+            s2 = peg$parsemsp();
+            if (s2 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c41(s1);
+              s0 = s1;
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+          if (s0 === peg$FAILED) {
+            s0 = peg$currPos;
+            s1 = peg$parsemsp();
+            if (s1 !== peg$FAILED) {
+              s2 = peg$parseSingleGeneQuery();
+              if (s2 !== peg$FAILED) {
+                s3 = peg$parsemsp();
+                if (s3 !== peg$FAILED) {
+                  s4 = peg$parsebr();
+                  if (s4 !== peg$FAILED) {
+                    s5 = peg$parseQuery();
+                    if (s5 !== peg$FAILED) {
+                      peg$reportedPos = s0;
+                      s1 = peg$c42(s2, s5);
+                      s0 = s1;
+                    } else {
+                      peg$currPos = s0;
+                      s0 = peg$c1;
+                    }
+                  } else {
+                    peg$currPos = s0;
+                    s0 = peg$c1;
+                  }
+                } else {
+                  peg$currPos = s0;
+                  s0 = peg$c1;
+                }
+              } else {
+                peg$currPos = s0;
+                s0 = peg$c1;
+              }
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+            if (s0 === peg$FAILED) {
+              s0 = peg$currPos;
+              s1 = peg$parsemsp();
+              if (s1 !== peg$FAILED) {
+                s2 = peg$parseSingleGeneQuery();
+                if (s2 !== peg$FAILED) {
+                  s3 = peg$parsemsp();
+                  if (s3 !== peg$FAILED) {
+                    s4 = peg$parsebr();
+                    if (s4 !== peg$FAILED) {
+                      peg$reportedPos = s0;
+                      s1 = peg$c43(s2);
+                      s0 = s1;
+                    } else {
+                      peg$currPos = s0;
+                      s0 = peg$c1;
+                    }
+                  } else {
+                    peg$currPos = s0;
+                    s0 = peg$c1;
+                  }
+                } else {
+                  peg$currPos = s0;
+                  s0 = peg$c1;
+                }
+              } else {
+                peg$currPos = s0;
+                s0 = peg$c1;
+              }
+              if (s0 === peg$FAILED) {
+                s0 = peg$currPos;
+                s1 = peg$parsemsp();
+                if (s1 !== peg$FAILED) {
+                  s2 = peg$parseSingleGeneQuery();
+                  if (s2 !== peg$FAILED) {
+                    s3 = peg$parsemsp();
+                    if (s3 !== peg$FAILED) {
+                      peg$reportedPos = s0;
+                      s1 = peg$c43(s2);
+                      s0 = s1;
+                    } else {
+                      peg$currPos = s0;
+                      s0 = peg$c1;
+                    }
+                  } else {
+                    peg$currPos = s0;
+                    s0 = peg$c1;
+                  }
+                } else {
+                  peg$currPos = s0;
+                  s0 = peg$c1;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      return s0;
+    }
+
+    function peg$parseListOfGenes() {
+      var s0, s1, s2, s3, s4, s5;
+
+      s0 = peg$currPos;
+      s1 = peg$parsemsp();
+      if (s1 !== peg$FAILED) {
+        s2 = peg$parseString();
+        if (s2 !== peg$FAILED) {
+          s3 = peg$parsemsp();
+          if (s3 !== peg$FAILED) {
+            s4 = peg$parseListOfGenes();
+            if (s4 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c44(s2, s4);
+              s0 = s1;
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      } else {
+        peg$currPos = s0;
+        s0 = peg$c1;
+      }
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        s1 = peg$parsemsp();
+        if (s1 !== peg$FAILED) {
+          s2 = peg$parseString();
+          if (s2 !== peg$FAILED) {
+            s3 = peg$parsemsp();
+            if (s3 !== peg$FAILED) {
+              s4 = peg$parseString();
+              if (s4 !== peg$FAILED) {
+                s5 = peg$parsemsp();
+                if (s5 !== peg$FAILED) {
+                  peg$reportedPos = s0;
+                  s1 = peg$c45(s2, s4);
+                  s0 = s1;
+                } else {
+                  peg$currPos = s0;
+                  s0 = peg$c1;
+                }
+              } else {
+                peg$currPos = s0;
+                s0 = peg$c1;
+              }
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      }
+
+      return s0;
+    }
+
+    function peg$parseSingleGeneQuery() {
+      var s0, s1, s2, s3, s4, s5;
+
+      s0 = peg$currPos;
+      s1 = peg$parseString();
+      if (s1 !== peg$FAILED) {
+        s2 = peg$parsemsp();
+        if (s2 !== peg$FAILED) {
+          if (input.charCodeAt(peg$currPos) === 58) {
+            s3 = peg$c46;
+            peg$currPos++;
+          } else {
+            s3 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c47); }
+          }
+          if (s3 !== peg$FAILED) {
+            s4 = peg$parsemsp();
+            if (s4 !== peg$FAILED) {
+              s5 = peg$parseAlterations();
+              if (s5 !== peg$FAILED) {
+                peg$reportedPos = s0;
+                s1 = peg$c48(s1, s5);
+                s0 = s1;
+              } else {
+                peg$currPos = s0;
+                s0 = peg$c1;
+              }
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      } else {
+        peg$currPos = s0;
+        s0 = peg$c1;
+      }
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        s1 = peg$parseString();
+        if (s1 !== peg$FAILED) {
+          peg$reportedPos = s0;
+          s1 = peg$c49(s1);
+        }
+        s0 = s1;
+      }
+
+      return s0;
+    }
+
+    function peg$parseAlterations() {
+      var s0, s1, s2, s3;
+
+      s0 = peg$currPos;
+      s1 = peg$parseAlteration();
+      if (s1 !== peg$FAILED) {
+        s2 = peg$parsesp();
+        if (s2 !== peg$FAILED) {
+          s3 = peg$parseAlterations();
+          if (s3 !== peg$FAILED) {
+            peg$reportedPos = s0;
+            s1 = peg$c50(s1, s3);
+            s0 = s1;
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      } else {
+        peg$currPos = s0;
+        s0 = peg$c1;
+      }
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        s1 = peg$parseAlteration();
+        if (s1 !== peg$FAILED) {
+          peg$reportedPos = s0;
+          s1 = peg$c51(s1);
+        }
+        s0 = s1;
+      }
+
+      return s0;
+    }
+
+    function peg$parseAlteration() {
+      var s0, s1;
+
+      s0 = peg$currPos;
+      s1 = peg$parseCNACommand();
+      if (s1 !== peg$FAILED) {
+        peg$reportedPos = s0;
+        s1 = peg$c52(s1);
+      }
+      s0 = s1;
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        s1 = peg$parseEXPCommand();
+        if (s1 !== peg$FAILED) {
+          peg$reportedPos = s0;
+          s1 = peg$c52(s1);
+        }
+        s0 = s1;
+        if (s0 === peg$FAILED) {
+          s0 = peg$currPos;
+          s1 = peg$parsePROTCommand();
+          if (s1 !== peg$FAILED) {
+            peg$reportedPos = s0;
+            s1 = peg$c52(s1);
+          }
+          s0 = s1;
+          if (s0 === peg$FAILED) {
+            s0 = peg$currPos;
+            s1 = peg$parseFUSIONCommand();
+            if (s1 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c52(s1);
+            }
+            s0 = s1;
+            if (s0 === peg$FAILED) {
+              s0 = peg$currPos;
+              s1 = peg$parseMUTCommand();
+              if (s1 !== peg$FAILED) {
+                peg$reportedPos = s0;
+                s1 = peg$c52(s1);
+              }
+              s0 = s1;
+            }
+          }
+        }
+      }
+
+      return s0;
+    }
+
+    function peg$parseCNAType() {
+      var s0, s1;
+
+      s0 = peg$currPos;
+      if (input.substr(peg$currPos, 3).toLowerCase() === peg$c26) {
+        s1 = input.substr(peg$currPos, 3);
+        peg$currPos += 3;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c27); }
+      }
+      if (s1 !== peg$FAILED) {
+        peg$reportedPos = s0;
+        s1 = peg$c53();
+      }
+      s0 = s1;
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        if (input.substr(peg$currPos, 6).toLowerCase() === peg$c28) {
+          s1 = input.substr(peg$currPos, 6);
+          peg$currPos += 6;
+        } else {
+          s1 = peg$FAILED;
+          if (peg$silentFails === 0) { peg$fail(peg$c29); }
+        }
+        if (s1 !== peg$FAILED) {
+          peg$reportedPos = s0;
+          s1 = peg$c54();
+        }
+        s0 = s1;
+        if (s0 === peg$FAILED) {
+          s0 = peg$currPos;
+          if (input.substr(peg$currPos, 4).toLowerCase() === peg$c30) {
+            s1 = input.substr(peg$currPos, 4);
+            peg$currPos += 4;
+          } else {
+            s1 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c31); }
+          }
+          if (s1 !== peg$FAILED) {
+            peg$reportedPos = s0;
+            s1 = peg$c55();
+          }
+          s0 = s1;
+          if (s0 === peg$FAILED) {
+            s0 = peg$currPos;
+            if (input.substr(peg$currPos, 7).toLowerCase() === peg$c32) {
+              s1 = input.substr(peg$currPos, 7);
+              peg$currPos += 7;
+            } else {
+              s1 = peg$FAILED;
+              if (peg$silentFails === 0) { peg$fail(peg$c33); }
+            }
+            if (s1 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c56();
+            }
+            s0 = s1;
+          }
+        }
+      }
+
+      return s0;
+    }
+
+    function peg$parseCNACommand() {
+      var s0, s1, s2, s3, s4, s5;
+
+      s0 = peg$currPos;
+      if (input.substr(peg$currPos, 3).toLowerCase() === peg$c57) {
+        s1 = input.substr(peg$currPos, 3);
+        peg$currPos += 3;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c58); }
+      }
+      if (s1 !== peg$FAILED) {
+        s2 = peg$parsemsp();
+        if (s2 !== peg$FAILED) {
+          s3 = peg$parseComparisonOp();
+          if (s3 !== peg$FAILED) {
+            s4 = peg$parsemsp();
+            if (s4 !== peg$FAILED) {
+              s5 = peg$parseCNAType();
+              if (s5 !== peg$FAILED) {
+                peg$reportedPos = s0;
+                s1 = peg$c59(s3, s5);
+                s0 = s1;
+              } else {
+                peg$currPos = s0;
+                s0 = peg$c1;
+              }
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      } else {
+        peg$currPos = s0;
+        s0 = peg$c1;
+      }
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        s1 = peg$parseCNAType();
+        if (s1 !== peg$FAILED) {
+          peg$reportedPos = s0;
+          s1 = peg$c60(s1);
+        }
+        s0 = s1;
+      }
+
+      return s0;
+    }
+
+    function peg$parseMUTCommand() {
+      var s0, s1, s2, s3, s4, s5;
+
+      s0 = peg$currPos;
+      if (input.substr(peg$currPos, 3) === peg$c61) {
+        s1 = peg$c61;
+        peg$currPos += 3;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c35); }
+      }
+      if (s1 !== peg$FAILED) {
+        s2 = peg$parsemsp();
+        if (s2 !== peg$FAILED) {
+          if (input.charCodeAt(peg$currPos) === 61) {
+            s3 = peg$c62;
+            peg$currPos++;
+          } else {
+            s3 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c63); }
+          }
+          if (s3 !== peg$FAILED) {
+            s4 = peg$parsemsp();
+            if (s4 !== peg$FAILED) {
+              s5 = peg$parseMutation();
+              if (s5 !== peg$FAILED) {
+                peg$reportedPos = s0;
+                s1 = peg$c64(s5);
+                s0 = s1;
+              } else {
+                peg$currPos = s0;
+                s0 = peg$c1;
+              }
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      } else {
+        peg$currPos = s0;
+        s0 = peg$c1;
+      }
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        if (input.substr(peg$currPos, 3) === peg$c61) {
+          s1 = peg$c61;
+          peg$currPos += 3;
+        } else {
+          s1 = peg$FAILED;
+          if (peg$silentFails === 0) { peg$fail(peg$c35); }
+        }
+        if (s1 !== peg$FAILED) {
+          s2 = peg$parsemsp();
+          if (s2 !== peg$FAILED) {
+            if (input.substr(peg$currPos, 2) === peg$c65) {
+              s3 = peg$c65;
+              peg$currPos += 2;
+            } else {
+              s3 = peg$FAILED;
+              if (peg$silentFails === 0) { peg$fail(peg$c66); }
+            }
+            if (s3 !== peg$FAILED) {
+              s4 = peg$parsemsp();
+              if (s4 !== peg$FAILED) {
+                s5 = peg$parseMutation();
+                if (s5 !== peg$FAILED) {
+                  peg$reportedPos = s0;
+                  s1 = peg$c67(s5);
+                  s0 = s1;
+                } else {
+                  peg$currPos = s0;
+                  s0 = peg$c1;
+                }
+              } else {
+                peg$currPos = s0;
+                s0 = peg$c1;
+              }
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+        if (s0 === peg$FAILED) {
+          s0 = peg$currPos;
+          if (input.substr(peg$currPos, 3) === peg$c61) {
+            s1 = peg$c61;
+            peg$currPos += 3;
+          } else {
+            s1 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c35); }
+          }
+          if (s1 !== peg$FAILED) {
+            peg$reportedPos = s0;
+            s1 = peg$c68();
+          }
+          s0 = s1;
+          if (s0 === peg$FAILED) {
+            s0 = peg$currPos;
+            s1 = peg$parseMutation();
+            if (s1 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c64(s1);
+            }
+            s0 = s1;
+          }
+        }
+      }
+
+      return s0;
+    }
+
+    function peg$parseEXPCommand() {
+      var s0, s1, s2, s3, s4, s5;
+
+      s0 = peg$currPos;
+      if (input.substr(peg$currPos, 3) === peg$c69) {
+        s1 = peg$c69;
+        peg$currPos += 3;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c37); }
+      }
+      if (s1 !== peg$FAILED) {
+        s2 = peg$parsemsp();
+        if (s2 !== peg$FAILED) {
+          s3 = peg$parseComparisonOp();
+          if (s3 !== peg$FAILED) {
+            s4 = peg$parsemsp();
+            if (s4 !== peg$FAILED) {
+              s5 = peg$parseNumber();
+              if (s5 !== peg$FAILED) {
+                peg$reportedPos = s0;
+                s1 = peg$c70(s3, s5);
+                s0 = s1;
+              } else {
+                peg$currPos = s0;
+                s0 = peg$c1;
+              }
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      } else {
+        peg$currPos = s0;
+        s0 = peg$c1;
+      }
+
+      return s0;
+    }
+
+    function peg$parseFUSIONCommand() {
+      var s0, s1;
+
+      s0 = peg$currPos;
+      if (input.substr(peg$currPos, 6) === peg$c71) {
+        s1 = peg$c71;
+        peg$currPos += 6;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c72); }
+      }
+      if (s1 !== peg$FAILED) {
+        peg$reportedPos = s0;
+        s1 = peg$c73();
+      }
+      s0 = s1;
+
+      return s0;
+    }
+
+    function peg$parsePROTCommand() {
+      var s0, s1, s2, s3, s4, s5;
+
+      s0 = peg$currPos;
+      if (input.substr(peg$currPos, 4) === peg$c74) {
+        s1 = peg$c74;
+        peg$currPos += 4;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c39); }
+      }
+      if (s1 !== peg$FAILED) {
+        s2 = peg$parsemsp();
+        if (s2 !== peg$FAILED) {
+          s3 = peg$parseComparisonOp();
+          if (s3 !== peg$FAILED) {
+            s4 = peg$parsemsp();
+            if (s4 !== peg$FAILED) {
+              s5 = peg$parseNumber();
+              if (s5 !== peg$FAILED) {
+                peg$reportedPos = s0;
+                s1 = peg$c75(s3, s5);
+                s0 = s1;
+              } else {
+                peg$currPos = s0;
+                s0 = peg$c1;
+              }
+            } else {
+              peg$currPos = s0;
+              s0 = peg$c1;
+            }
+          } else {
+            peg$currPos = s0;
+            s0 = peg$c1;
+          }
+        } else {
+          peg$currPos = s0;
+          s0 = peg$c1;
+        }
+      } else {
+        peg$currPos = s0;
+        s0 = peg$c1;
+      }
+
+      return s0;
+    }
+
+    function peg$parseComparisonOp() {
+      var s0, s1;
+
+      s0 = peg$currPos;
+      if (input.substr(peg$currPos, 2) === peg$c76) {
+        s1 = peg$c76;
+        peg$currPos += 2;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c77); }
+      }
+      if (s1 !== peg$FAILED) {
+        peg$reportedPos = s0;
+        s1 = peg$c78();
+      }
+      s0 = s1;
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        if (input.substr(peg$currPos, 2) === peg$c79) {
+          s1 = peg$c79;
+          peg$currPos += 2;
+        } else {
+          s1 = peg$FAILED;
+          if (peg$silentFails === 0) { peg$fail(peg$c80); }
+        }
+        if (s1 !== peg$FAILED) {
+          peg$reportedPos = s0;
+          s1 = peg$c81();
+        }
+        s0 = s1;
+        if (s0 === peg$FAILED) {
+          s0 = peg$currPos;
+          if (input.charCodeAt(peg$currPos) === 62) {
+            s1 = peg$c82;
+            peg$currPos++;
+          } else {
+            s1 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c83); }
+          }
+          if (s1 !== peg$FAILED) {
+            peg$reportedPos = s0;
+            s1 = peg$c84();
+          }
+          s0 = s1;
+          if (s0 === peg$FAILED) {
+            s0 = peg$currPos;
+            if (input.charCodeAt(peg$currPos) === 60) {
+              s1 = peg$c85;
+              peg$currPos++;
+            } else {
+              s1 = peg$FAILED;
+              if (peg$silentFails === 0) { peg$fail(peg$c86); }
+            }
+            if (s1 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c87();
+            }
+            s0 = s1;
+          }
+        }
+      }
+
+      return s0;
+    }
+
+    function peg$parseMutation() {
+      var s0, s1, s2, s3;
+
+      s0 = peg$currPos;
+      if (input.substr(peg$currPos, 8).toLowerCase() === peg$c88) {
+        s1 = input.substr(peg$currPos, 8);
+        peg$currPos += 8;
+      } else {
+        s1 = peg$FAILED;
+        if (peg$silentFails === 0) { peg$fail(peg$c89); }
+      }
+      if (s1 !== peg$FAILED) {
+        peg$reportedPos = s0;
+        s1 = peg$c90();
+      }
+      s0 = s1;
+      if (s0 === peg$FAILED) {
+        s0 = peg$currPos;
+        if (input.substr(peg$currPos, 8).toLowerCase() === peg$c91) {
+          s1 = input.substr(peg$currPos, 8);
+          peg$currPos += 8;
+        } else {
+          s1 = peg$FAILED;
+          if (peg$silentFails === 0) { peg$fail(peg$c92); }
+        }
+        if (s1 !== peg$FAILED) {
+          peg$reportedPos = s0;
+          s1 = peg$c93();
+        }
+        s0 = s1;
+        if (s0 === peg$FAILED) {
+          s0 = peg$currPos;
+          if (input.substr(peg$currPos, 8).toLowerCase() === peg$c94) {
+            s1 = input.substr(peg$currPos, 8);
+            peg$currPos += 8;
+          } else {
+            s1 = peg$FAILED;
+            if (peg$silentFails === 0) { peg$fail(peg$c95); }
+          }
+          if (s1 !== peg$FAILED) {
+            peg$reportedPos = s0;
+            s1 = peg$c96();
+          }
+          s0 = s1;
+          if (s0 === peg$FAILED) {
+            s0 = peg$currPos;
+            if (input.substr(peg$currPos, 7).toLowerCase() === peg$c97) {
+              s1 = input.substr(peg$currPos, 7);
+              peg$currPos += 7;
+            } else {
+              s1 = peg$FAILED;
+              if (peg$silentFails === 0) { peg$fail(peg$c98); }
+            }
+            if (s1 !== peg$FAILED) {
+              peg$reportedPos = s0;
+              s1 = peg$c99();
+            }
+            s0 = s1;
+            if (s0 === peg$FAILED) {
+              s0 = peg$currPos;
+              if (input.substr(peg$currPos, 10).toLowerCase() === peg$c100) {
+                s1 = input.substr(peg$currPos, 10);
+                peg$currPos += 10;
+              } else {
+                s1 = peg$FAILED;
+                if (peg$silentFails === 0) { peg$fail(peg$c101); }
+              }
+              if (s1 !== peg$FAILED) {
+                peg$reportedPos = s0;
+                s1 = peg$c102();
+              }
+              s0 = s1;
+              if (s0 === peg$FAILED) {
+                s0 = peg$currPos;
+                if (input.substr(peg$currPos, 7).toLowerCase() === peg$c103) {
+                  s1 = input.substr(peg$currPos, 7);
+                  peg$currPos += 7;
+                } else {
+                  s1 = peg$FAILED;
+                  if (peg$silentFails === 0) { peg$fail(peg$c104); }
+                }
+                if (s1 !== peg$FAILED) {
+                  peg$reportedPos = s0;
+                  s1 = peg$c105();
+                }
+                s0 = s1;
+                if (s0 === peg$FAILED) {
+                  s0 = peg$currPos;
+                  if (input.substr(peg$currPos, 6).toLowerCase() === peg$c106) {
+                    s1 = input.substr(peg$currPos, 6);
+                    peg$currPos += 6;
+                  } else {
+                    s1 = peg$FAILED;
+                    if (peg$silentFails === 0) { peg$fail(peg$c107); }
+                  }
+                  if (s1 !== peg$FAILED) {
+                    peg$reportedPos = s0;
+                    s1 = peg$c108();
+                  }
+                  s0 = s1;
+                  if (s0 === peg$FAILED) {
+                    s0 = peg$currPos;
+                    if (input.substr(peg$currPos, 5).toLowerCase() === peg$c109) {
+                      s1 = input.substr(peg$currPos, 5);
+                      peg$currPos += 5;
+                    } else {
+                      s1 = peg$FAILED;
+                      if (peg$silentFails === 0) { peg$fail(peg$c110); }
+                    }
+                    if (s1 !== peg$FAILED) {
+                      peg$reportedPos = s0;
+                      s1 = peg$c111();
+                    }
+                    s0 = s1;
+                    if (s0 === peg$FAILED) {
+                      s0 = peg$currPos;
+                      if (input.substr(peg$currPos, 8).toLowerCase() === peg$c112) {
+                        s1 = input.substr(peg$currPos, 8);
+                        peg$currPos += 8;
+                      } else {
+                        s1 = peg$FAILED;
+                        if (peg$silentFails === 0) { peg$fail(peg$c113); }
+                      }
+                      if (s1 !== peg$FAILED) {
+                        peg$reportedPos = s0;
+                        s1 = peg$c114();
+                      }
+                      s0 = s1;
+                      if (s0 === peg$FAILED) {
+                        s0 = peg$currPos;
+                        s1 = peg$parseAminoAcid();
+                        if (s1 !== peg$FAILED) {
+                          s2 = peg$parseNaturalNumber();
+                          if (s2 !== peg$FAILED) {
+                            s3 = peg$parseString();
+                            if (s3 !== peg$FAILED) {
+                              peg$reportedPos = s0;
+                              s1 = peg$c115(s1, s2, s3);
+                              s0 = s1;
+                            } else {
+                              peg$currPos = s0;
+                              s0 = peg$c1;
+                            }
+                          } else {
+                            peg$currPos = s0;
+                            s0 = peg$c1;
+                          }
+                        } else {
+                          peg$currPos = s0;
+                          s0 = peg$c1;
+                        }
+                        if (s0 === peg$FAILED) {
+                          s0 = peg$currPos;
+                          s1 = peg$parseAminoAcid();
+                          if (s1 !== peg$FAILED) {
+                            s2 = peg$parseNaturalNumber();
+                            if (s2 !== peg$FAILED) {
+                              peg$reportedPos = s0;
+                              s1 = peg$c116(s1, s2);
+                              s0 = s1;
+                            } else {
+                              peg$currPos = s0;
+                              s0 = peg$c1;
+                            }
+                          } else {
+                            peg$currPos = s0;
+                            s0 = peg$c1;
+                          }
+                          if (s0 === peg$FAILED) {
+                            s0 = peg$currPos;
+                            s1 = peg$parseString();
+                            if (s1 !== peg$FAILED) {
+                              peg$reportedPos = s0;
+                              s1 = peg$c117(s1);
+                            }
+                            s0 = s1;
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      return s0;
+    }
+
+    peg$result = peg$startRuleFunction();
+
+    if (peg$result !== peg$FAILED && peg$currPos === input.length) {
+      return peg$result;
+    } else {
+      if (peg$result !== peg$FAILED && peg$currPos < input.length) {
+        peg$fail({ type: "end", description: "end of input" });
+      }
+
+      throw peg$buildException(null, peg$maxFailExpected, peg$maxFailPos);
+    }
+  }
+
+  return {
+    SyntaxError: SyntaxError,
+    parse:       parse
+  };
+})();
+
+export default oql_parser;
\ No newline at end of file
diff --git a/src/shared/lib/oql/oql_basic.pegjs b/src/shared/lib/oql/oql_basic.pegjs
new file mode 100644
index 00000000000..b5fba1a74ac
--- /dev/null
+++ b/src/shared/lib/oql/oql_basic.pegjs
@@ -0,0 +1,102 @@
+start
+	= Query
+	/ sp { return false; }
+
+br	= [\n] b:br
+        / ";" b:br
+        / [\n]
+	/ ";"
+
+NaturalNumber = number:[0-9]+ { return number.join("");}
+Number = "-" number: Number { return "-"+number;}
+        / whole_part:NaturalNumber "." decimal_part:NaturalNumber { return whole_part + "." + decimal_part;}
+        / "." decimal_part:NaturalNumber { return "."+decimal_part;}
+        / whole_part:NaturalNumber {return whole_part;}
+String = word:[-_.@/a-zA-Z0-9*]+ { return word.join("") }
+AminoAcid = letter:[GPAVLIMCFYWHKRQNEDST] { return letter; }
+
+sp = space:[ \t\r]+
+msp = space:[ \t\r]*
+
+
+// Case-insensitive keywords
+AMP = "AMP"i
+HOMDEL = "HOMDEL"i
+GAIN = "GAIN"i
+HETLOSS = "HETLOSS"i
+MUT = "MUT"i
+EXP = "EXP"i
+PROT = "PROT"i
+
+Query
+	= listofgenes:ListOfGenes msp br rest:Query { return listofgenes.map(function(gene) { return {"gene":gene, "alterations":false}; }).concat(rest); }
+        / listofgenes:ListOfGenes msp br { return listofgenes.map(function(gene) { return {"gene":gene, "alterations":false}; }); }
+        / listofgenes:ListOfGenes msp { return listofgenes.map(function(gene) { return {"gene":gene, "alterations":false}; }); }
+	/ msp first:SingleGeneQuery msp br rest:Query  { return [first].concat(rest); }
+	/ msp first:SingleGeneQuery msp br { return [first]; }
+	/ msp first:SingleGeneQuery msp { return [first]; }
+
+ListOfGenes
+	= msp geneName:String msp rest:ListOfGenes { return [geneName].concat(rest);}
+	/ msp geneName1:String msp geneName2:String msp{ return [geneName1, geneName2]; }
+
+SingleGeneQuery 
+	= geneName:String msp ":" msp alts:Alterations { return {"gene": geneName, "alterations": alts}; }
+	/ geneName:String { return {"gene": geneName, "alterations":false}; }
+
+Alterations
+	= a1:Alteration sp a2:Alterations { return [a1].concat(a2);}
+	/ a1:Alteration { return [a1]; }
+
+Alteration
+	= cmd:CNACommand { return cmd; }
+	/ cmd:EXPCommand { return cmd; }
+	/ cmd:PROTCommand { return cmd; }
+        / cmd:FUSIONCommand { return cmd; }
+// MUT has to go at the end because it matches an arbitrary string at the end as a type of mutation
+	/ cmd:MUTCommand { return cmd; }
+
+CNAType
+        = "AMP"i { return "AMP"; }
+        / "HOMDEL"i { return "HOMDEL"; }
+        / "GAIN"i { return "GAIN"; }
+        / "HETLOSS"i { return "HETLOSS"; }
+
+CNACommand
+	= "CNA"i msp op:ComparisonOp msp constrval:CNAType { return {"alteration_type":"cna", "constr_rel":op, "constr_val":constrval}; }
+        / constrval:CNAType { return {"alteration_type":"cna", "constr_rel":"=", "constr_val":constrval}; }
+
+MUTCommand
+	= "MUT" msp "=" msp mutation:Mutation { return {"alteration_type":"mut", "constr_rel": "=", "constr_type":mutation.type, "constr_val":mutation.value, "info":mutation.info}; }
+	/ "MUT" msp "!=" msp mutation:Mutation { return {"alteration_type":"mut", "constr_rel": "!=", "constr_type":mutation.type, "constr_val":mutation.value, "info":mutation.info}; }
+	/ "MUT" { return {"alteration_type":"mut"}; }
+	/ mutation:Mutation { return {"alteration_type":"mut", "constr_rel": "=", "constr_type":mutation.type, "constr_val":mutation.value, "info":mutation.info}; }
+
+EXPCommand
+	= "EXP" msp op:ComparisonOp msp constrval:Number { return {"alteration_type":"exp", "constr_rel":op, "constr_val":parseFloat(constrval)}; }
+
+FUSIONCommand
+        = "FUSION" { return {"alteration_type":"fusion"}; }
+
+PROTCommand
+	= "PROT" msp op:ComparisonOp msp constrval:Number { return {"alteration_type":"prot", "constr_rel":op, "constr_val":parseFloat(constrval)}; }
+
+ComparisonOp
+	= ">=" { return ">="; }
+	/ "<=" { return "<="; }
+	/ ">" { return ">"; }
+	/ "<" { return "<"; }
+
+Mutation
+	= "MISSENSE"i { return {"type":"class", "value":"MISSENSE", "info":{}}; }
+	/ "NONSENSE"i { return {"type":"class", "value":"NONSENSE", "info":{}}; }
+	/ "NONSTART"i { return {"type":"class", "value":"NONSTART", "info":{}}; }
+	/ "NONSTOP"i { return {"type":"class", "value":"NONSTOP", "info":{}}; }
+	/ "FRAMESHIFT"i { return {"type":"class", "value":"FRAMESHIFT", "info":{}}; }
+	/ "INFRAME"i { return {"type":"class", "value":"INFRAME", "info":{}}; }
+	/ "SPLICE"i { return {"type":"class", "value":"SPLICE", "info":{}}; }
+	/ "TRUNC"i { return {"type":"class", "value":"TRUNC", "info":{}}; }
+        / "PROMOTER"i { return {"type":"class", "value":"PROMOTER", "info":{}}; }
+        / letter:AminoAcid position:NaturalNumber string:String { return {"type":"name" , "value":(letter+position+string), "info":{}};}
+        / letter:AminoAcid position:NaturalNumber { return {"type":"position", "value":parseInt(position), "info":{"amino_acid":letter.toUpperCase()}}; }
+	/ mutation_name:String { return {"type":"name", "value":mutation_name, "info":{}}; }
diff --git a/src/shared/lib/oql/test-oql-parser.js b/src/shared/lib/oql/test-oql-parser.js
new file mode 100644
index 00000000000..8d609f50e5e
--- /dev/null
+++ b/src/shared/lib/oql/test-oql-parser.js
@@ -0,0 +1,108 @@
+parser = require("./oql-parser.js");
+
+var checkDeepEquality = function(expected, given) {
+	try {
+		for (var i = 0; i < expected.length; i++) {
+			var exp_alt = expected[i];
+			var giv_alt = given[i];
+
+			var same_keys = true;
+			var same_values = true;
+			for (var key in exp_alt) {
+				if (exp_alt.hasOwnProperty(key)) {
+					same_keys = same_keys && giv_alt.hasOwnProperty(key);
+					var giv_val = giv_alt[key];
+					var exp_val = exp_alt[key];
+					if (typeof giv_val !== typeof exp_val) {
+					    same_values = false;
+					    break;
+					} else if (typeof giv_val === "object") {
+					    // Recursively check if nested objects are equal
+					    same_values = same_values && checkDeepEquality(giv_val, exp_val);
+					} else {
+					    same_values = same_values && (giv_val === exp_val);
+					}
+				}
+			}
+			for (var key in giv_alt) {
+				if (giv_alt.hasOwnProperty(key)) {
+					same_keys = same_keys && exp_alt.hasOwnProperty(key);
+				}
+			}
+			if (!same_keys || !same_values) {
+				return false;
+			}
+		}	
+		return true;
+	} catch (err) {
+		return false;
+	}
+};
+
+var testCmd = function(cmd, expected) {
+	try {
+		var given = parser.parse(cmd);
+		for (var i = 0; i < expected.length; i++) {
+			if (!(expected[i].gene === given[i].gene && checkDeepEquality(expected[i].alterations, given[i].alterations))) {
+				return false;
+			}
+		}	
+		return true;
+	} catch (err) {
+		return false;
+	}
+};
+
+var failed_a_test = false;
+
+var doTest = function(cmd, expected) {
+	if (!testCmd(cmd, expected)) {	
+		failed_a_test = true;
+		console.log("Test failed for command: "+cmd);
+		console.log("Got "+JSON.stringify(parser.parse(cmd)));
+	}
+};
+
+doTest("TP53", [{gene:"TP53", alterations:false}]);
+doTest("TP53;", [{gene:"TP53", alterations:false}]);
+doTest("TP53\n", [{gene:"TP53", alterations:false}]);
+doTest("TP53 BRCA1 KRAS NRAS", [{gene:"TP53", alterations:false}, {gene:"BRCA1", alterations:false}, {gene:"KRAS", alterations:false}, {gene:"NRAS", alterations:false}]);
+doTest("TP53:MUT", [{gene:"TP53", alterations:[{alteration_type: "mut"}]}])
+doTest("TP53:MISSENSE PROMOTER", [{gene:"TP53", alterations:[{alteration_type: "mut", constr_rel: "=", constr_type: "class", constr_val: "MISSENSE", info: {}},{alteration_type: "mut", constr_rel: "=", constr_type: "class", constr_val: "PROMOTER", info: {}}]}])
+doTest("TP53:MUT;", [{gene:"TP53", alterations:[{alteration_type: "mut"}]}])
+doTest("TP53:MUT\n", [{gene:"TP53", alterations:[{alteration_type: "mut"}]}])
+doTest("TP53:MUT; BRCA1: gAiN hetloss EXP>=3 PROT<1", [{gene:"TP53", alterations:[{alteration_type: "mut"}]},
+							{gene:"BRCA1", alterations:[{alteration_type: "cna", constr_rel: "=", constr_val: "GAIN"}, 
+										    {alteration_type: "cna", constr_rel: "=", constr_val: "HETLOSS"},
+										    {alteration_type: "exp", constr_rel: ">=", constr_val: 3},
+										    {alteration_type: "prot", constr_rel: "<", constr_val: 1}]}])
+doTest("TP53:MUT;;;\n BRCA1: AMP HOMDEL EXP>=3 PROT<1", [{gene:"TP53", alterations:[{alteration_type: "mut"}]},
+							{gene:"BRCA1", alterations:[{alteration_type: "cna", constr_rel: "=", constr_val: "AMP"}, 
+										    {alteration_type: "cna", constr_rel: "=", constr_val: "HOMDEL"},
+										    {alteration_type: "exp", constr_rel: ">=", constr_val: 3},
+										    {alteration_type: "prot", constr_rel: "<", constr_val: 1}]}])
+doTest("TP53:MUT;\n BRCA1: amp GAIN EXP>=3 PROT<1", [{gene:"TP53", alterations:[{alteration_type: "mut"}]},
+							{gene:"BRCA1", alterations:[{alteration_type: "cna", constr_rel: "=", constr_val: "AMP"}, 
+										    {alteration_type: "cna", constr_rel: "=", constr_val: "GAIN"},
+										    {alteration_type: "exp", constr_rel: ">=", constr_val: 3},
+										    {alteration_type: "prot", constr_rel: "<", constr_val: 1}]}])
+doTest("TP53:MUT\n BRCA1: AMP HOMDEL EXP>=3 PROT<1;", [{gene:"TP53", alterations:[{alteration_type: "mut"}]},
+							{gene:"BRCA1", alterations:[{alteration_type: "cna", constr_rel: "=", constr_val: "AMP"}, 
+										    {alteration_type: "cna", constr_rel: "=", constr_val: "HOMDEL"},
+										    {alteration_type: "exp", constr_rel: ">=", constr_val: 3},
+										    {alteration_type: "prot", constr_rel: "<", constr_val: 1}]}])
+
+doTest("TP53:PROT<=-2\n", [{gene:"TP53", alterations:[{alteration_type: "prot", constr_rel: "<=", constr_val:-2}]}])
+
+doTest("BRAF:MUT=V600E", [{gene:"BRAF", alterations:[{alteration_type: "mut", constr_rel: "=", constr_type:"name", constr_val:"V600E", info:{}}]}])
+doTest("BRAF:MUT=V600", [{gene:"BRAF", alterations:[{alteration_type: "mut", constr_rel: "=", constr_type:"position", constr_val:600, info:{amino_acid:"V"}}]}])
+doTest("BRAF:FUSION MUT=V600", [{gene:"BRAF", alterations:[{alteration_type:'fusion'}, {alteration_type: "mut", constr_rel: "=", constr_type:"position", constr_val:600, info:{}}]}])
+doTest("BRAF:FUSION", [{gene:"BRAF", alterations:[{alteration_type:'fusion'}]}])
+doTest("MIR-493*:MUT=V600", [{gene:"MIR-493*", alterations:[{alteration_type: "mut", constr_rel: "=", constr_type:"position", constr_val:600, info:{amino_acid:"V"}}]}])
+
+doTest("BRAF:CNA >= gain", [{gene:"BRAF", alterations:[{alteration_type:"cna", constr_rel:">=", constr_val:"GAIN"}]}])
+doTest("BRAF:CNA < homdel", [{gene:"BRAF", alterations:[{alteration_type:"cna", constr_rel:"<", constr_val:"HOMDEL"}]}])
+
+if (!failed_a_test) {
+	console.log("Passed all tests!");
+}

From 18793a4121c02deb9307c70b2d8317dacc1376b9 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 15 Feb 2017 17:12:32 -0500
Subject: [PATCH 034/133] added gene validation, sans gui

---
 .../components/query/GeneSetSelector.tsx      |  13 +-
 .../components/query/GeneSymbolValidator.tsx  | 269 +++++++++++++++++-
 src/shared/components/query/QueryStore.ts     |  80 +++++-
 .../components/query/styles.module.scss       |   8 +-
 src/shared/lib/oql/oql-parser.d.ts            |  14 +
 5 files changed, 360 insertions(+), 24 deletions(-)
 create mode 100644 src/shared/lib/oql/oql-parser.d.ts

diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 47dbc42f102..0177b87642f 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -6,11 +6,14 @@ import {observer} from "../../../../node_modules/mobx-react/index";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import gene_lists from './gene_lists';
 import GeneSymbolValidator from "./GeneSymbolValidator";
+import classNames from "../../lib/classNames";
 
 const styles = styles_any as {
 	GeneSetSelector: string,
 	ReactSelect: string,
 	geneSet: string,
+	empty: string,
+	notEmpty: string,
 };
 
 @observer
@@ -38,9 +41,9 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 				<a href='/onco_query_lang_desc.jsp'>Advanced: Onco Query Language (OQL)</a>
 				<ReactSelect
 					className={styles.ReactSelect}
-					value={this.store.geneSet}
+					value={this.store.geneQuery}
 					options={options}
-					onChange={(option:{value:string}) => this.store.geneSet = option.value}
+					onChange={(option:{value:string}) => this.store.geneQuery = option.value}
 				/>
 
 				<FlexRow padded>
@@ -53,14 +56,14 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 				</FlexRow>
 
 				<textarea
-					className={styles.geneSet}
+					className={classNames(styles.geneSet, this.store.geneQuery ? styles.notEmpty : styles.empty)}
 					rows={5}
 					cols={80}
 					placeholder="Enter HUGO Gene Symbols or Gene Aliases"
 					title="Enter HUGO Gene Symbols or Gene Aliases"
-					value={this.store.geneSet}
+					value={this.store.geneQuery}
 					onChange={event => {
-						this.store.geneSet = (event.target as HTMLTextAreaElement).value;
+						this.store.geneQuery = (event.target as HTMLTextAreaElement).value;
 					}}
 				/>
 
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 378c802e00c..2d564969e4c 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -7,6 +7,10 @@ import {observer} from "../../../../node_modules/mobx-react/index";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import gene_lists from './gene_lists';
 import oql_parser from '../../lib/oql/oql-parser';
+import client from "../../api/cbioportalClientInstance";
+import {remoteData} from "../../api/remoteData";
+import {Gene} from "../../api/CBioPortalAPI";
+import Spinner from "react-spinkit";
 
 @observer
 export default class GeneSymbolValidator extends React.Component<{}, {}>
@@ -16,29 +20,266 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 		return queryStore;
 	}
 
-	disposeAutorun = autorunAsync('validateGenes', () => {
-		try
+	/*
+	@observable.ref _genesPromise:Promise<Gene[]>;
+
+	readonly genes = remoteData<Gene[]>(() => this._genesPromise || Promise.resolve([]), []);
+
+	disposeReaction = reaction(() => this.store.geneQuery, _.debounce(() => this.requestGenes(), 500));
+
+	requestGenes()
+	{
+		let promises:Promise<Gene[]>[] = [];
+		let numberCount = this.store.geneIds.filter(id => Number.isInteger(Number(id))).length;
+		if (numberCount > 0)
+			promises.push(client.fetchGenesUsingPOST({geneIdType: "ENTREZ_GENE_ID", geneIds: this.store.geneIds}));
+		if (numberCount < this.store.geneIds.length)
+			promises.push(client.fetchGenesUsingPOST({geneIdType: "HUGO_GENE_SYMBOL", geneIds: this.store.geneIds}));
+
+		this._genesPromise = Promise.all(promises).then(results => ([] as Gene[]).concat(...results));
+	}
+
+	componentWillUnmount()
+	{
+		this.disposeReaction();
+	}
+	*/
+/*
+	validateGenes = (geneSet:string) =>
+	{
+		if (!geneSet)
+			return;
+
+		let symbolResults = this.store.genes.result;
+
+		$("#genestatus").html("");
+		var stateList = $("<ul>").addClass("ui-widget icon-collection validation-list");
+		var allValid = true;
+
+		// If the number of genes is more than 100, show an error
+		if (symbolResults.length > 100)
+		{
+			var invalidState = $("<li>").addClass("ui-state-default ui-corner-all");
+			var invalidSpan = $("<span>")
+				.addClass("ui-icon ui-icon-notice");
+			var invalidText = $("<span>").addClass("text");
+			invalidText.html("<b>You have entered more than 100 genes.</b>");
+
+			invalidState.attr("title", "Please enter fewer genes for better performance.").tipTip();
+
+			invalidSpan.appendTo(invalidState);
+			invalidText.insertAfter(invalidSpan);
+			invalidState.addClass("ui-state-active");
+			invalidState.prependTo(stateList);
+
+			$("<br>").appendTo(stateList);
+			$("<br>").appendTo(stateList);
+
+			stateList.appendTo("#genestatus");
+
+			return;
+		}
+
+		for (var j = 0; j < symbolResults.length; j++)
 		{
-			this.results = oql_parser.parse(this.store.geneSet);
+			var aResult = symbolResults[j];
+			var multiple = false;
+			var foundSynonym = false;
+			var valid = true;
+			var symbols = [];
+			var gene = aResult.name;
+
+			if (aResult.symbols.length == 1)
+			{
+				multiple = false;
+				if (aResult.symbols[0].toUpperCase() != aResult.name.toUpperCase())
+				{
+					foundSynonym = true;
+				}
+				else
+				{
+					continue;
+				}
+			}
+			else if (aResult.symbols.length > 1)
+			{
+				multiple = true;
+				symbols = aResult.symbols;
+			}
+			else
+			{
+				allValid = false;
+			}
+
+			if (foundSynonym || multiple)
+				allValid = false;
+
+			if (multiple)
+			{
+				var state = $("<li>").addClass("ui-state-default ui-corner-all ui-validator");
+				var stateSpan = $("<span>").addClass("ui-icon ui-icon-help");
+				var stateText = $("<span>").addClass("text");
+
+				stateText.html(gene + ": ");
+				var nameSelect = $("<select>").addClass("geneSelectBox").attr("name", gene);
+				$("<option>").attr("value", "")
+					.html("select a symbol")
+					.appendTo(nameSelect);
+				for (var k = 0; k < symbols.length; k++)
+				{
+					var aSymbol = symbols[k];
+					var anOption = $("<option>").attr("value", aSymbol).html(aSymbol);
+					anOption.appendTo(nameSelect);
+				}
+				nameSelect.appendTo(stateText);
+				nameSelect.change(function ()
+				{
+					var trueSymbol = $(this).attr('value');
+					var geneName = $(this).attr("name");
+					$("#gene_list").val($("#gene_list").val().replace(geneName, trueSymbol));
+					setTimeout(validateGenes, 500);
+				});
+
+				stateSpan.appendTo(state);
+				stateText.insertAfter(stateSpan);
+				state.attr("title",
+					"Ambiguous gene symbol. Click on one of the alternatives to replace it."
+				);
+				state.attr("name", gene);
+				state.appendTo(stateList);
+			}
+			else if (foundSynonym)
+			{
+				var state = $("<li>").addClass("ui-state-default ui-corner-all ui-validator");
+				var trueSymbol = aResult.symbols[0];
+
+				state.click(function ()
+				{
+					$(this).toggleClass('ui-state-active');
+					var names = $(this).attr("name").split(":");
+					var geneName = names[0];
+					var symbol = names[1];
+					$("#gene_list").val($("#gene_list").val().replace(geneName, symbol));
+					setTimeout(validateGenes, 500);
+				});
+
+				var stateSpan = $("<span>").addClass("ui-icon ui-icon-help");
+				var stateText = $("<span>").addClass("text");
+				stateText.html("<b>" + gene + "</b>: " + trueSymbol);
+				stateSpan.appendTo(state);
+				stateText.insertAfter(stateSpan);
+				state.attr("title",
+					"'" + gene + "' is a synonym for '" + trueSymbol + "'. "
+					+ "Click here to replace it with the official symbol."
+				);
+				state.attr("name", gene + ":" + trueSymbol);
+				state.appendTo(stateList);
+			}
+			else
+			{
+				var state = $("<li>").addClass("ui-state-default ui-corner-all ui-validator");
+				state.click(function ()
+				{
+					$(this).toggleClass('ui-state-active');
+					geneName = $(this).attr("name");
+					$("#gene_list").val($("#gene_list").val().replace(" " + geneName, ""));
+					$("#gene_list").val($("#gene_list").val().replace(geneName + " ", ""));
+					$("#gene_list").val($("#gene_list").val().replace(geneName + "\n", ""));
+					$("#gene_list").val($("#gene_list").val().replace(geneName, ""));
+					setTimeout(validateGenes, 500);
+				});
+				var stateSpan = $("<span>").addClass("ui-icon ui-icon-circle-close");
+				var stateText = $("<span>").addClass("text");
+				stateText.html(gene);
+				stateSpan.appendTo(state);
+				stateText.insertAfter(stateSpan);
+				state.attr("title",
+					"Could not find gene symbol. Click to remove it from the gene list."
+				);
+				state.attr("name", gene);
+				state.appendTo(stateList);
+			}
 		}
-		catch (e)
+
+		stateList.appendTo("#genestatus");
+
+		$('.ui-state-default').hover(
+			function ()
+			{
+				$(this).addClass('ui-state-hover');
+			},
+			function ()
+			{
+				$(this).removeClass('ui-state-hover');
+			}
+		);
+
+		$('.ui-validator').tipTip();
+
+		if (allValid)
 		{
-			this.error = e;
+			$("#main_submit").removeAttr("disabled")
+
+			if (symbolResults.length > 0
+				&& !(symbolResults[0].name == "" && symbolResults[0].symbols.length == 0))
+			{
+
+				var validState = $("<li>").addClass("ui-state-default ui-corner-all");
+				var validSpan = $("<span>")
+					.addClass("ui-icon ui-icon-circle-check");
+				var validText = $("<span>").addClass("text");
+				validText.html("All gene symbols are valid.");
+
+				validSpan.appendTo(validState);
+				validText.insertAfter(validSpan);
+				validState.addClass("ui-state-active");
+				validState.appendTo(stateList);
+				validState.attr("title", "You can now submit the list").tipTip();
+				$("<br>").appendTo(stateList);
+				$("<br>").appendTo(stateList);
+			}
+
 		}
-	}, 500);
+		else
+		{
+			var invalidState = $("<li>").addClass("ui-state-default ui-corner-all");
+			var invalidSpan = $("<span>")
+				.addClass("ui-icon ui-icon-notice");
+			var invalidText = $("<span>").addClass("text");
+			invalidText.html("<b>Invalid gene symbols.</b>");
 
-	@observable.ref results:ReadonlyArray<any> = [];
-	@observable.ref error?:Error = undefined;
+			invalidState.attr("title", "Please edit the gene symbols").tipTip();
 
+			invalidSpan.appendTo(invalidState);
+			invalidText.insertAfter(invalidSpan);
+			invalidState.addClass("ui-state-active");
+			invalidState.prependTo(stateList);
+
+			$("<br>").appendTo(stateList);
+			$("<br>").appendTo(stateList);
+		}
+	}
+*/
 	render()
 	{
+		if (this.store.genes.isPending)
+			return (
+				<div>
+					<Spinner/>
+					<small>Validating gene symbols...</small>
+				</div>
+			);
+
+		for (let result of this.store.oqlParserResult)
+			if (result.error)
+				return (
+					<small>Cannot validate gene symbols because of invalid OQL. Please click 'Submit' to see location of error.</small>
+				);
+
 		return (
-			<div>{JSON.stringify(this.results)}</div>
+			<FlexRow>
+				<pre>{JSON.stringify(this.store.genes.result, null, 4)}</pre>
+			</FlexRow>
 		);
 	}
-
-	componentWillUnmount()
-	{
-		this.disposeAutorun();
-	}
 }
\ No newline at end of file
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index f2cd475d5e3..faa201fe3a9 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,18 +1,26 @@
 import * as _ from 'lodash';
 import client from "../../api/cbioportalClientInstance";
 import {toJS, observable, reaction, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
-import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList} from "../../api/CBioPortalAPI";
+import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gene} from "../../api/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
 import {labelMobxPromises} from "../../api/MobxPromise";
 import internalClient from "../../api/cbioportalInternalClientInstance";
 import {MutSig, Gistic} from "../../api/CBioPortalAPIInternal";
+import oql_parser from "../../lib/oql/oql-parser";
+import {SyntaxError} from "../../lib/oql/oql-parser";
+import memoize from "../../lib/memoize";
 
 export type PriorityStudies = {
 	[category:string]: string[]
 };
 
+function isInteger(str:string)
+{
+	return Number.isInteger(Number(str));
+}
+
 // mobx observable
 export class QueryStore
 {
@@ -33,7 +41,7 @@ export class QueryStore
 			'selectedSampleListId',
 			'caseIds',
 			'caseIdsMode',
-			'geneSet',
+			'geneQuery',
 		];
 		return _.pick(this, keys);
 	}
@@ -144,7 +152,7 @@ export class QueryStore
 
 	@observable caseIdsMode:'sample'|'patient' = 'sample';
 
-	@observable geneSet = '';
+	@observable geneQuery = '9 99 CFD FD FF DD';
 
 
 	////////////////////////////////////////////////////////////////////////////////
@@ -225,6 +233,42 @@ export class QueryStore
 		default: []
 	});
 
+	//TODO - delay this
+	readonly genes = remoteData<{found: Gene[], suggestions: {alias: string, genes: Gene[]}[]}>({
+		invoke: async () => {
+			let [entrezIds, hugoIds] = _.partition(this.geneIds, isInteger);
+
+			let entrezPromise:Promise<Gene[]>;
+			if (entrezIds.length)
+				entrezPromise = client.fetchGenesUsingPOST({geneIdType: "ENTREZ_GENE_ID", geneIds: entrezIds});
+			else
+				entrezPromise = Promise.resolve([]);
+
+			let hugoPromise:Promise<Gene[]>;
+			if (hugoIds.length)
+				hugoPromise = client.fetchGenesUsingPOST({geneIdType: "HUGO_GENE_SYMBOL", geneIds: hugoIds});
+			else
+				hugoPromise = Promise.resolve([]);
+
+			let [entrezGenes, hugoGenes] = await Promise.all([entrezPromise, hugoPromise]);
+			let found = [...entrezGenes, ...hugoGenes];
+			let missingEntrezIds = _.difference(entrezIds, entrezGenes.map(gene => gene.entrezGeneId + ''));
+			let missingHugoIds = _.difference(hugoIds, hugoGenes.map(gene => gene.hugoGeneSymbol));
+			let missingIds = _.union(missingEntrezIds, missingHugoIds);
+			let suggestions = await Promise.all(missingIds.map(alias => this.getGeneSuggestions(alias)));
+			return {found, suggestions};
+		},
+		default: {found: [], suggestions: []}
+	});
+
+	@memoize
+	getGeneSuggestions(alias:string):Promise<{alias: string, genes: Gene[]}>
+	{
+		if (isInteger(alias))
+			return Promise.resolve({alias, genes: []});
+		return client.getAllGenesUsingGET({alias}).then(genes => ({alias, genes}));
+	}
+
 
 	////////////////////////////////////////////////////////////////////////////////
 	// DERIVED DATA
@@ -307,7 +351,35 @@ export class QueryStore
 		return _.keyBy(this.sampleLists.result, sampleList => sampleList.sampleListId);
 	}
 
-	// GENE SET
+	// GENES
+
+	@computed get oqlParserResult():{gene?: string, error?: SyntaxError}[]
+	{
+		try
+		{
+			let geneQuery = this.geneQuery.toUpperCase().split(' ').filter(_.identity).join(' ');
+			if (!geneQuery)
+				return [];
+			return oql_parser.parse(geneQuery) || [];
+		}
+		catch (e)
+		{
+			return [{error: e as SyntaxError}];
+		}
+	}
+
+	@computed get geneIds():string[]
+	{
+		try
+		{
+			return this.oqlParserResult.map(line => line.gene).filter(gene => gene && gene !== 'DATATYPES') as string[];
+		}
+		catch (e)
+		{
+			return [];
+		}
+	}
+
 
 	////////////////////////////////////////////////////////////////////////////////
 	// ACTIONS
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index a4a6048f3d6..bcc5cfe7f48 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -240,6 +240,12 @@
   button {
   }
 
-  input.geneSet {
+  textarea.geneSet {
+
+    &.empty {
+    }
+    &.notEmpty {
+      text-transform: uppercase;
+    }
   }
 }
diff --git a/src/shared/lib/oql/oql-parser.d.ts b/src/shared/lib/oql/oql-parser.d.ts
new file mode 100644
index 00000000000..457f4f36dd2
--- /dev/null
+++ b/src/shared/lib/oql/oql-parser.d.ts
@@ -0,0 +1,14 @@
+export declare class SyntaxError
+{
+	constructor(message:string, expected:string, found:string, offset:number, line:number, column:number);
+
+	message: string;
+	expected: string;
+	found: string;
+	offset: number;
+	line: number;
+	column: number;
+	name: "SyntaxError";
+}
+
+export declare function parse(str:string):{gene: string}[] | undefined;

From 70aa2d0ac5689f434ed17ed4b1f8704e25d6aad9 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Thu, 16 Feb 2017 09:29:20 -0500
Subject: [PATCH 035/133] Update selected category indicator

---
 src/shared/components/query/styles.module.scss | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index bcc5cfe7f48..8df1f49ca5b 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -156,7 +156,23 @@
   }
 
   .containsSelectedStudies {
-    font-weight: bold;
+    color: #000;
+
+    .cancerTypeListItemCount {
+      position: relative;
+
+      &:before {
+        background: rgba(25, 130, 184, 0.5);
+        display: block;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        border-radius: 1px 2px 1px 2px;
+        content: ' ';
+        height: 5px;
+        width: 5px;
+      }
+    }
   }
 
   .searchTextInput {

From d125582c8e9e762ec13f999d9339192ca543b037 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 16 Feb 2017 11:09:50 -0500
Subject: [PATCH 036/133] use async/await

---
 src/shared/components/query/QueryStore.ts | 66 ++++++++++++-----------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index faa201fe3a9..96bf103c878 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -189,46 +189,49 @@ export class QueryStore
 	readonly cancerStudies = remoteData(client.getAllStudiesUsingGET({}), []);
 
 	readonly geneticProfiles = remoteData<GeneticProfile[]>({
-		invoke: () => {
-			if (this.singleSelectedStudyId)
-				return client.getAllGeneticProfilesInStudyUsingGET({studyId: this.singleSelectedStudyId});
-			return Promise.resolve([]);
+		invoke: async () => {
+			if (!this.singleSelectedStudyId)
+				return [];
+			return await client.getAllGeneticProfilesInStudyUsingGET({
+				studyId: this.singleSelectedStudyId
+			});
 		},
 		default: [],
 		reaction: () => this._selectedProfileIds = undefined
 	});
 
 	readonly sampleLists = remoteData<SampleList[]>({
-		invoke: () => {
-			if (this.singleSelectedStudyId)
-				return (
-					client.getAllSampleListsInStudyUsingGET({
-						studyId: this.singleSelectedStudyId,
-						projection: 'DETAILED'
-					}).then(
-						sampleLists => _.sortBy(sampleLists, sampleList => sampleList.name)
-					)
-				);
-			return Promise.resolve([]);
+		invoke: async () => {
+			if (!this.singleSelectedStudyId)
+				return [];
+			let sampleLists = await client.getAllSampleListsInStudyUsingGET({
+				studyId: this.singleSelectedStudyId,
+				projection: 'DETAILED'
+			});
+			return _.sortBy(sampleLists, sampleList => sampleList.name);
 		},
 		default: [],
 		reaction: () => this._selectedSampleListId = undefined
 	});
 
 	readonly mutSigForSingleStudy = remoteData<MutSig[]>({
-		invoke: () => {
-			if (this.singleSelectedStudyId)
-				return internalClient.getSignificantlyMutatedGenesUsingGET({studyId: this.singleSelectedStudyId});
-			return Promise.resolve([]);
+		invoke: async () => {
+			if (!this.singleSelectedStudyId)
+				return [];
+			return await internalClient.getSignificantlyMutatedGenesUsingGET({
+				studyId: this.singleSelectedStudyId
+			});
 		},
 		default: []
 	});
 
 	readonly gisticForSingleStudy = remoteData<Gistic[]>({
-		invoke: () => {
-			if (this.singleSelectedStudyId)
-				return internalClient.getSignificantCopyNumberRegionsUsingGET({studyId: this.singleSelectedStudyId});
-			return Promise.resolve([]);
+		invoke: async () => {
+			if (!this.singleSelectedStudyId)
+				return [];
+			return await internalClient.getSignificantCopyNumberRegionsUsingGET({
+				studyId: this.singleSelectedStudyId
+			});
 		},
 		default: []
 	});
@@ -238,17 +241,17 @@ export class QueryStore
 		invoke: async () => {
 			let [entrezIds, hugoIds] = _.partition(this.geneIds, isInteger);
 
-			let entrezPromise:Promise<Gene[]>;
+			let entrezPromise;
 			if (entrezIds.length)
 				entrezPromise = client.fetchGenesUsingPOST({geneIdType: "ENTREZ_GENE_ID", geneIds: entrezIds});
 			else
-				entrezPromise = Promise.resolve([]);
+				entrezPromise = [];
 
-			let hugoPromise:Promise<Gene[]>;
+			let hugoPromise;
 			if (hugoIds.length)
 				hugoPromise = client.fetchGenesUsingPOST({geneIdType: "HUGO_GENE_SYMBOL", geneIds: hugoIds});
 			else
-				hugoPromise = Promise.resolve([]);
+				hugoPromise = [];
 
 			let [entrezGenes, hugoGenes] = await Promise.all([entrezPromise, hugoPromise]);
 			let found = [...entrezGenes, ...hugoGenes];
@@ -262,11 +265,12 @@ export class QueryStore
 	});
 
 	@memoize
-	getGeneSuggestions(alias:string):Promise<{alias: string, genes: Gene[]}>
+	async getGeneSuggestions(alias:string)
 	{
-		if (isInteger(alias))
-			return Promise.resolve({alias, genes: []});
-		return client.getAllGenesUsingGET({alias}).then(genes => ({alias, genes}));
+		return {
+			alias,
+			genes: isInteger(alias) ? [] : await client.getAllGenesUsingGET({alias})
+		};
 	}
 
 

From 9237d37e2fb8a43652ae1a1c21e6f739f6a3b96a Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 16 Feb 2017 14:44:18 -0500
Subject: [PATCH 037/133] added gene validation buttons

---
 .../components/query/GeneSymbolValidator.tsx  | 102 ++++++++++++++++--
 .../components/query/QueryContainer.tsx       |   6 +-
 src/shared/components/query/QueryStore.ts     |  12 ++-
 .../components/query/styles.module.scss       |  74 +++++++++++++
 4 files changed, 185 insertions(+), 9 deletions(-)

diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 2d564969e4c..d5bc3a2bda5 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -11,6 +11,22 @@ import client from "../../api/cbioportalClientInstance";
 import {remoteData} from "../../api/remoteData";
 import {Gene} from "../../api/CBioPortalAPI";
 import Spinner from "react-spinkit";
+import FontAwesome from "react-fontawesome";
+import ReactSelect from 'react-select';
+
+const styles = styles_any as {
+	GeneSymbolValidator: string,
+	pendingMessage: string,
+	errorMessage: string,
+	validBubble: string,
+	invalidBubble: string,
+	suggestionBubble: string,
+	icon: string,
+	noChoiceLabel: string,
+	singleChoiceLabel: string,
+	multiChoiceLabel: string,
+	ReactSelect: string,
+};
 
 @observer
 export default class GeneSymbolValidator extends React.Component<{}, {}>
@@ -264,22 +280,94 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 	{
 		if (this.store.genes.isPending)
 			return (
-				<div>
+				<div className={styles.GeneSymbolValidator}>
 					<Spinner/>
-					<small>Validating gene symbols...</small>
+					<span className={styles.pendingMessage}>
+						Validating gene symbols...
+					</span>
 				</div>
 			);
 
 		for (let result of this.store.oqlParserResult)
 			if (result.error)
 				return (
-					<small>Cannot validate gene symbols because of invalid OQL. Please click 'Submit' to see location of error.</small>
+					<div className={styles.GeneSymbolValidator}>
+						<span className={styles.errorMessage}>
+							Cannot validate gene symbols because of invalid OQL.
+							Please click 'Submit' to see location of error.
+						</span>
+					</div>
 				);
 
+		if (this.store.genes.result.suggestions.length)
+			return (
+				<div className={styles.GeneSymbolValidator}>
+					<div className={styles.invalidBubble} title="Please edit the gene symbols.">
+						<FontAwesome className={styles.icon} name='exclamation'/>
+						<span>Invalid gene symbols.</span>
+					</div>
+
+					{this.store.genes.result.suggestions.map(this.renderSuggestion, this)}
+				</div>
+			);
+
+		return (
+			<div className={styles.GeneSymbolValidator}>
+				<div className={styles.validBubble} title="You can now submit the list.">
+					<FontAwesome className={styles.icon} name='check-circle'/>
+					<span>All gene symbols are valid.</span>
+				</div>
+			</div>
+		);
+	}
+
+	renderSuggestion({alias, genes}:{alias: string, genes: Gene[]}, key:number)
+	{
+		if (genes.length == 0)
+		{
+			let title = 'Could not find gene symbol. Click to remove it from the gene list.';
+			let onClick = () => this.store.replaceGene(alias, '');
+			return (
+				<div key={key} className={styles.suggestionBubble} title={title} onClick={onClick}>
+					<FontAwesome className={styles.icon} name='times-circle'/>
+					<span className={styles.noChoiceLabel}>{alias}</span>
+				</div>
+			);
+		}
+
+		if (genes.length == 1)
+		{
+			let {hugoGeneSymbol} = genes[0];
+			let title = `'${alias}' is a synonym for '${hugoGeneSymbol}'. Click here to replace it with the official symbol.`;
+			let onClick = () => this.store.replaceGene(alias, hugoGeneSymbol);
+			return (
+				<div key={key} className={styles.suggestionBubble} title={title} onClick={onClick}>
+					<FontAwesome className={styles.icon} name='question'/>
+					<span className={styles.singleChoiceLabel}>{alias}</span>
+					<span>{`: ${genes[0].hugoGeneSymbol}`}</span>
+				</div>
+			);
+		}
+
+		let title = 'Ambiguous gene symbol. Click on one of the alternatives to replace it.';
+		let options = genes.map(gene => ({
+			label: gene.hugoGeneSymbol,
+			value: gene.hugoGeneSymbol
+		}));
+		let onChange = (option:{value:string}) => this.store.replaceGene(alias, option.value);
 		return (
-			<FlexRow>
-				<pre>{JSON.stringify(this.store.genes.result, null, 4)}</pre>
-			</FlexRow>
+			<div key={key} className={styles.suggestionBubble} title={title}>
+				<FontAwesome className={styles.icon} name='question'/>
+				<span className={styles.multiChoiceLabel}>{alias}</span>
+				<span>{': '}</span>
+				<ReactSelect
+					className={styles.ReactSelect}
+					placeholder='select a symbol'
+					options={options}
+					onChange={onChange}
+					autosize
+				/>
+			</div>
 		);
 	}
-}
\ No newline at end of file
+}
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 3ce4620d0a3..99f2905ad5b 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -19,7 +19,7 @@ import SampleListSelector from "./SampleListSelector";
 
 const styles = styles_any as {
 	QueryContainer: string,
-	CancerStudySelector: string,
+	SubmitButton: string
 };
 
 @observer
@@ -58,6 +58,10 @@ export default class QueryContainer extends React.Component<{}, {}>
 					{!!(devMode.enabled) && (
 						<GeneSetSelector/>
 					)}
+
+					<button className={styles.SubmitButton}>
+						Submit
+					</button>
 				</FlexCol>
 
 				{!!(devMode.enabled) && (
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 96bf103c878..b414a5f31ca 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -21,6 +21,11 @@ function isInteger(str:string)
 	return Number.isInteger(Number(str));
 }
 
+function normalizeQuery(geneQuery:string)
+{
+	return geneQuery.replace(/ +/g, ' ').toUpperCase();
+}
+
 // mobx observable
 export class QueryStore
 {
@@ -361,7 +366,7 @@ export class QueryStore
 	{
 		try
 		{
-			let geneQuery = this.geneQuery.toUpperCase().split(' ').filter(_.identity).join(' ');
+			let geneQuery = normalizeQuery(this.geneQuery);
 			if (!geneQuery)
 				return [];
 			return oql_parser.parse(geneQuery) || [];
@@ -409,6 +414,11 @@ export class QueryStore
 			this.selectedCancerTypeIds = [clickedCancerTypeId];
 		}
 	}
+
+	@action replaceGene(oldSymbol:string, newSymbol:string)
+	{
+		this.geneQuery = normalizeQuery(this.geneQuery.toUpperCase().replace(new RegExp(`\\b${oldSymbol.toUpperCase()}\\b`, 'g'), () => newSymbol.toUpperCase()));
+	}
 }
 
 const queryStore = (window as any).queryStore = new QueryStore();
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 8df1f49ca5b..597537bde31 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -265,3 +265,77 @@
     }
   }
 }
+
+.GeneSymbolValidator {
+  cursor: default;
+  display: flex;
+  align-items: center;
+  span.icon {
+    text-align: center;
+    margin-right: 4px;
+    width: 16px;
+    height: 16px;
+  }
+  span.pendingMessage, span.errorMessage {
+    font-size: small;
+  }
+  div.validBubble, div.invalidBubble {
+    display: flex;
+    align-items: center;
+    margin: 2px;
+    padding: 4px;
+    background-color: white;
+    border: 1px solid #aaaaaa;
+    border-radius: 4px;
+    span.icon {
+      color: #484848;
+    }
+  }
+  div.invalidBubble {
+    font-weight: bold;
+  }
+  div.suggestionBubble {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin: 2px;
+    padding: 4px;
+    background-color: #e6e6e6;
+    border: 1px solid #d3d3d3;
+    border-radius: 4px;
+    &:hover {
+      background-color: #dadada;
+      border-color: #999999;
+    }
+    span.icon {
+      color: #888888;
+    }
+    span.noChoiceLabel {
+      font-weight: normal;
+    }
+    span.singleChoiceLabel {
+      font-weight: bold;
+    }
+    span.multiChoiceLabel {
+      font-weight: normal;
+    }
+    .ReactSelect {
+      width: 140px;
+      margin-left: 4px;
+      float: left;
+    }
+  }
+}
+
+button.SubmitButton {
+  font-weight: 400;
+  font-size: 18px;
+  width: 400px;
+  padding: 10px 16px;
+  background-color: #e6e6e6;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  &:hover {
+    border-color: #adadad;
+  }
+}

From 939198c7956e8667fb097a2cf9991c3f6a8c86d7 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 16 Feb 2017 15:12:52 -0500
Subject: [PATCH 038/133] small changes

---
 src/shared/components/query/GeneSymbolValidator.tsx | 2 +-
 src/shared/components/query/QueryStore.ts           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index d5bc3a2bda5..9feb9a38c3a 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -344,7 +344,7 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 				<div key={key} className={styles.suggestionBubble} title={title} onClick={onClick}>
 					<FontAwesome className={styles.icon} name='question'/>
 					<span className={styles.singleChoiceLabel}>{alias}</span>
-					<span>{`: ${genes[0].hugoGeneSymbol}`}</span>
+					<span>{`: ${hugoGeneSymbol}`}</span>
 				</div>
 			);
 		}
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index b414a5f31ca..8fdf8dde11d 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -23,7 +23,7 @@ function isInteger(str:string)
 
 function normalizeQuery(geneQuery:string)
 {
-	return geneQuery.replace(/ +/g, ' ').toUpperCase();
+	return geneQuery.replace(/^\s+|\s+$/g, '').replace(/ +/g, ' ').toUpperCase();
 }
 
 // mobx observable

From 6c40ef5653d1520e23d692af5ed1dade01c29283 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 16 Feb 2017 17:06:40 -0500
Subject: [PATCH 039/133] fixed some styling issues

---
 src/shared/components/query/QueryContainer.tsx | 13 ++++++++-----
 src/shared/components/query/styles.module.scss |  8 ++++++--
 src/shared/lib/getPromiseResult.ts             | 14 --------------
 3 files changed, 14 insertions(+), 21 deletions(-)
 delete mode 100644 src/shared/lib/getPromiseResult.ts

diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 99f2905ad5b..933e8ff9ae0 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -18,6 +18,7 @@ import GeneSetSelector from "./GeneSetSelector";
 import SampleListSelector from "./SampleListSelector";
 
 const styles = styles_any as {
+	QueryContainerParent: string,
 	QueryContainer: string,
 	SubmitButton: string
 };
@@ -38,9 +39,9 @@ export default class QueryContainer extends React.Component<{}, {}>
             return <span>No data</span>;
 
         return (
-            <FlexRow padded flex={1} className={styles.QueryContainer}>
+            <FlexRow padded flex={1} className={styles.QueryContainerParent}>
 
-				<FlexCol padded overflow>
+				<FlexCol padded overflow className={styles.QueryContainer}>
 					<CancerStudySelector/>
 
 					{!!(devMode.enabled && this.store.singleSelectedStudyId) && (
@@ -59,9 +60,11 @@ export default class QueryContainer extends React.Component<{}, {}>
 						<GeneSetSelector/>
 					)}
 
-					<button className={styles.SubmitButton}>
-						Submit
-					</button>
+					{!!(devMode.enabled) && (
+						<button className={styles.SubmitButton}>
+							Submit
+						</button>
+					)}
 				</FlexCol>
 
 				{!!(devMode.enabled) && (
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 597537bde31..ec9093157bf 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -1,4 +1,4 @@
-.QueryContainer {
+.QueryContainerParent {
   height: 100%;
 
   label {
@@ -13,6 +13,10 @@
   }
 }
 
+.QueryContainer {
+  width: 850px;
+}
+
 .cancerStudySelectorHeader {
   background-color: #1982b8;
   border-bottom: 1px solid rgb(17, 116, 167);
@@ -24,7 +28,6 @@
 
 .CancerStudySelector {
   position: relative;
-  width: 850px;
   overflow: hidden;
   user-select: none;
   
@@ -269,6 +272,7 @@
 .GeneSymbolValidator {
   cursor: default;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   span.icon {
     text-align: center;
diff --git a/src/shared/lib/getPromiseResult.ts b/src/shared/lib/getPromiseResult.ts
deleted file mode 100644
index 80a43d4885b..00000000000
--- a/src/shared/lib/getPromiseResult.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-const promiseResultCache = new WeakMap<Promise<any>, any>();
-export default function getPromiseResult<T>(promise:Promise<T>, hack?:Function):T|undefined
-{
-	if (!promiseResultCache.has(promise))
-	{
-		promiseResultCache.set(promise, undefined);
-		promise.then(result => {
-			promiseResultCache.set(promise, result)
-			if (hack)
-				hack();
-		});
-	}
-	return promiseResultCache.get(promise);
-}

From 65be328df538d2d08f4e27cc35864a7608f7471a Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 17 Feb 2017 17:43:57 -0500
Subject: [PATCH 040/133] added empty popups for mutsig/gistic gene selection

---
 .../components/popupWindow/PopupWindow.tsx    | 49 +++++++++++++++++++
 .../components/popupWindow/styles.module.scss | 39 +++++++++++++++
 .../components/query/GeneSetSelector.tsx      |  8 ++-
 .../components/query/GisticGeneSelector.tsx   | 31 ++++++++++++
 .../components/query/MutSigGeneSelector.tsx   | 31 ++++++++++++
 .../components/query/QueryContainer.tsx       | 25 +++++++++-
 src/shared/components/query/QueryStore.ts     | 25 ++++++----
 .../components/query/styles.module.scss       | 18 +++++++
 8 files changed, 214 insertions(+), 12 deletions(-)
 create mode 100644 src/shared/components/popupWindow/PopupWindow.tsx
 create mode 100644 src/shared/components/popupWindow/styles.module.scss
 create mode 100644 src/shared/components/query/GisticGeneSelector.tsx
 create mode 100644 src/shared/components/query/MutSigGeneSelector.tsx

diff --git a/src/shared/components/popupWindow/PopupWindow.tsx b/src/shared/components/popupWindow/PopupWindow.tsx
new file mode 100644
index 00000000000..03db4621aa9
--- /dev/null
+++ b/src/shared/components/popupWindow/PopupWindow.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import * as styles_any from './styles.module.scss';
+import classNames from "../../lib/classNames";
+import FontAwesome from "react-fontawesome";
+
+const styles = styles_any as {
+	PopupWindow: string,
+	titleBar: string,
+	windowTitle: string,
+	closeButton: string,
+	icon: string,
+};
+
+interface IPopupWindowProps extends React.HTMLAttributes<HTMLDivElement>
+{
+	windowTitle: string,
+	onClickClose: React.MouseEventHandler<HTMLDivElement>;
+}
+
+interface IPopupWindowState
+{
+}
+
+export default class PopupWindow extends React.Component<IPopupWindowProps, IPopupWindowState>
+{
+	constructor(props: IPopupWindowProps)
+	{
+		super(props);
+	}
+
+	render()
+	{
+		let {className, windowTitle, onClickClose, ...props} = this.props;
+
+		return (
+			<div {...props} className={classNames(className, styles.PopupWindow)}>
+				<div className={styles.titleBar}>
+					<span className={styles.windowTitle}>
+						{windowTitle}
+					</span>
+					<div className={styles.closeButton} onClick={onClickClose}>
+						<FontAwesome className={styles.icon} name="times"/>
+					</div>
+				</div>
+				{this.props.children}
+			</div>
+		);
+	}
+}
diff --git a/src/shared/components/popupWindow/styles.module.scss b/src/shared/components/popupWindow/styles.module.scss
new file mode 100644
index 00000000000..4bfcd729f6f
--- /dev/null
+++ b/src/shared/components/popupWindow/styles.module.scss
@@ -0,0 +1,39 @@
+div.PopupWindow {
+  position: fixed;
+  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+}
+div.titleBar {
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  background-color: #ccc;
+  font-size: 16px;
+  font-weight: bold;
+}
+span.windowTitle {
+  flex: 1;
+  text-align: center;
+}
+div.closeButton {
+  cursor: pointer;
+  background-color: #e6e6e6;
+  border: 1px solid lightgrey;
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: darkgrey;
+  text-align: center;
+
+  &:hover {
+    color: black;
+    border-color: darkgrey;
+  }
+}
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 0177b87642f..4115ab7bf38 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -48,10 +48,14 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 
 				<FlexRow padded>
 					{!!(this.store.mutSigForSingleStudy.result.length) && (
-						<button>Select from Recurrently Mutated Genes (MutSig)</button>
+						<button onClick={() => this.store.showMutSigPopup = true}>
+							Select from Recurrently Mutated Genes (MutSig)
+						</button>
 					)}
 					{!!(this.store.gisticForSingleStudy.result.length) && (
-						<button>Select Genes from Recurrent CNAs (Gistic)</button>
+						<button onClick={() => this.store.showGisticPopup = true}>
+							Select Genes from Recurrent CNAs (Gistic)
+						</button>
 					)}
 				</FlexRow>
 
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
new file mode 100644
index 00000000000..2aea68f4d19
--- /dev/null
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -0,0 +1,31 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import {GeneticProfile} from "../../api/CBioPortalAPI";
+import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
+import FontAwesome from "react-fontawesome";
+import * as styles_any from './styles.module.scss';
+import queryStore from "./QueryStore";
+import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
+import {observer} from "../../../../node_modules/mobx-react/custom";
+
+const styles = styles_any as {
+	GisticGeneSelector: string,
+};
+
+@observer
+export default class GisticGeneSelector extends React.Component<{}, {}>
+{
+	get store()
+	{
+		return queryStore;
+	}
+
+	render()
+	{
+		return (
+			<div className={styles.GisticGeneSelector}>
+				{this.store.gisticForSingleStudy.result.length}
+			</div>
+		);
+	}
+}
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
new file mode 100644
index 00000000000..c108d07a5e4
--- /dev/null
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -0,0 +1,31 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import {GeneticProfile} from "../../api/CBioPortalAPI";
+import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
+import FontAwesome from "react-fontawesome";
+import * as styles_any from './styles.module.scss';
+import queryStore from "./QueryStore";
+import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
+import {observer} from "../../../../node_modules/mobx-react/custom";
+
+const styles = styles_any as {
+	MutSigGeneSelector: string,
+};
+
+@observer
+export default class MutSigGeneSelector extends React.Component<{}, {}>
+{
+	get store()
+	{
+		return queryStore;
+	}
+
+	render()
+	{
+		return (
+			<div className={styles.MutSigGeneSelector}>
+				{this.store.mutSigForSingleStudy.result.length}
+			</div>
+		);
+	}
+}
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 933e8ff9ae0..4468c899f73 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -16,11 +16,16 @@ import devMode from "../../lib/devMode";
 import DataTypePrioritySelector from "./DataTypePrioritySelector";
 import GeneSetSelector from "./GeneSetSelector";
 import SampleListSelector from "./SampleListSelector";
+import MutSigGeneSelector from "./MutSigGeneSelector";
+import GisticGeneSelector from "./GisticGeneSelector";
+import PopupWindow from "../popupWindow/PopupWindow";
 
 const styles = styles_any as {
 	QueryContainerParent: string,
 	QueryContainer: string,
-	SubmitButton: string
+	MutSigGeneSelectorWindow: string,
+	GisticGeneSelectorWindow: string,
+	SubmitButton: string,
 };
 
 @observer
@@ -60,6 +65,24 @@ export default class QueryContainer extends React.Component<{}, {}>
 						<GeneSetSelector/>
 					)}
 
+					{!!(devMode.enabled && this.store.showMutSigPopup) && (
+						<PopupWindow
+							className={styles.MutSigGeneSelectorWindow}
+							windowTitle="Recurrently Mutated Genes"
+							onClickClose={() => this.store.showMutSigPopup = false}
+							children={<MutSigGeneSelector/>}
+						/>
+					)}
+
+					{!!(devMode.enabled && this.store.showGisticPopup) && (
+						<PopupWindow
+							className={styles.GisticGeneSelectorWindow}
+							windowTitle="Recurrent Copy Number Alterations (Gistic)"
+							onClickClose={() => this.store.showGisticPopup = false}
+							children={<GisticGeneSelector/>}
+						/>
+					)}
+
 					{!!(devMode.enabled) && (
 						<button className={styles.SubmitButton}>
 							Submit
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 8fdf8dde11d..974e0b4bf96 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -16,6 +16,8 @@ export type PriorityStudies = {
 	[category:string]: string[]
 };
 
+export type GeneReplacement = {alias: string, genes: Gene[]};
+
 function isInteger(str:string)
 {
 	return Number.isInteger(Number(str));
@@ -164,6 +166,8 @@ export class QueryStore
 	// VISUAL OPTIONS
 	////////////////////////////////////////////////////////////////////////////////
 
+	@observable showMutSigPopup = false;
+	@observable showGisticPopup = false;
 	@observable.ref searchTextPresets:ReadonlyArray<string> = [
 		'tcga',
 		'tcga -provisional',
@@ -205,7 +209,7 @@ export class QueryStore
 		reaction: () => this._selectedProfileIds = undefined
 	});
 
-	readonly sampleLists = remoteData<SampleList[]>({
+	readonly sampleLists = remoteData({
 		invoke: async () => {
 			if (!this.singleSelectedStudyId)
 				return [];
@@ -219,7 +223,7 @@ export class QueryStore
 		reaction: () => this._selectedSampleListId = undefined
 	});
 
-	readonly mutSigForSingleStudy = remoteData<MutSig[]>({
+	readonly mutSigForSingleStudy = remoteData({
 		invoke: async () => {
 			if (!this.singleSelectedStudyId)
 				return [];
@@ -230,7 +234,7 @@ export class QueryStore
 		default: []
 	});
 
-	readonly gisticForSingleStudy = remoteData<Gistic[]>({
+	readonly gisticForSingleStudy = remoteData({
 		invoke: async () => {
 			if (!this.singleSelectedStudyId)
 				return [];
@@ -242,7 +246,7 @@ export class QueryStore
 	});
 
 	//TODO - delay this
-	readonly genes = remoteData<{found: Gene[], suggestions: {alias: string, genes: Gene[]}[]}>({
+	readonly genes = remoteData<{found: Gene[], suggestions: GeneReplacement[]}>({
 		invoke: async () => {
 			let [entrezIds, hugoIds] = _.partition(this.geneIds, isInteger);
 
@@ -259,18 +263,21 @@ export class QueryStore
 				hugoPromise = [];
 
 			let [entrezGenes, hugoGenes] = await Promise.all([entrezPromise, hugoPromise]);
-			let found = [...entrezGenes, ...hugoGenes];
+			let entrezToHugoReplacements:GeneReplacement[] = entrezGenes.map(gene => ({alias: gene.entrezGeneId + '', genes: [gene]}));
 			let missingEntrezIds = _.difference(entrezIds, entrezGenes.map(gene => gene.entrezGeneId + ''));
 			let missingHugoIds = _.difference(hugoIds, hugoGenes.map(gene => gene.hugoGeneSymbol));
-			let missingIds = _.union(missingEntrezIds, missingHugoIds);
-			let suggestions = await Promise.all(missingIds.map(alias => this.getGeneSuggestions(alias)));
-			return {found, suggestions};
+			let aliases = _.union(missingEntrezIds, missingHugoIds);
+			let aliasSuggestions = await Promise.all(aliases.map(alias => this.getGeneSuggestions(alias)));
+			return {
+				found: [...entrezGenes, ...hugoGenes],
+				suggestions: [...entrezToHugoReplacements, ...aliasSuggestions]
+			};
 		},
 		default: {found: [], suggestions: []}
 	});
 
 	@memoize
-	async getGeneSuggestions(alias:string)
+	async getGeneSuggestions(alias:string):Promise<GeneReplacement>
 	{
 		return {
 			alias,
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index ec9093157bf..ad0187acf63 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -331,6 +331,24 @@
   }
 }
 
+div.MutSigGeneSelectorWindow {
+  width: 650px;
+  height: 375px;
+
+  div.MutSigGeneSelector {
+    flex: 1;
+  }
+}
+
+div.GisticGeneSelectorWindow {
+  width: 800px;
+  height: 550px;
+
+  div.GisticGeneSelector {
+    flex: 1;
+  }
+}
+
 button.SubmitButton {
   font-weight: 400;
   font-size: 18px;

From e1b0e26438a0be89adb5cc026e18cf77bffd3447 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Sat, 18 Feb 2017 10:55:35 -0500
Subject: [PATCH 041/133] Improve gene validation behavior (debounced)

---
 .../components/query/GeneSymbolValidator.tsx  |  5 +--
 src/shared/components/query/QueryStore.ts     | 18 ++++++----
 src/shared/lib/debounceAsync.ts               | 34 +++++++++++++++++++
 3 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 src/shared/lib/debounceAsync.ts

diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 9feb9a38c3a..ef2595ee383 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -278,13 +278,13 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 */
 	render()
 	{
-		if (this.store.genes.isPending)
+		if (this.store.genes.isPending && this.store.genes.result.suggestions.length == 0)
 			return (
 				<div className={styles.GeneSymbolValidator}>
-					<Spinner/>
 					<span className={styles.pendingMessage}>
 						Validating gene symbols...
 					</span>
+					<Spinner/>
 				</div>
 			);
 
@@ -308,6 +308,7 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 					</div>
 
 					{this.store.genes.result.suggestions.map(this.renderSuggestion, this)}
+					{this.store.genes.isPending && <Spinner/>}
 				</div>
 			);
 
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 974e0b4bf96..558f6e87929 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -11,6 +11,7 @@ import {MutSig, Gistic} from "../../api/CBioPortalAPIInternal";
 import oql_parser from "../../lib/oql/oql-parser";
 import {SyntaxError} from "../../lib/oql/oql-parser";
 import memoize from "../../lib/memoize";
+import debounceAsync from "../../lib/debounceAsync";
 
 export type PriorityStudies = {
 	[category:string]: string[]
@@ -245,10 +246,15 @@ export class QueryStore
 		default: []
 	});
 
-	//TODO - delay this
-	readonly genes = remoteData<{found: Gene[], suggestions: GeneReplacement[]}>({
-		invoke: async () => {
-			let [entrezIds, hugoIds] = _.partition(this.geneIds, isInteger);
+	readonly genes = remoteData({
+		invoke: () => this.debounceInvokeGenes(this.geneIds),
+		default: {found: [], suggestions: []}
+	});
+
+	private debounceInvokeGenes = debounceAsync(
+		async (geneIds:string[]):Promise<{found: Gene[], suggestions: GeneReplacement[]}> =>
+		{
+			let [entrezIds, hugoIds] = _.partition(geneIds, isInteger);
 
 			let entrezPromise;
 			if (entrezIds.length)
@@ -273,8 +279,8 @@ export class QueryStore
 				suggestions: [...entrezToHugoReplacements, ...aliasSuggestions]
 			};
 		},
-		default: {found: [], suggestions: []}
-	});
+		500
+	);
 
 	@memoize
 	async getGeneSuggestions(alias:string):Promise<GeneReplacement>
diff --git a/src/shared/lib/debounceAsync.ts b/src/shared/lib/debounceAsync.ts
new file mode 100644
index 00000000000..9c2a4458864
--- /dev/null
+++ b/src/shared/lib/debounceAsync.ts
@@ -0,0 +1,34 @@
+/**
+ * @author adufilie http://github.com/adufilie
+ */
+
+import * as _ from 'lodash';
+
+export default function debounceAsync<R, F extends (...args:any[]) => PromiseLike<R>>(invoke:F, delay = 0):F
+{
+	let debounceInvoke = _.debounce(
+		function (
+			args:any[],
+			resolve:(result:PromiseLike<R>)=>void,
+			reject:(error:Error)=>void
+		) {
+			try
+			{
+				resolve(invoke.apply(this, args));
+			}
+			catch (e)
+			{
+				reject(e);
+			}
+		},
+		delay
+	);
+
+	return function(...args:any[]):PromiseLike<R> {
+		return new Promise<R>(
+			function(resolve, reject) {
+				debounceInvoke.call(this, args, resolve, reject);
+			}
+		);
+	} as F;
+}

From cc568282817467b1094f05e357868b1df9f876b8 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Sun, 19 Feb 2017 05:43:04 -0500
Subject: [PATCH 042/133] documentation

---
 src/shared/components/query/QueryStore.ts |  4 +--
 src/shared/lib/debounceAsync.ts           | 42 ++++++++++++-----------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 558f6e87929..6384eb446d7 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -247,11 +247,11 @@ export class QueryStore
 	});
 
 	readonly genes = remoteData({
-		invoke: () => this.debounceInvokeGenes(this.geneIds),
+		invoke: () => this.invokeGenesLater(this.geneIds),
 		default: {found: [], suggestions: []}
 	});
 
-	private debounceInvokeGenes = debounceAsync(
+	private invokeGenesLater = debounceAsync(
 		async (geneIds:string[]):Promise<{found: Gene[], suggestions: GeneReplacement[]}> =>
 		{
 			let [entrezIds, hugoIds] = _.partition(geneIds, isInteger);
diff --git a/src/shared/lib/debounceAsync.ts b/src/shared/lib/debounceAsync.ts
index 9c2a4458864..f1e84eb9a79 100644
--- a/src/shared/lib/debounceAsync.ts
+++ b/src/shared/lib/debounceAsync.ts
@@ -1,33 +1,35 @@
 /**
+ * A function created with debounceAsync() returns a new Promise
+ * every time, but only the last promise created before invoking the
+ * original function will be resolved after a specified delay.
+ *
  * @author adufilie http://github.com/adufilie
  */
 
-import * as _ from 'lodash';
-
 export default function debounceAsync<R, F extends (...args:any[]) => PromiseLike<R>>(invoke:F, delay = 0):F
 {
-	let debounceInvoke = _.debounce(
-		function (
-			args:any[],
-			resolve:(result:PromiseLike<R>)=>void,
-			reject:(error:Error)=>void
-		) {
-			try
-			{
-				resolve(invoke.apply(this, args));
-			}
-			catch (e)
-			{
-				reject(e);
-			}
-		},
-		delay
-	);
+	function invokeLater(
+		context:any,
+		args:any[],
+		resolve:(result:PromiseLike<R>)=>void,
+		reject:(error:Error)=>void
+	) {
+		try
+		{
+			resolve(invoke.apply(context, args));
+		}
+		catch (e)
+		{
+			reject(e);
+		}
+	}
 
+	let timeout = 0;
 	return function(...args:any[]):PromiseLike<R> {
 		return new Promise<R>(
 			function(resolve, reject) {
-				debounceInvoke.call(this, args, resolve, reject);
+				window.clearTimeout(timeout);
+				timeout = window.setTimeout(invokeLater, delay, this, args, resolve, reject);
 			}
 		);
 	} as F;

From a09070a37d0ee2cda3c6cc822c0fea07d189bf50 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Sun, 19 Feb 2017 07:51:00 -0500
Subject: [PATCH 043/133] improved concurrency inside gene suggestion code

---
 .../query/GeneticProfileSelector.tsx          |  2 +-
 .../components/query/GisticGeneSelector.tsx   |  2 +-
 .../components/query/MutSigGeneSelector.tsx   |  2 +-
 .../components/query/QueryContainer.tsx       |  2 +-
 src/shared/components/query/QueryStore.ts     | 49 +++++++++++--------
 5 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 52ae14cb44b..a1bc7148243 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -6,7 +6,7 @@ import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
-import {observer} from "../../../../node_modules/mobx-react/custom";
+import {observer} from "../../../../node_modules/mobx-react/index";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index 2aea68f4d19..b6b4b1196fb 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -6,7 +6,7 @@ import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
-import {observer} from "../../../../node_modules/mobx-react/custom";
+import {observer} from "../../../../node_modules/mobx-react/index";
 
 const styles = styles_any as {
 	GisticGeneSelector: string,
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index c108d07a5e4..1592eb7775f 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -6,7 +6,7 @@ import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
-import {observer} from "../../../../node_modules/mobx-react/custom";
+import {observer} from "../../../../node_modules/mobx-react/index";
 
 const styles = styles_any as {
 	MutSigGeneSelector: string,
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 4468c899f73..683e9bb092f 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -10,7 +10,7 @@ import Checkbox = ReactBootstrap.Checkbox;
 import {Select, StateToggle} from "../ExperimentalControls";
 import * as styles_any from './styles.module.scss';
 import GeneticProfileSelector from "./GeneticProfileSelector";
-import {observer} from "../../../../node_modules/mobx-react/custom";
+import {observer} from "../../../../node_modules/mobx-react/index";
 import queryStore from "./QueryStore";
 import devMode from "../../lib/devMode";
 import DataTypePrioritySelector from "./DataTypePrioritySelector";
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 6384eb446d7..e952da66eb4 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -254,29 +254,36 @@ export class QueryStore
 	private invokeGenesLater = debounceAsync(
 		async (geneIds:string[]):Promise<{found: Gene[], suggestions: GeneReplacement[]}> =>
 		{
-			let [entrezIds, hugoIds] = _.partition(geneIds, isInteger);
+			let [entrezIds, hugoIds] = _.partition(_.uniq(geneIds), isInteger);
+
+			let getEntrezResults = async () => {
+				let found:Gene[];
+				if (entrezIds.length)
+					found = await client.fetchGenesUsingPOST({geneIdType: "ENTREZ_GENE_ID", geneIds: entrezIds});
+				else
+					found = [];
+				let missingIds = _.difference(entrezIds, found.map(gene => gene.entrezGeneId + ''));
+				let removals = missingIds.map(entrezId => ({alias: entrezId, genes: []}));
+				let replacements = found.map(gene => ({alias: gene.entrezGeneId + '', genes: [gene]}));
+				let suggestions = [...removals, ...replacements];
+				return {found, suggestions};
+			};
 
-			let entrezPromise;
-			if (entrezIds.length)
-				entrezPromise = client.fetchGenesUsingPOST({geneIdType: "ENTREZ_GENE_ID", geneIds: entrezIds});
-			else
-				entrezPromise = [];
+			let getHugoResults = async () => {
+				let found:Gene[];
+				if (hugoIds.length)
+					found = await client.fetchGenesUsingPOST({geneIdType: "HUGO_GENE_SYMBOL", geneIds: hugoIds});
+				else
+					found = [];
+				let missingIds = _.difference(hugoIds, found.map(gene => gene.hugoGeneSymbol));
+				let suggestions = await Promise.all(missingIds.map(alias => this.getGeneSuggestions(alias)));
+				return {found, suggestions};
+			};
 
-			let hugoPromise;
-			if (hugoIds.length)
-				hugoPromise = client.fetchGenesUsingPOST({geneIdType: "HUGO_GENE_SYMBOL", geneIds: hugoIds});
-			else
-				hugoPromise = [];
-
-			let [entrezGenes, hugoGenes] = await Promise.all([entrezPromise, hugoPromise]);
-			let entrezToHugoReplacements:GeneReplacement[] = entrezGenes.map(gene => ({alias: gene.entrezGeneId + '', genes: [gene]}));
-			let missingEntrezIds = _.difference(entrezIds, entrezGenes.map(gene => gene.entrezGeneId + ''));
-			let missingHugoIds = _.difference(hugoIds, hugoGenes.map(gene => gene.hugoGeneSymbol));
-			let aliases = _.union(missingEntrezIds, missingHugoIds);
-			let aliasSuggestions = await Promise.all(aliases.map(alias => this.getGeneSuggestions(alias)));
+			let [entrezResults, hugoResults] = await Promise.all([getEntrezResults(), getHugoResults()]);
 			return {
-				found: [...entrezGenes, ...hugoGenes],
-				suggestions: [...entrezToHugoReplacements, ...aliasSuggestions]
+				found: [...entrezResults.found, ...hugoResults.found],
+				suggestions: [...entrezResults.suggestions, ...hugoResults.suggestions]
 			};
 		},
 		500
@@ -287,7 +294,7 @@ export class QueryStore
 	{
 		return {
 			alias,
-			genes: isInteger(alias) ? [] : await client.getAllGenesUsingGET({alias})
+			genes: await client.getAllGenesUsingGET({alias})
 		};
 	}
 

From eec5e1d6e724c3af2379bf9ab920d644267df3df Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Tue, 21 Feb 2017 09:16:55 -0500
Subject: [PATCH 044/133] Styling overrides

---
 src/pages/home/HomePage.tsx                   | 21 +++++++++----------
 .../components/StudyList/styles.module.scss   |  3 ++-
 .../labeledCheckbox/styles.module.scss        |  2 +-
 .../components/query/styles.module.scss       |  4 ++--
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 5a6ee180428..8db283621e7 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import exposeComponentRenderer from 'shared/lib/exposeComponentRenderer';
 import QueryContainerOld from "../../shared/components/query/old/QueryContainer";
 import QueryContainer from "../../shared/components/query/QueryContainer";
 import * as styles_any from './styles.module.scss';
@@ -36,15 +37,13 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
         super(props);
     }
 
-    componentDidMount()
-    {
-		getRootElement().className += ' ' + styles.rootHtml;
+    public componentDidMount() {
+      this.exposeComponentRenderersToParentScript();
     }
 
-    componentWillUnmount()
-	{
-		getRootElement().className = getRootElement().className.split(styles.rootHtml).join('');
-	}
+    exposeComponentRenderersToParentScript() {
+        exposeComponentRenderer('renderQueryContainer', QueryContainer);
+    }
 
 	@observable selectorVersion:'new'|'old' = 'new';
 
@@ -52,10 +51,10 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
     {
         return (
         	<FlexCol style={{height: '100%'}}>
-				{this.selectorVersion == 'new' ? <QueryContainer/> : <QueryContainerOld/>}
-				{/*devMode.enabled && <a style={{alignSelf: 'center'}} onClick={() => this.selectorVersion = this.selectorVersion == 'new' ? 'old' : 'new' }>Switch to {this.selectorVersion == 'new' ? 'old' : 'new'} view</a>*/}
-				{devMode.enabled && <DevTools/>}
-			</FlexCol>
+    				{this.selectorVersion == 'new' ? <QueryContainer/> : <QueryContainerOld/>}
+    				{/*devMode.enabled && <a style={{alignSelf: 'center'}} onClick={() => this.selectorVersion = this.selectorVersion == 'new' ? 'old' : 'new' }>Switch to {this.selectorVersion == 'new' ? 'old' : 'new'} view</a>*/}
+    				{devMode.enabled && <DevTools/>}
+    			</FlexCol>
 		);
     }
 }
diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index 7b22f19aa0e..f602c190888 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -180,7 +180,8 @@ li.Study {
   padding: 2px 0;
   display: flex;
   justify-content: space-between;
-  font-size: 13px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
+  font-weight: 400 !important;
   align-items: flex-start;
 
   .StudyName {
diff --git a/src/shared/components/labeledCheckbox/styles.module.scss b/src/shared/components/labeledCheckbox/styles.module.scss
index 917d0343f44..bc92f62a5d9 100644
--- a/src/shared/components/labeledCheckbox/styles.module.scss
+++ b/src/shared/components/labeledCheckbox/styles.module.scss
@@ -1,4 +1,4 @@
-label.labeledCheckbox {
+.cbioportal-frontend label.labeledCheckbox {
   cursor: pointer;
   display: flex;
   flex-direction: row;
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index ad0187acf63..920071ae02c 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -108,7 +108,7 @@
   ul.cancerTypeList {
     background: rgb(232, 241, 248);
     padding: 0px;
-    margin: 0px;
+    margin: 0px !important;
     width: 230px;
 
     li {
@@ -116,8 +116,8 @@
       list-style-type: none;
       display: flex;
       flex-direction: row;
-
       font-size: 13px;
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       color: #043852;
       border-bottom: 1px solid rgb(222, 233, 241);
       border-top: 1px solid rgb(243, 248, 251);

From c2f85ad2da663457358f041bdefe4e9ea8d4bf34 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Tue, 21 Feb 2017 09:54:34 -0500
Subject: [PATCH 045/133] Fix input margins

---
 src/shared/components/StudyList/styles.module.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index f602c190888..5a3808e1dc6 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -184,6 +184,10 @@ li.Study {
   font-weight: 400 !important;
   align-items: flex-start;
 
+  input[type="checkbox"] {
+    margin: 3px 6px 0 0;
+  }
+
   .StudyName {
     color: #444;
     max-width: 435px;

From 0a9e6b1c822a728fc5f37fc732d4e9020ec0b082 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Tue, 21 Feb 2017 11:57:13 -0500
Subject: [PATCH 046/133] Label display override

---
 src/shared/components/StudyList/styles.module.scss | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index 5a3808e1dc6..f166f88eecf 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -144,9 +144,10 @@ ul.StudyList {
 
     &.Level1 {
       label {      
-        font: normal normal 500 17px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        color: #333;
         border-bottom: 1px solid rgb(232, 241, 248);
+        color: #333;
+        display: block;
+        font: normal normal 500 17px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
         padding: 10px 5px 5px 5px;
         margin: 20px 10px 5px 10px;
       }
@@ -173,17 +174,20 @@ ul.StudyList {
   }
 }
 
-
-
 li.Study {
   list-style-type: none;
   padding: 2px 0;
   display: flex;
   justify-content: space-between;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
-  font-weight: 400 !important;
   align-items: flex-start;
 
+  label {
+    font-weight: 400;
+    margin: 0;
+    display: flex;
+  }
+
   input[type="checkbox"] {
     margin: 3px 6px 0 0;
   }

From 3f6da51ec6c53c2666320be823618d59989a0b1b Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Tue, 21 Feb 2017 11:57:25 -0500
Subject: [PATCH 047/133] Update max tree depth to 3

---
 src/shared/components/query/QueryStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index e952da66eb4..bab2f8938aa 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -186,7 +186,7 @@ export class QueryStore
 	};
 	@observable showSelectedStudiesOnly:boolean = false;
 	@observable.shallow selectedCancerTypeIds:string[] = [];
-	@observable maxTreeDepth:number = 9;
+	@observable maxTreeDepth:number = 3;
 	@observable clickAgainToDeselectSingle:boolean = true;
 
 

From c03e057ad46a4c4a5f4a361d86c8333abebe0c13 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Tue, 21 Feb 2017 12:58:03 -0500
Subject: [PATCH 048/133] Reduce max-width for study names

---
 src/shared/components/StudyList/styles.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index f166f88eecf..b9ad500d725 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -194,7 +194,7 @@ li.Study {
 
   .StudyName {
     color: #444;
-    max-width: 435px;
+    max-width: 415px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

From d777cfad0c6da8e526d61e0c7a8a1af36c09ebfb Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 21 Feb 2017 17:09:06 -0500
Subject: [PATCH 049/133] MutSigGeneSelector progress

---
 package.json                                  |   4 +-
 .../components/query/MutSigGeneSelector.tsx   | 121 +++++++++++++++++-
 .../components/query/QueryContainer.tsx       |  13 ++
 .../components/query/styles.module.scss       |   5 +
 4 files changed, 140 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index bafe8b2e59a..68dab192b39 100644
--- a/package.json
+++ b/package.json
@@ -123,8 +123,8 @@
     "react-renderif": "^1.0.2",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.7",
-    "react-select": "^1.0.0-rc.2",
-    "react-spinkit": "^2.0.0",
+    "react-select": "^1.0.0-rc.3",
+    "react-spinkit": "^1.1.0",
     "react-tooltip": "^3.2.2",
     "react-zeroclipboard": "^3.2.2",
     "reactable": "^0.14.1",
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index 1592eb7775f..c77e6b97773 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -7,11 +7,46 @@ import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/index";
+import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
+import {MutSig} from "../../api/CBioPortalAPIInternal";
+import {IColumnFormatterData} from "../enhancedReactTable/IColumnFormatter";
+import {IColumnDefMap, IEnhancedReactTableProps} from "../enhancedReactTable/IEnhancedReactTableProps";
+import {ITableHeaderControlsProps} from "../tableHeaderControls/TableHeaderControls";
+import {Table, Td} from 'reactable';
+
+// todo - unfinished
+type ReactTableProps_column = string | {column: string, sortable?: boolean};
+type ReactTableProps_filterableColumn = string | {column: string, filterFunction?: Function};
+
+type ReactTableProps = React.HTMLProps<HTMLTableElement> & {
+	sortBy?: boolean,
+	defaultSort?: boolean,
+	defaultSortDescending?: boolean,
+	itemsPerPage?: number,
+	filterBy?: string,
+	hideFilterInput?: boolean,
+	pageButtonLimit?: number,
+	noDataText?: React.ReactChild,
+	filterClassName?: string,
+	onFilter?: (filter?: string) => void,
+	currentPage?: number,
+	hideTableHeader?: boolean,
+	sortable?: boolean,
+	onPageChange?: (page: number) => void,
+	onSort?: (currentSort: {column: ReactTableProps_column, direction: number}) => void,
+	columns?: ReactTableProps_column[],
+	filterable?: ReactTableProps_filterableColumn[],
+	filterPlaceholder?: string,
+	previousPageLabel?: React.ReactChild,
+	nextPageLabel?: React.ReactChild,
+};
 
 const styles = styles_any as {
 	MutSigGeneSelector: string,
 };
 
+class MutSigTable extends EnhancedReactTable<MutSig> {};
+
 @observer
 export default class MutSigGeneSelector extends React.Component<{}, {}>
 {
@@ -20,11 +55,95 @@ export default class MutSigGeneSelector extends React.Component<{}, {}>
 		return queryStore;
 	}
 
+	formatSelected = (data:IColumnFormatterData<MutSig>) =>
+	{
+		let selected = _.includes(this.store.geneIds, data.rowData && data.rowData.hugoGeneSymbol);
+		let text = selected + '';
+		return (
+			<Td key={data.name} column={data.name} value={text}>
+				{text}
+			</Td>
+		);
+	}
+
+	downloadSelected = (data:IColumnFormatterData<MutSig>):string =>
+	{
+		return data.columnData + '';
+	}
+
+	onVisibleRowsChange = (data:MutSig[]) =>
+	{
+		console.log('onVisibleRowsChange', data);
+	}
+
 	render()
 	{
+		let columns:IColumnDefMap = {
+			'hugoGeneSymbol': {
+				dataField: 'hugoGeneSymbol',
+				name: "Gene Symbol",
+				priority: 1,
+				sortable: true,
+				filterable: true
+			},
+			'numberOfMutations': {
+				dataField: 'numberOfMutations',
+				name: "Num Mutations",
+				priority: 2,
+				sortable: true,
+				filterable: true
+			},
+			'qValue': {
+				dataField: 'qValue',
+				name: "Q-Value",
+				priority: 3,
+				sortable: true,
+				filterable: true
+			},
+			'selected': {
+				name: "All",
+				priority: 4,
+				formatter: this.formatSelected,
+				downloader: this.downloadSelected,
+				sortable: true,
+				filterable: true
+			},
+		};
+
+		let reactTableProps:ReactTableProps = {
+			className: "table table-striped table-border-top",
+			hideFilterInput:true
+		};
+
+		let headerControlsProps:ITableHeaderControlsProps = {
+		    // tableData?: Array<any>;
+		    // className?: string;
+		    // searchClassName?: string;
+		    // showSearch?: boolean;
+			showCopyAndDownload: false,
+		    // copyDownloadClassName?: string;
+		    showHideShowColumnButton: false,
+		    // showPagination?:boolean;
+		    // handleInput?: Function;
+		    // downloadDataGenerator?: Function;
+		    // downloadDataContainsHeader?: boolean;
+		    // downloadFilename?: string;
+		    // paginationProps?: ITablePaginationControlsProps;
+		    // columnVisibilityProps?: IColumnVisibilityControlsProps;
+		    // searchDelayMs?:number;
+		}
+
 		return (
 			<div className={styles.MutSigGeneSelector}>
-				{this.store.mutSigForSingleStudy.result.length}
+				<MutSigTable
+					itemsName="mutations"
+					reactTableProps={reactTableProps}
+					initItemsPerPage={10}
+					headerControlsProps={headerControlsProps}
+					columns={columns}
+					rawData={this.store.mutSigForSingleStudy.result}
+					onVisibleRowsChange={this.onVisibleRowsChange}
+				/>
 			</div>
 		);
 	}
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 683e9bb092f..b1bd21e16d0 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -26,6 +26,7 @@ const styles = styles_any as {
 	MutSigGeneSelectorWindow: string,
 	GisticGeneSelectorWindow: string,
 	SubmitButton: string,
+	errorMessage: string,
 };
 
 @observer
@@ -40,6 +41,18 @@ export default class QueryContainer extends React.Component<{}, {}>
     {
         if (this.store.cancerTypes.isPending || this.store.cancerStudies.isPending)
             return <Spinner/>;
+
+        let error = this.store.cancerTypes.error
+        	|| this.store.cancerStudies.error
+        	|| this.store.geneticProfiles.error
+        	|| this.store.sampleLists.error
+        	|| this.store.mutSigForSingleStudy.error
+        	|| this.store.gisticForSingleStudy.error
+        	|| this.store.genes.error;
+        if (error)
+			return <span className={styles.errorMessage}>{`Error: ${error}`}</span>;
+
+
         if (!this.store.cancerTypes.result.length || !this.store.cancerStudies.result.length)
             return <span>No data</span>;
 
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 920071ae02c..48a7822c0b4 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -15,6 +15,11 @@
 
 .QueryContainer {
   width: 850px;
+
+  errorMessage: {
+    color: maroon;
+    font-weight: bold;
+  }
 }
 
 .cancerStudySelectorHeader {

From 6165ad758c0cce8463f03fe346e46b8d6f858905 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 22 Feb 2017 15:10:26 -0500
Subject: [PATCH 050/133] move devMode controls from QueryContainer to HomePage

---
 src/pages/home/HomePage.tsx                   |  69 ++++++++++--
 src/pages/home/styles.module.scss             |   4 +
 .../components/query/QueryContainer.tsx       | 104 ++++++------------
 .../query/old/CancerStudySelector.tsx         |   2 +-
 .../components/query/styles.module.scss       |   8 +-
 5 files changed, 103 insertions(+), 84 deletions(-)

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 8db283621e7..504b9c73415 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -3,11 +3,13 @@ import exposeComponentRenderer from 'shared/lib/exposeComponentRenderer';
 import QueryContainerOld from "../../shared/components/query/old/QueryContainer";
 import QueryContainer from "../../shared/components/query/QueryContainer";
 import * as styles_any from './styles.module.scss';
-import {FlexCol} from "../../shared/components/flexbox/FlexBox";
+import {FlexCol, FlexRow} from "../../shared/components/flexbox/FlexBox";
 import devMode from "../../shared/lib/devMode";
 import {observer} from "../../../node_modules/mobx-react/index";
 import DevTools from "../../../node_modules/mobx-react-devtools/index";
 import {toJS, observable, action, computed, whyRun, expr} from "../../../node_modules/mobx/lib/mobx";
+import queryStore from "../../shared/components/query/QueryStore";
+import {Select, StateToggle} from "../../shared/components/ExperimentalControls";
 
 function getRootElement()
 {
@@ -18,7 +20,7 @@ function getRootElement()
 }
 
 const styles = styles_any as {
-	rootHtml: string,
+	HomePage: string,
 };
 
 interface IHomePageProps
@@ -37,6 +39,8 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
         super(props);
     }
 
+	get store() { return queryStore; }
+
     public componentDidMount() {
       this.exposeComponentRenderersToParentScript();
     }
@@ -49,12 +53,63 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 
     public render()
     {
+    	let selectorVersionToggle = (
+    		<a style={{alignSelf: 'center'}} onClick={() => this.selectorVersion = this.selectorVersion == 'new' ? 'old' : 'new' }>
+    			Switch to {this.selectorVersion == 'new' ? 'old' : 'new'} view
+    		</a>
+		);
+
+    	if (this.selectorVersion == 'old')
+			return (
+				<FlexCol className={styles.HomePage}>
+					<QueryContainerOld/>
+					{selectorVersionToggle}
+				</FlexCol>
+			);
+
         return (
-        	<FlexCol style={{height: '100%'}}>
-    				{this.selectorVersion == 'new' ? <QueryContainer/> : <QueryContainerOld/>}
-    				{/*devMode.enabled && <a style={{alignSelf: 'center'}} onClick={() => this.selectorVersion = this.selectorVersion == 'new' ? 'old' : 'new' }>Switch to {this.selectorVersion == 'new' ? 'old' : 'new'} view</a>*/}
-    				{devMode.enabled && <DevTools/>}
-    			</FlexCol>
+			<FlexRow padded flex={1} className={styles.HomePage}>
+
+				<QueryContainer/>
+
+				{!!(devMode.enabled) && (
+					<FlexCol padded overflow>
+						{/* demo controls */}
+						<FlexCol padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
+							<StateToggle label='Click tree node again to deselect' target={this.store} name='clickAgainToDeselectSingle' defaultValue={this.store.clickAgainToDeselectSingle}/>
+							<Select
+								label="Tree depth: "
+								selected={this.store.maxTreeDepth}
+								options={[
+									{label: "0"},
+									{label: "1"},
+									{label: "2"},
+									{label: "3"},
+									{label: "4"},
+									{label: "5"},
+									{label: "6"},
+									{label: "7"},
+									{label: "8"},
+									{label: "9"},
+								]}
+								onChange={option => this.store.maxTreeDepth = parseInt(option.label)}
+							/>
+							<span>Note: Use cmd+click to select/deselect multiple cancer types.</span>
+						</FlexCol>
+
+						{/* display state for demo */}
+						<pre>
+							{JSON.stringify(this.store.stateToSerialize, null, 4)}
+						</pre>
+
+						{/*devMode.enabled && selectorVersionToggle*/}
+
+					</FlexCol>
+				)}
+
+				{devMode.enabled && <DevTools/>}
+
+			</FlexRow>
 		);
     }
 }
diff --git a/src/pages/home/styles.module.scss b/src/pages/home/styles.module.scss
index 91a713a9e5c..7dc2fc27bd1 100644
--- a/src/pages/home/styles.module.scss
+++ b/src/pages/home/styles.module.scss
@@ -7,3 +7,7 @@ html.rootHtml {
     height: 100%;
   }
 }
+
+HomePage {
+  height: 100%;
+}
\ No newline at end of file
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index b1bd21e16d0..e1bde267447 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -57,85 +57,49 @@ export default class QueryContainer extends React.Component<{}, {}>
             return <span>No data</span>;
 
         return (
-            <FlexRow padded flex={1} className={styles.QueryContainerParent}>
+			<FlexCol padded overflow className={styles.QueryContainer}>
+				<CancerStudySelector/>
 
-				<FlexCol padded overflow className={styles.QueryContainer}>
-					<CancerStudySelector/>
-
-					{!!(devMode.enabled && this.store.singleSelectedStudyId) && (
-						<GeneticProfileSelector/>
-					)}
-
-					{!!(devMode.enabled && this.store.singleSelectedStudyId) && (
-						<SampleListSelector/>
-					)}
+				{!!(devMode.enabled && this.store.singleSelectedStudyId) && (
+					<GeneticProfileSelector/>
+				)}
 
-					{!!(devMode.enabled && !this.store.singleSelectedStudyId) && (
-						<DataTypePrioritySelector/>
-					)}
+				{!!(devMode.enabled && this.store.singleSelectedStudyId) && (
+					<SampleListSelector/>
+				)}
 
-					{!!(devMode.enabled) && (
-						<GeneSetSelector/>
-					)}
+				{!!(devMode.enabled && !this.store.singleSelectedStudyId) && (
+					<DataTypePrioritySelector/>
+				)}
 
-					{!!(devMode.enabled && this.store.showMutSigPopup) && (
-						<PopupWindow
-							className={styles.MutSigGeneSelectorWindow}
-							windowTitle="Recurrently Mutated Genes"
-							onClickClose={() => this.store.showMutSigPopup = false}
-							children={<MutSigGeneSelector/>}
-						/>
-					)}
+				{!!(devMode.enabled) && (
+					<GeneSetSelector/>
+				)}
 
-					{!!(devMode.enabled && this.store.showGisticPopup) && (
-						<PopupWindow
-							className={styles.GisticGeneSelectorWindow}
-							windowTitle="Recurrent Copy Number Alterations (Gistic)"
-							onClickClose={() => this.store.showGisticPopup = false}
-							children={<GisticGeneSelector/>}
-						/>
-					)}
+				{!!(devMode.enabled && this.store.showMutSigPopup) && (
+					<PopupWindow
+						className={styles.MutSigGeneSelectorWindow}
+						windowTitle="Recurrently Mutated Genes"
+						onClickClose={() => this.store.showMutSigPopup = false}
+						children={<MutSigGeneSelector/>}
+					/>
+				)}
 
-					{!!(devMode.enabled) && (
-						<button className={styles.SubmitButton}>
-							Submit
-						</button>
-					)}
-				</FlexCol>
+				{!!(devMode.enabled && this.store.showGisticPopup) && (
+					<PopupWindow
+						className={styles.GisticGeneSelectorWindow}
+						windowTitle="Recurrent Copy Number Alterations (Gistic)"
+						onClickClose={() => this.store.showGisticPopup = false}
+						children={<GisticGeneSelector/>}
+					/>
+				)}
 
 				{!!(devMode.enabled) && (
-					<FlexCol padded overflow>
-						{/* demo controls */}
-						<FlexCol padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
-							<StateToggle label='Click tree node again to deselect' target={this.store} name='clickAgainToDeselectSingle' defaultValue={queryStore.clickAgainToDeselectSingle}/>
-							<Select
-								label="Tree depth: "
-								selected={this.store.maxTreeDepth}
-								options={[
-									{label: "0"},
-									{label: "1"},
-									{label: "2"},
-									{label: "3"},
-									{label: "4"},
-									{label: "5"},
-									{label: "6"},
-									{label: "7"},
-									{label: "8"},
-									{label: "9"},
-								]}
-								onChange={option => this.store.maxTreeDepth = parseInt(option.label)}
-							/>
-							<span>Note: Use cmd+click to select/deselect multiple cancer types.</span>
-						</FlexCol>
-
-						{/* display state for demo */}
-						<pre>
-							{JSON.stringify(this.store.stateToSerialize, null, 4)}
-						</pre>
-					</FlexCol>
+					<button className={styles.SubmitButton}>
+						Submit
+					</button>
 				)}
-
-            </FlexRow>
+			</FlexCol>
         );
     }
 }
diff --git a/src/shared/components/query/old/CancerStudySelector.tsx b/src/shared/components/query/old/CancerStudySelector.tsx
index 61588583c4a..0df960d3343 100644
--- a/src/shared/components/query/old/CancerStudySelector.tsx
+++ b/src/shared/components/query/old/CancerStudySelector.tsx
@@ -122,7 +122,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 	{
 		if (firstDefinedValue(this.props.hideTree, this.state.hideTree))
 			return 0;
-		return this.props.maxTreeDepth;
+		return this.props.maxTreeDepth as number; // defined in defaultProps
 	}
 
 	get selectedCancerTypeIds()
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 48a7822c0b4..bb4daa9aed6 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -1,5 +1,5 @@
-.QueryContainerParent {
-  height: 100%;
+.QueryContainer {
+  width: 850px;
 
   label {
     margin-bottom: 0px;
@@ -11,10 +11,6 @@
     flex-grow: 2;
     margin: 0px;
   }
-}
-
-.QueryContainer {
-  width: 850px;
 
   errorMessage: {
     color: maroon;

From ee668fe81564d99656bf492c12f5991807160add Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 22 Feb 2017 16:47:49 -0500
Subject: [PATCH 051/133] Use new reactable typings

---
 .../components/query/MutSigGeneSelector.tsx   | 31 ++-----------------
 1 file changed, 2 insertions(+), 29 deletions(-)

diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index c77e6b97773..67e06880860 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -12,34 +12,7 @@ import {MutSig} from "../../api/CBioPortalAPIInternal";
 import {IColumnFormatterData} from "../enhancedReactTable/IColumnFormatter";
 import {IColumnDefMap, IEnhancedReactTableProps} from "../enhancedReactTable/IEnhancedReactTableProps";
 import {ITableHeaderControlsProps} from "../tableHeaderControls/TableHeaderControls";
-import {Table, Td} from 'reactable';
-
-// todo - unfinished
-type ReactTableProps_column = string | {column: string, sortable?: boolean};
-type ReactTableProps_filterableColumn = string | {column: string, filterFunction?: Function};
-
-type ReactTableProps = React.HTMLProps<HTMLTableElement> & {
-	sortBy?: boolean,
-	defaultSort?: boolean,
-	defaultSortDescending?: boolean,
-	itemsPerPage?: number,
-	filterBy?: string,
-	hideFilterInput?: boolean,
-	pageButtonLimit?: number,
-	noDataText?: React.ReactChild,
-	filterClassName?: string,
-	onFilter?: (filter?: string) => void,
-	currentPage?: number,
-	hideTableHeader?: boolean,
-	sortable?: boolean,
-	onPageChange?: (page: number) => void,
-	onSort?: (currentSort: {column: ReactTableProps_column, direction: number}) => void,
-	columns?: ReactTableProps_column[],
-	filterable?: ReactTableProps_filterableColumn[],
-	filterPlaceholder?: string,
-	previousPageLabel?: React.ReactChild,
-	nextPageLabel?: React.ReactChild,
-};
+import {Table, Td, TableProps} from 'reactable';
 
 const styles = styles_any as {
 	MutSigGeneSelector: string,
@@ -110,7 +83,7 @@ export default class MutSigGeneSelector extends React.Component<{}, {}>
 			},
 		};
 
-		let reactTableProps:ReactTableProps = {
+		let reactTableProps:TableProps = {
 			className: "table table-striped table-border-top",
 			hideFilterInput:true
 		};

From 757c59997311093f917d1fc8a99b57762c9d3dc1 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 23 Feb 2017 16:52:15 -0500
Subject: [PATCH 052/133] Gistic popup selection functionality and styling
 fixes

---
 .../labeledCheckbox/styles.module.scss        |   2 +-
 .../components/popupWindow/PopupWindow.tsx    |   5 +-
 .../components/popupWindow/styles.module.scss |   5 +
 .../query/DataTypePrioritySelector.tsx        |   2 +-
 .../components/query/GisticGeneSelector.tsx   | 197 +++++++++++++++++-
 .../components/query/MutSigGeneSelector.tsx   |  76 ++++---
 .../components/query/QueryContainer.tsx       |  24 ++-
 src/shared/components/query/QueryStore.ts     |  12 +-
 .../components/query/styles.module.scss       |  50 ++++-
 9 files changed, 326 insertions(+), 47 deletions(-)

diff --git a/src/shared/components/labeledCheckbox/styles.module.scss b/src/shared/components/labeledCheckbox/styles.module.scss
index bc92f62a5d9..917d0343f44 100644
--- a/src/shared/components/labeledCheckbox/styles.module.scss
+++ b/src/shared/components/labeledCheckbox/styles.module.scss
@@ -1,4 +1,4 @@
-.cbioportal-frontend label.labeledCheckbox {
+label.labeledCheckbox {
   cursor: pointer;
   display: flex;
   flex-direction: row;
diff --git a/src/shared/components/popupWindow/PopupWindow.tsx b/src/shared/components/popupWindow/PopupWindow.tsx
index 03db4621aa9..a54dbb9fe5c 100644
--- a/src/shared/components/popupWindow/PopupWindow.tsx
+++ b/src/shared/components/popupWindow/PopupWindow.tsx
@@ -9,6 +9,7 @@ const styles = styles_any as {
 	windowTitle: string,
 	closeButton: string,
 	icon: string,
+	content: string,
 };
 
 interface IPopupWindowProps extends React.HTMLAttributes<HTMLDivElement>
@@ -42,7 +43,9 @@ export default class PopupWindow extends React.Component<IPopupWindowProps, IPop
 						<FontAwesome className={styles.icon} name="times"/>
 					</div>
 				</div>
-				{this.props.children}
+				<div className={styles.content}>
+					{this.props.children}
+				</div>
 			</div>
 		);
 	}
diff --git a/src/shared/components/popupWindow/styles.module.scss b/src/shared/components/popupWindow/styles.module.scss
index 4bfcd729f6f..99bb7335386 100644
--- a/src/shared/components/popupWindow/styles.module.scss
+++ b/src/shared/components/popupWindow/styles.module.scss
@@ -37,3 +37,8 @@ div.closeButton {
     border-color: darkgrey;
   }
 }
+div.content {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index dd65f291f00..47c53a7ac23 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -24,7 +24,7 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 		if (this.store.singleSelectedStudyId)
 			return null;
 
-		const DataTypePriorityRadio = this.DataTypePriorityRadio;
+		const {DataTypePriorityRadio} = this;
 		return (
 			<FlexRow padded className={styles.DataTypePrioritySelector}>
 				<h2>Select Data Type Priority:</h2>
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index b6b4b1196fb..f3069626aa3 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -5,27 +5,214 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
-import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
+import {ObservableMap, expr, toJS, computed, observable} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/index";
+import {Gistic} from "../../api/CBioPortalAPIInternal";
+import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
+import {ITableHeaderControlsProps} from "../tableHeaderControls/TableHeaderControls";
+import {TableProps} from "reactable";
+import {IColumnFormatterData} from "../enhancedReactTable/IColumnFormatter";
+import {Td} from "reactable";
+import classNames from "../../lib/classNames";
+import {IColumnDefMap} from "../enhancedReactTable/IEnhancedReactTableProps";
 
 const styles = styles_any as {
 	GisticGeneSelector: string,
+	GisticGeneToggles: string,
+	GeneToggle: string,
+	selected: string,
+	notSelected: string,
+	simulateHovered: string,
+	someGenes: string,
+	showMoreLess: string,
+	moreGenes: string,
+	selectButton: string,
 };
 
+const DEFAULT_NUM_GENES_SHOWN = 5;
+
+class GisticTable extends EnhancedReactTable<Gistic> {}
+
+export interface GisticGeneSelectorProps
+{
+	initialSelection: string[];
+	data: Gistic[];
+	onSelect: (map_geneSymbol_selected:ObservableMap<boolean>) => void;
+}
+
+function getGeneSymbols(gistic?:Gistic)
+{
+	if (gistic)
+		return gistic.genes.map(gene => gene.hugoGeneSymbol);
+	return [];
+}
+
 @observer
-export default class GisticGeneSelector extends React.Component<{}, {}>
+export default class GisticGeneSelector extends React.Component<GisticGeneSelectorProps, {}>
 {
-	get store()
+	constructor(props:GisticGeneSelectorProps)
 	{
-		return queryStore;
+		super(props);
+		this.map_geneSymbol_selected.replace(props.initialSelection.map(geneSymbol => [geneSymbol, true]));
 	}
 
+	map_geneSymbol_selected = observable.map<boolean>();
+
 	render()
 	{
+		let columns:IColumnDefMap = {
+			'amp': {
+				dataField: 'amp',
+				name: "Amp Del",
+				priority: 1,
+				sortable: true,
+				filterable: true
+			},
+			'chromosome': {
+				dataField: 'chromosome',
+				name: "Chr",
+				priority: 2,
+				sortable: true,
+				filterable: true
+			},
+			'cytoband': {
+				dataField: 'cytoband',
+				name: "Cytoband",
+				priority: 3,
+				sortable: true,
+				filterable: true
+			},
+			'#': {
+				name: "#",
+				priority: 4,
+				downloader: (data:IColumnFormatterData<Gistic>) => data.rowData ? data.rowData.genes.length + '' : '0',
+				sortable: true,
+				filterable: true
+			},
+			'genes': {
+				name: "Genes",
+				priority: 5,
+				downloader: (data:IColumnFormatterData<Gistic>) => getGeneSymbols(data.rowData).join(' '),
+				formatter: (data:IColumnFormatterData<Gistic>) => (
+					<Td key={data.name} column={data.name}>
+						<GisticGeneToggles
+							gistic={data.rowData}
+							map_geneSymbol_selected={this.map_geneSymbol_selected}
+						/>
+					</Td>
+				),
+				sortable: true,
+				filterable: true
+			},
+			'qValue': {
+				dataField: 'qValue',
+				name: "Q Value",
+				priority: 6,
+				sortable: true,
+				filterable: true
+			},
+		};
+
+		let reactTableProps:TableProps = {
+			className: "table table-striped table-border-top",
+			hideFilterInput:true
+		};
+
+		let headerControlsProps:ITableHeaderControlsProps = {
+		    // tableData?: Array<any>;
+		    // className?: string;
+		    // searchClassName?: string;
+		    // showSearch?: boolean;
+			showCopyAndDownload: false,
+		    // copyDownloadClassName?: string;
+		    showHideShowColumnButton: false,
+		    // showPagination?:boolean;
+		    // handleInput?: Function;
+		    // downloadDataGenerator?: Function;
+		    // downloadDataContainsHeader?: boolean;
+		    // downloadFilename?: string;
+		    // paginationProps?: ITablePaginationControlsProps;
+		    // columnVisibilityProps?: IColumnVisibilityControlsProps;
+		    // searchDelayMs?:number;
+		};
+
 		return (
 			<div className={styles.GisticGeneSelector}>
-				{this.store.gisticForSingleStudy.result.length}
+				<span>
+					{'Click on a gene to '}
+					<span className={classNames(styles.GeneToggle, styles.selected, styles.simulateHovered)}>
+						{'select'}
+					</span>
+					{' it.'}
+				</span>
+				<GisticTable
+					itemsName="genes"
+					reactTableProps={reactTableProps}
+					initItemsPerPage={10}
+					headerControlsProps={headerControlsProps}
+					columns={columns}
+					rawData={this.props.data}
+				/>
+				<button className={styles.selectButton} onClick={() => this.props.onSelect(this.map_geneSymbol_selected)}>
+					Select
+				</button>
 			</div>
 		);
 	}
 }
+
+@observer
+class GisticGeneToggles extends React.Component<{gistic?:Gistic, map_geneSymbol_selected:ObservableMap<boolean>}, {}>
+{
+	@observable showAll = false;
+
+	renderGeneToggles(genes:string[])
+	{
+		return genes.map(gene => (
+			<GeneToggle
+				key={gene}
+				map_geneSymbol_selected={this.props.map_geneSymbol_selected}
+				geneSymbol={gene}
+			/>
+		));
+	}
+
+	render()
+	{
+		let allGenes = getGeneSymbols(this.props.gistic);
+		let someGenes = allGenes.slice(0, DEFAULT_NUM_GENES_SHOWN);
+		let moreGenes = allGenes.slice(DEFAULT_NUM_GENES_SHOWN);
+		return (
+			<div className={styles.GisticGeneToggles}>
+				<div className={styles.someGenes}>
+					{this.renderGeneToggles(someGenes)}
+					{!!(moreGenes.length) && (
+						<a className={styles.showMoreLess} onClick={() => this.showAll = !this.showAll}>
+							{this.showAll ? 'less' : `+${moreGenes.length} more`}
+						</a>
+					)}
+				</div>
+				<div className={styles.moreGenes}>
+					{this.showAll && this.renderGeneToggles(moreGenes)}
+				</div>
+			</div>
+		);
+	}
+}
+
+@observer
+class GeneToggle extends React.Component<{map_geneSymbol_selected:ObservableMap<boolean>, geneSymbol:string}, {}>
+{
+	render()
+	{
+		let selected = !!this.props.map_geneSymbol_selected.get(this.props.geneSymbol);
+		return (
+			<span
+				className={classNames(styles.GeneToggle, selected ? styles.selected : styles.notSelected)}
+				onClick={event => this.props.map_geneSymbol_selected.set(this.props.geneSymbol, !selected)}
+			>
+				{this.props.geneSymbol}
+			</span>
+		);
+	}
+}
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index 67e06880860..2732b9a1765 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -4,8 +4,7 @@ import {GeneticProfile} from "../../api/CBioPortalAPI";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
-import queryStore from "./QueryStore";
-import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
+import {ObservableMap, expr, toJS, computed, observable} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/index";
 import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
 import {MutSig} from "../../api/CBioPortalAPIInternal";
@@ -16,38 +15,28 @@ import {Table, Td, TableProps} from 'reactable';
 
 const styles = styles_any as {
 	MutSigGeneSelector: string,
+	selectButton: string,
 };
 
-class MutSigTable extends EnhancedReactTable<MutSig> {};
+class MutSigTable extends EnhancedReactTable<MutSig> {}
 
-@observer
-export default class MutSigGeneSelector extends React.Component<{}, {}>
+export interface MutSigGeneSelectorProps
 {
-	get store()
-	{
-		return queryStore;
-	}
-
-	formatSelected = (data:IColumnFormatterData<MutSig>) =>
-	{
-		let selected = _.includes(this.store.geneIds, data.rowData && data.rowData.hugoGeneSymbol);
-		let text = selected + '';
-		return (
-			<Td key={data.name} column={data.name} value={text}>
-				{text}
-			</Td>
-		);
-	}
+	initialSelection: string[];
+	data: MutSig[];
+	onSelect: (map_geneSymbol_selected:ObservableMap<boolean>) => void;
+}
 
-	downloadSelected = (data:IColumnFormatterData<MutSig>):string =>
+@observer
+export default class MutSigGeneSelector extends React.Component<MutSigGeneSelectorProps, {}>
+{
+	constructor(props:MutSigGeneSelectorProps)
 	{
-		return data.columnData + '';
+		super(props);
+		this.map_geneSymbol_selected.replace(props.initialSelection.map(geneSymbol => [geneSymbol, true]));
 	}
 
-	onVisibleRowsChange = (data:MutSig[]) =>
-	{
-		console.log('onVisibleRowsChange', data);
-	}
+	map_geneSymbol_selected = observable.map<boolean>();
 
 	render()
 	{
@@ -76,8 +65,13 @@ export default class MutSigGeneSelector extends React.Component<{}, {}>
 			'selected': {
 				name: "All",
 				priority: 4,
-				formatter: this.formatSelected,
-				downloader: this.downloadSelected,
+				formatter: (data:IColumnFormatterData<MutSig>) => (
+					<Td key={data.name} column={data.name}>
+						{!!(data.rowData) && (
+							<ObservableMapCheckbox map={this.map_geneSymbol_selected} mapKey={data.rowData.hugoGeneSymbol}/>
+						)}
+					</Td>
+				),
 				sortable: true,
 				filterable: true
 			},
@@ -109,15 +103,35 @@ export default class MutSigGeneSelector extends React.Component<{}, {}>
 		return (
 			<div className={styles.MutSigGeneSelector}>
 				<MutSigTable
-					itemsName="mutations"
+					itemsName="genes"
 					reactTableProps={reactTableProps}
 					initItemsPerPage={10}
 					headerControlsProps={headerControlsProps}
 					columns={columns}
-					rawData={this.store.mutSigForSingleStudy.result}
-					onVisibleRowsChange={this.onVisibleRowsChange}
+					rawData={this.props.data}
 				/>
+				<button className={styles.selectButton} onClick={() => this.props.onSelect(this.map_geneSymbol_selected)}>
+					Select
+				</button>
 			</div>
 		);
 	}
 }
+
+@observer
+class ObservableMapCheckbox extends React.Component<{map:ObservableMap<boolean>, mapKey:string, children?: React.ReactNode}, {}>
+{
+	render()
+	{
+		return (
+			<LabeledCheckbox
+				checked={!!this.props.map.get(this.props.mapKey)}
+				inputProps={{
+					onChange: event => this.props.map.set(this.props.mapKey, (event.target as HTMLInputElement).checked)
+				}}
+			>
+				{this.props.children}
+			</LabeledCheckbox>
+		);
+	}
+}
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index e1bde267447..1df6ab558c1 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -81,8 +81,16 @@ export default class QueryContainer extends React.Component<{}, {}>
 						className={styles.MutSigGeneSelectorWindow}
 						windowTitle="Recurrently Mutated Genes"
 						onClickClose={() => this.store.showMutSigPopup = false}
-						children={<MutSigGeneSelector/>}
-					/>
+					>
+						<MutSigGeneSelector
+							initialSelection={this.store.geneIds}
+							data={this.store.mutSigForSingleStudy.result}
+							onSelect={map_geneSymbol_selected => {
+								this.store.applyGeneSelection(map_geneSymbol_selected);
+								this.store.showMutSigPopup = false;
+							}}
+						/>
+					</PopupWindow>
 				)}
 
 				{!!(devMode.enabled && this.store.showGisticPopup) && (
@@ -90,8 +98,16 @@ export default class QueryContainer extends React.Component<{}, {}>
 						className={styles.GisticGeneSelectorWindow}
 						windowTitle="Recurrent Copy Number Alterations (Gistic)"
 						onClickClose={() => this.store.showGisticPopup = false}
-						children={<GisticGeneSelector/>}
-					/>
+					>
+						<GisticGeneSelector
+							initialSelection={this.store.geneIds}
+							data={this.store.gisticForSingleStudy.result}
+							onSelect={map_geneSymbol_selected => {
+								this.store.applyGeneSelection(map_geneSymbol_selected);
+								this.store.showGisticPopup = false;
+							}}
+						/>
+					</PopupWindow>
 				)}
 
 				{!!(devMode.enabled) && (
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index bab2f8938aa..109e99ce08b 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import client from "../../api/cbioportalClientInstance";
-import {toJS, observable, reaction, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
+import {ObservableMap, toJS, observable, reaction, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
 import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gene} from "../../api/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
@@ -439,6 +439,16 @@ export class QueryStore
 	{
 		this.geneQuery = normalizeQuery(this.geneQuery.toUpperCase().replace(new RegExp(`\\b${oldSymbol.toUpperCase()}\\b`, 'g'), () => newSymbol.toUpperCase()));
 	}
+
+	@action applyGeneSelection(map_geneSymbol_selected:ObservableMap<boolean>)
+	{
+		let [toAppend, toRemove] = _.partition(map_geneSymbol_selected.keys(), geneSymbol => map_geneSymbol_selected.get(geneSymbol));
+		toAppend = _.difference(toAppend, this.geneIds);
+		toRemove = _.intersection(toRemove, this.geneIds);
+		for (let geneSymbol of toRemove)
+			this.replaceGene(geneSymbol, '');
+		this.geneQuery = normalizeQuery([this.geneQuery, ...toAppend].join(' '));
+	}
 }
 
 const queryStore = (window as any).queryStore = new QueryStore();
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index bb4daa9aed6..e1d2a88fab8 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -2,17 +2,17 @@
   width: 850px;
 
   label {
-    margin-bottom: 0px;
+    margin-bottom: 0;
     font-weight: normal;
   }
 
   h2 {
     font: normal normal 300 20px/23px 'Helvetica Neue', Helvetica, Arial, sans-serif;
     flex-grow: 2;
-    margin: 0px;
+    margin: 0;
   }
 
-  errorMessage: {
+  .errorMessage {
     color: maroon;
     font-weight: bold;
   }
@@ -338,6 +338,9 @@ div.MutSigGeneSelectorWindow {
 
   div.MutSigGeneSelector {
     flex: 1;
+    button.selectButton {
+      float: right;
+    }
   }
 }
 
@@ -347,6 +350,47 @@ div.GisticGeneSelectorWindow {
 
   div.GisticGeneSelector {
     flex: 1;
+
+    div.GisticGeneToggles {
+    }
+
+    .someGenes, .moreGenes {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    span.GeneToggle {
+      padding: 3px;
+
+      &:not(.simulateHovered) {
+        cursor: pointer;
+      }
+      &:hover, &.simulateHovered {
+        padding: 1px;
+        border: 2px solid #1974b8;
+        border-radius: 5px;
+      }
+      &.selected {
+        font-weight: bold;
+      }
+      &.notSelected {
+        font-weight: normal;
+      }
+    }
+
+    a.showMoreLess {
+      cursor: pointer;
+      padding: 3px;
+      color: blue;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    button.selectButton {
+      float: right;
+    }
   }
 }
 

From cf42dfe656eccf9ad78ff7cf893c9b4e6d085331 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 24 Feb 2017 18:15:51 -0500
Subject: [PATCH 053/133] improved feedback for pending data

---
 .../components/asyncStatus/AsyncStatus.tsx    | 53 +++++++++++++++++++
 .../components/asyncStatus/styles.module.scss | 22 ++++++++
 .../components/query/GeneSetSelector.tsx      | 25 +++++----
 .../components/query/GeneSymbolValidator.tsx  |  3 +-
 .../query/GeneticProfileSelector.tsx          | 27 +++++-----
 5 files changed, 107 insertions(+), 23 deletions(-)
 create mode 100644 src/shared/components/asyncStatus/AsyncStatus.tsx
 create mode 100644 src/shared/components/asyncStatus/styles.module.scss

diff --git a/src/shared/components/asyncStatus/AsyncStatus.tsx b/src/shared/components/asyncStatus/AsyncStatus.tsx
new file mode 100644
index 00000000000..e80b417ec7d
--- /dev/null
+++ b/src/shared/components/asyncStatus/AsyncStatus.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import Spinner from 'react-spinkit';
+import {MobxPromiseUnionType, MobxPromiseUnionTypeWithDefault} from "../../api/MobxPromise";
+import {observer} from "../../../../node_modules/mobx-react/index";
+import FontAwesome from "react-fontawesome";
+import * as styles_any from './styles.module.scss';
+import classNames from "../../lib/classNames";
+
+const styles = styles_any as {
+	pending: string,
+	complete: string,
+	error: string,
+	icon: string,
+	message: string,
+};
+
+interface IAsyncStatusProps extends React.HTMLProps<HTMLDivElement>
+{
+	promise: MobxPromiseUnionType<any> | MobxPromiseUnionTypeWithDefault<any>;
+}
+
+@observer
+export default class AsyncStatus extends React.Component<IAsyncStatusProps, {}>
+{
+	render()
+	{
+		let {promise, children, className, ...divProps} = this.props;
+		switch (promise.status)
+		{
+			case 'pending':
+				return (
+					<div className={classNames(className, styles.pending)} {...divProps}>
+						<Spinner/>
+					</div>
+				);
+			case 'error':
+				return (
+					<div className={classNames(className, styles.error)} {...divProps}>
+						<FontAwesome className={styles.icon} name='exclamation-triangle'/>
+						<span className={styles.message}>{promise.error.message}</span>
+					</div>
+				);
+			case 'complete':
+				if (children)
+					return (
+						<div className={classNames(className, styles.complete)} {...divProps}>
+							{children}
+						</div>
+					);
+				return null;
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/shared/components/asyncStatus/styles.module.scss b/src/shared/components/asyncStatus/styles.module.scss
new file mode 100644
index 00000000000..f9c025ce1c0
--- /dev/null
+++ b/src/shared/components/asyncStatus/styles.module.scss
@@ -0,0 +1,22 @@
+.pending {
+}
+
+.error {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #cd0a0a;
+  background: #fef1ec;
+  color: #cd0a0a;
+
+  .icon {
+  }
+
+  .message {
+  }
+}
+
+.complete {
+}
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 4115ab7bf38..4fabf4c1de1 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -7,6 +7,7 @@ import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import gene_lists from './gene_lists';
 import GeneSymbolValidator from "./GeneSymbolValidator";
 import classNames from "../../lib/classNames";
+import AsyncStatus from "../asyncStatus/AsyncStatus";
 
 const styles = styles_any as {
 	GeneSetSelector: string,
@@ -47,16 +48,20 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 				/>
 
 				<FlexRow padded>
-					{!!(this.store.mutSigForSingleStudy.result.length) && (
-						<button onClick={() => this.store.showMutSigPopup = true}>
-							Select from Recurrently Mutated Genes (MutSig)
-						</button>
-					)}
-					{!!(this.store.gisticForSingleStudy.result.length) && (
-						<button onClick={() => this.store.showGisticPopup = true}>
-							Select Genes from Recurrent CNAs (Gistic)
-						</button>
-					)}
+					<AsyncStatus promise={this.store.mutSigForSingleStudy}>
+						{!!(this.store.mutSigForSingleStudy.result.length) && (
+							<button onClick={() => this.store.showMutSigPopup = true}>
+								Select from Recurrently Mutated Genes (MutSig)
+							</button>
+						)}
+					</AsyncStatus>
+					<AsyncStatus promise={this.store.gisticForSingleStudy}>
+						{!!(this.store.gisticForSingleStudy.result.length) && (
+							<button onClick={() => this.store.showGisticPopup = true}>
+								Select Genes from Recurrent CNAs (Gistic)
+							</button>
+						)}
+					</AsyncStatus>
 				</FlexRow>
 
 				<textarea
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index ef2595ee383..45cb7084efc 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -13,6 +13,7 @@ import {Gene} from "../../api/CBioPortalAPI";
 import Spinner from "react-spinkit";
 import FontAwesome from "react-fontawesome";
 import ReactSelect from 'react-select';
+import AsyncStatus from "../asyncStatus/AsyncStatus";
 
 const styles = styles_any as {
 	GeneSymbolValidator: string,
@@ -308,7 +309,7 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 					</div>
 
 					{this.store.genes.result.suggestions.map(this.renderSuggestion, this)}
-					{this.store.genes.isPending && <Spinner/>}
+					<AsyncStatus promise={this.store.genes}/>
 				</div>
 			);
 
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index a1bc7148243..eb05c855cde 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -7,6 +7,7 @@ import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
 import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
 import {observer} from "../../../../node_modules/mobx-react/index";
+import AsyncStatus from "../asyncStatus/AsyncStatus";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
@@ -29,23 +30,25 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 
 	render()
 	{
-		if (!this.store.singleSelectedStudyId || !this.store.geneticProfiles.isComplete)
+		if (!this.store.singleSelectedStudyId)
 			return null;
 
 		return (
 			<div className={styles.GeneticProfileSelector}>
 				<h2>Select Genomic Profiles:</h2>
-				{[
-					this.renderGroup("MUTATION_EXTENDED", "Mutation"),
-					this.renderGroup("COPY_NUMBER_ALTERATION", "Copy Number"),
-					this.renderGroup("MRNA_EXPRESSION", "mRNA Expression"),
-					this.renderGroup("METHYLATION", "DNA Methylation"),
-					this.renderGroup("METHYLATION_BINARY", "DNA Methylation"),
-					this.renderGroup("PROTEIN_LEVEL", "Protein/phosphoprotein level"),
-				]}
-				{!!(!this.store.geneticProfiles.result.length) && (
-					<strong>No Genomic Profiles available for this Cancer Study</strong>
-				)}
+				<AsyncStatus promise={this.store.geneticProfiles}>
+					{[
+						this.renderGroup("MUTATION_EXTENDED", "Mutation"),
+						this.renderGroup("COPY_NUMBER_ALTERATION", "Copy Number"),
+						this.renderGroup("MRNA_EXPRESSION", "mRNA Expression"),
+						this.renderGroup("METHYLATION", "DNA Methylation"),
+						this.renderGroup("METHYLATION_BINARY", "DNA Methylation"),
+						this.renderGroup("PROTEIN_LEVEL", "Protein/phosphoprotein level"),
+					]}
+					{!!(!this.store.geneticProfiles.result.length) && (
+						<strong>No Genomic Profiles available for this Cancer Study</strong>
+					)}
+				</AsyncStatus>
 			</div>
 		);
 	}

From 6a2483b96b92e9e140c226bb774c41a41b9a0178 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Mon, 27 Feb 2017 16:45:27 -0500
Subject: [PATCH 054/133] showPagination: true

---
 src/shared/components/query/GisticGeneSelector.tsx | 2 +-
 src/shared/components/query/MutSigGeneSelector.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index f3069626aa3..115b329f62a 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -126,7 +126,7 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 			showCopyAndDownload: false,
 		    // copyDownloadClassName?: string;
 		    showHideShowColumnButton: false,
-		    // showPagination?:boolean;
+		    showPagination: true
 		    // handleInput?: Function;
 		    // downloadDataGenerator?: Function;
 		    // downloadDataContainsHeader?: boolean;
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index 2732b9a1765..478482cf772 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -90,7 +90,7 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 			showCopyAndDownload: false,
 		    // copyDownloadClassName?: string;
 		    showHideShowColumnButton: false,
-		    // showPagination?:boolean;
+		    showPagination: true,
 		    // handleInput?: Function;
 		    // downloadDataGenerator?: Function;
 		    // downloadDataContainsHeader?: boolean;

From 91f856d3344a5e325150355777eea423f7541cc2 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Mon, 27 Feb 2017 17:31:09 -0500
Subject: [PATCH 055/133] Replace relative ../node_modules imports

---
 src/pages/home/HomePage.tsx                              | 6 +++---
 src/pages/pageHeader/PageHeader.tsx                      | 2 +-
 src/shared/components/StudyList/StudyList.tsx            | 2 +-
 src/shared/components/StudyList/StudyListLogic.ts        | 2 +-
 src/shared/components/asyncStatus/AsyncStatus.tsx        | 2 +-
 src/shared/components/query/CancerStudySelector.tsx      | 4 ++--
 src/shared/components/query/DataTypePrioritySelector.tsx | 4 ++--
 src/shared/components/query/GeneSetSelector.tsx          | 2 +-
 src/shared/components/query/GeneSymbolValidator.tsx      | 4 ++--
 src/shared/components/query/GeneticProfileSelector.tsx   | 4 ++--
 src/shared/components/query/GisticGeneSelector.tsx       | 4 ++--
 src/shared/components/query/MutSigGeneSelector.tsx       | 4 ++--
 src/shared/components/query/QueryContainer.tsx           | 2 +-
 src/shared/components/query/QueryStore.ts                | 2 +-
 src/shared/components/query/SampleListSelector.tsx       | 2 +-
 src/shared/lib/devMode.ts                                | 2 +-
 16 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 504b9c73415..1b4137da090 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -5,9 +5,9 @@ import QueryContainer from "../../shared/components/query/QueryContainer";
 import * as styles_any from './styles.module.scss';
 import {FlexCol, FlexRow} from "../../shared/components/flexbox/FlexBox";
 import devMode from "../../shared/lib/devMode";
-import {observer} from "../../../node_modules/mobx-react/index";
-import DevTools from "../../../node_modules/mobx-react-devtools/index";
-import {toJS, observable, action, computed, whyRun, expr} from "../../../node_modules/mobx/lib/mobx";
+import {observer} from "mobx-react";
+import DevTools from "mobx-react-devtools";
+import {toJS, observable, action, computed, whyRun, expr} from "mobx";
 import queryStore from "../../shared/components/query/QueryStore";
 import {Select, StateToggle} from "../../shared/components/ExperimentalControls";
 
diff --git a/src/pages/pageHeader/PageHeader.tsx b/src/pages/pageHeader/PageHeader.tsx
index eb154535d6d..fedd70c2658 100644
--- a/src/pages/pageHeader/PageHeader.tsx
+++ b/src/pages/pageHeader/PageHeader.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import './styles.scss';
 import {StateToggle} from "../../shared/components/ExperimentalControls";
 import devMode from "../../shared/lib/devMode";
-import {observer} from "../../../node_modules/mobx-react/index";
+import {observer} from "mobx-react";
 
 interface IPageHeaderProps {
     router: any;
diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index c3ae4bd7891..81f68dff7ec 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -5,7 +5,7 @@ import classNames from "../../lib/classNames";
 import FontAwesome from "react-fontawesome";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import queryStore from "../query/QueryStore";
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {observer} from "mobx-react";
 
 const styles = {
 	...styles_any as {
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 4517b01a259..f60d8f01dbe 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -5,7 +5,7 @@ import {NodeMetadata} from "../query/CancerStudyTreeData";
 import {TypeOfCancer as CancerType, CancerStudy} from "../../api/CBioPortalAPI";
 import memoize from "../../lib/memoize";
 import {QueryStore} from "../query/QueryStore";
-import {computed, action} from "../../../../node_modules/mobx/lib/mobx";
+import {computed, action} from "mobx";
 
 export function matchesSearchText(input:string, searchText:string):boolean
 {
diff --git a/src/shared/components/asyncStatus/AsyncStatus.tsx b/src/shared/components/asyncStatus/AsyncStatus.tsx
index e80b417ec7d..6fa1859dd5d 100644
--- a/src/shared/components/asyncStatus/AsyncStatus.tsx
+++ b/src/shared/components/asyncStatus/AsyncStatus.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Spinner from 'react-spinkit';
 import {MobxPromiseUnionType, MobxPromiseUnionTypeWithDefault} from "../../api/MobxPromise";
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {observer} from "node_modules/mobx-react/index";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import classNames from "../../lib/classNames";
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 3816b32bdb2..2be6dbf42ec 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -10,9 +10,9 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
 import 'react-select/dist/react-select.css';
 import StudyList from "../StudyList/StudyList";
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {observer} from "mobx-react";
 import queryStore from "./QueryStore";
-import {action, toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
+import {action, toJS, computed} from "mobx";
 import memoize from "../../lib/memoize";
 
 const styles = styles_any as {
diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index 47c53a7ac23..0fedb3cf7c9 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -3,8 +3,8 @@ import * as React from 'react';
 import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
 import {QueryStore} from "./QueryStore";
-import {toJS} from "../../../../node_modules/mobx/lib/mobx";
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {toJS} from "mobx";
+import {observer} from "mobx-react";
 import {FlexRow} from "../flexbox/FlexBox";
 
 const styles = styles_any as {
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 4fabf4c1de1..60cefd5d3d3 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
 import ReactSelect from 'react-select';
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {observer} from "mobx-react";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import gene_lists from './gene_lists';
 import GeneSymbolValidator from "./GeneSymbolValidator";
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 45cb7084efc..0f7b6da699e 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -2,8 +2,8 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
-import {toJS, observable, autorunAsync, reaction, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {toJS, observable, autorunAsync, reaction, action, computed, whyRun, expr} from "mobx";
+import {observer} from "mobx-react";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import gene_lists from './gene_lists';
 import oql_parser from '../../lib/oql/oql-parser';
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index eb05c855cde..d278e0d9582 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -5,8 +5,8 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
-import {toJS, computed} from "../../../../node_modules/mobx/lib/mobx";
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {toJS, computed} from "mobx";
+import {observer} from "mobx-react";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
 
 const styles = styles_any as {
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index 115b329f62a..3eca69da4ad 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -5,8 +5,8 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
-import {ObservableMap, expr, toJS, computed, observable} from "../../../../node_modules/mobx/lib/mobx";
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {ObservableMap, expr, toJS, computed, observable} from "mobx";
+import {observer} from "mobx-react";
 import {Gistic} from "../../api/CBioPortalAPIInternal";
 import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
 import {ITableHeaderControlsProps} from "../tableHeaderControls/TableHeaderControls";
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index 478482cf772..281d30ba1e3 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -4,8 +4,8 @@ import {GeneticProfile} from "../../api/CBioPortalAPI";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
-import {ObservableMap, expr, toJS, computed, observable} from "../../../../node_modules/mobx/lib/mobx";
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {ObservableMap, expr, toJS, computed, observable} from "mobx";
+import {observer} from "mobx-react";
 import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
 import {MutSig} from "../../api/CBioPortalAPIInternal";
 import {IColumnFormatterData} from "../enhancedReactTable/IColumnFormatter";
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 1df6ab558c1..5a9e6a398fc 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -10,7 +10,7 @@ import Checkbox = ReactBootstrap.Checkbox;
 import {Select, StateToggle} from "../ExperimentalControls";
 import * as styles_any from './styles.module.scss';
 import GeneticProfileSelector from "./GeneticProfileSelector";
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {observer} from "mobx-react";
 import queryStore from "./QueryStore";
 import devMode from "../../lib/devMode";
 import DataTypePrioritySelector from "./DataTypePrioritySelector";
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 109e99ce08b..dea936279aa 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import client from "../../api/cbioportalClientInstance";
-import {ObservableMap, toJS, observable, reaction, action, computed, whyRun, expr} from "../../../../node_modules/mobx/lib/mobx";
+import {ObservableMap, toJS, observable, reaction, action, computed, whyRun, expr} from "mobx";
 import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gene} from "../../api/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index 76b814f6067..7f66864e053 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
 import ReactSelect from 'react-select';
-import {observer} from "../../../../node_modules/mobx-react/index";
+import {observer} from "mobx-react";
 import {FlexCol} from "../flexbox/FlexBox";
 import {QueryStore} from "./QueryStore";
 
diff --git a/src/shared/lib/devMode.ts b/src/shared/lib/devMode.ts
index fae680692e0..218369d3787 100644
--- a/src/shared/lib/devMode.ts
+++ b/src/shared/lib/devMode.ts
@@ -1,4 +1,4 @@
-import {observable} from "../../../node_modules/mobx/lib/mobx";
+import {observable} from "mobx";
 
 class DevMode
 {

From ade2f322d983b09134bd2bd538655aeb8ebca771 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 28 Feb 2017 10:29:50 -0500
Subject: [PATCH 056/133] Code cleanup

---
 .../components/asyncStatus/AsyncStatus.tsx    |   4 +-
 .../components/query/GeneSymbolValidator.tsx  | 254 +-----------------
 .../components/query/MutSigGeneSelector.tsx   |  39 ++-
 src/shared/components/query/QueryStore.ts     |   1 -
 4 files changed, 39 insertions(+), 259 deletions(-)

diff --git a/src/shared/components/asyncStatus/AsyncStatus.tsx b/src/shared/components/asyncStatus/AsyncStatus.tsx
index 6fa1859dd5d..1e9fed63110 100644
--- a/src/shared/components/asyncStatus/AsyncStatus.tsx
+++ b/src/shared/components/asyncStatus/AsyncStatus.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Spinner from 'react-spinkit';
 import {MobxPromiseUnionType, MobxPromiseUnionTypeWithDefault} from "../../api/MobxPromise";
-import {observer} from "node_modules/mobx-react/index";
+import {observer} from "mobx-react";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import classNames from "../../lib/classNames";
@@ -50,4 +50,4 @@ export default class AsyncStatus extends React.Component<IAsyncStatusProps, {}>
 				return null;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 0f7b6da699e..48dfc5f4fc9 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -1,19 +1,12 @@
-import * as _ from 'lodash';
 import * as React from 'react';
 import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
-import {toJS, observable, autorunAsync, reaction, action, computed, whyRun, expr} from "mobx";
 import {observer} from "mobx-react";
-import {FlexRow, FlexCol} from "../flexbox/FlexBox";
-import gene_lists from './gene_lists';
-import oql_parser from '../../lib/oql/oql-parser';
-import client from "../../api/cbioportalClientInstance";
-import {remoteData} from "../../api/remoteData";
-import {Gene} from "../../api/CBioPortalAPI";
 import Spinner from "react-spinkit";
 import FontAwesome from "react-fontawesome";
 import ReactSelect from 'react-select';
 import AsyncStatus from "../asyncStatus/AsyncStatus";
+import {GeneReplacement} from "./QueryStore";
 
 const styles = styles_any as {
 	GeneSymbolValidator: string,
@@ -37,248 +30,11 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 		return queryStore;
 	}
 
-	/*
-	@observable.ref _genesPromise:Promise<Gene[]>;
-
-	readonly genes = remoteData<Gene[]>(() => this._genesPromise || Promise.resolve([]), []);
-
-	disposeReaction = reaction(() => this.store.geneQuery, _.debounce(() => this.requestGenes(), 500));
-
-	requestGenes()
-	{
-		let promises:Promise<Gene[]>[] = [];
-		let numberCount = this.store.geneIds.filter(id => Number.isInteger(Number(id))).length;
-		if (numberCount > 0)
-			promises.push(client.fetchGenesUsingPOST({geneIdType: "ENTREZ_GENE_ID", geneIds: this.store.geneIds}));
-		if (numberCount < this.store.geneIds.length)
-			promises.push(client.fetchGenesUsingPOST({geneIdType: "HUGO_GENE_SYMBOL", geneIds: this.store.geneIds}));
-
-		this._genesPromise = Promise.all(promises).then(results => ([] as Gene[]).concat(...results));
-	}
-
-	componentWillUnmount()
-	{
-		this.disposeReaction();
-	}
-	*/
-/*
-	validateGenes = (geneSet:string) =>
-	{
-		if (!geneSet)
-			return;
-
-		let symbolResults = this.store.genes.result;
-
-		$("#genestatus").html("");
-		var stateList = $("<ul>").addClass("ui-widget icon-collection validation-list");
-		var allValid = true;
-
-		// If the number of genes is more than 100, show an error
-		if (symbolResults.length > 100)
-		{
-			var invalidState = $("<li>").addClass("ui-state-default ui-corner-all");
-			var invalidSpan = $("<span>")
-				.addClass("ui-icon ui-icon-notice");
-			var invalidText = $("<span>").addClass("text");
-			invalidText.html("<b>You have entered more than 100 genes.</b>");
-
-			invalidState.attr("title", "Please enter fewer genes for better performance.").tipTip();
-
-			invalidSpan.appendTo(invalidState);
-			invalidText.insertAfter(invalidSpan);
-			invalidState.addClass("ui-state-active");
-			invalidState.prependTo(stateList);
-
-			$("<br>").appendTo(stateList);
-			$("<br>").appendTo(stateList);
-
-			stateList.appendTo("#genestatus");
-
-			return;
-		}
-
-		for (var j = 0; j < symbolResults.length; j++)
-		{
-			var aResult = symbolResults[j];
-			var multiple = false;
-			var foundSynonym = false;
-			var valid = true;
-			var symbols = [];
-			var gene = aResult.name;
-
-			if (aResult.symbols.length == 1)
-			{
-				multiple = false;
-				if (aResult.symbols[0].toUpperCase() != aResult.name.toUpperCase())
-				{
-					foundSynonym = true;
-				}
-				else
-				{
-					continue;
-				}
-			}
-			else if (aResult.symbols.length > 1)
-			{
-				multiple = true;
-				symbols = aResult.symbols;
-			}
-			else
-			{
-				allValid = false;
-			}
-
-			if (foundSynonym || multiple)
-				allValid = false;
-
-			if (multiple)
-			{
-				var state = $("<li>").addClass("ui-state-default ui-corner-all ui-validator");
-				var stateSpan = $("<span>").addClass("ui-icon ui-icon-help");
-				var stateText = $("<span>").addClass("text");
-
-				stateText.html(gene + ": ");
-				var nameSelect = $("<select>").addClass("geneSelectBox").attr("name", gene);
-				$("<option>").attr("value", "")
-					.html("select a symbol")
-					.appendTo(nameSelect);
-				for (var k = 0; k < symbols.length; k++)
-				{
-					var aSymbol = symbols[k];
-					var anOption = $("<option>").attr("value", aSymbol).html(aSymbol);
-					anOption.appendTo(nameSelect);
-				}
-				nameSelect.appendTo(stateText);
-				nameSelect.change(function ()
-				{
-					var trueSymbol = $(this).attr('value');
-					var geneName = $(this).attr("name");
-					$("#gene_list").val($("#gene_list").val().replace(geneName, trueSymbol));
-					setTimeout(validateGenes, 500);
-				});
-
-				stateSpan.appendTo(state);
-				stateText.insertAfter(stateSpan);
-				state.attr("title",
-					"Ambiguous gene symbol. Click on one of the alternatives to replace it."
-				);
-				state.attr("name", gene);
-				state.appendTo(stateList);
-			}
-			else if (foundSynonym)
-			{
-				var state = $("<li>").addClass("ui-state-default ui-corner-all ui-validator");
-				var trueSymbol = aResult.symbols[0];
-
-				state.click(function ()
-				{
-					$(this).toggleClass('ui-state-active');
-					var names = $(this).attr("name").split(":");
-					var geneName = names[0];
-					var symbol = names[1];
-					$("#gene_list").val($("#gene_list").val().replace(geneName, symbol));
-					setTimeout(validateGenes, 500);
-				});
-
-				var stateSpan = $("<span>").addClass("ui-icon ui-icon-help");
-				var stateText = $("<span>").addClass("text");
-				stateText.html("<b>" + gene + "</b>: " + trueSymbol);
-				stateSpan.appendTo(state);
-				stateText.insertAfter(stateSpan);
-				state.attr("title",
-					"'" + gene + "' is a synonym for '" + trueSymbol + "'. "
-					+ "Click here to replace it with the official symbol."
-				);
-				state.attr("name", gene + ":" + trueSymbol);
-				state.appendTo(stateList);
-			}
-			else
-			{
-				var state = $("<li>").addClass("ui-state-default ui-corner-all ui-validator");
-				state.click(function ()
-				{
-					$(this).toggleClass('ui-state-active');
-					geneName = $(this).attr("name");
-					$("#gene_list").val($("#gene_list").val().replace(" " + geneName, ""));
-					$("#gene_list").val($("#gene_list").val().replace(geneName + " ", ""));
-					$("#gene_list").val($("#gene_list").val().replace(geneName + "\n", ""));
-					$("#gene_list").val($("#gene_list").val().replace(geneName, ""));
-					setTimeout(validateGenes, 500);
-				});
-				var stateSpan = $("<span>").addClass("ui-icon ui-icon-circle-close");
-				var stateText = $("<span>").addClass("text");
-				stateText.html(gene);
-				stateSpan.appendTo(state);
-				stateText.insertAfter(stateSpan);
-				state.attr("title",
-					"Could not find gene symbol. Click to remove it from the gene list."
-				);
-				state.attr("name", gene);
-				state.appendTo(stateList);
-			}
-		}
-
-		stateList.appendTo("#genestatus");
-
-		$('.ui-state-default').hover(
-			function ()
-			{
-				$(this).addClass('ui-state-hover');
-			},
-			function ()
-			{
-				$(this).removeClass('ui-state-hover');
-			}
-		);
-
-		$('.ui-validator').tipTip();
-
-		if (allValid)
-		{
-			$("#main_submit").removeAttr("disabled")
-
-			if (symbolResults.length > 0
-				&& !(symbolResults[0].name == "" && symbolResults[0].symbols.length == 0))
-			{
-
-				var validState = $("<li>").addClass("ui-state-default ui-corner-all");
-				var validSpan = $("<span>")
-					.addClass("ui-icon ui-icon-circle-check");
-				var validText = $("<span>").addClass("text");
-				validText.html("All gene symbols are valid.");
-
-				validSpan.appendTo(validState);
-				validText.insertAfter(validSpan);
-				validState.addClass("ui-state-active");
-				validState.appendTo(stateList);
-				validState.attr("title", "You can now submit the list").tipTip();
-				$("<br>").appendTo(stateList);
-				$("<br>").appendTo(stateList);
-			}
-
-		}
-		else
-		{
-			var invalidState = $("<li>").addClass("ui-state-default ui-corner-all");
-			var invalidSpan = $("<span>")
-				.addClass("ui-icon ui-icon-notice");
-			var invalidText = $("<span>").addClass("text");
-			invalidText.html("<b>Invalid gene symbols.</b>");
-
-			invalidState.attr("title", "Please edit the gene symbols").tipTip();
-
-			invalidSpan.appendTo(invalidState);
-			invalidText.insertAfter(invalidSpan);
-			invalidState.addClass("ui-state-active");
-			invalidState.prependTo(stateList);
-
-			$("<br>").appendTo(stateList);
-			$("<br>").appendTo(stateList);
-		}
-	}
-*/
 	render()
 	{
+		if (!this.store.geneIds.length)
+			return null;
+
 		if (this.store.genes.isPending && this.store.genes.result.suggestions.length == 0)
 			return (
 				<div className={styles.GeneSymbolValidator}>
@@ -323,7 +79,7 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 		);
 	}
 
-	renderSuggestion({alias, genes}:{alias: string, genes: Gene[]}, key:number)
+	renderSuggestion({alias, genes}:GeneReplacement, key:number)
 	{
 		if (genes.length == 0)
 		{
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index 281d30ba1e3..b7d0595a9f3 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -1,10 +1,8 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {GeneticProfile} from "../../api/CBioPortalAPI";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
-import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
-import {ObservableMap, expr, toJS, computed, observable} from "mobx";
+import {action, ObservableMap, expr, toJS, computed, observable} from "mobx";
 import {observer} from "mobx-react";
 import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
 import {MutSig} from "../../api/CBioPortalAPIInternal";
@@ -36,7 +34,23 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 		this.map_geneSymbol_selected.replace(props.initialSelection.map(geneSymbol => [geneSymbol, true]));
 	}
 
-	map_geneSymbol_selected = observable.map<boolean>();
+	private readonly map_geneSymbol_selected = observable.map<boolean>();
+
+	@computed get allGenes()
+	{
+		return _.uniq(this.props.data.map(mutSig => mutSig.hugoGeneSymbol));
+	}
+
+	@computed get selectedGenes()
+	{
+		return this.allGenes.filter(symbol => this.map_geneSymbol_selected.get(symbol));
+	}
+
+	@action selectAll(selected:boolean)
+	{
+		for (let gene of this.allGenes)
+			this.map_geneSymbol_selected.set(gene, selected);
+	}
 
 	render()
 	{
@@ -63,8 +77,19 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 				filterable: true
 			},
 			'selected': {
-				name: "All",
+				name: "Selected",
 				priority: 4,
+				header: (
+					<LabeledCheckbox
+						checked={this.selectedGenes.length > 0}
+						indeterminate={this.selectedGenes.length > 0 && this.selectedGenes.length < this.allGenes.length}
+						inputProps={{
+							onChange: event => this.selectAll((event.target as HTMLInputElement).checked)
+						}}
+					>
+						All
+					</LabeledCheckbox>
+				),
 				formatter: (data:IColumnFormatterData<MutSig>) => (
 					<Td key={data.name} column={data.name}>
 						{!!(data.rowData) && (
@@ -72,8 +97,8 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 						)}
 					</Td>
 				),
-				sortable: true,
-				filterable: true
+				sortable: false,
+				filterable: false
 			},
 		};
 
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index dea936279aa..59a7b0378b4 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -7,7 +7,6 @@ import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
 import {labelMobxPromises} from "../../api/MobxPromise";
 import internalClient from "../../api/cbioportalInternalClientInstance";
-import {MutSig, Gistic} from "../../api/CBioPortalAPIInternal";
 import oql_parser from "../../lib/oql/oql-parser";
 import {SyntaxError} from "../../lib/oql/oql-parser";
 import memoize from "../../lib/memoize";

From ac709b6ab6157c431861e7683d1c9bdc511f6f3c Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 28 Feb 2017 15:43:51 -0500
Subject: [PATCH 057/133] mutsig popup header checkbox

---
 .../components/query/MutSigGeneSelector.tsx   | 27 +++++++++++--------
 .../components/query/styles.module.scss       | 17 ++++++++++--
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index b7d0595a9f3..6df7b2b44f7 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -14,6 +14,8 @@ import {Table, Td, TableProps} from 'reactable';
 const styles = styles_any as {
 	MutSigGeneSelector: string,
 	selectButton: string,
+	selectionColumnHeader: string,
+	selectionColumnCell: string,
 };
 
 class MutSigTable extends EnhancedReactTable<MutSig> {}
@@ -80,20 +82,23 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 				name: "Selected",
 				priority: 4,
 				header: (
-					<LabeledCheckbox
-						checked={this.selectedGenes.length > 0}
-						indeterminate={this.selectedGenes.length > 0 && this.selectedGenes.length < this.allGenes.length}
-						inputProps={{
-							onChange: event => this.selectAll((event.target as HTMLInputElement).checked)
-						}}
-					>
-						All
-					</LabeledCheckbox>
+					<div className={styles.selectionColumnHeader}>
+						<span>All</span>
+						<LabeledCheckbox
+							checked={this.selectedGenes.length > 0}
+							indeterminate={this.selectedGenes.length > 0 && this.selectedGenes.length < this.allGenes.length}
+							inputProps={{
+								onChange: event => this.selectAll((event.target as HTMLInputElement).checked)
+							}}
+						/>
+					</div>
 				),
 				formatter: (data:IColumnFormatterData<MutSig>) => (
 					<Td key={data.name} column={data.name}>
 						{!!(data.rowData) && (
-							<ObservableMapCheckbox map={this.map_geneSymbol_selected} mapKey={data.rowData.hugoGeneSymbol}/>
+							<div className={styles.selectionColumnCell}>
+								<ObservableMapCheckbox map={this.map_geneSymbol_selected} mapKey={data.rowData.hugoGeneSymbol}/>
+							</div>
 						)}
 					</Td>
 				),
@@ -123,7 +128,7 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 		    // paginationProps?: ITablePaginationControlsProps;
 		    // columnVisibilityProps?: IColumnVisibilityControlsProps;
 		    // searchDelayMs?:number;
-		}
+		};
 
 		return (
 			<div className={styles.MutSigGeneSelector}>
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index e1d2a88fab8..e76177debf2 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -334,10 +334,22 @@
 
 div.MutSigGeneSelectorWindow {
   width: 650px;
-  height: 375px;
 
   div.MutSigGeneSelector {
+    margin: 10px;
     flex: 1;
+    div.selectionColumnHeader, div.selectionColumnCell {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      label {
+        min-height: 1em !important;
+        input[type='checkbox'] {
+          margin: 4px 0 0 0;
+        }
+      }
+    }
     button.selectButton {
       float: right;
     }
@@ -346,12 +358,13 @@ div.MutSigGeneSelectorWindow {
 
 div.GisticGeneSelectorWindow {
   width: 800px;
-  height: 550px;
 
   div.GisticGeneSelector {
+    margin: 10px;
     flex: 1;
 
     div.GisticGeneToggles {
+      width: 400px;
     }
 
     .someGenes, .moreGenes {

From 9af0051e6e7f2295baa8a1269808f14bb3a19dbf Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 1 Mar 2017 03:00:45 -0500
Subject: [PATCH 058/133] linting

---
 src/pages/home/HomePage.tsx                   |  40 +++----
 .../components/ExperimentalControls.tsx       |   2 +-
 src/shared/components/StudyList/StudyList.tsx |   6 +-
 .../components/popupWindow/PopupWindow.tsx    |   2 +-
 .../query/DataTypePrioritySelector.tsx        |   2 +-
 .../query/GeneticProfileSelector.tsx          |   1 -
 .../components/query/QueryContainer.tsx       |   3 +-
 .../components/query/SampleListSelector.tsx   |   2 +-
 src/shared/components/query/gene_lists.ts     |   2 +-
 .../query/old/CancerStudySelector.tsx         |  20 ++--
 .../components/query/old/QueryConnector.ts    |   2 +-
 .../components/query/old/QueryContainer.tsx   |   6 +-
 src/shared/components/tree/DescriptorTree.tsx | 110 +++++++++---------
 src/shared/lib/classNames.ts                  |  10 +-
 src/shared/lib/firstDefinedValue.ts           |   2 +-
 src/shared/lib/memoize.ts                     |   9 +-
 tslint.json                                   |  25 +++-
 17 files changed, 127 insertions(+), 117 deletions(-)

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 1b4137da090..690b32a6169 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -34,32 +34,32 @@ interface IHomePageState
 @observer
 export default class HomePage extends React.Component<IHomePageProps, IHomePageState>
 {
-    constructor(props:IHomePageProps)
-    {
-        super(props);
-    }
+	constructor(props:IHomePageProps)
+	{
+		super(props);
+	}
 
 	get store() { return queryStore; }
 
-    public componentDidMount() {
-      this.exposeComponentRenderersToParentScript();
-    }
+	public componentDidMount() {
+	  this.exposeComponentRenderersToParentScript();
+	}
 
-    exposeComponentRenderersToParentScript() {
-        exposeComponentRenderer('renderQueryContainer', QueryContainer);
-    }
+	exposeComponentRenderersToParentScript() {
+		exposeComponentRenderer('renderQueryContainer', QueryContainer);
+	}
 
 	@observable selectorVersion:'new'|'old' = 'new';
 
-    public render()
-    {
-    	let selectorVersionToggle = (
-    		<a style={{alignSelf: 'center'}} onClick={() => this.selectorVersion = this.selectorVersion == 'new' ? 'old' : 'new' }>
-    			Switch to {this.selectorVersion == 'new' ? 'old' : 'new'} view
-    		</a>
+	public render()
+	{
+		let selectorVersionToggle = (
+			<a style={{alignSelf: 'center'}} onClick={() => this.selectorVersion = this.selectorVersion == 'new' ? 'old' : 'new' }>
+				Switch to {this.selectorVersion == 'new' ? 'old' : 'new'} view
+			</a>
 		);
 
-    	if (this.selectorVersion == 'old')
+		if (this.selectorVersion == 'old')
 			return (
 				<FlexCol className={styles.HomePage}>
 					<QueryContainerOld/>
@@ -67,7 +67,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 				</FlexCol>
 			);
 
-        return (
+		return (
 			<FlexRow padded flex={1} className={styles.HomePage}>
 
 				<QueryContainer/>
@@ -92,7 +92,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 									{label: "8"},
 									{label: "9"},
 								]}
-								onChange={option => this.store.maxTreeDepth = parseInt(option.label)}
+								onChange={option => this.store.maxTreeDepth = parseInt(option.label, 10)}
 							/>
 							<span>Note: Use cmd+click to select/deselect multiple cancer types.</span>
 						</FlexCol>
@@ -111,5 +111,5 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 
 			</FlexRow>
 		);
-    }
+	}
 }
diff --git a/src/shared/components/ExperimentalControls.tsx b/src/shared/components/ExperimentalControls.tsx
index 42921505846..2fa51e8427c 100644
--- a/src/shared/components/ExperimentalControls.tsx
+++ b/src/shared/components/ExperimentalControls.tsx
@@ -68,7 +68,7 @@ export function Select(props:ISelectProps<any>)
 {
 	function onChange(event:React.FormEvent<HTMLSelectElement>)
 	{
-		let option = props.options[parseInt((event.target as HTMLInputElement).value)];
+		let option = props.options[parseInt((event.target as HTMLInputElement).value, 10)];
 		if (option.callback)
 			option.callback();
 		if (props.onChange)
diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index 81f68dff7ec..a7679b1f4cb 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -57,7 +57,9 @@ export default class StudyList extends React.Component<{}, {}>
 						<span 
 							onClick={() => this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly}
 							className={styles.closeSelected}
-						>Return to Study Selector</span>
+						>
+							Return to Study Selector
+						</span>
 				</h4>
 				<ul className={styles.StudyList}>
 					{this.renderCancerType(this.logic.rootCancerType)}
@@ -92,7 +94,7 @@ export default class StudyList extends React.Component<{}, {}>
 			if (currentLevel === 3)
 				indentArrow = (
 					<FontAwesome className={styles.indentArrow} name="long-arrow-right" />
-				)
+				);
 
 			heading = (
 				<li className={liClassName}>
diff --git a/src/shared/components/popupWindow/PopupWindow.tsx b/src/shared/components/popupWindow/PopupWindow.tsx
index a54dbb9fe5c..b5cbe247828 100644
--- a/src/shared/components/popupWindow/PopupWindow.tsx
+++ b/src/shared/components/popupWindow/PopupWindow.tsx
@@ -14,7 +14,7 @@ const styles = styles_any as {
 
 interface IPopupWindowProps extends React.HTMLAttributes<HTMLDivElement>
 {
-	windowTitle: string,
+	windowTitle: string;
 	onClickClose: React.MouseEventHandler<HTMLDivElement>;
 }
 
diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index 0fedb3cf7c9..3c66e821670 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -44,7 +44,7 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 					checked={_.isEqual(toJS(this.store.dataTypePriority), props.state)}
 					onChange={event => {
 						if ((event.target as HTMLInputElement).checked)
-							this.store.dataTypePriority = props.state
+							this.store.dataTypePriority = props.state;
 					}}
 				/>
 				{props.label}
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index d278e0d9582..3ed2b054e3f 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -5,7 +5,6 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
-import {toJS, computed} from "mobx";
 import {observer} from "mobx-react";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
 
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 5a9e6a398fc..38ca7027bfc 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -7,7 +7,6 @@ import CancerStudySelector from "./CancerStudySelector";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import Radio = ReactBootstrap.Radio;
 import Checkbox = ReactBootstrap.Checkbox;
-import {Select, StateToggle} from "../ExperimentalControls";
 import * as styles_any from './styles.module.scss';
 import GeneticProfileSelector from "./GeneticProfileSelector";
 import {observer} from "mobx-react";
@@ -50,7 +49,7 @@ export default class QueryContainer extends React.Component<{}, {}>
         	|| this.store.gisticForSingleStudy.error
         	|| this.store.genes.error;
         if (error)
-			return <span className={styles.errorMessage}>{`Error: ${error}`}</span>;
+			return <span className={styles.errorMessage}>{error.toString()}</span>;
 
 
         if (!this.store.cancerTypes.result.length || !this.store.cancerStudies.result.length)
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index 7f66864e053..33ae1b8ffe6 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -76,7 +76,7 @@ export default class SampleListSelector extends React.Component<{}, {}>
 					checked={this.store.caseIdsMode == props.state}
 					onChange={event => {
 						if ((event.target as HTMLInputElement).checked)
-							this.store.caseIdsMode = props.state
+							this.store.caseIdsMode = props.state;
 					}}
 				/>
 				{props.label}
diff --git a/src/shared/components/query/gene_lists.ts b/src/shared/components/query/gene_lists.ts
index 2343cb3bcec..89c71235204 100644
--- a/src/shared/components/query/gene_lists.ts
+++ b/src/shared/components/query/gene_lists.ts
@@ -69,4 +69,4 @@ const gene_lists = [{
 	"genes": ["MMP1", "MMP2", "MMP3", "MMP7", "MMP9", "MMP10", "MMP11", "MMP12", "MMP13", "MMP14", "MMP15", "MMP16", "MMP17", "MMP19", "MMP21", "MMP23B", "MMP24", "MMP25", "MMP26", "MMP27", "MMP28", "ITGB3", "ITGAV", "PTK2", "CDH1", "SPARC", "WFDC2"]
 }];
 
-export default gene_lists;
\ No newline at end of file
+export default gene_lists;
diff --git a/src/shared/components/query/old/CancerStudySelector.tsx b/src/shared/components/query/old/CancerStudySelector.tsx
index 0df960d3343..244d86a434e 100644
--- a/src/shared/components/query/old/CancerStudySelector.tsx
+++ b/src/shared/components/query/old/CancerStudySelector.tsx
@@ -104,10 +104,6 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 		this.state = {};
 	}
 
-	componentDidMount()
-	{
-	}
-
 	get selectableTreeNodes()
 	{
 		return !this.props.filterBySelection && !this.props.showStudiesInTree;
@@ -185,7 +181,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 					return false;
 			}
 			return true;
-		}
+		};
 
 		// returns true if the node or any related nodes match
 		let nodeFilter = memoize({
@@ -204,8 +200,8 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 
 				// check for matching text in this node and related nodes
 				for (let nodes of [[node], meta.descendantCancerTypes, meta.descendantStudies, meta.ancestors])
-					for (let node of nodes)
-						if (shouldConsiderNode(node) && matchesSearchText(node.name, this.searchText))
+					for (let other of nodes)
+						if (shouldConsiderNode(other) && matchesSearchText(other.name, this.searchText))
 							return true;
 
 				// no match
@@ -226,7 +222,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 			}
 
 			return false;
-		}
+		};
 
 		let isExpanded = (node:CancerTreeNode) =>
 		{
@@ -251,7 +247,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 			}
 
 			return false;
-		}
+		};
 
 		function setExpanded<T>(node:CancerTreeNode, value:boolean, event:React.MouseEvent<T>):void
 		{
@@ -277,7 +273,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 				children = children.concat(childStudies);
 			}
 			return children.filter(nodeFilter);
-		}
+		};
 
 		let getContent = (node:CancerTreeNode) =>
 		{
@@ -286,7 +282,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 				return this.renderCancerTypeTreeNode(node as CancerType);
 			else
 				return this.renderCancerStudyTreeNode(node as CancerStudy);
-		}
+		};
 
 		return {
 			rootNode: rootCancerType,
@@ -367,7 +363,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 				[styles.selected]: this.selectableTreeNodes && meta.isCancerType && _.includes(this.selectedCancerTypeIds, node.cancerTypeId),
 			})
 		};
-	};
+	}
 
 	getMatchingNodeClassNames(node:CancerTreeNode):string
 	{
diff --git a/src/shared/components/query/old/QueryConnector.ts b/src/shared/components/query/old/QueryConnector.ts
index 4626dd5141e..b1e5bc05af5 100644
--- a/src/shared/components/query/old/QueryConnector.ts
+++ b/src/shared/components/query/old/QueryConnector.ts
@@ -86,4 +86,4 @@ export default new class QueryConnector extends Connector<RootState, QueryData,
             }
         }
     }
-};
+}();
diff --git a/src/shared/components/query/old/QueryContainer.tsx b/src/shared/components/query/old/QueryContainer.tsx
index a2d0ef2d272..2d2577cd950 100644
--- a/src/shared/components/query/old/QueryContainer.tsx
+++ b/src/shared/components/query/old/QueryContainer.tsx
@@ -21,9 +21,9 @@ const styles = styles_any as {
 
 export interface IQueryContainerProps
 {
-    data?: QueryData,
+    data?: QueryData;
 
-    loadQueryData?: () => void,
+    loadQueryData?: () => void;
 }
 
 export type IQueryContainerState = {
@@ -92,7 +92,7 @@ export default class QueryContainer extends React.Component<IQueryContainerProps
                                 {label: "9"},
                             ]}
                             onChange={option => this.setState({
-                                maxTreeDepth: parseInt(option.label)
+                                maxTreeDepth: parseInt(option.label, 10)
                             })}
                         />
                         <span>Note: Use cmd+click tree node arrow to expand/collapse entire subtree.</span>
diff --git a/src/shared/components/tree/DescriptorTree.tsx b/src/shared/components/tree/DescriptorTree.tsx
index 1b79dfb5009..db03c8f080d 100644
--- a/src/shared/components/tree/DescriptorTree.tsx
+++ b/src/shared/components/tree/DescriptorTree.tsx
@@ -34,31 +34,31 @@ export class BasicTreeDescriptor<TreeNode extends IBasicTreeNode> implements ITr
 
 export interface ITreeDescriptor<TreeNode>
 {
-    isExpanded(node:TreeNode):boolean;
-    getContent(node:TreeNode):React.ReactChild;
-    getChildren(node:TreeNode):TreeNode[]|undefined;
+	isExpanded(node:TreeNode):boolean;
+	getContent(node:TreeNode):React.ReactChild;
+	getChildren(node:TreeNode):TreeNode[]|undefined;
 
-    /**
+	/**
 	 * Allows customizing the LI element of each node.
 	 */
-    getListItemProps?(node:TreeNode):React.HTMLAttributes<HTMLLIElement>|undefined;
+	getListItemProps?(node:TreeNode):React.HTMLAttributes<HTMLLIElement>|undefined;
 }
 
 export interface IDescriptorTreeProps<TreeNode>
 {
-    treeDescriptor?: ITreeDescriptor<TreeNode>;
-    node: TreeNode;
-
-    className?: string;
-    style?: React.CSSProperties;
-    onExpand?: <T>(node:TreeNode, expand:boolean, event:React.MouseEvent<T>)=>void;
-    isChild?: boolean;
-    showRoot?: boolean;
+	treeDescriptor?: ITreeDescriptor<TreeNode>;
+	node: TreeNode;
+
+	className?: string;
+	style?: React.CSSProperties;
+	onExpand?: <T>(node:TreeNode, expand:boolean, event:React.MouseEvent<T>)=>void;
+	isChild?: boolean;
+	showRoot?: boolean;
 }
 
 export interface IDescriptorTreeState
 {
-    expand?: boolean;
+	expand?: boolean;
 }
 
 /**
@@ -89,30 +89,30 @@ export default class DescriptorTree<TreeNode> extends React.Component<IDescripto
 		};
 	}
 
-    constructor(props:IDescriptorTreeProps<TreeNode>)
-    {
-        super(props);
-        this.state = {};
-    }
-
-    onExpand = (event:React.MouseEvent<any>) =>
-    {
-        let expand = !this.expand;
-        if (this.props.onExpand)
-            this.props.onExpand(this.props.node, expand, event);
-        this.setState({expand});
-    }
-
-    get expand():boolean
-    {
+	constructor(props:IDescriptorTreeProps<TreeNode>)
+	{
+		super(props);
+		this.state = {};
+	}
+
+	onExpand = (event:React.MouseEvent<any>) =>
+	{
+		let expand = !this.expand;
+		if (this.props.onExpand)
+			this.props.onExpand(this.props.node, expand, event);
+		this.setState({expand});
+	}
+
+	get expand():boolean
+	{
 		let desc = this.props.treeDescriptor as ITreeDescriptor<TreeNode>;
-        let expand = this.state.expand;
-        if (expand === undefined || this.props.onExpand)
-            expand = desc.isExpanded(this.props.node);
-        return expand;
-    }
+		let expand = this.state.expand;
+		if (expand === undefined || this.props.onExpand)
+			expand = desc.isExpanded(this.props.node);
+		return expand;
+	}
 
-    renderChildNodes(children:TreeNode[] | undefined):JSX.Element[]
+	renderChildNodes(children:TreeNode[] | undefined):JSX.Element[]
 	{
 		return (children || []).map((child, i) => (
 			<DescriptorTree
@@ -122,7 +122,7 @@ export default class DescriptorTree<TreeNode> extends React.Component<IDescripto
 				onExpand={this.props.onExpand}
 				isChild={true}
 			/>
-		))
+		));
 	}
 
 	renderUL(asRootElement:boolean, children:React.ReactNode):JSX.Element
@@ -145,28 +145,28 @@ export default class DescriptorTree<TreeNode> extends React.Component<IDescripto
 		);
 	}
 
-    render():JSX.Element
-    {
-    	let desc = this.props.treeDescriptor as ITreeDescriptor<TreeNode>;
-    	let node = this.props.node;
-        let children = desc.getChildren(node);
+	render():JSX.Element
+	{
+		let desc = this.props.treeDescriptor as ITreeDescriptor<TreeNode>;
+		let node = this.props.node;
+		let children = desc.getChildren(node);
 
 		// if we're hiding the root node, render children at top level
-        if (!this.props.showRoot)
+		if (!this.props.showRoot)
 			return this.renderUL(true, this.renderChildNodes(children));
 
-        // to keep indentation consistent, we always render an icon for the arrow and style controls visibility
-        let expand = this.expand;
-        let showArrow = !!children && children.length > 0;
-        let arrowStyle = showArrow ? undefined : {visibility: 'hidden'};
-        let arrow = (
-            <FontAwesome
-            	className={styles.arrow}
-                name={expand ? 'caret-down' : 'caret-right'}
-                style={arrowStyle}
+		// to keep indentation consistent, we always render an icon for the arrow and style controls visibility
+		let expand = this.expand;
+		let showArrow = !!children && children.length > 0;
+		let arrowStyle = showArrow ? undefined : {visibility: 'hidden'};
+		let arrow = (
+			<FontAwesome
+				className={styles.arrow}
+				name={expand ? 'caret-down' : 'caret-right'}
+				style={arrowStyle}
 				{...{onMouseDown: this.onExpand}}
-            />
-        );
+			/>
+		);
 
 		// the node is rendered as an LI element
 		let customProps = desc.getListItemProps && desc.getListItemProps(node);
@@ -192,7 +192,7 @@ export default class DescriptorTree<TreeNode> extends React.Component<IDescripto
 
 		// root node needs an outer UL element
 		return this.renderUL(true, liElement);
-    }
+	}
 }
 
 /**
diff --git a/src/shared/lib/classNames.ts b/src/shared/lib/classNames.ts
index 6936ba12f4e..3737a466748 100644
--- a/src/shared/lib/classNames.ts
+++ b/src/shared/lib/classNames.ts
@@ -16,12 +16,12 @@ interface ClassArray extends Array<ClassValue> { }
   Licensed under the MIT License (MIT), see
   http://jedwatson.github.io/classnames
 */
-var hasOwn = {}.hasOwnProperty;
+let hasOwn = {}.hasOwnProperty;
 export default function classNames (...args:ClassValue[]) {
-    var classes:any[] = [];
+    let classes:any[] = [];
 
-    for (var i = 0; i < args.length; i++) {
-        var arg = args[i];
+    for (let i = 0; i < args.length; i++) {
+        let arg = args[i];
         if (!arg) continue;
 
         if (typeof arg === 'string' || typeof arg === 'number') {
@@ -29,7 +29,7 @@ export default function classNames (...args:ClassValue[]) {
         } else if (Array.isArray(arg)) {
             classes.push(classNames.apply(null, arg));
         } else if (typeof arg === 'object') {
-            for (var key in arg) {
+            for (let key in arg) {
                 if (hasOwn.call(arg, key) && arg[key]) {
                     classes.push(key);
                 }
diff --git a/src/shared/lib/firstDefinedValue.ts b/src/shared/lib/firstDefinedValue.ts
index 2823afeb16d..94faf731c0c 100644
--- a/src/shared/lib/firstDefinedValue.ts
+++ b/src/shared/lib/firstDefinedValue.ts
@@ -3,7 +3,7 @@ export default function firstDefinedValue<T1,T2,T3>(v1:T1|undefined, v2:T2|undef
 export default function firstDefinedValue<T1,T2,T3,T4>(v1:T1|undefined, v2:T2|undefined, v3:T3|undefined, v4:T4):T1|T2|T3|T4;
 export default function firstDefinedValue(...values:any[])
 {
-	let value = undefined;
+	let value;
 	for (value of values)
 		if (value !== undefined)
 			break;
diff --git a/src/shared/lib/memoize.ts b/src/shared/lib/memoize.ts
index edf5f708455..cf921380042 100644
--- a/src/shared/lib/memoize.ts
+++ b/src/shared/lib/memoize.ts
@@ -199,8 +199,9 @@ function decorate<T extends AnyFunction>(descriptor:TypedPropertyDescriptor<T>,
  * Generates a method decorator that creates a memoized version of a function with additional args to control memoization
  * @param getMemoizeParams_propName The name of another class method that returns additional arguments for controlling memoization.
  */
-export function memoizeWith<T extends AnyFunction, P extends string, TARGET extends {[X in P]: (this:TARGET)=>any[]}>(getMemoizeParams_propName:P)
-	:<T>(
+export function memoizeWith
+	<T extends AnyFunction, P extends string, TARGET extends {[X in P]: (this:TARGET)=>any[]}>
+	(getMemoizeParams_propName:P):<T>(
 		target: TARGET,
 		propertyKey: string | symbol,
 		descriptor: TypedPropertyDescriptor<T>
@@ -210,8 +211,8 @@ export function memoizeWith<T extends AnyFunction, P extends string, TARGET exte
 		return decorate(
 			descriptor,
 			{
-				getAdditionalArgs: function(this:TARGET) {
-					let fn:()=>any[] = this[getMemoizeParams_propName] as any;
+				getAdditionalArgs(this:TARGET) {
+					let fn = this[getMemoizeParams_propName] as any as () => any[];
 					return fn.call(this);
 				}
 			}
diff --git a/tslint.json b/tslint.json
index 222af27c62b..a59b6ecce8f 100644
--- a/tslint.json
+++ b/tslint.json
@@ -4,30 +4,45 @@
         "tslint-react"
     ],
     "rules": {
+        "array-type": false,
+        "arrow-parens": false,
+        "callable-types": false,
         "class-name": true,
         "comment-format": false,
         "curly": false,
+        "forin": false,
         "indent": [
-            true,
+            false,
             "spaces"
         ],
+        "interface-name": false,
+        "interface-over-type-literal": false,
+        "jsx-curly-spacing": false,
+        "jsx-no-lambda": false,
         "jsx-no-multiline-js": false,
+        "max-classes-per-file": false,
+        "max-line-length": [false],
         "member-access": false,
         "member-ordering": false,
         "no-consecutive-blank-lines":false,
         "no-duplicate-variable": true,
+        "no-empty-interface": false,
         "no-eval": true,
         "no-internal-module": true,
         "no-string-literal": false,
         "no-trailing-whitespace": false,
         "no-unsafe-finally": true,
         "no-var-keyword": true,
+        "object-literal-key-quotes": false,
+        "one-variable-per-declaration": false,
         "only-arrow-functions": false,
         "ordered-imports": false,
         "one-line": [
             true,
             "check-whitespace"
         ],
+        "prefer-const": false,
+        "prefer-for-of": false,
         "quotemark": [
             false,
             "single"
@@ -37,11 +52,10 @@
             true,
             "always"
         ],
+        "space-before-function-paren": false,
+        "switch-default": false,
         "trailing-comma": [false],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
+        "triple-equals": false,
         "typedef-whitespace": [
             true,
             {
@@ -56,7 +70,6 @@
             true,
             "ban-keywords"
         ],
-        "max-line-length": [false],
         "whitespace": [false]
     }
 }

From 62eb03345dd246038641340e30a97cf39a722f1d Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 1 Mar 2017 15:21:19 -0500
Subject: [PATCH 059/133] Finishing touches on mutsig/gistic popups

---
 .../components/StudyList/styles.module.scss   |   2 +-
 .../components/asyncStatus/AsyncStatus.tsx    |   2 +-
 .../labeledCheckbox/styles.module.scss        |   2 +-
 .../components/query/GisticGeneSelector.tsx   | 124 ++++++++++--------
 .../components/query/MutSigGeneSelector.tsx   |   8 +-
 .../components/query/styles.module.scss       |  34 +++++
 src/shared/lib/FormatUtils.ts                 |  15 +++
 src/shared/lib/GisticUtils.ts                 |  41 ++++++
 8 files changed, 165 insertions(+), 63 deletions(-)
 create mode 100644 src/shared/lib/FormatUtils.ts
 create mode 100644 src/shared/lib/GisticUtils.ts

diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index b9ad500d725..314f76d3766 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -189,7 +189,7 @@ li.Study {
   }
 
   input[type="checkbox"] {
-    margin: 3px 6px 0 0;
+    margin: 4px 6px 0 0;
   }
 
   .StudyName {
diff --git a/src/shared/components/asyncStatus/AsyncStatus.tsx b/src/shared/components/asyncStatus/AsyncStatus.tsx
index 1e9fed63110..d6851476452 100644
--- a/src/shared/components/asyncStatus/AsyncStatus.tsx
+++ b/src/shared/components/asyncStatus/AsyncStatus.tsx
@@ -37,7 +37,7 @@ export default class AsyncStatus extends React.Component<IAsyncStatusProps, {}>
 				return (
 					<div className={classNames(className, styles.error)} {...divProps}>
 						<FontAwesome className={styles.icon} name='exclamation-triangle'/>
-						<span className={styles.message}>{promise.error.message}</span>
+						<span className={styles.message}>{promise.error.toString()}</span>
 					</div>
 				);
 			case 'complete':
diff --git a/src/shared/components/labeledCheckbox/styles.module.scss b/src/shared/components/labeledCheckbox/styles.module.scss
index 917d0343f44..14ef4071e6f 100644
--- a/src/shared/components/labeledCheckbox/styles.module.scss
+++ b/src/shared/components/labeledCheckbox/styles.module.scss
@@ -9,7 +9,7 @@ label.labeledCheckbox {
 
   > input[type="checkbox"] {
     cursor: pointer;
-    margin: 3px 6px 0 0;
+    margin: 4px 6px 0 0;
     min-width: 1em;
   }
 }
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index 3eca69da4ad..9c45a4d1d26 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -1,10 +1,5 @@
-import * as _ from 'lodash';
 import * as React from 'react';
-import {GeneticProfile} from "../../api/CBioPortalAPI";
-import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
-import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
-import queryStore from "./QueryStore";
 import {ObservableMap, expr, toJS, computed, observable} from "mobx";
 import {observer} from "mobx-react";
 import {Gistic} from "../../api/CBioPortalAPIInternal";
@@ -15,9 +10,12 @@ import {IColumnFormatterData} from "../enhancedReactTable/IColumnFormatter";
 import {Td} from "reactable";
 import classNames from "../../lib/classNames";
 import {IColumnDefMap} from "../enhancedReactTable/IEnhancedReactTableProps";
+import {toPrecision} from "../../lib/FormatUtils";
+import {getGeneSymbols, sortByCytoband} from "../../lib/GisticUtils";
 
 const styles = styles_any as {
 	GisticGeneSelector: string,
+	gisticTable: string,
 	GisticGeneToggles: string,
 	GeneToggle: string,
 	selected: string,
@@ -27,30 +25,28 @@ const styles = styles_any as {
 	showMoreLess: string,
 	moreGenes: string,
 	selectButton: string,
+	header: string,
+	amp: string,
+	del: string,
 };
 
 const DEFAULT_NUM_GENES_SHOWN = 5;
 
-class GisticTable extends EnhancedReactTable<Gistic> {}
+class GisticTable extends EnhancedReactTable<Gistic>
+{
+}
 
 export interface GisticGeneSelectorProps
 {
 	initialSelection: string[];
 	data: Gistic[];
-	onSelect: (map_geneSymbol_selected:ObservableMap<boolean>) => void;
-}
-
-function getGeneSymbols(gistic?:Gistic)
-{
-	if (gistic)
-		return gistic.genes.map(gene => gene.hugoGeneSymbol);
-	return [];
+	onSelect: (map_geneSymbol_selected: ObservableMap<boolean>) => void;
 }
 
 @observer
 export default class GisticGeneSelector extends React.Component<GisticGeneSelectorProps, {}>
 {
-	constructor(props:GisticGeneSelectorProps)
+	constructor(props: GisticGeneSelectorProps)
 	{
 		super(props);
 		this.map_geneSymbol_selected.replace(props.initialSelection.map(geneSymbol => [geneSymbol, true]));
@@ -60,80 +56,92 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 
 	render()
 	{
-		let columns:IColumnDefMap = {
+		let columns: IColumnDefMap = {
 			'amp': {
-				dataField: 'amp',
-				name: "Amp Del",
 				priority: 1,
+				columnDataFunction: ({rowData: gistic}: IColumnFormatterData<Gistic>) => gistic && (gistic.amp ? 'Amp' : 'Del'),
+				name: "Amp Del",
 				sortable: true,
-				filterable: true
+				filterable: true,
+				header: (
+					<div className={classNames(styles.header, styles.amp, styles.del)}>
+						<span className={styles.amp}>Amp</span>
+						<span className={styles.del}>Del</span>
+					</div>
+				),
+				formatter: ({name, rowData: gistic, columnData: value}: IColumnFormatterData<Gistic>) => (
+					<Td key={name} column={name} value={value}>
+						{!!(gistic) && (
+							<div className={gistic.amp ? styles.amp : styles.del}/>
+						)}
+					</Td>
+				)
 			},
 			'chromosome': {
+				priority: 2,
 				dataField: 'chromosome',
 				name: "Chr",
-				priority: 2,
 				sortable: true,
 				filterable: true
 			},
 			'cytoband': {
+				priority: 3,
 				dataField: 'cytoband',
 				name: "Cytoband",
-				priority: 3,
-				sortable: true,
-				filterable: true
+				sortable: sortByCytoband,
+				filterable: true,
 			},
 			'#': {
-				name: "#",
 				priority: 4,
-				downloader: (data:IColumnFormatterData<Gistic>) => data.rowData ? data.rowData.genes.length + '' : '0',
+				columnDataFunction: ({rowData: gistic}: IColumnFormatterData<Gistic>) => getGeneSymbols(gistic).length,
+				name: "#",
 				sortable: true,
-				filterable: true
+				filterable: true,
 			},
 			'genes': {
-				name: "Genes",
 				priority: 5,
-				downloader: (data:IColumnFormatterData<Gistic>) => getGeneSymbols(data.rowData).join(' '),
-				formatter: (data:IColumnFormatterData<Gistic>) => (
-					<Td key={data.name} column={data.name}>
+				// this columnDataFunction allows quick searching by gene symbol
+				columnDataFunction: ({rowData: gistic}: IColumnFormatterData<Gistic>) => getGeneSymbols(gistic).join(' '),
+				name: "Genes",
+				sortable: (genes1:string, genes2:string) => {
+					// sort by length, then alphabetically
+					return genes1.length - genes2.length
+						|| +(genes1 > genes2) - +(genes1 < genes2);
+				},
+				filterable: true,
+				formatter: ({name, rowData: gistic, columnData: value}: IColumnFormatterData<Gistic>) => (
+					<Td key={name} column={name} value={value}>
 						<GisticGeneToggles
-							gistic={data.rowData}
+							gistic={gistic}
 							map_geneSymbol_selected={this.map_geneSymbol_selected}
 						/>
 					</Td>
 				),
-				sortable: true,
-				filterable: true
 			},
 			'qValue': {
+				priority: 6,
 				dataField: 'qValue',
 				name: "Q Value",
-				priority: 6,
 				sortable: true,
-				filterable: true
+				filterable: true,
+				formatter: ({name, rowData: gistic, columnData: value}: IColumnFormatterData<Gistic>) => (
+					<Td key={name} column={name} value={value}>
+						{toPrecision(value, 2, 0.1)}
+					</Td>
+				),
 			},
 		};
 
-		let reactTableProps:TableProps = {
+		let reactTableProps: TableProps = {
 			className: "table table-striped table-border-top",
-			hideFilterInput:true
+			hideFilterInput: true,
+			defaultSort: 'qValue',
 		};
 
-		let headerControlsProps:ITableHeaderControlsProps = {
-		    // tableData?: Array<any>;
-		    // className?: string;
-		    // searchClassName?: string;
-		    // showSearch?: boolean;
+		let headerControlsProps: ITableHeaderControlsProps = {
 			showCopyAndDownload: false,
-		    // copyDownloadClassName?: string;
-		    showHideShowColumnButton: false,
-		    showPagination: true
-		    // handleInput?: Function;
-		    // downloadDataGenerator?: Function;
-		    // downloadDataContainsHeader?: boolean;
-		    // downloadFilename?: string;
-		    // paginationProps?: ITablePaginationControlsProps;
-		    // columnVisibilityProps?: IColumnVisibilityControlsProps;
-		    // searchDelayMs?:number;
+			showHideShowColumnButton: false,
+			showPagination: true
 		};
 
 		return (
@@ -146,6 +154,7 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 					{' it.'}
 				</span>
 				<GisticTable
+					className={styles.gisticTable}
 					itemsName="genes"
 					reactTableProps={reactTableProps}
 					initItemsPerPage={10}
@@ -153,7 +162,10 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 					columns={columns}
 					rawData={this.props.data}
 				/>
-				<button className={styles.selectButton} onClick={() => this.props.onSelect(this.map_geneSymbol_selected)}>
+				<button
+					className={styles.selectButton}
+					onClick={() => this.props.onSelect(this.map_geneSymbol_selected)}
+				>
 					Select
 				</button>
 			</div>
@@ -162,11 +174,11 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 }
 
 @observer
-class GisticGeneToggles extends React.Component<{gistic?:Gistic, map_geneSymbol_selected:ObservableMap<boolean>}, {}>
+class GisticGeneToggles extends React.Component<{gistic?: Gistic, map_geneSymbol_selected: ObservableMap<boolean>}, {}>
 {
 	@observable showAll = false;
 
-	renderGeneToggles(genes:string[])
+	renderGeneToggles(genes: string[])
 	{
 		return genes.map(gene => (
 			<GeneToggle
@@ -201,7 +213,7 @@ class GisticGeneToggles extends React.Component<{gistic?:Gistic, map_geneSymbol_
 }
 
 @observer
-class GeneToggle extends React.Component<{map_geneSymbol_selected:ObservableMap<boolean>, geneSymbol:string}, {}>
+class GeneToggle extends React.Component<{map_geneSymbol_selected: ObservableMap<boolean>, geneSymbol: string}, {}>
 {
 	render()
 	{
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index 6df7b2b44f7..d87f6676d4f 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -93,11 +93,11 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 						/>
 					</div>
 				),
-				formatter: (data:IColumnFormatterData<MutSig>) => (
-					<Td key={data.name} column={data.name}>
-						{!!(data.rowData) && (
+				formatter: ({name, rowData: mutSig}:IColumnFormatterData<MutSig>) => (
+					<Td key={name} column={name}>
+						{!!(mutSig) && (
 							<div className={styles.selectionColumnCell}>
-								<ObservableMapCheckbox map={this.map_geneSymbol_selected} mapKey={data.rowData.hugoGeneSymbol}/>
+								<ObservableMapCheckbox map={this.map_geneSymbol_selected} mapKey={mutSig.hugoGeneSymbol}/>
 							</div>
 						)}
 					</Td>
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index e76177debf2..ccd0de35b98 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -363,6 +363,40 @@ div.GisticGeneSelectorWindow {
     margin: 10px;
     flex: 1;
 
+    div.header.amp.del {
+      display: flex;
+      flex-direction: column;
+
+      span.amp {
+        color: red;
+      }
+      span.del {
+        color: blue;
+      }
+    }
+
+    div.gisticTable {
+      margin: 10px 0;
+      max-height: 525px;
+      overflow: auto;
+      :global(.table) {
+        margin: 0;
+        & > tbody > tr > td {
+          vertical-align: middle;
+          padding: 3px 10px;
+
+          .amp {
+            height: 1em;
+            background-color: red;
+          }
+          .del {
+            height: 1em;
+            background-color: blue;
+          }
+        }
+      }
+    }
+
     div.GisticGeneToggles {
       width: 400px;
     }
diff --git a/src/shared/lib/FormatUtils.ts b/src/shared/lib/FormatUtils.ts
new file mode 100644
index 00000000000..3efec997355
--- /dev/null
+++ b/src/shared/lib/FormatUtils.ts
@@ -0,0 +1,15 @@
+export function toPrecision(value:number, precision:number, threshold:number)
+{
+    // round to precision significant figures
+    // with threshold being the upper bound on the numbers that are
+    // rewritten in exponential notation
+
+    if (0.000001 <= value && value < threshold)
+        return value.toExponential(precision);
+
+    let ret = value.toPrecision(precision);
+    //if (ret.indexOf(".")!==-1)
+    //    ret = ret.replace(/\.?0+$/,'');
+
+    return ret;
+}
diff --git a/src/shared/lib/GisticUtils.ts b/src/shared/lib/GisticUtils.ts
new file mode 100644
index 00000000000..9a07408d81f
--- /dev/null
+++ b/src/shared/lib/GisticUtils.ts
@@ -0,0 +1,41 @@
+import {Gistic} from "../api/CBioPortalAPIInternal";
+
+export function getGeneSymbols(gistic?: Gistic)
+{
+	if (gistic)
+		return gistic.genes.map(gene => gene.hugoGeneSymbol);
+	return [];
+}
+
+// Regular expression for parsing a cytoband string, eg. 17p12.1
+const cytobandRegExp = new RegExp(
+	"^" +
+	"([0-9]{1,2})" + // match the chr
+	"([pq])" +       // match the arm
+	"([0-9]{1,2})" + // match the first coordinate
+	"(?:\.?)" +      // noncapturing, optional, match the decimal point
+	"([0-9]{0,2})" + // optional, match the 2nd coordinate
+	"$"
+);
+
+export function sortByCytoband(cyto1: string, cyto2: string)
+{
+	let x = cyto1.match(cytobandRegExp);
+	let y = cyto2.match(cytobandRegExp);
+
+	if (!x || !y)
+		return +!!x - +!!y;
+
+	// sorts two cytobands,
+	// where a cytoband in an array of strings, e.g. [12, p, 11, 5] ~ 12p11.5
+	if (parseInt(x[1], 10) - parseInt(y[1], 10) !== 0)
+		return parseInt(x[1], 10) - parseInt(y[1], 10);
+	else if (x[2] === 'p' && y[2] === 'q')
+		return -1;
+	else if (x[2] === 'q' && y[2] === 'p')
+		return 1;
+	else if (x[2] === y[2])
+		return parseInt(x[3], 10) - parseInt(y[3], 10);
+
+	return 0;
+}

From 99374b61d2c09757e9da0ad227027c99b859971b Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 1 Mar 2017 16:15:06 -0500
Subject: [PATCH 060/133] Fix react-fontawesome issue

---
 package.json                                  |  4 ++--
 src/shared/components/tree/DescriptorTree.tsx | 10 ++++++----
 src/shared/components/tree/styles.module.scss |  5 +++++
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 68dab192b39..0873c55c78d 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "@types/react-bootstrap-table": "^2.6.1",
     "@types/react-dom": "^0.14.21",
     "@types/react-redux": "^4.4.36",
-    "@types/react-fontawesome": "^1.1.1",
+    "@types/react-fontawesome": "^1.5.0",
     "@types/react-router": "^2.0.46",
     "@types/react-spinkit": "^1.1.29",
     "@types/reselect": "^2.0.27",
@@ -115,7 +115,7 @@
     "react-collapse": "^2.3.3",
     "react-dom": "^15.4.2",
     "react-file-download": "^0.3.2",
-    "react-fontawesome": "^1.4.0",
+    "react-fontawesome": "^1.5.0",
     "react-height": "^2.2.0",
     "react-if": "^2.1.0",
     "react-motion": "^0.4.7",
diff --git a/src/shared/components/tree/DescriptorTree.tsx b/src/shared/components/tree/DescriptorTree.tsx
index db03c8f080d..fbcebcd2666 100644
--- a/src/shared/components/tree/DescriptorTree.tsx
+++ b/src/shared/components/tree/DescriptorTree.tsx
@@ -8,6 +8,7 @@ const styles = styles_any as {
 	treeNodeItem: string,
 	row: string,
 	arrow: string,
+	hidden: string,
 	noIndent: string,
 };
 
@@ -158,13 +159,14 @@ export default class DescriptorTree<TreeNode> extends React.Component<IDescripto
 		// to keep indentation consistent, we always render an icon for the arrow and style controls visibility
 		let expand = this.expand;
 		let showArrow = !!children && children.length > 0;
-		let arrowStyle = showArrow ? undefined : {visibility: 'hidden'};
+		let htmlProps:Pick<React.HTMLProps<HTMLSpanElement>, 'onMouseDown'> = {
+			onMouseDown: this.onExpand,
+		};
 		let arrow = (
 			<FontAwesome
-				className={styles.arrow}
+				className={classNames(styles.arrow, !showArrow && styles.hidden)}
 				name={expand ? 'caret-down' : 'caret-right'}
-				style={arrowStyle}
-				{...{onMouseDown: this.onExpand}}
+				{...htmlProps}
 			/>
 		);
 
diff --git a/src/shared/components/tree/styles.module.scss b/src/shared/components/tree/styles.module.scss
index 9dbde0c022d..439cd6da3fc 100644
--- a/src/shared/components/tree/styles.module.scss
+++ b/src/shared/components/tree/styles.module.scss
@@ -11,8 +11,13 @@
   text-align: center;
   width: 1em;
   height: 1em;
+
+  &.hidden {
+    visibility: hidden;
+  }
 }
 
+
 .row {
   display: flex;
   flex-direction: row;

From 852cb87070b6ed86984299c8a884fd58901e7299 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 1 Mar 2017 16:31:58 -0500
Subject: [PATCH 061/133] Fix initial sort in gistic popup

---
 src/pages/home/HomePage.tsx                        | 2 +-
 src/shared/components/query/GisticGeneSelector.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 690b32a6169..d70bf579f2d 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -54,7 +54,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 	public render()
 	{
 		let selectorVersionToggle = (
-			<a style={{alignSelf: 'center'}} onClick={() => this.selectorVersion = this.selectorVersion == 'new' ? 'old' : 'new' }>
+			<a onClick={() => this.selectorVersion = this.selectorVersion == 'new' ? 'old' : 'new' }>
 				Switch to {this.selectorVersion == 'new' ? 'old' : 'new'} view
 			</a>
 		);
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index 9c45a4d1d26..6def8350be4 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -135,13 +135,13 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 		let reactTableProps: TableProps = {
 			className: "table table-striped table-border-top",
 			hideFilterInput: true,
-			defaultSort: 'qValue',
+			defaultSort: 'Q Value',
 		};
 
 		let headerControlsProps: ITableHeaderControlsProps = {
 			showCopyAndDownload: false,
 			showHideShowColumnButton: false,
-			showPagination: true
+			showPagination: true,
 		};
 
 		return (

From 62419a5b7d92526a40341798f407f8b5a14d97ee Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 2 Mar 2017 03:55:59 -0500
Subject: [PATCH 062/133] New locations of generated API files

---
 src/shared/components/StudyList/StudyList.tsx           | 2 +-
 src/shared/components/StudyList/StudyListLogic.ts       | 2 +-
 src/shared/components/query/CancerStudySelector.tsx     | 2 +-
 src/shared/components/query/CancerStudyTreeData.ts      | 2 +-
 src/shared/components/query/GeneticProfileSelector.tsx  | 2 +-
 src/shared/components/query/GisticGeneSelector.tsx      | 2 +-
 src/shared/components/query/MutSigGeneSelector.tsx      | 2 +-
 src/shared/components/query/QueryStore.ts               | 2 +-
 src/shared/components/query/old/CancerStudySelector.tsx | 2 +-
 src/shared/components/query/old/QueryConnector.ts       | 2 +-
 src/shared/lib/GisticUtils.ts                           | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index a7679b1f4cb..218c81dde5b 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {TypeOfCancer as CancerType, CancerStudy} from "../../api/CBioPortalAPI";
+import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioPortalAPI";
 import * as styles_any from './styles.module.scss';
 import classNames from "../../lib/classNames";
 import FontAwesome from "react-fontawesome";
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index f60d8f01dbe..19c75d1e342 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import {CancerTreeNode} from "../query/CancerStudyTreeData";
 import {NodeMetadata} from "../query/CancerStudyTreeData";
-import {TypeOfCancer as CancerType, CancerStudy} from "../../api/CBioPortalAPI";
+import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioPortalAPI";
 import memoize from "../../lib/memoize";
 import {QueryStore} from "../query/QueryStore";
 import {computed, action} from "mobx";
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 2be6dbf42ec..1ef4092a608 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -1,7 +1,7 @@
 import * as _ from "lodash";
 import * as React from "react";
 import Dictionary = _.Dictionary;
-import {TypeOfCancer as CancerType, CancerStudy} from "../../api/CBioPortalAPI";
+import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioPortalAPI";
 import "react-bootstrap-table/css/react-bootstrap-table.css";
 import {FlexCol, FlexRow} from "../flexbox/FlexBox";
 import * as styles_any from './styles.module.scss';
diff --git a/src/shared/components/query/CancerStudyTreeData.ts b/src/shared/components/query/CancerStudyTreeData.ts
index 21d97d2719a..a83fa0a9a68 100644
--- a/src/shared/components/query/CancerStudyTreeData.ts
+++ b/src/shared/components/query/CancerStudyTreeData.ts
@@ -1,4 +1,4 @@
-import {CancerStudy, TypeOfCancer as CancerType} from "../../api/CBioPortalAPI";
+import {CancerStudy, TypeOfCancer as CancerType} from "../../api/generated/CBioPortalAPI";
 import * as _ from 'lodash';
 import {PriorityStudies} from "./QueryStore";
 
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 3ed2b054e3f..74f0c7c42be 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {GeneticProfile} from "../../api/CBioPortalAPI";
+import {GeneticProfile} from "../../api/generated/CBioPortalAPI";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index 6def8350be4..fb34d01238f 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as styles_any from './styles.module.scss';
 import {ObservableMap, expr, toJS, computed, observable} from "mobx";
 import {observer} from "mobx-react";
-import {Gistic} from "../../api/CBioPortalAPIInternal";
+import {Gistic} from "../../api/generated/CBioPortalAPIInternal";
 import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
 import {ITableHeaderControlsProps} from "../tableHeaderControls/TableHeaderControls";
 import {TableProps} from "reactable";
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index d87f6676d4f..e96c1d14012 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -5,7 +5,7 @@ import * as styles_any from './styles.module.scss';
 import {action, ObservableMap, expr, toJS, computed, observable} from "mobx";
 import {observer} from "mobx-react";
 import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
-import {MutSig} from "../../api/CBioPortalAPIInternal";
+import {MutSig} from "../../api/generated/CBioPortalAPIInternal";
 import {IColumnFormatterData} from "../enhancedReactTable/IColumnFormatter";
 import {IColumnDefMap, IEnhancedReactTableProps} from "../enhancedReactTable/IEnhancedReactTableProps";
 import {ITableHeaderControlsProps} from "../tableHeaderControls/TableHeaderControls";
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 59a7b0378b4..5c4ddfa95e3 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import client from "../../api/cbioportalClientInstance";
 import {ObservableMap, toJS, observable, reaction, action, computed, whyRun, expr} from "mobx";
-import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gene} from "../../api/CBioPortalAPI";
+import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gene} from "../../api/generated/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
diff --git a/src/shared/components/query/old/CancerStudySelector.tsx b/src/shared/components/query/old/CancerStudySelector.tsx
index 244d86a434e..4058f21b803 100644
--- a/src/shared/components/query/old/CancerStudySelector.tsx
+++ b/src/shared/components/query/old/CancerStudySelector.tsx
@@ -1,7 +1,7 @@
 import * as _ from "lodash";
 import * as React from "react";
 import Dictionary = _.Dictionary;
-import {TypeOfCancer as CancerType, CancerStudy} from "../../../api/CBioPortalAPI";
+import {TypeOfCancer as CancerType, CancerStudy} from "../../../api/generated/CBioPortalAPI";
 import {ITreeDescriptor, default as DescriptorTree} from "../../tree/DescriptorTree";
 import {BootstrapTable} from "react-bootstrap-table";
 import {TableHeaderColumn} from "react-bootstrap-table";
diff --git a/src/shared/components/query/old/QueryConnector.ts b/src/shared/components/query/old/QueryConnector.ts
index b1e5bc05af5..20a6b4fe65a 100644
--- a/src/shared/components/query/old/QueryConnector.ts
+++ b/src/shared/components/query/old/QueryConnector.ts
@@ -1,4 +1,4 @@
-import {TypeOfCancer, CancerStudy, default as CBioPortalAPI} from "../../../api/CBioPortalAPI";
+import {TypeOfCancer, CancerStudy, default as CBioPortalAPI} from "../../../api/generated/CBioPortalAPI";
 import {Connector, IDispatch} from "../../../lib/ConnectorAPI";
 import {RootState} from "../../../../redux/rootReducer";
 import {IQueryContainerProps} from "./QueryContainer";
diff --git a/src/shared/lib/GisticUtils.ts b/src/shared/lib/GisticUtils.ts
index 9a07408d81f..656da7fe1b9 100644
--- a/src/shared/lib/GisticUtils.ts
+++ b/src/shared/lib/GisticUtils.ts
@@ -1,4 +1,4 @@
-import {Gistic} from "../api/CBioPortalAPIInternal";
+import {Gistic} from "../api/generated/CBioPortalAPIInternal";
 
 export function getGeneSymbols(gistic?: Gistic)
 {

From 61ecc062f95c6a0abe1dabb471db66dc3dde4689 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 2 Mar 2017 14:01:42 -0500
Subject: [PATCH 063/133] using mobxpromise npm module

---
 src/shared/components/asyncStatus/AsyncStatus.tsx | 2 +-
 src/shared/components/query/QueryStore.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/asyncStatus/AsyncStatus.tsx b/src/shared/components/asyncStatus/AsyncStatus.tsx
index d6851476452..e5b066df78d 100644
--- a/src/shared/components/asyncStatus/AsyncStatus.tsx
+++ b/src/shared/components/asyncStatus/AsyncStatus.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Spinner from 'react-spinkit';
-import {MobxPromiseUnionType, MobxPromiseUnionTypeWithDefault} from "../../api/MobxPromise";
+import {MobxPromiseUnionType, MobxPromiseUnionTypeWithDefault} from "mobxpromise";
 import {observer} from "mobx-react";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 5c4ddfa95e3..510e2dbb252 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -5,7 +5,7 @@ import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gen
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
-import {labelMobxPromises} from "../../api/MobxPromise";
+import {labelMobxPromises} from "mobxpromise";
 import internalClient from "../../api/cbioportalInternalClientInstance";
 import oql_parser from "../../lib/oql/oql-parser";
 import {SyntaxError} from "../../lib/oql/oql-parser";

From 91d590504b777f8f8b32d456d1791eef4ce48cea Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 2 Mar 2017 16:14:00 -0500
Subject: [PATCH 064/133] use AppConfig

---
 .../components/query/CancerStudyTreeData.ts   |  2 +-
 src/shared/components/query/QueryStore.ts     | 22 +++----------------
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/src/shared/components/query/CancerStudyTreeData.ts b/src/shared/components/query/CancerStudyTreeData.ts
index a83fa0a9a68..68a91def7d0 100644
--- a/src/shared/components/query/CancerStudyTreeData.ts
+++ b/src/shared/components/query/CancerStudyTreeData.ts
@@ -1,6 +1,6 @@
 import {CancerStudy, TypeOfCancer as CancerType} from "../../api/generated/CBioPortalAPI";
 import * as _ from 'lodash';
-import {PriorityStudies} from "./QueryStore";
+import {PriorityStudies} from "config/IAppConfig";
 
 export const CANCER_TYPE_ROOT = 'tissue';
 
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 510e2dbb252..9056ce8808e 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -11,10 +11,7 @@ import oql_parser from "../../lib/oql/oql-parser";
 import {SyntaxError} from "../../lib/oql/oql-parser";
 import memoize from "../../lib/memoize";
 import debounceAsync from "../../lib/debounceAsync";
-
-export type PriorityStudies = {
-	[category:string]: string[]
-};
+import AppConfig from 'appConfig';
 
 export type GeneReplacement = {alias: string, genes: Gene[]};
 
@@ -168,21 +165,8 @@ export class QueryStore
 
 	@observable showMutSigPopup = false;
 	@observable showGisticPopup = false;
-	@observable.ref searchTextPresets:ReadonlyArray<string> = [
-		'tcga',
-		'tcga -provisional',
-		'tcga -moratorium',
-		'tcga OR icgc',
-		'-"cell line"',
-		'prostate mskcc',
-		'esophageal OR stomach',
-		'serous',
-		'breast',
-	];
-	@observable priorityStudies:PriorityStudies = {
-		'Shared institutional Data Sets': ['mskimpact', 'cellline_mskcc'],
-		'Priority Studies': ['blca_tcga_pub', 'coadread_tcga_pub', 'brca_tcga_pub2015'], // for demo
-	};
+	@observable.ref searchTextPresets:ReadonlyArray<string> = AppConfig.cancerStudySearchPresets;
+	@observable priorityStudies = AppConfig.priorityStudies;
 	@observable showSelectedStudiesOnly:boolean = false;
 	@observable.shallow selectedCancerTypeIds:string[] = [];
 	@observable maxTreeDepth:number = 3;

From fcafd819c2019f82443b0d1d423cd7f5a73ea94d Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 2 Mar 2017 18:00:34 -0500
Subject: [PATCH 065/133] Revert "using mobxpromise npm module"

This reverts commit 485f68fa275aa51fa54e75e56b2b60caf53a57da.
---
 src/shared/components/asyncStatus/AsyncStatus.tsx | 2 +-
 src/shared/components/query/QueryStore.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/asyncStatus/AsyncStatus.tsx b/src/shared/components/asyncStatus/AsyncStatus.tsx
index e5b066df78d..d6851476452 100644
--- a/src/shared/components/asyncStatus/AsyncStatus.tsx
+++ b/src/shared/components/asyncStatus/AsyncStatus.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Spinner from 'react-spinkit';
-import {MobxPromiseUnionType, MobxPromiseUnionTypeWithDefault} from "mobxpromise";
+import {MobxPromiseUnionType, MobxPromiseUnionTypeWithDefault} from "../../api/MobxPromise";
 import {observer} from "mobx-react";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 9056ce8808e..28811c877e4 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -5,7 +5,7 @@ import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gen
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
-import {labelMobxPromises} from "mobxpromise";
+import {labelMobxPromises} from "../../api/MobxPromise";
 import internalClient from "../../api/cbioportalInternalClientInstance";
 import oql_parser from "../../lib/oql/oql-parser";
 import {SyntaxError} from "../../lib/oql/oql-parser";

From 658ceabd611b845ea3aaa8981298711d38981ae9 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Mar 2017 04:44:36 -0500
Subject: [PATCH 066/133] draggable popups

---
 package.json                                  |  1 +
 .../components/popupWindow/PopupWindow.tsx    | 25 +++++++++++--------
 .../components/popupWindow/styles.module.scss |  3 ++-
 .../components/query/styles.module.scss       |  7 +++++-
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 0873c55c78d..2925b174816 100644
--- a/package.json
+++ b/package.json
@@ -114,6 +114,7 @@
     "react-clipboard.js": "^1.0.1",
     "react-collapse": "^2.3.3",
     "react-dom": "^15.4.2",
+    "react-draggable": "^2.2.3",
     "react-file-download": "^0.3.2",
     "react-fontawesome": "^1.5.0",
     "react-height": "^2.2.0",
diff --git a/src/shared/components/popupWindow/PopupWindow.tsx b/src/shared/components/popupWindow/PopupWindow.tsx
index b5cbe247828..40e42e21625 100644
--- a/src/shared/components/popupWindow/PopupWindow.tsx
+++ b/src/shared/components/popupWindow/PopupWindow.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as styles_any from './styles.module.scss';
 import classNames from "../../lib/classNames";
 import FontAwesome from "react-fontawesome";
+import ReactDraggable from 'react-draggable';
 
 const styles = styles_any as {
 	PopupWindow: string,
@@ -34,19 +35,21 @@ export default class PopupWindow extends React.Component<IPopupWindowProps, IPop
 		let {className, windowTitle, onClickClose, ...props} = this.props;
 
 		return (
-			<div {...props} className={classNames(className, styles.PopupWindow)}>
-				<div className={styles.titleBar}>
-					<span className={styles.windowTitle}>
-						{windowTitle}
-					</span>
-					<div className={styles.closeButton} onClick={onClickClose}>
-						<FontAwesome className={styles.icon} name="times"/>
+			<ReactDraggable bounds="body" handle={'.' + styles.titleBar} cancel={'.' + styles.closeButton}>
+				<div {...props} className={classNames(className, styles.PopupWindow)}>
+					<div className={styles.titleBar}>
+						<span className={styles.windowTitle}>
+							{windowTitle}
+						</span>
+						<div className={styles.closeButton} onClick={onClickClose}>
+							<FontAwesome className={styles.icon} name="times"/>
+						</div>
+					</div>
+					<div className={styles.content}>
+						{this.props.children}
 					</div>
 				</div>
-				<div className={styles.content}>
-					{this.props.children}
-				</div>
-			</div>
+			</ReactDraggable>
 		);
 	}
 }
diff --git a/src/shared/components/popupWindow/styles.module.scss b/src/shared/components/popupWindow/styles.module.scss
index 99bb7335386..33cabdf5bf9 100644
--- a/src/shared/components/popupWindow/styles.module.scss
+++ b/src/shared/components/popupWindow/styles.module.scss
@@ -8,6 +8,7 @@ div.PopupWindow {
   flex-direction: column;
 }
 div.titleBar {
+  cursor: move;
   padding: 4px;
   display: flex;
   align-items: center;
@@ -41,4 +42,4 @@ div.content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-}
\ No newline at end of file
+}
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index ccd0de35b98..5b08044ae5a 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -364,6 +364,7 @@ div.GisticGeneSelectorWindow {
     flex: 1;
 
     div.header.amp.del {
+      float: left;
       display: flex;
       flex-direction: column;
 
@@ -377,13 +378,17 @@ div.GisticGeneSelectorWindow {
 
     div.gisticTable {
       margin: 10px 0;
-      max-height: 525px;
+      max-height: 400px;
       overflow: auto;
       :global(.table) {
         margin: 0;
+        & > thead > tr > th {
+          font-size: 13px;
+        }
         & > tbody > tr > td {
           vertical-align: middle;
           padding: 3px 10px;
+          font-size: 12px;
 
           .amp {
             height: 1em;

From 7fb57cdccafe4b4ccfd53d1866bf4192959ad56a Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Mar 2017 11:44:30 -0500
Subject: [PATCH 067/133] Remove old code

---
 src/pages/home/HomePage.tsx                   |  60 +-
 src/pages/pageHeader/PageHeader.tsx           |   6 +-
 src/pages/pageHeader/styles.scss              |   4 +
 .../components/ExperimentalControls.tsx       | 134 ----
 .../labeledCheckbox/LabeledCheckbox.tsx       |   3 +
 .../query/old/CancerStudySelector.tsx         | 600 ------------------
 .../components/query/old/QueryConnector.ts    |  89 ---
 .../components/query/old/QueryContainer.tsx   | 120 ----
 .../components/query/old/styles.module.scss   | 121 ----
 src/shared/components/tree/DescriptorTree.tsx | 205 ------
 src/shared/components/tree/styles.module.scss |  29 -
 11 files changed, 30 insertions(+), 1341 deletions(-)
 delete mode 100644 src/shared/components/ExperimentalControls.tsx
 delete mode 100644 src/shared/components/query/old/CancerStudySelector.tsx
 delete mode 100644 src/shared/components/query/old/QueryConnector.ts
 delete mode 100644 src/shared/components/query/old/QueryContainer.tsx
 delete mode 100644 src/shared/components/query/old/styles.module.scss
 delete mode 100644 src/shared/components/tree/DescriptorTree.tsx
 delete mode 100644 src/shared/components/tree/styles.module.scss

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index d70bf579f2d..acf7f96aa57 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import exposeComponentRenderer from 'shared/lib/exposeComponentRenderer';
-import QueryContainerOld from "../../shared/components/query/old/QueryContainer";
 import QueryContainer from "../../shared/components/query/QueryContainer";
 import * as styles_any from './styles.module.scss';
 import {FlexCol, FlexRow} from "../../shared/components/flexbox/FlexBox";
@@ -9,7 +8,8 @@ import {observer} from "mobx-react";
 import DevTools from "mobx-react-devtools";
 import {toJS, observable, action, computed, whyRun, expr} from "mobx";
 import queryStore from "../../shared/components/query/QueryStore";
-import {Select, StateToggle} from "../../shared/components/ExperimentalControls";
+import LabeledCheckbox from "../../shared/components/labeledCheckbox/LabeledCheckbox";
+import ReactSelect from 'react-select';
 
 function getRootElement()
 {
@@ -41,32 +41,18 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 
 	get store() { return queryStore; }
 
-	public componentDidMount() {
+	public componentDidMount()
+	{
 	  this.exposeComponentRenderersToParentScript();
 	}
 
-	exposeComponentRenderersToParentScript() {
+	exposeComponentRenderersToParentScript()
+	{
 		exposeComponentRenderer('renderQueryContainer', QueryContainer);
 	}
 
-	@observable selectorVersion:'new'|'old' = 'new';
-
 	public render()
 	{
-		let selectorVersionToggle = (
-			<a onClick={() => this.selectorVersion = this.selectorVersion == 'new' ? 'old' : 'new' }>
-				Switch to {this.selectorVersion == 'new' ? 'old' : 'new'} view
-			</a>
-		);
-
-		if (this.selectorVersion == 'old')
-			return (
-				<FlexCol className={styles.HomePage}>
-					<QueryContainerOld/>
-					{selectorVersionToggle}
-				</FlexCol>
-			);
-
 		return (
 			<FlexRow padded flex={1} className={styles.HomePage}>
 
@@ -75,25 +61,19 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 				{!!(devMode.enabled) && (
 					<FlexCol padded overflow>
 						{/* demo controls */}
-						<FlexCol padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
-							<StateToggle label='Click tree node again to deselect' target={this.store} name='clickAgainToDeselectSingle' defaultValue={this.store.clickAgainToDeselectSingle}/>
-							<Select
-								label="Tree depth: "
-								selected={this.store.maxTreeDepth}
-								options={[
-									{label: "0"},
-									{label: "1"},
-									{label: "2"},
-									{label: "3"},
-									{label: "4"},
-									{label: "5"},
-									{label: "6"},
-									{label: "7"},
-									{label: "8"},
-									{label: "9"},
-								]}
-								onChange={option => this.store.maxTreeDepth = parseInt(option.label, 10)}
-							/>
+						<FlexCol padded overflow style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
+							<LabeledCheckbox checked={this.store.clickAgainToDeselectSingle} onChange={event => this.store.clickAgainToDeselectSingle = event.target.checked}>
+								Click tree node again to deselect
+							</LabeledCheckbox>
+							<FlexRow padded overflow>
+								<span>Tree depth:</span>
+								<ReactSelect
+
+									value={this.store.maxTreeDepth}
+									options={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(n => ({value: n, label: n}))}
+									onChange={(option:{value:number}) => this.store.maxTreeDepth = option.value}
+								/>
+							</FlexRow>
 							<span>Note: Use cmd+click to select/deselect multiple cancer types.</span>
 						</FlexCol>
 
@@ -102,8 +82,6 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 							{JSON.stringify(this.store.stateToSerialize, null, 4)}
 						</pre>
 
-						{/*devMode.enabled && selectorVersionToggle*/}
-
 					</FlexCol>
 				)}
 
diff --git a/src/pages/pageHeader/PageHeader.tsx b/src/pages/pageHeader/PageHeader.tsx
index fedd70c2658..3aa6b0fbe8e 100644
--- a/src/pages/pageHeader/PageHeader.tsx
+++ b/src/pages/pageHeader/PageHeader.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import './styles.scss';
-import {StateToggle} from "../../shared/components/ExperimentalControls";
 import devMode from "../../shared/lib/devMode";
 import {observer} from "mobx-react";
+import LabeledCheckbox from "../../shared/components/labeledCheckbox/LabeledCheckbox";
 
 interface IPageHeaderProps {
     router: any;
@@ -29,7 +29,9 @@ export default class PageHeader extends React.Component<IPageHeaderProps, void>
                                 <input className="form-control" defaultValue={this.props.currentRoutePath} ref={(c) => { this.routeInput = c; }} />
                         </div>
                     </form>
-					<StateToggle label='Show work in progress' style={{color: 'white'}} target={devMode} name='enabled' defaultValue={devMode.enabled}/>
+                    <LabeledCheckbox checked={devMode.enabled} onChange={event => devMode.enabled = event.target.checked}>
+                        Show work in progress
+                    </LabeledCheckbox>
                 </div>
             </header>
         );
diff --git a/src/pages/pageHeader/styles.scss b/src/pages/pageHeader/styles.scss
index 3a3c4658e19..29d9a1da921 100644
--- a/src/pages/pageHeader/styles.scss
+++ b/src/pages/pageHeader/styles.scss
@@ -18,6 +18,10 @@
     }
     display:none;
 
+    label {
+      color: #fff;
+    }
+
   }
 
 }
diff --git a/src/shared/components/ExperimentalControls.tsx b/src/shared/components/ExperimentalControls.tsx
deleted file mode 100644
index 2fa51e8427c..00000000000
--- a/src/shared/components/ExperimentalControls.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-// components for controlling experimental options
-
-import * as React from 'react';
-import firstDefinedValue from "../lib/firstDefinedValue";
-import LabeledCheckbox from "./labeledCheckbox/LabeledCheckbox";
-
-export type ISelectOption<V> = {
-	label:string,
-	callback?:()=>void,
-	value?:V
-};
-
-export interface ISelectProps<V>
-{
-	label?: string;
-	selected: V;
-	options: ISelectOption<V>[];
-	onChange: (option:ISelectOption<V>)=>void;
-};
-
-
-export function EditableDropdown(props:ISelectProps<string>)
-{
-	let textInput:HTMLInputElement;
-
-	function onChange(event:React.FormEvent<HTMLInputElement>)
-	{
-		if (props.onChange)
-			props.onChange({label: textInput.value, value: textInput.value});
-	}
-
-	function onSelect(option:ISelectOption<string>)
-	{
-		textInput.value = option.value || option.label;
-		if (option.callback)
-			option.callback();
-		if (props.onChange)
-			props.onChange(option);
-	}
-
-	return (
-		<label>
-			{props.label}
-			<div className="input-group dropdown">
-				<input
-					type="text"
-					className="form-control dropdown-toggle"
-					value={props.selected}
-					ref={input => textInput = input}
-					onChange={onChange}
-				/>
-				<ul className="dropdown-menu">
-					{
-						props.options.map((option, i) => (
-							<a key={i} href="#" onClick={() => onSelect(option)}>{option.label}</a>
-						))
-					}
-				</ul>
-				<span role="button" className="input-group-addon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-					<span className="caret"/>
-				</span>
-			</div>
-		</label>
-	);
-}
-
-export function Select(props:ISelectProps<any>)
-{
-	function onChange(event:React.FormEvent<HTMLSelectElement>)
-	{
-		let option = props.options[parseInt((event.target as HTMLInputElement).value, 10)];
-		if (option.callback)
-			option.callback();
-		if (props.onChange)
-			props.onChange(option);
-	}
-
-	let defaultValue = "0";
-
-	let optionsJSX = props.options.map((option, i) => {
-		if (props.selected == (option.value !== undefined ? option.value : i))
-			defaultValue = i + '';
-		return (
-			<option key={i} value={i + ''}>
-				{option.label}
-			</option>
-		);
-	});
-
-	return (
-		<label>
-			{props.label}
-			<select onChange={onChange} defaultValue={defaultValue}>
-				{optionsJSX}
-			</select>
-		</label>
-	);
-}
-
-export interface IStateToggleProps<S>
-{
-	label?: string;
-	target: S | React.Component<any, S>;
-	name: keyof S;
-	defaultValue: boolean;
-	style?: React.CSSProperties;
-}
-
-export function TypedStateToggle<T>(props:IStateToggleProps<T>)
-{
-	let {label, target, name, defaultValue, style} = props;
-	let currentValue = target instanceof React.Component ? !!(target as React.Component<any, T>).state[name] : !!target[name];
-	return (
-		<LabeledCheckbox
-			checked={firstDefinedValue(currentValue, defaultValue)}
-			labelProps={{style}}
-			inputProps={{
-				onChange: event => {
-					if (target instanceof React.Component)
-						target.setState({[name]: (event.target as HTMLInputElement).checked} as any);
-					else
-						target[name] = (event.target as HTMLInputElement).checked as any;
-				}
-			}}
-		>
-			{label || name}
-		</LabeledCheckbox>
-	);
-}
-
-export function StateToggle(props:IStateToggleProps<any>)
-{
-	return TypedStateToggle(props);
-}
diff --git a/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx b/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
index 6d4cac62f83..1dfe8a2c50f 100644
--- a/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
+++ b/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as styles_any from './styles.module.scss';
 import classNames from "../../lib/classNames";
+import ChangeEventHandler = React.ChangeEventHandler;
 
 const styles = styles_any as {
 	labeledCheckbox: string;
@@ -10,6 +11,7 @@ export interface ILabeledCheckboxProps
 {
 	checked?: boolean;
 	indeterminate?: boolean;
+	onChange?: ChangeEventHandler<HTMLInputElement>;
 	labelProps?: React.HTMLProps<HTMLLabelElement>;
 	inputProps?: React.HTMLProps<HTMLInputElement>;
 }
@@ -45,6 +47,7 @@ export default class LabeledCheckbox extends React.Component<ILabeledCheckboxPro
 				<input
 					type="checkbox"
 					checked={this.props.checked}
+					onChange={this.props.onChange}
 					{...this.props.inputProps}
 					ref={this.handleInputRef}
 				/>
diff --git a/src/shared/components/query/old/CancerStudySelector.tsx b/src/shared/components/query/old/CancerStudySelector.tsx
deleted file mode 100644
index 4058f21b803..00000000000
--- a/src/shared/components/query/old/CancerStudySelector.tsx
+++ /dev/null
@@ -1,600 +0,0 @@
-import * as _ from "lodash";
-import * as React from "react";
-import Dictionary = _.Dictionary;
-import {TypeOfCancer as CancerType, CancerStudy} from "../../../api/generated/CBioPortalAPI";
-import {ITreeDescriptor, default as DescriptorTree} from "../../tree/DescriptorTree";
-import {BootstrapTable} from "react-bootstrap-table";
-import {TableHeaderColumn} from "react-bootstrap-table";
-import "react-bootstrap-table/css/react-bootstrap-table.css";
-import FontAwesome from "react-fontawesome";
-import {FlexCol, FlexRow} from "../../flexbox/FlexBox";
-import * as styles_any from './styles.module.scss';
-import memoize, {memoizeWith} from "../../../lib/memoize";
-import classNames from "../../../lib/classNames";
-import firstDefinedValue from "../../../lib/firstDefinedValue";
-import CancerStudyTreeData from "../CancerStudyTreeData";
-import {CancerTreeNode, NodeMetadata} from "../CancerStudyTreeData";
-import LabeledCheckbox from "../../labeledCheckbox/LabeledCheckbox";
-import ReactSelect from 'react-select';
-import 'react-select/dist/react-select.css';
-
-const CancerTree = DescriptorTree.of<CancerTreeNode>();
-
-const styles = styles_any as {
-	CancerStudySelector: string,
-	treeNodeContent: string,
-	selectable: string,
-	selected: string,
-	treeNodeLabel: string,
-	treeWithStudies: string,
-	cancerTypeTreeNode: string,
-	cancerStudyName: string,
-	cancerStudySamples: string,
-	matchingNodeText: string,
-	nonMatchingNodeText: string,
-	studyHeader: string,
-	selectCancerStudyHeader: string,
-	selectCancerStudyRow: string,
-	searchTextInput: string,
-	showHideTreeLink: string,
-};
-
-function matchesSearchText(input:string, searchText:string):boolean
-{
-	input = input.toLocaleLowerCase();
-	searchText = searchText.toLocaleLowerCase();
-
-	return searchText.split(' ').every(filter => {
-		let desired = true;
-		if (filter.startsWith('-'))
-		{
-			filter = filter.substr(1);
-			desired = false;
-		}
-
-		let found = input.indexOf(filter) >= 0;
-		return found == desired;
-	});
-}
-
-export type ICancerStudySelectorProps = {
-	style?: React.CSSProperties;
-
-	searchTextPresets: string[];
-	cancerTypes: CancerType[];
-	studies: CancerStudy[];
-
-	onStateChange?: (newState:ICancerStudySelectorState) => void;
-} & ICancerStudySelectorExperimentalOptions & ICancerStudySelectorState;
-
-export interface ICancerStudySelectorExperimentalOptions
-{
-	showAllStudiesByDefault?: boolean;
-	showRoot?: boolean;
-	maxTreeDepth?: number;
-	filterBySelection?: boolean;
-	showStudiesInTree?: boolean;
-	clickAgainToDeselectSingle?: boolean;
-}
-
-export interface ICancerStudySelectorState
-{
-	hideTree?: boolean;
-	searchText?: string;
-	selectedCancerTypeIds?: string[];
-	selectedStudyIds?: string[];
-}
-
-export default class CancerStudySelector extends React.Component<ICancerStudySelectorProps, ICancerStudySelectorState>
-{
-	static get defaultProps():Partial<ICancerStudySelectorProps>
-	{
-		return {
-			maxTreeDepth: 9,
-			showAllStudiesByDefault: true,
-			clickAgainToDeselectSingle: true,
-		};
-	}
-
-	tree:DescriptorTree<CancerTreeNode>;
-
-	constructor(props: ICancerStudySelectorProps)
-	{
-		super(props);
-		this.state = {};
-	}
-
-	get selectableTreeNodes()
-	{
-		return !this.props.filterBySelection && !this.props.showStudiesInTree;
-	}
-
-	get searchText()
-	{
-		return firstDefinedValue(this.props.searchText, this.state.searchText || '');
-	}
-
-	get maxTreeDepth()
-	{
-		if (firstDefinedValue(this.props.hideTree, this.state.hideTree))
-			return 0;
-		return this.props.maxTreeDepth as number; // defined in defaultProps
-	}
-
-	get selectedCancerTypeIds()
-	{
-		return firstDefinedValue(this.props.selectedCancerTypeIds, this.state.selectedCancerTypeIds || []);
-	}
-
-	get selectedStudyIds()
-	{
-		return firstDefinedValue(this.props.selectedStudyIds, this.state.selectedStudyIds || []);
-	}
-
-	updateState(newState:ICancerStudySelectorState)
-	{
-		this.setState(newState);
-		if (this.tree)
-			this.tree.forceUpdate();
-
-		if (this.props.onStateChange)
-		{
-			this.props.onStateChange({
-				selectedCancerTypeIds: this.selectedCancerTypeIds,
-				selectedStudyIds: this.selectedStudyIds,
-				...newState
-			});
-		}
-	}
-
-	// these parameters determine when to recompute the tree info
-	getMemoizeParams = ():any[] => [this.props.cancerTypes, this.props.studies];
-
-	@memoizeWith('getMemoizeParams')
-	getTreeInfo()
-	{
-		return new CancerStudyTreeData(this.props);
-	}
-
-	@memoizeWith('getMemoizeParams')
-	getTreeDescriptor():ITreeDescriptor<CancerType|CancerStudy> & {rootNode: CancerType, setExpanded: <T>(node:CancerTreeNode, value:boolean, event:React.MouseEvent<T>) => void, nodeFilter: (node:CancerTreeNode) => boolean}
-	{
-		let {
-			rootCancerType,
-			map_node_meta,
-		} = this.getTreeInfo();
-
-		let map_cancerType_expanded = new Map<CancerTreeNode, boolean>();
-		map_cancerType_expanded.set(rootCancerType, true);
-
-		// filters out empty CancerType subtrees
-		let shouldConsiderNode = (node:CancerTreeNode) =>
-		{
-			let meta = map_node_meta.get(node) as NodeMetadata;
-			if (meta.isCancerType)
-			{
-				// ignore cancer types excluded by depth
-				if (meta.ancestors.length > this.maxTreeDepth)
-					return false;
-				// ignore cancer types with no descendant studies
-				if (meta.descendantStudies.length == 0)
-					return false;
-			}
-			return true;
-		};
-
-		// returns true if the node or any related nodes match
-		let nodeFilter = memoize({
-			getAdditionalArgs: () => [this.maxTreeDepth, this.searchText],
-			fixedArgsLength: 1,
-			function: (node:CancerTreeNode):boolean =>
-			{
-				let meta = map_node_meta.get(node) as NodeMetadata;
-
-				if (!shouldConsiderNode(node))
-					return false;
-
-				// if no search text is entered, include all nodes
-				if (!this.searchText)
-					return true;
-
-				// check for matching text in this node and related nodes
-				for (let nodes of [[node], meta.descendantCancerTypes, meta.descendantStudies, meta.ancestors])
-					for (let other of nodes)
-						if (shouldConsiderNode(other) && matchesSearchText(other.name, this.searchText))
-							return true;
-
-				// no match
-				return false;
-			}
-		});
-
-		let hasChildren = (node:CancerTreeNode):boolean =>
-		{
-			let meta = map_node_meta.get(node) as NodeMetadata;
-			if (meta.isCancerType)
-			{
-				// ignore cancer types excluded by depth
-				if (meta.ancestors.length > this.maxTreeDepth)
-					return false;
-
-				return meta.descendantStudies.some(nodeFilter);
-			}
-
-			return false;
-		};
-
-		let isExpanded = (node:CancerTreeNode) =>
-		{
-			let meta = map_node_meta.get(node) as NodeMetadata;
-			if (!meta.isCancerType)
-				return false;
-
-			if (map_cancerType_expanded.get(node))
-				return true;
-
-			// if user wants to search, expand all ancestors of matching nodes
-			if (this.searchText)
-			{
-				if (meta.descendantCancerTypes.some(nodeFilter))
-					return true;
-
-				if (meta.descendantStudies.some(nodeFilter))
-					return true;
-
-				// in fact, we want everything shown to be expanded
-				return true;
-			}
-
-			return false;
-		};
-
-		function setExpanded<T>(node:CancerTreeNode, value:boolean, event:React.MouseEvent<T>):void
-		{
-			map_cancerType_expanded.set(node, value);
-			if (event.ctrlKey || event.metaKey)
-			{
-				let meta = map_node_meta.get(node) as NodeMetadata;
-				for (let child of meta.childCancerTypes)
-					setExpanded(child, value, event);
-			}
-		}
-
-		let getChildren = (node:CancerTreeNode):CancerTreeNode[]|undefined =>
-		{
-			if (!hasChildren(node))
-				return undefined;
-
-			let meta = map_node_meta.get(node) as NodeMetadata;
-			let children:CancerTreeNode[] = meta.childCancerTypes;
-			if (this.props.showStudiesInTree)
-			{
-				let childStudies = meta.ancestors.length == this.maxTreeDepth ? meta.descendantStudies : meta.childStudies;
-				children = children.concat(childStudies);
-			}
-			return children.filter(nodeFilter);
-		};
-
-		let getContent = (node:CancerTreeNode) =>
-		{
-			let meta = map_node_meta.get(node) as NodeMetadata;
-			if (meta.isCancerType)
-				return this.renderCancerTypeTreeNode(node as CancerType);
-			else
-				return this.renderCancerStudyTreeNode(node as CancerStudy);
-		};
-
-		return {
-			rootNode: rootCancerType,
-			isExpanded,
-			setExpanded,
-			getChildren,
-			getContent,
-			getListItemProps: this.getListItemProps,
-			nodeFilter,
-		};
-	}
-
-	@memoize
-	getTreeSelectHandler<T>(node:CancerTreeNode)
-	{
-		return (event:React.MouseEvent<T>) => {
-			// stop if we clicked on the checkbox
-			if (event.target instanceof HTMLInputElement)
-				return;
-
-			event.stopPropagation();
-
-			let clickedCancerTypeId = node.cancerTypeId;
-
-			let selectedCancerTypeIds = this.selectedCancerTypeIds;
-			if (event.ctrlKey)
-			{
-				if (_.includes(selectedCancerTypeIds, clickedCancerTypeId))
-					selectedCancerTypeIds = _.difference(selectedCancerTypeIds, [clickedCancerTypeId]);
-				else
-					selectedCancerTypeIds = _.union(selectedCancerTypeIds, [clickedCancerTypeId]);
-			}
-			else if (this.props.clickAgainToDeselectSingle && _.isEqual(selectedCancerTypeIds, [clickedCancerTypeId]))
-			{
-				selectedCancerTypeIds = [];
-			}
-			else
-			{
-				selectedCancerTypeIds = [clickedCancerTypeId];
-			}
-
-			this.updateState({selectedCancerTypeIds});
-		};
-	}
-
-	@memoize
-	getOnCheckHandler<T>(node:CancerTreeNode)
-	{
-		return (event:React.FormEvent<T>) => {
-			let clickedStudyIds:string[];
-			let treeInfo = this.getTreeInfo();
-			let meta = treeInfo.map_node_meta.get(node) as NodeMetadata;
-			if (meta.isCancerType)
-				clickedStudyIds = meta.descendantStudies.map(study => study.studyId);
-			else
-				clickedStudyIds = [(node as CancerStudy).studyId];
-			this.handleStudiesCheckbox(event, clickedStudyIds);
-		};
-	}
-
-	handleStudiesCheckbox<T>(event:React.FormEvent<T>, clickedStudyIds:string[])
-	{
-		let selectedStudyIds = this.selectedStudyIds;
-		if ((event.target as HTMLInputElement).checked)
-			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
-		else
-			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
-
-		this.updateState({selectedStudyIds});
-	}
-
-	getListItemProps = (node:CancerTreeNode):React.HTMLAttributes<HTMLLIElement> =>
-	{
-		let meta = this.getTreeInfo().map_node_meta.get(node) as NodeMetadata;
-		return {
-			className: classNames({
-				[styles.selectable]: this.selectableTreeNodes,
-				[styles.selected]: this.selectableTreeNodes && meta.isCancerType && _.includes(this.selectedCancerTypeIds, node.cancerTypeId),
-			})
-		};
-	}
-
-	getMatchingNodeClassNames(node:CancerTreeNode):string
-	{
-		let matchingNode = !!this.searchText && matchesSearchText(node.name, this.searchText);
-		return classNames({
-			[styles.matchingNodeText]: !!this.searchText && matchingNode,
-			[styles.nonMatchingNodeText]: !!this.searchText && !matchingNode,
-		});
-	}
-
-	renderCancerTypeTreeNode = (cancerType:CancerType) =>
-	{
-		let treeInfo = this.getTreeInfo();
-		let desc = this.getTreeDescriptor();
-		let meta = treeInfo.map_node_meta.get(cancerType) as NodeMetadata;
-		let selectedChildStudies = _.intersection(this.selectedStudyIds, meta.descendantStudies.map(study => study.studyId));
-		let checked = selectedChildStudies.length > 0;
-		let indeterminate = checked && selectedChildStudies.length != meta.descendantStudies.length;
-
-		let label = (
-			<span
-				className={classNames(styles.treeNodeLabel, this.getMatchingNodeClassNames(cancerType))}
-				onMouseDown={this.selectableTreeNodes ? this.getTreeSelectHandler(cancerType) : undefined}
-			>
-				{`${cancerType.name} (${meta.descendantStudies.filter(desc.nodeFilter).length})`}
-			</span>
-		);
-
-		return (
-			<FlexRow overflow className={classNames(styles.cancerTypeTreeNode, styles.treeNodeContent)}>
-				<LabeledCheckbox
-					checked={checked}
-					indeterminate={indeterminate}
-					inputProps={{
-						onChange: this.getOnCheckHandler(cancerType)
-					}}
-				>
-					{this.selectableTreeNodes ? null : label}
-				</LabeledCheckbox>
-
-				{this.selectableTreeNodes ? label : null}
-			</FlexRow>
-		);
-	}
-
-	getShownStudies():CancerStudy[]
-	{
-		let treeInfo = this.getTreeInfo();
-		let treeDesc = this.getTreeDescriptor();
-
-		let selectedCancerTypes = this.selectedCancerTypeIds.map(cancerTypeId => treeInfo.map_cancerTypeId_cancerType.get(cancerTypeId) as CancerType);
-
-		// show all descendant studies of selected cancer types
-		function getDescendantStudies(cancerType:CancerType)
-		{
-			let meta = treeInfo.map_node_meta.get(cancerType);
-			return meta ? meta.descendantStudies : [];
-		}
-		let studies:CancerStudy[] = _.union(...selectedCancerTypes.map(getDescendantStudies));
-
-		// if filtering by selection, expand studies list to include siblings
-		if (this.props.filterBySelection && this.maxTreeDepth)
-		{
-			function getSiblings(studyId:string)
-			{
-				let study = treeInfo.map_studyId_cancerStudy.get(studyId) as CancerStudy;
-				let meta = treeInfo.map_node_meta.get(study) as NodeMetadata;
-				return meta.siblings;
-			}
-			studies = _.union(...this.selectedStudyIds.map(getSiblings));
-		}
-
-		// handle case where there are no descendant studies
-		if ((studies.length == 0 && this.props.showAllStudiesByDefault) || !this.maxTreeDepth)
-		{
-			let rootMeta = treeInfo.map_node_meta.get(treeInfo.rootCancerType) as NodeMetadata;
-			studies = rootMeta.descendantStudies;
-		}
-
-		// filter and sort studies list
-		return CancerStudyTreeData.sortNodes(studies.filter(treeDesc.nodeFilter));
-	}
-
-	renderStudyHeaderCheckbox = (shownStudies:CancerStudy[]) =>
-	{
-		let treeInfo = this.getTreeInfo();
-		let selectedStudies = this.selectedStudyIds.map(studyId => treeInfo.map_studyId_cancerStudy.get(studyId) as CancerStudy);
-		let shownAndSelectedStudies = _.intersection(shownStudies, selectedStudies);
-		let checked = shownAndSelectedStudies.length > 0;
-		let indeterminate = checked && shownAndSelectedStudies.length != shownStudies.length;
-		return (
-			<LabeledCheckbox
-				checked={checked}
-				indeterminate={indeterminate}
-				labelProps={{
-					onClick: (event:React.MouseEvent<HTMLLabelElement>) => event.stopPropagation()
-				}}
-				inputProps={{
-					onChange: event => {
-						let shownStudyIds = shownStudies.map(study => study.studyId);
-						this.handleStudiesCheckbox(event, shownStudyIds);
-					}
-				}}
-			/>
-		);
-	}
-
-	renderCancerStudyTreeNode = (study:CancerStudy) =>
-	{
-		return (
-			<FlexRow overflow padded className={styles.treeNodeContent}>
-				{this.renderStudyName(study.name, study)}
-				<span className={styles.cancerStudySamples}>
-					{`${study.allSampleCount} samples`}
-				</span>
-				{this.renderStudyLinks(study)}
-			</FlexRow>
-		);
-	}
-
-	renderStudyName = (name:string, study:CancerStudy) =>
-	{
-		let checked = !!this.selectedStudyIds.find(id => id == study.studyId);
-		return (
-			<LabeledCheckbox
-				checked={checked}
-				labelProps={{
-					className: styles.cancerStudyName
-				}}
-				inputProps={{
-					onChange: this.getOnCheckHandler(study)
-				}}
-			>
-				<span className={this.getMatchingNodeClassNames(study)}>
-					{name}
-				</span>
-			</LabeledCheckbox>
-		);
-	}
-
-	renderStudyLinks = (study:CancerStudy) =>
-	{
-		let links = [];
-		if (study.studyId)
-			links.push({icon: 'cube', url: `/study?id=${study.studyId}#summary`});
-		if (study.pmid)
-			links.push({icon: 'book', url: `http://www.ncbi.nlm.nih.gov/pubmed/${study.pmid}`});
-		return links.map((link, i) => (
-			<a key={i} href={link.url}>
-				<FontAwesome name={link.icon}/>
-			</a>
-		));
-	}
-
-	renderStudyLinksTableCell = (id:string, study:CancerStudy) =>
-	{
-		return (
-			<FlexRow overflow padded>
-				{this.renderStudyLinks(study)}
-			</FlexRow>
-		);
-	}
-
-	render()
-	{
-		let treeDesc = this.getTreeDescriptor();
-		let shownStudies = this.getShownStudies();
-
-		let searchTextOptions = this.props.searchTextPresets;
-		if (this.searchText && searchTextOptions.indexOf(this.searchText) < 0)
-			searchTextOptions = [this.searchText].concat(searchTextOptions);
-
-		return (
-			<FlexCol className={styles.CancerStudySelector} padded flex={1} style={this.props.style}>
-				<FlexRow padded overflow className={styles.selectCancerStudyRow}>
-					<span className={styles.selectCancerStudyHeader}>Select Cancer Study:</span>
-					<ReactSelect
-						className={styles.searchTextInput}
-						value={this.searchText}
-						autofocus={true}
-						options={searchTextOptions.map(str => ({label: str, value: str}))}
-						promptTextCreator={(label:string) => `Search for "${label}"`}
-						placeholder='Search...'
-						noResultsText={false}
-						onCloseResetsInput={false}
-						onInputChange={(searchText:string) => this.setState({searchText})}
-						onChange={(option:{value:string}) => this.setState({searchText: option ? option.value || '' : ''})}
-					/>
-					<a className={styles.showHideTreeLink} onClick={() => this.setState({hideTree: !!this.maxTreeDepth})}>
-						{this.state.hideTree ? 'Show Tree' : 'Hide Tree'}
-					</a>
-					<div style={{flex: 1}}/>
-					Number of Studies Selected: {this.selectedStudyIds.length}
-				</FlexRow>
-				<FlexRow padded flex={1}>
-					{!!(this.maxTreeDepth > 0 || this.props.showStudiesInTree) && (
-						<FlexCol flex={1}>
-							<CancerTree
-								className={this.props.showStudiesInTree ? styles.treeWithStudies : undefined}
-								ref={this.handleTreeRef}
-								treeDescriptor={treeDesc}
-								node={treeDesc.rootNode}
-								onExpand={treeDesc.setExpanded}
-								showRoot={!!this.props.showRoot}
-							/>
-						</FlexCol>
-					)}
-					{!!(!this.props.showStudiesInTree) && (
-						<FlexCol flex={2}>
-							<BootstrapTable keyField="cancerStudyId" data={shownStudies}>
-								<TableHeaderColumn width="70%" dataField='name' dataSort dataFormat={this.renderStudyName}>
-									<div className={styles.studyHeader}>
-										{this.renderStudyHeaderCheckbox(shownStudies)}
-										{'Study'}
-									</div>
-								</TableHeaderColumn>
-
-								<TableHeaderColumn width="15%" dataField='allSampleCount' dataSort dataAlign="right">
-									{'Samples'}
-								</TableHeaderColumn>
-
-								<TableHeaderColumn width="15%" dataField='studyId' dataSort dataFormat={this.renderStudyLinksTableCell}>
-									{'Links'}
-								</TableHeaderColumn>
-							</BootstrapTable>
-						</FlexCol>
-					)}
-				</FlexRow>
-			</FlexCol>
-		);
-	}
-
-	handleTreeRef = (ref:DescriptorTree<CancerTreeNode>) => this.tree = ref;
-}
diff --git a/src/shared/components/query/old/QueryConnector.ts b/src/shared/components/query/old/QueryConnector.ts
deleted file mode 100644
index 20a6b4fe65a..00000000000
--- a/src/shared/components/query/old/QueryConnector.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import {TypeOfCancer, CancerStudy, default as CBioPortalAPI} from "../../../api/generated/CBioPortalAPI";
-import {Connector, IDispatch} from "../../../lib/ConnectorAPI";
-import {RootState} from "../../../../redux/rootReducer";
-import {IQueryContainerProps} from "./QueryContainer";
-
-const FETCH = 'query/fetch';
-const SELECT = 'query/select';
-export const actionTypes = {FETCH, SELECT};
-
-export type ActionTypes = (
-    {type: typeof FETCH, status: 'fetching'}
-    | {type: typeof FETCH, status: 'complete', payload: QueryData}
-    | {type: typeof FETCH, status: 'error', error: Error}
-    | {type: typeof SELECT, cancerStudyIdentifiers: string[] }
-);
-
-export type QueryData = {
-    status?: 'fetching' | 'complete' | 'error',
-    cancerTypes?: TypeOfCancer[],
-    studies?: CancerStudy[],
-};
-
-const client = new CBioPortalAPI(`//${(window as any)['__API_ROOT__']}`);
-
-export default new class QueryConnector extends Connector<RootState, QueryData, ActionTypes, IQueryContainerProps>
-{
-    initialState:QueryData = {
-        status: 'fetching',
-    };
-
-    actions = {
-        loadQueryData: () => {
-            this.dispatch({
-                type: FETCH,
-                status: 'fetching',
-            });
-
-            Promise.all([
-                client.getAllCancerTypesUsingGET({}),
-                client.getAllStudiesUsingGET({})
-            ]).then(
-                ([cancerTypes, studies]) => {
-                    this.dispatch({
-                        type: FETCH,
-                        status: 'complete',
-                        payload: {
-                            cancerTypes,
-                            studies
-                        }
-                    });
-                },
-                reason => this.dispatch({
-                    type: FETCH,
-                    status: 'error',
-                    error: reason
-                })
-            );
-        }
-    };
-
-    mapStateToProps(state:RootState):IQueryContainerProps {
-        return {data: state.old_query};
-    }
-
-    reducer(state:QueryData, action:ActionTypes) {
-        switch (action.type) {
-            case FETCH: {
-                switch (action.status) {
-                    case 'fetching':
-                        return this.mergeState(state, {status: 'fetching'});
-
-                    case 'complete':
-                        state = this.mergeState(state, {status: 'complete'});
-                        state = this.mergeState(state, action.payload);
-                        return state;
-
-                    case 'error':
-                        return this.mergeState(state, {status: 'error'});
-
-                    default:
-                        return state;
-                }
-            }
-            default: {
-                return state;
-            }
-        }
-    }
-}();
diff --git a/src/shared/components/query/old/QueryContainer.tsx b/src/shared/components/query/old/QueryContainer.tsx
deleted file mode 100644
index 2d2577cd950..00000000000
--- a/src/shared/components/query/old/QueryContainer.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import * as _ from "lodash";
-import * as React from "react";
-import * as ReactBootstrap from 'react-bootstrap';
-import QueryConnector, {QueryData} from "./QueryConnector";
-import Spinner from "react-spinkit";
-import Dictionary = _.Dictionary;
-import CancerStudySelector from "./CancerStudySelector";
-import {ICancerStudySelectorState} from "./CancerStudySelector";
-import {FlexRow, FlexCol} from "../../flexbox/FlexBox";
-import Radio = ReactBootstrap.Radio;
-import {ICancerStudySelectorExperimentalOptions} from "./CancerStudySelector";
-import Checkbox = ReactBootstrap.Checkbox;
-import {Select, StateToggle} from "../../ExperimentalControls";
-import * as styles_any from './styles.module.scss';
-import firstDefinedValue from "../../../lib/firstDefinedValue";
-
-const styles = styles_any as {
-    QueryContainer: string,
-    CancerStudySelector: string,
-};
-
-export interface IQueryContainerProps
-{
-    data?: QueryData;
-
-    loadQueryData?: () => void;
-}
-
-export type IQueryContainerState = {
-} & ICancerStudySelectorExperimentalOptions & ICancerStudySelectorState;
-
-@QueryConnector.decorator
-export default class QueryContainer extends React.Component<IQueryContainerProps, IQueryContainerState>
-{
-    constructor(props:IQueryContainerProps)
-    {
-        super(props);
-        this.state = {};
-    }
-
-    componentDidMount()
-    {
-        QueryConnector.actions.loadQueryData();
-    }
-
-    // for demo only
-    onStateChange = (selectionState: ICancerStudySelectorState) =>
-    {
-        this.setState(selectionState);
-    }
-
-    render():JSX.Element
-    {
-        if (this.props.data && this.props.data.status == 'fetching')
-            return <Spinner/>;
-        if (!this.props.data || !this.props.data.cancerTypes || !this.props.data.studies)
-            return <span>No data</span>;
-
-        return (
-            <FlexCol padded flex={1} className={styles.QueryContainer}>
-
-                <CancerStudySelector
-                    searchTextPresets={['lung', 'serous', 'tcga', 'tcga -provisional']}
-                    cancerTypes={this.props.data.cancerTypes}
-                    studies={this.props.data.studies}
-                    onStateChange={this.onStateChange}
-                    showStudiesInTree={this.state.showStudiesInTree}
-                    {...this.state}
-                />
-
-                <FlexRow padded>
-                    {/* demo controls */}
-                    <FlexCol className={styles.CancerStudySelector} padded style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
-                        <StateToggle label='Show all studies when nothing is selected' target={this} name='showAllStudiesByDefault' defaultValue={!!CancerStudySelector.defaultProps.showAllStudiesByDefault}/>
-                        <StateToggle label='Show root node ("All")' target={this} name='showRoot' defaultValue={!!CancerStudySelector.defaultProps.showRoot}/>
-                        <StateToggle label='Click tree node again to deselect' target={this} name='clickAgainToDeselectSingle' defaultValue={!!CancerStudySelector.defaultProps.clickAgainToDeselectSingle}/>
-                        <StateToggle label='Filter studies list by tree checkboxes' target={this} name='filterBySelection' defaultValue={!!CancerStudySelector.defaultProps.filterBySelection}/>
-                        <StateToggle label='Show studies in tree' target={this} name='showStudiesInTree' defaultValue={!!CancerStudySelector.defaultProps.showStudiesInTree}/>
-                        <Select
-                            label="Tree depth: "
-                            selected={firstDefinedValue(this.state.maxTreeDepth, CancerStudySelector.defaultProps.maxTreeDepth)}
-                            options={[
-                                {label: "0"},
-                                {label: "1"},
-                                {label: "2"},
-                                {label: "3"},
-                                {label: "4"},
-                                {label: "5"},
-                                {label: "6"},
-                                {label: "7"},
-                                {label: "8"},
-                                {label: "9"},
-                            ]}
-                            onChange={option => this.setState({
-                                maxTreeDepth: parseInt(option.label, 10)
-                            })}
-                        />
-                        <span>Note: Use cmd+click tree node arrow to expand/collapse entire subtree.</span>
-                        {
-                            this.state.filterBySelection || this.state.showStudiesInTree
-                            ?   <span>&nbsp;</span>
-                            :   <span>Note: Use cmd+click to select/deselect multiple tree nodes.</span>
-                        }
-                    </FlexCol>
-
-                    {/* display state for demo */}
-                    <pre style={{flex: 1, height: 200}}>
-                        {
-                            JSON.stringify({
-                                selectedCancerTypeIds: this.state.selectedCancerTypeIds,
-                                selectedStudyIds: this.state.selectedStudyIds,
-                            }, null, 4)
-                        }
-                    </pre>
-                </FlexRow>
-
-            </FlexCol>
-        );
-    }
-}
diff --git a/src/shared/components/query/old/styles.module.scss b/src/shared/components/query/old/styles.module.scss
deleted file mode 100644
index 5f57b039e0f..00000000000
--- a/src/shared/components/query/old/styles.module.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-.QueryContainer {
-  height: 100%;
-}
-
-.CancerStudySelector {
-
-  user-select: none;
-  label {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  a {
-    cursor: pointer;
-  }
-
-  .selectCancerStudyRow {
-    align-items: center;
-
-    span.selectCancerStudyHeader {
-      color: #337ab7;
-    }
-
- 	div.searchTextInput {
- 	  min-width: 200px;
- 	}
-  }
-
-  .treeWithStudies {
-    label:hover {
-      text-decoration: underline;
-    }
-
-    .cancerTypeTreeNode {
-      label {
-        font-weight: normal;
-      }
-      color: grey;
-      font-style: italic;
-    }
-    .cancerStudyName {
-      label {
-        font-weight: bold;
-      }
-    }
-    .cancerStudySamples {
-      font-style: italic;
-    }
-  }
-
-  .treeNodeContent {
-    flex: 1;
-    align-items: center;
-  }
-
-  :global(.checkbox) {
-    padding-left: 5px;
-    margin: 0px;
-    display: flex;
-    flex-direction: row;
-
-    input {
-      cursor: pointer;
-    }
-  }
-
-  .treeNodeLabel {
-    cursor: pointer;
-    flex: 1;
-  }
-
-  .selectable:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-
-  .selectable.selected {
-    background-color: rgb(196, 211, 230);
-  }
-
-  .selectable.selected:hover {
-    background-color: lightsteelblue;
-  }
-
-  .matchingNodeText {
-    font-weight: bold;
-  }
-
-  .nonMatchingNodeText {
-    font-weight: normal;
-  }
-
-  /* makes react-bootstrap-table work in flexbox layout */
-  :global(.react-bs-table-container),:global(.react-bs-table),:global(.react-bs-container-body) {
-  	display: flex;
-  	flex-direction: column;
-  	flex: 1;
-  	height: initial !important;
-  }
-  :global(.react-bs-table) {
-    margin: 0px;
-  }
-
-  :global(.table) {
-    margin-bottom: 0px;
-  }
-
-  :global(th.sort-column)>* {
-    display: inline;
-  }
-
-  div.studyHeader {
-    display: inline-flex;
-    align-items: center;
-    height: 100%;
-  }
-
-  .searchTextInput {
-    min-width: 200px;
-  }
-}
-
diff --git a/src/shared/components/tree/DescriptorTree.tsx b/src/shared/components/tree/DescriptorTree.tsx
deleted file mode 100644
index fbcebcd2666..00000000000
--- a/src/shared/components/tree/DescriptorTree.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import * as React from 'react';
-import * as styles_any from './styles.module.scss';
-import classNames from '../../lib/classNames';
-import FontAwesome from "react-fontawesome";
-
-const styles = styles_any as {
-	treeNodeList: string,
-	treeNodeItem: string,
-	row: string,
-	arrow: string,
-	hidden: string,
-	noIndent: string,
-};
-
-export interface IBasicTreeNode {
-	expanded?: boolean;
-	content: React.ReactChild;
-	children?: this[];
-	listItemProps?:React.HTMLAttributes<HTMLLIElement>|undefined;
-	data?: any;
-}
-
-/**
- * Default tree descriptor.
- * Allows tree to be defined completely in a nested object
- * rather than having to provide a separate descriptor object.
- */
-export class BasicTreeDescriptor<TreeNode extends IBasicTreeNode> implements ITreeDescriptor<TreeNode>
-{
-	isExpanded(node:TreeNode) { return !!node.expanded; }
-	getContent(node:TreeNode) { return node.content; }
-	getChildren(node:TreeNode) { return node.children; }
-	getListItemProps(node:TreeNode) { return node.listItemProps; }
-}
-
-export interface ITreeDescriptor<TreeNode>
-{
-	isExpanded(node:TreeNode):boolean;
-	getContent(node:TreeNode):React.ReactChild;
-	getChildren(node:TreeNode):TreeNode[]|undefined;
-
-	/**
-	 * Allows customizing the LI element of each node.
-	 */
-	getListItemProps?(node:TreeNode):React.HTMLAttributes<HTMLLIElement>|undefined;
-}
-
-export interface IDescriptorTreeProps<TreeNode>
-{
-	treeDescriptor?: ITreeDescriptor<TreeNode>;
-	node: TreeNode;
-
-	className?: string;
-	style?: React.CSSProperties;
-	onExpand?: <T>(node:TreeNode, expand:boolean, event:React.MouseEvent<T>)=>void;
-	isChild?: boolean;
-	showRoot?: boolean;
-}
-
-export interface IDescriptorTreeState
-{
-	expand?: boolean;
-}
-
-/**
- * DescriptorTree makes it easy to compute a tree on the fly
- * rather than specifying the tree data entirely in a nested object structure.
- *
- * To use with JSX, create an alias like so:
- *     const FooTree = DescriptorTree.of<FooNode>();
- */
-export default class DescriptorTree<TreeNode> extends React.Component<IDescriptorTreeProps<TreeNode>, IDescriptorTreeState>
-{
-	/**
-	 * Provides a workaround for the current lack of support for generics in JSX.
-	 * See https://github.com/Microsoft/TypeScript/issues/6395
-	 */
-	static of<T>():new(p:IDescriptorTreeProps<T>) => DescriptorTree<T>
-	{
-		return DescriptorTree as new(p:IDescriptorTreeProps<T>) => DescriptorTree<T>;
-	}
-
-	static get defaultProps():IDescriptorTreeProps<any>
-	{
-		return {
-			treeDescriptor: new BasicTreeDescriptor(),
-			node: {},
-
-			showRoot: true
-		};
-	}
-
-	constructor(props:IDescriptorTreeProps<TreeNode>)
-	{
-		super(props);
-		this.state = {};
-	}
-
-	onExpand = (event:React.MouseEvent<any>) =>
-	{
-		let expand = !this.expand;
-		if (this.props.onExpand)
-			this.props.onExpand(this.props.node, expand, event);
-		this.setState({expand});
-	}
-
-	get expand():boolean
-	{
-		let desc = this.props.treeDescriptor as ITreeDescriptor<TreeNode>;
-		let expand = this.state.expand;
-		if (expand === undefined || this.props.onExpand)
-			expand = desc.isExpanded(this.props.node);
-		return expand;
-	}
-
-	renderChildNodes(children:TreeNode[] | undefined):JSX.Element[]
-	{
-		return (children || []).map((child, i) => (
-			<DescriptorTree
-				key={i}
-				treeDescriptor={this.props.treeDescriptor}
-				node={child}
-				onExpand={this.props.onExpand}
-				isChild={true}
-			/>
-		));
-	}
-
-	renderUL(asRootElement:boolean, children:React.ReactNode):JSX.Element
-	{
-		let className, style;
-		if (asRootElement)
-		{
-			className = classNames(styles.noIndent, styles.treeNodeList, this.props.className);
-			style = this.props.style;
-		}
-		else
-		{
-			className = styles.treeNodeList;
-		}
-
-		return (
-			<ul className={className} style={style}>
-				{children}
-			</ul>
-		);
-	}
-
-	render():JSX.Element
-	{
-		let desc = this.props.treeDescriptor as ITreeDescriptor<TreeNode>;
-		let node = this.props.node;
-		let children = desc.getChildren(node);
-
-		// if we're hiding the root node, render children at top level
-		if (!this.props.showRoot)
-			return this.renderUL(true, this.renderChildNodes(children));
-
-		// to keep indentation consistent, we always render an icon for the arrow and style controls visibility
-		let expand = this.expand;
-		let showArrow = !!children && children.length > 0;
-		let htmlProps:Pick<React.HTMLProps<HTMLSpanElement>, 'onMouseDown'> = {
-			onMouseDown: this.onExpand,
-		};
-		let arrow = (
-			<FontAwesome
-				className={classNames(styles.arrow, !showArrow && styles.hidden)}
-				name={expand ? 'caret-down' : 'caret-right'}
-				{...htmlProps}
-			/>
-		);
-
-		// the node is rendered as an LI element
-		let customProps = desc.getListItemProps && desc.getListItemProps(node);
-		let liProps = {...customProps};
-		liProps.className = classNames(liProps.className, styles.treeNodeItem);
-
-		let content = desc.getContent(node);
-		let childList = expand && this.renderUL(false, this.renderChildNodes(children));
-
-		let liElement = (
-			<li {...liProps}>
-				<div className={styles.row}>
-					{arrow}
-					{content}
-				</div>
-				{childList}
-			</li>
-		);
-
-		// if this is a child node, don't render outer UL element
-		if (this.props.isChild)
-			return liElement;
-
-		// root node needs an outer UL element
-		return this.renderUL(true, liElement);
-	}
-}
-
-/**
- * BasicTree allows the tree data to be defined completely in a nested
- * object structure implementing IBasicTreeNode.
- * It is not necessary to provide a treeDescriptor prop.
- */
-export class BasicTree extends DescriptorTree<IBasicTreeNode> { };
diff --git a/src/shared/components/tree/styles.module.scss b/src/shared/components/tree/styles.module.scss
deleted file mode 100644
index 439cd6da3fc..00000000000
--- a/src/shared/components/tree/styles.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.treeNodeList {
-  padding-left: 18px;
-}
-
-.treeNodeItem {
-  list-style-type: none;
-}
-
-.arrow {
-  cursor: pointer;
-  text-align: center;
-  width: 1em;
-  height: 1em;
-
-  &.hidden {
-    visibility: hidden;
-  }
-}
-
-
-.row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.noIndent {
-  padding-left: 0px;
-}

From 24e72deea70379ff3171fd246c6b2901060eb470 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Mar 2017 11:54:52 -0500
Subject: [PATCH 068/133] Revert unnecessary changes

---
 package.json                                   | 1 -
 src/globalStyles/bootstrap-customizations.scss | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 2925b174816..87875401d4d 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,6 @@
     "@types/rc-tooltip": "^3.4.2",
     "@types/react": "15.0.4",
     "@types/react-bootstrap": "^0.0.43",
-    "@types/react-bootstrap-table": "^2.6.1",
     "@types/react-dom": "^0.14.21",
     "@types/react-redux": "^4.4.36",
     "@types/react-fontawesome": "^1.5.0",
diff --git a/src/globalStyles/bootstrap-customizations.scss b/src/globalStyles/bootstrap-customizations.scss
index 892a5034723..3cf7f0c2aa6 100755
--- a/src/globalStyles/bootstrap-customizations.scss
+++ b/src/globalStyles/bootstrap-customizations.scss
@@ -1 +1 @@
-$body-bg: #fff;
\ No newline at end of file
+$body-bg: #fff;

From 980b7b8dca010ea5165fee5e0bddba729729d4b0 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Mar 2017 12:09:09 -0500
Subject: [PATCH 069/133] adjust css references

---
 src/pages/home/HomePage.tsx                         | 1 +
 src/shared/components/query/CancerStudySelector.tsx | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index acf7f96aa57..d3179b7e1be 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -10,6 +10,7 @@ import {toJS, observable, action, computed, whyRun, expr} from "mobx";
 import queryStore from "../../shared/components/query/QueryStore";
 import LabeledCheckbox from "../../shared/components/labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
+import 'react-select/dist/react-select.css';
 
 function getRootElement()
 {
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 1ef4092a608..f9b990e9cad 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -2,13 +2,11 @@ import * as _ from "lodash";
 import * as React from "react";
 import Dictionary = _.Dictionary;
 import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioPortalAPI";
-import "react-bootstrap-table/css/react-bootstrap-table.css";
 import {FlexCol, FlexRow} from "../flexbox/FlexBox";
 import * as styles_any from './styles.module.scss';
 import classNames from "../../lib/classNames";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
-import 'react-select/dist/react-select.css';
 import StudyList from "../StudyList/StudyList";
 import {observer} from "mobx-react";
 import queryStore from "./QueryStore";

From 4cefa43e0d50425ad15264d5383aeedce497e4fe Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Mar 2017 13:21:11 -0500
Subject: [PATCH 070/133] Move global styles to scss module

---
 src/pages/home/HomePage.tsx                   |  2 +-
 .../components/query/styles.module.scss       | 74 ++++++++++++++-----
 2 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index d3179b7e1be..a1bade4cb41 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -71,7 +71,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 								<ReactSelect
 
 									value={this.store.maxTreeDepth}
-									options={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(n => ({value: n, label: n}))}
+									options={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(value => ({value, label: value + ''}))}
 									onChange={(option:{value:number}) => this.store.maxTreeDepth = option.value}
 								/>
 							</FlexRow>
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 5b08044ae5a..d336f2ddc20 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -18,20 +18,11 @@
   }
 }
 
-.cancerStudySelectorHeader {
-  background-color: #1982b8;
-  border-bottom: 1px solid rgb(17, 116, 167);
-  padding: 10px;
-  margin: 0;
-  display: flex;
-  justify-content: space-between;
-}
-
 .CancerStudySelector {
   position: relative;
   overflow: hidden;
   user-select: none;
-  
+
   label {
     display: flex;
     flex-direction: row;
@@ -41,6 +32,48 @@
     cursor: pointer;
   }
 
+  .cancerStudySelectorHeader {
+    background-color: #1982b8;
+    border-bottom: 1px solid rgb(17, 116, 167);
+    padding: 10px;
+    margin: 0;
+    display: flex;
+    justify-content: space-between;
+
+    :global(.Select-control),
+    :global(.Select-control:hover) {
+      background: rgba(0, 0, 0, 0.1) !important;
+      border: 0px !important;
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1) !important;
+      border-radius: 2px !important;
+      color: rgba(255, 255, 255, 0.85) !important;
+      height: 30px !important;
+      font-weight: 300;
+
+      :global(.Select-input) {
+        height: 30px;
+        font-weight: 300;
+      }
+    }
+
+    :global(.Select-placeholder),
+    :global(.Select-clear-zone),
+    :global(.has-value.Select--single) > :global(.Select-control .Select-value .Select-value-label),
+    :global(.has-value.is-pseudo-focused.Select--single) > :global(.Select-control .Select-value .Select-value-label) {
+      color: rgba(255, 255, 255, 0.85) !important;
+      font-weight: 300;
+    }
+
+    :global(.Select-placeholder),
+    :global(.Select--single) > :global(.Select-control .Select-value) {
+      line-height: 30px !important;
+    }
+
+    :global(.Select-arrow) {
+      border-color: rgba(255, 255, 255, 0.85) transparent transparent !important;
+    }
+  }
+
   .selectAll {
     background: rgb(17, 116, 167);
     border: 1px solid rgba(0,0,0,0.05);
@@ -94,7 +127,8 @@
     height: 350px;
   }
 
-  div.cancerTypeListContainer, div.cancerStudyListContainer {
+  div.cancerTypeListContainer,
+  div.cancerStudyListContainer {
   }
 
   div.cancerTypeListContainer {
@@ -196,7 +230,8 @@
   border-radius: 10px;
   padding: 10px;
 
-  div.singleCheckbox, div.groupCheckbox {
+  div.singleCheckbox,
+  div.groupCheckbox {
     margin-left: 20px;
 
     label {
@@ -281,10 +316,12 @@
     width: 16px;
     height: 16px;
   }
-  span.pendingMessage, span.errorMessage {
+  span.pendingMessage,
+  span.errorMessage {
     font-size: small;
   }
-  div.validBubble, div.invalidBubble {
+  div.validBubble,
+  div.invalidBubble {
     display: flex;
     align-items: center;
     margin: 2px;
@@ -338,7 +375,8 @@ div.MutSigGeneSelectorWindow {
   div.MutSigGeneSelector {
     margin: 10px;
     flex: 1;
-    div.selectionColumnHeader, div.selectionColumnCell {
+    div.selectionColumnHeader,
+    div.selectionColumnCell {
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -406,7 +444,8 @@ div.GisticGeneSelectorWindow {
       width: 400px;
     }
 
-    .someGenes, .moreGenes {
+    .someGenes,
+    .moreGenes {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -418,7 +457,8 @@ div.GisticGeneSelectorWindow {
       &:not(.simulateHovered) {
         cursor: pointer;
       }
-      &:hover, &.simulateHovered {
+      &:hover,
+      &.simulateHovered {
         padding: 1px;
         border: 2px solid #1974b8;
         border-radius: 5px;

From 04787526fb49612b8850c978fa83a938c6b51a55 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Mar 2017 14:51:48 -0500
Subject: [PATCH 071/133] typing for react-select and styling changes

---
 src/pages/home/HomePage.tsx                   |  3 +--
 src/pages/pageHeader/PageHeader.tsx           |  2 +-
 .../components/query/CancerStudySelector.tsx  |  4 +--
 .../components/query/GeneSetSelector.tsx      |  2 +-
 .../components/query/GeneSymbolValidator.tsx  |  3 +--
 .../components/query/GisticGeneSelector.tsx   |  4 +--
 .../components/query/MutSigGeneSelector.tsx   | 23 +++++++++++------
 .../components/query/QueryContainer.tsx       | 23 +++++++----------
 src/shared/components/query/QueryStore.ts     |  2 +-
 .../components/query/SampleListSelector.tsx   |  2 +-
 .../components/query/styles.module.scss       | 25 ++++++++-----------
 typings/missing.d.ts                          |  1 -
 typings/react-select.d.ts                     | 21 ++++++++++++++++
 13 files changed, 65 insertions(+), 50 deletions(-)
 create mode 100644 typings/react-select.d.ts

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index a1bade4cb41..b42e71b8d20 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -69,10 +69,9 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 							<FlexRow padded overflow>
 								<span>Tree depth:</span>
 								<ReactSelect
-
 									value={this.store.maxTreeDepth}
 									options={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(value => ({value, label: value + ''}))}
-									onChange={(option:{value:number}) => this.store.maxTreeDepth = option.value}
+									onChange={option => this.store.maxTreeDepth = option ? option.value : 0}
 								/>
 							</FlexRow>
 							<span>Note: Use cmd+click to select/deselect multiple cancer types.</span>
diff --git a/src/pages/pageHeader/PageHeader.tsx b/src/pages/pageHeader/PageHeader.tsx
index 3aa6b0fbe8e..fb822e981aa 100644
--- a/src/pages/pageHeader/PageHeader.tsx
+++ b/src/pages/pageHeader/PageHeader.tsx
@@ -30,7 +30,7 @@ export default class PageHeader extends React.Component<IPageHeaderProps, void>
                         </div>
                     </form>
                     <LabeledCheckbox checked={devMode.enabled} onChange={event => devMode.enabled = event.target.checked}>
-                        Show work in progress
+                        Enable debug mode
                     </LabeledCheckbox>
                 </div>
             </header>
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index f9b990e9cad..3693ab96424 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -161,7 +161,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 		return (
 			<FlexCol overflow className={styles.CancerStudySelector}>
 				<FlexRow padded overflow className={styles.selectCancerStudyRow}>
-					<h2>Select Studies</h2>
+					<h2>Select Studies:</h2>
 					<span 
 						onClick={() => {
 							if (this.store.selectedStudyIds.length)
@@ -188,7 +188,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 							this.store.searchText = searchText;
 							this.store.selectedCancerTypeIds = [];
 						}}
-						onChange={(option:{value:string}) => {
+						onChange={option => {
 							this.store.searchText = option ? option.value || '' : '';
 							this.store.selectedCancerTypeIds = [];
 						}}
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 60cefd5d3d3..67b9ff0f446 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -44,7 +44,7 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 					className={styles.ReactSelect}
 					value={this.store.geneQuery}
 					options={options}
-					onChange={(option:{value:string}) => this.store.geneQuery = option.value}
+					onChange={option => this.store.geneQuery = option ? option.value : ''}
 				/>
 
 				<FlexRow padded>
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 48dfc5f4fc9..0470755e21b 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -112,7 +112,6 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 			label: gene.hugoGeneSymbol,
 			value: gene.hugoGeneSymbol
 		}));
-		let onChange = (option:{value:string}) => this.store.replaceGene(alias, option.value);
 		return (
 			<div key={key} className={styles.suggestionBubble} title={title}>
 				<FontAwesome className={styles.icon} name='question'/>
@@ -122,7 +121,7 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 					className={styles.ReactSelect}
 					placeholder='select a symbol'
 					options={options}
-					onChange={onChange}
+					onChange={option => option && this.store.replaceGene(alias, option.value)}
 					autosize
 				/>
 			</div>
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index fb34d01238f..432e42e98d5 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -121,7 +121,7 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 			'qValue': {
 				priority: 6,
 				dataField: 'qValue',
-				name: "Q Value",
+				name: "Q-Value",
 				sortable: true,
 				filterable: true,
 				formatter: ({name, rowData: gistic, columnData: value}: IColumnFormatterData<Gistic>) => (
@@ -135,7 +135,7 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 		let reactTableProps: TableProps = {
 			className: "table table-striped table-border-top",
 			hideFilterInput: true,
-			defaultSort: 'Q Value',
+			defaultSort: columns.qValue.name,
 		};
 
 		let headerControlsProps: ITableHeaderControlsProps = {
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index e96c1d14012..b0de86954ff 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -10,6 +10,7 @@ import {IColumnFormatterData} from "../enhancedReactTable/IColumnFormatter";
 import {IColumnDefMap, IEnhancedReactTableProps} from "../enhancedReactTable/IEnhancedReactTableProps";
 import {ITableHeaderControlsProps} from "../tableHeaderControls/TableHeaderControls";
 import {Table, Td, TableProps} from 'reactable';
+import {toPrecision} from "../../lib/FormatUtils";
 
 const styles = styles_any as {
 	MutSigGeneSelector: string,
@@ -58,25 +59,30 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 	{
 		let columns:IColumnDefMap = {
 			'hugoGeneSymbol': {
+				priority: 1,
 				dataField: 'hugoGeneSymbol',
 				name: "Gene Symbol",
-				priority: 1,
 				sortable: true,
-				filterable: true
+				filterable: true,
 			},
 			'numberOfMutations': {
+				priority: 2,
 				dataField: 'numberOfMutations',
 				name: "Num Mutations",
-				priority: 2,
 				sortable: true,
-				filterable: true
+				filterable: true,
 			},
 			'qValue': {
+				priority: 3,
 				dataField: 'qValue',
 				name: "Q-Value",
-				priority: 3,
 				sortable: true,
-				filterable: true
+				filterable: true,
+				formatter: ({name, columnData: value}: IColumnFormatterData<MutSig>) => (
+					<Td key={name} column={name} value={value}>
+						{toPrecision(value, 2, 0.1)}
+					</Td>
+				),
 			},
 			'selected': {
 				name: "Selected",
@@ -103,13 +109,14 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 					</Td>
 				),
 				sortable: false,
-				filterable: false
+				filterable: false,
 			},
 		};
 
 		let reactTableProps:TableProps = {
 			className: "table table-striped table-border-top",
-			hideFilterInput:true
+			hideFilterInput:true,
+			defaultSort: columns.qValue.name,
 		};
 
 		let headerControlsProps:ITableHeaderControlsProps = {
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 38ca7027bfc..7d78f037c18 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -11,7 +11,6 @@ import * as styles_any from './styles.module.scss';
 import GeneticProfileSelector from "./GeneticProfileSelector";
 import {observer} from "mobx-react";
 import queryStore from "./QueryStore";
-import devMode from "../../lib/devMode";
 import DataTypePrioritySelector from "./DataTypePrioritySelector";
 import GeneSetSelector from "./GeneSetSelector";
 import SampleListSelector from "./SampleListSelector";
@@ -59,23 +58,21 @@ export default class QueryContainer extends React.Component<{}, {}>
 			<FlexCol padded overflow className={styles.QueryContainer}>
 				<CancerStudySelector/>
 
-				{!!(devMode.enabled && this.store.singleSelectedStudyId) && (
+				{!!(this.store.singleSelectedStudyId) && (
 					<GeneticProfileSelector/>
 				)}
 
-				{!!(devMode.enabled && this.store.singleSelectedStudyId) && (
+				{!!(this.store.singleSelectedStudyId) && (
 					<SampleListSelector/>
 				)}
 
-				{!!(devMode.enabled && !this.store.singleSelectedStudyId) && (
+				{!!(!this.store.singleSelectedStudyId) && (
 					<DataTypePrioritySelector/>
 				)}
 
-				{!!(devMode.enabled) && (
-					<GeneSetSelector/>
-				)}
+				<GeneSetSelector/>
 
-				{!!(devMode.enabled && this.store.showMutSigPopup) && (
+				{!!(this.store.showMutSigPopup) && (
 					<PopupWindow
 						className={styles.MutSigGeneSelectorWindow}
 						windowTitle="Recurrently Mutated Genes"
@@ -92,7 +89,7 @@ export default class QueryContainer extends React.Component<{}, {}>
 					</PopupWindow>
 				)}
 
-				{!!(devMode.enabled && this.store.showGisticPopup) && (
+				{!!(this.store.showGisticPopup) && (
 					<PopupWindow
 						className={styles.GisticGeneSelectorWindow}
 						windowTitle="Recurrent Copy Number Alterations (Gistic)"
@@ -109,11 +106,9 @@ export default class QueryContainer extends React.Component<{}, {}>
 					</PopupWindow>
 				)}
 
-				{!!(devMode.enabled) && (
-					<button className={styles.SubmitButton}>
-						Submit
-					</button>
-				)}
+				<button className={styles.SubmitButton}>
+					Submit
+				</button>
 			</FlexCol>
         );
     }
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 28811c877e4..9881921704d 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -156,7 +156,7 @@ export class QueryStore
 
 	@observable caseIdsMode:'sample'|'patient' = 'sample';
 
-	@observable geneQuery = '9 99 CFD FD FF DD';
+	@observable geneQuery = '';
 
 
 	////////////////////////////////////////////////////////////////////////////////
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index 33ae1b8ffe6..42d4d7a2bf2 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -43,7 +43,7 @@ export default class SampleListSelector extends React.Component<{}, {}>
 					className={styles.ReactSelect}
 					value={this.store.selectedSampleListId}
 					options={options}
-					onChange={(option:{value:string}) => this.store.selectedSampleListId = option.value}
+					onChange={option => this.store.selectedSampleListId = option ? option.value : undefined}
 				/>
 				<a href={`/study?id=${this.store.singleSelectedStudyId}`}>To build your own case set, try out our enhanced Study View.</a>
 
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index d336f2ddc20..8e30e745477 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -18,6 +18,16 @@
   }
 }
 
+.CancerStudySelector,
+.GeneticProfileSelector,
+.DataTypePrioritySelector,
+.SampleListSelector,
+.GeneSetSelector {
+  border: 1px solid rgb(170, 170, 170);
+  border-radius: 10px;
+  padding: 10px;
+}
+
 .CancerStudySelector {
   position: relative;
   overflow: hidden;
@@ -226,10 +236,6 @@
 }
 
 .GeneticProfileSelector {
-  border: 1px solid rgb(170, 170, 170);
-  border-radius: 10px;
-  padding: 10px;
-
   div.singleCheckbox,
   div.groupCheckbox {
     margin-left: 20px;
@@ -267,28 +273,17 @@
 }
 
 .DataTypePrioritySelector {
-  border: 1px solid rgb(170, 170, 170);
-  border-radius: 10px;
-  padding: 10px;
   h2 {
     flex-grow: 0;
   }
 }
 
 .SampleListSelector {
-  border: 1px solid rgb(170, 170, 170);
-  border-radius: 10px;
-  padding: 10px;
-
   .ReactSelect {
   }
 }
 
 .GeneSetSelector {
-  border: 1px solid rgb(170, 170, 170);
-  border-radius: 10px;
-  padding: 10px;
-
   .ReactSelect {
   }
 
diff --git a/typings/missing.d.ts b/typings/missing.d.ts
index ccc091857ad..f4a41f4ebaf 100644
--- a/typings/missing.d.ts
+++ b/typings/missing.d.ts
@@ -4,7 +4,6 @@ declare module '*.json';
 
 // these packages are missing typings
 declare module 'react-file-download';
-declare module 'react-select';
 declare module 'react-zeroclipboard';
 declare module 'reactableMSK';
 declare module 'redux-seamless-immutable';
diff --git a/typings/react-select.d.ts b/typings/react-select.d.ts
new file mode 100644
index 00000000000..d3a6c619057
--- /dev/null
+++ b/typings/react-select.d.ts
@@ -0,0 +1,21 @@
+declare module 'react-select'
+{
+	export type ReactSelectOption = {label: string, value: any};
+
+    export interface ReactSelectProps<T>
+    {
+    	className?: string;
+		value?: T;
+		options: ReactSelectOption[];
+		onChange?: (option: ReactSelectOption | null) => void;
+		autofocus?: boolean;
+		autosize?: boolean;
+		promptTextCreator?: (label: string) => string;
+		placeholder?: string;
+		noResultsText?: boolean;
+		onCloseResetsInput?: boolean;
+		onInputChange?: (searchText: string) => void;
+    }
+
+    export default class ReactSelect extends React.Component<ReactSelectProps<any>, {}> { }
+}

From c07c3ad0a9d30409937a87f5240aa8a0fc225f62 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Mar 2017 15:17:30 -0500
Subject: [PATCH 072/133] fixed gene list selection bug

---
 .../components/query/GeneSetSelector.tsx      | 37 +++++++++++++------
 .../components/query/styles.module.scss       |  4 ++
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 67b9ff0f446..b12db034902 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -3,6 +3,7 @@ import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
 import ReactSelect from 'react-select';
 import {observer} from "mobx-react";
+import {computed, expr} from 'mobx';
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import gene_lists from './gene_lists';
 import GeneSymbolValidator from "./GeneSymbolValidator";
@@ -25,16 +26,28 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 		return queryStore;
 	}
 
+	@computed get selectedGeneListOption()
+	{
+		let option = this.geneListOptions.find(option => option.value == this.store.geneQuery);
+		return option ? option.value : '';
+	}
+
+	@computed get geneListOptions()
+	{
+		return [
+			{
+				label: 'User-defined List',
+				value: ''
+			},
+			...gene_lists.map(item => ({
+				label: `${item.id} (${item.genes.length} genes)`,
+				value: item.genes.join(' ')
+			}))
+		];
+	}
+
 	render()
 	{
-		let options = gene_lists.map(item => ({
-			label: `${item.id} (${item.genes.length} genes)`,
-			value: item.genes.join(' ')
-		}));
-		options = [{
-			label: 'User-defined List',
-			value: ''
-		}].concat(options);
 
 		return (
 			<FlexCol padded overflow className={styles.GeneSetSelector}>
@@ -42,21 +55,21 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 				<a href='/onco_query_lang_desc.jsp'>Advanced: Onco Query Language (OQL)</a>
 				<ReactSelect
 					className={styles.ReactSelect}
-					value={this.store.geneQuery}
-					options={options}
+					value={this.selectedGeneListOption}
+					options={this.geneListOptions}
 					onChange={option => this.store.geneQuery = option ? option.value : ''}
 				/>
 
 				<FlexRow padded>
 					<AsyncStatus promise={this.store.mutSigForSingleStudy}>
-						{!!(this.store.mutSigForSingleStudy.result.length) && (
+						{!!expr(() => this.store.mutSigForSingleStudy.result.length) && (
 							<button onClick={() => this.store.showMutSigPopup = true}>
 								Select from Recurrently Mutated Genes (MutSig)
 							</button>
 						)}
 					</AsyncStatus>
 					<AsyncStatus promise={this.store.gisticForSingleStudy}>
-						{!!(this.store.gisticForSingleStudy.result.length) && (
+						{!!expr(() => this.store.gisticForSingleStudy.result.length) && (
 							<button onClick={() => this.store.showGisticPopup = true}>
 								Select Genes from Recurrent CNAs (Gistic)
 							</button>
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 8e30e745477..4db3743e4f4 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -276,6 +276,10 @@
   h2 {
     flex-grow: 0;
   }
+
+  input[type="radio"] {
+      margin: 4px 6px 0 0;
+  }
 }
 
 .SampleListSelector {

From 99a2027da6b7104854e9d054029e6b85fcdb8987 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 3 Mar 2017 15:46:05 -0500
Subject: [PATCH 073/133] code cleanup

---
 .../query/DataTypePrioritySelector.tsx        |   9 +-
 .../components/query/GeneSetSelector.tsx      |   9 +-
 .../components/query/GisticGeneSelector.tsx   | 178 +++++++++---------
 .../components/query/MutSigGeneSelector.tsx   |  36 +---
 .../components/query/QueryContainer.tsx       |   1 -
 .../components/query/SampleListSelector.tsx   |  47 ++---
 6 files changed, 131 insertions(+), 149 deletions(-)

diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index 3c66e821670..acc8d538bc4 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -35,9 +35,8 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 		);
 	}
 
-	DataTypePriorityRadio = observer((props: {label: string, state:QueryStore['dataTypePriority']}) =>
-	{
-		return (
+	DataTypePriorityRadio = observer(
+		(props: {label: string, state:QueryStore['dataTypePriority']}) => (
 			<label>
 				<input
 					type="radio"
@@ -49,6 +48,6 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 				/>
 				{props.label}
 			</label>
-		);
-	});
+		)
+	);
 }
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index b12db034902..7e24d6e2393 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -3,7 +3,7 @@ import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
 import ReactSelect from 'react-select';
 import {observer} from "mobx-react";
-import {computed, expr} from 'mobx';
+import {computed} from 'mobx';
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import gene_lists from './gene_lists';
 import GeneSymbolValidator from "./GeneSymbolValidator";
@@ -28,7 +28,7 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 
 	@computed get selectedGeneListOption()
 	{
-		let option = this.geneListOptions.find(option => option.value == this.store.geneQuery);
+		let option = this.geneListOptions.find(opt => opt.value == this.store.geneQuery);
 		return option ? option.value : '';
 	}
 
@@ -48,7 +48,6 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 
 	render()
 	{
-
 		return (
 			<FlexCol padded overflow className={styles.GeneSetSelector}>
 				<h2>Enter Gene Set:</h2>
@@ -62,14 +61,14 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 
 				<FlexRow padded>
 					<AsyncStatus promise={this.store.mutSigForSingleStudy}>
-						{!!expr(() => this.store.mutSigForSingleStudy.result.length) && (
+						{!!(this.store.mutSigForSingleStudy.result.length) && (
 							<button onClick={() => this.store.showMutSigPopup = true}>
 								Select from Recurrently Mutated Genes (MutSig)
 							</button>
 						)}
 					</AsyncStatus>
 					<AsyncStatus promise={this.store.gisticForSingleStudy}>
-						{!!expr(() => this.store.gisticForSingleStudy.result.length) && (
+						{!!(this.store.gisticForSingleStudy.result.length) && (
 							<button onClick={() => this.store.showGisticPopup = true}>
 								Select Genes from Recurrent CNAs (Gistic)
 							</button>
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index 432e42e98d5..6ed2a7f3141 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -54,96 +54,84 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 
 	map_geneSymbol_selected = observable.map<boolean>();
 
-	render()
-	{
-		let columns: IColumnDefMap = {
-			'amp': {
-				priority: 1,
-				columnDataFunction: ({rowData: gistic}: IColumnFormatterData<Gistic>) => gistic && (gistic.amp ? 'Amp' : 'Del'),
-				name: "Amp Del",
-				sortable: true,
-				filterable: true,
-				header: (
-					<div className={classNames(styles.header, styles.amp, styles.del)}>
-						<span className={styles.amp}>Amp</span>
-						<span className={styles.del}>Del</span>
-					</div>
-				),
-				formatter: ({name, rowData: gistic, columnData: value}: IColumnFormatterData<Gistic>) => (
-					<Td key={name} column={name} value={value}>
-						{!!(gistic) && (
-							<div className={gistic.amp ? styles.amp : styles.del}/>
-						)}
-					</Td>
-				)
-			},
-			'chromosome': {
-				priority: 2,
-				dataField: 'chromosome',
-				name: "Chr",
-				sortable: true,
-				filterable: true
-			},
-			'cytoband': {
-				priority: 3,
-				dataField: 'cytoband',
-				name: "Cytoband",
-				sortable: sortByCytoband,
-				filterable: true,
-			},
-			'#': {
-				priority: 4,
-				columnDataFunction: ({rowData: gistic}: IColumnFormatterData<Gistic>) => getGeneSymbols(gistic).length,
-				name: "#",
-				sortable: true,
-				filterable: true,
-			},
-			'genes': {
-				priority: 5,
-				// this columnDataFunction allows quick searching by gene symbol
-				columnDataFunction: ({rowData: gistic}: IColumnFormatterData<Gistic>) => getGeneSymbols(gistic).join(' '),
-				name: "Genes",
-				sortable: (genes1:string, genes2:string) => {
-					// sort by length, then alphabetically
-					return genes1.length - genes2.length
-						|| +(genes1 > genes2) - +(genes1 < genes2);
-				},
-				filterable: true,
-				formatter: ({name, rowData: gistic, columnData: value}: IColumnFormatterData<Gistic>) => (
-					<Td key={name} column={name} value={value}>
-						<GisticGeneToggles
-							gistic={gistic}
-							map_geneSymbol_selected={this.map_geneSymbol_selected}
-						/>
-					</Td>
-				),
-			},
-			'qValue': {
-				priority: 6,
-				dataField: 'qValue',
-				name: "Q-Value",
-				sortable: true,
-				filterable: true,
-				formatter: ({name, rowData: gistic, columnData: value}: IColumnFormatterData<Gistic>) => (
-					<Td key={name} column={name} value={value}>
-						{toPrecision(value, 2, 0.1)}
-					</Td>
-				),
+	private columns:IColumnDefMap = {
+		'amp': {
+			priority: 1,
+			columnDataFunction: ({rowData: gistic}: IColumnFormatterData<Gistic>) => gistic && (gistic.amp ? 'Amp' : 'Del'),
+			name: "Amp Del",
+			sortable: true,
+			filterable: true,
+			header: (
+				<div className={classNames(styles.header, styles.amp, styles.del)}>
+					<span className={styles.amp}>Amp</span>
+					<span className={styles.del}>Del</span>
+				</div>
+			),
+			formatter: ({name, rowData: gistic, columnData: value}: IColumnFormatterData<Gistic>) => (
+				<Td key={name} column={name} value={value}>
+					{!!(gistic) && (
+						<div className={gistic.amp ? styles.amp : styles.del}/>
+					)}
+				</Td>
+			)
+		},
+		'chromosome': {
+			priority: 2,
+			dataField: 'chromosome',
+			name: "Chr",
+			sortable: true,
+			filterable: true
+		},
+		'cytoband': {
+			priority: 3,
+			dataField: 'cytoband',
+			name: "Cytoband",
+			sortable: sortByCytoband,
+			filterable: true,
+		},
+		'#': {
+			priority: 4,
+			columnDataFunction: ({rowData: gistic}: IColumnFormatterData<Gistic>) => getGeneSymbols(gistic).length,
+			name: "#",
+			sortable: true,
+			filterable: true,
+		},
+		'genes': {
+			priority: 5,
+			// this columnDataFunction allows quick searching by gene symbol
+			columnDataFunction: ({rowData: gistic}: IColumnFormatterData<Gistic>) => getGeneSymbols(gistic).join(' '),
+			name: "Genes",
+			sortable: (genes1:string, genes2:string) => {
+				// sort by length, then alphabetically
+				return genes1.length - genes2.length
+					|| +(genes1 > genes2) - +(genes1 < genes2);
 			},
-		};
-
-		let reactTableProps: TableProps = {
-			className: "table table-striped table-border-top",
-			hideFilterInput: true,
-			defaultSort: columns.qValue.name,
-		};
-
-		let headerControlsProps: ITableHeaderControlsProps = {
-			showCopyAndDownload: false,
-			showHideShowColumnButton: false,
-			showPagination: true,
-		};
+			filterable: true,
+			formatter: ({name, rowData: gistic, columnData: value}: IColumnFormatterData<Gistic>) => (
+				<Td key={name} column={name} value={value}>
+					<GisticGeneToggles
+						gistic={gistic}
+						map_geneSymbol_selected={this.map_geneSymbol_selected}
+					/>
+				</Td>
+			),
+		},
+		'qValue': {
+			priority: 6,
+			dataField: 'qValue',
+			name: "Q-Value",
+			sortable: true,
+			filterable: true,
+			formatter: ({name, rowData: gistic, columnData: value}: IColumnFormatterData<Gistic>) => (
+				<Td key={name} column={name} value={value}>
+					{toPrecision(value, 2, 0.1)}
+				</Td>
+			),
+		},
+	};
 
+	render()
+	{
 		return (
 			<div className={styles.GisticGeneSelector}>
 				<span>
@@ -156,11 +144,19 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 				<GisticTable
 					className={styles.gisticTable}
 					itemsName="genes"
-					reactTableProps={reactTableProps}
 					initItemsPerPage={10}
-					headerControlsProps={headerControlsProps}
-					columns={columns}
+					columns={this.columns}
 					rawData={this.props.data}
+					headerControlsProps={{
+						showCopyAndDownload: false,
+						showHideShowColumnButton: false,
+						showPagination: true,
+					}}
+					reactTableProps={{
+						className: "table table-striped table-border-top",
+						hideFilterInput: true,
+						defaultSort: this.columns.qValue.name,
+					}}
 				/>
 				<button
 					className={styles.selectButton}
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index b0de86954ff..970940059c2 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -113,39 +113,23 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 			},
 		};
 
-		let reactTableProps:TableProps = {
-			className: "table table-striped table-border-top",
-			hideFilterInput:true,
-			defaultSort: columns.qValue.name,
-		};
-
-		let headerControlsProps:ITableHeaderControlsProps = {
-		    // tableData?: Array<any>;
-		    // className?: string;
-		    // searchClassName?: string;
-		    // showSearch?: boolean;
-			showCopyAndDownload: false,
-		    // copyDownloadClassName?: string;
-		    showHideShowColumnButton: false,
-		    showPagination: true,
-		    // handleInput?: Function;
-		    // downloadDataGenerator?: Function;
-		    // downloadDataContainsHeader?: boolean;
-		    // downloadFilename?: string;
-		    // paginationProps?: ITablePaginationControlsProps;
-		    // columnVisibilityProps?: IColumnVisibilityControlsProps;
-		    // searchDelayMs?:number;
-		};
-
 		return (
 			<div className={styles.MutSigGeneSelector}>
 				<MutSigTable
 					itemsName="genes"
-					reactTableProps={reactTableProps}
 					initItemsPerPage={10}
-					headerControlsProps={headerControlsProps}
 					columns={columns}
 					rawData={this.props.data}
+					headerControlsProps={{
+						showCopyAndDownload: false,
+						showHideShowColumnButton: false,
+						showPagination: true,
+					}}
+					reactTableProps={{
+						className: "table table-striped table-border-top",
+						hideFilterInput:true,
+						defaultSort: columns.qValue.name,
+					}}
 				/>
 				<button className={styles.selectButton} onClick={() => this.props.onSelect(this.map_geneSymbol_selected)}>
 					Select
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 7d78f037c18..f40e188a2bf 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -50,7 +50,6 @@ export default class QueryContainer extends React.Component<{}, {}>
         if (error)
 			return <span className={styles.errorMessage}>{error.toString()}</span>;
 
-
         if (!this.store.cancerTypes.result.length || !this.store.cancerStudies.result.length)
             return <span>No data</span>;
 
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index 42d4d7a2bf2..f287d478401 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -3,6 +3,7 @@ import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
 import ReactSelect from 'react-select';
 import {observer} from "mobx-react";
+import {computed} from 'mobx';
 import {FlexCol} from "../flexbox/FlexBox";
 import {QueryStore} from "./QueryStore";
 
@@ -19,21 +20,27 @@ export default class SampleListSelector extends React.Component<{}, {}>
 		return queryStore;
 	}
 
+	@computed get sampleListOptions()
+	{
+		return [
+			...this.store.sampleLists.result.map(sampleList => {
+				return {
+					label: `${sampleList.name} (${sampleList.sampleCount})`,
+					value: sampleList.sampleListId
+				};
+			}),
+			{
+				label: 'User-defined Case List',
+				value: ''
+			}
+		];
+	}
+
 	render()
 	{
 		if (!this.store.singleSelectedStudyId)
 			return null;
 
-		let options = this.store.sampleLists.result.map(sampleList => {
-			return {
-				label: `${sampleList.name} (${sampleList.sampleCount})`,
-				value: sampleList.sampleListId
-			};
-		}).concat([{
-			label: 'User-defined Case List',
-			value: ''
-		}]);
-
 		const CaseIdsModeRadio = this.CaseIdsModeRadio;
 
 		return (
@@ -42,7 +49,7 @@ export default class SampleListSelector extends React.Component<{}, {}>
 				<ReactSelect
 					className={styles.ReactSelect}
 					value={this.store.selectedSampleListId}
-					options={options}
+					options={this.sampleListOptions}
 					onChange={option => this.store.selectedSampleListId = option ? option.value : undefined}
 				/>
 				<a href={`/study?id=${this.store.singleSelectedStudyId}`}>To build your own case set, try out our enhanced Study View.</a>
@@ -55,9 +62,7 @@ export default class SampleListSelector extends React.Component<{}, {}>
 							rows={6}
 							cols={80}
 							value={this.store.caseIds}
-							onChange={event => {
-								this.store.caseIds = (event.target as HTMLTextAreaElement).value;
-							}}
+							onChange={event => this.store.caseIds = event.currentTarget.value}
 						/>
 						<CaseIdsModeRadio label='By sample ID' state='sample'/>
 						<CaseIdsModeRadio label='By patient ID' state='patient'/>
@@ -67,20 +72,20 @@ export default class SampleListSelector extends React.Component<{}, {}>
 		);
 	}
 
-	CaseIdsModeRadio = observer((props: {label: string, state:QueryStore['caseIdsMode']}) =>
-	{
-		return (
-			<label>
+	CaseIdsModeRadio = observer(
+		(props: {label: string, state:QueryStore['caseIdsMode']}) => (
+			<label
+			>
 				<input
 					type="radio"
 					checked={this.store.caseIdsMode == props.state}
 					onChange={event => {
-						if ((event.target as HTMLInputElement).checked)
+						if (event.currentTarget.checked)
 							this.store.caseIdsMode = props.state;
 					}}
 				/>
 				{props.label}
 			</label>
-		);
-	});
+		)
+	);
 }

From 3d27f09df9cd8fe45cc91d37cac8e548ca61ee07 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Sat, 4 Mar 2017 00:25:36 -0500
Subject: [PATCH 074/133] simplifying code

---
 .../query/DataTypePrioritySelector.tsx        |   9 +-
 .../components/query/GisticGeneSelector.tsx   |  46 ++----
 .../components/query/MutSigGeneSelector.tsx   | 140 ++++++++----------
 .../components/query/SampleListSelector.tsx   |   6 +-
 .../components/query/styles.module.scss       |   2 +-
 5 files changed, 86 insertions(+), 117 deletions(-)

diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index acc8d538bc4..88e9961859d 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -24,13 +24,12 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 		if (this.store.singleSelectedStudyId)
 			return null;
 
-		const {DataTypePriorityRadio} = this;
 		return (
 			<FlexRow padded className={styles.DataTypePrioritySelector}>
 				<h2>Select Data Type Priority:</h2>
-				<DataTypePriorityRadio label='Mutation and CNA' state={{mutation: true, cna: true}}/>
-				<DataTypePriorityRadio label='Only Mutation' state={{mutation: true, cna: false}}/>
-				<DataTypePriorityRadio label='Only CNA' state={{mutation: false, cna: true}}/>
+				<this.DataTypePriorityRadio label='Mutation and CNA' state={{mutation: true, cna: true}}/>
+				<this.DataTypePriorityRadio label='Only Mutation' state={{mutation: true, cna: false}}/>
+				<this.DataTypePriorityRadio label='Only CNA' state={{mutation: false, cna: true}}/>
 			</FlexRow>
 		);
 	}
@@ -42,7 +41,7 @@ export default class DataTypePrioritySelector extends React.Component<{}, {}>
 					type="radio"
 					checked={_.isEqual(toJS(this.store.dataTypePriority), props.state)}
 					onChange={event => {
-						if ((event.target as HTMLInputElement).checked)
+						if (event.currentTarget.checked)
 							this.store.dataTypePriority = props.state;
 					}}
 				/>
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index 6ed2a7f3141..7fa80141ec2 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react';
 import * as styles_any from './styles.module.scss';
 import {ObservableMap, expr, toJS, computed, observable} from "mobx";
-import {observer} from "mobx-react";
+import {observer, Observer} from "mobx-react";
 import {Gistic} from "../../api/generated/CBioPortalAPIInternal";
 import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
-import {ITableHeaderControlsProps} from "../tableHeaderControls/TableHeaderControls";
-import {TableProps} from "reactable";
 import {IColumnFormatterData} from "../enhancedReactTable/IColumnFormatter";
 import {Td} from "reactable";
 import classNames from "../../lib/classNames";
@@ -17,7 +15,7 @@ const styles = styles_any as {
 	GisticGeneSelector: string,
 	gisticTable: string,
 	GisticGeneToggles: string,
-	GeneToggle: string,
+	geneToggle: string,
 	selected: string,
 	notSelected: string,
 	simulateHovered: string,
@@ -32,9 +30,7 @@ const styles = styles_any as {
 
 const DEFAULT_NUM_GENES_SHOWN = 5;
 
-class GisticTable extends EnhancedReactTable<Gistic>
-{
-}
+class GisticTable extends EnhancedReactTable<Gistic> { }
 
 export interface GisticGeneSelectorProps
 {
@@ -136,7 +132,7 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 			<div className={styles.GisticGeneSelector}>
 				<span>
 					{'Click on a gene to '}
-					<span className={classNames(styles.GeneToggle, styles.selected, styles.simulateHovered)}>
+					<span className={classNames(styles.geneToggle, styles.selected, styles.simulateHovered)}>
 						{'select'}
 					</span>
 					{' it.'}
@@ -177,11 +173,18 @@ class GisticGeneToggles extends React.Component<{gistic?: Gistic, map_geneSymbol
 	renderGeneToggles(genes: string[])
 	{
 		return genes.map(gene => (
-			<GeneToggle
-				key={gene}
-				map_geneSymbol_selected={this.props.map_geneSymbol_selected}
-				geneSymbol={gene}
-			/>
+			<Observer children={() => {
+				let selected = !!this.props.map_geneSymbol_selected.get(gene);
+				return (
+					<span
+						key={gene}
+						className={classNames(styles.geneToggle, selected ? styles.selected : styles.notSelected)}
+						onClick={event => this.props.map_geneSymbol_selected.set(gene, !selected)}
+					>
+						{gene}
+					</span>
+				);
+			}}/>
 		));
 	}
 
@@ -207,20 +210,3 @@ class GisticGeneToggles extends React.Component<{gistic?: Gistic, map_geneSymbol
 		);
 	}
 }
-
-@observer
-class GeneToggle extends React.Component<{map_geneSymbol_selected: ObservableMap<boolean>, geneSymbol: string}, {}>
-{
-	render()
-	{
-		let selected = !!this.props.map_geneSymbol_selected.get(this.props.geneSymbol);
-		return (
-			<span
-				className={classNames(styles.GeneToggle, selected ? styles.selected : styles.notSelected)}
-				onClick={event => this.props.map_geneSymbol_selected.set(this.props.geneSymbol, !selected)}
-			>
-				{this.props.geneSymbol}
-			</span>
-		);
-	}
-}
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index 970940059c2..b44098e7d2a 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -3,13 +3,12 @@ import * as React from 'react';
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import * as styles_any from './styles.module.scss';
 import {action, ObservableMap, expr, toJS, computed, observable} from "mobx";
-import {observer} from "mobx-react";
+import {observer, Observer} from "mobx-react";
 import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
 import {MutSig} from "../../api/generated/CBioPortalAPIInternal";
 import {IColumnFormatterData} from "../enhancedReactTable/IColumnFormatter";
-import {IColumnDefMap, IEnhancedReactTableProps} from "../enhancedReactTable/IEnhancedReactTableProps";
-import {ITableHeaderControlsProps} from "../tableHeaderControls/TableHeaderControls";
-import {Table, Td, TableProps} from 'reactable';
+import {IColumnDefMap} from "../enhancedReactTable/IEnhancedReactTableProps";
+import {Td} from 'reactable';
 import {toPrecision} from "../../lib/FormatUtils";
 
 const styles = styles_any as {
@@ -55,70 +54,75 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 			this.map_geneSymbol_selected.set(gene, selected);
 	}
 
-	render()
-	{
-		let columns:IColumnDefMap = {
-			'hugoGeneSymbol': {
-				priority: 1,
-				dataField: 'hugoGeneSymbol',
-				name: "Gene Symbol",
-				sortable: true,
-				filterable: true,
-			},
-			'numberOfMutations': {
-				priority: 2,
-				dataField: 'numberOfMutations',
-				name: "Num Mutations",
-				sortable: true,
-				filterable: true,
-			},
-			'qValue': {
-				priority: 3,
-				dataField: 'qValue',
-				name: "Q-Value",
-				sortable: true,
-				filterable: true,
-				formatter: ({name, columnData: value}: IColumnFormatterData<MutSig>) => (
-					<Td key={name} column={name} value={value}>
-						{toPrecision(value, 2, 0.1)}
-					</Td>
-				),
-			},
-			'selected': {
-				name: "Selected",
-				priority: 4,
-				header: (
-					<div className={styles.selectionColumnHeader}>
-						<span>All</span>
+	private columns:IColumnDefMap = {
+		'hugoGeneSymbol': {
+			priority: 1,
+			dataField: 'hugoGeneSymbol',
+			name: "Gene Symbol",
+			sortable: true,
+			filterable: true,
+		},
+		'numberOfMutations': {
+			priority: 2,
+			dataField: 'numberOfMutations',
+			name: "Num Mutations",
+			sortable: true,
+			filterable: true,
+		},
+		'qValue': {
+			priority: 3,
+			dataField: 'qValue',
+			name: "Q-Value",
+			sortable: true,
+			filterable: true,
+			formatter: ({name, columnData: value}: IColumnFormatterData<MutSig>) => (
+				<Td key={name} column={name} value={value}>
+					{toPrecision(value, 2, 0.1)}
+				</Td>
+			),
+		},
+		'selected': {
+			name: "Selected",
+			priority: 4,
+			sortable: false,
+			filterable: false,
+			header: (
+				<div className={styles.selectionColumnHeader}>
+					<span>All</span>
+					<Observer children={() => (
 						<LabeledCheckbox
 							checked={this.selectedGenes.length > 0}
 							indeterminate={this.selectedGenes.length > 0 && this.selectedGenes.length < this.allGenes.length}
-							inputProps={{
-								onChange: event => this.selectAll((event.target as HTMLInputElement).checked)
-							}}
+							onChange={event => this.selectAll(event.target.checked)}
 						/>
-					</div>
-				),
-				formatter: ({name, rowData: mutSig}:IColumnFormatterData<MutSig>) => (
-					<Td key={name} column={name}>
-						{!!(mutSig) && (
-							<div className={styles.selectionColumnCell}>
-								<ObservableMapCheckbox map={this.map_geneSymbol_selected} mapKey={mutSig.hugoGeneSymbol}/>
-							</div>
-						)}
-					</Td>
-				),
-				sortable: false,
-				filterable: false,
-			},
-		};
+					)}/>
+				</div>
+			),
+			formatter: ({name, rowData: mutSig}:IColumnFormatterData<MutSig>) => (
+				<Td key={name} column={name}>
+					{!!(mutSig) && (
+						<div className={styles.selectionColumnCell}>
+							<Observer children={() => (
+								<LabeledCheckbox
+									checked={!!this.map_geneSymbol_selected.get(mutSig.hugoGeneSymbol)}
+									onChange={event => this.map_geneSymbol_selected.set(mutSig.hugoGeneSymbol, event.target.checked)}
+								/>
+							)}/>
+						</div>
+					)}
+				</Td>
+			),
+		},
+	};
 
+	render()
+	{
 		return (
 			<div className={styles.MutSigGeneSelector}>
 				<MutSigTable
 					itemsName="genes"
 					initItemsPerPage={10}
-					columns={columns}
+					columns={this.columns}
 					rawData={this.props.data}
 					headerControlsProps={{
 						showCopyAndDownload: false,
@@ -128,7 +132,7 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 					reactTableProps={{
 						className: "table table-striped table-border-top",
 						hideFilterInput:true,
-						defaultSort: columns.qValue.name,
+						defaultSort: this.columns.qValue.name,
 					}}
 				/>
 				<button className={styles.selectButton} onClick={() => this.props.onSelect(this.map_geneSymbol_selected)}>
@@ -138,21 +142,3 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 		);
 	}
 }
-
-@observer
-class ObservableMapCheckbox extends React.Component<{map:ObservableMap<boolean>, mapKey:string, children?: React.ReactNode}, {}>
-{
-	render()
-	{
-		return (
-			<LabeledCheckbox
-				checked={!!this.props.map.get(this.props.mapKey)}
-				inputProps={{
-					onChange: event => this.props.map.set(this.props.mapKey, (event.target as HTMLInputElement).checked)
-				}}
-			>
-				{this.props.children}
-			</LabeledCheckbox>
-		);
-	}
-}
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index f287d478401..39059bc92f7 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -41,8 +41,6 @@ export default class SampleListSelector extends React.Component<{}, {}>
 		if (!this.store.singleSelectedStudyId)
 			return null;
 
-		const CaseIdsModeRadio = this.CaseIdsModeRadio;
-
 		return (
 			<div className={styles.SampleListSelector}>
 				<h2>Select Patient/Case Set:</h2>
@@ -64,8 +62,8 @@ export default class SampleListSelector extends React.Component<{}, {}>
 							value={this.store.caseIds}
 							onChange={event => this.store.caseIds = event.currentTarget.value}
 						/>
-						<CaseIdsModeRadio label='By sample ID' state='sample'/>
-						<CaseIdsModeRadio label='By patient ID' state='patient'/>
+						<this.CaseIdsModeRadio label='By sample ID' state='sample'/>
+						<this.CaseIdsModeRadio label='By patient ID' state='patient'/>
 					</FlexCol>
 				)}
 			</div>
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 4db3743e4f4..5a7d923e43c 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -450,7 +450,7 @@ div.GisticGeneSelectorWindow {
       align-items: center;
     }
 
-    span.GeneToggle {
+    span.geneToggle {
       padding: 3px;
 
       &:not(.simulateHovered) {

From b3ea7f4da1028f8084ba39d5e3d89262ff87846b Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 9 Mar 2017 00:44:12 -0500
Subject: [PATCH 075/133] add download tab

---
 package.json                                  |   1 +
 src/pages/home/HomePage.tsx                   |   6 +-
 .../components/StudyList/StudyListLogic.ts    |  20 +-
 .../components/asyncStatus/AsyncStatus.tsx    |  16 +-
 .../components/query/CancerStudySelector.tsx  |  39 ++--
 .../components/query/GeneSetSelector.tsx      |   3 +-
 .../query/GeneticProfileSelector.tsx          | 150 ++++++------
 .../components/query/QueryAndDownloadTabs.tsx |  46 ++++
 .../components/query/QueryContainer.tsx       |  48 ++--
 src/shared/components/query/QueryStore.ts     |  86 +++++--
 .../components/query/SampleListSelector.tsx   |   4 +-
 src/shared/components/query/send-to-gs.png    | Bin 0 -> 7788 bytes
 .../components/query/styles.module.scss       |  86 ++++---
 src/shared/lib/memoize.ts                     | 221 ------------------
 14 files changed, 336 insertions(+), 390 deletions(-)
 create mode 100644 src/shared/components/query/QueryAndDownloadTabs.tsx
 create mode 100644 src/shared/components/query/send-to-gs.png
 delete mode 100644 src/shared/lib/memoize.ts

diff --git a/package.json b/package.json
index 87875401d4d..7969715a8e7 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
     "less": "^2.7.2",
     "lodash": "^4.17.4",
     "lolex": "^1.6.0",
+    "memoize-weak-decorator": "^1.0.3",
     "mobx": "^3.1.7",
     "mobx-react": "^4.1.3",
     "mobx-react-devtools": "^4.2.11",
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index b42e71b8d20..fbf14a8f21c 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import exposeComponentRenderer from 'shared/lib/exposeComponentRenderer';
-import QueryContainer from "../../shared/components/query/QueryContainer";
 import * as styles_any from './styles.module.scss';
 import {FlexCol, FlexRow} from "../../shared/components/flexbox/FlexBox";
 import devMode from "../../shared/lib/devMode";
@@ -11,6 +10,7 @@ import queryStore from "../../shared/components/query/QueryStore";
 import LabeledCheckbox from "../../shared/components/labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
 import 'react-select/dist/react-select.css';
+import QueryAndDownloadTabs from "../../shared/components/query/QueryAndDownloadTabs";
 
 function getRootElement()
 {
@@ -49,7 +49,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 
 	exposeComponentRenderersToParentScript()
 	{
-		exposeComponentRenderer('renderQueryContainer', QueryContainer);
+		exposeComponentRenderer('renderQueryContainer', QueryAndDownloadTabs);
 	}
 
 	public render()
@@ -57,7 +57,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 		return (
 			<FlexRow padded flex={1} className={styles.HomePage}>
 
-				<QueryContainer/>
+				<QueryAndDownloadTabs/>
 
 				{!!(devMode.enabled) && (
 					<FlexCol padded overflow>
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 19c75d1e342..e55b4cbe193 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import {CancerTreeNode} from "../query/CancerStudyTreeData";
 import {NodeMetadata} from "../query/CancerStudyTreeData";
 import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioPortalAPI";
-import memoize from "../../lib/memoize";
+import memoize from "memoize-weak-decorator";
 import {QueryStore} from "../query/QueryStore";
 import {computed, action} from "mobx";
 
@@ -185,11 +185,21 @@ export default class StudyListLogic
 	{
 		let clickedStudyIds:string[];
 		let meta = this.getMetadata(node);
-		if (meta.isCancerType)
-			clickedStudyIds = this.getDescendantCancerStudies(node).map(study => study.studyId);
+
+		if (this.store.forDownloadTab)
+		{
+			// on download tab, we can only select one study
+			if (!meta.isCancerType)
+				this.store.selectedStudyIds = [(node as CancerStudy).studyId];
+		}
 		else
-			clickedStudyIds = [(node as CancerStudy).studyId];
-		this.handleCheckboxStudyIds(clickedStudyIds, checked);
+		{
+			if (meta.isCancerType)
+				clickedStudyIds = this.getDescendantCancerStudies(node).map(study => study.studyId);
+			else
+				clickedStudyIds = [(node as CancerStudy).studyId];
+			this.handleCheckboxStudyIds(clickedStudyIds, checked);
+		}
 	}
 
 	private handleCheckboxStudyIds(clickedStudyIds:string[], checked:boolean)
diff --git a/src/shared/components/asyncStatus/AsyncStatus.tsx b/src/shared/components/asyncStatus/AsyncStatus.tsx
index d6851476452..3cd742bfe3f 100644
--- a/src/shared/components/asyncStatus/AsyncStatus.tsx
+++ b/src/shared/components/asyncStatus/AsyncStatus.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Spinner from 'react-spinkit';
-import {MobxPromiseUnionType, MobxPromiseUnionTypeWithDefault} from "../../api/MobxPromise";
+import MobxPromise from "mobxpromise";
 import {observer} from "mobx-react";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
@@ -16,16 +16,21 @@ const styles = styles_any as {
 
 interface IAsyncStatusProps extends React.HTMLProps<HTMLDivElement>
 {
-	promise: MobxPromiseUnionType<any> | MobxPromiseUnionTypeWithDefault<any>;
+	promise: MobxPromise<any> | Array<MobxPromise<any>>;
 }
 
 @observer
 export default class AsyncStatus extends React.Component<IAsyncStatusProps, {}>
 {
+	private readonly promise = new MobxPromise({
+		await: () => Array.isArray(this.props.promise) ? this.props.promise : [this.props.promise],
+		invoke: async () => null
+	});
+
 	render()
 	{
 		let {promise, children, className, ...divProps} = this.props;
-		switch (promise.status)
+		switch (this.promise.status)
 		{
 			case 'pending':
 				return (
@@ -37,7 +42,7 @@ export default class AsyncStatus extends React.Component<IAsyncStatusProps, {}>
 				return (
 					<div className={classNames(className, styles.error)} {...divProps}>
 						<FontAwesome className={styles.icon} name='exclamation-triangle'/>
-						<span className={styles.message}>{promise.error.toString()}</span>
+						<span className={styles.message}>{this.promise.error + ''}</span>
 					</div>
 				);
 			case 'complete':
@@ -48,6 +53,9 @@ export default class AsyncStatus extends React.Component<IAsyncStatusProps, {}>
 						</div>
 					);
 				return null;
+
+			default:
+				return null;
 		}
 	}
 }
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 3693ab96424..e3ec7c70c04 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -11,7 +11,8 @@ import StudyList from "../StudyList/StudyList";
 import {observer} from "mobx-react";
 import queryStore from "./QueryStore";
 import {action, toJS, computed} from "mobx";
-import memoize from "../../lib/memoize";
+import memoize from "memoize-weak-decorator";
+import AsyncStatus from "../asyncStatus/AsyncStatus";
 
 const styles = styles_any as {
 	CancerStudySelector: string,
@@ -20,6 +21,7 @@ const styles = styles_any as {
 	selected: string,
 	selectAll: string,
 	selectedCount: string,
+	noData: string,
 	selectionsExist: string,
 	cancerStudyName: string,
 	cancerStudySamples: string,
@@ -83,7 +85,6 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 	renderCancerTypeListItem = (cancerType:CancerType, arrayIndex:number) =>
 	{
 		let logic = this.store.studyListLogic;
-		let meta = logic.getMetadata(cancerType);
 		let numStudies = logic.getDescendantCancerStudies(cancerType).length;
 
 		if (!numStudies)
@@ -131,11 +132,9 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 				labelProps={{
 					onClick: (event:React.MouseEvent<HTMLLabelElement>) => event.stopPropagation()
 				}}
-				inputProps={{
-					onChange: event => {
-						let shownStudyIds = shownStudies.map(study => study.studyId);
-						this.handleStudiesCheckbox(event, shownStudyIds);
-					}
+				onChange={event => {
+					let shownStudyIds = shownStudies.map(study => study.studyId);
+					this.handleStudiesCheckbox(event, shownStudyIds);
 				}}
 			/>
 		);
@@ -162,16 +161,22 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 			<FlexCol overflow className={styles.CancerStudySelector}>
 				<FlexRow padded overflow className={styles.selectCancerStudyRow}>
 					<h2>Select Studies:</h2>
-					<span 
-						onClick={() => {
-							if (this.store.selectedStudyIds.length)
-								this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly;
-						}}
-						className={selectedCountClass}
-					>
-						<b> {this.store.selectedStudyIds.length}</b> Studies Selected
-						(<b>{this.store.selectedStudies_totalSampleCount}</b> Samples)
-					</span>
+					<AsyncStatus promise={[this.store.cancerTypes, this.store.cancerStudies]}>
+						{!!(this.store.cancerTypes.result.length && this.store.cancerStudies.result.length) ? (
+							<span
+								onClick={() => {
+									if (this.store.selectedStudyIds.length)
+										this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly;
+								}}
+								className={selectedCountClass}
+							>
+								<b>{this.store.selectedStudyIds.length}</b> Studies Selected
+								(<b>{this.store.selectedStudies_totalSampleCount}</b> Samples)
+							</span>
+						) : (
+				            <span className={styles.noData}>No data</span>
+						)}
+					</AsyncStatus>
 				</FlexRow>
 
 				<FlexRow overflow className={styles.cancerStudySelectorHeader}>
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 7e24d6e2393..fb72f0efcef 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -13,6 +13,7 @@ import AsyncStatus from "../asyncStatus/AsyncStatus";
 const styles = styles_any as {
 	GeneSetSelector: string,
 	ReactSelect: string,
+	buttonRow: string,
 	geneSet: string,
 	empty: string,
 	notEmpty: string,
@@ -59,7 +60,7 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 					onChange={option => this.store.geneQuery = option ? option.value : ''}
 				/>
 
-				<FlexRow padded>
+				<FlexRow padded className={styles.buttonRow}>
 					<AsyncStatus promise={this.store.mutSigForSingleStudy}>
 						{!!(this.store.mutSigForSingleStudy.result.length) && (
 							<button onClick={() => this.store.showMutSigPopup = true}>
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 74f0c7c42be..0ca59af1914 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -5,15 +5,19 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import queryStore from "./QueryStore";
+import {action} from 'mobx';
 import {observer} from "mobx-react";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
+import classNames from "../../lib/classNames";
+import {FlexCol} from "../flexbox/FlexBox";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
-	singleCheckbox: string,
-	groupCheckbox: string,
-	radioGroup: string,
-	radioItem: string,
+	group: string,
+	altType: string,
+	radio: string,
+	checkbox: string,
+	infoIcon: string,
 	zScore: string,
 	groupName: string,
 	profileName: string,
@@ -33,93 +37,97 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 			return null;
 
 		return (
-			<div className={styles.GeneticProfileSelector}>
+			<FlexCol padded className={styles.GeneticProfileSelector}>
 				<h2>Select Genomic Profiles:</h2>
-				<AsyncStatus promise={this.store.geneticProfiles}>
-					{[
-						this.renderGroup("MUTATION_EXTENDED", "Mutation"),
-						this.renderGroup("COPY_NUMBER_ALTERATION", "Copy Number"),
-						this.renderGroup("MRNA_EXPRESSION", "mRNA Expression"),
-						this.renderGroup("METHYLATION", "DNA Methylation"),
-						this.renderGroup("METHYLATION_BINARY", "DNA Methylation"),
-						this.renderGroup("PROTEIN_LEVEL", "Protein/phosphoprotein level"),
-					]}
+				<AsyncStatus className={styles.group} promise={this.store.geneticProfiles}>
+					{this.renderGroup("MUTATION_EXTENDED", "Mutation")}
+					{this.renderGroup("COPY_NUMBER_ALTERATION", "Copy Number")}
+					{this.renderGroup("MRNA_EXPRESSION", "mRNA Expression")}
+					{this.renderGroup("METHYLATION", "DNA Methylation")}
+					{this.renderGroup("METHYLATION_BINARY", "DNA Methylation")}
+					{this.renderGroup("PROTEIN_LEVEL", "Protein/phosphoprotein level")}
 					{!!(!this.store.geneticProfiles.result.length) && (
 						<strong>No Genomic Profiles available for this Cancer Study</strong>
 					)}
 				</AsyncStatus>
-			</div>
+			</FlexCol>
 		);
 	}
 
+	ProfileToggle = ({profile, type, label, checked, isGroupToggle}: {
+		profile:GeneticProfile,
+		type:'radio' | 'checkbox',
+		label:string,
+		checked:boolean,
+		isGroupToggle:boolean
+	}) => (
+		<label
+			className={classNames({
+				[styles.altType]: isGroupToggle,
+				[styles.radio]: type === 'radio',
+				[styles.checkbox]: type === 'checkbox',
+			})}
+		>
+			<input
+				type={type}
+				checked={checked}
+				onChange={event => this.store.selectGeneticProfile(profile, (event.target as HTMLInputElement).checked)}
+			/>
+			<span className={isGroupToggle ? styles.groupName : styles.profileName}>
+				{label}
+			</span>
+			{!isGroupToggle && (
+				<FontAwesome className={styles.infoIcon} name='question-circle' {...{title: profile.description}}/>
+			)}
+		</label>
+	);
+
 	renderGroup(geneticAlterationType:GeneticProfile['geneticAlterationType'], groupLabel:string)
 	{
 		let profiles = this.store.getFilteredProfiles(geneticAlterationType);
 		if (!profiles.length)
 			return null;
 
-		let ids = profiles.map(profile => profile.geneticProfileId);
-		let checked = _.intersection(this.store.selectedProfileIds, ids).length > 0;
-		let label;
-		if (profiles.length == 1)
-			label = profiles[0].name;
-		else
-			label = `${groupLabel}. Select one of the profiles below:`;
+		let groupProfileIds = profiles.map(profile => profile.geneticProfileId);
+		let groupIsSelected = _.intersection(this.store.selectedProfileIds, groupProfileIds).length > 0;
+		let output:JSX.Element[] = [];
 
-		let output = [];
-		output.push(
-			<div key={output.length} className={profiles.length > 1 ? styles.groupCheckbox : styles.singleCheckbox}>
-				<LabeledCheckbox
-					checked={checked}
-					inputProps={{
-						onChange: event => {
-							this.store.selectedProfileIds = (
-								(event.target as HTMLInputElement).checked
-								?   _.union(this.store.selectedProfileIds, [ids[0]])
-								:   _.difference(this.store.selectedProfileIds, ids)
-							);
-						}
-					}}
-				>
-					<span className={profiles.length > 1 ? styles.groupName : styles.profileName}>{label}</span>
-					{!!(profiles.length == 1) && (
-						<FontAwesome name='question-circle' {...{title: profiles[0].description}}/>
-					)}
-				</LabeledCheckbox>
+		if (profiles.length > 1 && !this.store.forDownloadTab)
+			output.push(
+				<this.ProfileToggle
+					key={'altTypeCheckbox:' + geneticAlterationType}
+					profile={profiles[0]}
+					type='checkbox'
+					label={`${groupLabel}. Select one of the profiles below:`}
+					checked={groupIsSelected}
+					isGroupToggle={true}
+				/>
+			);
 
-			</div>
-		);
+		let profileToggles = profiles.map(profile => (
+			<this.ProfileToggle
+				key={'profile:' + profile.geneticProfileId}
+				profile={profile}
+				type={this.store.forDownloadTab || profiles.length > 1 ? 'radio' : 'checkbox'}
+				label={profile.name}
+				checked={_.includes(this.store.selectedProfileIds, profile.geneticProfileId)}
+				isGroupToggle={false}
+			/>
+		));
 
-		if (profiles.length > 1)
-		{
+		if (this.store.forDownloadTab || profiles.length == 1)
+			output.push(...profileToggles);
+		else
 			output.push(
-				<div key={output.length} className={styles.radioGroup}>
-					{profiles.map((profile, profileIndex) => (
-						<div key={profileIndex} className={styles.radioItem}>
-							<label>
-								<input
-									type='radio'
-									checked={_.includes(this.store.selectedProfileIds, profile.geneticProfileId)}
-									onChange={event => {
-										if ((event.target as HTMLInputElement).checked)
-											this.store.selectedProfileIds = (
-												_.union(
-													_.difference(this.store.selectedProfileIds, ids),
-													[profile.geneticProfileId]
-												)
-											);
-									}}
-								/>
-								<span className={styles.profileName}>{profile.name}</span>
-								<FontAwesome name='question-circle' {...{title: profile.description}}/>
-							</label>
-						</div>
-					))}
+				<div key={'group:' + geneticAlterationType} className={styles.group}>
+					{profileToggles}
 				</div>
 			);
-		}
 
-		if (checked && geneticAlterationType == 'MRNA_EXPRESSION')
+		if (this.store.forDownloadTab)
+			return output;
+
+		if (groupIsSelected && geneticAlterationType == 'MRNA_EXPRESSION')
 		{
 			output.push(
 				<div key={output.length} className={styles.zScore}>
@@ -135,7 +143,7 @@ export default class GeneticProfileSelector extends React.Component<{}, {}>
 			);
 		}
 
-		if (checked && geneticAlterationType == 'PROTEIN_LEVEL')
+		if (groupIsSelected && geneticAlterationType == 'PROTEIN_LEVEL')
 		{
 			output.push(
 				<div key={output.length} className={styles.zScore}>
diff --git a/src/shared/components/query/QueryAndDownloadTabs.tsx b/src/shared/components/query/QueryAndDownloadTabs.tsx
new file mode 100644
index 00000000000..355c651e3f9
--- /dev/null
+++ b/src/shared/components/query/QueryAndDownloadTabs.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import queryStore from "./QueryStore";
+import {Tabs, Tab, default as ReactBootstrap} from 'react-bootstrap';
+import * as styles_any from './styles.module.scss';
+import {observer} from 'mobx-react';
+import QueryContainer from "./QueryContainer";
+
+const styles = styles_any as {
+	QueryAndDownloadTabs: string,
+};
+
+interface IQueryAndDownloadTabsProps
+{
+}
+
+@observer
+export default class QueryAndDownloadTabs extends React.Component<IQueryAndDownloadTabsProps, {}>
+{
+	get store()
+	{
+		return queryStore;
+	}
+
+	onSelectTab = (eventKey:string) =>
+	{
+		this.store.forDownloadTab = eventKey === 'download';
+	}
+
+	render()
+	{
+		return (
+			<div className={styles.QueryAndDownloadTabs}>
+				<Tabs
+					id='QueryAndDownloadTabs'
+					animation={false}
+					activeKey={this.store.forDownloadTab ? 'download' : 'query'}
+					onSelect={this.onSelectTab as ReactBootstrap.SelectCallback}
+				>
+					<Tab eventKey='query' title="Query"/>
+					<Tab eventKey='download' title="Download Data"/>
+				</Tabs>
+				<QueryContainer/>
+			</div>
+		);
+	}
+}
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index f40e188a2bf..59ae8eb922d 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -1,12 +1,9 @@
 import * as _ from "lodash";
 import * as React from "react";
-import * as ReactBootstrap from 'react-bootstrap';
 import Spinner from "react-spinkit";
 import Dictionary = _.Dictionary;
 import CancerStudySelector from "./CancerStudySelector";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
-import Radio = ReactBootstrap.Radio;
-import Checkbox = ReactBootstrap.Checkbox;
 import * as styles_any from './styles.module.scss';
 import GeneticProfileSelector from "./GeneticProfileSelector";
 import {observer} from "mobx-react";
@@ -17,13 +14,19 @@ import SampleListSelector from "./SampleListSelector";
 import MutSigGeneSelector from "./MutSigGeneSelector";
 import GisticGeneSelector from "./GisticGeneSelector";
 import PopupWindow from "../popupWindow/PopupWindow";
+import AsyncStatus from "../asyncStatus/AsyncStatus";
+import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 
 const styles = styles_any as {
-	QueryContainerParent: string,
 	QueryContainer: string,
+	queryContainerContent: string,
 	MutSigGeneSelectorWindow: string,
 	GisticGeneSelectorWindow: string,
-	SubmitButton: string,
+	downloadSubmitExplanation: string,
+	transposeDataMatrix: string,
+	submitRow: string,
+	submit: string,
+	genomeSpace: string,
 	errorMessage: string,
 };
 
@@ -37,9 +40,6 @@ export default class QueryContainer extends React.Component<{}, {}>
 
     render():JSX.Element
     {
-        if (this.store.cancerTypes.isPending || this.store.cancerStudies.isPending)
-            return <Spinner/>;
-
         let error = this.store.cancerTypes.error
         	|| this.store.cancerStudies.error
         	|| this.store.geneticProfiles.error
@@ -50,9 +50,6 @@ export default class QueryContainer extends React.Component<{}, {}>
         if (error)
 			return <span className={styles.errorMessage}>{error.toString()}</span>;
 
-        if (!this.store.cancerTypes.result.length || !this.store.cancerStudies.result.length)
-            return <span>No data</span>;
-
         return (
 			<FlexCol padded overflow className={styles.QueryContainer}>
 				<CancerStudySelector/>
@@ -105,9 +102,32 @@ export default class QueryContainer extends React.Component<{}, {}>
 					</PopupWindow>
 				)}
 
-				<button className={styles.SubmitButton}>
-					Submit
-				</button>
+				{!!(this.store.forDownloadTab) && (
+					<span className={styles.downloadSubmitExplanation}>
+						Clicking submit will generate a tab-delimited file containing your requested data.
+					</span>
+				)}
+
+				{!!(this.store.forDownloadTab) && (
+					<LabeledCheckbox
+						labelProps={{className: styles.transposeDataMatrix}}
+						checked={this.store.transposeDataMatrix}
+						onChange={event => this.store.transposeDataMatrix = event.currentTarget.checked}
+					>
+						Transpose data matrix
+					</LabeledCheckbox>
+				)}
+
+				<FlexRow padded className={styles.submitRow}>
+					<button className={styles.submit}>
+						Submit
+					</button>
+					{!!(this.store.forDownloadTab) && (
+						<button className={styles.genomeSpace}>
+							Send to GenomeSpace
+						</button>
+					)}
+				</FlexRow>
 			</FlexCol>
         );
     }
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 9881921704d..0c1405e5b4e 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -5,11 +5,11 @@ import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gen
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
-import {labelMobxPromises} from "../../api/MobxPromise";
+import {labelMobxPromises, cached} from "mobxpromise";
 import internalClient from "../../api/cbioportalInternalClientInstance";
 import oql_parser from "../../lib/oql/oql-parser";
 import {SyntaxError} from "../../lib/oql/oql-parser";
-import memoize from "../../lib/memoize";
+import memoize from "memoize-weak-decorator";
 import debounceAsync from "../../lib/debounceAsync";
 import AppConfig from 'appConfig';
 
@@ -56,6 +56,8 @@ export class QueryStore
 
 	@observable forDownloadTab:boolean = false;
 
+	@observable transposeDataMatrix = false;
+
 	@observable searchText:string = '';
 
 	@observable.ref selectedStudyIds:ReadonlyArray<string> = [];
@@ -66,26 +68,37 @@ export class QueryStore
 	@observable.ref private _selectedProfileIds?:ReadonlyArray<string> = undefined; // user selection
 	@computed get selectedProfileIds():ReadonlyArray<string>
 	{
-		if (this._selectedProfileIds !== undefined)
-			return this._selectedProfileIds;
+		let selectedIds;
 
-		// compute default selection
-		const altTypes:GeneticProfile['geneticAlterationType'][] = [
-			'MUTATION_EXTENDED',
-			'COPY_NUMBER_ALTERATION',
-		];
-		let ids = [];
-		for (let altType of altTypes)
+		if (this._selectedProfileIds !== undefined)
 		{
-			let profiles = this.getFilteredProfiles(altType);
-			if (profiles.length)
-				ids.push(profiles[0].geneticProfileId);
+			selectedIds = this._selectedProfileIds;
 		}
-		return ids;
-	}
-	set selectedProfileIds(value:ReadonlyArray<string>)
-	{
-		this._selectedProfileIds = value;
+		else
+		{
+			// compute default selection
+			const altTypes:GeneticProfile['geneticAlterationType'][] = [
+				'MUTATION_EXTENDED',
+				'COPY_NUMBER_ALTERATION',
+			];
+			selectedIds = [];
+			for (let altType of altTypes)
+			{
+				let profiles = this.getFilteredProfiles(altType);
+				if (profiles.length)
+					selectedIds.push(profiles[0].geneticProfileId);
+			}
+		}
+
+		// download tab only allows one selected profile
+		if (this.forDownloadTab)
+			return selectedIds.slice(0, 1);
+
+		// query tab only allows selecting profiles with showProfileInAnalysisTab=true
+		return selectedIds.filter(id => {
+			let profile = this.dict_geneticProfileId_geneticProfile[id];
+			return profile && profile.showProfileInAnalysisTab;
+		});
 	}
 
 	@observable zScoreThreshold:string = '2.0';
@@ -158,7 +171,6 @@ export class QueryStore
 
 	@observable geneQuery = '';
 
-
 	////////////////////////////////////////////////////////////////////////////////
 	// VISUAL OPTIONS
 	////////////////////////////////////////////////////////////////////////////////
@@ -169,9 +181,18 @@ export class QueryStore
 	@observable priorityStudies = AppConfig.priorityStudies;
 	@observable showSelectedStudiesOnly:boolean = false;
 	@observable.shallow selectedCancerTypeIds:string[] = [];
-	@observable maxTreeDepth:number = 3;
 	@observable clickAgainToDeselectSingle:boolean = true;
 
+	@observable private _maxTreeDepth:number = 3;
+	@computed get maxTreeDepth()
+	{
+		return this.forDownloadTab ? 1 : this._maxTreeDepth;
+	}
+	set maxTreeDepth(value)
+	{
+		this._maxTreeDepth = value;
+	}
+
 
 	////////////////////////////////////////////////////////////////////////////////
 	// REMOTE DATA
@@ -288,7 +309,7 @@ export class QueryStore
 
 	// CANCER STUDY
 
-	@computed get treeData()
+	@cached get treeData()
 	{
 		return new CancerStudyTreeData({
 			cancerTypes: this.cancerTypes.result,
@@ -297,7 +318,7 @@ export class QueryStore
 		});
 	}
 
-	@computed get studyListLogic()
+	@cached get studyListLogic()
 	{
 		// temporary hack - dependencies
 		// TODO review StudyListLogic code
@@ -418,6 +439,25 @@ export class QueryStore
 		}
 	}
 
+	@action selectGeneticProfile(profile:GeneticProfile, checked:boolean)
+	{
+		let groupProfiles = this.getFilteredProfiles(profile.geneticAlterationType);
+		let groupProfileIds = groupProfiles.map(profile => profile.geneticProfileId);
+		if (this.forDownloadTab)
+		{
+			// download tab only allows a single selection
+			this._selectedProfileIds = [profile.geneticProfileId];
+		}
+		else
+		{
+			let difference = _.difference(this.selectedProfileIds, groupProfileIds);
+			if (checked)
+				this._selectedProfileIds = _.union(difference, [profile.geneticProfileId]);
+			else
+				this._selectedProfileIds = difference;
+		}
+	}
+
 	@action replaceGene(oldSymbol:string, newSymbol:string)
 	{
 		this.geneQuery = normalizeQuery(this.geneQuery.toUpperCase().replace(new RegExp(`\\b${oldSymbol.toUpperCase()}\\b`, 'g'), () => newSymbol.toUpperCase()));
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index 39059bc92f7..d5393617110 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -42,7 +42,7 @@ export default class SampleListSelector extends React.Component<{}, {}>
 			return null;
 
 		return (
-			<div className={styles.SampleListSelector}>
+			<FlexCol padded overflow className={styles.SampleListSelector}>
 				<h2>Select Patient/Case Set:</h2>
 				<ReactSelect
 					className={styles.ReactSelect}
@@ -66,7 +66,7 @@ export default class SampleListSelector extends React.Component<{}, {}>
 						<this.CaseIdsModeRadio label='By patient ID' state='patient'/>
 					</FlexCol>
 				)}
-			</div>
+			</FlexCol>
 		);
 	}
 
diff --git a/src/shared/components/query/send-to-gs.png b/src/shared/components/query/send-to-gs.png
new file mode 100644
index 0000000000000000000000000000000000000000..75548d5426976750a4f1a7dd0d79eed2d7c7cda5
GIT binary patch
literal 7788
zcmV-y9+TmTP)<h;3K|Lk000e1NJLTq00310001Ef1^@s6s7B|F00009a7bBm000XU
z000XU0RWnu7ytkYPiaF#P*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-oy)XH-+^7Crag
z^g>IBfRsybQWXdwQbLP>6p<z>Aqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uh<iVD~V
z<RPMtgQJLw%KPDaqifc@_vX$1wbwr9tn;0-&j-K=43<bUQ8j=JsX`tR;Dg7+#^K~H
zK!FM*Z~zbpvt%K2{UZSY_<lS*D<Z%Lz5oGu(+dayz)hRLFdT>f59&ghTmgWD0l;*T
zI7<kC6aYYajzXpYKt=(8otP$50H6c_V9R4-;{Z@C0AMG7=F<Rxo%or10RUT+Ar%3j
zkpLhQWr#!oXgdI`&sK^>09Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p
z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-<?i
z0%4j!F2Z@488U%158(66005wo6%pWr^Zj_v4zAA5HjcIqUoGmt2LB>rV&neh&#Q1i
z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_<lS*MWK+n+1cgf
z<k(8YLR(?VSAG6x!e78w{cQPuJpA|d;J)G{fihizM+Erb!p!tcr5w+a34~(Y=8s4G
zw+sLL9n&JjNn*KJDiq^U5^;`1nvC-@r6P$!k}1U{(*I=Q-z@tBKHoI}uxdU5dyy@u
zU1J0GOD7Ombim^G008p4Z^6_k2m^p<gW=D2|L;HjN1!DDfM!XOaR2~bL?kX$%CkSm
z2mk;?pn)o|K^yeJ7%adB9Ki+L!3+FgHiSYX#KJ-lLJDMn9CBbOtb#%)hRv`YDqt_v
zKpix|QD}yfa1JiQRk#j4a1Z)n2%f<xynzV>LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW
zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_Ifq<Ex{*7`05XF7hP+2Hl!3BQJ=6@fL%FCo
z8iYoo3(#bAF`ADSpqtQgv>H8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X
zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ<AYmRsNLWl*PS{AOARHt#5!wki2?K;t
z!Y3k=s7tgax)J%r7-BLphge7~Bi0g+6E6^Zh(p9TBoc{3GAFr^0!gu?RMHaCM$&Fl
zBk3%un>0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4
z<uv66WtcKSRim0x-Ke2d5jBrmLam{;Qm;{ms1r1GnmNsb7D-E`t)i9F8fX`2_i3-_
zbh;7Ul^#x)&{xvS=|||7=mYe33=M`AgU5(xC>fg=2N-7=cNnjjOr{yriy6mMFgG#l
znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U
zt5vF<Q0r40Q)j6=sE4X&sBct1q<&fbi3VB2Ov6t@q*0);U*o*SAPZv|vv@2aYYnT0
zb%8a+Cb7-ge0D0knEf5Qi#@8Tp*ce{N;6lpQuCB%KL_KOarm5cP6_8Ir<e17iry6O
zDdH&`rZh~sF=bq9s+O0QSgS~@QL9Jmy*94xr=6y~MY~!1fet~(N+(<=M`w@D1)b+p
z*;C!83a1uLJv#NSE~;y#8=<>IcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya?
z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y
zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB
zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt
z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a<fJbF^|4I#xQ~n$Dc=
zKYhjYmgz5NSkDm8*fZm{6U!;YX`NG>(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C
z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB
zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe
zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0
z?2xS?_ve_-k<Mujg;0Lz*3buG=3$G&ehepthlN*$KaOySSQ^nWmo<0M+(UEUMEXRQ
zMBbZcF;6+KElM>iKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$
z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4
z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu
zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu
z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E
ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw
zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX
z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i&
z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01
z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R
z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw
zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD
zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3|
zawq-H%e&ckC+@AhPrP6BK<z=<L*0kfKU@CX*zeqbYQT4(^U>T#_XdT7&;F71j}Joy
zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z
zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot<a{81DF0~rvGr5Xr~8u`lav1h
z1DNytV>2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F}
z000x0Nkl<Zc-qvOX^>sVd7hu{v)%p9+&dcv7|eoY01yBH2mlF+q(lOwD3NAaVk}v4
zY*Df!+mRD1k;_h{;>uE$A9BjBRLPP{k!@Oz&7?%iDOrpR60${76iGl70g%LC8(;<)
z%!XO-ewJSHV<3u92uc8%65Ul@=f}Byy8FG~@_ui(sMYFRX#ubg_!n26YXHSR!WQWU
zQ?(P!HcwKCW-vCPFTaca;vVvT2OyZPYmUyuoLWq9gkYfHva#$k*ya*A0x7`0^)xOp
z3VajzbKnG5hKMVm7J=UfKKE_`MqGK?>lkCK=KS&tyfE`s=EL(i!pD&wSW9dgWW6HW
zN)K~(;cou+lA>WWX=i1w*nq+^kaGC+mK-~JJS5_$o?jq-4frZTC{e4`1K>Xczx!?g
z)0JTD$|fBFo)jo!f8yo@g40Xi;i-#%fU%agU=`(59|dp4;ij4|GuKKuI{!;tYV9NM
zE7oNMJK7xtFjm)$HZ`-M!4>e^n{wPUlt!7io>>Ti#KqVIW6i@YUHc!RR;%9zeDB?0
znT`<5HZ)^3#dKZM7D$FmF6ER%;EK1{pkOH+<I&TfL0ikZ!d~9D<}-9=22j@E2}vWK
z<4<0l;_Da6WZgMFyxQ>aw)Nyw0m>L00pm-GKOJfC>|8`!Ao+vcMFvaWHRlyVVvMGm
z%rM(HL#S$Yt~omF0v~%<xVwOJO9_8`yvEZDF;aj;urA~9$&DEf45X0~-fVxabok!X
zSFl(*(}UbM@cZ~~ik4~s;Cq6L)ifuTdvF}sT=*90;3&)Sf5dY)p-cq8s)EDs?I|$(
z-6hU9G=DqR;`h1&>al*)KT;w&xp;{0O@D>Ca13pg*xmWD{~&=|-VLBGg@!*mR^?b-
zvAg8)&|ro;dIA=e;R`40JU1DU@x)bQd`FP;B(bV9)fgv`mOEGd0>xAoM<{|T@0VMa
zZ(gW#cp>DLl4fiBWiB+1a%ARl>hU~*lfjh%5Ri7${PRtn)Rf_sT0%3lWZW!{@UNQN
zlPNA%f53OAzRYqw%|L!HJ31aj;@so{(YpcEk@<uZ4b5Q2;di$e*w*VayR7;0i8_Bd
z-sIR)!d*$Ql9erFJ;C`U#re8sWO1I8%O57~UFJ+>8`?BTyO0=|YHGeS74dfyA*<4Y
z`v=Oj`};U_={QH{A4dS2OZQx11<+E<Bvf(57Q&>$w=X`&`cj#4YMAzPAIiiStMDDk
z$l{Y!;#r0YyLtbbf5ocY7RD<_q<bR(IF5t07Gumi0;mP1YMPXQp0s4!+7yktqPyMU
z*3|)DJ>Q^}7^;z_kdX)rPhX1oo6#nR=VF$1K*9ewLI{przRYl;LeZ17l;u=aF%xUn
zWn6xBILjTq7Q+K9#}$suKFZ<Cf6Zv+dz4arIKrb6Ut&HKc+Owa(ieGp`U@OiYB5xJ
zAKN=0U@*TAN3K|HXj(+3&X&@L=*+Aq(Jcmwdlua5k9~rr#YNi7Wm3LJ7)I|%lIqGj
zga+nXhS8~z^_@P8Rn5`a2q6X15u`nVW8vU<i!Y5dxYShaD*0?~_ZhE$nP$>U+PRs@
zy3bfGA>#;cD!SZPNb%lopFKSR2n_`6>G>tvf>oSddX|Og0t?|d_2e>nzZaJSXcLo7
z7r3wgBb-`%mJ^EynXJFcU2Fa&TRZMY08$7X;WE=W#ir8Tq`e&Vc*(tPP(9CObZnf_
zrw*}m=PqvEeiLCBy=|-A+Uc<&<8ZF2`TVgOn>u`E>Wc5r#jFV=+lwyQtmK99kVj56
zm}+T0I*{hUfeeGifNzc;VWPIombPD}JM$rGD#4e~m2&9HNs1{+s30~LL4+$^ws$_r
z+Wao6@ns@iqp21NoD$DnT#Y2+rhEtY4*WU;g*!Mp_ZY9te~ag59-*9G%TW6+dQ!uj
zbDw8q`4B={%Bew?qp3AFV5yQY40-<f=Q(-m6yxLjIIw>|sgzF?#WxIUIW76^?RmcV
zYK^DoBA%IxaRdye9e#Ozh6DX6Ol0}?WW;DgbMLAYpV*XRRo+1vOJ{H^6ZNl=@B{X&
zeh6zFgmBT;5NkyvS>d`VSKvuWOKC#gAQyB~NcG}L2^Lz)@_1{WtlMNuUSe&)VB0Me
z{B9y0a$@lyXO^C&C$oheT_2$q&+*dS*El@$KMC9%Ik%(3y^#ngr6dRfW@lzNc<><O
z7cQ`W|9-Y_-9n?$#9Dj(U$wBU+vnf<1x{5Imm8X_CmC+{Sl{N7^(B*)gqfDc7|YKM
zrs&BzgvtVfz{z2)Lp`YxDM4Zkt#}^S@d?}v7DL{XJTnn;dLiNG)@LYZB$1BsWWZEy
zlyZ74p;laOMmS=HIcTehl%gXuz)j`*7^@y;u62$|G(~52h<&RcraL>#c;yI*4e3g)
zn{}@RfVCFab#YzyDv&(S!;ua`2t3atNfM49KhD(DG`H>B$G!LL$8}wjB)RTn6)Vd?
z(V@TK&`K<>1A!|@j71s4Y+bVy8v4@?r9fb;#aN3Jf=V<42#Wq1jMZGK9_6Wt|H``J
zZ5-(P94R;E*@+fke67wz%Me=l_{KE(z+<X*f^Sd!H`-I(>|gWm7|Oexxg2q!p5TZS
z)>^bS6uniHgMQ{(=cvYWw5R$>J4H5^?xnx52Wt(k@Mm3Z^fhDW#fb^doH>W@dp{!D
zuFL4Tb7;LXPD+Uc=I1VR@X3RmJ2%P)@B1Lb!|Q1@uit80W~JnGoE4y3iN#{^rC=dc
zEXRiaj6)zSu~rx(iFAeY^%oIBQ1aJejKOpA<lSz%(_2v1V6~#n1J4m)U@$KT97C)V
za$X0<h7{diz_7XO^7wSf(Tbwl)JWHom>5?Cq?|mBWP!wl7;A`igb;$X({{x;ta5({
z&X2cLD#hrzQ678zG4lER)xw1~D5VfWTt%~zIA&yIgvrTC_U_%wfdhBr`#ws&eX%PR
zf`SJ{UozIv)DlgvU5Tg9O#U%VwM5#@GgNplk!n%&R`Y?i{~q5-6D19-we%O@)5B@B
zwcOO<ppC{@jZ20H`u_{QOoKHHmjoTI;Cx;4=OYb%?WQ!Y<FFJ?vJj1v^~$)UP%7a^
zM)~?4g=?-+*BWC{i6U&Z@ICKMsnw4+DJ1~aYL!EW4sq(#X&!v=K{l)(B8ua;1!|-$
z0|m+ItYoC7d2!m%i2s4pwg1h0YXX7bJ*AK1%i<L;5(F~8;<{IuNg`lNNgxmiYf<_~
z!6)ssW3d=*DSGgU^#Ol$I^<i^F_#+f^J`mF%`vLUEPdJckdbASR+u;OMCWtA^E;ok
z*7jR#d1LoHk8|hFbK=Aaf*?Q$aaI3GToz!tQsLECj+4vf7#JKNi4%T&o}acGW6AkY
zZyCmFme(qRO8j?NMv%g?uk%xEXgdH_piIc=<)?UI_AAV_&eHDpllKdZEh`>78}sdp
zF%sy?2&AxpWv-!dg+*Wy!m=tODIhshGhB)c-@WWI*;uA0eU_c2`&pgcOJZ7Yw$=--
zy#~Lu#$c^^{l`DaN`E}b0pzkd_T73bTefT=Y__m(lgoyQ!|u*1hZpO-ywuK%3!mcV
z-1~W8ZH9HZH3%axC@$2G@a*gt@nnXn)(Apq_KJVaH!dokoK48Og2N|6{!<XJtL!jZ
zG5q0)m`yp!!<#*P3BC~A-*4&5&hXfHi_x%;)74w(O>Lyh&tXjCn)`8$HP;Y)%@vn+
zkka{oa`m+mkTC|&^I5lUh<on6hyJyFgkgx%@4z8~&2YYPh@Q+7tc!n>`S?AYXbf=f
zB>a;;&Aokqh?s4j#tO0G&S)BHp2^w*i(&e8gJ@d8#j0UPJAC7!VkWjME^GG8Np^Hg
z5*>4<`V=o!zQo3IigNR#99#YvFV4H{EIHiWn{X{9($)ISK@G!*j*brY?%hKwmAWc!
z&d)C}F>&##Wc5RfE|p5$a?35;e*1d?Xf&Gdh&~{NOD&mYvT=%rp5&wbXK?j)4$gQS
zuNwa1q9Q9Tcl3JnrFV0-{tp<V2xN{nZ-~BJI|I1}Cu$%q^!YGcgv1zrWk}LU44ZS3
zn>z(cDb7@%;`xOy<H`cv!7z7~*U_C)JTh*0c^<YEB>5C5a~+^In=J+hhZr8-bd^>5
zzRwGXk1#zm{d!hcN|8#X8Co~Qop;{Jx}iau%_cWc16&(a=`!0oO(nTR!R?_peFr_M
z97Dy3zdkSc&VuF93C-4a=m<7)d+E2Bie4e_^e~XV18YMLbX!VNFdxA!U4q`Up&3IU
z;WNXMv<Gpbsj4ZCEIxuOGYn_%W^d`!WIahOYB7|C3k}0u3vxcZ8F_N8y>^^aDnY5M
zNxaqxNgRQ-7_BiDy1KjBwQDE0?c0arNb2?48%~*SOkxqpl`w;Oy*g;BMM7Pn><=NW
zPfH~@!tjgzg4e3Bq~YYE;nr1xHJMu($lQStnox%{RYZFL5A=IDLekO+$rb-q7JT6o
zCk9Q-bn`d~F{}KI>}vZ2+9(={qTmU-Q-Z06rKt?U@}`F4Uat^hj9EEDiX;3~ij5mK
zvS;sJHmo0_)oP)Xy@4aUH!Mh`5C}q3!4(0X%#xTE%EqK*J1M6~Q!k=zj5VOG!FOP9
zLGsiROf?M{%WSL34;BQQi!fNQXbo0)%q6pE8<TN55V(NF5iaxbd3>3{6ImAGa|9ww
zkGC0@43Vkf38+MZ`AE<nKuTJawpa_E1Xq9q#1`#dZ^dKGO6*+IH^8RhjqKXB6W{k}
zG#YPP0F=UIE<DAYI!z^>CU7!z`J3qUH{&`f(xRO}=2=M2(1;hw%QaY5_-1z+%p%N&
z5Gu=)lY+-*1^e18zdmGXOG%Vgj8wkKRQwXRwSSfle-p;WG}SUMF8&DxZxy?WpJZ80
z;D{7i*^4sKO8B#u=}2-ZlH64?6kUU{7S{?UtAg<s)D83ol&;%SlO$o)s&4w$tfs50
z1En-k^iF81f|=+TN9%vZZ2TGtF%n79>19jy=h=|`0B!C7d8eD{=oL;io}lCn5IF5<
z+oF*eK;lam7l*9t(&-5bZj3T3(xfs9U*<{4GS+}GdPN|z5hcHilGlwdpv~=|rlx7>
zWw4fvG+b^9UR)5=HFTvcc~4`E;Kg~t({qwnYJx=#cNc8mH51jfn%0Jnav33@*$m&Y
zM3mSXFIE47ikYG}*v)Ex7Zp9h`S2NDt$&@AY-3~QLHhkWnT<!7h>q}b^%2&mK1heZ
zf%6T66wnbYaw&X;4Q-ka*gV^dW!n87j4ps}u|D+y)}`*nl|DW#nh7jK9f;^tEXPI8
zMj?UOi51UNH%IWzL!4NKLvxZN70H&2WqVHH3B#+44v$YtE=GdwIYUoi2xF<;8xfb|
z*ziubx#%PnGfA7fhF#fDQg+wTGD}DTMw)-aTzrOJ_cGny4z{E}%(2E_ak6=krDT$l
z*Tt#ux3D-=`9B=4{yoMfq|+(Jk}{VTJLwN@qt|~Ajz}Yf#<7~GXC02!TrS5@P1<Q`
zO}p=rb@veRIZitcM;8<qnl2+v$?CxJPglhZW)&ECZpmXZmb|a1`B1l_!`IA2a@w`l
zI6wPiKg+V7z!g3@QKsZ<rl}W6%TBu7t-Qw9NK8a*S_tXT=iQEz&2S-lhDmjV3*iC{
zW052@<&&hz(C%y?v32IuSt9!?^XeoGJ<m{TKY@Tla}H0;`CLo{y)LZrV~T0G(2~5=
zERmHTL6cC|i{zxk`-_VG9Wfhnn#4d_SSkjZ26hw`z3BuC3}wx$t}%A$-Ef*(lmloK
z4YNcg86)rX5$Y-n$ytPuxFW!{0ZJzz1ikKV+T;N1>;cB=mgBfc0q@U$mb6IYi#!%h
z(=0F+|2^aJ(~N{)r`^qPs&W_KxGbqC_=V1d-G!K(WAP<4lw?LN@LcWB2y8d&gWar7
zWm)AbioQWxFh-z+C1oLyf-^PA&VnIuVIh)dU1QASLh!)P8q_v9L{65dnpqAvzVN#H
z&#Do!vWtS~L*kRz=Id-NEy`p>2gO{%|C*HuE2uSZrneBG?8=Ei#_1s&bmQQ2L4Awk
zwKIHw`8K9hj$iC-ac?;y;~LBr5}0=tPBKETeuAPL;?C?oJQ<_0{3z;KB4gQ^O*q+f
zc)sRRyO^QJ*OYyG$oY-m_{}k6%r<N7#v4_T-ia>pXm<vg*RN4AlT^$ls`?TD!@>RZ
zdv~FY!n{G`F;=7P%H5}G<ZvN&Sd1+@3N5VF7^Bfv;gcsNay0EcM=Lio+T6zGl;%U_
z21QR1YtY7GjUcuyz90T~ESlBcF1nqa#3o*O|AzG{4LvD^YXzrT9%GTD$F)DmI(%Ln
zJ@yL5nAOIZM}a$kwpV{7ExW+H8lh$9a7okdY@p2<LLhmo>TfY|_|jyNriI&cF$c;`
z((X#3B85O1#S;sP?^N1RHp4?5<Gin!LK0xEn10L7aYlWe8T}e*QDSfKSyGg-=xgW^
zpbbpN9@C+FbRl*hD*ATphoEANDH~({4e%MD0N41^|M!b(0*mH{_xvOdAh170g?7A}
z=Fz1r4v>?Ut%0I1NT?gh%MG7t?U0x>gP9i?E_{`eC+QS>5LQxSl6iBAgccrYwtD}J
y4zU&U)>m|00i#mb&yP0JkDYG?m4a{izXJfM_k`K#ROCkh0000<MNUMnLSTaBx9`~i

literal 0
HcmV?d00001

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 5a7d923e43c..cb04ffe72a6 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -1,3 +1,14 @@
+.QueryAndDownloadTabs {
+  > :global(.tab-content) {
+  }
+
+  .QueryContainer {
+    border: 1px solid #ddd;
+    border-top: none;
+    padding: 10px;
+  }
+}
+
 .QueryContainer {
   width: 850px;
 
@@ -104,6 +115,7 @@
     }
   }
 
+  .noData,
   .selectedCount {
     font-size: 12px;
     line-height: 30px;
@@ -236,32 +248,27 @@
 }
 
 .GeneticProfileSelector {
-  div.singleCheckbox,
-  div.groupCheckbox {
+  .group {
+    display: flex;
+    flex-direction: column;
     margin-left: 20px;
-
-    label {
-      display: inline;
-      cursor: pointer;
-    }
   }
 
-  div.radioGroup {
+  div.zScore {
     margin-left: 40px;
+  }
 
-    div.radioItem {
-      label {
-        cursor: pointer;
+  label {
+    display: inline;
+    cursor: pointer;
 
-        input {
-          margin-right: 6px;
-        }
-      }
+    input[type='radio'],
+    input[type='checkbox'] {
+      margin-right: 6px;
     }
   }
 
-  div.zScore {
-    margin-left: 60px;
+  span.infoIcon {
   }
 
   span.groupName {
@@ -291,11 +298,16 @@
   .ReactSelect {
   }
 
-  button {
+  .buttonRow {
+    button {
+      border: 1px solid #d3d3d3;
+      border-radius: 4px;
+      padding: .4em 1em;
+      margin: 3px;
+    }
   }
 
   textarea.geneSet {
-
     &.empty {
     }
     &.notEmpty {
@@ -485,15 +497,31 @@ div.GisticGeneSelectorWindow {
   }
 }
 
-button.SubmitButton {
-  font-weight: 400;
-  font-size: 18px;
-  width: 400px;
-  padding: 10px 16px;
-  background-color: #e6e6e6;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  &:hover {
-    border-color: #adadad;
+span.downloadSubmitExplanation {
+}
+
+label.transposeDataMatrix {
+  input[type='checkbox'] {
+    margin-right: 6px;
+  }
+}
+
+div.submitRow {
+  button.submit {
+    font-weight: 400;
+    font-size: 18px;
+    width: 235px;
+    padding: 10px 16px;
+    background-color: #e6e6e6;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    &:hover {
+      border-color: #adadad;
+    }
+  }
+
+  button.genomeSpace {
+    border: 1px solid #d3d3d3;
+    border-radius: 4px;
   }
 }
diff --git a/src/shared/lib/memoize.ts b/src/shared/lib/memoize.ts
deleted file mode 100644
index cf921380042..00000000000
--- a/src/shared/lib/memoize.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-/**
- * @author adufilie http://github.com/adufilie
- */
-
-let UNDEFINED = {} as any;
-
-type AnyFunction = (...args:any[])=>any;
-
-function isPrimitive(value:any):boolean
-{
-	return value === null || typeof value !== 'object';
-}
-
-/**
- * Provides Map-like interface that uses Map for primitive keys and WeakMap for non-primitive keys.
- */
-class Cache<K,V>
-{
-	private map = new Map<any, V>();
-	private weakMap = new WeakMap<any, V>();
-
-	has(key:K):boolean
-	{
-		return isPrimitive(key) ? this.map.has(key) : this.weakMap.has(key);
-	}
-	get(key:K):V|undefined
-	{
-		return isPrimitive(key) ? this.map.get(key) : this.weakMap.get(key);
-	}
-	set(key:K, value:V):this
-	{
-		if (isPrimitive(key))
-			this.map.set(key, value);
-		else
-			this.weakMap.set(key, value);
-		return this;
-	}
-}
-
-/**
- * Provides a multi-dimensional Map-like interface
- */
-class HyperMap<T>
-{
-	has(args:any[]):boolean
-	{
-		let cache:Cache<any, any>|undefined = this.getCache(args.length);
-		if (args.length > 1)
-			cache = this.traverse(cache, args.slice(0, args.length - 1)) as any;
-		return cache !== undefined && cache.has(args[args.length - 1]);
-	}
-
-	get(args:any[]):T | undefined
-	{
-		return this.traverse(this.getCache(args.length), args);
-	}
-
-	set(args:any[], value:T):void
-	{
-		this.traverse(this.getCache(args.length), args, value);
-	}
-
-	// gets the Cache designated for a specific key length
-	private getCache(numArgs:number)
-	{
-		let cache = this.map_numArgs_cache.get(numArgs);
-		if (!cache)
-			this.map_numArgs_cache.set(numArgs, cache = new Cache());
-		return cache;
-	}
-
-	// used to avoiding the varying-key-length limitation of the traverse() function below
-	private map_numArgs_cache = new Map<number, Cache<any, any>>();
-
-	// dual-purpose setter/getter
-	// note: does not work if subsequent calls vary the length of the keys array for the same cache param
-	private traverse(cache:Cache<any, any>, keys:any[], value?:T):T|undefined
-	{
-		if (keys.length == 0)
-			return undefined;
-		if (keys.length == 1)
-		{
-			if (value === undefined)
-				return cache.get(keys[0]);
-			return void cache.set(keys[0], value);
-		}
-
-		let nextCache = cache.get(keys[0]);
-		if (nextCache === undefined)
-			cache.set(keys[0], nextCache = new Cache());
-		return this.traverse(nextCache, keys.slice(1), value);
-	}
-}
-
-class Memoizer<Result, Transform extends (...args:any[])=>Result>
-{
-	private transform:Transform;
-	private cache = new HyperMap<Result>();
-
-	constructor(transform:Transform, getAdditionalArgs?:()=>any[], fixedArgsLength?:number)
-	{
-		this.transform = transform;
-		let cache = this.cache;
-		this.get = function(...args:any[]) {
-			if (fixedArgsLength !== undefined)
-				args.length = fixedArgsLength;
-			let thisArgs = [this];
-			if (getAdditionalArgs)
-				thisArgs = thisArgs.concat(getAdditionalArgs.call(this), args);
-			else
-				thisArgs = thisArgs.concat(args);
-			let result = cache.get(thisArgs);
-			if (result === undefined && !cache.has(thisArgs))
-			{
-				cache.set(thisArgs, UNDEFINED);
-				result = transform.apply(this, args);
-				if (result !== undefined)
-					cache.set(thisArgs, result);
-			}
-			return result === UNDEFINED ? undefined : result;
-		} as Transform;
-	}
-
-	get:Transform;
-}
-
-export type MemoizeParams<F extends AnyFunction> = {
-	function: F,
-	getAdditionalArgs?: ()=>any[],
-	fixedArgsLength?: number,
-};
-
-/**
- * Creates a memoized version of a function.
- */
-export default function memoize<F extends AnyFunction>(params:MemoizeParams<F>):F;
-
-/**
- * A method decorator that creates a memoized version of a method.
- */
-export default function memoize<T extends AnyFunction>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>):TypedPropertyDescriptor<T> | void;
-
-export default function memoize<T extends AnyFunction>():TypedPropertyDescriptor<T> | void
-{
-	// called as decorator, target is prototype; return modified descriptor
-	if (arguments.length == 3)
-	{
-		let [target, propertyKey, descriptor] = Array.from(arguments) as [Object, string|symbol, TypedPropertyDescriptor<T>];
-		return decorate(descriptor);
-	}
-
-	// called as function
-	let params = arguments[0] as MemoizeParams<T>;
-	if (typeof params === 'function')
-		params = {function: params};
-	if (arguments.length == 1 && params && typeof params.function === 'function')
-	{
-		return new Memoizer(params.function, params.getAdditionalArgs, params.fixedArgsLength).get;
-	}
-	else
-	{
-		throw new Error("Usage: memoize(params:{ function:Function, getAdditionalArgs?:()=>any[], fixedArgsLength?:number })");
-	}
-}
-
-type DecorateMemoizeParams<T extends AnyFunction> = Partial<Pick<MemoizeParams<T>, 'getAdditionalArgs' | 'fixedArgsLength'>>;
-
-function decorate<T extends AnyFunction>(descriptor:TypedPropertyDescriptor<T>, params?:DecorateMemoizeParams<T>)
-{
-	if (descriptor && typeof descriptor.value === 'function')
-		descriptor.value = new Memoizer(descriptor.value, params && params.getAdditionalArgs, params && params.fixedArgsLength).get;
-	else if (descriptor && (descriptor.set || descriptor.get))
-		throw new Error('memoize cannot be used as a decorator for a setter or getter');
-	return descriptor;
-}
-
-// /**
-//  * Generates a method decorator that creates a memoized version of a function with additional args to control memoization
-//  * @param getAdditionalMemoizeArgs A function that returns additional arguments for controlling memoization.
-//  *                                 If this is an inline function, it must be defined like
-//  *                                     <code>function() { return [this.a, this.b]; }</code>
-//  *                                 rather than
-//  *                                     <code>() => [this.a, this.b]</code>
-//  *                                 because when decorators are evaluated the 'this' context is undefined.
-//  */
-// export function memoizeWith<T, TARGET>(getAdditionalMemoizeArgs:(this:TARGET, self:TARGET)=>any[])
-// 	:<T>(
-// 		target: TARGET,
-// 		propertyKey: string | symbol,
-// 		descriptor: TypedPropertyDescriptor<T>
-// 	) => TypedPropertyDescriptor<T> | void
-// {
-// 	return (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>):TypedPropertyDescriptor<T> => {
-// 		return decorate(descriptor, getAdditionalMemoizeArgs);
-// 	};
-// }
-
-/**
- * Generates a method decorator that creates a memoized version of a function with additional args to control memoization
- * @param getMemoizeParams_propName The name of another class method that returns additional arguments for controlling memoization.
- */
-export function memoizeWith
-	<T extends AnyFunction, P extends string, TARGET extends {[X in P]: (this:TARGET)=>any[]}>
-	(getMemoizeParams_propName:P):<T>(
-		target: TARGET,
-		propertyKey: string | symbol,
-		descriptor: TypedPropertyDescriptor<T>
-	) => TypedPropertyDescriptor<T> | void
-{
-	return (target: TARGET, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>):TypedPropertyDescriptor<T> => {
-		return decorate(
-			descriptor,
-			{
-				getAdditionalArgs(this:TARGET) {
-					let fn = this[getMemoizeParams_propName] as any as () => any[];
-					return fn.call(this);
-				}
-			}
-		);
-	};
-}

From 687026edc2888cf139ad08eb1cf7299274dbf9fe Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 9 Mar 2017 12:09:01 -0500
Subject: [PATCH 076/133] update to use urls.ts

---
 src/shared/components/StudyList/StudyList.tsx      | 5 +++--
 src/shared/components/query/GeneSetSelector.tsx    | 3 ++-
 src/shared/components/query/SampleListSelector.tsx | 3 ++-
 src/shared/components/query/styles.module.scss     | 6 ++++--
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index 218c81dde5b..27600325bb6 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -6,6 +6,7 @@ import FontAwesome from "react-fontawesome";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import queryStore from "../query/QueryStore";
 import {observer} from "mobx-react";
+import {getStudySummaryUrl, getPubMedUrl} from "../../api/urls";
 
 const styles = {
 	...styles_any as {
@@ -175,9 +176,9 @@ export default class StudyList extends React.Component<{}, {}>
 	{
 		let links = [];
 		if (study.studyId)
-			links.push({icon: 'bar-chart', url: `/study?id=${study.studyId}#summary`});
+			links.push({icon: 'bar-chart', url: getStudySummaryUrl(study.studyId)});
 		if (study.pmid)
-			links.push({icon: 'book', url: `http://www.ncbi.nlm.nih.gov/pubmed/${study.pmid}`});
+			links.push({icon: 'book', url: getPubMedUrl(study.pmid)});
 		else 
 			links.push({icon: 'book', url: undefined });
 		return (
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index fb72f0efcef..cc58ceedcb8 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -9,6 +9,7 @@ import gene_lists from './gene_lists';
 import GeneSymbolValidator from "./GeneSymbolValidator";
 import classNames from "../../lib/classNames";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
+import {getOncoQueryDocUrl} from "../../api/urls";
 
 const styles = styles_any as {
 	GeneSetSelector: string,
@@ -52,7 +53,7 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 		return (
 			<FlexCol padded overflow className={styles.GeneSetSelector}>
 				<h2>Enter Gene Set:</h2>
-				<a href='/onco_query_lang_desc.jsp'>Advanced: Onco Query Language (OQL)</a>
+				<a href={getOncoQueryDocUrl()}>Advanced: Onco Query Language (OQL)</a>
 				<ReactSelect
 					className={styles.ReactSelect}
 					value={this.selectedGeneListOption}
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index d5393617110..7cf73ac398f 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -6,6 +6,7 @@ import {observer} from "mobx-react";
 import {computed} from 'mobx';
 import {FlexCol} from "../flexbox/FlexBox";
 import {QueryStore} from "./QueryStore";
+import {getStudyViewUrl} from "../../api/urls";
 
 const styles = styles_any as {
 	SampleListSelector: string,
@@ -50,7 +51,7 @@ export default class SampleListSelector extends React.Component<{}, {}>
 					options={this.sampleListOptions}
 					onChange={option => this.store.selectedSampleListId = option ? option.value : undefined}
 				/>
-				<a href={`/study?id=${this.store.singleSelectedStudyId}`}>To build your own case set, try out our enhanced Study View.</a>
+				<a href={getStudyViewUrl(this.store.singleSelectedStudyId)}>To build your own case set, try out our enhanced Study View.</a>
 
 				{!!(!this.store.selectedSampleListId) && (
 					<FlexCol>
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index cb04ffe72a6..a73294c0215 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -1,5 +1,8 @@
 .QueryAndDownloadTabs {
-  > :global(.tab-content) {
+
+  :global(ul.nav.nav-tabs li) {
+    font-size: 150%;
+    font-weight: bold;
   }
 
   .QueryContainer {
@@ -303,7 +306,6 @@
       border: 1px solid #d3d3d3;
       border-radius: 4px;
       padding: .4em 1em;
-      margin: 3px;
     }
   }
 

From 399a0bbe4a1eefaf32172d44e6b1b7f8a120543d Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 9 Mar 2017 17:15:33 -0500
Subject: [PATCH 077/133] stuf

---
 package.json                                  |   3 +-
 src/config/IAppConfig.ts                      |   1 +
 src/config/development.config.ts              |   1 +
 src/config/production.config.ts               |   1 +
 src/config/test.config.ts                     |   1 +
 src/shared/api/genomespace/genomespace.ts     |  52 ++++++
 src/shared/api/genomespace/gsuploadwindow.ts  |  89 ++++++++++
 src/shared/api/urls.ts                        |  17 ++
 .../components/StudyList/StudyListLogic.ts    | 157 ++++++++++++++++++
 .../components/query/GeneSymbolValidator.tsx  |   2 +-
 .../components/query/QueryContainer.tsx       |   3 +-
 src/shared/components/query/QueryStore.ts     |  59 ++++++-
 .../query/download-data-form-validation.js    |  98 +++++++++++
 src/shared/lib/debounceAsync.ts               |  36 ----
 typings/build-url.d.ts                        |  12 ++
 15 files changed, 491 insertions(+), 41 deletions(-)
 create mode 100644 src/shared/api/genomespace/genomespace.ts
 create mode 100644 src/shared/api/genomespace/gsuploadwindow.ts
 create mode 100644 src/shared/components/query/download-data-form-validation.js
 delete mode 100644 src/shared/lib/debounceAsync.ts
 create mode 100644 typings/build-url.d.ts

diff --git a/package.json b/package.json
index 7969715a8e7..c07597cabe2 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,8 @@
     "@types/react": "15.0.4",
     "@types/react-bootstrap": "^0.0.43",
     "@types/react-dom": "^0.14.21",
-    "@types/react-redux": "^4.4.36",
     "@types/react-fontawesome": "^1.5.0",
+    "@types/react-redux": "^4.4.36",
     "@types/react-router": "^2.0.46",
     "@types/react-spinkit": "^1.1.29",
     "@types/reselect": "^2.0.27",
@@ -66,6 +66,7 @@
     "bootstrap": "^3.3.7",
     "bootstrap-loader": "^1.2.0-beta.1",
     "bootstrap-sass": "^3.3.7",
+    "build-url": "^1.0.9",
     "bundle-loader": "^0.5.4",
     "classnames": "^2.2.5",
     "clinical-timeline": "0.0.14",
diff --git a/src/config/IAppConfig.ts b/src/config/IAppConfig.ts
index b21d9121840..a8390ed2039 100644
--- a/src/config/IAppConfig.ts
+++ b/src/config/IAppConfig.ts
@@ -1,4 +1,5 @@
 export interface IAppConfig {
+    genomespaceEnabled: boolean;
     cancerStudySearchPresets: string[];
     priorityStudies: PriorityStudies;
 }
diff --git a/src/config/development.config.ts b/src/config/development.config.ts
index f730ab999ed..8be3682f007 100644
--- a/src/config/development.config.ts
+++ b/src/config/development.config.ts
@@ -2,6 +2,7 @@ import {IAppConfig} from "./IAppConfig";
 
 const config:IAppConfig = {
     //host: 'cbioportal-rc.herokuapp.com',
+    genomespaceEnabled: true,
     cancerStudySearchPresets: [
         'tcga',
         'tcga -provisional',
diff --git a/src/config/production.config.ts b/src/config/production.config.ts
index d1b4b7ad151..6d31e68edcc 100644
--- a/src/config/production.config.ts
+++ b/src/config/production.config.ts
@@ -2,6 +2,7 @@ import {IAppConfig} from "./IAppConfig";
 
 const config:IAppConfig = {
     //host: 'cbioportal-rc.herokuapp.com',
+    genomespaceEnabled: true,
     cancerStudySearchPresets: [
         'tcga',
         'tcga -provisional',
diff --git a/src/config/test.config.ts b/src/config/test.config.ts
index f730ab999ed..8be3682f007 100644
--- a/src/config/test.config.ts
+++ b/src/config/test.config.ts
@@ -2,6 +2,7 @@ import {IAppConfig} from "./IAppConfig";
 
 const config:IAppConfig = {
     //host: 'cbioportal-rc.herokuapp.com',
+    genomespaceEnabled: true,
     cancerStudySearchPresets: [
         'tcga',
         'tcga -provisional',
diff --git a/src/shared/api/genomespace/genomespace.ts b/src/shared/api/genomespace/genomespace.ts
new file mode 100644
index 00000000000..45aadc6e4c7
--- /dev/null
+++ b/src/shared/api/genomespace/genomespace.ts
@@ -0,0 +1,52 @@
+import {gsUploadByGet} from "./gsuploadwindow";
+import {GeneticProfile, CancerStudy} from "../generated/CBioPortalAPI";
+import {getSubmitQueryUrl} from "../urls";
+
+/** Copyright (c) 2007 Memorial Sloan-Kettering Cancer Center.
+ **
+ ** Code written by: Ethan Cerami, Benjamin Gross
+ ** Authors: Ethan Cerami, Gary Bader, Chris Sander, Benjamin Gross
+ ** Modified by Jim Robinson for use with IGV
+ **
+ ** This library is free software; you can redistribute it and/or modify it
+ ** under the terms of the GNU Lesser General Public License as published
+ ** by the Free Software Foundation; either version 2.1 of the License, or
+ ** any later version.
+ **
+ ** This library is distributed in the hope that it will be useful, but
+ ** WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF
+ ** MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE.  The software and
+ ** documentation provided hereunder is on an "as is" basis, and
+ ** Memorial Sloan-Kettering Cancer Center
+ ** has no obligations to provide maintenance, support,
+ ** updates, enhancements or modifications.  In no event shall
+ ** Memorial Sloan-Kettering Cancer Center
+ ** be liable to any party for direct, indirect, special,
+ ** incidental or consequential damages, including lost profits, arising
+ ** out of the use of this software and its documentation, even if
+ ** Memorial Sloan-Kettering Cancer Center
+ ** has been advised of the possibility of such damage.  See
+ ** the GNU Lesser General Public License for more details.
+ **
+ ** You should have received a copy of the GNU Lesser General Public License
+ ** along with this library; if not, write to the Free Software Foundation,
+ ** Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+ **/
+
+function uploadUrlByGetToGS(dataURL:string, filename:string)
+{
+    let dest = "";
+    let onComplete = function(savePath:string){
+        alert('outer Saved to GenomeSpace as ' + savePath);
+    };
+    let onError = function(savePath:string){
+        alert('outer ERROR saving to GenomeSpace as ' + savePath);
+    };
+    gsUploadByGet({
+        url: dataURL,
+        filename: filename,
+        successCallback: onComplete,
+        errorCallback: onError
+    });
+    return false;
+};
diff --git a/src/shared/api/genomespace/gsuploadwindow.ts b/src/shared/api/genomespace/gsuploadwindow.ts
new file mode 100644
index 00000000000..60566139dcf
--- /dev/null
+++ b/src/shared/api/genomespace/gsuploadwindow.ts
@@ -0,0 +1,89 @@
+// Copyright 2013 Broad Institute, Inc.  All rights reserved.
+
+import request from 'superagent';
+
+let jsuiRoot = "https://gsui.genomespace.org/jsui/";
+
+type Callback = (data:any) => void;
+
+export function gsUploadByGet(config:{url:string, filename?:string, successCallback?:Callback, errorCallback?:Callback}) {
+    // expect an object with url, filename (optional), successCallback(optional), errorCallback (optional)
+
+    let gsUploadUrl = jsuiRoot + "/upload/loadUrlToGenomespace.html?uploadUrl=";
+    let dest = encodeURIComponent(config.url);
+    let filenameParam = "";
+    if (config['filename'] != null) {
+        filenameParam = "&fileName=" + config.filename;
+    }
+
+    let newWin:Window & any = window.open(gsUploadUrl + dest + filenameParam, "GenomeSpace Upload", "height=340px,width=550px");
+    newWin.focus();
+
+    if (config['successCallback'] != null) newWin.setCallbackOnGSUploadComplete = config['successCallback'];
+
+    if (config['errorCallback'] != null) newWin.setCallbackOnGSUploadError = config['errorCallback'];
+}
+
+export function gsLocationByGet(config:{successCallback:Callback, errorCallback?:Callback}){
+    // expect an object with url, filename (optional), successCallback, errorCallback (optional)
+
+    let gsUploadUrl = jsuiRoot +"/upload/loadUrlToGenomespace.html?getLocation=true";
+
+    let newWin:Window & any = window.open(gsUploadUrl, "GenomeSpace Upload", "height=360px,width=600px");
+
+    let successCallback = config['successCallback'];
+    window.addEventListener( "message",
+        function (e) {
+            successCallback(e.data);
+        },
+        false);
+
+    newWin.focus();
+
+    if (config['errorCallback'] != null) newWin.setCallbackOnGSUploadError = config['errorCallback'];
+}
+
+export function gsSelectFileByGet(config:{successCallback:Callback, errorCallback?:Callback}){
+    // expect an object with url, filename (optional), successCallback, errorCallback (optional)
+    let gsUploadUrl = jsuiRoot +"/upload/loadUrlToGenomespace.html?getFile=true";
+    let newWin:Window & any = window.open(gsUploadUrl , "GenomeSpace Upload", "height=340px,width=550px");
+    newWin.focus();
+
+    newWin.setCallbackOnGSLocationComplete = config['successCallback'];
+
+    if (config['errorCallback'] != null) newWin.setCallbackOnGSUploadError = config['errorCallback'];
+}
+
+export async function gsUploadByPost(formData:any){
+    // expects an object with formData( the file(s)),
+
+    function gsUploadByPostErrorHandler(err:any){
+        alert('An error occurred while posting the file to GenomeSpace');
+    };
+
+    function gsUploadByPostCompleteHandler(responseObj:any){
+        if (typeof responseObj == "string"){
+            responseObj = JSON.parse(responseObj);
+        }
+        let newWin = window.open(responseObj.completionUrl, "GenomeSpace Upload", "height=340px,width=550px");
+        newWin.focus();
+    };
+    let params = {
+        url: jsuiRoot + '/postToGenomeSpace',  //server script to process data
+        type: 'POST',
+        crossDomain: true,
+        success: gsUploadByPostCompleteHandler,
+        error: gsUploadByPostErrorHandler,
+        data: formData,
+        //Options to tell JQuery not to process data or worry about content-type
+        cache: false,
+        contentType: false,
+        processData: false
+    };
+
+    // $.ajax(params);
+
+    let req = request.agent()
+        .post(params.url, (err, res) => err ? params.error(err) : params.success(res))
+        .send(params.data);
+}
diff --git a/src/shared/api/urls.ts b/src/shared/api/urls.ts
index 23f239701ad..4061804a8e1 100644
--- a/src/shared/api/urls.ts
+++ b/src/shared/api/urls.ts
@@ -28,6 +28,23 @@ export function getStudyViewUrl(studyId:string) {
 export function getStudySummaryUrl(studyId:string) {
     return cbioUrl('study', {id: studyId}, 'summary');
 }
+export function getSubmitQueryUrl(store:QueryStore)
+{
+    return cbioUrl('index.do', {
+        cancer_study_list: store.selectedStudyIds,
+        cancer_study_id: store.singleSelectedStudyId,
+        genetic_profile_ids_PROFILE_MUTATION_EXTENDED: '',
+        data_priority: store.dataTypePriorityCode + '',
+        case_set_id: store.selectedSampleListId,
+        case_ids: store.caseIds,
+        patient_case_select: store.caseIdsMode,
+        gene_set_choice: 'user-defined-list',
+        gene_list: store.geneQuery,
+        clinical_param_selection: '',
+        tab_index: store.forDownloadTab ? 'tab_download' : 'tab_visualize',
+        Action: 'Submit',
+    });
+}
 export function getPubMedUrl(pmid:string) {
     return `http://www.ncbi.nlm.nih.gov/pubmed/${pmid}`;
 }
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index e55b4cbe193..9aabe4431ea 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -213,3 +213,160 @@ export default class StudyListLogic
 		this.store.selectedStudyIds = selectedStudyIds;
 	}
 }
+
+/*
+function parse_search_query(query:string)
+{
+	// First eliminate trailing whitespace and reduce every whitespace
+	//	to a single space.
+	query = query.toLowerCase().trim().split(/\s+/g).join(' ');
+	// Now factor out quotation marks and inter-token spaces
+	let phrases = [];
+	let currInd = 0;
+	let nextSpace, nextQuote;
+	while (currInd < query.length)
+	{
+		if (query[currInd] === '"')
+		{
+			nextQuote = query.indexOf('"', currInd + 1);
+			if (nextQuote === -1)
+			{
+				phrases.push(query.substring(currInd + 1));
+				currInd = query.length;
+			}
+			else
+			{
+				phrases.push(query.substring(currInd + 1, nextQuote));
+				currInd = nextQuote + 1;
+			}
+		}
+		else if (query[currInd] === ' ')
+		{
+			currInd += 1;
+		}
+		else if (query[currInd] === '-')
+		{
+			phrases.push('-');
+			currInd += 1;
+		}
+		else
+		{
+			nextSpace = query.indexOf(' ', currInd);
+			if (nextSpace === -1)
+			{
+				phrases.push(query.substring(currInd));
+				currInd = query.length;
+			}
+			else
+			{
+				phrases.push(query.substring(currInd, nextSpace));
+				currInd = nextSpace + 1;
+			}
+		}
+	}
+	// Now get the conjunctive clauses, and the negative clauses
+	let clauses = [];
+	currInd = 0;
+	let nextOr, nextDash;
+	while (currInd < phrases.length)
+	{
+		if (phrases[currInd] === '-')
+		{
+			if (currInd < phrases.length - 1)
+			{
+				clauses.push({"type": "not", "data": phrases[currInd + 1]});
+			}
+			currInd = currInd + 2;
+		}
+		else
+		{
+			nextOr = phrases.indexOf('or', currInd);
+			nextDash = phrases.indexOf('-', currInd);
+			if (nextOr === -1 && nextDash === -1)
+			{
+				clauses.push({"type": "and", "data": phrases.slice(currInd)});
+				currInd = phrases.length;
+			}
+			else if (nextOr === -1 && nextDash > 0)
+			{
+				clauses.push({"type": "and", "data": phrases.slice(currInd, nextDash)});
+				currInd = nextDash;
+			}
+			else if (nextOr > 0 && nextDash === -1)
+			{
+				clauses.push({"type": "and", "data": phrases.slice(currInd, nextOr)});
+				currInd = nextOr + 1;
+			}
+			else
+			{
+				if (nextOr < nextDash)
+				{
+					clauses.push({"type": "and", "data": phrases.slice(currInd, nextOr)});
+					currInd = nextOr + 1;
+				}
+				else
+				{
+					clauses.push({"type": "and", "data": phrases.slice(currInd, nextDash)});
+					currInd = nextDash;
+				}
+			}
+		}
+	}
+	return clauses;
+}
+type Clause = {type: 'and' | 'not', data: string[]}
+
+function matchPhrase(phrase:string, node)
+{
+	phrase = phrase.toLowerCase();
+	return !!((node.li_attr && node.li_attr.name && node.li_attr.name.toLowerCase().indexOf(phrase) > -1)
+	|| (node.li_attr && node.li_attr.description && node.li_attr.description.toLowerCase().indexOf(phrase) > -1)
+	|| (node.li_attr && node.li_attr.search_terms && node.li_attr.search_terms.toLowerCase().indexOf(phrase) > -1));
+}
+function perform_search_single(parsed_query, node)
+{
+	// in: a jstree node
+	// text to search is node.text and node.li_attr.description and node.li_attr.search_terms
+	// return true iff the query, considering quotation marks, 'and' and 'or' logic, matches
+	let match = false;
+	let hasPositiveClauseType = false;
+	let forced = false;
+
+	for (let clause of parsed_query)
+	{
+		if (clause.type !== 'not')
+		{
+			hasPositiveClauseType = true;
+			return 0;
+		}
+	}
+	if (!hasPositiveClauseType)
+	{
+		// if only negative clauses, match by default
+		match = true;
+	}
+	for (let clause of parsed_query)
+	{
+		if (clause.type === 'not')
+		{
+			if (matchPhrase(clause.data, node))
+			{
+				match = false;
+				forced = true;
+				return 0;
+			}
+		}
+		else if (clause.type === 'and')
+		{
+			hasPositiveClauseType = true;
+			let clauseMatch = true;
+			for (let phrase of clause.data)
+			{
+				clauseMatch = clauseMatch && matchPhrase(phrase, node);
+			}
+			match = match || clauseMatch;
+		}
+	}
+	return {result: match, forced: forced};
+};
+*/
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 0470755e21b..5022c143a50 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -32,7 +32,7 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 
 	render()
 	{
-		if (!this.store.geneIds.length)
+		if (!this.store.oqlParserResult.length)
 			return null;
 
 		if (this.store.genes.isPending && this.store.genes.result.suggestions.length == 0)
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 59ae8eb922d..52d854560a2 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -119,10 +119,11 @@ export default class QueryContainer extends React.Component<{}, {}>
 				)}
 
 				<FlexRow padded className={styles.submitRow}>
-					<button className={styles.submit}>
+					<button className={styles.submit} onClick={() => this.store.submit()}>
 						Submit
 					</button>
 					{!!(this.store.forDownloadTab) && (
+						//<script src="https://gsui.genomespace.org/jsui/upload/gsuploadwindow.js" type="text/javascript"></script>
 						<button className={styles.genomeSpace}>
 							Send to GenomeSpace
 						</button>
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 0c1405e5b4e..5e625c4ede6 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -5,13 +5,14 @@ import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gen
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
-import {labelMobxPromises, cached} from "mobxpromise";
+import {labelMobxPromises, cached, debounceAsync} from "mobxpromise";
 import internalClient from "../../api/cbioportalInternalClientInstance";
 import oql_parser from "../../lib/oql/oql-parser";
 import {SyntaxError} from "../../lib/oql/oql-parser";
 import memoize from "memoize-weak-decorator";
-import debounceAsync from "../../lib/debounceAsync";
 import AppConfig from 'appConfig';
+import {getSubmitQueryUrl} from "../../api/urls";
+import {gsUploadByGet} from "../../api/genomespace/gsuploadwindow";
 
 export type GeneReplacement = {alias: string, genes: Gene[]};
 
@@ -347,6 +348,21 @@ export class QueryStore
 		return this.selectedStudies.reduce((sum:number, study:CancerStudy) => sum + study.allSampleCount, 0);
 	}
 
+	// DATA TYPE PRIORITY
+
+	@computed get dataTypePriorityCode():0|1|2
+	{
+		let {mutation, cna} = this.dataTypePriority;
+		if (mutation && cna)
+			return 0;
+		if (mutation)
+			return 1;
+		if (cna)
+			return 2;
+
+		return 0;
+	}
+
 	// GENETIC PROFILE
 
 	@computed get dict_geneticProfileId_geneticProfile():_.Dictionary<GeneticProfile | undefined>
@@ -413,6 +429,27 @@ export class QueryStore
 		}
 	}
 
+	// DOWNLOAD
+
+	private readonly dict_geneticAlterationType_filenameSuffix:{[K in GeneticProfile['geneticAlterationType']]?: string} = {
+		"MUTATION_EXTENDED": 'mutations',
+		"COPY_NUMBER_ALTERATION": 'cna',
+		"MRNA_EXPRESSION": 'mrna',
+		"METHYLATION": 'methylation',
+		"PROTEIN_LEVEL": 'rppa',
+	};
+
+	@computed get downloadDataFilename()
+	{
+		let study = this.singleSelectedStudyId && this.treeData.map_studyId_cancerStudy.get(this.singleSelectedStudyId);
+		let profile = this.dict_geneticProfileId_geneticProfile[this.selectedProfileIds[0] as string];
+
+		if (!this.forDownloadTab || !study || !profile)
+			return 'cbioportal-data.txt';
+
+		let suffix = this.dict_geneticAlterationType_filenameSuffix[profile.geneticAlterationType] || profile.geneticAlterationType.toLowerCase();
+		return `cbioportal-${study.studyId}-${suffix}.txt`;
+	}
 
 	////////////////////////////////////////////////////////////////////////////////
 	// ACTIONS
@@ -472,6 +509,24 @@ export class QueryStore
 			this.replaceGene(geneSymbol, '');
 		this.geneQuery = normalizeQuery([this.geneQuery, ...toAppend].join(' '));
 	}
+
+	@action submit()
+	{
+		// chooseAction()
+	}
+
+	@action uploadToGenomeSpace()
+	{
+		// if (!validDownloadDataForm(this))
+		// 	return;
+
+		gsUploadByGet({
+			url: getSubmitQueryUrl(this),
+			filename: this.downloadDataFilename,
+			successCallback: savePath => alert('outer Saved to GenomeSpace as ' + savePath),
+			errorCallback: savePath => alert('outer ERROR saving to GenomeSpace as ' + savePath),
+		});
+	}
 }
 
 const queryStore = (window as any).queryStore = new QueryStore();
diff --git a/src/shared/components/query/download-data-form-validation.js b/src/shared/components/query/download-data-form-validation.js
new file mode 100644
index 00000000000..355c976e493
--- /dev/null
+++ b/src/shared/components/query/download-data-form-validation.js
@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2015 Memorial Sloan-Kettering Cancer Center.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS
+ * FOR A PARTICULAR PURPOSE. The software and documentation provided hereunder
+ * is on an "as is" basis, and Memorial Sloan-Kettering Cancer Center has no
+ * obligations to provide maintenance, support, updates, enhancements or
+ * modifications. In no event shall Memorial Sloan-Kettering Cancer Center be
+ * liable to any party for direct, indirect, special, incidental or
+ * consequential damages, including lost profits, arising out of the use of this
+ * software and its documentation, even if Memorial Sloan-Kettering Cancer
+ * Center has been advised of the possibility of such damage.
+ */
+
+/*
+ * This file is part of cBioPortal.
+ *
+ * cBioPortal is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+
+function validGeneSet(downloadDataParameters)
+{
+    var geneIds = "";
+
+    jQuery.each(downloadDataParameters, function(i, parameter) {
+        if (parameter.name == "gene_list") {
+            geneIds = parameter.value;
+        }
+    });
+
+    return !(geneIds == "");
+}
+
+function validCaseSet(downloadDataParameters)
+{
+    var caseIds = "";
+    var caseSetId = "";
+    var missingCaseSetId = true;
+    var USER_DEFINED_CASELIST = "-1";
+
+    jQuery.each(downloadDataParameters, function(i, parameter) {
+        if (parameter.name == "case_set_id") {
+            missingCaseSetId = false;
+            caseSetId = parameter.value;
+        }
+        else if (parameter.name == "case_ids") {
+            caseIds = parameter.value;
+        }
+    });
+
+    return !(missingCaseSetId || (caseSetId == USER_DEFINED_CASELIST && caseIds == ""));
+}
+
+function validGenomicProfile(downloadDataParameters)
+{
+    var foundGeneticProfileIds = false;
+
+    jQuery.each(downloadDataParameters, function(i, parameter) {
+        if (parameter.name == "genetic_profile_ids") {
+            foundGeneticProfileIds = true;
+        }
+    });
+
+    return foundGeneticProfileIds;
+}
+
+export function validDownloadDataForm(downloadDataParameters)
+{
+    if (!validGenomicProfile(downloadDataParameters)) {
+        alert("Invalid Genomic Profile Selected.");
+        return false;
+    }
+
+    if (!validCaseSet(downloadDataParameters)) {
+        alert("Invalid Patient/Case Set.");
+        return false;
+    }
+
+    if (!validGeneSet(downloadDataParameters)) {
+        alert("Invalid Gene Set.");
+        return false;
+    }
+
+    return true;
+}
diff --git a/src/shared/lib/debounceAsync.ts b/src/shared/lib/debounceAsync.ts
deleted file mode 100644
index f1e84eb9a79..00000000000
--- a/src/shared/lib/debounceAsync.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * A function created with debounceAsync() returns a new Promise
- * every time, but only the last promise created before invoking the
- * original function will be resolved after a specified delay.
- *
- * @author adufilie http://github.com/adufilie
- */
-
-export default function debounceAsync<R, F extends (...args:any[]) => PromiseLike<R>>(invoke:F, delay = 0):F
-{
-	function invokeLater(
-		context:any,
-		args:any[],
-		resolve:(result:PromiseLike<R>)=>void,
-		reject:(error:Error)=>void
-	) {
-		try
-		{
-			resolve(invoke.apply(context, args));
-		}
-		catch (e)
-		{
-			reject(e);
-		}
-	}
-
-	let timeout = 0;
-	return function(...args:any[]):PromiseLike<R> {
-		return new Promise<R>(
-			function(resolve, reject) {
-				window.clearTimeout(timeout);
-				timeout = window.setTimeout(invokeLater, delay, this, args, resolve, reject);
-			}
-		);
-	} as F;
-}
diff --git a/typings/build-url.d.ts b/typings/build-url.d.ts
new file mode 100644
index 00000000000..454d974c4c4
--- /dev/null
+++ b/typings/build-url.d.ts
@@ -0,0 +1,12 @@
+declare module 'build-url'
+{
+	type QueryParams = {[key:string]: undefined | string | ReadonlyArray<string>};
+	type Params = {
+		path?: string,
+		hash?: string,
+		queryParams?: QueryParams
+	}
+	function buildUrl(base:string|null, params:Params):string;
+	function buildUrl(params:Params):string;
+	export = buildUrl;
+}

From 4c45793aed3744c35e3f4171a7d83afc546c11c7 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 10 Mar 2017 09:50:50 -0500
Subject: [PATCH 078/133] Fix max-widths on labels

---
 src/shared/components/StudyList/styles.module.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index 314f76d3766..48bf2c9cb5c 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -53,6 +53,7 @@
 
 
   ul.StudyList {
+    margin: 0;
     padding: 0 15px;
   }
 
@@ -159,6 +160,7 @@ ul.StudyList {
       label {
         font: normal normal 400 15px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
         color: #1982b8;
+        margin: 0;
         padding: 5px 15px 5px 0;
       }
     }
@@ -167,6 +169,7 @@ ul.StudyList {
       label {
         font: normal normal 600 11px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
         color: #444;
+        margin: 0;
         padding: 0px 15px 0px 0;
         text-transform: uppercase;
       }
@@ -194,7 +197,7 @@ li.Study {
 
   .StudyName {
     color: #444;
-    max-width: 415px;
+    max-width: 380px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

From 406533717bb2520b52f1040b54229ee2ac79e3ad Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 10 Mar 2017 10:09:17 -0500
Subject: [PATCH 079/133] Fix label alignments

---
 src/shared/components/query/styles.module.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index a73294c0215..ba86719551e 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -283,12 +283,14 @@
 }
 
 .DataTypePrioritySelector {
+  align-items: flex-end;
+
   h2 {
     flex-grow: 0;
   }
 
   input[type="radio"] {
-      margin: 4px 6px 0 0;
+      margin: 0 6px 0 12px;
   }
 }
 

From 4cb3e4b4eea94e798a9fca733b7e108b57fba4af Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 10 Mar 2017 12:38:11 -0500
Subject: [PATCH 080/133] Update button styles

---
 src/globalStyles/global.scss                  | 38 +++++++++++++++----
 .../components/StudyList/styles.module.scss   |  1 +
 .../components/query/CancerStudySelector.tsx  |  4 +-
 .../components/query/QueryContainer.tsx       |  3 +-
 .../components/query/styles.module.scss       | 28 ++------------
 5 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/globalStyles/global.scss b/src/globalStyles/global.scss
index 6700490c7ba..a8b3ff7b35e 100755
--- a/src/globalStyles/global.scss
+++ b/src/globalStyles/global.scss
@@ -11,14 +11,37 @@ body {
 
 /* fix for legacy style isses. makes it bootstrap */
 #content .cbioportal-frontend {
-    h4 {
-     font-size:18px;
-     margin-top:10px;
-     margin-bottom:10px;
-      font-weight:500;
-      line-height:1.1;
-      color:$text-color;
+  h4 {
+    color: $text-color;
+    font-size: 18px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+}
+
+  /* Buttons */
+.cbioportal-frontend {
+
+  .cta {
+    background: rgb(17, 116, 167);
+    border: 1px solid rgba(0,0,0,0.05);
+    border-radius: 2px;
+    color: rgba(255, 255, 255, 0.90);
+    display: block;
+    text-align: center;
+    font: normal normal 500 11px/19px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 5px 10px;
+    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.1);
+
+    &:hover {
+      cursor: pointer;
+      background: #1f688e;
+      color: #fff;
+    }
   }
+  
 }
 
 .topBanner {
@@ -26,6 +49,7 @@ body {
   margin:0 auto;
 }
 
+/* Tables */
 th.reactable-header-sortable {
 
   &:focus {outline:0;}
diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index 48bf2c9cb5c..786970e31ad 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -172,6 +172,7 @@ ul.StudyList {
         margin: 0;
         padding: 0px 15px 0px 0;
         text-transform: uppercase;
+        white-space: nowrap;
       }
     }
   }
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index e3ec7c70c04..0fbd1134b9c 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -19,8 +19,8 @@ const styles = styles_any as {
 	cancerStudySelectorHeader: string,
 	selectable: string,
 	selected: string,
-	selectAll: string,
 	selectedCount: string,
+	selectAll: string,
 	noData: string,
 	selectionsExist: string,
 	cancerStudyName: string,
@@ -199,7 +199,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
 						}}
 					/>
 
-					<span className={styles.selectAll} onClick={() => logic.hack_handleSelectAll(!allSelected)}>
+					<span className={classNames('cta', styles.selectAll)} onClick={() => logic.hack_handleSelectAll(!allSelected)}>
 						{allSelected ? "Deselect All" : "Select All"}
 					</span>
 				</FlexRow>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 52d854560a2..b0b759e0252 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -5,6 +5,7 @@ import Dictionary = _.Dictionary;
 import CancerStudySelector from "./CancerStudySelector";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import * as styles_any from './styles.module.scss';
+import classNames from "../../lib/classNames";
 import GeneticProfileSelector from "./GeneticProfileSelector";
 import {observer} from "mobx-react";
 import queryStore from "./QueryStore";
@@ -119,7 +120,7 @@ export default class QueryContainer extends React.Component<{}, {}>
 				)}
 
 				<FlexRow padded className={styles.submitRow}>
-					<button className={styles.submit} onClick={() => this.store.submit()}>
+					<button className={classNames('cta', styles.submit)} onClick={() => this.store.submit()}>
 						Submit
 					</button>
 					{!!(this.store.forDownloadTab) && (
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index ba86719551e..2a8d58a3e0f 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -99,23 +99,7 @@
   }
 
   .selectAll {
-    background: rgb(17, 116, 167);
-    border: 1px solid rgba(0,0,0,0.05);
-    border-radius: 2px;
-    display: block;
-    text-align: center;
     text-transform: uppercase;
-    color: rgba(255, 255, 255, 0.90);
-    font: normal normal 500 11px/19px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    padding: 5px 10px;
-    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.1);
-    min-width: 115px;
-
-    &:hover {
-      cursor: pointer;
-      background: #1f688e;
-      color: #fff;
-    }
   }
 
   .noData,
@@ -512,16 +496,10 @@ label.transposeDataMatrix {
 
 div.submitRow {
   button.submit {
-    font-weight: 400;
+    font-weight: 300;
     font-size: 18px;
-    width: 235px;
-    padding: 10px 16px;
-    background-color: #e6e6e6;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    &:hover {
-      border-color: #adadad;
-    }
+    width: 100%;
+    padding: 10px 0;
   }
 
   button.genomeSpace {

From 00f3d0ee28a656e5ef3ccaec9802cbfc9e73c1ea Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 10 Mar 2017 14:53:12 -0500
Subject: [PATCH 081/133] oql syntax error highlight works now

---
 src/shared/api/urls.ts                        |  33 ++--
 .../components/query/GeneSetSelector.tsx      |  26 +++-
 .../components/query/GeneSymbolValidator.tsx  |  26 ++--
 .../components/query/QueryContainer.tsx       |   1 +
 src/shared/components/query/QueryStore.ts     | 141 ++++++++++++++++--
 .../components/query/SampleListSelector.tsx   |   3 +-
 src/shared/lib/oql/oql-parser.d.ts            | 125 +++++++++++++++-
 typings/build-url.d.ts                        |   4 +-
 8 files changed, 306 insertions(+), 53 deletions(-)

diff --git a/src/shared/api/urls.ts b/src/shared/api/urls.ts
index 4061804a8e1..e352b1570cb 100644
--- a/src/shared/api/urls.ts
+++ b/src/shared/api/urls.ts
@@ -28,22 +28,23 @@ export function getStudyViewUrl(studyId:string) {
 export function getStudySummaryUrl(studyId:string) {
     return cbioUrl('study', {id: studyId}, 'summary');
 }
-export function getSubmitQueryUrl(store:QueryStore)
-{
-    return cbioUrl('index.do', {
-        cancer_study_list: store.selectedStudyIds,
-        cancer_study_id: store.singleSelectedStudyId,
-        genetic_profile_ids_PROFILE_MUTATION_EXTENDED: '',
-        data_priority: store.dataTypePriorityCode + '',
-        case_set_id: store.selectedSampleListId,
-        case_ids: store.caseIds,
-        patient_case_select: store.caseIdsMode,
-        gene_set_choice: 'user-defined-list',
-        gene_list: store.geneQuery,
-        clinical_param_selection: '',
-        tab_index: store.forDownloadTab ? 'tab_download' : 'tab_visualize',
-        Action: 'Submit',
-    });
+
+type SubmitQueryUrlParams = {
+    cancer_study_list: ReadonlyArray<string>,
+    cancer_study_id: string,
+    genetic_profile_ids_PROFILE_MUTATION_EXTENDED: '',
+    data_priority: '0'|'1'|'2',
+    case_set_id: string,
+    case_ids: string,
+    patient_case_select: 'sample' | 'patient',
+    gene_set_choice: 'user-defined-list',
+    gene_list: string,
+    clinical_param_selection: '',
+    tab_index: 'tab_download' | 'tab_visualize',
+    Action: 'Submit',
+};
+export function getSubmitQueryUrl(params:SubmitQueryUrlParams) {
+    return cbioUrl('index.do', params);
 }
 export function getPubMedUrl(pmid:string) {
     return `http://www.ncbi.nlm.nih.gov/pubmed/${pmid}`;
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index cc58ceedcb8..0562954a050 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -10,6 +10,7 @@ import GeneSymbolValidator from "./GeneSymbolValidator";
 import classNames from "../../lib/classNames";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
 import {getOncoQueryDocUrl} from "../../api/urls";
+import {QueryStore} from "./QueryStore";
 
 const styles = styles_any as {
 	GeneSetSelector: string,
@@ -20,8 +21,12 @@ const styles = styles_any as {
 	notEmpty: string,
 };
 
+export interface GeneSetSelectorProps
+{
+}
+
 @observer
-export default class GeneSetSelector extends React.Component<{}, {}>
+export default class GeneSetSelector extends React.Component<GeneSetSelectorProps, {}>
 {
 	get store()
 	{
@@ -48,6 +53,20 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 		];
 	}
 
+	@computed get textAreaRef()
+	{
+		if (this.store.geneQueryErrorDisplayStatus === 'shouldFocus')
+			return (textArea:HTMLTextAreaElement) => {
+				let {error} = this.store.oql;
+				if (textArea && error)
+				{
+					textArea.focus();
+					textArea.setSelectionRange(error.start, error.end);
+					this.store.geneQueryErrorDisplayStatus = 'focused';
+				}
+			};
+	}
+
 	render()
 	{
 		return (
@@ -79,15 +98,14 @@ export default class GeneSetSelector extends React.Component<{}, {}>
 				</FlexRow>
 
 				<textarea
+					ref={this.textAreaRef}
 					className={classNames(styles.geneSet, this.store.geneQuery ? styles.notEmpty : styles.empty)}
 					rows={5}
 					cols={80}
 					placeholder="Enter HUGO Gene Symbols or Gene Aliases"
 					title="Enter HUGO Gene Symbols or Gene Aliases"
 					value={this.store.geneQuery}
-					onChange={event => {
-						this.store.geneQuery = (event.target as HTMLTextAreaElement).value;
-					}}
+					onChange={event => this.store.geneQuery = event.currentTarget.value}
 				/>
 
 				<GeneSymbolValidator/>
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 5022c143a50..3fcb8f7c363 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -32,7 +32,20 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 
 	render()
 	{
-		if (!this.store.oqlParserResult.length)
+		if (this.store.oql.error)
+			return (
+				<div className={styles.GeneSymbolValidator}>
+					<span className={styles.errorMessage}>
+						{`Cannot validate gene symbols because of invalid OQL. ${
+							this.store.geneQueryErrorDisplayStatus === 'unfocused'
+							? "Please click 'Submit' to see location of error."
+							: this.store.oql.error.message
+						}`}
+					</span>
+				</div>
+			);
+
+		if (!this.store.oql.query.length)
 			return null;
 
 		if (this.store.genes.isPending && this.store.genes.result.suggestions.length == 0)
@@ -45,17 +58,6 @@ export default class GeneSymbolValidator extends React.Component<{}, {}>
 				</div>
 			);
 
-		for (let result of this.store.oqlParserResult)
-			if (result.error)
-				return (
-					<div className={styles.GeneSymbolValidator}>
-						<span className={styles.errorMessage}>
-							Cannot validate gene symbols because of invalid OQL.
-							Please click 'Submit' to see location of error.
-						</span>
-					</div>
-				);
-
 		if (this.store.genes.result.suggestions.length)
 			return (
 				<div className={styles.GeneSymbolValidator}>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index b0b759e0252..5ad4161433e 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -7,6 +7,7 @@ import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import * as styles_any from './styles.module.scss';
 import classNames from "../../lib/classNames";
 import GeneticProfileSelector from "./GeneticProfileSelector";
+import {observable, computed, action} from 'mobx';
 import {observer} from "mobx-react";
 import queryStore from "./QueryStore";
 import DataTypePrioritySelector from "./DataTypePrioritySelector";
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 5e625c4ede6..9bce66e2879 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -13,6 +13,8 @@ import memoize from "memoize-weak-decorator";
 import AppConfig from 'appConfig';
 import {getSubmitQueryUrl} from "../../api/urls";
 import {gsUploadByGet} from "../../api/genomespace/gsuploadwindow";
+import {OQLQuery} from "../../lib/oql/oql-parser";
+import {SingleGeneQuery} from "../../lib/oql/oql-parser";
 
 export type GeneReplacement = {alias: string, genes: Gene[]};
 
@@ -170,12 +172,23 @@ export class QueryStore
 
 	@observable caseIdsMode:'sample'|'patient' = 'sample';
 
-	@observable geneQuery = '';
+	@observable _geneQuery = '';
+	get geneQuery()
+	{
+		return this._geneQuery;
+	}
+	set geneQuery(value:string)
+	{
+		// clear error when gene query is modified
+		this.geneQueryErrorDisplayStatus = 'unfocused';
+		this._geneQuery = value;
+	}
 
 	////////////////////////////////////////////////////////////////////////////////
 	// VISUAL OPTIONS
 	////////////////////////////////////////////////////////////////////////////////
 
+	@observable geneQueryErrorDisplayStatus:'unfocused'|'shouldFocus'|'focused' = 'unfocused';
 	@observable showMutSigPopup = false;
 	@observable showGisticPopup = false;
 	@observable.ref searchTextPresets:ReadonlyArray<string> = AppConfig.cancerStudySearchPresets;
@@ -350,17 +363,17 @@ export class QueryStore
 
 	// DATA TYPE PRIORITY
 
-	@computed get dataTypePriorityCode():0|1|2
+	@computed get dataTypePriorityCode():'0'|'1'|'2'
 	{
 		let {mutation, cna} = this.dataTypePriority;
 		if (mutation && cna)
-			return 0;
+			return '0';
 		if (mutation)
-			return 1;
+			return '1';
 		if (cna)
-			return 2;
+			return '2';
 
-		return 0;
+		return '0';
 	}
 
 	// GENETIC PROFILE
@@ -402,18 +415,30 @@ export class QueryStore
 
 	// GENES
 
-	@computed get oqlParserResult():{gene?: string, error?: SyntaxError}[]
+	@computed get oql()
 	{
 		try
 		{
 			let geneQuery = normalizeQuery(this.geneQuery);
-			if (!geneQuery)
-				return [];
-			return oql_parser.parse(geneQuery) || [];
+			return {
+				query: geneQuery && oql_parser.parse(geneQuery) || [],
+				error: undefined
+			};
 		}
-		catch (e)
+		catch ({offset})
 		{
-			return [{error: e as SyntaxError}];
+			let near, start, end;
+			if (offset === this.geneQuery.length)
+				[near, start, end] = ['after', offset - 1, offset];
+			else if (offset === 0)
+				[near, start, end] = ['before', offset, offset + 1];
+			else
+				[near, start, end] = ['at', offset, offset + 1];
+			let message = `OQL syntax error ${near} selected character; please fix and submit again.`;
+			return {
+				query: [] as OQLQuery,
+				error: {start, end, message}
+			};
 		}
 	}
 
@@ -421,7 +446,7 @@ export class QueryStore
 	{
 		try
 		{
-			return this.oqlParserResult.map(line => line.gene).filter(gene => gene && gene !== 'DATATYPES') as string[];
+			return this.oql.query.map(line => line.gene).filter(gene => gene && gene !== 'DATATYPES') as string[];
 		}
 		catch (e)
 		{
@@ -429,7 +454,28 @@ export class QueryStore
 		}
 	}
 
-	// DOWNLOAD
+	// SUBMIT
+
+	@computed get submitQueryUrl()
+	{
+		return '';
+		/*
+		return getSubmitQueryUrl({
+			cancer_study_list: this.selectedStudyIds,
+			cancer_study_id: this.singleSelectedStudyId || 'all',
+			genetic_profile_ids_PROFILE_MUTATION_EXTENDED: '',
+			data_priority: this.dataTypePriorityCode,
+			case_set_id: this.selectedSampleListId | '',
+			case_ids: this.caseIds,
+			patient_case_select: this.caseIdsMode,
+			gene_set_choice: 'user-defined-list',
+			gene_list: this.geneQuery,
+			clinical_param_selection: '',
+			tab_index: this.forDownloadTab ? 'tab_download' : 'tab_visualize',
+			Action: 'Submit',
+		});
+		*/
+	}
 
 	private readonly dict_geneticAlterationType_filenameSuffix:{[K in GeneticProfile['geneticAlterationType']]?: string} = {
 		"MUTATION_EXTENDED": 'mutations',
@@ -512,7 +558,70 @@ export class QueryStore
 
 	@action submit()
 	{
-		// chooseAction()
+		if (this.oql.error)
+		{
+			this.geneQueryErrorDisplayStatus = 'shouldFocus';
+			return;
+		}
+
+	/*
+		let haveExpInQuery = this.oqlParserResult.some(result => {
+			return (result.alterations || []).some(alt => alt.constr_val === 'EXP');
+		});
+
+		let selected_studies = $("#jstree").jstree(true).get_selected_leaves();
+		if (selected_studies.length === 0 && !window.changingTabs)
+		{
+			// select all by default
+			$("#jstree").jstree(true).select_node(window.jstree_root_id);
+			selected_studies = $("#jstree").jstree(true).get_selected_leaves()
+		}
+		if (selected_studies.length > 1)
+		{
+			if (haveExpInQuery)
+			{
+				createAnError("Expression filtering in the gene list is not supported when doing cross cancer queries.", $('#gene_list'));
+				return false;
+			}
+			$("#main_form").find("#select_multiple_studies").val("");
+			if ($("#tab_index").val() == 'tab_download')
+			{
+				$("#main_form").get(0).setAttribute('action', 'index.do');
+			}
+			else
+			{
+				let dataPriority = $('#main_form').find('input[name=data_priority]:checked').val();
+				let newSearch = $('#main_form').serialize() + '&Action=Submit#crosscancer/overview/' + dataPriority + '/' + encodeURIComponent($('#gene_list').val()) + '/' + encodeURIComponent(selected_studies.join(","));
+				evt.preventDefault();
+				window.location = 'cross_cancer.do?' + newSearch;
+				//$("#main_form").get(0).setAttribute('action','cross_cancer.do');
+			}
+
+		}
+		else if (selected_studies.length === 1)
+		{
+			$("#main_form").find("#select_single_study").val(selected_studies[0]);
+			$("#main_form").get(0).setAttribute('action', 'index.do');
+
+			if (haveExpInQuery)
+			{
+				let expCheckBox = $("." + PROFILE_MRNA_EXPRESSION);
+
+				if (expCheckBox.length > 0 && expCheckBox.prop('checked') == false)
+				{
+					createAnError("Expression specified in the list of genes, but not selected in the" +
+						" Genetic Profile Checkboxes.", $('#gene_list'));
+					evt.preventDefault();
+				}
+				else if (expCheckBox.length == 0)
+				{
+					createAnError("Expression specified in the list of genes, but not selected in the" +
+						" Genetic Profile Checkboxes.", $('#gene_list'));
+					evt.preventDefault();
+				}
+			}
+		}
+	*/
 	}
 
 	@action uploadToGenomeSpace()
@@ -521,7 +630,7 @@ export class QueryStore
 		// 	return;
 
 		gsUploadByGet({
-			url: getSubmitQueryUrl(this),
+			url: this.submitQueryUrl,
 			filename: this.downloadDataFilename,
 			successCallback: savePath => alert('outer Saved to GenomeSpace as ' + savePath),
 			errorCallback: savePath => alert('outer ERROR saving to GenomeSpace as ' + savePath),
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index 7cf73ac398f..f9d92b245d5 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -73,8 +73,7 @@ export default class SampleListSelector extends React.Component<{}, {}>
 
 	CaseIdsModeRadio = observer(
 		(props: {label: string, state:QueryStore['caseIdsMode']}) => (
-			<label
-			>
+			<label>
 				<input
 					type="radio"
 					checked={this.store.caseIdsMode == props.state}
diff --git a/src/shared/lib/oql/oql-parser.d.ts b/src/shared/lib/oql/oql-parser.d.ts
index 457f4f36dd2..f7d7f85ab94 100644
--- a/src/shared/lib/oql/oql-parser.d.ts
+++ b/src/shared/lib/oql/oql-parser.d.ts
@@ -11,4 +11,127 @@ export declare class SyntaxError
 	name: "SyntaxError";
 }
 
-export declare function parse(str:string):{gene: string}[] | undefined;
+export declare function parse(str:string):OQLQuery | undefined;
+
+// start
+// 	= Query
+// 	/ sp { return false; }
+//
+// br	= [\n] b:br
+//         / ";" b:br
+//         / [\n]
+// 	/ ";"
+//
+// NaturalNumber = number:[0-9]+ { return number.join("");}
+// Number = "-" number: Number { return "-"+number;}
+//         / whole_part:NaturalNumber "." decimal_part:NaturalNumber { return whole_part + "." + decimal_part;}
+//         / "." decimal_part:NaturalNumber { return "."+decimal_part;}
+//         / whole_part:NaturalNumber {return whole_part;}
+// String = word:[-_.@/a-zA-Z0-9*]+ { return word.join("") }
+// AminoAcid = letter:[GPAVLIMCFYWHKRQNEDST] { return letter; }
+export declare type AminoAcid = 'G'|'P'|'A'|'V'|'L'|'I'|'M'|'C'|'F'|'Y'|'W'|'H'|'K'|'R'|'Q'|'N'|'E'|'D'|'S'|'T';
+//
+// sp = space:[ \t\r]+
+// msp = space:[ \t\r]*
+//
+//
+// // Case-insensitive keywords
+// AMP = "AMP"i
+// HOMDEL = "HOMDEL"i
+// GAIN = "GAIN"i
+// HETLOSS = "HETLOSS"i
+// MUT = "MUT"i
+// EXP = "EXP"i
+// PROT = "PROT"i
+//
+// Query
+// 	= listofgenes:ListOfGenes msp br rest:Query { return listofgenes.map(function(gene) { return {"gene":gene, "alterations":false}; }).concat(rest); }
+//         / listofgenes:ListOfGenes msp br { return listofgenes.map(function(gene) { return {"gene":gene, "alterations":false}; }); }
+//         / listofgenes:ListOfGenes msp { return listofgenes.map(function(gene) { return {"gene":gene, "alterations":false}; }); }
+// 	/ msp first:SingleGeneQuery msp br rest:Query  { return [first].concat(rest); }
+// 	/ msp first:SingleGeneQuery msp br { return [first]; }
+// 	/ msp first:SingleGeneQuery msp { return [first]; }
+export declare type OQLQuery = SingleGeneQuery[];
+//
+// ListOfGenes
+// 	= msp geneName:String msp rest:ListOfGenes { return [geneName].concat(rest);}
+// 	/ msp geneName1:String msp geneName2:String msp{ return [geneName1, geneName2]; }
+//
+// SingleGeneQuery
+// 	= geneName:String msp ":" msp alts:Alterations { return {"gene": geneName, "alterations": alts}; }
+// 	/ geneName:String { return {"gene": geneName, "alterations":false}; }
+export declare type SingleGeneQuery = {gene:string, alterations:false|Alteration[]};
+//
+// Alterations
+// 	= a1:Alteration sp a2:Alterations { return [a1].concat(a2);}
+// 	/ a1:Alteration { return [a1]; }
+//
+// Alteration
+// 	= cmd:CNACommand { return cmd; }
+// 	/ cmd:EXPCommand { return cmd; }
+// 	/ cmd:PROTCommand { return cmd; }
+//         / cmd:FUSIONCommand { return cmd; }
+// // MUT has to go at the end because it matches an arbitrary string at the end as a type of mutation
+// 	/ cmd:MUTCommand { return cmd; }
+export declare type Alteration = CNACommand | EXPCommand | PROTCommand | FUSIONCommand | MUTCommand<Mutation>;
+//
+// CNAType
+//         = "AMP"i { return "AMP"; }
+//         / "HOMDEL"i { return "HOMDEL"; }
+//         / "GAIN"i { return "GAIN"; }
+//         / "HETLOSS"i { return "HETLOSS"; }
+export declare type CNAType = 'AMP' | 'HOMDEL' | 'GAIN' | 'HETLOSS';
+//
+// CNACommand
+// 	= "CNA"i msp op:ComparisonOp msp constrval:CNAType { return {"alteration_type":"cna", "constr_rel":op, "constr_val":constrval}; }
+//         / constrval:CNAType { return {"alteration_type":"cna", "constr_rel":"=", "constr_val":constrval}; }
+export declare type CNACommand = {alteration_type:'cna', constr_rel:ComparisonOp, constr_val:CNAType};
+//
+// MUTCommand
+// 	= "MUT" msp "=" msp mutation:Mutation { return {"alteration_type":"mut", "constr_rel": "=", "constr_type":mutation.type, "constr_val":mutation.value, "info":mutation.info}; }
+// 	/ "MUT" msp "!=" msp mutation:Mutation { return {"alteration_type":"mut", "constr_rel": "!=", "constr_type":mutation.type, "constr_val":mutation.value, "info":mutation.info}; }
+// 	/ "MUT" { return {"alteration_type":"mut"}; }
+// 	/ mutation:Mutation { return {"alteration_type":"mut", "constr_rel": "=", "constr_type":mutation.type, "constr_val":mutation.value, "info":mutation.info}; }
+export declare type MUTCommand<M extends Mutation> = (
+	{alteration_type:'mut'} |
+	{alteration_type:'mut', constr_rel:'='|'!=', constr_type:M['type'], constr_val:M['value'], info:M['info']}
+);
+//
+// EXPCommand
+// 	= "EXP" msp op:ComparisonOp msp constrval:Number { return {"alteration_type":"exp", "constr_rel":op, "constr_val":parseFloat(constrval)}; }
+export declare type EXPCommand = {alteration_type:'exp', constr_rel:ComparisonOp, constr_val:number};
+//
+// FUSIONCommand
+//         = "FUSION" { return {"alteration_type":"fusion"}; }
+export declare type FUSIONCommand = {alteration_type:'fusion'};
+//
+// PROTCommand
+// 	= "PROT" msp op:ComparisonOp msp constrval:Number { return {"alteration_type":"prot", "constr_rel":op, "constr_val":parseFloat(constrval)}; }
+export declare type PROTCommand = {alteration_type:'prot', constr_rel:ComparisonOp, constr_val:number};
+//
+// ComparisonOp
+// 	= ">=" { return ">="; }
+// 	/ "<=" { return "<="; }
+// 	/ ">" { return ">"; }
+// 	/ "<" { return "<"; }
+export declare type ComparisonOp = '>=' | '<=' | '>' | '<';
+//
+// Mutation
+// 	= "MISSENSE"i { return {"type":"class", "value":"MISSENSE", "info":{}}; }
+// 	/ "NONSENSE"i { return {"type":"class", "value":"NONSENSE", "info":{}}; }
+// 	/ "NONSTART"i { return {"type":"class", "value":"NONSTART", "info":{}}; }
+// 	/ "NONSTOP"i { return {"type":"class", "value":"NONSTOP", "info":{}}; }
+// 	/ "FRAMESHIFT"i { return {"type":"class", "value":"FRAMESHIFT", "info":{}}; }
+// 	/ "INFRAME"i { return {"type":"class", "value":"INFRAME", "info":{}}; }
+// 	/ "SPLICE"i { return {"type":"class", "value":"SPLICE", "info":{}}; }
+// 	/ "TRUNC"i { return {"type":"class", "value":"TRUNC", "info":{}}; }
+//         / "PROMOTER"i { return {"type":"class", "value":"PROMOTER", "info":{}}; }
+//         / letter:AminoAcid position:NaturalNumber string:String { return {"type":"name" , "value":(letter+position+string), "info":{}};}
+//         / letter:AminoAcid position:NaturalNumber { return {"type":"position", "value":parseInt(position), "info":{"amino_acid":letter.toUpperCase()}}; }
+// 	/ mutation_name:String { return {"type":"name", "value":mutation_name, "info":{}}; }
+export declare type MutationType = 'MISSENSE'|'NONSENSE'|'NONSTART'|'NONSTOP'|'FRAMESHIFT'|'INFRAME'|'SPLICE'|'TRUNC'|'PROMOTER';
+export declare type Mutation = (
+	{type:'class', value:MutationType, info:object} |
+	{type:'name', value:string, info:object} |
+	{type:'position', value:number, info:{amino_acid:AminoAcid}}
+);
diff --git a/typings/build-url.d.ts b/typings/build-url.d.ts
index 454d974c4c4..fd9bb6deecd 100644
--- a/typings/build-url.d.ts
+++ b/typings/build-url.d.ts
@@ -1,6 +1,6 @@
 declare module 'build-url'
 {
-	type QueryParams = {[key:string]: undefined | string | ReadonlyArray<string>};
+	export type QueryParams = {[key:string]: undefined | string | ReadonlyArray<string>};
 	type Params = {
 		path?: string,
 		hash?: string,
@@ -8,5 +8,5 @@ declare module 'build-url'
 	}
 	function buildUrl(base:string|null, params:Params):string;
 	function buildUrl(params:Params):string;
-	export = buildUrl;
+	export default buildUrl;
 }

From b05ad30d3473262961b3e0198aac26fb30af23b8 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 10 Mar 2017 16:18:41 -0500
Subject: [PATCH 082/133] fix bug in oql syntax error highlighting

---
 src/shared/components/query/QueryStore.ts      | 17 ++++++++---------
 src/shared/components/query/styles.module.scss |  1 +
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 9bce66e2879..5c46a11d0a1 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -419,7 +419,7 @@ export class QueryStore
 	{
 		try
 		{
-			let geneQuery = normalizeQuery(this.geneQuery);
+			let geneQuery = this.geneQuery;
 			return {
 				query: geneQuery && oql_parser.parse(geneQuery) || [],
 				error: undefined
@@ -563,14 +563,12 @@ export class QueryStore
 			this.geneQueryErrorDisplayStatus = 'shouldFocus';
 			return;
 		}
-
-	/*
-		let haveExpInQuery = this.oqlParserResult.some(result => {
-			return (result.alterations || []).some(alt => alt.constr_val === 'EXP');
+/*
+		let haveExpInQuery = this.oql.query.some(result => {
+			return (result.alterations || []).some(alt => alt.alteration_type === 'exp');
 		});
 
-		let selected_studies = $("#jstree").jstree(true).get_selected_leaves();
-		if (selected_studies.length === 0 && !window.changingTabs)
+		if (!this.selectedStudyIds.length)
 		{
 			// select all by default
 			$("#jstree").jstree(true).select_node(window.jstree_root_id);
@@ -598,9 +596,10 @@ export class QueryStore
 			}
 
 		}
-		else if (selected_studies.length === 1)
+		else if (this.singleSelectedStudyId)
 		{
-			$("#main_form").find("#select_single_study").val(selected_studies[0]);
+			// index.do
+
 			$("#main_form").get(0).setAttribute('action', 'index.do');
 
 			if (haveExpInQuery)
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 2a8d58a3e0f..5d91d4372b5 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -296,6 +296,7 @@
   }
 
   textarea.geneSet {
+    resize: vertical;
     &.empty {
     }
     &.notEmpty {

From ac693281335f74010b44cc04371f1899caf65151 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 10 Mar 2017 17:46:45 -0500
Subject: [PATCH 083/133] Progress on submit button

---
 src/shared/api/urls.ts                    |  19 +++-
 src/shared/components/query/QueryStore.ts | 102 +++++++++-------------
 2 files changed, 58 insertions(+), 63 deletions(-)

diff --git a/src/shared/api/urls.ts b/src/shared/api/urls.ts
index e352b1570cb..80a47db6537 100644
--- a/src/shared/api/urls.ts
+++ b/src/shared/api/urls.ts
@@ -32,7 +32,13 @@ export function getStudySummaryUrl(studyId:string) {
 type SubmitQueryUrlParams = {
     cancer_study_list: ReadonlyArray<string>,
     cancer_study_id: string,
-    genetic_profile_ids_PROFILE_MUTATION_EXTENDED: '',
+    genetic_profile_ids_PROFILE_MUTATION_EXTENDED: string,
+    genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION: string,
+    genetic_profile_ids_PROFILE_MRNA_EXPRESSION: string,
+    genetic_profile_ids_PROFILE_METHYLATION: string,
+    genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION: string,
+    Z_SCORE_THRESHOLD: string,
+	RPPA_SCORE_THRESHOLD: string,
     data_priority: '0'|'1'|'2',
     case_set_id: string,
     case_ids: string,
@@ -44,6 +50,17 @@ type SubmitQueryUrlParams = {
     Action: 'Submit',
 };
 export function getSubmitQueryUrl(params:SubmitQueryUrlParams) {
+    if (params.cancer_study_list.length > 1)
+        return cbioUrl(
+            'crosscancer.do',
+            {
+                cancer_study_list: '',
+                cancer_study_id: 'all',
+                ...params
+            },
+            `crosscancer/overview/${params.data_priority}/${encodeURIComponent(params.gene_list)}/${encodeURIComponent(params.cancer_study_list.join(','))}`
+        );
+
     return cbioUrl('index.do', params);
 }
 export function getPubMedUrl(pmid:string) {
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 5c46a11d0a1..0bff3368231 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -120,10 +120,10 @@ export class QueryStore
 		if (!studyId)
 			return undefined;
 
-		let mutSelect = this.isGeneticAlterationTypeSelected('MUTATION_EXTENDED');
-		let cnaSelect = this.isGeneticAlterationTypeSelected('COPY_NUMBER_ALTERATION');
-		let expSelect = this.isGeneticAlterationTypeSelected('MRNA_EXPRESSION');
-		let rppaSelect = this.isGeneticAlterationTypeSelected('PROTEIN_LEVEL');
+		let mutSelect = this.getSelectedProfileIdFromGeneticAlterationType('MUTATION_EXTENDED');
+		let cnaSelect = this.getSelectedProfileIdFromGeneticAlterationType('COPY_NUMBER_ALTERATION');
+		let expSelect = this.getSelectedProfileIdFromGeneticAlterationType('MRNA_EXPRESSION');
+		let rppaSelect = this.getSelectedProfileIdFromGeneticAlterationType('PROTEIN_LEVEL');
 		let sampleListId = studyId + "_all";
 
 		if (mutSelect && cnaSelect && !expSelect && !rppaSelect)
@@ -196,6 +196,7 @@ export class QueryStore
 	@observable showSelectedStudiesOnly:boolean = false;
 	@observable.shallow selectedCancerTypeIds:string[] = [];
 	@observable clickAgainToDeselectSingle:boolean = true;
+	@observable submitError = '';
 
 	@observable private _maxTreeDepth:number = 3;
 	@computed get maxTreeDepth()
@@ -398,12 +399,15 @@ export class QueryStore
 		return _.includes(this.selectedProfileIds, geneticProfileId);
 	}
 
-	isGeneticAlterationTypeSelected(geneticAlterationType:GeneticProfile['geneticAlterationType']):boolean
+	getSelectedProfileIdFromGeneticAlterationType(geneticAlterationType:GeneticProfile['geneticAlterationType']):string
 	{
-		return this.selectedProfileIds.some(profileId => {
+		for (let profileId of this.selectedProfileIds)
+		{
 			let profile = this.dict_geneticProfileId_geneticProfile[profileId];
-			return !!profile && profile.geneticAlterationType == geneticAlterationType;
-		});
+			if (profile && profile.geneticAlterationType == geneticAlterationType)
+				return profile.geneticProfileId;
+		}
+		return '';
 	}
 
 	// SAMPLE LIST
@@ -458,14 +462,22 @@ export class QueryStore
 
 	@computed get submitQueryUrl()
 	{
-		return '';
-		/*
+		let studyIds = this.selectedStudyIds;
+		if (!studyIds.length)
+			this.cancerStudies.result.map(study => study.studyId);
+
 		return getSubmitQueryUrl({
-			cancer_study_list: this.selectedStudyIds,
+			cancer_study_list: studyIds,
 			cancer_study_id: this.singleSelectedStudyId || 'all',
-			genetic_profile_ids_PROFILE_MUTATION_EXTENDED: '',
+			genetic_profile_ids_PROFILE_MUTATION_EXTENDED: this.getSelectedProfileIdFromGeneticAlterationType("MUTATION_EXTENDED"),
+			genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION: this.getSelectedProfileIdFromGeneticAlterationType("COPY_NUMBER_ALTERATION"),
+			genetic_profile_ids_PROFILE_MRNA_EXPRESSION: this.getSelectedProfileIdFromGeneticAlterationType("MRNA_EXPRESSION"),
+			genetic_profile_ids_PROFILE_METHYLATION: this.getSelectedProfileIdFromGeneticAlterationType("METHYLATION") || this.getSelectedProfileIdFromGeneticAlterationType("METHYLATION_BINARY"),
+			genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION: this.getSelectedProfileIdFromGeneticAlterationType("PROTEIN_LEVEL"),
+			Z_SCORE_THRESHOLD: this.zScoreThreshold,
+			RPPA_SCORE_THRESHOLD: this.rppaScoreThreshold,
 			data_priority: this.dataTypePriorityCode,
-			case_set_id: this.selectedSampleListId | '',
+			case_set_id: this.selectedSampleListId || '',
 			case_ids: this.caseIds,
 			patient_case_select: this.caseIdsMode,
 			gene_set_choice: 'user-defined-list',
@@ -474,7 +486,6 @@ export class QueryStore
 			tab_index: this.forDownloadTab ? 'tab_download' : 'tab_visualize',
 			Action: 'Submit',
 		});
-		*/
 	}
 
 	private readonly dict_geneticAlterationType_filenameSuffix:{[K in GeneticProfile['geneticAlterationType']]?: string} = {
@@ -482,6 +493,7 @@ export class QueryStore
 		"COPY_NUMBER_ALTERATION": 'cna',
 		"MRNA_EXPRESSION": 'mrna',
 		"METHYLATION": 'methylation',
+		"METHYLATION_BINARY": 'methylation',
 		"PROTEIN_LEVEL": 'rppa',
 	};
 
@@ -563,64 +575,30 @@ export class QueryStore
 			this.geneQueryErrorDisplayStatus = 'shouldFocus';
 			return;
 		}
-/*
+
 		let haveExpInQuery = this.oql.query.some(result => {
 			return (result.alterations || []).some(alt => alt.alteration_type === 'exp');
 		});
 
-		if (!this.selectedStudyIds.length)
-		{
-			// select all by default
-			$("#jstree").jstree(true).select_node(window.jstree_root_id);
-			selected_studies = $("#jstree").jstree(true).get_selected_leaves()
-		}
-		if (selected_studies.length > 1)
+		if (this.singleSelectedStudyId)
 		{
-			if (haveExpInQuery)
-			{
-				createAnError("Expression filtering in the gene list is not supported when doing cross cancer queries.", $('#gene_list'));
-				return false;
-			}
-			$("#main_form").find("#select_multiple_studies").val("");
-			if ($("#tab_index").val() == 'tab_download')
-			{
-				$("#main_form").get(0).setAttribute('action', 'index.do');
-			}
-			else
+			let expProfileSelected = this.selectedProfileIds.some(id => {
+				let profile = this.dict_geneticProfileId_geneticProfile[id];
+				return !!profile && profile.geneticAlterationType === 'MRNA_EXPRESSION';
+			});
+			if (haveExpInQuery && !expProfileSelected)
 			{
-				let dataPriority = $('#main_form').find('input[name=data_priority]:checked').val();
-				let newSearch = $('#main_form').serialize() + '&Action=Submit#crosscancer/overview/' + dataPriority + '/' + encodeURIComponent($('#gene_list').val()) + '/' + encodeURIComponent(selected_studies.join(","));
-				evt.preventDefault();
-				window.location = 'cross_cancer.do?' + newSearch;
-				//$("#main_form").get(0).setAttribute('action','cross_cancer.do');
+				this.submitError = "Expression specified in the list of genes, but not selected in the Genetic Profile Checkboxes.";
+				return;
 			}
-
 		}
-		else if (this.singleSelectedStudyId)
+		else if (haveExpInQuery)
 		{
-			// index.do
-
-			$("#main_form").get(0).setAttribute('action', 'index.do');
-
-			if (haveExpInQuery)
-			{
-				let expCheckBox = $("." + PROFILE_MRNA_EXPRESSION);
-
-				if (expCheckBox.length > 0 && expCheckBox.prop('checked') == false)
-				{
-					createAnError("Expression specified in the list of genes, but not selected in the" +
-						" Genetic Profile Checkboxes.", $('#gene_list'));
-					evt.preventDefault();
-				}
-				else if (expCheckBox.length == 0)
-				{
-					createAnError("Expression specified in the list of genes, but not selected in the" +
-						" Genetic Profile Checkboxes.", $('#gene_list'));
-					evt.preventDefault();
-				}
-			}
+			this.submitError = "Expression filtering in the gene list is not supported when doing cross cancer queries.";
+			return;
 		}
-	*/
+
+		window.location.href = this.submitQueryUrl;
 	}
 
 	@action uploadToGenomeSpace()

From 184702e8665f414d8dedc7026aeb679b158c3e15 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 10 Mar 2017 18:47:59 -0500
Subject: [PATCH 084/133] fix errors in generating url

---
 src/shared/api/urls.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/shared/api/urls.ts b/src/shared/api/urls.ts
index 80a47db6537..50a0a209223 100644
--- a/src/shared/api/urls.ts
+++ b/src/shared/api/urls.ts
@@ -38,27 +38,36 @@ type SubmitQueryUrlParams = {
     genetic_profile_ids_PROFILE_METHYLATION: string,
     genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION: string,
     Z_SCORE_THRESHOLD: string,
-	RPPA_SCORE_THRESHOLD: string,
+    RPPA_SCORE_THRESHOLD: string,
     data_priority: '0'|'1'|'2',
     case_set_id: string,
     case_ids: string,
-    patient_case_select: 'sample' | 'patient',
+    patient_case_select: 'sample'|'patient',
     gene_set_choice: 'user-defined-list',
     gene_list: string,
     clinical_param_selection: '',
-    tab_index: 'tab_download' | 'tab_visualize',
+    tab_index: 'tab_download'|'tab_visualize',
     Action: 'Submit',
 };
 export function getSubmitQueryUrl(params:SubmitQueryUrlParams) {
+    if (!params.gene_list)
+        params = {...params, gene_list: ' '};
+
     if (params.cancer_study_list.length > 1)
         return cbioUrl(
             'crosscancer.do',
             {
+                ...params,
                 cancer_study_list: '',
                 cancer_study_id: 'all',
-                ...params
             },
-            `crosscancer/overview/${params.data_priority}/${encodeURIComponent(params.gene_list)}/${encodeURIComponent(params.cancer_study_list.join(','))}`
+            `crosscancer/overview/${
+                params.data_priority
+            }/${
+                encodeURIComponent(params.gene_list)
+            }/${
+                encodeURIComponent(params.cancer_study_list.join(','))
+            }`
         );
 
     return cbioUrl('index.do', params);

From 76a5d1f71260cb7d98c0dac7b87239f407c3e560 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 14 Mar 2017 05:28:27 -0400
Subject: [PATCH 085/133] Use React context instead of static instance of
 QueryStore

---
 package.json                                  |  2 +
 src/pages/home/HomePage.tsx                   |  8 +--
 src/shared/components/StudyList/StudyList.tsx |  7 +--
 .../components/query/CancerStudySelector.tsx  |  6 +-
 .../query/DataTypePrioritySelector.tsx        | 10 +---
 .../components/query/GeneSetSelector.tsx      | 10 +---
 .../components/query/GeneSymbolValidator.tsx  | 10 +---
 .../query/GeneticProfileSelector.tsx          | 10 +---
 .../components/query/QueryAndDownloadTabs.tsx |  7 ++-
 .../components/query/QueryContainer.tsx       | 13 ++++-
 src/shared/components/query/QueryStore.ts     | 58 ++++++++++++++-----
 .../components/query/SampleListSelector.tsx   | 10 +---
 src/shared/lib/ContextUtils.ts                | 48 +++++++++++++++
 typings/missing.d.ts                          |  1 +
 14 files changed, 126 insertions(+), 74 deletions(-)
 create mode 100644 src/shared/lib/ContextUtils.ts

diff --git a/package.json b/package.json
index c07597cabe2..33a9f0086b6 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@types/react-redux": "^4.4.36",
     "@types/react-router": "^2.0.46",
     "@types/react-spinkit": "^1.1.29",
+    "@types/recompose": "^0.20.4",
     "@types/reselect": "^2.0.27",
     "@types/route-parser": "0.0.0",
     "@types/seamless-immutable": "^6.1.2",
@@ -132,6 +133,7 @@
     "reactable": "^0.14.1",
     "reactableMSK": "git+https://github.com/alisman/reactable.git",
     "recharts": "^0.20.5",
+    "recompose": "^0.22.0",
     "redux": "^3.6.0",
     "redux-actions": "^1.2.1",
     "redux-api-middleware": "^1.0.2",
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index fbf14a8f21c..eeb6afb7059 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -6,11 +6,11 @@ import devMode from "../../shared/lib/devMode";
 import {observer} from "mobx-react";
 import DevTools from "mobx-react-devtools";
 import {toJS, observable, action, computed, whyRun, expr} from "mobx";
-import queryStore from "../../shared/components/query/QueryStore";
 import LabeledCheckbox from "../../shared/components/labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
 import 'react-select/dist/react-select.css';
 import QueryAndDownloadTabs from "../../shared/components/query/QueryAndDownloadTabs";
+import {QueryStore} from "../../shared/components/query/QueryStore";
 
 function getRootElement()
 {
@@ -40,11 +40,11 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 		super(props);
 	}
 
-	get store() { return queryStore; }
+	store = new QueryStore();
 
 	public componentDidMount()
 	{
-	  this.exposeComponentRenderersToParentScript();
+		this.exposeComponentRenderersToParentScript();
 	}
 
 	exposeComponentRenderersToParentScript()
@@ -57,7 +57,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 		return (
 			<FlexRow padded flex={1} className={styles.HomePage}>
 
-				<QueryAndDownloadTabs/>
+				<QueryAndDownloadTabs store={this.store}/>
 
 				{!!(devMode.enabled) && (
 					<FlexCol padded overflow>
diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index 27600325bb6..e6881cfc2a0 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -4,9 +4,9 @@ import * as styles_any from './styles.module.scss';
 import classNames from "../../lib/classNames";
 import FontAwesome from "react-fontawesome";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
-import queryStore from "../query/QueryStore";
 import {observer} from "mobx-react";
 import {getStudySummaryUrl, getPubMedUrl} from "../../api/urls";
+import {QueryStoreComponent} from "../query/QueryStore";
 
 const styles = {
 	...styles_any as {
@@ -35,10 +35,9 @@ const styles = {
 };
 
 @observer
-export default class StudyList extends React.Component<{}, {}>
+export default class StudyList extends QueryStoreComponent<{}, {}>
 {
-	get store() { return queryStore; }
-	get logic() { return queryStore.studyListLogic; }
+	get logic() { return this.store.studyListLogic; }
 
 	render()
 	{
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 0fbd1134b9c..df2ad377691 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -9,10 +9,10 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
 import StudyList from "../StudyList/StudyList";
 import {observer} from "mobx-react";
-import queryStore from "./QueryStore";
 import {action, toJS, computed} from "mobx";
 import memoize from "memoize-weak-decorator";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
+import {QueryStoreComponent} from "./QueryStore";
 
 const styles = styles_any as {
 	CancerStudySelector: string,
@@ -46,15 +46,13 @@ export type ICancerStudySelectorProps = {
 };
 
 @observer
-export default class CancerStudySelector extends React.Component<ICancerStudySelectorProps, void>
+export default class CancerStudySelector extends QueryStoreComponent<ICancerStudySelectorProps, void>
 {
 	constructor(props: ICancerStudySelectorProps)
 	{
 		super(props);
 	}
 
-	get store() { return queryStore; }
-
 	@memoize
 	getCancerTypeListClickHandler<T>(node:CancerType)
 	{
diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index 88e9961859d..7d476e5f6fb 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -1,8 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
-import {QueryStore} from "./QueryStore";
+import {QueryStore, QueryStoreComponent} from "./QueryStore";
 import {toJS} from "mobx";
 import {observer} from "mobx-react";
 import {FlexRow} from "../flexbox/FlexBox";
@@ -12,13 +11,8 @@ const styles = styles_any as {
 };
 
 @observer
-export default class DataTypePrioritySelector extends React.Component<{}, {}>
+export default class DataTypePrioritySelector extends QueryStoreComponent<{}, {}>
 {
-	get store()
-	{
-		return queryStore;
-	}
-
 	render()
 	{
 		if (this.store.singleSelectedStudyId)
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 0562954a050..4f1f5814e61 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
 import ReactSelect from 'react-select';
 import {observer} from "mobx-react";
@@ -10,7 +9,7 @@ import GeneSymbolValidator from "./GeneSymbolValidator";
 import classNames from "../../lib/classNames";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
 import {getOncoQueryDocUrl} from "../../api/urls";
-import {QueryStore} from "./QueryStore";
+import {QueryStoreComponent} from "./QueryStore";
 
 const styles = styles_any as {
 	GeneSetSelector: string,
@@ -26,13 +25,8 @@ export interface GeneSetSelectorProps
 }
 
 @observer
-export default class GeneSetSelector extends React.Component<GeneSetSelectorProps, {}>
+export default class GeneSetSelector extends QueryStoreComponent<GeneSetSelectorProps, {}>
 {
-	get store()
-	{
-		return queryStore;
-	}
-
 	@computed get selectedGeneListOption()
 	{
 		let option = this.geneListOptions.find(opt => opt.value == this.store.geneQuery);
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 3fcb8f7c363..571ea97bb20 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
 import {observer} from "mobx-react";
 import Spinner from "react-spinkit";
 import FontAwesome from "react-fontawesome";
 import ReactSelect from 'react-select';
 import AsyncStatus from "../asyncStatus/AsyncStatus";
-import {GeneReplacement} from "./QueryStore";
+import {GeneReplacement, QueryStoreComponent} from "./QueryStore";
 
 const styles = styles_any as {
 	GeneSymbolValidator: string,
@@ -23,13 +22,8 @@ const styles = styles_any as {
 };
 
 @observer
-export default class GeneSymbolValidator extends React.Component<{}, {}>
+export default class GeneSymbolValidator extends QueryStoreComponent<{}, {}>
 {
-	get store()
-	{
-		return queryStore;
-	}
-
 	render()
 	{
 		if (this.store.oql.error)
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 0ca59af1914..9c7aa10266b 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -1,15 +1,14 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import {GeneticProfile} from "../../api/generated/CBioPortalAPI";
-import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
-import queryStore from "./QueryStore";
 import {action} from 'mobx';
 import {observer} from "mobx-react";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
 import classNames from "../../lib/classNames";
 import {FlexCol} from "../flexbox/FlexBox";
+import {QueryStoreComponent} from "./QueryStore";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
@@ -24,13 +23,8 @@ const styles = styles_any as {
 };
 
 @observer
-export default class GeneticProfileSelector extends React.Component<{}, {}>
+export default class GeneticProfileSelector extends QueryStoreComponent<{}, {}>
 {
-	get store()
-	{
-		return queryStore;
-	}
-
 	render()
 	{
 		if (!this.store.singleSelectedStudyId)
diff --git a/src/shared/components/query/QueryAndDownloadTabs.tsx b/src/shared/components/query/QueryAndDownloadTabs.tsx
index 355c651e3f9..ad868ecf771 100644
--- a/src/shared/components/query/QueryAndDownloadTabs.tsx
+++ b/src/shared/components/query/QueryAndDownloadTabs.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import queryStore from "./QueryStore";
 import {Tabs, Tab, default as ReactBootstrap} from 'react-bootstrap';
 import * as styles_any from './styles.module.scss';
 import {observer} from 'mobx-react';
 import QueryContainer from "./QueryContainer";
+import {QueryStoreComponent, QueryStore} from "./QueryStore";
 
 const styles = styles_any as {
 	QueryAndDownloadTabs: string,
@@ -11,6 +11,7 @@ const styles = styles_any as {
 
 interface IQueryAndDownloadTabsProps
 {
+	store:QueryStore;
 }
 
 @observer
@@ -18,7 +19,7 @@ export default class QueryAndDownloadTabs extends React.Component<IQueryAndDownl
 {
 	get store()
 	{
-		return queryStore;
+		return this.props.store;
 	}
 
 	onSelectTab = (eventKey:string) =>
@@ -39,7 +40,7 @@ export default class QueryAndDownloadTabs extends React.Component<IQueryAndDownl
 					<Tab eventKey='query' title="Query"/>
 					<Tab eventKey='download' title="Download Data"/>
 				</Tabs>
-				<QueryContainer/>
+				<QueryContainer store={this.props.store}/>
 			</div>
 		);
 	}
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 5ad4161433e..a271e5d267c 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -9,7 +9,6 @@ import classNames from "../../lib/classNames";
 import GeneticProfileSelector from "./GeneticProfileSelector";
 import {observable, computed, action} from 'mobx';
 import {observer} from "mobx-react";
-import queryStore from "./QueryStore";
 import DataTypePrioritySelector from "./DataTypePrioritySelector";
 import GeneSetSelector from "./GeneSetSelector";
 import SampleListSelector from "./SampleListSelector";
@@ -18,6 +17,8 @@ import GisticGeneSelector from "./GisticGeneSelector";
 import PopupWindow from "../popupWindow/PopupWindow";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
+import {QueryStore} from "./QueryStore";
+import {providesStoreContext} from "../../lib/ContextUtils";
 
 const styles = styles_any as {
 	QueryContainer: string,
@@ -32,12 +33,18 @@ const styles = styles_any as {
 	errorMessage: string,
 };
 
+interface QueryContainerProps
+{
+	store:QueryStore;
+}
+
+@providesStoreContext(QueryStore)
 @observer
-export default class QueryContainer extends React.Component<{}, {}>
+export default class QueryContainer extends React.Component<QueryContainerProps, {}>
 {
 	get store()
 	{
-		return queryStore;
+		return this.props.store;
 	}
 
     render():JSX.Element
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 0bff3368231..d719abcc42f 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -14,7 +14,7 @@ import AppConfig from 'appConfig';
 import {getSubmitQueryUrl} from "../../api/urls";
 import {gsUploadByGet} from "../../api/genomespace/gsuploadwindow";
 import {OQLQuery} from "../../lib/oql/oql-parser";
-import {SingleGeneQuery} from "../../lib/oql/oql-parser";
+import {ComponentGetsStoreContext} from "../../lib/ContextUtils";
 
 export type GeneReplacement = {alias: string, genes: Gene[]};
 
@@ -28,6 +28,32 @@ function normalizeQuery(geneQuery:string)
 	return geneQuery.replace(/^\s+|\s+$/g, '').replace(/ +/g, ' ').toUpperCase();
 }
 
+export type QueryParams = Pick<
+	QueryStore,
+	'searchText' |
+	'selectedStudyIds' |
+	'dataTypePriority' |
+	'selectedProfileIds' |
+	'zScoreThreshold' |
+	'rppaScoreThreshold' |
+	'selectedSampleListId' |
+	'caseIds' |
+	'caseIdsMode' |
+	'geneQuery'
+>;
+export const QueryParamsKeys:(keyof QueryParams)[] = [
+	'searchText',
+	'selectedStudyIds',
+	'dataTypePriority',
+	'selectedProfileIds',
+	'zScoreThreshold',
+	'rppaScoreThreshold',
+	'selectedSampleListId',
+	'caseIds',
+	'caseIdsMode',
+	'geneQuery',
+];
+
 // mobx observable
 export class QueryStore
 {
@@ -36,21 +62,18 @@ export class QueryStore
 		labelMobxPromises(this);
 	}
 
+	copyFrom(other:QueryParams)
+	{
+		// download tab does not appear anywhere except home page
+		this.forDownloadTab = false;
+
+		for (let key of QueryParamsKeys)
+			this[key] = other[key];
+	}
+
 	@computed get stateToSerialize()
 	{
-		let keys:Array<keyof this> = [
-			'searchText',
-			'selectedStudyIds',
-			'dataTypePriority',
-			'selectedProfileIds',
-			'zScoreThreshold',
-			'rppaScoreThreshold',
-			'selectedSampleListId',
-			'caseIds',
-			'caseIdsMode',
-			'geneQuery',
-		];
-		return _.pick(this, keys);
+		return _.pick(this, QueryParamsKeys);
 	}
 
 	////////////////////////////////////////////////////////////////////////////////
@@ -103,6 +126,10 @@ export class QueryStore
 			return profile && profile.showProfileInAnalysisTab;
 		});
 	}
+	set selectedProfileIds(value)
+	{
+		this._selectedProfileIds = value;
+	}
 
 	@observable zScoreThreshold:string = '2.0';
 
@@ -615,5 +642,4 @@ export class QueryStore
 	}
 }
 
-const queryStore = (window as any).queryStore = new QueryStore();
-export default queryStore;
+export const QueryStoreComponent = ComponentGetsStoreContext(QueryStore);
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/SampleListSelector.tsx
index f9d92b245d5..742fbd9dd3b 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/SampleListSelector.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
-import queryStore from "./QueryStore";
 import * as styles_any from './styles.module.scss';
 import ReactSelect from 'react-select';
 import {observer} from "mobx-react";
 import {computed} from 'mobx';
 import {FlexCol} from "../flexbox/FlexBox";
-import {QueryStore} from "./QueryStore";
+import {QueryStore, QueryStoreComponent} from "./QueryStore";
 import {getStudyViewUrl} from "../../api/urls";
 
 const styles = styles_any as {
@@ -14,13 +13,8 @@ const styles = styles_any as {
 };
 
 @observer
-export default class SampleListSelector extends React.Component<{}, {}>
+export default class SampleListSelector extends QueryStoreComponent<{}, {}>
 {
-	get store()
-	{
-		return queryStore;
-	}
-
 	@computed get sampleListOptions()
 	{
 		return [
diff --git a/src/shared/lib/ContextUtils.ts b/src/shared/lib/ContextUtils.ts
new file mode 100644
index 00000000000..f24aca36799
--- /dev/null
+++ b/src/shared/lib/ContextUtils.ts
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import withContext from 'recompose/withContext';
+//import getContext from 'recompose/getContext';
+
+interface ComponentClassWithState<P, S> {
+    new (props?: P, context?: any): React.Component<P, S>;
+    propTypes?: React.ValidationMap<P>;
+    contextTypes?: React.ValidationMap<any>;
+    childContextTypes?: React.ValidationMap<any>;
+    defaultProps?: P;
+    displayName?: string;
+}
+
+function createValidator<Store>(storeClass:new(..._:any[])=>Store)
+{
+	return function validator<T>(object: T, key: keyof T, componentName: string):Error|null {
+		if (object[key] instanceof storeClass)
+			return null;
+		return new Error(`Expecting ${componentName} to receive {store: ${storeClass.name}} from context`);
+	}
+}
+
+/**
+ * This can be used as a decorator to make a component provide a 'store' context property to its children.
+ */
+export function providesStoreContext<Store>(storeClass:new(..._:any[])=>Store)
+{
+	return withContext({store: createValidator(storeClass)}, ({store}:{store:Store}) => ({store}));
+}
+
+/**
+ * Extends React.Component by adding a <code>store</code> getter which reads the <code>store</code> context property.
+ * Usage: class MyComponent extends ComponentGetsStoreContext(MyStore)<P, S> { }
+ */
+export function ComponentGetsStoreContext<Store>(storeClass:new(..._:any[])=>Store)
+{
+	return class ComponentGetsStoreContext<P, S> extends React.Component<P, S>
+	{
+		static contextTypes = {
+			store: createValidator(storeClass)
+		};
+
+		get store():Store
+		{
+			return this.context.store;
+		}
+	}
+}
diff --git a/typings/missing.d.ts b/typings/missing.d.ts
index f4a41f4ebaf..5b53b026af0 100644
--- a/typings/missing.d.ts
+++ b/typings/missing.d.ts
@@ -16,3 +16,4 @@ declare module 'expect';
 declare module 'expect-jsx';
 declare module 'parameter-validator';
 declare module 'better-react-spinkit';
+declare module 'recompose/withContext';

From 6993b94a1f1d56801fe81a9864c2fc21dba976ca Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 14 Mar 2017 09:19:53 -0400
Subject: [PATCH 086/133] linting

---
 .../query/GeneticProfileSelector.tsx          |  2 +-
 .../components/query/GisticGeneSelector.tsx   | 26 ++++++++--------
 .../components/query/MutSigGeneSelector.tsx   | 30 +++++++++++--------
 src/shared/lib/ContextUtils.ts                |  4 +--
 4 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 9c7aa10266b..774880418ca 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -74,7 +74,7 @@ export default class GeneticProfileSelector extends QueryStoreComponent<{}, {}>
 				<FontAwesome className={styles.infoIcon} name='question-circle' {...{title: profile.description}}/>
 			)}
 		</label>
-	);
+	)
 
 	renderGroup(geneticAlterationType:GeneticProfile['geneticAlterationType'], groupLabel:string)
 	{
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index 7fa80141ec2..ab1da61318e 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -173,18 +173,20 @@ class GisticGeneToggles extends React.Component<{gistic?: Gistic, map_geneSymbol
 	renderGeneToggles(genes: string[])
 	{
 		return genes.map(gene => (
-			<Observer children={() => {
-				let selected = !!this.props.map_geneSymbol_selected.get(gene);
-				return (
-					<span
-						key={gene}
-						className={classNames(styles.geneToggle, selected ? styles.selected : styles.notSelected)}
-						onClick={event => this.props.map_geneSymbol_selected.set(gene, !selected)}
-					>
-						{gene}
-					</span>
-				);
-			}}/>
+			<Observer>
+				{() => {
+					let selected = !!this.props.map_geneSymbol_selected.get(gene);
+					return (
+						<span
+							key={gene}
+							className={classNames(styles.geneToggle, selected ? styles.selected : styles.notSelected)}
+							onClick={event => this.props.map_geneSymbol_selected.set(gene, !selected)}
+						>
+							{gene}
+						</span>
+					);
+				}}
+			</Observer>
 		));
 	}
 
diff --git a/src/shared/components/query/MutSigGeneSelector.tsx b/src/shared/components/query/MutSigGeneSelector.tsx
index b44098e7d2a..058bf881f9f 100644
--- a/src/shared/components/query/MutSigGeneSelector.tsx
+++ b/src/shared/components/query/MutSigGeneSelector.tsx
@@ -89,25 +89,29 @@ export default class MutSigGeneSelector extends React.Component<MutSigGeneSelect
 			header: (
 				<div className={styles.selectionColumnHeader}>
 					<span>All</span>
-					<Observer children={() => (
-						<LabeledCheckbox
-							checked={this.selectedGenes.length > 0}
-							indeterminate={this.selectedGenes.length > 0 && this.selectedGenes.length < this.allGenes.length}
-							onChange={event => this.selectAll(event.target.checked)}
-						/>
-					)}/>
+					<Observer>
+						{() => (
+							<LabeledCheckbox
+								checked={this.selectedGenes.length > 0}
+								indeterminate={this.selectedGenes.length > 0 && this.selectedGenes.length < this.allGenes.length}
+								onChange={event => this.selectAll(event.target.checked)}
+							/>
+						)}
+					</Observer>
 				</div>
 			),
 			formatter: ({name, rowData: mutSig}:IColumnFormatterData<MutSig>) => (
 				<Td key={name} column={name}>
 					{!!(mutSig) && (
 						<div className={styles.selectionColumnCell}>
-							<Observer children={() => (
-								<LabeledCheckbox
-									checked={!!this.map_geneSymbol_selected.get(mutSig.hugoGeneSymbol)}
-									onChange={event => this.map_geneSymbol_selected.set(mutSig.hugoGeneSymbol, event.target.checked)}
-								/>
-							)}/>
+							<Observer>
+								{() => (
+									<LabeledCheckbox
+										checked={!!this.map_geneSymbol_selected.get(mutSig.hugoGeneSymbol)}
+										onChange={event => this.map_geneSymbol_selected.set(mutSig.hugoGeneSymbol, event.target.checked)}
+									/>
+								)}
+							</Observer>
 						</div>
 					)}
 				</Td>
diff --git a/src/shared/lib/ContextUtils.ts b/src/shared/lib/ContextUtils.ts
index f24aca36799..35a2d3dd4ec 100644
--- a/src/shared/lib/ContextUtils.ts
+++ b/src/shared/lib/ContextUtils.ts
@@ -17,7 +17,7 @@ function createValidator<Store>(storeClass:new(..._:any[])=>Store)
 		if (object[key] instanceof storeClass)
 			return null;
 		return new Error(`Expecting ${componentName} to receive {store: ${storeClass.name}} from context`);
-	}
+	};
 }
 
 /**
@@ -44,5 +44,5 @@ export function ComponentGetsStoreContext<Store>(storeClass:new(..._:any[])=>Sto
 		{
 			return this.context.store;
 		}
-	}
+	};
 }

From 6204a24220158769bfc7c9dee8e90c0d18a0028b Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 14 Mar 2017 11:00:54 -0400
Subject: [PATCH 087/133] slight adjustment for height of cancer study selector

---
 src/shared/components/query/styles.module.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 5d91d4372b5..1db46864489 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -46,6 +46,7 @@
   position: relative;
   overflow: hidden;
   user-select: none;
+  height: 400px;
 
   label {
     display: flex;
@@ -133,7 +134,7 @@
   }
 
   div.cancerStudySelectorBody {
-    height: 350px;
+    flex: 1;
   }
 
   div.cancerTypeListContainer,

From c9cbed8d5e5e2d85af131eb83b9a8a393a2e9dca Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Tue, 14 Mar 2017 11:09:16 -0400
Subject: [PATCH 088/133] Add lint-fix npm script

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 33a9f0086b6..420cde73842 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "test": "karma start karma.conf.js",
     "test:watch": "npm run test -- --watch",
     "lint": "tslint 'src/**/*.ts' 'src/**/*.tsx' --exclude 'src/shared/api/generated/**'",
+    "lint-fix": "tslint --fix 'src/**/*.ts' 'src/**/*.tsx' --exclude 'src/shared/api/generated/**'",
     "eslint": "eslint src/** --ext .js --ext .jsx --cache",
     "syncmock": "node src/test/fetchMockData.js --diff",
     "validate": "npm ls"

From a645d48d5e8d5fd6610755457631c0b2cb10f5bf Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 15 Mar 2017 13:29:09 -0400
Subject: [PATCH 089/133] Minor changes. Genome Space button callback added.

---
 src/globalStyles/global.scss                   |  2 +-
 src/shared/api/genomespace/gsuploadwindow.ts   | 18 ++++++++++--------
 .../components/query/QueryAndDownloadTabs.tsx  |  8 ++++++--
 src/shared/components/query/QueryContainer.tsx |  3 +--
 src/shared/components/query/QueryStore.ts      |  2 +-
 src/shared/components/query/styles.module.scss |  2 +-
 6 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/globalStyles/global.scss b/src/globalStyles/global.scss
index a8b3ff7b35e..a890caf5f5e 100755
--- a/src/globalStyles/global.scss
+++ b/src/globalStyles/global.scss
@@ -24,7 +24,7 @@ body {
   /* Buttons */
 .cbioportal-frontend {
 
-  .cta {
+  .cta { // "Call To Action"
     background: rgb(17, 116, 167);
     border: 1px solid rgba(0,0,0,0.05);
     border-radius: 2px;
diff --git a/src/shared/api/genomespace/gsuploadwindow.ts b/src/shared/api/genomespace/gsuploadwindow.ts
index 60566139dcf..dbf730cc804 100644
--- a/src/shared/api/genomespace/gsuploadwindow.ts
+++ b/src/shared/api/genomespace/gsuploadwindow.ts
@@ -16,12 +16,14 @@ export function gsUploadByGet(config:{url:string, filename?:string, successCallb
         filenameParam = "&fileName=" + config.filename;
     }
 
-    let newWin:Window & any = window.open(gsUploadUrl + dest + filenameParam, "GenomeSpace Upload", "height=340px,width=550px");
+    let newWin = window.open(gsUploadUrl + dest + filenameParam, "GenomeSpace Upload", "height=340px,width=550px");
+    if (!newWin)
+        return alert('GenomeSpace popup was blocked by the browser');
     newWin.focus();
 
-    if (config['successCallback'] != null) newWin.setCallbackOnGSUploadComplete = config['successCallback'];
+    if (config['successCallback'] != null) (newWin as any).setCallbackOnGSUploadComplete = config['successCallback'];
 
-    if (config['errorCallback'] != null) newWin.setCallbackOnGSUploadError = config['errorCallback'];
+    if (config['errorCallback'] != null) (newWin as any).setCallbackOnGSUploadError = config['errorCallback'];
 }
 
 export function gsLocationByGet(config:{successCallback:Callback, errorCallback?:Callback}){
@@ -29,7 +31,7 @@ export function gsLocationByGet(config:{successCallback:Callback, errorCallback?
 
     let gsUploadUrl = jsuiRoot +"/upload/loadUrlToGenomespace.html?getLocation=true";
 
-    let newWin:Window & any = window.open(gsUploadUrl, "GenomeSpace Upload", "height=360px,width=600px");
+    let newWin = window.open(gsUploadUrl, "GenomeSpace Upload", "height=360px,width=600px");
 
     let successCallback = config['successCallback'];
     window.addEventListener( "message",
@@ -40,18 +42,18 @@ export function gsLocationByGet(config:{successCallback:Callback, errorCallback?
 
     newWin.focus();
 
-    if (config['errorCallback'] != null) newWin.setCallbackOnGSUploadError = config['errorCallback'];
+    if (config['errorCallback'] != null) (newWin as any).setCallbackOnGSUploadError = config['errorCallback'];
 }
 
 export function gsSelectFileByGet(config:{successCallback:Callback, errorCallback?:Callback}){
     // expect an object with url, filename (optional), successCallback, errorCallback (optional)
     let gsUploadUrl = jsuiRoot +"/upload/loadUrlToGenomespace.html?getFile=true";
-    let newWin:Window & any = window.open(gsUploadUrl , "GenomeSpace Upload", "height=340px,width=550px");
+    let newWin = window.open(gsUploadUrl , "GenomeSpace Upload", "height=340px,width=550px");
     newWin.focus();
 
-    newWin.setCallbackOnGSLocationComplete = config['successCallback'];
+    (newWin as any).setCallbackOnGSLocationComplete = config['successCallback'];
 
-    if (config['errorCallback'] != null) newWin.setCallbackOnGSUploadError = config['errorCallback'];
+    if (config['errorCallback'] != null) (newWin as any).setCallbackOnGSUploadError = config['errorCallback'];
 }
 
 export async function gsUploadByPost(formData:any){
diff --git a/src/shared/components/query/QueryAndDownloadTabs.tsx b/src/shared/components/query/QueryAndDownloadTabs.tsx
index ad868ecf771..639faf8aeb8 100644
--- a/src/shared/components/query/QueryAndDownloadTabs.tsx
+++ b/src/shared/components/query/QueryAndDownloadTabs.tsx
@@ -9,11 +9,15 @@ const styles = styles_any as {
 	QueryAndDownloadTabs: string,
 };
 
+const DOWNLOAD = 'download';
+const QUERY = 'query';
+
 interface IQueryAndDownloadTabsProps
 {
 	store:QueryStore;
 }
 
+
 @observer
 export default class QueryAndDownloadTabs extends React.Component<IQueryAndDownloadTabsProps, {}>
 {
@@ -24,7 +28,7 @@ export default class QueryAndDownloadTabs extends React.Component<IQueryAndDownl
 
 	onSelectTab = (eventKey:string) =>
 	{
-		this.store.forDownloadTab = eventKey === 'download';
+		this.store.forDownloadTab = eventKey === DOWNLOAD;
 	}
 
 	render()
@@ -34,7 +38,7 @@ export default class QueryAndDownloadTabs extends React.Component<IQueryAndDownl
 				<Tabs
 					id='QueryAndDownloadTabs'
 					animation={false}
-					activeKey={this.store.forDownloadTab ? 'download' : 'query'}
+					activeKey={this.store.forDownloadTab ? DOWNLOAD : QUERY}
 					onSelect={this.onSelectTab as ReactBootstrap.SelectCallback}
 				>
 					<Tab eventKey='query' title="Query"/>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index a271e5d267c..da291acfcbe 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -132,8 +132,7 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
 						Submit
 					</button>
 					{!!(this.store.forDownloadTab) && (
-						//<script src="https://gsui.genomespace.org/jsui/upload/gsuploadwindow.js" type="text/javascript"></script>
-						<button className={styles.genomeSpace}>
+						<button className={styles.genomeSpace} onClick={() => this.store.sendToGenomeSpace()}>
 							Send to GenomeSpace
 						</button>
 					)}
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index d719abcc42f..f1b961eec4c 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -628,7 +628,7 @@ export class QueryStore
 		window.location.href = this.submitQueryUrl;
 	}
 
-	@action uploadToGenomeSpace()
+	@action sendToGenomeSpace()
 	{
 		// if (!validDownloadDataForm(this))
 		// 	return;
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 1db46864489..3cfa28f7207 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -500,7 +500,7 @@ div.submitRow {
   button.submit {
     font-weight: 300;
     font-size: 18px;
-    width: 100%;
+    width: 240px;
     padding: 10px 0;
   }
 

From 06743ba940aa13d10f4428e3de2718e6590af6fa Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 15 Mar 2017 13:41:31 -0400
Subject: [PATCH 090/133] Hide GenomeSpace button

---
 src/config/development.config.ts               | 2 +-
 src/config/production.config.ts                | 2 +-
 src/config/test.config.ts                      | 2 +-
 src/shared/components/query/QueryContainer.tsx | 3 ++-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/config/development.config.ts b/src/config/development.config.ts
index 8be3682f007..9b48ab3485a 100644
--- a/src/config/development.config.ts
+++ b/src/config/development.config.ts
@@ -2,7 +2,7 @@ import {IAppConfig} from "./IAppConfig";
 
 const config:IAppConfig = {
     //host: 'cbioportal-rc.herokuapp.com',
-    genomespaceEnabled: true,
+    genomespaceEnabled: false,
     cancerStudySearchPresets: [
         'tcga',
         'tcga -provisional',
diff --git a/src/config/production.config.ts b/src/config/production.config.ts
index 6d31e68edcc..6737880c226 100644
--- a/src/config/production.config.ts
+++ b/src/config/production.config.ts
@@ -2,7 +2,7 @@ import {IAppConfig} from "./IAppConfig";
 
 const config:IAppConfig = {
     //host: 'cbioportal-rc.herokuapp.com',
-    genomespaceEnabled: true,
+    genomespaceEnabled: false,
     cancerStudySearchPresets: [
         'tcga',
         'tcga -provisional',
diff --git a/src/config/test.config.ts b/src/config/test.config.ts
index 8be3682f007..9b48ab3485a 100644
--- a/src/config/test.config.ts
+++ b/src/config/test.config.ts
@@ -2,7 +2,7 @@ import {IAppConfig} from "./IAppConfig";
 
 const config:IAppConfig = {
     //host: 'cbioportal-rc.herokuapp.com',
-    genomespaceEnabled: true,
+    genomespaceEnabled: false,
     cancerStudySearchPresets: [
         'tcga',
         'tcga -provisional',
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index da291acfcbe..3dc81b29376 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -19,6 +19,7 @@ import AsyncStatus from "../asyncStatus/AsyncStatus";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import {QueryStore} from "./QueryStore";
 import {providesStoreContext} from "../../lib/ContextUtils";
+import AppConfig from "appConfig";
 
 const styles = styles_any as {
 	QueryContainer: string,
@@ -131,7 +132,7 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
 					<button className={classNames('cta', styles.submit)} onClick={() => this.store.submit()}>
 						Submit
 					</button>
-					{!!(this.store.forDownloadTab) && (
+					{!!(this.store.forDownloadTab && AppConfig.genomespaceEnabled) && (
 						<button className={styles.genomeSpace} onClick={() => this.store.sendToGenomeSpace()}>
 							Send to GenomeSpace
 						</button>

From 3b08623cf10ea3e15734ba2ab8c850268032c3ee Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 16 Mar 2017 12:35:42 -0400
Subject: [PATCH 091/133] query params loading from url and saving in history

---
 package.json                                  |   1 +
 src/pages/home/HomePage.tsx                   |   2 +-
 src/shared/api/genomespace/genomespace.ts     |  52 -----
 .../api/{genomespace => }/gsuploadwindow.ts   |   0
 src/shared/api/urls.ts                        |  44 -----
 .../components/StudyList/StudyListLogic.ts    |  17 +-
 src/shared/components/flexbox/FlexBox.tsx     |  30 ++-
 src/shared/components/query/QueryStore.ts     | 187 ++++++++++++++----
 src/shared/lib/ContextUtils.ts                |  12 +-
 typings/build-url.d.ts                        |   4 +-
 typings/url-parse.d.ts                        |  26 +++
 11 files changed, 201 insertions(+), 174 deletions(-)
 delete mode 100644 src/shared/api/genomespace/genomespace.ts
 rename src/shared/api/{genomespace => }/gsuploadwindow.ts (100%)
 create mode 100644 typings/url-parse.d.ts

diff --git a/package.json b/package.json
index 420cde73842..4dbf209825e 100644
--- a/package.json
+++ b/package.json
@@ -161,6 +161,7 @@
     "underscore": "^1.8.3",
     "url": "^0.11.0",
     "url-loader": "^0.5.7",
+    "url-parse": "^1.1.8",
     "webpack": "^1.14.0",
     "webpack-fail-plugin": "^1.0.5",
     "webpack-raphael": "^2.1.4"
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index eeb6afb7059..f8d57ed6567 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -40,7 +40,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 		super(props);
 	}
 
-	store = new QueryStore();
+	store = new QueryStore(window.location.href);
 
 	public componentDidMount()
 	{
diff --git a/src/shared/api/genomespace/genomespace.ts b/src/shared/api/genomespace/genomespace.ts
deleted file mode 100644
index 45aadc6e4c7..00000000000
--- a/src/shared/api/genomespace/genomespace.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {gsUploadByGet} from "./gsuploadwindow";
-import {GeneticProfile, CancerStudy} from "../generated/CBioPortalAPI";
-import {getSubmitQueryUrl} from "../urls";
-
-/** Copyright (c) 2007 Memorial Sloan-Kettering Cancer Center.
- **
- ** Code written by: Ethan Cerami, Benjamin Gross
- ** Authors: Ethan Cerami, Gary Bader, Chris Sander, Benjamin Gross
- ** Modified by Jim Robinson for use with IGV
- **
- ** This library is free software; you can redistribute it and/or modify it
- ** under the terms of the GNU Lesser General Public License as published
- ** by the Free Software Foundation; either version 2.1 of the License, or
- ** any later version.
- **
- ** This library is distributed in the hope that it will be useful, but
- ** WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF
- ** MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE.  The software and
- ** documentation provided hereunder is on an "as is" basis, and
- ** Memorial Sloan-Kettering Cancer Center
- ** has no obligations to provide maintenance, support,
- ** updates, enhancements or modifications.  In no event shall
- ** Memorial Sloan-Kettering Cancer Center
- ** be liable to any party for direct, indirect, special,
- ** incidental or consequential damages, including lost profits, arising
- ** out of the use of this software and its documentation, even if
- ** Memorial Sloan-Kettering Cancer Center
- ** has been advised of the possibility of such damage.  See
- ** the GNU Lesser General Public License for more details.
- **
- ** You should have received a copy of the GNU Lesser General Public License
- ** along with this library; if not, write to the Free Software Foundation,
- ** Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
- **/
-
-function uploadUrlByGetToGS(dataURL:string, filename:string)
-{
-    let dest = "";
-    let onComplete = function(savePath:string){
-        alert('outer Saved to GenomeSpace as ' + savePath);
-    };
-    let onError = function(savePath:string){
-        alert('outer ERROR saving to GenomeSpace as ' + savePath);
-    };
-    gsUploadByGet({
-        url: dataURL,
-        filename: filename,
-        successCallback: onComplete,
-        errorCallback: onError
-    });
-    return false;
-};
diff --git a/src/shared/api/genomespace/gsuploadwindow.ts b/src/shared/api/gsuploadwindow.ts
similarity index 100%
rename from src/shared/api/genomespace/gsuploadwindow.ts
rename to src/shared/api/gsuploadwindow.ts
diff --git a/src/shared/api/urls.ts b/src/shared/api/urls.ts
index 50a0a209223..23f239701ad 100644
--- a/src/shared/api/urls.ts
+++ b/src/shared/api/urls.ts
@@ -28,50 +28,6 @@ export function getStudyViewUrl(studyId:string) {
 export function getStudySummaryUrl(studyId:string) {
     return cbioUrl('study', {id: studyId}, 'summary');
 }
-
-type SubmitQueryUrlParams = {
-    cancer_study_list: ReadonlyArray<string>,
-    cancer_study_id: string,
-    genetic_profile_ids_PROFILE_MUTATION_EXTENDED: string,
-    genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION: string,
-    genetic_profile_ids_PROFILE_MRNA_EXPRESSION: string,
-    genetic_profile_ids_PROFILE_METHYLATION: string,
-    genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION: string,
-    Z_SCORE_THRESHOLD: string,
-    RPPA_SCORE_THRESHOLD: string,
-    data_priority: '0'|'1'|'2',
-    case_set_id: string,
-    case_ids: string,
-    patient_case_select: 'sample'|'patient',
-    gene_set_choice: 'user-defined-list',
-    gene_list: string,
-    clinical_param_selection: '',
-    tab_index: 'tab_download'|'tab_visualize',
-    Action: 'Submit',
-};
-export function getSubmitQueryUrl(params:SubmitQueryUrlParams) {
-    if (!params.gene_list)
-        params = {...params, gene_list: ' '};
-
-    if (params.cancer_study_list.length > 1)
-        return cbioUrl(
-            'crosscancer.do',
-            {
-                ...params,
-                cancer_study_list: '',
-                cancer_study_id: 'all',
-            },
-            `crosscancer/overview/${
-                params.data_priority
-            }/${
-                encodeURIComponent(params.gene_list)
-            }/${
-                encodeURIComponent(params.cancer_study_list.join(','))
-            }`
-        );
-
-    return cbioUrl('index.do', params);
-}
 export function getPubMedUrl(pmid:string) {
     return `http://www.ncbi.nlm.nih.gov/pubmed/${pmid}`;
 }
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 9aabe4431ea..05fac8f40e7 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -186,20 +186,11 @@ export default class StudyListLogic
 		let clickedStudyIds:string[];
 		let meta = this.getMetadata(node);
 
-		if (this.store.forDownloadTab)
-		{
-			// on download tab, we can only select one study
-			if (!meta.isCancerType)
-				this.store.selectedStudyIds = [(node as CancerStudy).studyId];
-		}
+		if (meta.isCancerType)
+			clickedStudyIds = this.getDescendantCancerStudies(node).map(study => study.studyId);
 		else
-		{
-			if (meta.isCancerType)
-				clickedStudyIds = this.getDescendantCancerStudies(node).map(study => study.studyId);
-			else
-				clickedStudyIds = [(node as CancerStudy).studyId];
-			this.handleCheckboxStudyIds(clickedStudyIds, checked);
-		}
+			clickedStudyIds = [(node as CancerStudy).studyId];
+		this.handleCheckboxStudyIds(clickedStudyIds, checked);
 	}
 
 	private handleCheckboxStudyIds(clickedStudyIds:string[], checked:boolean)
diff --git a/src/shared/components/flexbox/FlexBox.tsx b/src/shared/components/flexbox/FlexBox.tsx
index 1859cb12c0f..0d36c3ac542 100644
--- a/src/shared/components/flexbox/FlexBox.tsx
+++ b/src/shared/components/flexbox/FlexBox.tsx
@@ -8,7 +8,6 @@
 */
 
 import * as React from "react";
-import * as _ from 'lodash';
 import styles from './styles.module.scss';
 import classNames from "shared/lib/classNames";
 
@@ -19,28 +18,25 @@ export interface IFlexBoxProps <T> extends React.HTMLProps<T>
 	overflow?:boolean;
 }
 
-export class IFlexBoxProps<T>
+function renderBox<T>(props:IFlexBoxProps<T>, flexDirection:"row"|"column"):JSX.Element
 {
-	static renderBox<T>(props:IFlexBoxProps<T>, flexDirection:"row"|"column"):JSX.Element
-	{
-		let {padded, overflow, flex, ...attributes} = props;
-		let style:React.CSSProperties = {
-			flex,
-			display: "flex",
-			overflow: overflow ? "visible" : "auto",
-			...props.style,
-			flexDirection
-		};
-		let className = classNames(props.className, styles[flexDirection], padded && styles.padded);
-		return <div {...attributes as React.HTMLAttributes<HTMLDivElement>} style={style} className={className}/>;
-	}
+	let {padded, overflow, flex, ...attributes} = props;
+	let style:React.CSSProperties = {
+		flex,
+		display: "flex",
+		overflow: overflow ? "visible" : "auto",
+		...props.style,
+		flexDirection
+	};
+	let className = classNames(props.className, styles[flexDirection], padded && styles.padded);
+	return <div {...attributes as React.HTMLAttributes<HTMLDivElement>} style={style} className={className}/>;
 }
 
 export class FlexRow extends React.Component<IFlexBoxProps<FlexRow>, {}>
 {
 	render():JSX.Element
 	{
-		return IFlexBoxProps.renderBox(this.props, "row");
+		return renderBox(this.props, "row");
 	}
 }
 
@@ -48,6 +44,6 @@ export class FlexCol extends React.Component<IFlexBoxProps<FlexCol>, {}>
 {
 	render():JSX.Element
 	{
-		return IFlexBoxProps.renderBox(this.props, "column");
+		return renderBox(this.props, "column");
 	}
 }
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index f1b961eec4c..01d3328eff6 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -8,13 +8,33 @@ import {remoteData} from "../../api/remoteData";
 import {labelMobxPromises, cached, debounceAsync} from "mobxpromise";
 import internalClient from "../../api/cbioportalInternalClientInstance";
 import oql_parser from "../../lib/oql/oql-parser";
-import {SyntaxError} from "../../lib/oql/oql-parser";
 import memoize from "memoize-weak-decorator";
 import AppConfig from 'appConfig';
-import {getSubmitQueryUrl} from "../../api/urls";
-import {gsUploadByGet} from "../../api/genomespace/gsuploadwindow";
+import {gsUploadByGet} from "../../api/gsuploadwindow";
 import {OQLQuery} from "../../lib/oql/oql-parser";
 import {ComponentGetsStoreContext} from "../../lib/ContextUtils";
+import urlParse from 'url-parse';
+import {buildCBioPortalUrl, BuildUrlParams} from "../../api/urls";
+import {buildUrl} from "build-url";
+
+type CancerStudyQueryUrlParams = {
+	cancer_study_id: string,
+	genetic_profile_ids_PROFILE_MUTATION_EXTENDED: string,
+	genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION: string,
+	genetic_profile_ids_PROFILE_MRNA_EXPRESSION: string,
+	genetic_profile_ids_PROFILE_METHYLATION: string,
+	genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION: string,
+	Z_SCORE_THRESHOLD: string,
+	RPPA_SCORE_THRESHOLD: string,
+	data_priority: '0'|'1'|'2',
+	case_set_id: string,
+	case_ids: string,
+	patient_case_select: 'sample'|'patient',
+	gene_list: string,
+	tab_index: 'tab_download'|'tab_visualize',
+	transpose_matrix?: 'on',
+	Action: 'Submit',
+};
 
 export type GeneReplacement = {alias: string, genes: Gene[]};
 
@@ -25,10 +45,10 @@ function isInteger(str:string)
 
 function normalizeQuery(geneQuery:string)
 {
-	return geneQuery.replace(/^\s+|\s+$/g, '').replace(/ +/g, ' ').toUpperCase();
+	return geneQuery.replace(/^\s+|\s+$/g, '').replace(/[ \+]+/g, ' ').toUpperCase();
 }
 
-export type QueryParams = Pick<
+export type CancerStudyQueryParams = Pick<
 	QueryStore,
 	'searchText' |
 	'selectedStudyIds' |
@@ -41,7 +61,7 @@ export type QueryParams = Pick<
 	'caseIdsMode' |
 	'geneQuery'
 >;
-export const QueryParamsKeys:(keyof QueryParams)[] = [
+export const QueryParamsKeys:(keyof CancerStudyQueryParams)[] = [
 	'searchText',
 	'selectedStudyIds',
 	'dataTypePriority',
@@ -57,12 +77,14 @@ export const QueryParamsKeys:(keyof QueryParams)[] = [
 // mobx observable
 export class QueryStore
 {
-	constructor()
+	constructor(urlWithInitialParams?:string)
 	{
 		labelMobxPromises(this);
+		if (urlWithInitialParams)
+			this.setParamsFromUrl(urlWithInitialParams);
 	}
 
-	copyFrom(other:QueryParams)
+	copyFrom(other:CancerStudyQueryParams)
 	{
 		// download tab does not appear anywhere except home page
 		this.forDownloadTab = false;
@@ -86,7 +108,16 @@ export class QueryStore
 
 	@observable searchText:string = '';
 
-	@observable.ref selectedStudyIds:ReadonlyArray<string> = [];
+	@observable.ref private _selectedStudyIds:ReadonlyArray<string> = [];
+	@computed get selectedStudyIds()
+	{
+		let ids = this._selectedStudyIds;
+		return this.forDownloadTab ? ids.slice(-1) : ids;
+	}
+	set selectedStudyIds(ids)
+	{
+		this._selectedStudyIds = this.forDownloadTab ? ids.slice(-1) : ids;
+	}
 
 	@observable dataTypePriority = {mutation: true, cna: true};
 
@@ -403,6 +434,22 @@ export class QueryStore
 
 		return '0';
 	}
+	set dataTypePriorityCode(code:'0'|'1'|'2')
+	{
+		switch (code)
+		{
+			default:
+			case '0':
+				this.dataTypePriority = {mutation: true, cna: true};
+				break;
+			case '1':
+				this.dataTypePriority = {mutation: true, cna: false};
+				break;
+			case '2':
+				this.dataTypePriority = {mutation: false, cna: true};
+				break;
+		}
+	}
 
 	// GENETIC PROFILE
 
@@ -487,34 +534,6 @@ export class QueryStore
 
 	// SUBMIT
 
-	@computed get submitQueryUrl()
-	{
-		let studyIds = this.selectedStudyIds;
-		if (!studyIds.length)
-			this.cancerStudies.result.map(study => study.studyId);
-
-		return getSubmitQueryUrl({
-			cancer_study_list: studyIds,
-			cancer_study_id: this.singleSelectedStudyId || 'all',
-			genetic_profile_ids_PROFILE_MUTATION_EXTENDED: this.getSelectedProfileIdFromGeneticAlterationType("MUTATION_EXTENDED"),
-			genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION: this.getSelectedProfileIdFromGeneticAlterationType("COPY_NUMBER_ALTERATION"),
-			genetic_profile_ids_PROFILE_MRNA_EXPRESSION: this.getSelectedProfileIdFromGeneticAlterationType("MRNA_EXPRESSION"),
-			genetic_profile_ids_PROFILE_METHYLATION: this.getSelectedProfileIdFromGeneticAlterationType("METHYLATION") || this.getSelectedProfileIdFromGeneticAlterationType("METHYLATION_BINARY"),
-			genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION: this.getSelectedProfileIdFromGeneticAlterationType("PROTEIN_LEVEL"),
-			Z_SCORE_THRESHOLD: this.zScoreThreshold,
-			RPPA_SCORE_THRESHOLD: this.rppaScoreThreshold,
-			data_priority: this.dataTypePriorityCode,
-			case_set_id: this.selectedSampleListId || '',
-			case_ids: this.caseIds,
-			patient_case_select: this.caseIdsMode,
-			gene_set_choice: 'user-defined-list',
-			gene_list: this.geneQuery,
-			clinical_param_selection: '',
-			tab_index: this.forDownloadTab ? 'tab_download' : 'tab_visualize',
-			Action: 'Submit',
-		});
-	}
-
 	private readonly dict_geneticAlterationType_filenameSuffix:{[K in GeneticProfile['geneticAlterationType']]?: string} = {
 		"MUTATION_EXTENDED": 'mutations',
 		"COPY_NUMBER_ALTERATION": 'cna',
@@ -536,10 +555,92 @@ export class QueryStore
 		return `cbioportal-${study.studyId}-${suffix}.txt`;
 	}
 
+	@computed get urlParams():BuildUrlParams
+	{
+		let params: CancerStudyQueryUrlParams = {
+			cancer_study_id: this.singleSelectedStudyId || 'all',
+			genetic_profile_ids_PROFILE_MUTATION_EXTENDED: this.getSelectedProfileIdFromGeneticAlterationType("MUTATION_EXTENDED"),
+			genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION: this.getSelectedProfileIdFromGeneticAlterationType("COPY_NUMBER_ALTERATION"),
+			genetic_profile_ids_PROFILE_MRNA_EXPRESSION: this.getSelectedProfileIdFromGeneticAlterationType("MRNA_EXPRESSION"),
+			genetic_profile_ids_PROFILE_METHYLATION: this.getSelectedProfileIdFromGeneticAlterationType("METHYLATION") || this.getSelectedProfileIdFromGeneticAlterationType("METHYLATION_BINARY"),
+			genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION: this.getSelectedProfileIdFromGeneticAlterationType("PROTEIN_LEVEL"),
+			Z_SCORE_THRESHOLD: this.zScoreThreshold,
+			RPPA_SCORE_THRESHOLD: this.rppaScoreThreshold,
+			data_priority: this.dataTypePriorityCode,
+			case_set_id: this.selectedSampleListId || '',
+			case_ids: this.caseIds,
+			patient_case_select: this.caseIdsMode,
+			gene_list: this.geneQuery || ' ', // empty string won't work
+			tab_index: this.forDownloadTab ? 'tab_download' : 'tab_visualize',
+			transpose_matrix: this.transposeDataMatrix ? 'on' : undefined,
+			Action: 'Submit',
+		};
+
+		// The server will always transpose if transpose_matrix is present,
+		// so we must delete it from the params if we do not want to transpose.
+		if (!params.transpose_matrix)
+			delete params.transpose_matrix;
+
+		if (this.selectedStudyIds.length != 1)
+		{
+			let studyIds = this.selectedStudyIds;
+			if (!studyIds.length)
+				studyIds = this.cancerStudies.result.map(study => study.studyId);
+			return {
+				path: 'cross_cancer.do',
+				queryParams: params,
+				hash: (
+					`crosscancer/overview/${
+						params.data_priority
+					}/${
+						encodeURIComponent(params.gene_list)
+					}/${
+						encodeURIComponent(studyIds.join(','))
+					}`
+				),
+			};
+		}
+
+		return {path: 'index.do', queryParams: params};
+	}
+
 	////////////////////////////////////////////////////////////////////////////////
 	// ACTIONS
 	////////////////////////////////////////////////////////////////////////////////
 
+	@action
+	setParamsFromUrl(url:string)
+	{
+		let parsed = urlParse(url, true);
+		let params = parsed.query as Partial<CancerStudyQueryUrlParams>;
+		let hashParams;
+		{
+			let [/*crosscancer*/, /*overview*/, data_priority, gene_list, cancer_study_list] = parsed.hash.split('/');
+			hashParams = {
+				data_priority: data_priority as typeof params.data_priority,
+				gene_list: gene_list && decodeURIComponent(gene_list),
+				cancer_study_list: cancer_study_list && decodeURIComponent(cancer_study_list).split(','),
+			};
+		}
+
+		this.selectedStudyIds = hashParams.cancer_study_list || (params.cancer_study_id ? [params.cancer_study_id] : []);
+		this.selectedProfileIds = [
+			params.genetic_profile_ids_PROFILE_MUTATION_EXTENDED,
+			params.genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION,
+			params.genetic_profile_ids_PROFILE_MRNA_EXPRESSION,
+			params.genetic_profile_ids_PROFILE_METHYLATION,
+			params.genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION,
+		].filter(id => id) as string[];
+		this.zScoreThreshold = params.Z_SCORE_THRESHOLD || '2.0';
+		this.rppaScoreThreshold = params.RPPA_SCORE_THRESHOLD || '2.0';
+		this.dataTypePriorityCode = hashParams.data_priority || params.data_priority || '0';
+		this.selectedSampleListId = params.case_set_id;
+		this.caseIds = params.case_ids || '';
+		this.caseIdsMode = params.patient_case_select || 'sample';
+		this.geneQuery = normalizeQuery(hashParams.gene_list || params.gene_list || '');
+		this.forDownloadTab = params.tab_index === 'tab_download';
+	}
+
 	@action selectCancerType(cancerType:CancerType, multiSelect?:boolean)
 	{
 		let clickedCancerTypeId = cancerType.cancerTypeId;
@@ -625,7 +726,11 @@ export class QueryStore
 			return;
 		}
 
-		window.location.href = this.submitQueryUrl;
+		let historyUrl = buildUrl(window.location.href.split('?')[0], {...this.urlParams, path: undefined});
+		let newUrl = buildCBioPortalUrl(this.urlParams);
+		if (historyUrl != newUrl)
+			window.history.pushState(null, window.document.title, historyUrl);
+		window.location.href = newUrl;
 	}
 
 	@action sendToGenomeSpace()
@@ -634,10 +739,10 @@ export class QueryStore
 		// 	return;
 
 		gsUploadByGet({
-			url: this.submitQueryUrl,
+			url: buildCBioPortalUrl(this.urlParams),
 			filename: this.downloadDataFilename,
-			successCallback: savePath => alert('outer Saved to GenomeSpace as ' + savePath),
-			errorCallback: savePath => alert('outer ERROR saving to GenomeSpace as ' + savePath),
+			successCallback: savePath => alert('Saved to GenomeSpace as ' + savePath),
+			errorCallback: savePath => alert('ERROR saving to GenomeSpace as ' + savePath),
 		});
 	}
 }
diff --git a/src/shared/lib/ContextUtils.ts b/src/shared/lib/ContextUtils.ts
index 35a2d3dd4ec..8daeb94ba39 100644
--- a/src/shared/lib/ContextUtils.ts
+++ b/src/shared/lib/ContextUtils.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import withContext from 'recompose/withContext';
-//import getContext from 'recompose/getContext';
 
 interface ComponentClassWithState<P, S> {
     new (props?: P, context?: any): React.Component<P, S>;
@@ -16,12 +15,17 @@ function createValidator<Store>(storeClass:new(..._:any[])=>Store)
 	return function validator<T>(object: T, key: keyof T, componentName: string):Error|null {
 		if (object[key] instanceof storeClass)
 			return null;
-		return new Error(`Expecting ${componentName} to receive {store: ${storeClass.name}} from context`);
+		return new Error(`Expecting ${componentName} to receive {${JSON.stringify(key)}: ${storeClass.name}} from context`);
 	};
 }
 
 /**
- * This can be used as a decorator to make a component provide a 'store' context property to its children.
+ * This can be used as a decorator to make a component provide a <code>store</code> context property to its children.
+ * Usage:
+ *   <code>
+ *   @providesStoreContext(MyStore)
+ *   export class MyClass extends React.Component&lt;P, S&gt; { }
+ *   </code>
  */
 export function providesStoreContext<Store>(storeClass:new(..._:any[])=>Store)
 {
@@ -30,7 +34,7 @@ export function providesStoreContext<Store>(storeClass:new(..._:any[])=>Store)
 
 /**
  * Extends React.Component by adding a <code>store</code> getter which reads the <code>store</code> context property.
- * Usage: class MyComponent extends ComponentGetsStoreContext(MyStore)<P, S> { }
+ * Usage: <code>class MyComponent extends ComponentGetsStoreContext(MyStore)<P, S> { }</code>
  */
 export function ComponentGetsStoreContext<Store>(storeClass:new(..._:any[])=>Store)
 {
diff --git a/typings/build-url.d.ts b/typings/build-url.d.ts
index fd9bb6deecd..22c9deb02d0 100644
--- a/typings/build-url.d.ts
+++ b/typings/build-url.d.ts
@@ -6,7 +6,7 @@ declare module 'build-url'
 		hash?: string,
 		queryParams?: QueryParams
 	}
-	function buildUrl(base:string|null, params:Params):string;
-	function buildUrl(params:Params):string;
+	export function buildUrl(base:string|null, params:Params):string;
+	export function buildUrl(params:Params):string;
 	export default buildUrl;
 }
diff --git a/typings/url-parse.d.ts b/typings/url-parse.d.ts
new file mode 100644
index 00000000000..d3da7a927cc
--- /dev/null
+++ b/typings/url-parse.d.ts
@@ -0,0 +1,26 @@
+declare module "url-parse"
+{
+	export type ParsedQuery = {[key:string]: undefined | string | string[]};
+
+	export interface ParsedUrl
+	{
+		protocol: string; //The protocol scheme of the URL (e.g. http:).
+		slashes: string; //A boolean which indicates whether the protocol is followed by two forward slashes (//).
+		auth: string; //Authentication information portion (e.g. username:password).
+		username: string; //Username of basic authentication.
+		password: string; //Password of basic authentication.
+		host: string; //Host name with port number.
+		hostname: string; //Host name without port number.
+		port: string; //Optional port number.
+		pathname: string; //URL path.
+		query: string | ParsedQuery; //Parsed object containing query string, unless parsing is set to false.
+		hash: string; //The "fragment" portion of the URL including the pound-sign (#).
+		href: string; //The full URL.
+		origin: string; //The origin of the URL.
+	}
+
+	function URL(url:string, parseQueryString:true):ParsedUrl & {query: ParsedQuery};
+	function URL(url:string, parseQueryString?:false):ParsedUrl & {query: string};
+
+	export default URL;
+}

From 9da5cd747ebdc1baba22c025ab870423f1a2f9b6 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 16 Mar 2017 17:31:34 -0400
Subject: [PATCH 092/133] Various changes

---
 src/shared/components/StudyList/StudyList.tsx |  16 +-
 .../components/query/CancerStudySelector.tsx  |  10 +-
 ...leListSelector.tsx => CaseSetSelector.tsx} |  22 ++-
 .../components/query/QueryContainer.tsx       |   4 +-
 src/shared/components/query/QueryStore.ts     | 135 ++++++++++-------
 .../components/query/styles.module.scss       |   9 +-
 typings/react-select.d.ts                     | 142 ++++++++++++++++--
 7 files changed, 242 insertions(+), 96 deletions(-)
 rename src/shared/components/query/{SampleListSelector.tsx => CaseSetSelector.tsx} (76%)

diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index e6881cfc2a0..abbc0c01ce8 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -100,17 +100,17 @@ export default class StudyList extends QueryStoreComponent<{}, {}>
 				<li className={liClassName}>
 					<LabeledCheckbox
 						{...this.logic.getCheckboxProps(cancerType)}
-						inputProps={{
-							onChange: event => this.logic.onCheck(cancerType, (event.target as HTMLInputElement).checked)
-						}}
+						onChange={event => this.logic.onCheck(cancerType, (event.target as HTMLInputElement).checked)}
 					>
 						{indentArrow} 
 						<span className={styles.CancerTypeName}>
 							{cancerType.name}
 						</span>
-						<span className={styles.SelectAll}>
-							Select All
-						</span>
+						{!!(!this.store.forDownloadTab) && (
+							<span className={styles.SelectAll}>
+								Select All
+							</span>
+						)}
 					</LabeledCheckbox>
 				</li>
 			);
@@ -151,9 +151,7 @@ export default class StudyList extends QueryStoreComponent<{}, {}>
 		return (
 			<LabeledCheckbox
 				{...this.logic.getCheckboxProps(study)}
-				inputProps={{
-					onChange: event => this.logic.onCheck(study, (event.target as HTMLInputElement).checked)
-				}}
+				onChange={event => this.logic.onCheck(study, (event.target as HTMLInputElement).checked)}
 			>
 				<span className={styles.StudyName} title={study.name}>
 					{study.name}
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index df2ad377691..1d92cab4a9e 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -183,7 +183,6 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 						value={this.store.searchText}
 						autofocus={true}
 						options={searchTextOptions.map(str => ({label: str, value: str}))}
-						promptTextCreator={(label:string) => `Search for "${label}"`}
 						placeholder='Search...'
 						noResultsText={false}
 						onCloseResetsInput={false}
@@ -196,10 +195,11 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 							this.store.selectedCancerTypeIds = [];
 						}}
 					/>
-
-					<span className={classNames('cta', styles.selectAll)} onClick={() => logic.hack_handleSelectAll(!allSelected)}>
-						{allSelected ? "Deselect All" : "Select All"}
-					</span>
+					{!!(!this.store.forDownloadTab) && (
+						<span className={classNames('cta', styles.selectAll)} onClick={() => logic.hack_handleSelectAll(!allSelected)}>
+							{allSelected ? "Deselect All" : "Select All"}
+						</span>
+					)}
 				</FlexRow>
 
 				<FlexRow className={styles.cancerStudySelectorBody}>
diff --git a/src/shared/components/query/SampleListSelector.tsx b/src/shared/components/query/CaseSetSelector.tsx
similarity index 76%
rename from src/shared/components/query/SampleListSelector.tsx
rename to src/shared/components/query/CaseSetSelector.tsx
index 742fbd9dd3b..2808768f75e 100644
--- a/src/shared/components/query/SampleListSelector.tsx
+++ b/src/shared/components/query/CaseSetSelector.tsx
@@ -8,14 +8,16 @@ import {QueryStore, QueryStoreComponent} from "./QueryStore";
 import {getStudyViewUrl} from "../../api/urls";
 
 const styles = styles_any as {
-	SampleListSelector: string,
+	CaseSetSelector: string,
 	ReactSelect: string,
 };
 
+const CUSTOM_CASE_LIST_ID = '';
+
 @observer
-export default class SampleListSelector extends QueryStoreComponent<{}, {}>
+export default class CaseSetSelector extends QueryStoreComponent<{}, {}>
 {
-	@computed get sampleListOptions()
+	@computed get caseSetOptions()
 	{
 		return [
 			...this.store.sampleLists.result.map(sampleList => {
@@ -26,7 +28,7 @@ export default class SampleListSelector extends QueryStoreComponent<{}, {}>
 			}),
 			{
 				label: 'User-defined Case List',
-				value: ''
+				value: CUSTOM_CASE_LIST_ID
 			}
 		];
 	}
@@ -37,18 +39,22 @@ export default class SampleListSelector extends QueryStoreComponent<{}, {}>
 			return null;
 
 		return (
-			<FlexCol padded overflow className={styles.SampleListSelector}>
+			<FlexCol padded overflow className={styles.CaseSetSelector}>
 				<h2>Select Patient/Case Set:</h2>
 				<ReactSelect
 					className={styles.ReactSelect}
 					value={this.store.selectedSampleListId}
-					options={this.sampleListOptions}
-					onChange={option => this.store.selectedSampleListId = option ? option.value : undefined}
+					options={this.caseSetOptions}
+					clearable={this.store.selectedSampleListId != this.store.defaultSelectedSampleListId}
+					onChange={option => {
+						let value = option ? option.value : undefined;
+						this.store.selectedSampleListId = value === CUSTOM_CASE_LIST_ID ? '' : value;
+					}}
 				/>
 				<a href={getStudyViewUrl(this.store.singleSelectedStudyId)}>To build your own case set, try out our enhanced Study View.</a>
 
 				{!!(!this.store.selectedSampleListId) && (
-					<FlexCol>
+					<FlexCol padded>
 						<span>Enter case IDs below:</span>
 						<textarea
 							title="Enter case IDs"
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 3dc81b29376..6ca39b2d971 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -11,7 +11,6 @@ import {observable, computed, action} from 'mobx';
 import {observer} from "mobx-react";
 import DataTypePrioritySelector from "./DataTypePrioritySelector";
 import GeneSetSelector from "./GeneSetSelector";
-import SampleListSelector from "./SampleListSelector";
 import MutSigGeneSelector from "./MutSigGeneSelector";
 import GisticGeneSelector from "./GisticGeneSelector";
 import PopupWindow from "../popupWindow/PopupWindow";
@@ -20,6 +19,7 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import {QueryStore} from "./QueryStore";
 import {providesStoreContext} from "../../lib/ContextUtils";
 import AppConfig from "appConfig";
+import CaseSetSelector from "./CaseSetSelector";
 
 const styles = styles_any as {
 	QueryContainer: string,
@@ -69,7 +69,7 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
 				)}
 
 				{!!(this.store.singleSelectedStudyId) && (
-					<SampleListSelector/>
+					<CaseSetSelector/>
 				)}
 
 				{!!(!this.store.singleSelectedStudyId) && (
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 01d3328eff6..824be6f71a4 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -172,54 +172,7 @@ export class QueryStore
 	{
 		if (this._selectedSampleListId !== undefined)
 			return this._selectedSampleListId;
-
-		// compute default selection
-		let studyId = this.singleSelectedStudyId;
-		if (!studyId)
-			return undefined;
-
-		let mutSelect = this.getSelectedProfileIdFromGeneticAlterationType('MUTATION_EXTENDED');
-		let cnaSelect = this.getSelectedProfileIdFromGeneticAlterationType('COPY_NUMBER_ALTERATION');
-		let expSelect = this.getSelectedProfileIdFromGeneticAlterationType('MRNA_EXPRESSION');
-		let rppaSelect = this.getSelectedProfileIdFromGeneticAlterationType('PROTEIN_LEVEL');
-		let sampleListId = studyId + "_all";
-
-		if (mutSelect && cnaSelect && !expSelect && !rppaSelect)
-			sampleListId = studyId + "_cnaseq";
-		else if (mutSelect && !cnaSelect && !expSelect && !rppaSelect)
-			sampleListId = studyId + "_sequenced";
-		else if (!mutSelect && cnaSelect && !expSelect && !rppaSelect)
-			sampleListId = studyId + "_acgh";
-		else if (!mutSelect && !cnaSelect && expSelect && !rppaSelect)
-		{
-			if (this.isProfileSelected(studyId + '_mrna_median_Zscores'))
-				sampleListId = studyId + "_mrna";
-			else if (this.isProfileSelected(studyId + '_rna_seq_mrna_median_Zscores'))
-				sampleListId = studyId + "_rna_seq_mrna";
-			else if (this.isProfileSelected(studyId + '_rna_seq_v2_mrna_median_Zscores'))
-				sampleListId = studyId + "_rna_seq_v2_mrna";
-		}
-		else if ((mutSelect || cnaSelect) && expSelect && !rppaSelect)
-			sampleListId = studyId + "_3way_complete";
-		else if (!mutSelect && !cnaSelect && !expSelect && rppaSelect)
-			sampleListId = studyId + "_rppa";
-
-		// BEGIN HACK if not found
-		if (!this.dict_sampleListId_sampleList[sampleListId])
-		{
-			if (sampleListId === studyId + '_cnaseq')
-				sampleListId = studyId + '_cna_seq';
-			else if (sampleListId === studyId + "_3way_complete")
-				sampleListId = studyId + "_complete";
-
-		}
-		// END HACK
-
-		// if still not found
-		if (!this.dict_sampleListId_sampleList[sampleListId])
-			sampleListId = studyId + '_all';
-
-		return sampleListId;
+		return this.defaultSelectedSampleListId;
 	}
 	set selectedSampleListId(value)
 	{
@@ -228,7 +181,15 @@ export class QueryStore
 
 	@observable caseIds = '';
 
-	@observable caseIdsMode:'sample'|'patient' = 'sample';
+	@observable _caseIdsMode:'sample'|'patient' = 'sample';
+	@computed get caseIdsMode()
+	{
+		return this.selectedSampleListId ? 'sample' : this._caseIdsMode;
+	}
+	set caseIdsMode(value)
+	{
+		this._caseIdsMode = value;
+	}
 
 	@observable _geneQuery = '';
 	get geneQuery()
@@ -284,7 +245,12 @@ export class QueryStore
 			});
 		},
 		default: [],
-		reaction: () => this._selectedProfileIds = undefined
+		reaction: () => {
+			if (this._isFromUrlParams.selectedProfileIds)
+				this._isFromUrlParams.selectedProfileIds = false;
+			else
+				this._selectedProfileIds = undefined;
+		}
 	});
 
 	readonly sampleLists = remoteData({
@@ -298,7 +264,12 @@ export class QueryStore
 			return _.sortBy(sampleLists, sampleList => sampleList.name);
 		},
 		default: [],
-		reaction: () => this._selectedSampleListId = undefined
+		reaction: () => {
+			if (this._isFromUrlParams.selectedSampleListId)
+				this._isFromUrlParams.selectedSampleListId = false;
+			else
+				this._selectedSampleListId = undefined;
+		}
 	});
 
 	readonly mutSigForSingleStudy = remoteData({
@@ -486,6 +457,55 @@ export class QueryStore
 
 	// SAMPLE LIST
 
+	@computed get defaultSelectedSampleListId()
+	{
+		let studyId = this.singleSelectedStudyId;
+		if (!studyId)
+			return undefined;
+
+		let mutSelect = this.getSelectedProfileIdFromGeneticAlterationType('MUTATION_EXTENDED');
+		let cnaSelect = this.getSelectedProfileIdFromGeneticAlterationType('COPY_NUMBER_ALTERATION');
+		let expSelect = this.getSelectedProfileIdFromGeneticAlterationType('MRNA_EXPRESSION');
+		let rppaSelect = this.getSelectedProfileIdFromGeneticAlterationType('PROTEIN_LEVEL');
+		let sampleListId = studyId + "_all";
+
+		if (mutSelect && cnaSelect && !expSelect && !rppaSelect)
+			sampleListId = studyId + "_cnaseq";
+		else if (mutSelect && !cnaSelect && !expSelect && !rppaSelect)
+			sampleListId = studyId + "_sequenced";
+		else if (!mutSelect && cnaSelect && !expSelect && !rppaSelect)
+			sampleListId = studyId + "_acgh";
+		else if (!mutSelect && !cnaSelect && expSelect && !rppaSelect)
+		{
+			if (this.isProfileSelected(studyId + '_mrna_median_Zscores'))
+				sampleListId = studyId + "_mrna";
+			else if (this.isProfileSelected(studyId + '_rna_seq_mrna_median_Zscores'))
+				sampleListId = studyId + "_rna_seq_mrna";
+			else if (this.isProfileSelected(studyId + '_rna_seq_v2_mrna_median_Zscores'))
+				sampleListId = studyId + "_rna_seq_v2_mrna";
+		}
+		else if ((mutSelect || cnaSelect) && expSelect && !rppaSelect)
+			sampleListId = studyId + "_3way_complete";
+		else if (!mutSelect && !cnaSelect && !expSelect && rppaSelect)
+			sampleListId = studyId + "_rppa";
+
+		// BEGIN HACK if not found
+		if (!this.dict_sampleListId_sampleList[sampleListId])
+		{
+			if (sampleListId === studyId + '_cnaseq')
+				sampleListId = studyId + '_cna_seq';
+			else if (sampleListId === studyId + "_3way_complete")
+				sampleListId = studyId + "_complete";
+		}
+		// END HACK
+
+		// if still not found
+		if (!this.dict_sampleListId_sampleList[sampleListId])
+			sampleListId = studyId + '_all';
+
+		return sampleListId;
+	}
+
 	@computed get dict_sampleListId_sampleList():_.Dictionary<SampleList | undefined>
 	{
 		return _.keyBy(this.sampleLists.result, sampleList => sampleList.sampleListId);
@@ -608,8 +628,15 @@ export class QueryStore
 	// ACTIONS
 	////////////////////////////////////////////////////////////////////////////////
 
-	@action
-	setParamsFromUrl(url:string)
+	/**
+	 * This is used to prevent selections from being cleared automatically when new data is downloaded.
+	 */
+	private readonly _isFromUrlParams = {
+		selectedProfileIds: false,
+		selectedSampleListId: false,
+	};
+
+	@action setParamsFromUrl(url:string)
 	{
 		let parsed = urlParse(url, true);
 		let params = parsed.query as Partial<CancerStudyQueryUrlParams>;
@@ -639,6 +666,8 @@ export class QueryStore
 		this.caseIdsMode = params.patient_case_select || 'sample';
 		this.geneQuery = normalizeQuery(hashParams.gene_list || params.gene_list || '');
 		this.forDownloadTab = params.tab_index === 'tab_download';
+		this._isFromUrlParams.selectedProfileIds = true;
+		this._isFromUrlParams.selectedSampleListId = true;
 	}
 
 	@action selectCancerType(cancerType:CancerType, multiSelect?:boolean)
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 3cfa28f7207..4ae30200e44 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -35,7 +35,7 @@
 .CancerStudySelector,
 .GeneticProfileSelector,
 .DataTypePrioritySelector,
-.SampleListSelector,
+.CaseSetSelector,
 .GeneSetSelector {
   border: 1px solid rgb(170, 170, 170);
   border-radius: 10px;
@@ -275,13 +275,16 @@
   }
 
   input[type="radio"] {
-      margin: 0 6px 0 12px;
+    margin: 0 6px 0 12px;
   }
 }
 
-.SampleListSelector {
+.CaseSetSelector {
   .ReactSelect {
   }
+  input[type="radio"] {
+    margin-right: 6px;
+  }
 }
 
 .GeneSetSelector {
diff --git a/typings/react-select.d.ts b/typings/react-select.d.ts
index d3a6c619057..928e2d11bf7 100644
--- a/typings/react-select.d.ts
+++ b/typings/react-select.d.ts
@@ -1,21 +1,131 @@
 declare module 'react-select'
 {
-	export type ReactSelectOption = {label: string, value: any};
-
-    export interface ReactSelectProps<T>
-    {
-    	className?: string;
-		value?: T;
-		options: ReactSelectOption[];
-		onChange?: (option: ReactSelectOption | null) => void;
-		autofocus?: boolean;
-		autosize?: boolean;
+	export type ReactSelectOption<T> = {label: string, value: T};
+
+	export interface MenuRendererProps<T>
+	{
+		focusedOption: ReactSelectOption<T>,
+		instancePrefix: string,
+		onFocus: OptionComponentProps<T>['onFocus'],
+		onSelect: OptionComponentProps<T>['onSelect'],
+		optionClassName: ReactSelectProps<T>['optionClassName'],
+		optionComponent: ReactSelectProps<T>['optionComponent'],
+		optionRenderer: ReactSelectProps<T>['optionRenderer'],
+		options: ReactSelectOption<T>[],
+		valueArray: ReactSelectOption<T>[],
+		valueKey: ReactSelectProps<T>['valueKey'],
+		onOptionRef: (ref:HTMLElement, isFocused:boolean) => void
+	}
+
+	export interface OptionComponentProps<T>
+	{
+		children?: React.ReactNode,
+		className?: string,             // className (based on mouse position)
+		instancePrefix: string,         // unique prefix for the ids (used for aria)
+		isDisabled?: boolean,           // the option is disabled
+		isFocused?: boolean,            // the option is focused
+		isSelected?: boolean,           // the option is selected
+		onFocus?: React.MouseEventHandler<HTMLElement>, // method to handle mouseEnter on option element
+		onSelect?: (option:T, event:React.MouseEvent<HTMLElement>) => void, // method to handle click on option element
+		onUnfocus?: React.MouseEventHandler<HTMLElement>, // method to handle mouseLeave on option element
+		option: ReactSelectOption<T>,   // object that is base for that option
+		optionIndex: number,            // index of the option, used to generate unique ids for aria
+	}
+
+	export interface ValueComponentProps<T>
+	{
+		id?: string;
+		instancePrefix?: string;
+		disabled?: boolean;
+		onClick?: React.MouseEventHandler<HTMLElement>;
+		onRemove?: (value:T) => void;
+	}
+
+	export interface ArrowProps
+	{
+		onMouseDown: React.MouseEventHandler<HTMLElement>,
+		isOpen: boolean,
+	}
+
+	type ComponentRenderer<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
+
+	export interface ReactSelectProps<T>
+	{
+		addLabelText?: string,       // placeholder displayed when you want to add a label on a multi-value input
+		'aria-label'?: string,       // Aria label (for assistive tech)
+		'aria-labelledby'?: string,  // HTML ID of an element that should be used as the label (for assistive tech)
+		arrowRenderer?: ComponentRenderer<ArrowProps>,        // Create drop-down caret element
+		autoBlur?: boolean,          // automatically blur the component when an option is selected
+		autofocus?: boolean,         // autofocus the component on mount
+		autosize?: boolean,          // whether to enable autosizing or not
+		backspaceRemoves?: boolean,  // whether backspace removes an item if there is no text input
+		backspaceToRemoveMessage?: string,  // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label
+		className?: string,          // className for the outer element
+		clearAllText?: React.ReactNode, // title for the "clear" control when multi: true
+		clearRenderer?: () => React.ReactNode, // create clearable x element
+		clearValueText?: React.ReactNode, // title for the "clear" control
+		clearable?: boolean,         // should it be possible to reset value
+		deleteRemoves?: boolean,     // whether backspace removes an item if there is no text input
+		delimiter?: string,          // delimiter to use to join multiple values for the hidden field value
+		disabled?: boolean,          // whether the Select is disabled or not
+		escapeClearsValue?: boolean, // whether escape clears the value when the menu is closed
+		filterOption?: (option:ReactSelectOption<T>, filterString:string) => boolean, // method to filter a single option (option, filterString)
+		filterOptions?: any,         // boolean to enable default filtering or function to filter the options array ([options], filterString, [values])
+		ignoreAccents?: boolean,     // whether to strip diacritics when filtering
+		ignoreCase?: boolean,        // whether to perform case-insensitive filtering
+		inputProps?: object,         // custom attributes for the Input
+		inputRenderer?: ComponentRenderer<React.HTMLProps<HTMLInputElement>>, // returns a custom input component
+		instanceId?: string,         // set the components instanceId
+		isLoading?: boolean,         // whether the Select is loading externally or not (such as options being loaded)
+		joinValues?: boolean,        // joins multiple values into a single form field with the delimiter (legacy mode)
+		labelKey?: string,           // path of the label value in option objects
+		matchPos?: string,           // (any|start) match the start or entire string when filtering
+		matchProp?: string,          // (any|label|value) which option property to filter on
+		menuBuffer?: number,         // optional buffer (in px) between the bottom of the viewport and the bottom of the menu
+		menuContainerStyle?: object, // optional style to apply to the menu container
+		menuRenderer?: ComponentRenderer<MenuRendererProps<T>>, // renders a custom menu with options
+		menuStyle?: object,          // optional style to apply to the menu
+		multi?: boolean,             // multi-value input
+		name?: string,               // generates a hidden <input /> tag with this field name for html forms
+		noResultsText?: React.ReactNode, // placeholder displayed when there are no matching search results
+		onBlur?: React.FocusEventHandler<HTMLElement>,               // onBlur handler: function (event) {}
+		onBlurResetsInput?: boolean, // whether input is cleared on blur
+		onChange?: (option: ReactSelectOption<T> | null) => void, // onChange handler: function (newValue) {}
+		onClose?: () => void,              // fires when the menu is closed
+		onCloseResetsInput?: boolean, // whether input is cleared when menu is closed through the arrow
+		onFocus?: React.FocusEventHandler<HTMLInputElement>, // onFocus handler: function (event) {}
+		onInputChange?: (inputValue:string) => void, // onInputChange handler: function (inputValue) {}
+		onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement>,       // input keyDown handler: function (event) {}
+		onMenuScrollToBottom?: () => void, // fires when the menu is scrolled to the bottom; can be used to paginate options
+		onOpen?: () => void,         // fires when the menu is opened
+		onValueClick?: React.MouseEventHandler<HTMLElement>, // onClick handler for value labels: function (value, event) {}
+		openAfterFocus?: boolean,    // boolean to enable opening dropdown when focused
+		openOnFocus?: boolean,       // always open options menu on focus
+		optionClassName?: string,    // additional class(es) to apply to the <Option /> elements
+		optionComponent?: ComponentRenderer<OptionComponentProps<T>>, // option component to render in dropdown
+		optionRenderer?: (option:ReactSelectOption<T>, i:number) => React.ReactNode, // optionRenderer: function (option) {}
+		options?: ReactSelectOption<T>[], // array of options
+		pageSize?: number,           // number of entries to page when using page up/down keys
+		placeholder?: React.ReactNode, // field placeholder, displayed when there's no value
+		required?: boolean,          // applies HTML5 required attribute when needed
+		resetValue?: any,            // value to use when you clear the control
+		scrollMenuIntoView?: boolean, // boolean to enable the viewport to shift so that the full menu fully visible when engaged
+		searchable?: boolean,        // whether to enable searching feature or not
+		simpleValue?: boolean,       // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
+		style?: object,              // optional style to apply to the control
+		tabIndex?: string,           // optional tab index of the control
+		tabSelectsValue?: boolean,   // whether to treat tabbing out while focused to be value selection
+		value?: T,                 // initial field value
+		valueComponent?: ComponentRenderer<ValueComponentProps<T>>, // value component to render
+		valueKey?: string,           // path of the label value in option objects
+		valueRenderer?: (option:ReactSelectOption<T>, i:number) => React.ReactNode, // valueRenderer: function (option) {}
+		wrapperStyle?: object,       // optional style to apply to the component wrapper
+	}
+
+	export interface ReactSelectCreatableProps<T> extends ReactSelectProps<T>
+	{
 		promptTextCreator?: (label: string) => string;
-		placeholder?: string;
-		noResultsText?: boolean;
-		onCloseResetsInput?: boolean;
-		onInputChange?: (searchText: string) => void;
-    }
+	}
 
-    export default class ReactSelect extends React.Component<ReactSelectProps<any>, {}> { }
+	export default class ReactSelect extends React.Component<ReactSelectProps<any>, {}> { }
 }

From 505d0372880b9866eeb657dad9ae3673e06c8925 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 16 Mar 2017 17:33:32 -0400
Subject: [PATCH 093/133] Disable cancer type checkbox in download tab

---
 src/shared/components/StudyList/StudyListLogic.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 05fac8f40e7..e446ec550ba 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -187,10 +187,17 @@ export default class StudyListLogic
 		let meta = this.getMetadata(node);
 
 		if (meta.isCancerType)
-			clickedStudyIds = this.getDescendantCancerStudies(node).map(study => study.studyId);
+		{
+			if (!this.store.forDownloadTab)
+				clickedStudyIds = this.getDescendantCancerStudies(node).map(study => study.studyId);
+		}
 		else
+		{
 			clickedStudyIds = [(node as CancerStudy).studyId];
-		this.handleCheckboxStudyIds(clickedStudyIds, checked);
+		}
+
+		if (clickedStudyIds)
+			this.handleCheckboxStudyIds(clickedStudyIds, checked);
 	}
 
 	private handleCheckboxStudyIds(clickedStudyIds:string[], checked:boolean)

From 4f7f7f729ffa62f758cc06153394ecbc34ad040c Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 17 Mar 2017 11:10:44 -0400
Subject: [PATCH 094/133] Fix typescript error

---
 src/shared/components/StudyList/StudyListLogic.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index e446ec550ba..62284045198 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -183,7 +183,7 @@ export default class StudyListLogic
 
 	@action onCheck(node:CancerTreeNode, checked:boolean): void
 	{
-		let clickedStudyIds:string[];
+		let clickedStudyIds;
 		let meta = this.getMetadata(node);
 
 		if (meta.isCancerType)

From e3ee34c1e8543f45a7bac1d2970df43872e1b2dd Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 17 Mar 2017 12:51:45 -0400
Subject: [PATCH 095/133] fixed bug w/ custom case set

---
 src/shared/components/query/QueryStore.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 824be6f71a4..d5408b92234 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -587,7 +587,7 @@ export class QueryStore
 			Z_SCORE_THRESHOLD: this.zScoreThreshold,
 			RPPA_SCORE_THRESHOLD: this.rppaScoreThreshold,
 			data_priority: this.dataTypePriorityCode,
-			case_set_id: this.selectedSampleListId || '',
+			case_set_id: this.selectedSampleListId || '-1', // empty string won't work
 			case_ids: this.caseIds,
 			patient_case_select: this.caseIdsMode,
 			gene_list: this.geneQuery || ' ', // empty string won't work
@@ -642,11 +642,11 @@ export class QueryStore
 		let params = parsed.query as Partial<CancerStudyQueryUrlParams>;
 		let hashParams;
 		{
-			let [/*crosscancer*/, /*overview*/, data_priority, gene_list, cancer_study_list] = parsed.hash.split('/');
+			let [/*#crosscancer*/, tab, priority, genes, study_list] = parsed.hash.split('/');
 			hashParams = {
-				data_priority: data_priority as typeof params.data_priority,
-				gene_list: gene_list && decodeURIComponent(gene_list),
-				cancer_study_list: cancer_study_list && decodeURIComponent(cancer_study_list).split(','),
+				data_priority: priority as typeof params.data_priority,
+				gene_list: genes && decodeURIComponent(genes),
+				cancer_study_list: study_list && decodeURIComponent(study_list).split(','),
 			};
 		}
 

From 20640a7e830835c298761c4698699fa4148f93bf Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 17 Mar 2017 13:21:22 -0400
Subject: [PATCH 096/133] Update h2s

---
 .../query/DataTypePrioritySelector.tsx        | 19 +++++++++++--------
 .../components/query/styles.module.scss       | 19 +++++++++----------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index 7d476e5f6fb..e11eb31b98d 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -4,10 +4,11 @@ import * as styles_any from './styles.module.scss';
 import {QueryStore, QueryStoreComponent} from "./QueryStore";
 import {toJS} from "mobx";
 import {observer} from "mobx-react";
-import {FlexRow} from "../flexbox/FlexBox";
+import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 
 const styles = styles_any as {
-	DataTypePrioritySelector: string
+	DataTypePrioritySelector: string,
+	DataTypePriorityLabel: string,
 };
 
 @observer
@@ -19,18 +20,20 @@ export default class DataTypePrioritySelector extends QueryStoreComponent<{}, {}
 			return null;
 
 		return (
-			<FlexRow padded className={styles.DataTypePrioritySelector}>
+			<FlexCol padded className={styles.DataTypePrioritySelector}>
 				<h2>Select Data Type Priority:</h2>
-				<this.DataTypePriorityRadio label='Mutation and CNA' state={{mutation: true, cna: true}}/>
-				<this.DataTypePriorityRadio label='Only Mutation' state={{mutation: true, cna: false}}/>
-				<this.DataTypePriorityRadio label='Only CNA' state={{mutation: false, cna: true}}/>
-			</FlexRow>
+				<FlexRow>
+					<this.DataTypePriorityRadio label='Mutation and CNA' state={{mutation: true, cna: true}}/>
+					<this.DataTypePriorityRadio label='Only Mutation' state={{mutation: true, cna: false}}/>
+					<this.DataTypePriorityRadio label='Only CNA' state={{mutation: false, cna: true}}/>
+				</FlexRow>
+			</FlexCol>
 		);
 	}
 
 	DataTypePriorityRadio = observer(
 		(props: {label: string, state:QueryStore['dataTypePriority']}) => (
-			<label>
+			<label className={styles.DataTypePriorityLabel}>
 				<input
 					type="radio"
 					checked={_.isEqual(toJS(this.store.dataTypePriority), props.state)}
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 4ae30200e44..bd2d89e257e 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -21,7 +21,7 @@
   }
 
   h2 {
-    font: normal normal 300 20px/23px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font: normal normal 700 16px/22px 'Helvetica Neue', Helvetica, Arial, sans-serif;
     flex-grow: 2;
     margin: 0;
   }
@@ -37,8 +37,8 @@
 .DataTypePrioritySelector,
 .CaseSetSelector,
 .GeneSetSelector {
-  border: 1px solid rgb(170, 170, 170);
-  border-radius: 10px;
+  // border: 1px solid rgb(170, 170, 170);
+  // border-radius: 10px;
   padding: 10px;
 }
 
@@ -134,6 +134,7 @@
   }
 
   div.cancerStudySelectorBody {
+    border: 1px solid #ddd;
     flex: 1;
   }
 
@@ -268,17 +269,15 @@
 }
 
 .DataTypePrioritySelector {
-  align-items: flex-end;
-
-  h2 {
-    flex-grow: 0;
-  }
-
   input[type="radio"] {
-    margin: 0 6px 0 12px;
+    margin: 0 6px 0 2px;
   }
 }
 
+.DataTypePriorityLabel {
+  margin: 0 10px 0 0;
+}
+
 .CaseSetSelector {
   .ReactSelect {
   }

From c6f137df87e8834df67eeb28a6e6d2c3a58495f7 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 17 Mar 2017 13:57:27 -0400
Subject: [PATCH 097/133] Fix left margin on labels

---
 src/shared/components/query/styles.module.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index bd2d89e257e..efe97cba98e 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -240,9 +240,14 @@
   .group {
     display: flex;
     flex-direction: column;
-    margin-left: 20px;
+
+    div.group {
+      margin-left: 20px;
+    }
   }
 
+
+
   div.zScore {
     margin-left: 40px;
   }

From 084ac749fdb6b1e75af2c7decf2a6d7e3971191f Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 17 Mar 2017 15:47:34 -0400
Subject: [PATCH 098/133] Buttons & Popups

---
 src/globalStyles/variables.scss               | 12 +++--
 .../components/popupWindow/styles.module.scss | 21 ++++-----
 .../components/query/GisticGeneSelector.tsx   |  2 +-
 .../components/query/styles.module.scss       | 47 +++++++++++++------
 4 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/globalStyles/variables.scss b/src/globalStyles/variables.scss
index 15b52fbc7a2..0d7f7190dc4 100644
--- a/src/globalStyles/variables.scss
+++ b/src/globalStyles/variables.scss
@@ -1,9 +1,15 @@
-//e.g. $mutationColor:#990000; will then be usable in any local scss file or css module
+// e.g. $mutationColor:#990000; will then be usable in any local scss file or css module
 
-$mutationColor:blue;
+/* Colors */
+$mutationColor: blue;
+
+$cream: #F6F4EF;
+$darkCream: #ECE7DB;
+$darkestCream: #DAD1BC;
+$darkBrown: #585755;
 
 .portalWidth{
   padding-left:20px;
   padding-right:20px;
   min-width:800px;
-}
\ No newline at end of file
+}
diff --git a/src/shared/components/popupWindow/styles.module.scss b/src/shared/components/popupWindow/styles.module.scss
index 33cabdf5bf9..cf01574be14 100644
--- a/src/shared/components/popupWindow/styles.module.scss
+++ b/src/shared/components/popupWindow/styles.module.scss
@@ -1,20 +1,22 @@
 div.PopupWindow {
   position: fixed;
-  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-  background-color: white;
-  border: 1px solid #aaa;
-  border-radius: 4px;
+  background-color: #fff;;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
+  border: 1px solid #ddd;
+  border-radius: 2px;
   display: flex;
   flex-direction: column;
 }
 div.titleBar {
+  background: linear-gradient(to bottom, rgba(252,252,252,1) 90%, rgba(249,249,249,1) 100%);
+  border-bottom: 1px solid #f5f5f5;
+  color: #333;
   cursor: move;
-  padding: 4px;
+  padding: 8px 4px;
   display: flex;
   align-items: center;
-  background-color: #ccc;
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 500;
 }
 span.windowTitle {
   flex: 1;
@@ -22,9 +24,6 @@ span.windowTitle {
 }
 div.closeButton {
   cursor: pointer;
-  background-color: #e6e6e6;
-  border: 1px solid lightgrey;
-  border-radius: 2px;
   width: 24px;
   height: 24px;
   display: flex;
@@ -42,4 +41,4 @@ div.content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-}
+}
\ No newline at end of file
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index ab1da61318e..9c23cef1b52 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -155,7 +155,7 @@ export default class GisticGeneSelector extends React.Component<GisticGeneSelect
 					}}
 				/>
 				<button
-					className={styles.selectButton}
+					className={classNames('cta', styles.selectButton)}
 					onClick={() => this.props.onSelect(this.map_geneSymbol_selected)}
 				>
 					Select
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index efe97cba98e..bc9d461a7f5 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -297,14 +297,25 @@
 
   .buttonRow {
     button {
-      border: 1px solid #d3d3d3;
-      border-radius: 4px;
+      background: linear-gradient(to bottom, rgba(252,252,252,1) 50%, rgba(245,245,245,1) 100%);
+      border: 1px solid #ddd;
+      border-radius: 2px;
+      box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.5);
+      color: $darkBrown;
       padding: .4em 1em;
+
+      &:hover {
+        color: #333;
+      }
     }
   }
 
   textarea.geneSet {
     resize: vertical;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+    padding: 10px 15px;
+    
     &.empty {
     }
     &.notEmpty {
@@ -345,17 +356,18 @@
     font-weight: bold;
   }
   div.suggestionBubble {
+    color: $darkBrown;
     cursor: pointer;
     display: flex;
     align-items: center;
     margin: 2px;
     padding: 4px;
-    background-color: #e6e6e6;
-    border: 1px solid #d3d3d3;
+    background-color: $cream;
+    border: 1px solid $darkCream;
     border-radius: 4px;
     &:hover {
-      background-color: #dadada;
-      border-color: #999999;
+      background-color: $darkCream;
+      border-color: $darkestCream;
     }
     span.icon {
       color: #888888;
@@ -460,29 +472,34 @@ div.GisticGeneSelectorWindow {
     }
 
     span.geneToggle {
-      padding: 3px;
+      background: rgba(0,0,0,0);
+      line-height: 16px !important;
+      margin: 0 3px 0 0;
+      padding: 3px 5px;
+      -webkit-transition: background 0.2s ease-in-out;
+      -o-transition: background 0.2s ease-in-out;
+      transition: background 0.2s ease-in-out;
 
       &:not(.simulateHovered) {
         cursor: pointer;
       }
       &:hover,
       &.simulateHovered {
-        padding: 1px;
-        border: 2px solid #1974b8;
-        border-radius: 5px;
+        background: #dee9f1;
+        border-radius: 3px;
       }
       &.selected {
-        font-weight: bold;
+        font-weight: 600;
       }
       &.notSelected {
-        font-weight: normal;
+        font-weight: 400;
       }
     }
 
     a.showMoreLess {
       cursor: pointer;
       padding: 3px;
-      color: blue;
+      color: #337ab7;
       &:hover {
         text-decoration: underline;
       }
@@ -512,7 +529,7 @@ div.submitRow {
   }
 
   button.genomeSpace {
-    border: 1px solid #d3d3d3;
-    border-radius: 4px;
+    border: 1px solid $darkestCream;
+    border-radius: 2px;
   }
 }

From d6155ff638ccda60d63440fa2db0f5ee86f9b4c8 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 17 Mar 2017 16:04:30 -0400
Subject: [PATCH 099/133] Add red/green colors

---
 src/globalStyles/variables.scss                |  2 ++
 src/shared/components/query/styles.module.scss | 16 +++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/globalStyles/variables.scss b/src/globalStyles/variables.scss
index 0d7f7190dc4..1fd994b4912 100644
--- a/src/globalStyles/variables.scss
+++ b/src/globalStyles/variables.scss
@@ -7,6 +7,8 @@ $cream: #F6F4EF;
 $darkCream: #ECE7DB;
 $darkestCream: #DAD1BC;
 $darkBrown: #585755;
+$redError: #a71111;
+$greenSuccess: #11a747;
 
 .portalWidth{
   padding-left:20px;
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index bc9d461a7f5..9e9cb28b11c 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -315,7 +315,7 @@
     border: 1px solid #ddd;
     border-radius: 2px;
     padding: 10px 15px;
-    
+
     &.empty {
     }
     &.notEmpty {
@@ -341,19 +341,21 @@
   }
   div.validBubble,
   div.invalidBubble {
+    color: #fff;
     display: flex;
     align-items: center;
     margin: 2px;
-    padding: 4px;
-    background-color: white;
-    border: 1px solid #aaaaaa;
-    border-radius: 4px;
+    padding: 5px 10px;
+    border-radius: 2px;
     span.icon {
-      color: #484848;
+      color: #fff;
     }
   }
   div.invalidBubble {
-    font-weight: bold;
+    background: $redError;
+  }
+  div.validBubble {
+    background: $greenSuccess;
   }
   div.suggestionBubble {
     color: $darkBrown;

From 873b09459fe380645fbc99e5eeaa7f5c31be7618 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 17 Mar 2017 16:29:46 -0400
Subject: [PATCH 100/133] Select controls

---
 src/shared/components/query/styles.module.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 9e9cb28b11c..31331b534e3 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -9,6 +9,11 @@
     border: 1px solid #ddd;
     border-top: none;
     padding: 10px;
+
+    :global(.Select-control) {
+      border: 1px solid #ddd !important;
+      border-radius: 2px !important;
+    }
   }
 }
 
@@ -37,8 +42,6 @@
 .DataTypePrioritySelector,
 .CaseSetSelector,
 .GeneSetSelector {
-  // border: 1px solid rgb(170, 170, 170);
-  // border-radius: 10px;
   padding: 10px;
 }
 
@@ -534,4 +537,4 @@ div.submitRow {
     border: 1px solid $darkestCream;
     border-radius: 2px;
   }
-}
+}
\ No newline at end of file

From be661beb43e552996cc8df2c03d0f7c923a49245 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 17 Mar 2017 16:51:16 -0400
Subject: [PATCH 101/133] custom case set now works w/ patient ids

---
 package.json                              |  2 -
 src/shared/components/query/QueryStore.ts | 81 +++++++++++++++--------
 typings/build-url.d.ts                    | 12 ----
 typings/url-parse.d.ts                    | 26 --------
 4 files changed, 52 insertions(+), 69 deletions(-)
 delete mode 100644 typings/build-url.d.ts
 delete mode 100644 typings/url-parse.d.ts

diff --git a/package.json b/package.json
index 4dbf209825e..314ace1566b 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,6 @@
     "bootstrap": "^3.3.7",
     "bootstrap-loader": "^1.2.0-beta.1",
     "bootstrap-sass": "^3.3.7",
-    "build-url": "^1.0.9",
     "bundle-loader": "^0.5.4",
     "classnames": "^2.2.5",
     "clinical-timeline": "0.0.14",
@@ -161,7 +160,6 @@
     "underscore": "^1.8.3",
     "url": "^0.11.0",
     "url-loader": "^0.5.7",
-    "url-parse": "^1.1.8",
     "webpack": "^1.14.0",
     "webpack-fail-plugin": "^1.0.5",
     "webpack-raphael": "^2.1.4"
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index d5408b92234..65d4a9d9719 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -13,9 +13,9 @@ import AppConfig from 'appConfig';
 import {gsUploadByGet} from "../../api/gsuploadwindow";
 import {OQLQuery} from "../../lib/oql/oql-parser";
 import {ComponentGetsStoreContext} from "../../lib/ContextUtils";
-import urlParse from 'url-parse';
+import URL from 'url';
 import {buildCBioPortalUrl, BuildUrlParams} from "../../api/urls";
-import {buildUrl} from "build-url";
+import {SyntaxError} from "../../lib/oql/oql-parser";
 
 type CancerStudyQueryUrlParams = {
 	cancer_study_id: string,
@@ -29,7 +29,6 @@ type CancerStudyQueryUrlParams = {
 	data_priority: '0'|'1'|'2',
 	case_set_id: string,
 	case_ids: string,
-	patient_case_select: 'sample'|'patient',
 	gene_list: string,
 	tab_index: 'tab_download'|'tab_visualize',
 	transpose_matrix?: 'on',
@@ -346,6 +345,23 @@ export class QueryStore
 		};
 	}
 
+	@memoize
+	getSamplesForStudyAndPatient(studyId:string, patientId:string)
+	{
+		return client.getAllSamplesOfPatientInStudyUsingGET({studyId, patientId});
+	}
+
+	async getSampleIdsFromCustomCaseSet()
+	{
+		const studyId = this.singleSelectedStudyId;
+		if (!studyId)
+			return [];
+		const caseIds = this.caseIds.match(/\b\S+\b/g) || [];
+		if (this.caseIdsMode === 'sample')
+			return caseIds;
+		const samplesPromises = caseIds.map(patientId => this.getSamplesForStudyAndPatient(studyId, patientId));
+		return _.flatten(await Promise.all(samplesPromises)).map(sample => sample.sampleId);
+	}
 
 	////////////////////////////////////////////////////////////////////////////////
 	// DERIVED DATA
@@ -513,18 +529,24 @@ export class QueryStore
 
 	// GENES
 
-	@computed get oql()
+	@computed get oql():{ query: OQLQuery, error?: { start: number, end: number, message: string } }
 	{
 		try
 		{
-			let geneQuery = this.geneQuery;
 			return {
-				query: geneQuery && oql_parser.parse(geneQuery) || [],
+				query: this.geneQuery && oql_parser.parse(this.geneQuery) || [],
 				error: undefined
 			};
 		}
-		catch ({offset})
+		catch (error)
 		{
+			if (error.name !== 'SyntaxError')
+				return {
+					query: [],
+					error: {start: 0, end: 0, message: `Unexpected ${error}`}
+				};
+
+			let {offset} = error as SyntaxError;
 			let near, start, end;
 			if (offset === this.geneQuery.length)
 				[near, start, end] = ['after', offset - 1, offset];
@@ -534,7 +556,7 @@ export class QueryStore
 				[near, start, end] = ['at', offset, offset + 1];
 			let message = `OQL syntax error ${near} selected character; please fix and submit again.`;
 			return {
-				query: [] as OQLQuery,
+				query: [],
 				error: {start, end, message}
 			};
 		}
@@ -575,7 +597,7 @@ export class QueryStore
 		return `cbioportal-${study.studyId}-${suffix}.txt`;
 	}
 
-	@computed get urlParams():BuildUrlParams
+	async getUrlParams()
 	{
 		let params: CancerStudyQueryUrlParams = {
 			cancer_study_id: this.singleSelectedStudyId || 'all',
@@ -588,18 +610,18 @@ export class QueryStore
 			RPPA_SCORE_THRESHOLD: this.rppaScoreThreshold,
 			data_priority: this.dataTypePriorityCode,
 			case_set_id: this.selectedSampleListId || '-1', // empty string won't work
-			case_ids: this.caseIds,
-			patient_case_select: this.caseIdsMode,
+			case_ids: (await this.getSampleIdsFromCustomCaseSet()).join('\r\n'),
 			gene_list: this.geneQuery || ' ', // empty string won't work
-			tab_index: this.forDownloadTab ? 'tab_download' : 'tab_visualize',
+			tab_index: this.forDownloadTab ? 'tab_download' : 'tab_visualize' as any,
 			transpose_matrix: this.transposeDataMatrix ? 'on' : undefined,
 			Action: 'Submit',
 		};
 
-		// The server will always transpose if transpose_matrix is present,
-		// so we must delete it from the params if we do not want to transpose.
-		if (!params.transpose_matrix)
-			delete params.transpose_matrix;
+		// Remove params with no value, because they may cause problems.
+		// For example, the server will always transpose if transpose_matrix is present, no matter the value.
+		for (let key in params)
+			if (!(params as any)[key])
+				delete (params as any)[key];
 
 		if (this.selectedStudyIds.length != 1)
 		{
@@ -607,8 +629,8 @@ export class QueryStore
 			if (!studyIds.length)
 				studyIds = this.cancerStudies.result.map(study => study.studyId);
 			return {
-				path: 'cross_cancer.do',
-				queryParams: params,
+				pathname: 'cross_cancer.do',
+				query: params,
 				hash: (
 					`crosscancer/overview/${
 						params.data_priority
@@ -621,7 +643,7 @@ export class QueryStore
 			};
 		}
 
-		return {path: 'index.do', queryParams: params};
+		return {pathname: 'index.do', query: params};
 	}
 
 	////////////////////////////////////////////////////////////////////////////////
@@ -638,11 +660,11 @@ export class QueryStore
 
 	@action setParamsFromUrl(url:string)
 	{
-		let parsed = urlParse(url, true);
-		let params = parsed.query as Partial<CancerStudyQueryUrlParams>;
+		let urlParts = URL.parse(url, true);
+		let params = urlParts.query as Partial<CancerStudyQueryUrlParams>;
 		let hashParams;
 		{
-			let [/*#crosscancer*/, tab, priority, genes, study_list] = parsed.hash.split('/');
+			let [/*#crosscancer*/, tab, priority, genes, study_list] = (urlParts.hash || '').split('/');
 			hashParams = {
 				data_priority: priority as typeof params.data_priority,
 				gene_list: genes && decodeURIComponent(genes),
@@ -661,9 +683,9 @@ export class QueryStore
 		this.zScoreThreshold = params.Z_SCORE_THRESHOLD || '2.0';
 		this.rppaScoreThreshold = params.RPPA_SCORE_THRESHOLD || '2.0';
 		this.dataTypePriorityCode = hashParams.data_priority || params.data_priority || '0';
-		this.selectedSampleListId = params.case_set_id;
+		this.selectedSampleListId = params.case_set_id !== "-1" ? params.case_set_id : '';
 		this.caseIds = params.case_ids || '';
-		this.caseIdsMode = params.patient_case_select || 'sample';
+		this.caseIdsMode = 'sample'; // url always contains sample IDs
 		this.geneQuery = normalizeQuery(hashParams.gene_list || params.gene_list || '');
 		this.forDownloadTab = params.tab_index === 'tab_download';
 		this._isFromUrlParams.selectedProfileIds = true;
@@ -725,7 +747,7 @@ export class QueryStore
 		this.geneQuery = normalizeQuery([this.geneQuery, ...toAppend].join(' '));
 	}
 
-	@action submit()
+	@action async submit()
 	{
 		if (this.oql.error)
 		{
@@ -755,20 +777,21 @@ export class QueryStore
 			return;
 		}
 
-		let historyUrl = buildUrl(window.location.href.split('?')[0], {...this.urlParams, path: undefined});
-		let newUrl = buildCBioPortalUrl(this.urlParams);
+		let urlParams = await this.getUrlParams();
+		let historyUrl = URL.format({...urlParams, pathname: window.location.href.split('?')[0]});
+		let newUrl = buildCBioPortalUrl(urlParams);
 		if (historyUrl != newUrl)
 			window.history.pushState(null, window.document.title, historyUrl);
 		window.location.href = newUrl;
 	}
 
-	@action sendToGenomeSpace()
+	@action async sendToGenomeSpace()
 	{
 		// if (!validDownloadDataForm(this))
 		// 	return;
 
 		gsUploadByGet({
-			url: buildCBioPortalUrl(this.urlParams),
+			url: buildCBioPortalUrl(await this.getUrlParams()),
 			filename: this.downloadDataFilename,
 			successCallback: savePath => alert('Saved to GenomeSpace as ' + savePath),
 			errorCallback: savePath => alert('ERROR saving to GenomeSpace as ' + savePath),
diff --git a/typings/build-url.d.ts b/typings/build-url.d.ts
deleted file mode 100644
index 22c9deb02d0..00000000000
--- a/typings/build-url.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-declare module 'build-url'
-{
-	export type QueryParams = {[key:string]: undefined | string | ReadonlyArray<string>};
-	type Params = {
-		path?: string,
-		hash?: string,
-		queryParams?: QueryParams
-	}
-	export function buildUrl(base:string|null, params:Params):string;
-	export function buildUrl(params:Params):string;
-	export default buildUrl;
-}
diff --git a/typings/url-parse.d.ts b/typings/url-parse.d.ts
deleted file mode 100644
index d3da7a927cc..00000000000
--- a/typings/url-parse.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-declare module "url-parse"
-{
-	export type ParsedQuery = {[key:string]: undefined | string | string[]};
-
-	export interface ParsedUrl
-	{
-		protocol: string; //The protocol scheme of the URL (e.g. http:).
-		slashes: string; //A boolean which indicates whether the protocol is followed by two forward slashes (//).
-		auth: string; //Authentication information portion (e.g. username:password).
-		username: string; //Username of basic authentication.
-		password: string; //Password of basic authentication.
-		host: string; //Host name with port number.
-		hostname: string; //Host name without port number.
-		port: string; //Optional port number.
-		pathname: string; //URL path.
-		query: string | ParsedQuery; //Parsed object containing query string, unless parsing is set to false.
-		hash: string; //The "fragment" portion of the URL including the pound-sign (#).
-		href: string; //The full URL.
-		origin: string; //The origin of the URL.
-	}
-
-	function URL(url:string, parseQueryString:true):ParsedUrl & {query: ParsedQuery};
-	function URL(url:string, parseQueryString?:false):ParsedUrl & {query: string};
-
-	export default URL;
-}

From 8b2f12188e3d8aece85dae1d02c18534f826d1e0 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 17 Mar 2017 17:25:21 -0400
Subject: [PATCH 102/133] Re-add borders

---
 src/shared/components/query/styles.module.scss | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 31331b534e3..0eaf1ab9655 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -37,12 +37,13 @@
   }
 }
 
-.CancerStudySelector,
 .GeneticProfileSelector,
 .DataTypePrioritySelector,
 .CaseSetSelector,
 .GeneSetSelector {
   padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
 }
 
 .CancerStudySelector {
@@ -138,6 +139,8 @@
 
   div.cancerStudySelectorBody {
     border: 1px solid #ddd;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
     flex: 1;
   }
 
@@ -252,7 +255,14 @@
 
 
   div.zScore {
-    margin-left: 40px;
+    margin: 0px 0 10px 20px;
+
+    input[type='text'] {
+      border: 1px solid #ddd;
+      border-radius: 2px;
+      margin: 0 5px;
+      padding: 2px 5px;
+    }
   }
 
   label {
@@ -261,7 +271,7 @@
 
     input[type='radio'],
     input[type='checkbox'] {
-      margin-right: 6px;
+      margin-right: 8px;
     }
   }
 
@@ -347,7 +357,7 @@
     color: #fff;
     display: flex;
     align-items: center;
-    margin: 2px;
+    margin: 2px 2px 2px 0;
     padding: 5px 10px;
     border-radius: 2px;
     span.icon {

From 9fabcfcc72fcb98ff1b64665249cc4db8a999395 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Sat, 18 Mar 2017 02:32:14 -0400
Subject: [PATCH 103/133] Minor styling fixes

---
 src/shared/components/StudyList/styles.module.scss |  6 +++---
 src/shared/components/query/styles.module.scss     | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index 786970e31ad..c10221e5cb5 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -39,10 +39,10 @@
   position: absolute;
   background-color: #fff;
   border: 1px solid #ccc;
-  top: 30px;
+  top: 0px;
   left: 0px;
   width: 100%;
-  height: 415px;
+  height: 400px;
   overflow: auto;
   -webkit-animation: fadein 0.25s; /* Safari, Chrome and Opera > 12.1 */
      -moz-animation: fadein 0.25s; /* Firefox < 16 */
@@ -237,4 +237,4 @@ li.Study {
     }
 
   }
-}
\ No newline at end of file
+}
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 0eaf1ab9655..9742875d7f1 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -410,6 +410,17 @@ div.MutSigGeneSelectorWindow {
   div.MutSigGeneSelector {
     margin: 10px;
     flex: 1;
+    :global(.table) {
+      margin: 0;
+      & > thead > tr > th {
+        font-size: 13px;
+      }
+      & > tbody > tr > td {
+        vertical-align: middle;
+        padding: 6px 10px;
+        font-size: 12px;
+      }
+    }
     div.selectionColumnHeader,
     div.selectionColumnCell {
       display: flex;
@@ -547,4 +558,4 @@ div.submitRow {
     border: 1px solid $darkestCream;
     border-radius: 2px;
   }
-}
\ No newline at end of file
+}

From 33a1338fe878320556d3ef8604fe267e6e68aa21 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Mon, 20 Mar 2017 14:22:23 -0400
Subject: [PATCH 104/133] Tooltips and "Deselect all"

---
 src/shared/components/StudyList/StudyList.tsx | 84 ++++++++++++++-----
 .../components/StudyList/StudyListLogic.ts    |  3 +
 .../components/StudyList/styles.module.scss   | 42 ++++++----
 .../components/query/CancerStudySelector.tsx  | 41 ++++-----
 .../components/query/CaseSetSelector.tsx      | 22 ++++-
 .../query/GeneticProfileSelector.tsx          | 10 ++-
 .../components/query/styles.module.scss       |  6 +-
 typings/react-select.d.ts                     |  2 +-
 8 files changed, 148 insertions(+), 62 deletions(-)

diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index abbc0c01ce8..cd1282c9e11 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -7,6 +7,7 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import {observer} from "mobx-react";
 import {getStudySummaryUrl, getPubMedUrl} from "../../api/urls";
 import {QueryStoreComponent} from "../query/QueryStore";
+import DefaultTooltip from "../DefaultTooltip";
 
 const styles = {
 	...styles_any as {
@@ -23,12 +24,16 @@ const styles = {
 		StudySamples: string,
 		StudyLinks: string,
 
+		icon: string,
+		iconWithTooltip: string,
+		tooltip: string,
+
 		disabled: string,
 		enabled: string,
 		indentArrow: string,
 
-
 		closeSelected: string,
+		deselectAll: string,
 		highlighted: string,
 	},
 	Level: (level:number) => styles_any[`Level${level}`]
@@ -55,12 +60,15 @@ export default class StudyList extends QueryStoreComponent<{}, {}>
 				<h4>
 						Selected Studies 
 						<span 
-							onClick={() => this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly}
 							className={styles.closeSelected}
+							onClick={() => this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly}
 						>
 							Return to Study Selector
 						</span>
 				</h4>
+				<span className={styles.deselectAll} onClick={() => this.logic.hack_handleSelectAll(false)}>
+					Deselect all
+				</span>
 				<ul className={styles.StudyList}>
 					{this.renderCancerType(this.logic.rootCancerType)}
 				</ul>
@@ -153,7 +161,7 @@ export default class StudyList extends QueryStoreComponent<{}, {}>
 				{...this.logic.getCheckboxProps(study)}
 				onChange={event => this.logic.onCheck(study, (event.target as HTMLInputElement).checked)}
 			>
-				<span className={styles.StudyName} title={study.name}>
+				<span className={styles.StudyName}>
 					{study.name}
 				</span>
 			</LabeledCheckbox>
@@ -171,24 +179,62 @@ export default class StudyList extends QueryStoreComponent<{}, {}>
 
 	renderStudyLinks = (study:CancerStudy) =>
 	{
-		let links = [];
-		if (study.studyId)
-			links.push({icon: 'bar-chart', url: getStudySummaryUrl(study.studyId)});
-		if (study.pmid)
-			links.push({icon: 'book', url: getPubMedUrl(study.pmid)});
-		else 
-			links.push({icon: 'book', url: undefined });
+		let links = [
+			{
+				icon: 'info-circle',
+				url: undefined,
+				tooltip: study.description
+			},
+			{
+				icon: 'bar-chart',
+				url: study.studyId && getStudySummaryUrl(study.studyId),
+				tooltip: study.studyId && "Summary"
+			},
+			{
+				icon: 'book',
+				url: study.pmid && getPubMedUrl(study.pmid),
+				tooltip: study.pmid && "PubMed"
+			},
+		];
 		return (
 			<span className={styles.StudyLinks}>
-				{links.map((link, i) => (
-					(link.url) ? (
-						<a key={i} href={link.url}>
-							<FontAwesome name={link.icon}/>
-						</a>
-					) : (
-						<FontAwesome key={i} name={link.icon}/>
-					)
-				))}
+				{links.map((link, i) => {
+					let content = (
+						<FontAwesome
+							key={i}
+							name={link.icon}
+							className={classNames({
+								[styles.icon]: true,
+								[styles.iconWithTooltip]: !!link.tooltip,
+							})}
+						/>
+					);
+
+					if (link.url)
+						content = (
+							<a key={i} href={link.url}>
+								{content}
+							</a>
+						);
+
+					if (link.tooltip)
+					{
+						let overlay = (
+							<div className={styles.tooltip} dangerouslySetInnerHTML={{__html: link.tooltip}}/>
+						);
+						content = (
+							<DefaultTooltip
+								key={i}
+								mouseEnterDelay={0}
+								placement="top"
+								overlay={overlay}
+								children={content}
+							/>
+						);
+					}
+
+					return content;
+				})}
 			</span>
 		);
 	}
diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 62284045198..791ba729f38 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -179,6 +179,9 @@ export default class StudyListLogic
 			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
 
 		this.store.selectedStudyIds = selectedStudyIds;
+
+		if (!this.store.selectedStudyIds.length)
+			this.store.showSelectedStudiesOnly = false;
 	}
 
 	@action onCheck(node:CancerTreeNode, checked:boolean): void
diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index c10221e5cb5..8ed17f91e0d 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -50,15 +50,13 @@
        -o-animation: fadein 0.25s; /* Opera < 12.1 */
           animation: fadein 0.25s;
 
-
-
   ul.StudyList {
     margin: 0;
     padding: 0 15px;
   }
 
   h4 {
-    margin: 15px;
+    margin: 15px 15px 0 15px;
     padding: 0 5px 5px 5px;
     font-weight: 400;
     line-height: 26px;
@@ -85,6 +83,19 @@
       cursor: pointer;
     }
   }
+
+  .deselectAll {
+    float: right;
+    margin-right: 20px;
+    font-size: 12px;
+    line-height: 30px;
+    text-align: right;
+    color: #337ab7;
+    text-decoration: underline;
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }
 
 ul.StudyList {
@@ -206,7 +217,6 @@ li.Study {
 
   .StudySamples {
     text-align: right;
-    margin-right: 5px;
     display: inline-block;
   }
 
@@ -216,25 +226,27 @@ li.Study {
 
     .StudyLinks {
       display: inline-block;
-      width: 40px;
+      width: 57px;
 
-      > span {
+      span.icon {
         color: #ccc;
-        margin: 0 0 0 2px;
+        text-align: center;
+        margin: 0 0 0 4px;
         min-width: 15px;
-        display: inline-block;
       }
 
-      a {
-        color: #1982b8;
-        text-align: center;
+      span.iconWithTooltip {
+        color: #555;
+      }
 
-        span:global(.fa) {
-          margin: 0 5px 0 0;
-          min-width: 15px;
-        }
+      a > span.icon {
+        color: #1982b8;
       }
     }
 
   }
 }
+
+.tooltip {
+  max-width: 300px;
+}
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 1d92cab4a9e..b929f78d8ab 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -90,16 +90,14 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 
 		let selected = _.includes(this.store.selectedCancerTypeIds, cancerType.cancerTypeId);
 		let highlighted = this.store.studyListLogic.isHighlighted(cancerType);
-		let liClassName = classNames(
-			styles.cancerTypeListItem,
-			styles.selectable,
-			{
-				[styles.selected]: selected,
-				[styles.matchingNodeText]: !!this.store.searchText && highlighted,
-				[styles.nonMatchingNodeText]: !!this.store.searchText && !highlighted,
-				[styles.containsSelectedStudies]: this.store.studyListLogic.cancerTypeContainsSelectedStudies(cancerType),
-			},
-		);
+		let liClassName = classNames({
+			[styles.cancerTypeListItem]: true,
+			[styles.selectable]: true,
+			[styles.selected]: selected,
+			[styles.matchingNodeText]: !!this.store.searchText && highlighted,
+			[styles.nonMatchingNodeText]: !!this.store.searchText && !highlighted,
+			[styles.containsSelectedStudies]: this.store.studyListLogic.cancerTypeContainsSelectedStudies(cancerType),
+		});
 
 		return (
 			<li
@@ -145,15 +143,12 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 			searchTextOptions = [this.store.searchText].concat(searchTextOptions as string[]);
 
 		let logic = this.store.studyListLogic;
-		let allSelectedCheckboxProps = logic.getCheckboxProps(logic.rootCancerType);
-		let allSelected = allSelectedCheckboxProps.checked && !allSelectedCheckboxProps.indeterminate;
-
-		let selectedCountClass = classNames(
-			styles.selectedCount,
-			{
-				[styles.selectionsExist]: (this.store.selectedStudyIds.length > 0)
-			},
-		);
+		let selectAllCheckboxProps = logic.getCheckboxProps(logic.rootCancerType);
+
+		let selectedCountClass = classNames({
+			[styles.selectedCount]: true,
+			[styles.selectionsExist]: this.store.selectedStudyIds.length > 0
+		});
 
 		return (
 			<FlexCol overflow className={styles.CancerStudySelector}>
@@ -168,8 +163,8 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 								}}
 								className={selectedCountClass}
 							>
-								<b>{this.store.selectedStudyIds.length}</b> Studies Selected
-								(<b>{this.store.selectedStudies_totalSampleCount}</b> Samples)
+								<b>{this.store.selectedStudyIds.length}</b> studies selected
+								(<b>{this.store.selectedStudies_totalSampleCount}</b> samples)
 							</span>
 						) : (
 				            <span className={styles.noData}>No data</span>
@@ -196,8 +191,8 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 						}}
 					/>
 					{!!(!this.store.forDownloadTab) && (
-						<span className={classNames('cta', styles.selectAll)} onClick={() => logic.hack_handleSelectAll(!allSelected)}>
-							{allSelected ? "Deselect All" : "Select All"}
+						<span className={classNames('cta', styles.selectAll)} onClick={() => logic.hack_handleSelectAll(!selectAllCheckboxProps.checked)}>
+							{selectAllCheckboxProps.checked ? "Deselect all" : "Select all"}
 						</span>
 					)}
 				</FlexRow>
diff --git a/src/shared/components/query/CaseSetSelector.tsx b/src/shared/components/query/CaseSetSelector.tsx
index 2808768f75e..ead4a10e58b 100644
--- a/src/shared/components/query/CaseSetSelector.tsx
+++ b/src/shared/components/query/CaseSetSelector.tsx
@@ -6,10 +6,12 @@ import {computed} from 'mobx';
 import {FlexCol} from "../flexbox/FlexBox";
 import {QueryStore, QueryStoreComponent} from "./QueryStore";
 import {getStudyViewUrl} from "../../api/urls";
+import DefaultTooltip from "../DefaultTooltip";
 
 const styles = styles_any as {
 	CaseSetSelector: string,
 	ReactSelect: string,
+	tooltip: string,
 };
 
 const CUSTOM_CASE_LIST_ID = '';
@@ -22,12 +24,28 @@ export default class CaseSetSelector extends QueryStoreComponent<{}, {}>
 		return [
 			...this.store.sampleLists.result.map(sampleList => {
 				return {
-					label: `${sampleList.name} (${sampleList.sampleCount})`,
+					label: (
+						<DefaultTooltip
+							placement="right"
+							mouseEnterDelay={0}
+							overlay={<div className={styles.tooltip}>{sampleList.description}</div>}
+						>
+							<span>{`${sampleList.name} (${sampleList.sampleCount})`}</span>
+						</DefaultTooltip>
+					),
 					value: sampleList.sampleListId
 				};
 			}),
 			{
-				label: 'User-defined Case List',
+				label: (
+					<DefaultTooltip
+						placement="right"
+						mouseEnterDelay={0}
+						overlay={<div className={styles.tooltip}>Specify your own case list</div>}
+					>
+						<span>User-defined Case List</span>
+					</DefaultTooltip>
+				),
 				value: CUSTOM_CASE_LIST_ID
 			}
 		];
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 774880418ca..0925b71101a 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -9,6 +9,7 @@ import AsyncStatus from "../asyncStatus/AsyncStatus";
 import classNames from "../../lib/classNames";
 import {FlexCol} from "../flexbox/FlexBox";
 import {QueryStoreComponent} from "./QueryStore";
+import DefaultTooltip from "../DefaultTooltip";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
@@ -20,6 +21,7 @@ const styles = styles_any as {
 	zScore: string,
 	groupName: string,
 	profileName: string,
+	tooltip: string,
 };
 
 @observer
@@ -71,7 +73,13 @@ export default class GeneticProfileSelector extends QueryStoreComponent<{}, {}>
 				{label}
 			</span>
 			{!isGroupToggle && (
-				<FontAwesome className={styles.infoIcon} name='question-circle' {...{title: profile.description}}/>
+				<DefaultTooltip
+					mouseEnterDelay={0}
+					placement="right"
+					overlay={<div className={styles.tooltip}>{profile.description}</div>}
+				>
+					<FontAwesome className={styles.infoIcon} name='question-circle'/>
+				</DefaultTooltip>
 			)}
 		</label>
 	)
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 9742875d7f1..14eebebe331 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -276,6 +276,7 @@
   }
 
   span.infoIcon {
+    color: #555;
   }
 
   span.groupName {
@@ -500,7 +501,6 @@ div.GisticGeneSelectorWindow {
     span.geneToggle {
       background: rgba(0,0,0,0);
       line-height: 16px !important;
-      margin: 0 3px 0 0;
       padding: 3px 5px;
       -webkit-transition: background 0.2s ease-in-out;
       -o-transition: background 0.2s ease-in-out;
@@ -559,3 +559,7 @@ div.submitRow {
     border-radius: 2px;
   }
 }
+
+.tooltip {
+  max-width: 300px;
+}
diff --git a/typings/react-select.d.ts b/typings/react-select.d.ts
index 928e2d11bf7..9c124fd6ad5 100644
--- a/typings/react-select.d.ts
+++ b/typings/react-select.d.ts
@@ -1,6 +1,6 @@
 declare module 'react-select'
 {
-	export type ReactSelectOption<T> = {label: string, value: T};
+	export type ReactSelectOption<T> = {label: React.ReactChild, value: T};
 
 	export interface MenuRendererProps<T>
 	{

From ddbf1769804f2b796c21f4f59edf8091745d3569 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Mon, 20 Mar 2017 15:51:27 -0400
Subject: [PATCH 105/133] Using react-bootsrap Modal instead of
 PopupWindow/react-draggable

---
 package.json                                  |  1 -
 .../components/popupWindow/PopupWindow.tsx    | 55 -------------------
 .../components/popupWindow/styles.module.scss | 44 ---------------
 .../components/query/GeneSetSelector.tsx      | 45 +++++++++++++++
 .../components/query/QueryContainer.tsx       | 42 --------------
 .../components/query/styles.module.scss       | 18 ++++--
 6 files changed, 58 insertions(+), 147 deletions(-)
 delete mode 100644 src/shared/components/popupWindow/PopupWindow.tsx
 delete mode 100644 src/shared/components/popupWindow/styles.module.scss

diff --git a/package.json b/package.json
index 314ace1566b..d4cd7ddae9c 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,6 @@
     "react-clipboard.js": "^1.0.1",
     "react-collapse": "^2.3.3",
     "react-dom": "^15.4.2",
-    "react-draggable": "^2.2.3",
     "react-file-download": "^0.3.2",
     "react-fontawesome": "^1.5.0",
     "react-height": "^2.2.0",
diff --git a/src/shared/components/popupWindow/PopupWindow.tsx b/src/shared/components/popupWindow/PopupWindow.tsx
deleted file mode 100644
index 40e42e21625..00000000000
--- a/src/shared/components/popupWindow/PopupWindow.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import * as styles_any from './styles.module.scss';
-import classNames from "../../lib/classNames";
-import FontAwesome from "react-fontawesome";
-import ReactDraggable from 'react-draggable';
-
-const styles = styles_any as {
-	PopupWindow: string,
-	titleBar: string,
-	windowTitle: string,
-	closeButton: string,
-	icon: string,
-	content: string,
-};
-
-interface IPopupWindowProps extends React.HTMLAttributes<HTMLDivElement>
-{
-	windowTitle: string;
-	onClickClose: React.MouseEventHandler<HTMLDivElement>;
-}
-
-interface IPopupWindowState
-{
-}
-
-export default class PopupWindow extends React.Component<IPopupWindowProps, IPopupWindowState>
-{
-	constructor(props: IPopupWindowProps)
-	{
-		super(props);
-	}
-
-	render()
-	{
-		let {className, windowTitle, onClickClose, ...props} = this.props;
-
-		return (
-			<ReactDraggable bounds="body" handle={'.' + styles.titleBar} cancel={'.' + styles.closeButton}>
-				<div {...props} className={classNames(className, styles.PopupWindow)}>
-					<div className={styles.titleBar}>
-						<span className={styles.windowTitle}>
-							{windowTitle}
-						</span>
-						<div className={styles.closeButton} onClick={onClickClose}>
-							<FontAwesome className={styles.icon} name="times"/>
-						</div>
-					</div>
-					<div className={styles.content}>
-						{this.props.children}
-					</div>
-				</div>
-			</ReactDraggable>
-		);
-	}
-}
diff --git a/src/shared/components/popupWindow/styles.module.scss b/src/shared/components/popupWindow/styles.module.scss
deleted file mode 100644
index cf01574be14..00000000000
--- a/src/shared/components/popupWindow/styles.module.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-div.PopupWindow {
-  position: fixed;
-  background-color: #fff;;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  display: flex;
-  flex-direction: column;
-}
-div.titleBar {
-  background: linear-gradient(to bottom, rgba(252,252,252,1) 90%, rgba(249,249,249,1) 100%);
-  border-bottom: 1px solid #f5f5f5;
-  color: #333;
-  cursor: move;
-  padding: 8px 4px;
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  font-weight: 500;
-}
-span.windowTitle {
-  flex: 1;
-  text-align: center;
-}
-div.closeButton {
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: darkgrey;
-  text-align: center;
-
-  &:hover {
-    color: black;
-    border-color: darkgrey;
-  }
-}
-div.content {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-}
\ No newline at end of file
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 4f1f5814e61..5834663623c 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as styles_any from './styles.module.scss';
+import {Modal} from 'react-bootstrap';
 import ReactSelect from 'react-select';
 import {observer} from "mobx-react";
 import {computed} from 'mobx';
@@ -10,9 +11,13 @@ import classNames from "../../lib/classNames";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
 import {getOncoQueryDocUrl} from "../../api/urls";
 import {QueryStoreComponent} from "./QueryStore";
+import MutSigGeneSelector from "./MutSigGeneSelector";
+import GisticGeneSelector from "./GisticGeneSelector";
 
 const styles = styles_any as {
 	GeneSetSelector: string,
+	MutSigGeneSelectorWindow: string,
+	GisticGeneSelectorWindow: string,
 	ReactSelect: string,
 	buttonRow: string,
 	geneSet: string,
@@ -103,6 +108,46 @@ export default class GeneSetSelector extends QueryStoreComponent<GeneSetSelector
 				/>
 
 				<GeneSymbolValidator/>
+
+				<Modal
+					className={styles.MutSigGeneSelectorWindow}
+					show={this.store.showMutSigPopup}
+					onHide={() => this.store.showMutSigPopup = false}
+				>
+					<Modal.Header closeButton>
+						<Modal.Title>Recently Mutated Genes</Modal.Title>
+					</Modal.Header>
+					<Modal.Body>
+						<MutSigGeneSelector
+							initialSelection={this.store.geneIds}
+							data={this.store.mutSigForSingleStudy.result}
+							onSelect={map_geneSymbol_selected => {
+								this.store.applyGeneSelection(map_geneSymbol_selected);
+								this.store.showMutSigPopup = false;
+							}}
+						/>
+					</Modal.Body>
+				</Modal>
+
+				<Modal
+					className={styles.GisticGeneSelectorWindow}
+					show={this.store.showGisticPopup}
+					onHide={() => this.store.showGisticPopup = false}
+				>
+					<Modal.Header closeButton>
+						<Modal.Title>Recurrent Copy Number Alterations (Gistic)</Modal.Title>
+					</Modal.Header>
+					<Modal.Body>
+						<GisticGeneSelector
+							initialSelection={this.store.geneIds}
+							data={this.store.gisticForSingleStudy.result}
+							onSelect={map_geneSymbol_selected => {
+								this.store.applyGeneSelection(map_geneSymbol_selected);
+								this.store.showGisticPopup = false;
+							}}
+						/>
+					</Modal.Body>
+				</Modal>
 			</FlexCol>
 		);
 	}
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 6ca39b2d971..7e494a51eab 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -1,7 +1,5 @@
 import * as _ from "lodash";
 import * as React from "react";
-import Spinner from "react-spinkit";
-import Dictionary = _.Dictionary;
 import CancerStudySelector from "./CancerStudySelector";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import * as styles_any from './styles.module.scss';
@@ -11,10 +9,6 @@ import {observable, computed, action} from 'mobx';
 import {observer} from "mobx-react";
 import DataTypePrioritySelector from "./DataTypePrioritySelector";
 import GeneSetSelector from "./GeneSetSelector";
-import MutSigGeneSelector from "./MutSigGeneSelector";
-import GisticGeneSelector from "./GisticGeneSelector";
-import PopupWindow from "../popupWindow/PopupWindow";
-import AsyncStatus from "../asyncStatus/AsyncStatus";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import {QueryStore} from "./QueryStore";
 import {providesStoreContext} from "../../lib/ContextUtils";
@@ -24,8 +18,6 @@ import CaseSetSelector from "./CaseSetSelector";
 const styles = styles_any as {
 	QueryContainer: string,
 	queryContainerContent: string,
-	MutSigGeneSelectorWindow: string,
-	GisticGeneSelectorWindow: string,
 	downloadSubmitExplanation: string,
 	transposeDataMatrix: string,
 	submitRow: string,
@@ -78,40 +70,6 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
 
 				<GeneSetSelector/>
 
-				{!!(this.store.showMutSigPopup) && (
-					<PopupWindow
-						className={styles.MutSigGeneSelectorWindow}
-						windowTitle="Recurrently Mutated Genes"
-						onClickClose={() => this.store.showMutSigPopup = false}
-					>
-						<MutSigGeneSelector
-							initialSelection={this.store.geneIds}
-							data={this.store.mutSigForSingleStudy.result}
-							onSelect={map_geneSymbol_selected => {
-								this.store.applyGeneSelection(map_geneSymbol_selected);
-								this.store.showMutSigPopup = false;
-							}}
-						/>
-					</PopupWindow>
-				)}
-
-				{!!(this.store.showGisticPopup) && (
-					<PopupWindow
-						className={styles.GisticGeneSelectorWindow}
-						windowTitle="Recurrent Copy Number Alterations (Gistic)"
-						onClickClose={() => this.store.showGisticPopup = false}
-					>
-						<GisticGeneSelector
-							initialSelection={this.store.geneIds}
-							data={this.store.gisticForSingleStudy.result}
-							onSelect={map_geneSymbol_selected => {
-								this.store.applyGeneSelection(map_geneSymbol_selected);
-								this.store.showGisticPopup = false;
-							}}
-						/>
-					</PopupWindow>
-				)}
-
 				{!!(this.store.forDownloadTab) && (
 					<span className={styles.downloadSubmitExplanation}>
 						Clicking submit will generate a tab-delimited file containing your requested data.
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 14eebebe331..4c5a018313d 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -406,11 +406,16 @@
 }
 
 div.MutSigGeneSelectorWindow {
-  width: 650px;
+  div:global(.modal-dialog) {
+    width: 650px;
+  }
 
   div.MutSigGeneSelector {
     margin: 10px;
     flex: 1;
+    display: flex;
+    flex-direction: column;
+
     :global(.table) {
       margin: 0;
       & > thead > tr > th {
@@ -436,17 +441,21 @@ div.MutSigGeneSelectorWindow {
       }
     }
     button.selectButton {
-      float: right;
+      align-self: flex-end;
     }
   }
 }
 
 div.GisticGeneSelectorWindow {
-  width: 800px;
+  div:global(.modal-dialog) {
+    width: 800px;
+  }
 
   div.GisticGeneSelector {
     margin: 10px;
     flex: 1;
+    display: flex;
+    flex-direction: column;
 
     div.header.amp.del {
       float: left;
@@ -463,7 +472,6 @@ div.GisticGeneSelectorWindow {
 
     div.gisticTable {
       margin: 10px 0;
-      max-height: 400px;
       overflow: auto;
       :global(.table) {
         margin: 0;
@@ -532,7 +540,7 @@ div.GisticGeneSelectorWindow {
     }
 
     button.selectButton {
-      float: right;
+      align-self: flex-end;
     }
   }
 }

From 2494348256bf4bbe04ae4080181238349704838a Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Mon, 20 Mar 2017 16:09:50 -0400
Subject: [PATCH 106/133] Fix bug where "Selected Studies" overlay was affected
 by search text

---
 src/shared/components/StudyList/StudyListLogic.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 791ba729f38..f755491962a 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -84,6 +84,10 @@ export default class StudyListLogic
 			if (!this.shouldConsiderNode(node))
 				return false;
 
+			// hack - shouldConsiderNode() call above does all the required filtering
+			if (this.store.showSelectedStudiesOnly)
+				return true;
+
 			// if no search text is entered, include all nodes
 			if (!this.store.searchText)
 				return true;

From 4eee9f4b837e0faf0304f024c8b7bb74f81fb170 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Mon, 20 Mar 2017 17:01:51 -0400
Subject: [PATCH 107/133] Improved error display

---
 .../components/asyncStatus/styles.module.scss |  1 +
 .../components/query/CaseSetSelector.tsx      | 23 ++++++----
 .../components/query/GeneSymbolValidator.tsx  |  3 ++
 .../components/query/QueryContainer.tsx       | 18 +++-----
 src/shared/components/query/QueryStore.ts     | 46 ++++++++++---------
 5 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/shared/components/asyncStatus/styles.module.scss b/src/shared/components/asyncStatus/styles.module.scss
index f9c025ce1c0..5efea39faa8 100644
--- a/src/shared/components/asyncStatus/styles.module.scss
+++ b/src/shared/components/asyncStatus/styles.module.scss
@@ -12,6 +12,7 @@
   color: #cd0a0a;
 
   .icon {
+    margin-right: 5px;
   }
 
   .message {
diff --git a/src/shared/components/query/CaseSetSelector.tsx b/src/shared/components/query/CaseSetSelector.tsx
index ead4a10e58b..8431e67b1b4 100644
--- a/src/shared/components/query/CaseSetSelector.tsx
+++ b/src/shared/components/query/CaseSetSelector.tsx
@@ -7,6 +7,7 @@ import {FlexCol} from "../flexbox/FlexBox";
 import {QueryStore, QueryStoreComponent} from "./QueryStore";
 import {getStudyViewUrl} from "../../api/urls";
 import DefaultTooltip from "../DefaultTooltip";
+import AsyncStatus from "../asyncStatus/AsyncStatus";
 
 const styles = styles_any as {
 	CaseSetSelector: string,
@@ -59,16 +60,18 @@ export default class CaseSetSelector extends QueryStoreComponent<{}, {}>
 		return (
 			<FlexCol padded overflow className={styles.CaseSetSelector}>
 				<h2>Select Patient/Case Set:</h2>
-				<ReactSelect
-					className={styles.ReactSelect}
-					value={this.store.selectedSampleListId}
-					options={this.caseSetOptions}
-					clearable={this.store.selectedSampleListId != this.store.defaultSelectedSampleListId}
-					onChange={option => {
-						let value = option ? option.value : undefined;
-						this.store.selectedSampleListId = value === CUSTOM_CASE_LIST_ID ? '' : value;
-					}}
-				/>
+				<AsyncStatus promise={this.store.sampleLists}>
+					<ReactSelect
+						className={styles.ReactSelect}
+						value={this.store.selectedSampleListId}
+						options={this.caseSetOptions}
+						clearable={this.store.selectedSampleListId != this.store.defaultSelectedSampleListId}
+						onChange={option => {
+							let value = option ? option.value : undefined;
+							this.store.selectedSampleListId = value === CUSTOM_CASE_LIST_ID ? '' : value;
+						}}
+					/>
+				</AsyncStatus>
 				<a href={getStudyViewUrl(this.store.singleSelectedStudyId)}>To build your own case set, try out our enhanced Study View.</a>
 
 				{!!(!this.store.selectedSampleListId) && (
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 571ea97bb20..9553ac62693 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -42,6 +42,9 @@ export default class GeneSymbolValidator extends QueryStoreComponent<{}, {}>
 		if (!this.store.oql.query.length)
 			return null;
 
+		if (this.store.genes.isError)
+			return <AsyncStatus promise={this.store.genes}/>;
+
 		if (this.store.genes.isPending && this.store.genes.result.suggestions.length == 0)
 			return (
 				<div className={styles.GeneSymbolValidator}>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 7e494a51eab..b9b83742407 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -18,12 +18,12 @@ import CaseSetSelector from "./CaseSetSelector";
 const styles = styles_any as {
 	QueryContainer: string,
 	queryContainerContent: string,
+	errorMessage: string,
 	downloadSubmitExplanation: string,
 	transposeDataMatrix: string,
 	submitRow: string,
 	submit: string,
 	genomeSpace: string,
-	errorMessage: string,
 };
 
 interface QueryContainerProps
@@ -42,16 +42,6 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
 
     render():JSX.Element
     {
-        let error = this.store.cancerTypes.error
-        	|| this.store.cancerStudies.error
-        	|| this.store.geneticProfiles.error
-        	|| this.store.sampleLists.error
-        	|| this.store.mutSigForSingleStudy.error
-        	|| this.store.gisticForSingleStudy.error
-        	|| this.store.genes.error;
-        if (error)
-			return <span className={styles.errorMessage}>{error.toString()}</span>;
-
         return (
 			<FlexCol padded overflow className={styles.QueryContainer}>
 				<CancerStudySelector/>
@@ -86,6 +76,12 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
 					</LabeledCheckbox>
 				)}
 
+				{!!(this.store.submitError) && (
+					<span className={styles.errorMessage}>
+						{this.store.submitError}
+					</span>
+				)}
+
 				<FlexRow padded className={styles.submitRow}>
 					<button className={classNames('cta', styles.submit)} onClick={() => this.store.submit()}>
 						Submit
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 65d4a9d9719..7170b789449 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -214,7 +214,6 @@ export class QueryStore
 	@observable showSelectedStudiesOnly:boolean = false;
 	@observable.shallow selectedCancerTypeIds:string[] = [];
 	@observable clickAgainToDeselectSingle:boolean = true;
-	@observable submitError = '';
 
 	@observable private _maxTreeDepth:number = 3;
 	@computed get maxTreeDepth()
@@ -576,6 +575,30 @@ export class QueryStore
 
 	// SUBMIT
 
+	@computed get submitError()
+	{
+		let haveExpInQuery = this.oql.query.some(result => {
+			return (result.alterations || []).some(alt => alt.alteration_type === 'exp');
+		});
+
+		if (!this.selectedStudyIds.length)
+			return "Please select one or more cancer studies.";
+
+		if (this.singleSelectedStudyId)
+		{
+			let expProfileSelected = this.selectedProfileIds.some(id => {
+				let profile = this.dict_geneticProfileId_geneticProfile[id];
+				return !!profile && profile.geneticAlterationType === 'MRNA_EXPRESSION';
+			});
+			if (haveExpInQuery && !expProfileSelected)
+				return "Expression specified in the list of genes, but not selected in the Genetic Profile Checkboxes.";
+		}
+		else if (haveExpInQuery)
+		{
+			return "Expression filtering in the gene list is not supported when doing cross cancer queries.";
+		}
+	}
+
 	private readonly dict_geneticAlterationType_filenameSuffix:{[K in GeneticProfile['geneticAlterationType']]?: string} = {
 		"MUTATION_EXTENDED": 'mutations',
 		"COPY_NUMBER_ALTERATION": 'cna',
@@ -755,27 +778,8 @@ export class QueryStore
 			return;
 		}
 
-		let haveExpInQuery = this.oql.query.some(result => {
-			return (result.alterations || []).some(alt => alt.alteration_type === 'exp');
-		});
-
-		if (this.singleSelectedStudyId)
-		{
-			let expProfileSelected = this.selectedProfileIds.some(id => {
-				let profile = this.dict_geneticProfileId_geneticProfile[id];
-				return !!profile && profile.geneticAlterationType === 'MRNA_EXPRESSION';
-			});
-			if (haveExpInQuery && !expProfileSelected)
-			{
-				this.submitError = "Expression specified in the list of genes, but not selected in the Genetic Profile Checkboxes.";
-				return;
-			}
-		}
-		else if (haveExpInQuery)
-		{
-			this.submitError = "Expression filtering in the gene list is not supported when doing cross cancer queries.";
+		if (this.submitError)
 			return;
-		}
 
 		let urlParams = await this.getUrlParams();
 		let historyUrl = URL.format({...urlParams, pathname: window.location.href.split('?')[0]});

From 641237d157cc574d5a9f3c3903ef1c4ff30d8657 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 22 Mar 2017 02:48:43 -0400
Subject: [PATCH 108/133] Custom case set validation & submit button disabling

---
 src/globalStyles/global.scss                  |   6 +-
 .../components/asyncStatus/AsyncStatus.tsx    |   8 +-
 .../components/query/CaseSetSelector.tsx      |  29 ++-
 .../components/query/QueryContainer.tsx       |   5 +-
 src/shared/components/query/QueryStore.ts     | 230 ++++++++++++------
 .../components/query/styles.module.scss       |   8 +
 6 files changed, 196 insertions(+), 90 deletions(-)

diff --git a/src/globalStyles/global.scss b/src/globalStyles/global.scss
index a890caf5f5e..07eee18d481 100755
--- a/src/globalStyles/global.scss
+++ b/src/globalStyles/global.scss
@@ -35,11 +35,15 @@ body {
     padding: 5px 10px;
     box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.1);
 
-    &:hover {
+    &:hover:not(:disabled) {
       cursor: pointer;
       background: #1f688e;
       color: #fff;
     }
+    &:disabled {
+      cursor: default;
+      color: #BBB;
+    }
   }
   
 }
diff --git a/src/shared/components/asyncStatus/AsyncStatus.tsx b/src/shared/components/asyncStatus/AsyncStatus.tsx
index 3cd742bfe3f..1719f55a78b 100644
--- a/src/shared/components/asyncStatus/AsyncStatus.tsx
+++ b/src/shared/components/asyncStatus/AsyncStatus.tsx
@@ -17,6 +17,7 @@ const styles = styles_any as {
 interface IAsyncStatusProps extends React.HTMLProps<HTMLDivElement>
 {
 	promise: MobxPromise<any> | Array<MobxPromise<any>>;
+	showLastError?: boolean;
 }
 
 @observer
@@ -29,8 +30,11 @@ export default class AsyncStatus extends React.Component<IAsyncStatusProps, {}>
 
 	render()
 	{
-		let {promise, children, className, ...divProps} = this.props;
-		switch (this.promise.status)
+		let {promise, children, className, showLastError, ...divProps} = this.props;
+		let {status, error} = this.promise;
+		if (showLastError && error)
+			status = 'error';
+		switch (status)
 		{
 			case 'pending':
 				return (
diff --git a/src/shared/components/query/CaseSetSelector.tsx b/src/shared/components/query/CaseSetSelector.tsx
index 8431e67b1b4..c0a06a7eed9 100644
--- a/src/shared/components/query/CaseSetSelector.tsx
+++ b/src/shared/components/query/CaseSetSelector.tsx
@@ -3,20 +3,20 @@ import * as styles_any from './styles.module.scss';
 import ReactSelect from 'react-select';
 import {observer} from "mobx-react";
 import {computed} from 'mobx';
-import {FlexCol} from "../flexbox/FlexBox";
-import {QueryStore, QueryStoreComponent} from "./QueryStore";
+import {FlexCol, FlexRow} from "../flexbox/FlexBox";
+import {QueryStore, QueryStoreComponent, CUSTOM_CASE_LIST_ID} from "./QueryStore";
 import {getStudyViewUrl} from "../../api/urls";
 import DefaultTooltip from "../DefaultTooltip";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
+import Spinner from "react-spinkit";
 
 const styles = styles_any as {
 	CaseSetSelector: string,
 	ReactSelect: string,
 	tooltip: string,
+	radioRow: string,
 };
 
-const CUSTOM_CASE_LIST_ID = '';
-
 @observer
 export default class CaseSetSelector extends QueryStoreComponent<{}, {}>
 {
@@ -66,15 +66,12 @@ export default class CaseSetSelector extends QueryStoreComponent<{}, {}>
 						value={this.store.selectedSampleListId}
 						options={this.caseSetOptions}
 						clearable={this.store.selectedSampleListId != this.store.defaultSelectedSampleListId}
-						onChange={option => {
-							let value = option ? option.value : undefined;
-							this.store.selectedSampleListId = value === CUSTOM_CASE_LIST_ID ? '' : value;
-						}}
+						onChange={option => this.store.selectedSampleListId = option ? option.value : undefined}
 					/>
 				</AsyncStatus>
 				<a href={getStudyViewUrl(this.store.singleSelectedStudyId)}>To build your own case set, try out our enhanced Study View.</a>
 
-				{!!(!this.store.selectedSampleListId) && (
+				{!!(this.store.selectedSampleListId === CUSTOM_CASE_LIST_ID) && (
 					<FlexCol padded>
 						<span>Enter case IDs below:</span>
 						<textarea
@@ -84,8 +81,18 @@ export default class CaseSetSelector extends QueryStoreComponent<{}, {}>
 							value={this.store.caseIds}
 							onChange={event => this.store.caseIds = event.currentTarget.value}
 						/>
-						<this.CaseIdsModeRadio label='By sample ID' state='sample'/>
-						<this.CaseIdsModeRadio label='By patient ID' state='patient'/>
+						<div className={styles.radioRow}>
+							{!!(this.store.asyncCustomCaseSet.isPending) && (
+								<Spinner/>
+							)}
+							<FlexCol padded>
+								<this.CaseIdsModeRadio label='By sample ID' state='sample'/>
+								<this.CaseIdsModeRadio label='By patient ID' state='patient'/>
+							</FlexCol>
+						</div>
+						{!!(this.store.asyncCustomCaseSet.error) && (
+							<AsyncStatus showLastError promise={this.store.asyncCustomCaseSet}/>
+						)}
 					</FlexCol>
 				)}
 			</FlexCol>
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index b9b83742407..5f011c2bab8 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -14,6 +14,7 @@ import {QueryStore} from "./QueryStore";
 import {providesStoreContext} from "../../lib/ContextUtils";
 import AppConfig from "appConfig";
 import CaseSetSelector from "./CaseSetSelector";
+import AsyncStatus from "../asyncStatus/AsyncStatus";
 
 const styles = styles_any as {
 	QueryContainer: string,
@@ -83,11 +84,11 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
 				)}
 
 				<FlexRow padded className={styles.submitRow}>
-					<button className={classNames('cta', styles.submit)} onClick={() => this.store.submit()}>
+					<button disabled={!this.store.submitEnabled} className={classNames('cta', styles.submit)} onClick={() => this.store.submit()}>
 						Submit
 					</button>
 					{!!(this.store.forDownloadTab && AppConfig.genomespaceEnabled) && (
-						<button className={styles.genomeSpace} onClick={() => this.store.sendToGenomeSpace()}>
+						<button disabled={!this.store.submitEnabled} className={styles.genomeSpace} onClick={() => this.store.sendToGenomeSpace()}>
 							Send to GenomeSpace
 						</button>
 					)}
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 7170b789449..6e44e7b6053 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -1,7 +1,10 @@
 import * as _ from 'lodash';
 import client from "../../api/cbioportalClientInstance";
 import {ObservableMap, toJS, observable, reaction, action, computed, whyRun, expr} from "mobx";
-import {TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gene} from "../../api/generated/CBioPortalAPI";
+import {
+	TypeOfCancer as CancerType, GeneticProfile, CancerStudy, SampleList, Gene,
+	Sample, SampleIdentifier
+} from "../../api/generated/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
 import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
@@ -16,6 +19,7 @@ import {ComponentGetsStoreContext} from "../../lib/ContextUtils";
 import URL from 'url';
 import {buildCBioPortalUrl, BuildUrlParams} from "../../api/urls";
 import {SyntaxError} from "../../lib/oql/oql-parser";
+import MobxPromise from 'mobxpromise';
 
 type CancerStudyQueryUrlParams = {
 	cancer_study_id: string,
@@ -37,6 +41,8 @@ type CancerStudyQueryUrlParams = {
 
 export type GeneReplacement = {alias: string, genes: Gene[]};
 
+export const CUSTOM_CASE_LIST_ID = '';
+
 function isInteger(str:string)
 {
 	return Number.isInteger(Number(str));
@@ -183,7 +189,7 @@ export class QueryStore
 	@observable _caseIdsMode:'sample'|'patient' = 'sample';
 	@computed get caseIdsMode()
 	{
-		return this.selectedSampleListId ? 'sample' : this._caseIdsMode;
+		return this.selectedSampleListId === CUSTOM_CASE_LIST_ID ? this._caseIdsMode : 'sample';
 	}
 	set caseIdsMode(value)
 	{
@@ -347,20 +353,73 @@ export class QueryStore
 	@memoize
 	getSamplesForStudyAndPatient(studyId:string, patientId:string)
 	{
-		return client.getAllSamplesOfPatientInStudyUsingGET({studyId, patientId});
+		return client.getAllSamplesOfPatientInStudyUsingGET({studyId, patientId})
+			.then(
+				samples => ({studyId, patientId, samples, error: undefined}),
+				error => ({studyId, patientId, samples: [] as Sample[], error})
+			);
 	}
 
-	async getSampleIdsFromCustomCaseSet()
-	{
-		const studyId = this.singleSelectedStudyId;
-		if (!studyId)
-			return [];
-		const caseIds = this.caseIds.match(/\b\S+\b/g) || [];
-		if (this.caseIdsMode === 'sample')
-			return caseIds;
-		const samplesPromises = caseIds.map(patientId => this.getSamplesForStudyAndPatient(studyId, patientId));
-		return _.flatten(await Promise.all(samplesPromises)).map(sample => sample.sampleId);
-	}
+	readonly asyncCustomCaseSet = new MobxPromise({
+		invoke: async () => {
+			if (this.selectedSampleListId !== CUSTOM_CASE_LIST_ID || !this.singleSelectedStudyId)
+				return [];
+			return this.invokeCustomCaseSetLater({
+				singleSelectedStudyId: this.singleSelectedStudyId,
+				caseIds: this.caseIds,
+				caseIdsMode: this.caseIdsMode,
+			})
+		},
+		default: []
+	});
+
+	private invokeCustomCaseSetLater = debounceAsync(
+		async (params:Pick<this, 'singleSelectedStudyId' | 'caseIds' | 'caseIdsMode'>) => {
+			const studyId = params.singleSelectedStudyId as string || '';
+			const caseIds = params.caseIds.match(/\b\S+\b/g) || [];
+			const sampleIds:string[] = [];
+			const invalidIds:string[] = [];
+			if (!studyId)
+				return [];
+			if (params.caseIdsMode === 'sample')
+			{
+				if (caseIds.length)
+				{
+					const sampleIdentifiers = caseIds.map(sampleId => ({studyId, sampleId}));
+					for (const sample of await client.fetchSamplesUsingPOST({sampleIdentifiers, projection: "ID"}))
+						sampleIds.push(sample.sampleId);
+				}
+				invalidIds.push(..._.difference(caseIds, sampleIds));
+			}
+			else
+			{
+				// convert patient IDs to sample IDs
+				const samplesPromises = caseIds.map(patientId => this.getSamplesForStudyAndPatient(studyId, patientId));
+				for (const {studyId, patientId, samples, error} of await Promise.all(samplesPromises))
+				{
+					if (error || !samples.length)
+						invalidIds.push(patientId);
+					else
+						sampleIds.push(...samples.map(sample => sample.sampleId));
+				}
+			}
+
+			if (invalidIds.length)
+				throw new Error(
+					`Invalid ${
+						params.caseIdsMode
+					}${
+						invalidIds.length > 1 ? 's' : ''
+					} for the selected cancer study: ${
+						invalidIds.join(' ')
+					}`
+				);
+
+			return sampleIds;
+		},
+		500
+	);
+
 
 	////////////////////////////////////////////////////////////////////////////////
 	// DERIVED DATA
@@ -575,6 +634,15 @@ export class QueryStore
 
 	// SUBMIT
 
+	@computed get submitEnabled()
+	{
+		return (
+			!this.submitError &&
+			!this.genes.result.suggestions.length &&
+			this.asyncUrlParams.isComplete
+		);
+	}
+
 	@computed get submitError()
 	{
 		let haveExpInQuery = this.oql.query.some(result => {
@@ -586,17 +654,28 @@ export class QueryStore
 
 		if (this.singleSelectedStudyId)
 		{
-			let expProfileSelected = this.selectedProfileIds.some(id => {
-				let profile = this.dict_geneticProfileId_geneticProfile[id];
-				return !!profile && profile.geneticAlterationType === 'MRNA_EXPRESSION';
-			});
+			if (!this.selectedProfileIds.length)
+				return "Please select one or more genetic profiles.";
+
+			let expProfileSelected = this.getSelectedProfileIdFromGeneticAlterationType('MRNA_EXPRESSION');
 			if (haveExpInQuery && !expProfileSelected)
 				return "Expression specified in the list of genes, but not selected in the Genetic Profile Checkboxes.";
+
+			if (this.selectedSampleListId === CUSTOM_CASE_LIST_ID)
+			{
+				if (this.asyncCustomCaseSet.isComplete && !this.asyncCustomCaseSet.result.length)
+					return "Please enter at least one ID in your custom case set.";
+				if (this.asyncCustomCaseSet.error)
+					return "Error in custom case set.";
+			}
 		}
 		else if (haveExpInQuery)
 		{
 			return "Expression filtering in the gene list is not supported when doing cross cancer queries.";
 		}
+
+		if (!this.oql.query.length)
+			return "Please enter one or more gene symbols.";
 	}
 
 	private readonly dict_geneticAlterationType_filenameSuffix:{[K in GeneticProfile['geneticAlterationType']]?: string} = {
@@ -620,54 +699,56 @@ export class QueryStore
 		return `cbioportal-${study.studyId}-${suffix}.txt`;
 	}
 
-	async getUrlParams()
-	{
-		let params: CancerStudyQueryUrlParams = {
-			cancer_study_id: this.singleSelectedStudyId || 'all',
-			genetic_profile_ids_PROFILE_MUTATION_EXTENDED: this.getSelectedProfileIdFromGeneticAlterationType("MUTATION_EXTENDED"),
-			genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION: this.getSelectedProfileIdFromGeneticAlterationType("COPY_NUMBER_ALTERATION"),
-			genetic_profile_ids_PROFILE_MRNA_EXPRESSION: this.getSelectedProfileIdFromGeneticAlterationType("MRNA_EXPRESSION"),
-			genetic_profile_ids_PROFILE_METHYLATION: this.getSelectedProfileIdFromGeneticAlterationType("METHYLATION") || this.getSelectedProfileIdFromGeneticAlterationType("METHYLATION_BINARY"),
-			genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION: this.getSelectedProfileIdFromGeneticAlterationType("PROTEIN_LEVEL"),
-			Z_SCORE_THRESHOLD: this.zScoreThreshold,
-			RPPA_SCORE_THRESHOLD: this.rppaScoreThreshold,
-			data_priority: this.dataTypePriorityCode,
-			case_set_id: this.selectedSampleListId || '-1', // empty string won't work
-			case_ids: (await this.getSampleIdsFromCustomCaseSet()).join('\r\n'),
-			gene_list: this.geneQuery || ' ', // empty string won't work
-			tab_index: this.forDownloadTab ? 'tab_download' : 'tab_visualize' as any,
-			transpose_matrix: this.transposeDataMatrix ? 'on' : undefined,
-			Action: 'Submit',
-		};
+	readonly asyncUrlParams = new MobxPromise({
+		await: () => [this.asyncCustomCaseSet],
+		invoke: async () => {
+			let params: CancerStudyQueryUrlParams = {
+				cancer_study_id: this.singleSelectedStudyId || 'all',
+				genetic_profile_ids_PROFILE_MUTATION_EXTENDED: this.getSelectedProfileIdFromGeneticAlterationType("MUTATION_EXTENDED"),
+				genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION: this.getSelectedProfileIdFromGeneticAlterationType("COPY_NUMBER_ALTERATION"),
+				genetic_profile_ids_PROFILE_MRNA_EXPRESSION: this.getSelectedProfileIdFromGeneticAlterationType("MRNA_EXPRESSION"),
+				genetic_profile_ids_PROFILE_METHYLATION: this.getSelectedProfileIdFromGeneticAlterationType("METHYLATION") || this.getSelectedProfileIdFromGeneticAlterationType("METHYLATION_BINARY"),
+				genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION: this.getSelectedProfileIdFromGeneticAlterationType("PROTEIN_LEVEL"),
+				Z_SCORE_THRESHOLD: this.zScoreThreshold,
+				RPPA_SCORE_THRESHOLD: this.rppaScoreThreshold,
+				data_priority: this.dataTypePriorityCode,
+				case_set_id: this.selectedSampleListId || '-1', // empty string won't work
+				case_ids: this.asyncCustomCaseSet.result.join('\r\n'),
+				gene_list: this.geneQuery || ' ', // empty string won't work
+				tab_index: this.forDownloadTab ? 'tab_download' : 'tab_visualize' as any,
+				transpose_matrix: this.transposeDataMatrix ? 'on' : undefined,
+				Action: 'Submit',
+			};
 
-		// Remove params with no value, because they may cause problems.
-		// For example, the server will always transpose if transpose_matrix is present, no matter the value.
-		for (let key in params)
-			if (!(params as any)[key])
-				delete (params as any)[key];
+			// Remove params with no value, because they may cause problems.
+			// For example, the server will always transpose if transpose_matrix is present, no matter the value.
+			for (let key in params)
+				if (!(params as any)[key])
+					delete (params as any)[key];
 
-		if (this.selectedStudyIds.length != 1)
-		{
-			let studyIds = this.selectedStudyIds;
-			if (!studyIds.length)
-				studyIds = this.cancerStudies.result.map(study => study.studyId);
-			return {
-				pathname: 'cross_cancer.do',
-				query: params,
-				hash: (
-					`crosscancer/overview/${
-						params.data_priority
-					}/${
-						encodeURIComponent(params.gene_list)
-					}/${
-						encodeURIComponent(studyIds.join(','))
-					}`
-				),
-			};
-		}
+			if (this.selectedStudyIds.length != 1)
+			{
+				let studyIds = this.selectedStudyIds;
+				if (!studyIds.length)
+					studyIds = this.cancerStudies.result.map(study => study.studyId);
+				return {
+					pathname: 'cross_cancer.do',
+					query: params,
+					hash: (
+						`crosscancer/overview/${
+							params.data_priority
+						}/${
+							encodeURIComponent(params.gene_list)
+						}/${
+							encodeURIComponent(studyIds.join(','))
+						}`
+					),
+				};
+			}
 
-		return {pathname: 'index.do', query: params};
-	}
+			return {pathname: 'index.do', query: params};
+		}
+	});
 
 	////////////////////////////////////////////////////////////////////////////////
 	// ACTIONS
@@ -694,15 +775,16 @@ export class QueryStore
 				cancer_study_list: study_list && decodeURIComponent(study_list).split(','),
 			};
 		}
-
-		this.selectedStudyIds = hashParams.cancer_study_list || (params.cancer_study_id ? [params.cancer_study_id] : []);
-		this.selectedProfileIds = [
+		let profileIds = [
 			params.genetic_profile_ids_PROFILE_MUTATION_EXTENDED,
 			params.genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION,
 			params.genetic_profile_ids_PROFILE_MRNA_EXPRESSION,
 			params.genetic_profile_ids_PROFILE_METHYLATION,
 			params.genetic_profile_ids_PROFILE_PROTEIN_EXPRESSION,
-		].filter(id => id) as string[];
+		];
+
+		this.selectedStudyIds = hashParams.cancer_study_list || (params.cancer_study_id ? [params.cancer_study_id] : []);
+		this._selectedProfileIds = profileIds.every(id => id === undefined) ? undefined : profileIds.filter(id => id) as string[];
 		this.zScoreThreshold = params.Z_SCORE_THRESHOLD || '2.0';
 		this.rppaScoreThreshold = params.RPPA_SCORE_THRESHOLD || '2.0';
 		this.dataTypePriorityCode = hashParams.data_priority || params.data_priority || '0';
@@ -770,7 +852,7 @@ export class QueryStore
 		this.geneQuery = normalizeQuery([this.geneQuery, ...toAppend].join(' '));
 	}
 
-	@action async submit()
+	@action submit()
 	{
 		if (this.oql.error)
 		{
@@ -778,10 +860,10 @@ export class QueryStore
 			return;
 		}
 
-		if (this.submitError)
+		if (!this.submitEnabled || !this.asyncUrlParams.isComplete)
 			return;
 
-		let urlParams = await this.getUrlParams();
+		let urlParams = this.asyncUrlParams.result;
 		let historyUrl = URL.format({...urlParams, pathname: window.location.href.split('?')[0]});
 		let newUrl = buildCBioPortalUrl(urlParams);
 		if (historyUrl != newUrl)
@@ -789,13 +871,13 @@ export class QueryStore
 		window.location.href = newUrl;
 	}
 
-	@action async sendToGenomeSpace()
+	@action sendToGenomeSpace()
 	{
-		// if (!validDownloadDataForm(this))
-		// 	return;
+		if (!this.submitEnabled || !this.asyncUrlParams.isComplete)
+			return;
 
 		gsUploadByGet({
-			url: buildCBioPortalUrl(await this.getUrlParams()),
+			url: buildCBioPortalUrl(this.asyncUrlParams.result),
 			filename: this.downloadDataFilename,
 			successCallback: savePath => alert('Saved to GenomeSpace as ' + savePath),
 			errorCallback: savePath => alert('ERROR saving to GenomeSpace as ' + savePath),
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 4c5a018313d..a11ad746dd0 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -300,6 +300,14 @@
 .CaseSetSelector {
   .ReactSelect {
   }
+  textarea {
+    resize: vertical;
+  }
+  .radioRow {
+    :global(.spinner) {
+      float: right;
+    }
+  }
   input[type="radio"] {
     margin-right: 6px;
   }

From 861400103b12cfa339991243fba35f044bbd1774 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 22 Mar 2017 14:15:36 -0400
Subject: [PATCH 109/133] Upgrade mobxpromise

---
 src/shared/components/query/QueryStore.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 6e44e7b6053..a7a6092bdd5 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -19,7 +19,6 @@ import {ComponentGetsStoreContext} from "../../lib/ContextUtils";
 import URL from 'url';
 import {buildCBioPortalUrl, BuildUrlParams} from "../../api/urls";
 import {SyntaxError} from "../../lib/oql/oql-parser";
-import MobxPromise from 'mobxpromise';
 
 type CancerStudyQueryUrlParams = {
 	cancer_study_id: string,
@@ -249,7 +248,7 @@ export class QueryStore
 			});
 		},
 		default: [],
-		reaction: () => {
+		onResult: () => {
 			if (this._isFromUrlParams.selectedProfileIds)
 				this._isFromUrlParams.selectedProfileIds = false;
 			else
@@ -268,7 +267,7 @@ export class QueryStore
 			return _.sortBy(sampleLists, sampleList => sampleList.name);
 		},
 		default: [],
-		reaction: () => {
+		onResult: () => {
 			if (this._isFromUrlParams.selectedSampleListId)
 				this._isFromUrlParams.selectedSampleListId = false;
 			else
@@ -360,7 +359,7 @@ export class QueryStore
 			);
 	}
 
-	readonly asyncCustomCaseSet = new MobxPromise({
+	readonly asyncCustomCaseSet = remoteData({
 		invoke: async () => {
 			if (this.selectedSampleListId !== CUSTOM_CASE_LIST_ID || !this.singleSelectedStudyId)
 				return [];
@@ -699,7 +698,7 @@ export class QueryStore
 		return `cbioportal-${study.studyId}-${suffix}.txt`;
 	}
 
-	readonly asyncUrlParams = new MobxPromise({
+	readonly asyncUrlParams = remoteData({
 		await: () => [this.asyncCustomCaseSet],
 		invoke: async () => {
 			let params: CancerStudyQueryUrlParams = {

From 9b27b4c26af61598ab4307b8bd7eaab3c5a9dc70 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 22 Mar 2017 15:23:33 -0400
Subject: [PATCH 110/133] Use @types/classnames

---
 src/shared/components/StudyList/StudyList.tsx |  2 +-
 .../components/asyncStatus/AsyncStatus.tsx    |  2 +-
 src/shared/components/flexbox/FlexBox.tsx     |  2 +-
 .../labeledCheckbox/LabeledCheckbox.tsx       |  2 +-
 .../components/query/CancerStudySelector.tsx  |  2 +-
 .../components/query/GeneSetSelector.tsx      |  2 +-
 .../query/GeneticProfileSelector.tsx          |  2 +-
 .../components/query/GisticGeneSelector.tsx   |  2 +-
 .../components/query/QueryContainer.tsx       |  2 +-
 src/shared/lib/classNames.spec.tsx            | 21 ----------
 src/shared/lib/classNames.ts                  | 41 -------------------
 11 files changed, 9 insertions(+), 71 deletions(-)
 delete mode 100644 src/shared/lib/classNames.spec.tsx
 delete mode 100644 src/shared/lib/classNames.ts

diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/StudyList/StudyList.tsx
index cd1282c9e11..7f08202fd7d 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/StudyList/StudyList.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioPortalAPI";
 import * as styles_any from './styles.module.scss';
-import classNames from "../../lib/classNames";
+import classNames from 'classnames';
 import FontAwesome from "react-fontawesome";
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import {observer} from "mobx-react";
diff --git a/src/shared/components/asyncStatus/AsyncStatus.tsx b/src/shared/components/asyncStatus/AsyncStatus.tsx
index 1719f55a78b..3987e71e96a 100644
--- a/src/shared/components/asyncStatus/AsyncStatus.tsx
+++ b/src/shared/components/asyncStatus/AsyncStatus.tsx
@@ -4,7 +4,7 @@ import MobxPromise from "mobxpromise";
 import {observer} from "mobx-react";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
-import classNames from "../../lib/classNames";
+import classNames from 'classnames';
 
 const styles = styles_any as {
 	pending: string,
diff --git a/src/shared/components/flexbox/FlexBox.tsx b/src/shared/components/flexbox/FlexBox.tsx
index 0d36c3ac542..ce54eae2f40 100644
--- a/src/shared/components/flexbox/FlexBox.tsx
+++ b/src/shared/components/flexbox/FlexBox.tsx
@@ -9,7 +9,7 @@
 
 import * as React from "react";
 import styles from './styles.module.scss';
-import classNames from "shared/lib/classNames";
+import classNames from 'classnames';
 
 export interface IFlexBoxProps <T> extends React.HTMLProps<T>
 {
diff --git a/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx b/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
index 1dfe8a2c50f..dff3e90420f 100644
--- a/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
+++ b/src/shared/components/labeledCheckbox/LabeledCheckbox.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as styles_any from './styles.module.scss';
-import classNames from "../../lib/classNames";
+import classNames from 'classnames';
 import ChangeEventHandler = React.ChangeEventHandler;
 
 const styles = styles_any as {
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index b929f78d8ab..53b6eee6780 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -4,7 +4,7 @@ import Dictionary = _.Dictionary;
 import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioPortalAPI";
 import {FlexCol, FlexRow} from "../flexbox/FlexBox";
 import * as styles_any from './styles.module.scss';
-import classNames from "../../lib/classNames";
+import classNames from 'classnames';
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
 import StudyList from "../StudyList/StudyList";
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 5834663623c..52a60346f7c 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -7,7 +7,7 @@ import {computed} from 'mobx';
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import gene_lists from './gene_lists';
 import GeneSymbolValidator from "./GeneSymbolValidator";
-import classNames from "../../lib/classNames";
+import classNames from 'classnames';
 import AsyncStatus from "../asyncStatus/AsyncStatus";
 import {getOncoQueryDocUrl} from "../../api/urls";
 import {QueryStoreComponent} from "./QueryStore";
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 0925b71101a..39617a15e59 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -6,7 +6,7 @@ import * as styles_any from './styles.module.scss';
 import {action} from 'mobx';
 import {observer} from "mobx-react";
 import AsyncStatus from "../asyncStatus/AsyncStatus";
-import classNames from "../../lib/classNames";
+import classNames from 'classnames';
 import {FlexCol} from "../flexbox/FlexBox";
 import {QueryStoreComponent} from "./QueryStore";
 import DefaultTooltip from "../DefaultTooltip";
diff --git a/src/shared/components/query/GisticGeneSelector.tsx b/src/shared/components/query/GisticGeneSelector.tsx
index 9c23cef1b52..48461b2ee17 100644
--- a/src/shared/components/query/GisticGeneSelector.tsx
+++ b/src/shared/components/query/GisticGeneSelector.tsx
@@ -6,7 +6,7 @@ import {Gistic} from "../../api/generated/CBioPortalAPIInternal";
 import EnhancedReactTable from "../enhancedReactTable/EnhancedReactTable";
 import {IColumnFormatterData} from "../enhancedReactTable/IColumnFormatter";
 import {Td} from "reactable";
-import classNames from "../../lib/classNames";
+import classNames from 'classnames';
 import {IColumnDefMap} from "../enhancedReactTable/IEnhancedReactTableProps";
 import {toPrecision} from "../../lib/FormatUtils";
 import {getGeneSymbols, sortByCytoband} from "../../lib/GisticUtils";
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index 5f011c2bab8..e4c1b5ba396 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import CancerStudySelector from "./CancerStudySelector";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import * as styles_any from './styles.module.scss';
-import classNames from "../../lib/classNames";
+import classNames from 'classnames';
 import GeneticProfileSelector from "./GeneticProfileSelector";
 import {observable, computed, action} from 'mobx';
 import {observer} from "mobx-react";
diff --git a/src/shared/lib/classNames.spec.tsx b/src/shared/lib/classNames.spec.tsx
deleted file mode 100644
index 0fecc1741cd..00000000000
--- a/src/shared/lib/classNames.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as classNames from './classNames';
-import React from 'react';
-import { assert } from 'chai';
-import { shallow, mount } from 'enzyme';
-import sinon from 'sinon';
-
-describe('classNames', () => {
-
-    before(()=>{
-
-    });
-
-    after(()=>{
-
-    });
-
-    it('what does it do?', ()=>{
-
-    });
-
-});
diff --git a/src/shared/lib/classNames.ts b/src/shared/lib/classNames.ts
deleted file mode 100644
index 3737a466748..00000000000
--- a/src/shared/lib/classNames.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// Type definitions for classnames
-// Project: https://github.com/JedWatson/classnames
-// Definitions by: Dave Keen <http://www.keendevelopment.ch>, Adi Dahiya <https://github.com/adidahiya>, Jason Killian <https://github.com/JKillian>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-
-declare type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null | false;
-
-interface ClassDictionary {
-    [id: string]: boolean;
-}
-
-interface ClassArray extends Array<ClassValue> { }
-
-/*!
-  Copyright (c) 2016 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-let hasOwn = {}.hasOwnProperty;
-export default function classNames (...args:ClassValue[]) {
-    let classes:any[] = [];
-
-    for (let i = 0; i < args.length; i++) {
-        let arg = args[i];
-        if (!arg) continue;
-
-        if (typeof arg === 'string' || typeof arg === 'number') {
-            classes.push(arg);
-        } else if (Array.isArray(arg)) {
-            classes.push(classNames.apply(null, arg));
-        } else if (typeof arg === 'object') {
-            for (let key in arg) {
-                if (hasOwn.call(arg, key) && arg[key]) {
-                    classes.push(key);
-                }
-            }
-        }
-    }
-
-    return classes.join(' ');
-}

From 35671ab62939067bd6ec4296e658611ce86ed533 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 22 Mar 2017 15:44:30 -0400
Subject: [PATCH 111/133] Remove unused files

---
 .../query/download-data-form-validation.js    | 98 -------------------
 src/shared/lib/firstDefinedValue.ts           | 11 ---
 2 files changed, 109 deletions(-)
 delete mode 100644 src/shared/components/query/download-data-form-validation.js
 delete mode 100644 src/shared/lib/firstDefinedValue.ts

diff --git a/src/shared/components/query/download-data-form-validation.js b/src/shared/components/query/download-data-form-validation.js
deleted file mode 100644
index 355c976e493..00000000000
--- a/src/shared/components/query/download-data-form-validation.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * Copyright (c) 2015 Memorial Sloan-Kettering Cancer Center.
- *
- * This library is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS
- * FOR A PARTICULAR PURPOSE. The software and documentation provided hereunder
- * is on an "as is" basis, and Memorial Sloan-Kettering Cancer Center has no
- * obligations to provide maintenance, support, updates, enhancements or
- * modifications. In no event shall Memorial Sloan-Kettering Cancer Center be
- * liable to any party for direct, indirect, special, incidental or
- * consequential damages, including lost profits, arising out of the use of this
- * software and its documentation, even if Memorial Sloan-Kettering Cancer
- * Center has been advised of the possibility of such damage.
- */
-
-/*
- * This file is part of cBioPortal.
- *
- * cBioPortal is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-
-function validGeneSet(downloadDataParameters)
-{
-    var geneIds = "";
-
-    jQuery.each(downloadDataParameters, function(i, parameter) {
-        if (parameter.name == "gene_list") {
-            geneIds = parameter.value;
-        }
-    });
-
-    return !(geneIds == "");
-}
-
-function validCaseSet(downloadDataParameters)
-{
-    var caseIds = "";
-    var caseSetId = "";
-    var missingCaseSetId = true;
-    var USER_DEFINED_CASELIST = "-1";
-
-    jQuery.each(downloadDataParameters, function(i, parameter) {
-        if (parameter.name == "case_set_id") {
-            missingCaseSetId = false;
-            caseSetId = parameter.value;
-        }
-        else if (parameter.name == "case_ids") {
-            caseIds = parameter.value;
-        }
-    });
-
-    return !(missingCaseSetId || (caseSetId == USER_DEFINED_CASELIST && caseIds == ""));
-}
-
-function validGenomicProfile(downloadDataParameters)
-{
-    var foundGeneticProfileIds = false;
-
-    jQuery.each(downloadDataParameters, function(i, parameter) {
-        if (parameter.name == "genetic_profile_ids") {
-            foundGeneticProfileIds = true;
-        }
-    });
-
-    return foundGeneticProfileIds;
-}
-
-export function validDownloadDataForm(downloadDataParameters)
-{
-    if (!validGenomicProfile(downloadDataParameters)) {
-        alert("Invalid Genomic Profile Selected.");
-        return false;
-    }
-
-    if (!validCaseSet(downloadDataParameters)) {
-        alert("Invalid Patient/Case Set.");
-        return false;
-    }
-
-    if (!validGeneSet(downloadDataParameters)) {
-        alert("Invalid Gene Set.");
-        return false;
-    }
-
-    return true;
-}
diff --git a/src/shared/lib/firstDefinedValue.ts b/src/shared/lib/firstDefinedValue.ts
deleted file mode 100644
index 94faf731c0c..00000000000
--- a/src/shared/lib/firstDefinedValue.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default function firstDefinedValue<T1,T2>(v1:T1|undefined, v2:T2):T1|T2;
-export default function firstDefinedValue<T1,T2,T3>(v1:T1|undefined, v2:T2|undefined, v3:T3):T1|T2|T3;
-export default function firstDefinedValue<T1,T2,T3,T4>(v1:T1|undefined, v2:T2|undefined, v3:T3|undefined, v4:T4):T1|T2|T3|T4;
-export default function firstDefinedValue(...values:any[])
-{
-	let value;
-	for (value of values)
-		if (value !== undefined)
-			break;
-	return value;
-}

From aafb196928cc75fd4c7c6055040ba603fd70aceb Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 22 Mar 2017 16:58:08 -0400
Subject: [PATCH 112/133] Add hack to contend with mobx-react-router changes

---
 .../components/StudyList/StudyListLogic.ts    | 21 ++++++----
 src/shared/components/query/QueryStore.ts     | 41 +++++++++++++++----
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index f755491962a..5e9e13eedd1 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -218,9 +218,12 @@ export default class StudyListLogic
 		this.store.selectedStudyIds = selectedStudyIds;
 	}
 }
-
 /*
-function parse_search_query(query:string)
+type SearchClause = (
+	{type: 'not', data: string} |
+	{type: 'and', data: string[]}
+);
+function parse_search_query(query:string):SearchClause[]
 {
 	// First eliminate trailing whitespace and reduce every whitespace
 	//	to a single space.
@@ -270,7 +273,7 @@ function parse_search_query(query:string)
 		}
 	}
 	// Now get the conjunctive clauses, and the negative clauses
-	let clauses = [];
+	let clauses:SearchClause[] = [];
 	currInd = 0;
 	let nextOr, nextDash;
 	while (currInd < phrases.length)
@@ -319,19 +322,21 @@ function parse_search_query(query:string)
 	}
 	return clauses;
 }
-type Clause = {type: 'and' | 'not', data: string[]}
 
 function matchPhrase(phrase:string, node)
 {
 	phrase = phrase.toLowerCase();
-	return !!((node.li_attr && node.li_attr.name && node.li_attr.name.toLowerCase().indexOf(phrase) > -1)
-	|| (node.li_attr && node.li_attr.description && node.li_attr.description.toLowerCase().indexOf(phrase) > -1)
-	|| (node.li_attr && node.li_attr.search_terms && node.li_attr.search_terms.toLowerCase().indexOf(phrase) > -1));
+	return !!(
+		(item && item.name && item.name.toLowerCase().indexOf(phrase) > -1)
+		|| (item && item.description && item.description.toLowerCase().indexOf(phrase) > -1)
+		|| (item && item.search_terms && item.search_terms.toLowerCase().indexOf(phrase) > -1)
+	);
 }
+
 function perform_search_single(parsed_query, node)
 {
 	// in: a jstree node
-	// text to search is node.text and node.li_attr.description and node.li_attr.search_terms
+	// text to search is node.text and item.description and item.search_terms
 	// return true iff the query, considering quotation marks, 'and' and 'or' logic, matches
 	let match = false;
 	let hasPositiveClauseType = false;
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index a7a6092bdd5..484fb71d3d6 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -456,7 +456,7 @@ export class QueryStore
 
 	@computed get selectedStudies()
 	{
-		return this.selectedStudyIds.map(id => this.treeData.map_studyId_cancerStudy.get(id));
+		return this.selectedStudyIds.map(id => this.treeData.map_studyId_cancerStudy.get(id)).filter(_.identity);
 	}
 
 	@computed get selectedStudies_totalSampleCount()
@@ -767,12 +767,28 @@ export class QueryStore
 		let params = urlParts.query as Partial<CancerStudyQueryUrlParams>;
 		let hashParams;
 		{
-			let [/*#crosscancer*/, tab, priority, genes, study_list] = (urlParts.hash || '').split('/');
-			hashParams = {
-				data_priority: priority as typeof params.data_priority,
-				gene_list: genes && decodeURIComponent(genes),
-				cancer_study_list: study_list && decodeURIComponent(study_list).split(','),
-			};
+			// hack to contend with #/home#/crosscancer/...
+			let hash = urlParts.hash || '';
+			hash = hash.substr(hash.indexOf('crosscancer/'));
+
+			let [crosscancer, tab, priority, genes, study_list] = hash.split('/');
+			if (crosscancer === 'crosscancer')
+			{
+				hashParams = {
+					data_priority: priority as typeof params.data_priority,
+					gene_list: genes && decodeURIComponent(genes),
+					cancer_study_list: study_list && decodeURIComponent(study_list).split(','),
+				};
+			}
+			else
+			{
+				// unexpected hash format
+				hashParams = {
+					data_priority: undefined,
+					gene_list: undefined,
+					cancer_study_list: undefined,
+				};
+			}
 		}
 		let profileIds = [
 			params.genetic_profile_ids_PROFILE_MUTATION_EXTENDED,
@@ -783,7 +799,7 @@ export class QueryStore
 		];
 
 		this.selectedStudyIds = hashParams.cancer_study_list || (params.cancer_study_id ? [params.cancer_study_id] : []);
-		this._selectedProfileIds = profileIds.every(id => id === undefined) ? undefined : profileIds.filter(id => id) as string[];
+		this._selectedProfileIds = profileIds.every(id => id === undefined) ? undefined : profileIds.filter(_.identity) as string[];
 		this.zScoreThreshold = params.Z_SCORE_THRESHOLD || '2.0';
 		this.rppaScoreThreshold = params.RPPA_SCORE_THRESHOLD || '2.0';
 		this.dataTypePriorityCode = hashParams.data_priority || params.data_priority || '0';
@@ -863,10 +879,19 @@ export class QueryStore
 			return;
 
 		let urlParams = this.asyncUrlParams.result;
+
+		//TODO this is currently broken because of mobx-react-router
+		// this is supposed to allow you to go back in the browser history to
+		// return to the query page and restore the QueryStore state from the URL.
 		let historyUrl = URL.format({...urlParams, pathname: window.location.href.split('?')[0]});
+
+		// TODO remove this temporary HACK to make back button work
+		historyUrl = historyUrl.split('#crosscancer').join('#/home#crosscancer');
+
 		let newUrl = buildCBioPortalUrl(urlParams);
 		if (historyUrl != newUrl)
 			window.history.pushState(null, window.document.title, historyUrl);
+
 		window.location.href = newUrl;
 	}
 

From 6bb848f8412607d9e0e0f6072f121c9fc103a0ec Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 23 Mar 2017 12:42:49 -0400
Subject: [PATCH 113/133] Selected Studies view no longer shows priority
 studies (duplicates)

---
 .../components/StudyList/StudyListLogic.ts    |  4 ++--
 .../components/query/CancerStudyTreeData.ts   |  3 +++
 src/shared/components/query/QueryStore.ts     |  4 +++-
 src/shared/lib/ContextUtils.ts                | 19 +++++++------------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 5e9e13eedd1..2de08a6ee71 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -73,7 +73,7 @@ export default class StudyListLogic
 
 	// returns true if the node or any related nodes match
 	nodeFilter = memoize({
-		getAdditionalArgs: () => [this.store.treeData, this.store.maxTreeDepth, this.store.searchText],
+		getAdditionalArgs: () => [this.store.treeData, this.store.maxTreeDepth, this.store.searchText, this.store.showSelectedStudiesOnly],
 		fixedArgsLength: 1,
 		function: (node:CancerTreeNode):boolean =>
 		{
@@ -86,7 +86,7 @@ export default class StudyListLogic
 
 			// hack - shouldConsiderNode() call above does all the required filtering
 			if (this.store.showSelectedStudiesOnly)
-				return true;
+				return !meta.isPriorityCategory;
 
 			// if no search text is entered, include all nodes
 			if (!this.store.searchText)
diff --git a/src/shared/components/query/CancerStudyTreeData.ts b/src/shared/components/query/CancerStudyTreeData.ts
index 68a91def7d0..079db772773 100644
--- a/src/shared/components/query/CancerStudyTreeData.ts
+++ b/src/shared/components/query/CancerStudyTreeData.ts
@@ -7,6 +7,7 @@ export const CANCER_TYPE_ROOT = 'tissue';
 export type CancerTreeNode = CancerType|CancerStudy;
 export type NodeMetadata = {
 	isCancerType:boolean,
+	isPriorityCategory:boolean,
 	childCancerTypes:CancerType[],
 	childStudies:CancerStudy[],
 	descendantStudies:CancerStudy[],
@@ -75,6 +76,7 @@ export default class CancerStudyTreeData
 
 				this.map_node_meta.set(node, {
 					isCancerType: nodes == cancerTypes,
+					isPriorityCategory: false,
 					childCancerTypes: [],
 					childStudies: [],
 					descendantStudies: [],
@@ -89,6 +91,7 @@ export default class CancerStudyTreeData
 		for (let category of priorityCategories)
 		{
 			meta = this.map_node_meta.get(category) as NodeMetadata;
+			meta.isPriorityCategory = true;
 			for (let studyId of priorityStudies[category.cancerTypeId])
 			{
 				let study = this.map_studyId_cancerStudy.get(studyId);
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 484fb71d3d6..8fdda875fa1 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -20,6 +20,7 @@ import URL from 'url';
 import {buildCBioPortalUrl, BuildUrlParams} from "../../api/urls";
 import {SyntaxError} from "../../lib/oql/oql-parser";
 
+// URL Params interface for communicating between legacy pages
 type CancerStudyQueryUrlParams = {
 	cancer_study_id: string,
 	genetic_profile_ids_PROFILE_MUTATION_EXTENDED: string,
@@ -623,7 +624,7 @@ export class QueryStore
 	{
 		try
 		{
-			return this.oql.query.map(line => line.gene).filter(gene => gene && gene !== 'DATATYPES') as string[];
+			return this.oql.query.map(line => line.gene).filter(gene => gene && gene !== 'DATATYPES');
 		}
 		catch (e)
 		{
@@ -637,6 +638,7 @@ export class QueryStore
 	{
 		return (
 			!this.submitError &&
+			this.genes.isComplete &&
 			!this.genes.result.suggestions.length &&
 			this.asyncUrlParams.isComplete
 		);
diff --git a/src/shared/lib/ContextUtils.ts b/src/shared/lib/ContextUtils.ts
index 8daeb94ba39..8a4529d7541 100644
--- a/src/shared/lib/ContextUtils.ts
+++ b/src/shared/lib/ContextUtils.ts
@@ -1,21 +1,16 @@
 import * as React from 'react';
 import withContext from 'recompose/withContext';
 
-interface ComponentClassWithState<P, S> {
-    new (props?: P, context?: any): React.Component<P, S>;
-    propTypes?: React.ValidationMap<P>;
-    contextTypes?: React.ValidationMap<any>;
-    childContextTypes?: React.ValidationMap<any>;
-    defaultProps?: P;
-    displayName?: string;
-}
-
-function createValidator<Store>(storeClass:new(..._:any[])=>Store)
+/**
+ * Creates a function which validates that a property of an object is an instance of a specific class.
+ * For use with <code>React.Component.contextTypes</code>.
+ */
+function createValidator<O>(classDef:new(...args:any[])=>any):React.Validator<O>
 {
 	return function validator<T>(object: T, key: keyof T, componentName: string):Error|null {
-		if (object[key] instanceof storeClass)
+		if (object[key] instanceof classDef)
 			return null;
-		return new Error(`Expecting ${componentName} to receive {${JSON.stringify(key)}: ${storeClass.name}} from context`);
+		return new Error(`Expecting ${componentName} to receive {${JSON.stringify(key)}: ${classDef.name}} from context`);
 	};
 }
 

From 4ad732fc8c25ef18870e4a7354793e66515d4c48 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Thu, 23 Mar 2017 13:02:10 -0400
Subject: [PATCH 114/133] Fix font sizes

---
 src/shared/components/StudyList/styles.module.scss       | 8 ++++----
 src/shared/components/labeledCheckbox/styles.module.scss | 2 +-
 src/shared/components/query/styles.module.scss           | 8 +++++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index 8ed17f91e0d..a27eecbf9b9 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -159,8 +159,8 @@ ul.StudyList {
         border-bottom: 1px solid rgb(232, 241, 248);
         color: #333;
         display: block;
-        font: normal normal 500 17px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        padding: 10px 5px 5px 5px;
+        font: normal normal 500 15px/15px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        padding: 10px 5px 3px 5px;
         margin: 20px 10px 5px 10px;
       }
     }
@@ -169,7 +169,7 @@ ul.StudyList {
       padding-top: 0px;
 
       label {
-        font: normal normal 400 15px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font: normal normal 400 14px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
         color: #1982b8;
         margin: 0;
         padding: 5px 15px 5px 0;
@@ -204,7 +204,7 @@ li.Study {
   }
 
   input[type="checkbox"] {
-    margin: 4px 6px 0 0;
+    margin: 1px 6px 0 0;
   }
 
   .StudyName {
diff --git a/src/shared/components/labeledCheckbox/styles.module.scss b/src/shared/components/labeledCheckbox/styles.module.scss
index 14ef4071e6f..8771f37982a 100644
--- a/src/shared/components/labeledCheckbox/styles.module.scss
+++ b/src/shared/components/labeledCheckbox/styles.module.scss
@@ -9,7 +9,7 @@ label.labeledCheckbox {
 
   > input[type="checkbox"] {
     cursor: pointer;
-    margin: 4px 6px 0 0;
+    margin: 1px 6px 0 0;
     min-width: 1em;
   }
 }
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index a11ad746dd0..07a91ae3600 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -1,7 +1,7 @@
 .QueryAndDownloadTabs {
 
   :global(ul.nav.nav-tabs li) {
-    font-size: 150%;
+    font-size: 110%;
     font-weight: bold;
   }
 
@@ -9,6 +9,8 @@
     border: 1px solid #ddd;
     border-top: none;
     padding: 10px;
+    font-size: 85%;
+    line-height: normal;
 
     :global(.Select-control) {
       border: 1px solid #ddd !important;
@@ -168,12 +170,12 @@
       list-style-type: none;
       display: flex;
       flex-direction: row;
-      font-size: 13px;
+      align-items: center;
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       color: #043852;
       border-bottom: 1px solid rgb(222, 233, 241);
       border-top: 1px solid rgb(243, 248, 251);
-      padding: 10px;
+      padding: 8px 10px;
 
       span {
         &.cancerTypeListItemLabel {

From a4416e6e90482e078d955b1987eb53280f6f289b Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Thu, 23 Mar 2017 13:11:01 -0400
Subject: [PATCH 115/133] Fix margins paddings and height

---
 src/shared/components/StudyList/styles.module.scss | 2 +-
 src/shared/components/query/styles.module.scss     | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/StudyList/styles.module.scss
index a27eecbf9b9..4bd10a4878a 100644
--- a/src/shared/components/StudyList/styles.module.scss
+++ b/src/shared/components/StudyList/styles.module.scss
@@ -110,7 +110,7 @@ ul.StudyList {
   }
 
   &.Level0 {
-    padding: 5px;
+    padding: 0 10px 5px 5px;
 
     > li.CancerType, > li.Study {
       margin-left: 0px;
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 07a91ae3600..bcef3c1fca6 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -52,7 +52,7 @@
   position: relative;
   overflow: hidden;
   user-select: none;
-  height: 400px;
+  height: 305px;
 
   label {
     display: flex;
@@ -296,6 +296,7 @@
 }
 
 .DataTypePriorityLabel {
+  line-height: 2;
   margin: 0 10px 0 0;
 }
 

From 11f44274c48cf43d8f07b7eac6fde31fc203f58b Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Thu, 23 Mar 2017 13:38:12 -0400
Subject: [PATCH 116/133] Fix colors and line heights

---
 src/globalStyles/variables.scss               |  5 +++++
 .../components/query/GeneSymbolValidator.tsx  |  2 +-
 .../components/query/styles.module.scss       | 19 ++++++++++---------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/globalStyles/variables.scss b/src/globalStyles/variables.scss
index 1fd994b4912..058c389a610 100644
--- a/src/globalStyles/variables.scss
+++ b/src/globalStyles/variables.scss
@@ -7,6 +7,11 @@ $cream: #F6F4EF;
 $darkCream: #ECE7DB;
 $darkestCream: #DAD1BC;
 $darkBrown: #585755;
+
+$lightGrey: #ececec;
+$mediumGrey: #ddd;
+$darkGrey: #999;
+
 $redError: #a71111;
 $greenSuccess: #11a747;
 
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 9553ac62693..930c57a76c1 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -59,7 +59,7 @@ export default class GeneSymbolValidator extends QueryStoreComponent<{}, {}>
 			return (
 				<div className={styles.GeneSymbolValidator}>
 					<div className={styles.invalidBubble} title="Please edit the gene symbols.">
-						<FontAwesome className={styles.icon} name='exclamation'/>
+						<FontAwesome className={styles.icon} name='exclamation-circle'/>
 						<span>Invalid gene symbols.</span>
 					</div>
 
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index bcef3c1fca6..b15d9867851 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -34,7 +34,7 @@
   }
 
   .errorMessage {
-    color: maroon;
+    color: $redError;
     font-weight: bold;
   }
 }
@@ -359,6 +359,7 @@
     margin-right: 4px;
     width: 16px;
     height: 16px;
+    line-height: 17px;
   }
   span.pendingMessage,
   span.errorMessage {
@@ -374,6 +375,7 @@
     border-radius: 2px;
     span.icon {
       color: #fff;
+      line-height: 17px;
     }
   }
   div.invalidBubble {
@@ -383,21 +385,20 @@
     background: $greenSuccess;
   }
   div.suggestionBubble {
-    color: $darkBrown;
+    color: rgba(0, 0, 0, 0.5);
     cursor: pointer;
     display: flex;
     align-items: center;
     margin: 2px;
-    padding: 4px;
-    background-color: $cream;
-    border: 1px solid $darkCream;
-    border-radius: 4px;
+    padding: 5px 10px;
+    background-color: $lightGrey;
+    border-radius: 2px;
     &:hover {
-      background-color: $darkCream;
-      border-color: $darkestCream;
+      background-color: $mediumGrey;
     }
     span.icon {
-      color: #888888;
+      color: $darkGrey;
+      line-height: 17px;
     }
     span.noChoiceLabel {
       font-weight: normal;

From b5e53462b30e19bed1ebec89992330515f460511 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Thu, 23 Mar 2017 14:26:41 -0400
Subject: [PATCH 117/133] Update tabs

---
 .../components/query/styles.module.scss       | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index b15d9867851..3f09f3b7f57 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -1,8 +1,30 @@
 .QueryAndDownloadTabs {
 
   :global(ul.nav.nav-tabs li) {
-    font-size: 110%;
-    font-weight: bold;
+    font-size: 85%;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  :global(ul.nav.nav-tabs li.active a) {
+    border-top: 2px solid #1982b8;
+    color: #333;
+    font-weight: 500;
+  }
+
+  :global(ul.nav.nav-tabs li a) {
+    border-top: 2px solid #fff;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    color: $darkGrey;
+    min-width: 150px;
+    font-weight: 400;
+    text-align: center;
+    transition: all 0.2s ease-in-out;
+  }  
+
+  :global(ul.nav.nav-tabs li:not(.active) a:hover) {
+    border-top: 2px solid #eee;
   }
 
   .QueryContainer {

From 33434a79c085a17e6bd3ca602ea18043b4258593 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Thu, 23 Mar 2017 16:23:26 -0400
Subject: [PATCH 118/133] Update buttons

---
 src/globalStyles/global.scss                   | 14 ++++++++------
 src/globalStyles/variables.scss                |  4 ++++
 src/shared/components/query/styles.module.scss | 14 ++++++++------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/globalStyles/global.scss b/src/globalStyles/global.scss
index 07eee18d481..10069d8d59e 100755
--- a/src/globalStyles/global.scss
+++ b/src/globalStyles/global.scss
@@ -25,24 +25,26 @@ body {
 .cbioportal-frontend {
 
   .cta { // "Call To Action"
-    background: rgb(17, 116, 167);
-    border: 1px solid rgba(0,0,0,0.05);
+    background: linear-gradient(to bottom, #1f8cc5 50%, #1982b8 100%);
+    border: 0;
+    border-bottom: 1px solid rgba(0,0,0,0.2);
     border-radius: 2px;
-    color: rgba(255, 255, 255, 0.90);
+    color: rgba(255, 255, 255, 1);
     display: block;
     text-align: center;
     font: normal normal 500 11px/19px 'Helvetica Neue', Helvetica, Arial, sans-serif;
     padding: 5px 10px;
-    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.1);
 
     &:hover:not(:disabled) {
       cursor: pointer;
-      background: #1f688e;
+      background: linear-gradient(to bottom, #1982b8 50%, #1f8cc5 100%);
       color: #fff;
     }
     &:disabled {
       cursor: default;
-      color: #BBB;
+      background: $lightGrey;
+      border-bottom: 0;
+      color: $darkGrey;
     }
   }
   
diff --git a/src/globalStyles/variables.scss b/src/globalStyles/variables.scss
index 058c389a610..47f206cb12e 100644
--- a/src/globalStyles/variables.scss
+++ b/src/globalStyles/variables.scss
@@ -8,6 +8,10 @@ $darkCream: #ECE7DB;
 $darkestCream: #DAD1BC;
 $darkBrown: #585755;
 
+$lightBlue: #dee9f1;
+$mediumBlue: #1982b8;
+
+
 $lightGrey: #ececec;
 $mediumGrey: #ddd;
 $darkGrey: #999;
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 3f09f3b7f57..470a9a8776a 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -129,6 +129,8 @@
 
   .selectAll {
     text-transform: uppercase;
+    min-width: 105px;
+    text-align: center;
   }
 
   .noData,
@@ -344,15 +346,15 @@
 
   .buttonRow {
     button {
-      background: linear-gradient(to bottom, rgba(252,252,252,1) 50%, rgba(245,245,245,1) 100%);
-      border: 1px solid #ddd;
+      background: linear-gradient(to bottom, #f3f3f3 50%, #eaeaea 100%);
+      border: 0;
+      border-bottom: 1px solid rgba(0,0,0,0.1);
       border-radius: 2px;
-      box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.5);
-      color: $darkBrown;
-      padding: .4em 1em;
+      color: #333;
+      padding: 8px 15px;
 
       &:hover {
-        color: #333;
+        background: linear-gradient(to bottom, #eaeaea 50%, #f3f3f3 100%);
       }
     }
   }

From e90171692a6dbbc9b83b97882d18b9fba1a1b291 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 23 Mar 2017 16:48:33 -0400
Subject: [PATCH 119/133] SectionHeader displays busy status and errors

---
 .../components/query/CancerStudySelector.tsx  | 37 +++++++---------
 .../components/query/CaseSetSelector.tsx      | 29 +++++--------
 .../query/DataTypePrioritySelector.tsx        |  3 +-
 .../components/query/GeneSetSelector.tsx      | 32 +++++++-------
 .../components/query/GeneSymbolValidator.tsx  | 11 +++--
 .../query/GeneticProfileSelector.tsx          | 13 +++---
 .../components/query/QueryContainer.tsx       |  1 -
 src/shared/components/query/QueryStore.ts     |  2 +-
 .../components/query/styles.module.scss       |  8 ++--
 .../sectionHeader/SectionHeader.tsx           | 42 +++++++++++++++++++
 .../sectionHeader/styles.module.scss          | 32 ++++++++++++++
 11 files changed, 137 insertions(+), 73 deletions(-)
 create mode 100644 src/shared/components/sectionHeader/SectionHeader.tsx
 create mode 100644 src/shared/components/sectionHeader/styles.module.scss

diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 53b6eee6780..4e1a0b5c3d2 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -9,10 +9,9 @@ import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
 import StudyList from "../StudyList/StudyList";
 import {observer} from "mobx-react";
-import {action, toJS, computed} from "mobx";
 import memoize from "memoize-weak-decorator";
-import AsyncStatus from "../asyncStatus/AsyncStatus";
 import {QueryStoreComponent} from "./QueryStore";
+import SectionHeader from "../sectionHeader/SectionHeader";
 
 const styles = styles_any as {
 	CancerStudySelector: string,
@@ -152,25 +151,21 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 
 		return (
 			<FlexCol overflow className={styles.CancerStudySelector}>
-				<FlexRow padded overflow className={styles.selectCancerStudyRow}>
-					<h2>Select Studies:</h2>
-					<AsyncStatus promise={[this.store.cancerTypes, this.store.cancerStudies]}>
-						{!!(this.store.cancerTypes.result.length && this.store.cancerStudies.result.length) ? (
-							<span
-								onClick={() => {
-									if (this.store.selectedStudyIds.length)
-										this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly;
-								}}
-								className={selectedCountClass}
-							>
-								<b>{this.store.selectedStudyIds.length}</b> studies selected
-								(<b>{this.store.selectedStudies_totalSampleCount}</b> samples)
-							</span>
-						) : (
-				            <span className={styles.noData}>No data</span>
-						)}
-					</AsyncStatus>
-				</FlexRow>
+				<SectionHeader promises={[this.store.cancerTypes, this.store.cancerStudies]}>
+					Select Studies:
+					{!!(!this.store.cancerTypes.isPending && !this.store.cancerStudies.isPending) && (
+						<span
+							className={selectedCountClass}
+							onClick={() => {
+								if (this.store.selectedStudyIds.length)
+									this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly;
+							}}
+						>
+							<b>{this.store.selectedStudyIds.length}</b> studies selected
+							(<b>{this.store.selectedStudies_totalSampleCount}</b> samples)
+						</span>
+					)}
+				</SectionHeader>
 
 				<FlexRow overflow className={styles.cancerStudySelectorHeader}>
 					<ReactSelect
diff --git a/src/shared/components/query/CaseSetSelector.tsx b/src/shared/components/query/CaseSetSelector.tsx
index c0a06a7eed9..b990d8eeacb 100644
--- a/src/shared/components/query/CaseSetSelector.tsx
+++ b/src/shared/components/query/CaseSetSelector.tsx
@@ -7,8 +7,7 @@ import {FlexCol, FlexRow} from "../flexbox/FlexBox";
 import {QueryStore, QueryStoreComponent, CUSTOM_CASE_LIST_ID} from "./QueryStore";
 import {getStudyViewUrl} from "../../api/urls";
 import DefaultTooltip from "../DefaultTooltip";
-import AsyncStatus from "../asyncStatus/AsyncStatus";
-import Spinner from "react-spinkit";
+import SectionHeader from "../sectionHeader/SectionHeader";
 
 const styles = styles_any as {
 	CaseSetSelector: string,
@@ -59,16 +58,16 @@ export default class CaseSetSelector extends QueryStoreComponent<{}, {}>
 
 		return (
 			<FlexCol padded overflow className={styles.CaseSetSelector}>
-				<h2>Select Patient/Case Set:</h2>
-				<AsyncStatus promise={this.store.sampleLists}>
-					<ReactSelect
-						className={styles.ReactSelect}
-						value={this.store.selectedSampleListId}
-						options={this.caseSetOptions}
-						clearable={this.store.selectedSampleListId != this.store.defaultSelectedSampleListId}
-						onChange={option => this.store.selectedSampleListId = option ? option.value : undefined}
-					/>
-				</AsyncStatus>
+				<SectionHeader promises={[this.store.sampleLists, this.store.asyncCustomCaseSet]}>
+					Select Patient/Case Set:
+				</SectionHeader>
+				<ReactSelect
+					className={styles.ReactSelect}
+					value={this.store.selectedSampleListId}
+					options={this.caseSetOptions}
+					clearable={this.store.selectedSampleListId != this.store.defaultSelectedSampleListId}
+					onChange={option => this.store.selectedSampleListId = option ? option.value : undefined}
+				/>
 				<a href={getStudyViewUrl(this.store.singleSelectedStudyId)}>To build your own case set, try out our enhanced Study View.</a>
 
 				{!!(this.store.selectedSampleListId === CUSTOM_CASE_LIST_ID) && (
@@ -82,17 +81,11 @@ export default class CaseSetSelector extends QueryStoreComponent<{}, {}>
 							onChange={event => this.store.caseIds = event.currentTarget.value}
 						/>
 						<div className={styles.radioRow}>
-							{!!(this.store.asyncCustomCaseSet.isPending) && (
-								<Spinner/>
-							)}
 							<FlexCol padded>
 								<this.CaseIdsModeRadio label='By sample ID' state='sample'/>
 								<this.CaseIdsModeRadio label='By patient ID' state='patient'/>
 							</FlexCol>
 						</div>
-						{!!(this.store.asyncCustomCaseSet.error) && (
-							<AsyncStatus showLastError promise={this.store.asyncCustomCaseSet}/>
-						)}
 					</FlexCol>
 				)}
 			</FlexCol>
diff --git a/src/shared/components/query/DataTypePrioritySelector.tsx b/src/shared/components/query/DataTypePrioritySelector.tsx
index e11eb31b98d..a8abe3a8f52 100644
--- a/src/shared/components/query/DataTypePrioritySelector.tsx
+++ b/src/shared/components/query/DataTypePrioritySelector.tsx
@@ -5,6 +5,7 @@ import {QueryStore, QueryStoreComponent} from "./QueryStore";
 import {toJS} from "mobx";
 import {observer} from "mobx-react";
 import {FlexRow, FlexCol} from "../flexbox/FlexBox";
+import SectionHeader from "../sectionHeader/SectionHeader";
 
 const styles = styles_any as {
 	DataTypePrioritySelector: string,
@@ -21,7 +22,7 @@ export default class DataTypePrioritySelector extends QueryStoreComponent<{}, {}
 
 		return (
 			<FlexCol padded className={styles.DataTypePrioritySelector}>
-				<h2>Select Data Type Priority:</h2>
+				<SectionHeader>Select Data Type Priority:</SectionHeader>
 				<FlexRow>
 					<this.DataTypePriorityRadio label='Mutation and CNA' state={{mutation: true, cna: true}}/>
 					<this.DataTypePriorityRadio label='Only Mutation' state={{mutation: true, cna: false}}/>
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 52a60346f7c..a8a7d6ddafd 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -8,11 +8,11 @@ import {FlexRow, FlexCol} from "../flexbox/FlexBox";
 import gene_lists from './gene_lists';
 import GeneSymbolValidator from "./GeneSymbolValidator";
 import classNames from 'classnames';
-import AsyncStatus from "../asyncStatus/AsyncStatus";
 import {getOncoQueryDocUrl} from "../../api/urls";
 import {QueryStoreComponent} from "./QueryStore";
 import MutSigGeneSelector from "./MutSigGeneSelector";
 import GisticGeneSelector from "./GisticGeneSelector";
+import SectionHeader from "../sectionHeader/SectionHeader";
 
 const styles = styles_any as {
 	GeneSetSelector: string,
@@ -23,6 +23,7 @@ const styles = styles_any as {
 	geneSet: string,
 	empty: string,
 	notEmpty: string,
+	sectionSpinner: string,
 };
 
 export interface GeneSetSelectorProps
@@ -70,7 +71,10 @@ export default class GeneSetSelector extends QueryStoreComponent<GeneSetSelector
 	{
 		return (
 			<FlexCol padded overflow className={styles.GeneSetSelector}>
-				<h2>Enter Gene Set:</h2>
+				<SectionHeader promises={[this.store.mutSigForSingleStudy, this.store.gisticForSingleStudy, this.store.genes]}>
+					Enter Gene Set:
+				</SectionHeader>
+
 				<a href={getOncoQueryDocUrl()}>Advanced: Onco Query Language (OQL)</a>
 				<ReactSelect
 					className={styles.ReactSelect}
@@ -80,20 +84,16 @@ export default class GeneSetSelector extends QueryStoreComponent<GeneSetSelector
 				/>
 
 				<FlexRow padded className={styles.buttonRow}>
-					<AsyncStatus promise={this.store.mutSigForSingleStudy}>
-						{!!(this.store.mutSigForSingleStudy.result.length) && (
-							<button onClick={() => this.store.showMutSigPopup = true}>
-								Select from Recurrently Mutated Genes (MutSig)
-							</button>
-						)}
-					</AsyncStatus>
-					<AsyncStatus promise={this.store.gisticForSingleStudy}>
-						{!!(this.store.gisticForSingleStudy.result.length) && (
-							<button onClick={() => this.store.showGisticPopup = true}>
-								Select Genes from Recurrent CNAs (Gistic)
-							</button>
-						)}
-					</AsyncStatus>
+					{!!(this.store.mutSigForSingleStudy.result.length) && (
+						<button onClick={() => this.store.showMutSigPopup = true}>
+							Select from Recurrently Mutated Genes (MutSig)
+						</button>
+					)}
+					{!!(this.store.gisticForSingleStudy.result.length) && (
+						<button onClick={() => this.store.showGisticPopup = true}>
+							Select Genes from Recurrent CNAs (Gistic)
+						</button>
+					)}
 				</FlexRow>
 
 				<textarea
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index 930c57a76c1..cb812af0578 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as styles_any from './styles.module.scss';
 import {observer} from "mobx-react";
-import Spinner from "react-spinkit";
 import FontAwesome from "react-fontawesome";
 import ReactSelect from 'react-select';
 import AsyncStatus from "../asyncStatus/AsyncStatus";
@@ -43,7 +42,13 @@ export default class GeneSymbolValidator extends QueryStoreComponent<{}, {}>
 			return null;
 
 		if (this.store.genes.isError)
-			return <AsyncStatus promise={this.store.genes}/>;
+			return (
+				<div className={styles.GeneSymbolValidator}>
+					<span className={styles.pendingMessage}>
+						Unable to validate gene symbols.
+					</span>
+				</div>
+			);
 
 		if (this.store.genes.isPending && this.store.genes.result.suggestions.length == 0)
 			return (
@@ -51,7 +56,6 @@ export default class GeneSymbolValidator extends QueryStoreComponent<{}, {}>
 					<span className={styles.pendingMessage}>
 						Validating gene symbols...
 					</span>
-					<Spinner/>
 				</div>
 			);
 
@@ -64,7 +68,6 @@ export default class GeneSymbolValidator extends QueryStoreComponent<{}, {}>
 					</div>
 
 					{this.store.genes.result.suggestions.map(this.renderSuggestion, this)}
-					<AsyncStatus promise={this.store.genes}/>
 				</div>
 			);
 
diff --git a/src/shared/components/query/GeneticProfileSelector.tsx b/src/shared/components/query/GeneticProfileSelector.tsx
index 39617a15e59..979e57dec2e 100644
--- a/src/shared/components/query/GeneticProfileSelector.tsx
+++ b/src/shared/components/query/GeneticProfileSelector.tsx
@@ -3,13 +3,12 @@ import * as React from 'react';
 import {GeneticProfile} from "../../api/generated/CBioPortalAPI";
 import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
-import {action} from 'mobx';
 import {observer} from "mobx-react";
-import AsyncStatus from "../asyncStatus/AsyncStatus";
 import classNames from 'classnames';
 import {FlexCol} from "../flexbox/FlexBox";
 import {QueryStoreComponent} from "./QueryStore";
 import DefaultTooltip from "../DefaultTooltip";
+import SectionHeader from "../sectionHeader/SectionHeader";
 
 const styles = styles_any as {
 	GeneticProfileSelector: string,
@@ -34,18 +33,20 @@ export default class GeneticProfileSelector extends QueryStoreComponent<{}, {}>
 
 		return (
 			<FlexCol padded className={styles.GeneticProfileSelector}>
-				<h2>Select Genomic Profiles:</h2>
-				<AsyncStatus className={styles.group} promise={this.store.geneticProfiles}>
+				<SectionHeader promises={[this.store.geneticProfiles]}>
+					Select Genomic Profiles:
+				</SectionHeader>
+				<div className={styles.group}>
 					{this.renderGroup("MUTATION_EXTENDED", "Mutation")}
 					{this.renderGroup("COPY_NUMBER_ALTERATION", "Copy Number")}
 					{this.renderGroup("MRNA_EXPRESSION", "mRNA Expression")}
 					{this.renderGroup("METHYLATION", "DNA Methylation")}
 					{this.renderGroup("METHYLATION_BINARY", "DNA Methylation")}
 					{this.renderGroup("PROTEIN_LEVEL", "Protein/phosphoprotein level")}
-					{!!(!this.store.geneticProfiles.result.length) && (
+					{!!(this.store.geneticProfiles.isComplete && !this.store.geneticProfiles.result.length) && (
 						<strong>No Genomic Profiles available for this Cancer Study</strong>
 					)}
-				</AsyncStatus>
+				</div>
 			</FlexCol>
 		);
 	}
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
index e4c1b5ba396..9fc5d12a69d 100644
--- a/src/shared/components/query/QueryContainer.tsx
+++ b/src/shared/components/query/QueryContainer.tsx
@@ -14,7 +14,6 @@ import {QueryStore} from "./QueryStore";
 import {providesStoreContext} from "../../lib/ContextUtils";
 import AppConfig from "appConfig";
 import CaseSetSelector from "./CaseSetSelector";
-import AsyncStatus from "../asyncStatus/AsyncStatus";
 
 const styles = styles_any as {
 	QueryContainer: string,
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 8fdda875fa1..e3fab143490 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -20,7 +20,7 @@ import URL from 'url';
 import {buildCBioPortalUrl, BuildUrlParams} from "../../api/urls";
 import {SyntaxError} from "../../lib/oql/oql-parser";
 
-// URL Params interface for communicating between legacy pages
+// interface for communicating
 type CancerStudyQueryUrlParams = {
 	cancer_study_id: string,
 	genetic_profile_ids_PROFILE_MUTATION_EXTENDED: string,
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 470a9a8776a..3d50042a17f 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -89,7 +89,7 @@
     background-color: #1982b8;
     border-bottom: 1px solid rgb(17, 116, 167);
     padding: 10px;
-    margin: 0;
+    margin: 8px 0 0 0;
     display: flex;
     justify-content: space-between;
 
@@ -135,8 +135,8 @@
 
   .noData,
   .selectedCount {
+    float: right;
     font-size: 12px;
-    line-height: 30px;
     text-align: right;
     margin: 0 10px;
 
@@ -269,7 +269,7 @@
 }
 
 .GeneticProfileSelector {
-  .group {
+  div.group {
     display: flex;
     flex-direction: column;
 
@@ -278,8 +278,6 @@
     }
   }
 
-
-
   div.zScore {
     margin: 0px 0 10px 20px;
 
diff --git a/src/shared/components/sectionHeader/SectionHeader.tsx b/src/shared/components/sectionHeader/SectionHeader.tsx
new file mode 100644
index 00000000000..79753612874
--- /dev/null
+++ b/src/shared/components/sectionHeader/SectionHeader.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Spinner from 'react-spinkit';
+import MobxPromise from "mobxpromise";
+import {observer} from "mobx-react";
+import FontAwesome from "react-fontawesome";
+import * as styles_any from './styles.module.scss';
+import classNames from 'classnames';
+
+const styles = styles_any as {
+	SectionHeader: string,
+	error: string,
+	icon: string,
+	message: string,
+};
+
+interface ISectionHeaderProps extends React.HTMLProps<HTMLDivElement>
+{
+	promises?: MobxPromise<any>[];
+}
+
+@observer
+export default class SectionHeader extends React.Component<ISectionHeaderProps, void>
+{
+	render()
+	{
+		let {promises, children, className, ...divProps} = this.props;
+		return (
+			<div className={classNames(className, styles.SectionHeader)} {...divProps}>
+				{!!(promises && promises.some(promise => promise.isPending)) && (
+					<Spinner/>
+				)}
+				<h2>{children}</h2>
+				{promises && promises.filter(promise => promise.error).map(promise => (
+					<div className={classNames(className, styles.error)} {...divProps}>
+						<FontAwesome className={styles.icon} name='exclamation-triangle'/>
+						<span className={styles.message}>{promise.error + ''}</span>
+					</div>
+				))}
+			</div>
+		);
+	}
+}
diff --git a/src/shared/components/sectionHeader/styles.module.scss b/src/shared/components/sectionHeader/styles.module.scss
new file mode 100644
index 00000000000..180801c1e37
--- /dev/null
+++ b/src/shared/components/sectionHeader/styles.module.scss
@@ -0,0 +1,32 @@
+div.SectionHeader {
+  :global(.spinner) {
+    float: right;
+    height: 0;
+    overflow: visible;
+  }
+
+  h2 {
+    font: normal normal 700 16px/22px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    flex-grow: 2;
+    margin: 0;
+  }
+
+  .error {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 5px;
+    border-radius: 4px;
+    border: 1px solid #cd0a0a;
+    background: #fef1ec;
+    color: #cd0a0a;
+
+    .icon {
+      margin-right: 5px;
+    }
+
+    .message {
+    }
+  }
+}

From 1f9adbf7d784ce6342837847effdcfab0ef04e11 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 23 Mar 2017 17:00:40 -0400
Subject: [PATCH 120/133] Added error msg and removed duplicate styling for h2

---
 src/shared/components/query/QueryStore.ts      | 4 +++-
 src/shared/components/query/styles.module.scss | 6 ------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index e3fab143490..4faa2f8b6bb 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -639,7 +639,6 @@ export class QueryStore
 		return (
 			!this.submitError &&
 			this.genes.isComplete &&
-			!this.genes.result.suggestions.length &&
 			this.asyncUrlParams.isComplete
 		);
 	}
@@ -677,6 +676,9 @@ export class QueryStore
 
 		if (!this.oql.query.length)
 			return "Please enter one or more gene symbols.";
+
+		if (this.genes.result.suggestions.length)
+			return "Please edit the gene symbols.";
 	}
 
 	private readonly dict_geneticAlterationType_filenameSuffix:{[K in GeneticProfile['geneticAlterationType']]?: string} = {
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 3d50042a17f..ca4c5bdfe7e 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -49,12 +49,6 @@
     font-weight: normal;
   }
 
-  h2 {
-    font: normal normal 700 16px/22px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    flex-grow: 2;
-    margin: 0;
-  }
-
   .errorMessage {
     color: $redError;
     font-weight: bold;

From bd47061833ea4b7a5d1e577379972a5aaf07078a Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 24 Mar 2017 13:15:16 -0400
Subject: [PATCH 121/133] Fix case set dropdown tooltip positioning Add
 ErrorBox component Remove unused AsyncStatus component Adjust width of some
 controls

---
 .../components/StudyList/StudyListLogic.ts    | 19 +++---
 .../components/asyncStatus/AsyncStatus.tsx    | 65 -------------------
 src/shared/components/errorBox/ErrorBox.tsx   | 32 +++++++++
 .../styles.module.scss                        |  6 --
 .../components/query/CaseSetSelector.tsx      |  2 -
 .../components/query/GeneSetSelector.tsx      | 28 ++++----
 .../components/query/GeneSymbolValidator.tsx  |  3 -
 .../components/query/styles.module.scss       | 26 ++++++--
 .../sectionHeader/SectionHeader.tsx           | 13 ++--
 .../sectionHeader/styles.module.scss          | 15 -----
 10 files changed, 81 insertions(+), 128 deletions(-)
 delete mode 100644 src/shared/components/asyncStatus/AsyncStatus.tsx
 create mode 100644 src/shared/components/errorBox/ErrorBox.tsx
 rename src/shared/components/{asyncStatus => errorBox}/styles.module.scss (89%)

diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
index 2de08a6ee71..b41586ef98b 100644
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ b/src/shared/components/StudyList/StudyListLogic.ts
@@ -218,7 +218,7 @@ export default class StudyListLogic
 		this.store.selectedStudyIds = selectedStudyIds;
 	}
 }
-/*
+
 type SearchClause = (
 	{type: 'not', data: string} |
 	{type: 'and', data: string[]}
@@ -323,17 +323,17 @@ function parse_search_query(query:string):SearchClause[]
 	return clauses;
 }
 
-function matchPhrase(phrase:string, node)
+function matchPhrase(phrase:string, study:CancerStudy)
 {
 	phrase = phrase.toLowerCase();
 	return !!(
-		(item && item.name && item.name.toLowerCase().indexOf(phrase) > -1)
-		|| (item && item.description && item.description.toLowerCase().indexOf(phrase) > -1)
-		|| (item && item.search_terms && item.search_terms.toLowerCase().indexOf(phrase) > -1)
+		(study && study.name && study.name.toLowerCase().indexOf(phrase) > -1)
+		|| (study && study.description && study.description.toLowerCase().indexOf(phrase) > -1)
+		//|| (study && study.search_terms && study.search_terms.toLowerCase().indexOf(phrase) > -1)
 	);
 }
 
-function perform_search_single(parsed_query, node)
+function perform_search_single(parsed_query:SearchClause[], study:CancerStudy)
 {
 	// in: a jstree node
 	// text to search is node.text and item.description and item.search_terms
@@ -359,7 +359,7 @@ function perform_search_single(parsed_query, node)
 	{
 		if (clause.type === 'not')
 		{
-			if (matchPhrase(clause.data, node))
+			if (matchPhrase(clause.data, study))
 			{
 				match = false;
 				forced = true;
@@ -372,11 +372,10 @@ function perform_search_single(parsed_query, node)
 			let clauseMatch = true;
 			for (let phrase of clause.data)
 			{
-				clauseMatch = clauseMatch && matchPhrase(phrase, node);
+				clauseMatch = clauseMatch && matchPhrase(phrase, study);
 			}
 			match = match || clauseMatch;
 		}
 	}
 	return {result: match, forced: forced};
-};
-*/
+}
diff --git a/src/shared/components/asyncStatus/AsyncStatus.tsx b/src/shared/components/asyncStatus/AsyncStatus.tsx
deleted file mode 100644
index 3987e71e96a..00000000000
--- a/src/shared/components/asyncStatus/AsyncStatus.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from 'react';
-import Spinner from 'react-spinkit';
-import MobxPromise from "mobxpromise";
-import {observer} from "mobx-react";
-import FontAwesome from "react-fontawesome";
-import * as styles_any from './styles.module.scss';
-import classNames from 'classnames';
-
-const styles = styles_any as {
-	pending: string,
-	complete: string,
-	error: string,
-	icon: string,
-	message: string,
-};
-
-interface IAsyncStatusProps extends React.HTMLProps<HTMLDivElement>
-{
-	promise: MobxPromise<any> | Array<MobxPromise<any>>;
-	showLastError?: boolean;
-}
-
-@observer
-export default class AsyncStatus extends React.Component<IAsyncStatusProps, {}>
-{
-	private readonly promise = new MobxPromise({
-		await: () => Array.isArray(this.props.promise) ? this.props.promise : [this.props.promise],
-		invoke: async () => null
-	});
-
-	render()
-	{
-		let {promise, children, className, showLastError, ...divProps} = this.props;
-		let {status, error} = this.promise;
-		if (showLastError && error)
-			status = 'error';
-		switch (status)
-		{
-			case 'pending':
-				return (
-					<div className={classNames(className, styles.pending)} {...divProps}>
-						<Spinner/>
-					</div>
-				);
-			case 'error':
-				return (
-					<div className={classNames(className, styles.error)} {...divProps}>
-						<FontAwesome className={styles.icon} name='exclamation-triangle'/>
-						<span className={styles.message}>{this.promise.error + ''}</span>
-					</div>
-				);
-			case 'complete':
-				if (children)
-					return (
-						<div className={classNames(className, styles.complete)} {...divProps}>
-							{children}
-						</div>
-					);
-				return null;
-
-			default:
-				return null;
-		}
-	}
-}
diff --git a/src/shared/components/errorBox/ErrorBox.tsx b/src/shared/components/errorBox/ErrorBox.tsx
new file mode 100644
index 00000000000..a3c840d2a9b
--- /dev/null
+++ b/src/shared/components/errorBox/ErrorBox.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import FontAwesome from "react-fontawesome";
+import * as styles_any from './styles.module.scss';
+import classNames from 'classnames';
+
+const styles = styles_any as {
+	error: string,
+	message: string,
+	icon: string,
+};
+
+interface ISectionHeaderProps extends React.HTMLProps<HTMLDivElement>
+{
+	error: Error;
+}
+
+export default class ErrorBox extends React.Component<ISectionHeaderProps, void>
+{
+	render()
+	{
+		let {error, children, className, ...divProps} = this.props;
+		return (
+			<div className={classNames(className, styles.error)} {...divProps}>
+				<span className={styles.message}>
+					<FontAwesome className={styles.icon} name='exclamation-triangle'/>
+					{error + ''}
+				</span>
+				{children}
+			</div>
+		);
+	}
+}
diff --git a/src/shared/components/asyncStatus/styles.module.scss b/src/shared/components/errorBox/styles.module.scss
similarity index 89%
rename from src/shared/components/asyncStatus/styles.module.scss
rename to src/shared/components/errorBox/styles.module.scss
index 5efea39faa8..1ffe6e1a4d2 100644
--- a/src/shared/components/asyncStatus/styles.module.scss
+++ b/src/shared/components/errorBox/styles.module.scss
@@ -1,6 +1,3 @@
-.pending {
-}
-
 .error {
   display: flex;
   flex-direction: row;
@@ -18,6 +15,3 @@
   .message {
   }
 }
-
-.complete {
-}
diff --git a/src/shared/components/query/CaseSetSelector.tsx b/src/shared/components/query/CaseSetSelector.tsx
index b990d8eeacb..83edf595fdd 100644
--- a/src/shared/components/query/CaseSetSelector.tsx
+++ b/src/shared/components/query/CaseSetSelector.tsx
@@ -11,7 +11,6 @@ import SectionHeader from "../sectionHeader/SectionHeader";
 
 const styles = styles_any as {
 	CaseSetSelector: string,
-	ReactSelect: string,
 	tooltip: string,
 	radioRow: string,
 };
@@ -62,7 +61,6 @@ export default class CaseSetSelector extends QueryStoreComponent<{}, {}>
 					Select Patient/Case Set:
 				</SectionHeader>
 				<ReactSelect
-					className={styles.ReactSelect}
 					value={this.store.selectedSampleListId}
 					options={this.caseSetOptions}
 					clearable={this.store.selectedSampleListId != this.store.defaultSelectedSampleListId}
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index a8a7d6ddafd..5430eb30ae4 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -18,7 +18,6 @@ const styles = styles_any as {
 	GeneSetSelector: string,
 	MutSigGeneSelectorWindow: string,
 	GisticGeneSelectorWindow: string,
-	ReactSelect: string,
 	buttonRow: string,
 	geneSet: string,
 	empty: string,
@@ -77,24 +76,25 @@ export default class GeneSetSelector extends QueryStoreComponent<GeneSetSelector
 
 				<a href={getOncoQueryDocUrl()}>Advanced: Onco Query Language (OQL)</a>
 				<ReactSelect
-					className={styles.ReactSelect}
 					value={this.selectedGeneListOption}
 					options={this.geneListOptions}
 					onChange={option => this.store.geneQuery = option ? option.value : ''}
 				/>
 
-				<FlexRow padded className={styles.buttonRow}>
-					{!!(this.store.mutSigForSingleStudy.result.length) && (
-						<button onClick={() => this.store.showMutSigPopup = true}>
-							Select from Recurrently Mutated Genes (MutSig)
-						</button>
-					)}
-					{!!(this.store.gisticForSingleStudy.result.length) && (
-						<button onClick={() => this.store.showGisticPopup = true}>
-							Select Genes from Recurrent CNAs (Gistic)
-						</button>
-					)}
-				</FlexRow>
+				{!!(this.store.mutSigForSingleStudy.result.length || this.store.gisticForSingleStudy.result.length) && (
+					<FlexRow padded className={styles.buttonRow}>
+						{!!(this.store.mutSigForSingleStudy.result.length) && (
+							<button onClick={() => this.store.showMutSigPopup = true}>
+								Select from Recurrently Mutated Genes (MutSig)
+							</button>
+						)}
+						{!!(this.store.gisticForSingleStudy.result.length) && (
+							<button onClick={() => this.store.showGisticPopup = true}>
+								Select Genes from Recurrent CNAs (Gistic)
+							</button>
+						)}
+					</FlexRow>
+				)}
 
 				<textarea
 					ref={this.textAreaRef}
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
index cb812af0578..f54ba20ca4b 100644
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ b/src/shared/components/query/GeneSymbolValidator.tsx
@@ -3,7 +3,6 @@ import * as styles_any from './styles.module.scss';
 import {observer} from "mobx-react";
 import FontAwesome from "react-fontawesome";
 import ReactSelect from 'react-select';
-import AsyncStatus from "../asyncStatus/AsyncStatus";
 import {GeneReplacement, QueryStoreComponent} from "./QueryStore";
 
 const styles = styles_any as {
@@ -17,7 +16,6 @@ const styles = styles_any as {
 	noChoiceLabel: string,
 	singleChoiceLabel: string,
 	multiChoiceLabel: string,
-	ReactSelect: string,
 };
 
 @observer
@@ -120,7 +118,6 @@ export default class GeneSymbolValidator extends QueryStoreComponent<{}, {}>
 				<span className={styles.multiChoiceLabel}>{alias}</span>
 				<span>{': '}</span>
 				<ReactSelect
-					className={styles.ReactSelect}
 					placeholder='select a symbol'
 					options={options}
 					onChange={option => option && this.store.replaceGene(alias, option.value)}
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index ca4c5bdfe7e..92020cbb2ce 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -44,6 +44,15 @@
 .QueryContainer {
   width: 850px;
 
+  div:global(.Select) {
+    div:global(.Select-value) > span:global(.Select-value-label),
+    span:global(.Select-value-label) > span,
+    div:global(.Select-option) > span {
+      display: inline-block;
+      width: 100%;
+    }
+  }
+
   label {
     margin-bottom: 0;
     font-weight: normal;
@@ -254,8 +263,8 @@
     min-width: 200px;
     height: 28px;
 
-    .Select-control {
-      .Select-input {
+    :global(.Select-control) {
+      :global(.Select-input) {
         height: 28px;
       }
     }
@@ -317,10 +326,13 @@
 }
 
 .CaseSetSelector {
-  .ReactSelect {
+  div:global(.Select) {
+    width: 555px;
   }
   textarea {
+    width: 555px;
     resize: vertical;
+    padding: 5px;
   }
   .radioRow {
     :global(.spinner) {
@@ -333,7 +345,8 @@
 }
 
 .GeneSetSelector {
-  .ReactSelect {
+  div:global(.Select) {
+    width: 555px;
   }
 
   .buttonRow {
@@ -352,10 +365,11 @@
   }
 
   textarea.geneSet {
+    width: 555px;
     resize: vertical;
     border: 1px solid #ddd;
     border-radius: 2px;
-    padding: 10px 15px;
+    padding: 5px;
 
     &.empty {
     }
@@ -425,7 +439,7 @@
     span.multiChoiceLabel {
       font-weight: normal;
     }
-    .ReactSelect {
+    div:global(.Select) {
       width: 140px;
       margin-left: 4px;
       float: left;
diff --git a/src/shared/components/sectionHeader/SectionHeader.tsx b/src/shared/components/sectionHeader/SectionHeader.tsx
index 79753612874..58ea98a4a0a 100644
--- a/src/shared/components/sectionHeader/SectionHeader.tsx
+++ b/src/shared/components/sectionHeader/SectionHeader.tsx
@@ -2,15 +2,15 @@ import * as React from 'react';
 import Spinner from 'react-spinkit';
 import MobxPromise from "mobxpromise";
 import {observer} from "mobx-react";
-import FontAwesome from "react-fontawesome";
 import * as styles_any from './styles.module.scss';
 import classNames from 'classnames';
+import ErrorBox from "../errorBox/ErrorBox";
 
 const styles = styles_any as {
 	SectionHeader: string,
 	error: string,
-	icon: string,
 	message: string,
+	icon: string,
 };
 
 interface ISectionHeaderProps extends React.HTMLProps<HTMLDivElement>
@@ -30,11 +30,10 @@ export default class SectionHeader extends React.Component<ISectionHeaderProps,
 					<Spinner/>
 				)}
 				<h2>{children}</h2>
-				{promises && promises.filter(promise => promise.error).map(promise => (
-					<div className={classNames(className, styles.error)} {...divProps}>
-						<FontAwesome className={styles.icon} name='exclamation-triangle'/>
-						<span className={styles.message}>{promise.error + ''}</span>
-					</div>
+				{promises && promises.map(promise => (
+					!!(promise.error) && (
+						<ErrorBox className={styles.error} error={promise.error}/>
+					)
 				))}
 			</div>
 		);
diff --git a/src/shared/components/sectionHeader/styles.module.scss b/src/shared/components/sectionHeader/styles.module.scss
index 180801c1e37..6f23df28462 100644
--- a/src/shared/components/sectionHeader/styles.module.scss
+++ b/src/shared/components/sectionHeader/styles.module.scss
@@ -13,20 +13,5 @@ div.SectionHeader {
 
   .error {
     margin-top: 8px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 5px;
-    border-radius: 4px;
-    border: 1px solid #cd0a0a;
-    background: #fef1ec;
-    color: #cd0a0a;
-
-    .icon {
-      margin-right: 5px;
-    }
-
-    .message {
-    }
   }
 }

From 7df3d9cfd689fbd16b763dbd2cb394fadb4ec2b6 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 24 Mar 2017 19:58:51 -0400
Subject: [PATCH 122/133] Refactored StudyListLogic to fix obscure filtering
 bugs and ported old text query code

---
 .../components/StudyList/StudyListLogic.ts    | 381 --------------
 .../components/query/CancerStudySelector.tsx  |  29 +-
 .../components/query/CancerStudyTreeData.ts   |  23 +-
 src/shared/components/query/QueryStore.ts     |  19 +-
 src/shared/components/query/StudyListLogic.ts | 285 ++++++++++
 .../studyList}/StudyList.tsx                  | 497 +++++++++---------
 .../studyList}/styles.module.scss             |   0
 src/shared/lib/textQueryUtils.ts              | 161 ++++++
 8 files changed, 742 insertions(+), 653 deletions(-)
 delete mode 100644 src/shared/components/StudyList/StudyListLogic.ts
 create mode 100644 src/shared/components/query/StudyListLogic.ts
 rename src/shared/components/{StudyList => query/studyList}/StudyList.tsx (74%)
 rename src/shared/components/{StudyList => query/studyList}/styles.module.scss (100%)
 create mode 100644 src/shared/lib/textQueryUtils.ts

diff --git a/src/shared/components/StudyList/StudyListLogic.ts b/src/shared/components/StudyList/StudyListLogic.ts
deleted file mode 100644
index b41586ef98b..00000000000
--- a/src/shared/components/StudyList/StudyListLogic.ts
+++ /dev/null
@@ -1,381 +0,0 @@
-import * as React from 'react';
-import * as _ from 'lodash';
-import {CancerTreeNode} from "../query/CancerStudyTreeData";
-import {NodeMetadata} from "../query/CancerStudyTreeData";
-import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioPortalAPI";
-import memoize from "memoize-weak-decorator";
-import {QueryStore} from "../query/QueryStore";
-import {computed, action} from "mobx";
-
-export function matchesSearchText(input:string, searchText:string):boolean
-{
-	input = input.toLocaleLowerCase();
-	searchText = searchText.toLocaleLowerCase();
-
-	return searchText.split(' ').every(filter => {
-		let desired = true;
-		if (filter.startsWith('-'))
-		{
-			filter = filter.substr(1);
-			desired = false;
-		}
-
-		let found = input.indexOf(filter) >= 0;
-		return found == desired;
-	});
-}
-
-export default class StudyListLogic
-{
-	constructor(readonly store:QueryStore)
-	{
-	}
-
-	@computed get rootCancerType()
-	{
-		return this.store.treeData.rootCancerType;
-	}
-
-	getMetadata(node:CancerTreeNode)
-	{
-		return this.store.treeData.map_node_meta.get(node) as NodeMetadata;
-	}
-
-	// filters out empty CancerType subtrees
-	shouldConsiderNode(node:CancerTreeNode)
-	{
-		let meta = this.getMetadata(node);
-		if (meta.isCancerType)
-		{
-			// ignore cancer types excluded by selection
-			if (!this.store.showSelectedStudiesOnly && this.store.selectedCancerTypeIds.length)
-			{
-				let idToCancerType = (cancerTypeId:string) => this.store.treeData.map_cancerTypeId_cancerType.get(cancerTypeId) as CancerType;
-				let selectedCancerTypes = this.store.selectedCancerTypeIds.map(idToCancerType);
-				if (_.intersection(selectedCancerTypes, [node].concat(meta.ancestors)).length == 0)
-					return false;
-			}
-			// ignore cancer types excluded by depth
-			if (meta.ancestors.length > this.store.maxTreeDepth)
-				return false;
-			// ignore cancer types with no descendant studies
-			if (meta.descendantStudies.length == 0)
-				return false;
-
-			return true;
-		}
-
-		// cancer study
-		if (this.store.showSelectedStudiesOnly && !_.includes(this.store.selectedStudies, node as CancerStudy))
-			return false;
-		return true;
-	}
-
-	// returns true if the node or any related nodes match
-	nodeFilter = memoize({
-		getAdditionalArgs: () => [this.store.treeData, this.store.maxTreeDepth, this.store.searchText, this.store.showSelectedStudiesOnly],
-		fixedArgsLength: 1,
-		function: (node:CancerTreeNode):boolean =>
-		{
-			//TODO this logic is broken - search for 'eas' and then select/deselect Breast cancer type to see bug
-
-			let meta = this.getMetadata(node);
-
-			if (!this.shouldConsiderNode(node))
-				return false;
-
-			// hack - shouldConsiderNode() call above does all the required filtering
-			if (this.store.showSelectedStudiesOnly)
-				return !meta.isPriorityCategory;
-
-			// if no search text is entered, include all nodes
-			if (!this.store.searchText)
-				return true;
-
-			// check for matching text in this node and related nodes
-			for (let others of [[node], meta.descendantCancerTypes, meta.descendantStudies, meta.ancestors])
-				for (let other of others)
-					if (this.shouldConsiderNode(other) && matchesSearchText(other.name, this.store.searchText))
-						return true;
-
-			// no match
-			return false;
-		}
-	});
-
-	cancerTypeContainsSelectedStudies(cancerType:CancerType):boolean
-	{
-		let descendantStudies = this.getMetadata(cancerType).descendantStudies;
-		return _.intersection(this.store.selectedStudies, descendantStudies).length > 0;
-	}
-
-	getChildCancerTypes(cancerType:CancerType):CancerType[]
-	{
-		let meta = this.getMetadata(cancerType);
-		let childTypes = meta.ancestors.length < this.store.maxTreeDepth ? meta.childCancerTypes : [];
-		return childTypes.filter(this.nodeFilter);
-	}
-
-	getChildCancerStudies(cancerType:CancerType):CancerStudy[]
-	{
-		let meta = this.getMetadata(cancerType);
-		let studies = meta.ancestors.length < this.store.maxTreeDepth ? meta.childStudies : meta.descendantStudies;
-		return studies.filter(this.nodeFilter);
-	}
-
-	getDescendantCancerStudies(node:CancerTreeNode):CancerStudy[]
-	{
-		if (node === this.rootCancerType)
-			return this.hack_getAllStudies();
-
-		let meta = this.getMetadata(node);
-		return meta.descendantStudies.filter(this.nodeFilter);
-	}
-
-	getDepth(node:CancerType):number
-	{
-		let meta = this.getMetadata(node);
-		return meta.ancestors.length;
-	}
-
-	isHighlighted(node:CancerTreeNode):boolean
-	{
-		return !!this.store.searchText && matchesSearchText(node.name, this.store.searchText);
-	}
-
-	getCheckboxProps(node: CancerTreeNode): {checked: boolean, indeterminate?: boolean}
-	{
-		let meta = this.getMetadata(node);
-		if (meta.isCancerType)
-		{
-			let selectedStudyIds = this.store.selectedStudyIds || [];
-			let selectedStudies = selectedStudyIds.map(studyId => this.store.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
-			let shownStudies = this.getDescendantCancerStudies(node);
-			let shownAndSelectedStudies = _.intersection(shownStudies, selectedStudies);
-			let checked = shownAndSelectedStudies.length > 0;
-			let indeterminate = checked && shownAndSelectedStudies.length != shownStudies.length;
-
-			return {checked, indeterminate};
-		}
-		else
-		{
-			let study = node as CancerStudy;
-			let checked = !!this.store.selectedStudyIds.find(id => id == study.studyId);
-			return {checked};
-		}
-	}
-
-	hack_getAllStudies()
-	{
-		return _.union(...(
-			this.getChildCancerTypes(this.rootCancerType)
-				.map(cancerType => this.getDescendantCancerStudies(cancerType))
-		));
-	}
-
-	@action hack_handleSelectAll(checked:boolean)
-	{
-		let selectedStudyIds = this.store.selectedStudyIds;
-		let clickedStudyIds = this.hack_getAllStudies().map(study => study.studyId);
-		if (checked)
-			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
-		else
-			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
-
-		this.store.selectedStudyIds = selectedStudyIds;
-
-		if (!this.store.selectedStudyIds.length)
-			this.store.showSelectedStudiesOnly = false;
-	}
-
-	@action onCheck(node:CancerTreeNode, checked:boolean): void
-	{
-		let clickedStudyIds;
-		let meta = this.getMetadata(node);
-
-		if (meta.isCancerType)
-		{
-			if (!this.store.forDownloadTab)
-				clickedStudyIds = this.getDescendantCancerStudies(node).map(study => study.studyId);
-		}
-		else
-		{
-			clickedStudyIds = [(node as CancerStudy).studyId];
-		}
-
-		if (clickedStudyIds)
-			this.handleCheckboxStudyIds(clickedStudyIds, checked);
-	}
-
-	private handleCheckboxStudyIds(clickedStudyIds:string[], checked:boolean)
-	{
-		let selectedStudyIds = this.store.selectedStudyIds;
-		if (checked)
-			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
-		else
-			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
-
-		this.store.selectedStudyIds = selectedStudyIds;
-	}
-}
-
-type SearchClause = (
-	{type: 'not', data: string} |
-	{type: 'and', data: string[]}
-);
-function parse_search_query(query:string):SearchClause[]
-{
-	// First eliminate trailing whitespace and reduce every whitespace
-	//	to a single space.
-	query = query.toLowerCase().trim().split(/\s+/g).join(' ');
-	// Now factor out quotation marks and inter-token spaces
-	let phrases = [];
-	let currInd = 0;
-	let nextSpace, nextQuote;
-	while (currInd < query.length)
-	{
-		if (query[currInd] === '"')
-		{
-			nextQuote = query.indexOf('"', currInd + 1);
-			if (nextQuote === -1)
-			{
-				phrases.push(query.substring(currInd + 1));
-				currInd = query.length;
-			}
-			else
-			{
-				phrases.push(query.substring(currInd + 1, nextQuote));
-				currInd = nextQuote + 1;
-			}
-		}
-		else if (query[currInd] === ' ')
-		{
-			currInd += 1;
-		}
-		else if (query[currInd] === '-')
-		{
-			phrases.push('-');
-			currInd += 1;
-		}
-		else
-		{
-			nextSpace = query.indexOf(' ', currInd);
-			if (nextSpace === -1)
-			{
-				phrases.push(query.substring(currInd));
-				currInd = query.length;
-			}
-			else
-			{
-				phrases.push(query.substring(currInd, nextSpace));
-				currInd = nextSpace + 1;
-			}
-		}
-	}
-	// Now get the conjunctive clauses, and the negative clauses
-	let clauses:SearchClause[] = [];
-	currInd = 0;
-	let nextOr, nextDash;
-	while (currInd < phrases.length)
-	{
-		if (phrases[currInd] === '-')
-		{
-			if (currInd < phrases.length - 1)
-			{
-				clauses.push({"type": "not", "data": phrases[currInd + 1]});
-			}
-			currInd = currInd + 2;
-		}
-		else
-		{
-			nextOr = phrases.indexOf('or', currInd);
-			nextDash = phrases.indexOf('-', currInd);
-			if (nextOr === -1 && nextDash === -1)
-			{
-				clauses.push({"type": "and", "data": phrases.slice(currInd)});
-				currInd = phrases.length;
-			}
-			else if (nextOr === -1 && nextDash > 0)
-			{
-				clauses.push({"type": "and", "data": phrases.slice(currInd, nextDash)});
-				currInd = nextDash;
-			}
-			else if (nextOr > 0 && nextDash === -1)
-			{
-				clauses.push({"type": "and", "data": phrases.slice(currInd, nextOr)});
-				currInd = nextOr + 1;
-			}
-			else
-			{
-				if (nextOr < nextDash)
-				{
-					clauses.push({"type": "and", "data": phrases.slice(currInd, nextOr)});
-					currInd = nextOr + 1;
-				}
-				else
-				{
-					clauses.push({"type": "and", "data": phrases.slice(currInd, nextDash)});
-					currInd = nextDash;
-				}
-			}
-		}
-	}
-	return clauses;
-}
-
-function matchPhrase(phrase:string, study:CancerStudy)
-{
-	phrase = phrase.toLowerCase();
-	return !!(
-		(study && study.name && study.name.toLowerCase().indexOf(phrase) > -1)
-		|| (study && study.description && study.description.toLowerCase().indexOf(phrase) > -1)
-		//|| (study && study.search_terms && study.search_terms.toLowerCase().indexOf(phrase) > -1)
-	);
-}
-
-function perform_search_single(parsed_query:SearchClause[], study:CancerStudy)
-{
-	// in: a jstree node
-	// text to search is node.text and item.description and item.search_terms
-	// return true iff the query, considering quotation marks, 'and' and 'or' logic, matches
-	let match = false;
-	let hasPositiveClauseType = false;
-	let forced = false;
-
-	for (let clause of parsed_query)
-	{
-		if (clause.type !== 'not')
-		{
-			hasPositiveClauseType = true;
-			return 0;
-		}
-	}
-	if (!hasPositiveClauseType)
-	{
-		// if only negative clauses, match by default
-		match = true;
-	}
-	for (let clause of parsed_query)
-	{
-		if (clause.type === 'not')
-		{
-			if (matchPhrase(clause.data, study))
-			{
-				match = false;
-				forced = true;
-				return 0;
-			}
-		}
-		else if (clause.type === 'and')
-		{
-			hasPositiveClauseType = true;
-			let clauseMatch = true;
-			for (let phrase of clause.data)
-			{
-				clauseMatch = clauseMatch && matchPhrase(phrase, study);
-			}
-			match = match || clauseMatch;
-		}
-	}
-	return {result: match, forced: forced};
-}
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 4e1a0b5c3d2..2d77c9c6a26 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -7,11 +7,12 @@ import * as styles_any from './styles.module.scss';
 import classNames from 'classnames';
 import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
-import StudyList from "../StudyList/StudyList";
+import StudyList from "./studyList/StudyList";
 import {observer} from "mobx-react";
 import memoize from "memoize-weak-decorator";
 import {QueryStoreComponent} from "./QueryStore";
 import SectionHeader from "../sectionHeader/SectionHeader";
+import StudyListLogic from "./StudyListLogic";
 
 const styles = styles_any as {
 	CancerStudySelector: string,
@@ -40,9 +41,10 @@ const styles = styles_any as {
 	cancerStudyListContainer: string,
 };
 
-export type ICancerStudySelectorProps = {
+export interface ICancerStudySelectorProps
+{
 	style?: React.CSSProperties;
-};
+}
 
 @observer
 export default class CancerStudySelector extends QueryStoreComponent<ICancerStudySelectorProps, void>
@@ -52,6 +54,8 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 		super(props);
 	}
 
+	get logic() { return this.store.studyListLogic; }
+
 	@memoize
 	getCancerTypeListClickHandler<T>(node:CancerType)
 	{
@@ -68,8 +72,7 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 
 	renderCancerTypeList()
 	{
-		let logic = this.store.studyListLogic;
-		let rootMeta = logic.getMetadata(logic.store.treeData.rootCancerType);
+		let rootMeta = this.logic.getMetadata(this.store.treeData.rootCancerType);
 		let listItems = rootMeta && rootMeta.childCancerTypes.map(this.renderCancerTypeListItem);
 
 		return (
@@ -81,21 +84,20 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 
 	renderCancerTypeListItem = (cancerType:CancerType, arrayIndex:number) =>
 	{
-		let logic = this.store.studyListLogic;
-		let numStudies = logic.getDescendantCancerStudies(cancerType).length;
+		let numStudies = this.logic.cancerTypeListView.getDescendantCancerStudies(cancerType).length;
 
 		if (!numStudies)
 			return null;
 
 		let selected = _.includes(this.store.selectedCancerTypeIds, cancerType.cancerTypeId);
-		let highlighted = this.store.studyListLogic.isHighlighted(cancerType);
+		let highlighted = this.logic.isHighlighted(cancerType);
 		let liClassName = classNames({
 			[styles.cancerTypeListItem]: true,
 			[styles.selectable]: true,
 			[styles.selected]: selected,
 			[styles.matchingNodeText]: !!this.store.searchText && highlighted,
 			[styles.nonMatchingNodeText]: !!this.store.searchText && !highlighted,
-			[styles.containsSelectedStudies]: this.store.studyListLogic.cancerTypeContainsSelectedStudies(cancerType),
+			[styles.containsSelectedStudies]: this.logic.cancerTypeContainsSelectedStudies(cancerType),
 		});
 
 		return (
@@ -141,8 +143,7 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 		if (this.store.searchText && searchTextOptions.indexOf(this.store.searchText) < 0)
 			searchTextOptions = [this.store.searchText].concat(searchTextOptions as string[]);
 
-		let logic = this.store.studyListLogic;
-		let selectAllCheckboxProps = logic.getCheckboxProps(logic.rootCancerType);
+		let selectAllCheckboxProps = this.logic.mainView.getCheckboxProps(this.store.treeData.rootCancerType);
 
 		let selectedCountClass = classNames({
 			[styles.selectedCount]: true,
@@ -186,7 +187,7 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 						}}
 					/>
 					{!!(!this.store.forDownloadTab) && (
-						<span className={classNames('cta', styles.selectAll)} onClick={() => logic.hack_handleSelectAll(!selectAllCheckboxProps.checked)}>
+						<span className={classNames('cta', styles.selectAll)} onClick={() => this.logic.mainView.hack_handleSelectAll(!selectAllCheckboxProps.checked)}>
 							{selectAllCheckboxProps.checked ? "Deselect all" : "Select all"}
 						</span>
 					)}
@@ -198,6 +199,10 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 					</div>
 					<div className={styles.cancerStudyListContainer}>
 						<StudyList/>
+						{!!(this.store.showSelectedStudiesOnly) && (
+							/* HACK - should use Modal dialog instead */
+							<StudyList showSelectedStudiesOnly/>
+						)}
 					</div>
 				</FlexRow>
 			</FlexCol>
diff --git a/src/shared/components/query/CancerStudyTreeData.ts b/src/shared/components/query/CancerStudyTreeData.ts
index 079db772773..deb1d07d3b2 100644
--- a/src/shared/components/query/CancerStudyTreeData.ts
+++ b/src/shared/components/query/CancerStudyTreeData.ts
@@ -8,12 +8,14 @@ export type CancerTreeNode = CancerType|CancerStudy;
 export type NodeMetadata = {
 	isCancerType:boolean,
 	isPriorityCategory:boolean,
+	priorityCategories:CancerType[],
 	childCancerTypes:CancerType[],
 	childStudies:CancerStudy[],
 	descendantStudies:CancerStudy[],
 	descendantCancerTypes:CancerType[],
 	ancestors:CancerType[], // in order of ascending distance from node, ending in root node
 	siblings:CancerStudy[], // descendants of highest level non-root ancestor
+	searchTerms:string, // all related text in a single string for easy searching
 };
 
 export default class CancerStudyTreeData
@@ -32,6 +34,7 @@ export default class CancerStudyTreeData
 		cancerTypeId: CANCER_TYPE_ROOT
 	};
 
+	priorityCategories:CancerType[] = [];
 	map_node_meta = new Map<CancerTreeNode, NodeMetadata>();
 	map_cancerTypeId_cancerType = new Map<string, CancerType>();
 	map_studyId_cancerStudy = new Map<string, CancerStudy>();
@@ -46,10 +49,9 @@ export default class CancerStudyTreeData
 		cancerTypes = CancerStudyTreeData.sortNodes(cancerTypes);
 		studies = CancerStudyTreeData.sortNodes(studies);
 
-		let priorityCategories:CancerType[] = [];
 		for (let name in priorityStudies)
 		{
-			priorityCategories.push({
+			this.priorityCategories.push({
 				clinicalTrialKeywords: '',
 				dedicatedColor: '',
 				name,
@@ -58,14 +60,15 @@ export default class CancerStudyTreeData
 				cancerTypeId: name
 			});
 		}
-		cancerTypes = priorityCategories.concat(this.rootCancerType, cancerTypes);
+		cancerTypes = this.priorityCategories.concat(this.rootCancerType, cancerTypes);
 
 		// initialize lookups and metadata entries
 		for (nodes of [cancerTypes, studies])
 		{
 			for (node of nodes)
 			{
-				if (nodes == cancerTypes)
+				let isCancerType = nodes == cancerTypes;
+				if (isCancerType)
 				{
 					this.map_cancerTypeId_cancerType.set(node.cancerTypeId, node as CancerType);
 				}
@@ -74,21 +77,24 @@ export default class CancerStudyTreeData
 					this.map_studyId_cancerStudy.set((node as CancerStudy).studyId, node as CancerStudy);
 				}
 
+				let searchTerms = isCancerType ? node.name : [node.name, (node as CancerStudy).description].join('\n');
 				this.map_node_meta.set(node, {
-					isCancerType: nodes == cancerTypes,
+					isCancerType,
 					isPriorityCategory: false,
+					priorityCategories: [],
 					childCancerTypes: [],
 					childStudies: [],
 					descendantStudies: [],
 					descendantCancerTypes: [],
 					ancestors: [],
 					siblings: [],
+					searchTerms,
 				});
 			}
 		}
 
 		// fill in childStudies for priorityCategories using existing CancerStudy objects
-		for (let category of priorityCategories)
+		for (let category of this.priorityCategories)
 		{
 			meta = this.map_node_meta.get(category) as NodeMetadata;
 			meta.isPriorityCategory = true;
@@ -99,6 +105,8 @@ export default class CancerStudyTreeData
 				{
 					meta.childStudies.push(study);
 					meta.descendantStudies.push(study);
+					let studyMeta = this.map_node_meta.get(study) as NodeMetadata;
+					studyMeta.priorityCategories.push(category);
 				}
 			}
 		}
@@ -135,6 +143,9 @@ export default class CancerStudyTreeData
 					parent = this.map_cancerTypeId_cancerType.get(parent.parent);
 					parentMeta = parent && this.map_node_meta.get(parent);
 				}
+
+				let moreSearchTerms = [...meta.ancestors, ...meta.priorityCategories].map(cancerType => cancerType.name);
+				meta.searchTerms = [meta.searchTerms, ...moreSearchTerms].join('\n');
 			}
 		}
 
diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 4faa2f8b6bb..81f86b4fdf9 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -6,7 +6,6 @@ import {
 	Sample, SampleIdentifier
 } from "../../api/generated/CBioPortalAPI";
 import CancerStudyTreeData from "./CancerStudyTreeData";
-import StudyListLogic from "../StudyList/StudyListLogic";
 import {remoteData} from "../../api/remoteData";
 import {labelMobxPromises, cached, debounceAsync} from "mobxpromise";
 import internalClient from "../../api/cbioportalInternalClientInstance";
@@ -19,6 +18,7 @@ import {ComponentGetsStoreContext} from "../../lib/ContextUtils";
 import URL from 'url';
 import {buildCBioPortalUrl, BuildUrlParams} from "../../api/urls";
 import {SyntaxError} from "../../lib/oql/oql-parser";
+import StudyListLogic from "./StudyListLogic";
 
 // interface for communicating
 type CancerStudyQueryUrlParams = {
@@ -436,18 +436,11 @@ export class QueryStore
 		});
 	}
 
-	@cached get studyListLogic()
-	{
-		// temporary hack - dependencies
-		// TODO review StudyListLogic code
-		this.treeData;
-		this.maxTreeDepth;
-		this.searchText;
-		this.selectedCancerTypeIds;
-		this.selectedStudyIds;
-		this.showSelectedStudiesOnly;
+	readonly studyListLogic = new StudyListLogic(this);
 
-		return new StudyListLogic(this);
+	@computed get selectedCancerTypes()
+	{
+		return this.selectedCancerTypeIds.map(id => this.treeData.map_cancerTypeId_cancerType.get(id) as CancerType).filter(_.identity);
 	}
 
 	@computed get singleSelectedStudyId()
@@ -457,7 +450,7 @@ export class QueryStore
 
 	@computed get selectedStudies()
 	{
-		return this.selectedStudyIds.map(id => this.treeData.map_studyId_cancerStudy.get(id)).filter(_.identity);
+		return this.selectedStudyIds.map(id => this.treeData.map_studyId_cancerStudy.get(id) as CancerStudy).filter(_.identity);
 	}
 
 	@computed get selectedStudies_totalSampleCount()
diff --git a/src/shared/components/query/StudyListLogic.ts b/src/shared/components/query/StudyListLogic.ts
new file mode 100644
index 00000000000..31052e4c89e
--- /dev/null
+++ b/src/shared/components/query/StudyListLogic.ts
@@ -0,0 +1,285 @@
+import * as _ from 'lodash';
+import {CancerTreeNode} from "./CancerStudyTreeData";
+import {NodeMetadata} from "./CancerStudyTreeData";
+import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioPortalAPI";
+import {QueryStore} from "./QueryStore";
+import {computed, action} from "mobx";
+import {parse_search_query, perform_search_single, SearchResult} from "../../lib/textQueryUtils";
+import {cached} from 'mobxpromise';
+
+export default class StudyListLogic
+{
+	constructor(private readonly store:QueryStore)
+	{
+	}
+
+	@cached get map_node_filterByDepth()
+	{
+		let map_node_filter = new Map<CancerTreeNode, boolean>();
+		for (let [node, meta] of this.store.treeData.map_node_meta.entries())
+		{
+			let filter = true;
+			if (meta.isCancerType)
+			{
+				// exclude cancer types beyond max depth, or those with no descendant studies
+				if (meta.ancestors.length > this.store.maxTreeDepth || !meta.descendantStudies.length)
+					filter = false;
+			}
+			map_node_filter.set(node, filter);
+		}
+		return map_node_filter;
+	}
+
+	@cached get map_node_filterBySearchText()
+	{
+		// first compute individual node match results
+		let parsedQuery = parse_search_query(this.store.searchText);
+		let map_node_searchResult = new Map<CancerTreeNode, SearchResult>();
+		for (let [node, meta] of this.store.treeData.map_node_meta.entries())
+			map_node_searchResult.set(node, perform_search_single(parsedQuery, meta.searchTerms));
+
+		let map_node_filter = new Map<CancerTreeNode, boolean>();
+		for (let [node, meta] of this.store.treeData.map_node_meta.entries())
+		{
+			if (map_node_filter.has(node))
+				continue;
+
+			let filter = false;
+			for (let item of [node, ...meta.ancestors, ...meta.priorityCategories])
+			{
+				let result = map_node_searchResult.get(item) as SearchResult;
+				if (!result.match && result.forced)
+				{
+					filter = false;
+					break;
+				}
+				filter = filter || result.match;
+			}
+			map_node_filter.set(node, filter);
+
+			// include ancestors of matching studies
+			if (!meta.isCancerType)
+				for (let cancerTypes of [meta.ancestors, meta.priorityCategories])
+					for (let cancerType of cancerTypes)
+						map_node_filter.set(cancerType, true);
+		}
+		return map_node_filter;
+	}
+
+	@cached get map_node_filterBySelectedCancerTypes()
+	{
+		let map_node_filter = new Map<CancerTreeNode, boolean>();
+		if (this.store.selectedCancerTypes.length)
+		{
+			for (let cancerType of this.store.selectedCancerTypes)
+			{
+				let meta = this.getMetadata(cancerType);
+
+				// include selected cancerType and related nodes
+				map_node_filter.set(cancerType, true);
+				for (let nodes of [meta.ancestors, meta.descendantCancerTypes, meta.descendantStudies])
+					for (let node of nodes)
+						map_node_filter.set(node, true);
+			}
+		}
+		else
+		{
+			// include everything if no cancer types are selected
+			for (let node of this.store.treeData.map_node_meta.keys())
+				map_node_filter.set(node, true);
+		}
+		return map_node_filter;
+	}
+
+	@cached get map_node_filterBySelectedStudies()
+	{
+		let map_node_filter = new Map<CancerTreeNode, boolean>();
+		if (this.store.selectedStudies.length)
+		{
+			for (let study of this.store.selectedStudies)
+			{
+				let meta = this.store.treeData.map_node_meta.get(study) as NodeMetadata;
+
+				// include selected study and related nodes
+				map_node_filter.set(study, true);
+				for (let nodes of [meta.descendantStudies, meta.ancestors, meta.priorityCategories])
+					for (let node of nodes)
+						map_node_filter.set(node, true);
+			}
+		}
+		return map_node_filter;
+	}
+
+	getMetadata(node:CancerTreeNode)
+	{
+		return this.store.treeData.map_node_meta.get(node) as NodeMetadata;
+	}
+
+	@computed get mainView()
+	{
+		return new FilteredCancerTreeView(
+			this.store,
+			[
+				this.map_node_filterByDepth,
+				this.map_node_filterBySearchText,
+				this.map_node_filterBySelectedCancerTypes
+			]
+		);
+	}
+
+	@computed get cancerTypeListView()
+	{
+		return new FilteredCancerTreeView(
+			this.store,
+			[
+				this.map_node_filterByDepth,
+				this.map_node_filterBySearchText
+			]
+		);
+	}
+
+	@computed get selectedStudiesView()
+	{
+		return new FilteredCancerTreeView(
+			this.store,
+			[
+				this.map_node_filterByDepth,
+				this.map_node_filterBySelectedStudies,
+				{get: (node:CancerTreeNode) => !this.getMetadata(node).isPriorityCategory}
+			]
+		);
+	}
+
+	cancerTypeContainsSelectedStudies(cancerType:CancerType):boolean
+	{
+		let descendantStudies = this.getMetadata(cancerType).descendantStudies;
+		return _.intersection(this.store.selectedStudies, descendantStudies).length > 0;
+	}
+
+	getDepth(node:CancerType):number
+	{
+		let meta = this.getMetadata(node);
+		return meta.ancestors.length;
+	}
+
+	isHighlighted(node:CancerTreeNode):boolean
+	{
+		return !!this.store.searchText && !!this.map_node_filterBySearchText.get(node);
+	}
+}
+
+export class FilteredCancerTreeView
+{
+	constructor(
+		private store:QueryStore,
+		private filters:Pick<Map<CancerTreeNode, boolean>, 'get'>[]
+	){}
+
+	nodeFilter = (node:CancerTreeNode):boolean =>
+	{
+		return this.filters.every(map => !!map.get(node));
+	}
+
+	getMetadata(node:CancerTreeNode)
+	{
+		return this.store.treeData.map_node_meta.get(node) as NodeMetadata;
+	}
+
+	getChildCancerTypes(cancerType:CancerType):CancerType[]
+	{
+		let meta = this.getMetadata(cancerType);
+		let childTypes = meta.ancestors.length < this.store.maxTreeDepth ? meta.childCancerTypes : [];
+		return childTypes.filter(this.nodeFilter);
+	}
+
+	getChildCancerStudies(cancerType:CancerType):CancerStudy[]
+	{
+		let meta = this.getMetadata(cancerType);
+		let studies = meta.ancestors.length < this.store.maxTreeDepth ? meta.childStudies : meta.descendantStudies;
+		return studies.filter(this.nodeFilter);
+	}
+
+	getDescendantCancerStudies(node:CancerTreeNode):CancerStudy[]
+	{
+		if (node === this.store.treeData.rootCancerType)
+			return this.hack_getAllStudies();
+
+		let meta = this.getMetadata(node);
+		return meta.descendantStudies.filter(this.nodeFilter);
+	}
+
+	hack_getAllStudies()
+	{
+		return _.union(...(
+			this.getChildCancerTypes(this.store.treeData.rootCancerType)
+				.map(cancerType => this.getDescendantCancerStudies(cancerType))
+		));
+	}
+
+	getCheckboxProps(node: CancerTreeNode): {checked: boolean, indeterminate?: boolean}
+	{
+		let meta = this.getMetadata(node);
+		if (meta.isCancerType)
+		{
+			let selectedStudyIds = this.store.selectedStudyIds || [];
+			let selectedStudies = selectedStudyIds.map(studyId => this.store.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
+			let shownStudies = this.getDescendantCancerStudies(node);
+			let shownAndSelectedStudies = _.intersection(shownStudies, selectedStudies);
+			let checked = shownAndSelectedStudies.length > 0;
+			let indeterminate = checked && shownAndSelectedStudies.length != shownStudies.length;
+
+			return {checked, indeterminate};
+		}
+		else
+		{
+			let study = node as CancerStudy;
+			let checked = !!this.store.selectedStudyIds.find(id => id == study.studyId);
+			return {checked};
+		}
+	}
+
+	@action onCheck(node:CancerTreeNode, checked:boolean): void
+	{
+		let clickedStudyIds;
+		let meta = this.getMetadata(node);
+
+		if (meta.isCancerType)
+		{
+			if (!this.store.forDownloadTab)
+				clickedStudyIds = this.getDescendantCancerStudies(node).map(study => study.studyId);
+		}
+		else
+		{
+			clickedStudyIds = [(node as CancerStudy).studyId];
+		}
+
+		if (clickedStudyIds)
+			this.handleCheckboxStudyIds(clickedStudyIds, checked);
+	}
+
+	private handleCheckboxStudyIds(clickedStudyIds:string[], checked:boolean)
+	{
+		let selectedStudyIds = this.store.selectedStudyIds;
+		if (checked)
+			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
+		else
+			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
+
+		this.store.selectedStudyIds = selectedStudyIds;
+	}
+
+	@action hack_handleSelectAll(checked:boolean)
+	{
+		let selectedStudyIds = this.store.selectedStudyIds;
+		let clickedStudyIds = this.hack_getAllStudies().map(study => study.studyId);
+		if (checked)
+			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
+		else
+			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
+
+		this.store.selectedStudyIds = selectedStudyIds;
+
+		if (!this.store.selectedStudyIds.length)
+			this.store.showSelectedStudiesOnly = false;
+	}
+}
diff --git a/src/shared/components/StudyList/StudyList.tsx b/src/shared/components/query/studyList/StudyList.tsx
similarity index 74%
rename from src/shared/components/StudyList/StudyList.tsx
rename to src/shared/components/query/studyList/StudyList.tsx
index 7f08202fd7d..d27af6ffebc 100644
--- a/src/shared/components/StudyList/StudyList.tsx
+++ b/src/shared/components/query/studyList/StudyList.tsx
@@ -1,241 +1,256 @@
-import * as React from 'react';
-import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioPortalAPI";
-import * as styles_any from './styles.module.scss';
-import classNames from 'classnames';
-import FontAwesome from "react-fontawesome";
-import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
-import {observer} from "mobx-react";
-import {getStudySummaryUrl, getPubMedUrl} from "../../api/urls";
-import {QueryStoreComponent} from "../query/QueryStore";
-import DefaultTooltip from "../DefaultTooltip";
-
-const styles = {
-	...styles_any as {
-		StudyList: string,
-		SelectedStudyList: string,
-
-		CancerType: string,
-		CancerTypeName: string,
-		SelectAll: string,
-
-		Study: string,
-		StudyName: string,
-		StudyMeta: string,
-		StudySamples: string,
-		StudyLinks: string,
-
-		icon: string,
-		iconWithTooltip: string,
-		tooltip: string,
-
-		disabled: string,
-		enabled: string,
-		indentArrow: string,
-
-		closeSelected: string,
-		deselectAll: string,
-		highlighted: string,
-	},
-	Level: (level:number) => styles_any[`Level${level}`]
-};
-
-@observer
-export default class StudyList extends QueryStoreComponent<{}, {}>
-{
-	get logic() { return this.store.studyListLogic; }
-
-	render()
-	{
-		if (this.store.showSelectedStudiesOnly) {
-			return this.renderSelectedStudies();
-		} else {
-			return this.renderCancerType(this.logic.rootCancerType);
-		}
-	}
-
-	renderSelectedStudies = () =>
-	{
-		return (
-			<div className={styles.SelectedStudyList}>
-				<h4>
-						Selected Studies 
-						<span 
-							className={styles.closeSelected}
-							onClick={() => this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly}
-						>
-							Return to Study Selector
-						</span>
-				</h4>
-				<span className={styles.deselectAll} onClick={() => this.logic.hack_handleSelectAll(false)}>
-					Deselect all
-				</span>
-				<ul className={styles.StudyList}>
-					{this.renderCancerType(this.logic.rootCancerType)}
-				</ul>
-			</div>
-		);
-	}
-
-	renderCancerType = (cancerType:CancerType, arrayIndex:number = 0):JSX.Element | null =>
-	{
-		// BEGIN TEMP HACK
-		let descendantStudies = this.logic.getDescendantCancerStudies(cancerType);
-		if (!descendantStudies.length)
-			return null;
-		// END TEMP HACK
-
-		let currentLevel = this.logic.getDepth(cancerType);
-		let childCancerTypes = this.logic.getChildCancerTypes(cancerType);
-		let childStudies = this.logic.getChildCancerStudies(cancerType);
-
-		let heading:JSX.Element | undefined;
-		let indentArrow:JSX.Element | undefined;
-
-		if (cancerType != this.logic.rootCancerType)
-		{
-			let liClassName = classNames(
-				styles.CancerType,
-				styles.Level(currentLevel),
-				this.logic.isHighlighted(cancerType) && styles.highlighted,
-			);
-
-			if (currentLevel === 3)
-				indentArrow = (
-					<FontAwesome className={styles.indentArrow} name="long-arrow-right" />
-				);
-
-			heading = (
-				<li className={liClassName}>
-					<LabeledCheckbox
-						{...this.logic.getCheckboxProps(cancerType)}
-						onChange={event => this.logic.onCheck(cancerType, (event.target as HTMLInputElement).checked)}
-					>
-						{indentArrow} 
-						<span className={styles.CancerTypeName}>
-							{cancerType.name}
-						</span>
-						{!!(!this.store.forDownloadTab) && (
-							<span className={styles.SelectAll}>
-								Select All
-							</span>
-						)}
-					</LabeledCheckbox>
-				</li>
-			);
-		}
-
-		let ulClassName = classNames(
-			styles.StudyList,
-			styles.Level(currentLevel),
-		);
-		return (
-			<ul key={arrayIndex} className={ulClassName}>
-				{heading}
-				{childStudies.map(this.renderCancerStudy)}
-				{childCancerTypes.map(this.renderCancerType)}
-			</ul>
-		);
-	}
-
-	renderCancerStudy = (study:CancerStudy, arrayIndex:number) =>
-	{
-		let liClassName = classNames(
-			styles.Study,
-			this.logic.isHighlighted(study) && styles.highlighted,
-		);
-		return (
-			<li key={arrayIndex} className={liClassName}>
-				{this.renderStudyName(study)}
-				<div className={styles.StudyMeta}>
-					{this.renderSamples(study)}
-					{this.renderStudyLinks(study)}
-				</div>
-			</li>
-		);
-	}
-
-	renderStudyName = (study:CancerStudy) =>
-	{
-		return (
-			<LabeledCheckbox
-				{...this.logic.getCheckboxProps(study)}
-				onChange={event => this.logic.onCheck(study, (event.target as HTMLInputElement).checked)}
-			>
-				<span className={styles.StudyName}>
-					{study.name}
-				</span>
-			</LabeledCheckbox>
-		);
-	}
-
-	renderSamples = (study:CancerStudy) =>
-	{
-		return (
-			<span className={styles.StudySamples}>
-				{`${study.allSampleCount} samples`}
-			</span>
-		);
-	}
-
-	renderStudyLinks = (study:CancerStudy) =>
-	{
-		let links = [
-			{
-				icon: 'info-circle',
-				url: undefined,
-				tooltip: study.description
-			},
-			{
-				icon: 'bar-chart',
-				url: study.studyId && getStudySummaryUrl(study.studyId),
-				tooltip: study.studyId && "Summary"
-			},
-			{
-				icon: 'book',
-				url: study.pmid && getPubMedUrl(study.pmid),
-				tooltip: study.pmid && "PubMed"
-			},
-		];
-		return (
-			<span className={styles.StudyLinks}>
-				{links.map((link, i) => {
-					let content = (
-						<FontAwesome
-							key={i}
-							name={link.icon}
-							className={classNames({
-								[styles.icon]: true,
-								[styles.iconWithTooltip]: !!link.tooltip,
-							})}
-						/>
-					);
-
-					if (link.url)
-						content = (
-							<a key={i} href={link.url}>
-								{content}
-							</a>
-						);
-
-					if (link.tooltip)
-					{
-						let overlay = (
-							<div className={styles.tooltip} dangerouslySetInnerHTML={{__html: link.tooltip}}/>
-						);
-						content = (
-							<DefaultTooltip
-								key={i}
-								mouseEnterDelay={0}
-								placement="top"
-								overlay={overlay}
-								children={content}
-							/>
-						);
-					}
-
-					return content;
-				})}
-			</span>
-		);
-	}
-}
+import * as React from 'react';
+import {TypeOfCancer as CancerType, CancerStudy} from "../../../api/generated/CBioPortalAPI";
+import * as styles_any from './styles.module.scss';
+import classNames from 'classnames';
+import FontAwesome from "react-fontawesome";
+import LabeledCheckbox from "../../labeledCheckbox/LabeledCheckbox";
+import {observer} from "mobx-react";
+import {getStudySummaryUrl, getPubMedUrl} from "../../../api/urls";
+import {QueryStoreComponent} from "../QueryStore";
+import DefaultTooltip from "../../DefaultTooltip";
+import StudyListLogic from "../StudyListLogic";
+import {cached} from 'mobxpromise';
+
+const styles = {
+	...styles_any as {
+		StudyList: string,
+		SelectedStudyList: string,
+
+		CancerType: string,
+		CancerTypeName: string,
+		SelectAll: string,
+
+		Study: string,
+		StudyName: string,
+		StudyMeta: string,
+		StudySamples: string,
+		StudyLinks: string,
+
+		icon: string,
+		iconWithTooltip: string,
+		tooltip: string,
+
+		disabled: string,
+		enabled: string,
+		indentArrow: string,
+
+		closeSelected: string,
+		deselectAll: string,
+		highlighted: string,
+	},
+	Level: (level:number) => styles_any[`Level${level}`]
+};
+
+export interface IStudyListProps
+{
+	showSelectedStudiesOnly?: boolean;
+}
+
+@observer
+export default class StudyList extends QueryStoreComponent<IStudyListProps, void>
+{
+	get logic() { return this.store.studyListLogic; }
+
+	get rootCancerType() { return this.store.treeData.rootCancerType; }
+
+	get view()
+	{
+		return this.props.showSelectedStudiesOnly
+			? this.logic.selectedStudiesView
+			: this.logic.mainView;
+	}
+
+	render()
+	{
+		if (this.props.showSelectedStudiesOnly)
+			return this.renderSelectedStudies();
+		else
+			return this.renderCancerType(this.rootCancerType);
+	}
+
+	renderSelectedStudies = () =>
+	{
+		return (
+			<div className={styles.SelectedStudyList}>
+				<h4>
+						Selected Studies 
+						<span 
+							className={styles.closeSelected}
+							onClick={() => this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly}
+						>
+							Return to Study Selector
+						</span>
+				</h4>
+				<span className={styles.deselectAll} onClick={() => this.view.hack_handleSelectAll(false)}>
+					Deselect all
+				</span>
+				<ul className={styles.StudyList}>
+					{this.renderCancerType(this.rootCancerType)}
+				</ul>
+			</div>
+		);
+	}
+
+	renderCancerType = (cancerType:CancerType, arrayIndex:number = 0):JSX.Element | null =>
+	{
+		// BEGIN TEMP HACK
+		let descendantStudies = this.view.getDescendantCancerStudies(cancerType);
+		if (!descendantStudies.length)
+			return null;
+		// END TEMP HACK
+
+		let currentLevel = this.logic.getDepth(cancerType);
+		let childCancerTypes = this.view.getChildCancerTypes(cancerType);
+		let childStudies = this.view.getChildCancerStudies(cancerType);
+
+		let heading:JSX.Element | undefined;
+		let indentArrow:JSX.Element | undefined;
+
+		if (cancerType != this.rootCancerType)
+		{
+			let liClassName = classNames(
+				styles.CancerType,
+				styles.Level(currentLevel),
+				this.logic.isHighlighted(cancerType) && styles.highlighted,
+			);
+
+			if (currentLevel === 3)
+				indentArrow = (
+					<FontAwesome className={styles.indentArrow} name="long-arrow-right" />
+				);
+
+			heading = (
+				<li className={liClassName}>
+					<LabeledCheckbox
+						{...this.view.getCheckboxProps(cancerType)}
+						onChange={event => this.view.onCheck(cancerType, (event.target as HTMLInputElement).checked)}
+					>
+						{indentArrow} 
+						<span className={styles.CancerTypeName}>
+							{cancerType.name}
+						</span>
+						{!!(!this.store.forDownloadTab) && (
+							<span className={styles.SelectAll}>
+								Select All
+							</span>
+						)}
+					</LabeledCheckbox>
+				</li>
+			);
+		}
+
+		let ulClassName = classNames(
+			styles.StudyList,
+			styles.Level(currentLevel),
+		);
+		return (
+			<ul key={arrayIndex} className={ulClassName}>
+				{heading}
+				{childStudies.map(this.renderCancerStudy)}
+				{childCancerTypes.map(this.renderCancerType)}
+			</ul>
+		);
+	}
+
+	renderCancerStudy = (study:CancerStudy, arrayIndex:number) =>
+	{
+		let liClassName = classNames(
+			styles.Study,
+			this.logic.isHighlighted(study) && styles.highlighted,
+		);
+		return (
+			<li key={arrayIndex} className={liClassName}>
+				{this.renderStudyName(study)}
+				<div className={styles.StudyMeta}>
+					{this.renderSamples(study)}
+					{this.renderStudyLinks(study)}
+				</div>
+			</li>
+		);
+	}
+
+	renderStudyName = (study:CancerStudy) =>
+	{
+		return (
+			<LabeledCheckbox
+				{...this.view.getCheckboxProps(study)}
+				onChange={event => this.view.onCheck(study, (event.target as HTMLInputElement).checked)}
+			>
+				<span className={styles.StudyName}>
+					{study.name}
+				</span>
+			</LabeledCheckbox>
+		);
+	}
+
+	renderSamples = (study:CancerStudy) =>
+	{
+		return (
+			<span className={styles.StudySamples}>
+				{`${study.allSampleCount} samples`}
+			</span>
+		);
+	}
+
+	renderStudyLinks = (study:CancerStudy) =>
+	{
+		let links = [
+			{
+				icon: 'info-circle',
+				url: undefined,
+				tooltip: study.description
+			},
+			{
+				icon: 'bar-chart',
+				url: study.studyId && getStudySummaryUrl(study.studyId),
+				tooltip: study.studyId && "Summary"
+			},
+			{
+				icon: 'book',
+				url: study.pmid && getPubMedUrl(study.pmid),
+				tooltip: study.pmid && "PubMed"
+			},
+		];
+		return (
+			<span className={styles.StudyLinks}>
+				{links.map((link, i) => {
+					let content = (
+						<FontAwesome
+							key={i}
+							name={link.icon}
+							className={classNames({
+								[styles.icon]: true,
+								[styles.iconWithTooltip]: !!link.tooltip,
+							})}
+						/>
+					);
+
+					if (link.url)
+						content = (
+							<a key={i} href={link.url}>
+								{content}
+							</a>
+						);
+
+					if (link.tooltip)
+					{
+						let overlay = (
+							<div className={styles.tooltip} dangerouslySetInnerHTML={{__html: link.tooltip}}/>
+						);
+						content = (
+							<DefaultTooltip
+								key={i}
+								mouseEnterDelay={0}
+								placement="top"
+								overlay={overlay}
+								children={content}
+							/>
+						);
+					}
+
+					return content;
+				})}
+			</span>
+		);
+	}
+}
diff --git a/src/shared/components/StudyList/styles.module.scss b/src/shared/components/query/studyList/styles.module.scss
similarity index 100%
rename from src/shared/components/StudyList/styles.module.scss
rename to src/shared/components/query/studyList/styles.module.scss
diff --git a/src/shared/lib/textQueryUtils.ts b/src/shared/lib/textQueryUtils.ts
new file mode 100644
index 00000000000..040ac596d36
--- /dev/null
+++ b/src/shared/lib/textQueryUtils.ts
@@ -0,0 +1,161 @@
+export type SearchClause = (
+	{type: 'not', data: string} |
+	{type: 'and', data: string[]}
+);
+
+export type SearchResult = {match: boolean, forced: boolean};
+
+export function parse_search_query(query:string):SearchClause[]
+{
+	// First eliminate trailing whitespace and reduce every whitespace
+	//	to a single space.
+	query = query.toLowerCase().trim().split(/\s+/g).join(' ');
+	// Now factor out quotation marks and inter-token spaces
+	let phrases = [];
+	let currInd = 0;
+	let nextSpace, nextQuote;
+	while (currInd < query.length)
+	{
+		if (query[currInd] === '"')
+		{
+			nextQuote = query.indexOf('"', currInd + 1);
+			if (nextQuote === -1)
+			{
+				phrases.push(query.substring(currInd + 1));
+				currInd = query.length;
+			}
+			else
+			{
+				phrases.push(query.substring(currInd + 1, nextQuote));
+				currInd = nextQuote + 1;
+			}
+		}
+		else if (query[currInd] === ' ')
+		{
+			currInd += 1;
+		}
+		else if (query[currInd] === '-')
+		{
+			phrases.push('-');
+			currInd += 1;
+		}
+		else
+		{
+			nextSpace = query.indexOf(' ', currInd);
+			if (nextSpace === -1)
+			{
+				phrases.push(query.substring(currInd));
+				currInd = query.length;
+			}
+			else
+			{
+				phrases.push(query.substring(currInd, nextSpace));
+				currInd = nextSpace + 1;
+			}
+		}
+	}
+	// Now get the conjunctive clauses, and the negative clauses
+	let clauses:SearchClause[] = [];
+	currInd = 0;
+	let nextOr, nextDash;
+	while (currInd < phrases.length)
+	{
+		if (phrases[currInd] === '-')
+		{
+			if (currInd < phrases.length - 1)
+			{
+				clauses.push({"type": "not", "data": phrases[currInd + 1]});
+			}
+			currInd = currInd + 2;
+		}
+		else
+		{
+			nextOr = phrases.indexOf('or', currInd);
+			nextDash = phrases.indexOf('-', currInd);
+			if (nextOr === -1 && nextDash === -1)
+			{
+				clauses.push({"type": "and", "data": phrases.slice(currInd)});
+				currInd = phrases.length;
+			}
+			else if (nextOr === -1 && nextDash > 0)
+			{
+				clauses.push({"type": "and", "data": phrases.slice(currInd, nextDash)});
+				currInd = nextDash;
+			}
+			else if (nextOr > 0 && nextDash === -1)
+			{
+				clauses.push({"type": "and", "data": phrases.slice(currInd, nextOr)});
+				currInd = nextOr + 1;
+			}
+			else
+			{
+				if (nextOr < nextDash)
+				{
+					clauses.push({"type": "and", "data": phrases.slice(currInd, nextOr)});
+					currInd = nextOr + 1;
+				}
+				else
+				{
+					clauses.push({"type": "and", "data": phrases.slice(currInd, nextDash)});
+					currInd = nextDash;
+				}
+			}
+		}
+	}
+	return clauses;
+}
+
+export function matchPhrase(phrase:string, fullText:string)
+{
+	return fullText.toLowerCase().indexOf(phrase.toLowerCase()) > -1;
+}
+
+export function perform_search_single(parsed_query:SearchClause[], item:string):SearchResult;
+export function perform_search_single<T>(parsed_query:SearchClause[], item:T, matcher:(phrase:string, item:T)=>boolean):SearchResult;
+export function perform_search_single<T>(parsed_query:SearchClause[], item:T, matcher?:(phrase:string, item:T)=>boolean)
+{
+	if (!matcher)
+		matcher = matchPhrase as any;
+
+	// return true iff the query, considering quotation marks, 'and' and 'or' logic, matches
+	let match = false;
+	let hasPositiveClauseType = false;
+	let forced = false;
+
+	for (let clause of parsed_query)
+	{
+		if (clause.type !== 'not')
+		{
+			hasPositiveClauseType = true;
+			break;
+		}
+	}
+	if (!hasPositiveClauseType)
+	{
+		// if only negative clauses, match by default
+		match = true;
+	}
+	for (let clause of parsed_query)
+	{
+		if (clause.type === 'not')
+		{
+			if (matcher!(clause.data, item))
+			{
+				match = false;
+				forced = true;
+				break;
+			}
+		}
+		else if (clause.type === 'and')
+		{
+			hasPositiveClauseType = true;
+			let clauseMatch = true;
+			for (let phrase of clause.data)
+			{
+				clauseMatch = clauseMatch && matcher!(phrase, item);
+			}
+			match = match || clauseMatch;
+		}
+	}
+	return {match, forced};
+}

From bb5ff961cc9b8273b1996911e8727cdf6803d51c Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Wed, 12 Apr 2017 22:06:12 -0400
Subject: [PATCH 123/133] Enable submit button when OQL error present

---
 src/shared/components/query/QueryStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 81f86b4fdf9..4d34e6d0a01 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -633,7 +633,7 @@ export class QueryStore
 			!this.submitError &&
 			this.genes.isComplete &&
 			this.asyncUrlParams.isComplete
-		);
+		) || !!this.oql.error; // to make "Please click 'Submit' to see location of error." possible
 	}
 
 	@computed get submitError()

From 1fb1e8e2f48cd6fae70dce3f2fca1f241018249b Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 13 Apr 2017 09:57:33 -0400
Subject: [PATCH 124/133] Add back enhancedReactTable

---
 .../EnhancedReactTable.spec.tsx               |  21 +
 .../enhancedReactTable/EnhancedReactTable.tsx | 618 ++++++++++++++++++
 .../IColumnFormatter.spec.tsx                 |  21 +
 .../enhancedReactTable/IColumnFormatter.ts    |  38 ++
 .../IEnhancedReactTableProps.spec.tsx         |  21 +
 .../IEnhancedReactTableProps.ts               |  71 ++
 .../components/enhancedReactTable/styles.css  |   3 +
 7 files changed, 793 insertions(+)
 create mode 100644 src/shared/components/enhancedReactTable/EnhancedReactTable.spec.tsx
 create mode 100644 src/shared/components/enhancedReactTable/EnhancedReactTable.tsx
 create mode 100644 src/shared/components/enhancedReactTable/IColumnFormatter.spec.tsx
 create mode 100644 src/shared/components/enhancedReactTable/IColumnFormatter.ts
 create mode 100644 src/shared/components/enhancedReactTable/IEnhancedReactTableProps.spec.tsx
 create mode 100644 src/shared/components/enhancedReactTable/IEnhancedReactTableProps.ts
 create mode 100644 src/shared/components/enhancedReactTable/styles.css

diff --git a/src/shared/components/enhancedReactTable/EnhancedReactTable.spec.tsx b/src/shared/components/enhancedReactTable/EnhancedReactTable.spec.tsx
new file mode 100644
index 00000000000..a868f7a1a85
--- /dev/null
+++ b/src/shared/components/enhancedReactTable/EnhancedReactTable.spec.tsx
@@ -0,0 +1,21 @@
+import * as EnhancedReactTable from './EnhancedReactTable';
+import React from 'react';
+import { assert } from 'chai';
+import { shallow, mount } from 'enzyme';
+import sinon from 'sinon';
+
+describe('EnhancedReactTable', () => {
+
+    before(()=>{
+
+    });
+
+    after(()=>{
+
+    });
+
+    it('what does it do?', ()=>{
+
+    });
+
+});
diff --git a/src/shared/components/enhancedReactTable/EnhancedReactTable.tsx b/src/shared/components/enhancedReactTable/EnhancedReactTable.tsx
new file mode 100644
index 00000000000..82b0070ac9b
--- /dev/null
+++ b/src/shared/components/enhancedReactTable/EnhancedReactTable.tsx
@@ -0,0 +1,618 @@
+import * as React from 'react';
+import { createSelector } from "reselect";
+import {Table, Thead, Th, Tr, Td} from "reactable";
+import DefaultTooltip from 'shared/components/DefaultTooltip';
+import * as _ from 'lodash';
+import TableHeaderControls from "shared/components/tableHeaderControls/TableHeaderControls";
+import {
+    IEnhancedReactTableProps, IColumnDefMap, IEnhancedReactTableColumnDef, IColumnVisibilityState,
+    IEnhancedReactTableState, IColumnVisibilityDef, IColumnSort, IColumnFilter
+} from "./IEnhancedReactTableProps";
+import {
+    IColumnFormatterData, IColumnSortFunction, IColumnFilterFunction, IColumnVisibilityFunction, ColumnVisibility
+} from "./IColumnFormatter";
+import './styles.css';
+
+/**
+ * @author Selcuk Onur Sumer
+ */
+export default class EnhancedReactTable<T> extends React.Component<IEnhancedReactTableProps<T>, IEnhancedReactTableState>
+{
+    /**
+     * Resolves the visible columns and returns the state for the ones except "excluded".
+     *
+     * @param columns   column definitions
+     * @param tableData raw table data
+     * @returns {IColumnVisibilityState} column visibility state for not excluded columns
+     */
+    public static resolveVisibility<T>(columns:IColumnDefMap|undefined, tableData:Array<T>):IColumnVisibilityState
+    {
+        let visibilityState:IColumnVisibilityState = {};
+
+        if (!columns) {
+            return visibilityState;
+        }
+
+        _.each(_.keys(columns), function(key:string) {
+            let column:IEnhancedReactTableColumnDef = columns[key];
+
+            // every column is visible by default unless otherwise marked as hidden or excluded
+            let visibility:ColumnVisibility = "visible";
+
+            if (column.visible)
+            {
+                if (_.isFunction(column.visible)) {
+                    visibility = (column.visible as IColumnVisibilityFunction)(tableData, column.columnProps);
+                }
+                else {
+                    visibility = column.visible as ColumnVisibility;
+                }
+            }
+
+            // do not include "excluded" columns in the state, they will always remain hidden
+            // ones set initially to "hidden" can be toggled visible later on.
+            if (visibility !== "excluded")
+            {
+                visibilityState[key] = visibility;
+            }
+        });
+
+        return visibilityState;
+    }
+
+    public static columnSort(a:IEnhancedReactTableColumnDef, b:IEnhancedReactTableColumnDef):number
+    {
+        if (a.priority && b.priority) {
+            return a.priority - b.priority;
+        }
+        else if (a.priority) {
+            return -1;
+        }
+        else if (b.priority) {
+            return 1;
+        }
+        // sort alphabetically in case of no priority
+        else if (a.name > b.name) {
+            return 1;
+        }
+        else {
+            return -1;
+        }
+    }
+
+    // mapping of column name to column id
+    private colNameToId:{[key:string]: string};
+
+    private filteredDataLength:number;
+
+    private shouldSetState:boolean;
+
+    private rawDataSelector = (state:IEnhancedReactTableState, props:IEnhancedReactTableProps<T>) => props.rawData;
+
+    private columnsSelector = (state:IEnhancedReactTableState, props:IEnhancedReactTableProps<T>) => props.columns;
+
+    private columnVisibilitySelector = (state:IEnhancedReactTableState) => state.columnVisibility;
+
+    // visible columns depend on both column definitions and visibility
+    private visibleColsSelector = createSelector(this.columnsSelector, this.columnVisibilitySelector,
+        (columns:IColumnDefMap, columnVisibility:IColumnVisibilityState) => this.resolveVisible(columns, columnVisibility));
+
+    // sorted list of visible columns are required to calculate table header
+    private sortedVisibleColsSelector = createSelector(this.visibleColsSelector,
+        (visibleCols:IColumnDefMap)=>this.resolveOrder(visibleCols));
+
+    // sorted columns depend on column definition, but not on the visibility
+    private sortedColsSelector = createSelector(this.columnsSelector,
+        (columns:IColumnDefMap)=>this.resolveOrder(columns));
+
+    private columnVisibilityArraySelector = createSelector(this.sortedColsSelector, this.columnVisibilitySelector,
+         (sortedColumns:Array<IEnhancedReactTableColumnDef>, columnVisibility:IColumnVisibilityState) =>
+             this.resolveColumnVisibility(this.colNameToId, sortedColumns, columnVisibility));
+
+    private downloadDataSelector = createSelector(this.sortedColsSelector, this.columnVisibilitySelector, this.rawDataSelector,
+        (sortedCols:Array<IEnhancedReactTableColumnDef>, visibility:IColumnVisibilityState, rawData:Array<T>) =>
+            this.generateDownloadData(sortedCols, visibility, rawData));
+
+    // we need to calculate the header values every time the visibility or column definitions change
+    private headersSelector = createSelector(this.sortedVisibleColsSelector,
+        (sortedCols:Array<IEnhancedReactTableColumnDef>) => this.generateHeaders(sortedCols));
+
+    // no need to calculate column render values every time the visibility changes,
+    // we only need to do it when the column definitions change
+    // reactable is clever enough to not render the column if its header is missing
+    private rowsSelector = createSelector(this.sortedColsSelector, this.rawDataSelector,
+        (sortedCols:Array<IEnhancedReactTableColumnDef>, rawData:Array<T>) => this.generateRows(sortedCols, rawData));
+
+    constructor(props:IEnhancedReactTableProps<T>)
+    {
+        super(props);
+
+        this.colNameToId = this.mapColNameToId(props.columns);
+
+        this.state = {
+            columnVisibility: EnhancedReactTable.resolveVisibility(props.columns, props.rawData),
+            sortableColumns: this.resolveSortable(this.props.columns || {}),
+            filterableColumns: this.resolveFilterable(this.props.columns || {}),
+            filter: "",
+            itemsPerPage: this.props.initItemsPerPage || 25,
+            currentPage: this.props.initPage || 0
+        };
+
+        // Begin code designed to get around the fact that data filtering happens inside Table
+        // but we need that information to properly paginate.
+
+        // Monkey patch to get access to filtered data for pagination num pages calculation
+        this.filteredDataLength = props.rawData.length;
+        this.shouldSetState = false;
+
+        const setFilteredDataLength = (n:number) => {
+            if (n !== this.filteredDataLength) {
+                this.filteredDataLength = n;
+                this.shouldSetState = true;
+            }
+        };
+
+        const sendVisibleRows = (tableRenderResult:JSX.Element) => {
+            const tbodyElt = tableRenderResult.props.children.find((x:JSX.Element) => (x.type === "tbody"));
+            const visibleRows = tbodyElt.props.children || [];
+            if (this.props.onVisibleRowsChange)
+                this.props.onVisibleRowsChange(visibleRows.map((r:JSX.Element) => r.props.rowData));
+        };
+
+        const Table_applyFilter = Table.prototype.applyFilter;
+        Table.prototype.applyFilter = function(){
+            const result = Table_applyFilter.apply(this, arguments);
+            setFilteredDataLength(result.length);
+            return result;
+        };
+        const Table_render = Table.prototype.render;
+        Table.prototype.render = function() {
+            const result = Table_render.apply(this, arguments);
+            sendVisibleRows(result);
+            return result;
+        };
+        //
+
+        // binding "this" to handler functions
+        this.handleDownload = this.handleDownload.bind(this);
+        this.handleFilterInput = this.handleFilterInput.bind(this);
+        this.handleVisibilityToggle = this.handleVisibilityToggle.bind(this);
+        this.handleChangeItemsPerPage = this.handleChangeItemsPerPage.bind(this);
+        this.handlePreviousPageClick = this.handlePreviousPageClick.bind(this);
+        this.handleNextPageClick = this.handleNextPageClick.bind(this);
+    }
+
+    public render() {
+        let {
+            className,
+            reactTableProps,
+            headerControlsProps
+        } = this.props;
+
+        // always use the initially sorted columns (this.sortedColumns),
+        // otherwise already hidden columns will never appear in the dropdown menu!
+        let columnVisibility:Array<IColumnVisibilityDef> = this.columnVisibilityArraySelector(this.state, this.props);
+
+        // column headers: an array of Th components
+        const headers = this.headersSelector(this.state, this.props);
+
+        // table rows: an array of Tr components
+        const rows = this.rowsSelector(this.state, this.props);
+
+        const {firstIndex, numIndexes} = this.rowIndexesOnPage();
+
+
+        return(
+            <div className={className}>
+                <TableHeaderControls
+                    showCopyAndDownload={true}
+                    showHideShowColumnButton={true}
+                    handleInput={this.handleFilterInput}
+                    downloadDataGenerator={this.handleDownload}
+                    downloadDataContainsHeader={true}
+                    downloadFilename="mutations.csv"
+                    showSearch={true}
+                    columnVisibilityProps={{
+                        className: "pull-right",
+                        /*columnVisibility,*/
+                        onColumnToggled: this.handleVisibilityToggle
+                    }}
+                    paginationProps={{
+                        className: "pull-right",
+                        itemsPerPage:this.state.itemsPerPage,
+                        currentPage: this.state.currentPage,
+                        onChangeItemsPerPage: this.handleChangeItemsPerPage,
+                        onPreviousPageClick: this.handlePreviousPageClick,
+                        onNextPageClick: this.handleNextPageClick,
+                        textBetweenButtons: `${this.filteredDataLength ? (firstIndex+1) : 0}-${firstIndex+numIndexes} of ${this.filteredDataLength}`,
+                        previousPageDisabled: (this.state.currentPage === 0),
+                        nextPageDisabled: (this.state.currentPage >= this.numPages()-1)
+                    }}
+                    {...headerControlsProps}
+                />
+                <Table
+                    sortable={this.state.sortableColumns}
+                    filterable={this.state.filterableColumns}
+                    filterBy={this.state.filter}
+                    itemsPerPage={this.state.itemsPerPage === -1 ? undefined : this.state.itemsPerPage}
+                    currentPage={this.state.currentPage}
+                    {...reactTableProps}
+                >
+                    <Thead>
+                        {headers}
+                    </Thead>
+                    {rows}
+                </Table>
+            </div>
+        );
+    }
+
+    componentWillUpdate(nextProps:IEnhancedReactTableProps<T>, nextState:IEnhancedReactTableState) {
+        if (nextState.filter.length === 0) {
+            // Normally, the way we update this.filteredDataLength is when Table.applyFilter is
+            // called (see "monkey patching" of Table.prototype.applyFilter).
+            // But if the filter text is empty, Table.applyFilter is not called and the
+            // entire input data is used, so we have to manually catch and handle this case here
+            // to keep this.filteredDataLength up to date.
+            this.filteredDataLength = this.props.rawData.length;
+        }
+    }
+    componentDidUpdate() {
+        if (this.shouldSetState) {
+            this.shouldSetState = false;
+            this.setState({
+                currentPage: Math.max(0, Math.min(this.state.currentPage, this.numPages() - 1))
+            } as IEnhancedReactTableState);
+        }
+    }
+
+    private rowIndexesOnPage() {
+        let firstIndex:number;
+        let numIndexes:number;
+        if (this.state.itemsPerPage === -1) {
+            firstIndex = 0;
+            numIndexes = this.filteredDataLength;
+        } else {
+            firstIndex = this.state.itemsPerPage * this.state.currentPage;
+            numIndexes = Math.min(this.filteredDataLength - firstIndex, this.state.itemsPerPage);
+        }
+        return {firstIndex, numIndexes};
+    }
+
+    private numPages(itemsPerPage?:number) {
+        itemsPerPage = itemsPerPage || this.state.itemsPerPage;
+        if (itemsPerPage === -1) {
+            return 1;
+        } else {
+            return Math.ceil(this.filteredDataLength / itemsPerPage);
+        }
+    }
+
+    private mapColNameToId(columns:IColumnDefMap|undefined):{[key:string]: string}
+    {
+        let colNameToId:{[key:string]:string} = {};
+
+        if (columns)
+        {
+            _.each(columns, function(value:IEnhancedReactTableColumnDef, key:string) {
+                if (value.name) {
+                    if (colNameToId[value.name] != null) {
+                        // TODO console.log("[EnhancedReactTable] Warning: Duplicate column name: " + value.name);
+                    }
+                    colNameToId[value.name] = key;
+                }
+            });
+        }
+
+        return colNameToId;
+    }
+
+    /**
+     * Generate a list of column definitions sorted by priority.
+     *
+     * @param columns
+     * @returns {Array<IEnhancedReactTableColumnDef>}
+     */
+    private resolveOrder(columns:IColumnDefMap|undefined):Array<IEnhancedReactTableColumnDef>
+    {
+        if (columns) {
+            return _.values(columns).sort(EnhancedReactTable.columnSort);
+        }
+        else {
+            return [];
+        }
+    }
+
+    /**
+     * Resolves the IColumnVisibilityDef to be passed to the TableHeaderControls.
+     *
+     * @param colNameToId
+     * @param sortedCols
+     * @param columnVisibility
+     * @returns {Array<IColumnVisibilityDef>}
+     */
+    private resolveColumnVisibility(colNameToId:{[key:string]:string},
+                                    sortedCols:Array<IEnhancedReactTableColumnDef>,
+                                    columnVisibility: IColumnVisibilityState):Array<IColumnVisibilityDef>
+    {
+        let colVis:Array<IColumnVisibilityDef>  = [];
+
+        _.each(sortedCols, function(col:IEnhancedReactTableColumnDef) {
+            let id:string = colNameToId[col.name];
+
+            if (columnVisibility[id])
+            {
+                colVis.push({
+                    id,
+                    name: col.name,
+                    visibility: columnVisibility[id]
+                });
+            }
+        });
+
+        return colVis;
+    }
+
+    private generateHeaders(columns:Array<IEnhancedReactTableColumnDef>)
+    {
+        let headers:Array<any> = [];
+
+        _.each(columns, function(columnDef:IEnhancedReactTableColumnDef) {
+            // basic content (with no tooltip)
+            let headerContent = columnDef.header || (
+                <span>
+                    {columnDef.name}
+                </span>
+            );
+
+            // if description is provided, add a tooltip
+            if (columnDef.description)
+            {
+                const arrowContent = <div className="rc-tooltip-arrow-inner"/>;
+
+                headerContent = (
+                    <DefaultTooltip overlay={<span>{columnDef.description}</span>} placement="top" arrowContent={arrowContent}>
+                        {headerContent}
+                    </DefaultTooltip>
+                );
+            }
+
+            headers.push(
+                <Th key={columnDef.name} column={columnDef.name}>
+                    {headerContent}
+                </Th>
+            );
+        });
+
+        return headers;
+    }
+
+    private generateDownloadData(columns:Array<IEnhancedReactTableColumnDef>,
+                                 visibility:IColumnVisibilityState,
+                                 tableData:Array<T>)
+    {
+        const tableDownloadData:string[][] = [];
+
+        // add header
+        tableDownloadData[0] = [];
+        _.each(columns, (columnDef:IEnhancedReactTableColumnDef) => {
+            const colId = this.colNameToId[columnDef.name];
+
+            // don't include excluded columns
+            if (colId in visibility && visibility[colId] !== "excluded") {
+                tableDownloadData[0].push(columnDef.name);
+            }
+        });
+
+        // add rows
+        _.each(tableData, (rowData:T, index:number) => {
+            const rowDownloadData:string[] = [];
+
+            _.each(columns, (columnDef:IEnhancedReactTableColumnDef) => {
+                const colId = this.colNameToId[columnDef.name];
+
+                // include both visible and hidden columns, but not the excluded ones
+                if (colId in visibility && visibility[colId] !== "excluded") {
+                    const columnData = this.getColumnData(columnDef, tableData, rowData);
+
+                    if (columnDef.downloader) {
+                        rowDownloadData.push(columnDef.downloader(columnData, columnDef.columnProps));
+                    }
+                    else {
+                        rowDownloadData.push((columnData.columnData || "").toString());
+                    }
+                }
+            });
+
+            tableDownloadData.push(rowDownloadData);
+        });
+
+        return tableDownloadData;
+    }
+
+    private getColumnData(columnDef:IEnhancedReactTableColumnDef, tableData:Array<T>, rowData:T):IColumnFormatterData<T>
+    {
+        const data:IColumnFormatterData<T> = {
+            name: columnDef.name,
+            tableData,
+            rowData,
+            columnData: null
+        };
+
+        // get column data (may end up being undefined)
+        if (columnDef.columnDataFunction) {
+            data.columnData = columnDef.columnDataFunction(data);
+        }
+        else if (columnDef.dataField)
+        {
+            let instance:any = null;
+
+            // also taking into account that row data might be an array of instances
+            if (_.isArray(data.rowData) && data.rowData.length > 0) {
+                // In case row data is an array of instances, by default retrieving only the first
+                // element's data as the column data. For advanced combining of all elements' data,
+                // one needs to provide a custom columnData function.
+                instance = data.rowData[0];
+            }
+            else {
+                // assuming that rowData is a flat type instance
+                instance = data.rowData;
+            }
+
+            if (instance) {
+                data.columnData = instance[columnDef.dataField];
+            }
+        }
+
+        return data;
+    }
+
+    private generateRows(columns:Array<IEnhancedReactTableColumnDef>, tableData:Array<T>)
+    {
+        const rows:Array<any> = [];
+
+        _.each(tableData, (rowData:T, index:number) => {
+            // columns for this row: an array of Td elements
+            const cols = this.generateColumns(columns, tableData, rowData);
+
+            rows.push(
+                <Tr key={index} rowData={rowData}>
+                    {cols}
+                </Tr>
+            );
+        });
+
+        return rows;
+    }
+
+    private generateColumns(columns:Array<IEnhancedReactTableColumnDef>, tableData:Array<T>, rowData:T)
+    {
+        const cols:Array<any> = [];
+
+        _.each(columns, (columnDef:IEnhancedReactTableColumnDef) => {
+            const columnData = this.getColumnData(columnDef, tableData, rowData);
+            cols.push(this.generateColumn(columnData, columnDef));
+        });
+
+        return cols;
+    }
+
+    private generateColumn(data:IColumnFormatterData<T>, columnDef:IEnhancedReactTableColumnDef)
+    {
+        if (columnDef.formatter)
+        {
+            return columnDef.formatter(data, columnDef.columnProps);
+        }
+        else
+        {
+            return (
+                <Td key={columnDef.name} column={columnDef.name} value={data.columnData}>
+                    {data.columnData}
+                </Td>
+            );
+        }
+    }
+
+    private resolveVisible(columns:IColumnDefMap, visibility:IColumnVisibilityState):IColumnDefMap
+    {
+        let visibleCols:IColumnDefMap = {};
+
+        _.each(_.keys(visibility), function(key:string) {
+            if (visibility[key] === "visible") {
+                visibleCols[key] = columns[key];
+            }
+        });
+
+        return visibleCols;
+    }
+
+    private resolveSortable(columns:IColumnDefMap):Array<string|IColumnSort>
+    {
+        let sortable:Array<string|IColumnSort> = [];
+
+        _.each(columns, function(column:IEnhancedReactTableColumnDef) {
+            if (_.isFunction(column.sortable)) {
+                sortable.push({
+                    column: column.name,
+                    sortFunction: column.sortable as IColumnSortFunction
+                });
+            }
+            else if (column.sortable) {
+                sortable.push(column.name);
+            }
+        });
+
+        return sortable;
+    }
+
+    private resolveFilterable(columns:IColumnDefMap):Array<string|IColumnFilter>
+    {
+        let filterable:Array<string|IColumnFilter> = [];
+
+        _.each(columns, function(column:IEnhancedReactTableColumnDef) {
+            if (_.isFunction(column.filterable)) {
+                filterable.push({
+                    column: column.name,
+                    filterFunction: column.filterable as IColumnFilterFunction
+                });
+            }
+            else if (column.filterable) {
+                filterable.push(column.name);
+            }
+        });
+
+        return filterable;
+    }
+
+    private handleFilterInput(filter: string):void
+    {
+        this.setState({
+            filter
+        } as IEnhancedReactTableState);
+    }
+
+    private handleDownload():string[][]
+    {
+        return this.downloadDataSelector(this.state, this.props);
+    }
+
+    private handleVisibilityToggle(columnId: String):void
+    {
+        const key:string = columnId as string;
+
+        let visibility:ColumnVisibility = this.state.columnVisibility[key];
+        const columnVisibility:IColumnVisibilityState = {...this.state.columnVisibility};
+
+        if (visibility === "hidden") {
+            visibility = "visible";
+        }
+        else if (visibility === "visible") {
+            visibility = "hidden";
+        }
+
+        columnVisibility[key] = visibility;
+
+        this.setState({
+            columnVisibility
+        } as IEnhancedReactTableState);
+    }
+
+    private handleChangeItemsPerPage(itemsPerPage:number) {
+        this.setState({
+            itemsPerPage,
+            currentPage: Math.min(this.state.currentPage, this.numPages(itemsPerPage)-1)
+        } as IEnhancedReactTableState);
+    }
+
+    private handlePreviousPageClick() {
+        this.setState({
+            currentPage: Math.max(0, this.state.currentPage - 1)
+        } as IEnhancedReactTableState);
+    }
+
+    private handleNextPageClick() {
+        this.setState({
+            currentPage: Math.min(this.state.currentPage + 1, this.numPages() - 1)
+        } as IEnhancedReactTableState);
+    }
+};
diff --git a/src/shared/components/enhancedReactTable/IColumnFormatter.spec.tsx b/src/shared/components/enhancedReactTable/IColumnFormatter.spec.tsx
new file mode 100644
index 00000000000..7e7c0ed4f4e
--- /dev/null
+++ b/src/shared/components/enhancedReactTable/IColumnFormatter.spec.tsx
@@ -0,0 +1,21 @@
+import * as IColumnFormatter from './IColumnFormatter';
+import React from 'react';
+import { assert } from 'chai';
+import { shallow, mount } from 'enzyme';
+import sinon from 'sinon';
+
+describe('IColumnFormatter', () => {
+
+    before(()=>{
+
+    });
+
+    after(()=>{
+
+    });
+
+    it('what does it do?', ()=>{
+
+    });
+
+});
diff --git a/src/shared/components/enhancedReactTable/IColumnFormatter.ts b/src/shared/components/enhancedReactTable/IColumnFormatter.ts
new file mode 100644
index 00000000000..405bda5d061
--- /dev/null
+++ b/src/shared/components/enhancedReactTable/IColumnFormatter.ts
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+/**
+ * @author Selcuk Onur Sumer
+ */
+
+export interface IColumnFormatterData<T> {
+    name:string; // column name
+    tableData?:Array<T>; // entire table data (array of instances)
+    rowData?:T; // single instance representing the row data
+    columnData?:any; // column specific data
+}
+
+export interface IColumnSortFunction {
+    (a:any, b:any):number;
+}
+
+export interface IColumnFilterFunction {
+    (contents:string, filter:string):boolean;
+}
+
+export interface IColumnRenderFunction {
+    <T>(data:IColumnFormatterData<T>, columnProps?:any):any; // TODO this should return Reactable.Td!
+}
+
+export interface IColumnDownloadFunction {
+    <T>(data:IColumnFormatterData<T>, columnProps?:any):string;
+}
+
+export interface IColumnVisibilityFunction {
+    <T>(tableData:Array<T>, columnProps?:any):ColumnVisibility;
+}
+
+export interface IColumnDataFunction {
+    <T>(data:IColumnFormatterData<T>):any
+}
+
+export type ColumnVisibility = "visible" | "hidden" | "excluded";
diff --git a/src/shared/components/enhancedReactTable/IEnhancedReactTableProps.spec.tsx b/src/shared/components/enhancedReactTable/IEnhancedReactTableProps.spec.tsx
new file mode 100644
index 00000000000..7f97aca39b7
--- /dev/null
+++ b/src/shared/components/enhancedReactTable/IEnhancedReactTableProps.spec.tsx
@@ -0,0 +1,21 @@
+import * as IEnhancedReactTableProps from './IEnhancedReactTableProps';
+import React from 'react';
+import { assert } from 'chai';
+import { shallow, mount } from 'enzyme';
+import sinon from 'sinon';
+
+describe('IEnhancedReactTableProps', () => {
+
+    before(()=>{
+
+    });
+
+    after(()=>{
+
+    });
+
+    it('what does it do?', ()=>{
+
+    });
+
+});
diff --git a/src/shared/components/enhancedReactTable/IEnhancedReactTableProps.ts b/src/shared/components/enhancedReactTable/IEnhancedReactTableProps.ts
new file mode 100644
index 00000000000..869f1f74d71
--- /dev/null
+++ b/src/shared/components/enhancedReactTable/IEnhancedReactTableProps.ts
@@ -0,0 +1,71 @@
+import {
+    IColumnRenderFunction, IColumnSortFunction, IColumnFilterFunction, IColumnVisibilityFunction, ColumnVisibility,
+    IColumnDataFunction, IColumnDownloadFunction
+} from "./IColumnFormatter";
+import {ITableHeaderControlsProps} from "../tableHeaderControls/TableHeaderControls";
+import {TableProps} from "reactable";
+
+/**
+ * @author Selcuk Onur Sumer
+ */
+export interface IEnhancedReactTableProps<T> {
+    className?: string; // className for outer div
+    reactTableProps?: TableProps; // any available reactable props
+    headerControlsProps?: ITableHeaderControlsProps;
+    columns?: IColumnDefMap; // column definitions (including component renderers)
+    rawData: Array<T>; // raw data
+    initItemsPerPage?: number; // initial number of items per page
+    initPage?:number; // initial page
+    itemsName?:string; // name of items, e.g. "mutations"
+    onVisibleRowsChange?:(data:T[]) => void; // executed whenever the visible rows change (sorting or paginating), argument is the row data of visible rows, in order
+}
+
+export interface IEnhancedReactTableState {
+    columnVisibility: IColumnVisibilityState;
+    sortableColumns:Array<string|IColumnSort>;
+    filterableColumns:Array<string|IColumnFilter>;
+    filter: string;
+    itemsPerPage:number;
+    currentPage:number;
+}
+
+export interface IColumnDefMap {
+    [key: string]: IEnhancedReactTableColumnDef;
+}
+
+export interface IColumnVisibilityState {
+    [key: string]: ColumnVisibility;
+}
+
+export interface IColumnVisibilityDef {
+    id: string;
+    name: string;
+    visibility: ColumnVisibility;
+}
+
+export interface IEnhancedReactTableColumnDef {
+    name: string; // display name for the column header
+    header?: React.ReactChild;
+    description?: string | JSX.Element; // column description (used as a column header tooltip value)
+    formatter?: IColumnRenderFunction; // actual renderer function
+    downloader?: IColumnDownloadFunction; // function to determine the download value
+    sortable?: IColumnSortFunction | boolean; // boolean indicator, or a custom sort function
+    filterable?: IColumnFilterFunction | boolean; // boolean indicator, or a custom filter function
+    visible?: IColumnVisibilityFunction | ColumnVisibility; // visibility value, or visibility function
+    priority?: number; // column priority (used for column ordering)
+    columnProps?: any; // any additional column props (passed as argument to the formatter)
+    dataField?: string; // data field to retrieve display data used for sorting (in case no formatter provided, otherwise ignored)
+    columnDataFunction?:IColumnDataFunction; // column data function to retrieve display data (in case no formatter provided)
+}
+
+export type IColumnSort = {
+    column: string;
+    sortFunction: IColumnSortFunction;
+};
+
+export type IColumnFilter = {
+    column: string;
+    filterFunction: IColumnFilterFunction;
+};
+
+export default IEnhancedReactTableProps;
diff --git a/src/shared/components/enhancedReactTable/styles.css b/src/shared/components/enhancedReactTable/styles.css
new file mode 100644
index 00000000000..a4032ee4bd3
--- /dev/null
+++ b/src/shared/components/enhancedReactTable/styles.css
@@ -0,0 +1,3 @@
+.reactable-pagination {
+    display: none; /* hide the reactable library pagination interface, we have our own */
+}
\ No newline at end of file

From 5e7da1127d1e53e0ea27be8cf87136fe378e8716 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 13 Apr 2017 13:30:22 -0400
Subject: [PATCH 125/133] Fix gene validation upper/lower case issue

---
 src/shared/components/query/QueryStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/query/QueryStore.ts b/src/shared/components/query/QueryStore.ts
index 4d34e6d0a01..1e64e974413 100644
--- a/src/shared/components/query/QueryStore.ts
+++ b/src/shared/components/query/QueryStore.ts
@@ -585,7 +585,7 @@ export class QueryStore
 		try
 		{
 			return {
-				query: this.geneQuery && oql_parser.parse(this.geneQuery) || [],
+				query: this.geneQuery && oql_parser.parse(this.geneQuery.toUpperCase()) || [],
 				error: undefined
 			};
 		}

From 6d8bdb2247a07fecf7b1e8026e6009fdeea81d9b Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 13 Apr 2017 15:57:28 -0400
Subject: [PATCH 126/133] Fix .cta global style selector

---
 src/globalStyles/global.scss | 47 +++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/globalStyles/global.scss b/src/globalStyles/global.scss
index 10069d8d59e..866707fbb3f 100755
--- a/src/globalStyles/global.scss
+++ b/src/globalStyles/global.scss
@@ -22,32 +22,29 @@ body {
 }
 
   /* Buttons */
-.cbioportal-frontend {
-
-  .cta { // "Call To Action"
-    background: linear-gradient(to bottom, #1f8cc5 50%, #1982b8 100%);
-    border: 0;
-    border-bottom: 1px solid rgba(0,0,0,0.2);
-    border-radius: 2px;
-    color: rgba(255, 255, 255, 1);
-    display: block;
-    text-align: center;
-    font: normal normal 500 11px/19px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    padding: 5px 10px;
-
-    &:hover:not(:disabled) {
-      cursor: pointer;
-      background: linear-gradient(to bottom, #1982b8 50%, #1f8cc5 100%);
-      color: #fff;
-    }
-    &:disabled {
-      cursor: default;
-      background: $lightGrey;
-      border-bottom: 0;
-      color: $darkGrey;
-    }
+
+.cta { // "Call To Action"
+  background: linear-gradient(to bottom, #1f8cc5 50%, #1982b8 100%);
+  border: 0;
+  border-bottom: 1px solid rgba(0,0,0,0.2);
+  border-radius: 2px;
+  color: rgba(255, 255, 255, 1);
+  display: block;
+  text-align: center;
+  font: normal normal 500 11px/19px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  padding: 5px 10px;
+
+  &:hover:not(:disabled) {
+    cursor: pointer;
+    background: linear-gradient(to bottom, #1982b8 50%, #1f8cc5 100%);
+    color: #fff;
+  }
+  &:disabled {
+    cursor: default;
+    background: $lightGrey;
+    border-bottom: 0;
+    color: $darkGrey;
   }
-  
 }
 
 .topBanner {

From 382c7b328fb17d6e5e44927aab9bf4be5df25456 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 13 Apr 2017 16:05:47 -0400
Subject: [PATCH 127/133] Clean up homepage scss

---
 src/pages/home/styles.module.scss | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/pages/home/styles.module.scss b/src/pages/home/styles.module.scss
index 7dc2fc27bd1..b6720ba9102 100644
--- a/src/pages/home/styles.module.scss
+++ b/src/pages/home/styles.module.scss
@@ -1,13 +1,3 @@
-// Setting HTML & BODY height to 100% allows fitting the page content to the size of the browser
-// rather than using fixed heights and forcing the user to scroll.
-html.rootHtml {
-  height: 100%;
-
-  body,:global(#reactRoot),:global(#reactRoot)>div,:global(#reactRoot)>div>div,:global(#reactRoot)>div>div>div {
-    height: 100%;
-  }
+.HomePage {
+  padding: 10px;
 }
-
-HomePage {
-  height: 100%;
-}
\ No newline at end of file

From 34ec7dbc3063a133d562800768a82de3f4048d55 Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Thu, 23 Mar 2017 17:22:27 -0400
Subject: [PATCH 128/133] Background and borders

---
 src/shared/components/query/styles.module.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 92020cbb2ce..0892995f6fa 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -7,6 +7,7 @@
   }
 
   :global(ul.nav.nav-tabs li.active a) {
+    background: #fcfcfc;
     border-top: 2px solid #1982b8;
     color: #333;
     font-weight: 500;
@@ -28,6 +29,7 @@
   }
 
   .QueryContainer {
+    background: #fcfcfc;
     border: 1px solid #ddd;
     border-top: none;
     padding: 10px;
@@ -64,13 +66,16 @@
   }
 }
 
+.CancerStudySelector,
 .GeneticProfileSelector,
 .DataTypePrioritySelector,
 .CaseSetSelector,
 .GeneSetSelector {
+  background: #fff;
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 2px;
+  box-shadow: 0 0 1px #e9e9e9;
 }
 
 .CancerStudySelector {
@@ -78,6 +83,7 @@
   overflow: hidden;
   user-select: none;
   height: 305px;
+  padding: 0px;
 
   label {
     display: flex;
@@ -89,8 +95,6 @@
   }
 
   .cancerStudySelectorHeader {
-    background-color: #1982b8;
-    border-bottom: 1px solid rgb(17, 116, 167);
     padding: 10px;
     margin: 8px 0 0 0;
     display: flex;
@@ -167,7 +171,6 @@
   }
 
   div.cancerStudySelectorBody {
-    border: 1px solid #ddd;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px;
     flex: 1;

From 4c22fd977ebcfc6c769fd0b5fc157365b740b1ab Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 14 Apr 2017 10:44:15 -0400
Subject: [PATCH 129/133] Containers

---
 .../components/query/styles.module.scss       | 46 +++++++------------
 1 file changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index 0892995f6fa..c69a1dfe661 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -14,7 +14,8 @@
   }
 
   :global(ul.nav.nav-tabs li a) {
-    border-top: 2px solid #fff;
+    background: $lightGrey;
+    border-top: 2px solid #eee;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
     color: $darkGrey;
@@ -25,7 +26,7 @@
   }  
 
   :global(ul.nav.nav-tabs li:not(.active) a:hover) {
-    border-top: 2px solid #eee;
+    color: #333;
   }
 
   .QueryContainer {
@@ -83,7 +84,7 @@
   overflow: hidden;
   user-select: none;
   height: 305px;
-  padding: 0px;
+  padding: 10px 0 0 0;
 
   label {
     display: flex;
@@ -94,43 +95,28 @@
     cursor: pointer;
   }
 
+  h2 {
+    padding: 0 0 0 10px;
+  }
+
   .cancerStudySelectorHeader {
+    border-bottom: 1px solid $mediumGrey;
+    height: 50px !important;
     padding: 10px;
-    margin: 8px 0 0 0;
     display: flex;
     justify-content: space-between;
 
-    :global(.Select-control),
-    :global(.Select-control:hover) {
-      background: rgba(0, 0, 0, 0.1) !important;
-      border: 0px !important;
-      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1) !important;
-      border-radius: 2px !important;
-      color: rgba(255, 255, 255, 0.85) !important;
-      height: 30px !important;
-      font-weight: 300;
-
-      :global(.Select-input) {
-        height: 30px;
-        font-weight: 300;
-      }
+    :global(.Select-control) {
+      height: 28px;
     }
 
-    :global(.Select-placeholder),
-    :global(.Select-clear-zone),
-    :global(.has-value.Select--single) > :global(.Select-control .Select-value .Select-value-label),
-    :global(.has-value.is-pseudo-focused.Select--single) > :global(.Select-control .Select-value .Select-value-label) {
-      color: rgba(255, 255, 255, 0.85) !important;
-      font-weight: 300;
+    :global(.Select-input) {
+      height: 38px;
     }
 
     :global(.Select-placeholder),
     :global(.Select--single) > :global(.Select-control .Select-value) {
-      line-height: 30px !important;
-    }
-
-    :global(.Select-arrow) {
-      border-color: rgba(255, 255, 255, 0.85) transparent transparent !important;
+      line-height: 28px !important;
     }
   }
 
@@ -263,7 +249,7 @@
   }
 
   .searchTextInput {
-    min-width: 200px;
+    min-width: 220px;
     height: 28px;
 
     :global(.Select-control) {

From 3a4e77ad100becf5220ce74151ccc340c815fbae Mon Sep 17 00:00:00 2001
From: Brittany Storoz <brittanystoroz@gmail.com>
Date: Fri, 14 Apr 2017 11:41:38 -0400
Subject: [PATCH 130/133] Consistent error styling and margins

---
 src/shared/components/errorBox/ErrorBox.tsx   |  2 +-
 .../components/errorBox/styles.module.scss    | 20 +++++++++----------
 .../components/query/styles.module.scss       |  6 +++++-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/shared/components/errorBox/ErrorBox.tsx b/src/shared/components/errorBox/ErrorBox.tsx
index a3c840d2a9b..fec9769565b 100644
--- a/src/shared/components/errorBox/ErrorBox.tsx
+++ b/src/shared/components/errorBox/ErrorBox.tsx
@@ -22,7 +22,7 @@ export default class ErrorBox extends React.Component<ISectionHeaderProps, void>
 		return (
 			<div className={classNames(className, styles.error)} {...divProps}>
 				<span className={styles.message}>
-					<FontAwesome className={styles.icon} name='exclamation-triangle'/>
+					<FontAwesome className={styles.icon} name='exclamation-circle'/>
 					{error + ''}
 				</span>
 				{children}
diff --git a/src/shared/components/errorBox/styles.module.scss b/src/shared/components/errorBox/styles.module.scss
index 1ffe6e1a4d2..f21646f4a7c 100644
--- a/src/shared/components/errorBox/styles.module.scss
+++ b/src/shared/components/errorBox/styles.module.scss
@@ -1,15 +1,15 @@
 .error {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px;
-  border-radius: 4px;
-  border: 1px solid #cd0a0a;
-  background: #fef1ec;
-  color: #cd0a0a;
+  color: #fff;
+  display: inline-block;
+  margin: 2px 2px 2px 0;
+  padding: 5px 10px;
+  border-radius: 2px;
+  background: $redError;
 
-  .icon {
-    margin-right: 5px;
+  span.icon {
+    color: #fff;
+    line-height: 17px;
+    margin: 0 5px 0 0;
   }
 
   .message {
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index c69a1dfe661..cb13239b47f 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -324,6 +324,10 @@
     padding: 5px;
   }
   .radioRow {
+    div {
+      padding: 0 0 0 2px;
+    }
+    
     :global(.spinner) {
       float: right;
     }
@@ -385,7 +389,7 @@
     font-size: small;
   }
   div.validBubble,
-  div.invalidBubble {
+  div.invalidBubble, {
     color: #fff;
     display: flex;
     align-items: center;

From e02c479a33ed1b92f0a10e8f8d66d90ddb2e56c5 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Thu, 20 Apr 2017 15:52:23 -0400
Subject: [PATCH 131/133] Remove temporary hacks

---
 .../components/query/CancerStudySelector.tsx  | 12 ++------
 src/shared/components/query/StudyListLogic.ts | 28 +------------------
 .../components/query/studyList/StudyList.tsx  | 16 +++++------
 3 files changed, 12 insertions(+), 44 deletions(-)

diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 2d77c9c6a26..83a00ae7040 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -72,12 +72,10 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 
 	renderCancerTypeList()
 	{
-		let rootMeta = this.logic.getMetadata(this.store.treeData.rootCancerType);
-		let listItems = rootMeta && rootMeta.childCancerTypes.map(this.renderCancerTypeListItem);
-
+		let cancerTypes = this.logic.cancerTypeListView.getChildCancerTypes(this.store.treeData.rootCancerType);
 		return (
 			<ul className={styles.cancerTypeList}>
-				{listItems}
+				{cancerTypes.map(this.renderCancerTypeListItem)}
 			</ul>
 		);
 	}
@@ -85,10 +83,6 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 	renderCancerTypeListItem = (cancerType:CancerType, arrayIndex:number) =>
 	{
 		let numStudies = this.logic.cancerTypeListView.getDescendantCancerStudies(cancerType).length;
-
-		if (!numStudies)
-			return null;
-
 		let selected = _.includes(this.store.selectedCancerTypeIds, cancerType.cancerTypeId);
 		let highlighted = this.logic.isHighlighted(cancerType);
 		let liClassName = classNames({
@@ -187,7 +181,7 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 						}}
 					/>
 					{!!(!this.store.forDownloadTab) && (
-						<span className={classNames('cta', styles.selectAll)} onClick={() => this.logic.mainView.hack_handleSelectAll(!selectAllCheckboxProps.checked)}>
+						<span className={classNames('cta', styles.selectAll)} onClick={() => this.logic.mainView.onCheck(this.store.treeData.rootCancerType, !selectAllCheckboxProps.checked)}>
 							{selectAllCheckboxProps.checked ? "Deselect all" : "Select all"}
 						</span>
 					)}
diff --git a/src/shared/components/query/StudyListLogic.ts b/src/shared/components/query/StudyListLogic.ts
index 31052e4c89e..8480d598f26 100644
--- a/src/shared/components/query/StudyListLogic.ts
+++ b/src/shared/components/query/StudyListLogic.ts
@@ -58,7 +58,7 @@ export default class StudyListLogic
 			map_node_filter.set(node, filter);
 
 			// include ancestors of matching studies
-			if (!meta.isCancerType)
+			if (filter && !meta.isCancerType)
 				for (let cancerTypes of [meta.ancestors, meta.priorityCategories])
 					for (let cancerType of cancerTypes)
 						map_node_filter.set(cancerType, true);
@@ -201,21 +201,10 @@ export class FilteredCancerTreeView
 
 	getDescendantCancerStudies(node:CancerTreeNode):CancerStudy[]
 	{
-		if (node === this.store.treeData.rootCancerType)
-			return this.hack_getAllStudies();
-
 		let meta = this.getMetadata(node);
 		return meta.descendantStudies.filter(this.nodeFilter);
 	}
 
-	hack_getAllStudies()
-	{
-		return _.union(...(
-			this.getChildCancerTypes(this.store.treeData.rootCancerType)
-				.map(cancerType => this.getDescendantCancerStudies(cancerType))
-		));
-	}
-
 	getCheckboxProps(node: CancerTreeNode): {checked: boolean, indeterminate?: boolean}
 	{
 		let meta = this.getMetadata(node);
@@ -267,19 +256,4 @@ export class FilteredCancerTreeView
 
 		this.store.selectedStudyIds = selectedStudyIds;
 	}
-
-	@action hack_handleSelectAll(checked:boolean)
-	{
-		let selectedStudyIds = this.store.selectedStudyIds;
-		let clickedStudyIds = this.hack_getAllStudies().map(study => study.studyId);
-		if (checked)
-			selectedStudyIds = _.union(selectedStudyIds, clickedStudyIds);
-		else
-			selectedStudyIds = _.difference(selectedStudyIds, clickedStudyIds);
-
-		this.store.selectedStudyIds = selectedStudyIds;
-
-		if (!this.store.selectedStudyIds.length)
-			this.store.showSelectedStudiesOnly = false;
-	}
 }
diff --git a/src/shared/components/query/studyList/StudyList.tsx b/src/shared/components/query/studyList/StudyList.tsx
index d27af6ffebc..556bc5cdfe5 100644
--- a/src/shared/components/query/studyList/StudyList.tsx
+++ b/src/shared/components/query/studyList/StudyList.tsx
@@ -76,12 +76,18 @@ export default class StudyList extends QueryStoreComponent<IStudyListProps, void
 						Selected Studies 
 						<span 
 							className={styles.closeSelected}
-							onClick={() => this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly}
+							onClick={() => this.store.showSelectedStudiesOnly = false}
 						>
 							Return to Study Selector
 						</span>
 				</h4>
-				<span className={styles.deselectAll} onClick={() => this.view.hack_handleSelectAll(false)}>
+				<span
+					className={styles.deselectAll}
+					onClick={() => {
+						this.view.onCheck(this.store.treeData.rootCancerType, false);
+						this.store.showSelectedStudiesOnly = false;
+					}}
+				>
 					Deselect all
 				</span>
 				<ul className={styles.StudyList}>
@@ -93,12 +99,6 @@ export default class StudyList extends QueryStoreComponent<IStudyListProps, void
 
 	renderCancerType = (cancerType:CancerType, arrayIndex:number = 0):JSX.Element | null =>
 	{
-		// BEGIN TEMP HACK
-		let descendantStudies = this.view.getDescendantCancerStudies(cancerType);
-		if (!descendantStudies.length)
-			return null;
-		// END TEMP HACK
-
 		let currentLevel = this.logic.getDepth(cancerType);
 		let childCancerTypes = this.view.getChildCancerTypes(cancerType);
 		let childStudies = this.view.getChildCancerStudies(cancerType);

From a171a9861d828294083d020d12787b30ec0b7009 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Fri, 21 Apr 2017 15:59:59 -0400
Subject: [PATCH 132/133] Fix performance issue in cancer study selector

---
 .../components/query/CancerStudySelector.tsx  | 142 +++++++++---------
 .../components/query/studyList/StudyList.tsx  |  48 ++++--
 2 files changed, 103 insertions(+), 87 deletions(-)

diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 83a00ae7040..43e43e3f32f 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -5,14 +5,13 @@ import {TypeOfCancer as CancerType, CancerStudy} from "../../api/generated/CBioP
 import {FlexCol, FlexRow} from "../flexbox/FlexBox";
 import * as styles_any from './styles.module.scss';
 import classNames from 'classnames';
-import LabeledCheckbox from "../labeledCheckbox/LabeledCheckbox";
 import ReactSelect from 'react-select';
 import StudyList from "./studyList/StudyList";
-import {observer} from "mobx-react";
+import {observer, Observer} from "mobx-react";
+import {expr} from 'mobx';
 import memoize from "memoize-weak-decorator";
 import {QueryStoreComponent} from "./QueryStore";
 import SectionHeader from "../sectionHeader/SectionHeader";
-import StudyListLogic from "./StudyListLogic";
 
 const styles = styles_any as {
 	CancerStudySelector: string,
@@ -70,19 +69,19 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 			this.store.selectedStudyIds = _.difference(this.store.selectedStudyIds, clickedStudyIds);
 	}
 
-	renderCancerTypeList()
-	{
+	CancerTypeList = observer(() => {
 		let cancerTypes = this.logic.cancerTypeListView.getChildCancerTypes(this.store.treeData.rootCancerType);
 		return (
 			<ul className={styles.cancerTypeList}>
-				{cancerTypes.map(this.renderCancerTypeListItem)}
+				{cancerTypes.map((cancerType, arrayIndex) => (
+					<this.CancerTypeListItem key={arrayIndex} cancerType={cancerType}/>
+				))}
 			</ul>
 		);
-	}
+	});
 
-	renderCancerTypeListItem = (cancerType:CancerType, arrayIndex:number) =>
-	{
-		let numStudies = this.logic.cancerTypeListView.getDescendantCancerStudies(cancerType).length;
+	CancerTypeListItem = observer(({cancerType}: {cancerType:CancerType}) => {
+		let numStudies = expr(() => this.logic.cancerTypeListView.getDescendantCancerStudies(cancerType).length);
 		let selected = _.includes(this.store.selectedCancerTypeIds, cancerType.cancerTypeId);
 		let highlighted = this.logic.isHighlighted(cancerType);
 		let liClassName = classNames({
@@ -91,12 +90,11 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 			[styles.selected]: selected,
 			[styles.matchingNodeText]: !!this.store.searchText && highlighted,
 			[styles.nonMatchingNodeText]: !!this.store.searchText && !highlighted,
-			[styles.containsSelectedStudies]: this.logic.cancerTypeContainsSelectedStudies(cancerType),
+			[styles.containsSelectedStudies]: expr(() => this.logic.cancerTypeContainsSelectedStudies(cancerType)),
 		});
 
 		return (
 			<li
-				key={arrayIndex}
 				className={liClassName}
 				onMouseDown={this.getCancerTypeListClickHandler(cancerType)}
 			>
@@ -108,88 +106,84 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 				</span>
 			</li>
 		);
-	}
-
-	renderStudyHeaderCheckbox = (shownStudies:CancerStudy[]) =>
-	{
-		let selectedStudies = this.store.selectedStudyIds.map(studyId => this.store.treeData.map_studyId_cancerStudy.get(studyId) as CancerStudy);
-		let shownAndSelectedStudies = _.intersection(shownStudies, selectedStudies);
-		let checked = shownAndSelectedStudies.length > 0;
-		let indeterminate = checked && shownAndSelectedStudies.length != shownStudies.length;
-		return (
-			<LabeledCheckbox
-				checked={checked}
-				indeterminate={indeterminate}
-				labelProps={{
-					onClick: (event:React.MouseEvent<HTMLLabelElement>) => event.stopPropagation()
-				}}
-				onChange={event => {
-					let shownStudyIds = shownStudies.map(study => study.studyId);
-					this.handleStudiesCheckbox(event, shownStudyIds);
-				}}
-			/>
-		);
-	}
+	});
 
 	render()
 	{
-		let searchTextOptions = this.store.searchTextPresets;
-		if (this.store.searchText && searchTextOptions.indexOf(this.store.searchText) < 0)
-			searchTextOptions = [this.store.searchText].concat(searchTextOptions as string[]);
-
-		let selectAllCheckboxProps = this.logic.mainView.getCheckboxProps(this.store.treeData.rootCancerType);
-
-		let selectedCountClass = classNames({
-			[styles.selectedCount]: true,
-			[styles.selectionsExist]: this.store.selectedStudyIds.length > 0
-		});
-
 		return (
 			<FlexCol overflow className={styles.CancerStudySelector}>
 				<SectionHeader promises={[this.store.cancerTypes, this.store.cancerStudies]}>
 					Select Studies:
 					{!!(!this.store.cancerTypes.isPending && !this.store.cancerStudies.isPending) && (
-						<span
-							className={selectedCountClass}
-							onClick={() => {
-								if (this.store.selectedStudyIds.length)
-									this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly;
+						<Observer>
+							{() => {
+								let numSelectedStudies = expr(() => this.store.selectedStudyIds.length);
+								let selectedCountClass = classNames({
+									[styles.selectedCount]: true,
+									[styles.selectionsExist]: numSelectedStudies > 0
+								});
+								return (
+									<span
+										className={selectedCountClass}
+										onClick={() => {
+											if (numSelectedStudies)
+												this.store.showSelectedStudiesOnly = !this.store.showSelectedStudiesOnly;
+										}}
+									>
+										<b>{numSelectedStudies}</b> studies selected
+										(<b>{this.store.selectedStudies_totalSampleCount}</b> samples)
+									</span>
+								);
 							}}
-						>
-							<b>{this.store.selectedStudyIds.length}</b> studies selected
-							(<b>{this.store.selectedStudies_totalSampleCount}</b> samples)
-						</span>
+						</Observer>
 					)}
 				</SectionHeader>
 
 				<FlexRow overflow className={styles.cancerStudySelectorHeader}>
-					<ReactSelect
-						className={styles.searchTextInput}
-						value={this.store.searchText}
-						autofocus={true}
-						options={searchTextOptions.map(str => ({label: str, value: str}))}
-						placeholder='Search...'
-						noResultsText={false}
-						onCloseResetsInput={false}
-						onInputChange={(searchText:string) => {
-							this.store.searchText = searchText;
-							this.store.selectedCancerTypeIds = [];
-						}}
-						onChange={option => {
-							this.store.searchText = option ? option.value || '' : '';
-							this.store.selectedCancerTypeIds = [];
+					<Observer>
+						{() => {
+							let searchTextOptions = this.store.searchTextPresets;
+							if (this.store.searchText && searchTextOptions.indexOf(this.store.searchText) < 0)
+								searchTextOptions = [this.store.searchText].concat(searchTextOptions as string[]);
+
+							return (
+								<ReactSelect
+									className={styles.searchTextInput}
+									value={this.store.searchText}
+									autofocus={true}
+									options={searchTextOptions.map(str => ({label: str, value: str}))}
+									placeholder='Search...'
+									noResultsText={false}
+									onCloseResetsInput={false}
+									onInputChange={(searchText:string) => {
+										this.store.searchText = searchText;
+										this.store.selectedCancerTypeIds = [];
+									}}
+									onChange={option => {
+										this.store.searchText = option ? option.value || '' : '';
+										this.store.selectedCancerTypeIds = [];
+									}}
+								/>
+							);
 						}}
-					/>
+					</Observer>
 					{!!(!this.store.forDownloadTab) && (
-						<span className={classNames('cta', styles.selectAll)} onClick={() => this.logic.mainView.onCheck(this.store.treeData.rootCancerType, !selectAllCheckboxProps.checked)}>
-							{selectAllCheckboxProps.checked ? "Deselect all" : "Select all"}
-						</span>
+						<Observer>
+							{() => {
+								let selectAllChecked = expr(() => this.logic.mainView.getCheckboxProps(this.store.treeData.rootCancerType).checked);
+								return (
+									<span className={classNames('cta', styles.selectAll)} onClick={() => this.logic.mainView.onCheck(this.store.treeData.rootCancerType, !selectAllChecked)}>
+										{selectAllChecked ? "Deselect all" : "Select all"}
+									</span>
+								);
+							}}
+						</Observer>
 					)}
 				</FlexRow>
 
 				<FlexRow className={styles.cancerStudySelectorBody}>
 					<div className={styles.cancerTypeListContainer}>
-						{this.renderCancerTypeList()}
+						<this.CancerTypeList/>
 					</div>
 					<div className={styles.cancerStudyListContainer}>
 						<StudyList/>
diff --git a/src/shared/components/query/studyList/StudyList.tsx b/src/shared/components/query/studyList/StudyList.tsx
index 556bc5cdfe5..3213796f849 100644
--- a/src/shared/components/query/studyList/StudyList.tsx
+++ b/src/shared/components/query/studyList/StudyList.tsx
@@ -5,11 +5,12 @@ import classNames from 'classnames';
 import FontAwesome from "react-fontawesome";
 import LabeledCheckbox from "../../labeledCheckbox/LabeledCheckbox";
 import {observer} from "mobx-react";
+import {computed} from "mobx";
 import {getStudySummaryUrl, getPubMedUrl} from "../../../api/urls";
 import {QueryStoreComponent} from "../QueryStore";
 import DefaultTooltip from "../../DefaultTooltip";
-import StudyListLogic from "../StudyListLogic";
-import {cached} from 'mobxpromise';
+import StudyListLogic, {FilteredCancerTreeView} from "../StudyListLogic";
+import {CancerTreeNode} from "../CancerStudyTreeData";
 
 const styles = {
 	...styles_any as {
@@ -121,11 +122,8 @@ export default class StudyList extends QueryStoreComponent<IStudyListProps, void
 
 			heading = (
 				<li className={liClassName}>
-					<LabeledCheckbox
-						{...this.view.getCheckboxProps(cancerType)}
-						onChange={event => this.view.onCheck(cancerType, (event.target as HTMLInputElement).checked)}
-					>
-						{indentArrow} 
+					<CancerTreeCheckbox view={this.view} node={cancerType}>
+						{indentArrow}
 						<span className={styles.CancerTypeName}>
 							{cancerType.name}
 						</span>
@@ -134,7 +132,7 @@ export default class StudyList extends QueryStoreComponent<IStudyListProps, void
 								Select All
 							</span>
 						)}
-					</LabeledCheckbox>
+					</CancerTreeCheckbox>
 				</li>
 			);
 		}
@@ -172,14 +170,11 @@ export default class StudyList extends QueryStoreComponent<IStudyListProps, void
 	renderStudyName = (study:CancerStudy) =>
 	{
 		return (
-			<LabeledCheckbox
-				{...this.view.getCheckboxProps(study)}
-				onChange={event => this.view.onCheck(study, (event.target as HTMLInputElement).checked)}
-			>
+			<CancerTreeCheckbox view={this.view} node={study}>
 				<span className={styles.StudyName}>
 					{study.name}
 				</span>
-			</LabeledCheckbox>
+			</CancerTreeCheckbox>
 		);
 	}
 
@@ -254,3 +249,30 @@ export default class StudyList extends QueryStoreComponent<IStudyListProps, void
 		);
 	}
 }
+
+export interface ICancerTreeCheckboxProps
+{
+	view: FilteredCancerTreeView;
+	node: CancerTreeNode;
+}
+
+@observer
+export class CancerTreeCheckbox extends QueryStoreComponent<ICancerTreeCheckboxProps, void>
+{
+	@computed.struct get checkboxProps()
+	{
+		return this.props.view.getCheckboxProps(this.props.node);
+	}
+
+	render()
+	{
+		return (
+			<LabeledCheckbox
+				{...this.checkboxProps}
+				onChange={event => this.props.view.onCheck(this.props.node, (event.target as HTMLInputElement).checked)}
+			>
+				{this.props.children}
+			</LabeledCheckbox>
+		);
+	}
+}

From 340746f747c9fdace279f7adbc033bc5126dc294 Mon Sep 17 00:00:00 2001
From: Andy Dufilie <andy.dufilie@gmail.com>
Date: Mon, 24 Apr 2017 16:39:45 -0400
Subject: [PATCH 133/133] Move selected studies view to modal dialog Remove
 DevMode code

---
 src/pages/home/HomePage.tsx                   | 31 --------
 src/pages/pageHeader/PageHeader.tsx           |  7 --
 .../components/query/CancerStudySelector.tsx  | 19 +++--
 .../components/query/studyList/StudyList.tsx  | 70 +++++++++----------
 .../query/studyList/styles.module.scss        | 43 ------------
 .../components/query/styles.module.scss       |  8 ++-
 src/shared/lib/devMode.ts                     |  8 ---
 7 files changed, 57 insertions(+), 129 deletions(-)
 delete mode 100644 src/shared/lib/devMode.ts

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index f8d57ed6567..f6197c72ed9 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import exposeComponentRenderer from 'shared/lib/exposeComponentRenderer';
 import * as styles_any from './styles.module.scss';
 import {FlexCol, FlexRow} from "../../shared/components/flexbox/FlexBox";
-import devMode from "../../shared/lib/devMode";
 import {observer} from "mobx-react";
 import DevTools from "mobx-react-devtools";
 import {toJS, observable, action, computed, whyRun, expr} from "mobx";
@@ -56,37 +55,7 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
 	{
 		return (
 			<FlexRow padded flex={1} className={styles.HomePage}>
-
 				<QueryAndDownloadTabs store={this.store}/>
-
-				{!!(devMode.enabled) && (
-					<FlexCol padded overflow>
-						{/* demo controls */}
-						<FlexCol padded overflow style={{border: '1px solid #ddd', borderRadius: 5, padding: 5}}>
-							<LabeledCheckbox checked={this.store.clickAgainToDeselectSingle} onChange={event => this.store.clickAgainToDeselectSingle = event.target.checked}>
-								Click tree node again to deselect
-							</LabeledCheckbox>
-							<FlexRow padded overflow>
-								<span>Tree depth:</span>
-								<ReactSelect
-									value={this.store.maxTreeDepth}
-									options={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(value => ({value, label: value + ''}))}
-									onChange={option => this.store.maxTreeDepth = option ? option.value : 0}
-								/>
-							</FlexRow>
-							<span>Note: Use cmd+click to select/deselect multiple cancer types.</span>
-						</FlexCol>
-
-						{/* display state for demo */}
-						<pre>
-							{JSON.stringify(this.store.stateToSerialize, null, 4)}
-						</pre>
-
-					</FlexCol>
-				)}
-
-				{devMode.enabled && <DevTools/>}
-
 			</FlexRow>
 		);
 	}
diff --git a/src/pages/pageHeader/PageHeader.tsx b/src/pages/pageHeader/PageHeader.tsx
index fb822e981aa..51109893c57 100644
--- a/src/pages/pageHeader/PageHeader.tsx
+++ b/src/pages/pageHeader/PageHeader.tsx
@@ -1,15 +1,11 @@
 import * as React from 'react';
 import './styles.scss';
-import devMode from "../../shared/lib/devMode";
-import {observer} from "mobx-react";
-import LabeledCheckbox from "../../shared/components/labeledCheckbox/LabeledCheckbox";
 
 interface IPageHeaderProps {
     router: any;
     currentRoutePath: string;
 }
 
-@observer
 export default class PageHeader extends React.Component<IPageHeaderProps, void> {
 
     routeInput: HTMLInputElement;
@@ -29,9 +25,6 @@ export default class PageHeader extends React.Component<IPageHeaderProps, void>
                                 <input className="form-control" defaultValue={this.props.currentRoutePath} ref={(c) => { this.routeInput = c; }} />
                         </div>
                     </form>
-                    <LabeledCheckbox checked={devMode.enabled} onChange={event => devMode.enabled = event.target.checked}>
-                        Enable debug mode
-                    </LabeledCheckbox>
                 </div>
             </header>
         );
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
index 43e43e3f32f..31ae9576395 100644
--- a/src/shared/components/query/CancerStudySelector.tsx
+++ b/src/shared/components/query/CancerStudySelector.tsx
@@ -12,8 +12,10 @@ import {expr} from 'mobx';
 import memoize from "memoize-weak-decorator";
 import {QueryStoreComponent} from "./QueryStore";
 import SectionHeader from "../sectionHeader/SectionHeader";
+import {Modal} from 'react-bootstrap';
 
 const styles = styles_any as {
+	SelectedStudiesWindow: string,
 	CancerStudySelector: string,
 	cancerStudySelectorHeader: string,
 	selectable: string,
@@ -187,12 +189,21 @@ export default class CancerStudySelector extends QueryStoreComponent<ICancerStud
 					</div>
 					<div className={styles.cancerStudyListContainer}>
 						<StudyList/>
-						{!!(this.store.showSelectedStudiesOnly) && (
-							/* HACK - should use Modal dialog instead */
-							<StudyList showSelectedStudiesOnly/>
-						)}
 					</div>
 				</FlexRow>
+
+				<Modal
+					className={styles.SelectedStudiesWindow}
+					show={this.store.showSelectedStudiesOnly}
+					onHide={() => this.store.showSelectedStudiesOnly = false}
+				>
+					<Modal.Header closeButton>
+						<Modal.Title>Selected Studies</Modal.Title>
+					</Modal.Header>
+					<Modal.Body>
+						<StudyList showSelectedStudiesOnly/>
+					</Modal.Body>
+				</Modal>
 			</FlexCol>
 		);
 	}
diff --git a/src/shared/components/query/studyList/StudyList.tsx b/src/shared/components/query/studyList/StudyList.tsx
index 3213796f849..17ccfde5afc 100644
--- a/src/shared/components/query/studyList/StudyList.tsx
+++ b/src/shared/components/query/studyList/StudyList.tsx
@@ -50,52 +50,52 @@ export interface IStudyListProps
 @observer
 export default class StudyList extends QueryStoreComponent<IStudyListProps, void>
 {
-	get logic() { return this.store.studyListLogic; }
-
-	get rootCancerType() { return this.store.treeData.rootCancerType; }
+	private _view:FilteredCancerTreeView;
 
 	get view()
 	{
-		return this.props.showSelectedStudiesOnly
+		return this._view || (
+			this.props.showSelectedStudiesOnly
 			? this.logic.selectedStudiesView
-			: this.logic.mainView;
+			: this.logic.mainView
+		);
 	}
 
-	render()
+	get logic() { return this.store.studyListLogic; }
+
+	get rootCancerType() { return this.store.treeData.rootCancerType; }
+
+	componentDidMount()
 	{
+		// when rendering selected studies view,
+		// cache the view object so studies do not disappear immediately when deselected.
 		if (this.props.showSelectedStudiesOnly)
-			return this.renderSelectedStudies();
-		else
-			return this.renderCancerType(this.rootCancerType);
+			this._view = this.view;
 	}
 
-	renderSelectedStudies = () =>
+	render()
 	{
-		return (
-			<div className={styles.SelectedStudyList}>
-				<h4>
-						Selected Studies 
-						<span 
-							className={styles.closeSelected}
-							onClick={() => this.store.showSelectedStudiesOnly = false}
-						>
-							Return to Study Selector
-						</span>
-				</h4>
-				<span
-					className={styles.deselectAll}
-					onClick={() => {
-						this.view.onCheck(this.store.treeData.rootCancerType, false);
-						this.store.showSelectedStudiesOnly = false;
-					}}
-				>
-					Deselect all
-				</span>
-				<ul className={styles.StudyList}>
-					{this.renderCancerType(this.rootCancerType)}
-				</ul>
-			</div>
-		);
+		let studyList = this.renderCancerType(this.rootCancerType);
+
+		if (this.props.showSelectedStudiesOnly)
+		{
+			return (
+				<div className={styles.SelectedStudyList}>
+					<span
+						className={styles.deselectAll}
+						onClick={() => {
+							this.view.onCheck(this.store.treeData.rootCancerType, false);
+							this.store.showSelectedStudiesOnly = false;
+						}}
+					>
+						Deselect all
+					</span>
+					{studyList}
+				</div>
+			);
+		}
+
+		return studyList;
 	}
 
 	renderCancerType = (cancerType:CancerType, arrayIndex:number = 0):JSX.Element | null =>
diff --git a/src/shared/components/query/studyList/styles.module.scss b/src/shared/components/query/studyList/styles.module.scss
index 4bd10a4878a..e03f082f10b 100644
--- a/src/shared/components/query/studyList/styles.module.scss
+++ b/src/shared/components/query/studyList/styles.module.scss
@@ -36,54 +36,11 @@
 
 
 .SelectedStudyList {
-  position: absolute;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 400px;
-  overflow: auto;
-  -webkit-animation: fadein 0.25s; /* Safari, Chrome and Opera > 12.1 */
-     -moz-animation: fadein 0.25s; /* Firefox < 16 */
-      -ms-animation: fadein 0.25s; /* Internet Explorer */
-       -o-animation: fadein 0.25s; /* Opera < 12.1 */
-          animation: fadein 0.25s;
-
   ul.StudyList {
     margin: 0;
     padding: 0 15px;
   }
 
-  h4 {
-    margin: 15px 15px 0 15px;
-    padding: 0 5px 5px 5px;
-    font-weight: 400;
-    line-height: 26px;
-    border-bottom: 1px solid rgba(143, 189, 212, 0.42);
-  }
-
-  &:before {
-    content: '\f0d8';
-    color: #e8f1f8;
-    font-family: 'FontAwesome';
-    position: absolute;
-    top: -12px;
-    right: 15px;
-  }
-
-  .closeSelected {
-    color: #337ab7;
-    font-size: 14px;
-    font-weight: 500;
-    float: right;
-    display: inline-block;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
   .deselectAll {
     float: right;
     margin-right: 20px;
diff --git a/src/shared/components/query/styles.module.scss b/src/shared/components/query/styles.module.scss
index cb13239b47f..c7afcaee975 100644
--- a/src/shared/components/query/styles.module.scss
+++ b/src/shared/components/query/styles.module.scss
@@ -79,6 +79,12 @@
   box-shadow: 0 0 1px #e9e9e9;
 }
 
+div.SelectedStudiesWindow {
+  div:global(.modal-dialog) {
+    width: 850px;
+  }
+}
+
 .CancerStudySelector {
   position: relative;
   overflow: hidden;
@@ -389,7 +395,7 @@
     font-size: small;
   }
   div.validBubble,
-  div.invalidBubble, {
+  div.invalidBubble {
     color: #fff;
     display: flex;
     align-items: center;
diff --git a/src/shared/lib/devMode.ts b/src/shared/lib/devMode.ts
deleted file mode 100644
index 218369d3787..00000000000
--- a/src/shared/lib/devMode.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {observable} from "mobx";
-
-class DevMode
-{
-	@observable enabled = !!localStorage.getItem('dev');
-}
-const devMode = new DevMode();
-export default devMode;