This commit adds unit tests for the GenesDisplay component. The first test checks if the component renders the correct number of LinkTags based on the provided genes array. It also checks if the LinkTags have the correct text content. The second test checks if no LinkTags are rendered when the genes array is empty. These tests ensure that the GenesDisplay component behaves as expected and displays the correct information.

The LinkTag component is added to the catalog directory in the ui-dsc package. This component is a tag-style display for showing links. It takes in two properties: item (the item to link to) and route (the subroute to use, such as publication or gene). The component renders a Button component with a link to the specified route and item. It also includes an external link icon from the FontAwesomeIcon component.

The ts-pattern package is added as a dependency to the ui-dsc package. This package provides a set of utilities for working with patterns and pattern matching in TypeScript.

The StrainPhenotypeListItem component is added to the ui-dsc package. This component renders a list item for displaying information about a strain's phenotype. It includes the strain's label, associated genes, and a link to a publication if available. The component also has tests to ensure that the expected list items are included and that publications are not displayed when not passed as a prop.

The StrainPhenotypeListHeader component is added to the catalog directory in the ui-dsc package. This component represents the list of headers at the top of the phenotype display. It includes four columns: Phenotype, Notes, Assay & Environment, and Reference(s).

…enotypeListHeader component

This commit adds a new unit test file, `StrainPhenotypeListHeader.test.tsx`, which tests the rendering of the `StrainPhenotypeListHeader` component. The test verifies that the component renders the expected text for "Phenotype", "Notes", and "Assay".

This commit adds the mockStrain.ts file to the ui-dsc package. This file contains mock data for the Strain type, including examples of available strains, unavailable strains, strains with phenotypes, strains from the Genome Wide Dictyostelium Insertion bank (GWDI), and catalog available strains. The mock data is used for testing and development purposes.
The mockStrain.ts file provides a convenient way to generate realistic and consistent mock data for the Strain type, which helps in simulating different scenarios and testing various functionalities of the application.

The DetailsHeader component is added to the catalog module in the ui-dsc package. This component is used as the header at the top of every stock details page. It displays the name and ID of the stock, and includes a copy icon for the ID.

…en while fetching stock data

The DetailsLoader component is added to the catalog directory in the ui-dsc package. This component is used to display a loading screen while fetching stock data. It uses the Skeleton component from the react-loading-skeleton library to show placeholders for the content that is being loaded.

This commit adds a new file `styles.tsx` in the `catalog` directory of the `ui-dsc` package. The file contains styles for the catalog component. The styles include CSS properties for various elements such as card headers, details, list items, IDs, copy icons, and error messages. The `makeStyles` function from `@material-ui/core/styles` is used to define the styles.

The phenotypeStyles.tsx file is added to the catalog folder in the ui-dsc package. This file contains the makeStyles function from the @material-ui/core/styles library, along with styles for various elements such as paper, row, item, listHeaders, list, and button. These styles are used for the phenotype catalog component in the UI.

The new file `SearchPhenotypeListItem.test.tsx` contains unit tests for the `SearchPhenotypeListItem` component. The tests ensure that the component renders the expected list items, including the strain descriptor, associated genes, and publication link. It also includes a test to verify that the component does not include publications when not passed as a prop. These tests help ensure the correctness and reliability of the component.

… results for phenotypes

The SearchPhenotypeListItem component is added to the ui-dsc package. This component is responsible for rendering a single item in the search results for phenotypes. It displays information about a strain, including its label, associated genes, and a publication. The component also includes styling using Material-UI.

…-center repo

Previously, the incorrect file was copied from the dicty-stock-center repository and renamed StrainPhenotypeListItem. This commit brings in the correct file associated withe displaying the strain phenotype details in the StrainDetailsContainer.

…order

This commit adds a new test file, StrainPhenotypeList.test.tsx, which tests the rendering of phenotype links in alphabetical order. The test cases include different phenotypes and their expected indices in the rendered list. The test uses the render function from @testing-library/react and the MemoryRouter component from react-router-dom to render the StrainPhenotypeList component with the provided phenotypes. It then checks if the rendered phenotype links match the expected indices.

