Add mutations table and fisher exact two-sided p value to comparison lollipop

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

@@ -428,6 +428,21 @@ describe('group comparison page screenshot tests', function() {
             );
             assertScreenShotMatch(res);
         });
+
+        it('group comparison page mutations tab two groups', function() {
+            goToUrlAndSetLocalStorage(
+                `${CBIOPORTAL_URL}/comparison/mutations?sessionId=5cf89323e4b0ab413787436c&selectedGene=AR`
+            );
+            $('.borderedChart svg').waitForDisplayed({ timeout: 20000 });
+            var res = browser.checkElement(
+                '[data-test="ComparisonPageMutationsTabPlot"]',
+                '',
+                {
+                    viewportChangePause: 4000,
+                }
+            ); // hide these things because the timing of data loading makes this test so flaky
+            assertScreenShotMatch(res);
+        });
     });
 
     describe('delete group from session', function() {

end-to-end-test/remote/specs/core/groupComparisonLollipop.spec.js

@@ -4,7 +4,10 @@ var goToUrlAndSetLocalStorage = require('../../../shared/specUtils')
 var setInputText = require('../../../shared/specUtils').setInputText;
 var setSettingsMenuOpen = require('../../../shared/specUtils')
     .setSettingsMenuOpen;
-const { getElementByTestHandle } = require('../../../shared/specUtils');
+const {
+    jsApiHover,
+    getElementByTestHandle,
+} = require('../../../shared/specUtils');
 
 const CBIOPORTAL_URL = process.env.CBIOPORTAL_URL.replace(/\/$/, '');
 
@@ -815,4 +818,177 @@ describe('group comparison mutations tab tests', function() {
             );
         });
     });
