From 6cf9ac9d2dfd7e40e8a95eea377554f5c3ddbf78 Mon Sep 17 00:00:00 2001
From: Jake Wagoner <jakewagoneredu@gmail.com>
Date: Wed, 4 Sep 2024 13:03:42 -0600
Subject: [PATCH 1/2] Update examples on homepage to study datasets/screenshots

---
 packages/app/src/components/Home.tsx | 81 ++++++++++++++++++++--------
 packages/app/src/components/Root.tsx | 18 ++++---
 2 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/packages/app/src/components/Home.tsx b/packages/app/src/components/Home.tsx
index fcf17f34..7b259ab0 100644
--- a/packages/app/src/components/Home.tsx
+++ b/packages/app/src/components/Home.tsx
@@ -3,7 +3,7 @@ import { Box, Card, CardActionArea, CardContent, CardMedia, Link, Typography } f
 export const Home = () => {
     return (
         <Box sx={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: 'calc(100% - 54px)', width: '100%', paddingBottom: "50px"}}>
-            <Card raised sx={{ maxWidth: 1000, borderRadius: "10px" }}>
+            <Card raised sx={{ maxWidth: 1400, borderRadius: "10px", boxShadow: 'none' }}>
                 <CardContent>
                     <Typography gutterBottom variant="h4" component="div">
                         Welcome to UpSet 2.0
@@ -19,27 +19,64 @@ export const Home = () => {
                     <Typography variant="body1" color="text.secondary">
                         If this is your first time visiting UpSet, click on the images below to explore some examples.
                     </Typography>
-                    <Box sx={{display: 'flex', justifyContent: 'space-around', alignItems: 'center', width: '100%', marginTop: '1em'}}>
-                        <Card sx={{boxShadow: 4, borderRadius: "8px"}} aria-label="Example of a dataset of movies in UpSet">
-                            <CardActionArea onClick={() => window.open('/?workspace=Upset+Examples&table=movies&sessionId=192')}>
-                                <CardMedia component="img" height="250" image="/placard/movies.png" alt="Example UpSet plot: movies" />
-                                <CardContent sx={{paddingLeft: 0}}>
-                                    <Typography variant="h5" component="div" sx={{paddingLeft: "0.8rem", position: 'absolute', bottom: '0.5rem', width: '100%', paddingTop: '5rem', boxShadow: 'inset 0 -230px 70px -120px #fff'}}>
-                                        Movies - Upset
-                                    </Typography>
-                                </CardContent>
-                            </CardActionArea>
-                        </Card>
-                        <Card sx={{boxShadow: 4, borderRadius: "8px"}} aria-label="Example of a dataset of Simpsons character attributes in UpSet">
-                            <CardActionArea onClick={() => window.open('/?workspace=Upset+Examples&table=simpsons&sessionId=193')}>
-                                <CardMedia component="img" height="250" image="/placard/simpsons.png" alt="Example UpSet plot: simpsons" />
-                                <CardContent sx={{paddingLeft: 0}}>
-                                    <Typography variant="h5" component="div" sx={{paddingLeft: "0.8rem", position: 'absolute', bottom: '0.5rem', width: '100%', paddingTop: '5em', boxShadow: 'inset 0 -230px 70px -120px #fff'}}>
-                                        Simpsons - Upset
-                                    </Typography>
-                                </CardContent>
-                            </CardActionArea>
-                        </Card>
+                    <Box sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        width: '100%',
+                        marginTop: '1em',
+                        marginBottom: '1em'
+                    }}>
+                        <Box sx={{  display: 'grid',
+                                    gridTemplateColumns: '1fr 1fr',
+                                    gridTemplateRows: '280px 280px',
+                                    gridColumnGap: '20px',
+                                    gridRowGap: '20px',
+                                    width: '60%',
+                                    height: '100%',
+                                    margin: 'auto',
+                                    marginTop: '1em'}}>
+                            <Card sx={{boxShadow: 4, borderRadius: "8px", width: '100%', height: '100%'}} aria-label="Example of a dataset of movies in UpSet">
+                                <CardActionArea onClick={() => window.open('/?workspace=Upset+Examples&table=movies&sessionId=2835')}>
+                                    <CardMedia component="img" sx={{ height:"250px", paddingTop:"4px" }} image="/placard/movies_example.png" alt="Example UpSet plot: movies" />
+                                    <CardContent sx={{paddingLeft: 0}}>
+                                        <Typography variant="h5" component="div" sx={{paddingLeft: "0.8rem", position: 'absolute', bottom: '0.5rem', width: '100%', paddingTop: '5rem', boxShadow: 'inset 0 -230px 70px -120px #fff'}}>
+                                            Movies - Upset
+                                        </Typography>
+                                    </CardContent>
+                                </CardActionArea>
+                            </Card>
+                            <Card sx={{boxShadow: 4, borderRadius: "8px", width: '100%', height: '100%'}} aria-label="Example of a dataset of Covid Symptoms in UpSet">
+                                <CardActionArea onClick={() => window.open('/?workspace=Upset+Examples&table=Covid_Symptoms&sessionId=2783')}>
+                                    <CardMedia component="img" sx={{ height:"250px", paddingTop:"4px" }} image="/placard/covid_example.png" alt="Example UpSet plot: Covid Symptoms" />
+                                    <CardContent sx={{paddingLeft: 0}}>
+                                        <Typography variant="h5" component="div" sx={{paddingLeft: "0.8rem", position: 'absolute', bottom: '0.5rem', width: '100%', paddingTop: '5em', boxShadow: 'inset 0 -230px 70px -120px #fff'}}>
+                                            Covid Symptoms - Upset
+                                        </Typography>
+                                    </CardContent>
+                                </CardActionArea>
+                            </Card>
+                            <Card sx={{boxShadow: 4, borderRadius: "8px", width: '100%', height: '100%'}} aria-label="Example of a dataset of Tennis Grandslam Championships in UpSet">
+                                <CardActionArea onClick={() => window.open('/?workspace=Upset+Examples&table=Tennis_Grand_Slam_Champions&sessionId=2780')}>
+                                    <CardMedia component="img" sx={{ height:"250px", paddingTop:"4px" }} image="/placard/tennis_example.png" alt="Example UpSet plot: Tennis Grand Slam Championships" />
+                                    <CardContent sx={{paddingLeft: 0}}>
+                                        <Typography variant="h5" component="div" sx={{paddingLeft: "0.8rem", position: 'absolute', bottom: '0.5rem', width: '100%', paddingTop: '5rem', boxShadow: 'inset 0 -230px 70px -120px #fff'}}>
+                                            Tennis Tournament Winners - Upset
+                                        </Typography>
+                                    </CardContent>
+                                </CardActionArea>
+                            </Card>
+                            <Card sx={{boxShadow: 4, borderRadius: "8px", width: '100%', height: '100%'}} aria-label="Example of a dataset of World Organizations in UpSet">
+                                <CardActionArea onClick={() => window.open('/?workspace=Upset+Examples&table=International_Organizations&sessionId=2777')}>
+                                    <CardMedia component="img" sx={{ height:"250px", paddingTop:"4px" }} image="/placard/world_orgs_example.png" alt="Example UpSet plot: World Organizations" />
+                                    <CardContent sx={{paddingLeft: 0}}>
+                                        <Typography variant="h5" component="div" sx={{paddingLeft: "0.8rem", position: 'absolute', bottom: '0.5rem', width: '100%', paddingTop: '5rem', boxShadow: 'inset 0 -230px 70px -120px #fff'}}>
+                                            World Organizations - UpSet
+                                        </Typography>
+                                    </CardContent>
+                                </CardActionArea>
+                            </Card>
+                        </Box>
                     </Box>
                 </CardContent>
             </Card>
