fix(forms): support dynamic active-state grayout in all guidata forms

Author: PierreRaybaut

src/App.tsx

@@ -159,6 +159,7 @@ interface PendingAnalysis {
   funcId: string;
   label: string;
   schema: SchemaWithValues;
+  kind: "signal" | "image";
 }
 
 /** Persist a numeric layout dimension to localStorage so it survives a
@@ -1538,6 +1539,7 @@ export default function App() {
         funcId,
         label: entry?.label ?? funcId,
         schema: schema as SchemaWithValues,
+        kind: treeKind === "image" ? "image" : "signal",
       });
     },
     [
@@ -3691,6 +3693,9 @@ export default function App() {
                 currentValues,
               )
             }
+            resolveActive={(currentValues) =>
+              runtime.resolveFeatureActive(pending.feature.id, currentValues)
+            }
             onSubmit={handleSubmitParams}
             onCancel={() => setPending(null)}
           />
@@ -3720,6 +3725,12 @@ export default function App() {
                 currentValues,
               )
             }
+            resolveActive={(currentValues) =>
+              runtime.resolveFeatureActive(
+                pendingProfile.feature.id,
+                currentValues,
+              )
+            }
             onSubmit={handleSubmitProfile}
             onCancel={() => setPendingProfile(null)}
           />
@@ -3730,6 +3741,16 @@ export default function App() {
             payload={pendingAnalysis.schema}
             onSubmit={handleSubmitAnalysisParams}
             onCancel={() => setPendingAnalysis(null)}
+            resolveActive={
+              runtime
+                ? (currentValues) =>
+                    runtime.resolveAnalysisActive(
+                      pendingAnalysis.kind,
+                      pendingAnalysis.funcId,
+                      currentValues,
+                    )
+                : undefined
+            }
           />
         )}
         {pendingImageGrid && (
@@ -3738,6 +3759,12 @@ export default function App() {
             payload={pendingImageGrid.schema}
             onSubmit={handleSubmitImageGrid}
             onCancel={() => setPendingImageGrid(null)}
+            resolveActive={
+              runtime
+                ? (currentValues) =>
+                    runtime.resolveImageGridActive(currentValues)
+                : undefined
+            }
           />
         )}
         {pendingRoiGrid && imageData && (

src/components/DataSetDialog.tsx

@@ -26,6 +26,9 @@ interface Props {
     itemName: string,
     currentValues: Record<string, unknown>,
   ) => Promise<Record<string, unknown>>;
+  resolveActive?: (
+    currentValues: Record<string, unknown>,
+  ) => Promise<Record<string, boolean>>;
   onSubmit: (values: Record<string, unknown>) => void | Promise<void>;
   onCancel: () => void;
 }
@@ -36,6 +39,7 @@ export function DataSetDialog(props: Props) {
     payload,
     resolveChoices,
     resolveCallbacks,
+    resolveActive,
     onSubmit,
     onCancel,
   } = props;
@@ -75,6 +79,7 @@ export function DataSetDialog(props: Props) {
           onChange={setValues}
           resolveChoices={resolveChoices}
           resolveCallbacks={resolveCallbacks}
+          resolveActive={resolveActive}
         />
         {error && <div className="error">{error}</div>}
         <div className="actions">

src/components/DataSetForm/DataSetForm.tsx

@@ -15,7 +15,15 @@
  * Falls back to a flat property order when that key is missing.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import DOMPurify from "dompurify";
 import type { DynamicChoice, JsonSchema } from "../../runtime/runtime";
 import { t } from "../../i18n/translate";
@@ -27,6 +35,13 @@ import { ArrayEditorDialog, normalizeToMatrix } from "../ArrayEditorDialog";
 
 type Values = Record<string, unknown>;
 
+/** Live ``display.active`` overrides keyed by item name. Populated by
+ *  ``resolveActive`` round-trips when the form contains items whose active
+ *  state is dynamic (``x-guidata-active-dynamic``). An entry of ``false``
+ *  greys out the corresponding field; ``true`` re-enables it; a missing
+ *  entry falls back to the static ``x-guidata-active`` baked in the schema. */
+const ActiveOverridesContext = createContext<Record<string, boolean>>({});
+
 /** Sanitise a guidata label before injecting it as HTML. Labels may
  *  legitimately carry simple inline markup (``<b>``, ``<sub>``, units
  *  like ``m<sup>2</sup>``), so we keep an HTML profile but strip any
@@ -53,6 +68,13 @@ export interface DataSetFormProps {
     itemName: string,
     currentValues: Values,
   ) => Promise<Values>;
+  /** Resolver for guidata ``display.active`` props (when the form has at
+   *  least one item carrying ``x-guidata-active-dynamic``).  Runs the
+   *  ``active`` callables Python-side and returns ``{itemName: boolean}``
+   *  for every item, mirroring the Qt ``update_widgets`` enable/disable
+   *  cascade (e.g. ``BlobOpenCVParam.filter_by_circularity`` gating
+   *  ``min_circularity``). */
+  resolveActive?: (currentValues: Values) => Promise<Record<string, boolean>>;
 }
 
 // Layout node as emitted by the Python side. Either a property name
