From a9fa73f9ce12413d3e6b3b3c9ce267f2bf88d629 Mon Sep 17 00:00:00 2001
From: "Jill R. Pelavin" <jpelavin@influxdata.com>
Date: Wed, 3 Mar 2021 13:51:03 -0500
Subject: [PATCH] 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                      |  2 +-
 giraffe/src/components/SizedPlot.test.tsx | 21 ++++++++++++++-------
 giraffe/src/components/SizedPlot.tsx      | 14 ++++++++++----
 giraffe/src/types/index.ts                |  1 +
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/giraffe/package.json b/giraffe/package.json
index 893415bc..a56454ae 100644
--- a/giraffe/package.json
+++ b/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",
diff --git a/giraffe/src/components/SizedPlot.test.tsx b/giraffe/src/components/SizedPlot.test.tsx
index 5882dc91..7842379a 100644
--- a/giraffe/src/components/SizedPlot.test.tsx
+++ b/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([
diff --git a/giraffe/src/components/SizedPlot.tsx b/giraffe/src/components/SizedPlot.tsx
index 436bc83e..f3e76dc2 100644
--- a/giraffe/src/components/SizedPlot.tsx
+++ b/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}
       >
diff --git a/giraffe/src/types/index.ts b/giraffe/src/types/index.ts
index 7403cbe6..8519bdb5 100644
--- a/giraffe/src/types/index.ts
+++ b/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
 }