hooks.ts

Overview

The hooks.ts file provides custom React hooks designed to work within a graph-based state management context. Specifically, it interacts with a centralized graph store to:

• Build dropdown options dynamically excluding already-selected nodes (useBuildRelevantOptions hook).

• Monitor changes in graph node connections and synchronize those changes with a form's fields (useWatchConnectionChanges hook).

These hooks are meant to be used in UI components dealing with graph nodes and their relationships, enabling reactive and consistent user interfaces for operations such as selecting target nodes and updating connection-related form fields.

Detailed Documentation

Imports

• pick from lodash: Used to selectively extract object properties.

• React hooks: useCallback, useEffect for memoization and side-effect management.

• IOperatorForm: Interface defining the shape of props for the useWatchConnectionChanges hook.

• useGraphStore: Custom store hook, presumably a Zustand or similar state management store holding graph node states.

Hook: useBuildRelevantOptions

export const useBuildRelevantOptions = (): ((toList: string[]) => { label: string; value: string }[])

Purpose

Generates a memoized function that, when given a list of node IDs (toList), returns an array of dropdown options excluding those nodes. This is useful to prevent selecting the same node multiple times in related UI dropdowns.

Parameters

• None directly. The returned function accepts:

  • toList: string[] — An array of node IDs that should be excluded from the options.

Returns

• A function (toList: string[]) => Array<{ label: string; value: string }> that:

  • Filters out nodes whose IDs appear in toList.

  • Maps the remaining nodes into dropdown option objects with label (node name) and value (node ID).

Usage Example

const buildOptions = useBuildRelevantOptions();

// Assuming selectedNodeIds = ['node1', 'node2']
const options = buildOptions(selectedNodeIds);
// options will contain nodes excluding 'node1' and 'node2', formatted as {label, value}

Implementation Details

• Uses useGraphStore to access all current graph nodes.

• The filter excludes nodes by comparing their id against toList.

• Uses useCallback to memoize the function based on changes in the node list, preventing unnecessary recalculations.

Hook: useWatchConnectionChanges

export const useWatchConnectionChanges = ({ nodeId, form }: IOperatorForm): void

Purpose

Monitors changes in the connections of a specific graph node and updates the corresponding "yes" and "no" fields in the provided form accordingly. This keeps the form state synchronized with the graph store's node state.

Parameters

• An object implementing IOperatorForm interface with:

  • nodeId: string — The ID of the node to watch.

  • form — A form instance with a method setFieldsValue to update form fields.

Returns

• None (void). The hook manages side effects internally.

Usage Example

useWatchConnectionChanges({ nodeId: 'node3', form: operatorFormInstance });

This will keep the form fields yes and no in sync with the yes and no properties of the node with ID 'node3'.

Implementation Details

• Retrieves the node from the graph store using getNode(nodeId).

• Defines a callback watchFormChanges that updates the form fields with the node's yes and no values using lodash.pick.

• Calls watchFormChanges inside a useEffect to reactively synchronize the form when the node or form changes.

• The comment references similarity to a categorize-form’s useHandleFormValuesChange method, indicating a shared pattern for syncing form and graph state.

Important Implementation Details

• State Management: The hooks rely on useGraphStore, a centralized store presumably managing the graph nodes and their states. This decouples UI logic from data management.

• Memoization: Using useCallback ensures efficient function reuse and prevents unnecessary renders or recalculations.

• Selective Updates: The use of lodash.pick ensures only relevant form fields (yes, no) are updated, minimizing form state changes.

• Exclusion Logic: useBuildRelevantOptions implements an exclusion list to prevent duplicate selections in UI elements.

Interaction With Other Parts of the System

• Graph Store (useGraphStore): Primary source of truth for graph nodes. The hooks read node data and listen for updates via this store.

• Forms: The useWatchConnectionChanges hook directly manipulates form fields, indicating integration with form libraries (e.g., Ant Design's Form) that support setFieldsValue.

• UI Components: These hooks are designed to be used within React components that display or edit graph nodes and their connections, enabling reactive dropdowns and forms.

Mermaid Diagram

flowchart TD
    A[useBuildRelevantOptions] -->|uses| B[useGraphStore.nodes]
    A --> C[buildRelevantOptions(toList)]
    C -->|filters out| D[toList node IDs]
    C -->|maps to| E[{ label, value } options]

    F[useWatchConnectionChanges({ nodeId, form })] -->|uses| G[useGraphStore.getNode(nodeId)]
    F --> H[watchFormChanges()]
    H -->|updates| I[form.setFieldsValue({ yes, no })]
    F -->|runs| J[useEffect -> watchFormChanges]

    style A fill:#f9f,stroke:#333,stroke-width:1px
    style F fill:#bbf,stroke:#333,stroke-width:1px

Summary

The hooks.ts file provides essential hooks for managing graph node selections and connection synchronization within forms. It bridges the graph store's state with UI elements, enabling consistent, reactive user experiences in graph-related forms and dropdowns. The file's hooks encapsulate common logic for filtering options and syncing form values, promoting code reuse and maintainability.