Add ToastView to Python Panels #4968
Conversation
WalkthroughThe changes in this pull request involve modifications to the Changes
Possibly related PRs
Suggested reviewers
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: 8
🧹 Outside diff range and nitpick comments (4)
app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx (2)
1-10: Add JSDoc documentation for the component.The component lacks documentation explaining its purpose, props, and usage examples.
Add documentation at the top of the component:
+/** + * ToastView component that renders a Toast message based on schema configuration. + * + * @component + * @example + * ```tsx + * const schema = { + * view: { + * message: "Operation successful", + * duration: 3000, + * layout: { position: "top-right" } + * } + * }; + * + * <ToastView schema={schema} /> + * ``` + */ export default function ToastView(props) {
6-7: Consider using nullish coalescing for view default.Using the nullish coalescing operator (??) would be more appropriate than the logical OR operator (=) for defaulting the view object.
- const { view = {} } = schema; + const { view } = schema ?? {}; + const viewData = view ?? {}; - const { message, duration, layout } = view; + const { message, duration, layout } = viewData;fiftyone/operators/types.py (2)
1817-1837: Enhance documentation with layout parameter structure.The documentation should clearly specify the structure of the
layoutparameter.Add this to the Args section:
Args: message: the message to display duration (None): the duration to stay on screen in milliseconds - layout (None): the layout of the toast + layout (None): the layout of the toast. A dictionary with the following structure: + { + "vertical": str, # "top" or "bottom" + "horizontal": str, # "left", "center", or "right" + "top": str, # CSS distance from top (e.g., "200px") + }
1821-1829: Improve schema example formatting.The schema example could be more readable with proper indentation.
Apply this formatting:
schema = { - "message": "Test", - "duration": 30000, - "layout": { - "vertical": "top", - "horizontal": "center", - "top": "200px" - }, + "message": "Test", + "duration": 30000, + "layout": { + "vertical": "top", + "horizontal": "center", + "top": "200px" + } }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (5)
- app/packages/components/src/components/Toast/Toast.tsx (2 hunks)
- app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx (1 hunks)
- app/packages/core/src/plugins/SchemaIO/components/index.ts (1 hunks)
- app/packages/operators/src/types.ts (2 hunks)
- fiftyone/operators/types.py (1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
app/packages/components/src/components/Toast/Toast.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/components/ToastView.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/components/index.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.app/packages/operators/src/types.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.
🪛 Biome
app/packages/components/src/components/Toast/Toast.tsx
[error] 68-68: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 69-69: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (5)
app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx (1)
1-2: 🛠️ Refactor suggestionConsider adding prop-types for runtime validation.
While TypeScript provides compile-time type checking, adding PropTypes would provide runtime validation for better debugging.
Add PropTypes for runtime validation:
import React from "react"; import { Toast } from "@fiftyone/components"; +import PropTypes from 'prop-types'; // ... component implementation ... +ToastView.propTypes = { + schema: PropTypes.shape({ + view: PropTypes.shape({ + message: PropTypes.string, + duration: PropTypes.number, + layout: PropTypes.object + }) + }).isRequired +};Likely invalid or redundant comment.
app/packages/core/src/plugins/SchemaIO/components/index.ts (2)
53-53: LGTM! Export statement follows established conventions.The new ToastView export maintains consistency with the existing pattern and preserves alphabetical ordering.
53-53: Verify ToastView file existence.Let's ensure the referenced ToastView.tsx file exists in the components directory.
✅ Verification successful
ToastView component file exists as expected
The verification confirms that
ToastView.tsxexists at the expected locationapp/packages/core/src/plugins/SchemaIO/components/ToastView.tsx, matching the export statement in the index file.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of ToastView.tsx in the components directory # Expected: File should exist in the same directory as index.ts fd --type f "ToastView.tsx" "app/packages/core/src/plugins/SchemaIO/components"Length of output: 141
app/packages/operators/src/types.ts (2)
1199-1211: LGTM! The ToastView implementation follows the established patterns.The class is well-structured with proper TypeScript types and includes the necessary static
fromJSONmethod for serialization.
1284-1284: LGTM! ToastView is properly registered in the VIEWS constant.The addition maintains consistency with other view registrations.
…nto patch/toast-py-panels
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (2)
app/packages/components/src/components/Toast/Toast.tsx (2)
35-36: Extract magic number into a named constant.The default height of 5 is a magic number. Consider extracting it into a named constant for better maintainability and documentation.
+const DEFAULT_SNACKBAR_HEIGHT = 5; + const snackbarStyle = { - height: layout?.height || 5, + height: layout?.height || DEFAULT_SNACKBAR_HEIGHT,
Line range hint
62-65: Add proper TypeScript types to event handler.The handleClose function lacks proper TypeScript types for its parameters.
- const handleClose = (event, reason) => { + const handleClose = ( + event: React.SyntheticEvent | Event, + reason: string + ) => {
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
- app/packages/components/src/components/Toast/Toast.tsx (2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
app/packages/components/src/components/Toast/Toast.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.
🪛 Biome
app/packages/components/src/components/Toast/Toast.tsx
[error] 70-70: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 71-71: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
| height: layout?.height || 5, | ||
| ...(layout?.top && { | ||
| top: { | ||
| xs: layout.top, |
There was a problem hiding this comment.
Are these values supposed to be the same? Just checking :)
There was a problem hiding this comment.
Yeah this will conditionally add top or bottom only if they exist coming in from the Python Panel context
What changes are proposed in this pull request?
Toastcomponent to include ability to renderToastViewin Python Panel contextToastViewto Python PanelScreen.Recording.2024-10-23.at.2.01.27.AM.mov
How is this patch tested? If it is not, please explain why.
Tested locally in Python Panel context
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
Toastcomponent with optional properties for layout and button functionalities.ToastViewcomponent for displaying toast messages with customizable duration and layout.ToastViewclass for enhanced integration within the application.Bug Fixes
Documentation
ToastViewcomponent for easier access within the application.