[profiler] Follow the application theme - #6953
Karakatiza666 wants to merge 1 commit into
Conversation
| // cannot ride along on the next `updateGraph`. | ||
| this.cy.startBatch(); | ||
| for (const node of this.cy.nodes().toArray()) { | ||
| refreshChips(node, theme); |
There was a problem hiding this comment.
refreshChips(node, theme) defaults hovered to false, so a theme toggle made while the pointer rests on a composite replaces the expand/collapse control with the leaf count — and it stays wrong until the pointer leaves the node and comes back, since installChipButtons only rewrites on mouseover/mouseout/layoutstop.
Verified locally with a throwaway vitest on a headless graph: refreshChips(p, 'light', true) then the setTheme loop gives exactly nodeChips(true, 3, 'dark')[1] — the count chip.
Cheapest fix is to let the chip buttons own it: give installChipButtons a themeChanged observer hook that re-applies the hovered node with hovered = true, and skip that node here.
|
|
||
| /* The minimap sits on top of the graph, so it needs its own ground in either palette. */ | ||
| .visualizer-wrapper[data-diagram-theme='dark'] .visualizer-navigator { | ||
| background-color: rgba(34, 38, 43, 0.95); |
There was a problem hiding this comment.
rgba(34, 38, 43, 0.95) is DIAGRAM_PALETTES.dark.heatLow (#22262b) hand-copied into CSS, and the light rule above is the same copy of #ffffff. The palette is now exported from profiler-lib's index, so nothing pins these two together — change the dark ground in diagramTheme.ts and the minimap's panel silently drifts off the diagram it floats over. Consider setting the background from DIAGRAM_PALETTES[theme] (a style: binding or a CSS custom property on the wrapper) instead of a second literal.
|
Read the diff plus the surrounding theme plumbing (
The mechanics hold up: Gate this misses: unit tests — the checklist says "Unit tests added/updated" but no test file changed. The live switch is only exercised two PRs later (#6955's |
604c812 to
12568e6
Compare
12568e6 to
149d010
Compare
d586d71 to
718f612
Compare
718f612 to
712e7a4
Compare
712e7a4 to
51ba8db
Compare
51ba8db to
613befc
Compare
613befc to
8e2c073
Compare
The diagram was drawn from one palette in a console that has two, so it stayed light while everything around it went dark. `Visualizer.setTheme` switches the palette on a diagram already on screen: the stylesheet is rebuilt, the observers are told, and the chip images - the one piece of per-node data with the palette baked into it - are rewritten in a batch. Nothing is laid out again, so nothing moves. The prop is threaded down through `SupportBundleViewerLayout` to `ProfilerDiagram`, where it is applied from an effect of its own: the effect that builds the visualizer disposes and rebuilds it, so tracking the theme there would reparse the profile and re-run the ELK layout on every toggle. The profile viewer feeds it from `useDarkMode`. Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
8e2c073 to
dbe4e55
Compare
Part of #6895, split one commit per PR.
The diagram was drawn from one palette in a console that has two, so it
stayed light while everything around it went dark.
Visualizer.setThemeswitches the palette on a diagram already on screen: the stylesheet is
rebuilt, the observers are told, and the chip images - the one piece of
per-node data with the palette baked into it - are rewritten in a batch.
Nothing is laid out again, so nothing moves.
The prop is threaded down through
SupportBundleViewerLayoutandProfilerLayouttoProfilerDiagram, where it is applied from an effectof its own: the effect that builds the visualizer disposes and rebuilds
it, so tracking the theme there would reparse the profile and re-run the
ELK layout on every toggle. The profile viewer feeds it from
useDarkMode.Describe Manual Test Plan
Toggle the console between light and dark with a profile open. The diagram follows, and nothing moves: no relayout runs.
Verified at this commit, not just at the tip of the stack: checked out detached with
js-packages/profiler-lib/distdeleted and rebuilt from this commit's source, thenprofiler-libbun run checkandbun run test, andprofiler-layoutbun run checkandbun run test(all three vitest projects, browser suites included). All four green.Checklist
Breaking Changes?
Mark if you think the answer is yes for any of these components:
Describe Incompatible Changes
None. The change is confined to
js-packages/.