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.

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

Optionally show NA when comparing categorical clinical data #4113

Merged
merged 1 commit into from
Jan 7, 2022
Merged
Changes from all commits
Commits
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
Show NA categorical data in clinical comparison
Add checkbox to show NA and NA like values when making clinical
comparison. Note that the testing itself filters these values out on the
backend, so it only affects the visual representation in the charts.
inodb committed Jan 7, 2022
commit e1d20688d47d09b3bd55c6e46efc5aaf187e3d7a
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 63 additions & 7 deletions src/pages/groupComparison/ClinicalData.tsx
Original file line number Diff line number Diff line change
@@ -246,6 +246,7 @@ export default class ClinicalData extends React.Component<
@observable logScaleFunction: IAxisLogScaleParams | undefined;
@observable swapAxes = false;
@observable horizontalBars = false;
@observable showNA = false;

@action.bound
private onClickLogScale() {
@@ -273,6 +274,53 @@ export default class ClinicalData extends React.Component<
this.horizontalBars = !this.horizontalBars;
}

@action.bound
private onClickShowNA() {
this.showNA = !this.showNA;
}

private readonly clinicalDataPromiseFiltered = remoteData({
await: () => [this.clinicalDataPromise, this.props.store.samples],
invoke: () => {
const axisData = this.clinicalDataPromise.result!;
// for string like values include NA values if requested
// TODO: implement for numbers
if (
this.showNA &&
axisData.datatype === 'string' &&
this.props.store.samples.result!.length > 0
) {
const naSamples = _.difference(
_.uniq(
this.props.store.samples.result!.map(
x => x.uniqueSampleKey
)
),
_.uniq(axisData.data.map(x => x.uniqueSampleKey))
);
return Promise.resolve({
...axisData,
data: axisData.data.concat(
naSamples.map(x => ({
uniqueSampleKey: x,
value: 'NA',
}))
),
});
} else {
// filter out NA-like values (e.g. unknown)
return Promise.resolve({
...axisData,
data: axisData.data.filter(
x =>
typeof x.value !== 'string' ||
x.value.toLowerCase() !== 'unknown'
),
});
}
},
});

private readonly clinicalDataPromise = remoteData({
await: () => [
this.props.store.patientKeyToSamples,
@@ -319,11 +367,6 @@ export default class ClinicalData extends React.Component<
},
});

// filter out NA like values
clinicalData = clinicalData.filter(
d => d.value.toLowerCase() !== 'unknown'
);

let normalizedCategory: { [id: string]: string } = {};
for (const d of clinicalData) {
const lowerCaseValue = d.value.toLowerCase();
@@ -430,12 +473,12 @@ export default class ClinicalData extends React.Component<
@computed get vertAxisDataPromise() {
return this.swapAxes
? this.groupMembershipAxisData
: this.clinicalDataPromise;
: this.clinicalDataPromiseFiltered;
}

@computed get horzAxisDataPromise() {
return this.swapAxes
? this.clinicalDataPromise
? this.clinicalDataPromiseFiltered
: this.groupMembershipAxisData;
}

@@ -646,6 +689,19 @@ export default class ClinicalData extends React.Component<
Log Scale
</label>
)}
{this.clinicalDataPromise.result &&
this.clinicalDataPromise.result.datatype ===
'string' && (
<label className="checkbox-inline">
<input
type="checkbox"
checked={this.showNA}
onClick={this.onClickShowNA}
data-test="showNA"
/>
Show NA
</label>
)}
</div>
</div>
);
2 changes: 0 additions & 2 deletions src/pages/groupComparison/GroupComparisonStore.ts
Original file line number Diff line number Diff line change
@@ -305,8 +305,6 @@ export default class GroupComparisonStore extends ComparisonStore {
}
}

debugger;

return allSamples.filter(sample => {
return sampleSet.has({
studyId: sample.studyId,