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

Make entire CNA table row clickable and add feature instruction #4334

Merged
merged 1 commit into from
Jul 28, 2022
Merged

Make entire CNA table row clickable and add feature instruction #4334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 10 additions & 5 deletions src/pages/patientView/PatientViewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import _ from 'lodash';
import {
CancerStudy,
ClinicalData,
DiscreteCopyNumberData,
ResourceData,
} from 'cbioportal-ts-api-client';
import {
Expand Down Expand Up @@ -249,11 +250,6 @@ export default class PatientViewPage extends React.Component<
}
}

@action.bound
public handleCNATableGeneClick(hugoGeneSymbol: string) {
this.handleLocusChange(hugoGeneSymbol);
}

@action.bound
handlePatientClick(id: string) {
let values = id.split(':');
Expand Down Expand Up @@ -478,17 +474,26 @@ export default class PatientViewPage extends React.Component<
this.handleLocusChange(d[0].gene.hugoGeneSymbol);
}
}

@autobind
onMutationTableRowMouseEnter(d: Mutation[]) {
if (d.length) {
this.patientViewMutationDataStore.setMouseOverMutation(d[0]);
}
}

@autobind
onMutationTableRowMouseLeave() {
this.patientViewMutationDataStore.setMouseOverMutation(null);
}

@action.bound
onCnaTableRowClick(d: DiscreteCopyNumberData[]) {
if (d.length) {
this.handleLocusChange(d[0].gene.hugoGeneSymbol);
}
}

