Description:
This pull request proposes the addition of a scrollbar to the modal
window containing advanced settings when the number of input fields
exceeds the limit of the screen. This enhancement aims to improve user
experience by providing a convenient way to access all settings, even
when the available screen space is limited.
The number of inputs in the screen is limited by a variable on Utils
that can be easily changed in the future if It's needed.
The changes in this commit are purely cosmetic, as the code has been formatted with prettier to improve its readability and consistency. No functional changes have been made.
This pull request resolves a bug related to error handling when
components attempt to call the same modals within different flows. The
issue occurs due to a lack of proper validation and error handling in
the existing codebase. This bugfix aims to provide a comprehensive
solution to mitigate the problem and ensure a smoother user experience.
The code that was causing issues with file upload has been commented out for now. The code was resetting the content of a file, which was causing issues with the file upload.
🎨 style(inputListComponent): change input placeholder text to be more descriptive
The placeholder text for both input components has been changed to "Type something..." to be more descriptive and provide better guidance to the user.
🐛 fix(GenericNode): add semicolon to console.log statement
The use of eval in the code can be a security risk as it can execute arbitrary code. Using ast.literal_eval instead of eval is a safer alternative as it only evaluates a subset of Python expressions. The semicolon was added to the console.log statement to improve code consistency.
The changes in these files are purely cosmetic, fixing indentation and whitespace to improve code readability.
🔨 refactor(genericModal/index.tsx): improve code readability and add destructuring to props
The code has been refactored to improve readability and make it easier to understand. Destructuring has been added to the props to make it easier to access the values.
The `format` script has been added to the `package.json` file in the `frontend` directory. This script uses `prettier` to format all files with the extensions `.js`, `.jsx`, `.ts`, `.tsx`, `.json`, and `.md` in the `src` directory. This ensures that the codebase is consistent and follows a standard formatting style.
✨ feat(GenericNode): add ChromaIcon and fix validation status icons
🎨 style(GenericNode): refactor GenericNode component to improve readability
🐛 fix(vite.config.ts): add svgr plugin to the frontend Vite configuration
The vite-plugin-svgr dependency was added to both the root and frontend package.json files to enable the use of SVG files as React components. The GenericNode component was updated to include the ChromaIcon component and to fix the validation status icons. The component was also refactored to improve readability. The svgr plugin was added to the frontend Vite configuration to enable the use of SVG files as React components.
## Dynamic Font Size for ButtonBox Component
### Description
The ButtonBox component, which is used in the examples modal, has been
enhanced to have a dynamic font size that adjusts based on the length of
the text and the dimensions of its parent element. This improvement
ensures that the text within the ButtonBox component remains readable
and properly fits within its container.
### Changes Made
- Added a new `fontSize` state variable to track the font size within
the ButtonBox component.
- Utilized the `useEffect` hook to calculate and update the font size
dynamically.
- Implemented logic to check for both vertical and horizontal overflow
of the text within the parent container.
- Decreased the font size incrementally until the text fits within the
parent element's dimensions.
- Updated the component to apply the calculated font size to the text
element.
### Testing Done
- Manually tested the ButtonBox component with various text lengths and
parent container dimensions.
- Verified that the font size was adjusted correctly to fit the text
within the parent element without overflowing.
