About GRNsight

GRNsight is an open source web application for visualizing models of small- to medium-scale gene regulatory networks. GRNsight is a joint project of the Loyola Marymount University Bioinformatics and Biomathematics Groups, headed by Dr. Kam Dahlquist, Dr. John David N. Dionisio, and Dr. Ben G. Fitzpatrick. Undergraduate students initiated the development of GRNsight in Spring 2014, including Britain Southwick (Computer Science, ’14) and Nicole Anguiano (Computer Science, ’16), with consultation from Katrina Sherbina (Biomathematics, ’14). For a list of other former and current developers, see the People page.

A gene regulatory network (GRN) consists of genes, transcription factors, and the regulatory connections between them, which govern the level of expression of mRNA and protein from those genes. GRNs can be mathematically modeled and simulated by applications such as GRNmap, a MATLAB program that estimates the parameters and performs forward simulations of a differential equations model of a GRN. Computer representations of GRNs, such as the models output by GRNmap, are in the form of a tabular spreadsheet (adjacency matrix) that is not easily interpretable. Ideally, GRNs should be displayed as diagrams (graphs) detailing the regulatory relationships (edges) between each gene (node) in the network. To address this need, we developed GRNsight.

GRNsight allows users to upload spreadsheets generated by GRNmap and uses the information in these spreadsheets to automatically create and display a graph of the GRN model through a physics-based force simulation or in a grid layout. The application colors the edges and adjusts their thickness based on the sign (activation or repression) and the strength (magnitude) of the regulatory relationship, respectively. Nodes can be colored based on time course gene expression data found in the GRNmap spreadsheet. Finally, GRNsight allows the user to modify the graph in order to define the best visual layout for the network. Most of GRNsight is written in JavaScript. HTTP requests are handled using Node.js and the Express framework. Graphs are generated through D3.js, a JavaScript data visualization library.

Although originally designed for gene regulatory networks, we believe that GRNsight has general applicability for displaying any small, unweighted or weighted network with directed edges for systems biology or other application domains.

GRNsight has been tested with and confirmed to be working in Chrome version 94.0.4606.54 or higher and Firefox version 92.0 or higher on Windows 7 and Mac OS X operating systems. It may not work with other browsers, versions, or operating systems.
GRNsight v5.0.0 includes the following new features and bug fixes:
  • Created Client-Side testing documents for testing User Interface
    • It gives a set of instructions for a human to perform the tests because automated testing requires data analysis of the graph state to determine whether the desired feature has been achieved.
    • The tests are generated for a subset of features by permuting all possible combinations of feature states, which creates steps for the user to follow.
    • Each feature is given a unique static ID that is used to reference it easily
    • The generator script can include features based on an activation state in the features JSON, by command line arguments, or by a separate JSON file created by the tester.
    • The client-side testing document was updated so that the features include their ID, and the wiki was updated.
  • Improved Import and Export functionality
    • GRNsight expanded its testing capabilities to check sheets that are not necessary to display a gene regulatory network model but are used in the GRNmap MATLAB software.
    • Error and warning messages became more descriptive and pinpointed which sheet the issue was found in, and the row/column or cell that the error was located.
  • Refatored existing GRNsight import test, and expanded export tests
    • Refactored existing GRNsight code to consolidate error and warning messages, as well as adding new tests for additional sheets in a GRNsight workbook.
    • Updated tests to reflect additional features that GRNsight recently developed.
    • Expanded export tests to increase user visibility on possible errors that occurred during the import process.
    • Fixed bugs within the existing GRNsight export functionality and created a system to automatically fix minor issues within a workbook, alert a user of issues within a file that they must fix, or send an error message that something went wrong with the export process.
  • Graph visualization was refined
    • Improved edge detection for nodes, eliminating issues with nodes going out of the viewport.
    • Grey edge threshold was fixed to properly gray out all edges at 100% threshold.
    • Toggle buttons were fixed so that all buttons properly represent the state of the program.
    • Viewport resizing was modified to account for window resizing.
  • Model-View-Controller (MVC) Architecture
    • MVC separates the software into 3 main, interconnected parts, which control various parts of the software. The controller listens for any changes to the application state enacted by the user.
    • Strict MVC reduces bugs, simplifies the codebase, makes it much simpler for developers to revise and add new features to GRNsight, and makes code readability much easier.
  • Export to excel feature
    • GRNsight can import data in a variety of formats including Excel workbook, SIF, and GraphML and can export to SIF and GraphML.
    • Added an element to the user interface that gives the user the option to export GRNsight data to an Excel workbook.
  • Gene information from Public Databases when a user selects a node
    • Application Processing Interfaces (APIs) allow GRNsight to gather data from public databases for display on gene pages.
    • Databases include Saccharomyces Genome Database (SGD), NCBI gene database, UniProt, JASPAR.
  • Documentation update
    • Updated wiki layout
    • New documentation
