vis js loads very slow for high number of nodes ( > 40 nodes ) #2558

Open
msibibo opened this Issue Jan 10, 2017 · 4 comments

Projects

None yet

2 participants

@msibibo
msibibo commented Jan 10, 2017 edited

I originally posted on stackoverflow .

first of all, i would like to say its an awesome library and hell simple to integrate...Kudos to that!!!

Coming to my problem :

my problem is that for node count < 40, it works fine, but increase the node count and i get the below error on mozilla, chrome just stops responding.

image screenshot

Overall impact is that it slows down the page-load time or even after loading the page, scroll to other portions or the web page is like tortoise (this visualiser is one div of multiple divs in the page aligned vertically)

JS part which does the job :

 ```
  try {
         // Create graph on UI
         graph_nodes = response.graph_data["nodes"]
         graph_edges = response.graph_data["edges"]
         // create an array with nodes
         var nodes = new vis.DataSet(graph_nodes);
         // create an array with edges
         var edges = new vis.DataSet(graph_edges);

         // create a network
         var container = document.getElementById('network_visualisation');

         // provide the data in the vis format
         var data = {
            nodes: nodes,
            edges: edges
         };
         var options = {
              interaction:{
                    hover: true,
                    hoverConnectedEdges: true,
                    multiselect: false,
                    selectable: true,
                    selectConnectedEdges: true,
                    tooltipDelay: 300,
                    zoomView: true
                },
                nodes:{
                    color: {
                      border: 'black',
                      background: 'white',
                      highlight: {
                        border: 'black',
                        background: '#ccc'
                      },
                      hover: {
                        border: '#2B7CE9',
                        background: '#D2E5FF'
                      }
                    },
                    labelHighlightBold: true,
                    mass: 5,
                    physics: true,
                    scaling: {
                      min: 10,
                      max: 30,
                      label: {
                        enabled: true,
                        min: 14,
                        max: 30,
                        maxVisible: 30,
                        drawThreshold: 5
                      },
                    },
                    shadow:{
                      enabled: false,
                    },
                    shape: 'circle',
                    shapeProperties: {
                      borderDashes: false, // only for borders
                      borderRadius: 6,     // only for box shape
                      interpolation: false,  // only for image and circularImage shapes
                      useImageSize: false,  // only for image and circularImage shapes
                      useBorderWithImage: false  // only for image shape
                    },
                  },
                edges:{
                    arrows: {
                      to:     {enabled: true, scaleFactor:1, type:'arrow'},
                    },
                    arrowStrikethrough: false,
                    color: {
                      color:'#E7EAFF',
                      highlight:'#9EAAFC',
                      hover: '#2944FB',
                      inherit: "from",
                      opacity:1.0
                    },
                    dashes: true,
                    },
         };

         // initialize your network!
         var network = new vis.Network(container, data, options);
         network.on("stabilizationProgress", function(params) {
            var maxWidth = 496;
            var minWidth = 20;
            var widthFactor = params.iterations/params.total;
            var width = Math.max(minWidth,maxWidth * widthFactor);

            document.getElementById('bar').style.width = width + 'px';
            document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
        });
        network.once("stabilizationIterationsDone", function() {
            document.getElementById('text').innerHTML = '100%';
            document.getElementById('bar').style.width = '496px';
            document.getElementById('loadingBar').style.opacity = 0;
            // really clean the dom element
            setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
        });
         }
    catch (e) {
       console.error(e); // pass exception object to error handler
    }


HTML



`<div class="graph_data_bg">
	<div class="col-md-12 col-sm-12 col-xs-12" style=""></div>
	<div class="graph_data_heading"></div>
	<div id="network_visualisation"><!-- try to show n/w graph here --></div>
	<div id="loadingBar">
		<div class="outerBorder">
			<div id="text">0%</div>
			<div id="border">
				<div id="bar"></div>
			</div>
		</div>
    	</div>
 </div>`




@msibibo
msibibo commented Jan 10, 2017 edited

Sample video from the webpage showing a vis network , video link

I am continuously zooming in and out but notice the lag in the effect.Same slowness, i am talking about

@Tooa
Member
Tooa commented Jan 10, 2017 edited

Probably the same issue as #2556. Well, you have quite a lot of edges with labels there. We had some attends to implement the physics with web workers, but no one finished that work. See here and here. Maybe you want to pick it up? We are open for pull-requests.

We have two mechanisms to improve the stabilization i.e. adaptiveTimestep and improvedLayout. However, the latter only helps for a lot of nodes. Is precalculation an option for you?

@msibibo
msibibo commented Jan 10, 2017

I did referred to the #2556 before reporting the problem, did almost all possible research through google and SO.nothing helped though.JS is not something m very familiar with, sorry! :(

precalculation is an option but not in all the cases.what do you suggest captain tooa?

@msibibo
msibibo commented Jan 11, 2017 edited

can we add this network in an iframe on the page and keep rendering separately? without affecting the main html body document load time and lag?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment