Render visualize in a Kibana plugin

Elastic Stack Kibana
1

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

2

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

3

Hi @flash1293,

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

4

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?

5

I'm using v7.6.2

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

Thanks in advance,
Nicola

6

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..

7

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

8

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.