Implementation:TobikoData Sqlmesh FactoryEdgeWithGradient

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

Overview

Higher-order component factory that creates context-aware gradient edges which highlight based on lineage selection state.

Description

FactoryEdgeWithGradient is a factory function that creates a memoized React component for rendering lineage edges with selection-aware gradient coloring. It accepts a lineage context hook as input and returns a component that wraps EdgeWithGradient. The returned component checks if the edge is in the selectedEdges Set from the context and conditionally applies startColor and endColor from the edge data only when the edge is active. This enables visual highlighting of lineage paths when users interact with the graph, with inactive edges rendering in default colors.

Usage

Use this factory when building lineage visualizations that need edges to visually respond to user interactions like node selection or lineage path highlighting. The factory pattern ensures proper context integration while maintaining edge rendering performance through memoization.

Code Reference

Source Location

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

Signature

export function FactoryEdgeWithGradient<
  TNodeData extends LineageNodeData = LineageNodeData,
  TEdgeData extends EdgeData = EdgeData,
  TNodeID extends string = NodeId,
  TEdgeID extends string = EdgeId,
  TSourceID extends string = TNodeID,
  TTargetID extends string = TNodeID,
  TSourceHandleID extends string = PortId,
  TTargetHandleID extends string = PortId,
>(
  useLineage: LineageContextHook<
    TNodeData,
    TEdgeData,
    TNodeID,
    TEdgeID,
    TSourceID,
    TTargetID,
    TSourceHandleID,
    TTargetHandleID
  >,
): React.MemoExoticComponent<({ data, id, ...props }: EdgeProps<Edge<TEdgeData>>) => JSX.Element>

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
useLineage	LineageContextHook	Yes	Hook function to access lineage context with selectedEdges

Outputs

Name	Type	Description
Component	React.MemoExoticComponent	Memoized edge component with context-aware gradient coloring

Usage Examples

import { FactoryEdgeWithGradient } from '@sqlmesh-common/components/Lineage/edge/FactoryEdgeWithGradient'
import { createLineageContext } from '@sqlmesh-common/components/Lineage/LineageContext'

// Create lineage context
const { Provider, useLineage } = createLineageContext(getInitial())

// Create context-aware edge component
const GradientEdge = FactoryEdgeWithGradient(useLineage)

// Register as edge type
const edgeTypes = {
  gradient: GradientEdge,
}

// Create edges with color data
const edges = [
  {
    id: 'e1-2',
    source: 'model1',
    target: 'model2',
    type: 'gradient',
    data: {
      startColor: '#00FF00',  // Only applied when edge is selected
      endColor: '#0000FF',    // Only applied when edge is selected
      pathType: 'bezier'
    }
  }
]

// Use in lineage visualization
function LineageGraph() {
  const [selectedEdges, setSelectedEdges] = useState(new Set())

  const contextValue = {
    ...getInitial(),
    selectedEdges,
    setSelectedEdges,
  }

  const handleNodeClick = (nodeId) => {
    // Update selected edges based on node connections
    const connectedEdges = getConnectedEdges(nodeId)
    setSelectedEdges(new Set(connectedEdges))
  }

  return (
    <Provider value={contextValue}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        edgeTypes={edgeTypes}
        onNodeClick={handleNodeClick}
      />
    </Provider>
  )
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment