improve profile page

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

@@ -30,7 +30,7 @@ interface EventListProps {
   count: number;
 }
 export function EventList({ data, count }: EventListProps) {
-  const { cursor, setCursor } = useCursor();
+  const { cursor, setCursor, loading } = useCursor();
   const [filters] = useEventQueryFilters();
   return (
     <>
@@ -77,6 +77,7 @@ export function EventList({ data, count }: EventListProps) {
                           setCursor={setCursor}
                           count={count}
                           take={50}
+                          loading={loading}
                         />
                       )}
                     </div>
@@ -92,6 +93,7 @@ export function EventList({ data, count }: EventListProps) {
             setCursor={setCursor}
             count={count}
             take={50}
+            loading={loading}
           />
         </>
       )}

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/loading.tsx

@@ -1,3 +0,0 @@
-import FullPageLoadingState from '@/components/full-page-loading-state';
-
-export default FullPageLoadingState;

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/page.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { Suspense, useMemo } from 'react';
 import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
 import { ListPropertiesIcon } from '@/components/events/list-properties-icon';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
@@ -64,12 +64,7 @@ export default async function Page({
   };
   const startDate = parseAsString.parseServerSide(searchParams.startDate);
   const endDate = parseAsString.parseServerSide(searchParams.endDate);
-  const [profile, events, count, metrics] = await Promise.all([
+  const profile = await getProfileById(profileId, projectId);
-    getProfileById(profileId, projectId),
-    getEventList(eventListOptions),
-    getEventsCount(eventListOptions),
-    getProfileMetrics(profileId, projectId),
-  ]);
 
   const pageViewsChart: IChartInput = {
     projectId,
@@ -148,11 +143,11 @@ export default async function Page({
   return (
     <>
       <PageLayout organizationSlug={organizationSlug} title={<div />} />
-      <StickyBelowHeader className="!relative !top-auto !z-0 flex items-center gap-8 p-8">
+      <StickyBelowHeader className="!relative !top-auto !z-0 flex flex-col gap-8 p-4 md:flex-row md:items-center md:p-8">
         <div className="flex flex-1 gap-4">
           <ProfileAvatar {...profile} size={'lg'} />
-          <div className="">
+          <div className="min-w-0">
-            <h1 className="text-2xl font-semibold">
+            <h1 className="max-w-full overflow-hidden text-ellipsis break-words text-lg font-semibold md:max-w-sm md:whitespace-nowrap md:text-2xl">
               {getProfileName(profile)}
             </h1>
             <div className="flex items-center gap-4">
@@ -194,31 +189,19 @@ export default async function Page({
           </Widget>
         </div>
         <div className="mt-8">
-          <EventList data={events} count={count} />
+          <Suspense fallback={<div />}>
+            <EventListServer {...eventListOptions} />
+          </Suspense>
         </div>
       </div>
     </>
   );
 }
 
-function ValueRow({ name, value }: { name: string; value?: unknown }) {
+async function EventListServer(props: GetEventListOptions) {
-  if (!value) {
+  const [events, count] = await Promise.all([
-    return null;
+    getEventList(props),
-  }
+    getEventsCount(props),
-  return (
+  ]);
-    <div className="flex flex-row justify-between">
+  return <EventList data={events} count={count} />;
-      <div className="font-medium capitalize text-muted-foreground">
-        {name.replace('_', ' ')}
-      </div>
-      <div className="flex items-center gap-2 text-right">
-        {typeof value === 'string' ? (
-          <>
-            <SerieIcon name={value} /> {value}
-          </>
-        ) : (
-          <>{value}</>
-        )}
-      </div>
-    </div>
-  );
 }

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

@@ -1,4 +1,4 @@
-import withLoadingWidget from '@/hocs/with-loading-widget';
+import withSuspense from '@/hocs/with-suspense';
 
 import { getProfileMetrics } from '@openpanel/db';
 
@@ -14,4 +14,4 @@ const ProfileMetricsServer = async ({ projectId, profileId }: Props) => {
   return <ProfileMetrics data={data} />;
 };
 
-export default withLoadingWidget(ProfileMetricsServer);
+export default withSuspense(ProfileMetricsServer, () => null);

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

@@ -12,52 +12,52 @@ type Props = {
 const ProfileMetrics = ({ data }: Props) => {
   const number = useNumber();
   return (
-    <div className="flex gap-6">
+    <div className="flex flex-wrap gap-6 whitespace-nowrap md:justify-end md:text-right">
-      <div className="rounded-xl text-right">
+      <div>
         <div className="text-xs font-medium text-muted-foreground">
           First seen
         </div>
-        <div className="text-xl font-medium">
+        <div className="text-lg font-semibold">
           {formatDistanceToNow(data.firstSeen)}
         </div>
       </div>
-      <div className="rounded-xl text-right">
+      <div>
         <div className="text-xs font-medium text-muted-foreground">
           Last seen
         </div>
-        <div className="text-xl font-medium">
+        <div className="text-lg font-semibold">
           {formatDistanceToNow(data.lastSeen)}
         </div>
       </div>
-      <div className="rounded-xl text-right">
+      <div>
         <div className="text-xs font-medium text-muted-foreground">
           Sessions
         </div>
-        <div className="text-xl font-medium">
+        <div className="text-lg font-semibold">
           {number.format(data.sessions)}
         </div>
       </div>
-      <div className="rounded-xl text-right">
+      <div>
         <div className="text-xs font-medium text-muted-foreground">
           Avg. Session
         </div>
-        <div className="text-xl font-medium">
+        <div className="text-lg font-semibold">
           {number.formatWithUnit(data.durationAvg / 1000, 'min')}
         </div>
       </div>
-      <div className="rounded-xl text-right">
+      <div>
         <div className="text-xs font-medium text-muted-foreground">
           P90. Session
         </div>
-        <div className="text-xl font-medium">
+        <div className="text-lg font-semibold">
           {number.formatWithUnit(data.durationP90 / 1000, 'min')}
         </div>
       </div>
-      <div className="rounded-xl text-right">
+      <div>
         <div className="text-xs font-medium text-muted-foreground">
           Page views
         </div>
-        <div className="text-xl font-medium">
+        <div className="text-lg font-semibold">
           {number.format(data.screenViews)}
         </div>
       </div>

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

@@ -1,3 +0,0 @@
-import FullPageLoadingState from '@/components/full-page-loading-state';
-
-export default FullPageLoadingState;

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

@@ -11,7 +11,7 @@ interface Props {
   filters?: IChartEventFilter[];
 }
 
-const limit = 50;
+const limit = 40;
 
 async function ProfileListServer({ projectId, cursor, filters }: Props) {
   const [profiles, count] = await Promise.all([

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

@@ -23,7 +23,7 @@ interface ProfileListProps {
 }
 export function ProfileList({ data, count, limit = 50 }: ProfileListProps) {
   const { organizationSlug, projectId } = useAppParams();
-  const { cursor, setCursor } = useCursor();
+  const { cursor, setCursor, loading } = useCursor();
   return (
     <Widget>
       <WidgetHead className="flex items-center justify-between">
@@ -32,6 +32,7 @@ export function ProfileList({ data, count, limit = 50 }: ProfileListProps) {
           size="sm"
           cursor={cursor}
           setCursor={setCursor}
+          loading={loading}
           count={count}
           take={limit}
         />

apps/dashboard/src/components/pagination.tsx

@@ -29,6 +29,7 @@ export function Pagination({
   setCursor,
   className,
   size = 'base',
+  loading,
 }: {
   take: number;
   count: number;
@@ -36,6 +37,7 @@ export function Pagination({
   setCursor: Dispatch<SetStateAction<number>>;
   className?: string;
   size?: 'sm' | 'base';
+  loading?: boolean;
 }) {
   const lastCursor = Math.floor(count / take) - 1;
   const isNextDisabled = count === 0 || lastCursor === cursor;
@@ -56,42 +58,43 @@ export function Pagination({
       )}
       {size === 'base' && (
         <Button
+          loading={loading}
           variant="outline"
           size="icon"
           onClick={() => setCursor(0)}
           disabled={cursor === 0}
           className="max-sm:hidden"
-        >
+          icon={ChevronsLeftIcon}
-          <ChevronsLeftIcon size={14} />
+        />
-        </Button>
       )}
       <Button
+        loading={loading}
         variant="outline"
         size="icon"
         onClick={() => setCursor((p) => Math.max(0, p - 1))}
         disabled={cursor === 0}
-      >
+        icon={ChevronLeftIcon}
-        <ChevronLeftIcon size={14} />
+      />
-      </Button>
 
       <Button
+        loading={loading}
         variant="outline"
         size="icon"
         onClick={() => setCursor((p) => Math.min(lastCursor, p + 1))}
         disabled={isNextDisabled}
-      >
+        icon={ChevronRightIcon}
-        <ChevronRightIcon size={14} />
+      />
-      </Button>
+
       {size === 'base' && (
         <Button
+          loading={loading}
           variant="outline"
           size="icon"
           onClick={() => setCursor(lastCursor)}
           disabled={isNextDisabled}
           className="max-sm:hidden"
-        >
+          icon={ChevronsRightIcon}
-          <ChevronsRightIcon size={14} />
+        />
-        </Button>
       )}
     </div>
   );

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

@@ -76,9 +76,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {Icon && (
           <Icon
             className={cn(
-              'mr-2 h-4 w-4 flex-shrink-0',
+              'h-4 w-4 flex-shrink-0',
-              responsive && 'mr-0 sm:mr-2',
+              loading && 'animate-spin',
-              loading && 'animate-spin'
+              size !== 'icon' && responsive && 'mr-0 sm:mr-2',
+              size !== 'icon' && 'mr-2'
             )}
           />
         )}

apps/dashboard/src/hooks/useCursor.ts

@@ -1,14 +1,17 @@
+import { useTransition } from 'react';
 import { parseAsInteger, useQueryState } from 'nuqs';
 
 export function useCursor() {
+  const [loading, startTransition] = useTransition();
   const [cursor, setCursor] = useQueryState(
     'cursor',
     parseAsInteger
-      .withOptions({ shallow: false, history: 'push' })
+      .withOptions({ shallow: false, history: 'push', startTransition })
       .withDefault(0)
   );
   return {
     cursor,
     setCursor,
+    loading,
   };
 }

packages/db/src/clickhouse-client.ts

@@ -15,16 +15,15 @@ export const ch = createClient({
 export async function chQueryWithMeta<T extends Record<string, any>>(
   query: string
 ): Promise<ResponseJSON<T>> {
-  console.log('Query:', query);
   const start = Date.now();
   const res = await ch.query({
     query,
   });
   const json = await res.json<T>();
+  const keys = Object.keys(json.data[0] || {});
   const response = {
     ...json,
     data: json.data.map((item) => {
-      const keys = Object.keys(item);
       return keys.reduce((acc, key) => {
         const meta = json.meta?.find((m) => m.name === key);
         return {
@@ -38,8 +37,10 @@ export async function chQueryWithMeta<T extends Record<string, any>>(
     }),
   };
 
-  console.log(`Clickhouse query took ${response.statistics?.elapsed}ms`);
+  console.log(
-  console.log(`chQuery took ${Date.now() - start}ms`);
+    `Query: (${Date.now() - start}ms, ${response.statistics?.elapsed}ms)`,
+    query
+  );
 
   return response;
 }

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

@@ -42,7 +42,7 @@ export async function getProfileById(id: string, projectId: string) {
   }
 
   const [profile] = await chQuery<IClickhouseProfile>(
-    `SELECT *, created_at as max_created_at FROM profiles WHERE id = ${escape(id)} AND project_id = ${escape(projectId)} ORDER BY created_at DESC LIMIT 1`
+    `SELECT * FROM profiles WHERE id = ${escape(id)} AND project_id = ${escape(projectId)} ORDER BY created_at DESC LIMIT 1`
   );
 
   if (!profile) {
@@ -59,20 +59,6 @@ interface GetProfileListOptions {
   filters?: IChartEventFilter[];
 }
 
-function getProfileSelectFields() {
-  return [
-    'id',
-    'argMax(first_name, created_at) as first_name',
-    'argMax(last_name, created_at) as last_name',
-    'argMax(email, created_at) as email',
-    'argMax(avatar, created_at) as avatar',
-    'argMax(properties, created_at) as properties',
-    'argMax(project_id, created_at) as project_id',
-    'argMax(is_external, created_at) as is_external',
-    'max(created_at) as max_created_at',
-  ].join(', ');
-}
-
 interface GetProfilesOptions {
   ids: string[];
 }
@@ -82,25 +68,15 @@ export async function getProfiles({ ids }: GetProfilesOptions) {
   }
 
   const data = await chQuery<IClickhouseProfile>(
-    `SELECT 
+    `SELECT *
-    ${getProfileSelectFields()}
+    FROM profiles FINAL 
-    FROM profiles 
     WHERE id IN (${ids.map((id) => escape(id)).join(',')})
-    GROUP BY id
     `
   );
 
   return data.map(transformProfile);
 }
 
-function getProfileInnerSelect(projectId: string) {
-  return `(SELECT 
-    ${getProfileSelectFields()}
-    FROM profiles 
-    GROUP BY id
-    HAVING project_id = ${escape(projectId)})`;
-}
-
 export async function getProfileList({
   take,
   cursor,
@@ -108,16 +84,12 @@ export async function getProfileList({
   filters,
 }: GetProfileListOptions) {
   const { sb, getSql } = createSqlBuilder();
-  sb.from = getProfileInnerSelect(projectId);
+  sb.from = 'profiles FINAL';
-  if (filters) {
+  sb.select.all = '*';
-    sb.where = {
+  sb.where.project_id = `project_id = ${escape(projectId)}`;
-      ...sb.where,
-      ...getEventFiltersWhereClause(filters),
-    };
-  }
   sb.limit = take;
   sb.offset = Math.max(0, (cursor ?? 0) * take);
-  sb.orderBy.created_at = 'max_created_at DESC';
+  sb.orderBy.created_at = 'created_at DESC';
   const data = await chQuery<IClickhouseProfile>(getSql());
   return data.map(transformProfile);
 }
@@ -127,21 +99,17 @@ export async function getProfileListCount({
   filters,
 }: Omit<GetProfileListOptions, 'cursor' | 'take'>) {
   const { sb, getSql } = createSqlBuilder();
+  sb.from = 'profiles FINAL';
   sb.select.count = 'count(id) as count';
-  sb.from = getProfileInnerSelect(projectId);
+  sb.where.project_id = `project_id = ${escape(projectId)}`;
-  if (filters) {
+  sb.groupBy.project_id = 'project_id';
-    sb.where = {
+  const data = await chQuery<{ count: number }>(getSql());
-      ...sb.where,
+  return data[0]?.count ?? 0;
-      ...getEventFiltersWhereClause(filters),
-    };
-  }
-  const [data] = await chQuery<{ count: number }>(getSql());
-  return data?.count ?? 0;
 }
 
 export type IServiceProfile = Omit<
   IClickhouseProfile,
-  'max_created_at' | 'properties' | 'first_name' | 'last_name' | 'is_external'
+  'created_at' | 'properties' | 'first_name' | 'last_name' | 'is_external'
 > & {
   firstName: string;
   lastName: string;
@@ -168,7 +136,7 @@ export interface IClickhouseProfile {
   properties: Record<string, string | undefined>;
   project_id: string;
   is_external: boolean;
-  max_created_at: string;
+  created_at: string;
 }
 
 export interface IServiceUpsertProfile {
@@ -183,7 +151,7 @@ export interface IServiceUpsertProfile {
 }
 
 export function transformProfile({
-  max_created_at,
+  created_at,
   first_name,
   last_name,
   ...profile
@@ -194,7 +162,7 @@ export function transformProfile({
     lastName: last_name,
     isExternal: profile.is_external,
     properties: toObject(profile.properties),
-    createdAt: new Date(max_created_at),
+    createdAt: new Date(created_at),
   };
 }
 

packages/db/src/sql-builder.ts

@@ -1,5 +1,6 @@
 export interface SqlBuilderObject {
   where: Record<string, string>;
+  having: Record<string, string>;
   select: Record<string, string>;
   groupBy: Record<string, string>;
   orderBy: Record<string, string>;
@@ -18,12 +19,15 @@ export function createSqlBuilder() {
     select: {},
     groupBy: {},
     orderBy: {},
+    having: {},
     limit: undefined,
     offset: undefined,
   };
 
   const getWhere = () =>
     Object.keys(sb.where).length ? 'WHERE ' + join(sb.where, ' AND ') : '';
+  const getHaving = () =>
+    Object.keys(sb.having).length ? 'HAVING ' + join(sb.having, ' AND ') : '';
   const getFrom = () => `FROM ${sb.from}`;
   const getSelect = () =>
     'SELECT ' + (Object.keys(sb.select).length ? join(sb.select, ', ') : '*');
@@ -42,22 +46,20 @@ export function createSqlBuilder() {
     getSelect,
     getGroupBy,
     getOrderBy,
+    getHaving,
     getSql: () => {
       const sql = [
         getSelect(),
         getFrom(),
         getWhere(),
         getGroupBy(),
+        getHaving(),
         getOrderBy(),
         getLimit(),
         getOffset(),
       ]
         .filter(Boolean)
         .join(' ');
-      console.log('---');
-      console.log(sql);
-      console.log('---');
-
       return sql;
     },
   };