Settings panel: gray out dependent controls when their parent is off
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.
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user