import {Fragment} from 'react'; import {t} from 'sentry/locale'; import { FlamegraphAxisOptions, FlamegraphColorCodings, FlamegraphSorting, FlamegraphViewOptions, } from 'sentry/utils/profiling/flamegraph/flamegraphStateProvider/flamegraphPreferences'; import {useFlamegraphPreferences} from 'sentry/utils/profiling/flamegraph/useFlamegraphPreferences'; import {useContextMenu} from 'sentry/utils/profiling/hooks/useContextMenu'; import { ProfilingContextMenu, ProfilingContextMenuGroup, ProfilingContextMenuHeading, ProfilingContextMenuItemCheckbox, ProfilingContextMenuLayer, } from './ProfilingContextMenu/profilingContextMenu'; const FLAMEGRAPH_COLOR_CODINGS: FlamegraphColorCodings = [ 'by symbol name', 'by system / application', 'by library', 'by recursion', 'by frequency', ]; const FLAMEGRAPH_VIEW_OPTIONS: FlamegraphViewOptions = ['top down', 'bottom up']; const FLAMEGRAPH_SORTING_OPTIONS: FlamegraphSorting = ['left heavy', 'call order']; const FLAMEGRAPH_AXIS_OPTIONS: FlamegraphAxisOptions = ['standalone', 'transaction']; interface FlameGraphOptionsContextMenuProps { contextMenu: ReturnType; } export function FlamegraphOptionsContextMenu(props: FlameGraphOptionsContextMenuProps) { const [preferences, dispatch] = useFlamegraphPreferences(); return props.contextMenu.open ? ( props.contextMenu.setOpen(false)} /> {t('Color Coding')} {FLAMEGRAPH_COLOR_CODINGS.map((coding, idx) => ( dispatch({type: 'set color coding', payload: coding})} checked={preferences.colorCoding === coding} > {coding} ))} {t('View')} {FLAMEGRAPH_VIEW_OPTIONS.map((view, idx) => ( dispatch({type: 'set view', payload: view})} checked={preferences.view === view} > {view} ))} {t('Sorting')} {FLAMEGRAPH_SORTING_OPTIONS.map((sorting, idx) => ( dispatch({type: 'set sorting', payload: sorting})} checked={preferences.sorting === sorting} > {sorting} ))} {t('X Axis')} {FLAMEGRAPH_AXIS_OPTIONS.map((axis, idx) => ( dispatch({type: 'set xAxis', payload: axis})} checked={preferences.xAxis === axis} > {axis} ))} ) : null; }