From 79bb9408e411a942f24e52ab3bd013ccf7334571 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 16:56:34 -0600 Subject: [PATCH 01/34] style(errorStyles.tsx): remove unused backgroundColor property in error400 class The backgroundColor property was removed from the error400 class in order to clean up the code and remove any unused or unnecessary styling properties. --- apps/genome-page/styles/errorStyles.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/genome-page/styles/errorStyles.tsx b/apps/genome-page/styles/errorStyles.tsx index 95aa6e0a36..fd95e6d370 100644 --- a/apps/genome-page/styles/errorStyles.tsx +++ b/apps/genome-page/styles/errorStyles.tsx @@ -2,7 +2,6 @@ import { makeStyles } from "@material-ui/core/styles" const useStyles = makeStyles({ error400: { - backgroundColor: "#eff8fb", textAlign: "center", paddingTop: 30, paddingBottom: 30, From 941b7269a08eaebd2ec8a4878221532d54c311a2 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 19:10:49 -0600 Subject: [PATCH 02/34] style(NotFoundError.tsx): add Paper component import for better styling consistency The Paper component import was added to improve the styling consistency within the NotFoundError component. issue #965 --- apps/genome-page/components/errors/NotFoundError.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/genome-page/components/errors/NotFoundError.tsx b/apps/genome-page/components/errors/NotFoundError.tsx index e46f8eb7fc..df8f7f3d5c 100644 --- a/apps/genome-page/components/errors/NotFoundError.tsx +++ b/apps/genome-page/components/errors/NotFoundError.tsx @@ -1,5 +1,6 @@ import React from "react" import Grid from "@material-ui/core/Grid" +import Paper from "@material-ui/core/Paper" import Image from "next/image" import { ErrorMessage } from "./ErrorMessage" import { useStyles } from "../../styles/errorStyles" @@ -18,10 +19,11 @@ const NotFoundError = ({ error }: Properties) => { return ( +
Sad Dicty Logo Date: Mon, 3 Feb 2025 19:11:46 -0600 Subject: [PATCH 03/34] style(NotFoundError.tsx): remove unnecessary className from Grid container The className attribute was removed from the Grid container to clean up the code and remove unnecessary styling that was not being used. issue #965 --- apps/genome-page/components/errors/NotFoundError.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/genome-page/components/errors/NotFoundError.tsx b/apps/genome-page/components/errors/NotFoundError.tsx index df8f7f3d5c..227679756a 100644 --- a/apps/genome-page/components/errors/NotFoundError.tsx +++ b/apps/genome-page/components/errors/NotFoundError.tsx @@ -18,7 +18,6 @@ const NotFoundError = ({ error }: Properties) => { const classes = useStyles() return ( -
From a2180e2f34d5889b35d30a53b5f7746bf50db90f Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 19:12:09 -0600 Subject: [PATCH 04/34] feat(GraphQLErrorPage.tsx): add a new component GraphQLErrorPage to handle and display GraphQL errors The new GraphQLErrorPage component is added to handle and display errors that occur when issuing a GraphQL query or mutation. It includes logic to differentiate between different types of errors and display the appropriate error component based on the error code. This enhances the user experience by providing clear and specific error messages for different scenarios. issue #965 --- .../components/errors/GraphQLErrorPage.tsx | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 apps/genome-page/components/errors/GraphQLErrorPage.tsx diff --git a/apps/genome-page/components/errors/GraphQLErrorPage.tsx b/apps/genome-page/components/errors/GraphQLErrorPage.tsx new file mode 100644 index 0000000000..f85a034585 --- /dev/null +++ b/apps/genome-page/components/errors/GraphQLErrorPage.tsx @@ -0,0 +1,80 @@ +/* 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 { ServerError } from "./ServerError" +import { NotFoundError } from "./NotFoundError" +import { OtherError } from "./OtherError" +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 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 ( + + {match(error) + .with({ networkError: P.not(P.nullish) }, () => ) + .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", () => ) + .with("NotFound", () => ) + .otherwise(() => ) + }) + .otherwise(() => ( + + ))} + + ) +} + +export { GraphQLErrorPage } From bf4caedda25c68e7001e3522ab4f4a92224f4707 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 19:12:53 -0600 Subject: [PATCH 05/34] feat(NoDataDisplay.tsx): add NoDataDisplay component to genome-page for displaying a message when no data is available The NoDataDisplay component is added to the genome-page components directory. This component is designed to display a message when there is no data available for a specific query and gene ID combination. It includes styling using Material-UI components for a visually appealing display. issue #965 --- apps/genome-page/components/NoDataDisplay.tsx | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 apps/genome-page/components/NoDataDisplay.tsx diff --git a/apps/genome-page/components/NoDataDisplay.tsx b/apps/genome-page/components/NoDataDisplay.tsx new file mode 100644 index 0000000000..cf5b9d34a9 --- /dev/null +++ b/apps/genome-page/components/NoDataDisplay.tsx @@ -0,0 +1,48 @@ +import Paper from "@material-ui/core/Paper" +import Typography from "@material-ui/core/Typography" +import Grid from "@material-ui/core/Grid" +import SentimentDissatisfiedIcon from "@material-ui/icons/SentimentDissatisfied" +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 ( + + + + + + + {`No ${query} data for ${geneId}`} + + + + ) +} + +export { NoDataDisplay } From 3e738e2ba3efce5bb9c255aa99488220cf3bb1aa Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 19:14:08 -0600 Subject: [PATCH 06/34] refactor(PhenotypesContainer.tsx): remove unnecessary Layout component and useRouter hook The Layout component and the useRouter hook were removed from the PhenotypesContainer component as they were not being used. This cleanup simplifies the code and improves readability by eliminating unnecessary code. issue #965 --- .../Phenotypes/PhenotypesContainer.tsx | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/apps/genome-page/components/features/Phenotypes/PhenotypesContainer.tsx b/apps/genome-page/components/features/Phenotypes/PhenotypesContainer.tsx index a80558d34a..e31999ab3a 100644 --- a/apps/genome-page/components/features/Phenotypes/PhenotypesContainer.tsx +++ b/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 } -const PhenotypesContainer = ({ strains }: PhenotypesContainerProperties) => { - const { query } = useRouter() - const geneId = query.id as string - - return ( - - - - - - ) -} +const PhenotypesContainer = ({ strains }: PhenotypesContainerProperties) => ( + + + +) export { PhenotypesContainer } From e33c7a4b44c45875cc44d24c76ea38b84b7092c8 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 19:14:39 -0600 Subject: [PATCH 07/34] fix(phenotypes.tsx): fix import path for GraphQLErrorPage component The import path for the GraphQLErrorPage component has been updated to point to the correct location in the project structure, ensuring that the component is imported and used correctly in the file. issue #965 --- apps/genome-page/pages/[id]/phenotypes.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/genome-page/pages/[id]/phenotypes.tsx b/apps/genome-page/pages/[id]/phenotypes.tsx index 550ec3f5fb..c755e0dcaa 100644 --- a/apps/genome-page/pages/[id]/phenotypes.tsx +++ b/apps/genome-page/pages/[id]/phenotypes.tsx @@ -1,6 +1,6 @@ import { PhenotypesContainer } from "components/features/Phenotypes/PhenotypesContainer" import { PhenotypesLoader } from "components/features/Phenotypes/PhenotypesLoader" -import { GraphQLErrorPage } from "@dictybase/ui-common" +import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" import { useListStrainsWithGeneQuery } from "dicty-graphql-schema" import { useRouter } from "next/router" import { match, P } from "ts-pattern" From 7aa296857168c2c4ee033d61b86c1bef72a0f748 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 19:15:10 -0600 Subject: [PATCH 08/34] feat(phenotypes.tsx): add Layout component to wrap PhenotypesPage content for consistent styling and structure The Layout component is added to wrap the content of the PhenotypesPage, providing a consistent layout and styling across different pages. This change improves the overall user experience by maintaining a cohesive design throughout the application. issue #965 --- apps/genome-page/pages/[id]/phenotypes.tsx | 38 ++++++++++++++-------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/apps/genome-page/pages/[id]/phenotypes.tsx b/apps/genome-page/pages/[id]/phenotypes.tsx index c755e0dcaa..5165f7ad5b 100644 --- a/apps/genome-page/pages/[id]/phenotypes.tsx +++ b/apps/genome-page/pages/[id]/phenotypes.tsx @@ -1,5 +1,6 @@ import { PhenotypesContainer } from "components/features/Phenotypes/PhenotypesContainer" import { PhenotypesLoader } from "components/features/Phenotypes/PhenotypesLoader" +import { Layout } from "components/layout/Layout" import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" import { useListStrainsWithGeneQuery } from "dicty-graphql-schema" import { useRouter } from "next/router" @@ -18,20 +19,29 @@ const PhenotypesPageWrapper = () => { nextFetchPolicy: "cache-only", }) - return match(result) - .with( - { - data: { - listStrainsWithGene: P.select(P.array({ id: P.string })), - }, - }, - (strains) => , - ) - .with({ loading: true }, () => ) - .with({ error: P.select(P.not(undefined)) }, (error) => ( - - )) - .otherwise(() => <> This message should not appear. ) + return ( + + {match(result) + .with( + { + data: { + listStrainsWithGene: P.select(P.array({ id: P.string })), + }, + }, + (strains) => , + ) + .with({ loading: true }, () => ) + .with({ error: P.select(P.not(undefined)) }, (error) => ( + + )) + .otherwise(() => ( + <> This message should not appear. + ))} + + ) } // eslint-disable-next-line import/no-default-export From e1d36ca04fd1f236b5e4a4eee505da4d81142081 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 19:15:32 -0600 Subject: [PATCH 09/34] feat(references.tsx): add Layout and NoDataDisplay components for improved UI The changes introduce the Layout and NoDataDisplay components to enhance the user interface of the ReferencesPageWrapper. The Layout component provides a structured layout for displaying gene references, while the NoDataDisplay component handles cases where no data is available for the specified gene. issue #965 --- apps/genome-page/pages/[id]/references.tsx | 51 +++++++++++++++------- 1 file changed, 35 insertions(+), 16 deletions(-) diff --git a/apps/genome-page/pages/[id]/references.tsx b/apps/genome-page/pages/[id]/references.tsx index f35e9e449e..3bf16168af 100644 --- a/apps/genome-page/pages/[id]/references.tsx +++ b/apps/genome-page/pages/[id]/references.tsx @@ -1,5 +1,7 @@ import { ReferencesContainer } from "components/features/References/ReferencesContainer" import { GraphQLErrorPage } from "@dictybase/ui-common" +import { Layout } from "components/layout/Layout" +import { NoDataDisplay } from "components/NoDataDisplay" import { ReferencesLoader } from "components/features/References/ReferencesLoader" import { useRouter } from "next/router" import { useListPublicationsWithGeneQuery } from "dicty-graphql-schema" @@ -10,28 +12,45 @@ import { match, P } from "ts-pattern" */ const ReferencesPageWrapper = () => { const { query } = useRouter() - const gene = query.id as string + const geneId = query.id as string const result = useListPublicationsWithGeneQuery({ variables: { - gene, + gene: geneId, }, fetchPolicy: "cache-and-network", nextFetchPolicy: "cache-only", }) - return match(result) - .with( - { - data: { - listPublicationsWithGene: P.select(P.array({ id: P.string })), - }, - }, - (publications) => , - ) - .with({ loading: true }, () => ) - .with({ error: P.select(P.not(undefined)) }, (error) => ( - - )) - .otherwise(() => <> This message should not appear. ) + return ( + + {match(result) + .with( + { + data: { + listPublicationsWithGene: [], + }, + }, + () => , + ) + .with( + { + data: { + listPublicationsWithGene: P.select(P.array({ id: P.string })), + }, + }, + (publications) => , + ) + .with({ loading: true }, () => ) + .with({ error: P.select(P.not(undefined)) }, (error) => ( + + )) + .otherwise(() => ( + <> This message should not appear. + ))} + + ) } // eslint-disable-next-line import/no-default-export From 0b6f9fec20472a5d58f3035d865fa54e86f81324 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 19:50:17 -0600 Subject: [PATCH 10/34] feat(phenotypes.tsx): add NoDataDisplay component to show a message when there are no phenotypes available for a gene The NoDataDisplay component is added to the PhenotypesPageWrapper to display a message when the list of strains with gene phenotypes is empty. This improves user experience by providing clear feedback when there is no data available for the selected gene. issue #965 --- apps/genome-page/pages/[id]/phenotypes.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/genome-page/pages/[id]/phenotypes.tsx b/apps/genome-page/pages/[id]/phenotypes.tsx index 5165f7ad5b..ba4a2e1002 100644 --- a/apps/genome-page/pages/[id]/phenotypes.tsx +++ b/apps/genome-page/pages/[id]/phenotypes.tsx @@ -1,6 +1,7 @@ import { PhenotypesContainer } from "components/features/Phenotypes/PhenotypesContainer" import { PhenotypesLoader } from "components/features/Phenotypes/PhenotypesLoader" import { Layout } from "components/layout/Layout" +import { NoDataDisplay } from "components/NoDataDisplay" import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" import { useListStrainsWithGeneQuery } from "dicty-graphql-schema" import { useRouter } from "next/router" @@ -25,6 +26,14 @@ const PhenotypesPageWrapper = () => { title={`Phenotypes for ${gene}`} description={`Gene phenotypes for ${gene}`}> {match(result) + .with( + { + data: { + listStrainsWithGene: P.union([], P.array({ phenotypes: []})), + }, + }, + () => , + ) .with( { data: { From 532c247050501b989ac319f2251b1a9bdc82b822 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 20:07:24 -0600 Subject: [PATCH 11/34] style(ServerError.tsx): remove unnecessary className from Grid component The className attribute was removed from the Grid component to simplify the code and remove unnecessary styling that was not being used. issue #965 --- apps/genome-page/components/errors/ServerError.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/genome-page/components/errors/ServerError.tsx b/apps/genome-page/components/errors/ServerError.tsx index 82fa361a97..04f6b75c0d 100644 --- a/apps/genome-page/components/errors/ServerError.tsx +++ b/apps/genome-page/components/errors/ServerError.tsx @@ -11,7 +11,7 @@ const ServerError = () => { const classes = useStyles() return ( - +

Sorry! There was a server error.

From 2f6ba19c12501de5d118f98053341c5d6ced9300 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 20:14:20 -0600 Subject: [PATCH 12/34] style(errorStyles.tsx): adjust margin styles for better spacing and alignment The margin styles have been adjusted to improve the spacing and alignment of elements within the errorStyles component. The marginBottom property was replaced with marginTop and marginBottom to provide consistent spacing at the top and bottom of the component. issue #965 --- apps/genome-page/styles/errorStyles.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/genome-page/styles/errorStyles.tsx b/apps/genome-page/styles/errorStyles.tsx index fd95e6d370..0b29ee1f04 100644 --- a/apps/genome-page/styles/errorStyles.tsx +++ b/apps/genome-page/styles/errorStyles.tsx @@ -13,8 +13,9 @@ const useStyles = makeStyles({ textAlign: "center", paddingTop: 40, paddingBottom: 40, - marginBottom: 30, borderRadius: 5, + marginTop: "3rem", + marginBottom: "3rem", color: "#e3e3e3", }, link500: { From 035549907e772dff77da1b6bb314b5d3a78e8499 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 20:17:59 -0600 Subject: [PATCH 13/34] style(OtherError.tsx): replace FontAwesomeIcon with Typography for consistent styling The FontAwesomeIcon component is replaced with Typography to maintain consistent styling across the application. This change ensures a unified design language and improves the overall visual coherence of the error component. issue #965 --- apps/genome-page/components/errors/OtherError.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/genome-page/components/errors/OtherError.tsx b/apps/genome-page/components/errors/OtherError.tsx index e4b34e7e48..11012391b0 100644 --- a/apps/genome-page/components/errors/OtherError.tsx +++ b/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 ( - +
Sad Dicty Logo -

- Error -

+ Sorry, something went wrong.
From cdb2d510a488be5a28060e2d17e97b891a57fb0a Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 20:36:59 -0600 Subject: [PATCH 14/34] style(NoDataDisplay.tsx): replace SentimentDissatisfiedIcon with RemoveCircleOutlineIcon for better visual representation The SentimentDissatisfiedIcon has been replaced with the RemoveCircleOutlineIcon to provide a more suitable and visually appealing icon for indicating the absence of data. Additionally, the text displayed has been adjusted for better clarity and readability. issue #965 --- apps/genome-page/components/NoDataDisplay.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/genome-page/components/NoDataDisplay.tsx b/apps/genome-page/components/NoDataDisplay.tsx index cf5b9d34a9..a1c4f74a87 100644 --- a/apps/genome-page/components/NoDataDisplay.tsx +++ b/apps/genome-page/components/NoDataDisplay.tsx @@ -1,7 +1,7 @@ import Paper from "@material-ui/core/Paper" import Typography from "@material-ui/core/Typography" import Grid from "@material-ui/core/Grid" -import SentimentDissatisfiedIcon from "@material-ui/icons/SentimentDissatisfied" +import RemoveCircleOutlineIcon from "@material-ui/icons/RemoveCircleOutline" import { makeStyles } from "@material-ui/core/styles" import { blue, grey } from "@material-ui/core/colors" @@ -35,10 +35,10 @@ const NoDataDisplay = ({ query, geneId }: NoDataDisplayProperties) => { alignItems="center" > - + - {`No ${query} data for ${geneId}`} + {`No ${query} for ${geneId}`} From 37f7a91866bf39bd64185eb793f3cf9c10668a9b Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:27:08 -0600 Subject: [PATCH 15/34] refactor(PhenotypesLoader.tsx): simplify PhenotypesLoader component by removing unused code related to next/router and Layout component The code has been refactored to simplify the PhenotypesLoader component by removing unused code related to next/router and the Layout component. This improves code readability and reduces unnecessary complexity in the component. issue #965 --- .../features/Phenotypes/PhenotypesLoader.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/apps/genome-page/components/features/Phenotypes/PhenotypesLoader.tsx b/apps/genome-page/components/features/Phenotypes/PhenotypesLoader.tsx index a63aa03061..e060d28f06 100644 --- a/apps/genome-page/components/features/Phenotypes/PhenotypesLoader.tsx +++ b/apps/genome-page/components/features/Phenotypes/PhenotypesLoader.tsx @@ -1,21 +1,8 @@ -import { useRouter } from "next/router" -import { Layout } from "components/layout/Layout" import { Loader } from "components/Loader" /** * Loading screen for Summary page */ -const PhenotypesLoader = () => { - const { query } = useRouter() - const geneId = query.id as string - return ( - - - - ) -} +const PhenotypesLoader = () => export { PhenotypesLoader } From e0e2224936d157654d913425fd8a8d26d224934e Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:27:23 -0600 Subject: [PATCH 16/34] refactor(ReferencesLoader.tsx): remove unused useRouter and Layout imports, simplify ReferencesLoader component The changes were made to clean up the code by removing unused imports and simplifying the ReferencesLoader component to make it more concise and easier to read. issue #965 --- .../features/References/ReferencesLoader.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/apps/genome-page/components/features/References/ReferencesLoader.tsx b/apps/genome-page/components/features/References/ReferencesLoader.tsx index da3ddcf69f..ecf01d70c7 100644 --- a/apps/genome-page/components/features/References/ReferencesLoader.tsx +++ b/apps/genome-page/components/features/References/ReferencesLoader.tsx @@ -1,21 +1,8 @@ -import { useRouter } from "next/router" -import { Layout } from "components/layout/Layout" import { Loader } from "components/Loader" /** * Loading screen for Summary page */ -const ReferencesLoader = () => { - const { query } = useRouter() - const geneId = query.id as string - return ( - - - - ) -} +const ReferencesLoader = () => export { ReferencesLoader } From 7389ac82759d4a63a2b9de4fa2aa6c71dfd71be3 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:27:49 -0600 Subject: [PATCH 17/34] refactor(OntologyContainer.tsx): remove unused imports and simplify component structure The commit simplifies the OntologyContainer component by removing unused imports (Layout and useRouter) and simplifying the component structure to improve readability and maintainability. issue #965 --- .../features/Ontology/OntologyContainer.tsx | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/apps/genome-page/components/features/Ontology/OntologyContainer.tsx b/apps/genome-page/components/features/Ontology/OntologyContainer.tsx index 263db1fb9a..4b707a70f0 100644 --- a/apps/genome-page/components/features/Ontology/OntologyContainer.tsx +++ b/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 } -const OntologyContainer = ({ goas }: OntologyContainerProperties) => { - const { query } = useRouter() - const geneId = query.id as string - - return ( - - - {" "} - - - ) -} +const OntologyContainer = ({ goas }: OntologyContainerProperties) => ( + + {" "} + +) export { OntologyContainer } From 8e2c6fe206776949bb31841d82bf4197e3806d75 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:28:17 -0600 Subject: [PATCH 18/34] refactor(OntologyLoader.tsx): remove unused useRouter and Layout imports and geneId variable The changes were made to clean up the code by removing unused imports and variables, improving code readability and maintainability. issue #965 --- .../features/Ontology/OntologyLoader.tsx | 37 +++++++------------ 1 file changed, 14 insertions(+), 23 deletions(-) diff --git a/apps/genome-page/components/features/Ontology/OntologyLoader.tsx b/apps/genome-page/components/features/Ontology/OntologyLoader.tsx index 7769e206aa..52ab5c8456 100644 --- a/apps/genome-page/components/features/Ontology/OntologyLoader.tsx +++ b/apps/genome-page/components/features/Ontology/OntologyLoader.tsx @@ -3,8 +3,6 @@ import Tabs from "@material-ui/core/Tabs" import Tab from "@material-ui/core/Tab" import Box from "@material-ui/core/Box" import { createTheme, MuiThemeProvider } from "@material-ui/core/styles" -import { useRouter } from "next/router" -import { Layout } from "components/layout/Layout" import { Loader } from "components/Loader" const skeletonTheme = createTheme({ @@ -31,29 +29,22 @@ const skeletonTheme = createTheme({ * Loading screen for GO page */ const OntologyLoader = () => { - const { query } = useRouter() - const geneId = query.id as string return ( - - - - - - - - - - - - - - - + + + + + + + + + + + + + - + ) } From 96b1f1fe36d62d8e84b2fc965a1394df2aff1998 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:28:42 -0600 Subject: [PATCH 19/34] chore(goannotations.tsx): update import path for GraphQLErrorPage component The import path for the GraphQLErrorPage component has been updated to point to the correct location within the project structure, specifically to "components/errors/GraphQLErrorPage". This change ensures that the component is imported from the correct location and maintains consistency within the project. issue #965 --- apps/genome-page/pages/[id]/goannotations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/genome-page/pages/[id]/goannotations.tsx b/apps/genome-page/pages/[id]/goannotations.tsx index 3b18790950..b50c652820 100644 --- a/apps/genome-page/pages/[id]/goannotations.tsx +++ b/apps/genome-page/pages/[id]/goannotations.tsx @@ -1,5 +1,5 @@ import { OntologyContainer } from "components/features/Ontology/OntologyContainer" -import { GraphQLErrorPage } from "@dictybase/ui-common" +import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" import { OntologyLoader } from "components/features/Ontology/OntologyLoader" import { useRouter } from "next/router" import { useGeneOntologyAnnotationQuery } from "dicty-graphql-schema" From 1b107a1157c7e570e7edd52cd76e7d47ee1329fb Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:31:42 -0600 Subject: [PATCH 20/34] style(goannotations.tsx): improve code formatting and readability by adding a Layout component The code in goannotations.tsx has been refactored to improve readability and maintainability. A Layout component has been added to wrap the existing code, providing a more structured and organized layout for the page content. This change enhances the overall styling and structure of the component. issue #965 --- apps/genome-page/pages/[id]/goannotations.tsx | 40 ++++++++++++------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/apps/genome-page/pages/[id]/goannotations.tsx b/apps/genome-page/pages/[id]/goannotations.tsx index b50c652820..90d7a78d3a 100644 --- a/apps/genome-page/pages/[id]/goannotations.tsx +++ b/apps/genome-page/pages/[id]/goannotations.tsx @@ -1,5 +1,6 @@ import { OntologyContainer } from "components/features/Ontology/OntologyContainer" import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" +import { Layout } from "components/layout/Layout" import { OntologyLoader } from "components/features/Ontology/OntologyLoader" import { useRouter } from "next/router" import { useGeneOntologyAnnotationQuery } from "dicty-graphql-schema" @@ -19,20 +20,31 @@ const OntologyPageWrapper = () => { nextFetchPolicy: "cache-only", }) - return match(result) - .with( - { - data: { - geneOntologyAnnotation: P.select(P.array({ id: P.string })), - }, - }, - (goas) => , - ) - .with({ loading: true }, () => ) - .with({ error: P.select(P.not(undefined)) }, (error) => ( - - )) - .otherwise(() => <> This message should not appear. ) + return ( + + {match(result) + .with( + .with( + { + data: { + geneOntologyAnnotation: P.select(P.array({ id: P.string })), + }, + }, + (goas) => , + ) + .with({ loading: true }, () => ) + .with({ error: P.select(P.not(undefined)) }, (error) => ( + + )) + .otherwise(() => ( + <> This message should not appear. + ))} + + ) } // eslint-disable-next-line import/no-default-export From c2c0cd79a7bdc850fbeb0af8fe6dc88ddf58d37f Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:31:52 -0600 Subject: [PATCH 21/34] feat(goannotations.tsx): add NoDataDisplay component to show a message when there are no gene ontology annotations available The NoDataDisplay component is added to the OntologyPageWrapper to display a message when the geneOntologyAnnotation data is empty. This provides a better user experience by informing users that there are no gene ontology annotations available for the specific gene. issue #965 --- apps/genome-page/pages/[id]/goannotations.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/genome-page/pages/[id]/goannotations.tsx b/apps/genome-page/pages/[id]/goannotations.tsx index 90d7a78d3a..116821ff5d 100644 --- a/apps/genome-page/pages/[id]/goannotations.tsx +++ b/apps/genome-page/pages/[id]/goannotations.tsx @@ -1,6 +1,7 @@ import { OntologyContainer } from "components/features/Ontology/OntologyContainer" import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" import { Layout } from "components/layout/Layout" +import { NoDataDisplay } from "components/NoDataDisplay" import { OntologyLoader } from "components/features/Ontology/OntologyLoader" import { useRouter } from "next/router" import { useGeneOntologyAnnotationQuery } from "dicty-graphql-schema" @@ -28,6 +29,13 @@ const OntologyPageWrapper = () => { > {match(result) .with( + { + data: { + geneOntologyAnnotation: [], + }, + }, + () => , + ) .with( { data: { From e42a85f82705926a68de3b69590ae5f22fad8320 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:32:49 -0600 Subject: [PATCH 22/34] style(OntologyContainer.tsx): remove unnecessary space after OntologyTabLayout component The commit removes the unnecessary space after the OntologyTabLayout component in the OntologyContainer file to improve code readability and maintain consistency in coding style. --- .../components/features/Ontology/OntologyContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/genome-page/components/features/Ontology/OntologyContainer.tsx b/apps/genome-page/components/features/Ontology/OntologyContainer.tsx index 4b707a70f0..35ff1fcfce 100644 --- a/apps/genome-page/components/features/Ontology/OntologyContainer.tsx +++ b/apps/genome-page/components/features/Ontology/OntologyContainer.tsx @@ -11,7 +11,7 @@ interface OntologyContainerProperties { } const OntologyContainer = ({ goas }: OntologyContainerProperties) => ( - {" "} + ) From 75d6faae2dfc5ccb639f2f80a12646970ec587fe Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:38:28 -0600 Subject: [PATCH 23/34] refactor(goannotations.tsx): update page title and description to reflect the correct content The page title and description have been updated to accurately reflect the content being displayed. The title now reads "GO Annotations for {gene}" and the description reads "Gene Ontology Annotations for {gene}". This change improves the clarity and relevance of the information presented on the page. issue #965 --- apps/genome-page/pages/[id]/goannotations.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/genome-page/pages/[id]/goannotations.tsx b/apps/genome-page/pages/[id]/goannotations.tsx index 116821ff5d..3ffb0d8186 100644 --- a/apps/genome-page/pages/[id]/goannotations.tsx +++ b/apps/genome-page/pages/[id]/goannotations.tsx @@ -24,8 +24,8 @@ const OntologyPageWrapper = () => { return ( {match(result) .with( From b6eedc16efb78fdc4b4bef4130ef43ac3bfaea3f Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:42:11 -0600 Subject: [PATCH 24/34] chore(genome-page): update import path for GraphQLErrorPage component The import path for the GraphQLErrorPage component has been updated to point to the correct location within the project structure, specifically to "components/errors/GraphQLErrorPage". This change ensures that the component is imported from the correct location and maintains consistency within the project. issue #965 --- apps/genome-page/pages/[id]/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/genome-page/pages/[id]/index.tsx b/apps/genome-page/pages/[id]/index.tsx index bf56548f73..c75da7442d 100644 --- a/apps/genome-page/pages/[id]/index.tsx +++ b/apps/genome-page/pages/[id]/index.tsx @@ -1,6 +1,6 @@ import { SummaryContainer } from "components/features/Summary/SummaryContainer" import { SummaryLoader } from "components/features/Summary/SummaryLoader" -import { GraphQLErrorPage } from "@dictybase/ui-common" +import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" import { useRouter } from "next/router" import { useGeneSummaryQuery } from "dicty-graphql-schema" import { match, P } from "ts-pattern" From 31a93c9ab1af0fe2d22761bdc840d89b1053d383 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:42:59 -0600 Subject: [PATCH 25/34] feat(genome-page): add Layout component to GenomePageWrapper for consistent page layout The Layout component is added to the GenomePageWrapper to provide a consistent layout structure for the page. This change ensures that all pages within the genome-page app have a unified look and feel, enhancing the overall user experience. issue #965 --- apps/genome-page/pages/[id]/index.tsx | 34 +++++++++++++++++---------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/apps/genome-page/pages/[id]/index.tsx b/apps/genome-page/pages/[id]/index.tsx index c75da7442d..df508e674e 100644 --- a/apps/genome-page/pages/[id]/index.tsx +++ b/apps/genome-page/pages/[id]/index.tsx @@ -1,6 +1,7 @@ import { SummaryContainer } from "components/features/Summary/SummaryContainer" import { SummaryLoader } from "components/features/Summary/SummaryLoader" import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" +import { Layout } from "components/layout/Layout" import { useRouter } from "next/router" import { useGeneSummaryQuery } from "dicty-graphql-schema" import { match, P } from "ts-pattern" @@ -18,18 +19,27 @@ const GenomePageWrapper = () => { fetchPolicy: "cache-and-network", nextFetchPolicy: "cache-only", }) - return match(result) - .with( - { - data: P.select(P.not(P.nullish)), - }, - (data) => , - ) - .with({ loading: true }, () => ) - .with({ error: P.select(P.not(undefined)) }, (error) => ( - - )) - .otherwise(() => <> This message should not appear. ) + return ( + + .with( + { + data: P.select(P.not(P.nullish)), + }, + (data) => , + ) + .with({ loading: true }, () => ) + .with({ error: P.select(P.not(undefined)) }, (error) => ( + + )) + .otherwise(() => ( + <> This message should not appear. + ))} + + ) } // eslint-disable-next-line import/no-default-export From 4c77d33361c74558d05bbd9d69e53919a8979360 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:43:13 -0600 Subject: [PATCH 26/34] feat(genome-page): add NoDataDisplay component to show message when gene summary data is null or undefined The NoDataDisplay component is added to the GenomePageWrapper to display a message when the gene summary data is null or undefined. This improves the user experience by providing feedback when there is no data available for the requested gene. issue #965 --- apps/genome-page/pages/[id]/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/genome-page/pages/[id]/index.tsx b/apps/genome-page/pages/[id]/index.tsx index df508e674e..ffc6bcb7cc 100644 --- a/apps/genome-page/pages/[id]/index.tsx +++ b/apps/genome-page/pages/[id]/index.tsx @@ -2,6 +2,7 @@ import { SummaryContainer } from "components/features/Summary/SummaryContainer" import { SummaryLoader } from "components/features/Summary/SummaryLoader" import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" import { Layout } from "components/layout/Layout" +import { NoDataDisplay } from "components/NoDataDisplay" import { useRouter } from "next/router" import { useGeneSummaryQuery } from "dicty-graphql-schema" import { match, P } from "ts-pattern" @@ -25,6 +26,13 @@ const GenomePageWrapper = () => { title={`Gene Summary for ${gene}`} description={`Gene information for ${gene}`} > + {match(result) + .with( + { + data: P.nullish, + }, + () => , + ) .with( { data: P.select(P.not(P.nullish)), From 2e522f26fcb518cf96ca9ddb76757d9613c0d89e Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:48:58 -0600 Subject: [PATCH 27/34] refactor: remove Layout component and its props as they are no longer needed The Layout component and its associated props were removed from both SummaryContainer.tsx and SummaryLoader.tsx files as they were no longer necessary for the functionality of the components. This cleanup simplifies the code and improves readability. issue #965 --- .../features/Summary/SummaryContainer.tsx | 38 +++++++++---------- .../features/Summary/SummaryLoader.tsx | 9 ----- 2 files changed, 17 insertions(+), 30 deletions(-) diff --git a/apps/genome-page/components/features/Summary/SummaryContainer.tsx b/apps/genome-page/components/features/Summary/SummaryContainer.tsx index 5abd8f14c4..0724f630d8 100644 --- a/apps/genome-page/components/features/Summary/SummaryContainer.tsx +++ b/apps/genome-page/components/features/Summary/SummaryContainer.tsx @@ -1,6 +1,5 @@ import Typography from "@material-ui/core/Typography" import { PanelWrapper } from "components/panels/PanelWrapper" -import { Layout } from "components/layout/Layout" import { GeneSummaryQuery } from "dicty-graphql-schema" import { useRouter } from "next/router" import { GeneralInfoPanel } from "components/features/Summary/Panels/GeneralInfoPanel" @@ -25,26 +24,23 @@ const SummaryContainer = ({ geneSummary }: SummaryContainerProperties) => { ) const geneId = query.id as string return ( - - - - - - - - - - - - - + + + + + + + + + + + ) } diff --git a/apps/genome-page/components/features/Summary/SummaryLoader.tsx b/apps/genome-page/components/features/Summary/SummaryLoader.tsx index cb02146290..d9298efe57 100644 --- a/apps/genome-page/components/features/Summary/SummaryLoader.tsx +++ b/apps/genome-page/components/features/Summary/SummaryLoader.tsx @@ -1,20 +1,11 @@ -import { useRouter } from "next/router" -import { Layout } from "components/layout/Layout" import { Loader } from "components/Loader" /** * Loading screen for Summary page */ const SummaryLoader = () => { - const { query } = useRouter() - const geneId = query.id as string return ( - - ) } From fd9d377a6cf8e44c53c533f07fbda103ee228ec2 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:49:21 -0600 Subject: [PATCH 28/34] style(SummaryLoader.tsx): remove unnecessary line breaks in the return statement for cleaner code The changes were made to improve the code readability and maintainability by removing unnecessary line breaks in the return statement, resulting in cleaner and more concise code. --- .../genome-page/components/features/Summary/SummaryLoader.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/genome-page/components/features/Summary/SummaryLoader.tsx b/apps/genome-page/components/features/Summary/SummaryLoader.tsx index d9298efe57..a150cbd34c 100644 --- a/apps/genome-page/components/features/Summary/SummaryLoader.tsx +++ b/apps/genome-page/components/features/Summary/SummaryLoader.tsx @@ -4,9 +4,7 @@ import { Loader } from "components/Loader" * Loading screen for Summary page */ const SummaryLoader = () => { - return ( - - ) + return } export { SummaryLoader } From 0a06812e6a81bf3c1dc107d96df4f9f00a50b7fb Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 21:49:40 -0600 Subject: [PATCH 29/34] style(genome-page): remove unnecessary whitespace in NoDataDisplay component call The commit removes the unnecessary whitespace in the NoDataDisplay component call to improve code consistency and readability. --- apps/genome-page/pages/[id]/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/genome-page/pages/[id]/index.tsx b/apps/genome-page/pages/[id]/index.tsx index ffc6bcb7cc..f27d28f08c 100644 --- a/apps/genome-page/pages/[id]/index.tsx +++ b/apps/genome-page/pages/[id]/index.tsx @@ -31,7 +31,7 @@ const GenomePageWrapper = () => { { data: P.nullish, }, - () => , + () => , ) .with( { From 5c537d29ad9b2ffe0780716fdfc34b83ad07aee4 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 22:10:37 -0600 Subject: [PATCH 30/34] feat(genome-page): replace specific loader components with generic Loader component The specific loader components for Summary, Phenotypes, Ontology, and References pages have been replaced with a generic Loader component. This change improves code reusability and maintainability by using a single Loader component across multiple pages, reducing duplication and making it easier to update the loading behavior in the future. issue #965 --- apps/genome-page/pages/[id]/goannotations.tsx | 4 ++-- apps/genome-page/pages/[id]/index.tsx | 4 ++-- apps/genome-page/pages/[id]/phenotypes.tsx | 4 ++-- apps/genome-page/pages/[id]/references.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/genome-page/pages/[id]/goannotations.tsx b/apps/genome-page/pages/[id]/goannotations.tsx index 3ffb0d8186..2fb7fbd51b 100644 --- a/apps/genome-page/pages/[id]/goannotations.tsx +++ b/apps/genome-page/pages/[id]/goannotations.tsx @@ -2,7 +2,7 @@ import { OntologyContainer } from "components/features/Ontology/OntologyContaine import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" import { Layout } from "components/layout/Layout" import { NoDataDisplay } from "components/NoDataDisplay" -import { OntologyLoader } from "components/features/Ontology/OntologyLoader" +import { Loader } from "components/Loader" import { useRouter } from "next/router" import { useGeneOntologyAnnotationQuery } from "dicty-graphql-schema" import { match, P } from "ts-pattern" @@ -44,7 +44,7 @@ const OntologyPageWrapper = () => { }, (goas) => , ) - .with({ loading: true }, () => ) + .with({ loading: true }, () => ) .with({ error: P.select(P.not(undefined)) }, (error) => ( )) diff --git a/apps/genome-page/pages/[id]/index.tsx b/apps/genome-page/pages/[id]/index.tsx index f27d28f08c..9b5d08f8de 100644 --- a/apps/genome-page/pages/[id]/index.tsx +++ b/apps/genome-page/pages/[id]/index.tsx @@ -1,5 +1,5 @@ import { SummaryContainer } from "components/features/Summary/SummaryContainer" -import { SummaryLoader } from "components/features/Summary/SummaryLoader" +import { Loader } from "components/Loader" import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" import { Layout } from "components/layout/Layout" import { NoDataDisplay } from "components/NoDataDisplay" @@ -39,7 +39,7 @@ const GenomePageWrapper = () => { }, (data) => , ) - .with({ loading: true }, () => ) + .with({ loading: true }, () => ) .with({ error: P.select(P.not(undefined)) }, (error) => ( )) diff --git a/apps/genome-page/pages/[id]/phenotypes.tsx b/apps/genome-page/pages/[id]/phenotypes.tsx index ba4a2e1002..b748d920e6 100644 --- a/apps/genome-page/pages/[id]/phenotypes.tsx +++ b/apps/genome-page/pages/[id]/phenotypes.tsx @@ -1,5 +1,5 @@ import { PhenotypesContainer } from "components/features/Phenotypes/PhenotypesContainer" -import { PhenotypesLoader } from "components/features/Phenotypes/PhenotypesLoader" +import { Loader } from "components/Loader" import { Layout } from "components/layout/Layout" import { NoDataDisplay } from "components/NoDataDisplay" import { GraphQLErrorPage } from "components/errors/GraphQLErrorPage" @@ -42,7 +42,7 @@ const PhenotypesPageWrapper = () => { }, (strains) => , ) - .with({ loading: true }, () => ) + .with({ loading: true }, () => ) .with({ error: P.select(P.not(undefined)) }, (error) => ( )) diff --git a/apps/genome-page/pages/[id]/references.tsx b/apps/genome-page/pages/[id]/references.tsx index 3bf16168af..e9636f9ad8 100644 --- a/apps/genome-page/pages/[id]/references.tsx +++ b/apps/genome-page/pages/[id]/references.tsx @@ -2,7 +2,7 @@ import { ReferencesContainer } from "components/features/References/ReferencesCo import { GraphQLErrorPage } from "@dictybase/ui-common" import { Layout } from "components/layout/Layout" import { NoDataDisplay } from "components/NoDataDisplay" -import { ReferencesLoader } from "components/features/References/ReferencesLoader" +import { Loader } from "components/Loader" import { useRouter } from "next/router" import { useListPublicationsWithGeneQuery } from "dicty-graphql-schema" import { match, P } from "ts-pattern" @@ -42,7 +42,7 @@ const ReferencesPageWrapper = () => { }, (publications) => , ) - .with({ loading: true }, () => ) + .with({ loading: true }, () => ) .with({ error: P.select(P.not(undefined)) }, (error) => ( )) From 357f6fed3cd834a82c07ebfbacd3a192e291e716 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 22:10:51 -0600 Subject: [PATCH 31/34] style(Loader.tsx): refactor Loader component to use Paper and makeStyles for improved styling The Loader component has been refactored to use the Paper component from Material-UI for a more visually appealing loading skeleton. Additionally, the component now utilizes the makeStyles hook to define styling for the container, enhancing the overall design and structure of the component. issue #965 --- apps/genome-page/components/Loader.tsx | 29 +++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/apps/genome-page/components/Loader.tsx b/apps/genome-page/components/Loader.tsx index eab6bade58..6ab83c282a 100644 --- a/apps/genome-page/components/Loader.tsx +++ b/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 = () => ( - - {AmakeBy(12, (key) => ( - - ))} - -) +const Loader = () => { + const classes = useStyles() + return ( + + + {AmakeBy(12, (key) => ( + + ))} + + + ) +} export { Loader } From 51740a01019106fbe50e1e67114fb94a79d41b87 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 3 Feb 2025 22:11:49 -0600 Subject: [PATCH 32/34] chore(genome-page): remove OntologyLoader, PhenotypesLoader, ReferencesLoader, and SummaryLoader components and their related test files The OntologyLoader, PhenotypesLoader, ReferencesLoader, and SummaryLoader components were removed as they are no longer needed in the application. --- .../features/Ontology/OntologyLoader.md | 3 -- .../features/Ontology/OntologyLoader.test.tsx | 18 ------- .../features/Ontology/OntologyLoader.tsx | 51 ------------------- .../Phenotypes/PhenotypesLoader.test.tsx | 19 ------- .../features/Phenotypes/PhenotypesLoader.tsx | 8 --- .../features/References/ReferencesLoader.tsx | 8 --- .../features/Summary/SummaryLoader.md | 3 -- .../features/Summary/SummaryLoader.test.tsx | 18 ------- .../features/Summary/SummaryLoader.tsx | 10 ---- 9 files changed, 138 deletions(-) delete mode 100644 apps/genome-page/components/features/Ontology/OntologyLoader.md delete mode 100644 apps/genome-page/components/features/Ontology/OntologyLoader.test.tsx delete mode 100644 apps/genome-page/components/features/Ontology/OntologyLoader.tsx delete mode 100644 apps/genome-page/components/features/Phenotypes/PhenotypesLoader.test.tsx delete mode 100644 apps/genome-page/components/features/Phenotypes/PhenotypesLoader.tsx delete mode 100644 apps/genome-page/components/features/References/ReferencesLoader.tsx delete mode 100644 apps/genome-page/components/features/Summary/SummaryLoader.md delete mode 100644 apps/genome-page/components/features/Summary/SummaryLoader.test.tsx delete mode 100644 apps/genome-page/components/features/Summary/SummaryLoader.tsx diff --git a/apps/genome-page/components/features/Ontology/OntologyLoader.md b/apps/genome-page/components/features/Ontology/OntologyLoader.md deleted file mode 100644 index 741f723331..0000000000 --- a/apps/genome-page/components/features/Ontology/OntologyLoader.md +++ /dev/null @@ -1,3 +0,0 @@ -```jsx - -``` diff --git a/apps/genome-page/components/features/Ontology/OntologyLoader.test.tsx b/apps/genome-page/components/features/Ontology/OntologyLoader.test.tsx deleted file mode 100644 index 482ab1279a..0000000000 --- a/apps/genome-page/components/features/Ontology/OntologyLoader.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react" -import { render, screen } from "@testing-library/react" -import { OntologyLoader } from "./OntologyLoader" - -jest.mock("next/router", () => { - const useRouter = jest.fn(() => ({ - query: { id: "DDB_G123456" }, - pathname: "", - })) - return { useRouter } -}) - -describe("components/OntologyLoader", () => { - it("should render skeleton loader", () => { - render() - expect(screen.getByTestId("skeleton-loader")).toBeInTheDocument() - }) -}) diff --git a/apps/genome-page/components/features/Ontology/OntologyLoader.tsx b/apps/genome-page/components/features/Ontology/OntologyLoader.tsx deleted file mode 100644 index 52ab5c8456..0000000000 --- a/apps/genome-page/components/features/Ontology/OntologyLoader.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import AppBar from "@material-ui/core/AppBar" -import Tabs from "@material-ui/core/Tabs" -import Tab from "@material-ui/core/Tab" -import Box from "@material-ui/core/Box" -import { createTheme, MuiThemeProvider } from "@material-ui/core/styles" -import { Loader } from "components/Loader" - -const skeletonTheme = createTheme({ - overrides: { - MuiTab: { - root: { - textTransform: "none", - }, - }, - MuiTabs: { - root: { - backgroundColor: "#DFE8F6", - color: "#000", - }, - indicator: { - backgroundColor: "#858780", - height: "3px", - }, - }, - }, -}) - -/** - * Loading screen for GO page - */ -const OntologyLoader = () => { - return ( - - - - - - - - - - - - - - - - ) -} - -export { OntologyLoader } diff --git a/apps/genome-page/components/features/Phenotypes/PhenotypesLoader.test.tsx b/apps/genome-page/components/features/Phenotypes/PhenotypesLoader.test.tsx deleted file mode 100644 index 3fd3395b77..0000000000 --- a/apps/genome-page/components/features/Phenotypes/PhenotypesLoader.test.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { render, screen } from "@testing-library/react" -import React from "react" -import { PhenotypesLoader } from "./PhenotypesLoader" - -jest.mock("next/router", () => { - const useRouter = jest.fn(() => ({ - query: { id: "DDB_G123456" }, - pathname: "", - })) - return { useRouter } -}) - -describe("features/Phenotypes/PhenotypesLoader", () => { - it("should render loader", () => { - render() - - expect(screen.getByTestId("skeleton-loader")).toBeInTheDocument() - }) -}) diff --git a/apps/genome-page/components/features/Phenotypes/PhenotypesLoader.tsx b/apps/genome-page/components/features/Phenotypes/PhenotypesLoader.tsx deleted file mode 100644 index e060d28f06..0000000000 --- a/apps/genome-page/components/features/Phenotypes/PhenotypesLoader.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Loader } from "components/Loader" - -/** - * Loading screen for Summary page - */ -const PhenotypesLoader = () => - -export { PhenotypesLoader } diff --git a/apps/genome-page/components/features/References/ReferencesLoader.tsx b/apps/genome-page/components/features/References/ReferencesLoader.tsx deleted file mode 100644 index ecf01d70c7..0000000000 --- a/apps/genome-page/components/features/References/ReferencesLoader.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Loader } from "components/Loader" - -/** - * Loading screen for Summary page - */ -const ReferencesLoader = () => - -export { ReferencesLoader } diff --git a/apps/genome-page/components/features/Summary/SummaryLoader.md b/apps/genome-page/components/features/Summary/SummaryLoader.md deleted file mode 100644 index 33facbb08a..0000000000 --- a/apps/genome-page/components/features/Summary/SummaryLoader.md +++ /dev/null @@ -1,3 +0,0 @@ -```jsx - -``` diff --git a/apps/genome-page/components/features/Summary/SummaryLoader.test.tsx b/apps/genome-page/components/features/Summary/SummaryLoader.test.tsx deleted file mode 100644 index c4e6de9edf..0000000000 --- a/apps/genome-page/components/features/Summary/SummaryLoader.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react" -import { render, screen } from "@testing-library/react" -import { SummaryLoader } from "./SummaryLoader" - -jest.mock("next/router", () => { - const useRouter = jest.fn(() => ({ - query: { id: "DDB_G123456" }, - pathname: "", - })) - return { useRouter } -}) - -describe("components/SummaryLoader", () => { - it("should render skeleton loader", () => { - render() - expect(screen.getByTestId("skeleton-loader")).toBeInTheDocument() - }) -}) diff --git a/apps/genome-page/components/features/Summary/SummaryLoader.tsx b/apps/genome-page/components/features/Summary/SummaryLoader.tsx deleted file mode 100644 index a150cbd34c..0000000000 --- a/apps/genome-page/components/features/Summary/SummaryLoader.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Loader } from "components/Loader" - -/** - * Loading screen for Summary page - */ -const SummaryLoader = () => { - return -} - -export { SummaryLoader } From 78629dc879f51a38a65ce9855652045fffa76c8c Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Tue, 4 Feb 2025 10:39:10 -0600 Subject: [PATCH 33/34] feat(SummaryContainer.tsx): add NoDataDisplay component to handle empty publications list The NoDataDisplay component is added to handle cases where the publications list is empty. This improves the user experience by providing a clear message when there is no data to display, enhancing the overall usability of the application. issue #965 --- .../components/features/Summary/SummaryContainer.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/genome-page/components/features/Summary/SummaryContainer.tsx b/apps/genome-page/components/features/Summary/SummaryContainer.tsx index 0724f630d8..22cb64ea3d 100644 --- a/apps/genome-page/components/features/Summary/SummaryContainer.tsx +++ b/apps/genome-page/components/features/Summary/SummaryContainer.tsx @@ -2,9 +2,11 @@ import Typography from "@material-ui/core/Typography" import { PanelWrapper } from "components/panels/PanelWrapper" import { GeneSummaryQuery } from "dicty-graphql-schema" import { useRouter } from "next/router" +import { match } from "ts-pattern" import { GeneralInfoPanel } from "components/features/Summary/Panels/GeneralInfoPanel" import { GoaPanel } from "components/features/Summary/Panels/GoaPanel" import { ReferencesPanel } from "components/features/Summary/Panels/ReferencesPanel" +import { NoDataDisplay } from "components/NoDataDisplay" interface SummaryContainerProperties { geneSummary: GeneSummaryQuery @@ -38,7 +40,11 @@ const SummaryContainer = ({ geneSummary }: SummaryContainerProperties) => { route={`${geneId}/references`} title={`Publications (${partialPublicationsList.length} of ${listPublicationsWithGene.length}) `} > - + {match(partialPublicationsList) + .with([], () => ) + .otherwise((publications) => ( + + ))} ) From fd956f069a36d0ca858b2f221107e0b1d6703486 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Tue, 4 Feb 2025 10:44:02 -0600 Subject: [PATCH 34/34] style(genomepage): fix various linting errors The changes were made to enhance the code readability and maintain consistency in coding style across the files. --- apps/genome-page/components/NoDataDisplay.tsx | 3 +-- .../genome-page/components/errors/GraphQLErrorPage.tsx | 8 +++++--- apps/genome-page/components/errors/NotFoundError.tsx | 1 - .../components/features/Ontology/OntologyContainer.tsx | 2 +- .../components/features/Summary/SummaryContainer.tsx | 10 +++++----- apps/genome-page/pages/[id]/goannotations.tsx | 3 +-- apps/genome-page/pages/[id]/index.tsx | 3 +-- apps/genome-page/pages/[id]/phenotypes.tsx | 2 +- 8 files changed, 15 insertions(+), 17 deletions(-) diff --git a/apps/genome-page/components/NoDataDisplay.tsx b/apps/genome-page/components/NoDataDisplay.tsx index a1c4f74a87..6132e89038 100644 --- a/apps/genome-page/components/NoDataDisplay.tsx +++ b/apps/genome-page/components/NoDataDisplay.tsx @@ -32,8 +32,7 @@ const NoDataDisplay = ({ query, geneId }: NoDataDisplayProperties) => { container direction="column" justifyContent="center" - alignItems="center" - > + alignItems="center"> diff --git a/apps/genome-page/components/errors/GraphQLErrorPage.tsx b/apps/genome-page/components/errors/GraphQLErrorPage.tsx index f85a034585..6f21fc0527 100644 --- a/apps/genome-page/components/errors/GraphQLErrorPage.tsx +++ b/apps/genome-page/components/errors/GraphQLErrorPage.tsx @@ -10,11 +10,11 @@ import { } 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" -import { makeStyles } from "@material-ui/core/styles" -import { blue, grey } from "@material-ui/core/colors" const useStyles = makeStyles({ container: { @@ -67,7 +67,9 @@ const GraphQLErrorPage = ({ error }: GraphQlErrorPageProperties) => { ) return match(primaryErrorCode) .with("Unavailable", () => ) - .with("NotFound", () => ) + .with("NotFound", () => ( + + )) .otherwise(() => ) }) .otherwise(() => ( diff --git a/apps/genome-page/components/errors/NotFoundError.tsx b/apps/genome-page/components/errors/NotFoundError.tsx index 227679756a..866570c4d3 100644 --- a/apps/genome-page/components/errors/NotFoundError.tsx +++ b/apps/genome-page/components/errors/NotFoundError.tsx @@ -1,6 +1,5 @@ import React from "react" import Grid from "@material-ui/core/Grid" -import Paper from "@material-ui/core/Paper" import Image from "next/image" import { ErrorMessage } from "./ErrorMessage" import { useStyles } from "../../styles/errorStyles" diff --git a/apps/genome-page/components/features/Ontology/OntologyContainer.tsx b/apps/genome-page/components/features/Ontology/OntologyContainer.tsx index 35ff1fcfce..eeec439d58 100644 --- a/apps/genome-page/components/features/Ontology/OntologyContainer.tsx +++ b/apps/genome-page/components/features/Ontology/OntologyContainer.tsx @@ -11,7 +11,7 @@ interface OntologyContainerProperties { } const OntologyContainer = ({ goas }: OntologyContainerProperties) => ( - + ) diff --git a/apps/genome-page/components/features/Summary/SummaryContainer.tsx b/apps/genome-page/components/features/Summary/SummaryContainer.tsx index 22cb64ea3d..d03f19835c 100644 --- a/apps/genome-page/components/features/Summary/SummaryContainer.tsx +++ b/apps/genome-page/components/features/Summary/SummaryContainer.tsx @@ -32,16 +32,16 @@ const SummaryContainer = ({ geneSummary }: SummaryContainerProperties) => { + title="Gene Ontology Annotations"> + title={`Publications (${partialPublicationsList.length} of ${listPublicationsWithGene.length}) `}> {match(partialPublicationsList) - .with([], () => ) + .with([], () => ( + + )) .otherwise((publications) => ( ))} diff --git a/apps/genome-page/pages/[id]/goannotations.tsx b/apps/genome-page/pages/[id]/goannotations.tsx index 2fb7fbd51b..3e6bd81e91 100644 --- a/apps/genome-page/pages/[id]/goannotations.tsx +++ b/apps/genome-page/pages/[id]/goannotations.tsx @@ -25,8 +25,7 @@ const OntologyPageWrapper = () => { + description={`Gene Ontology Annotations for ${gene}`}> {match(result) .with( { diff --git a/apps/genome-page/pages/[id]/index.tsx b/apps/genome-page/pages/[id]/index.tsx index 9b5d08f8de..641b2c07a4 100644 --- a/apps/genome-page/pages/[id]/index.tsx +++ b/apps/genome-page/pages/[id]/index.tsx @@ -24,8 +24,7 @@ const GenomePageWrapper = () => { + description={`Gene information for ${gene}`}> {match(result) .with( { diff --git a/apps/genome-page/pages/[id]/phenotypes.tsx b/apps/genome-page/pages/[id]/phenotypes.tsx index b748d920e6..3ed7b1dd79 100644 --- a/apps/genome-page/pages/[id]/phenotypes.tsx +++ b/apps/genome-page/pages/[id]/phenotypes.tsx @@ -29,7 +29,7 @@ const PhenotypesPageWrapper = () => { .with( { data: { - listStrainsWithGene: P.union([], P.array({ phenotypes: []})), + listStrainsWithGene: P.union([], P.array({ phenotypes: [] })), }, }, () => ,