Pulling feat/genomepage-empty-display into develop

apps/genome-page/components/Loader.tsx

@@ -1,16 +1,31 @@
 import { makeBy as AmakeBy } from "fp-ts/Array"
 import { Skeleton } from "@material-ui/lab"
 import Box from "@material-ui/core/Box"
+import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import { blue } from "@material-ui/core/colors"
+
+const useStyles = makeStyles({
+  container: {
+    backgroundColor: blue[50],
+    padding: "1rem",
+  },
+})
 
 /**
  * Loader is the default loading skeleton component.
  */
-const Loader = () => (
-  <Box mt="10px" data-testid="skeleton-loader">
-    {AmakeBy(12, (key) => (
-      <Skeleton height={50} key={key} animation="wave" />
-    ))}
-  </Box>
-)
+const Loader = () => {
+  const classes = useStyles()
+  return (
+    <Paper className={classes.container}>
+      <Box data-testid="skeleton-loader">
+        {AmakeBy(12, (key) => (
+          <Skeleton height={50} key={key} animation="wave" />
+        ))}
+      </Box>
+    </Paper>
+  )
+}
 
 export { Loader }

apps/genome-page/components/NoDataDisplay.tsx

@@ -0,0 +1,47 @@
+import Paper from "@material-ui/core/Paper"
+import Typography from "@material-ui/core/Typography"
+import Grid from "@material-ui/core/Grid"
+import RemoveCircleOutlineIcon from "@material-ui/icons/RemoveCircleOutline"
+import { makeStyles } from "@material-ui/core/styles"
+import { blue, grey } from "@material-ui/core/colors"
+
+const useStyles = makeStyles({
+  container: {
+    backgroundColor: blue[50],
+    color: grey[600],
+  },
+  grid: {
+    minHeight: "10rem",
+  },
+  icon: {
+    fontSize: "4rem",
+  },
+})
+
+type NoDataDisplayProperties = {
+  query: string
+  geneId: string
+}
+
+const NoDataDisplay = ({ query, geneId }: NoDataDisplayProperties) => {
+  const classes = useStyles()
+  return (
+    <Paper className={classes.container}>
+      <Grid
+        className={classes.grid}
+        container
+        direction="column"
+        justifyContent="center"
+        alignItems="center">
+        <Grid item>
+          <RemoveCircleOutlineIcon className={classes.icon} />
+        </Grid>
+        <Grid item>
+          <Typography variant="h2">{`No ${query} for ${geneId}`}</Typography>
+        </Grid>
+      </Grid>
+    </Paper>
+  )
+}
+
+export { NoDataDisplay }

apps/genome-page/components/errors/GraphQLErrorPage.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable unicorn/filename-case */
+import { ApolloError } from "@apollo/client"
+import { pipe } from "fp-ts/function"
+import { head as RAhead } from "fp-ts/ReadonlyArray"
+import {
+  map as Omap,
+  flatMap as OflatMap,
+  fromNullable as OfromNullable,
+  getOrElse as OgetOrElse,
+} from "fp-ts/Option"
+import { match, P } from "ts-pattern"
+import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import { blue, grey } from "@material-ui/core/colors"
+import { ServerError } from "./ServerError"
+import { NotFoundError } from "./NotFoundError"
+import { OtherError } from "./OtherError"
+
+const useStyles = makeStyles({
+  container: {
+    backgroundColor: blue[50],
+    color: grey[600],
+  },
+  grid: {
+    minHeight: "10rem",
+  },
+  icon: {
+    fontSize: "4rem",
+  },
+})
+
+type GraphQlErrorPageProperties = {
+  /** GraphQL error object */
+  error: ApolloError
+}
+
+/**
+ * Displays any errors found when issuing a GraphQL query or mutation.
+ * Returns one of the other error components based on the error code.
+ */
+
+const GraphQLErrorPage = ({ error }: GraphQlErrorPageProperties) => {
+  const classes = useStyles()
+
+  return (
+    <Paper className={classes.container}>
+      {match(error)
+        .with({ networkError: P.not(P.nullish) }, () => <ServerError />)
+        .with({ graphQLErrors: P.select(P.not(P.nullish)) }, (errors) => {
+          const primaryError = pipe(errors, RAhead)
+          const primaryErrorCode = pipe(
+            primaryError,
+            OflatMap(({ extensions }) =>
+              pipe(
+                extensions,
+                OfromNullable,
+                // eslint-disable-next-line dot-notation
+                Omap((extension) => extension["code"] as string),
+              ),
+            ),
+            OgetOrElse(() => ""),
+          )
+          const primaryErrorMessage = pipe(
+            primaryError,
+            Omap(({ message }) => message),
+            OgetOrElse(() => ""),
+          )
+          return match(primaryErrorCode)
+            .with("Unavailable", () => <ServerError />)
+            .with("NotFound", () => (
+              <NotFoundError error={primaryErrorMessage} />
+            ))
+            .otherwise(() => <OtherError />)
+        })
+        .otherwise(() => (
+          <OtherError />
+        ))}
+    </Paper>
+  )
+}
+
+export { GraphQLErrorPage }

