Skip to content
This repository has been archived by the owner on Jul 9, 2024. It is now read-only.

Prtl 2484 categorical curves #2486

Merged
merged 29 commits into from
Apr 9, 2019
Merged

Prtl 2484 categorical curves #2486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
b974470
make overall survival plot full height
samrichca Mar 18, 2019
165b9ab
wip
samrichca Mar 20, 2019
0873ff1
show overall plot when nothing is selecteD
samrichca Mar 20, 2019
020e361
disable buttons with insufficent survival data
samrichca Mar 20, 2019
6701ca3
wip
samrichca Mar 20, 2019
8ef86f2
wip
samrichca Mar 20, 2019
1dff188
stopped survival plots from loading multiple times
samrichca Mar 22, 2019
640ea01
continuous survival plot working
samrichca Mar 22, 2019
df5f109
categorical survival plot works
samrichca Apr 3, 2019
8ab7cd7
refactoring
samrichca Apr 3, 2019
d6e1705
creating the right data for 2 default continuous survival curves
samrichca Apr 3, 2019
abc29a0
showing top 2 continuous values
samrichca Apr 3, 2019
0e34f4f
working on button tooltips
samrichca Apr 3, 2019
7497733
working on button tooltips
samrichca Apr 3, 2019
e56814e
finished button tooltips for continuous survival
samrichca Apr 3, 2019
040f201
working on continuous survival plot, all curves are showing up
samrichca Apr 3, 2019
0b048f2
remove sorting in selected continuous survival curves
samrichca Apr 3, 2019
d83e092
remove initial load of all curve data
samrichca Apr 4, 2019
838641e
improved performance in survival plots
samrichca Apr 4, 2019
cc9daae
refactoring
samrichca Apr 4, 2019
2e815e2
cleanup, make disabled buttons fade out
samrichca Apr 4, 2019
cc7feea
cleanup, disable _missing vales
samrichca Apr 4, 2019
c285a36
merge with PRTL-2417
samrichca Apr 5, 2019
2030384
refactoring
samrichca Apr 5, 2019
ef1abbe
refactoring
samrichca Apr 5, 2019
caabc96
refactoring
samrichca Apr 8, 2019
e67a6c1
add count link back to continuous cards
samrichca Apr 8, 2019
ea96fb6
add props change check
samrichca Apr 9, 2019
b3b3a13
revert typescript formatting
samrichca Apr 9, 2019
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
1 change: 1 addition & 0 deletions src/packages/@ncigdc/components/Explore/GenesTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ export default compose(
<SurvivalPlotWrapper
{...survivalData}
onReset={() => setSelectedSurvivalData({})}
plotType="mutation"
height={240}
survivalPlotLoading={loading}
/>
Expand Down
1 change: 1 addition & 0 deletions src/packages/@ncigdc/components/Explore/MutationsTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ export default compose(
<SurvivalPlotWrapper
{...survivalData}
onReset={() => setSelectedSurvivalData({})}
plotType="mutation"
height={240}
survivalPlotLoading={false}
/>
Expand Down
106 changes: 57 additions & 49 deletions src/packages/@ncigdc/components/SurvivalPlotWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,8 @@ const SurvivalPlotWrapper = ({
setSurvivalContainer,
survivalPlotLoading = false,
uniqueClass,
palette = [colors(0), colors(1)],
customClass,
palette = [colors(0), colors(1), colors(2), colors(3), colors(4)],
plotType,
}: TProps) => {
const { results = [], overallStats = {} } = rawData || {};
const pValue = overallStats.pValue;
Expand All @@ -106,56 +106,64 @@ const SurvivalPlotWrapper = ({
loading={survivalPlotLoading}
height={height}
className={uniqueClass}
className={customClass}
>
{!survivalPlotLoading && (
<Column className="test-survival-plot-meta">
<VisualizationHeader
title={TITLE}
title={plotType === 'mutation' ? TITLE : ''}
buttons={[
<DownloadVisualizationButton
key="download"
svg={() =>
wrapSvg({
selector: `.${uniqueClass} .${CLASS_NAME} svg`,
title: TITLE,
className: CLASS_NAME,
embed: {
top: {
elements: [
document.querySelector(`.${uniqueClass} .legend-0`),
document.querySelector(`.${uniqueClass} .legend-1`),
pValue
? document.querySelector(`.${uniqueClass} .p-value`)
: null,
],
},
},
})
}
data={results.map((set, i) => ({
...set,
meta: {
...set.meta,
label: set.meta.label || `S${i + 1}`,
},
}))}
stylePrefix={`.${CLASS_NAME}`}
slug="survival-plot"
noText
tooltipHTML="Download SurvivalPlot data or image"
tsvData={results.reduce((data, set, i) => {
const mapData = set.donors.map(d => toMap(d));
return [
...data,
...(results.length > 1
? mapData.map(m =>
m.set('label', set.meta.label || `S${i + 1}`)
)
: mapData),
];
}, [])}
/>,
...(plotType === 'mutation'
? [
<DownloadVisualizationButton
key="download"
svg={() =>
wrapSvg({
selector: `.${uniqueClass} .${CLASS_NAME} svg`,
title: TITLE,
className: CLASS_NAME,
embed: {
top: {
elements: [
document.querySelector(
`.${uniqueClass} .legend-0`
),
document.querySelector(
`.${uniqueClass} .legend-1`
),
pValue
? document.querySelector(
`.${uniqueClass} .p-value`
)
: null,
],
},
},
})}
data={results.map((set, i) => ({
...set,
meta: {
...set.meta,
label: set.meta.label || `S${i + 1}`,
},
}))}
stylePrefix={`.${CLASS_NAME}`}
slug="survival-plot"
noText
tooltipHTML="Download SurvivalPlot data or image"
tsvData={results.reduce((data, set, i) => {
const mapData = set.donors.map(d => toMap(d));
return [
...data,
...(results.length > 1
? mapData.map(m =>
m.set('label', set.meta.label || `S${i + 1}`)
)
: mapData),
];
}, [])}
/>,
]
: []),
<Tooltip Component="Reset SurvivalPlot Zoom" key="reset">
<Button style={visualizingButton} onClick={() => setXDomain()}>
<i className="fa fa-undo" />
Expand Down Expand Up @@ -244,7 +252,7 @@ function renderSurvivalPlot(props: TProps): void {
setXDomain,
setTooltip,
push,
palette = [colors(0), colors(1)],
palette = [colors(0), colors(1), colors(2), colors(3), colors(4)],
} = props;
const { results = [] } = rawData;
if (survivalContainer) {
Expand Down Expand Up @@ -297,7 +305,7 @@ const enhance = compose(
withState('xDomain', 'setXDomain', undefined),
withState('survivalContainer', 'setSurvivalContainer', null),
withState('uniqueClass', 'setUniqueClass', () => CLASS_NAME + _.uniqueId()),
withSize({refreshRate: 16}),
withSize({ refreshRate: 16 }),
lifecycle({
shouldComponentUpdate(nextProps: TProps): void {
const props = [
Expand Down
21 changes: 17 additions & 4 deletions src/packages/@ncigdc/components/survivalPlot.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,25 @@

/* clinical analysis */

.categorical-survival-plot .test-download-viz-button,
.categorical-survival-plot .test-visualization-title[style] {
.clinical-survival-plot .test-visualization-title[style] {
display: none !important;
}

.categorical-survival-plot .test-visualization-header[style] {
justify-content: flex-end;
.clinical-survival-plot .test-visualization-header[style] {
display: block !important;
float: right;
margin: 0 !important;
}

.clinical-survival-plot .test-survival-plot-meta[style] {
display: block !important;
}

.clinical-survival-plot .p-value {
margin-right: 40px;
}

.clinical-analysis-categorical-card td:nth-child(2)[style] {
/* wrap long facet values so the table doesn't scroll */
white-space: normal !important;
}
22 changes: 9 additions & 13 deletions src/packages/@ncigdc/modern_components/ClinicalAnalysis/ClinicalAnalysisResult.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import tryParseJSON from '@ncigdc/utils/tryParseJSON';
import getUsefulFacets from '@ncigdc/utils/getUsefulFacets';

// survival plot
import { getDefaultCurve, enoughData } from '@ncigdc/utils/survivalplot';
import { getDefaultCurve } from '@ncigdc/utils/survivalplot';
import SurvivalPlotWrapper from '@ncigdc/components/SurvivalPlotWrapper';

interface IAnalysisResultProps {
Expand Down Expand Up @@ -155,13 +155,7 @@ const enhance = compose(
withState('survivalPlotLoading', 'setSurvivalPlotLoading', true),
withPropsOnChange(
['viewer'],
({
viewer: {
explore: {
cases: { facets, hits },
},
},
}) => ({
({ viewer: { explore: { cases: { facets, hits } } } }) => ({
parsedFacets: facets ? tryParseJSON(facets) : {},
hits,
})
Expand Down Expand Up @@ -285,8 +279,7 @@ const ClinicalAnalysisResult = ({
property: 'name',
id,
})
)
}
)}
iconStyle={{
marginLeft: 10,
fontSize: '1.8rem',
Expand Down Expand Up @@ -487,7 +480,7 @@ const ClinicalAnalysisResult = ({
<SurvivalPlotWrapper
{...overallSurvivalData}
height={180}
customClass="categorical-survival-plot"
uniqueClass="clinical-survival-plot"
survivalPlotLoading={survivalPlotLoading}
/>
</div>
Expand Down Expand Up @@ -535,8 +528,9 @@ const ClinicalAnalysisResult = ({
>
<SurvivalPlotWrapper
{...overallSurvivalData}
height={180}
customClass="categorical-survival-plot"
height={430}
plotType="clinicalOverall"
uniqueClass="clinical-survival-plot"
survivalPlotLoading={survivalPlotLoading}
/>
</div>
Expand Down Expand Up @@ -569,6 +563,7 @@ const ClinicalAnalysisResult = ({
style={{ minWidth: controlPanelExpanded ? 310 : 290 }}
id={id}
setId={setId}
overallSurvivalData={overallSurvivalData}
/>
);
}
Expand All @@ -583,6 +578,7 @@ const ClinicalAnalysisResult = ({
facetField={varFieldName.replace('cases.', '')}
filters={filters}
setId={setId}
overallSurvivalData={overallSurvivalData}
data={{ ...parsedFacets[varFieldName], hits }}
/>
);
Expand Down
Loading