chore: use single, not double clicks for SizedPlot (#484)

* feat: add singleClick to interactionHandlers, and make the SizedPlot respond to single; not doubleclicks

* chore: fix test

* chore: updating version in package.json

giraffe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "dist/index.js",
   "module": "src/index.js",
   "license": "MIT",

giraffe/src/components/SizedPlot.test.tsx

@@ -57,18 +57,22 @@ describe('the SizedPlot', () => {
             layerCanvasRef={layersRef}
           />
         )
-        fireEvent.doubleClick(screen.getByTestId('giraffe-inner-plot'))
+
+        // when the user (for real) does a single click, then a mouse up happens.
+        // chose mouse up because the single click listener wasn't triggering except on
+        // double clicks
+        fireEvent.mouseUp(screen.getByTestId('giraffe-inner-plot'))
 
         expect(resetSpy).toHaveBeenCalled()
       })
     })
 
     describe('the ability to override default behavior', () => {
-      it('handles double clicks', () => {
-        const fakeDoubleClickInteractionHandler = jest.fn()
+      it('handles single clicks', () => {
+        const fakeSingleClickInteractionHandler = jest.fn()
         const localConfig = {
           ...config,
-          interactionHandlers: {doubleClick: fakeDoubleClickInteractionHandler},
+          interactionHandlers: {singleClick: fakeSingleClickInteractionHandler},
         }
 
         render(
@@ -78,14 +82,17 @@ describe('the SizedPlot', () => {
             layerCanvasRef={layersRef}
           />
         )
-        fireEvent.doubleClick(screen.getByTestId('giraffe-inner-plot'))
+        // when the user (for real) does a single click, then a mouse up happens.
+        // chose mouse up because the single click listener wasn't triggering except on
+        // double clicks
+        fireEvent.mouseUp(screen.getByTestId('giraffe-inner-plot'))
 
         expect(resetSpy).not.toHaveBeenCalled()
-        expect(fakeDoubleClickInteractionHandler).toHaveBeenCalled()
+        expect(fakeSingleClickInteractionHandler).toHaveBeenCalled()
 
         const [
           [callbackArguments],
-        ] = fakeDoubleClickInteractionHandler.mock.calls
+        ] = fakeSingleClickInteractionHandler.mock.calls
 
         // don't care what the values are, we just care that we pass these values back
         expect(Object.keys(callbackArguments)).toEqual([

giraffe/src/components/SizedPlot.tsx

@@ -97,9 +97,9 @@ export const SizedPlot: FunctionComponent<Props> = ({
     },
   }
 
-  const doubleClick = config.interactionHandlers?.doubleClick
+  const singleClick = config.interactionHandlers?.singleClick
     ? () => {
-        config.interactionHandlers.doubleClick(plotInteraction)
+        config.interactionHandlers.singleClick(plotInteraction)
       }
     : memoizedResetDomains
 
@@ -108,7 +108,7 @@ export const SizedPlot: FunctionComponent<Props> = ({
   }
 
   const callbacks = {
-    doubleClick,
+    singleClick,
   }
 
   const fullsizeStyle: CSSProperties = {
@@ -119,6 +119,12 @@ export const SizedPlot: FunctionComponent<Props> = ({
     bottom: 0,
   }
 
+  // for single clicking; using mouseup, since the onClick only gets through
+  // with a double click; and the hover and drag target does not use a mouse up;
+  // they are:  hover:  mouseEnter, mousemove, mouseleave
+  //            drag target: mouseDown
+  // and every time there is a single click, the mouse goes up.  so using that instead.
+
   return (
     <div
       className="giraffe-plot"
@@ -143,7 +149,7 @@ export const SizedPlot: FunctionComponent<Props> = ({
           left: `${margins.left}px`,
           cursor: `${userConfig.cursor || 'crosshair'}`,
         }}
-        onDoubleClick={callbacks.doubleClick}
+        onMouseUp={callbacks.singleClick}
         {...hoverTargetProps}
         {...dragTargetProps}
       >

giraffe/src/types/index.ts

@@ -97,6 +97,7 @@ export interface InteractionHandlerArguments {
 
 export interface InteractionHandlers {
   doubleClick?: (plotInteraction: InteractionHandlerArguments) => void
+  singleClick?: (plotInteraction: InteractionHandlerArguments) => void
   hover?: (plotInteraction: InteractionHandlerArguments) => void
 }