Fritz-specific about page

static/js/components/About.jsx

@@ -11,20 +11,30 @@ import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
 import Box from "@material-ui/core/Box";
 import Paper from "@material-ui/core/Paper";
+import Avatar from "@material-ui/core/Avatar";
+import Grid from "@material-ui/core/Grid";
 
 import clsx from "clsx";
 import dayjs from "dayjs";
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    display: "inline-block",
-    paddingLeft: "1em",
-    paddingRight: "1em",
-    maxWidth: "100rem",
+    padding: "1rem 2rem 2rem 2rem",
     fontSize: "1rem",
+    "& .MuiTypography-h5": {
+      margin: "1rem 0 0.83rem 0",
+      fontWeight: 600,
+      wordBreak: "break-all",
+    },
+    "& .MuiTypography-body1": {
+      margin: "1rem 0",
+    },
   },
   bibcard: {
     marginTop: "1rem",
+    "& .MuiTypography-body1": {
+      margin: 0,
+    },
   },
   bibtex: {
     marginTop: "2rem",
@@ -47,14 +57,23 @@ const useStyles = makeStyles((theme) => ({
   gitlogPR: {
     color: theme.palette.primary.dark,
   },
+  dev: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  devIcon: {
+    width: "5rem",
+    height: "5rem",
+  },
 }));
 
 const BibLink = ({ bibtex, children }) => {
   const classes = useStyles();
   const [folded, setFolded] = useState(true);
 
   return (
-    <Card className={classes.bibcard}>
+    <Card className={classes.bibcard} variant="outlined">
       <CardContent>
         <Typography>{children}</Typography>
         <pre
@@ -85,34 +104,102 @@ const About = () => {
   const cosmoref = useSelector((state) => state.sysInfo.cosmoref);
   const gitlog = useSelector((state) => state.sysInfo.gitlog);
 
+  const developers = [
+    {
+      name: "Joshua Bloom",
+      src: "/static/images/developers/bloom.jpeg",
+    },
+    {
+      name: "Michael Coughlin",
+      src: "/static/images/developers/coughlin.jpg",
+    },
+    {
+      name: "Arien Crellin-Quick",
+      src: "/static/images/developers/crellinquick.jpg",
+    },
+    {
+      name: "Dmitry Duev",
+      src: "/static/images/developers/duev.jpg",
+    },
+    {
+      name: "Daniel Goldstein",
+      src: "/static/images/developers/goldstein.jpg",
+    },
+    {
+      name: "Matthew Graham",
+      src: "/static/images/developers/graham.jpg",
+    },
+    {
+      name: "Mansi Kasliwal",
+      src: "/static/images/developers/kasliwal.jpg",
+    },
+    {
+      name: "Guy Nir",
+      src: "/static/images/developers/nir.jpg",
+    },
+    {
+      name: "Kyung Min Shin",
+      src: "/static/images/developers/shin.jpg",
+    },
+    {
+      name: "Leo Singer",
+      src: "/static/images/developers/singer.jpg",
+    },
+    {
+      name: "Stéfan van der Walt",
+      src: "/static/images/developers/vanderwalt.jpg",
+    },
+  ];
   return (
-    <Box className={classes.root}>
-      <h2>
-        This is SkyPortal&nbsp;
+    <Paper className={classes.root}>
+      <Typography variant="h5">
+        This is Fritz&nbsp;
         <code>v{version}</code>.
-      </h2>
-      <p>
-        The project homepage is at&nbsp;
-        <a href="https://skyportal.io">https://skyportal.io</a>
-      </p>
-      <p>
-        Documentation lives at&nbsp;
-        <a href="https://skyportal.io">https://skyportal.io/docs/</a>
-      </p>
-      <p>
-        You may also interact with SkyPortal through its API. Generate a token
-        from your&nbsp;
-        <Link to="/profile">profile</Link>&nbsp; page, then refer to the&nbsp;
+      </Typography>
+      <Typography variant="body1">
+        Fritz is an open source codebase that serves as a dynamic collaborative
+        platform for time-domain astronomy. It is being jointly developed at
+        Caltech and UC Berkeley.
+      </Typography>
+      <Typography variant="body1">Meet the core dev team:</Typography>
+      <div>
+        <Grid container spacing={2}>
+          {developers.map((dev) => (
+            <Grid item md={3} xs={4} key={dev.name}>
+              <div className={classes.dev}>
+                <Avatar
+                  alt={dev.name}
+                  src={dev.src}
+                  className={classes.devIcon}
+                />
+                <Typography variant="body1">{dev.name}</Typography>
+              </div>
+            </Grid>
+          ))}
+        </Grid>
+      </div>
+      <Typography variant="body1">
+        Fritz integrates and extends two projects,&nbsp;
+        <a href="https://github.com/dmitryduev/kowalski">Kowalski</a>
+        &nbsp;&&nbsp;
+        <a href="https://skyportal.io">SkyPortal</a>, and has the functionality
+        of an alert broker, a multi-survey data sink/archive, a marshal, and a
+        target and observation/follow-up management tool.
+      </Typography>
+      <Typography variant="body1">
+        You may also interact with Fritz through its API. Generate a token from
+        your&nbsp;
+        <Link to="/profile">profile</Link>&nbsp;page, then refer to the&nbsp;
         <a href="https://skyportal.io/docs/api.html">API documentation</a>.
-      </p>
-      <p>
+      </Typography>
+      <Typography variant="body1">
         Please file issues on our GitHub page at&nbsp;
-        <a href="https://github.com/skyportal/skyportal">
-          https://github.com/skyportal/skyportal
+        <a href="https://github.com/fritz-marshal/fritz">
+          https://github.com/fritz-marshal/fritz
         </a>
-      </p>
+      </Typography>
       <div>
-        If you found SkyPortal useful, please consider citing our work:
+        If you found Fritz useful, please cite the following papers:
         <BibLink
           bibtex={`@article{skyportal2019,
   author = {St\\'efan J. van der Walt and Arien Crellin-Quick and Joshua S. Bloom},
@@ -135,10 +222,67 @@ const About = () => {
           </a>
           .
         </BibLink>
+        <BibLink
+          bibtex={`@article{duev2019real,
+  title={Real-bogus classification for the Zwicky Transient Facility using deep learning},
+  author={Duev, Dmitry A and Mahabal, Ashish and Masci, Frank J and Graham, Matthew J and Rusholme, Ben and Walters, Richard and Karmarkar, Ishani and Frederick, Sara and Kasliwal, Mansi M and Rebbapragada, Umaa and others},
+  journal={Monthly Notices of the Royal Astronomical Society},
+  volume={489},
+  number={3},
+  pages={3582--3590},
+  year={2019},
+  publisher={Oxford University Press}
+  url={https://ui.adsabs.harvard.edu/abs/2019MNRAS.489.3582D/abstract}
+}`}
+        >
+          Duev, Dmitry A., et al.,{" "}
+          <em>
+            Real-bogus classification for the Zwicky Transient Facility using
+            deep learning.
+          </em>{" "}
+          Monthly Notices of the Royal Astronomical Society, 489(3) 3582-3590,
+          2019.{" "}
+          <a href="https://doi.org/10.1093/mnras/stz2357">
+            https://doi.org/10.1093/mnras/stz2357
+          </a>
+          .
+        </BibLink>
+        <BibLink
+          bibtex={`@article{Kasliwal_2019,
+	doi = {10.1088/1538-3873/aafbc2},
+	url = {https://doi.org/10.1088%2F1538-3873%2Faafbc2},
+	year = 2019,
+	month = {feb},
+	publisher = {{IOP} Publishing},
+	volume = {131},
+	number = {997},
+	pages = {038003},
+	author = {M. M. Kasliwal and C. Cannella and A. Bagdasaryan and T. Hung and U. Feindt and L. P. Singer and M. Coughlin and C. Fremling and R. Walters and D. Duev and R. Itoh and R. M. Quimby},
+	title = {The {GROWTH} Marshal: A Dynamic Science Portal for Time-domain Astronomy},
+	journal = {Publications of the Astronomical Society of the Pacific},
+}`}
+        >
+          Kasliwal, M., et al.,{" "}
+          <em>
+            The GROWTH marshal: a dynamic science portal for time-domain
+            astronomy.
+          </em>{" "}
+          Publications of the Astronomical Society of the Pacific, 131(997)
+          038003, Feb 2019.{" "}
+          <a href="https://doi.org/10.1088%2F1538-3873%2Faafbc2">
+            https://doi.org/10.1088%2F1538-3873%2Faafbc2
+          </a>
+          .
+        </BibLink>
       </div>
+      <Typography variant="body1">
+        Fritz development is funded by the Moore Foundation, Heising Simons
+        Foundation, National Science Foundation, NASA and the Packard
+        Foundation.
+      </Typography>
       {gitlog && (
         <>
-          <h2>Recent Changelog</h2>
+          <Typography variant="h5">Recent Changelog</Typography>
           <Paper mt={1} className={classes.gitlogPaper}>
             <Box p={1}>
               <div>
@@ -170,7 +314,7 @@ const About = () => {
           </Paper>
         </>
       )}
-      <h2>Cosmology</h2>
+      <Typography variant="h5">Cosmology</Typography>
       <span>
         The cosmology currently used here is an instance of{" "}
         <code>astropy.cosmology</code> with the parameters (see{" "}
@@ -187,7 +331,7 @@ const About = () => {
           </>
         )}
       </span>
-    </Box>
+    </Paper>
   );
 };