The StrainPhenotypeList component is added to the ui-dsc package. This component provides a list of phenotypes for a given strain. It uses the Material-UI Paper component for styling and renders a header component (StrainPhenotypeListHeader) and a list of phenotype items (StrainPhenotypeListItem). The phenotypes are sorted alphabetically by phenotype name using the fp-ts library.

…tem component

This commit adds a new unit test file for the StrainPhenotypeListItem component. The test ensures that the component renders correctly by checking if the expected elements and data are present in the rendered output.

The console.log statement was removed as it was no longer needed for debugging purposes.

The fp-ts dependency is added to the package.json file in the ui-dsc package. This dependency is required for some functional programming utilities and types used in the codebase.

…l' in data array

The 'name' property in the data array has been renamed to 'label' to improve clarity and consistency with the naming conventions. This change ensures that the property name accurately reflects its purpose, which is to represent the label or name of an item.

The AddToCartDialog component is added to the catalog package in the ui-dsc package. This component is responsible for displaying a dialog box when an item is added to the cart. It receives various properties such as the strain data, functions to handle checked items, show/hide the dialog, and toggle hover state. The dialog box includes a title, content, and actions.

…onality

This commit adds a new unit test for the close button functionality in the AddToCartDialog component. The test verifies that the setCheckedItems and setShowDialog functions are called when the "View Cart" button is clicked.

The test case now includes a test for the setHover function. This ensures that the setHoverSpy function is called once when clicking the close button.

This commit adds a new file `mockPhenotype.ts` which contains an array of mock data for phenotypes. Each phenotype object includes properties such as phenotype, note, assay, environment, and publication. This mock data will be used for testing and development purposes.

The StrainDetailsContainer component now includes a conditional render, indicating that it will render different components based on the stockType. Additionally, two new components, DetailsListItem and PhenotypeList, have been added to the diagram. This update improves the clarity and accuracy of the diagram by reflecting the changes made to the code.

The fees module is added to the ui-dsc package, which exports an object containing different fee values. This module will be used to calculate fees in the application.
In addition, the types export in the types.ts file is updated to include an alias for the StrainItem type as CartItem. This provides more clarity and consistency when using the types in the codebase.

The export statement for the OutlinedDropdown component is changed from default export to named export. This improves consistency with the codebase and allows for better import syntax when using the component in other files.

This commit adds a new test file `OutlinedDropdown.test.tsx` to test the functionality of the `OutlinedDropdown` component. The test verifies that the `handleChange` function is called when a menu item is clicked. It also tests that the dropdown renders correctly with the provided label, dropdown values, and initial input value.

The SecondaryButton component is added to the catalog in the ui-dsc package. This component is a customized button that uses the secondary color from the Material-UI theme. It has a different background color and hover effect compared to the default button.

The useGenotypes hook is added to the ui-dsc package. This hook takes in a string of genotypes and separates them into drug resistances and non-drug resistances. The drug resistances are determined based on a predefined set of resistance markers. This hook provides a convenient way to handle and categorize genotype data in the UI.

…drug resistances

This test ensures that the useGenotypes hook correctly separates drug resistances and non-drug resistances from a given list of genotypes. It verifies that the drug resistances are correctly identified and returned in an array, while the non-drug resistances are also correctly identified and returned in a separate array.

The GenotypesDisplay component is added to the catalog directory in the ui-dsc package. This component is responsible for organizing genotypes with non-drug resistances italicized and drug resistances at the end. It takes a list of genotypes in string format as a prop and renders the formatted genotypes accordingly. The component uses the useGenotypes hook to separate the non-drug resistances and drug resistances. The non-drug resistances are rendered in an italicized span, while the drug resistances are rendered as regular text.

…component

The added unit tests ensure that the GenotypesDisplay component correctly renders the genotypes and drug resistances. The first test checks if the genotypes are rendered in italics and in the correct order. The second test checks if the comma at the end is not included when there are no drug resistances. These tests improve the reliability and correctness of the GenotypesDisplay component.

… for StrainDetailsContainer

This commit adds a new file, StrainDetailsContainerComponentTree.md, which contains a Mermaid diagram representing the component tree for the StrainDetailsContainer component in the stock-center app. The diagram shows the relationships between the StrainDetailsContainer component and its child components, including StrainDetailsCard, Availability, AddToCartDialog, DetailsListItems, and PhenotypeList. The diagram also includes a conditional render for the StrainDetailsCard component. The diagram uses the state classDef to highlight the D3 component.

The AvailableDisplay component is added to the project. This component is responsible for displaying the available quantity of an item and allowing the user to add it to the cart. It also handles the logic for updating the quantity and showing a dialog when an item is added to the cart.

…l message

This commit adds a new test case to the AvailableDisplay component. The test checks if the capacity full message is displayed when the number of items in the cart reaches the maximum limit of 12. The test sets up the initial state of the cart with 10 items and a maximum limit of 12. It then simulates adding 2 more items to the cart and verifies that the capacity full message is rendered on the screen.

… if the cart is full

- Import the `Scalars` type from "dicty-graphql-schema" to be used later.
- Import the `pipe` function from "fp-ts/function" and the `partitionMap` and `reduce` functions from "fp-ts/Array".
- Import the `left` and `right` functions from "fp-ts/Either".
- Add a `maxItems` property to the `Cart` type to keep track of the maximum number of items allowed in the cart.
- Initialize the `maxItems` property to 12 in the `initialCart` object.
- Create a new atom `maxItemsAtom` to get the value of `maxItems` from the `cartAtom`.
- Create a new atom `isFullAtom` to check if the cart is full by comparing the sum of the

The import statement for the unused `Scalars` type from "dicty-graphql-schema" has been removed. This improves code readability and eliminates unnecessary dependencies.

This commit moves the file `testData.ts` to the /mocks folder. The file contains an array of test items that will be used for testing purposes in the UI component. The test items include an ID, summary, label, quantity, and fee.

The OutlinedDropdown component is moved from the /src/common folder to the /src folder. This component provides an outlined dropdown box that displays a list of given values. It accepts properties such as handleChange (a function called when selecting a dropdown option), dropdownValues (an array of values to display in the dropdown), inputValue (the initial value for the dropdown), and label (the input label). The component uses Material-UI components such as FormControl, InputLabel, OutlinedInput, MenuItem, and Select to create the dropdown functionality.

The import path for testItems has been updated to reflect the new location in the mocks folder. This change ensures that the test is using the correct data for testing the CartTotalCard component.

…component

The import path for the OutlinedDropdown component was incorrect. It has been fixed to import from the correct location "../OutlinedDropdown" instead of "../common/OutlinedDropdown". This ensures that the correct component is imported and used in the test file.

…nd AddToCartDialog

The commit adds three new components to the ui-dsc package: OutlinedDropdown, SecondaryButton, and AddToCartDialog. These components provide additional functionality and options for the UI.

The StrainDetailsCardHeader component is added to the catalog directory in the ui-dsc package. This component is responsible for displaying the header at the top of the card on the strain details page. It includes tabs for switching between strain details and phenotypes, as well as displaying the availability of the strain and the number of phenotypes.

…ilsCardHeader component

This commit adds unit tests for the StrainDetailsCardHeader component. The tests ensure that the component renders the expected tabs and that the handleChange function is called when a tab is clicked.

…drug resistances

This test verifies that the useGenotypes hook correctly separates drug resistances and non-drug resistances from a given list of genotypes. The genotypes string contains a combination of drug resistances and non-drug resistances. The test checks if the hook correctly separates the drug resistances into one array and the non-drug resistances into another array.

The TabPanel component is a simple wrapper for content inside of tab panels. It takes in the following properties: children (any content inside the tab panel), value (tab value), and index (index of the tab selected). The component is used to display the content of a specific tab based on the selected index.

A new unit test has been added for the TabPanel component in the ui-dsc package. The test ensures that the component renders the correct text content. This test helps to verify the correctness of the TabPanel component and ensures that it behaves as expected.

The getDepositorName utility function is added to the ui-dsc package. This function takes a Depositor object as input and returns a string representing the depositor's name. It concatenates the first name and last name if both are provided, otherwise it returns an empty string. This utility function can be used to display the depositor's name in the user interface.

This commit adds unit tests for the getDepositorName function in the utils/getDepositorName file. The tests ensure that the function correctly returns the full name of a depositor when provided with a valid depositor object, and an empty string when provided with an empty object.

