diff --git a/apps/model_catalog/docs/component_documentation.md b/apps/model_catalog/docs/component_documentation.md new file mode 100644 index 0000000..543b4d8 --- /dev/null +++ b/apps/model_catalog/docs/component_documentation.md @@ -0,0 +1,270 @@ +# EBRAINS Model Catalog app: Components description + + +1. **ViewSelected.js**: + - Description: Defines a React component called `ViewSelected` for displaying selected data in a dialog box. + - Components: + - `EntityParameter`: A functional component to render a table row for a particular parameter of the selected entities. + - `ViewSelected`: A class component to render a dialog box with a table displaying parameters of the selected entities. + +2. **auth.js**: + - Description: Contains functions for initializing and handling authentication using Keycloak. + - Functions: + - `initAuth`: Initializes Keycloak authentication. + - `checkAuth`: Checks the authentication status and handles different scenarios based on the application's context (standalone, framed, or delegate). + - `verifyMessage`: Verifies messages received from other tabs during the authentication process. + +3. **utils.js**: + - Description: Contains utility functions used across the application. + - Functions: + - `capitalizeFirstLetter`: Capitalizes the first letter of a string. + - `formatBytes`: Formats a byte size value into a human-readable format. + - `getFileNameFromPath`: Extracts the file name from a file path. + - `getFormattedDateTime`: Formats a date and time string. + - `isValidURL`: Checks if a string is a valid URL. + +4. **AuthWidget.js**: + - Description: Defines a React component called `AuthWidget` for displaying the authentication widget. + - Props: + - `currentUser`: The current user's name. + - `setCurrentUser`: A function to set the current user's name. + +5. **ColoredCircularProgress.js**: + - Description: Defines a React component called `ColoredCircularProgress` for rendering a colored circular progress indicator. + - Props: + - Inherits all props from Material-UI's `CircularProgress` component. + +6. **WarningBox.js**: + - Description: Defines a React component called `WarningBox` for displaying warning messages. + - Props: + - `message`: The warning message to display. If the message is "ok" or undefined, nothing is rendered. + +7. **TestTable.js**: + - Description: The `TestTable` component is a React component designed to display a table of test data. It utilizes the `mui-datatables` library for rendering the table and `@material-ui/core/styles` for theming. The component has several methods to handle actions like downloading selected JSON, hiding table rows, viewing selected items, adding tests to compare, and handling the closing of view selected items. It also defines a custom theme for the table using the `createMuiTheme` function. The component is wrapped with `withSnackbar` to enable notification features. + +8. **theme.js**: + - Description: The `theme.js` file exports a default object that defines a color scheme for various UI elements. It includes colors for backgrounds, table headers, table rows, text, buttons, and other UI elements. This theme object can be used throughout the app to maintain a consistent color scheme and styling. + +9. **ThreeWaySwitch.js**: + - Description: The `ThreeWaySwitch` component is a React component that renders a three-way switch UI element. It uses styled-components to define styled divs and input elements for the switch, labels, and radio buttons. The component maintains a local state to keep track of the selected value and provides a method to handle changes to the selection. It renders a set of radio buttons and labels for each value, and a selection span that visually indicates the current selection. The position of the selection span is updated based on the selected value to provide a visual indication of the current selection to the user. + +10. **ValidationFramework.js**: + - Description: Defines a class called `ValidationFramework` for validating form inputs. + - Classes: + - `ValidationFramework`: A class to handle form validation. + - Methods: + - `validate`: Validates the form data based on the defined rules. + - `isValid`: Checks if the form data is valid. + - `getErrors`: Retrieves the validation errors. + - Functions: + - `validateField`: Validates a single form field based on the defined rules. + - `validateForm`: Validates the entire form based on the defined rules. + + +11. **ConfigForm.js**: + - Description: Defines a React component for rendering a configuration form. + +12. **ContextMain.js**: + - Description: Defines the main context for the application using React's Context API. + - Exports: + - `ContextMain`: The main context created using `React.createContext()`. + - `ContextMainProvider`: A provider component for `ContextMain` that holds the state and methods for managing authentication, filters, model comparisons, test comparisons, and status. + - State: + - `auth`: An object representing authentication state. + - `filters`: An object representing filter state. + - `validFilterValues`: A state for holding valid filter values, initially set to `null`. + - `compareModels`: An object representing the state for comparing models. + - `compareTests`: An object representing the state for comparing tests. + - `status`: A string representing the status, initially set to an empty string. + + +13. **datastore.js**: + - Description: Contains functions for interacting with the data store. + - Functions: + - `fetchData`: Fetches data from the data store. + - `saveData`: Saves data to the data store. + +14. **ErrorDialog.js**: + - Description: Defines a React component called `ErrorDialog` for displaying error messages in a dialog. + + +15. **globals.js**: + - Description: Contains global variables and constants used across the application. + - Variables: + - `DevMode`: A boolean indicating whether the application is in development mode. Set to `false` for production. + - `baseUrl`: The base URL for the validation service. + - `querySizeLimit`: The maximum size for queries. + - `collaboratoryOrigin`: The origin URL for the collaboratory. + - `hashChangedTopic`: The topic for hash change events in the community app. + - `updateSettingsTopic`: The topic for updating settings in the community app. + - `isParent`: A boolean indicating whether the current window is a parent window. + - `isIframe`: A boolean indicating whether the current window is an iframe. + - `isFramedApp`: A boolean indicating whether the current app is framed. + - `settingsDelimiter`: The delimiter for settings, set to a comma. + - `filterCommonKeys`: Common filter keys for both models and tests. + - `ADMIN_PROJECT_ID`: The project ID for admin. + - `corsProxy`: The URL of the CORS proxy to use. + - Functions: + - `updateHash(value)`: Updates the hash in the URL and posts a message to the parent window if the app is framed. + +16. **globals-staging.js**: + - Description: Contains staging global variables and constants used across the application, similar to globals.js but for the staging environment. + +17. **index.js**: + - Description: Entry point of the application where the React app is rendered. + - Functions: + - `registerServiceWorker`: Registers the service worker for offline caching. + - `renderApp`: Renders the React app. + +18. **Introduction.js**: + - Description: Defines a React component called `Introduction` for displaying an introduction section. + +19. **LoadingIndicator.js**: + - Description: Defines a React component called `LoadingIndicator` for rendering a loading indicator. + +20. **LoadingIndicatorModal.js**: + - Description: Defines a React component called `LoadingIndicatorModal` for rendering a modal with a loading indicator. + +21. **Markdown.js**: + - Description: The `Markdown.js` file contains utility functions for working with Markdown content. It exports a function `renderMarkdown` which takes a Markdown string as an argument and returns HTML string using the `marked` library. + +22. **ModelAddForm.js**: + - Description: The `ModelAddForm.js` file defines a React component named `ModelAddForm` for adding a new model. It imports various components and libraries such as React, Material-UI components, and custom components. The `ModelAddForm` component contains form fields for entering model details and has methods for handling form submission and validation. + +23. **ModelDetail.js**: + - Description: The `ModelDetail.js` file defines a `ModelDetail` React component for displaying detailed information about a model. + - Key Points: + 1. **Import Statements**: Libraries and components such as React, PropTypes, Material-UI components, and custom components like `ModelDetailHeader`, `ModelDetailContent`, etc., are imported. + 2. **Styles**: A `styles` constant is defined for styling elements within the component using Material-UI's styling solution. + 3. **TabPanel and MyDialogTitle Functions**: Functional components for rendering tab panels and a custom dialog title bar are defined. + 4. **ModelDetail Class**: + - The class extends `React.Component` and initializes state variables like `tabValue`, `results`, `loadingResult`, etc., in the constructor. + - Methods like `updateCurrentModelData`, `checkCompareStatus`, `addModelCompare`, `removeModelCompare`, etc., are defined for various functionalities. + - The `render` method defines the JSX structure of the component which includes a dialog with various tabs for displaying different pieces of information about the model. + 5. **PropTypes and Export**: + - PropTypes are defined for `ModelDetail` to enforce the type of props that must be passed. + - The `ModelDetail` component is exported as the default export of the module, wrapped with `withSnackbar` and `withStyles` higher-order components for snackbar notifications and custom styles, respectively. + + +24. **ModelDetailContent.js**: + - Description: Defines a React component called `ModelDetailContent` for rendering the content of the model detail view. + +25. **ModelDetailHeader.js**: + - Description: Defines a React component called `ModelDetailHeader` for rendering the header of the model detail view. + +26. **ModelDetailMetadata.js**: + - Description: Defines a React component called `ModelDetailMetadata` for rendering the metadata of a model in the detail view. + +27. **ModelEditForm.js**: + - Description: Defines a React component called `ModelEditForm` for editing an existing model. + +28. **ModelInstanceAddForm.js**: + - Description: Defines a React component called `ModelInstanceAddForm` for adding a new model instance. + +29. **ModelInstanceArrayOfForms.js**: + - Description: Defines a React component called `ModelInstanceArrayOfForms` for rendering an array of model instance forms. + +30. **ModelInstanceEditForm.js**: + - Description: Defines a React component called `ModelInstanceEditForm` for editing an existing model instance. + +31. **ModelInstanceForm.js**: + - Description: Defines a React component called `ModelInstanceForm` for rendering a model instance form. + +32. **ModelResultOverview.js**: + - Description: Defines a React component called `ModelResultOverview` for displaying an overview of model results. + +33. **ModelTable.js**: + - Description: Defines a React component called `ModelTable` for rendering a table of models. + +34. **MUIDataTableCustomRowToolbar.js**: + - Description: Defines a custom row toolbar component used in the Material-UI DataTable. + +35. **MUIDataTableCustomToolbar.js**: + - Description: Defines a custom toolbar component used in the Material-UI DataTable. + +36. **MultipleSelect.js**: + - Description: Defines a React component called `MultipleSelect` for rendering a multiple select input field. + +37. **PersonSelect.js**: + - Description: Defines a React component called `PersonSelect` for rendering a person select input field. + +38. **ResultDetail.js**: + - Description: Defines a React component called `ResultDetail` for displaying detailed information about a test result. + +39. **ResultDetailContent.js**: + - Description: Defines a React component called `ResultDetailContent` for rendering the content of the result detail view. + +40. **ResultDetailHeader.js**: + - Description: Defines a React component called `ResultDetailHeader` for rendering the header of the result detail view. + +41. **ResultGraphs.js**: + - Description: Defines a React component called `ResultGraphs` for displaying graphs related to a test result. + + +# Directories structure + +/src +├── /components +│ ├── /Auth +│ │ ├── auth.js +│ │ └── AuthWidget.js +│ ├── /Forms +│ │ ├── ConfigForm.js +│ │ ├── ModelAddForm.js +│ │ ├── ModelEditForm.js +│ │ ├── ModelInstanceAddForm.js +│ │ ├── ModelInstanceEditForm.js +│ │ ├── ModelInstanceForm.js +│ │ ├── TestAddForm.js +│ │ ├── TestEditForm.js +│ │ ├── TestInstanceAddForm.js +│ │ ├── TestInstanceEditForm.js +│ │ └── TestInstanceForm.js +│ ├── /Layout +│ │ ├── ConfigDisplaySimple.js +│ │ ├── ConfigDisplayTop.js +│ │ ├── ConfigDisplayTop.js +│ │ ├── ErrorDialog.js +│ │ ├── LoadingIndicator.js +│ │ ├── LoadingIndicatorModal.js +│ │ ├── Markdown.js +│ │ ├── MUIDataTableCustomRowToolbar.js +│ │ ├── MUIDataTableCustomToolbar.js +│ │ └── SearchBar.js +│ ├── /Model +│ │ ├── ModelDetail.js +│ │ ├── ModelDetailContent.js +│ │ ├── ModelDetailHeader.js +│ │ ├── ModelDetailMetadata.js +│ │ ├── ModelResultOverview.js +│ │ └── ModelTable.js +│ ├── /Result +│ │ ├── ResultDetail.js +│ │ ├── ResultDetailContent.js +│ │ ├── ResultDetailHeader.js +│ │ ├── ResultGraphs.js +│ │ ├── ResultModelTestInfo.js +│ │ └── ResultRelatedFiles.js +│ ├── /Compare +│ │ ├── CompareMultiGraphs.js +│ │ └── CompareMultiResults.js +│ ├── /Select +│ │ ├── MultipleSelect.js +│ │ ├── PersonSelect.js +│ │ └── SingleSelect.js +│ ├── ColoredCircularProgress.js +│ ├── SwitchMultiWay.js +│ └── ContextMain.js +├── /services +│ └── datastore.js +├── /utils +│ ├── theme.js +│ └── utils.js +├── globals-staging.js +├── globals.js +├── Introduction.js +├── ValidationFramework.js +├── App.css +├── index.js +├── setupTests.js +└── ViewSelected.js \ No newline at end of file diff --git a/apps/model_catalog/docs/developers_guide.md b/apps/model_catalog/docs/developers_guide.md index 90b2a46..b3899f1 100644 --- a/apps/model_catalog/docs/developers_guide.md +++ b/apps/model_catalog/docs/developers_guide.md @@ -34,11 +34,43 @@ $ npm start Open [http://localhost:3000](http://localhost:3000) to view it in the browser. -## Running tests +## Running Tests -### Unit and integration tests +### Unit and Integration Tests -[TODO] +The project employs [Jest](https://jestjs.io/) alongside [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to facilitate unit and integration testing. This section delineates the procedure to craft and execute tests for the `ValidationFramework` component: + +1. **Dependency Installation**: + Prior to writing tests, ensure that all requisite testing libraries and dependencies are installed in your project. Use the following command for installation: + +```bash + $ npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event +``` +2. **Test File Creation**: + Initiate the testing process by creating a new test file named `ComponentName.test.js` in the same directory as the other tests : `../src/tests/`. + +3. **Test Writing**: + Within `ComponentName.test.js`, commence writing tests to ascertain the functionality of the `ComponentName` component. For instance, tests could be written to verify form validation logic and form submission behavior. + +4. **Test Execution**: + With the tests written, execute them by running the designated command in your terminal. This command triggers Jest, which autonomously locates and runs all files with a `.test.js` suffix. + +```bash + $ npm test +``` + +5. **Test Result Inspection**: + Post test execution, Jest furnishes a summary of the test outcomes in the terminal. For a more detailed insight into the test results, a coverage report can be generated and reviewed using the following command: + +```bash + $ npm test -- --coverage +``` + +6. **Test Debugging**: + In case of test failures, utilize the error messages and stack traces provided by Jest to identify and rectify the issues. Debugging tools and additional Jest features can be employed to further investigate and resolve testing anomalies. + +7. **Test Refinement**: + Based on the test results and debugging, refine your tests to ensure they cover all scenarios and edge cases. This iterative process enhances the robustness and reliability of your tests. ### System and end-to-end tests diff --git a/apps/model_catalog/package-lock.json b/apps/model_catalog/package-lock.json index 772e6c1..f9b718d 100644 --- a/apps/model_catalog/package-lock.json +++ b/apps/model_catalog/package-lock.json @@ -12,6 +12,7 @@ "@material-ui/icons": "^4.5.1", "@material-ui/lab": "^4.0.0-alpha.61", "axios": "^0.21.1", + "cross-env": "^7.0.3", "eslint-config-react-app": "^5.2.1", "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.1", @@ -7221,6 +7222,23 @@ "sha.js": "^2.4.8" } }, + "node_modules/cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dependencies": { + "cross-spawn": "^7.0.1" + }, + "bin": { + "cross-env": "src/bin/cross-env.js", + "cross-env-shell": "src/bin/cross-env-shell.js" + }, + "engines": { + "node": ">=10.14", + "npm": ">=6", + "yarn": ">=1" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -33289,6 +33307,14 @@ "sha.js": "^2.4.8" } }, + "cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "requires": { + "cross-spawn": "^7.0.1" + } + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", diff --git a/apps/model_catalog/package.json b/apps/model_catalog/package.json index fdc2b31..b137b71 100644 --- a/apps/model_catalog/package.json +++ b/apps/model_catalog/package.json @@ -3,10 +3,15 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", "@material-ui/core": "^4.11.1", "@material-ui/icons": "^4.5.1", "@material-ui/lab": "^4.0.0-alpha.61", + "@mui/material": "^5.14.11", + "@mui/styles": "^5.14.11", "axios": "^0.21.1", + "cross-env": "^7.0.3", "eslint-config-react-app": "^5.2.1", "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.1", @@ -23,8 +28,8 @@ "notistack": "^0.9.17", "plotly.js": "^1.57.1", "prop-types": "^15.7.2", - "react": "^16.14.0", - "react-dom": "^16.14.0", + "react": "^17.0.0", + "react-dom": "^17.0.0", "react-lines-ellipsis": "^0.15.0", "react-markdown": "^4.3.1", "react-mathjax": "^1.0.1", @@ -36,7 +41,7 @@ "styled-components": "^5.2.1" }, "scripts": { - "start": "HTTPS=true react-scripts start", + "start": "cross-env HTTPS=true react-scripts --openssl-legacy-provider start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", @@ -60,7 +65,11 @@ ] }, "devDependencies": { + "@testing-library/jest-dom": "^5.14.1", + "@testing-library/react": "^11.2.7", + "@testing-library/user-event": "^12.8.3", "cypress": "^7.2.0", + "jest": "^26.6.0", "prettier": "^2.3.0", "react-hot-loader": "^4.13.0", "start-server-and-test": "^1.12.2" diff --git a/apps/model_catalog/src/Introduction.js b/apps/model_catalog/src/Introduction.js index 91ad6af..847887f 100644 --- a/apps/model_catalog/src/Introduction.js +++ b/apps/model_catalog/src/Introduction.js @@ -22,7 +22,7 @@ import { yellow } from "@material-ui/core/colors"; import Plotly from "plotly.js"; import createPlotlyComponent from "react-plotly.js/factory"; import { corsProxy, filterKeys } from "./globals"; -import { formatLabel } from "./utils"; +import { formatLabel } from "./utils/utils"; import "./App.css"; const ResponsiveEllipsis = responsiveHOC()(LinesEllipsis); diff --git a/apps/model_catalog/src/ValidationFramework.js b/apps/model_catalog/src/ValidationFramework.js index 6ba0568..b104267 100644 --- a/apps/model_catalog/src/ValidationFramework.js +++ b/apps/model_catalog/src/ValidationFramework.js @@ -15,21 +15,21 @@ import Paper from "@material-ui/core/Paper"; import axios from "axios"; import _ from "lodash"; -import { datastore } from "./datastore"; -import ModelTable from "./ModelTable"; -import TestTable from "./TestTable"; -import ModelDetail from "./ModelDetail"; -import TestDetail from "./TestDetail"; -import CompareMultiResults from "./CompareMultiResults"; -import ModelAddForm from "./ModelAddForm"; -import TestAddForm from "./TestAddForm"; -import ConfigForm from "./ConfigForm"; +import { datastore } from "./services/datastore"; +import ModelTable from "./components/model/ModelTable"; +import TestTable from "./components/test/TestTable"; +import ModelDetail from "./components/model/ModelDetail"; +import TestDetail from "./components/test/TestDetail"; +import CompareMultiResults from "./components/compare/CompareMultiResults"; +import ModelAddForm from "./components/forms/ModelAddForm"; +import TestAddForm from "./components/forms/TestAddForm"; +import ConfigForm from "./components/forms/ConfigForm"; import Introduction from "./Introduction"; -import ConfigDisplaySimple from "./ConfigDisplaySimple"; -import LoadingIndicator from "./LoadingIndicator"; -import ResultDetail from "./ResultDetail"; -import ErrorDialog from "./ErrorDialog"; +import ConfigDisplaySimple from "./components/layout/ConfigDisplaySimple"; +import LoadingIndicator from "./components/layout/LoadingIndicator"; +import ResultDetail from "./components/result/ResultDetail"; +import ErrorDialog from "./components/layout/ErrorDialog"; import { DevMode, collaboratoryOrigin, @@ -44,12 +44,12 @@ import { updateHash, baseUrl } from "./globals"; -import { isUUID, showNotification } from "./utils"; +import { isUUID, showNotification } from "./utils/utils"; import ContextMain from "./ContextMain"; -import Theme from "./theme"; +import Theme from "./utils/theme"; import { withSnackbar } from "notistack"; -import WarningBox from "./WarningBox"; -import AuthWidget from "./AuthWidget"; +import WarningBox from "./components/layout/WarningBox"; +import AuthWidget from "./components/auth/AuthWidget"; // if working on the appearance/layout set globals.DevMode=true // to avoid loading the models and tests over the network every time; diff --git a/apps/model_catalog/src/ViewSelected.js b/apps/model_catalog/src/ViewSelected.js index a037094..a02a870 100644 --- a/apps/model_catalog/src/ViewSelected.js +++ b/apps/model_catalog/src/ViewSelected.js @@ -12,8 +12,8 @@ import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableContainer from "@material-ui/core/TableContainer"; import TableRow from "@material-ui/core/TableRow"; -import Theme from "./theme"; -import { formatValue, formatLabel, copyToClipboard } from "./utils"; +import Theme from "./utils/theme"; +import { formatValue, formatLabel, copyToClipboard } from "./utils/utils"; import { withSnackbar } from "notistack"; function EntityParameter(props) { diff --git a/apps/model_catalog/src/ColoredCircularProgress.js b/apps/model_catalog/src/components/ColoredCircularProgress.js similarity index 95% rename from apps/model_catalog/src/ColoredCircularProgress.js rename to apps/model_catalog/src/components/ColoredCircularProgress.js index de21f1f..16446af 100644 --- a/apps/model_catalog/src/ColoredCircularProgress.js +++ b/apps/model_catalog/src/components/ColoredCircularProgress.js @@ -1,7 +1,7 @@ import React, { Component } from "react"; import { withStyles } from "@material-ui/core/styles"; import CircularProgress from "@material-ui/core/CircularProgress"; -import Theme from "./theme"; +import Theme from "../utils/theme"; class ColoredCircularProgress extends Component { render() { diff --git a/apps/model_catalog/src/AuthWidget.js b/apps/model_catalog/src/components/auth/AuthWidget.js similarity index 96% rename from apps/model_catalog/src/AuthWidget.js rename to apps/model_catalog/src/components/auth/AuthWidget.js index 892072a..6243e74 100644 --- a/apps/model_catalog/src/AuthWidget.js +++ b/apps/model_catalog/src/components/auth/AuthWidget.js @@ -3,7 +3,7 @@ import Button from "@material-ui/core/Button"; import IconButton from "@material-ui/core/IconButton"; import PersonIcon from '@material-ui/icons/Person'; import Tooltip from "@material-ui/core/Tooltip"; -import ContextMain from "./ContextMain"; +import ContextMain from "../../ContextMain"; function AuthWidget(props) { diff --git a/apps/model_catalog/src/auth.js b/apps/model_catalog/src/components/auth/auth.js similarity index 100% rename from apps/model_catalog/src/auth.js rename to apps/model_catalog/src/components/auth/auth.js diff --git a/apps/model_catalog/src/CompareMultiGraphs.js b/apps/model_catalog/src/components/compare/CompareMultiGraphs.js similarity index 99% rename from apps/model_catalog/src/CompareMultiGraphs.js rename to apps/model_catalog/src/components/compare/CompareMultiGraphs.js index 145ab6a..7bd3b1e 100644 --- a/apps/model_catalog/src/CompareMultiGraphs.js +++ b/apps/model_catalog/src/components/compare/CompareMultiGraphs.js @@ -9,9 +9,9 @@ import Switch from "@material-ui/core/Switch"; import Plotly from "plotly.js"; import React from "react"; import createPlotlyComponent from "react-plotly.js/factory"; -import { updateHash } from "./globals"; -import ResultDetail from "./ResultDetail"; -import Theme from "./theme"; +import { updateHash } from "../../globals"; +import ResultDetail from "../result/ResultDetail"; +import Theme from "../../utils/theme"; const ToggleSwitch = withStyles({ switchBase: { diff --git a/apps/model_catalog/src/CompareMultiResults.js b/apps/model_catalog/src/components/compare/CompareMultiResults.js similarity index 99% rename from apps/model_catalog/src/CompareMultiResults.js rename to apps/model_catalog/src/components/compare/CompareMultiResults.js index bb3a8a9..f02de79 100644 --- a/apps/model_catalog/src/CompareMultiResults.js +++ b/apps/model_catalog/src/components/compare/CompareMultiResults.js @@ -36,15 +36,15 @@ import axios from "axios"; import { withSnackbar } from "notistack"; import PropTypes from "prop-types"; import React from "react"; -import { datastore } from "./datastore"; +import { datastore } from "../../services/datastore"; import CompareMultiGraphs from "./CompareMultiGraphs"; -import ContextMain from "./ContextMain"; -import { updateHash } from "./globals"; -import LoadingIndicator from "./LoadingIndicator"; -import ResultDetail from "./ResultDetail"; -import ResultGraphs from "./ResultGraphs"; -import Theme from "./theme"; -import { formatTimeStampToCompact, roundFloat } from "./utils"; +import ContextMain from "../../ContextMain"; +import { updateHash } from "../../globals"; +import LoadingIndicator from "../layout/LoadingIndicator"; +import ResultDetail from "../result/ResultDetail"; +import ResultGraphs from "../result/ResultGraphs"; +import Theme from "../../utils/theme"; +import { formatTimeStampToCompact, roundFloat } from "../../utils/utils"; import styled from "styled-components"; const StyledTableRow = styled(TableRow)(({ theme }) => ({ diff --git a/apps/model_catalog/src/ConfigForm.js b/apps/model_catalog/src/components/forms/ConfigForm.js similarity index 97% rename from apps/model_catalog/src/ConfigForm.js rename to apps/model_catalog/src/components/forms/ConfigForm.js index 74f1fea..25b20c2 100644 --- a/apps/model_catalog/src/ConfigForm.js +++ b/apps/model_catalog/src/components/forms/ConfigForm.js @@ -5,18 +5,18 @@ import DialogTitle from "@material-ui/core/DialogTitle"; import DialogContent from "@material-ui/core/DialogContent"; import DialogActions from "@material-ui/core/DialogActions"; import Button from "@material-ui/core/Button"; -import MultipleSelect from "./MultipleSelect"; -import SwitchMultiWay from "./SwitchMultiWay"; +import MultipleSelect from "../select/MultipleSelect"; +import SwitchMultiWay from "../../SwitchMultiWay"; import Box from "@material-ui/core/Box"; -import Theme from "./theme"; +import Theme from "../../utils/theme"; import { displayValid, filterKeys, filterModelKeys, filterTestKeys, -} from "./globals"; -import ContextMain from "./ContextMain"; +} from "../../globals"; +import ContextMain from "../../ContextMain"; export default class ConfigForm extends React.Component { static contextType = ContextMain; diff --git a/apps/model_catalog/src/ModelAddForm.js b/apps/model_catalog/src/components/forms/ModelAddForm.js similarity index 97% rename from apps/model_catalog/src/ModelAddForm.js rename to apps/model_catalog/src/components/forms/ModelAddForm.js index 13ff215..89205f5 100644 --- a/apps/model_catalog/src/ModelAddForm.js +++ b/apps/model_catalog/src/components/forms/ModelAddForm.js @@ -19,16 +19,16 @@ import axios from "axios"; import PropTypes from "prop-types"; import React from "react"; -import { datastore } from "./datastore"; -import ContextMain from "./ContextMain"; -import ErrorDialog from "./ErrorDialog"; -import { filterModelKeys } from "./globals"; -import { replaceEmptyStringsWithNull } from "./utils"; -import LoadingIndicatorModal from "./LoadingIndicatorModal"; +import { datastore } from "../../services/datastore"; +import ContextMain from "../../ContextMain"; +import ErrorDialog from "../layout/ErrorDialog"; +import { filterModelKeys } from "../../globals"; +import { replaceEmptyStringsWithNull } from "../../utils/utils"; +import LoadingIndicatorModal from "../layout/LoadingIndicatorModal"; import ModelInstanceArrayOfForms from "./ModelInstanceArrayOfForms"; -import PersonSelect from "./PersonSelect"; -import SingleSelect from "./SingleSelect"; -import Theme from "./theme"; +import PersonSelect from "../select/PersonSelect"; +import SingleSelect from "../select/SingleSelect"; +import Theme from "../../utils/theme"; let aliasAxios = null; diff --git a/apps/model_catalog/src/ModelEditForm.js b/apps/model_catalog/src/components/forms/ModelEditForm.js similarity index 97% rename from apps/model_catalog/src/ModelEditForm.js rename to apps/model_catalog/src/components/forms/ModelEditForm.js index 2a4e38e..d12a4a6 100644 --- a/apps/model_catalog/src/ModelEditForm.js +++ b/apps/model_catalog/src/components/forms/ModelEditForm.js @@ -17,15 +17,15 @@ import axios from "axios"; import PropTypes from "prop-types"; import React from "react"; -import { datastore } from "./datastore"; -import ContextMain from "./ContextMain"; -import ErrorDialog from "./ErrorDialog"; -import { filterModelKeys } from "./globals"; -import { replaceEmptyStringsWithNull } from "./utils"; -import LoadingIndicatorModal from "./LoadingIndicatorModal"; -import PersonSelect from "./PersonSelect"; -import SingleSelect from "./SingleSelect"; -import Theme from "./theme"; +import { datastore } from "../../services/datastore"; +import ContextMain from "../../ContextMain"; +import ErrorDialog from "../layout/ErrorDialog"; +import { filterModelKeys } from "../../globals"; +import { replaceEmptyStringsWithNull } from "../../utils/utils"; +import LoadingIndicatorModal from "../layout/LoadingIndicatorModal"; +import PersonSelect from "../select/PersonSelect"; +import SingleSelect from "../select/SingleSelect"; +import Theme from "../../utils/theme"; let aliasAxios = null; diff --git a/apps/model_catalog/src/ModelInstanceAddForm.js b/apps/model_catalog/src/components/forms/ModelInstanceAddForm.js similarity index 95% rename from apps/model_catalog/src/ModelInstanceAddForm.js rename to apps/model_catalog/src/components/forms/ModelInstanceAddForm.js index c117f0c..c6dfa0c 100644 --- a/apps/model_catalog/src/ModelInstanceAddForm.js +++ b/apps/model_catalog/src/components/forms/ModelInstanceAddForm.js @@ -8,13 +8,13 @@ import Grid from "@material-ui/core/Grid"; import axios from "axios"; import PropTypes from "prop-types"; import React from "react"; -import ContextMain from "./ContextMain"; -import ErrorDialog from "./ErrorDialog"; -import { datastore } from "./datastore"; -import { replaceEmptyStringsWithNull } from "./utils"; -import LoadingIndicatorModal from "./LoadingIndicatorModal"; +import ContextMain from "../../ContextMain"; +import ErrorDialog from "../layout/ErrorDialog"; +import { datastore } from "../../services/datastore"; +import { replaceEmptyStringsWithNull } from "../../utils/utils"; +import LoadingIndicatorModal from "../layout/LoadingIndicatorModal"; import ModelInstanceArrayOfForms from "./ModelInstanceArrayOfForms"; -import Theme from "./theme"; +import Theme from "../../utils/theme"; let versionAxios = null; diff --git a/apps/model_catalog/src/ModelInstanceArrayOfForms.js b/apps/model_catalog/src/components/forms/ModelInstanceArrayOfForms.js similarity index 100% rename from apps/model_catalog/src/ModelInstanceArrayOfForms.js rename to apps/model_catalog/src/components/forms/ModelInstanceArrayOfForms.js diff --git a/apps/model_catalog/src/ModelInstanceEditForm.js b/apps/model_catalog/src/components/forms/ModelInstanceEditForm.js similarity index 96% rename from apps/model_catalog/src/ModelInstanceEditForm.js rename to apps/model_catalog/src/components/forms/ModelInstanceEditForm.js index c3f1a3a..a2572ed 100644 --- a/apps/model_catalog/src/ModelInstanceEditForm.js +++ b/apps/model_catalog/src/components/forms/ModelInstanceEditForm.js @@ -8,13 +8,13 @@ import Grid from "@material-ui/core/Grid"; import axios from "axios"; import PropTypes from "prop-types"; import React from "react"; -import ContextMain from "./ContextMain"; -import ErrorDialog from "./ErrorDialog"; -import { datastore } from "./datastore"; -import { replaceEmptyStringsWithNull } from "./utils"; -import LoadingIndicatorModal from "./LoadingIndicatorModal"; +import ContextMain from "../../ContextMain"; +import ErrorDialog from "../layout/ErrorDialog"; +import { datastore } from "../../services/datastore"; +import { replaceEmptyStringsWithNull } from "../../utils/utils"; +import LoadingIndicatorModal from "../layout/LoadingIndicatorModal"; import ModelInstanceArrayOfForms from "./ModelInstanceArrayOfForms"; -import Theme from "./theme"; +import Theme from "../../utils/theme"; let versionAxios = null; diff --git a/apps/model_catalog/src/ModelInstanceForm.js b/apps/model_catalog/src/components/forms/ModelInstanceForm.js similarity index 96% rename from apps/model_catalog/src/ModelInstanceForm.js rename to apps/model_catalog/src/components/forms/ModelInstanceForm.js index 7fa92d8..fd338f7 100644 --- a/apps/model_catalog/src/ModelInstanceForm.js +++ b/apps/model_catalog/src/components/forms/ModelInstanceForm.js @@ -2,9 +2,9 @@ import React from "react"; import Grid from "@material-ui/core/Grid"; import TextField from "@material-ui/core/TextField"; -import SingleSelect from "./SingleSelect"; -import { filterModelInstanceKeys } from "./globals"; -import ContextMain from "./ContextMain"; +import SingleSelect from "../select/SingleSelect"; +import { filterModelInstanceKeys } from "../../globals"; +import ContextMain from "../../ContextMain"; export default class ModelInstanceForm extends React.Component { static contextType = ContextMain; diff --git a/apps/model_catalog/src/TestAddForm.js b/apps/model_catalog/src/components/forms/TestAddForm.js similarity index 97% rename from apps/model_catalog/src/TestAddForm.js rename to apps/model_catalog/src/components/forms/TestAddForm.js index cc51c62..4e8ed94 100644 --- a/apps/model_catalog/src/TestAddForm.js +++ b/apps/model_catalog/src/components/forms/TestAddForm.js @@ -17,16 +17,16 @@ import axios from "axios"; import PropTypes from "prop-types"; import React from "react"; -import { datastore } from "./datastore"; -import ContextMain from "./ContextMain"; -import ErrorDialog from "./ErrorDialog"; -import { filterTestKeys } from "./globals"; -import { replaceEmptyStringsWithNull } from "./utils"; -import LoadingIndicatorModal from "./LoadingIndicatorModal"; -import PersonSelect from "./PersonSelect"; -import SingleSelect from "./SingleSelect"; +import { datastore } from "../../services/datastore"; +import ContextMain from "../../ContextMain"; +import ErrorDialog from "../layout/ErrorDialog"; +import { filterTestKeys } from "../../globals"; +import { replaceEmptyStringsWithNull } from "../../utils/utils"; +import LoadingIndicatorModal from "../layout/LoadingIndicatorModal"; +import PersonSelect from "../select/PersonSelect"; +import SingleSelect from "../select/SingleSelect"; import TestInstanceArrayOfForms from "./TestInstanceArrayOfForms"; -import Theme from "./theme"; +import Theme from "../../utils/theme"; let aliasAxios = null; diff --git a/apps/model_catalog/src/TestEditForm.js b/apps/model_catalog/src/components/forms/TestEditForm.js similarity index 97% rename from apps/model_catalog/src/TestEditForm.js rename to apps/model_catalog/src/components/forms/TestEditForm.js index 74bb8f7..41a9699 100644 --- a/apps/model_catalog/src/TestEditForm.js +++ b/apps/model_catalog/src/components/forms/TestEditForm.js @@ -16,15 +16,15 @@ import RadioButtonUncheckedIcon from "@material-ui/icons/RadioButtonUnchecked"; import axios from "axios"; import PropTypes from "prop-types"; import React from "react"; -import ContextMain from "./ContextMain"; -import ErrorDialog from "./ErrorDialog"; -import { filterTestKeys } from "./globals"; -import { datastore } from "./datastore"; -import { replaceEmptyStringsWithNull } from "./utils"; -import LoadingIndicatorModal from "./LoadingIndicatorModal"; -import PersonSelect from "./PersonSelect"; -import SingleSelect from "./SingleSelect"; -import Theme from "./theme"; +import ContextMain from "../../ContextMain"; +import ErrorDialog from "../layout/ErrorDialog"; +import { filterTestKeys } from "../../globals"; +import { datastore } from "../../services/datastore"; +import { replaceEmptyStringsWithNull } from "../../utils/utils"; +import LoadingIndicatorModal from "../layout/LoadingIndicatorModal"; +import PersonSelect from "../select/PersonSelect"; +import SingleSelect from "../select/SingleSelect"; +import Theme from "../../utils/theme"; let aliasAxios = null; diff --git a/apps/model_catalog/src/TestInstanceAddForm.js b/apps/model_catalog/src/components/forms/TestInstanceAddForm.js similarity index 95% rename from apps/model_catalog/src/TestInstanceAddForm.js rename to apps/model_catalog/src/components/forms/TestInstanceAddForm.js index 5e60fc4..12bf809 100644 --- a/apps/model_catalog/src/TestInstanceAddForm.js +++ b/apps/model_catalog/src/components/forms/TestInstanceAddForm.js @@ -8,13 +8,13 @@ import Box from "@material-ui/core/Box"; import axios from "axios"; import PropTypes from "prop-types"; import React from "react"; -import ErrorDialog from "./ErrorDialog"; -import { datastore } from "./datastore"; -import { replaceEmptyStringsWithNull } from "./utils"; +import ErrorDialog from "../layout/ErrorDialog"; +import { datastore } from "../../services/datastore"; +import { replaceEmptyStringsWithNull } from "../../utils/utils"; import TestInstanceArrayOfForms from "./TestInstanceArrayOfForms"; -import ContextMain from "./ContextMain"; -import Theme from "./theme"; -import LoadingIndicatorModal from "./LoadingIndicatorModal"; +import ContextMain from "../../ContextMain"; +import Theme from "../../utils/theme"; +import LoadingIndicatorModal from "../layout/LoadingIndicatorModal"; let versionAxios = null; diff --git a/apps/model_catalog/src/TestInstanceArrayOfForms.js b/apps/model_catalog/src/components/forms/TestInstanceArrayOfForms.js similarity index 94% rename from apps/model_catalog/src/TestInstanceArrayOfForms.js rename to apps/model_catalog/src/components/forms/TestInstanceArrayOfForms.js index 7581088..791bd10 100644 --- a/apps/model_catalog/src/TestInstanceArrayOfForms.js +++ b/apps/model_catalog/src/components/forms/TestInstanceArrayOfForms.js @@ -1,5 +1,5 @@ import React from "react"; -import TestInstanceForm from "./TestInstanceForm"; +import TestInstanceForm from "../../TestInstanceForm"; export default class TestInstanceArrayOfForms extends React.Component { constructor(props) { diff --git a/apps/model_catalog/src/TestInstanceEditForm.js b/apps/model_catalog/src/components/forms/TestInstanceEditForm.js similarity index 95% rename from apps/model_catalog/src/TestInstanceEditForm.js rename to apps/model_catalog/src/components/forms/TestInstanceEditForm.js index 3224852..387e59e 100644 --- a/apps/model_catalog/src/TestInstanceEditForm.js +++ b/apps/model_catalog/src/components/forms/TestInstanceEditForm.js @@ -8,13 +8,13 @@ import Box from "@material-ui/core/Box"; import axios from "axios"; import PropTypes from "prop-types"; import React from "react"; -import ErrorDialog from "./ErrorDialog"; -import { datastore } from "./datastore"; -import { replaceEmptyStringsWithNull } from "./utils"; +import ErrorDialog from "../layout/ErrorDialog"; +import { datastore } from "../../services/datastore"; +import { replaceEmptyStringsWithNull } from "../../utils/utils"; import TestInstanceArrayOfForms from "./TestInstanceArrayOfForms"; -import ContextMain from "./ContextMain"; -import Theme from "./theme"; -import LoadingIndicatorModal from "./LoadingIndicatorModal"; +import ContextMain from "../../ContextMain"; +import Theme from "../../utils/theme"; +import LoadingIndicatorModal from "../layout/LoadingIndicatorModal"; let versionAxios = null; diff --git a/apps/model_catalog/src/ConfigDisplaySimple.js b/apps/model_catalog/src/components/layout/ConfigDisplaySimple.js similarity index 96% rename from apps/model_catalog/src/ConfigDisplaySimple.js rename to apps/model_catalog/src/components/layout/ConfigDisplaySimple.js index cc96f5a..753f136 100644 --- a/apps/model_catalog/src/ConfigDisplaySimple.js +++ b/apps/model_catalog/src/components/layout/ConfigDisplaySimple.js @@ -14,8 +14,8 @@ import MicIcon from "@material-ui/icons/Mic"; import DonutLargeIcon from "@material-ui/icons/DonutLarge"; import PeopleIcon from "@material-ui/icons/People"; -import { formatLabel } from "./utils"; -import { filterKeys, filterModelKeys, filterTestKeys } from "./globals"; +import { formatLabel } from "../../utils/utils"; +import { filterKeys, filterModelKeys, filterTestKeys } from "../../globals"; const iconLookup = { // todo: replace these with some more meaningful, custom icons diff --git a/apps/model_catalog/src/ConfigDisplayTop.js b/apps/model_catalog/src/components/layout/ConfigDisplayTop.js similarity index 96% rename from apps/model_catalog/src/ConfigDisplayTop.js rename to apps/model_catalog/src/components/layout/ConfigDisplayTop.js index d3b2a59..f4d66b2 100644 --- a/apps/model_catalog/src/ConfigDisplayTop.js +++ b/apps/model_catalog/src/components/layout/ConfigDisplayTop.js @@ -7,10 +7,10 @@ import AccordionSummary from "@material-ui/core/AccordionSummary"; import AccordionDetails from "@material-ui/core/AccordionDetails"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import SettingsIcon from "@material-ui/icons/Settings"; -import Theme from "./theme"; +import Theme from "../../utils/theme"; -import { formatLabel } from "./utils"; -import { filterKeys, filterModelKeys, filterTestKeys } from "./globals"; +import { formatLabel } from "../../utils/utils"; +import { filterKeys, filterModelKeys, filterTestKeys } from "../../globals"; export default function ConfigDisplayTop(props) { let showFilters = {}; diff --git a/apps/model_catalog/src/ErrorDialog.js b/apps/model_catalog/src/components/layout/ErrorDialog.js similarity index 95% rename from apps/model_catalog/src/ErrorDialog.js rename to apps/model_catalog/src/components/layout/ErrorDialog.js index 334e468..dba20cf 100644 --- a/apps/model_catalog/src/ErrorDialog.js +++ b/apps/model_catalog/src/components/layout/ErrorDialog.js @@ -5,8 +5,8 @@ import DialogContent from "@material-ui/core/DialogContent"; import DialogActions from "@material-ui/core/DialogActions"; import Typography from "@material-ui/core/Typography"; import Button from "@material-ui/core/Button"; -import { reformatErrorMessage } from "./utils"; -import ContextMain from "./ContextMain"; +import { reformatErrorMessage } from "../../utils/utils"; +import ContextMain from "../../ContextMain"; const addLineBreaks = (string) => diff --git a/apps/model_catalog/src/LoadingIndicator.js b/apps/model_catalog/src/components/layout/LoadingIndicator.js similarity index 100% rename from apps/model_catalog/src/LoadingIndicator.js rename to apps/model_catalog/src/components/layout/LoadingIndicator.js diff --git a/apps/model_catalog/src/LoadingIndicatorModal.js b/apps/model_catalog/src/components/layout/LoadingIndicatorModal.js similarity index 92% rename from apps/model_catalog/src/LoadingIndicatorModal.js rename to apps/model_catalog/src/components/layout/LoadingIndicatorModal.js index d5102ef..d4623b2 100644 --- a/apps/model_catalog/src/LoadingIndicatorModal.js +++ b/apps/model_catalog/src/components/layout/LoadingIndicatorModal.js @@ -1,6 +1,6 @@ import Dialog from "@material-ui/core/Dialog"; import React from "react"; -import ColoredCircularProgress from "./ColoredCircularProgress"; +import ColoredCircularProgress from "../ColoredCircularProgress"; export default function LoadingIndicatorModal(props) { return ( diff --git a/apps/model_catalog/src/MUIDataTableCustomRowToolbar.js b/apps/model_catalog/src/components/layout/MUIDataTableCustomRowToolbar.js similarity index 100% rename from apps/model_catalog/src/MUIDataTableCustomRowToolbar.js rename to apps/model_catalog/src/components/layout/MUIDataTableCustomRowToolbar.js diff --git a/apps/model_catalog/src/MUIDataTableCustomToolbar.js b/apps/model_catalog/src/components/layout/MUIDataTableCustomToolbar.js similarity index 97% rename from apps/model_catalog/src/MUIDataTableCustomToolbar.js rename to apps/model_catalog/src/components/layout/MUIDataTableCustomToolbar.js index 3919a42..27a5545 100644 --- a/apps/model_catalog/src/MUIDataTableCustomToolbar.js +++ b/apps/model_catalog/src/components/layout/MUIDataTableCustomToolbar.js @@ -4,7 +4,7 @@ import Tooltip from "@material-ui/core/Tooltip"; import FlipIcon from "@material-ui/icons/Flip"; import AddIcon from "@material-ui/icons/Add"; import { withStyles } from "@material-ui/core/styles"; -import ContextMain from "./ContextMain"; +import ContextMain from "../../ContextMain"; const defaultToolbarStyles = { iconButton: {}, diff --git a/apps/model_catalog/src/Markdown.js b/apps/model_catalog/src/components/layout/Markdown.js similarity index 100% rename from apps/model_catalog/src/Markdown.js rename to apps/model_catalog/src/components/layout/Markdown.js diff --git a/apps/model_catalog/src/SearchBar.js b/apps/model_catalog/src/components/layout/SearchBar.js similarity index 100% rename from apps/model_catalog/src/SearchBar.js rename to apps/model_catalog/src/components/layout/SearchBar.js diff --git a/apps/model_catalog/src/WarningBox.js b/apps/model_catalog/src/components/layout/WarningBox.js similarity index 100% rename from apps/model_catalog/src/WarningBox.js rename to apps/model_catalog/src/components/layout/WarningBox.js diff --git a/apps/model_catalog/src/ModelDetail.js b/apps/model_catalog/src/components/model/ModelDetail.js similarity index 98% rename from apps/model_catalog/src/ModelDetail.js rename to apps/model_catalog/src/components/model/ModelDetail.js index 38c7c43..716fc5e 100644 --- a/apps/model_catalog/src/ModelDetail.js +++ b/apps/model_catalog/src/components/model/ModelDetail.js @@ -18,23 +18,23 @@ import { withSnackbar } from "notistack"; import axios from "axios"; -import { DevMode, ADMIN_PROJECT_ID } from "./globals"; -import { datastore } from "./datastore"; -import Theme from "./theme"; -import ContextMain from "./ContextMain"; -import { showNotification, formatAuthors } from "./utils"; +import { DevMode, ADMIN_PROJECT_ID } from "../../globals"; +import { datastore } from "../../services/datastore"; +import Theme from "../../utils/theme"; +import ContextMain from "../../ContextMain"; +import { showNotification, formatAuthors } from "../../utils/utils"; import ModelDetailHeader from "./ModelDetailHeader"; import ModelDetailContent from "./ModelDetailContent"; import ModelDetailMetadata from "./ModelDetailMetadata"; import ModelResultOverview from "./ModelResultOverview"; -import ResultGraphs from "./ResultGraphs"; +import ResultGraphs from "../result/ResultGraphs"; // if working on the appearance/layout set globals.DevMode=true // to avoid loading the models and tests over the network every time; // instead we use the local test_data var result_data = {}; if (DevMode) { - result_data = require("./dev_data/sample_model_results.json"); + result_data = require("../../dev_data/sample_model_results.json"); } const styles = (theme) => ({ diff --git a/apps/model_catalog/src/ModelDetailContent.js b/apps/model_catalog/src/components/model/ModelDetailContent.js similarity index 98% rename from apps/model_catalog/src/ModelDetailContent.js rename to apps/model_catalog/src/components/model/ModelDetailContent.js index be55172..fe40957 100644 --- a/apps/model_catalog/src/ModelDetailContent.js +++ b/apps/model_catalog/src/components/model/ModelDetailContent.js @@ -9,18 +9,18 @@ import EditIcon from "@material-ui/icons/Edit"; import RemoveFromQueueIcon from "@material-ui/icons/RemoveFromQueue"; import { withSnackbar } from "notistack"; import React from "react"; -import ContextMain from "./ContextMain"; -import ErrorDialog from "./ErrorDialog"; -import LoadingIndicator from "./LoadingIndicator"; -import Markdown from "./Markdown"; -import ModelInstanceAddForm from "./ModelInstanceAddForm"; -import ModelInstanceEditForm from "./ModelInstanceEditForm"; -import Theme from "./theme"; +import ContextMain from "../../ContextMain"; +import ErrorDialog from "../layout/ErrorDialog"; +import LoadingIndicator from "../layout/LoadingIndicator"; +import Markdown from "../layout/Markdown"; +import ModelInstanceAddForm from "../forms/ModelInstanceAddForm"; +import ModelInstanceEditForm from "../forms/ModelInstanceEditForm"; +import Theme from "../../utils/theme"; import { copyToClipboard, formatTimeStampAsDate, showNotification, -} from "./utils"; +} from "../../utils/utils"; import Avatar from "@material-ui/core/Avatar"; diff --git a/apps/model_catalog/src/ModelDetailHeader.js b/apps/model_catalog/src/components/model/ModelDetailHeader.js similarity index 97% rename from apps/model_catalog/src/ModelDetailHeader.js rename to apps/model_catalog/src/components/model/ModelDetailHeader.js index 8ab2fbe..aa72df9 100644 --- a/apps/model_catalog/src/ModelDetailHeader.js +++ b/apps/model_catalog/src/components/model/ModelDetailHeader.js @@ -10,17 +10,17 @@ import PublicIcon from "@material-ui/icons/Public"; import RemoveFromQueueIcon from "@material-ui/icons/RemoveFromQueue"; import { withSnackbar } from "notistack"; import React from "react"; -import ContextMain from "./ContextMain"; -import ErrorDialog from "./ErrorDialog"; -import ModelEditForm from "./ModelEditForm"; -import ModelAddForm from "./ModelAddForm"; -import WarningBox from "./WarningBox"; -import Theme from "./theme"; +import ContextMain from "../../ContextMain"; +import ErrorDialog from "../layout/ErrorDialog"; +import ModelEditForm from "../forms/ModelEditForm"; +import ModelAddForm from "../forms/ModelAddForm"; +import WarningBox from "../layout/WarningBox"; +import Theme from "../../utils/theme"; import { copyToClipboard, formatTimeStampAsDate, showNotification, -} from "./utils"; +} from "../../utils/utils"; function AccessibilityIcon(props) { if (props.private) { diff --git a/apps/model_catalog/src/ModelDetailMetadata.js b/apps/model_catalog/src/components/model/ModelDetailMetadata.js similarity index 98% rename from apps/model_catalog/src/ModelDetailMetadata.js rename to apps/model_catalog/src/components/model/ModelDetailMetadata.js index 9c2ed72..9b9376b 100644 --- a/apps/model_catalog/src/ModelDetailMetadata.js +++ b/apps/model_catalog/src/components/model/ModelDetailMetadata.js @@ -4,7 +4,7 @@ import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; import Tooltip from "@material-ui/core/Tooltip"; -import Theme from "./theme"; +import Theme from "../../utils/theme"; function MetadataItem(props) { if (props.value) { diff --git a/apps/model_catalog/src/ModelResultOverview.js b/apps/model_catalog/src/components/model/ModelResultOverview.js similarity index 99% rename from apps/model_catalog/src/ModelResultOverview.js rename to apps/model_catalog/src/components/model/ModelResultOverview.js index 19f3867..e57d0d3 100644 --- a/apps/model_catalog/src/ModelResultOverview.js +++ b/apps/model_catalog/src/components/model/ModelResultOverview.js @@ -10,11 +10,11 @@ import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Tooltip from "@material-ui/core/Tooltip"; import React from "react"; -import { updateHash } from "./globals"; -import LoadingIndicator from "./LoadingIndicator"; -import ResultDetail from "./ResultDetail"; -import Theme from "./theme"; -import { formatTimeStampToCompact, roundFloat } from "./utils"; +import { updateHash } from "../../globals"; +import LoadingIndicator from "../layout/LoadingIndicator"; +import ResultDetail from "../result/ResultDetail"; +import Theme from "../../utils/theme"; +import { formatTimeStampToCompact, roundFloat } from "../../utils/utils"; import styled from "styled-components"; const StyledTableRow = styled(TableRow)(({ theme }) => ({ diff --git a/apps/model_catalog/src/ModelTable.js b/apps/model_catalog/src/components/model/ModelTable.js similarity index 96% rename from apps/model_catalog/src/ModelTable.js rename to apps/model_catalog/src/components/model/ModelTable.js index e532b50..d310545 100644 --- a/apps/model_catalog/src/ModelTable.js +++ b/apps/model_catalog/src/components/model/ModelTable.js @@ -2,13 +2,13 @@ import React from "react"; import MUIDataTable from "mui-datatables"; import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles"; -import { datastore } from "./datastore"; -import { formatAuthors, downloadJSON, showNotification } from "./utils"; -import MUIDataTableCustomToolbar from "./MUIDataTableCustomToolbar"; -import CustomToolbarSelect from "./MUIDataTableCustomRowToolbar"; -import ViewSelected from "./ViewSelected"; -import Theme from "./theme"; -import ContextMain from "./ContextMain"; +import { datastore } from "../../services/datastore"; +import { formatAuthors, downloadJSON, showNotification } from "../../utils/utils"; +import MUIDataTableCustomToolbar from "../layout/MUIDataTableCustomToolbar"; +import CustomToolbarSelect from "../layout/MUIDataTableCustomRowToolbar"; +import ViewSelected from "../../ViewSelected"; +import Theme from "../../utils/theme"; +import ContextMain from "../../ContextMain"; import { withSnackbar } from "notistack"; class ModelTable extends React.Component { diff --git a/apps/model_catalog/src/ResultDetail.js b/apps/model_catalog/src/components/result/ResultDetail.js similarity index 97% rename from apps/model_catalog/src/ResultDetail.js rename to apps/model_catalog/src/components/result/ResultDetail.js index 5c679cc..803665e 100644 --- a/apps/model_catalog/src/ResultDetail.js +++ b/apps/model_catalog/src/components/result/ResultDetail.js @@ -14,14 +14,14 @@ import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; import Box from "@material-ui/core/Box"; -import Theme from "./theme"; -import ContextMain from "./ContextMain"; +import Theme from "../../utils/theme"; +import ContextMain from "../../ContextMain"; import ResultDetailHeader from "./ResultDetailHeader"; import ResultDetailContent from "./ResultDetailContent"; import ResultRelatedFiles from "./ResultRelatedFiles"; import ResultModelTestInfo from "./ResultModelTestInfo"; -import { datastore } from "./datastore"; -import { updateHash } from "./globals"; +import { datastore } from "../../services/datastore"; +import { updateHash } from "../../globals"; const styles = (theme) => ({ root: { diff --git a/apps/model_catalog/src/ResultDetailContent.js b/apps/model_catalog/src/components/result/ResultDetailContent.js similarity index 98% rename from apps/model_catalog/src/ResultDetailContent.js rename to apps/model_catalog/src/components/result/ResultDetailContent.js index 66941e2..0ed7afa 100644 --- a/apps/model_catalog/src/ResultDetailContent.js +++ b/apps/model_catalog/src/components/result/ResultDetailContent.js @@ -3,7 +3,7 @@ import Box from "@material-ui/core/Box"; import Grid from "@material-ui/core/Grid"; import { withSnackbar } from "notistack"; import React from "react"; -import { copyToClipboard, formatTimeStampToLongString } from "./utils"; +import { copyToClipboard, formatTimeStampToLongString } from "../../utils/utils"; // function ResultParameter(props) { // if (props.value) { diff --git a/apps/model_catalog/src/ResultDetailHeader.js b/apps/model_catalog/src/components/result/ResultDetailHeader.js similarity index 98% rename from apps/model_catalog/src/ResultDetailHeader.js rename to apps/model_catalog/src/components/result/ResultDetailHeader.js index 051f324..8048f7f 100644 --- a/apps/model_catalog/src/ResultDetailHeader.js +++ b/apps/model_catalog/src/components/result/ResultDetailHeader.js @@ -1,10 +1,10 @@ import React from "react"; import Grid from "@material-ui/core/Grid"; import { Typography } from "@material-ui/core"; -import { formatTimeStampToLongString, copyToClipboard } from "./utils"; +import { formatTimeStampToLongString, copyToClipboard } from "../../utils/utils"; import { withSnackbar } from "notistack"; -import LoadingIndicator from "./LoadingIndicator"; -import Theme from "./theme"; +import LoadingIndicator from "../layout/LoadingIndicator"; +import Theme from "../../utils/theme"; class ResultDetailHeader extends React.Component { render() { diff --git a/apps/model_catalog/src/ResultGraphs.js b/apps/model_catalog/src/components/result/ResultGraphs.js similarity index 99% rename from apps/model_catalog/src/ResultGraphs.js rename to apps/model_catalog/src/components/result/ResultGraphs.js index 16829b8..fdcfd28 100644 --- a/apps/model_catalog/src/ResultGraphs.js +++ b/apps/model_catalog/src/components/result/ResultGraphs.js @@ -14,10 +14,10 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import Plotly from "plotly.js"; import React from "react"; import createPlotlyComponent from "react-plotly.js/factory"; -import { updateHash } from "./globals"; -import LoadingIndicator from "./LoadingIndicator"; +import { updateHash } from "../../globals"; +import LoadingIndicator from "../layout/LoadingIndicator"; import ResultDetail from "./ResultDetail"; -import Theme from "./theme"; +import Theme from "../../utils/theme"; function ResultsFiguresTestIntance(props) { const Plot = createPlotlyComponent(Plotly); diff --git a/apps/model_catalog/src/ResultModelTestInfo.js b/apps/model_catalog/src/components/result/ResultModelTestInfo.js similarity index 99% rename from apps/model_catalog/src/ResultModelTestInfo.js rename to apps/model_catalog/src/components/result/ResultModelTestInfo.js index 92ded5a..da5ead0 100644 --- a/apps/model_catalog/src/ResultModelTestInfo.js +++ b/apps/model_catalog/src/components/result/ResultModelTestInfo.js @@ -14,9 +14,9 @@ import TableRow from "@material-ui/core/TableRow"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import { withSnackbar } from "notistack"; import React from "react"; -import Markdown from "./Markdown"; -import Theme from "./theme"; -import { copyToClipboard, formatLabel, formatValue } from "./utils"; +import Markdown from "../layout/Markdown"; +import Theme from "../../utils/theme"; +import { copyToClipboard, formatLabel, formatValue } from "../../utils/utils"; import styled from "styled-components"; const StyledTableRow = styled(TableRow)(({ theme }) => ({ diff --git a/apps/model_catalog/src/ResultRelatedFiles.js b/apps/model_catalog/src/components/result/ResultRelatedFiles.js similarity index 98% rename from apps/model_catalog/src/ResultRelatedFiles.js rename to apps/model_catalog/src/components/result/ResultRelatedFiles.js index 618d70d..637f887 100644 --- a/apps/model_catalog/src/ResultRelatedFiles.js +++ b/apps/model_catalog/src/components/result/ResultRelatedFiles.js @@ -8,11 +8,11 @@ import Link from "@material-ui/core/Link"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import axios from "axios"; import React from "react"; -import Theme from "./theme"; -import ContextMain from "./ContextMain"; -import { copyToClipboard } from "./utils"; +import Theme from "../../utils/theme"; +import ContextMain from "../../ContextMain"; +import { copyToClipboard } from "../../utils/utils"; import { withSnackbar } from "notistack"; -import { corsProxy } from "./globals"; +import { corsProxy } from "../../globals"; var filesize = require("filesize"); diff --git a/apps/model_catalog/src/MultipleSelect.js b/apps/model_catalog/src/components/select/MultipleSelect.js similarity index 97% rename from apps/model_catalog/src/MultipleSelect.js rename to apps/model_catalog/src/components/select/MultipleSelect.js index 9949e1b..015f5f6 100644 --- a/apps/model_catalog/src/MultipleSelect.js +++ b/apps/model_catalog/src/components/select/MultipleSelect.js @@ -8,7 +8,7 @@ import ListItemText from "@material-ui/core/ListItemText"; import Select from "@material-ui/core/Select"; import Checkbox from "@material-ui/core/Checkbox"; -import { formatLabel } from "./utils"; +import { formatLabel } from "../../utils/utils"; const useStyles = makeStyles((theme) => ({ formControl: { diff --git a/apps/model_catalog/src/PersonSelect.js b/apps/model_catalog/src/components/select/PersonSelect.js similarity index 100% rename from apps/model_catalog/src/PersonSelect.js rename to apps/model_catalog/src/components/select/PersonSelect.js diff --git a/apps/model_catalog/src/SingleSelect.js b/apps/model_catalog/src/components/select/SingleSelect.js similarity index 97% rename from apps/model_catalog/src/SingleSelect.js rename to apps/model_catalog/src/components/select/SingleSelect.js index c2ad0da..aa115df 100644 --- a/apps/model_catalog/src/SingleSelect.js +++ b/apps/model_catalog/src/components/select/SingleSelect.js @@ -5,7 +5,7 @@ import FormControl from "@material-ui/core/FormControl"; import TextField from "@material-ui/core/TextField"; import Autocomplete from '@material-ui/lab/Autocomplete'; -import { formatLabel } from "./utils"; +import { formatLabel } from "../../utils/utils"; const useStyles = makeStyles((theme) => ({ formControl: { diff --git a/apps/model_catalog/src/TestDetail.js b/apps/model_catalog/src/components/test/TestDetail.js similarity index 98% rename from apps/model_catalog/src/TestDetail.js rename to apps/model_catalog/src/components/test/TestDetail.js index d8c5719..e758f30 100644 --- a/apps/model_catalog/src/TestDetail.js +++ b/apps/model_catalog/src/components/test/TestDetail.js @@ -18,23 +18,23 @@ import { withSnackbar } from "notistack"; import axios from "axios"; -import { DevMode, ADMIN_PROJECT_ID } from "./globals"; -import { datastore } from "./datastore"; -import Theme from "./theme"; -import ContextMain from "./ContextMain"; -import { showNotification, formatAuthors } from "./utils"; +import { DevMode, ADMIN_PROJECT_ID } from "../../globals"; +import { datastore } from "../../services/datastore"; +import Theme from "../../utils/theme"; +import ContextMain from "../../ContextMain"; +import { showNotification, formatAuthors } from "../../utils/utils"; import TestDetailHeader from "./TestDetailHeader"; import TestDetailContent from "./TestDetailContent"; import TestDetailMetadata from "./TestDetailMetadata"; import TestResultOverview from "./TestResultOverview"; -import ResultGraphs from "./ResultGraphs"; +import ResultGraphs from "../result/ResultGraphs"; // if working on the appearance/layout set globals.DevMode=true // to avoid loading the models and tests over the network every time; // instead we use the local test_data var result_data = {}; if (DevMode) { - result_data = require("./dev_data/sample_test_results.json"); + result_data = require("../../dev_data/sample_test_results.json"); } const styles = (theme) => ({ diff --git a/apps/model_catalog/src/TestDetailContent.js b/apps/model_catalog/src/components/test/TestDetailContent.js similarity index 98% rename from apps/model_catalog/src/TestDetailContent.js rename to apps/model_catalog/src/components/test/TestDetailContent.js index 8a674d6..c11c649 100644 --- a/apps/model_catalog/src/TestDetailContent.js +++ b/apps/model_catalog/src/components/test/TestDetailContent.js @@ -8,18 +8,18 @@ import EditIcon from "@material-ui/icons/Edit"; import RemoveFromQueueIcon from "@material-ui/icons/RemoveFromQueue"; import { withSnackbar } from "notistack"; import React from "react"; -import ContextMain from "./ContextMain"; -import ErrorDialog from "./ErrorDialog"; -import LoadingIndicator from "./LoadingIndicator"; -import Markdown from "./Markdown"; -import TestInstanceAddForm from "./TestInstanceAddForm"; -import TestInstanceEditForm from "./TestInstanceEditForm"; -import Theme from "./theme"; +import ContextMain from "../../ContextMain"; +import ErrorDialog from "../layout/ErrorDialog"; +import LoadingIndicator from "../layout/LoadingIndicator"; +import Markdown from "../layout/Markdown"; +import TestInstanceAddForm from "../forms/TestInstanceAddForm"; +import TestInstanceEditForm from "../forms/TestInstanceEditForm"; +import Theme from "../../utils/theme"; import { copyToClipboard, formatTimeStampToLongString, showNotification, -} from "./utils"; +} from "../../utils/utils"; function InstanceParameter(props) { if (props.value) { diff --git a/apps/model_catalog/src/TestDetailHeader.js b/apps/model_catalog/src/components/test/TestDetailHeader.js similarity index 97% rename from apps/model_catalog/src/TestDetailHeader.js rename to apps/model_catalog/src/components/test/TestDetailHeader.js index 1a0aa58..7d650a7 100644 --- a/apps/model_catalog/src/TestDetailHeader.js +++ b/apps/model_catalog/src/components/test/TestDetailHeader.js @@ -8,17 +8,17 @@ import EditIcon from "@material-ui/icons/Edit"; import RemoveFromQueueIcon from "@material-ui/icons/RemoveFromQueue"; import { withSnackbar } from "notistack"; import React from "react"; -import ContextMain from "./ContextMain"; -import ErrorDialog from "./ErrorDialog"; -import TestEditForm from "./TestEditForm"; -import TestAddForm from "./TestAddForm"; -import Theme from "./theme"; -import WarningBox from "./WarningBox"; +import ContextMain from "../../ContextMain"; +import ErrorDialog from "../layout/ErrorDialog"; +import TestEditForm from "../forms/TestEditForm"; +import TestAddForm from "../forms/TestAddForm"; +import Theme from "../../utils/theme"; +import WarningBox from "../layout/WarningBox"; import { copyToClipboard, formatTimeStampToLongString, showNotification, -} from "./utils"; +} from "../../utils/utils"; function EditButton(props) { diff --git a/apps/model_catalog/src/TestDetailMetadata.js b/apps/model_catalog/src/components/test/TestDetailMetadata.js similarity index 98% rename from apps/model_catalog/src/TestDetailMetadata.js rename to apps/model_catalog/src/components/test/TestDetailMetadata.js index ac6969e..33215d1 100644 --- a/apps/model_catalog/src/TestDetailMetadata.js +++ b/apps/model_catalog/src/components/test/TestDetailMetadata.js @@ -3,7 +3,7 @@ import Grid from "@material-ui/core/Grid"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; -import Theme from "./theme"; +import Theme from "../../utils/theme"; function MetadataItem(props) { if (props.value) { diff --git a/apps/model_catalog/src/TestResultOverview.js b/apps/model_catalog/src/components/test/TestResultOverview.js similarity index 99% rename from apps/model_catalog/src/TestResultOverview.js rename to apps/model_catalog/src/components/test/TestResultOverview.js index 310d813..a12ba46 100644 --- a/apps/model_catalog/src/TestResultOverview.js +++ b/apps/model_catalog/src/components/test/TestResultOverview.js @@ -10,11 +10,11 @@ import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Tooltip from "@material-ui/core/Tooltip"; import React from "react"; -import { updateHash } from "./globals"; -import LoadingIndicator from "./LoadingIndicator"; -import ResultDetail from "./ResultDetail"; -import Theme from "./theme"; -import { formatTimeStampToCompact, roundFloat } from "./utils"; +import { updateHash } from "../../globals"; +import LoadingIndicator from "../layout/LoadingIndicator"; +import ResultDetail from "../result/ResultDetail"; +import Theme from "../../utils/theme"; +import { formatTimeStampToCompact, roundFloat } from "../../utils/utils"; import styled from "styled-components"; const StyledTableRow = styled(TableRow)(({ theme }) => ({ diff --git a/apps/model_catalog/src/TestTable.js b/apps/model_catalog/src/components/test/TestTable.js similarity index 96% rename from apps/model_catalog/src/TestTable.js rename to apps/model_catalog/src/components/test/TestTable.js index e2b7a54..19693b8 100644 --- a/apps/model_catalog/src/TestTable.js +++ b/apps/model_catalog/src/components/test/TestTable.js @@ -2,13 +2,13 @@ import React from "react"; import MUIDataTable from "mui-datatables"; import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles"; -import { datastore } from "./datastore"; -import { formatAuthors, downloadJSON, showNotification } from "./utils"; -import MUIDataTableCustomToolbar from "./MUIDataTableCustomToolbar"; -import CustomToolbarSelect from "./MUIDataTableCustomRowToolbar"; -import ViewSelected from "./ViewSelected"; -import Theme from "./theme"; -import ContextMain from "./ContextMain"; +import { datastore } from "../../services/datastore"; +import { formatAuthors, downloadJSON, showNotification } from "../../utils/utils"; +import MUIDataTableCustomToolbar from "../layout/MUIDataTableCustomToolbar"; +import CustomToolbarSelect from "../layout/MUIDataTableCustomRowToolbar"; +import ViewSelected from "../../ViewSelected"; +import Theme from "../../utils/theme"; +import ContextMain from "../../ContextMain"; import { withSnackbar } from "notistack"; class TestTable extends React.Component { diff --git a/apps/model_catalog/src/index.js b/apps/model_catalog/src/index.js index 1d7bcd1..0f55073 100644 --- a/apps/model_catalog/src/index.js +++ b/apps/model_catalog/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import initAuth from './auth'; -import { datastore } from "./datastore"; +import initAuth from './components/auth/auth'; +import { datastore } from "./services/datastore"; import { ContextMainProvider } from "./ContextMain"; import { SnackbarProvider } from "notistack"; import ValidationFramework from "./ValidationFramework"; diff --git a/apps/model_catalog/src/datastore.js b/apps/model_catalog/src/services/datastore.js similarity index 99% rename from apps/model_catalog/src/datastore.js rename to apps/model_catalog/src/services/datastore.js index 3515ced..859801f 100644 --- a/apps/model_catalog/src/datastore.js +++ b/apps/model_catalog/src/services/datastore.js @@ -1,6 +1,6 @@ import axios from "axios"; -import { baseUrl, querySizeLimit } from "./globals"; -import { isUUID } from "./utils"; +import { baseUrl, querySizeLimit } from "../globals"; +import { isUUID } from "../utils/utils"; const buildQuery = (filterDict) => { let q = ""; diff --git a/apps/model_catalog/src/tests/ConfigDisplaySimple.test.js b/apps/model_catalog/src/tests/ConfigDisplaySimple.test.js new file mode 100644 index 0000000..d762524 --- /dev/null +++ b/apps/model_catalog/src/tests/ConfigDisplaySimple.test.js @@ -0,0 +1,69 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import ConfigDisplaySimple from "../components/layout/ConfigDisplaySimple"; + +describe("ConfigDisplaySimple", () => { + test("should render without errors with different display prop", () => { + const filters = { + species: ["Human"], + brain_region: ["Frontal Lobe"], + }; + + render(); + const brightness5Icon = screen.getByTestId("Brightness5Icon"); + expect(brightness5Icon).toBeInTheDocument(); + + render(); + const brokenImageIcon = screen.getByTestId("BrokenImageIcon"); + expect(brokenImageIcon).toBeInTheDocument(); + }); + + test("should render without errors with empty filters", () => { + const filters = {}; + + render(); + const icons = [ + "EmojiNatureIcon", + "RoomIcon", + "Brightness5Icon", + "PhotoSizeSelectLargeIcon", + "ImageSearchIcon", + "BrokenImageIcon", + "AssessmentIcon", + "MicIcon", + "DonutLargeIcon", + "PeopleIcon", + ]; + + icons.forEach((icon) => { + const renderedIcon = screen.getByTestId(icon); + expect(renderedIcon).toBeInTheDocument(); + }); + }); + + test("should render without errors with no display prop", () => { + const filters = { + species: ["Human"], + brain_region: ["Frontal Lobe"], + }; + + render(); + const icons = [ + "EmojiNatureIcon", + "RoomIcon", + "Brightness5Icon", + "PhotoSizeSelectLargeIcon", + "ImageSearchIcon", + "BrokenImageIcon", + "AssessmentIcon", + "MicIcon", + "DonutLargeIcon", + "PeopleIcon", + ]; + + icons.forEach((icon) => { + const renderedIcon = screen.getByTestId(icon); + expect(renderedIcon).toBeInTheDocument(); + }); + }); +}); diff --git a/apps/model_catalog/src/tests/ErrorDialog.test.js b/apps/model_catalog/src/tests/ErrorDialog.test.js new file mode 100644 index 0000000..0981369 --- /dev/null +++ b/apps/model_catalog/src/tests/ErrorDialog.test.js @@ -0,0 +1,100 @@ +import React from "react"; +import { render, screen, fireEvent } from "@testing-library/react"; +import ErrorDialog from "../components/layout/ErrorDialog"; + +// Mock ContextMain module with mock values for auth +import { ContextMainProvider } from "../ContextMain"; + +const renderWithProviders = (component, authValue = {}) => { + return render( + + {component} + + ); +}; + +describe("ErrorDialog", () => { + test("should render without errors with string error message", () => { + renderWithProviders( + {}} + error="An error occurred." + /> + ); + + const errorMessage = screen.getByText("An error occurred."); + expect(errorMessage).toBeInTheDocument(); + }); + + test("should render without errors with object error message", () => { + const errorObject = { + message: "An error occurred.", + details: "This is a detailed error message.", + }; + + renderWithProviders( + {}} + error={errorObject} + /> + ); + + const errorMessage = screen.getByText("An error occurred."); + expect(errorMessage).toBeInTheDocument(); + + const detailsMessage = screen.getByText("This is a detailed error message."); + expect(detailsMessage).toBeInTheDocument(); + }); + + test("should render additional message", () => { + renderWithProviders( + {}} + error="An error occurred." + additionalMessage="Please try again later." + /> + ); + + const additionalMessage = screen.getByText("Please try again later."); + expect(additionalMessage).toBeInTheDocument(); + }); + + test("should call handleErrorDialogClose when Close button is clicked", () => { + const handleCloseMock = jest.fn(); + + renderWithProviders( + + ); + + const closeButton = screen.getByText("Close"); + fireEvent.click(closeButton); + + expect(handleCloseMock).toHaveBeenCalled(); + }); + + test("should render Login button when showLoginButton is true", () => { + renderWithProviders( + {}} + error="An error occurred." + showLoginButton={true} + />, + { + auth: { + login: () => {}, + }, + } + ); + + const loginButton = screen.getByText("Login"); + expect(loginButton).toBeInTheDocument(); + }); +}); diff --git a/apps/model_catalog/src/tests/ModelDetail.test.js b/apps/model_catalog/src/tests/ModelDetail.test.js new file mode 100644 index 0000000..314b5f7 --- /dev/null +++ b/apps/model_catalog/src/tests/ModelDetail.test.js @@ -0,0 +1,53 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import ModelDetail from "../components/models/ModelDetail"; +import { ContextMainProvider } from "../ContextMain"; + +const renderWithProviders = (component, authValue = {}, compareModelsValue = {}, statusValue = "") => { + return render( + + {component} + + ); +}; + +describe("ModelDetail", () => { + test("should render without errors", () => { + renderWithProviders( + {}} + modelData={{}} + />, + { + auth: {}, + compareModels: [], + status: "", + } + ); + + const modelDetailTitle = screen.getByText("Model Detail"); + expect(modelDetailTitle).toBeInTheDocument(); + }); + + test("should render model details correctly", () => { + renderWithProviders( + {}} + modelData={{}} + />, + { + auth: {}, + compareModels: [], + status: "", + } + ); + + const modelName = screen.getByText("Model Name"); + const modelDescription = screen.getByText("Model Description"); + + expect(modelName).toBeInTheDocument(); + expect(modelDescription).toBeInTheDocument(); + }); +}); diff --git a/apps/model_catalog/src/theme.js b/apps/model_catalog/src/utils/theme.js similarity index 100% rename from apps/model_catalog/src/theme.js rename to apps/model_catalog/src/utils/theme.js diff --git a/apps/model_catalog/src/utils.js b/apps/model_catalog/src/utils/utils.js similarity index 100% rename from apps/model_catalog/src/utils.js rename to apps/model_catalog/src/utils/utils.js