Force rerendering of study page filters when submitting

Bas Leenknegt · Bas Leenknegt · commit fa85a4511018 · 2023-02-28T12:35:55.000+01:00
- Track submitted and queued filters in global stores
- Submit queued filters when submitting or when changing submit mode
- Keep global stores aligned using study view page store reaction
diff --git a/src/pages/studyView/StudyViewPage.tsx b/src/pages/studyView/StudyViewPage.tsx
@@ -5,8 +5,8 @@ import { MSKTab, MSKTabs } from '../../shared/components/MSKTabs/MSKTabs';
 import {
     action,
     computed,
-    observable,
     makeObservable,
+    observable,
     runInAction,
 } from 'mobx';
 import {
@@ -24,6 +24,7 @@ import { ClinicalDataTab } from './tabs/ClinicalDataTab';
 import {
     DefaultTooltip,
     getBrowserWindow,
+    onMobxPromise,
     remoteData,
 } from 'cbioportal-frontend-commons';
 import { PageLayout } from '../../shared/components/PageLayout/PageLayout';
@@ -38,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,
@@ -49,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';
@@ -74,10 +74,9 @@ import ErrorScreen from 'shared/components/errorScreen/ErrorScreen';
 import { CustomChartData } from 'shared/api/session-service/sessionServiceModels';
 import { HelpWidget } from 'shared/components/HelpWidget/HelpWidget';
 import { buildCBioPortalPageUrl } from 'shared/api/urls';
-import Tooltip from 'rc-tooltip';
 import { StudyViewContext } from 'pages/studyView/StudyViewContext';
-import StudyViewPageGearMenu from 'pages/studyView/menu/StudyViewPageGearMenu';
-import { QueuedFilterPillStore } from 'shared/components/PillTag/PillTag';
+import StudyViewPageSettingsMenu from 'pages/studyView/menu/StudyViewPageSettingsMenu';
+import { PillStore } from 'shared/components/PillTag/PillTag';
 
 export interface IStudyViewPageProps {
     routing: any;
@@ -674,26 +673,11 @@ export default class StudyViewPage extends React.Component<
                                                         'btn btn-sm btn-primary',
                                                         styles.actionButtons
                                                     )}
-                                                    onClick={() => {
-                                                        runInAction(() => {
-                                                            let hesitantPillStore = getBrowserWindow()
-                                                                .hesitantPillStore as QueuedFilterPillStore;
-                                                            _.forIn(
-                                                                hesitantPillStore,
-                                                                value => {
-                                                                    const onDeleteCallback =
-                                                                        value.onDeleteCallback;
-                                                                    if (
-                                                                        onDeleteCallback
-                                                                    ) {
-                                                                        onDeleteCallback();
-                                                                    }
-                                                                }
-                                                            );
-                                                            getBrowserWindow().hesitantPillStore = {};
-                                                            this.store.filters = this.store.filtersProx;
-                                                        });
-                                                    }}
+                                                    onClick={() =>
+                                                        runInAction(() =>
+                                                            this.submitHesitantFilters()
+                                                        )
+                                                    }
                                                 >
                                                     Submit ►
                                                 </button>
@@ -1009,7 +993,7 @@ export default class StudyViewPage extends React.Component<
                                             {ServerConfigHelpers.sessionServiceIsEnabled() &&
                                                 this.groupsButton}
                                         </div>
-                                        <StudyViewPageGearMenu
+                                        <StudyViewPageSettingsMenu
                                             store={this.store}
                                         />
                                     </div>
@@ -1021,6 +1005,10 @@ export default class StudyViewPage extends React.Component<
         );
     }
 
