Skip to content

Introduce spans of events #7609

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 3, 2025
Merged

Introduce spans of events #7609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
48fe87d
feat(events): Add external_id and parent_event_id to Events
Yopi Oct 31, 2025
da08ca7
feat(events): Add children_count to Events
Yopi Nov 3, 2025
457728e
feat(dashboard/events): Load + list child events
Yopi Nov 3, 2025
37da6b4
fix(dashboard/events): Only do query out for one level of nesting
Yopi Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 56 additions & 1 deletion clients/apps/web/src/components/Events/EventRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Pagination from '@/components/Pagination/Pagination'
import { useEvents } from '@/hooks/queries/events'
import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined'
import KeyboardArrowRightOutlined from '@mui/icons-material/KeyboardArrowRightOutlined'
import { schemas } from '@polar-sh/client'
Expand All @@ -8,19 +10,39 @@ import {
TooltipTrigger,
} from '@polar-sh/ui/components/ui/tooltip'
import Link from 'next/link'
import { useSearchParams } from 'next/navigation'
import { useMemo, useState } from 'react'
import { EventCustomer } from './EventCustomer'
import { EventSourceBadge } from './EventSourceBadge'
import { useEventCard, useEventCostBadge, useEventDisplayName } from './utils'

const PAGE_SIZE = 100

export const EventRow = ({
event,
organization,
depth = 0,
}: {
event: schemas['Event']
organization: schemas['Organization']
depth?: number
}) => {
const [isExpanded, setIsExpanded] = useState(false)
const [childrenPage, setChildrenPage] = useState(1)
const searchParams = useSearchParams()

const { data: childrenData } = useEvents(
organization.id,
{
parent_id: event.id,
page: childrenPage,
limit: PAGE_SIZE,
},
isExpanded && event.child_count > 0 && depth < 1,
)

const hasChildren = event.child_count > 0
const children = childrenData?.items ?? []

const handleToggleExpand = () => {
setIsExpanded(!isExpanded)
Expand Down Expand Up @@ -52,8 +74,13 @@ export const EventRow = ({
const eventCard = useEventCard(event)
const eventCostBadge = useEventCostBadge(event)

const leftMargin = depth > 0 ? `${depth * 16}px` : '0px'

return (
<div className="dark:bg-polar-800 dark:border-polar-700 group dark:hover:bg-polar-700 flex flex-col rounded-xl border border-gray-200 bg-white font-mono text-sm transition-colors duration-150 hover:bg-gray-50">
<div
className="dark:bg-polar-800 dark:border-polar-700 group dark:hover:bg-polar-700 flex flex-col rounded-xl border border-gray-200 bg-white font-mono text-sm transition-colors duration-150 hover:bg-gray-50"
style={{ marginLeft: leftMargin }}
>
<div
onClick={handleToggleExpand}
className="flex cursor-pointer flex-row items-center justify-between p-3 select-none"
Expand All @@ -69,6 +96,11 @@ export const EventRow = ({
<div className="flex flex-row items-center gap-x-4">
<span className="text-xs">{eventDisplayName}</span>
<EventSourceBadge source={event.source} />
{hasChildren && (
<span className="dark:bg-polar-700 dark:text-polar-400 rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
children: {event.child_count}
</span>
)}
</div>
<span className="dark:text-polar-500 text-xs text-gray-500 capitalize">
{formattedTimestamp}
Expand Down Expand Up @@ -112,6 +144,29 @@ export const EventRow = ({
</div>
{isExpanded ? eventCard : null}
{isExpanded ? <EventCustomer event={event} /> : null}
{isExpanded && hasChildren && (
<div className="flex flex-col gap-y-2 px-3 pb-3">
{children.map((child) => (
<EventRow
key={child.id}
event={child}
organization={organization}
depth={depth + 1}
/>
))}
{childrenData && childrenData.pagination.total_count > PAGE_SIZE && (
<div className="flex justify-end">
<Pagination
currentURL={searchParams}
currentPage={childrenPage}
totalCount={childrenData.pagination.total_count}
pageSize={PAGE_SIZE}
onPageChange={setChildrenPage}
/>
</div>
)}
</div>
)}
</div>
)
}
120 changes: 118 additions & 2 deletions clients/packages/client/src/v1.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5602,6 +5602,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -6900,6 +6906,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -7452,6 +7464,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -7523,6 +7541,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -11578,6 +11602,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -11745,6 +11775,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -13541,6 +13577,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -14821,6 +14863,16 @@ export interface components {
* @description The ID of the organization owning the event. **Required unless you use an organization token.**
*/
organization_id?: string | null
/**
* External Id
* @description Your unique identifier for this event. Useful for deduplication and parent-child relationships.
*/
external_id?: string | null
/**
* Parent Id
* @description The ID of the parent event. Can be either a Polar event ID (UUID) or an external event ID.
*/
parent_id?: string | null
/**
* @description Key-value object allowing you to store additional information about the event. Some keys like `_llm` are structured data that are handled specially by Polar.
*
Expand Down Expand Up @@ -14860,6 +14912,16 @@ export interface components {
* @description The ID of the organization owning the event. **Required unless you use an organization token.**
*/
organization_id?: string | null
/**
* External Id
* @description Your unique identifier for this event. Useful for deduplication and parent-child relationships.
*/
external_id?: string | null
/**
* Parent Id
* @description The ID of the parent event. Can be either a Polar event ID (UUID) or an external event ID.
*/
parent_id?: string | null
/**
* @description Key-value object allowing you to store additional information about the event. Some keys like `_llm` are structured data that are handled specially by Polar.
*
Expand Down Expand Up @@ -14962,6 +15024,12 @@ export interface components {
* @description Number of events inserted.
*/
inserted: number
/**
* Duplicates
* @description Number of duplicate events skipped.
* @default 0
*/
duplicates: number
}
/**
* ExistingProductPrice
Expand Down Expand Up @@ -16383,6 +16451,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -16467,6 +16541,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -17528,6 +17608,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -17654,6 +17740,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -20802,6 +20894,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -20917,6 +21015,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -21029,6 +21133,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Source
* @description The source of the event. `system` events are created by Polar. `user` events are the one you create through our ingestion API.
Expand Down Expand Up @@ -21643,6 +21753,12 @@ export interface components {
* @description ID of the customer in your system associated with the event.
*/
external_customer_id: string | null
/**
* Child Count
* @description Number of direct child events linked to this event.
* @default 0
*/
child_count: number
/**
* Name
* @description The name of the event.
Expand Down Expand Up @@ -26912,7 +27028,6 @@ export interface operations {
| 'America/Coral_Harbour'
| 'America/Cordoba'
| 'America/Costa_Rica'
| 'America/Coyhaique'
| 'America/Creston'
| 'America/Cuiaba'
| 'America/Curacao'
Expand Down Expand Up @@ -31358,6 +31473,8 @@ export interface operations {
| null
/** @description Query to filter events. */
query?: string | null
/** @description Filter events by parent event ID. When not specified, returns root events only. */
parent_id?: string | null
/** @description Page number, defaults to 1. */
page?: number
/** @description Size of a page, defaults to 10. Maximum is 100. */
Expand Down Expand Up @@ -33502,7 +33619,6 @@ export const pathsV1MetricsGetParametersQueryTimezoneValues: ReadonlyArray<
'America/Coral_Harbour',
'America/Cordoba',
'America/Costa_Rica',
'America/Coyhaique',
'America/Creston',
'America/Cuiaba',
'America/Curacao',
Expand Down
Loading
Loading