hooks.ts

Overview

The hooks.ts file defines a custom React hook named useHandleOperateParameters designed to manage and manipulate a list of parameters associated with a specific node in a graph-based data structure. This hook provides a set of handlers to add, remove, update, and save parameter variables tied to a node's form data, abstracting the complexity of state management and interaction with a centralized store (useGraphStore).

The primary purpose of this hook is to facilitate controlled updates to node parameters within a React component, ensuring consistent state synchronization and providing convenient event handlers for UI components such as input fields and buttons.

Detailed Explanation

useHandleOperateParameters(nodeId: string)

Description

A React hook that manages the parameters (variables) of a node identified by nodeId. It retrieves the node's current parameters from a global graph store, provides handlers to update these parameters, and exposes the current list of parameters (dataSource) for rendering or further processing.

Parameters

• nodeId: string
  The unique identifier of the node whose parameters are to be managed.

Returns

An object containing:

• handleAdd: MouseEventHandler
  Event handler to add a new empty parameter to the node's variables list.

• handleRemove: (id?: string) => () => void
  Higher-order function that returns an event handler to remove a parameter by its id.

• handleComponentIdChange: (row: IInvokeVariable) => (value: string) => void
  Returns a callback to change the component_id field of a given parameter (row).

• handleValueChange: (row: IInvokeVariable) => ChangeEventHandler
  Returns an onChange event handler for an input element to update the value field of a parameter.

• handleSave: (row: IGenerateParameter) => void
  Saves updates to a given parameter row.

• dataSource: IGenerateParameter[]
  The current list of parameters (variables) for the node.

Usage Example

import React from 'react';
import { useHandleOperateParameters } from './hooks';

const NodeParametersEditor = ({ nodeId }: { nodeId: string }) => {
  const {
    handleAdd,
    handleRemove,
    handleComponentIdChange,
    handleValueChange,
    handleSave,
    dataSource,
  } = useHandleOperateParameters(nodeId);

  return (
    <div>
      {dataSource.map((param) => (
        <div key={param.id}>
          <input
            value={param.key}
            onChange={(e) => handleSave({ ...param, key: e.target.value })}
          />
          <input
            value={param.component_id || ''}
            onChange={(e) => handleComponentIdChange(param)(e.target.value)}
          />
          <input
            value={param.value}
            onChange={handleValueChange(param)}
          />
          <button onClick={handleRemove(param.id)}>Remove</button>
        </div>
      ))}
      <button onClick={handleAdd}>Add Parameter</button>
    </div>
  );
};

Implementation Details

• State Management: Uses a centralized store hook useGraphStore to retrieve (getNode) and update (updateNodeForm) node data. This ensures all updates are globally synchronized.

• Data Access: Uses lodash's get method to safely access nested variables under node.data.form with a fallback to an empty array.

• Memoization: The parameters list (dataSource) is memoized with useMemo to avoid unnecessary recalculations unless the node changes.

• Callback Functions: Event handlers are wrapped with useCallback to prevent unnecessary re-renders and preserve stable references.

• UUID Generation: New parameters are assigned unique IDs using the uuid library, ensuring no collisions.

• Immutable Updates: All modifications to the parameters array create new copies using spread and splice to maintain immutability and trigger React state updates.

• Higher-Order Functions: Some handlers like handleRemove and handleComponentIdChange return functions tailored for specific parameters, facilitating easy binding in UI components.

Interaction with Other System Parts

• useGraphStore: This hook interacts heavily with the global graph state managed by useGraphStore, which provides methods to get node data and update forms. This implies that useHandleOperateParameters is part of a larger graph or flow editor application where nodes have forms with variables.

• Interfaces: The hook works with the interfaces IGenerateParameter and IInvokeVariable imported from ../../interface which define the shape of parameter objects. These interfaces ensure type safety and consistency across the app.

• UI Components: Intended to be used in React components that render forms or parameter lists, providing handlers for inputs and buttons to manipulate node parameters.

Mermaid Diagram

This flowchart illustrates the main functions returned by useHandleOperateParameters and their relationships to the dataSource state and the global store methods.

flowchart TD
    A[useHandleOperateParameters(nodeId)]
    A --> B[dataSource (parameters list)]
    A --> C[handleAdd]
    A --> D[handleRemove(id)]
    A --> E[handleComponentIdChange(row)]
    A --> F[handleValueChange(row)]
    A --> G[handleSave(row)]

    C -->|Adds new param| H[updateNodeForm(nodeId, new variables)]
    D -->|Removes param by id| H
    E -->|Changes component_id of param| H
    F -->|Changes value of param| H
    G -->|Saves updated param| H

Summary

The hooks.ts file provides a reusable React hook useHandleOperateParameters that abstracts complex state management logic for node parameters in a graph-based UI. It offers a clean API to manipulate parameter variables, ensuring immutability, synchronization with a global store, and convenient event handlers for UI integration. This hook is a critical part of the user interaction layer for nodes within the larger graph or flow editor system.