improve(dashboard): better event details

apps/dashboard/src/components/events/event-field-value.tsx

@@ -0,0 +1,77 @@
+import { fancyMinutes } from '@/hooks/useNumerFormatter';
+import { formatDateTime, formatTime } from '@/utils/date';
+import type { IServiceEvent } from '@openpanel/db';
+import { isToday } from 'date-fns';
+import { SerieIcon } from '../report-chart/common/serie-icon';
+
+export function EventFieldValue({
+  key,
+  value,
+  event,
+}: {
+  key: keyof IServiceEvent;
+  value: any;
+  event: IServiceEvent;
+}) {
+  if (!value) {
+    return null;
+  }
+
+  if (value instanceof Date) {
+    return isToday(value) ? formatTime(value) : formatDateTime(value);
+  }
+
+  switch (key) {
+    case 'osVersion':
+      return (
+        <div className="row gap-2 items-center">
+          <SerieIcon name={event.os} />
+          <span>{value}</span>
+        </div>
+      );
+    case 'browserVersion':
+      return (
+        <div className="row gap-2 items-center">
+          <SerieIcon name={event.browser} />
+          <span>{value}</span>
+        </div>
+      );
+    case 'city':
+      return (
+        <div className="row gap-2 items-center">
+          <SerieIcon name={event.country} />
+          <span>{value}</span>
+        </div>
+      );
+    case 'region':
+      return (
+        <div className="row gap-2 items-center">
+          <SerieIcon name={event.country} />
+          <span>{value}</span>
+        </div>
+      );
+    case 'properties':
+      return JSON.stringify(value);
+    case 'country':
+    case 'browser':
+    case 'os':
+    case 'brand':
+    case 'model':
+    case 'device':
+      return (
+        <div className="row gap-2 items-center">
+          <SerieIcon name={value} />
+          <span>{value}</span>
+        </div>
+      );
+    case 'duration':
+      return (
+        <div className="text-right">
+          <span className="text-muted-foreground">({value}ms)</span>{' '}
+          {fancyMinutes(value / 1000)}
+        </div>
+      );
+    default:
+      return value;
+  }
+}

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

@@ -1,7 +1,6 @@
 import { EventIcon } from '@/components/events/event-icon';
 import { ProjectLink } from '@/components/links';
 import { SerieIcon } from '@/components/report-chart/common/serie-icon';
-import { TooltipComplete } from '@/components/tooltip-complete';
 import { useNumber } from '@/hooks/useNumerFormatter';
 import { pushModal } from '@/modals';
 import { formatDateTime, formatTime } from '@/utils/date';
