Disable autocommit and manually commit filters in study view

end-to-end-test/local/specs/study-view-filters-autocommit-toggle.spec.js

@@ -0,0 +1,146 @@
+const { goToUrlAndSetLocalStorage } = require('../../shared/specUtils');
+const assert = require('assert');
+
+const CBIOPORTAL_URL = process.env.CBIOPORTAL_URL.replace(/\/$/, '');
+const studyViewUrl = `${CBIOPORTAL_URL}/study/summary?id=study_es_0`;
+
+const GENOMIC_PROFILES_SAMPLE_COUNT_TABLE = `div[data-test="chart-container-GENOMIC_PROFILES_SAMPLE_COUNT"]`;
+const SELECT_SAMPLES_BUTTON = 'button=Select Samples';
+const ADD_FILTERS_BUTTON = 'button=Add Filters';
+const STUDY_VIEW_HEADER = `div[data-test="study-view-header"]`;
+const SETTINGS_MENU_BUTTON = `button[data-test="study-view-settings-menu"]`;
+const DISABLE_AUTOCOMMIT_FIELD = `label=Manually submit`;
+const SUBMIT_STUDY_FILTERS = `button[data-test="submit-study-filters"]`;
+const PUTATIVE_PROFILE =
+    "//span[text() = 'Putative copy-number alterations from GISTIC']";
+const LOG2_PROFILE = "//span[text() = 'Log2 copy-number values']";
+const PILL_TAG = 'div[data-test="pill-tag"]';
+const DELETE_PILL_TAG = 'span[data-test="pill-tag-delete"]';
+
+describe('Toggling of study view filters autosubmit', function() {
+    it('autocommits filters by default', () => {
+        goToUrlAndSetLocalStorage(studyViewUrl, true);
+
+        //this seems to fix issue with intermittent fail of test due to
+        //menu not being clickeable
+        browser.setWindowSize(1600, 1000);
+
+        selectMutationProfile(0);
+        selectSamples();
+
+        const filterInHeader = $(STUDY_VIEW_HEADER).$(PUTATIVE_PROFILE);
+        assert(filterInHeader.isDisplayed());
+        const isFilterQueued = hasFilterClass(filterInHeader, 'pending');
+        assert(!isFilterQueued);
+    });
+
+    it('can disable filter submission in settings menu', () => {
+        $(SETTINGS_MENU_BUTTON).waitForDisplayed({ timeout: 20000 });
+        $(SETTINGS_MENU_BUTTON).click();
+        $(DISABLE_AUTOCOMMIT_FIELD).waitForDisplayed({ timeout: 20000 });
+        $(DISABLE_AUTOCOMMIT_FIELD).click();
+    });
+
+    it('queues new filters when autosubmit disabled', () => {
+        // no submit button
+        assert.equal($(SUBMIT_STUDY_FILTERS).isExisting(), false);
+
+        selectMutationProfile(1);
+
+        queueFilter();
+
+        // now we see the submit button
+        $(SUBMIT_STUDY_FILTERS).waitForDisplayed();
+
+        const queuedFilterInHeader = $(STUDY_VIEW_HEADER).$(LOG2_PROFILE);
+        assert(queuedFilterInHeader.isDisplayed());
+        const isFilterQueued = hasFilterClass(queuedFilterInHeader, 'pending');
+        assert(isFilterQueued);
+    });
+    //
+    it('queues deleted filters when autosubmit disabled', () => {
+        const submittedFilterInHeader = $(STUDY_VIEW_HEADER).$(
+            PUTATIVE_PROFILE
+        );
+        assert(submittedFilterInHeader.isDisplayed());
+
+        deleteFilter(submittedFilterInHeader);
+
+        assert(submittedFilterInHeader.isDisplayed());
+        const isFilterQueued = hasFilterClass(
+            submittedFilterInHeader,
+            'pending'
+        );
+        assert(isFilterQueued);
+        const isFilterDeleted = hasFilterClass(
+            submittedFilterInHeader,
+            'pendingDelete'
+        );
+        assert(isFilterDeleted);
+    });
+    //
+    it('submits queued and deleted filters when manually submitting', () => {
+        const queuedDeletedFilterInHeader = $(STUDY_VIEW_HEADER).$(
+            PUTATIVE_PROFILE
+        );
+        assert(queuedDeletedFilterInHeader.isDisplayed());
+        const queuedFilterInHeader = $(STUDY_VIEW_HEADER).$(LOG2_PROFILE);
+        assert(queuedFilterInHeader.isDisplayed());
+
+        $(SUBMIT_STUDY_FILTERS).click();
+
+        browser.waitUntil(() => !queuedDeletedFilterInHeader.isDisplayed());
+        assert(queuedFilterInHeader.isDisplayed());
+        const isFilterQueued = hasFilterClass(queuedFilterInHeader, 'pending');
+        assert(!isFilterQueued);
+    });
+});
+
+function selectMutationProfile(index = 0) {
+    $(GENOMIC_PROFILES_SAMPLE_COUNT_TABLE)
+        .$$('input')
+        [index].click();
+}
+
+function queueFilter() {
+    $(GENOMIC_PROFILES_SAMPLE_COUNT_TABLE)
+        .$(ADD_FILTERS_BUTTON)
+        .click();
+}
+
+function selectSamples() {
+    $(GENOMIC_PROFILES_SAMPLE_COUNT_TABLE)
+        .$(SELECT_SAMPLES_BUTTON)
+        .click();
+}
+
+/**
+ * Execute in browser to be able to use parentElement.closest()
+ */
+function hasFilterClass(queuedFilterInHeader, toInclude) {
+    return browser.execute(
+        (queuedFilterInHeader, toInclude, PILL_TAG) => {
+            return queuedFilterInHeader.parentElement
+                .closest(PILL_TAG)
+                .getAttribute('class')
+                .includes(toInclude);
+        },
+        queuedFilterInHeader,
+        toInclude,
+        PILL_TAG
+    );
+}
+
+function deleteFilter(queuedFilterInHeader) {
+    browser.execute(
+        (queuedFilterInHeader, PILL_TAG, DELETE_PILL_TAG) => {
+            return queuedFilterInHeader.parentElement
+                .closest(PILL_TAG)
+                .querySelector(DELETE_PILL_TAG)
+                .click();
+        },
+        queuedFilterInHeader,
+        PILL_TAG,
+        DELETE_PILL_TAG
+    );
+}

