diff --git a/src/pages/resultsView/ResultsViewPage.tsx b/src/pages/resultsView/ResultsViewPage.tsx index 917d691030f..76ab5efe984 100644 --- 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 ( <> + Go + + Cancel + >) + } + + @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< { - this.showTabs = visible; + onToggleQueryFormVisibility={visible => { + runInAction(()=>{ + this.showTabs = visible; + this.showOQLEditor = false; + }); }} + onToggleOQLEditUIVisibility={this.toggleOQLEditor} /> + + { + (this.showOQLEditor) && ( + + { + this.oqlSubmission = args[2]; + }} + location={GeneBoxType.DEFAULT} + submitButton={this.quickOQLSubmitButtion} + /> + + + ) + } + {// 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 index 9ab3c57bd7f..6b29d4db73c 100644 --- 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 { @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 - {getGeneSummary(this.props.store.hugoGeneSymbols)} + + + + + + ); } diff --git a/src/pages/resultsView/styles.scss b/src/pages/resultsView/styles.scss index aafa2690b65..873d03502d8 100644 --- 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 index 3141cc28ba2..01ec2820ed7 100644 --- 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 ( - + - + { + (this.props.submitButton) && this.props.submitButton + } + +