index.tsx 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import {Fragment, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import space from 'sentry/styles/space';
  4. import {RenderingSystem} from './renderingSystem';
  5. import {Tree} from './tree';
  6. export type ViewHierarchyWindow = {
  7. alpha: number;
  8. height: number;
  9. id: string;
  10. type: string;
  11. visible: boolean;
  12. width: number;
  13. x: number;
  14. y: number;
  15. children?: ViewHierarchyWindow[];
  16. depth?: number;
  17. identifier?: string;
  18. };
  19. export type ViewHierarchyData = {
  20. rendering_system: string;
  21. windows: ViewHierarchyWindow[];
  22. };
  23. type ViewHierarchyProps = {
  24. viewHierarchy: ViewHierarchyData;
  25. };
  26. function ViewHierarchy({viewHierarchy}: ViewHierarchyProps) {
  27. const [selectedWindow] = useState(0);
  28. return (
  29. <Fragment>
  30. <RenderingSystem system={viewHierarchy.rendering_system} />
  31. <TreeContainer>
  32. <Tree<ViewHierarchyWindow>
  33. data={viewHierarchy.windows[selectedWindow]}
  34. getNodeLabel={({identifier, type}) =>
  35. identifier ? `${type} - ${identifier}` : type
  36. }
  37. isRoot
  38. />
  39. </TreeContainer>
  40. </Fragment>
  41. );
  42. }
  43. export {ViewHierarchy};
  44. const TreeContainer = styled('div')`
  45. max-height: 500px;
  46. overflow: auto;
  47. background-color: ${p => p.theme.surface100};
  48. border: 1px solid ${p => p.theme.gray100};
  49. border-radius: ${p => p.theme.borderRadius};
  50. padding: ${space(1.5)} 0;
  51. display: block;
  52. `;