Add main thread filter control

Summary: This adds a filter on top of the event types to only highlight when the thread occurs on the main thread

Reviewed By: lblasa

Differential Revision: D47520036

fbshipit-source-id: b4a67b262345d845e5dcbf79bba5a210c1bca4f8

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

@@ -19,6 +19,7 @@ import {
   Typography,
   TreeSelect,
   Space,
+  Switch,
 } from 'antd';
 import {
   MoreOutlined,
@@ -39,6 +40,9 @@ export const Controls: React.FC = () => {
   const instance = usePlugin(plugin);
   const searchTerm = useValue(instance.uiState.searchTerm);
   const isPaused = useValue(instance.uiState.isPaused);
+  const filterMainThreadMonitoring = useValue(
+    instance.uiState.filterMainThreadMonitoring,
+  );
 
   const frameworkEventMonitoring: Map<FrameworkEventType, boolean> = useValue(
     instance.uiState.frameworkEventMonitoring,
@@ -81,6 +85,10 @@ export const Controls: React.FC = () => {
         }></Button>
       {frameworkEventMonitoring.size > 0 && (
         <MoreOptionsMenu
+          filterMainThreadMonitoring={filterMainThreadMonitoring}
+          onSetFilterMainThreadMonitoring={
+            instance.uiActions.onSetFilterMainThreadMonitoring
+          }
           onSetEventMonitored={onSetEventMonitored}
           frameworkEventTypes={[...frameworkEventMonitoring.entries()]}
         />
@@ -92,7 +100,11 @@ export const Controls: React.FC = () => {
 function MoreOptionsMenu({
   onSetEventMonitored,
   frameworkEventTypes,
+  filterMainThreadMonitoring,
+  onSetFilterMainThreadMonitoring,
 }: {
+  filterMainThreadMonitoring: boolean;
+  onSetFilterMainThreadMonitoring: (toggled: boolean) => void;
   onSetEventMonitored: (
     eventType: FrameworkEventType,
     monitored: boolean,
@@ -126,6 +138,8 @@ function MoreOptionsMenu({
 
       {/*invisible until shown*/}
       <FrameworkEventsMonitoringModal
+        filterMainThreadMonitoring={filterMainThreadMonitoring}
+        onSetFilterMainThreadMonitoring={onSetFilterMainThreadMonitoring}
         frameworkEventTypes={frameworkEventTypes}
         onSetEventMonitored={onSetEventMonitored}
         visible={showFrameworkEventsModal}
@@ -139,6 +153,8 @@ function FrameworkEventsMonitoringModal({
   visible,
   onCancel,
   onSetEventMonitored,
+  onSetFilterMainThreadMonitoring,
+  filterMainThreadMonitoring,
   frameworkEventTypes,
 }: {
   visible: boolean;
@@ -147,6 +163,8 @@ function FrameworkEventsMonitoringModal({
     eventType: FrameworkEventType,
     monitored: boolean,
   ) => void;
+  filterMainThreadMonitoring: boolean;
+  onSetFilterMainThreadMonitoring: (toggled: boolean) => void;
   frameworkEventTypes: [FrameworkEventType, boolean][];
 }) {
   const selectedFrameworkEvents = frameworkEventTypes
@@ -193,6 +211,18 @@ function FrameworkEventsMonitoringModal({
             }
           }}
         />
+
+        <Layout.Horizontal gap="medium">
+          <Switch
+            checked={filterMainThreadMonitoring}
+            onChange={(event) => {
+              onSetFilterMainThreadMonitoring(event);
+            }}
+          />
+          <Typography.Text>
+            Only highlight events that occured on the main thread
+          </Typography.Text>
+        </Layout.Horizontal>
       </Space>
     </Modal>
   );

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

@@ -80,6 +80,9 @@ export function Tree2({nodes, rootId}: {nodes: Map<Id, UINode>; rootId: Id}) {
   const hoveredNode = head(useValue(instance.uiState.hoveredNodes));
 
   const frameworkEvents = useValue(instance.frameworkEvents);
+  const filterMainThreadMonitoring = useValue(
+    instance.uiState.filterMainThreadMonitoring,
+  );
   const frameworkEventsMonitoring = useValue(
     instance.uiState.frameworkEventMonitoring,
   );
@@ -239,6 +242,7 @@ export function Tree2({nodes, rootId}: {nodes: Map<Id, UINode>; rootId: Id}) {
                   treeNode={treeNodes[virtualRow.index]}
                   frameworkEvents={frameworkEvents}
                   frameworkEventsMonitoring={frameworkEventsMonitoring}
+                  filterMainThreadMonitoring={filterMainThreadMonitoring}
                   highlightedNodes={highlightedNodes}
                   selectedNode={selectedNode?.id}
                   hoveredNode={hoveredNode}
@@ -290,6 +294,7 @@ function TreeItemContainer({
   treeNode,
   frameworkEvents,
   frameworkEventsMonitoring,
+  filterMainThreadMonitoring,
   highlightedNodes,
   selectedNode,
   hoveredNode,
@@ -306,6 +311,7 @@ function TreeItemContainer({
   frameworkEvents: Map<Id, FrameworkEvent[]>;
   highlightedNodes: Set<Id>;
   frameworkEventsMonitoring: Map<FrameworkEventType, boolean>;
+  filterMainThreadMonitoring: boolean;
   selectedNode?: Id;
   hoveredNode?: Id;
   isUsingKBToScroll: RefObject<MillisSinceEpoch>;
@@ -317,7 +323,11 @@ function TreeItemContainer({
 }) {
   let events = frameworkEvents.get(treeNode.id);
   if (events) {
-    events = events.filter((e) => frameworkEventsMonitoring.get(e.type));
+    events = events
+      .filter((e) => frameworkEventsMonitoring.get(e.type))
+      .filter(
+        (e) => filterMainThreadMonitoring === false || e.thread === 'main',
+      );
   }
 
   return (

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

@@ -213,6 +213,7 @@ export function plugin(client: PluginClient<Events>) {
     frameworkEventMonitoring: createState(
       new Map<FrameworkEventType, boolean>(),
     ),
+    filterMainThreadMonitoring: createState(false),
 
     isPaused: createState(false),
 
@@ -297,11 +298,17 @@ export function plugin(client: PluginClient<Events>) {
 
     const monitoredEvents = uiState.frameworkEventMonitoring.get();
 
+    const filterMainThread = uiState.filterMainThreadMonitoring.get();
+
     const nodesToHighlight =
       frameScan.frameworkEvents
         ?.filter(
           (frameworkEvent) => monitoredEvents.get(frameworkEvent.type) === true,
         )
+        .filter(
+          (frameworkEvent) =>
+            filterMainThread === false || frameworkEvent.thread === 'main',
+        )
         .map((event) => event.nodeId) ?? [];
 
     highlightedNodes.update((draft) => {
@@ -456,6 +463,10 @@ function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
     uiState.visualiserWidth.set(width);
   };
 
+  const onSetFilterMainThreadMonitoring = (toggled: boolean) => {
+    uiState.filterMainThreadMonitoring.set(toggled);
+  };
+
   return {
     onExpandNode,
     onCollapseNode,
@@ -464,6 +475,7 @@ function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
     onContextMenuOpen,
     onFocusNode,
     setVisualiserWidth,
+    onSetFilterMainThreadMonitoring,
   };
 }
 

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

@@ -22,6 +22,7 @@ export type UIState = {
   expandedNodes: Atom<Set<Id>>;
   visualiserWidth: Atom<number>;
   frameworkEventMonitoring: Atom<Map<FrameworkEventType, boolean>>;
+  filterMainThreadMonitoring: Atom<boolean>;
 };
 
 export type NodeSelection = {
@@ -42,6 +43,7 @@ export type UIActions = {
   onExpandNode: (node: Id) => void;
   onCollapseNode: (node: Id) => void;
   setVisualiserWidth: (width: number) => void;
+  onSetFilterMainThreadMonitoring: (toggled: boolean) => void;
 };
 export type SelectionSource = 'visualiser' | 'tree' | 'keyboard';
 
@@ -113,6 +115,7 @@ export type FrameworkEvent = {
   timestamp: number;
   payload?: JSON;
   attribution?: FrameworkEventAttribution;
+  thread?: 'main' | string;
 };
 
 export type InitEvent = {