Pulling feat/publication-redesign into develop

apps/dicty-frontpage/package.json

@@ -24,6 +24,8 @@
     "@dictybase/editor": "*",
     "@dictybase/google-analytics": "*",
     "@dictybase/ui-frontpage": "*",
+    "@fontsource-variable/inter-tight": "^5.1.0",
+    "@fontsource-variable/playfair-display": "^5.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.0",

apps/dicty-frontpage/src/app/layout/App.tsx

@@ -2,6 +2,8 @@ import { LogtoProvider, LogtoConfig, UserScope } from "@logto/react"
 import { CssBaseline } from "@material-ui/core"
 import { AppProviders } from "./AppProviders"
 import { FrontPageApp } from "./FrontPageApp"
+import "@fontsource-variable/playfair-display"
+import "@fontsource-variable/inter-tight"
 
 const logtoConfig: LogtoConfig = {
   endpoint: import.meta.env.VITE_LOGTO_ENDPOINT,

apps/dicty-frontpage/src/features/Frontpage/Slideshow.test.tsx

@@ -9,7 +9,7 @@ describe("feature/Frontpage/Slideshow", () => {
     expect(screen.getAllByAltText("D. discoideum slug")[0]).toBeInTheDocument()
     expect(
       screen.getAllByAltText(
-        "Triple stained and fixed Dictyostelium cells: apha-tubulin (green), centrosome (red, appears yellow due to colocalization with tubulin), nuclei (blue)",
+        "Triple stained and fixed Dictyostelium cells: alpha-tubulin (green), centrosome (red, appears yellow due to colocalization with tubulin), nuclei (blue)",
       )[0],
     ).toBeInTheDocument()
   })

apps/dicty-frontpage/src/features/Frontpage/Slideshow.tsx

@@ -51,7 +51,7 @@ const imageData = [
   {
     src: tubulin,
     title:
-      "Triple stained and fixed Dictyostelium cells: apha-tubulin (green), centrosome (red, appears yellow due to colocalization with tubulin), nuclei (blue)",
+      "Triple stained and fixed Dictyostelium cells: alpha-tubulin (green), centrosome (red, appears yellow due to colocalization with tubulin), nuclei (blue)",
     description: "Courtesy of Ralph Gräf, Potsdam University",
   },
 ]

apps/dicty-frontpage/src/features/Publication/SinglePublication.tsx

@@ -12,8 +12,9 @@ import { pipe } from "fp-ts/function"
 import { map as Amap } from "fp-ts/Array"
 import { parseISO, format } from "date-fns/fp"
 import { grey, blueGrey, lightBlue } from "@material-ui/core/colors"
+import { shortenAllNames } from "@dictybase/ui-common"
 import { type PublicationItem } from "../../common/hooks/useFetchPublications"
-import { formatTitle, shortenAllNames } from "../../common/utils/citation"
+import { formatTitle } from "../../common/utils/citation"
 
 const useStyles = makeStyles((theme) => ({
   leadText: {
@@ -42,7 +43,7 @@ const useStyles = makeStyles((theme) => ({
   title: {
     fontWeight: 600,
     fontSize: "24px",
-    fontFamily: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+    fontFamily: "'Playfair Display Variable', serif",
   },
   publication: {
     color: grey[700],
@@ -63,12 +64,11 @@ const useStyles = makeStyles((theme) => ({
   abstractHeading: {
     fontWeight: 600,
     fontSize: "20px",
-    fontFamily: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+    fontFamily: "'Playfair Display Variable', serif",
   },
   abstract: {
     fontSize: "16px",
-    fontFamily:
-      "ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    fontFamily: "'Inter Tight Variable', sans-serif",
     marginBottom: theme.spacing(2),
     color: blueGrey[900],
   },

apps/genome-page/pages/[id]/goannotations.tsx

@@ -16,6 +16,7 @@ const OntologyPageWrapper = () => {
       gene,
     },
     fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-only",
   })
 
   return match(result)

apps/genome-page/pages/[id]/index.tsx

@@ -16,6 +16,7 @@ const GenomePageWrapper = () => {
       gene,
     },
     fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-only",
   })
   return match(result)
     .with(

apps/genome-page/pages/[id]/phenotypes.tsx

@@ -14,6 +14,8 @@ const PhenotypesPageWrapper = () => {
     variables: {
       gene,
     },
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-only",
   })
 
   return match(result)

apps/genome-page/pages/[id]/references.tsx

@@ -15,6 +15,8 @@ const ReferencesPageWrapper = () => {
     variables: {
       gene,
     },
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-only",
   })
   return match(result)
     .with(

apps/publication/package.json

@@ -24,6 +24,8 @@
     "@dictybase/google-analytics": "*",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fontsource-variable/inter-tight": "^5.1.0",
+    "@fontsource-variable/playfair-display": "^5.1.0",
     "@material-ui/icons": "^4.11.3",
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.19",

apps/publication/src/components/JournalData.tsx

@@ -20,7 +20,6 @@ interface JournalDataProperties {
 /**
  * JournalData displays general data related to the publication.
  */
-
 const JournalData = ({ data }: JournalDataProperties) => {
   const { id, doi, pub_date, journal, pages, issue, volume } = data
 

apps/publication/src/components/PublicationPage.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Grid from "@material-ui/core/Grid"
+import { Grid, Container } from "@material-ui/core"
 import { Publication } from "dicty-graphql-schema"
 import Head from "next/head"
 import { PublicationSidebar } from "./PublicationSidebar"
@@ -16,25 +16,27 @@ const PublicationPage = ({ publication }: PublicationPageProperties) => {
   const { title, doi } = publication
 
   return (
-    <Grid container>
-      <Head>
-        <title>dictyBase Literature - {title}</title>
-        <meta
-          name="description"
-          content={`dictyBase literature page for title ${title}`}
-        />
-      </Head>
+    <Container>
+      <Grid container>
+        <Head>
+          <title>dictyBase Literature - {title}</title>
+          <meta
+            name="description"
+            content={`dictyBase literature page for title ${title}`}
+          />
+        </Head>
 
-      <Grid item xs={12}>
-        <PublicationHeader />
+        <Grid item xs={12}>
+          <PublicationHeader />
+        </Grid>
+        <Grid item xs={12} sm={2} className={classes.sidebar}>
+          <PublicationSidebar doi={doi} />
+        </Grid>
+        <Grid item xs={12} sm={10}>
+          <PublicationBody publication={publication} />
+        </Grid>
       </Grid>
-      <Grid item xs={12} sm={2} className={classes.sidebar}>
-        <PublicationSidebar doi={doi} />
-      </Grid>
-      <Grid item xs={12} sm={10}>
-        <PublicationBody publication={publication} />
-      </Grid>
-    </Grid>
+    </Container>
   )
 }
 

apps/publication/src/components/layout/App.tsx

@@ -1,16 +1,13 @@
 import React from "react"
 import { makeStyles, Theme } from "@material-ui/core/styles"
-import Container from "@material-ui/core/Container"
 import { HeaderWithAuth, NavbarWithAuth, FooterWithAuth } from "@dictybase/auth"
 import ErrorBoundary from "../errors/ErrorBoundary"
 import { navTheme } from "../../common/utils/themes"
 import { useGoogleAnalytics } from "../../common/hooks/useGoogleAnalytics"
+import "@fontsource-variable/playfair-display"
+import "@fontsource-variable/inter-tight"
 
 const useStyles = makeStyles((theme: Theme) => ({
-  main: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(4),
-  },
   body: {
     fontSize: "16px",
     color: "#333",
@@ -44,10 +41,8 @@ const App = ({ children }: { children: React.ReactNode }) => {
         stockCenterUrl={process.env.NEXT_PUBLIC_STOCKCENTER_URL}
         theme={navTheme}
       />
-      <main className={classes.main}>
-        <Container>
-          <ErrorBoundary>{children}</ErrorBoundary>
-        </Container>
+      <main>
+        <ErrorBoundary>{children}</ErrorBoundary>
       </main>
       <FooterWithAuth
         frontPageUrl={process.env.NEXT_PUBLIC_FRONTPAGE_URL}

apps/publication/src/components/version_a/Abstract.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { Box, Typography, Divider, makeStyles } from "@material-ui/core"
+import { pipe } from "fp-ts/function"
+import { isEmpty as SisEmpty } from "fp-ts/string"
+import { match as Bmatch } from "fp-ts/boolean"
+import { parseFormattedStringToDomElements } from "@dictybase/ui-common"
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    fontFamily: "'Playfair Display Variable', serif",
+    marginBottom: theme.spacing(0.5),
+  },
+  body: {
+    lineHeight: 1.5,
+    fontFamily: "'Inter Tight Variable', sans-serif",
+  },
+}))
+
+type Properties = {
+  abstract: string
+}
+
+/**
+ * Displays the abstract of the publication.
+ */
+const Abstract = ({ abstract }: Properties) => {
+  const classes = useStyles()
+  return pipe(
+    abstract,
+    SisEmpty,
+    Bmatch(
+      () =>
+        pipe(
+          <>
+            <Typography variant="h2" className={classes.title}>
+              Abstract
+            </Typography>
+            <Divider />
+            <Box pt={2} className={classes.body}>
+              {parseFormattedStringToDomElements(abstract)}
+            </Box>
+          </>,
+        ),
+      () => <></>,
+    ),
+    (inner) => <Box pt={2}>{inner}</Box>,
+  )
+}
+
+export { Abstract }

apps/publication/src/components/version_a/Authors.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import { makeStyles, Grid, Chip, Box } from "@material-ui/core"
+import { blueGrey, lightBlue } from "@material-ui/core/colors"
+import { pipe } from "fp-ts/function"
+import { map as Amap, compact as Acompact } from "fp-ts/Array"
+import { fromNullable as OfromNullable } from "fp-ts/Option"
+import { Author, Maybe } from "dicty-graphql-schema"
+
+interface AuthorsProperties {
+  authors: Maybe<Author>[]
+}
+
+const useStyles = makeStyles({
+  chip: {
+    color: blueGrey[800],
+    border: `1px solid ${blueGrey[100]}`,
+    backgroundColor: lightBlue[50],
+  },
+})
+/**
+ * Authors displays an inline list of the authors of the publication.
+ */
+const Authors = ({ authors }: AuthorsProperties) => {
+  const classes = useStyles()
+  return (
+    <Box mb={1}>
+      <Grid container spacing={1}>
+        {pipe(
+          authors,
+          Amap(OfromNullable),
+          Acompact,
+          Amap(({ initials, last_name }) => (
+            <Grid item>
+              <Chip
+                size="medium"
+                label={`${initials} ${last_name}`}
+                className={classes.chip}
+              />
+            </Grid>
+          )),
+        )}
+      </Grid>
+    </Box>
+  )
+}
+
+export { Authors }

apps/publication/src/components/version_a/JournalData.tsx

@@ -0,0 +1,84 @@
+import React from "react"
+import Box from "@material-ui/core/Box"
+import Typography from "@material-ui/core/Typography"
+import { pipe } from "fp-ts/function"
+import { isEmpty as SisEmpty } from "fp-ts/string"
+import {
+  fromNullable as OfromNullable,
+  getOrElse as OgetOrElse,
+} from "fp-ts/Option"
+import { match as Bmatch } from "fp-ts/boolean"
+import { makeStyles, Theme } from "@material-ui/core/styles"
+import { addDays, format, parseISO } from "date-fns"
+import { Publication } from "dicty-graphql-schema"
+import { JournalDataItem } from "./JournalDataItem"
+
+const formatIssue = (issue: string | null | undefined) =>
+  pipe(
+    issue,
+    OfromNullable,
+    OgetOrElse(() => ""),
+    SisEmpty,
+    Bmatch(
+      () => `(${issue})`,
+      () => "",
+    ),
+  )
+
+const useStyles = makeStyles((theme: Theme) => ({
+  text: {
+    fontFamily: "'Inter Tight Variable', sans-serif",
+  },
+  journal: {
+    fontWeight: 600,
+    fontStyle: "italic",
+    paddingRight: theme.spacing(0.5),
+    fontFamily: "'Inter Tight Variable', sans-serif",
+  },
+}))
+
+interface JournalDataProperties {
+  data: Publication
+}
+
+/**
+ * JournalData displays general data related to the publication.
+ */
+
+const JournalData = ({ data }: JournalDataProperties) => {
+  const { id, doi, pub_date, journal, pages, issue, volume } = data
+  const classes = useStyles()
+  const formattedIssue = formatIssue(issue)
+  const pubmedURL = `https://pubmed.gov/${id}`
+  const doiURL = `https://doi.org/${doi}`
+  // convert ISO 8601 string to Date format
+  // otherwise the 00:00:00.000Z causes it to return the previous day
+  const day = addDays(parseISO(pub_date), 1)
+  // convert Date to desired display format
+  const date = format(day, "PPP")
+  return (
+    <Box mt={2}>
+      <Box pb={1}>
+        <Typography variant="h3" component="span" className={classes.text}>
+          {`Published on `}
+        </Typography>
+        <Typography variant="h3" component="span" className={classes.text}>
+          {`${date} in `}
+        </Typography>
+        <Typography variant="h3" component="span" className={classes.journal}>
+          {journal},
+        </Typography>
+        <Typography variant="h3" component="span" className={classes.text}>
+          <i>{volume}</i>
+          {`${formattedIssue}, ${pages}`}
+        </Typography>
+      </Box>
+      <Box>
+        <JournalDataItem title="DOI" url={doiURL} content={doi} />
+        <JournalDataItem title="PMID" url={pubmedURL} content={id} />
+      </Box>
+    </Box>
+  )
+}
+
+export { JournalData }