Fix layout of alterations tab in comparison page

end-to-end-test/local/specs/annotation-filter-menu.spec.js

@@ -564,6 +564,7 @@ describe('alteration filter menu', function() {
         // -+=+ MUTATION STATUS +=+-
         it('filters enrichment table when unchecking germline checkbox', () => {
             clickCheckBoxResultsView('Germline');
+
             assert.deepStrictEqual(enrichmentTableCounts(), {
                 DTNB: { alt: '1 (100.00%)', unalt: '0 (0.00%)' },
                 ADAMTS20: { alt: '1 (100.00%)', unalt: '0 (0.00%)' },

end-to-end-test/shared/specUtils.js

@@ -57,7 +57,7 @@ function waitForOncoprint(timeout) {
                 $('.oncoprint__controls').isExisting()
             ); // oncoprint controls are showing
         },
-        { timeout }
+        { timeout: 5000 }
     );
     browser.pause(200);
 }

src/pages/groupComparison/AlterationEnrichments.tsx

@@ -4,7 +4,10 @@ import AlterationEnrichmentContainer from '../resultsView/enrichments/Alteration
 import { MakeMobxView } from '../../shared/components/MobxView';
 import LoadingIndicator from '../../shared/components/loadingIndicator/LoadingIndicator';
 import ErrorMessage from '../../shared/components/ErrorMessage';
-import { MakeEnrichmentsTabUI } from './GroupComparisonUtils';
+import {
+    AlterationFilterMenuSection,
+    MakeEnrichmentsTabUI,
+} from './GroupComparisonUtils';
 import ComparisonStore from '../../shared/lib/comparison/ComparisonStore';
 import { ResultsViewPageStore } from '../resultsView/ResultsViewPageStore';
 import { GENOMIC_ALTERATIONS_TAB_NAME } from 'pages/groupComparison/GroupComparisonTabs';
@@ -79,6 +82,6 @@ export default class AlterationEnrichments extends React.Component<
     });
 
     render() {
-        return this.tabUI.component;
+        return <>{this.tabUI.component}</>;
     }
 }

src/pages/groupComparison/GroupComparisonPage.tsx

@@ -191,33 +191,6 @@ export default class GroupComparisonPage extends React.Component<
                                     : ''
                             }
                         >
-                            {(getServerConfig().skin_show_settings_menu && (
-                                <AlterationFilterMenuSection
-                                    store={this.store}
-                                    updateSelectedEnrichmentEventTypes={
-                                        this.store
-                                            .updateSelectedEnrichmentEventTypes
-                                    }
-                                />
-                            )) || (
-                                <AlterationEnrichmentTypeSelector
-                                    classNames={
-                                        styles.inlineAlterationTypeSelectorMenu
-                                    }
-                                    store={this.store}
-                                    updateSelectedEnrichmentEventTypes={
-                                        this.store
-                                            .updateSelectedEnrichmentEventTypes
-                                    }
-                                    showMutations={
-                                        this.store.hasMutationEnrichmentData
-                                    }
-                                    showCnas={this.store.hasCnaEnrichmentData}
-                                    showStructuralVariants={
-                                        this.store.hasStructuralVariantData
-                                    }
-                                />
-                            )}
                             <AlterationEnrichments store={this.store} />
                         </MSKTab>
                     )}

src/pages/groupComparison/GroupComparisonUtils.tsx

