Upgrade mobx and mobx-related libraries and make necessary changes

Signed-off-by: Adam Abeshouse <[email protected]>
cBioPortal · Jan 5, 2021 · 2675e99 · 2675e99
1 parent 293fba8
commit 2675e99
Show file tree

Hide file tree

Showing 280 changed files with 2,351 additions and 1,581 deletions.
diff --git a/package.json b/package.json
@@ -63,6 +63,10 @@
     "node": "8.12.0",
     "yarn": "1.22.4"
   },
+  "resolutions": {
+    "mobx": "^6.0.0",
+    "mobx-react": "6.0.0"
+  },
   "author": "",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
@@ -190,13 +194,13 @@
     "memoize-weak-decorator": "^1.0.3",
     "mini-css-extract-plugin": "^0.6.0",
     "mixpanel-browser": "^2.18.0",
-    "mobx": "^3.1.7",
-    "mobx-react": "^4.1.3",
-    "mobx-react-devtools": "^4.2.11",
-    "mobx-react-lite": "^2.0.7",
+    "mobx": "^6.0.0",
+    "mobx-react": "6.0.0",
+    "mobx-react-devtools": "6.1.1",
+    "mobx-react-lite": "3.0.1",
     "mobx-react-router": "4.1.0",
-    "mobx-utils": "^2.0.1",
-    "mobxpromise": "github:cbioportal/mobxpromise#v1.0.2",
+    "mobx-utils": "6.0.1",
+    "mobxpromise": "github:cbioportal/mobxpromise#303db72588860bff0a6862a4f07a4e8a3578c94f",
     "node-sass": "^4.9.3",
     "numeral": "^2.0.6",
     "object-sizeof": "^1.2.0",
@@ -332,6 +336,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.5",
+    "mobx-logger": "^0.7.1",
     "mocha": "^5.2.0",
     "pre-commit": "^1.2.2",
     "prettier": "1.19.1",

diff --git a/packages/cbioportal-clinical-timeline/package.json b/packages/cbioportal-clinical-timeline/package.json
@@ -31,7 +31,7 @@
     "test:watch": "yarn run test --watch"
   },
   "peerDependencies": {
-    "mobx": "^3.0.0 || ^4.0.0 || ^5.0.0",
+    "mobx": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
     "mobx-react": "^4.0.0 || ^5.0.0",
     "mobx-react-lite": "^2.0.0",
     "react": "^15.0.0 || ^16.0.0",

diff --git a/packages/cbioportal-clinical-timeline/src/TimelineStore.tsx b/packages/cbioportal-clinical-timeline/src/TimelineStore.tsx
@@ -4,7 +4,7 @@ import {
     TimelineEvent,
     TimelineTrackSpecification,
 } from './types';
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, makeObservable } from 'mobx';
 import {
     flattenTracks,
     getFullTicks,
@@ -36,6 +36,10 @@ export class TimelineStore {
     public uniqueId = `tl-id-` + _.random(1, 10000);
 
     constructor(tracks: TimelineTrackSpecification[]) {
+        makeObservable<
+            TimelineStore,
+            '_expandedTrims' | '_lastHoveredTooltipUid'
+        >(this);
         this._data = tracks;
     }
 
@@ -84,14 +88,13 @@ export class TimelineStore {
     @computed get expandedTrims() {
         return this._expandedTrims;
     }
-    @autobind
-    @action
+    @action.bound
     public toggleExpandedTrims() {
         this._expandedTrims = !this._expandedTrims;
     }
 
     private tooltipUidCounter = 0;
-    private tooltipModelsByUid = observable.map<TooltipModel>();
+    private tooltipModelsByUid = observable.map<string, TooltipModel>();
     @observable private _lastHoveredTooltipUid: string | null = null;
     @action
     public setHoveredTooltipUid(uid: string | null) {
@@ -104,7 +107,7 @@ export class TimelineStore {
         ) {
             return this._lastHoveredTooltipUid;
         } else if (this.tooltipModelsByUid.size === 1) {
-            return this.tooltipModelsByUid.keys()[0];
+            return this.tooltipModelsByUid.keys().next().value; // equivalent of keys()[0] with Iterators
         } else {
             return null;
         }
@@ -117,11 +120,10 @@ export class TimelineStore {
     }
 
     @computed get tooltipModels() {
-        return this.tooltipModelsByUid.entries();
+        return Array.from(this.tooltipModelsByUid.entries());
     }
 
-    @autobind
-    @action
+    @action.bound
     addTooltip(model: Pick<TooltipModel, 'track' | 'events'>) {
         const tooltipUid = (this.tooltipUidCounter++).toString();
         this.tooltipModelsByUid.set(tooltipUid, {
@@ -131,33 +133,30 @@ export class TimelineStore {
         return tooltipUid;
     }
 
-    @autobind
-    @action
+    @action.bound
     removeTooltip(tooltipUid: string) {
         this.tooltipModelsByUid.delete(tooltipUid);
         if (tooltipUid === this.hoveredTooltipUid) {
             this.setHoveredTooltipUid(null);
         }
     }
 
-    @autobind
-    @action
+    @action.bound
     removeAllTooltips() {
         this.tooltipModelsByUid.clear();
     }
 
     @action
     removeAllTooltipsExcept(tooltipUid: string) {
-        const uids = this.tooltipModelsByUid.keys();
+        const uids = Array.from(this.tooltipModelsByUid.keys());
         for (const uid of uids) {
             if (uid !== tooltipUid) {
                 this.tooltipModelsByUid.delete(uid);
             }
         }
     }
 
-    @autobind
-    @action
+    @action.bound
     togglePinTooltip(tooltipUid: string) {
         const model = this.tooltipModelsByUid.get(tooltipUid)!;
         if (model.position) {
@@ -171,8 +170,7 @@ export class TimelineStore {
         return !!this.tooltipModelsByUid.get(tooltipUid)!.position;
     }
 
-    @autobind
-    @action
+    @action.bound
     nextTooltipEvent() {
         if (!this.hoveredTooltipUid) {
             return false;
@@ -184,8 +182,7 @@ export class TimelineStore {
         return true;
     }
 
-    @autobind
-    @action
+    @action.bound
     prevTooltipEvent() {
         if (!this.hoveredTooltipUid) {
             return false;
@@ -266,8 +263,7 @@ export class TimelineStore {
         );
     }
 
-    @autobind
-    @action
+    @action.bound
     setMousePosition(p: { x: number; y: number }) {
         this.mousePosition.x = p.x;
         this.mousePosition.y = p.y;

diff --git a/packages/cbioportal-frontend-commons/package.json b/packages/cbioportal-frontend-commons/package.json
@@ -31,7 +31,7 @@
     "test:watch": "yarn run test --watch"
   },
   "peerDependencies": {
-    "mobx": "^3.0.0 || ^4.0.0 || ^5.0.0",
+    "mobx": "^6.0.0",
     "mobx-react": "^4.0.0 || ^5.0.0",
     "react": "^15.0.0 || ^16.0.0",
     "react-dom": "^15.0.0 || ^16.0.0"
@@ -43,7 +43,8 @@
     "jquery": "^3.2.1",
     "lodash": "^4.17.11",
     "measure-text": "0.0.4",
-    "mobxpromise": "github:cbioportal/mobxpromise#v1.0.2",
+    "mobx": "6.0.1",
+    "mobxpromise": "github:cbioportal/mobxpromise#303db72588860bff0a6862a4f07a4e8a3578c94f",
     "object-sizeof": "^1.2.0",
     "oncokb-ts-api-client": "^1.1.4",
     "rc-tooltip": "3.7.3",

diff --git a/packages/cbioportal-frontend-commons/src/components/WindowWrapper.ts b/packages/cbioportal-frontend-commons/src/components/WindowWrapper.ts
@@ -1,6 +1,6 @@
 import autobind from 'autobind-decorator';
 import _ from 'lodash';
-import { action, observable } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 import { isWebdriver } from '../lib/webdriverUtils';
 
 export interface WindowSize {
@@ -9,23 +9,24 @@ export interface WindowSize {
 }
 
 export default class WindowWrapper {
-    @observable public size: WindowSize;
+    @observable public size: WindowSize = { width: 0, height: 0 };
 
-    private handleWindowResize = isWebdriver()
-        ? this.setWindowSize
-        : _.debounce(this.setWindowSize, 500);
+    private handleWindowResize: () => void;
     private windowObj: any;
 
     constructor() {
+        makeObservable(this);
         if (typeof window === 'object') {
             this.windowObj = window;
             this.setWindowSize();
+            this.handleWindowResize = isWebdriver()
+                ? this.setWindowSize
+                : _.debounce(this.setWindowSize, 500);
             this.windowObj.addEventListener('resize', this.handleWindowResize);
         }
     }
 
-    @autobind
-    @action
+    @action.bound
     private setWindowSize() {
         this.size = {
             width: this.windowObj.innerWidth,

diff --git a/packages/cbioportal-frontend-commons/src/components/checkedSelect/CheckedSelect.tsx b/packages/cbioportal-frontend-commons/src/components/checkedSelect/CheckedSelect.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ReactSelect from 'react-select';
 import autobind from 'autobind-decorator';
-import { computed, observable, action } from 'mobx';
+import { computed, observable, action, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 
 import {
@@ -39,6 +39,10 @@ export default class CheckedSelect extends React.Component<
     CheckedSelectProps,
     {}
 > {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
     public static defaultProps: Partial<CheckedSelectProps> = {
         isClearable: false,
         isDisabled: false,
@@ -105,8 +109,7 @@ export default class CheckedSelect extends React.Component<
         return this.props.inputValue || this.defaultInputValue;
     }
 
-    @autobind
-    @action
+    @action.bound
     defaultOnInputChange(input: string, options: { action: string }) {
         // The input value (which is a blank string in the case of action === 'set-value')
         // will be passed to `this.props.onInputChange` by default without the `if` condition.

diff --git a/packages/cbioportal-frontend-commons/src/components/checkedSelect/Checklist.tsx b/packages/cbioportal-frontend-commons/src/components/checkedSelect/Checklist.tsx
@@ -1,6 +1,6 @@
 import autobind from 'autobind-decorator';
 import * as _ from 'lodash';
-import { action, computed } from 'mobx';
+import { action, computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 
@@ -37,6 +37,10 @@ function generateTableRows(
 
 @observer
 export default class Checklist extends React.Component<ChecklistProps, {}> {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
     public static defaultProps: Partial<ChecklistProps> = {
         isDisabled: false,
         numberOfColumnsPerRow: 1,

diff --git a/packages/cbioportal-frontend-commons/src/components/downloadControls/DownloadControls.tsx b/packages/cbioportal-frontend-commons/src/components/downloadControls/DownloadControls.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import FadeInteraction from '../fadeInteraction/FadeInteraction';
 import { observer } from 'mobx-react';
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import autobind from 'autobind-decorator';
 import fileDownload from 'react-file-download';
 import DefaultTooltip from '../defaultTooltip/DefaultTooltip';
@@ -94,6 +94,11 @@ export default class DownloadControls extends React.Component<
     IDownloadControlsProps,
     {}
 > {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @observable private collapsed = true;
 
     @autobind
@@ -279,8 +284,7 @@ export default class DownloadControls extends React.Component<
             .concat(this.props.additionalRightButtons || []);
     }
 
-    @autobind
-    @action
+    @action.bound
     private onTooltipVisibleChange(visible: boolean) {
         this.collapsed = !visible;
     }

diff --git a/...es/cbioportal-frontend-commons/src/components/ellipsisTextTooltip/EllipsisTextTooltip.tsx b/...es/cbioportal-frontend-commons/src/components/ellipsisTextTooltip/EllipsisTextTooltip.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import styles from './EllipsisTextTooltip.module.scss';
 import DefaultTooltip from '../defaultTooltip/DefaultTooltip';
@@ -12,12 +12,15 @@ export default class EllipsisTextTooltip extends React.Component<
     { text: any; style?: any; hideTooltip?: boolean },
     {}
 > {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
     @observable tooltipVisible = false;
 
     el: HTMLDivElement;
 
-    @autobind
-    @action
+    @action.bound
     onVisibleChange(isVisible: boolean) {
         // if shownWidth exist, using the shownWidth
         let shownWidth = $(this.el).innerWidth()!;

diff --git a/packages/cbioportal-frontend-commons/src/components/fadeInteraction/FadeInteraction.tsx b/packages/cbioportal-frontend-commons/src/components/fadeInteraction/FadeInteraction.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { action, computed, observable, reaction } from 'mobx';
+import { action, computed, observable, reaction, makeObservable } from 'mobx';
 
 export interface IFadeInteractionProps {
     fadeInSeconds?: number;
@@ -21,6 +21,7 @@ export default class FadeInteraction extends React.Component<
 
     constructor(props: IFadeInteractionProps) {
         super(props);
+        makeObservable(this);
         this.initialShow = props.showByDefault === true;
         this.onFocus = this.onFocus.bind(this);
         this.onBlur = this.onBlur.bind(this);

diff --git a/packages/cbioportal-frontend-commons/src/components/gradientLegend/GradientLegend.tsx b/packages/cbioportal-frontend-commons/src/components/gradientLegend/GradientLegend.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { computed } from 'mobx';
+import { computed, makeObservable } from 'mobx';
 
 import CBIOPORTAL_VICTORY_THEME from '../../theme/cBioPortalTheme';
 
@@ -21,6 +21,10 @@ export const TITLE_DX = -12;
 export const TITLE_DY = -5;
 
 export class GradientLegend extends React.Component<IGradientLegendProps> {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
     public static defaultProps: Partial<IGradientLegendProps> = {
         fontSize: 11,
         fontFamily: CBIOPORTAL_VICTORY_THEME.legend.style.labels.fontFamily,

diff --git a/packages/cbioportal-frontend-commons/src/components/gradientLegend/LinearGradient.tsx b/packages/cbioportal-frontend-commons/src/components/gradientLegend/LinearGradient.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { computed } from 'mobx';
+import { computed, makeObservable } from 'mobx';
 
 export interface ILinearGradientProps {
     id: string;
@@ -8,6 +8,11 @@ export interface ILinearGradientProps {
 }
 
 export class LinearGradient extends React.Component<ILinearGradientProps> {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @computed
     public get gradientStopPoints() {
         const gradientStopPoints = [];