GRNsight v4.0.0 includes the following new features and bug fixes:
  • GRNsight now follows a strict Model-View-Controller paradigm for its basic architecture. Except for the graphs, all elements displayed in the iframe (the main GRNsight functionality) now follow this architecture. These changes have occurred "under the hood" and will not be noticeable to users, except that it has made GRNsight more robust and has facilitated fixing many bugs caused by the interactions of new features introduced in previous versions
    • Force Graph Parameter slider values are saved when a graph is uploaded
    • The File -> Reload menu option reloads the graph in the layout configuration it was previously in
    • Reset and Undo Reset Buttons are now grayed out when the Force Graph Parameter sliders are locked
    • Various bugs that arose from the refactor are now fixed.
  • The Gene Page feature was improved both in its layout and "under the hood" to make database API calls and queries more robust. Changes were made to eventually enable the retrieval of gene information for genes from species other than Saccharomyces cerevisiae
    • Gene page variables are also now a part of GRNstate in the Model-View-Controller paradigm
  • Zoom levels remain consistent despite any user-defined parameter changes
  • A bug was fixed in the automatic selection of the edge weight normalization factor. GRNsight now correctly uses the highest magnitude weight value for the default normalization factor, disregarding the sign of the weight
  • Gray edges now only have one thickness
  • GRNsight now returns an error when a file is too large
  • The dropdown menu and sidebar menu viewport sizes now initialize to the same values
  • The Log Fold Change Max Value field will only accept positive values, and the allowable range has been set to 0.01 - 100
  • GRNsight is now wholly served over HTTPS
  • GRNsight libraries and documentation were updated
GRNsight v3.1.0 includes the following new features and bug fixes:
  • Added new gene information page feature
    • A dynamic gene information webpage now opens when a user right-clicks on a node in the graph. The page sends a series of Asynchronous JavaScript and XML (AJAX) data requests, written using the jQuery JavaScript library, to the JASPAR, NCBI Gene, UniProt, Ensembl, and Saccharomyces Genome Databases. The webpage is then populated with data returned regarding the gene’s description, protein sequence, DNA binding motif frequency matrix and sequence logo, and Gene Ontology terms.
  • Began a refactor to consolidate state management into a single controller for user selected options
    • The front end has now started to follow a Model-View-Controller Architecture (MVC), and has a combination of new files to reflect that change
  • Numbers can now be used as node labels
  • Various bug fixes and UI enhancements
    • The option to Default to black edges has been reworded to be consistent with node coloring, and the behavior has been changed to reload the graph upon selection
    • The print modal does not load twice when trying to print
    • The viewport "Fit to window" option now functions properly
    • Weight value font now shows up properly
    • The check box for dashed edges has been moved underneath the gray threshold slider
GRNsight v3.0.0 includes the following new features and bug fixes:
  • Node coloring feature was added to visualize gene expression data
    • Node coloring feature was added to visualize gene expression data
    • GRNsight's Excel spreadsheet controller was expanded to process data from entire GRNmap input or output workbook, including expression and meta data
    • Node coloring feature was implemented
    • Demo Files #1 and #2 were updated to be in the correct format for node coloring
  • Grid Layout option was added
  • Gray edges options were improved
    • Gray edge threshold value was changed to percent scale (0 - 100%)
    • Option to show gray edges as dashed was added to increase accessibility for color-blind users
  • User Interface was updated with new features
    • Dropdown menu options were expanded to duplicate all functions available in the sidebar menu
    • State variables for user selected options were consolidated
    • New features were added to the client-side testing document
  • Security Vulnerability with "qs" package was resolved
  • Webpack module bundler added to GRNsight
