Fix rebase issues.

end-to-end-test/local/specs/struct-var-table.spec.js

@@ -8,7 +8,7 @@ const CBIOPORTAL_URL = process.env.CBIOPORTAL_URL.replace(/\/$/, '');
 const studyViewUrl = `${CBIOPORTAL_URL}/study/summary?id=study_es_0&featureFlags=STUDY_VIEW_STRUCT_VAR_TABLE`;
 const structVarTable = '//*[@data-test="structural variant pairs-table"]';
 const filterCheckBox = '[data-test=labeledCheckbox]';
-const structVarFilterPillTag = '[data-test=pillTag]';
+const structVarFilterPillTag = '[data-test=pill-tag]';
 const tableRow = '[role=row]';
 const uncheckedSvQueryCheckbox = '[data-test=structVarQueryCheckboxUnchecked]';
 const checkedSvQueryCheckbox = '[data-test=structVarQueryCheckboxChecked]';

src/pages/studyView/StructVarUtils.ts

@@ -24,57 +24,41 @@ export type StructVarGenePair = {
 };
 
 // This function acts as a toggle. If present in 'geneQueries', the query
-// is removed. If absent, a gene1/gene2 query is added.
+// is removed. If absent, a gene1/gene2 struct var query is added.
 export function updateStructuralVariantQuery(
     geneQueries: SingleGeneQuery[],
-    selectedGene1: string,
-    selectedGene2: string
+    structvarGene1: string,
+    structvarGene2: string
 ): SingleGeneQuery[] {
     // At this point any gene must be:
     // 1) HUGO gene symbol
     // 2) '*' indicating any gene
     // 3) '-' indicating no gene.
-    if (!selectedGene1 || !selectedGene2) {
+    if (!structvarGene1 || !structvarGene2) {
         return geneQueries;
     }
 
-    // Remove any SV alteration with the same genes
-    // (both upstream and downstream fusions are evaluated).
-    const updatedQueries = _.filter(geneQueries, (query: SingleGeneQuery) => {
-        const isStructVar = queryContainsStructVarAlteration(query);
-        const isUpstreamMatch =
-            query.gene === selectedGene1 &&
-            query.alterations &&
-            _.some(
-                query.alterations,
-                (alt: FUSIONCommandUpstream | FUSIONCommandDownstream) =>
-                    (alt.alteration_type === STUCTVARDownstreamFusionStr &&
-                        alt.gene) ||
-                    STRUCTVARNullGeneStr === selectedGene2
-            );
-        const isDownstreamMatch =
-            query.gene === selectedGene2 &&
-            query.alterations &&
-            _.some(
-                query.alterations,
-                (alt: FUSIONCommandUpstream | FUSIONCommandDownstream) =>
-                    (alt.alteration_type === STUCTVARUpstreamFusionStr &&
-                        alt.gene) ||
-                    STRUCTVARNullGeneStr === selectedGene1
-            );
-        return !isStructVar || (!isDownstreamMatch && !isUpstreamMatch);
-    });
+    // Remove any SV alteration with the same genes (both upstream and downstream fusions are evaluated).
+    const updatedQueries = _.filter(
+        geneQueries,
+        query =>
+            !doesStructVarMatchSingleGeneQuery(
+                query,
+                structvarGene1,
+                structvarGene2
+            )
+    );
 
     const representativeGene = ![
         STRUCTVARNullGeneStr,
         STRUCTVARAnyGeneStr,
-    ].includes(selectedGene1)
-        ? selectedGene1
-        : selectedGene2;
+    ].includes(structvarGene1)
+        ? structvarGene1
+        : structvarGene2;
     const otherGene =
-        representativeGene === selectedGene1 ? selectedGene2 : selectedGene1;
+        representativeGene === structvarGene1 ? structvarGene2 : structvarGene1;
     const alterationType =
-        representativeGene === selectedGene1
+        representativeGene === structvarGene1
             ? STUCTVARDownstreamFusionStr
             : STUCTVARUpstreamFusionStr;
 
@@ -93,6 +77,35 @@ export function updateStructuralVariantQuery(
     return updatedQueries;
 }
 
+export function doesStructVarMatchSingleGeneQuery(
+    query: SingleGeneQuery,
+    structvarGene1: string,
+    structvarGene2: string
+) {
+    const isStructVar = queryContainsStructVarAlteration(query);
+    const isUpstreamMatch =
+        query.gene === structvarGene1 &&
+        query.alterations &&
+        _.some(
+            query.alterations,
+            (alt: FUSIONCommandUpstream | FUSIONCommandDownstream) =>
+                (alt.alteration_type === STUCTVARDownstreamFusionStr &&
+                    alt.gene) ||
+                STRUCTVARNullGeneStr === structvarGene2
+        );
+    const isDownstreamMatch =
+        query.gene === structvarGene2 &&
+        query.alterations &&
+        _.some(
+            query.alterations,
+            (alt: FUSIONCommandUpstream | FUSIONCommandDownstream) =>
+                (alt.alteration_type === STUCTVARUpstreamFusionStr &&
+                    alt.gene) ||
+                STRUCTVARNullGeneStr === structvarGene1
+        );
+    return isStructVar && (isDownstreamMatch || isUpstreamMatch);
+}
+
 export function structVarFilterQueryToOql(query: StructVarFilterQuery): string {
     const gene1 = query.gene1Query.hugoSymbol || '';
     const gene2 = query.gene2Query.hugoSymbol || '';

src/pages/studyView/StudyViewPageStore.ts

@@ -61,6 +61,7 @@ import {
     SampleIdentifier,
     SampleMolecularIdentifier,
     SampleTreatmentRow,
+    StructVarFilterQuery,
     StudyViewFilter,
     StudyViewStructuralVariantFilter,
 } from 'cbioportal-ts-api-client';
@@ -149,7 +150,6 @@ import {
     statusFilterActive,
     StudyWithSamples,
     submitToPage,
-    updateCustomIntervalFilter,
     transformSampleDataToSelectedSampleClinicalData,
     updateCustomIntervalFilter,
 } from './StudyViewUtils';
@@ -285,6 +285,7 @@ import {
     PatientIdentifierFilter,
 } from 'shared/model/PatientIdentifierFilter';
 import {
+    doesStructVarMatchSingleGeneQuery,
     generateStructVarTableCellKey,
     oqlQueryToStructVarGenePair,
     structVarFilterQueryFromOql,
@@ -293,6 +294,8 @@ import {
     updateStructuralVariantQuery,
 } from 'pages/studyView/StructVarUtils';
 
+export const STUDY_VIEW_FILTER_AUTOSUBMIT = 'study_view_filter_autosubmit';
+
 type ChartUniqueKey = string;
 type ResourceId = string;
 type ComparisonGroupId = string;
@@ -2717,6 +2720,41 @@ export class StudyViewPageStore
         gene1SymbolOrOql: string,
         gene2SymbolOrOql: string
     ): void {
+        let message = '';
+        if (
+            this.geneQueries.find(q =>
+                doesStructVarMatchSingleGeneQuery(
+                    q,
+                    gene1SymbolOrOql,
+                    gene1SymbolOrOql
+                )
+            )
+        ) {
+            message = `${gene1SymbolOrOql}::${gene2SymbolOrOql} removed from query queue`;
+        } else {
+            message = `${gene1SymbolOrOql}::${gene2SymbolOrOql} queued for query (see top right)`;
+        }
+
+        const Zoom = cssTransition({
+            enter: 'zoomIn',
+            exit: 'zoomOut',
+            appendPosition: false,
+            collapse: true,
+            collapseDuration: 300,
+        });
+
+        toast.success(message, {
+            delay: 0,
+            position: 'top-right',
+            autoClose: 1500,
+            hideProgressBar: true,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: 'light',
+        });
+
         this.geneQueries = updateStructuralVariantQuery(
             this.geneQueries,
             gene1SymbolOrOql,
@@ -7224,7 +7262,7 @@ export class StudyViewPageStore
                 ]
             );
             if (this.isStructVarFeatureFlagEnabled) {
-                uniqueKey = getUniqueKeyFromMolecularProfileIds(
+                const structVarUniqueKey = getUniqueKeyFromMolecularProfileIds(
                     this.structuralVariantProfiles.result.map(
                         p => p.molecularProfileId
                     ),
@@ -7244,11 +7282,11 @@ export class StudyViewPageStore
                     );
                 }
                 this.chartsType.set(
-                    uniqueKey,
+                    structVarUniqueKey,
                     ChartTypeEnum.STRUCTURAL_VARIANTS_TABLE
                 );
                 this.chartsDimension.set(
-                    uniqueKey,
+                    structVarUniqueKey,
                     STUDY_VIEW_CONFIG.layout.dimensions[
                         ChartTypeEnum.STRUCTURAL_VARIANTS_TABLE
                     ]

src/pages/studyView/StudyViewUtils.tsx

@@ -86,6 +86,7 @@ import joinJsx from 'shared/lib/joinJsx';
 import { BoundType, NumberRange } from 'range-ts';
 import { ClinicalEventTypeCount } from 'cbioportal-ts-api-client/dist/generated/CBioPortalAPIInternal';
 import { queryContainsStructVarAlteration } from 'shared/lib/oql/oqlfilter';
+import { cssTransition } from 'react-toastify';
 
 // Cannot use ClinicalDataTypeEnum here for the strong type. The model in the type is not strongly typed
 export enum ClinicalDataTypeEnum {
@@ -3916,3 +3917,11 @@ export function transformSampleDataToSelectedSampleClinicalData(
         .filter(item => item.uniqueSampleKey !== undefined);
     return clinicalDataSamples;
 }
+
+export const toastZoom = cssTransition({
+    enter: 'zoomIn',
+    exit: 'zoomOut',
+    appendPosition: false,
+    collapse: true,
+    collapseDuration: 300,
+});

src/pages/studyView/UserSelections.tsx

@@ -31,6 +31,7 @@ import {
     getUniqueKeyFromMolecularProfileIds,
     intervalFiltersDisplayValue,
     StudyViewFilterWithSampleIdentifierFilters,
+    ChartMeta,
 } from 'pages/studyView/StudyViewUtils';
 import { PillTag } from '../../shared/components/PillTag/PillTag';
 import { GroupLogic } from './filters/groupLogic/GroupLogic';
@@ -42,7 +43,6 @@ import {
     getSampleIdentifiers,
     StudyViewComparisonGroup,
 } from '../groupComparison/GroupComparisonUtils';
-import { DefaultTooltip, getBrowserWindow } from 'cbioportal-frontend-commons';
 import {
     DefaultTooltip,
     MUT_COLOR_MISSENSE,
@@ -882,6 +882,7 @@ export default class UserSelections extends React.Component<
                             structVarFilterQueryToOql(structVarQuery)
                         )
                     }
+                    store={this.props.store}
                 />
             );
         });

src/pages/studyView/charts/ChartContainer.tsx

@@ -798,6 +798,11 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
                             defaultSortBy={
                                 StructVarMultiSelectionTableColumnKey.FREQ
                             }
+                            setOperationsButtonText={
+                                this.props.store.hesitateUpdate
+                                    ? 'Add Filters '
+                                    : 'Select Samples '
+                            }
                         />
                     );
                 };

