RFR: 7451: Add heat map view

Alex Ciminian duke at openjdk.java.net
Fri Nov 26 18:18:22 UTC 2021


This PR adds a new plugin (`flightrecorder.heatmap`) which renders a visualisation similar to the one in [this Observable notebook](https://observablehq.com/@cimi/jfr-heatmap).

The code is simpler than both the flame view and the graph view, because of less rendering options and less dependencies - the heatmap only requires d3 and currently does not support any user configuration.

Each cell represents 100 milliseconds from the recording. We decided to automatically adjust the size of the cell so that the entire heatmap fits inside the window. This is different from the observable notebook which ensured each row represented 6s (i.e. it had a fixed number of 60 columns). The auto-sizing seems to work well with both small and large recordings, although we lose consistency when we resize the window and some periodic patterns are no longer visible when we vary the number of columns.

I still have some TODOs to take care of (see below) but the code is ready for a first-pass review �� 

- [ ] Add/fix copyright notices
- [ ] Ensure axes are always visible (when cells are very large sometimes the axes get cut off)
- [ ] Ensure minimum cell size - now the heatmap disappears if the window is too small (i.e. computed cell size is < 1px).
- [ ] Add a title to the chart? ('Showing `x` events collected between `tStart` and `tEnd`'?)
- [ ] Display a colour legend (like we have in the notebook) and some indicator that a cell represents 100ms
- [ ] Display 'no-data' message or banner when the selection is empty
- [ ] Display error message when rendering the heatmap fails? (this should be unlikely)

![Screenshot 2021-11-26 at 18 13 34](https://user-images.githubusercontent.com/348973/143618682-335d5877-8070-4a42-a8dc-5d4753a67667.png)

![Screenshot 2021-11-26 at 18 13 54](https://user-images.githubusercontent.com/348973/143618710-002acf31-00ea-41f4-908b-631e33eb7360.png)

-------------

Commit messages:
 - Extract heatmap javascript to a separate file to avoid escaping %
 - Remove debug logging from heatmap javascript
 - Make heatmap cell size auto-adjust depending on window size
 - Update heatmap icon
 - Rename references to d3 in heatmap to v6
 - Cleanup HeatmapView, remove unused code copied from GraphView
 - Update icon for heatmap plugin
 - Support multiple attributes for extracting the event time from a JFR event
 - Add logging helper in heatmap JS visualisation
 - Resize heatmap when parent window is resized
 - ... and 2 more: https://git.openjdk.java.net/jmc/compare/c7250786...3c71b4b2

Changes: https://git.openjdk.java.net/jmc/pull/337/files
 Webrev: https://webrevs.openjdk.java.net/?repo=jmc&pr=337&range=00
  Issue: https://bugs.openjdk.java.net/browse/JMC-7451
  Stats: 635 lines in 15 files changed: 607 ins; 0 del; 28 mod
  Patch: https://git.openjdk.java.net/jmc/pull/337.diff
  Fetch: git fetch https://git.openjdk.java.net/jmc pull/337/head:pull/337

PR: https://git.openjdk.java.net/jmc/pull/337


More information about the jmc-dev mailing list