Transform Node Settings

The TransformNodeSettings component is used to configure a "Transform Data" node.

This node allows users to restructure JSON data by defining a set of mapping rules. Each rule specifies how to take data from an input JSONPath and map it to a new output path or key.

This node is powerful for reshaping data, renaming fields, extracting nested values, or creating a new JSON structure from an existing one before it's passed to subsequent nodes.

Features

  • Node Label Configuration: Allows users to set a custom label for the Transform Data node.
  • Mapping Rules Management:
    • Users can add new mapping rules.
    • Each rule consists of an inputPath (JSONPath for the source data) and an outputPath (key/path for the destination in the new object).
    • Rules can be individually enabled or disabled using a checkbox.
    • Rules can be deleted.
  • Theming: Adapts its appearance (backgrounds, borders, text colors) based on the current theme (dark/light).
  • Interactive UI: Provides input fields for paths and buttons for managing rules.

Component Structure

  1. Interfaces:

    • MappingRule: Defines the structure for a single mapping rule:

      • id: string: Unique identifier for the rule.
      • inputPath: string: JSONPath expression to get data from the input object.
      • outputPath: string: Path/key where the extracted data will be placed in the output object.
      • enabled: boolean: Whether the rule is active.

    • TransformNodeData: Defines the data object for the transform node:

      • label?: string: Custom label for the node.
      • mappingRules?: MappingRule[]: Array of mapping rules.

  2. State and Hooks:

    • useFlowStore: To get the updateNodeData function for persisting changes to the node's data.
    • useTheme: To get the current theme for styling.
    • useState for label and mappingRules to manage the form state locally.
    • useEffect: To synchronize local state (label, mappingRules) if node.data props change externally or when the component mounts with new node data.

  3. Configuration Sections:

    • Node Label Input: A standard text input for the node's label. Changes are saved on blur.

    • Mapping Rules Section:

      • A styled container with a title "Mapping Rules" and an icon.
      • A descriptive paragraph: "Map input JSON paths to new output keys."

      • Rules List: Iterates over the mappingRules array to render each rule:

        • Each rule is displayed in a bordered and styled row.
        • Checkbox: To enable/disable the rule (handleToggleRule).
        • Input Path Input: Text field for the source JSONPath (rule.inputPath).
        • Arrow Icon: Visually separates input and output paths.
        • Output Path Input: Text field for the destination path/key (rule.outputPath).
        • Delete Button: A icon button to remove the rule (handleDeleteRule).
      • Add Mapping Rule Button: A button with a icon to add a new empty rule to the list (handleAddRule).

Styling

  • Uses cn utility for conditional class names, adapting to isDark mode.
  • Input fields, buttons, checkboxes, and rule containers have distinct styles for dark and light themes (e.g., bg-[#0f172acc] border-blue-400 for dark inputs, bg-blue-900/10 border-blue-300 for dark rule containers).
  • The overall panel and sections use shadow-cartoon and theme-specific borders.
  • Text colors for labels and descriptions also adapt to the theme.

Key Functionalities and Logic

  • Label Management: handleLabelChange updates local state; handleLabelBlur updates the global store via updateNodeData if the label has changed.

  • Rule Management:

    • notifyRuleChange(updatedRules): A helper function that updates the local mappingRules state and then calls updateNodeData to persist the changes to the store.
    • handleRuleChange(id, field, value): Updates the inputPath or outputPath for a specific rule.
    • handleToggleRule(id): Toggles the enabled status of a rule.
    • handleDeleteRule(id): Filters out the specified rule from the list.
    • handleAddRule(): Adds a new MappingRule object (with a unique id generated by crypto.randomUUID(), empty paths, and enabled: true) to the mappingRules array.
  • Input Interaction: onMouseDown={e => e.stopPropagation()} on input fields prevents node dragging when interacting with them.

Props

The TransformNodeSettings component expects the following props:

PropTypeDescription
nodeNode<TransformNodeData> (required)The React Flow node object for the Transform Data node. TransformNodeData (as defined in the component structure) holds the label and mappingRules.
JSONPath Usage
  • The inputPath uses JSONPath to extract values. For example, $.user.name would get the name property from a user object at the root.
  • The outputPath defines the key in the new object. If it contains dots (e.g., userDetails.name), it can create nested objects in the output, depending on the node's backend logic.

Ensure your JSONPath expressions in inputPath are correct for the incoming data structure. Invalid paths might result in null or undefined values being mapped, or errors if the path syntax is incorrect.

This component provides a flexible way to define data transformations, making it a versatile tool for data manipulation within a flow.
Loading search features...