src/pages/studyView/table/StructVarCell.tsx

@@ -1,13 +1,21 @@
 import * as React from 'react';
 import styles from './tables.module.scss';
 import classnames from 'classnames';
-import { EllipsisTextTooltip } from 'cbioportal-frontend-commons';
-import { FreqColumnTypeEnum } from '../TableUtils';
+import {
+    DefaultTooltip,
+    EllipsisTextTooltip,
+} from 'cbioportal-frontend-commons';
+import {
+    FreqColumnTypeEnum,
+    getGeneColumnCellOverlaySimple,
+} from '../TableUtils';
 import { action, computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Else, If, Then } from 'react-if';
 import _ from 'lodash';
 import { StructVarGenePair } from 'pages/studyView/StructVarUtils';
+import MutSigAnnotation from 'shared/components/annotation/MutSig';
+import GisticAnnotation from 'shared/components/annotation/Gistic';
 
 export type IStructVarCellProps = {
     tableType: FreqColumnTypeEnum;
@@ -78,43 +86,44 @@ export class StructVarCell extends React.Component<IStructVarCellProps, {}> {
 
     render() {
         return (
-            <div
-                data-test="structVarNameCell"
-                className={classnames(styles.geneSymbol, styles.displayFlex)}
-                onMouseEnter={() => this.onHover(true)}
-                onMouseLeave={() => this.onHover(false)}
-                onClick={this.onStructVarSelect}
-            >
-                <If condition={this.props.label}>
-                    <EllipsisTextTooltip text={this.props.label} />
-                </If>
-                <If condition={this.showCheckbox}>
-                    <Then>
-                        <span style={{ marginLeft: 5 }}>
-                            <If condition={this.isCheckBoxChecked}>
-                                <Then>
-                                    <i
-                                        data-test="structVarQueryCheckboxChecked"
-                                        className="fa fa-check-square-o"
-                                    ></i>
-                                </Then>
-                                <Else>
-                                    <i
-                                        data-test="structVarQueryCheckboxUnchecked"
-                                        className="fa fa-square-o"
-                                    ></i>
-                                </Else>
+            <div className={styles.geneSymbol}>
+                <div
+                    data-test="structVarNameCell"
+                    className={classnames(styles.displayFlex)}
+                    onMouseEnter={() => this.onHover(true)}
+                    onMouseLeave={() => this.onHover(false)}
+                    onClick={this.onStructVarSelect}
+                >
+                    <If condition={this.props.label}>
+                        <EllipsisTextTooltip text={this.props.label} />
+                    </If>
+                    <If condition={this.showCheckbox}>
+                        <Then>
+                            <div
+                                className={classnames({
+                                    [styles.addGeneUI]: true,
+                                    [styles.selected]: this.isCheckBoxChecked,
+                                })}
+                            >
+                                <i
+                                    data-test={
+                                        this.isCheckBoxChecked
+                                            ? 'structVarQueryCheckboxChecked'
+                                            : 'structVarQueryCheckboxUnchecked'
+                                    }
+                                    className="fa fa-search"
+                                />
+                            </div>
+                        </Then>
+                        <Else>
+                            {/*If there is no label defined, add some whitespace so that the*/}
+                            {/*the user can trigger a hover event more.*/}
+                            <If condition={!this.props.label}>
+                                <span>&nbsp;</span>
                             </If>
-                        </span>
-                    </Then>
-                    <Else>
-                        {/*If there is no label defined, add some whitespace so that the*/}
-                        {/*the user can trigger a hover event more.*/}
-                        <If condition={!this.props.label}>
-                            <span>&nbsp;</span>
-                        </If>
-                    </Else>
-                </If>
+                        </Else>
+                    </If>
+                </div>
             </div>
         );
     }

src/pages/studyView/tabs/SummaryTab.tsx

@@ -726,7 +726,6 @@ export class StudySummaryTab extends React.Component<
         //      Then across the study page, there should be only one place to include ChartContainer component.
         // 2.   The maintainer of RGL repo currently not actively accepts pull requests. So we don't know when the
         //      issue will be solved.
-
         return (
             <div key={chartMeta.uniqueKey}>
                 <DelayedRender>

src/shared/components/PillTag/PillTag.tsx

@@ -183,7 +183,6 @@ export class PillTag extends React.Component<IPillTagProps, {}> {
                     [styles.pending]: isPending,
                     [styles.pendingDelete]: this.isDeleted(),
                 })}
-                // TODO Pim - rename pillTag to pill-tag in tests
                 data-test="pill-tag"
                 style={{
                     background: this.props.backgroundColor,