Show framework event metadata documentation in detail view and tree select

Reviewed By: lblasa Differential Revision: D48348090 fbshipit-source-id: e48547508b78178b278f72ce72fc579c9f015570
2023-08-21 04:24:16 -07:00
parent f5bc03c263
commit 4918d21df8
5 changed files with 82 additions and 13 deletions
--- a/desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx
+++ b/desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx
@@ -7,9 +7,11 @@
 * @format
 */

-import {TreeSelect} from 'antd';
-import {FrameworkEventType} from '../../ClientTypes';
-import React from 'react';
+import React, {ReactNode} from 'react';
+import {InfoCircleOutlined} from '@ant-design/icons';
+import {Tooltip, TreeSelect} from 'antd';
+import {Layout, theme} from 'flipper-plugin';
+import {FrameworkEventMetadata, FrameworkEventType} from '../../ClientTypes';

 export function FrameworkEventsTreeSelect({
  treeData,
@@ -55,7 +57,8 @@ export function FrameworkEventsTreeSelect({
 }

 type TreeSelectNode = {
-  title: string;
+  title: ReactNode;
+  titleValue: string;
  key: string;
  value: string;
  children: TreeSelectNode[];
@@ -84,8 +87,11 @@ export const frameworkEventSeparator = '.';
 /**
 * transformed flat event type data structure into tree
 */
-export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
-  const root: TreeSelectNode = buildTreeSelectNode('root', 'root');
+export function buildTreeSelectData(
+  eventTypes: string[],
+  metadata: Map<FrameworkEventType, FrameworkEventMetadata>,
+): TreeSelectNode[] {
+  const root: TreeSelectNode = buildTreeSelectNode('root', 'root', metadata);

  eventTypes.forEach((eventType) => {
    const eventSubtypes = eventType.split(frameworkEventSeparator);
@@ -95,7 +101,7 @@ export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
    for (let i = 0; i < eventSubtypes.length - 1; i++) {
      let foundChild = false;
      for (const child of currentNode.children) {
-        if (child.title === eventSubtypes[i]) {
+        if (child.titleValue === eventSubtypes[i]) {
          currentNode = child;
          foundChild = true;
          break;
@@ -105,6 +111,7 @@ export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
        const newNode: TreeSelectNode = buildTreeSelectNode(
          eventSubtypes[i],
          eventSubtypes.slice(0, i + 1).join(frameworkEventSeparator),
+          metadata,
        );

        currentNode.children.push(newNode);
@@ -118,6 +125,7 @@ export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
        eventSubtypes
          .slice(0, eventSubtypes.length)
          .join(frameworkEventSeparator),
+        metadata,
      ),
    );
  });
@@ -125,9 +133,29 @@ export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
  return root.children;
 }

-function buildTreeSelectNode(title: string, fullValue: string): TreeSelectNode {
+function buildTreeSelectNode(
+  title: string,
+  fullValue: string,
+  metadata: Map<FrameworkEventType, FrameworkEventMetadata>,
+): TreeSelectNode {
+  const documentation = metadata.get(fullValue)?.documentation;
  return {
-    title: title,
+    title: (
+      <Layout.Horizontal gap="small" center>
+        {title}
+        {documentation && (
+          <Tooltip title={documentation}>
+            <InfoCircleOutlined
+              style={{
+                color: theme.primaryColor,
+                fontSize: theme.fontSize.large,
+              }}
+            />
+          </Tooltip>
+        )}
+      </Layout.Horizontal>
+    ),
+    titleValue: title,
    key: fullValue,
    value: fullValue,
    children: [],
--- a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
@@ -43,6 +43,7 @@ export const Inspector: React.FC<Props> = ({
  const instance = usePlugin(plugin);
  const selectedNodeId = useValue(instance.uiState.selectedNode)?.id;

+  const frameworkEventMetadata = useValue(instance.frameworkEventMetadata);
  const selectedNode = selectedNodeId ? nodes.get(selectedNodeId) : undefined;
  if (!selectedNode) {
    return <NoData message="Please select a node to view its details" />;
@@ -122,6 +123,7 @@ export const Inspector: React.FC<Props> = ({
              </Tooltip>
            }>
            <FrameworkEventsInspector
+              frameworkEventMetadata={frameworkEventMetadata}
              node={selectedNode}
              events={selectedFrameworkEvents}
              showExtra={showExtra}
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
@@ -14,7 +14,12 @@ import {
  theme,
  TimelineDataDescription,
 } from 'flipper-plugin';
-import {FrameworkEvent, ClientNode} from '../../../ClientTypes';
+import {
+  FrameworkEvent,
+  ClientNode,
+  FrameworkEventType,
+  FrameworkEventMetadata,
+} from '../../../ClientTypes';
 import React, {ReactNode, useState} from 'react';
 import {StackTraceInspector} from './StackTraceInspector';
 import {Collapse, Descriptions, Select, Tag} from 'antd';
@@ -29,11 +34,13 @@ type Props = {
  node: ClientNode;
  events: readonly FrameworkEvent[];
  showExtra?: (title: string, element: ReactNode) => void;
+  frameworkEventMetadata: Map<FrameworkEventType, FrameworkEventMetadata>;
 };
 export const FrameworkEventsInspector: React.FC<Props> = ({
  node,
  events,
  showExtra,
+  frameworkEventMetadata,
 }) => {
  const allThreads = uniqBy(events, 'thread').map((event) => event.thread);
  const [filteredThreads, setFilteredThreads] = useState<Set<string>>(
@@ -62,7 +69,10 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
          <Layout.Container gap="tiny">
            <FrameworkEventsTreeSelect
              placeholder="Select events types to filter by"
-              treeData={buildTreeSelectData(allEventTypes)}
+              treeData={buildTreeSelectData(
+                allEventTypes,
+                frameworkEventMetadata,
+              )}
              width={250}
              onSetEventSelected={(eventType, selected) => {
                setFilteredEventTypes((cur) =>
@@ -100,7 +110,11 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
          const event = filteredEvents[idx];
          showExtra?.(
            'Event details',
-            <EventDetails event={event} node={node} />,
+            <EventDetails
+              frameworkEventMetadata={frameworkEventMetadata.get(event.type)}
+              event={event}
+              node={node}
+            />,
          );
        }}
        timeline={{
@@ -122,7 +136,9 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
 function EventDetails({
  event,
  node,
+  frameworkEventMetadata,
 }: {
+  frameworkEventMetadata?: FrameworkEventMetadata;
  event: FrameworkEvent;
  node: ClientNode;
 }) {
@@ -138,6 +154,12 @@ function EventDetails({
    <Layout.Container>
      <Descriptions size="small" bordered column={1}>
        <Descriptions.Item label="Event type">{event.type}</Descriptions.Item>
+        {frameworkEventMetadata && (
+          <Descriptions.Item label="Event documentation">
+            {frameworkEventMetadata?.documentation}
+          </Descriptions.Item>
+        )}
+
        <Descriptions.Item label="Thread">
          <Tag color={threadToColor(event.thread)}>{event.thread}</Tag>
        </Descriptions.Item>
--- a/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
@@ -17,7 +17,7 @@ import {
  SearchOutlined,
 } from '@ant-design/icons';
 import {usePlugin, useValue, Layout} from 'flipper-plugin';
-import {FrameworkEventType} from '../../ClientTypes';
+import {FrameworkEventMetadata, FrameworkEventType} from '../../ClientTypes';
 import {
  buildTreeSelectData,
  FrameworkEventsTreeSelect,
@@ -35,6 +35,8 @@ export const TreeControls: React.FC = () => {
    instance.uiState.frameworkEventMonitoring,
  );

+  const frameworkEventMetadata = useValue(instance.frameworkEventMetadata);
+
  const [showFrameworkEventsModal, setShowFrameworkEventsModal] =
    useState(false);

@@ -72,6 +74,7 @@ export const TreeControls: React.FC = () => {
              </Tooltip>
            }></Button>
          <FrameworkEventsMonitoringModal
+            metadata={frameworkEventMetadata}
            filterMainThreadMonitoring={filterMainThreadMonitoring}
            onSetFilterMainThreadMonitoring={
              instance.uiActions.onSetFilterMainThreadMonitoring
@@ -96,7 +99,9 @@ function FrameworkEventsMonitoringModal({
  onSetFilterMainThreadMonitoring,
  filterMainThreadMonitoring,
  frameworkEventTypes,
+  metadata,
 }: {
+  metadata: Map<FrameworkEventType, FrameworkEventMetadata>;
  visible: boolean;
  onCancel: () => void;
  onSetEventMonitored: (
@@ -113,6 +118,7 @@ function FrameworkEventsMonitoringModal({

  const treeData = buildTreeSelectData(
    frameworkEventTypes.map(([type]) => type),
+    metadata,
  );

  return (