chore: 5795 Upgrade node LTM version

.github/workflows/deploy-happy-stack.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v2
         with:
-          node-version: "16.14.2"
+          node-version: "20.10.0"
       - name: Configure AWS Prod Credentials
         uses: aws-actions/configure-aws-credentials@v2
         if: github.event.deployment.environment == 'prod'
@@ -137,7 +137,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v2
         with:
-          node-version: "16.14.2"
+          node-version: "20.10.0"
       - uses: actions/setup-python@v4
         with:
           python-version: "3.10"
@@ -218,7 +218,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: "16.14.2"
+          node-version: "20.10.0"
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v2
         with:

.github/workflows/rdev-update-for-pr.yml

@@ -271,7 +271,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: "16.14.2"
+          node-version: "20.10.0"
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v2
         with:
@@ -402,7 +402,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v2
         with:
-          node-version: "16.14.2"
+          node-version: "20.10.0"
       - uses: actions/checkout@v3
         with:
           fetch-depth: 2

frontend/.nvmrc

@@ -1 +1 @@
-v16.14.2
+v20.10.0

frontend/Dockerfile

@@ -1,7 +1,7 @@
 # Frontend dockerfile
-# Pinning to 16.14.2 to avoid GH Action lint error exit code 243
+# Pinning to 20.10.0 to avoid GH Action lint error exit code 243
 # See: https://stackoverflow.com/a/71892226/3120863
-FROM node:16.14.2
+FROM node:20.10.0
 
 # install dependencies first, in a different location for easier app bind mounting for local development
 # due to default /opt permissions we have to create the dir with root and change perms

frontend/README.md

@@ -17,7 +17,7 @@ The following steps will start a FE server that connects to `dev` API. (See [use
 1. Install [`nvm`](https://github.com/nvm-sh/nvm)
    - Example: `brew install nvm`
 1. Check `.nvmrc` to see which version of node to download.
-   - Example: `nvm install 16.14.2 && nvm use 16.14.2`
+   - Example: `nvm install 20.10.0 && nvm use 20.10.0`
 1. Install npm packages and playwright browsers
    - Example: `npm i && npx playwright install`
 1. Copy configs file `frontend/src/configs/local.js` to `frontend/src/configs/configs.js`

frontend/package.json

@@ -72,7 +72,7 @@
     "@types/downloadjs": "^1.4.3",
     "@types/loadable__component": "^5.13.4",
     "@types/lodash": "^4.14.195",
-    "@types/node": "^17.0.45",
+    "@types/node": "^20.10.0",
     "@types/pako": "^2.0.0",
     "@types/papaparse": "^5.3.7",
     "@types/pixelmatch": "^5.2.4",
@@ -113,7 +113,7 @@
     "typescript": "^4.9.5"
   },
   "engines": {
-    "node": "v16.14.2"
+    "node": "v20.10.0"
   },
   "keywords": [
     "cellxgene",

frontend/src/common/networkGuard.ts

@@ -17,17 +17,15 @@ const maxRequests = 500;
 let timeoutExpiration = 0;
 let hasReachedMaxRequests = false;
 
-type FetchArgs = [input: RequestInfo | URL, init?: RequestInit | undefined];
-
 export function networkGuard() {
   if (isSSR()) return;
 
   // Intercept network requests
   const originalFetch = window.fetch;
 
-  window.fetch = newFetch;
+  window.fetch = newFetch as typeof window.fetch;
 
-  function newFetch(...args: FetchArgs) {
+  function newFetch(...args: Parameters<typeof window.fetch>) {
     requestCount++;
 
     if (!timeoutExpiration) {

frontend/src/components/Collections/components/Dataset/components/DownloadDataset/components/Content/components/DownloadLink/components/CopyButton/index.tsx

@@ -18,7 +18,7 @@ export default function CopyButton({
   const [animationStep, setAnimationStep] = useState<ANIMATION_STEP>(
     ANIMATION_STEP.IDLE
   );
-  const timeoutRef = useRef<NodeJS.Timer>();
+  const timeoutRef = useRef<number>();
   const animation = ANIMATION[animationStep];
 
   // Copy to clipboard, handle analytics, and initiate the copy animation.
@@ -35,7 +35,11 @@ export default function CopyButton({
   // Executes while copy animation is in progress for "COPY_EXIT", "COPIED_ENTER" and "COPIED_EXIT", "COPY_ENTER".
   // Increments the animation step.
   const onUpdateAnimationStep = () => {
-    timeoutRef.current = setTimeout(() => {
+    /**
+     * (thuang): Use window.setTimeout instead of setTimeout to avoid
+     * NodeJS setTimeout type being used
+     */
+    timeoutRef.current = window.setTimeout(() => {
       // Executes the next animation progression, after duration of the current animation is complete.
       setAnimationStep(incrementAnimationState);
     }, animation.duration);

frontend/src/views/CellGuide/components/CellGuideCard/components/Description/index.tsx

@@ -85,7 +85,7 @@ export default function Description({
     number | undefined
   >(DESCRIPTION_BREAKPOINT_HEIGHT_PX);
 
-  const [timerId, setTimerId] = useState<NodeJS.Timer | null>(null); // For chatgpt hover event
+  const [timerId, setTimerId] = useState<number | null>(null); // For chatgpt hover event
   const { isPastBreakpoint, containerRef } = useIsComponentPastBreakpointHeight(
     DESCRIPTION_BREAKPOINT_HEIGHT_PX
   );
@@ -192,7 +192,11 @@ export default function Description({
         <StyledLink
           data-testid={CELL_GUIDE_CARD_GPT_TOOLTIP_LINK}
           onMouseOver={() => {
-            const id = setTimeout(() => {
+            /**
+             * (thuang): Specify window.setTimeout, so Typescript doesn't use
+             * the Node.js setTimeout type, which is incorrect.
+             */
+            const id = window.setTimeout(() => {
               track(EVENTS.CG_CHAT_GPT_HOVER);
             }, 2 * 1000);
             setTimerId(id);

frontend/src/views/CellGuide/components/common/OntologyDagView/components/AnimatedNodes/index.tsx

@@ -65,7 +65,7 @@ export default function AnimatedNodes({
   cellTypesWithMarkerGeneStats,
   setCellInfoCellType,
 }: AnimatedNodesProps) {
-  const [timerId, setTimerId] = useState<NodeJS.Timer | null>(null); // For hover event
+  const [timerId, setTimerId] = useState<number | null>(null); // For hover event
   const router = useRouter();
   const handleAnimationEnd = (node: HierarchyPointNode<TreeNodeWithState>) => {
     // Update the starting position of the node to be its current position
@@ -91,7 +91,11 @@ export default function AnimatedNodes({
     datum: TreeNodeWithState
   ) => {
     if (!timerId) {
-      const id = setTimeout(() => {
+      /**
+       * (thuang): Use window.setTimeout instead of setTimeout to avoid
+       * NodeJS setTimeout type being used
+       */
+      const id = window.setTimeout(() => {
         track(EVENTS.CG_TREE_NODE_HOVER, {
           cell_type: datum.name,
         });
@@ -233,7 +237,11 @@ export default function AnimatedNodes({
   function handleMouseOut() {
     hideTooltip();
     if (timerId) {
-      clearTimeout(timerId);
+      /**
+       * (thuang): Use window.clearTimeout instead of clearTimeout to avoid
+       * NodeJS clearTimeout type being used
+       */
+      window.clearTimeout(timerId);
       setTimerId(null);
     }
   }