Skip to content

Commit

Permalink
Added react-reveal
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisman
alisman committed Jun 28, 2019
1 parent de98f70 commit 81d7668
Show file tree
Hide file tree
Showing 11 changed files with 145 additions and 80 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@
"react-rangeslider": "^2.1.0",
"react-renderif": "^1.0.2",
"react-resize-detector": "^0.5.0",
"react-reveal": "^1.2.2",
"react-router": "^3.0.2",
"react-select": "^1.3.0",
"react-select-checked": "^0.1.12",
Expand Down
10 changes: 10 additions & 0 deletions src/globalStyles/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,16 @@ th.reactable-header-sort-asc:after {
padding:$gutterWidth $gutterWidth 10px $gutterWidth;
background:$main-bg;
margin-top:-$gutterWidth;
position:relative;

.citationRule {
position:absolute;
z-index:10;
top:35px;
right:20px;
font-size:12px;
}

}

#mainColumn {
Expand Down
16 changes: 13 additions & 3 deletions src/pages/home/HomePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function createQueryStore(currentQuery?:any) {
const win:any = window;

const queryStore = new QueryStore(currentQuery);

queryStore.singlePageAppSubmitRoutine = function(query:CancerStudyQueryUrlParams) {

// normalize this
Expand Down Expand Up @@ -78,12 +78,22 @@ export default class HomePage extends React.Component<IResultsViewPageProps, {}>

return (
<PageLayout className="homePageLayout" noMargin={true} rightBar={<RightBar queryStore={this.queryStore} />}>
{/*<div className={"headBlock"} dangerouslySetInnerHTML={{__html:AppConfig.serverConfig.skin_blurb!}}></div>*/}

<div className={"headBlock"} style={{paddingBottom:0}}>

<div className={"citationRule"}>
Please cite: <a href="http://cancerdiscovery.aacrjournals.org/content/2/5/401.abstract" target="_blank">Cerami et al., 2012</a> &amp; <a href="http://www.ncbi.nlm.nih.gov/pubmed/23550210" target="_blank">Gao et al., 2013</a>
</div>

</div>



<div className={"headBlock"} dangerouslySetInnerHTML={{__html:AppConfig.serverConfig.skin_blurb!}}></div>
<QueryAndDownloadTabs getQueryStore={this.getQueryStore} showQuickSearchTab={AppConfig.serverConfig.quick_search_enabled} showDownloadTab={true}/>

</PageLayout>
)

}
}
}
1 change: 1 addition & 0 deletions src/pages/resultsView/querySummary/QuerySummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ export default class QuerySummary extends React.Component<{ routingStore:Extende
@computed get queryForm(){
return <div style={{margin:"10px -20px 0 -20px"}}>
<QueryAndDownloadTabs onSubmit={this.onSubmit}
forkedExperience={false}
showQuickSearchTab={false}
showDownloadTab={false}
showAlerts={true}
Expand Down
70 changes: 35 additions & 35 deletions src/shared/components/query/CancerStudySelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
<FlexRow overflow className={styles.CancerStudySelectorHeader}>

<SectionHeader promises={[this.store.cancerTypes, this.store.cancerStudies]}>
Select Studies:
Select Studies for Visualization & Analysis:
</SectionHeader>

{this.store.selectableStudiesSet.isComplete && (
Expand Down Expand Up @@ -201,40 +201,40 @@ export default class CancerStudySelector extends React.Component<ICancerStudySel
)}


{!!(!this.store.cancerTypes.isPending && !this.store.cancerStudies.isPending) && (
<Observer>
{() => {

const studyLimitReached = (this.store.selectableSelectedStudyIds.length > 50);
const tooltipMessage = studyLimitReached ?
<span>Too many studies selected for study summary (limit: 50)</span> :
<span>Open summary of selected studies in a new window.</span>;

return (
<DefaultTooltip
placement="top"
overlay={tooltipMessage}
disabled={!this.store.summaryEnabled}
mouseEnterDelay={0}
>

<Button bsSize="xs" disabled={studyLimitReached} bsStyle="primary"
className={classNames('btn-primary')}
onClick={this.handlers.onSummaryClick}
style={{
marginLeft: 10,
display: this.store.summaryEnabled ? 'inline-block' : 'none',
cursor: 'pointer',
bgColor: '#3786C2'
}}
>
<i className='ci ci-pie-chart'></i> View summary
</Button>
</DefaultTooltip>
);
}}
</Observer>
)}
{/*{!!(!this.store.cancerTypes.isPending && !this.store.cancerStudies.isPending) && (*/}
{/* <Observer>*/}
{/* {() => {*/}

{/* const studyLimitReached = (this.store.selectableSelectedStudyIds.length > 50);*/}
{/* const tooltipMessage = studyLimitReached ?*/}
{/* <span>Too many studies selected for study summary (limit: 50)</span> :*/}
{/* <span>Open summary of selected studies in a new window.</span>;*/}

{/* return (*/}
{/* <DefaultTooltip*/}
{/* placement="top"*/}
{/* overlay={tooltipMessage}*/}
{/* disabled={!this.store.summaryEnabled}*/}
{/* mouseEnterDelay={0}*/}
{/* >*/}

{/* <Button bsSize="xs" disabled={studyLimitReached} bsStyle="primary"*/}
{/* className={classNames('btn-primary')}*/}
{/* onClick={this.handlers.onSummaryClick}*/}
{/* style={{*/}
{/* marginLeft: 10,*/}
{/* display: this.store.summaryEnabled ? 'inline-block' : 'none',*/}
{/* cursor: 'pointer',*/}
{/* bgColor: '#3786C2'*/}
{/* }}*/}
{/* >*/}
{/* <i className='ci ci-pie-chart'></i> View summary*/}
{/* </Button>*/}
{/* </DefaultTooltip>*/}
{/* );*/}
{/* }}*/}
{/* </Observer>*/}
{/*)}*/}

</div>
)}
Expand Down
10 changes: 8 additions & 2 deletions src/shared/components/query/QueryAndDownloadTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ interface IQueryAndDownloadTabsProps
showDownloadTab:boolean;
getQueryStore:()=>QueryStore;
showAlerts?:boolean;
forkedExperience?:boolean;
}


