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>