Render visualize in a Kibana plugin

[Nicolap (Nicola)]

Hello guys,

I'm writing a kibana plugin, and as requirements I should render some visualizations.

Using the code below I can see the visualize rendered correctly.

import { start as embeddables } from "plugins/embeddable_api/np_ready/public/legacy";
...
...
      const visParams = {
        timeRange: { from: "now-1M", to: "now", mode: "quick" },
        filters: [],
        query: {},
      };

      let factory;
      if (!factory) {
        factory = embeddables.getEmbeddableFactory("visualization");
      }

      const visHandler = await factory.createFromSavedObject(
        visId,
        visParams
      );

      visHandler.render(this.node)

The main problem is after the render method. After it, I can notice a refresh of the webpage that makes me changes the browser url (to the base url of plugin), whitout changing the current view.

Does anyone know what the problem might be?

Regards,
Nicola

[flash1293 (Joe Reuter)]

What visualization are you trying to render? Could you share the saved object?

[Nicolap (Nicola)]

Hi @flash1293,

the problem occurs with any visualizations (vega, classic pie chart etc etc..)

[flash1293 (Joe Reuter)]

I tested this with a dummy plugin and can't reproduce the problem. It's likely related to the rest of your plugin. Could you share it on Github or other means so it's possible to reproduce the issue?

Also, what version of Kibana are you targetting?

[Nicolap (Nicola)]

I'm using v7.6.2

Unfortunately, I can't share on GitHub the code
Instead, could you please share your dummy plugin ?

Thanks in advance,
Nicola

[Nicolap (Nicola)]

Maybe I found the source problem...
Inside the plugin I used react-router-dom for routing. In the moment I want to render visualizations I open a new view using useHistory with:

import { useHistory } from "react-router-dom";
import chrome from "ui/chrome";
...
  let history = useHistory();
  history.push(chrome.addBasePath(path));
....

If I apply the url in the browser manually, all is fine, I don't see any refresh.
If I go in that url by code, I see the refresh.

It seems to be a problem related to react-router-dom..

[flash1293 (Joe Reuter)]

Good catch. In my dummy plugin I didn't use react-router-dom.