Skip to content

Commit

Permalink
Make entire CNA table row clickable and add feature instruction
Browse files Browse the repository at this point in the history
  • Loading branch information
@onursumer
onursumer committed Jul 22, 2022
1 parent 8676744 commit 2b54b45
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 121 deletions.
15 changes: 10 additions & 5 deletions src/pages/patientView/PatientViewPage.tsx
View file
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
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
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

0 comments on commit 2b54b45

Please sign in to comment.