feat(paths): hover interaction logic, overlap stacking, and visual active state

Move all hover state management into pathsInteractionLogic (kea):
- hoverNode/hoverLink/clearHover actions with debounced clear
- Forward-only chain traversal with one-step-back incoming links
- activeIndices and resolvedNodeCards selectors
- cardHovered flag to suppress SVG events during card interaction

Add overlap detection for stacked cards in the same layer,
visual active state (glow, border, dimming of inactive cards),
and useLayoutEffect for synchronous SVG stroke updates.

Clean up renderPaths to use a PathsHoverHandlers interface
instead of raw setState/refs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: pauldambra

frontend/src/scenes/paths/PathNodeCard.tsx

@@ -1,4 +1,5 @@
 import { useActions, useValues } from 'kea'
+import { useRef } from 'react'
 
 import { LemonDropdown } from '@posthog/lemon-ui'
 
@@ -15,9 +16,18 @@ export type PathNodeCardProps = {
     insightProps: InsightLogicProps
     node: PathNodeData
     canvasHeight: number
+    onMouseEnter?: () => void
+    onMouseLeave?: () => void
 }
 
-export function PathNodeCard({ insightProps, node, canvasHeight }: PathNodeCardProps): JSX.Element | null {
+export function PathNodeCard({
+    insightProps,
+    node,
+    canvasHeight,
+    onMouseEnter,
+    onMouseLeave,
+}: PathNodeCardProps): JSX.Element | null {
+    const cardRef = useRef<HTMLDivElement>(null)
     const { pathsFilter: _pathsFilter, funnelPathsFilter: _funnelPathsFilter } = useValues(pathsDataLogic(insightProps))
     const { updateInsightFilter, openPersonsModal, viewPathToFunnel } = useActions(pathsDataLogic(insightProps))
 
@@ -56,23 +66,37 @@ export function PathNodeCard({ insightProps, node, canvasHeight }: PathNodeCardP
             placement="bottom"
             padded={false}
             matchWidth
+            onVisibilityChange={(visible) => {
+                if (!visible && !cardRef.current?.matches(':hover')) {
+                    onMouseLeave?.()
+                }
+            }}
         >
             <div
-                className="absolute rounded bg-surface-primary p-1"
+                ref={cardRef}
+                className={`PathNodeCard absolute rounded bg-surface-primary p-1${node.active ? ' PathNodeCard--active' : ''}`}
                 // eslint-disable-next-line react/forbid-dom-props
                 style={{
                     width: PATH_NODE_CARD_WIDTH,
                     left: !isPathEnd
                         ? node.x0 + PATH_NODE_CARD_LEFT_OFFSET
                         : node.x0 + PATH_NODE_CARD_LEFT_OFFSET - PATH_NODE_CARD_WIDTH,
-                    top: calculatePathNodeCardTop(node, canvasHeight),
+                    top: node.resolvedTop ?? calculatePathNodeCardTop(node, canvasHeight),
                     border: `1px solid ${
                         isSelectedPathStartOrEnd(pathsFilter, funnelPathsFilter, node)
                             ? 'purple'
-                            : 'var(--color-border-primary)'
+                            : node.active
+                              ? 'var(--paths-link-hover)'
+                              : 'var(--color-border-primary)'
                     }`,
+                    zIndex: node.active ? 10 : 'auto',
+                    boxShadow: node.active
+                        ? '0 2px 10px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--paths-link-hover)'
+                        : 'none',
+                    opacity: node.active ? 1 : undefined,
                 }}
                 data-attr="path-node-card-button"
+                onMouseEnter={onMouseEnter}
             >
                 <PathNodeCardButton
                     name={node.name}

frontend/src/scenes/paths/Paths.scss

@@ -9,4 +9,14 @@
         width: 100%;
         height: 100% !important;
     }
+
+    .PathNodeCard:hover {
+        z-index: 20 !important;
+        box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+    }
+
+    // When any card is active, dim the non-active cards
+    &:has(.PathNodeCard--active) .PathNodeCard:not(.PathNodeCard--active) {
+        opacity: 0.4;
+    }
 }

frontend/src/scenes/paths/Paths.tsx

@@ -1,7 +1,7 @@
 import './Paths.scss'
 
 import { useActions, useValues } from 'kea'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
 import { useResizeObserver } from 'lib/hooks/useResizeObserver'
 import { InsightEmptyState, InsightErrorState } from 'scenes/insights/EmptyStates'
@@ -13,15 +13,16 @@ import { shouldQueryBeAsync } from '~/queries/utils'
 
 import { PathNodeCard } from './PathNodeCard'
 import { pathsDataLogic } from './pathsDataLogic'
+import { pathsInteractionLogic } from './pathsInteractionLogic'
 import type { PathNodeData } from './pathUtils'
+import type { PathsHoverHandlers } from './renderPaths'
 // eslint-disable-next-line import/no-cycle
 import { renderPaths } from './renderPaths'
 
 const DEFAULT_PATHS_ID = 'default_paths'
 export const HIDE_PATH_CARD_HEIGHT = 30
 export const FALLBACK_CANVAS_WIDTH = 1000
 const FALLBACK_CANVAS_HEIGHT = 0
-// Debounce delay for canvas resize to prevent rapid SVG recreation from ResizeObserver callbacks
 const CANVAS_RESIZE_DEBOUNCE_MS = 50
 
 export function Paths(): JSX.Element {
@@ -30,7 +31,6 @@ export function Paths(): JSX.Element {
     const { width: rawCanvasWidth, height: rawCanvasHeight } = useResizeObserver({ ref: canvasRef })
     const [canvasWidth, setCanvasWidth] = useState(FALLBACK_CANVAS_WIDTH)
     const [canvasHeight, setCanvasHeight] = useState(FALLBACK_CANVAS_HEIGHT)
-    const [nodeCards, setNodeCards] = useState<PathNodeData[]>([])
 
     // Debounce canvas dimension updates to prevent rapid SVG recreation from ResizeObserver.
     // We do NOT remove data-stable here — the render effect below removes it only when the SVG
@@ -49,18 +49,40 @@ export function Paths(): JSX.Element {
         useValues(pathsDataLogic(insightProps))
     const { loadData } = useActions(insightDataLogic(insightProps))
 
+    const interactionLogic = pathsInteractionLogic(insightProps)
+    const { resolvedNodeCards, activeIndices } = useValues(interactionLogic)
+    const { setNodes, hoverNode, hoverLink, clearHover, requestClearHover, setCardHovered } =
+        useActions(interactionLogic)
+
+    const hoverHandlers = useMemo<PathsHoverHandlers>(
+        () => ({
+            onNodesReady: (nodes: PathNodeData[]) => setNodes(nodes, canvasHeight),
+            onNodeHover: hoverNode,
+            onLinkHover: hoverLink,
+            onHoverClear: requestClearHover,
+            isCardHovered: () => interactionLogic.values.cardHovered,
+        }),
+        [canvasHeight]
+    )
+
+    useLayoutEffect(() => {
+        canvasRef.current?.querySelectorAll<SVGPathElement>('path[id^="path-"]').forEach((el) => {
+            const pathIndex = Number(el.id.replace('path-', ''))
+            el.setAttribute(
+                'stroke',
+                activeIndices.linkIndices.has(pathIndex) ? 'var(--paths-link-hover)' : 'var(--paths-link)'
+            )
+        })
+    }, [activeIndices])
+
     const id = `'${insight?.short_id || DEFAULT_PATHS_ID}'`
 
     useEffect(() => {
-        setNodeCards([])
+        clearHover()
 
-        // Remove the existing SVG canvas(es). The .Paths__canvas selector is crucial, as we have to be sure
-        // we're only removing the Paths viz and not, for example, button icons.
-        // Only remove canvases within this component's container
         const elements = canvasContainerRef.current?.querySelectorAll(`.Paths__canvas`)
         elements?.forEach((node) => node?.parentNode?.removeChild(node))
 
-        // Mark the canvas as not yet stable while we recreate the SVG
         if (canvasRef.current) {
             canvasRef.current.removeAttribute('data-stable')
         }
@@ -72,21 +94,29 @@ export function Paths(): JSX.Element {
             paths,
             pathsFilter || {},
             funnelPathsFilter || ({} as FunnelPathsFilter),
-            setNodeCards
+            hoverHandlers
         )
 
-        // Mark the canvas as stable after SVG creation
         if (canvasRef.current) {
             canvasRef.current.setAttribute('data-stable', 'true')
         }
 
-        // Proper cleanup
         return () => {
             const elements = canvasContainerRef.current?.querySelectorAll(`.Paths__canvas`)
             elements?.forEach((node) => node?.parentNode?.removeChild(node))
         }
     }, [paths, insightDataLoading, canvasWidth, canvasHeight, theme, pathsFilter, funnelPathsFilter])
 
+    const handleCardMouseEnter = (node: PathNodeData): void => {
+        setCardHovered(true)
+        hoverNode(node.index)
+    }
+
+    const handleCardMouseLeave = (): void => {
+        setCardHovered(false)
+        requestClearHover()
+    }
+
     if (insightDataError) {
         return (
             <InsightErrorState
@@ -118,9 +148,15 @@ export function Paths(): JSX.Element {
             >
                 {!insightDataLoading && paths && paths.nodes.length === 0 && !insightDataError && <InsightEmptyState />}
                 {!insightDataError &&
-                    nodeCards &&
-                    nodeCards.map((node, idx) => (
-                        <PathNodeCard key={idx} node={node} insightProps={insightProps} canvasHeight={canvasHeight} />
+                    resolvedNodeCards.map((node, idx) => (
+                        <PathNodeCard
+                            key={idx}
+                            node={node}
+                            insightProps={insightProps}
+                            canvasHeight={canvasHeight}
+                            onMouseEnter={() => handleCardMouseEnter(node)}
+                            onMouseLeave={handleCardMouseLeave}
+                        />
                     ))}
             </div>
         </div>

frontend/src/scenes/paths/constants.ts

@@ -1,3 +1,5 @@
 export const PATH_NODE_CARD_WIDTH = 240
+export const PATH_NODE_CARD_HEIGHT = 38
+export const PATH_NODE_CARD_OVERLAP_GAP = 4
 export const PATH_NODE_CARD_TOP_OFFSET = 5
 export const PATH_NODE_CARD_LEFT_OFFSET = 7