Add framework event node level event filtering

Summary: Lets you filter a nodes events by thread or type

Reviewed By: lblasa

Differential Revision: D48346955

fbshipit-source-id: 455d65ad21c54c5ad26782ac6a446f7ae15a4356

desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx

@@ -45,6 +45,9 @@ export class TimelineDataDescription extends Component<Props, State> {
 
   render(): ReactNode {
     const moments = Object.values(this.props.timeline.time);
+    if (moments == null || moments.length === 0) {
+      return null;
+    }
     const firstMoment = moments[0].moment;
     const points = moments.map((value) => ({
       label: value.display,

desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx

@@ -16,7 +16,9 @@ export function FrameworkEventsTreeSelect({
   onSetEventSelected,
   selected,
   placeholder,
+  width,
 }: {
+  width?: number;
   placeholder: string;
   selected: string[];
   treeData: TreeSelectNode[];
@@ -33,7 +35,7 @@ export function FrameworkEventsTreeSelect({
       placeholder={placeholder}
       virtual={false} //for scrollbar
       style={{
-        width: '100%',
+        width: width ?? '100%',
       }}
       treeData={treeData}
       treeDefaultExpandAll

desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx

@@ -10,14 +10,20 @@
 import {
   DataInspector,
   Layout,
+  produce,
   theme,
   TimelineDataDescription,
 } from 'flipper-plugin';
 import {FrameworkEvent, ClientNode} from '../../../ClientTypes';
-import React, {ReactNode} from 'react';
+import React, {ReactNode, useState} from 'react';
 import {StackTraceInspector} from './StackTraceInspector';
-import {Descriptions, Tag} from 'antd';
+import {Collapse, Descriptions, Select, Tag} from 'antd';
 import {frameworkEventSeparator} from '../../shared/FrameworkEventsTreeSelect';
+import {
+  buildTreeSelectData,
+  FrameworkEventsTreeSelect,
+} from '../../shared/FrameworkEventsTreeSelect';
+import {uniqBy} from 'lodash';
 
 type Props = {
   node: ClientNode;
@@ -29,30 +35,87 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
   events,
   showExtra,
 }) => {
+  const allThreads = uniqBy(events, 'thread').map((event) => event.thread);
+  const [filteredThreads, setFilteredThreads] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const allEventTypes = uniqBy(events, 'type').map((event) => event.type);
+  const [filteredEventTypes, setFilteredEventTypes] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const filteredEvents = events
+    .filter(
+      (event) =>
+        filteredEventTypes.size === 0 || filteredEventTypes.has(event.type),
+    )
+    .filter(
+      (event) =>
+        filteredThreads.size === 0 || filteredThreads.has(event.thread!),
+    );
+
   return (
-    <TimelineDataDescription
+    <Layout.Container gap="small" padv="small">
-      key={node.id}
+      <Collapse>
-      canSetCurrent={false}
+        <Collapse.Panel header="Filter events" key="1">
-      onClick={(current) => {
+          <Layout.Container gap="tiny">
-        const idx = parseInt(current, 10);
+            <FrameworkEventsTreeSelect
-        const event = events[idx];
+              placeholder="Select events types to filter by"
-        showExtra?.(
+              treeData={buildTreeSelectData(allEventTypes)}
-          'Event details',
+              width={250}
-          <EventDetails event={event} node={node} />,
+              onSetEventSelected={(eventType, selected) => {
-        );
+                setFilteredEventTypes((cur) =>
-      }}
+                  produce(cur, (draft) => {
-      timeline={{
+                    if (selected) {
-        time: events.map((event, idx) => {
+                      draft.add(eventType);
-          return {
+                    } else {
-            moment: event.timestamp,
+                      draft.delete(eventType);
-            display: `${eventTypeToName(event.type)}`,
+                    }
-            color: threadToColor(event.thread),
+                  }),
-            key: idx.toString(),
+                );
-          };
+              }}
-        }),
+              selected={[...filteredEventTypes]}
-        current: 'initialNone',
+            />
-      }}
+            <Select
-    />
+              mode="multiple"
+              style={{width: '250px'}}
+              placeholder="Select threads to filter by"
+              defaultValue={[] as string[]}
+              options={allThreads.map((thread) => ({
+                value: thread,
+                label: thread,
+              }))}
+              onChange={(value) => setFilteredThreads(new Set(value))}
+            />
+          </Layout.Container>
+        </Collapse.Panel>
+      </Collapse>
+
+      <TimelineDataDescription
+        key={node.id}
+        canSetCurrent={false}
+        onClick={(current) => {
+          const idx = parseInt(current, 10);
+          const event = filteredEvents[idx];
+          showExtra?.(
+            'Event details',
+            <EventDetails event={event} node={node} />,
+          );
+        }}
+        timeline={{
+          time: filteredEvents.map((event, idx) => {
+            return {
+              moment: event.timestamp,
+              display: `${eventTypeToName(event.type)}`,
+              color: threadToColor(event.thread),
+              key: idx.toString(),
+            };
+          }),
+          current: 'initialNone',
+        }}
+      />
+    </Layout.Container>
   );
 };