feat: add context to register and trigger bank chart controls#258
Open
amliu-jumptrading wants to merge 5 commits intomainfrom
Open
feat: add context to register and trigger bank chart controls#258amliu-jumptrading wants to merge 5 commits intomainfrom
amliu-jumptrading wants to merge 5 commits intomainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a context-based control system to enable interaction between distribution bar charts and bank chart filters. When users click on a distribution bar (specifically the Bundle/Other bars in Income Distribution), the corresponding filter in the bank chart controls is automatically triggered and focused, with visual feedback via tooltips.
Changes:
- Implemented ChartControlsContext with a ref-based callback registry pattern for registering and triggering chart controls
- Made distribution bars interactive with click handlers, tooltips, and hover effects
- Converted ToggleGroupControl from uncontrolled to controlled component with ref forwarding for programmatic focus
- Added visual feedback (tooltip with highlight, focus states, scroll-into-view) when controls are triggered externally
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/features/SlotDetails/index.tsx | Wraps SlotDetails components with ChartControlsProvider |
| src/features/SlotDetails/ChartControlsContext.tsx | Defines types and creates context for chart controls system |
| src/features/SlotDetails/ChartControlsProvider.tsx | Implements provider with ref-based callback registry |
| src/features/SlotDetails/DetailedSlotStats/FeeSection/IncomeByBundle.tsx | Adds click handler to trigger bundle filter control |
| src/features/SlotDetails/DetailedSlotStats/FeeSection/DistributionBars.tsx | Makes bars interactive with click support, tooltips, and conditional styling |
| src/features/SlotDetails/DetailedSlotStats/FeeSection/distributionBars.module.css | Adds clickable styles with hover effects, removes overflow:hidden |
| src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/useChartControl.ts | Custom hook for registering controls and managing tooltip state |
| src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/index.tsx | Implements bundle control registration, focus handling, and scroll behavior |
| src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/ToggleGroupControl.tsx | Converts to controlled component with ref forwarding and tooltip support |
| src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/toggleGroupControl.module.css | Adds tooltip-triggered state styling and improves focus states |
| src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/chartControl.module.css | Adds tooltip styling for chart controls |
| src/colors.ts | Adds slotDetailsChartControlsTriggered color for visual feedback |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/features/SlotDetails/DetailedSlotStats/FeeSection/distributionBars.module.css
Show resolved
Hide resolved
src/features/SlotDetails/DetailedSlotStats/FeeSection/DistributionBars.tsx
Outdated
Show resolved
Hide resolved
src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/useChartControl.ts
Outdated
Show resolved
Hide resolved
src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/index.tsx
Show resolved
Hide resolved
src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/ToggleGroupControl.tsx
Show resolved
Hide resolved
src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/index.tsx
Show resolved
Hide resolved
src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/useChartControl.ts
Show resolved
Hide resolved
src/features/SlotDetails/DetailedSlotStats/FeeSection/distributionBars.module.css
Show resolved
Hide resolved
amliu-jumptrading
requested review from
asuzuki-jumptrading and
atsai-jumptrading
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/features/SlotDetails/DetailedSlotStats/FeeSection/DistributionBars.tsx
Outdated
Show resolved
Hide resolved
src/features/SlotDetails/DetailedSlotStats/FeeSection/distributionBars.module.css
Show resolved
Hide resolved
asuzuki-jumptrading
previously approved these changes
Feb 27, 2026
Collaborator
asuzuki-jumptrading
left a comment
asuzuki-jumptrading
left a comment
There was a problem hiding this comment.
This is a very clever way to not keep the filter values in the context! Nice work :D
src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/useChartControl.ts
Outdated
Show resolved
Hide resolved
src/features/SlotDetails/DetailedSlotStats/FeeSection/DistributionBars.tsx
Outdated
Show resolved
Hide resolved
src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/ToggleGroupControl.tsx
Outdated
Show resolved
Hide resolved
src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/useChartControl.ts
Show resolved
Hide resolved
amliu-jumptrading
force-pushed
the
amliu/buffer-chart-control
branch
from
a31e0cc to
03bafb0
Compare
asuzuki-jumptrading
approved these changes
Feb 28, 2026
atsai-jumptrading
approved these changes
Feb 28, 2026
Collaborator
atsai-jumptrading
left a comment
atsai-jumptrading
left a comment
There was a problem hiding this comment.
much cleaner! 🧼
| {onItemClick ? ( | ||
| <Flex | ||
| asChild | ||
| className={styles.clickable} |
Collaborator
There was a problem hiding this comment.
why do we need to make our own clickable styling? Can we not use radix button with ghost variant or the reset component?
| const closeTooltip = useCallback(() => setIsTooltipOpen(false), []); | ||
|
|
||
| useEffect(() => { | ||
| const cleanup = registerControl(key, (value) => { |
Collaborator
There was a problem hiding this comment.
could just return registerControl
| ) { | ||
| const { registerControl } = useContext(ChartControlsContext); | ||
| const updateRef = useRef(update); | ||
| useEffect(() => { |
Collaborator
There was a problem hiding this comment.
can just do this in the render without the useEffect, actually slower updating within the useEffect
| hasMinTextWidth, | ||
| }: ToggleGroupControlProps<T>) { | ||
| const [value, setValue] = useState(defaultValue); | ||
| export interface ToggleGroupControlHandle<T extends string> { |
Collaborator
There was a problem hiding this comment.
i think convention is to just call it by componentRef, as in ToggleGroupControlRef
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.