From 425788c0d55cc92aa415976777aaa1327cf75136 Mon Sep 17 00:00:00 2001
From: Aditya Sanjeev <adityasanjeev28@gmail.com>
Date: Thu, 24 Sep 2026 19:27:39 -0700
Subject: [PATCH] Fix organs panel indentation, dead hover box, and group colon
 lesion under colon

Rows after the Pancreas subgroup were indented deeper than the Pancreas
header itself, so they read as children of Pancreas. Sibling rows and
subgroup headers now share the same indent, and a subgroup's own children
sit one level deeper.

The blank spacer beside each organ row reused the chevron class, so it
picked up the chevron's hover background and showed an empty box that did
nothing. It is now a plain non-interactive spacer.

colon_lesion is now nested under a Colon subgroup (same pattern as
Pancreas and Kidneys) instead of sitting flat beside colon.
---
 PanTS-Demo/src/components/OrganCheckbox.tsx | 16 +++++++++-------
 PanTS-Demo/src/helpers/constants.ts         |  9 +++++----
 PanTS-Demo/src/types.tsx                    |  2 +-
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/PanTS-Demo/src/components/OrganCheckbox.tsx b/PanTS-Demo/src/components/OrganCheckbox.tsx
index f9e21fa5..31338dee 100644
--- a/PanTS-Demo/src/components/OrganCheckbox.tsx
+++ b/PanTS-Demo/src/components/OrganCheckbox.tsx
@@ -92,14 +92,14 @@ function Checked({
 		if (flag === false) setPartialToggled(false);
 	}, [checkState, OrganSystem, system, partialToggled, setPartialToggled]);
   let color = null;
-  if (system === "Pancreas" || system === "Kidneys") {
-    color = MiscColorMap[system];
+  if (system in MiscColorMap) {
+    color = MiscColorMap[system as SubSystems];
     color = `rgb(${color[0]}, ${color[1]}, ${color[2]})`
   }
 
 	if (!OrganSystem[system] || level > 1) return null;
 	return (
-		<div className={`flex gap-2 flex-col ${level === 0 ? "" : "pl-3"}`}>
+		<div className={`flex gap-2 flex-col ${level === 0 ? "" : "pl-8"}`}>
 			<div className="flex justify-between items-center">
 				{!color ? (
 					<>
@@ -169,10 +169,12 @@ function Checked({
 						const rgb = color
 							? `rgb(${color[0]}, ${color[1]}, ${color[2]})`
 							: "gray";
-						if (organ == "pancreas") return null;
+						// A subgroup's header (Pancreas, Colon) already toggles the organ
+						// of the same name, so it isn't repeated as a child row.
+						if (level === 1 && organ === system.toLowerCase()) return null;
 						return (
-							<div className={`flex items-center gap-2 ${level == 0 ? "pl-8" : "pl-9"} `} key={idx}>
-								<div className="vp-organs__chevron" />
+							<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]
@@ -300,7 +302,7 @@ function OrganCheckbox({
 								: "gray";
 							return (
 								<div className="flex items-center gap-2 pl-8" key={organ.id}>
-									<div className="vp-organs__chevron" />
+									<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"
diff --git a/PanTS-Demo/src/helpers/constants.ts b/PanTS-Demo/src/helpers/constants.ts
index 86c43bf0..95e23c37 100644
--- a/PanTS-Demo/src/helpers/constants.ts
+++ b/PanTS-Demo/src/helpers/constants.ts
@@ -155,12 +155,14 @@ export const OrganSystemsArray: Systems[] = [
 
 export const OrgansSubsystemsArray: SubSystems[] = [
 	"Kidneys",
-	"Pancreas"
+	"Pancreas",
+	"Colon"
 ]
 
 export const MiscColorMap: MiscColorMapType = {
 	"Kidneys": [144, 238, 200],
-	"Pancreas": [244, 160, 160]
+	"Pancreas": [244, 160, 160],
+	"Colon": [238, 130, 238]
 }
 
 export const OrganSystems: OrganSystemsType = {
@@ -189,8 +191,7 @@ export const OrganSystems: OrganSystemsType = {
 				"pancreatic_lesion",
 			],
 		},
-		"colon",
-		"colon_lesion",
+		{ Colon: ["colon", "colon_lesion"] },
 		"duodenum",
 		"intestine",
 		"stomach",
diff --git a/PanTS-Demo/src/types.tsx b/PanTS-Demo/src/types.tsx
index 9e3f3eae..0392bae2 100644
--- a/PanTS-Demo/src/types.tsx
+++ b/PanTS-Demo/src/types.tsx
@@ -81,7 +81,7 @@ export type SegmentationAnnotations = {
 };
 
 export type Systems = "Vascular System" | "Lymphatic System" | "Reproductive System" | "Urinary System" | "Digestive System" | "Skeletal System" | "Respiratory System" | "Endocrine System";
-export type SubSystems = "Pancreas" | "Kidneys"
+export type SubSystems = "Pancreas" | "Kidneys" | "Colon"
 
 export type AllSystems = Systems | SubSystems;