readonly resourceTabs = MakeMobxView({
await: () => [
this.patientViewPageStore.resourceDefinitions,
Expand Down
220 changes: 113 additions & 107 deletions src/pages/patientView/PatientViewPageTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ import {
doesFrequencyExist,
} from 'pages/patientView/genomicOverview/GenomicOverviewUtils';
import genomicOverviewStyles from 'pages/patientView/genomicOverview/styles.module.scss';
import { useCallback, useRef } from 'react';
import FeatureInstruction from 'shared/FeatureInstruction/FeatureInstruction';
import { HelpWidget } from 'shared/components/HelpWidget/HelpWidget';

Expand All @@ -53,6 +52,8 @@ export enum PatientViewPageTabs {
}

export const PatientViewResourceTabPrefix = 'openResource_';
export const TABLE_FEATURE_INSTRUCTION =
'Click on an alteration to zoom in on the gene in the IGV browser above';

export function getPatientViewResourceTabId(resourceId: string) {
return `${PatientViewResourceTabPrefix}${resourceId}`;
Expand Down Expand Up @@ -254,9 +255,7 @@ export function tabs(
.isComplete &&
!!sampleManager && (
<div data-test="patientview-mutation-table">
<FeatureInstruction
content={'Click gene row to zoom IGV browser'}
>
<FeatureInstruction content={TABLE_FEATURE_INSTRUCTION}>
<PatientViewMutationTable
studyIdToStudy={
pageComponent.patientViewPageStore
Expand Down Expand Up @@ -529,109 +528,116 @@ export function tabs(
pageComponent.patientViewPageStore.referenceGenes
.isComplete && (
<div data-test="patientview-copynumber-table">
<CopyNumberTableWrapper
uniqueSampleKeyToTumorType={
pageComponent.patientViewPageStore
.uniqueSampleKeyToTumorType
}
studyIdToStudy={
pageComponent.patientViewPageStore
.studyIdToStudy.result
}
sampleIds={
sampleManager
? sampleManager.getSampleIdsInOrder()
: []
}
sampleManager={sampleManager}
sampleToGenePanelId={
pageComponent.patientViewPageStore
.sampleToDiscreteGenePanelId.result
}
genePanelIdToEntrezGeneIds={
pageComponent.patientViewPageStore
.genePanelIdToEntrezGeneIds.result
}
cnaOncoKbData={
pageComponent.patientViewPageStore.cnaOncoKbData
}
cnaCivicGenes={
pageComponent.patientViewPageStore.cnaCivicGenes
}
cnaCivicVariants={
pageComponent.patientViewPageStore
.cnaCivicVariants
}
oncoKbCancerGenes={
pageComponent.patientViewPageStore
.oncoKbCancerGenes
}
usingPublicOncoKbInstance={
pageComponent.patientViewPageStore
.usingPublicOncoKbInstance
}
mergeOncoKbIcons={
pageComponent.patientViewPageStore
.mergeOncoKbIcons
}
enableOncoKb={getServerConfig().show_oncokb}
enableCivic={getServerConfig().show_civic}
userEmailAddress={
getServerConfig().user_email_address
}
pubMedCache={
pageComponent.patientViewPageStore.pubMedCache
}
referenceGenes={
pageComponent.patientViewPageStore
.referenceGenes.result
}
data={
pageComponent.patientViewPageStore
.mergedDiscreteCNADataFilteredByGene
}
copyNumberCountCache={
pageComponent.patientViewPageStore
.copyNumberCountCache
}
mrnaExprRankCache={
pageComponent.patientViewPageStore
.mrnaExprRankCache
}
gisticData={
pageComponent.patientViewPageStore.gisticData
.result
}
mrnaExprRankMolecularProfileId={
pageComponent.patientViewPageStore
.mrnaRankMolecularProfileId.result ||
undefined
}
status={pageComponent.cnaTableStatus}
columnVisibility={
pageComponent.cnaTableColumnVisibility
}
showGeneFilterMenu={
pageComponent.patientViewPageStore
.cnaTableShowGeneFilterMenu.result
}
currentGeneFilter={
pageComponent.patientViewPageStore
.copyNumberTableGeneFilterOption
}
onFilterGenes={
pageComponent.onFilterGenesCopyNumberTable
}
columnVisibilityProps={{
onColumnToggled:
pageComponent.onCnaTableColumnVisibilityToggled,
}}
onSelectGenePanel={
pageComponent.toggleGenePanelModal
}
disableTooltip={pageComponent.genePanelModal.isOpen}
onGeneClick={pageComponent.handleCNATableGeneClick}
/>
<FeatureInstruction content={TABLE_FEATURE_INSTRUCTION}>
<CopyNumberTableWrapper
uniqueSampleKeyToTumorType={
pageComponent.patientViewPageStore
.uniqueSampleKeyToTumorType
}
studyIdToStudy={
pageComponent.patientViewPageStore
.studyIdToStudy.result
}
sampleIds={
sampleManager
? sampleManager.getSampleIdsInOrder()
: []
}
sampleManager={sampleManager}
sampleToGenePanelId={
pageComponent.patientViewPageStore
.sampleToDiscreteGenePanelId.result
}
genePanelIdToEntrezGeneIds={
pageComponent.patientViewPageStore
.genePanelIdToEntrezGeneIds.result
}
cnaOncoKbData={
pageComponent.patientViewPageStore
.cnaOncoKbData
}
cnaCivicGenes={
pageComponent.patientViewPageStore
.cnaCivicGenes
}
cnaCivicVariants={
pageComponent.patientViewPageStore
.cnaCivicVariants
}
oncoKbCancerGenes={
pageComponent.patientViewPageStore
.oncoKbCancerGenes
}
usingPublicOncoKbInstance={
pageComponent.patientViewPageStore
.usingPublicOncoKbInstance
}
mergeOncoKbIcons={
pageComponent.patientViewPageStore
.mergeOncoKbIcons
}
enableOncoKb={getServerConfig().show_oncokb}
enableCivic={getServerConfig().show_civic}
userEmailAddress={
getServerConfig().user_email_address
}
pubMedCache={
pageComponent.patientViewPageStore
.pubMedCache
}
referenceGenes={
pageComponent.patientViewPageStore
.referenceGenes.result
}
data={
pageComponent.patientViewPageStore
.mergedDiscreteCNADataFilteredByGene
}
copyNumberCountCache={
pageComponent.patientViewPageStore
.copyNumberCountCache
}
mrnaExprRankCache={
pageComponent.patientViewPageStore
.mrnaExprRankCache
}
gisticData={
pageComponent.patientViewPageStore
.gisticData.result
}
mrnaExprRankMolecularProfileId={
pageComponent.patientViewPageStore
.mrnaRankMolecularProfileId.result ||
undefined
}
status={pageComponent.cnaTableStatus}
columnVisibility={
pageComponent.cnaTableColumnVisibility
}
showGeneFilterMenu={
pageComponent.patientViewPageStore
.cnaTableShowGeneFilterMenu.result
}
currentGeneFilter={
pageComponent.patientViewPageStore
.copyNumberTableGeneFilterOption
}
onFilterGenes={
pageComponent.onFilterGenesCopyNumberTable
}
columnVisibilityProps={{
onColumnToggled:
pageComponent.onCnaTableColumnVisibilityToggled,
}}
onSelectGenePanel={
pageComponent.toggleGenePanelModal
}
disableTooltip={
pageComponent.genePanelModal.isOpen
}
onRowClick={pageComponent.onCnaTableRowClick}
/>
</FeatureInstruction>
</div>
)}
</MSKTab>
Expand Down
16 changes: 7 additions & 9 deletions src/pages/patientView/copyNumberAlterations/CopyNumberTableWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,10 @@ type ICopyNumberTableWrapperProps = {
currentGeneFilter: GeneFilterOption;
onFilterGenes?: (option: GeneFilterOption) => void;
onSelectGenePanel?: (name: string) => void;
onRowClick?: (d: DiscreteCopyNumberData[]) => void;
onRowMouseEnter?: (d: DiscreteCopyNumberData[]) => void;
onRowMouseLeave?: (d: DiscreteCopyNumberData[]) => void;
disableTooltip?: boolean;
onGeneClick?: (hugoSymbol: string) => void;
};

const ANNOTATION_ELEMENT_ID = 'copy-number-annotation';
Expand Down Expand Up @@ -164,14 +166,7 @@ export default class CopyNumberTableWrapper extends React.Component<
columns.push({
name: 'Gene',
render: (d: DiscreteCopyNumberData[]) => (
<span
data-test="cna-table-gene-column"
onClick={() =>
this.props.onGeneClick &&
this.props.onGeneClick(d[0].gene.hugoGeneSymbol)
}
style={{ cursor: 'pointer' }}
>
<span data-test="cna-table-gene-column">
{d[0].gene.hugoGeneSymbol}
</span>
),
Expand Down Expand Up @@ -389,6 +384,9 @@ export default class CopyNumberTableWrapper extends React.Component<
showCountHeader={true}
columnVisibility={this.props.columnVisibility}
columnVisibilityProps={this.props.columnVisibilityProps}
onRowClick={this.props.onRowClick}
onRowMouseEnter={this.props.onRowMouseEnter}
onRowMouseLeave={this.props.onRowMouseLeave}
/>
)}
</div>
Expand Down