Change sample time line to vertical layout

[pengbins]

Description

This PR try to imporve the readability of sample timeline in filereader demo. The horizontal layout for displaying Decoding and Composition mapping was too compact and difficult to interpret. The changes introduce a vertical layout and add hover highlighting to clearly visualize the correspondence between Decoding and Composition sample mappings.

Changes Made

1. Layout Restructuring

• Changed from a compact horizontal arrangement to a clear vertical stacked layout

• Improved visual separation and alignment between Decoding and Composition timelines

2. Interactive Enhancement

• Added mouse hover highlighting that visually links corresponding Decoding and Composition pair.

Benefits

✅ Enhanced Readability: Vertical layout provides more space and reduces visual clutter

✅ Better Mapping Visualization: Hover highlighting instantly shows Decoding ↔ Composition relationships

✅ Improved User Experience: Intuitive interaction helps users understand sample mappings without guesswork

✅ Maintains All Functionality: All existing features remain fully functional

Visual Comparison

• Before: Compact horizontal layout making it hard to trace mappings

• After: Clean vertical layout with hover highlighting for clear relationship visualization

• demo

[rbouqueau]

Looks better, thanks for your contribution. I'll let @DenizUgur validate the technical side and merge.