From 011200445762822fb395c110fe994c9da3025030 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 12 Mar 2026 23:58:56 +0100
Subject: [PATCH] fix: depth default 3 max 5, min_sessions 2, 5 nodes per
 column, stricter labels

---
 app/sites/[id]/journeys/page.tsx      | 12 ++++++------
 components/journeys/SankeyDiagram.tsx |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/sites/[id]/journeys/page.tsx b/app/sites/[id]/journeys/page.tsx
index 0202c91..388369b 100644
--- a/app/sites/[id]/journeys/page.tsx
+++ b/app/sites/[id]/journeys/page.tsx
@@ -35,14 +35,14 @@ export default function JourneysPage() {
   const [period, setPeriod] = useState('30')
   const [dateRange, setDateRange] = useState(() => getDateRange(30))
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
-  const [depth, setDepth] = useState(5)
+  const [depth, setDepth] = useState(3)
   const [entryPath, setEntryPath] = useState('')
 
   const { data: transitionsData, isLoading: transitionsLoading } = useJourneyTransitions(
-    siteId, dateRange.start, dateRange.end, depth, 1, entryPath || undefined
+    siteId, dateRange.start, dateRange.end, depth, 2, entryPath || undefined
   )
   const { data: topPaths, isLoading: topPathsLoading } = useJourneyTopPaths(
-    siteId, dateRange.start, dateRange.end, 20, 1, entryPath || undefined
+    siteId, dateRange.start, dateRange.end, 20, 2, entryPath || undefined
   )
   const { data: entryPoints } = useJourneyEntryPoints(siteId, dateRange.start, dateRange.end)
   const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end)
@@ -117,7 +117,7 @@ export default function JourneysPage() {
           <input
             type="range"
             min={2}
-            max={10}
+            max={5}
             step={1}
             value={depth}
             onChange={(e) => setDepth(Number(e.target.value))}
@@ -134,9 +134,9 @@ export default function JourneysPage() {
           options={entryPointOptions}
         />
 
-        {(depth !== 5 || entryPath) && (
+        {(depth !== 3 || entryPath) && (
           <button
-            onClick={() => { setDepth(5); setEntryPath('') }}
+            onClick={() => { setDepth(3); setEntryPath('') }}
             className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors"
           >
             Reset
diff --git a/components/journeys/SankeyDiagram.tsx b/components/journeys/SankeyDiagram.tsx
index f588745..771b4b6 100644
--- a/components/journeys/SankeyDiagram.tsx
+++ b/components/journeys/SankeyDiagram.tsx
@@ -51,7 +51,7 @@ const COLUMN_COLORS = [
 const EXIT_GREY = '#52525b'
 const SVG_W = 1100
 const MARGIN = { top: 24, right: 140, bottom: 24, left: 10 }
-const MAX_NODES_PER_COLUMN = 8
+const MAX_NODES_PER_COLUMN = 5
 
 function colorForColumn(col: number): string {
   return COLUMN_COLORS[col % COLUMN_COLORS.length]
@@ -402,7 +402,7 @@ export default function SankeyDiagram({
           const y0 = node.y0 ?? 0
           const y1 = node.y1 ?? 0
           const nodeH = y1 - y0
-          if (nodeH < 22) return null // hide labels for tiny nodes
+          if (nodeH < 36) return null // hide labels for small nodes — hover for details
 
           const rawLabel = smartLabel(node.label)
           const label = truncateLabel(rawLabel, 24)