Skip to content

Bug: 2044194 Port client-side KDE mode detection from kde-widget into CommonGraph#1045

Open
kala-moz wants to merge 3 commits into
mozilla:mainfrom
kala-moz:modal-work
Open

Bug: 2044194 Port client-side KDE mode detection from kde-widget into CommonGraph#1045
kala-moz wants to merge 3 commits into
mozilla:mainfrom
kala-moz:modal-work

Conversation

@kala-moz
Copy link
Copy Markdown
Contributor

@kala-moz kala-moz commented Jun 1, 2026

See Bug 2044194

This PR adds client-side KDE mode detection by porting the pure-logic helpers (fitModesFromKde, areaFracs, assignLetters, matchModes, splitByMode) from the kde-widget into src/utils/kde.js. See Paul's example here.

It wires those helpers into CommonGraph so detected peaks render as labelled vertical markers on the KDE chart (e.g. "Base A: 12.34 (45%)"). Also adds the interactive valley-depth slider — with the threshold state lifted to RevisionRowExpandable so the upcoming mode-blurb panel can read the same modes without recomputing the KDE.

Includes unit tests for the new pure functions and updated CommonGraph tests covering the slider props and mode-overlay series.

Note: There's still more work to do like the upcoming blurb panel but didn't want to overload this PR by touching too many different files.


Deploy Link

Screenshot 2026-06-01 at 16 44 39

@netlify
Copy link
Copy Markdown

netlify Bot commented Jun 1, 2026

Deploy Preview for mozilla-perfcompare ready!

Name Link
🔨 Latest commit 1405968
🔍 Latest deploy log https://app.netlify.com/projects/mozilla-perfcompare/deploys/6a208ee1bfc6bf000863e64c
😎 Deploy Preview https://deploy-preview-1045--mozilla-perfcompare.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov
Copy link
Copy Markdown

codecov Bot commented Jun 1, 2026

Codecov Report

❌ Patch coverage is 95.00000% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 96.34%. Comparing base (6ada523) to head (1405968).

Files with missing lines Patch % Lines
src/components/CompareResults/CommonGraph.tsx 94.82% 3 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1045      +/-   ##
==========================================
+ Coverage   96.19%   96.34%   +0.14%     
==========================================
  Files         113      113              
  Lines        3311     3364      +53     
  Branches      760      772      +12     
==========================================
+ Hits         3185     3241      +56     
+ Misses        125      122       -3     
  Partials        1        1              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@kala-moz kala-moz changed the title Port client-side KDE mode detection from kde-widget into CommonGraph Bug: 2044194 Port client-side KDE mode detection from kde-widget into CommonGraph Jun 1, 2026
Copy link
Copy Markdown
Collaborator

@padenot padenot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some comments and one feature request from Denis on the perf team.

>
{Math.round(vt * 100)}%
</Typography>
</Box>
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been asked for a simple checkbox that disables the mode detection overlay, it can help in some cases. Just a checkbox that hides it.

],
};
}, [baseValues, newValues, unit, isSubtest]);
}, [baseValues, newValues, unit, isSubtest, vt]);
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this causes constant rerenders when changing the slider, causing a change in the scatter. We should memory this new vt on its own, because we don't want to recompute everything when it changes, just the modal analysis.

Comment thread src/utils/kde.js
* ub : base indices with no match (path disappeared)
* un : new indices with no match (new path appeared)
*/
export function matchModes(bLocs, bFracs, nLocs, nFracs) {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not used yet, I think used later?

unit={baseUnit || newUnit}
isSubtest={result.base_parent_signature !== null}
vt={vt}
onVtChange={setVt}
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this debounced? we all have fast computers but it should probably be debounced

: { peakLocs: [], fracs: [], letters: [] };
const newModes = nKde
? computeModeInfo(sharedX, newY, vt)
: { peakLocs: [], fracs: [], letters: [] };
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't be doing this should we? This isn't related to rendering, and can be expensive. Can we move it out, so it's not recomputed frequently?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants