feat(explore-sus-attrs): Virtualizing list of charts. (#95434)

Abdkhan14 · Abdullah Khan · web-flow · commit cc1f2d4265bf · 2025-07-14T15:36:22.000-04:00
The functionality in this PR is under the flag `performance-spans-suspect-attributes`: - Virtualizes the list of charts - Adds search - Fixes tooltip (we couldn't append tooltip to `document.body` without virtualization. It's too expensive, when we have hundreds of charts, otherwise). <img width="848" height="805" alt="Screenshot 2025-07-14 at 1 14 35 AM" src="https://github.com/user-attachments/assets/74946b5e-c946-42bf-84c9-4bc406d700fe" /> --------- Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>
diff --git a/static/app/views/explore/components/suspectTags/charts.tsx b/static/app/views/explore/components/suspectTags/charts.tsx
@@ -2,6 +2,8 @@ import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import type {Theme} from '@emotion/react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
+import type {Virtualizer} from '@tanstack/react-virtual';
+import {useVirtualizer} from '@tanstack/react-virtual';
 import type {TooltipComponentFormatterCallbackParams} from 'echarts';
 import type {CallbackDataParams} from 'echarts/types/dist/shared';
 
@@ -17,16 +19,38 @@ const BASELINE_SERIES_NAME = 'baseline';
 
 type Props = {
   rankedAttributes: SuspectAttributesResult['rankedAttributes'];
+  searchQuery: string;
 };
 
 // TODO Abdullah Khan: Add virtualization and search to the list of charts
-export function Charts({rankedAttributes}: Props) {
+export function Charts({rankedAttributes, searchQuery}: Props) {
   const theme = useTheme();
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: rankedAttributes.length,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => 200,
+    overscan: 5,
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
   return (
-    <ChartsWrapper>
-      {rankedAttributes.map(attribute => (
-        <Chart key={attribute.attributeName} attribute={attribute} theme={theme} />
-      ))}
+    <ChartsWrapper ref={scrollContainerRef}>
+      <AllItemsContainer height={virtualizer.getTotalSize()}>
+        {virtualItems.map(item => (
+          <VirtualOffset key={item.index} offset={item.start}>
+            <Chart
+              key={`${item.key}+${searchQuery}`}
+              index={item.index}
+              virtualizer={virtualizer}
+              attribute={rankedAttributes[item.index]!}
+              theme={theme}
+            />
+          </VirtualOffset>
+        ))}
+      </AllItemsContainer>
     </ChartsWrapper>
   );
 }
@@ -103,9 +127,13 @@ function cohortTotals(
 function Chart({
   attribute,
   theme,
+  index,
+  virtualizer,
 }: {
   attribute: SuspectAttributesResult['rankedAttributes'][number];
+  index: number;
   theme: Theme;
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
 }) {
   const chartRef = useRef<ReactEchartsRef>(null);
   const [hideLabels, setHideLabels] = useState(false);
@@ -181,7 +209,10 @@ function Chart({
         ? {adjective: 'different', message: 'This is suspicious.'}
         : {adjective: 'similar', message: 'Nothing unusual here.'};
 
-      return `<div style="max-width: 200px; white-space: normal; word-wrap: break-word; line-height: 1.2;">${selectedParam?.name} <span style="color: ${theme.textColor};">is <strong>${status.adjective}</strong> ${isDifferent ? 'between' : 'across'} selected and baseline data. ${status.message}</span></div>`;
+      const name = selectedParam?.name ?? baselineParam?.name ?? '';
+      const truncatedName = name.length > 300 ? `${name.slice(0, 300)}...` : name;
+
+      return `<div style="max-width: 200px; white-space: normal; word-wrap: break-word; line-height: 1.2;">${truncatedName} <span style="color: ${theme.textColor};">is <strong>${status.adjective}</strong> ${isDifferent ? 'between' : 'across'} selected and baseline data. ${status.message}</span></div>`;
     },
     [seriesTotals, theme.textColor]
   );
@@ -206,88 +237,103 @@ function Chart({
   }, [attribute]);
 
   return (
-    <ChartWrapper>
-      <ChartTitle>{attribute.attributeName}</ChartTitle>
-      <BaseChart
-        ref={chartRef}
-        autoHeightResize
-        isGroupedByDate={false}
-        tooltip={{
-          renderMode: 'html',
-          valueFormatter,
-          formatAxisLabel,
-        }}
-        grid={{
-          left: 2,
-          right: 8,
-          containLabel: true,
-        }}
-        xAxis={{
-          show: true,
-          type: 'category',
-          data: seriesData[SELECTED_SERIES_NAME].map(cohort => cohort.label),
-          truncate: 14,
-          axisLabel: hideLabels
-            ? {show: false}
-            : {
-                hideOverlap: true,
-                showMaxLabel: false,
-                showMinLabel: false,
-                color: '#000',
-                interval: 0,
-                formatter: (value: string) => value,
+    <div ref={virtualizer.measureElement} data-index={index}>
+      <ChartWrapper>
+        <ChartTitle>{attribute.attributeName}</ChartTitle>
+        <BaseChart
+          ref={chartRef}
+          autoHeightResize
+          isGroupedByDate={false}
+          tooltip={{
+            trigger: 'axis',
+            appendToBody: true,
+            renderMode: 'html',
+            valueFormatter,
+            formatAxisLabel,
+          }}
+          grid={{
+            left: 2,
+            right: 8,
+            containLabel: true,
+          }}
+          xAxis={{
+            show: true,
+            type: 'category',
+            data: seriesData[SELECTED_SERIES_NAME].map(cohort => cohort.label),
+            truncate: 14,
+            axisLabel: hideLabels
+              ? {show: false}
+              : {
+                  hideOverlap: true,
+                  showMaxLabel: false,
+                  showMinLabel: false,
+                  color: '#000',
+                  interval: 0,
+                  formatter: (value: string) => value,
+                },
+          }}
+          yAxis={{
+            type: 'value',
+            axisLabel: {
+              show: false,
+              width: 0,
+            },
+          }}
+          series={[
+            {
+              type: 'bar',
+              data: seriesData[SELECTED_SERIES_NAME].map(cohort => cohort.value),
+              name: SELECTED_SERIES_NAME,
+              itemStyle: {
+                color: cohort1Color,
               },
-        }}
-        yAxis={{
-          type: 'value',
-          axisLabel: {
-            show: false,
-            width: 0,
-          },
-        }}
-        series={[
-          {
-            type: 'bar',
-            data: seriesData[SELECTED_SERIES_NAME].map(cohort => cohort.value),
-            name: SELECTED_SERIES_NAME,
-            itemStyle: {
-              color: cohort1Color,
+              barMaxWidth: MAX_BAR_WIDTH,
+              animation: false,
             },
-            barMaxWidth: MAX_BAR_WIDTH,
-            animation: false,
-          },
-          {
-            type: 'bar',
-            data: seriesData[BASELINE_SERIES_NAME].map(cohort => cohort.value),
-            name: BASELINE_SERIES_NAME,
-            itemStyle: {
-              color: cohort2Color,
+            {
+              type: 'bar',
+              data: seriesData[BASELINE_SERIES_NAME].map(cohort => cohort.value),
+              name: BASELINE_SERIES_NAME,
+              itemStyle: {
+                color: cohort2Color,
+              },
+              barMaxWidth: MAX_BAR_WIDTH,
+              animation: false,
             },
-            barMaxWidth: MAX_BAR_WIDTH,
-            animation: false,
-          },
-        ]}
-      />
-    </ChartWrapper>
+          ]}
+        />
+      </ChartWrapper>
+    </div>
   );
 }
 
 const ChartsWrapper = styled('div')`
-  flex: 1;
+  height: 100%;
   overflow: auto;
   overflow-y: scroll;
   overscroll-behavior: none;
 `;
 
+const AllItemsContainer = styled('div')<{height: number}>`
+  position: relative;
+  width: 100%;
+  height: ${p => p.height}px;
+`;
+
+const VirtualOffset = styled('div')<{offset: number}>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(${p => p.offset}px);
+`;
+
 const ChartWrapper = styled('div')`
   display: flex;
   flex-direction: column;
   height: 200px;
-  padding: ${space(2)} ${space(2)} 0 ${space(2)};
-
-  &:not(:last-child) {
-    border-bottom: 1px solid ${p => p.theme.border};
-  }
+  padding-top: ${space(1.5)};
+  border-top: 1px solid ${p => p.theme.border};
 `;
 
 const ChartTitle = styled('div')`
diff --git a/static/app/views/explore/components/suspectTags/drawer.tsx b/static/app/views/explore/components/suspectTags/drawer.tsx
@@ -1,10 +1,13 @@
+import {Fragment, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {DrawerBody, DrawerHeader} from 'sentry/components/globalDrawer/components';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import BaseSearchBar from 'sentry/components/searchBar';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 import type {ChartInfo} from 'sentry/views/explore/charts';
 import {Charts} from 'sentry/views/explore/components/suspectTags/charts';
 import type {BoxSelectOptions} from 'sentry/views/explore/hooks/useChartBoxSelect';
@@ -17,6 +20,29 @@ type Props = {
 
 export function Drawer({boxSelectOptions, chartInfo}: Props) {
   const {data, isLoading, isError} = useSuspectAttributes({boxSelectOptions, chartInfo});
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredRankedAttributes = useMemo(() => {
+    const attrs = data?.rankedAttributes;
+    if (!attrs) {
+      return [];
+    }
+
+    if (!searchQuery.trim()) {
+      return attrs;
+    }
+
+    const searchFor = searchQuery.toLocaleLowerCase().trim();
+
+    return attrs.filter(attr =>
+      attr.attributeName.toLocaleLowerCase().trim().includes(searchFor)
+    );
+  }, [searchQuery, data?.rankedAttributes]);
+
+  // We use the search query as a key to virtual list items, to correctly re-mount
+  // charts that were invisible before the user searched for it. Debouncing the search
+  // query here to ensure smooth typing, by delaying the re-mounts a little as the user types.
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 100);
 
   return (
     <DrawerContainer>
@@ -33,26 +59,48 @@ export function Drawer({boxSelectOptions, chartInfo}: Props) {
         ) : isError ? (
           <LoadingError message={t('Failed to load suspect attributes')} />
         ) : (
-          <Charts rankedAttributes={data!.rankedAttributes} />
+          <Fragment>
+            <StyledBaseSearchBar
+              placeholder={t('Search keys')}
+              onChange={query => setSearchQuery(query)}
+              query={searchQuery}
+              size="sm"
+            />
+            {filteredRankedAttributes.length > 0 ? (
+              <Charts
+                rankedAttributes={filteredRankedAttributes}
+                searchQuery={debouncedSearchQuery}
+              />
+            ) : (
+              <NoAttributesMessage>
+                {t('No matching attributes found')}
+              </NoAttributesMessage>
+            )}
+          </Fragment>
         )}
       </StyledDrawerBody>
     </DrawerContainer>
   );
 }
 
 const Title = styled('h4')`
-  margin: 0;
+  margin-bottom: ${space(0.5)};
   flex-shrink: 0;
 `;
 
-const SubTitle = styled('span')``;
+const StyledBaseSearchBar = styled(BaseSearchBar)`
+  margin-bottom: ${space(1.5)};
+`;
+
+const SubTitle = styled('span')`
+  margin-bottom: ${space(3)};
+`;
 
 const StyledDrawerBody = styled(DrawerBody)`
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: ${space(1)};
 `;
 
 const DrawerContainer = styled('div')`
@@ -64,3 +112,11 @@ const DrawerContainer = styled('div')`
     flex-shrink: 0;
   }
 `;
+
+const NoAttributesMessage = styled('div')`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: ${space(4)};
+  color: ${p => p.theme.subText};
+`;
