More Info

GWT is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT is used by many products at Google, including AdWords, AdSense, Flights, Hotel Finder, Offers, Wallet, Blogger. It’s open source, completely free, and used by thousands of developers around the world.

Get Started

We assume that you already have your GWT project up and running configured with the MAVEN archetype. So the first step is to add the EBI Nexus repository in your pom.xml file:

<repositories>
    ...
    <!-- EBI repo -->
    <repository>
        <id>nexus-ebi-repo</id>
        <name>The EBI internal repository</name>
        <url>http://www.ebi.ac.uk/Tools/maven/repos/content/groups/ebi-repo/</url>
        <releases>
            <enabled>true</enabled>
        </releases>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </repository>
    <!-- EBI SNAPSHOT repo -->
    <repository>
        <id>nexus-ebi-snapshot-repo</id>
        <name>The EBI internal snapshot repository</name>
        <url>http://www.ebi.ac.uk/Tools/maven/repos/content/groups/ebi-snapshots/</url>
        <releases>
            <enabled>false</enabled>
        </releases>
        <snapshots>
            <enabled>true</enabled>
        </snapshots>
    </repository>
</repositories>

Once the repository is in place, the next thing to do is adding the Reactome's pathways overview dependency:

<dependencies>
    ...
    <dependency>
        <groupId>org.reactome.web</groupId>
        <artifactId>diagram</artifactId>
        <version>3.2.1</version>
    </dependency>
<dependencies>

Before writing the code to use the pathways overview, add the dependency in your gwt.xml file, so the compiler will find the pathways overview:

<inherits name="org.reactome.web.diagram.DiagramViewer" />

And finally, assuming the widget is now going to be displayed by its own, the code in your EntryPoint class would look like:

/**
 * For test purposes we assume the diagram loads as a single item in the web page.
 *
 * Entry point classes define onModuleLoad().
 */
public class Main implements EntryPoint {

    private final DiagramViewer diagram;

    public Main() {
        //We create the diagram. Please note that different pathways diagrams can be loaded in the same
        //instance (the diagram manages the cache of previously loaded diagrams using an LRU)
        diagram = DiagramFactory.createDiagramViewer();
    }

    @Override
    public void onModuleLoad() {
        Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
            @Override
            public void execute() {
                DiagramFactory.CONSOLE_VERBOSE = true;   //This is optional (for dev purposes)
                DiagramFactory.EVENT_BUS_VERBOSE = true; //This is optional (for dev purposes)

                //For this use case we add the diagram as the main and only object of the webpage
                RootLayoutPanel.get().add(diagram);
                
                //This will run the loadDiagram method asynchronously, ensuring the DOM has been updated
                Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
                    @Override
                    public void execute() {
                        diagram.loadDiagram("R-HSA-111804");
                    }
                });
            }
        });
    }
}

API

The available methods are defined in the DiagramViewer interface in the org.reactome.web.diagram.client package. These are:

    //subscribe to this event to be notified when the user closes the analysis overlay
    HandlerRegistration addAnalysisResetHandler(AnalysisResetHandler handler);

    //Subscribe to this event to be notified if the browser does not support canvas, so diagrams can not be displayed
    HandlerRegistration addCanvasNotSupportedEventHandler(CanvasNotSupportedHandler handler);

    //Subscribe to this event to be notified when the user selects an object in the diagram
    HandlerRegistration addDatabaseObjectSelectedHandler(GraphObjectSelectedHandler handler);

    //Subscribe to this event to be notified when the user hovers over an object in the diagram
    HandlerRegistration addDatabaseObjectHoveredHandler(GraphObjectHoveredHandler handler);

    //Subscribe to this event to be notified when a new diagram is displayed in the viewport
    HandlerRegistration addDiagramLoadedHandler(DiagramLoadedHandler handler);

    //Subscribe to this event to be notified when elements in the diagram are flagged
    HandlerRegistration addDiagramObjectsFlaggedHandler(DiagramObjectsFlaggedHandler handler);

    //Subscribe to this event to be notified when flagged elements in the diagram are not longer visible
    HandlerRegistration addDiagramObjectsFlagResetHandler(DiagramObjectsFlagResetHandler handler);

    //Subscribe to this event to be notified when the user selects the "Go to overview" button
    HandlerRegistration addFireworksOpenedHandler(FireworksOpenedHandler handler);

    //Flags the elements in the diagram which identifiers match with "identifier"
    void flagItems(String identifier);

    //Highlights the element(s) in the diagram with the "stableIdentifier"
    void highlightItem(String stableIdentifier);

    //Highlights the element(s) in the diagram with the "dbIdentifier"
    void highlightItem(Long dbIdentifier);

    //Loads the diagram with the "stableIdentifier"
    void loadDiagram(String stId);

    //Loads the diagram with the "dbId"
    void loadDiagram(Long dbId);

    //Resets the analysis overlay
    void resetAnalysis();

    //Resets the flagged items
    void resetFlaggedItems();

    //Resets the highlighted items
    void resetHighlight();

    //Resets the selected items
    void resetSelection();

    //Selects the element(s) in the diagram with the "stableIdentifier"
    void selectItem(String stableIdentifier);

    //Selects the element(s) in the diagram with the "stableIdentifier"
    void selectItem(Long dbIdentifier);

    //Sets the analysis overlay for a given "token" and "resource" (this will query the Analysis Service)
    void setAnalysisToken(String token, String resource);

    //Set the widget visibility
    void setVisible(boolean visible);

Resources

• GWT Diagram code
• Reactome Pathways Portal code