Implementation:TobikoData Sqlmesh EdgeWithGradient

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Lineage_Visualization
Last Updated	2026-02-07 20:00 GMT

Overview

React component that renders lineage graph edges with gradient colors and configurable path types for React Flow visualizations.

Description

EdgeWithGradient is a memoized React component that renders SVG paths for connections between lineage nodes with linear gradient fills. It supports four path types: bezier (smooth curved), smoothstep (curved with rounded corners), step (angled with sharp corners), and straight (direct line). The component creates an SVG linearGradient definition with unique ID using React's useId hook, applying colors from startColor and endColor props (defaulting to CSS variables). The gradient transitions from source node color to target node color along the edge path, with configurable strokeWidth (default 4px). Edge positioning is handled by React Flow's coordinate props.

Usage

Use this component as a custom edge type in React Flow lineage graphs when you need visual differentiation of edges through color gradients or want to support multiple edge path rendering styles.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/common/src/components/Lineage/edge/EdgeWithGradient.tsx

Signature

export interface EdgeData extends LineageEdgeData {
  startColor?: string
  endColor?: string
  strokeWidth?: number
  pathType?: PathType
}

export const EdgeWithGradient = React.memo<TEdgeData extends EdgeData = EdgeData>(
  ({
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    style,
    data,
    markerEnd,
  }: EdgeProps<Edge<TEdgeData>>)
)

type PathType = 'bezier' | 'smoothstep' | 'step' | 'straight'

Import

import { EdgeWithGradient, type EdgeData } from '@sqlmesh-common/components/Lineage/edge/EdgeWithGradient'

I/O Contract

Inputs

Name	Type	Required	Description
id	EdgeId	Yes	Unique identifier for the edge
sourceX	number	Yes	X coordinate of source point
sourceY	number	Yes	Y coordinate of source point
targetX	number	Yes	X coordinate of target point
targetY	number	Yes	Y coordinate of target point
sourcePosition	Position	Yes	Position of source handle (Left/Right/Top/Bottom)
targetPosition	Position	Yes	Position of target handle
style	CSSProperties	No	Additional CSS styles
data	EdgeData	No	Edge configuration (colors, width, path type)
data.startColor	string	No	Gradient start color (default: CSS variable)
data.endColor	string	No	Gradient end color (default: CSS variable)
data.strokeWidth	number	No	Edge line width in pixels (default: 4)
data.pathType	PathType	No	Path rendering style (default: 'bezier')
markerEnd	MarkerType	No	Arrow marker configuration

Outputs

Name	Type	Description
Component	React.ReactElement	SVG path element with gradient and defs

Usage Examples

import { EdgeWithGradient } from '@sqlmesh-common/components/Lineage/edge/EdgeWithGradient'

// Register as custom edge type in React Flow
const edgeTypes = {
  gradient: EdgeWithGradient,
}

// Create edges with gradient configuration
const edges = [
  {
    id: 'e1-2',
    source: 'node1',
    target: 'node2',
    type: 'gradient',
    data: {
      startColor: '#4CAF50',
      endColor: '#2196F3',
      strokeWidth: 6,
      pathType: 'bezier'
    }
  },
  {
    id: 'e2-3',
    source: 'node2',
    target: 'node3',
    type: 'gradient',
    data: {
      pathType: 'smoothstep',
      strokeWidth: 4
      // Uses default CSS variable colors
    }
  }
]

// Use in React Flow
<ReactFlow
  nodes={nodes}
  edges={edges}
  edgeTypes={edgeTypes}
/>

// Different path types
const pathExamples = [
  { pathType: 'bezier' },     // Smooth curved
  { pathType: 'smoothstep' }, // Curved with rounded corners
  { pathType: 'step' },       // Angled with sharp corners
  { pathType: 'straight' }    // Direct line
]

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment