Bug 2036968: Replaced fast-kde with fftkde and used bootstrap-ci to get CI summary

[kala-moz]

This PR (Bug 2036968) integrates the js version of @padenot's standalone-stats into perfcompare. Here are the main changes for the integration:

Deploy Link

1.) Added standalone-stats/kde.js and kde.d.ts; bootstrap-ci.js and bootstrap-ci.ts to src/utils
2.) In src/components/CompareResults/CommonGraph.tsx - Removed the the fast-kde import and replaced with the fftkde. I removed approximateSJBandwidth because the ISJ method below auto-selects the bandwidth per dataset. It also has an internal grid and quantile logic so didn't need the quantileSorted method.

  const bKde =
    baseValues.length >= 2 ? fftkde(baseValues, 'ISJ', undefined, 1024) : null;
  const nKde =
    newValues.length >= 2 ? fftkde(newValues, 'ISJ', undefined, 1024) : null;
  const baseRunsDensity = bKde
    ? bKde.x.map((x, i) => ({ x, y: bKde.y[i] }))
    : [];
  const newRunsDensity = nKde
    ? nKde.x.map((x, i) => ({ x, y: nKde.y[i] }))
    : [];

3.) Use the bootstrapMedianDiffCI from bootstrap-ci to get the confidence interval summary and confidence interval statement.

   const baseRuns = mwResult.base_runs ?? [];
    const newRuns = mwResult.new_runs ?? [];
    const ci =
      baseRuns.length > 0 && newRuns.length > 0
        ? bootstrapMedianDiffCI(baseRuns, newRuns)
        : null;
    const fmt = (n: number) => (n >= 0 ? '+' : '') + n.toFixed(1);
    const summary = ci ? (
      <span>
        <strong>Δ median</strong> = {fmt(ci.medianDiff)} ms 95% CI [
        {fmt(ci.ciLow)}, {fmt(ci.ciHigh)}]
        {ci.significant ? '' : '  (not significant)'}
      </span>
    ) : null;
    const confidenceInterval = ci && (
      <span>
        <strong>Confidence Interval</strong>: We are 95% confident the median
        difference is between <strong>{fmt(ci.ciLow)}</strong> and{' '}
        <strong>{fmt(ci.ciHigh)}</strong>
      </span>
    );

Note: please check that the comments are relevant as I may have missed to update or add them where necessary.
Still need to add coverage.

Updates:

• Hook up CommonGraph to echarts, replacing chartjs

[netlify]

✅ Deploy Preview for mozilla-perfcompare ready!

Name	Link
🔨 Latest commit	0b2fb6a
🔍 Latest deploy log	https://app.netlify.com/projects/mozilla-perfcompare/deploys/6a0625ccf86db600089346b7
😎 Deploy Preview	https://deploy-preview-1034--mozilla-perfcompare.netlify.app
📱 Preview on mobile	Toggle 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]

Codecov Report

❌ Patch coverage is 95.65217% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 96.37%. Comparing base (ec289b8) to head (0b2fb6a).

Files with missing lines	Patch %	Lines
src/components/CompareResults/CommonGraph.tsx	94.23%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1034      +/-   ##
==========================================
+ Coverage   96.32%   96.37%   +0.05%     
==========================================
  Files         113      113              
  Lines        3262     3254       -8     
  Branches      739      741       +2     
==========================================
- Hits         3142     3136       -6     
+ Misses        118      116       -2     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 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.

[padenot]

Good start! As discussed, let's switch to echarts for feature, performance and accessibility reasons. I've updated the examples in the other repo so that it is even more drop in, and added a "gallery" with multiple examples. The closest this PR looks like the examples the best it is.

In particular, it's going to be a lot less visually noisy, with lots of useless numbers removed. This is a complaint I hear from perf people. lmk if we should do a quick 1:1 one off or pair to get this done!

[kala-moz]

Good start! As discussed, let's switch to echarts for feature, performance and accessibility reasons. I've updated the examples in the other repo so that it is even more drop in, and added a "gallery" with multiple examples. The closest this PR looks like the examples the best it is.

In particular, it's going to be a lot less visually noisy, with lots of useless numbers removed. This is a complaint I hear from perf people. lmk if we should do a quick 1:1 one off or pair to get this done!

Thanks, @padenot. I went ahead and switched to echarts. Should I continue with the rest of the updates or should we break them into separate PRs? I feel this PR is pretty full already.

[padenot]

As discussed, those are only some changes to do now, and we'll do the rest in a second PR. Looks nice, most comments are cosmetics or just comments (not linked to any action).

[padenot]

That's nice but I'm having issues with having the tooltip lock onto a data series, it shows the base or new but not both. Can we make it show both and lock onto the data series? E.g. a single tooltip always when overing over the KDE part, that shows base and new value at this position in x ?

[kala-moz]

Found a bug in my patch. The graph breaks with this comparison on some tests. https://deploy-preview-1034--mozilla-perfcompare.netlify.app/compare-results?baseRev=422aa058a4418b51b7cbccc3a6b3cc0e5f4c5d5b&baseRepo=autoland&newRev=b2144d802d0ad9cf9d259ca0cf62f9ec9b3615ec&newRepo=autoland&framework=13&sort=delta%7Cdesc