+
+    describe('displaying fisher exact test label', function() {
+        before(function() {
+            goToUrlAndSetLocalStorage(
+                `${CBIOPORTAL_URL}/comparison/mutations?sessionId=5cf89323e4b0ab413787436c&selectedGene=AR`
+            );
+            $('.lollipop-svgnode').waitForDisplayed({
+                timeout: 30000,
+            });
+        });
+
+        it('fisher test text and tooltip dynamically changes when filtering and selecting', function() {
+            // filter value
+            getElementByTestHandle('missense_putative_driver_only').click();
+
+            assert.equal(
+                getElementByTestHandle('fisherTestLabel').getText(),
+                'Fisher Exact Two-Sided Test p-value for filtered mutations - (A) Metastasis vs (B) Primary: 4.21e-8'
+            );
+
+            jsApiHover(getElementByTestHandle('infoIcon'));
+
+            getElementByTestHandle(
+                'patientMultipleMutationsMessage'
+            ).waitForExist();
+            assert.equal(
+                getElementByTestHandle(
+                    'patientMultipleMutationsMessage'
+                ).getText(),
+                '3 patients have more than one mutation in AR'
+            );
+
+            // select value
+            $('.lollipop-3').click();
+
+            assert.equal(
+                getElementByTestHandle('fisherTestLabel').getText(),
+                'Fisher Exact Two-Sided Test p-value for selected mutations - (A) Metastasis vs (B) Primary: 0.0305'
+            );
+
+            jsApiHover(getElementByTestHandle('infoIcon'));
+
+            getElementByTestHandle(
+                'patientMultipleMutationsMessage'
+            ).waitForExist();
+            assert.equal(
+                getElementByTestHandle(
+                    'patientMultipleMutationsMessage'
+                ).getText(),
+                '1 patient has more than one mutation in AR'
+            );
+
+            // default value
+            $('button=Remove filter').click();
+
+            assert.equal(
+                getElementByTestHandle('fisherTestLabel').getText(),
+                'Fisher Exact Two-Sided Test p-value for all mutations - (A) Metastasis vs (B) Primary: 7.200e-6'
+            );
+
+            jsApiHover(getElementByTestHandle('infoIcon'));
+
+            getElementByTestHandle(
+                'patientMultipleMutationsMessage'
+            ).waitForExist();
+            assert.equal(
+                getElementByTestHandle(
+                    'patientMultipleMutationsMessage'
+                ).getText(),
+                '4 patients have more than one mutation in AR'
+            );
+        });
+    });
+
+    describe('displaying table header and pagination status text', function() {
+        before(function() {
+            goToUrlAndSetLocalStorage(
+                `${CBIOPORTAL_URL}/comparison/mutations?sessionId=5cf89323e4b0ab413787436c&selectedGene=AR`
+            );
+            $('.lollipop-svgnode').waitForDisplayed({
+                timeout: 30000,
+            });
+        });
+
+        it('displays correct text and number of mutations and protein changes when filtering and selecting', function() {
+            // filter value
+            $('strong=Inframe').click();
+
+            assert.equal(
+                getElementByTestHandle('LazyMobXTable_CountHeader').getText(),
+                '14 Mutations (page 1 of 1)'
+            );
+
+            assert.equal(
+                $('.topPagination').getText(),
+                'Showing 1-14 of 14 Mutations'
+            );
+
+            // select value
+            $('.lollipop-1').click();
+
+            assert.equal(
+                getElementByTestHandle('LazyMobXTable_CountHeader').getText(),
+                '1 Mutation (page 1 of 1)'
+            );
+
+            assert.equal(
+                $('.topPagination').getText(),
+                'Showing 1-1 of 1 Mutation'
+            );
+
+            // default value
+            $('button=Remove filter').click();
+
+            assert.equal(
+                getElementByTestHandle('LazyMobXTable_CountHeader').getText(),
+                '16 Mutations (page 1 of 1)'
+            );
+
+            assert.equal(
+                $('.topPagination').getText(),
+                'Showing 1-16 of 16 Mutations'
+            );
+        });
+    });
+
+    describe('mutation table filtering options', function() {
+        beforeEach(function() {
+            goToUrlAndSetLocalStorage(
+                `${CBIOPORTAL_URL}/comparison/mutations?sessionId=5cf89323e4b0ab413787436c&selectedGene=AR`
+            );
+            $('.lollipop-svgnode').waitForDisplayed({
+                timeout: 30000,
+            });
+        });
+
+        it('filters table with search box', () => {
+            var searchInput = '[data-test=table-search-input]';
+            var numberOfRowsBefore = $$('tr').length;
+            $(searchInput).setValue('w7');
+            browser.waitUntil(() => $$('tr').length < numberOfRowsBefore);
+            assert($$('tr').length < numberOfRowsBefore);
+        });
+
+        it('filters table with enriched in dropdown', () => {
+            var numberOfRowsBefore = $$('tr').length;
+            getElementByTestHandle('enrichedInDropdown').click();
+            $('#react-select-6-option-0-0').click();
+            browser.waitUntil(() => $$('tr').length < numberOfRowsBefore);
+            assert($$('tr').length < numberOfRowsBefore);
+        });
+
+        it('filters table with significant only checkbox', () => {
+            var numberOfRowsBefore = $$('tr').length;
+            getElementByTestHandle('significantOnlyCheckbox').click();
+            browser.waitUntil(() => $$('tr').length < numberOfRowsBefore);
+            assert($$('tr').length < numberOfRowsBefore);
+        });
+
+        it('filters table with protein badge filtering', () => {
+            var numberOfRowsBefore = $$('tr').length;
+            $('strong=Missense').click();
+            browser.waitUntil(() => $$('tr').length < numberOfRowsBefore);
+            assert($$('tr').length < numberOfRowsBefore);
+        });
+
+        it('filters table with lollipop selection', () => {
+            var numberOfRowsBefore = $$('tr').length;
+            $('.lollipop-1').click();
+            browser.waitUntil(() => $$('tr').length < numberOfRowsBefore);
+            assert($$('tr').length < numberOfRowsBefore);
+        });
+    });
 });

packages/oncokb-frontend-commons/src/components/OncoKB.tsx

