From cb070e2c1a9eaeb9c067703268fe5f56d2d6d542 Mon Sep 17 00:00:00 2001
From: Aditya Sanjeev <adityasanjeev28@gmail.com>
Date: Thu, 1 Oct 2026 14:59:46 -0700
Subject: [PATCH] Stop organ chips resizing on toggle, lock page scroll in
 viewer, hover-identify on by default

Organ chips swapped border-0 <-> border-2 when toggled, so clicking an organ
shrank the chip and shifted everything below it. The 2px border is now always
present and only its color changes (shared .vp-organ-chip class, used by the
single viewer and the compare viewer).

Scrolling over the viewer could scroll the whole window when a wheel tick
wasn't consumed by a pane. The page is locked from scrolling while the viewer
is mounted and panes use overscroll-behavior: contain.

Hover-to-identify now defaults to on; the View menu still toggles it.

Pancreatic lesion color changes from dark maroon to bright red.
---
 PanTS-Demo/src/components/OrganCheckbox.tsx | 22 +++++++----------
 PanTS-Demo/src/helpers/constants.ts         |  2 +-
 PanTS-Demo/src/routes/VisualizationPage.css | 14 +++++++++++
 PanTS-Demo/src/routes/VisualizationPage.tsx | 26 ++++++++++++++++++++-
 4 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/PanTS-Demo/src/components/OrganCheckbox.tsx b/PanTS-Demo/src/components/OrganCheckbox.tsx