src/globalStyles/global.scss

@@ -757,3 +757,7 @@ h2.divider {
         }
     }
 }
+
+.marching-ants {
+    @include marching-ants();
+}

src/globalStyles/mixins.scss

@@ -36,3 +36,48 @@
         -webkit-border-radius: 100px;
     }
 }
+
+@mixin marching-ants-v2-init($ant-size, $ant-width, $speed, $id) {
+    background-size: $ant-size $ant-width, $ant-size $ant-width,
+        $ant-width $ant-size, $ant-width $ant-size !important;
+    background-position: 0 0, 0 100%, 0 0, 100% 0;
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y !important;
+    animation: marching-ants-#{$id} $speed;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-play-state: running;
+    &:hover,
+    &.marching {
+        animation-play-state: running;
+    }
+    &.reverse {
+        animation-direction: reverse;
+    }
+}
+@mixin marching-ants-v2-color($a, $b) {
+    background-image: linear-gradient(to right, $a 50%, $b 50%),
+        linear-gradient(to right, $a 50%, $b 50%),
+        linear-gradient(to bottom, $a 50%, $b 50%),
+        linear-gradient(to bottom, $a 50%, $b 50%) !important;
+}
+
+@mixin marching-ants-v2-animation($ant-size, $id) {
+    @keyframes marching-ants-#{$id} {
+        0% {
+            background-position: 0 0, 0 100%, 0 0, 100% 0;
+        }
+        100% {
+            background-position: 2 * $ant-size 0, -2 * $ant-size 100%,
+                0 -2 * $ant-size, 100% 2 * $ant-size;
+        }
+    }
+}
+
+@mixin marching-ants() {
+    @include marching-ants-v2-init(20px, 1px, 2s, 1);
+    @include marching-ants-v2-color(#eee, #333);
+}
+
+@include marching-ants-v2-animation(20px, 1);
+@include marching-ants-v2-animation(20px, 2);
+@include marching-ants-v2-animation(20px, 3);

src/pages/studyView/StudyViewPage.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import _ from 'lodash';
 import { inject, Observer, observer } from 'mobx-react';
 import { MSKTab, MSKTabs } from '../../shared/components/MSKTabs/MSKTabs';
-import { action, computed, observable, makeObservable } from 'mobx';
+import {
+    action,
+    computed,
+    makeObservable,
+    observable,
+    runInAction,
+} from 'mobx';
 import {
     StudyViewPageStore,
     StudyViewPageTabDescriptions,
@@ -18,6 +24,7 @@ import { ClinicalDataTab } from './tabs/ClinicalDataTab';
 import {
     DefaultTooltip,
     getBrowserWindow,
+    onMobxPromise,
     remoteData,
 } from 'cbioportal-frontend-commons';
 import { PageLayout } from '../../shared/components/PageLayout/PageLayout';
@@ -32,7 +39,6 @@ import { Else, If, Then } from 'react-if';
 import CustomCaseSelection from './addChartButton/customCaseSelection/CustomCaseSelection';
 import { AppStore } from '../../AppStore';
 import ActionButtons from './studyPageHeader/ActionButtons';
-import { onMobxPromise } from 'cbioportal-frontend-commons';
 import {
     GACustomFieldsEnum,
     serializeEvent,
@@ -43,10 +49,10 @@ import classNames from 'classnames';
 import { getServerConfig, ServerConfigHelpers } from '../../config/config';
 import {
     AlterationMenuHeader,
-    getButtonNameWithDownPointer,
     ChartMetaDataTypeEnum,
+    getButtonNameWithDownPointer,
 } from './StudyViewUtils';
-import { Alert, Modal } from 'react-bootstrap';
+import { Modal } from 'react-bootstrap';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 import styles from './styles.module.scss';
@@ -67,8 +73,8 @@ import SettingsMenu from 'shared/components/driverAnnotations/SettingsMenu';
 import ErrorScreen from 'shared/components/errorScreen/ErrorScreen';
 import { CustomChartData } from 'shared/api/session-service/sessionServiceModels';
 import { HelpWidget } from 'shared/components/HelpWidget/HelpWidget';
-import URL from 'url';
 import { buildCBioPortalPageUrl } from 'shared/api/urls';
+import StudyViewPageSettingsMenu from 'pages/studyView/menu/StudyViewPageSettingsMenu';
 
 export interface IStudyViewPageProps {
     routing: any;
@@ -191,6 +197,7 @@ export default class StudyViewPage extends React.Component<
         onMobxPromise(
             this.store.queriedPhysicalStudyIds,
             (strArr: string[]) => {
+                this.store.initializeReaction();
                 trackEvent({
                     category: 'studyPage',
                     action: 'studyPageLoad',
@@ -928,6 +935,9 @@ export default class StudyViewPage extends React.Component<
                                         {ServerConfigHelpers.sessionServiceIsEnabled() &&
                                             this.groupsButton}
                                     </div>
+                                    <StudyViewPageSettingsMenu
+                                        store={this.store}
+                                    />
                                 </div>
                             </div>
                         </div>