From 128217c0f4d49e08035c8f7a5db806fa49c7825c Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Sat, 24 Jan 2026 10:09:10 -0800
Subject: [PATCH] add event type filter button and implementation to journeys
 Close #2803

---
 .../(reports)/journeys/Journey.tsx            | 10 +++++++-
 .../(reports)/journeys/JourneysPage.tsx       | 23 ++++++++++++++++++-
 src/app/api/reports/journey/route.ts          |  5 ++++
 src/lib/schema.ts                             |  1 +
 src/queries/sql/reports/getJourney.ts         |  4 ++--
 5 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx b/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx
index 3327a425..1b893d27 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx
@@ -21,9 +21,15 @@ export interface JourneyProps {
   steps: number;
   startStep?: string;
   endStep?: string;
+  view: string;
 }
 
-export function Journey({ websiteId, steps, startStep, endStep }: JourneyProps) {
+const EVENT_TYPES = {
+  views: 1,
+  events: 2,
+};
+
+export function Journey({ websiteId, steps, startStep, endStep, view }: JourneyProps) {
   const [selectedNode, setSelectedNode] = useState(null);
   const [activeNode, setActiveNode] = useState(null);
   const { formatMessage, labels } = useMessages();
@@ -32,6 +38,8 @@ export function Journey({ websiteId, steps, startStep, endStep }: JourneyProps)
     steps,
     startStep,
     endStep,
+    view,
+    eventType: EVENT_TYPES[view],
   });
 
   useEscapeKey(() => setSelectedNode(null));
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage.tsx b/src/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage.tsx
index 14b8341d..c2dd8349 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage.tsx
@@ -1,5 +1,6 @@
 'use client';
-import { Column, Grid, ListItem, SearchField, Select } from '@umami/react-zen';
+import { Column, Grid, ListItem, Row, SearchField, Select } from '@umami/react-zen';
+import { FilterButtons } from 'dist';
 import { useState } from 'react';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { Panel } from '@/components/common/Panel';
@@ -14,10 +15,26 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
   const {
     dateRange: { startDate, endDate },
   } = useDateRange();
+  const [view, setView] = useState('all');
   const [steps, setSteps] = useState(DEFAULT_STEP);
   const [startStep, setStartStep] = useState('');
   const [endStep, setEndStep] = useState('');
 
+  const buttons = [
+    {
+      id: 'all',
+      label: formatMessage(labels.all),
+    },
+    {
+      id: 'views',
+      label: formatMessage(labels.views),
+    },
+    {
+      id: 'events',
+      label: formatMessage(labels.events),
+    },
+  ];
+
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
@@ -52,6 +69,9 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
           />
         </Column>
       </Grid>
+      <Row justifyContent="flex-end">
+        <FilterButtons items={buttons} value={view} onChange={setView} />
+      </Row>
       <Panel height="900px" allowFullscreen>
         <Journey
           websiteId={websiteId}
@@ -60,6 +80,7 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
           steps={steps}
           startStep={startStep}
           endStep={endStep}
+          view={view}
         />
       </Panel>
     </Column>
diff --git a/src/app/api/reports/journey/route.ts b/src/app/api/reports/journey/route.ts
index 29e85319..b53d225d 100644
--- a/src/app/api/reports/journey/route.ts
+++ b/src/app/api/reports/journey/route.ts
@@ -12,11 +12,16 @@ export async function POST(request: Request) {
   }
 
   const { websiteId, parameters, filters } = body;
+  const { eventType } = parameters;
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
+  if (eventType) {
+    filters.eventType = eventType;
+  }
+
   const queryFilters = await getQueryFilters(filters, websiteId);
 
   const data = await getJourney(websiteId, parameters, queryFilters);
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index ac360a8e..247a89ae 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -166,6 +166,7 @@ export const journeyReportSchema = z.object({
     steps: z.coerce.number().min(2).max(7),
     startStep: z.string().optional(),
     endStep: z.string().optional(),
+    eventType: z.coerce.number().int().positive().optional(),
   }),
 });
 
diff --git a/src/queries/sql/reports/getJourney.ts b/src/queries/sql/reports/getJourney.ts
index 21a7f22d..d12d371b 100644
--- a/src/queries/sql/reports/getJourney.ts
+++ b/src/queries/sql/reports/getJourney.ts
@@ -60,7 +60,7 @@ async function relationalQuery(
     endStepQuery: string;
     params: Record<string, string>;
   } {
-    const params = {};
+    const params: { startStep?: string; endStep?: string } = {};
     let sequenceQuery = '';
     let startStepQuery = '';
     let endStepQuery = '';
@@ -172,7 +172,7 @@ async function clickhouseQuery(
     endStepQuery: string;
     params: Record<string, string>;
   } {
-    const params = {};
+    const params: { startStep?: string; endStep?: string } = {};
     let sequenceQuery = '';
     let startStepQuery = '';
     let endStepQuery = '';