@@ -11,7 +10,6 @@ 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();
@@ -196,6 +194,9 @@ export function useColumns() {
       accessorKey: 'properties',
       header: 'Properties',
       size: 400,
+      meta: {
+        className: 'p-0 [&_pre]:p-4',
+      },
       cell({ row }) {
         const { properties } = row.original;
         const filteredProperties = Object.fromEntries(

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

@@ -133,6 +133,7 @@ export function EventsDataTable<TData>({
                         return (
                           <GridCell
                             key={cell.id}
+                            className={cell.column.columnDef.meta?.className}
                             style={{
                               minWidth: cell.column.getSize(),
                               flexShrink: 1,

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

@@ -5,10 +5,13 @@ import type {
   UseQueryResult,
 } from '@tanstack/react-query';
 import { GanttChartIcon, Loader2Icon } from 'lucide-react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
+import { pushModal, replaceWithModal, useOnPushModal } from '@/modals';
 import type { RouterOutputs } from '@/trpc/client';
 import { cn } from '@/utils/cn';
+import { shouldIgnoreKeypress } from '@/utils/should-ignore-keypress';
+import { bind } from 'bind-event-listener';
 import { useInViewport } from 'react-in-viewport';
 import { useColumns } from './columns';
 import { EventsDataTable } from './events-data-table';
@@ -38,6 +41,48 @@ export const EventsTable = ({ query, ...props }: Props) => {
     ? query.data?.pages[query.data.pages.length - 1]?.meta.next
     : query.data?.meta.next;
 
+  const [eventId, setEventId] = useState<null | string>(null);
+  useOnPushModal('EventDetails', (isOpen, props) => {
+    setEventId(isOpen ? props.id : null);
+  });
+
+  useEffect(() => {
+    return bind(window, {
+      type: 'keydown',
+      listener(event) {
+        if (shouldIgnoreKeypress(event)) {
+          return;
+        }
+
+        if (event.key === 'ArrowLeft') {
+          const index = data.findIndex((p) => p.id === eventId);
+          if (index !== -1) {
+            const match = data[index - 1];
+            if (match) {
+              replaceWithModal('EventDetails', match);
+            }
+          }
+        }
+        if (event.key === 'ArrowRight') {
+          const index = data.findIndex((p) => p.id === eventId);
+          if (index !== -1) {
+            const match = data[index + 1];
+            if (match) {
+              replaceWithModal('EventDetails', match);
+            } else if (
+              hasNextPage &&
+              isInfiniteQuery &&
+              data.length > 0 &&
+              query.isFetchingNextPage === false
+            ) {
+              query.fetchNextPage();
+            }
+          }
+        }
+      },
+    });
+  }, [data, eventId]);
+
   useEffect(() => {
     if (
       hasNextPage &&

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

@@ -29,6 +29,20 @@ export function useColumns(type?: 'profiles' | 'power-users') {
         );
       },
     },
+    {
+      accessorKey: 'referrer',
+      header: 'Referrer',
+      cell({ row }) {
+        const { referrer, referrer_name } = row.original.properties;
+        const ref = referrer_name || referrer;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={ref} />
+            <span className="truncate">{ref}</span>
+          </div>
+        );
+      },
+    },
     {
       accessorKey: 'country',
       header: 'Country',

apps/dashboard/src/components/time-window-picker.tsx

@@ -15,19 +15,10 @@ import { bind } from 'bind-event-listener';
 import { CalendarIcon } from 'lucide-react';
 import { useCallback, useEffect, useRef } from 'react';
 
+import { shouldIgnoreKeypress } from '@/utils/should-ignore-keypress';
 import { timeWindows } from '@openpanel/constants';
 import type { IChartRange } from '@openpanel/validation';
 
-function shouldIgnoreKeypress(event: KeyboardEvent) {
-  const tagName = (event?.target as HTMLElement)?.tagName;
-  const modifierPressed =
-    event.ctrlKey || event.metaKey || event.altKey || event.keyCode === 229;
-  const isTyping =
-    event.isComposing || tagName === 'INPUT' || tagName === 'TEXTAREA';
-
-  return modifierPressed || isTyping;
-}
-
 type Props = {
   value: IChartRange;
   onChange: (value: IChartRange) => void;

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

@@ -40,13 +40,18 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         '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
+        'focus:outline-none focus:ring-0 transition-none',
       )}
       {...props}
     >
-      <div className="border bg-background p-6 shadow-lg sm:rounded-lg">
+      <div
+        className={cn(
+          'border bg-background p-6 shadow-lg sm:rounded-lg',
+          className,
+        )}
+      >
         {children}
       </div>
     </DialogPrimitive.Content>

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

@@ -1,24 +1,30 @@
 import { ReportChartShortcut } from '@/components/report-chart/shortcut';
-import { KeyValue } from '@/components/ui/key-value';
-import { useAppParams } from '@/hooks/useAppParams';
 import {
   useEventQueryFilters,
   useEventQueryNamesFilter,
 } from '@/hooks/useEventQueryFilters';
 import { api } from '@/trpc/client';
-import { round } from 'mathjs';
 
-import { SerieName } from '@/components/report-chart/common/serie-name';
+import { EventFieldValue } from '@/components/events/event-field-value';
+import { ProjectLink } from '@/components/links';
+import {
+  WidgetButtons,
+  WidgetHead,
+} from '@/components/overview/overview-widget';
+import { SerieIcon } from '@/components/report-chart/common/serie-icon';
 import { Button } from '@/components/ui/button';
+import { Widget, WidgetBody } from '@/components/widget';
 import { WidgetTable } from '@/components/widget-table';
-import { useNumber } from '@/hooks/useNumerFormatter';
+import { fancyMinutes } from '@/hooks/useNumerFormatter';
-import { formatDate, formatDateTime } from '@/utils/date';
+import { camelCaseToWords } from '@/utils/casing';
-import { FilterIcon } from 'lucide-react';
+import { cn } from '@/utils/cn';
-import { isNil, omit } from 'ramda';
+import { getProfileName } from '@/utils/getters';
-import { useMemo, useState } from 'react';
+import type { IClickhouseEvent, IServiceEvent } from '@openpanel/db';
-import { useLocalStorage } from 'usehooks-ts';
+import { ArrowLeftIcon, ArrowRightIcon, FilterIcon, XIcon } from 'lucide-react';
+import { omit } from 'ramda';
+import { useState } from 'react';
 import { popModal } from '.';
-import { ModalContent, ModalHeader } from './Modal/Container';
+import { ModalContent } from './Modal/Container';
 
 interface Props {
   id: string;
@@ -26,213 +32,390 @@ interface Props {
   projectId: string;
 }
 
-const filterable = {
+const filterable: Partial<Record<keyof IServiceEvent, keyof IClickhouseEvent>> =
-  name: 'name',
+  {
-  referrer: 'referrer',
+    name: 'name',
-  referrerName: 'referrer_name',
+    referrer: 'referrer',
-  referrerType: 'referrer_type',
+    referrerName: 'referrer_name',
-  brand: 'brand',
+    referrerType: 'referrer_type',
-  model: 'model',
+    brand: 'brand',
-  browser: 'browser',
+    model: 'model',
-  browserVersion: 'browser_version',
+    browser: 'browser',
-  os: 'os',
+    browserVersion: 'browser_version',
-  osVersion: 'os_version',
+    os: 'os',
-  city: 'city',
+    osVersion: 'os_version',
-  region: 'region',
+    city: 'city',
-  country: 'country',
+    region: 'region',
-  device: 'device',
+    country: 'country',
-  properties: 'properties',
+    device: 'device',
-};
+    properties: 'properties',
+    path: 'path',
+    origin: 'origin',
+  };
 
 export default function EventDetails({ id, createdAt, projectId }: Props) {
   const [, setEvents] = useEventQueryNamesFilter();
   const [, setFilter] = useEventQueryFilters();
-  const [showNullable, setShowNullable] = useLocalStorage(
+  const TABS = {
-    '@op:event-details-show-nullable',
+    essentials: {
-    false,
+      id: 'essentials',
-  );
+      title: 'Essentials',
-  const number = useNumber();
+    },
-  const query = api.event.byId.useQuery({ id, projectId, createdAt });
+    detailed: {
+      id: 'detailed',
+      title: 'Detailed',
+    },
+  };
+  const [widget, setWidget] = useState(TABS.essentials);
+  const [{ event, session }] = api.event.details.useSuspenseQuery({
+    id,
+    projectId,
+    createdAt,
+  });
 
-  if (query.isLoading || query.isFetching) {
+  const profile = event.profile;
-    return null;
-  }
-
-  if (query.isError || !query.isSuccess) {
-    return null;
-  }
-
-  const event = query.data;
 
   const data = (() => {
-    const data = Object.entries(omit(['properties'], event)).map(
+    const data: { name: keyof IServiceEvent; value: any }[] = [
-      ([name, value]) => ({
+      {
-        name: [name],
+        name: 'createdAt',
-        value: value as string | number | undefined,
+        value: event.createdAt,
-      }),
+      },
-    );
+      {
+        name: 'name',
+        value: event.name,
+      },
+      {
+        name: 'origin',
+        value: event.origin,
+      },
+      {
+        name: 'path',
+        value: event.path,
+      },
+      {
+        name: 'country',
+        value: event.country,
+      },
+      {
+        name: 'region',
+        value: event.region,
+      },
+      {
+        name: 'city',
+        value: event.city,
+      },
+      {
+        name: 'referrer',
+        value: event.referrer,
+      },
+      {
+        name: 'referrerName',
+        value: event.referrerName,
+      },
+      {
+        name: 'referrerType',
+        value: event.referrerType,
+      },
+      {
+        name: 'brand',
+        value: event.brand,
+      },
+      {
+        name: 'model',
+        value: event.model,
+      },
+    ];
 
-    Object.entries(event.properties).forEach(([name, value]) => {
+    if (widget.id === TABS.detailed.id) {
-      data.push({
+      data.length = 0;
-        name: ['properties', ...name.split('.')],
+      Object.entries(omit(['properties', 'profile', 'meta'], event)).forEach(
-        value: value as string | number | undefined,
+        ([name, value]) => {
-      });
+          if (!name.startsWith('__')) {
-    });
+            data.push({
+              name: name as keyof IServiceEvent,
+              value: value as any,
+            });
+          }
+        },
+      );
+    }
 
     return data.filter((item) => {
-      if (showNullable) {
+      if (widget.id === TABS.essentials.id) {
-        return true;
+        return !!item.value;
       }
 
-      return !!item.value;
+      return true;
     });
   })();
 
+  const properties = Object.entries(event.properties)
+    .filter(([name]) => !name.startsWith('__'))
+    .map(([name, value]) => ({
+      name: name as keyof IServiceEvent,
+      value: value,
+    }));
+
   return (
-    <ModalContent>
+    <ModalContent className="p-0">
-      <ModalHeader title={event.name} />
+      <Widget className="bg-transparent border-0">
-      <div className="-mx-2 mb-8">
+        <WidgetHead>
-        <WidgetTable
+          <div className="row items-center justify-between">
-          className="w-full max-w-full"
+            <div className="title">{event.name}</div>
-          columnClassName="!h-auto group-hover:bg-black"
+            <div className="row items-center gap-2 pr-2">
-          data={data}
+              <Button
-          keyExtractor={(item) => item.name.join('.')}
+                size="icon"
-          columns={[
+                variant={'ghost'}
-            {
+                onClick={() => {
-              name: 'Name',
+                  const event = new KeyboardEvent('keydown', {
-              className: 'text-left',
+                    key: 'ArrowLeft',
-              width: 'auto',
+                  });
-              render(item) {
+                  dispatchEvent(event);
-                return (
+                }}
-                  <div className="row items-center gap-2">
+              >
-                    {item.name.map((name, index) => (
+                <ArrowLeftIcon className="size-4" />
-                      <div
+              </Button>
-                        key={name}
+              <Button
-                        className={
+                size="icon"
-                          index === item.name.length - 1
+                variant={'ghost'}
-                            ? 'text-foreground font-medium'
+                onClick={() => {
-                            : 'text-muted-foreground'
+                  const event = new KeyboardEvent('keydown', {
-                        }
+                    key: 'ArrowRight',
-                      >
+                  });
-                        {name}
+                  dispatchEvent(event);
-                      </div>
+                }}
-                    ))}
+              >
+                <ArrowRightIcon className="size-4" />
+              </Button>
+              <Button size="icon" variant={'ghost'} onClick={() => popModal()}>
+                <XIcon className="size-4" />
+              </Button>
+            </div>
+          </div>
+
+          <WidgetButtons>
+            {Object.entries(TABS).map(([key, tab]) => (
+              <button
+                key={tab.id}
+                type="button"
+                onClick={() => setWidget(tab)}
+                className={cn(tab.id === widget.id && 'active')}
+              >
+                {tab.title}
+              </button>
+            ))}
+          </WidgetButtons>
+        </WidgetHead>
+        <WidgetBody className="col gap-4 bg-def-100">
+          {profile && (
+            <ProjectLink
+              onClick={(e) => popModal()}
+              href={`/profiles/${profile.id}`}
+              className="card p-4 py-2 col gap-2 hover:bg-def-100"
+            >
+              <div className="row items-center gap-2 justify-between">
+                <div className="row items-center gap-2">
+                  {profile.avatar && (
+                    <img
+                      className="size-4 bg-border rounded-full"
+                      src={profile.avatar}
+                    />
+                  )}
+                  <div className="font-medium truncate">
+                    {getProfileName(profile, false)}
                   </div>
-                );
+                </div>
-              },
+                <div className="row items-center gap-2">
-            },
+                  <div className="row gap-1 items-center">
-            {
+                    <SerieIcon name={event.country} />
-              name: 'Value',
+                    <SerieIcon name={event.os} />
-              className: 'text-right font-mono font-medium',
+                    <SerieIcon name={event.browser} />
-              width: 'auto',
+                  </div>
-              render(item) {
+                  <div className="text-muted-foreground truncate max-w-40">
-                const render = () => {
+                    {event.referrerName || event.referrer}
-                  if (
+                  </div>
-                    item.name[0] === 'duration' &&
+                </div>
-                    typeof item.value === 'number'
+              </div>
-                  ) {
+              {!!session && (
+                <div className="text-sm">
+                  This session has {session.screen_view_count} screen views and{' '}
+                  {session.event_count} events. Visit duration is{' '}
+                  {fancyMinutes(session.duration / 1000)}.
+                </div>
+              )}
+            </ProjectLink>
+          )}
+
+          {properties.length > 0 && (
+            <section>
+              <div className="mb-2 flex justify-between font-medium">
+                <div>Properties</div>
+              </div>
+              <WidgetTable
+                className={'card [&>div:first-child]:hidden'}
+                columnClassName="[&_.cell:first-child]:pl-4 [&_.cell:last-child]:pr-4 h-auto"
+                data={properties}
+                keyExtractor={(item) => item.name}
+                columns={[
+                  {
+                    name: 'Name',
+                    className: 'text-left',
+                    width: 'auto',
+                    render(item) {
+                      const splitKey = item.name.split('.');
+                      return (
+                        <div className="row items-center gap-2">
+                          {splitKey.map((name, index) => (
+                            <div
+                              key={name}
+                              className={
+                                index === splitKey.length - 1
+                                  ? 'text-foreground'
+                                  : 'text-muted-foreground'
+                              }
+                            >
+                              {camelCaseToWords(name)}
+                            </div>
+                          ))}
+                        </div>
+                      );
+                    },
+                  },
+                  {
+                    name: 'Value',
+                    className: 'text-right font-mono font-medium',
+                    width: 'w-full',
+                    render(item) {
+                      return (
+                        <button
+                          className="row items-center gap-2 text-right"
+                          type="button"
+                          onClick={() => {
+                            popModal();
+                            setFilter(
+                              `properties.${item.name}`,
+                              item.value as any,
+                            );
+                          }}
+                        >
+                          <EventFieldValue
+                            key={item.name}
+                            value={item.value}
+                            event={event}
+                          />
+                          <FilterIcon className="size-3 shrink-0" />
+                        </button>
+                      );
+                    },
+                  },
+                ]}
+              />
+            </section>
+          )}
+          <section>
+            <div className="mb-2 flex justify-between font-medium">
+              <div>Information</div>
+            </div>
+            <WidgetTable
+              className={'card [&>div:first-child]:hidden'}
+              columnClassName="[&_.cell:first-child]:pl-4 [&_.cell:last-child]:pr-4 h-auto"
+              data={data}
+              keyExtractor={(item) => item.name}
+              columns={[
+                {
+                  name: 'Name',
+                  className: 'text-left',
+                  width: 'auto',
+                  render(item) {
+                    const splitKey = item.name.split('.');
                     return (
-                      <div className="text-right">
+                      <div className="row items-center gap-2">
-                        <span className="text-muted-foreground">
+                        {splitKey.map((name, index) => (
-                          ({item.value}ms)
+                          <div
-                        </span>{' '}
+                            key={name}
-                        {number.formatWithUnit(item.value / 1000, 'min')}
+                            className={
+                              index === splitKey.length - 1
+                                ? 'text-foreground'
+                                : 'text-muted-foreground'
+                            }
+                          >
+                            {camelCaseToWords(name)}
+                          </div>
+                        ))}
                       </div>
                     );
-                  }
+                  },
+                },
+                {
+                  name: 'Value',
+                  className: 'text-right font-mono font-medium',
+                  width: 'w-full',
+                  render(item) {
+                    if (item.value && filterable[item.name]) {
+                      return (
+                        <button
+                          className="row items-center gap-2 text-right"
+                          type="button"
+                          onClick={() => {
+                            popModal();
+                            setFilter(item.name, item.value);
+                          }}
+                        >
+                          <EventFieldValue
+                            key={item.name}
+                            value={item.value}
+                            event={event}
+                          />
+                          <FilterIcon className="size-3 shrink-0" />
+                        </button>
+                      );
+                    }
 
-                  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">
+                      <EventFieldValue
-                        {formatDateTime(item.value as unknown as Date)}
+                        key={item.name}
-                      </div>
+                        value={item.value}
+                        event={event}
+                      />
                     );
-                  }
+                  },
-
+                },
-                  return (
+              ]}
-                    <div className="text-right">
+            />
-                      {JSON.stringify(item.value)}
+          </section>
-                    </div>
+          <section>
-                  );
+            <div className="mb-2 flex justify-between font-medium">
-                };
+              <div>All events for {event.name}</div>
-
+              <button
-                if (
+                type="button"
-                  item.name[0] &&
+                className="text-muted-foreground hover:underline"
-                  item.value &&
+                onClick={() => {
-                  filterable[item.name[0] as keyof typeof filterable]
+                  setEvents([event.name]);
-                ) {
+                  popModal();
-                  return (
+                }}
-                    <button
+              >
-                      className="row items-center gap-2"
+                Show all
-                      type="button"
+              </button>
-                      onClick={() => {
+            </div>
-                        setFilter(
+            <div className="card p-4">
-                          item.name[0] === 'properties'
+              <ReportChartShortcut
-                            ? item.name.join('.')
+                projectId={event.projectId}
-                            : filterable[
+                chartType="linear"
-                                item.name[0] as keyof typeof filterable
+                events={[
-                              ],
+                  {
-                          item.value,
+                    id: 'A',
-                        );
+                    name: event.name,
-                      }}
+                    displayName: 'Similar events',
-                    >
+                    segment: 'event',
-                      <FilterIcon className="size-3 shrink-0" />
+                    filters: [],
-                      {render()}
+                  },
-                    </button>
+                ]}
-                  );
+              />
-                }
+            </div>
-
+          </section>
-                return render();
+        </WidgetBody>
-              },
+      </Widget>
-            },
-          ]}
-        />
-        <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>
-          <button
-            type="button"
-            className="text-muted-foreground hover:underline"
-            onClick={() => {
-              setEvents([event.name]);
-              popModal();
-            }}
-          >
-            Show all
-          </button>
-        </div>
-        <ReportChartShortcut
-          projectId={event.projectId}
-          chartType="linear"
-          events={[
-            {
-              id: 'A',
-              name: event.name,
-              displayName: 'Similar events',
-              segment: 'event',
-              filters: [],
-            },
-          ]}
-        />
-      </div>
     </ModalContent>
   );
 }

apps/dashboard/src/modals/index.tsx

@@ -87,6 +87,7 @@ const modals = {
 export const {
   pushModal,
   popModal,
+  replaceWithModal,
   popAllModals,
   ModalProvider,
   useOnPushModal,

apps/dashboard/src/utils/casing.ts

@@ -0,0 +1,5 @@
+export const camelCaseToWords = (str: string) => {
+  return str
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, (str) => str.toUpperCase());
+};

apps/dashboard/src/utils/getters.ts

@@ -8,6 +8,10 @@ export function getProfileName(
     return '';
   }
 
+  if (!profile.isExternal) {
+    return 'Anonymous';
+  }
+
   const name =
     [profile.firstName, profile.lastName].filter(Boolean).join(' ') ||
     profile.email;

apps/dashboard/src/utils/should-ignore-keypress.ts

@@ -0,0 +1,9 @@
+export function shouldIgnoreKeypress(event: KeyboardEvent) {
+  const tagName = (event?.target as HTMLElement)?.tagName;
+  const modifierPressed =
+    event.ctrlKey || event.metaKey || event.altKey || event.keyCode === 229;
+  const isTyping =
+    event.isComposing || tagName === 'INPUT' || tagName === 'TEXTAREA';
+
+  return modifierPressed || isTyping;
+}

packages/db/src/services/event.service.ts

@@ -21,6 +21,7 @@ import { createSqlBuilder } from '../sql-builder';
 import { getEventFiltersWhereClause } from './chart.service';
 import type { IClickhouseProfile, IServiceProfile } from './profile.service';
 import {
+  getProfileById,
   getProfiles,
   transformProfile,
   upsertProfile,
@@ -830,7 +831,7 @@ class EventService {
     id: string;
     createdAt?: Date;
   }) {
-    return clix(this.client)
+    const event = await clix(this.client)
       .select<IClickhouseEvent>(['*'])
       .from('events')
       .where('project_id', '=', projectId)
@@ -852,6 +853,15 @@ class EventService {
 
         return transformEvent(res[0]);
       });
+
+    if (event?.profileId) {
+      const profile = await getProfileById(event?.profileId, projectId);
+      if (profile) {
+        event.profile = profile;
+      }
+    }
+
+    return event;
   }
 
   async getList({

packages/db/src/services/session.service.ts

@@ -1,3 +1,6 @@
+import { TABLE_NAMES, ch } from '../clickhouse/client';
+import { clix } from '../clickhouse/query-builder';
+
 export type IClickhouseSession = {
   id: string;
   profile_id: string;
@@ -39,3 +42,19 @@ export type IClickhouseSession = {
   version: number;
   properties: Record<string, string>;
 };
+
+class SessionService {
+  constructor(private client: typeof ch) {}
+
+  byId(sessionId: string, projectId: string) {
+    return clix(this.client)
+      .select<IClickhouseSession>(['*'])
+      .from(TABLE_NAMES.sessions)
+      .where('id', '=', sessionId)
+      .where('project_id', '=', projectId)
+      .execute()
+      .then((res) => res[0]);
+  }
+}
+
+export const sessionService = new SessionService(ch);

packages/trpc/src/routers/event.ts

@@ -12,8 +12,8 @@ import {
   formatClickhouseDate,
   getEventList,
   getEvents,
-  getTopPages,
   overviewService,
+  sessionService,
 } from '@openpanel/db';
 import {
   zChartEventFilter,
@@ -21,7 +21,6 @@ import {
   zTimeInterval,
 } from '@openpanel/validation';
 
-import { addMinutes, subDays, subMinutes } from 'date-fns';
 import { clone } from 'ramda';
 import { getProjectAccessCached } from '../access';
 import { TRPCAccessError } from '../errors';
@@ -79,6 +78,36 @@ export const eventRouter = createTRPCRouter({
       return res;
     }),
 
+  details: protectedProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        projectId: z.string(),
+        createdAt: z.date().optional(),
+      }),
+    )
+    .query(async ({ input: { id, projectId, createdAt } }) => {
+      const res = await eventService.getById({
+        projectId,
+        id,
+        createdAt,
+      });
+
+      if (!res) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Event not found',
+        });
+      }
+
+      const session = await sessionService.byId(res?.sessionId, projectId);
+
+      return {
+        event: res,
+        session,
+      };
+    }),
+
   events: protectedProcedure
     .input(
       z.object({