Span Timeline Demo
Chain Tree Demo
Implementation Highlights
Read the implementation write-up Detailed write-up (Chinese) covering data modeling, TreeGridBase abstraction, highlight navigation, and styling protocol decisions.
Open product documentation Related online product documentation (Chinese), useful for mapping the demo to production scenarios.
Tree Rendering
Native details + summary is used to render the collapsible tree structure.
This avoids custom expand-state machinery while preserving semantic behavior.
Hierarchy Connectors
Vertical connectors are drawn with background linear-gradient and clipped with white background masking.
Horizontal dashes are rendered by pseudo-elements with repeating-linear-gradient.
Duration Bar Layout
The duration bar computes left/right margin with CSS variables, then fills background and label text.
When the left offset exceeds 80%, the label writing direction changes to keep the tail readable.
Generic Reuse & Type Inference
Generic constraints and higher-order composition are used to reuse styles and rendering logic.
Type inference keeps column definitions and node data contracts aligned with less duplication.
Sticky Columns
Column definitions declare left/right stickiness, and runtime computes cumulative sticky offsets.
Cells use position: sticky with left/right CSS vars to stay fixed during horizontal scrolling.
Highlight & Navigation
Match state is written to data-* and styled via attribute selector priority.
Tag/keyword/error union highlighting supports next/prev navigation on visible matches.
Click handling is delegated at the component root and resolved by dataset to reduce listener and closure count.
Style Priority Strategy
Native CSS mechanisms are used instead of heavy inline styles or manual className toggling.
Inheritance and priority become clearer, making highlight/error/active states easier to coordinate.
Animation & Reuse
Collapse animation is applied on ::details-content with interpolate-size for height transition.
A generic TreeGridBase<T> enables shared rendering architecture for timeline and chain tree demos.
Dual Demo Validation
This page provides two demos to verify the same shared component base side by side.
In production, the component is used in five places across three core pages.