The StrainDetailsCard component is added to the catalog in the ui-dsc package. This component is responsible for displaying detailed information about a strain, including its descriptor, names, summary, systematic name, characteristics, genetic modification, mutagenesis method, parental strain, plasmid, associated genes, genotype, species, depositor, and references. It also includes tabs for displaying phenotype information and a header with additional functionality such as adding the strain to a cart.

The StrainDetailsContainer component is responsible for rendering the details page for an individual strain. It fetches the necessary data using the useStrainQuery hook from the dicty-graphql-schema package. The component handles loading and error states, and renders the appropriate components based on the data received. It also sets the page title and meta description using the Helmet component from react-helmet.

The DetailsRow type is added to the types.ts file. It represents a row of details with properties for the ID, title, and content. This type will be used to display additional information in a row format.

…ve Availability component

The unused import and component "Availability" have been removed from StrainDetailsCardHeader.tsx. The cartData prop type has been updated to exclude the "quantity" property. The Availability component has been removed as it is no longer needed.

The index.ts file in the frontpage-components package now exports individual components instead of exporting them as default. This change allows consumers of the package to import specific components directly, improving code readability and reducing the need for unnecessary imports.

The "include" and "exclude" properties in the tsconfig.json file have been simplified to remove unnecessary line breaks and indentation. This improves readability and reduces the file size.

…sContainer component

The new unit test verifies that the StrainDetailsContainer component displays the expected data. It uses the MockedProvider from @apollo/client/testing to mock the GraphQL query and provide a result. The test renders the component with the necessary mocks and asserts that the loading skeleton is initially displayed. It then waits for the data to load and asserts that the strain label and depositor information are rendered correctly.

…nd VIrtualizedList.png diagrams

The commit adds three new diagrams: CatalogAppBar.png, StrainCatalogContainer.png, and VIrtualizedList.png. These diagrams are important for documenting and visualizing the stock center application.

…dicty-graphql-schema

The useQuery hook from @apollo/client has been replaced with the useStrainListQuery hook from dicty-graphql-schema. This change ensures compatibility with the latest version of the GraphQL schema and improves code maintainability.

The commented out code for the `useQuery` hook is removed as it is not being used and is unnecessary clutter in the codebase.

The `listStrainData.ts` file is a new addition to the project. It introduces a mock data generator for generating random strain data. The `generateRandomData` function generates a random strain object with properties like `id`, `label`, `summary`, and `stock`. The `generateListStrainDataOfLength` function generates an array of random strain data of a specified length using the `generateRandomData` function. This mock data generator will be used for testing and development purposes.

…ic setup and mock data

The server.js file is added to the stock-center app. It sets up an Express server with basic middleware such as body-parser for JSON parsing. It also generates mock strain data and sets up a GraphQL endpoint. The server listens on port 3003 and logs a message when it starts. The ViteExpress library is used to bind the server to the app.

…, and VIrtualizedList.png

The files CatalogAppBar.png, StrainCatalogContainer.png, and VIrtualizedList.png have been deleted. These files were no longer needed and were removed to declutter the project directory.

…le type

feat(stock-center): add "serve" script to package.json to run the server.js file

The "type" field is added to the package.json file with the value "module" to indicate that the project is using ECMAScript modules. This allows the project to use modern JavaScript features. The "serve" script is added to the package.json file to run the server.js file, which is responsible for serving the application.

…r better readability

feat(server.js): add Apollo Server for GraphQL support and define type definitions and resolvers

The imports in the server.js file have been reorganized to improve readability and maintainability. The code formatting has also been updated for consistency. Additionally, Apollo Server has been added to enable GraphQL support. Type definitions and resolvers have been defined for the GraphQL schema.

…s in CatalogTableDisplay component

The CatalogTableDisplay component now applies a hover effect to table rows, changing the background color and adding a box shadow on hover. Additionally, the font size of the table rows is now responsive, reducing in size on screens with a maximum width of 1024px.

The `listStrainData.js` file now contains a function `generateListStrainDataOfLength` that generates mock data for a list of strains. Each strain object includes an `id`, `label`, `summary`, and `inStock` property. This generator function can be used to populate the list of strains in the application for testing or development purposes.

The server.js file in the stock-center app has been removed as it is no longer needed. This file was not being used and was taking up unnecessary space in the codebase.

