SVG Panel display problem using JQuery toggle function in BaseSplunkView

[mathu]

Hi

I've implemented a javascript (Simple XML) extension to toggle dashboard panels. The script hides some panels on page load and toggles them on a mouse click event. That helps me to keep my dashboards clean.

I use JQuery toggle() or slideToggle() functions inside an extended BaseSplunkView class.

Ths script works for panels that do not relate to SVG dashboard elements. For example it works for Single Value or HTML panels, but it does not work for chart panels.

The problem looks obvious:
When my javascript class is loaded, I call component.$el.toggle() to hide the panel. But at this time, the SVG elements are not yet painted and therefore not visible in the HTML DOM.
When I call toggle() again in case of a click event, the panel shows up, but it is empty.

When I resize the panel (or browser window) a little bit, the chart shows up immediately. That means the SVG elements are now here, but initially painted on an invisible HTML element.

So how can I tell Splunk in my javascript to refresh the SVG container after toggling the panel?

Kind regards
Mathias

[mathu · Accepted solution]

.. after hours of debugging, the solution is that simple.

Calling the resize function on the panel element after toggling it, solves my problem.

component.$el.toggle();
component.$el.resize();