@@ -449,38 +449,28 @@ export function MakeEnrichmentsTabUI(
                 (multiGroupAnalysisPossible && activeGroupsCount < 2)
             ) {
                 return (
-                    <span>
+                    <div className={'alert alert-info'}>
                         {ENRICHMENTS_NOT_2_GROUPS_MSG(
                             store.activeGroups.result!.length,
                             store._activeGroupsNotOverlapRemoved.result!.length,
                             multiGroupAnalysisPossible
                         )}
-                    </span>
+                    </div>
                 );
             } else if (
                 store.activeStudyIds.result!.length > 1 &&
                 !multiStudyAnalysisPossible
             ) {
                 return (
-                    <span>
+                    <div className={'alert alert-info'}>
                         {ENRICHMENTS_TOO_MANY_STUDIES_MSG(enrichmentType)}
-                    </span>
+                    </div>
                 );
             } else {
                 const content: any = [];
-                const doShowInlineTypeSelectionMenu =
-                    enrichmentType == 'alterations' &&
-                    !getServerConfig().skin_show_settings_menu;
+
                 content.push(
-                    // The alteration type selector is shown to left of the
-                    // graph panels ('in-line'). This div element pushes the
-                    // graph elements to the right when the type selector
-                    // is shown 'in-line'.
-                    <div
-                        style={{
-                            marginLeft: doShowInlineTypeSelectionMenu ? 244 : 0,
-                        }}
-                    >
+                    <div>
                         <OverlapExclusionIndicator
                             store={store}
                             only={
@@ -492,7 +482,19 @@ export function MakeEnrichmentsTabUI(
                         />
                     </div>
                 );
+
+                getServerConfig().skin_show_settings_menu &&
+                    content.push(
+                        <AlterationFilterMenuSection
+                            store={store}
+                            updateSelectedEnrichmentEventTypes={
+                                store.updateSelectedEnrichmentEventTypes
+                            }
+                        />
+                    );
+
                 content.push(getEnrichmentsUI().component);
+
                 return content;
             }
         },

src/pages/groupComparison/Overlap.tsx

@@ -67,7 +67,11 @@ export default class Overlap extends React.Component<IOverlapProps, {}> {
             const content: any[] = [];
 
             if (this.props.store._selectedGroups.result!.length < 2) {
-                content.push(<span>{OVERLAP_NOT_ENOUGH_GROUPS_MSG}</span>);
+                content.push(
+                    <div className={'alert alert-info'}>
+                        {OVERLAP_NOT_ENOUGH_GROUPS_MSG}
+                    </div>
+                );
             } else {
                 content.push(
                     <OverlapExclusionIndicator

src/pages/groupComparison/styles.module.scss

@@ -144,12 +144,10 @@
 
 .inlineAlterationTypeSelectorMenu {
     zindex: 2;
-    position: absolute;
-    top: 20px;
-    left: 20px;
     background: #eee;
     border-radius: 4px;
     padding: 10px;
+    margin-right: 20px;
 }
 
 .buttonAlterationTypeSelectorMenu {

src/pages/patientView/PatientViewPageTabs.tsx

@@ -463,7 +463,7 @@ export function tabs(
             key={2}
             id={PatientViewPageTabs.ClinicalData}
             linkText="Clinical Data"
-            className={'patient-clinical-data-tab'}
+            containerClassName={'patient-clinical-data-tab'}
         >
             <div className="clearfix">
                 <h3 className={'pull-left'}>Patient</h3>

src/pages/resultsView/ResultsViewPage.tsx

@@ -388,7 +388,7 @@ export default class ResultsViewPage extends React.Component<
                             key={6}
                             id={ResultsViewTab.CN_SEGMENTS}
                             linkText="CN Segments"
-                            className="cnSegmentsMSKTab"
+                            containerClassName="cnSegmentsMSKTab"
                         >
                             <CNSegments store={store} />
                         </MSKTab>

src/pages/resultsView/comparison/ComparisonTab.tsx

@@ -182,35 +182,6 @@ export default class ComparisonTab extends React.Component<
                                     : ''
                             }
                         >
-                            {(this.store.activeGroups.isComplete &&
-                                this.store.activeGroups.result!.length > 1 &&
-                                getServerConfig().skin_show_settings_menu && (
-                                    <AlterationFilterMenuSection
-                                        store={this.store}
-                                        updateSelectedEnrichmentEventTypes={
-                                            this.store
-                                                .updateSelectedEnrichmentEventTypes
-                                        }
-                                    />
-                                )) || (
-                                <AlterationEnrichmentTypeSelector
-                                    classNames={
-                                        styles.inlineAlterationTypeSelectorMenu
-                                    }
-                                    store={this.store}
-                                    updateSelectedEnrichmentEventTypes={
-                                        this.store
-                                            .updateSelectedEnrichmentEventTypes
-                                    }
-                                    showMutations={
-                                        this.store.hasMutationEnrichmentData
-                                    }
-                                    showCnas={this.store.hasCnaEnrichmentData}
-                                    showStructuralVariants={
-                                        this.store.hasStructuralVariantData
-                                    }
-                                />
-                            )}
                             <AlterationEnrichments
                                 store={this.store}
                                 resultsViewStore={this.props.store}