feat: add long table query events logic and improve display of event list page

Author: moonrailgun

src/client/routes/insights/events.tsx

@@ -3,9 +3,9 @@ import { routeAuthBeforeLoad } from '@/utils/route';
 import { useCurrentWorkspaceId } from '@/store/user';
 import { InsightType, useInsightsStore } from '@/store/insights';
 import { trpc } from '@/api/trpc';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import { useMemo, useState } from 'react';
-import { Collapse, DatePicker, Empty, Spin } from 'antd';
+import { Collapse, Empty } from 'antd';
 import { FilterSection } from '@/components/insights/FilterSection';
 import { useTranslation } from '@i18next-toolkit/react';
 import { Layout } from '@/components/layout';
@@ -30,6 +30,9 @@ import { getUserTimezone } from '@/api/model/user';
 import { LuChevronDown } from 'react-icons/lu';
 import { cn } from '@/utils/style';
 import { get } from 'lodash-es';
+import { DelayRender } from '@/components/DelayRender';
+import { SearchLoadingView } from '@/components/loading/Searching';
+import { DateRangeSelection } from '@/components/insights/DateRangeSelection';
 
 export const Route = createFileRoute('/insights/events')({
   beforeLoad: routeAuthBeforeLoad,
@@ -44,16 +47,15 @@ function PageComponent() {
   const filters = useInsightsStore((state) =>
     state.currentFilters.filter((f): f is NonNullable<typeof f> => !!f)
   );
+  const dateKey = useInsightsStore((state) => state.currentDateKey);
+  const dateRange = useInsightsStore((state) => state.currentDateRange);
+  const setDateKey = useInsightsStore((state) => state.setCurrentDateKey);
+  const setDateRange = useInsightsStore((state) => state.setCurrentDateRange);
+
   const { data: websites = [] } = trpc.website.all.useQuery({ workspaceId });
   const { data: warehouseApplicationIds = [] } =
     trpc.insights.warehouseApplications.useQuery({ workspaceId });
 
-  // Date range state
-  const [dateRange, setDateRange] = useState<[Dayjs, Dayjs]>([
-    dayjs().subtract(7, 'day').startOf('day'),
-    dayjs().endOf('day'),
-  ]);
-
   // JSON mode state
   const [jsonMode, setJsonMode] = useState(false);
 
@@ -170,18 +172,12 @@ function PageComponent() {
         <div className="mx-auto flex h-full flex-col overflow-hidden p-4">
           <div className="mb-4 flex items-center gap-2 md:flex-row">
             <div className="flex items-center gap-2">
-              <span>{t('Date Range')}：</span>
-              <DatePicker.RangePicker
-                value={dateRange}
-                onChange={(val) => {
-                  if (val && val[0] && val[1]) {
-                    setDateRange([
-                      dayjs(val[0]).startOf('day'),
-                      dayjs(val[1]).endOf('day'),
-                    ]);
-                  }
+              <DateRangeSelection
+                value={dateKey}
+                onChange={(key, range) => {
+                  setDateKey(key);
+                  setDateRange(range);
                 }}
-                allowClear={false}
               />
             </div>
 
@@ -201,9 +197,11 @@ function PageComponent() {
 
           <ScrollArea className="flex-1 overflow-hidden">
             {isFetching ? (
-              <div className="flex h-40 items-center justify-center">
-                <Spin />
-              </div>
+              <DelayRender>
+                <div className="flex h-40 items-center justify-center">
+                  <SearchLoadingView className="pt-4" />
+                </div>
+              </DelayRender>
             ) : data.length === 0 ? (
               <Empty description={t('No event data yet')} />
             ) : (
@@ -291,9 +289,12 @@ function PageComponent() {
                             <TabsTrigger value="event">
                               {t('Event')}
                             </TabsTrigger>
-                            <TabsTrigger value="session">
-                              {t('Session')}
-                            </TabsTrigger>
+
+                            {Object.keys(cleanedSessions).length > 0 && (
+                              <TabsTrigger value="session">
+                                {t('Session')}
+                              </TabsTrigger>
+                            )}
                           </TabsList>
                           <TabsContent value="all">
                             {renderGrid({

src/server/model/insights/warehouse/longTable.ts

@@ -3,7 +3,7 @@
  */
 
 import { Prisma } from '@prisma/client';
-import { InsightsSqlBuilder } from '../shared.js';
+import { InsightEvent, InsightsSqlBuilder } from '../shared.js';
 import { insightsQuerySchema } from '../../../utils/schema.js';
 import { z } from 'zod';
 import dayjs from 'dayjs';
@@ -58,6 +58,14 @@ export class WarehouseLongTableInsightsSqlBuilder extends InsightsSqlBuilder {
     return this.getEventTable().name;
   }
 
+  protected getCreateAtFieldName(): string {
+    return this.getEventTable().createdAtField;
+  }
+
+  protected getDistinctFieldName(): string {
+    return this.getEventTable().eventNameField;
+  }
+
   private getValueField(type: FilterInfoType): Prisma.Sql {
     const eventParametersTable = this.getEventParametersTable();
 
@@ -364,6 +372,53 @@ export class WarehouseLongTableInsightsSqlBuilder extends InsightsSqlBuilder {
 
     return rows as any[];
   }
+
+  public buildFetchEventsQuery(cursor: string | undefined): Prisma.Sql {
+    return super.buildFetchEventsQuery(cursor);
+  }
+
+  public async queryEvents(
+    cursor: string | undefined
+  ): Promise<InsightEvent[]> {
+    const allEventsSql = this.buildFetchEventsQuery(cursor);
+    const rows = await this.executeQuery(allEventsSql);
+
+    const createdAtType =
+      this.getEventTable().createdAtFieldType ?? 'timestampMs';
+
+    function normalizeCreatedAt(val: any): Date {
+      if (val == null) return new Date(0);
+      if (createdAtType === 'timestamp') {
+        const num = typeof val === 'string' ? Number(val) : val;
+        return new Date(Number(num) * 1000);
+      }
+      if (createdAtType === 'timestampMs') {
+        const num = typeof val === 'string' ? Number(val) : val;
+        return new Date(Number(num));
+      }
+      // 'date' or 'datetime'
+      return new Date(val);
+    }
+
+    return rows.map((row) => {
+      const distinctId = String(
+        row.distinctId ?? row[this.getDistinctFieldName()] ?? ''
+      );
+      const createdAt = normalizeCreatedAt(
+        row.createdAt ?? row[this.getCreateAtFieldName()]
+      );
+      const eventName = String(
+        row[this.getEventTable().eventNameField] ?? distinctId
+      );
+
+      return {
+        id: distinctId || `${eventName}-${createdAt.getTime()}`,
+        name: eventName,
+        createdAt,
+        properties: { ...row },
+      };
+    });
+  }
 }
 
 export async function insightsLongTableWarehouse(

src/server/model/insights/warehouse/utils.ts

@@ -21,7 +21,7 @@ export const dateTypeSchema = z.enum([
 const warehouseLongTableInsightsApplicationSchema = z.object({
   databaseUrl: z.string().optional(),
   name: z.string(),
-  type: z.literal('longTable').optional(), // long table, default
+  type: z.literal('longTable'), // long table
   eventTable: z.object({
     name: z.string(),
     eventNameField: z.string(),