feat(explore-attr-breakdowns): Removing hovering CTA (#104144)

Before (it's too invasive):
<img width="1061" height="799" alt="Screenshot 2025-11-28 at 5 08 41 PM"
src="https://github.com/user-attachments/assets/4ef20d74-b70a-4704-b8e1-bf162f316074"
/>

After: 
<img width="1096" height="647" alt="Screenshot 2025-11-28 at 5 10 08 PM"
src="https://github.com/user-attachments/assets/6614d925-c1de-4b4a-8478-453d8c446e19"
/>

---------

Co-authored-by: Abdullah Khan <[email protected]>

Author: Abdkhan14

static/app/views/explore/components/attributeBreakdowns/attributeComparisonCTA.tsx

@@ -5,7 +5,9 @@ import styled from '@emotion/styled';
 import {Button} from '@sentry/scraps/button/button';
 import {ButtonBar} from '@sentry/scraps/button/buttonBar';
 import {Flex} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text/text';
 
+import {Alert} from 'sentry/components/core/alert';
 import Panel from 'sentry/components/panels/panel';
 import BaseSearchBar from 'sentry/components/searchBar';
 import {IconChevron} from 'sentry/icons/iconChevron';
@@ -142,75 +144,86 @@ export function AttributeDistribution() {
 
   return (
     <Panel>
-      <Flex direction="column" gap="2xl" padding="xl">
-        <Fragment>
-          <ControlsContainer>
-            <StyledBaseSearchBar
-              placeholder={t('Search keys')}
-              onChange={q => {
-                setSearchQuery(q);
-              }}
-              query={debouncedSearchQuery}
-              size="sm"
-            />
-            <AttributeBreakdownsComponent.FeedbackButton />
-          </ControlsContainer>
-          {isAttributeBreakdownsLoading || isCohortCountLoading ? (
-            <AttributeBreakdownsComponent.LoadingCharts />
-          ) : error ? (
-            <AttributeBreakdownsComponent.ErrorState error={error} />
-          ) : filteredAttributeDistribution.length > 0 ? (
-            <Fragment>
-              <ChartsGrid>
-                {filteredAttributeDistribution
-                  .slice(page * CHARTS_PER_PAGE, (page + 1) * CHARTS_PER_PAGE)
-                  .map(attribute => (
-                    <Chart
-                      key={attribute.name}
-                      attributeDistribution={attribute}
-                      cohortCount={cohortCount}
-                      theme={theme}
-                    />
-                  ))}
-              </ChartsGrid>
-              <PaginationContainer>
-                <ButtonBar merged gap="0">
-                  <Button
-                    icon={<IconChevron direction="left" />}
-                    aria-label={t('Previous')}
-                    size="sm"
-                    disabled={page === 0}
-                    onClick={() => {
-                      setPage(page - 1);
-                    }}
+      <Flex direction="column" gap="xl" padding="xl">
+        <ChartSelectionAlert />
+        <ControlsContainer>
+          <StyledBaseSearchBar
+            placeholder={t('Search keys')}
+            onChange={q => {
+              setSearchQuery(q);
+            }}
+            query={debouncedSearchQuery}
+            size="sm"
+          />
+          <AttributeBreakdownsComponent.FeedbackButton />
+        </ControlsContainer>
+        {isAttributeBreakdownsLoading || isCohortCountLoading ? (
+          <AttributeBreakdownsComponent.LoadingCharts />
+        ) : error ? (
+          <AttributeBreakdownsComponent.ErrorState error={error} />
+        ) : filteredAttributeDistribution.length > 0 ? (
+          <Fragment>
+            <ChartsGrid>
+              {filteredAttributeDistribution
+                .slice(page * CHARTS_PER_PAGE, (page + 1) * CHARTS_PER_PAGE)
+                .map(attribute => (
+                  <Chart
+                    key={attribute.name}
+                    attributeDistribution={attribute}
+                    cohortCount={cohortCount}
+                    theme={theme}
                   />
-                  <Button
-                    icon={<IconChevron direction="right" />}
-                    aria-label={t('Next')}
-                    size="sm"
-                    disabled={
-                      page ===
-                      Math.ceil(
-                        (filteredAttributeDistribution?.length ?? 0) / CHARTS_PER_PAGE
-                      ) -
-                        1
-                    }
-                    onClick={() => {
-                      setPage(page + 1);
-                    }}
-                  />
-                </ButtonBar>
-              </PaginationContainer>
-            </Fragment>
-          ) : (
-            <AttributeBreakdownsComponent.EmptySearchState />
-          )}
-        </Fragment>
+                ))}
+            </ChartsGrid>
+            <PaginationContainer>
+              <ButtonBar merged gap="0">
+                <Button
+                  icon={<IconChevron direction="left" />}
+                  aria-label={t('Previous')}
+                  size="sm"
+                  disabled={page === 0}
+                  onClick={() => {
+                    setPage(page - 1);
+                  }}
+                />
+                <Button
+                  icon={<IconChevron direction="right" />}
+                  aria-label={t('Next')}
+                  size="sm"
+                  disabled={
+                    page ===
+                    Math.ceil(
+                      (filteredAttributeDistribution?.length ?? 0) / CHARTS_PER_PAGE
+                    ) -
+                      1
+                  }
+                  onClick={() => {
+                    setPage(page + 1);
+                  }}
+                />
+              </ButtonBar>
+            </PaginationContainer>
+          </Fragment>
+        ) : (
+          <AttributeBreakdownsComponent.EmptySearchState />
+        )}
       </Flex>
     </Panel>
   );
 }
 
+function ChartSelectionAlert() {
+  return (
+    <Alert type="info">
+      <Text>
+        {t(
+          'Drag to select a region in the chart above and see how its breakdowns differ from the baseline.'
+        )}
+      </Text>
+    </Alert>
+  );
+}
+
 const ControlsContainer = styled('div')`
   display: flex;
   gap: ${space(0.5)};