When you execute graph layout on the client side, you
risk blocking the user interface of the browser while the layout is
being performed. You can prevent browser tie-up by performing the
layout in a Web Worker thread, or by running the layout on a server.
To view a graph laid out by a Web Worker, client browsers must support
HTML 5 Web Worker threads. (Web Worker threads are supported by the
latest Chrome and Firefox browsers, but as of this writing, they are
not supported in Internet Explorer.)
For Web Worker thread graph layouts, configure the layout
algorithms on a Graph instance using
the standard setNodeLayout and setLinkLayout methods. Instead of calling the performGraphLayout method,
create a WebWorkerLayout instance with the graph as an argument, and then
call its layout method. The graph
layout is executed asynchronously in a separate thread.
Note
As in all multithreaded applications, you must design
your application for asynchronous graph layout execution. Your application
must not modify the graph while the layout is running. Otherwise,
all the changes made on the client side are overwritten when the layout
completes.
Execute graph layouts in an HTML 5 Web Worker thread
as in the following example:
var treeLayout = new ibm_ilog.graphlayout.tree.TreeLayout(); graph.setNodeLayout(treeLayout); var workerLayout = new ibm_ilog.graphlayout.WebWorkerLayout(graph); var deferred = workerLayout.layout();
The layout method on
the WebWorkerLayout instance returns
immediately to the current thread, without waiting for the graph layout
execution to complete. The user interface of the browser stays active,
and your application can continue with other processing. When the
graph layout execution completes, the new node positions and link
shapes are applied to the graph automatically.
Executing a graph layout in a Web Worker thread requires
a significant initialization time, because it is isolated from the
main application thread. It requires the Web Worker thread to reload
the graph layout algorithm code and also some Dojo code. If you perform
the same graph layout algorithm several times, you can suppress this
processing time in subsequent layouts by reusing the same WebWorkerLayout instance.
Note
The WebWorkerLayout class
is similar in use to the ServerSideLayout class;
but since the layout is executed by the browser, it does not require
separate installation of a web service component. For information
about server-side graph layout, see Running graph layouts on a server.
Adding callbacks
The layout method on
the WebWorkerLayout instance returns
a dojo.Deferred object that can be
used to notify you when the layout finishes. Call the addCallback method
of the dojo.Deferred object to provide
the notification. The following example disables a button during execution
of the layout, then enables it when the layout is finished:
dijit.byId("layoutButton").attr("disabled", true); var deferred = workerLayout.layout(); deferred.addCallback(function(){ dijit.byId("layoutButton").attr("disabled", false); });
You can also use the dojo.Deferred object
to be notified if an error occurs during the graph layout execution.
Call the addErrback method for layout
error notification, as in the following example:
deferred.addErrback(function(e){ alert(e); dijit.byId("layoutButton").attr("disabled", false); });
Stopping the Web Worker thread
You can stop the layout execution by calling the stop method
of the WebWorkerLayout object. This
interrupts the Web Worker thread without modifying the graph:
workerLayout.stop();