[Lens] Rank top values by custom metric

[mbondyra]

Summary

Fixes #133991.

• added new orderBy option: custom
• added new param to terms column : orderAgg
• refactored ReferenceEditor to also be able to edit inline columns, not just referenced ones
• refactored metrics paramEditor to accept also inlined columns and not referenced by columnId inside layer
  Extra fixes:
• Fix: ___records___ displayed as Records when moving from count to another operation type

• Fix: array last value option should impossible to select when last value is a referenced operation.

• Fix: correct all the dimension panel elements to occupy the full width for mobile, eg this one before fix:

Checklist

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

[mbondyra]

@elasticmachine merge upstream

[stratoula]

This works great and is an amazing addition. I have only found one bug.

I have created a chart like this

I am using a custom rank by count. When I click on the chart to create a filter, the filter is not created and I see the following error on the console

[flash1293]

Reviewed the changes since last time and this still looks good to me, thanks! ABout the bug @stratoula found - it's probably related to the redux toolkit change detection thingy again beause in

kibana/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx

Line 281 in 3cd333c

orderAggColumn,

the redux managed object is passed directly into the agg config logic.

It's actually pretty cool it's catching this because it could cause weird behavior (saved object suddenly has another property schema). I wonder whether we can get typescript to flag these cases (maybe enforcing immutable types using a DeepReadonly style generic type for the state types), but it's definitely out of scope for this PR

[flash1293]

Actually I think it's happening somewhere else and it might be harder to fix in general... We put the data table into the redux store (activeData), which causes it to get frozen, but then we pass the same data table to the filter click handler which apparently tries to mutate it. I guess it should be fixed on the app services side - passed in agg params shouldn't get mutated, that's totally unexpected

[flash1293]

Deep cloning the params here makes it work:

kibana/src/plugins/data/public/actions/filters/create_filters_from_value_click.ts

Line 94 in a8095ce

[aggConfigParams as AggConfigSerialized]

[mbondyra]

@stratoula and @flash1293 thank you for finding the bug and for the investigation! I've fixed it with suggested solution, @stratoula please recheck when you have a moment :)

[stratoula]

Thanx Marta and Joe! Now it works fine! LGTM

[MichaelMarcialis]

Thanks for putting this together, @mbondyra! This looks great. I'm leaving you a handful of small comments/suggestions below. Assuming those get addressed, this looks good from my perspective. Approving now so I don't hold you up.

[MichaelMarcialis]

Again, I hadn't considered the "Percentile ranks value" input when putting together the mockups. I think we'll need to increase the min-width here in order to ensure the prepended labels are the same width (or alternatively come up with a shorter label than "Percentile ranks value").

Suggested change

	min-width: 96px;
	min-width: 144px;

[mbondyra]

That unfortunately has the other effect when we don't use percentile ranks - it takes too much space...

[MichaelMarcialis]

Yeah. What about a shorter name for "Percentile ranks value"? For example, would simply "Percentile rank" work? Then we could adjust the label min-width to be equal to the largest of the labels.

[Dosant]

Thanks for the agg config change! lgtm!

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: eb88c25
• Storybooks Preview
• Webpack Bundle Analyzer

Failed CI Steps

• FTR Configs #36

Test Failures

• [job] [logs] FTR Configs #36 / endpoint When on the Endpoint Policy Details Page "after all" hook in "When on the Endpoint Policy Details Page"
• [job] [logs] FTR Configs #36 / endpoint When on the Endpoint Policy Details Page "before all" hook in "When on the Endpoint Policy Details Page"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
lens	917	923	+6

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
charts	78.6KB	78.6KB	+26.0B
expressionHeatmap	80.9KB	80.9KB	+26.0B
lens	1.2MB	1.2MB	+4.2KB
total			+4.2KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
data	418.7KB	418.7KB	+15.0B

History

• 💚 Build #55428 succeeded 33e0022
• 💚 Build #55172 succeeded c4931aa
• 💚 Build #55023 succeeded b136d25
• 💔 Build #54919 failed 3cd333c
• 💔 Build #54910 failed c238ac6
• 💛 Build #54867 was flaky b06b072

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream