Updated segment handling.

src/app/(main)/websites/[websiteId]/(reports)/page.tsx

@@ -1,3 +0,0 @@
-import GoalsPage from './goals/page';
-
-export default GoalsPage;

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

@@ -32,7 +32,7 @@ export function WebsiteFilterButton({
       {},
     );
 
-    const url = replaceParams({ ...params, segment: segment?.id });
+    const url = replaceParams({ ...params, segment });
 
     router.push(url);
   };

src/components/common/FilterEditForm.tsx

@@ -21,10 +21,11 @@ export function FilterEditForm({
 }: FilterEditFormProps) {
   const { formatMessage, labels } = useMessages();
   const [currentFilters, setCurrentFilters] = useState(filters);
-  const [currentSegment, setCurrentSegment] = useState(null);
+  const [currentSegment, setCurrentSegment] = useState(segmentId);
 
   const handleReset = () => {
     setCurrentFilters([]);
+    setCurrentSegment(null);
   };
 
   const handleSave = () => {
@@ -32,8 +33,8 @@ export function FilterEditForm({
     onClose?.();
   };
 
-  const handleSegmentChange = (segment?: { id: string }) => {
-    setCurrentSegment(segment);
+  const handleSegmentChange = (id: string) => {
+    setCurrentSegment(id);
   };
 
   return (
@@ -49,7 +50,7 @@ export function FilterEditForm({
         <TabPanel id="segments">
           <SegmentFilters
             websiteId={websiteId}
-            segmentId={segmentId}
+            segmentId={currentSegment}
             onSave={handleSegmentChange}
           />
         </TabPanel>

src/components/hooks/queries/useWebsiteMetricsQuery.ts

@@ -2,7 +2,6 @@ import { keepPreviousData } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParameters } from '../useFilterParameters';
 import { useDateParameters } from '../useDateParameters';
-import { useSearchParams } from 'next/navigation';
 import { ReactQueryOptions } from '@/lib/types';
 
 export type WebsiteMetricsData = {
@@ -18,7 +17,6 @@ export function useWebsiteMetricsQuery(
   const { get, useQuery } = useApi();
   const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
-  const searchParams = useSearchParams();
 
   return useQuery<WebsiteMetricsData>({
     queryKey: [
@@ -34,7 +32,6 @@ export function useWebsiteMetricsQuery(
       get(`/websites/${websiteId}/metrics`, {
         ...date,
         ...filters,
-        [searchParams.get('view')]: undefined,
         ...params,
       }),
     enabled: !!websiteId,

src/components/hooks/useFilterParameters.ts

@@ -21,6 +21,8 @@ export function useFilterParameters() {
       page,
       pageSize,
       search,
+      segment,
+      cohort,
     },
   } = useNavigation();
 
@@ -41,6 +43,8 @@ export function useFilterParameters() {
       tag,
       hostname,
       search,
+      segment,
+      cohort,
     };
   }, [
     path,
@@ -60,5 +64,7 @@ export function useFilterParameters() {
     page,
     pageSize,
     search,
+    segment,
+    cohort,
   ]);
 }

src/components/input/SegmentFilters.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { List, Column, ListItem } from '@umami/react-zen';
 import { useWebsiteSegmentsQuery } from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
@@ -11,17 +10,15 @@ export interface SegmentFiltersProps {
 
 export function SegmentFilters({ websiteId, segmentId, onSave }: SegmentFiltersProps) {
   const { data, isLoading } = useWebsiteSegmentsQuery(websiteId, { type: 'segment' });
-  const [currentSegment, setCurrentSegment] = useState(segmentId);
 
-  const handleSave = (id: string) => {
-    setCurrentSegment(id);
-    onSave?.(data.find(item => item.id === id));
+  const handleChange = (id: string) => {
+    onSave?.(id);
   };
 
   return (
     <Column height="400px" gap>
       <LoadingPanel data={data} isLoading={isLoading} overflowY="auto">
-        <List selectionMode="single" value={[currentSegment]} onChange={id => handleSave(id[0])}>
+        <List selectionMode="single" value={[segmentId]} onChange={id => handleChange(id[0])}>
           {data?.map(item => {
             return (
               <ListItem key={item.id} id={item.id}>

src/lib/clickhouse.ts

@@ -87,21 +87,6 @@ function mapFilter(column: string, operator: string, name: string, type: string
   }
 }
 
-function mapCohortFilter(column: string, operator: string, value: string) {
-  switch (operator) {
-    case OPERATORS.equals:
-      return `${column} = '${value}'`;
-    case OPERATORS.notEquals:
-      return `${column} != '${value}'`;
-    case OPERATORS.contains:
-      return `positionCaseInsensitive(${column}, '${value}') > 0`;
-    case OPERATORS.doesNotContain:
-      return `positionCaseInsensitive(${column}, '${value}') = 0`;
-    default:
-      return '';
-  }
-}
-
 function getFilterQuery(filters: Record<string, any>, options: QueryOptions = {}) {
   const query = filtersToArray(filters, options).reduce((arr, { name, column, operator }) => {
     if (column) {
@@ -118,40 +103,22 @@ function getFilterQuery(filters: Record<string, any>, options: QueryOptions = {}
   return query.join('\n');
 }
 
-function getCohortQuery(websiteId: string, filters: QueryFilters = {}, options: QueryOptions = {}) {
-  const query = filtersToArray(filters, options).reduce(
-    (arr, { name, column, operator, value }) => {
-      if (column) {
-        arr.push(
-          `${arr.length === 0 ? 'where' : 'and'} ${mapCohortFilter(column, operator, value)}`,
-        );
-
-        if (name === 'referrer') {
-          arr.push(`and referrer_domain != hostname`);
-        }
-      }
-
-      return arr;
-    },
-    [],
-  );
-
-  if (query.length > 0) {
-    // add website and date range filters
-    query.push(`and website_id = '${websiteId}'`);
-    query.push(
-      `and created_at between parseDateTimeBestEffort('${filters.startDate}') and parseDateTimeBestEffort('${filters.endDate}')`,
-    );
-
-    return `join
-    (select distinct session_id
-    from website_event
-    ${query.join('\n')}) cohort
-    on cohort.session_id = website_event.session_id
-    `;
+function getCohortQuery(filters: Record<string, any>, options: QueryOptions = {}) {
+  if (!filters) {
+    return '';
   }
 
-  return '';
+  const filterQuery = getFilterQuery(filters, options);
+
+  return `join (
+      select distinct session_id
+      from website_event
+      where website_id = {websiteId:UUID}
+      and created_at between {startDate:DateTime64} and {endDate:DateTime64}
+      ${filterQuery}
+    ) as cohort
+      on cohort.session_id = website_event.session_id
+    `;
 }
 
 function getDateQuery(filters: Record<string, any>) {
@@ -192,7 +159,7 @@ function parseFilters(filters: Record<string, any>, options?: QueryOptions) {
     filterQuery: getFilterQuery(filters, options),
     dateQuery: getDateQuery(filters),
     queryParams: getQueryParams(filters),
-    cohortQuery: getCohortQuery(filters?.cohort),
+    cohortQuery: getCohortQuery(filters?.cohortFilters, options),
   };
 }
 

src/lib/params.ts

@@ -5,7 +5,7 @@ export function parseParameterValue(param: any) {
   if (typeof param === 'string') {
     const [, operator, value] = param.match(/^([a-z]+)\.(.*)/) || [];
 
-    return { operator, value };
+    return { operator: operator || OPERATORS.equals, value: value || param };
   }
   return { operator: OPERATORS.equals, value: param };
 }

src/lib/prisma.ts

@@ -241,7 +241,7 @@ async function pagedQuery<T>(model: string, criteria: T, filters?: QueryFilters)
   return { data, count, page: +page, pageSize: size, orderBy, search };
 }
 
-async function pagedRawQuery(
+async function rawPagedQuery(
   query: string,
   filters: QueryFilters,
   queryParams: Record<string, any>,
@@ -360,7 +360,7 @@ export default {
   getTimestampDiffSQL,
   getSearchSQL,
   pagedQuery,
-  pagedRawQuery,
+  pagedRawQuery: rawPagedQuery,
   parseFilters,
   rawQuery,
 };

src/lib/request.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod/v4';
-import { FILTER_COLUMNS, DEFAULT_PAGE_SIZE, FILTER_GROUPS } from '@/lib/constants';
+import { FILTER_COLUMNS, DEFAULT_PAGE_SIZE } from '@/lib/constants';
 import { badRequest, unauthorized } from '@/lib/response';
 import { getAllowedUnits, getMinimumUnit, maxDate } from '@/lib/date';
 import { checkAuth } from '@/lib/auth';
@@ -79,16 +79,6 @@ export function getRequestFilters(query: Record<string, any>) {
   return result;
 }
 
-export async function getRequestSegments(websiteId: string, query: Record<string, any>) {
-  for (const key of Object.keys(FILTER_GROUPS)) {
-    const value = query[key];
-
-    if (value !== undefined) {
-      return getWebsiteSegment(websiteId, key, value);
-    }
-  }
-}
-
 export async function setWebsiteDate(websiteId: string, data: Record<string, any>) {
   const website = await fetchWebsite(websiteId);
 
@@ -109,7 +99,13 @@ export async function getQueryFilters(
   if (websiteId) {
     await setWebsiteDate(websiteId, dateRange);
 
-    Object.assign(filters, await getRequestSegments(websiteId, params));
+    if (params.segment) {
+      Object.assign(filters, (await getWebsiteSegment(websiteId, params.segment))?.parameters);
+    }
+
+    if (params.cohort) {
+      filters.cohortFilters = (await getWebsiteSegment(websiteId, params.cohort))?.parameters;
+    }
   }
 
   return {

src/lib/schema.ts

@@ -35,8 +35,8 @@ export const filterParams = {
   hostname: z.string().optional(),
   language: z.string().optional(),
   event: z.string().optional(),
-  segment: z.string().optional(),
-  cohort: z.string().optional(),
+  segment: z.string().uuid().optional(),
+  cohort: z.string().uuid().optional(),
   eventType: z.coerce.number().int().positive().optional(),
 };
 

src/lib/types.ts

@@ -44,7 +44,14 @@ export interface QueryOptions {
   prefix?: string;
 }
 
-export interface QueryFilters extends DateParams, FilterParams, SortParams, PageParams {}
+export interface QueryFilters
+  extends DateParams,
+    FilterParams,
+    SortParams,
+    PageParams,
+    SegmentParams {
+  cohortFilters?: QueryFilters;
+}
 
 export interface DateParams {
   startDate?: Date;
@@ -86,6 +93,11 @@ export interface PageParams {
   pageSize?: number;
 }
 
+export interface SegmentParams {
+  segment?: string;
+  cohort?: string;
+}
+
 export interface PageResult<T> {
   data: T;
   count: number;

src/queries/prisma/segment.ts

@@ -13,13 +13,9 @@ export async function getSegment(segmentId: string): Promise<Segment> {
   });
 }
 
-export async function getWebsiteSegment(
-  websiteId: string,
-  type: string,
-  name: string,
-): Promise<Segment> {
-  return prisma.client.segment.findFirst({
-    where: { websiteId, type, name },
+export async function getWebsiteSegment(websiteId: string, segmentId: string): Promise<Segment> {
+  return prisma.client.Segment.findFirst({
+    where: { id: segmentId, websiteId },
   });
 }