Add this to "About" page text

[kdahlquist]

I've written/collected some text for the About page on the web site. You can see that it's organized into subsections; a lot of it is taken from either the LMU symposium abstract or 402 presentation slides. As this page will now get long, implementing the openable section headers will now be needed. I'm pasting the text I wrote below, but I'm also going to e-mail it to you as a Word document, in case that's easier. Please edit the v1.1 Beta release notes if I've not gotten it exactly right. When that gets merged with the master, that will be come the v1.2 release notes. Also, there is one place where I mention gravity, but I didn't know what to say, so if you could fill that in, please do. I've made this a priority 0 since it is mostly just uploading new text to the About page, but prioritize the other stuff for this week first if you need the time.

About GRNsight

GRNsight is a web application for visualizing medium-scale models of 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. Several undergraduate students initiated the development of GRNsight in Spring 2014, including Britain Southwick (Computer Science, ’14), Katrina Sherbina (Biomathematics, ’14) and Nicole Anguiano (Computer Science, ’16). At present, Nicole Anguiano is continuing development on the project.
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 tabular spreadsheets (in the form of an adjacency matrix) that are 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 is an open source web application for visualizing mathematical models of GRNs. It 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. 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. Finally, GRNsight then 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. Availability • This web site is free and open to all users and there is no login requirement. • Web site content is available under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. • GRNsight code is available under the open source BSD license [link to: http://opensource.org/licenses/BSD-3-Clause].

Release Notes GRNsight v1.1 Beta • Branched code so that the stable v1.0 runs on the GRNsight home page, while v1.1 Beta runs on a new Beta page for live testing of new features. • Improvements were made to the user interface layout: o A menu bar was implemented to organize GRNsight functions and options. o Instead of multiple “Open” and “Submit” buttons, the “Open” menu option opens a dialog form which to choose a GRNmap spreadsheet and then automatically loads the graph; a reload option was implemented. • Improvements were made to the appearance of the triangular arrowheads, blunt arrowsheads, and circular edges • Cosmetic issues were fixed regarding the outlining and highlighting of edges. • grnsight.cs.lmu.edu was configured to serve 4 services via standard ports to reduce likelihood of blockage by anti-malware software.

GRNsight v1.0 • GRNsight has a service-oriented architecture. o GRNsight has two pieces: a server and a web client. o The server is responsible for receiving and parsing an Excel spreadsheet uploaded by the user. o The server uses the Node.js framework. o 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. o D3 dynamically manipulates HTML and Scalable Vector Graphics (SVG) to form the elements of the graph. o GRNsight implements D3’s force layout, which applies a physics-based simulation to the graph. o 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: o Rectangular nodes. o Labels on nodes. o Variant node size. o Multiple arrowheads were created as to represent the different types of edges depicted by the graph (activation, repression, and self-regulation). o A special case was added to add a looping edge if a node regulated itself. o Edge thickness varies based on the weight parameters input by the user. Four thicknesses are set based on the four quartiles of the range of the input weight parameters. o 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. o Tooltips display the weight value of an edge upon mouse hover; four significant digits are displayed. o Edges were given a white outline to better distinguish them when multiple edges overlapped. o The user can drag nodes to customize their view of the network. o Edges adapt their anchor points to the movements of the nodes. o Dragging a node will highlight all adjacent edges. • The user interface is compatible with Firefox and Chrome browsers. o File upload is via a simple HTML form element. o Nodes are displayed as interactive HTML elements. o 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…  Sliders can be locked to prevent changes.

[NAnguiano]

I added the above text in to the about page. Next will be filling out the release notes a bit more for the beta, and implementing the collapsable sections.

[kdahlquist]

Cool. Upon reading it over on the web site, I have a few minor edits to the text I'd like you to make.

Replace first sentence of first paragraph with: GRNsight is an open source web application for visualizing models of medium-scale gene regulatory networks.

Middle paragraph, change sentence beginning with "Computer representations..." to: 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.

Third paragraph, get rid of the first sentence and change the "It" in the second sentence to "GRNsight".

Under GRNsight v1.1 Beta, bullet 2, sub-bullet 2, put the word "from" in front of the word "which".

Under GRNsight v1.0, bullet 2, make the "u" of "uses" lowercase

Under GRNsight v1.0, bullet 3, sub-bullet 6, instead of "Edge thickness varies based on the weight parameters input by the user. Four thicknesses are set based on the four quartiles of the range of the input weight parameters." say "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."

In addition, it would be nice to provide some hyperlinks throughout the text. Things that can be linked:

• Loyola Marymount University (to the lmu home page)
• gene regulatory network (to the wikipedia page for it)
• Node.js (to it's page)
• Express framework (to it's page)
• D3.js (to it's page)

[NAnguiano]

The extra content has been added in, and I also added in a bit more to the Beta v1.1 release notes.

[kdahlquist]

I reviewed the content and all changes were made except:

1. Third paragraph of the top section, get rid of the first sentence and change the "It" in the second sentence to "GRNsight". (don't forget about the collapsible sections).

[kdahlquist]

New section for bottom of about page:

Funding This work is partially supported by NSF award 0921038 [link text of NSF award 0921038 to http://www.nsf.gov/awardsearch/showAward?AWD_ID=0921038](Kam D. Dahlquist, Ben G. Fitzpatrick, and Katrina Sherbina) and by the Loyola Marymount University Rains Research Assistant Program (Nicole Anguiano).

[NAnguiano]

Funding text was added. For the collapsable sections, did you want the main headers (Availability, Release Notes, Funding) to be collapsable, or the version changes (GRNsight v1.0, GRNsight v1.2) to be collapsable, or both?

[kdahlquist]

Both, if possible.

[NAnguiano]

I added the collapsable sections to both the main headers and the version changes.

[kdahlquist]

I just have one final tweak to make to the Funding section. Replace the text with:

This work is partially supported by NSF award 0921038 (Kam D. Dahlquist, Ben G. Fitzpatrick, and Katrina Sherbina) and by the Loyola Marymount University Rains Research Assistant Program (Nicole Anguiano).

[Essentially, you are keeping it the same, but adding the names after the NSF award number. Keep the link.]

[NAnguiano]

I added that final tweak.

[kdahlquist]

All done--closing.