GRNsight v2.3.0 includes the following new features and bug fixes:
  • d3 visualization library was updated to v4.
    • It was determined that the move from v3 to v4 was feasible.
    • Transitioned GRNsight to d3 v4.
    • Removed sliders for "Charge Distance" and "Gravity" since the combination of "Link Distance" and "Charge" sliders accomplishes the same functionality.
  • ESLint correctly applied to code base.
    • Found that ESLint was inconsistent between Mac and Windows developers.
    • Linting errors were fixed.
  • Bug relating to edge weights were fixed.
    • Minimum weights have been normalize to zero instead of the smallest weight in the worksheet.
    • Edges that have the same weight value now render as thickest instead of thinnest edge thickness.
  • Syntactic tests for malformed GraphML XML (.graphml) files were completed which return errors to the user if an incorrectly formatted GraphML XML file is imported into GRNsight.
  • Developer-related issues were resolved.
    • npm start procedure was fixed for Windows users.
GRNsight v2.1.11 includes the following new features and bug fixes:
  • Improvements were made to the zoom functionality, including:
    • Zoom now originates from the center of the graph
    • Zoom factor is now annotated on zoom slider
    • A vertical bar on the zoom slider indicates where the 100% zoom level is
    • Mousewheel zoom was disabled
    • Various bugs were fixed
  • The user can now customize the normalization factor which controls how the thicknesses of the edges are determined based on the weight values or reset it back to the default value for that graph
    • The user can also set the threshold upon which a weighted edge is colored gray using a slider
  • Additional tests were added:
    • Syntactic tests for malformed Simple Interaction Format (.sif) files were completed which return errors to the user if an incorrectly formatted SIF file is imported into GRNsight
    • The routine that checks for syntactic errors in SIF and GraphML files was integrated with the semantic checker routine that looks for error common to all file formats that GRNsight supports
    • Tests for incorrectly named Excel worksheets were added
    • GRNsight now returns an error if a blank Excel, SIF , or GraphML file is uploaded
  • An automatic client-side test generator was created that generates a document that can be followed by a user to systematically test specific combinations of user interface functions
  • Additional bugs were fixed
  • Code quality was improved by the use of ESLint
GRNsight v2.0.20 includes the following new features and bug fixes:
  • When a weighted graph is loaded, the user now has the options to show weights upon mouseover of an edge, always show weights, or never show weights
  • The bounding box and viewport for the graph have been separated allowing for the following new features:
    • The bounding box can now be fixed to the size of the viewport or adapted to the size of the graph
    • The viewport size can be selected from among small, medium, and large options
    • The best viewport size is automatically detected from the browser
    • The viewport can be fit to the size of the browser window
    • Zooming and scrolling have been enabled and refined
  • Improvements to visuals have been made, including:
    • Reducing the white space on either side of a node label for long labels
    • Setting the minimum size of a node
    • Making the pointed arrowhead larger for the thinnest edges
    • Minor adjustments to the placement and centering of edge end-markers
  • The use of special characters (except for "-" and "_") in node labels are no longer supported due to integration of cytoscape.js code into GRNsight for future implementation of graph statistics feature
  • "Under the hood":
    • The versions of package dependencies have been standardized and documented in the package.json file
    • Code has been ported to version v0.7.2 of Node-xlsx
    • Testing suite has been refactored into semantic and syntactic tests
    • Additional syntactic tests have been written for SIF format
    • A catch-all syntactic error has been implemented for ill-formed GraphML files so that the server doesn't crash upon loading
    • A cap has been placed on the number of errors returned according to a tunable strictness parameter
  • Numerous bugs have been fixed
GRNsight v1.18 includes the following new features and bug fixes:
  • Implemented import of weighted and unweighted network data from Simple Interaction Format (SIF, *.sif) format.
  • Implemented export of weighted and unweighted network data to Simple Interaction Format (SIF, *.sif) format.
  • Implemented import of weighted and unweighted network data from GraphML (*.graphml) format.
  • Implemented export of weighted and unweighted network data to GraphML (*.graphml) format.
  • Menu items for features that are not yet implemented are hidden.
  • The true filenames of the demo files now display in the menu bar.
  • Fixed bug where weights were not displaying upon edge mouseover by new implementation of the feature.
GRNsight v1.12 includes the following new features and bug fixes:
  • The node and edge count is now displayed in the green menu bar.
  • The tooltips that display the weight values of edges were disabled for unweighted networks.
  • Most libraries that GRNsight uses have been updated to the most current version. See this wiki page for a list of libraries and versions.
  • The test suite, test.js, was refactored to make unit tests more concise.
  • Two warning messages were created to address potential formatting problems with input Excel spreadsheets:
    • Extraneous data outside of the adjacency matrix.
    • NaN's found in the adjacency matrix.