+    submitHesitantFilters() {
+        this.store.filterSubmitTime = performance.now();
+    }
+
     private readonly body = MakeMobxView({
         await: () => [
             this.store.unknownQueriedIds,
diff --git a/src/pages/studyView/StudyViewPageStore.ts b/src/pages/studyView/StudyViewPageStore.ts
@@ -172,6 +172,7 @@ import {
 } from '../../shared/api/urls';
 import {
     DataType as DownloadDataType,
+    getBrowserWindow,
     onMobxPromise,
     pluralize,
     remoteData,
@@ -263,6 +264,7 @@ import { PageType } from 'shared/userSession/PageType';
 import client from 'shared/api/cbioportalClientInstance';
 import { FeatureFlagEnum } from 'shared/featureFlags';
 import intersect from 'fast_array_intersect';
+import { PillStore } from 'shared/components/PillTag/PillTag';
 
 type ChartUniqueKey = string;
 type ResourceId = string;
@@ -403,6 +405,16 @@ export class StudyViewPageStore
     @observable chartsBinMethod: { [chartKey: string]: BinMethodOption } = {};
     chartsBinsGeneratorConfigs = observable.map<string, BinsGeneratorConfig>();
 
+    @observable filterSubmitTime: number = performance.now();
+
+    /**
+     * Force remount of filters when filters are submitted of submit mode changes
+     */
+    @computed
+    public get filtersRemountKey() {
+        return `${this.hesitateUpdate}${this.filterSubmitTime}`;
+    }
+
     private getDataBinFilterSet(uniqueKey: string) {
         if (this.isGenericAssayChart(uniqueKey)) {
             return this._genericAssayDataBinFilterSet;
@@ -467,6 +479,32 @@ export class StudyViewPageStore
             )
         );
 
+        /**
+         * Submit filters when submit mode changes
+         * or when user clicks submit button
+         */
+        this.reactionDisposers.push(
+            reaction(
+                () => [this.hesitateUpdate, this.filterSubmitTime],
+                () => {
+                    const browserWindow = getBrowserWindow();
+                    const hesitantPillStore = browserWindow.hesitantPillStore as PillStore;
+                    const submittedPillStore = browserWindow.submittedPillStore as PillStore;
+                    _.forIn(hesitantPillStore, (value, key) => {
+                        const onDeleteCallback = value.onDeleteCallback;
+                        if (onDeleteCallback) {
+                            onDeleteCallback();
+                            delete submittedPillStore[key];
+                        } else {
+                            submittedPillStore[key] = value;
+                        }
+                    });
+                    browserWindow.hesitantPillStore = {};
+                    this.filters = this.filtersProx;
+                }
+            )
+        );
+
         this.reactionDisposers.push(
             reaction(
                 () => [this.filtersProx, this.hesitateUpdate],
diff --git a/src/pages/studyView/UserSelections.tsx b/src/pages/studyView/UserSelections.tsx
@@ -40,7 +40,7 @@ import {
     getSampleIdentifiers,
     StudyViewComparisonGroup,
 } from '../groupComparison/GroupComparisonUtils';
-import { DefaultTooltip } from 'cbioportal-frontend-commons';
+import { DefaultTooltip, getBrowserWindow } from 'cbioportal-frontend-commons';
 import {
     OredPatientTreatmentFilters,
     OredSampleTreatmentFilters,
@@ -97,6 +97,7 @@ export default class UserSelections extends React.Component<
         super(props);
         makeObservable(this);
     }
+
     @computed
     get showFilters() {
         //return isFiltered(this.props.filter)
diff --git a/src/pages/studyView/menu/AutosubmitToggle.tsx b/src/pages/studyView/menu/AutosubmitToggle.tsx
@@ -1,64 +1,17 @@
-import { StudyViewPageStore } from 'pages/studyView/StudyViewPageStore';
+import { observer } from 'mobx-react';
 import * as React from 'react';
-import { computed, makeObservable, observable } from 'mobx';
 import classNames from 'classnames';
 import styles from 'pages/studyView/styles.module.scss';
-import { DefaultTooltip } from 'cbioportal-frontend-commons';
-import { observer } from 'mobx-react';
 import Tooltip from 'rc-tooltip';
 
-interface IStudyViewPageGearMenuProps {
+import { StudyViewPageStore } from 'pages/studyView/StudyViewPageStore';
+export type IAutosubmitToggleProps = {
     store: StudyViewPageStore;
-}
-
-@observer
-export default class StudyViewPageGearMenu extends React.Component<
-    IStudyViewPageGearMenuProps,
-    {}
-> {
-    constructor(props: Readonly<IStudyViewPageGearMenuProps>) {
-        super(props);
-        makeObservable(this);
-    }
-
-    @observable visible = false;
-
-    @computed get menu() {
-        return (
-            <div>
-                <AutosubmitToggle store={this.props.store} />
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div className={classNames(styles.studyViewPageGearMenu)}>
-                <DefaultTooltip
-                    trigger={'click'}
-                    placement="bottom"
-                    overlay={this.menu}
-                    visible={this.visible}
-                    onVisibleChange={visible => {
-                        this.visible = !!visible;
-                    }}
-                >
-                    <button
-                        className={classNames('btn', 'btn-sm', 'btn-primary', {
-                            active: this.visible,
-                        })}
-                    >
-                        <i className="fa fa-cog" />
-                    </button>
-                </DefaultTooltip>
-            </div>
-        );
-    }
-}
+};
 
 @observer
 export class AutosubmitToggle extends React.Component<
-    IStudyViewPageGearMenuProps,
+    IAutosubmitToggleProps,
     {}
 > {
     render() {
diff --git a/src/pages/studyView/menu/StudyViewPageSettingsMenu.tsx b/src/pages/studyView/menu/StudyViewPageSettingsMenu.tsx
@@ -0,0 +1,57 @@
+import { StudyViewPageStore } from 'pages/studyView/StudyViewPageStore';
+import * as React from 'react';
+import { computed, makeObservable, observable } from 'mobx';
+import classNames from 'classnames';
+import styles from 'pages/studyView/styles.module.scss';
+import { DefaultTooltip } from 'cbioportal-frontend-commons';
+import { observer } from 'mobx-react';
+import { AutosubmitToggle } from 'pages/studyView/menu/AutosubmitToggle';
+
+export interface IStudyViewPageSettingsMenuProps {
+    store: StudyViewPageStore;
+}
+
+@observer
+export default class StudyViewPageSettingsMenu extends React.Component<
+    IStudyViewPageSettingsMenuProps,
+    {}
+> {
+    constructor(props: Readonly<IStudyViewPageSettingsMenuProps>) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @observable visible = false;
+
+    @computed get menu() {
+        return (
+            <div>
+                <AutosubmitToggle store={this.props.store} />
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div className={classNames(styles.studyViewPageGearMenu)}>
+                <DefaultTooltip
+                    trigger={'click'}
+                    placement="bottom"
+                    overlay={this.menu}
+                    visible={this.visible}
+                    onVisibleChange={visible => {
+                        this.visible = !!visible;
+                    }}
+                >
+                    <button
+                        className={classNames('btn', 'btn-sm', 'btn-primary', {
+                            active: this.visible,
+                        })}
+                    >
+                        <i className="fa fa-cog" />
+                    </button>
+                </DefaultTooltip>
+            </div>
+        );
+    }
+}
diff --git a/src/pages/studyView/studyPageHeader/StudyPageHeader.tsx b/src/pages/studyView/studyPageHeader/StudyPageHeader.tsx
@@ -56,6 +56,7 @@ export default class StudyPageHeader extends React.Component<
 
                 {this.props.store.clinicalAttributeIdToDataType.isComplete && (
                     <UserSelections
+                        key={this.props.store.filtersRemountKey}
                         store={this.props.store}
                         filter={this.props.store.userSelections}
                         comparisonGroupSelection={
diff --git a/src/shared/components/PillTag/PillTag.tsx b/src/shared/components/PillTag/PillTag.tsx
