src/app/(main)/App.tsx

@@ -16,7 +16,7 @@ export function App({ children }) {
   }
 
   if (error) {
-    window.location.href = `${process.env.basePath || ''}/login`;
+    window.location.href = '/login';
     return null;
   }
 

src/app/(main)/websites/[websiteId]/events/EventsTable.tsx

@@ -1,24 +1,11 @@
-import {
+import { DataTable, DataColumn, Row, Text, DataTableProps, IconLabel } from '@umami/react-zen';
-  DataTable,
-  DataColumn,
-  Row,
-  Text,
-  DataTableProps,
-  IconLabel,
-  Button,
-  Dialog,
-  DialogTrigger,
-  Icon,
-  Popover,
-} from '@umami/react-zen';
 import { useFormat, useMessages, useNavigation } from '@/components/hooks';
 import { Avatar } from '@/components/common/Avatar';
 import Link from 'next/link';
-import { Eye, FileText } from '@/components/icons';
+import { Eye } from '@/components/icons';
 import { Lightning } from '@/components/svg';
 import { DateDistance } from '@/components/common/DateDistance';
 import { TypeIcon } from '@/components/common/TypeIcon';
-import { EventData } from '@/components/metrics/EventData';
 
 export function EventsTable(props: DataTableProps) {
   const { formatMessage, labels } = useMessages();
@@ -45,7 +32,6 @@ export function EventsTable(props: DataTableProps) {
               >
                 {row.eventName || row.urlPath}
               </Text>
-              {row.hasData > 0 && <PropertiesButton websiteId={row.websiteId} eventId={row.id} />}
             </Row>
           );
         }}
@@ -86,22 +72,3 @@ export function EventsTable(props: DataTableProps) {
     </DataTable>
   );
 }
