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/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(/[ ,]+/)),
         ""
       );