Data Lineage Section Documentation

This section provides a visual workspace for comparing and tracing data across multiple files or data sources side-by-side.

Overview

The Data Lineage view uses a freeform canvas where data sources are represented as draggable and resizable Cards. Each card contains an interactive tree view of its corresponding data, allowing for easy comparison and value highlighting across different sources.

Core Features

Canvas Interaction

• Panning: Click and drag the background of the canvas to move the view around.
• Zooming: Use the zoom controls in the bottom-right corner or the mouse wheel (while holding Ctrl/Cmd or using pinch gestures) to zoom in and out.
• Reset View: A button within the zoom controls resets the pan and zoom to fit the content.
• Persistence: The position and zoom level of the canvas, along with the arrangement and state of the cards, are automatically saved and restored when revisiting the Data Lineage section.

Card Management

• Adding Cards (+ Button): The floating action button in the top-left opens a menu listing all currently loaded files. Selecting a file adds it as a new card onto the canvas.
• Arranging Cards: Click and drag the header of a card to move it around the canvas.
• Resizing Cards: Drag the bottom-right corner of a card to resize it.
• Closing Cards (X Icon): Each card has a close button in its header to remove it from the canvas individually.
• Removing All Cards (Remove All button): The floating button (often a trash icon) in the bottom-left removes all cards from the canvas after confirmation.

Data Cards

Each card represents a single data source (file).

• Header: Displays the filename or title of the data source.
• Copy Content Button: Allows copying the raw content of the card's data source.
• Close Button (X): Removes the card from the canvas.
• Filter Input: A text field ("Filter tree content...") allows filtering the tree view within that specific card. Filters applied here do not affect other cards.
• Clear All Filters Button (Clear Filter icon): Appears near the Add (+) button when any card has an active filter. Clicking it clears filters across all cards.
• Tree View: Displays the hierarchical data using an optimized tree structure.
  • Supports expand/collapse of nodes.
  • Displays keys and values.
  • Primitive values (strings, numbers, booleans) are interactive for highlighting.

Cross-Card Highlighting (Color Palette)

A floating palette on the right side enables highlighting of identical values across all visible cards.

• Color Selection: Choose a highlight color (Yellow, Cyan, Pink, Green) from the palette. The currently selected color has a border.
• Applying Highlights: Click on any primitive value (string, number, boolean) within any card's tree view.
  • All instances of that exact value across all cards will be highlighted with the currently selected color.
• Changing Highlights: Click on an already highlighted value with a different color selected in the palette to change the highlight color for that value everywhere.
• Removing Highlights:
  • Click an already highlighted value with the same color selected in the palette to remove the highlight for that specific value across all cards.
  • Click the Clear All Markers Button (X) at the bottom of the palette to remove all active highlights from all cards.

Data Comparison (Diff View)

• Selecting Cards for Comparison: Click on the header area of a card (avoiding the title/buttons) to select it for comparison. Selected cards usually get a visual indicator (e.g., a border).
• Compare Button (Compare icon): Appears (likely near the zoom controls or floating) when exactly two cards are selected.
• Diff Viewer: Clicking the Compare button opens a full-screen side-by-side diff view showing the differences between the content of the two selected cards, with syntax highlighting.
• Closing Diff View: Use the close button within the diff viewer to return to the canvas.