AbstractJavaScriptComponent not rendering to component height/width

Vaadin 6 / 7 / 8 Framework UI
1

I am trying to wrap vivagraph.js as a Vaadin component (Currenlty on 7.3.7) and when I look at the component using the debugger, I see that the component is in fact 900x900 as is set in the code. However, the graph that is being rendered to the DIV tag is only displaying in the top left corner of the component of around say 100x100. I am not sure why there is this disconnect between what the vaadin component size is and what the js is rendering in. This js renders in the full browser if run outside of vaadin component. This is a sample script from the vivagraph website.
https://github.com/anvaka/VivaGraphJS
 Can anyone provide any guidance as to why this isn’t using the full component width and height?

window.com_virtalogic_vaadin_vivagraph_graph_Graph = function() {

    var diagramElement = this.getElement();
    var graph = Viva.Graph.graph();

    // Construct the graph
    graph.addNode('anvaka', {url : 'https://secure.gravatar.com/avatar/91bad8ceeec43ae303790f8fe238164b'});
    graph.addNode('manunt', {url : 'https://secure.gravatar.com/avatar/c81bfc2cf23958504617dd4fada3afa8'});
    graph.addNode('thlorenz', {url : 'https://secure.gravatar.com/avatar/1c9054d6242bffd5fd25ec652a2b79cc'});
    graph.addNode('bling', {url : 'https://secure.gravatar.com/avatar/24a5b6e62e9a486743a71e0a0a4f71af'});
    graph.addNode('diyan', {url : 'https://secure.gravatar.com/avatar/01bce7702975191fdc402565bd1045a8?'});
    graph.addNode('pocheptsov', {url : 'https://secure.gravatar.com/avatar/13da974fc9716b42f5d62e3c8056c718'});
    graph.addNode('dimapasko', {url : 'https://secure.gravatar.com/avatar/8e587a4232502a9f1ca14e2810e3c3dd'});

    graph.addLink('anvaka', 'manunt');
    graph.addLink('bling', 'thlorenz');
    graph.addLink('anvaka', 'bling');
    graph.addLink('anvaka', 'diyan');
    graph.addLink('anvaka', 'pocheptsov');
    graph.addLink('anvaka', 'dimapasko');

    // Set custom nodes appearance
    var graphics = Viva.Graph.View.svgGraphics();
    
    graphics.node(function(node) {
           // The function is called every time renderer needs a ui to display node
           return Viva.Graph.svg('image')
                 .attr('width', 24)
                 .attr('height', 24)
                 .link(node.data.url); // node.data holds custom object passed to graph.addNode();
        })
        .placeNode(function(nodeUI, pos){
            // Shift image to let links go to the center:
            nodeUI.attr('x', pos.x - 12).attr('y', pos.y - 12);
        });

    var renderer = Viva.Graph.View.renderer(graph,
        {
            graphics : graphics,
            container : diagramElement
        });
            
    renderer.run();    
}
import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;
import com.virtalogic.vaadin.vivagraph.graph.GraphState;
@JavaScript({"vivagraph.min.js", "graph_connector.js"})
@SuppressWarnings("serial")

public class Graph extends AbstractJavaScriptComponent  {
    
    
    @Override
    public GraphState getState() {
        return (GraphState) super.getState();
    }       
        
}
import org.json.JSONObject;

import com.vaadin.shared.ui.JavaScriptComponentState;

public class GraphState  extends JavaScriptComponentState {

    private JSONObject graphData;
    private String clickedNode;
    
    
    public JSONObject getGraphData() {
        return graphData;
    }
    public void setGraphData(JSONObject graphData) {
        this.graphData = graphData;
    }

    public String getClickedNode() {
        return clickedNode;
    }
    public void setClickedNode(String clickedNode) {
        this.clickedNode = clickedNode;
    }
        
}
2

If the actual Vaadin Component div is rendererd correctly than this probably isn’t a Vaadin problem. Maybe the graphDiv defaults to a width and height of 100px if it’s not set in the code. Maybe try setting the width and height in the Javascript code to 100%.