search

Netflix / flamescope

FlameScope is a visualization tool for exploring different time ranges as Flame Graphs.
Apache License 2.0
3.02k stars 169 forks source link

feat: scrollable and centered heatmap #59

Closed iori-yja closed 6 years ago

iori-yja commented 6 years ago

When the heatmap is wider than window size, the heatmap is horizontally scrollable. If not, it is centered.

spiermar commented 6 years ago

I like the solution of scrolling just the heatmap, so we don't have to reduce the size. @brendangregg, any thoughts? This change basically adds a horizontal scrollbar to the heatmap (but just the heatmap, not the window), so we don't have to reduce the size when the profile is longer (120s+).

Not a big fan of the overriding the default legend with a width: 0 and rewriting the same function here. This would probably be better handled by a change in the plugin to add this as an option. Created https://github.com/spiermar/d3-heatmap2/issues/31 to track it.

iori-yja commented 6 years ago

I love https://github.com/spiermar/d3-heatmap2/issues/31. Having draw-legend-on option in d3-heatmap is a good idea and I once thought to make a similar issue. I did this hack just for my own purpose.

brendangregg commented 6 years ago

I'm happy with this, thanks. I noticed that the Google Chrome browser already gives me a horizontal scrollbar, however, Firefox does not (which this PR fixes).

spiermar commented 6 years ago

I love spiermar/d3-heatmap2#31. Having draw-legend-on option in d3-heatmap is a good idea and I once thought to make a similar issue. I did this hack just for my own purpose.

I'm open to pull requests on https://github.com/spiermar/d3-heatmap2/issues/31, or I'll try to implement it this week myself, than you could try to use the new feature instead. Up to you.

spiermar commented 6 years ago

@iori-yja can you try master of d3-heatmap2? The last 2 commits in the repo should take care of rendering the legend outside the main SVG. Basically is just creating a new div and setting a property in the script.

The main example covers the usage.

https://github.com/spiermar/d3-heatmap2/blob/master/examples/index.html#L157

Let me know if you have any questions. If it works, let me know if you have any issues changing the PR to take advantage of that.

iori-yja commented 6 years ago

Thank you! I have updated the branch to make it work fine. Could you publish the newer version of d3-heatmap2 before merging it to keep everyone able to build flamescope?

iori-yja commented 6 years ago

Thank you! I've updated with w = 316px, h = 80px.

spiermar commented 6 years ago

@iori-yja merged. Thank you!