@@ -71,6 +93,7 @@ type LayoutNode = LayoutLeaf | LayoutContainer;
 
 export function DataSetForm(props: DataSetFormProps) {
   const { schema, values, onChange, resolveChoices, resolveCallbacks } = props;
+  const { resolveActive } = props;
   const properties = useMemo(
     () => (schema.properties as Record<string, JsonSchema>) ?? {},
     [schema],
@@ -80,10 +103,43 @@ export function DataSetForm(props: DataSetFormProps) {
     (schema["x-guidata-property-order"] as string[] | undefined) ??
     Object.keys(properties);
 
+  // Whether any item's ``active`` state is dynamic. When true, every edit
+  // may flip a sibling's enabled state (e.g. toggling
+  // ``filter_by_circularity`` enables ``min_circularity``), so we re-run the
+  // ``active`` callables Python-side after each change.
+  const hasDynamicActive = useMemo(
+    () =>
+      Object.values(properties).some(
+        (p) => p["x-guidata-active-dynamic"] === true,
+      ),
+    [properties],
+  );
+
+  // Live ``display.active`` overrides keyed by item name (see context doc).
+  const [activeOverrides, setActiveOverrides] = useState<
+    Record<string, boolean>
+  >({});
+
   // Monotonic counter guarding against out-of-order callback responses:
   // the last edit wins, so a slow Python round-trip can never clobber a
   // newer one (cf. the ``cancelled`` flag in ``useChoices``).
   const callbackSeq = useRef(0);
+  const activeSeq = useRef(0);
+
+  // Resolve the initial active state once (covers dynamic items whose
+  // default state depends on sibling defaults). Subsequent edits refresh it
+  // through ``setValue`` below.
+  useEffect(() => {
+    if (!hasDynamicActive || !resolveActive) return;
+    const seq = ++activeSeq.current;
+    resolveActive(values).then((map) => {
+      if (seq !== activeSeq.current) return;
+      if (map) setActiveOverrides(map);
+    });
+    // Run only on mount / when the resolver or schema shape changes; per-edit
+    // refresh is handled in ``setValue``.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasDynamicActive, resolveActive]);
 
   const setValue = useCallback(
     (name: string, value: unknown) => {
@@ -99,23 +155,39 @@ export function DataSetForm(props: DataSetFormProps) {
           }
         });
       }
+      if (hasDynamicActive && resolveActive) {
+        const seq = ++activeSeq.current;
+        resolveActive(newValues).then((map) => {
+          if (seq !== activeSeq.current) return;
+          if (map) setActiveOverrides(map);
+        });
+      }
     },
-    [onChange, values, properties, resolveCallbacks],
+    [
+      onChange,
+      values,
+      properties,
+      resolveCallbacks,
+      hasDynamicActive,
+      resolveActive,
+    ],
   );
 
   return (
-    <div className="dataset-form">
-      {layout.map((node, idx) => (
-        <LayoutNodeView
-          key={idx}
-          node={node}
-          properties={properties}
-          values={values}
-          setValue={setValue}
-          resolveChoices={resolveChoices}
-        />
-      ))}
-    </div>
+    <ActiveOverridesContext.Provider value={activeOverrides}>
+      <div className="dataset-form">
+        {layout.map((node, idx) => (
+          <LayoutNodeView
+            key={idx}
+            node={node}
+            properties={properties}
+            values={values}
+            setValue={setValue}
+            resolveChoices={resolveChoices}
+          />
+        ))}
+      </div>
+    </ActiveOverridesContext.Provider>
   );
 }
 
@@ -251,12 +323,25 @@ function FieldRow(props: FieldRowProps) {
   const label = (prop["x-guidata-label"] as string | undefined) ?? name;
   const help = prop.description as string | undefined;
   const unit = prop["x-guidata-unit"] as string | undefined;
+  const activeOverrides = useContext(ActiveOverridesContext);
   // An item is non-editable when it is read-only (e.g. ``set_computed``)
   // or when its ``display.active`` resolved to ``False`` (e.g.
-  // ``ArithmeticParam.operation``, a preview field updated by callbacks).
-  const readOnly = prop.readOnly === true || prop["x-guidata-active"] === false;
+  // ``ArithmeticParam.operation``, a preview field updated by callbacks, or
+  // ``BlobOpenCVParam.min_circularity`` while its filter group is off). A
+  // live override (from ``resolveActive``) wins over the static schema flag.
+  const override = activeOverrides[name];
+  const readOnly =
+    prop.readOnly === true ||
+    override === false ||
+    (override === undefined && prop["x-guidata-active"] === false);
   return (
-    <div className="dataset-form-row">
+    <div
+      className={
+        readOnly
+          ? "dataset-form-row dataset-form-row-disabled"
+          : "dataset-form-row"
+      }
+    >
       <label
         className="dataset-form-label"
         title={help}

src/components/DialogBridge.tsx

@@ -66,6 +66,11 @@ export function DialogBridge() {
         payload={payload}
         onSubmit={(values) => finish(values)}
         onCancel={() => finish(null)}
+        resolveActive={
+          runtime
+            ? (currentValues) => runtime.resolveBridgeActive(currentValues)
+            : undefined
+        }
       />
     );
   }

src/components/ProfileDefinitionDialog.tsx

@@ -52,6 +52,9 @@ interface Props {
     itemName: string,
     currentValues: Record<string, unknown>,
   ) => Promise<Record<string, unknown>>;
+  resolveActive?: (
+    currentValues: Record<string, unknown>,
+  ) => Promise<Record<string, boolean>>;
   onSubmit: (values: Record<string, unknown>) => void | Promise<void>;
   onCancel: () => void;
 }
@@ -259,6 +262,7 @@ export function ProfileDefinitionDialog(props: Props) {
     imageData,
     resolveChoices,
     resolveCallbacks,
+    resolveActive,
     onSubmit,
     onCancel,
   } = props;
@@ -394,6 +398,7 @@ export function ProfileDefinitionDialog(props: Props) {
               onChange={setValues}
               resolveChoices={resolveChoices}
               resolveCallbacks={resolveCallbacks}
+              resolveActive={resolveActive}
             />
           </div>
         </div>

src/runtime/_guidata_jsonschema_shim.py

@@ -193,6 +193,17 @@ def dataset_to_schema_with_values(instance: gdt.DataSet) -> dict[str, Any]:
     """
     schema = dataset_to_schema(type(instance))
     _apply_display_callbacks(instance)
+    # Bake the per-instance ``display.active`` state into the schema so the
+    # very first render already greys out inactive widgets (e.g. the
+    # blob-detection ``min_circularity`` gated by ``filter_by_circularity``)
+    # without waiting for a frontend round-trip.  Only inactive items are
+    # flagged; active items stay editable by default, and dynamic ones keep
+    # their ``x-guidata-active-dynamic`` marker so the frontend re-evaluates
+    # them via :func:`resolve_dataset_active` on every edit.
+    properties = schema.get("properties", {})
+    for name, is_active in resolve_dataset_active(instance).items():
+        if not is_active and name in properties:
+            properties[name]["x-guidata-active"] = False
     values: dict[str, Any] = {}
     for item in instance.get_items():
         if isinstance(item, (gdt.BeginGroup, gdt.EndGroup, gdt.SeparatorItem)):
@@ -317,6 +328,7 @@ def resolve_dataset_active(instance: gdt.DataSet) -> dict[str, bool]:
         Mapping ``{item_name: bool}``. Items without a name (separators,
         end-of-group markers, ...) are skipped.
     """
+    _sync_store_props(instance)
     result: dict[str, bool] = {}
     for item in instance.get_items():
         name = item.get_name()
@@ -330,6 +342,33 @@ def resolve_dataset_active(instance: gdt.DataSet) -> dict[str, bool]:
     return result
 
 
+def _sync_store_props(instance: gdt.DataSet) -> None:
+    """Replay the Qt ``do_store`` step for every ``display.store`` item.
+
+    guidata's ``store`` / :class:`~guidata.dataset.datatypes.ValueProp`
+    mechanism (used e.g. by ``BlobOpenCVParam.filter_by_circularity`` to
+    gate ``min_circularity`` / ``max_circularity``) holds its value on the
+    *property object* itself, not on the dataset instance.  In the Qt UI
+    that value is pushed by the checkbox widget's ``do_store`` callback
+    whenever the user toggles it.  Headless schema generation never builds
+    those widgets, so the stored value stays at its class-level default and
+    every ``active=ValueProp(...)`` sibling would resolve against stale
+    state.  Replaying ``store.set(instance, item, value)`` here keeps the
+    non-Qt ``active`` resolution faithful to the Qt UI.
+    """
+    for item in instance.get_items():
+        try:
+            store = item.get_prop("display", "store", None)
+        except Exception:  # pylint: disable=broad-except
+            store = None
+        if store is None:
+            continue
+        try:
+            store.set(instance, item, item.get_value(instance))
+        except Exception:  # pylint: disable=broad-except
+            pass
+
+
 # ---------------------------------------------------------------------------
 # Layout traversal (groups & tabs)
 # ---------------------------------------------------------------------------