fix: performance related fixes

2025-10-22 12:29:56 +02:00
parent 8bb0c87ec9
commit 1285ad85a2
60 changed files with 4264 additions and 2959 deletions
--- a/apps/start/src/components/realtime/realtime-geo.tsx
+++ b/apps/start/src/components/realtime/realtime-geo.tsx
@@ -75,7 +75,7 @@ export function RealtimeGeo({ projectId }: RealtimeGeoProps) {
          },
          {
            name: 'Events',
-            width: '84px',
+            width: '60px',
            render(item) {
              return (
                <div className="row gap-2 justify-end">
@@ -86,6 +86,19 @@ export function RealtimeGeo({ projectId }: RealtimeGeoProps) {
              );
            },
          },
+          {
+            name: 'Sessions',
+            width: '82px',
+            render(item) {
+              return (
+                <div className="row gap-2 justify-end">
+                  <span className="font-semibold">
+                    {number.short(item.unique_sessions)}
+                  </span>
+                </div>
+              );
+            },
+          },
        ]}
      />
    </div>
--- a/apps/start/src/components/realtime/realtime-paths.tsx
+++ b/apps/start/src/components/realtime/realtime-paths.tsx
@@ -82,7 +82,7 @@ export function RealtimePaths({ projectId }: RealtimePathsProps) {
          },
          {
            name: 'Events',
-            width: '84px',
+            width: '60px',
            render(item) {
              return (
                <div className="row gap-2 justify-end">
@@ -93,6 +93,19 @@ export function RealtimePaths({ projectId }: RealtimePathsProps) {
              );
            },
          },
+          {
+            name: 'Sessions',
+            width: '82px',
+            render(item) {
+              return (
+                <div className="row gap-2 justify-end">
+                  <span className="font-semibold">
+                    {number.short(item.unique_sessions)}
+                  </span>
+                </div>
+              );
+            },
+          },
        ]}
      />
    </div>
--- a/apps/start/src/components/realtime/realtime-referrals.tsx
+++ b/apps/start/src/components/realtime/realtime-referrals.tsx
@@ -65,7 +65,7 @@ export function RealtimeReferrals({ projectId }: RealtimeReferralsProps) {
          },
          {
            name: 'Events',
-            width: '84px',
+            width: '60px',
            render(item) {
              return (
                <div className="row gap-2 justify-end">
@@ -76,6 +76,19 @@ export function RealtimeReferrals({ projectId }: RealtimeReferralsProps) {
              );
            },
          },
+          {
+            name: 'Sessions',
+            width: '82px',
+            render(item) {
+              return (
+                <div className="row gap-2 justify-end">
+                  <span className="font-semibold">
+                    {number.short(item.unique_sessions)}
+                  </span>
+                </div>
+              );
+            },
+          },
        ]}
      />
    </div>
--- a/apps/start/src/components/ui/data-table/data-table-hooks.tsx
+++ b/apps/start/src/components/ui/data-table/data-table-hooks.tsx
@@ -4,8 +4,8 @@ import type {
  VisibilityState,
 } from '@tanstack/react-table';
 import { parseAsInteger, useQueryState } from 'nuqs';
