From ccef3666259e7911c9d4e59443dd5e32339ed18b Mon Sep 17 00:00:00 2001
From: Vidya Rupak <vrupak@asu.edu>
Date: Mon, 22 Dec 2025 15:26:36 -0700
Subject: [PATCH] slideshow now stops when user clicks outside the popover

---
 apps/memory-graph-playground/src/app/page.tsx       | 13 +++++++++----
 .../memory-graph/src/components/memory-graph.tsx    |  2 ++
 .../memory-graph/src/components/node-popover.tsx    |  9 ++++++++-
 packages/memory-graph/src/types.ts                  |  2 ++
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/memory-graph-playground/src/app/page.tsx b/apps/memory-graph-playground/src/app/page.tsx
index eefd7217..39354cbf 100644
--- a/apps/memory-graph-playground/src/app/page.tsx
+++ b/apps/memory-graph-playground/src/app/page.tsx
@@ -125,6 +125,11 @@ export default function Home() {
 		console.log("Slideshow showing node:", nodeId)
 	}, [])
 
+	// Handle slideshow stop (when user clicks outside)
+	const handleSlideshowStop = useCallback(() => {
+		setIsSlideshowActive(false)
+	}, [])
+
 	return (
 		<div className="flex flex-col h-screen bg-zinc-950">
 			{/* Header */}
@@ -191,10 +196,9 @@ export default function Home() {
 											viewBox="0 0 24 24"
 											fill="currentColor"
 										>
-											<rect x="6" y="4" width="4" height="16" />
-											<rect x="14" y="4" width="4" height="16" />
+											<rect x="6" y="6" width="12" height="12" />
 										</svg>
-										Stop Slideshow
+										Slideshow
 									</>
 								) : (
 									<>
@@ -206,7 +210,7 @@ export default function Home() {
 										>
 											<path d="M8 5v14l11-7z" />
 										</svg>
-										Start Slideshow
+										Slideshow
 									</>
 								)}
 							</button>
@@ -282,6 +286,7 @@ export default function Home() {
 							// Slideshow control
 							isSlideshowActive={isSlideshowActive}
 							onSlideshowNodeChange={handleSlideshowNodeChange}
+							onSlideshowStop={handleSlideshowStop}
 						>
 							<div className="flex h-full items-center justify-center">
 								<p className="text-zinc-400">
diff --git a/packages/memory-graph/src/components/memory-graph.tsx b/packages/memory-graph/src/components/memory-graph.tsx
index 96cadb47..e16d5882 100644
--- a/packages/memory-graph/src/components/memory-graph.tsx
+++ b/packages/memory-graph/src/components/memory-graph.tsx
@@ -43,6 +43,7 @@ export const MemoryGraph = ({
 	// Slideshow control
 	isSlideshowActive = false,
 	onSlideshowNodeChange,
+	onSlideshowStop,
 }: MemoryGraphProps) => {
 	// Inject styles on first render (client-side only)
 	useEffect(() => {
@@ -706,6 +707,7 @@ export const MemoryGraph = ({
 					y={popoverPosition.y}
 					onClose={() => setSelectedNode(null)}
 					containerBounds={containerRef.current?.getBoundingClientRect()}
+					onBackdropClick={isSlideshowActive ? onSlideshowStop : undefined}
 				/>
 			)}
 
diff --git a/packages/memory-graph/src/components/node-popover.tsx b/packages/memory-graph/src/components/node-popover.tsx
index 7ae758de..5f8a06cf 100644
--- a/packages/memory-graph/src/components/node-popover.tsx
+++ b/packages/memory-graph/src/components/node-popover.tsx
@@ -9,6 +9,7 @@ export interface NodePopoverProps {
 	y: number // Screen Y position
 	onClose: () => void
 	containerBounds?: DOMRect // Optional container bounds to limit backdrop
+	onBackdropClick?: () => void // Optional callback when backdrop is clicked
 }
 
 export const NodePopover = memo<NodePopoverProps>(function NodePopover({
@@ -17,6 +18,7 @@ export const NodePopover = memo<NodePopoverProps>(function NodePopover({
 	y,
 	onClose,
 	containerBounds,
+	onBackdropClick,
 }) {
 	// Handle Escape key to close popover
 	useEffect(() => {
@@ -50,10 +52,15 @@ export const NodePopover = memo<NodePopoverProps>(function NodePopover({
 				backgroundColor: "transparent",
 			}
 
+	const handleBackdropClick = () => {
+		onBackdropClick?.()
+		onClose()
+	}
+
 	return (
 		<>
 			{/* Invisible backdrop to catch clicks outside */}
-			<div onClick={onClose} style={backdropStyle} />
+			<div onClick={handleBackdropClick} style={backdropStyle} />
 
 			{/* Popover content */}
 			<div
diff --git a/packages/memory-graph/src/types.ts b/packages/memory-graph/src/types.ts
index bc43d8a4..d90d7f67 100644
--- a/packages/memory-graph/src/types.ts
+++ b/packages/memory-graph/src/types.ts
@@ -139,6 +139,8 @@ export interface MemoryGraphProps {
 	isSlideshowActive?: boolean
 	/** Callback when slideshow selects a new node (provides node ID) */
 	onSlideshowNodeChange?: (nodeId: string | null) => void
+	/** Callback when user clicks outside during slideshow (to stop it) */
+	onSlideshowStop?: () => void
 }
 
 export interface LegendProps {