Prefetch IDE resolve query

Summary:
To avoid showing the Ugly spinner in the context menu as well as a better UX we prefetch the IDE resolved path. It was important to limit the concurrency of the running arc jobs otherwise lots of bad things happen and the whole machine stalls out.

The general idea is as the frame comes off the wire we send them to react query to prefetch. by setting the cache time sending the same key twice will not result in 2 fetches, so we dont need to worry about deduplication on our side

Reviewed By: antonk52

Differential Revision: D47210292

fbshipit-source-id: 4a1d8efdfae754c1a73c6a868b02d1f3a0a5b567

desktop/plugins/public/ui-debugger/components/fb-stubs/IDEContextMenu.tsx

@@ -11,6 +11,8 @@ import React from 'react';
 
 import {UINode} from '../../types';
 
+export async function prefetchSourceFileLocation(_: UINode) {}
+
 export function IDEContextMenuItems(_: {node: UINode}) {
   return <></>;
 }

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -27,6 +27,7 @@ import {Button, Spin} from 'antd';
 import {QueryClientProvider} from 'react-query';
 import {Tree2} from './Tree';
 import {StreamInterceptorErrorView} from './StreamInterceptorErrorView';
+import {queryClient} from '../reactQuery';
 
 export function Component() {
   const instance = usePlugin(plugin);
@@ -96,7 +97,7 @@ export function Component() {
     );
   } else {
     return (
-      <QueryClientProvider client={instance.queryClient}>
+      <QueryClientProvider client={queryClient}>
         <Layout.Container grow padh="small" padv="medium">
           <Layout.Top>
             <>

desktop/plugins/public/ui-debugger/index.tsx

@@ -30,9 +30,9 @@ import {
   UIState,
 } from './types';
 import {Draft} from 'immer';
-import {QueryClient, setLogger} from 'react-query';
 import {tracker} from './tracker';
 import {getStreamInterceptor} from './fb-stubs/StreamInterceptor';
+import {prefetchSourceFileLocation} from './components/fb-stubs/IDEContextMenu';
 
 type LiveClientState = {
   snapshotInfo: SnapshotInfo | null;
@@ -265,6 +265,7 @@ export function plugin(client: PluginClient<Events>) {
       }
 
       applyFrameworkEvents(frameScan);
+
       return true;
     } catch (error) {
       pendingData.frame = frameScan;
@@ -339,6 +340,12 @@ export function plugin(client: PluginClient<Events>) {
 
       checkFocusedNodeStillActive(uiState, nodesAtom.get());
     }
+    setTimeout(() => {
+      //let react render, this can happen async
+      for (const node of nodes.values()) {
+        prefetchSourceFileLocation(node);
+      }
+    }, 0);
   }
   client.onMessage('subtreeUpdate', (subtreeUpdate) => {
     processFrame({
@@ -350,8 +357,6 @@ export function plugin(client: PluginClient<Events>) {
   });
   client.onMessage('frameScan', processFrame);
 
-  const queryClient = new QueryClient({});
-
   return {
     rootId,
     uiState,
@@ -362,7 +367,6 @@ export function plugin(client: PluginClient<Events>) {
     metadata,
     perfEvents,
     setPlayPause,
-    queryClient,
     os,
   };
 }
@@ -503,16 +507,3 @@ const HighlightTime = 300;
 
 export {Component} from './components/main';
 export * from './types';
-
-setLogger({
-  log: (...args) => {
-    console.log(...args);
-  },
-  warn: (...args) => {
-    console.warn(...args);
-  },
-  error: (...args) => {
-    //downgrade react query network errors to warning so they dont get sent to scribe
-    console.warn(...args);
-  },
-});

desktop/plugins/public/ui-debugger/package.json

@@ -17,10 +17,14 @@
     "react-color": "^2.19.3",
     "react-hotkeys-hook": "^3.4.7",
     "react-query": "^3.39.1",
+    "async": "2.3.0",
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "ts-retry-promise": "^0.7.0",
     "memoize-weak": "^1.0.2"
   },
+  "devDependencies": {
+    "@types/async": "3.2.20"
+  },
   "bugs": {
     "url": "https://github.com/facebook/flipper/issues"
   },

desktop/plugins/public/ui-debugger/reactQuery.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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 {QueryClient, setLogger} from 'react-query';
+
+export const queryClient = new QueryClient({});
+
+setLogger({
+  log: (...args) => {
+    console.log('[ui-debugger] ReactQuery ', ...args);
+  },
+  warn: (...args) => {
+    console.warn('[ui-debugger] ReactQuery ', ...args);
+  },
+  error: (...args) => {
+    //downgrade react query network errors to warning so they dont get sent to scribe
+    console.warn('[ui-debugger] ReactQuery ', ...args);
+  },
+});