diff --git a/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx b/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx index 299d27771bd..afa7296a618 100644 --- a/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx +++ b/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx @@ -20,6 +20,7 @@ import {Tooltip} from 'react-tooltip'; import {useParcaContext, useURLState} from '@parca/components'; import {USER_PREFERENCES, useUserPreference} from '@parca/hooks'; import {ProfileType} from '@parca/parser'; +import {TEST_IDS} from '@parca/test-utils'; import {getLastItem} from '@parca/utilities'; import {useGraphTooltip} from '../../GraphTooltipArrow/useGraphTooltip'; @@ -187,6 +188,7 @@ const ContextMenu = ({ {enableSandwichView === true && ( { if (functionName === '' || functionName == null) { return; diff --git a/ui/packages/shared/profile/src/ProfileFlameGraph/index.tsx b/ui/packages/shared/profile/src/ProfileFlameGraph/index.tsx index 0e87cadd5af..4e9fa2d9f16 100644 --- a/ui/packages/shared/profile/src/ProfileFlameGraph/index.tsx +++ b/ui/packages/shared/profile/src/ProfileFlameGraph/index.tsx @@ -205,7 +205,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({ if (isLoading && !isInvalidFlameChartQuery) { return ( -
+
{isRenderedAsFlamegraph ? ( ) : ( diff --git a/ui/packages/shared/profile/src/Sandwich/components/CalleesSection.tsx b/ui/packages/shared/profile/src/Sandwich/components/CalleesSection.tsx index 41922262abb..6eba57d77ec 100644 --- a/ui/packages/shared/profile/src/Sandwich/components/CalleesSection.tsx +++ b/ui/packages/shared/profile/src/Sandwich/components/CalleesSection.tsx @@ -13,6 +13,8 @@ import React from 'react'; +import {TEST_IDS, testId} from '@parca/test-utils'; + import ProfileFlameGraph from '../../ProfileFlameGraph'; import {type CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils'; import {type ProfileSource} from '../../ProfileSource'; @@ -35,7 +37,11 @@ export function CalleesSection({ setCurPathArrow, }: CalleesSectionProps): JSX.Element { return ( -
+
{'<-'} Callees
diff --git a/ui/packages/shared/profile/src/Sandwich/components/CallersSection.tsx b/ui/packages/shared/profile/src/Sandwich/components/CallersSection.tsx index 513e151d9fa..2829123492b 100644 --- a/ui/packages/shared/profile/src/Sandwich/components/CallersSection.tsx +++ b/ui/packages/shared/profile/src/Sandwich/components/CallersSection.tsx @@ -17,6 +17,7 @@ import {Vector, tableFromIPC} from 'apache-arrow'; import {Tooltip} from 'react-tooltip'; import {Button} from '@parca/components'; +import {TEST_IDS, testId} from '@parca/test-utils'; import ProfileFlameGraph from '../../ProfileFlameGraph'; import {type CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils'; @@ -90,7 +91,11 @@ export function CallersSection({ )} -
+
Callers {'->'}
diff --git a/ui/packages/shared/profile/src/Sandwich/index.tsx b/ui/packages/shared/profile/src/Sandwich/index.tsx index 6451070b364..4fa51291025 100644 --- a/ui/packages/shared/profile/src/Sandwich/index.tsx +++ b/ui/packages/shared/profile/src/Sandwich/index.tsx @@ -16,6 +16,7 @@ import React, {useRef, useState} from 'react'; import {AnimatePresence, motion} from 'framer-motion'; import {useURLState} from '@parca/components'; +import {TEST_IDS, testId} from '@parca/test-utils'; import {ProfileSource} from '../ProfileSource'; import {useDashboard} from '../ProfileView/context/DashboardContext'; @@ -46,7 +47,7 @@ const Sandwich = React.memo(function Sandwich({ const {curPathArrow, setCurPathArrow} = useVisualizationState(); return ( -
+
) : ( -
+

{dashboardItems.includes('table') ? ( 'Please select a function to view its callers and callees.' diff --git a/ui/packages/shared/test-utils/src/test-ids.ts b/ui/packages/shared/test-utils/src/test-ids.ts index 7f4fefbde3a..0e29a84f355 100644 --- a/ui/packages/shared/test-utils/src/test-ids.ts +++ b/ui/packages/shared/test-utils/src/test-ids.ts @@ -134,6 +134,19 @@ export const TEST_IDS = { // Diff Legend DIFF_LEGEND: 'diff-legend', + // Sandwich View + SANDWICH_CONTAINER: 'sandwich-container', + SANDWICH_CALLERS_SECTION: 'sandwich-callers-section', + SANDWICH_CALLEES_SECTION: 'sandwich-callees-section', + SANDWICH_NO_FUNCTION_SELECTED: 'sandwich-no-function-selected', + + // Loading Skeletons + FLAMEGRAPH_SKELETON: 'flamegraph-skeleton', + + // Flamegraph Context Menu + FLAMEGRAPH_CONTEXT_MENU: 'flamegraph-context-menu', + CONTEXT_MENU_SHOW_IN_SANDWICH: 'context-menu-show-in-sandwich', + // Common Interactive Elements SELECT_DROPDOWN: 'select-dropdown', SELECT_OPTION: 'select-option',