Update dependencies

screen2.0/.yarnrc.yml

@@ -1 +1,5 @@
 nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"

screen2.0/package.json

@@ -37,55 +37,55 @@
     }
   },
   "dependencies": {
-    "@apollo/client": "alpha",
-    "@apollo/experimental-nextjs-app-support": "^0.8.0",
-    "@emailjs/browser": "^4.3.3",
+    "@apollo/client": "^3.11.8",
+    "@apollo/experimental-nextjs-app-support": "^0.11.3",
+    "@emailjs/browser": "^4.4.1",
     "@emotion/cache": "^11.13.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.16.7",
-    "@mui/material-nextjs": "^6.1.0",
-    "@types/node": "^20.14.6",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "18.2.18",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.1",
+    "@mui/lab": "^6.0.0-beta.10",
+    "@mui/material": "^6.1.1",
+    "@mui/material-nextjs": "^6.1.1",
+    "@types/node": "^22.6.1",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "18.3.0",
     "@visx/event": "^3.3.0",
     "@visx/responsive": "^3.10.2",
     "@visx/visx": "^3.11.0",
-    "@weng-lab/psychscreen-ui-components": "^0.9.0",
+    "@weng-lab/psychscreen-ui-components": "^2.0.0",
     "@weng-lab/ts-ztable": "^4.0.1",
-    "autoprefixer": "10.4.17",
+    "autoprefixer": "10.4.20",
     "bpnet-ui": "^0.3.8",
-    "eslint": "8.57.0",
-    "eslint-config-next": "14.2.5",
-    "graphql": "^16.8.1",
+    "eslint": "9.11.1",
+    "eslint-config-next": "14.2.13",
+    "graphql": "^16.9.0",
     "jubilant-carnival": "^0.6.0",
-    "logots-react": "latest",
-    "next": "14.2.3",
+    "logots-react": "^0.2.0",
+    "next": "14.2.13",
     "normalize.css": "^8.0.1",
     "only": "^0.0.2",
-    "postcss": "8.4.33",
+    "postcss": "8.4.47",
     "queryz": "^0.0.3",
     "react": "18.3.1",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "react-dropzone": "^14.2.3",
-    "semantic-ui-react": "latest",
-    "server": "^1.0.38",
-    "tailwindcss": "3.4.1",
-    "umap-js": "1.3.3",
+    "semantic-ui-react": "^2.1.5",
+    "server": "^1.0.41",
+    "tailwindcss": "3.4.13",
+    "umap-js": "1.4.0",
     "umms-gb": "^3.10.0",
-    "uuid": "^9.0.0"
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.3.3",
     "@graphql-typed-document-node/core": "^3.2.0",
     "file-loader": "^6.2.0",
-    "lint-staged": "^15.1.0",
-    "prettier": "^3.2.5",
-    "typescript": "5.3.3",
-    "webpack": "^5.90.1",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "typescript": "5.6.2",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
   },
   "prettier": {

screen2.0/src/app/_biosampleTables/BiosampleTables.tsx

@@ -5,7 +5,7 @@ import { CheckboxState, FiltersKey, Props, RegistryBiosample, RegistryBiosampleP
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight"
 import { Check,  Close,  FilterList } from "@mui/icons-material"
 import SearchIcon from '@mui/icons-material/Search';
-import { useQuery } from "@apollo/experimental-nextjs-app-support/ssr"
+import { useQuery } from "@apollo/client"
 import { assayHoverInfo, DownloadBiosamplecCREsButton, filterBiosamples } from "./helpers"
 import { BIOSAMPLE_QUERY, RNA_SEQ_QUERY } from "./queries"
 
@@ -204,7 +204,7 @@ export const BiosampleTables = <T extends boolean = false>({
 
     if (showRNAseq) cols.push({
       header: "RNA-Seq",
-      value: (row) => +!!row.rnaseq ?? "",
+      value: (row) => +row.rnaseq,
       render: (row) => {
         if (row.rnaseq) {
           return (

screen2.0/src/app/_mainsearch/ccreautocomplete.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback } from "react"
 import Box from "@mui/material/Box"
 import TextField from "@mui/material/TextField"
 import Autocomplete from "@mui/material/Autocomplete"
-import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
+import Grid from "@mui/material/Grid2"
 import Typography from "@mui/material/Typography"
 import { debounce } from "@mui/material/utils"
 import { CCRE_AUTOCOMPLETE_QUERY } from "./queries"
@@ -111,8 +111,8 @@ export const CcreAutoComplete: React.FC<{ assembly: string, header?: boolean }>
           renderOption={(props, option) => {
             return (
               <li {...props} key={props.id}>
-                <Grid2 container alignItems="center">
-                  <Grid2 sx={{ width: "100%", wordWrap: "break-word" }}>
+                <Grid container alignItems="center">
+                  <Grid sx={{ width: "100%", wordWrap: "break-word" }}>
                     <Box component="span" sx={{ fontWeight: "regular" }}>
                       {option}
                     </Box>
@@ -122,8 +122,8 @@ export const CcreAutoComplete: React.FC<{ assembly: string, header?: boolean }>
                           }-${(ccreAccessions.find((g: { ccreaccession: string }) => g.ccreaccession === option))?.end}`}
                       </Typography>
                     )}
-                  </Grid2>
-                </Grid2>
+                  </Grid>
+                </Grid>
               </li>
             )
           }}

screen2.0/src/app/_mainsearch/celltypeautocomplete.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, SetStateAction, useTransition } from "react
 import Box from "@mui/material/Box"
 import TextField from "@mui/material/TextField"
 import Autocomplete from "@mui/material/Autocomplete"
-import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
+import Grid from "@mui/material/Grid2"
 import Typography from "@mui/material/Typography"
 import { IconButton, Stack } from "@mui/material"
 import { Search } from "@mui/icons-material"
@@ -101,16 +101,16 @@ export const CelltypeAutocomplete: React.FC<{ assembly: string, header?: boolean
         renderOption={(props, option) => {
           return (
             <li {...props} key={props.id}>
-              <Grid2 container alignItems="center">
-                <Grid2 sx={{ width: "100%", wordWrap: "normal" }}>
+              <Grid container alignItems="center">
+                <Grid sx={{ width: "100%", wordWrap: "normal" }}>
                   <Box component="span" sx={{ fontWeight: "regular" }}>
                     {option.displayname}
                   </Box>
                   <Typography variant="body2" color="text.secondary">
                     {option.ontology}
                   </Typography>
-                </Grid2>
-              </Grid2>
+                </Grid>
+              </Grid>
             </li>
           )
         }}

screen2.0/src/app/_mainsearch/genomicregion.tsx

@@ -14,7 +14,7 @@ import {
 } from "@mui/material"
 import { useState, SetStateAction, useEffect, useMemo } from "react"
 import { Search } from "@mui/icons-material"
-import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
+import Grid from "@mui/material/Grid2"
 import { parseGenomicRegion } from "./parsegenomicregion"
 
 //https://mui.com/material-ui/react-text-field/#integration-with-3rd-party-input-libraries
@@ -193,9 +193,9 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
   }, [value, inputType, props.assembly, chromosome, start, end])
 
   return (
-    <Grid2 container spacing={2}>
+    <Grid container spacing={2}>
       {!props.header && (
-        <Grid2 xs={12} pt={0}>
+        <Grid pt={0} size={12}>
           <FormControl>
             {/* <FormLabel id="demo-row-radio-buttons-group-label">Input Format</FormLabel> */}
             <RadioGroup
@@ -209,9 +209,9 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
               <FormControlLabel value="Separated" control={<Radio />} label="Individual Inputs" />
             </RadioGroup>
           </FormControl>
-        </Grid2>
+        </Grid>
       )}
-      <Grid2 xs={12}>
+      <Grid size={12}>
         <Stack direction="row" alignItems="center">
           {inputType === "Separated" ? (
             <>
@@ -333,7 +333,7 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
             </>
           ) : (
             //UCSC Input
-            <TextField
+            (<TextField
               variant="outlined"
               InputLabelProps={{
                 shrink: true,
@@ -373,7 +373,7 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
               size={props.header ? "small" : "medium"}
               error={error}
               helperText={error ? (props.header ? "" : "Invalid format or range.") : ""}
-            />
+            />)
           )}
           <IconButton
             aria-label="Search"
@@ -388,9 +388,9 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
             <Search />
           </IconButton>
         </Stack>
-      </Grid2>
-    </Grid2>
-  )
+      </Grid>
+    </Grid>
+  );
 }
 
 export default GenomicRegion

screen2.0/src/app/_mainsearch/queries.ts

@@ -1,52 +1,52 @@
-import { gql } from "@apollo/client"
-
-export const CCRE_AUTOCOMPLETE_QUERY = gql`
-query cCREQuery($accession_prefix: [String!], $limit: Int, $assembly: String!) {
-    cCREQuery(accession_prefix: $accession_prefix, assembly: $assembly, limit: $limit) {
-        accession
-      coordinates {
-        start
-        end
-        chromosome
-      }
-    }
-}
-`
-
-
-export const GENE_AUTOCOMPLETE_QUERY = `
-query ($assembly: String!, $name_prefix: [String!], $limit: Int, $version: Int) {
-    gene(assembly: $assembly, name_prefix: $name_prefix, limit: $limit, version: $version) {
-      name
-      id
-      coordinates {
-        start
-        chromosome
-        end
-      }
-    }
-  }  
- `
-
-export const SNP_AUTOCOMPLETE_QUERY = `
-query snpAutocompleteQuery($snpid: String!, $assembly: String!) {
-    snpAutocompleteQuery(snpid: $snpid, assembly: $assembly) {
-        id
-        coordinates {
-            chromosome
-            start
-            end
-        }
-    }
-}
-`
-
-export const BED_INTERSECT_QUERY = gql`
-query bedIntersectCCRE_1 ($user_ccres: [cCRE]!, $assembly: String!, $max_ouput_length: Int) {
-  intersection (
-    userCcres: $user_ccres,
-    assembly: $assembly,
-    maxOutputLength: $max_ouput_length
-  )
-}
+import { gql } from "@apollo/client"
+
+export const CCRE_AUTOCOMPLETE_QUERY = gql`
+query cCREQuery($accession_prefix: [String!], $limit: Int, $assembly: String!) {
+    cCREQuery(accession_prefix: $accession_prefix, assembly: $assembly, limit: $limit) {
+        accession
+      coordinates {
+        start
+        end
+        chromosome
+      }
+    }
+}
+`
+
+
+export const GENE_AUTOCOMPLETE_QUERY = `
+query ($assembly: String!, $name_prefix: [String!], $limit: Int, $version: Int) {
+    gene(assembly: $assembly, name_prefix: $name_prefix, limit: $limit, version: $version) {
+      name
+      id
+      coordinates {
+        start
+        chromosome
+        end
+      }
+    }
+  }  
+ `
+
+export const SNP_AUTOCOMPLETE_QUERY = `
+query snpAutocompleteQuery($snpid: String!, $assembly: String!) {
+    snpAutocompleteQuery(snpid: $snpid, assembly: $assembly) {
+        id
+        coordinates {
+            chromosome
+            start
+            end
+        }
+    }
+}
+`
+
+export const BED_INTERSECT_QUERY = gql`
+query bedIntersectCCRE_1 ($user_ccres: [cCRE]!, $assembly: String!, $max_ouput_length: Int) {
+  intersection (
+    userCcres: $user_ccres,
+    assembly: $assembly,
+    maxOutputLength: $max_ouput_length
+  )
+}
 `

screen2.0/src/app/_mainsearch/snpautocomplete.tsx

@@ -6,7 +6,7 @@ import Typography from "@mui/material/Typography"
 import { debounce } from "@mui/material/utils"
 import { SNP_AUTOCOMPLETE_QUERY } from "./queries"
 import Config from "../../config.json"
-import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
+import Grid from "@mui/material/Grid2"
 import { IconButton, Stack } from "@mui/material"
 import { Search } from "@mui/icons-material"
 
@@ -118,8 +118,8 @@ export const SnpAutoComplete: React.FC<{ assembly: string, header?: boolean }> =
         renderOption={(props, option) => {
           return (
             <li {...props} key={props.id}>
-              <Grid2 container alignItems="center">
-                <Grid2 sx={{ width: "calc(100%)", wordWrap: "break-word" }}>
+              <Grid container alignItems="center">
+                <Grid sx={{ width: "calc(100%)", wordWrap: "break-word" }}>
                   <Box component="span" sx={{ fontWeight: "regular" }}>
                     {option}
                   </Box>
@@ -128,8 +128,8 @@ export const SnpAutoComplete: React.FC<{ assembly: string, header?: boolean }> =
                       {`${snpids.find((g) => g.id === option)?.chrom}:${snpids.find((g) => g.id === option)?.end}`}
                     </Typography>
                   )}
-                </Grid2>
-              </Grid2>
+                </Grid>
+              </Grid>
             </li>
           )
         }}