New implementation of nested hover

Summary:
There were 2 issues with the previous implementation of the nested hover.
1. If you moved the mouse out of the inspector quickly we would miss the event and we would have a hover state of the root element when we shouldnt
2. The hover state was stored per node, it was possible to have mulitple children hovered at the same time if you moved the mouse fast enough in a very complex tree

The new implementation has the hovered id stored in the Datainspector root. This solves the multiple state issue since there can only be one.  Finally There is an onMouseLeave hook added to the parent div which seems to reliably fire no mouse how erractic my mouse movements :) Also the new implementation is a lot easier to understand

Reviewed By: mweststrate

Differential Revision: D39855733

fbshipit-source-id: 96b43f216deef72b81cd52001f8de26df55ea693

desktop/flipper-plugin/src/ui/data-inspector/DataInspector.tsx

@@ -82,6 +82,7 @@ type DataInspectorState = {
   filterExpanded: DataInspectorExpanded;
   userExpanded: DataInspectorExpanded;
   filter: string;
+  hoveredNodePath: string | undefined;
 };
 
 const MAX_RESULTS = 50;
@@ -102,6 +103,7 @@ export class DataInspector extends PureComponent<
     userExpanded: {},
     filterExpanded: {},
     filter: '',
+    hoveredNodePath: undefined,
   };
 
   static getDerivedStateFromProps(
@@ -181,6 +183,16 @@ export class DataInspector extends PureComponent<
     });
   };
 
+  setHoveredNodePath = (path?: string) => {
+    this.setState({
+      hoveredNodePath: path,
+    });
+  };
+
+  removeHover = () => {
+    this.setHoveredNodePath(undefined);
+  };
+
   // make sure this fn is a stable ref to not invalidate the whole tree on new data
   getRootData = () => {
     return this.props.data;
@@ -188,10 +200,12 @@ export class DataInspector extends PureComponent<
 
   render() {
     return (
-      <Layout.Container>
+      <Layout.Container onMouseLeave={this.removeHover}>
         <RootDataContext.Provider value={this.getRootData}>
           <HighlightProvider text={this.props.filter}>
             <DataInspectorNode
+              hoveredNodePath={this.state.hoveredNodePath}
+              setHoveredNodePath={this.setHoveredNodePath}
               data={this.props.data}
               diff={this.props.diff}
               extractValue={this.props.extractValue}