feat(partition): drilldown by monfera · Pull Request #995 · elastic/elastic-charts

monfera · 2021-01-28T21:18:33Z

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 · 2021-01-28T21:25:04Z

src/state/reducers/interactions.ts

        },
      };
    case ON_MOUSE_DOWN:
+      const layerValues: LayerValue[] = getPickedShapesLayerValues(globalState)[0];


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.

src/state/chart_state.ts

codecov-io · 2021-01-28T21:50:12Z

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.

src/chart_types/partition_chart/layout/utils/group_by_rollup.ts

nickofthyme

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

src/chart_types/partition_chart/state/selectors/tree.ts

src/chart_types/partition_chart/layout/utils/group_by_rollup.ts

Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>

# Conflicts: # api/charts.api.md

monfera · 2021-02-03T18:39:02Z

jenkins retest this please

# Conflicts: # api/charts.api.md # src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts # src/chart_types/partition_chart/state/selectors/tree.ts

…n reducer

monfera · 2021-02-06T12:40:38Z

@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

src/chart_types/partition_chart/layout/types/config_types.ts

src/state/chart_state.ts

src/state/reducers/interactions.ts

# Conflicts: # src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts # src/chart_types/partition_chart/state/selectors/tree.ts

markov00

Good to merge for me!

markov00 · 2021-02-10T09:54:47Z

src/chart_types/partition_chart/layout/types/config_types.ts

 }

 export interface Config extends StaticConfig {
+  /** @alpha */


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

# [24.6.0](v24.5.1...v24.6.0) (2021-02-15) ### Bug Fixes * **legend:** width with scroll bar ([#1019](#1019)) ([45bd0d5](45bd0d5)) ### Features * sort values in actions by closest to cursor ([#1023](#1023)) ([e1da4e5](e1da4e5)) * **axis:** small multiples axis improvements ([#1004](#1004)) ([514466f](514466f)) * **partition:** drilldown ([#995](#995)) ([20bbdae](20bbdae))

markov00 · 2021-02-15T10:49:54Z

🎉 This PR is included in version 24.6.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

feat: partition drilldown

ea7404e

monfera added enhancement New feature or request discuss To be discussed wip work in progress :partition Partition/PieChart/Donut/Sunburst/Treemap chart related labels Jan 28, 2021

monfera requested review from markov00 and nickofthyme January 28, 2021 21:18

refactor: inlining getTree back into selector for comparability

19d0fb0

monfera commented Jan 28, 2021

View reviewed changes

fix: restored icicle

c7ef1e0

monfera commented Jan 28, 2021

View reviewed changes

src/state/chart_state.ts Show resolved Hide resolved

monfera commented Jan 28, 2021

View reviewed changes

src/chart_types/partition_chart/layout/utils/group_by_rollup.ts Show resolved Hide resolved

Merge branch 'master' into partition-drilldown

ce53bf3

nickofthyme reviewed Feb 1, 2021

View reviewed changes

src/chart_types/partition_chart/state/selectors/tree.ts Outdated Show resolved Hide resolved

src/chart_types/partition_chart/layout/utils/group_by_rollup.ts Outdated Show resolved Hide resolved

monfera and others added 4 commits February 1, 2021 20:45

Update src/chart_types/partition_chart/layout/utils/group_by_rollup.ts

c17ed23

Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>

Update src/chart_types/partition_chart/state/selectors/tree.ts

2c6abd6

Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>

Merge branch 'master' into partition-drilldown

ca796b1

chore: post merge fix

cf1b3e2

monfera requested a review from nickofthyme February 1, 2021 21:42

Base automatically changed from master to masterx February 2, 2021 23:10

Base automatically changed from masterx to master February 2, 2021 23:28

monfera added 2 commits February 3, 2021 17:56

Merge remote-tracking branch 'origin/master' into partition-drilldown

71c7271

# Conflicts: # api/charts.api.md

chore: api post merge update

ab5b225

monfera removed the wip work in progress label Feb 3, 2021

monfera added 3 commits February 6, 2021 12:56

Merge remote-tracking branch 'origin/master' into partition-drilldown

5ead490

# Conflicts: # api/charts.api.md # src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts # src/chart_types/partition_chart/state/selectors/tree.ts

chore: api doc line number update

7137cd0

refactor: decouple directly chart dependent logic from the interactio…

7e32a70

…n reducer

markov00 reviewed Feb 8, 2021

View reviewed changes

src/chart_types/partition_chart/layout/types/config_types.ts Outdated Show resolved Hide resolved

src/state/chart_state.ts Show resolved Hide resolved

src/state/reducers/interactions.ts Show resolved Hide resolved

Merge remote-tracking branch 'origin/master' into partition-drilldown

e02960a

# Conflicts: # src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts # src/chart_types/partition_chart/state/selectors/tree.ts

monfera requested a review from markov00 February 10, 2021 09:48

markov00 approved these changes Feb 10, 2021

View reviewed changes

monfera merged commit 20bbdae into elastic:master Feb 10, 2021

markov00 added the released Issue released publicly label Feb 15, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(partition): drilldown#995

feat(partition): drilldown#995
monfera merged 14 commits intoelastic:masterfrom
monfera:partition-drilldown

monfera commented Jan 28, 2021 •

edited

Loading

Uh oh!

monfera Jan 28, 2021 •

edited

Loading

Uh oh!

Uh oh!

codecov-io commented Jan 28, 2021 •

edited

Loading

Uh oh!

Uh oh!

nickofthyme left a comment

Uh oh!

Uh oh!

Uh oh!

monfera commented Feb 3, 2021

Uh oh!

monfera commented Feb 6, 2021 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

markov00 left a comment

Uh oh!

markov00 Feb 10, 2021

Uh oh!

markov00 commented Feb 15, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

monfera commented Jan 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

monfera Jan 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov-io commented Jan 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

nickofthyme left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

monfera commented Feb 3, 2021

Uh oh!

monfera commented Feb 6, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

markov00 Feb 10, 2021

Choose a reason for hiding this comment

Uh oh!

markov00 commented Feb 15, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

monfera commented Jan 28, 2021 •

edited

Loading

monfera Jan 28, 2021 •

edited

Loading

codecov-io commented Jan 28, 2021 •

edited

Loading

monfera commented Feb 6, 2021 •

edited

Loading