Expand All @@ -49,6 +50,10 @@ export default class QueryAndDownloadTabs extends React.Component<IQueryAndDownl
this.store = props.getQueryStore();
}

static defaultProps = {
forkedExperience:true
};

@observable.ref store: QueryStore;

@observable activeTabId:string;
Expand Down Expand Up @@ -92,15 +97,16 @@ export default class QueryAndDownloadTabs extends React.Component<IQueryAndDownl

<MSKTabs activeTabId={this.activeTabId} onTabClick={this.onSelectTab} className={"mainTabs"}>
<MSKTab id={"advanced"} linkText={"Query"} onTabDidMount={()=>this.setDefaultTab(undefined)}>
<QueryContainer onSubmit={this.props.onSubmit} store={this.store}/>
<QueryContainer forkedExperience={this.props.forkedExperience} onSubmit={this.props.onSubmit} store={this.store}/>
</MSKTab>
<MSKTab id={QUICK_SEARCH_TAB_ID} linkText={<span>Quick Search <strong className={"beta-text"}>Beta!</strong></span>} hide={!this.props.showQuickSearchTab} onTabDidMount={()=>{this.setDefaultTab(QUICK_SEARCH_TAB_ID); this.trackQuickSearch();}}>
<div>
<QuickSearch/>
</div>
</MSKTab>
<MSKTab id={DOWNLOAD} linkText={"Download"} hide={!this.props.showDownloadTab} onTabDidMount={()=>this.setDefaultTab(undefined)}>
<QueryContainer onSubmit={this.props.onSubmit} store={this.store}/>
{/*forked experience is always false for download tab*/}
<QueryContainer forkedExperience={false} onSubmit={this.props.onSubmit} store={this.store}/>
</MSKTab>
</MSKTabs>
</div>
Expand Down
82 changes: 52 additions & 30 deletions src/shared/components/query/QueryContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {If, Then, Else} from "react-if";
import autobind from "autobind-decorator";
import DefaultTooltip from "shared/components/defaultTooltip/DefaultTooltip";
import SectionHeader from "shared/components/sectionHeader/SectionHeader";
import { Fade, withReveal } from 'react-reveal';

