Expose xy chart types component

[shahzad31]

Summary

We are using these chart type icons in exploratory view so exposing them from lens.

Testing

This shouldn't have any impact on lens

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[flash1293]

Before going into the details, I'm not convinced this component should live in the lens plugin. It seems pretty opinionated in how it looks and works and it's also quite specific for its intended use case.

I see the need though, but so far we aren't directly exposing UI (except for the embeddable itself of course) and I want to keep the lines of ownership as clear as possible.

What about exposing the xy visualizationTypes array instead and exploratory view can own the logic of building the UI out of it? As it's a fairly small piece of code I think it would be OK to export it statically in the initial bundle (an alternative would be exposing it via the contract as a lazy-loaded observable)

[shahzad31]

Before going into the details, I'm not convinced this component should live in the lens plugin. It seems pretty opinionated in how it looks and works and it's also quite specific for its intended use case.

I see the need though, but so far we aren't directly exposing UI (except for the embeddable itself of course) and I want to keep the lines of ownership as clear as possible.

What about exposing the xy visualizationTypes array instead and exploratory view can own the logic of building the UI out of it? As it's a fairly small piece of code I think it would be OK to export it statically in the initial bundle (an alternative would be exposing it via the contract as a lazy-loaded observable)

I do agree with the concerns, exposing visualizationTypes directly will add it to the page load bundle size(which i want to avoid), i guess maybe i can expose it as an Icon Item wrapping it around. In that case whatever chart type is being passed to that it just get relevant icon from visualizationTypes and render that.

[flash1293]

Not 100% sure what solution you prefer - I had something like this in mind:

interface LensStart {
  EmbeddableComponent: React.ComponentType<EmbeddableComponentProps>;
  navigateToPrefilledEditor: (input: LensEmbeddableInput) => void;
  canUseEditor: () => boolean;
  getXyVisTypes: () => Promise<VisualizationType[]>

[flash1293]

As discussed offline, a statically exported icon component which lazily loads icons if necessary is also a good approach

[shahzad31]

@flash1293 i ended up adopting your approach +1

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: e3e87ea
• Storybooks Preview

Metrics [docs]

Async chunks

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

id	before	after	diff
lens	893.7KB	919.2KB	+25.6KB

Page load bundle

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

id	before	after	diff
lens	33.3KB	33.5KB	+167.0B

Unknown metric groups

async chunk count

id	before	after	diff
lens	1	2	+1

History

• 💔 Build #114896 failed bb267f7
• 💔 Build #114813 failed 4b10995
• 💚 Build #114826 succeeded cf8d155

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

[flash1293]

Changes LGTM, code review only.

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 95275 or prevent reminders by adding the backport:skip label.

[kibanamachine]

💚 Backport successful

✅ 7.x / #95664

This backport PR will be merged automatically after passing CI.