feature(dashboard): customize event columns

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/conversions.tsx

@@ -1,7 +1,10 @@
 'use client';
 
+import { TableButtons } from '@/components/data-table';
 import { EventsTable } from '@/components/events/table';
+import { EventsTableColumns } from '@/components/events/table/events-table-columns';
 import { api } from '@/trpc/client';
+import { Loader2Icon } from 'lucide-react';
 
 type Props = {
   projectId: string;
@@ -19,7 +22,22 @@ const Conversions = ({ projectId }: Props) => {
     },
   );
 
-  return <EventsTable query={query} />;
+  return (
+    <div>
+      <TableButtons>
+        <EventsTableColumns />
+        {query.isRefetching && (
+          <div className="center-center size-8 rounded border bg-background">
+            <Loader2Icon
+              size={12}
+              className="size-4 shrink-0 animate-spin text-black text-highlight"
+            />
+          </div>
+        )}
+      </TableButtons>
+      <EventsTable query={query} />
+    </div>
+  );
 };
 
 export default Conversions;

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/events.tsx

@@ -3,6 +3,7 @@
 import { TableButtons } from '@/components/data-table';
 import EventListener from '@/components/events/event-listener';
 import { EventsTable } from '@/components/events/table';
+import { EventsTableColumns } from '@/components/events/table/events-table-columns';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
 import { Button } from '@/components/ui/button';
@@ -74,6 +75,7 @@ const Events = ({ projectId, profileId }: Props) => {
           enableEventsFilter
         />
         <OverviewFiltersButtons className="justify-end p-0" />
+        <EventsTableColumns />
         {query.isRefetching && (
           <div className="center-center size-8 rounded border bg-background">
             <Loader2Icon

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-events.tsx

@@ -2,6 +2,7 @@
 
 import { TableButtons } from '@/components/data-table';
 import { EventsTable } from '@/components/events/table';
+import { EventsTableColumns } from '@/components/events/table/events-table-columns';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
@@ -36,6 +37,7 @@ const Events = ({ projectId, profileId }: Props) => {
           enableEventsFilter
         />
         <OverviewFiltersButtons className="justify-end p-0" />
+        <EventsTableColumns />
         {query.isRefetching && (
           <div className="center-center size-8 rounded border bg-background">
             <Loader2Icon

apps/dashboard/src/components/events/table/columns.tsx

@@ -9,7 +9,9 @@ import { getProfileName } from '@/utils/getters';
 import type { ColumnDef } from '@tanstack/react-table';
 import { isToday } from 'date-fns';
 
+import { ScrollArea } from '@/components/ui/scroll-area';
 import type { IServiceEvent } from '@openpanel/db';
+import { omit } from 'ramda';
 
 export function useColumns() {
   const number = useNumber();
@@ -101,10 +103,8 @@ export function useColumns() {
       accessorKey: 'profileId',
       header: 'Profile',
       cell({ row }) {
-        const { profile } = row.original;
+        const { profile, profileId, deviceId } = row.original;
-        if (!profile) {
+        if (profile) {
-          return null;
-        }
           return (
             <ProjectLink
               href={`/profiles/${profile.id}`}
@@ -113,8 +113,43 @@ export function useColumns() {
               {getProfileName(profile)}
             </ProjectLink>
           );
+        }
+
+        if (profileId && profileId !== deviceId) {
+          return (
+            <ProjectLink
+              href={`/profiles/${profileId}`}
+              className="whitespace-nowrap font-medium hover:underline"
+            >
+              Unknown
+            </ProjectLink>
+          );
+        }
+
+        if (deviceId) {
+          return (
+            <ProjectLink
+              href={`/profiles/${deviceId}`}
+              className="whitespace-nowrap font-medium hover:underline"
+            >
+              Anonymous
+            </ProjectLink>
+          );
+        }
+
+        return null;
       },
     },
+    {
+      accessorKey: 'sessionId',
+      header: 'Session ID',
+      size: 320,
+    },
+    {
+      accessorKey: 'deviceId',
+      header: 'Device ID',
+      size: 320,
+    },
     {
       accessorKey: 'country',
       header: 'Country',
@@ -157,6 +192,24 @@ export function useColumns() {
         );
       },
     },
+    {
+      accessorKey: 'properties',
+      header: 'Properties',
+      size: 400,
+      cell({ row }) {
+        const { properties } = row.original;
+        const filteredProperties = Object.fromEntries(
+          Object.entries(properties || {}).filter(
+            ([key]) => !key.startsWith('__'),
+          ),
+        );
+        return (
+          <ScrollArea orientation="horizontal">
+            <pre>{JSON.stringify(filteredProperties)}</pre>
+          </ScrollArea>
+        );
+      },
+    },
   ];
 
   return columns;

apps/dashboard/src/components/events/table/events-data-table.tsx

@@ -8,9 +8,10 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import type { ColumnDef } from '@tanstack/react-table';
-import { useVirtualizer, useWindowVirtualizer } from '@tanstack/react-virtual';
+import { useWindowVirtualizer } from '@tanstack/react-virtual';
 import throttle from 'lodash.throttle';
 import { useEffect, useRef, useState } from 'react';
+import { useEventsTableColumns } from './events-table-columns';
 
 interface DataTableProps<TData> {
   columns: ColumnDef<TData, any>[];
@@ -21,6 +22,7 @@ export function EventsDataTable<TData>({
   columns,
   data,
 }: DataTableProps<TData>) {
+  const [visibleColumns] = useEventsTableColumns();
   const table = useReactTable({
     data,
     columns,
@@ -74,7 +76,9 @@ export function EventsDataTable<TData>({
         >
           {table.getHeaderGroups().map((headerGroup) => (
             <div className="thead row h-12 sticky top-0" key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
+              {headerGroup.headers
+                .filter((header) => visibleColumns.includes(header.id))
+                .map((header) => {
                   return (
                     <GridCell
                       key={header.id}
@@ -122,7 +126,10 @@ export function EventsDataTable<TData>({
                       }px)`,
                     }}
                   >
-                    {row.getVisibleCells().map((cell) => {
+                    {row
+                      .getVisibleCells()
+                      .filter((cell) => visibleColumns.includes(cell.column.id))
+                      .map((cell) => {
                         return (
                           <GridCell
                             key={cell.id}

apps/dashboard/src/components/events/table/events-table-columns.tsx

@@ -0,0 +1,70 @@
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ColumnsIcon } from 'lucide-react';
+import { useQueryState } from 'nuqs';
+import { useLocalStorage } from 'usehooks-ts';
+
+// Define available columns
+const AVAILABLE_COLUMNS = [
+  { id: 'name', label: 'Name' },
+  { id: 'createdAt', label: 'Created at' },
+  { id: 'profileId', label: 'Profile' },
+  { id: 'country', label: 'Country' },
+  { id: 'os', label: 'OS' },
+  { id: 'browser', label: 'Browser' },
+  { id: 'properties', label: 'Properties' },
+  { id: 'sessionId', label: 'Session ID' },
+  { id: 'deviceId', label: 'Device ID' },
+] as const;
+
+export function useEventsTableColumns() {
+  return useLocalStorage<string[]>('@op:events-table-columns', [
+    'name',
+    'createdAt',
+    'profileId',
+    'country',
+    'os',
+    'browser',
+  ]);
+}
+
+export function EventsTableColumns() {
+  const [visibleColumns, setVisibleColumns] = useEventsTableColumns();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm">
+          <ColumnsIcon className="h-4 w-4 mr-2" />
+          Columns
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[200px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {AVAILABLE_COLUMNS.map((column) => (
+          <DropdownMenuCheckboxItem
+            key={column.id}
+            checked={visibleColumns.includes(column.id)}
+            onCheckedChange={(checked) => {
+              setVisibleColumns(
+                checked
+                  ? [...visibleColumns, column.id]
+                  : visibleColumns.filter((id) => id !== column.id),
+              );
+            }}
+          >
+            {column.label}
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/dashboard/src/components/ui/dialog.tsx

@@ -39,14 +39,16 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] md:w-full p-2 sm:p-6',
         className,
         'max-h-screen overflow-y-auto', // Ensure the dialog is scrollable if it exceeds the screen height
         'mt-auto', // Add margin-top: auto for all screen sizes
       )}
       {...props}
     >
+      <div className="border bg-background p-6 shadow-lg sm:rounded-lg">
         {children}
+      </div>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

apps/dashboard/src/modals/Modal/Container.tsx

@@ -32,7 +32,7 @@ export function ModalHeader({
   return (
     <div
       className={cn(
-        'relative -m-6 mb-4 flex justify-between rounded-t-lg bg-gradient-to-b from-def-300 to-background p-6 pb-0',
+        'relative -m-6 mb-4 flex justify-between rounded-t-lg p-6 pb-0',
         className,
       )}
       style={{}}

apps/dashboard/src/modals/event-details.tsx

@@ -8,6 +8,15 @@ import {
 import { api } from '@/trpc/client';
 import { round } from 'mathjs';
 
+import { SerieName } from '@/components/report-chart/common/serie-name';
+import { Button } from '@/components/ui/button';
+import { WidgetTable } from '@/components/widget-table';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import { formatDate, formatDateTime } from '@/utils/date';
+import { FilterIcon } from 'lucide-react';
+import { isNil, omit } from 'ramda';
+import { useMemo, useState } from 'react';
+import { useLocalStorage } from 'usehooks-ts';
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
@@ -17,9 +26,32 @@ interface Props {
   projectId: string;
 }
 
+const filterable = {
+  name: 'name',
+  referrer: 'referrer',
+  referrerName: 'referrer_name',
+  referrerType: 'referrer_type',
+  brand: 'brand',
+  model: 'model',
+  browser: 'browser',
+  browserVersion: 'browser_version',
+  os: 'os',
+  osVersion: 'os_version',
+  city: 'city',
+  region: 'region',
+  country: 'country',
+  device: 'device',
+  properties: 'properties',
+};
+
 export default function EventDetails({ id, createdAt, projectId }: Props) {
   const [, setEvents] = useEventQueryNamesFilter();
   const [, setFilter] = useEventQueryFilters();
+  const [showNullable, setShowNullable] = useLocalStorage(
+    '@op:event-details-show-nullable',
+    false,
+  );
+  const number = useNumber();
   const query = api.event.byId.useQuery({ id, projectId, createdAt });
 
   if (query.isLoading || query.isFetching) {
@@ -32,159 +64,147 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
 
   const event = query.data;
 
-  const common = [
+  const data = (() => {
-    {
+    const data = Object.entries(omit(['properties'], event)).map(
-      name: 'Path',
+      ([name, value]) => ({
-      value: event.path,
+        name: [name],
-    },
-    {
-      name: 'Origin',
-      value: event.origin,
-    },
-    {
-      name: 'Duration',
-      value: event.duration ? round(event.duration / 1000, 1) : undefined,
-    },
-    {
-      name: 'Referrer',
-      value: event.referrer,
-      onClick() {
-        setFilter('referrer', event.referrer ?? '');
-      },
-    },
-    {
-      name: 'Referrer name',
-      value: event.referrerName,
-      onClick() {
-        setFilter('referrer_name', event.referrerName ?? '');
-      },
-    },
-    {
-      name: 'Referrer type',
-      value: event.referrerType,
-      onClick() {
-        setFilter('referrer_type', event.referrerType ?? '');
-      },
-    },
-    {
-      name: 'Brand',
-      value: event.brand,
-      onClick() {
-        setFilter('brand', event.brand ?? '');
-      },
-    },
-    {
-      name: 'Model',
-      value: event.model,
-      onClick() {
-        setFilter('model', event.model ?? '');
-      },
-    },
-    {
-      name: 'Browser',
-      value: event.browser,
-      onClick() {
-        setFilter('browser', event.browser ?? '');
-      },
-    },
-    {
-      name: 'Browser version',
-      value: event.browserVersion,
-      onClick() {
-        setFilter('browser_version', event.browserVersion ?? '');
-      },
-    },
-    {
-      name: 'OS',
-      value: event.os,
-      onClick() {
-        setFilter('os', event.os ?? '');
-      },
-    },
-    {
-      name: 'OS version',
-      value: event.osVersion,
-      onClick() {
-        setFilter('os_version', event.osVersion ?? '');
-      },
-    },
-    {
-      name: 'City',
-      value: event.city,
-      onClick() {
-        setFilter('city', event.city ?? '');
-      },
-    },
-    {
-      name: 'Region',
-      value: event.region,
-      onClick() {
-        setFilter('region', event.region ?? '');
-      },
-    },
-    {
-      name: 'Country',
-      value: event.country,
-      onClick() {
-        setFilter('country', event.country ?? '');
-      },
-    },
-    {
-      name: 'Device',
-      value: event.device,
-      onClick() {
-        setFilter('device', event.device ?? '');
-      },
-    },
-  ].filter((item) => typeof item.value === 'string' && item.value);
-
-  const properties = Object.entries(event.properties)
-    .map(([name, value]) => ({
-      name,
         value: value as string | number | undefined,
-    }))
+      }),
-    .filter((item) => typeof item.value === 'string' && item.value);
+    );
+
+    Object.entries(event.properties).forEach(([name, value]) => {
+      data.push({
+        name: ['properties', ...name.split('.')],
+        value: value as string | number | undefined,
+      });
+    });
+
+    return data.filter((item) => {
+      if (showNullable) {
+        return true;
+      }
+
+      return !!item.value;
+    });
+  })();
 
   return (
     <ModalContent>
       <ModalHeader title={event.name} />
-      <div>
+      <div className="-mx-2 mb-8">
-        <div className="flex flex-col gap-8">
+        <WidgetTable
-          {properties.length > 0 && (
+          className="w-full max-w-full"
-            <div>
+          columnClassName="!h-auto group-hover:bg-black"
-              <div className="mb-2  font-medium">Params</div>
+          data={data}
-              <div className="flex flex-wrap gap-2">
+          keyExtractor={(item) => item.name.join('.')}
-                {properties.map((item) => (
+          columns={[
-                  <KeyValue
+            {
-                    key={item.name}
+              name: 'Name',
-                    name={item.name.replace(/^__/, '')}
+              className: 'text-left',
-                    value={item.value}
+              width: 'auto',
+              render(item) {
+                return (
+                  <div className="row items-center gap-2">
+                    {item.name.map((name, index) => (
+                      <div
+                        key={name}
+                        className={
+                          index === item.name.length - 1
+                            ? 'text-foreground font-medium'
+                            : 'text-muted-foreground'
+                        }
+                      >
+                        {name}
+                      </div>
+                    ))}
+                  </div>
+                );
+              },
+            },
+            {
+              name: 'Value',
+              className: 'text-right font-mono font-medium',
+              width: 'auto',
+              render(item) {
+                const render = () => {
+                  if (
+                    item.name[0] === 'duration' &&
+                    typeof item.value === 'number'
+                  ) {
+                    return (
+                      <div className="text-right">
+                        <span className="text-muted-foreground">
+                          ({item.value}ms)
+                        </span>{' '}
+                        {number.formatWithUnit(item.value / 1000, 'min')}
+                      </div>
+                    );
+                  }
+
+                  if (
+                    isNil(item.value) ||
+                    item.value === '' ||
+                    item.value === '\x00\x00'
+                  ) {
+                    return <div className="text-right">-</div>;
+                  }
+
+                  if (typeof item.value === 'string') {
+                    return <div className="text-right">{item.value}</div>;
+                  }
+
+                  if ((item.value as unknown) instanceof Date) {
+                    return (
+                      <div className="text-right">
+                        {formatDateTime(item.value as unknown as Date)}
+                      </div>
+                    );
+                  }
+
+                  return (
+                    <div className="text-right">
+                      {JSON.stringify(item.value)}
+                    </div>
+                  );
+                };
+
+                if (
+                  item.name[0] &&
+                  item.value &&
+                  filterable[item.name[0] as keyof typeof filterable]
+                ) {
+                  return (
+                    <button
+                      className="row items-center gap-2"
+                      type="button"
                       onClick={() => {
                         setFilter(
-                        `properties.${item.name}`,
+                          item.name[0] === 'properties'
-                        item.value ? String(item.value) : '',
+                            ? item.name.join('.')
-                        'is',
+                            : filterable[
+                                item.name[0] as keyof typeof filterable
+                              ],
+                          item.value,
                         );
                       }}
-                  />
+                    >
-                ))}
+                      <FilterIcon className="size-3 shrink-0" />
-              </div>
+                      {render()}
-            </div>
+                    </button>
-          )}
+                  );
-          <div>
+                }
-            <div className="mb-2  font-medium">Common</div>
-            <div className="flex flex-wrap gap-2">
-              {common.map((item) => (
-                <KeyValue
-                  key={item.name}
-                  name={item.name}
-                  value={item.value}
-                  onClick={() => item.onClick?.()}
-                />
-              ))}
-            </div>
-          </div>
 
+                return render();
+              },
+            },
+          ]}
+        />
+        <div className="row justify-center">
+          <Button variant="outline" onClick={() => setShowNullable((p) => !p)}>
+            {showNullable ? 'Hide empty values' : 'Show empty values'}
+          </Button>
+        </div>
+      </div>
       <div>
         <div className="mb-2 flex justify-between font-medium">
           <div>Similar events</div>
@@ -201,7 +221,7 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
         </div>
         <ReportChartShortcut
           projectId={event.projectId}
-              chartType="histogram"
+          chartType="linear"
           events={[
             {
               id: 'A',
@@ -213,8 +233,6 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
           ]}
         />
       </div>
-        </div>
-      </div>
     </ModalContent>
   );
 }

packages/trpc/src/routers/event.ts

@@ -96,6 +96,12 @@ export const eventRouter = createTRPCRouter({
         ...input,
         take: 50,
         cursor: input.cursor ? new Date(input.cursor) : undefined,
+        select: {
+          properties: true,
+          sessionId: true,
+          deviceId: true,
+          profileId: true,
+        },
       });
 
       // Hacky join to get profile for entire session