Strange rendering SVG elements in SplitPanel components

I have problem with rendering svg elements in Horizontal/Vertical SplitPanel components.

My vaadin project includes javascript component, which is used for rendering network graph. The javascript component uses d3.js library and network graph is rendered as svg element in parent div element.

In source code below is the main layout of window. I used
VerticalLayout
component, then I used
Label
component as a div element in which svg element is created and rendered. Process of creating svg element (network graph) is written in javascript, where svg element is rendered in div element with css class "
.v-splitpanel-first-container
".

[code]
@SuppressWarnings(“serial”)
public class MyVaadinUI extends UI
{

final Graph graph = new Graph();
@Override
protected void init(VaadinRequest request) {
   
    final VerticalLayout layout = new VerticalLayout();
    layout.setSizeFull();
    setContent(layout);
   
    Label div = new Label();
    div.setStyleName("v-splitpanel-first-container");
    div.setHeight(100, Sizeable.UNITS_PERCENTAGE);
    div.setWidth(100, Sizeable.UNITS_PERCENTAGE);
   
    layout.addComponent(div);
    layout.addComponent(graph);
    layout.setExpandRatio(div, 1);
  
}

}
[/code]Adding svg element (graph variable in source code) to
VerticalLayout
component I got expected result:


screen

Then I tried to add svg element to
VerticalSplitPanel
component instead of VerticalLayout component:

[code]
@SuppressWarnings(“serial”)
public class MyVaadinUI extends UI
{

final Graph graph = new Graph();
public static final String brownFox = "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. ";

@Override
protected void init(VaadinRequest request) {
          
    final VerticalLayout layout = new VerticalLayout();
    layout.setSizeFull();
    setContent(layout);
   
    // first main horizontal split panel
    final VerticalSplitPanel vertical1 = new VerticalSplitPanel();
    vertical1.setHeight("100%");
    vertical1.setSplitPosition(80, Sizeable.UNITS_PERCENTAGE);
    layout.addComponent(vertical1);
    
    vertical1.addComponent(graph);
    vertical1.addComponent(new Label(brownFox)); 
    layout.setExpandRatio(vertical1, 1);
  
}

}
[/code]And the result is:


screen

The problem is rendered graph, because nodes of graph are “stuck” in the top edge of main window.

Do you have any suggestion how to solve this problem?

Here is my
source code
and
pom

I resolved this problem by moving javascript code for dimensions setting onto initialization method after constructor, but still it is little bit strange that the same javascript components could be rendered differently in layout and split panel.