@@ -33,6 +33,7 @@ export interface IOncoKbProps {
     userDisplayName?: string;
     disableFeedback?: boolean;
     contentPadding?: number;
+    hasMultipleCancerTypes?: boolean;
 }
 
 export function sortValue(
@@ -213,6 +214,7 @@ function tooltipContent(
             handleFeedbackOpen={
                 props.disableFeedback ? undefined : handleFeedbackOpen
             }
+            hasMultipleCancerTypes={props.hasMultipleCancerTypes}
         />
     );
 }

packages/oncokb-frontend-commons/src/components/OncoKbCard.tsx

@@ -16,6 +16,7 @@ export type OncoKbCardProps = {
     indicator?: IndicatorQueryResp;
     displayHighestLevelInTabTitle?: boolean;
     handleFeedbackOpen?: React.EventHandler<any>;
+    hasMultipleCancerTypes?: boolean;
 };
 
 export const OncoKbCard: React.FunctionComponent<OncoKbCardProps> = (
@@ -51,6 +52,7 @@ export const OncoKbCard: React.FunctionComponent<OncoKbCardProps> = (
                                 ? props.indicator.query.tumorType
                                 : ''
                         }
+                        displayCancerTypeInTitle={!props.hasMultipleCancerTypes}
                     />
                 )}
                 <OncoKbCardBody

packages/oncokb-frontend-commons/src/components/OncoKbCardTitle.tsx

