<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE article PUBLIC "-//NLM//DTD JATS (Z39.96) Journal Publishing DTD v1.2 20190208//EN" "http://jats.nlm.nih.gov/publishing/1.2/JATS-journalpublishing1.dtd"><article xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:xlink="http://www.w3.org/1999/xlink" article-type="other" dtd-version="1.2" xml:lang="en">
    <front>
        <journal-meta>
            <journal-id journal-id-type="pmc">F1000Research</journal-id>
            <journal-title-group>
                <journal-title>F1000Research</journal-title>
            </journal-title-group>
            <issn pub-type="epub">2046-1402</issn>
            <publisher>
                <publisher-name>F1000 Research Limited</publisher-name>
                <publisher-loc>London, UK</publisher-loc>
            </publisher>
        </journal-meta>
        <article-meta>
            <article-id pub-id-type="doi">10.12688/f1000research.9130.1</article-id>
            <article-categories>
                <subj-group subj-group-type="heading">
                    <subject>Software Tool Article</subject>
                </subj-group>
                <subj-group>
                    <subject>Articles</subject>
                    <subj-group>
                        <subject>Bioinformatics</subject>
                    </subj-group>
                </subj-group>
            </article-categories>
            <title-group>
                <article-title>webANIMO: Improving the accessibility of ANIMO</article-title>
                <fn-group content-type="pub-status">
                    <fn>
                        <p>[version 1; peer review: 3 approved with reservations]</p>
                    </fn>
                </fn-group>
            </title-group>
            <contrib-group>
                <contrib contrib-type="author" corresp="no">
                    <name>
                        <surname>Siers</surname>
                        <given-names>Willem</given-names>
                    </name>
                    <xref ref-type="aff" rid="a1">1</xref>
                </contrib>
                <contrib contrib-type="author" corresp="no">
                    <name>
                        <surname>Bakker</surname>
                        <given-names>Michiel</given-names>
                    </name>
                    <xref ref-type="aff" rid="a1">1</xref>
                </contrib>
                <contrib contrib-type="author" corresp="no">
                    <name>
                        <surname>Rubbens</surname>
                        <given-names>Bob</given-names>
                    </name>
                    <xref ref-type="aff" rid="a1">1</xref>
                </contrib>
                <contrib contrib-type="author" corresp="no">
                    <name>
                        <surname>Haasjes</surname>
                        <given-names>Ruben</given-names>
                    </name>
                    <xref ref-type="aff" rid="a1">1</xref>
                </contrib>
                <contrib contrib-type="author" corresp="no">
                    <name>
                        <surname>Brandt</surname>
                        <given-names>Jacco</given-names>
                    </name>
                    <xref ref-type="aff" rid="a1">1</xref>
                </contrib>
                <contrib contrib-type="author" corresp="yes">
                    <name>
                        <surname>Schivo</surname>
                        <given-names>Stefano</given-names>
                    </name>
                    <xref ref-type="corresp" rid="c1">a</xref>
                    <xref ref-type="aff" rid="a1">1</xref>
                </contrib>
                <aff id="a1">
                    <label>1</label>University of Twente, Enschede, The Netherlands</aff>
            </contrib-group>
            <author-notes>
                <corresp id="c1">
                    <label>a</label>
                    <email xlink:href="mailto:s.schivo@gmail.com">s.schivo@gmail.com</email>
                </corresp>
                <fn fn-type="con">
                    <p>WS, MB, BR, RH and JB worked on the development of webANIMO and the writing of the associated documents. SS supervised the development of webANIMO and provided feedback on the manuscript.</p>
                </fn>
                <fn fn-type="conflict">
                    <p>
                        <bold>Competing interests: </bold>No competing interests were disclosed.</p>
                </fn>
            </author-notes>
            <pub-date pub-type="epub">
                <day>15</day>
                <month>7</month>
                <year>2016</year>
            </pub-date>
            <pub-date pub-type="collection">
                <year>2016</year>
            </pub-date>
            <volume>5</volume>
            <elocation-id>1714</elocation-id>
            <history>
                <date date-type="accepted">
                    <day>12</day>
                    <month>7</month>
                    <year>2016</year>
                </date>
            </history>
            <permissions>
                <copyright-statement>Copyright: &#x00a9; 2016 Siers W et al.</copyright-statement>
                <copyright-year>2016</copyright-year>
                <license xlink:href="https://creativecommons.org/licenses/by/4.0/">
                    <license-p>This is an open access article distributed under the terms of the Creative Commons Attribution Licence, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.</license-p>
                </license>
            </permissions>
            <self-uri content-type="pdf" xlink:href="https://f1000research.com/articles/5-1714/pdf"/>
            <abstract>
                <p>ANIMO is a a Cytoscape 3 app to model biological signalling pathways. Useful analyses can be performed and displayed to the user in an effective way. However, all this power comes at a cost: the additional software requirements for ANIMO have been hindering its widespread adoption. Our goal has been to provide beginner to intermediate ANIMO users with a simpler and more effective platform to perform their research: webANIMO. The minimalistic interface provides everything the regular ANIMO user needs for the most common tasks. Adding the fact that it is a web interface removes any software requirements from the equation. This article describes how webANIMO works: its client/server architecture, how Cytoscape and ANIMO compatibility was maintained, the visualization techniques implemented and other general design decisions.</p>
            </abstract>
            <kwd-group kwd-group-type="author">
                <kwd>network dynamics</kwd>
                <kwd>systems biology</kwd>
                <kwd>visualization</kwd>
                <kwd>regulatory networks</kwd>
                <kwd>ANIMO</kwd>
                <kwd>web interface</kwd>
                <kwd>timed automata</kwd>
            </kwd-group>
            <funding-group>
                <funding-statement>The author(s) declared that no grants were involved in supporting this work.</funding-statement>
            </funding-group>
        </article-meta>
    </front>
    <body>
        <sec sec-type="intro">
            <title>Introduction</title>
            <p>The desktop version of ANIMO
                <sup>
                    <xref ref-type="bibr" rid="ref-1">1</xref>,
                    <xref ref-type="bibr" rid="ref-2">2</xref>
                </sup> is currently implemented as an app for the popular biological network visualization program Cytoscape
                <sup>
                    <xref ref-type="bibr" rid="ref-3">3</xref>
                </sup>. Users are able to create networks modelling biological processes in the Cytoscape interface. A node (also known as a reactant) in the network usually describes a protein or a gene, and has an 
                <italic toggle="yes">activity level</italic> that is the ratio between the active and inactive form of the reactant.  The edges connecting reactants are called interactions, and describe how the reactants influence each other: following biological custom, &#x2192; means activation and &#x22a3; stands for inhibition. These networks are analysed in ANIMO using the UPPAAL
                <sup>
                    <xref ref-type="bibr" rid="ref-4">4</xref>
                </sup> tool in order to calculate the changes in activity levels over time. These changes are represented as a graph and reflected on the network using node colors to represent different activity levels.</p>
            <p>ANIMO was developed in collaboration with biologists, and is used in biological studies
                <sup>
                    <xref ref-type="bibr" rid="ref-5">5</xref>,
                    <xref ref-type="bibr" rid="ref-6">6</xref>
                </sup>. While ANIMO is made to be user-friendly and make the biologist feel &#x201c;at home&#x201d;, the initial impression may not be entirely positive due to the requirements for its installation. The need to install Java, Cytoscape and UPPAAL before being able to install ANIMO and finally see whether it suits their needs could be considered as a hurdle for ANIMO&#x2019;s target user group. For this reason, we decided to develop a web-based version of ANIMO that would make it much easier to access the main features of the tool. The idea of webANIMO was thus implemented in a design project at the University of Twente.</p>
        </sec>
        <sec sec-type="methods">
            <title>Methods</title>
            <sec>
                <title>Implementation</title>
                <p>One of the most important aspects of the architecture of webANIMO (see 
                    <xref ref-type="fig" rid="f1">Figure 1</xref>) is the task division between client and server. Since web browsers have limited memory and processing power, the tasks of the client are kept to a minimum. The main task for the browser is visualization, while all the calculations are kept server-side and are delegated to a headless version of ANIMO. Cytoscape JS 2.6.1
                    <sup>
                        <xref ref-type="bibr" rid="ref-7">7</xref>
                    </sup> is used to handle the visualization of networks. However, in order to give the web version the same functionality as the desktop version of ANIMO, many additions and modifications were necessary. webANIMO gives the user most of the features that the desktop version also provides, for example, the ability to add, edit and delete nodes or edges in the network and visualize the changes of activity level over time, using a graph and changing the colours of nodes. Major features of ANIMO that are not included in webANIMO are parameter fitting, model checking and a history of previous simulations.</p>
                <fig fig-type="figure" id="f1" orientation="portrait" position="float">
                    <label>Figure 1. </label>
                    <caption>
                        <title>Architecture diagram for webANIMO.</title>
                    </caption>
                    <graphic orientation="portrait" position="float" xlink:href="https://f1000research-files.f1000.com/manuscripts/9824/a4dbabed-1990-4fca-8eef-ff348cb6bf22_figure1.gif"/>
                </fig>
            </sec>
            <sec>
                <title>User interface</title>
                <p>Since the interface of the desktop version of ANIMO is relatively complex, the decision has been made to make the web interface different, but effort has been spent to maintain all the features of the desktop version. The interface of the web version in general still resembles the desktop version. The upper section of the page is used for a taskbar, which contains submenus. The left of the page is used for the legend and the analyse options. The rest of the page is used by the network view and the result view. The width of these two views can be adjusted to the users need. 
                    <xref ref-type="fig" rid="f2">Figure 2</xref> and 
                    <xref ref-type="fig" rid="f3">Figure 3</xref> show the desktop and the web versions, respectively, for visual comparison.</p>
                <fig fig-type="figure" id="f2" orientation="portrait" position="float">
                    <label>Figure 2. </label>
                    <caption>
                        <title>Screenshot of desktop ANIMO
                            <sup>
                                <xref ref-type="bibr" rid="ref-8">8</xref>
                            </sup>.</title>
                    </caption>
                    <graphic orientation="portrait" position="float" xlink:href="https://f1000research-files.f1000.com/manuscripts/9824/a4dbabed-1990-4fca-8eef-ff348cb6bf22_figure2.gif"/>
                </fig>
                <fig fig-type="figure" id="f3" orientation="portrait" position="float">
                    <label>Figure 3. </label>
                    <caption>
                        <title>Screenshot of webANIMO.</title>
                    </caption>
                    <graphic orientation="portrait" position="float" xlink:href="https://f1000research-files.f1000.com/manuscripts/9824/a4dbabed-1990-4fca-8eef-ff348cb6bf22_figure3.gif"/>
                </fig>
            </sec>
            <sec>
                <title>Editor (network view)</title>
                <p>The editor has been built using Cytoscape-JS
                    <sup>
                        <xref ref-type="bibr" rid="ref-7">7</xref>
                    </sup>, which provides the basic functionality for loading a network and displaying the nodes and the edges. The functionality to add, edit and delete nodes and edges has been added, using jQuery 1.12
                    <sup>
                        <xref ref-type="bibr" rid="ref-9">9</xref>
                    </sup> in order to make it easier to program this functionality. Cytoscape-JS provides events for tapping on nodes and edges: these events hide and show the Edit window. Changes made are shown instantaneously. jQuery 
                    <monospace>change()</monospace> events have been bound to all the input fields that can be edited in order to provide instant feedback to the user. For example, when the user changes the activity level of a node, the colour will change simultaneously. The webANIMO editor also provides undo- and redo-functionality to let the user manage changes to the network. Furthermore, the webANIMO editor has support for hot keys: users are able to use common hot keys for undo, redo, escape, enter, zoom-in and zoom-out.</p>
                <p>When first starting with webANIMO, the only thing presented to the user is an empty network. In order to better guide the user, the editor has a toolbar with all features: the user can press the buttons in order to add nodes and edges, or to zoom and fit the network to the view. Moreover, the buttons serve as a quick guide. The qTip 2.2.1 library
                    <sup>
                        <xref ref-type="bibr" rid="ref-10">10</xref>
                    </sup> was used to create clear tool tips: when the user hovers over the tool bar buttons, quick tips about using the editor are shown.</p>
            </sec>
            <sec>
                <title>Result view</title>
                <p>The result view was built using the D3 line-chart plugin
                    <sup>
                        <xref ref-type="bibr" rid="ref-11">11</xref>
                    </sup>. After a network has been analysed, the webANIMO front-end receives from the back-end the analysed data in JSON format, which is then presented to the user as a graph. Similar to the desktop version of ANIMO, the graph has a slider on top which allows the user to see the activity levels of nodes at different time points: while the user drags the slider along the graph, nodes in the network are colored depending on their activity level at the corresponding time points. A legend is shown at the bottom of the graph: by clicking on the relevant node, users are able to hide and show plot data. The graph also has zoom features, allowing the user to take a closer look at specific points of the graph in more detail.</p>
            </sec>
            <sec>
                <title>Import and export</title>
                <p>One of the earliest requirements of webANIMO was that it must be compatible with desktop ANIMO so that users can switch back and forth between the online and desktop environment without too much effort and technical know-how.</p>
                <p>To make this possible, the functionality of importing and exporting of Cytoscape session files was implemented. Import and export functionality gives the user the option to choose the appropriate working environment. If the user prefers the improved UI and does not mind the reduced feature set of webANIMO the user can avoid installation issues and choose webANIMO. Once the user needs more processing power or more advanced features, the user can choose to export their progress to the native Cytoscape format and continue working in desktop ANIMO. Furthermore, once the user decides (s)he is finished with the advanced feature set of desktop ANIMO and wants to move back to the minimal interface of webANIMO, (s)he is free to do so.</p>
                <p>For the sake of usability, the import feature can handle both Cytoscape 2 and Cytoscape 3 session files. For the same reason it was decided to export to the Cytoscape 2 format, because this format is also supported by Cytoscape 3 and it was a simpler export target. The concrete functionality of importing and exporting was written in Javascript and is executed completely client side, which makes it fast even given bigger networks since the networks do not have to be uploaded. This also reduces the workload of the server. The downside to this design choice is that if one of the file format specifications changes, the import feature might need to be updated.</p>
            </sec>
            <sec>
                <title>Analysis</title>
                <p>When the user presses the &#x2018;Analyse&#x2019; button, a request containing the current model is sent to the server, which simulates that model and sends a response back containing the results of the simulation. The UI is disabled during the analysis and the waiting time is limited to one minute, after which the simulation is forced to terminate and no result is sent back. The use of a simulation time-out also reduces server load. The choice to perform the analysis on the server was made so the user is not required to install the tools that are needed to perform the simulation. As an added benefit this may improve the simulation time for the user if the device sending the request has slower hardware than the server (which is usually the case if the user accesses webANIMO through a tablet or smartphone).</p>
                <p>The data is sent to the server with an HTTP POST request, containing request data formatted as JSON, as shown in 
                    <xref ref-type="fig" rid="f4">Figure 4</xref> and 
                    <xref ref-type="fig" rid="f5">Figure 5</xref>. This JSON document has two required fields, &#x201c;model&#x201d;, which describes the biological network, and &#x201c;minutesToSimulate&#x2019;, which specifies how many minutes should be simulated. The PHP program that handles the POST request sends the JSON document to the ANIMO back-end Java program. This program performs the simulation and formats the simulation results as JSON, which is printed to standard output. The PHP program reads the results and sends them back to the client.</p>
                <fig fig-type="figure" id="f4" orientation="portrait" position="float">
                    <label>Figure 4. </label>
                    <caption>
                        <title>Architecture diagram for the backend of webANIMO.</title>
                    </caption>
                    <graphic orientation="portrait" position="float" xlink:href="https://f1000research-files.f1000.com/manuscripts/9824/a4dbabed-1990-4fca-8eef-ff348cb6bf22_figure4.gif"/>
                </fig>
                <fig fig-type="figure" id="f5" orientation="portrait" position="float">
                    <label>Figure 5. </label>
                    <caption>
                        <title>Simplified request text for simulation.</title>
                    </caption>
                    <graphic orientation="portrait" position="float" xlink:href="https://f1000research-files.f1000.com/manuscripts/9824/a4dbabed-1990-4fca-8eef-ff348cb6bf22_figure5.gif"/>
                </fig>
                <p>The code that performs the simulation is an extension of the desktop version of ANIMO. A JSON input is converted to an ANIMO network object, where all fields in the &#x201c;data&#x201d; JSON object are converted to properties in the ANIMO network. The back-end of webANIMO is an addition to the original ANIMO source code, so any changes to the simulation logic will be supported by webANIMO as well.</p>
                <p>ANIMO transforms the input model to a timed automata model, which is simulated with UPPAAL 4.1
                    <sup>
                        <xref ref-type="bibr" rid="ref-4">4</xref>
                    </sup>. The output of the simulation is a textual description of the changes in node activity levels over time. This result is converted to a JSON document similar to the one shown in 
                    <xref ref-type="fig" rid="f6">Figure 6</xref>, and sent back to the client.</p>
                <fig fig-type="figure" id="f6" orientation="portrait" position="float">
                    <label>Figure 6. </label>
                    <caption>
                        <title>Simplified response text for simulation.</title>
                    </caption>
                    <graphic orientation="portrait" position="float" xlink:href="https://f1000research-files.f1000.com/manuscripts/9824/a4dbabed-1990-4fca-8eef-ff348cb6bf22_figure6.gif"/>
                </fig>
            </sec>
            <sec>
                <title>CSV export and import</title>
                <p>Users of webANIMO may desire other ways of analysing the results of a simulation. To facilitate this, a feature to export the data to the CSV (comma-separated values) format was added. This allows the users to import the results into, for example, a spreadsheet editor and perform additional calculations or visualise the data. In the exported CSV data, there is a column with time values in minutes, and a column for every plotted node with the activity levels at the corresponding minute. It is possible that one node has an activity value at some time point, where another node does not. In this case the missing value is omitted.</p>
                <fig fig-type="figure" id="f7" orientation="portrait" position="float">
                    <label>Figure 7. </label>
                    <caption>
                        <title>Plot before and after exporting.</title>
                    </caption>
                    <graphic orientation="portrait" position="float" xlink:href="https://f1000research-files.f1000.com/manuscripts/9824/a4dbabed-1990-4fca-8eef-ff348cb6bf22_figure7.gif"/>
                </fig>
                <p>In order to confirm that the model of a biological process produces the same results as in real life, biologists can import experimental data in the CSV format. This data is added to the plot window together with the analysis data. For consistency, the format of the imported CSV data must be the same as the exported CSV data.</p>
            </sec>
            <sec>
                <title>Persistent session</title>
                <p>When a user is working with webANIMO, (s)he would not want to lose their work when they accidentally close their browser. To prevent this loss, webANIMO saves the current state of the network on the user&#x2019;s device whenever a change is made. The last saved state is loaded again when one revisits the webANIMO application. This functionality was implemented using the new HTML5 web storage API
                    <sup>
                        <xref ref-type="bibr" rid="ref-12">12</xref>
                    </sup>. To account for web browsers that do not yet fully support this API, webANIMO uses Mozilla&#x2019;s backwards compatibility code
                    <sup>
                        <xref ref-type="bibr" rid="ref-13">13</xref>
                    </sup>, which relies on cookies to store data locally.</p>
            </sec>
            <sec>
                <title>Plot export</title>
                <p>webANIMO plots can also be exported as images. The plot export feature works on the basis that the plot is inherently a Scalable Vector Graphics (SVG) element. This means that the plot is easily modifiable in the browser and it can be converted to a wide range of image formats. These two reasons allow for a robust implementation of exporting the SVG plot to a downloadable image. For an improved user experience the user can choose to directly download an image, or show the exported image in the browser first. The plot export feature is implemented as follows. First the SVG plot element is cloned, to avoid changing the actual plot in the interface. Then, a legend is added, several superfluous elements are removed, and the element as a whole is resized to accommodate a slightly bigger font. Then the SVG is rendered to an HTML5 canvas, which subsequently is exported to the PNG (portable network graphics image) format. This is then, depending on the choice of the user, either presented in a new tab or available for download directly.</p>
            </sec>
            <sec>
                <title>Included examples</title>
                <p>Although webANIMO is designed to be as intuitive as possible, it might be possible that a potential user does not immediately see all modelling possibilities by just &#x201c;playing&#x201d; with their own networks. To provide the user with a more complete overview of everything one can do with webANIMO, the application has packed two example models. The examples can be found as entries of menu-item &#x2018;Examples&#x2019;: they are called &#x2018;Model base&#x2019; and &#x2018;Chrondrocyte&#x2019; and were presented in 
                    <xref ref-type="bibr" rid="ref-14">14</xref> and 
                    <xref ref-type="bibr" rid="ref-5">5</xref> respectively.</p>
            </sec>
            <sec>
                <title>Revision history</title>
                <p>When the user changes the current network not only the new network is saved, but also the change that the user performed is saved. During a session (which is ended when the page is reloaded) these changes are accumulated and called a 
                    <italic toggle="yes">revision</italic>. In the &#x201c;show revisions&#x201d; view (
                    <xref ref-type="fig" rid="f8">Figure 8</xref>) these revisions are listed and can be clicked in order to view the changes that happened in each of them. The changes are visualized instead of just displayed as text, to allow visualisation of all the new changes in a quick glance. Modifications to edges and nodes are indicated with light blue, creations with green, deletions with red and the unchanged sections of the graph are grey. This makes collaborative work on bigger networks simpler to manage.</p>
                <fig fig-type="figure" id="f8" orientation="portrait" position="float">
                    <label>Figure 8. </label>
                    <caption>
                        <title>Opened the revisions list and displaying changes of revision #2.</title>
                        <p>Node &#x201c;Erk&#x201d; is selected.</p>
                    </caption>
                    <graphic orientation="portrait" position="float" xlink:href="https://f1000research-files.f1000.com/manuscripts/9824/a4dbabed-1990-4fca-8eef-ff348cb6bf22_figure8.gif"/>
                </fig>
            </sec>
            <sec>
                <title>Online shared networks</title>
                <p>webANIMO allows to share networks with other people. The networks made in webANIMO will by default be saved to the browser&#x2019;s local storage, so that when reloading or revisiting webANIMO the same network is loaded again. However, when a user wants to share the current network with another user, the network (including its revisions and changes) is stored on the web-server. When the network is first sent to the server for saving, the server creates a random (unused) filename and stores the network in a file with this name. This filename is a random 128-bit value in hexedecimal form, so that guessing filenames is not feasible. The user is then redirected to 
                    <monospace>./?network=N</monospace>, where N is the filename of the file that stores the network. This filename is also the network identifier and is unique. The user can then share this link with other users: upon opening the link the associated network is loaded. The changes to the network are regularly saved to the file and can be seen as revisions (
                    <xref ref-type="fig" rid="f8">Figure 8</xref>).</p>
                <p>To prevent multiple users editing the same network simultaneously and overwriting each other&#x2019;s changes, a lock file is created on the server for each network. In this lock file the ip-address of the user editing the file is stored. When opening a link for a network a comparison is performed on the last time the lock was used and the current time. If the file is recently used by another ip-address, the network will be loaded, but an error is displayed indicating that changes will not be saved to the server.</p>
            </sec>
            <sec>
                <title>Operation</title>
                <p>To run webANIMO, the user needs any internet connected device with an (up-to-date) modern browser. Browsers such as Chrome 51, Firefox 47, Safari 9.1, Edge 25 and Internet Explorer 9+ are capable of running webANIMO, although it has been most extensively tested on Chrome and Firefox.</p>
                <p>Installing webANIMO on a server requires PHP version 5.2 or higher, Java version 8 or higher and an UPPAAL 4.1 installation.</p>
            </sec>
        </sec>
        <sec>
            <title>Use cases</title>
            <p>We will now briefly describe the process of creating a simple network with two reactants and one interaction connecting them.</p>
            <p>First create a reactant by right clicking on an empty location in the network view or selecting the &#x201c;Add reactant&#x201d; button in the toolbar. The property panel will change to &#x201c;Add reactant&#x201d; mode. Give the reactant a name and click the &#x201c;Save&#x201d; button to add the reactant to the network view.</p>
            <p>The reactant should now be visible somewhere in the network view. If not, click the &#x201c;Zoom to fit&#x201d; shortcut in the toolbar to find it. Now add another reactant to the network view in the same way as before. Now there will be two reactants visible in the network view.</p>
            <p>In order to add an interaction, click the &#x201c;Add new interaction&#x201d; button in the toolbar, which will cause the property panel to change to the &#x201c;Add interaction&#x201d; mode. As the source reactant, select the reactant that was first created. As the target reactant, select the reactant that was created after that. Make sure the &#x201c;K&#x201d; slider in the propery panel is on the &#x201c;Slow&#x201d; position, then click save.</p>
            <p>A network with two reactants and one interaction should now be visible in the network view. In order to get an interesting analysis result, one more thing needs to be done. Click on the source reactant of the interaction.</p>
            <p>The property panel will change to the &#x201c;Edit reactant&#x201d; mode. Change the &#x201c;Initial activity level&#x201d; slider to the highest level, then click close.</p>
            <p>The network is now ready to be analysed. Click on the &#x201c;Analyse&#x201d; button in the property panel, after which a &#x201c;Loading, please wait&#x201d; dialog will appear. The analysis of the network is now being done on the webANIMO server. Once the analysis is complete the dialog will disappear and the analysis result will be displayed in the plot view. The red vertical bar in the plot can be clicked and dragged along the plot to display the activation levels of the reactants at that point in the simulation.</p>
            <p>More instructions on how to perform basic functions in webANIMO are described in the webANIMO manual, which can be found under the &#x201c;Help&#x201d; menu.</p>
        </sec>
        <sec>
            <title>Summary</title>
            <p>This paper presents an online tool to model and analyze biological networks, based on an existing Cytoscape app. Most of the original features of the app (ANIMO) are now available simply accessing a website, which eliminates the initial installation phase that has been described as hideous and difficult by our target audience of biomedical students. The process of integrating this Cytoscape plugin into a web application has been described in this paper, and makes use of the CytoscapeJS library. Using this library and the described approach, other Cytoscape plugins could also be ported if there is a need to.</p>
        </sec>
        <sec>
            <title>Software availability</title>
            <list list-type="bullet">
                <list-item>
                    <label>1. </label>
                    <p>Software available from:</p>
                    <p>
                        <ext-link ext-link-type="uri" xlink:href="http://fmt.cs.utwente.nl/tools/webANIMO">http://fmt.cs.utwente.nl/tools/webANIMO</ext-link>
                    </p>
                    <p>The webANIMO Manual can be found at</p>
                    <p>
                        <ext-link ext-link-type="uri" xlink:href="http://fmt.cs.utwente.nl/tools/webANIMO/manual.pdf">http://fmt.cs.utwente.nl/tools/webANIMO/manual.pdf</ext-link>
                    </p>
                </list-item>
                <list-item>
                    <label>2. </label>
                    <p>Latest source code:</p>
                    <p>
                        <ext-link ext-link-type="uri" xlink:href="https://bitbucket.org/willemsiers/webanimo_frontend">https://bitbucket.org/willemsiers/webanimo_frontend</ext-link>
                    </p>
                </list-item>
                <list-item>
                    <label>3. </label>
                    <p>Archived source code as at time of publication:</p>
                    <p>
                        <ext-link ext-link-type="uri" xlink:href="http://dx.doi.org/10.5281/zenodo.57206">http://dx.doi.org/10.5281/zenodo.57206</ext-link>
                        <sup>
                            <xref ref-type="bibr" rid="ref-19">19</xref>
                        </sup>
                    </p>
                </list-item>
                <list-item>
                    <label>4. </label>
                    <p>License:</p>
                    <p>MIT (
                        <ext-link ext-link-type="uri" xlink:href="https://opensource.org/licenses/MIT">https://opensource.org/licenses/MIT</ext-link>)</p>
                </list-item>
            </list>
        </sec>
    </body>
    <back>
        <ref-list>
            <ref id="ref-1">
                <label>1</label>
                <mixed-citation publication-type="journal">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Schivo</surname>
                            <given-names>S</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Scholma</surname>
                            <given-names>J</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Wanders</surname>
                            <given-names>B</given-names>
                        </name>
						
                        <etal/>
					</person-group>:
                    <article-title>Modeling biological pathway dynamics with timed automata.</article-title>
                    <source>
						
                        <italic toggle="yes">IEEE J Biomed Health Inform.</italic>
					</source>
                    <year>2014</year>;<volume>18</volume>(<issue>3</issue>):<fpage>832</fpage>&#x2013;<lpage>839</lpage>.
                    <pub-id pub-id-type="pmid">24808226</pub-id>
                    <pub-id pub-id-type="doi">10.1109/JBHI.2013.2292880</pub-id>
                </mixed-citation>
            </ref>
            <ref id="ref-2">
                <label>2</label>
                <mixed-citation publication-type="book">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Schivo</surname>
                            <given-names>S</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Scholma</surname>
                            <given-names>J</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Wanders</surname>
                            <given-names>B</given-names>
                        </name>
						</person-group>:
                    <article-title>Cytoscape 3 animo app.</article-title>
                    <year>2016</year>.
                    <ext-link ext-link-type="uri" xlink:href="http://apps.cytoscape.org/apps/animo">Reference Source</ext-link>
                </mixed-citation>
            </ref>
            <ref id="ref-3">
                <label>3</label>
                <mixed-citation publication-type="journal">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Shannon</surname>
                            <given-names>P</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Markiel</surname>
                            <given-names>A</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Ozier</surname>
                            <given-names>O</given-names>
                        </name>
						
                        <etal/>
					</person-group>:
                    <article-title>Cytoscape: a software environment for integrated models of biomolecular interaction networks.</article-title>
                    <source>
						
                        <italic toggle="yes">Genome Res.</italic>
					</source>
                    <year>2003</year>;<volume>13</volume>(<issue>11</issue>):<fpage>2498</fpage>&#x2013;<lpage>2504</lpage>.
                    <pub-id pub-id-type="pmid">14597658</pub-id>
                    <pub-id pub-id-type="doi">10.1101/gr.1239303</pub-id>
                    <pub-id pub-id-type="pmcid">403769</pub-id>
                </mixed-citation>
            </ref>
            <ref id="ref-4">
                <label>4</label>
                <mixed-citation publication-type="journal">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Larsen</surname>
                            <given-names>KG</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Pettersson</surname>
                            <given-names>P</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Yi</surname>
                            <given-names>W</given-names>
                        </name>
					</person-group>:
                    <article-title>Uppaal in a nutshell.</article-title>
                    <source>
						
                        <italic toggle="yes">Int J Softw Tools Technol Transf.</italic>
					</source>
                    <year>1997</year>;<volume>1</volume>(<issue>1</issue>):<fpage>134</fpage>&#x2013;<lpage>152</lpage>.
                    <pub-id pub-id-type="doi">10.1007/s100090050010</pub-id>
                </mixed-citation>
            </ref>
            <ref id="ref-5">
                <label>5</label>
                <mixed-citation publication-type="journal">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Scholma</surname>
                            <given-names>J</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Schivo</surname>
                            <given-names>S</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Urquidi Camacho</surname>
                            <given-names>RA</given-names>
                        </name>
						
                        <etal/>
					</person-group>:
                    <article-title>Biological networks 101: Computational modeling for molecular biologists.</article-title>
                    <source>
						
                        <italic toggle="yes">Gene.</italic>
					</source>
                    <year>2014</year>;<volume>533</volume>(<issue>1</issue>):<fpage>379</fpage>&#x2013;<lpage>384</lpage>.
                    <pub-id pub-id-type="pmid">24125950</pub-id>
                    <pub-id pub-id-type="doi">10.1016/j.gene.2013.10.010</pub-id>
                </mixed-citation>
            </ref>
            <ref id="ref-6">
                <label>6</label>
                <mixed-citation publication-type="book">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Scholma</surname>
                            <given-names>J</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Schivo</surname>
                            <given-names>S</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Kerkhofs</surname>
                            <given-names>J</given-names>
                        </name>
						
                        <etal/>
					</person-group>:
                    <article-title>ECHO: the executable chondrocyte.</article-title>In
                    <italic toggle="yes">Tissue Engineering &amp; Regenerative Medicine International Society</italic>. European Chapter Meeting, Genova, Italy. Malden, Wiley,<year>2014</year>;<volume>8</volume>:<fpage>54</fpage>&#x2013;<lpage>54</lpage>.
                    <ext-link ext-link-type="uri" xlink:href="http://doc.utwente.nl/91613/1/ECHO_TERMIS2014.pdf">Reference Source</ext-link>
                </mixed-citation>
            </ref>
            <ref id="ref-7">
                <label>7</label>
                <mixed-citation publication-type="journal">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Franz</surname>
                            <given-names>M</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Lopes</surname>
                            <given-names>CT</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Huck</surname>
                            <given-names>G</given-names>
                        </name>
						
                        <etal/>
					</person-group>:
                    <article-title>Cytoscape.js: a graph theory library for visualisation and analysis.</article-title>
                    <source>
						
                        <italic toggle="yes">Bioinformatics.</italic>
					</source>
                    <year>2016</year>;<volume>32</volume>(<issue>2</issue>):<fpage>309</fpage>&#x2013;<lpage>311</lpage>.
                    <pub-id pub-id-type="pmid"> 26415722</pub-id>
                    <pub-id pub-id-type="doi">10.1093/bioinformatics/btv557</pub-id>
                    <pub-id pub-id-type="pmcid">4708103</pub-id>
                </mixed-citation>
            </ref>
            <ref id="ref-8">
                <label>8</label>
                <mixed-citation publication-type="book">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Schivo</surname>
                            <given-names>S</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Wanders</surname>
                            <given-names>B</given-names>
                        </name>
					</person-group>:
                    <article-title>Analysis of Networks with Interactive MOdeling.</article-title>
                    <year>2016</year>.
                    <ext-link ext-link-type="uri" xlink:href="http://fmt.cs.utwente.nl/tools/animo/">Reference Source</ext-link>
                </mixed-citation>
            </ref>
            <ref id="ref-9">
                <label>9</label>
                <mixed-citation publication-type="book">
                    <collab>The jquery foundation</collab>.<year>2016</year>.
                    <ext-link ext-link-type="uri" xlink:href="https://jquery.com/">Reference Source</ext-link>
                </mixed-citation>
            </ref>
            <ref id="ref-10">
                <label>10</label>
                <mixed-citation publication-type="book">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Thompson</surname>
                            <given-names>C</given-names>
                        </name>
					</person-group>:
                    <article-title>qtip
                        <sup>2</sup>.</article-title>
                    <year>2016</year>.
                    <ext-link ext-link-type="uri" xlink:href="http://qtip2.com/">Reference Source</ext-link>
                </mixed-citation>
            </ref>
            <ref id="ref-11">
                <label>11</label>
                <mixed-citation publication-type="book">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Bostock</surname>
                            <given-names>M</given-names>
                        </name>
					</person-group>:
                    <article-title>Data-driven documents (d3).</article-title>
                    <year>2016</year>.
                    <ext-link ext-link-type="uri" xlink:href="https://d3js.org/">Reference Source</ext-link>
                </mixed-citation>
            </ref>
            <ref id="ref-12">
                <label>12</label>
                <mixed-citation publication-type="book">
                    <collab>Inc. World Wide Web Consortium</collab>: Editor Ian Hickson, Google.
                    <article-title>Web storage specification, 2015.</article-title>
                    <year>2016</year>.
                    <ext-link ext-link-type="uri" xlink:href="https://www.w3.org/TR/webstorage/">Reference Source</ext-link>
                </mixed-citation>
            </ref>
            <ref id="ref-13">
                <label>13</label>
                <mixed-citation publication-type="book">
                    <collab>Mozilla Developer Network and individual contributors</collab>:
                    <article-title>Local storage compatibility code.</article-title>
                    <year>2016</year>.
                    <ext-link ext-link-type="uri" xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage">Reference Source</ext-link>
                </mixed-citation>
            </ref>
            <ref id="ref-14">
                <label>14</label>
                <mixed-citation publication-type="book">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Schivo</surname>
                            <given-names>S</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Scholma</surname>
                            <given-names>J</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Karperien</surname>
                            <given-names>HBJ</given-names>
                        </name>
						
                        <etal/>
					</person-group>:
                    <article-title>Setting parameters for biological models with ANIMO.</article-title>In &#x00c9; Andr&#x00e9; and G. Frehse, editors,
                    <italic toggle="yes">Proceedings 1st International Workshop on Synthesis of Continuous Parameters, Grenoble, France.</italic>volume 145 of
                    <italic toggle="yes">Electronic Proceedings in Theoretical Computer Science</italic>. Open Publishing Association;<year>2014</year>;<fpage>35</fpage>&#x2013;<lpage>47</lpage>.
                    <pub-id pub-id-type="doi">10.4204/EPTCS.145.5</pub-id>
                </mixed-citation>
            </ref>
            <ref id="ref-15">
                <label>15</label>
                <mixed-citation publication-type="book">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Aanstoot</surname>
                            <given-names>D</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Beets</surname>
                            <given-names>F</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Bolhaar</surname>
                            <given-names>G</given-names>
                        </name>
						
                        <etal/>
					</person-group>:
                    <article-title>Bringing ANIMO to the future of biology.</article-title>
                    <year>2015</year>.</mixed-citation>
            </ref>
            <ref id="ref-16">
                <label>16</label>
                <mixed-citation publication-type="journal">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Schivo</surname>
                            <given-names>S</given-names>
                        </name>
					</person-group>:
                    <article-title>Design project form-animo.</article-title>
                    <year>2015</year>.</mixed-citation>
            </ref>
            <ref id="ref-17">
                <label>17</label>
                <mixed-citation publication-type="book">
                    <collab>Google Inc</collab>:
                    <article-title>AngularJS.</article-title>
                    <year>2016</year>.
                    <ext-link ext-link-type="uri" xlink:href="https://angularjs.org/">Reference Source</ext-link>
                </mixed-citation>
            </ref>
            <ref id="ref-18">
                <label>18</label>
                <mixed-citation publication-type="other">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Holt</surname>
                            <given-names>M</given-names>
                        </name>
					</person-group>.<year>2016</year>.
                    <ext-link ext-link-type="uri" xlink:href="http://papaparse.com/">Reference Source</ext-link>
                </mixed-citation>
            </ref>
            <ref id="ref-19">
                <label>19</label>
                <mixed-citation publication-type="software">
                    <person-group person-group-type="author">
						
                        <name name-style="western">
                            <surname>Siers</surname>
                            <given-names>W</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Bakker</surname>
                            <given-names>M</given-names>
                        </name>
						
                        <name name-style="western">
                            <surname>Rubbens</surname>
                            <given-names>B</given-names>
                        </name>
						
                        <etal/>
					</person-group>:
                    <article-title>webANIMO front end source code.</article-title>
                    <source>
						
                        <italic toggle="yes">Zenodo.</italic>
					</source>
                    <year>2016</year>.
                    <ext-link ext-link-type="uri" xlink:href="http://dx.doi.org/10.5281/zenodo.57206">Data Source</ext-link>
                </mixed-citation>
            </ref>
        </ref-list>
    </back>
    <sub-article article-type="reviewer-report" id="report15453">
        <front-stub>
            <article-id pub-id-type="doi">10.5256/f1000research.9824.r15453</article-id>
            <title-group>
                <article-title>Reviewer response for version 1</article-title>
            </title-group>
            <contrib-group>
                <contrib contrib-type="author">
                    <name>
                        <surname>Naldi</surname>
                        <given-names>Aur&#x00e9;lien</given-names>
                    </name>
                    <xref ref-type="aff" rid="r15453a1">1</xref>
                    <role>Referee</role>
                    <uri content-type="orcid">https://orcid.org/0000-0002-6495-2655</uri>
                </contrib>
                <aff id="r15453a1">
                    <label>1</label>DIMNP UMR CNRS 5235, Universit&#x00e9; de Montpellier, Montpellier, France</aff>
            </contrib-group>
            <author-notes>
                <fn fn-type="conflict">
                    <p>
                        <bold>Competing interests: </bold>No competing interests were disclosed.</p>
                </fn>
            </author-notes>
            <pub-date pub-type="epub">
                <day>30</day>
                <month>8</month>
                <year>2016</year>
            </pub-date>
            <permissions>
                <copyright-statement>Copyright: &#x00a9; 2016 Naldi A</copyright-statement>
                <copyright-year>2016</copyright-year>
                <license xlink:href="https://creativecommons.org/licenses/by/4.0/">
                    <license-p>This is an open access peer review report distributed under the terms of the Creative Commons Attribution Licence, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.</license-p>
                </license>
            </permissions>
            <related-article ext-link-type="doi" id="relatedArticleReport15453" related-article-type="peer-reviewed-article" xlink:href="10.12688/f1000research.9130.1"/>
            <custom-meta-group>
                <custom-meta>
                    <meta-name>recommendation</meta-name>
                    <meta-value>approve-with-reservations</meta-value>
                </custom-meta>
            </custom-meta-group>
        </front-stub>
        <body>
            <p>WebANIMO is a web interface to the ANIMO modelling tool, enabling to get a grasp of the tool while avoiding a complex installation process (the desktop version is a cytoscape plugin which further requires the UPPAAL software). The client uses cytoscape-JS and provides a model editor, relying on JSON requests to the server to perform simulations. Some features are only available in the desktop version, import and export of cytoscape session files enable the user move between the two versions. The paper explains the motivation behind this web version, and the architecture of the client and server parts. The tool itself and the information available in the paper are sound, but the paper could include more context and be streamlined.</p>
            <p> </p>
            <p> Some background is missing, especially on ANIMO itself and UPPAAL: a complete description of these tools would be out of scope, but a brief introduction would improve the paper.</p>
            <p> </p>
            <p> A paragraph outside of the methods to introduce the user interface and the feature set (edit models, see their revision history, share them online and exchange with the desktop version. Perform analysis on the server, visualize and export the result) would help to understand the scope.</p>
            <p> </p>
            <p> Figures 1 and 4 can probably be merged, providing a single view of the client-server architecture. In figure 1, what is the difference between "ANIMO" and "headless ANIMO" ? Also, does the server version rely on cytoscape (I understand that it doesn't but it could be more clear) ?</p>
            <p> </p>
            <p> Figures 5 and 6 could be better suited for supplementary material or code documentation: stating that client-server communication uses JSON is enough for many technical readers, and these figures will probably not help the non-technical ones.</p>
            <p> </p>
            <p> The authors provide a demo server for webANIMO, with some restrictions on running time to save resources. What would you encourage users who need more power to do: use the desktop version or install their own server? Installing their own server sounds like a good option for groups with both bioinformatics resources and several naive users.</p>
            <p> </p>
            <p> Trying out the web interface:</p>
            <p> </p>
            <p> The tool loaded properly and seems to be working well despite the following minor issues.</p>
            <p> </p>
            <p> If I start to add an interaction with a right-click on the graph, and select a node without validating the new interaction, the temporary link is still visible but can't be added to the model.</p>
            <p> </p>
            <p> I encountered a few CSS issues, which could be tied to my browser (firefox 48 on fedora): 
                <list list-type="bullet">
                    <list-item>
                        <p>the "initial activity slider" is there but not visible (clicking on the gray area under the label does work). The "k" slider for interactions had the same problem.</p>
                    </list-item>
                    <list-item>
                        <p>the text in the comboboxes was too large and only readable after opening the menu.</p>
                    </list-item>
                </list>
            </p>
            <p>Reviewer Expertise:</p>
            <p>NA</p>
            <p>I confirm that I have read this submission and believe that I have an appropriate level of expertise to confirm that it is of an acceptable scientific standard, however I have significant reservations, as outlined above.</p>
        </body>
    </sub-article>
    <sub-article article-type="reviewer-report" id="report15047">
        <front-stub>
            <article-id pub-id-type="doi">10.5256/f1000research.9824.r15047</article-id>
            <title-group>
                <article-title>Reviewer response for version 1</article-title>
            </title-group>
            <contrib-group>
                <contrib contrib-type="author">
                    <name>
                        <surname>Bader</surname>
                        <given-names>Gary D</given-names>
                    </name>
                    <xref ref-type="aff" rid="r15047a1">1</xref>
                    <role>Referee</role>
                    <uri content-type="orcid">https://orcid.org/0000-0003-0185-8861</uri>
                </contrib>
                <contrib contrib-type="author">
                    <name>
                        <surname>Distefano</surname>
                        <given-names>Rosario</given-names>
                    </name>
                    <xref ref-type="aff" rid="r15047a2">2</xref>
                    <role>Co-referee</role>
                </contrib>
                <contrib contrib-type="author">
                    <name>
                        <surname>Isserlin</surname>
                        <given-names>Ruth</given-names>
                    </name>
                    <xref ref-type="aff" rid="r15047a1">1</xref>
                    <role>Co-referee</role>
                    <uri content-type="orcid">https://orcid.org/0000-0002-6805-2080</uri>
                </contrib>
                <contrib contrib-type="author">
                    <name>
                        <surname>Kucera</surname>
                        <given-names>Mike</given-names>
                    </name>
                    <xref ref-type="aff" rid="r15047a1">1</xref>
                    <role>Co-referee</role>
                </contrib>
                <aff id="r15047a1">
                    <label>1</label>The Donnelly Centre, University of Toronto, Toronto, ON, Canada</aff>
                <aff id="r15047a2">
                    <label>2</label>Department of Computer Science, University of Verona, Verona, Italy</aff>
            </contrib-group>
            <author-notes>
                <fn fn-type="conflict">
                    <p>
                        <bold>Competing interests: </bold>No competing interests were disclosed.</p>
                </fn>
            </author-notes>
            <pub-date pub-type="epub">
                <day>26</day>
                <month>8</month>
                <year>2016</year>
            </pub-date>
            <permissions>
                <copyright-statement>Copyright: &#x00a9; 2016 Bader GD et al.</copyright-statement>
                <copyright-year>2016</copyright-year>
                <license xlink:href="https://creativecommons.org/licenses/by/4.0/">
                    <license-p>This is an open access peer review report distributed under the terms of the Creative Commons Attribution Licence, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.</license-p>
                </license>
            </permissions>
            <related-article ext-link-type="doi" id="relatedArticleReport15047" related-article-type="peer-reviewed-article" xlink:href="10.12688/f1000research.9130.1"/>
            <custom-meta-group>
                <custom-meta>
                    <meta-name>recommendation</meta-name>
                    <meta-value>approve-with-reservations</meta-value>
                </custom-meta>
            </custom-meta-group>
        </front-stub>
        <body>
            <p>The authors introduce a new Cytoscape.js-based web app that enables users to simulate a given biological network based on a range of parameters, taking advantage of most of the features of ANIMO (originally developed as a Cytoscape app) without the requirement of installing Cytoscape on the desktop. In general, the new webANIMO system seems useful and well developed, but we have a number of suggestions to improve the manuscript.</p>
            <p> General comments:</p>
            <p> </p>
            <p> The paper mixes descriptions of the user interface with implementation, which is confusing for the reader. It would be better to start with the analysis and use case sections, showing a flowchart of the overall workflow as figure 1, followed by a section describing the user interface (UI) and then the implementation details in a separate section. In particular, the meaning of a &#x2018;model&#x2019; should be explained. Also, the &#x2018;analysis&#x2019; should be described. What is involved? What is the input and what is the output?</p>
            <p> The authors claim that webANIMO was developed because users find the ANIMO app difficult to install. They even go so far as to describe the process as &#x201c;hideous and difficult&#x201d;. This claim should be better supported e.g. by providing results of user uptake or satisfaction between ANIMO and webANIMO. ANIMO installation does not seem terribly difficult.</p>
            <p> Abstract:</p>
            <p> &#x201c;Useful analyses can be performed and displayed to the user in an effective way.&#x201d; Be more specific in what useful analyses webANIMO is for.</p>
            <p> The webANIMO URL should be presented more prominently (e.g. at the top), as it currently only appears at the end of the text.</p>
            <p> Introduction section:</p>
            <p> The introduction should start with an explanation about what ANIMO and webANIMO are for.</p>
            <p> Activation and inhibition symbols are defined but don&#x2019;t seem to be used again in the text &#x2013; is this just explaining the network visualization representation?&#x00a0; In this case, it should be in a figure legend.</p>
            <p> The UPPAAL system should be briefly described.</p>
            <p> Implementation Section:</p>
            <p> What is the purpose of the front end and what is the purpose of the back end? What information is shown/processed at each end? An overall figure explaining the information flow would be useful.</p>
            <p> What does it mean to run &#x2018;headless&#x2019; ANIMO? Is this implemented as a standalone java process, or is it running inside of the Cytoscape OSGi container? This is an important distinction because the ANIMO app depends on Cytoscape. Was that dependency removed?</p>
            <p> User Interface section</p>
            <p> It is mentioned that the decision was made to make the web interface &#x201c;different&#x201d;. Different in what way? The very next sentence says the user interface still resembles the desktop version. These sentences seem to contradict each other.</p>
            <p> Result view section:</p>
            <p> A more detailed description of the meaning of the result view and what it shows would be useful.</p>
            <p> Import and Export section:</p>
            <p> The ability to work in webanimo and desktop animo seamlessly is a great feature. It could be pointed out that this will help Cytoscape users share information with collaborators who may not have installed Cytoscape.&#x00a0;</p>
            <p> It is mentioned that import/export is done client side to avoid server workload. This contradicts the statement in the implementation section that &#x201c;Since web browsers have limited memory and processing power, the tasks of the client are kept to a minimum&#x201d;.</p>
            <p> It is mentioned that users can switch to desktop ANIMO when they need more processing power. How powerful are the webANIMO servers and when should users move to the desktop version?&#x00a0; In general, the authors should clarify when to use the desktop vs. web-based versions and what are the capabilities and features supported by each.</p>
            <p> What sort of network size (number of nodes and edges) does this limit support?&#x00a0; At what point do users need to move to the cytoscape desktop version?&#x00a0; What are the limits of the server? (All of these details should be added to the implementation section)</p>
            <p> Analysis:</p>
            <p> Clarify description of time throughout the paper &#x2013; server processing time or simulated concentration over time?&#x00a0; Why was the limit of one minute chosen?&#x00a0; Is this one minute of processing time on the server or does it also include data transfer?</p>
            <p> &#x201c;The UI is disabled during the analysis and the waiting time is limited to one minute, after which the simulation is forced to terminate and no result is sent back.&#x201d; Why does the platform not return any partial results?</p>
            <p> &#x201c;The choice to perform the analysis on the server was made so the user is not required to install the tools that are needed to perform the simulation. As an added benefit this may improve the simulation time for the user if the device sending the request has slower hardware than the server (which is usually the case if the user accesses webANIMO through a tablet or smartphone).&#x201d; This sounds useful, however, &#x00a0;the web platform became non-responsive on mobile devices while the simulation is running during testing.</p>
            <p> A useful feature not available in webANIMO is the possibility to change the "Reaction kinetics" (available in the desktop version). Is this feature expensive in term of computational costs? Looking at the code, this feature has been implemented (embedded in the HTML code) and disabled. Why did the authors decide to not enable this feature?</p>
            <p> Plot Export section:</p>
            <p> Clarify meaning of graph (network vs. plot/chart) throughout the manuscript.</p>
            <p> Revision History section</p>
            <p> In the implementation section it is mentioned that one of the features of ANIMO that was not implemented in webANIMO is &#x201c;history of previous simulations&#x201d;. This section describes a feature called &#x201c;revision history&#x201d;. How are these features different?</p>
            <p> Online shared networks section:</p>
            <p> What are the benefits of saving and sharing a network vs. just saving the cytoscape session and sending the session? Is there anything in the saved and shared network that is not in the session?</p>
            <p> With the lock files, if you share the network with someone who opens it but then leaves it open in the browser (potentially for hours or days) does that lock you out of your own network?&#x00a0;</p>
            <p> It is nice how the user is given the choice to store their data locally or on the server.</p>
            <p> Operation section:</p>
            <p> "Installing webANIMO on a server requires PHP version 5.2 or higher, Java version 8 or higher and an UPPAAL 4.1 installation." &#x2013; clarify why one would want to install a local version vs. using the easy to use web version or the Cytoscape app.</p>
            <p> use cases section:</p>
            <p> This is more like a simple tutorial than a list of use cases. Suggest either describing use cases only (e.g. gene knock out), develop the tutorial better (e.g. adding figures), or replace with a link to an online tutorial.</p>
            <p> Minor points:</p>
            <p> "propery" should be property</p>
            <p> Figure 1: this picture could be improved by moving the "Cytoscape JS" block inside the "webANIMO" block and the "webANIMO" block inside the "web browser" block.&#x00a0; Also, remove "JS" from the webANIMO block name, since webANIMO is platform, not a library. Or, if the JS is meant to indicate that the block is implemented in javascript (and not a module name), then the languages for the other blocks should be specified for consistency.&#x00a0; In the latter case, &#x201c;Cytoscape JS&#x201d; should be &#x201c;cytoscape.js&#x201d;</p>
            <p> Figure 4: "POST" could be removed from the I/O system diagram &#x2013; the main point is request/response.</p>
            <p> We noticed a Javascript error associated with the tooltip library (when interacting with the line chart)</p>
            <p>Reviewer Expertise:</p>
            <p>NA</p>
            <p>We confirm that we have read this submission and believe that we have an appropriate level of expertise to confirm that it is of an acceptable scientific standard, however we have significant reservations, as outlined above.</p>
        </body>
    </sub-article>
    <sub-article article-type="reviewer-report" id="report15146">
        <front-stub>
            <article-id pub-id-type="doi">10.5256/f1000research.9824.r15146</article-id>
            <title-group>
                <article-title>Reviewer response for version 1</article-title>
            </title-group>
            <contrib-group>
                <contrib contrib-type="author">
                    <name>
                        <surname>Thieffry</surname>
                        <given-names>Denis</given-names>
                    </name>
                    <xref ref-type="aff" rid="r15146a1">1</xref>
                    <role>Referee</role>
                </contrib>
                <contrib contrib-type="author">
                    <name>
                        <surname>Hernandez</surname>
                        <given-names>C&#x00e9;line</given-names>
                    </name>
                    <xref ref-type="aff" rid="r15146a1">1</xref>
                    <role>Co-referee</role>
                </contrib>
                <aff id="r15146a1">
                    <label>1</label>Computational Systems Biology Team, CNRS, Inserm, Ecole Normale Sup&#x00e9;rieure, PSL Research University, Institute of Biology of the Ecole Normale Sup&#x00e9;rieure, Paris, France</aff>
            </contrib-group>
            <author-notes>
                <fn fn-type="conflict">
                    <p>
                        <bold>Competing interests: </bold>No competing interests were disclosed.</p>
                </fn>
            </author-notes>
            <pub-date pub-type="epub">
                <day>1</day>
                <month>8</month>
                <year>2016</year>
            </pub-date>
            <permissions>
                <copyright-statement>Copyright: &#x00a9; 2016 Thieffry D and Hernandez C</copyright-statement>
                <copyright-year>2016</copyright-year>
                <license xlink:href="https://creativecommons.org/licenses/by/4.0/">
                    <license-p>This is an open access peer review report distributed under the terms of the Creative Commons Attribution Licence, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.</license-p>
                </license>
            </permissions>
            <related-article ext-link-type="doi" id="relatedArticleReport15146" related-article-type="peer-reviewed-article" xlink:href="10.12688/f1000research.9130.1"/>
            <custom-meta-group>
                <custom-meta>
                    <meta-name>recommendation</meta-name>
                    <meta-value>approve-with-reservations</meta-value>
                </custom-meta>
            </custom-meta-group>
        </front-stub>
        <body>
            <p>
                <bold>I) Summary</bold>
            </p>
            <p> </p>
            <p> The authors reports the development of a web interface, called webANIMO, for their former Cytoscape app ANIMO, which allows the dynamical modelling and analysis biological signalling networks. This client/server application removes the burden technical installation burden, thereby providing naive users direct and easy access to the tool and some of its analysis features.</p>
            <p> </p>
            <p> 
                <bold>II) Suggestions on the manuscript</bold>
            </p>
            <p> </p>
            <p> 1) We would suggest to reorganize the figures to improve their general organisation and emphasize more the features of webANIMO with respect to ANIMO: 
                <list list-type="bullet">
                    <list-item>
                        <p>Merge Figures 1 and 4, keeping two distinct parts.</p>
                    </list-item>
                    <list-item>
                        <p>Send Figure 2 to the supplementary material, as this manuscript is about webANIMO, and I don't think that it is very useful to display the interface of ANIMO in the core of this manuscript, and anyway its contents is largely redundant with that of Figure 3.</p>
                    </list-item>
                    <list-item>
                        <p>Send Figure 5 to the supplementary material or to the tutorial, as its contains is likely too technical for the naive user of webANIMO, and probably not very informative for the expert.</p>
                    </list-item>
                    <list-item>
                        <p>The Figure 7 appears of limited interest and partly redundant with the right part of Figure 3. Perhaps, it would be more interesting to use this figure to illustrate another case study.</p>
                    </list-item>
                </list> </p>
            <p> 2) As UPPAAL plays a central role, it would be good to include a brief introduction to this tool and more specifically to the functionalities (and underlying principles) used in webANIMO.</p>
            <p> </p>
            <p> 3) It is not clear to us what are the restrictions regarding the kinetic terms that can be encoded with webANIMO vs ANIMO. The set of &#x201c;scenarios&#x201d; considered seems to be pretty limited. Their naming refer to biochemical reactions whatever the type of molecules defined as sources and targets. Furthermore, their number appears limited and their nature very simple... Would it be possible for example to consider Hill functions (widely used for transcriptional regulations)? The consideration of sufficiently non-linear terms is a prerequisite to the reproduction of sophisticate dynamics, such as oscillatory behaviour. In any case, these restrictions should be clearly stated in the manuscript, perhaps b y including a table with examples of reactions and interactions (in isolation or in combinations) along with recommended scenarios and descriptions of their limitations.</p>
            <p> </p>
            <p> 4) It would be useful to include a few more case studies, e.g. implementations of simple gene networks such as the toggle switch (Gardner 
                <italic>et al., </italic>2000) and the repressillator (Elowitz 
                <italic>et al., </italic>2000).</p>
            <p> </p>
            <p> 
                <bold>II) Testing the tool</bold> 
                <bold>Web interface</bold>
            </p>
            <p> </p>
            <p> The web interface could be opened successfully and was fast to load. No particular error was observed while randomly clicking on the interface. No problems were observed while importing/exporting networks or plots. The exported session could successfully be locally imported in Cytoscape.</p>
            <p> </p>
            <p> 
                <bold>Proposed improvements/new functionalities</bold>
            </p>
            <p> </p>
            <p> 5) Default name should be proposed for any new reactant (e.g. Reactant1, Reactant2, etc.), while having the text selected for direct edition by the user. This would allow fast creation of Reactants in order to focus more on the structure of the network.</p>
            <p> </p>
            <p> 6) To delete a node, apart from the right-click option, one has to use the button "Remove" which is close to the Description text area, thus difficult to find. It is not intuitive that this button deletes reactants. A more intuitive way to implement this functionality would be a "Delete" icon in the menu (usually a garbage bin) removing selected elements.</p>
            <p> </p>
            <p> 
                <bold>Unwanted behaviors</bold>
            </p>
            <p> </p>
            <p> 7) From an empty network, create two reactants and start adding a reaction between them. While the "Add interaction" panel is active it is still possible to delete the reactants through right click menu: the thin blue reaction line is still displayed on the editor with no possibility to remove it excepted from reloading the page</p>
            <p> </p>
            <p> 8) From a network, use Zoom to fit and then Zoom out a few times. The displayed network will become partially hidden from the view, obliging the user to re-center it. A more intuitive behavior would be to zoom using the centre of the editor as reference, instead of the top left corner.</p>
            <p> </p>
            <p> 9) Apparently, the "Network" -&gt; "New" functionality actually clears the current network even if the network was shared. This might create some confusion in the case of shared networks, as one user could clear accidentally a shared network. The previous version would not be available through the Revision history. It might be more intuitive to (i) add a "Clear" item in the "Network" menu, (ii) create a new URL when the user clicks "Network" -&gt; "New".</p>
            <p> </p>
            <p> 10) When clicking on "Network" -&gt; "Get shareable link" a text message warns the user that his network is going to be saved remotely, but there is no "Cancel" option in case this was not intended.</p>
            <p> </p>
            <p> 
                <bold>Manual</bold>
            </p>
            <p> </p>
            <p> 11) Section 2 of the Manual presents basic features, but no visual help or guidance through screenshots, while this would help new users find their way in the interface and see if what they are doing is correct or not.</p>
            <p> </p>
            <p> 12) webANIMO comes with two example networks "Model base" and "Chrondrocyte". It would be helpful for the new user to have a short description of these networks in the Manual, as well as expected results after direct simulation through with the "Analyse" button. Proposed exercises on these networks could help the new user experiment and learn specific features in webANIMO.</p>
            <p> </p>
            <p> 13) I would suggest to split the current Manuel into two complementary documents: a Manual and a tutorial: - The manual aiming to provide a comprehensive description of the tool and its functionalities. - The tutorial aiming to help the user to develop his first models and analyses, starting from simple applications up to more complex ones.</p>
            <p>Reviewer Expertise:</p>
            <p>NA</p>
            <p>We confirm that we have read this submission and believe that we have an appropriate level of expertise to confirm that it is of an acceptable scientific standard, however we have significant reservations, as outlined above.</p>
        </body>
        <back>
            <ref-list>
                <title>References</title>
                <ref id="rep-ref-15146-1">
                    <label>1</label>
                    <mixed-citation publication-type="journal">
                        <person-group person-group-type="author"/>:
                        <article-title>Construction of a genetic toggle switch in Escherichia coli.</article-title>
                        <source>
                            <italic>Nature</italic>
                        </source>.<year>2000</year>;<volume>403</volume>(<issue>6767</issue>) :
                        <elocation-id>10.1038/35002131</elocation-id>
                        <fpage>339</fpage>-<lpage>42</lpage>
                        <pub-id pub-id-type="pmid">10659857</pub-id>
                        <pub-id pub-id-type="doi">10.1038/35002131</pub-id>
                    </mixed-citation>
                </ref>
                <ref id="rep-ref-15146-2">
                    <label>2</label>
                    <mixed-citation publication-type="journal">
                        <person-group person-group-type="author"/>:
                        <article-title>A synthetic oscillatory network of transcriptional regulators.</article-title>
                        <source>
                            <italic>Nature</italic>
                        </source>.<year>2000</year>;<volume>403</volume>(<issue>6767</issue>) :
                        <elocation-id>10.1038/35002125</elocation-id>
                        <fpage>335</fpage>-<lpage>8</lpage>
                        <pub-id pub-id-type="pmid">10659856</pub-id>
                        <pub-id pub-id-type="doi">10.1038/35002125</pub-id>
                    </mixed-citation>
                </ref>
            </ref-list>
        </back>
    </sub-article>
</article>
