From 4571536ba099e5fa196f22170c73d5d2e969e551 Mon Sep 17 00:00:00 2001
From: Robert Austin <robert.austin@elastic.co>
Date: Wed, 6 May 2020 09:41:40 -0400
Subject: [PATCH] [Resolver] use just left and top, and remove transform, from
 process nodes. (#65108)

---
 .../resolver/view/process_event_dot.tsx       | 71 +++++++++----------
 1 file changed, 35 insertions(+), 36 deletions(-)

diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx
index 0840b990ea3152..27844f09e22720 100644
--- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx
+++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx
@@ -142,20 +142,27 @@ export const ProcessEventDot = styled(
       const activeDescendantId = useSelector(selectors.uiActiveDescendantId);
       const selectedDescendantId = useSelector(selectors.uiSelectedDescendantId);
 
+      const logicalProcessNodeViewWidth = 360;
+      const logicalProcessNodeViewHeight = 120;
+      /**
+       * The `left` and `top` values represent the 'center' point of the process node.
+       * Since the view has content to the left and above the 'center' point, offset the
+       * position to accomodate for that. This aligns the logical center of the process node
+       * with the correct position on the map.
+       */
+      const processNodeViewXOffset = -0.172413 * logicalProcessNodeViewWidth * magFactorX;
+      const processNodeViewYOffset = -0.73684 * logicalProcessNodeViewHeight * magFactorX;
+
       const nodeViewportStyle = useMemo(
         () => ({
-          left: `${left}px`,
-          top: `${top}px`,
+          left: `${left + processNodeViewXOffset}px`,
+          top: `${top + processNodeViewYOffset}px`,
           // Width of symbol viewport scaled to fit
-          width: `${360 * magFactorX}px`,
+          width: `${logicalProcessNodeViewWidth * magFactorX}px`,
           // Height according to symbol viewbox AR
-          height: `${120 * magFactorX}px`,
-          // Adjusted to position/scale with camera
-          transform: `translateX(-${0.172413 * 360 * magFactorX + 10}px) translateY(-${0.73684 *
-            120 *
-            magFactorX}px)`,
+          height: `${logicalProcessNodeViewHeight * magFactorX}px`,
         }),
-        [left, magFactorX, top]
+        [left, magFactorX, processNodeViewXOffset, processNodeViewYOffset, top]
       );
 
       /**
@@ -202,32 +209,26 @@ export const ProcessEventDot = styled(
 
       const dispatch = useResolverDispatch();
 
-      const handleFocus = useCallback(
-        (focusEvent: React.FocusEvent<HTMLDivElement>) => {
-          dispatch({
-            type: 'userFocusedOnResolverNode',
-            payload: {
-              nodeId,
-            },
-          });
-        },
-        [dispatch, nodeId]
-      );
+      const handleFocus = useCallback(() => {
+        dispatch({
+          type: 'userFocusedOnResolverNode',
+          payload: {
+            nodeId,
+          },
+        });
+      }, [dispatch, nodeId]);
 
-      const handleClick = useCallback(
-        (clickEvent: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-          if (animationTarget.current !== null) {
-            (animationTarget.current as any).beginElement();
-          }
-          dispatch({
-            type: 'userSelectedResolverNode',
-            payload: {
-              nodeId,
-            },
-          });
-        },
-        [animationTarget, dispatch, nodeId]
-      );
+      const handleClick = useCallback(() => {
+        if (animationTarget.current !== null) {
+          (animationTarget.current as any).beginElement();
+        }
+        dispatch({
+          type: 'userSelectedResolverNode',
+          payload: {
+            nodeId,
+          },
+        });
+      }, [animationTarget, dispatch, nodeId]);
 
       /* eslint-disable jsx-a11y/click-events-have-key-events */
       /**
@@ -375,13 +376,11 @@ export const ProcessEventDot = styled(
   )
 )`
   position: absolute;
-  display: block;
   text-align: left;
   font-size: 10px;
   user-select: none;
   box-sizing: border-box;
   border-radius: 10%;
-  padding: 4px;
   white-space: nowrap;
   will-change: left, top, width, height;
   contain: strict;