[UI v2] Add FlowRunActivityBarGraph component
#16284
Conversation
desertaxle
changed the title
FlowRunActivityBarGraph component
| initialValue: boolean | undefined = undefined, | ||
| leaveDelay = 500, | ||
| ) => { | ||
| const [internalValue, setInternalValue] = useState<boolean | undefined>( |
There was a problem hiding this comment.
q: Is there a differentiation between an undefined state and false state?
There was a problem hiding this comment.
Yes, false will cause the tooltip never to appear, and undefined allows recharts to control whether or not to display the tooltip. This implementation selectively takes over the state of the tooltip so that users can mouse over the tooltip to click on links to the flow, flow run, or deployment.
| class ResizeObserverMock { | ||
| observe() {} | ||
| unobserve() {} | ||
| disconnect() {} | ||
| } | ||
|
|
||
| global.ResizeObserver = ResizeObserverMock; |
There was a problem hiding this comment.
Is there a way to move this to tests/setup?
I'm also hitting a problem this problem with dialogs and needed to copy/paste the same logic
There was a problem hiding this comment.
Yeah, I think if you move the entire beforeAll hook into ui-v2/tests/setup.ts, then all tests should get this mock by default. If specific tests need a different mock then they should be able to override it.
Summary
This PR ports the flow run activity bar graph to the v2 UI. The bucketing algorithm from the existing UI was ported with minimal modifications (mostly to remove Vue references). The component isn't used anywhere in the app yet and this PR only adds a Storybook entry for development. The fist place this component will be used is in the deployments table.
The following customizations were made to the stock
rechartsbar graph:activestate is semi-controlled to apply an asymmetric debounce to the tooltip display. The tooltip appears instantly but disappears after a 500ms delay. The delay time can be modified, but I added this to make mousing to the tooltip easier.This PR also adds
@faker-js/fakerto enable generating randomized test data when developing with Storybook.Video
Screen.Recording.2024-12-09.at.10.39.37.AM.mov