Skip to content

Commit 9df356c

Browse files
alismanalisman
committed
Integrate/align VAF with Timeline
\
1 parent f8d6f6e commit 9df356c

File tree

10 files changed

+87
-147
lines changed

10 files changed

+87
-147
lines changed

‎packages/cbioportal-clinical-timeline/src/Timeline.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function handleMouseEvents(
4646
e: any,
4747
store: TimelineStore,
4848
refs: any,
49-
zoomDisabled: boolean = true
49+
zoomDisabled: boolean = false
5050
) {
5151
const $timeline = jQuery(refs.timeline.current);
5252
const $zoomSelectBox = jQuery(refs.zoomSelectBox.current);
@@ -243,6 +243,8 @@ const Timeline: React.FunctionComponent<ITimelineProps> = observer(function({
243243
_.sumBy(customTracks || [], t => t.height(store)) +
244244
SCROLLBAR_PADDING;
245245

246+
console.log(headerWidth);
247+
246248
const refs = {
247249
cursor: useRef(null),
248250
wrapper: useRef(null),
@@ -338,7 +340,7 @@ const Timeline: React.FunctionComponent<ITimelineProps> = observer(function({
338340
})}
339341
style={{
340342
width: headerWidth || 'auto',
341-
minWidth: store.headersWidth,
343+
minWidth: headerWidth || store.headersWidth,
342344
}}
343345
>
344346
{filteredTracks.map(track => {
@@ -385,7 +387,11 @@ const Timeline: React.FunctionComponent<ITimelineProps> = observer(function({
385387
handleMouseEvents(e, store, refs)
386388
}
387389
>
388-
<div ref={refs.cursor} className={'tl-cursor'}>
390+
<div
391+
ref={refs.cursor}
392+
style={{ height: height - SCROLLBAR_PADDING }}
393+
className={'tl-cursor'}
394+
>
389395
<div ref={refs.cursorText} />
390396
</div>
391397
<div
@@ -394,6 +400,7 @@ const Timeline: React.FunctionComponent<ITimelineProps> = observer(function({
394400
/>
395401
<div
396402
ref={refs.zoomSelectBox}
403+
style={{ height: height - SCROLLBAR_PADDING }}
397404
className={'tl-zoom-selectbox'}
398405
/>
399406

‎packages/cbioportal-clinical-timeline/src/timeline.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@ $borderColor: #ccc;
8383

8484
.tl-timeline-leftbar {
8585
.tl-timeline-tracklabels {
86+
display: flex;
87+
flex-direction: column;
8688
font-size: 12px;
8789
text-transform: uppercase;
8890
> div {

‎src/globalStyles/global.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -543,6 +543,10 @@ h3.hr {
543543
display: inline-block;
544544
}
545545

546+
.displayBlock {
547+
display: block;
548+
}
549+
546550
.noOqlWarning {
547551
color: #74bedb;
548552
}

‎src/pages/patientView/PatientViewPage.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -926,7 +926,6 @@ export default class PatientViewPage extends React.Component<
926926
dataStore={
927927
this.dataStore
928928
}
929-
headerWidth={150}
930929
caseMetaData={{
931930
color:
932931
sampleManager.sampleColors,

‎src/pages/patientView/mutation/PatientViewMutationsTab.tsx‎

Lines changed: 6 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -141,63 +141,6 @@ export default class PatientViewMutationsTab extends React.Component<
141141
renderPending: () => <LoadingIndicator isLoading={true} size="small" />,
142142
render: () => (
143143
<div style={{ width: WindowStore.size.width - 50 }}>
144-
{/*<div*/}
145-
{/* style={{*/}
146-
{/* display: 'flex',*/}
147-
{/* alignItems: 'center',*/}
148-
{/* justifyContent: 'space-between',*/}
149-
{/* marginBottom: 5,*/}
150-
{/* }}*/}
151-
{/*>*/}
152-
{/* <div style={{ display: 'flex', alignItems: 'center' }}>*/}
153-
{/* <LabeledCheckbox*/}
154-
{/* checked={this.dataStore.onlyShowSelectedInVAFChart}*/}
155-
{/* onChange={() =>*/}
156-
{/* this.dataStore.setOnlyShowSelectedInVAFChart(*/}
157-
{/* !this.dataStore.onlyShowSelectedInVAFChart*/}
158-
{/* )*/}
159-
{/* }*/}
160-
{/* labelProps={{ style: { marginRight: 10 } }}*/}
161-
{/* inputProps={{ 'data-test': 'VAFOnlyHighlighted' }}*/}
162-
{/* >*/}
163-
{/* <span style={{ marginTop: -3 }}>*/}
164-
{/* {SHOW_ONLY_SELECTED_LABEL}*/}
165-
{/* </span>*/}
166-
{/* </LabeledCheckbox>*/}
167-
{/* <LabeledCheckbox*/}
168-
{/* checked={this.vafLineChartLogScale}*/}
169-
{/* onChange={() => {*/}
170-
{/* this.vafLineChartLogScale = !this*/}
171-
{/* .vafLineChartLogScale;*/}
172-
{/* }}*/}
173-
{/* labelProps={{ style: { marginRight: 10 } }}*/}
174-
{/* inputProps={{ 'data-test': 'VAFLogScale' }}*/}
175-
{/* >*/}
176-
{/* <span style={{ marginTop: -3 }}>Log scale</span>*/}
177-
{/* </LabeledCheckbox>*/}
178-
{/* <LabeledCheckbox*/}
179-
{/* checked={!this.vafLineChartZeroToOneYAxis}*/}
180-
{/* onChange={() => {*/}
181-
{/* this.vafLineChartZeroToOneYAxis = !this*/}
182-
{/* .vafLineChartZeroToOneYAxis;*/}
183-
{/* }}*/}
184-
{/* labelProps={{ style: { marginRight: 10 } }}*/}
185-
{/* inputProps={{ 'data-test': 'VAFDataRange' }}*/}
186-
{/* >*/}
187-
{/* <span style={{ marginTop: -3 }}>*/}
188-
{/* Set y-axis to data range*/}
189-
{/* </span>*/}
190-
{/* </LabeledCheckbox>*/}
191-
{/* </div>*/}
192-
{/* <DownloadControls*/}
193-
{/* filename="vafHeatmap"*/}
194-
{/* getSvg={() => this.vafLineChartSvg}*/}
195-
{/* buttons={['SVG', 'PNG', 'PDF']}*/}
196-
{/* type="button"*/}
197-
{/* dontFade*/}
198-
{/* />*/}
199-
{/*</div>*/}
200-
201144
{this.props.sampleManager && (
202145
<VAFChartWrapper
203146
dataStore={this.dataStore}
@@ -221,23 +164,9 @@ export default class PatientViewMutationsTab extends React.Component<
221164
this.props.patientViewPageStore.coverageInformation
222165
.result
223166
}
167+
headerWidth={this.showTimeline ? 150 : 50}
224168
/>
225169
)}
226-
227-
{/*<VAFLineChart*/}
228-
{/* dataStore={this.dataStore}*/}
229-
{/* samples={this.props.store.samples.result!}*/}
230-
{/* coverageInformation={*/}
231-
{/* this.props.store.coverageInformation.result!*/}
232-
{/* }*/}
233-
{/* mutationProfileId={*/}
234-
{/* this.props.store.mutationMolecularProfileId.result!*/}
235-
{/* }*/}
236-
{/* sampleManager={this.props.sampleManager}*/}
237-
{/* svgRef={this.vafLineChartSvgRef}*/}
238-
{/* logScale={this.vafLineChartLogScale}*/}
239-
{/* zeroToOneAxis={this.vafLineChartZeroToOneYAxis}*/}
240-
{/*/>*/}
241170
</div>
242171
),
243172
showLastRenderWhenPending: true,
@@ -424,20 +353,14 @@ export default class PatientViewMutationsTab extends React.Component<
424353
<div
425354
style={{
426355
marginBottom: 20,
427-
padding: this.showTimeline ? 10 : 5,
428356
width: WindowStore.size.width - 50,
429357
}}
430358
>
431359
<button
432-
className="btn btn-xs btn-default"
433-
style={{
434-
paddingTop: 0,
435-
paddingBottom: 0,
436-
marginLeft: this.showTimeline ? -5 : 0, // negative margins hardcoded in to make button not move when its clicked
437-
marginTop: this.showTimeline ? -10 : 0, // ^^
438-
}}
360+
className="btn btn-xs btn-default displayBlock"
439361
onClick={this.toggleTimeline}
440362
data-test="ToggleTimeline"
363+
style={{ margin: 'auto' }}
441364
>
442365
{this.showTimeline
443366
? 'Hide Timeline'
@@ -473,6 +396,7 @@ export default class PatientViewMutationsTab extends React.Component<
473396
this.props.patientViewPageStore
474397
.coverageInformation.result
475398
}
399+
headerWidth={150}
476400
/>
477401
</div>
478402
)}
@@ -491,7 +415,6 @@ export default class PatientViewMutationsTab extends React.Component<
491415
),
492416
render: () => (
493417
<div data-test="GenomicEvolutionTab">
494-
{this.timeline.component}
495418
<MSKTabs
496419
activeTabId={this.plotTab}
497420
onTabClick={this.setPlotTab}
@@ -500,6 +423,8 @@ export default class PatientViewMutationsTab extends React.Component<
500423
>
501424
<MSKTab id={PlotTab.LINE_CHART} linkText="Line Chart">
502425
<div style={{ paddingBottom: 10 }}>
426+
{this.timeline.component}
427+
503428
{this.vafLineChart.component}
504429
</div>
505430
</MSKTab>

‎src/pages/patientView/timeline2/VAFChart.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,17 @@ import {
2828
mutationTooltip,
2929
} from '../mutation/PatientViewMutationsTabUtils';
3030
import SampleManager, { clinicalValueToSamplesMap } from '../SampleManager';
31-
import { stringListToIndexSet } from 'cbioportal-frontend-commons';
31+
import {
32+
stringListToIndexSet,
33+
TruncatedText,
34+
} from 'cbioportal-frontend-commons';
3235
import { makeUniqueColorGetter } from '../../../shared/components/plots/PlotUtils';
3336
import { GROUP_BY_NONE } from './VAFChartControls';
3437
import TimelineWrapperStore from './TimelineWrapperStore';
3538
import { CustomTrackSpecification } from 'cbioportal-clinical-timeline/dist/CustomTrack';
3639
import { VAFChartHeader } from 'pages/patientView/timeline2/VAFChartHeader';
3740
import { yValueScaleFunction } from 'pages/patientView/timeline2/VAFChartUtils';
41+
import './styles.scss';
3842

3943
interface IVAFChartProps {
4044
dataStore: PatientViewMutationsDataStore;

‎src/pages/patientView/timeline2/VAFChartControls.tsx‎

Lines changed: 35 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -43,24 +43,9 @@ const VAFChartControls: React.FunctionComponent<IVAFChartControlsProps> = observ
4343
}
4444

4545
return (
46-
<div
47-
style={{
48-
marginTop: 5,
49-
marginLeft: 130,
50-
display: 'flex',
51-
alignItems: 'center',
52-
}}
53-
data-test={'VAFChartControls'}
54-
>
55-
<span style={{ marginTop: -3, marginRight: 3 }}>Group by:</span>
56-
<div
57-
style={{
58-
minWidth: 200,
59-
width: 200,
60-
zIndex: 20,
61-
marginRight: 15,
62-
}}
63-
>
46+
<div className={'VAFChartControls'} data-test={'VAFChartControls'}>
47+
<label>
48+
Group by:&nbsp;
6449
<ReactSelect
6550
name={'group-by-options-select'}
6651
value={groupByValue()}
@@ -70,72 +55,65 @@ const VAFChartControls: React.FunctionComponent<IVAFChartControlsProps> = observ
7055
option ? option.value : ''
7156
);
7257
}}
58+
styles={{
59+
container: (styles: any) => ({
60+
...styles,
61+
width: 250,
62+
}),
63+
}}
7364
clearable={false}
7465
searchable={true}
7566
/>
76-
</div>
77-
<div style={{ float: 'left', marginRight: 15, marginTop: 4 }}>
78-
<LabeledCheckbox
67+
</label>
68+
69+
<label className="checkbox-inline">
70+
<input
71+
type="checkbox"
7972
checked={wrapperStore.showSequentialMode}
8073
onChange={() =>
8174
wrapperStore.setShowSequentialMode(
8275
!wrapperStore.showSequentialMode
8376
)
8477
}
85-
labelProps={{ style: { marginRight: 10 } }}
86-
inputProps={{ 'data-test': 'TableShowSequentialMode' }}
87-
>
88-
<span style={{ marginTop: -3 }}>
89-
Show samples in sequential mode
90-
</span>
91-
</LabeledCheckbox>
92-
</div>
93-
<div style={{ float: 'left', marginRight: 15, marginTop: 4 }}>
94-
<LabeledCheckbox
78+
/>{' '}
79+
Show samples in sequential mode
80+
</label>
81+
<label className="checkbox-inline">
82+
<input
83+
type="checkbox"
9584
checked={wrapperStore.onlyShowSelectedInVAFChart}
9685
onChange={() =>
9786
wrapperStore.setOnlyShowSelectedInVAFChart(
9887
!wrapperStore.onlyShowSelectedInVAFChart
9988
)
10089
}
101-
labelProps={{ style: { marginRight: 10 } }}
102-
inputProps={{ 'data-test': 'TableShowOnlyHighlighted' }}
103-
>
104-
<span style={{ marginTop: -3 }}>
105-
Show only selected mutations
106-
</span>
107-
</LabeledCheckbox>
108-
</div>
109-
<div style={{ float: 'left', marginRight: 15, marginTop: 4 }}>
110-
<LabeledCheckbox
90+
/>{' '}
91+
Show only selected mutations
92+
</label>
93+
<label className="checkbox-inline">
94+
<input
95+
type="checkbox"
11196
checked={wrapperStore.vafChartLogScale}
11297
onChange={() => {
11398
wrapperStore.setVafChartLogScale(
11499
!wrapperStore.vafChartLogScale
115100
);
116101
}}
117-
labelProps={{ style: { marginRight: 10 } }}
118-
inputProps={{ 'data-test': 'VAFLogScale' }}
119-
>
120-
<span style={{ marginTop: -3 }}>Log scale</span>
121-
</LabeledCheckbox>
122-
</div>
123-
<div style={{ float: 'left', marginRight: 15, marginTop: 4 }}>
124-
<LabeledCheckbox
102+
/>{' '}
103+
Log scale
104+
</label>
105+
<label className="checkbox-inline">
106+
<input
107+
type="checkbox"
125108
checked={wrapperStore.vafChartYAxisToDataRange}
126109
onChange={() => {
127110
wrapperStore.setVafChartYAxisToDataRange(
128111
!wrapperStore.vafChartYAxisToDataRange
129112
);
130113
}}
131-
labelProps={{ style: { marginRight: 10 } }}
132-
inputProps={{ 'data-test': 'VAFDataRange' }}
133-
>
134-
<span style={{ marginTop: -3 }}>
135-
Set y-axis to data range
136-
</span>
137-
</LabeledCheckbox>
138-
</div>
114+
/>{' '}
115+
Set y-axis to data range
116+
</label>
139117
</div>
140118
);
141119
}

‎src/pages/patientView/timeline2/VAFChartHeader.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
22
import { observer } from 'mobx-react';
3-
import TimelineWrapperStore from 'pages/patientView/timeline2/TimelineWrapperStore';
4-
import { getYAxisTickmarks } from 'pages/patientView/mutation/VAFLineChartUtils';
53
import _ from 'lodash';
64

75
interface IVAFChartHeaderProps {
@@ -11,7 +9,7 @@ interface IVAFChartHeaderProps {
119

1210
const VAFChartHeader: React.FunctionComponent<IVAFChartHeaderProps> = observer(
1311
function({ ticks, legendHeight }) {
14-
const width = 140;
12+
const width = 50;
1513
const mqxTickOffset =
1614
_(ticks)
1715
.map(t => t.offset)
@@ -22,6 +20,7 @@ const VAFChartHeader: React.FunctionComponent<IVAFChartHeaderProps> = observer(
2220
style={{
2321
height: legendHeight,
2422
width: width,
23+
marginLeft: 'auto',
2524
}}
2625
>
2726
<svg
@@ -30,7 +29,6 @@ const VAFChartHeader: React.FunctionComponent<IVAFChartHeaderProps> = observer(
3029
style={{
3130
textTransform: 'none',
3231
position: 'relative',
33-
right: -15,
3432
}}
3533
>
3634
<text

0 commit comments

Comments
 (0)