const styles = styles_any as {
QueryContainer: string,
Expand All @@ -37,6 +38,7 @@ const styles = styles_any as {
interface QueryContainerProps {
store: QueryStore;
onSubmit?: () => void;
forkedExperience?:boolean;
}

@providesStoreContext(QueryStore)
Expand All @@ -52,14 +54,26 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
return this.store.studiesHaveChangedSinceInitialization || this.store.selectableSelectedStudyIds.length > 0 && this.store.initiallySelected.profileIds && this.store.cancerTypes.isComplete && this.store.cancerStudies.isComplete && this.store.profiledSamplesCount.isComplete;
}

@observable showQueryControls = false;
@observable _showQueryControls = false;

@computed get showQueryControls(){
return this.props.forkedExperience === false || this._showQueryControls;
}

constructor(props: QueryContainerProps) {

super(props);

this.handleSubmit = this.handleSubmit.bind(this);
}

@computed get getWrappedCancerStudySelector(){
const control = <CancerStudySelector queryStore={this.store} />;
return this.props.forkedExperience ? <Fade duration={500} collapse when={!this.showQueryControls} style={( this.showQueryControls ? { marginBottom:0 } : {})}>
{control}
</Fade> : control;
}

handleSubmit() {
this.store.submit();
if (this.props.onSubmit) {
Expand All @@ -69,24 +83,35 @@ export default class QueryContainer extends React.Component<QueryContainerProps,

@autobind
toggleQueryControls() {
this.showQueryControls = !this.showQueryControls;
this._showQueryControls = !this._showQueryControls;
}

@computed get studyLimitedReached(){
return this.store.selectableSelectedStudyIds.length > 50;
}

@computed get exploreCohortsButtonDisabled(){
return this.studyLimitedReached || !this.store.hasSelectedStudies;
}

@computed get exploreCohortsButtonTooltipMessage(){

if (this.store.selectableSelectedStudyIds.length === 0) {
return "Please selected at least one study";
} else if (this.studyLimitedReached) {
return "Too many studies selected for study summary (limit: 50)";
} else {
return "Open summary of selected studies in a new window."
}

}

render(): JSX.Element {
// {Remove until #3395 is implemented
//
// <OverlappingStudiesWarning studies={this.store.selectedStudies}/>
//}

return (
<FlexCol padded overflow className={classNames('small', styles.QueryContainer)}>
{/*{this.store.forQuickTab && */}
{/*<div>*/}
{/*<QuickSearch/>*/}
{/*<div style={{paddingTop: 25}}>*/}
{/*<HomePageSummary/>*/}
{/*</div>*/}
{/*</div>*/}
{/*}*/}
<FlexCol padded overflow className={
classNames('small', styles.QueryContainer, { forkedExperience:this.props.forkedExperience })
}>
{
this.store.unknownStudyIds.isComplete &&
<UnknownStudiesWarning ids={this.store.unknownStudyIds.result}/>
Expand All @@ -95,8 +120,8 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
{
<If condition={this.store.defaultSelectedIds.size === 0 || this.studiesDataReady}>
<Then>
<If condition={this.showQueryControls}>
<Then>
<If condition={this.props.forkedExperience}>
<Fade duration={500} collapse when={this.showQueryControls}>
<FlexRow className={styles.StudySelection}>
<SectionHeader className={'sectionLabel'}>
Selected Studies:
Expand All @@ -107,11 +132,11 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
<button style={{marginLeft:15}} className={'btn btn-default btn-xs'} onClick={this.toggleQueryControls}>Modify</button>
</div>
</FlexRow>
</Then>
<Else>
<CancerStudySelector queryStore={this.store}/>
</Else>
</Fade>
</If>

{ this.getWrappedCancerStudySelector }

<If condition={this.showQueryControls}>
<>
{this.store.physicalStudyIdsInSelection.length > 1 ?
Expand All @@ -131,8 +156,8 @@ export default class QueryContainer extends React.Component<QueryContainerProps,

{!!(this.store.forDownloadTab) && (
<span className={styles.downloadSubmitExplanation}>
Clicking submit will generate a tab-delimited file containing your requested data.
</span>
Clicking submit will generate a tab-delimited file containing your requested data.
</span>
)}

{!!(this.store.forDownloadTab) && (
Expand All @@ -151,8 +176,6 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
onClick={() => this.handleSubmit()} data-test='queryButton'>
{!this.store.forDownloadTab ? "Submit Query" : "Download"}
</button>
<a href={"#"} style={{position: 'absolute', left: 66, top: 66}}
onClick={this.toggleQueryControls}>Start Over</a>
<FlexCol>
{!!(this.store.submitError) && (
<span className={styles.errorMessage} data-test="oqlErrorMessage">
Expand Down Expand Up @@ -194,12 +217,11 @@ export default class QueryContainer extends React.Component<QueryContainerProps,
destroyTooltipOnHide={true}
mouseEnterDelay={0}
mouseLeaveDelay={0}
disabled={this.store.hasSelectedStudies}
overlay={"Please select at least one study above"}>
overlay={this.exploreCohortsButtonTooltipMessage}>
<div>{/* this div is here to handle a problem with mouse events on disabled buttons */}
<button onClick={() => alert('User is taken to study view.')}
disabled={!this.store.hasSelectedStudies}
className={'btn btn-primary btn-lg'}>Explore Selected Cohorts</button>
<button onClick={()=>this.store.openSummary()}
disabled={this.exploreCohortsButtonDisabled}
className={'btn btn-primary btn-lg'}> <i style={{marginTop:5}} className='ci ci-pie-chart'></i> Explore Selected Studies</button>
</div>
</DefaultTooltip>
</FlexRow>
Expand Down
25 changes: 16 additions & 9 deletions src/shared/components/query/styles/styles.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,22 @@
width:246px;
}

&:global(.forkedExperience) {
> div:nth-child(2) {
margin-top:0px !important;
}

.forkedButtons {
justify-content: center;
align-items: center;
> div { // we have to use span to fix issue with mouseover events and disabled button controls
margin:10px !important;
padding:10px;
}
}

}

label {
margin-bottom: 0;
font-weight: normal;
Expand Down Expand Up @@ -619,15 +635,6 @@ div.submitRow {
}
}

.forkedButtons {
justify-content: center;
align-items: center;
> div { // we have to use span to fix issue with mouseover events and disabled button controls
margin:10px !important;
padding:10px;
}
}

.StudySelection {
align-items:center;
}
2 changes: 1 addition & 1 deletion src/shared/components/sectionHeader/styles.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ div.SectionHeader {
}

h2 {
font: normal normal 700 16px/22px 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
color:#333 !important;
flex-grow: 2;
margin: 0 !important;
font-size:15px;
}

.error {
Expand Down
Loading

0 comments on commit 81d7668

Please sign in to comment.