feat(flags): Implement a switcher to test suspect heuristics vs RRF ranking

static/app/components/issues/suspect/suspectTable.tsx

@@ -1,5 +1,7 @@
+import {useState} from 'react';
 import styled from '@emotion/styled';
 
+import {SegmentedControl} from 'sentry/components/core/segmentedControl';
 import SuspectFlags from 'sentry/components/issues/suspect/suspectFlags';
 import useSuspectFlags from 'sentry/components/issues/suspect/useSuspectFlags';
 import {space} from 'sentry/styles/space';
@@ -11,9 +13,13 @@ interface Props {
 }
 
 export default function SuspectTable({environments, group}: Props) {
+  const [displayMode, setDisplayMode] = useState<'filters' | 'filter_rrf' | 'rrf'>(
+    'filters'
+  );
   const {displayFlags, isPending, susFlags} = useSuspectFlags({
     environments,
     group,
+    displayMode,
   });
 
   if (!displayFlags) {
@@ -22,7 +28,16 @@ export default function SuspectTable({environments, group}: Props) {
 
   return (
     <GradientBox>
-      <SuspectFlags isPending={isPending} susFlags={susFlags} />
+      <SegmentedControl size="xs" onChange={setDisplayMode} value={displayMode}>
+        <SegmentedControl.Item key="filters">Heuristics Only</SegmentedControl.Item>
+        <SegmentedControl.Item key="filter_rrf">
+          Heuristics + Sort (RRF)
+        </SegmentedControl.Item>
+        <SegmentedControl.Item key="rrf">Sort (RRF)</SegmentedControl.Item>
+      </SegmentedControl>
+      <ScrolledBox>
+        <SuspectFlags isPending={isPending} susFlags={susFlags} />
+      </ScrolledBox>
     </GradientBox>
   );
 }
@@ -43,3 +58,8 @@ const GradientBox = styled('div')`
   display: flex;
   flex-direction: column;
 `;
+
+const ScrolledBox = styled('div')`
+  overflow: scroll;
+  max-height: 300px;
+`;

static/app/components/issues/suspect/useSuspectFlags.tsx

@@ -7,11 +7,12 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useGroupFlagDrawerData from 'sentry/views/issueDetails/groupFeatureFlags/hooks/useGroupFlagDrawerData';
 
 interface Props {
+  displayMode: 'filters' | 'filter_rrf' | 'rrf';
   environments: string[];
   group: Group;
 }
 
-export default function useSuspectFlags({environments, group}: Props) {
+export default function useSuspectFlags({displayMode, environments, group}: Props) {
   const organization = useOrganization();
 
   const {displayFlags, isPending: isDrawerDataPending} = useGroupFlagDrawerData({
@@ -23,45 +24,65 @@ export default function useSuspectFlags({environments, group}: Props) {
   });
 
   const filteredFlags = useMemo(() => {
-    return displayFlags.filter(flag => {
-      const uniqueBaselineValueCount = Object.keys(
-        flag.distribution?.baseline ?? {}
-      ).length;
-      const uniqueOutlierValueCount = Object.keys(
-        flag.distribution?.outliers ?? {}
-      ).length;
-      const everyExampleIncludesFlag = group.userCount < flag.totalValues;
-      return (
-        uniqueOutlierValueCount === 1 &&
-        uniqueBaselineValueCount > 1 &&
-        everyExampleIncludesFlag
+    if (displayMode === 'filters' || displayMode === 'filter_rrf') {
+      return displayFlags.filter(flag => {
+        const uniqueBaselineValueCount = Object.keys(
+          flag.distribution?.baseline ?? {}
+        ).length;
+        const uniqueOutlierValueCount = Object.keys(
+          flag.distribution?.outliers ?? {}
+        ).length;
+        const everyExampleIncludesFlag = group.userCount <= flag.totalValues;
+        return (
+          uniqueOutlierValueCount === 1 &&
+          uniqueBaselineValueCount > 1 &&
+          everyExampleIncludesFlag
+        );
+      });
+    }
+    return displayFlags;
+  }, [displayFlags, group.userCount, displayMode]);
+
+  const sortedFlags = useMemo(() => {
+    if (displayMode === 'filter_rrf' || displayMode === 'rrf') {
+      return filteredFlags.sort(
+        (a, b) => (b.suspect.score ?? 0) - (a.suspect.score ?? 0)
       );
-    });
-  }, [displayFlags, group.userCount]);
+    }
+    return filteredFlags;
+  }, [filteredFlags, displayMode]);
 
-  const needFlagDates = !isDrawerDataPending && filteredFlags.length > 0;
+  const needFlagDates =
+    !isDrawerDataPending &&
+    sortedFlags.length > 0 &&
+    (displayMode === 'filters' || displayMode === 'filter_rrf');
   const {data: flagsDates, isPending: isFlagsDatesPending} = useOrganizationFlagLog({
     organization,
     query: {
-      flag: filteredFlags.map(flag => flag.key),
+      flag: sortedFlags.map(flag => flag.key),
     },
     enabled: needFlagDates,
   });
 
   const flagsWithChanges = useMemo(() => {
-    return filteredFlags.map(flag => ({
-      ...flag,
-      changes: flagsDates?.data?.filter(date => date.flag === flag.key),
-      changeBeforeFirstSeen: flagsDates?.data?.filter(
-        date => date.flag === flag.key && date.createdAt < group.firstSeen
-      ),
-    }));
-  }, [filteredFlags, flagsDates, group.firstSeen]);
+    if (displayMode === 'filters' || displayMode === 'filter_rrf') {
+      return sortedFlags.map(flag => ({
+        ...flag,
+        changes: flagsDates?.data?.filter(date => date.flag === flag.key),
+        changeBeforeFirstSeen: flagsDates?.data?.filter(
+          date => date.flag === flag.key && date.createdAt < group.firstSeen
+        ),
+      }));
+    }
+    return sortedFlags;
+  }, [sortedFlags, flagsDates, group.firstSeen, displayMode]);
 
-  const susFlags = useMemo(
-    () => flagsWithChanges.filter(flag => flag.changes?.length),
-    [flagsWithChanges]
-  );
+  const susFlags = useMemo(() => {
+    if (displayMode === 'filters' || displayMode === 'filter_rrf') {
+      return flagsWithChanges.filter(flag => flag.changes?.length);
+    }
+    return flagsWithChanges;
+  }, [flagsWithChanges, displayMode]);
 
   return {
     displayFlags,

static/app/views/issueDetails/groupFeatureFlags/types.ts

@@ -9,4 +9,5 @@ export interface FlagDrawerItem extends GroupTag {
     baselinePercent: undefined | number;
     score: undefined | number;
   };
+  changes?: unknown[];
 }