From 2ff91170e0e4596a343fc4b87dbb621a6e25e590 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Thu, 21 Sep 2023 08:50:36 -0700
Subject: [PATCH] increase highlight time and random colours for event
 monitoring

Summary:
1. makes it easier to tellwhen a parent and child hightlight together
2. Longer times means you have more time to click it and see

changelog: UIDebugger event debugger - increased highlight time. Nodes get random highlight color

Reviewed By: lblasa

Differential Revision: D49501954

fbshipit-source-id: 9456c00e0df77c40934eb95b4b48b566c7715181
---
 .../public/ui-debugger/DesktopTypes.tsx       |  4 ++-
 .../ui-debugger/components/tree/Tree.tsx      | 26 ++++++++++---------
 .../components/visualizer/Visualization2D.tsx |  6 ++---
 desktop/plugins/public/ui-debugger/index.tsx  | 11 +++++---
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/DesktopTypes.tsx b/desktop/plugins/public/ui-debugger/DesktopTypes.tsx
index 7bd2d3022..4b392615c 100644
--- a/desktop/plugins/public/ui-debugger/DesktopTypes.tsx
+++ b/desktop/plugins/public/ui-debugger/DesktopTypes.tsx
@@ -26,6 +26,8 @@ export type LiveClientState = {
   nodes: Map<Id, ClientNode>;
 };
 
+export type Color = string;
+
 export type UIState = {
   viewMode: Atom<ViewMode>;
   wireFrameMode: Atom<WireFrameMode>;
@@ -36,7 +38,7 @@ export type UIState = {
   isContextMenuOpen: Atom<boolean>;
   hoveredNodes: Atom<Id[]>;
   selectedNode: Atom<NodeSelection | undefined>;
-  highlightedNodes: Atom<Set<Id>>;
+  highlightedNodes: Atom<Map<Id, Color>>;
   focusedNode: Atom<Id | undefined>;
   expandedNodes: Atom<Set<Id>>;
   visualiserWidth: Atom<number>;
diff --git a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
index 7e646484c..1069fa7b6 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
@@ -8,7 +8,7 @@
  */
 
 import {Id, ClientNode} from '../../ClientTypes';
-import {OnSelectNode} from '../../DesktopTypes';
+import {Color, OnSelectNode} from '../../DesktopTypes';
 import React, {
   CSSProperties,
   Ref,
@@ -373,7 +373,7 @@ function TreeNodeRow({
   transform: string;
   innerRef: Ref<any>;
   treeNode: TreeNode;
-  highlightedNodes: Set<Id>;
+  highlightedNodes: Map<Id, Color>;
   selectedNode?: Id;
   hoveredNode?: Id;
   isUsingKBToScroll: RefObject<MillisSinceEpoch>;
@@ -410,7 +410,7 @@ function TreeNodeRow({
       />
 
       <TreeNodeContent
-        isHighlighted={highlightedNodes.has(treeNode.id)}
+        highlightColor={highlightedNodes.get(treeNode.id)}
         isSelected={isSelected}
         isHovered={hoveredNode === treeNode.id}
         onMouseEnter={() => {
@@ -501,8 +501,8 @@ const TreeNodeContent = styled.li<{
   item: TreeNode;
   isHovered: boolean;
   isSelected: boolean;
-  isHighlighted: boolean;
-}>(({item, isHovered, isSelected, isHighlighted}) => ({
+  highlightColor?: string;
+}>(({item, isHovered, isSelected, highlightColor}) => ({
   display: 'flex',
   alignItems: 'center',
   height: TreeItemHeight,
@@ -513,13 +513,15 @@ const TreeNodeContent = styled.li<{
   borderStyle: 'solid',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
-  backgroundColor: isHighlighted
-    ? 'rgba(255,0,0,.3)'
-    : isSelected
-    ? theme.selectionBackgroundColor
-    : isHovered
-    ? theme.backgroundWash
-    : theme.backgroundDefault,
+  opacity: highlightColor != null ? 0.6 : 1,
+  backgroundColor:
+    highlightColor != null
+      ? highlightColor
+      : isSelected
+      ? theme.selectionBackgroundColor
+      : isHovered
+      ? theme.backgroundWash
+      : theme.backgroundDefault,
 }));
 
 function ExpandedIconOrSpace(props: {
diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
index 2ee0b0ce2..e855c151c 100644
--- a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
@@ -324,7 +324,7 @@ function Visualization2DNode({
     />
   ));
 
-  const isHighlighted = useValue(instance.uiState.highlightedNodes).has(
+  const highLightColor = useValue(instance.uiState.highlightedNodes).get(
     node.id,
   );
 
@@ -346,8 +346,8 @@ function Visualization2DNode({
         top: toPx(node.bounds.y),
         width: toPx(node.bounds.width),
         height: toPx(node.bounds.height),
-        opacity: isHighlighted ? 0.3 : 1,
-        backgroundColor: isHighlighted ? 'red' : 'transparent',
+        opacity: highLightColor != null ? 0.7 : 1,
+        backgroundColor: highLightColor,
       }}>
       {showBorder && <NodeBorder />}
 
diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx
index 1bdbaecd2..9523e2f07 100644
--- a/desktop/plugins/public/ui-debugger/index.tsx
+++ b/desktop/plugins/public/ui-debugger/index.tsx
@@ -30,6 +30,7 @@ import {
   WireFrameMode,
   AugmentedFrameworkEvent,
   StreamInterceptorEventEmitter,
+  Color,
 } from './DesktopTypes';
 import EventEmitter from 'eventemitter3';
 import {addInterceptors} from './fb-stubs/StreamInterceptor';
@@ -235,7 +236,10 @@ export function plugin(client: PluginClient<Events, Methods>) {
 
     uiState.highlightedNodes.update((draft) => {
       for (const node of nodesToHighlight) {
-        draft.add(node);
+        draft.set(
+          node,
+          `#${Math.floor(Math.random() * 16777215).toString(16)}`,
+        );
       }
     });
 
@@ -300,8 +304,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
   };
 }
 
-const HighlightTime = 300;
-
+const HighlightTime = 1500;
 export {Component} from './components/main';
 export * from './ClientTypes';
 
@@ -317,7 +320,7 @@ function createUIState(): UIState {
     streamState: createState<StreamState>({state: 'Ok'}),
     visualiserWidth: createState(Math.min(window.innerWidth / 4.5, 500)),
 
-    highlightedNodes: createState(new Set<Id>()),
+    highlightedNodes: createState(new Map<Id, Color>()),
 
     selectedNode: createState<NodeSelection | undefined>(undefined),
     //used to indicate whether we will higher the visualizer / tree when a matching event comes in