Query component

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;

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"
@@ -43,9 +44,11 @@
     "@types/react": "15.0.4",
     "@types/react-bootstrap": "^0.0.43",
     "@types/react-dom": "^0.14.21",
+    "@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/recompose": "^0.20.4",
     "@types/reselect": "^2.0.27",
     "@types/route-parser": "0.0.0",
     "@types/seamless-immutable": "^6.1.2",
@@ -91,6 +94,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",
@@ -113,19 +117,22 @@
     "react-collapse": "^2.3.3",
     "react-dom": "^15.4.2",
     "react-file-download": "^0.3.2",
+    "react-fontawesome": "^1.5.0",
     "react-height": "^2.2.0",
     "react-if": "^2.1.0",
     "react-motion": "^0.4.7",
     "react-redux": "^5.0.2",
     "react-renderif": "^1.0.2",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.7",
+    "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",
     "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",

src/config/IAppConfig.ts

@@ -1,4 +1,5 @@
 export interface IAppConfig {
+    genomespaceEnabled: boolean;
     cancerStudySearchPresets: string[];
     priorityStudies: PriorityStudies;
 }

src/config/development.config.ts

@@ -2,6 +2,7 @@ import {IAppConfig} from "./IAppConfig";
 
 const config:IAppConfig = {
     //host: 'cbioportal-rc.herokuapp.com',
+    genomespaceEnabled: false,
     cancerStudySearchPresets: [
         'tcga',
         'tcga -provisional',

src/config/production.config.ts

@@ -2,6 +2,7 @@ import {IAppConfig} from "./IAppConfig";
 
 const config:IAppConfig = {
     //host: 'cbioportal-rc.herokuapp.com',
+    genomespaceEnabled: false,
     cancerStudySearchPresets: [
         'tcga',
         'tcga -provisional',

src/config/test.config.ts

@@ -2,6 +2,7 @@ import {IAppConfig} from "./IAppConfig";
 
 const config:IAppConfig = {
     //host: 'cbioportal-rc.herokuapp.com',
+    genomespaceEnabled: false,
     cancerStudySearchPresets: [
         'tcga',
         'tcga -provisional',

src/globalStyles/global.scss

@@ -11,13 +11,39 @@ 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 */
+
+.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;
   }
 }
 
@@ -26,6 +52,7 @@ body {
   margin:0 auto;
 }
 
+/* Tables */
 th.reactable-header-sortable {
 
   &:focus {outline:0;}

src/globalStyles/variables.scss

@@ -1,9 +1,26 @@
-//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;
+
+$lightBlue: #dee9f1;
+$mediumBlue: #1982b8;
+
+
+$lightGrey: #ececec;
+$mediumGrey: #ddd;
+$darkGrey: #999;
+
+$redError: #a71111;
+$greenSuccess: #11a747;
 
 .portalWidth{
   padding-left:20px;
   padding-right:20px;
   min-width:800px;
-}
+}

src/pages/home/HomePage.tsx

@@ -1,40 +1,62 @@
 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 exposeComponentRenderer from 'shared/lib/exposeComponentRenderer';
+import * as styles_any from './styles.module.scss';
+import {FlexCol, FlexRow} from "../../shared/components/flexbox/FlexBox";
+import {observer} from "mobx-react";
+import DevTools from "mobx-react-devtools";
+import {toJS, observable, action, computed, whyRun, expr} from "mobx";
+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()
+{
+	for (let node of document.childNodes)
+		if (node instanceof HTMLElement)
+			return node;
+	throw new Error("No HTMLElement found");
+}
+
+const styles = styles_any as {
+	HomePage: string,
+};
 
 interface IHomePageProps
 {
 }
 
 interface IHomePageState
 {
-    data?:CancerStudy[];
 }
 
+@observer
 export default class HomePage extends React.Component<IHomePageProps, IHomePageState>
 {
-    constructor(props:IHomePageProps)
-    {
-        super(props);
-        this.state = {};
-    }
-
-    client = new CBioPortalAPI(getCbioPortalApiUrl());
-
-    componentDidMount()
-    {
-        this.client.getAllStudiesUsingGET({
-            projection: "DETAILED"
-        }).then(data => {
-            this.setState({data});
-        });
-    }
-
-    public render() {
-        return <pre>
-            { JSON.stringify(this.state.data, null, 4) }
-        </pre>;
-    }
-};
+	constructor(props:IHomePageProps)
+	{
+		super(props);
+	}
+
+	store = new QueryStore(window.location.href);
+
+	public componentDidMount()
+	{
+		this.exposeComponentRenderersToParentScript();
+	}
+
+	exposeComponentRenderersToParentScript()
+	{
+		exposeComponentRenderer('renderQueryContainer', QueryAndDownloadTabs);
+	}
+
+	public render()
+	{
+		return (
+			<FlexRow padded flex={1} className={styles.HomePage}>
+				<QueryAndDownloadTabs store={this.store}/>
+			</FlexRow>
+		);
+	}
+}

src/pages/home/styles.module.scss

@@ -0,0 +1,3 @@
+.HomePage {
+  padding: 10px;
+}

src/pages/pageHeader/styles.scss

@@ -18,6 +18,10 @@
     }
     display:none;
 
+    label {
+      color: #fff;
+    }
+
   }
 
 }

src/shared/api/gsuploadwindow.ts

@@ -0,0 +1,91 @@
+// 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.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 as any).setCallbackOnGSUploadComplete = config['successCallback'];
+
+    if (config['errorCallback'] != null) (newWin as any).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.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 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.open(gsUploadUrl , "GenomeSpace Upload", "height=340px,width=550px");
+    newWin.focus();
+
+    (newWin as any).setCallbackOnGSLocationComplete = config['successCallback'];
+
+    if (config['errorCallback'] != null) (newWin as any).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);
+}

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?', ()=>{
+
+    });
+
+});