Add flamegraph hierarchy visualisation

[mhansen]

Flame Graphs are popular in software performance profiling: https://queue.acm.org/detail.cfm?id=2927301

But they're generally useful for showing weighted hierarchical data on one screen.

It's like the 'sunburst' visualisation, but unrolled flat, so you can put the names of each node in the rectangle.

I'm having some trouble getting the lints to pass, because I'm calling getName, which isn't in the type definition for d3-flame-graph yet (I'm adding it here: https://github.com/spiermar/d3-flame-graph/pull/205).

I've tried silencing the error by:

• // @ts-ignore (svelte check complains about this)
• // svelte-ignore (does nothing?)
• (chart as any) (svelte check complains about this)
• casting to an interface (svelte check complains about this)
• 'reopening' the interface for 'augementation' to add a method (only works within a typescript module, that's over my head).

I'd appreciate some suggestions on how to deal with this. How do you silence a warning that you know is OK? :-)

Other problems:

• I'm using .data.data. which the type system doesn't seem aware of (and svelte-check fails on). I have to use .data.data for the code to work; this tells me maybe the type system is a little off reality? Not sure exactly how though, there's a lot of generics here.

[yagebu]

Hey, thank you for this PR :)

I quite like this kind of visualisation and since it's more compact than the sunburst charts I'm also happy to add another kind of chart for the same data. However, I'd like it to be implemented without any external libraries (except for d3 and Svelte) like the other charts. This shouldn't be too hard to do for the flamegraph, since it's basically the same as the sunburst chart, but instead of laying out the accounts as parts of a circle, they're just rectangles. Is that something you could implement? I'm also happy to try to give you some further guidance on how this could be implemented.

[mhansen]

I suppose I could give it a try. I probably won't have a lot of time for it though lol (just getting back to this after a busy year, haha). I'm guessing I could do something relatively straightforward, but not as featureful as d3-flame-graph. Doing the on-click animations might be a little tricky. Can I ask the rationale for avoiding the external library? I'm guessing you don't trust them not to break the API (fair enough).

Realistically I probably won't get to this any time soon (given past performance, lol)

[yagebu]

Can I ask the rationale for avoiding the external library?

The charts actually used some other libraries in the past. However, the amount of specific logic and configuration required to get them to behave for our specific requirements turned out to be more work than just building the charts ourselves (on top of d3, which has a great API and the right granularity as building blocks for our charts). Building the charts with d3 also allows us to use Svelte components to do the HTML rendering logic (and reactivity), not having to manually render charts three different ways. There were usually also some limitations that needed elaborate workarounds which would then easily break on API changes.

I'll close this PR for now - if you ever feel like continuing with this, please do :)