-
-const PropertiesButton = props => {
-  return (
-    <DialogTrigger>
-      <Button variant="quiet">
-        <Row alignItems="center" gap>
-          <Icon>
-            <FileText />
-          </Icon>
-        </Row>
-      </Button>
-      <Popover placement="right">
-        <Dialog>
-          <EventData {...props} />
-        </Dialog>
-      </Popover>
-    </DialogTrigger>
-  );
-};

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -9,7 +9,6 @@ import {
   useCountryNames,
   useLocale,
   useMessages,
-  useMobile,
   useNavigation,
   useTimezone,
   useWebsite,
@@ -41,7 +40,6 @@ export function RealtimeLog({ data }: { data: any }) {
   const { countryNames } = useCountryNames(locale);
   const [filter, setFilter] = useState(TYPE_ALL);
   const { updateParams } = useNavigation();
-  const { isPhone } = useMobile();
 
   const buttons = [
     {
@@ -125,18 +123,12 @@ export function RealtimeLog({ data }: { data: any }) {
     const row = logs[index];
     return (
       <Row alignItems="center" style={style} gap>
-        <Row minWidth="30px">
         <Link href={updateParams({ session: row.sessionId })}>
           <Avatar seed={row.sessionId} size={32} />
         </Link>
-        </Row>
+        <Row width="100px">{getTime(row)}</Row>
-        <Row minWidth="100px">
-          <Text wrap="nowrap">{getTime(row)}</Text>
-        </Row>
         <IconLabel icon={getIcon(row)}>
-          <Text style={{ maxWidth: isPhone ? '400px' : null }} truncate>
+          <Text>{getDetail(row)}</Text>
-            {getDetail(row)}
-          </Text>
         </IconLabel>
       </Row>
     );
@@ -176,22 +168,10 @@ export function RealtimeLog({ data }: { data: any }) {
   return (
     <Column gap>
       <Heading size="2">{formatMessage(labels.activity)}</Heading>
-      {isPhone ? (
-        <>
-          <Row>
-            <SearchField value={search} onSearch={setSearch} />
-          </Row>
-          <Row>
-            <FilterButtons items={buttons} value={filter} onChange={setFilter} />
-          </Row>
-        </>
-      ) : (
       <Row alignItems="center" justifyContent="space-between">
         <SearchField value={search} onSearch={setSearch} />
         <FilterButtons items={buttons} value={filter} onChange={setFilter} />
       </Row>
-      )}
-
       <Column>
         {logs?.length === 0 && <Empty />}
         {logs?.length > 0 && (

src/app/(main)/websites/[websiteId]/realtime/RealtimePage.tsx

@@ -6,7 +6,7 @@ import { PageBody } from '@/components/common/PageBody';
 import { Panel } from '@/components/common/Panel';
 import { RealtimeChart } from '@/components/metrics/RealtimeChart';
 import { WorldMap } from '@/components/metrics/WorldMap';
-import { useMobile, useRealtimeQuery } from '@/components/hooks';
+import { useRealtimeQuery } from '@/components/hooks';
 import { RealtimeLog } from './RealtimeLog';
 import { RealtimeHeader } from './RealtimeHeader';
 import { RealtimePaths } from './RealtimePaths';
@@ -16,7 +16,6 @@ import { percentFilter } from '@/lib/filters';
 
 export function RealtimePage({ websiteId }: { websiteId: string }) {
   const { data, isLoading, error } = useRealtimeQuery(websiteId);
-  const { isMobile } = useMobile();
 
   if (isLoading || error) {
     return <PageBody isLoading={isLoading} error={error} />;
@@ -49,7 +48,7 @@ export function RealtimePage({ websiteId }: { websiteId: string }) {
         <Panel>
           <RealtimeCountries data={countries} />
         </Panel>
-        <Panel gridColumn={isMobile ? null : 'span 2'} padding="0">
+        <Panel gridColumn="span 2" padding="0">
           <WorldMap data={countries} />
         </Panel>
       </GridRow>

src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx

@@ -14,7 +14,7 @@ import {
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Eye, FileText } from '@/components/icons';
 import { Lightning } from '@/components/svg';
-import { useMessages, useMobile, useSessionActivityQuery, useTimezone } from '@/components/hooks';
+import { useMessages, useSessionActivityQuery, useTimezone } from '@/components/hooks';
 import { EventData } from '@/components/metrics/EventData';
 
 export function SessionActivity({
@@ -36,7 +36,6 @@ export function SessionActivity({
     startDate,
     endDate,
   );
-  const { isMobile } = useMobile();
   let lastDay = null;
 
   return (
@@ -51,16 +50,16 @@ export function SessionActivity({
               {showHeader && <Heading size="1">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
               <Row alignItems="center" gap="6" height="40px">
                 <StatusLight color={`#${visitId?.substring(0, 6)}`}>
-                  <Text wrap="nowrap">{formatTimezoneDate(createdAt, 'pp')}</Text>
+                  {formatTimezoneDate(createdAt, 'pp')}
                 </StatusLight>
                 <Row alignItems="center" gap="2">
                   <Icon>{eventName ? <Lightning /> : <Eye />}</Icon>
-                  <Text wrap="nowrap">
+                  <Text>
                     {eventName
                       ? formatMessage(labels.triggeredEvent)
                       : formatMessage(labels.viewedPage)}
                   </Text>
-                  <Text weight="bold" style={{ maxWidth: isMobile ? '400px' : null }} truncate>
+                  <Text weight="bold" style={{ maxWidth: '400px' }} truncate>
                     {eventName || urlPath}
                   </Text>
                   {hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}

src/app/logout/LogoutPage.tsx

@@ -13,7 +13,7 @@ export function LogoutPage() {
     async function logout() {
       await post('/auth/logout');
 
-      window.location.href = `${process.env.basePath || ''}/login`;
+      window.location.href = '/login';
     }
 
     removeClientAuthToken();

src/components/metrics/ListTable.tsx

@@ -57,7 +57,7 @@ export function ListTable({
         showPercentage={showPercentage}
         change={renderChange ? renderChange(row, index) : null}
         currency={currency}
-        isPhone={isPhone}
+        isMobile={isPhone}
       />
     );
   };
@@ -101,7 +101,7 @@ const AnimatedRow = ({
   animate,
   showPercentage = true,
   currency,
-  isPhone,
+  isMobile,
 }) => {
   const props = useSpring({
     width: percent,
@@ -120,7 +120,7 @@ const AnimatedRow = ({
       gap
     >
       <Row alignItems="center">
-        <Text truncate={true} style={{ maxWidth: isPhone ? '200px' : '400px' }}>
+        <Text truncate={true} style={{ maxWidth: isMobile ? '200px' : '400px' }}>
           {label}
         </Text>
       </Row>

src/queries/sql/events/getEventData.ts

@@ -19,20 +19,20 @@ async function relationalQuery(websiteId: string, eventId: string) {
 
   return rawQuery(
     `
-    select event_data.website_id as "websiteId",
+    select website_id as "websiteId",
-       event_data.website_event_id as "eventId",
+       session_id as "sessionId",
-       website_event.event_name as "eventName",
+       event_id as "eventId",
-       event_data.data_key as "dataKey",
+       url_path as "urlPath",
-       event_data.string_value as "stringValue",
+       event_name as "eventName",
-       event_data.number_value as "numberValue",
+       data_key as "dataKey",
-       event_data.date_value as "dateValue",
+       string_value as "stringValue",
-       event_data.data_type as "dataType",
+       number_value as "numberValue",
-       event_data.created_at as "createdAt"
+       date_value as "dateValue",
+       data_type as "dataType",
+       created_at as "createdAt"
     from event_data
-    join website_event on website_event.event_id = event_data.website_event_id
+    website_id = {{websiteId::uuid}}
-      and website_event.website_id = {{websiteId::uuid}}
+      event_id = {{eventId::uuid}}
-    where event_data.website_id = {{websiteId::uuid}}
-      and event_data.website_event_id = {{eventId::uuid}}
     `,
     { websiteId, eventId },
     FUNCTION_NAME,
@@ -45,7 +45,9 @@ async function clickhouseQuery(websiteId: string, eventId: string): Promise<Even
   return rawQuery(
     `
       select website_id as websiteId,
+        session_id as sessionId,
         event_id as eventId,
+        url_path as urlPath,
         event_name as eventName,
         data_key as dataKey,
         string_value as stringValue,

src/queries/sql/events/getWebsiteEvents.ts

@@ -45,11 +45,7 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
       browser as browser,
       page_title as "pageTitle",
       website_event.event_type as "eventType",
-      website_event.event_name as "eventName",
+      website_event.event_name as "eventName"
-      event_id IN (select website_event_id 
-                   from event_data
-                   where website_id = {{websiteId::uuid}}
-                      and created_at between {{startDate}} and {{endDate}}) AS "hasData"
     from website_event
     ${cohortQuery}
     join session on session.session_id = website_event.session_id 

src/queries/sql/getWebsiteStats.ts

@@ -36,11 +36,11 @@ async function relationalQuery(
   return rawQuery(
     `
     select
-      cast(coalesce(sum(t.c), 0) as bigint) as "pageviews",
+      sum(t.c) as "pageviews",
       count(distinct t.session_id) as "visitors",
       count(distinct t.visit_id) as "visits",
-      coalesce(sum(case when t.c = 1 then 1 else 0 end), 0) as "bounces",
+      sum(case when t.c = 1 then 1 else 0 end) as "bounces",
-      cast(coalesce(sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}), 0) as bigint) as "totaltime"
+      sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}) as "totaltime"
     from (
       select
         website_event.session_id,

src/queries/sql/reports/getRevenue.ts

@@ -41,15 +41,6 @@ async function relationalQuery(
     currency,
   });
 
-  const joinQuery = filterQuery
-    ? `join website_event
-      on website_event.website_id = revenue.website_id
-        and website_event.session_id = revenue.session_id
-        and website_event.event_id = revenue.event_id
-        and website_event.website_id = {{websiteId::uuid}}
-        and website_event.created_at between {{startDate}} and {{endDate}}`
-    : '';
-
   const chart = await rawQuery(
     `
     select
@@ -57,12 +48,17 @@ async function relationalQuery(
       ${getDateSQL('revenue.created_at', unit, timezone)} t,
       sum(revenue.revenue) y
     from revenue
-    ${joinQuery}
+    join website_event
+      on website_event.website_id = revenue.website_id
+        and website_event.session_id = revenue.session_id
+        and website_event.event_id = revenue.event_id
+        and website_event.website_id = {{websiteId::uuid}}
+        and website_event.created_at between {{startDate}} and {{endDate}}
     ${cohortQuery}
     ${joinSessionQuery}
     where revenue.website_id = {{websiteId::uuid}}
       and revenue.created_at between {{startDate}} and {{endDate}}
-      and revenue.currency ilike {{currency}}
+      and revenue.currency like {{currency}}
       ${filterQuery}
     group by  x, t
     order by t
@@ -76,14 +72,19 @@ async function relationalQuery(
       session.country as name,
       sum(revenue) value
     from revenue 
-    ${joinQuery}
+    join website_event
+      on website_event.website_id = revenue.website_id
+        and website_event.session_id = revenue.session_id
+        and website_event.event_id = revenue.event_id
+        and website_event.website_id = {{websiteId::uuid}}
+        and website_event.created_at between {{startDate}} and {{endDate}}
     join session 
       on session.website_id = revenue.website_id
         and session.session_id = revenue.session_id
     ${cohortQuery}
     where revenue.website_id = {{websiteId::uuid}}
       and revenue.created_at between {{startDate}} and {{endDate}}
-      and revenue.currency ilike {{currency}}
+      and revenue.currency = {{currency}}
       ${filterQuery}
     group by session.country
     `,
@@ -97,18 +98,23 @@ async function relationalQuery(
       count(distinct revenue.event_id) as count,
       count(distinct revenue.session_id) as unique_count
     from revenue
-    ${joinQuery}
+    join website_event
+      on website_event.website_id = revenue.website_id
+        and website_event.session_id = revenue.session_id
+        and website_event.event_id = revenue.event_id
+        and website_event.website_id = {{websiteId::uuid}}
+        and website_event.created_at between {{startDate}} and {{endDate}}
     ${cohortQuery}
     ${joinSessionQuery}
     where revenue.website_id = {{websiteId::uuid}}
       and revenue.created_at between {{startDate}} and {{endDate}}
-      and revenue.currency ilike {{currency}}
+      and revenue.currency = {{currency}}
       ${filterQuery}
   `,
     queryParams,
   ).then(result => result?.[0]);
 
-  total.average = total.count > 0 ? Number(total.sum) / Number(total.count) : 0;
+  total.average = total.count > 0 ? total.sum / total.count : 0;
 
   return { chart, country, total };
 }

src/queries/sql/sessions/getSessionActivity.ts

@@ -29,10 +29,10 @@ async function relationalQuery(websiteId: string, sessionId: string, filters: Qu
       event_type as "eventType",
       event_name as "eventName",
       visit_id as "visitId",
-      event_id IN (select website_event_id 
+      event_id IN (select event_id 
                    from event_data
                    where website_id = {{websiteId::uuid}}
-                      and created_at between {{startDate}} and {{endDate}}) AS "hasData"
+                    and session_id = {{sessionId::uuid}}) AS "hasData"
     from website_event
     where website_id = {{websiteId::uuid}}
       and session_id = {{sessionId::uuid}}