-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* base layout * layout + ARGO * carousel component * button functionality * new images * new pictures and descriptions * Update carousel.tsx * margin * Link instead of router
- Loading branch information
Showing
10 changed files
with
244 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import React from "react"; | ||
| import { Swiper, SwiperSlide } from "swiper/react"; | ||
| import { Navigation, Pagination, Autoplay, EffectFade } from "swiper/modules"; | ||
| import { Box, Button, Stack, Typography } from "@mui/material"; | ||
| import "swiper/swiper-bundle.css"; | ||
| import { createTheme, ThemeProvider } from "@mui/material/styles"; | ||
| import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; | ||
| import Link from "next/link"; | ||
|
|
||
| const theme = createTheme({ | ||
| components: { | ||
| MuiButton: { | ||
| styleOverrides: { | ||
| root: { | ||
| textTransform: "none", | ||
| backgroundColor: "#030f98", | ||
| color: "white", | ||
| borderRadius: "8px", | ||
| boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)", | ||
| fontSize: "16px", | ||
| fontWeight: "500", | ||
| padding: "8px 20px", | ||
| width: "fit-content", | ||
| position: "relative", | ||
| "&:hover": { | ||
| backgroundColor: "#021170", | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| // Slide Data | ||
| const slides = [ | ||
| { | ||
| id: 1, | ||
| image: "/GeneExpressionSS.png", | ||
| text: "Gene Expression", | ||
| description: "Dive into comprehensive gene expression data across 324 human and 78 mouse datasets. Explore how genes are expressed in hundreds of cell and tissue types, providing valuable insights into their regulatory and functional roles. This tool enables researchers to identify context-specific expression patterns for their genes of interest.", | ||
| link: "../applets/gene-expression", | ||
| }, | ||
| { | ||
| id: 2, | ||
| image: "/GWASSS.png", | ||
| text: "GWAS", | ||
| description: "Analyze over 1 million variants associated with human phenotypes and diseases through the lens of cCRE overlap. This app helps prioritize causal variants by linking genetic associations to potential regulatory elements. Gain a deeper understanding of the regulatory landscape underlying complex traits and diseases.", | ||
| link: "../applets/gwas", | ||
| }, | ||
| // { | ||
| // id: 3, | ||
| // image: "/ARGOSS.png", | ||
| // text: "ARGO", | ||
| // description: "ARGO (Aggregate Rank Generator), allows users to input a set of candidate variants and obtain a prioritized list based on overlapping annotations", | ||
| // link: "" | ||
| // }, | ||
| ]; | ||
|
|
||
| const ExpandableCarousel = () => { | ||
|
|
||
| return ( | ||
| <ThemeProvider theme={theme}> | ||
| <Swiper | ||
| modules={[Navigation, Pagination, Autoplay, EffectFade]} | ||
| effect="fade" | ||
| speed={1000} | ||
| slidesPerView={1} | ||
| pagination={{ clickable: true }} | ||
| navigation | ||
| loop | ||
| autoplay={{ | ||
| delay: 5000, | ||
| disableOnInteraction: true, | ||
| }} | ||
| > | ||
| {slides.map((slide) => ( | ||
| <SwiperSlide key={slide.id}> | ||
| <Box | ||
| sx={{ | ||
| display: "flex", | ||
| alignItems: "center", | ||
| height: "60vh", | ||
| position: "relative", | ||
| }} | ||
| > | ||
| <Box | ||
| sx={{ | ||
| flex: 1, | ||
| height: "100%", | ||
| backgroundColor: "#101720", | ||
| color: "white", | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| padding: 3, | ||
| }} | ||
| > | ||
| <Stack justifyContent={"center"} alignItems={"center"} spacing={3} paddingX={3}> | ||
| <Typography variant="h5" textAlign="center" gutterBottom> | ||
| {slide.text} | ||
| </Typography> | ||
| <Typography variant="body1" textAlign="center" gutterBottom> | ||
| {slide.description} | ||
| </Typography> | ||
| <Button | ||
| LinkComponent={Link} | ||
| href={slide.link} | ||
| disabled={slide.text === "ARGO"}>Learn More<ArrowForwardIcon sx={{ marginLeft: "8px" }} /> | ||
| </Button> | ||
| </Stack> | ||
| </Box> | ||
| <Box | ||
| sx={{ | ||
| flex: 2, | ||
| height: "100%", | ||
| backgroundImage: `linear-gradient(to right, #101720, transparent), url(${slide.image})`, | ||
| backgroundSize: "cover", | ||
| backgroundPosition: "center", | ||
| }} | ||
| /> | ||
| </Box> | ||
| </SwiperSlide> | ||
| ))} | ||
| </Swiper> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExpandableCarousel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,114 @@ | ||
| "use client" | ||
|
|
||
| import { Typography } from "@mui/material" | ||
| import { Box, Button, Divider, IconButton, Stack, Typography } from "@mui/material"; | ||
| import Grid from "@mui/material/Grid2" | ||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
| import React from "react"; | ||
| import Carousel from "./carousel"; | ||
| import Link from "next/link"; | ||
|
|
||
| export default function Applets() { | ||
|
|
||
| const applets = [ | ||
| { | ||
| id: 1, | ||
| title: "Gene Expression", | ||
| description: "Explore gene expression patterns across hundreds of cell and tissue types", | ||
| imageUrl: "/GeneExpressionPlaceHolder.png", | ||
| link: "../applets/gene-expression", | ||
| buttonText: "Explore Genes" | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: "GWAS", | ||
| description: "Investigate the overlap between cCREs and GWAS results to prioritize causal variants and identify potential regulatory mechanisms.", | ||
| imageUrl: "/GWASPlaceHolder.png", | ||
| link: "../applets/gwas", | ||
| buttonText: "Explore Studies" | ||
| }, | ||
| // { | ||
| // id: 3, | ||
| // title: "ARGO", | ||
| // description: "Rank genomic regions based on overlapping annotations", | ||
| // imageUrl: "/argo.png", | ||
| // link: "", | ||
| // buttonText: "Under Construction" | ||
| // }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <main> | ||
| <Typography> | ||
| This is the applets page <br /> | ||
| Here we can have info on the different applets | ||
| </Typography> | ||
| <Carousel /> | ||
| <Divider variant="middle" sx={{ mx: 40, mb: 2, mt: 2 }}> | ||
| <Stack justifyContent={"center"} alignItems={"center"} sx={{ mx: 5 }}> | ||
| <Typography variant="h4">Applets</Typography> | ||
| <IconButton | ||
| onClick={() => { | ||
| window.scrollTo({ top: window.innerHeight * 0.6, behavior: 'smooth' }); | ||
| }} | ||
| > | ||
| <ExpandMoreIcon /> | ||
| </IconButton> | ||
| </Stack> | ||
| </Divider> | ||
| {applets.map((applet, index) => ( | ||
| <React.Fragment key={applet.id}> | ||
| <Box | ||
| paddingX={5} | ||
| > | ||
| <Grid container alignItems="center" justifyContent="center" spacing={10}> | ||
| {index % 2 === 0 ? ( | ||
| <> | ||
| <Grid size={3}> | ||
| <Typography variant="h4" gutterBottom> | ||
| {applet.title} | ||
| </Typography> | ||
| <Typography variant="body1" gutterBottom> | ||
| {applet.description} | ||
| </Typography> | ||
| <Button | ||
| LinkComponent={Link} | ||
| variant="contained" color="primary" href={applet.link} disabled={applet.buttonText === "Under Construction"}> | ||
| {applet.buttonText} | ||
| </Button> | ||
| </Grid> | ||
| <Grid size={3}> | ||
| <img | ||
| src={applet.imageUrl} | ||
| alt={applet.title} | ||
| style={{ width: "100%", borderRadius: "8px" }} | ||
| /> | ||
| </Grid> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <Grid size={3}> | ||
| <img | ||
| src={applet.imageUrl} | ||
| alt={applet.title} | ||
| style={{ width: "100%", borderRadius: "8px" }} | ||
| /> | ||
| </Grid> | ||
| <Grid size={3}> | ||
| <Typography variant="h4" gutterBottom> | ||
| {applet.title} | ||
| </Typography> | ||
| <Typography variant="body1" gutterBottom> | ||
| {applet.description} | ||
| </Typography> | ||
| <Button | ||
| LinkComponent={Link} | ||
| variant="contained" color="primary" href={applet.link}> | ||
| {applet.buttonText} | ||
| </Button> | ||
| </Grid> | ||
| </> | ||
| )} | ||
| </Grid> | ||
| </Box> | ||
| {index < applets.length - 1 && <Divider variant="middle" sx={{ my: 4, mx: 40 }} />} | ||
| </React.Fragment> | ||
| ))} | ||
| </main> | ||
| ) | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters