diff --git a/src/components/property-data/PropertyFilters.tsx b/src/components/property-data/PropertyFilters.tsx index 83cbc5b3c..6a43f01f8 100644 --- a/src/components/property-data/PropertyFilters.tsx +++ b/src/components/property-data/PropertyFilters.tsx @@ -13,16 +13,22 @@ import { Row, } from '@umami/react-zen'; import { format } from 'date-fns'; -import { Badge } from '@/components/common/Badge'; import { Empty } from '@/components/common/Empty'; import { LoadingPanel } from '@/components/common/LoadingPanel'; import { useMessages, useMobile, usePropertyFieldsQuery } from '@/components/hooks'; import type { PropertyDataSource } from '@/components/hooks/queries/usePropertyFieldsQuery'; import { Plus } from '@/components/icons'; -import { DATA_TYPE, DATA_TYPES, OPERATORS } from '@/lib/constants'; +import { DATA_TYPE, OPERATORS } from '@/lib/constants'; import type { PropertyFilter } from '@/lib/types'; import { PropertyFilterRecord } from './PropertyFilterRecord'; +const propertyNameStyle = { + display: 'block', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' as const, +}; + export function PropertyFilters({ source, websiteId, @@ -47,14 +53,16 @@ export function PropertyFilters({ } = usePropertyFieldsQuery(source, websiteId, eventName, { enabled: !providedFields, }); - const fields = providedFields ?? queriedFields ?? []; + // A property can be stored under multiple data types. Collapse to the dominant + // one: results are ordered by session count, so first-wins keeps the most common. + const seen = new Set(); + const fields = (providedFields ?? queriedFields ?? []).filter( + (field: { propertyName: string }) => { + if (seen.has(field.propertyName)) return false; + seen.add(field.propertyName); - // The same property can be stored under multiple data types, which renders as - // identical-looking rows. Tag only those, so names keep the full column width. - const duplicateNames = new Set( - (fields as any[]) - .map(f => f.propertyName) - .filter((name, i, names) => names.indexOf(name) !== i), + return true; + }, ); const handleAdd = (field: { propertyName: string; dataType: number }) => { @@ -113,10 +121,9 @@ export function PropertyFilters({ id={`${field.propertyName}:${field.dataType}`} onAction={() => handleAdd(field)} > - + + {field.propertyName} + ))} @@ -137,10 +144,9 @@ export function PropertyFilters({ id={`${field.propertyName}:${field.dataType}`} onClick={() => handleAdd(field)} > - + + {field.propertyName} + ))} @@ -179,27 +185,3 @@ export function PropertyFilters({ ); } - -function PropertyLabel({ - field, - showDataType, -}: { - field: { propertyName: string; dataType: number }; - showDataType: boolean; -}) { - return ( - - - {field.propertyName} - - {showDataType && ( - - {DATA_TYPES[field.dataType]} - - )} - - ); -}