cleanup / tooltip issues (#452)

* chore: cleanup
* fix: refresh onMouseMove callback when tooltip props change

.air.conf

@@ -15,7 +15,7 @@ full_bin = "make server"
 # Watch these filename extensions.
 include_ext = ["go", "tpl", "tmpl", "html"]
 # Ignore these filename extensions or directories.
-exclude_dir = ["assets", "tmp", "vendor", "node_modules", "webapp", "examples", "third_party"]
+exclude_dir = ["assets", "tmp", "vendor", "node_modules", "webapp", "examples", "third_party", "coverage"]
 # Watch these directories if you specified.
 include_dir = []
 # Exclude files.

webapp/javascript/components/FlameGraph/FlameGraphComponent/Highlight.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styles from './Highlight.module.css';
 
-console.log({ styles });
 export interface HighlightProps {
   isWithinBounds: (x: number, y: number) => boolean;
 

webapp/javascript/components/FlameGraph/FlameGraphComponent/Tooltip.spec.tsx

@@ -3,28 +3,77 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { diffColorRed, diffColorGreen } from './color';
+import { Units } from '../../../util/format';
 
 import Tooltip, { TooltipProps } from './Tooltip';
 
-function TestCanvas(props: Omit<TooltipProps, 'canvasRef' | 'numTicks'>) {
+function TestCanvas(props: Omit<TooltipProps, 'canvasRef'>) {
   const canvasRef = React.useRef();
 
   return (
     <>
       <canvas data-testid="canvas" ref={canvasRef} />
-      <Tooltip
-        data-testid="tooltip"
-        canvasRef={canvasRef}
-        {...props}
-        numTicks={10}
-      />
+      <Tooltip data-testid="tooltip" canvasRef={canvasRef} {...props} />
     </>
   );
 }
 
 describe('Tooltip', () => {
   const isWithinBounds = () => true;
 
+  // this test handles a case where the app has changed
+  // but the unit stayed the same
+  it('updates units correctly', () => {
+    const xyToData = (format: 'single', x: number, y: number) => ({
+      format,
+      title: 'function_title',
+      numBarTicks: 10,
+      percent: 1,
+    });
+
+    const { rerender } = render(
+      <TestCanvas
+        format="single"
+        units={Units.Samples}
+        sampleRate={100}
+        numTicks={100}
+        isWithinBounds={isWithinBounds}
+        xyToData={xyToData}
+      />
+    );
+
+    // since we are mocking the result
+    // we don't care exactly where it's hovered
+    userEvent.hover(screen.getByTestId('canvas'));
+
+    expect(screen.getByTestId('flamegraph-tooltip-title')).toHaveTextContent(
+      'function_title'
+    );
+    expect(screen.getByTestId('flamegraph-tooltip-body')).toHaveTextContent(
+      '1, 10 samples, 0.10 seconds'
+    );
+
+    rerender(
+      <TestCanvas
+        format="single"
+        units={Units.Objects}
+        numTicks={1000}
+        sampleRate={100}
+        isWithinBounds={isWithinBounds}
+        xyToData={xyToData}
+      />
+    );
+
+    userEvent.hover(screen.getByTestId('canvas'));
+
+    expect(screen.getByTestId('flamegraph-tooltip-title')).toHaveTextContent(
+      'function_title'
+    );
+    expect(screen.getByTestId('flamegraph-tooltip-body')).toHaveTextContent(
+      '1, 10 samples, 0.01 K'
+    );
+  });
+
   describe('"single" mode', () => {
     it('renders correctly', () => {
       const xyToData = (format: 'single', x: number, y: number) => ({
@@ -37,7 +86,8 @@ describe('Tooltip', () => {
       render(
         <TestCanvas
           format="single"
-          units="samples"
+          units={Units.Samples}
+          numTicks={100}
           sampleRate={100}
           isWithinBounds={isWithinBounds}
           xyToData={xyToData}
@@ -70,7 +120,8 @@ describe('Tooltip', () => {
       render(
         <TestCanvas
           format="double"
-          units="samples"
+          units={Units.Samples}
+          numTicks={100}
           sampleRate={100}
           isWithinBounds={isWithinBounds}
           xyToData={xyToData}
@@ -114,8 +165,8 @@ describe('Tooltip', () => {
       assertTooltipContent({
         title: 'my_function',
         diffColor: undefined,
-        left: 'Left: 100 samples, 1.00 seconds (10%)',
-        right: 'Right: 100 samples, 1.00 seconds (10%)',
+        left: 'Left: 100 samples, 1.00 second (10%)',
+        right: 'Right: 100 samples, 1.00 second (10%)',
       });
     });
 
@@ -135,7 +186,7 @@ describe('Tooltip', () => {
         title: 'my_function (new)',
         diffColor: diffColorRed,
         left: 'Left: 0 samples, < 0.01 seconds (0%)',
-        right: 'Right: 100 samples, 1.00 seconds (10%)',
+        right: 'Right: 100 samples, 1.00 second (10%)',
       });
     });
 
@@ -154,7 +205,7 @@ describe('Tooltip', () => {
       assertTooltipContent({
         title: 'my_function (removed)',
         diffColor: diffColorGreen,
-        left: 'Left: 100 samples, 1.00 seconds (10%)',
+        left: 'Left: 100 samples, 1.00 second (10%)',
         right: 'Right: 0 samples, < 0.01 seconds (0%)',
       });
     });
@@ -174,8 +225,8 @@ describe('Tooltip', () => {
       assertTooltipContent({
         title: 'my_function (+100.00%)',
         diffColor: diffColorRed,
-        left: 'Left: 100 samples, 1.00 seconds (10%)',
-        right: 'Right: 100 samples, 1.00 seconds (20%)',
+        left: 'Left: 100 samples, 1.00 second (10%)',
+        right: 'Right: 100 samples, 1.00 second (20%)',
       });
     });
 
@@ -194,8 +245,8 @@ describe('Tooltip', () => {
       assertTooltipContent({
         title: 'my_function (-50.00%)',
         diffColor: diffColorGreen,
-        left: 'Left: 100 samples, 1.00 seconds (20%)',
-        right: 'Right: 100 samples, 1.00 seconds (10%)',
+        left: 'Left: 100 samples, 1.00 second (20%)',
+        right: 'Right: 100 samples, 1.00 second (10%)',
       });
     });
   });