Remove lodash and use native methods instead (#1141)

oncokb · Aug 9, 2024 · f5045cb · f5045cb
1 parent 10e705a
commit f5045cb
Show file tree

Hide file tree

Showing 53 changed files with 1,371 additions and 677 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
     "@sentry/react": "^7.72.0",
     "@types/jest": "^24.0.11",
     "@types/jquery": "^3.3.29",
-    "@types/lodash": "^4.14.123",
     "@types/node": "^11.11.1",
     "@types/rc-tooltip": "^3.7.1",
     "@types/react": "16.9.34",
@@ -37,7 +36,6 @@
     "history": "^4.10.1",
     "js-file-download": "^0.4.8",
     "loaders.css": "0.1.2",
-    "lodash": "4.17.21",
     "mobx": "^3.1.11",
     "mobx-react": "^4.2.1",
     "mobx-react-router": "^4.0.7",
@@ -90,7 +88,6 @@
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "3.10.5",
     "@types/jest": "25.2.1",
-    "@types/lodash": "4.14.150",
     "@types/node": "13.13.4",
     "@types/pluralize": "0.0.29",
     "@types/react": "16.9.34",
@@ -113,7 +110,7 @@
     "browser-sync-webpack-plugin": "2.2.2",
     "cache-loader": "4.1.0",
     "copy-webpack-plugin": "5.1.1",
-    "core-js": "3.6.5",
+    "core-js": "3.38.0",
     "cross-env": "7.0.2",
     "css-loader": "3.5.3",
     "enzyme": "3.11.0",

diff --git a/src/main/webapp/app/components/CitationTooltip.tsx b/src/main/webapp/app/components/CitationTooltip.tsx
@@ -4,7 +4,6 @@ import { remoteData } from 'cbioportal-frontend-commons';
 import request from 'superagent';
 import LoadingIndicator from 'app/components/loadingIndicator/LoadingIndicator';
 import { ArticleAbstract } from 'app/shared/api/generated/OncoKbAPI';
-import _ from 'lodash';
 import PmidItem from 'app/components/PmidItem';
 import ArticleAbstractItem from 'app/components/ArticleAbstractItem';
 import { TOOLTIP_MAX_HEIGHT } from 'app/config/constants';
@@ -36,7 +35,7 @@ export class CitationTooltip extends React.Component<
           key={pmid}
           title={data.title}
           author={
-            _.isArray(data.authors) && data.authors.length > 0
+            Array.isArray(data.authors) && data.authors.length > 0
               ? data.authors[0].name + ' et al.'
               : 'Unknown'
           }

diff --git a/src/main/webapp/app/components/LevelWithDescription.tsx b/src/main/webapp/app/components/LevelWithDescription.tsx
@@ -3,7 +3,6 @@ import { inject } from 'mobx-react';
 import React from 'react';
 import { DefaultTooltip } from 'cbioportal-frontend-commons';
 import { InfoLevel } from 'app/shared/api/generated/OncoKbAPI';
-import _ from 'lodash';
 import { level2LevelOfEvidence } from 'app/shared/utils/Utils';
 import ReactHtmlParser from 'react-html-parser';
 import { LEVELS } from 'app/config/constants';
@@ -19,8 +18,9 @@ export const LevelWithDescription: React.FunctionComponent<{
     if (props.description) {
       return <span>{props.description}</span>;
     }
-    const match: InfoLevel | undefined = _.find(
-      props.appStore!.appInfo.result.levels,
+    const match:
+      | InfoLevel
+      | undefined = props.appStore!.appInfo.result.levels.find(
       (level: InfoLevel) => level.levelOfEvidence === levelOfEvidence
     );
     return match ? (

diff --git a/src/main/webapp/app/components/authDownloadButton/AuthDownloadButton.tsx b/src/main/webapp/app/components/authDownloadButton/AuthDownloadButton.tsx
@@ -8,7 +8,6 @@ import { observer, inject } from 'mobx-react';
 import { observable, action } from 'mobx';
 import { LoadingButton } from 'app/shared/button/LoadingButton';
 import { IDownloadButtonWithPromise } from 'app/components/downloadButtonWithPromise/DownloadButtonWithPromise';
-import _ from 'lodash';
 
 interface IAuthDownloadButton extends IDownloadButtonWithPromise {
   routing?: RouterStore;
@@ -27,7 +26,7 @@ export class AuthDownloadButton extends React.Component<IAuthDownloadButton> {
       this.props
         .getDownloadData()
         .then(data => {
-          if (_.isArray(data)) {
+          if (Array.isArray(data)) {
             data = data.join('');
           }
           fileDownload(data, this.props.fileName, this.props.mime);

diff --git a/src/main/webapp/app/components/barChart/BarChart.tsx b/src/main/webapp/app/components/barChart/BarChart.tsx
@@ -17,9 +17,9 @@ import {
   getTextWidth,
   getTextDiagonal,
 } from 'cbioportal-frontend-commons';
-import _ from 'lodash';
 import { PortalAlteration } from 'app/shared/api/generated/OncoKbPrivateAPI';
 import { FONT_FAMILY } from 'app/config/constants';
+import { uniq } from 'app/shared/utils/LodashUtils';
 
 export type BarChartDatum = {
   x: string;
@@ -102,8 +102,8 @@ export default class BarChart extends React.Component<IBarChartProps, {}> {
   get bottomPadding(): number {
     const MIN_PADDING = 10; // used when tickFormat is empty
     const padding =
-      _.max(
-        this.props.data.map(datum => {
+      Math.max(
+        ...this.props.data.map(datum => {
           const content = datum.x;
           const fontFamily = FONT_FAMILY;
           const fontSize = `${FONT_SIZE}px`;
@@ -126,10 +126,10 @@ export default class BarChart extends React.Component<IBarChartProps, {}> {
   get rightPadding(): number {
     const MIN_PADDING = 10; // used when tickFormat is empty
     const MAX_PADDING = 90;
-    const lastThreeElements = _.takeRight(this.props.data, 3);
+    const lastThreeElements = this.props.data.slice(-3);
     const padding =
-      _.max(
-        lastThreeElements.map(datum => {
+      Math.max(
+        ...lastThreeElements.map(datum => {
           const content = datum.x;
           const fontFamily = FONT_FAMILY;
           const fontSize = `${FONT_SIZE}px`;
@@ -159,14 +159,14 @@ export default class BarChart extends React.Component<IBarChartProps, {}> {
             containerComponent={
               <VictorySelectionContainer
                 selectionDimension="x"
-                onSelection={(points: any, bounds: any, props: any) => {
+                onSelection={(points: unknown[], bounds: any, props: any) => {
                   if (this.props.onUserSelection) {
-                    const filters = _.uniq(
-                      _.flatten(
-                        points.map((point: any) =>
+                    const filters = uniq(
+                      points
+                        .map((point: any) =>
                           point.data.map((dataPoint: any) => dataPoint.xName)
                         )
-                      )
+                        .flat()
                     );
                     // @ts-ignore
                     this.props.onUserSelection(filters);

diff --git a/src/main/webapp/app/components/barChart/BarChartToolTip.tsx b/src/main/webapp/app/components/barChart/BarChartToolTip.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as _ from 'lodash';
 import { computed } from 'mobx';
 import { Popover } from 'react-bootstrap';
 import classnames from 'classnames';

diff --git a/src/main/webapp/app/components/downloadButtonWithPromise/DownloadButtonWithPromise.tsx b/src/main/webapp/app/components/downloadButtonWithPromise/DownloadButtonWithPromise.tsx
@@ -1,11 +1,9 @@
 import { ButtonProps } from 'react-bootstrap';
 import React from 'react';
-import classnames from 'classnames';
 import fileDownload from 'js-file-download';
 import { observer, inject } from 'mobx-react';
 import { observable, action } from 'mobx';
 import { LoadingButton } from 'app/shared/button/LoadingButton';
-import _ from 'lodash';
 
 export interface IDownloadButtonWithPromise extends ButtonProps {
   getDownloadData: () => Promise<string | Blob | string[]>;
@@ -27,7 +25,7 @@ export class DownloadButtonWithPromise extends React.Component<
     this.props
       .getDownloadData()
       .then(data => {
-        if (_.isArray(data)) {
+        if (Array.isArray(data)) {
           data = data.join('');
         }
         fileDownload(data, this.props.fileName, this.props.mime);

diff --git a/src/main/webapp/app/components/newAccountForm/NewAccountForm.tsx b/src/main/webapp/app/components/newAccountForm/NewAccountForm.tsx
@@ -34,7 +34,6 @@ import {
   getSectionClassName,
 } from 'app/pages/account/AccountUtils';
 import { If, Then } from 'react-if';
-import _ from 'lodash';
 import { FormSelectWithLabelField } from 'app/shared/select/FormSelectWithLabelField';
 import client from 'app/shared/api/clientInstance';
 import { notifyError } from 'app/shared/utils/NotificationUtils';
@@ -133,7 +132,7 @@ export class NewAccountForm extends React.Component<INewAccountForm> {
       country: values.country,
     };
     const additionalInfo = this.constructAdditionalInfo(values);
-    if (_.keys(additionalInfo).length > 0) {
+    if (Object.keys(additionalInfo).length > 0) {
       newUser.additionalInfo = additionalInfo;
     }
     if (values.tokenValidDays) {
@@ -180,7 +179,7 @@ export class NewAccountForm extends React.Component<INewAccountForm> {
       };
     }
 
-    if (_.keys(additionalInfo.userCompany).length === 0) {
+    if (Object.keys(additionalInfo.userCompany).length === 0) {
       delete additionalInfo.userCompany;
     }
     return additionalInfo;

diff --git a/src/main/webapp/app/components/newCompanyForm/NewCompanyForm.tsx b/src/main/webapp/app/components/newCompanyForm/NewCompanyForm.tsx
@@ -26,7 +26,6 @@ import {
   LICENSE_MODEL_DESCRIPTIONS,
 } from 'app/config/constants';
 import client from 'app/shared/api/clientInstance';
-import _ from 'lodash';
 import { notifyError } from 'app/shared/utils/NotificationUtils';
 import { AdditionalInfoSelect } from 'app/shared/dropdown/AdditionalInfoSelect';
 import {

diff --git a/src/main/webapp/app/components/oncokbSearch/OncoKBSearch.tsx b/src/main/webapp/app/components/oncokbSearch/OncoKBSearch.tsx
@@ -14,7 +14,6 @@ import {
 } from 'app/shared/utils/Utils';
 import { inject, observer } from 'mobx-react';
 import { observable } from 'mobx';
-import _ from 'lodash';
 import AppStore from 'app/store/AppStore';
 import SearchInfoIcon from 'app/components/oncokbSearch/SearchInfoIcon';
 import { remoteData } from 'cbioportal-frontend-commons';
@@ -37,21 +36,19 @@ export default class OncoKBSearch extends React.Component<IOncoKBSearch, {}> {
   readonly options = remoteData<ExtendedTypeaheadSearchResp[]>({
     invoke: async () => {
       try {
-        return _.reduce(
+        return (
           await oncokbPrivateClient.searchTypeAheadGetUsingGET({
             query: this.keyword,
             limit: 20,
-          }),
-          (acc, result) => {
-            acc.push({
-              tumorTypesName: getAllTumorTypesName(result.tumorTypes),
-              alterationsName: getAllAlterationsName(result.variants),
-              ...result,
-            });
-            return acc;
-          },
-          [] as ExtendedTypeaheadSearchResp[]
-        );
+          })
+        ).reduce((acc, result) => {
+          acc.push({
+            tumorTypesName: getAllTumorTypesName(result.tumorTypes),
+            alterationsName: getAllAlterationsName(result.variants),
+            ...result,
+          });
+          return acc;
+        }, [] as ExtendedTypeaheadSearchResp[]);
       } catch (error) {
         const errorOptions: ExtendedTypeaheadSearchResp[] = [];
         if (error) {

diff --git a/src/main/webapp/app/components/userMessager/UserMessage.tsx b/src/main/webapp/app/components/userMessager/UserMessage.tsx
@@ -8,7 +8,6 @@ import {
   IReactionDisposer,
   toJS,
 } from 'mobx';
-import * as _ from 'lodash';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { Container } from 'react-bootstrap';
@@ -193,7 +192,7 @@ export default class UserMessage extends React.Component<UserMessageProps> {
     if (localStorage.getItem(DISABLE_BANNER_OPT) === 'true') {
       return [];
     }
-    return _.filter(MESSAGE_DATA, message => {
+    return MESSAGE_DATA.filter(message => {
       const notYetShown = !localStorage.getItem(makeMessageKey(message.id));
       const toBeShown = message.dateStart
         ? Date.now() >= message.dateStart

diff --git a/src/main/webapp/app/index.tsx b/src/main/webapp/app/index.tsx
@@ -6,7 +6,6 @@ import * as superagent from 'superagent';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import App from './App';
-import registerServiceWorker from './registerServiceWorker';
 import * as Sentry from '@sentry/react';
 
 import 'font-awesome/css/font-awesome.css';
@@ -25,7 +24,6 @@ import {
   getStoredRecaptchaToken,
 } from 'app/indexUtils';
 import { UNAUTHORIZED_ALLOWED_PATH } from 'app/config/constants';
-import _ from 'lodash';
 import { AppConfig, AppProfile } from 'app/appConfig';
 
 assignPublicToken();
@@ -81,7 +79,7 @@ superagent.Request.prototype.end = function (callback) {
       AppConfig.serverConfig.token &&
       AppConfig.serverConfig.appProfile === AppProfile.PROD &&
       response.req &&
-      !_.some(UNAUTHORIZED_ALLOWED_PATH, path =>
+      UNAUTHORIZED_ALLOWED_PATH.some(path =>
         window.location.pathname.endsWith(path)
       )
     ) {

diff --git a/src/main/webapp/app/oncokb-frontend-commons/src/components/ReferenceList.tsx b/src/main/webapp/app/oncokb-frontend-commons/src/components/ReferenceList.tsx
@@ -1,6 +1,5 @@
 import { ArticleAbstract } from 'oncokb-ts-api-client';
 import * as React from 'react';
-import _ from 'lodash';
 
 import ArticleAbstractItem from './ArticleAbstractItem';
 import PmidItem from './PmidItem';
@@ -87,7 +86,7 @@ export const ReferenceList: React.FunctionComponent<ReferenceListProps> = (
           <PmidItem
             title={articleContent.title}
             author={
-              _.isArray(articleContent.authors) &&
+              Array.isArray(articleContent.authors) &&
               articleContent.authors.length > 0
                 ? articleContent.authors[0].name + ' et al.'
                 : 'Unknown'

diff --git a/src/main/webapp/app/pages/CancerGenesPage.tsx b/src/main/webapp/app/pages/CancerGenesPage.tsx
@@ -5,7 +5,6 @@ import { inject, observer } from 'mobx-react';
 import { defaultSortMethod } from 'app/shared/utils/ReactTableUtils';
 import { GenePageLink } from 'app/shared/utils/UrlUtils';
 import { Col, Row } from 'react-bootstrap';
-import * as _ from 'lodash';
 import OncoKBTable, {
   SearchColumn,
 } from 'app/components/oncokbTable/OncoKBTable';
@@ -401,47 +400,35 @@ export default class CancerGenesPage extends React.Component<{
   private readonly extendedCancerGene = remoteData<ExtendCancerGene[]>({
     await: () => [this.annotatedGenes, this.cancerGenes],
     invoke: () => {
-      const annotatedGenes = _.reduce(
-        this.annotatedGenes.result,
-        (acc, next) => {
-          acc[next.entrezGeneId] = true;
-          return acc;
-        },
-        {} as { [entrezGeneId: number]: boolean }
-      );
+      const annotatedGenes = this.annotatedGenes.result.reduce((acc, next) => {
+        acc[next.entrezGeneId] = true;
+        return acc;
+      }, {} as { [entrezGeneId: number]: boolean });
       return Promise.resolve(
-        _.reduce(
-          this.cancerGenes.result,
-          (cancerGenesAcc, cancerGene) => {
-            const sourceKeys: (keyof CancerGene)[] = [
-              'oncokbAnnotated',
-              'mSKImpact',
-              'mSKHeme',
-              'foundation',
-              'foundationHeme',
-              'vogelstein',
-              'sangerCGC',
-            ];
-            cancerGenesAcc.push({
-              ...cancerGene,
-              numOfSources: _.reduce(
-                sourceKeys,
-                (numOfSourcesAcc, next) => {
-                  if (cancerGene[next]) {
-                    numOfSourcesAcc++;
-                  }
-                  return numOfSourcesAcc;
-                },
-                0
-              ),
-              geneType: getGeneType(cancerGene.oncogene, cancerGene.tsg),
-              annotated: !!annotatedGenes[cancerGene.entrezGeneId],
-              geneAliases: cancerGene.geneAliases,
-            });
-            return cancerGenesAcc;
-          },
-          [] as ExtendCancerGene[]
-        )
+        this.cancerGenes.result.reduce((cancerGenesAcc, cancerGene) => {
+          const sourceKeys: (keyof CancerGene)[] = [
+            'oncokbAnnotated',
+            'mSKImpact',
+            'mSKHeme',
+            'foundation',
+            'foundationHeme',
+            'vogelstein',
+            'sangerCGC',
+          ];
+          cancerGenesAcc.push({
+            ...cancerGene,
+            numOfSources: sourceKeys.reduce((numOfSourcesAcc, next) => {
+              if (cancerGene[next]) {
+                numOfSourcesAcc++;
+              }
+              return numOfSourcesAcc;
+            }, 0),
+            geneType: getGeneType(cancerGene.oncogene, cancerGene.tsg),
+            annotated: !!annotatedGenes[cancerGene.entrezGeneId],
+            geneAliases: cancerGene.geneAliases,
+          });
+          return cancerGenesAcc;
+        }, [] as ExtendCancerGene[])
       );
     },
     default: [],