hooks.ts

Overview

The hooks.ts file defines a custom React hook named useHandleOperateParameters designed to manage parameter objects associated with a specific node in a graph-based state store. This hook abstracts the logic for retrieving, updating, adding, and removing parameters within a node's form data. It leverages React's memoization hooks (useMemo, useCallback) for performance optimization and integrates tightly with a centralized graph store (useGraphStore) to ensure state consistency across the application.

This hook is particularly useful in scenarios where nodes represent configurable entities or components, and each node holds a dynamic list of parameters that can be edited by users via a form interface.

Detailed Documentation

useHandleOperateParameters

useHandleOperateParameters(nodeId: string): {
  handleAdd: () => void;
  handleRemove: (id?: string) => () => void;
  handleComponentIdChange: (row: IGenerateParameter) => (value: string) => void;
  handleSave: (row: IGenerateParameter) => void;
  dataSource: IGenerateParameter[];
}

Description

A custom React hook that manages the lifecycle and operations on a node's parameters within a graph structure. It provides functions to add, remove, update, and save parameters for the node identified by nodeId. It also returns the current list of parameters (dataSource) for rendering or further operations.

Parameters

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

Returns

An object containing:

• handleAdd: () => void
  Function to add a new empty parameter to the node's parameter list.

• handleRemove: (id?: string) => () => void
  Higher-order function that takes an optional parameter id and returns a function. When invoked, it removes the parameter with the given id from the node.

• handleComponentIdChange: (row: IGenerateParameter) => (value: string) => void
  Higher-order function that takes a parameter object row and returns a function. The returned function accepts a string value and sets the component_id of the parameter represented by row to this value.

• handleSave: (row: IGenerateParameter) => void
  Function to update the entire parameter object in the node's parameter list based on the provided row.

• dataSource: IGenerateParameter[]
  The current array of parameter objects associated with the node.

Usage Example

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

interface ParameterEditorProps {
  nodeId: string;
}

const ParameterEditor: React.FC<ParameterEditorProps> = ({ nodeId }) => {
  const {
    dataSource,
    handleAdd,
    handleRemove,
    handleComponentIdChange,
    handleSave,
  } = useHandleOperateParameters(nodeId);

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

Implementation Details

• State Access & Mutation: The hook interacts with useGraphStore, a Zustand-based (assumed) global state management store, to retrieve and update the node data. It pulls getNode and updateNodeForm functions from the store.

• Parameters Retrieval: The parameters list is extracted from node.data.form.parameters using Lodash's get method, providing a safe fallback to an empty array.

• Memoization:

  • The parameters list (dataSource) is memoized with useMemo keyed on the node object to prevent unnecessary recalculations.

  • All handlers (handleAdd, handleRemove, handleComponentIdChange) are wrapped with useCallback to avoid re-creation on each render, optimizing performance particularly when passed down as props.

• Parameter Identification: Each parameter is uniquely identified by an id property (UUID), allowing precise updates and removals.

• Immutable Updates: All parameter array modifications create a new array copy to maintain immutability, a React best practice for state updates.

• UUID Generation: New parameters get a unique id using the uuid package to ensure uniqueness.

Interaction with Other System Parts

• useGraphStore:
  This hook is tightly coupled with the graph state management store which handles the nodes and their forms. Functions like getNode and updateNodeForm are essential for fetching and synchronizing the parameter data with the global state.

• IGenerateParameter Interface:
  The hook operates on objects conforming to this interface, which likely defines the shape of a parameter (e.g., id, key, component_id). This interface is imported from ../../interface, indicating it is part of the shared types used across the application.

• UI Components:
  The handlers returned by this hook are intended to be used in UI components that render forms or parameter lists, providing users the ability to interactively add, remove, and update parameters.

Mermaid Diagram: Flowchart of Functions and Data Flow

flowchart TD
    A[Start: Call useHandleOperateParameters(nodeId)]
    A --> B[getNode(nodeId) from useGraphStore]
    B --> C[Extract dataSource from node.data.form.parameters]
    C --> D{User Interaction}
    
    D -->|Add Parameter| E[handleAdd]
    E --> F[Generate UUID and add new parameter]
    F --> G[updateNodeForm(nodeId, updated parameters)]
    
    D -->|Remove Parameter| H[handleRemove(id)]
    H --> I[Filter out parameter with id]
    I --> G
    
    D -->|Change Component ID| J[handleComponentIdChange(row)]
    J --> K[Update component_id in parameter]
    K --> G
    
    D -->|Save Parameter| L[handleSave(row)]
    L --> M[Update parameter with new row data]
    M --> G

    G --> C

Diagram Explanation:

• The flowchart illustrates the main flow within the hook: obtaining node data, extracting parameters, and handling user-triggered operations (add, remove, change, save).

• Each operation results in updating the node form through updateNodeForm, which causes the parameters list to refresh.

Summary

The hooks.ts file provides a focused, performant, and reusable React hook to manage a node's parameter list within a graph store. It abstracts common operations needed in UI forms for parameter manipulation while ensuring state consistency and immutability. Its design promotes clean component code by encapsulating logic, and its integration with the centralized store ensures synchronization across the system.