feat(partition): drilldown

[monfera]

Summary

Adds optional drilldown inside flame and icicle charts, an almost universal interaction for data exploration in observability and monitoring including APM, where the numerous layers and often, granular breakdown, may otherwise hide interesting details.

It not only magnifies the ever current interesting part during exploration, but also provides the space for in-rectangle labels. Otherwise, such charts are largely unreadable, due to the large number of items, and the legend's inherent difficulty in coping with it.

It's also an example for direct manipulation, where some change is effected by directly interacting with the components or shapes in the chart, rather than via external configuration. So it fits into the family of tooltip, shape and legend hover highlight.

Checklist

Delete any items that are not applicable to this PR.

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• This was checked for cross-browser compatibility
• Proper documentation or storybook story was added for features that require explanation or tutorials

It can be enhanced with

• animation (transitioning)
• alternative strategies similar to, or piggybacking on the legend options, ie. not just expand a node, but expand all identically named nodes (usually, the same monitored software function) in the same layer or in all layers
• elimination of specific names, or values (or value ranges) eg. via context menu, as with "Exclude..." in common EDA tools
• options for eg. hiding the 100% bottom layers, and if so, maybe initially showing a determinate number of layers eg. 10
• better text formatting
• reset options, eg. a transient reset button for when the user eliminated some branches
• an indicator that tells the user that it's not currently showing all the data (maybe combined with the reset button)
• maybe showing the currently selected path eg. above the legend

[monfera]

I'm not sure this is the best approach, though

• it's a very compact addition
• fully reuses the existing data flow subgraph (DRY)
• doesn't require anti-patterns(?) such as firing an action (eg. SET_DRILLDOWN) from within another action (ON_MOUSE_DOWN), or redux "middleware" and error prone thunks etc.
• doesn't require asynchrony, timeout or some other fragile way to update
• doesn't interfere with anything else linked to ON_MOUSE_DOWN, eg. the callbacks registered for shape selections go through the same code path as before

Disadvantages:

• it still ties the gesture to the more semantic action; we should eventually be flexible about how to trigger drilldown; even an API callback could eventually do it
• it broadens the reducer from state.interactions to the full global state so it feels a bit more coupled

It seems possible to currently solve this via selectors, ie. drilldown wouldn't be a state property; it'd be a selector. But

• it'd have no information about the last action, because selectors receive only state, not the action
• it'd not be possible to access the previous drilldown state: this is not currently done, but it's needed by tweening, which is very frequently done with this type of charts—while, with the current reducer action, it's trivial to retain the previous state:

      return {
        ...state,
        drilldown: layerValues ? layerValues[layerValues.length - 1].path.map((n) => n.value) : [],
        previousDrilldown: state.drilldown,
        ...

I ran into this tradeoff with the Kibana Canvas layout engine, which is rich in inherently stateful direct manipulation interactions (stuff being dragged/resized, snapping etc.) and used an approach there that worked out quite well; it uses a global inert state like our redux, but has some differences: it solved the issue of one action arising from some other, lower level actions.

[codecov-io]

Codecov Report

Merging #995 (7e32a70) into master (514466f) will increase coverage by 0.00%.
The diff coverage is 96.42%.

@@           Coverage Diff            @@
##           master     #995    +/-   ##
========================================
  Coverage   72.13%   72.14%            
========================================
  Files         355      371    +16     
  Lines       11160    10790   -370     
  Branches     2449     2225   -224     
========================================
- Hits         8050     7784   -266     
+ Misses       3095     2905   -190     
- Partials       15      101    +86     

Flag	Coverage Δ
unittests	?

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/chart_types/partition_chart/layout/config.ts	53.33% <ø> (-1.22%)	⬇️
...types/partition_chart/layout/types/config_types.ts	100.00% <ø> (ø)
...tion_chart/layout/viewmodel/hierarchy_of_arrays.ts	100.00% <ø> (ø)
src/state/chart_state.ts	89.83% <ø> (+0.08%)	⬆️
...es/partition_chart/layout/utils/group_by_rollup.ts	86.86% <92.85%> (-1.02%)	⬇️
...hart_types/partition_chart/state/selectors/tree.ts	95.83% <100.00%> (+0.83%)	⬆️
src/state/reducers/interactions.ts	75.51% <100.00%> (-0.86%)	⬇️
src/state/selectors/get_legend_items_labels.ts	50.00% <0.00%> (-50.00%)	⬇️
src/utils/dimensions.ts	71.42% <0.00%> (-28.58%)	⬇️
src/components/no_results.tsx	50.00% <0.00%> (-25.00%)	⬇️
... and 211 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 514466f...7e32a70. Read the comment docs.

[nickofthyme]

Code changes LGTM, still need to play with it some later.

[monfera]

jenkins retest this please

[monfera]

@markov00 7e32a70 addresses your legit concern that the interaction reducer shouldn't directly depend on chart type specific functions or selectors, it's now extracted it out, making distant future extensibility easier

[markov00]

Good to merge for me!

[markov00]

Moving things back to an alpha version after exporting this as public is not a good practice (we should mark this as breaking change) but I don't think anyone is using that config at the moment so we leave with it now

[markov00]

🎉 This PR is included in version 24.6.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