index 31338dee..d9d4a235 100644
--- a/PanTS-Demo/src/components/OrganCheckbox.tsx
+++ b/PanTS-Demo/src/components/OrganCheckbox.tsx
@@ -141,12 +141,10 @@ function Checked({
 								}`}
 							/>
 							<div
-								className={`text-white text-md rounded-md p-1 cursor-pointer hover:border-2 ${
-										!partialToggled
-											? "border-0"
-											: "border-2"
+								className={`vp-organ-chip text-white text-md rounded-md p-1 cursor-pointer ${
+										partialToggled ? "is-on" : ""
                 }`}
-                style={{borderColor: color}}
+                style={{ "--chip-color": color } as React.CSSProperties}
                 onClick={(e) => {
                   e.stopPropagation();
                   updateToggle(!partialToggled);
@@ -176,12 +174,10 @@ function Checked({
 							<div className={`flex items-center gap-2 ${level == 0 ? "pl-8" : "pl-5"} `} key={idx}>
 								<span aria-hidden="true" style={{ width: 18, height: 18, flexShrink: 0 }} />
 								<div
-									className={`text-white text-md rounded-md p-1 cursor-pointer hover:border-2 ${
-										!checkState[getOrganIdx(organ) + 1]
-											? "border-0"
-											: "border-2"
+									className={`vp-organ-chip text-white text-md rounded-md p-1 cursor-pointer ${
+										checkState[getOrganIdx(organ) + 1] ? "is-on" : ""
 									}`}
-									style={{ borderColor: rgb }}
+									style={{ "--chip-color": rgb } as React.CSSProperties}
 									onClick={() => {
 										setCheckState((prev) => {
 											const newCheckState = [...prev];
@@ -304,10 +300,10 @@ function OrganCheckbox({
 								<div className="flex items-center gap-2 pl-8" key={organ.id}>
 									<span aria-hidden="true" style={{ width: 18, height: 18, flexShrink: 0 }} />
 									<div
-										className={`text-white text-md rounded-md p-1 cursor-pointer hover:border-2 ${
-											!checkState[organ.id] ? "border-0" : "border-2"
+										className={`vp-organ-chip text-white text-md rounded-md p-1 cursor-pointer ${
+											checkState[organ.id] ? "is-on" : ""
 										}`}
-										style={{ borderColor: rgb }}
+										style={{ "--chip-color": rgb } as React.CSSProperties}
 										onClick={() => {
 											setCheckState((prev) => {
 												const newCheckState = [...prev];
diff --git a/PanTS-Demo/src/helpers/constants.ts b/PanTS-Demo/src/helpers/constants.ts
index 95e23c37..02736c0b 100644
--- a/PanTS-Demo/src/helpers/constants.ts
+++ b/PanTS-Demo/src/helpers/constants.ts
@@ -68,7 +68,7 @@ export const segmentation_category_colors: { [key: number]: Color } = {
 	19: [219, 112, 147, 254], // Pancreas (pale violet red)
 	20: [255, 160, 122, 254], // Pancreas general (salmon)
 	21: [255, 228, 181, 254], // Light tan (duct)
-	22: [80, 0, 0, 254], // Dark red (lesion)
+	22: [240, 10, 10, 254], // Pancreatic lesion (bright red)
 	23: [72, 61, 139, 254], // Vein (dark slate blue)
 	24: [255, 105, 180, 254], // Magenta/pink
 	25: [138, 43, 226, 254], // Purple
diff --git a/PanTS-Demo/src/routes/VisualizationPage.css b/PanTS-Demo/src/routes/VisualizationPage.css
index 9e45e0a2..c0705aad 100644
--- a/PanTS-Demo/src/routes/VisualizationPage.css
+++ b/PanTS-Demo/src/routes/VisualizationPage.css
@@ -986,6 +986,8 @@
 
 /* ---- Viewports: subtle accent ring + corner orientation label ---- */
 .vp-pane {
+  /* Wheel inside a pane scrolls slices; never chain on to the page. */
+  overscroll-behavior: contain;
   position: relative;
   isolation: isolate;
   z-index: 0;
@@ -1327,6 +1329,18 @@
 }
 
 /* refined disclosure chevron */
+/* Organ chip: the 2px border is always present so toggling an organ only
+   changes its color, never its size (a border-0 <-> border-2 swap shifted the
+   chip and everything below it). */
+.vp-organ-chip {
+  border: 2px solid transparent;
+}
+
+.vp-organ-chip:hover,
+.vp-organ-chip.is-on {
+  border-color: var(--chip-color, gray);
+}
+
 .vp-organs__chevron {
   width: 18px;
   height: 18px;
diff --git a/PanTS-Demo/src/routes/VisualizationPage.tsx b/PanTS-Demo/src/routes/VisualizationPage.tsx
index f9f35fc7..ce0fe381 100644
--- a/PanTS-Demo/src/routes/VisualizationPage.tsx
+++ b/PanTS-Demo/src/routes/VisualizationPage.tsx
@@ -1591,7 +1591,31 @@ function VisualizationPage({ liveRoom, soloChallenge, quizPractice }: Visualizat
 		text: "",
 	});
 
-	const [hoverIdentifyEnabled, setHoverIdentifyEnabled] = useState(false);
+	// On by default: hovering an organ names it without having to find and
+	// enable the tool first. The View menu item still toggles it off.
+	const [hoverIdentifyEnabled, setHoverIdentifyEnabled] = useState(true);
+
+	// The viewer fills the window itself and every pane handles its own wheel
+	// (slice scroll), so the page must never scroll underneath it. Without this,
+	// a wheel tick the pane doesn't consume (end of the stack, over the 3D pane,
+	// a toolbar) scrolls the whole window and the layout visibly jumps.
+	useEffect(() => {
+		const html = document.documentElement;
+		const body = document.body;
+		const prev = {
+			htmlOverflow: html.style.overflow,
+			bodyOverflow: body.style.overflow,
+			htmlOverscroll: html.style.overscrollBehavior,
+		};
+		html.style.overflow = "hidden";
+		body.style.overflow = "hidden";
+		html.style.overscrollBehavior = "none";
+		return () => {
+			html.style.overflow = prev.htmlOverflow;
+			body.style.overflow = prev.bodyOverflow;
+			html.style.overscrollBehavior = prev.htmlOverscroll;
+		};
+	}, []);
 	const [hoverOrganTip, setHoverOrganTip] = useState({
 		visible: false,
 		x: 0,