import { Suspense, type HTMLAttributes, type ReactElement, type MouseEvent } from 'react' import { mdiPlay } from '@mdi/js' import { useDebouncedCallback } from 'use-debounce' import { pluralize } from '@sourcegraph/common' import { NotAvailableReasonType, type SearchAggregationMode } from '@sourcegraph/shared/src/graphql-operations' import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent' import { Text, Link, Tooltip, Button, Icon, ErrorAlert, ErrorMessage } from '@sourcegraph/wildcard' import type { SearchAggregationDatum, GetSearchAggregationResult } from '../../../../../../graphql-operations' import { type AggregationChartProps, AggregationTextContent, AggregationContent } from './components' import styles from './AggregationChartCard.module.scss' const LazyAggregationChart = lazyComponent, string>( () => import('./components/AggregationChart'), 'AggregationChart' ) LazyAggregationChart.displayName = 'LazyAggregationChart' /** Set custom value for minimal rotation angle for X ticks in sidebar UI panel mode. */ const MIN_X_TICK_ROTATION = 30 const MAX_SHORT_LABEL_WIDTH = 8 const MAX_LABEL_WIDTH = 16 const MAX_BARS_FULL_MODE = 30 const MAX_BARS_PREVIEW_MOD = 10 const getName = (datum: SearchAggregationDatum): string => datum.label ?? '' const getValue = (datum: SearchAggregationDatum): number => datum.count const getLink = (datum: SearchAggregationDatum): string => datum.query ?? '' const getColor = (): string => 'var(--primary)' /** * Nested aggregation results types from {@link AGGREGATION_SEARCH_QUERY} GQL query */ type SearchAggregationResult = GetSearchAggregationResult['searchQueryAggregate']['aggregations'] function getAggregationError( aggregation?: SearchAggregationResult ): { error: Error; type: NotAvailableReasonType } | undefined { if (aggregation?.__typename === 'SearchAggregationNotAvailable') { return { error: new Error(aggregation.reason), type: aggregation.reasonType } } return } export function getAggregationData(aggregations: SearchAggregationResult, limit?: number): SearchAggregationDatum[] { switch (aggregations?.__typename) { case 'ExhaustiveSearchAggregationResult': case 'NonExhaustiveSearchAggregationResult': { return limit !== undefined ? aggregations.groups.slice(0, limit) : aggregations.groups } default: { return [] } } } export function getOtherGroupCount(aggregations: SearchAggregationResult, limit: number): number { switch (aggregations?.__typename) { case 'ExhaustiveSearchAggregationResult': { return (aggregations.otherGroupCount ?? 0) + Math.max(aggregations.groups.length - limit, 0) } case 'NonExhaustiveSearchAggregationResult': { return (aggregations.approximateOtherGroupCount ?? 0) + Math.max(aggregations.groups.length - limit, 0) } default: { return 0 } } } interface AggregationChartCardProps extends HTMLAttributes { data?: SearchAggregationResult error?: Error loading: boolean mode?: SearchAggregationMode | null size?: 'sm' | 'md' showLoading?: boolean onBarHover: () => void onBarLinkClick?: (query: string, barIndex: number) => void onExtendTimeout: () => void } export function AggregationChartCard(props: AggregationChartCardProps): ReactElement | null { const { data, error, loading, mode, className, size = 'sm', showLoading = false, 'aria-label': ariaLabel, onBarLinkClick, onBarHover, onExtendTimeout, } = props const onBarHoverDebounced = useDebouncedCallback(onBarHover, 300) if (loading) { return ( {showLoading && Loading} ) } // Internal error if (error) { return ( ) } const aggregationError = getAggregationError(data) if (aggregationError) { return ( {aggregationError.type === NotAvailableReasonType.TIMEOUT_EXTENSION_AVAILABLE ? ( ) : ( <> We couldn’t provide an aggregation for this query.{' '} {' '} Learn more )} ) } if (!data) { return null } const maxBarsLimit = size === 'sm' ? MAX_BARS_PREVIEW_MOD : MAX_BARS_FULL_MODE const aggregationData = getAggregationData(data, maxBarsLimit) const missingCount = getOtherGroupCount(data, maxBarsLimit) if (aggregationData.length === 0) { return ( No data to display ) } const handleDatumLinkClick = (event: MouseEvent, datum: SearchAggregationDatum, index: number): void => { event.preventDefault() onBarLinkClick?.(getLink(datum), index) } const handleMouseLeave = (): void => { onBarHoverDebounced.cancel() } return ( {!!missingCount && ( +{missingCount} )} ) }