Theme Fixes

screen2.0/next.config.js

@@ -14,12 +14,6 @@ const nextConfig = {
   trailingSlash: false,
   assetPrefix: assetPrefix,
   basePath: basePath,
-  experimental: {
-    serverActions: true,
-    logging: {
-      level: "verbose"
-    },
-  },
 
   webpack: (config, { isServer }) => {
     if (!isServer) {

screen2.0/package.json

@@ -36,7 +36,6 @@
   },
   "dependencies": {
     "@apollo/client": "alpha",
-    "bpnet-ui": "^0.2.9",
     "@apollo/experimental-nextjs-app-support": "^0.4.3",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -49,27 +48,28 @@
     "@weng-lab/psychscreen-ui-components": "^0.8.0-a.2",
     "@weng-lab/ts-ztable": "^4.0.1",
     "autoprefixer": "10.4.16",
+    "bpnet-ui": "^0.2.9",
     "eslint": "8.52.0",
     "eslint-config-next": "14.0.0",
     "graphql": "^16.8.1",
     "jubilant-carnival": "^0.6.0",
-    "next": "13.5.4",
+    "logots-react": "latest",
+    "next": "14.0.1",
     "normalize.css": "^8.0.1",
     "only": "^0.0.2",
     "postcss": "8.4.31",
     "queryz": "^0.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
+    "semantic-ui-react": "latest",
     "server": "^1.0.38",
     "sharp": "^0.32.4",
     "tailwindcss": "3.3.5",
     "typescript": "5.2.2",
+    "umap-js": "1.3.3",
     "umms-gb": "^3.10.0",
-    "uuid": "^9.0.0",
-    "logots-react": "latest",
-    "semantic-ui-react": "latest",
-    "umap-js": "1.3.3"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "file-loader": "^6.2.0",

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

@@ -27,7 +27,6 @@ export function CoordinateRangeField(props: {
         sx={{ mb: 1.5 }}
         onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
           let value: string[] = event.target.value.split(":")[1].split("-")
-          console.log(value)
           if (value[0].split(",").length > 0) {
             let j: string = ""
             for (let c of value[0].split(",")) {
@@ -42,7 +41,6 @@ export function CoordinateRangeField(props: {
             }
             value[1] = j
           }
-          console.log(value)
           if (parseInt(value[1]) - parseInt(value[0]) <= 500000 && parseInt(value[1]) - parseInt(value[0]) > 0)
             props.setdr([parseInt(value[0]), parseInt(value[1])])
           // variant === "min"

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

@@ -11,8 +11,6 @@ import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
 import MenuIcon from "@mui/icons-material/Menu"
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
-import { ThemeProvider } from "@mui/material/styles"
-import { defaultTheme } from "../../../common/lib/themes"
 import {
   Box,
   FormGroup,
@@ -303,7 +301,6 @@ export default function DifferentialGeneExpression() {
     <LoadingMessage />
   ) : (
     <main>
-      <ThemeProvider theme={defaultTheme}>
         <Paper sx={{ ml: open ? `${drawerWidth}px` : 0, mt: 4 }} elevation={2}>
           <AppBar position="static" color="secondary" sx={{}}>
             <Grid2 container>
@@ -564,7 +561,6 @@ export default function DifferentialGeneExpression() {
             )
           )}
         </Drawer>
-      </ThemeProvider>
     </main>
   )
 }

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

@@ -150,7 +150,7 @@ export function PlotGeneExpression(props: {
           {/* The biosample category */}
           {(props.group === 'byTissueMaxTPM' || props.group === 'byExperimentTPM') &&
             <text
-              text-anchor="end"
+              textAnchor="end"
               x={160}
               y={y + (i * 20 + 15)}
             >
@@ -159,7 +159,7 @@ export function PlotGeneExpression(props: {
           }
           {props.group === 'byTissueTPM' && i === Math.floor(Object.values(info.values).length / 2) &&
             <text
-              text-anchor="end"
+              textAnchor="end"
               x={160}
               // If the tissue has an even number of values, bump up a little
               y={y + (i * 20 + 15) - (((Object.values(info.values).length % 2) !== 0) ? 0 : 12)}

screen2.0/src/app/downloads/data-matrices.tsx

@@ -234,7 +234,6 @@ export function DataMatrices(props: TabPanelProps) {
       bounds.y.start = bounds.y.end
       bounds.y.end = tempY
     }
-    console.log(bounds)
     setBounds(bounds)
   }
 

screen2.0/src/app/downloads/downloads.tsx

@@ -1,15 +1,12 @@
 "use client"
 
 import * as React from "react"
-import { Typography, Tabs, Tab, Box, Container, ThemeProvider } from "@mui/material"
-
+import { Tabs, Tab, Box, Container} from "@mui/material"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
-
 import { QuickStart } from "./quick-start"
 import { DetailedElements } from "./detailed-elements"
 import { DataMatrices } from "./data-matrices"
-import { useMemo, useState } from "react"
-import { defaultTheme } from "../../common/lib/themes"
+import { useState } from "react"
 import { useRouter } from "next/navigation"
 import { ApolloQueryResult } from "@apollo/client"
 
@@ -52,26 +49,24 @@ export default function DownloadsPage(props: {
   }
 
   return (
-    <ThemeProvider theme={defaultTheme}>
-      <Container>
-        <Grid2 mt={2} container spacing={2}>
-          <Grid2 xs={12}>
-            <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-              <Tabs value={page} onChange={handleChange} aria-label="basic tabs example">
-                <Tab label="Quick Start" sx={{ textTransform: "none" }} {...a11yProps(0)} />
-                <Tab label="Detailed Elements" sx={{ textTransform: "none" }} {...a11yProps(1)} />
-                <Tab label="Data Matrices" sx={{ textTransform: "none" }} {...a11yProps(2)} />
-              </Tabs>
-            </Box>
-          </Grid2>
-          <Grid2 xs={12}>
-            <QuickStart value={page} biosamples={props.biosamples} />
-            <DetailedElements value={page} biosamples={props.biosamples} />
-            {/* Matrices being fed biosamples might be redundant */}
-            <DataMatrices value={page} biosamples={props.biosamples} matrices={props.matrices} searchParams={props.searchParams} />
-          </Grid2>
+    <Container>
+      <Grid2 mt={2} container spacing={2}>
+        <Grid2 xs={12}>
+          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+            <Tabs value={page} onChange={handleChange} aria-label="basic tabs example">
+              <Tab label="Quick Start" sx={{ textTransform: "none" }} {...a11yProps(0)} />
+              <Tab label="Detailed Elements" sx={{ textTransform: "none" }} {...a11yProps(1)} />
+              <Tab label="Data Matrices" sx={{ textTransform: "none" }} {...a11yProps(2)} />
+            </Tabs>
+          </Box>
+        </Grid2>
+        <Grid2 xs={12}>
+          <QuickStart value={page} biosamples={props.biosamples} />
+          <DetailedElements value={page} biosamples={props.biosamples} />
+          {/* Matrices being fed biosamples might be redundant */}
+          <DataMatrices value={page} biosamples={props.biosamples} matrices={props.matrices} searchParams={props.searchParams} />
         </Grid2>
-      </Container>
-    </ThemeProvider>
+      </Grid2>
+    </Container>
   )
 }

screen2.0/src/app/downloads/page.tsx

@@ -1,9 +1,6 @@
 import * as React from "react"
 import DownloadsPage from "./downloads"
 import { UMAPQuery, biosampleQuery } from "../../common/lib/queries"
-import { ThemeProvider } from "@mui/material"
-import { defaultTheme } from "../../common/lib/themes"
-import { ApolloQueryResult } from "@apollo/client"
 
 export default async function Downloads({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) {
   const biosamples: any = await biosampleQuery()

screen2.0/src/app/layout.tsx

@@ -4,6 +4,7 @@ import { Inter } from "next/font/google"
 import ResponsiveAppBar from "../common/components/ResponsiveAppBar"
 import Footer from "../common/components/Footer"
 import { CssBaseline } from "@mui/material"
+import ThemeRegistry from "../common/theme-registry/theme-registry"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -16,14 +17,19 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body className={inter.className} id="page-container">
-        <div id="content-wrapper">
-          <ApolloWrapper>
-            <ResponsiveAppBar />
-            <CssBaseline />
-            <div id="body-wrapper">{children}</div>
-          </ApolloWrapper>
-        </div>
-        <Footer />
+        {/* Wrapper for Apollo Requests */}
+        <ApolloWrapper>
+          {/* Wrapper for MUI theme */}
+          <ThemeRegistry>
+            <div id="content-wrapper">
+              <ResponsiveAppBar />
+              <div id="body-wrapper">
+                {children}
+              </div>
+            </div>
+            <Footer />
+          </ThemeRegistry>
+        </ApolloWrapper>
       </body>
     </html>
   )

screen2.0/src/app/search/ccredetails/ccredetails.tsx

@@ -23,7 +23,6 @@ type CcreDetailsProps = {
 }
 
 export const CcreDetails: React.FC<CcreDetailsProps> = ({ accession, region, globals, assembly, genes, page }) => {
-  console.log("region", region)
   return (
     <>
       <Stack direction="row" justifyContent={"space-between"} alignItems={"baseline"}>

screen2.0/src/app/search/ccredetails/gene-expression.tsx

@@ -5,8 +5,6 @@ import { PlotGeneExpression } from "../../applets/gene-expression/PlotGeneExpres
 import { useQuery } from "@apollo/client"
 import { Button, Typography, Stack, TextField, MenuItem, FormControl, SelectChangeEvent, Checkbox, InputLabel, ListItemText, OutlinedInput, Select, ToggleButton, ToggleButtonGroup } from "@mui/material"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
-import { ThemeProvider } from "@mui/material/styles"
-import { defaultTheme } from "../../../common/lib/themes"
 import Image from "next/image"
 import { client } from "./client"
 import { HUMAN_GENE_EXP, MOUSE_GENE_EXP } from "../../applets/gene-expression/const"
@@ -136,7 +134,6 @@ export function GeneExpression(props: {
 
   //Handle assembly switch change (for applet only)
   const handleAssemblyChange = (checked: boolean) => {
-    console.log("assembly change called with " + checked)
     if (props.applet) {
       checked ? setAssembly("mm10") : setAssembly("GRCh38")
       //Switch back RNA type if going from mouse to human, as all data there is total
@@ -204,8 +201,7 @@ export function GeneExpression(props: {
   };
 
   return (
-    //Only reason that theme is used is to color buttons white
-    <ThemeProvider theme={defaultTheme}>
+    <>
       <Stack mb={3} direction="row" justifyContent={"space-between"}>
         <Typography alignSelf={"flex-end"} variant={props.applet ? "h4" : "h5"}>{`${assembly === "GRCh38" ? currentHumanGene : currentMouseGene} Gene Expression Profiles by RNA-seq`}</Typography>
         <Stack direction="row" spacing={3}>
@@ -396,6 +392,6 @@ export function GeneExpression(props: {
           }
         </Grid2>
       </Grid2>
-    </ThemeProvider>
+    </>
   )
 }

screen2.0/src/app/search/ccredetails/rampage.tsx

@@ -12,15 +12,13 @@ import {
   MenuItem,
   Select,
   SelectChangeEvent,
-  ThemeProvider,
   Toolbar,
   Tooltip,
   Typography,
 } from "@mui/material"
 import Config from "../../../config.json"
 import { PlotActivityProfiles } from "./utils"
 import Image from "next/image"
-import { defaultTheme } from "../../../common/lib/themes"
 import InfoIcon from "@mui/icons-material/Info"
 import { RampageToolTipInfo } from "./const"
 import { gql, useQuery } from "@apollo/client"
@@ -149,7 +147,6 @@ export default function Rampage(props: { gene: string; }) {
 
     data && data.length>0 && (
       <Grid2 container spacing={3}>
-        <ThemeProvider theme={defaultTheme}>
           <AppBar position="static" color="secondary">
             <Toolbar>
               <Grid2 xs={9} md={9} lg={9}>
@@ -230,7 +227,6 @@ export default function Rampage(props: { gene: string; }) {
               peakID={peak}           
               />
           </Grid2>
-        </ThemeProvider>
       </Grid2>
     )
   )

screen2.0/src/app/search/ccresearch.tsx

@@ -177,7 +177,6 @@ export const CcreSearch = (props: { mainQueryParams: MainQueryParams, globals })
   )
 
   useEffect(() => {
-    console.log("useEffect table rows fetched")
     setLoading(true)
     // @ts-expect-error
     //Setting react/experimental in types is not fixing this error? https://github.com/vercel/next.js/issues/49420#issuecomment-1537794691

screen2.0/src/common/components/MainResultsTable.tsx

@@ -86,7 +86,6 @@ function MainResultsTable(props: MainResultsTableProps) {
         var open = Boolean(anchorEl);
 
         const handleClose = () => {
-          console.log("closed properly")
           funcSetDistance(checkedState[0])
           funcSetCTCF_ChIAPET(checkedState[1])
           funcSetRNAPII_ChIAPET(checkedState[2])
@@ -198,7 +197,6 @@ function MainResultsTable(props: MainResultsTableProps) {
       header: "Conservation",
       value: (row: { conservationData: ConservationData }) => `Primates:\u00A0${row.conservationData.primates?.toFixed(2) ?? "unavailable"} Mammals:\u00A0${row.conservationData.mammals?.toFixed(2) ?? "unavailable"} Vertebrates:\u00A0${row.conservationData.vertebrates?.toFixed(2) ?? "unavailable"}` , 
     })
-    console.log("columns recalculated")
     return cols
   }
 

screen2.0/src/common/components/ResponsiveAppBar.tsx

@@ -3,12 +3,10 @@ import * as React from "react"
 import { AppBar, Box, Toolbar, IconButton, Typography, Menu, Container, Button, MenuItem } from "@mui/material"
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
 import MenuIcon from "@mui/icons-material/Menu"
-import { ThemeProvider } from "@mui/material/styles"
 import Link from "next/link"
 import Image from "next/image"
 import nextConfig from "../../../next.config"
 import screenIcon from "../../../public/screenIcon.png"
-import { defaultTheme } from "../lib/themes"
 
 import MainSearch from "./mainsearch/MainSearch"
 
@@ -42,7 +40,7 @@ const pageLinks = [
       // disable GWAS and DEG App for now
       //{ pageName: "GWAS", link: "/applets/gwas" },
       { pageName: "Gene Expression", link: "/applets/gene-expression " },
-     // { pageName: "Differential Gene Expression", link: "/applets/differential-gene-expression" },
+      // { pageName: "Differential Gene Expression", link: "/applets/differential-gene-expression" },
     ],
   },
 ]
@@ -85,7 +83,7 @@ function ResponsiveAppBar() {
   }
 
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <>
       <AppBar position="fixed">
         <Container maxWidth={false}>
           <Toolbar disableGutters sx={{ justifyContent: "space-between" }}>
@@ -103,7 +101,7 @@ function ResponsiveAppBar() {
                 ml: 1,
                 display: { xs: "flex" },
                 // flexShrink: 0,
-                flexGrow: {xs: 1, md: 0},
+                flexGrow: { xs: 1, md: 0 },
                 fontFamily: "monospace",
                 fontWeight: 700,
                 letterSpacing: ".3rem",
@@ -215,15 +213,14 @@ function ResponsiveAppBar() {
                 </Box>
               ))}
             </Box>
-            <Box sx={{display: { xs: "none", lg: "flex" }}}>
+            <Box sx={{ display: { xs: "none", lg: "flex" } }}>
               <MainSearch header />
             </Box>
           </Toolbar>
         </Container>
       </AppBar>
-      {/* This empty toolbar is placed here to bump content down with new fixed positioning. Suggested in MUI docs */}
       <Toolbar />
-    </ThemeProvider>
+    </>
   )
 }
 

screen2.0/src/common/components/mainsearch/BedUpload.tsx

@@ -25,7 +25,6 @@ const BedUpload = (props: { assembly: "mm10" | "GRCh38", header?: boolean }) =>
 
   const getIntersect = (jq, successF, errF) => {
     //Need to put this url in config file
-    console.log("getIntersect called")
     const url = config.BED_intersect.url
     fetch(url, {
       headers: {