feat(explore-attr-breakdown): Updating cta visibility logic (getsentry#103696)

- Logic for dismissing was flipped
- Only displaying cta for the first chart for multi-chart scenarios, to
avoid crowding
<img width="1107" height="471" alt="Screenshot 2025-11-19 at 6 18 56 PM"
src="https://github.com/user-attachments/assets/71f85334-f15e-43fd-9e05-4c5e71873879"
/>

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

Author: Abdkhan14

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

@@ -18,7 +18,7 @@ import {useChartSelection} from './chartSelectionContext';
 
 const PANEL_WIDTH = '400px';
 const ILLUSTRATION_HEIGHT = '120px';
-const LOCAL_STORAGE_KEY = 'explore:attribute-breakdowns-cta-visible';
+const LOCAL_STORAGE_KEY = 'explore:attribute-breakdowns-cta-dismissed';
 const CTA_DELAY_MS = 1000;
 
 export function AttributeComparisonCTA({children}: {children: React.ReactNode}) {
@@ -58,7 +58,7 @@ export function AttributeComparisonCTA({children}: {children: React.ReactNode})
                 icon={<IconClose size="sm" />}
                 borderless
                 aria-label={t('Attribute Breakdowns CTA dismissed')}
-                onClick={() => setIsDismissed(false)}
+                onClick={() => setIsDismissed(true)}
               />
             </Flex>
             <Text size="xs" align="left">

static/app/views/explore/spans/charts/index.tsx

@@ -264,45 +264,51 @@ function Chart({
     </Fragment>
   );
 
+  const widget = (
+    <Widget
+      Title={Title}
+      Actions={Actions}
+      Visualization={
+        visualize.visible && (
+          <ChartVisualization
+            chartInfo={chartInfo}
+            chartRef={chartRef}
+            brush={boxSelectOptions.brush}
+            onBrushEnd={boxSelectOptions.onBrushEnd}
+            onBrushStart={boxSelectOptions.onBrushStart}
+            toolBox={boxSelectOptions.toolBox}
+          />
+        )
+      }
+      Footer={
+        visualize.visible && (
+          <ConfidenceFooter
+            extrapolate={extrapolate}
+            sampleCount={chartInfo.sampleCount}
+            isLoading={chartInfo.timeseriesResult?.isPending || false}
+            isSampled={chartInfo.isSampled}
+            confidence={chartInfo.confidence}
+            topEvents={
+              topEvents ? Math.min(topEvents, chartInfo.series.length) : undefined
+            }
+            dataScanned={chartInfo.dataScanned}
+            rawSpanCounts={rawSpanCounts}
+            userQuery={query.trim()}
+          />
+        )
+      }
+      height={chartHeight}
+      revealActions="always"
+    />
+  );
+
   return (
     <ChartWrapper ref={chartWrapperRef}>
-      <AttributeComparisonCTA>
-        <Widget
-          Title={Title}
-          Actions={Actions}
-          Visualization={
-            visualize.visible && (
-              <ChartVisualization
-                chartInfo={chartInfo}
-                chartRef={chartRef}
-                brush={boxSelectOptions.brush}
-                onBrushEnd={boxSelectOptions.onBrushEnd}
-                onBrushStart={boxSelectOptions.onBrushStart}
-                toolBox={boxSelectOptions.toolBox}
-              />
-            )
-          }
-          Footer={
-            visualize.visible && (
-              <ConfidenceFooter
-                extrapolate={extrapolate}
-                sampleCount={chartInfo.sampleCount}
-                isLoading={chartInfo.timeseriesResult?.isPending || false}
-                isSampled={chartInfo.isSampled}
-                confidence={chartInfo.confidence}
-                topEvents={
-                  topEvents ? Math.min(topEvents, chartInfo.series.length) : undefined
-                }
-                dataScanned={chartInfo.dataScanned}
-                rawSpanCounts={rawSpanCounts}
-                userQuery={query.trim()}
-              />
-            )
-          }
-          height={chartHeight}
-          revealActions="always"
-        />
-      </AttributeComparisonCTA>
+      {index === 0 ? ( // Only show the CTA on the first chart
+        <AttributeComparisonCTA>{widget}</AttributeComparisonCTA>
+      ) : (
+        widget
+      )}
       <FloatingTrigger
         chartInfo={chartInfo}
         setTab={setTab}