Updating front-end dependencies (#2167)

* update to webpack 5

* update babel

* update eslint

* update cheerio

* update npm min to v7

* revert engine change

* generate package lock with npm v6 (lockfileVersion 1)

* add region to test setup

* update blueprint popover2

* tabindex changes due to blueprint popover2 revision

* update snapshots

* update lodash and pako

* fix typo

* fix lodash refactoring

* more lodash refactoring

* update babel and blueprintjs

* update jest support packages

* update puppeteer

* update regl

* update react-icons and react-helmet

* update react and react-dom

client/src/actions/annotation.js

@@ -1,7 +1,7 @@
 /*
 Action creators for user annotation
 */
-import _ from "lodash";
+import difference from "lodash.difference";
 import pako from "pako";
 import * as globals from "../globals";
 import { MatrixFBS, AnnotationsHelpers } from "../util/stateManager";
@@ -308,7 +308,7 @@ export const needToSaveObsAnnotations = (annoMatrix, lastSavedAnnoMatrix) => {
 
   // if the schema has changed, we need to save
   const currentWritable = writableAnnotations(annoMatrix);
-  if (_.difference(currentWritable, writableAnnotations(lastSavedAnnoMatrix))) {
+  if (difference(currentWritable, writableAnnotations(lastSavedAnnoMatrix))) {
     return true;
   }
 

client/src/components/categorical/category/index.js

@@ -416,6 +416,7 @@ const CategoryHeader = React.memo(
                   maxWidth: isUserAnno ? LABEL_WIDTH_ANNO : LABEL_WIDTH,
                 }}
                 data-testid={`${metadataField}:category-label`}
+                tabIndex="-1"
               >
                 {metadataField}
               </span>

client/src/components/categorical/value/index.js

@@ -590,6 +590,7 @@ class CategoryValue extends React.Component {
               <span
                 data-testid={`categorical-value-${metadataField}-${displayString}`}
                 data-testclass="categorical-value"
+                tabIndex="-1"
                 style={{
                   width: labelWidth,
                   color:

client/src/components/continuous/util.js

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import each from "lodash.foreach";
 import * as d3 from "d3";
 
 const paddingRight = 120;
@@ -14,7 +14,7 @@ export const devicePixelRatio = window.devicePixelRatio || 1;
 
 export const createDimensions = (data) => {
   const newArr = [];
-  _.each(data, (value, key) => {
+  each(data, (value, key) => {
     if (value.range) {
       newArr.push({
         key /* room for confusion: lodash calls this key, it's also the name of the property parallel coords code is looking for */,

client/src/components/geneExpression/menus/createGenesetDialogue.js

@@ -1,4 +1,5 @@
-import _ from "lodash";
+import pull from "lodash.pull";
+import uniq from "lodash.uniq";
 import React from "react";
 import { connect } from "react-redux";
 import AnnoDialog from "../../annoDialog";
@@ -46,8 +47,8 @@ class CreateGenesetDialogue extends React.PureComponent {
     if (genesToPopulateGeneset) {
       const genesTmpHardcodedFormat = [];
 
-      const genesArrayFromString = _.pull(
-        _.uniq(genesToPopulateGeneset.split(/[ ,]+/)),
+      const genesArrayFromString = pull(
+        uniq(genesToPopulateGeneset.split(/[ ,]+/)),
         ""
       );
 

client/src/globals.js

@@ -1,6 +1,6 @@
 import { Colors } from "@blueprintjs/core";
 import { dispatchNetworkErrorMessageToUser } from "./util/actionHelpers";
-import * as ENV_DEFAULT from "../../environment.default.json";
+import ENV_DEFAULT from "../../environment.default.json";
 
 /* if a categorical metadata field has more options than this, truncate */
 export const maxCategoricalOptionsToDisplay = 200;

client/src/reducers/controls.js

@@ -1,4 +1,5 @@
-import _ from "lodash";
+import uniq from "lodash.uniq";
+import filter from "lodash.filter";
 import { subsetAndResetGeneLists } from "../util/stateManager/controlsHelpers";
 
 const Controls = (
@@ -80,7 +81,7 @@ const Controls = (
     }
     case "request user defined gene success": {
       const { userDefinedGenes } = state;
-      const _userDefinedGenes = _.uniq(
+      const _userDefinedGenes = uniq(
         userDefinedGenes.concat(action.data.genes)
       );
       return {
@@ -104,7 +105,7 @@ const Controls = (
     }
     case "clear user defined gene": {
       const { userDefinedGenes } = state;
-      const newUserDefinedGenes = _.filter(
+      const newUserDefinedGenes = filter(
         userDefinedGenes,
         (d) => d !== action.data
       );

client/src/util/actionHelpers.js

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import sortBy from "lodash.sortby";
 /* XXX: cough, cough, ... */
 import { postNetworkErrorToast } from "../components/framework/toasters";
 
@@ -110,7 +110,7 @@ export const rangeEncodeIndices = (
   }
 
   if (!sorted) {
-    indices = _.sortBy(indices);
+    indices = sortBy(indices);
   }
 
   const result = new Array(indices.length);

client/src/util/parseBulkGeneString.js

@@ -3,8 +3,9 @@
  * @param geneString - a string of comma delimited genes
  * @returns an array
  */
-import _ from "lodash";
+import pull from "lodash.pull";
+import uniq from "lodash.uniq";
 
 export default function parseBulkGeneString(geneString) {
-  return _.pull(_.uniq(geneString.split(/[ ,]+/)), "");
+  return pull(uniq(geneString.split(/[ ,]+/)), "");
 }

client/src/util/stateManager/controlsHelpers.js

@@ -2,7 +2,8 @@
 Helper functions for the controls reducer
 */
 
-import _ from "lodash";
+import uniq from "lodash.uniq";
+import difference from "lodash.difference";
 
 import * as globals from "../../globals";
 import { rangeFill as fillRange } from "../range";
@@ -145,7 +146,7 @@ export function pruneVarDataCache(varData, needed) {
 
   const { colIndex } = varData;
   const all = colIndex.labels();
-  const unused = _.difference(all, needed);
+  const unused = difference(all, needed);
   if (unused.length > 0) {
     // sort by offset in the dataframe - ie, psuedo-LRU
     unused.sort((a, b) => colIndex.getOffset(a) - colIndex.getOffset(b));
@@ -160,7 +161,7 @@ export function pruneVarDataCache(varData, needed) {
 
 export function subsetAndResetGeneLists(state) {
   const { userDefinedGenes, diffexpGenes } = state;
-  const newUserDefinedGenes = _.uniq(
+  const newUserDefinedGenes = uniq(
     [].concat(userDefinedGenes, diffexpGenes)
   ).slice(0, globals.maxGenes);
   const newDiffExpGenes = [];

client/src/util/stateManager/schemaHelpers.js

@@ -4,7 +4,7 @@ Helpers for schema management
 TODO: all this would be much more natural if done with a framework
 like immutable.js
 */
-import _ from "lodash";
+import cloneDeep from "lodash.clonedeep";
 
 import fromEntries from "../fromEntries";
 import catLabelSort from "../catLabelSort";
@@ -39,7 +39,7 @@ function _copyObsAnno(schema) {
     ...schema,
     annotations: {
       ...schema.annotations,
-      obs: _.cloneDeep(schema.annotations.obs),
+      obs: cloneDeep(schema.annotations.obs),
     },
   };
 }
@@ -49,7 +49,7 @@ function _copyObsLayout(schema) {
     ...schema,
     layout: {
       ...schema.layout,
-      obs: _.cloneDeep(schema.layout.obs),
+      obs: cloneDeep(schema.layout.obs),
     },
   };
 }