feat(web): support close infobox with button [VIZ-1674] #1617
Conversation
✅ Deploy Preview for reearth-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThe changes introduce a close button to the Infobox component, enabling users to close the infobox via a new optional callback. The Crust component now provides this callback to Infobox, clearing the selected map layer when invoked. Additionally, the Tailwind CSS configuration consolidates content scanning patterns for the Crust feature directory. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Infobox
participant Crust
participant MapRef
User->>Infobox: Click CloseButton
Infobox->>Crust: onCloseInfobox callback
Crust->>MapRef: layers.select(undefined)
MapRef-->>Crust: Layer selection cleared
Crust-->>Infobox: Infobox closes
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
|
airslice
changed the title
![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
🧹 Nitpick comments (1)
web/src/beta/features/Visualizer/Crust/Infobox/index.tsx (1)
242-255: Consider conditional rendering for better UX.The close button currently renders even when
onCloseInfoboxis undefined, which could be confusing for users. Consider conditionally rendering the button.const CloseButton: FC<{ onClick?: () => void; }> = ({ onClick }) => { + if (!onClick) return null; + return ( <div className="tw-px-3 tw-pt-3 tw-flex tw-justify-end tw-text-black"> <div className="tw-cursor-pointer tw-w-5 tw-h-5 tw-flex tw-items-center tw-justify-center" onClick={onClick} > <Icon icon="close" /> </div> </div> ); };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
web/src/beta/features/Visualizer/Crust/Infobox/index.tsx(5 hunks)web/src/beta/features/Visualizer/Crust/index.tsx(3 hunks)web/tailwind.config.js(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: ci-server / ci-server-lint
- GitHub Check: ci-server / ci-server-test
- GitHub Check: ci-web / ci
- GitHub Check: Redirect rules - reearth-web
- GitHub Check: Header rules - reearth-web
- GitHub Check: Pages changed - reearth-web
🔇 Additional comments (9)
web/src/beta/features/Visualizer/Crust/index.tsx (3)
15-15: LGTM! Proper import for the new callback.The addition of
useCallbackto the React imports is necessary for the memoized close handler.
309-311: Well-implemented close handler with proper memoization.The
handleCloseInfoboxcallback correctly:
- Uses
useCallbackfor performance optimization- Has appropriate dependency on
mapRef- Clears layer selection by calling
select(undefined), which effectively closes the infobox
384-384: Properly connects the close handler to the Infobox component.The
onCloseInfoboxprop correctly passes the memoized callback to enable the close button functionality.web/tailwind.config.js (1)
9-9: Good consolidation of content patterns.Simplifying the glob patterns to
"./src/beta/features/Visualizer/Crust/**/*.{ts,tsx}"effectively covers all files in the Crust directory while reducing configuration complexity.web/src/beta/features/Visualizer/Crust/Infobox/index.tsx (5)
4-4: LGTM! Required import for the close button icon.The
Iconimport is necessary for rendering the close button.
69-69: Well-typed optional prop for close functionality.The optional
onCloseInfobox?: () => voidprop is correctly typed and allows the component to work with or without close functionality.
175-199: Excellent layout restructuring with proper separation of concerns.The new structure effectively separates:
Wrapper: Handles positioning and overall container stylingCloseButton: Provides close functionalityContent: Manages padding and scrolling behaviorThis improves maintainability and allows for better control over the infobox layout.
209-220: Good refactoring of wrapper styles.Removing padding and overflow from the
Wrapperand delegating these concerns to theContentcomponent creates a cleaner separation of responsibilities.
222-236: Well-implemented content container with proper scrolling.The
Contentcomponent correctly:
- Maintains the original padding logic
- Handles overflow with auto scrolling
- Preserves min/max height constraints
- Uses appropriate flexbox layout
Overview
Added a close button on infobox UI, close infobox when click it.
What I've done
What I haven't done
How I tested
Which point I want you to review particularly
Memo
Summary by CodeRabbit