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

show user-specified samples in genomic evolution chart #5089

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

show user-specified samples in genomic evolution chart #5089

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8d8fd22
added function to retrieve all sampleid
svihang8 Jan 23, 2025
d2267f6
added selection by sampleid ui feature
svihang8 Jan 23, 2025
5a6185b
refactored selection feature to make it more concise and remove all a…
svihang8 Jan 24, 2025
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
5,323 changes: 1 addition & 5,322 deletions packages/cbioportal-ts-api-client/src/generated/CBioPortalAPI-docs.json
View file
Open in desktop

Large diffs are not rendered by default.

10,487 changes: 5,299 additions & 5,188 deletions packages/cbioportal-ts-api-client/src/generated/CBioPortalAPIInternal-docs.json
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 11 additions & 0 deletions src/pages/patientView/SampleManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,17 @@ export function getSpecimenCollectionDayMap(
return collectionDayMap;
}

export function sampleIdsForSamples(samples: Array<ClinicalDataBySampleId>) {
let output: { id: string; value: string }[] = [];
samples.forEach((sample, sampleIndex) => {
output.push({
id: sample.id,
value: sample.id,
});
});
return output;
}

export function clinicalAttributeListForSamples(
samples: Array<ClinicalDataBySampleId>
) {
Expand Down
94 changes: 92 additions & 2 deletions src/pages/patientView/timeline/VAFChartControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,61 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import ReactSelect from 'react-select';
import SampleManager, {
clinicalAttributeListForSamples,
sampleIdsForSamples,
} from '../SampleManager';
import LabeledCheckbox from '../../../shared/components/labeledCheckbox/LabeledCheckbox';
import VAFChartWrapperStore from './VAFChartWrapperStore';

import _ from 'lodash';
import { CheckedSelect } from 'cbioportal-frontend-commons';
interface IVAFChartControlsProps {
wrapperStore: VAFChartWrapperStore;
sampleManager: SampleManager;
}

export const GROUP_BY_NONE = 'None';
export const SELECT_SAMPLE_ALL = {
label: 'All',
value: 'All',
};
export const SELECT_SAMPLE_NONE = {
label: 'None',
value: 'None',
};
export const SELECTED_SAMPLE_PLACEHOLDER = 'Selected Samples';

const VAFChartControls: React.FunctionComponent<IVAFChartControlsProps> = observer(
function({ wrapperStore, sampleManager }) {
const [
isInitialSelectedSamples,
setisInitialSelectedSamples,
] = useState(true);

const selectedSamplesOptions = [
...sampleIdsForSamples(sampleManager.samples).map(item => ({
label: `${item.value}`,
value: `${item.id}`,
})),
];

function selectSamplesByValue() {
let allSelectedSamples = selectedSamplesOptions;
if (isInitialSelectedSamples) {
console.log('running initial');
wrapperStore.setSelectedSamplesOptions(allSelectedSamples);
setisInitialSelectedSamples(!isInitialSelectedSamples);
}
console.log(
`wrapper store : ${JSON.stringify(
wrapperStore.selectedSamplesOptions
)}`
);
return wrapperStore.selectedSamplesOptions.map(sample => ({
value: sample.value,
}));
}

const groupByOptions = [
{
label: GROUP_BY_NONE,
Expand All @@ -34,6 +74,8 @@ const VAFChartControls: React.FunctionComponent<IVAFChartControlsProps> = observ
opt => opt.value == wrapperStore.groupByOption
);

console.log(`Group By Value : ${value}`);

return value
? {
label: value.label,
Expand All @@ -42,8 +84,56 @@ const VAFChartControls: React.FunctionComponent<IVAFChartControlsProps> = observ
: '';
}

const SelectedSampleChecklistComponent: React.FC<any> = props => {
const { data, isSelected, innerRef, innerProps } = props;
return (
<div
ref={innerRef}
{...innerProps}
style={{
display: 'flex',
alignItems: 'center',
padding: '5px',
}}
>
<input
type="checkbox"
checked={isSelected}
onChange={() => {}}
style={{ marginRight: '10px' }}
/>
<label>{data.label}</label>
</div>
);
};

return (
<div className={'VAFChartControls'} data-test={'VAFChartControls'}>
<div style={{ width: '100%', maxWidth: '300px' }}>
<CheckedSelect
name={'select-by-sample-select'}
value={selectSamplesByValue()}
options={selectedSamplesOptions}
placeholder={SELECTED_SAMPLE_PLACEHOLDER}
onChange={(options: Array<any>) => {
console.log(`Options : ${JSON.stringify(options)}`);
options = options.map(option => {
return {
value: option.value,
label: option.value,
};
});
wrapperStore.setSelectedSamplesOptions(options);
}}
// isMulti
// components={{
// Option: SelectedSampleChecklistComponent,
// }}
// closeMenuOnSelect={false}
// hideSelectedOptions={false}
/>
</div>

<label>
Group by:&nbsp;
<ReactSelect
Expand Down
78 changes: 78 additions & 0 deletions src/pages/patientView/timeline/VAFChartUtils.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,13 @@ describe('VAFChartUtils', () => {
} as Sample;
}

function makeSelectedSample(i: number) {
return {
label: `sample${i}`,
value: `sample${i}`,
};
}

function makeMutation(
sampleI: number,
hugoGeneSymbol: string,
Expand Down Expand Up @@ -187,6 +194,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2, 3], []),
GROUP_BY_NONE,
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{}
),
{
Expand Down Expand Up @@ -228,6 +240,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2, 3], []),
GROUP_BY_NONE,
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{}
),
{
Expand Down Expand Up @@ -380,6 +397,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2, 3], []),
GROUP_BY_NONE,
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{}
),
{
Expand Down Expand Up @@ -515,6 +537,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2, 3], []),
GROUP_BY_NONE,
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{}
),
{
Expand Down Expand Up @@ -611,6 +638,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2, 3], []),
GROUP_BY_NONE,
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{}
),
{
Expand Down Expand Up @@ -736,6 +768,11 @@ describe('VAFChartUtils', () => {
]
),
GROUP_BY_NONE,
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{}
),
{
Expand Down Expand Up @@ -833,6 +870,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2], [3]),
GROUP_BY_NONE,
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{}
),
{
Expand Down Expand Up @@ -918,6 +960,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2, 3], []),
'SampleType',
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{
sample1: 'Primary',
sample2: 'Recurrence',
Expand Down Expand Up @@ -1078,6 +1125,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2, 3], []),
'SampleCollectionSource',
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{
sample1: 'Outside',
sample2: 'Inside',
Expand Down Expand Up @@ -1190,6 +1242,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2, 3], []),
'SampleCollectionSource',
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{
sample1: 'Outside',
sample2: 'Inside',
Expand Down Expand Up @@ -1276,6 +1333,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2, 3], []),
'SampleCollectionSource',
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{
sample1: 'Outside',
sample2: 'Inside',
Expand Down Expand Up @@ -1388,6 +1450,11 @@ describe('VAFChartUtils', () => {
]
),
'SampleCollectionSource',
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{
sample1: 'Outside',
sample2: 'Inside',
Expand Down Expand Up @@ -1470,6 +1537,11 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2], [3]),
'SampleType',
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
],
{
sample1: 'Primary',
sample2: 'Recurrence',
Expand Down Expand Up @@ -1552,6 +1624,12 @@ describe('VAFChartUtils', () => {
'mutations',
makeCoverageInfo([1, 2, 3, 4], []),
'TumorPurity',
[
makeSelectedSample(1),
makeSelectedSample(2),
makeSelectedSample(3),
makeSelectedSample(4),
],
{ sample2: '40', sample3: '30', sample4: '30' }
),
{
Expand Down
22 changes: 22 additions & 0 deletions src/pages/patientView/timeline/VAFChartUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,32 @@ export function computeRenderData(
mutationProfileId: string,
coverageInformation: CoverageInformation,
groupByOption: string,
selectedSamplesOption: any[],
sampleIdToClinicalValue: { [sampleId: string]: string }
) {
const grayPoints: IPoint[] = []; // points that are purely interpolated for rendering, dont have data of their own
const lineData: IPoint[][] = [];
console.log(`Selected Samples : ${JSON.stringify(selectedSamplesOption)}`);
samples = samples.filter(sample => {
return _.some(selectedSamplesOption, {
label: sample.sampleId,
value: sample.sampleId,
});
});
mutations = mutations
.map(mutationArr =>
mutationArr.filter(mutation => {
return _.some(selectedSamplesOption, {
label: mutation.sampleId,
value: mutation.sampleId,
});
})
)
.filter(mutation => mutation.length > 0);
console.log(`Samples : ${JSON.stringify(samples)}`);
console.log(`Count of Samples : ${samples.length}`);
console.log(`Mutations : ${JSON.stringify(mutations)}`);
console.log(`Count of Mutations : ${mutations.length}`);

if (groupByOption && groupByOption != GROUP_BY_NONE)
mutations = splitMutationsBySampleGroup(
Expand Down
1 change: 1 addition & 0 deletions src/pages/patientView/timeline/VAFChartWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ export default class VAFChartWrapper extends React.Component<
this.props.mutationProfileId,
this.props.coverageInformation,
this.props.wrapperStore.groupByOption!,
this.props.wrapperStore.selectedSamplesOptions,
this.sampleIdToClinicalValue
).lineData;
}
Expand Down
6 changes: 6 additions & 0 deletions src/pages/patientView/timeline/VAFChartWrapperStore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { getServerConfig } from 'config/config';

export default class VAFChartWrapperStore {
@observable groupByOption: string | null = null;
@observable selectedSamplesOptions: Array<any> = [];

@observable _showSequentialMode: boolean = getServerConfig()
.vaf_sequential_mode_default;
Expand Down Expand Up @@ -30,6 +31,11 @@ export default class VAFChartWrapperStore {
this.groupByOption = value;
}

@action
setSelectedSamplesOptions(value: Array<any>) {
this.selectedSamplesOptions = value;
}

@action
setShowSequentialMode(value: boolean) {
this._showSequentialMode = value;
Expand Down