Update graph handling

package.json

@@ -28,6 +28,7 @@
     "assert": "^2.1.0",
     "buffer": "^6.0.3",
     "chart.js": "^4.3.0",
+    "chartjs-plugin-zoom": "^2.2.0",
     "crypto-browserify": "^3.12.0",
     "dayjs": "^1.11.7",
     "eslint-plugin-jest-formatting": "^3.1.0",

src/components/CompareResults/CommonGraph.tsx

@@ -1,59 +1,112 @@
-import { Chart as ChartJS, LineElement, LinearScale } from 'chart.js';
+import {
+  Chart as ChartJS,
+  LineElement,
+  LinearScale,
+  ScriptableContext,
+} from 'chart.js';
 import 'chart.js/auto';
+import ZoomPlugin from 'chartjs-plugin-zoom';
 import * as kde from 'fast-kde';
 import { Line } from 'react-chartjs-2';
-import { style } from 'typestyle';
 
-import { Spacing } from '../../styles';
-import { MeasurementUnit } from '../../types/types';
-
-ChartJS.register(LinearScale, LineElement);
-
-const styles = {
-  container: style({
-    display: 'flex',
-    marginBottom: Spacing.Medium,
-    width: '100%',
-  }),
-};
+ChartJS.register(LinearScale, LineElement, ZoomPlugin);
 
 function CommonGraph({
-  baseRevisionRuns,
-  newRevisionRuns,
+  baseValues,
+  newValues,
   min,
   max,
+  unit,
 }: CommonGraphProps) {
-  const scaleUnit =
-    baseRevisionRuns.measurementUnit || newRevisionRuns.measurementUnit;
+  ///////////////// START SHOW VALUES ////////////////////////
+  const baseValuesData = baseValues.map((v) => {
+    return { x: v, y: 'Base' };
+  });
+  const newValuesData = newValues.map((v) => {
+    return { x: v, y: 'New' };
+  });
+
+  const allValuesData = [...baseValuesData, ...newValuesData];
+
+  //////////////////// START FAST KDE ////////////////////////
+  // Arbitrary value that seems to work OK.
+  // In the future we'll want to compute a better value, see
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1901248 for some ideas.
+  const bandwidth = (max - min) / 15;
+  const baseRunsDensity = Array.from(
+    kde.density1d(baseValues, {
+      bandwidth,
+      extent: [min, max],
+    }),
+  );
+  const newRunsDensity = Array.from(
+    kde.density1d(newValues, {
+      bandwidth,
+      extent: [min, max],
+    }),
+  );
+  //////////////////// END FAST KDE   ////////////////////////
 
   const options = {
+    responsive: true,
+    maintainAspectRatio: false,
     plugins: {
       legend: {
-        align: 'start' as const,
-        position: 'bottom' as const,
+        display: false,
       },
       title: {
         align: 'start' as const,
         display: true,
         text: 'Runs Density Distribution',
       },
+      zoom: {
+        zoom: {
+          mode: 'x',
+          drag: {
+            enabled: true,
+            borderWidth: 1,
+            backgroundColor: 'rgba(225,225,225,0.5)',
+          },
+          wheel: {
+            enabled: true,
+            speed: 0.2,
+          },
+          pinch: {
+            enabled: true,
+          },
+        },
+        pan: {
+          enabled: true,
+          mode: 'x',
+          modifierKey: 'ctrl',
+        },
+        limits: {
+          x: { min: 'original', max: 'original', minRange: bandwidth },
+        },
+      },
     },
-    responsive: true,
     scales: {
       x: {
+        type: 'linear' as const,
+        suggestedMin: min,
+        suggestedMax: max,
         grid: {
           display: false,
           offset: false,
         },
-        type: 'linear' as const,
         title: {
           align: 'end' as const,
           display: true,
-          text: scaleUnit || '',
+          text: `${unit} →`,
         },
       },
-      y: {
+      yKde: {
+        type: 'linear', // Linear scale
+        stack: 'y', // yKde and yValues are part of the same stack
+        stackWeight: 3, // Higher stack weight means it takes more space
+        weight: 2, // Higher weight means it's on top in the stack
         beginAtZero: true,
+        grace: '3%', // Make sure there's some more space at the top
         grid: {
           drawBorder: false,
           display: false,
@@ -63,10 +116,16 @@ function CommonGraph({
           beginAtZero: true,
           display: true,
         },
-        title: {
-          align: 'end' as const,
-          display: true,
-          text: 'Run Density' as const,
+      },
+      yValues: {
+        type: 'category',
+        stack: 'y',
+        stackWeight: 1, // Lower stack weight means it takes less space
+        weight: 1, // Lower weight means it's lower in the stack
+        labels: ['Base', 'New'],
+        offset: true, // This gives some space around the graph
+        ticks: {
+          autoSkip: false,
         },
       },
     },
@@ -88,74 +147,46 @@ function CommonGraph({
     },
   };
 
-  //////////////////// START FAST KDE ////////////////////////
-  // Arbitrary value that seems to work OK.
-  // In the future we'll want to compute a better value, see
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=1901248 for some ideas.
-  if (max === min) {
-    min = max - 15;
-    max = max + 15;
-  }
-  const bandwidth = (max - min) / 15;
-  const baseRunsDensity = Array.from(
-    kde.density1d(baseRevisionRuns.values, {
-      bandwidth,
-      extent: [min - bandwidth, max + bandwidth],
-    }),
-  );
-  const newRunsDensity = Array.from(
-    kde.density1d(newRevisionRuns.values, {
-      bandwidth,
-      extent: [min - bandwidth, max + bandwidth],
-    }),
-  );
-
-  //////////////////// END FAST KDE   ////////////////////////
-
   const data = {
     datasets: [
       {
+        yAxisID: 'yKde',
         label: 'Base',
         data: baseRunsDensity,
         fill: false,
         borderColor: 'rgba(144, 89, 255, 1)',
       },
       {
+        yAxisID: 'yKde',
         label: 'New',
         data: newRunsDensity,
         fill: false,
         borderColor: 'rgba(0, 135, 135, 1)',
       },
+      {
+        yAxisID: 'yValues',
+        type: 'bubble',
+        pointStyle: 'triangle',
+        pointRadius: 7,
+        data: allValuesData,
+        backgroundColor: (context: ScriptableContext<'bubble'>) =>
+          (context.raw as { y: 'Base' | 'New' }).y === 'Base'
+            ? 'rgba(144, 89, 255, 0.6)'
+            : 'rgba(0, 135, 135, 0.6)',
+      },
     ],
   };
 
-  return (
-    <div className={styles.container}>
-      {/* @ts-expect-error the types for chart.js do not seem great and do not support all options. */}
-      <Line options={options} data={data} />
-    </div>
-  );
+  /* @ts-expect-error the types for chart.js do not seem great and do not support all options. */
+  return <Line options={options} data={data} />;
 }
 
 interface CommonGraphProps {
-  baseRevisionRuns: {
-    name: string;
-    median: number;
-    values: number[];
-    stddev: number;
-    stddevPercent: number;
-    measurementUnit: MeasurementUnit;
-  };
-  newRevisionRuns: {
-    name: string;
-    median: number;
-    values: number[];
-    stddev: number;
-    stddevPercent: number;
-    measurementUnit: MeasurementUnit;
-  };
+  baseValues: number[];
+  newValues: number[];
   min: number;
   max: number;
+  unit: string | null;
 }
 
 export default CommonGraph;