Understand the SqlFlow visual design system
mainThe SqlFlow component uses a specific design system to communicate Spark execution details visually:
- Colors:
- Primary color:
#3f51b5(Material Design Blue). - Performance indicators: Uses a Green → Yellow → Red spectrum to show relative duration.
- Node types: Each type (input, output, transformation, etc.) is assigned a unique color.
- Primary color:
- Node Structure: Nodes feature a clear hierarchy with distinct header, content, and footer sections.
- Visual Indicators:
- Performance Bars: Color-coded bars showing relative duration.
- Node Type Indicators: Visual dots indicating the specific node type.
- Highlighting: An animated pulse effect is used for highlighted nodes.
- Layout: Uses a consistent 8px grid system for spacing and padding.