diff --git a/static/app/views/explore/components/attributeDetails.tsx b/static/app/views/explore/components/attributeDetails.tsx
new file mode 100644
index 00000000000000..d752ffffb32c4e
--- /dev/null
+++ b/static/app/views/explore/components/attributeDetails.tsx
@@ -0,0 +1,41 @@
+import type {ReactNode} from 'react';
+import styled from '@emotion/styled';
+
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {FieldKind} from 'sentry/utils/fields';
+import {getFieldDefinition} from 'sentry/utils/fields';
+
+interface AttributeDetailsProps {
+ column: string;
+ kind: FieldKind;
+ label: ReactNode;
+ type: 'span';
+}
+
+export function AttributeDetails({column, kind, label, type}: AttributeDetailsProps) {
+ const definition = getFieldDefinition(column, type, kind);
+ const description = definition?.desc ?? t('An attribute sent with one or more events');
+ return (
+
+ {label}
+ {description}
+
+ );
+}
+
+const Details = styled('div')`
+ padding: ${space(0.75)} ${space(1)};
+ max-width: 220px;
+ font-size: ${p => p.theme.fontSizeSmall};
+`;
+
+const DetailsLabel = styled('p')`
+ font-weight: ${p => p.theme.fontWeightBold};
+ word-break: break-all;
+ margin-bottom: ${space(1)};
+`;
+
+const DetailsDescription = styled('p')`
+ margin-bottom: 0px;
+`;
diff --git a/static/app/views/explore/hooks/useVisualizeFields.tsx b/static/app/views/explore/hooks/useVisualizeFields.tsx
index 02cfc37047d038..f82661e3b1a1f2 100644
--- a/static/app/views/explore/hooks/useVisualizeFields.tsx
+++ b/static/app/views/explore/hooks/useVisualizeFields.tsx
@@ -2,12 +2,11 @@ import {useMemo} from 'react';
import type {SelectOption} from 'sentry/components/core/compactSelect';
import {defined} from 'sentry/utils';
-import {
- type ParsedFunction,
- parseFunction,
- prettifyTagKey,
-} from 'sentry/utils/discover/fields';
-import {AggregationKey} from 'sentry/utils/fields';
+import type {ParsedFunction} from 'sentry/utils/discover/fields';
+import {parseFunction, prettifyTagKey} from 'sentry/utils/discover/fields';
+import {AggregationKey, FieldKind} from 'sentry/utils/fields';
+import {AttributeDetails} from 'sentry/views/explore/components/attributeDetails';
+import {TypeBadge} from 'sentry/views/explore/components/typeBadge';
import {useSpanTags} from 'sentry/views/explore/contexts/spanTagsContext';
interface Props {
@@ -37,6 +36,11 @@ export function useVisualizeFields({yAxis, yAxes}: Props) {
}, [yAxes]);
const fieldOptions: Array> = useMemo(() => {
+ const kind =
+ parsedYAxis?.name === AggregationKey.COUNT_UNIQUE
+ ? FieldKind.TAG
+ : FieldKind.MEASUREMENT;
+
const unknownOptions = parsedYAxes
.flatMap(entry => {
return entry.arguments;
@@ -46,13 +50,30 @@ export function useVisualizeFields({yAxis, yAxes}: Props) {
});
const options = [
- ...unknownOptions.map(option => ({
- label: prettifyTagKey(option),
- value: option,
- textValue: option,
- })),
+ ...unknownOptions.map(option => {
+ const label = prettifyTagKey(option);
+ return {
+ label,
+ value: option,
+ textValue: option,
+ trailingItems: ,
+ showDetailsInOverlay: true,
+ details: (
+
+ ),
+ };
+ }),
...Object.values(tags).map(tag => {
- return {label: tag.name, value: tag.key, textValue: tag.name};
+ return {
+ label: tag.name,
+ value: tag.key,
+ textValue: tag.name,
+ trailingItems: ,
+ showDetailsInOverlay: true,
+ details: (
+
+ ),
+ };
}),
];
@@ -69,7 +90,7 @@ export function useVisualizeFields({yAxis, yAxes}: Props) {
});
return options;
- }, [tags, parsedYAxes]);
+ }, [tags, parsedYAxes, parsedYAxis?.name]);
return fieldOptions;
}
diff --git a/static/app/views/explore/tables/columnEditorModal.tsx b/static/app/views/explore/tables/columnEditorModal.tsx
index 86df31c312aef1..5e5c6691c073f1 100644
--- a/static/app/views/explore/tables/columnEditorModal.tsx
+++ b/static/app/views/explore/tables/columnEditorModal.tsx
@@ -19,6 +19,7 @@ import type {TagCollection} from 'sentry/types/group';
import {defined} from 'sentry/utils';
import {classifyTagKey, prettifyTagKey} from 'sentry/utils/discover/fields';
import {FieldKind} from 'sentry/utils/fields';
+import {AttributeDetails} from 'sentry/views/explore/components/attributeDetails';
import {TypeBadge} from 'sentry/views/explore/components/typeBadge';
import {DragNDropContext} from 'sentry/views/explore/contexts/dragNDropContext';
import type {Column} from 'sentry/views/explore/hooks/useDragNDropColumns';
@@ -54,12 +55,18 @@ export function ColumnEditorModal({
!stringTags.hasOwnProperty(column) && !numberTags.hasOwnProperty(column)
)
.map(column => {
+ const kind = classifyTagKey(column);
+ const label = prettifyTagKey(column);
return {
- label: prettifyTagKey(column),
+ label,
value: column,
textValue: column,
- trailingItems: ,
+ trailingItems: ,
key: `${column}-${classifyTagKey(column)}`,
+ showDetailsInOverlay: true,
+ details: (
+
+ ),
};
}),
...Object.values(stringTags).map(tag => {
@@ -69,6 +76,15 @@ export function ColumnEditorModal({
textValue: tag.name,
trailingItems: ,
key: `${tag.key}-${FieldKind.TAG}`,
+ showDetailsInOverlay: true,
+ details: (
+
+ ),
};
}),
...Object.values(numberTags).map(tag => {
@@ -78,6 +94,15 @@ export function ColumnEditorModal({
textValue: tag.name,
trailingItems: ,
key: `${tag.key}-${FieldKind.MEASUREMENT}`,
+ showDetailsInOverlay: true,
+ details: (
+
+ ),
};
}),
];
diff --git a/static/app/views/explore/toolbar/toolbarGroupBy.tsx b/static/app/views/explore/toolbar/toolbarGroupBy.tsx
index 42d61c8c7d4467..e2ac3126785c91 100644
--- a/static/app/views/explore/toolbar/toolbarGroupBy.tsx
+++ b/static/app/views/explore/toolbar/toolbarGroupBy.tsx
@@ -12,6 +12,9 @@ import {IconDelete} from 'sentry/icons/iconDelete';
import {IconGrabbable} from 'sentry/icons/iconGrabbable';
import {t} from 'sentry/locale';
import {defined} from 'sentry/utils';
+import {classifyTagKey} from 'sentry/utils/discover/fields';
+import {AttributeDetails} from 'sentry/views/explore/components/attributeDetails';
+import {TypeBadge} from 'sentry/views/explore/components/typeBadge';
import {DragNDropContext} from 'sentry/views/explore/contexts/dragNDropContext';
import {
useExploreGroupBys,
@@ -73,7 +76,17 @@ export function ToolbarGroupBy({autoSwitchToAggregates}: ToolbarGroupBy) {
value: UNGROUPED,
textValue: t('\u2014'),
},
- ...potentialOptions.map(key => ({label: key, value: key, textValue: key})),
+ ...potentialOptions.map(key => {
+ const kind = classifyTagKey(key);
+ return {
+ label: key,
+ value: key,
+ textValue: key,
+ trailingItems: ,
+ showDetailsInOverlay: true,
+ details: ,
+ };
+ }),
];
}, [groupBys, tags]);