Expand existing lens visualization / Create a new lens visualization

[LucasE]

Hello everyone,
I'm using Kibana 8.3.3

My objective is to take the Table from the DashBoard Lens visualization editor and create a new type of visualization called TableM by creating a plugin in Kibana.
This table will act exactly as the normal Table ( From the sort to how it can be edited in the editor ) however I want to add multiselection and action buttons to the table. ( See example to modify DataGrid to add action and multiselection : https://eui.elastic.co/pr_3350/#/tabular-content/data-grid-control-columns | Elastic UI )

I tried to follow some tutorial but all are outdated or lack some doc ( in my opinion ) ( Creating new Kibana visualizations and embedding them into your own plugin | Elastic Blog | Developing Visualizations | Kibana Guide [master] | Elastic | kibana/src/plugins/visualizations at main · elastic/kibana · GitHub )

EDIT : SKIP this part
So I tried on my own and copy past the code from kibana/src/plugins/vis_types/table into a folder in my plugin folder.
I changed all the exports to work and I changed almost all occurence of 'Table' to 'TableM'.
And I added in /components/table_vis_basic.tsx a context, code for the buttons, header cells leadingControlColumns etc.
However this code is to make a Data Table not a Lens table.
I tried looking for the code of 'enhanced table plugin' on github but they do not add a vis type to the lens editor just to the Aggregation Based vis.

So I think I finally found the code for the Lens Table at kibana/x-pack/plugins/lens/public/datatable_visualization.
However I don't know how to use this code to create my 'Lens TableM' with a multiselection and action buttons linked to the multiselection.

Moreover maybe there is no need to recreate a whole Lens Visualization and it's possible to add an option to the existing one to just add the multi selection and the action buttons.

If anyone can help me on this I would be really glad.
Thanks again.

[Marco_Liberati]

Hi @LucasE

you can start with running Kibana in dev mode with all examples with the command:

yarn start --run-examples

In the menu you can find a new entry Developer examples to click where you can find an example implementation of a new type of visualization in Lens:

Clicking on it will actually lead you to Lens with the new custom visualization configured.
The source code is available in x-pack/examples/third_party_vis_lens_example.

Another good example is the Region Map visualization built using the example above as foundation. You can find the code here: x-pack/plugins/maps/public/lens.

As for the datatable code, what's in x-pack/plugins/lens/public/datatable_visualization is actually Lens code to wrap the DataGrid component from EUI with some Lens/Kibana configuration.

[LucasE]

Thank you @Marco_Liberati for your answer.

I was able to create a plugin based on the third_party_vis_lens_example and add a visualization to lens.

However I would like to ask you where is situated the code for the Lens Table so I can do the same thing with the Lens Table that I did with the third_party_vis_lens_example. ( Copy paste, change some names and add new content )
But maybe the code for the Lens Table isn't as simple as the one for the example and won't fit in a plugin ?

Moreover I would like to ask if maybe there is no need to recreate a whole Lens Visualization and if it's possible to add an option to the existing one to just add the multi selection and the action buttons to the Lens Table ?

Thanks again.

[Marco_Liberati]

Unfortunately there's currently no way to extend existing visualizations features with a plugin-like API .
The current route is to replicate the Lens datatable visualization code and add the extra features.

I've created a new Feature request here for this use case you can track: [Lens] Provide a way to extends existing visualizations via a plugin-like API · Issue #154899 · elastic/kibana · GitHub

[LucasE]

Hello again @Marco_Liberati

I was able to create a new plugin using the code from the lens/public/datatable/visualization folder.
I aplied a lot of change and had to also copy some code from the Lens itself.

However now I have issue with the code itself to create the class XXXPlugin that implements Plugin.

The new Lens Visualization is registered and appear in the Lens Editor but I have an issue with :

• The editorFrame ( I, for now, got rid of it as if I understood it rigth, is initiliazed by the Lens plugin then distributed in the Lens Visu )
• The palette ( from ChartsPluginSetup ) wouldn't get imported and the getPalettes function was 'undefined'. ( I, for now, got rid of it and replaced it by a PaletteRegistry )
• My last issue is with the getType argument of the DatatableRenderer I have the 'TypeError: Cannot read properties of undefined (reading 'get')'. For this one I couldn't find a way to make it work or a simple patch. Something like : 'getType: core.getStartServices().then(([_, { data: dataStart }]) => dataStart.search.aggs.types.get)'

Would you minde helping me on this subject or redirect me to someone that could be able to help me further ?

Thanks in advance.

[Marco_Liberati]

Do you have some online repository with the code?

[LucasE]

Yes of course, here is the code I have.

GitHub - LucasEnard/datatablem

See my issues in the 'datatablem/plugin.ts at main · LucasEnard/datatablem · GitHub' file.

Thanks in advance.