chore: update findable-ui to latest 47.0.2 (#4613) (#4614)

frano-m · web-flow · commit 19f089dbdbc1 · 2025-12-11T19:30:17.000-08:00
* chore: update findable-ui to latest 47.0.2 (#4613) * fix: emotion import, and development mdx (#4613) --------- Co-authored-by: Fran McDade <18710366+frano-m@users.noreply.github.com>
diff --git a/.github/workflows/run-checks.yml b/.github/workflows/run-checks.yml
@@ -8,7 +8,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: "20.10.0"
+          node-version: "22.12.0"
       - run: |
           npm ci
           npm run check-format
diff --git a/.github/workflows/run-playwright-tests-anvil-catalog.yml b/.github/workflows/run-playwright-tests-anvil-catalog.yml
@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "20.10.0"
+          node-version: "22.12.0"
       - name: Install dependencies
         run: |
           npm ci
diff --git a/.github/workflows/run-playwright-tests-anvil-cmg.yml b/.github/workflows/run-playwright-tests-anvil-cmg.yml
@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "20.10.0"
+          node-version: "22.12.0"
       - name: Install dependencies
         run: |
           npm ci
diff --git a/.gitlab/Dockerfile b/.gitlab/Dockerfile
@@ -1,3 +1,3 @@
-FROM node:20.10.0-bullseye
+FROM node:22.12.0-bullseye
 
 RUN apt-get update && apt-get install -y curl
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ The HCA Data Browser is built using [Next.js](https://nextjs.org/).
 
 ## Prerequisites
 
-Node.js 20.10.0 is required to run the app.
+Node.js 22.12.0 is required to run the app.
 
 ### 1. Clone the Repo
 
diff --git a/app/components/Detail/components/GeneratedMatricesTables/components/ArchivePreviewDialog/archivePreviewDialog.styles.ts b/app/components/Detail/components/GeneratedMatricesTables/components/ArchivePreviewDialog/archivePreviewDialog.styles.ts
@@ -1,4 +1,4 @@
-import styled from "@emotion/styled/dist/emotion-styled.cjs";
+import styled from "@emotion/styled";
 import { Dialog, DialogActions, DialogContent } from "@mui/material";
 
 export const ArchivePreviewDialog = styled(Dialog)`
diff --git a/app/components/Detail/components/GeneratedMatricesTables/components/ArchivePreviewDialog/components/ArchivePreviewTable/archivePreviewTable.styles.ts b/app/components/Detail/components/GeneratedMatricesTables/components/ArchivePreviewDialog/components/ArchivePreviewTable/archivePreviewTable.styles.ts
@@ -1,4 +1,4 @@
-import styled from "@emotion/styled/dist/emotion-styled.cjs";
+import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
 
 export const ArchivePreviewNotAvailable = styled(Typography)`
diff --git a/app/components/Detail/components/GeneratedMatricesTables/components/FileNameCell/fileNameCell.tsx b/app/components/Detail/components/GeneratedMatricesTables/components/FileNameCell/fileNameCell.tsx
@@ -6,14 +6,6 @@ export interface FileNameCellProps {
   fileName: string;
 }
 
-export const FileNameCell = ({
-  // archivePreview,
-  fileName,
-}: FileNameCellProps): JSX.Element => {
-  return (
-    <Cell>
-      {fileName}
-      {/*{archivePreview}*/}
-    </Cell>
-  );
+export const FileNameCell = ({ fileName }: FileNameCellProps): JSX.Element => {
+  return <Cell>{fileName}</Cell>;
 };
diff --git a/app/components/common/NetworkIcon/networkIcon.tsx b/app/components/common/NetworkIcon/networkIcon.tsx
@@ -5,8 +5,10 @@ import {
 import { NETWORK_ICONS } from "../../Index/common/constants";
 import { NetworkKey } from "../../Index/common/entities";
 
-export interface NetworkIconProps
-  extends Pick<StaticImageProps, "height" | "width"> {
+export interface NetworkIconProps extends Pick<
+  StaticImageProps,
+  "height" | "width"
+> {
   networkKey: NetworkKey;
 }
 
diff --git a/app/content/common/contentPages.ts b/app/content/common/contentPages.ts
@@ -36,7 +36,7 @@ export async function getContentStaticProps(
   const { content } = matter(markdownWithMeta);
   const mdxSource = await serialize(content, {
     mdxOptions: {
-      development: false, // See https://github.com/hashicorp/next-mdx-remote/issues/307#issuecomment-1363415249 and https://github.com/hashicorp/next-mdx-remote/issues/307#issuecomment-1378362096.
+      development: process.env.NODE_ENV === "development",
       rehypePlugins: [],
       remarkPlugins: [],
     },
diff --git a/app/utils/tsvParser.ts b/app/utils/tsvParser.ts
@@ -65,8 +65,6 @@ export const readFile = async function readFile(
   options = null
 ): Promise<Buffer | undefined> {
   try {
-    // const filePath = path.resolve(__dirname, file);
-    // const jsonDirectory = path.join(process.cwd(), "files");
     const jsonDirectory = process.cwd();
     return fs.readFileSync(jsonDirectory + "/" + file, options);
     // eslint-disable-next-line no-empty -- copied from anvil-portal
diff --git a/cc-anvil-catalog-dev-deploy.sh b/cc-anvil-catalog-dev-deploy.sh
@@ -6,7 +6,7 @@ rm -rf ./out
 echo \"Deleting ./build/\"
 rm -rf ./build
 
-n 20.10.0
+n 22.12.0
 npm ci
 export NEXT_PUBLIC_BASE_PATH="/data"
 
diff --git a/cc-data-browser.lungmap.dev.clevercanary.com-deploy.sh b/cc-data-browser.lungmap.dev.clevercanary.com-deploy.sh
@@ -5,7 +5,7 @@ set -e
 echo \"Deleting ./out/\"
 rm -rf ./out
 
-n 20.10.0
+n 22.12.0
 npm ci
 
 # Build
diff --git a/cc-explore.anvilproject.dev.clevercanary.com-deploy.sh b/cc-explore.anvilproject.dev.clevercanary.com-deploy.sh
@@ -8,7 +8,7 @@ rm -rf ./out
 echo \"Deleting ./build/\"
 rm -rf ./build
 
-n 20.10.0
+n 22.12.0
 npm ci
 
 mkdir -p build/explore/anvil-cmg
diff --git a/cc-explore.data.humancellatlas.dev.clevercanary.com-deploy.sh b/cc-explore.data.humancellatlas.dev.clevercanary.com-deploy.sh
@@ -5,7 +5,7 @@ set -e
 echo \"Deleting ./out/\"
 rm -rf ./out
 
-n 20.10.0
+n 22.12.0
 npm ci
 
 # Build
diff --git a/cc-ma-pilot.explore.data.humancellatlas.dev.clevercanary.com-deploy.sh b/cc-ma-pilot.explore.data.humancellatlas.dev.clevercanary.com-deploy.sh
@@ -5,7 +5,7 @@ set -e
 echo \"Deleting ./out/\"
 rm -rf ./out
 
-n 20.10.0
+n 22.12.0
 npm ci
 
 # Build
diff --git a/cgl-anvil-catalog-prod-deploy.sh b/cgl-anvil-catalog-prod-deploy.sh
@@ -8,7 +8,7 @@ rm -rf ./out
 echo \"Deleting ./build/\"
 rm -rf ./build
 
-n 20.10.0
+n 22.12.0
 npm ci
 export NEXT_PUBLIC_BASE_PATH="/data"
 
diff --git a/docs/configuration-guide.md b/docs/configuration-guide.md
@@ -11,14 +11,12 @@ Entity lists display result sets from either an API endpoint or a TSV and can be
 The Azul entity list API endpoint returns entities (`hits`) in a format that can be modeled as a response object containing a core entity and multiple aggregated entities. For example:
 
 - A `hits` value returned from the `/index/files` endpoint contains:
-
   1. File entity
   2. Aggregated projects
   3. Aggregated samples
   4. Aggregated values for all other entities...
 
 - A `hits` value returned from the `/index/projects` endpoint contains:
-
   1. Project entity
   2. Aggregated files
   3. Aggregated samples
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,13 +1,16 @@
 import nextMDX from "@next/mdx";
 import withPlugins from "next-compose-plugins";
-import path from "path";
 
 const ESM_PACKAGES = [
   "ky",
   "@databiosphere/findable-ui",
   "@observablehq/plot",
   "@tanstack/react-table",
   "@tanstack/react-virtual",
+  "@mui/material",
+  "@mui/system",
+  "@mui/icons-material",
+  "@mui/utils",
 ];
 
 const withMDX = nextMDX({
@@ -31,63 +34,6 @@ export default withPlugins(
     staticPageGenerationTimeout: 120,
     transpilePackages: [...ESM_PACKAGES],
     webpack: (config) => {
-      // Add the alias for the peer dependency
-      config.resolve.alias["@emotion/react"] = path.resolve(
-        process.cwd(),
-        "node_modules/@emotion/react"
-      );
-      config.resolve.alias["@emotion/styled"] = path.resolve(
-        process.cwd(),
-        "node_modules/@emotion/styled"
-      );
-      config.resolve.alias["@mui/icons-material"] = path.resolve(
-        process.cwd(),
-        "node_modules/@mui/icons-material"
-      );
-      config.resolve.alias["@mui/material"] = path.resolve(
-        process.cwd(),
-        "node_modules/@mui/material"
-      );
-      config.resolve.alias["react-dropzone"] = path.resolve(
-        process.cwd(),
-        "node_modules/react-dropzone"
-      );
-      config.resolve.alias["isomorphic-dompurify"] = path.resolve(
-        process.cwd(),
-        "node_modules/isomorphic-dompurify"
-      );
-      config.resolve.alias["match-sorter"] = path.resolve(
-        process.cwd(),
-        "node_modules/match-sorter"
-      );
-      config.resolve.alias["next"] = path.resolve(
-        process.cwd(),
-        "node_modules/next"
-      );
-      config.resolve.alias["react"] = path.resolve(
-        process.cwd(),
-        "node_modules/react"
-      );
-      config.resolve.alias["react-dom"] = path.resolve(
-        process.cwd(),
-        "node_modules/react-dom"
-      );
-      config.resolve.alias["react-gtm-module"] = path.resolve(
-        process.cwd(),
-        "node_modules/react-gtm-module"
-      );
-      config.resolve.alias["react-window"] = path.resolve(
-        process.cwd(),
-        "node_modules/react-window"
-      );
-      config.resolve.alias["uuid"] = path.resolve(
-        process.cwd(),
-        "node_modules/uuid"
-      );
-      config.resolve.alias["yup"] = path.resolve(
-        process.cwd(),
-        "node_modules/yup"
-      );
       return config;
     },
   }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/pages/[entityListType]/[...params].tsx b/pages/[entityListType]/[...params].tsx

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`		`-FROM node:20.10.0-bullseye`
	`1`	`+FROM node:22.12.0-bullseye`
`2`	`2`
`3`	`3`	`RUN apt-get update && apt-get install -y curl`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import styled from "@emotion/styled/dist/emotion-styled.cjs";`
	`1`	`+import styled from "@emotion/styled";`
`2`	`2`	`import { Dialog, DialogActions, DialogContent } from "@mui/material";`
`3`	`3`
`4`	`4`	export const ArchivePreviewDialog = styled(Dialog)`