sentry/static/app/views/profiling/profileFlamechart.tsx

import {useEffect, useMemo} from 'react';
import styled from '@emotion/styled';
import * as qs from 'query-string';

import {Alert} from 'sentry/components/alert';
import LoadingIndicator from 'sentry/components/loadingIndicator';
import {Flamegraph} from 'sentry/components/profiling/flamegraph/flamegraph';
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
import {t} from 'sentry/locale';
import {DeepPartial} from 'sentry/types/utils';
import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
import {
  DEFAULT_FLAMEGRAPH_STATE,
  FlamegraphState,
} from 'sentry/utils/profiling/flamegraph/flamegraphStateProvider/flamegraphContext';
import {FlamegraphStateProvider} from 'sentry/utils/profiling/flamegraph/flamegraphStateProvider/flamegraphContextProvider';
import {
  decodeFlamegraphStateFromQueryParams,
  FLAMEGRAPH_LOCALSTORAGE_PREFERENCES_KEY,
  FlamegraphStateLocalStorageSync,
  FlamegraphStateQueryParamSync,
} from 'sentry/utils/profiling/flamegraph/flamegraphStateProvider/flamegraphQueryParamSync';
import {FlamegraphThemeProvider} from 'sentry/utils/profiling/flamegraph/flamegraphThemeProvider';
import {useFlamegraphPreferences} from 'sentry/utils/profiling/flamegraph/hooks/useFlamegraphPreferences';
import {useCurrentProjectFromRouteParam} from 'sentry/utils/profiling/hooks/useCurrentProjectFromRouteParam';
import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
import useOrganization from 'sentry/utils/useOrganization';
import {useParams} from 'sentry/utils/useParams';
import {ProfileGroupProvider} from 'sentry/views/profiling/profileGroupProvider';

import {useProfiles} from './profilesProvider';

function ProfileFlamegraph(): React.ReactElement {
  const organization = useOrganization();
  const profiles = useProfiles();
  const params = useParams();

  const [storedPreferences] = useLocalStorageState<DeepPartial<FlamegraphState>>(
    FLAMEGRAPH_LOCALSTORAGE_PREFERENCES_KEY,
    {
      preferences: {
        layout: DEFAULT_FLAMEGRAPH_STATE.preferences.layout,
        view: DEFAULT_FLAMEGRAPH_STATE.preferences.view,
      },
    }
  );

  const currentProject = useCurrentProjectFromRouteParam();

  useEffect(() => {
    trackAdvancedAnalyticsEvent('profiling_views.profile_flamegraph', {
      organization,
      project_platform: currentProject?.platform,
      project_id: currentProject?.id,
    });
    // ignore  currentProject so we don't block the analytics event
    // or fire more than once unnecessarily
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [organization]);

  const initialFlamegraphPreferencesState = useMemo((): DeepPartial<FlamegraphState> => {
    const queryStringState = decodeFlamegraphStateFromQueryParams(
      qs.parse(window.location.search)
    );

    let type =
      queryStringState.preferences?.type ??
      storedPreferences.preferences?.type ??
      DEFAULT_FLAMEGRAPH_STATE.preferences.type;

    let sorting =
      queryStringState.preferences?.sorting ??
      storedPreferences.preferences?.sorting ??
      DEFAULT_FLAMEGRAPH_STATE.preferences.sorting;

    // Ensure that the type and sorting is overriden to the default if the feature is not enabled
    // or if the view permutation is not compatible with the type
    if (
      type === 'flamegraph' &&
      !organization.features.includes('profiling-flamegraphs')
    ) {
      type = 'flamechart';
    }

    // If flamegraph, but user wants call order, switch to alphabetical
    if (type === 'flamegraph' && sorting === 'call order') {
      sorting = 'alphabetical';
    }
    // If flamechart, but user wants alphabetical, switch to call order
    if (type === 'flamechart' && sorting === 'alphabetical') {
      sorting = 'call order';
    }

    return {
      ...queryStringState,
      preferences: {
        ...storedPreferences.preferences,
        ...queryStringState.preferences,
        type,
        sorting,
        timelines: {
          ...DEFAULT_FLAMEGRAPH_STATE.preferences.timelines,
          ...(storedPreferences?.preferences?.timelines ?? {}),
        },
        layout:
          storedPreferences?.preferences?.layout ??
          queryStringState.preferences?.layout ??
          DEFAULT_FLAMEGRAPH_STATE.preferences.layout,
      },
    };
    // We only want to decode this when our component mounts
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <SentryDocumentTitle
      title={t('Profiling \u2014 Flamechart')}
      orgSlug={organization.slug}
    >
      <FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
        <ProfileGroupTypeProvider
          input={profiles.type === 'resolved' ? profiles.data : null}
          traceID={params.eventID}
        >
          <FlamegraphThemeProvider>
            <FlamegraphStateQueryParamSync />
            <FlamegraphStateLocalStorageSync />
            <FlamegraphContainer>
              {profiles.type === 'errored' ? (
                <Alert type="error" showIcon>
                  {profiles.error}
                </Alert>
              ) : profiles.type === 'loading' ? (
                <LoadingIndicatorContainer>
                  <LoadingIndicator />
                </LoadingIndicatorContainer>
              ) : null}
              <Flamegraph />
            </FlamegraphContainer>
          </FlamegraphThemeProvider>
        </ProfileGroupTypeProvider>
      </FlamegraphStateProvider>
    </SentryDocumentTitle>
  );
}

// This only exists because we need to call useFlamegraphPreferences
// to get the type of visualization that the user is looking at and
// we cannot do it in the component above as it is not a child of the
// FlamegraphStateProvider.
function ProfileGroupTypeProvider({
  children,
  input,
  traceID,
}: {
  children: React.ReactNode;
  input: Profiling.ProfileInput | null;
  traceID: string;
}) {
  const preferences = useFlamegraphPreferences();
  return (
    <ProfileGroupProvider input={input} traceID={traceID} type={preferences.type}>
      {children}
    </ProfileGroupProvider>
  );
}

const LoadingIndicatorContainer = styled('div')`
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
`;

const FlamegraphContainer = styled('div')`
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;

  /*
   * The footer component is a sibling of this div.
   * Remove it so the flamegraph can take up the
   * entire screen.
   */
  ~ footer {
    display: none;
  }
`;

export default ProfileFlamegraph;