hooks.ts

Overview

The hooks.ts file defines a custom React hook useHandleOperateParameters that provides a suite of utilities for managing and manipulating a collection of parameter objects associated with a specific node in a graph-like data structure. This hook is designed to interface with a centralized graph store, enabling React components to efficiently read and update the parameters (variables) of nodes.

The main functionality includes:

Reading the current list of parameters for a given node.
Adding new parameters.
Removing existing parameters.
Updating parameter fields such as component_id and value.
Saving changes to parameters.

This hook abstracts complex state management and update logic, making it easier for React components to interact with node parameters in a consistent and performant way.

Detailed Explanation

`useHandleOperateParameters(nodeId: string)`

Purpose

Provides handlers and data for managing the parameters (variables) of a node identified by nodeId within a graph store.

Parameters

Name	Type	Description
nodeId	string	Unique identifier of the target node in the graph store.

Returns

An object containing:

Property	Type	Description
`handleAdd`	MouseEventHandler	Event handler to add a new parameter to the node's variable list.
`handleRemove`	(id?: string) => () => void	Function that returns an event handler to remove a parameter by its `id`.
`handleComponentIdChange`	(row: IInvokeVariable) => (value: string) => void	Returns a handler to update the `component_id` field of a parameter.
`handleValueChange`	(row: IInvokeVariable) => ChangeEventHandler	Returns a change event handler for updating the `value` field of a parameter from input events.
`handleSave`	(row: IGenerateParameter) => void	Saves the entire updated parameter object in the node's variable list.
`dataSource`	`IGenerateParameter[]`	The current list of parameters (variables) for the node, memoized for performance.

Usage Example

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

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

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

Implementation Details

Interaction with `useGraphStore`

The hook uses useGraphStore to access and mutate node data.
- getNode(nodeId) fetches the node object.
- updateNodeForm(nodeId, { variables: [...] }) updates the node's form data with a new array of variables.

Data Extraction

Uses lodash.get to safely extract variables from node.data.form.variables, defaulting to an empty array if not present.
Memoizes dataSource to optimize re-renders and avoid recalculations unless node changes.

State Management Logic

The hook maintains no internal React state but leverages callbacks to update the central store.
All update functions create new copies of the variable array to maintain immutability, then invoke updateNodeForm.
handleAdd generates a new parameter with a unique UUID using the uuid library.

Callback Functions

changeValue is the core update function updating a specific field of a parameter.
Other handlers (handleComponentIdChange, handleValueChange) are specialized wrappers around changeValue tailored to specific fields or event types.
handleRemove filters out a parameter by id.
handleSave replaces an entire parameter object.

Interaction with Other Parts of the System

Graph Store: This hook is tightly coupled with the graph store (useGraphStore), which is presumably a state management store (e.g., Zustand) holding the graph nodes and their forms.
Interfaces: Relies on IGenerateParameter and IInvokeVariable interfaces for typing parameter objects, imported from ../../interface.
UI Components: Intended to be used within React components that render and manage node parameters, providing handlers and data for UI inputs and controls.
UUID Generator: Uses uuid to assign unique IDs to new parameters, ensuring stable keys and identification.

Mermaid Diagram

flowchart TD
  A[useHandleOperateParameters(nodeId)]
  A --> B[getNode(nodeId)]
  B --> C[dataSource: IGenerateParameter[]]
  A --> D[changeValue(row, field, value)]
  A --> E[handleComponentIdChange(row)]
  A --> F[handleValueChange(row)]
  A --> G[handleRemove(id)]
  A --> H[handleAdd(event)]
  A --> I[handleSave(row)]
  D --> J[updateNodeForm(nodeId, variables)]
  G --> J
  H --> J
  I --> J

Summary

The hooks.ts file encapsulates parameter management logic for graph nodes in a reusable React hook, leveraging centralized state management for consistency and performance. It abstracts common operations on node parameters, offering a clean API for React components to interact with node variable data seamlessly. Its design promotes immutability, clear separation of concerns, and efficient React rendering patterns.