Update dependencies, add suspense boundary (#285)

screen2.0/package.json

@@ -36,26 +36,26 @@
   },
   "dependencies": {
     "@apollo/client": "alpha",
-    "@apollo/experimental-nextjs-app-support": "^0.6.0",
+    "@apollo/experimental-nextjs-app-support": "^0.7.0",
     "@emailjs/browser": "^3.12.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.2",
     "@mui/lab": "^5.0.0-alpha.158",
     "@mui/material": "^5.15.4",
-    "@types/node": "^20.10.8",
+    "@types/node": "^20.11.3",
     "@types/react": "^18.2.47",
     "@types/react-dom": "18.2.18",
     "@weng-lab/psychscreen-ui-components": "^0.8.6",
     "@weng-lab/ts-ztable": "^4.0.1",
-    "autoprefixer": "10.4.16",
+    "autoprefixer": "10.4.17",
     "bpnet-ui": "^0.3.8",
     "eslint": "8.56.0",
-    "eslint-config-next": "14.0.4",
+    "eslint-config-next": "14.1.0",
     "graphql": "^16.8.1",
     "jubilant-carnival": "^0.6.0",
     "logots-react": "latest",
-    "next": "14.0.4",
+    "next": "14.1.0",
     "normalize.css": "^8.0.1",
     "only": "^0.0.2",
     "postcss": "8.4.33",
@@ -76,7 +76,7 @@
     "file-loader": "^6.2.0",
     "lint-staged": "^15.1.0",
     "prettier": "^3.0.2",
-    "webpack": "^5.89.0",
+    "webpack": "^5.90.0",
     "webpack-cli": "^5.1.4"
   },
   "prettier": {

screen2.0/src/app/applets/differential-gene-expression/page.tsx

@@ -41,18 +41,17 @@ import { initialhighlight } from "./const"
  * Additionally, it plots the genes occupational coordinates and their strand.
  * @returns differential gene expression app
  */
-export default function DifferentialGeneExpression() {
-  const searchParams: ReadonlyURLSearchParams = useSearchParams()!
+export default function DifferentialGeneExpression({ searchParams }: { searchParams: { [key: string]: string | undefined } }) {
   const router = useRouter()
   const pathname = usePathname()
 
-  if (!searchParams.get("assembly")) router.replace(pathname + "?assembly=GRCh38&chromosome=chr11")
+  if (!searchParams.assembly) router.replace(pathname + "?assembly=GRCh38&chromosome=chr11")
 
   const [loading, setLoading] = useState<boolean>(true)
   const [open, setState] = useState<boolean>(true)
 
-  const [assembly, setAssembly] = useState<string>(searchParams.get("assembly") ? searchParams.get("assembly") : "GRCh38")
-  const [chromosome, setChromosome] = useState<string>(searchParams.get("chromosome") ? searchParams.get("chromosome") : "chr11")
+  const [assembly, setAssembly] = useState<string>(searchParams.assembly ?? "GRCh38")
+  const [chromosome, setChromosome] = useState<string>(searchParams.chromosome ?? "chr11")
   const [gene, setGene] = useState<gene>(null)
 
   const [ct1, setct1] = useState<string>("A172_ENCDO934VENA549_treated_with_0.02%_ethanol_for_1_hour_ENCDO000AAZ")

screen2.0/src/app/applets/gene-expression/page.tsx

@@ -1,14 +1,17 @@
 "use client"
 import { Box } from "@mui/material"
 import { GeneExpression } from "../../search/_ccredetails/geneexpression"
+import { Suspense } from "react"
 
 export default function GeneExpressionApplet() {
   return (
     <Box maxWidth="95%" margin="auto" marginTop={3}>
-      <GeneExpression
-        assembly={"GRCh38"}
-        applet
-      />
+      <Suspense>
+        <GeneExpression
+          assembly={"GRCh38"}
+          applet
+        />
+      </Suspense>
     </Box>
   )
 }

screen2.0/src/app/search/_ccredetails/geneexpression.tsx

@@ -33,6 +33,7 @@ const MenuProps = {
   },
 };
 
+// 2/1/24: Why does this not have organoid? Noticed when fixing error with useSearchParams
 const biosampleTypes = ["cell line", "in vitro differentiated cells", "primary cell", "tissue"];
 
 export function GeneExpression(props: {