Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Require login for custom data #5003

Merged
merged 3 commits into from
Sep 23, 2024
Merged

Require login for custom data #5003

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d3b54d8
Disable custom data charts when user is not logged in
Nelliney Sep 18, 2024
21dd960
update screens
alisman Sep 20, 2024
c6adf1f
update screens
alisman Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
257 changes: 144 additions & 113 deletions src/pages/studyView/addChartButton/AddChartButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -629,6 +634,23 @@ class AddChartTabs extends React.Component<IAddChartTabsProps, {}> {

@computed get notificationMessages() {
let notificationMessages: JSX.Element[] = [];
if (!this.props.store.isLoggedIn) {
notificationMessages.push(
<>
<button
className="btn btn-default btn-xs"
onClick={() =>
openSocialAuthWindow(this.props.store.appStore)
}
>
Login
</button>
&nbsp;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) {
Expand All @@ -644,28 +666,6 @@ class AddChartTabs extends React.Component<IAddChartTabsProps, {}> {
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(<br />);
}
notificationMessages.push(
<>
<button
className="btn btn-default btn-xs"
onClick={() =>
openSocialAuthWindow(this.props.store.appStore)
}
>
Login
</button>
&nbsp;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) {
Expand Down Expand Up @@ -911,104 +911,135 @@ class AddChartTabs extends React.Component<IAddChartTabsProps, {}> {
this.getTabsWidth - CONTAINER_PADDING_WIDTH,
}}
>
{this.customChartDataOptions.length > 0 && (
<button
className="btn btn-primary btn-xs"
onClick={this.onToggleAddNewChart}
>
{this.isAddNewChartWindowVisible
? 'Cancel'
: '+ Add new custom data'}
</button>
{!this.props.store.isLoggedIn && (
<>
<br />
<span className="text-warning">
Please {this.notificationMessages}
</span>
</>
)}

{this.isAddNewChartWindowVisible && (
<CustomCaseSelection
allSamples={this.props.store.samples.result}
selectedSamples={
this.props.store.selectedSamples.result
}
submitButtonText={'Add Chart'}
queriedStudies={
this.props.store.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.customChartDataOptions.length > 0 && (
<>
<hr
style={{
marginTop: 10,
marginBottom: 10,
}}
/>
<AddChartByType
width={this.getTabsWidth}
options={
this.customChartDataOptions
{(this.props.store.isLoggedIn || isWebdriver()) && (
<div>
{this.customChartDataOptions.length > 0 && (
<button
className="btn btn-primary btn-xs"
onClick={this.onToggleAddNewChart}
>
{this.isAddNewChartWindowVisible
? 'Cancel'
: '+ Add new custom data'}
</button>
)}

{this.isAddNewChartWindowVisible && (
<CustomCaseSelection
allSamples={
this.props.store.samples.result
}
freqPromise={this.dataCount}
onAddAll={this.onAddAll}
onClearAll={this.onClearAll}
onToggleOption={this.onToggleOption}
hideControls={true}
firstColumnHeaderName="Custom data"
shareCharts={
this.props
.openShareCustomDataUrlModal
selectedSamples={
this.props.store.selectedSamples
.result
}
deleteChart={(id: string) => {
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 && (
)}

<>
<br />
<span className="text-warning">
Note: {this.notificationMessages}
</span>
{this.customChartDataOptions.length >
0 && (
<>
<hr
style={{
marginTop: 10,
marginBottom: 10,
}}
/>
<AddChartByType
width={this.getTabsWidth}
options={
this
.customChartDataOptions
}
freqPromise={this.dataCount}
onAddAll={this.onAddAll}
onClearAll={this.onClearAll}
onToggleOption={
this.onToggleOption
}
hideControls={true}
firstColumnHeaderName="Custom data"
shareCharts={
this.props
.openShareCustomDataUrlModal
}
deleteChart={(
id: string
) => {
this.props.store.toggleCustomChartMarkedForDeletion(
id
);
}}
restoreChart={(
id: string
) => {
this.props.store.toggleCustomChartMarkedForDeletion(
id
);
}}
markedForDeletion={
this.props.store
.customChartGroupMarkedForDeletion
}
/>
</>
)}
{this.notificationMessages.length >
0 && (
<>
<br />
<span className="text-warning">
Note:{' '}
{this.notificationMessages}
</span>
</>
)}
</>
)}
</>
</div>
)}
</div>
</MSKTab>
<MSKTab
Expand Down
Loading