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 (