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,
|
value,
|
||||||
display,
|
display,
|
||||||
onChange,
|
onChange,
|
||||||
|
disabled,
|
||||||
}: {
|
}: {
|
||||||
label: string;
|
label: string;
|
||||||
min: number;
|
min: number;
|
||||||
@@ -175,9 +176,12 @@ function SettingSlider({
|
|||||||
/** Value display override (e.g. "1.5×" for zoom) — defaults to the raw number. */
|
/** Value display override (e.g. "1.5×" for zoom) — defaults to the raw number. */
|
||||||
display?: string;
|
display?: string;
|
||||||
onChange: (v: number) => void;
|
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 (
|
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">
|
<span className="flex items-center justify-between text-[11px] text-muted-foreground">
|
||||||
{label}
|
{label}
|
||||||
<span className="tabular-nums">{display ?? value}</span>
|
<span className="tabular-nums">{display ?? value}</span>
|
||||||
@@ -188,6 +192,7 @@ function SettingSlider({
|
|||||||
max={max}
|
max={max}
|
||||||
step={step}
|
step={step}
|
||||||
value={value}
|
value={value}
|
||||||
|
disabled={disabled}
|
||||||
onChange={(e) => onChange(Number(e.target.value))}
|
onChange={(e) => onChange(Number(e.target.value))}
|
||||||
className="h-1.5 w-full accent-primary"
|
className="h-1.5 w-full accent-primary"
|
||||||
/>
|
/>
|
||||||
@@ -306,6 +311,7 @@ function GraphSettingsControl({
|
|||||||
</label>
|
</label>
|
||||||
<SettingSlider
|
<SettingSlider
|
||||||
label="Dilation"
|
label="Dilation"
|
||||||
|
disabled={!regionTuning.enabled}
|
||||||
min={0}
|
min={0}
|
||||||
max={100}
|
max={100}
|
||||||
step={5}
|
step={5}
|
||||||
@@ -317,9 +323,12 @@ function GraphSettingsControl({
|
|||||||
regions: { ...cur.regions, dilation: fromSliderPosition(p, REGION_DILATION_RANGE.min, REGION_DILATION_RANGE.max) },
|
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>
|
<span>Blur</span>
|
||||||
<select
|
<select
|
||||||
|
disabled={!regionTuning.enabled}
|
||||||
className="rounded-md border bg-background px-1.5 py-0.5 text-xs tabular-nums text-foreground"
|
className="rounded-md border bg-background px-1.5 py-0.5 text-xs tabular-nums text-foreground"
|
||||||
value={regionTuning.blur}
|
value={regionTuning.blur}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
@@ -338,6 +347,7 @@ function GraphSettingsControl({
|
|||||||
</label>
|
</label>
|
||||||
<SettingSlider
|
<SettingSlider
|
||||||
label="Edge alpha"
|
label="Edge alpha"
|
||||||
|
disabled={!regionTuning.enabled}
|
||||||
min={0}
|
min={0}
|
||||||
max={100}
|
max={100}
|
||||||
step={5}
|
step={5}
|
||||||
@@ -349,9 +359,12 @@ function GraphSettingsControl({
|
|||||||
regions: { ...cur.regions, edgeAlpha: fromSliderPosition(p, REGION_EDGE_ALPHA_RANGE.min, REGION_EDGE_ALPHA_RANGE.max) },
|
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>
|
<span>Bitmap resolution</span>
|
||||||
<select
|
<select
|
||||||
|
disabled={!regionTuning.enabled}
|
||||||
className="rounded-md border bg-background px-1.5 py-0.5 text-xs tabular-nums text-foreground"
|
className="rounded-md border bg-background px-1.5 py-0.5 text-xs tabular-nums text-foreground"
|
||||||
value={regionTuning.bitmap}
|
value={regionTuning.bitmap}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
@@ -384,6 +397,7 @@ function GraphSettingsControl({
|
|||||||
</label>
|
</label>
|
||||||
<SettingSlider
|
<SettingSlider
|
||||||
label="Cluster label size"
|
label="Cluster label size"
|
||||||
|
disabled={!settings.clusterLabels}
|
||||||
min={0}
|
min={0}
|
||||||
max={100}
|
max={100}
|
||||||
step={5}
|
step={5}
|
||||||
@@ -427,6 +441,7 @@ function GraphSettingsControl({
|
|||||||
</label>
|
</label>
|
||||||
<SettingSlider
|
<SettingSlider
|
||||||
label="Depth strength"
|
label="Depth strength"
|
||||||
|
disabled={physicsTuning.depthMode === "off"}
|
||||||
min={0}
|
min={0}
|
||||||
max={100}
|
max={100}
|
||||||
step={5}
|
step={5}
|
||||||
@@ -440,6 +455,7 @@ function GraphSettingsControl({
|
|||||||
/>
|
/>
|
||||||
<SettingSlider
|
<SettingSlider
|
||||||
label="Depth spacing"
|
label="Depth spacing"
|
||||||
|
disabled={physicsTuning.depthMode === "off"}
|
||||||
min={0}
|
min={0}
|
||||||
max={100}
|
max={100}
|
||||||
step={5}
|
step={5}
|
||||||
@@ -453,6 +469,7 @@ function GraphSettingsControl({
|
|||||||
/>
|
/>
|
||||||
<SettingSlider
|
<SettingSlider
|
||||||
label="Base ring radius"
|
label="Base ring radius"
|
||||||
|
disabled={physicsTuning.depthMode !== "radial"}
|
||||||
min={0}
|
min={0}
|
||||||
max={100}
|
max={100}
|
||||||
step={5}
|
step={5}
|
||||||
|
|||||||
Reference in New Issue
Block a user