-import { useState } from 'react';
-import { useLocalStorage } from 'usehooks-ts';
+import { useEffect, useState } from 'react';
+import { useLocalStorage, useReadLocalStorage } from 'usehooks-ts';

 export const useDataTablePagination = (pageSize = 10) => {
  const [page, setPage] = useQueryState(
@@ -22,6 +22,12 @@ export const useDataTablePagination = (pageSize = 10) => {
  return { page, setPage, state };
 };

+export const useReadColumnVisibility = (persistentKey: string) => {
+  return useReadLocalStorage<Record<string, boolean>>(
+    `@op:${persistentKey}-column-visibility`,
+  );
+};
+
 export const useDataTableColumnVisibility = <TData,>(
  columns: ColumnDef<TData>[],
  persistentKey: string,
@@ -43,6 +49,13 @@ export const useDataTableColumnVisibility = <TData,>(
    }, {} as VisibilityState),
  );

+  // somewhat hack
+  // Set initial column visibility,
+  // otherwise will not useReadColumnVisibility be updated
+  useEffect(() => {
+    setColumnVisibility(columnVisibility);
+  }, []);
+
  const [columnOrder, setColumnOrder] = useLocalStorage<string[]>(
    `@op:${persistentKey}-column-order`,
    columns.map((column) => column.id!),
--- a/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.conversions.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.conversions.tsx
@@ -1,4 +1,5 @@
 import { EventsTable } from '@/components/events/table';
+import { useReadColumnVisibility } from '@/components/ui/data-table/data-table-hooks';
 import { useEventQueryNamesFilter } from '@/hooks/use-event-query-filters';
 import { useTRPC } from '@/integrations/trpc/react';
 import { useInfiniteQuery } from '@tanstack/react-query';
@@ -20,6 +21,7 @@ function Component() {
  );
  const [endDate, setEndDate] = useQueryState('endDate', parseAsIsoDateTime);
  const [eventNames] = useEventQueryNamesFilter();
+  const columnVisibility = useReadColumnVisibility('events');
  const query = useInfiniteQuery(
    trpc.event.conversions.infiniteQueryOptions(
      {
@@ -27,6 +29,7 @@ function Component() {
        startDate: startDate || undefined,
        endDate: endDate || undefined,
        events: eventNames,
+        columnVisibility: columnVisibility ?? {},
      },
      {
        getNextPageParam: (lastPage) => lastPage.meta.next,
--- a/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.events.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.events.tsx
@@ -1,4 +1,5 @@
 import { EventsTable } from '@/components/events/table';
+import { useReadColumnVisibility } from '@/components/ui/data-table/data-table-hooks';
 import {
  useEventQueryFilters,
  useEventQueryNamesFilter,
@@ -21,6 +22,8 @@ function Component() {
  const [startDate] = useQueryState('startDate', parseAsIsoDateTime);
  const [endDate] = useQueryState('endDate', parseAsIsoDateTime);
  const [eventNames] = useEventQueryNamesFilter();
+  const columnVisibility = useReadColumnVisibility('events');
+
  const query = useInfiniteQuery(
    trpc.event.events.infiniteQueryOptions(
      {
@@ -30,8 +33,10 @@ function Component() {
        profileId: '',
        startDate: startDate || undefined,
        endDate: endDate || undefined,
+        columnVisibility: columnVisibility ?? {},
      },
      {
+        enabled: columnVisibility !== null,
        getNextPageParam: (lastPage) => lastPage.meta.next,
      },
    ),
--- a/apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.events.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.events.tsx
@@ -1,4 +1,5 @@
 import { EventsTable } from '@/components/events/table';
+import { useReadColumnVisibility } from '@/components/ui/data-table/data-table-hooks';
 import {
  useEventQueryFilters,
  useEventQueryNamesFilter,
@@ -21,6 +22,7 @@ function Component() {
  const [startDate] = useQueryState('startDate', parseAsIsoDateTime);
  const [endDate] = useQueryState('endDate', parseAsIsoDateTime);
  const [eventNames] = useEventQueryNamesFilter();
+  const columnVisibility = useReadColumnVisibility('events');
  const query = useInfiniteQuery(
    trpc.event.events.infiniteQueryOptions(
      {
@@ -30,8 +32,10 @@ function Component() {
        startDate: startDate || undefined,
        endDate: endDate || undefined,
        events: eventNames,
+        columnVisibility: columnVisibility ?? {},
      },
      {
+        enabled: columnVisibility !== null,
        getNextPageParam: (lastPage) => lastPage.meta.next,
      },
    ),
--- a/apps/start/src/routes/_app.$organizationId.$projectId.sessions_.$sessionId.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.sessions_.$sessionId.tsx
@@ -3,12 +3,11 @@ import FullPageLoadingState from '@/components/full-page-loading-state';
 import { PageContainer } from '@/components/page-container';
 import { PageHeader } from '@/components/page-header';
 import { SerieIcon } from '@/components/report-chart/common/serie-icon';
-import { useDataTablePagination } from '@/components/ui/data-table/data-table-hooks';
+import { useReadColumnVisibility } from '@/components/ui/data-table/data-table-hooks';
 import {
  useEventQueryFilters,
  useEventQueryNamesFilter,
 } from '@/hooks/use-event-query-filters';
-import { useSearchQueryState } from '@/hooks/use-search-query-state';
 import { useTRPC } from '@/integrations/trpc/react';
 import { createProjectTitle } from '@/utils/title';
 import { useInfiniteQuery, useSuspenseQuery } from '@tanstack/react-query';
@@ -46,8 +45,6 @@ function Component() {
  const trpc = useTRPC();

  const LIMIT = 50;
-  const { page } = useDataTablePagination(LIMIT);
-  const { debouncedSearch } = useSearchQueryState();

  const { data: session } = useSuspenseQuery(
    trpc.session.byId.queryOptions({
@@ -60,7 +57,7 @@ function Component() {
  const [startDate] = useQueryState('startDate', parseAsIsoDateTime);
  const [endDate] = useQueryState('endDate', parseAsIsoDateTime);
  const [eventNames] = useEventQueryNamesFilter();
-
+  const columnVisibility = useReadColumnVisibility('events');
  const query = useInfiniteQuery(
    trpc.event.events.infiniteQueryOptions(
      {
@@ -70,8 +67,10 @@ function Component() {
        events: eventNames,
        startDate: startDate || undefined,
        endDate: endDate || undefined,
+        columnVisibility: columnVisibility ?? {},
      },
      {
+        enabled: columnVisibility !== null,
        getNextPageParam: (lastPage) => lastPage.meta.next,
      },
    ),