d3-flame-graph icon indicating copy to clipboard operation
d3-flame-graph copied to clipboard

Efficiently update single nodes or node attributes

Open LinqLover opened this issue 10 months ago • 1 comments

Is your feature request related to a problem? Please describe. I am building an interactive application that contains a flamegraph and based on the selection of other objects on the screen, I highlight the corresponding nodes in the flamegraph. At the moment, this requires me to call update() on the flamegraph to make it recolor the nodes. Unfortunately, this is pretty slow because all nodes are built from scratch, the SVG is updated, and so on. For my particular use case, it would not even be required to recolor all nodes but only two (the old selection and the new one). Analogously to changing the node's color, I also change their labels occasionally.

Describe the solution you'd like A way for efficient updates of single nodes or node attributes. Personally, I only need this for colors and optionally labels, but maybe such a mechanism would be interesting for other attributes as well. Some possible interfaces for that could look like this:

flamegraph.updateInPlace([node1, node2])
flamegraph.updateInPlace(['color'])
flamegraph.updateInPlace([node1, node2], ['color', 'label'])

Alternatively, I would also be open to a reactive approach, e.g.:

node1.emit('color')
node2.emit('label')

But I assume that such a programming style is not typical for d3.js.

Describe alternatives you've considered At the moment I always do a full update and this reduces my frame rate to <10 for small datasets. I considered speaking directly to the nodes in question but a) this feels like a terrible hack and b) d3-flame-graph apparently does not expose the actual data so I would have to search them (or build an index of them) from the SVG tree.

Additional context None, just thanks for this useful package! :-)

LinqLover avatar Aug 24 '23 19:08 LinqLover