From 3c5c48f502cc284617f811c7f2989ab30c44ffc8 Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Thu, 17 Sep 2026 09:41:43 +0300
Subject: [PATCH] Settings panel: gray out dependent controls when their parent
 is off
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dependency graying everywhere, consistent across sections (user
2026-09-17 — chose "gray out children" over hiding rows, so the layout
stays stable and the required-by relationship stays visible):

- Background colors off → Dilation, Blur, Edge alpha, Bitmap
  resolution dim (opacity-40) + lock (native disabled). It's a COMPUTE
  switch, so the whole region tune section follows it.
- Cluster labels off → Cluster label size dims + locks. Decoupled from
  Background colors (labels follow their own toggle, by design
  2026-09-16): label controls stay live while regions are off.
- Depth anchor off → Depth strength + Depth spacing dim + lock.
- Base ring radius is radial-only: dims + locks unless Depth anchor is
  Radial (vertical doesn't use a ring).

SettingSlider gains an optional `disabled` prop (row opacity-40 +
range input disabled); the two select rows dim + disable inline. Pure
UI — no schema or renderer changes.
---
 components/graph-view.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/components/graph-view.tsx b/components/graph-view.tsx
index 3c65f17..5112f98 100644
--- a/components/graph-view.tsx
+++ b/components/graph-view.tsx
@@ -166,6 +166,7 @@ function SettingSlider({
 	value,
 	display,
 	onChange,
+	disabled,
 }: {
 	label: string;
 	min: number;
@@ -175,9 +176,12 @@ function SettingSlider({
 	/** Value display override (e.g. "1.5×" for zoom) — defaults to the raw number. */
 	display?: string;
 	onChange: (v: number) => void;
+	/** Dependency graying (user 2026-09-17): children dim + lock when
+	 *  their parent toggle/mode is off — consistently across sections. */
+	disabled?: boolean;
 }) {
 	return (
-		<label className="flex flex-col gap-1">
+		<label className={`flex flex-col gap-1${disabled ? " opacity-40" : ""}`}>
 			<span className="flex items-center justify-between text-[11px] text-muted-foreground">
 				{label}
 				<span className="tabular-nums">{display ?? value}</span>
@@ -188,6 +192,7 @@ function SettingSlider({
 				max={max}
 				step={step}
 				value={value}
+				disabled={disabled}
 				onChange={(e) => onChange(Number(e.target.value))}
 				className="h-1.5 w-full accent-primary"
 			/>
@@ -306,6 +311,7 @@ function GraphSettingsControl({
 							</label>
 							<SettingSlider
 								label="Dilation"
+								disabled={!regionTuning.enabled}
 								min={0}
 								max={100}
 								step={5}
@@ -317,9 +323,12 @@ function GraphSettingsControl({
 										regions: { ...cur.regions, dilation: fromSliderPosition(p, REGION_DILATION_RANGE.min, REGION_DILATION_RANGE.max) },
 									}))}
 							/>
-							<label className="flex items-center justify-between gap-2 text-[11px] text-muted-foreground">
+							<label
+								className={`flex items-center justify-between gap-2 text-[11px] text-muted-foreground${!regionTuning.enabled ? " opacity-40" : ""}`}
+							>
 								<span>Blur</span>
 								<select
+									disabled={!regionTuning.enabled}
 									className="rounded-md border bg-background px-1.5 py-0.5 text-xs tabular-nums text-foreground"
 									value={regionTuning.blur}
 									onChange={(e) =>
@@ -338,6 +347,7 @@ function GraphSettingsControl({
 							</label>
 							<SettingSlider
 								label="Edge alpha"
+								disabled={!regionTuning.enabled}
 								min={0}
 								max={100}
 								step={5}
@@ -349,9 +359,12 @@ function GraphSettingsControl({
 										regions: { ...cur.regions, edgeAlpha: fromSliderPosition(p, REGION_EDGE_ALPHA_RANGE.min, REGION_EDGE_ALPHA_RANGE.max) },
 									}))}
 							/>
-							<label className="flex items-center justify-between gap-2 text-[11px] text-muted-foreground">
+							<label
+								className={`flex items-center justify-between gap-2 text-[11px] text-muted-foreground${!regionTuning.enabled ? " opacity-40" : ""}`}
+							>
 								<span>Bitmap resolution</span>
 								<select
+									disabled={!regionTuning.enabled}
 									className="rounded-md border bg-background px-1.5 py-0.5 text-xs tabular-nums text-foreground"
 									value={regionTuning.bitmap}
 									onChange={(e) =>
@@ -384,6 +397,7 @@ function GraphSettingsControl({
 							</label>
 							<SettingSlider
 								label="Cluster label size"
+								disabled={!settings.clusterLabels}
 								min={0}
 								max={100}
 								step={5}
@@ -427,6 +441,7 @@ function GraphSettingsControl({
 							</label>
 							<SettingSlider
 								label="Depth strength"
+								disabled={physicsTuning.depthMode === "off"}
 								min={0}
 								max={100}
 								step={5}
@@ -440,6 +455,7 @@ function GraphSettingsControl({
 							/>
 							<SettingSlider
 								label="Depth spacing"
+								disabled={physicsTuning.depthMode === "off"}
 								min={0}
 								max={100}
 								step={5}
@@ -453,6 +469,7 @@ function GraphSettingsControl({
 							/>
 							<SettingSlider
 								label="Base ring radius"
+								disabled={physicsTuning.depthMode !== "radial"}
 								min={0}
 								max={100}
 								step={5}