feat(functions): Add links to examples in function trends widgets (#52227)

Add links from the trending functions to an example to put it in
context.

static/app/utils/profiling/hooks/types.tsx

@@ -30,6 +30,7 @@ export type FunctionTrend = {
   breakpoint: number;
   change: TrendType;
   'count()': number;
+  'examples()': string[];
   // fingerprint: number; DO NOT use this yet
   function: string;
   package: string;

static/app/views/profiling/landing/functionTrendsWidget.tsx

@@ -9,6 +9,7 @@ import {LineChart} from 'sentry/components/charts/lineChart';
 import Count from 'sentry/components/count';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import IdBadge from 'sentry/components/idBadge';
+import Link from 'sentry/components/links/link';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Pagination, {CursorHandler} from 'sentry/components/pagination';
 import PerformanceDuration from 'sentry/components/performanceDuration';
@@ -22,8 +23,10 @@ import {axisLabelFormatter, tooltipFormatter} from 'sentry/utils/discover/charts
 import type {TrendType} from 'sentry/utils/profiling/hooks/types';
 import {FunctionTrend} from 'sentry/utils/profiling/hooks/types';
 import {useProfileFunctionTrends} from 'sentry/utils/profiling/hooks/useProfileFunctionTrends';
+import {generateProfileFlamechartRouteWithQuery} from 'sentry/utils/profiling/routes';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 import useRouter from 'sentry/utils/useRouter';
@@ -185,9 +188,32 @@ function FunctionTrendsEntry({
   setExpanded,
   trendFunction,
 }: FunctionTrendsEntryProps) {
+  const organization = useOrganization();
   const {projects} = useProjects();
   const project = projects.find(p => p.id === func.project);
 
+  let functionName = <Fragment>{func.function}</Fragment>;
+
+  if (project && func['examples()'].length > 0) {
+    const target = generateProfileFlamechartRouteWithQuery({
+      orgSlug: organization.slug,
+      projectSlug: project.slug,
+      profileId: func['examples()'][0],
+      query: {
+        frameName: func.function as string,
+        framePackage: func.package as string,
+      },
+    });
+
+    functionName = <Link to={target}>{functionName}</Link>;
+  }
+
+  functionName = (
+    <FunctionName>
+      <Tooltip title={func.package}>{functionName}</Tooltip>
+    </FunctionName>
+  );
+
   return (
     <Fragment>
       <AccordionItem>
@@ -196,9 +222,7 @@ function FunctionTrendsEntry({
             <IdBadge project={project} avatarSize={16} hideName />
           </Tooltip>
         )}
-        <FunctionName>
-          <Tooltip title={func.package}>{func.function}</Tooltip>
-        </FunctionName>
+        {functionName}
         <Tooltip
           title={tct('Appeared [count] times.', {
             count: <Count value={func['count()']} />,