JSON Node Settings

The JSON Node Settings panel is designed to display and manage JSON data within a node. It offers various functionalities such as viewing formatted or raw JSON, previewing HTML content, searching, filtering using JSONPath, and downloading the data.

Features

1. Header Information

The header section displays key information and controls:

• Response Output Label: Indicates that the panel shows response data.
• Content Type: Shows the MIME type of the data (e.g., application/json, text/html).
• Data Size: Displays the size of the JSON data (e.g., in B, KB, MB).
• Expand/Minimize: A button to toggle a full-screen view of the panel for better readability of large data. (Uses and icons internally)
• Download: A button to download the raw data. The filename is automatically generated based on the node label and content type (e.g., output.json, response.html).

2. Data Filtering and Searching (for JSON/Raw views)

• Search Content: An input field to search for specific text within the JSON data. Matches are highlighted in the display.

• Filter with JSONPath: If the content type is JSON, an input field allows users to filter the data using a JSONPath expression (e.g., $.data.items[*]).

  • Errors in the JSONPath expression or paths that yield no results are indicated with an error message.
• Clear Filters: A button appears if any search term or JSONPath filter is active, allowing the user to quickly clear them.

3. Data Views

The panel supports multiple views for the data, automatically selected based on content type but can be implicitly changed by user actions or data properties:

• Pretty View: (Default for application/json) Displays the JSON data formatted with indentation for readability. Supports search and JSONPath filtering.
• Raw View: Displays the data as a raw string. Supports search.
• Preview View: (Default for text/html) Renders HTML content within an <iframe>. This view is sandboxed for security.

4. Content Display Area

• No Data State: If no data is available (e.g., the flow hasn't run or no input is connected), a message "No data available yet!" is shown with an informational icon.

• Data Display:

  • For Pretty and Raw views, the data is shown within a <pre> and <code> block.
  • For large content in these views, only the first 15 lines are initially shown, with a "Ver completo" (Show full) button to expand the view within the panel (this is different from the main panel expand). A subtle fade effect indicates that more content is available.
  • When expanded, the content area becomes scrollable.
• Copy Button: A button is available to copy the currently displayed content (filtered or raw, depending on the view) to the clipboard. A confirmation ( icon) appears briefly after copying.

5. Styling and Theming

• The panel uses Tailwind CSS for styling and adapts its color scheme (e.g., cartoonBg, cartoonCard) for good visibility and user experience.
• Search highlights and error messages also adapt to the current theme.

Key Functionalities and Logic

• formatJson(data): Safely stringifies JSON data with an indent of 2 spaces. Returns the original data as a string if stringification fails.
• getDataSize(data): Calculates and formats the byte size of the data into B, KB, or MB.
• getHeaderValue(headers, headerName): Retrieves a header value case-insensitively.
• Data Source: The primary data (jsonData) is determined by executionResult.data if the node execution was successful; otherwise, it falls back to node.data.jsonData.
• Content Type Determination: The contentType is derived from the content-type header in executionResult.headers, defaulting to application/json.
• View Type Logic: The viewType is automatically set based on contentType: preview for HTML, pretty for JSON, and raw for others.
• JSONPath Filtering (filteredJsonString): Uses jsonpath-plus library to apply JSONPath expressions. Handles errors and no-result scenarios.
• Search Highlighting (displayedContent): Splits the content by the search term and wraps matches in a <span> with appropriate highlighting classes.
• Download (handleDataDownload): Creates a Blob from rawDataString with the determined contentType and initiates a browser download.
• Copy (handleCopy): Copies the relevant string (filteredJsonString or rawDataString) to the clipboard.
• Expand/Minimize State (isExpanded): Toggles a class that makes the panel fixed, covering the screen for an expanded view. The internal content area also has its own expand mechanism for long text.

Props

The JsonNodeSettings component expects the following props:

• node: Node<JsonNodeData>: The React Flow node object.

  • JsonNodeData can include:
  • label?: string: Optional label for the node, used in default download filename.
  • jsonData?: any: The JSON data to display if not provided by executionResult.
  • width?: number: Optional width for the node.

• executionResult: NodeResult | undefined: The result of the node's execution, which might contain the data to display and relevant headers.

  • NodeResult typically includes:
  • status: 'success' | 'error'
  • data: any
  • headers?: Record<string, string>

This panel provides a comprehensive way to inspect and interact with JSON or other data outputs from a node in a user-friendly manner.