@@ -6,6 +6,7 @@ type OncoKbCardDefaultTitleProps = {
     hugoSymbol: string;
     variant: string;
     tumorType: string;
+    displayCancerTypeInTitle?: boolean;
 };
 
 export const OncoKbCardTitle: React.FunctionComponent<OncoKbCardDefaultTitleProps> = (
@@ -22,7 +23,7 @@ export const OncoKbCardTitle: React.FunctionComponent<OncoKbCardDefaultTitleProp
     if (props.variant) {
         titleContent.push(props.variant);
     }
-    if (props.tumorType) {
+    if (props.tumorType && props.displayCancerTypeInTitle) {
         if (titleContent.length > 0) {
             titleContent.push('in');
         }

packages/oncokb-frontend-commons/src/components/OncoKbTooltip.tsx

@@ -12,6 +12,7 @@ export interface IOncoKbTooltipProps {
     isCancerGene: boolean;
     geneNotExist: boolean;
     usingPublicOncoKbInstance: boolean;
+    hasMultipleCancerTypes?: boolean;
 }
 
 export const OncoKbTooltip: React.FunctionComponent<IOncoKbTooltipProps> = (
@@ -48,6 +49,7 @@ export const OncoKbTooltip: React.FunctionComponent<IOncoKbTooltipProps> = (
                 indicator={props.indicator}
                 handleFeedbackOpen={props.handleFeedbackOpen}
                 displayHighestLevelInTabTitle={true}
+                hasMultipleCancerTypes={props.hasMultipleCancerTypes}
             />
         );
     }

packages/react-mutation-mapper/src/component/column/Annotation.tsx

@@ -66,6 +66,7 @@ export type AnnotationProps = {
         { [genomicLocation: string]: VariantAnnotation } | undefined
     >;
     userDisplayName?: string;
+    hasMultipleCancerTypes?: boolean;
 };
 
 export type GenericAnnotationProps = {
@@ -79,6 +80,7 @@ export type GenericAnnotationProps = {
     oncoKbContentPadding?: number;
     pubMedCache?: MobxCache;
     userDisplayName?: string;
+    hasMultipleCancerTypes?: boolean;
 };
 
 export interface IAnnotation {
@@ -326,6 +328,7 @@ export function GenericAnnotation(props: GenericAnnotationProps): JSX.Element {
         userDisplayName,
         mergeOncoKbIcons,
         oncoKbContentPadding,
+        hasMultipleCancerTypes,
     } = props;
 
     return (
@@ -344,6 +347,7 @@ export function GenericAnnotation(props: GenericAnnotationProps): JSX.Element {
                     mergeAnnotationIcons={mergeOncoKbIcons}
                     userDisplayName={userDisplayName}
                     contentPadding={oncoKbContentPadding}
+                    hasMultipleCancerTypes={hasMultipleCancerTypes}
                 />
             )}
             {/* only show reVUE when reVUE is enabled and there are reVUE mutations in the query */}

packages/react-mutation-mapper/src/component/lollipopMutationPlot/PercentToggle.tsx

@@ -26,7 +26,6 @@ export class PercentToggle extends React.Component<IPercentToggleProps, {}> {
                 <div
                     style={{
                         marginLeft: 10,
-                        marginRight: 10,
                     }}
                 >
                     <div style={{ textAlign: 'center' }}>Y-Axis:</div>

packages/react-mutation-mapper/src/component/mutationMapper/FilterResetPanel.tsx

@@ -7,6 +7,7 @@ import styles from './filterResetPanel.module.scss';
 type FilterResetPanelProps = {
     resetFilters: () => void;
     filterInfo?: JSX.Element | string;
+    additionalInfo?: JSX.Element | string;
     className?: string;
     buttonText?: string;
     buttonClass?: string;
@@ -34,14 +35,16 @@ export class FilterResetPanel extends React.Component<
                 data-test="filter-reset-panel"
             >
                 <span style={{ verticalAlign: 'middle' }}>
-                    {this.props.filterInfo}
+                    <strong>{this.props.filterInfo}</strong>
                     <button
                         className={this.props.buttonClass}
                         style={{ cursor: 'pointer', marginLeft: 6 }}
                         onClick={this.props.resetFilters}
                     >
                         {this.props.buttonText}
                     </button>
+                    <br />
+                    {this.props.additionalInfo}
                 </span>
             </div>
         );

packages/react-mutation-mapper/src/filter/ProteinChangeFilter.ts

@@ -0,0 +1,3 @@
+import { DataFilter } from '../model/DataFilter';
+
+export type ProteinChangeFilter = DataFilter<string>;

packages/react-mutation-mapper/src/model/DataFilter.ts

@@ -6,6 +6,7 @@ export enum DataFilterType {
     CANCER_TYPE = 'cancerType',
     PROTEIN_IMPACT_TYPE = 'proteinImpactType',
     MUTATION_STATUS = 'mutationStatus',
+    PROTEIN_CHANGE = 'proteinChange',
 }
 
 export type DataFilter<T = any> = {

packages/react-mutation-mapper/src/store/DefaultMutationMapperFilterApplier.ts

@@ -20,9 +20,11 @@ import {
     applyDefaultMutationFilter,
     applyDefaultMutationStatusFilter,
     applyDefaultPositionFilter,
+    applyDefaultProteinChangeFilter,
     applyDefaultProteinImpactTypeFilter,
 } from '../util/FilterUtils';
 import { defaultOncoKbFilter } from 'oncokb-frontend-commons';
+import { ProteinChangeFilter } from '../filter/ProteinChangeFilter';
 
 export class DefaultMutationMapperFilterApplier implements FilterApplier {
     protected get customFilterAppliers(): {
@@ -36,6 +38,7 @@ export class DefaultMutationMapperFilterApplier implements FilterApplier {
             [DataFilterType.PROTEIN_IMPACT_TYPE]: this
                 .applyProteinImpactTypeFilter,
             [DataFilterType.MUTATION_STATUS]: this.applyMutationStatusFilter,
+            [DataFilterType.PROTEIN_CHANGE]: this.applyProteinChangeFilter,
             ...this.filterAppliersOverride,
         };
     }
@@ -112,6 +115,14 @@ export class DefaultMutationMapperFilterApplier implements FilterApplier {
     ) {
         return applyDefaultMutationStatusFilter(filter, mutation);
     }
+
+    @autobind
+    protected applyProteinChangeFilter(
+        filter: ProteinChangeFilter,
+        mutation: Mutation
+    ) {
+        return applyDefaultProteinChangeFilter(filter, mutation);
+    }
 }
 
 export default DefaultMutationMapperFilterApplier;