Use canvas instead of SVG for trace mini-map #61

tiffon · 2017-08-21T11:59:16Z

To improve performance on traces with many spans, use the canvas API to render the trace mini-map instead of SVG elements.

- Render span graph via canvas instead of SVG - Zoom range changed to [0, 1], e.g. time and trace agnostic allowed removal of some utils - "Timeline" -> 0ms - Use props instead of context to provide span graph with viewing range - Move all span graph related classes into same folder - Misc CSS cleanup

* WIP trace mini-map via canvas * Fix #61 render span graph as canvas instead of SVG - Render span graph via canvas instead of SVG - Zoom range changed to [0, 1], e.g. time and trace agnostic allowed removal of some utils - "Timeline" -> 0ms - Use props instead of context to provide span graph with viewing range - Move all span graph related classes into same folder - Misc CSS cleanup * Use flow instead of prop types (PR feedback)

NeoCN · 2017-09-19T02:35:36Z

@tiffon tested on Google Chrome 61.0.3163.91 and Apple Safari 10.1.2 (12603.3.8), got the same result like the following image, the trace mini-map is blur

tiffon · 2017-09-19T04:05:13Z

@NeoCN Thanks for reporting this. I'll work on this under a separate ticket. Will keep you posted. On Sep 18, 2017 10:36 PM, "NeoCN" <notifications@github.com> wrote: @tiffon <https://github.com/tiffon> I got this render result after merge this [image: jietu20170919-101712] <https://user-images.githubusercontent.com/1180502/30573053-2fb827e0-9cb7-11e7-972d-f71dda714ede.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/uber/jaeger-ui/issues/61#issuecomment-330411067>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACMpUSsaGHUJ5JyPLkskuheT5DWgYrXGks5sjyiogaJpZM4O9QYR> .

tiffon · 2017-09-21T00:30:39Z

@NeoCN I created #76 to track this. Thanks for reporting!

* WIP trace mini-map via canvas * Fix jaegertracing#61 render span graph as canvas instead of SVG - Render span graph via canvas instead of SVG - Zoom range changed to [0, 1], e.g. time and trace agnostic allowed removal of some utils - "Timeline" -> 0ms - Use props instead of context to provide span graph with viewing range - Move all span graph related classes into same folder - Misc CSS cleanup * Use flow instead of prop types (PR feedback) Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>

tiffon added the enhancement label Aug 21, 2017

tiffon added this to the Jaeger can display very large traces in the UI milestone Aug 21, 2017

tiffon mentioned this issue Aug 30, 2017

Virtualized scrolling for trace detail view #68

Merged

3 tasks

tiffon mentioned this issue Sep 11, 2017

Use canvas instead of SVG for trace mini-map #72

Merged

tiffon closed this as completed in #72 Sep 17, 2017

tiffon mentioned this issue Sep 21, 2017

Trace mini-map is blurry when there are only a few spans #76

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use canvas instead of SVG for trace mini-map #61

Use canvas instead of SVG for trace mini-map #61

tiffon commented Aug 21, 2017

NeoCN commented Sep 19, 2017 •

edited

Loading

tiffon commented Sep 19, 2017 via email

tiffon commented Sep 21, 2017

Use canvas instead of SVG for trace mini-map #61

Use canvas instead of SVG for trace mini-map #61

Comments

tiffon commented Aug 21, 2017

NeoCN commented Sep 19, 2017 • edited Loading

tiffon commented Sep 19, 2017 via email

tiffon commented Sep 21, 2017

NeoCN commented Sep 19, 2017 •

edited

Loading