diff --git a/src/pages/studyView/addChartButton/AddChartButton.tsx b/src/pages/studyView/addChartButton/AddChartButton.tsx index 8246b346ba2..0955e19b9fd 100644 --- a/src/pages/studyView/addChartButton/AddChartButton.tsx +++ b/src/pages/studyView/addChartButton/AddChartButton.tsx @@ -19,7 +19,11 @@ import { StudyViewPageTabKeyEnum } from 'pages/studyView/StudyViewPageTabs'; import autobind from 'autobind-decorator'; import _ from 'lodash'; import AddChartByType from './addChartByType/AddChartByType'; -import { DefaultTooltip, remoteData } from 'cbioportal-frontend-commons'; +import { + DefaultTooltip, + isWebdriver, + remoteData, +} from 'cbioportal-frontend-commons'; import CustomCaseSelection from './customCaseSelection/CustomCaseSelection'; import { calculateClinicalDataCountFrequency, @@ -50,6 +54,7 @@ import { CustomChartData } from 'shared/api/session-service/sessionServiceModels import ReactSelect from 'react-select'; import { GenericAssayMeta } from 'cbioportal-ts-api-client'; import { DataTypeConstants } from 'shared/constants'; +import { Else, If, Then } from 'react-if'; export interface IAddChartTabsProps { store: StudyViewPageStore; @@ -629,6 +634,23 @@ class AddChartTabs extends React.Component { @computed get notificationMessages() { let notificationMessages: JSX.Element[] = []; + if (!this.props.store.isLoggedIn) { + notificationMessages.push( + <> + +  to add custom data charts to your profile. + + ); + return notificationMessages; + } + if (this.props.store.customChartSet.size > 0) { // Notify if there any shared custom data if (this.existSharedCustomData) { @@ -644,28 +666,6 @@ class AddChartTabs extends React.Component { are shared custom data. ); - } - // Notify that shared and page-session custom data are not saved for non-logged users - if ( - !this.props.store.isLoggedIn && - this.props.store.appStore.isSocialAuthenticated - ) { - if (notificationMessages.length > 0) { - notificationMessages.push(
); - } - notificationMessages.push( - <> - -  to save custom data charts to your profile. - - ); } else if (this.existSharedCustomData) { // Notify if shared custom data are saved to user profile if (notificationMessages.length > 0) { @@ -911,104 +911,135 @@ class AddChartTabs extends React.Component { this.getTabsWidth - CONTAINER_PADDING_WIDTH, }} > - {this.customChartDataOptions.length > 0 && ( - + {!this.props.store.isLoggedIn && ( + <> +
+ + Please {this.notificationMessages} + + )} - - {this.isAddNewChartWindowVisible && ( - { - this.showAddNewChart = false; - this.savingCustomData = true; - this.updateInfoMessage( - `Saving ${chart.displayName}` - ); - this.props.store - .addCustomChart(chart) - .then(() => { - this.savingCustomData = false; - this.updateInfoMessage( - `${chart.displayName} has been added.` - ); - }); - }} - /> - )} - - <> - {this.customChartDataOptions.length > 0 && ( - <> -
- + {this.customChartDataOptions.length > 0 && ( + + )} + + {this.isAddNewChartWindowVisible && ( + { - this.props.store.toggleCustomChartMarkedForDeletion( - id - ); - }} - restoreChart={(id: string) => { - this.props.store.toggleCustomChartMarkedForDeletion( - id - ); - }} - markedForDeletion={ + submitButtonText={'Add Chart'} + queriedStudies={ this.props.store - .customChartGroupMarkedForDeletion + .queriedPhysicalStudyIds + .result } + isChartNameValid={ + this.props.store + .isChartNameValid + } + getDefaultChartName={ + this.props.store + .getDefaultCustomChartName + } + disableSubmitButton={ + this.savingCustomData + } + onSubmit={( + chart: CustomChartData + ) => { + this.showAddNewChart = false; + this.savingCustomData = true; + this.updateInfoMessage( + `Saving ${chart.displayName}` + ); + this.props.store + .addCustomChart(chart) + .then(() => { + this.savingCustomData = false; + this.updateInfoMessage( + `${chart.displayName} has been added.` + ); + }); + }} /> - - )} - {this.notificationMessages.length > 0 && ( + )} + <> -
- - Note: {this.notificationMessages} - + {this.customChartDataOptions.length > + 0 && ( + <> +
+ { + this.props.store.toggleCustomChartMarkedForDeletion( + id + ); + }} + restoreChart={( + id: string + ) => { + this.props.store.toggleCustomChartMarkedForDeletion( + id + ); + }} + markedForDeletion={ + this.props.store + .customChartGroupMarkedForDeletion + } + /> + + )} + {this.notificationMessages.length > + 0 && ( + <> +
+ + Note:{' '} + {this.notificationMessages} + + + )} - )} - + + )}