feat(explore): Add dropped-data flyout panel shell

static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx

@@ -49,7 +49,11 @@
 import {WidgetLoadingPanel} from 'sentry/views/dashboards/widgets/common/widgetLoadingPanel';
 import {WidgetNoDataPanel} from 'sentry/views/dashboards/widgets/common/widgetNoDataPanel';
 import {plottablesCanBeVisualized} from 'sentry/views/dashboards/widgets/plottablesCanBeVisualized';
-import {useDroppedDataBand} from 'sentry/views/explore/components/chart/droppedDataBand/useDroppedDataBand';
+import {
+  DROPPED_DATA_SERIES_ID,
+  useDroppedDataBand,
+} from 'sentry/views/explore/components/chart/droppedDataBand/useDroppedDataBand';
+import type {AnnotationBucket} from 'sentry/views/explore/components/chart/droppedDataBand/utils';
 import {useReleaseBubbles} from 'sentry/views/explore/releases/releaseBubbles/useReleaseBubbles';
 import {makeReleaseDrawerPathname} from 'sentry/views/explore/releases/utils/pathnames';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
@@ -123,6 +127,8 @@
    */
   showDroppedData?: boolean;
 
+  onDroppedDataClick?: (bucket: AnnotationBucket) => void;
+
   /**
    * Defines the legend's visibility.
    *
@@ -682,6 +688,10 @@
   };
 
   const handleClick: EChartClickHandler = event => {
+    if (event.seriesId === DROPPED_DATA_SERIES_ID) {
+      props.onDroppedDataClick?.(event.data as AnnotationBucket);
+      return;
+    }
     runHandler(event, 'onClick');
   };
 

static/app/views/explore/components/chart/chartVisualization.tsx

@@ -18,6 +18,7 @@
 import {Line} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/line';
 import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization';
 import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
+import type {AnnotationBucket} from 'sentry/views/explore/components/chart/droppedDataBand/utils';
 import type {ChartInfo} from 'sentry/views/explore/components/chart/types';
 import {SAMPLING_MODE} from 'sentry/views/explore/hooks/useProgressiveQuery';
 import {ChartType} from 'sentry/views/insights/common/components/chart';
@@ -29,6 +30,7 @@
   chartXRangeSelection?: Partial<ChartXRangeSelectionProps>;
   droppedData?: Annotation[];
   showDroppedData?: boolean;
+  onDroppedDataClick?: (bucket: AnnotationBucket) => void;
 }
 
 export function useChartVisualizationPlottables(chartInfo: ChartInfo) {
@@ -68,6 +70,7 @@
   chartRef,
   droppedData,
   showDroppedData,
+  onDroppedDataClick,
 }: ChartVisualizationProps) {
   const plottables = useChartVisualizationPlottables(chartInfo);
   const previousPlottables = usePrevious(
@@ -117,6 +120,7 @@
         chartXRangeSelection={chartXRangeSelection}
         droppedData={droppedData}
         showDroppedData={showDroppedData}
+        onDroppedDataClick={onDroppedDataClick}
       />
     </StyledTransparentLoadingMask>
   );

static/app/views/explore/components/chart/droppedDataBand/droppedDataPanelContent.tsx

@@ -0,0 +1,31 @@
+import {Button} from '@sentry/scraps/button';
+import {Flex, Stack} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import {IconClose} from 'sentry/icons';
+import {Divider} from 'sentry/views/issueDetails/divider';
+
+interface DroppedDataPanelProps {
+  onClose: () => void;
+}
+
+export function DroppedDataPanelContent({onClose}: DroppedDataPanelProps) {
+  return (
+    <Stack>
+      <Flex
+        align="center"
+        gap="xl"
+        paddingLeft="2xl"
+        paddingTop="lg"
+        paddingBottom="lg"
+        borderBottom="primary"
+      >
+        <Button variant="transparent" size="sm" icon={<IconClose />} onClick={onClose}>
+          Close
+        </Button>
+        <Divider />
+        <Text size="md">Dropped Data</Text>
+      </Flex>
+    </Stack>
+  );
+}

static/app/views/explore/components/chart/droppedDataBand/useDroppedDataBand.tsx

@@ -122,7 +122,7 @@ function createDroppedDataSeries({
     // TODO: modify this when adding tooltip support. `trigger: 'item'` has to
     // stay either way, since it is what keeps the band out of the chart-level
     // `trigger: 'axis'` tooltip's series list.
-    silent: true,
+    silent: false,
     tooltip: {trigger: 'item', formatter: () => ''},
   };
 }

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

@@ -4,6 +4,7 @@
 import {Button} from '@sentry/scraps/button';
 import {CompactSelect} from '@sentry/scraps/compactSelect';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
+import {SlideOverPanel} from '@sentry/scraps/slideOverPanel';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {IconClock, IconContract, IconExpand, IconGraph, IconStack} from 'sentry/icons';
@@ -25,6 +26,8 @@
   ChartVisualization,
   useChartVisualizationPlottables,
 } from 'sentry/views/explore/components/chart/chartVisualization';
+import {DroppedDataPanelContent} from 'sentry/views/explore/components/chart/droppedDataBand/droppedDataPanelContent';
+import type {AnnotationBucket} from 'sentry/views/explore/components/chart/droppedDataBand/utils';
 import {SamplingWarning} from 'sentry/views/explore/components/chart/samplingWarning';
 import type {ChartInfo} from 'sentry/views/explore/components/chart/types';
 import {ChartContextMenu} from 'sentry/views/explore/components/chartContextMenu';
@@ -177,6 +180,8 @@
     : undefined;
   const hasDroppedData = defined(droppedData) && droppedData.length > 0;
   const [showDroppedData, setShowDroppedData] = useState(true);
+  const [selectedDroppedDataBucket, setSelectedDroppedDataBucket] =
+    useState<AnnotationBucket | null>(null);
   const {
     dismiss: dismissChartSelectionAlert,
     isDismissed: isChartSelectionAlertDismissed,
@@ -356,77 +361,89 @@
     chartSelection?.chartIndex === index ? chartSelection.selection : undefined;
 
   return (
-    <ChartWrapper ref={chartWrapperRef}>
-      <Widget
-        Title={Title}
-        TitleBadges={TitleBadges}
-        Actions={Actions}
-        Visualization={
-          visualize.visible && (
-            <ChartVisualization
-              chartInfo={chartInfo}
-              chartRef={chartRef}
-              droppedData={droppedData}
-              showDroppedData={showDroppedData}
-              chartXRangeSelection={{
-                initialSelection: initialChartSelection,
-                onSelectionEnd: () => {
-                  if (!isChartSelectionAlertDismissed) {
-                    dismissChartSelectionAlert();
-                  }
-                },
-                onInsideSelectionClick: params => {
-                  if (!params.selectionState) {
-                    return;
-                  }
-
-                  params.setSelectionState({
-                    ...params.selectionState,
-                    isActionMenuVisible: true,
-                  });
-                },
-                onOutsideSelectionClick: params => {
-                  if (!params.selectionState?.isActionMenuVisible) {
-                    return;
-                  }
-
-                  params.setSelectionState({
-                    ...params.selectionState,
-                    isActionMenuVisible: false,
-                  });
-                },
-                onClearSelection: () => {
-                  setChartSelection(null);
-                },
-                disabled: false,
-                actionMenuRenderer: params => {
-                  return <FloatingTrigger chartIndex={index} params={params} />;
-                },
-              }}
-            />
-          )
-        }
-        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"
-      />
-    </ChartWrapper>
+    <>
+      <ChartWrapper ref={chartWrapperRef}>
+        <Widget
+          Title={Title}
+          TitleBadges={TitleBadges}
+          Actions={Actions}
+          Visualization={
+            visualize.visible && (
+              <ChartVisualization
+                chartInfo={chartInfo}
+                chartRef={chartRef}
+                droppedData={droppedData}
+                showDroppedData={showDroppedData}
+                onDroppedDataClick={(bucket: AnnotationBucket) =>
+                  setSelectedDroppedDataBucket(bucket)
+                }
+                chartXRangeSelection={{
+                  initialSelection: initialChartSelection,
+                  onSelectionEnd: () => {
+                    if (!isChartSelectionAlertDismissed) {
+                      dismissChartSelectionAlert();
+                    }
+                  },
+                  onInsideSelectionClick: params => {
+                    if (!params.selectionState) {
+                      return;
+                    }
+
+                    params.setSelectionState({
+                      ...params.selectionState,
+                      isActionMenuVisible: true,
+                    });
+                  },
+                  onOutsideSelectionClick: params => {
+                    if (!params.selectionState?.isActionMenuVisible) {
+                      return;
+                    }
+
+                    params.setSelectionState({
+                      ...params.selectionState,
+                      isActionMenuVisible: false,
+                    });
+                  },
+                  onClearSelection: () => {
+                    setChartSelection(null);
+                  },
+                  disabled: false,
+                  actionMenuRenderer: params => {
+                    return <FloatingTrigger chartIndex={index} params={params} />;
+                  },
+                }}
+              />
+            )
+          }
+          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"
+        />
+      </ChartWrapper>
+      {selectedDroppedDataBucket && (
+        <SlideOverPanel position="right">
+          <DroppedDataPanelContent
+            onClose={() => setSelectedDroppedDataBucket(null)}
+          ></DroppedDataPanelContent>
+        </SlideOverPanel>
+      )}
+    </>
   );
 }