GRNsight v1.10.4 includes the following new features and bug fixes:
  • Made edges gradually turn straight when nodes get close enough to each other.
  • Implemented an upload counter for Google Analytics.
  • Implemented additional test cases for the unit testing framework.
GRNsight v1.10 includes the following new features and bug fixes:
  • Implementation of unit testing framework to facilitate test-driven development (TDD).
  • Adjusted and refined space between repressor bars and their attached nodes.
  • Added page counter to the bottom of each webpage based on data collected through Google Analytics.
GRNsight v1.8.2 includes the following new features and bug fixes:
  • Nodes and self-referential edges no longer go outside the bounding box of the graph.
  • A bug was fixed that had inactivated the reset button before graph is loaded.
GRNsight v1.8 includes the following new features and bug fixes:
  • Two additional demo files have been provided for users to view: Demo #3 Unweighted GRN (21 genes, 31 edges) and Demo #4 (21 genes, 31 edges, Schade et al. 2004 data).
  • GRNsight now allows the user to upload spreadsheets with asymmetric adjacency matrices. I.e., the number, identity, and order of genes across the top and side of the adjacency matrix do not have to match.
  • The size of the bounding box for the graph has been fixed to a particular size.
  • Edges between nodes no longer go outside the bounding box; self-referential edges do still go outside the bounding box--this will be addressed in a future release.
  • A bug in Firefox that was chopping off points of arrowheads has been fixed.
  • When a weighted graph is displayed, a message appears underneath the Undo Reset button to remind the user to "Mouse over the edges to see the weight parameter values."
  • A workaround for printing in Firefox has been described.
  • Nodes and self-referential edges no longer go outside the bounding box of the graph.
  • A bug was fixed that had inactivated the reset button before graph is loaded.
