Refactor, rm old theme

weng-lab · Nov 2, 2023 · 12b6ac7 · 12b6ac7
1 parent 4a1385c
commit 12b6ac7
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 93 deletions.
diff --git a/screen2.0/src/app/applets/differential-gene-expression/page.tsx b/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,7 @@ export default function DifferentialGeneExpression() {
     <LoadingMessage />
   ) : (
     <main>
-      <ThemeProvider theme={defaultTheme}>
+      {/* <ThemeProvider theme={defaultTheme}> */}
         <Paper sx={{ ml: open ? `${drawerWidth}px` : 0, mt: 4 }} elevation={2}>
           <AppBar position="static" color="secondary" sx={{}}>
             <Grid2 container>
@@ -564,7 +562,7 @@ export default function DifferentialGeneExpression() {
             )
           )}
         </Drawer>
-      </ThemeProvider>
+      {/* </ThemeProvider> */}
     </main>
   )
 }
diff --git a/screen2.0/src/app/downloads/downloads.tsx b/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>
   )
 }
diff --git a/screen2.0/src/app/downloads/page.tsx b/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()

diff --git a/screen2.0/src/app/layout.tsx b/screen2.0/src/app/layout.tsx
@@ -4,7 +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/lib/ThemeRegistry/ThemeRegistry"
+import ThemeRegistry from "../common/theme-registry/theme-registry"
 
 const inter = Inter({ subsets: ["latin"] })
 

diff --git a/screen2.0/src/app/search/ccredetails/gene-expression.tsx b/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"
@@ -204,8 +202,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 +393,6 @@ export function GeneExpression(props: {
           }
         </Grid2>
       </Grid2>
-    </ThemeProvider>
+    </>
   )
 }
diff --git a/screen2.0/src/app/search/ccredetails/rampage.tsx b/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>
     )
   )

diff --git a/screen2.0/src/common/components/ResponsiveAppBar.tsx b/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>
+    </>
   )
 }
 

diff --git a/screen2.0/src/common/lib/themes.ts b/screen2.0/src/common/lib/themes.ts
diff --git a/...common/lib/ThemeRegistry/EmotionCache.tsx → ...c/common/theme-registry/emotion-cache.tsx b/...common/lib/ThemeRegistry/EmotionCache.tsx → ...c/common/theme-registry/emotion-cache.tsx
diff --git a/...ommon/lib/ThemeRegistry/ThemeRegistry.tsx → .../common/theme-registry/theme-registry.tsx b/...ommon/lib/ThemeRegistry/ThemeRegistry.tsx → .../common/theme-registry/theme-registry.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import NextAppDirEmotionCacheProvider from './EmotionCache';
+import NextAppDirEmotionCacheProvider from './emotion-cache';
 import theme from './theme';
 
 export default function ThemeRegistry({ children }: { children: React.ReactNode }) {

diff --git a/...2.0/src/common/lib/ThemeRegistry/theme.ts → screen2.0/src/common/theme-registry/theme.ts b/...2.0/src/common/lib/ThemeRegistry/theme.ts → screen2.0/src/common/theme-registry/theme.ts
@@ -10,11 +10,19 @@ const roboto = Roboto({
 const theme = createTheme({
   palette: {
     mode: 'light',
+    primary: {
+      main: "#000F9F",
+    },
+    //This is used to color buttons white, may not be best way to do so
+    secondary: {
+      main: "#ffffff",
+    },
   },
   typography: {
     fontFamily: roboto.style.fontFamily,
   },
   components: {
+    //This came with file, not sure what it does
     MuiAlert: {
       styleOverrides: {
         root: ({ ownerState }) => ({