[ui] Refactor SplitPanelContainer #20909
Conversation
|
This stack of pull requests is managed by Graphite. Learn more about stacking. Join @hellendag and the rest of your teammates on |
|
Deploy preview for dagit-storybook ready! ✅ Preview Built with commit 3e9b43c. |
|
Deploy preview for dagit-core-storybook ready! ✅ Preview Built with commit 3e9b43c. |
| const onChangeSize = useCallback( | ||
| (newValue: number) => { | ||
| window.localStorage.setItem(key, `${newValue}`); | ||
| setTrigger((current) => (current ? 0 : 1)); |
There was a problem hiding this comment.
We're already tracking the size value in localStorage, so we don't need to duplicate that in local state.
| firstPaneStyles.height = `calc(${firstSize}% - ${DIVIDER_THICKNESS}px)`; | ||
| firstPaneStyles.height = `calc(${firstSize / 100} * (100% - ${ | ||
| DIVIDER_THICKNESS + (second ? secondMinSize : 0) | ||
| }px))`; |
There was a problem hiding this comment.
The noteworthy calculation change to accommodate minimum size on the second panel.
| ? ((event.clientX - parentRect.left) * 100) / | ||
| (parentRect.width - secondMinSize - DIVIDER_THICKNESS) | ||
| : ((event.clientY - parentRect.top) * 100) / | ||
| (parentRect.height - secondMinSize - DIVIDER_THICKNESS); |
There was a problem hiding this comment.
Ensures that the divider remains in the correct position with respect to the minimums applied.
Summary & Motivation
I set out to add a minimum size for the second panel in a
SplitPanelContainer, and I fell into a refactoring rabbit hole.SplitPanelContainerto replicate its imperative API.Note that this may lead to some panel size allocations being slightly different from before, in cases where we have a minimum size for the second panel. For instance, if I set a minimum of 400px for the second panel, and the first panel is set to occupy 75% of the container, that 75% will now apply to the available size minus 400px, instead of 75% of the full container. FWIW, I don't think this will be a noticeable change for most people.
Screen.Recording.2024-03-29.at.12.07.49.mov
How I Tested These Changes
View launchpad, run page, global asset graph. Drag vertical and horizontal split panels, verify correct behavior. Verify that second-panel minimums are respected.
Test split panel contain