diff --git a/packages/app/src/components/Root.tsx b/packages/app/src/components/Root.tsx
index 9c2ef54e..1fdcf89d 100644
--- a/packages/app/src/components/Root.tsx
+++ b/packages/app/src/components/Root.tsx
@@ -3,7 +3,7 @@ import { convertConfig, UpsetConfig } from "@visdesignlab/upset2-core"
 import { Box, css } from "@mui/material"
 import { Body } from "./Body"
 import Header from "./Header"
-import { useRef, useState, useEffect, createContext } from "react"
+import { useRef, useState, useEffect, createContext, useMemo } from "react"
 import React from "react"
 import Footer from "./Footer"
 import { useRecoilValue } from "recoil"
@@ -18,13 +18,6 @@ type Props = {
     config?: UpsetConfig
 }
 
-const AppCss = css`
-  overflow: hidden;
-  height: 100vh;
-  display: grid;
-  grid-template-rows: min-content auto;
-`;
-
 export const ProvenanceContext = createContext<{
     provenance: UpsetProvenance;
     actions: UpsetActions;
@@ -34,6 +27,15 @@ export const Root = ({provenance, actions, data, config}: Props) => {
     const headerDiv = useRef<HTMLDivElement>(null);
     const [headerHeight, setHeaderHeight] = useState(-1);
 
+    const AppCss = useMemo(() => {
+      return css`
+        overflow: ${data === null ? "auto" : "hidden"};
+        height: 100vh;
+        display: grid;
+        grid-template-rows: min-content auto;
+      `;
+    }, [data]);
+
     useEffect(() => {
       const { current } = headerDiv;
       if (!current) return;

From 645588730b41e8bd95951a7907eb87f7af295d4c Mon Sep 17 00:00:00 2001
From: Jake Wagoner <jakewagoneredu@gmail.com>
Date: Wed, 4 Sep 2024 15:41:12 -0600
Subject: [PATCH 2/2] Better style abstraction in homepage

---
 packages/app/src/components/Home.tsx | 52 +++++++++++++++++++---------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/packages/app/src/components/Home.tsx b/packages/app/src/components/Home.tsx
index 7b259ab0..982a601f 100644
--- a/packages/app/src/components/Home.tsx
+++ b/packages/app/src/components/Home.tsx
@@ -1,5 +1,21 @@
 import { Box, Card, CardActionArea, CardContent, CardMedia, Link, Typography } from "@mui/material"
 
+const cardTextStyle = {
+    position: 'absolute',
+    paddingLeft: "0.8rem",
+    paddingTop: '5rem',
+    bottom: '0.5rem',
+    width: '100%',
+    boxShadow: 'inset 0 -230px 70px -120px #fff'
+}
+
+const cardStyle = {
+    boxShadow: 4,
+    borderRadius: "8px",
+    width: '100%',
+    height: '100%'
+}
+
 export const Home = () => {
     return (
         <Box sx={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: 'calc(100% - 54px)', width: '100%', paddingBottom: "50px"}}>
@@ -27,50 +43,52 @@ export const Home = () => {
                         marginTop: '1em',
                         marginBottom: '1em'
                     }}>
-                        <Box sx={{  display: 'grid',
-                                    gridTemplateColumns: '1fr 1fr',
-                                    gridTemplateRows: '280px 280px',
-                                    gridColumnGap: '20px',
-                                    gridRowGap: '20px',
-                                    width: '60%',
-                                    height: '100%',
-                                    margin: 'auto',
-                                    marginTop: '1em'}}>
-                            <Card sx={{boxShadow: 4, borderRadius: "8px", width: '100%', height: '100%'}} aria-label="Example of a dataset of movies in UpSet">
+                        <Box sx={{
+                            display: 'grid',
+                            gridTemplateColumns: '1fr 1fr',
+                            gridTemplateRows: '280px 280px',
+                            gridColumnGap: '20px',
+                            gridRowGap: '20px',
+                            width: '60%',
+                            height: '100%',
+                            margin: 'auto',
+                            marginTop: '1em'
+                        }}>
+                            <Card sx={cardStyle} aria-label="Example of a dataset of movies in UpSet">
                                 <CardActionArea onClick={() => window.open('/?workspace=Upset+Examples&table=movies&sessionId=2835')}>
                                     <CardMedia component="img" sx={{ height:"250px", paddingTop:"4px" }} image="/placard/movies_example.png" alt="Example UpSet plot: movies" />
                                     <CardContent sx={{paddingLeft: 0}}>
-                                        <Typography variant="h5" component="div" sx={{paddingLeft: "0.8rem", position: 'absolute', bottom: '0.5rem', width: '100%', paddingTop: '5rem', boxShadow: 'inset 0 -230px 70px -120px #fff'}}>
+                                        <Typography variant="h5" component="div" sx={cardTextStyle}>
                                             Movies - Upset
                                         </Typography>
                                     </CardContent>
                                 </CardActionArea>
                             </Card>
-                            <Card sx={{boxShadow: 4, borderRadius: "8px", width: '100%', height: '100%'}} aria-label="Example of a dataset of Covid Symptoms in UpSet">
+                            <Card sx={cardStyle} aria-label="Example of a dataset of Covid Symptoms in UpSet">
                                 <CardActionArea onClick={() => window.open('/?workspace=Upset+Examples&table=Covid_Symptoms&sessionId=2783')}>
                                     <CardMedia component="img" sx={{ height:"250px", paddingTop:"4px" }} image="/placard/covid_example.png" alt="Example UpSet plot: Covid Symptoms" />
                                     <CardContent sx={{paddingLeft: 0}}>
-                                        <Typography variant="h5" component="div" sx={{paddingLeft: "0.8rem", position: 'absolute', bottom: '0.5rem', width: '100%', paddingTop: '5em', boxShadow: 'inset 0 -230px 70px -120px #fff'}}>
+                                        <Typography variant="h5" component="div" sx={cardTextStyle}>
                                             Covid Symptoms - Upset
                                         </Typography>
                                     </CardContent>
                                 </CardActionArea>
                             </Card>
-                            <Card sx={{boxShadow: 4, borderRadius: "8px", width: '100%', height: '100%'}} aria-label="Example of a dataset of Tennis Grandslam Championships in UpSet">
+                            <Card sx={cardStyle} aria-label="Example of a dataset of Tennis Grandslam Championships in UpSet">
                                 <CardActionArea onClick={() => window.open('/?workspace=Upset+Examples&table=Tennis_Grand_Slam_Champions&sessionId=2780')}>
                                     <CardMedia component="img" sx={{ height:"250px", paddingTop:"4px" }} image="/placard/tennis_example.png" alt="Example UpSet plot: Tennis Grand Slam Championships" />
                                     <CardContent sx={{paddingLeft: 0}}>
-                                        <Typography variant="h5" component="div" sx={{paddingLeft: "0.8rem", position: 'absolute', bottom: '0.5rem', width: '100%', paddingTop: '5rem', boxShadow: 'inset 0 -230px 70px -120px #fff'}}>
+                                        <Typography variant="h5" component="div" sx={cardTextStyle}>
                                             Tennis Tournament Winners - Upset
                                         </Typography>
                                     </CardContent>
                                 </CardActionArea>
                             </Card>
-                            <Card sx={{boxShadow: 4, borderRadius: "8px", width: '100%', height: '100%'}} aria-label="Example of a dataset of World Organizations in UpSet">
+                            <Card sx={cardStyle} aria-label="Example of a dataset of World Organizations in UpSet">
                                 <CardActionArea onClick={() => window.open('/?workspace=Upset+Examples&table=International_Organizations&sessionId=2777')}>
                                     <CardMedia component="img" sx={{ height:"250px", paddingTop:"4px" }} image="/placard/world_orgs_example.png" alt="Example UpSet plot: World Organizations" />
                                     <CardContent sx={{paddingLeft: 0}}>
-                                        <Typography variant="h5" component="div" sx={{paddingLeft: "0.8rem", position: 'absolute', bottom: '0.5rem', width: '100%', paddingTop: '5rem', boxShadow: 'inset 0 -230px 70px -120px #fff'}}>
+                                        <Typography variant="h5" component="div" sx={cardTextStyle}>
                                             World Organizations - UpSet
                                         </Typography>
                                     </CardContent>