Pulling feat/ui-common-mui5 into develop#1095
Open
github-actions[bot] wants to merge 35 commits intodevelopfrom
Open
Pulling feat/ui-common-mui5 into develop#1095github-actions[bot] wants to merge 35 commits intodevelopfrom
github-actions[bot] wants to merge 35 commits intodevelopfrom
Conversation
This commit migrates the dicty-frontpage application to use the @dictybase/auth-mui5 library. This new library provides authentication and authorization functionality with Material UI 5 compatibility. The following changes were made: - Replaced `@dictybase/auth` with `@dictybase/auth-mui5` in `package.json`. - Updated all imports from `@dictybase/auth` to `@dictybase/auth-mui5` in the application's source code. This migration ensures that the dicty-frontpage application is using the latest authentication and authorization library with Material UI 5 support.
This reverts commit d7e0cfe.
The `match` function from `fp-ts/boolean` was replaced with `matchW` to ensure type safety when handling different return types.
The event listener for `beforeunload` was moved inside the `useEffect` hook to prevent multiple event listeners from being added.
The test for Apollo Error was removed from `StockCenterPlasmidQuery.test.tsx` as it was not properly implemented.
A key prop was added to the Grid item in `PublicationLinks.tsx` to resolve a React key prop warning.
`Array(publications.length)` was replaced with `Array.from({ length: publications.length })` to properly initialize the shuffled array in `PublicationsView.tsx`.
The type of the `children` prop is not known, so `matchW` is used to allow for a wider type of the `children` prop. This avoids a type error when the `children` prop is not a boolean.
… React components and utilities This commit introduces a new package, `@dictybase/ui-common-mui5`, which provides a collection of reusable React components and utility functions for dictyBase applications. The package includes: - A variety of UI components such as buttons, tabs, dividers, loading indicators, and error displays. - Utility functions for date formatting, string manipulation, citation generation, and grouping content by date. - Error handling components and utilities for displaying different types of errors, such as server errors, not found errors, and GraphQL errors. - A custom theme based on Material-UI v5. - Testing setup and mocks for unit testing the components. - Configuration files for linting and type checking. This package aims to promote code reuse, improve consistency, and simplify the development of dictyBase applications.
The material-ui packages are upgraded to mui v5. The packages include @mui/material, @mui/styles, @mui/icons-material, and @mui/lab. The react version is still 17.* because of dependency issues.
This commit migrates the ui-common-mui5 package from the deprecated `@material-ui/core` library to the actively maintained `@mui/material` library. This involves updating import statements to reflect the new package structure and using `@mui/styles/makeStyles` instead of `@material-ui/core/styles`. Also, adaptV4Theme is used to ensure compatibility with the old theme options. The migration ensures that the package uses the latest version of Material UI, benefiting from bug fixes, performance improvements, and new features. It also aligns the project with the recommended Material UI library, ensuring long-term maintainability and compatibility.
…i-common-mui5 packages The lint output file names are changed to be more specific to the package they are associated with. This makes it easier to identify which package has linting errors.
This commit migrates the application to use the `@dictybase/ui-common-mui5` package instead of `@dictybase/ui-common`. This change ensures that the application uses the latest version of the dictyBase UI components, which are now based on Material UI v5. The ui-user package was also updated to the latest version. The ui-common package is deprecated and will no longer be maintained.
Migrate from `@dictybase/ui-common` to `@dictybase/ui-common-mui5` package. This change ensures compatibility with the MUI5 component library. The `FullPageLoadingDisplay` component is now imported from the new package.
The theme object for mui4 is contained in the ui-common package. Until all packages have been migrated to mui5, it is still necessary to use the mui4 theme.
This commit integrates both MUI4 and MUI5 themes into the application. It wraps the application with both `MUI5ThemeProvider` and `MuiThemeProvider` to ensure that components from both versions of Material UI are styled correctly. Additionally, it uses `StylesProvider` with a custom class name generator to avoid class name collisions between the two versions.
…nt from Material-UI This commit refactors the code to replace `div` elements with the `Box` component from Material-UI. This change improves the semantics and consistency of the code, as `Box` is a more appropriate component for layout and styling purposes within a Material-UI application. It also allows for easier customization and theming of the components.
…erMUI4 to avoid confusion The MuiThemeProvider component is renamed to MuiThemeProviderMUI4 to avoid confusion with the MUI5 theme provider. The children are now wrapped with the MuiThemeProviderMUI4 component to ensure that the MUI4 theme is applied correctly.
This commit introduces the initial files and directory structure for the stock-center-mui5 application. It includes configuration files for development, staging, and mock environments, as well as source code for the application's components, pages, hooks, and tests. Additionally, it includes diagrams illustrating the component trees and order flow. The addition of these files sets up the basic structure and dependencies required for the stock center application. It also includes initial tests and documentation to ensure the application is well-tested and documented from the start.
The eslint output file name is changed to include "mui5" to distinguish it from other eslint output files.
The div element is replaced with Box from Material UI to allow for more styling options and better integration with the Material UI theme.
The root div element was replaced with Box from Material UI. This change was made to allow for more flexibility in styling and layout, as Box provides a more convenient way to apply styling properties.
The eslint output file was named incorrectly, so it has been renamed to dicty-frontpage-mui5.json to match the application name.
…d material-ui/core This commit adds the MUI5 theme provider and removes the deprecated material-ui/core. It also adds a StylesProvider to generate class names with a prefix to avoid conflicts with other libraries.
The ThemeProvider component is now a functional component. This change improves the code readability and maintainability by explicitly defining the component type.
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Join our Discord community for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
This commit introduces the `publication-mui5` application with a comprehensive set of initial files. These files cover various aspects of the application, including: - Configuration files: `.all-contributorsrc`, `.dockerignore`, `.editorconfig`, `.env.*`, `.merlin`, `.oxlintrc.json`, `.prettierrc`, `.releaserc.json` - Documentation: `CHANGELOG.md`, `LICENSE`, `README.md` - TypeScript definitions: `additional.d.ts` - Build configurations: `bsconfig.json`, `next.config.js`, `tsconfig.json` - Chart configuration: `charts/publication/*` - Diagrams: `diagram.mmd`, `graph.mmd` - Mock data: `src/mocks/*` - Components: `src/components/*` - Layout: `src/components/layout/*` - Pages: `src/pages/*` - Styles: `src/styles/*` - Tests: `src/__tests__/*` - Utilities: `src/common/utils/*` - Hooks: `src/common/hooks/*` - Constants: `src/common/constants/*` - Types: `src/common/@types/*` - Static assets: `public/*` This initial commit sets up the basic structure and configuration for the `publication-mui5` application, providing a foundation for further development and feature implementation.
…endencies This commit renames the application to `publication-mui5` to reflect the usage of Material UI v5. It also updates the dependencies to use the `@dictybase/auth-mui5` package and removes the deprecated `dicty-components-header-footer` and `dicty-components-login` packages. Additionally, the eslint output file name is updated to reflect the new application name.
The declaration file is no longer needed as the dicty-components-login package now includes its own declaration file.
This package is required by the application to render common UI components.
The application now uses a custom ThemeProvider component to wrap the app. This allows us to use both MUI4 and MUI5 themes in the application. The MuiThemeProvider import was removed from AppProviders.tsx as it is now part of the custom ThemeProvider component. A new ThemeProvider component was created to handle the MUI4 and MUI5 themes.
This commit adds the initial files for the genome-page-mui5 app. It includes configuration files, Dockerfile, license, README, typescript definitions, charts, common utilities, components, features, mocks, and styles. This sets up the basic structure and dependencies for the application. feat(genome-page-mui5): add ontology tab layout and table components feat(genome-page-mui5): add phenotype table components feat(genome-page-mui5): add references table components feat(genome-page-mui5): add search box component feat(genome-page-mui5): add related genes components This commit introduces several new components for the genome page, including: - OntologyTabLayout: A tab layout for displaying ontology annotations. - EnhancedTableHead: A table head component with sorting functionality. - GoaDisplayTable: A table component for displaying GO annotations. - GoaDisplayTableRow: A row component for displaying individual GO annotations. - WithExtensionLink: A component for displaying links to With/Extension databases. - PhenotypeRow: A row component for displaying phenotype data. - PhenotypesContainer: A container component for displaying phenotype data. - PhenotypesDataTable: A table component for displaying phenotype data. - RenderPhenotypes: A component for rendering phenotypes. - EmptyGenesDisplay: A component for displaying a message when no genes are found. - EmptyGenesOverlay: A component for displaying an overlay message. - GeneChip: A chip component for displaying gene information. - GeneChipFiller: A filler chip component for empty spaces. - GeneGroupSelect: A component for selecting gene groups. - NoMatchDisplay: A component for displaying a message when no matches are found. - PublicationRow: A row component for displaying publication data. - ReferenceSearchBox: A search box component for references. - ReferencesContainer: A container component for displaying references. - ReferencesDataTable: A table component for displaying references. - ReferencesToolbar: A toolbar component for references. - RelatedGenesContainer: A container component for displaying related genes. - RelatedGenesContent: A content component for displaying related genes. - RelatedGenesControls: A control component for related genes. - RelatedGenesDisplay: A display component for related genes. - RelatedGenesHeader: A header component for related genes. - RelatedGenesList: A list component for related genes. - RelatedGenesNavigation: A navigation component for related genes. - RelatedGenesPager: A pager component for related genes. - SeeAllGenesChip: A chip component for seeing all genes. - SinglePublication: A component for displaying a single publication. - filterPublications: A function for filtering publications. - referenceOrderHelpers: A module for reference order helpers. - useSearchWithRouter: A hook for integrating search with the router. These components provide a comprehensive set of tools for displaying and interacting with gene ontology, phenotype, and reference data on the genome page. feat(genome-page-mui5): add gene summary page This commit introduces the gene summary page for the genome page application. It includes the following: - Layout component with tabs for Gene Summary, Gene Ontology, Phenotypes, and References. - Panel components for General Information, GO Annotations, and References. - Query components to fetch data for each panel. - Mock data and handlers for testing. - Cypress tests for snapshot testing. - Jest tests for unit testing. - Utility functions for data filtering and string manipulation. - Error handling and loading states for each panel. - Styling and theming using Material-UI. The gene summary page provides a comprehensive overview of a gene, including its general information, GO annotations, phenotypes, and references. The page is designed to be modular and extensible, with each panel being a separate component that can be easily updated or replaced. The page also includes error handling and loading states to provide a better user experience. feat: initial commit for genome-page-mui5 application This commit introduces the initial setup for the genome-page-mui5 application. It includes the basic structure, configuration files, and necessary dependencies to start building the genome page with Material UI 5. The commit includes: - Next.js configuration - TypeScript configuration - Material UI 5 setup - Basic page structure - Mock data for initial development - Style configurations - Layout components - Error handling components - Components for displaying summary, ontology, phenotypes, and references - Mock server setup for development - Google Analytics integration - Logto integration for authentication - FontAwesome icons - Jest testing configuration This commit sets the foundation for further development of the genome page application.
This commit renames the app from `genomepage` to `genomepage-mui5` to reflect the migration to Material UI v5. It also updates the dependencies to use the MUI5 compatible `@dictybase/auth-mui5` package and adds `@dictybase/ui-common`. The lint output path is updated to reflect the new app name. Finally, the commit removes the deprecated `@material-ui/*` packages. The renaming and dependency updates ensure that the app is correctly configured for MUI5 and uses the appropriate packages.
…ith MUI4 and MUI5 themes This commit introduces a new ThemeProvider component that wraps the application with both MUI4 and MUI5 themes. This allows the application to use components from both libraries while maintaining a consistent look and feel. The StylesProvider is used to generate unique class names for the components, which prevents style conflicts.
The MuiThemeProvider is replaced with a custom ThemeProvider to allow for more control over the theme.
…Material UI This commit replaces `div` elements with the `Box` component from Material UI in several files. This change is made to leverage the styling and layout capabilities provided by Material UI's `Box` component, which offers a more consistent and flexible approach to managing spacing, sizing, and other visual aspects of the application. The `Box` component also provides better integration with Material UI's theming system, allowing for more maintainable and customizable styles.
The MuiThemeProvider and custom theme were removed because the application is using Material UI v5, which does not require a theme provider. The theme is now provided at the application level.
…ybase/auth` This commit replaces all instances of `@dictybase/auth-mui5` with `@dictybase/auth`. The `@dictybase/auth-mui5` package is deprecated and `@dictybase/auth` is the new package that should be used. This change ensures that the application is using the latest version of the authentication library.
The otherwise case was added to ensure that all possible states are handled, even if they are not explicitly defined. This can help prevent unexpected behavior and make the code more robust.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.