Add quick oql edit to results view page next to current gene list

cBioPortal · Jan 23, 2020 · 49afa7c · 49afa7c
1 parent 51972f5
commit 49afa7c
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 9 deletions.
diff --git a/src/pages/resultsView/ResultsViewPage.tsx b/src/pages/resultsView/ResultsViewPage.tsx
@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import $ from 'jquery';
 import URL from 'url';
 import { inject, observer } from 'mobx-react';
-import { computed, observable, reaction, runInAction } from 'mobx';
+import {action, computed, observable, reaction, runInAction} from 'mobx';
 import { ResultsViewPageStore } from './ResultsViewPageStore';
 import CancerSummaryContainer from 'pages/resultsView/cancerSummary/CancerSummaryContainer';
 import Mutations from './mutation/Mutations';
@@ -47,6 +47,7 @@ import LoadingIndicator from "shared/components/loadingIndicator/LoadingIndicato
 import onMobxPromise from "shared/lib/onMobxPromise";
 import {createQueryStore} from "shared/lib/createQueryStore";
 import {handleLegacySubmission, handlePostedSubmission} from "shared/lib/redirectHelpers";
+import OQLTextArea, {GeneBoxType} from "shared/components/GeneSelectionBox/OQLTextArea";
 
 function initStore(appStore: AppStore, urlWrapper: ResultsViewURLWrapper) {
     const resultsViewPageStore = new ResultsViewPageStore(
@@ -94,6 +95,8 @@ export default class ResultsViewPage extends React.Component<
 
     private urlWrapper: ResultsViewURLWrapper;
 
+    @observable showOQLEditor = false;
+
     @observable showTabs = true;
 
     constructor(props: IResultsViewPageProps) {
@@ -476,6 +479,29 @@ export default class ResultsViewPage extends React.Component<
         return isRoutedTo || (!isExcludedInList && !isExcluded);
     }
 
+    @computed get quickOQLSubmitButtion(){
+        return ( <>
+            <button className={"btn btn-primary btn-sm"} style={{marginLeft:10}} onClick={this.handleQuickOQLSubmission}>Go</button>
+            &nbsp;
+            <button className={'btn btn-link btn-sm'} onClick={this.toggleOQLEditor}>Cancel</button>
+        </>)
+    }
+
+    @autobind
+    @action
+    handleQuickOQLSubmission(){
+        this.showOQLEditor = false;
+        this.urlWrapper.updateURL({
+                                      gene_list:this.oqlSubmission
+                                  });
+    }
+
+    @autobind
+    @action
+    toggleOQLEditor(){
+        this.showOQLEditor = !this.showOQLEditor;
+    }
+
     @autobind
     private getTabHref(tabId: string) {
         return URL.format({
@@ -485,6 +511,8 @@ export default class ResultsViewPage extends React.Component<
         });
     }
 
+    @observable oqlSubmission = "";
+
     @computed get pageContent() {
         if (this.resultsViewPageStore.invalidStudyIds.result.length > 0) {
             return (
@@ -543,10 +571,32 @@ export default class ResultsViewPage extends React.Component<
                                     <QuerySummary
                                         routingStore={this.props.routing}
                                         store={this.resultsViewPageStore}
-                                        onToggleQueryFormVisiblity={visible => {
-                                            this.showTabs = visible;
+                                        onToggleQueryFormVisibility={visible => {
+                                            runInAction(()=>{
+                                                this.showTabs = visible;
+                                                this.showOQLEditor = false;
+                                            });
                                         }}
+                                        onToggleOQLEditUIVisibility={this.toggleOQLEditor}
                                     />
+
+                                    {
+                                        (this.showOQLEditor) && (
+                                            <div className={'quick_oql_edit'}>
+                                                <OQLTextArea
+                                                    inputGeneQuery={this.resultsViewPageStore.oqlText}
+                                                    validateInputGeneQuery={true}
+                                                    callback={(...args)=>{
+                                                        this.oqlSubmission = args[2];
+                                                    }}
+                                                    location={GeneBoxType.DEFAULT}
+                                                    submitButton={this.quickOQLSubmitButtion}
+                                                />
+
+                                            </div>
+                                        )
+                                    }
+
                                 </div>
 
                                 {// we don't show the result tabs if we don't have valid query

diff --git a/src/pages/resultsView/querySummary/QuerySummary.tsx b/src/pages/resultsView/querySummary/QuerySummary.tsx
@@ -23,13 +23,20 @@ import ResultsPageSettings from "../settings/ResultsPageSettings";
 import {createQueryStore} from "shared/lib/createQueryStore";
 import _ from "lodash";
 
+interface QuerySummaryProps {
+    routingStore:ExtendedRouterStore;
+    store: ResultsViewPageStore;
+    onToggleQueryFormVisibility:(visible:boolean)=>void;
+    onToggleOQLEditUIVisibility:()=>void;
+}
+
 @observer
-export default class QuerySummary extends React.Component<{ routingStore:ExtendedRouterStore, store: ResultsViewPageStore, onToggleQueryFormVisiblity:(visible:boolean)=>void }, {}> {
+export default class QuerySummary extends React.Component<QuerySummaryProps, {}> {
 
     @autobind
     @action
     private toggleQueryFormVisibility() {
-        this.props.onToggleQueryFormVisiblity(this.props.store.queryFormVisible);
+        this.props.onToggleQueryFormVisibility(this.props.store.queryFormVisible);
         // if clicked the query button in the download tab and want to close the query form, clear the selected sample ids
         if (this.props.store.modifyQueryParams && this.props.store.queryFormVisible === true) {
             this.props.store.modifyQueryParams = undefined;
@@ -80,6 +87,12 @@ export default class QuerySummary extends React.Component<{ routingStore:Extende
 
                     &nbsp;-&nbsp;
                     {getGeneSummary(this.props.store.hugoGeneSymbols)}
+                    &nbsp;
+                    <DefaultTooltip overlay={'Edit genes or OQL'}>
+                        <a onClick={this.props.onToggleOQLEditUIVisibility}>
+                            <i className={'fa fa-pencil'}></i>
+                        </a>
+                    </DefaultTooltip>
                 </div>
             );
         }

diff --git a/src/pages/resultsView/styles.scss b/src/pages/resultsView/styles.scss
@@ -125,3 +125,14 @@
     width: 100%;
     max-width: 555px;
 }
+
+.quick_oql_edit {
+    display:flex;
+    margin-top:10px;
+    align-items: flex-start;
+
+    .oqlValidationContainer {
+        min-height:27px;
+    }
+
+}
diff --git a/src/shared/components/GeneSelectionBox/OQLTextArea.tsx b/src/shared/components/GeneSelectionBox/OQLTextArea.tsx
@@ -30,6 +30,7 @@ export interface IGeneSelectionBoxProps {
     validateInputGeneQuery?: boolean;
     location?: GeneBoxType;
     textBoxPrompt?: string;
+    submitButton?:JSX.Element;
     callback?: (
         oql: {
             query: SingleGeneQuery[];
@@ -264,7 +265,7 @@ export default class OQLTextArea extends React.Component<
     render() {
         return (
             <div className={styles.genesSelection}>
-
+                <div className={styles.topRow}>
                 <textarea
                     ref={this.textAreaRef as any}
                     onFocus={this.onFocus}
@@ -279,7 +280,11 @@ export default class OQLTextArea extends React.Component<
                     data-test="geneSet"
                 />
 
-                <div className={classnames({ [styles.minWidthContainer]: (this.props.location === GeneBoxType.DEFAULT) })}>
+                {
+                    (this.props.submitButton) && this.props.submitButton
+                }
+                </div>
+                <div className={'oqlValidationContainer'}>
                 <GeneSymbolValidator
                     focus={this.props.focus}
                     geneQuery={this.queryToBeValidated}

diff --git a/src/shared/components/GeneSelectionBox/styles.module.scss b/src/shared/components/GeneSelectionBox/styles.module.scss
@@ -2,13 +2,18 @@
 	margin: 0px 5px 3px 0;
 	padding: 2px 5px;
 	border-radius: $border-radius-base;
+	font-size:.8rem;
 }
 
-.minWidthContainer {
-	min-height:25px;
+.topRow {
+	display:flex;
+	align-items: flex-start;
+	margin-bottom:5px;
 }
 
+
 .genesSelection {
+
 	textarea.default {
 		width: 555px;
 		resize: vertical;

diff --git a/src/shared/components/query/styles/styles.module.scss b/src/shared/components/query/styles/styles.module.scss
@@ -368,6 +368,10 @@ div.SelectedStudiesWindow {
         margin-bottom: 8px;
     }
 
+    :global(.oqlValidationContainer) {
+        min-height:27px;
+    }
+
     .buttonRow {
         margin-bottom: 8px;
         justify-content: space-between;