fix overlay z-index and overflow for panels #4956
Conversation
WalkthroughThe changes in this pull request primarily affect the Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx (1)
26-30: Approved changes with a suggestion for improvement.The changes effectively address the overlay z-index issue, which aligns with the PR objective. However, consider using a more flexible approach for setting the
zIndexvalue.Instead of hardcoding the
zIndexvalue, consider using a constant or a theme variable. This would make it easier to manage z-index values across the application. For example:import { OVERLAY_Z_INDEX } from '../constants'; // ... if (hasOverlay) { sxForOverlay.zIndex = OVERLAY_Z_INDEX; }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
- app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx (2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx (1)
Pattern
**/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.
🔇 Additional comments (2)
app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx (2)
32-32: LGTM: Correct application of overlay styling.The changes correctly apply the overlay styling to the Box component. This implementation is consistent with React and MUI best practices.
10-10: Verify the usage of the importedhasfunction.The
hasfunction is imported from 'lodash', but it's not used in the visible changes. Ensure that this function is actually used elsewhere in the file or remove the import to avoid unnecessary bundle size.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
app/packages/core/src/plugins/SchemaIO/utils/layout.ts (1)
182-187: Add JSDoc documentation for clarity.The function implementation is clean and correct, but could benefit from documentation explaining the gap multiplication factor of 8.
+/** + * Adjusts a layout dimension by subtracting the gap multiplied by 8 (converts from theme spacing units to pixels). + * @param value - The dimension value to adjust + * @param gap - The gap value in theme spacing units + * @returns The adjusted dimension value + */ export function getAdjustedLayoutDimension(value?: number, gap?: number) {
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- app/packages/core/src/plugins/SchemaIO/components/GridView.tsx (2 hunks)
- app/packages/core/src/plugins/SchemaIO/utils/layout.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
app/packages/core/src/plugins/SchemaIO/components/GridView.tsx (1)
Pattern
**/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.app/packages/core/src/plugins/SchemaIO/utils/layout.ts (1)
Pattern
**/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.
🔇 Additional comments (2)
app/packages/core/src/plugins/SchemaIO/components/GridView.tsx (2)
Line range hint
5-11: LGTM! Import changes reflect the enhanced layout utility.The renamed import
getAdjustedLayoutDimensionsbetter describes its purpose of handling both width and height calculations.
25-30: 🛠️ Refactor suggestionConsider adding fallback values for layout dimensions.
The optional chaining
props?.layout?.height/widthsuggests these values could be undefined. Consider adding default values to ensure predictable rendering behavior.Consider this improvement:
const { height, width } = getAdjustedLayoutDimensions({ - height: props?.layout?.height, - width: props?.layout?.width, + height: props?.layout?.height ?? 0, + width: props?.layout?.width ?? 0, gap: parsedGap, orientation, });Let's verify the usage of layout properties in other components:
ritch
changed the title
What changes are proposed in this pull request?
Menu overlays are not visible due to z-index clash.
How is this patch tested? If it is not, please explain why.
Tested in the new 1d animated plot panel.
Release Notes
Is this a user-facing change that should be mentioned in the release notes?
notes for FiftyOne users.
(Details in 1-2 sentences. You can just refer to another PR with a description
if this PR is part of a larger change.)
What areas of FiftyOne does this PR affect?
fiftyonePython library changesSummary by CodeRabbit
New Features
Bug Fixes