index.tsx 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. import {Fragment, useMemo, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import {Node} from 'sentry/components/events/viewHierarchy/node';
  4. import {Wireframe} from 'sentry/components/events/viewHierarchy/wireframe';
  5. import space from 'sentry/styles/space';
  6. import {Project} from 'sentry/types';
  7. import {defined} from 'sentry/utils';
  8. import {
  9. useVirtualizedTree,
  10. UseVirtualizedTreeProps,
  11. } from 'sentry/utils/profiling/hooks/useVirtualizedTree/useVirtualizedTree';
  12. import {DetailsPanel} from './detailsPanel';
  13. import {RenderingSystem} from './renderingSystem';
  14. function getNodeLabel({identifier, type}: ViewHierarchyWindow) {
  15. return identifier ? `${type} - ${identifier}` : type;
  16. }
  17. export type ViewHierarchyWindow = {
  18. alpha: number;
  19. height: number;
  20. type: string;
  21. visible: boolean;
  22. width: number;
  23. x: number;
  24. y: number;
  25. children?: ViewHierarchyWindow[];
  26. depth?: number;
  27. identifier?: string;
  28. };
  29. export type ViewHierarchyData = {
  30. rendering_system: string;
  31. windows: ViewHierarchyWindow[];
  32. };
  33. type ViewHierarchyProps = {
  34. project: Project;
  35. viewHierarchy: ViewHierarchyData;
  36. };
  37. function ViewHierarchy({viewHierarchy, project}: ViewHierarchyProps) {
  38. const [scrollContainerRef, setScrollContainerRef] = useState<HTMLDivElement | null>(
  39. null
  40. );
  41. const [selectedNode, setSelectedNode] = useState<ViewHierarchyWindow | undefined>(
  42. viewHierarchy.windows[0]
  43. );
  44. const hierarchy = useMemo(() => {
  45. return viewHierarchy.windows;
  46. }, [viewHierarchy.windows]);
  47. const renderRow: UseVirtualizedTreeProps<ViewHierarchyWindow>['renderRow'] = (
  48. r,
  49. {
  50. handleExpandTreeNode,
  51. handleRowMouseEnter,
  52. handleRowClick,
  53. handleRowKeyDown,
  54. selectedNodeIndex,
  55. }
  56. ) => {
  57. const key = `view-hierarchy-node-${r.key}`;
  58. const depthMarkers = Array(r.item.depth)
  59. .fill('')
  60. .map((_, i) => <DepthMarker key={`${key}-depth-${i}`} />);
  61. return (
  62. <TreeItem
  63. key={key}
  64. ref={n => {
  65. r.ref = n;
  66. }}
  67. style={r.styles}
  68. tabIndex={selectedNodeIndex === r.key ? 0 : 1}
  69. onMouseEnter={handleRowMouseEnter}
  70. onKeyDown={handleRowKeyDown}
  71. onFocus={() => {
  72. setSelectedNode(r.item.node);
  73. }}
  74. onClick={handleRowClick}
  75. >
  76. {depthMarkers}
  77. <Node
  78. id={key}
  79. label={getNodeLabel(r.item.node)}
  80. onExpandClick={() => handleExpandTreeNode(r.item, {expandChildren: false})}
  81. collapsible={!!r.item.node.children?.length}
  82. isExpanded={r.item.expanded}
  83. isFocused={selectedNodeIndex === r.key}
  84. />
  85. </TreeItem>
  86. );
  87. };
  88. const {
  89. renderedItems,
  90. containerStyles,
  91. scrollContainerStyles,
  92. hoveredGhostRowRef,
  93. clickedGhostRowRef,
  94. } = useVirtualizedTree({
  95. renderRow,
  96. rowHeight: 20,
  97. scrollContainer: scrollContainerRef,
  98. tree: hierarchy,
  99. expanded: true,
  100. overscroll: 10,
  101. initialSelectedNodeIndex: 0,
  102. });
  103. const showWireframe = project?.platform !== 'unity';
  104. return (
  105. <Fragment>
  106. <RenderingSystem system={viewHierarchy.rendering_system} />
  107. <Content>
  108. <Left hasRight={showWireframe}>
  109. <TreeContainer>
  110. <GhostRow ref={hoveredGhostRowRef} />
  111. <GhostRow ref={clickedGhostRowRef} />
  112. <ScrollContainer ref={setScrollContainerRef} style={scrollContainerStyles}>
  113. <RenderedItemsContainer style={containerStyles}>
  114. {renderedItems}
  115. </RenderedItemsContainer>
  116. </ScrollContainer>
  117. </TreeContainer>
  118. {defined(selectedNode) && (
  119. <DetailsContainer>
  120. <DetailsPanel data={selectedNode} getTitle={getNodeLabel} />
  121. </DetailsContainer>
  122. )}
  123. </Left>
  124. {showWireframe && (
  125. <Right>
  126. <Wireframe hierarchy={hierarchy} />
  127. </Right>
  128. )}
  129. </Content>
  130. </Fragment>
  131. );
  132. }
  133. export {ViewHierarchy};
  134. const Content = styled('div')`
  135. display: flex;
  136. flex-direction: row;
  137. gap: ${space(1)};
  138. height: 700px;
  139. `;
  140. const Left = styled('div')<{hasRight?: boolean}>`
  141. width: ${p => (p.hasRight ? '40%' : '100%')};
  142. display: flex;
  143. gap: ${space(1)};
  144. flex-direction: column;
  145. `;
  146. const Right = styled('div')`
  147. width: 60%;
  148. border: 1px solid ${p => p.theme.gray100};
  149. border-radius: ${p => p.theme.borderRadius};
  150. overflow: hidden;
  151. `;
  152. const TreeContainer = styled('div')`
  153. position: relative;
  154. height: 70%;
  155. overflow: hidden;
  156. background-color: ${p => p.theme.background};
  157. border: 1px solid ${p => p.theme.gray100};
  158. border-radius: ${p => p.theme.borderRadius};
  159. `;
  160. const DetailsContainer = styled('div')`
  161. max-height: 30%;
  162. border: 1px solid ${p => p.theme.gray100};
  163. border-radius: ${p => p.theme.borderRadius};
  164. overflow: auto;
  165. `;
  166. const ScrollContainer = styled('div')`
  167. padding: ${space(1.5)};
  168. `;
  169. const RenderedItemsContainer = styled('div')`
  170. position: relative;
  171. `;
  172. const TreeItem = styled('div')`
  173. display: flex;
  174. height: 20px;
  175. width: 100%;
  176. :focus {
  177. outline: none;
  178. }
  179. `;
  180. const DepthMarker = styled('div')`
  181. margin-left: 5px;
  182. min-width: ${space(2)};
  183. border-left: 1px solid ${p => p.theme.gray200};
  184. `;
  185. const GhostRow = styled('div')`
  186. top: ${space(1.5)};
  187. `;