Embed Kibana visualizations in Canvas

[kibanamachine]

Original comment by @w33ble:

It would be great if Canvas had a way to work with core Kibana visualizations.

Rendering Canvas inside of Dashboard might be a fair amount of work, but rendering Kibana visualizations inside of Canvas should be pretty simple. It's likely we'll want both.

---

Editor's Note: It's actually the other way around, getting Canvas elements into Kibana is pretty easy since there's no wrapping framework dependencies. Kibana visualizations seem pretty closely tied to Angular and with the switch away from Angular I'm hesitant to start importing Angular services.

The key benefit of this is an immediate win for our commercial reporting feature.

[kibanamachine]

Original comment by @thomasneirynck:

We just introduced the visualize/loader, which allows you to embed a visaulizations into a regular DOM-node (cc @ppisljar).

https://github.com/thomasneirynck/kibana/blob/75dcbf123c0850a3cee5ebd7ee5f817d9f8faa4a/src/ui/public/visualize/loader.js#L3-L3

Roughly, usage would look like:
visualizeLoader.embedVisualizationWithId(domNode, idOfVisualization, parameters)

The only niggle is that it requires clients to use the Private module loader to create an instance, much like any other angular-service in Kibana.

Is there a way you can get access to the Private module loader from kibana-canvas? The x-pack plugins are able to grab a reference to it one way or the other (e.g. with hacks, or through the ui/routes module). But other ideas welcome.

In the meantime, we're working on tidying this up, addressing some memory leaks and interaction-issues #14404.

[kibanamachine]

Original comment by @ppisljar:

LINK REDACTED
, Private there and save the reference so you can access it later ...

[kibanamachine]

Original comment by @w33ble:

The only niggle is that it requires clients to use the Private module loader to create an instance, much like any other angular-service in Kibana.

Is there a way you can get access to the Private module loader from kibana-canvas?

Peter's right, we just need to shove an instance of the module into the React runtime when things are initialized.

I'm curious though, does this service need to be tied to Angular? I see it's using the savedVisualizations module, but I have no idea how hard it would be to decouple that code from Angular. I assume it uses other Angular services, which use even more Angular services, and would end up being kind of a rabbit hole project, but one that would have to happen eventually anyway...

[kibanamachine]

Original comment by @thomasneirynck:

@w33ble

there's been some updates. #14404 (comment). You can use getVisualizeLoader() function to get an instance of the loader as well, so you wouldn't have to keep a reference to Private. @ppisljar tried out this approach in Berlin, and that seemed to work.

[kibanamachine]

Original comment by @timroes:

I just wanted to confirm, that even with visualization trying to use the canvas pipeline in the long run, the visualize loader (documentation) is still the right way to go for embedding a visualization right now in Canvas.

This function will also keep working even if we switch to using the pipeline for all visualizations.

Whether or not we might want to build some deeper integration later - like loading the actual pipeline from the saved object and make this editable in Canvas - is something that I think can be discussed at a later point in time, since that would add a couple of more requirements:

• We need to actually be finished with switching to the pipeline.
• We would need canvas editors for all the functions written specifically for Kibana (or at least have a capability to use the vis editor in Canvas somehow).
• You would need to rebuild the logic of applying filters/queries from our saved objects to the pipeline (which is currently what the loader would all do for you).

[alexfrancoeur]

It'd be nice to start thinking about our approach here. A couple of options I see on the table are importing as a data source only, importing as a data source and building as a canvas visualization where applicable and importing as an embeddable with support for Canvas filters. There are probably more I'm not thinking of at the moment but we really need to think through what the UX will be here. If it's an embeddable, do we link out to the config so users can easily adjust their previously configured visualization or Map?

@shaunmcgough with 7.1 FF approaching and 7.2 on deck, we may want to start thinking through what's technically feasible and what that UX will look like.

[shaunmcgough]

A few open issues on this, and a few things tied together. Would be nice to hit a couple at once, and there is at least one tagged to 7.2.

@alexfrancoeur

[ryankeairns]

I'm ready to begin tackling the UX options, but some more discussion seems necessary first. We had a lengthy discussion months ago about possible technical solutions and phases, which I think informed Peter's current PR but was also before much of Stacy's work had been completed.

Suffice it all to say, it would be helpful to start shaping the first couple of iterations and consider a UX that can handle not only Visualizations but also Maps, etc., and to do so using a pattern that could be used elsewhere in Kibana (e.g. adding Canvas objects to Dashboards).

[shaunmcgough]

Perhaps we could start by adding them as an element in the current add element modal? I suppose other portions of Kibana could use the actions of an embeddable to do something similar. What do you think is the easiest way to get these in the current UI constructs, or perhaps you are thinking of a new UI as well?

@ryankeairns

[ryankeairns]

Yep, my assumption is we do something simple for v1 (add to modal), but that there might be a more global Kibana solution (UX) at some point.

We also need to see how the actions work in Canvas. I presume they’ll display just as Stacy demonstrated, allowing you to click an icon to edit the object in its originating app.

That said, we’ve yet to nail down whether we’re displaying a reference to the object or copying it in. I presume the former but the discussion was not fully resolved last I heard it discussed.

[timductive]

Closed by #39839

[Alizeh-Asim]

Can someone briefly explain how we can import Kibana canvas elements to Kibana dashboard?

[timroes]

@Alizeh-Asim You cannot embed canvas elements into dashboards right now. This was also not part of this issue. This issue is the other way around, of embedding elements from a dashboard into a canvas workpad. For the other way around please follow #33034