The dependencies "@apollo/server", "cors", and "graphql" are no longer used in the stock-center application. Removing these dependencies helps to reduce the size of the application and improve maintainability.

…d clarity

The changes were made to update the import statements and type names to match the updated type name "StrainCartItem". This improves consistency and clarity in the codebase.

A separate type for StrainItem without the PurchaseProperties has been defined to be used where the data of the strain is used but the quantity and fee is unnecessary, such as in the CatalogTableDisplay

…nd handling optional values using fp-ts library

refactor(CatalogTableDisplay.tsx): Refactor cellFunction to use pipe and fp-ts functions for better readability and maintainability

The changes in this commit introduce support for abbreviating strings and handling optional values in the CatalogTableDisplay component. The abbreviateStringToLength function is added to abbreviate strings to a specified length. The cellFunction is refactored to use the pipe function from fp-ts and the fromNullable and getOrElse functions to handle optional values in a more functional and readable way. These changes improve the code's readability, maintainability, and make it more robust when dealing with optional values.

…nd update rowFunction to use strains.length instead

The lastIndex variable was unnecessary, so it was removed. The rowFunction was updated to use strains.length instead of the lastIndex variable to determine if it is the last item. Additionally, the function name abbreviateString changed to a curried function called abbreviateStringToLength so that it could be used in a pipe.

…lated functions

The commit adds unit tests for the CatalogTableDisplay component and its related functions: abbreviateStringToLength, cellFunction, rowFunction, and CatalogTableHeader. These tests ensure that the component and functions render the expected elements and behave correctly.

The import statement for CatalogTableDisplay is removed as it is not being used in the test file. This improves code cleanliness and removes unnecessary dependencies.

…n details page when cell label is clicked

The tests were added to ensure that when the cell label is clicked, the browser navigates to the strain details page. This was achieved by rendering the necessary components and simulating a click event on the cell label. The expected behavior is that the "Strain Details" text is displayed on the page.

…component

The CatalogTableDisplay component now includes a Link component from react-router-dom to create a link to the strain details page. This allows users to click on a strain label and navigate to the corresponding strain details page for more information.

The `listStrainData.ts` file now includes a function `generateListStrainDataOfLength` that generates mock data for a list of strains. The function `generateListStrainDataOfLength` takes a length parameter and returns an array of mock strain data objects. Each object includes properties such as `id`, `label`, `summary`, and `inStock`. This mock data generator will be useful for testing and development purposes.

The handlers.ts file is added to the mocks directory in the stock-center app. It contains a mock handler for the strain list query. The handler generates mock data for the list of strains and responds with the appropriate data structure including the strains, nextCursor, and totalCount. This allows for testing and development of the strain list functionality without relying on the actual backend API.

A new file `browser.ts` has been added to the `mocks` directory in the `stock-center` app. This file sets up a Service Worker using the `msw` library and exports it as a default export. This browser mock is intended for testing purposes and allows for mocking API requests and responses in the browser environment.

The main.tsx file now includes support for a mock environment when running the application in development mode. If the VITE_APP_DEPLOY_ENV environment variable is set to "mock", the application will import and start a mock worker before rendering the main App component. This allows developers to easily test and simulate different scenarios during development.

… requests and mocking responses

The mockServiceWorker.js file is added to the public directory of the stock-center app. This file contains the implementation of a mock service worker that intercepts requests made by the client and allows for mocking responses. It also handles communication with the client and provides functionality for activating and deactivating the mocking behavior. This file is intended for development purposes only and should not be served in production.

… mocking API responses

The "mock" script has been added to the package.json file, which allows running the application in mock mode. This mode utilizes the "dev" script with the "--mode mock" flag. Additionally, the "msw" dependency has been added to enable mocking API responses. The "msw" configuration has been set to use the "public" directory as the worker directory.

…nment

A new file named .env.mock has been added to the stock-center app. This file contains a single environment variable VITE_APP_DEPLOY_ENV with the value 'mock'. This file is used for mocking the deployment environment during development and testing.

A new file named StrainCatalog.png has been added to the stock-center application's diagrams folder. This diagram provides visual representation of the strain catalog.

A new file, [id].tsx, has been added to the strains directory. This file imports the StrainDetailsContainer component from the @dictybase/ui-dsc package and exports it as the default component for displaying strain details. This addition allows for the implementation of a page that shows detailed information about a specific strain.

The StrainCatalog component is added to the strains page. This component is responsible for displaying a catalog of strains. It uses various hooks and components from the @dictybase/hook-dsc, @dictybase/ui-dsc, and dicty-graphql-schema packages to handle filtering, searching, loading, and displaying the strain catalog. The component also uses the react-router-dom package to handle search parameters in the URL.

…oolbar for clarity and consistency

The imported Toolbar component has been renamed to DictybaseToolbar to improve clarity and maintain consistency with the naming conventions used in the project.

…ead of strain/{item.id}

The link path in the CatalogTableDisplay component has been corrected to `/strains/${item.id}` instead of `strain/${item.id}` to ensure that the link points to the correct route.

The StrainDetailsContainer component is added to the UI library. This component will be used to display detailed information about a specific strain in the catalog.

…eadability and reusability

The currentCartQuantityAtom is extracted to improve code readability and reusability. It calculates the total quantity of items in the cart by summing up the quantity of each item in the strainItemsAtom. This extracted atom can now be used in other parts of the codebase where the current cart quantity is needed.

The AddToCartControl component is added to the project. It provides a button that allows users to add items to the cart. The component uses the SecondaryButton component from the @dictybase/ui-dsc library. It also utilizes state atoms from the project's state management system (jotai) to handle adding items to the cart and tracking the current cart quantity.

…logTableDisplay

fix(CatalogTableDisplay.tsx): import OutlinedDropdown component correctly

The CatalogTableDisplay component now includes the AddToCartControl component, which allows users to add items to their cart directly from the table. Additionally, the import statement for the OutlinedDropdown component has been fixed to ensure it is imported correctly.

…ay a disabled button with a tooltip when an item is not in stock

The UnavailableButton component is added to the catalog directory. This component is used to display a disabled button with a tooltip when an item is not in stock. It uses Material-UI's IconButton and Tooltip components, as well as FontAwesomeIcon for the cart and slash icons. The button is disabled and has a default color. The size of the icon and the title for the tooltip can be customized through props.

…ion to improve code readability and maintainability

The import statement for the `CartItem` type has been changed to `StrainItem` to better reflect the purpose of the type. The type declaration for the `data` prop has also been updated to use the `StrainItem` type instead of the previous inline type declaration. These changes improve code readability and maintainability by using more descriptive names and reducing duplication.

… better clarity and consistency

The CartItem type has been renamed to StrainItem to provide better clarity and consistency with the naming conventions used in the codebase. This change improves the readability and maintainability of the code.

…ter from React.ChangeEvent<{ value: unknown }> to React.ChangeEvent<HTMLInputElement> to match the actual event type

The handleChange function in the OutlinedDropdown component now correctly accepts an event of type React.ChangeEvent<HTMLInputElement> instead of React.ChangeEvent<{ value: unknown }>. This ensures that the event parameter matches the actual event type being passed to the function.

The UnavailableButton component is added to the catalog module in order to provide a button component that represents an unavailable item in the catalog. This allows for a consistent user interface when displaying unavailable items in the catalog.

…pping cart feature

The imports and state related to the shopping cart feature have been removed as they are no longer needed. This improves the codebase by removing unnecessary dependencies and reducing complexity.

…trainItem type

refactor(state.ts): change StrainItem type to include PurchaseProperties to improve clarity
refactor(state.ts): change addItemAtom to accept StrainCartItem instead of StrainItem for consistency
refactor(state.ts): change cartItems type in OrderState to use StrainCartItem instead of StrainItem for consistency

The PurchaseProperties type is no longer needed in the StrainItem type as it is not being used. The StrainItem type is updated to include the PurchaseProperties type to improve clarity and consistency. The addItemAtom is refactored to accept StrainCartItem instead of StrainItem for consistency. The cartItems type in the OrderState is changed to use StrainCartItem instead of StrainItem for consistency.

The AddQuantityToCart.tsx file is a new file that adds the AddToCartControl component. This component provides functionality to add items to a cart. It includes a dropdown to select the quantity and a button to add the selected quantity to the cart. The component uses state management with Jotai to handle the selected quantity and manage the maximum number of items that can be added to the cart.