apps/genome-page/components/errors/NotFoundError.tsx

@@ -17,11 +17,11 @@ const NotFoundError = ({ error }: Properties) => {
   const classes = useStyles()
 
   return (
-    <Grid container className={classes.mainGrid} justifyContent="center">
+    <Grid container justifyContent="center">
       <Grid item xs={10} md={8}>
         <div className={classes.error400}>
           <Image
-            src="/sad-dicty.png"
+            src="https://storage.dictybase.dev/editor/assets/2024-11-04/0627257c-9ce3-4f02-b000-9e16ef5b1062"
             alt="Sad Dicty Logo"
             width="350px"
             height="200%"

apps/genome-page/components/errors/OtherError.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import Grid from "@material-ui/core/Grid"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import Typography from "@material-ui/core/Typography"
 import Image from "next/image"
 import { ErrorMessage } from "./ErrorMessage"
 import { useStyles } from "../../styles/errorStyles"
@@ -13,18 +13,16 @@ const OtherError = () => {
   const classes = useStyles()
 
   return (
-    <Grid container className={classes.mainGrid} justifyContent="center">
+    <Grid container justifyContent="center">
       <Grid item xs={10} md={8}>
         <div className={classes.error400}>
           <Image
-            src="/sad-dicty.png"
+            src="https://storage.dictybase.dev/editor/assets/2024-11-04/0627257c-9ce3-4f02-b000-9e16ef5b1062"
             alt="Sad Dicty Logo"
             width="350px"
             height="200%"
           />
-          <h1>
-            <FontAwesomeIcon icon="exclamation-circle" /> Error
-          </h1>
+          <Typography variant="h2"> Sorry, something went wrong. </Typography>
           <ErrorMessage />
         </div>
       </Grid>

apps/genome-page/components/errors/ServerError.tsx

@@ -11,7 +11,7 @@ const ServerError = () => {
   const classes = useStyles()
 
   return (
-    <Grid container className={classes.mainGrid} justifyContent="center">
+    <Grid container justifyContent="center">
       <Grid item xs={10} md={8}>
         <div className={classes.error500}>
           <h2>Sorry! There was a server error.</h2>

apps/genome-page/components/features/Ontology/OntologyContainer.tsx

@@ -1,7 +1,5 @@
 import Typography from "@material-ui/core/Typography"
-import { Layout } from "components/layout/Layout"
 import { GeneOntologyAnnotationQuery } from "dicty-graphql-schema"
-import { useRouter } from "next/router"
 import { OntologyTabLayout } from "./OntologyTabLayout"
 /**
  * Container component that issues a GraphQL query to get gene data for the
@@ -11,20 +9,10 @@ import { OntologyTabLayout } from "./OntologyTabLayout"
 interface OntologyContainerProperties {
   goas: NonNullable<GeneOntologyAnnotationQuery["geneOntologyAnnotation"]>
 }
-const OntologyContainer = ({ goas }: OntologyContainerProperties) => {
-  const { query } = useRouter()
-  const geneId = query.id as string
-
-  return (
-    <Layout
-      gene={geneId}
-      title={`GO Annotations for ${geneId}`}
-      description={`Gene Ontology Annotations for ${geneId}`}>
-      <Typography component="div">
-        <OntologyTabLayout goas={goas} />{" "}
-      </Typography>
-    </Layout>
-  )
-}
+const OntologyContainer = ({ goas }: OntologyContainerProperties) => (
+  <Typography component="div">
+    <OntologyTabLayout goas={goas} />
+  </Typography>
+)
 
 export { OntologyContainer }

apps/genome-page/components/features/Phenotypes/PhenotypesContainer.tsx

@@ -1,26 +1,14 @@
 import Typography from "@material-ui/core/Typography"
-import { Layout } from "components/layout/Layout"
 import { ListStrainsWithGeneQuery } from "dicty-graphql-schema"
-import { useRouter } from "next/router"
 import { PhenotypesDataTable } from "./PhenotypesDataTable"
 
 interface PhenotypesContainerProperties {
   strains: NonNullable<ListStrainsWithGeneQuery["listStrainsWithGene"]>
 }
-const PhenotypesContainer = ({ strains }: PhenotypesContainerProperties) => {
-  const { query } = useRouter()
-  const geneId = query.id as string
-
-  return (
-    <Layout
-      gene={geneId}
-      title={`Phenotypes for ${geneId}`}
-      description={`Gene phenotypes for ${geneId}`}>
-      <Typography component="div">
-        <PhenotypesDataTable strains={strains} />
-      </Typography>
-    </Layout>
-  )
-}
+const PhenotypesContainer = ({ strains }: PhenotypesContainerProperties) => (
+  <Typography component="div">
+    <PhenotypesDataTable strains={strains} />
+  </Typography>
+)
 
 export { PhenotypesContainer }