diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx index 7ff1e1522dc3..84ef7846db12 100644 --- a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx +++ b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx @@ -49,7 +49,11 @@ import type { 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 @@ export interface TimeSeriesWidgetVisualizationProps extends Partial void; + /** * Defines the legend's visibility. * @@ -682,6 +688,10 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati }; const handleClick: EChartClickHandler = event => { + if (event.seriesId === DROPPED_DATA_SERIES_ID) { + props.onDroppedDataClick?.(event.data as AnnotationBucket); + return; + } runHandler(event, 'onClick'); }; diff --git a/static/app/views/explore/components/chart/chartVisualization.tsx b/static/app/views/explore/components/chart/chartVisualization.tsx index 7bdfdb473463..bc6286a4d010 100644 --- a/static/app/views/explore/components/chart/chartVisualization.tsx +++ b/static/app/views/explore/components/chart/chartVisualization.tsx @@ -18,6 +18,7 @@ import {Bars} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/ 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 @@ interface ChartVisualizationProps { chartXRangeSelection?: Partial; droppedData?: Annotation[]; showDroppedData?: boolean; + onDroppedDataClick?: (bucket: AnnotationBucket) => void; } export function useChartVisualizationPlottables(chartInfo: ChartInfo) { @@ -68,6 +70,7 @@ export function ChartVisualization({ chartRef, droppedData, showDroppedData, + onDroppedDataClick, }: ChartVisualizationProps) { const plottables = useChartVisualizationPlottables(chartInfo); const previousPlottables = usePrevious( @@ -117,6 +120,7 @@ export function ChartVisualization({ chartXRangeSelection={chartXRangeSelection} droppedData={droppedData} showDroppedData={showDroppedData} + onDroppedDataClick={onDroppedDataClick} /> ); diff --git a/static/app/views/explore/components/chart/droppedDataBand/droppedDataPanelContent.tsx b/static/app/views/explore/components/chart/droppedDataBand/droppedDataPanelContent.tsx new file mode 100644 index 000000000000..569953672a0d --- /dev/null +++ b/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 ( + + + + + Dropped Data + + + ); +} diff --git a/static/app/views/explore/components/chart/droppedDataBand/useDroppedDataBand.tsx b/static/app/views/explore/components/chart/droppedDataBand/useDroppedDataBand.tsx index 4b397bf93c3d..729961f5ce76 100644 --- a/static/app/views/explore/components/chart/droppedDataBand/useDroppedDataBand.tsx +++ b/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: () => ''}, }; } diff --git a/static/app/views/explore/spans/charts/index.tsx b/static/app/views/explore/spans/charts/index.tsx index fa8dea7f3743..baaaacadbfa3 100644 --- a/static/app/views/explore/spans/charts/index.tsx +++ b/static/app/views/explore/spans/charts/index.tsx @@ -4,6 +4,7 @@ import styled from '@emotion/styled'; 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 @@ import { 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 @@ function Chart({ : undefined; const hasDroppedData = defined(droppedData) && droppedData.length > 0; const [showDroppedData, setShowDroppedData] = useState(true); + const [selectedDroppedDataBucket, setSelectedDroppedDataBucket] = + useState(null); const { dismiss: dismissChartSelectionAlert, isDismissed: isChartSelectionAlertDismissed, @@ -356,77 +361,89 @@ function Chart({ chartSelection?.chartIndex === index ? chartSelection.selection : undefined; return ( - - { - 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 ; - }, - }} - /> - ) - } - Footer={ - visualize.visible && ( - - ) - } - height={chartHeight} - revealActions="always" - /> - + <> + + + 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 ; + }, + }} + /> + ) + } + Footer={ + visualize.visible && ( + + ) + } + height={chartHeight} + revealActions="always" + /> + + {selectedDroppedDataBucket && ( + + setSelectedDroppedDataBucket(null)} + > + + )} + ); }