From 42963b16abd4e9b7cce165a2edb9d1e12b1d8d5b Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Thu, 27 Apr 2023 07:28:41 -0700
Subject: [PATCH] Subtree Update => Framescan

Summary: This is purely a cosmetic change but more accurately reflects the nature of how we send data from device to desktop. Ie its always an entire frame rather than subtrees. This helps with correctness great Both ios and android are like this and have been for a while.

Reviewed By: lblasa

Differential Revision: D45080088

fbshipit-source-id: 8f68047056c4825b0b1dd89f26c7fa462e2ecb1b
---
 .../components/Visualization2D.tsx            |  2 +-
 desktop/plugins/public/ui-debugger/index.tsx  | 43 +++++++++++--------
 desktop/plugins/public/ui-debugger/types.tsx  | 13 ++++++
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index a7ff8c255..9bfb4c2d5 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
@@ -136,7 +136,7 @@ export const Visualization2D: React.FC<
           }}>
           {snapshotNode && (
             <img
-              src={'data:image/png;base64,' + snapshot.base64Image}
+              src={'data:image/png;base64,' + snapshot.data}
               style={{
                 marginLeft: toPx(-focusState.focusedRootGlobalOffset.x),
                 marginTop: toPx(-focusState.focusedRootGlobalOffset.y),
diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx
index 3263fa692..93aad26b7 100644
--- a/desktop/plugins/public/ui-debugger/index.tsx
+++ b/desktop/plugins/public/ui-debugger/index.tsx
@@ -16,16 +16,16 @@ import {
 } from 'flipper-plugin';
 import {
   Events,
+  FrameScanEvent,
   FrameworkEvent,
   FrameworkEventType,
   Id,
   Metadata,
   MetadataId,
   PerformanceStatsEvent,
-  Snapshot,
+  SnapshotInfo,
   StreamInterceptorError,
   StreamState,
-  SubtreeUpdateEvent,
   UINode,
 } from './types';
 import {Draft} from 'immer';
@@ -33,7 +33,6 @@ import {QueryClient, setLogger} from 'react-query';
 import {tracker} from './tracker';
 import {getStreamInterceptor} from './fb-stubs/StreamInterceptor';
 
-type SnapshotInfo = {nodeId: Id; base64Image: Snapshot};
 type LiveClientState = {
   snapshotInfo: SnapshotInfo | null;
   nodes: Map<Id, UINode>;
@@ -41,7 +40,7 @@ type LiveClientState = {
 
 type PendingData = {
   metadata: Record<MetadataId, Metadata>;
-  frame: SubtreeUpdateEvent | null;
+  frame: FrameScanEvent | null;
 };
 
 type UIState = {
@@ -114,7 +113,7 @@ export function plugin(client: PluginClient<Events>) {
           return;
         }
         if (pendingData.frame != null) {
-          if (!(await processSubtreeUpdate(pendingData.frame))) {
+          if (!(await processFrame(pendingData.frame))) {
             //back into error state, dont proceed
             return;
           }
@@ -237,29 +236,27 @@ export function plugin(client: PluginClient<Events>) {
   };
 
   const seenNodes = new Set<Id>();
-  const processSubtreeUpdate = async (subtreeUpdate: SubtreeUpdateEvent) => {
+  const processFrame = async (frameScan: FrameScanEvent) => {
     try {
       const processedNodes = await streamInterceptor.transformNodes(
-        new Map(subtreeUpdate.nodes.map((node) => [node.id, {...node}])),
+        new Map(frameScan.nodes.map((node) => [node.id, {...node}])),
       );
-      applyFrameData(processedNodes, {
-        nodeId: subtreeUpdate.rootId,
-        base64Image: subtreeUpdate.snapshot,
-      });
 
-      applyFrameworkEvents(subtreeUpdate);
+      applyFrameData(processedNodes, frameScan.snapshot);
+
+      applyFrameworkEvents(frameScan);
       return true;
     } catch (error) {
-      pendingData.frame = subtreeUpdate;
+      pendingData.frame = frameScan;
       handleStreamError('Frame', error);
       return false;
     }
   };
 
-  function applyFrameworkEvents(subtreeUpdate: SubtreeUpdateEvent) {
+  function applyFrameworkEvents(frameScan: FrameScanEvent) {
     frameworkEvents.update((draft) => {
-      if (subtreeUpdate.frameworkEvents) {
-        subtreeUpdate.frameworkEvents.forEach((frameworkEvent) => {
+      if (frameScan?.frameworkEvents) {
+        frameScan.frameworkEvents.forEach((frameworkEvent) => {
           if (
             uiState.frameworkEventMonitoring.get().get(frameworkEvent.type) ===
               true &&
@@ -279,7 +276,7 @@ export function plugin(client: PluginClient<Events>) {
         });
         setTimeout(() => {
           highlightedNodes.update((laterDraft) => {
-            for (const event of subtreeUpdate.frameworkEvents!!.values()) {
+            for (const event of frameScan.frameworkEvents!!.values()) {
               laterDraft.delete(event.nodeId);
             }
           });
@@ -291,7 +288,7 @@ export function plugin(client: PluginClient<Events>) {
   //todo deal with racecondition, where bloks screen is fetching, takes time then you go back get more recent frame then bloks screen comes and overrites it
   function applyFrameData(
     nodes: Map<Id, UINode>,
-    snapshotInfo: SnapshotInfo | null,
+    snapshotInfo: SnapshotInfo | undefined,
   ) {
     liveClientData = produce(liveClientData, (draft) => {
       if (snapshotInfo) {
@@ -323,7 +320,15 @@ export function plugin(client: PluginClient<Events>) {
       checkFocusedNodeStillActive(uiState, nodesAtom.get());
     }
   }
-  client.onMessage('subtreeUpdate', processSubtreeUpdate);
+  client.onMessage('subtreeUpdate', (subtreeUpdate) => {
+    processFrame({
+      frameTime: subtreeUpdate.txId,
+      nodes: subtreeUpdate.nodes,
+      snapshot: {data: subtreeUpdate.snapshot, nodeId: subtreeUpdate.rootId},
+      frameworkEvents: subtreeUpdate.frameworkEvents,
+    });
+  });
+  client.onMessage('frameScan', processFrame);
 
   const queryClient = new QueryClient({});
 
diff --git a/desktop/plugins/public/ui-debugger/types.tsx b/desktop/plugins/public/ui-debugger/types.tsx
index 3f88ad2ca..623aff641 100644
--- a/desktop/plugins/public/ui-debugger/types.tsx
+++ b/desktop/plugins/public/ui-debugger/types.tsx
@@ -22,6 +22,7 @@ export type StreamState =
 export type Events = {
   init: InitEvent;
   subtreeUpdate: SubtreeUpdateEvent;
+  frameScan: FrameScanEvent;
   perfStats: PerfStatsEvent;
   performanceStats: PerformanceStatsEvent;
   metadataUpdate: UpdateMetadataEvent;
@@ -29,6 +30,17 @@ export type Events = {
 
 export type StreamFlowState = {paused: boolean};
 
+export type FrameScanEvent = {
+  frameTime: number;
+  nodes: UINode[];
+  snapshot?: SnapshotInfo;
+  frameworkEvents?: FrameworkEvent[];
+};
+
+/**
+ * @deprecated This  event should not be used and soon will
+ * be removed. FrameScan should be used instead.
+ */
 export type SubtreeUpdateEvent = {
   txId: number;
   rootId: Id;
@@ -175,6 +187,7 @@ export type Color = {
 };
 
 export type Snapshot = string;
+export type SnapshotInfo = {nodeId: Id; data: Snapshot};
 export type Id = number | string;
 
 export type MetadataId = number;