perf(metrics): stop re-rendering unchanged metric panels on URL changes

static/app/scrapsProviders/tracking.tsx

@@ -5,23 +5,25 @@ import {
 
 import {getOverride} from 'sentry/overrideRegistry';
 
+function logButtonClick(props: TrackingProps) {
+  const hasAnalyticsDebug = window.localStorage?.getItem('DEBUG_ANALYTICS') === '1';
+  const hasCustomAnalytics =
+    props.analyticsEventName || props.analyticsEventKey || props.analyticsParams;
+  if (hasCustomAnalytics && hasAnalyticsDebug) {
+    // eslint-disable-next-line no-console
+    console.log('buttonAnalyticsEvent', {
+      clickType: props.clickType,
+      eventKey: props.analyticsEventKey,
+      eventName: props.analyticsEventName,
+      variant: props.variant,
+      href: props.href,
+      ...props.analyticsParams,
+    });
+  }
+}
+
 function useDefaultButtonTracking() {
-  return (props: TrackingProps) => {
-    const hasAnalyticsDebug = window.localStorage?.getItem('DEBUG_ANALYTICS') === '1';
-    const hasCustomAnalytics =
-      props.analyticsEventName || props.analyticsEventKey || props.analyticsParams;
-    if (hasCustomAnalytics && hasAnalyticsDebug) {
-      // eslint-disable-next-line no-console
-      console.log('buttonAnalyticsEvent', {
-        clickType: props.clickType,
-        eventKey: props.analyticsEventKey,
-        eventName: props.analyticsEventName,
-        variant: props.variant,
-        href: props.href,
-        ...props.analyticsParams,
-      });
-    }
-  };
+  return logButtonClick;
 }
 
 export function SentryTrackingProvider({children}: {children: React.ReactNode}) {

static/app/views/explore/metrics/hooks/useSortableMetricQueries.tsx

@@ -1,7 +1,7 @@
 import {useCallback, useMemo, useState} from 'react';
 import type {DragEndEvent} from '@dnd-kit/core';
 import {KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';
-import {arrayMove, sortableKeyboardCoordinates} from '@dnd-kit/sortable';
+import {sortableKeyboardCoordinates} from '@dnd-kit/sortable';
 
 import type {MetricQuery} from 'sentry/views/explore/metrics/metricQuery';
 import {
@@ -57,14 +57,10 @@ export function useSortableMetricQueries({
           return;
         }
 
-        reorderMetricQueries(
-          arrayMove([...metricQueries], oldIndex, newIndex),
-          oldIndex,
-          newIndex
-        );
+        reorderMetricQueries(oldIndex, newIndex);
       }
     },
-    [sortableItems, metricQueries, reorderMetricQueries]
+    [sortableItems, reorderMetricQueries]
   );
 
   const onDragCancel = useCallback(() => {

static/app/views/explore/metrics/hooks/useStableLabels.tsx

@@ -77,23 +77,35 @@ function parseEquationIndex(label: string): number {
  */
 export function useStableLabels(queries: BaseMetricQuery[]) {
   const labelsRef = useRef<string[]>([]);
+  const rowIdsRef = useRef<string[]>([]);
 
   // oxlint-disable-next-line react/refs
   if (labelsRef.current.length !== queries.length) {
     // oxlint-disable-next-line react/refs
     labelsRef.current = assignSequentialLabels(queries);
+    // oxlint-disable-next-line react/refs
+    rowIdsRef.current = createRowIds(queries.length);
   }
 
   return useMemo(
     () => ({
       getLabel(i: number): string {
         return labelsRef.current[i] ?? getFunctionLabel(i);
       },
+      /**
+       * Unique per row and moved along with its label, unlike labels, which
+       * can repeat after an external navigation that keeps the row count.
+       */
+      getRowIds(): readonly string[] {
+        return rowIdsRef.current;
+      },
       insert(position: number, label: string) {
         labelsRef.current = labelsRef.current.toSpliced(position, 0, label);
+        rowIdsRef.current = rowIdsRef.current.toSpliced(position, 0, ...createRowIds(1));
       },
       remove(position: number) {
         labelsRef.current = labelsRef.current.filter((_, j) => j !== position);
+        rowIdsRef.current = rowIdsRef.current.filter((_, j) => j !== position);
       },
       move(from: number, to: number) {
         if (
@@ -106,15 +118,22 @@ export function useStableLabels(queries: BaseMetricQuery[]) {
           return;
         }
 
-        const next = [...labelsRef.current];
-        const [label] = next.splice(from, 1);
-        if (!label) {
-          return;
-        }
-        next.splice(to, 0, label);
-        labelsRef.current = next;
+        labelsRef.current = moveItem(labelsRef.current, from, to);
+        rowIdsRef.current = moveItem(rowIdsRef.current, from, to);
       },
     }),
     []
   );
 }
+
+export function moveItem<T>(items: readonly T[], from: number, to: number): T[] {
+  const next = [...items];
+  next.splice(to, 0, ...next.splice(from, 1));
+  return next;
+}
+
+let nextRowId = 0;
+
+function createRowIds(count: number): string[] {
+  return Array.from({length: count}, () => String(nextRowId++));
+}

static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx

@@ -33,6 +33,7 @@ import {GenericWidgetEmptyStateWarning} from 'sentry/views/performance/landing/w
 
 const RESULT_LIMIT = 50;
 const EMBEDDED_RESULT_LIMIT = 100;
+const EMPTY_META: EventsMetaType = {fields: {}, units: {}};
 
 interface MetricsSamplesTableProps {
   isMetricOptionsEmpty?: boolean;
@@ -59,7 +60,7 @@ export function MetricsSamplesTable({
 
   const {
     result: {data},
-    meta = {fields: {}, units: {}},
+    meta = EMPTY_META,
     error,
     isFetching,
   } = useMetricSamplesTable({

static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTableRow.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useRef, useState, type ReactNode, type RefObject} from 'react';
+import {Fragment, memo, useRef, useState, type ReactNode, type RefObject} from 'react';
 import {IconChevron} from '@sentry/icons/chevron';
 
 import {Button} from '@sentry/scraps/button';
@@ -273,7 +273,43 @@ function MetricDefaultCell({
   );
 }
 
-export function SampleTableRow({
+function TraceLinkCell({
+  organization,
+  row,
+  selection,
+}: {
+  organization: Organization;
+  row: TraceMetricEventsResponseItem;
+  selection: PageFilters;
+}) {
+  const location = useLocation();
+  const traceId = row[TraceMetricKnownFieldKey.TRACE];
+  const timestamp = row[TraceMetricKnownFieldKey.TIMESTAMP];
+  const spanId = row[TraceMetricKnownFieldKey.SPAN_ID];
+  const oldSpanId = row[TraceMetricKnownFieldKey.OLD_SPAN_ID] as string;
+  const spanIdToUse = oldSpanId || spanId;
+  const target = getTraceDetailsUrl({
+    organization,
+    traceSlug: traceId,
+    dateSelection: normalizeDateTimeParams(selection.datetime),
+    timestamp,
+    location: stripMetricParamsFromLocation(location),
+    source: TraceViewSources.TRACE_METRICS,
+    spanId: spanIdToUse || undefined,
+    // tab: spanIdToUse ? TraceLayoutTabKeys.WATERFALL : TraceLayoutTabKeys.METRICS, // TODO: Can use this if want to go to the waterfall view if we add metrics to span details.
+    tab: TraceLayoutTabKeys.METRICS,
+  });
+
+  return (
+    <WrappingText>
+      <Link to={target} style={{minWidth: '66px'}}>
+        {getShortEventId(traceId)}
+      </Link>
+    </WrappingText>
+  );
+}
+
+export const SampleTableRow = memo(function SampleTableRow({
   routingHint,
   row,
   columns,
@@ -283,7 +319,6 @@ export function SampleTableRow({
 }: SampleTableRowProps) {
   const organization = useOrganization();
   const {selection} = usePageFilters();
-  const location = useLocation();
   const [isExpanded, setIsExpanded] = useState(false);
   const measureRef = useRef<HTMLTableRowElement>(null);
   const projects = useProjects();
@@ -292,8 +327,6 @@ export function SampleTableRow({
   const projectSlug = project?.slug ?? '';
   const isEmbedded = isEmbeddedMetricsSamplesTableSource(source);
 
-  const traceId = row[TraceMetricKnownFieldKey.TRACE];
-
   const renderExpandRowCell = () => {
     return (
       <Button
@@ -307,33 +340,9 @@ export function SampleTableRow({
     );
   };
 
-  const renderTraceCell = () => {
-    const timestamp = row[TraceMetricKnownFieldKey.TIMESTAMP];
-    const spanId = row[TraceMetricKnownFieldKey.SPAN_ID];
-    const oldSpanId = row[TraceMetricKnownFieldKey.OLD_SPAN_ID] as string;
-    const spanIdToUse = oldSpanId || spanId;
-    const strippedLocation = stripMetricParamsFromLocation(location);
-
-    const target = getTraceDetailsUrl({
-      organization,
-      traceSlug: traceId,
-      dateSelection: normalizeDateTimeParams(selection.datetime),
-      timestamp,
-      location: strippedLocation,
-      source: TraceViewSources.TRACE_METRICS,
-      spanId: spanIdToUse || undefined,
-      // tab: spanIdToUse ? TraceLayoutTabKeys.WATERFALL : TraceLayoutTabKeys.METRICS, // TODO: Can use this if want to go to the waterfall view if we add metrics to span details.
-      tab: TraceLayoutTabKeys.METRICS,
-    });
-
-    return (
-      <WrappingText>
-        <Link to={target} style={{minWidth: '66px'}}>
-          {getShortEventId(traceId)}
-        </Link>
-      </WrappingText>
-    );
-  };
+  const renderTraceCell = () => (
+    <TraceLinkCell organization={organization} row={row} selection={selection} />
+  );
 
   const renderMetricTypeCell = () => {
     return <MetricTypeBadge metricType={row[TraceMetricKnownFieldKey.METRIC_TYPE]} />;
@@ -402,4 +411,4 @@ export function SampleTableRow({
       )}
     </Fragment>
   );
-}
+});