hooks.ts

Overview

The hooks.ts file contains custom React hooks designed to manage and synchronize state related to graph nodes within a React application. These hooks primarily interact with a global graph state store (useGraphStore) to provide filtered node options and keep form fields in sync with node connections.

Specifically, this file exports two hooks:

• useBuildRelevantOptions: Creates a callback function that returns a filtered list of node options excluding those already selected elsewhere, useful for dropdown option lists.

• useWatchConnectionChanges: Watches changes in graph node connections and synchronizes specific form fields (yes and no) accordingly.

These hooks help maintain consistency between the UI form elements and the underlying graph data, facilitating user interactions in workflows involving node connections.

Detailed Documentation

Imports

• pick from lodash/pick: Utility to extract specific properties from an object.

• React hooks: useCallback, useEffect.

• IOperatorForm: Type/interface for operator form props.

• useGraphStore: Custom global state hook for accessing and manipulating graph data.

useBuildRelevantOptions

export const useBuildRelevantOptions = () => { ... }

Purpose

Creates a memoized function that generates a list of node options for dropdown menus, excluding nodes already selected in other related dropdowns.

Functionality

• Retrieves all nodes from the global graph store.

• Returns a callback function buildRelevantOptions that accepts an array of node IDs (toList) representing already selected nodes.

• The function filters out nodes whose IDs are in toList and maps the remaining nodes to an array of option objects with label and value properties.

Parameters

• None directly, but the returned function takes:

  • toList: string[] – An array of node IDs to exclude from the options.

Returns

• A function (toList: string[]) => { label: string; value: string }[] that returns filtered options.

Usage Example

const buildOptions = useBuildRelevantOptions();
const selectedIds = ['node1', 'node5'];

const options = buildOptions(selectedIds);
// options is now a list of nodes excluding 'node1' and 'node5'

Important Details

• Uses useCallback with nodes as a dependency to avoid unnecessary recalculations when nodes do not change.

• Options are shaped as objects { label: node.data.name, value: node.id } for compatibility with common dropdown components.

useWatchConnectionChanges

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

Purpose

Monitors changes to a graph node’s connection targets and synchronizes the yes and no fields of a form accordingly.

Parameters

• An object conforming to IOperatorForm interface, containing:

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

  • form – A form instance (likely from a UI library like Ant Design) with method setFieldsValue.

Returns

• None (this hook handles side effects internally).

Functionality

• Retrieves the node with nodeId from the graph store.

• Defines a callback watchFormChanges that updates the form fields yes and no with values from the node if it exists.

• Uses useEffect to trigger watchFormChanges whenever the node or form reference changes.

Usage Example

useWatchConnectionChanges({ nodeId: 'node123', form: operatorForm });

This will keep the yes and no fields in operatorForm synchronized with the connections of node 'node123'.

Important Details

• Uses lodash.pick to extract only yes and no properties from the node.

• Ensures that form fields stay consistent with graph node connections whenever the node data updates.

• Comment notes similarity to another hook useHandleFormValuesChange from a categorize-form, indicating a shared pattern for form synchronization.

Implementation Details & Algorithms

• Filtering logic in useBuildRelevantOptions: The hook filters nodes by checking if their IDs are not in the toList array, effectively preventing duplicate selections across multiple dropdowns.

• Form synchronization in useWatchConnectionChanges: Uses a combination of useCallback and useEffect to detect changes and update form fields reactively.

No complex algorithms are used; the hooks mainly leverage React’s hooks for memoization and side effects combined with array filtering and object property picking.

Interaction with Other System Parts

• Global Graph Store (useGraphStore): Both hooks depend on useGraphStore to get current graph nodes and node details. This store is the single source of truth for the graph state.

• Form Components: useWatchConnectionChanges expects a form API capable of setting field values, indicating integration with controlled form components (e.g., Ant Design’s Form).

• Dropdown/Select Components: The output of useBuildRelevantOptions is designed as options prop for dropdown components that display node names.

• Interfaces: The hook uses IOperatorForm interface, suggesting it is part of a typed form system managing operator nodes.

Mermaid Diagram

flowchart TD
    A[useBuildRelevantOptions] --> B[get nodes from useGraphStore]
    B --> C[filter nodes excluding toList]
    C --> D[map nodes to {label, value} options]
    A --> E[returns buildRelevantOptions function]

    F[useWatchConnectionChanges] --> G[getNode(nodeId) from useGraphStore]
    G --> H[extract yes, no from node]
    H --> I[setFieldsValue on form with picked values]
    F --> J[useEffect to trigger watchFormChanges on node/form change]

Summary

The hooks.ts file provides two essential hooks for managing graph node selections and form synchronization in a React application. useBuildRelevantOptions helps generate filtered dropdown options excluding already selected nodes, while useWatchConnectionChanges ensures form fields reflect the current state of node connections. Both hooks rely on a global graph store and integrate closely with form and UI components to maintain consistency and improve user experience.