[WIP] Enhance TraceTimeline component

[tacigar]

Summary

• Use TypeScript for TraceTimeline components
• Simplify tree-generation algorithm.
• Use normal HTML tags instead of using SVG for trace tree graph.
• Resolve some known issues.

Screenshots

Before

After

Description

Simplify tree-generation algorithm

The algorithm for generating trees has been complex. So I have greatly simplified it and made it more readable and testable.

Use normal HTML tags instead of using SVG for trace tree graph

Trace trees were drawn using SVG. This was for rendering efficiency. But compared to the regular DOM, styling with SVG is a bit more difficult, and some styling problem like #2948 occurs. So, I used regular HTML tags instead of SVG in this PR. This was an issue that had already been registered in #2997 .

• fix #2948
• fix #2997
• fix #3118

However, the rendering of regular HTML tags is slower than SVG, and if you have to draw a lot of spans, the browser will get stuck. So I used a technique called "virtualization" to avoid the browser getting stuck for drawing.

Resolve some known issues.

fix #2509

Now annotations are marked (white line).

and... error spans will be marked with an exclamation mark.

fix #2906

Probably the shared trace can be drawn normally.

[tacigar]

Combining #3349 and #3348 with this PR change, trace page will look like this: