Skip to content

Use rendering_system to enable absolute positioning of view hierarchy wireframe #83292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Use rendering_system to enable absolute positioning of view hierarchy wireframe #83292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion static/app/components/events/viewHierarchy/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ function ViewHierarchy({viewHierarchy, project}: ViewHierarchyProps) {
hierarchy={hierarchy}
selectedNode={userHasSelected ? selectedNode : undefined}
onNodeSelect={onWireframeNodeSelect}
project={project}
system={viewHierarchy.rendering_system}
/>
</Right>
)}
Expand Down
9 changes: 4 additions & 5 deletions static/app/components/events/viewHierarchy/wireframe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
import {IconAdd, IconSubtract} from 'sentry/icons';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import type {Project} from 'sentry/types/project';
import {getCenterScaleMatrixFromConfigPosition} from 'sentry/utils/profiling/gl/utils';
import type {Rect} from 'sentry/utils/profiling/speedscope';

Expand All @@ -29,11 +28,11 @@ export interface ViewNode {
type WireframeProps = {
hierarchy: ViewHierarchyWindow[];
onNodeSelect: (node?: ViewHierarchyWindow) => void;
project: Project;
system: string;
selectedNode?: ViewHierarchyWindow;
};

function Wireframe({hierarchy, selectedNode, onNodeSelect, project}: WireframeProps) {
function Wireframe({hierarchy, selectedNode, onNodeSelect, system}: WireframeProps) {
const theme = useTheme();
const [canvasRef, setCanvasRef] = useState<HTMLCanvasElement | null>(null);
const [overlayRef, setOverlayRef] = useState<HTMLCanvasElement | null>(null);
Expand All @@ -50,9 +49,9 @@ function Wireframe({hierarchy, selectedNode, onNodeSelect, project}: WireframePr
() =>
getHierarchyDimensions(
hierarchy,
['flutter', 'dart-flutter'].includes(project?.platform ?? '')
system === 'flutter' || system.includes('absolute')
Copy link
Member

@leeandher leeandher Jan 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just want to make sure that flutter and dart-flutter projects stay absolutely positioned with this change, do they both have system set to flutter? I agree with removing the project platform check though, good call!

Copy link
Contributor Author

@timfish timfish Jan 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do they both have system set to flutter?

Yep, it looks like sentry-dart uses flutter for the rendering_system too.
https://github.com/getsentry/sentry-dart/blob/ec50b2159d85b69bbbb3619960b3f922ec5592f5/dart/test/protocol/sentry_view_hierarchy_test.dart#L25

who could we ping to triple check?

Copy link
Member

@leeandher leeandher Jan 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for checking that out, I think the last step for this is to have in docs or mentioned somewhere that to use absolute rendering in the UI, the rendering_system must contain absolute, but obviously that is outside the scope of this PR. Approving!

Copy link
Contributor Author

@timfish timfish Jan 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will PR the original RFC because it doesn't look like this is documented elsewhere yet

Copy link
Contributor

@buenaflor buenaflor Jan 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm working on Flutter, yes the rendering_system is always set to flutter: https://github.com/getsentry/sentry-dart/blob/ea6d86d569f24c0dd33f13fe51baa9b53c770d2a/flutter/lib/src/view_hierarchy/sentry_tree_walker.dart#L242

so looks good!

Copy link
Contributor

@buenaflor buenaflor Jan 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll also update the rendering system to absolute on flutter

Copy link
Contributor Author

@timfish timfish Jan 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So it would become something like flutter-absolute?

Copy link
Contributor Author

@timfish timfish Jan 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we might need to be careful about changing existing rendering_system because the Sentry frontend uses for icons or something 🤔

Copy link
Contributor Author

@timfish timfish Jan 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, it looks like platform is used for the icon:

sentry/static/app/components/events/viewHierarchy/renderingSystem.tsx

Line 29 in f346011

platform={platform ?? 'generic'}

However, the system does end up in the tooltip and we might want to hide the absolute detail from users:

sentry/static/app/components/events/viewHierarchy/renderingSystem.tsx

Line 19 in f346011

<Tooltip title={t('Rendering System: %s', system ?? t('Unknown'))}>

Copy link
Contributor

@buenaflor buenaflor Jan 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yup, I'll double check there, it's rather low prio so I won't change it immediately, just created an issue for it in the dart repo

),
[hierarchy, project.platform]
[hierarchy, system]
);
const nodeLookupMap = useMemo(() => {
const map = new Map<ViewHierarchyWindow, ViewNode>();
Expand Down
Loading