ref(insights): move sample panel open tracking to panel onOpen (#70982)

Track `performance_views.sample_spans.opened` on `<DetailPanel
onOpen={...}>` instead of tracking the table clicks that trigger the
sample span popup.

static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryTable.tsx

@@ -9,10 +9,8 @@ import type {CursorHandler} from 'sentry/components/pagination';
 import Pagination from 'sentry/components/pagination';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {trackAnalytics} from 'sentry/utils/analytics';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
-import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import {RESOURCE_THROUGHPUT_UNIT} from 'sentry/views/performance/browser/resources';
 import {useResourceModuleFilters} from 'sentry/views/performance/browser/resources/utils/useResourceFilters';
@@ -24,11 +22,7 @@ import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/render
 import ResourceSizeCell from 'sentry/views/starfish/components/tableCells/resourceSizeCell';
 import {WiderHovercard} from 'sentry/views/starfish/components/tableCells/spanDescriptionCell';
 import {ThroughputCell} from 'sentry/views/starfish/components/tableCells/throughputCell';
-import {
-  ModuleName,
-  SpanIndexedField,
-  SpanMetricsField,
-} from 'sentry/views/starfish/types';
+import {SpanIndexedField, SpanMetricsField} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 import {DataTitles, getThroughputTitle} from 'sentry/views/starfish/views/spans/types';
 
@@ -50,7 +44,6 @@ type Row = {
 type Column = GridColumnHeader<keyof Row>;
 
 function ResourceSummaryTable() {
-  const organization = useOrganization();
   const location = useLocation();
   const {groupId} = useParams();
   const sort = useResourceSummarySort();
@@ -106,12 +99,6 @@ function ResourceSummaryTable() {
 
       const link = (
         <Link
-          onClick={() =>
-            trackAnalytics('performance_views.sample_spans.opened', {
-              organization,
-              source: ModuleName.RESOURCE,
-            })
-          }
           to={{
             pathname: location.pathname,
             query: {

static/app/views/performance/cache/samplePanel/samplePanel.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useCallback} from 'react';
 import styled from '@emotion/styled';
 import keyBy from 'lodash/keyBy';
 import * as qs from 'query-string';
@@ -198,6 +198,15 @@ export function CacheSamplePanel() {
     });
   };
 
+  const handleOpen = useCallback(() => {
+    if (query.transaction) {
+      trackAnalytics('performance_views.sample_spans.opened', {
+        organization,
+        source: ModuleName.CACHE,
+      });
+    }
+  }, [organization, query.transaction]);
+
   const handleRefetch = () => {
     refetchCacheHits();
     refetchCacheMisses();
@@ -205,7 +214,7 @@ export function CacheSamplePanel() {
 
   return (
     <PageAlertProvider>
-      <DetailPanel detailKey={detailKey} onClose={handleClose}>
+      <DetailPanel detailKey={detailKey} onClose={handleClose} onOpen={handleOpen}>
         <ModuleLayout.Layout>
           <ModuleLayout.Full>
             <HeaderContainer>

static/app/views/performance/cache/tables/transactionCell.tsx

@@ -1,12 +1,9 @@
 import * as qs from 'query-string';
 
 import Link from 'sentry/components/links/link';
-import {trackAnalytics} from 'sentry/utils/analytics';
 import {useLocation} from 'sentry/utils/useLocation';
-import useOrganization from 'sentry/utils/useOrganization';
 import {useCacheUrl} from 'sentry/views/performance/cache/utils';
 import {OverflowEllipsisTextContainer} from 'sentry/views/starfish/components/textAlign';
-import {ModuleName} from 'sentry/views/starfish/types';
 
 interface Props {
   project?: string;
@@ -15,7 +12,6 @@ interface Props {
 }
 
 export function TransactionCell({project, transaction}: Props) {
-  const organization = useOrganization();
   const location = useLocation();
   const cacheUrl = useCacheUrl();
 
@@ -31,17 +27,7 @@ export function TransactionCell({project, transaction}: Props) {
 
   return (
     <OverflowEllipsisTextContainer>
-      <Link
-        onClick={() =>
-          trackAnalytics('performance_views.sample_spans.opened', {
-            organization,
-            source: ModuleName.CACHE,
-          })
-        }
-        to={`${cacheUrl}/?${qs.stringify(query)}`}
-      >
-        {transaction}
-      </Link>
+      <Link to={`${cacheUrl}/?${qs.stringify(query)}`}>{transaction}</Link>
     </OverflowEllipsisTextContainer>
   );
 }

static/app/views/performance/database/queryTransactionsTable.tsx

@@ -10,7 +10,6 @@ import type {CursorHandler} from 'sentry/components/pagination';
 import Pagination from 'sentry/components/pagination';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types';
-import {trackAnalytics} from 'sentry/utils/analytics';
 import type {EventsMetaType} from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import type {Sort} from 'sentry/utils/discover/fields';
@@ -162,17 +161,7 @@ function renderBodyCell(
 
     return (
       <OverflowEllipsisTextContainer>
-        <Link
-          onClick={() =>
-            trackAnalytics('performance_views.sample_spans.opened', {
-              organization,
-              source: 'database',
-            })
-          }
-          to={`${pathname}?${qs.stringify(query)}`}
-        >
-          {label}
-        </Link>
+        <Link to={`${pathname}?${qs.stringify(query)}`}>{label}</Link>
       </OverflowEllipsisTextContainer>
     );
   }

static/app/views/performance/http/httpSamplesPanel.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useCallback} from 'react';
 import styled from '@emotion/styled';
 import * as qs from 'query-string';
 
@@ -272,9 +272,18 @@ export function HTTPSamplesPanel() {
     });
   };
 
+  const handleOpen = useCallback(() => {
+    if (query.transaction) {
+      trackAnalytics('performance_views.sample_spans.opened', {
+        organization,
+        source: ModuleName.HTTP,
+      });
+    }
+  }, [organization, query.transaction]);
+
   return (
     <PageAlertProvider>
-      <DetailPanel detailKey={detailKey} onClose={handleClose}>
+      <DetailPanel detailKey={detailKey} onClose={handleClose} onOpen={handleOpen}>
         <ModuleLayout.Layout>
           <ModuleLayout.Full>
             <HeaderContainer>

static/app/views/performance/http/tables/transactionCell.tsx

@@ -1,12 +1,10 @@
 import * as qs from 'query-string';
 
 import Link from 'sentry/components/links/link';
-import {trackAnalytics} from 'sentry/utils/analytics';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {OverflowEllipsisTextContainer} from 'sentry/views/starfish/components/textAlign';
-import {ModuleName} from 'sentry/views/starfish/types';
 
 interface Props {
   domain?: string;
@@ -48,17 +46,7 @@ export function TransactionCell({
 
   return (
     <OverflowEllipsisTextContainer>
-      <Link
-        onClick={() =>
-          trackAnalytics('performance_views.sample_spans.opened', {
-            organization,
-            source: ModuleName.HTTP,
-          })
-        }
-        to={`${pathname}?${qs.stringify(query)}`}
-      >
-        {label}
-      </Link>
+      <Link to={`${pathname}?${qs.stringify(query)}`}>{label}</Link>
     </OverflowEllipsisTextContainer>
   );
 }

static/app/views/performance/mobile/appStarts/screenSummary/spanOperationTable.tsx

@@ -10,7 +10,6 @@ import type {CursorHandler} from 'sentry/components/pagination';
 import Pagination from 'sentry/components/pagination';
 import {t} from 'sentry/locale';
 import type {NewQuery} from 'sentry/types/organization';
-import {trackAnalytics} from 'sentry/utils/analytics';
 import {browserHistory} from 'sentry/utils/browserHistory';
 import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import type {MetaType} from 'sentry/utils/discover/eventView';
@@ -38,7 +37,7 @@ import {
 } from 'sentry/views/starfish/components/releaseSelector';
 import {PercentChangeCell} from 'sentry/views/starfish/components/tableCells/percentChangeCell';
 import {OverflowEllipsisTextContainer} from 'sentry/views/starfish/components/textAlign';
-import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
+import {SpanMetricsField} from 'sentry/views/starfish/types';
 import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/constants';
 import {appendReleaseFilters} from 'sentry/views/starfish/utils/releaseComparison';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
@@ -160,15 +159,7 @@ export function SpanOperationTable({
       };
 
       return (
-        <Link
-          onClick={() =>
-            trackAnalytics('performance_views.sample_spans.opened', {
-              organization,
-              source: ModuleName.APP_START,
-            })
-          }
-          to={`${pathname}?${qs.stringify(query)}`}
-        >
+        <Link to={`${pathname}?${qs.stringify(query)}`}>
           <OverflowEllipsisTextContainer>{label}</OverflowEllipsisTextContainer>
         </Link>
       );

static/app/views/performance/mobile/components/spanSamplesPanel.tsx

@@ -64,8 +64,12 @@ export function SpanSamplesPanel({
   const onOpenDetailPanel = useCallback(() => {
     if (query.transaction) {
       trackAnalytics('starfish.panel.open', {organization});
+      trackAnalytics('performance_views.sample_spans.opened', {
+        organization,
+        source: moduleName,
+      });
     }
-  }, [organization, query.transaction]);
+  }, [organization, query.transaction, moduleName]);
 
   const label =
     transactionMethod && !transactionName.startsWith(transactionMethod)

static/app/views/performance/mobile/screenload/screenLoadSpans/table.tsx

@@ -14,7 +14,6 @@ import {Tooltip} from 'sentry/components/tooltip';
 import {t, tct} from 'sentry/locale';
 import type {NewQuery} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
-import {trackAnalytics} from 'sentry/utils/analytics';
 import {browserHistory} from 'sentry/utils/browserHistory';
 import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import type {MetaType} from 'sentry/utils/discover/eventView';
@@ -47,7 +46,7 @@ import {
 } from 'sentry/views/starfish/components/releaseSelector';
 import {OverflowEllipsisTextContainer} from 'sentry/views/starfish/components/textAlign';
 import {useTTFDConfigured} from 'sentry/views/starfish/queries/useHasTtfdConfigured';
-import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
+import {SpanMetricsField} from 'sentry/views/starfish/types';
 import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/constants';
 import {appendReleaseFilters} from 'sentry/views/starfish/utils/releaseComparison';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
@@ -181,15 +180,7 @@ export function ScreenLoadSpansTable({
       };
 
       return (
-        <Link
-          onClick={() =>
-            trackAnalytics('performance_views.sample_spans.opened', {
-              organization,
-              source: ModuleName.SCREEN_LOAD,
-            })
-          }
-          to={`${pathname}?${qs.stringify(query)}`}
-        >
+        <Link to={`${pathname}?${qs.stringify(query)}`}>
           <OverflowEllipsisTextContainer>{label}</OverflowEllipsisTextContainer>
         </Link>
       );

static/app/views/performance/queues/destinationSummary/messageSpanSamplesPanel.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useCallback} from 'react';
 import styled from '@emotion/styled';
 import * as qs from 'query-string';
 
@@ -153,9 +153,18 @@ export function MessageSpanSamplesPanel() {
     });
   };
 
+  const handleOpen = useCallback(() => {
+    if (query.transaction) {
+      trackAnalytics('performance_views.sample_spans.opened', {
+        organization,
+        source: ModuleName.QUEUE,
+      });
+    }
+  }, [organization, query.transaction]);
+
   return (
     <PageAlertProvider>
-      <DetailPanel detailKey={detailKey} onClose={handleClose}>
+      <DetailPanel detailKey={detailKey} onClose={handleClose} onOpen={handleOpen}>
         <ModuleLayout.Layout>
           <ModuleLayout.Full>
             <HeaderContainer>