GRNsight v1.6 includes improvements to the appearance of the gene regulatory network graphs and fixes for several reported issues as follows:
  • The arrowhead sizes of the self-referential edges were customized for each edge thickness to improve the appearance of the gene regulatory network graphs. The arrowheads are now centered on the self-referential edges. In Firefox, the pointy end of large self-referential arrowheads are being chopped off. This issue will be fixed in a future release.
  • The ability for the server to reject erroneous files without crashing was improved.
  • Several bugs related to the Reload and Open functions were fixed.
  • The Reload and Print menu options were disabled before a gene regulatory network graph was loaded because there is nothing to reload or print at that point.
  • The force graph parameter sliders, lock force graph parameter sliders check box and menu item, and reset force graph parameter button and menu item were all set to be active before a spreadsheet is loaded. The values set before loading will be used when a spreadsheet is loaded.
  • Two options were added to the Edit > Preferences menu: "Format edges based on optimized weight parameters" or "Default to black edges with regular arrowheads". When "Format edges based on optimized weight parameters" is selected, spreadsheets named "network_optimized_weights" containing weighted values in the adjacency matrix will display with color and variable thicknesses depending on the weight values of the relationships between edges. If "Default to black edges with regular arrowheads" is selected, all graphs will appear as unweighted graphs.
  • Printing was enabled in the File menu. Mac users can utilize native print to PDF function available from their operating system to print the graph to a PDF file. Windows users will need to have the full version of Adobe Acrobat (or other "print to PDF" utility) to print graphs to a PDF file. There is a known bug with the print function printing an extra blank page that is currently being investigated for a fix in a later release.
  • Various bug fixes were implemented regarding the loading of the Demo GRNs and unusual behavior of the first node created from a spreadsheet.
  • Code was brached so that the stable v1.2 runs on the GRNsight home page, while v1.3 Beta runs on a new Beta page for live testing of new features.
  • Improvements were made to the user interface layout:
    • A menu bar was implemented to organize GRNsight functions and options.
    • Instead of separate “Open” and “Submit” buttons, the “Open” menu option opens a dialog from which to choose a GRNmap spreadsheet and then automatically loads the graph; a new "Reload" option was implemented that reloads the current graph.
    • Information about each force graph parameter was added into a tooltip that appears upon hovering over the label.
  • A Demo menu option was implemented to load sample unweighted and weighted gene regulatory networks.
  • For graphs with weighted edges, the method for determining the thickness and coloring of the edges was changed. The way that GRNsight now determines the edge thickness is as follows. GRNsight divides all weight values by the absolute value of the maximum weight in the matrix to normalize all the values to between zero and 1. GRNsight then adjusts the thickness of the lines to vary continuously from the minimum thickness (for normalized weights near zero) to maximum thickness (normalized weights of 1). Edges with positive normalized weight values from 0.05 to 1 are colored magenta; edges with negative normalized weight values from -0.05 to -1 are colored cyan. Edges with normalized weight values between -0.05 and 0.05 are colored grey.
  • Improvements were made to the appearance of the triangular arrowheads, blunt arrowheads, and circular edges. The triangular arrowheads and blunt arrowheads were also changed to be assigned on the same continuous linear scale as the edges.
  • Cosmetic issues and performance issues were fixed by temporarily removing the highlighting and outlining of edges.
  • The ranges and default values of the force graph parameters were adjusted to optimize the automatic layout of the Demo networks consisting of 21 nodes and 50 edges.
  • grnsight.cs.lmu.edu was configured to serve 4 services via standard ports to reduce likelihood of blockage by anti-malware software.
  • GRNsight has a service-oriented architecture.
    • GRNsight has two pieces: a server and a web client.
    • The server is responsible for receiving and parsing an Excel spreadsheet uploaded by the user.
    • The server uses the Node.js framework.
    • The web client receives data from the server and generates the graph visualization.
  • GRNsight uses the Data-Driven Documents (D3) JavaScript library to generate a graph derived from input network data.
    • D3 dynamically manipulates HTML and Scalable Vector Graphics (SVG) to form the elements of the graph.
    • GRNsight implements D3’s force layout, which applies a physics-based simulation to the graph.
    • D3 also allows for the fine tuning of Cascading Style Sheets (CSS), the code that styles web pages.
  • The default implementation of D3 simply had nodes and edges. We added several features, including:
    • Rectangular nodes.
    • Labels on nodes.
    • Variant node size.
    • Multiple arrowheads were created as to represent the different types of edges depicted by the graph (activation, repression, and self-regulation).
    • A special case was added to add a looping edge if a node regulated itself.
    • Edge thickness varies based on the weight parameters in the spreadsheet uploaded by the user. Four thicknesses are set based on the four quartiles of the range of the weight parameter values.
    • Edge color is based on the sign of the weight parameter. Positive values are colored magenta and negative values are colored cyan. Values in the first quartile near zero are colored gray.
    • Tooltips display the weight value of an edge upon mouse hover; four significant digits are displayed.
    • Edges were given a white outline to better distinguish them when multiple edges overlapped.
    • The user can drag nodes to customize their view of the network.
    • Edges adapt their anchor points to the movements of the nodes.
    • Dragging a node will highlight all adjacent edges.
  • The user interface is compatible with Firefox and Chrome browsers.
    • File upload is via a simple HTML form element.
    • Nodes are displayed as interactive HTML elements.
    • Advanced users can utilize force graph parameter setting sliders to refine the visualization.
      • Nodes have a charge, which repels or attracts other nodes.
      • The charge distance determines at what range a node’s charge will affect other nodes.
      • The link distance determines the minimum distance maintained between nodes.
      • Gravity determines how strongly the nodes are drawn to the center of the graph.
      • Sliders can be locked to prevent changes.
If you use GRNsight in your work, please cite:
Dahlquist, K.D., Dionisio, J.D.N., Fitzpatrick, B.G., Anguiano, N.A., Varshneya, A., Southwick, B.J., Samdarshi, M. (2016) GRNsight: a web application and service for visualizing models of small- to medium-scale gene regulatory networks. PeerJ Computer Science 2:e85. DOI: 10.7717/peerj-cs.85.
This publication references GRNsight v1.18.1. The Zenodo-generated DOI for the latest software release is:
DOI
This work is partially supported by NSF award 0921038 (Kam D. Dahlquist, Ben G. Fitzpatrick, and Katrina Sherbina), a Kadner-Pitts Research Grant (Kam D. Dahlquist), the Loyola Marymount University Rains Research Assistant Program (Nicole A. Anguiano, Eileen J. Choe, Mihir Samdarshi), and the Loyola Marymount University Summer Undergraduate Research Program (Anindita Varshneya, John L. Lopez).
  • Every user's submitted data are private and not viewable by anyone other than the user. Uploaded data reside as temporary files and are deleted from the GRNsight server during standard operating system file cleanup procedures.
  • This site uses Google Analytics to count pageviews and file uploads to demonstrate usage of our software to interested parties such as our employers and funding agencies. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.
This project has been released with a Contributor Code of Conduct. Participants in this project have agreed to abide by its terms. The full Code of Conduct can be read here.