Adjust fractional part of VAF cart ticks

end-to-end-test/remote/specs/core/genomicEvolution.screenshot.spec.js

@@ -19,7 +19,7 @@ describe('Patient View Genomic Evolution tab screenshot tests', function() {
         browser.waitForVisible('a.tabAnchor_lineChart', 10000);
         browser.click('a.tabAnchor_lineChart');
         browser.moveToObject('body', 0, 0);
-        browser.waitForVisible('svg[data-test="VAFLineChart"]', 5000);
+        browser.waitForVisible('[data-test=VAFChartWrapper]', 5000);
         waitForNetworkQuiet(10000);
     });
     it('pvge initial view with line chart', function() {
@@ -31,7 +31,7 @@ describe('Patient View Genomic Evolution tab screenshot tests', function() {
     });
     it('pvge show timeline', function() {
         browser.click('button[data-test="ToggleTimeline"]');
-        browser.waitForVisible('div#timeline');
+        browser.waitForVisible('div.tl-timeline-wrapper');
         const res = browser.checkElement(
             'div[data-test="GenomicEvolutionTab"]',
             { hide: ['.qtip'] }
@@ -62,32 +62,24 @@ describe('Patient View Genomic Evolution tab screenshot tests', function() {
     });
     it('pvge only show highlighted in line chart', function() {
         browser.click('input[data-test="VAFOnlyHighlighted"]');
-        const res = browser.checkElement('svg[data-test="VAFLineChart"]', {
-            hide: ['.qtip'],
-        });
+        const res = browser.checkElement('[data-test=VAFChartWrapper]');
         assertScreenShotMatch(res);
     });
     it('pvge line chart log scale', function() {
         browser.click('input[data-test="VAFLogScale"]');
-        const res = browser.checkElement('svg[data-test="VAFLineChart"]', {
-            hide: ['.qtip'],
-        });
+        const res = browser.checkElement('[data-test=VAFChartWrapper]');
         assertScreenShotMatch(res);
     });
     it('pvge line chart with data range y axis', function() {
         browser.click('input[data-test="VAFDataRange"]');
-        const res = browser.checkElement('svg[data-test="VAFLineChart"]', {
-            hide: ['.qtip'],
-        });
+        const res = browser.checkElement('[data-test=VAFChartWrapper]');
         assertScreenShotMatch(res);
     });
     it('pvge add a mutation to line chart', function() {
         browser.click(
             'div[data-test="GenomicEvolutionMutationTable"] table tbody > tr:nth-child(7)'
         );
-        const res = browser.checkElement('svg[data-test="VAFLineChart"]', {
-            hide: ['.qtip'],
-        });
+        const res = browser.checkElement('[data-test=VAFChartWrapper]');
         assertScreenShotMatch(res);
     });
     it('pvge heatmap with two mutations selected from before', function() {
@@ -157,7 +149,7 @@ describe('Patient View Genomic Evolution tab screenshot tests', function() {
     describe('variant allele frequency plot controls', () => {
         beforeEach(() => {
             goToUrlAndSetLocalStorage(patientViewUrl);
-            $('.tl-timeline-svg').waitForVisible();
+            $('.tl-timeline-svg').waitForVisible(10000);
         });
 
         it('initalized with all options deselected', () => {

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

@@ -243,6 +243,8 @@ const Timeline: React.FunctionComponent<ITimelineProps> = observer(function({
         _.sumBy(customTracks || [], t => t.height(store)) +
         SCROLLBAR_PADDING;
 
+    console.log(headerWidth);
+
     const refs = {
         cursor: useRef(null),
         wrapper: useRef(null),
@@ -338,7 +340,7 @@ const Timeline: React.FunctionComponent<ITimelineProps> = observer(function({
                         })}
                         style={{
                             width: headerWidth || 'auto',
-                            minWidth: store.headersWidth,
+                            minWidth: headerWidth || store.headersWidth,
                         }}
                     >
                         {filteredTracks.map(track => {

packages/cbioportal-clinical-timeline/src/TimelineStore.tsx

@@ -60,6 +60,25 @@ export class TimelineStore {
         return this.collapsedTracks.has(trackUid);
     }
 
+    @computed get sampleEvents() {
+        return this.allItems.filter(
+            event => event.event!.eventType === 'SPECIMEN'
+        );
+    }
+
+    @computed get sampleIds() {
+        const sampleIds: string[] = [];
+        this.sampleEvents.forEach((sample, i) => {
+            sample.event.attributes.forEach((attribute: any, i: number) => {
+                if (attribute.key === 'SAMPLE_ID') {
+                    sampleIds.push(attribute.value);
+                }
+            });
+        });
+
+        return sampleIds;
+    }
+
     @computed get expandedTrims() {
         return this._expandedTrims;
     }

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

@@ -83,6 +83,8 @@ $borderColor: #ccc;
 
 .tl-timeline-leftbar {
     .tl-timeline-tracklabels {
+        display: flex;
+        flex-direction: column;
         font-size: 12px;
         text-transform: uppercase;
         > div {

src/pages/patientView/mutation/PatientViewMutationsDataStore.ts

@@ -18,13 +18,9 @@ function mutationIdKey(m: Mutation) {
 export default class PatientViewMutationsDataStore extends SimpleGetterLazyMobXTableApplicationDataStore<
     Mutation[]
 > {
-    @observable.ref private mouseOverMutation: Readonly<Mutation> | null = null;
+    @observable mouseOverMutation: Readonly<Mutation> | null = null;
     private selectedMutationsMap = observable.map<Mutation>();
 
-    public getMouseOverMutation() {
-        return this.mouseOverMutation;
-    }
-
     public get onlyShowSelectedInTable() {
         return (
             this.urlWrapper.query.genomicEvolutionSettings

src/pages/patientView/mutation/PatientViewMutationsTab.tsx

@@ -8,20 +8,17 @@ import { MSKTab, MSKTabs } from '../../../shared/components/MSKTabs/MSKTabs';
 import { PatientViewPageStore } from '../clinicalInformation/PatientViewPageStore';
 import SampleManager from '../SampleManager';
 import { IColumnVisibilityDef } from '../../../shared/components/columnVisibilityControls/ColumnVisibilityControls';
-import VAFLineChart, { SHOW_ONLY_SELECTED_LABEL } from './VAFLineChart';
 import { action, computed, observable } from 'mobx';
 import autobind from 'autobind-decorator';
 import PatientViewMutationsDataStore from './PatientViewMutationsDataStore';
 import { Mutation } from 'cbioportal-ts-api-client';
 import MutationOncoprint from './oncoprint/MutationOncoprint';
-import { DownloadControls } from 'cbioportal-frontend-commons';
 import LabeledCheckbox from '../../../shared/components/labeledCheckbox/LabeledCheckbox';
 import PatientViewMutationTable from './PatientViewMutationTable';
 import { GeneFilterOption } from './GeneFilterMenu';
 import { isFusion } from '../../../shared/lib/MutationUtils';
 import PatientViewUrlWrapper from '../PatientViewUrlWrapper';
 import WindowStore from '../../../shared/components/window/WindowStore';
-import Timeline from '../timeline/Timeline';
 import VAFChartWrapper from 'pages/patientView/timeline2/VAFChartWrapper';
 import TimelineWrapper from 'pages/patientView/timeline2/TimelineWrapper';
 
@@ -141,63 +138,6 @@ export default class PatientViewMutationsTab extends React.Component<
         renderPending: () => <LoadingIndicator isLoading={true} size="small" />,
         render: () => (
             <div style={{ width: WindowStore.size.width - 50 }}>
-                {/*<div*/}
-                {/*    style={{*/}
-                {/*        display: 'flex',*/}
-                {/*        alignItems: 'center',*/}
-                {/*        justifyContent: 'space-between',*/}
-                {/*        marginBottom: 5,*/}
-                {/*    }}*/}
-                {/*>*/}
-                {/*    <div style={{ display: 'flex', alignItems: 'center' }}>*/}
-                {/*        <LabeledCheckbox*/}
-                {/*            checked={this.dataStore.onlyShowSelectedInVAFChart}*/}
-                {/*            onChange={() =>*/}
-                {/*                this.dataStore.setOnlyShowSelectedInVAFChart(*/}
-                {/*                    !this.dataStore.onlyShowSelectedInVAFChart*/}
-                {/*                )*/}
-                {/*            }*/}
-                {/*            labelProps={{ style: { marginRight: 10 } }}*/}
-                {/*            inputProps={{ 'data-test': 'VAFOnlyHighlighted' }}*/}
-                {/*        >*/}
-                {/*            <span style={{ marginTop: -3 }}>*/}
-                {/*                {SHOW_ONLY_SELECTED_LABEL}*/}
-                {/*            </span>*/}
-                {/*        </LabeledCheckbox>*/}
-                {/*        <LabeledCheckbox*/}
-                {/*            checked={this.vafLineChartLogScale}*/}
-                {/*            onChange={() => {*/}
-                {/*                this.vafLineChartLogScale = !this*/}
-                {/*                    .vafLineChartLogScale;*/}
-                {/*            }}*/}
-                {/*            labelProps={{ style: { marginRight: 10 } }}*/}
-                {/*            inputProps={{ 'data-test': 'VAFLogScale' }}*/}
-                {/*        >*/}
-                {/*            <span style={{ marginTop: -3 }}>Log scale</span>*/}
-                {/*        </LabeledCheckbox>*/}
-                {/*        <LabeledCheckbox*/}
-                {/*            checked={!this.vafLineChartZeroToOneYAxis}*/}
-                {/*            onChange={() => {*/}
-                {/*                this.vafLineChartZeroToOneYAxis = !this*/}
-                {/*                    .vafLineChartZeroToOneYAxis;*/}
-                {/*            }}*/}
-                {/*            labelProps={{ style: { marginRight: 10 } }}*/}
-                {/*            inputProps={{ 'data-test': 'VAFDataRange' }}*/}
-                {/*        >*/}
-                {/*            <span style={{ marginTop: -3 }}>*/}
-                {/*                Set y-axis to data range*/}
-                {/*            </span>*/}
-                {/*        </LabeledCheckbox>*/}
-                {/*    </div>*/}
-                {/*    <DownloadControls*/}
-                {/*        filename="vafHeatmap"*/}
-                {/*        getSvg={() => this.vafLineChartSvg}*/}
-                {/*        buttons={['SVG', 'PNG', 'PDF']}*/}
-                {/*        type="button"*/}
-                {/*        dontFade*/}
-                {/*    />*/}
-                {/*</div>*/}
-
                 {this.props.sampleManager && (
                     <VAFChartWrapper
                         dataStore={this.dataStore}
@@ -221,23 +161,9 @@ export default class PatientViewMutationsTab extends React.Component<
                             this.props.patientViewPageStore.coverageInformation
                                 .result
                         }
+                        headerWidth={this.showTimeline ? 150 : 50}
                     />
                 )}
-
-                {/*<VAFLineChart*/}
-                {/*    dataStore={this.dataStore}*/}
-                {/*    samples={this.props.store.samples.result!}*/}
-                {/*    coverageInformation={*/}
-                {/*        this.props.store.coverageInformation.result!*/}
-                {/*    }*/}
-                {/*    mutationProfileId={*/}
-                {/*        this.props.store.mutationMolecularProfileId.result!*/}
-                {/*    }*/}
-                {/*    sampleManager={this.props.sampleManager}*/}
-                {/*    svgRef={this.vafLineChartSvgRef}*/}
-                {/*    logScale={this.vafLineChartLogScale}*/}
-                {/*    zeroToOneAxis={this.vafLineChartZeroToOneYAxis}*/}
-                {/*/>*/}
             </div>
         ),
         showLastRenderWhenPending: true,
@@ -424,7 +350,6 @@ export default class PatientViewMutationsTab extends React.Component<
                     <div
                         style={{
                             marginBottom: 20,
-                            padding: this.showTimeline ? 10 : 5,
                             width: WindowStore.size.width - 50,
                         }}
                     >
@@ -473,6 +398,7 @@ export default class PatientViewMutationsTab extends React.Component<
                                         this.props.patientViewPageStore
                                             .coverageInformation.result
                                     }
+                                    headerWidth={150}
                                 />
                             </div>
                         )}