spuru9 opened a new pull request, #28601: URL: https://github.com/apache/flink/pull/28601
## What is the purpose of the change Second of the three independent visualization-library migrations under FLINK-40033. It upgrades `d3-flame-graph` from v4 to v5 (used by the profiling flame graph on the Job Overview page). d3-flame-graph 5 is a rewrite with breaking changes in how the library is consumed, so this touches the flame-graph component, the local type stub, the build configuration and the styles. ## Brief change log - **Exports**: `flamegraph` is now the default export; color mappers moved under a `colorMapper` namespace and the built-in tooltip under a `tooltip` namespace. The component is updated accordingly (`colorMapper.offCpuColorMapper`). - **Tooltip**: v5 ships its own tooltip and invokes it as `show(event, datum)`. The old `d3-tip` integration relied on v4's `show(datum, target)` convention and no longer works, so the tooltip is switched to v5's `tooltip.defaultFlamegraphTooltip()` (keeping the same custom html). `d3-tip` is used only here, so the dependency and its local type stub are removed. - **Build**: v5's ESM entry imports its own stylesheet. The deprecated webpack `:browser` builder cannot parse a CSS import from a node_modules JS module (see [angular/angular-cli#23273](https://github.com/angular/angular-cli/issues/23273)), so the build switches to the drop-in `:browser-esbuild` builder, which bundles library CSS imports natively. Same builder options; the whole app builds cleanly. - **Styles**: v5 injects the vendor `.d3-flame-graph-tip` rules with the lazily-loaded flame graph chunk (after the global stylesheet). The Flink overrides are scoped under `body` so they keep winning (notably `z-index`, required for the tooltip to sit above the drawer). - Update the local `d3-flame-graph` type stub to the v5 exports and refresh the `NOTICE` (d3-flame-graph 4.1.3 → 5.0.0; drop `d3-tip` and its `d3-collection` / `[email protected]` transitives). ## Verifying this change - `npm run build` (now via `:browser-esbuild`) succeeds; `npm run lint` passes. - Built CSS confirms `body .d3-flame-graph-tip` (specificity 0,1,1) wins over the vendor `.d3-flame-graph-tip` (0,1,0). - Manually: open a running job → Job Overview → a vertex → Flame Graph. Confirm the flame graph renders and is interactive, the tooltip appears on hover with `<name> (<pct>%, <n> samples)` and sits above the drawer, and OFF_CPU graphs use the off-cpu color mapping. ## Does this pull request potentially affect one of the following parts: - Dependencies (does it add or upgrade a dependency): yes (web-dashboard: d3-flame-graph 4 → 5; d3-tip removed; build switched to :browser-esbuild) - The public API, i.e., is any changed class annotated with `@Public(Evolving)`: no - The serializers: no - The runtime per-record code paths (performance sensitive): no - Anything that affects deployment or recovery: no - The S3 file system connector: no ## Documentation - Does this pull request introduce a new feature? no - If yes, how is the feature documented? not applicable ## AI Usage Disclosure - [x] Claude Code -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
