Clean up tooltip on long hover for visualiser

Summary:
Previously every single visualisation node would have jsx for a tooltip and would control its own tooltop. now we have the overlay we can have just one. this improves perf a bit and simplifies the code.

i also increased the delay slightly

Reviewed By: lblasa

Differential Revision: D46274098

fbshipit-source-id: cb8afbc4804c549da9abf33d69aaf190397f74c7

desktop/plugins/public/ui-debugger/hooks/useDelay.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {useEffect, useRef, useState} from 'react';
+
+export function useDelay(delayTimeMs: number) {
+  const [isDone, setIsDone] = useState(false);
+  const delayTimerStarted = useRef(false);
+  useEffect(() => {
+    let handle: NodeJS.Timeout | null = null;
+    if (delayTimerStarted.current === false) {
+      handle = setTimeout(() => setIsDone(true), delayTimeMs);
+      delayTimerStarted.current = true;
+    }
+
+    return () => {
+      if (handle !== null) {
+        clearTimeout(handle);
+      }
+    };
+  }, [delayTimeMs]);
+
+  return isDone;
+}

desktop/plugins/public/ui-debugger/hooks/usefilteredValue.tsx

@@ -1,40 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-import {Atom} from 'flipper-plugin';
-import {useEffect, useState} from 'react';
-
-/**
- * A hook similar to useValue that Subscribes to an atom and returns the current value.
- * However the value only updates if the predicate passes.
- *
- * Usefull for skipping expensive react renders if an update doesnt concern you
- * @param atom
- * @param predicate
- */
-export function useFilteredValue<T>(
-  atom: Atom<T>,
-  predicate: (newValue: T, prevValue?: T) => boolean,
-) {
-  const [value, setValue] = useState(atom.get());
-
-  useEffect(() => {
-    const listener = (newValue: T, prevValue?: T) => {
-      if (predicate(newValue, prevValue)) {
-        setValue(newValue);
-      }
-    };
-    atom.subscribe(listener);
-    return () => {
-      atom.unsubscribe(listener);
-    };
-  }, [atom, predicate]);
-
-  return value;
-}